/* ConFido — la vetrina su confido.cloud (27/10/2026).
   I colori e i caratteri sono quelli dell'app (redesign/styles.css): chi preme «Entra» deve
   ritrovarsi nello stesso posto, non in un sito diverso. I caratteri sono copiati in
   assets/fonts: niente Google Fonts, come nell'app dal 03/09 (GDPR).
   Si parte dal telefono; il computer è il caso in più (le regole @media in fondo). */

@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap;src:url('assets/fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap;src:url('assets/fonts/bricolage-grotesque-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('assets/fonts/hanken-grotesk-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('assets/fonts/hanken-grotesk-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* gli stessi valori di redesign/styles.css */
  --ink:#14203A;
  --ink-soft:#44506A;
  --ink-faint:#5E6880;
  --terra:#2E5BFF;
  --terra-deep:#1E3FCC;
  --sage:#2FB6A3;
  --ochre:#FFC631;
  --oro:#E8B84B;
  --line:rgba(20,32,58,.12);
  --card:#FBFCFE;
  --page-warm:#F7F5ED;
  --muted-warm:#F4ECDF;
  --brand-soft:#EBF0FF;
  --brand-soft-2:#DCE5FF;
  --positive-soft:#ECF7F2;
  --warning-soft:#FFF6DC;
  --notte:#14203A;
  --shadow:0 1px 2px rgba(20,32,58,.04), 0 12px 32px -16px rgba(20,32,58,.28);
  --shadow-btn:0 14px 28px -12px rgba(46,91,255,.7);

  --gutter:20px;
  --largo:1120px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--page-warm);color:var(--ink);
  font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  font-size:1.0625rem;line-height:1.55;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--terra-deep)}
:focus-visible{outline:3px solid var(--terra);outline-offset:3px;border-radius:6px}

.salta{position:absolute;left:-9999px;top:8px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:10px;z-index:50;text-decoration:none;font-weight:700}
.salta:focus{left:8px}

.riga{width:100%;max-width:var(--largo);margin:0 auto;padding:0 var(--gutter)}

/* ── testata ─────────────────────────────────────────────────────────────── */
.testa{position:relative;z-index:5}
.testa-riga{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;padding-bottom:14px}
.marchio{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)}
.marchio img{width:36px;height:auto}
.marchio span{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.375rem;letter-spacing:-.02em}
.testa-dx{display:flex;align-items:center;gap:10px}

.lingue{display:inline-flex;background:rgba(20,32,58,.06);border-radius:999px;padding:3px}
.lingue button{border:0;background:transparent;font:700 .8125rem/1 'Hanken Grotesk',sans-serif;color:var(--ink-faint);padding:8px 10px;border-radius:999px;cursor:pointer;min-width:38px;min-height:32px}
.lingue button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(20,32,58,.15)}

/* ── bottoni ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;text-decoration:none;
  background:var(--terra);color:#fff;font-family:'Hanken Grotesk',sans-serif;font-weight:700;border-radius:15px;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease}
.btn:hover{background:var(--terra-deep)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-piccolo{font-size:.9375rem;padding:10px 16px;border-radius:12px;min-height:40px}
.btn-grande{font-size:1.0625rem;padding:17px 28px;min-height:56px;box-shadow:var(--shadow-btn)}
.btn-grande::after{content:'→';font-weight:700;transition:transform .2s ease}
.btn-grande:hover::after{transform:translateX(3px)}
.btn-scuro{background:var(--ink);font-size:1rem;padding:15px 24px;min-height:52px}
.btn-scuro:hover{background:#26375C}

.azioni{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:26px}
.link-giu{font-weight:700;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--ochre);padding:4px 0}
.link-giu:hover{border-bottom-color:var(--terra)}

/* ── testi ricorrenti ────────────────────────────────────────────────────── */
.occhiello{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--terra-deep)}
h1,h2,h3{font-family:'Bricolage Grotesque',sans-serif;color:var(--ink);font-weight:700}
h2,.interna main h1{font-size:clamp(1.75rem,6.4vw,2.75rem);line-height:1.08;letter-spacing:-.025em;margin-top:10px;max-width:18ch}
h3{font-size:1.3125rem;letter-spacing:-.015em;line-height:1.2;margin-top:18px}
.fascia p{color:var(--ink-soft)}
.colonna-testo p:not(.occhiello){margin-top:14px;max-width:52ch}
.colonna-testo h2 + p{margin-top:20px}

/* ── in cima ─────────────────────────────────────────────────────────────── */
.eroe{padding:18px 0 44px;position:relative;overflow:hidden}
/* un alone caldo dietro la guida: è luce, non un disegno */
.eroe::before{content:'';position:absolute;right:-30%;top:22%;width:120%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,198,49,.30),rgba(255,198,49,.10) 55%,transparent 72%);pointer-events:none}
.eroe-griglia{position:relative;display:grid;gap:8px}
.eroe h1{font-size:clamp(2.75rem,13vw,5.25rem);line-height:.98;letter-spacing:-.035em;margin-top:14px}
.evid{display:inline-block;background:var(--ochre);color:var(--ink);padding:.02em .2em .08em;border-radius:.18em;margin-top:.08em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.lead{font-size:1.1875rem;line-height:1.5;color:var(--ink-soft);margin-top:20px;max-width:34ch}
.nota{font-size:.875rem;color:var(--ink-faint);margin-top:16px}
.eroe-figura{margin:18px auto 0;width:min(100%,400px)}
.eroe-figura img{width:100%;filter:drop-shadow(0 22px 26px rgba(20,32,58,.16))}

/* ── fasce ───────────────────────────────────────────────────────────────── */
.fascia{padding:64px 0}
.fascia-blu{background:linear-gradient(180deg,var(--brand-soft) 0%,var(--brand-soft-2) 100%)}
/* la fiducia sta su un verde chiaro: i ritagli delle guide hanno un alone chiaro che su un
   fondo scuro diventa una sbavatura grigia (provato il 27/10, si vedeva) */
.fascia-menta{background:linear-gradient(180deg,var(--positive-soft) 0%,#DDF2EB 100%)}
.fascia-menta .occhiello{color:#178069}
.fascia-oro{background:var(--warning-soft)}
.fascia-oro .occhiello{color:#8A6A10}

/* come funziona: tre schede */
.passi{display:grid;gap:18px;margin-top:30px}
.passo{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:16px 18px 24px;box-shadow:var(--shadow)}
.passo-figura{border-radius:18px;height:210px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.passo-figura img{height:196px;width:auto;max-width:none}
.tinta-blu{background:linear-gradient(160deg,var(--brand-soft),var(--brand-soft-2))}
.tinta-menta{background:linear-gradient(160deg,var(--positive-soft),#D5F0E9)}
.tinta-ocra{background:linear-gradient(160deg,var(--warning-soft),#FCEBB8)}
.passo p{margin-top:8px;font-size:1rem}
.temi{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.temi li{font-size:.8125rem;font-weight:700;color:var(--terra-deep);background:var(--brand-soft);border-radius:999px;padding:6px 11px}

/* due colonne: figura e testo */
.due-colonne{display:grid;gap:26px;align-items:center}
.figura-grande{width:min(100%,460px);margin:0 auto}
.figura-media{width:min(78%,300px);margin:0 auto}
.figura-grande img,.figura-media img{width:100%;filter:drop-shadow(0 18px 22px rgba(20,32,58,.14))}

.elenco{list-style:none;margin-top:22px;display:grid;gap:14px;max-width:56ch}
.elenco li{position:relative;padding-left:32px;color:var(--ink-soft);line-height:1.5}
/* il segno di spunta è un carattere, come nelle liste dell'app */
.elenco li::before{content:'✓';position:absolute;left:0;top:-1px;width:21px;height:21px;border-radius:50%;
  background:var(--sage);color:#fff;font-weight:700;font-size:.75rem;display:grid;place-items:center}
.link-chiaro{display:inline-block;margin-top:24px;color:var(--ink);font-weight:700;text-decoration:none;border-bottom:2px solid var(--sage);padding:4px 0}
.link-chiaro:hover{border-bottom-color:var(--terra)}

.link-mail{font-weight:700;color:var(--ink);overflow-wrap:anywhere}

/* ── piede ───────────────────────────────────────────────────────────────── */
.piede{background:var(--notte);color:#C9CFDC;padding:44px 0 calc(110px + env(safe-area-inset-bottom));font-size:.9375rem}
.marchio-chiaro{color:#fff}
.marchio-chiaro img{width:32px}
.piede-marchio p{margin-top:8px}
.piede a{color:#fff;font-weight:700;text-decoration-color:rgba(255,198,49,.7);text-underline-offset:3px;overflow-wrap:anywhere}
.piede-nota{margin-top:30px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:.8125rem;color:#9AA3B8}

/* ── la barra «Entra» sul telefono ───────────────────────────────────────── */
.barra-entra{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(247,245,237,0),rgba(247,245,237,.94) 34%);
  transform:translateY(110%);transition:transform .3s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.barra-entra.su{transform:none;pointer-events:auto}
.barra-entra .btn{width:100%}

/* ── movimento: solo regia, mai disegni ──────────────────────────────────── */
/* gli elementi .appare partono nascosti SOLO se il JS c'è (classe .js su <html>):
   senza JS la pagina si legge tutta, ferma */
.js .appare{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.js .appare.visto{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.dato,.risposta,.menu a::after{transition:none}
  .js .m-linea{animation:none;stroke-dashoffset:0}
  .js .m-fermata{animation:none;opacity:1}
  .js .appare{opacity:1;transform:none;transition:none}
  .barra-entra{transition:none}
}

/* ── 27/10 sera: la metro dello spot, l'impatto sociale, il video ────────────
   I colori delle linee sono quelli dello spot v4 (videos/confido-spot-v3/.hyperframes/metro.md):
   tinte chiare, sotto al testo, mai al posto delle illustrazioni. */
:root{--m-rosa:#F3B3C3;--m-blu:#9DB2F5;--m-menta:#A6DCCD;--m-oro:#F6D46E}

/* le linee in cima: si disegnano all'apertura */
.metro{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.75;
  /* le linee non passano sotto le parole: sul telefono stanno solo dietro la guida (sotto il
     testo), sul computer sfumano dove c'è la colonna del testo */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 52%,#000 68%);
          mask-image:linear-gradient(180deg,transparent 0,transparent 52%,#000 68%)}
.m-linea{fill:none;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2400;stroke-dashoffset:0}
.m-rosa{stroke:var(--m-rosa)} .m-blu{stroke:var(--m-blu)} .m-menta{stroke:var(--m-menta)} .m-oro{stroke:var(--m-oro);stroke-width:4}
.m-fermata{fill:var(--page-warm);stroke:var(--m-blu);stroke-width:5}
.js .m-linea{stroke-dashoffset:2400;animation:disegna 2.6s cubic-bezier(.6,.05,.3,1) forwards}
.js .m-blu{animation-delay:.25s} .js .m-menta{animation-delay:.5s} .js .m-oro{animation-delay:.1s;animation-duration:3.2s}
.js .m-fermata{opacity:0;transform-box:fill-box;transform-origin:center;animation:fermata .45s cubic-bezier(.3,1.6,.5,1) forwards}
.js .m-fermata:nth-of-type(1){animation-delay:1.3s} .js .m-fermata:nth-of-type(2){animation-delay:1.5s}
.js .m-fermata:nth-of-type(3){animation-delay:1.7s} .js .m-fermata:nth-of-type(4){animation-delay:1.9s}
.js .m-fermata:nth-of-type(5){animation-delay:2.1s} .js .m-fermata:nth-of-type(6){animation-delay:2.3s}
@keyframes disegna{to{stroke-dashoffset:0}}
@keyframes fermata{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
.eroe::before{z-index:0}

/* la linea del viaggio in cima allo schermo */
.viaggio{position:fixed;left:0;right:0;top:0;height:4px;z-index:30;background:rgba(246,212,110,.25);pointer-events:none}
.viaggio-pieno{position:absolute;inset:0 auto 0 0;width:100%;background:var(--m-oro);transform-origin:left;transform:scaleX(var(--p,0))}
.viaggio-fermata{position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--page-warm);border:2.5px solid var(--m-oro);transition:background .3s ease}
.viaggio-fermata.passata{background:var(--m-oro)}

/* la fermata davanti a ogni occhiello: si accende quando la sezione arriva */
.fermata{display:inline-block;vertical-align:-1px;width:12px;height:12px;margin-right:9px;border-radius:50%;
  border:3px solid currentColor;background:var(--page-warm);transition:background .4s ease, transform .4s cubic-bezier(.3,1.6,.5,1)}
.fermata.accesa{background:currentColor;transform:scale(1.15)}

/* perché ConFido: la sezione scura, per dare peso ai numeri */
.fascia-notte{background:var(--notte);color:#E7EAF2}
.fascia-notte :is(h1,h2,h3,h4){color:#fff}
.fascia-notte :is(h1,h2){max-width:22ch}
.fascia-notte .occhiello{color:var(--ochre)}
.fascia-notte p{color:#C9CFDC}
.dato-grande{margin-top:34px;display:grid;gap:6px;max-width:760px}
.cifra{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(4rem,19vw,8.5rem);line-height:.9;letter-spacing:-.04em;color:var(--ochre)!important}
.cifra-testo{font-size:1.25rem;line-height:1.45;color:#fff!important;max-width:40ch}
.dati{display:grid;gap:14px;margin-top:34px}
.dato{border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:20px 20px 22px;background:rgba(255,255,255,.04)}
.dato-num{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:2.5rem;line-height:1;letter-spacing:-.03em;color:#fff!important}
.dato p:not(.dato-num){margin-top:10px;font-size:.98rem}
.rimando{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:5px;padding:0 4px;border-radius:9px;
  background:rgba(255,198,49,.18);color:var(--ochre);font-size:.6875rem;font-weight:700;text-decoration:none;vertical-align:2px}
.rimando:hover{background:var(--ochre);color:var(--ink)}
.sotto-titolo{font-size:clamp(1.5rem,5vw,2rem);margin-top:64px;max-width:24ch;line-height:1.12}
.risposte{display:grid;gap:16px;margin-top:26px}
.risposta{border-top:3px solid var(--ochre);padding:16px 0 0}
.risposta:nth-child(2){border-top-color:var(--m-menta)}
.risposta:nth-child(3){border-top-color:var(--m-rosa)}
.risposta h4{font-family:'Bricolage Grotesque',sans-serif;font-size:1.1875rem;letter-spacing:-.01em}
.risposta p{margin-top:6px;font-size:.98rem}
.fonti{margin-top:44px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);display:grid;gap:8px;font-size:.8125rem;color:#9AA3B8;padding-left:18px}
.fonti li{color:#9AA3B8}
.fonti a{color:#fff;font-weight:700;text-underline-offset:3px;text-decoration-color:rgba(255,198,49,.7)}
.fonti li:target{color:#fff}

/* dentro l'app: il telefono con le schermate vere */
.app-giro{display:grid;gap:30px;margin-top:36px;align-items:center}
.telefono{width:min(78vw,300px);margin:0 auto;padding:10px;border-radius:44px;background:var(--ink);
  box-shadow:0 30px 60px -24px rgba(20,32,58,.55),inset 0 0 0 2px #2A3A60}
.telefono-schermo{position:relative;aspect-ratio:780/1688;border-radius:34px;overflow:hidden;background:#fff}
.telefono-schermo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.03);
  transition:opacity .55s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.telefono-schermo img.attiva{opacity:1;transform:none}
.giro-testo h3{font-size:clamp(1.5rem,5vw,2rem);line-height:1.12;max-width:20ch;margin-top:10px}
.giro-passi{list-style:none;counter-reset:g;margin-top:22px;display:grid;gap:8px}
.giro-passi li{counter-increment:g}
.giro-passi button{width:100%;display:flex;align-items:center;gap:14px;text-align:left;border:0;cursor:pointer;
  background:transparent;border-radius:16px;padding:12px 14px;font:600 1.0625rem/1.35 'Hanken Grotesk',sans-serif;color:var(--ink-soft);
  position:relative;overflow:hidden;transition:background .25s ease,color .25s ease}
.giro-passi button::before{content:counter(g);flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--terra-deep);font-weight:800;font-size:.875rem;transition:background .25s ease,color .25s ease}
.giro-passi button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.giro-passi button[aria-pressed="true"]::before{background:var(--terra);color:#fff}
/* la barretta che dice quanto manca al passo dopo */
.giro-passi button::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--m-oro);
  transform:scaleX(0);transform-origin:left}
.giro-passi button[aria-pressed="true"].corre::after{animation:corre var(--giro,3.6s) linear forwards}
@keyframes corre{to{transform:scaleX(1)}}

/* micro-animazioni: solo sulle cose che si toccano, mai sui personaggi */
.btn-grande:hover{transform:translateY(-2px);box-shadow:0 18px 32px -12px rgba(46,91,255,.75)}
.dato{transition:transform .25s ease,border-color .25s ease}
.dato:hover{transform:translateY(-3px);border-color:rgba(255,198,49,.5)}
.giro-passi button:hover{background:rgba(255,255,255,.6)}
.giro-passi button:hover::before{transform:scale(1.08)}
.giro-passi button::before{transition:background .25s ease,color .25s ease,transform .2s ease}

/* il menu */
.menu a{position:relative;color:var(--ink);text-decoration:none;font-weight:700;font-size:.9375rem;padding:6px 0}
.menu a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ochre);border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.menu a:hover::after,.menu a.qui::after{transform:scaleX(1)}
/* telefono: il menu aperto scende sotto la testata */
.lingue-testa{display:none}
@keyframes scende{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.testa{position:sticky;top:0;background:rgba(247,245,237,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.testa-riga{position:relative}
/* la testata resta in cima: le sezioni raggiunte dal menu non finiscono sotto */
main section[id]{scroll-margin-top:72px}

/* lo spot */
.fascia-video{background:linear-gradient(180deg,var(--page-warm),var(--muted-warm))}
.video{margin-top:28px}
.video video{display:block;width:100%;height:auto;border-radius:22px;background:#E9E4D6;box-shadow:var(--shadow)}
.video figcaption{margin-top:12px;font-size:.875rem;color:var(--ink-faint)}

/* ── il quartiere di una volta: parole e fumetti, niente scenografia ───────── */
.una-volta{background:var(--page-warm);padding:8px 0 72px}
.una-volta-riga{display:grid;gap:32px;align-items:start;margin-top:8px}
.una-volta-testo p:not(.occhiello){margin-top:16px;font-size:1.125rem;line-height:1.6;max-width:48ch}
.una-volta-testo :is(h1,h2){font-size:clamp(2.25rem,9vw,4.5rem);line-height:.98;letter-spacing:-.035em;max-width:13ch}
.fumetti{position:relative;display:grid;gap:12px;justify-items:start;padding-bottom:24px}
.fumetto{position:relative;background:var(--card);color:var(--ink)!important;font-family:'Bricolage Grotesque',sans-serif;
  font-weight:600;font-size:1.125rem;line-height:1.3;padding:14px 18px;border-radius:20px 20px 20px 6px;box-shadow:var(--shadow);max-width:30ch}
.fumetto:nth-child(even){justify-self:end;border-radius:20px 20px 6px 20px;background:var(--brand-soft)}
.fumetto:nth-child(3){background:var(--warning-soft)}
.fumetto:nth-child(4){background:var(--positive-soft)}
/* i fumetti arrivano uno dopo l'altro, come una conversazione */
.js .fumetto.appare:nth-child(2){transition-delay:.15s}
.js .fumetto.appare:nth-child(3){transition-delay:.3s}
.js .fumetto.appare:nth-child(4){transition-delay:.45s}

/* ── lavoretti di quartiere, editoriale: una foto grande, il titolo enorme, poche parole ── */
.cura-ed{background:var(--page-warm);padding-bottom:72px}
/* la tavola ha i bordi che sfumano nel crema: si mostra intera, senza tagli, sullo stesso fondo */
.cura-foto,.tavola{margin:0 auto;width:100%;max-width:1200px;background:var(--page-warm)}
.cura-foto img,.tavola img{width:100%;height:auto;
  /* il crema del disegno non è identico a quello della pagina: i bordi sfumano, e la giuntura sparisce */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);
  mask-composite:intersect}
.cura-ed-riga{display:grid;gap:22px;margin-top:8px;position:relative}

.cura-ed .occhiello{color:#178069}
.cura-ed :is(h1,h2),.interna .cura-ed h1{font-size:clamp(2.5rem,11vw,6rem);line-height:.95;letter-spacing:-.04em;max-width:12ch;margin-top:14px}
.cura-lead{font-size:1.25rem;line-height:1.5;color:var(--ink)!important;max-width:36ch}
.cura-passi{list-style:none;counter-reset:c;margin-top:26px;border-top:2px solid var(--ink)}
.cura-passi li{counter-increment:c;display:flex;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink-soft);font-size:1.0625rem}
.cura-passi li::before{content:'0' counter(c);font-family:'Bricolage Grotesque',sans-serif;font-weight:800;color:#2FB6A3;font-size:.9375rem;min-width:24px}
.cura-passi li:last-child::before{color:var(--ochre)}
.cura-passi b{color:var(--ink)}
.risposta a{color:var(--ochre);font-weight:700;text-underline-offset:3px}

/* ── 28/10: il sito su più pagine ─────────────────────────────────────────── */
/* la casa: il testo, poi la tavola del cortile a tutta larghezza */
.casa .eroe-griglia{grid-template-columns:1fr}
.casa .eroe-testo{max-width:760px}
.eroe-tavola{margin-top:28px;position:relative}
.interna main > section:first-child{padding-top:40px}
.una-volta-sola{padding-top:56px}

/* le fermate della casa: quattro porte verso le pagine */
.porte{display:grid;gap:14px;margin-top:28px}
.porta-sito{display:grid;gap:8px;text-decoration:none;color:var(--ink);background:var(--card);border-radius:22px;
  padding:22px 22px 24px;border-top:5px solid var(--m-blu);box-shadow:var(--shadow);
  transition:transform .25s ease,box-shadow .25s ease}
.porta-sito:nth-child(2){border-top-color:var(--m-menta)}
.porta-sito:nth-child(3){border-top-color:var(--m-rosa)}
.porta-sito:nth-child(4){border-top-color:var(--m-oro)}
.porta-sito:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(20,32,58,.04),0 20px 40px -18px rgba(20,32,58,.35)}
.porta-occhiello{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--terra-deep)}
.porta-titolo{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.375rem;line-height:1.15;letter-spacing:-.015em}
.porta-titolo::after{content:' →';color:var(--terra);transition:margin .2s ease}
.porta-sito:hover .porta-titolo::after{margin-left:4px}

/* le domande: aperte una alla volta, righe grandi da toccare */
.domande{background:var(--page-warm)}
.elenco-domande{margin-top:26px;border-top:2px solid var(--ink);max-width:760px}
.elenco-domande details{border-bottom:1px solid var(--line)}
.elenco-domande summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
  min-height:60px;padding:16px 0;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.1875rem;color:var(--ink)}
.elenco-domande summary::-webkit-details-marker{display:none}
.elenco-domande summary::after{content:'+';flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--terra-deep);font-size:1.25rem;transition:transform .25s ease}
.elenco-domande details[open] summary::after{transform:rotate(45deg)}
.elenco-domande details p{padding:0 48px 20px 0;color:var(--ink-soft);font-size:1.0625rem}

/* ── la testata sul telefono: compatta in alto, un foglio a tutto schermo per il menu ── */
.menu-apri{border:0;cursor:pointer;font:700 .875rem/1 'Hanken Grotesk',sans-serif;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 12px;background:var(--ink);color:#fff;border-radius:12px}
.menu-apri[aria-expanded="true"]{background:var(--ink)}
.menu-icona{position:relative;width:18px;height:12px;display:block}
.menu-icona i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .25s ease,top .25s ease}
.menu-icona i:first-child{top:1px} .menu-icona i:last-child{top:9px}
.menu-apri[aria-expanded="true"] .menu-icona i:first-child{top:5px;transform:rotate(45deg)}
.menu-apri[aria-expanded="true"] .menu-icona i:last-child{top:5px;transform:rotate(-45deg)}
.testa-dx .btn-piccolo{display:none}
.menu{display:none}
.menu.aperto{display:flex;flex-direction:column;justify-content:space-between;position:fixed;left:0;right:0;top:0;bottom:0;z-index:25;
  padding:92px var(--gutter) calc(24px + env(safe-area-inset-bottom));background:var(--page-warm);animation:scende .25s ease;overflow-y:auto}
.menu.aperto .menu-voci{display:grid;position:relative;padding-left:34px}
/* le voci sono fermate su una linea gialla, come nello spot */
.menu.aperto .menu-voci::before{content:'';position:absolute;left:9px;top:22px;bottom:22px;width:4px;border-radius:2px;background:var(--m-oro)}
.menu.aperto .menu-voci a{position:relative;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.875rem;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;padding:12px 0;border:0}
.menu.aperto .menu-voci a::before{content:'';position:absolute;left:-31px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;
  background:var(--page-warm);border:4px solid var(--m-oro)}
.menu.aperto .menu-voci a[aria-current="page"]::before{background:var(--m-oro)}
.menu.aperto .menu-voci a[aria-current="page"]{color:var(--terra-deep)}
.menu.aperto .menu-voci a::after{display:none}
.menu.aperto .menu-piede{display:grid;gap:16px;margin-top:28px}
.menu.aperto .lingue-menu{display:inline-flex;justify-self:start}
.menu.aperto .menu-piede .btn{width:100%;color:#fff;font-size:1.0625rem;padding:17px 28px}
/* le regole delle voci del menu (colore, sottolineatura) non valgono per il bottone */
.menu .menu-piede .btn::after{content:'→';position:static;height:auto;background:none;border-radius:0;transform:none;transition:transform .2s ease}
.menu-aperto{overflow:hidden}
/* lo sfocato della testata (backdrop-filter) fa da contenitore ai figli «fixed»: col menu aperto
   va spento, o il foglio resta chiuso dentro i 70 px della testata */
.menu-aperto .testa{z-index:40;-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--page-warm)}
.menu-aperto .marchio,.menu-aperto .testa-dx{position:relative;z-index:30}
.menu-aperto .barra-entra{display:none}
.menu a[aria-current="page"]::after{transform:scaleX(1)}

/* ── perché, il racconto: chiaro e caldo, i numeri grandi come frasi ────────── */
.racconto{background:var(--page-warm);padding:0 0 80px}
.racconto-riga{max-width:900px}
.racconto :is(h1,h2),.interna .racconto h1{font-size:clamp(2.5rem,10vw,5rem);line-height:.98;letter-spacing:-.04em;max-width:14ch;margin-top:14px}
.atto{margin-top:64px}
.atto-nome{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--terra-deep)!important;display:flex;align-items:center;gap:12px}
.atto-nome::after{content:'';height:2px;flex:1;background:var(--line)}
.atto-testo{font-size:clamp(1.25rem,4.2vw,1.625rem);line-height:1.5;color:var(--ink)!important;margin-top:18px;max-width:34ch}
.righe-dati{margin-top:14px}
.riga-dato{display:grid;gap:4px;padding:22px 0;border-bottom:1px solid var(--line);color:var(--ink-soft)!important}
.riga-num{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(2.5rem,11vw,4rem);line-height:1;letter-spacing:-.04em;color:var(--ink)}
.riga-testo{font-size:1.125rem;line-height:1.5;max-width:40ch}
.atto-eppure{background:var(--warning-soft);border-radius:28px;padding:32px 26px 34px;margin-left:calc(var(--gutter) * -.5);margin-right:calc(var(--gutter) * -.5)}
.eppure-num{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(4.5rem,22vw,9rem);line-height:.9;letter-spacing:-.05em;color:#B07D0B!important;margin-top:14px}
.atto-eppure .atto-testo{margin-top:12px}
.atto-dignita{border-left:4px solid var(--terra);padding-left:22px}
.dignita-frase{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(1.75rem,7vw,3rem);line-height:1.08;letter-spacing:-.03em;
  color:var(--terra-deep)!important;margin-top:16px;max-width:18ch}
.atto-dignita .atto-testo + .atto-testo{margin-top:14px}
.js .promesse li.appare:nth-child(4){transition-delay:.45s}
.atto-promessa h3{font-size:clamp(1.75rem,6.5vw,2.75rem);letter-spacing:-.03em;line-height:1.05}
.promesse{list-style:none;margin:22px 0 28px;display:grid;gap:10px}
.promesse li{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:clamp(1.375rem,5vw,2rem);line-height:1.2;letter-spacing:-.02em;color:var(--ink);
  padding-left:30px;position:relative}
.promesse li::before{content:'';position:absolute;left:0;top:.42em;width:14px;height:14px;border-radius:50%;background:var(--page-warm);border:3.5px solid var(--m-oro)}
.js .promesse li.appare:nth-child(2){transition-delay:.15s}
.js .promesse li.appare:nth-child(3){transition-delay:.3s}
/* il palco (28/10): lo stesso cortile tre volte, sovrapposte; si vede quella dell'atto in lettura.
   Telefono: la tavola resta in cima sotto la testata e il testo le scorre sotto.
   Computer: la tavola sta a destra, ferma, e il testo scorre a sinistra. */
.palco-giro{position:relative;margin-top:28px}
/* la tavola che apre le pagine Fiducia e Negozi (28/10): sul crema, prima della fascia colorata */
.tavola-apertura{padding:8px 0 0}
.tavola-apertura + .fascia{margin-top:-2px}
.palco{position:sticky;top:72px;z-index:2;display:grid;padding-bottom:10px}
.palco::after{content:'';position:absolute;left:0;right:0;bottom:-18px;height:18px;background:linear-gradient(var(--page-warm),rgba(247,245,237,0));pointer-events:none}
.palco-img{grid-area:1/1;opacity:0;transition:opacity 1.1s ease}
@media (max-width:959px) and (orientation:portrait){
  .palco .palco-img{width:100%;height:42svh;object-fit:cover;object-position:50% 38%}
}
.palco-img.acceso{opacity:1}
.palco-testo{width:100%;max-width:var(--largo);margin:0 auto;padding:0 var(--gutter)}
.palco-testo .atto:first-child{margin-top:28px}
/* telefono orizzontale: la tavola ferma ruberebbe tutto lo schermo */
@media (max-height:560px){.palco{position:relative;top:auto}}
@media (prefers-reduced-motion:reduce){.palco-img{transition:none}}
.racconto .fonti{border-top:1px solid var(--line);color:var(--ink-faint)}
.racconto .fonti li{color:var(--ink-faint)}
.racconto .fonti a{color:var(--terra-deep)}
.racconto .rimando{background:var(--brand-soft);color:var(--terra-deep)}
/* i rimandi alle fonti: almeno 24 px, si toccano anche col pollice */
.rimando{min-width:24px;height:24px;border-radius:12px;font-size:.75rem}

/* ── il film del cortile (28/10, seconda versione) ───────────────────────────────
   Un albo illustrato a tutto schermo: la tavola riempie lo schermo, il testo sta in basso
   su una sfumatura crema, come il titolo di un capitolo. Una sola voce per le quattro frasi
   (Bricolage 800, la stessa del titolo): cambia solo il colore dell'ultima parola.
   Di base (senza JS, movimento ridotto) i momenti stanno in colonna, tavola e poi testo.
   Con .film-vivo lo schermo resta fermo per 4 altezze; landing.js muove --o (opacità),
   --s (avvicinamento) e, sul telefono, --px (la camera che scorre lungo la tavola). */
.film{position:relative;background:var(--page-warm)}
.film-quadro{display:grid;gap:0}
.film-img{width:100%;height:auto}
.film-didascalie{display:grid;gap:56px;padding:32px var(--gutter) 64px;max-width:var(--largo);margin:0 auto}
.film-frase,.film-fine h1.film-frase{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-variation-settings:'opsz' 60;
  font-size:clamp(2.4rem,10.5vw,5.75rem);line-height:1;letter-spacing:-.022em;color:var(--ink)!important;max-width:14ch;text-wrap:balance}
/* il «quando» sta dentro la frase: più leggero e blu, come «Chi si fida,» nella chiusa */
.film-attacco{font-weight:500;color:var(--terra-deep)}
.film-fine .lead{font-size:1.125rem;line-height:1.5;color:var(--ink-soft);margin-top:18px;max-width:38ch}
.film-fine .azioni{margin-top:24px}
.film-scorri{display:none}

.film-vivo{height:440vh}
.film-vivo .film-schermo{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
/* telefono: la tavola occupa i due terzi di sopra e sfuma nel crema; sotto, il testo sul crema pulito.
   Computer: la tavola riempie tutto lo schermo (regole in fondo). */
.film-vivo .film-quadro{position:absolute;left:0;right:0;top:0;height:66%;display:block;overflow:hidden}
.film-vivo .film-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--px,50%) 42%;opacity:var(--o,0);transform:scale(var(--s,1));transform-origin:var(--og,50% 45%);will-change:opacity,transform}
.film-vivo .film-img[data-k="0"]{--o:1}
/* <picture> non fa da scatola: le tavole si posano direttamente nel quadro */
.film picture,.palco picture{display:contents}
/* telefono in verticale: arrivano le tavole verticali (4:5), centrate; l'avvicinamento finale
   punta al balcone dell'anziana e poi al cestino */
.film-vivo .film-img{--px:50%}
.film-vivo .film-img[data-k="2"]{--og:78% 30%}
.film-vivo .film-img[data-k="3"]{--og:52% 42%}
/* telefono in orizzontale (tavole larghe): il centro di ogni tavola sta sulla storia */
@media (orientation:landscape) and (max-width:959px){
  .film-vivo .film-img[data-k="0"]{--px:60%}.film-vivo .film-img[data-k="1"]{--px:74%}
  .film-vivo .film-img[data-k="2"]{--px:68%}.film-vivo .film-img[data-k="3"]{--px:46%}
}
.film-vivo .film-quadro::after{content:'';position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none;
  background:linear-gradient(180deg,rgba(247,245,237,0) 0%,rgba(247,245,237,.75) 55%,var(--page-warm) 100%)}
.film-vivo .film-didascalie{position:absolute;left:0;right:0;bottom:0;display:block;padding:0;max-width:none;margin:0;height:46%}
.film-vivo .film-dida{position:absolute;left:0;right:0;bottom:0;padding:0 var(--gutter) calc(116px + env(safe-area-inset-bottom));max-width:1240px;margin:0 auto;
  opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0)) * 18px));pointer-events:none}
.film-vivo .film-dida[data-k="0"]{--o:1}
.film-vivo .film-dida.attiva{pointer-events:auto}
.film-vivo .film-frase{font-size:clamp(2.25rem,9.6vw,5.75rem)}
.film-vivo .film-scorri{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font-weight:600;font-size:.9375rem;color:var(--ink-soft)!important}
.film-vivo .film-scorri::after{content:'';width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);animation:scorri 1.6s ease-in-out infinite}
@keyframes scorri{50%{transform:rotate(45deg) translate(3px,3px)}}
.film-vivo .film-fine{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
.film-vivo .film-fine .lead{font-size:1.0625rem;margin-top:14px}
.film-vivo .film-fine .nota{display:none}
@media (max-height:720px){.film-vivo .film-fine .lead{display:none}.film-vivo .film-frase{font-size:2.1rem}}
.film-alla-fine .barra-entra{transform:translateY(110%)!important;pointer-events:none}
@media (min-width:960px){
  /* sul computer la tavola resta pulita: il crema sale solo dietro il testo, in basso a sinistra */
  .film-vivo .film-quadro{height:100%}
  .film-vivo .film-img[data-k]{--px:50%}
  .film-vivo .film-img[data-k="2"]{--og:76% 26%}
  .film-vivo .film-img[data-k="3"]{--og:70% 30%}
  .film-vivo .film-quadro::after{height:100%;background:
    radial-gradient(ellipse 62% 78% at 0% 100%,var(--page-warm) 0%,rgba(247,245,237,.92) 38%,rgba(247,245,237,.55) 58%,rgba(247,245,237,0) 78%),
    linear-gradient(180deg,rgba(247,245,237,0) 82%,var(--page-warm) 100%)}
  .film-vivo .film-dida{padding:0 56px 64px;max-width:none}
  .film-vivo .film-frase{font-size:clamp(3rem,4.7vw,5rem);max-width:15ch}
  .film-vivo .film-fine .lead{font-size:1.1875rem;max-width:36ch}
  .film-vivo .film-fine .nota{display:block}
}

/* ── 27/10 notte: negozi, capolinea, piede ───────────────────────────────── */
/* i negozi: il cartello vero, un foglio bianco appoggiato in vetrina */
.negozi-griglia{display:grid;gap:40px;align-items:center}
.cartello{margin:0 auto;width:min(100%,330px)}
.cartello-foglio{background:#fff;border-radius:6px;padding:26px 24px 22px;text-align:center;
  box-shadow:0 2px 0 rgba(20,32,58,.04),0 24px 48px -20px rgba(20,32,58,.35);transform:rotate(-2deg);
  transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.cartello:hover .cartello-foglio{transform:rotate(0) translateY(-4px)}
.cartello-foglio .marchio{justify-content:center}
.cartello-foglio .marchio span{font-size:1.25rem}
.cartello-titolo{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:1.125rem;color:var(--ink)!important;margin-top:10px}
.cartello-qr{width:72%;margin:18px auto 14px}
.cartello-nota{font-size:.875rem;color:var(--ink)!important}
.cartello-chi{font-size:.8125rem;color:var(--ink-faint)!important;margin-top:4px}
.cartello figcaption{text-align:center;font-size:.875rem;color:#8A6A10;margin-top:18px}
.tappe{list-style:none;counter-reset:t;margin-top:24px;display:grid;gap:16px;max-width:52ch}
.tappe li{counter-increment:t;position:relative;padding-left:46px;color:var(--ink-soft);line-height:1.5}
.tappe li b{color:var(--ink)}
.tappe li::before{content:counter(t);position:absolute;left:0;top:-2px;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;background:var(--ink);color:var(--ochre);font-weight:800;font-size:.9375rem}
.nota-tappe{font-size:.9375rem;margin-top:18px!important}

/* il capolinea: le linee dell'apertura arrivano tutte qui */
.capolinea{position:relative;isolation:isolate;overflow:hidden;padding:96px 0 104px;background:var(--page-warm);text-align:center}
.capolinea-linee{position:absolute;inset:0;z-index:-2;width:100%;height:100%;opacity:.55;pointer-events:none}
.m-capolinea{fill:var(--ochre);stroke:#fff;stroke-width:6}
.capolinea .m-capolinea{opacity:0}
.js .capolinea .m-linea{animation-play-state:paused}
.capolinea.visto .m-linea{animation-play-state:running}
.capolinea.visto .m-capolinea{animation:fermata .5s cubic-bezier(.3,1.6,.5,1) 1.4s forwards}
html:not(.js) .capolinea .m-capolinea{opacity:1}
.capolinea-riga{position:relative;display:grid;justify-items:center}
.capolinea-riga::before{content:'';position:absolute;inset:-30px -10px;background:radial-gradient(closest-side,var(--page-warm) 55%,rgba(247,245,237,0));z-index:-1}
.capolinea h2{font-size:clamp(2.25rem,9vw,4rem);line-height:1;letter-spacing:-.035em;max-width:14ch;margin:12px auto 0}
.capolinea p:not(.occhiello){margin-top:18px;color:var(--ink-soft)}
.capolinea .azioni{justify-content:center}

/* il piede */
.piede{padding:56px 0 calc(110px + env(safe-area-inset-bottom));border-top:6px solid var(--m-oro)}
.piede-alto{display:grid;gap:14px;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.12)}
.piede-alto .marchio span{font-size:1.75rem}
.piede-alto .marchio img{width:40px}
.piede-claim{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(1.75rem,7vw,3rem);line-height:1.02;letter-spacing:-.03em;color:#fff}
.piede-claim span{color:var(--ochre)}
.piede-griglia{display:grid;grid-template-columns:1fr 1fr;gap:28px 20px;margin-top:30px}
.piede-griglia nav,.piede-griglia div{display:flex;flex-direction:column;gap:10px}
.piede-titolo{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7E89A3}
.piede-griglia a{text-decoration:none;font-weight:600;color:#E7EAF2;width:fit-content;background:linear-gradient(var(--ochre),var(--ochre)) left bottom/0 2px no-repeat;
  transition:background-size .25s ease,color .2s ease;padding-bottom:2px}
.piede-griglia a:hover{background-size:100% 2px;color:#fff}
.piede-nota{margin-top:36px}

/* ── schermi piccolissimi (320) ──────────────────────────────────────────── */
@media (max-width:359px){
  :root{--gutter:16px}
  .marchio span{font-size:1.1875rem}
  .lingue button{min-width:34px;padding:8px 8px}
  .btn-piccolo{padding:9px 12px}
}

/* ── dal tablet in su ────────────────────────────────────────────────────── */
@media (min-width:720px){
  :root{--gutter:32px}
  .passi{grid-template-columns:repeat(3,1fr)}
  .dati{grid-template-columns:repeat(2,1fr)}
  .porte{grid-template-columns:repeat(2,1fr)}
  .riga-dato{grid-template-columns:220px 1fr;align-items:center;gap:28px}
  .atto-eppure{padding:44px 48px 48px;margin-left:-48px;margin-right:-48px}
  .app-giro{grid-template-columns:auto 1fr;gap:64px;justify-content:center}
  .telefono{width:300px}
  .risposte{grid-template-columns:repeat(3,1fr)}
  .dato-grande{grid-template-columns:auto 1fr;align-items:end;gap:28px}
  .passo-figura{height:220px}
  .fascia{padding:96px 0}
  .barra-entra{display:none}
  .piede{padding-bottom:48px}
  .piede-griglia{grid-template-columns:repeat(3,1fr)}
  .piede-alto{grid-template-columns:auto 1fr;align-items:end;gap:40px}
  .piede-claim{text-align:right}
  .negozi-griglia{grid-template-columns:.8fr 1.2fr;gap:72px}
  .una-volta-riga{grid-template-columns:1.15fr .85fr;gap:64px;margin-top:24px}
  .fumetti{padding-top:44px}
  .cura-ed-riga{grid-template-columns:1.15fr .85fr;gap:64px;align-items:start;margin-top:24px}
  .cura-ed-testo{padding-top:44px}
  .capolinea{padding:140px 0 150px}
}

@media (min-width:960px){
  .testa-riga{padding-top:22px;padding-bottom:22px}
  .eroe{padding:40px 0 96px}
  .eroe::before{right:-10%;top:-24%;width:58%}
  .metro{-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 30%,#000 52%);mask-image:linear-gradient(90deg,transparent 0,transparent 30%,#000 52%)}
  .eroe-griglia{grid-template-columns:1.05fr .95fr;align-items:center;gap:40px}
  .eroe-figura{width:100%;max-width:500px;margin:0 0 0 auto}
  .lead{font-size:1.3125rem}
  .due-colonne{grid-template-columns:1fr 1fr;gap:64px}
  .due-colonne.inverti .colonna-testo{order:0}
  .figura-media{width:min(100%,340px)}
  .menu,.menu.aperto{display:flex;position:static;background:none;padding:0;animation:none;overflow:visible}
  .menu .menu-voci{display:flex;gap:26px}
  .menu .menu-piede{display:none}
  .menu-apri{display:none}
  .lingue-testa{display:inline-flex}
  .testa-dx .btn-piccolo{display:inline-flex}
  .dati{grid-template-columns:repeat(4,1fr)}
  .racconto-riga{max-width:1180px}
  .palco-giro{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:56px;align-items:start;
    max-width:1180px;margin:40px auto 0;padding:0 var(--gutter)}
  .palco{grid-column:2;grid-row:1;top:calc(50vh - 190px);padding:0}
  .palco::after{display:none}
  .palco-testo{grid-column:1;grid-row:1;padding:0 0 12vh;max-width:none}
  .palco-testo .atto{margin-top:18vh}
  .palco-testo .atto:first-child{margin-top:8px}
  .palco-giro .riga-dato{grid-template-columns:1fr;gap:6px}
  .palco-giro .atto-eppure{margin-left:-40px;margin-right:0;padding:40px}
}