/* ==========================================================================
   MIE, Maldive Innovation Experience
   Foglio di stile unico. Mobile first, tema chiaro fisso.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design token
   -------------------------------------------------------------------------- */
:root {
  /* Palette dal logo */
  --blu-notte: #255584;
  --azzurro: #05A6CC;
  --bianco: #FFFFFF;
  --grigio-chiaro: #F9F9F9;
  --testo: #12263A;

  /* Varianti per l'accessibilità (contrasto WCAG AA 4.5:1).
     L'azzurro #05A6CC non passa come testo né su chiaro (2.7:1) né su blu
     notte (2.7:1), e il blu notte non passa come testo sull'azzurro (2.7:1).
     Per questo:
     - testo azzurro su fondo chiaro  -> --azzurro-scuro  (4.75:1 su #F9F9F9)
     - testo azzurro su blu notte     -> --azzurro-chiaro (4.69:1 su #255584)
     - testo su fondo azzurro         -> --testo #12263A  (5.38:1)          */
  --azzurro-scuro: #0378A0;
  --azzurro-chiaro: #7DD6EE;
  --blu-notte-scuro: #163656;            /* disclaimer e footer */
  --bianco-attenuato: #D3DDE6;           /* bianco 80% su blu notte, 5.6:1 */
  --testo-attenuato: #4A5A6B;            /* 6.7:1 su #F9F9F9 */
  --grigio-linea: #DCE2E8;
  --bordo-chiaro-30: rgb(255 255 255 / 0.3);
  --errore: #B42318;                     /* 6.2:1 su bianco */

  /* Tipografia */
  --font-titoli: "Outfit", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --font-testo: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-h1: clamp(2.5rem, 1.6rem + 4.2vw, 5rem);
  --fs-h2: clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-numero: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);   /* almeno il doppio del testo */
  --lh-titoli: 1.05;
  --lh-body: 1.6;
  --misura: 65ch;

  /* Spazi, raggi, ombre */
  --gutter: 1.25rem;
  --contenitore: 72rem;
  --sezione-y: clamp(4rem, 3rem + 5vw, 7.5rem);
  --raggio: 16px;
  --raggio-pill: 999px;
  --ombra: 0 1px 2px rgb(18 38 58 / 0.06), 0 8px 24px rgb(18 38 58 / 0.08);
  --header-h: 4.25rem;

  /* Movimento */
  --durata: 400ms;
  --easing: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 48em) {
  :root { --gutter: 2rem; --header-h: 5rem; }
}

/* --------------------------------------------------------------------------
   2. Reset e base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--grigio-chiaro);
  color: var(--testo);
  font-family: var(--font-testo);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-titoli);
  font-weight: 700;
  line-height: var(--lh-titoli);
  text-wrap: balance;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; }

p { margin: 0 0 1em; max-width: var(--misura); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; }
strong, b { font-weight: 500; }

a { color: inherit; text-underline-offset: 0.18em; }

button, input, select, textarea { font: inherit; color: inherit; }

/* Focus visibile ovunque, a prova di fondo chiaro e scuro */
:focus-visible {
  outline: 3px solid var(--azzurro);
  outline-offset: 3px;
  border-radius: 4px;
}
.sezione--azzurra :focus-visible,
.btn--azzurro:focus-visible { outline-color: var(--testo); }

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

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--bianco); color: var(--testo);
  border-radius: var(--raggio-pill);
  font-weight: 500; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.contenitore {
  width: 100%;
  max-width: calc(var(--contenitore) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sezione { padding-block: var(--sezione-y); }

.sezione--scura   { background: var(--blu-notte); color: var(--bianco); }
.sezione--chiara  { background: var(--grigio-chiaro); color: var(--testo); }
.sezione--bianca  { background: var(--bianco); color: var(--testo); }
.sezione--azzurra { background: var(--azzurro); color: var(--testo); }

.intestazione-sezione { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.intestazione-sezione > * + * { margin-top: 1rem; }

/* Occhiello: riprende la spaziatura del lettering del logo */
.occhiello {
  display: block;
  margin: 0 0 1rem;
  font-family: var(--font-titoli);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--azzurro-scuro);
}
.sezione--scura .occhiello,
.hero .occhiello { color: var(--azzurro-chiaro); }
.sezione--azzurra .occhiello { color: var(--testo); }

/* Numeri in evidenza: Outfit 700, almeno il doppio del testo intorno */
.numero {
  font-family: var(--font-titoli);
  font-weight: 700;
  font-size: var(--fs-numero);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.nota {
  font-size: var(--fs-small);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   4. Bottoni
   Testo sempre #12263A su azzurro (5.38:1): il bianco non passa.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.85rem 1.75rem;
  border: 2px solid transparent;
  border-radius: var(--raggio-pill);
  font-family: var(--font-titoli);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--easing), background-color 160ms, box-shadow 160ms;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; transform: none; }

.btn--azzurro { background: var(--azzurro); color: var(--testo); }
.btn--azzurro:hover { background: #0BB4DC; box-shadow: 0 6px 20px rgb(5 166 204 / 0.35); }

.btn--bianco { background: var(--bianco); color: var(--blu-notte); }
.btn--bianco:hover { box-shadow: 0 6px 20px rgb(18 38 58 / 0.2); }

.btn--grande { min-height: 3.5rem; padding: 1rem 2.25rem; font-size: 1.125rem; }
.btn--piccolo { min-height: 2.5rem; padding: 0.55rem 1.1rem; font-size: 0.9375rem; }

@media (max-width: 29.99em) {
  .btn--blocco-mobile { width: 100%; }
}

/* --------------------------------------------------------------------------
   5. Card
   -------------------------------------------------------------------------- */
.card {
  background: var(--bianco);
  border-radius: var(--raggio);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  box-shadow: var(--ombra);
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: var(--blu-notte);
  color: var(--bianco);
  transition: background-color 250ms, box-shadow 250ms;
}
.header.is-scrolled {
  background: rgb(37 85 132 / 0.92);
  box-shadow: 0 4px 24px rgb(18 38 58 / 0.25);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .header.is-scrolled {
    background: rgb(37 85 132 / 0.85);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    backdrop-filter: saturate(140%) blur(12px);
  }
}
.header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.header__logo { display: block; flex-shrink: 0; }
@media (max-width: 29.99em) {
  .header .btn--piccolo { min-height: 2.5rem; padding: 0.5rem 1rem; font-size: 0.875rem; }
}
.header__logo img { width: auto; height: 2.5rem; }
@media (min-width: 48em) { .header__logo img { height: 3.25rem; } }

/* Header ridotto delle pagine policy */
.header--ridotto { position: static; }

/* --------------------------------------------------------------------------
   7. Disclaimer e footer
   -------------------------------------------------------------------------- */
.disclaimer {
  background: var(--blu-notte-scuro);
  color: var(--bianco-attenuato);
  padding-block: 2.5rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.12);
}
.disclaimer p { max-width: 90ch; }

.footer {
  background: var(--blu-notte-scuro);
  color: var(--bianco-attenuato);
  padding-block: 2.5rem 3rem;
}
.footer__inner { display: grid; gap: 1.5rem; }
.footer__logo img { width: auto; height: 3.5rem; }
.footer__legale { font-size: var(--fs-small); }
.footer__legale a { color: var(--bianco); }
.footer__link {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  list-style: none; font-size: var(--fs-small);
}
.footer__link a, .footer__link button {
  color: var(--bianco);
  background: none; border: 0; padding: 0.25rem 0;
  text-decoration: underline; cursor: pointer; font-size: inherit;
}
@media (min-width: 48em) {
  .footer__inner { grid-template-columns: auto 1fr auto; align-items: center; gap: 2.5rem; }
}

/* --------------------------------------------------------------------------
   8. Placeholder immagini (da togliere quando arrivano le foto vere)
   -------------------------------------------------------------------------- */
.img-placeholder { background: #C9CED4; }

/* --------------------------------------------------------------------------
   9. Animazioni allo scroll
   La classe .js viene messa da main.js: senza JavaScript tutto è visibile.
   -------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--durata) var(--easing), transform var(--durata) var(--easing);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

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

/* ==========================================================================
   SEZIONI
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   Mobile: foto in alto a tutta larghezza che sfuma nel blu notte, testo sotto.
   Desktop: foto a tutto schermo, overlay blu notte 80% sul lato del testo.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--blu-notte);
  color: var(--bianco);
  overflow: hidden;
}
.hero__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-bottom: -38%;            /* il testo sale sopra la parte sfumata */
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
}
/* Sfumatura verso il basso, come le lettere del logo che si sciolgono nel blu */
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgb(37 85 132 / 0.15) 0%,
    rgb(37 85 132 / 0.55) 40%,
    rgb(37 85 132 / 0.8) 62%,
    var(--blu-notte) 100%);
}
.hero__contenuto {
  position: relative;
  padding-block: 0 clamp(3.5rem, 2rem + 5vw, 6rem);
}
.hero__titolo {
  max-width: 14ch;
  margin-bottom: 1.25rem;
}
.hero__sottotitolo {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  color: var(--bianco-attenuato);
  max-width: 46ch;
  margin-bottom: 2.25rem;
}

/* Prezzo early bird */
.prezzo {
  display: inline-grid;
  gap: 0.5rem;
  max-width: 100%;
  margin-bottom: 1.25rem;
  padding: 1.25rem 1.5rem 1.5rem;
  border-radius: var(--raggio);
  background: var(--azzurro);
  color: var(--testo);
  box-shadow: 0 12px 32px rgb(5 166 204 / 0.28);
}
.prezzo__badge {
  justify-self: start;
  padding: 0.3rem 0.75rem;
  border-radius: var(--raggio-pill);
  background: var(--testo);
  color: var(--bianco);
  font-family: var(--font-titoli);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.2;
}
.prezzo__riga {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.6rem;
  margin: 0;
  max-width: none;
}
.prezzo__da { flex-basis: 100%; font-family: var(--font-titoli); font-weight: 600; font-size: 1.0625rem; }
.prezzo__valore { font-family: var(--font-titoli); font-weight: 700; line-height: 1; white-space: nowrap; }
.prezzo__valuta { font-family: var(--font-titoli); font-weight: 700; font-size: 2rem; margin-right: 0.05em; }
.prezzo__valore .numero { font-size: clamp(3rem, 2.4rem + 2.6vw, 4rem); }
.prezzo__persona { font-size: 1rem; }
/* Fine early bird: niente badge */
.prezzo.is-pieno .prezzo__badge { display: none; }

.hero__posti {
  font-size: 0.9375rem;
  color: var(--bianco-attenuato);
  margin-bottom: 1.75rem;
}

@media (min-width: 48em) {
  .hero__media { aspect-ratio: 16 / 9; margin-bottom: -22%; }
}

@media (min-width: 64em) {
  .hero { min-height: min(100svh - var(--header-h), 56rem); display: flex; align-items: center; }
  .hero__media { position: absolute; inset: 0; aspect-ratio: auto; margin: 0; z-index: -1; }
  .hero__media::after {
    background:
      linear-gradient(90deg,
        rgb(37 85 132 / 0.92) 0%,
        rgb(37 85 132 / 0.8) 48%,
        rgb(37 85 132 / 0.25) 78%,
        rgb(37 85 132 / 0.1) 100%),
      linear-gradient(0deg, rgb(37 85 132 / 0.6) 0%, transparent 35%);
  }
  .hero__contenuto { padding-block: clamp(2.5rem, 6vh, 5rem); }
  .hero__contenuto > :not(.prezzo):not(.hero__azioni) { max-width: 44rem; }
  .hero__titolo { max-width: 17ch; font-size: min(var(--fs-h1), 9.5vh); }
  .hero__sottotitolo { margin-bottom: 1.75rem; }
  .prezzo { margin-bottom: 1rem; }
}

/* --------------------------------------------------------------------------
   Strip informativa
   -------------------------------------------------------------------------- */
.strip {
  background: var(--grigio-chiaro);
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
}
.strip__griglia {
  list-style: none;
  display: grid;
  gap: 0;
}
.strip__voce {
  padding-block: 1.75rem;
  border-top: 1px solid var(--grigio-linea);
}
.strip__voce:first-child { border-top: 0; padding-top: 0; }
.strip__voce:last-child { padding-bottom: 0; }
.strip__icona {
  width: 2.75rem; height: 2.75rem;
  padding: 0.6rem;
  margin-bottom: 1rem;
  border-radius: 12px;
  background: #E4F5FA;
  fill: none;
  stroke: var(--azzurro-scuro);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.strip__etichetta {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--azzurro-scuro);
}
.strip__lead {
  font-family: var(--font-titoli);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}
.strip__lead .numero { font-size: 3rem; vertical-align: -0.12em; margin-right: 0.1em; }
.strip__voce p:not(.strip__lead) { color: var(--testo-attenuato); }

@media (min-width: 48em) {
  .strip__griglia { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  .strip__voce,
  .strip__voce:first-child,
  .strip__voce:last-child { padding: 0 0 0 2.5rem; border-top: 0; border-left: 1px solid var(--grigio-linea); }
  .strip__voce:first-child { padding-left: 0; border-left: 0; }
}

/* Mini riga ospiti nella hero */
.hero__azioni {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.ospiti-mini {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  color: var(--bianco-attenuato);
  text-decoration: none;
  font-size: 0.875rem;
  line-height: 1.4;
}
.ospiti-mini:hover .ospiti-mini__testo { text-decoration: underline; }
.ospiti-mini__volti { display: flex; flex-shrink: 0; }
.ospiti-mini__volti img {
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  border: 2px solid var(--blu-notte);
  object-fit: cover;
  background: #C9CED4;
}
.ospiti-mini__volti img + img { margin-left: -0.7rem; }
@media (min-width: 48em) {
  .hero__azioni { flex-direction: row; align-items: center; gap: 2rem; }
  .ospiti-mini { max-width: 24rem; }
}

/* --------------------------------------------------------------------------
   Due colonne di testo
   -------------------------------------------------------------------------- */
.due-colonne > * + * { margin-top: 1em; }
@media (min-width: 48em) {
  .due-colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .due-colonne > * + * { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   Alimathà
   -------------------------------------------------------------------------- */
.alimatha__lead {
  font-family: var(--font-titoli);
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--bianco);
}
.alimatha .due-colonne p:not(.alimatha__lead) { color: var(--bianco-attenuato); }
.alimatha__testo { margin-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); }

/* Galleria a cinque foto: la camera compresa nella quota è la più grande.
   Mobile: colonna singola. Desktop: composizione asimmetrica su 12 colonne. */
.galleria {
  display: grid;
  gap: 1.25rem;
}
.galleria__foto {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.galleria__foto img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--raggio);
  background: var(--blu-notte-scuro);
}
.galleria__foto--camera img { aspect-ratio: 4 / 3; }
.galleria__didascalia {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--bianco);
}
.galleria__didascalia::before {
  content: "";
  flex-shrink: 0;
  width: 1.125rem; height: 1.125rem;
  margin-top: 0.1rem;
  border-radius: 50%;
  background: var(--azzurro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%2312263A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
}
.galleria__didascalia--avviso::before {
  background: var(--bianco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7v6M12 16.5v.5' fill='none' stroke='%23255584' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 0.9rem no-repeat;
}

@media (min-width: 64em) {
  .galleria {
    grid-template-columns: repeat(12, 1fr);
    gap: 1.25rem;
    align-items: stretch;
  }
  .galleria__foto--camera  { grid-column: 1 / 8;  grid-row: 1 / 3; }
  .galleria__foto--piscina { grid-column: 8 / 13; grid-row: 1; }
  .galleria__foto--sala    { grid-column: 8 / 13; grid-row: 2; }
  .galleria__foto--idro    { grid-column: 1 / 6;  grid-row: 3; }
  .galleria__foto--villa   { grid-column: 6 / 13; grid-row: 3; }
  /* la camera riempie l'altezza delle due foto a destra,
     l'idromassaggio quella delle water villa con la didascalia */
  .galleria__foto--camera img,
  .galleria__foto--idro img { flex: 1 1 0%; min-height: 0; aspect-ratio: auto; height: auto; }
  .galleria__foto--villa img { aspect-ratio: 2 / 1; }
}

/* --------------------------------------------------------------------------
   Fascia isola a tutta larghezza
   -------------------------------------------------------------------------- */
.isola {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--blu-notte);
  aspect-ratio: 16 / 9;
}
.isola__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* velo blu notte al 35%, più un alone leggermente più scuro dietro la riga
   per tenere il bianco leggibile anche sulla sabbia chiara */
.isola::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 45% at 50% 50%, rgb(22 54 86 / 0.45), transparent 70%),
    rgb(37 85 132 / 0.35);
}
.isola__riga {
  position: relative;
  z-index: 1;
  max-width: 22ch;
  margin: 0;
  padding-inline: var(--gutter);
  font-family: var(--font-titoli);
  font-size: clamp(1.75rem, 1rem + 3.6vw, 4.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-align: center;
  text-wrap: balance;
  color: var(--bianco);
  text-shadow: 0 2px 24px rgb(18 38 58 / 0.55);
}
@media (min-width: 48em) { .isola { aspect-ratio: 21 / 9; } }

/* --------------------------------------------------------------------------
   Cinque motivi
   -------------------------------------------------------------------------- */
.motivi {
  list-style: none;
  display: grid;
  gap: 1rem;
}
.motivo { position: relative; overflow: hidden; }
.motivo__numero {
  display: block;
  margin-bottom: 1.25rem;
  font-family: var(--font-titoli);
  font-weight: 700;
  font-size: 3rem;
  line-height: 0.9;
  letter-spacing: -0.02em;
  /* effetto del logo: la cifra sfuma verso il basso (decorativa) */
  background: linear-gradient(180deg, var(--azzurro) 20%, rgb(5 166 204 / 0.1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.motivo__titolo {
  margin-bottom: 0.625rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--azzurro-scuro);
}
.motivo p { color: var(--testo-attenuato); }
.motivo--evidenza { background: var(--blu-notte); color: var(--bianco); }
.motivo--evidenza .motivo__titolo { color: var(--azzurro-chiaro); }
.motivo--evidenza p { color: var(--bianco-attenuato); }
.motivo--evidenza .motivo__numero { background-image: linear-gradient(180deg, var(--bianco) 20%, rgb(255 255 255 / 0.1) 100%); }
.numero--inline { font-size: 1.5em; color: var(--bianco); vertical-align: -0.08em; }

@media (min-width: 40em) {
  .motivi { grid-template-columns: repeat(2, 1fr); }
  .motivo--evidenza { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
  .motivi { grid-template-columns: repeat(6, 1fr); gap: 1.25rem; }
  .motivo { grid-column: span 2; }
  .motivo:nth-child(4) { grid-column: span 3; }
  .motivo--evidenza { grid-column: span 3; }
}

/* --------------------------------------------------------------------------
   Ospiti: carosello su mobile, griglia a cinque colonne da desktop
   -------------------------------------------------------------------------- */
.ospiti__intestazione {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.carosello__controlli { display: flex; gap: 0.5rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.carosello__btn {
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  border: 1.5px solid var(--grigio-linea);
  background: var(--bianco);
  color: var(--blu-notte);
  cursor: pointer;
  transition: background-color 160ms, border-color 160ms;
}
.carosello__btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.carosello__btn:hover { border-color: var(--blu-notte); }
.carosello__btn[disabled] { opacity: 0.35; cursor: default; }

.carosello {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carosello::-webkit-scrollbar { display: none; }
.carosello:focus-visible { outline-offset: -3px; }
.carosello__lista {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78%, 20rem);
  gap: 1rem;
  padding-inline: var(--gutter);
  padding-bottom: 0.5rem;
  max-width: calc(var(--contenitore) + var(--gutter) * 2);
  margin-inline: auto;
}
.ospite { scroll-snap-align: start; }
/* Card quadrata che uniforma ritratti con sfondi e luci diversi */
.ospite__card {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--raggio);
  border: 1px solid rgb(5 166 204 / 0.2);
  background: var(--blu-notte);
  margin-bottom: 1rem;
}
.ospite__foto {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
.ospite__card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 40%;
  background: linear-gradient(0deg,
    rgb(37 85 132 / 0.96) 0%,
    rgb(37 85 132 / 0.9) 60%,
    rgb(37 85 132 / 0) 100%);
  pointer-events: none;
}
.ospite__etichetta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 0 1rem 0.9rem;
  color: var(--bianco);
}
.ospite__nome { font-size: 1.25rem; font-weight: 600; line-height: 1.15; margin-bottom: 0.2rem; }
.ospite__ruolo {
  margin: 0;
  font-family: var(--font-titoli);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--bianco);
}
.ospite__bio { font-size: 0.9375rem; line-height: 1.55; color: var(--testo-attenuato); }
@media (min-width: 64em) {
  .ospite__etichetta { padding: 0 0.875rem 0.75rem; }
  .ospite__nome { font-size: 1.0625rem; margin-bottom: 0.15rem; }
  .ospite__ruolo { font-size: 0.8125rem; line-height: 1.25; }
}

@media (min-width: 64em) {
  .carosello { overflow: visible; scroll-snap-type: none; }
  .carosello__lista { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); grid-auto-columns: auto; gap: 1.5rem; }
  .carosello__controlli { display: none; }
}

/* --------------------------------------------------------------------------
   Giornata tipo
   -------------------------------------------------------------------------- */
.giornata {
  list-style: none;
  display: grid;
  gap: 0;
  counter-reset: momento;
}
.giornata__momento {
  position: relative;
  padding: 0 0 2rem 2.25rem;
  border-left: 1px solid var(--bordo-chiaro-30);
  margin-left: 0.5rem;
}
.giornata__momento:last-child { padding-bottom: 0; border-left-color: transparent; }
.giornata__momento::before {
  content: "";
  position: absolute;
  left: -0.5rem; top: 0.35rem;
  width: 1rem; height: 1rem;
  border-radius: 50%;
  background: var(--azzurro);
  box-shadow: 0 0 0 5px rgb(5 166 204 / 0.2);
}
.giornata__quando {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.giornata__momento p { color: var(--bianco-attenuato); }
.giornata__nota { margin-top: 1.25rem; color: var(--bianco-attenuato); }
.giornata__foto { margin: 3rem 0 0; }
.giornata__foto img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--raggio);
  background: var(--blu-notte-scuro);
}
@media (min-width: 48em) { .giornata__foto img { aspect-ratio: 21 / 9; object-position: 50% 60%; } }

@media (min-width: 48em) {
  .giornata { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
  .giornata__momento,
  .giornata__momento:last-child {
    margin: 0;
    padding: 2.5rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--bordo-chiaro-30);
  }
  .giornata__momento::before { left: 0; top: -0.5rem; }
}

/* --------------------------------------------------------------------------
   CTA intermedia (fondo azzurro, testo #12263A)
   -------------------------------------------------------------------------- */
.cta { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.cta__inner { display: grid; gap: 2rem; }
.cta__titolo { font-size: clamp(2rem, 1.4rem + 2.8vw, 3.75rem); max-width: 18ch; margin-bottom: 1rem; }
.cta__riga { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); font-weight: 500; }
@media (min-width: 64em) {
  .cta__inner { grid-template-columns: 1fr auto; align-items: end; gap: 4rem; }
}

/* --------------------------------------------------------------------------
   Include / non include
   -------------------------------------------------------------------------- */
.quota { display: grid; gap: 1.25rem; }
.quota__colonna {
  border-radius: var(--raggio);
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
}
.quota__colonna--si { background: #EAF6FA; }
.quota__colonna--no { background: var(--grigio-chiaro); }
.quota__titolo { font-size: 1.75rem; margin-bottom: 1.25rem; }
.lista-check, .lista-trattino { list-style: none; display: grid; gap: 0.875rem; }
.lista-check li, .lista-trattino li { position: relative; padding-left: 2.25rem; line-height: 1.5; }
.lista-check li::before {
  content: "";
  position: absolute; left: 0; top: 0.05em;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  background: var(--azzurro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%2312263A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1rem no-repeat;
}
.lista-trattino li { color: var(--testo-attenuato); }
.lista-trattino li::before {
  content: "";
  position: absolute; left: 0.25rem; top: 0.75em;
  width: 1rem; height: 2px;
  border-radius: 2px;
  background: #9AA6B2;
}
@media (min-width: 48em) {
  .quota { grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
}

/* --------------------------------------------------------------------------
   Per chi è
   -------------------------------------------------------------------------- */
.perchi { list-style: none; display: grid; gap: 1rem; }
.perchi__card { border-top: 4px solid var(--azzurro); }
.perchi__titolo { font-size: 1.375rem; margin-bottom: 0.75rem; }
.perchi__card p { color: var(--testo-attenuato); }
@media (min-width: 48em) { .perchi { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { max-width: calc(52rem + var(--gutter) * 2); }
.faq__lista { border-top: 1px solid var(--grigio-linea); }
.faq__voce { border-bottom: 1px solid var(--grigio-linea); }
.faq__voce summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 1.25rem 3rem 1.25rem 0;
  font-family: var(--font-titoli);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
}
.faq__voce summary::-webkit-details-marker { display: none; }
.faq__voce summary::after {
  content: "";
  position: absolute; right: 0.25rem; top: 50%;
  width: 2rem; height: 2rem;
  margin-top: -1rem;
  border-radius: 50%;
  background: #EAF6FA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' fill='none' stroke='%230378A0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 1rem no-repeat;
  transition: transform 200ms var(--easing);
}
.faq__voce[open] summary::after { transform: rotate(45deg); }
.faq__voce p { padding: 0 0 1.5rem; color: var(--testo-attenuato); }
.faq__voce a { color: var(--azzurro-scuro); }

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */
.richiedi__inner { display: grid; gap: 2.5rem; }
.richiedi h2 { margin-bottom: 0.75rem; }
.richiedi__sotto { color: var(--bianco-attenuato); font-size: 1.125rem; margin-bottom: 1.75rem; }

.riepilogo {
  padding: 1.5rem;
  border-radius: var(--raggio);
  background: var(--azzurro);
  color: var(--testo);
  margin-bottom: 2rem;
}
.riepilogo p { margin: 0; }
.riepilogo__fascia { font-family: var(--font-titoli); font-weight: 600; }
.riepilogo__prezzo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.35rem; }
.riepilogo__da { flex-basis: 100%; font-size: 0.9375rem; }
.riepilogo__prezzo .numero { font-size: 3.25rem; }
.riepilogo__valore { font-family: var(--font-titoli); font-weight: 700; white-space: nowrap; }
.riepilogo__prezzo .prezzo__valuta { font-size: 1.75rem; }
.riepilogo__persona { margin-left: 0.25rem; }
.riepilogo__posti { margin-top: 0.5rem !important; font-size: 0.9375rem; }

.passi { list-style: none; display: grid; gap: 1rem; }
.passi li { display: flex; align-items: center; gap: 1rem; color: var(--bianco-attenuato); }
.passi__n {
  display: grid; place-items: center; flex-shrink: 0;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  border: 1.5px solid var(--bordo-chiaro-30);
  font-family: var(--font-titoli);
  font-weight: 700;
  color: var(--bianco);
}

.form-card { color: var(--testo); padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.form__griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1rem; }
.form__griglia > .campo { grid-column: 1 / -1; }
.form__griglia > .campo--mezzo { grid-column: auto; }
@media (min-width: 40em) {
  .form__griglia > .campo { grid-column: auto; }
  .form__griglia > .campo--pieno { grid-column: 1 / -1; }
}
.campo label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.9375rem;
  font-weight: 500;
}
.campo__obbl { color: var(--errore); }
.campo__facolt { font-weight: 400; color: var(--testo-attenuato); }
.campo input:not([type="checkbox"]),
.campo select,
.campo textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.8rem 1rem;
  border: 1.5px solid #B9C3CE;
  border-radius: 12px;
  background: var(--bianco);
  font-size: 1rem;   /* 16px: niente zoom automatico su iOS */
  line-height: 1.4;
  transition: border-color 150ms, box-shadow 150ms;
}
.campo textarea { min-height: 6rem; resize: vertical; }
.campo select {
  appearance: none;
  background: var(--bianco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2312263A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") right 1rem center / 1.1rem no-repeat;
  padding-right: 2.75rem;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--azzurro-scuro);
  box-shadow: 0 0 0 3px rgb(5 166 204 / 0.35);
}
.campo [aria-invalid="true"] { border-color: var(--errore) !important; }
.campo__errore {
  margin: 0.4rem 0 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--errore);
}
.campo--check { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.75rem; align-items: start; }
.campo--check input {
  width: 1.375rem; height: 1.375rem;
  margin: 0.15rem 0 0;
  accent-color: var(--azzurro-scuro);
}
.campo--check label { font-weight: 400; font-size: 0.9375rem; line-height: 1.5; margin: 0; }
.campo--check label a { color: var(--azzurro-scuro); font-weight: 500; }
.campo--check .campo__errore { grid-column: 2; }

.campo-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form__riga { margin: 1.75rem 0 1.25rem; font-size: 0.9375rem; color: var(--testo-attenuato); }
.form__invia { width: 100%; }
.form__invia.is-loading::after {
  content: "";
  width: 1rem; height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: gira 700ms linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }
.form__nota-obbl { margin-top: 0.875rem; font-size: 0.8125rem; color: var(--testo-attenuato); }
.form__noscript { padding: 1rem; border-radius: 12px; background: #FFF4E5; margin-bottom: 1.25rem; }

.form__esito--errore {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background: #FDECEA;
  color: #7A1A12;
  font-weight: 500;
}
.form__esito--ok { text-align: center; padding: 2rem 0.5rem; }
.form__esito--ok:focus { outline: none; }
.form__esito--ok svg { margin: 0 auto 1.25rem; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.form__esito--ok svg circle { fill: var(--azzurro); stroke: none; }
.form__esito--ok svg path { stroke: var(--testo); }
.form__esito-titolo {
  font-family: var(--font-titoli);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 auto 0.75rem !important;
}
.form__esito--ok p { margin-inline: auto; }

@media (min-width: 64em) {
  .richiedi__inner { grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; }
  .richiedi__intro { position: sticky; top: calc(var(--header-h) + 2rem); }
}

/* --------------------------------------------------------------------------
   Barra CTA fissa (solo mobile)
   -------------------------------------------------------------------------- */
.barra-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom));
  background: rgb(22 54 86 / 0.96);
  color: var(--bianco);
  box-shadow: 0 -6px 24px rgb(18 38 58 / 0.25);
  transform: translateY(110%);
  transition: transform 250ms var(--easing);
}
.barra-cta.is-visible { transform: none; }
@media (max-width: 63.99em) {
  .header .btn { transition: opacity 200ms, visibility 200ms; }
  .barra-attiva .header .btn { opacity: 0; visibility: hidden; }
}
.barra-cta__prezzo { margin: 0; font-size: 0.8125rem; line-height: 1.2; color: var(--bianco-attenuato); }
.barra-cta__prezzo .numero { display: block; font-size: 1.5rem; color: var(--bianco); }
@media (min-width: 64em) { .barra-cta { display: none !important; } }

/* --------------------------------------------------------------------------
   Banner cookie
   -------------------------------------------------------------------------- */
.cookie {
  position: fixed;
  left: 0.75rem; right: 0.75rem; bottom: 0.75rem;
  z-index: 60;
  max-width: 34rem;
  margin-left: auto;
  padding: 1.5rem;
  border-radius: var(--raggio);
  background: var(--bianco);
  color: var(--testo);
  box-shadow: 0 20px 60px rgb(18 38 58 / 0.3);
  max-height: calc(100svh - 1.5rem);
  overflow-y: auto;
}
.cookie__titolo { font-size: 1.25rem; margin-bottom: 0.5rem; }
.cookie p { font-size: 0.9375rem; line-height: 1.5; color: var(--testo-attenuato); }
.cookie a { color: var(--azzurro-scuro); }
.cookie__azioni { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.cookie__azioni .btn { flex: 1 1 auto; }
.btn--contorno { background: var(--bianco); color: var(--testo); border-color: #B9C3CE; }
.btn--contorno:hover { border-color: var(--testo); }
.btn--testo { background: none; color: var(--testo); text-decoration: underline; padding-inline: 0.75rem; }
.cookie__opzioni { display: grid; gap: 0.75rem; margin-top: 1rem; }
.cookie__opzione {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--grigio-linea);
  border-radius: 12px;
}
.cookie__opzione input { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--azzurro-scuro); }
.cookie__opzione label { font-weight: 500; }
.cookie__opzione small { grid-column: 2; font-size: 0.8125rem; color: var(--testo-attenuato); }
.js-solo { display: none; }
.js .js-solo { display: list-item; }
.js .js-solo--blocco { display: block; }

/* --------------------------------------------------------------------------
   Pagine policy
   -------------------------------------------------------------------------- */
.policy { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); background: var(--bianco); }
.policy__inner { max-width: calc(46rem + var(--gutter) * 2); }
.policy h1 { font-size: clamp(2.25rem, 1.8rem + 2vw, 3.5rem); margin-bottom: 0.75rem; }
.policy h2 { font-size: 1.5rem; margin: 2.5rem 0 0.75rem; }
.policy h3 { font-size: 1.125rem; margin: 1.5rem 0 0.5rem; }
.policy ul { padding-left: 1.25rem; margin-bottom: 1em; }
.policy li { margin-bottom: 0.4em; }
.policy a { color: var(--azzurro-scuro); }
.policy__agg { color: var(--testo-attenuato); font-size: 0.9375rem; }
.policy table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: 0.9375rem; }
.policy th, .policy td { text-align: left; vertical-align: top; padding: 0.75rem; border-bottom: 1px solid var(--grigio-linea); }
.policy th { font-weight: 500; background: var(--grigio-chiaro); }
.tabella-scroll { overflow-x: auto; }

/* ==========================================================================
   ANIMAZIONI
   Tutte dentro prefers-reduced-motion: no-preference e sotto .js:
   chi chiede meno movimento o non ha JavaScript vede la pagina ferma e
   completa. Si anima solo opacity, transform e clip-path (niente reflow).
   ========================================================================== */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-molla: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-tendina: cubic-bezier(0.77, 0, 0.18, 1);
}

/* Elementi statici che le animazioni usano anche da fermi */
.prezzo__badge::before {
  content: "";
  display: inline-block;
  width: 0.5em; height: 0.5em;
  margin-right: 0.5em;
  border-radius: 50%;
  background: var(--azzurro);
  vertical-align: 0.05em;
}
.intestazione-sezione .occhiello::before {
  content: "";
  display: inline-block;
  width: 1.75rem; height: 2px;
  margin-right: 0.75rem;
  border-radius: 2px;
  background: currentColor;
  vertical-align: 0.3em;
}
.btn--luce { position: relative; overflow: hidden; isolation: isolate; }

@media (prefers-reduced-motion: no-preference) {

  @keyframes entra   { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
  @keyframes kenburns { from { transform: scale(1.14); } to { transform: scale(1); } }
  @keyframes respiro {
    0%, 100% { box-shadow: 0 12px 32px rgb(5 166 204 / 0.28); }
    50%      { box-shadow: 0 14px 48px rgb(5 166 204 / 0.55), 0 0 0 4px rgb(5 166 204 / 0.18); }
  }
  @keyframes pulsa {
    0%   { box-shadow: 0 0 0 0 rgb(5 166 204 / 0.7); }
    70%  { box-shadow: 0 0 0 7px rgb(5 166 204 / 0); }
    100% { box-shadow: 0 0 0 0 rgb(5 166 204 / 0); }
  }
  @keyframes riflesso { 0%, 72% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(130%) skewX(-18deg); } }
  @keyframes pop {
    0%   { transform: scale(0.4) rotate(-12deg); opacity: 0; }
    60%  { transform: scale(1.12) rotate(4deg); opacity: 1; }
    100% { transform: none; opacity: 1; }
  }
  @keyframes disegna { to { stroke-dashoffset: 0; } }

  /* ---------- Reveal allo scroll, più deciso ---------- */
  .js .reveal {
    opacity: 0;
    transform: translateY(32px);
    transition:
      opacity 800ms var(--ease-out),
      transform 900ms var(--ease-out);
  }
  .js .reveal--sinistra { transform: translateX(-28px); }
  .js .reveal--zoom     { transform: translateY(24px) scale(0.94); }
  .js .reveal.is-visible { opacity: 1; transform: none; }

  /* Foto: tendina dal basso con zoom che rientra */
  /* Il ritaglio sta sull'immagine, non sul contenitore osservato:
     un elemento ritagliato del tutto non risulterebbe mai visibile. */
  .js .reveal--tendina { opacity: 1; transform: none; }
  .js .reveal--tendina img {
    clip-path: inset(100% 0 0 0 round var(--raggio));
    transform: scale(1.22);
    transition:
      clip-path 1100ms var(--ease-tendina),
      transform 1600ms var(--ease-out);
  }
  .js .reveal--tendina.is-visible img { clip-path: inset(0 0 0 0 round var(--raggio)); transform: none; }
  .js .reveal--tendina .galleria__didascalia {
    opacity: 0; transform: translateY(10px);
    transition: opacity 600ms 700ms, transform 600ms 700ms var(--ease-out);
  }
  .js .reveal--tendina.is-visible .galleria__didascalia { opacity: 1; transform: none; }

  /* Occhielli: la lineetta cresce prima del testo */
  .js .intestazione-sezione .occhiello::before {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 700ms 150ms var(--ease-out);
  }
  .js .intestazione-sezione.is-visible .occhiello::before { transform: none; }

  /* ---------- Hero: ingresso a cascata appena la pagina è pronta ---------- */
  .js .hero__media img { animation: kenburns 2600ms var(--ease-out) both; }
  .js .hero__media { will-change: transform; }
  .js .hero__contenuto > * { animation: entra 900ms var(--ease-out) both; }
  .js .hero__contenuto > :nth-child(1) { animation-delay: 120ms; }
  .js .hero__contenuto > :nth-child(2) { animation-delay: 220ms; }
  .js .hero__contenuto > :nth-child(3) { animation-delay: 360ms; }
  .js .hero__contenuto > :nth-child(4) { animation-delay: 460ms; }
  .js .hero__contenuto > :nth-child(5) { animation-delay: 760ms; }
  .js .hero__contenuto > :nth-child(6) { animation-delay: 860ms; }
  .js .prezzo { animation: respiro 3200ms ease-in-out 1800ms infinite; }
  .js .prezzo__badge::before { animation: pulsa 1800ms ease-out 1400ms infinite; }
  .js .ospiti-mini__volti img { animation: entra 700ms var(--ease-out) both; }
  .js .ospiti-mini__volti img:nth-child(1) { animation-delay: 1000ms; }
  .js .ospiti-mini__volti img:nth-child(2) { animation-delay: 1070ms; }
  .js .ospiti-mini__volti img:nth-child(3) { animation-delay: 1140ms; }
  .js .ospiti-mini__volti img:nth-child(4) { animation-delay: 1210ms; }
  .js .ospiti-mini__volti img:nth-child(5) { animation-delay: 1280ms; }

  /* ---------- Bottoni principali: riflesso che passa ogni tanto ---------- */
  .js .btn--luce::after {
    content: "";
    position: absolute;
    inset: -2px -30%;
    z-index: -1;
    background: linear-gradient(90deg, transparent 35%, rgb(255 255 255 / 0.6) 50%, transparent 65%);
    animation: riflesso 5000ms ease-in-out 2500ms infinite;
    pointer-events: none;
  }
  .btn:active { transform: scale(0.97); transition-duration: 80ms; }

  /* ---------- Strip: icone che saltano dentro ---------- */
  .js .strip__voce .strip__icona { opacity: 0; }
  .js .strip__voce.is-visible .strip__icona { animation: pop 700ms var(--ease-out) 200ms both; }

  /* ---------- Card: sollevamento al passaggio e al tocco ---------- */
  .motivo, .perchi__card, .ospite__card {
    transition: transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
  }
  .js .reveal.motivo, .js .reveal.perchi__card {
    transition:
      opacity 800ms var(--ease-out),
      transform 900ms var(--ease-out),
      box-shadow 400ms var(--ease-out);
  }
  @media (hover: hover) {
    .motivo.is-visible:hover, .perchi__card.is-visible:hover { transform: translateY(-6px); box-shadow: 0 2px 4px rgb(18 38 58 / 0.06), 0 18px 40px rgb(18 38 58 / 0.14); }
    .ospite__card:hover { transform: translateY(-4px); }
    .ospite__card .ospite__foto { transition: transform 800ms var(--ease-out); }
    .ospite__card:hover .ospite__foto { transform: scale(1.06); }
    .galleria__foto img { transition: transform 800ms var(--ease-out); }
  }
  .motivo:active, .perchi__card:active { transform: scale(0.985); }

  /* Numero delle card motivi: scende dall'alto */
  .js .motivo .motivo__numero { opacity: 0; transform: translateY(-14px); transition: opacity 600ms 250ms, transform 700ms 250ms var(--ease-out); }
  .js .motivo.is-visible .motivo__numero { opacity: 1; transform: none; }

  /* ---------- Carosello ospiti su mobile: la card in primo piano è piena ---------- */
  .js .carosello.is-attivo .ospite {
    transition: transform 250ms var(--ease-out), opacity 250ms;
    transform: scale(var(--sc, 1));
    opacity: var(--op, 1);
    transform-origin: 50% 40%;
  }

  /* ---------- Giornata: la linea si disegna, i punti saltano ---------- */
  .js .giornata__momento { border-color: transparent !important; }
  .js .giornata__momento::after {
    content: "";
    position: absolute;
    left: -1px; top: 0.85rem; bottom: -0.35rem;
    width: 2px;
    background: linear-gradient(180deg, var(--azzurro), rgb(5 166 204 / 0.25));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 1000ms 200ms var(--ease-out);
  }
  .js .giornata__momento:last-child::after { display: none; }
  .js .giornata__momento.is-visible::after { transform: none; }
  .js .giornata__momento::before { transform: scale(0); transition: transform 600ms var(--ease-molla); }
  .js .giornata__momento.is-visible::before { transform: none; }
  @media (min-width: 48em) {
    .js .giornata__momento::after {
      left: 1rem; right: -1.5rem; top: -1px; bottom: auto;
      width: auto; height: 2px;
      background: linear-gradient(90deg, var(--azzurro), rgb(5 166 204 / 0.25));
      transform: scaleX(0);
      transform-origin: left;
    }
  }

  /* ---------- Fascia isola: zoom e parallasse legati allo scroll ---------- */
  .js .isola__foto {
    transform: translateY(var(--ty, 0)) scale(var(--sc, 1.12));
    will-change: transform;
  }

  /* ---------- Include / non include: spunte che saltano ---------- */
  .js .lista-check li::before { transform: scale(0); transition: transform 500ms 150ms var(--ease-molla); }
  .js .lista-check li.is-visible::before { transform: none; }
  .js .lista-trattino li::before { transform: scaleX(0); transform-origin: left; transition: transform 500ms 150ms var(--ease-out); }
  .js .lista-trattino li.is-visible::before { transform: none; }

  /* ---------- FAQ: la risposta scivola dentro ---------- */
  .faq__voce[open] p { animation: entra 500ms var(--ease-out) both; }

  /* ---------- Form: passi in sequenza e conferma che si disegna ---------- */
  .js .passi li.is-visible .passi__n { animation: pop 600ms var(--ease-out) 150ms both; }
  .campo input:not([type="checkbox"]), .campo select, .campo textarea { transition: border-color 150ms, box-shadow 200ms, transform 200ms var(--ease-out); }
  .campo input:focus:not([type="checkbox"]), .campo select:focus, .campo textarea:focus { transform: translateY(-1px); }
  .form__esito--ok:not([hidden]) svg circle { animation: pop 600ms var(--ease-out) both; transform-origin: center; transform-box: fill-box; }
  .form__esito--ok:not([hidden]) svg path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: disegna 500ms 350ms var(--ease-out) forwards; }
  .form__esito--ok:not([hidden]) .form__esito-titolo,
  .form__esito--ok:not([hidden]) p { animation: entra 700ms var(--ease-out) 450ms both; }

  /* ---------- Header: il logo entra con la pagina ---------- */
  .js .header__logo { animation: entra 700ms var(--ease-out) both; }
}

/* --------------------------------------------------------------------------
   Ospite senza ritratto (Thomas De Gasperi, in attesa della foto):
   iniziali nel cerchio della hero e nella card del carosello
   -------------------------------------------------------------------------- */
.ospiti-mini__altri {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  margin-left: -0.7rem;
  border-radius: 50%;
  border: 2px solid var(--blu-notte);
  background: var(--azzurro);
  color: var(--testo);
  font-family: var(--font-titoli);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  line-height: 1;
}
.ospite__card--arrivo {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 38%, rgb(5 166 204 / 0.35), transparent 60%),
    var(--blu-notte);
}
.ospite__piu {
  font-family: var(--font-titoli);
  font-weight: 700;
  font-size: clamp(4rem, 3rem + 3vw, 5.5rem);
  letter-spacing: 0.02em;
  line-height: 1;
  margin-top: -18%;
  color: var(--azzurro-chiaro);
}