/* ==========================================================================
   Protocollo Padel · Landing della guida "Oltre la prenotazione" (funnel 2),
   pagina di ringraziamento, informativa privacy e condizioni di vendita.
   Un solo foglio di stile, con lo stesso sistema della landing del funnel 1:
   in testa i token di marca "Il Campo" del kit del Direttore Creativo, poi le
   regole della pagina, dal telefono (390 px) al desktop (1440 px).
   Le regole nuove del funnel 2 stanno nella sezione 27, in fondo.

   Caratteri: Instrument Sans e Inter da Google Fonts (licenza OFL). Si caricano
   con il <link> nell'<head> delle pagine invece dell'@import del kit, così il
   browser li chiede subito senza aspettare questo file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Token di marca (dal kit: brand/kit/web/protocollo-padel-tokens.css)
   -------------------------------------------------------------------------- */
:root {
  /* colori */
  --pp-blu-campo: #1C4C8A;
  --pp-blu-notte: #0E1E36;
  --pp-calce: #F3F1EC;
  --pp-terracotta: #BF4B26;          /* solo CTA e dettagli, testo bianco a 4,9:1 */
  --pp-vetro: #A9C7E8;
  --pp-ardesia: #5B6577;
  --pp-bianco: #FFFFFF;

  --pp-blu-campo-scuro: #163E71;
  --pp-terracotta-scuro: #A23F1F;    /* hover del bottone; testo piccolo su Calce a 5,7:1 */
  --pp-linea: #DCD8CF;
  --pp-linea-scuro: rgba(169, 199, 232, 0.28);
  --pp-velatura: linear-gradient(to top, rgba(14, 30, 54, 0.92) 0%, rgba(14, 30, 54, 0.55) 34%, rgba(14, 30, 54, 0) 62%);

  --pp-sfondo: var(--pp-calce);
  --pp-superficie: var(--pp-bianco);
  --pp-testo: var(--pp-blu-notte);
  --pp-testo-secondario: var(--pp-ardesia);
  --pp-titoli: var(--pp-blu-notte);
  --pp-link: var(--pp-blu-campo);
  --pp-accento: var(--pp-terracotta);
  --pp-bordo: var(--pp-linea);

  /* caratteri */
  --pp-font-titoli: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --pp-font-testo: "Inter", "Helvetica Neue", Arial, sans-serif;
  --pp-h1: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);      /* 36 → 56 px */
  --pp-h2: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);      /* 28 → 40 px */
  --pp-h3: clamp(1.375rem, 1.25rem + 0.55vw, 1.75rem); /* 22 → 28 px */
  --pp-testo-l: 1.25rem;
  --pp-testo-m: 1.125rem;
  --pp-testo-s: 0.9375rem;
  --pp-etichetta: 0.8125rem;
  --pp-bottone: 1.0625rem;
  --pp-interlinea-titoli: 1.04;
  --pp-interlinea-testo: 1.6;
  --pp-spaziatura-titoli: -0.02em;
  --pp-spaziatura-etichetta: 0.14em;

  /* spaziature, base 8 */
  --pp-s1: 4px;
  --pp-s2: 8px;
  --pp-s3: 12px;
  --pp-s4: 16px;
  --pp-s5: 24px;
  --pp-s6: 32px;
  --pp-s7: 48px;
  --pp-s8: 64px;
  --pp-s9: 96px;
  --pp-contenuto: 1120px;
  --pp-misura: 680px;

  /* raggi e ombre */
  --pp-r1: 2px;
  --pp-r2: 4px;
  --pp-ombra-1: 0 1px 2px rgba(14, 30, 54, 0.08), 0 1px 3px rgba(14, 30, 54, 0.06);
  --pp-ombra-2: 0 8px 24px rgba(14, 30, 54, 0.12);

  /* cornice del campo */
  --pp-parete: 6px;
  --pp-porta: 56px;
  --pp-colore-parete: var(--pp-blu-campo);

  --pp-transizione: 160ms ease-out;

  /* della pagina */
  --margine: var(--pp-s5);            /* margine laterale su telefono */
  --colore-focus: var(--pp-blu-campo);
  --altezza-barra: 84px;              /* pulsante fisso su mobile */
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* le entrate laterali e le ombre non devono mai creare uno scorrimento orizzontale */
main { overflow-x: clip; }

body {
  margin: 0;
  background: var(--pp-sfondo);
  color: var(--pp-testo);
  font-family: var(--pp-font-testo);
  font-size: 1.0625rem;               /* 17 px su telefono, 18 px da tablet in su */
  line-height: var(--pp-interlinea-testo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}
@media (min-width: 600px) {
  body { font-size: var(--pp-testo-m); }
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3 {
  font-family: var(--pp-font-titoli);
  font-weight: 700;
  color: var(--pp-titoli);
  text-wrap: balance;
}
h1 {
  font-size: var(--pp-h1);
  line-height: var(--pp-interlinea-titoli);
  letter-spacing: var(--pp-spaziatura-titoli);
  margin: 0 0 var(--pp-s5);
}
h2 {
  font-size: var(--pp-h2);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 var(--pp-s5);
}
h3 {
  font-size: var(--pp-h3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 var(--pp-s3);
}
p { margin: 0 0 var(--pp-s4); }
ul, ol { margin: 0 0 var(--pp-s4); padding: 0; }
strong { font-weight: 600; }

a { color: var(--pp-link); text-underline-offset: 3px; }
a:hover { color: var(--pp-blu-campo-scuro); }

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

.visivamente-nascosto {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Struttura comune
   -------------------------------------------------------------------------- */
.contenuto {
  width: 100%;
  max-width: calc(var(--pp-contenuto) + 2 * var(--margine));
  margin: 0 auto;
  padding: 0 var(--margine);
}
@media (min-width: 900px) {
  :root { --margine: var(--pp-s7); }
}

.sezione { padding: var(--pp-s8) 0; }
@media (min-width: 900px) {
  .sezione { padding: var(--pp-s9) 0; }
}

.sezione--bianco { background: var(--pp-bianco); }
.sezione--calce { background: var(--pp-calce); }
.sezione--notte,
.sezione--campo {
  color: var(--pp-bianco);
  --pp-titoli: var(--pp-bianco);
  --pp-link: var(--pp-bianco);
  --colore-focus: var(--pp-vetro);
  --pp-colore-parete: var(--pp-vetro);
}
.sezione--notte { background: var(--pp-blu-notte); }
.sezione--campo { background: var(--pp-blu-campo); }
.sezione--notte a:hover,
.sezione--campo a:hover { color: var(--pp-vetro); }

.etichetta {
  font: 600 var(--pp-etichetta)/1.45 var(--pp-font-testo);
  letter-spacing: var(--pp-spaziatura-etichetta);
  text-transform: uppercase;
  color: var(--pp-terracotta-scuro);
  margin: 0 0 var(--pp-s4);
}
.sezione--notte .etichetta,
.sezione--campo .etichetta { color: var(--pp-vetro); }

.attacco {
  font-size: 1.125rem;
  line-height: 1.55;
}
@media (min-width: 600px) {
  .attacco { font-size: var(--pp-testo-l); line-height: 1.5; }
}

.misura { max-width: var(--pp-misura); }

/* --------------------------------------------------------------------------
   4. Bottoni
   -------------------------------------------------------------------------- */
.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pp-s2);
  min-height: 56px;
  padding: var(--pp-s3) var(--pp-s6);
  font: 600 var(--pp-bottone)/1.25 var(--pp-font-testo);
  text-align: center;
  color: var(--pp-bianco);
  background: var(--pp-terracotta);
  border: 0;
  border-radius: var(--pp-r1);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--pp-transizione);
  -webkit-tap-highlight-color: transparent;
}
.bottone:hover,
.sezione--notte .bottone:hover,
.sezione--campo .bottone:hover { background: var(--pp-terracotta-scuro); color: var(--pp-bianco); }
.bottone::after {
  content: "";
  width: 9px; height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 2px;
  flex: none;
}
@media (max-width: 599px) {
  .bottone { width: 100%; padding: var(--pp-s3) var(--pp-s4); }
}

/* blocco di invito ripetuto dopo chi siamo e dopo il prezzo */
.invito {
  margin-top: var(--pp-s7);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pp-s3);
}
.invito__nota {
  margin: 0;
  font-size: var(--pp-testo-s);
  color: var(--pp-testo-secondario);
}
.sezione--notte .invito__nota,
.sezione--campo .invito__nota { color: var(--pp-vetro); }
@media (max-width: 599px) {
  .invito { align-items: stretch; }
  .invito__nota { text-align: center; }
}

/* --------------------------------------------------------------------------
   5. Elenchi con il simbolo del campo
   -------------------------------------------------------------------------- */
.elenco { list-style: none; }
.elenco > li {
  position: relative;
  padding-left: 36px;
  margin-bottom: var(--pp-s3);
}
.elenco > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 24px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 122'%3E%3Cpath fill='%231C4C8A' d='M0,11h10v100h-10ZM190,11h10v100h-10ZM0,11h83v10h-83ZM117,11h83v10h-83ZM0,101h83v10h-83ZM117,101h83v10h-83ZM95,0h10v122h-10Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sezione--notte .elenco > li::before,
.sezione--campo .elenco > li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 122'%3E%3Cpath fill='%23A9C7E8' d='M0,11h10v100h-10ZM190,11h10v100h-10ZM0,11h83v10h-83ZM117,11h83v10h-83ZM0,101h83v10h-83ZM117,101h83v10h-83ZM95,0h10v122h-10Z'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   7. Elementi comuni delle sezioni: racconto, frasi d'autorità, riquadri
   -------------------------------------------------------------------------- */
.racconto { max-width: 780px; }
.racconto h2 { max-width: 24ch; }
.racconto > p:last-child { margin-bottom: 0; }
.riquadro {
  background: var(--pp-calce);
  border-left: var(--pp-parete) solid var(--pp-blu-campo);
  padding: var(--pp-s5);
  font-weight: 500;
}
.sezione--calce .riquadro { background: var(--pp-bianco); }
.riquadro--vetro { background: #E4EEF8; border-left-color: var(--pp-blu-campo); }
.riquadro strong { font-weight: 700; color: var(--pp-blu-campo); }

.frase-autorita {
  margin: var(--pp-s7) auto 0;
  max-width: 30ch;
  font: 700 clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem)/1.2 var(--pp-font-titoli);
  letter-spacing: -0.015em;
  text-align: center;
  text-wrap: balance;
  color: var(--pp-bianco);
}
.frase-autorita em { font-style: normal; color: var(--pp-vetro); }
.frase-autorita--chiara { color: var(--pp-blu-notte); }
.frase-autorita--sinistra { margin-left: 0; text-align: left; max-width: 34ch; }
.sezione--bianco .frase-autorita--sinistra,
.sezione--calce .frase-autorita--sinistra { font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); }

/* parole sottolineate in Terracotta da sinistra a destra */
.sottolinea {
  background: linear-gradient(var(--pp-terracotta), var(--pp-terracotta)) left 100% / 100% 3px no-repeat;
  padding-bottom: 2px;
  font-weight: 600;
}
.movimento .sottolinea { background-size: 0 3px; animation: sottolinea 900ms cubic-bezier(.2, .8, .2, 1) 1100ms forwards; }
@keyframes sottolinea { to { background-size: 100% 3px; } }

/* i tre segni d'autorità come pillole */
.pillole {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--pp-s2);
  margin: var(--pp-s5) 0 0;
  padding: 0;
}
.pillole li {
  padding: 6px 14px;
  border: 1px solid rgba(169, 199, 232, 0.5);
  border-radius: 999px;
  background: rgba(14, 30, 54, 0.55);
  font: 600 0.875rem/1.3 var(--pp-font-testo);
  color: var(--pp-bianco);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* --------------------------------------------------------------------------
   8. Il mercato in quattro numeri
   -------------------------------------------------------------------------- */
.mercato__testa { max-width: 780px; }
.mercato__testa .attacco { color: var(--pp-calce); margin-bottom: 0; }
.numeri {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pp-s5) var(--pp-s4);
  margin: var(--pp-s7) 0 0;
  padding: 0;
}
@media (min-width: 900px) {
  .numeri { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pp-s6); }
}
.numeri li {
  padding-top: var(--pp-s4);
  border-top: var(--pp-parete) solid var(--pp-blu-campo);
}
.numeri__cifra {
  display: block;
  font: 700 clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem)/1 var(--pp-font-titoli);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--pp-bianco);
  white-space: nowrap;
}
.numeri__cosa { display: block; margin-top: var(--pp-s2); color: var(--pp-calce); font-size: var(--pp-testo-s); line-height: 1.4; }
.numeri__fonti { margin: var(--pp-s5) 0 0; font-size: 0.8125rem; color: rgba(169, 199, 232, 0.85); }

/* --------------------------------------------------------------------------
   9. La giornata del centro: la linea del tempo dalle 8 alle 23
   -------------------------------------------------------------------------- */
.giornata__titolo { max-width: 26ch; }
.linea-tempo { margin: var(--pp-s6) 0 var(--pp-s5); }
.linea-tempo__barra {
  position: relative;
  display: flex;
  height: 18px;
  background: rgba(28, 76, 138, 0.08);
  overflow: hidden;
}
.linea-tempo__giorno { flex: 9 1 0; background: #C9DAEE; }
.linea-tempo__sera {
  flex: 6 1 0;
  background: linear-gradient(90deg, var(--pp-blu-campo), var(--pp-blu-notte));
  box-shadow: 0 0 24px rgba(28, 76, 138, 0.6);
}
.movimento .linea-tempo__giorno,
.movimento .linea-tempo__sera { transform: scaleX(0); transform-origin: left; transition: transform 900ms cubic-bezier(.2, .8, .2, 1); }
.movimento .linea-tempo__sera { transition-delay: 700ms; }
.movimento .linea-tempo.entrato .linea-tempo__giorno,
.movimento .linea-tempo.entrato .linea-tempo__sera { transform: none; }
.linea-tempo__ore {
  position: relative;
  list-style: none;
  height: 22px;
  margin: 6px 0 0;
  padding: 0;
  font: 600 0.8125rem/1 var(--pp-font-testo);
  font-variant-numeric: tabular-nums;
  color: var(--pp-ardesia);
}
.linea-tempo__ore li { position: absolute; left: calc(var(--ora) / 15 * 100%); transform: translateX(-50%); }
.linea-tempo__ore li:first-child { transform: none; }
.linea-tempo__ore li:last-child { transform: translateX(-100%); }

.giornata__chiusa {
  margin: var(--pp-s7) 0 0;
  max-width: 36ch;
  font: 700 clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem)/1.25 var(--pp-font-titoli);
  letter-spacing: -0.015em;
  color: var(--pp-blu-notte);
}
.giornata__chiusa .grigio { color: var(--pp-ardesia); }
.giornata__chiusa .blu { color: var(--pp-blu-campo); }

/* --------------------------------------------------------------------------
   11. Chi siamo: il campo isometrico che si costruisce e le quattro righe
   -------------------------------------------------------------------------- */
.chi-siamo { display: grid; gap: var(--pp-s6); align-items: center; }
@media (min-width: 900px) {
  .chi-siamo { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: var(--pp-s8); }
}
.cosa-facciamo { list-style: none; margin: var(--pp-s5) 0 0; padding: 0; display: grid; gap: var(--pp-s4); }
.cosa-facciamo li { display: grid; grid-template-columns: 44px 1fr; gap: var(--pp-s4); align-items: start; }
.icona {
  width: 44px;
  height: 44px;
  padding: 8px;
  border: 2px solid var(--pp-vetro);
  fill: none;
  stroke: var(--pp-bianco);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.movimento .cosa-facciamo .icona path,
.movimento .cosa-facciamo .icona rect { stroke-dasharray: 120; stroke-dashoffset: 120; transition: stroke-dashoffset 1100ms ease-out 300ms; }
.movimento .cosa-facciamo .entrato .icona path,
.movimento .cosa-facciamo .entrato .icona rect { stroke-dashoffset: 0; }

/* --------------------------------------------------------------------------
   12. Protocollo CASA: le lettere compongono la parola
   -------------------------------------------------------------------------- */
.metodo__intro { max-width: 760px; }
.casa {
  list-style: none;
  margin: var(--pp-s7) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pp-s4);
}
.casa__parte {
  position: relative;
  display: flex;
  flex-direction: column;
}
.casa__lettera {
  display: block;
  font: 700 clamp(5rem, 2rem + 11vw, 12rem)/0.82 var(--pp-font-titoli);
  letter-spacing: -0.05em;
  color: var(--pp-bianco);
  margin-bottom: var(--pp-s4);
}
.casa__parte:nth-child(2n) .casa__lettera { color: var(--pp-vetro); }
.casa h3 { color: var(--pp-bianco); margin-bottom: var(--pp-s2); }
.casa__breve {
  margin: 0 0 var(--pp-s3) !important;
  font: 600 1.125rem/1.35 var(--pp-font-titoli);
  color: var(--pp-vetro);
}
.casa__parte > p:last-child {
  flex: 1;
  margin: 0;
  padding: var(--pp-s4);
  background: rgba(14, 30, 54, 0.32);
  border-top: 3px solid var(--pp-vetro);
  font-size: var(--pp-testo-s);
  line-height: 1.55;
}
.movimento .casa__parte .casa__lettera { transform: translateY(40px); opacity: 0; transition: transform 800ms cubic-bezier(.2, .8, .2, 1), opacity 600ms ease-out; transition-delay: calc(var(--r, 0) * 140ms); }
.movimento .casa__parte.entrato .casa__lettera { transform: none; opacity: 1; }
@media (max-width: 899px) {
  .casa {
    display: flex;
    gap: var(--pp-s4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--margine);
    margin-left: calc(-1 * var(--margine));
    margin-right: calc(-1 * var(--margine));
    padding: 0 var(--margine) var(--pp-s4);
    scrollbar-width: none;
  }
  .casa::-webkit-scrollbar { display: none; }
  .casa__parte { flex: 0 0 82%; scroll-snap-align: start; }
  .casa__lettera { font-size: 6rem; transition: color 300ms ease-out; }
  .casa__parte--attiva .casa__lettera,
  .casa__parte:nth-child(2n).casa__parte--attiva .casa__lettera { color: #FF8A63; }
}

/* --------------------------------------------------------------------------
   14. Come lavoriamo: tre passi collegati da una linea
   -------------------------------------------------------------------------- */
.tre-passi {
  position: relative;
  list-style: none;
  margin: var(--pp-s6) 0;
  padding: 0;
  display: grid;
  gap: var(--pp-s5);
}
@media (min-width: 900px) {
  .tre-passi { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pp-s6); }
  .tre-passi::before,
  .tre-passi::after {
    content: "";
    position: absolute;
    top: 31px;
    left: 32px;
    right: calc(33.3% - 32px);
    height: 4px;
    background: var(--pp-linea);
  }
  .tre-passi::after { background: var(--pp-blu-campo); transform-origin: left; }
  .movimento .tre-passi::after { transform: scaleX(0); transition: transform 1400ms cubic-bezier(.4, 0, .2, 1) 300ms; }
  .movimento .tre-passi.entrato::after { transform: none; }
}
@media (max-width: 899px) {
  .tre-passi li { padding-left: 84px; position: relative; }
  .tre-passi li .tre-passi__numero { position: absolute; left: 0; top: 0; }
}
.tre-passi li { position: relative; z-index: 1; }
.tre-passi__numero {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--pp-s4);
  border-radius: 50%;
  background: var(--pp-blu-campo);
  color: var(--pp-bianco);
  font: 700 1.75rem/1 var(--pp-font-titoli);
  box-shadow: 0 0 0 6px var(--pp-bianco), 0 10px 24px rgba(28, 76, 138, 0.35);
}
.tre-passi h3 { font-size: 1.25rem; margin-bottom: var(--pp-s2); }
.tre-passi p { margin: 0; }
.movimento .tre-passi li { opacity: 0; transform: translateY(20px); transition: opacity 600ms ease-out, transform 700ms ease-out; transition-delay: calc(var(--r) * 450ms + 200ms); }
.movimento .tre-passi.entrato li { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   15. Cosa ricevi: le spunte che si disegnano e gli inclusi
   -------------------------------------------------------------------------- */
.scheda {
  background: var(--pp-bianco);
  padding: var(--pp-s5);
  border-top: var(--pp-parete) solid var(--pp-blu-campo);
  box-shadow: var(--pp-ombra-1);
}
@media (min-width: 600px) {
  .scheda { padding: var(--pp-s6); }
}
.spunte { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pp-s3); }
.spunte li { position: relative; padding-left: 36px; }
.spunte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pp-blu-campo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.6 2.6L10 3.5' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
.movimento .spunte li::before { transform: scale(0); transition: transform 380ms cubic-bezier(.3, 1.6, .5, 1); }
.movimento .entrato .spunte li::before { transform: none; }
.movimento .entrato .spunte li:nth-child(1)::before { transition-delay: 250ms; }
.movimento .entrato .spunte li:nth-child(2)::before { transition-delay: 400ms; }
.movimento .entrato .spunte li:nth-child(3)::before { transition-delay: 550ms; }
.movimento .entrato .spunte li:nth-child(4)::before { transition-delay: 700ms; }
.movimento .entrato .spunte li:nth-child(5)::before { transition-delay: 850ms; }
.movimento .entrato .spunte li:nth-child(6)::before { transition-delay: 1000ms; }
/* --------------------------------------------------------------------------
   18. Il campo isometrico, disegnato come nel Reel
   Stessi colori del campo vero; le variabili cambiano per stato (pieno, vuoto,
   occupato) e passano dentro il <use>.
   -------------------------------------------------------------------------- */
.campo-iso {
  --pavimento: var(--pp-blu-campo);
  --linee: rgba(255, 255, 255, 0.9);
  --vetro: rgba(169, 199, 232, 0.22);
  --bordo-vetro: rgba(169, 199, 232, 0.8);
  overflow: visible;
}
.iso-pavimento { fill: var(--pavimento); }
.iso-linee { fill: none; stroke: var(--linee); stroke-width: 2; stroke-linecap: round; }
.iso-parete { fill: var(--vetro); stroke: var(--bordo-vetro); stroke-width: 1.5; stroke-linejoin: round; }
.iso-parete--vicina { fill-opacity: 0.7; }
.iso-rete-laterale { fill: rgba(14, 30, 54, 0.25); stroke: var(--bordo-vetro); stroke-width: 1; stroke-dasharray: 3 3; }
.iso-rete { fill: rgba(14, 30, 54, 0.55); stroke: #FFFFFF; stroke-width: 1.5; }
.iso-giocatore { fill: #FFFFFF; stroke: var(--pp-blu-notte); stroke-width: 2; }
.iso-pallina { fill: #D8F25A; stroke: var(--pp-blu-notte); stroke-width: 1; }

/* il campo grande che si costruisce, in "Chi siamo" */
.campo-grande { position: relative; }
.campo-grande::before {
  content: "";
  position: absolute;
  inset: 12% 8% 0;
  background: radial-gradient(closest-side, rgba(28, 76, 138, 0.55), rgba(28, 76, 138, 0));
  filter: blur(8px);
}
.campo-grande .campo-iso { position: relative; width: 100%; height: auto; max-width: 560px; margin: 0 auto; }
.movimento .campo-grande .iso-pavimento { opacity: 0; transform: scale(0.92); transform-box: fill-box; transform-origin: center; transition: opacity 600ms ease-out, transform 700ms cubic-bezier(.2, .8, .2, 1); }
.movimento .campo-grande .iso-linee { stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 1400ms ease-out 400ms; }
.movimento .campo-grande .iso-parete,
.movimento .campo-grande .iso-rete-laterale,
.movimento .campo-grande .iso-rete { opacity: 0; transform: translateY(14px); transition: opacity 500ms ease-out 1100ms, transform 600ms ease-out 1100ms; }
.movimento .campo-grande .iso-giocatore,
.movimento .campo-grande .iso-pallina { opacity: 0; transition: opacity 400ms ease-out 1700ms; }
.movimento .campo-grande--vivo .iso-pavimento { opacity: 1; transform: none; }
.movimento .campo-grande--vivo .iso-linee { stroke-dashoffset: 0; }
.movimento .campo-grande--vivo .iso-parete,
.movimento .campo-grande--vivo .iso-rete-laterale,
.movimento .campo-grande--vivo .iso-rete { opacity: 1; transform: none; }
.movimento .campo-grande--vivo .iso-giocatore,
.movimento .campo-grande--vivo .iso-pallina { opacity: 1; }
.movimento .campo-grande--vivo .iso-pallina { animation: pallina 2.2s ease-in-out 2.2s infinite; }
@keyframes pallina {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-22px, -26px); }
  50% { transform: translate(-44px, 14px); }
  75% { transform: translate(-22px, -20px); }
}

/* --------------------------------------------------------------------------
   19. Movimento e profondità
   Gli elementi [data-entra] salgono e compaiono quando entrano nello schermo.
   Valgono solo con html.movimento: senza JavaScript o con "Riduci movimento"
   tutto è già fermo e visibile.
   -------------------------------------------------------------------------- */
.movimento [data-entra] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms ease-out, transform 800ms cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--r, 0) * 120ms);
}
.movimento [data-entra="sinistra"] { transform: translateX(-36px); }
.movimento [data-entra="destra"] { transform: translateX(36px); }
.movimento [data-entra].entrato { opacity: 1; transform: none; }
/* le pillole dell'apertura e i blocchi con animazioni proprie */
.movimento .pillole .entra-subito { animation-name: entra-pillola; }
@keyframes entra-pillola { from { opacity: 0; transform: translateY(10px) scale(0.92); } to { opacity: 1; transform: none; } }

/* apertura: il testo entra in sequenza e la foto si avvicina piano */
.movimento .entra-subito { animation: entra-subito 800ms cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--r, 0) * 110ms + 120ms); }
@keyframes entra-subito {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

/* profondità: una luce morbida sulle sezioni scure */
.sezione--profonda { position: relative; overflow: hidden; isolation: isolate; }
.sezione--profonda::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 70vw;
  height: 70vw;
  max-width: 900px;
  max-height: 900px;
  top: -20%;
  right: -20%;
  background: radial-gradient(closest-side, rgba(169, 199, 232, 0.14), rgba(169, 199, 232, 0));
  pointer-events: none;
}
.sezione--campo.sezione--profonda::before { background: radial-gradient(closest-side, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)); left: -25%; right: auto; }

/* schede che si sollevano al passaggio del mouse */
@media (hover: hover) {
  .scheda, .parte { transition: transform 220ms ease-out, box-shadow 220ms ease-out; }
  .scheda:hover, .parte:hover { transform: translateY(-4px); box-shadow: var(--pp-ombra-2); }
}

/* --------------------------------------------------------------------------
   21. Chiusura sulla foto del bar dopo la partita
   -------------------------------------------------------------------------- */
.chiusura { position: relative; isolation: isolate; overflow: hidden; }
@media (min-width: 900px) {
  .chiusura { padding: 140px 0; }
}
.chiusura__foto {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}
.chiusura::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 30, 54, 0.86), rgba(14, 30, 54, 0.78) 50%, rgba(14, 30, 54, 0.94));
}
.chiusura__interno { max-width: 760px; margin: 0 auto; text-align: center; }
.chiusura__interno h2 { margin-left: auto; margin-right: auto; max-width: 20ch; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); }
.chiusura__interno .attacco { color: var(--pp-calce); }
.chiusura__azione { margin-top: var(--pp-s5); }
.movimento .chiusura__azione[data-entra] { transform: translateY(40px); }
.movimento .chiusura__azione.entrato { transform: none; }

/* --------------------------------------------------------------------------
   22. Domande frequenti
   -------------------------------------------------------------------------- */
.domande { max-width: 840px; }
.domanda {
  border-bottom: 1px solid var(--pp-linea);
}
.domanda:first-of-type { border-top: 1px solid var(--pp-linea); }
.domanda summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--pp-s4);
  min-height: 64px;
  padding: var(--pp-s4) 0;
  font: 600 1.125rem/1.35 var(--pp-font-titoli);
  color: var(--pp-blu-notte);
  cursor: pointer;
  list-style: none;
}
@media (min-width: 600px) {
  .domanda summary { font-size: 1.25rem; }
}
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary::after {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  background:
    linear-gradient(var(--pp-blu-campo), var(--pp-blu-campo)) center / 100% 3px no-repeat,
    linear-gradient(var(--pp-blu-campo), var(--pp-blu-campo)) center / 3px 100% no-repeat;
  transition: transform var(--pp-transizione);
}
.domanda[open] summary::after { transform: rotate(45deg); }
.domanda summary:hover { color: var(--pp-blu-campo); }
.domanda__risposta { padding: 0 0 var(--pp-s5); max-width: var(--pp-misura); }
.domanda__risposta p { margin: 0; }

/* --------------------------------------------------------------------------
   23. Footer
   -------------------------------------------------------------------------- */
.piede {
  background: #0A1628;
  color: var(--pp-vetro);
  font-size: var(--pp-testo-s);
  padding: var(--pp-s7) 0 calc(var(--pp-s7) + var(--altezza-barra) + env(safe-area-inset-bottom, 0px));
  --pp-link: var(--pp-bianco);
  --colore-focus: var(--pp-vetro);
}
@media (min-width: 900px) {
  .piede { padding-bottom: var(--pp-s7); }
}
.piede__griglia {
  display: grid;
  gap: var(--pp-s5);
}
@media (min-width: 900px) {
  .piede__griglia { grid-template-columns: auto 1fr auto; align-items: start; gap: var(--pp-s7); }
}
.piede__logo { width: 140px; height: auto; }
.piede p { margin: 0 0 var(--pp-s1); }
.piede a { color: var(--pp-bianco); }
.piede a:hover { color: var(--pp-vetro); }
.piede__link { list-style: none; margin: 0; }
.piede__link a,
.piede__preferenze {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.piede__preferenze {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--pp-bianco);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.piede__preferenze:hover { color: var(--pp-vetro); }
html:not(.js) .piede__preferenze { display: none; }
.piede__diritti { margin-top: var(--pp-s5); color: rgba(169, 199, 232, 0.8); }

/* dati del titolare */
.titolare { font-style: normal; }
.titolare p { margin: 0 0 var(--pp-s1); }

/* --------------------------------------------------------------------------
   24. Pulsante fisso su telefono
   -------------------------------------------------------------------------- */
.barra-fissa {
  position: fixed;
  z-index: 50;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--pp-s3) var(--margine) calc(var(--pp-s3) + env(safe-area-inset-bottom, 0px));
  background: rgba(14, 30, 54, 0.96);
  border-top: 1px solid var(--pp-linea-scuro);
  --colore-focus: var(--pp-vetro);
  transition: transform 200ms ease-out, visibility 200ms;
}
.barra-fissa .bottone { width: 100%; }
.js .barra-fissa {
  transform: translateY(110%);
  visibility: hidden;
}
.js .barra-fissa.barra-fissa--attiva {
  transform: none;
  visibility: visible;
}
@media (min-width: 900px) {
  .barra-fissa { display: none; }
}

/* --------------------------------------------------------------------------
   25. Informativa privacy
   -------------------------------------------------------------------------- */
.privacy { background: var(--pp-calce); }
.testata {
  background: var(--pp-bianco);
  border-bottom: 1px solid var(--pp-linea);
}
.testata__interno {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--pp-s4);
  min-height: 72px;
}
.testata__home { display: inline-flex; align-items: center; min-height: 44px; }
.testata__logo { width: 140px; height: auto; }
.testata a.testata__ritorno {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--pp-testo-s);
  font-weight: 600;
}
.informativa {
  max-width: 800px;
  padding-top: var(--pp-s7);
  padding-bottom: var(--pp-s8);
}
.informativa h1 { font-size: clamp(2rem, 1.6rem + 2vw, 3rem); }
.informativa h2 {
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  margin: var(--pp-s7) 0 var(--pp-s4);
  padding-top: var(--pp-s5);
  border-top: 1px solid var(--pp-linea);
}
.informativa h3 { font-size: 1.125rem; margin: var(--pp-s5) 0 var(--pp-s2); }
.informativa .aggiornamento { color: var(--pp-ardesia); font-size: var(--pp-testo-s); }
.informativa ul { list-style: none; }
.informativa ul > li {
  position: relative;
  padding-left: 22px;
  margin-bottom: var(--pp-s2);
}
.informativa ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.7em;
  width: 8px;
  height: 8px;
  background: var(--pp-blu-campo);
}
.scheda-titolare {
  margin: var(--pp-s6) 0;
  padding: var(--pp-s5);
  background: var(--pp-bianco);
  border-left: var(--pp-parete) solid var(--pp-blu-campo);
  box-shadow: var(--pp-ombra-1);
}
.scheda-titolare h2 {
  margin: 0 0 var(--pp-s3);
  padding: 0;
  border: 0;
  font-size: 1.25rem;
}
.scheda-titolare dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pp-s1) var(--pp-s5);
  margin: 0;
}
@media (min-width: 600px) {
  .scheda-titolare dl { grid-template-columns: max-content 1fr; }
}
.scheda-titolare dt { font-weight: 600; }
.scheda-titolare dd { margin: 0 0 var(--pp-s2); }
.tabella-scroll { overflow-x: auto; margin: 0 0 var(--pp-s4); }
.informativa table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--pp-testo-s);
  background: var(--pp-bianco);
}
.informativa th,
.informativa td {
  text-align: left;
  vertical-align: top;
  padding: var(--pp-s3);
  border-bottom: 1px solid var(--pp-linea);
}
.informativa th { font-weight: 600; background: #E9E6DF; }
.piede--privacy { padding-bottom: var(--pp-s7); }

/* --------------------------------------------------------------------------
   26. Banner dei cookie
   "Accetta" e "Rifiuta" hanno la stessa forma, lo stesso colore e la stessa
   dimensione; la X in alto a destra chiude senza dare il consenso.
   -------------------------------------------------------------------------- */
.consenso {
  position: fixed;
  z-index: 60;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  background: var(--pp-bianco);
  color: var(--pp-blu-notte);
  border-top: var(--pp-parete) solid var(--pp-blu-campo);
  box-shadow: 0 -8px 24px rgba(14, 30, 54, 0.18);
  --colore-focus: var(--pp-blu-campo);
  --pp-link: var(--pp-blu-campo);
}
.consenso[hidden] { display: none; }
.consenso:focus { outline: none; }
.consenso:focus-visible { outline: 3px solid var(--pp-blu-campo); outline-offset: -3px; }
.consenso__interno {
  position: relative;
  max-width: calc(var(--pp-contenuto) + 2 * var(--margine));
  margin: 0 auto;
  padding: var(--pp-s4) var(--margine) var(--pp-s4);
}
.consenso__titolo {
  margin: 0 48px var(--pp-s2) 0;
  font: 700 1.0625rem/1.3 var(--pp-font-titoli);
}
.consenso__testo {
  margin: 0 0 var(--pp-s4);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--pp-blu-notte);
}
.consenso__testo a { color: var(--pp-blu-campo); font-weight: 600; }
.consenso__azioni {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pp-s3);
}
.consenso__bottone {
  min-height: 48px;
  padding: var(--pp-s2) var(--pp-s4);
  font: 600 1rem/1.2 var(--pp-font-testo);
  color: var(--pp-bianco);
  background: var(--pp-blu-campo);
  border: 0;
  border-radius: var(--pp-r1);
  cursor: pointer;
  transition: background var(--pp-transizione);
}
.consenso__bottone:hover { background: var(--pp-blu-campo-scuro); }
.consenso__chiudi {
  position: absolute;
  top: var(--pp-s2);
  right: calc(var(--margine) - 12px);
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background:
    linear-gradient(var(--pp-blu-notte), var(--pp-blu-notte)) center / 20px 2px no-repeat,
    linear-gradient(var(--pp-blu-notte), var(--pp-blu-notte)) center / 2px 20px no-repeat;
  transform: rotate(45deg);
  cursor: pointer;
}
@media (min-width: 900px) {
  .consenso__interno {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: var(--pp-s6);
    align-items: center;
    padding-top: var(--pp-s4);
    padding-bottom: var(--pp-s4);
    padding-right: calc(var(--margine) + 48px);
  }
  .consenso__titolo { grid-column: 1; }
  .consenso__testo { grid-column: 1; margin-bottom: 0; }
  .consenso__azioni { grid-column: 2; grid-row: 1 / span 2; }
  .consenso__chiudi { top: var(--pp-s3); right: var(--pp-s2); }
}
/* mentre il banner è aperto il pulsante fisso resta nascosto */
html.consenso-aperto .barra-fissa { display: none; }
code { font-size: 0.9em; }

/* ==========================================================================
   27. Funnel 2 · Oltre la prenotazione
   ========================================================================== */

/* 27.1 Apertura: il problema a sinistra, la guida in prospettiva a destra.
   Telefono: titolo, guida grande, sottotitolo e pulsante, uno sotto l'altro. */
.apertura {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(90% 60% at 85% 38%, rgba(28, 76, 138, 0.85) 0%, rgba(28, 76, 138, 0) 70%),
    linear-gradient(180deg, #0B182C 0%, var(--pp-blu-notte) 60%, #10264A 100%);
  color: var(--pp-bianco);
  --pp-titoli: var(--pp-bianco);
  --colore-focus: var(--pp-vetro);
}
/* il campo visto dall'alto, appena accennato dietro la guida */
.apertura__campo {
  position: absolute;
  z-index: -1;
  top: 210px;
  left: 50%;
  width: 640px;
  max-width: none;
  height: auto;
  transform: translateX(-50%) rotate(-12deg);
  opacity: 0.16;
  pointer-events: none;
}
.apertura__campo * { fill: none; stroke: var(--pp-vetro); stroke-width: 3; }
.apertura__interno {
  position: relative;
  padding-top: var(--pp-s4);
  padding-bottom: var(--pp-s8);
}
.apertura__logo { display: block; width: 148px; height: auto; }
.apertura__griglia {
  display: grid;
  grid-template-areas: "titolo" "guida" "azione";
  margin-top: var(--pp-s6);
}
.apertura__titolo { grid-area: titolo; }
.apertura__guida { grid-area: guida; }
.apertura__azione { grid-area: azione; }
.apertura .etichetta { color: var(--pp-vetro); max-width: 40ch; }
.apertura h1 {
  font-size: clamp(2rem, 1.45rem + 2.4vw, 3.25rem);
  line-height: 1.06;
  max-width: 19ch;
  margin: 0;
}
.apertura__azione .attacco { margin-bottom: var(--pp-s5); max-width: 36em; color: var(--pp-calce); }
.apertura__azione .attacco strong { color: var(--pp-bianco); font-weight: 600; }
.apertura__sotto {
  margin: var(--pp-s3) 0 0;
  font-size: var(--pp-testo-s);
  color: var(--pp-vetro);
}
@media (max-width: 599px) {
  .apertura__sotto { text-align: center; }
}

/* la guida: entra ruotando, poi galleggia piano; dietro una luce Vetro */
.guida-3d {
  position: relative;
  width: min(78%, 340px);
  margin: var(--pp-s5) auto var(--pp-s4);
}
.guida-3d::before {
  content: "";
  position: absolute;
  inset: 14% 10% 18%;
  background: radial-gradient(closest-side, rgba(169, 199, 232, 0.55), rgba(169, 199, 232, 0));
  filter: blur(18px);
}
.guida-3d picture { display: block; }
.guida-3d img {
  position: relative;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 40px rgba(4, 10, 22, 0.55));
}
.movimento .guida-3d { animation: guida-entra 1200ms cubic-bezier(.2, .8, .2, 1) 200ms both; }
.movimento .guida-3d img { animation: guida-galleggia 6s ease-in-out 1500ms infinite; }
@keyframes guida-entra {
  from { opacity: 0; transform: translateY(40px) rotate(6deg) scale(0.94); }
  to { opacity: 1; transform: none; }
}
@keyframes guida-galleggia {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(-0.6deg); }
}
/* il bollino del formato, appoggiato sulla guida */
.guida-3d__bollino {
  position: absolute;
  z-index: 1;
  right: -4%;
  top: 6%;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--pp-terracotta);
  color: var(--pp-bianco);
  text-align: center;
  font: 700 0.875rem/1.1 var(--pp-font-titoli);
  box-shadow: 0 12px 24px rgba(4, 10, 22, 0.4);
  transform: rotate(10deg);
}
.guida-3d__bollino strong { display: block; font-size: 1.75rem; line-height: 1; letter-spacing: -0.02em; font-weight: 700; }
.movimento .guida-3d__bollino { animation: bollino 700ms cubic-bezier(.3, 1.6, .5, 1) 1300ms both; }
@keyframes bollino {
  from { opacity: 0; transform: rotate(10deg) scale(0.3); }
  to { opacity: 1; transform: rotate(10deg) scale(1); }
}

@media (min-width: 900px) {
  .apertura__interno { padding-top: var(--pp-s6); padding-bottom: var(--pp-s8); }
  .apertura__logo { width: 176px; }
  .apertura__griglia {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    grid-template-areas: "titolo guida" "azione guida";
    grid-template-rows: auto 1fr;
    column-gap: var(--pp-s7);
    align-items: start;
    margin-top: var(--pp-s7);
  }
  .apertura__azione { margin-top: var(--pp-s5); }
  .apertura__azione .attacco { font-size: var(--pp-testo-m); line-height: 1.55; }
  .apertura__guida { align-self: center; }
  .guida-3d { width: 100%; max-width: 500px; margin: 0 auto; }
  .guida-3d__bollino { width: 108px; height: 108px; font-size: 0.9375rem; }
  .guida-3d__bollino strong { font-size: 2rem; }
  .apertura__campo { top: 52%; left: 80%; width: 760px; opacity: 0.12; transform: translate(-50%, -50%) rotate(-12deg); }
}

/* 27.2 Il problema: la giornata e il racconto */
.problema__titolo { max-width: 24ch; }
.problema__racconto { max-width: 760px; }
.problema__racconto p:last-child { margin-bottom: 0; }
.problema .linea-tempo { max-width: 760px; margin-bottom: var(--pp-s6); }
.problema .giornata__chiusa { max-width: 30ch; }

/* 27.3 Perché succede: racconto in due colonne su desktop */
.perche__intro { max-width: 780px; }
.perche__intro .attacco { color: var(--pp-calce); margin-bottom: 0; }
.perche__testo { margin-top: var(--pp-s7); display: grid; gap: 0 var(--pp-s7); color: var(--pp-calce); }
@media (min-width: 900px) {
  .perche__testo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.numeri__cosa { color: var(--pp-calce); }

/* 27.4 Cosa c'è dentro: le parti con le loro pagine */
.dentro__intro { max-width: 780px; }
.dentro__intro .attacco { margin-bottom: 0; }
.parti {
  list-style: none;
  margin: var(--pp-s7) 0 0;
  padding: 0;
  display: grid;
  gap: var(--pp-s3);
  max-width: 940px;
}
.parte {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: var(--pp-s3) var(--pp-s4);
  padding: var(--pp-s5) var(--pp-s4);
  background: var(--pp-calce);
  border-left: var(--pp-parete) solid var(--pp-blu-campo);
}
.parte__pagine { display: flex; flex-direction: column; gap: 2px; margin: 0; grid-column: 1; grid-row: 1; }
.parte__etichetta {
  font: 600 0.6875rem/1.2 var(--pp-font-testo);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pp-ardesia);
}
.parte__numeri {
  font: 700 1.625rem/1 var(--pp-font-titoli);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--pp-blu-campo);
  white-space: nowrap;
}
.parte h3 { grid-column: 2; grid-row: 1; align-self: end; font-size: 1.1875rem; margin: 0; }
.parte__testo { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: var(--pp-testo-s); line-height: 1.55; }
/* il righello delle 30 pagine con il tratto della parte in Terracotta */
.parte__righello {
  grid-column: 1 / -1;
  grid-row: 3;
  position: relative;
  height: 6px;
  margin-top: var(--pp-s2);
  background: linear-gradient(90deg, var(--pp-linea) calc(100% - 2px), transparent 0) 0 0 / calc(100% / 30) 100% repeat-x;
}
.parte__righello::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc((var(--da) - 1) / 30 * 100%);
  width: calc((var(--a) - var(--da) + 1) / 30 * 100%);
  background: var(--pp-terracotta);
  transform-origin: left center;
}
.movimento .parte__righello::after { transform: scaleX(0); transition: transform 700ms cubic-bezier(.2, .8, .2, 1) 350ms; }
.movimento .parte.entrato .parte__righello::after { transform: none; }
@media (min-width: 600px) {
  .parte { grid-template-columns: 120px minmax(0, 1fr); padding: var(--pp-s5); column-gap: var(--pp-s5); row-gap: var(--pp-s2); }
  .parte__pagine { grid-row: 1 / span 2; }
  .parte h3 { align-self: start; }
  .parte__testo { grid-column: 2; }
  .parte__numeri { font-size: 2.25rem; }
  .parte h3 { font-size: 1.3125rem; }
}

/* il riquadro "in 90 giorni avrai" */
.novanta {
  margin-top: var(--pp-s7);
  max-width: 940px;
  padding: var(--pp-s5);
  background: var(--pp-blu-notte);
  color: var(--pp-bianco);
  border-top: var(--pp-parete) solid var(--pp-terracotta);
  box-shadow: 0 24px 50px rgba(14, 30, 54, 0.25);
}
.novanta h3 { color: var(--pp-bianco); margin-bottom: var(--pp-s5); max-width: 26ch; }
.novanta .spunte li::before { background-color: var(--pp-terracotta); }
@media (min-width: 600px) {
  .novanta { padding: var(--pp-s6); }
}
@media (min-width: 900px) {
  .novanta .spunte { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--pp-s6); }
}
.invito--sinistra { align-items: flex-start; }

/* 27.5 Per chi è */
.per-chi .elenco { max-width: 820px; margin: var(--pp-s6) 0 0; }
.per-chi .elenco > li { margin-bottom: var(--pp-s4); }
.per-chi .riquadro { max-width: 820px; margin: var(--pp-s5) 0 0; }

/* 27.6 Il prezzo: il cartellino con l'elenco e 18,99 € in grande */
.prezzo-guida { display: grid; gap: var(--pp-s7); }
@media (min-width: 900px) {
  .prezzo-guida { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--pp-s8); align-items: center; }
}
.prezzo-guida__testo h2 { max-width: 16ch; }
.prezzo-guida__testo p { max-width: 36em; }
.prezzo-guida__guida { display: none; }
@media (min-width: 900px) {
  .prezzo-guida__guida { display: block; width: 70%; max-width: 380px; margin: var(--pp-s5) 0 0; }
  .prezzo-guida__guida img { width: 100%; height: auto; filter: drop-shadow(0 24px 30px rgba(14, 30, 54, 0.3)); }
}
.cartellino {
  position: relative;
  padding: var(--pp-s5) var(--pp-s4) var(--pp-s5);
  background: var(--pp-bianco);
  border-top: var(--pp-parete) solid var(--pp-blu-campo);
  box-shadow: 0 24px 60px rgba(14, 30, 54, 0.22);
}
@media (min-width: 600px) {
  .cartellino { padding: var(--pp-s6); }
}
.cartellino__titolo {
  margin: 0 0 var(--pp-s4);
  padding-bottom: var(--pp-s3);
  border-bottom: 2px solid var(--pp-blu-notte);
  font: 600 var(--pp-etichetta)/1.4 var(--pp-font-testo);
  letter-spacing: var(--pp-spaziatura-etichetta);
  text-transform: uppercase;
  color: var(--pp-ardesia);
}
.cartellino .spunte { font-size: var(--pp-testo-s); line-height: 1.5; }
.cartellino__prezzo {
  margin: var(--pp-s5) 0 var(--pp-s5);
  padding-top: var(--pp-s4);
  border-top: 1px dashed var(--pp-linea);
}
.cartellino__cifra {
  margin: 0;
  font: 700 clamp(4.25rem, 3rem + 6vw, 6.5rem)/0.9 var(--pp-font-titoli);
  letter-spacing: -0.04em;
  color: var(--pp-blu-campo);
  white-space: nowrap;
}
.cartellino .bottone { width: 100%; }
.movimento .cartellino__cifra { opacity: 0; }
.movimento .cartellino.entrato .cartellino__cifra { animation: rimbalzo 800ms cubic-bezier(.3, 1.5, .5, 1) 1200ms forwards; }
@keyframes rimbalzo {
  0% { opacity: 0; transform: translateY(24px) scale(0.98); }
  60% { opacity: 1; transform: translateY(-6px) scale(1.01); }
  100% { opacity: 1; transform: none; }
}

/* 27.7 Dopo l'acquisto: quattro passi con la linea che si riempie */
.tre-passi--quattro li p { margin: 0; padding-top: var(--pp-s2); }
@media (min-width: 900px) {
  .tre-passi--quattro { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pp-s5); }
  .tre-passi--quattro::before,
  .tre-passi--quattro::after { right: calc(25% - 32px); }
  .tre-passi--quattro li p { padding-top: 0; }
}
@media (max-width: 899px) {
  .tre-passi--quattro::before,
  .tre-passi--quattro::after {
    content: "";
    position: absolute;
    left: 30px;
    top: 32px;
    bottom: 40px;
    width: 4px;
    background: var(--pp-linea);
  }
  .tre-passi--quattro::after { background: var(--pp-blu-campo); transform-origin: top; }
  .movimento .tre-passi--quattro::after { transform: scaleY(0); transition: transform 1600ms cubic-bezier(.4, 0, .2, 1) 300ms; }
  .movimento .tre-passi--quattro.entrato::after { transform: none; }
  .tre-passi--quattro li { min-height: 64px; }
}

/* 27.8 Chiusura */
.chiusura__sotto { margin: var(--pp-s3) 0 0; font-size: var(--pp-testo-s); color: var(--pp-vetro); }

/* 27.9 Pagina di ringraziamento */
.grazie-apertura {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(80% 60% at 80% 40%, rgba(28, 76, 138, 0.8) 0%, rgba(28, 76, 138, 0) 70%),
    var(--pp-blu-notte);
  color: var(--pp-bianco);
  --pp-titoli: var(--pp-bianco);
  --colore-focus: var(--pp-vetro);
}
.grazie-apertura__interno { padding-top: var(--pp-s4); padding-bottom: var(--pp-s8); }
.grazie-apertura__griglia { display: grid; gap: var(--pp-s5); margin-top: var(--pp-s6); align-items: center; }
.grazie-apertura h1 { font-size: clamp(2rem, 1.45rem + 2.4vw, 3.25rem); line-height: 1.06; max-width: 16ch; }
.grazie-apertura .attacco { color: var(--pp-calce); max-width: 36em; }
.grazie-apertura .guida-3d { width: min(64%, 280px); margin: 0 auto; }
.grazie-apertura__nota { margin: var(--pp-s3) 0 0; font-size: var(--pp-testo-s); color: var(--pp-vetro); max-width: 40em; }
.grazie-apertura__nota a { color: var(--pp-bianco); }
@media (min-width: 900px) {
  .grazie-apertura__interno { padding-top: var(--pp-s6); }
  .grazie-apertura__griglia { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); column-gap: var(--pp-s8); margin-top: var(--pp-s7); }
  .grazie-apertura__guida { order: 2; }
  .grazie-apertura .guida-3d { width: 100%; max-width: 420px; }
}
@media (max-width: 599px) {
  .grazie-apertura__nota { text-align: center; }
}
/* pulsante di download: la freccia guarda in basso */
.bottone--scarica::after { transform: rotate(135deg); margin-top: -4px; }

/* il riquadro della consulenza, staccato dal resto della pagina */
.consulenza {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--pp-s6) var(--pp-s4);
  background: var(--pp-bianco);
  border-top: var(--pp-parete) solid var(--pp-terracotta);
  box-shadow: 0 24px 60px rgba(14, 30, 54, 0.16);
}
@media (min-width: 600px) {
  .consulenza { padding: var(--pp-s7); }
}
.consulenza__simbolo { width: 64px; height: auto; margin-bottom: var(--pp-s5); }
.consulenza h2 { max-width: 24ch; font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem); }
.consulenza p { max-width: 40em; }
.consulenza .invito { margin-top: var(--pp-s5); }

/* 27.10 Pagine di servizio: link nel piè di pagina in riga */
.piede--servizio { padding-bottom: var(--pp-s7); }
@media (min-width: 900px) {
  .piede__link { display: flex; flex-direction: column; align-items: flex-start; }
}