/* B&B 80056 Ercolano — style.css
   La base è la home fedele al design del kit (Design/kit/design-francesco-ascione/home-approvata.png, versione 6). Il salto
   di livello (6-quater, Design/SALTO-DI-LIVELLO.md) ha cambiato scala, ritmo e trattamento delle immagini: colori,
   carattere e pezzi restano quelli. Colori misurati sul design; carattere: Onest (variabile, servito dal sito).
   Ordine del file: base · testata · hero · biglietto · sezioni della home · piede · pagine di servizio · movimento · mouse ·
   tablet · telefono · pagine interne · meno movimento. */

@font-face {
  font-family: "Onest";
  src: url("/assets/fonts/onest-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* fondi */
  --bianco: #FEFEFE;        /* la pagina e la testata */
  --carta: #FBFAF8;         /* il biglietto del calendario, le cartoline */
  --crema: #F8F5F3;         /* le bande chiare */
  --pietra: #F6F5F3;        /* il fondo delle foto */
  --cipria: #EEE5DC;        /* i cerchi dei passi, i giorni scelti */
  /* linee */
  --linea: #EEE8E5;         /* divisori chiari */
  --linea-scura: #D7C9C3;   /* separatori verticali */
  --bordo: #D9D9DB;         /* i campi del calendario */
  --filo: #9D8479;          /* il grande 80056 della hero (nei file svg) */
  /* colori della casa */
  --tortora: #7C604E;       /* i pulsanti */
  --cioccolato: #66402E;    /* link, prezzi, voto, le bande scure */
  --rosa: #945059;          /* icone a linea, timbri */
  --ocra: #EFCC9C;          /* la sottolineatura a pennello */
  /* testo */
  --inchiostro: #1E1B1A;
  --grigio: #474446;
  --chiaro: #F8F5F3;        /* il testo sulle bande scure */

  --font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --u: calc(min(100vw, 1600px) / 100);    /* l'unità delle composizioni: 1% della larghezza, fino a 1600 px */
  --margine: clamp(16px, 5vw, 80px);
  --aria: clamp(60px, 8.4vw, 124px);      /* fra una sezione e l'altra */
  --altezza-testata: 92px;
  --fuoco: var(--cioccolato);             /* il contorno del fuoco: sui fondi chiari 9:1; sulle bande scure diventa chiaro */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ombra-scheda: 0 1px 2px rgba(80, 55, 40, .06), 0 16px 32px -18px rgba(80, 55, 40, .30);
}

/* ── base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altezza-testata) + 12px);
}
html.menu-aperto { overflow: hidden; }
body {
  margin: 0;
  background: var(--bianco);
  color: var(--inchiostro);
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 450;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
a, button, summary, select { touch-action: manipulation; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1em; height: 1em; flex: none; }
.contenitore {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-left: max(var(--margine), env(safe-area-inset-left, 0px));
  padding-right: max(var(--margine), env(safe-area-inset-right, 0px));
}
.salta {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  background: var(--tortora); color: #fff; padding: 12px 18px; border-radius: 10px; text-decoration: none;
}
.salta:focus { top: 12px; }

/* pulsanti */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 54px; padding: 0 30px;
  border: 0; border-radius: 12px;
  background: var(--tortora); color: #fff;
  font: inherit; font-size: 1.0625rem; font-weight: 560; letter-spacing: .002em;
  text-decoration: none; cursor: pointer;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: background-color .16s ease, color .16s ease, transform .16s var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 3px solid var(--fuoco); outline-offset: 3px; }
.btn-grande { height: 58px; padding: 0 38px; font-size: clamp(1.0625rem, .9rem + .45vw, 1.25rem); }

/* titoli delle sezioni: grandi e sottili, il sottotitolo piccolo e più chiaro */
.testa-sezione h2, .posizione h2 {
  margin: 0;
  font-size: clamp(2.125rem, 1.05rem + 3.7vw, 4.5rem);
  font-weight: 250;
  line-height: 1.04;
  letter-spacing: -.03em;
}
.sottotitolo {
  max-width: 34em;
  margin: 12px 0 0;
  color: var(--grigio);
  font-size: clamp(1.0625rem, .95rem + .42vw, 1.375rem);
  font-weight: 420;
  line-height: 1.45;
}
.testa-riga { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; }
.testa-camere { align-items: flex-end; }
.link-freccia {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 0; border: 0; background: none;
  color: var(--cioccolato); font: inherit; font-size: clamp(1.0625rem, .95rem + .3vw, 1.1875rem); font-weight: 560;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
  cursor: pointer; user-select: none; -webkit-user-select: none;
}
.link-freccia .ico { width: .7em; height: .7em; transition: transform .2s var(--ease-out); }

/* ── testata ──────────────────────────────────────────────────────────── */
.testata {
  position: sticky; top: 0; z-index: 50;
  background: var(--bianco);
  padding-top: env(safe-area-inset-top, 0px);
  transition: box-shadow .2s ease;
}
.testata.scorrendo { box-shadow: 0 1px 0 var(--linea), 0 10px 26px -18px rgba(60, 40, 30, .35); }
.testata-riga { display: flex; align-items: center; gap: 28px; height: var(--altezza-testata); }
.marchio { display: flex; align-items: center; gap: clamp(12px, 1.3vw, 18px); flex: 0 1 auto; margin-right: auto; min-width: 0; color: inherit; text-decoration: none; }
.marchio-logo { width: clamp(92px, 7.4vw, 108px); flex: none; }
.marchio-sep { width: 1px; height: 44px; background: var(--linea-scura); flex: none; }
.marchio-nome { min-width: 0; overflow: hidden; font-size: clamp(1rem, .75rem + .6vw, 1.1875rem); font-weight: 580; letter-spacing: -.005em; white-space: nowrap; text-overflow: ellipsis; }
.menu { display: flex; align-items: center; gap: clamp(20px, 2vw, 30px); }
.menu a { padding: 12px 0; font-size: 1.0625rem; font-weight: 500; text-decoration: none; white-space: nowrap; transition: color .16s ease; }
.lingue-posto:empty { display: none; }
.testata details.lingue { --thk-lingue-bordo: var(--linea-scura); --thk-lingue-raggio: 12px; font-size: .9375rem; }
.btn-prenota { height: 44px; padding: 0 22px; font-size: 1rem; margin-left: clamp(4px, 1vw, 14px); white-space: nowrap; }
.menu-apri {
  display: none; place-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--linea-scura); border-radius: 12px; background: var(--bianco);
  cursor: pointer; user-select: none; -webkit-user-select: none;
}
.menu-apri span { display: block; width: 20px; height: 1.5px; background: var(--inchiostro); transition: transform .2s var(--ease-out), opacity .15s ease; }
.menu-apri[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-apri[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-apri[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.menu-apri:active { transform: scale(.97); }
.menu-telefono {
  position: fixed; left: 0; right: 0;
  top: calc(var(--altezza-testata) + env(safe-area-inset-top, 0px));
  height: calc(100dvh - var(--altezza-testata) - env(safe-area-inset-top, 0px));
  z-index: 49;
  display: flex; flex-direction: column; gap: 26px;
  padding: 18px max(20px, env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  background: var(--bianco);
  border-top: 1px solid var(--linea);
  overflow-y: auto; overscroll-behavior: contain;
}
.menu-telefono[hidden] { display: none; }
.menu-telefono > * { flex: none; }
.menu-telefono-voci { display: flex; flex-direction: column; }
.menu-telefono-voci a { padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: 1.4375rem; font-weight: 300; text-decoration: none; }
.menu-telefono-voci a[aria-current="page"] { color: var(--tortora); }
.menu-telefono-chiama { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--cioccolato); font-weight: 600; text-decoration: none; }
.menu-telefono-chiama .ico { width: 24px; height: 25px; color: var(--rosa); }

/* ── hero: gli 80056 interi a tutta larghezza, l'arco alto davanti, e le cifre che continuano bianche sulla foto ──
   Le misure sono in --u, così cifre e arco scalano insieme e la copia bianca (in .arco::after) resta allineata alle cifre
   di fondo: --d-* sono le cifre, --a-* l'arco. */
.hero {
  --a-b: 5px;
  --a-l: calc(59.5 * var(--u)); --a-t: calc(4.4 * var(--u)); --a-w: calc(34.4 * var(--u));
  --testo: calc(16.4 * var(--u));     /* il blocco del titolo: due righe di titolo e due di sottotitolo */
  --d-l: calc(3.2 * var(--u)); --d-t: calc(.8 * var(--u));
  --d-w: min(calc(93.6 * var(--u)), calc((var(--h) - var(--testo) - 9.4 * var(--u)) * 3.117));   /* 3,117: larghezza / altezza delle cifre */
  --h: max(calc(47 * var(--u)), min(calc(60 * var(--u)), calc(100svh - var(--altezza-testata) - 14px)));
  position: relative;
  overflow: clip;
}
.hero-contenitore { max-width: none; padding: 0; }
.hero-griglia {
  position: relative;
  width: calc(100 * var(--u));
  height: var(--h);
  margin-inline: auto;
}
.hero-cifre { position: absolute; z-index: 0; left: var(--d-l); top: var(--d-t); width: var(--d-w); pointer-events: none; }
.hero-cifre img { width: 100%; }
.hero-testo { position: absolute; z-index: 1; left: var(--margine); bottom: calc(7.2 * var(--u)); width: calc(54 * var(--u)); }
.hero h1 {
  margin: 0 0 calc(1.5 * var(--u));
  font-size: calc(5.15 * var(--u));
  font-weight: 240;
  line-height: 1.04;
  letter-spacing: -.032em;
}
.hero h1 br:nth-of-type(2) { display: none; }
.hero-sotto { margin: 0; color: var(--grigio); font-size: max(1.0625rem, calc(1.5 * var(--u))); font-weight: 440; line-height: 1.4; }
.hero .btn-grande { position: absolute; right: calc(2 * var(--u)); bottom: 2px; height: max(50px, calc(4 * var(--u))); padding: 0 calc(2.4 * var(--u)); font-size: max(1.0625rem, calc(1.25 * var(--u))); }
.arco {
  position: absolute; z-index: 1;
  left: var(--a-l); top: var(--a-t); bottom: 0; width: var(--a-w);
  margin: 0;
  overflow: hidden;
  border: var(--a-b) solid var(--bianco);
  border-radius: 1000px 1000px 0 0;
  background: var(--pietra);
  /* due cornici sottili, come una modanatura */
  box-shadow: 0 0 0 1px var(--linea-scura), 0 0 0 calc(.8 * var(--u)) var(--bianco), 0 0 0 calc(.8 * var(--u) + 1px) var(--linea-scura), 0 40px 70px -40px rgba(70, 48, 36, .55);
}
.arco img { width: 100%; height: calc(100% + 36px); max-width: none; margin-top: -18px; object-fit: cover; object-position: 42% 30%; }
.arco::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url("/assets/img/logo/cifre-80056-sottile.svg") no-repeat;
  background-size: var(--d-w) auto;
  background-position: calc(var(--d-l) - var(--a-l) - var(--a-b)) calc(var(--d-t) - var(--a-t) - var(--a-b));
  filter: brightness(0) invert(1);
  opacity: .9;
}
/* 2 Step (09/11/2026): nell'arco della home la grafica di Booking col logo 80056. Le cifre bianche qui si spengono
   (coprirebbero il logo) e la foto si centra sul logo (46%). Dove l'arco è stretto e alto (tablet) la foto non si
   ingrandisce oltre 1,6 volte la larghezza dell'arco, così il logo, il 66% della grafica, resta intero; ma arriva
   sempre sotto il bordo del biglietto, che copre la base dell'arco (5u): nessuna striscia vuota */
.arco-copertina::after { content: none; }
.arco-copertina img {
  height: max(calc(100% - 5 * var(--u) + 20px), min(calc(100% + 36px), calc((var(--a-w) - 2 * var(--a-b)) * 1.6)));
  object-position: 46% 50%;
}

/* ── calendario: il biglietto, che sale sulla base dell'arco ───────────── */
.disponibilita { position: relative; z-index: 2; margin-top: calc(-5 * var(--u)); padding: 0; }
.biglietto-ombra {
  position: relative;
  filter: drop-shadow(0 1px 2px rgba(70, 48, 36, .22)) drop-shadow(0 16px 26px rgba(70, 48, 36, .17));
}
.biglietto {
  --morso: 9px;
  --passo: 25px;
  --cima: 30px;
  --lato: clamp(28px, 3.6vw, 56px);
  --stub: clamp(230px, 20vw, 290px);
  --tacca: 13px;
  --tacca-x: calc(100% - var(--lato) - var(--stub));
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--stub);
  grid-template-areas: "campi stub" "messaggio messaggio" "corpo corpo";
  align-items: start;
  padding: var(--cima) var(--lato) 30px;
  background: var(--carta);
  border-radius: 4px;
  /* tre strati che si intersecano: i dentelli a sinistra, quelli a destra, la tacca sopra la perforazione */
  mask:
    radial-gradient(circle at 0 50%, #0000 var(--morso), #000 calc(var(--morso) + .5px)) 0 0 / 100% var(--passo) repeat-y,
    radial-gradient(circle at 100% 50%, #0000 var(--morso), #000 calc(var(--morso) + .5px)) 0 0 / 100% var(--passo) repeat-y,
    radial-gradient(circle at var(--tacca-x) 0, #0000 var(--tacca), #000 calc(var(--tacca) + .5px)) 0 0 / 100% 100% no-repeat;
  mask-composite: intersect;
}
.campi {
  grid-area: campi;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .6fr);
  gap: 14px clamp(12px, 1.6vw, 24px);
  align-items: end;
  padding-right: clamp(20px, 2.8vw, 40px);
}
.campo label, .campo-etichetta { display: block; margin: 0 0 8px; font-size: clamp(.9375rem, .85rem + .25vw, 1.0625rem); font-weight: 560; }
.campo { min-width: 0; }
.campo-controllo { position: relative; container-type: inline-size; }
.campo-controllo select, .campo-data {
  -webkit-appearance: none; appearance: none;
  display: flex; align-items: center;
  width: 100%; height: 52px; padding: 0 34px 0 14px;
  border: 1px solid var(--bordo); border-radius: 12px;
  background: #fff; color: var(--inchiostro);
  font: inherit; font-size: clamp(1rem, .85rem + .25vw, 1.0625rem); font-weight: 450; text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.campo-data span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.campo-data.scelta { border-color: var(--tortora); }
.campo-data.attiva { border-color: var(--tortora); box-shadow: 0 0 0 3px var(--cipria); }
.campo-controllo .ico-giu { position: absolute; right: 14px; top: 50%; width: 13px; height: 8px; margin-top: -4px; color: var(--cioccolato); pointer-events: none; }
@container (max-width: 160px) {
  .campo-controllo select, .campo-data { padding-left: 10px; padding-right: 24px; }
  .campo-controllo .ico-giu { right: 9px; width: 11px; }
  .campo-data.scelta { padding-right: 6px; }
  .campo-data.scelta + .ico-giu { display: none; }
}
.campo-controllo select:focus-visible, .campo-data:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 2px; }

.stub {
  grid-area: stub;
  position: relative;
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
  padding-left: clamp(24px, 3vw, 40px);
}
/* la perforazione: puntini marroni, allungati, da sotto la tacca a fine pulsante */
.stub::before {
  content: ""; position: absolute; left: -3px; top: calc(-1 * var(--cima) + var(--tacca) + 4px); bottom: -10px; width: 6px;
  background: radial-gradient(ellipse 3px 4.5px at 50% 50%, var(--filo) 92%, #0000 100%) 0 0 / 6px 15px repeat-y;
}
.btn-wa { height: auto; min-height: 84px; padding: 12px 20px; gap: 14px; border-radius: 14px; font-size: clamp(1.0625rem, .85rem + .6vw, 1.3125rem); line-height: 1.2; text-align: center; }
.ico-wa { width: 36px; height: 36px; }
/* il messaggio ha la sua riga, sotto i campi: la riga c'è anche vuota, così una riga di testo non sposta il calendario */
.cal-messaggio { grid-area: messaggio; min-height: 1.4em; margin: 10px 0 0; font-size: .9375rem; line-height: 1.4; color: var(--cioccolato); }
.cal-messaggio.errore { color: var(--rosa); font-weight: 600; }
.thk-avviso-modulo { max-width: 34em; margin: 0; font-size: .8125rem; line-height: 1.45; color: var(--grigio); }

.corpo {
  grid-area: corpo;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) 1px minmax(0, 1fr);
  column-gap: clamp(28px, 4vw, 56px);
  align-items: center;
  margin-top: 8px;
}
.cal { width: 100%; max-width: 470px; justify-self: center; }
.cal-testa { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.cal-nav {
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--inchiostro);
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: background-color .16s ease, transform .16s var(--ease-out);
}
.cal-nav .ico { width: 10px; height: 18px; }
.cal-nav:active { transform: scale(.94); }
.cal-nav:disabled { opacity: .28; cursor: default; }
.cal-mese { margin: 0; font-size: clamp(1.0625rem, .9rem + .4vw, 1.25rem); font-weight: 560; text-align: center; }
/* il mese senza griglia: restano i numeri e la selezione */
.cal-settimana, .cal-giorni { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-settimana span { padding: 6px 0 8px; color: var(--grigio); font-size: .8125rem; font-weight: 520; text-align: center; }
.cal-giorno, .cal-vuoto { height: 44px; border: 0; background: none; }
.cal-giorno {
  position: relative;
  padding: 0;
  border-radius: 10px;
  color: var(--inchiostro);
  font: inherit; font-size: clamp(1rem, .9rem + .2vw, 1.125rem); font-weight: 480;
  cursor: pointer;
  transition: background-color .14s ease, color .14s ease;
}
.cal-giorno:disabled { color: #C7BEB9; cursor: default; }
.cal-giorno.occupato { color: #B3A79F; text-decoration: line-through; }
.cal-giorno.oggi::after {
  content: ""; position: absolute; left: 50%; bottom: 6px;
  width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--rosa);
}
.cal-giorno.nel-mezzo { background: var(--cipria); border-radius: 0; }
.cal-giorno.arrivo, .cal-giorno.partenza { background: var(--tortora); color: #fff; }
.cal-giorno.arrivo::after, .cal-giorno.partenza::after { background: #fff; }
.cal-giorno:focus-visible { outline: 2px solid var(--fuoco); outline-offset: -3px; }
.cal-giorno.arrivo:focus-visible, .cal-giorno.partenza:focus-visible { outline-color: #fff; }
.corpo-sep { align-self: stretch; width: 1px; margin: 10px 0; background: var(--linea-scura); }
.info { display: flex; flex-direction: column; gap: 22px; }
.info p { margin: 0; }
.info-paga { display: flex; align-items: center; gap: 18px; font-size: clamp(1.1875rem, .85rem + .9vw, 1.5rem); font-weight: 560; line-height: 1.2; }
.info-paga img { width: clamp(56px, 5.2vw, 76px); flex: none; }
.info-chiama { display: flex; align-items: flex-start; gap: 16px; font-size: clamp(1.0625rem, .9rem + .4vw, 1.25rem); line-height: 1.45; }
.info-chiama .ico-tel { width: 30px; height: 31px; margin: 4px 0 0 clamp(10px, 1.4vw, 22px); color: var(--rosa); }
.info-chiama a { display: inline-block; padding-bottom: 10px; text-decoration: none; background: url("/assets/img/icone/sottolineatura-ocra.svg") no-repeat 0 100% / 100% 10px; }
.cal-tazzina {
  position: absolute; z-index: 2; left: clamp(-30px, -2vw, -10px); bottom: -16px;
  width: clamp(92px, 10vw, 146px);
  pointer-events: none;
}

@media (min-width: 760px) and (max-width: 1399px) {
  .cal-tazzina { bottom: calc(-1 * clamp(56px, 6vw, 84px)); width: clamp(84px, 8.6vw, 120px); translate: none !important; }
}

/* ── camere: quattro finestre ad arco, senza scatola ──────────────────── */
.camere { margin-top: var(--aria); }
.carosello { position: relative; margin-top: clamp(22px, 2.8vw, 40px); }
.carosello-binario {
  --spazio: clamp(18px, 2.6vw, 40px);
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--spazio)) / 3);
  gap: var(--spazio);
  margin: 0; padding: 0 0 clamp(18px, 2vw, 28px);
  list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carosello-binario::-webkit-scrollbar { display: none; }
.scheda { display: flex; flex-direction: column; scroll-snap-align: start; }
.scheda-foto { aspect-ratio: .86; overflow: hidden; border-radius: 1000px 1000px 0 0; background: var(--pietra); }
.scheda-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transition: transform 700ms var(--ease-out); }
.scheda h3 { margin: clamp(16px, 1.6vw, 22px) 0 6px; font-size: clamp(1.25rem, 1rem + .6vw, 1.5rem); font-weight: 560; line-height: 1.2; letter-spacing: -.008em; }
/* le frasi del copy vanno a capo bilanciate, mai una parola sola sull'ultima riga */
.scheda-prezzo, .scheda-nota, .servizi-riga span, .verso-mete span, .posizione-etichetta span, .voto-giudizio, .voto-fonte,
.recensione blockquote p, .recensione-firma, .passo-testo, .domanda-q, .domanda[open] .domanda-a { text-wrap: balance; }
.scheda-dettagli { min-height: 2.9em; margin: 0; color: var(--grigio); font-size: clamp(1rem, .9rem + .3vw, 1.125rem); line-height: 1.45; }
.scheda-prezzo { margin: auto 0 0; padding-top: 14px; color: var(--cioccolato); font-size: clamp(1.0625rem, .95rem + .3vw, 1.1875rem); font-weight: 560; line-height: 1.25; }
.scheda-nota { margin: 2px 0 0; color: var(--grigio); font-size: .9375rem; line-height: 1.45; }
.scheda-link {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  margin: 12px 0 0; padding: 4px 0;
  color: var(--cioccolato); font-size: clamp(1.0625rem, .95rem + .3vw, 1.1875rem); font-weight: 560;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
}
.scheda-link .ico { width: .6em; height: .6em; transition: transform .2s var(--ease-out); }
.carosello-freccia {
  position: absolute; z-index: 2; top: 30%;
  display: grid; place-items: center;
  width: clamp(46px, 3.6vw, 54px); height: clamp(46px, 3.6vw, 54px); padding: 0;
  border: 1px solid var(--tortora); border-radius: 50%;
  background: var(--bianco); color: var(--tortora);
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: background-color .16s ease, color .16s ease, opacity .16s ease, transform .16s var(--ease-out);
}
.carosello-freccia .ico { width: 10px; height: 18px; }
.carosello-freccia:active { transform: scale(.95); }
.carosello-freccia:focus-visible { outline: 2px solid var(--cioccolato); outline-offset: -6px; }
.carosello-prima { left: calc(-1 * min(26px, var(--margine) - 8px)); }
.carosello-dopo { right: calc(-1 * min(26px, var(--margine) - 8px)); }
.contatore { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0; font-size: 1rem; font-weight: 520; letter-spacing: .02em; }
.contatore::before, .contatore::after { content: ""; width: clamp(50px, 7vw, 96px); height: 1px; background: var(--linea-scura); }

/* ── servizi ──────────────────────────────────────────────────────────── */
.servizi { margin-top: clamp(26px, 3vw, 44px); }
.servizi-riga { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 10px 0; list-style: none; border-block: 1px solid var(--linea); }
.servizi-riga li { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 18px 14px; font-size: clamp(1rem, .9rem + .25vw, 1.125rem); font-weight: 520; line-height: 1.3; }
.servizi-riga li + li { border-left: 1px solid var(--linea); }
.servizi-riga img { width: auto; height: clamp(42px, 3.8vw, 54px); }

/* ── dove siamo: una banda crema a tutta larghezza ────────────────────── */
.posizione { margin-top: var(--aria); padding: clamp(40px, 5.4vw, 80px) 0 clamp(24px, 2.8vw, 40px); background: var(--crema); }
.posizione-carta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
  grid-template-areas: "sinistra scavi" "verso verso";
  column-gap: clamp(24px, 4vw, 64px);
}
.posizione-sinistra { grid-area: sinistra; min-width: 0; }
.posizione-testa { display: flex; align-items: flex-start; gap: clamp(14px, 1.6vw, 22px); }
.posizione-colonna { width: auto; height: clamp(58px, 7vw, 104px); margin-top: -4px; flex: none; }
.posizione-mappa { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 26px); margin-top: clamp(16px, 2.2vw, 30px); }
.posizione-palazzo { width: clamp(118px, 13vw, 190px); flex: none; }
/* 2 Step: le foto vere al posto dei disegni. La targa del portone in un piccolo arco, gli Scavi in un arco largo,
   come i fornici della città antica; tutte e due con la cornice sottile dell'arco della hero */
.posizione-targa {
  flex: none; width: clamp(118px, 13vw, 190px); aspect-ratio: 640 / 813; margin: 0;
  overflow: hidden; border-radius: 1000px 1000px 0 0; background: var(--pietra);
  box-shadow: 0 0 0 1px var(--linea-scura), 0 0 0 5px var(--bianco), 0 0 0 6px var(--linea-scura), 0 22px 34px -24px rgba(70, 48, 36, .55);
}
.posizione-targa img { width: 100%; height: 100%; object-fit: cover; }
.posizione-foto {
  aspect-ratio: 1.38; overflow: hidden;
  border-radius: 1000px 1000px 0 0; background: var(--pietra);
  box-shadow: 0 0 0 1px var(--linea-scura), 0 0 0 6px var(--bianco), 0 0 0 7px var(--linea-scura), 0 32px 52px -34px rgba(70, 48, 36, .55);
}
.posizione-foto img { width: 100%; height: calc(100% + 36px); max-width: none; margin-top: -18px; object-fit: cover; object-position: 56% 50%; }
.posizione-foto + .posizione-etichetta { margin-top: 18px; }
.posizione-mappa:has(.posizione-targa) { margin-top: clamp(28px, 3.2vw, 46px); }   /* l'arco della targa non tocca il titolo */
.posizione-indirizzo { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: clamp(1.125rem, .9rem + .55vw, 1.375rem); line-height: 1.25; }
.posizione-indirizzo strong { font-weight: 560; }
.posizione-via { display: block; margin-top: 12px; color: var(--grigio); font-size: clamp(1rem, .9rem + .25vw, 1.125rem); line-height: 1.45; }
.posizione-arrivare {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 4px 0; white-space: nowrap;
  color: var(--cioccolato); font-size: clamp(1rem, .9rem + .25vw, 1.125rem); font-weight: 560;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.posizione-arrivare .ico { width: .6em; height: .6em; transition: transform .2s var(--ease-out); }
.ico-pin { width: 24px; height: 36px; color: var(--rosa); }
.posizione-indirizzo .ico-pin { margin-top: 2px; }
.posizione-percorso { flex: 1 1 0; min-width: 60px; max-width: 300px; transform: scaleY(-1); margin-top: 30px; }
.posizione-scavi { grid-area: scavi; position: relative; align-self: start; margin: 0; }
.posizione-rovine {
  width: 100%;
  filter: url("#carta-rovine");
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-composite: intersect;
}
.posizione-etichetta { position: relative; width: fit-content; margin: -6px 0 0 clamp(0px, 14%, 90px); display: flex; align-items: center; gap: 10px; font-size: clamp(1.0625rem, .9rem + .4vw, 1.25rem); font-weight: 560; }
.posizione-etichetta span { position: relative; z-index: 0; padding: 8px 20px 9px 16px; line-height: 1.25; }
.posizione-etichetta strong { position: relative; z-index: 0; display: block; width: fit-content; color: var(--rosa); font-weight: 560; }
.posizione-etichetta strong::before {
  content: ""; position: absolute; left: -7px; right: -12px; bottom: -4px; z-index: -1; height: .72em;
  background: url("/assets/img/icone/sottolineatura-ocra.svg") no-repeat center / 100% 100%;
  opacity: .6;
}
.verso {
  grid-area: verso;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px;
  margin-top: clamp(18px, 2.2vw, 28px); padding-top: clamp(14px, 1.8vw, 22px);
  border-top: 1px solid var(--linea-scura);
}
.verso-titolo { margin: 0; padding-right: clamp(14px, 2.4vw, 34px); color: var(--rosa); font-size: clamp(1.25rem, .95rem + .8vw, 1.5rem); font-weight: 500; line-height: 1.2; white-space: nowrap; }
.verso-titolo a { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.verso-titolo .ico { width: .55em; height: .55em; transition: transform .2s var(--ease-out); }
.verso-mete { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.verso-mete li { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 4px 10px; font-size: clamp(.875rem, .8rem + .2vw, 1rem); font-weight: 520; line-height: 1.3; }
.verso-mete strong { display: block; margin-top: 2px; color: var(--rosa); font-weight: 560; }
.verso-mete li + li { border-left: 1px solid var(--linea-scura); }
.verso-mete img { width: auto; height: clamp(40px, 3.6vw, 52px); }

/* ── galleria: la foto grande prende l'arco ───────────────────────────── */
.galleria { margin-top: var(--aria); }
.galleria-griglia {
  position: relative;
  display: grid;
  grid-template-columns: 2.1fr 1fr 1.18fr;
  grid-template-rows: repeat(2, clamp(140px, 19vw, 290px));
  gap: clamp(8px, 1.1vw, 16px);
  margin-top: clamp(20px, 2.6vw, 36px);
}
.galleria-grande { grid-row: 1 / span 2; }
.galleria-foto {
  position: relative;
  display: block; width: 100%; height: 100%; padding: 0;
  overflow: hidden;
  border: 0; border-radius: 6px;
  background: var(--pietra);
  cursor: zoom-in;
}
.galleria-griglia > .galleria-grande { border-radius: 1000px 1000px 6px 6px; }
.galleria-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.galleria-foto:active img { transform: scale(.99); }
.galleria-foto:focus-visible { outline: 3px solid transparent; outline-offset: -3px; }
.galleria-foto:focus-visible::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px var(--cioccolato), inset 0 0 0 6px #fff; }
.galleria-griglia > :nth-child(3) img { object-position: 50% 62%; }
.galleria-griglia > :nth-child(5) img { object-position: 22% 50%; }
.galleria-griglia > :nth-child(6) img { object-position: 36% 64%; }   /* l'80056 sul vetro dell'ingresso */
#galleria .galleria-griglia > :nth-child(5) img { object-position: 54% 50%; }   /* la targa dorata 80056 sulla porta */
.galleria-mattonella {
  position: absolute; z-index: 2;
  left: clamp(-34px, -2.3vw, -10px); top: clamp(-18px, -1.2vw, -8px);
  width: clamp(62px, 6.8vw, 98px);
  transform: rotate(-6deg);
  pointer-events: none;
}

/* ── recensioni: la banda scura a metà pagina ─────────────────────────── */
.recensioni { --fuoco: var(--chiaro); margin-top: var(--aria); padding: clamp(52px, 6.8vw, 100px) 0; background: var(--cioccolato); color: var(--chiaro); }
.recensioni .link-freccia { color: var(--ocra); }
.recensioni-griglia {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 2fr);
  gap: clamp(20px, 3.4vw, 52px); align-items: center;
  margin-top: clamp(20px, 2.6vw, 36px);
}
.voto { display: flex; align-items: center; gap: clamp(8px, 1.4vw, 20px); }
.voto-anfora { align-self: flex-end; width: clamp(54px, 5.8vw, 86px); margin-bottom: 18px; flex: none; }
.voto-testo { flex: 1; min-width: 0; text-align: center; container-type: inline-size; }
.voto-testo p { margin: 0; }
.voto-numero { color: var(--cioccolato); font-size: clamp(3rem, 2rem + 3vw, 4.25rem); font-size: min(clamp(4.25rem, 2.6rem + 4.6vw, 7rem), 38cqw); line-height: 1; letter-spacing: -.03em; white-space: nowrap; }
.voto-numero strong { font-weight: 280; }
.voto-numero span { font-size: .34em; font-weight: 400; letter-spacing: 0; }
.voto-testo .voto-giudizio { margin-top: 10px; color: var(--cioccolato); font-size: clamp(1.0625rem, .95rem + .3vw, 1.1875rem); font-weight: 560; line-height: 1.3; }
.voto-testo .voto-fonte { margin-top: 6px; font-size: clamp(.9375rem, .85rem + .25vw, 1.0625rem); line-height: 1.4; }
.voto-parziali { display: grid; grid-template-columns: 1fr 1fr; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--linea-scura); list-style: none; }
.voto-parziali li { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.voto-parziali li + li { border-left: 1px solid var(--linea-scura); }
.voto-parziali strong { color: var(--cioccolato); font-size: 1.75rem; font-weight: 400; line-height: 1.1; }
.voto-parziali span { font-size: clamp(1rem, .9rem + .2vw, 1.125rem); font-weight: 520; }
.recensioni .voto-numero, .recensioni .voto-parziali strong { color: #fff; }
.recensioni .voto-testo .voto-giudizio { color: var(--ocra); }
.recensioni .voto-parziali, .recensioni .voto-parziali li + li { border-color: rgba(248, 245, 243, .24); }
.recensioni-binario { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); margin: 0; padding: 0; list-style: none; }
.recensione {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(28px, 3vw, 44px) clamp(22px, 2.6vw, 40px) clamp(18px, 2vw, 26px);
  background: var(--carta);
  color: var(--inchiostro);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(50, 30, 20, .16), 0 24px 44px -26px rgba(30, 16, 8, .6);
}
.recensione blockquote { flex: 1; margin: clamp(46px, 1.4vw + 30px, 50px) 0 0; }
.recensione blockquote p { max-width: 14em; margin: 0; font-size: clamp(1.25rem, 1.05rem + .55vw, 1.5rem); font-weight: 420; line-height: 1.3; letter-spacing: -.008em; }
.recensione-firma { margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--linea); color: var(--grigio); font-size: clamp(.9375rem, .85rem + .25vw, 1.0625rem); }
.timbro { position: absolute; top: 8px; right: 10px; width: clamp(84px, 7.6vw, 108px); color: var(--rosa); transform: rotate(-8deg); container-type: inline-size; }
.timbro img { width: 100%; }
.timbro span {
  position: absolute; left: 0; top: 0; width: 68%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: .5625rem; font-size: 9.8cqw; font-weight: 700; line-height: 1.1; letter-spacing: 0; text-align: center; text-transform: uppercase;
  transform: rotate(-14deg);
}

/* ── come prenotare e domande ─────────────────────────────────────────── */
.come-prenotare { margin-top: var(--aria); }
.passi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(18px, 2.2vw, 30px) 0 0; padding: 0; list-style: none; }
.passi li { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 22px); padding: 6px clamp(10px, 2vw, 32px); }
.passi li:first-child { padding-left: 0; }
.passi li + li { border-left: 1px solid var(--linea-scura); padding-left: clamp(16px, 3vw, 48px); }
.passo-numero {
  display: grid; place-items: center; flex: none;
  width: clamp(52px, 4.4vw, 64px); aspect-ratio: 1;
  border-radius: 50%; background: var(--cipria); color: var(--cioccolato);
  font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem); font-weight: 420;
}
.passo-testo { font-size: clamp(1.0625rem, .95rem + .35vw, 1.25rem); font-weight: 520; line-height: 1.3; }
/* le domande senza fondo: filetti sottili, la risposta in un tono più chiaro */
.domande { margin-top: clamp(22px, 2.8vw, 40px); border-top: 1px solid var(--linea-scura); }
.domanda { border-bottom: 1px solid var(--linea-scura); }
.domanda summary {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 2fr) auto; align-items: center;
  min-height: 68px; padding: 10px 6px;
  list-style: none; cursor: pointer;
  transition: background-color .16s ease;
}
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary::marker { content: ""; }
.domanda-q { padding-right: 20px; font-size: clamp(1.0625rem, .95rem + .35vw, 1.25rem); font-weight: 540; line-height: 1.3; }
.domanda-a { overflow: hidden; padding: 4px 0; color: var(--grigio); font-size: clamp(1rem, .9rem + .3vw, 1.125rem); line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.domanda[open] .domanda-a { white-space: normal; }
.domanda .ico-giu { width: 13px; height: 8px; margin-left: 20px; color: var(--cioccolato); transition: transform .22s var(--ease-out); }
.domanda[open] .ico-giu { transform: rotate(180deg); }
.domanda summary:focus-visible { outline: 2px solid var(--fuoco); outline-offset: -3px; }

/* ── la fascia finale ─────────────────────────────────────────────────── */
.contatti { margin-top: clamp(36px, 4.6vw, 68px); padding-bottom: clamp(36px, 4vw, 60px); }
.contatti-riga { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); }
.contatti-riga > .btn { height: 56px; padding: 0 clamp(26px, 2.6vw, 38px); font-size: clamp(1.0625rem, .9rem + .45vw, 1.25rem); white-space: nowrap; }
.contatti-sep { width: 1px; height: 44px; background: var(--linea-scura); flex: none; }
.contatti-telefono { display: inline-flex; align-items: center; gap: 14px; padding: 8px 0; color: var(--cioccolato); font-size: 1.0625rem; font-weight: 560; text-decoration: none; white-space: nowrap; }
.contatti-telefono .ico-tel { width: 26px; height: 27px; color: var(--rosa); }
.contatti-percorso { display: flex; align-items: flex-start; flex: 1 1 0; justify-content: flex-end; min-width: 0; margin-left: auto; padding-top: 16px; }
.contatti-percorso img { width: clamp(90px, 13vw, 190px); min-width: 0; flex: 0 1 auto; }
.contatti-percorso img.capovolto { transform: scaleY(-1); }
.contatti-percorso .ico-pin { margin: -30px 0 0 -6px; flex: none; }
.contatti-tutti {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 0;
  color: var(--cioccolato); font-size: 1.0625rem; font-weight: 560; white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.contatti-tutti .ico { width: .6em; height: .6em; transition: transform .2s var(--ease-out); }

/* ── piede: chiude il sito in color cioccolato, con le cifre intere in filigrana ── */
.piede {
  --fuoco: var(--chiaro);
  position: relative;
  padding: clamp(30px, 3.2vw, 46px) 0 calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--cioccolato);
  color: var(--chiaro);
}
.piede::before {
  content: ""; position: absolute; inset: 14px var(--margine); pointer-events: none;
  background: url("/assets/img/logo/cifre-80056-sottile.svg") no-repeat center / contain;
  opacity: .2;
}
.piede > * { position: relative; }
.piede-riga { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: clamp(18px, 3vw, 44px); }
.piede-logo img { width: clamp(96px, 8vw, 118px); filter: brightness(0) invert(1); }
.piede-nome { padding-left: clamp(18px, 3vw, 44px); border-left: 1px solid rgba(248, 245, 243, .26); }
.piede-nome p { margin: 0; font-size: 1rem; line-height: 1.5; }
.piede-nome strong { font-size: 1.1875rem; font-weight: 560; }
.piede-link { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px clamp(16px, 2vw, 30px); padding: 6px clamp(18px, 3vw, 44px); border-left: 1px solid rgba(248, 245, 243, .26); border-right: 1px solid rgba(248, 245, 243, .26); }
.piede-link a { padding: 8px 0; font-size: 1rem; text-decoration: none; white-space: nowrap; }
.piede-nota { margin: 0; font-size: .9375rem; font-style: normal; line-height: 1.5; }
.piede-nota a { color: inherit; text-decoration: none; }
.piede-legale { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin-top: clamp(16px, 2vw, 24px); padding-top: 14px; border-top: 1px solid rgba(248, 245, 243, .26); font-size: .875rem; }
.piede-legale p { margin: 0; }
.piede-legale a { padding: 4px 0; }

/* barra fissa da telefono */
.barra-telefono { display: none; }

/* finestra delle foto */
html.finestra-aperta { overflow: hidden; scrollbar-gutter: stable; }
.lightbox { --fuoco: var(--chiaro); width: min(94vw, 1200px); max-width: none; max-height: 92vh; padding: 0; border: 0; border-radius: 12px; background: #15110F; color: #fff; overflow: hidden; overscroll-behavior: contain; touch-action: pan-y pinch-zoom; }
.lightbox.ingrandita { touch-action: auto; }
.lightbox[open] { display: grid; }
.lightbox::backdrop { background: rgba(21, 17, 15, .84); }
.lightbox-foto { display: grid; place-items: center; margin: 0; }
.lightbox-foto img { width: auto; max-width: 100%; height: auto; max-height: 88vh; }
.lightbox-chiudi, .lightbox-nav {
  position: absolute; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: rgba(254, 254, 254, .94); color: var(--tortora);
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: transform .16s var(--ease-out);
}
.lightbox-chiudi { top: 10px; right: 10px; width: 48px; height: 48px; color: var(--inchiostro); font-size: 30px; line-height: 1; }
.lightbox-nav { top: 50%; width: 52px; height: 52px; margin-top: -26px; }
.lightbox-nav .ico { width: 10px; height: 18px; }
.lightbox-prima { left: 10px; }
.lightbox-dopo { right: 10px; }
.lightbox-chiudi:active, .lightbox-nav:active { transform: scale(.94); }
.lightbox-chiudi:focus-visible, .lightbox-nav:focus-visible { outline: 2px solid var(--cioccolato); outline-offset: -6px; }
.lightbox-contatore { position: absolute; left: 50%; bottom: 10px; margin: 0; padding: 4px 12px; border-radius: 999px; background: rgba(0, 0, 0, .55); font-size: .875rem; transform: translateX(-50%); }

/* ── pagine di servizio: privacy, cookie, note legali, 404 ──────────────
   Il titolo resta fermo in una colonna, il testo scorre in una colonna di lettura. */
.pagina-corpo { padding-top: clamp(28px, 4vw, 64px); padding-bottom: clamp(56px, 7vw, 104px); }
.legale { display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); column-gap: clamp(32px, 6vw, 96px); }
.legale > * { grid-column: 2; max-width: 44em; }
.legale > h1 {
  grid-column: 1; grid-row: 1 / span 90;
  position: sticky; top: calc(var(--altezza-testata) + 32px); align-self: start;
  margin: 0;
  font-size: clamp(2.25rem, 1.2rem + 3.2vw, 4rem); font-weight: 250; line-height: 1.04; letter-spacing: -.03em;
}
.legale > h1::after {
  content: ""; display: block; width: clamp(90px, 11vw, 150px); aspect-ratio: 1 / 1.12; margin-top: clamp(20px, 2.4vw, 32px);
  border-radius: 1000px 1000px 0 0;
  background: url("/assets/img/icone/colonna.webp") no-repeat center 70% / auto 76%, var(--crema);
}
.legale[data-thk-modello="cookie"] > h1 { position: static; }
.legale > h1 + p { margin-top: 6px; color: var(--grigio); font-size: .9375rem; }
.legale h2 { margin: 40px 0 10px; padding-top: 22px; border-top: 1px solid var(--linea-scura); font-size: clamp(1.25rem, 1.1rem + .4vw, 1.4375rem); font-weight: 560; line-height: 1.25; letter-spacing: -.008em; }
.legale p, .legale li { line-height: 1.65; }
.legale ul, .legale ol { padding-left: 1.3em; }
.legale li + li { margin-top: 6px; }
.legale a { color: var(--cioccolato); text-underline-offset: 3px; }
.legale table { width: 100%; margin: 14px 0; border-collapse: collapse; font-size: .9375rem; }
.legale th, .legale td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.legale th { border-bottom-color: var(--linea-scura); font-weight: 560; }
.pagina-404 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 36%); column-gap: clamp(24px, 5vw, 72px); align-items: center; }
.pagina-404 > * { grid-column: 1; }
.pagina-404-numero {
  grid-column: 2; grid-row: 1 / span 3;
  display: grid; place-items: center;
  aspect-ratio: .84; margin: 0;
  border-radius: 1000px 1000px 0 0;
  background: var(--crema);
  color: var(--cioccolato); font-size: clamp(5rem, 2rem + 8vw, 9rem); font-weight: 200; line-height: 1; letter-spacing: -.04em;
}
.pagina-404 h1 { align-self: end; margin: 0 0 10px; font-size: clamp(2.25rem, 1.2rem + 3.2vw, 4rem); font-weight: 250; line-height: 1.04; letter-spacing: -.03em; }
.pagina-404 p:not(.pagina-404-numero) { margin: 0; color: var(--grigio); font-size: clamp(1.0625rem, .95rem + .4vw, 1.3125rem); }
.pagina-404 p.pagina-404-azioni { align-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 28px; }

/* ── movimento (step 5-bis) ─────────────────────────────────────────────────
   Come si muove: le regole di Emil Kowalski (09 § 0-bis-2): entrate con --ease-out, spostamenti con --ease-in-out,
   solo transform, translate e opacity (il clip-path solo per i tratti che si disegnano), uscite più veloci delle
   entrate, hover solo col mouse, :active al tocco, con «riduci animazioni» meno movimento ma non zero. */
@keyframes sali { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@keyframes sali-poco { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes appare { from { opacity: 0; } to { opacity: 1; } }
@keyframes appare-cifre { from { opacity: 0; } to { opacity: .9; } }
@keyframes disegna { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes assesta { from { transform: scale(1.07); } to { transform: scale(1); } }
@keyframes mese-avanti { from { opacity: .3; translate: 22px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes mese-indietro { from { opacity: .3; translate: -22px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes scelto { from { transform: scale(.82); } to { transform: scale(1); } }
@keyframes finestra { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* la prima schermata: l'80056 si disegna da sinistra, la foto nell'arco si assesta (non parte mai invisibile),
   le cifre bianche arrivano sulla foto, titolo, testo e pulsante salgono uno dopo l'altro, poi arriva il biglietto */
.hero-cifre { animation: disegna 1600ms var(--ease-out) 60ms backwards; }
.arco img { animation: assesta 1700ms var(--ease-out) both; }
.arco::after { animation: appare-cifre 1100ms ease 800ms both; }
.hero h1 { animation: sali 900ms var(--ease-out) 140ms both; }
.hero-sotto { animation: sali 900ms var(--ease-out) 220ms both; }
.hero .btn-grande { animation: sali 900ms var(--ease-out) 300ms both; }
.biglietto-ombra { animation: sali 900ms var(--ease-out) 420ms both; }

/* le sezioni arrivano scorrendo; nei gruppi un elemento dopo l'altro (il ritardo lo mette main.js, 70 ms) */
.reveal { transition: opacity 700ms var(--ease-out), translate 850ms var(--ease-out); }
/* i percorsi tratteggiati si disegnano: dalla porta del B&B agli Scavi, dal pulsante al segnaposto */
.reveal-tracciato { clip-path: inset(0 0 0 0); transition: clip-path 1400ms var(--ease-in-out) 300ms; }
/* il segnaposto sporge sopra il percorso: il taglio che lo disegna non deve mangiarlo */
.contatti-percorso.reveal-tracciato { clip-path: inset(-20px -10px 0 0); }
/* nascosti in attesa solo se main.js può farli entrare: con JavaScript spento o main.js che non arriva, si vede tutto */
@media (scripting: enabled) {
  html:not(.senza-js) .reveal:not(.in) { opacity: 0; translate: 0 28px; }
  html:not(.senza-js) .reveal-tracciato:not(.in) { clip-path: inset(0 100% 0 0); }
  html:not(.senza-js) .contatti-percorso.reveal-tracciato:not(.in) { clip-path: inset(-20px 100% 0 0); }
}

/* la barra di avanzamento sotto la testata */
.avanzamento {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--tortora); opacity: .8;
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}

/* il numero del voto con cifre di larghezza fissa */
.voto-numero strong, .voto-parziali strong { font-variant-numeric: tabular-nums; }

/* il calendario: il mese scivola nella direzione della freccia, il giorno scelto risponde */
.cal-giorni.avanti { animation: mese-avanti 280ms var(--ease-out); }
.cal-giorni.indietro { animation: mese-indietro 280ms var(--ease-out); }
.cal-giorno.appena { animation: scelto 220ms var(--ease-out); }

/* finestra delle foto e menu da telefono */
.lightbox[open] { animation: finestra 260ms var(--ease-out); }
.lightbox[open]::backdrop { animation: appare 260ms ease; }
.menu-telefono:not([hidden]) { animation: appare 220ms ease both; }
.menu-telefono:not([hidden]) .menu-telefono-voci a,
.menu-telefono:not([hidden]) > .btn,
.menu-telefono:not([hidden]) > .menu-telefono-chiama { animation: sali-poco 420ms var(--ease-out) both; }
.menu-telefono-voci a:nth-child(2) { animation-delay: 40ms; }
.menu-telefono-voci a:nth-child(3) { animation-delay: 80ms; }
.menu-telefono-voci a:nth-child(4) { animation-delay: 120ms; }
.menu-telefono-voci a:nth-child(5) { animation-delay: 150ms; }
.menu-telefono-voci a:nth-child(6) { animation-delay: 180ms; }
.menu-telefono-voci a:nth-child(7) { animation-delay: 210ms; }
.menu-telefono-voci a:nth-child(8) { animation-delay: 240ms; }
.menu-telefono > .btn { animation-delay: 270ms; }
.menu-telefono > .menu-telefono-chiama { animation-delay: 300ms; }

/* ── il mouse ─────────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--cioccolato); }
  .menu a:hover { color: var(--tortora); }
  .cal-nav:not(:disabled):hover { background: var(--cipria); }
  .cal-giorno:not(:disabled):not(.arrivo):not(.partenza):hover { background: var(--cipria); }
  .campo-controllo select:hover, button.campo-data:hover { border-color: var(--linea-scura); }
  .carosello-freccia:not(:disabled):hover { background: var(--tortora); color: #fff; }
  .scheda-link:hover, .link-freccia:hover { color: var(--tortora); }
  .recensioni .link-freccia:hover { color: #fff; }
  .recensioni .btn:hover { background: #fff; }
  .galleria-foto:hover img { transform: scale(1.04); }
  .scheda:hover .scheda-foto img { transform: scale(1.05); }
  .link-freccia:hover .ico, .scheda-link:hover .ico, .verso-titolo a:hover .ico,
  .posizione-arrivare:hover .ico, .contatti-tutti:hover .ico { transform: translate(2px, -2px); }
  .verso-titolo a:hover, .posizione-arrivare:hover, .contatti-tutti:hover { color: var(--tortora); }
  .domanda summary:hover { background: var(--crema); }
  .contatti-telefono:hover, .menu-telefono-chiama:hover { color: var(--tortora); }
  .piede-link a:hover, .piede-nota a:hover, .piede-legale a:hover { color: var(--ocra); }
  .lightbox-chiudi:hover, .lightbox-nav:hover { background: #fff; }
}

/* ── tablet ───────────────────────────────────────────────────────────── */
@media (max-width: 1279px) {
  /* i campi su due colonne: la data intera («28 nov 2026») ci sta sempre */
  .campi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campo-camera { grid-column: 1 / -1; }
}
@media (max-width: 1099px) {
  /* da tablet il testo della hero è più alto (il pulsante sta sotto): più spazio, così non tocca le cifre */
  .hero {
    --h: max(calc(52 * var(--u)), min(calc(66 * var(--u)), calc(100svh - var(--altezza-testata) - 14px)));
    --testo: calc(12.2 * var(--u) + 112px);
  }
  .arco::after { background-image: url("/assets/img/logo/cifre-80056-media.svg"); }
  .hero .btn-grande { position: static; height: 50px; margin-top: 14px; padding: 0 26px; font-size: 1.0625rem; }
  .corpo { grid-template-columns: minmax(0, 1.2fr) 1px minmax(0, 1fr); }
  .verso-mete li, .servizi-riga li { flex-direction: column; gap: 8px; text-align: center; }
  .passi li { flex-direction: column; gap: 10px; text-align: center; }
  .contatti-riga { flex-wrap: wrap; }
  .contatti-percorso { display: none; }
  .contatti-tutti { margin-left: auto; }
}
@media (min-width: 760px) and (max-width: 1099px) {
  /* il piede: i link su una riga loro */
  .piede-riga { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 14px; }
  .piede-link { grid-column: 1 / -1; grid-row: 2; padding: 12px 0 0; border: 0; border-top: 1px solid rgba(248, 245, 243, .26); }
}
@media (max-width: 959px) {
  .domanda summary { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "q freccia" "a a"; row-gap: 4px; padding: 14px 4px; }
  .domanda-q { grid-area: q; padding-right: 10px; }
  .domanda-a { grid-area: a; padding: 0; }
  .domanda .ico-giu { grid-area: freccia; }
  .verso { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .verso-titolo { padding-right: 0; }
  .verso-mete { grid-template-columns: 1fr 1fr; }
  .verso-mete li { padding: 12px 6px; }
  .verso-mete li + li { border-left: 0; }
  .verso-mete li:nth-child(2n) { border-left: 1px solid var(--linea-scura); }
  .verso-mete li:nth-child(n+3) { border-top: 1px solid var(--linea-scura); }
}
@media (max-width: 1339px) {
  :root { --altezza-testata: 76px; }
  .marchio-logo { width: 84px; }
  .marchio-sep { height: 36px; }
  .marchio { gap: 16px; }
  .testata-riga { gap: 14px; }
}
@media (max-width: 1099px) {
  .menu { display: none; }
  .menu-apri { display: grid; }
}

/* ── telefono (versione ricavata dal design da computer, coi pezzi del kit) ── */
@media (max-width: 759px) {
  :root { --altezza-testata: 64px; }
  body { font-size: 1rem; padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .marchio-logo { width: 56px; }
  .marchio-sep { height: 30px; }
  .marchio { gap: 10px; }
  .marchio-nome { font-size: .9375rem; }
  .btn-prenota { display: none; }

  /* hero: prima l'arco, grande, con dietro le cifre intere; poi il titolo */
  .hero {
    --a-b: 4px;
    --a-l: calc(15 * var(--u)); --a-t: calc(13 * var(--u)); --a-w: calc(81 * var(--u));
    --a-h: min(calc(104 * var(--u)), 58svh);
    --d-l: calc(3 * var(--u)); --d-t: calc(2 * var(--u)); --d-w: calc(94 * var(--u));
  }
  .hero-griglia { height: auto; padding-top: calc(var(--a-t) + var(--a-h) + 26px); }
  .hero-testo { position: relative; left: auto; bottom: auto; width: auto; padding-inline: var(--margine); }
  .arco { bottom: auto; height: var(--a-h); box-shadow: 0 0 0 1px var(--linea-scura), 0 0 0 6px var(--bianco), 0 0 0 7px var(--linea-scura), 0 26px 44px -26px rgba(70, 48, 36, .5); }
  .hero h1 { margin-bottom: 14px; font-size: clamp(1.75rem, 9.1vw, 2.5rem); line-height: 1.07; }
  .hero h1 br:nth-of-type(2) { display: inline; }
  .hero .btn-grande { width: 100%; height: 56px; margin-top: 18px; font-size: 1.125rem; }

  /* il biglietto in colonna: campi, mese, richiesta, poi «paghi all'arrivo» */
  .disponibilita { margin-top: 28px; }
  .biglietto {
    --morso: 7px; --passo: 21px; --tacca: 0px; --cima: 26px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "campi" "cal" "stub" "messaggio" "nota" "paga" "chiama" "cin";
    padding: var(--cima) 20px 92px;
  }
  .campi { gap: 14px 12px; padding-right: 0; }
  .campo:last-child { grid-column: 1 / -1; }
  .campo label, .campo-etichetta { margin-bottom: 7px; font-size: 1rem; }
  .corpo { display: contents; }
  .cal { grid-area: cal; max-width: none; margin-top: 22px; }
  .corpo-sep { display: none; }
  .stub { margin-top: 24px; padding: 24px 0 0; }
  .stub::before {
    left: -8px; right: -8px; top: -3px; bottom: auto; width: auto; height: 6px;
    background: radial-gradient(ellipse 4.5px 3px at 50% 50%, var(--filo) 92%, #0000 100%) 0 0 / 15px 6px repeat-x;
  }
  .btn-wa { min-height: 62px; font-size: 1.125rem; }
  .cal-messaggio { min-height: 0; }
  .cal-messaggio:empty { display: none; }
  .info { display: contents; }
  .info .thk-avviso-modulo { grid-area: nota; margin-top: 12px; }
  .info .info-paga { grid-area: paga; margin-top: 28px; }
  .info .info-chiama { grid-area: chiama; margin-top: 18px; }
  .info .cin-posto, .info .thk-cin { grid-area: cin; margin-top: 14px; }
  .btn-wa br { display: none; }
  .ico-wa { width: 30px; height: 30px; }
  .info-paga { gap: 16px; }
  .info-chiama { gap: 16px; }
  .info-chiama .ico-tel { width: 28px; height: 29px; margin-left: 14px; }
  .cal-tazzina { left: -8px; bottom: -14px; width: 104px; }

  /* camere: una riga che scorre col dito */
  .carosello-binario {
    grid-auto-columns: 78%; --spazio: 14px;
    margin-inline: calc(-1 * var(--margine));
    padding: 0 var(--margine) 18px;
    scroll-padding-inline: var(--margine);
  }
  .carosello-freccia { display: none; }
  .scheda-dettagli { min-height: 0; }
  .scheda-foto { aspect-ratio: .92; }

  /* servizi: due per riga */
  .servizi-riga { grid-template-columns: 1fr 1fr; row-gap: 0; padding: 0; }
  .servizi-riga li { flex-direction: column; gap: 10px; padding: 16px 8px; font-size: .9375rem; text-align: center; }
  .servizi-riga li + li { border-left: 0; }
  .servizi-riga li:nth-child(2n) { border-left: 1px solid var(--linea); }
  .servizi-riga li:nth-child(n+3) { border-top: 1px solid var(--linea); }
  .servizi-riga img { height: 46px; }

  /* posizione */
  .posizione-carta { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sinistra" "scavi" "verso"; }
  .posizione-mappa { gap: 12px; }
  .posizione-indirizzo strong br { display: none; }
  .posizione-palazzo { width: 104px; }
  .posizione-targa { width: 116px; box-shadow: 0 0 0 1px var(--linea-scura), 0 0 0 4px var(--bianco), 0 0 0 5px var(--linea-scura); }
  .posizione-scavi:has(.posizione-foto) { margin-top: 26px; }
  .posizione-foto { aspect-ratio: 1.22; }
  .posizione-percorso { display: none; }
  .posizione-scavi { margin-top: 10px; }
  .verso-mete li { flex-direction: column; justify-content: center; gap: 6px; padding: 12px 6px; font-size: .9375rem; text-align: center; }
  .verso-mete img { height: 38px; }

  /* galleria: mosaico a due colonne, mai una foto sola in una riga */
  .galleria-griglia { grid-template-columns: 1.25fr 1fr; grid-template-rows: repeat(3, 31vw); }
  .galleria-grande { grid-row: 1 / span 2; }
  .galleria-mattonella { left: -8px; top: -12px; width: 58px; }

  /* recensioni: le schede scorrono col dito */
  .recensioni-griglia { grid-template-columns: minmax(0, 1fr); }
  .voto { padding: 0 4px; }
  .recensioni-binario {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 88%;
    gap: 14px;
    margin-inline: calc(-1 * var(--margine));
    padding: 8px var(--margine) 12px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--margine);
    scrollbar-width: none;
  }
  .recensioni-binario::-webkit-scrollbar { display: none; }
  .recensione { scroll-snap-align: start; padding: 26px 20px 18px; }
  .recensione blockquote { margin-top: 48px; }
  .recensione blockquote p { max-width: none; font-size: 1.1875rem; }

  /* passi e domande: da telefono i passi uno sotto l'altro, il numero a sinistra */
  .passi { grid-template-columns: minmax(0, 1fr); }
  .passi li { flex-direction: row; gap: 16px; padding: 10px 0; text-align: left; }
  .passi li:first-child { padding-top: 4px; }
  .passi li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--linea); }
  .passo-numero { width: 46px; font-size: 1rem; }
  .passo-testo { font-size: 1rem; }
  .domanda-q { font-size: 1.0625rem; }
  .domanda-a { font-size: 1rem; }

  /* la fascia finale */
  .contatti-riga { flex-direction: column; align-items: stretch; gap: 10px; }
  .contatti-riga .btn { width: 100%; }
  .contatti-sep, .contatti-percorso { display: none; }
  .contatti-telefono, .contatti-tutti { justify-content: center; }
  .contatti-tutti { margin-left: 0; }

  /* piede */
  .piede::before { inset: 20px var(--margine) auto; height: 28vw; opacity: .14; }
  .piede-riga { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; text-align: center; }
  .piede-nome, .piede-link { padding: 0; border: 0; }
  .piede-link { gap: 0 22px; }
  .piede-legale { flex-direction: column; align-items: center; text-align: center; }

  /* le pagine di servizio: titolo sopra, testo sotto */
  .legale { display: block; }
  .legale > h1 { position: static; }
  .legale > h1::after { display: none; }
  /* la tabella dei cookie: ogni riga diventa una scheda, l'intestazione resta per chi legge con la voce */
  .legale table, .legale tbody, .legale tr, .legale td { display: block; width: 100%; }
  .legale thead, .legale tr:has(th) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .legale tr { padding: 12px 0; border-bottom: 1px solid var(--linea); }
  .legale td { padding: 2px 0; border: 0; }
  .legale td:first-child { font-weight: 560; }
  .pagina-404 { display: block; }
  .pagina-404-numero { width: min(62vw, 240px); margin-bottom: 24px; }
  .pagina-404 h1 { margin-bottom: 8px; }

  /* i bersagli di tocco: 44 px. Sui blocchi il padding in più è compensato da un margine negativo, sui link in riga il padding
     non sposta niente: l'impaginazione resta com'è */
  .marchio { padding-block: 4px; }
  .link-freccia, .contatti-tutti, .contatti-telefono { padding-block: 9px; margin-block: -1px; }
  .scheda-link { margin-block: 7px -5px; padding-block: 9px; }
  .posizione-arrivare { margin-block: 0 -8px; padding-block: 12px; }
  .verso-titolo a { margin-block: -4px; padding-block: 10px; }
  .info-chiama a { margin-top: -9px; padding-top: 9px; }
  .piede-link a { margin-block: -2px; padding-block: 10px; }
  .piede-nota a:first-child { padding-top: 2px; }
  .piede-nota a:last-child { padding-bottom: 24px; }
  .piede-legale a { padding-block: 13px; }
  .thk-avviso-modulo a { padding-block: 14px; }
  .legale a { padding-block: 12px; }

  /* barra fissa in basso, lontana dalla barra dell'iPhone */
  .barra-telefono {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; gap: 10px;
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: var(--bianco);
    border-top: 1px solid var(--linea);
    box-shadow: 0 -10px 26px -14px rgba(60, 40, 30, .28);
  }
  .barra-telefono .btn { flex: 1; height: 52px; padding: 0 16px; white-space: nowrap; }
  .barra-chiama {
    display: grid; place-items: center; flex: none;
    width: 52px; height: 52px;
    border: 1.5px solid var(--tortora); border-radius: 12px;
    color: var(--tortora);
    user-select: none; -webkit-user-select: none;
    transition: transform .16s var(--ease-out);
  }
  .barra-chiama .ico { width: 22px; height: 23px; }
  .barra-chiama:active { transform: scale(.95); }
  html.menu-aperto .barra-telefono { display: none; }
  html.js .barra-telefono { transform: translateY(calc(100% + 12px)); transition: transform 220ms var(--ease-out); }
  html.js .barra-telefono.visibile { transform: none; transition-duration: 340ms; }
}
@media (max-width: 599px) {
  .arco::after { background-image: url("/assets/img/logo/cifre-80056-spessa.svg"); }
}
@media (max-width: 379px) {
  .marchio-sep, .marchio-nome { display: none; }
  .verso-mete img { height: 34px; }
  .info-paga img { width: 54px; }
  .barra-telefono .btn { padding: 0 10px; font-size: .9375rem; }
}

/* ── pagine interne ─────────────────────────────────────────────────────────
   Gli stessi pezzi della home, ricomposti: qui c'è solo come stanno insieme. Tutto sotto .pagina-interna o
   .pagina-<nome>, le classi di <body>: la home non le vede. Il movimento è quello della home. */

/* il testo delle sezioni è quello delle schede */
.pagina-interna .scheda-dettagli { min-height: 0; max-width: 36em; color: var(--inchiostro); font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem); line-height: 1.5; }
.pagina-interna .scheda-dettagli + .scheda-dettagli { margin-top: 10px; }

/* il titolo della pagina: stessa famiglia della hero, le cifre più piccole come una corona dietro l'arco */
.pagina-interna .hero-sotto { max-width: 30em; }
.pagina-interna .hero-sotto + .hero-sotto { margin-top: 8px; }
@media (min-width: 760px) {
  .pagina-interna .hero {
    --a-l: calc(61 * var(--u)); --a-t: calc(7.4 * var(--u)); --a-w: calc(34 * var(--u));
    --d-l: calc(50.4 * var(--u)); --d-t: calc(1 * var(--u)); --d-w: calc(47 * var(--u));
  }
  .pagina-interna .hero-griglia {
    display: flex; align-items: center;
    height: auto; min-height: calc(46 * var(--u));
    padding: calc(4 * var(--u)) calc(44 * var(--u)) calc(2 * var(--u)) var(--margine);
  }
  .pagina-interna .hero-testo { position: relative; left: auto; bottom: auto; width: 100%; }
  .pagina-interna .hero h1 { margin-bottom: calc(1.2 * var(--u)); font-size: calc(4.4 * var(--u)); line-height: 1.05; }
  .pagina-interna .hero .btn-grande { position: static; height: 56px; margin-top: calc(1.6 * var(--u)); padding: 0 34px; font-size: 1.125rem; }
  .pagina-interna .hero-testo .contatti-tutti { margin-left: clamp(16px, 2vw, 28px); }
}
@media (min-width: 760px) and (max-width: 1099px) {
  /* da tablet il testo è più largo in proporzione: la corona delle cifre si stringe intorno all'arco e non lo tocca */
  .pagina-interna .hero { --d-l: calc(56.4 * var(--u)); --d-w: calc(40.6 * var(--u)); }
}
.pagina-interna .hero-testo .contatti-tutti { white-space: normal; }

/* le sezioni */
.pagina-interna .posizione-colonna { height: clamp(52px, 5.6vw, 84px); }
.pagina-interna .posizione-sinistra > .scheda-dettagli:first-of-type { margin-top: clamp(14px, 1.6vw, 22px); }
.pagina-interna .posizione-arrivare { margin-top: 12px; }
.pagina-interna .posizione { padding-bottom: clamp(40px, 5.4vw, 80px); }
.pagina-interna .posizione-carta { grid-template-columns: minmax(0, 1fr) minmax(0, 42%); }
.pagina-interna .posizione-scavi > img:not(.posizione-rovine) { width: 100%; aspect-ratio: .94; object-fit: cover; object-position: 24% 42%; border-radius: 1000px 1000px 0 0; }
.pagina-interna .posizione-scavi.galleria-griglia { grid-template-columns: 1fr 1fr; grid-template-rows: none; margin: 0; }
.pagina-interna .posizione-scavi.galleria-griglia .galleria-foto { aspect-ratio: .8; border-radius: 1000px 1000px 0 0; }
.pagina-interna .posizione-scavi.galleria-griglia > :nth-child(n) img { object-position: 50% 50%; }
.pagina-interna .testa-sezione + .servizi-riga { margin-top: clamp(14px, 1.8vw, 26px); }
.pagina-interna .servizi { margin-top: var(--aria); }
.pagina-interna .servizi-riga + .scheda-dettagli, .pagina-interna .galleria-griglia + .scheda-dettagli { margin-top: clamp(16px, 1.8vw, 26px); }
.pagina-interna .testa-sezione.posizione-testa { align-items: center; }
.pagina-interna .testa-sezione.posizione-testa + .domande { margin-top: clamp(12px, 1.6vw, 22px); }
.pagina-interna .scheda h2 { margin: 0; font-size: clamp(1.375rem, 1.05rem + .9vw, 1.75rem); font-weight: 520; line-height: 1.15; letter-spacing: -.012em; }
.pagina-interna .scheda .posizione-testa { align-items: center; margin-bottom: 14px; }
.pagina-interna .recensioni-binario > .scheda { scroll-snap-align: none; }
.pagina-interna .recensioni-binario:has(> .scheda) { gap: 0; }
.pagina-interna .recensioni-binario > .scheda { padding: 4px clamp(20px, 3vw, 48px); border-left: 1px solid var(--linea-scura); }
.pagina-interna .recensioni-binario > .scheda:first-child { padding-left: 0; border-left: 0; }
.pagina-interna .recensioni-binario > .scheda:last-child { padding-right: 0; }
.pagina-interna .voto-fonte { margin: 0 0 6px; font-size: clamp(1rem, .9rem + .3vw, 1.125rem); line-height: 1.45; }
.pagina-interna .hero-sotto + .voto-fonte { margin-top: 8px; }
.pagina-interna .menu a[aria-current="page"] { color: var(--tortora); }
.pagina-interna .piede-link a[aria-current="page"] { color: var(--ocra); }

/* /camere: i quattro rimandi, in una barra che resta sotto la testata */
.pagina-camere nav.servizi {
  position: sticky; top: var(--altezza-testata); z-index: 30;
  margin-top: clamp(20px, 2.6vw, 38px);
  background: var(--bianco);
}
.pagina-camere nav .servizi-riga { padding: 0; }
.pagina-camere nav .servizi-riga li { padding: 0; }
.pagina-camere nav .servizi-riga a { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 8px 10px; color: inherit; font-size: 1rem; text-decoration: none; transition: color .16s ease, box-shadow .16s ease; }
.pagina-camere nav .servizi-riga img { width: 40px; height: auto; aspect-ratio: 1 / 1.14; object-fit: cover; border-radius: 999px 999px 0 0; }
.pagina-camere nav .ico-giu { width: 11px; height: 7px; color: var(--cioccolato); transition: transform .2s var(--ease-out); }
.pagina-camere nav.servizi a[aria-current] { color: var(--cioccolato); box-shadow: inset 0 -2px 0 var(--tortora); }

/* /camere: le schede */
.pagina-camere .campo-data { scroll-margin-top: 70px; }
@media (hover: none) and (pointer: coarse) { .pagina-camere { cursor: pointer; } }
.pagina-camere .camere { margin-top: 0; padding-top: clamp(44px, 5.8vw, 88px); scroll-margin-top: 40px; }
.pagina-camere .camere .testa-sezione h2 { font-size: clamp(1.875rem, 1.1rem + 2.6vw, 3.5rem); }
.pagina-camere .camere .testa-sezione { align-items: baseline; }
/* la riga delle foto arriva al bordo dello schermo, ognuna con le sue proporzioni */
.pagina-camere .camere { overflow-x: clip; }
.pagina-camere .carosello { --alta: clamp(200px, 23vw, 340px); --fuori: calc(var(--margine) + max(0px, (100vw - 1600px) / 2)); margin-top: clamp(14px, 1.6vw, 22px); }
.pagina-camere .carosello-binario {
  --spazio: clamp(8px, .9vw, 12px);
  grid-auto-columns: max-content;
  margin-right: calc(-1 * var(--fuori)); padding: 0 var(--fuori) 12px 0;
}
.pagina-camere .carosello-binario li { scroll-snap-align: start; }
.pagina-camere .carosello .galleria-foto { width: auto; height: auto; }
.pagina-camere .carosello .galleria-foto img { width: auto; max-width: none; height: var(--alta); }
.pagina-camere .carosello-freccia { top: calc(var(--alta) / 2 - 27px); }
.pagina-camere .carosello-prima { left: -16px; }
.pagina-camere .carosello-dopo { right: -16px; }
.pagina-camere .contatore { justify-content: flex-start; font-size: .9375rem; }
.pagina-camere .contatore::before { display: none; }
.pagina-camere .contatore::after { width: clamp(50px, 6vw, 80px); }

/* /camere: testo, tre icone e prezzo, accanto al biglietto */
.pagina-camere .camere .scheda { margin-top: clamp(14px, 1.6vw, 22px); }
.pagina-camere .scheda .info { gap: 0; }
.pagina-camere .scheda .servizi-riga { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; padding: 8px 0; border-color: var(--linea-scura); }
.pagina-camere .scheda .servizi-riga li { flex-direction: column; gap: 6px; padding: 4px; font-size: .9375rem; text-align: center; }
.pagina-camere .scheda .servizi-riga li + li { border-color: var(--linea-scura); }
.pagina-camere .scheda .servizi-riga img { height: 42px; }
.pagina-camere .camere .scheda-prezzo { padding-top: 16px; }
.pagina-camere .biglietto-ombra { margin-top: clamp(14px, 1.6vw, 22px); animation: none; }
.pagina-camere .campo-camera { display: none; }
.biglietto[data-mesi="2"] { --cima: 24px; --lato: clamp(24px, 2.6vw, 40px); --stub: clamp(186px, 15vw, 214px); padding-bottom: 22px; scroll-margin-top: 80px; }
.biglietto[data-mesi="2"] .campi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .62fr); gap: 10px 12px; padding-right: 20px; }
.biglietto[data-mesi="2"] .stub { padding-left: 20px; }
.biglietto[data-mesi="2"] .btn-wa { min-height: 76px; padding: 10px 12px; gap: 10px; font-size: 1.0625rem; }
.biglietto[data-mesi="2"] .ico-wa { width: 28px; height: 28px; }
.biglietto[data-mesi="2"] .info-paga { gap: 10px; font-size: 1rem; font-weight: 520; }
.biglietto[data-mesi="2"] .info-paga img { width: 44px; }
.biglietto[data-mesi="2"] .info-paga br, .biglietto[data-mesi="2"] .info-chiama br { display: none; }
.biglietto[data-mesi="2"] .info-chiama { gap: 8px; font-size: 1rem; }
.biglietto[data-mesi="2"] .info-chiama .ico-tel { width: 22px; height: 23px; margin: 2px 0 0; }
.biglietto[data-mesi="2"] .info-chiama a { padding-bottom: 6px; background-size: 100% 7px; }
.biglietto[data-mesi="2"] .thk-avviso-modulo { flex: 1 1 100%; max-width: none; }
@media (min-width: 760px) {
  .biglietto[data-mesi="2"] .corpo { display: block; margin-top: 6px; }
  .biglietto[data-mesi="2"] .corpo-sep { display: none; }
  .biglietto[data-mesi="2"] .info { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linea); }
  .biglietto[data-mesi="2"] .cal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(14px, 1.8vw, 24px); max-width: none; }
  .biglietto[data-mesi="2"] .cal-testa { grid-column: 1 / -1; display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) 44px; }
  .biglietto[data-mesi="2"] .cal-giorno, .biglietto[data-mesi="2"] .cal-vuoto { height: 40px; }
}
@media (min-width: 1100px) {
  .pagina-camere .camere > .contenitore { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.92fr); column-gap: clamp(32px, 4vw, 64px); align-items: start; }
  .pagina-camere .camere .testa-sezione, .pagina-camere .camere .carosello { grid-column: 1 / -1; }
  .pagina-camere .camere .scheda { position: sticky; top: calc(var(--altezza-testata) + 70px); }
}

/* /camere: dotazioni e prezzi */
.pagina-camere .galleria .servizi-riga { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0; }
.pagina-camere .galleria .servizi-riga li:nth-child(5) { border-left: 0; }
.pagina-camere .galleria .servizi-riga li:nth-child(n+5) { border-top: 1px solid var(--linea); }
.pagina-camere .galleria .servizi-riga li:nth-child(4) { box-shadow: 0 1px 0 var(--linea); }
.pagina-camere .galleria-griglia + .reveal { margin: clamp(16px, 2vw, 24px) 0 0; }
.pagina-camere #dotazioni .galleria-grande img { object-position: 50% 60%; }   /* 2 Step: il corridoio in maiolica al posto della facciata */
.pagina-camere .passi li + li { padding-left: clamp(16px, 2.6vw, 40px); }

/* /la-zona: le distanze nella hero; poi le foto vere dei luoghi (2 Step, 09/11/2026), con le parti che si alternano:
   gli Scavi su crema con la foto a destra, le Ville su bianco con la foto a sinistra, il Vesuvio di nuovo su crema;
   ognuna con la stessa aria sopra e sotto */
.pagina-la-zona .hero .verso-mete { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 6px 0 4px; }
.pagina-la-zona .hero .verso-mete li,
.pagina-la-zona .hero .verso-mete li:nth-child(n) { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 4px 0; border: 0; border-top: 1px solid var(--linea); font-size: clamp(1rem, .9rem + .25vw, 1.0625rem); font-weight: 480; text-align: left; }
.pagina-la-zona .hero .verso-mete img { width: 34px; height: 26px; object-fit: contain; flex: none; }
.pagina-la-zona .hero .verso-mete strong { display: inline; margin: 0; white-space: nowrap; }
.pagina-la-zona .posizione { padding-block: clamp(64px, 7.6vw, 108px); }
.pagina-la-zona .posizione-carta { grid-template-columns: minmax(0, 1fr) minmax(0, 38%); align-items: center; }
.pagina-la-zona #ville { margin-top: 0; background: none; }
.pagina-la-zona #vesuvio { margin-top: 0; }
.pagina-la-zona .camere { margin-top: 0; padding-top: clamp(64px, 7.6vw, 108px); }
@media (min-width: 760px) {
  .pagina-la-zona #ville .posizione-carta { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); grid-template-areas: "scavi sinistra"; }
}
/* ogni foto nel suo arco, inquadrata sul soggetto: il Vesuvio dietro gli Scavi, la facciata della villa, il cono */
.pagina-la-zona #scavi .posizione-scavi > img { object-position: 72% 50%; }
.pagina-la-zona #ville .posizione-scavi > img { object-position: 50% 50%; }
.pagina-la-zona #vesuvio .posizione-scavi > img { object-position: 48% 50%; }
/* le due schede in fondo, con sopra la stessa cornice (la foto della home, qui a riquadro): il mare vero e, finché
   non arriva la foto della stazione, il treno del kit su crema */
.pagina-la-zona .scheda .posizione-foto { aspect-ratio: 2.4; margin: 0 0 clamp(18px, 2vw, 26px); border-radius: 6px; background: var(--crema); box-shadow: none; }
.pagina-la-zona .scheda .posizione-foto img { height: 100%; margin-top: 0; object-position: 50% 40%; }
.pagina-la-zona .posizione-foto[data-disegno] { display: grid; place-items: center; }
.pagina-la-zona .posizione-foto[data-disegno] img { width: clamp(96px, 8.4vw, 124px); height: auto; object-fit: contain; }

/* /recensioni: i voti nell'arco, le cartoline leggermente storte */
.pagina-recensioni .arco { display: grid; align-items: center; padding: calc(4 * var(--u)) calc(2.6 * var(--u)) calc(2 * var(--u)); background: var(--crema); }
.pagina-recensioni .arco::after { display: none; }
.pagina-recensioni .arco img { width: calc(7.6 * var(--u)); height: auto; margin: 0; object-fit: contain; animation: none; }
.pagina-recensioni .hero .voto { align-items: flex-end; gap: calc(1 * var(--u)); }
.pagina-recensioni .hero .voto-anfora { margin-bottom: 0; }
.pagina-recensioni .hero .voto-parziali { grid-template-columns: minmax(0, 1fr); margin-top: 12px; padding-top: 8px; }
.pagina-recensioni .hero .voto-parziali li,
.pagina-recensioni .hero .voto-parziali li + li { flex-direction: row; align-items: baseline; justify-content: space-between; padding: 3px 0; border: 0; }
.pagina-recensioni .hero .voto-parziali strong { font-size: 1.375rem; }
.pagina-recensioni .recensioni { --fuoco: var(--cioccolato); padding: 0; background: none; color: inherit; }
.pagina-recensioni .recensioni .voto-parziali strong { color: var(--cioccolato); }
.pagina-recensioni .recensioni .voto-parziali, .pagina-recensioni .recensioni .voto-parziali li + li { border-color: var(--linea-scura); }
.pagina-recensioni #le-camere { --fuoco: var(--chiaro); padding: clamp(52px, 6.8vw, 100px) 0; background: var(--cioccolato); color: var(--chiaro); }
.pagina-recensioni #le-camere .voto-parziali strong { color: #fff; }
.pagina-recensioni #le-camere .voto-parziali li + li { border-color: rgba(248, 245, 243, .24); }
.pagina-recensioni .testa-sezione { align-items: center; }
.pagina-recensioni .testa-sezione .voto-parziali { display: flex; margin: 0; padding: 0; border: 0; }
.pagina-recensioni .testa-sezione .voto-parziali li { padding: 0 clamp(12px, 1.6vw, 22px); }
.pagina-recensioni .testa-sezione .voto-parziali li:last-child { padding-right: 0; }
.pagina-recensioni .testa-sezione .voto-parziali strong { font-size: clamp(1.75rem, 1.3rem + 1.1vw, 2.5rem); font-weight: 300; }
.pagina-recensioni .recensioni-binario { margin-top: clamp(18px, 2.2vw, 32px); }
.pagina-recensioni .recensione { padding: clamp(20px, 2.4vw, 32px) clamp(20px, 2.6vw, 36px) clamp(16px, 1.8vw, 22px); box-shadow: 0 1px 2px rgba(80, 55, 40, .1), 0 22px 40px -26px rgba(80, 55, 40, .5); }
.pagina-recensioni .recensione:nth-child(odd) { rotate: -.5deg; }
.pagina-recensioni .recensione:nth-child(even) { rotate: .4deg; }
.pagina-recensioni .recensione blockquote p { max-width: none; font-size: clamp(1.0625rem, .9rem + .5vw, 1.3125rem); }
.pagina-recensioni .recensione-firma { margin-top: 14px; padding-top: 12px; }
@media (min-width: 760px) {
  .pagina-recensioni [data-colonne="2"] .recensione blockquote { margin-top: 0; padding-right: clamp(90px, 9vw, 124px); }
  .pagina-recensioni [data-colonne="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pagina-recensioni [data-colonne="3"] .timbro { width: clamp(64px, 6vw, 88px); }
}

/* /come-arrivare: il grande arco crema col palazzo del kit, e il portone in piccolo, come dettaglio da riconoscere */
.pagina-come-arrivare .hero-griglia::after {
  content: ""; position: absolute; z-index: 0;
  left: var(--a-l); top: var(--a-t); bottom: 0; width: var(--a-w);
  border-radius: 1000px 1000px 0 0;
  background: url("/assets/img/icone/palazzo-3d.webp") no-repeat 64% 72% / 74% auto, var(--crema);
  box-shadow: 0 0 0 1px var(--linea-scura), 0 0 0 calc(.8 * var(--u)) var(--bianco), 0 0 0 calc(.8 * var(--u) + 1px) var(--linea-scura);
}
.pagina-come-arrivare .arco { left: calc(var(--a-l) - 5 * var(--u)); top: auto; bottom: calc(2 * var(--u)); width: calc(14 * var(--u)); height: calc(18 * var(--u)); z-index: 2; box-shadow: 0 0 0 1px var(--linea-scura), 0 24px 40px -24px rgba(70, 48, 36, .55); }
.pagina-come-arrivare .arco::after { display: none; }
.pagina-come-arrivare .arco img { height: 100%; margin: 0; object-position: 8% 9%; }
.pagina-come-arrivare .recensioni-binario { margin-top: 0; }
.pagina-come-arrivare .camere { margin-top: clamp(36px, 4.6vw, 68px); }
.pagina-come-arrivare .voto-parziali.posizione-scavi { align-self: center; margin: 0; padding: 0; border: 0; }
.pagina-come-arrivare .voto-parziali li + li { border-color: var(--linea-scura); }
.pagina-come-arrivare .voto-parziali strong { font-size: clamp(1.375rem, 1.05rem + 1vw, 1.875rem); font-variant-numeric: normal; font-weight: 340; letter-spacing: -.01em; }
@media (min-width: 760px) {
  .pagina-come-arrivare .recensioni-binario { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* /chi-siamo: il corridoio su bianco con le foto a sinistra */
.pagina-chi-siamo #corridoio { margin-top: 0; background: none; }
.pagina-chi-siamo .galleria-griglia:not(.posizione-scavi) { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: clamp(150px, 21vw, 320px) clamp(130px, 17vw, 260px); }
.pagina-chi-siamo .galleria-griglia:not(.posizione-scavi) .galleria-foto img { object-position: 50% 50%; }
.pagina-chi-siamo .recensioni-griglia { grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); margin-top: 0; }
.pagina-chi-siamo .recensioni .btn { margin-top: 18px; background: var(--ocra); color: var(--cioccolato); }
.pagina-chi-siamo .recensioni .scheda-dettagli { color: inherit; }
.pagina-chi-siamo .recensioni .scheda-dettagli:first-of-type { margin-top: 12px; }
@media (min-width: 760px) {
  .pagina-chi-siamo #corridoio .posizione-carta { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); grid-template-areas: "scavi sinistra"; align-items: center; }
}

/* /domande-frequenti: titolo e foto restano fermi, a destra scorrono le domande */
.pagina-domande-frequenti .come-prenotare { margin-top: clamp(32px, 3.6vw, 56px); }
.pagina-domande-frequenti .domande { margin-top: 0; }
.pagina-domande-frequenti .testa-sezione.posizione-testa h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); }
.pagina-domande-frequenti .posizione-colonna { height: clamp(40px, 3.8vw, 56px); }
@media (min-width: 1100px) {
  .pagina-domande-frequenti main > div {
    display: grid; grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); column-gap: calc(6 * var(--u)); align-items: start;
    max-width: 1600px; margin-inline: auto; padding: clamp(18px, 2vw, 30px) var(--margine) 0;
  }
  .pagina-domande-frequenti .hero { position: sticky; top: calc(var(--altezza-testata) + 20px); overflow: visible; }
  .pagina-domande-frequenti .hero-griglia { display: block; width: auto; min-height: 0; padding: 0; }
  .pagina-domande-frequenti .hero-cifre { display: none; }
  .pagina-domande-frequenti .hero h1 { font-size: calc(3.9 * var(--u)); }
  .pagina-domande-frequenti .hero .btn-grande { margin-top: calc(.6 * var(--u)); }
  .pagina-domande-frequenti .arco { position: relative; left: auto; top: auto; bottom: auto; width: 100%; height: min(calc(23 * var(--u)), 36vh); margin-top: calc(2.4 * var(--u)); box-shadow: 0 0 0 1px var(--linea-scura); }
  .pagina-domande-frequenti .arco::after { display: none; }
  .pagina-domande-frequenti main > div > div { min-width: 0; }
  .pagina-domande-frequenti .come-prenotare:first-child { margin-top: 0; }
  .pagina-domande-frequenti .come-prenotare .contenitore { padding: 0; }
}

/* /contatti */
.pagina-contatti .arco::after { display: none; }
.pagina-contatti .arco img { object-position: 50% 42%; }
.pagina-contatti .info-chiama { gap: 14px; margin: 0 0 12px; font-size: clamp(1.0625rem, .95rem + .4vw, 1.25rem); line-height: 1.4; }
.pagina-contatti .info-chiama .ico-tel { width: 30px; height: 29px; margin: 2px 0 0; object-fit: contain; }
.pagina-contatti .info-chiama a { display: inline; padding: 0; background: none; color: var(--cioccolato); font-weight: 560; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.pagina-contatti .hero .contatti-riga { gap: 12px; margin: 16px 0 12px; }
.pagina-contatti .hero .contatti-riga > .btn { position: static; flex: 1 1 0; height: auto; min-height: 58px; margin: 0; padding: 8px 14px; font-size: 1.0625rem; line-height: 1.2; text-align: center; white-space: normal; }
.pagina-contatti .servizi-riga { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pagina-contatti .servizi-riga li { gap: 12px; padding: 12px 10px; }
.pagina-contatti .servizi-riga img { height: clamp(40px, 3.6vw, 50px); }
.pagina-contatti .posizione-scavi { align-self: start; }
.pagina-contatti .posizione-scavi .scheda-dettagli { margin-top: 12px; }

/* il telefono */
@media (max-width: 759px) {
  .pagina-interna .servizi-riga li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pagina-interna .hero { --a-h: min(calc(90 * var(--u)), 52svh); }
  .pagina-interna .hero h1 { font-size: clamp(1.75rem, 9.2vw, 2.375rem); }
  .pagina-interna .hero .btn-grande { margin-top: 14px; }
  .pagina-interna .hero-sotto { margin-bottom: 0; }
  .pagina-interna .hero-testo .contatti-tutti { display: flex; justify-content: center; margin: 12px 0 0; }
  .pagina-interna .posizione-carta { grid-template-columns: minmax(0, 1fr); }
  .pagina-interna .posizione-colonna { height: 56px; }
  .pagina-interna .posizione-carta .posizione-colonna { translate: none !important; }
  /* il sottotitolo a tutta larghezza, sotto l'icona e il titolo: massimo tre righe */
  .pagina-interna .posizione-carta .posizione-testa { flex-wrap: wrap; align-items: center; row-gap: 10px; }
  .pagina-interna .posizione-carta .posizione-testa > div { display: contents; }
  .pagina-interna .posizione-carta .posizione-testa h2 { flex: 1 1 0; min-width: 0; }
  .pagina-interna .posizione-carta .posizione-testa .sottotitolo { flex: 1 0 100%; margin-top: 0; }
  .pagina-interna .posizione-scavi, .pagina-interna .posizione-scavi.galleria-griglia { margin-top: 16px; }
  .pagina-interna .posizione-scavi > img:not(.posizione-rovine) { aspect-ratio: 1.1; }
  .pagina-interna .contatti-riga { align-items: stretch; }
  .pagina-interna .posizione-arrivare { margin-top: 4px; }
  .pagina-contatti .info-chiama a { margin-top: 0; padding-block: 12px; }

  .pagina-la-zona .scheda .posizione-foto { aspect-ratio: 16 / 9; }
  /* le colonne di testo una sotto l'altra: si leggono, non si sfogliano */
  .pagina-la-zona .recensioni-binario, .pagina-come-arrivare .recensioni-binario {
    grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-auto-columns: auto;
    margin-inline: 0; padding: 0;
    overflow: visible; scroll-snap-type: none;
  }
  .pagina-interna .recensioni-binario > .scheda:nth-child(n) { padding: 18px 0; border-left: 0; border-top: 1px solid var(--linea-scura); }
  .pagina-interna .recensioni-binario > .scheda:first-child { padding-top: 0; border-top: 0; }

  /* /camere: la barra delle camere scorre col dito, il calendario si apre toccando le date */
  .pagina-camere nav.servizi { margin-top: 18px; }
  .pagina-camere nav .servizi-riga { display: flex; gap: 0; margin-inline: calc(-1 * var(--margine)); padding-inline: 6px; overflow-x: auto; scrollbar-width: none; }
  .pagina-camere nav .servizi-riga::-webkit-scrollbar { display: none; }
  .pagina-camere nav .servizi-riga li, .pagina-camere nav .servizi-riga li:nth-child(n) { flex: none; border: 0; }
  .pagina-camere nav .servizi-riga a { gap: 8px; padding: 7px 10px; font-size: .875rem; white-space: nowrap; }
  .pagina-camere nav .servizi-riga img { width: 28px; }
  .pagina-camere nav .ico-giu { display: none; }
  .pagina-camere .camere { padding-top: 40px; scroll-margin-top: 44px; }
  .pagina-camere .camere .testa-sezione { gap: 4px 20px; }
  .pagina-camere .carosello { --alta: 56vw; }
  .pagina-camere .carosello-binario { margin-inline: calc(-1 * var(--margine)); padding: 0 var(--margine) 10px; }
  .pagina-camere .contatore { font-size: .875rem; }
  .pagina-camere .camere .scheda-dettagli + .scheda-dettagli { margin-top: 6px; }
  .pagina-camere .scheda .info { display: contents; }
  .pagina-camere .scheda .servizi-riga { margin-top: 14px; padding: 6px 0; }
  .pagina-camere .scheda .servizi-riga li:nth-child(n) { padding: 2px 4px; border-top: 0; }
  .pagina-camere .scheda .servizi-riga li + li { border-left: 1px solid var(--linea-scura); }
  .pagina-camere .scheda .servizi-riga li:last-child:nth-child(odd) { grid-column: auto; }
  .biglietto[data-mesi="2"] { padding: var(--cima) 18px 18px; }
  .biglietto[data-mesi="2"] .campi { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; }
  .biglietto[data-mesi="2"] .campo { flex: 1000 1 118px; }
  .biglietto[data-mesi="2"] .campo:last-child { flex: 1 1 62px; }
  .biglietto[data-mesi="2"] .stub { margin-top: 18px; padding: 18px 0 0; }
  .biglietto[data-mesi="2"] .btn-wa { min-height: 56px; }
  .biglietto[data-mesi="2"] .info { display: contents; }
  .biglietto[data-mesi="2"] .info-paga { gap: 16px; font-size: 1.125rem; }
  .biglietto[data-mesi="2"] .cal-mese + .cal-mese, .biglietto[data-mesi="2"] .cal-griglia + .cal-griglia { display: none; }
  html.js .biglietto[data-mesi="2"]:not(.aperto) .cal,
  html.js .biglietto[data-mesi="2"]:not(.aperto) .info-paga,
  html.js .biglietto[data-mesi="2"]:not(.aperto) .info-chiama { display: none; }
  .pagina-camere .galleria .servizi-riga { grid-template-columns: 1fr 1fr; }
  .pagina-camere .galleria .servizi-riga li:nth-child(4) { box-shadow: none; }
  .pagina-camere .galleria .servizi-riga li:nth-child(5) { border-left: 0; }
  .pagina-camere .galleria .servizi-riga li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pagina-camere .passi li + li { padding-left: 0; }

  /* /recensioni: prima il testo, poi l'arco col voto, a tutta larghezza */
  .pagina-recensioni .hero-griglia { padding-top: 18px; }
  .pagina-recensioni .hero-cifre { display: none; }
  .pagina-recensioni .arco { position: relative; left: auto; top: auto; bottom: auto; display: block; width: min(calc(100% - 2 * var(--margine)), 520px); height: auto; margin: 24px auto 0; padding: 60px 22px 18px; box-shadow: 0 0 0 1px var(--linea-scura); }
  .pagina-recensioni .arco img { width: 72px; }
  .pagina-recensioni .recensioni-binario { grid-auto-columns: 92%; }
  .pagina-recensioni .recensione, .pagina-recensioni .recensione:nth-child(n) { padding: 18px 16px 14px; rotate: none; }
  .pagina-recensioni .recensione blockquote { margin-top: 44px; }
  .pagina-recensioni .recensione blockquote p { font-size: .9375rem; line-height: 1.4; }
  .pagina-recensioni .timbro { width: 72px; }
  .pagina-recensioni .testa-sezione .voto-parziali li { padding-left: 0; }

  /* /come-arrivare */
  .pagina-come-arrivare .hero h1 span { white-space: nowrap; }
  .pagina-come-arrivare .arco { left: var(--margine); top: calc(var(--a-t) + var(--a-h) - 44 * var(--u)); bottom: auto; width: calc(32 * var(--u)); height: calc(41 * var(--u)); }
  .pagina-come-arrivare .hero-griglia::after { bottom: auto; height: var(--a-h); box-shadow: 0 0 0 1px var(--linea-scura), 0 0 0 6px var(--bianco), 0 0 0 7px var(--linea-scura); }
  .pagina-come-arrivare .voto-parziali.posizione-scavi { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--linea-scura); }

  /* /domande-frequenti: l'arco più basso, si arriva subito alla prima domanda */
  .pagina-domande-frequenti .hero { --a-l: calc(46 * var(--u)); --a-w: calc(50 * var(--u)); --a-h: calc(52 * var(--u)); --a-t: calc(13 * var(--u)); }
  .pagina-domande-frequenti .come-prenotare { margin-top: 28px; }

  /* /chi-siamo */
  .pagina-chi-siamo .galleria-griglia:not(.posizione-scavi) { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 42vw); }
  .pagina-chi-siamo .recensioni-griglia { grid-template-columns: minmax(0, 1fr); }

  /* /contatti: WhatsApp e telefono restano affiancati */
  .pagina-contatti .hero .contatti-riga { flex-direction: row; }
  .pagina-contatti .hero .contatti-riga > .btn { width: auto; margin: 0; font-size: 1rem; }
  .pagina-contatti .servizi-riga { grid-template-columns: 1fr 1fr; }
  .pagina-contatti .posizione-scavi { margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero h1, .hero-sotto, .hero .btn-grande, .biglietto-ombra { animation-name: appare; animation-duration: 600ms; }
  .hero-cifre { animation: appare 700ms ease both; }
  .arco img { animation: none; }
  .reveal { transition: opacity 500ms ease; }
  html:not(.senza-js) .reveal:not(.in) { translate: none; }
  .reveal-tracciato, html:not(.senza-js) .reveal-tracciato:not(.in),
  .contatti-percorso.reveal-tracciato, html:not(.senza-js) .contatti-percorso.reveal-tracciato:not(.in) { clip-path: none; transition: none; }
  .galleria-foto img, .scheda-foto img { transition: none; }
  .galleria-foto:hover img, .scheda:hover .scheda-foto img { transform: none; }
  .cal-giorni.avanti, .cal-giorni.indietro { animation: appare 200ms ease; }
  .cal-giorno.appena { animation: none; }
  .lightbox[open] { animation: appare 200ms ease; }
  .menu-telefono:not([hidden]) .menu-telefono-voci a, .menu-telefono:not([hidden]) > .btn, .menu-telefono:not([hidden]) > .menu-telefono-chiama { animation-name: appare; }
  html.js .barra-telefono { transform: none; opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 0s linear 200ms; }
  html.js .barra-telefono.visibile { opacity: 1; visibility: visible; transition: opacity 200ms ease; }
}
@media print {
  .testata, .barra-telefono, .lightbox, .cal-tazzina { display: none !important; }
}