/* Casa Vacanze La Stellina — foglio di stile del sito pubblico.
 *
 * Ricalcato sul design scelto dal titolare: i valori qui sotto sono quelli
 * estratti dal file del design, non una mia interpretazione. Il design teneva
 * tutto negli stili in linea, elemento per elemento; qui diventano regole con
 * un nome, che è l'unico modo di poterle cambiare in un posto solo.
 *
 * Un solo file, nessuna libreria, nessuna chiamata a servizi esterni. I font
 * sono serviti dal nostro dominio, non da Google: nessun cookie di terze
 * parti, quindi nessun banner da mostrare.
 */

/* ── caratteri ────────────────────────────────────────────────────────────── */

/* Solo il sottoinsieme `latin`: verificato che copre tutti gli 83 caratteri
 * che il sito può stampare in italiano, inglese, tedesco e francese. */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/font/cormorant-garamond-300-latin.woff2") format("woff2");
  font-weight: 300 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/font/montserrat-300-latin.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/font/montserrat-500-latin.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --titoli: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --testo: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* I colori del design, presi uno per uno dal file. */
  --navy: #0D2B4F;          /* sezione calendario, pillole, titoli */
  --petrolio: #35657A;      /* numeri della striscia, collegamenti */
  --ardesia: #3E5568;       /* testo dei paragrafi */
  /* Il design usa #8A96A0 per occhielli ed etichette. Su avorio dà 2.73 di
   * contrasto, su azzurro 2.62: per un testo di 11.5px in maiuscolo — la
   * misura più faticosa che esista — è illeggibile al sole.
   *
   * Questo è lo stesso colore con la sola luminosità abbassata: identica
   * tinta (207°), identica saturazione (10%). Dà 4.79 / 4.60 / 5.00 e accanto
   * all'originale non si distingue. È l'unico punto in cui mi allontano dal
   * design, e lo faccio perché quelle scritte vanno lette. */
  --grigio: #616D77;
  --grigio-chiaro: #8A96A0;  /* l'originale, per i fondi e i filetti */
  --avorio: #F7F3ED;        /* fondo della pagina */
  --avorio-chiaro: #FBF8F3; /* fondo della testata, translucido */
  --sabbia: #E6DFD2;        /* filetti e bordi */
  --azzurro: #EAF0F1;       /* fondo delle sezioni alternate */
  --oro: #C8A25E;
  --chiaro: #FFFDF7;        /* titoli sul blu */
  --chiaro-spento: #EDF2F1;
  --azzurrino: #C2D3D6;
  --azzurrino-spento: #A8C0C6;
  --pallido: #DFE9EA;

  /* Il respiro laterale del design è 5vw dappertutto: niente contenitore a
   * larghezza fissa, le sezioni arrivano ai bordi e il testo si tiene largo
   * quanto serve con `max-width` sui paragrafi. */
  --lato: 5vw;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--avorio);
  color: var(--navy);
  font-family: var(--testo);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--petrolio); text-decoration: none; }
a:hover { color: var(--navy); }
::selection { background: #CFE3E1; }

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

.salta {
  position: absolute; left: -9999px; top: 8px;
  background: var(--avorio); color: var(--navy);
  padding: 8px 16px; border: 1px solid var(--sabbia); border-radius: 4px;
  z-index: 100;
}
.salta:focus { left: 16px; }

/* ── occhielli e titoli ──────────────────────────────────────────────────── */

/* L'occhiello sopra ogni sezione: 11.5px, molto spaziato, grigio. È il segno
 * che tiene insieme la pagina. */
.occhiello {
  margin: 0 0 18px;
  font-size: 11.5px;
  letter-spacing: 0.26em;
  overflow-wrap: anywhere;
  text-transform: uppercase;
  color: var(--grigio);
}

h1, h2, h3 { font-family: var(--titoli); font-weight: 300; }

h1 {
  margin: 0;
  font-size: clamp(46px, 7vw, 86px);
  letter-spacing: -0.01em;
  line-height: 1.06;
}

h2 {
  margin: 0 0 26px;
  font-size: clamp(38px, 4.8vw, 58px);
  line-height: 1.1;
}

/* I titoli di seconda fila stanno più bassi: 50px invece di 58. */
h2.minore { font-size: clamp(32px, 3.8vw, 50px); }

h3 { margin: 0 0 10px; font-size: 26px; font-weight: 400; line-height: 1.25; }

p { margin: 0 0 20px; }
p:last-child { margin-bottom: 0; }
.paragrafo { color: var(--ardesia); max-width: 56ch; text-wrap: pretty; }

/* ── testata ─────────────────────────────────────────────────────────────── */

.testata {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px var(--lato);
  background: rgba(251, 248, 243, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sabbia);
}

.marchio { display: flex; align-items: center; flex: 0 0 auto; min-width: 0; }
/* 54px come nel design. Il lockup e' orizzontale (3,35:1): a
 * quell'altezza la riga «PORTO CESAREO» resta leggibile, cosa che
 * col lockup verticale schiacciato non succedeva. */
.marchio img { height: 54px; width: auto; display: block; }
@media (max-width: 40rem) { .marchio img { height: 42px; } }

/* `flex: 0 0 auto` era l'errore: la navigazione non si restringeva mai, e
 * sotto i 1100px logo + menu + pillola sforavano di quaranta pixel — la barra
 * di scorrimento orizzontale che si vedeva in fondo alla pagina.
 *
 * Ora si restringe e va a capo. La misura si prende dal contenuto, non da un
 * punto di rottura scelto a occhio: la barra si dispone su due righe quando
 * serve, a qualunque larghezza succeda. */
.navigazione {
  display: flex; align-items: center; justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px clamp(12px, 1.6vw, 26px);
  font-size: 13.5px; letter-spacing: 0.04em;
  flex: 1 1 auto;
  min-width: 0;
}

/* Il menu è in tondo minuscolo, non in maiuscoletto: è la scelta del design e
 * dà alla barra un tono da casa e non da catena alberghiera. */
.menu { display: flex; align-items: center; flex-wrap: wrap;
        gap: 6px clamp(12px, 1.6vw, 26px);
        list-style: none; margin: 0; padding: 0; }
/* I collegamenti erano alti 16 pixel: sul telefono si sbaglia bersaglio. La
 * spaziatura interna porta l'area sensibile a 44 senza spostare di un pixel
 * quello che si vede -- il margine negativo la riassorbe. */
.menu a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding-block: 12px; margin-block: -12px;
  color: var(--ardesia); white-space: nowrap;
}
.menu a:hover { color: var(--navy); }

.lingue { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.lingue a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; min-height: 44px;
  padding: 5px 9px;
  border-radius: 4px;
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  background: transparent; color: var(--grigio);
}
.lingue a:hover { color: var(--navy); }
.lingue [aria-current="true"] { background: var(--navy); color: var(--avorio); }

/* La pillola in fondo alla barra. Nel design dice «Prenota»; qui dice quello
 * che fa davvero, cioè aprire WhatsApp — non esiste nessuna prenotazione
 * online, e un pulsante che ne promette una fa chiudere la pagina. */
.pillola {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--avorio);
  font-size: 13px; letter-spacing: 0.06em;
  white-space: nowrap;
}
.pillola:hover { background: #1B3A56; color: var(--avorio); }

.testata { flex-wrap: wrap; }

/* Sotto i 52rem la barra si spezza: marchio sopra, navigazione sotto. Sopra
 * quella misura sta su una riga sola perche' ci sta, non perche' gliel'ho
 * imposto. */
@media (max-width: 52rem) {
  .navigazione { flex: 1 1 100%; justify-content: flex-start; }
}

/* Sotto i 26rem anche la pillola va a capo da sola: a 320px accanto alle
 * quattro lingue non ci starebbe, e finirebbe fuori dallo schermo. */
@media (max-width: 26rem) {
  .pillola { flex: 1 1 100%; text-align: center; }
}

/* ── apertura ────────────────────────────────────────────────────────────── */

.apertura {
  position: relative;
  height: min(84vh, 720px);
  min-height: 460px;
  display: flex; align-items: flex-end;
  padding: 0;
  background: var(--navy);      /* finché non c'è la foto */
  overflow: hidden;
}

/* La foto sta sotto a tutto: velatura sopra (1), testo sopra ancora (2).
 * `object-fit: cover` fa quello che faceva `background-size: cover`. */
.apertura__foto {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

/* La velatura sopra la foto: forte in basso dove sta il testo, quasi
 * trasparente in alto.
 *
 * I valori NON sono più quelli del design, e la ragione è misurata. Il disegno
 * era stato fatto su una fotografia scura; la nostra è una spiaggia a
 * mezzogiorno, con la sabbia bianca proprio dove finisce il titolo. Misurando
 * il contrasto fra il testo chiaro e i pixel peggiori sotto di esso veniva
 * **1,44** — la soglia per un testo piccolo è 4,5, e sotto il 2 non si legge:
 * si indovina. Con questi valori viene 6,4 sul titolo e 6,7 sul paragrafo.
 *
 * Il velo cresce solo nella metà bassa, dove il testo c'è davvero; sopra la
 * fotografia resta quella che è. Il secondo strato scurisce il lato sinistro,
 * che è dove il testo comincia: così il mare a destra non si spegne. */
.apertura::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(
      to top,
      rgba(11, 38, 47, 0.88) 0%,
      rgba(11, 38, 47, 0.72) 50%,
      rgba(11, 38, 47, 0.26) 78%,
      rgba(11, 38, 47, 0.16) 100%
    ),
    linear-gradient(
      to right,
      rgba(11, 38, 47, 0.44) 0%,
      rgba(11, 38, 47, 0) 62%
    );
}

.apertura__testo {
  position: relative; z-index: 2;
  padding: 0 var(--lato) 8vh;
  max-width: 900px;
}
.apertura .occhiello { color: var(--pallido); letter-spacing: 0.28em; margin-bottom: 14px; }
.apertura h1 { color: var(--chiaro); }
.apertura p {
  margin: 18px 0 0; max-width: 520px;
  font-size: clamp(15px, 1.5vw, 18px); line-height: 1.65;
  color: var(--chiaro-spento); text-wrap: pretty;
}

/* ── la striscia dei numeri ──────────────────────────────────────────────── */

/* Il distacco di un pixel lascia vedere il fondo della striscia: è così che si
 * ottengono i filetti fra le colonne senza disegnarli. */
.striscia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--sabbia);
  border-bottom: 1px solid var(--sabbia);
  list-style: none; margin: 0; padding: 0;
}
.striscia li {
  background: var(--avorio);
  padding: 26px var(--lato);
  display: flex; flex-direction: column; gap: 6px;
}
.striscia b {
  font-family: var(--titoli); font-weight: 300;
  font-size: 34px; line-height: 1;
  color: var(--petrolio);
  font-variant-numeric: tabular-nums;
}
.striscia span {
  font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--grigio);
}

/* ── sezioni ─────────────────────────────────────────────────────────────── */

.sezione { padding: clamp(70px, 9vw, 120px) var(--lato); }
.sezione--ampia { padding-block: clamp(70px, 10vw, 130px); }
.sezione--alt { background: var(--azzurro); }
.sezione--scura { background: var(--navy); color: var(--chiaro-spento); }
.sezione--scura h2, .sezione--scura h3 { color: var(--chiaro); }
.sezione--scura .occhiello { color: var(--azzurrino); }
.sezione--scura .paragrafo { color: var(--azzurrino); }

/* `minmax(320px, …)` senza il `min()` pretende 320 pixel anche quando lo
 * schermo, tolti i margini, ne ha 288: a 320px la pagina sforava di 32. Il
 * `min(100%, 320px)` dice «320, ma mai piu' di quanto ce n'e'». */
.due-colonne {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(36px, 6vw, 80px);
  align-items: start;
}

/* ── pastiglie delle dotazioni ───────────────────────────────────────────── */

/* Nel design le dotazioni sono pastiglie in fila, non un elenco puntato. */
.pastiglie { display: flex; flex-wrap: wrap; gap: 9px; margin: 34px 0 0; padding: 0; list-style: none; }
.pastiglie li {
  padding: 7px 14px;
  border: 1px solid var(--sabbia);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ardesia);
  background: var(--avorio-chiaro);
}
.sezione--alt .pastiglie li { background: #FFF; border-color: #D7E2E2; }

/* ── azioni ──────────────────────────────────────────────────────────────── */

/* I pulsanti vanno a coppie e devono avere la stessa larghezza: due misure
 * diverse affiancate sono la prima cosa che l'occhio nota storta.
 *
 * Il modo: colonne uguali (`1fr`) dentro un contenitore largo `max-content`.
 * Le colonne prendono tutte la misura della più larga, e il contenitore si
 * ferma lì invece di allargarsi a tutta la riga. Nessun numero fissato a
 * mano — che sarebbe sbagliato appena si cambia lingua, visto che «Chiamaci»
 * in tedesco diventa «Rufen Sie uns an». */
.azioni {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 12px;
  margin-top: 30px;
  width: max-content;
  max-width: 100%;
}

/* Sotto i 34rem la coppia più larga non ci sta in riga: si impilano, sempre
 * uguali fra loro ma a tutta larghezza. */
@media (max-width: 34rem) {
  .azioni { grid-auto-flow: row; width: 100%; }
}

.azione {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px;
  padding: 12px 26px;
  border-radius: 999px;
  background: var(--oro);
  color: var(--navy);
  border: 1px solid var(--oro);
  font-size: 13px; letter-spacing: 0.06em;
}
.azione:hover { background: #B78F4C; border-color: #B78F4C; color: var(--navy); }

.azione--contorno { background: transparent; border-color: rgba(255,255,255,.45); color: var(--chiaro); }
.azione--contorno:hover { background: rgba(255,255,255,.12); color: var(--chiaro); border-color: rgba(255,255,255,.6); }

.sezione .azione--contorno { border-color: var(--sabbia); color: var(--ardesia); background: transparent; }
.sezione .azione--contorno:hover { background: var(--navy); border-color: var(--navy); color: var(--avorio); }

/* ── calendario ──────────────────────────────────────────────────────────── */

.calendario__testa {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 40px;
}

.legenda {
  display: flex; align-items: center; gap: 18px;
  font-size: 13px; color: var(--azzurrino);
  margin: 0; list-style: none; padding: 0;
}
.legenda li { display: inline-flex; align-items: center; gap: 8px; }
.legenda i { width: 14px; height: 14px; border-radius: 2px; display: inline-block; }
.legenda .libero { background: rgba(127, 194, 182, 0.16);
                   box-shadow: inset 0 0 0 1px rgba(127, 194, 182, 0.35); }
.legenda .occupato { background: #3B5C74; }

.calendario {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(24px, 4vw, 54px);
}

.mese__nome {
  font-family: var(--titoli); font-size: 22px; font-weight: 300;
  margin: 0 0 16px; color: var(--chiaro);
}

/* Le misure sono quelle del design, prese dal file: casella alta 34 pixel a
 * larghezza libera — NON quadrata, che era l'errore della prima versione e
 * faceva diventare i giorni dei riquadri enormi. */
.griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }

.griglia__intestazione {
  display: flex; align-items: center; justify-content: center;
  height: 24px;
  font-size: 10.5px; letter-spacing: 0.1em;
  color: #86999F;
  border-radius: 3px;
}

.giorno {
  display: flex; align-items: center; justify-content: center;
  height: 34px;
  font-size: 12.5px;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
  color: #93A6AF;
}
.giorno--vuoto { visibility: hidden; }

/* Libero: un velo verdemare con un anello sottile dentro il bordo. */
.giorno--libero {
  background: rgba(127, 194, 182, 0.16);
  color: #EAF2F2;
  box-shadow: inset 0 0 0 1px rgba(127, 194, 182, 0.35);
}

/* Occupato: pieno e barrato. Il barrato è del design ed è giusto: dice
 * «questa notte non c'è» senza doverci pensare. */
.giorno--occupato {
  background: #3B5C74;
  color: #93A6AF;
  text-decoration: line-through;
}

/* Fuori stagione non è «occupato»: è che non si affitta. Nessun riempimento,
 * nessun barrato — se no sembra che l'anno sia tutto pieno. */
.giorno--fuori { color: rgba(147, 166, 175, .45); }

/* Il sabato appartiene a due settimane: la mattina a chi parte, il pomeriggio
 * a chi arriva. Si taglia in diagonale e ogni triangolo prende il colore della
 * sua settimana — la stessa convenzione del calendario del gestionale.
 *
 * La diagonale si vede dal solo cambio di colore, senza nessuna riga in mezzo:
 * scelta del titolare. Quando i due triangoli hanno lo stesso colore la
 * casella si legge come un giorno normale, ed è giusto così — se la settimana
 * prima e quella dopo sono entrambe libere, quel sabato è libero e basta. */
.giorno--cambio {
  --uscita: transparent;
  --entrata: transparent;
  background: linear-gradient(135deg,
    var(--uscita) 0 50%, var(--entrata) 50% 100%);
  color: #EAF2F2;
  text-decoration: none;   /* metà giornata è libera: il barrato ingannerebbe */
}
.giorno--esce-libero    { --uscita: rgba(127, 194, 182, 0.16); }
.giorno--esce-occupato  { --uscita: #3B5C74; }
.giorno--esce-fuori     { --uscita: transparent; }
.giorno--entra-libero   { --entrata: rgba(127, 194, 182, 0.16); }
.giorno--entra-occupato { --entrata: #3B5C74; }
.giorno--entra-fuori    { --entrata: transparent; }

.nota { margin: 36px 0 0; font-size: 13.5px; color: var(--azzurrino-spento); }

/* ── le settimane su cui si clicca ──────────────────────────────────────── */

/* Stanno DENTRO la sezione blu, sotto il calendario, non in una fascia a
 * parte: prima erano 800 pixel in più che ripetevano il titolo e allungavano
 * la pagina senza dire niente di nuovo.
 *
 * Il calendario si guarda, queste si premono. Sono l'unico percorso verso un
 * contatto — senza prezzi pubblicati non ce ne sono altri — quindi devono
 * stare vicino a quello che si è appena letto. */
.settimane {
  list-style: none; padding: 0;
  margin: clamp(36px, 5vw, 56px) 0 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}

.settimana {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  border: 1px solid rgba(127, 194, 182, 0.35);
  background: rgba(127, 194, 182, 0.10);
  color: #EAF2F2;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.settimana--libera:hover {
  background: var(--oro);
  border-color: var(--oro);
  color: var(--navy);
  transform: translateY(-1px);
}
.settimana--libera::after { content: "→"; opacity: .7; }

/* Le occupate restano in fila, spente e senza bordo pieno: si vede a colpo
 * d'occhio quanto è pieno il periodo, che è l'informazione che serve a chi
 * sta decidendo. */
.settimana--occupata {
  background: transparent;
  border-color: rgba(255,255,255,.12);
  border-style: dashed;
  color: #7C8FA0;
  text-decoration: line-through;
}

.vuoto {
  padding: 60px 20px; text-align: center; color: var(--azzurrino-spento);
  border: 1px dashed rgba(255,255,255,.16); border-radius: 8px;
}

/* ── galleria ────────────────────────────────────────────────────────────── */

.galleria { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.galleria figure { margin: 0; }
.galleria img { border-radius: 3px; width: 100%; object-fit: cover;
                height: clamp(160px, 18vw, 230px); }
.galleria figure:first-child { grid-column: span 2; }

/* La fascia intera: le foto prendono tutta la larghezza in tre colonne, e
 * nessuna si allarga più delle altre — qui contano tutte uguale. */
.galleria--ampia {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  margin-top: 34px;
}
.galleria--ampia figure:first-child { grid-column: auto; }
.galleria--ampia img { height: clamp(240px, 24vw, 340px); }
.galleria figure:first-child img { height: clamp(220px, 26vw, 320px); }

/* ── recapiti ────────────────────────────────────────────────────────────── */

.recapiti { margin: 30px 0 0; }
.recapiti dt {
  font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--grigio); margin-top: 22px;
}
.recapiti dd { margin: 4px 0 0; font-size: 17px; }
.alias { display: block; margin-top: 6px; font-size: 13.5px; color: var(--grigio); }
.alias strong { color: var(--ardesia); font-weight: 500; }

/* ── piede ───────────────────────────────────────────────────────────────── */

.piede {
  padding: 48px var(--lato) 40px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
  border-top: 1px solid var(--sabbia);
  font-size: 13.5px; color: var(--ardesia);
}
.piede img { height: 46px; width: auto; margin-bottom: 14px; }
.piede p { margin: 0 0 6px; }
.piede strong { color: var(--navy); font-weight: 500; }
.piede .codice { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 1ms !important; animation-duration: 1ms !important;
  }
}

/* ── l'intro ─────────────────────────────────────────────────────────────── */

/* Il logo entra dal basso in dissolvenza, la marea sale, le onde scorrono e le
 * stelline brillano; dopo qualche secondo sfuma e resta la home.
 *
 * **Non è una pagina a parte, è un velo sopra la home.** La differenza conta:
 * una pagina di passaggio che rimanda altrove sarebbe l'indirizzo che Google
 * indicizza — cioè il sito verrebbe indicizzato come una schermata vuota — e
 * costringerebbe a due caricamenti. Così l'indirizzo resta uno, il contenuto è
 * già nella pagina sotto, e l'effetto è lo stesso.
 *
 * Tutto in CSS: l'animazione finisce con `forwards`, quindi il velo si scopre
 * anche se JavaScript è spento. Non si può restare intrappolati.
 */

.intro {
  position: fixed; inset: 0; z-index: 200;
  background: var(--navy);
  display: grid; place-items: center;
  overflow: hidden;
  animation: intro-svanisce 800ms ease 4.4s forwards;
}
@keyframes intro-svanisce {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Un alone caldo dietro il logo: dà profondità senza disegnare niente. */
.intro::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 45% at 50% 42%,
              rgba(200,162,94,.20) 0%, transparent 70%);
}

.intro__logo {
  position: relative; z-index: 2;
  width: min(58vw, 340px); height: auto;
  opacity: 0;
  transform: translateY(26px);
  animation: intro-logo 1400ms cubic-bezier(.22,1,.36,1) 250ms forwards;
}
@keyframes intro-logo {
  to { opacity: 1; transform: none; }
}

/* ── la marea ────────────────────────────────────────────────────────────── */

/* Tre fasce d'onda, una dietro l'altra, che salgono dal fondo mentre
 * scorrono in orizzontale a velocità diverse. Le velocità diverse sono ciò
 * che fa sembrare acqua invece che un disegno che si sposta. */
.intro__marea { position: absolute; inset: 0; overflow: hidden; }

.onda {
  position: absolute; left: -50%; width: 200%;
  height: 46vh; min-height: 220px;
  background-repeat: repeat-x;
  background-size: 50% 100%;
  bottom: -46vh;
  animation: marea-sale 1800ms cubic-bezier(.22,1,.36,1) 500ms forwards,
             onda-scorre linear infinite;
}
@keyframes marea-sale { to { bottom: 0; } }
@keyframes onda-scorre { to { transform: translateX(-50%); } }

/* Le tre onde sono lo stesso profilo a tre opacità e tre velocità. Il
 * disegno è in linea come data URI: nessun file da caricare, e sono
 * duecento byte. */
.onda--1 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 90c150-45 300-45 450 0s300 45 450 0 150-30 300 0v110H0z' fill='%237FA1AA' opacity='.28'/%3E%3C/svg%3E");
  animation-duration: 1800ms, 9s;
  height: 40vh;
}
.onda--2 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 110c180-50 320 40 500 0s340-60 480 10 70 10 220-10v90H0z' fill='%2335657A' opacity='.45'/%3E%3C/svg%3E");
  animation-duration: 1800ms, 13s;
  animation-delay: 500ms, 0s;
  height: 34vh;
}
.onda--3 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 130c200 50 300-60 520-20s300 60 480 0 130-20 200 10v80H0z' fill='%230A2340' opacity='.8'/%3E%3C/svg%3E");
  animation-duration: 1800ms, 18s;
  animation-delay: 700ms, 0s;
  height: 26vh;
}

/* ── le stelline ─────────────────────────────────────────────────────────── */

/* Punti d'oro che si accendono a tempi diversi. Il ritardo scalato è tutto:
 * accendendosi insieme sembrerebbero una lampadina che sfarfalla. */
.stellina {
  position: absolute;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--oro);
  opacity: 0;
  box-shadow: 0 0 6px 1px rgba(200,162,94,.7);
  animation: stellina-brilla 2600ms ease-in-out infinite;
}
@keyframes stellina-brilla {
  0%, 100% { opacity: 0; transform: scale(.6); }
  50%      { opacity: .95; transform: scale(1); }
}

/* Chi ha chiesto di ridurre il movimento vuole meno movimento, non meno
 * contenuto. La prima versione faceva sparire tutto in due decimi di secondo,
 * e su un computer con le animazioni di sistema disattivate l'intro
 * semplicemente non si vedeva — sembrava rotta.
 *
 * Qui invece resta: il logo compare in dissolvenza sul blu, le onde stanno
 * ferme al loro posto invece di scorrere, le stelline sono accese fisse. Dopo
 * due secondi e mezzo si scopre la home. Nessuno scorrimento, nessuna
 * traslazione: solo opacità, che è quello che la richiesta consente. */
/* `?intro=forza` rimette il movimento anche su un computer che ha chiesto di
 * ridurlo. Serve solo a poterla giudicare: un visitatore non ci arriva mai,
 * perché quel parametro nell'indirizzo lo scrive a mano soltanto chi sa che
 * esiste. */
@media (prefers-reduced-motion: reduce) {
  .intro:not(.intro--forza):not(.intro--ferma) { animation: intro-svanisce 500ms ease 2.2s forwards; }
  @keyframes intro-logo-fermo { to { opacity: 1; } }

  .intro:not(.intro--forza) .intro__logo {
    transform: none;
    animation: intro-logo-fermo 700ms ease 150ms forwards;
  }

  /* Le onde restano dove sarebbero finite, senza salire né scorrere. */
  .intro:not(.intro--forza) .onda { animation: none; bottom: 0; }

  /* Le stelline accese fisse, senza pulsare. */
  .intro:not(.intro--forza) .stellina { animation: none; opacity: .9; }
}


/* ── la mappa ────────────────────────────────────────────────────────────── */

/* Finché non si preme, è un riquadro nostro: nessuna chiamata a Google,
 * nessun cookie, nessun banner da mostrare. */
.mappa { margin-top: 30px; }

.mappa__avvio {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  width: 100%; min-height: 260px;
  padding: 24px;
  border: 1px dashed var(--sabbia);
  border-radius: 8px;
  background: var(--azzurro);
  color: var(--ardesia);
  font-family: var(--testo); font-size: 13px; letter-spacing: .06em;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease;
}
.mappa__avvio:hover { border-color: var(--petrolio); background: #E2ECEE; }
.mappa__avvio small { font-size: 11px; color: var(--grigio); letter-spacing: .1em;
                      text-transform: uppercase; }

/* Lo spillo, disegnato col bordo: nessuna immagine da caricare. */
.mappa__segno {
  width: 22px; height: 22px; margin-bottom: 4px;
  border: 2px solid var(--petrolio);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

.mappa iframe {
  width: 100%; height: 340px;
  border: 0; border-radius: 8px;
  display: block;
}

/* ── la pagina di attesa ─────────────────────────────────────────────────── */

/* Riusa la scena dell'intro, ma qui non sfuma: è la pagina. */
.presto { background: var(--navy); color: var(--chiaro-spento); min-height: 100vh; }

/* L'intro normale è un velo sopra la home: `z-index: 200` e fondo blu pieno,
 * fatto apposta per coprire finché non svanisce. Qui non svanisce più, quindi
 * va rimessa dove le compete — dietro al testo — o resta una schermata blu e
 * basta. Il `pointer-events: none` serve perché è decorazione: i tocchi
 * devono arrivare ai pulsanti, non a lei. */
.intro--ferma {
  animation: none;
  position: fixed;
  z-index: 0;
  pointer-events: none;
}
.intro--ferma .onda { bottom: 0; animation: onda-scorre linear infinite; }
.intro--ferma .onda--1 { animation-duration: 9s; }
.intro--ferma .onda--2 { animation-duration: 13s; }
.intro--ferma .onda--3 { animation-duration: 18s; }

.presto__testo {
  position: relative; z-index: 2;
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  padding: 8vh var(--lato);
  text-align: center;
}

.presto__marchio { width: min(56vw, 280px); height: auto; margin-bottom: 18px; }

.presto h1 {
  font-family: var(--titoli); font-weight: 300;
  font-size: clamp(34px, 5.4vw, 62px); line-height: 1.1;
  color: var(--chiaro);
  margin: 0 0 14px;
}
.presto p {
  max-width: 46ch; margin: 0;
  font-size: clamp(15px, 1.5vw, 17px); line-height: 1.7;
  color: var(--azzurrino);
  text-wrap: pretty;
}

.presto .azioni { margin: 30px auto 0; }
.presto .azione--contorno { border-color: rgba(255,255,255,.45); color: var(--chiaro); }

.presto__dove {
  margin-top: 34px !important;
  font-size: 12.5px; color: var(--azzurrino-spento); letter-spacing: .02em;
}

.presto__lingue {
  display: flex; gap: 4px; list-style: none; padding: 0;
  margin: 26px 0 0;
}
.presto__lingue a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px;
  border-radius: 4px;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--azzurrino-spento);
}
.presto__lingue a:hover { color: var(--chiaro); }
.presto__lingue [aria-current="true"] { background: rgba(255,255,255,.14); color: var(--chiaro); }

@media (prefers-reduced-motion: reduce) {
  .intro--ferma .onda { animation: none; }
}