/* =========================================================================
   Dépendance Villanita · Castellana Grotte (BA), Puglia — font self-hosted.
   Nessuna richiesta a Google: l'indirizzo IP degli utenti non lascia il sito.
   Set "country luxury": Cormorant Garamond (wordmark + titoli),
   EB Garamond (testo), Jost (UI). Sottoinsiemi latin + latin-ext (IT / EN / FR).
   ========================================================================= */
/* ===== Cormorant Garamond 500 (titoli) ===== */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/cormorant-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/cormorant-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ===== Cormorant Garamond 600 (titoli) ===== */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/cormorant-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/cormorant-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ===== EB Garamond 400 normale (corpo) ===== */
@font-face {
    font-family: 'EB Garamond';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ebgaramond-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'EB Garamond';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ebgaramond-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ===== EB Garamond 400 italic (corpo enfasi) ===== */
@font-face {
    font-family: 'EB Garamond';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ebgaramond-400i-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'EB Garamond';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ebgaramond-400i-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ===== Jost 400 (UI/sans) ===== */
@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/jost-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/jost-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ===== Jost 500 (UI/sans) ===== */
@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/jost-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/jost-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ===== Jost 600 (UI/sans) ===== */
@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/jost-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/jost-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================================
   Dépendance Villanita · Castellana Grotte (BA), Puglia — style.css
   Palette e tipografia del moodboard di campagna: verde oliva, terracotta/rame,
   crema di pietra pugliese, magenta della bouganville.
   Struttura, ritmo, forme e animazioni identici al template di partenza.
   ========================================================================= */

/* ---------- Design tokens ---------- */
:root {
    /* Colori — moodboard di Dépendance Villanita (campagna di Castellana Grotte, Puglia);
       NESSUN nero. Verde oliva secolare + terracotta/rame del logo e del cotto +
       crema di pietra pugliese, con la bouganville magenta del giardino come accento. */
    --color-primary:     #566246;  /* verde oliva profondo — gli ulivi secolari */
    --color-secondary:   #8A9A6B;  /* salvia — foglie d'ulivo e macchia mediterranea */
    --color-accent:      #BE7F4E;  /* terracotta / rame — il colore del logo e del cotto pugliese */
    --color-accent-deep: #9C6234;
    --color-background:  #F6F1E7;  /* crema caldo — pietra e calce di Puglia */
    --color-surface:     #EFE7D8;  /* sabbia — fascia/scheda più profonda */
    --color-surface-2:   #E5DAC6;
    --color-text:        #3A352B;  /* bruno caldo scuro */
    --color-text-soft:   #6E6555;
    --color-border:      #C8BCA4;  /* sabbia-oliva — SOSTITUISCE OGNI NERO */
    --color-border-soft: #DDD5C4;
    --color-on-dark:     #F6F1E7;

    /* Terne RGB per i colori che servono anche con trasparenza (rgba() non
       accetta un #esadecimale come variabile). Prima erano numeri scritti a
       mano — ed erano rimasti quelli del template di partenza: un blu-petrolio
       marino che non c'entra nulla con la campagna di Castellana Grotte. */
    --rgb-on-dark:   246, 241, 231;   /* = --color-on-dark */
    --rgb-accent:    190, 127, 78;    /* = --color-accent  */
    --rgb-veil:       46,  42,  33;   /* bruno caldo scuro: i veli sulle foto */
    --color-primary-deep: #3B4430;    /* oliva più profondo: fondo del riquadro scuro */

    /* Type — country luxury, self-hosted. Wordmark in Cormorant Garamond, coerente
       con il serif elegante del logo "villanita"; titoli Cormorant, testo EB Garamond, UI Jost. */
    --font-brand:   "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --font-body:    "EB Garamond", Georgia, serif;
    --font-ui:      "Jost", "Helvetica Neue", Arial, sans-serif;

    /* Radius — 3 tiers: pills / cards / gallery */
    --r-pill: 999px;
    --r-card: 32px;
    --r-img:  50px;
    --r-sm:   16px;

    /* Spacing scale (8px base) */
    --s-1: 4px;  --s-2: 8px;  --s-3: 16px; --s-4: 24px;
    --s-5: 32px; --s-6: 48px; --s-7: 64px; --s-8: 96px; --s-9: 128px;

    /* Shadows — soft & warm only */
    --shadow-sm: 0 4px 14px rgba(29, 44, 51, .08);
    --shadow-md: 0 8px 24px rgba(29, 44, 51, .12);
    --shadow-lg: 0 18px 48px rgba(29, 44, 51, .18);

    --container: 1240px;
    --nav-h: 76px;
    --ease: cubic-bezier(.22, .61, .36, 1);

    /* Grondaia delle piste: quanto la fila rientra dal bordo dello schermo.
       Coincide con il margine del .container finché la finestra è più stretta
       del contenitore, poi resta ancorata alla colonna. */
    --rail-gutter: max(var(--s-4), calc((100vw - var(--container)) / 2));
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
    /* NIENTE `scroll-behavior: smooth` qui. Lo scorrimento morbido dei link
       interni lo fa già main.js (`window.scrollTo({behavior:'smooth'})`, con
       rispetto di prefers-reduced-motion). Dichiararlo sull'elemento radice lo
       applicava anche al RIPRISTINO della posizione dopo un ricaricamento: il
       browser ripartiva da zero e scendeva animando fino al punto salvato,
       ~1,2 secondi di pagina che scorre da sola a ogni refresh. */
    -webkit-text-size-adjust: 100%;
    /* Lo spazio della barra di scorrimento è riservato sempre: quando il menu o
       il lightbox bloccano lo scorrimento (`body { overflow: hidden }`) la barra
       sparisce e senza questo la pagina scatterebbe di lato di ~15px.
       Dove le barre sono a scomparsa (macOS, iOS) non riserva nulla. */
    scrollbar-gutter: stable;
    /* Niente ancoraggio: i `.reveal` nascono spostati di 28px e il browser, per
       «tenere fermo» ciò che guardi, compensava spostando la pagina di quei
       28px al ricaricamento. Tutte le immagini dichiarano width/height, quindi
       non c'è nulla che possa allungare la pagina mentre la leggi. */
    overflow-anchor: none;
}
body {
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-background);
    line-height: 1.7;
    font-size: 1.05rem;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    overflow-anchor: none;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
:focus-visible { outline: 2.5px solid var(--color-accent); outline-offset: 3px; border-radius: 6px; }

.skip-link {
    position: absolute; left: 16px; top: -60px; z-index: 2000;
    background: var(--color-primary); color: var(--color-on-dark);
    padding: 10px 18px; border-radius: var(--r-pill); transition: top .25s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 400; line-height: 1.12; color: var(--color-text); }
.brand-script { font-family: var(--font-brand); font-weight: 500; line-height: .9; letter-spacing: .5px; }
p + p { margin-top: var(--s-3); }

.eyebrow {
    font-family: var(--font-ui); font-weight: 500;
    text-transform: uppercase; letter-spacing: .22em;
    font-size: .74rem; color: var(--color-text-soft);
    margin-bottom: var(--s-3);
}
.eyebrow--center { text-align: center; }

.section__title { font-size: clamp(2rem, 4.2vw, 3.1rem); margin-bottom: var(--s-4); }
.section__title--center { text-align: center; }
.section__intro { max-width: 60ch; margin: 0 auto var(--s-6); text-align: center; color: var(--color-text-soft); }
.section__intro--left { margin-left: 0; text-align: left; }

/* ---------- Layout utilities ---------- */
.container { width: min(100% - 2 * var(--s-4), var(--container)); margin-inline: auto; }
.section { padding-block: clamp(var(--s-7), 11vw, var(--s-9)); position: relative; }
.section + .section { border-top: 1px solid var(--color-border-soft); }
.section--surface { background: var(--color-surface); border-top-color: transparent; }

/* ---------- Pills / buttons ---------- */
.pill {
    --pill-bg: transparent;
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-family: var(--font-ui); font-weight: 500; font-size: .95rem;
    padding: 12px 22px; border-radius: var(--r-pill);
    border: 1.5px solid var(--color-border);
    background: var(--pill-bg); color: var(--color-primary);
    transition: transform .3s var(--ease), background-color .3s var(--ease),
                color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
    white-space: nowrap;
}
.pill__arrow {
    display: inline-grid; place-items: center; width: 22px; height: 22px;
    border-radius: 50%; background: rgba(var(--rgb-veil), .12);
    transition: transform .3s var(--ease), background-color .3s var(--ease);
}


.pill--solid { background: var(--color-primary); color: var(--color-on-dark); border-color: var(--color-primary); }
.pill--solid .pill__arrow { background: rgba(var(--rgb-on-dark), .2); }

.chip {
    font-family: var(--font-ui); font-size: .8rem; font-weight: 500;
    padding: 5px 14px; border-radius: var(--r-pill);
    border: 1.5px solid var(--color-border); color: var(--color-text-soft);
    white-space: nowrap; align-self: center;
}

/* ====================================================================
   NAVBAR
   ==================================================================== */
.navbar {
    position: sticky; top: 0; z-index: 1000;
    background: rgba(var(--rgb-on-dark), .82);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--color-border-soft);
    transition: box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.navbar.is-scrolled { box-shadow: var(--shadow-sm); background: rgba(var(--rgb-on-dark), .94); }
.navbar__inner {
    min-height: var(--nav-h);
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-3);
}
.navbar__brand { justify-self: center; text-align: center; display: grid; place-items: center; line-height: 1; }
.navbar__logo { height: 58px; width: auto; display: block; transition: height .35s var(--ease); }
/* La transizione sta sulla regola base e non su `.is-scrolled`: altrimenti il
   logo si rimpicciolisce con calma e torna grande di scatto. */
.navbar.is-scrolled .navbar__logo { height: 52px; }
.brand-script { font-size: 2.1rem; color: var(--color-primary); }
.navbar__actions { justify-self: end; display: flex; align-items: center; gap: var(--s-2); }

.lang { position: relative; }
.lang-pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-ui); font-size: .85rem; font-weight: 500;
    padding: 8px 14px; border: 1.5px solid var(--color-border);
    border-radius: var(--r-pill); color: var(--color-text-soft);
    transition: border-color .25s var(--ease), color .25s var(--ease);
}
.lang-pill svg { color: var(--color-border); transition: transform .3s var(--ease); }
.lang-pill[aria-expanded="true"] svg { transform: rotate(180deg); }
.lang-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 1200;
    min-width: 160px; padding: 6px;
    background: var(--color-background); border: 1px solid var(--color-border-soft);
    border-radius: var(--r-sm); box-shadow: var(--shadow-md);
    display: grid; gap: 2px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.lang.is-open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-opt {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-ui); font-size: .9rem; color: var(--color-text);
    padding: 9px 12px; border-radius: 10px; transition: background-color .2s var(--ease);
}
.lang-opt.is-active { color: var(--color-primary); font-weight: 600; background: var(--color-surface); }
.lang-opt.is-active::after { content: "✓"; margin-left: auto; color: var(--color-accent); }
.nav-contact { padding: 9px 18px; }

/* language switch inside the card menu */
.nav-menu__lang { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }
.nav-menu__lang-opt {
    font-family: var(--font-ui); font-size: .82rem; letter-spacing: .03em;
    padding: 7px 14px; border-radius: var(--r-pill);
    border: 1.5px solid var(--color-border-soft); color: var(--color-text-soft);
    transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.nav-menu__lang-opt.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-dark); }

/* menu toggle */
.nav-toggle { justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--r-pill); }
.nav-toggle__bars { display: grid; gap: 5px; width: 26px; }
.nav-toggle__bars span { height: 2px; background: var(--color-primary); border-radius: 2px; transition: transform .35s var(--ease), opacity .25s var(--ease); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* overlay menu — sliding card from the left (page stays visible & dimmed behind) */
.nav-menu {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 1100;
    width: min(380px, 86vw);
    padding: var(--s-3);
    display: flex;
    transform: translateX(-100%); transition: transform .5s var(--ease);
    visibility: hidden;
}
.nav-menu.is-open { transform: translateX(0); visibility: visible; }
.nav-menu__panel {
    position: relative;
    width: 100%; height: 100%;
    background: var(--color-background);
    border-radius: 50px;
    box-shadow: var(--shadow-lg);
    padding: var(--s-7) var(--s-5) var(--s-5);
    display: flex; flex-direction: column; justify-content: space-between;
    overflow-y: auto; overscroll-behavior: contain;
}
.nav-menu__close {
    position: absolute; top: var(--s-4); right: var(--s-4);
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: var(--r-pill);
    color: var(--color-primary); border: 1.5px solid var(--color-border-soft);
    transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.nav-menu__list { display: grid; gap: var(--s-2); }
.nav-menu__link {
    font-family: var(--font-heading); font-size: clamp(1.6rem, 4.5vw, 2.2rem);
    color: var(--color-text); display: inline-block; padding: 6px 0; width: fit-content;
    position: relative; transition: color .3s var(--ease), padding-left .3s var(--ease);
}
.nav-menu__link::before {
    content: ""; position: absolute; left: -2px; bottom: 10px;
    width: 0; height: 2px; background: var(--color-accent); transition: width .35s var(--ease);
}
.nav-menu__foot { display: grid; gap: 4px; border-top: 1px solid var(--color-border-soft); padding-top: var(--s-4); }
.nav-menu__brand { font-size: 2.4rem; color: var(--color-primary); }
.nav-menu__tag { font-family: var(--font-ui); font-size: .8rem; letter-spacing: .12em; color: var(--color-text-soft); text-transform: uppercase; }
.nav-backdrop { position: fixed; inset: 0; z-index: 1050; background: rgba(var(--rgb-veil), .45); opacity: 0; transition: opacity .4s var(--ease); }
.nav-backdrop.is-open { opacity: 1; }

/* ====================================================================
   HERO
   ==================================================================== */
/* La navbar è `sticky`, quindi occupa 77px di flusso PRIMA della hero: con
   `min-height: 100svh` la hero sarebbe alta uno schermo intero a partire da
   sotto la navbar, sporgendo di 77px oltre la piega. Il blocco di testo,
   centrato su quell'altezza, cadeva 39px sotto il centro di ciò che si vede.
   Togliendo l'altezza della navbar (più il suo bordo) la hero finisce esatta
   sulla piega e il testo è centrato davvero, su ogni schermo.
   `svh` (small viewport height) è l'unità giusta sul telefono: resta stabile
   quando le barre del browser compaiono e scompaiono, quindi la hero non
   «respira» mentre si scorre. */
.hero {
    position: relative;
    min-height: calc(100vh - var(--nav-h) - 1px);
    min-height: calc(100svh - var(--nav-h) - 1px);
    display: flex; align-items: center; justify-content: center;
    text-align: center; color: var(--color-on-dark); overflow: hidden;
}
.hero__bg {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    /* Nessuno zoom: la foto resta nitida anche sui monitor ampi. */
    transform: none; animation: none;
    /* La foto sta qui e non più in uno style inline: una media query non batte
       lo stile inline, e al telefono va servito un file diverso. Base = il
       ritaglio verticale (mobile-first); da 768px la versione larga.
       I percorsi sono relativi a questo file, quindi valgono per IT, EN e FR. */
    background-image: url('../images/hero-villanita-mobile.jpg');
    background-image: -webkit-image-set(url('../images/hero-villanita-mobile.webp') type('image/webp'),
                                        url('../images/hero-villanita-mobile.jpg') type('image/jpeg'));
    background-image: image-set(url('../images/hero-villanita-mobile.webp') type('image/webp'),
                                url('../images/hero-villanita-mobile.jpg') type('image/jpeg'));
}
/* Desktop e tablet (viewport largo): la foto piena, con l'inquadratura alzata
   per far entrare l'intera fontana togliendo cielo in alto. */
@media (min-width: 768px) {
    .hero__bg {
        background-position: center 72%;
        background-image: url('../images/hero-villanita.jpg');
        background-image: -webkit-image-set(url('../images/hero-villanita.webp') type('image/webp'),
                                            url('../images/hero-villanita.jpg') type('image/jpeg'));
        background-image: image-set(url('../images/hero-villanita.webp') type('image/webp'),
                                    url('../images/hero-villanita.jpg') type('image/jpeg'));
    }
}
/* Il velo è una FASCIA orizzontale, non un'ellisse: la foto della fontana ha il
   cielo chiaro proprio dietro al testo, e un alone ovale si spegneva ai bordi
   lasciando l'occhiello illeggibile sul chiaro. La fascia ha la stessa densità
   da bordo a bordo e cresce dove passano le righe, alleggerendosi sopra (dove
   c'è solo cielo) e sotto (la fontana e il cotto restano ai colori veri).
   Densità tarata sul contrasto misurato: bianco su foto, minimo 4.5:1 anche
   sulle righe piccole. Il colore è il bruno caldo della palette — prima era un
   blu-petrolio rimasto dal template marino di partenza, che raffreddava la foto. */
.hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom,
        rgba(var(--rgb-veil), .24) 0%,
        rgba(var(--rgb-veil), .56) 16%,
        rgba(var(--rgb-veil), .62) 46%,
        rgba(var(--rgb-veil), .54) 74%,
        rgba(var(--rgb-veil), .36) 100%);
}
.hero__content { position: relative; z-index: 2; max-width: 880px; padding-block: var(--s-9); }
/* Schermi bassi (telefoni non recenti, finestre desktop schiacciate): con 128px
   di respiro sopra e sotto, il blocco di testo era più alto della fascia libera
   e smetteva di essere centrato — sporgeva in basso. Con un respiro
   proporzionato ci sta dentro e resta al centro. */
@media (max-height: 820px) {
    .hero__content { padding-block: var(--s-5); }
}
/* Schermi molto bassi (iPad in orizzontale, telefoni piccoli): il respiro si
   stringe ancora, altrimenti il blocco non entra nella fascia sotto la navbar. */
@media (max-height: 660px) {
    .hero__content { padding-block: var(--s-4); }
}
/* `text-indent` pari alla spaziatura: una riga centrata con letter-spacing
   porta uno spazio anche DOPO l'ultima lettera, e il blocco risulta spostato a
   sinistra di mezza spaziatura. L'indent rimette il testo in asse. */
.hero__eyebrow {
    color: rgba(var(--rgb-on-dark), .95);
    letter-spacing: .3em; text-indent: .3em;
    text-shadow: 0 1px 3px rgba(var(--rgb-veil), .6), 0 2px 14px rgba(var(--rgb-veil), .45);
}
.hero__title { margin-bottom: var(--s-4); }
/* Il nome è il vertice della gerarchia: più grande e in peso 600 (il file del
   font c'è già ed è precaricato), non 500 come il resto dei titoli. La
   specificità maggiore serve a battere la regola `.brand-script` del telefono. */
.hero__title .hero__script {
    display: block;
    font-weight: 600;
    font-size: clamp(3.6rem, 17.5vw, 9rem);
    letter-spacing: .5px; text-indent: .5px;
    color: #fff;
    text-shadow: 0 2px 28px rgba(var(--rgb-veil), .55), 0 1px 4px rgba(var(--rgb-veil), .45);
}
/* Il sottotitolo è di servizio: sotto il nome, più piccolo e meno spaziato di
   prima, così smette di contendergli la scena sul telefono. */
.hero__sub {
    display: block; font-family: var(--font-ui); font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .34em; text-indent: .34em;
    /* L'interruzione nel sottotitolo serve solo al telefono: sopra i 700px la
       riga ci sta tutta e spezzarla lascerebbe una frase corta a metà. */
    font-size: clamp(.74rem, 1.9vw, 1rem); margin-top: var(--s-3);
    color: rgba(var(--rgb-on-dark), .88);
    text-shadow: 0 1px 3px rgba(var(--rgb-veil), .6), 0 2px 14px rgba(var(--rgb-veil), .45);
}
.hero__sub br { display: none; }
.hero__lead {
    max-width: 60ch; margin: 0 auto var(--s-6); font-size: 1.18rem;
    color: var(--color-on-dark);
    text-shadow: 0 1px 12px rgba(var(--rgb-veil), .55), 0 1px 3px rgba(var(--rgb-veil), .4);
}
.hero__actions { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }
.hero .pill--ghost { color: var(--color-on-dark); border-color: rgba(var(--rgb-on-dark), .65); }
.hero .pill--ghost .pill__arrow { background: rgba(var(--rgb-on-dark), .18); }
/* ====================================================================
   LA STRUTTURA
   ==================================================================== */
.struttura__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--s-5), 6vw, var(--s-8)); align-items: center; }
.struttura__media picture { display: block; }
.struttura__media img { width: 100%; border-radius: var(--r-img); box-shadow: var(--shadow-md); aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%; }
.facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin-top: var(--s-5); }
.fact {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-ui); font-size: .9rem; color: var(--color-text-soft);
    padding: 8px 16px; border: 1.5px solid var(--color-border); border-radius: var(--r-pill);
}
.fact .icon { color: var(--color-border); }

/* ====================================================================
   SERVIZI
   ==================================================================== */
/* Pista a DUE righe che scorre in orizzontale (vedi blocco PISTA più sotto).
   `grid-auto-flow: column` riempie prima la colonna e poi passa alla
   successiva: il passo dello scorrimento è la colonna, che è ciò che il JS
   misura sul primo figlio. Le colonne per schermata crescono nei breakpoint
   (560 › 760 › 1100 › 1400). Niente margin-bottom: lo spazio sotto lo
   mettono le frecce (`#servizi .rail-nav`). */
.amenities {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-columns: 78%;
    gap: var(--s-3);
}
.amenity { scroll-snap-align: start; }
#servizi .rail-nav { margin-bottom: var(--s-6); }
.amenity {
    display: flex; align-items: center; gap: var(--s-3);
    background: var(--color-background); border: 1px solid var(--color-border-soft);
    border-radius: var(--r-card); padding: var(--s-4);
    font-family: var(--font-ui); font-size: .98rem;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.section--surface .amenity { background: var(--color-background); }
.amenity__ic { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--color-surface-2); color: var(--color-primary); }

.shuttle {
    display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
    background: linear-gradient(120deg, var(--color-primary), var(--color-primary-deep));
    color: var(--color-on-dark); border-radius: var(--r-card);
    padding: clamp(var(--s-4), 4vw, var(--s-6)); box-shadow: var(--shadow-md);
}
.shuttle__ic { display: grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: 50%; background: rgba(var(--rgb-on-dark), .14); color: var(--color-on-dark); }
.shuttle__body { flex: 1 1 280px; }
.shuttle__title { color: var(--color-on-dark); font-size: 1.6rem; margin-bottom: 4px; }
.shuttle__body p { color: rgba(var(--rgb-on-dark), .9); }
.shuttle__cta { color: var(--color-on-dark); border-color: rgba(var(--rgb-on-dark), .6); }
.shuttle__cta .pill__arrow { background: rgba(var(--rgb-on-dark), .2); }

/* ====================================================================
   PISTA (rail) — la meccanica condivisa da servizi, galleria e recensioni
   Una fila lunga che scorre in orizzontale: `overflow-x` + `scroll-snap`,
   quindi swipe, trackpad e frecce della tastiera arrivano dal browser.
   Il JS (rail() in main.js) misura il primo figlio e ricava il passo delle
   frecce, quindi non conosce questi numeri e non va toccato se cambiano.
   `margin-inline: calc(50% - 50vw)` porta la pista al bordo dello schermo e
   il padding restituisce la grondaia: vedere la fila tagliata dal bordo dice
   «continua» meglio di qualunque freccia. `scroll-padding-inline` allinea lo
   snap al bordo della colonna e non a quello dello schermo.
   ==================================================================== */
.rail {
    overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
    margin-inline: calc(50% - 50vw);
    padding: var(--s-2) var(--rail-gutter);
    scroll-padding-inline: var(--rail-gutter);
}
/* Lo snap serve al dito: con mouse e trackpad litiga con lo scorrimento
   libero, quindi si dichiara solo dove il puntatore è grossolano. */
@media (hover: none) and (pointer: coarse) {
    .rail { scroll-snap-type: x mandatory; }
}
.rail::-webkit-scrollbar { width: 0; height: 0; }

/* Frecce sotto la pista: cerchio, bordo 1.5px, chevron SVG. La sinistra
   nasce `hidden` e il JS la scopre dopo il primo scorrimento; `disabled`
   è opaca e fuori dall'ordine di tabulazione. */
.rail-nav {
    display: flex; justify-content: center; gap: var(--s-2);
    margin-top: var(--s-4);
}
.rail__arrow {
    display: grid; place-items: center;
    width: 46px; height: 46px; padding: 0;
    border-radius: 50%; border: 1.5px solid var(--color-border);
    background: var(--color-background); color: var(--color-primary);
    transition: border-color .22s var(--ease), background-color .22s var(--ease), opacity .22s var(--ease);
}
.rail__arrow[hidden] { display: none; }
.rail__arrow:disabled { opacity: .38; cursor: not-allowed; }

/* ====================================================================
   GALLERIA — pista unica con frecce, 50px radius
   Base = una riga, una foto per schermata in verticale (telefono). Da
   760px la pista diventa a DUE righe e cresce di colonna in colonna.
   `g-tall` sta SOLO sulle foto verticali: da 760px vale «una colonna
   intera» e `dense` ricompatta i buchi. Fra due `g-tall` il numero di
   riquadri 1x1 deve essere PARI, altrimenti `dense` risucchia la foto
   successiva e l'ordine si scompagina.
   ==================================================================== */
/* `--gal-quota` (quanto della pista occupa un riquadro) e `--gal-riga`
   (l'altezza della riga da 760px in su) stanno qui una volta sola: le usano sia
   i riquadri sia la `min-height` della pista, così i due valori non possono
   scollarsi fra loro nei breakpoint.
   La `min-height` serve perché i riquadri li crea main.js: finché non gira, la
   pista sarebbe alta zero e il documento 472px più corto — abbastanza perché il
   browser, ricaricando una pagina già scorsa in basso, ripristini la posizione
   sbagliata (e perché la pagina «salti» sulle connessioni lente).
   Base = una foto per schermata, ritaglio 4:5: altezza = larghezza × 5/4. */
.gallery-grid {
    --gal-quota: .82;
    display: flex; gap: var(--s-3);
    min-height: calc((100vw - 2 * var(--rail-gutter)) * var(--gal-quota) * 1.25 + 2 * var(--s-2));
}
.gallery-item {
    position: relative; overflow: hidden; border-radius: var(--r-img);
    box-shadow: var(--shadow-sm); padding: 0; display: block;
    flex: 0 0 calc(var(--gal-quota) * 100%); scroll-snap-align: start; aspect-ratio: 4 / 5;
}
.gallery-item picture { display: block; width: 100%; height: 100%; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.gallery-item::after {
    content: ""; position: absolute; inset: 0; border-radius: var(--r-img);
    background: linear-gradient(to top, rgba(var(--rgb-veil), .38), transparent 55%);
    opacity: 0; transition: opacity .4s var(--ease);
}

/* Lightbox */
.lightbox {
    position: fixed; inset: 0; z-index: 1600; display: flex; align-items: center; justify-content: center;
    background: rgba(var(--rgb-veil), .94); padding: var(--s-5);
    opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__fig { max-width: min(1100px, 92vw); text-align: center; }
.lightbox__img { max-height: 80vh; width: auto; margin: 0 auto; border-radius: var(--r-card); box-shadow: var(--shadow-lg); }
.lightbox__cap { color: rgba(var(--rgb-on-dark), .85); font-family: var(--font-ui); font-size: .9rem; margin-top: var(--s-3); }
.lightbox__close, .lightbox__nav {
    position: absolute; color: var(--color-on-dark); display: grid; place-items: center;
    width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid rgba(var(--rgb-on-dark), .4);
    background: rgba(var(--rgb-on-dark), .08); font-size: 2rem; line-height: 1; transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.lightbox__close { top: 22px; right: 22px; font-size: 1.8rem; }
.lightbox__nav--prev { left: 22px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 22px; top: 50%; transform: translateY(-50%); }

/* ====================================================================
   DINTORNI
   ==================================================================== */
.dintorni__group { font-size: 1.35rem; color: var(--color-primary); margin: var(--s-6) 0 var(--s-4); }
.dintorni__group:first-of-type { margin-top: var(--s-2); }
/* minmax(0, 1fr) e non 1fr: il minimo di `1fr` è il min-content, e un nome lungo
   ("Locorotondo, Cisternino et Martina Franca" in francese) allargava la traccia
   oltre il contenitore, facendo scorrere la pagina in orizzontale su telefono. */
.places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.place {
    display: flex; align-items: center; gap: var(--s-3);
    background: var(--color-background); border: 1px solid var(--color-border-soft);
    border-radius: var(--r-card); padding: var(--s-4);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.place__ic { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--color-surface-2); color: var(--color-primary); }
/* stesso motivo: un flex item ha min-width: auto e il testo lungo teneva larga la
   scheda, spingendo la chip della distanza fuori dalla pagina. */
.place__body { flex: 1; min-width: 0; }
.place__name { font-size: 1.2rem; }
.place__desc { font-family: var(--font-ui); font-size: .85rem; color: var(--color-text-soft); line-height: 1.5; }

/* ====================================================================
   RECENSIONI
   ==================================================================== */
/* Pista con frecce sotto, card «trasparente»: 1 card per schermata sul
   telefono, 2 da 760px, 3 da 900px, 4 da 1100px (i breakpoint in fondo al
   foglio). Le recensioni sono l'unico posto in cui parla qualcun altro:
   niente riquadro, niente bordo — un virgolettone tipografico dietro le
   prime righe, il testo in serif, la firma sotto un filetto color accento.
   Nessun punteggio, nessuna stella: parla solo la voce dell'ospite. */
.reviews-carousel { position: relative; }

.reviews {
    --rev-gap: var(--s-3);
    --rev-basis: 100%;
    display: flex;
    align-items: stretch;
    gap: var(--rev-gap);
}
/* Card aperta («Leggi tutto»): la riga si allunga per lei sola. La classe
   la mette e la toglie main.js, sulla pista, non sulla card. */
.reviews.has-expanded { align-items: flex-start; }

.review {
    position: relative;
    flex: 0 0 var(--rev-basis);
    min-width: 0;
    scroll-snap-align: start;
    display: flex; flex-direction: column; gap: var(--s-2);
    background: transparent; border: none;
    border-radius: 0; padding: var(--s-4) var(--s-3);
}
/* La virgoletta: carattere tipografico vero (U+201C) del font dei titoli,
   grande e trasparente DIETRO le prime righe. `aria-hidden` nell'HTML. */
.review__top {
    position: absolute; top: 0; left: 0; z-index: 0;
    pointer-events: none;
}
.review__quote {
    display: block;
    font-family: var(--font-heading); font-weight: 400;
    font-size: 6rem; line-height: 1;
    color: var(--color-accent); opacity: .3;
    margin: -.3em 0 0 -.07em;
}
/* Il virgolettato pesa per corpo e interlinea. Troncato a 4 righe: il
   bottone «Leggi tutto» compare (via JS) solo dove il testo esce davvero. */
.review__text {
    position: relative; z-index: 1;
    font-family: var(--font-heading); font-weight: 400;
    color: var(--color-text); font-size: 1.22rem; line-height: 1.5;
    padding-top: var(--s-5);
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 4; line-clamp: 4;
    overflow: hidden;
}
.review.is-expanded .review__text {
    display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible;
}
.review.is-expanded .review__text p + p { margin-top: var(--s-3); }

/* «Leggi tutto» / «Chiudi». Nasce `hidden` nell'HTML; lo mostra il JS.
   Area di tocco piena (44px) con padding verticale, testo su una riga. */
.review__more {
    position: relative; z-index: 1;
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: var(--s-1);
    min-height: 44px; padding: 10px 0;
    font-family: var(--font-ui); font-size: .82rem; font-weight: 500;
    color: var(--color-primary);
    text-decoration: underline; text-underline-offset: 4px;
    text-decoration-thickness: 1px; text-decoration-color: var(--color-border);
    transition: text-decoration-color .22s var(--ease);
}
/* Nascosto ma NON tolto dal flusso: il bottone nasce `hidden` e lo scopre il JS
   solo dove il testo esce davvero. Con `display: none` la pista si allungava di
   52px nell'istante in cui il JS girava, e il documento cambiava altezza sotto
   i piedi del browser mentre ripristinava la posizione di scorrimento dopo un
   ricaricamento. Riservando lo spazio l'altezza è la stessa prima e dopo — e
   non si vede nulla, perché la firma è comunque inchiodata in fondo alla card.
   `visibility: hidden` lo tiene fuori dal fuoco e dai lettori di schermo. */
.review__more[hidden] { display: inline-flex; visibility: hidden; }
.review__more-ic { display: inline-flex; transition: transform .22s var(--ease); }
.review.is-expanded .review__more-ic { transform: rotate(180deg); }

/* La firma, inchiodata in fondo da `margin-top: auto`, sotto un filetto
   color accento: è il segno che dice «qui finisce la voce dell'ospite». */
.review__by {
    position: relative; z-index: 1;
    display: grid; gap: 2px; margin-top: auto;
    padding-top: var(--s-3);
}
.review__by::before {
    content: ""; position: absolute; top: 0; left: 0; width: 46px; height: 1px;
    background: var(--color-accent);
}
.review__name { font-family: var(--font-ui); font-weight: 500; font-size: 1.02rem; letter-spacing: .01em; }
.review__date { font-family: var(--font-ui); font-size: .78rem; color: var(--color-text-soft); }

/* Bottoni «Leggi tutte le recensioni su Airbnb» dopo la pista:
   affiancati sul desktop, a piena larghezza appena non ci stanno. */
.reviews__actions {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--s-3); margin-top: var(--s-6);
}
.reviews__actions .pill {
    flex: 1 1 260px; max-width: 340px;
    justify-content: center; min-height: 48px; white-space: normal; text-align: center;
}

/* ====================================================================
   BUONO A SAPERSI
   ==================================================================== */
.info__grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(var(--s-5), 6vw, var(--s-8)); align-items: start; }
.info__head { position: sticky; top: calc(var(--nav-h) + var(--s-4)); }
.info__list { display: grid; gap: var(--s-3); }
.info__item {
    display: flex; gap: var(--s-3); align-items: flex-start;
    background: var(--color-background); border: 1px solid var(--color-border-soft);
    border-radius: var(--r-card); padding: var(--s-4) var(--s-5);
}
.info__item div { font-size: .98rem; }
.info__ic { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--color-surface-2); color: var(--color-primary); }

/* ====================================================================
   CONTATTI
   ==================================================================== */
.contatti__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(var(--s-5), 6vw, var(--s-8)); align-items: start; }
.contatti__list { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
/* min-width: 0 sul contenuto della riga — un figlio flex non scende sotto il proprio
   min-content, e le etichette lunghe (EN/FR) gonfiavano la traccia della griglia
   oltre il contenitore: scorrimento orizzontale a 320px. */
.contatti__list li { display: flex; gap: var(--s-3); align-items: center; }
.contatti__list li > *:not(.contatti__ic) { min-width: 0; }
.contatti__ic { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--color-surface); color: var(--color-primary); }
.contatti__lab { display: block; font-family: var(--font-ui); font-size: .72rem; text-transform: uppercase; letter-spacing: .18em; color: var(--color-text-soft); }
/* L'indirizzo email è una stringa unica di 29 caratteri: senza questo la sua
   larghezza minima diventa quella della colonna e su uno schermo da 320px la
   pagina scorreva in orizzontale. `anywhere` (e non `break-word`) perché solo
   `anywhere` riduce anche la min-content dell'elemento. */
.contatti__list a, .footer__list a, .legal a { overflow-wrap: anywhere; }
.contatti__card {
    background: var(--color-surface); border: 1px solid var(--color-border-soft);
    border-radius: var(--r-card); padding: clamp(var(--s-5), 4vw, var(--s-6)); box-shadow: var(--shadow-sm);
}
.contatti__card-title { font-size: 1.6rem; margin-bottom: var(--s-2); }
.contatti__cta { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
/* Le pill nascono `nowrap`: qui, dentro una colonna stretta, un'etichetta lunga
   («Écrivez-nous sur WhatsApp») allargava la scheda oltre il contenitore e la
   pagina scorreva in orizzontale a 320px. Nella card i bottoni sono a piena
   larghezza, quindi possono andare a capo senza perdere la forma. */
.contatti__cta .pill { justify-content: center; white-space: normal; text-align: center; }
.contatti__note { font-family: var(--font-ui); font-size: .9rem; color: var(--color-text-soft); }

.pending {
    display: inline-block; font-family: var(--font-ui); font-size: .78rem; font-style: normal;
    color: var(--color-accent-deep); background: rgba(var(--rgb-accent), .12);
    border: 1px dashed var(--color-accent); border-radius: var(--r-pill); padding: 2px 10px;
}

/* ====================================================================
   LEGAL PAGES
   ==================================================================== */
.legal__wrap { max-width: 760px; }
.legal h2 { font-size: 1.5rem; margin: var(--s-6) 0 var(--s-2); color: var(--color-primary); }
.legal p { color: var(--color-text-soft); }
.legal__note { margin-bottom: var(--s-5); }
.legal__back { margin-top: var(--s-7); }

/* ====================================================================
   FOOTER
   ==================================================================== */
.footer { background: var(--color-primary); color: var(--color-on-dark); padding-top: var(--s-8); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-6); padding-bottom: var(--s-7); }
.footer__name { font-size: 2.8rem; color: var(--color-on-dark); display: block; }
.footer__sub { font-family: var(--font-ui); font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: rgba(var(--rgb-on-dark), .7); }
.footer__tag { margin-top: var(--s-3); color: rgba(var(--rgb-on-dark), .82); font-size: .95rem; }
.footer__title { color: var(--color-on-dark); font-size: 1.25rem; margin-bottom: var(--s-3); }
.footer__list { display: grid; gap: 10px; font-family: var(--font-ui); font-size: .92rem; color: rgba(var(--rgb-on-dark), .82); }
.footer__list a { transition: color .25s var(--ease); }
.footer__bar { border-top: 1px solid rgba(var(--rgb-on-dark), .18); }
/* Lo spazio riservato in fondo deve stare sotto ENTRAMBI i bottoni flottanti,
   non solo sotto «Contatti». `.fab--top` sta a `bottom: 92px` ed e' alto 48px,
   quindi occupa la fascia 92-140px dal fondo della finestra: con i 56px di prima
   la riga legale finiva a 80px dal fondo e il cerchio ne copriva la coda (il CIN
   e il codice fiscale) fra ~700 e ~1400px di viewport. 124px portano la riga a
   148px dal fondo, 8px sopra il bordo alto del bottone. */
.footer__bar-inner { display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; padding-block: var(--s-4) calc(var(--s-4) + 124px); font-family: var(--font-ui); font-size: .82rem; color: rgba(var(--rgb-on-dark), .82); }
.footer .pending { color: #E9D6C7; background: rgba(var(--rgb-on-dark), .12); border-color: rgba(var(--rgb-on-dark), .5); }

/* ====================================================================
   FLOATING BUTTONS
   ==================================================================== */
.fab {
    position: fixed; z-index: 900; display: inline-flex; align-items: center; gap: 10px;
    border-radius: var(--r-pill); box-shadow: var(--shadow-md);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), opacity .3s var(--ease), background-color .3s var(--ease);
}
.fab--contact { right: 22px; bottom: 22px; background: var(--color-accent); color: var(--color-on-dark); padding: 14px 20px; font-family: var(--font-ui); font-weight: 500; }
.fab--top { right: 22px; bottom: 92px; width: 48px; height: 48px; justify-content: center; background: var(--color-background); color: var(--color-primary); border: 1.5px solid var(--color-border); }
.fab[hidden] { opacity: 0; pointer-events: none; transform: translateY(12px); display: inline-flex; }

/* ====================================================================
   REVEAL ANIMATIONS
   ==================================================================== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; will-change: auto; }
/* light stagger inside grids */
.amenities .amenity:nth-child(2), .places .place:nth-child(2), .gallery-item:nth-child(2) { transition-delay: .07s; }
.amenities .amenity:nth-child(3), .places .place:nth-child(3), .gallery-item:nth-child(3) { transition-delay: .14s; }
.amenities .amenity:nth-child(4), .gallery-item:nth-child(4) { transition-delay: .21s; }

/* ====================================================================
   RESPONSIVE
   ==================================================================== */
@media (max-width: 1024px) {
    :root { --nav-h: 70px; }
}

@media (max-width: 860px) {
    .brand-script { font-size: 1.8rem; }
    .navbar__logo { height: 47px; }
    /* minmax(0, …) e non `1fr`: il minimo di `1fr` è il min-content, e una
       scheda con la chip a `nowrap` (o un indirizzo email) allargava la traccia
       oltre il contenitore facendo scorrere la pagina in orizzontale a 320px. */
    .struttura__grid { grid-template-columns: minmax(0, 1fr); }
    .struttura__media { order: -1; }
    .struttura__media img { aspect-ratio: 4 / 3; object-position: center; }
    .info__grid { grid-template-columns: minmax(0, 1fr); }
    .info__head { position: static; }
    .contatti__grid { grid-template-columns: minmax(0, 1fr); }
    .places { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
    body { font-size: 1rem; }
    .nav-contact { padding: 8px 14px; font-size: .85rem; }
    .lang { display: none; } /* language switch available inside the card menu on phones */
    /* Sul telefono il nome deve dominare e le righe di servizio restare al loro
       posto: occhiello e sottotitolo più stretti di spaziatura (una riga lunga
       tutta maiuscola e larga pesa quanto un titolo), lead un filo più piccolo. */
    .hero__eyebrow { font-size: .7rem; letter-spacing: .2em; text-indent: .2em; }
    .hero__sub { font-size: .72rem; letter-spacing: .22em; text-indent: .22em; margin-top: var(--s-3); line-height: 1.5; }
    .hero__sub br { display: inline; }
    .hero__lead { font-size: 1.02rem; }
    /* Sul telefono il testo occupa TUTTA la larghezza, quindi un'ellisse non
       serve: ai bordi si spegneva e l'occhiello sul cielo chiaro spariva.
       Qui il velo è una fascia orizzontale — stessa densità da bordo a bordo,
       che cresce dove passano le righe e si alleggerisce sopra e sotto. */
    .hero__overlay {
        background: linear-gradient(to bottom,
            rgba(var(--rgb-veil), .20) 0%,
            rgba(var(--rgb-veil), .46) 22%,
            rgba(var(--rgb-veil), .56) 46%,
            rgba(var(--rgb-veil), .50) 72%,
            rgba(var(--rgb-veil), .38) 100%);
    }
    .hero__actions .pill { width: 100%; justify-content: center; }
    .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
    .footer__brand { grid-column: 1 / -1; }
    .fab--contact .fab__label { display: none; }
    .fab--contact { padding: 14px; }
    .lightbox__nav { width: 44px; height: 44px; }
}

/* ====================================================================
   CHIUSURA — l'ultima immagine prima del footer
   Solo la fotografia, a piena larghezza: niente velo, niente scritte.
   Fondo di attesa nel colore della sabbia, così finché la foto non arriva
   non c'è un lampo scuro.
   ==================================================================== */
.closing {
    min-height: 46vh;
    background-color: var(--color-surface-2);
    background-size: cover;
    background-position: center 55%;
    background-image: url('../images/chiusura-villanita.jpg');
    background-image: -webkit-image-set(url('../images/chiusura-villanita.webp') type('image/webp'), url('../images/chiusura-villanita.jpg') type('image/jpeg'));
    background-image: image-set(url('../images/chiusura-villanita.webp') type('image/webp'), url('../images/chiusura-villanita.jpg') type('image/jpeg'));
}

/* ====================================================================
   PISTE — breakpoint (si sale soltanto: 560 › 760 › 900 › 1100 › 1400)
   Le tre piste (servizi, galleria, recensioni) sono scritte mobile-first,
   al contrario del resto del foglio: ogni soglia aggiunge colonne per
   schermata, non annulla nulla. Il passo delle frecce lo misura il JS.
   ==================================================================== */
@media (min-width: 560px) {
    .gallery-grid { --gal-quota: .62; }
    .amenities { grid-auto-columns: 60%; }
}
@media (min-width: 760px) {
    .reviews { --rev-basis: calc((100% - var(--rev-gap)) / 2); }
    /* La galleria passa da fila unica a DUE righe: finito il ritaglio
       verticale, una foto per schermata sarebbe uno spreco di altezza. */
    .gallery-grid {
        --gal-riga: 200px;
        display: grid;
        grid-auto-flow: column dense;
        grid-template-rows: repeat(2, var(--gal-riga));
        grid-auto-columns: calc((100% - 2 * var(--s-3)) / 3);
        min-height: calc(2 * var(--gal-riga) + var(--s-3) + 2 * var(--s-2));
    }
    .gallery-item { flex: none; aspect-ratio: auto; height: 100%; }
    .g-tall { grid-row: span 2; }
    .amenities { grid-auto-columns: calc((100% - 2 * var(--s-3)) / 3); }
}
@media (min-width: 900px) {
    .reviews { --rev-basis: calc((100% - 2 * var(--rev-gap)) / 3); }
    .gallery-grid { --gal-riga: 220px; }
}
@media (min-width: 1100px) {
    .amenities { grid-auto-columns: calc((100% - 3 * var(--s-3)) / 4); }
    .gallery-grid { grid-auto-columns: calc((100% - 3 * var(--s-3)) / 4); }
    .reviews { --rev-basis: calc((100% - 3 * var(--rev-gap)) / 4); }
}
@media (min-width: 1400px) {
    .amenities { grid-auto-columns: calc((100% - 4 * var(--s-3)) / 5); }
    .gallery-grid { grid-auto-columns: calc((100% - 4 * var(--s-3)) / 5); }
}

/* ====================================================================
   STATI AL PASSAGGIO DEL PUNTATORE
   Tutti dentro `@media (hover: hover)`: su un dispositivo a tocco il
   :hover non esiste davvero e il browser lo lascia «incollato» dopo il
   tap, finché non si tocca altrove. Era il motivo per cui il bottone
   pieno della hero restava color terracotta dopo essere stato sfiorato,
   mentre quello della navbar era verde.
   ==================================================================== */
@media (hover: hover) and (pointer: fine) {
    .pill:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
    .pill:hover .pill__arrow { transform: translate(2px, -2px); }
    .pill--ghost:hover { background: var(--color-primary); color: var(--color-on-dark); border-color: var(--color-primary); }
    .pill--ghost:hover .pill__arrow { background: rgba(var(--rgb-on-dark), .22); }
    .pill--solid:hover { background: var(--color-accent); border-color: var(--color-accent); }
    .lang-pill:hover { border-color: var(--color-primary); color: var(--color-primary); }
    .lang-opt:hover { background: var(--color-surface); }
    .nav-menu__lang-opt:hover { border-color: var(--color-border); color: var(--color-primary); }
    .nav-menu__close:hover { background: var(--color-surface); border-color: var(--color-border); }
    .nav-menu__link:hover { color: var(--color-primary); padding-left: 14px; }
    .nav-menu__link:hover::before { width: 100%; }
    .hero .pill--ghost:hover { background: var(--color-on-dark); color: var(--color-primary); border-color: var(--color-on-dark); }
    .amenity:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-border); }
    .shuttle__cta:hover { background: var(--color-on-dark); color: var(--color-primary); border-color: var(--color-on-dark); }
    .rail__arrow:enabled:hover { border-color: var(--color-accent-deep); background: var(--color-surface-2); }
    .gallery-item:hover img { transform: scale(1.07); }
    .gallery-item:hover { box-shadow: var(--shadow-lg); }
    .gallery-item:hover::after { opacity: 1; }
    .lightbox__close:hover, .lightbox__nav:hover { background: rgba(var(--rgb-on-dark), .22); transform: scale(1.06); }
    .lightbox__nav--prev:hover { transform: translateY(-50%) scale(1.06); }
    .lightbox__nav--next:hover { transform: translateY(-50%) scale(1.06); }
    .place:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-border); }
    .review__more:hover { text-decoration-color: var(--color-accent-deep); }
    .footer__list a:hover { color: var(--color-on-dark); text-decoration: underline; text-underline-offset: 3px; }
    .fab--contact:hover { transform: translateY(-3px); background: var(--color-accent-deep); box-shadow: var(--shadow-lg); }
    .fab--top:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
}

/* ====================================================================
   REDUCED MOTION
   ==================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .reveal { opacity: 1; transform: none; }
    .hero__bg { transform: none; animation: none; }
}