/* Homepage Ledea — stili della sola pagina iniziale.

   Caricato da let_enqueue_homepage() (functions.php) SOLO sui due template della
   homepage: e' l'unico CSS del tema che non serve a tutte le pagine, e tenerlo qui
   evita di far scaricare 10 KB di regole al resto del sito.

   Origine: "Ledea Homepage Variante C" di Claude Design, che consegna il markup con
   gli stili scritti inline (210 attributi style=). Qui sono diventati classi
   riusabili: le sei carte delle due pile erano sei copie dello stesso oggetto.

   PREFISSO: le-hp-*, non va-*. Le classi va-* sono il residuo dell'era Leira che
   CLAUDE.md segna come rinomina ancora da fare; scrivere un foglio nuovo con quel
   prefisso allungherebbe la lista invece di lasciarla ferma.

   COLORI: tutti dai token del design system (assets/css/ledea-ds/). Nessun
   esadecimale scritto a mano, tranne le trasparenze su fondo scuro, che una rampa
   non puo' esprimere e che sono derivate da teal-100/coral-400.

   TEMA CHIARO FISSO: i ruoli semantici del design system (--page, --heading,
   --body-text...) commutano sotto prefers-color-scheme: dark. Questa pagina no: e'
   una composizione voluta di fasce chiare e scure, e seguire il tema di sistema la
   ribalterebbe a meta'. Per questo .le-hp ridichiara quei ruoli al proprio interno,
   come faceva il file di Design. Le rampe (--teal-*, --coral-*) non commutano mai e
   si usano direttamente. */


/* ============================================================
   1. Radice e utilita' condivise
   ============================================================ */

.le-hp {
  /* ruoli bloccati sul chiaro: vedi la nota in testa al file */
  --le-hp-page: var(--paper);
  --le-hp-page-alt: #F1EFE8;
  --le-hp-card: var(--paper);
  --le-hp-heading: var(--teal-900);
  --le-hp-text: var(--gray-800);
  --le-hp-muted: var(--gray-600);
  --le-hp-faint: var(--gray-400);
  --le-hp-line: var(--gray-100);
  /* bordi e superfici sul fondo verde: rampa teal-100 a bassa opacita' */
  --le-hp-line-dark: rgba(159, 225, 203, 0.22);
  --le-hp-line-dark-strong: rgba(159, 225, 203, 0.35);
  --le-hp-fill-dark: rgba(159, 225, 203, 0.14);

  position: relative;
  overflow-x: clip;
  background: var(--le-hp-page);
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--le-hp-text);
}

/* Il tema inserisce la pagina dentro .va-container-sticky-top (un
   .container-fluid di Bootstrap). Due cose vanno tolte:
   - il min-height calcolato su navbar e footer, che qui lascerebbe una banda
     vuota in fondo, perche' le sezioni riempiono gia' da sole;
   - il padding orizzontale del container, che lascerebbe una striscia di carta
     ai lati delle fasce verdi: le sezioni di questa pagina sono a tutta
     larghezza e il rientro se lo danno da sole con .le-hp-inner. */
.va-container-sticky-top:has(.le-hp) {
  min-height: 0;
  padding-left: 0;
  padding-right: 0;
}

.le-hp-inner {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 36px);
}

.le-hp-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 50px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--le-hp-heading);
}

.le-hp-h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.12;
  color: var(--le-hp-heading);
}

.le-hp-h3--lg {
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.06;
}

.le-hp-p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--le-hp-muted);
}

.le-hp-note {
  margin: 2px 0 0;
  font: var(--text-caption);
  color: var(--le-hp-faint);
}

.le-hp-eyebrow {
  margin: 0 0 20px;
  font: var(--text-caption);
  letter-spacing: var(--letter-eyebrow);
  text-transform: uppercase;
  color: var(--teal-200);
}

/* Sulle sezioni scure i tre ruoli di testo cambiano insieme: dichiararli una volta
   qui evita di ripetere una regola per ogni elemento. */
.le-hp-on-dark .le-hp-h2,
.le-hp-on-dark .le-hp-h3 { color: var(--teal-50); }
.le-hp-on-dark .le-hp-p { color: var(--teal-100); }
.le-hp-on-dark .le-hp-note { color: var(--teal-200); }


/* ============================================================
   2. Bottoni
   ============================================================ */

.le-hp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 14px 26px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              transform 300ms var(--ease-standard);
}

/* Il pieno teal e' l'unica azione principale del blocco (regola del design
   system): in ogni gruppo di CTA di questa pagina ce n'e' uno solo. I colori
   arrivano dai ruoli, non dalla rampa, cosi' l'hover e' quello che il design
   system prescrive: va verso il BASSO (--primary-hover e' teal-800) tenendo
   l'etichetta chiara. Schiarire il fondo e scurire il testo, come veniva
   spontaneo, dava teal-900 su teal-400: 4,04:1, sotto la soglia AA per
   un'etichetta di 15px, che testo grande non e'. Cosi' resta sopra 10:1 in
   entrambi gli stati. */
.le-hp-btn--fill {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-text);
}
.le-hp-btn--fill:hover,
.le-hp-btn--fill:focus-visible {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--primary-text);
}
.le-hp-btn--fill:active {
  background: var(--primary-active);
  border-color: var(--primary-active);
}

/* Outline chiaro: solo sopra le fasce verdi. */
.le-hp-btn--outline {
  border-color: var(--teal-200);
  color: var(--teal-50);
}
.le-hp-btn--outline:hover,
.le-hp-btn--outline:focus-visible {
  background: var(--le-hp-fill-dark);
  border-color: var(--teal-100);
  color: var(--teal-50);
}

.le-hp-btn--sm {
  min-height: 44px;
  padding: 13px 24px;
}

.le-hp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
}


/* ============================================================
   3. La capsula che attraversa la pagina
   ------------------------------------------------------------
   Un elemento fisso che insegue tre attracchi (.le-hp-dock) lungo lo scroll,
   cambiando testo e colore: e' la prenotazione che passa da "orario" a "in agenda".
   Decorativa: aria-hidden nel markup, e nascosta del tutto quando il movimento e'
   ridotto, perche' ferma non racconterebbe niente.
   ============================================================ */

.le-hp-cap {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.le-hp-cap__body {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 20px;
  border: 1.5px solid var(--teal-800);
  border-radius: var(--radius-pill);
  background: var(--teal-800);
  color: var(--teal-50);
  box-shadow: 0 18px 40px -22px rgba(4, 52, 44, 0.6);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  white-space: nowrap;
  transition: background 320ms var(--ease-standard),
              color 320ms var(--ease-standard),
              border-color 320ms var(--ease-standard);
}

/* stato finale: la prenotazione e' confermata, la capsula si schiarisce */
.le-hp-cap__body.is-done {
  background: var(--teal-50);
  border-color: var(--teal-100);
  color: var(--teal-800);
}

.le-hp-cap__icon { display: inline-flex; flex: 0 0 auto; }
.le-hp-cap__body.is-done .le-hp-cap__icon--clock { display: none; }
.le-hp-cap__icon--check { display: none; }
.le-hp-cap__body.is-done .le-hp-cap__icon--check { display: inline-flex; }

.le-hp-cap__faces {
  position: relative;
  display: inline-block;
  height: 22px;
}
.le-hp-cap__face {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 300ms var(--ease-standard), transform 300ms var(--ease-standard);
}
.le-hp-cap__face.is-on {
  opacity: 1;
  transform: translateY(0);
}
/* la prima faccia tiene la larghezza del contenitore, che e' in position:absolute */
.le-hp-cap__face--first {
  position: static;
  display: block;
}

.le-hp-dock { height: 52px; }
.le-hp-dock--hero { width: 240px; margin-top: clamp(34px, 6vh, 68px); }
.le-hp-dock--inline { flex: 1 0 190px; height: 46px; }


/* ============================================================
   3-bis. La navbar del tema sopra questa pagina
   ------------------------------------------------------------
   .va-navbar-home esiste solo qui: header.php la mette sul template della
   homepage e sul 404, ma il 404 la barra non la stampa proprio. Quindi queste
   regole valgono per la sola homepage anche se il selettore non lo dice.
   ============================================================ */

/* Il colore di fondo della barra non si ridichiara piu' qui: da style.css la
   navbar e' gia' --teal-900 su tutto il sito (.va-navbar-dark), quindi sotto i
   992px non c'e' nulla da correggere. Resta solo l'azzeramento del margine, che
   e' una cosa di layout e riguarda solo questa pagina. */
.navbar.va-navbar-home {
  margin-bottom: 0;
}

/* Sopra i 992px style.css la rende trasparente con !important e la fa
   sovrapporre all'hero: qui si lascia fare, e la si ricolora solo quando lo
   scroll ha superato l'hero (classe messa da lat_homepage.js), perche' sopra le
   sezioni chiare il testo bianco sparirebbe. */
@media (min-width: 992px) {
  .navbar.va-navbar-home {
    background-color: transparent !important;
    transition: background-color 320ms var(--ease-standard);
  }
  .navbar.va-navbar-home.le-hp-nav--solid {
    background-color: rgba(4, 52, 44, 0.92) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}


/* ============================================================
   4. Hero
   ============================================================ */

.le-hp-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 92vh;
  padding: 108px 0 64px;
  background: var(--teal-900);
  color: var(--teal-50);
  overflow: hidden;
}

/* La navbar del tema e' sticky e trasparente sopra i 992px (.va-navbar-home in
   style.css, con margin-bottom:-56px): l'hero le passa sotto. Sotto quella soglia
   la navbar torna opaca e occupa il suo spazio, quindi qui non si risale. */
@media (min-width: 992px) {
  .le-hp-hero { padding-top: 132px; }
}

.le-hp-hero__spot {
  position: absolute;
  top: 0;
  left: 0;
  width: 860px;
  height: 860px;
  margin: -430px 0 0 -430px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(29, 158, 117, 0.34), rgba(29, 158, 117, 0) 62%);
  pointer-events: none;
  will-change: transform;
}

.le-hp-hero__waves {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.le-hp-hero__waves g { will-change: transform; }

.le-hp-title {
  margin: 0 0 30px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 11vw, 148px);
  line-height: 0.94;
  letter-spacing: -0.03em;
  color: var(--teal-50);
}
.le-hp-title span {
  display: block;
  will-change: transform;
}
.le-hp-title span:nth-child(2) { padding-left: 7%; }
.le-hp-title span:nth-child(3) { color: var(--teal-200); }

.le-hp-hero__cta { will-change: transform; }

.le-hp-hero__claim {
  margin: 8px 0 0;
  flex: 1 0 100%;
  max-width: 22em;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--teal-100);
}


/* ============================================================
   5. Sezioni e testate
   ============================================================ */

.le-hp-sec {
  position: relative;
  padding: clamp(60px, 9vw, 104px) 0 clamp(40px, 6vw, 72px);
  background: var(--le-hp-page);
}

.le-hp-sec--dark {
  padding-bottom: clamp(50px, 7vw, 84px);
  background: var(--teal-900);
  color: var(--teal-50);
  overflow: hidden;
}

.le-hp-sec__head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  max-width: 1280px;
  margin: 0 auto clamp(26px, 4vw, 44px);
  padding: 0 clamp(18px, 4vw, 36px);
}

/* L'onda del marchio come separatore di sezione: sottile e mai invadente, come
   chiede il brand book. Coral su entrambi i fondi — e' marchio, non azione. */
.le-hp-divider {
  flex: 0 0 100%;
  display: block;
  height: 14px;
  margin-bottom: 4px;
  color: var(--coral-400);
  overflow: visible;
}
.le-hp-on-dark .le-hp-divider { color: var(--coral-200); }

.le-hp-count {
  margin: 0;
  font: var(--text-caption);
  color: var(--le-hp-faint);
  font-variant-numeric: tabular-nums;
}
.le-hp-on-dark .le-hp-count { color: var(--teal-200); }

/* Blob decorativo della sezione strutture: due tracciati chiusi disegnati in JS. */
.le-hp-blob {
  position: absolute;
  right: -14%;
  top: 44%;
  margin-top: -310px;
  opacity: 0.45;
  pointer-events: none;
  will-change: transform;
}

.le-hp-vaccini {
  position: relative;
  max-width: 1180px;
  margin: clamp(34px, 5vw, 56px) auto 0;
  padding: 0 clamp(18px, 4vw, 36px);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--teal-100);
}


/* ============================================================
   6. La pila di carte
   ------------------------------------------------------------
   Ogni carta e' sticky con un top crescente (assegnato in JS, che conosce
   l'altezza reale della navbar): scorrendo si impilano una sull'altra, e quella
   sotto arretra e sbiadisce. Senza JavaScript restano sticky e leggibili: la
   pila si vede lo stesso, semplicemente senza arretramento.
   ============================================================ */

.le-hp-stack {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 36px);
}

.le-hp-card {
  position: sticky;
  top: 92px;
  margin-bottom: clamp(22px, 4vh, 44px);
  background: var(--le-hp-card);
  border: 1px solid var(--le-hp-line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  will-change: transform;
}
.le-hp-card:last-child { margin-bottom: 0; }

.le-hp-card--dark {
  background: var(--teal-800);
  border-color: var(--le-hp-line-dark);
  color: var(--teal-50);
}

/* La carta d'invito chiude ogni pila e inverte il fondo rispetto alla sezione:
   e' il segnale che la sequenza e' finita e che qui si agisce. */
.le-hp-card--invite {
  background: var(--teal-800);
  border-color: var(--teal-800);
  color: var(--teal-50);
}
/* La carta chiara dentro la sezione verde ("Registra una struttura"). Sta dentro
   .le-hp-on-dark, che porta i testi al chiaro per stare sul verde: qui il fondo
   torna carta, quindi i tre ruoli di testo vanno riportati indietro insieme al
   fondo. Senza questo blocco il titolo resta teal-50 su carta — 1,06:1, cioe'
   invisibile. La regola e' piu' specifica di quella di .le-hp-on-dark, che e'
   proprio il punto. */
.le-hp-card--invite-light {
  background: var(--paper);
  border-color: var(--le-hp-line);
  color: var(--le-hp-text);
}
.le-hp-on-dark .le-hp-card--invite-light .le-hp-h2,
.le-hp-on-dark .le-hp-card--invite-light .le-hp-h3 { color: var(--le-hp-heading); }
.le-hp-on-dark .le-hp-card--invite-light .le-hp-p { color: var(--le-hp-muted); }
.le-hp-on-dark .le-hp-card--invite-light .le-hp-note { color: var(--le-hp-faint); }

.le-hp-card__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: clamp(20px, 3vw, 44px);
  padding: clamp(22px, 3.2vw, 42px);
  align-items: center;
  min-height: clamp(330px, 52vh, 470px);
}
.le-hp-card__grid--short { min-height: clamp(300px, 46vh, 420px); }

.le-hp-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border: 1.5px solid var(--le-hp-line);
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--le-hp-faint);
  transition: background 420ms var(--ease-standard),
              color 420ms var(--ease-standard),
              border-color 420ms var(--ease-standard);
}
.le-hp-card--dark .le-hp-num {
  border-color: var(--le-hp-line-dark-strong);
  color: var(--teal-200);
}
/* acceso: il numero del passo raggiunto */
.le-hp-num.is-on,
.le-hp-card--dark .le-hp-num.is-on {
  background: var(--teal-400);
  border-color: var(--teal-400);
  color: var(--teal-900);
}

.le-hp-mark {
  display: block;
  margin-bottom: 18px;
}


/* ============================================================
   7. I mockup dentro le carte
   ============================================================ */

.le-hp-mock {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.le-hp-mock--wide { gap: 14px; }
.le-hp-mock--tight { gap: 12px; }

/* riga con bordo: la forma base di tutti i mockup */
.le-hp-row {
  padding: 14px 16px;
  border: 1.5px solid var(--le-hp-line);
  border-radius: var(--radius-lg);
  transition: opacity 420ms var(--ease-standard), transform 420ms var(--ease-standard);
}
.le-hp-card--dark .le-hp-row { border-color: var(--le-hp-line-dark); }

.le-hp-row--split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.le-hp-row--pad { padding: 16px; }

.le-hp-row__label {
  font-weight: 700;
  font-size: 15.5px;
  color: var(--le-hp-heading);
}
.le-hp-card--dark .le-hp-row__label { color: var(--teal-50); }

.le-hp-row__meta {
  font: var(--text-caption);
  color: var(--le-hp-muted);
}
.le-hp-card--dark .le-hp-row__meta { color: var(--teal-200); }

/* riga tratteggiata: l'azione "aggiungi", che nel prodotto vero e' un bottone */
.le-hp-row--dashed {
  display: flex;
  align-items: center;
  gap: 10px;
  border-style: dashed;
  border-color: rgba(159, 225, 203, 0.4);
  color: var(--teal-200);
  font-weight: 700;
  font-size: 15px;
}

/* chip selezionabile: la selezione si sposta di passo in passo (classe is-on da JS) */
.le-hp-chip {
  flex: 1;
  padding: 12px 10px;
  text-align: center;
  border: 1.5px solid var(--le-hp-line);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--le-hp-text);
  transition: background 380ms var(--ease-standard),
              border-color 380ms var(--ease-standard),
              color 380ms var(--ease-standard);
}
.le-hp-card--dark .le-hp-chip {
  border-color: var(--le-hp-line-dark);
  color: var(--teal-50);
}
.le-hp-chip--auto { flex: 0 0 auto; padding: 10px 16px; font-size: 14px; }
.le-hp-chip--narrow { padding: 12px 4px; }
.le-hp-chip.is-on,
.le-hp-card--dark .le-hp-chip.is-on {
  background: var(--teal-400);
  border-color: var(--teal-400);
  color: var(--teal-900);
}

/* la disdetta e' l'unico elemento coral della pagina fuori dal marchio: e' un
   distruttivo, e nel design system il coral fa esattamente quei due mestieri */
.le-hp-chip--danger { color: var(--danger); }

.le-hp-chips {
  display: flex;
  gap: 8px;
}
.le-hp-chips--grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.le-hp-chips--wrap { flex-wrap: wrap; }

/* giorni della ricorrenza: si accendono uno dopo l'altro */
.le-hp-day {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--le-hp-line-dark);
  border-radius: 50%;
  font-weight: 700;
  font-size: 14px;
  color: var(--teal-50);
  transition: background 380ms var(--ease-standard),
              border-color 380ms var(--ease-standard),
              color 380ms var(--ease-standard);
}
.le-hp-day.is-on {
  background: var(--teal-400);
  border-color: var(--teal-400);
  color: var(--teal-900);
}

/* calendario delle ferie */
.le-hp-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.le-hp-cell {
  aspect-ratio: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: rgba(159, 225, 203, 0.12);
  font-size: 13px;
  font-weight: 600;
  color: var(--teal-50);
  transition: background 380ms var(--ease-standard), color 380ms var(--ease-standard);
}
/* giorno chiuso: e' un'assenza, non un errore — coral tenue, non pieno */
.le-hp-cell.is-off {
  background: rgba(216, 90, 48, 0.22);
  color: var(--coral-200);
}

.le-hp-slot {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--le-hp-fill-dark);
  font-weight: 700;
  font-size: 14px;
  color: var(--teal-50);
}

/* interruttore dell'anticipo minimo */
.le-hp-switch {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: rgba(159, 225, 203, 0.25);
  transition: background 380ms var(--ease-standard);
}
.le-hp-switch.is-on { background: var(--teal-400); }
.le-hp-switch span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--teal-50);
  transition: transform 380ms var(--ease-standard);
}
.le-hp-switch.is-on span { transform: translateX(20px); }

/* striscia di conferma */
.le-hp-ok {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: var(--radius-lg);
  background: var(--teal-50);
  color: var(--teal-800);
  transition: opacity 420ms var(--ease-standard), transform 420ms var(--ease-standard);
}
.le-hp-ok span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15.5px;
}

.le-hp-strong {
  margin: 4px 0 0;
  font-weight: 700;
  font-size: 16px;
  color: var(--le-hp-heading);
}
.le-hp-swap {
  margin: 0;
  font-size: 15.5px;
  color: var(--le-hp-muted);
  transition: color 380ms var(--ease-standard);
}
.le-hp-swap.is-moved { color: var(--teal-800); }

/* Le comparse in sequenza (data-at) partono attenuate e si accendono al passo
   giusto. Lo stato di partenza e' attenuato, non invisibile: senza JavaScript la
   regola .is-on non arriva mai, e un opacity:0 lascerebbe la carta mezza vuota. */
.le-hp-step {
  transition: opacity 420ms var(--ease-standard), transform 420ms var(--ease-standard);
}
.le-hp--motion .le-hp-step {
  opacity: 0.14;
  transform: translate3d(0, 12px, 0);
}
.le-hp--motion .le-hp-step.is-on {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}


/* ============================================================
   8. Abbonamento e chiusura
   ============================================================ */

.le-hp-piani {
  padding: clamp(56px, 8vw, 88px) 0;
  background: var(--le-hp-page-alt);
}
.le-hp-piani__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 6vw, 66px);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 36px);
}
.le-hp-piani__a {
  align-self: flex-start;
  max-width: 22em;
  will-change: transform;
}
.le-hp-piani__b {
  align-self: flex-end;
  max-width: 20em;
  text-align: right;
  will-change: transform;
}
.le-hp-piani__eyebrow {
  margin: 0 0 10px;
  font: var(--text-caption);
  letter-spacing: var(--letter-eyebrow);
  text-transform: uppercase;
}
.le-hp-piani__lead {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--le-hp-heading);
}
.le-hp-piani__sub {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(19px, 2.2vw, 28px);
  line-height: 1.26;
  color: var(--le-hp-muted);
}
.le-hp-piani__wave { display: block; color: var(--coral-200); }

.le-hp-close {
  position: relative;
  padding: clamp(76px, 12vw, 130px) 0 clamp(66px, 9vw, 100px);
  background: var(--teal-900);
  color: var(--teal-50);
  overflow: hidden;
}
.le-hp-close__wave {
  position: absolute;
  left: 0;
  top: clamp(26px, 6vw, 60px);
  pointer-events: none;
}
.le-hp-close__inner { z-index: 2; }
.le-hp-close__h {
  margin: 0 0 26px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 8vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--teal-50);
  will-change: transform;
}


/* ============================================================
   9. Accessibilita' e movimento ridotto
   ------------------------------------------------------------
   Il brief lo mette fra i requisiti non negoziabili: con reduce la pagina resta
   completa e leggibile nello stato finale. Il JS si ferma da solo (non aggancia
   nessun listener) e queste regole azzerano quel che resta.
   ============================================================ */

.le-hp :focus-visible {
  outline: 3px solid var(--teal-400);
  outline-offset: 4px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .le-hp *,
  .le-hp *::before,
  .le-hp *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  /* le carte restano impilate ma non arretrano, e tutto e' gia' al passo finale */
  .le-hp-card { position: static; }
  .le-hp-cap { display: none; }
  .le-hp-dock { display: none; }
  .le-hp-hero { min-height: 0; }
}

/* Sotto i 900px gli effetti puntatore sono spenti dal JS e la parallasse e'
   ridotta. Qui si sistema quello che il movimento nascondeva: la pila di carte
   sticky su schermo corto lascerebbe le carte l'una sull'altra senza spazio. */
@media (max-width: 899px) {
  .le-hp-card__grid { min-height: 0; }
  .le-hp-piani__b { align-self: flex-start; text-align: left; }
  .le-hp-hero { min-height: 0; padding: 72px 0 56px; }
}