/* LO STILE DELLE GUIDE PUBBLICHE (officeaigent.com/guida/…), in un posto solo (24/9).
   Tutte le guide e l'indice /guida/ lo linkano: una guida nuova non copia CSS, aggiunge un <link>.
   I colori arrivano da app-palette.css (token dell'app), con un valore di scorta. */
:root{
  /* 16/9: palette del redesign (logo nuovo), dagli stessi token dell'app via app-palette.css */
  --gold:var(--ag-chiaro-accent, #0F5CD6);
  --gold-line:rgba(15,92,214,.30); --gold-tint:rgba(15,92,214,.08);
  --oro-grad:linear-gradient(95deg, #0B4FC4 0%, #1466E8 48%, #0F5CD6 100%);
  --petrol:var(--ag-chiaro-accent, #0F5CD6);
  --bg:var(--ag-chiaro-bg, #EDF3FA); --bg-2:var(--ag-chiaro-bg-2, #E3ECF7); --carta:#ffffff;
  --text:var(--ag-chiaro-text, #0B2447); --testo-2:#34466A; --muted:var(--ag-chiaro-muted, #516480);
  --line:rgba(11,36,71,.12); --line-soft:rgba(11,36,71,.07);
  --ombra:0 18px 44px rgba(11,36,71,.10), 0 2px 6px rgba(11,36,71,.05);
  --avviso:#9a5b00; --avviso-bg:#fff6e5; --pill:999px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:var(--ag-chiaro-aurora, none)}
body{background:var(--bg); color:var(--text); overflow-x:clip;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; line-height:1.65; font-size:16.5px}
a{color:var(--petrol); text-underline-offset:3px}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:6px}
.skip-link{position:absolute; left:-9999px; top:8px; background:var(--carta); padding:8px 14px; border-radius:8px; z-index:400}
.skip-link:focus{left:12px}

.barra-top{position:sticky; top:0; z-index:250; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px clamp(18px,5vw,52px); background:rgba(255,255,255,.72);
  border-bottom:1px solid var(--line-soft); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px)}
.logo{display:inline-flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.08em; color:var(--text); text-decoration:none}
.logo img{width:auto; height:40px}   /* isologo argento ufficiale (16/9) */
.barra-top nav{display:flex; align-items:center; gap:14px}
.barra-top nav a{font-size:14px; font-weight:600; color:var(--testo-2); text-decoration:none; padding:8px 6px}
.barra-top nav a.btn{background:var(--petrol); color:#fff; border-radius:var(--pill); padding:9px 16px}

.wrap{width:min(1120px,100%); margin:0 auto; padding:0 clamp(18px,5vw,52px)}
.testata{padding-top:clamp(40px,8vh,80px); padding-bottom:28px}   /* i lati restano quelli di .wrap: titolo allineato al corpo */
.etichetta{display:inline-flex; align-items:center; gap:10px; font-size:11.5px; font-weight:700;
  letter-spacing:.24em; color:var(--gold); text-transform:uppercase; margin-bottom:14px}
.etichetta::after{content:""; width:40px; height:1px; background:var(--gold-line)}
h1{margin:0; font-size:clamp(30px,5.2vw,50px); line-height:1.08; letter-spacing:-.03em; font-weight:800; max-width:22ch}
h1 .serif{font-family:"Instrument Serif",Georgia,serif; font-weight:400; font-style:italic; letter-spacing:-.01em;
  background:var(--oro-grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; padding-right:.06em}
.intro{margin:16px 0 0; color:var(--testo-2); font-size:clamp(16px,1.9vw,18.5px); max-width:62ch}
.aggiornata{margin-top:14px; font-size:13.5px; color:var(--muted)}

.corpo{display:grid; grid-template-columns:1fr; gap:36px; padding-bottom:72px}
@media(min-width:980px){ .corpo{grid-template-columns:250px 1fr; gap:56px} }
.indice{align-self:start}
@media(min-width:980px){ .indice{position:sticky; top:84px} }
.indice h2{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin:0 0 10px}
.indice ol{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.indice a{display:block; padding:7px 12px; border-radius:10px; color:var(--testo-2); text-decoration:none; font-size:14.5px; font-weight:500}
.indice a:hover{background:var(--carta); color:var(--text)}

.capitolo{background:var(--carta); border:1px solid var(--line-soft); border-radius:20px; box-shadow:var(--ombra);
  padding:clamp(22px,3.5vw,38px); margin-bottom:22px}
.capitolo h2{margin:0 0 12px; font-size:clamp(21px,2.6vw,27px); line-height:1.2; letter-spacing:-.02em}
.capitolo h2 .n{color:var(--gold); margin-right:8px}
.capitolo h3{margin:22px 0 8px; font-size:17px}
.capitolo p{margin:0 0 12px}
.capitolo ol, .capitolo ul{margin:0 0 12px; padding-left:22px}
.capitolo li{margin:0 0 8px}
.capitolo li > ul{margin-top:8px}
.ui{font-weight:700; color:var(--text); white-space:nowrap}
.box{border-radius:14px; padding:14px 18px; margin:16px 0; background:var(--gold-tint); border:1px solid var(--gold-line)}
.box.avviso{background:var(--avviso-bg); border-color:rgba(154,91,0,.28)}
.box strong:first-child{display:block; margin-bottom:4px}
.box p:last-child, .box ul:last-child{margin-bottom:0}
.assistenza{display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center}
.assistenza a.btn{background:var(--petrol); color:#fff; text-decoration:none; border-radius:var(--pill); padding:11px 20px; font-weight:600}

.site-footer{border-top:1px solid var(--line); padding:26px clamp(18px,5vw,52px); display:flex; flex-wrap:wrap;
  gap:10px 24px; justify-content:space-between; color:var(--muted); font-size:13.5px}
.site-footer nav{display:flex; flex-wrap:wrap; gap:16px}
.site-footer a{color:var(--muted)}

.site-footer .social{display:flex; gap:8px; width:100%}
.site-footer .social a{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:var(--text);
  background:var(--carta); border:1px solid var(--line)}
.site-footer .social a:hover{color:var(--gold); border-color:var(--gold-line)}
.site-footer .social svg{width:17px; height:17px}
@media print{
  .barra-top, .indice, .site-footer nav, .site-footer .social, .skip-link{display:none}
  body{background:#fff; font-size:11pt}
  .corpo{display:block}
  .capitolo{box-shadow:none; border:0; padding:0; margin:0 0 18px; break-inside:avoid-page}
  a{color:inherit}
}

/* indice delle guide e rimando «Tutte le guide» */
.guide-griglia{display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); padding-bottom:72px}
.guida-card{display:flex; flex-direction:column; gap:10px; text-decoration:none; color:var(--text); background:var(--carta);
  border:1px solid var(--line-soft); border-radius:20px; box-shadow:var(--ombra); padding:24px;
  transition:transform .25s ease, border-color .25s ease}
.guida-card:hover{transform:translateY(-3px); border-color:var(--gold-line)}
.guida-card .ico{width:44px; height:44px; border-radius:13px; display:grid; place-items:center; background:var(--gold-tint); color:var(--gold)}
.guida-card h2{margin:4px 0 0; font-size:20px; letter-spacing:-.02em}
.guida-card p{margin:0; color:var(--testo-2); font-size:15px}
.guida-card .temi{margin-top:auto; padding-top:8px; font-size:13px; color:var(--muted)}
.guida-card .vai{font-weight:700; color:var(--gold); font-size:14.5px}
.torna-guide{display:flex; width:fit-content; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--gold); text-decoration:none; margin-bottom:18px}