/* =========================================================================
   DI NICCOLO & PARTNERS — DESIGN SYSTEM UNIFICATO
   Studio Legale Aste Giudiziarie
   -------------------------------------------------------------------------
   File unico di produzione. Sostituisce style.css + guida.css.
   Mobile-first. Nessuna dipendenza esterna, nessun font remoto
   (system stack: zero CLS da font-swap).

   ARCHITETTURA (leggere in quest'ordine):
     1. TOKEN        — palette, tipografia modulare, spacing 8pt, radii,
                       ombre (elevation), transizioni, layer/z-index, layout.
     2. BASE / RESET — normalizzazione, elementi globali, accessibilità.
     3. COMPONENTI   — buttons, cards, boxes, typography, section layout,
                       e tutti i componenti ufficiali del sito.
     4. UTILITIES    — helper di spacing e tipografia derivati dai token.

   REGOLA: ogni valore visivo deriva dai token. I nomi delle classi usate
   da script.js (.faq-btn, .nav-toggle, .mobile-bar, #cookie-*, [data-reveal],
   [data-tally-open]...) sono CONTRATTI FUNZIONALI e non vanno rinominati.
   ========================================================================= */

/* =========================================================================
   1. TOKEN
   ========================================================================= */
:root{
  /* ---- Palette brand (valori storici, invariati per coerenza di marca) ---- */
  --color-primary:#304F63;        /* navy istituzionale */
  --color-primary-600:#26404f;    /* navy hover/scuro */
  --color-primary-ncc:#617787;    /* superficie interna card NCC */
  --color-accent:#FAC956;         /* oro — azione primaria */
  --color-accent-strong:#ffd97a;  /* oro chiaro — hover bordo */
  --color-accent-dark:#C68A1F;    /* oro scuro — testo/accento su chiaro */
  --color-bg:#FBF7F0;             /* crema — sfondo pagina */
  --color-bg-white:#FFFFFF;
  --color-text:#304F63;
  --color-text-muted:#46586a;
  --color-text-soft:#7c8e9b;
  --color-text-on-dark:#dfe7ec;   /* testo su navy */
  --color-text-on-dark-soft:#cfd9e0;
  --color-border:#e3dccb;
  --color-success:#0F7A36;        /* WhatsApp / conferma */
  --color-success-600:#0C6B30;

  /* ---- Alias semantici (usare questi nei componenti) ---- */
  --surface-page:var(--color-bg);
  --surface-raised:var(--color-bg-white);
  --surface-invert:var(--color-primary);
  --on-invert:var(--color-bg-white);

  /* ---- Tipografia: famiglie ---- */
  --font-serif:Georgia,"Iowan Old Style","Palatino Linotype",serif; /* display/heading */
  --font-sans:-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;  /* UI/body */

  /* ---- Scala tipografica modulare (fluida, clamp mobile→desktop) ---- */
  --fs-2xs:11px;
  --fs-xs:12px;
  --fs-sm:13px;
  --fs-base:15px;
  --fs-md:clamp(15px,1.2vw + 12px,17px);
  --fs-lg:clamp(17px,2vw + 12px,19px);
  --fs-xl:clamp(19px,3vw + 12px,22px);
  --fs-2xl:clamp(22px,4vw + 12px,28px);
  --fs-3xl:clamp(26px,5vw + 12px,36px);
  --fs-4xl:clamp(34px,6vw + 14px,52px);
  --lh-tight:1.15;
  --lh-snug:1.35;
  --lh-normal:1.5;
  --lh-relaxed:1.75;
  --lh-loose:1.8;
  --tracking-caps:1.5px;

  /* ---- Spacing (sistema 8pt, con step da 4pt) ---- */
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-14:56px;
  --space-16:64px;
  --space-18:72px;

  /* ---- Raggi ---- */
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:14px;
  --radius-pill:999px;

  /* ---- Ombre (elevation) ---- */
  --shadow-1:0 2px 5px rgba(48,79,99,.06);
  --shadow-2:0 2px 5px rgba(48,79,99,.06),0 16px 30px rgba(48,79,99,.12);
  --shadow-3:0 2px 5px rgba(48,79,99,.06),0 20px 38px rgba(48,79,99,.14);
  --shadow-gold:0 10px 22px rgba(250,201,86,.4);
  --shadow-invert:0 14px 30px rgba(48,79,99,.28);
  --shadow-up:0 -6px 16px rgba(48,79,99,.1);

  /* ---- Movimento ---- */
  --ease:cubic-bezier(.16,1,.3,1);
  --dur-fast:.3s;
  --dur:.35s;
  --dur-slow:.55s;

  /* ---- Layout ---- */
  --container:1100px;   /* larghezza max sito */
  --measure:760px;      /* colonna di lettura (articoli) */
  --measure-wide:900px;

  /* ---- Z-index ---- */
  --z-header:100;
  --z-mobilebar:90;
  --z-banner:95;
  --z-modal:120;
}

/* =========================================================================
   2. BASE / RESET
   ========================================================================= */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--font-sans);color:var(--color-text);background:var(--surface-page);line-height:var(--lh-normal);}
h1,h2,h3{font-family:var(--font-serif);margin:0;font-weight:700;}
p{margin:0;}
a{text-decoration:none;color:inherit;}
ul{margin:0;padding:0;list-style:none;}
img{max-width:100%;display:block;}

.icon{width:1em;height:1em;display:inline-block;vertical-align:-0.15em;stroke:currentColor;}
.icon-sm{width:14px;height:14px;}
.icon-md{width:20px;height:20px;}

/* Skip link — accessibilità tastiera */
.skip-link{position:absolute;left:-999px;top:auto;background:var(--color-accent);color:var(--color-primary);padding:10px 16px;border-radius:var(--radius-sm);font-weight:700;z-index:1000;}
.skip-link:focus{left:12px;top:12px;}

/* Focus visibile — WCAG 2.1 AA */
a:focus-visible,button:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:4px;}

/* =========================================================================
   3. COMPONENTI
   ========================================================================= */

/* ------------------------------------------------------------------ *
 * 3.1 BUTTONS — primary (gold) · secondary (outline) · ghost · whatsapp
 * ------------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-md);font-weight:700;font-size:var(--fs-sm);padding:12px 20px;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur-fast) var(--ease);cursor:pointer;border:none;}
.btn-gold{background:var(--color-accent);color:var(--color-primary);}
.btn-gold:hover{transform:translateY(-2px);box-shadow:var(--shadow-gold);}
.btn-outline{border:1.5px solid var(--color-accent);color:var(--color-accent);background:transparent;}
.btn-outline:hover{background:rgba(250,201,86,.14);transform:translateY(-2px);}
.btn-whatsapp{background:var(--color-success);color:#fff;}
.btn-whatsapp:hover{background:var(--color-success-600);transform:translateY(-2px);}
.btn-sm{font-size:var(--fs-xs);padding:8px 14px;}

/* ------------------------------------------------------------------ *
 * 3.2 NAVBAR / HEADER
 * ------------------------------------------------------------------ */
.site-header{background:var(--surface-page);border-bottom:0.5px solid var(--color-border);position:sticky;top:0;z-index:var(--z-header);}
.navbar{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;max-width:var(--container);margin:0 auto;position:relative;}
.brand{display:flex;flex-direction:column;gap:2px;}
.brand-logo{height:28px;width:auto;display:block;}
.nav-toggle{background:none;border:none;color:var(--color-text);cursor:pointer;padding:6px;}
.nav-toggle svg{width:22px;height:22px;}
.nav-menu{display:none;flex-direction:column;gap:14px;position:absolute;top:100%;left:0;right:0;background:var(--surface-raised);padding:16px 20px;border-bottom:0.5px solid var(--color-border);font-size:var(--fs-sm);}
.nav-menu.open{display:flex;}
.nav-menu a{padding:6px 0;display:block;}
@media (min-width:768px){
  .nav-toggle{display:none;}
  .nav-menu{display:flex;flex-direction:row;position:static;background:none;border:none;padding:0;gap:22px;font-size:var(--fs-xs);color:var(--color-text-muted);}
  .nav-menu a{position:relative;padding-bottom:5px;}
  .nav-menu a::after{content:'';position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:var(--color-accent);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-fast) var(--ease);}
  .nav-menu a:hover::after,.nav-menu a[aria-current="page"]::after{transform:scaleX(1);}
}

/* ------------------------------------------------------------------ *
 * 3.3 HERO (home)
 * ------------------------------------------------------------------ */
.hero{background:var(--surface-invert);color:var(--on-invert);padding:64px 20px;}
.hero-inner{max-width:var(--container);margin:0 auto;display:flex;flex-direction:column;gap:var(--space-8);}
.eyebrow{font-size:var(--fs-2xs);letter-spacing:var(--tracking-caps);color:var(--color-accent-dark);font-weight:700;text-transform:uppercase;margin-bottom:10px;}
.hero h1{font-size:var(--fs-4xl);line-height:var(--lh-tight);color:var(--color-bg);margin-bottom:18px;max-width:620px;}
.hero-sub{font-size:var(--fs-md);line-height:var(--lh-relaxed);color:#d7e1e8;max-width:560px;margin-bottom:26px;}
.hero-badges{display:flex;flex-direction:column;gap:10px;font-size:var(--fs-base);color:var(--color-text-on-dark);margin:24px 0 12px;}
.hero-badges svg{color:var(--color-accent);}
.hero-locations{display:flex;gap:18px;font-size:var(--fs-sm);color:var(--color-text-on-dark);flex-wrap:wrap;}
.hero-locations svg{color:var(--color-accent);}
.hero-visual{display:flex;justify-content:center;}
@media (min-width:1024px){
  .hero-inner{flex-direction:row;align-items:center;justify-content:space-between;}
  .hero-text{flex:1.1;}
  .hero-visual{flex:.9;}
  .hero h1{max-width:700px;}
}

/* Card "Il numero che conta" (NCC) */
.nc-card{width:100%;max-width:260px;border-radius:var(--radius-sm);padding:20px 22px 18px;text-align:left;
  background:var(--color-primary-ncc);border:1.5px solid var(--color-accent);
  box-shadow:0 2px 6px rgba(0,0,0,.18),0 18px 30px rgba(0,0,0,.26);
  transition:opacity .8s var(--ease),transform var(--dur-slow) var(--ease),filter .8s var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.nc-card[data-reveal]{opacity:0;transform:translateY(28px) scale(.97);filter:blur(8px);}
.nc-card[data-reveal].in-view{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}
.nc-card:hover{transform:translateY(-5px);box-shadow:0 4px 10px rgba(0,0,0,.24),0 26px 44px rgba(0,0,0,.34);border-color:var(--color-accent-strong);}
.nc-label{font-size:9px;color:var(--color-accent);font-weight:700;letter-spacing:1.3px;text-transform:uppercase;margin:0;}
.nc-divider{width:22px;height:1.5px;background:var(--color-accent);margin:7px 0;transition:width .4s var(--ease);}
.nc-card:hover .nc-divider{width:28px;}
.nc-number{font-family:var(--font-serif);font-size:64px;color:var(--color-accent);font-weight:700;line-height:.92;margin:2px 0 10px;display:inline-block;transition:transform var(--dur) var(--ease);}
.nc-card:hover .nc-number{transform:scale(1.04);}
.nc-title{font-family:var(--font-serif);font-size:13.5px;color:var(--color-bg-white);font-weight:700;line-height:var(--lh-snug);margin-bottom:9px;transition:transform var(--dur) var(--ease);}
.nc-card:hover .nc-title{transform:translateY(-2px);}
@media (min-width:480px){ .nc-number{font-size:84px;} }

/* ------------------------------------------------------------------ *
 * 3.4 SECTION LAYOUT — sezioni standard
 * ------------------------------------------------------------------ */
.persona-section{position:relative;overflow:hidden;text-align:center;background:var(--surface-raised);padding:56px 20px;}
.persona-inner{position:relative;z-index:1;max-width:580px;margin:0 auto;}
.persona-section h2{font-size:var(--fs-3xl);color:var(--color-text);letter-spacing:-.3px;}
.goldline{width:46px;height:2px;background:var(--color-accent);margin:18px auto 20px;}
.persona-section p{font-size:var(--fs-sm);color:var(--color-text-muted);line-height:var(--lh-relaxed);margin-bottom:22px;}
@media (min-width:768px){ .persona-section{padding:72px 20px;} }
/* Coppia di sezioni persona affiancate su desktop/tablet, impilate su mobile */
@media (min-width:768px){ .persona-duo{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;} .persona-duo .persona-section{height:100%;} }

.perche-section{background:var(--surface-raised);padding:34px 20px;}
.perche-section h2{font-size:var(--fs-xl);text-align:center;margin-bottom:18px;}
.card-grid{display:grid;grid-template-columns:1fr;gap:12px;max-width:var(--container);margin:0 auto;}
@media (min-width:600px){ .card-grid{grid-template-columns:1fr 1fr;} }

/* ------------------------------------------------------------------ *
 * 3.5 CARDS — informative (.card) · navigation (.module/.pn-card) ·
 *      conversion (.pillar-nav .next-step)
 * ------------------------------------------------------------------ */
.card{background:var(--surface-raised);border:0.5px solid var(--color-border);border-radius:var(--radius-lg);padding:16px;position:relative;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);}
.card::before{content:'';position:absolute;top:0;left:14px;right:14px;height:2px;background:var(--color-accent);transform:scaleX(0);transition:transform var(--dur) var(--ease);}
.card:hover::before{transform:scaleX(1);}
.card:hover{transform:translateY(-6px);box-shadow:0 2px 5px rgba(48,79,99,.06),0 18px 34px rgba(48,79,99,.13);border-color:var(--color-accent);}
.card svg{color:var(--color-accent-dark);margin-bottom:8px;}
.card p{font-weight:700;font-size:var(--fs-sm);}

/* ------------------------------------------------------------------ *
 * 3.6 TIMELINE (home "come lavoriamo")
 * ------------------------------------------------------------------ */
.timeline-section{background:var(--surface-invert);color:var(--on-invert);padding:34px 20px;}
.timeline-section h2{font-size:var(--fs-xl);text-align:center;color:var(--color-bg-white);margin-bottom:22px;}
.timeline{display:flex;flex-direction:column;gap:18px;max-width:var(--container);margin:0 auto;}
.timeline li{display:flex;align-items:baseline;gap:10px;}
.timeline li[data-reveal]{opacity:0;transform:translateY(16px);filter:blur(4px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease),filter var(--dur-slow) var(--ease);}
.timeline li[data-reveal].in-view{opacity:1;transform:translateY(0);filter:blur(0);}
.timeline li:nth-child(1){transition-delay:0ms;}
.timeline li:nth-child(2){transition-delay:100ms;}
.timeline li:nth-child(3){transition-delay:200ms;}
.timeline li:nth-child(4){transition-delay:300ms;}
.timeline li:nth-child(5){transition-delay:400ms;}
.step-num{font-family:var(--font-serif);color:var(--color-accent);font-size:22px;font-weight:700;display:inline-block;transition:transform .45s var(--ease),filter var(--dur) var(--ease);}
.timeline li:hover .step-num{transform:translateY(-4px) scale(1.22);filter:brightness(1.25);}
.step-label{font-size:var(--fs-xs);color:#e7eef2;transition:color var(--dur) var(--ease);}
.timeline li:hover .step-label{color:#fff;}
@media (min-width:768px){
  .timeline{flex-direction:row;justify-content:space-between;border-top:1px solid rgba(250,201,86,.35);padding-top:18px;}
  .timeline li{flex-direction:column;align-items:center;text-align:center;gap:6px;flex:1;}
}

/* ------------------------------------------------------------------ *
 * 3.7 PROFESSIONISTI
 * ------------------------------------------------------------------ */
.prof-section{background:var(--surface-invert);color:var(--on-invert);padding:34px 20px;}
.prof-section h2{font-size:var(--fs-3xl);letter-spacing:-.3px;text-align:center;color:var(--color-bg-white);margin-bottom:6px;}
.prof-sub{font-size:var(--fs-sm);text-align:center;color:var(--color-text-on-dark-soft);margin-bottom:20px;}
.prof-grid{display:grid;grid-template-columns:1fr;gap:16px;max-width:var(--container);margin:0 auto;}
@media (min-width:700px){ .prof-grid{grid-template-columns:1fr 1fr;} }
.prof-card{background:var(--surface-raised);border-radius:var(--radius-lg);padding:22px;color:var(--color-text);box-shadow:var(--shadow-2);}
.prof-avatar{position:relative;width:92px;height:92px;margin-bottom:12px;border-radius:50%;overflow:hidden;}
.prof-avatar img{position:absolute;inset:0;z-index:1;width:92px;height:92px;object-fit:cover;}
.prof-avatar-fallback{position:absolute;inset:0;margin:auto;z-index:0;width:42px;height:42px;color:var(--color-text-soft);}
.prof-name{font-family:var(--font-serif);font-size:var(--fs-lg);font-weight:700;}
.prof-role{font-size:var(--fs-sm);color:var(--color-text-muted);margin-bottom:12px;}
.prof-contacts{display:grid;gap:6px;font-size:var(--fs-sm);color:var(--color-text-muted);margin-bottom:14px;}
.prof-contacts svg{color:var(--color-accent-dark);}
.prof-contacts a:hover{color:var(--color-accent-dark);}

/* ------------------------------------------------------------------ *
 * 3.8 TRUST BAR
 * ------------------------------------------------------------------ */
.trust-bar{background:var(--surface-page);text-align:center;padding:26px 20px;display:flex;flex-direction:column;gap:6px;}
.trust-bar p:first-child{font-family:var(--font-serif);font-weight:700;color:var(--color-text);font-size:var(--fs-md);}
.trust-bar p{font-size:var(--fs-sm);color:var(--color-text-muted);}
@media (min-width:600px){ .trust-bar{flex-direction:row;justify-content:center;gap:0;} .trust-bar p:not(:first-child){border-left:0.5px solid var(--color-border);padding-left:18px;margin-left:18px;} }

/* ------------------------------------------------------------------ *
 * 3.9 FAQ (accordion — hook JS: .faq-btn/.faq-panel/.faq-answer/.faq-item)
 * ------------------------------------------------------------------ */
.faq-section{background:var(--surface-raised);padding:34px 20px;}
.faq-section h2{font-size:var(--fs-xl);text-align:center;margin-bottom:14px;}
.faq-list{max-width:var(--measure);margin:0 auto;}
.faq-q-heading{margin:0;font-size:1em;font-weight:400;}
.faq-item{border-bottom:0.5px solid var(--color-border);}
.faq-btn{cursor:pointer;font-weight:700;font-size:var(--fs-sm);padding:12px 0;display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:none;text-align:left;color:var(--color-text);font-family:inherit;position:relative;transition:color var(--dur-fast) ease,transform var(--dur-fast) ease;}
.faq-btn::before{content:'';position:absolute;left:-14px;top:50%;width:2px;height:55%;background:var(--color-accent);transform:translateY(-50%) scaleY(0);transform-origin:center;transition:transform var(--dur-fast) ease;}
.faq-btn:hover{transform:translateX(2px);}
.faq-btn:hover::before{transform:translateY(-50%) scaleY(1);}
.faq-chevron{transition:transform .45s var(--ease);flex-shrink:0;margin-left:10px;}
.faq-btn[aria-expanded="true"] .faq-chevron{transform:rotate(180deg);}
.faq-panel{overflow:hidden;}
.faq-answer{font-size:12.5px;color:var(--color-text-muted);padding-bottom:14px;line-height:var(--lh-normal);margin:0;opacity:0;transform:translateY(8px);filter:blur(4px);transition:opacity .5s var(--ease),transform .5s var(--ease),filter .5s var(--ease);}
.faq-answer.show{opacity:1;transform:translateY(0);filter:blur(0);}

/* ------------------------------------------------------------------ *
 * 3.10 CTA FINALE (blocco conversione istituzionale)
 * ------------------------------------------------------------------ */
.cta-final{background:var(--surface-invert);color:var(--on-invert);text-align:center;padding:34px 20px;}
.cta-final h2{font-size:var(--fs-xl);color:var(--color-bg-white);margin-bottom:8px;}
.cta-final p{font-size:var(--fs-sm);color:var(--color-text-on-dark-soft);max-width:480px;margin:0 auto 16px;}
.cta-buttons{display:flex;flex-direction:column;gap:10px;align-items:center;}
@media (min-width:480px){ .cta-buttons{flex-direction:row;justify-content:center;} }

/* ------------------------------------------------------------------ *
 * 3.11 FOOTER
 * ------------------------------------------------------------------ */
.site-footer{padding:18px 20px;font-size:var(--fs-2xs);color:var(--color-text-soft);display:flex;flex-direction:column;gap:6px;background:var(--surface-page);text-align:center;}
@media (min-width:600px){ .site-footer{flex-direction:row;justify-content:space-between;text-align:left;max-width:var(--container);margin:0 auto;} }
.site-footer a:hover{text-decoration:underline;}
.footer-cookie-link{background:none;border:none;color:inherit;font:inherit;cursor:pointer;padding:0;text-decoration:none;}
.footer-cookie-link:hover{text-decoration:underline;}

/* ------------------------------------------------------------------ *
 * 3.12 REVEAL allo scroll (hook JS: [data-reveal] → .in-view)
 * ------------------------------------------------------------------ */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
[data-reveal].in-view{opacity:1;transform:translateY(0);}

/* ------------------------------------------------------------------ *
 * 3.13 MOBILE CONVERSION BAR (hook JS: .mobile-bar)
 * ------------------------------------------------------------------ */
.mobile-bar{display:none;}
@media (max-width:767px){
  .mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-mobilebar);display:flex;gap:8px;background:var(--surface-raised);border-top:0.5px solid var(--color-border);padding:10px 14px;padding-bottom:max(10px, env(safe-area-inset-bottom));box-shadow:var(--shadow-up);}
  .mobile-bar .btn{flex:1;justify-content:center;font-size:var(--fs-sm);padding:11px 10px;}
  body{padding-bottom:64px;}
}

/* ------------------------------------------------------------------ *
 * 3.14 COOKIE CONSENT — banner + pannello (hook JS: #cookie-*)
 * ------------------------------------------------------------------ */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-banner);background:var(--surface-raised);border-top:0.5px solid var(--color-border);box-shadow:var(--shadow-up);transform:translateY(100%);transition:transform .5s var(--ease);}
.cookie-banner.is-visible{transform:translateY(0);}
.cookie-banner-inner{max-width:var(--container);margin:0 auto;padding:16px 20px;display:flex;flex-direction:column;gap:12px;}
.cookie-banner-text{font-size:var(--fs-xs);color:var(--color-text-muted);line-height:var(--lh-normal);}
.cookie-banner-text a{color:var(--color-accent-dark);text-decoration:underline;}
.cookie-banner-actions{display:flex;flex-wrap:wrap;gap:8px;}
@media (min-width:700px){
  .cookie-banner-inner{flex-direction:row;align-items:center;justify-content:space-between;}
  .cookie-banner-text{flex:1;}
  .cookie-banner-actions{flex-shrink:0;}
}
@media (max-width:767px){ .cookie-banner{bottom:64px;} }

.cookie-panel{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .4s var(--ease);}
.cookie-panel.is-visible{opacity:1;}
.cookie-panel[hidden]{display:none;}
.cookie-panel-overlay{position:absolute;inset:0;background:rgba(48,79,99,.45);}
.cookie-panel-inner{position:relative;background:var(--surface-raised);border-radius:var(--radius-lg);max-width:520px;width:100%;max-height:90vh;overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.3);}
.cookie-panel-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:0.5px solid var(--color-border);}
.cookie-panel-header h2{font-size:var(--fs-lg);}
.cookie-panel-close{background:none;border:none;font-size:24px;line-height:1;cursor:pointer;color:var(--color-text-muted);}
.cookie-panel-body{padding:18px 20px;display:grid;gap:16px;}
.cookie-category-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px;}
.cookie-category-name{font-weight:700;font-size:var(--fs-sm);color:var(--color-text);}
.cookie-category-locked{font-size:var(--fs-xs);color:var(--color-text-soft);}
.cookie-category-desc{font-size:var(--fs-xs);color:var(--color-text-muted);line-height:var(--lh-normal);}
.cookie-toggle{width:42px;height:24px;border-radius:var(--radius-pill);border:none;background:var(--color-border);position:relative;cursor:pointer;transition:background var(--dur-fast) var(--ease);flex-shrink:0;}
.cookie-toggle[aria-checked="true"]{background:var(--color-accent);}
.cookie-toggle-dot{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform var(--dur-fast) var(--ease);}
.cookie-toggle[aria-checked="true"] .cookie-toggle-dot{transform:translateX(18px);}
.cookie-panel-footer{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;padding:16px 20px;border-top:0.5px solid var(--color-border);}

/* ------------------------------------------------------------------ *
 * 3.15 GUIDA ASTE — HERO di sezione/modulo
 * ------------------------------------------------------------------ */
.guida-hero{background:var(--surface-invert);color:var(--on-invert);padding:52px 20px 48px;}
.guida-hero-inner{max-width:820px;margin:0 auto;}
.guida-hero h1{font-size:var(--fs-3xl);line-height:var(--lh-tight);color:var(--color-bg);max-width:720px;margin-bottom:16px;}
.guida-hero .hero-sub{font-size:var(--fs-md);line-height:var(--lh-relaxed);color:#d7e1e8;max-width:660px;}
.guida-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px;font-size:var(--fs-xs);color:#bcccd6;}
.guida-meta span{display:inline-flex;align-items:center;gap:6px;}
.guida-meta svg{color:var(--color-accent);}
@media (min-width:768px){ .guida-hero{padding:70px 20px;} }
.guida-hero.is-hub h1{max-width:760px;}

/* Breadcrumb */
.breadcrumb{max-width:820px;margin:0 auto;padding:14px 20px 0;font-size:var(--fs-xs);color:var(--color-text-soft);}
.breadcrumb a{color:var(--color-text-muted);}
.breadcrumb a:hover{color:var(--color-accent-dark);}
.breadcrumb span{color:var(--color-text-soft);}

/* Sezioni HUB */
.guida-section{max-width:820px;margin:0 auto;padding:42px 20px;}
.guida-section.narrow{max-width:720px;}
.guida-kicker{font-size:var(--fs-2xs);letter-spacing:var(--tracking-caps);color:var(--color-accent-dark);font-weight:700;text-transform:uppercase;margin-bottom:8px;}
.guida-section h2{font-family:var(--font-serif);font-size:var(--fs-2xl);color:var(--color-text);letter-spacing:-.3px;margin-bottom:8px;font-weight:700;}
.guida-section h2 + .goldline{margin:14px 0 20px;}
.guida-section p{font-size:var(--fs-md);color:var(--color-text-muted);line-height:var(--lh-relaxed);margin-bottom:16px;}

/* 3.16 CARDS di navigazione premium (moduli) */
.modules{display:grid;grid-template-columns:1fr;gap:14px;margin-top:22px;}
@media (min-width:700px){ .modules{grid-template-columns:1fr 1fr;} }
.module{display:flex;flex-direction:column;background:var(--surface-raised);border:0.5px solid var(--color-border);border-radius:var(--radius-xl);padding:24px;position:relative;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);}
.module::before{content:'';position:absolute;top:0;left:16px;right:16px;height:2px;background:var(--color-accent);transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease);}
.module:hover::before{transform:scaleX(1);}
.module:hover{transform:translateY(-6px);box-shadow:var(--shadow-3);border-color:var(--color-accent);}
.module-num{font-family:var(--font-serif);font-size:var(--fs-sm);font-weight:700;color:var(--color-accent-dark);letter-spacing:1.2px;}
.module svg.icon-md{color:var(--color-accent-dark);margin:8px 0 10px;}
.module h3{font-family:var(--font-serif);font-size:var(--fs-xl);color:var(--color-text);margin-bottom:8px;font-weight:700;}
.module p{font-size:14.5px;color:var(--color-text-muted);line-height:var(--lh-relaxed);margin-bottom:16px;flex:1;}
.module-cta{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:700;color:var(--color-accent-dark);}
.module:hover .module-cta{color:var(--color-primary);}
.module-cta svg{transition:transform var(--dur) var(--ease);}
.module:hover .module-cta svg{transform:translateX(4px);}

/* 3.17 ARTICOLO / modulo: colonna di lettura */
.article{max-width:var(--measure);margin:0 auto;padding:8px 20px 20px;}
.article .lead{font-size:var(--fs-lg);color:var(--color-text);line-height:var(--lh-relaxed);margin-bottom:16px;}
.article h2{font-family:var(--font-serif);font-size:var(--fs-2xl);color:var(--color-text);letter-spacing:-.2px;margin:40px 0 6px;font-weight:700;}
.article h2 + .goldline{margin:12px 0 18px;}
.article h3{font-family:var(--font-serif);font-size:var(--fs-lg);color:var(--color-text);margin:26px 0 8px;font-weight:700;}
.article p{font-size:var(--fs-md);color:var(--color-text-muted);line-height:var(--lh-loose);margin-bottom:16px;}
.article p strong{color:var(--color-text);}
.article ul.clean{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:9px;}
.article ul.clean li{position:relative;padding-left:26px;font-size:var(--fs-base);color:var(--color-text-muted);line-height:var(--lh-snug);}
.article ul.clean li svg{position:absolute;left:0;top:3px;color:var(--color-accent-dark);}

/* Indice (TOC) */
.toc{background:var(--surface-raised);border:0.5px solid var(--color-border);border-radius:var(--radius-lg);padding:20px 22px;margin:26px 0 8px;}
.toc p{font-size:var(--fs-2xs);letter-spacing:1.3px;text-transform:uppercase;color:var(--color-accent-dark);font-weight:700;margin-bottom:12px;}
.toc ol{list-style:none;counter-reset:toc;display:grid;gap:9px;}
.toc li{counter-increment:toc;font-size:14.5px;}
.toc li a{color:var(--color-text-muted);display:flex;gap:10px;align-items:baseline;}
.toc li a::before{content:counter(toc,decimal-leading-zero);font-family:var(--font-serif);color:var(--color-accent-dark);font-weight:700;font-size:var(--fs-sm);}
.toc li a:hover{color:var(--color-accent-dark);}

/* 3.18 BOXES — highlight ("Da ricordare") · warning ("Attenzione") · cta (micro) */
.box-remember{background:#fff;border:0.5px solid var(--color-border);border-left:3px solid var(--color-accent);border-radius:var(--radius-md);padding:18px 20px;margin:24px 0;}
.box-remember .box-label{font-size:var(--fs-2xs);letter-spacing:1.2px;text-transform:uppercase;color:var(--color-accent-dark);font-weight:700;display:flex;align-items:center;gap:7px;margin-bottom:8px;}
.box-remember p{margin-bottom:0;font-size:15.5px;color:var(--color-text);line-height:var(--lh-relaxed);}
.box-attention{background:#fff;border:0.5px solid var(--color-border);border-left:3px solid var(--color-accent);border-radius:var(--radius-md);padding:18px 20px;margin:24px 0;}
.box-attention .box-label{font-size:var(--fs-2xs);letter-spacing:1.2px;text-transform:uppercase;color:var(--color-accent-dark);font-weight:700;display:flex;align-items:center;gap:7px;margin-bottom:8px;}
.box-attention p{margin-bottom:0;font-size:15.5px;color:var(--color-text);line-height:var(--lh-relaxed);}

/* Timeline della procedura (editoriale) */
.proc-timeline{list-style:none;margin:22px 0 8px;padding:0;position:relative;}
.proc-timeline::before{content:'';position:absolute;left:15px;top:6px;bottom:6px;width:2px;background:var(--color-border);}
.proc-timeline li{position:relative;padding:0 0 22px 46px;}
.proc-timeline li:last-child{padding-bottom:0;}
.proc-timeline .dot{position:absolute;left:6px;top:0;width:20px;height:20px;border-radius:50%;background:var(--color-accent);color:var(--color-primary);font-family:var(--font-serif);font-weight:700;font-size:var(--fs-2xs);display:flex;align-items:center;justify-content:center;border:2px solid var(--color-bg);}
.proc-timeline h3{margin:0 0 4px;font-size:var(--fs-md);}
.proc-timeline p{margin:0;font-size:var(--fs-base);}

/* 3.19 MICRO-CTA (prompt di conversione integrato) */
.micro-cta{display:flex;align-items:center;gap:14px;background:var(--surface-raised);border:0.5px solid var(--color-border);border-left:3px solid var(--color-accent);border-radius:var(--radius-md);padding:16px 18px;margin:26px 0;transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease),border-color var(--dur) var(--ease);}
.micro-cta:hover{box-shadow:var(--shadow-1),0 14px 26px rgba(48,79,99,.10);border-color:var(--color-accent);}
.micro-cta .mc-body{flex:1;}
.micro-cta .mc-body p{margin:0;font-size:var(--fs-base);color:var(--color-text-muted);line-height:var(--lh-snug);}
.micro-cta .mc-body strong{color:var(--color-text);}
.micro-cta a.mc-link{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:700;color:var(--color-accent-dark);}
.micro-cta a.mc-link:hover{color:var(--color-primary);}
.micro-cta a.mc-link svg{transition:transform var(--dur) var(--ease);}
.micro-cta a.mc-link:hover svg{transform:translateX(4px);}
@media (max-width:560px){ .micro-cta{flex-direction:column;align-items:flex-start;gap:10px;} }

/* FAQ integrate nel flusso */
.flow-faq{margin:22px 0 8px;}
.flow-faq .qa{padding:16px 0;border-top:0.5px solid var(--color-border);}
.flow-faq .qa:last-child{border-bottom:0.5px solid var(--color-border);}
.flow-faq .q{font-family:var(--font-serif);font-weight:700;color:var(--color-text);font-size:var(--fs-md);margin-bottom:6px;}
.flow-faq .a{font-size:15.5px;color:var(--color-text-muted);line-height:var(--lh-relaxed);margin:0;}

/* 3.20 Navigazione tra moduli (percorso) */
.pillar-nav{background:var(--surface-raised);border-top:0.5px solid var(--color-border);border-bottom:0.5px solid var(--color-border);}
.pillar-nav-inner{max-width:var(--measure);margin:0 auto;padding:40px 20px;}
.pillar-nav .guida-kicker{margin-bottom:6px;}
.pillar-nav h2{font-family:var(--font-serif);font-size:var(--fs-2xl);color:var(--color-text);margin-bottom:18px;font-weight:700;}
.next-step{display:flex;align-items:center;gap:14px;background:var(--color-accent);color:var(--color-primary);border-radius:var(--radius-lg);padding:22px 26px;margin:0 0 16px;text-decoration:none;box-shadow:var(--shadow-1);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.next-step:hover{transform:translateY(-3px);box-shadow:0 2px 6px rgba(48,79,99,.08),0 14px 28px rgba(198,138,31,.20);}
.next-step .ns-body{flex:1;}
.next-step .ns-k{font-size:var(--fs-2xs);letter-spacing:1.4px;text-transform:uppercase;color:var(--color-text-muted);font-weight:700;}
.next-step .ns-t{font-family:var(--font-serif);font-size:var(--fs-lg);font-weight:700;color:var(--color-primary);margin-top:3px;}
.next-step .ns-arrow{color:var(--color-primary);flex-shrink:0;}
.next-step:hover .ns-arrow{transform:translateX(4px);transition:transform var(--dur) var(--ease);}
.pn-grid{display:grid;grid-template-columns:1fr;gap:12px;}
@media (min-width:640px){ .pn-grid{grid-template-columns:1fr 1fr;} }
.pn-card{display:flex;flex-direction:column;background:#fff;border:0.5px solid var(--color-border);border-radius:var(--radius-lg);padding:18px;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);}
.pn-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--color-accent);}
.pn-card .pn-num{font-family:var(--font-serif);font-size:var(--fs-xs);font-weight:700;color:var(--color-accent-dark);letter-spacing:1px;}
.pn-card h3{font-family:var(--font-serif);font-size:var(--fs-md);margin:5px 0 6px;font-weight:700;}
.pn-card p{font-size:var(--fs-sm);color:var(--color-text-muted);line-height:var(--lh-snug);margin:0 0 12px;flex:1;}
.pn-card .pn-go{font-size:var(--fs-sm);font-weight:700;color:var(--color-accent-dark);display:inline-flex;align-items:center;gap:6px;}
.pn-card:hover .pn-go{color:var(--color-primary);}

/* Back link */
.guida-backlink{max-width:var(--measure);margin:0 auto;padding:6px 20px 56px;}
.guida-backlink a{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:600;color:var(--color-text-muted);}
.guida-backlink a:hover{color:var(--color-accent-dark);}
.guida-backlink .back-hub svg{transform:rotate(180deg);}

/* ------------------------------------------------------------------ *
 * 3.21 PAGINE LEGALI (contenuto testuale privacy/cookie)
 * ------------------------------------------------------------------ */
.legal-main{max-width:var(--measure);margin:0 auto;padding:40px 20px 56px;}
.legal-main h1{font-size:var(--fs-3xl);margin-bottom:8px;}
.legal-main h2{font-size:var(--fs-lg);margin:28px 0 8px;}
.legal-main p,.legal-main li{font-size:var(--fs-base);color:var(--color-text-muted);line-height:var(--lh-relaxed);}
.legal-main a{color:var(--color-accent-dark);text-decoration:underline;}

/* =========================================================================
   4. UTILITIES (derivate dai token — per future estensioni)
   ========================================================================= */
.u-container{max-width:var(--container);margin-inline:auto;}
.u-measure{max-width:var(--measure);margin-inline:auto;}
.u-mt-4{margin-top:var(--space-4);}
.u-mt-8{margin-top:var(--space-8);}
.u-text-center{text-align:center;}

/* =========================================================================
   5. ACCESSIBILITÀ MOTORIA — riduzione movimento
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:0.001ms!important;animation-iteration-count:1!important;transition-duration:0.001ms!important;}
  [data-reveal]{opacity:1!important;transform:none!important;}
  .faq-answer{filter:none!important;}
}