/* Giampiero’s Rooms Napoli · home (step 5, fedele al design v8 del kit, rifinita)
   Colori misurati sul design (confronta-design.py --colori) · caratteri serviti dal sito:
   Newsreader (titoli, con grazie) e Inter (testo, senza grazie), entrambi OFL. */

@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-variable-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* fondi */
  --bianco: #FEFEFE;
  --avorio: #FBF9F4;
  --carta: #F8F7F5;
  --nebbia: #F0F0F0;
  --linea: #E5E3DE;
  --linea-calda: #D9D4CB;
  --grigio: #BCC2C5;
  /* caldi (disegni a tratto, sabbia) */
  --sabbia: #E9CDB0;
  --tratto: #C7B39A;
  --bronzo: #947E62;
  --terra: #3D2F20;
  /* inchiostri */
  --titoli: #0C1326;
  --notte: #1B293C;
  --inchiostro: #21303F;
  --testo: #4D515E;
  --testo-tenue: #616978;
  /* via Foria (arancione, dal segnaposto del design) */
  --arancio: #FE730E;
  /* Capodimonte (verde, dal segnaposto del kit) */
  --verde: #216536;

  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --raggio: 18px;
  --raggio-piccolo: 10px;
  --ombra: 0 18px 50px -22px rgb(27 41 60 / .28), 0 2px 8px rgb(27 41 60 / .05);
  --ombra-lieve: 0 10px 30px -18px rgb(27 41 60 / .22);
  --testata: 76px;
  /* il movimento (Emil Kowalski): entrate e uscite, e cose che si spostano sullo schermo */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

*, *::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: calc(var(--testata) + 12px);
}
html.menu-aperto { overflow: hidden; }
body {
  margin: 0;
  background: var(--bianco);
  color: var(--testo);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "ss01" 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; color: var(--titoli); font-family: var(--serif); font-weight: 460; letter-spacing: -.01em; line-height: 1.08; font-variation-settings: "opsz" 72; }
h2 { font-size: clamp(2.05rem, 1.3rem + 2.3vw, 2.95rem); }   /* Otto camere: 47 px */
h3 { font-size: 1.3rem; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select { font: inherit; color: inherit; }
a, button, summary, select, input { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--notte); outline-offset: 3px; border-radius: 4px; }

.salta {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--notte); color: var(--bianco); padding: 10px 16px; border-radius: 8px; text-decoration: none;
}
.salta:focus { top: 12px; }

.contenitore {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
@media (min-width: 760px) { .contenitore { padding-left: 40px; padding-right: 40px; } }

.occhiello {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--testo);
  margin-bottom: 10px;
}
.occhiello--chiaro { color: rgb(255 255 255 / .92); }

/* ── pulsanti ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px;
  border-radius: 10px; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: .98rem; font-weight: 550; line-height: 1.2;
  text-decoration: none; text-align: center;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform 160ms var(--ease-out), background-color .2s ease, box-shadow .2s ease;
}
.btn:active { transform: scale(.97); }
.btn--scuro { background: var(--notte); color: var(--bianco); box-shadow: 0 8px 22px -12px rgb(27 41 60 / .7); }
.btn--bianco { background: var(--bianco); color: var(--titoli); box-shadow: 0 10px 26px -14px rgb(0 0 0 / .55); }
.btn--largo { width: 100%; }
.btn[hidden] { display: none; }
.btn--testata { min-height: 42px; padding: 9px 22px; border-radius: 999px; font-size: .92rem; }
.btn__freccia { width: 16px; height: auto; }
@media (hover: hover) and (pointer: fine) {
  .btn--scuro:hover { background: var(--inchiostro); box-shadow: 0 12px 26px -12px rgb(27 41 60 / .8); }
  .btn--bianco:hover { background: var(--avorio); }
}

/* ── intestazione ───────────────────────────────────────── */
.testata {
  position: sticky; top: 0; z-index: 50;
  background: var(--bianco);
  border-bottom: 1px solid transparent;
  padding-top: env(safe-area-inset-top, 0px);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.testata--scorsa { border-bottom-color: var(--linea); box-shadow: 0 6px 24px -18px rgb(27 41 60 / .35); }
.testata__in {
  height: var(--testata);
  max-width: 1320px; margin: 0 auto;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
  display: flex; align-items: center; gap: 24px;
}
.testata__logo { flex: 0 0 auto; display: block; }
.testata__logo img { width: 168px; height: auto; }
.testata__menu { display: none; align-items: center; gap: 16px; margin: 0 auto; white-space: nowrap; }
.testata__menu a, .testata__ospiti {
  font-size: .85rem; color: var(--testo); text-decoration: none; padding: 8px 0;
  transition: color .2s ease;
}
.testata__destra { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.testata__ospiti { display: none; align-items: center; gap: 7px; border: 0; background: transparent; cursor: pointer; font-family: inherit; white-space: nowrap; }
.testata__ospiti > img:first-child { width: 14px; }

/* le tendine: Via Foria, Capodimonte, Area ospiti */
.voce { position: relative; display: inline-flex; align-items: center; }
.voce__apri {
  width: 20px; height: 44px; padding: 0; margin-left: 1px; border: 0; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  user-select: none; -webkit-user-select: none;
}
.voce__apri img, .voce__freccia { width: 9px; opacity: .7; transition: transform 200ms var(--ease-out); }
.voce__apri[aria-expanded="true"] img, .testata__ospiti[aria-expanded="true"] .voce__freccia, .voce-tel [aria-expanded="true"] img:last-child { transform: rotate(180deg); }
.tendina {
  position: absolute; top: calc(100% + 8px); left: -14px; z-index: 60;
  min-width: 176px; padding: 6px;
  background: var(--bianco); border: 1px solid var(--linea); border-radius: 12px; box-shadow: var(--ombra);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top left;
  transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out), visibility 0s linear 120ms;
}
.tendina::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }   /* il mouse non la perde scendendo */
.tendina--foria { border-top: 2px solid var(--arancio); }
.tendina--capodimonte { border-top: 2px solid var(--verde); }
.tendina--destra { left: auto; right: 0; transform-origin: top right; }
.voce [aria-expanded="true"] ~ .tendina { opacity: 1; visibility: visible; transform: none; transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s; }
.tendina a { display: block; padding: 10px 12px; border-radius: 8px; font-size: .9rem; color: var(--testo); text-decoration: none; white-space: nowrap; }
.tendina a:active { background: var(--nebbia); }
@media (hover: hover) and (pointer: fine) {
  .voce:hover .tendina { opacity: 1; visibility: visible; transform: none; transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s; }
  .voce:hover .voce__apri img, .voce:hover .voce__freccia { transform: rotate(180deg); }
  .tendina a:hover { background: var(--carta); color: var(--titoli); }
}
.btn--testata { display: none; }
.lingue-posto:empty { display: none; }
.testata__apri {
  width: 44px; height: 44px; border: 0; background: transparent; border-radius: 10px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  cursor: pointer; user-select: none; -webkit-user-select: none;
}
.testata__apri span { display: block; width: 22px; height: 2px; background: var(--titoli); border-radius: 2px; transition: transform 250ms var(--ease-out), opacity .2s ease; }
.testata__apri:active { background: var(--nebbia); }
.testata__apri[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.testata__apri[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.testata__apri[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (hover: hover) and (pointer: fine) {
  .testata__menu a:hover, .testata__ospiti:hover { color: var(--titoli); }
}
@media (max-width: 359px) {
  .testata__in { gap: 10px; }
  .testata__logo img { width: 132px; }
}
@media (min-width: 760px) {
  .testata__in { padding: 0 40px; }
  .testata__logo img { width: 180px; }
  .btn--testata { display: inline-flex; }
}
@media (min-width: 1300px) {
  /* qui ci stanno anche il logo, l'area ospiti, il pulsante e, dal 9-ter, il selettore delle lingue */
  .testata__in { gap: 16px; }
  .testata__logo img { width: 160px; }
  .testata__menu { display: flex; }
  .testata__destra { margin-left: 0; gap: 14px; }
  .testata__ospiti { display: inline-flex; }
  .testata__apri { display: none; }
  .btn--testata { padding: 9px 16px; font-size: .85rem; }
}

.menu-telefono {
  position: fixed; inset: 0; z-index: 45;
  height: 100dvh;
  background: var(--bianco);
  padding: calc(var(--testata) + env(safe-area-inset-top, 0px) + 20px) max(20px, env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  overflow-y: auto; overscroll-behavior: contain;
}
.menu-telefono { visibility: hidden; opacity: 0; transform: translateY(-10px); transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s linear 180ms; }
.menu-telefono--aperto { visibility: visible; opacity: 1; transform: none; transition: opacity 280ms var(--ease-out), transform 320ms var(--ease-out), visibility 0s; }
.menu-telefono nav > *, .menu-telefono > .btn { opacity: 0; transform: translateY(14px); transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out); }
.menu-telefono--aperto nav > *, .menu-telefono--aperto > .btn { opacity: 1; transform: none; transition: opacity 320ms var(--ease-out), transform 380ms var(--ease-out); }
.menu-telefono--aperto nav > :nth-child(2) { transition-delay: 30ms; }
.menu-telefono--aperto nav > :nth-child(3) { transition-delay: 60ms; }
.menu-telefono--aperto nav > :nth-child(4) { transition-delay: 90ms; }
.menu-telefono--aperto nav > :nth-child(5) { transition-delay: 120ms; }
.menu-telefono--aperto nav > :nth-child(6) { transition-delay: 150ms; }
.menu-telefono--aperto nav > :nth-child(7) { transition-delay: 180ms; }
.menu-telefono--aperto nav > :nth-child(8) { transition-delay: 210ms; }
.menu-telefono--aperto > .btn { transition-delay: 240ms; }
@media (min-width: 1300px) { .menu-telefono { display: none; } }
.menu-telefono nav { display: flex; flex-direction: column; }
.menu-telefono nav > a, .voce-tel { border-bottom: 1px solid var(--linea); }
.menu-telefono nav > a, .voce-tel > a, .voce-tel__titolo {
  font-family: var(--serif); font-size: 1.6rem; line-height: 1.2; color: var(--titoli); text-decoration: none;
  min-height: 52px; padding: 11px 0;
}
.menu-telefono nav > a:active, .voce-tel > a:active, .voce-tel__titolo:active { color: var(--bronzo); }
.voce-tel { display: grid; grid-template-columns: 1fr 48px; align-items: center; }
.voce-tel__apri {
  width: 48px; height: 48px; padding: 0; border: 0; background: transparent; border-radius: 10px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  user-select: none; -webkit-user-select: none;
}
.voce-tel__apri:active { background: var(--nebbia); }
.voce-tel__apri img, .voce-tel__titolo .voce__freccia { width: 12px; opacity: .75; transition: transform 200ms var(--ease-out); }
.voce-tel__titolo {
  grid-column: 1 / -1; width: 100%; display: flex; align-items: center; gap: 12px;
  border: 0; background: transparent; cursor: pointer; text-align: left;
  user-select: none; -webkit-user-select: none;
}
.voce-tel__titolo > img:first-child { width: 16px; }
.voce-tel__titolo .voce__freccia { margin-left: auto; margin-right: 18px; }
.voce-tel__sotto { grid-column: 1 / -1; display: none; margin: 0 0 10px; padding-left: 14px; border-left: 2px solid var(--linea-calda); }
.voce-tel--foria .voce-tel__sotto { border-left-color: var(--arancio); }
.voce-tel--capodimonte .voce-tel__sotto { border-left-color: var(--verde); }
.voce-tel [aria-expanded="true"] ~ .voce-tel__sotto { display: block; animation: domanda-apre 260ms var(--ease-out); }
.voce-tel__sotto a { display: block; padding: 10px 0; font-size: 1rem; color: var(--testo); text-decoration: none; }
.voce-tel__sotto a:active { color: var(--bronzo); }

/* ── hero ───────────────────────────────────────────────── */
.hero {
  position: relative; isolation: isolate;
  min-height: 640px;
  display: flex; flex-direction: column;
  color: var(--bianco);
  border-radius: 0 0 50% 50% / 0 0 34px 34px;
  overflow: hidden;
}
.hero__sfondo { position: absolute; inset: 0; z-index: -2; will-change: transform; }
.hero__foto { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; animation: hero-respiro 2400ms var(--ease-out) both; }
@keyframes hero-respiro { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero__testo > * { animation: hero-entra 900ms var(--ease-out) both; }
.hero__testo > :nth-child(1) { animation-delay: 120ms; }
.hero__testo > :nth-child(2) { animation-delay: 200ms; }
.hero__testo > :nth-child(3) { animation-delay: 320ms; }
.hero__testo > :nth-child(4) { animation-delay: 400ms; }
.hero__testo > :nth-child(5) { animation-delay: 480ms; }
.hero__camera { animation: hero-camera 1000ms var(--ease-out) 520ms both; }
@keyframes hero-entra { from { opacity: 0; transform: translateY(30px); } }
@keyframes hero-camera { from { opacity: 0; transform: translateY(36px) scale(.96); } }
.hero__velo {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgb(12 19 38 / .68) 0%, rgb(12 19 38 / .52) 36%, rgb(12 19 38 / .2) 54%, rgb(12 19 38 / 0) 68%),
    linear-gradient(180deg, rgb(12 19 38 / .3) 0%, rgb(12 19 38 / 0) 30%, rgb(12 19 38 / .1) 64%, rgb(12 19 38 / .5) 100%);
}
.hero__in {
  flex: 1;
  width: 100%; max-width: 1320px; margin: 0 auto;
  padding: 40px max(20px, env(safe-area-inset-right, 0px)) 118px max(20px, env(safe-area-inset-left, 0px));
  display: flex; flex-direction: column; justify-content: flex-start; gap: 26px;
}
.hero__testo { max-width: 660px; min-width: 0; }
.hero h1 {
  color: var(--bianco);
  font-size: clamp(2.2rem, 1.75rem + 2vw, 3.4rem);
  line-height: 1.06; font-weight: 450; letter-spacing: -.02em;
  text-shadow: 0 2px 26px rgb(12 19 38 / .35);
  text-wrap: balance;
}
.hero h1 span { display: inline; }
.hero__sotto { margin-top: 14px; font-size: 1rem; line-height: 1.5; color: rgb(255 255 255 / .94); text-shadow: 0 1px 14px rgb(12 19 38 / .5); text-wrap: pretty; }
.hero__sotto + .hero__sotto { margin-top: 4px; }
.hero__testo .btn { margin-top: 22px; }
.hero__camera {
  margin: 0; align-self: flex-end;
  width: min(46vw, 230px);
  position: relative;
  border: 4px solid var(--bianco);
  border-radius: 8px;
  box-shadow: 0 24px 50px -20px rgb(0 0 0 / .55);
  background: var(--bianco);
}
.hero__camera img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.hero__camera-link {
  position: absolute; right: -4px; bottom: -4px;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bianco); color: var(--titoli);
  font-size: .82rem; font-weight: 500; text-decoration: none;
  padding: 10px 12px 8px 14px; border-radius: 10px 0 6px 0;
  user-select: none; -webkit-user-select: none;
}
.hero__camera-link img { width: 13px; transition: transform 200ms var(--ease-out); }
.hero__giu {
  position: absolute; left: 50%; bottom: 88px; transform: translateX(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bianco); display: none; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px -10px rgb(0 0 0 / .5);
}
.hero__giu img { width: 12px; animation: freccia 1800ms var(--ease-in-out) 1400ms infinite; }
@keyframes freccia { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
.hero__giu:active { transform: translateX(-50%) scale(.94); }
@media (min-width: 760px) {
  .hero { min-height: clamp(520px, 62svh, 560px); border-radius: 0 0 50% 50% / 0 0 56px 56px; }
  .hero__in { padding: 0 40px 124px; flex-direction: row; align-items: center; justify-content: space-between; }
  .hero__testo { padding-top: 0; }
  .hero h1 span { display: block; }
  .hero__camera { width: clamp(260px, 26vw, 360px); align-self: flex-end; margin-bottom: -10px; }
  .hero__camera-link { font-size: .92rem; padding: 12px 16px 10px 18px; }
  .hero__giu { display: inline-flex; bottom: 104px; }
}
@media (hover: hover) and (pointer: fine) {
  .hero__camera-link:hover { color: var(--bronzo); }
  .hero__giu:hover { box-shadow: 0 10px 24px -10px rgb(0 0 0 / .65); }
}

/* ── calendario e modulo (sovrapposto alla hero) ───────── */
.prenota {
  position: relative;
  margin-top: -84px;
  padding: 0 max(12px, env(safe-area-inset-right, 0px)) 40px max(12px, env(safe-area-inset-left, 0px));
  z-index: 2;
}
.prenota__deco { position: absolute; z-index: -1; pointer-events: none; opacity: .9; display: none; }
.prenota__deco--sx { left: 0; top: 170px; width: clamp(240px, 22vw, 340px); }
.prenota__deco--dx { right: 0; top: 46%; width: 300px; height: 96px; background: url("/assets/img/kit/architettura-napoli.png") right center / auto 100% no-repeat; }
.prenota__carta {
  max-width: 1080px; margin: 0 auto;
  background: var(--bianco);
  border: 1px solid var(--linea);
  border-radius: 20px;
  box-shadow: var(--ombra);
  padding: 26px 18px 22px;
}
.prenota__carta h2 { font-size: clamp(1.65rem, 1.2rem + 1vw, 1.9rem); margin-bottom: 14px; }   /* 30 px */
.modulo__campi { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 12px; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo--camera, .campo--ospiti { grid-column: 1 / -1; }
.campo__etichetta { font-size: .86rem; color: var(--testo); }
.campo__scatola { position: relative; display: block; }
.campo select, .campo input {
  width: 100%; min-height: 48px;
  font-size: 16px;
  padding: 10px 14px;
  background: var(--bianco);
  border: 1px solid var(--linea-calda);
  border-radius: 8px;
  color: var(--titoli);
  appearance: none; -webkit-appearance: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.campo input { padding-right: 10px; }
.campo input::-webkit-date-and-time-value { text-align: left; }
.campo input::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.campo__scatola--scelta::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 12px; height: 8px; margin-top: -4px;
  background: url("/assets/icone/espandi.svg") center / contain no-repeat; pointer-events: none; opacity: .8;
}
.campo select { padding-right: 38px; cursor: pointer; }
.campo select:focus, .campo input:focus { outline: none; border-color: var(--notte); box-shadow: 0 0 0 3px rgb(27 41 60 / .12); }
.campo--errore select, .campo--errore input { border-color: var(--arancio); }

.modulo__corpo { display: grid; gap: 22px; margin-top: 20px; }
.calendario { min-width: 0; }
.calendario__testa { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.calendario__mese { font-weight: 600; color: var(--titoli); font-size: 1rem; min-height: 1.6em; }
.calendario__freccia {
  width: 44px; height: 44px; border: 0; background: transparent; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  user-select: none; -webkit-user-select: none;
  transition: background-color .2s ease, opacity .2s ease;
}
.calendario__freccia img { width: 8px; }
.calendario__freccia:active { background: var(--nebbia); }
.calendario__freccia[disabled] { opacity: .25; cursor: default; }
.calendario__giorni, .calendario__griglia { display: grid; grid-template-columns: repeat(7, 1fr); }
.calendario__giorni span { text-align: center; font-size: .76rem; font-weight: 600; color: var(--testo); padding: 4px 0 6px; }
.calendario__griglia { border: 1px solid var(--linea); border-radius: 8px; overflow: hidden; background: var(--bianco); }
.giorno {
  position: relative;
  min-height: 44px; border: 0; margin: 0;
  border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
  background: var(--bianco); color: var(--titoli);
  font-size: .9rem; font-variant-numeric: tabular-nums;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: background-color .15s ease, color .15s ease;
}
.giorno:nth-child(7n) { border-right: 0; }
.giorno--vuoto { cursor: default; background: var(--carta); }
.giorno--passato { color: var(--grigio); cursor: default; }
.giorno--occupata { color: var(--testo-tenue); background: repeating-linear-gradient(135deg, var(--nebbia) 0 5px, var(--bianco) 5px 10px); cursor: not-allowed; text-decoration: line-through; text-decoration-color: rgb(97 105 120 / .5); }
.giorno--periodo { background: var(--avorio); }
.giorno--arrivo, .giorno--partenza { background: var(--notte); color: var(--bianco); text-decoration: none; }
.giorno--oggi:not(.giorno--arrivo):not(.giorno--partenza)::after { content: ""; position: absolute; bottom: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--bronzo); }
.giorno__prezzo { font-size: .64rem; color: var(--bronzo); margin-top: 2px; }
.giorno--arrivo .giorno__prezzo, .giorno--partenza .giorno__prezzo { color: var(--sabbia); }
.giorno:not([disabled]):not(.giorno--vuoto):active { background: var(--sabbia); }
@media (hover: hover) and (pointer: fine) {
  .giorno:not([disabled]):not(.giorno--vuoto):not(.giorno--arrivo):not(.giorno--partenza):hover { background: var(--carta); }
  .calendario__freccia:not([disabled]):hover { background: var(--nebbia); }
}
.calendario__legenda { display: flex; align-items: center; gap: 18px; margin-top: 10px; font-size: .8rem; color: var(--testo-tenue); }
.calendario__notti { margin-left: auto; font-weight: 600; color: var(--titoli); font-variant-numeric: tabular-nums; }
.legenda { display: inline-flex; align-items: center; gap: 8px; }
.legenda::before { content: ""; width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--linea-calda); background: var(--bianco); }
.legenda--occupata::before { background: repeating-linear-gradient(135deg, var(--nebbia) 0 3px, var(--bianco) 3px 6px); }

.modulo__azione { display: flex; flex-direction: column; align-items: stretch; text-align: center; gap: 8px; }
.modulo__azione .btn { min-height: 54px; font-size: 1.02rem; }
.modulo__esito { font-size: .9rem; color: var(--titoli); min-height: 0; text-wrap: pretty; }
.modulo__esito:empty { display: none; }
.modulo__esito--errore { color: var(--terra); background: var(--avorio); border: 1px solid var(--sabbia); border-radius: 8px; padding: 8px 12px; }
.modulo__nota { font-size: .86rem; line-height: 1.45; color: var(--testo); text-wrap: pretty; }
.thk-cin { font-size: .74rem; color: var(--testo-tenue); letter-spacing: .02em; line-height: 1.5; }
.modulo__privacy { font-size: .78rem; color: var(--testo-tenue); text-wrap: balance; }
.modulo__privacy a { color: var(--testo); }

@media (min-width: 760px) {
  .prenota { padding-left: 40px; padding-right: 40px; margin-top: -104px; padding-bottom: 30px; }
  .prenota__carta { padding: 26px 44px 22px; border-radius: 24px; }
  .modulo__campi { gap: 16px; }
  .campo--camera, .campo--ospiti { grid-column: auto; }
  .modulo__corpo { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 16px; }
  .modulo__azione { padding-top: 20px; }
  .giorno { min-height: 32px; }
}
@media (min-width: 1000px) {
  .modulo__campi { grid-template-columns: 1.15fr 1fr 1fr 1fr; }
}
@media (min-width: 1100px) {
  .prenota__deco { display: block; }
  .modulo__corpo { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 64px; }
  .modulo__azione { padding-left: 28px; padding-right: 28px; }
}

/* ── il tempo, finalmente tuo ───────────────────────────── */
.vantaggi {
  position: relative; isolation: isolate;
  background: var(--carta);
  padding: 56px 0 64px;
  border-radius: 46% 54% 0 0 / 46px 30px 0 0;
  overflow: hidden;
}
.vantaggi__fondo { position: absolute; z-index: -1; left: 50%; bottom: 8px; width: min(560px, 110vw); transform: translateX(-50%); opacity: .6; pointer-events: none; }
.vantaggi h2 { font-size: clamp(2.05rem, 1.3rem + 2.3vw, 2.95rem); margin-bottom: 26px; text-wrap: balance; }
.vantaggi__lista { display: grid; gap: 14px; }
.vantaggio {
  display: flex; align-items: center; gap: 16px;
  background: rgb(254 254 254 / .82);
  border: 1px solid var(--linea);
  border-radius: 999px 28px 28px 999px;
  padding: 14px 22px 14px 14px;
  box-shadow: var(--ombra-lieve);
}
.vantaggio__ill { flex: 0 0 auto; width: auto; height: 84px; }
.vantaggio__ill--chiavi { margin: -18px -4px -10px -10px; }
.vantaggio__ill--mini { height: auto; width: 120px; }
.vantaggio h3 { font-size: 1.3rem; margin-bottom: 4px; text-wrap: balance; }
.vantaggio p { font-size: .93rem; color: var(--testo); line-height: 1.45; text-wrap: pretty; }
@media (min-width: 900px) {
  .vantaggi { padding: 46px 0 58px; border-radius: 46% 54% 0 0 / 70px 46px 0 0; }
  .vantaggi h2 { margin-bottom: 22px; }
  .vantaggi__lista { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .vantaggio { padding: 14px 24px 14px 14px; border-radius: 28px; overflow: visible; }
  .vantaggio:nth-child(2) { position: relative; top: 14px; }
  .vantaggio__ill { height: 112px; }
  .vantaggio__ill--chiavi { margin: -26px -6px -18px -48px; }
  .vantaggio__ill--vasca { margin: -14px -4px -14px -8px; }
  .vantaggio--orizzonte { padding-left: 34px; }
  .vantaggio__ill--mini { display: none; }
  .vantaggi__fondo { width: min(540px, 38vw); left: 50%; bottom: 22px; opacity: .85; }
}

/* ── otto camere ────────────────────────────────────────── */
.camere {
  position: relative;
  background: var(--bianco);
  margin-top: -34px;
  padding: 52px 0 40px;
  border-radius: 54% 46% 0 0 / 34px 40px 0 0;
}
.camere__testa { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 30px; margin-bottom: 22px; }
.camere__testa h2 { text-wrap: balance; }
.camere__testa h2 + p { margin-top: 10px; color: var(--testo); font-size: 1rem; text-wrap: pretty; }
.camere__legenda { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .84rem; color: var(--testo-tenue); }
.dove-tag { display: inline-flex; align-items: center; gap: 7px; }
.dove-tag img { width: 11px; }
.camere__griglia { display: grid; gap: 18px; }
.camera {
  display: flex; flex-direction: column;
  background: var(--bianco);
  border: 1px solid var(--linea);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--ombra-lieve);
  transition: box-shadow .3s ease;
}
.camera__foto { width: 100%; aspect-ratio: 2.4 / 1; object-fit: cover; transition: transform 700ms var(--ease-out); }
.camera__corpo { display: flex; align-items: baseline; gap: 16px; padding: 14px 18px 4px; }
.camera__num { font-family: var(--serif); font-size: 2rem; line-height: 1; color: var(--titoli); font-variant-numeric: lining-nums; min-width: 2.2ch; }
.camera__nome { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; }
.camera__nome h3 { font-family: var(--sans); font-size: 1.12rem; font-weight: 600; letter-spacing: 0; }
.camera__dove { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--testo-tenue); }
.camera__dove img { width: 9px; }
.camera__riga {
  flex: 1; display: flex; align-items: center; gap: 6px 0;
  padding: 6px 18px 14px; font-size: .86rem; line-height: 1.4; color: var(--testo);
}
.camera__dotazione { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 10px; padding-right: 16px; margin-right: 16px; border-right: 1px solid var(--linea-calda); text-wrap: pretty; }
.camera__dotazione img { flex: 0 0 20px; width: 20px; opacity: .85; }
.camera__scopri {
  flex: 0 0 auto; color: var(--notte); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--grigio);
  padding: 10px 0; user-select: none; -webkit-user-select: none;
  transition: text-decoration-color .2s ease, color .2s ease;
}
.camera__scopri:active { color: var(--bronzo); }
@media (hover: hover) and (pointer: fine) {
  .camera:hover { box-shadow: var(--ombra); }
  .camera:hover .camera__foto { transform: scale(1.045); }
  .napoli__foto figure:hover img { transform: scale(1.045); }
  .vantaggio:hover .vantaggio__ill { transform: translateY(-4px) rotate(-2deg); }
  .camera__scopri:hover { text-decoration-color: var(--notte); }
}
@media (min-width: 760px) {
  .camere { padding: 46px 0 28px; margin-top: -46px; border-radius: 54% 46% 0 0 / 50px 56px 0 0; }
  .camere__griglia { grid-template-columns: 1fr 1fr; gap: 16px 26px; }
  .camera__foto { aspect-ratio: 3.5 / 1; }
  .camera__corpo { padding: 12px 22px 0; }
  .camera__riga { padding: 0 22px 8px; }
  .camera__scopri { padding: 6px 0; }
}

/* ── e poi, c'è Napoli ──────────────────────────────────── */
.napoli { position: relative; padding: 40px 0 44px; background: var(--bianco); }
.napoli__testa { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.napoli__testa > div { position: relative; z-index: 1; }
.napoli h2 { font-size: clamp(2.05rem, 1.3rem + 2.3vw, 2.95rem); text-wrap: balance; }
.napoli__frasi { margin-top: 12px; max-width: 820px; font-size: 1rem; line-height: 1.55; color: var(--testo); text-wrap: pretty; }
.napoli__frasi p + p { margin-top: 2px; }
.napoli__disegno { display: none; }
.napoli__panorama {
  position: relative;
  margin-top: 18px;
  height: clamp(250px, 21vw, 340px);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 7 C 18 1, 32 1, 50 5 S 82 11, 100 4 L 100 96 C 80 100, 60 92, 40 97 S 12 99, 0 95 Z' fill='black'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 7 C 18 1, 32 1, 50 5 S 82 11, 100 4 L 100 96 C 80 100, 60 92, 40 97 S 12 99, 0 95 Z' fill='black'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.napoli__panorama > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.napoli__carta {
  position: absolute; left: max(20px, env(safe-area-inset-left, 0px)); bottom: 34px;
  background: rgb(254 254 254 / .95);
  border-radius: 14px; padding: 8px 20px;
  box-shadow: var(--ombra);
  max-width: calc(100% - 40px);
}
.napoli__carta a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 0;
  font-size: 1rem; font-weight: 600; color: var(--titoli); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--grigio);
}
.napoli__carta a img { width: 13px; }
.temi { display: grid; gap: 22px; margin-top: 30px; }
.tema { display: flex; align-items: flex-start; gap: 18px; }
.tema img { width: 60px; flex: 0 0 60px; margin: -6px -6px 0 -8px; }
.tema h3 { font-size: 1.32rem; margin-bottom: 6px; }
.tema p { font-size: .94rem; line-height: 1.5; color: var(--testo); text-wrap: pretty; }
.napoli__nota { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; margin-top: 18px; font-size: .88rem; color: var(--testo); }
.napoli__nota a { color: var(--notte); font-weight: 500; text-underline-offset: 3px; text-decoration-color: var(--grigio); padding: 8px 0; }
.napoli__foto {
  display: grid; grid-auto-flow: column; grid-auto-columns: 82%;
  gap: 14px; margin-top: 30px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; padding-bottom: 4px;
}
.napoli__foto::-webkit-scrollbar { display: none; }
.napoli__foto figure { margin: 0; scroll-snap-align: start; }
.napoli__foto img { width: 100%; aspect-ratio: 2.6 / 1; object-fit: cover; border-radius: 12px; }
@media (min-width: 760px) { .napoli__foto img { aspect-ratio: 3.7 / 1; } .napoli__foto { margin-top: 22px; } }
.napoli__foto figcaption { font-size: .84rem; color: var(--testo-tenue); margin-top: 8px; }
@media (min-width: 760px) {
  .napoli { padding: 30px 0 28px; }
  .napoli__disegno { display: block; position: absolute; right: 30px; bottom: -34px; width: min(36%, 440px); opacity: .95; pointer-events: none; }
  .napoli__panorama { margin-top: 0; }
  .napoli__carta { left: max(40px, calc((100vw - 1320px) / 2 + 40px)); bottom: 36px; padding: 18px 24px 14px; }
  .temi { grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 22px; }
  .napoli__nota { margin-top: 10px; }
  .napoli__foto { grid-auto-flow: row; grid-template-columns: 1fr 1fr; gap: 26px; overflow: visible; }
}

/* ── da un desiderio, al tuo soggiorno ──────────────────── */
.passi {
  position: relative;
  background: var(--carta);
  padding: 56px 0 58px;
  border-radius: 50% 50% 0 0 / 36px 36px 0 0;
}
.passi h2, .segno h2, .dove h2 { font-size: clamp(1.75rem, 1.2rem + 1.2vw, 2.15rem); text-wrap: balance; }   /* 34 px */
.passi h2 { margin-bottom: 18px; }
.passi__corpo { position: relative; }
.passi__filo { display: none; }
.passi__lista { display: grid; gap: 16px; position: relative; }
.passo { display: flex; align-items: center; gap: 14px; }
.passo__num, .passo__ico {
  flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%;
  background: var(--bianco); border: 1px solid var(--linea);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--ombra-lieve);
}
.passo__num { font-family: var(--serif); font-size: 1.7rem; color: var(--titoli); font-variant-numeric: lining-nums; }
.passo__ico { width: 56px; height: 56px; margin-left: -22px; }
.passo__ico img { width: 28px; }
.passo__testo { font-size: .95rem; font-weight: 500; line-height: 1.4; color: var(--titoli); text-wrap: pretty; }
.passi__azione { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 20px; text-align: center; }
.passi__azione .btn { min-width: min(100%, 360px); }
.passi__azione p { font-size: .9rem; color: var(--testo); text-wrap: balance; }
@media (min-width: 900px) {
  .passi { padding: 38px 0 22px; border-radius: 50% 50% 0 0 / 56px 56px 0 0; }
  .passi__filo { display: block; position: absolute; inset: 2px 4% auto; width: 92%; height: 64px; }
  .passi__lista { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .passo__testo { max-width: 248px; margin-left: -12px; background: var(--carta); padding: 2px 8px 2px 12px; }   /* il filo passa dietro: si vede solo fra un passo e l'altro */
  .passo:last-child .passo__testo { max-width: 302px; }
}

/* ── l'accoglienza lascia il segno ──────────────────────── */
.segno { background: var(--carta); padding: 6px 0 44px; }
.segno__griglia { display: grid; grid-template-columns: minmax(0, 1fr); }
.segno h2 { margin-bottom: 14px; }
.segno__numeri { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; border-top: 1px solid var(--linea-calda); padding-top: 18px; }
.numero { min-width: 0; }
.numero__cifra { font-family: var(--serif); font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.45rem); line-height: 1.05; color: var(--titoli); font-variation-settings: "opsz" 72; font-variant-numeric: lining-nums; white-space: nowrap; }
.numero__cifra .numero__su { font-size: .62em; }
@media (max-width: 379px) { .numero__cifra { font-size: 1.4rem; } }
/* le stelle delle due medie: cinque, disegnate dal CSS, non sono testo */
.numero__cifra--stelle { display: flex; align-items: center; gap: 10px; }
.numero__cifra--stelle::after {
  content: ""; width: 78px; height: 14px; flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.6 14'%3E%3Cpath fill='%23C7B39A' d='M7 .6l1.9 4.1 4.5.5-3.3 3.1.9 4.4L7 10.6l-4 2.1.9-4.4L.6 5.2l4.5-.5z'/%3E%3C/svg%3E") left center / 15.6px 14px repeat-x;
}
.conta { display: inline-block; text-align: left; font-variant-numeric: lining-nums; }
.numero__cosa { margin-top: 5px; font-size: .84rem; line-height: 1.4; color: var(--testo); text-wrap: pretty; }
.citazioni {
  display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px;
  margin: 20px calc(-1 * max(20px, env(safe-area-inset-right, 0px))) 0 calc(-1 * max(20px, env(safe-area-inset-left, 0px)));
  padding: 0 max(20px, env(safe-area-inset-right, 0px)) 6px max(20px, env(safe-area-inset-left, 0px));
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scroll-padding: 0 max(20px, env(safe-area-inset-left, 0px)); scrollbar-width: none;
}
.citazioni::-webkit-scrollbar { display: none; }
.citazione { margin: 0; scroll-snap-align: start; }
.citazione blockquote { margin: 0; font-family: var(--serif); font-size: 1rem; line-height: 1.35; color: var(--titoli); text-wrap: pretty; }
.citazione figcaption { margin-top: 4px; font-size: .74rem; line-height: 1.4; color: var(--testo-tenue); }
.thk-nota-recensioni { margin-top: 10px; font-size: .74rem; line-height: 1.4; color: var(--testo-tenue); text-wrap: pretty; }
.segno__link { justify-self: start; color: var(--notte); font-size: .9rem; font-weight: 500; text-underline-offset: 3px; text-decoration-color: var(--grigio); padding: 8px 0; }
@media (min-width: 760px) {
  .segno { padding: 12px 0 26px; }
  .segno__griglia { grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; column-gap: 26px; }
  .segno h2 { grid-area: 1 / 1; margin-bottom: 10px; }
  .thk-nota-recensioni { grid-area: 1 / 2; margin: 0; text-align: right; }
  .segno__link { grid-area: 1 / 3; padding: 0; }
  .segno__numeri, .citazioni { grid-column: 1 / -1; }
  .segno__numeri { grid-template-columns: 1fr 1fr 1fr 1.2fr; gap: 0; padding-top: 14px; }
  .numero__cifra { font-size: 2.15rem; }
  .numero__cosa { margin-top: 3px; }
  .numero { padding: 0 24px; border-left: 1px solid var(--linea-calda); }
  .numero:first-child { padding-left: 0; border-left: 0; }
  .citazioni { grid-auto-flow: row; grid-template-columns: 1fr 1fr; gap: 28px; margin: 14px 0 0; padding: 0; overflow: visible; }
  .citazione blockquote { font-size: .94rem; line-height: 1.3; }
  .citazione figcaption { margin-top: 3px; }
}

/* ── due indirizzi · come arrivare · prima di partire ───── */
.dove { background: var(--bianco); padding: 52px 0 48px; border-top: 1px solid var(--linea); }
.dove__griglia { display: grid; gap: 28px; }
.dove__mappa-col h2 { margin-bottom: 18px; }
.mappa {
  position: relative; margin: 0;
  height: 210px;
  border-radius: 14px; overflow: hidden;
  background:
    repeating-linear-gradient(28deg, transparent 0 46px, rgb(188 194 197 / .26) 46px 47px),
    repeating-linear-gradient(-62deg, transparent 0 58px, rgb(188 194 197 / .22) 58px 59px),
    var(--nebbia);
  border: 1px solid var(--linea);
}
.mappa__mare {
  position: absolute; right: -8%; bottom: -36%; width: 62%; height: 78%;
  background: var(--grigio); opacity: .55; border-radius: 48% 52% 0 0 / 60% 52% 0 0;
  transform: rotate(-8deg);
}
.mappa__vesuvio { position: absolute; right: 4%; top: 12%; width: 30%; opacity: .55; }
.mappa__citta { position: absolute; left: 30%; bottom: 13%; font-family: var(--serif); font-size: 1.5rem; color: var(--testo-tenue); }
.mappa__nord { position: absolute; right: 12px; bottom: 10px; font-size: .74rem; font-weight: 600; color: var(--testo-tenue); width: 22px; height: 22px; border: 1px solid var(--grigio); border-radius: 50%; display: grid; place-items: center; background: rgb(254 254 254 / .7); }
.mappa__pin { position: absolute; display: inline-flex; align-items: flex-start; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--titoli); line-height: 1.2; }
.mappa__pin img { width: 15px; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .2)); }
.mappa__pin small { display: block; font-size: .74rem; font-weight: 500; color: var(--testo); }
.mappa__pin span { background: rgb(254 254 254 / .82); padding: 2px 6px; border-radius: 6px; }
.mappa__pin--capodimonte { left: 22%; top: 14%; }
.mappa__pin--foria { left: 46%; top: 50%; }
.mappa figcaption { position: absolute; left: 10px; bottom: 8px; font-size: .72rem; color: var(--testo-tenue); }
.indirizzo h3 { display: flex; align-items: flex-start; gap: 10px; font-family: var(--sans); font-size: 1rem; font-weight: 600; letter-spacing: 0; line-height: 1.35; margin-bottom: 8px; }
.indirizzo h3 img { width: 15px; flex: 0 0 15px; margin-top: 1px; }
.indirizzo p { font-size: .93rem; line-height: 1.55; color: var(--testo); padding-left: 25px; text-wrap: pretty; }
.indirizzo__link { display: inline-block; margin: 6px 0 0 25px; padding: 8px 0; font-size: .92rem; font-weight: 500; color: var(--notte); text-underline-offset: 3px; text-decoration-color: var(--grigio); }
.indirizzo__link:active { color: var(--bronzo); }
.riga-laterale { display: grid; gap: 16px; margin-top: 38px; }
.domande__link { justify-self: start; color: var(--notte); font-size: .92rem; font-weight: 500; text-underline-offset: 3px; text-decoration-color: var(--grigio); padding: 8px 0; }
.dove .titolo-laterale { font-size: clamp(1.6rem, 1.2rem + .9vw, 1.9rem); }   /* 30 px */
.arrivare__riquadri { display: grid; gap: 12px; }
.arrivo {
  display: flex; align-items: center; gap: 16px;
  text-decoration: none; color: var(--titoli);
  border: 1px solid var(--linea); border-radius: 12px; padding: 10px;
  background: var(--bianco);
  transition: box-shadow .25s ease, border-color .25s ease;
  user-select: none; -webkit-user-select: none;
}
.arrivo__ico { width: 108px; aspect-ratio: 16 / 9; flex: 0 0 auto; border-radius: 8px; background: var(--nebbia); display: grid; place-items: center; }
.arrivo__ico img { width: 30px; }
.arrivo__testo { display: flex; flex-direction: column; gap: 2px; }
.arrivo__testo strong { font-weight: 600; font-size: .98rem; }
.arrivo__testo span { font-size: .88rem; color: var(--testo); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--grigio); }
.arrivo:active { border-color: var(--linea-calda); background: var(--carta); }
.domande__lista { border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; }
.domanda + .domanda { border-top: 1px solid var(--linea); }
.domanda summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 48px; padding: 10px 18px;
  font-weight: 600; color: var(--titoli); font-size: .97rem;
  user-select: none; -webkit-user-select: none;
}
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary img { width: 13px; flex: 0 0 13px; transition: transform 250ms var(--ease-out); }
.domanda[open] p { animation: domanda-apre 260ms var(--ease-out); }
@keyframes domanda-apre { from { opacity: 0; transform: translateY(-6px); } }
.domanda[open] summary img { transform: rotate(45deg); }
.domanda summary:active { background: var(--carta); }
.domanda p { padding: 0 18px 12px; font-size: .93rem; color: var(--testo); }
@media (hover: hover) and (pointer: fine) {
  .arrivo:hover { border-color: var(--linea-calda); box-shadow: var(--ombra-lieve); }
  .domanda summary:hover { background: var(--carta); }
}
@media (min-width: 900px) {
  .dove { padding: 34px 0 32px; }
  .dove__griglia { grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; align-items: start; }
  .dove__mappa-col h2 { white-space: nowrap; margin-bottom: 16px; }
  .indirizzo { padding-top: 54px; }
  .indirizzo p { font-size: .9rem; line-height: 1.5; }
  .mappa { height: auto; aspect-ratio: 2.85 / 1; }
  .indirizzo--capodimonte { border-left: 1px solid var(--linea); padding-left: 36px; }
  .riga-laterale { grid-template-columns: 300px 1fr; align-items: start; gap: 40px; margin-top: 20px; }
  .titolo-laterale { padding-top: 0; }
  .domande { grid-template-rows: auto 1fr; row-gap: 0; }
  .domande__lista { grid-column: 2; grid-row: 1 / span 2; }
  .domande__link { grid-column: 1; grid-row: 2; align-self: start; }
  .domanda summary { min-height: 38px; padding: 7px 18px; font-size: .94rem; }
  .domanda p { padding: 0 18px 9px; font-size: .9rem; line-height: 1.5; }
  .arrivo { padding: 8px; }
  .arrivo__ico { width: 88px; }
  .arrivare__riquadri { grid-template-columns: 1fr 1fr; gap: 22px; }
}

/* ── ci vediamo a Napoli ────────────────────────────────── */
.saluto {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--notte);
  color: var(--bianco);
  padding: 64px 0 56px;
}
.saluto__fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; z-index: -2; }
.saluto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(12 19 38 / .62) 0%, rgb(12 19 38 / .2) 60%, rgb(12 19 38 / .32) 100%); }
.saluto__in { display: grid; gap: 30px; align-items: center; }
.saluto h2 { color: var(--bianco); font-size: clamp(2rem, 1.3rem + 1.8vw, 2.5rem); margin-bottom: 8px; }   /* 40 px */
.saluto__frase { font-size: 1rem; line-height: 1.5; color: rgb(254 254 254 / .92); text-wrap: pretty; }
.saluto__dati { margin-top: 4px; font-size: .92rem; line-height: 1.5; color: rgb(254 254 254 / .86); }
.saluto__dati a { color: var(--bianco); text-underline-offset: 3px; text-decoration-color: rgb(254 254 254 / .5); }
.saluto__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 12px; }
.saluto__link { color: var(--bianco); font-size: .92rem; text-underline-offset: 3px; text-decoration-color: rgb(254 254 254 / .5); padding: 10px 0; }
.ospiti {
  display: flex; align-items: flex-start; gap: 16px;
  border: 1px solid rgb(254 254 254 / .7);
  border-radius: 14px; padding: 16px 18px;
  background: rgb(12 19 38 / .45);
  max-width: 420px;
}
.ospiti__ico { width: 22px; filter: brightness(0) invert(1); margin-top: 2px; }
.ospiti__titolo { font-weight: 600; font-size: 1.08rem; }
.ospiti__testo { font-size: .86rem; line-height: 1.45; color: rgb(254 254 254 / .86); margin-top: 2px; text-wrap: pretty; }
.ospiti__case { display: flex; flex-direction: column; align-items: flex-start; margin-top: 6px; }
.ospiti__case a { color: var(--bianco); font-size: .88rem; text-underline-offset: 3px; text-decoration-color: rgb(254 254 254 / .5); padding: 6px 0; }
@media (min-width: 900px) {
  .saluto { padding: 34px 0 30px; }
  .saluto__in { grid-template-columns: 1fr auto; }
  .ospiti { min-width: 400px; }
  .ospiti__case { flex-direction: row; gap: 18px; }
  .ospiti__case a { padding: 3px 0; white-space: nowrap; }
}

/* ── piè di pagina ──────────────────────────────────────── */
.piede { background: var(--bianco); padding: 30px 0 calc(96px + env(safe-area-inset-bottom, 0px)); font-size: .86rem; color: var(--testo); }
.piede__in { display: grid; gap: 14px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--linea); }
.piede__logo { display: inline-block; }
.piede__logo img { width: 190px; }
.piede__marchio p { margin-top: 4px; font-size: .84rem; color: var(--testo); }
.piede__link { display: flex; flex-wrap: wrap; gap: 0 26px; }
.piede__link a { text-decoration: none; padding: 8px 0; }
.piede__contatti { display: flex; flex-wrap: wrap; gap: 0 22px; font-size: .84rem; color: var(--testo); }
.piede__contatti a { color: var(--notte); text-underline-offset: 3px; text-decoration-color: var(--grigio); display: inline-block; padding: 4px 0; }
.piede__cin p { font-size: .8rem; color: var(--testo-tenue); }
.senza-a-capo { white-space: nowrap; }
.piede__legale { display: grid; gap: 8px; padding-top: 16px; font-size: .78rem; color: var(--testo-tenue); }
.piede__legale a { color: var(--testo); text-underline-offset: 3px; text-decoration-color: var(--grigio); }
.credit a { font-weight: 500; }
@media (hover: hover) and (pointer: fine) {
  .piede__link a:hover { color: var(--titoli); text-decoration: underline; text-underline-offset: 3px; }
}
@media (min-width: 900px) {
  .piede { padding-top: 14px; padding-bottom: 14px; }
  .piede__in { padding-bottom: 8px; }
  .piede__logo img { width: 150px; }
  .piede__marchio p { margin-top: 2px; font-size: .8rem; }
  .piede__legale { padding-top: 8px; }
  .piede__link a { padding: 2px 0; }
  .piede__contatti { font-size: .8rem; justify-content: center; }
  .piede__contatti a { padding: 1px 0; }
  .piede__in { grid-template-columns: auto 1fr auto; gap: 32px; }
  .piede__link { justify-content: center; }
  .piede__cin { text-align: right; }
  .piede__legale { grid-template-columns: 1fr auto; align-items: baseline; }
}

/* ── barra fissa da telefono ────────────────────────────── */
.barra-tel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  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: rgb(254 254 254 / .97);
  border-top: 1px solid var(--linea);
  box-shadow: 0 -10px 30px -20px rgb(27 41 60 / .4);
  transform: translateY(110%);
  transition: transform 200ms var(--ease-out);
}
.barra-tel--vista { transform: translateY(0); transition-duration: 340ms; }
@media (min-width: 900px) { .barra-tel { display: none; } }

/* ── pagine legali e 404 ────────────────────────────────── */
.pagina { padding: 48px 0 72px; background: var(--bianco); }
.legale { max-width: 780px; margin: 0 auto; }
.legale h1 { font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.2rem); margin-bottom: 10px; }
.legale h2 { font-size: 1.55rem; margin: 34px 0 10px; }
.legale p, .legale li { font-size: 1rem; line-height: 1.7; color: var(--testo); }
.legale p + p { margin-top: 10px; }
.legale ul, .legale ol { padding-left: 22px; margin: 10px 0; }
.legale ul { list-style: disc; }
.legale ol { list-style: decimal; }
.legale li + li { margin-top: 6px; }
.legale a { color: var(--notte); text-underline-offset: 3px; }
.legale table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: .9rem; display: block; overflow-x: auto; }
.legale th, .legale td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--linea); }
.legale th { color: var(--titoli); font-weight: 600; background: var(--carta); }
.legale > p:first-of-type { color: var(--testo-tenue); font-size: .9rem; }
.errore-404 { text-align: center; padding: 90px 0 110px; }
.errore-404 img { width: 180px; margin: 0 auto 26px; opacity: .7; }
.errore-404 h1 { font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem); margin-bottom: 12px; }
.errore-404 p { margin-bottom: 26px; }
.errore-404 .azioni { display: flex; flex-wrap: wrap; gap: 14px 24px; justify-content: center; align-items: center; }
.errore-404 .azioni a:not(.btn) { color: var(--notte); text-underline-offset: 3px; padding: 10px 0; }

/* ── il sito vivo (step 5-bis) ──────────────────────────── */
/* le sezioni compaiono scorrendo: nascoste solo se c'è il JavaScript (html.js), con <noscript> e un'uscita di sicurezza in main.js */
.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity 800ms var(--ease-out), transform 900ms var(--ease-out); }
.js .reveal.visto { opacity: 1; transform: none; }

/* l'intestazione scorrendo: il logo si fa un po' più piccolo, senza spostare niente */
.testata__logo img { transform-origin: left center; transition: transform 250ms var(--ease-out); }
.testata--scorsa .testata__logo img { transform: scale(.9); }

/* il panorama di Napoli: la foto si muove più piano della pagina (profondità leggera) */
.napoli__panorama > img { position: relative; height: 118%; top: -9%; will-change: transform; }

/* le foto di Napoli: l'ingrandimento resta dentro il riquadro */
.napoli__foto-img { overflow: hidden; border-radius: 12px; }
.napoli__foto-img img { border-radius: 0; transition: transform 700ms var(--ease-out); }

/* il tocco: quello che si preme risponde subito */
.arrivo { transition: box-shadow .25s ease, border-color .25s ease, transform 160ms var(--ease-out); }
.arrivo:active, .hero__camera-link:active, .napoli__carta a:active, .ospiti__case a:active, .saluto__link:active { transform: scale(.97); }
.hero__camera-link, .napoli__carta a, .ospiti__case a, .saluto__link { display: inline-block; transition: transform 160ms var(--ease-out), color .2s ease; }
.napoli__carta a, .hero__camera-link { display: inline-flex; }
.vantaggio__ill { transition: transform 400ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .hero__camera-link:hover img, .napoli__carta a:hover img { transform: translateX(4px); }
  .arrivo:hover .arrivo__ico img { transform: rotate(-12deg); }
}
.arrivo__ico img { transition: transform 300ms var(--ease-out); }

/* da telefono le camere stanno su una riga che scorre col dito (si vede il bordo della successiva) */
@media (max-width: 759px) {
  .camere__griglia {
    grid-auto-flow: column; grid-auto-columns: 84%; gap: 14px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * max(20px, env(safe-area-inset-right, 0px))) 0 calc(-1 * max(20px, env(safe-area-inset-left, 0px)));
    padding: 4px max(20px, env(safe-area-inset-right, 0px)) 18px max(20px, env(safe-area-inset-left, 0px));
    scroll-padding: 0 max(20px, env(safe-area-inset-left, 0px));
    scrollbar-width: none;
  }
  .camere__griglia::-webkit-scrollbar { display: none; }
  .camera { scroll-snap-align: start; }
  .camera__foto { aspect-ratio: 1.9 / 1; }
  .camera__nome { flex-direction: column; gap: 2px; }
  .camera__riga { flex-direction: column; align-items: flex-start; }
  .camera__dotazione { flex: 1 0 auto; align-items: flex-start; border-right: 0; margin-right: 0; padding-right: 0; }
  .camera__dotazione > img { margin-top: 2px; }
}

/* ── pagine interne (step 6-bis): gli stessi pezzi della home ─────────── */
/* arancione via Foria, verde Capodimonte: il testo arancione è un po' più scuro, per leggersi bene sul bianco */
.casa--foria { --casa: var(--arancio); --casa-testo: #B8520B; }
.casa--capodimonte { --casa: var(--verde); --casa-testo: var(--verde); }
.casa-foria { color: #B8520B; font-weight: 600; }
.casa-capodimonte { color: var(--verde); font-weight: 600; }
/* sulle foto i due colori si schiariscono, per leggersi */
.hero .casa-foria, .saluto .casa-foria { color: #FFC48F; }
.hero .casa-capodimonte, .saluto .casa-capodimonte { color: #A9E6BC; }

.hero--pagina { min-height: 430px; }
.hero--pagina h1 { font-size: clamp(2.1rem, 1.65rem + 1.9vw, 3.1rem); }
.hero--pagina .hero__in { padding-top: 34px; padding-bottom: 92px; justify-content: center; }
.hero--calendario .hero__in { padding-bottom: 118px; }
.percorso { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 10px; font-size: .8rem; color: rgb(255 255 255 / .92); }
.percorso a { color: inherit; text-underline-offset: 3px; text-decoration-color: rgb(255 255 255 / .55); }
@media (min-width: 760px) {
  .hero--pagina { min-height: clamp(400px, 50svh, 470px); }
  .hero--pagina .hero__in { padding: 26px 40px 92px; justify-content: flex-start; }
  .hero--calendario { min-height: clamp(480px, 58svh, 540px); }
  .hero--calendario .hero__in { padding-bottom: 124px; }
  .hero--accesso .hero__in { padding: 0; }
}

.casa--foria .prenota__carta, .casa--capodimonte .prenota__carta { border-top: 3px solid var(--casa); }
.prenota--dopo { margin-top: 0; padding-top: 34px; }
@media (min-width: 760px) {
  .prenota--dopo { margin-top: 0; padding-top: 40px; }
  .modulo__campi--tre { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) { .modulo__campi--tre { grid-template-columns: repeat(3, 1fr); } }
.modulo__campi--tre .campo--ospiti { grid-column: auto; }
@media (max-width: 759px) { .modulo__campi--tre .campo--ospiti { grid-column: 1 / -1; } }

/* la galleria di una camera: griglia da computer, riga che scorre col dito da telefono */
.galleria { position: relative; z-index: 2; margin-top: -52px; }
.galleria__griglia {
  display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: 12px;
  margin: 0 calc(-1 * max(20px, env(safe-area-inset-right, 0px))) 0 calc(-1 * max(20px, env(safe-area-inset-left, 0px)));
  padding: 0 max(20px, env(safe-area-inset-right, 0px)) 6px max(20px, env(safe-area-inset-left, 0px));
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scroll-padding: 0 max(20px, env(safe-area-inset-left, 0px)); scrollbar-width: none;
}
.galleria__griglia::-webkit-scrollbar { display: none; }
.galleria__griglia figure { margin: 0; scroll-snap-align: start; }
.galleria .napoli__foto-img { box-shadow: var(--ombra-lieve); }
.galleria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 760px) {
  .galleria__griglia { grid-auto-flow: row; grid-template-columns: repeat(var(--colonne, 3), 1fr); gap: 16px; margin: 0; padding: 0; overflow: visible; }
  .galleria__griglia--mosaico figure:first-child { grid-row: span 2; }
  .galleria__griglia--mosaico figure:first-child .napoli__foto-img, .galleria__griglia--mosaico figure:first-child img { height: 100%; }
  .galleria__griglia--mosaico figure:first-child img { aspect-ratio: auto; }
}
@media (hover: hover) and (pointer: fine) {
  .galleria figure:hover img, .sezione__foto:hover img { transform: scale(1.045); }
}

.sezione { position: relative; background: var(--bianco); padding: 44px 0; }
.sezione--carta { background: var(--carta); border-radius: 50% 50% 0 0 / 36px 36px 0 0; padding: 56px 0 48px; }
.sezione h2 { font-size: clamp(1.75rem, 1.2rem + 1.2vw, 2.15rem); margin-bottom: 12px; text-wrap: balance; }
.sezione__griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: center; }
.sezione__testo { min-width: 0; }
.sezione__testo > p { font-size: 1rem; line-height: 1.55; color: var(--testo); text-wrap: pretty; }
.sezione__testo > p + p { margin-top: 6px; }
.sezione__testo > .voci + p, .sezione__testo > .elenco + p, .sezione__testo > .passaggi + p { margin-top: 12px; }
.sezione__foto { margin: 0; }
.sezione__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 700ms var(--ease-out); }
.sezione__foto--alta img { aspect-ratio: 1 / 1; }
.sezione__testo a:not(.btn) { color: var(--notte); text-underline-offset: 3px; text-decoration-color: var(--grigio); }
.sezione__testo a:not(.btn):active { color: var(--bronzo); }
.sezione__link { display: inline-block; margin-top: 10px; padding: 8px 0; font-size: .95rem; font-weight: 500; }
.sezione__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 14px; }
.sezione__azioni .sezione__link { margin-top: 0; }
.sezione .mappa { height: 240px; width: 100%; aspect-ratio: auto; }
@media (min-width: 900px) {
  .sezione { padding: 40px 0; }
  .sezione--carta { border-radius: 50% 50% 0 0 / 56px 56px 0 0; padding: 60px 0 44px; }
  .sezione__griglia--foto { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; }
  .sezione--inverti .sezione__foto, .sezione--inverti .mappa { order: -1; }
  .sezione .mappa { height: 300px; aspect-ratio: auto; }
}

/* le voci con l'icona: il pezzo dei temi di Napoli */
.voci { display: grid; gap: 12px 28px; margin-top: 16px; }
.voci .tema { align-items: center; gap: 12px; }
.voci .tema img { width: 42px; flex: 0 0 42px; margin: 0; }
.voci .tema p { font-size: .96rem; line-height: 1.45; color: var(--titoli); }
.voci .tema strong { font-weight: 600; }
@media (min-width: 760px) {
  .voci--due { grid-template-columns: 1fr 1fr; }
  .voci--tre { grid-template-columns: repeat(3, 1fr); }
}
.elenco { display: grid; gap: 8px; margin-top: 14px; }
.elenco li { position: relative; padding-left: 18px; font-size: .96rem; line-height: 1.5; color: var(--titoli); text-wrap: pretty; }
.elenco li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--casa, var(--bronzo)); }
.elenco--due { grid-template-columns: 1fr; }
@media (min-width: 760px) { .elenco--due { grid-template-columns: 1fr 1fr; gap: 8px 32px; } }
.passaggi { display: grid; gap: 10px; margin-top: 14px; counter-reset: passo; }
.passaggi li { position: relative; padding-left: 44px; min-height: 34px; display: flex; align-items: center; font-size: .96rem; line-height: 1.45; color: var(--titoli); counter-increment: passo; }
.passaggi li::before { content: counter(passo); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 1.1rem; background: var(--bianco); border: 1px solid var(--linea); box-shadow: var(--ombra-lieve); }

/* i numeri e le citazioni delle recensioni, fuori dalla home */
.segno__numeri--una { display: block; border-top: 0; padding-top: 0; margin: 2px 0 8px; }
.segno__numeri--una .numero { padding: 0; border-left: 0; }
.sezione .citazioni { margin-top: 16px; }
.sezione .citazione figcaption a { color: inherit; }
.citazioni--una { display: block; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; overflow: visible; }
.citazione--evidenza { margin-top: 16px; padding-left: 14px; border-left: 3px solid var(--casa, var(--linea-calda)); }
@media (min-width: 760px) {
  .citazioni--tre { grid-template-columns: repeat(3, 1fr); }
  .sezione .citazioni { gap: 24px 28px; }
}
.casa-tinta--foria .citazione { border-left: 3px solid var(--arancio); padding-left: 12px; }
.casa-tinta--capodimonte .citazione { border-left: 3px solid var(--verde); padding-left: 12px; }
.sezione .thk-nota-recensioni { margin-top: 14px; text-align: left; }

/* i voti delle camere: la cornice delle domande frequenti */
.voti { margin-top: 16px; border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; background: var(--bianco); }
.voto { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; align-items: center; padding: 11px 16px; font-size: .94rem; color: var(--testo); }
.voto + .voto { border-top: 1px solid var(--linea); }
.voto__nome { font-weight: 600; text-underline-offset: 3px; text-decoration-color: var(--grigio); }
.sezione__testo .voto--foria .voto__nome { color: #B8520B; }
.sezione__testo .voto--capodimonte .voto__nome { color: var(--verde); }
.voto__media { font-family: var(--serif); font-size: 1.2rem; color: var(--titoli); font-variant-numeric: lining-nums; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.voto__recensioni { grid-column: 1 / -1; font-size: .84rem; color: var(--testo-tenue); }
.voto__stelle { width: 78px; height: 14px; flex: 0 0 auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.6 14'%3E%3Cpath fill='%23C7B39A' d='M7 .6l1.9 4.1 4.5.5-3.3 3.1.9 4.4L7 10.6l-4 2.1.9-4.4L.6 5.2l4.5-.5z'/%3E%3C/svg%3E") left center / 15.6px 14px repeat-x; }
@media (min-width: 760px) {
  .voto { grid-template-columns: minmax(0, 1fr) 190px 140px; }
  .voto__recensioni { grid-column: auto; text-align: right; }
}

.domande-gruppo { padding: 0; }
.domande-gruppo .riga-laterale { margin-top: 30px; }
.domande-gruppo .sezione__testo { min-width: 0; }

/* la mappa illustrata: i punti in più */
.mappa__punto { position: absolute; display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 500; color: var(--inchiostro); line-height: 1.2; }
.mappa__punto::before { content: ""; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--bronzo); box-shadow: 0 0 0 2px rgb(254 254 254 / .8); }
.mappa__punto span { background: rgb(254 254 254 / .82); padding: 1px 5px; border-radius: 5px; }
.mappa--capodimonte .mappa__pin--capodimonte { left: 40%; top: 15%; }

/* la chiusura con la foto di notte, quando la pagina finisce con una richiesta */
.saluto--chiusura .saluto__in { grid-template-columns: minmax(0, 1fr); }
.saluto--chiusura .saluto__testo { max-width: 640px; }
.saluto--chiusura .saluto__frase + .saluto__frase { margin-top: 4px; }
.saluto__frase a { color: var(--bianco); text-underline-offset: 3px; text-decoration-color: rgb(254 254 254 / .5); }

/* l'area ospiti */
.accesso { max-width: 520px; margin: 0 auto; }
.accesso h1 { font-size: clamp(1.9rem, 1.4rem + 1.2vw, 2.4rem); margin-bottom: 8px; }
.accesso p { font-size: .96rem; line-height: 1.5; color: var(--testo); text-wrap: pretty; }
.accesso form { margin-top: 16px; display: grid; gap: 12px; }
.accesso .campo input { padding-right: 14px; }
.accesso__aiuto { margin-top: 12px; font-size: .88rem !important; }
.accesso__aiuto a { color: var(--notte); text-underline-offset: 3px; text-decoration-color: var(--grigio); }
.accesso .modulo__esito[hidden] { display: none; }
.prenota--accesso { margin-top: -60px; padding-bottom: 56px; }
.hero--accesso { min-height: 260px; }
.hero--accesso .hero__in { padding: 0; }
.guida__orari { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 14px; font-size: .96rem; font-weight: 600; color: rgb(255 255 255 / .96); text-shadow: 0 1px 14px rgb(12 19 38 / .5); }
.guida__assistenza a { color: inherit; text-underline-offset: 3px; text-decoration-color: rgb(255 255 255 / .55); }
.riquadri-zona { position: relative; z-index: 2; margin-top: -52px; }
.riquadri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.riquadro {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px;
  min-height: 96px; padding: 14px 6px 12px; text-align: center; text-decoration: none; color: var(--titoli);
  font-size: .84rem; font-weight: 500; line-height: 1.25;
  background: var(--bianco); border: 1px solid var(--linea); border-radius: 12px; box-shadow: var(--ombra-lieve);
  user-select: none; -webkit-user-select: none;
  transition: box-shadow .25s ease, border-color .25s ease, transform 160ms var(--ease-out);
}
.riquadro img { width: 34px; height: 34px; object-fit: contain; }
.riquadro:active { transform: scale(.97); border-color: var(--linea-calda); background: var(--carta); }
@media (hover: hover) and (pointer: fine) { .riquadro:hover { border-color: var(--linea-calda); box-shadow: var(--ombra); } }
@media (min-width: 760px) { .riquadri { grid-template-columns: repeat(5, 1fr); gap: 14px; } }
.titolo-icona { display: flex; align-items: center; gap: 12px; }
.titolo-icona img { width: 34px; height: 34px; flex: 0 0 34px; object-fit: contain; }
.filtri { display: flex; gap: 8px; margin: 14px calc(-1 * max(20px, env(safe-area-inset-right, 0px))) 0 calc(-1 * max(20px, env(safe-area-inset-left, 0px))); padding: 2px max(20px, env(safe-area-inset-right, 0px)) 4px max(20px, env(safe-area-inset-left, 0px)); overflow-x: auto; scrollbar-width: none; }
.filtri::-webkit-scrollbar { display: none; }
.filtro { flex: 0 0 auto; min-height: 42px; padding: 8px 16px; border: 1px solid var(--linea-calda); border-radius: 999px; background: var(--bianco); color: var(--titoli); font-size: .88rem; font-weight: 500; cursor: pointer; user-select: none; -webkit-user-select: none; transition: background-color .2s ease, color .2s ease, transform 160ms var(--ease-out); }
.filtro:active { transform: scale(.97); }
.filtro[aria-pressed="true"] { background: var(--notte); border-color: var(--notte); color: var(--bianco); }
@media (min-width: 760px) { .filtri { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; flex-wrap: wrap; overflow: visible; } }
.posti { margin-top: 12px; border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; background: var(--bianco); }
.posti li + li { border-top: 1px solid var(--linea); }
.posti li[hidden] { display: none; }
.posto { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; text-decoration: none; color: var(--titoli); font-size: .94rem; }
.posto img { width: 30px; height: 30px; flex: 0 0 30px; object-fit: contain; }
.posto strong { display: block; font-weight: 600; line-height: 1.3; }
.posto small { display: block; font-size: .82rem; color: var(--testo-tenue); line-height: 1.3; }
.posto:active { background: var(--carta); }
@media (hover: hover) and (pointer: fine) { .posto:hover { background: var(--carta); } }
.guida__salva { margin-top: 14px; }
@media (hover: hover) and (pointer: fine) { .solo-telefono { display: none; } }

/* meno movimento: restano le dissolvenze, si tolgono gli spostamenti */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { transform: none; transition: opacity 500ms ease; }
  .hero__foto { animation: none; }
  .hero__testo > *, .hero__camera { animation-name: dissolvenza; }
  @keyframes dissolvenza { from { opacity: 0; } }
  .hero__giu img { animation: none; }
  .hero__sfondo, .napoli__panorama > img { transform: none !important; }
  .menu-telefono, .menu-telefono--aperto, .menu-telefono nav > *, .menu-telefono > .btn, .tendina, .voce [aria-expanded="true"] ~ .tendina { transform: none; }
  .voce-tel [aria-expanded="true"] ~ .voce-tel__sotto { animation-name: dissolvenza; }
  .domanda[open] p { animation-name: dissolvenza; }
  .btn, .barra-tel, .testata__apri span, .domanda summary img, .camera__foto, .napoli__foto-img img, .vantaggio__ill, .testata__logo img, .voce__apri img, .voce__freccia, .voce-tel__apri img { transition-duration: .01s; }
  .btn:active, .arrivo:active, .riquadro:active, .filtro:active { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SALTO DI LIVELLO (step 6-quater, 01/11/2026) · la critica: Design/SALTO-DI-LIVELLO.md
   Stessa struttura, stesso copy, stesso kit, stessi colori e caratteri: cambia la qualità grafica.
   Tutto qui sotto sovrascrive le regole di sopra; ogni spostamento è solo CSS (l'HTML resta in ordine).
   ══════════════════════════════════════════════════════════════════════════════ */
:root {
  --passo: clamp(76px, 3.4rem + 4.2vw, 132px);       /* l'aria fra le sezioni: 132 px da computer, 76 da telefono */
  --passo-denso: clamp(60px, 2.6rem + 3.4vw, 104px);
  --raggio-foto: 16px;
  --ombra-carta: 0 44px 90px -46px rgb(27 41 60 / .38), 0 2px 10px rgb(27 41 60 / .05);
}

/* ── 1 · tipografia da rivista ─────────────────────────────────────────────── */
h1, h2, h3 { font-weight: 420; letter-spacing: -.018em; }
h2 { font-size: clamp(2.05rem, 1.35rem + 2.3vw, 3.5rem); line-height: 1.04; }
.sezione h2, .passi h2, .segno h2, .dove h2 { font-size: clamp(1.95rem, 1.3rem + 1.9vw, 3.1rem); line-height: 1.05; }
.dove .titolo-laterale { font-size: clamp(1.75rem, 1.25rem + 1.2vw, 2.45rem); }
.sezione h2 { margin-bottom: 18px; }
.sezione__testo > p { font-size: 1.04rem; line-height: 1.68; }
.sezione__griglia:not(.sezione__griglia--foto) .sezione__testo > p { max-width: 70ch; }
.sezione__testo > p + p { margin-top: 8px; }
@media (min-width: 900px) { .sezione__testo > p { font-size: 1.0625rem; } }

/* ── 2 · la hero: alta, immersiva, leggibile; l'intestazione le passa sopra ─── */
.hero__velo {
  background:
    linear-gradient(180deg, rgb(12 19 38 / .52) 0, rgb(12 19 38 / .16) 150px, rgb(12 19 38 / 0) 260px),
    radial-gradient(130% 100% at 0% 100%, rgb(12 19 38 / .84) 0%, rgb(12 19 38 / .62) 34%, rgb(12 19 38 / .2) 62%, rgb(12 19 38 / 0) 78%),
    linear-gradient(0deg, rgb(12 19 38 / .16), rgb(12 19 38 / .16));
}
.hero h1 {
  font-size: clamp(2.3rem, 1.3rem + 3.4vw, 4.5rem);
  font-weight: 400; line-height: 1.01; letter-spacing: -.026em;
  text-shadow: 0 2px 30px rgb(12 19 38 / .32);
}
.hero__testo { max-width: 880px; }
.hero__sotto { font-size: 1.04rem; line-height: 1.55; max-width: 62ch; color: rgb(255 255 255 / .93); }
.hero__testo .btn { margin-top: 28px; }
.hero .occhiello--chiaro { letter-spacing: .24em; margin-bottom: 18px; }
.hero--pagina h1 { font-size: clamp(2.2rem, 1.25rem + 3vw, 4.15rem); }
.percorso { margin-bottom: 16px; }

/* le parole colorate delle due case, sopra le foto: bianche, sottolineate col colore della casa */
.hero .casa-foria, .saluto .casa-foria, .hero .casa-capodimonte, .saluto .casa-capodimonte {
  color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.hero .casa-foria, .saluto .casa-foria { text-decoration-color: var(--arancio); }
.hero .casa-capodimonte, .saluto .casa-capodimonte { text-decoration-color: #7FCF98; }

/* telefono: la hero riempie lo schermo, il testo sta in basso, il calendario si affaccia sotto */
.hero { min-height: max(600px, calc(100svh - 40px)); }
.hero__in { justify-content: flex-end; padding-top: calc(var(--testata) + 32px); padding-bottom: 128px; }
.hero--pagina { min-height: max(540px, 80svh); }
.hero--pagina .hero__in { justify-content: flex-end; padding-top: calc(var(--testata) + 28px); padding-bottom: 104px; }
.hero--calendario .hero__in { padding-bottom: 122px; }
.hero--accesso { min-height: 340px; }
.hero--accesso .hero__in { padding: 0; }
@media (min-width: 760px) {
  .hero { min-height: clamp(640px, 92svh, 920px); }
  .hero__in { align-items: flex-end; padding: calc(var(--testata) + 48px) 40px 176px; }
  .hero__camera { width: clamp(270px, 23vw, 350px); border-width: 6px; border-radius: 10px; margin-bottom: 0; box-shadow: 0 40px 70px -32px rgb(0 0 0 / .6); }
  .hero__giu { bottom: 120px; }
  .hero--pagina { min-height: clamp(560px, 78svh, 780px); }
  .hero--pagina .hero__in { padding: calc(var(--testata) + 40px) 40px 128px; justify-content: flex-end; }
  .hero--calendario { min-height: clamp(600px, 84svh, 820px); }
  .hero--calendario .hero__in { padding-bottom: 176px; }
  .hero--accesso { min-height: 400px; }
  .hero--accesso .hero__in { padding: 0; }
}
.hero__sotto + .hero__sotto { margin-top: 6px; }

/* l'intestazione trasparente sopra la hero (solo dove la pagina comincia con la hero), bianca scorrendo */
.testata { transition: background-color .3s ease, border-color .25s ease, box-shadow .25s ease; }
body:has(main > .hero:first-child) main > .hero:first-child { margin-top: calc(-1 * (var(--testata) + env(safe-area-inset-top, 0px))); }
html:not(.menu-aperto) body:has(main > .hero:first-child) .testata:not(.testata--scorsa) { background: transparent; }
html:not(.menu-aperto) body:has(main > .hero:first-child) .testata:not(.testata--scorsa) .testata__logo img { filter: brightness(0) invert(1); }
html:not(.menu-aperto) body:has(main > .hero:first-child) .testata:not(.testata--scorsa) :is(.testata__menu > a, .voce > a, .testata__ospiti) { color: rgb(255 255 255 / .92); text-shadow: 0 1px 12px rgb(12 19 38 / .35); }
html:not(.menu-aperto) body:has(main > .hero:first-child) .testata:not(.testata--scorsa) :is(.voce__apri img, .testata__ospiti img) { filter: brightness(0) invert(1); opacity: .9; }
html:not(.menu-aperto) body:has(main > .hero:first-child) .testata:not(.testata--scorsa) .testata__apri span { background: var(--bianco); }
html:not(.menu-aperto) body:has(main > .hero:first-child) .testata:not(.testata--scorsa) .btn--testata { background: var(--bianco); color: var(--titoli); box-shadow: 0 10px 26px -14px rgb(0 0 0 / .55); }
@media (hover: hover) and (pointer: fine) {
  html:not(.menu-aperto) body:has(main > .hero:first-child) .testata:not(.testata--scorsa) :is(.testata__menu > a, .voce > a, .testata__ospiti):hover { color: var(--bianco); }
  html:not(.menu-aperto) body:has(main > .hero:first-child) .testata:not(.testata--scorsa) .btn--testata:hover { background: var(--avorio); }
}

/* la hero editoriale: per le foto più strette dello schermo (non si allargano, stanno in cornice) */
@media (min-width: 900px) {
  .hero--editoriale { background: var(--notte); }
  .hero--editoriale .hero__sfondo {
    left: auto; right: max(40px, calc((100vw - 1320px) / 2 + 40px));
    top: calc(var(--testata) + 36px); bottom: 92px;
    width: min(34vw, 460px);
    border-radius: 18px; overflow: hidden;
    box-shadow: 0 50px 90px -40px rgb(0 0 0 / .7);
    outline: 1px solid rgb(254 254 254 / .14); outline-offset: 10px;
  }
  .hero--editoriale .hero__velo { background: radial-gradient(90% 90% at 0% 100%, rgb(12 19 38 / .5), rgb(12 19 38 / 0) 70%); }
  .hero--editoriale .hero__testo { max-width: min(660px, 50vw); }
}

/* ── 3 · il ritmo: più aria, tagli dritti, la cupola solo sotto la hero ─────── */
.sezione, .sezione--carta { padding: var(--passo) 0; border-radius: 0; }
.prenota--dopo { padding-top: var(--passo-denso); }
.prenota { padding-bottom: 24px; }
@media (min-width: 900px) {
  .sezione, .sezione--carta { padding: var(--passo) 0; }
  .sezione__griglia--foto { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 6vw, 104px); }
}

/* ── 4 · il calendario: la scheda più elegante, la colonna di destra in ordine ── */
.prenota__carta { border-radius: 22px; box-shadow: var(--ombra-carta); }
.prenota__carta h2 { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.4rem); margin-bottom: 18px; }
.giorno--vuoto { background: transparent; }
.calendario__griglia { border-radius: 12px; }
.calendario__mese { font-family: var(--serif); font-weight: 450; font-size: 1.3rem; letter-spacing: -.01em; }
@media (min-width: 760px) {
  .prenota__carta { padding: 38px 48px 32px; border-radius: 26px; }
  .modulo__azione { text-align: left; align-items: stretch; gap: 10px; }
  .modulo__azione .modulo__nota { padding-left: 14px; border-left: 2px solid var(--casa, var(--linea-calda)); }
  .modulo__azione .thk-cin { padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--linea); }
  .giorno { min-height: 38px; }
}
@media (min-width: 1100px) { .prenota__deco { opacity: 1; } }

/* ── 5 · le schede delle camere: foto vere, verticali, quattro per riga da computer ── */
.camera--foria { --casa: var(--arancio); --casa-testo: #B8520B; }
.camera--capodimonte { --casa: var(--verde); --casa-testo: var(--verde); }
.camere__griglia { gap: 22px; }
.camera { border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.camera__foto { aspect-ratio: 4 / 5; border-radius: var(--raggio-foto); box-shadow: var(--ombra-lieve); }
.camera__corpo { position: relative; z-index: 1; padding: 18px 2px 0; gap: 14px; align-items: baseline; }
.camera__num { font-size: 2.35rem; font-weight: 300; color: var(--casa-testo, var(--titoli)); min-width: 0; }
.camera__nome { flex-direction: column; align-items: flex-start; gap: 2px; }
.camera__nome h3 { font-family: var(--serif); font-size: 1.55rem; font-weight: 440; letter-spacing: -.012em; }
.camera__dove { font-size: .86rem; }
.camera__dove span { white-space: nowrap; }
.camera__riga { position: relative; z-index: 1; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 2px 4px; font-size: .92rem; }
.camera__dotazione { flex: 0 0 auto; border-right: 0; margin: 0; padding: 0; align-items: flex-start; }
.camera__dotazione > img { margin-top: 2px; }
.camera__scopri { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; text-decoration-color: var(--casa, var(--grigio)); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.camera__scopri::after { content: ""; width: 14px; height: 11px; background: url("/assets/icone/freccia-destra.svg") center / contain no-repeat; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .camera:hover { box-shadow: none; }
  .camera:hover .camera__foto { transform: scale(1.02); box-shadow: var(--ombra); }
  .camera:hover .camera__scopri::after { transform: translateX(4px); }
}
@media (min-width: 760px) {
  .camere__griglia { grid-template-columns: 1fr 1fr; gap: 48px 28px; }
  .camera__foto { aspect-ratio: 4 / 3; }
  .camera__corpo { padding: 20px 2px 0; }
  .camera__riga { padding: 12px 2px 4px; }
}
@media (min-width: 1100px) {
  .camere__griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px 24px; }
  .camera__foto { aspect-ratio: 4 / 5; }
}
@media (max-width: 759px) {
  .camere__griglia { grid-auto-columns: 80%; gap: 16px; }
  .camera__foto { aspect-ratio: 4 / 5; }
}

/* ── 6 · la galleria di ogni camera: un solo «bento» che si adatta al numero delle foto ── */
.galleria .napoli__foto-img { border-radius: var(--raggio-foto); box-shadow: var(--ombra-lieve); }
.galleria img { aspect-ratio: 4 / 5; }
@media (min-width: 760px) {
  .galleria { margin-top: -72px; }
  .galleria__griglia { grid-auto-rows: clamp(190px, 18vw, 280px); gap: 16px; }
  .galleria__griglia figure, .galleria__griglia .napoli__foto-img { height: 100%; }
  .galleria__griglia img { height: 100%; aspect-ratio: auto; }
  .galleria__griglia:has(> figure:nth-child(2):last-child) { grid-template-columns: 1.5fr 1fr; grid-auto-rows: clamp(320px, 33vw, 500px); }
  .galleria__griglia:has(> figure:nth-child(3):last-child) { grid-template-columns: 1.5fr 1fr; }
  .galleria__griglia:has(> figure:nth-child(3):last-child) > figure:first-child { grid-row: span 2; }
  .galleria__griglia:has(> figure:nth-child(4):last-child) { grid-template-columns: 1.35fr 1fr 1fr; }
  .galleria__griglia:has(> figure:nth-child(4):last-child) > figure:first-child { grid-row: span 2; }
  .galleria__griglia:has(> figure:nth-child(4):last-child) > figure:nth-child(2) { grid-column: span 2; }
  .galleria__griglia:has(> figure:nth-child(5):last-child) { grid-template-columns: 1.3fr 1fr 1fr; }
  .galleria__griglia:has(> figure:nth-child(5):last-child) > figure:first-child { grid-row: span 2; }
  .galleria__griglia:has(> figure:nth-child(6):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .galleria__griglia:has(> figure:nth-child(6):last-child) > figure:nth-child(1),
  .galleria__griglia:has(> figure:nth-child(6):last-child) > figure:nth-child(6) { grid-column: span 2; }
}

/* ── 7 · le foto nei blocchi testo + foto, e le scene serali in cornice «notte» ── */
.sezione__foto .napoli__foto-img { border-radius: var(--raggio-foto); box-shadow: var(--ombra-lieve); }
.sezione__foto--notte { background: var(--notte); padding: 16px; border-radius: 24px; box-shadow: 0 40px 80px -44px rgb(12 19 38 / .7); }
.sezione__foto--notte .napoli__foto-img { border-radius: 12px; box-shadow: none; }
@media (min-width: 900px) { .sezione__foto--notte { padding: 22px; } }

/* ── 8 · le icone con la frase diventano tessere ──────────────────────────── */
.voci { gap: 0 32px; margin-top: 26px; }
.voci .tema { align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--linea); }
.voci .tema img { width: 54px; height: 54px; flex: 0 0 54px; padding: 13px; border-radius: 50%; background: var(--avorio); box-shadow: inset 0 0 0 1px var(--linea); object-fit: contain; }
.sezione--carta .voci .tema img { background: var(--bianco); }
.voci .tema p { font-size: 1rem; line-height: 1.5; }
@media (min-width: 900px) {
  .voci .tema { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px 0 8px; }
  .voci .tema img { width: 64px; height: 64px; flex-basis: 64px; padding: 15px; }
  .voci .tema p { font-size: 1.02rem; max-width: 34ch; }
  .sezione__griglia:not(.sezione__griglia--foto) .voci { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sezione__griglia:not(.sezione__griglia--foto) .voci:has(> li:only-child) { grid-template-columns: minmax(0, 1fr); }
  .sezione__griglia:not(.sezione__griglia--foto) .voci:has(> li:only-child) .tema { flex-direction: row; align-items: center; }
  .sezione__griglia:not(.sezione__griglia--foto) .voci:has(> li:only-child) .tema p { max-width: 70ch; }
  .sezione__griglia:not(.sezione__griglia--foto) .voci:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sezione__griglia:not(.sezione__griglia--foto) .voci:has(> li:nth-child(3):last-child),
  .sezione__griglia:not(.sezione__griglia--foto) .voci:has(> li:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sezione__griglia:not(.sezione__griglia--foto) .voci:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sezione__griglia--foto .voci { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sezione__griglia--foto .voci:has(> li:only-child) { grid-template-columns: minmax(0, 1fr); }
  .sezione__griglia--foto .voci:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* gli elenchi: righe con il filetto, il pallino del colore della casa */
.elenco { gap: 0; margin-top: 22px; }
.elenco li { padding: 13px 0 13px 24px; border-bottom: 1px solid var(--linea); font-size: 1rem; }
.elenco li::before { top: calc(13px + .64em); left: 3px; }
@media (min-width: 760px) { .elenco--due { gap: 0 48px; } }

/* ── 9 · i voti e le citazioni ─────────────────────────────────────────────── */
.segno__numeri--una .numero__cifra { font-size: clamp(3.4rem, 2.2rem + 3.6vw, 5.4rem); font-weight: 300; line-height: 1; }
.segno__numeri--una .numero__cifra--stelle::after { width: 96px; height: 17px; background-size: 19.2px 17px; }
.segno__numeri--una .numero__cosa { font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; color: var(--testo-tenue); }
@media (min-width: 900px) {
  .sezione__testo:has(> .segno__numeri--una) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(48px, 6vw, 96px); align-items: start; }
  .sezione__testo:has(> .segno__numeri--una) > * { grid-column: 2; }
  .sezione__testo:has(> .segno__numeri--una) > :first-child { grid-column: 1 / -1; }
  .sezione__testo:has(> .segno__numeri--una) > .segno__numeri--una { grid-column: 1; grid-row: 2 / span 8; margin: 4px 0 0; padding-right: clamp(32px, 4vw, 64px); border-right: 1px solid var(--linea-calda); }
  .sezione__testo:has(> .segno__numeri--una) > .sezione__link, .sezione__testo:has(> .segno__numeri--una) > .sezione__azioni { justify-self: start; }
}
.citazione blockquote { font-size: clamp(1.08rem, .95rem + .45vw, 1.32rem); line-height: 1.4; }
.citazione figcaption { margin-top: 8px; font-size: .78rem; }
.citazione--evidenza { margin-top: 22px; padding-left: 18px; }
.citazione--evidenza blockquote { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); }

/* la tabella dei voti diventa una griglia di tessere, quattro per casa */
.voti { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; border: 0; border-radius: 0; background: transparent; overflow: visible; }
.voto, .voto + .voto { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 16px 16px; background: var(--bianco); border: 1px solid var(--linea); border-top: 3px solid var(--casa-voto, var(--linea-calda)); border-radius: 14px; }
.voto--foria { --casa-voto: var(--arancio); }
.voto--capodimonte { --casa-voto: var(--verde); }
.voto__nome { font-family: var(--serif); font-size: 1.3rem; font-weight: 450; }
.voto__media { font-size: 1.5rem; flex-wrap: wrap; white-space: normal; }
.voto__recensioni { text-align: left; }
@media (min-width: 760px) {
  .voti { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .voto, .voto + .voto { padding: 24px 22px 20px; }
  .voto__nome { font-size: 1.45rem; }
  .voto__media { font-size: 1.75rem; }
  .voto__recensioni { grid-column: auto; text-align: left; }
}

/* ── 10 · la home, sezione per sezione ─────────────────────────────────────── */
/* «Bagno privato, terrazza e idromassaggio»: tre tessere alte, l'illustrazione del kit in cima */
.vantaggi { padding: var(--passo) 0; }
@media (min-width: 900px) {
  .vantaggi { padding: var(--passo) 0 calc(var(--passo) + 20px); }
  .vantaggi h2 { margin-bottom: 48px; }
  .vantaggi__fondo { display: none; }
  .vantaggi__lista { gap: 32px; }
  .vantaggio, .vantaggio--orizzonte {
    flex-direction: column; align-items: flex-start; gap: 22px;
    padding: 32px 30px 30px; border-radius: 22px;
    background: rgb(254 254 254 / .72); border: 1px solid var(--linea); box-shadow: none;
  }
  .vantaggio:nth-child(2) { top: 0; }
  .vantaggio__ill, .vantaggio__ill--chiavi, .vantaggio__ill--vasca { height: 128px; width: auto; margin: 0; }
  .vantaggio__ill--mini { display: block; height: 128px; width: 100%; object-fit: contain; object-position: left bottom; }
  .vantaggio > div { padding-top: 20px; border-top: 1px solid var(--linea-calda); width: 100%; }
  .vantaggio h3 { font-size: 1.6rem; margin-bottom: 8px; }
  .vantaggio p { font-size: 1rem; }
}

/* «Otto camere, quattro per indirizzo» */
.camere { padding: var(--passo-denso) 0 var(--passo); }
.camere__testa { margin-bottom: 40px; }
@media (min-width: 760px) { .camere { padding: var(--passo-denso) 0 var(--passo); } }

/* «Napoli: cosa vedere e come muoversi»: il panorama più grande, il pulsante in vetro */
.napoli { padding: var(--passo-denso) 0 var(--passo); }
.napoli__panorama { height: clamp(280px, 38vw, 560px); margin-top: 40px; }
.napoli__carta { background: rgb(254 254 254 / .8); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border: 1px solid rgb(254 254 254 / .6); }
.napoli__carta a { text-decoration: none; }
.temi { margin-top: 48px; }
.napoli__foto { margin-top: 48px; }
.napoli__foto img { aspect-ratio: 4 / 3; }
@media (min-width: 760px) {
  .napoli { padding: var(--passo-denso) 0 var(--passo); }
  .napoli__panorama { margin-top: 48px; }
  .napoli__disegno { bottom: -52px; }
  .napoli__carta { bottom: 56px; padding: 14px 26px 12px; }
  .temi { gap: 48px; margin-top: 56px; }
  .tema h3 { font-size: 1.55rem; }
  .napoli__foto { gap: 32px; margin-top: 56px; align-items: start; }
  .napoli__foto img { aspect-ratio: 3 / 2; }
  .napoli__foto figure:nth-child(2) { margin-top: 72px; }
  .napoli__foto figcaption { font-size: .9rem; margin-top: 12px; }
}

/* «Come prenotare direttamente» */
.passi { padding: var(--passo) 0 var(--passo-denso); border-radius: 0; }
.passi h2 { margin-bottom: 40px; }
.passi__azione { margin-top: 48px; }
@media (min-width: 900px) {
  .passi { padding: var(--passo) 0 var(--passo-denso); border-radius: 0; }
  .passo__testo { font-size: 1.02rem; }
}

/* «Recensioni»: la banda «notte», i numeri grandi, le citazioni da leggere */
.segno { background: var(--notte); color: rgb(254 254 254 / .86); padding: var(--passo-denso) 0; }
.segno h2 { color: var(--bianco); margin-bottom: 24px; }
.segno__numeri { border-top-color: rgb(254 254 254 / .2); padding-top: 28px; }
.segno .numero__cifra { color: var(--bianco); font-size: clamp(2.2rem, 1.5rem + 2.4vw, 4.1rem); font-weight: 300; }
.segno .numero__cosa { color: rgb(254 254 254 / .72); font-size: .88rem; }
.segno .citazione blockquote { color: var(--bianco); font-size: clamp(1.15rem, .95rem + .8vw, 1.6rem); line-height: 1.38; }
.segno .citazione figcaption { color: rgb(254 254 254 / .62); }
.segno .thk-nota-recensioni { color: rgb(254 254 254 / .6); }
.segno__link { color: var(--bianco); text-decoration-color: rgb(254 254 254 / .5); }
.segno .citazioni { margin-top: 36px; }
@media (min-width: 760px) {
  .segno { padding: var(--passo-denso) 0; }
  .segno__griglia { grid-template-columns: minmax(0, 1fr) auto; }
  .segno h2 { grid-area: 1 / 1; margin-bottom: 24px; }
  .segno__link { grid-area: 1 / 2; }
  .segno__numeri { grid-row: 2; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 32px; }
  .numero { border-left-color: rgb(254 254 254 / .2); }
  .segno .numero__cifra { font-size: clamp(2.4rem, 1.4rem + 2.2vw, 3.6rem); }
  .segno .numero__cosa { margin-top: 8px; }
  .segno .citazioni { grid-row: 3; gap: 56px; margin-top: 56px; padding-top: 44px; border-top: 1px solid rgb(254 254 254 / .2); }
  .segno .thk-nota-recensioni { grid-row: 4; grid-column: 1 / -1; text-align: left; margin-top: 32px; }
}

/* «Due indirizzi» · «Come arrivare» · «Domande frequenti» */
.dove { padding: var(--passo) 0; border-top: 0; }
.dove .riga-laterale { margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--linea); }
.indirizzo h3 { font-family: var(--serif); font-size: 1.4rem; font-weight: 440; letter-spacing: -.01em; line-height: 1.2; }
.indirizzo h3 img { width: 18px; flex-basis: 18px; margin-top: 4px; }
.indirizzo p, .indirizzo__link { padding-left: 28px; margin-left: 0; }
.indirizzo__link { margin-left: 28px; padding-left: 0; }
@media (min-width: 900px) {
  .dove { padding: var(--passo) 0; }
  .dove__griglia { gap: 48px; }
  .indirizzo { padding-top: 72px; }
  .indirizzo p { font-size: .98rem; line-height: 1.6; }
  .dove .riga-laterale { margin-top: 72px; padding-top: 64px; grid-template-columns: 320px 1fr; gap: 56px; }
  .domanda summary { min-height: 52px; padding: 12px 22px; font-size: 1rem; }
  .domanda p { padding: 0 22px 14px; font-size: .96rem; }
}

/* i due riquadri «Indicazioni stradali»: il segnaposto della casa in un cerchio, la riga intera cliccabile */
.arrivo { padding: 14px 18px 14px 14px; border-radius: 16px; gap: 18px; }
.arrivo::after { content: ""; flex: 0 0 auto; margin-left: auto; width: 16px; height: 12px; background: url("/assets/icone/freccia-destra.svg") center / contain no-repeat; opacity: .75; transition: transform 200ms var(--ease-out); }
.arrivo__ico, .arrivo .arrivo__ico { width: 58px; height: 58px; aspect-ratio: 1; border-radius: 50%; background: rgb(254 115 14 / .1); }
.arrivo:nth-child(2) .arrivo__ico { background: rgb(33 101 54 / .1); }
.arrivo__ico img { width: 20px; }
.arrivo__testo strong { font-family: var(--serif); font-size: 1.4rem; font-weight: 440; letter-spacing: -.01em; }
@media (hover: hover) and (pointer: fine) {
  .arrivo:hover::after { transform: translateX(4px); }
  .arrivo:hover .arrivo__ico img { transform: translateY(-2px); }
}

/* la mappa illustrata: carta avorio, il mare, il Vesuvio del kit */
.mappa {
  background:
    repeating-linear-gradient(28deg, transparent 0 46px, rgb(199 179 154 / .26) 46px 47px),
    repeating-linear-gradient(-62deg, transparent 0 58px, rgb(199 179 154 / .2) 58px 59px),
    var(--avorio);
  border-color: var(--linea-calda); border-radius: 18px;
}
.mappa__mare { background: repeating-linear-gradient(172deg, transparent 0 9px, rgb(254 254 254 / .45) 9px 10px), var(--grigio); opacity: .5; }
.mappa__vesuvio { opacity: .9; }
.mappa__citta { color: var(--bronzo); letter-spacing: .04em; }
.mappa__pin img { width: 19px; }
.mappa__pin span { background: rgb(254 254 254 / .92); padding: 3px 8px; border-radius: 8px; box-shadow: 0 6px 16px -10px rgb(27 41 60 / .45); }
.mappa figcaption { color: var(--bronzo); }
@media (max-width: 759px) { .mappa--capodimonte .mappa__citta { left: auto; right: 10%; bottom: 30%; } }

/* «Contatti» e le chiusure con la foto di notte: più alte, più cinema */
.saluto { padding: 96px 0 88px; }
.saluto::before { background: linear-gradient(90deg, rgb(12 19 38 / .78) 0%, rgb(12 19 38 / .42) 55%, rgb(12 19 38 / .3) 100%), linear-gradient(0deg, rgb(12 19 38 / .35), rgb(12 19 38 / 0) 60%); }
.saluto h2 { font-size: clamp(2.3rem, 1.4rem + 2.6vw, 3.9rem); margin-bottom: 16px; }
.saluto__frase { font-size: 1.06rem; }
.saluto__azioni { margin-top: 24px; }
.ospiti { background: rgb(12 19 38 / .35); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-color: rgb(254 254 254 / .38); border-radius: 18px; padding: 22px 24px; }
.ospiti__titolo { font-family: var(--serif); font-weight: 450; font-size: 1.4rem; letter-spacing: -.01em; }
@media (min-width: 900px) {
  .saluto { padding: clamp(112px, 9vw, 150px) 0 clamp(104px, 8.4vw, 140px); }
  .saluto__in { gap: 56px; align-items: end; }
}

/* ── 11 · il piè di pagina da albergo ──────────────────────────────────────── */
.piede { background: var(--avorio); border-top: 1px solid var(--linea); padding-top: 48px; }
.piede__in { gap: 22px; padding-bottom: 28px; border-bottom-color: var(--linea-calda); }
.piede__logo img { width: 200px; }
.piede__marchio p { margin-top: 10px; font-size: .9rem; }
.piede__legale { padding-top: 20px; }
@media (min-width: 900px) {
  .piede { padding-top: 72px; padding-bottom: 32px; }
  .piede__in { gap: 48px; padding-bottom: 40px; align-items: start; }
  .piede__logo img { width: 200px; }
  .piede__marchio p { margin-top: 10px; font-size: .9rem; }
  .piede__link { gap: 0 30px; }
  .piede__link a { font-size: .95rem; color: var(--titoli); padding: 2px 0 6px; }
  .piede__contatti { font-size: .88rem; margin-top: 6px; }
  .piede__cin p { font-size: .84rem; line-height: 1.8; }
  .piede__legale { padding-top: 22px; }
}

/* ── 12 · le pagine legali e la 404 ────────────────────────────────────────── */
.pagina:not(.pagina--404) { padding: 0 0 var(--passo); background: linear-gradient(var(--avorio), var(--avorio)) top / 100% 300px no-repeat, var(--bianco); }
.legale { max-width: 760px; padding-top: 72px; }
.legale::before { content: ""; display: block; width: 132px; height: 54px; margin-bottom: 26px; background: url("/assets/icone/vesuvio.svg") left bottom / contain no-repeat; opacity: .9; }
.legale h1 { font-size: clamp(2.5rem, 1.6rem + 2.9vw, 3.9rem); font-weight: 400; letter-spacing: -.024em; margin-bottom: 14px; }
.legale > p:first-of-type { margin-bottom: 64px; }
.legale h2 { font-size: clamp(1.45rem, 1.2rem + .7vw, 1.85rem); margin: 52px 0 14px; }
.legale p, .legale li { font-size: 1.03rem; line-height: 1.75; }
.legale ul { list-style: none; padding-left: 0; }
.legale ul li { position: relative; padding-left: 22px; }
.legale ul li::before { content: ""; position: absolute; left: 3px; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--bronzo); }
.legale ol li::marker { color: var(--bronzo); font-family: var(--serif); font-weight: 500; }
.legale table { border-radius: 12px; border: 1px solid var(--linea); }
.legale th { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
@media (min-width: 900px) { .legale { padding-top: 96px; } }

.pagina--404 { background: var(--avorio); padding: 0; }
.pagina--404 .contenitore { display: grid; align-items: center; gap: 40px; min-height: calc(100svh - var(--testata)); padding-top: 48px; padding-bottom: 72px; }
.errore-404 { padding: 0; }
.errore-404 h1 { font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.6rem); font-weight: 400; letter-spacing: -.026em; }
.errore-404__ill { width: min(100%, 420px); margin: 0 auto; border-radius: 26px; box-shadow: var(--ombra-carta); }
@media (min-width: 900px) {
  .pagina--404 .contenitore { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 72px; }
  .pagina--404 .errore-404 { text-align: left; }
  .pagina--404 .errore-404 > img { margin: 0 0 30px; }
  .pagina--404 .errore-404 .azioni { justify-content: flex-start; }
  .errore-404__ill { order: 2; width: min(100%, 480px); margin: 0 0 0 auto; }
}

/* ── 13 · l'area ospiti e le guide ─────────────────────────────────────────── */
.riquadro { min-height: 108px; gap: 10px; border-radius: 16px; font-size: .88rem; }
.riquadro img { width: 38px; height: 38px; }
@media (min-width: 760px) {
  .riquadri { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
  .riquadro { flex: 0 0 calc((100% - 48px) / 4); min-height: 124px; padding: 22px 10px 18px; font-size: .95rem; }
  .riquadri-zona { margin-top: -64px; }
}
.titolo-icona img { width: 40px; height: 40px; flex-basis: 40px; }
.posto { min-height: 64px; padding: 10px 18px; }
.posto strong { font-family: var(--serif); font-weight: 450; font-size: 1.12rem; }
.posti { border-radius: 16px; }
.passaggi li { min-height: 44px; padding-left: 56px; font-size: 1rem; }
.passaggi li::before { width: 44px; height: 44px; font-size: 1.3rem; }
.accesso h1 { font-size: clamp(2.1rem, 1.5rem + 1.6vw, 2.8rem); font-weight: 400; }
.prenota--accesso .prenota__carta { padding: 40px 44px 34px; }
@media (max-width: 759px) { .prenota--accesso .prenota__carta { padding: 30px 22px 26px; } }

/* ritocchi del salto */
.camera__scopri { margin-top: auto; }
.camera__riga { flex: 1 1 auto; }
.sezione .riga-laterale .titolo-laterale { font-size: clamp(1.75rem, 1.25rem + 1.2vw, 2.45rem); }
@media (min-width: 900px) {
  .sezione .riga-laterale { grid-template-columns: 340px 1fr; gap: 56px; }
}
@media (max-width: 759px) {
  .segno__numeri { grid-template-columns: 1fr 1fr; }
  .segno .numero:last-child { grid-column: 1 / -1; }
  .segno .numero__cifra { font-size: clamp(2rem, 1.4rem + 3vw, 2.6rem); }
}
.ospiti__titolo { text-wrap: balance; }
@media (min-width: 760px) {
  .segno__numeri { grid-template-columns: 1fr 1fr 1fr 1.3fr; }
  .segno .numero__cifra { font-size: clamp(2.2rem, 1.2rem + 2vw, 3.3rem); }
}
@media (min-width: 760px) {
  .hero--pagina .hero__in { justify-content: flex-start; align-items: flex-end; }
}
.voci .tema img { padding: 9px; }
.voci .tema img[src$=".svg"] { padding: 14px; }
@media (min-width: 900px) {
  .voci .tema img { padding: 10px; }
  .voci .tema img[src$=".svg"] { padding: 16px; }
}
@media (min-width: 760px) {
  .galleria__griglia:has(> figure:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 440px)); justify-content: center; grid-auto-rows: clamp(340px, 38vw, 550px); gap: 24px; }
  .galleria__griglia:has(> figure:nth-child(2):last-child) > figure:nth-child(2) { margin-top: 56px; height: calc(100% - 56px); }
}
@media (min-width: 900px) {
  .sezione .riga-laterale.domande { align-items: start; }
  .sezione .riga-laterale.domande > .titolo-laterale { position: sticky; top: calc(var(--testata) + 32px); }
}
/* le pagine legali: la fascia avorio sale dietro il titolo e finisce sotto la data, qualunque sia la sua altezza */
.pagina:not(.pagina--404) { background: var(--bianco); }
.legale > p:first-of-type {
  padding-bottom: 44px; margin-bottom: 56px;
  border-image: linear-gradient(var(--avorio), var(--avorio)) fill 0 / / 100vmax 100vmax 0 100vmax;
}
.sezione__testo > .voti + p { margin-top: 28px; }

/* ── correzioni del collaudo (01/11/2026) ───────────────────────────────────── */
@media (min-width: 760px) {
  /* galleria con due foto verticali in testa (Museum 2): le due verticali alte, le due orizzontali impilate a destra */
  .galleria__griglia.galleria__griglia--due-verticali:has(> figure:nth-child(4):last-child) { grid-template-columns: 1fr 1fr 1.25fr; }
  .galleria__griglia.galleria__griglia--due-verticali:has(> figure:nth-child(4):last-child) > figure:nth-child(2) { grid-column: auto; grid-row: span 2; }
}
@media (min-width: 760px) {
  /* tessere a due colonne con un numero dispari di voci: si leggono per colonna (3 + 2), senza una voce sola in fondo */
  .voci--due:has(> li:nth-child(5):last-child),
  .sezione__griglia--foto .voci:has(> li:nth-child(5):last-child) { grid-auto-flow: column; grid-template-rows: repeat(3, auto); }
  .voci--due:has(> li:nth-child(7):last-child),
  .sezione__griglia--foto .voci:has(> li:nth-child(7):last-child) { grid-auto-flow: column; grid-template-rows: repeat(4, auto); }
}
@media (max-width: 759px) {
  /* indice delle guide da telefono: righe da tre, l'ultima riga centrata */
  .riquadri { display: flex; flex-wrap: wrap; justify-content: center; }
  .riquadro { flex: 0 0 calc((100% - 20px) / 3); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   TELEFONO MENO DISPERSIVO E HERO PIÙ LEGGIBILE (Domenico, 01/11/2026)
   Home: hero → camere → … → «Come prenotare» → calendario. Case: hero → camere → calendario.
   Da telefono le camere non scorrono più: 2 × 2, raggruppate per indirizzo, la scheda intera cliccabile.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── la hero: il velo scuro solo dove sta il testo (sotto da telefono, a sinistra da computer) ── */
.hero__velo {
  background:
    linear-gradient(180deg, rgb(12 19 38 / .55) 0, rgb(12 19 38 / .18) 140px, rgb(12 19 38 / 0) 240px),
    linear-gradient(0deg, rgb(12 19 38 / .88) 0%, rgb(12 19 38 / .78) 30%, rgb(12 19 38 / .6) 50%, rgb(12 19 38 / .3) 68%, rgb(12 19 38 / 0) 86%);
}
@media (min-width: 760px) {
  .hero__velo {
    background:
      linear-gradient(180deg, rgb(12 19 38 / .5) 0, rgb(12 19 38 / .14) 150px, rgb(12 19 38 / 0) 260px),
      linear-gradient(90deg, rgb(12 19 38 / .82) 0%, rgb(12 19 38 / .7) 30%, rgb(12 19 38 / .48) 50%, rgb(12 19 38 / .2) 66%, rgb(12 19 38 / 0) 80%),
      linear-gradient(0deg, rgb(12 19 38 / .55) 0%, rgb(12 19 38 / .2) 30%, rgb(12 19 38 / 0) 52%);
  }
}
@media (min-width: 900px) {
  .hero--editoriale .hero__velo {
    background:
      linear-gradient(90deg, rgb(12 19 38 / .72) 0%, rgb(12 19 38 / .5) 34%, rgb(12 19 38 / 0) 62%),
      radial-gradient(90% 90% at 0% 100%, rgb(12 19 38 / .6), rgb(12 19 38 / 0) 70%);
  }
}
.hero h1 { text-shadow: 0 2px 24px rgb(12 19 38 / .5), 0 1px 3px rgb(12 19 38 / .28); }
.hero__sotto { color: var(--bianco); text-shadow: 0 1px 14px rgb(12 19 38 / .62), 0 1px 2px rgb(12 19 38 / .32); }
.hero .occhiello--chiaro { color: var(--bianco); font-weight: 600; text-shadow: 0 1px 12px rgb(12 19 38 / .6); }
.hero .percorso { color: var(--bianco); text-shadow: 0 1px 10px rgb(12 19 38 / .6); }
@media (max-width: 759px) {
  .hero__sotto { font-size: 1.0625rem; line-height: 1.55; }
  .hero .occhiello--chiaro { font-size: .8rem; letter-spacing: .2em; margin-bottom: 14px; }
  .hero .percorso { font-size: .86rem; }
  /* la home: niente foto piccola (le camere arrivano subito sotto) e una hero alta il giusto */
  .hero__camera { display: none; }
  .hero:has(.hero__camera) { min-height: min(84svh, 680px); }
  .hero:has(.hero__camera) .hero__in { padding-bottom: 68px; }
}

/* ── l'ordine nuovo: chi viene dopo la hero non le sale più sopra ── */
.hero + .camere { margin-top: 0; border-radius: 0; }
/* il calendario continua il fondo «carta» della sezione di sopra: «Come prenotare» (home), le camere (case) */
.passi + .prenota, .sezione + .prenota { margin-top: 0; padding-top: 0; padding-bottom: var(--passo-denso); background: var(--carta); }
.passi:has(+ .prenota), .sezione:has(+ .prenota) { padding-bottom: 40px; }
@media (min-width: 760px) {
  .hero + .camere { margin-top: 0; }
  .passi + .prenota, .sezione + .prenota { margin-top: 0; padding-top: 0; }
  .passi:has(+ .prenota), .sezione:has(+ .prenota) { padding-bottom: 56px; }
}

/* ── le schede delle camere: tutta la scheda porta alla camera (un link solo, «Scopri la camera») ── */
.camere__griglia .camera { position: relative; }
.camere__griglia .camera__riga { position: static; }
.camere__griglia .camera__scopri::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--raggio-foto); }
.camere__griglia .camera__scopri:focus-visible { outline: none; }
.camere__griglia .camera__scopri:focus-visible::before { outline: 2px solid var(--notte); outline-offset: 6px; }
.camere__griglia .camera__online { position: relative; z-index: 3; }
.camera__foto { transition: transform 300ms var(--ease-out), box-shadow .3s ease; }
.camera:active .camera__foto { transform: scale(.98); }

@media (max-width: 759px) {
  /* due colonne, niente riga che scorre di lato */
  .camere__griglia {
    grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 12px; overflow: visible; scroll-snap-type: none; margin: 0; padding: 0;
  }
  .camera { scroll-snap-align: none; }
  .camera__foto { aspect-ratio: 4 / 3; border-radius: 12px; }
  .camere__griglia .camera__scopri::before { border-radius: 12px; }
  .camera__corpo { padding: 10px 0 0; gap: 8px; align-items: baseline; }
  .camera__num { font-size: 1.3rem; }
  .camera__nome h3 { font-size: 1.14rem; line-height: 1.15; }
  .camera__dove { display: none; }
  .camera__riga { padding: 6px 0 0; gap: 6px; font-size: .84rem; line-height: 1.35; }
  .camera__dotazione { gap: 6px; }
  .camera__dotazione > img { flex: 0 0 16px; width: 16px; margin-top: 1px; }
  .camera__dotazione > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .camera__extra { display: none; }
  .camera__scopri { font-size: .84rem; padding: 2px 0 0; gap: 6px; text-underline-offset: 4px; }
  .camera__scopri::after { width: 12px; height: 9px; }

  /* la home: le camere raggruppate per indirizzo, col titoletto della casa sopra le sue quattro */
  .camere .contenitore { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .camere .camere__testa, .camere .camere__legenda, .camere .camere__griglia { display: contents; }
  .camere .camere__testa > div:first-child { grid-column: 1 / -1; order: 0; }
  .camere .dove-tag { grid-column: 1 / -1; margin: 6px 0 -10px; padding-bottom: 10px; border-bottom: 1px solid var(--linea-calda); font-size: .95rem; font-weight: 600; color: var(--titoli); }
  .camere .dove-tag img { width: 12px; }
  .camere .dove-tag--foria { order: 1; }
  .camere .camera--foria { order: 2; }
  .camere .dove-tag--capodimonte { order: 3; margin-top: 18px; }
  .camere .camera--capodimonte { order: 4; }
  .camere { padding: 52px 0 var(--passo-denso); }
}

/* ══ AREA OSPITI A RIQUADRI (2 Step, 01/11/2026) ═════════════════════════════════════════════
   La guida di via Foria e Capodimonte: riquadri in griglia (2 colonne da telefono, 4 da computer) con l'icona
   in un cerchio, i servizi da prenotare, il pulsante «Aggiungi alla schermata Home» e la barra delle scorciatoie. */
.riquadri--guida { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.riquadri--guida .riquadro {
  flex: none; justify-content: flex-start; gap: 12px;
  min-height: 132px; padding: 18px 10px 16px; border-radius: 16px;
  font-size: .95rem; font-weight: 600; line-height: 1.25; text-wrap: balance;
}
.riquadri--guida .riquadro img { width: 36px; height: 36px; }
.riquadro__icona {
  flex: 0 0 auto; width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--casa, var(--bronzo)) 13%, var(--bianco));
  transition: transform 220ms var(--ease-out), background-color .25s ease;
}
/* un riquadro rimasto da solo sull'ultima riga: largo quanto la griglia, icona e nome in fila */
.riquadri--guida .riquadro:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; justify-content: center; min-height: 92px; gap: 14px; }
@media (hover: hover) and (pointer: fine) {
  .riquadri--guida .riquadro:hover .riquadro__icona { transform: scale(1.06); background: color-mix(in srgb, var(--casa, var(--bronzo)) 20%, var(--bianco)); }
}
@media (min-width: 760px) {
  .riquadri--guida { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
  .riquadri--guida .riquadro { flex: 0 0 calc((100% - 48px) / 4); min-height: 164px; padding: 26px 14px 22px; font-size: 1rem; gap: 14px; }
  .riquadri--guida .riquadro:last-child:nth-child(odd) { flex-direction: column; min-height: 164px; gap: 14px; }
  .riquadro__icona { width: 68px; height: 68px; }
  .riquadri--guida .riquadro img { width: 40px; height: 40px; }
}

/* i servizi da prenotare, sotto la griglia */
.servizi-guida { padding-top: 52px; padding-bottom: 0; }
.servizi-guida h2 { margin-bottom: 8px; }
.servizi-guida__intro { font-size: 1.02rem; line-height: 1.55; color: var(--testo); }
.servizi-guida__griglia { display: grid; gap: 14px; margin-top: 22px; }
.servizio {
  display: flex; flex-direction: column; gap: 12px; padding: 20px 18px 18px;
  background: var(--bianco); border: 1px solid var(--linea); border-radius: 16px; box-shadow: var(--ombra-lieve);
}
.servizio__testa { display: flex; align-items: center; gap: 14px; }
.servizio__testa .riquadro__icona { width: 52px; height: 52px; }
.servizio__testa img { width: 28px; height: 28px; }
.servizio h3 { font-size: 1.32rem; line-height: 1.15; }
.servizio p { font-size: .98rem; line-height: 1.55; color: var(--testo); text-wrap: pretty; }
.servizio__btn { margin-top: auto; align-self: flex-start; gap: 10px; }
.servizio__btn img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
@media (min-width: 760px) {
  .servizi-guida { padding-top: 72px; padding-bottom: 0; }
  .servizi-guida__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 980px; }
  .servizio { padding: 26px 26px 24px; }
}

/* il check-out: l'eccezione per chi ha prenotato direttamente */
.guida__diretto { margin-top: 18px; padding: 16px 18px; border-radius: 14px; background: var(--bianco); border: 1px solid var(--linea); border-left: 3px solid var(--casa, var(--bronzo)); max-width: 62ch; }
.sezione:not(.sezione--carta) .guida__diretto { background: var(--carta); }
.guida__diretto-titolo { font-weight: 600; color: var(--titoli); font-size: 1rem; line-height: 1.4; text-wrap: balance; }
.guida__diretto .elenco { margin-top: 6px; gap: 0; }
.guida__diretto .elenco li { padding: 8px 0 8px 22px; }
.guida__diretto .elenco li::before { top: calc(8px + .64em); }
.guida__diretto .elenco li:last-child { border-bottom: 0; padding-bottom: 0; }

/* il pulsante «Aggiungi alla schermata Home» in testata: solo dove si tocca, mai da computer */
.testata__home {
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  user-select: none; -webkit-user-select: none; transition: transform 160ms var(--ease-out);
}
.testata__home img { width: 26px; height: 26px; transition: filter .2s ease; }
.testata__home:active { transform: scale(.94); background: var(--nebbia); }
.testata__home[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .testata__home { display: none; } }
html:not(.menu-aperto) body:has(main > .hero:first-child) .testata:not(.testata--scorsa) .testata__home img { filter: brightness(0) invert(1); }
@media (max-width: 359px) { .testata__home { width: 40px; } }

/* i salti dai riquadri e dalla barra: il titolo che non è ancora entrato è spostato di 32 px (reveal); il margine li compensa */
body:has(.riquadri--guida) .reveal > h2[id] { scroll-margin-top: 32px; }

/* il blocco «Salva la guida sul telefono» quando ci porta il pulsante */
.guida__evidenza .sezione__testo { animation: guida-evidenza 1.6s var(--ease-out) 1; border-radius: 16px; }
@keyframes guida-evidenza {
  0%, 30% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--casa, var(--bronzo)) 22%, transparent); background: color-mix(in srgb, var(--casa, var(--bronzo)) 6%, transparent); }
  100% { box-shadow: 0 0 0 10px transparent; background: transparent; }
}

/* la barra delle scorciatoie, da telefono, al posto della barra WhatsApp */
.barra-guida {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
  background: rgb(254 254 254 / .97);
  border-top: 1px solid var(--linea);
  box-shadow: 0 -10px 30px -20px rgb(27 41 60 / .4);
}
.barra-guida a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 56px; padding: 4px 2px; border-radius: 12px;
  font-size: .76rem; font-weight: 600; line-height: 1.1; color: var(--titoli); text-decoration: none;
  user-select: none; -webkit-user-select: none; transition: transform 160ms var(--ease-out), background-color .2s ease;
}
.barra-guida img { width: 26px; height: 26px; object-fit: contain; }
.barra-guida a:active { transform: scale(.95); background: var(--nebbia); }
@media (min-width: 900px) { .barra-guida { display: none; } }   /* il piè di pagina ha già lo spazio della barra in fondo */

@media (prefers-reduced-motion: reduce) {
  .riquadro__icona, .testata__home, .barra-guida a { transition-duration: .01s; }
  .testata__home:active, .barra-guida a:active { transform: none; }
  .guida__evidenza .sezione__testo { animation-duration: .01s; }
}

/* =========================================================================
   VANTAGGI DELLA PRENOTAZIONE DIRETTA (2 Step, voci 2 e 4: «maggiore evidenza»)
   ul.diretti in home (section.passi) e in /contatti (#diretto): una scheda
   bianca coi pezzi del sito; il primo vantaggio (lo sconto del 10%) è la
   fascia scura in testa, gli altri hanno l'icona del kit in un cerchio.
   Una colonna da telefono, due da computer.
   ========================================================================= */
.diretti {
  list-style: none; margin: 18px 0 0; padding: 0 14px 6px;
  display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 32px;
  background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--raggio);
  box-shadow: var(--ombra-carta, var(--ombra)); overflow: hidden;
  text-align: left; counter-reset: none;
}
.diretti li {
  position: relative; display: flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 9px 0; border-top: 1px solid var(--linea);
  font-size: .92rem; line-height: 1.42; color: var(--titoli); text-wrap: pretty;
}
.diretti li::before {
  content: ""; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  background: var(--carta) var(--ico, none) center / var(--ico-taglia, 25px) auto no-repeat;
  border: 1px solid var(--linea);
}
/* lo sconto: la fascia scura in testa alla scheda */
.diretti li:first-child {
  margin: 0 -14px 4px; padding: 20px 18px 20px 20px; min-height: 0; border-top: 0;
  background: var(--notte); color: var(--bianco);
  font-family: var(--serif); font-size: clamp(1.32rem, 1.05rem + 1vw, 1.9rem); line-height: 1.15;
  font-variant-numeric: lining-nums; text-wrap: balance;
}
.diretti li:first-child::before {
  width: 4px; height: auto; align-self: stretch; border: 0; border-radius: 2px;
  background: var(--arancio);
}
.diretti li:nth-child(2) { border-top: 0; }

/* le icone del kit, nell'ordine dei vantaggi di ciascuna pagina */
.passi .diretti li:nth-child(2), .sezione .diretti li:nth-child(2) { --ico: url("/assets/icone/elenco/macchina-caffe.png"); }
.passi .diretti li:nth-child(3), .sezione .diretti li:nth-child(3) { --ico: url("/assets/icone/uscita.svg"); --ico-taglia: 18px; }
.passi .diretti li:nth-child(4) { --ico: url("/assets/icone/elenco/deposito-bagagli.png"); }
.passi .diretti li:nth-child(5) { --ico: url("/assets/icone/elenco/parcheggio-in-zona.png"); }
.passi .diretti li:nth-child(6) { --ico: url("/assets/icone/elenco/lavatrice.png"); }
.passi .diretti li:nth-child(7) { --ico: url("/assets/icone/messaggio-telefono.svg"); --ico-taglia: 19px; }
.passi .diretti li:nth-child(8) { --ico: url("/assets/icone/elenco/zona-pranzo.png"); }
.sezione .diretti li:nth-child(4) { --ico: url("/assets/icone/ingresso.svg"); --ico-taglia: 18px; }
.sezione .diretti li:nth-child(5) { --ico: url("/assets/icone/elenco/deposito-bagagli.png"); }
.sezione .diretti li:nth-child(6) { --ico: url("/assets/icone/messaggio-telefono.svg"); --ico-taglia: 19px; }
.sezione .diretti li:nth-child(7) { --ico: url("/assets/icone/elenco/lavatrice.png"); }
.sezione .diretti li:nth-child(8) { --ico: url("/assets/icone/elenco/parcheggio-in-zona.png"); }
.sezione .diretti li:nth-child(9) { --ico: url("/assets/icone/elenco/zona-pranzo.png"); }

/* in home: la frase d'apertura come piccolo occhiello sopra la scheda */
.passi__azione:has(.diretti) { gap: 0; }
.passi__azione > p:has(+ .diretti) {
  font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--bronzo);
}
.passi__azione .diretti { width: 100%; max-width: 920px; }
/* in /contatti: la frase dopo la scheda prende aria */
.sezione__testo > .diretti { max-width: 1040px; }
.sezione__testo > .diretti + p { margin-top: 26px; }

@media (min-width: 760px) {
  .diretti { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 32px 14px; }
  .diretti li { min-height: 68px; padding: 12px 0; font-size: .98rem; gap: 14px; }
  .diretti li::before { width: 46px; height: 46px; background-size: calc(var(--ico-taglia, 25px) * 1.15) auto; }
  .diretti li:first-child { grid-column: 1 / -1; margin: 0 -32px 6px; padding: 26px 32px; }
  .diretti li:nth-child(3) { border-top: 0; }
  /* un vantaggio che resta da solo nell'ultima riga la occupa tutta */
  .diretti li:nth-child(even):last-child { grid-column: 1 / -1; }
}

/* =========================================================================
   TUTTE LE FOTO DI UNA CAMERA (3 Step, voci 1-9: «ci sono solo tre foto»)
   Sotto la galleria, «Mostra tutte le N foto» apre l'album (dialog#album):
   tutte le foto dell'annuncio Airbnb, divise per ambiente, a griglia (2
   colonne da telefono, 3 da computer). Ogni foto, nella galleria e
   nell'album, si apre grande nel visore (dialog#visore): avanti e indietro
   coi pulsanti, con le frecce della tastiera e col dito.
   ========================================================================= */
.galleria__apri {
  display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none;
  border-radius: var(--raggio-foto); cursor: zoom-in; -webkit-tap-highlight-color: transparent;
}
.galleria__apri .napoli__foto-img { display: block; height: 100%; }
.galleria__apri:focus-visible { outline: 2px solid var(--arancio); outline-offset: 3px; }
.galleria__tutte { display: flex; justify-content: center; margin-top: 22px; }
.galleria__tutte .btn { gap: 12px; }
.galleria__tutte .btn img { width: 18px; height: 18px; }
@media (max-width: 759px) { .galleria__tutte .btn { width: 100%; } }

html:has(dialog[open]) { overflow: hidden; }

/* l'album: a tutto schermo, la testata resta in alto mentre si scorre */
.album {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: 0; border: 0; background: var(--avorio); color: var(--testo);
  overflow-y: auto; overscroll-behavior: contain;
}
.album::backdrop { background: rgb(12 19 38 / .45); }
.album[open] { animation: album-entra 420ms var(--ease-out); }
@keyframes album-entra { from { opacity: 0; transform: translateY(24px); } }
.album__testata {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 14px;
  /* il titolo comincia dove comincia la colonna delle foto (1180 px con 20 di margine) */
  padding: max(12px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px), calc((100% - 1140px) / 2))
           12px max(20px, env(safe-area-inset-left, 0px), calc((100% - 1140px) / 2));
  background: rgb(251 249 244 / .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}
.album__chiudi {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: var(--bianco); box-shadow: var(--ombra-lieve); cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color .2s ease;
}
.album__chiudi img { width: 16px; height: 16px; }
.album__chiudi:active { transform: scale(.94); }
.album__titolo { margin: 0; font-family: var(--serif); font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); font-weight: 500; line-height: 1.15; color: var(--titoli); }
.album__conta {
  margin: 3px 0 0; font-family: var(--sans); font-size: .76rem; font-weight: 600; line-height: 1.2;
  letter-spacing: .12em; text-transform: uppercase; color: var(--bronzo);
}
.album__ambienti {
  display: flex; gap: 8px; max-width: 1180px; margin: 0 auto; overflow-x: auto; scrollbar-width: none;
  padding: 16px max(20px, env(safe-area-inset-right, 0px)) 2px max(20px, env(safe-area-inset-left, 0px));
}
.album__ambienti::-webkit-scrollbar { display: none; }
.album__ambienti button {
  flex: none; min-height: 40px; padding: 9px 15px; border: 1px solid var(--linea-calda); border-radius: 999px;
  background: var(--bianco); color: var(--inchiostro); font: 500 .88rem/1 var(--sans); cursor: pointer;
  transition: transform 160ms var(--ease-out), border-color .2s ease;
}
.album__ambienti button:active { transform: scale(.96); }
.album__corpo {
  max-width: 1180px; margin: 0 auto;
  padding: 6px max(20px, env(safe-area-inset-right, 0px)) calc(56px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
}
.album__gruppo { padding-top: 28px; scroll-margin-top: 82px; }
.album__gruppo h3 { margin: 0 0 14px; font-family: var(--serif); font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); font-weight: 500; color: var(--titoli); }
.album__griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.album__foto {
  display: block; padding: 0; border: 0; overflow: hidden; aspect-ratio: 4 / 3;
  border-radius: var(--raggio-piccolo); background: var(--nebbia); cursor: zoom-in; -webkit-tap-highlight-color: transparent;
}
.album__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.album__foto:active img { transform: scale(.98); }
.album__foto:focus-visible { outline: 2px solid var(--arancio); outline-offset: 2px; }
@media (min-width: 760px) {
  .album__testata { padding-top: max(16px, env(safe-area-inset-top, 0px)); padding-bottom: 16px; }
  .album__griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .album__gruppo { padding-top: 36px; }
}
@media (hover: hover) and (pointer: fine) {
  .album__chiudi:hover { background: var(--carta); }
  .album__ambienti button:hover { border-color: var(--tratto); }
  .album__foto:hover img { transform: scale(1.04); }
}

/* il visore: la foto intera sul fondo notte, il conto in alto, le frecce ai lati */
.visore {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden; background: rgb(12 19 38); color: var(--bianco);
}
.visore::backdrop { background: rgb(12 19 38 / .6); }
.visore[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); animation: visore-entra 260ms var(--ease-out); }
@keyframes visore-entra { from { opacity: 0; } }
.visore__barra {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(10px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) 10px max(14px, env(safe-area-inset-left, 0px));
}
.visore__conta { margin: 0; font: 500 .9rem/1.3 var(--sans); color: rgb(255 255 255 / .88); }
.visore__chiudi, .visore__freccia {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: rgb(255 255 255 / .13); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out), background-color .2s ease;
}
.visore__chiudi img, .visore__freccia img { filter: brightness(0) invert(1); }
.visore__chiudi img { width: 16px; height: 16px; }
.visore__freccia img { width: 10px; height: 16px; }
.visore__chiudi:active { transform: scale(.92); }
.visore__scena {
  position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; min-height: 0;
  padding: 0 0 max(16px, env(safe-area-inset-bottom, 0px)); touch-action: pan-y pinch-zoom;
}
.visore__img {
  width: 100%; height: 100%; object-fit: contain;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
}
.visore__freccia { position: absolute; top: 50%; transform: translateY(-50%); }
.visore__freccia--prima { left: max(10px, env(safe-area-inset-left, 0px)); }
.visore__freccia--dopo { right: max(10px, env(safe-area-inset-right, 0px)); }
.visore__freccia:active { transform: translateY(-50%) scale(.92); }
@media (min-width: 760px) {
  .visore__scena { padding: 0 92px 36px; }
  .visore__freccia { width: 52px; height: 52px; }
  .visore__freccia--prima { left: 22px; }
  .visore__freccia--dopo { right: 22px; }
}
@media (hover: hover) and (pointer: fine) {
  .visore__chiudi:hover, .visore__freccia:hover { background: rgb(255 255 255 / .24); }
}
@media (prefers-reduced-motion: reduce) {
  .album[open] { animation-name: visore-entra; }
  .album__foto img, .album__chiudi, .album__ambienti button, .visore__chiudi, .visore__freccia { transition-duration: .01s; }
  .album__foto:active img, .album__chiudi:active, .album__ambienti button:active, .visore__chiudi:active { transform: none; }
  .visore__freccia:active { transform: translateY(-50%); }
}

/* ── area ospiti dal pannello (6-ter, 03/11/2026): le foto dell'ingresso, i codici, il wifi, l'avviso del link ── */
.guida__foto { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; margin-top: 16px; }
.guida__foto figure { margin: 0; }
.guida__foto img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: var(--ombra-lieve); }
.guida__foto figcaption { margin-top: 6px; font-size: .9rem; line-height: 1.45; color: var(--titoli); }
.codici, .wifi { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.codici li, .wifi li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 12px 16px; border: 1px solid var(--linea); border-radius: 14px; background: var(--bianco); }
.codici strong { font-family: var(--serif); font-size: 1.5rem; letter-spacing: .06em; color: var(--titoli); overflow-wrap: anywhere; }
.wifi strong { flex-basis: 100%; color: var(--titoli); }
.wifi span { overflow-wrap: anywhere; }
.accesso__avviso { padding: 12px 14px; border-radius: 12px; background: var(--bianco); border: 1px solid var(--linea); }

/* ══ 5 STEP (04/11/2026) ═════════════════════════════════════════════════════════════════════════════════════════════
   1 · Il logo nuovo «Giampiero’s Rooms Napoli», col motto «Feel the soul of Naples» dentro, sotto il nome (voci 1-3).
   Il motto si deve leggere nella testata e nel fondo, a 390 e a 1440 px: il logo si allarga quanto basta perché le sue
   maiuscole siano alte almeno 7 px (il motto è il 3,3% della larghezza del logo), nella testata alta come prima (76 px).
   Da telefono lascia il posto al menu, al pulsante della guida e, dal 9-ter, alle lingue: sotto i 390 px cala da solo. */
.testata__logo img { width: min(220px, calc(100vw - 170px)); }
@media (min-width: 760px) { .testata__logo img { width: 226px; } }
@media (min-width: 1300px) { .testata__logo img { width: clamp(180px, 15.7vw, 226px); } }
.testata--scorsa .testata__logo img { transform: scale(.94); }
/* sulla foto della hero il logo bianco ha un'ombra leggera: il motto, sottile, resta leggibile anche sul cielo chiaro */
html:not(.menu-aperto) body:has(main > .hero:first-child) .testata:not(.testata--scorsa) .testata__logo img { filter: brightness(0) invert(1) drop-shadow(0 1px 6px rgb(12 19 38 / .55)); }
.piede__logo img { width: 260px; }
@media (min-width: 900px) { .piede__logo img { width: 260px; } }

/* 2 · Un vantaggio della prenotazione diretta con un collegamento dentro («ricevi l’offerta», voce 8): testo e link
   sulla stessa riga, l'icona del kit a sinistra come nelle altre voci. */
.diretti li:has(> a) { display: block; padding-left: 42px; }
.diretti li:has(> a)::before { position: absolute; left: 0; top: 50%; margin-top: -16px; }
.diretti li:has(> a) a { color: var(--notte); font-weight: 600; text-underline-offset: 3px; text-decoration-color: var(--grigio); }
@media (min-width: 760px) {
  .diretti li:has(> a) { padding-left: 60px; padding-top: 14px; padding-bottom: 14px; }
  .diretti li:has(> a)::before { margin-top: -23px; }
}

/* 3 · Le guide dell'area ospiti: «Da sapere in casa» e «Gite da Napoli» (voci 15, 18, 19, 22, 23, 27, 31, 32), con le
   schede dei «Servizi da prenotare» (icona del kit in un cerchio, titolo, testo, link). Una colonna da telefono; da
   computer due, e tre per le cinque schede di «Da sapere in casa», dove la macchina del caffè coi suoi sette passi è
   alta due righe: nessuna scheda resta da sola in fondo. */
.schede-guida__griglia { display: grid; gap: 14px; margin-top: 22px; align-items: stretch; }
.scheda-guida { gap: 10px; }
.scheda-guida .servizio__testa img, .riquadri--guida .riquadro img, .schede-guida .titolo-icona img { object-fit: contain; }
.scheda-guida .passaggi { margin-top: 4px; }
.scheda-guida .passaggi li { font-size: .95rem; }
.scheda-guida__link { margin-top: 2px; }
.scheda-guida__link:first-of-type { margin-top: auto; padding-top: 4px; }
.scheda-guida__link a { font-weight: 500; }
.schede-guida__griglia + p { margin-top: 26px; }
@media (min-width: 760px) {
  .schede-guida__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .schede-guida__griglia:has(> :nth-child(5):last-child) > :nth-child(3) { grid-row: span 2; }
  .schede-guida__griglia:has(> :nth-child(4):last-child) { max-width: 980px; }
}
@media (min-width: 1100px) {
  .schede-guida__griglia:has(> :nth-child(5):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 4 · Il wifi delle guide (voci 20 e 21): accanto a ogni rete, «Copia la password» (area-ospiti.js); per due secondi
   la scritta diventa «Password copiata». */
.wifi li { align-items: center; }
.sezione__testo > .wifi + p { margin-top: 12px; }
.wifi__copia {
  margin-left: auto; min-height: 42px; padding: 8px 16px; border: 1px solid var(--linea-calda); border-radius: 999px;
  background: var(--bianco); color: var(--titoli); font: inherit; font-size: .88rem; font-weight: 500; cursor: pointer;
  user-select: none; -webkit-user-select: none; transition: background-color .2s ease, color .2s ease, transform 160ms var(--ease-out);
}
.wifi__copia:active { transform: scale(.97); }
.wifi__copia--fatto { background: var(--notte); border-color: var(--notte); color: var(--bianco); }
@media (hover: hover) and (pointer: fine) { .wifi__copia:not(.wifi__copia--fatto):hover { background: var(--carta); } }
@media (prefers-reduced-motion: reduce) { .wifi__copia { transition-duration: .01s; } .wifi__copia:active { transform: none; } }

/* 9-ter (05/11/2026) · il menù a tendina delle lingue nello stile della testata: lingue.css del kit, con le variabili
   del sito. Chiuso, la sigla in una pillola come i bordi del sito; aperto, l'elenco come le tendine di via Foria e
   Capodimonte (bianco, bordo leggero, ombra). Sempre visibile, anche da telefono, accanto al pulsante del menu. */
details.lingue {
  --thk-lingue-pulsante-testo: var(--testo);
  --thk-lingue-bordo: var(--linea-calda);
  --thk-lingue-fondo: var(--bianco);
  --thk-lingue-testo: var(--testo);
  --thk-lingue-evidenza: var(--carta);
  --thk-lingue-fuoco: var(--titoli);
  font-family: var(--sans); font-size: .85rem;
}
details.lingue > summary { padding: 0 .8em; letter-spacing: .05em; transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
details.lingue[open] > summary { color: var(--titoli); border-color: var(--tratto); background: var(--carta); }
details.lingue > ul { min-width: 10.5em; font-size: .9rem; border: 1px solid var(--linea); box-shadow: var(--ombra); }
details.lingue > ul a[aria-current="true"] { color: var(--titoli); }
@media (hover: hover) and (pointer: fine) {
  details.lingue > summary:hover { color: var(--titoli); border-color: var(--tratto); }
  details.lingue > ul a:hover { color: var(--titoli); }
}
@media (max-width: 359px) { details.lingue > summary { padding: 0 .6em; } }

/* 9-ter · audit 7-bis delle lingue (AUDIT-PANNELLO-2026-11-05-LINGUE.md), 05/11/2026 */
/* L·M1: sopra la foto di testa il pulsante delle lingue è bianco come logo, menu e «Area ospiti», su un velo scuro */
html:not(.menu-aperto) body:has(main > .hero:first-child) .testata:not(.testata--scorsa) details.lingue:not([open]) > summary {
  color: rgb(255 255 255 / .95); border-color: rgb(255 255 255 / .7); background: rgb(12 19 38 / .32);
  text-shadow: 0 1px 12px rgb(12 19 38 / .35);
}
@media (hover: hover) and (pointer: fine) {
  html:not(.menu-aperto) body:has(main > .hero:first-child) .testata:not(.testata--scorsa) details.lingue:not([open]) > summary:hover { color: var(--bianco); border-color: var(--bianco); background: rgb(12 19 38 / .45); }
}
/* L·M2: una parola più larga del telefono (il tedesco «Datenschutzerklärung») va a capo, col trattino dove la lingua lo vuole */
html:not([lang="it"]) :is(h1, h2, h3) { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
/* L·P5: da tablet i testi più lunghi vanno a capo invece di uscire di lato (vale anche per l'italiano a 1100 px) */
.numero__cifra { white-space: normal; }
@media (min-width: 900px) {
  .dove__mappa-col h2 { white-space: normal; }
  .ospiti { min-width: 0; }
  .ospiti__case { flex-wrap: wrap; }
  .ospiti__case a { white-space: normal; }
}
/* L·P5, riprova del 05/11/2026: il nome della casa nelle schede delle camere va a capo dentro la scheda (a 1100 px
   usciva di 48 px e la pagina scorreva di lato, in tutte le lingue); da 900 a 1099 px le due schede dell'arrivo vanno
   una sotto l'altra, così stanno nella loro colonna anche in tedesco («Wegbeschreibung») */
.camera__dove { display: block; max-width: 100%; padding-left: 15px; text-indent: -15px; }
.camera__dove img { display: inline-block; vertical-align: -.08em; margin-right: 6px; text-indent: 0; }
@media (min-width: 900px) {
  .arrivare__riquadri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arrivo__testo { min-width: 0; }
  .arrivo__testo strong, .arrivo__testo span { overflow-wrap: break-word; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .arrivare__riquadri { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}