/* ==========================================================================
   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{
  --blu:#00204A;            /* il blu DEL LOGO (fill dentro logo.svg) */
  --blu-scuro:#00152F;
  --blu-tenue:#EDF1F6;
  --pesca:#FFBA9C;          /* accento del marchio */
  --acqua:#009E83;
  --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);

  --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)}
.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}
.marchio{display:flex;align-items:center;gap:.75rem;text-decoration:none;flex:none}
.marchio__sigla{
  width:44px;height:44px;flex:none;display:grid;place-items:center;
  background:var(--blu);color:#fff;font-family:var(--font-t);font-weight:700;font-size:1.0625rem;letter-spacing:.02em;
}
.marchio__testo{display:flex;flex-direction:column;line-height:1.15}
.marchio__nome{font-family:var(--font-t);font-weight:700;font-size:1.0625rem;color:var(--blu)}
.marchio__ruolo{font-size:.6875rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--testo-2)}
.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 ---------- */
.hero{background:var(--blu-scuro);color:#fff;padding-block:clamp(2.25rem,5vw,3.5rem) clamp(3rem,6vw,4rem);position:relative;overflow:hidden}
.hero::after{ /* taglio netto, non sfumatura: coerente col raggio 0 */
  content:"";position:absolute;right:-8%;top:-30%;width:52%;height:160%;
  background:linear-gradient(180deg,#00204A,#002B5C);transform:skewX(-9deg);opacity:.55;
}
.hero__in{position:relative;z-index:1;display:grid;gap:clamp(2rem,5vw,3.5rem)}
/* colonna sola: nell'apertura non c'è niente di decorativo, solo quello che serve capire.
   ⚠️ L'elemento porta ANCHE .contenitore: un max-width qui lo restringerebbe E lo centrerebbe
   (margin-inline:auto), disallineando l'apertura da tutte le altre sezioni. Si limita il testo. */
@media (min-width:1000px){
  /* l'illustrazione ha più spazio del testo: è lei che riempie l'apertura */
  .hero__in{grid-template-columns:.86fr 1.14fr;align-items:start}
}
.hero h1{max-width:19ch}
/* l'illustrazione scontornata: niente riquadro, niente fondo — le figure stanno
   DENTRO il blu dell'apertura. È l'unica immagine qui, e dice cosa fa: lui consiglia. */
.hero__scena{align-self:end;margin-block:-1rem -1.2rem}
.hero__scena img{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 34px rgba(0,0,0,.28))}
@media (min-width:1000px){
  /* arriva fino al BORDO DESTRO dello schermo, non dentro la colonna del testo:
     più grande senza coprire una sola parola. */
  .hero__scena{
    /* attaccata in alto: l'apertura comincia con lui che consiglia, non a metà pagina.
       align-self serve esplicito, se no vince quello della regola base. */
    align-self:start;
    margin-block:-2.25rem 0;
    margin-right:calc((100vw - min(100vw, var(--max)))/-2 - var(--gutter));
  }
  .hero__scena img{width:100%;max-width:none}
}
@media (max-width:999px){
  .hero__scena{max-width:28rem;margin-inline:auto;margin-block:.5rem -1.2rem}
}
.hero__occhiello,.affilia{max-width:100%}
.hero__occhiello{
  display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1.2rem;
  padding:.5rem .95rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.26);
  font-size:.9375rem;font-weight:600;color:#fff;
}
.hero__occhiello i{width:8px;height:8px;background:var(--pesca);flex:none}
.hero h1{font-size:var(--t-2xl);font-weight:700;color:#fff;margin-bottom:1.3rem}
/* a cosa è collegato: dichiarato, non nascosto in una nota */
.affilia{
  display:inline-flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:0 0 1.5rem;
  padding:.8rem 1.15rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.26);
}
.affilia img{width:clamp(116px,13vw,152px);flex:none}
.affilia span{font-size:.9375rem;color:rgba(255,255,255,.85);padding-left:1rem;border-left:1px solid rgba(255,255,255,.3);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:rgba(255,255,255,.9);margin-bottom:2rem;max-width:44ch;line-height:1.45}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:2rem}
/* quando vanno a capo devono avere la stessa larghezza, non sfrangiare */
.hero__cta .btn{flex:1 1 15rem;white-space:nowrap}
.hero__fatti{display:flex;flex-wrap:wrap;gap:clamp(1.4rem,4vw,2.6rem);padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.2)}
.fatto b{display:block;font-family:var(--font-t);font-weight:700;font-size:1.55rem;color:#fff;line-height:1.1}
.fatto span{display:block;font-size:.8125rem;color:rgba(255,255,255,.72);margin-top:.15rem}
.hero__nota{font-size:.8125rem;color:rgba(255,255,255,.66);margin-top:1.6rem;padding-left:.85rem;border-left:2px solid rgba(255,255,255,.28);max-width:52ch}


/* ---------- 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__sigla{width:42px;height:42px;flex:none;display:grid;place-items:center;background:#fff;color:var(--blu);font-family:var(--font-t);font-weight:700;font-size:1rem}
.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}
.chi__foto img{width:100%;height:auto;display:block;background:var(--fondo)}
/* 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}

.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}
@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}
}