/* ==========================================================================
   Protocollo Padel · Landing del Protocollo CASA (funnel 1) e informativa privacy
   Un solo foglio di stile: in testa i token di marca "Il Campo" del kit del
   Direttore Creativo, poi le regole della pagina, dal telefono (390 px) al
   desktop (1280 px).

   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");
}

/* --------------------------------------------------------------------------
   6. Apertura con la foto a tutto quadro
   Telefono: la foto occupa la parte alta, il titolo sale sulla velatura e il
   resto del testo continua su Blu Notte. Desktop: la foto copre tutta
   l'apertura e il testo sta nella fascia bassa, sopra rete e campo.
   -------------------------------------------------------------------------- */
.apertura {
  --foto-h: min(118vw, 560px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--pp-blu-notte);
  color: var(--pp-bianco);
  --pp-titoli: var(--pp-bianco);
  --colore-focus: var(--pp-vetro);
}
.apertura__foto {
  position: absolute;
  z-index: -2;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--foto-h);
  object-fit: cover;
  object-position: 50% 46%;           /* parete di vetro, rete e campo vuoto in vista sopra il titolo */
}
.apertura__velatura {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--foto-h);
  background:
    linear-gradient(to bottom, rgba(14, 30, 54, 0.88) 0%, rgba(14, 30, 54, 0.7) 12%, rgba(14, 30, 54, 0) 26%),
    var(--pp-velatura),
    linear-gradient(to top, var(--pp-blu-notte) 0%, rgba(14, 30, 54, 0.6) 46%, rgba(14, 30, 54, 0) 72%);
}
.apertura--senza-foto .apertura__velatura { display: none; }

.apertura__interno {
  position: relative;
  padding-top: var(--pp-s4);
  padding-bottom: var(--pp-s8);
}
.apertura__logo {
  display: block;
  width: 148px;
  height: auto;
}
.apertura__testo {
  margin-top: calc(var(--foto-h) * 0.55 - 50px);
}
.apertura--senza-foto .apertura__testo { margin-top: var(--pp-s8); }

.apertura .etichetta {
  color: var(--pp-vetro);
  max-width: 34ch;
}
.apertura h1 {
  margin-bottom: var(--pp-s5);
  max-width: 15ch;
}
.apertura__azione .attacco {
  margin-bottom: var(--pp-s5);
  max-width: 34em;
}
.apertura__sotto {
  margin: var(--pp-s3) 0 0;
  font-size: var(--pp-testo-s);
  color: var(--pp-vetro);
}
.apertura__note {
  list-style: none;
  margin: var(--pp-s4) 0 0;
  font-size: var(--pp-testo-s);
  line-height: 1.5;
  color: var(--pp-vetro);
}
.apertura__note li {
  display: flex;
  gap: var(--pp-s2);
  align-items: baseline;
  margin-bottom: var(--pp-s1);
}
.apertura__note li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--pp-vetro);
  transform: translateY(-2px);
}

@media (min-width: 600px) and (max-width: 899px) {
  .apertura__foto { object-position: 50% 40%; }
}
@media (max-width: 599px) {
  .apertura__sotto { text-align: center; }
}

@media (min-width: 900px) {
  .apertura {
    min-height: clamp(640px, min(64vw, 100vh), 860px);
    display: flex;
  }
  .apertura__foto,
  .apertura__velatura { height: 100%; }
  .apertura__foto { object-position: 50% 34%; }     /* foto 4:5: finestre, reti e campi vuoti in fila */
  .apertura__velatura {
    background:
      linear-gradient(to bottom, rgba(14, 30, 54, 0.85) 0%, rgba(14, 30, 54, 0.6) 9%, rgba(14, 30, 54, 0) 20%),
      var(--pp-velatura),
      linear-gradient(to top, rgba(14, 30, 54, 0.75) 0%, rgba(14, 30, 54, 0.6) 40%, rgba(14, 30, 54, 0) 58%);
  }
  .apertura__interno {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: var(--pp-s6);
    padding-bottom: var(--pp-s7);
  }
  .apertura__logo { width: 176px; }
  .apertura__testo {
    margin-top: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: var(--pp-s8);
    align-items: end;
  }
  .apertura--senza-foto .apertura__testo { margin-top: var(--pp-s9); }
  .apertura__titolo h1 { margin-bottom: 0; max-width: 13ch; }
  .apertura .etichetta { max-width: 46ch; }
  .apertura__azione .attacco { font-size: var(--pp-testo-m); line-height: 1.55; }
}

/* --------------------------------------------------------------------------
   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); }

/* titolo dell'apertura: "l'unica agenzia..." si sottolinea 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__blocchi { display: grid; gap: var(--pp-s4); }
@media (min-width: 900px) {
  .giornata__blocchi { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pp-s5); }
}
.blocco-ora {
  padding: var(--pp-s5);
  background: var(--pp-bianco);
  border-top: var(--pp-parete) solid #C9DAEE;
  box-shadow: var(--pp-ombra-1);
}
.blocco-ora h3 { font-size: 1.25rem; margin-bottom: var(--pp-s2); }
.blocco-ora p { margin: 0; }
.blocco-ora--sera { border-top-color: var(--pp-blu-campo); }
.blocco-ora--intanto { border-top-color: var(--pp-terracotta); }
.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); }

/* --------------------------------------------------------------------------
   10. Il contrasto: agenzia generalista contro Protocollo Padel
   Desktop: due colonne, la cella di destra copre leggermente quella di sinistra.
   Telefono: ogni riga è una scheda con le due voci una sopra l'altra.
   -------------------------------------------------------------------------- */
.contrasto {
  width: 100%;
  margin-top: var(--pp-s7);
  border-collapse: separate;
  border-spacing: 0 var(--pp-s3);
}
.contrasto th {
  padding: 0 var(--pp-s5) var(--pp-s2);
  font: 700 1.25rem/1.2 var(--pp-font-titoli);
  text-align: left;
}
.contrasto thead th:first-child { color: var(--pp-ardesia); }
.contrasto thead th:last-child { color: var(--pp-blu-campo); }
.contrasto td {
  width: 50%;
  padding: var(--pp-s4) var(--pp-s5);
  vertical-align: middle;
  line-height: 1.45;
}
.contrasto td:first-child {
  position: relative;
  padding-left: calc(var(--pp-s5) + 28px);
  background: #EEEDEA;
  color: var(--pp-ardesia);
}
.contrasto td:last-child {
  position: relative;
  padding-left: calc(var(--pp-s5) + 28px);
  background: var(--pp-blu-campo);
  color: var(--pp-calce);
  font-weight: 500;
  box-shadow: -10px 0 24px rgba(14, 30, 54, 0.25);
}
.contrasto td::before {
  content: "";
  position: absolute;
  left: var(--pp-s4);
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background: center / 10px 10px no-repeat;
  border-radius: 50%;
}
.contrasto td:first-child::before {
  background-color: rgba(91, 101, 119, 0.18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' stroke='%235B6577' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.contrasto td:last-child::before {
  background-color: var(--pp-terracotta);
  background-image: 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.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.movimento .contrasto tr[data-entra] { transform: none; opacity: 1; }
.movimento .contrasto tr[data-entra] td:first-child { opacity: 0; transform: translateX(-24px); transition: opacity 500ms ease-out, transform 600ms cubic-bezier(.2, .8, .2, 1); }
.movimento .contrasto tr[data-entra] td:last-child { opacity: 0; transform: translateX(40px); transition: opacity 500ms ease-out 260ms, transform 700ms cubic-bezier(.2, .8, .2, 1) 260ms; }
.movimento .contrasto tr.entrato td:first-child { opacity: 1; transform: none; }
.movimento .contrasto tr.entrato td:last-child { opacity: 1; transform: translateX(-12px); }
@media (max-width: 759px) {
  .contrasto, .contrasto tbody, .contrasto tr, .contrasto td { display: block; width: 100%; }
  .contrasto thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .contrasto tr { margin-bottom: var(--pp-s4); box-shadow: var(--pp-ombra-2); }
  .contrasto td:first-child { padding-bottom: var(--pp-s5); font-size: 0.9375rem; }
  .contrasto td:last-child { margin-top: -10px; box-shadow: 0 -8px 18px rgba(14, 30, 54, 0.18); }
  .contrasto td:first-child::after,
  .contrasto td:last-child::after {
    display: block;
    margin-bottom: 4px;
    font: 700 0.6875rem/1.2 var(--pp-font-testo);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    order: -1;
  }
  .movimento .contrasto tr.entrato td:last-child { transform: none; }
}

/* --------------------------------------------------------------------------
   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; }
}

/* --------------------------------------------------------------------------
   13. Immagina: la settimana in quattro momenti
   -------------------------------------------------------------------------- */
.immagina__titolo { max-width: 26ch; }
.settimana {
  list-style: none;
  margin: var(--pp-s6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pp-s3);
}
@media (min-width: 900px) {
  .settimana { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pp-s4); }
}
.giorno {
  position: relative;
  overflow: hidden;
  background: var(--pp-blu-notte);
  box-shadow: var(--pp-ombra-2);
  border-top: var(--pp-parete) solid var(--pp-terracotta);
}
.giorno img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
@media (min-width: 900px) {
  .giorno img { aspect-ratio: 4 / 5; }
}
.giorno__testo { padding: var(--pp-s4); color: var(--pp-bianco); }
.giorno__testo h3 { margin: 0 0 var(--pp-s2); font-size: 1.125rem; color: var(--pp-bianco); }
.giorno__testo p { margin: 0; font-size: 0.9375rem; line-height: 1.45; color: var(--pp-calce); }
@media (max-width: 599px) {
  .giorno__testo { padding: var(--pp-s3); }
  .giorno__testo h3 { font-size: 1rem; }
  .giorno__testo p { font-size: 0.875rem; }
}
.movimento .giorno img { filter: grayscale(1) brightness(0.6); transform: scale(1.06); transition: filter 900ms ease-out, transform 1200ms ease-out; transition-delay: calc(var(--r, 0) * 260ms + 300ms); }
.movimento .giorno.entrato img { filter: none; transform: none; }
.immagina__chiusa { margin: var(--pp-s6) 0 0; max-width: 820px; font-size: 1.125rem; }

/* --------------------------------------------------------------------------
   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
   -------------------------------------------------------------------------- */
.ricevi__colonne { display: grid; gap: var(--pp-s5); margin-top: var(--pp-s6); }
@media (min-width: 900px) {
  .ricevi__colonne { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pp-s6); }
}
.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; }
.inclusi { margin-top: var(--pp-s7); }
.inclusi h3 { margin-bottom: var(--pp-s4); }
.inclusi__schede {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--pp-s3);
}
.inclusi__schede li {
  padding: var(--pp-s4);
  background: var(--pp-blu-notte);
  color: var(--pp-bianco);
  border-left: 4px solid var(--pp-terracotta);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.ricevi__proprieta { margin: var(--pp-s5) 0 0; font-weight: 700; font-size: 1.125rem; }

/* --------------------------------------------------------------------------
   16. Prezzo: la scheda-preventivo con l'ancoraggio
   Le voci prese a parte, il totale, il prezzo dell'agenzia generalista e
   infine il prezzo del Protocollo CASA. Le cifre si barrano in sequenza
   quando js/main.js aggiunge .preventivo--barrato (ritardo da --i).
   -------------------------------------------------------------------------- */
.prezzo__intro { max-width: 760px; }
.prezzo__intro .attacco { margin-bottom: 0; }
.prezzo__griglia {
  display: grid;
  gap: var(--pp-s7);
  margin-top: var(--pp-s7);
}
@media (min-width: 900px) {
  .prezzo__griglia {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: var(--pp-s8);
    align-items: start;
  }
  .prezzo__testo { padding-top: var(--pp-s4); }
}
.prezzo__testo p { margin-bottom: var(--pp-s4); }

.preventivo {
  color: var(--pp-blu-notte);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}
.preventivo__carta {
  position: relative;
  background: var(--pp-calce);
  padding: var(--pp-s5) var(--pp-s4) var(--pp-s5);
  border-top: var(--pp-parete) solid var(--pp-blu-campo);
}
@media (min-width: 600px) {
  .preventivo__carta { padding: var(--pp-s6) var(--pp-s6) var(--pp-s5); }
}
.preventivo__voci {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.4;
}
.preventivo__testata {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: 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);
  text-align: left;
}
.preventivo__voci th,
.preventivo__voci td {
  padding: var(--pp-s3) 0;
  border-bottom: 1px dashed var(--pp-linea);
  vertical-align: baseline;
}
.preventivo__voci th {
  font-weight: 400;
  text-align: left;
  padding-right: var(--pp-s4);
}
.preventivo__voci td {
  text-align: right;
  white-space: nowrap;
  font: 600 1.0625rem/1.2 var(--pp-font-titoli);
  font-variant-numeric: tabular-nums;
}
.preventivo__voci tfoot th,
.preventivo__voci tfoot td {
  border-bottom: 0;
  border-top: 2px solid var(--pp-blu-notte);
  padding-top: var(--pp-s4);
  font-weight: 700;
}
.preventivo__voci tfoot th { font: 700 1.125rem/1.2 var(--pp-font-titoli); }
.preventivo__voci tfoot td { font-size: 1.375rem; }
.preventivo__mese {
  display: block;
  margin-top: var(--pp-s1);
  font: 600 0.875rem/1.2 var(--pp-font-testo);
  color: var(--pp-ardesia);
}

/* la riga che barra le cifre */
.barra {
  position: relative;
  text-decoration: none;
  white-space: nowrap;
}
.barra::after {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  top: 52%;
  height: 2px;
  background: var(--pp-terracotta);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 360ms ease-out;
  transition-delay: calc(var(--i, 0) * 110ms + 150ms);
}
tfoot .barra::after,
.preventivo__cifra-media .barra::after { height: 3px; }
.preventivo--barrato .barra::after,
html:not(.js) .barra::after { transform: scaleX(1); }

.preventivo__intermedio {
  margin-top: var(--pp-s5);
  padding: var(--pp-s4);
  background: var(--pp-bianco);
  font-size: var(--pp-testo-s);
  line-height: 1.5;
}
.preventivo__intermedio p { margin: 0; }
.preventivo__cifra-media {
  margin-bottom: var(--pp-s2) !important;
  font: 700 1.5rem/1.2 var(--pp-font-titoli);
  color: var(--pp-blu-notte);
}
.preventivo__cifra-media span { font-size: 1rem; font-weight: 600; color: var(--pp-ardesia); }

.preventivo__finale {
  padding: var(--pp-s5) var(--pp-s4) var(--pp-s6);
  background: var(--pp-bianco);
  border-top: var(--pp-parete) solid var(--pp-blu-campo);
  color: var(--pp-blu-notte);
}
@media (min-width: 600px) {
  .preventivo__finale { padding: var(--pp-s6); }
}
.preventivo__finale p { margin: 0; }
.preventivo__frase { font-size: 1.0625rem; line-height: 1.45; }
.preventivo__frase strong { font-weight: 700; color: var(--pp-blu-campo); white-space: nowrap; }
.preventivo__cifra {
  margin-top: var(--pp-s4) !important;
  font: 700 clamp(4.5rem, 3rem + 7vw, 7rem)/0.9 var(--pp-font-titoli);
  letter-spacing: -0.04em;
  color: var(--pp-blu-campo);
  white-space: nowrap;
}
.preventivo__unita {
  margin-top: var(--pp-s3) !important;
  font: 700 1.25rem/1.2 var(--pp-font-titoli);
}
.preventivo__durata {
  margin-top: var(--pp-s2) !important;
  font-size: var(--pp-testo-s);
  color: var(--pp-ardesia);
}

/* sequenza della scheda-preventivo (solo con html.movimento):
   le voci entrano una alla volta, poi si barrano; il totale conta e si barra;
   arriva il gradino da 2.000 € e si barra; infine 399 € con un leggero rimbalzo */
.movimento .preventivo__voci tbody tr { opacity: 0; transform: translateX(-12px); transition: opacity 400ms ease-out, transform 500ms ease-out; transition-delay: calc(var(--i, 0) * 90ms); }
.movimento .preventivo--barrato .preventivo__voci tbody tr { opacity: 1; transform: none; }
.movimento .preventivo__voci tbody .barra::after { transition-delay: calc(var(--i, 0) * 90ms + 900ms); }
.movimento .preventivo__totale .barra::after { transition-delay: 2000ms; }
.movimento .preventivo__intermedio { opacity: 0; transform: translateY(12px); transition: opacity 500ms ease-out 2300ms, transform 500ms ease-out 2300ms; }
.movimento .preventivo--barrato .preventivo__intermedio { opacity: 1; transform: none; }
.movimento .preventivo__intermedio .barra::after { transition-delay: 2800ms; }
.movimento .preventivo__finale { opacity: 0; transform: translateY(24px) scale(0.98); }
.movimento .preventivo--barrato .preventivo__finale { animation: rimbalzo 800ms cubic-bezier(.3, 1.5, .5, 1) 3200ms 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; }
}

/* --------------------------------------------------------------------------
   17. I posti di ogni mese: il pannello con i campi che si chiudono
   Lo costruisce js/main.js dalle costanti MESE_POSTI, POSTI_TOTALI e
   POSTI_RIMASTI. Senza JavaScript il pannello resta nascosto.
   -------------------------------------------------------------------------- */
.posti {
  display: grid;
  gap: var(--pp-s7);
  align-items: center;
}
@media (min-width: 900px) {
  .posti { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: var(--pp-s8); }
}
.pannello-posti {
  position: relative;
  padding: var(--pp-s5);
  background: var(--pp-blu-notte);
  border-top: var(--pp-parete) solid var(--pp-terracotta);
  box-shadow: 0 24px 60px rgba(4, 12, 26, 0.45), 0 0 0 1px rgba(169, 199, 232, 0.12);
}
@media (min-width: 600px) {
  .pannello-posti { padding: var(--pp-s6); }
}
.pannello-posti[hidden] { display: none; }
.pannello-posti__testa {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--pp-s4);
  flex-wrap: wrap;
}
.pannello-posti__mese {
  margin: 0;
  font: 600 var(--pp-etichetta)/1.4 var(--pp-font-testo);
  letter-spacing: var(--pp-spaziatura-etichetta);
  text-transform: uppercase;
  color: var(--pp-vetro);
}
.pannello-posti__contatore {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--pp-s2);
  color: var(--pp-bianco);
}
.pannello-posti__numero {
  font: 700 clamp(4rem, 3rem + 4vw, 5.5rem)/0.85 var(--pp-font-titoli);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--pp-bianco);
  display: inline-block;
}
.movimento .pannello-posti__numero { transition: transform 220ms ease-out, color 220ms ease-out; }
.pannello-posti--pronto .pannello-posti__numero { color: #FF8A63; }
.pannello-posti__su { font: 600 1.0625rem/1.2 var(--pp-font-testo); color: var(--pp-vetro); }
.pannello-posti__barra {
  position: relative;
  height: 10px;
  margin: var(--pp-s5) 0;
  background: rgba(169, 199, 232, 0.16);
  overflow: hidden;
}
.pannello-posti__barra span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, var(--pp-terracotta-scuro), var(--pp-terracotta));
}
.movimento .pannello-posti__barra span { transition: width 480ms cubic-bezier(.2, .8, .2, 1); }
.pannello-posti__campi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--pp-s2);
}
.posto {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pp-s2);
  padding: var(--pp-s3) 2px var(--pp-s2);
  background: rgba(169, 199, 232, 0.06);
  border: 1px solid rgba(169, 199, 232, 0.18);
  --pavimento: var(--pp-blu-campo);
  --linee: rgba(255, 255, 255, 0.85);
  --vetro: rgba(169, 199, 232, 0.22);
  --bordo-vetro: rgba(169, 199, 232, 0.7);
}
.posto .campo-iso { width: 100%; height: auto; }
.posto__stato {
  font: 600 0.75rem/1.2 var(--pp-font-testo);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pp-vetro);
}
@media (min-width: 600px) {
  .posto__stato { font-size: 0.8125rem; }
}
.posto {
  --pavimento: rgba(169, 199, 232, 0.12);
  --linee: rgba(169, 199, 232, 0.45);
  --vetro: rgba(169, 199, 232, 0.06);
  --bordo-vetro: rgba(169, 199, 232, 0.4);
}
.posto__giocatori { opacity: 0; }
.posto--occupato {
  background: rgba(28, 76, 138, 0.35);
  border-color: rgba(169, 199, 232, 0.25);
  --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);
}
.posto--occupato .posto__giocatori { opacity: 1; }
.movimento .posto__giocatori { transition: opacity 300ms ease-out 150ms; }
.posto--occupato .posto__stato { color: var(--pp-bianco); }
.movimento .posto { transition: background 300ms ease-out, border-color 300ms ease-out, transform 300ms ease-out; }
.movimento .posto--occupato { animation: chiusura-posto 420ms ease-out; }
@keyframes chiusura-posto {
  0% { transform: scale(1); }
  40% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.posto--libero {
  border-color: var(--pp-terracotta);
  background: rgba(191, 75, 38, 0.12);
}
.posto--libero .posto__stato { color: #FFB59C; }
.movimento .posto--libero { animation: pulsa-posto 1.8s ease-in-out infinite; }
@keyframes pulsa-posto {
  0%, 100% { box-shadow: 0 0 0 0 rgba(191, 75, 38, 0.55); }
  50% { box-shadow: 0 0 0 7px rgba(191, 75, 38, 0); }
}
@media (max-width: 599px) {
  .pannello-posti { padding: var(--pp-s5) var(--pp-s4); }
  .pannello-posti__campi { gap: 4px; }
  .posto { padding: var(--pp-s2) 1px 6px; gap: 6px; }
  .posto__stato { font-size: 0.5625rem; letter-spacing: 0; }
}
.pannello-posti__frase {
  margin: var(--pp-s5) 0 0;
  font: 700 1.375rem/1.25 var(--pp-font-titoli);
  color: var(--pp-bianco);
}

/* versione breve sotto il prezzo */
.posti-breve {
  display: flex;
  align-items: center;
  gap: var(--pp-s3);
  margin-top: var(--pp-s5) !important;
  padding: var(--pp-s3) var(--pp-s4);
  background: var(--pp-blu-notte);
  border-left: var(--pp-parete) solid var(--pp-terracotta);
}
.posti-breve[hidden] { display: none; }
.posti-breve__caselle { display: flex; gap: 5px; flex: none; }
.posti-breve__casella {
  width: 14px;
  height: 14px;
  border: 2px solid var(--pp-terracotta);
  background: transparent;
}
.posti-breve__casella--occupata { background: rgba(169, 199, 232, 0.35); border-color: rgba(169, 199, 232, 0.35); }
.movimento .posti-breve__casella:not(.posti-breve__casella--occupata) { animation: pulsa-posto 1.8s ease-in-out infinite; }
.posti-breve__frase { margin: 0; font: 700 1.0625rem/1.3 var(--pp-font-titoli); color: var(--pp-bianco); }

/* --------------------------------------------------------------------------
   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;
}
.posto .campo-iso { --pavimento: inherit; --linee: inherit; --vetro: inherit; --bordo-vetro: inherit; }
.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; }
}
.movimento .apertura__foto { animation: avvicina 9s ease-out both; }
@keyframes avvicina {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}

/* 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, .blocco-ora, .giorno { transition: transform 220ms ease-out, box-shadow 220ms ease-out; }
  .scheda:hover, .blocco-ora:hover, .giorno:hover { transform: translateY(-4px); box-shadow: var(--pp-ombra-2); }
}

/* --------------------------------------------------------------------------
   20. La zona: la mappa che si accende sul tuo centro
   -------------------------------------------------------------------------- */
.zona { display: grid; gap: var(--pp-s7); align-items: center; }
@media (min-width: 900px) {
  .zona { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: var(--pp-s8); }
}
.mappa-zona svg { width: 100%; max-width: 420px; height: auto; margin: 0 auto; display: block; box-shadow: 0 24px 50px rgba(14, 30, 54, 0.3); }
.mappa-zona__fondo { fill: var(--pp-blu-notte); }
.mappa-zona__strada { fill: none; stroke: rgba(169, 199, 232, 0.22); stroke-width: 8; stroke-linecap: round; }
.mappa-zona__strada--fine { stroke-width: 4; }
.mappa-zona__vicini circle { fill: #5B6577; stroke: var(--pp-blu-notte); stroke-width: 3; transition: opacity 700ms ease-out 1600ms; }
.mappa-zona__cerchio {
  fill: rgba(191, 75, 38, 0.12);
  stroke: var(--pp-terracotta);
  stroke-width: 3;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  transform: rotate(-90deg);
  transform-origin: 160px 160px;
}
.mappa-zona__centro { fill: var(--pp-terracotta); stroke: var(--pp-bianco); stroke-width: 4; }
.mappa-zona__etichetta { font: 700 15px var(--pp-font-titoli); fill: var(--pp-bianco); }
.mappa-zona__minuti { font: 600 13px var(--pp-font-testo); fill: #FFB59C; }
.mappa-zona .mappa-zona__vicini circle { opacity: 0.45; }
.movimento .mappa-zona .mappa-zona__vicini circle { opacity: 1; }
.movimento .mappa-zona__centro { fill: #5B6577; transition: fill 500ms ease-out 300ms; }
.movimento .mappa-zona__cerchio { stroke-dashoffset: 100; fill-opacity: 0; transition: stroke-dashoffset 1300ms ease-out 700ms, fill-opacity 600ms ease-out 1800ms; }
.movimento .mappa-zona__etichetta,
.movimento .mappa-zona__minuti { opacity: 0; transition: opacity 500ms ease-out 1800ms; }
.movimento .mappa-zona--viva .mappa-zona__centro { fill: var(--pp-terracotta); }
.movimento .mappa-zona--viva .mappa-zona__cerchio { stroke-dashoffset: 0; fill-opacity: 1; }
.movimento .mappa-zona--viva .mappa-zona__etichetta,
.movimento .mappa-zona--viva .mappa-zona__minuti { opacity: 1; }
.movimento .mappa-zona--viva .mappa-zona__vicini circle { opacity: 0.45; }

/* --------------------------------------------------------------------------
   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: blocco da compilare, ben visibile finché è vuoto */
.titolare { font-style: normal; }
.titolare p { margin: 0 0 var(--pp-s1); }
.da-compilare {
  display: inline-block;
  padding: 0 6px;
  border: 1px dashed currentColor;
  font-weight: 600;
  color: #FFB59C;
}
.privacy .da-compilare { color: var(--pp-terracotta-scuro); background: #FFF4EF; }

/* --------------------------------------------------------------------------
   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; }

/* Modulo contatti prima di Calendly */
.lead{position:fixed;inset:0;z-index:1000;background:rgba(14,30,54,.72);display:flex;align-items:flex-start;justify-content:center;padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));overflow-y:auto;overscroll-behavior:contain}
.lead__box{margin:auto 0;flex-shrink:0;position:relative;background:var(--pp-superficie);color:var(--pp-testo);border-radius:14px;max-width:560px;width:100%;padding:28px 24px;font-family:inherit}
.lead__chiudi{width:44px;height:44px;display:flex;align-items:center;justify-content:center;position:absolute;top:10px;right:14px;background:none;border:0;font-size:28px;line-height:1;color:var(--pp-testo-secondario);cursor:pointer}
.lead__titolo{padding-right:40px;font-size:1.5rem;font-weight:700;color:var(--pp-titoli);margin:0 0 6px}
.lead__testo{color:var(--pp-testo-secondario);margin:0 0 18px;font-size:.95rem}
.lead__griglia{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.lead__griglia{grid-template-columns:1fr}}
.lead__campo{display:flex;flex-direction:column;gap:4px;font-size:.85rem;font-weight:600}
.lead__campo input{font:inherit;font-weight:400;font-size:1rem;padding:10px 12px;border:1px solid var(--pp-bordo);border-radius:8px;background:var(--pp-sfondo);color:var(--pp-testo)}
.lead__campo input:focus{outline:2px solid var(--pp-link);outline-offset:1px}
.lead__campo input[aria-invalid=true]{border-color:var(--pp-terracotta)}
.lead__campo small{color:var(--pp-terracotta-scuro);font-weight:500}
.lead__errore{color:var(--pp-terracotta-scuro);margin:12px 0 0}
.lead__invia{margin-top:18px;width:100%;padding:14px;border:0;border-radius:10px;background:var(--pp-accento);color:var(--pp-bianco);font:inherit;font-weight:700;font-size:1rem;cursor:pointer}
.lead__invia:hover{background:var(--pp-terracotta-scuro)}
.lead__invia:disabled{opacity:.7}
.lead__nota{font-size:.78rem;color:var(--pp-testo-secondario);margin:10px 0 0;text-align:center}
.lead__nota a{color:var(--pp-link)}

/* Apertura rinnovata: foto a tutto schermo, testo più in alto, movimento */
.apertura { min-height: 100svh; display: flex; }
.apertura__foto, .apertura__velatura { height: 100% !important; }
.apertura__foto { object-position: 50% 30%; }
.apertura__velatura {
  background:
    linear-gradient(to bottom, rgba(14,30,54,.85) 0%, rgba(14,30,54,.35) 18%, rgba(14,30,54,.55) 45%, rgba(14,30,54,.92) 78%, var(--pp-blu-notte) 100%) !important;
}
.apertura::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 40% at 80% 20%, rgba(191,75,38,.28), transparent 70%);
  animation: apertura-luce 8s ease-in-out infinite alternate;
}
@keyframes apertura-luce { from { opacity: .5; transform: translateX(-4%); } to { opacity: 1; transform: translateX(4%); } }
.apertura__interno { display: flex; flex-direction: column; width: 100%; padding-bottom: var(--pp-s7); }
.apertura__testo { margin-top: clamp(48px, 14svh, 140px) !important; }
.apertura h1 { font-size: clamp(2.3rem, 6.5vw, 4.6rem); line-height: 1.02; letter-spacing: -0.02em; text-shadow: 0 4px 30px rgba(14,30,54,.5); }
.apertura .etichetta { display: inline-block; padding: 6px 12px; border: 1px solid var(--pp-linea-scuro); border-radius: 999px; background: rgba(14,30,54,.45); backdrop-filter: blur(6px); }
.apertura .bottone { box-shadow: 0 10px 30px -8px rgba(191,75,38,.7); animation: apertura-pulsa 2.6s ease-in-out 2s infinite; }
@keyframes apertura-pulsa { 0%,100% { box-shadow: 0 10px 30px -8px rgba(191,75,38,.7); } 50% { box-shadow: 0 10px 44px -2px rgba(191,75,38,.95); } }
.movimento .apertura__foto { animation: avvicina-hd 18s ease-out both; }
@keyframes avvicina-hd { from { transform: scale(1.15) translateY(-1%); } to { transform: scale(1.02); } }
@media (min-width: 900px) {
  .apertura { min-height: min(100vh, 920px); }
  .apertura__foto { object-position: 60% 40%; }
  .apertura__velatura { background: linear-gradient(100deg, rgba(14,30,54,.95) 0%, rgba(14,30,54,.75) 38%, rgba(14,30,54,.15) 70%, rgba(14,30,54,.35) 100%), linear-gradient(to top, rgba(14,30,54,.8), transparent 35%) !important; }
  .apertura__interno { justify-content: flex-start; }
  .apertura__testo { margin-top: clamp(40px, 9vh, 110px) !important; display: block !important; max-width: 640px; }
  .apertura__titolo h1 { margin-bottom: var(--pp-s5) !important; max-width: 14ch; }
}
@media (prefers-reduced-motion: reduce) { .apertura::after, .apertura .bottone { animation: none; } }
@media (min-width: 900px) {
  .apertura h1 { font-size: clamp(2.6rem, 4.4vw, 3.6rem) !important; max-width: 16ch !important; }
  .apertura__testo { margin-top: clamp(32px, 7vh, 90px) !important; }
}
@media (max-width: 599px) { .apertura .etichetta { font-size: .72rem; } }

.lead__honeypot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;pointer-events:none}