/* ==========================================================================
   danielestanhome.it — Daniele Pizziolo, consulente Stanhome, Zero Branco (TV)
   Concept «TE LO DICO IO» · scheletro 2 · la colonna e il perno
   Sito realizzato da OnlinePerTutti.com
   Zero dipendenze: font serviti da qui, nessun CDN, nessun cookie di terzi.
   ========================================================================== */

/* ---------- 1 · FONT — le due famiglie vere di Stanhome ---------- */
@font-face{
  font-family:'Bricolage Grotesque';src:url('../fonts/bricolage-grotesque-var-latin.woff2') format('woff2');
  font-weight:200 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Sans';src:url('../fonts/instrument-sans-var-latin.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- 2 · TOKEN — campionati dai CSS di stanhome.it ---------- */
:root{
  /* ── PALETTE STANHOME, campionata dai blocchi veri del sito ufficiale ──
     La pagina è BIANCA. Il navy è il testo. I colori sono blocchi pieni. */
  --blu:#00204A;            /* blu del logo (fill dentro logo.svg) */
  --blu-scuro:#00152F;
  --blu-tenue:#EDF1F6;
  --pesca:#FFBA9C;          /* card promo — è il colore dell'apertura di stanhome.it */
  --rosa:#F887AB;
  --magenta:#F04D7E;
  --bordeaux:#A61C49;
  --salvia:#82AC85;         /* fascia a tutta larghezza */
  --acqua:#009E83;
  --sabbia:#C39880;
  --corallo:#E75E6F;
  --wa:#25D366;             /* colore di WhatsApp: è l'unica azione del sito */
  --bianco:#FFFFFF;
  --fondo:#F5F5F5;
  --bordo:rgba(0,29,70,.16);
  --testo:#001D46;
  --testo-2:rgba(0,29,70,.72);
  /* Stanhome squadra le fasce (raggio 0) ma arrotonda le card promo di 10px */
  --r-card:10px;

  --font-t:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-c:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* scala grande: il pubblico ha dai 55 anni in su */
  --t-s:1rem; --t-b:1.1875rem; --t-m:1.3125rem;
  --t-l:clamp(1.5rem,1.2rem + 1.4vw,2rem);
  --t-xl:clamp(1.75rem,1.3rem + 2.2vw,2.5rem);
  --t-2xl:clamp(2.1rem,1.25rem + 3.9vw,4rem);

  --sp:clamp(3.25rem,7vw,6rem);
  --gutter:clamp(1.125rem,4vw,2rem);
  --max:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --barra:0px;              /* altezza della fascia-perno su telefono */
}

/* Stanhome è squadrato: raggio 0 e nessuna ombra. È la sua cifra formale. */
*,*::before,*::after{box-sizing:border-box}

/* ---------- 3 · BASE ---------- */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bianco);color:var(--testo);
  font-family:var(--font-c);font-size:var(--t-b);line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding-bottom:var(--barra);
}
img,svg,video{max-width:100%;display:block}
img{height:auto}
a{color:var(--blu);text-underline-offset:3px}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--font-t);line-height:1.15;letter-spacing:-.02em;margin:0;text-wrap:balance}
p{margin:0 0 1rem;max-width:64ch;text-wrap:pretty}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--blu);outline-offset:3px}

.contenitore{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.sezione{padding-block:var(--sp);position:relative}
.sezione--fondo{background:var(--fondo)}
/* ── FASCE A TINTA PIATTA, raggio 0 — è così che Stanhome divide la pagina ── */
.sezione--salvia{background:var(--salvia)}
.sezione--salvia .titolo-sez,.sezione--salvia .occhiello{color:var(--blu)}
.sezione--salvia .intro-sez,.sezione--salvia p{color:rgba(0,32,74,.82)}
/* dentro il riquadro blu il testo torna bianco: la riga qui sopra lo colorava di blu su blu */
.sezione--salvia .riquadro--blu p{color:rgba(255,255,255,.9)}
.sezione--salvia .riquadro--blu .riquadro__chiave{color:#fff}
.sezione--navy{background:var(--blu);color:#fff}
.sezione--navy .titolo-sez{color:#fff}
.sezione--navy .occhiello{color:var(--pesca)}
.sezione--navy .intro-sez,.sezione--navy p{color:rgba(255,255,255,.86)}
.sezione--navy .riquadro{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22);color:#fff}
.sezione--navy .riquadro__eti{color:rgba(255,255,255,.7)}
.sezione--navy .btn--linea-blu{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.7)}
.sezione--navy .btn--linea-blu:hover{--bg:#fff;--fg:var(--blu);--bd:#fff}
.sezione--navy .punto i{background:var(--pesca)}

/* ── LA FASCIA DEL MARCHIO: il logo grande, dichiarato ── */
.marchio-fascia{background:var(--blu);color:#fff;padding-block:clamp(1.6rem,4vw,2.4rem)}
.marchio-fascia__in{display:flex;justify-content:center;text-align:center}
.marchio-fascia p{margin:0;font-size:clamp(1.0625rem,.95rem + .5vw,1.3125rem);color:rgba(255,255,255,.9);max-width:54ch;line-height:1.45}
.marchio-fascia b{color:#fff;font-weight:700}
.solo-lettori{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.salta{position:absolute;left:-9999px;top:0;z-index:300;background:var(--blu);color:#fff;padding:.9rem 1.4rem;font-weight:600}
.salta:focus{left:0}

/* micro-etichetta: la cifra tipografica di Stanhome */
.occhiello{
  display:flex;align-items:center;gap:.65rem;
  font-weight:600;font-size:.8125rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--blu);margin:0 0 .9rem;
}
.occhiello::before{content:"";width:24px;height:1px;background:currentColor;flex:none}
.occhiello--chiaro{color:var(--pesca)}
.titolo-sez{font-size:var(--t-xl);font-weight:700;color:var(--blu);margin-bottom:.8rem}
.intro-sez{font-size:var(--t-m);color:var(--testo-2);max-width:58ch;line-height:1.5}

/* ---------- 4 · PULSANTI — forma Stanhome: squadrati, maiuscoli, si invertono ---------- */
.btn{
  --bg:var(--blu);--fg:#fff;--bd:var(--blu);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:56px;padding:.85rem 1.7rem;
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);border-radius:0;
  font-family:var(--font-c);font-weight:600;font-size:.9375rem;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:background-color .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease);
}
.btn svg{width:20px;height:20px;flex:none}
.btn:hover{--bg:#fff;--fg:var(--blu);--bd:var(--blu)}
.btn--wa{--bg:var(--wa);--fg:#06301A;--bd:var(--wa)}
.btn--wa:hover{--bg:#fff;--fg:#06301A;--bd:#06301A}
.btn--linea{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.7)}
.btn--linea:hover{--bg:#fff;--fg:var(--blu);--bd:#fff}
.btn--linea-blu{--bg:transparent;--fg:var(--blu);--bd:var(--blu)}
.btn--linea-blu:hover{--bg:var(--blu);--fg:#fff}
.btn--grande{min-height:62px;font-size:1rem;padding:1rem 2.1rem}
.btn--pieno{width:100%}

/* ---------- 5 · TESTATA ---------- */
.testata{
  position:sticky;top:0;z-index:120;background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--bordo);backdrop-filter:saturate(1.6) blur(8px);
}
.testata__in{display:flex;align-items:center;gap:1rem;min-height:72px}
/* in testata il nome e il marchio vero, affiancati: niente sigle inventate */
.marchio{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none;min-width:0}
.marchio__nome{font-family:var(--font-t);font-weight:700;font-size:1.0625rem;color:var(--blu);white-space:nowrap}
.marchio__sep{width:1px;height:20px;background:var(--bordo);flex:none}
.marchio__logo{width:clamp(96px,11vw,132px);height:auto;display:block;flex:none}
@media (max-width:459px){
  .marchio{gap:.5rem}
  .marchio__nome{font-size:.9375rem}
  .marchio__logo{width:84px}
}
.nav{margin-left:auto;display:none}
@media (min-width:1000px){.nav{display:block}}
.nav ul{display:flex;gap:1.6rem}
.nav a{font-size:.9375rem;font-weight:500;color:var(--testo);text-decoration:none;padding:.4rem 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="true"]{border-bottom-color:var(--blu)}
.testata__wa{margin-left:auto;min-height:46px;padding:.55rem 1.1rem;font-size:.8125rem}
@media (min-width:1000px){.testata__wa{margin-left:1.6rem}}
@media (max-width:719px){.testata__wa span{display:none}.testata__wa{padding:.55rem .9rem}}

/* ---------- 6 · APERTURA — card colorata su pagina bianca, come stanhome.it ---------- */
/* la card galleggia sul bianco: da telefono non deve toccare i bordi dello schermo */
.hero{background:#fff;padding:clamp(.75rem,2vw,1.5rem) var(--gutter) 0}
.hero__in{
  background:var(--salvia);border-radius:var(--r-card);overflow:hidden;color:var(--blu);
  padding:clamp(1.75rem,4vw,3.25rem);position:relative;z-index:1;
  display:grid;gap:clamp(1.5rem,4vw,2.5rem);
}
@media (min-width:1000px){
  .hero__in{grid-template-columns:.95fr 1.05fr;align-items:start}
}
.hero__occhiello{
  display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1.2rem;
  padding:.5rem .95rem;background:var(--blu);border:1px solid var(--blu);
  font-size:.9375rem;font-weight:600;color:#fff;
}
.hero__occhiello i{width:8px;height:8px;background:var(--pesca);flex:none}
/* il titolo ora e' piu' lungo (61 caratteri): un filo piu' piccolo per restare su 4 righe */
.hero h1{font-size:clamp(1.95rem,1.1rem + 3.45vw,3.5rem);font-weight:700;color:var(--blu);margin-bottom:1.3rem;max-width:22ch}
/* il marchio: targa navy col logo bianco, grande. È quello che si deve vedere. */
.affilia{
  display:inline-flex;align-items:center;gap:1.1rem;flex-wrap:wrap;margin:0 0 1.5rem;
  padding:.85rem 1.25rem;background:var(--blu);border-radius:0;
}
.affilia img{width:clamp(140px,16vw,190px);flex:none;display:block}
.affilia span{
  font-size:.9375rem;color:rgba(255,255,255,.88);padding-left:1.1rem;
  border-left:1px solid rgba(255,255,255,.34);line-height:1.3;
}
.affilia b{color:#fff;font-weight:700}
@media (max-width:459px){.affilia span{padding-left:0;border-left:0;font-size:.875rem}}
.hero__sotto{font-size:clamp(1.25rem,.95rem + .9vw,1.5rem);color:var(--blu);margin-bottom:2rem;max-width:44ch;line-height:1.45}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:2rem}
/* Sulla card verde il pulsante verde WhatsApp sparisce: 1,29:1 contro il fondo.
   Diventa blu (6,27:1) e il verde resta dov'e' riconoscibile, nell'icona. */
.hero__cta .btn--wa{--bg:var(--blu);--fg:#fff;--bd:var(--blu)}
.hero__cta .btn--wa svg{color:var(--wa)}
.hero__cta .btn--wa:hover{--bg:#fff;--fg:var(--blu);--bd:var(--blu)}
.hero__cta .btn{flex:1 1 15rem;white-space:nowrap}
@media (max-width:559px){
  /* «Scrivimi su WhatsApp» in riga unica misura 308px: su un telefono da 375 allargava
     la colonna oltre la card, e la card (overflow:hidden) tagliava via il margine destro. */
  .hero__cta .btn{white-space:normal;padding-inline:1.1rem;letter-spacing:.04em}
}
.hero__fatti{display:flex;flex-wrap:wrap;gap:clamp(1.4rem,4vw,2.6rem);padding-top:1.5rem;border-top:1px solid rgba(0,32,74,.28)}
.fatto b{display:block;font-family:var(--font-t);font-weight:700;font-size:1.55rem;color:var(--blu);line-height:1.1}
.fatto span{display:block;font-size:.8125rem;color:rgba(0,32,74,.72);margin-top:.15rem}
/* ---------- 6-bis · L'ILLUSTRAZIONE E IL MARCHIO ---------- */
.hero__scena{align-self:start;margin:0}
.hero__scena picture{display:block;max-width:34rem;margin-inline:auto}
.hero__scena picture img{width:100%;height:auto;display:block}

/* sotto l'illustrazione il marchio, grande: e' cio' che collega Daniele a Stanhome.
   Sta DOPO la regola qui sopra, altrimenti il width:100% dell'immagine lo stira. */
.hero__marchio{margin:clamp(1.1rem,3vw,1.8rem) 0 0;display:flex;justify-content:center}
.hero__marchio img{width:clamp(200px,30vw,310px);height:auto;display:block}

@media (min-width:1000px){
  /* in ALTO nella card, ma non incollata al bordo: parte esattamente dove parte
     il contenuto a sinistra, cioe' dalla riga di «Cerchi un consulente Stanhome?».
     Sborda solo a destra, dove la card la rifila. */
  .hero__scena{
    align-self:start;
    margin-top:0;
    margin-right:calc(clamp(1.75rem,4vw,3.25rem) * -1);
  }
  .hero__scena picture{max-width:none}
  .hero__scena picture img{width:calc(100% + clamp(1.75rem,4vw,3.25rem))}
  /* il disegno occupa il 79% del file (l'ultimo quinto e' vuoto): il marchio si centra
     su quello che si VEDE, non sulla cornice, altrimenti scivola a destra di 68px */
  .hero__marchio{padding-right:21%}
}
@media (max-width:999px){
  /* da telefono l'illustrazione arriva ai due bordi della card: deve vedersi grande.
     Margini negativi, non larghezze in percentuale: dentro una griglia il calcolo
     in percentuale si morde la coda e la colonna si allarga da sola. */
  .hero__scena{margin-inline:calc(clamp(1.75rem,4vw,3.25rem) * -1)}
  .hero__marchio{margin-top:clamp(1.3rem,5vw,2rem)}
}

/* ---------- 7 · 🔏 IL DIZIONARIO DI CASA — la colonna e il perno ---------- */
.dizio__griglia{display:grid;gap:clamp(1.5rem,4vw,2.5rem);margin-top:2.2rem}
@media (min-width:1000px){.dizio__griglia{grid-template-columns:1fr 1fr;align-items:start}}

.macchie{display:grid;grid-template-columns:1fr;gap:.6rem}
@media (min-width:560px){.macchie{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.macchie{grid-template-columns:1fr}}
@media (min-width:1220px){.macchie{grid-template-columns:1fr 1fr}}
.macchia{
  width:100%;text-align:left;background:#fff;border:1px solid var(--bordo);border-radius:0;
  padding:1rem 1.15rem;font-size:1.0625rem;line-height:1.35;color:var(--testo);cursor:pointer;
  min-height:56px;display:flex;align-items:center;gap:.7rem;
  transition:background-color .2s,border-color .2s,color .2s;
}
.macchia::before{content:"";width:10px;height:10px;background:var(--bordo);flex:none;transition:background-color .2s}
.macchia:hover{border-color:var(--blu)}
.macchia[aria-pressed="true"]{background:var(--blu);border-color:var(--blu);color:#fff;font-weight:600}
.macchia[aria-pressed="true"]::before{background:var(--pesca)}

/* il perno: è LUI, e non si muove mai */
.perno{background:var(--blu);color:#fff;padding:clamp(1.25rem,3.4vw,1.9rem)}
@media (min-width:1000px){.perno{position:sticky;top:6rem}}
.perno__chi{display:flex;align-items:center;gap:.8rem;padding-bottom:1rem;margin-bottom:1.2rem;border-bottom:1px solid rgba(255,255,255,.24)}
.perno__foto{width:46px;height:46px;flex:none;border-radius:50%;display:block}
.perno__nome{display:block;font-family:var(--font-t);font-weight:700;font-size:1.0625rem;line-height:1.2}
.perno__ruolo{display:block;font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-top:.15rem}

/* 🔤 LA FIRMA — le due parole: la sua frase resta, il nome del catalogo arriva accanto */
.due{display:grid;gap:.55rem;margin-bottom:1.15rem}
.due__sua{font-size:.9375rem;color:rgba(255,255,255,.72)}
.due__freccia{width:22px;height:1px;background:var(--pesca);position:relative}
.due__freccia::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid var(--pesca);border-right:1px solid var(--pesca);transform:rotate(45deg)}
.due__nome{
  font-family:var(--font-t);font-weight:700;font-size:clamp(1.5rem,4.4vw,2.05rem);
  letter-spacing:-.01em;line-height:1.08;color:#fff;
  display:flex;flex-wrap:wrap;
}
.due__nome .l{display:inline-block;opacity:0;transform:translateY(.42em)}
.due__nome .l.on{opacity:1;transform:none;transition:opacity .18s linear,transform .26s var(--ease)}
.due__nome .sp{width:.3em;flex:none;white-space:pre;overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .due__nome .l{opacity:1;transform:none;transition:none}
}
.perno__frase{font-size:1.0625rem;line-height:1.5;color:rgba(255,255,255,.94);margin-bottom:1.2rem;min-height:3.2em}
.perno__flacone{background:#fff;padding:.9rem;margin-bottom:1.15rem;display:grid;place-items:center;aspect-ratio:16/10}
.perno__flacone img{max-height:100%;width:auto;object-fit:contain}
.perno .btn{width:100%}
.perno__nota{font-size:.8125rem;color:rgba(255,255,255,.7);margin-top:.8rem;text-align:center}

/* la fascia-perno su telefono: stesso oggetto, riorientato */
.perno-barra{
  position:fixed;left:0;right:0;bottom:0;z-index:130;background:var(--blu);color:#fff;
  border-top:1px solid rgba(255,255,255,.2);padding:.65rem var(--gutter);
  display:none;gap:.75rem;align-items:center;
  padding-bottom:calc(.65rem + env(safe-area-inset-bottom,0px));
}
.perno-barra.on{display:flex}
@media (min-width:1000px){.perno-barra{display:none!important}}
.perno-barra__testo{flex:1;min-width:0;line-height:1.2}
.perno-barra__eti{display:block;font-size:.6875rem;color:rgba(255,255,255,.74);letter-spacing:.08em;text-transform:uppercase}
.perno-barra__nome{display:block;font-family:var(--font-t);font-weight:700;font-size:1.0625rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.perno-barra .btn{min-height:46px;padding:.5rem 1rem;font-size:.8125rem;flex:none}

/* ---------- CHI SONO ---------- */
.chi{display:grid;gap:clamp(1.6rem,4vw,3rem)}
@media (min-width:860px){.chi{grid-template-columns:.8fr 1.2fr;align-items:center}}
.chi__foto{margin:0;position:relative}
/* la foto scontornata sta sul blu del marchio, non su un fondo qualsiasi:
   stessa lingua dell'illustrazione in apertura. Appoggiata in basso, non centrata. */
.chi__foto picture{display:block;background:var(--blu);aspect-ratio:4/5}
.chi__foto img{width:100%;height:100%;object-fit:contain;object-position:center bottom;display:block}
/* finché la foto non c'è: iniziali, mai un volto preso da un archivio */
.chi__vuoto{
  display:grid;place-items:center;aspect-ratio:4/5;background:var(--blu);color:#fff;
  font-family:var(--font-t);font-weight:700;font-size:clamp(3rem,9vw,4.5rem);letter-spacing:.04em;
}
.chi__foto figcaption{
  font-size:.75rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--testo-2);
  padding-top:.85rem;margin-top:.8rem;border-top:1px solid var(--bordo);
}
.chi__punti{display:grid;gap:.9rem;margin-top:1.6rem}
.chi__punti li{display:grid;gap:.15rem;padding-left:1.1rem;border-left:2px solid var(--pesca)}
.chi__punti b{font-weight:700;font-size:1.0625rem}
.chi__punti span{color:var(--testo-2);font-size:1rem}

/* ---------- 8 · BLOCCHI COMUNI ---------- */
.due-col{display:grid;gap:clamp(1.5rem,4vw,2.6rem)}
@media (min-width:900px){.due-col{grid-template-columns:1fr 1fr;align-items:center}}
.riquadro{background:#fff;border:1px solid var(--bordo);padding:clamp(1.25rem,3.4vw,1.9rem)}
.riquadro--blu{background:var(--blu);border-color:var(--blu);color:#fff}
.riquadro--blu .riquadro__eti{color:var(--pesca)}
.riquadro__eti{font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--testo-2);margin-bottom:.7rem}
.riquadro__chiave{font-family:var(--font-t);font-weight:700;font-size:clamp(1.3rem,3.6vw,1.75rem);line-height:1.15;margin-bottom:.6rem}

/* le tre cose che il sito deve far capire: mai una scheda sola per riga */
.tris{display:grid;gap:clamp(1rem,2.6vw,1.5rem);margin-top:2.2rem}
@media (min-width:640px){.tris{grid-template-columns:repeat(2,1fr)}}
/* fra 640 e 979 le colonne sono due: la terza scheda prende tutta la riga,
   cosi' non resta un elemento solo e spaiato in fondo */
@media (min-width:640px) and (max-width:979px){.tris>:last-child{grid-column:1/-1}}
@media (min-width:980px){.tris{grid-template-columns:repeat(3,1fr)}}
.scheda-tris{background:#fff;border:1px solid var(--bordo);padding:clamp(1.25rem,3.2vw,1.75rem);border-top:3px solid var(--blu)}
.scheda-tris h3{font-family:var(--font-t);font-weight:700;font-size:clamp(1.15rem,2.6vw,1.3rem);color:var(--blu);line-height:1.2;margin-bottom:.55rem}
.scheda-tris p{font-size:1rem;color:var(--testo-2);line-height:1.5}
.sotto-tit{font-family:var(--font-t);font-weight:700;font-size:clamp(1.25rem,3vw,1.5rem);color:var(--blu);margin-bottom:.7rem}
.hero__nota-cta{font-size:.9375rem;color:rgba(0,32,74,.78);margin:-1.1rem 0 2rem}

.passi{display:grid;gap:.9rem;counter-reset:p;margin-top:2rem}
@media (min-width:760px){.passi{grid-template-columns:repeat(2,1fr)}}
.passo{display:flex;gap:1rem;background:#fff;border:1px solid var(--bordo);padding:1.1rem 1.25rem}
.passo b{
  width:38px;height:38px;flex:none;display:grid;place-items:center;background:var(--blu);color:#fff;
  font-family:var(--font-t);font-weight:700;font-size:1.0625rem;
}
.passo h3{font-size:1.0625rem;margin-bottom:.25rem}
.passo p{font-size:.9375rem;color:var(--testo-2);line-height:1.45}

.punti{display:grid;gap:.9rem;margin-top:1.4rem}
.punto{display:flex;gap:.8rem;align-items:flex-start}
.punto i{width:8px;height:8px;background:var(--pesca);flex:none;margin-top:.55rem}
.punto p{font-size:1.0625rem;line-height:1.5}
.punto b{font-weight:700}

/* nastro dei comuni — non si ferma MAI, nemmeno col mouse sopra */
.nastro{background:var(--blu);color:#fff;overflow:hidden;padding:.85rem 0;white-space:nowrap}
.nastro__pista{display:inline-flex;gap:2.2rem;align-items:center;animation:scorre 46s linear infinite;will-change:transform}
.nastro span{font-size:.9375rem;letter-spacing:.05em;display:inline-flex;align-items:center;gap:.7rem}
.nastro span::before{content:"";width:6px;height:6px;background:var(--pesca);flex:none}
@keyframes scorre{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.nastro__pista{animation:none}}

/* fisarmonica domande */
.faq{margin-top:2rem;border-top:1px solid var(--bordo)}
.faq__i{border-bottom:1px solid var(--bordo)}
.faq__d{
  width:100%;text-align:left;background:none;border:0;padding:1.15rem 2.5rem 1.15rem 0;
  font-size:1.0625rem;font-weight:600;color:var(--blu);cursor:pointer;position:relative;min-height:56px;
}
.faq__d::after{content:"";position:absolute;right:.4rem;top:50%;width:12px;height:12px;border-right:2px solid var(--blu);border-bottom:2px solid var(--blu);transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease)}
.faq__d[aria-expanded="true"]::after{transform:translateY(-30%) rotate(-135deg)}
.faq__r{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}
.faq__d[aria-expanded="true"]+.faq__r{grid-template-rows:1fr}
.faq__r>div{overflow:hidden}
.faq__r p{padding-bottom:1.15rem;color:var(--testo-2);font-size:1.0625rem}

/* contatti */
.scheda{background:var(--blu);color:#fff;padding:clamp(1.4rem,4vw,2.2rem)}
.scheda h3{font-size:1.3rem;margin-bottom:1.1rem}
.recapiti{display:grid;gap:.9rem;margin-bottom:1.5rem}
.recapito{display:flex;gap:.8rem;align-items:flex-start}
.recapito i{width:8px;height:8px;background:var(--pesca);flex:none;margin-top:.5rem}
.recapito span{display:block;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.recapito a,.recapito p{color:#fff;font-size:1.0625rem;text-decoration:none}

/* piede */
.piede{background:var(--blu-scuro);color:rgba(255,255,255,.8);padding-block:2.5rem 1.8rem}
.piede__logo{width:150px;margin-bottom:1.1rem}
.piede__griglia{display:grid;gap:1.8rem}
@media (min-width:760px){.piede__griglia{grid-template-columns:1.4fr 1fr 1fr}}
.piede h3{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:.8rem}
.piede a{color:rgba(255,255,255,.8);text-decoration:none;font-size:.9375rem;display:inline-block;padding:.22rem 0}
.piede a:hover{color:#fff}
.piede__indip{font-size:.8125rem;color:rgba(255,255,255,.6);margin-top:1.4rem;padding-left:.85rem;border-left:2px solid rgba(255,255,255,.26);max-width:60ch}
.piede__fondo{margin-top:1.8rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.16);display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;justify-content:space-between;font-size:.8125rem}

/* banner cookie: una riga sola */
.cookie{position:fixed;left:0;right:0;bottom:var(--barra);z-index:140;background:#fff;border-top:1px solid var(--bordo);padding:.55rem .75rem;font-size:.8125rem;display:flex;gap:.6rem;align-items:center;justify-content:center;flex-wrap:nowrap}
.cookie span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* 🔴 senza questa riga il banner non si chiude: display:flex vince su [hidden] */
.cookie[hidden]{display:none!important}
@media (max-width:400px){.cookie{font-size:.75rem}}
.cookie button{background:none;border:0;cursor:pointer;font-size:1.25rem;line-height:1;color:var(--testo-2);padding:.25rem .5rem}

/* ---------- 9 · LA FASCIA CHE SCOPRE (L1) ---------- */
.riv{opacity:0}
.js .riv{opacity:0;transform:translateY(14px)}
.js .riv.vis{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .55s var(--ease)}
html:not(.js) .riv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .riv,.js .riv.vis{opacity:1!important;transform:none!important;transition:none!important}
}