/* ==========================================================================
   LIDO — Composizioni di pagina
   ========================================================================== */

/* --- Apertura della home -------------------------------------------------
   A tutto schermo e tutta bordeaux: il marchio da solo, come sull'insegna.
   Niente divisione destra/sinistra — l'immagine arriva subito sotto. */
.eroe {
  position: relative;
  background: var(--tenda);
  color: var(--lino);
  min-height: calc(100svh - var(--header-h) - var(--barra-h) - 14px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-20) var(--gutter) var(--s-16);
  overflow: hidden;
}
/* Un accenno di mare in basso, appena percettibile: il bordeaux piatto su
   tutta l'altezza diventa pesante. */
.eroe::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background: linear-gradient(to top, rgba(31, 17, 19, 0.22), transparent);
  pointer-events: none;
}
.eroe__contenuto {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: var(--s-6);
  max-width: 40ch;
}
.eroe__marchio {
  font-family: var(--font-insegna);
  font-size: clamp(4rem, 17vw, 12rem);
  text-transform: uppercase;
  letter-spacing: var(--tracking-insegna);
  text-indent: var(--tracking-insegna);
  line-height: 0.9;
  color: var(--lino);
}
.eroe__insegna {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: rgba(248, 248, 248, 0.78);
}
.eroe__claim {
  font-size: var(--fs-md);
  line-height: var(--lh-largo);
  color: rgba(248, 248, 248, 0.9);
  max-width: 34ch;
}
.eroe__azioni { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }
.eroe__dati {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s-8) var(--s-12);
  padding-top: var(--s-10);
  margin-top: var(--s-10);
  border-top: 1px solid rgba(248, 248, 248, 0.2);
  width: min(100%, 760px);
}
.eroe__dati div { text-align: center; min-width: 118px; }
.eroe__dati dt {
  font-size: var(--fs-3xs); text-transform: uppercase;
  letter-spacing: var(--tracking-largo);
  color: rgba(248, 248, 248, 0.75); margin-bottom: 4px;
}
.eroe__dati dd { font-size: var(--fs-sm); color: var(--lino); }
.eroe__scorri {
  position: absolute; left: 50%; bottom: var(--s-6); transform: translateX(-50%);
  z-index: 1;
  display: none; align-items: center; gap: var(--s-3);
  font-size: var(--fs-3xs); text-transform: uppercase;
  letter-spacing: var(--tracking-largo);
  color: rgba(248, 248, 248, 0.6);
}
@media (min-height: 700px) and (min-width: 700px) { .eroe__scorri { display: flex; } }
.eroe__scorri i {
  display: block; width: 40px; height: 1px; background: currentColor;
  transform-origin: left;
  animation: scorri 2.6s var(--ease) infinite;
}
@keyframes scorri { 0%, 100% { transform: scaleX(0.25); } 50% { transform: scaleX(1); } }

/* La fascia d'immagine subito sotto l'apertura. */
.fascia-immagine { position: relative; overflow: hidden; background: var(--sabbia); }
.fascia-immagine img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 21 / 8; }
@media (max-width: 700px) { .fascia-immagine img { aspect-ratio: 4 / 3; } }

/* --- Apertura delle pagine interne --------------------------------------- */
.testa-pagina { padding-block: var(--s-16) var(--s-10); border-bottom: 1px solid var(--linea); }

/* La variante bordeaux: le pagine interne si aprono in rosso, non in bianco. */
.testa-pagina--tenda {
  background: var(--tenda);
  color: var(--lino);
  border-bottom: 0;
  padding-block: var(--s-16) var(--s-16);
  margin-bottom: 0;
}
.testa-pagina--tenda .testa-pagina__titolo { color: var(--lino); }
.testa-pagina--tenda .testa-pagina__testo { color: rgba(248, 248, 248, 0.86); }
.testa-pagina--tenda .briciole { color: rgba(248, 248, 248, 0.75); }
.testa-pagina--tenda .briciole a:hover,
.testa-pagina--tenda .briciole [aria-current] { color: var(--lino); }
.testa-pagina--tenda .briciole li:not(:last-child)::after { color: rgba(248, 248, 248, 0.4); }
.testa-pagina--tenda .regola-righe { margin-bottom: var(--s-6); }
.testa-pagina__titolo {
  font-family: var(--font-insegna);
  font-size: var(--fs-3xl);
  text-transform: uppercase;
  letter-spacing: var(--tracking-insegna);
  text-indent: var(--tracking-insegna);
  color: var(--tenda);
  line-height: 1;
}
.testa-pagina__testo { margin-top: var(--s-5); max-width: 58ch; color: var(--inchiostro-soft); line-height: var(--lh-largo); }

/* La spaziatura al 28% è la regola del marchio, e su "LIDO" funziona. Su un
   titolo lungo come INFORMAZIONI, a 360px, la parola non può andare a capo e
   le lettere escono dal contenitore: qui la si stringe. */
@media (max-width: 700px) {
  .testa-pagina__titolo {
    letter-spacing: 0.12em;
    text-indent: 0.12em;
    font-size: clamp(2rem, 9vw, 3rem);
  }
}

/* --- Striscia scorrevole ------------------------------------------------- */
.striscia { background: var(--tenda-900); color: var(--lino); padding-block: var(--s-3); overflow: hidden; display: flex; }
.striscia__nastro { display: flex; flex-shrink: 0; gap: var(--s-10); padding-right: var(--s-10); animation: nastro 34s linear infinite; white-space: nowrap; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking-largo); }
.striscia:hover .striscia__nastro { animation-play-state: paused; }
.striscia b { font-weight: 400; color: var(--mare-400); }
@keyframes nastro { to { transform: translateX(-100%); } }

/* --- Blocco diviso ------------------------------------------------------- */
.diviso { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
@media (max-width: 940px) { .diviso { grid-template-columns: 1fr; } }
.diviso--rovescio .diviso__figura { order: 2; }
@media (max-width: 940px) { .diviso--rovescio .diviso__figura { order: 0; } }
.diviso__figura { background: var(--sabbia); overflow: hidden; }
.diviso__figura img { width: 100%; height: 100%; object-fit: cover; min-height: 380px; }
.diviso__testo { display: flex; flex-direction: column; justify-content: center; gap: var(--s-5); padding: clamp(2rem, 5vw, 5rem); }
.diviso__titolo { font-family: var(--font-insegna); font-size: var(--fs-2xl); color: var(--tenda); line-height: 1.05; }

/* Metà immagine, metà bordeaux: aggiunge rosso senza toccare le aree lunghe
   di lettura, perché qui il testo è corto. */
.diviso--tenda .diviso__testo { background: var(--tenda); color: var(--lino); }
.diviso--tenda .diviso__titolo { color: var(--lino); }
.diviso--tenda .occhiello { color: var(--mare-400); }
.diviso--tenda .guida { color: rgba(248, 248, 248, 0.86); }
.diviso--tenda .btn--vuoto {
  --btn-sfondo: transparent; --btn-testo: var(--lino); --btn-bordo: rgba(248, 248, 248, 0.45);
}
.diviso--tenda .btn--vuoto:hover { background: var(--lino); color: var(--tenda); border-color: var(--lino); }
.diviso--tenda .btn:not(.btn--vuoto) {
  --btn-sfondo: var(--lino); --btn-testo: var(--tenda); --btn-bordo: var(--lino);
}
.diviso--tenda .btn:not(.btn--vuoto):hover { background: var(--mare); border-color: var(--mare); color: var(--tenda-900); }
.diviso--tenda .link-sotto:hover { color: var(--mare-400); }

/* ==========================================================================
   La mappa della spiaggia
   Il pezzo centrale della prenotazione: si sceglie un ombrellone vero, in una
   fila vera, non una voce da un menù a tendina.
   ========================================================================== */
.mappa {
  background: var(--sabbia-soft);
  border: 1px solid var(--linea);
  border-radius: var(--raggio-lg);
  overflow: hidden;
}
.mappa__mare {
  background: repeating-linear-gradient(180deg, var(--mare-700) 0 7px, var(--mare) 7px 14px, var(--mare-400) 14px 21px);
  color: #fff; text-align: center;
  padding: var(--s-4);
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking-largo);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.mappa__campo { padding: var(--s-6) var(--s-4); overflow-x: auto; }
.mappa__file { display: flex; flex-direction: column; gap: var(--s-3); min-width: max-content; margin-inline: auto; }
.mappa__fila { display: flex; align-items: center; gap: var(--s-4); }
.mappa__lettera {
  width: 30px; flex-shrink: 0;
  font-family: var(--font-insegna); font-size: var(--fs-md);
  color: var(--tenda); text-align: center;
}
.mappa__posti { display: flex; gap: 7px; }
.mappa__struttura {
  background: var(--legno); color: #fff;
  display: flex; justify-content: space-around; gap: var(--s-4);
  padding: var(--s-4);
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking-medio);
}

/* Un ombrellone visto dall'alto, fatto con un gradiente conico. */
.posto {
  --c: var(--tenda);
  position: relative;
  width: 38px; height: 38px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform var(--dur-veloce) var(--ease), box-shadow var(--dur-veloce) var(--ease);
  background: repeating-conic-gradient(from 0deg, var(--c) 0deg 30deg, var(--lino) 30deg 60deg);
  box-shadow: 0 0 0 1px rgba(31, 17, 19, 0.14) inset;
}
.posto::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 6px; height: 6px; border-radius: 50%; background: var(--legno);
}
.posto[data-fascia="centro"] { --c: var(--mare-700); }
.posto[data-fascia="retro"] { --c: var(--legno); }
.posto:hover:not([disabled]) { transform: scale(1.14); z-index: 2; }
.posto[aria-pressed="true"] {
  transform: scale(1.2);
  box-shadow: 0 0 0 3px var(--tenda-900), 0 6px 14px -6px rgba(31, 17, 19, 0.5);
  z-index: 3;
}
.posto[disabled] {
  cursor: not-allowed;
  background: var(--sabbia-s, #dccfb8);
  box-shadow: 0 0 0 1px rgba(31, 17, 19, 0.1) inset;
  opacity: 0.55;
}
.posto[disabled]::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(45deg, transparent 45%, rgba(31,17,19,.35) 45%, rgba(31,17,19,.35) 55%, transparent 55%);
  border-radius: 50%;
}
.posto__nome { position: absolute; inset: 0; opacity: 0; }

.legenda { display: flex; flex-wrap: wrap; gap: var(--s-5); padding: var(--s-4) var(--s-6); border-top: 1px solid var(--linea); font-size: var(--fs-2xs); }
.legenda__voce { display: inline-flex; align-items: center; gap: var(--s-2); }
.legenda__bollo { width: 16px; height: 16px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, var(--c, var(--tenda)) 0deg 30deg, var(--lino) 30deg 60deg); box-shadow: 0 0 0 1px rgba(31,17,19,.14) inset; }
.legenda__bollo--occupato { background: #dccfb8; opacity: .6; }

@media (max-width: 620px) {
  .posto { width: 32px; height: 32px; }
  .mappa__posti { gap: 5px; }
}

/* ==========================================================================
   Prenotazione
   ========================================================================== */
.prenota { display: grid; grid-template-columns: 1fr 380px; gap: var(--s-12); align-items: start; padding-block: var(--s-8) var(--s-20); }
@media (max-width: 1000px) { .prenota { grid-template-columns: 1fr; gap: var(--s-8); } }

.passi { display: flex; gap: 0; margin-bottom: var(--s-8); border: 1px solid var(--linea); border-radius: var(--raggio); overflow: hidden; }
.passo {
  flex: 1; display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-4);
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking-medio);
  color: var(--inchiostro-muto);
  background: #fff;
  border-right: 1px solid var(--linea);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.passo:last-child { border-right: 0; }
.passo__n {
  width: 22px; height: 22px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%; border: 1px solid currentColor;
  font-size: var(--fs-3xs);
}
.passo.attivo { background: var(--tenda); color: var(--lino); }
.passo.fatto { background: var(--tenda-50); color: var(--tenda); }
.passo.fatto .passo__n { background: var(--tenda); color: var(--lino); border-color: var(--tenda); }
.passo__nome { display: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 860px) { .passo__nome { display: inline; } }

.fase { display: none; }
.fase.attiva { display: block; animation: fase-entra var(--dur) var(--ease) both; }
@keyframes fase-entra { from { opacity: 0; transform: translateY(8px); } }
.fase__titolo { font-family: var(--font-insegna); font-size: var(--fs-xl); color: var(--tenda); margin-bottom: var(--s-2); }
.fase__testo { color: var(--inchiostro-soft); margin-bottom: var(--s-8); max-width: 56ch; }

.scelta-fascia { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
@media (max-width: 780px) { .scelta-fascia { grid-template-columns: 1fr; } }
.fascia-card {
  text-align: left; padding: var(--s-5);
  border: 1px solid var(--linea); border-radius: var(--raggio-lg);
  background: #fff; cursor: pointer;
  transition: border-color var(--dur-veloce) var(--ease), box-shadow var(--dur-veloce) var(--ease);
}
.fascia-card:hover { border-color: var(--tenda-300); }
.fascia-card[aria-pressed="true"] { border-color: var(--tenda); box-shadow: 0 0 0 1px var(--tenda); }
/* Sono span dentro un button: senza display block finiscono in riga. */
.fascia-card__nome { display: block; font-family: var(--font-insegna); font-size: var(--fs-md); color: var(--tenda); }
.fascia-card__file { display: block; font-size: var(--fs-2xs); color: var(--inchiostro-muto); text-transform: uppercase; letter-spacing: var(--tracking-medio); margin-top: 2px; }
.fascia-card__prezzo { display: block; font-size: var(--fs-xl); margin-top: var(--s-3); font-variant-numeric: tabular-nums; }
.fascia-card__prezzo small { font-size: var(--fs-2xs); color: var(--inchiostro-muto); }
.fascia-card__incluso { display: block; font-size: var(--fs-xs); color: var(--inchiostro-soft); margin-top: var(--s-3); line-height: 1.5; }

.extra-riga {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) 0; border-bottom: 1px solid var(--linea-soft);
}
.extra-riga__testo { flex: 1; }
.extra-riga__nome { font-size: var(--fs-sm); }
.extra-riga__prezzo { font-size: var(--fs-2xs); color: var(--inchiostro-muto); }
.contatore { display: inline-flex; align-items: center; border: 1px solid var(--linea); border-radius: var(--raggio); }
.contatore button { width: 34px; height: 34px; display: grid; place-items: center; color: var(--tenda); font-size: var(--fs-md); }
.contatore button:hover:not([disabled]) { background: var(--tenda-50); }
.contatore button[disabled] { opacity: .3; cursor: not-allowed; }
.contatore output { width: 36px; text-align: center; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

/* Riepilogo appiccicoso */
.riepilogo {
  background: #fff; border: 1px solid var(--linea); border-radius: var(--raggio-lg);
  overflow: hidden;
  position: sticky; top: calc(var(--header-h) + var(--s-6));
}
@media (max-width: 1000px) { .riepilogo { position: static; } }
.riepilogo__testa { background: var(--tenda); color: var(--lino); padding: var(--s-5) var(--s-6); }
.riepilogo__titolo { font-family: var(--font-insegna); font-size: var(--fs-md); letter-spacing: var(--tracking-largo); text-transform: uppercase; }
.riepilogo__corpo { padding: var(--s-6); }
.riepilogo__riga { display: flex; justify-content: space-between; gap: var(--s-3); padding-block: var(--s-2); font-size: var(--fs-sm); }
.riepilogo__riga span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.riepilogo__riga--muta { color: var(--inchiostro-muto); font-size: var(--fs-xs); }
.riepilogo__totale {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--linea); margin-top: var(--s-3); padding-top: var(--s-4);
  font-size: var(--fs-lg); font-variant-numeric: tabular-nums;
}
.riepilogo__vuoto { color: var(--inchiostro-muto); font-size: var(--fs-sm); }

/* Conferma */
.conferma { text-align: center; padding-block: var(--s-16); }
.conferma__codice {
  font-family: var(--font-insegna); font-size: var(--fs-2xl);
  letter-spacing: var(--tracking-largo); color: var(--tenda);
  padding: var(--s-4) var(--s-8); border: 2px solid var(--tenda);
  border-radius: var(--raggio); display: inline-block; margin-block: var(--s-6);
}

/* ==========================================================================
   La carta del ristorante
   ========================================================================== */
.carta { display: grid; grid-template-columns: 220px 1fr; gap: var(--s-12); align-items: start; padding-block: var(--s-8) var(--s-20); }
/* Fondo caldo invece del bianco puro: la carta resta leggibile ma smette di
   essere un buco bianco in mezzo a un sito rosso. */
.pagina-carta { background: var(--sabbia-soft); }
@media (max-width: 900px) { .carta { grid-template-columns: 1fr; gap: var(--s-6); } }
.carta__indice { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
@media (max-width: 900px) { .carta__indice { position: static; } }
.carta__indice li + li { margin-top: var(--s-2); }
.carta__indice a { font-size: var(--fs-sm); color: var(--inchiostro-soft); }
.carta__indice a:hover, .carta__indice a.corrente { color: var(--tenda); }

.sezione-carta + .sezione-carta { margin-top: var(--s-16); }
/* Le testate di sezione sono fasce piene, come sui menù stampati: danno
   ritmo a una pagina che altrimenti è ottomila pixel di sola lettura. */
.sezione-carta__titolo {
  font-family: var(--font-insegna);
  font-size: var(--fs-xl);
  text-transform: uppercase;
  letter-spacing: var(--tracking-largo);
  text-indent: var(--tracking-largo);
  color: var(--lino);
  background: var(--tenda);
  padding: var(--s-4) var(--s-6);
  border-radius: var(--raggio);
  border-bottom: 0;
}
.sezione--tenda .sezione-carta__titolo {
  background: transparent;
  border-bottom: 2px solid var(--lino);
  border-radius: 0;
  padding-inline: 0;
}
.sezione-carta__nota { font-size: var(--fs-sm); color: var(--inchiostro-muto); margin-top: var(--s-3); font-style: italic; max-width: 60ch; }

.piatto { padding-block: var(--s-5); border-bottom: 1px solid var(--linea-soft); }
.piatto__riga { display: flex; align-items: baseline; gap: var(--s-3); }
.piatto__nome { font-size: var(--fs-md); }
.piatto__punti { flex: 1; border-bottom: 1px dotted var(--inchiostro-lieve); transform: translateY(-4px); min-width: 20px; }
.piatto__prezzo { font-size: var(--fs-md); font-variant-numeric: tabular-nums; white-space: nowrap; }
.piatto__prezzo--nota { font-size: var(--fs-xs); color: var(--inchiostro-muto); font-style: italic; }
.piatto__desc { font-size: var(--fs-sm); color: var(--inchiostro-soft); margin-top: var(--s-2); max-width: 62ch; line-height: var(--lh-largo); }
.piatto__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); align-items: center; }
.piatto.spenta { opacity: .32; }
.allergene {
  display: inline-grid; place-items: center;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--sabbia); color: var(--tenda-800);
  font-size: var(--fs-3xs); font-variant-numeric: tabular-nums;
  cursor: help;
}
.stella { color: var(--tenda); font-size: var(--fs-xs); }

.filtri-carta { display: flex; flex-wrap: wrap; gap: var(--s-2); padding-block: var(--s-5); border-block: 1px solid var(--linea); margin-bottom: var(--s-8); }

.sezione--tenda .legenda-allergeni { color: rgba(248, 248, 248, 0.85); }
.sezione--tenda .allergene { background: rgba(248, 248, 248, 0.18); color: var(--lino); }
.sezione--tenda .sezione-carta__titolo { color: var(--lino); border-bottom-color: var(--lino); }
.sezione--tenda .sezione-carta__nota { color: rgba(248, 248, 248, 0.78); }
.legenda-allergeni { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-2) var(--s-4); font-size: var(--fs-xs); color: var(--inchiostro-soft); }
.legenda-allergeni div { display: flex; align-items: center; gap: var(--s-2); }

.vini__tipo + .vini__tipo { margin-top: var(--s-10); }
.vino { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--linea-soft); align-items: baseline; font-size: var(--fs-sm); }
.vino__zona { font-size: var(--fs-2xs); color: var(--inchiostro-muto); }
.vino__prezzo { font-variant-numeric: tabular-nums; text-align: right; min-width: 58px; }

/* ==========================================================================
   Listino, cabine, storia, orari
   ========================================================================== */
.listino { width: 100%; font-size: var(--fs-sm); }
.listino th, .listino td { padding: var(--s-4) var(--s-3); text-align: right; border-bottom: 1px solid var(--linea-soft); font-variant-numeric: tabular-nums; }
.listino th:first-child, .listino td:first-child { text-align: left; font-variant-numeric: normal; }
.listino thead th { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking-medio); color: var(--inchiostro-muto); font-weight: 500; }
.listino tbody tr:hover { background: var(--sabbia-soft); }
.listino__fascia { display: inline-flex; align-items: center; gap: var(--s-2); }
.listino__bollo { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }

.tempo { border-left: 2px solid var(--linea); padding-left: var(--s-8); }
.tempo__voce { position: relative; padding-bottom: var(--s-10); }
.tempo__voce::before {
  content: ""; position: absolute; left: calc(var(--s-8) * -1 + -1px); top: 8px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--tenda);
  transform: translateX(-50%);
  box-shadow: 0 0 0 4px var(--lino);
}
.tempo__anno { font-family: var(--font-insegna); font-size: var(--fs-lg); color: var(--tenda); letter-spacing: var(--tracking-medio); }
.tempo__titolo { font-size: var(--fs-md); margin-block: var(--s-2); }
.tempo__testo { font-size: var(--fs-sm); color: var(--inchiostro-soft); max-width: 58ch; line-height: var(--lh-largo); }

.orari { font-size: var(--fs-sm); }
.orari__riga { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--linea-soft); }
.sezione--tenda .orari__riga,
.sezione--scura .orari__riga { border-bottom-color: rgba(248, 248, 248, 0.18); }
.sezione--tenda .guida,
.sezione--scura .guida { color: rgba(248, 248, 248, 0.85); }
.sezione--tenda .campo__aiuto,
.sezione--scura .campo__aiuto { color: rgba(248, 248, 248, 0.75); }
.sezione--tenda .link-sotto:hover,
.sezione--scura .link-sotto:hover { color: var(--mare-400); }
.orari__ora { font-variant-numeric: tabular-nums; white-space: nowrap; }

.numeri { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--linea); }
@media (max-width: 780px) { .numeri { grid-template-columns: 1fr 1fr; } }
.numero { background: var(--lino); padding: var(--s-8) var(--s-6); }
/* Nella variante bordeaux si inverte: fondo rosso, filetti chiari. */
.numeri--tenda { background: rgba(248, 248, 248, 0.22); }
.numeri--tenda .numero { background: var(--tenda); }
.numeri--tenda .numero__cifra { color: var(--lino); }
.numeri--tenda .numero__voce { color: rgba(248, 248, 248, 0.75); }
.numero__cifra { font-family: var(--font-insegna); font-size: var(--fs-2xl); color: var(--tenda); line-height: 1; }
.numero__voce { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking-medio); color: var(--inchiostro-muto); margin-top: var(--s-3); }

/* --- Non trovata --------------------------------------------------------- */
.nf { min-height: 58vh; display: grid; place-items: center; text-align: center; padding-block: var(--s-20); }
.nf__cifra { font-family: var(--font-insegna); font-size: clamp(4.5rem, 16vw, 12rem); color: var(--tenda); letter-spacing: var(--tracking-largo); line-height: 1; }