/* ═══════════════════════════════════════════════════════════════
   Longevity Wellness · landing primo step
   Sistema visivo in DESIGN.md. Riferimento: il referto termografico
   Una sola famiglia: Philosopher, il carattere del logo, nei suoi due pesi.
   ═══════════════════════════════════════════════════════════════ */

/* ── Token ────────────────────────────────────────────────────── */
/* Colori ufficiali dal manuale del marchio (LOGO CHIARA ESTETICA.pdf):
   lettering #6D4B33 · payoff e fiori #AA846A · gradiente fiori #85796D.
   Contrasti misurati su --paper: marrone 5.24:1, inchiostro-2 7.94:1,
   nota 4.80:1, rame-cupo 6.11:1. Sui fondi piu' carichi il rame-cupo tiene:
   5.57:1 su --carta e 4.79:1 su --carta-2. Il rame pieno (3.19:1) resta ai
   soli segni grafici, mai al testo. */
:root {
  --paper:        #FBF8F3;   /* bianco caldo, virato verso il rame del logo */
  --carta:        #F3EDE6;   /* fascia chiara, derivata dal rame */
  --carta-2:      #E7DCD1;   /* fasce e riquadri */

  --marrone:      #6E6762;   /* titoli e pulsante. Contrasti misurati:
                                5.24:1 su --paper, 4.78:1 su --carta, 4.12:1 su --carta-2 */
  --marrone-cupo: #56504C;   /* stato premuto: lo stesso grigio-bruno, piu' scuro */
  --rame:         #948B84;   /* segni grafici, non testo. Stessa luminosita' del
                                rame di prima (0,264 contro 0,261), quindi il peso
                                visivo non cambia: cambia solo la tinta. */
  --rame-cupo:    #635D58;   /* occhielli, numeri, nomi. Contrasti misurati:
                                6,12:1 su --paper, 5,58:1 su --carta,
                                4,81:1 su --carta-2. Dentro AA su tutti e tre. */
  --talpa:        #85796D;   /* gradiente dei fiori: pulsante */
  --talpa-cupa:   #6F645A;   /* stato premuto */
  --nota:         #756D68;   /* note e didascalie, 4.78:1 su paper */

  --inchiostro:   #302D2B;   /* testo forte, 12.91:1 su paper */
  --inchiostro-2: #514C49;   /* corpo, 7.99:1 su paper */

  --scuro:        #6F6661;   /* il fondo scuro della palette */
  --scuro-2:      #5E5651;   /* stesso tono, piu' profondo: pannelli dentro lo scuro */
  --chiaro-2:     #EFE8E0;   /* testo tenue sul fondo scuro, 4.61:1 */
  --rame-chiaro:  #F5E4D6;   /* accento sul fondo scuro, 4.52:1 */

  --filo:         #DFD3C6;
  --filo-tenue:   #EDE5DB;

  /* una sola famiglia, come da manuale del marchio.
     Philosopher ha due soli pesi: 400 e 700. La gerarchia si fa con
     dimensione, colore e spaziatura, non con pesi intermedi. */
  --titolo: "Philosopher", Georgia, "Times New Roman", serif;
  --testo:  "Philosopher", Georgia, "Times New Roman", serif;

  --gutter: 26px;
  --uscita: cubic-bezier(0.22, 1, 0.36, 1);

  /* Raggi e superfici, dal riferimento indicato da Fabio il 27 agosto 2026.
     Le sue superfici sono tutte molto arrotondate: 24-28px sui riquadri,
     18-20px sulle foto, pulsanti a pillola piena. */
  --raggio-card: 24px;
  --raggio-foto: 18px;
  --pillola: 999px;

  /* i lavaggi tenui che dividono le sezioni al posto dei filetti */
  --lavaggio:  linear-gradient(168deg, #FBF8F3 0%, #F5F0E9 52%, #F1EAE1 100%);
  --lavaggio-2: linear-gradient(158deg, #F6F0E8 0%, #F1E9DF 100%);
}

/* Nessun tema scuro: il brand Longevity e' chiaro, e la pagina resta
   chiara anche se il telefono e' impostato in modalita' scura. */
:root { color-scheme: light; }

/* ── Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Ogni immagine sta dentro un <picture> per servire il WebP con il
   ripiego JPEG. Il <picture> e' inline per difetto: a blocco prende il
   posto che aveva l'immagine dentro griglie e flex, e non aggiunge la
   riga di base che lasciava tre pixel sotto le foto. */
picture { display: block; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--inchiostro);
  font-family: var(--testo);
  font-size: 17.5px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* la barra fissa e' alta 110px su telefono e 92 su schermo largo: senza questo
   spazio coprirebbe le ultime righe. Legato alla presenza della barra, cosi'
   quando non c'e' non resta un vuoto in fondo alla pagina. */
body:has(#sticky) { padding-bottom: calc(114px + env(safe-area-inset-bottom)); }

img { display: block; max-width: 100%; height: auto; }

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--marrone);
  outline-offset: 3px;
}

.page { background: var(--paper); }



/* ── Logo ─────────────────────────────────────────────────────── */
.brandline {
  display: flex;
  justify-content: center;
  padding: 10px var(--gutter) 0;
}

.logo {
  width: 96px;
  height: auto;
}

/* ── Pre-headline ─────────────────────────────────────────────── */
.prehead {
  margin: 0;
  padding: 13px var(--gutter);
  background: var(--carta-2);
  border-bottom: 1px solid var(--filo);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  color: var(--inchiostro-2);
}

.prehead mark {
  background: none;
  color: var(--marrone);
  font-weight: 700;
}

/* ── Hero ─────────────────────────────────────────────────────── */
.hero { padding: 8px 20px 0; }

.hero__title {
  margin: 0 0 12px;
  font-family: var(--titolo);
  font-weight: 400;
  font-size: clamp(29px, 7.5vw, 41px);
  line-height: 1.13;
  letter-spacing: -0.014em;
  text-align: center;
  text-wrap: balance;
}

/* ── I tre livelli di evidenza ────────────────────────────────────
   Nati nell'above the fold e usati in tutta la pagina, sempre nello
   stesso ordine di forza. Uno solo del primo tipo per sezione: se tutto
   e' in evidenza, niente lo e'.

   .key    grassetto con il segno in rame sotto: il concetto centrale
   .strong / <b>  solo grassetto: i dati e le affermazioni che reggono
   <i>     corsivo: le sfumature e i contrappunti                        */
.key,
.strong,
.hero__title .key,
.hero__title .strong {
  font-weight: 700;
  color: var(--inchiostro);
}

.key,
.hero__title .key {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background-image: linear-gradient(var(--rame), var(--rame));
  background-size: 100% 2.5px;
  background-position: 0 94%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
}

/* sul fondo scuro il rame pieno non si vede: il segno passa allo schiarito */
.buio .key,
.sit .key { color: var(--paper); background-image: linear-gradient(var(--rame-chiaro), var(--rame-chiaro)); }

/* il corsivo e' quello vero di Philosopher, dichiarato nel caricamento
   del font, non un'inclinazione inventata dal browser */
.metodo i, .punto i, .passo i, .sit i, .buio i, .dilemma i, .act i {
  font-style: italic;
  color: var(--inchiostro-2);
}

.buio i, .sit i { color: var(--chiaro-2); }

.hero__anche {
  margin: 0;
  font-size: 17.5px;
  line-height: 1.6;
  text-align: center;
  color: var(--inchiostro-2);
}

.hero__anche b {
  font-weight: 700;
  color: var(--inchiostro);
}

/* ── VSL ──────────────────────────────────────────────────────── */
.vsl {
  position: relative;
  margin: 4px 0 0;
  padding-inline: 14px;
}

/* invito sotto il video, allineato a destra */
.vsl__invito {
  margin: 10px 0 0;
  padding-inline: var(--gutter);
  font-size: 16.5px;
  font-weight: 700;
  text-align: right;
  color: var(--marrone);
}

.vsl__mano {
  display: inline-block;
  margin-inline-start: 6px;
  font-size: 17px;
  animation: manina 2s ease-in-out infinite;
}

@keyframes manina {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ── Anello di luce intorno al video ──────────────────────────── */
@property --giro {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* L'anello di luce: nato intorno al video, ora e' una classe che si
   applica a qualunque superficie. Il raggio lo eredita dal contenitore. */
.anello,
.vsl__anello { position: relative; }

.anello::before,
.vsl__anello::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  padding: 3px;
  background: conic-gradient(from var(--giro),
    rgba(133, 121, 109, 0)    0deg,
    rgba(133, 121, 109, 0.25) 25deg,
    var(--talpa)              60deg,
    #E2D6C8                   90deg,
    var(--talpa)             120deg,
    rgba(133, 121, 109, 0.25)155deg,
    rgba(133, 121, 109, 0)   190deg,
    rgba(133, 121, 109, 0)   360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box exclude, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box exclude, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  animation: giroAnello 4s linear infinite;
  pointer-events: none;
}

@keyframes giroAnello {
  to { --giro: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .vsl__mano { animation: none; }
  .anello::before,
  .vsl__anello::before { animation: none; }
}

.vsl__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--raggio-foto);
  background: var(--carta-2);
  box-shadow:
    0 2px 5px rgba(58, 42, 29, 0.10),
    0 10px 24px rgba(58, 42, 29, 0.12),
    0 22px 48px rgba(58, 42, 29, 0.10);
}

/* il player interno segue lo stesso raggio della cornice */
.vsl__frame wistia-player,
.vsl__frame iframe { border-radius: inherit; }

.vsl__frame wistia-player { display: block; width: 100%; height: 100%; }

/* poster mentre il player carica */
/* Il fotogramma sfocato arriva dai server di Wistia: e' una chiamata a terzi
   e quindi si accende solo dopo il consenso, con la classe che mette il JS. */
html.ck-video wistia-player[media-id="wxwc5mm9q4"]:not(:defined) {
  display: block;
  padding-top: 56.25%;
  background: center / cover no-repeat
    url('https://fast.wistia.com/embed/medias/wxwc5mm9q4/swatch');
  filter: blur(5px);
}

/* ── Il falso dilemma ─────────────────────────────────────────── */
/* La fascia piena subito sotto l'hero e' la mossa piu' riconoscibile del
   riferimento: una striscia di colore a tutta larghezza che stacca il primo
   schermo dal resto. Il copy e' quello di prima, non cambia una parola.
   Contrasti su --scuro: paper 5,29:1, rame-chiaro 4,52:1. */
.dilemma {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding: 30px var(--gutter) 32px;
  background: var(--scuro);
}

.dilemma p {
  margin: 0;
  max-width: 64ch;
  margin-inline: auto;
  font-size: 17.5px;
  line-height: 1.62;
  text-align: center;
  text-wrap: pretty;
  color: var(--chiaro-2);
}

.dilemma b { font-weight: 700; color: var(--paper); }

/* ── Blocco d'azione ──────────────────────────────────────────── */
.act { padding: 28px var(--gutter) 34px; }

.act__lead {
  margin: 0 0 22px;
  max-width: 65ch;
  font-size: 17.5px;
  line-height: 1.55;
}

/* Pillola piena, come tutti i pulsanti del riferimento, nel marrone del
   lettering del logo: il talpa squadrato era il punto piu' debole della
   pagina accanto a quel modello. Paper su marrone: 7,33:1. */
.cta {
  display: block;
  width: 100%;
  padding: 20px 26px;
  border-radius: var(--pillola);
  background: var(--marrone);
  color: var(--paper);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.005em;
  text-wrap: balance;
  box-shadow: 0 2px 6px rgba(58, 42, 29, 0.16), 0 10px 24px rgba(58, 42, 29, 0.14);
  transition: background 0.2s var(--uscita), transform 0.2s var(--uscita),
              box-shadow 0.2s var(--uscita);
}

.cta:hover {
  background: var(--marrone-cupo);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(58, 42, 29, 0.18), 0 14px 30px rgba(58, 42, 29, 0.16);
}

.cta:active { background: var(--marrone-cupo); transform: none; }

.act__micro {
  margin: 13px 0 0;
  font-size: 14px;
  text-align: center;
  color: var(--nota);
}

/* ── Certificazioni ───────────────────────────────────────────── */
/* Tre pilastri affiancati e divisi da un filetto verticale, come la fascia
   dei tre punti del riferimento. Il fondo e' un lavaggio, non una campitura
   piatta: nel modello le sezioni si separano con sfumature tenui. */
.trust {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 18px 0;
  padding: 34px var(--gutter);
  background: var(--lavaggio);
}

.trust__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding-inline: 30px;
}

@media (min-width: 620px) {
  .trust__item + .trust__item { border-inline-start: 1px solid var(--filo); }
}

.trust__google { gap: 9px; }

.gicon { width: 21px; height: 21px; flex: none; }

.gvoto {
  font-size: 25px;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--inchiostro);
}

.stars {
  color: #F5B942;
  font-size: 15px;
  letter-spacing: 0.06em;
}

.trust__lab {
  font-size: 15px;
  color: var(--inchiostro-2);
  line-height: 1.3;
}

.trust__lab b { font-weight: 700; color: var(--inchiostro); }

.trust__n {
  display: inline-block;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--inchiostro);
}

.trust__piu { font-size: 0.6em; vertical-align: super; line-height: 0; color: var(--rame-cupo); }

/* il numero conta da zero, ma lo spazio delle tre cifre e' gia' riservato:
   cosi' niente si sposta mentre il valore sale */
.trust__cifre {
  display: inline-block;
  min-width: 3ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}



/* Segnaposto tipografico del marchio Baldan, in attesa del file vettoriale.
   Il payoff sotto sta a 8,5px, sotto la soglia di leggibilita': non e' testo
   da leggere ma il disegno di un lettering, e quando arriva il logo vero
   diventa un'immagine. E' l'unica eccezione dichiarata della pagina. */
.baldan { display: block; text-align: center; color: var(--inchiostro); }
.baldan__nome {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.34em;
  line-height: 1;
}
.baldan__paio {
  display: block;
  margin-top: 3px;
  font-size: 8.5px;
  letter-spacing: 0.22em;
  color: var(--talpa);
}

/* ── 01b · Le due fasce prima e dopo ──────────────────────────── */
/* Da bordo a bordo, senza angoli arrotondati, come da DESIGN.md.
   Il fondo e' lo stesso della fascia certificazioni sopra: le due
   si leggono come un unico blocco di prova. */
.prova {
  display: grid;
  gap: 12px;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  /* stesso fondo della fascia certificazioni sopra: le due si leggono come
     un unico blocco di prova. Lo spazio sotto chiude il blocco e usa lo
     nel bianco e non si capisce dove la sezione si chiude.
     Da tablet in su la striscia e' alta quanto la fascia certificazioni.
     Su telefono no: li' quella fascia va a capo su tre righe e arriva a 196
     pixel, che a schermo stretto sarebbe mezzo schermo di vuoto. */
  padding-block: 12px 56px;
  background: var(--carta-2);
}

.prova__fascia {
  display: flex;
  gap: 24px;                    /* lo stacco fra due persone, largo e chiaro */
  margin: 0;
  padding-inline: 14px;
  padding-block: 0;
  list-style: none;
  scroll-padding-inline-start: 14px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--marrone) transparent;
}

.caso {
  flex: 0 0 auto;
  /* una coppia per schermata, con uno spiraglio della successiva che dice
     che ce n'e' ancora, ma troppo stretto per essere scambiato per una foto */
  width: calc(100vw - 52px);
  scroll-snap-align: start;
  padding: 7px 7px 0;           /* la coppia rientra: stampa appoggiata, non incollata */
  background: var(--paper);     /* il fondo chiaro tiene insieme la coppia */
  border-radius: var(--raggio-foto);
  overflow: hidden;
  /* le foto hanno il muro bianco della cabina: senza ombra sembrerebbero
     incollate sul fondo. Due strati, corti e bassi. */
  box-shadow:
    0 1px 2px rgba(58, 42, 29, 0.08),
    0 7px 18px rgba(58, 42, 29, 0.13);
}

/* la coppia: prima a sinistra, dopo a destra, divise da un segno in rame.
   Il segno dice che le due immagini si confrontano fra loro, il vuoto largo
   fuori dalla tessera dice che la persona accanto e' un'altra. */
.caso__coppia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  border-radius: 12px;
  overflow: hidden;
  /* il rame fa sia la riga in mezzo sia la cornice: cosi' il bianco del
     muro non si scioglie nel fondo della tessera */
  background: var(--rame);
  outline: 1px solid var(--rame);
  outline-offset: 0;
}

.caso__coppia img {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}

/* etichette sotto la coppia, come su un foglio di misure */
.caso__eti {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  border-top: 1px solid var(--filo);
}

.caso__eti b {
  padding: 9px 5px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  color: var(--nota);
}

.caso__eti b + b { border-inline-start: 1px solid var(--filo); }

/* il rame marca il dopo */
.caso__eti .e-dopo { color: var(--rame-cupo); }


/* frecce di scorrimento: ai bordi della striscia, mai sopra le immagini.
   Compaiono solo quando c'e' davvero altro da vedere, e su desktop
   spariscono perche' le cinque tessere entrano tutte. */
/* min-width: 0 e' obbligatorio: senza, l'elemento della griglia prende
   min-width auto e cresce fino al contenuto, e la striscia non scorre piu' */
.prova__riga { position: relative; min-width: 0; }

.scorri {
  position: absolute;
  top: calc(50% - 20px);          /* centrata sulle foto, non sulle etichette */
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--filo);
  border-radius: 50%;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(58, 42, 29, 0.16);
  transition: opacity 0.2s var(--uscita), background 0.2s var(--uscita);
}

.scorri--sx { inset-inline-start: 8px; }
.scorri--dx { inset-inline-end: 8px; }

.scorri svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--marrone);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scorri:hover { background: var(--paper); }
.scorri[hidden] { display: none; }

/* ── 04 · Il problema, agitato ────────────────────────────────── */
/* L'unico blocco scuro della pagina, nel grigio caldo della palette.
   Contrasti misurati su #6F6661: paper 5.29:1, chiaro-2 4.61:1,
   rame-chiaro 4.52:1. Su questo fondo il rame pieno arriva a 1.66:1,
   quindi qui non si usa: gli accenti sono versioni schiarite. */
.buio {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding: 52px var(--gutter) 54px;
  background: var(--scuro);
  color: var(--paper);
}

/* l'involucro centra il contenuto: i margini in forma breve sui singoli
   elementi azzererebbero un margin-inline:auto messo sui figli diretti */
.buio__dentro { max-width: 640px; margin-inline: auto; }

.buio__t {
  margin: 0 0 16px;
  font-family: var(--titolo);
  font-weight: 400;
  font-size: clamp(27px, 7vw, 35px);
  line-height: 1.16;
  letter-spacing: -0.014em;
  text-wrap: balance;
  color: var(--paper);
}

.buio__lead {
  margin: 0 0 24px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--rame-chiaro);
}

/* Le frasi del pubblico, numerate come i passi del riferimento: il numero
   grande a sinistra, la citazione accanto. Restano parole testuali, quindi
   le virgolette non si perdono. */
.dette {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dette li {
  display: grid;
  grid-template-columns: 2.6em minmax(0, 1fr);
  align-items: baseline;
  column-gap: 14px;
  padding: 16px 0 17px;
  border-bottom: 1px solid rgba(251, 248, 243, 0.22);
}

.dette li:first-child { border-top: 1px solid rgba(251, 248, 243, 0.22); }

.dette__n {
  font-family: var(--titolo);
  font-size: 26px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--rame-chiaro);
}

.dette__t {
  font-size: 17.5px;
  line-height: 1.5;      /* la soglia WCAG per il corpo del testo */
  text-wrap: pretty;
  color: var(--paper);
}

.dette__t::before { content: "\201C"; color: var(--rame-chiaro); }
.dette__t::after  { content: "\201D"; color: var(--rame-chiaro); }

/* ── La testa della sezione: foto a sinistra, testo a destra ──────
   E' l'impianto della pagina programma del riferimento. La foto e' un
   segnaposto finche' Fabio non sceglie quale immagine va qui. */
.buio__testa { display: grid; gap: 26px; margin-bottom: 34px; }

.posto { margin: 0; }

.posto__quadro,
.posto__foto {
  width: 100%;
  aspect-ratio: 9 / 16;        /* impilata sul telefono, verticale piena */
  border-radius: var(--raggio-foto);
}

.posto__foto {
  object-fit: cover;
  object-position: 18% 46%;   /* la lastra sta a sinistra nell'inquadratura */
}

.posto__quadro {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  background: var(--scuro-2);
  border: 1px dashed rgba(251, 248, 243, 0.32);
  color: var(--chiaro-2);
}

.posto__quadro svg {
  width: 44px;
  height: 37px;
  fill: none;
  stroke: var(--rame-chiaro);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.posto__quadro span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Il pannello unico e' stato sostituito dalle sette card: la superficie
   che staccava le situazioni dalle frasi ora la fanno le card stesse.
   Contrasti su --scuro-2 (#5E5651): paper 6.78:1, chiaro-2 5.91:1. */

/* la riga che chiude il primo movimento: sta subito sotto le sei frasi,
   con un filo sopra e molta aria, perche' e' il punto in cui la sezione
   smette di elencare e dice la cosa. */
.buio__chiusa {
  margin: 30px 0 0;
  padding-top: 28px;
  border-top: 1px solid rgba(251, 248, 243, 0.30);
  font-family: var(--titolo);
  font-size: clamp(23px, 5.8vw, 29px);
  line-height: 1.24;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--paper);
}

.buio__ponte {
  margin: 0 0 18px;
  max-width: none;
  font-size: 16.5px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--rame-chiaro);
}

.buio__ponte--largo {
  margin: 40px 0 20px;
  font-family: var(--titolo);
  font-size: clamp(21px, 5.2vw, 26px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--paper);
}

/* ── La coda: due riquadri appaiati ──────────────────────────────
   E' lo schema del riferimento dove il grafico dei mesi sta accanto al
   calcolatore: due superfici della stessa famiglia, una che mostra una
   progressione nel tempo e una che tira le somme. */
.coda { display: grid; gap: 16px; margin-top: 40px; }

.quadro {
  padding: 30px 26px 28px;
  background: var(--scuro-2);
  border: 1px solid rgba(251, 248, 243, 0.13);
  border-radius: var(--raggio-card);
}

.quadro__t {
  margin: 0 0 22px;
  font-family: var(--titolo);
  font-size: clamp(22px, 5.4vw, 27px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--paper);
}

/* ── La linea del tempo: tre card sfalsate ───────────────────────
   Gli anni non sono un elenco, sono una discesa. Le card scalano verso
   destra e il filo che le lega si disegna mentre si scorre: e' il punto
   in cui la sezione agita il problema, e il movimento serve a quello. */
.tempo {
  position: relative;
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0 0 0 30px;
  list-style: none;
}

/* il filo: cresce dall'alto seguendo lo scorrimento della pagina */
.tempo__filo {
  position: absolute;
  inset-inline-start: 5px;
  top: 10px;
  bottom: 26px;
  width: 2px;
  transform: scaleY(var(--avanzamento, 0));
  transform-origin: top center;
  background: linear-gradient(180deg,
    var(--rame-chiaro) 0%,
    #FFF3E2 45%,
    var(--rame-chiaro) 100%);
  box-shadow: 0 0 7px rgba(255, 243, 226, 0.55);
  will-change: transform;
}

.tappa {
  position: relative;
  padding: 18px 20px 19px;
  background: var(--scuro);
  border: 1px solid rgba(251, 248, 243, 0.14);
  border-radius: 16px;
  transition: transform 0.5s var(--uscita), border-color 0.5s var(--uscita);
}

/* lo sfalsamento: ogni anno scala di un gradino */
.tappa:nth-child(2) { margin-inline-start: 14px; }
.tappa:nth-child(3) { margin-inline-start: 28px; }

/* il nodo sul filo */
.tappa::before {
  content: "";
  position: absolute;
  inset-inline-start: -30px;
  top: 22px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--scuro-2);
  border: 2px solid rgba(245, 228, 214, 0.45);
  transition: background 0.45s var(--uscita), border-color 0.45s var(--uscita),
              box-shadow 0.45s var(--uscita);
}

/* il nodo si accende quando il filo lo raggiunge */
.tappa.is-viva::before {
  background: #FFF3E2;
  border-color: #FFF3E2;
  box-shadow: 0 0 0 5px rgba(245, 228, 214, 0.16),
              0 0 12px rgba(255, 243, 226, 0.8);
}

.tappa.is-viva { border-color: rgba(251, 248, 243, 0.26); }

/* lo sfalsamento cresce con il nodo dei margini: il trattino di
   collegamento va dal filo alla card */
.tappa:nth-child(2)::after,
.tappa:nth-child(3)::after {
  content: "";
  position: absolute;
  inset-inline-start: -18px;
  top: 27px;
  width: 18px;
  height: 1px;
  background: rgba(245, 228, 214, 0.32);
}

.tappa:nth-child(3)::after { inset-inline-start: -32px; width: 32px; }

.tempo__n {
  display: block;
  margin-bottom: 5px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rame-chiaro);
}

.tempo p {
  margin: 0;
  font-size: 17.5px;
  line-height: 1.5;
  text-wrap: pretty;
  color: var(--paper);
}

@media (prefers-reduced-motion: reduce) {
  .tempo__filo { transform: scaleY(1); }
  .tappa { transition: none; }
  .tappa::before { transition: none; }
}

/* il riquadro che tira le somme: nessun titolo, solo le due frasi */
.quadro--chiusa { display: grid; align-content: center; }
.quadro--chiusa .buio__testo:last-child { margin-bottom: 0; }

/* Le situazioni erano un elenco puntato lungo sette righe. Ora sono sette
   card con l'icona sopra, come i riquadri programma del riferimento, nella
   versione scura della sezione. */
.situazioni {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sit {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 22px 26px;
  background: var(--scuro-2);
  border: 1px solid rgba(251, 248, 243, 0.13);
  border-radius: var(--raggio-card);
  text-align: center;
}

.sit__ico { display: block; margin-bottom: 14px; }

/* Sul fondo scuro il tratto passa al rame schiarito, e la scia sale quasi
   al bianco caldo: il rame scuro qui scenderebbe sotto il contrasto utile.
   Il selettore e' doppio di proposito: la regola generica .ico e' scritta
   piu' avanti nel file e altrimenti vincerebbe lei. */
.sit .ico,
.ico.ico--sit { stroke: var(--rame-chiaro); stroke-width: 1.7; }

.sit .ico__luce,
.ico.ico--sit .ico__luce {
  stroke: #FFF3E2;
  filter: drop-shadow(0 0 5px rgba(255, 243, 226, 0.95))
          drop-shadow(0 0 11px rgba(255, 226, 190, 0.5));
}

.sit__t {
  margin: 0;
  max-width: 40ch;
  font-size: 17.5px;
  line-height: 1.58;
  text-wrap: pretty;
  color: var(--chiaro-2);
}

.sit__t b { font-weight: 700; color: var(--paper); }

/* la riga che introduce le sette card. Il margine automatico serve: piu'
   avanti .buio__ponte prende max-width 62ch, e senza centrare anche il box
   il testo resterebbe centrato dentro una colonna appoggiata a sinistra. */
.buio__ponte--sit {
  max-width: 60ch;
  margin: 40px auto 22px;
  text-align: center;
}

.buio__testo {
  margin: 0 0 15px;
  font-size: 17.5px;
  line-height: 1.62;
  text-wrap: pretty;
  color: var(--chiaro-2);
}

.buio__testo b { font-weight: 700; color: var(--paper); }

/* ── 02 · Cosa c'e' dentro ────────────────────────────────────── */
/* Bullet con il beneficio in apertura. La numerazione in rame viene dal
   referto: zone numerate, non spunte verdi. Niente riquadri: le voci sono
   divise da un filo, come su un foglio di misure. */
.dentro {
  padding: 46px var(--gutter) 44px;
  background: var(--paper);
}

/* l'involucro centra la colonna: i margini in forma breve sui singoli
   elementi azzererebbero un margin-inline:auto messo sui figli diretti */
.dentro__dentro { margin-inline: auto; }

.occhiello {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rame-cupo);
}

/* ── Sistema di sezione ───────────────────────────────────────── */
/* Ogni sezione si apre allo stesso modo: un occhiello corto in rame,
   il titolo grande sotto. E' il segnale di gerarchia che ricorre in
   tutta la pagina e che prima non c'era: le sezioni si aprivano tutte
   con un titolo e basta, e da lontano si somigliavano. */
.testa {
  padding-inline: var(--gutter);
  margin-bottom: 24px;
}

.testa--centro { text-align: center; }

.titolo {
  margin: 0;
  font-family: var(--titolo);
  font-weight: 400;
  font-size: clamp(26px, 6.6vw, 33px);
  line-height: 1.14;
  letter-spacing: -0.014em;
  text-wrap: balance;
  color: var(--inchiostro);
}

/* un gradino sotto: per le sezioni che illustrano invece di annunciare */
.titolo--m { font-size: clamp(22px, 5.4vw, 27px); }

/* sul fondo scuro il rame pieno scende a 1,66:1: qui serve la versione
   schiarita, la stessa usata dagli altri accenti del blocco */
.occhiello--buio { color: var(--rame-chiaro); }

.dentro__lead {
  margin: -14px auto 4px;
  max-width: 46ch;
  text-align: center;
  font-size: 17px;
  line-height: 1.55;
  color: var(--nota);
}

/* I punti seguono il modello dei tre pilastri del riferimento: icona a
   tratto sopra, titolo, testo, tutto centrato dentro un riquadro con fondo
   tenue. Sei punti e non cinque, per chiudere la griglia a tre per due. */
.punti {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.punto {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 34px 24px 30px;
  background: var(--lavaggio-2);
  border: 1px solid var(--filo);
  border-radius: var(--raggio-card);
  text-align: center;
}

/* Al posto del numero un segno soltanto: nel modello i pilastri non sono
   numerati, e la cifra in mezzo a una colonna centrata rubava la scena.
   Un rombo in rame con un alone tenue, la stessa geometria dei riquadri
   ruotata di quarantacinque gradi. Niente foglie: quelle stanno nel logo. */
.punto__seg {
  position: absolute;
  top: 20px;
  inset-inline-end: 22px;
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  background: var(--rame);
  box-shadow:
    0 0 0 4px rgba(170, 132, 106, 0.16),
    0 0 0 8px rgba(170, 132, 106, 0.07);
}

.punto__ico { display: block; margin-bottom: 16px; }

/* ── Le icone ─────────────────────────────────────────────────────
   Disegnate a tratto, una per punto, nessuna libreria. Il tratto base e'
   il rame scuro del testo; sopra corre una seconda passata luminosa.
   Ogni tracciato porta pathLength="200", cosi' la scia impiega lo stesso
   tempo su un cerchio e su una linea retta. */
.ico {
  display: block;
  width: 60px;
  height: 60px;
  fill: none;
  stroke: var(--rame-cupo);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ico__luce {
  stroke: #D08E4B;
  stroke-width: 3.2;
  stroke-dasharray: 26 174;
  stroke-dashoffset: 200;
  filter: drop-shadow(0 0 5px rgba(208, 142, 75, 0.95))
          drop-shadow(0 0 10px rgba(208, 142, 75, 0.45));
  animation: scia 5s linear infinite;
}

@keyframes scia {
  from { stroke-dashoffset: 200; }
  to   { stroke-dashoffset: 0; }
}

/* sfalsate, altrimenti le sei icone lampeggiano all'unisono e la sezione
   sembra un pannello di controllo */
.punto:nth-child(2) .ico__luce { animation-delay: 0.85s; }
.punto:nth-child(3) .ico__luce { animation-delay: 1.7s; }
.punto:nth-child(4) .ico__luce { animation-delay: 2.55s; }
.punto:nth-child(5) .ico__luce { animation-delay: 3.4s; }
.punto:nth-child(6) .ico__luce { animation-delay: 4.25s; }

@media (prefers-reduced-motion: reduce) {
  .ico__luce { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0; }
}

/* il beneficio sta sopra, da solo. La descrizione sotto. */
.punto__t {
  margin: 0 0 8px;
  max-width: 26ch;
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -0.004em;
  text-wrap: balance;          /* niente titoli con una parola sola in coda */
  color: var(--inchiostro);
}

.punto__d {
  margin: 0;
  max-width: 40ch;
  font-size: 17.5px;
  line-height: 1.58;
  text-wrap: pretty;           /* evita le righe finali di una o due parole */
  color: var(--inchiostro-2);
}

/* ── 02b · Le tecnologie ──────────────────────────────────────── */
/* Due foto verticali, grandi, con il nome sotto. Sono le foto migliori
   dell'archivio: hanno le luci vere della cabina, e sono l'unica prova
   visiva che il movimento e' in sede. Il velo caldo sopra le riconcilia
   con la carta della pagina senza cambiare i colori della cabina. */
.tecno {
  padding-block: 46px 48px;
  background: var(--lavaggio);
}

.tecno__lista {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
  padding-inline: var(--gutter);
  list-style: none;
}

.tecno__voce { position: relative; margin: 0; }

.tecno__voce img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--raggio-foto);
  box-shadow:
    0 1px 3px rgba(58, 42, 29, 0.10),
    0 10px 26px rgba(58, 42, 29, 0.14);
}

.tecno__nome {
  margin: 11px 0 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--rame-cupo);
}

/* ── 02c · Chi ti segue ───────────────────────────────────────── */
/* Foto a sinistra, testo a destra. Su schermo largo la foto esce dal
   margine e arriva al bordo, con gli angoli tondi solo dal lato del
   testo: e' la stessa mossa della sezione "Evidence-based treatment"
   del riferimento, portata sulla nostra carta. */
.chi {
  padding-block: 46px 50px;
  background: var(--paper);
}

.chi__foto {
  margin: 0 0 24px;
  padding-inline: var(--gutter);
}

.chi__foto img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 34%;      /* i volti stanno in alto nell'inquadratura */
  border-radius: var(--raggio-foto);
  background: var(--carta-2);
}

.chi__testo { padding-inline: var(--gutter); }

.chi__p {
  margin: 14px 0 0;
  max-width: 54ch;
  font-size: 17.5px;
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--inchiostro-2);
}

/* ── 03 · Le recensioni ───────────────────────────────────────── */
/* Tessere orizzontali: foto a sinistra, frase forte accanto, recensione
   sotto per intero. Stesso meccanismo della fascia prima e dopo, frecce
   comprese. I testi sono verbatim: la frase in evidenza compare alla
   lettera dentro la recensione. */
.voci {
  padding-block: 46px 48px;
  background: var(--lavaggio);
}

.voci__testa { margin-bottom: 22px; }

/* la fonte, in corsivo e centrata sotto il titolo. Il corsivo qui e' un
   corsivo vero di Philosopher, dichiarato nel caricamento del font, non
   un'inclinazione inventata dal browser. */
.voci__fonte {
  margin: 8px 0 0;
  font-size: 15.5px;
  font-style: italic;
  line-height: 1.4;
  text-align: center;
  color: var(--nota);
}

/* overflow-x: clip e non hidden: taglia in orizzontale senza creare un
   secondo scorritore e senza toccare l'asse verticale. Senza questa riga
   il contenuto della striscia allarga la pagina di 492 pixel. */
.voci__riga { position: relative; min-width: 0; overflow-x: clip; }

.voci__fascia {
  display: flex;
  /* su telefono si vede una tessera per volta: l'altezza uniforme non
     servirebbe a niente e lascerebbe sotto le recensioni corte lo stesso
     vuoto della piu' lunga. Da tablet in su, dove stanno affiancate,
     torna stretch. */
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  padding-inline: var(--gutter);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--marrone) transparent;
}

/* Tessere tutte uguali, contenuto centrato: foto, stelle, la frase forte,
   la recensione, e il nome in fondo. E' l'impianto del carosello del
   riferimento, con in piu' il volto di chi ha scritto. */
.voce {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  width: min(84vw, 420px);
  padding: 32px 26px 28px;
  background: var(--paper);
  border: 1px solid var(--filo);
  border-radius: var(--raggio-card);
  text-align: center;
  scroll-snap-align: start;
}

/* Segnaposto in attesa delle foto vere: gli avatar Google di queste persone
   non sono volti. Quando arrivano, lo <span> diventa <img class="voce__foto">
   e queste stesse regole valgono gia'. */
/* Lo stacco sotto l'avatar deve essere lo stesso con la foto e senza. La
   foto sta dentro un <picture>, il monogramma e' uno <span> nudo: senza
   questa riga il monogramma restava attaccato alle stelline. */
.voce picture,
.voce > span.voce__foto { margin-bottom: 15px; }

.voce__foto {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 1px solid var(--filo);
  background: var(--carta-2);
  object-fit: cover;
  font-size: 34px;
  line-height: 1;
  color: var(--rame-cupo);
}

.voce__stelle {
  margin: 0 0 8px;
  font-size: 19px;
  letter-spacing: 0.11em;
  line-height: 1;
  color: #C9922F;              /* oro spento, non il giallo squillante */
}

/* Il nome di chi ha scritto sta sotto le stelline e non in fondo alla
   tessera: in fondo, dopo un muro di testo, non lo vedeva nessuno. */
.voce__chi {
  margin: 0 0 13px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--inchiostro);
}

/* la frase piu' forte della recensione, presa alla lettera */
.voce__forte {
  margin: 0 0 13px;
  font-family: var(--titolo);
  font-size: 19.5px;
  font-weight: 400;
  line-height: 1.26;
  letter-spacing: -0.008em;
  text-wrap: pretty;
  color: var(--inchiostro);
}

.voce__forte::before { content: "\201C"; }
.voce__forte::after  { content: "\201D"; }

.voce__corpo { width: 100%; }

/* Le sei recensioni vanno da 180 a 1.860 caratteri. A tessere tutte della
   stessa altezza, come nel riferimento, la piu' lunga imporrebbe due schermi
   di tessera vuota alle altre. Qui si fermano a nove righe e si aprono per
   intero al clic: il testo non viene tagliato, viene richiuso. */
.voce__testo {
  margin: 0;
  font-size: 17.5px;
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--inchiostro-2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 9;
  overflow: hidden;
}

.voce.is-aperta .voce__testo {
  -webkit-line-clamp: unset;
  overflow: visible;
}

.voce__piu {
  margin-top: 10px;
  padding: 0;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--rame-cupo);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.voce__piu:hover { color: var(--marrone); }
.voce__piu[hidden] { display: none; }

/* il nome chiude la tessera, in fondo, come nel riferimento */
.voce__meta {
  width: 100%;
  margin: auto 0 0;
  padding-top: 18px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--nota);
}



/* ── I puntini di pagina ──────────────────────────────────────────
   Nel riferimento sono l'unico comando visibile del carosello. */
.punti-pagina {
  display: flex;
  justify-content: center;
  gap: 11px;
  margin-top: 28px;
}

.punti-pagina button {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 1.5px solid var(--rame-cupo);
  border-radius: 50%;
  background: transparent;
  transition: background 0.2s var(--uscita);
}

.punti-pagina button[aria-selected="true"] { background: var(--rame-cupo); }
.punti-pagina:empty { display: none; }

/* solo per i lettori di schermo */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── 05 · Il metodo ───────────────────────────────────────────── */
/* Arriva subito dopo il blocco scuro e deve staccare: il fondo passa dal
   grigio caldo a una carta piu' calda del resto della pagina, cosi' il
   cambio di colore segna che si e' passati dal problema alla risposta. */
.metodo {
  padding-block: 52px 56px;
  background: linear-gradient(172deg, #F1E7DA 0%, #F8F3EC 58%, var(--paper) 100%);
}

/* ── Le tre negazioni ─────────────────────────────────────────────
   Si barrano una dopo l'altra quando la sezione entra nello schermo.
   E' il momento in cui la pagina toglie di mezzo le tre cose che chi
   legge ha gia' provato, prima di dire cos'e' la Formula. */
.nega {
  display: grid;
  gap: 12px;
  max-width: 30rem;
  margin: 0 auto 34px;
  padding: 0 var(--gutter);
  list-style: none;
}

.nega__voce {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 17.5px;
  line-height: 1.4;
  color: var(--inchiostro-2);
}

/* il segno che precede ogni riga */
.nega__voce::before {
  content: "";
  flex: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px solid var(--rame);
  background:
    linear-gradient(45deg, transparent 44%, var(--rame) 44%, var(--rame) 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--rame) 44%, var(--rame) 56%, transparent 56%);
  opacity: 0.45;
  transition: opacity 0.5s var(--uscita);
}

.nega__voce span { position: relative; }

/* la barratura: cresce da sinistra a destra */
.nega__voce span::after {
  content: "";
  position: absolute;
  inset-inline-start: -3px;
  inset-inline-end: 100%;
  top: 54%;
  height: 2px;
  background: var(--rame-cupo);
  transition: inset-inline-end 0.62s var(--uscita);
}

.nega__voce.is-barrata span::after { inset-inline-end: -3px; }
.nega__voce.is-barrata::before { opacity: 1; }
.nega__voce.is-barrata { color: var(--nota); }

/* la frase che dice cos'e', dopo aver detto cosa non e' */
.metodo__frase {
  max-width: 30rem;
  margin: 0 auto 44px;
  padding: 0 var(--gutter);
  font-family: var(--titolo);
  font-size: clamp(22px, 5.4vw, 27px);
  line-height: 1.26;
  letter-spacing: -0.01em;
  text-align: center;
  text-wrap: balance;          /* righe di lunghezza simile, non a bandiera */
  color: var(--inchiostro-2);
}

.metodo__frase .key { font-weight: 400; }

/* ── I tre passi ──────────────────────────────────────────────── */
.passi {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0 var(--gutter);
  list-style: none;
  counter-reset: passo;
}

.passo {
  position: relative;
  padding: 0 24px 28px;
  background: var(--paper);
  border: 1px solid var(--filo);
  border-radius: var(--raggio-card);
  box-shadow: 0 1px 2px rgba(58, 42, 29, 0.04), 0 8px 22px rgba(58, 42, 29, 0.06);
  overflow: hidden;
}

/* la foto in cima, da bordo a bordo della card */
.passo__foto {
  margin: 0 -24px 0;
}

.passo__foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* il numero sta a cavallo fra la foto e il testo */
.passo__n {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin: -25px 0 14px;
  border-radius: 50%;
  background: var(--marrone);
  border: 3px solid var(--paper);
  color: var(--paper);
  font-family: var(--titolo);
  font-size: 24px;
  line-height: 1;
  padding-bottom: 2px;
}

.passo__t {
  margin: 0 0 7px;
  font-family: var(--titolo);
  font-size: 23px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--inchiostro);
}

.passo__d {
  margin: 0;
  font-size: 17.5px;
  line-height: 1.58;
  text-wrap: pretty;
  color: var(--inchiostro-2);
}

@media (prefers-reduced-motion: reduce) {
  .nega__voce span::after { transition: none; }
}

/* ── 06 · Il confronto ────────────────────────────────────────── */
/* Tabella vera, non una griglia travestita: chi legge con un lettore di
   schermo sente le intestazioni di riga e di colonna. Il fondo torna al
   grigio caldo per staccare dalla sezione del metodo, che e' chiara. */
.conf {
  padding-block: 52px 58px;
  background: linear-gradient(186deg, var(--paper) 0%, #F4EDE4 40%, #EFE6DA 100%);
}

/* Su telefono la tabella non scorre: ogni riga diventa un blocco con
   l'etichetta sopra e i due casi impilati, come la sezione per chi e'.
   La struttura resta una tabella vera, cosi' chi usa un lettore di schermo
   continua a sentire intestazione di riga e di colonna. Da 700px torna
   una tabella normale, con le due colonne affiancate. */
.conf__scorri {
  padding-inline: var(--gutter);
}

.conf__tab {
  display: block;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  /* larghezza fissa: da 700px in su le due colonne del confronto restano
     identiche anche quando una cella contiene il doppio del testo dell'altra */
  table-layout: fixed;
}

/* l'intestazione sparisce alla vista ma resta per i lettori di schermo:
   sul blocco impilato le due etichette le rimette ::before */
.conf__tab thead {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.conf__tab tbody,
.conf__tab tr { display: block; }
.conf__tab tr + tr { margin-top: 26px; }

/* la cella vuota in alto a sinistra detta la larghezza della colonna
   delle etichette; le due colonne del confronto si dividono il resto */
.conf__tab thead td { width: 9.5rem; }

/* le due intestazioni: quella nostra e' piena, l'altra resta neutra */
.conf__testa {
  padding: 14px 20px;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-align: start;
  border-radius: 12px;
}

.conf__testa--altre { background: var(--carta-2); color: var(--nota); }
.conf__testa--noi   { background: var(--marrone); color: var(--paper); }

.conf__eti {
  display: block;
  width: auto;
  padding: 0 0 11px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  text-align: start;
  vertical-align: top;
  color: var(--inchiostro);
}

.conf__altre,
.conf__noi {
  display: block;
  padding: 16px 18px;
  font-size: 16.5px;
  line-height: 1.5;
  vertical-align: top;
  text-wrap: pretty;
}

/* su telefono ogni cella dice a quale colonna appartiene */
.conf__altre::before,
.conf__noi::before {
  content: attr(data-col);
  display: block;
  margin-bottom: 7px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.conf__altre::before { color: var(--nota); }
.conf__noi::before   { color: var(--marrone); }

.conf__altre {
  margin-bottom: 10px;
  background: var(--paper);
  border: 1px solid var(--filo-tenue);
  border-radius: 12px;
  color: var(--nota);
}

/* la colonna del percorso e' quella che deve vincere lo sguardo */
.conf__noi {
  background: #FBF6EE;
  border: 1.5px solid var(--talpa);
  border-radius: 12px;
  color: var(--inchiostro-2);
  box-shadow: 0 1px 2px rgba(58, 42, 29, 0.05), 0 6px 18px rgba(58, 42, 29, 0.07);
}

.conf__noi b { color: var(--inchiostro); }

/* i segni: una croce tenue a sinistra, una spunta in rame a destra.
   Disegnati in CSS, nessuna icona da caricare. */
.conf__segno {
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-inline-end: 9px;
  vertical-align: -3px;
  border-radius: 50%;
  flex: none;
}

.conf__segno--no {
  border: 1.5px solid var(--filo);
  background:
    linear-gradient(45deg, transparent 44%, var(--nota) 44%, var(--nota) 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--nota) 44%, var(--nota) 56%, transparent 56%);
  opacity: 0.6;
}

.conf__segno--si {
  background: var(--rame-cupo);
  position: relative;
}

.conf__segno--si::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 3.5px;
  width: 5px;
  height: 8px;
  border: solid var(--paper);
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg);
}

/* ── 07 · La lastra di controllo ──────────────────────────────── */
/* Era una foto di cabina a tutta larghezza con la frase sopra un velo scuro.
   Adesso porta la lastra rifatta a fine percorso, che e' la prova promessa
   due sezioni piu' su, e il testo sta su un pannello di carta invece che
   sopra la fotografia: il contrasto si misura su un fondo fermo. Il
   pannello accavalla la foto, ed e' l'unico accavallamento della pagina:
   e' quello che da' movimento alla sezione senza aggiungere decorazione. */
.controllo {
  padding-block: 0 46px;
  background: linear-gradient(184deg, #EFE6DA 0%, #E7DCD1 62%, #E2D5C7 100%);
}

.controllo__foto { margin: 0; }

.controllo__foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.controllo__panno {
  position: relative;
  z-index: 1;
  margin-block: -58px 0;
  margin-inline: var(--gutter);
  padding: 30px 24px 32px;
  text-align: center;
  background: var(--paper);
  border-radius: var(--raggio-card);
  box-shadow: 0 1px 3px rgba(58, 42, 29, 0.06), 0 14px 34px rgba(58, 42, 29, 0.12);
}

.controllo__panno .occhiello { margin-bottom: 12px; }

.controllo__voce {
  margin-block: 0 12px;
  margin-inline: auto;
  max-width: 22ch;
  font-family: var(--titolo);
  font-size: clamp(25px, 6.4vw, 33px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.012em;
  text-wrap: balance;
  color: var(--inchiostro);
}

.controllo__voce::before { content: "\201C"; }
.controllo__voce::after  { content: "\201D"; }

.controllo__chi {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rame-cupo);
}


/* ── 08 · Per chi è, e per chi non è ──────────────────────────── */
.perchi {
  padding-block: 52px 58px;
  background: var(--lavaggio);
}

.perchi__due {
  display: grid;
  gap: 16px;
  padding-inline: var(--gutter);
}

.perchi__col {
  padding: 30px 24px 32px;
  border-radius: var(--raggio-card);
}

/* la colonna che qualifica: piena, con il bordo in rame */
.perchi__col--si {
  background: var(--paper);
  border: 1.5px solid var(--talpa);
  box-shadow: 0 1px 3px rgba(58, 42, 29, 0.05), 0 10px 26px rgba(58, 42, 29, 0.08);
}

/* la colonna che squalifica: spenta, resta indietro */
.perchi__col--no {
  background: transparent;
  border: 1px solid var(--filo);
}

.perchi__t {
  margin: 0 0 20px;
  font-family: var(--titolo);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--inchiostro);
}


.perchi__lista {
  display: grid;
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.perchi__lista li {
  position: relative;
  padding-inline-start: 30px;
  font-size: 17.5px;
  line-height: 1.5;
  text-wrap: pretty;
  color: var(--inchiostro-2);
}

/* la spunta e la croce, disegnate come nella tabella del confronto */
.perchi__lista li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

.perchi__col--si .perchi__lista li::before { background: var(--marrone); }

.perchi__col--si .perchi__lista li::after {
  content: "";
  position: absolute;
  inset-inline-start: 5.5px;
  top: 8.5px;
  width: 5px;
  height: 8.5px;
  border: solid var(--paper);
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg);
}

/* la colonna che squalifica resta indietro, ma deve restare leggibile:
   il grigio delle note si ferma a 4,34:1 sul lavaggio, questo tiene 4,98 */
.perchi__col--no .perchi__lista li,
.perchi__col--no .perchi__t { color: #6B645F; }

.perchi__col--no .perchi__lista li::before {
  border: 1.5px solid var(--filo);
  background:
    linear-gradient(45deg, transparent 44%, var(--nota) 44%, var(--nota) 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--nota) 44%, var(--nota) 56%, transparent 56%);
  opacity: 0.65;
}

.perchi__col--no b, .perchi__col--no i { color: #6F6357; }

/* ── 09 · La bio delle fondatrici ─────────────────────────────── */
/* Foto grande e testo accanto, come la pagina che presenta il metodo nel
   riferimento. Il fondo torna chiaro: la sezione prima e' un lavaggio
   caldo, questa e' carta pulita, e il volto deve staccare. */
.bio {
  padding-block: 52px 56px;
  background: var(--paper);
}

.bio__foto {
  /* Il gutter sta nel margine, non nel padding: l'anello e gli angoli sono
     disegnati sul riquadro, quindi con il padding restavano 26px vuoti fra
     il bordo e la foto su ogni lato. Da 900px in su era gia' cosi'. */
  margin: 0 var(--gutter) 26px;
}

.bio__foto { border-radius: var(--raggio-foto); }

.bio__foto img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 12%;   /* da 1600px in su l'altezza resta a 560 mentre la
                                 colonna cresce: il taglio verticale arriva a 140px
                                 e prendeva le teste, che stanno a 60px dal bordo */
  border-radius: inherit;
  background: var(--carta-2);
}

.bio__testo { padding-inline: var(--gutter); }

.bio__p {
  margin: 0 0 15px;
  max-width: 56ch;
  font-size: 17.5px;
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--inchiostro-2);
}

/* la riga che chiude la storia: corta, e pesa quanto un titolo piccolo */
.bio__p--forte {
  margin: 22px 0 26px;
  font-family: var(--titolo);
  font-size: clamp(21px, 5vw, 25px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--inchiostro);
}

/* le credenziali: elenco con la spunta, come nella colonna che qualifica */
.bio__cred {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--filo);
  list-style: none;
}

.bio__cred li {
  position: relative;
  padding-inline-start: 28px;
  font-size: 16.5px;
  line-height: 1.5;
  text-wrap: pretty;
  color: var(--inchiostro-2);
}

.bio__cred li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 4px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--marrone);
}

.bio__cred li::after {
  content: "";
  position: absolute;
  inset-inline-start: 5px;
  top: 7.5px;
  width: 5px;
  height: 8px;
  border: solid var(--paper);
  border-width: 0 1.7px 1.7px 0;
  transform: rotate(45deg);
}

/* ── 10 · La garanzia ─────────────────────────────────────────── */
/* Fondo scuro perche' e' il punto in cui la pagina si assume un impegno, e
   deve pesare. Rifatta il 1 settembre: prima era un riquadro centrato con un
   timbro da 168px e un paragrafo, e in mezzo a una pagina lunga tredicimila
   pixel non si fermava nessuno. Adesso il timbro e' un oggetto grande con
   un alone caldo, il titolo ha la parte forte in accento, e sotto ci sono
   due voci spuntate: la struttura del riferimento portato da Fabio, con i
   colori e il tono di qui. */
.gar {
  padding-block: 62px 66px;
  background: var(--scuro);
  color: var(--paper);
}

.gar__dentro {
  display: grid;
  gap: 28px;
  justify-items: center;
  max-width: 40rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* L'alone dietro al timbro: su un fondo scuro un disegno a filo sottile
   sparisce, e il timbro era proprio quello. L'alone lo stacca senza
   aggiungere un riquadro. */
.gar__bollo {
  position: relative;
  display: grid;
  place-items: center;
}

.gar__bollo::before {
  content: "";
  position: absolute;
  width: 152%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(245, 228, 214, 0.26) 0%,
    rgba(245, 228, 214, 0.11) 44%,
    rgba(245, 228, 214, 0) 71%);
}

/* Il sigillo. Sostituisce il timbro da referto il 1 settembre, su richiesta
   di Fabio, che ha portato come riferimento un sigillo di garanzia classico.
   Sta dritto e non ruotato: un timbro appoggiato a mano puo' stare storto,
   una medaglia no. L'ombra lo stacca dal fondo e gli da' spessore. */
.gar__medaglia {
  position: relative;
  display: block;
  width: 208px;
  height: 208px;
  filter: drop-shadow(0 10px 22px rgba(28, 22, 16, 0.42));
}

.gar__giro {
  /* i glifi si centrano sulla traccia invece di appoggiarcisi sopra:
     senza, l'arco alto finiva contro il bordo esterno della fascia e
     quello basso contro il tondo chiaro */
  dominant-baseline: central;
  fill: #EFD9BC;
  font-family: var(--titolo);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.17em;
}

.gar__nastro {
  fill: #3A2A1D;
  font-family: var(--titolo);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.11em;
}

.gar__testo { min-width: 0; }

.gar .occhiello { color: var(--rame-chiaro); }
.gar .titolo { color: var(--paper); }

/* La parte forte del titolo, che nel riferimento e' di un altro colore.
   Qui il colore da solo non basta: su questo grigio l'unico accento caldo
   che passa AA e' quasi bianco, e accanto al bianco del titolo non si
   distingue. Quindi si usa il segno della pagina, la riga in rame sotto la
   parola, nella versione chiara del fondo scuro. */
.gar__key {
  color: var(--rame-chiaro);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background-image: linear-gradient(var(--rame-chiaro), var(--rame-chiaro));
  background-size: 100% 3px;
  background-position: 0 96%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
}

.gar__lead {
  margin: 15px 0 0;
  font-size: 18.5px;
  line-height: 1.55;
  text-wrap: pretty;
  color: var(--chiaro-2);
}

.gar__lead b { color: var(--paper); font-weight: 700; }

.gar__eti {
  margin: 26px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rame-chiaro);
}

.gar__lista {
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 13px;
}

.gar__lista li {
  position: relative;
  padding-left: 31px;
  font-size: 17.5px;
  line-height: 1.5;
  text-wrap: pretty;
  color: var(--paper);
}

/* la spunta e' disegnata con due bordi, la stessa del timbro */
.gar__lista li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.34em;
  width: 15px;
  height: 8px;
  border-left: 2.5px solid var(--rame-chiaro);
  border-bottom: 2.5px solid var(--rame-chiaro);
  transform: rotate(-45deg);
}

.gar__chiusa {
  margin: 22px 0 0;
  font-size: 16px;
  line-height: 1.55;
  text-wrap: pretty;
  color: var(--chiaro-2);
}

.gar__chiusa b { color: var(--paper); font-weight: 700; }

/* la seconda chiusura e' la nota sui tempi: sta piu' indietro della prima */
.gar__chiusa + .gar__chiusa { margin-top: 14px; font-size: 15px; opacity: 0.86; }

/* ── 11 · Le video recensioni ─────────────────────────────────── */
.video {
  padding-block: 52px 56px;
  background: var(--lavaggio);
}

.video__lista {
  display: grid;
  gap: 20px;
  margin: 0;
  padding-inline: var(--gutter);
  list-style: none;
}

.voce-v { margin: 0; }

/* Il monitor: rapporto video, il fotogramma di anteprima sotto e il tasto sopra.
   I file stanno sul dominio del centro, nessun servizio esterno e nessun
   marchio di terzi dentro la pagina. */
.voce-v__quadro {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-bottom: 15px;
  border-radius: var(--raggio-foto);
  overflow: hidden;
  background: var(--carta-2);
  border: 1px solid var(--filo);
}

.voce-v__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--carta-2);
}

/* Il tasto copre tutto il fotogramma, cosi' il bersaglio e' l'intera
   anteprima e non il solo cerchio. Sparisce quando il video parte e
   torna quando finisce, per non lasciare il riquadro nero. */
.voce-v__avvio {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.voce-v__avvio[hidden] { display: none; }

.voce-v__avvio:focus-visible {
  outline: 2px solid var(--rame-cupo);
  outline-offset: -4px;
  border-radius: var(--raggio-foto);
}

.voce-v__avvio .voce-v__play { transition: transform 220ms var(--uscita); }
.voce-v__avvio:hover .voce-v__play { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .voce-v__avvio .voce-v__play { transition: none; }
  .voce-v__avvio:hover .voce-v__play { transform: none; }
}

.voce-v__play {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--marrone);
  box-shadow: 0 2px 6px rgba(58, 42, 29, 0.2), 0 10px 24px rgba(58, 42, 29, 0.18);
}

/* il triangolo del play, disegnato con i bordi */
.voce-v__play::after {
  content: "";
  width: 0;
  height: 0;
  margin-inline-start: 4px;
  border-block: 9px solid transparent;
  border-inline-start: 15px solid var(--paper);
}

.voce-v__t {
  margin: 0 0 3px;
  font-family: var(--titolo);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--inchiostro);
}

.voce-v__chi {
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rame-cupo);
}

.voce-v__d {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.5;
  text-wrap: pretty;
  color: var(--inchiostro-2);
}

/* ── 12 · Le domande frequenti ────────────────────────────────── */
.faq {
  padding-block: 52px 58px;
  background: var(--paper);
}

.faq__lista {
  max-width: 46rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.faq__voce {
  border-bottom: 1px solid var(--filo);
}

.faq__voce:first-child { border-top: 1px solid var(--filo); }

.faq__d {
  position: relative;
  padding: 20px 44px 20px 0;
  font-family: var(--titolo);
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.008em;
  color: var(--inchiostro);
  cursor: pointer;
  list-style: none;
}

.faq__d::-webkit-details-marker { display: none; }

/* il segno piu' che diventa meno quando la voce si apre */
.faq__d::before,
.faq__d::after {
  content: "";
  position: absolute;
  inset-inline-end: 4px;
  top: 50%;
  width: 15px;
  height: 2px;
  background: var(--rame-cupo);
  transition: transform 0.28s var(--uscita), opacity 0.28s var(--uscita);
}

.faq__d::after { transform: rotate(90deg); }
.faq__voce[open] .faq__d::after { transform: rotate(0deg); opacity: 0; }

.faq__r {
  padding: 0 44px 22px 0;
}

.faq__r p {
  margin: 0;
  max-width: 60ch;
  font-size: 17.5px;
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--inchiostro-2);
}

.faq__r b { color: var(--inchiostro); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .faq__d::before, .faq__d::after { transition: none; }
}

/* ── Blocco d'azione ricorrente ───────────────────────────────── */
/* Il pulsante che porta al test, ripetuto lungo la pagina. Tutti aprono
   lo stesso test: cambia solo la riga che li accompagna. */
.azione {
  padding: 38px var(--gutter) 42px;
  background: var(--paper);
  text-align: center;
}

.azione .cta { max-width: 30rem; margin-inline: auto; }
.azione .act__micro { margin-top: 14px; text-align: center; }

/* ── 13 · Il piede della pagina ───────────────────────────────── */
.pie {
  padding: 44px var(--gutter) 48px;
  background: var(--scuro);
  color: var(--chiaro-2);
  text-align: center;
}

.pie__dentro { max-width: 46rem; margin-inline: auto; }

.pie__logo {
  width: 92px;
  height: auto;
  margin: 0 auto 20px;
  filter: brightness(0) invert(1) opacity(0.92);
}

.pie__dati {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--chiaro-2);
}

.pie__dati b { color: var(--paper); font-weight: 700; }

.pie__link {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(251, 248, 243, 0.22);
}

.pie__link a {
  font-size: 14px;
  color: var(--rame-chiaro);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pie__link a:hover { color: var(--paper); }

/* ── Le pagine legali ─────────────────────────────────────────── */
/* Stesso sistema della landing, impaginato per la lettura lunga. */
body.legale { background: var(--paper); }

.legale__testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 46rem;
  margin-inline: auto;
  padding: 22px var(--gutter);
}

.legale__indietro {
  font-size: 15px;
  font-weight: 700;
  color: var(--rame-cupo);
  text-decoration: none;
}

.legale__indietro:hover { color: var(--marrone); text-decoration: underline; }

.legale__testa .logo { width: 82px; }

.legale__corpo {
  max-width: 46rem;
  margin-inline: auto;
  padding: 12px var(--gutter) 64px;
}

.legale__t {
  margin: 0 0 28px;
  font-family: var(--titolo);
  font-weight: 400;
  font-size: clamp(30px, 7vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.014em;
  color: var(--inchiostro);
}

.legale__s {
  margin: 36px 0 12px;
  font-family: var(--titolo);
  font-weight: 400;
  font-size: clamp(21px, 4.6vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--inchiostro);
}

.legale__corpo p {
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.65;
  text-wrap: pretty;
  color: var(--inchiostro-2);
}

.legale__corpo ul {
  margin: 0 0 16px;
  padding-inline-start: 22px;
  color: var(--inchiostro-2);
}

.legale__corpo li { margin-bottom: 7px; font-size: 17px; line-height: 1.6; }

.legale__rimando {
  padding: 16px 18px;
  background: var(--carta);
  border-radius: 12px;
  border: 1px solid var(--filo);
}

.legale__corpo a { color: var(--rame-cupo); }

/* ── Barra fissa ──────────────────────────────────────────────── */
.sticky {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 93%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--filo);
  transform: translateY(115%);
  transition: transform 0.34s var(--uscita);
}

.sticky > .cta { max-width: 620px; margin-inline: auto; }
.sticky[hidden] { display: block; }
.sticky.is-on { transform: translateY(0); }

/* ── Il test ──────────────────────────────────────────────────── */
/* A schermo intero sopra la pagina, una domanda per volta. L'impianto e'
   quello del tool interviste di FDG: occhiello, domanda grande, opzioni
   come blocchi pieni, barra di avanzamento sottile. Palette e carattere
   sono quelli di questa pagina. */
.qz {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  background: var(--paper);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.qz[hidden] { display: none; }

/* La barra di avanzamento. Non e' un filo pieno ma una barra a tacche, una
   per domanda: il numero di passi lo scrive il JavaScript in --passi, cosi'
   se le domande cambiano non si tocca il CSS. Le tacche stanno sopra al
   riempimento, quindi si vede la domanda che passa e non solo una striscia
   che si allunga. */
.qz__barra {
  position: relative;
  height: 6px;
  background: var(--carta-2);
}

.qz__avanza {
  display: block;
  height: 100%;
  width: 0;
  background: var(--marrone);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 12px -1px rgba(110, 103, 98, 0.6);
  transition: width 0.5s var(--uscita);
}

.qz__barra::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(90deg,
    transparent 0 calc(100% / var(--passi, 13) - 2px),
    var(--paper) calc(100% / var(--passi, 13) - 2px) calc(100% / var(--passi, 13)));
}

.qz__testa {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 14px var(--gutter);
}

.qz__indietro {
  justify-self: start;
  font-size: 15px;
  font-weight: 700;
  color: var(--rame-cupo);
}

.qz__indietro[hidden] { visibility: hidden; display: block; }

.qz__conta {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rame-cupo);
}

.qz__chiudi {
  justify-self: end;
  width: 40px;
  height: 40px;
  font-size: 30px;
  line-height: 1;
  color: var(--nota);
}

.qz__chiudi:hover { color: var(--inchiostro); }

.qz__dentro {
  display: grid;
  align-content: center;
  max-width: 40rem;
  width: 100%;
  margin-inline: auto;
  padding: 24px var(--gutter) 8px;
}

.qz__schermo[hidden] { display: none; }

.qz__sez {
  margin: 0 0 12px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rame-cupo);
}

.qz__dom {
  margin: 0 0 12px;
  font-family: var(--titolo);
  font-weight: 400;
  font-size: clamp(28px, 7.4vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.014em;
  text-wrap: balance;
  color: var(--inchiostro);
}

.qz__aiuto {
  margin: 0 0 24px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--nota);
}

.qz__opz { display: grid; gap: 11px; margin-top: 26px; }

/* le opzioni: blocchi pieni a tutta larghezza, come da DESIGN.md */
.opz {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 17px 20px;
  background: var(--paper);
  border: 1.5px solid var(--filo);
  border-radius: 14px;
  font-size: 17.5px;
  line-height: 1.4;
  text-align: start;
  color: var(--inchiostro-2);
  transition: border-color 0.2s var(--uscita), background 0.2s var(--uscita);
}

.opz:hover { border-color: var(--marrone); background: #FBF6EE; }

.opz__segno {
  flex: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--filo);
  border-radius: 50%;
  transition: border-color 0.2s var(--uscita), background 0.2s var(--uscita);
}

/* la domanda a scelta multipla ha i segni squadrati, non tondi */
[data-multipla] .opz__segno { border-radius: 5px; }

.opz[aria-checked="true"] {
  border-color: var(--rame-cupo);
  background: #FBF6EE;
  color: var(--inchiostro);
}

.opz[aria-checked="true"] .opz__segno {
  background: var(--rame-cupo);
  border-color: var(--rame-cupo);
  position: relative;
}

.opz[aria-checked="true"] .opz__segno::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3.5px;
  width: 5px;
  height: 9px;
  border: solid var(--paper);
  border-width: 0 1.9px 1.9px 0;
  transform: rotate(45deg);
}

/* la schermata dei dati */
.qz__campi { display: grid; gap: 22px; margin-top: 28px; }

/* nome e cognome stanno appaiati appena c'e' spazio: sono un dato solo
   spezzato in due, e in colonna sembravano due domande diverse */
.qz__duetto { display: grid; gap: 22px; }

@media (min-width: 560px) {
  .qz__duetto { grid-template-columns: 1fr 1fr; gap: 18px; }
}

/* Le due domande aperte. Il campo e' alto per invito: un riquadro da una
   riga chiede una riga, uno da cinque chiede cinque. La nota sotto sparisce
   quando la risposta e' abbastanza lunga, e lascia il suo spazio: senza,
   il pulsante saltava su di una riga a meta' frase. */
.qz__campo--lungo { margin: 26px 0 0; }

.qz__campo--lungo textarea {
  display: block;
  width: 100%;
  min-height: 152px;
  padding: 16px 18px;
  border: 1px solid var(--filo);
  border-radius: 14px;
  background: var(--paper);
  color: var(--inchiostro);
  font-family: var(--testo);
  font-size: 17.5px;
  line-height: 1.55;
  resize: vertical;
  transition: border-color 0.2s var(--uscita), box-shadow 0.2s var(--uscita);
}

.qz__campo--lungo textarea::placeholder { color: var(--nota); }

.qz__campo--lungo textarea:focus {
  outline: none;
  border-color: var(--rame-cupo);
  box-shadow: 0 0 0 3px rgba(126, 85, 57, 0.13);
}

.qz__nota {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--nota);
  transition: opacity 0.25s var(--uscita), visibility 0.25s;
}

.qz__nota.is-ok { opacity: 0; visibility: hidden; }

.qz__campo { margin: 0; }

.qz__campo label {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--inchiostro);
}

/* La riga sotto al campo: dice cosa facciamo di quel dato. Sta dentro il
   <p> del campo, quindi serve display block, altrimenti si incolla al
   bordo dell'input. */
.qz__campo__nota {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--nota);
}

.qz__campo input {
  width: 100%;
  padding: 12px 2px 13px;
  font-family: inherit;
  font-size: 18px;
  color: var(--inchiostro);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--filo);
  border-radius: 0;
  transition: border-color 0.2s var(--uscita);
}

.qz__campo input:focus {
  outline: none;
  border-bottom-color: var(--rame-cupo);
}

.qz__pie {
  padding: 18px var(--gutter) calc(26px + env(safe-area-inset-bottom));
  background: var(--paper);
}

/* Il pulsante e' largo quanto la colonna delle domande. .qz__dentro misura
   40rem comprese le due fasce di gutter, quindi il contenuto e' 40rem meno
   il gutter due volte: senza la sottrazione il pulsante sporgeva di 52px
   rispetto alle domande, ed e' la cosa che si vedeva. */
/* Il selettore passa da .qz__avanti a .qz__pie .qz__avanti perche' a 1024px
   la regola generica .cta rimette max-width: none e margin: 0, e con la
   stessa specificita' vince chi sta scritto dopo. E' la stessa trappola dei
   margini in forma breve gia' incontrata tre volte su questa pagina. */
.qz__pie .qz__avanti {
  position: relative;
  max-width: calc(40rem - var(--gutter) * 2);
  margin-inline: auto;
  box-shadow: 0 2px 6px rgba(58, 42, 29, 0.16),
              0 10px 24px rgba(58, 42, 29, 0.14),
              0 0 26px -9px rgba(170, 132, 106, 0.8);
}

.qz__pie .qz__avanti:hover {
  box-shadow: 0 3px 8px rgba(58, 42, 29, 0.18),
              0 14px 30px rgba(58, 42, 29, 0.16),
              0 0 30px -8px rgba(170, 132, 106, 0.9);
}

/* Il filo di luce che corre lungo il bordo. E' disegnato sul solo bordo con
   due maschere sovrapposte, una sul riquadro intero e una sul contenuto, di
   cui si tiene la differenza: cosi' non serve nessun z-index negativo e il
   fondo pieno del pulsante resta intatto.
   La luce scorre da sinistra a destra e non gira: su una pillola larga sette
   volte la sua altezza un giro conico spende quasi tutti i gradi sulle due
   teste e attraversa i lati lunghi in un lampo. Il filo resta acceso anche
   fra un passaggio e l'altro, perche' il bordo deve essere sempre luminoso.
   E' il terzo movimento della pagina, e vive solo dentro il test. */
.qz__pie .qz__avanti::after {
  content: "";
  position: absolute;
  inset: -2px;
  padding: 2px;
  border-radius: inherit;
  background: linear-gradient(100deg,
      rgba(170, 132, 106, 0.72) 0%,
      rgba(170, 132, 106, 0.72) 30%,
      rgba(233, 205, 176, 0.95) 40%,
      #FFF4E6 46%,
      rgba(233, 205, 176, 0.95) 52%,
      rgba(170, 132, 106, 0.72) 62%,
      rgba(170, 132, 106, 0.72) 100%);
  background-size: 260% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: qz-filo 4.6s linear infinite;
  pointer-events: none;
}

@keyframes qz-filo {
  from { background-position: 100% 0; }
  to   { background-position: 0% 0; }
}

.qz__pie .qz__avanti[disabled] { opacity: 0.42; cursor: default; box-shadow: none; }
.qz__pie .qz__avanti[disabled]::after { opacity: 0.28; animation: none; }
.qz__pie .qz__avanti[disabled]:hover { background: var(--marrone); transform: none; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .qz__avanza { transition: none; }
  .qz__pie .qz__avanti::after { animation: none; background-position: 50% 0; }
}

/* mentre il test e' aperto la pagina sotto non scorre */
body.qz-aperto { overflow: hidden; }

@media (min-width: 700px) {
  .qz__testa { padding-block: 20px; }
  .qz__dentro { padding-top: 40px; }
  .qz__opz { gap: 13px; }
  .opz { padding: 19px 22px; font-size: 18px; }
  .qz__pie { padding-block: 22px 34px; }
}

/* ── Ingresso delle sezioni ───────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--uscita), transform 0.7s var(--uscita);
}

.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .vsl__invito span { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Da tablet in su: la pagina usa la larghezza dello schermo.
   Il testo resta su misure leggibili, le immagini crescono.
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 700px) {
  :root { --gutter: 44px; }

  body:has(#sticky) { padding-bottom: calc(98px + env(safe-area-inset-bottom)); }

  .prehead { font-size: 16.5px; padding-block: 15px; }
  .brandline { padding: 20px var(--gutter) 4px; }
  .logo { width: 124px; }

  .hero { padding: 16px var(--gutter) 0; }
  .hero__title { max-width: 20ch; margin-inline: auto; font-size: clamp(38px, 5vw, 46px); }
  .hero__anche { max-width: 56ch; margin-inline: auto; font-size: 18px; }

  .vsl { margin-top: 22px; padding-inline: 0; }
  .vsl__frame {
    max-width: 820px;
    margin-inline: auto;
    box-shadow:
      0 3px 7px rgba(58, 42, 29, 0.10),
      0 14px 30px rgba(58, 42, 29, 0.13),
      0 30px 62px rgba(58, 42, 29, 0.11);
  }
  .vsl__invito { font-size: 15.5px; padding-inline: 0; }

  .dilemma p { font-size: 18px; max-width: 64ch; }

  .act { padding-block: 44px 52px; }
  .act__lead { max-width: 62ch; margin-inline: auto; text-align: center; font-size: 18px; }
  .cta { max-width: 460px; margin-inline: auto; font-size: 19.5px; padding-block: 21px; }
  .sticky > .cta { max-width: 440px; }

  .voci__fascia { align-items: stretch; }

  /* su tablet le colonne sono ancora impilate ma larghe: a 9:16 la foto
     diventerebbe alta piu' di uno schermo intero */
  .posto__quadro,
  .posto__foto { aspect-ratio: 4 / 3; }

  .situazioni { grid-template-columns: 1fr 1fr; gap: 16px; }
  .sit:last-child { grid-column: 1 / -1; }

  .caso { width: calc(50vw - 45px); }
  .prova { padding-block: 14px 96px; }
  .caso__eti b { font-size: 11.5px; }

  .punti { grid-template-columns: 1fr 1fr; gap: 16px; }
  .punto { padding: 36px 26px 32px; }

  .controllo { padding-bottom: 54px; }
  .controllo__foto img { aspect-ratio: 16 / 9; }
  .controllo__panno { max-width: 560px; margin-block: -72px 0; margin-inline: auto;
                      padding: 38px 34px 36px; }
  .controllo__voce { font-size: clamp(28px, 3.8vw, 34px); }

  .gar { padding-block: 74px 78px; }
  .gar__medaglia { width: 228px; height: 228px; }
  .gar__lead { font-size: 19.5px; }

  .video { padding-block: 66px 72px; }
  /* Due schede per riga e non tre: l'anteprima porta dentro la citazione
     scritta, e a un terzo di riga quel testo non si legge. La terza scheda
     va sotto, centrata, larga come le altre. */
  .video__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .video__lista .voce-v:nth-child(3) {
    grid-column: 1 / -1;
    width: calc(50% - 11px);
    justify-self: center;
  }

  .faq { padding-block: 66px 74px; }
  .faq__d { font-size: 21px; }

  .bio { padding-block: 66px 70px; }
  .bio__foto { margin-inline: var(--gutter); padding-inline: 0; }
  .bio__p { font-size: 18px; }
  .bio__p--forte { font-size: 26px; }
  .bio__cred li { font-size: 17px; }

  .perchi { padding-block: 66px 72px; }
  .perchi__due { grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
  .perchi__col { padding: 34px 28px 36px; }

  .conf { padding-block: 68px 74px; }

  /* torna la tabella affiancata: c'e' spazio per due colonne */
  .conf__tab { display: table; border-spacing: 10px; }
  .conf__tab thead {
    position: static;
    width: auto; height: auto;
    overflow: visible;
    clip-path: none;
  }
  .conf__tab tbody { display: table-row-group; }
  .conf__tab tr { display: table-row; }
  .conf__tab tr + tr { margin-top: 0; }
  .conf__altre::before, .conf__noi::before { content: none; }

  .conf__eti {
    display: table-cell;
    width: 11rem;
    padding: 18px 16px 18px 0;
    font-size: 16px;
    vertical-align: top;
  }
  .conf__tab thead td { width: 11rem; }
  .conf__altre, .conf__noi {
    display: table-cell;
    vertical-align: top;
    font-size: 17px;
    padding: 20px 22px;
  }
  .conf__altre { margin-bottom: 0; }

  .metodo { padding-block: 70px 76px; }
  .nega { max-width: 34rem; gap: 14px; }
  .nega__voce { font-size: 18.5px; }
  .metodo__frase { max-width: 34rem; margin-bottom: 52px; }
  .passi { grid-template-columns: 1fr 1fr; gap: 18px; }

  .tecno { padding-block: 64px 68px; }
  .tecno__lista { gap: 18px; max-width: 900px; margin-inline: auto; }
  .tecno__nome { font-size: 13px; margin-top: 13px; }

  .chi { padding-block: 64px 70px; }
  .chi__foto { padding-inline: 0; margin-inline: var(--gutter); }
  .chi__p { font-size: 18px; }

  .testa { margin-bottom: 28px; }

  .buio { padding-block: 70px 72px; }
  .buio__t { font-size: clamp(32px, 4vw, 39px); }
  .buio__chiusa { font-size: clamp(28px, 3vw, 33px); }
  .dette li { font-size: 18.5px; padding-block: 21px 22px; }
  .buio__testo { font-size: 18px; }
  /* ── Desktop: testo e video affiancati, cosi' pre-headline, headline,
   video, sub-headline, pulsante e micro-copy stanno tutti nel primo
   schermo senza rimpicciolire il video. ──────────────────────────── */
@media (min-width: 1024px) {
  :root { --gutter: 56px; }

  .page {
    display: grid;
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    column-gap: 48px;
    align-content: start;
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: var(--gutter);
    grid-template-areas:
      "pre   pre"
      "logo  logo"
      "hero  video"
      "act   video"
      "dil    dil"
      "trust  trust"
      "prova  prova"
      "dentro dentro"
      /* "tecno tecno" e "chi chi" tolte il 28 agosto 2026 insieme alle
         due sezioni: si rimettono qui quando Fabio decide dove vanno */
      "voci   voci"
      "az1    az1"
      "buio   buio"
      "metodo metodo"
      "az2    az2"
      "conf   conf"
      "fascia fascia"
      "perchi perchi"
      "az3    az3"
      "bio    bio"
      "gar    gar"
      "az5    az5"
      "vrec   vrec"
      "faq    faq"
      "az4    az4"
      "pie    pie";
  }

  .prehead   { grid-area: pre;   margin-inline: calc(var(--gutter) * -1);
               box-shadow: 0 0 0 100vmax var(--carta-2);
               clip-path: inset(0 -100vmax); }
  .brandline { grid-area: logo; }
  .atf       { display: contents; }
  .vsl       { grid-area: video; align-self: center; }
  .hero      { grid-area: hero;  align-self: end; }
  .act       { grid-area: act;   align-self: start; }
  /* la fascia piena sotto l'hero: da bordo a bordo, sopra la griglia */
  .dilemma   { grid-area: dil; width: 100vw; margin-inline: calc(50% - 50vw);
               padding: 34px var(--gutter) 36px; }
  .dilemma p { font-size: 18.5px; line-height: 1.58; max-width: 76ch; }

  /* il lavaggio non si estende con un box-shadow, che e' tinta piatta:
     serve la larghezza vera della finestra */
  .trust     { grid-area: trust; width: 100vw; margin-inline: calc(50% - 50vw);
               padding-block: 38px; }

  .brandline { padding: 14px 0 6px; justify-content: center; width: 100%; margin-inline: 0; }
  .logo { width: 118px; }
  .prehead { font-size: 17px; padding-block: 14px; }

  .hero { padding: 0; text-align: left; }
  .hero__title {
    max-width: none;
    margin: 0 0 14px;
    font-size: clamp(30px, 2.45vw, 35px);
    line-height: 1.16;
    text-align: left;
  }
  .hero__anche {
    max-width: none;
    margin: 0 0 24px;
    text-align: left;
    font-size: 18.5px;
    line-height: 1.58;
    text-wrap: balance;
  }

  .vsl { margin: 0; padding-inline: 0; }
  .vsl__invito { display: block; font-size: 16px; padding-inline: 0; margin-top: 12px; }
  .vsl__frame {
    max-width: none;
    box-shadow:
      0 3px 8px rgba(58, 42, 29, 0.10),
      0 16px 34px rgba(58, 42, 29, 0.13),
      0 34px 70px rgba(58, 42, 29, 0.12);
  }

  .act { padding: 0; }
  .act__lead { display: none; }
  .cta { max-width: none; margin: 0; font-size: 19px; padding-block: 22px; }
  .act__micro { font-size: 13.5px; margin-top: 12px; text-align: left; }

  .prova { grid-area: prova; padding-block: 16px 104px; }
  /* la fascia prima e dopo su desktop entra tutta, quindi il JS spegne le
     sue frecce da solo. Quella delle recensioni invece scorre ancora. */
  .prova__fascia { overflow-x: hidden; }
  .prova__fascia { padding-inline: var(--gutter); }
  .caso { width: calc((100vw - (var(--gutter) * 2) - 96px) / 5); }
  .caso__eti b { font-size: 12px; padding-block: 10px 11px; }

  /* la sezione 02 torna a colonna singola centrata: e' testo da leggere,
     non un blocco da distribuire su tutta la larghezza della griglia */

  .voci { grid-area: voci; width: 100vw; margin-inline: calc(50% - 50vw);
          padding: 66px 0 68px; }
  .voci__testa { max-width: 1320px; margin-inline: auto; }
  /* Tre tessere per schermata, come nel riferimento: non piu' colonne di
     testo ma un carosello vero, con i puntini sotto. */
  .voci__fascia {
    display: flex;
    align-items: stretch;
    gap: 24px;
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: 56px;
    scroll-padding-inline-start: 56px;
  }

  .voce { width: calc((min(100vw, 1320px) - 112px - 48px) / 3); }

  .voce__foto { width: 96px; height: 96px; font-size: 38px; }
  .voce__forte { font-size: 21px; }

  /* Le tecnologie: fondo a tutta larghezza, foto contenute e alte.
     Il rapporto passa da 3/4 a 4/5 perche' su schermo largo due tessere
     larghe e basse perdono la figura in piedi dentro la Vacu Gym. */
  /* La foto esce dal margine e arriva al bordo destro della finestra; il
     pannello di carta la accavalla di 76px dal lato del testo. La colonna
     del pannello e' fissa a 460px: lasciata in frazioni, su monitor larghi
     diventava un riquadro vuoto largo ottocento pixel attorno a una frase
     di venti caratteri. Il padding sinistro riporta il pannello sul margine
     del contenitore da 1320px senza margini negativi, che dentro una
     sezione larga quanto la finestra non tornerebbero. */
  .controllo { grid-area: fascia; width: 100vw; margin-inline: calc(50% - 50vw);
               padding-block: 78px 84px; }
  .controllo__int {
    display: grid;
    grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
    align-items: center;
    padding-left: max(56px, calc(50vw - 660px));
  }
  .controllo__foto { grid-column: 2; grid-row: 1; }
  .controllo__foto img { aspect-ratio: 16 / 9;
                         border-radius: var(--raggio-foto) 0 0 var(--raggio-foto); }
  .controllo__panno {
    grid-column: 1; grid-row: 1;
    max-width: none;
    margin-block: 0;
    margin-inline: 0 -80px;
    padding: 50px 46px 48px;
  }
  .controllo__voce { max-width: 19ch; font-size: clamp(31px, 2.35vw, 39px); }

  /* la foto esce dal margine e arriva al bordo, con gli angoli tondi solo
     dal lato del testo: la stessa mossa della sezione delle fondatrici che
     era stata messa da parte */
  .azione--1 { grid-area: az1; }
  .azione--2 { grid-area: az2; }
  .azione--3 { grid-area: az3; }
  .azione--4 { grid-area: az4; }
  .azione--5 { grid-area: az5; }
  .pie { grid-area: pie; width: 100vw; margin-inline: calc(50% - 50vw); padding-block: 56px 60px; }
  .azione { width: 100vw; margin-inline: calc(50% - 50vw); padding-block: 56px 62px; }

  .gar { grid-area: gar; width: 100vw; margin-inline: calc(50% - 50vw);
         padding: 86px 0 92px; }
  /* Da 1024px il timbro passa a sinistra e il testo a destra, come nel
     riferimento. Il testo resta allineato a sinistra anche sotto: un elenco
     spuntato centrato non si legge. */
  .gar__dentro {
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    align-items: center;
    justify-items: stretch;
    gap: 60px;
    max-width: 1000px;
    padding-inline: 56px;
  }
  .gar__medaglia { width: 258px; height: 258px; }
  .gar .titolo { font-size: clamp(33px, 2.7vw, 42px); }
  .gar__lead { font-size: 20px; }
  .gar__lista li { font-size: 18px; }

  /* area "vrec": il nome "video" e' gia' del player nell'above the fold */
  .video { grid-area: vrec; width: 100vw; margin-inline: calc(50% - 50vw);
           padding: 84px 0 90px; }
  .video .testa { max-width: 1120px; margin-inline: auto; padding-inline: 56px; }
  /* il contenitore passa a 1320 come la pagina: con due schede per riga
     ognuna arriva a 591px, e la citazione dentro l'anteprima risale a 12px,
     che e' il minimo che questa pagina si e' data per il testo */
  .video__lista { max-width: 1320px; margin-inline: auto; padding-inline: 56px; gap: 26px; }
  .video__lista .voce-v:nth-child(3) { width: calc(50% - 13px); }
  .voce-v__t { font-size: 23px; }

  .faq { grid-area: faq; width: 100vw; margin-inline: calc(50% - 50vw);
         padding: 84px 0 92px; }
  .faq .testa { max-width: 46rem; margin-inline: auto; padding-inline: 56px; }
  .faq__lista { padding-inline: 56px; }
  .faq__d { font-size: 22px; padding-block: 24px; }

  .bio {
    grid-area: bio;
    display: grid;
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    align-items: center;
    column-gap: 56px;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding: 0;
  }

  /* la sezione e' gia' larga quanto la finestra: il margine negativo che
     serviva a farla uscire da un contenitore da 1320px qui la spingeva
     fuori schermo, e su monitor larghi tagliava i volti a sinistra */
  .bio__foto {
    /* Staccata dal bordo della finestra di 56px, la stessa misura del padding
       destro della colonna di testo e della gronda fra le due colonne: cosi'
       la foto respira invece di essere schiacciata sull'esterno. Non essendo
       piu' a filo, gli angoli si arrotondano su tutti e quattro i lati. */
    margin: 0 0 0 56px;
    padding: 0;
    min-width: 0;
  }

  .bio__foto { border-radius: var(--raggio-foto); }

  /* Il tetto sta sul riquadro, non sull'immagine: la cornice e' disegnata
     con ::before su .bio__foto, quindi se il limite lo mette solo l'immagine
     il riquadro resta largo quanto la colonna e il filo non combacia piu'
     con il bordo della foto. */
  .bio__foto { max-width: 747px; }

  .bio__foto img {
    /* Intera, come sul telefono: tiene il rapporto nativo 1152x865 invece di
       essere ritagliata a un'altezza fissa. A 747px di larghezza l'altezza
       torna 561px, la stessa di prima. */
    aspect-ratio: 1152 / 865;
    height: auto;
    border-radius: inherit;
  }

  .bio__testo { min-width: 0; max-width: 580px; padding: 86px 56px 86px 0; }
  .bio__p { font-size: 18px; }
  .bio__p--forte { font-size: 28px; }
  .bio__cred li { font-size: 17px; }

  .perchi { grid-area: perchi; width: 100vw; margin-inline: calc(50% - 50vw);
            padding: 84px 0 90px; }
  .perchi .testa { max-width: 1120px; margin-inline: auto; padding-inline: 56px; }
  .perchi__due { max-width: 1120px; margin-inline: auto; padding-inline: 56px; gap: 26px; }
  .perchi__col { padding: 40px 34px 42px; }
  .perchi__t { font-size: 27px; margin-bottom: 24px; }
  .perchi__lista li { font-size: 18px; }

  .conf { grid-area: conf; width: 100vw; margin-inline: calc(50% - 50vw);
          padding: 80px 0 86px; }
  .conf .testa { max-width: 1120px; margin-inline: auto; padding-inline: 56px; }
  .conf__scorri { max-width: 1120px; margin-inline: auto; padding-inline: 56px; overflow-x: visible; }
  .conf__tab { min-width: 0; border-spacing: 14px 12px; }
  .conf__eti { font-size: 17px; padding-block: 22px; }
  .conf__tab thead td { width: 13rem; }
  .conf__altre, .conf__noi { font-size: 17.5px; padding: 22px 26px; }
  .conf__testa { font-size: 14px; padding: 16px 26px; }

  /* il metodo chiude la pagina, a tutta larghezza come le altre fasce */
  .metodo { grid-area: metodo; width: 100vw; margin-inline: calc(50% - 50vw);
            padding: 86px 0 92px; }
  .metodo .testa { max-width: 1120px; margin-inline: auto; padding-inline: 56px; }
  .nega { max-width: 40rem; }
  .nega__voce { font-size: 19px; }
  .metodo__frase { max-width: 46rem; font-size: clamp(27px, 2.1vw, 32px); margin-bottom: 58px; }
  .passi {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    max-width: 1120px;
    margin-inline: auto;
    padding-inline: 56px;
  }
  .passo { padding: 0 30px 34px; }
  .passo__foto { margin-inline: -30px; }
  .passo__n { width: 56px; height: 56px; font-size: 28px; margin-top: -28px; margin-bottom: 16px; }
  .passo__t { font-size: 25px; }

  .tecno { grid-area: tecno; width: 100vw; margin-inline: calc(50% - 50vw);
           padding: 76px 0 80px; }
  .tecno .testa { max-width: 1000px; margin-inline: auto; padding-inline: 56px; }
  .tecno__lista { max-width: 1000px; padding-inline: 56px; gap: 24px; }
  .tecno__voce img { aspect-ratio: 4 / 5; }

  /* Chi ti segue: due colonne. La foto esce dal margine sinistro e arriva
     al bordo della finestra, con gli angoli tondi solo dal lato del testo.
     min-width: 0 sulle colonne, altrimenti la griglia cresce col contenuto. */
  .chi {
    grid-area: chi;
    display: grid;
    grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
    align-items: center;
    column-gap: 56px;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding: 0;
    background: var(--paper);
  }

  /* stesso difetto corretto sulla bio: la sezione e' gia' larga quanto la
     finestra, e il margine negativo spingeva la foto fuori schermo */
  .chi__foto {
    margin: 0;
    padding: 0;
    min-width: 0;
  }

  .chi__foto img {
    aspect-ratio: auto;
    height: clamp(380px, 34vw, 470px);
    border-radius: 0 18px 18px 0;
  }

  .chi__testo {
    min-width: 0;
    max-width: 560px;
    padding: 76px 56px 76px 0;
  }

  .chi__p { font-size: 18.5px; margin-top: 16px; }

  .buio { grid-area: buio; width: 100vw; margin-inline: calc(50% - 50vw);
          padding: 78px 0 80px; }
  .buio__dentro { max-width: 1000px; }

  /* il titolo e le righe che portano il ragionamento restano su misura di
     lettura, dentro un blocco piu' largo: sono loro a dare il ritmo */
  .buio__ponte--largo { max-width: 24ch; }
  .buio__chiusa { max-width: none; text-wrap: balance; text-align: center; }
  .buio__lead,
  .buio__ponte { max-width: 62ch; }
  .buio__ponte--sit { max-width: 60ch; margin-inline: auto; }

  /* la testa: la foto a sinistra, il titolo e le sei frasi a destra */
  .buio__testa {
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    align-items: start;
    gap: 52px;
    margin-bottom: 46px;
  }

  /* la foto e' alta quanto la colonna di testo accanto: niente rapporto
     fisso, si allunga con il contenuto della colonna */
  .buio__testa { align-items: stretch; }
  .posto { display: flex; }
  .posto__quadro,
  .posto__foto {
    aspect-ratio: auto;
    height: 100%;
    min-height: 420px;
  }

  .dette li { padding-block: 18px 19px; }
  .dette__n { font-size: 30px; }
  .dette__t { font-size: 17.5px; }

  /* le sette situazioni in griglia: tre, tre, e l'ultima larga in fondo,
     che e' anche quella che chiude il ragionamento */
  .situazioni { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .sit { padding: 34px 26px 30px; }
  .sit:last-child { grid-column: 1 / -1; }
  .sit .ico { width: 62px; height: 62px; }

  /* la prima riga di ogni colonna ha bisogno del filetto sopra, che con
     una lista sola arrivava dal bordo dell'elenco */
  .dette { border-top: 0; }
  .dette li { border-top: 1px solid rgba(251, 248, 243, 0.30); border-bottom: 0; }

  .buio__testo { max-width: 54ch; }

  /* i due riquadri affiancati, come il grafico e il calcolatore del
     riferimento. Il primo un po' piu' stretto: contiene tre righe corte */
  .coda {
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    align-items: stretch;
    gap: 22px;
    margin-top: 52px;
  }

  .quadro { padding: 38px 34px 34px; }
  .tempo { gap: 16px; }
  .tappa { padding: 20px 22px 21px; }
  .tappa:nth-child(2) { margin-inline-start: 22px; }
  .tappa:nth-child(3) { margin-inline-start: 44px; }
  .tappa:nth-child(2)::after { inset-inline-start: -26px; width: 26px; }
  .tappa:nth-child(3)::after { inset-inline-start: -48px; width: 48px; }

  .dentro { grid-area: dentro; width: 100%; padding: 68px 0 64px; }
  .dentro__dentro { max-width: 1120px; margin-inline: auto; }

  /* tre per riga e due righe piene: sei punti chiudono la griglia senza
     lasciare buchi, che era il motivo per cui il sesto e' stato aggiunto */
  .punti { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .punto { padding: 40px 30px 34px; }
  .ico { width: 66px; height: 66px; }
  .titolo { font-size: clamp(34px, 2.7vw, 40px); }
  .titolo--m { font-size: clamp(27px, 2vw, 31px); }
  .punto__t { font-size: 19px; }
  .punto__d { font-size: 17.5px; }


}
}


/* ═══════════════════════════════════════════════════════════════
   La pagina di ringraziamento (grazie.html)
   Stesso sistema della landing: stessi token, stesso piede, stesso
   occhiello piu' titolo. La struttura viene dalla thank you page
   portata da Fabio: complimento, cosa succede adesso a passi
   numerati, la richiesta, e basta. Nessuna CTA: qui la persona ha
   gia' fatto quello che doveva, e non le si chiede altro.
   ═══════════════════════════════════════════════════════════════ */

.gz { padding: 30px var(--gutter) 6px; }

.gz__testa { max-width: 40rem; margin-inline: auto; text-align: center; }

.gz__titolo { margin-top: 8px; }

.gz__lead {
  margin: 16px auto 0;
  max-width: 34rem;
  font-size: 18px;
  line-height: 1.58;
  text-wrap: pretty;
  color: var(--inchiostro-2);
}

.gz__lead b { color: var(--inchiostro); font-weight: 700; }

/* ── I tre passi ──────────────────────────────────────────────── */
.passi-gz { padding-block: 44px 50px; background: var(--lavaggio); }

.pgz {
  display: grid;
  gap: 14px;
  margin: 26px 0 0;
  padding: 0 var(--gutter);
  list-style: none;
  counter-reset: pgz;
}

.pgz__voce {
  position: relative;
  padding: 26px 24px 28px 66px;
  background: var(--paper);
  border: 1px solid var(--filo);
  border-radius: var(--raggio-card);
  box-shadow: 0 1px 2px rgba(58, 42, 29, 0.04), 0 8px 22px rgba(58, 42, 29, 0.06);
}

.pgz__n {
  position: absolute;
  left: 22px;
  top: 24px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--marrone);
  color: var(--paper);
  font-family: var(--titolo);
  font-size: 17px;
  line-height: 1;
  padding-bottom: 1px;
}

.pgz__t {
  margin: 0 0 6px;
  font-family: var(--titolo);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--inchiostro);
}

.pgz__d {
  margin: 0;
  font-size: 17.5px;
  line-height: 1.55;
  text-wrap: pretty;
  color: var(--inchiostro-2);
}

/* il numero da salvare: e' il pezzo operativo del passo due, quindi
   si stacca dal testo e si puo' toccare col pollice */
/* il numero e' la cosa da toccare del passo tre: sta al centro della
   tessera, non incolonnato col testo */
.pgz__numero { margin: 16px 0 0; text-align: center; }

.pgz__numero a {
  display: inline-block;
  padding: 11px 20px;
  border: 1.5px solid var(--rame);
  border-radius: var(--pillola);
  background: var(--paper);
  color: var(--rame-cupo);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.pgz__numero a:hover { background: var(--carta); }

/* ── La richiesta ─────────────────────────────────────────────── */
/* La richiesta sta su una fascia calda, non sul fondo scuro: il piede della
   pagina e' gia' scuro, e due blocchi scuri di fila diventavano un'unica
   macchia con un buco in mezzo. */
.gz-chiedi { padding-block: 46px 54px; background: var(--carta-2); }

.gz-chiedi__dentro {
  max-width: 40rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
}

.gz-chiedi .titolo { color: var(--inchiostro); }

.gz-chiedi__p {
  margin: 14px 0 0;
  font-size: 17.5px;
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--inchiostro-2);
}

.gz-chiedi__p b { color: var(--inchiostro); font-weight: 700; }

@media (min-width: 700px) {
  .gz { padding-block: 44px 10px; }
  .gz__lead { font-size: 19px; }
  .passi-gz { padding-block: 58px 66px; }
  .pgz { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1000px;
         margin-inline: auto; }
  .pgz__voce { padding: 28px 26px 30px; }
  .pgz__n { position: static; margin-bottom: 14px; }
  .gz-chiedi { padding-block: 62px 70px; }
  .gz-chiedi__p { font-size: 18.5px; }
}

@media (min-width: 1024px) {
  /* La pagina di ringraziamento non usa la griglia a due colonne della
     landing: quella ha le aree dichiarate una per una, e le sezioni nuove
     ci finivano dentro impaginate a caso. Qui e' un flusso semplice. */
  body.grazie .page {
    display: block;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }
  body.grazie .brandline { padding-top: 26px; }
  .passi-gz { padding-block: 74px 84px; }

  .gz { padding-block: 56px 14px; }
  .gz__lead { font-size: 20px; max-width: 38rem; }
  .pgz { max-width: 1120px; padding-inline: 56px; gap: 22px; }
  .pgz__t { font-size: 23px; }
}


/* ── Il muro delle recensioni sulla pagina di ringraziamento ─────
   Colonne invece di una griglia: le nove tessere hanno altezze molto
   diverse, dalle due righe di Giulia ai due paragrafi di Antonella, e
   in griglia lascerebbero mezze colonne vuote. Le classi delle tessere
   sono quelle della landing, quindi lo stile e il comportamento
   arrivano gia' fatti. */
.muro { padding: 40px 0 54px; background: var(--paper); }

/* Le tre video recensioni stanno su una riga loro, in orizzontale: sono la
   prova piu' forte e non devono finire in fondo a una colonna. */
.muro__video {
  display: grid;
  gap: 18px;
  margin: 0 0 30px;
  padding: 0 var(--gutter);
  list-style: none;
}

.muro__vcard { margin: 0; }

.muro__lista {
  margin: 0;
  padding: 0 var(--gutter);
  list-style: none;
  columns: 1;
  column-gap: 16px;
}

.muro__card {
  break-inside: avoid;
  margin-bottom: 16px;
  width: auto;
}

/* le tessere della landing sono pensate per uno scorritore orizzontale:
   qui dentro devono stare nella colonna */
.muro .voce { width: auto; }
.muro .voce-v { margin: 0 0 16px; }
.muro .voce-v__quadro { margin-bottom: 13px; }

@media (min-width: 700px) {
  .muro { padding: 54px 0 66px; }
  .muro__video { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
                 max-width: 1000px; margin-inline: auto; margin-bottom: 38px; }
  .muro__lista { columns: 2; column-gap: 20px; max-width: 1000px; margin-inline: auto; }
  .muro__card { margin-bottom: 20px; }
}

@media (min-width: 1024px) {
  .muro { padding: 66px 0 84px; }
  .muro__video { gap: 24px; max-width: 1200px; padding-inline: 56px; margin-bottom: 46px; }
  .muro__lista { columns: 3; column-gap: 24px; max-width: 1200px; padding-inline: 56px; }
  .muro__card { margin-bottom: 24px; }
}


/* ── I social, in fondo alla pagina di ringraziamento ────────────
   Due tasti larghi uguali, con il segno del social disegnato a mano:
   niente librerie di icone e niente marchi caricati da fuori. */
.social { padding: 46px 0 52px; background: var(--lavaggio-2); }

.social__dentro {
  max-width: 40rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
}

.social__p {
  margin: 14px auto 0;
  max-width: 34rem;
  font-size: 17.5px;
  line-height: 1.58;
  text-wrap: pretty;
  color: var(--inchiostro-2);
}

.social__tasti {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

.social__t {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 15px 22px;
  border: 1.5px solid var(--rame);
  border-radius: var(--pillola);
  background: var(--paper);
  color: var(--rame-cupo);
  font-size: 17.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s var(--uscita), border-color 0.2s var(--uscita);
}

.social__t:hover { background: var(--carta); border-color: var(--marrone); }

.social__t svg {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.social__t svg .pieno { fill: currentColor; stroke: none; }

@media (min-width: 560px) {
  .social__tasti { grid-template-columns: 1fr 1fr; gap: 16px; }
}

@media (min-width: 1024px) {
  .social { padding: 66px 0 74px; }
  .social__p { font-size: 18.5px; }
}


/* ═══════════════════════════════════════════════════════════════
   Il banner dei cookie
   Stessa carta del resto della pagina, nessun riquadro nero da
   avviso legale. Accetta e Rifiuta sono due tasti identici per
   forma e peso: il Garante chiede che rifiutare costi quanto
   accettare, e qui costa lo stesso clic.
   ═══════════════════════════════════════════════════════════════ */
.ck {
  position: fixed;
  z-index: 90;
  inset-inline: 0;
  bottom: 0;
  padding: 0 var(--gutter) calc(14px + env(safe-area-inset-bottom));
  pointer-events: none;
}

.ck[hidden] { display: none; }

.ck__dentro {
  pointer-events: auto;
  max-width: 44rem;
  margin-inline: auto;
  padding: 20px 22px 18px;
  background: var(--paper);
  border: 1px solid var(--filo);
  border-radius: var(--raggio-card);
  box-shadow: 0 2px 6px rgba(58, 42, 29, 0.10), 0 18px 44px rgba(58, 42, 29, 0.20);
}

.ck__p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.5;
  text-wrap: pretty;
  color: var(--inchiostro-2);
}

.ck__eti {
  margin: 18px 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rame-cupo);
}

/* display: grid vince su [hidden] del browser: senza questa riga il
   pannello delle scelte nasceva gia' aperto */
.ck__scelte { display: grid; gap: 12px; }
.ck__scelte[hidden] { display: none; }

.ck__voce {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: start;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--nota);
  cursor: pointer;
}

.ck__voce input {
  width: 19px;
  height: 19px;
  margin: 1px 0 0;
  accent-color: var(--marrone);
}

.ck__voce input:disabled { cursor: default; }
.ck__voce b { display: block; color: var(--inchiostro); font-weight: 700; }

.ck__tasti { display: grid; gap: 9px; margin-top: 16px; }
.ck__t[hidden] { display: none; }

.ck__t {
  padding: 13px 18px;
  border-radius: var(--pillola);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.18s var(--uscita), border-color 0.18s var(--uscita);
}

/* stesso peso visivo: cambia solo il pieno, non la dimensione */
.ck__t--si { background: var(--marrone); color: var(--paper); border: 1.5px solid var(--marrone); }
.ck__t--si:hover { background: var(--marrone-cupo); border-color: var(--marrone-cupo); }

.ck__t--no { background: var(--paper); color: var(--marrone); border: 1.5px solid var(--marrone); }
.ck__t--no:hover { background: var(--carta); }

.ck__t--altro {
  background: transparent;
  border: 0;
  color: var(--nota);
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 8px;
}
.ck__t--altro:hover { color: var(--inchiostro); }

.ck__link { margin: 12px 0 0; font-size: 13.5px; color: var(--nota); text-align: center; }
.ck__link a { color: var(--rame-cupo); }

/* il tasto per tornare sulla scelta: piccolo, in basso a sinistra */
.ck__torna {
  position: fixed;
  z-index: 60;
  left: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  padding: 9px 15px;
  border: 1px solid var(--filo);
  border-radius: var(--pillola);
  background: var(--paper);
  color: var(--nota);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(58, 42, 29, 0.12);
}
.ck__torna[hidden] { display: none; }
.ck__torna:hover { color: var(--inchiostro); border-color: var(--marrone); }

/* Il tasto che avvia il video davvero. Sta dentro la cornice, in basso a
   sinistra, e parla la lingua dei pulsanti della pagina: fondo talpa,
   raggio 2px, testo in paper. Non e' un cerchio con il triangolo dentro,
   perche' davanti a un video che si muove gia' un simbolo da solo non
   dice cosa succede a premerlo. */
.vsl__avvia {
  position: absolute;
  z-index: 5;
  inset-inline-start: 12px;
  inset-block-end: 12px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  border: 0;
  border-radius: 2px;
  /* --talpa dava 4,00:1 sotto il testo del tasto, che e' a 13,5px: sotto AA.
     --talpa-cupa lo porta a 5,44:1 e resta lontano dal marrone dei pulsanti
     verso il test, cosi' questo non si traveste da CTA. */
  background: var(--talpa-cupa);
  color: var(--paper);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(58, 42, 29, 0.30);
  transition: background 0.3s cubic-bezier(.22, 1, .36, 1),
              transform 0.3s cubic-bezier(.22, 1, .36, 1);
}
/* display: inline-flex vincerebbe su [hidden]: serve la regola esplicita */
.vsl__avvia[hidden] { display: none; }
.vsl__avvia:hover { filter: brightness(0.9); }
.vsl__avvia:active { transform: translateY(1px); }

/* il triangolo e' un segno grafico, non un carattere: niente da leggere */
.vsl__avvia__p {
  flex: none;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8.5px;
  border-color: transparent transparent transparent var(--paper);
}

@media (prefers-reduced-motion: reduce) {
  .vsl__avvia { transition: none; }
}

@media (min-width: 1024px) {
  .vsl__avvia {
    inset-inline-start: 16px;
    inset-block-end: 16px;
    padding: 12px 18px;
    font-size: 14.5px;
  }
}

@media (min-width: 620px) {
  .ck__tasti { grid-template-columns: 1fr 1fr auto; align-items: center; gap: 12px; }
  .ck__p { font-size: 16px; }
}