/* Il Nido dell'Upupa · Marsala — foglio di stile
   Design: kit «design-il-nido-dell-upupa» (home-approvata.png). Colori misurati con confronta-design.py --colori.
   Font serviti dal sito: Source Serif 4, ottica display, semibold (titoli), Source Sans 3 (testi). */

/* ---------- Font (dal sito, nessuna chiamata a terzi) ---------- */
@font-face { font-family: "Source Serif 4 Display"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/source-serif-4-display-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4 Display"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/source-serif-4-display-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Serif 4 Display"; font-style: italic; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/source-serif-4-display-600-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4 Display"; font-style: italic; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/source-serif-4-display-600-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Colori e misure (dal design) ---------- */
:root {
  --crema: #FEFDF9;          /* fondo della pagina */
  --crema-scura: #FAF6EE;    /* fondo del calendario */
  --sabbia: #F9F5ED;         /* fascia dei servizi */
  --sabbia-bordo: #F4EEE4;   /* bordi dei riquadri */
  --bianco: #FFFFFF;
  --blu: #043A75;            /* titoli */
  --blu-testo: #0C4282;      /* testi */
  --blu-notte: #014266;      /* footer */
  --rosso: #C43930;          /* pulsanti, occhielli, link */
  --sole: #F3A951;           /* il sole del marchio */
  --ottanio: #17829D;        /* le date scelte */
  --linea: #EFE6DE;          /* linee sottili */
  --bordo-campo: #E5ECF3;    /* bordi dei campi */
  --testo-piede: #D1DEE7;    /* testi del footer */

  --serif: "Source Serif 4 Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --contenitore: 1320px;
  --margine: clamp(16px, 4.2vw, 60px);
  --raggio: 8px;
  --raggio-piccolo: 5px;
  --altezza-testata: 104px;

  --curva-uscita: cubic-bezier(0.23, 1, 0.32, 1);
  --curva-dentro-fuori: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; scroll-padding-top: 88px; }
html.menu-aperto { overflow: hidden; }
body {
  margin: 0; background: var(--crema); color: var(--blu-testo);
  font-family: var(--sans); font-size: 18px; line-height: 1.5; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--ottanio); outline-offset: 3px; border-radius: 3px; }
a, button { touch-action: manipulation; }
.visivo-nascosto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.salta { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--blu); color: var(--bianco); padding: 10px 16px; border-radius: var(--raggio-piccolo); text-decoration: none; }
.salta:focus { top: 12px; }

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

/* ---------- Tipografia ---------- */
.occhiello {
  font-family: var(--sans); font-size: 16px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--rosso); margin-bottom: 14px; line-height: 1.3;
}
.titolo-sezione {
  font-family: var(--serif); font-weight: 600; color: var(--blu);
  font-size: clamp(32px, 3.75vw, 54px); line-height: 1.06; letter-spacing: -0.018em;
}
.titolo-sezione--grande { font-size: clamp(36px, 4.1vw, 59px); line-height: 1.02; }
.testo { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; color: var(--blu-testo); max-width: 34em; }

/* ---------- Pulsanti e link ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 48px; padding: 12px 26px; border-radius: var(--raggio-piccolo); border: 0;
  font-family: var(--sans); font-size: 18px; font-weight: 500; line-height: 1.2; text-decoration: none; cursor: pointer;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: background-color 200ms var(--curva-uscita), transform 160ms var(--curva-uscita), box-shadow 200ms var(--curva-uscita);
}
.btn--rosso { background: var(--rosso); color: var(--bianco); box-shadow: 0 1px 0 rgba(4, 58, 117, 0.06); }
.btn--grande { min-height: 58px; padding: 14px 32px; font-size: 20px; }
.btn--pieno { width: 100%; min-height: 46px; font-size: 18px; }
.btn--bordo { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }
.btn:active { transform: scale(0.97); }

.freccia {
  display: inline-block; width: 22px; height: 12px; flex: none;
  background: currentColor;
  -webkit-mask: url("/assets/img/icone/freccia-destra.webp") center / 100% auto no-repeat;
          mask: url("/assets/img/icone/freccia-destra.webp") center / 100% auto no-repeat;
  -webkit-mask-size: 22px 22px; mask-size: 22px 22px;
  transition: transform 220ms var(--curva-uscita);
}
.chevron {
  display: inline-block; width: 18px; height: 18px; flex: none; background: currentColor;
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
}
.chevron--sinistra { -webkit-mask-image: url("/assets/img/icone/chevron-sinistra.webp"); mask-image: url("/assets/img/icone/chevron-sinistra.webp"); }
.chevron--destra { -webkit-mask-image: url("/assets/img/icone/chevron-destra.webp"); mask-image: url("/assets/img/icone/chevron-destra.webp"); }
.chevron--giu { -webkit-mask-image: url("/assets/img/icone/chevron-giu.webp"); mask-image: url("/assets/img/icone/chevron-giu.webp"); width: 14px; height: 14px; }

.link-freccia {
  display: inline-flex; align-items: center; gap: 14px; padding: 6px 0 8px;
  color: var(--rosso); font-size: 20px; text-decoration: none; position: relative;
  -webkit-user-select: none; user-select: none;
}
.link-freccia::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: currentColor;
  transform-origin: left; transition: transform 260ms var(--curva-uscita);
}
.link-freccia--blu { color: var(--blu); font-size: 18px; }
.link-freccia:active { opacity: 0.7; }

@media (hover: hover) and (pointer: fine) {
  .btn--rosso:hover { background: #A93029; box-shadow: 0 8px 22px -12px rgba(196, 57, 48, 0.75); }
  .btn:hover .freccia, .link-freccia:hover .freccia { transform: translateX(4px); }
  .link-freccia:hover::after { transform: scaleX(0.82); }
}

/* ---------- Testata ---------- */
.testata {
  position: sticky; top: 0; z-index: 40; background: var(--crema);
  transition: box-shadow 240ms var(--curva-uscita);
}
.testata.scorsa { box-shadow: 0 1px 0 var(--linea), 0 10px 24px -20px rgba(4, 58, 117, 0.35); }
.testata__riga { display: flex; align-items: center; gap: 18px; min-height: var(--altezza-testata); }
.testata__logo { flex: none; display: block; margin-right: auto; padding: 8px 0; }
.testata__logo img { height: 86px; width: auto; transition: height 260ms var(--curva-uscita); }
.testata.scorsa .testata__logo img { height: 60px; }
.menu__voci { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 40px); }
.menu__voci a {
  display: inline-block; padding: 10px 0; color: var(--blu); text-decoration: none; font-size: 17px; position: relative;
}
.menu__voci a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1.5px; background: var(--rosso);
  transform: scaleX(0); transform-origin: left; transition: transform 240ms var(--curva-uscita);
}
@media (hover: hover) and (pointer: fine) { .menu__voci a:hover::after { transform: scaleX(1); } }
.menu__voci a.attiva::after { transform: scaleX(1); }

/* Il posto del selettore delle lingue (IT ▾): vuoto fino allo step 9-ter, ma già con lo spazio del pulsante */
.lingue-posto { flex: none; min-width: 62px; min-height: 44px; }
.testata__prenota { min-height: 50px; padding: 12px 24px; font-size: 18px; }

.menu-apri {
  display: none; flex: none; width: 46px; height: 46px; border: 0; background: transparent; border-radius: var(--raggio-piccolo);
  cursor: pointer; position: relative; -webkit-user-select: none; user-select: none;
}
.menu-apri__linee, .menu-apri__linee::before, .menu-apri__linee::after {
  position: absolute; left: 11px; width: 24px; height: 2px; background: var(--blu); border-radius: 2px; content: "";
  transition: transform 260ms var(--curva-uscita), opacity 200ms ease;
}
.menu-apri__linee { top: 22px; }
.menu-apri__linee::before { left: 0; top: -7px; }
.menu-apri__linee::after { left: 0; top: 7px; }
.menu-apri[aria-expanded="true"] .menu-apri__linee { background: transparent; }
.menu-apri[aria-expanded="true"] .menu-apri__linee::before { transform: translateY(7px) rotate(45deg); }
.menu-apri[aria-expanded="true"] .menu-apri__linee::after { transform: translateY(-7px) rotate(-45deg); }
.menu-apri:active { background: var(--crema-scura); }

.menu-telefono {
  position: fixed; inset: 0; z-index: 35; background: var(--crema);
  padding: calc(var(--altezza-testata) + 24px) var(--margine) 32px;
  height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 28px;
  opacity: 0; transform: translateY(-8px); transition: opacity 220ms var(--curva-uscita), transform 260ms var(--curva-uscita);
}
.menu-telefono[hidden] { display: none; }
.menu-telefono.aperto { opacity: 1; transform: none; }
.menu-telefono ul { display: grid; gap: 4px; }
.menu-telefono nav a {
  display: block; padding: 12px 0; font-family: var(--serif); font-weight: 600; font-size: 36px; line-height: 1.1; color: var(--blu);
  text-decoration: none; border-bottom: 1px solid var(--linea);
}
.menu-telefono nav a:active { color: var(--rosso); }
.menu-telefono__prenota { align-self: stretch; }
.menu-telefono__sole { width: 120px; align-self: flex-end; margin-top: auto; opacity: 0.9; }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(8px, 1vw, 14px); }
.hero__griglia { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(28px, 4.2vw, 64px); align-items: start; }
.hero__testo { padding-top: clamp(4px, 0.6vw, 10px); }
.hero__testo .occhiello { margin-bottom: 10px; }
.hero__titolo {
  font-family: var(--serif); font-weight: 600; color: var(--blu);
  font-size: clamp(48px, 5.9vw, 85px); line-height: 0.86; letter-spacing: -0.022em; margin-bottom: 12px;
}
.hero__titolo em { font-style: italic; letter-spacing: -0.01em; }
.hero__sotto { font-size: clamp(20px, 1.9vw, 27px); line-height: 1.16; color: var(--blu-testo); margin-bottom: 16px; }
.hero__azioni { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 10px; }
.hero__azioni .btn--grande { min-height: 52px; padding: 12px 34px; font-size: clamp(19px, 1.45vw, 21px); }
.hero__azioni .link-freccia { font-size: clamp(17px, 1.25vw, 18px); }
.luogo { display: flex; align-items: center; gap: 10px; font-size: clamp(16px, 1.2vw, 17px); color: var(--blu-testo); }
.luogo img { width: 22px; height: 22px; flex: none; }
.luogo .punto, .prenota__sicuro .punto { margin-inline: 6px; }
.luogo--grande { font-size: clamp(19px, 1.5vw, 22px); margin: 18px 0 20px; color: var(--blu); }
.luogo--grande img { width: 26px; height: 26px; }

.hero__foto { position: relative; margin-right: clamp(0px, 1.6vw, 24px); }
.hero__sole { position: absolute; width: clamp(64px, 5.6vw, 82px); left: clamp(-36px, -2.4vw, -20px); top: clamp(-26px, -1.8vw, -16px); z-index: 0; }
.hero__cornice { position: relative; z-index: 1; border-radius: var(--raggio-piccolo); overflow: hidden; aspect-ratio: 1.85; background: var(--sabbia); }
.hero__cornice img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.hero__foto figcaption { margin-top: 10px; font-size: 15px; color: var(--blu-testo); max-width: 60%; }
.hero__cartolina {
  position: absolute; z-index: 2; width: clamp(150px, 16.2vw, 232px); right: clamp(-26px, -1.5vw, -10px); bottom: clamp(-34px, -2vw, -14px);
  transform: rotate(5deg); filter: drop-shadow(0 14px 18px rgba(4, 58, 117, 0.22));
}

.fatti {
  display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(18px, 1.6vw, 24px);
  padding-top: 14px; padding-bottom: 14px; position: relative;
}
.fatti::before { content: ""; position: absolute; top: 0; left: var(--margine); right: var(--margine); height: 1px; background: var(--linea); }
.fatti li { display: flex; align-items: center; justify-content: center; gap: 16px; font-size: clamp(17px, 1.4vw, 20px); color: var(--blu); padding: 4px 12px; }
.fatti li + li { border-left: 1px solid var(--linea); }
.fatti img { width: 38px; height: 38px; }

/* ---------- Disponibilità e calendario ---------- */
.prenota { padding-top: clamp(4px, 0.6vw, 10px); padding-bottom: clamp(48px, 5vw, 80px); }
.prenota__scheda { background: var(--crema-scura); border-radius: var(--raggio); padding: clamp(16px, 1.6vw, 22px) clamp(14px, 2.4vw, 34px) clamp(16px, 1.8vw, 26px); box-shadow: 0 1px 0 var(--sabbia-bordo) inset, 0 0 0 1px var(--sabbia-bordo) inset; }
.prenota__testa { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(12px, 1.1vw, 16px); }
.prenota__testa .occhiello { margin-bottom: 6px; }
.prenota__garanzie { display: grid; justify-items: end; gap: 6px; padding-bottom: 10px; }
.prenota__sicuro { display: flex; align-items: center; gap: 12px; font-size: 17px; color: var(--blu); white-space: nowrap; }
.prenota__sicuro img { width: 30px; height: 30px; flex: none; }
.prenota__cin:empty { display: none; }
.prenota__cin { font-size: 14px; color: var(--blu-testo); }

.prenota__griglia { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(14px, 1.6vw, 22px); align-items: stretch; }
.riquadro { background: var(--bianco); border-radius: var(--raggio); box-shadow: 0 0 0 1px var(--sabbia-bordo), 0 18px 40px -34px rgba(4, 58, 117, 0.45); }

.calendario { padding: clamp(10px, 1vw, 14px) clamp(12px, 1.4vw, 20px) clamp(12px, 1.2vw, 18px); }
.calendario__testa { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; margin-bottom: 0; }
.calendario__mese { font-family: var(--sans); font-weight: 500; font-size: clamp(20px, 1.6vw, 23px); color: var(--blu); padding-left: 4px; }
.calendario__freccia {
  width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: var(--blu);
  border-radius: 50%; cursor: pointer; -webkit-user-select: none; user-select: none; transition: background-color 160ms ease, transform 140ms var(--curva-uscita);
}
.calendario__freccia:nth-child(3) { justify-self: end; }
.calendario__freccia:active { transform: scale(0.92); background: var(--crema-scura); }
.calendario__freccia:disabled { opacity: 0.3; cursor: default; }
@media (hover: hover) and (pointer: fine) { .calendario__freccia:not(:disabled):hover { background: var(--crema-scura); } }

.calendario__griglia { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendario__intestazione { text-align: center; font-size: 14px; color: var(--blu); padding: 2px 0 6px; }
.giorno {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 44px; padding: 3px 2px;
  border: 0; border-top: 1px solid var(--linea); border-left: 1px solid var(--linea); background: transparent;
  color: var(--blu); cursor: pointer; font-variant-numeric: tabular-nums;
  -webkit-user-select: none; user-select: none;
  transition: background-color 160ms ease, color 160ms ease;
}
.giorno:nth-child(7n) { border-right: 1px solid var(--linea); }
.giorno--vuoto { cursor: default; }
.giorno__numero { font-size: clamp(16px, 1.25vw, 18px); font-weight: 500; line-height: 1.05; }
.giorno__prezzo { font-size: 12px; line-height: 1.05; opacity: 0.92; white-space: nowrap; }
.giorno.fine-griglia { border-bottom: 1px solid var(--linea); }
.giorno--scelto, .giorno--intervallo { background: var(--ottanio); color: var(--bianco); border-color: rgba(255, 255, 255, 0.28); }
.giorno--anteprima { background: rgba(23, 130, 157, 0.12); }
.giorno--occupato, .giorno--passato { color: rgba(12, 66, 130, 0.38); cursor: not-allowed; }
.giorno--occupato .giorno__numero { text-decoration: line-through; text-decoration-thickness: 1px; }
.giorno--occupato { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(4, 58, 117, 0.045) 6px 7px); }
.giorno:not([disabled]):active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .giorno:not([disabled]):not(.giorno--scelto):not(.giorno--intervallo):hover { background: var(--crema-scura); }
}
.calendario__noscript { padding: 16px 4px 0; font-size: 16px; }

.soggiorno { display: flex; flex-direction: column; padding: clamp(10px, 1vw, 14px) clamp(14px, 1.6vw, 22px) clamp(10px, 1vw, 14px); }
.soggiorno__titolo { font-family: var(--sans); font-weight: 600; font-size: 18px; color: var(--blu); margin-bottom: 4px; }
.soggiorno__campi { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 6px; }
.campo { position: relative; min-width: 0; }
.campo__etichetta { display: block; font-size: 14px; color: var(--blu-testo); margin-bottom: 4px; }
.campo__valore {
  width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; background: var(--bianco); border: 1px solid var(--bordo-campo); border-radius: var(--raggio-piccolo);
  color: var(--blu); font-size: 16px; text-align: left; cursor: pointer; font-variant-numeric: tabular-nums;
  -webkit-user-select: none; user-select: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.campo__valore img { width: 22px; height: 22px; flex: none; }
.campo--ospiti .campo__valore { justify-content: flex-start; }
.campo--ospiti .campo__valore .chevron { margin-left: auto; }
.campo__valore.attivo { border-color: var(--ottanio); box-shadow: 0 0 0 2px rgba(23, 130, 157, 0.18); }
.campo__valore:active { background: var(--crema); }
@media (hover: hover) and (pointer: fine) { .campo__valore:hover { border-color: #C9D6E4; } }

.ospiti {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; display: flex; align-items: center; gap: 12px;
  padding: 10px; background: var(--bianco); border-radius: var(--raggio); box-shadow: 0 0 0 1px var(--sabbia-bordo), 0 16px 32px -14px rgba(4, 58, 117, 0.35);
  transform-origin: top right; animation: ospiti-entra 180ms var(--curva-uscita);
}
.ospiti[hidden] { display: none; }
@keyframes ospiti-entra { from { opacity: 0; transform: scale(0.96) translateY(-4px); } }
.ospiti__tasto {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--bordo-campo); background: var(--bianco); color: var(--blu);
  font-size: 22px; line-height: 1; cursor: pointer; -webkit-user-select: none; user-select: none;
}
.ospiti__tasto:active { transform: scale(0.92); background: var(--crema-scura); }
.ospiti__tasto:disabled { opacity: 0.35; cursor: default; }
.ospiti__numero { min-width: 28px; text-align: center; font-size: 20px; color: var(--blu); font-variant-numeric: tabular-nums; }

.soggiorno__conto[hidden] { display: none; }
.soggiorno__riga, .soggiorno__totale { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--blu); font-variant-numeric: tabular-nums; }
.soggiorno__riga { font-size: 17px; padding: 2px 0 6px; border-bottom: 1px solid var(--linea); }
.soggiorno__totale { font-size: 17px; padding: 4px 0 8px; }
.soggiorno__totale strong { font-family: var(--sans); font-weight: 600; font-size: clamp(23px, 1.8vw, 27px); }
.soggiorno__stato { min-height: 0; font-size: 15px; color: var(--rosso); }
.soggiorno [data-prenota] { margin-top: auto; }
.soggiorno__stato:not(:empty) { margin-bottom: 12px; }
.soggiorno__nota { margin-top: 8px; font-size: 14px; line-height: 1.35; color: var(--blu-testo); }
.thk-avviso-modulo { margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--blu-testo); }
.thk-avviso-modulo a { color: var(--blu); }

/* ---------- Sezioni ---------- */
.sezione { padding-block: clamp(56px, 6.4vw, 100px); }

/* 01 · La casa */
.casa { padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(24px, 3vw, 40px); }
.casa__griglia { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.12fr) minmax(0, 0.66fr); gap: clamp(20px, 2.2vw, 32px); align-items: start; }
.casa__testo { padding-top: 4px; }
.casa__testo .titolo-sezione { margin-bottom: 26px; }
.casa__testo .testo { margin-bottom: 28px; max-width: 25em; }
.foto img { width: 100%; height: auto; object-fit: cover; border-radius: var(--raggio-piccolo); background: var(--sabbia); }
.foto figcaption { margin-top: 10px; font-size: 16px; color: var(--blu-testo); }
.foto--terrazza img { aspect-ratio: 1.26; }
.casa__piccole { display: grid; gap: 18px; }
.foto--piccola img { aspect-ratio: 1.5; }

.servizi {
  display: grid; grid-template-columns: repeat(5, 1fr); margin-top: clamp(36px, 3.4vw, 52px);
  background: var(--sabbia); border-radius: var(--raggio); padding: clamp(18px, 2vw, 28px) clamp(8px, 1vw, 16px);
}
.servizi li {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; text-align: center;
  padding: 14px 10px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.3; color: var(--blu);
}
.servizi li:not(:nth-child(5n + 1)) { border-left: 1px solid var(--linea); }
.servizi img { width: 48px; height: 48px; }
.servizi span { max-width: 11em; }

/* 02 · Lo Stagnone */
.stagnone { padding-top: clamp(40px, 5vw, 76px); }
.stagnone__griglia { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); column-gap: clamp(28px, 3.4vw, 52px); align-items: start; }
.stagnone__occhiello { grid-column: 1; }
.foto--stagnone { grid-column: 1; }
.foto--stagnone img { aspect-ratio: 1.92; }
.stagnone__testo { grid-column: 2; grid-row: 1 / span 2; padding-top: clamp(4px, 1vw, 16px); }
.stagnone__testo .titolo-sezione { margin-bottom: 22px; }
.stagnone__testo .testo { margin-bottom: 30px; }
.punti { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 26px; }
.punti li { display: flex; align-items: flex-start; gap: 14px; padding-right: 14px; font-size: 16px; line-height: 1.35; color: var(--blu-testo); }
.punti li + li { border-left: 1px solid var(--linea); padding-left: 18px; padding-right: 0; }
.punti img { width: 46px; height: 46px; flex: none; }
.punti strong { display: block; font-weight: 600; font-size: 17px; color: var(--blu); margin-bottom: 2px; }
.stagnone__piede { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.stagnone__onde { width: 96px; height: auto; opacity: 0.95; }

/* 03 · Da esplorare */
.dintorni { padding-top: clamp(40px, 5vw, 80px); }
.dintorni__griglia { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.82fr) minmax(0, 0.78fr); gap: clamp(24px, 2.6vw, 40px); align-items: start; }
.dintorni__testo .titolo-sezione { font-size: clamp(30px, 3.5vw, 50px); }
.dintorni__testo .testo { margin-bottom: 22px; max-width: 26em; }
.foto--pontile { padding-top: 8px; }
.foto--pontile img { aspect-ratio: 1.14; }
.distanze { display: grid; padding-top: 4px; }
.distanze li {
  display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center;
  padding: 12px 0 14px; border-bottom: 1px solid var(--linea);
}
.distanze li:last-child { border-bottom: 0; }
.distanze img { grid-row: 1 / span 2; width: 44px; height: 44px; }
.distanze__luogo { font-size: 17px; line-height: 1.25; color: var(--blu-testo); }
.distanze__km { font-family: var(--sans); font-size: clamp(24px, 2vw, 30px); font-weight: 500; line-height: 1.15; color: var(--blu); }

/* Prima di partire */
.info { padding-top: clamp(32px, 4vw, 64px); padding-bottom: clamp(36px, 3.6vw, 56px); }
.info .titolo-sezione { margin-bottom: clamp(24px, 2.4vw, 36px); }
.regole { display: grid; grid-template-columns: repeat(5, auto); justify-content: space-between; }
.regole li { display: flex; align-items: center; gap: 16px; padding-right: clamp(14px, 2vw, 32px); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.3; color: var(--blu); }
.regole li + li { border-left: 1px solid var(--linea); padding-left: clamp(14px, 2vw, 32px); }
.regole li:last-child { padding-right: 0; }
.regole img { width: 56px; height: 56px; flex: none; }

/* Invito finale */
.invito { padding-bottom: 14px; }
.invito__fascia {
  position: relative; overflow: hidden; border-radius: var(--raggio-piccolo); min-height: clamp(260px, 21vw, 300px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px;
  padding: clamp(28px, 3.4vw, 48px) clamp(20px, 4vw, 60px); background: #FDE7CA;
}
.invito__sfondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 60%; }
.invito__testo { position: relative; z-index: 2; }
.invito__testo .titolo-sezione { font-size: clamp(34px, 4.25vw, 61px); line-height: 1.02; color: #06325A; margin-bottom: 14px; }
.invito__testo p { font-size: clamp(18px, 1.7vw, 25px); color: #06325A; }
.invito__sole { position: absolute; z-index: 2; width: clamp(110px, 12vw, 170px); left: 52%; top: 12%; }
.invito__btn { position: relative; z-index: 2; align-self: end; margin-bottom: clamp(4px, 1vw, 16px); }

/* ---------- Footer ---------- */
.piede { background: var(--blu-notte); color: var(--testo-piede); padding: 26px 0 30px; margin-top: 0; }
.piede a { color: var(--testo-piede); text-decoration: none; }
.piede__riga { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-bottom: 18px; border-bottom: 1px solid rgba(209, 222, 231, 0.18); }
.piede__logo img { height: 64px; width: auto; }
.piede__menu ul { display: flex; flex-wrap: wrap; gap: 8px clamp(20px, 3vw, 48px); }
.piede__menu a { display: inline-block; padding: 8px 0; font-size: 17px; }
.piede__fondo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; font-size: 15px; }
.piede__legale { display: flex; align-items: center; }
.piede__legale li + li { border-left: 1px solid rgba(209, 222, 231, 0.35); margin-left: 16px; padding-left: 16px; }
.piede__legale a { display: inline-block; padding: 6px 0; }
.piede__note { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--testo-piede); opacity: 0.85; }
.piede__note:empty { display: none; }
.credit { margin-top: 10px; font-size: 14px; opacity: 0.85; }
.credit a { text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .piede a:hover { color: var(--bianco); }
}

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

/* ---------- Pagine semplici (legali, 404) ---------- */
.pagina { padding-block: clamp(40px, 5vw, 80px) clamp(64px, 7vw, 110px); }
.legale { max-width: 760px; color: var(--blu-testo); font-size: 18px; line-height: 1.6; }
.legale h1 { font-family: var(--serif); font-weight: 600; color: var(--blu); font-size: clamp(42px, 5vw, 64px); line-height: 1; margin-bottom: 14px; }
.legale h2 { font-family: var(--serif); font-weight: 600; color: var(--blu); font-size: clamp(28px, 2.6vw, 36px); line-height: 1.1; margin: 40px 0 12px; }
.legale p, .legale ul, .legale ol { margin: 0 0 14px; }
.legale ul { list-style: disc; padding-left: 1.3em; }
.legale ol { padding-left: 1.3em; }
.legale li { margin-bottom: 6px; }
.legale a { color: var(--rosso); text-underline-offset: 3px; }
.legale table { width: 100%; border-collapse: collapse; margin: 8px 0 18px; font-size: 16px; }
.legale th, .legale td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--linea); }
.legale th { color: var(--blu); font-weight: 600; background: var(--crema-scura); }
.tabella-scorre { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.errore { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.errore h1 { font-family: var(--serif); font-weight: 600; color: var(--blu); font-size: clamp(48px, 6vw, 88px); line-height: 0.95; margin-bottom: 18px; }
.errore p { margin-bottom: 26px; }
.errore__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.errore img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--raggio-piccolo); }

/* ---------- Tablet ---------- */
@media (max-width: 1180px) and (min-width: 901px) {
  .soggiorno__campi { grid-template-columns: 1fr 1fr; }
  .campo--ospiti { grid-column: 1 / -1; }
  .ospiti { left: 0; right: auto; transform-origin: top left; }
}
@media (max-width: 1100px) {
  .menu { display: none; }
  .menu-apri { display: block; }
  .lingue-posto { min-width: 64px; }
  .casa__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .casa__testo { grid-column: 1 / -1; }
  .dintorni__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dintorni__testo { grid-column: 1 / -1; }
  .regole { grid-template-columns: repeat(3, auto); row-gap: 22px; justify-content: start; }
  .regole li:nth-child(4) { border-left: 0; padding-left: 0; }
}
@media (max-width: 900px) {
  .hero__griglia { grid-template-columns: 1fr; }
  .hero__foto { margin: 8px 18px 0 0; }
  .prenota__griglia { grid-template-columns: 1fr; }
  .prenota__testa { flex-direction: column; align-items: flex-start; }
  .prenota__garanzie { justify-items: start; padding-bottom: 0; }
  .stagnone__griglia { grid-template-columns: 1fr; }
  .stagnone__testo { grid-column: 1; grid-row: auto; padding-top: 24px; }
  .invito__fascia { grid-template-columns: 1fr; }
  .invito__btn { justify-self: start; }
}

/* ---------- Telefono (base da telefono di Emil Kowalski, 09 § 5) ---------- */
@media (max-width: 700px) {
  :root { --altezza-testata: 72px; }
  body { font-size: 17px; }
  html { scroll-padding-top: 76px; }
  .testata__logo img { height: 52px; }
  .testata.scorsa .testata__logo img { height: 46px; }
  .testata__prenota { display: none; }
  .testata__riga { gap: 8px; }
  .lingue-posto { min-width: 60px; }
  .menu-telefono { padding-top: calc(var(--altezza-testata) + 16px); }

  .occhiello { font-size: 14px; margin-bottom: 10px; }
  .hero { padding-top: 8px; }
  .hero__testo { padding-top: 10px; }
  .hero__titolo { font-size: clamp(44px, 12.6vw, 56px); line-height: 0.9; margin-bottom: 14px; }
  .hero__sotto { font-size: 20px; margin-bottom: 18px; }
  .hero__azioni { gap: 12px; margin-bottom: 18px; }
  .hero__azioni .btn { width: 100%; }
  .luogo { font-size: 16px; }
  .hero__foto { margin: 14px 10px 0 0; }
  .hero__sole { width: 70px; left: -8px; top: -20px; }
  .hero__foto figcaption { font-size: 15px; max-width: 55%; }
  .hero__cartolina { width: 138px; right: -10px; bottom: -14px; }

  .fatti { grid-template-columns: repeat(3, 1fr); margin-top: 30px; padding: 16px 0; }
  .fatti li { flex-direction: column; gap: 8px; text-align: center; font-size: 15px; line-height: 1.25; padding: 4px 6px; }
  .fatti img { width: 36px; height: 36px; }

  .prenota { padding-bottom: 48px; }
  .prenota__scheda { padding: 20px 12px 18px; margin-inline: -4px; }
  .prenota__testa { padding-inline: 4px; gap: 12px; margin-bottom: 18px; }
  .prenota__sicuro { font-size: 15px; white-space: normal; }
  .prenota__sicuro img { width: 24px; height: 24px; }
  .calendario { padding: 12px 8px 14px; }
  .calendario__testa { margin-bottom: 4px; }
  .calendario__intestazione { font-size: 13px; padding-bottom: 6px; }
  .giorno { min-height: 52px; }
  .soggiorno { padding: 18px 14px 16px; }
  .soggiorno__campi { grid-template-columns: 1fr 1fr; gap: 12px; }
  .campo--ospiti { grid-column: 1 / -1; }
  .campo__valore { padding: 8px 10px; min-height: 48px; }
  .btn--pieno { min-height: 52px; }
  .ospiti { left: 0; right: auto; transform-origin: top left; }
  .soggiorno__riga, .soggiorno__totale { font-size: 17px; }

  .casa__griglia { grid-template-columns: 1fr 1fr; gap: 14px; }
  .casa__testo { margin-bottom: 10px; }
  .casa__testo .titolo-sezione { margin-bottom: 16px; }
  .casa__testo .testo { margin-bottom: 18px; }
  .foto--terrazza { grid-column: 1 / -1; }
  .casa__piccole { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: 12px; }
  .foto figcaption { font-size: 15px; margin-top: 8px; }

  .servizi { grid-template-columns: 1fr 1fr; padding: 8px 6px; margin-top: 30px; }
  .servizi li { flex-direction: row; text-align: left; gap: 12px; padding: 12px 8px; font-size: 16px; border-left: 0 !important; }
  .servizi li:nth-child(2n) { border-left: 1px solid var(--linea) !important; padding-left: 14px; }
  .servizi li:nth-child(n + 3) { border-top: 1px solid var(--linea); }
  .servizi img { width: 34px; height: 34px; flex: none; }

  .stagnone { padding-top: 48px; }
  .stagnone__testo { padding-top: 20px; }
  .stagnone__testo .titolo-sezione { margin-bottom: 14px; }
  .stagnone__testo .testo { margin-bottom: 22px; }
  .punti { grid-template-columns: 1fr; gap: 14px; margin-bottom: 18px; }
  .punti li + li { border-left: 0; padding-left: 0; }
  .punti img { width: 38px; height: 38px; }
  .stagnone__onde { width: 72px; }

  .dintorni { padding-top: 36px; }
  .dintorni__griglia { grid-template-columns: 1fr; gap: 20px; }
  .dintorni__testo .titolo-sezione { font-size: clamp(27px, 8vw, 34px); }
  .luogo--grande { margin: 14px 0 12px; font-size: 18px; }
  .foto--pontile { padding-top: 0; }
  .foto--pontile img { aspect-ratio: 1.5; }
  .distanze { grid-template-columns: 1fr 1fr; column-gap: 14px; }
  .distanze li { grid-template-columns: 36px 1fr; column-gap: 10px; padding: 12px 0; }
  .distanze li:nth-last-child(2) { border-bottom: 0; }
  .distanze img { width: 32px; height: 32px; }
  .distanze__luogo { font-size: 14px; }
  .distanze__km { font-size: 22px; }

  .info { padding-top: 28px; padding-bottom: 32px; }
  .regole { grid-template-columns: 1fr 1fr; gap: 0; }
  .regole li { padding: 12px 8px 12px 0 !important; border-left: 0 !important; gap: 10px; font-size: 16px; }
  .regole li:nth-child(n + 3) { border-top: 1px solid var(--linea); }
  .regole li:nth-child(2n) { padding-left: 12px !important; border-left: 1px solid var(--linea) !important; }
  .regole li:last-child { grid-column: 1 / -1; }
  .regole img { width: 40px; height: 40px; }

  .invito { padding-bottom: 0; }
  .invito .contenitore { padding-inline: 0; }
  .invito__fascia { border-radius: 0; min-height: 0; padding: 92px 20px 30px; gap: 18px; }
  .invito__fascia::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(253, 231, 202, 0.86) 0%, rgba(253, 231, 202, 0.62) 55%, rgba(253, 231, 202, 0) 100%); }
  .invito__sfondo { object-position: 78% 70%; }
  .invito__testo .titolo-sezione { font-size: clamp(30px, 9vw, 38px); }
  .invito__testo p { font-size: 18px; }
  .invito__sole { width: 76px; left: 20px; right: auto; top: 18px; }
  .invito__btn { width: 100%; }

  .piede { padding: 24px 0 calc(100px + env(safe-area-inset-bottom, 0px)); }
  .piede__riga { flex-direction: column; align-items: flex-start; gap: 14px; }
  .piede__logo img { height: 52px; }
  .piede__menu ul { gap: 2px 22px; }
  .piede__fondo { flex-direction: column; align-items: flex-start; gap: 6px; }

  .barra-telefono {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(254, 253, 249, 0.97); box-shadow: 0 -1px 0 var(--linea), 0 -10px 24px -18px rgba(4, 58, 117, 0.4);
    transition: transform 280ms var(--curva-uscita), opacity 200ms ease;
  }
  .barra-telefono.nascosta { transform: translateY(110%); opacity: 0; pointer-events: none; }
  .barra-telefono .btn { min-height: 52px; }

  .errore { grid-template-columns: 1fr; }
  .legale { font-size: 17px; }
}
@media (max-width: 360px) {
  .testata__logo img { height: 46px; }
  .btn--pieno { font-size: 17px; padding-inline: 16px; gap: 10px; }
  .fatti li { font-size: 14px; }
  .servizi li { font-size: 15px; gap: 8px; padding: 10px 6px; }
  .servizi li:nth-child(2n) { padding-left: 10px; }
  .servizi img { width: 28px; height: 28px; }
  .regole { grid-template-columns: 1fr; }
  .regole li:nth-child(n) { padding-left: 0 !important; border-left: 0 !important; }
  .regole li:nth-child(n + 2) { border-top: 1px solid var(--linea); }
  .hero__titolo { font-size: 42px; }
  .giorno__prezzo { font-size: 12px; letter-spacing: -0.02em; }
  .soggiorno__campi { grid-template-columns: 1fr; }
  .distanze { grid-template-columns: 1fr; }
  .distanze li:nth-last-child(2) { border-bottom: 1px solid var(--linea); }
}

/* ---------- Meno movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 120ms !important; animation-duration: 120ms !important; }
}