/* RRRapido — stile, nel linguaggio di Hotel Principe di Savoia (Dorchester Collection).
   Rifatto il 7/10/2026 su richiesta di Oscar. Valori misurati dal vivo sulla reference:
   crema #FAF8F2, oro #8B6C26, testi sottili (peso 300), maiuscoletti a 12 px, bottoni a pillola.
   Il carattere della reference è Acumin Pro (Adobe, a licenza): qui c'è Hanken Grotesk, libero e vicino.
   La versione uguale a Framer è salvata in ../versione-framer/. */

:root {
  --carta: #ffffff;
  --crema: #faf8f2;
  --crema-scura: #f2eee3;
  --oro: #8b6c26;
  --oro-chiaro: rgba(139, 108, 38, .5);
  --nero: #000;
  --testo: #1a1a1a;
  --grigio: rgba(0, 0, 0, .5);
  --filo: rgba(0, 0, 0, .1);
  --margine: 40px;
  --facile: cubic-bezier(.25, .1, .25, 1);
  --lenta: cubic-bezier(.65, 0, .35, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Hanken Grotesk', 'Helvetica Neue', sans-serif; font-weight: 300; color: var(--nero); background: var(--carta); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
p { font-size: 16px; line-height: 1.5; letter-spacing: -0.02em; }

/* ---------- tipografia ricorrente (misure della reference) ---------- */
.occhiello { font-size: 12px; line-height: 1; letter-spacing: .02em; text-transform: uppercase; font-weight: 400; }
.occhiello.oro { color: var(--oro); font-size: 14px; letter-spacing: .05em; }
.titolo-1 { font-size: 36px; line-height: 40px; font-weight: 300; letter-spacing: -0.02em; max-width: 900px; }
.titolo-2 { font-size: 32px; line-height: 36px; font-weight: 300; letter-spacing: -0.02em; }
h3 { font-size: 24px; line-height: 28px; font-weight: 300; letter-spacing: -0.02em; }

.bottone { display: inline-flex; align-items: center; height: 40px; padding: 12px 24px 13px; border-radius: 9999px; background: var(--oro); color: #fff; font-size: 12px; font-weight: 400; letter-spacing: .02em; text-transform: uppercase; border: 0; cursor: pointer; transition: background .3s; }
.bottone:hover { background: #73591f; }

/* frecce e tondi: il segno ricorrente della reference */
.freccia { position: relative; display: inline-block; width: 14px; height: 1px; background: currentColor; }
.freccia::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.freccia--sx { transform: scaleX(-1); }
.tondo { width: 64px; height: 32px; border-radius: 9999px; border: 1px solid var(--filo); background: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--nero); transition: border-color .3s, background .3s; }
.tondo:hover { border-color: var(--oro); }
.tondo--oro { border-color: var(--oro-chiaro); color: var(--oro); }
.tondo-mini { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 9999px; border: 1px solid var(--oro-chiaro); color: var(--oro); transition: background .3s, color .3s; }
.scopri { display: inline-flex; align-items: center; gap: 16px; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; font-weight: 400; }
.scopri:hover .tondo-mini { background: var(--oro); color: #fff; }

/* ---------- entrate: dissolvenza lenta, salita breve ---------- */
[data-entra] { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--facile), transform 1.2s var(--facile); }
[data-entra].dentro { opacity: 1; transform: none; }
/* foto che si svelano: la cornice si apre e l'immagine si ridimensiona */
[data-svela] { clip-path: inset(8% 6% 8% 6%); transition: clip-path 1.4s var(--lenta); }
[data-svela] img { transform: scale(1.15); transition: transform 1.8s var(--lenta); }
[data-svela].dentro { clip-path: inset(0 0 0 0); }
[data-svela].dentro img { transform: scale(1); }

/* ================= TESTATA: una riga sola (14/10/2026) ================= */
.testata { position: fixed; inset: 0 0 auto; z-index: 50; height: 72px; padding: 0 var(--margine); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; background: #fff; border-bottom: 1px solid var(--filo); transition: box-shadow .3s, height .4s var(--facile); }
.testata__sx { display: flex; align-items: center; gap: 28px; }
.testata__dx { display: flex; align-items: center; justify-content: flex-end; gap: 28px; }
.menu-apri { display: flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; }
.tre-righe { display: flex; flex-direction: column; gap: 3px; }
.tre-righe i { display: block; width: 14px; height: 1px; background: var(--oro); transition: width .3s var(--facile); }
.menu-apri:hover .tre-righe i:nth-child(2) { width: 9px; }
.lingue { display: flex; gap: 10px; font-size: 12px; padding-right: 28px; border-right: 1px solid var(--filo); }
.lingue a { color: var(--grigio); }
.lingue a.attiva { color: var(--nero); }
.testata__logo img { height: 40px; width: auto; transition: height .4s var(--facile); }
.testata__voci { display: flex; gap: 28px; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; }
.testata__voci a { position: relative; padding: 4px 0; white-space: nowrap; }
.testata__voci a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--oro); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--facile); }
.testata__voci a:hover::after, .testata__voci a.qui::after { transform: scaleX(1); transform-origin: left; }
.testata.ridotta { height: 60px; box-shadow: 0 6px 24px rgba(0, 0, 0, .06); }
.testata.ridotta .testata__logo img { height: 32px; }

/* ================= MENU A TENDA ================= */
.menu { position: fixed; inset: 0; z-index: 60; visibility: hidden; transition: visibility 0s .6s; }
.menu.aperto { visibility: visible; transition: none; }
.menu__velo { position: absolute; inset: 0; background: rgba(0, 0, 0, .35); opacity: 0; transition: opacity .6s var(--facile); }
.menu.aperto .menu__velo { opacity: 1; }
.menu__pannello { position: absolute; top: 0; left: 0; bottom: 0; width: min(480px, 100%); background: var(--crema); padding: 32px var(--margine); display: flex; flex-direction: column; gap: 48px; transform: translateX(-100%); transition: transform .6s var(--lenta); overflow-y: auto; }
.menu.aperto .menu__pannello { transform: none; }
.menu__chiudi { align-self: flex-start; background: none; border: 0; cursor: pointer; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; }
.menu__voci { display: flex; flex-direction: column; }
.menu__voci a { font-size: 24px; line-height: 1; padding: 16px 0; border-bottom: 1px solid var(--filo); transition: color .3s, padding .3s; }
.menu__voci a:hover { color: var(--oro); padding-left: 8px; }
.menu__contatti { display: flex; flex-direction: column; gap: 24px; margin-top: auto; }
.menu__contatti div { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }

/* ================= 1 · APERTURA: foto che scorrono ================= */
.apertura { position: relative; margin-top: 72px; height: calc(100vh - 72px); min-height: 640px; overflow: hidden; color: #fff; }
.apertura__foto { position: absolute; inset: -10% 0 0; will-change: transform; }
.apertura__foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.2) 45%, rgba(0,0,0,.55) 100%); z-index: 1; }
.apertura__contenuto { position: absolute; z-index: 2; left: 0; right: 0; bottom: 64px; display: flex; flex-direction: column; align-items: center; gap: 48px; padding: 0 var(--margine); }
.apertura__titolo { width: min(1128px, 100%); font-size: 56px; line-height: 60px; font-weight: 300; letter-spacing: -0.03em; }
.apertura__titolo, .barra { animation: sale 1.4s var(--facile) .2s both; }
.barra { animation-delay: .5s; }
@keyframes sale { from { opacity: 0; transform: translateY(30px); } }
.parola-che-ruota { display: inline-block; vertical-align: bottom; font-style: italic; }
.parola-che-ruota span { display: inline-block; }
.parola-che-ruota span.entra { animation: parola .9s var(--facile) both; }
@keyframes parola { from { opacity: 0; transform: translateY(20px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* la giostra: una foto sopra l'altra, si dissolvono e respirano */
.giostra { overflow: hidden; }
.giro { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--facile); }
.giro.attiva { opacity: 1; z-index: 0; }
.giro img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.giro.attiva img { animation: respiro 9s linear both; }
@keyframes respiro { from { transform: scale(1.12); } to { transform: scale(1); } }
.divisa__foto.giostra { position: relative; }
.divisa__foto.giostra .giro img { transform: scale(1.04); }

/* le tacche in basso a destra: una per foto, si riempiono col tempo */
.apertura__indice { position: absolute; z-index: 2; right: var(--margine); top: 32px; display: flex; gap: 6px; }
.tacca { width: 36px; height: 20px; background: none; border: 0; cursor: pointer; display: flex; align-items: center; }
.tacca i { position: relative; display: block; width: 100%; height: 2px; background: rgba(255,255,255,.35); overflow: hidden; }
.tacca i::after { content: ''; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.tacca.vista i::after { transform: scaleX(1); }
.tacca.attiva i::after { animation: tacca var(--durata) linear both; }
@keyframes tacca { to { transform: scaleX(1); } }

.barra { animation: sale 1.4s var(--facile) .2s both; }
.barra { animation-delay: .5s; }
@keyframes sale { from { opacity: 0; transform: translateY(30px); } }
.parola-che-ruota { display: inline-block; vertical-align: bottom; font-style: italic; }
.parola-che-ruota span { display: inline-block; }
.parola-che-ruota span.entra { animation: parola .9s var(--facile) both; }
@keyframes parola { from { opacity: 0; transform: translateY(20px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

.barra { width: min(1128px, 100%); background: #fff; color: var(--testo); border-radius: 4px; padding: 10px 10px 10px 24px; display: flex; align-items: center; gap: 8px; box-shadow: 0 20px 40px rgba(0, 0, 0, .12); }
.barra__campo { flex: 1; display: flex; align-items: center; gap: 10px; font-size: 14px; letter-spacing: .01em; font-weight: 400; padding: 10px 12px; border-right: 1px solid var(--filo); }
.barra__campo:nth-last-child(2) { border-right: 0; }
.barra__campo select, .barra__campo input { border: 0; background: none; outline: none; width: 100%; font-size: 14px; font-weight: 400; cursor: pointer; appearance: none; }
.barra__invio { height: 48px; padding: 0 22px; border-radius: 9999px; border: 0; background: var(--oro); color: #fff; font-size: 14px; letter-spacing: .02em; text-transform: uppercase; font-weight: 400; cursor: pointer; transition: background .3s; }
.barra__invio:hover { background: #73591f; }
.icona { width: 16px; height: 16px; flex: none; border: 1px solid var(--testo); }
.icona--luogo { border-radius: 50% 50% 50% 0; transform: rotate(-45deg) scale(.8); }
.icona--data { border-radius: 2px; border-top-width: 3px; }
.icona--persone { border-radius: 50% 50% 4px 4px; }
.barra__data { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.barra__data small { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--grigio); line-height: 1.2; }
.barra__invio { display: inline-flex; align-items: center; gap: 10px; }
.icona-wa { width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 1.8a8.2 8.2 0 1 1-4.2 15.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 0 1 12 3.8zm-3.3 4.4c-.2 0-.5 0-.7.3-.3.3-1 1-1 2.4s1 2.8 1.2 3c.1.2 2 3.1 4.9 4.3 2.4 1 2.9.8 3.4.7.5 0 1.7-.7 1.9-1.4.2-.7.2-1.3.2-1.4l-.5-.3-1.8-.9c-.3-.1-.4-.1-.6.1l-.8 1c-.2.2-.3.2-.6.1-.3-.2-1.1-.4-2.1-1.3-.8-.7-1.3-1.6-1.5-1.8-.1-.3 0-.4.1-.5l.4-.5.3-.4v-.5l-.8-2c-.2-.5-.4-.5-.6-.5h-.4z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 1.8a8.2 8.2 0 1 1-4.2 15.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 0 1 12 3.8zm-3.3 4.4c-.2 0-.5 0-.7.3-.3.3-1 1-1 2.4s1 2.8 1.2 3c.1.2 2 3.1 4.9 4.3 2.4 1 2.9.8 3.4.7.5 0 1.7-.7 1.9-1.4.2-.7.2-1.3.2-1.4l-.5-.3-1.8-.9c-.3-.1-.4-.1-.6.1l-.8 1c-.2.2-.3.2-.6.1-.3-.2-1.1-.4-2.1-1.3-.8-.7-1.3-1.6-1.5-1.8-.1-.3 0-.4.1-.5l.4-.5.3-.4v-.5l-.8-2c-.2-.5-.4-.5-.6-.5h-.4z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* campo da compilare: una scossa breve e il filo oro */
/* 21/10/2026: la tipologia parte vuota («Tipologia») e ha la freccia, così si capisce che si sceglie */
.barra select[name="formula"] { padding-right: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23434746' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right 4px center; }
.barra__campo.vuoto { animation: scossa .45s var(--facile); box-shadow: inset 0 -2px 0 var(--oro); }
@keyframes scossa { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
/* quando un «Prenota» porta qui, la barra si accende */
.barra.chiama { animation: chiama 1.2s var(--facile); }
@keyframes chiama { 0% { box-shadow: 0 0 0 0 rgba(139,108,38,.7), 0 20px 40px rgba(0,0,0,.12); } 100% { box-shadow: 0 0 0 18px rgba(139,108,38,0), 0 20px 40px rgba(0,0,0,.12); } }
.barra__avviso { min-height: 20px; margin-top: -32px; font-size: 14px; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.4); }

/* le tre sagome, sempre in oro: il PNG fa da maschera */
.sagoma { display: inline-block; flex: none; width: 22px; aspect-ratio: 1453 / 1333; background: var(--oro); -webkit-mask: var(--forma) center / contain no-repeat; mask: var(--forma) center / contain no-repeat; }
.sagoma--hotel { --forma: url(img/sagoma-hotel.png); }
.sagoma--rooms { --forma: url(img/sagoma-rooms.png); }
.sagoma--apartment { --forma: url(img/sagoma-apartment.png); }

/* ================= 2 · CHI SIAMO ================= */
.intro { padding: 32px var(--margine) 120px; display: flex; flex-direction: column; gap: 24px; }
.briciole { font-size: 12px; text-transform: uppercase; letter-spacing: .02em; color: var(--grigio); margin-bottom: 40px; }
.intro .titolo-1 { margin-top: 6px; }
.intro__colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 56px; }
.intro__occhiello { font-size: 24px; line-height: 28px; letter-spacing: -0.02em; max-width: 360px; }
.intro__testo { display: flex; flex-direction: column; gap: 20px; max-width: 560px; }

/* ================= 3 · FORMULE: foto + pannello crema ================= */
.divisa { display: grid; grid-template-columns: 1.4fr 1fr; min-height: 720px; }
.divisa__foto { overflow: hidden; }
.divisa__foto img { width: 100%; height: 100%; object-fit: cover; }
.divisa__pannello { background: var(--crema); padding: 80px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.divisa__pannello .titolo-2 { margin: 16px 0 24px; max-width: 380px; }
.divisa__testo { max-width: 380px; }
.formule { margin-top: 40px; border-top: 1px solid var(--filo); }
.formule button { width: 100%; display: flex; align-items: center; gap: 16px; font-size: 20px; padding: 18px 0; border: 0; border-bottom: 1px solid var(--filo); background: none; cursor: pointer; text-align: left; transition: color .3s, padding .4s var(--facile); }
.formule button .freccia { margin-left: auto; color: var(--oro); opacity: 0; transform: translateX(-10px); transition: opacity .3s, transform .4s var(--facile); }
.formule button.attiva { color: var(--oro); padding-left: 8px; }
.formule button.attiva .freccia { opacity: 1; transform: none; }
.formule .sagoma { width: 26px; }
.giostra__didascalia { position: absolute; z-index: 2; left: 32px; bottom: 32px; display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; background: #fff; border-radius: 9999px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; font-weight: 400; }
.giostra__didascalia .sagoma { width: 18px; }
.giostra__didascalia.entra { animation: sale .7s var(--facile) both; }

/* ================= 4 · PERCHÉ: diapositive ================= */
.perche { padding: 120px var(--margine) 0; }
.perche__testa { display: flex; flex-direction: column; gap: 16px; margin-bottom: 48px; }
.diapo { position: relative; height: 78vh; min-height: 560px; overflow: hidden; }
.diapo__foto { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--facile); }
.diapo__foto.attiva { opacity: 1; }
.diapo__foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 6s linear; }
.diapo__foto.attiva img { transform: scale(1); }
/* 21/10/2026: la diapositiva «Posizione» è la mappa delle strutture, con le icone che compaiono in loop */
.diapo__mappa { position: absolute; inset: 0; z-index: 0; background: var(--crema); pointer-events: none; }
.diapo__mappa .leaflet-tile-pane { filter: grayscale(1) sepia(.28) brightness(1.05) contrast(.86); }
.diapo__mappa .leaflet-container, .diapo__mappa.leaflet-container { background: var(--crema); font-family: inherit; }
.diapo__mappa .leaflet-control-container { display: none; }
.diapo__mappa .segnaposto { transform: scale(0); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.diapo__mappa.gira .segnaposto { transform: scale(1); transition-delay: var(--ritardo); }
.scheda { position: absolute; right: 56px; bottom: 56px; width: 400px; min-height: 340px; background: #fff; padding: 40px; display: flex; flex-direction: column; }
.scheda__pagina { display: none; flex-direction: column; gap: 16px; }
.scheda__pagina.attiva { display: flex; animation: sale .8s var(--facile) both; }
.scheda__pagina p:last-child { font-size: 16px; line-height: 20px; }
.diapo__comandi { display: flex; align-items: center; gap: 16px; margin-top: auto; padding-top: 32px; }
.diapo__conta { font-size: 12px; letter-spacing: .05em; color: var(--grigio); }
.diapo__conta b { font-weight: 400; color: var(--nero); }

/* ================= 5 · CITAZIONE ================= */
.citazione { padding: 160px var(--margine); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.citazione blockquote { font-size: 40px; line-height: 48px; font-weight: 300; letter-spacing: -0.02em; max-width: 880px; }

/* ================= 6 · MILANO: carosello ================= */
.carosello { background: var(--crema); padding: 120px 0 120px var(--margine); overflow: hidden; }
.carosello__testa { display: flex; justify-content: space-between; align-items: flex-end; padding-right: var(--margine); margin-bottom: 48px; }
.carosello__testa .titolo-2 { margin-top: 16px; }
.carosello__frecce { display: flex; gap: 8px; }
.carosello__binario { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-right: var(--margine); scrollbar-width: none; }
.carosello__binario::-webkit-scrollbar { display: none; }
.carta { flex: none; width: 344px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; }
.carta__foto { overflow: hidden; aspect-ratio: 4 / 5; }
.carta__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--facile); }
.carta:hover .carta__foto img { transform: scale(1.05); }
.carta .occhiello { margin-top: 8px; color: var(--grigio); }

/* ================= 7 · ACCESSO: la mappa a tutto schermo ================= */
.accesso { position: relative; height: 100vh; min-height: 680px; background: var(--crema); overflow: hidden; }
.accesso__mappa { position: absolute; inset: 0; background: var(--crema); z-index: 0; }
/* il fondo OpenStreetMap ingrigito e scaldato verso il crema e l'oro */
.accesso .leaflet-tile-pane { filter: grayscale(1) sepia(.28) brightness(1.05) contrast(.86); }
.accesso .leaflet-container { font-family: inherit; background: var(--crema); }
.accesso .leaflet-control-zoom { border: 0 !important; box-shadow: 0 6px 20px rgba(0,0,0,.08); margin: 0 32px 32px 0 !important; }
.accesso .leaflet-control-zoom a { width: 40px; height: 40px; line-height: 40px; color: var(--oro); font-weight: 300; border-color: var(--filo); }
.accesso .leaflet-control-attribution { font-size: 10px; background: rgba(250,248,242,.8); }

.accesso__pannello { position: absolute; z-index: 2; top: 112px; left: var(--margine); bottom: 40px; width: 400px; background: rgba(250, 248, 242, .96); backdrop-filter: blur(8px); padding: 40px 36px 32px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.08); opacity: 0; transform: translateX(-30px); transition: opacity 1s var(--facile), transform 1.2s var(--facile); }
.accesso.dentro .accesso__pannello { opacity: 1; transform: none; }
.accesso__testo { color: rgba(0,0,0,.7); }
.filtri { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.filtro { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: 9999px; border: 1px solid var(--filo); background: #fff; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 400; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.filtro .sagoma { width: 14px; }
.filtro:hover { border-color: var(--oro); }
.filtro.attivo { background: var(--oro); border-color: var(--oro); color: #fff; }
.filtro.attivo .sagoma { background: #fff; }
.elenco { flex: 1; overflow-y: auto; margin: 4px -8px 0 0; padding-right: 8px; border-top: 1px solid var(--filo); scrollbar-width: thin; }
.elenco button { width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 4px; border: 0; border-bottom: 1px solid var(--filo); background: none; cursor: pointer; text-align: left; transition: padding .35s var(--facile), background .3s; }
.elenco button span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.elenco b { font-weight: 400; font-size: 14px; line-height: 1.25; }
.elenco small { font-size: 12px; color: var(--grigio); }
.elenco .sagoma { width: 18px; }
.elenco button:hover, .elenco li.scelto button { padding-left: 12px; background: rgba(139,108,38,.06); }
.elenco li.scelto b { color: var(--oro); }

/* i segnaposti: tondo bianco con la sagoma oro; entrano uno dopo l'altro */
.segnaposto-guscio { background: none; border: 0; }
.segnaposto { position: relative; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.18); transform: scale(0); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), background .3s; cursor: pointer; }
.accesso.dentro .segnaposto { transform: scale(1); transition-delay: var(--ritardo); }
.segnaposto .sagoma { width: 18px; transition: background .3s; }
.segnaposto b { position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; border-radius: 50%; background: var(--oro); color: #fff; font-size: 10px; font-weight: 500; display: flex; align-items: center; justify-content: center; }
.segnaposto::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--oro); opacity: 0; }
.segnaposto-guscio:hover .segnaposto, .segnaposto-guscio.acceso .segnaposto { transform: scale(1.18); transition-delay: 0s; }
.segnaposto-guscio.acceso .segnaposto::after, .segnaposto-guscio.scelto .segnaposto::after { animation: onda 1.6s var(--facile) infinite; }
.segnaposto-guscio.scelto .segnaposto { background: var(--oro); transform: scale(1.25); transition-delay: 0s; }
.segnaposto-guscio.scelto .sagoma { background: #fff; }
.segnaposto-guscio.scelto b { background: #fff; color: var(--oro); }
@keyframes onda { from { transform: scale(1); opacity: .8; } to { transform: scale(2); opacity: 0; } }

/* la scheda della struttura, a destra */
.accesso__scheda { position: absolute; z-index: 3; right: 96px; top: 50%; width: 360px; margin-top: -200px; background: #fff; box-shadow: 0 24px 60px rgba(0,0,0,.16); }
.accesso__scheda.entra { animation: scheda .7s var(--facile) both; }
@keyframes scheda { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.scheda__chiudi { position: absolute; z-index: 1; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); font-size: 20px; line-height: 1; cursor: pointer; transition: transform .3s var(--facile); }
.scheda__chiudi:hover { transform: rotate(90deg); }
.scheda__foto { aspect-ratio: 3 / 2; overflow: hidden; }
.scheda__foto img { width: 100%; height: 100%; object-fit: cover; animation: respiro 6s linear both; }
.scheda__corpo { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 10px; }
.scheda__corpo .occhiello { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.scheda__corpo .sagoma { width: 16px; }
.scheda__corpo h3 { font-size: 22px; line-height: 26px; }
.scheda__indirizzo { font-size: 14px; color: var(--grigio); }
.scheda__altre { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.scheda__altre button { text-align: left; font-size: 12px; padding: 7px 10px; border: 1px solid var(--filo); border-radius: 4px; background: none; cursor: pointer; }
.scheda__altre button.attiva { border-color: var(--oro); color: var(--oro); }
.scheda__azioni { display: flex; align-items: center; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.scheda__link { font-size: 12px; text-transform: uppercase; letter-spacing: .02em; font-weight: 400; color: var(--oro); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--oro-chiaro); }

/* ================= 8 · CONTATTI ================= */
.contatti { background: var(--crema); padding: 120px var(--margine); }
.contatti__testa { display: flex; flex-direction: column; gap: 16px; margin-bottom: 64px; }
.contatti__griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.contatti__colonne { display: flex; flex-direction: column; gap: 40px; }
.sede { display: flex; gap: 20px; align-items: flex-start; padding-bottom: 32px; border-bottom: 1px solid var(--filo); }
.sede:last-child { border-bottom: 0; }
.sede > div { display: flex; flex-direction: column; gap: 8px; }
.sede .sagoma { width: 34px; margin-top: 2px; }
.collegamento.manca { color: #b3261e; text-decoration-color: currentColor; }
.modulo__intro { font-size: 14px; color: rgba(0,0,0,.6); margin-bottom: 4px; }
.etichetta { font-size: 16px; line-height: 16px; letter-spacing: .02em; text-transform: uppercase; font-weight: 400; margin-bottom: 8px; }
.collegamento { color: var(--oro); font-size: 16px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--oro-chiaro); }
.collegamento:hover { text-decoration-color: var(--oro); }

.modulo { background: #fff; padding: 40px; display: flex; flex-direction: column; gap: 16px; }
.modulo__riga { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.modulo input, .modulo select, .modulo textarea { width: 100%; border: 0; border-bottom: 1px solid rgba(0, 0, 0, .2); background: none; padding: 14px 0; font-size: 14px; font-weight: 400; outline: none; border-radius: 0; appearance: none; transition: border-color .3s; }
.modulo input:focus, .modulo select:focus, .modulo textarea:focus { border-color: var(--oro); }
.modulo ::placeholder { color: rgba(15, 15, 15, .45); }
.modulo label { display: flex; flex-direction: column; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; color: var(--grigio); gap: 2px; }
.modulo textarea { height: 110px; resize: vertical; }
.modulo__fondo { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; gap: 16px; }
.modulo .spunta { flex-direction: row; align-items: center; gap: 10px; text-transform: none; font-size: 13px; }
.modulo .spunta input { width: 16px; height: 16px; appearance: auto; accent-color: var(--oro); }

/* ================= FOOTER ================= */
.piede { background: var(--crema-scura); padding: 80px var(--margine) 32px; }
.piede__testa { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; padding-bottom: 64px; border-bottom: 1px solid var(--filo); }
.piede__logo { height: 56px; width: auto; }
.piede__colonne { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding: 48px 0; }
.piede__colonne div { display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.4; }
.piede__titolo { font-size: 12px; text-transform: uppercase; letter-spacing: .02em; font-weight: 400; margin-bottom: 8px; }
.piede__colonne a:hover { color: var(--oro); }
.piede__sotto { margin-top: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; color: var(--grigio); }
.piede__piccolo { font-size: 12px; color: var(--grigio); max-width: 320px; }
.piede__fondo { font-size: 12px; color: var(--grigio); text-align: center; padding-top: 24px; border-top: 1px solid var(--filo); }


/* ================= SCHEDA DI UNA STRUTTURA (strutture/*.html) — 14/10/2026 ================= */
.scheda-pagina { padding-top: 72px; }
.sp-testa { padding: 32px var(--margine) 32px; }
.sp-briciole { display: flex; gap: 10px; margin-bottom: 32px; }
.sp-briciole a:hover { color: var(--oro); }
.sp-testa__riga { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.sp-tipo { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.sp-tipo .sagoma { width: 20px; }
.sp-titolo { font-size: 44px; line-height: 48px; font-weight: 300; letter-spacing: -0.03em; max-width: 860px; animation: sale 1.2s var(--facile) both; }
.sp-indirizzo { margin-top: 12px; color: var(--grigio); }
.sp-indirizzo a { color: var(--oro); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--oro-chiaro); }
.sp-voto { flex: none; display: flex; align-items: center; gap: 14px; padding: 10px 18px 10px 10px; border: 1px solid var(--filo); border-radius: 9999px; transition: border-color .3s; }
.sp-voto:hover { border-color: var(--oro); }
.sp-voto b { width: 48px; height: 48px; border-radius: 50%; background: var(--oro); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 400; font-size: 17px; }
.sp-voto span { display: flex; flex-direction: column; font-size: 15px; font-weight: 400; }
.sp-voto small { font-size: 12px; font-weight: 300; color: var(--grigio); }

/* mosaico: una grande, quattro piccole */
.sp-galleria { position: relative; display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 280px 280px; gap: 8px; padding: 0 var(--margine); }
.sp-galleria__foto { position: relative; overflow: hidden; border: 0; padding: 0; cursor: zoom-in; background: var(--crema); animation: sale 1s var(--facile) both; }
.sp-galleria__foto:nth-child(1) { grid-row: 1 / 3; }
.sp-galleria__foto:nth-child(2) { animation-delay: .1s; } .sp-galleria__foto:nth-child(3) { animation-delay: .18s; }
.sp-galleria__foto:nth-child(4) { animation-delay: .26s; } .sp-galleria__foto:nth-child(5) { animation-delay: .34s; }
.sp-galleria__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--facile), filter .6s; }
.sp-galleria__foto:hover img { transform: scale(1.05); }
.sp-galleria:hover .sp-galleria__foto:not(:hover) img { filter: brightness(.85); }
.sp-galleria__tutte { position: absolute; right: calc(var(--margine) + 20px); bottom: 20px; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 18px; border-radius: 9999px; border: 0; background: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; font-weight: 400; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.15); transition: transform .3s var(--facile); }
.sp-galleria__tutte:hover { transform: translateY(-2px); }
.sp-griglietta { width: 12px; height: 12px; background: linear-gradient(var(--oro) 0 0) 0 0 / 5px 5px no-repeat, linear-gradient(var(--oro) 0 0) 100% 0 / 5px 5px no-repeat, linear-gradient(var(--oro) 0 0) 0 100% / 5px 5px no-repeat, linear-gradient(var(--oro) 0 0) 100% 100% / 5px 5px no-repeat; }

/* corpo: testo + prenotazione che resta in vista */
.sp-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 80px; padding: 72px var(--margine) 120px; align-items: start; }
.sp-testo { display: flex; flex-direction: column; }
.sp-blocco { padding: 48px 0; border-bottom: 1px solid var(--filo); display: flex; flex-direction: column; gap: 20px; }
.sp-blocco:first-child { padding-top: 0; }
.sp-blocco:last-child { border-bottom: 0; }
.sp-intro { font-size: 20px; line-height: 30px; max-width: 640px; }
.sp-servizi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 24px; }
.sp-servizi li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.ico { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--crema); position: relative; }
.ico::after { content: ''; position: absolute; inset: 9px; background: var(--oro); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ico--bagno { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M3 12h18v3a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5zM6 12V5a2 2 0 0 1 4 0'/%3E%3C/svg%3E"); }
.ico--aria { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M12 2v20M4 6l16 12M20 6 4 18M9 3l3 3 3-3M9 21l3-3 3 3'/%3E%3C/svg%3E"); }
.ico--caldo { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M8 4c-2 3 2 5 0 8s2 5 0 8M13 4c-2 3 2 5 0 8s2 5 0 8M18 4c-2 3 2 5 0 8s2 5 0 8'/%3E%3C/svg%3E"); }
.ico--wifi { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M2 9a15 15 0 0 1 20 0M5 13a10 10 0 0 1 14 0M8.5 16.5a5 5 0 0 1 7 0'/%3E%3Ccircle cx='12' cy='20' r='1' fill='%23000'/%3E%3C/svg%3E"); }
.ico--tv { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='2' y='4' width='20' height='13' rx='1'/%3E%3Cpath d='M8 21h8'/%3E%3C/svg%3E"); }
.ico--frigo { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cpath d='M5 10h14M8 5v2M8 13v3'/%3E%3C/svg%3E"); }
.ico--scrivania { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M2 8h20M4 8v12M20 8v12M14 8v6h6'/%3E%3C/svg%3E"); }
.ico--lenzuola { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M2 18V8M2 14h20v4M22 14v-2a3 3 0 0 0-3-3h-8v5M5 11h3'/%3E%3C/svg%3E"); }
.ico--fumo { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5.6 5.6l12.8 12.8M7 13h7M17 13h0'/%3E%3C/svg%3E"); }

.ico--phon { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 9a5 5 0 1 1-5-5h8v6h-3'/%3E%3Cpath d='M8 13l1 8h3l-1-8'/%3E%3C/svg%3E"); }
.ico--microonde { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='1'/%3E%3Crect x='5' y='8' width='10' height='8'/%3E%3Cpath d='M18 9v1M18 13v1'/%3E%3C/svg%3E"); }
.ico--valigia { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='7' width='16' height='13' rx='2'/%3E%3Cpath d='M9 7V4h6v3M4 12h16'/%3E%3C/svg%3E"); }
.ico--campanello { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17h16M6 17a6 6 0 0 1 12 0M12 9V7M3 20h18'/%3E%3C/svg%3E"); }
.ico--balcone { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h18M5 12v8M9 12v8M15 12v8M19 12v8M3 20h18M7 12V4h10v8'/%3E%3C/svg%3E"); }
.ico--letto { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 19V6M2 14h20v5M22 14v-2a3 3 0 0 0-3-3h-8v5M5 11h3'/%3E%3C/svg%3E"); }
.ico--divano { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11V8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v3M2 12a2 2 0 0 1 4 0v2h12v-2a2 2 0 0 1 4 0v6H2zM5 18v2M19 18v2'/%3E%3C/svg%3E"); }
.ico--cucina { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='1'/%3E%3Ccircle cx='8.5' cy='8.5' r='2'/%3E%3Ccircle cx='15.5' cy='8.5' r='2'/%3E%3Cpath d='M3 14h18'/%3E%3C/svg%3E"); }
.ico--caffe { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h12v5a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5zM16 10h2a2 2 0 0 1 0 4h-2M8 3v3M12 3v3'/%3E%3C/svg%3E"); }
.ico--auto { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16v-4l2-5h14l2 5v4zM3 16v3M21 16v3M7 12h0M17 12h0M5 12h14'/%3E%3C/svg%3E"); }
.ico--verde { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V11M12 11C7 11 5 7 6 3c4 0 7 2 6 8zM12 14c3 0 6-2 6-6-3 0-6 2-6 6'/%3E%3C/svg%3E"); }
.ico--ascensore { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='1'/%3E%3Cpath d='M9 9l3-3 3 3M9 15l3 3 3-3'/%3E%3C/svg%3E"); }
.ico--pulizia { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3l-4 8M6 12h10l2 9H4zM9 21v-4M13 21v-4'/%3E%3C/svg%3E"); }
.sp-punteggi { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 48px; }
.sp-punteggi div { display: grid; grid-template-columns: 1fr auto; gap: 8px; font-size: 15px; }
.sp-punteggi b { font-weight: 400; }
.sp-punteggi i { grid-column: 1 / -1; height: 3px; background: var(--crema-scura); position: relative; overflow: hidden; }
.sp-punteggi i::after { content: ''; position: absolute; inset: 0; background: var(--oro); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--lenta) .3s; }
.sp-blocco.dentro .sp-punteggi i::after { transform: scaleX(var(--v)); }
.sp-nota { font-size: 12px; color: var(--grigio); }
.sp-regole div { display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--filo); font-size: 15px; }
.sp-regole div:last-child { border-bottom: 0; }
.sp-regole dt { text-transform: uppercase; font-size: 12px; letter-spacing: .04em; font-weight: 400; padding-top: 2px; }

.sp-mappa { height: 380px; background: var(--crema); margin-top: 8px; }
.sp-mappa .leaflet-tile-pane { filter: grayscale(1) sepia(.28) brightness(1.05) contrast(.86); }
.sp-mappa .segnaposto { transform: scale(1.25); }
.sp-mappa .leaflet-control-zoom { border: 0 !important; box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.sp-mappa .leaflet-control-zoom a { color: var(--oro); }
.sp-schede { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.sp-schede button { height: 34px; padding: 0 16px; border-radius: 9999px; border: 1px solid var(--filo); background: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; font-weight: 400; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.sp-schede button:hover { border-color: var(--oro); }
.sp-schede button.attiva { background: var(--oro); border-color: var(--oro); color: #fff; }
.sp-luoghi { display: none; }
.sp-luoghi.attiva { display: block; }
.sp-luoghi li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--filo); font-size: 15px; animation: sale .6s var(--facile) both; }
.sp-luoghi li b { font-weight: 400; color: var(--oro); white-space: nowrap; }
.sp-luoghi li:nth-child(2) { animation-delay: .05s; } .sp-luoghi li:nth-child(3) { animation-delay: .1s; } .sp-luoghi li:nth-child(4) { animation-delay: .15s; }
.sp-luoghi li:nth-child(5) { animation-delay: .2s; } .sp-luoghi li:nth-child(6) { animation-delay: .25s; } .sp-luoghi li:nth-child(7) { animation-delay: .3s; } .sp-luoghi li:nth-child(8) { animation-delay: .35s; }

.sp-lato { position: sticky; top: 100px; }
.barra--scheda { width: auto; flex-direction: column; align-items: stretch; gap: 0; padding: 32px; border-radius: 0; box-shadow: 0 24px 60px rgba(0,0,0,.1); animation-delay: .3s; }
.barra--scheda .barra__campo { border-right: 0; border-bottom: 1px solid var(--filo); padding: 14px 4px; }
.barra--scheda .barra__invio { margin-top: 20px; justify-content: center; }
.barra--scheda .barra__avviso { margin-top: 10px; color: var(--oro); text-shadow: none; min-height: 0; }
.sp-lato__titolo { font-size: 24px; line-height: 28px; letter-spacing: -0.02em; }
.sp-lato__sotto { font-size: 14px; color: var(--grigio); margin: 6px 0 12px; }
.sp-lato__booking { display: inline-flex; align-items: center; gap: 10px; justify-content: center; margin-top: 16px; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; color: var(--grigio); transition: color .3s, gap .3s; }
.sp-lato__booking:hover { color: var(--oro); gap: 14px; }

.sp-altre .carosello__testa { align-items: flex-end; }

/* il visore */
.visore { position: fixed; inset: 0; z-index: 80; background: rgba(12, 10, 6, .96); color: #fff; display: grid; grid-template-columns: 80px 1fr 80px; grid-template-rows: 64px 1fr 96px; animation: velo .4s var(--facile); }
.visore[hidden] { display: none; }
@keyframes velo { from { opacity: 0; } }
.visore__chiudi { grid-column: 3; justify-self: end; margin-right: 24px; align-self: center; background: none; border: 0; color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; white-space: nowrap; }
.visore__conta { grid-column: 1 / 3; grid-row: 1; align-self: center; padding-left: 32px; font-size: 12px; letter-spacing: .08em; }
.visore__foto { grid-column: 2; grid-row: 2; display: flex; align-items: center; justify-content: center; min-height: 0; }
.visore__foto img { max-width: 100%; max-height: 100%; object-fit: contain; }
.visore__foto img.entra { animation: visore .5s var(--facile) both; }
@keyframes visore { from { opacity: 0; transform: scale(.98); } }
.visore__freccia { grid-row: 2; align-self: center; justify-self: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: none; color: #fff; cursor: pointer; transition: background .3s, border-color .3s; }
.visore__freccia:hover { background: var(--oro); border-color: var(--oro); }
.visore__freccia--sx { grid-column: 1; }
.visore__freccia:not(.visore__freccia--sx) { grid-column: 3; }
.visore__striscia { grid-column: 1 / -1; grid-row: 3; display: flex; gap: 6px; padding: 12px 32px 20px; overflow-x: auto; scrollbar-width: none; }
.visore__striscia button { flex: none; width: 92px; height: 62px; padding: 0; border: 0; background: none; opacity: .45; cursor: pointer; transition: opacity .3s; outline: 2px solid transparent; outline-offset: 2px; }
.visore__striscia button.attiva { opacity: 1; outline-color: var(--oro); }
.visore__striscia img { width: 100%; height: 100%; object-fit: cover; }

/* ================= TABLET E TELEFONO ================= */
@media (max-width: 1240px) {
  .testata__voci { display: none; }
}
@media (max-width: 1100px) {
  .divisa, .contatti__griglia { grid-template-columns: 1fr; gap: 48px; }
  .accesso { height: auto; min-height: 0; display: flex; flex-direction: column; }
  .accesso__mappa { position: relative; height: 70vh; min-height: 420px; }
  .accesso__pannello { position: relative; inset: auto; top: auto; width: auto; max-height: none; box-shadow: none; padding: 40px var(--margine); }
  .elenco { max-height: 360px; }
  .accesso__scheda { position: absolute; top: auto; bottom: 16px; right: 16px; left: 16px; width: auto; margin: 0; display: grid; grid-template-columns: 140px 1fr; }
  .accesso__scheda .scheda__foto { aspect-ratio: auto; height: 100%; }
  .accesso__scheda[hidden] { display: none; }
  .sp-corpo { grid-template-columns: 1fr; gap: 0; }
  .sp-lato { position: static; order: -1; margin-bottom: 48px; }
  .sp-servizi { grid-template-columns: 1fr 1fr; }
  .divisa__pannello { padding: 56px var(--margine); }
}
@media (max-width: 809px) {
  :root { --margine: 16px; }
  .testata { height: 60px; gap: 12px; }
  .lingue { display: none; }
  .testata__logo img, .testata.ridotta .testata__logo img { height: 26px; }
  .testata .bottone { height: 34px; padding: 0 16px; }
  .apertura { margin-top: 60px; height: calc(100svh - 60px); }
  .apertura__indice { top: 16px; }
  .tacca { width: 22px; }
  .apertura__titolo { font-size: 36px; line-height: 40px; }
  .apertura__contenuto { bottom: 24px; gap: 28px; }
  .barra { flex-direction: column; align-items: stretch; padding: 8px; }
  .barra__campo { border-right: 0; border-bottom: 1px solid var(--filo); }
  .barra { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .barra__campo:first-child, .barra__campo:nth-child(4), .barra__invio { grid-column: 1 / -1; }
  .barra__campo:nth-child(2) { border-right: 1px solid var(--filo); }
  .barra__invio { justify-content: center; margin-top: 8px; }
  .barra__avviso { margin-top: -16px; }
  .giostra__didascalia { left: 16px; bottom: 16px; }
  .accesso__scheda { grid-template-columns: 1fr; max-height: calc(70vh - 32px); overflow-y: auto; }
  .accesso__scheda .scheda__foto { aspect-ratio: 16 / 9; }
  .scheda__corpo { padding: 16px 18px 18px; }
  .titolo-1 { font-size: 28px; line-height: 32px; }
  .titolo-2 { font-size: 26px; line-height: 30px; }
  .intro { padding-bottom: 72px; }
  .intro__colonne { grid-template-columns: 1fr; margin-top: 24px; }
  .intro__occhiello { font-size: 20px; }
  .divisa { min-height: 0; }
  .divisa__foto { aspect-ratio: 4 / 3; }
  .perche { padding-top: 72px; }
  .diapo { height: auto; min-height: 0; display: flex; flex-direction: column; }
  .diapo__foto { position: relative; aspect-ratio: 4 / 3; display: none; }
  .diapo__foto.attiva { display: block; }
  .scheda { position: relative; right: auto; bottom: auto; width: auto; min-height: 0; padding: 28px 0; }
  .citazione { padding: 96px var(--margine); }
  .citazione blockquote { font-size: 28px; line-height: 34px; }
  .carosello { padding-top: 72px; padding-bottom: 72px; }
  .carta { width: 78vw; }
  .contatti { padding-top: 72px; padding-bottom: 72px; }
  .modulo { padding: 24px; }
  .modulo__riga { grid-template-columns: 1fr; }
  .modulo__fondo { flex-direction: column; align-items: flex-start; }
  .piede__colonne { grid-template-columns: 1fr 1fr; }
  .scheda-pagina { padding-top: 60px; }
  .sp-testa__riga { flex-direction: column; align-items: flex-start; }
  .sp-titolo { font-size: 30px; line-height: 34px; }
  .sp-galleria { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 120px; padding: 0; }
  .sp-galleria__foto:nth-child(1) { grid-column: 1 / -1; grid-row: 1; }
  .sp-galleria__foto:nth-child(4), .sp-galleria__foto:nth-child(5) { display: none; }
  .sp-galleria__tutte { right: 12px; bottom: 132px; }
  .sp-corpo { padding-top: 40px; padding-bottom: 72px; }
  .sp-servizi, .sp-punteggi { grid-template-columns: 1fr; }
  .sp-regole div { grid-template-columns: 1fr; gap: 4px; }
  .barra--scheda { display: flex; padding: 24px; }
  .barra--scheda .barra__campo { border-right: 0 !important; }
  .barra--scheda .barra__campo { grid-column: auto; }
  .visore { grid-template-columns: 1fr; grid-template-rows: 56px 1fr 84px; }
  .visore__freccia { display: none; }
  .visore__foto { grid-column: 1; }
  .visore__chiudi { grid-column: 1; }
  .visore__conta { grid-column: 1; padding-left: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-entra] { opacity: 1; transform: none; }
  [data-svela] { clip-path: none; }
  [data-svela] img { transform: none; }
}