/* ==========================================================================
   Sant'Elena Rooms — foglio di stile
   Realizzato da The Sella

   Indice
   1.  Variabili e impostazioni di base
   2.  Tipografia
   3.  Impianto di pagina
   4.  Pulsanti
   5.  Intestazione, tendine e menu su telefono
   6.  Apertura della home
   7.  Testata delle pagine interne
   8.  La struttura
   9.  Carte delle camere
   10. Banda "I nostri spazi"
   11. Servizi e regole
   12. Fisarmoniche (pannelli richiudibili)
   13. Posizione
   14. Recensioni
   15. Descrizione e riquadro delle pagine interne
   16. Galleria e visore fotografico
   17. Rimando all'altra camera
   18. Contatti
   19. Piè di pagina e barra su telefono
   20. Pagina non trovata
   21. Selettore di lingua
   22. Animazioni e accessibilità

   I caratteri sono dichiarati in testa a ciascuna pagina HTML, non qui:
   così il browser li scopre prima di leggere questo file.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Variabili e impostazioni di base
   --------------------------------------------------------------------------- */

:root{
  color-scheme: light;

  /* Colori: calce fredda delle pareti, ottone e salvia presi dagli arredi */
  --avorio:      #EFF0EC;
  --avorio-scuro:#E6E8E2;
  --bianco:      #F7F8F5;
  --inchiostro:  #171A18;
  --grafite:     #2E332F;
  --ottone:      #8C7439;
  --salvia:      #6F7D66;
  --muto:        #646B63;
  --hairline:    rgba(23,26,24,.15);
  --hairline-forte: rgba(23,26,24,.28);

  /* Tipografia: antica di stampo garaldo per i titoli, geometrica per il testo */
  --serif: "EB Garamond", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --sans:  "Jost", "Futura", "Century Gothic", "Avenir Next", -apple-system, sans-serif;

  /* Misure */
  --gutter: clamp(20px, 5vw, 64px);
  --max:    1240px;
  --max-testo: 64ch;
  --altezza-intestazione: 72px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--avorio);
  color:var(--inchiostro);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

/* ---------------------------------------------------------------------------
   2. Tipografia
   --------------------------------------------------------------------------- */

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.14;
  letter-spacing:0;
  margin:0;
  text-wrap:balance;
}

.occhiello{
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ottone);
  margin:0 0 16px;
}

.titolo-sezione{ font-size:clamp(2.35rem, 6.8vw, 3.9rem); }

.sommario{
  font-size:clamp(1.02rem, 2.4vw, 1.12rem);
  color:var(--muto);
  max-width:var(--max-testo);
  margin:20px 0 0;
}
.sommario:first-of-type{ margin-top:0; }

.intestazione-sezione{ margin-bottom:clamp(36px, 5vw, 56px); }

.nota-fonte{
  margin-top:26px;
  font-size:.78rem;
  color:var(--muto);
  max-width:var(--max-testo);
}
.nota-fonte a{ color:var(--muto); text-underline-offset:3px; }

.briciole{
  font-size:11px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin:0 0 18px;
  color:rgba(255,255,255,.78);
}
.briciole a{ text-decoration:none; border-bottom:1px solid rgba(255,255,255,.4); }
.briciole a:hover{ border-bottom-color:#fff; }
.briciole span{ margin:0 6px; }

/* ---------------------------------------------------------------------------
   3. Impianto di pagina
   --------------------------------------------------------------------------- */

.contenitore{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

section{ padding-block:clamp(64px, 10vw, 116px); }
section[id]{ scroll-margin-top:calc(var(--altezza-intestazione) + 4px); }

/* ---------------------------------------------------------------------------
   4. Pulsanti
   --------------------------------------------------------------------------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 26px;
  font-family:var(--sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  border:1px solid transparent;
  transition:background-color .3s ease, color .3s ease, border-color .3s ease;
  cursor:pointer;
  text-align:center;
}
.btn svg{ width:15px; height:15px; flex:none; }

.btn-pieno{ background:var(--inchiostro); color:var(--avorio); border-color:var(--inchiostro); }
.btn-pieno:hover{ background:var(--ottone); border-color:var(--ottone); color:#fff; }

.btn-vuoto{ background:transparent; color:var(--inchiostro); border-color:var(--hairline-forte); }
.btn-vuoto:hover{ border-color:var(--inchiostro); background:var(--inchiostro); color:var(--avorio); }

.btn-chiaro{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.5); backdrop-filter:blur(6px); }
.btn-chiaro:hover{ background:#fff; color:var(--inchiostro); border-color:#fff; }

/* ---------------------------------------------------------------------------
   5. Intestazione, tendine e menu su telefono
   --------------------------------------------------------------------------- */

.intestazione{
  position:fixed;
  inset:0 0 auto 0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:var(--altezza-intestazione);
  padding:12px var(--gutter);
  max-width:100vw;
  background:rgba(239,240,236,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline);
  transform:translateY(-102%);
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.intestazione.visibile{ transform:translateY(0); }

/* Nelle pagine interne l'intestazione resta sempre in vista */
.intestazione--fissa{ transform:none; }
.intestazione--fissa ~ main .testata{ padding-top:calc(var(--altezza-intestazione) + 28px); }

.intestazione__marchio{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:none; }
.intestazione__marchio img{ height:30px; width:auto; }
.intestazione__nome{
  font-family:var(--serif);
  font-size:1.05rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}

.navigazione{ display:none; align-items:center; gap:22px; }

/* La soglia non e' scelta a occhio: e' la larghezza minima misurata perche'
   marchio, menu e pulsanti stiano in riga nella lingua piu' lunga (spagnolo,
   1152 px). Sotto, il menu a tutto schermo. */
@media (min-width:1180px){ .navigazione{ display:flex; } }

.navigazione > a,
.tendina__pulsante{
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--muto);
  padding:6px 0;
  border:0;
  border-bottom:1px solid transparent;
  background:none;
  cursor:pointer;
  transition:color .25s ease, border-color .25s ease;
  white-space:nowrap;
}
.navigazione > a:hover,
.tendina__pulsante:hover{ color:var(--inchiostro); border-bottom-color:var(--ottone); }
.navigazione .corrente{ color:var(--inchiostro); border-bottom-color:var(--ottone); }

/* Tendina */
.tendina{ position:relative; }
.tendina__pulsante{ display:inline-flex; align-items:center; gap:5px; }
.tendina__pulsante svg{
  width:13px; height:13px;
  stroke:currentColor; stroke-width:1.6; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .25s ease;
}
.tendina.aperta .tendina__pulsante svg{ transform:rotate(180deg); }
.tendina--attiva .tendina__pulsante{ color:var(--inchiostro); border-bottom-color:var(--ottone); }

.tendina__pannello{
  position:absolute;
  top:calc(100% + 14px);
  left:50%;
  transform:translateX(-50%);
  min-width:270px;
  z-index:70;
  display:flex;
  flex-direction:column;
  background:var(--bianco);
  border:1px solid var(--hairline);
  box-shadow:0 18px 44px rgba(23,26,24,.12);
}
.tendina__pannello[hidden]{ display:none; }

.tendina__pannello a{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:14px 20px;
  text-decoration:none;
  border-bottom:1px solid var(--hairline);
  transition:background-color .22s ease;
}
.tendina__pannello a:last-child{ border-bottom:0; }
.tendina__pannello a:hover{ background:var(--avorio-scuro); }
.tendina__nome{ font-family:var(--serif); font-size:1.1rem; line-height:1.25; }
.tendina__nota{
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muto);
}
.tendina__pannello a.corrente .tendina__nome{ color:var(--ottone); }

.intestazione__azioni{ display:flex; align-items:center; gap:10px; flex:none; }
.intestazione .btn{ padding:11px 20px; font-size:11px; }

@media (max-width:640px){
  .intestazione{ gap:12px; padding-inline:16px; }
  .intestazione__nome{ font-size:.92rem; letter-spacing:.06em; }
  .intestazione__azioni .btn{ display:none; }
}
@media (max-width:380px){ .intestazione__nome{ display:none; } }

/* Pulsante e pannello del menu su telefono */
.apri-menu{
  display:grid;
  place-items:center;
  width:42px; height:42px;
  padding:0;
  border:1px solid var(--hairline-forte);
  background:transparent;
  color:var(--inchiostro);
  cursor:pointer;
  flex:none;
}
.apri-menu svg{ width:18px; height:18px; stroke:currentColor; stroke-width:1.4; fill:none; stroke-linecap:round; }
@media (min-width:1180px){ .apri-menu{ display:none; } }

.menu{
  position:fixed;
  inset:0;
  z-index:90;
  display:none;
  flex-direction:column;
  background:var(--avorio);
  padding:16px var(--gutter) 36px;
  overflow-y:auto;
}
.menu.aperto{ display:flex; }
@media (min-width:1180px){ .menu{ display:none !important; } }

.menu__testa{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-bottom:20px;
  border-bottom:1px solid var(--hairline);
}
.menu__testa img{ height:34px; width:auto; }
.chiudi-menu{
  width:42px; height:42px;
  display:grid; place-items:center;
  padding:0;
  border:1px solid var(--hairline-forte);
  background:transparent;
  color:var(--inchiostro);
  cursor:pointer;
  flex:none;
}
.chiudi-menu svg{ width:18px; height:18px; stroke:currentColor; stroke-width:1.4; fill:none; stroke-linecap:round; }

.menu__voci{ display:flex; flex-direction:column; margin-top:6px; }
.menu__voci a{
  font-family:var(--serif);
  font-size:1.55rem;
  line-height:1.3;
  text-decoration:none;
  padding:13px 0;
  border-bottom:1px solid var(--hairline);
  color:var(--inchiostro);
}
.menu__gruppo{
  margin:22px 0 2px;
  font-size:10px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ottone);
}
.menu__gruppo + a,
.menu__gruppo + a + a{ padding-left:18px; position:relative; }
.menu__gruppo + a::before,
.menu__gruppo + a + a::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:8px; height:1px;
  background:var(--ottone);
}
.menu__azioni{ display:flex; flex-direction:column; gap:10px; margin-top:32px; padding-top:8px; }
.menu__azioni .btn{ width:100%; }

/* ---------------------------------------------------------------------------
   6. Apertura della home
   --------------------------------------------------------------------------- */

.apertura{
  position:relative;
  min-height:min(86svh, 760px);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  padding:96px var(--gutter) 60px;
}

.apertura__sfondo{ position:absolute; inset:0; z-index:0; }
.apertura__sfondo img{
  width:100%; height:100%;
  object-fit:cover;
  animation:respiro 26s ease-in-out infinite alternate;
}
@keyframes respiro{ from{ transform:scale(1.02); } to{ transform:scale(1.11); } }
@media (prefers-reduced-motion: reduce){ .apertura__sfondo img{ animation:none; } }

.apertura__velo{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(12,11,9,.56) 0%, rgba(12,11,9,.24) 34%,
                                     rgba(12,11,9,.30) 62%, rgba(12,11,9,.72) 100%);
}

.apertura__contenuto{ position:relative; z-index:2; color:#fff; width:100%; }

.anim .apertura__logo,
.anim .apertura h1,
.anim .apertura__luogo,
.anim .apertura__frase,
.anim .apertura__azioni{ opacity:0; }

.apertura__logo{
  width:clamp(128px, 23vw, 180px);
  margin:0 auto 28px;
  animation:entra .95s cubic-bezier(.16,1,.3,1) .15s forwards;
}
.apertura h1{
  font-size:clamp(3rem, 9.6vw, 5.6rem);
  letter-spacing:.01em;
  margin:0;
  animation:entra .95s cubic-bezier(.16,1,.3,1) .3s forwards;
}
.apertura__luogo{
  margin:18px 0 0;
  font-size:11px;
  font-weight:500;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:rgba(255,255,255,.84);
  animation:entra .95s cubic-bezier(.16,1,.3,1) .45s forwards;
}
.apertura__frase{
  margin:24px auto 0;
  max-width:44ch;
  font-family:var(--serif);
  font-size:clamp(1.22rem, 3.4vw, 1.62rem);
  font-style:italic;
  line-height:1.5;
  color:rgba(255,255,255,.93);
  animation:entra .95s cubic-bezier(.16,1,.3,1) .58s forwards;
}
.apertura__azioni{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
  margin-top:36px;
  animation:entra .95s cubic-bezier(.16,1,.3,1) .72s forwards;
}
@media (max-width:540px){
  .apertura__azioni{ flex-direction:column; align-items:center; }
  .apertura__azioni .btn{ width:min(100%, 290px); }
}

@keyframes entra{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .apertura__logo,.apertura h1,.apertura__luogo,.apertura__frase,.apertura__azioni{
    animation:none; opacity:1;
  }
}

/* ---------------------------------------------------------------------------
   7. Testata delle pagine interne
   --------------------------------------------------------------------------- */

.testata{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:min(56svh, 480px);
  overflow:hidden;
  padding:var(--gutter);
  padding-block-end:clamp(34px, 5vw, 52px);
}
.testata__sfondo{ position:absolute; inset:0; z-index:0; }
.testata__sfondo img{ width:100%; height:100%; object-fit:cover; }
.testata__velo{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(12,11,9,.58) 0%, rgba(12,11,9,.18) 44%, rgba(12,11,9,.76) 100%);
}
.testata__contenuto{
  position:relative; z-index:2;
  color:#fff;
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
}
.testata h1{ font-size:clamp(2.4rem, 7vw, 4.2rem); }
.testata__nota{
  margin:14px 0 0;
  font-size:11px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.82);
}

/* ---------------------------------------------------------------------------
   8. La struttura
   --------------------------------------------------------------------------- */

.struttura__testo{
  display:grid;
  gap:20px clamp(32px, 5vw, 64px);
  margin-top:24px;
}
@media (min-width:860px){ .struttura__testo{ grid-template-columns:1fr 1fr; } }
.struttura__testo .sommario{ margin-top:0; }

.fatti{
  list-style:none;
  margin:clamp(34px, 5vw, 52px) 0 0;
  padding:0;
  display:grid;
  gap:1px;
  background:var(--hairline);
  border:1px solid var(--hairline);
}
@media (min-width:640px){ .fatti{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:1000px){ .fatti{ grid-template-columns:repeat(4, 1fr); } }
.fatti li{
  background:var(--avorio);
  padding:20px 22px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.fatti .etichetta{
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muto);
}
.fatti .valore{ font-family:var(--serif); font-size:1.25rem; line-height:1.3; }

/* ---------------------------------------------------------------------------
   9. Carte delle camere
   --------------------------------------------------------------------------- */

.camere{ background:var(--avorio-scuro); }

.carte-camere{
  display:grid;
  gap:clamp(28px, 4vw, 40px);
}
@media (min-width:880px){ .carte-camere{ grid-template-columns:repeat(2, 1fr); } }

.carta-camera{
  display:flex;
  flex-direction:column;
  background:var(--avorio);
  border:1px solid var(--hairline);
}
.carta-camera__media{ display:block; overflow:hidden; }
.carta-camera__media img{ width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform .7s cubic-bezier(.16,1,.3,1); }
.carta-camera:hover .carta-camera__media img{ transform:scale(1.04); }

.carta-camera__corpo{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:clamp(24px, 3.4vw, 34px);
  flex:1;
}
.carta-camera__corpo .occhiello{ margin-bottom:10px; }
.carta-camera h3{ font-size:clamp(1.7rem, 3.6vw, 2.2rem); }
.carta-camera__letti{
  margin:10px 0 0;
  font-size:11px;
  letter-spacing:.12em;
  line-height:1.7;
  text-transform:uppercase;
  color:var(--ottone);
}
.carta-camera__testo{ margin:16px 0 0; color:var(--muto); font-size:.98rem; }
.carta-camera .btn{ margin-top:auto; align-self:flex-start; }
.carta-camera__testo + .btn{ margin-top:26px; }

/* ---------------------------------------------------------------------------
   10. Banda "I nostri spazi"
   --------------------------------------------------------------------------- */

.banda{
  display:grid;
  padding:0;
  background:var(--inchiostro);
  color:var(--avorio);
}
@media (min-width:880px){ .banda{ grid-template-columns:1fr 1fr; } }

.banda__media img{ width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; }
@media (min-width:880px){ .banda__media img{ aspect-ratio:auto; min-height:100%; } }

.banda__corpo{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:0;
  padding:clamp(44px, 7vw, 92px) var(--gutter);
}
.banda__corpo .sommario{ color:rgba(239,240,236,.72); }
.banda__corpo .btn{ margin-top:32px; }
.banda__corpo .btn-vuoto{ color:var(--avorio); border-color:rgba(239,240,236,.4); }
.banda__corpo .btn-vuoto:hover{ background:var(--avorio); color:var(--inchiostro); border-color:var(--avorio); }

/* ---------------------------------------------------------------------------
   11. Servizi e regole
   --------------------------------------------------------------------------- */

.servizi__griglia{
  display:grid;
  /* Colonne fisse, non auto-fit: i servizi sono sei, e con quattro colonne
     resterebbero due celle vuote in fondo alla griglia. */
  grid-template-columns:repeat(2, 1fr);
  gap:1px;
  background:var(--hairline);
  border:1px solid var(--hairline);
}
@media (min-width:760px){ .servizi__griglia{ grid-template-columns:repeat(3, 1fr); } }
.servizio{
  background:var(--avorio);
  padding:clamp(16px, 4vw, 24px) clamp(14px, 3.6vw, 22px);
  display:flex;
  flex-direction:column;
  gap:11px;
  transition:background-color .35s ease;
}
.servizio:hover{ background:var(--bianco); }
.servizio svg{ width:22px; height:22px; stroke:var(--ottone); stroke-width:1.2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.servizio h3{ font-family:var(--sans); font-size:.92rem; font-weight:500; line-height:1.4; }
.servizio p{ margin:0; font-size:.84rem; color:var(--muto); line-height:1.55; }

.regole{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(clamp(150px, 42vw, 200px), 1fr));
  gap:26px 34px;
}
.regola h4{
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muto);
  margin:0 0 8px;
}
.regola p{ margin:0; font-size:.92rem; }
.regola .orario{ font-family:var(--serif); font-size:1.5rem; line-height:1.2; }

/* ---------------------------------------------------------------------------
   12. Fisarmoniche (pannelli richiudibili)
   --------------------------------------------------------------------------- */

.tendine{ margin-top:clamp(28px, 4vw, 40px); display:grid; gap:1px; background:var(--hairline); border:1px solid var(--hairline); }

.fisarmonica{ background:var(--avorio); }
.fisarmonica summary{
  display:flex;
  align-items:center;
  gap:14px;
  padding:19px 22px;
  cursor:pointer;
  list-style:none;
  transition:background-color .25s ease;
}
.fisarmonica summary::-webkit-details-marker{ display:none; }
.fisarmonica summary:hover{ background:var(--bianco); }
.fisarmonica__titolo{
  font-family:var(--sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.fisarmonica__nota{
  font-size:11px;
  letter-spacing:.06em;
  color:var(--muto);
  margin-left:auto;
  text-align:right;
}
.fisarmonica__segno{
  width:16px; height:16px; flex:none;
  stroke:var(--ottone); stroke-width:1.6; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .3s ease;
}
.fisarmonica[open] > summary .fisarmonica__segno{ transform:rotate(180deg); }
.fisarmonica[open] > summary{ background:var(--bianco); }

.fisarmonica__corpo{ padding:4px 22px 26px; }
.fisarmonica__corpo .servizi__griglia{ border:0; margin-top:8px; }
.fisarmonica__corpo .distanze{ margin-top:0; border-top:0; }
@media (prefers-reduced-motion: no-preference){
  .fisarmonica[open] .fisarmonica__corpo{ animation:apriPannello .4s cubic-bezier(.16,1,.3,1); }
}
@keyframes apriPannello{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }

/* ---------------------------------------------------------------------------
   13. Posizione
   --------------------------------------------------------------------------- */

.posizione{ background:var(--avorio-scuro); }
.posizione .griglia{ display:grid; gap:clamp(32px, 5vw, 68px); align-items:center; }
@media (min-width:900px){ .posizione .griglia{ grid-template-columns:.9fr 1.1fr; } }

.posizione figure{ margin:0; }
.posizione figure img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
@media (max-width:899px){ .posizione figure img{ aspect-ratio:4/3; } }

.indirizzo{
  font-family:var(--serif);
  font-size:clamp(1.4rem, 4vw, 1.85rem);
  line-height:1.35;
  margin:22px 0 0;
}

.distanze{
  list-style:none;
  margin:28px 0 0;
  padding:0;
  border-top:1px solid var(--hairline);
  column-gap:40px;
}
@media (min-width:560px){ .distanze{ columns:2; } }
.distanze li{ break-inside:avoid; }
.distanze li{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:18px;
  padding:11px 0;
  border-bottom:1px solid var(--hairline);
  font-size:.92rem;
}
.distanze .km{ color:var(--ottone); font-variant-numeric:tabular-nums; white-space:nowrap; }

.posizione__azioni{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

/* ---------------------------------------------------------------------------
   14. Recensioni
   --------------------------------------------------------------------------- */

.valutazioni{ background:var(--inchiostro); color:var(--avorio); }
.valutazioni .occhiello{ color:var(--ottone); }
.valutazioni .sommario{ color:rgba(239,240,236,.68); }

.valutazioni__griglia{ display:grid; gap:clamp(38px, 5vw, 72px); align-items:center; }
@media (min-width:900px){ .valutazioni__griglia{ grid-template-columns:.85fr 1.15fr; } }

.punteggio-grande{ display:flex; align-items:baseline; gap:14px; margin:28px 0 0; }
.punteggio-grande span:first-child{
  font-family:var(--serif);
  font-size:clamp(4.4rem, 14vw, 6.6rem);
  line-height:.92;
  font-variant-numeric:tabular-nums;
}
.punteggio-grande span:last-child{
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(239,240,236,.6);
  line-height:1.7;
}

.azioni-sinistra{ display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-start; margin-top:34px; }

.barre{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:18px 44px; }
.barra__testa{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:9px;
}
.barra__testa span:last-child{ font-family:var(--serif); font-size:1.15rem; letter-spacing:0; text-transform:none; }
.barra__pista{ height:1px; background:rgba(239,240,236,.22); position:relative; overflow:hidden; }
.barra__riempimento{
  position:absolute; inset:0 auto 0 0;
  height:100%;
  background:var(--ottone);
  width:0;
  transition:width 1.2s cubic-bezier(.16,1,.3,1);
}
@media (prefers-reduced-motion: reduce){ .barra__riempimento{ transition:none; } }

/* ---------------------------------------------------------------------------
   15. Descrizione e riquadro delle pagine interne
   --------------------------------------------------------------------------- */

.descrizione__griglia{ display:grid; gap:clamp(34px, 5vw, 64px); align-items:start; }
@media (min-width:900px){ .descrizione__griglia{ grid-template-columns:1.25fr .75fr; } }

.riquadro{
  background:var(--bianco);
  border:1px solid var(--hairline);
  padding:clamp(26px, 3.4vw, 34px);
  position:sticky;
  top:calc(var(--altezza-intestazione) + 20px);
}
@media (max-width:899px){ .riquadro{ position:static; } }
.riquadro h2{
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muto);
  margin-bottom:18px;
}
.riquadro .btn{ width:100%; margin-top:26px; }
.riquadro__nota{ margin:16px 0 0; font-size:.78rem; color:var(--muto); line-height:1.55; }

.dotazioni{ list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:.9rem; }
.dotazioni li{ position:relative; padding-left:17px; color:var(--grafite); }
.dotazioni li::before{
  content:"";
  position:absolute; left:0; top:.66em;
  width:7px; height:1px;
  background:var(--ottone);
}

/* ---------------------------------------------------------------------------
   16. Galleria e visore fotografico
   --------------------------------------------------------------------------- */

.galleria{ background:var(--avorio-scuro); }

.galleria__griglia{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px;
}
@media (min-width:760px){ .galleria__griglia{ grid-template-columns:repeat(3, 1fr); gap:14px; } }

/* Con due colonne un numero dispari di foto lascia l'ultima spaiata:
   le si fa occupare l'intera riga. */
@media (max-width:759px){
  .galleria__griglia button:last-child:nth-child(odd){ grid-column:span 2; }
  .galleria__griglia button:last-child:nth-child(odd) img{ aspect-ratio:2/1; }
}

.galleria__griglia button{
  padding:0; border:0; background:none; cursor:pointer; overflow:hidden;
}
.galleria__griglia img{
  width:100%; height:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.16,1,.3,1), opacity .35s ease;
}
.galleria__griglia button:hover img{ transform:scale(1.06); opacity:.9; }

.visore{
  position:fixed; inset:0; z-index:100;
  display:none;
  align-items:center; justify-content:center;
  background:rgba(10,9,8,.96);
  padding:56px 16px;
}
.visore.aperto{ display:flex; }
.visore img{
  max-width:min(100%, 1180px);
  max-height:calc(100svh - 112px);
  width:auto;
  object-fit:contain;
}
.visore__chiudi,.visore__prec,.visore__succ{
  position:absolute;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.26);
  color:#fff;
  width:46px; height:46px;
  display:grid; place-items:center;
  cursor:pointer;
  transition:background-color .25s ease;
}
.visore__chiudi:hover,.visore__prec:hover,.visore__succ:hover{ background:rgba(255,255,255,.22); }
.visore__chiudi{ top:14px; right:14px; }
.visore__prec{ left:14px; top:50%; transform:translateY(-50%); }
.visore__succ{ right:14px; top:50%; transform:translateY(-50%); }
.visore__conta{
  position:absolute; bottom:18px; left:50%;
  transform:translateX(-50%);
  color:rgba(255,255,255,.72);
  font-size:11px; letter-spacing:.18em;
}
.visore svg{ width:18px; height:18px; stroke:currentColor; stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* ---------------------------------------------------------------------------
   17. Rimando all'altra camera
   --------------------------------------------------------------------------- */

.altra-camera__corpo{ display:grid; gap:clamp(28px, 4vw, 56px); align-items:center; }
@media (min-width:880px){ .altra-camera__corpo{ grid-template-columns:1fr 1fr; } }
.altra-camera__media{ display:block; overflow:hidden; }
.altra-camera__media img{ width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform .7s cubic-bezier(.16,1,.3,1); }
.altra-camera__media:hover img{ transform:scale(1.04); }
.altra-camera .btn{ margin-top:28px; }
.altra-camera .posizione__azioni{ margin-top:28px; }

/* ---------------------------------------------------------------------------
   18. Contatti
   --------------------------------------------------------------------------- */

.contatti{ text-align:center; }
.contatti .sommario{ margin-inline:auto; }
.contatti__azioni{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:34px; }
@media (max-width:540px){
  .contatti__azioni{ flex-direction:column; align-items:center; }
  .contatti__azioni .btn{ width:min(100%, 290px); }
}

.contatti__canali{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(clamp(140px, 40vw, 196px), 1fr));
  gap:1px;
  margin-top:clamp(42px, 5vw, 64px);
  background:var(--hairline);
  border:1px solid var(--hairline);
  text-align:left;
}
.canale{
  background:var(--avorio);
  padding:clamp(16px, 4vw, 22px);
  text-decoration:none;
  display:flex; flex-direction:column; gap:6px;
  transition:background-color .3s ease;
}
.canale:hover{ background:var(--bianco); }
.canale .etichetta{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muto); }
.canale .valore{ font-family:var(--serif); font-size:1.18rem; line-height:1.3; }

/* ---------------------------------------------------------------------------
   19. Piè di pagina e barra su telefono
   --------------------------------------------------------------------------- */

.pie{
  background:var(--inchiostro);
  color:rgba(239,240,236,.62);
  padding-block:clamp(48px, 6vw, 72px);
  padding-bottom:calc(clamp(48px, 6vw, 72px) + 64px);
  font-size:.82rem;
}
@media (min-width:900px){ .pie{ padding-bottom:clamp(48px, 6vw, 72px); } }

.pie__alto{
  display:flex; flex-wrap:wrap; gap:28px;
  align-items:center; justify-content:space-between;
  padding-bottom:26px;
  border-bottom:1px solid rgba(239,240,236,.16);
}
.pie__logo{ width:104px; }
.pie__navigazione{ display:flex; flex-wrap:wrap; gap:18px; }
.pie__navigazione a{
  color:rgba(239,240,236,.72);
  text-decoration:none;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:color .25s ease;
}
.pie__navigazione a:hover{ color:var(--ottone); }
.pie__basso{
  display:flex; flex-wrap:wrap; gap:12px 30px;
  justify-content:space-between;
  padding-top:24px;
  font-size:.76rem;
  color:rgba(239,240,236,.48);
}
.pie__basso p{ margin:0; }
.pie__basso a{ color:rgba(239,240,236,.62); text-underline-offset:3px; }

.barra-mobile{
  position:fixed; inset:auto 0 0 0; z-index:70;
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--hairline);
  border-top:1px solid var(--hairline);
  padding-bottom:env(safe-area-inset-bottom);
}
.barra-mobile a{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 10px;
  font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none;
}
.barra-mobile a svg{ width:15px; height:15px; }
.barra-mobile .prenota{ background:var(--inchiostro); color:var(--avorio); }
.barra-mobile .scrivi{ background:var(--avorio); color:var(--inchiostro); }
@media (min-width:900px){ .barra-mobile{ display:none; } }

/* ---------------------------------------------------------------------------
   20. Pagina non trovata
   --------------------------------------------------------------------------- */

.non-trovata{
  min-height:70svh;
  display:flex;
  align-items:center;
  padding-top:calc(var(--altezza-intestazione) + 40px);
}
.non-trovata .sommario{ margin-bottom:8px; }

/* ---------------------------------------------------------------------------
   21. Selettore di lingua

   Sta fra il marchio e il pulsante del menu. Riusa la tendina gia' presente,
   quindi non aggiunge JavaScript: cambia solo l'aspetto del pulsante e
   l'allineamento del pannello, che qui va ancorato a destra perche' il
   selettore e' vicino al bordo dello schermo.
   --------------------------------------------------------------------------- */

.tendina--lingua{ flex:none; }

.lingua__pulsante{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 11px;
  border:1px solid var(--hairline-forte);
  color:var(--inchiostro);
  letter-spacing:.1em;
}
.lingua__pulsante:hover{ border-color:var(--inchiostro); color:var(--inchiostro); }
.lingua__pulsante > svg:first-child{ width:15px; height:15px; opacity:.75; }
.lingua__attuale{ font-size:11px; font-weight:500; }
.tendina--lingua.aperta .lingua__pulsante{ border-color:var(--inchiostro); }

/* Ancorato a destra e piu' stretto: centrato, come le altre tendine,
   uscirebbe dallo schermo sui telefoni. */
.tendina__pannello--lingua{
  left:auto;
  right:0;
  transform:none;
  min-width:0;
  width:max-content;
  max-width:min(230px, calc(100vw - 24px));
}
.tendina__pannello--lingua a{
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px 18px;
}
.lingua__nome{ font-family:var(--serif); font-size:1.08rem; line-height:1.2; white-space:nowrap; }
.lingua__codice{ font-size:10px; font-weight:500; letter-spacing:.16em; color:var(--muto); }
.tendina__pannello--lingua a.corrente{ background:var(--avorio-scuro); }
.tendina__pannello--lingua a.corrente .lingua__nome{ color:var(--ottone); }

@media (max-width:400px){
  .lingua__pulsante{ padding:10px 8px; gap:4px; }
  .lingua__pulsante > svg:first-child{ display:none; }
}

/* ---------------------------------------------------------------------------
   22. Animazioni e accessibilità
   --------------------------------------------------------------------------- */

.anim .comparsa{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1);
}
.anim .comparsa.visibile{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .anim .comparsa{ opacity:1; transform:none; transition:none; }
}

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

.salta-al-contenuto{
  position:absolute;
  left:-9999px; top:0;
  z-index:200;
  background:var(--inchiostro);
  color:var(--avorio);
  padding:12px 20px;
  font-size:12px;
}
.salta-al-contenuto:focus{ left:12px; top:12px; }