/* =========================================================================
   Girasole — sistema visivo
   Direzione: editoriale caldo. Token in design.md.
   ========================================================================= */

:root {
    --sfondo: #FBF8F3;
    --superficie: #FFFFFF;
    --testo: #2A2521;
    --testo-attenuato: #6B6259;
    --accento: #A0522D;
    --accento-scuro: #7E3F22;
    --secondario: #7A8B6F;
    --bordo: #E5DCD0;
    --errore: #A32C2C;

    --titolo: "Fraunces", Georgia, "Times New Roman", serif;
    --testo-famiglia: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    --contenitore: 1200px;
    --gutter: 16px;   /* ridefinito piu sotto da 640px in su */
    --raggio: 8px;

    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
    --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

    --barra-altezza: 0px;
}

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

/* [ATTENZIONE] L'attributo `hidden` nasconde con `display: none` dichiarato
   dal browser, e qualunque regola di questo foglio che imposti `display` lo
   batte per specificita. Senza questa riga un elemento con `hidden` e un
   `display: flex` addosso resta visibile: e il motivo per cui la finestra
   delle fotografie non si chiudeva. Vale anche per la barra fissa, per il
   corpo del widget e per il bottone Mostra altro. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    margin: 0;
    background: var(--sfondo);
    color: var(--testo);
    font-family: var(--testo-famiglia);
    font-size: 17px;
    line-height: 1.65;
    font-variant-numeric: tabular-nums;
}

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

h1, h2, h3 { font-family: var(--titolo); font-weight: 600; line-height: 1.15; margin: 0 0 var(--s4); }
h1 { font-size: clamp(36px, 5.5vw, 64px); }
h2 { font-size: clamp(28px, 3.6vw, 40px); }
h3 { font-size: clamp(19px, 2vw, 24px); }
p  { margin: 0 0 var(--s4); max-width: 68ch; }

a { color: var(--accento); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 3px solid var(--accento); outline-offset: 3px;
}

.etichetta {
    font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--testo-attenuato); font-weight: 600; margin-bottom: var(--s2);
}

@media (min-width: 640px) { :root { --gutter: 32px; } }
.contenitore { width: 100%; max-width: var(--contenitore); margin-inline: auto; padding-inline: var(--gutter); }

.sezione { padding-block: var(--s8); }
@media (min-width: 900px) { .sezione { padding-block: var(--s9); } }
.sezione--chiara { background: var(--superficie); }

/* ---------- bottoni ---------- */
.bottone {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 0 var(--s5);
    background: var(--accento); color: #fff; border: 0; border-radius: var(--raggio);
    font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
    transition: background .15s ease;
}
.bottone:hover { background: var(--accento-scuro); }
.bottone--secondario { background: transparent; color: var(--accento); border: 1px solid var(--bordo); }

/* ---------- testata ---------- */
.testata {
    position: sticky; top: 0; z-index: 30;
    background: color-mix(in srgb, var(--sfondo) 92%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--bordo);
}
/* Tre colonne, non tre elementi in fila. In flex il marchio si stringeva
   quando il menu era piu lungo, e il limite di larghezza delle immagini
   schiacciava il logo: cambiando lingua cambiava la dimensione del
   marchio. In griglia le colonne laterali si dimensionano sul proprio
   contenuto e quella centrale prende il resto, quindi il logo non viene
   mai compresso. */
.testata__interno { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s4); min-height: 76px; }
.testata__azioni { display: flex; align-items: center; justify-content: flex-end; gap: var(--s3); }
.testata__interno .menu { justify-self: center; }
.testata__nome { font-family: var(--titolo); font-weight: 600; font-size: 18px; text-decoration: none; color: var(--testo); }
.menu { display: none; gap: var(--s5); flex-wrap: nowrap; white-space: nowrap; }
@media (min-width: 900px) { .menu { display: flex; } }
.menu a { color: var(--testo-attenuato); text-decoration: none; font-size: 15px; }
.menu a:hover { color: var(--accento); }
.lingue { display: flex; gap: var(--s2); font-size: 13px; }
.lingue a { text-decoration: none; color: var(--testo-attenuato); padding: var(--s1) var(--s2); border-radius: 4px; }
.lingue a[aria-current="true"] { background: var(--accento); color: #fff; }

/* ---------- hero ---------- */
.hero { padding-block: var(--s7) var(--s8); }
.hero__griglia { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 900px) { .hero__griglia { grid-template-columns: 1fr 1.1fr; gap: var(--s8); } }
.hero__figura { margin: 0; border-radius: var(--raggio); overflow: hidden; background: var(--bordo); }
.hero__figura img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hero__prove { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s3); }
.hero__prove li { display: flex; gap: var(--s3); align-items: baseline; }
.hero__prove strong { font-family: var(--titolo); font-size: 22px; color: var(--accento); }

/* ---------- motivi ---------- */
/* Niente riquadri: quattro scatole bianche bordate su fondo avorio erano
   la cosa piu anonima della pagina. Restano icona, titolo e una riga,
   separati solo dallo spazio. */
.motivi { display: grid; gap: var(--s6) var(--s5); }
@media (min-width: 640px) { .motivi { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .motivi { grid-template-columns: repeat(4, 1fr); gap: var(--s6); } }
.motivo .icona { color: var(--accento); margin-bottom: var(--s4); display: block; }
.motivo h3 { margin-bottom: var(--s2); font-size: clamp(18px, 1.6vw, 21px); }
.motivo p { margin: 0; font-size: 15px; color: var(--testo-attenuato); max-width: 34ch; }

/* ---------- galleria ---------- */
.galleria { display: grid; gap: var(--s3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .galleria { grid-template-columns: repeat(4, 1fr); } }
.galleria figure { margin: 0; border-radius: var(--raggio); overflow: hidden; background: var(--bordo); }
.galleria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.galleria figure:first-child { grid-column: span 2; }
@media (min-width: 900px) { .galleria figure:first-child { grid-row: span 2; } .galleria figure:first-child img { aspect-ratio: 1 / 1; height: 100%; } }

/* ---------- appartamento ---------- */
.due-colonne { display: grid; gap: var(--s6); align-items: start; }
@media (min-width: 900px) { .due-colonne { grid-template-columns: 1.1fr 1fr; gap: var(--s8); } }
.scheda { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--bordo); }
.scheda li { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--bordo); font-size: 15px; }
.scheda dt, .scheda span:first-child { color: var(--testo-attenuato); }
.scheda span:last-child { font-weight: 600; text-align: right; }

/* ---------- dotazioni ---------- */
.dotazioni { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4) var(--s5); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .dotazioni { grid-template-columns: repeat(4, 1fr); gap: var(--s5) var(--s6); } }
.dotazioni li { display: flex; align-items: center; gap: var(--s3); font-size: 15px; }
.dotazioni .icona--tratto { color: var(--accento); flex: none; }

.tutte { margin-top: var(--s6); border-top: 1px solid var(--bordo); }
.tutte summary {
    cursor: pointer; list-style: none; padding: var(--s4) 0;
    font-size: 15px; font-weight: 600; color: var(--accento);
    display: flex; align-items: center; gap: var(--s2);
}
.tutte summary::-webkit-details-marker { display: none; }
.tutte summary::after { content: "+"; font-size: 20px; line-height: 1; }
.tutte[open] summary::after { content: "–"; }
.tutte__griglia { display: grid; gap: var(--s5); padding-bottom: var(--s4); }
@media (min-width: 640px) { .tutte__griglia { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tutte__griglia { grid-template-columns: repeat(4, 1fr); gap: var(--s6); } }
.tutte__griglia h3 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-family: var(--testo-famiglia); color: var(--testo-attenuato); margin-bottom: var(--s3); }
.tutte__griglia ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; color: var(--testo-attenuato); }

/* ---------- posizione ---------- */
.posizione__intro { margin: 0 0 var(--s6); max-width: 60ch; color: var(--testo-attenuato); }
.posizione__griglia { display: grid; gap: var(--s6); align-items: start; }
@media (min-width: 1000px) { .posizione__griglia { grid-template-columns: 1.25fr 1fr; gap: var(--s7); } }

.posizione__mappa { margin: 0; }
.posizione__mappa figcaption { margin-top: var(--s3); font-size: 13px; color: var(--testo-attenuato); }
.posizione__fonte { margin: 4px 0 0; font-size: 11px; color: #9A9186; }
.posizione__fonte a { color: inherit; }
.mappa { position: relative; border-radius: var(--raggio); overflow: hidden; border: 1px solid var(--bordo); }
.mappa__base { display: block; width: 100%; height: auto; }
.mappa__segni { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Il percorso a piedi e tratteggiato e nel colore dell'accento: e la
   relazione che la sezione deve comunicare, non una strada fra le altre. */
.mappa__percorso { fill: none; stroke: var(--accento); stroke-width: 3; stroke-dasharray: 9 8; stroke-linecap: round; opacity: .75; }
/* Area di tocco invisibile: un pallino da 8 unita e circa 10 pixel a
   schermo, troppo poco per un dito. Il cerchio trasparente da 26 porta
   il bersaglio a una misura usabile senza cambiare il disegno. */
.mappa__tocco { fill: transparent; }
.mappa__segno { cursor: pointer; }
.mappa__segno:focus { outline: none; }
.mappa__segno:focus-visible .mappa__punto,
.mappa__segno:focus-visible .mappa__casa { stroke: var(--accento); stroke-width: 5; }
.mappa__punto { fill: #6B6259; stroke: #FAF6F0; stroke-width: 2; transition: fill .15s ease, r .15s ease; }
.mappa__segno:hover .mappa__punto { fill: var(--accento); }
.mappa__segno--attivo .mappa__punto { fill: var(--accento); r: 10; }
.mappa__segno--attivo .mappa__etichetta { fill: var(--testo); font-weight: 600; }

/* ---------- scheda del luogo ---------- */
.posizione__pannello { display: grid; gap: var(--s5); align-content: start; }
.scheda-luogo figure { margin: 0 0 var(--s4); }
.scheda-luogo img { width: 100%; height: auto; border-radius: var(--raggio); display: block; aspect-ratio: 3 / 2; object-fit: cover; }
.scheda-luogo h3 { margin: 0 0 var(--s2); font-size: clamp(19px, 2vw, 23px); }
.scheda-luogo__misure { display: flex; align-items: baseline; gap: var(--s3); margin: 0 0 var(--s3); }
.scheda-luogo__misure strong { font-family: var(--titolo); font-size: 24px; color: var(--accento); }
.scheda-luogo__misure em { font-style: normal; font-size: 14px; color: var(--testo-attenuato); }
.scheda-luogo__testo { margin: 0; font-size: 15px; color: var(--testo-attenuato); max-width: 46ch; }
.scheda-luogo__credito { margin: 6px 0 0; font-size: 11px; color: #9A9186; }
.scheda-luogo__credito a { color: inherit; }

/* ---------- elenco dei luoghi sotto la mappa ---------- */
.elenco-luoghi { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: 0 var(--s6); }
@media (min-width: 760px) { .elenco-luoghi { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .elenco-luoghi { grid-template-columns: repeat(3, 1fr); } }
.elenco-luoghi__riga {
    width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
    padding: var(--s3) 0; border: 0; border-bottom: 1px solid var(--bordo); background: none;
    font: inherit; font-size: 15px; color: var(--testo); text-align: left; cursor: pointer;
}
.elenco-luoghi__riga--ferma { cursor: default; color: var(--testo-attenuato); }
button.elenco-luoghi__riga:hover { color: var(--accento); }
.elenco-luoghi__riga--attiva { color: var(--accento); font-weight: 600; }
.elenco-luoghi__misure { display: flex; align-items: baseline; gap: var(--s2); white-space: nowrap; }
.elenco-luoghi__misure strong { font-weight: 600; }
.elenco-luoghi__misure em { font-style: normal; font-size: 13px; color: var(--testo-attenuato); }
.mappa__casa { fill: var(--accento); stroke: #fff; stroke-width: 3; }
.mappa__casa-alone { fill: var(--accento); opacity: .16; }
/* Alone chiaro dietro le scritte: sopra una strada o il fiume, un testo
   senza contorno diventa illeggibile. `paint-order` fa disegnare il
   contorno sotto il riempimento, altrimenti lo mangerebbe. */
.mappa text { paint-order: stroke fill; stroke: #FAF6F0; stroke-width: 6; stroke-linejoin: round; }
.mappa__etichetta { font-family: var(--testo-famiglia); font-size: 21px; fill: var(--testo-attenuato); }
.mappa__scala path { stroke: #B5AA9D; stroke-width: 2; fill: none; }
.mappa__scala text { font-family: var(--testo-famiglia); font-size: 17px; fill: #9A9186; stroke-width: 4; }
.mappa__etichetta--casa { fill: var(--testo); font-weight: 600; font-size: 24px; }
.mappa__zona { font-family: var(--testo-famiglia); font-size: 19px; fill: #9A9186; letter-spacing: .06em; }

.distanze { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.distanze li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--bordo); font-size: 15px; }
.distanze__valori { display: flex; align-items: baseline; gap: var(--s2); white-space: nowrap; }
.distanze__valori strong { color: var(--testo); }
.distanze__valori em { font-style: normal; font-size: 13px; color: var(--accento); }

/* ---------- recensioni ---------- */
.voti { display: flex; flex-wrap: wrap; gap: var(--s4); }
.voto {
    margin: 0; display: inline-flex; align-items: center; gap: var(--s3);
    background: var(--sfondo); border: 1px solid var(--bordo); border-radius: var(--raggio);
    padding: var(--s4) var(--s5);
}
.voto .icona { color: var(--accento); flex: none; }
.voto strong { font-family: var(--titolo); font-size: clamp(32px, 4vw, 42px); line-height: 1; color: var(--testo); }
.voto__scala { font-size: 13px; color: var(--testo-attenuato); align-self: flex-end; padding-bottom: 3px; }
.voto__meta { display: grid; gap: 1px; padding-left: var(--s3); border-left: 1px solid var(--bordo); }
.voto__portale { font-size: 14px; font-weight: 600; }
.voto__quante { font-size: 13px; color: var(--testo-attenuato); }

.menzioni { list-style: none; margin: var(--s4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.menzioni li {
    display: inline-flex; align-items: baseline; gap: 6px;
    border: 1px solid var(--secondario); border-radius: 999px; padding: 7px 14px; font-size: 13px;
}
.menzioni strong { font-weight: 600; color: var(--testo); }
.menzioni span { color: var(--testo-attenuato); }

.voti__testo { margin: var(--s5) 0 0; max-width: 60ch; color: var(--testo-attenuato); }

/* ---------- parole degli ospiti ---------- */
.voci__titolo { margin: var(--s7) 0 var(--s5); font-size: clamp(20px, 2.2vw, 26px); }
.voci { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
@media (min-width: 760px) { .voci { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .voci { grid-template-columns: repeat(3, 1fr); } }
.voce { background: var(--sfondo); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: var(--s5); }
.voce__testo { margin: 0 0 var(--s3); font-size: 15px; line-height: 1.6; }
/* Testo intero nel documento, mostrato a sei righe: niente viene tagliato
   per davvero, si sceglie solo quanto vederne. */
.voce__testo--corto { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.voce__altro {
    margin: 0 0 var(--s4); padding: 0; border: 0; background: none;
    font: inherit; font-size: 14px; font-weight: 600; color: var(--accento); cursor: pointer;
}
.voce__altro:hover { text-decoration: underline; }
.voce__ritratto { width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover; }
.voce__testo::before { content: "\201C"; font-family: var(--titolo); font-size: 34px; line-height: 0; color: var(--accento); vertical-align: -6px; margin-right: 4px; }
.voce__persona { margin: 0; display: flex; align-items: center; gap: var(--s3); }
/* Iniziale al posto della fotografia: le immagini del profilo sono
   altrui e non abbiamo titolo per pubblicarle. */
.voce__iniziale {
    width: 40px; height: 40px; flex: none; border-radius: 50%;
    background: var(--accento); color: #fff;
    display: grid; place-items: center; font-family: var(--titolo); font-size: 19px;
}
.voce__persona strong { display: block; font-size: 15px; }
.voce__persona small { display: block; font-size: 13px; color: var(--testo-attenuato); }
.voci__attesa { margin: var(--s6) 0 0; font-size: 15px; color: var(--testo-attenuato); }
.voci__fonte { margin: var(--s5) 0 0; font-size: 15px; }
.voci__fonte a { font-weight: 600; text-decoration: none; }
.voci__fonte a:hover { text-decoration: underline; }

/* ---------- informazioni ---------- */
.prima { display: grid; gap: var(--s7); }
@media (min-width: 900px) { .prima { grid-template-columns: 1fr 1.15fr; gap: var(--s8); } }
.prima__colonna .etichetta { margin-bottom: var(--s4); }

.costi { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.costi li { display: flex; align-items: baseline; gap: var(--s4); }
/* Cifra a larghezza fissa: incolonnate si confrontano, sparse no. */
.costi strong { font-family: var(--titolo); font-size: 28px; color: var(--accento); min-width: 4.2ch; }
.costi b { display: block; font-size: 16px; font-weight: 600; }
.costi small { display: block; font-size: 14px; color: var(--testo-attenuato); max-width: 34ch; }

.condizioni { margin: 0; display: grid; gap: var(--s4); }
.condizioni dt { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--testo-attenuato); margin-bottom: 2px; }
.condizioni dd { margin: 0; font-size: 15px; max-width: 52ch; }

/* ---------- faq ---------- */
.faq { columns: 1; }
@media (min-width: 900px) { .faq { columns: 2; column-gap: var(--s8); } }
/* Una domanda non si spezza fra due colonne: meta in fondo a sinistra e
   meta in cima a destra e illeggibile. */
.faq details { border-bottom: 1px solid var(--bordo); break-inside: avoid; }
.faq summary { cursor: pointer; padding: var(--s4) 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: var(--s4); align-items: baseline; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accento); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details > p { padding-bottom: var(--s4); margin: 0; color: var(--testo-attenuato); font-size: 15px; line-height: 1.6; }

/* ---------- segnaposto sezioni dinamiche (TICKET-10b) ---------- */
.segnaposto {
    border: 1px dashed var(--bordo); border-radius: var(--raggio);
    padding: var(--s6); text-align: center; color: var(--testo-attenuato);
    background: var(--superficie);
}
.segnaposto p { margin: 0 auto; }

/* ---------- pie' di pagina ---------- */
.pie { background: var(--testo); color: #EFE9E1; padding-block: var(--s7); }
.pie a { color: #EFE9E1; }
.pie__griglia { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .pie__griglia { grid-template-columns: repeat(3, 1fr); gap: var(--s8); } }
.pie h3 { font-size: 16px; color: #fff; }
.pie p, .pie li { font-size: 14px; color: #CFC6BB; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.pie__nota { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid #3A342E; font-size: 13px; }

.da-completare { background: #FFF3CD; color: #6B5300; padding: 0 6px; border-radius: 3px; font-size: .9em; }

.salta-al-contenuto { position: absolute; left: -9999px; }
.salta-al-contenuto:focus { left: var(--gutter); top: var(--gutter); z-index: 100; background: var(--superficie); padding: var(--s3) var(--s4); border-radius: var(--raggio); }

/* =========================================================================
   Widget di prenotazione
   ========================================================================= */

.widget { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: var(--s5); }
.widget__caricamento { color: var(--testo-attenuato); margin: 0; }
.widget__corpo { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .widget__corpo { grid-template-columns: 1.4fr 1fr; gap: var(--s7); } }

.cal__barra { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.cal__scelta { margin: 0; font-weight: 600; text-align: center; flex: 1; }
.cal__freccia {
    min-width: 44px; min-height: 44px; border: 1px solid var(--bordo); background: var(--sfondo);
    border-radius: var(--raggio); font-size: 18px; cursor: pointer; color: var(--testo);
}
.cal { display: grid; gap: var(--s5); }
@media (min-width: 760px) { .cal { grid-template-columns: 1fr 1fr; } }
.cal__titolo { margin: 0 0 var(--s3); font-weight: 600; text-transform: capitalize; }
.cal__griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal__intestazione { font-size: 11px; color: var(--testo-attenuato); text-align: center; padding-bottom: var(--s2); text-transform: uppercase; }
.cal__giorno {
    aspect-ratio: 1; min-height: 38px; border: 0; background: transparent; border-radius: 6px;
    font: inherit; font-size: 14px; color: var(--testo); cursor: pointer;
}
.cal__giorno:hover:not(:disabled) { background: var(--bordo); }
.cal__giorno:disabled { cursor: not-allowed; }
.cal__giorno--occupata { color: var(--testo-attenuato); text-decoration: line-through; background: repeating-linear-gradient(45deg, transparent, transparent 3px, var(--bordo) 3px, var(--bordo) 5px); }
.cal__giorno--vicina { color: #B8AFA4; opacity: .6; }
.cal__giorno--interno { background: #F2E7DD; }
.cal__giorno--scelta { background: var(--accento); color: #fff; font-weight: 600; }
.cal__legenda { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s4); margin: var(--s4) 0 0; padding: 0; font-size: 13px; color: var(--testo-attenuato); }
.cal__legenda li { display: flex; align-items: center; gap: var(--s2); }
.cal__segno { width: 14px; height: 14px; border-radius: 3px; display: inline-block; border: 1px solid var(--bordo); }
.cal__segno--occupata { background: repeating-linear-gradient(45deg, transparent, transparent 3px, var(--bordo) 3px, var(--bordo) 5px); }
.cal__segno--vicina { background: #EDE6DE; }
.cal__segno--scelta { background: var(--accento); border-color: var(--accento); }

.widget__conto label { display: block; font-size: 14px; color: var(--testo-attenuato); margin-bottom: var(--s1); }
.widget__conto select, .widget__conto input[type="number"] {
    width: 100%; min-height: 44px; padding: 0 var(--s3); font: inherit;
    border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--sfondo); color: var(--testo);
}
.conto { list-style: none; margin: var(--s4) 0 0; padding: 0; border-top: 1px solid var(--bordo); }
.conto li { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--bordo); font-size: 15px; }
.conto li span:last-child { font-weight: 600; white-space: nowrap; }
.conto__totale { font-size: 17px; }
.conto__acconto span:last-child { color: var(--accento); }
.conto__tassa {
    margin-top: var(--s4); padding: var(--s3) var(--s4);
    border: 1px dashed var(--bordo); border-radius: var(--raggio);
    display: grid; grid-template-columns: 1fr auto; gap: 0 var(--s3); font-size: 14px;
}
.conto__tassa small { grid-column: 1 / -1; color: var(--testo-attenuato); font-size: 12px; }
.conto__nota { font-size: 13px; color: var(--testo-attenuato); margin: var(--s3) 0 0; }
.conto__errore { color: var(--errore); font-size: 15px; margin: var(--s4) 0 0; }

.barra {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4);
    background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
    padding: var(--s4) var(--s5);
}
.barra__testo { margin: 0; font-family: var(--titolo); font-size: 20px; }

/* =========================================================================
   Taglio "Vetrina" — hero pieno, fasce, mosaico, fughe
   ========================================================================= */

:root { --nero-caldo: #241F1B; }

/* Scala piu ampia: il taglio moderno lo danno scala e contrasto,
   non colori nuovi. */
h1 { font-size: clamp(44px, 7vw, 96px); line-height: 1.0; letter-spacing: -0.02em; }
h2 { font-size: clamp(30px, 4.2vw, 48px); line-height: 1.05; letter-spacing: -0.01em; }

.bottone--grande { min-height: 56px; padding: 0 var(--s6); font-size: 17px; }

/* ---------- hero a tutta altezza ---------- */
.eroe { position: relative; padding-bottom: var(--s7); }

/* La fotografia occupa la fascia alta e non viene scurita: il testo vive
   nella scheda sotto, su fondo chiaro, dove si legge sempre. Un velo
   abbastanza scuro da reggere cinque blocchi di testo si mangia la foto,
   ed era il motivo per cui la foto non si vedeva. */
.eroe__sfondo { height: clamp(300px, 52svh, 560px); background: var(--nero-caldo); }
.eroe__sfondo img { width: 100%; height: 100%; object-fit: cover; }

.eroe__scheda {
    position: relative;
    margin-top: clamp(-120px, -9svh, -56px);
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: var(--s5);
    box-shadow: 0 18px 48px rgba(42, 37, 33, .14);
}
@media (min-width: 900px) {
    .eroe__scheda { padding: var(--s6) var(--s7); max-width: 940px; }
}

.eroe__occhiello { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--testo-attenuato); margin: 0 0 var(--s3); }
.eroe__titolo { color: var(--testo); margin: 0 0 var(--s5); max-width: 20ch; text-wrap: balance; font-size: clamp(30px, 4.2vw, 52px); }
.eroe__prezzo { margin: var(--s4) 0 0; color: var(--testo-attenuato); font-size: 14px; display: flex; align-items: baseline; gap: var(--s2); }
.eroe__prezzo strong { font-family: var(--titolo); font-size: 24px; color: var(--testo); }

.eroe__dati {
    list-style: none; margin: var(--s5) 0 0; padding: var(--s4) 0 0;
    border-top: 1px solid var(--bordo);
    font-size: 14px; color: var(--testo-attenuato);
    /* Le voci si dimensionano sul proprio contenuto e lo spazio avanzato
       viene distribuito fra loro. Colonne di pari larghezza sembravano
       piu ordinate ma stringevano la terza voce al punto da spezzare
       "56 sqm" in inglese: le etichette tradotte hanno lunghezze molto
       diverse e una griglia rigida si dimensiona sulla piu lunga. */
    display: flex; flex-wrap: wrap; justify-content: space-between;
    gap: var(--s4) var(--s5);
}
.eroe__dati li { display: flex; align-items: center; gap: 7px; }
/* Il valore non si spezza mai: "56 sqm" e "750 m" sono unita singole e
   andare a capo in mezzo le rende illeggibili. */
.eroe__dati strong { white-space: nowrap; }
.eroe__dati strong { font-family: var(--titolo); font-size: 19px; color: var(--testo); }
.eroe__dati .icona { color: var(--accento); flex: none; }

/* ---------- fascia dei numeri (non piu in pagina dal 2026-10-11:
   i dati sono passati dentro la scheda dell'hero) ---------- */
.fascia { background: var(--nero-caldo); color: #fff; padding-block: var(--s6); }
.fascia__griglia { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5) var(--s4); }
@media (min-width: 760px) { .fascia__griglia { grid-template-columns: repeat(4, 1fr); } }
.fascia__voce { text-align: center; }
.fascia__voce strong { display: block; font-family: var(--titolo); font-size: clamp(32px, 4.5vw, 52px); line-height: 1; color: #fff; }
.fascia__voce span { display: block; margin-top: var(--s2); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #BFB2A5; }

/* ---------- sezione scura ---------- */
.sezione--scura { background: var(--nero-caldo); color: #EFE6DC; }
.sezione--scura h2 { color: #fff; }

/* ---------- mosaico ---------- */
.mosaico { display: grid; gap: var(--s3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) {
    .mosaico { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; }
    .mosaico__grande { grid-column: span 2; grid-row: span 2; }
    .mosaico__alta { grid-row: span 2; }
    .mosaico__piccola { grid-column: span 1; }
}
.mosaico figure { margin: 0; border-radius: var(--raggio); overflow: hidden; background: var(--bordo); }
.mosaico img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
@media (min-width: 900px) { .mosaico img { aspect-ratio: auto; } }

/* Una sola immagine che rompe il contenitore: usata una volta sola,
   altrimenti smette di essere un accento. */
.panoramica { margin: var(--s6) 0 0; width: 100%; }
.panoramica img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

/* ---------- fughe: l'immagine esce dal contenitore ---------- */
@media (min-width: 1100px) {
    .fuga { align-items: center; }
    .fuga figure img { border-radius: var(--raggio); }
    .fuga--destra > :last-child { margin-right: calc((100vw - var(--contenitore)) / -2); }
    .fuga--sinistra > :last-child { margin-left: calc((100vw - var(--contenitore)) / -2); }
    .fuga--sinistra { direction: rtl; }
    .fuga--sinistra > * { direction: ltr; }
}


/* ---------- barra fissa su telefono ---------- */
.barra-fissa {
    position: fixed; inset: auto 0 0 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
    padding: var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom));
    background: var(--superficie); border-top: 1px solid var(--bordo);
    box-shadow: 0 -4px 24px rgba(42,37,33,.10);
}
.barra-fissa__prezzo { display: flex; align-items: baseline; gap: var(--s2); font-size: 13px; color: var(--testo-attenuato); }
.barra-fissa__prezzo strong { font-family: var(--titolo); font-size: 22px; color: var(--testo); }
@media (min-width: 900px) { .barra-fissa { display: none; } }
/* Lo spazio sotto evita che la barra copra il footer. */
body.ha-barra-fissa { padding-bottom: 76px; }
@media (min-width: 900px) { body.ha-barra-fissa { padding-bottom: 0; } }

/* ---------- comparsa allo scorrimento ---------- */
.rivela { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.rivela--visibile { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .rivela { opacity: 1; transform: none; transition: none; }
}
/* Se il codice non parte, il contenuto deve restare leggibile. */
.no-js .rivela { opacity: 1; transform: none; }

/* =========================================================================
   Revisione UI/UX
   ========================================================================= */

.bottone--piccolo { min-height: 40px; padding: 0 var(--s4); font-size: 14px; }
.bottone--pieno { width: 100%; }
.bottone--whatsapp { background: #1F8F4E; }
.bottone--whatsapp:hover { background: #166B3A; }
.testata__prenota { display: none; }
@media (min-width: 900px) { .testata__prenota { display: inline-flex; } }

/* ---------- ricerca nell'hero ---------- */
.ricerca { display: grid; gap: var(--s3); }
@media (min-width: 720px) { .ricerca { grid-template-columns: 1fr 1fr .6fr auto; align-items: end; } }
.ricerca__campo { display: grid; gap: 4px; }
.ricerca__campo label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--testo-attenuato); }
.ricerca input, .ricerca select {
    min-height: 50px; padding: 0 var(--s3); font: inherit; color: var(--testo);
    border: 1px solid var(--bordo); border-radius: 6px; background: var(--sfondo); width: 100%;
}
.ricerca .bottone { min-height: 50px; }

/* ---------- calendario: prezzi e stati ---------- */
.cal__giorno {
    aspect-ratio: auto; min-height: 52px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 1px; padding: 4px 2px;
}
.cal__numero { font-size: 14px; line-height: 1; }
.cal__prezzo { font-size: 10px; line-height: 1; color: var(--testo-attenuato); font-variant-numeric: tabular-nums; }
.cal__giorno--scelta .cal__prezzo, .cal__giorno--interno .cal__prezzo { color: inherit; opacity: .85; }
.cal__giorno--non-ammessa { opacity: .35; }
.cal__giorno:focus-visible { outline: 3px solid var(--accento); outline-offset: 2px; z-index: 1; }
@media (max-width: 759px) {
    .cal { max-height: 60vh; overflow-y: auto; gap: var(--s4); scrollbar-width: thin; }
}

/* ---------- conto: due momenti distinti ---------- */
.conto__momenti { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s4); }
.conto__ora, .conto__dopo { border-radius: var(--raggio); padding: var(--s3) var(--s4); }
.conto__ora { background: var(--accento); color: #fff; }
.conto__dopo { background: var(--sfondo); border: 1px solid var(--bordo); }
.conto__ora span, .conto__dopo span { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.conto__ora strong, .conto__dopo strong { font-family: var(--titolo); font-size: 24px; line-height: 1.2; }

/* ---------- scheletro di caricamento ---------- */
.scheletro__riga { display: block; height: 20px; margin: var(--s3) 0; border-radius: 4px;
    background: linear-gradient(90deg, var(--bordo) 25%, #F3ECE4 50%, var(--bordo) 75%);
    background-size: 200% 100%; animation: scorri 1.2s linear infinite; }
@keyframes scorri { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .scheletro__riga { animation: none; } }

/* ---------- galleria ingrandibile ---------- */
.mosaico figure, .panoramica, .carosello__voce figure { position: relative; }
.mosaico__apri { position: absolute; inset: 0; border: 0; background: transparent; cursor: zoom-in; }
.mosaico__apri:focus-visible { outline: 3px solid var(--accento); outline-offset: -3px; }
.luce {
    position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
    gap: var(--s3); padding: var(--s4); background: rgba(16,12,10,.94);
}
.luce__immagine { max-width: min(1200px, 92vw); max-height: 86vh; object-fit: contain; border-radius: var(--raggio); }
.luce__chiudi, .luce__freccia {
    background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 999px;
    min-width: 48px; min-height: 48px; font-size: 22px; cursor: pointer; flex: none;
}
.luce__chiudi { position: absolute; top: var(--s4); right: var(--s4); }
.luce__chiudi:hover, .luce__freccia:hover { background: rgba(255,255,255,.25); }
body.luce-aperta { overflow: hidden; }

/* ---------- marchio ---------- */
.testata__nome { display: inline-flex; align-items: center; gap: var(--s2); }
/* Larghezza e altezza entrambe fissate, non solo l'altezza: una
   larghezza calcolata dipende dal contesto, e il contesto cambia con la
   lingua perche il menu accanto e piu o meno lungo. Con due misure fisse
   il marchio e identico ovunque. Il rapporto dell'immagine e 1217 per
   600, quindi a 46 di altezza corrispondono 93 di larghezza. */
.testata__nome img { width: 93px; height: 46px; max-width: none; object-fit: contain; object-position: left center; }
@media (max-width: 420px) { .testata__nome img { width: 73px; height: 36px; } }

.pie__marchio { margin: 0 0 var(--s3); }
.pie__marchio img { height: 56px; width: auto; }
.pie h3 { font-size: 15px; font-family: var(--testo-famiglia); font-weight: 600; letter-spacing: .04em; color: #CFC6BB; text-transform: uppercase; }

/* ---------- carosello della galleria ---------- */
.carosello { margin-top: var(--s5); }
.carosello__pista {
    list-style: none; margin: 0;
    /* Allineata al testo del contenitore: meta dello spazio avanzato piu
       il margine interno del contenitore stesso. Sommare solo il primo dei
       due lasciava la pista disallineata del margine, cioe di 32 pixel.
       Si usa 100% e non 100vw perche la larghezza della barra di
       scorrimento non va contata. */
    padding-inline: calc(max(0px, (100% - var(--contenitore)) / 2) + var(--gutter));
    /* [ATTENZIONE] Senza questo, lo scatto mangia il margine sinistro.
       `scroll-snap-align: start` allinea la prima immagine all'inizio
       dell'area di scorrimento, e per farlo il browser scorre di quanto
       vale il margine interno: il margine resta nel foglio di stile ma
       sparisce a video. Dichiarare l'inizio dell'area di scatto lo
       riporta al suo posto. */
    scroll-padding-inline: calc(max(0px, (100% - var(--contenitore)) / 2) + var(--gutter));
    display: flex; gap: var(--s3);
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.carosello__pista::-webkit-scrollbar { display: none; }
.carosello__pista:focus-visible { outline: 3px solid var(--accento); outline-offset: -3px; }
.carosello__voce { flex: 0 0 78%; scroll-snap-align: start; }
@media (min-width: 640px) { .carosello__voce { flex-basis: 42%; } }
@media (min-width: 1000px) { .carosello__voce { flex-basis: 30%; } }
.carosello__voce figure { margin: 0; position: relative; border-radius: var(--raggio); overflow: hidden; background: var(--bordo); }
.carosello__voce img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.carosello__voce figcaption {
    position: absolute; inset: auto 0 0 0; padding: var(--s7) var(--s4) var(--s4);
    color: #fff;
    background: linear-gradient(to top, rgba(20,16,13,.88) 20%, rgba(20,16,13,0));
}
.carosello__voce figcaption strong { display: block; font-size: 16px; letter-spacing: .01em; }
.carosello__voce figcaption span { display: block; margin-top: 2px; font-size: 13px; color: #E3D7CA; }

.galleria__intro { margin: 0; max-width: 60ch; color: var(--testo-attenuato); }
.galleria__nota { margin: var(--s5) 0 0; font-size: 14px; color: var(--testo-attenuato); }
.carosello__comandi { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-top: var(--s4); }
.carosello__conteggio { margin: 0; font-size: 14px; color: var(--testo-attenuato); font-variant-numeric: tabular-nums; }
.carosello__frecce { display: flex; gap: var(--s2); }
.carosello__freccia {
    min-width: 46px; min-height: 46px; border: 1px solid var(--bordo); border-radius: 999px;
    background: var(--sfondo); color: var(--testo); font-size: 17px; cursor: pointer;
}
.carosello__freccia:hover:not(:disabled) { background: var(--bordo); }
.carosello__freccia:disabled { opacity: .35; cursor: not-allowed; }


/* ---------- documenti legali ---------- */
.documento { padding-block: var(--s7) var(--s9); }
.documento h1 { font-size: clamp(30px, 4vw, 46px); max-width: 20ch; }
.documento__data { color: var(--testo-attenuato); font-size: 14px; margin-bottom: var(--s7); }
.documento h2 { font-size: clamp(19px, 2vw, 23px); margin: var(--s7) 0 var(--s4); max-width: 34ch; }
/* Misura di lettura stretta: un documento lungo su righe larghe non si
   legge, e questi sono i testi che qualcuno leggera davvero riga per riga. */
.documento p { max-width: 68ch; font-size: 16px; line-height: 1.7; }
.documento__titolare { margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--bordo); }