/* =========================================================================
   L'Armonia — font self-hosted (woff2).
   Nessuna richiesta a Google Fonts: l'IP dell'utente non lascia il sito.
   Solo i pesi realmente usati, sottoinsiemi latin + latin-ext (IT / EN).
   Prata (brand), Cormorant Garamond (headings), Lora (body), Jost (UI).
   ========================================================================= */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/cormorant-garamond-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: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/cormorant-garamond-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;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/cormorant-garamond-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-garamond-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;
}
@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;
}
@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;
}
@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;
}
@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/lora-400-italic-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: 'Lora';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/lora-400-italic-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;
}
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/lora-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: 'Lora';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/lora-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;
}
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/lora-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: 'Lora';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/lora-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;
}
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/lora-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: 'Lora';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/lora-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;
}
@font-face {
    font-family: 'Prata';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/prata-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;
}

/* =========================================================================
   L'Armonia — style.css
   Palette & type derived from the logo and the real property photos.
   Structure & rhythm preserved from the design draft (layout-pattern-analyzer).
   ========================================================================= */

/* ---------- Design tokens ---------- */
:root {
    /* Colours — derived from the logo (sage) and the real photos (stone/ivory/terracotta).
       NO black anywhere: every border/line/icon/arrow uses a tone of the palette. */
    --color-primary:     #3F5C52;  /* deep sage — the logo sage brought to contrast */
    --color-secondary:   #B7AA94;  /* warm stone — from the tufa and the textiles */
    --color-accent:      #9C4B16;  /* "Capasa" terracotta — from the real jar */
    --color-accent-deep: #7E3C11;  /* dark terracotta — hover/pressed */
    --color-background:  #F7F4EE;  /* warm ivory — the lime-washed walls */
    --color-surface:     #EFE9DC;  /* light sand — bands/cards */
    --color-surface-2:   #E4DDCC;  /* sand — from the floor stoneware */
    --color-text:        #2E3A35;  /* sage anthracite — echo of the b&b script */
    --color-text-soft:   #4F605A;  /* grey sage — secondary text */
    --color-border:      #6A837A;  /* mid sage — REPLACES ALL BLACK */
    --color-border-soft: #B7C4BE;  /* palest sage — decorative hairlines */
    --color-on-dark:     #F7F4EE;  /* ivory on dark grounds */

    /* Type */
    --font-brand:   "Prata", "Playfair Display", Georgia, serif;
    --font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --font-body:    "Lora", 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 & sage only */
    --shadow-sm: 0 4px 14px rgba(46, 58, 53, .08);
    --shadow-md: 0 8px 24px rgba(46, 58, 53, .12);
    --shadow-lg: 0 18px 48px rgba(46, 58, 53, .18);

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

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
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;
}
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; }
/* Terracotta reads at 5.57:1 on the ivory ground but collapses to 1.20:1 on deep sage
   and 1.53:1 on the lightbox: the ring needs the ivory on dark grounds. */
.footer :focus-visible,
.shuttle :focus-visible,
.lightbox :focus-visible { outline-color: var(--color-on-dark); }

.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: 600; line-height: 1.12; color: var(--color-text); }
/* Wordmark. Prata ships in weight 400 only: no font-weight here, or the browser
   synthesises a fake bold and destroys the didone hairlines. */
.brand-script { font-family: var(--font-brand); font-weight: 400; line-height: 1.1; text-transform: uppercase; letter-spacing: .28em; }
p + p { margin-top: var(--s-3); }
/* <strong> defaults to 700, which neither Lora nor Jost ships here: the browser would
   synthesise it and coarsen Lora's serifs. Anchored to the 600 the font URL loads. */
.info__item strong, .rating__meta strong { font-weight: 600; }

.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; }
/* Le gutter si stringono sotto i 380px: a 320px 24px per lato mangiavano il 15%
   della larghezza utile e obbligavano il testo a 4-5 parole per riga. */
@media (max-width: 380px) {
    .container { width: min(100% - 2 * var(--s-3), var(--container)); }
}
.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(63, 92, 82, .12);
    transition: transform .3s var(--ease), background-color .3s var(--ease);
}
.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(247, 244, 238, .22); }

.pill--solid { background: var(--color-primary); color: var(--color-on-dark); border-color: var(--color-primary); }
.pill--solid .pill__arrow { background: rgba(247, 244, 238, .2); }
.pill--solid:hover { background: var(--color-accent); border-color: var(--color-accent); }

.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(247, 244, 238, .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(247, 244, 238, .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; line-height: 1; }
.brand-script { font-size: 1.35rem; color: var(--color-primary); }
/* Logo lockup. The navbar ground is ivory, so the standard (sage) variant is used.
   width/height attributes on the <img> carry the 912×554 ratio: height is driven
   here and width stays auto, so the mark scales without distortion and reserves
   its box before the file lands (no CLS). */
.navbar__brand picture { display: block; }
.navbar__logo { display: block; height: 42px; width: auto; margin-inline: auto; }
.navbar__brand .brand-sub {
    font-family: var(--font-ui); font-size: .62rem; letter-spacing: .28em;
    text-transform: uppercase; color: var(--color-text-soft); margin-top: 2px;
}
.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:hover { border-color: var(--color-primary); color: var(--color-primary); }
.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:hover { background: var(--color-surface); }
.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); color: var(--color-text-soft);
    transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.nav-menu__lang-opt:hover { border-color: var(--color-border); color: var(--color-primary); }
.nav-menu__lang-opt.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-dark); }

/* menu toggle — e' il comando di navigazione principale su telefono:
   min 44x44 di area toccabile (le tre barre restano 26px e non cambiano). */
.nav-toggle { justify-self: start; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; min-width: 44px; min-height: 44px; 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);
    transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.nav-menu__close:hover { background: var(--color-surface); border-color: var(--color-border); }
.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__link:hover { color: var(--color-primary); padding-left: 14px; }
.nav-menu__link:hover::before { width: 100%; }
.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: 1.5rem; 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(46, 58, 53, .4); opacity: 0; transition: opacity .4s var(--ease); }
.nav-backdrop.is-open { opacity: 1; }

/* ====================================================================
   HERO
   ==================================================================== */
.hero {
    position: relative; min-height: 100vh; min-height: 100svh;
    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;
    transform: scale(1.08); animation: heroZoom 18s var(--ease) forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }
.hero__overlay {
    position: absolute; inset: 0;
    background:
        linear-gradient(to bottom, rgba(46,58,53,.34) 0%, rgba(46,58,53,.18) 35%, rgba(46,58,53,.5) 100%),
        radial-gradient(120% 90% at 50% 40%, rgba(46,58,53,.05), rgba(46,58,53,.45));
}
.hero__content { position: relative; z-index: 2; max-width: 880px; padding-block: var(--s-9); }
.hero__eyebrow { color: rgba(247, 244, 238, .9); letter-spacing: .3em; }
.hero__title { margin-bottom: var(--s-4); }
/* Prata set in uppercase with .28em tracking is far wider than the old script face:
   the scale is rebalanced so the wordmark still fits the hero at every viewport.
   Selector kept at higher specificity than the .brand-script mobile rule so the hero
   name keeps its large fluid size on phones (was collapsing to the nav wordmark size). */
/* Il minimo della clamp e' 3.5rem, non 1.9rem: 1.9rem era il valore usato da 0 a 700px
   e faceva due danni sul tablet. Primo, a 561px (appena fuori dalle regole telefono) il
   wordmark precipitava da 56px a 34px: uno scalino visibile su iPad mini in verticale.
   Secondo, tra 561 e 700px restava piu' piccolo del titolo di sezione della pagina sotto.
   Ora il valore di 560px e quello di 561px coincidono e la crescita e' continua. */
.hero__title .hero__script { display: block; font-size: clamp(3.5rem, 10vw, 4.2rem); color: var(--color-on-dark); text-shadow: 0 2px 30px rgba(46, 58, 53, .4); }
.hero__sub {
    display: block; font-family: var(--font-ui); font-weight: 400;
    text-transform: uppercase; letter-spacing: .4em;
    font-size: clamp(.8rem, 2.2vw, 1.05rem); margin-top: var(--s-2);
    color: rgba(247, 244, 238, .92);
}
/* Fluido come il titolo: a 1.18rem fisso l'introduzione su tablet valeva quasi meta'
   del wordmark, e i due livelli si leggevano alla pari. Il tetto 1.18rem e' quello di
   prima e si riprende dai ~995px in su, quindi il desktop non cambia. Il minimo e'
   1.05rem, cioe' esattamente il corpo del testo delle sezioni: piu' in basso di cosi'
   l'introduzione dell'hero risulterebbe piu' piccola del testo corrente del sito, che
   e' una sfasatura che si legge come un errore. Sul telefono scende a .92rem, ma li'
   e' una scelta esplicita — lo spazio e' poco e il titolo deve vincere. */
.hero__lead { max-width: 60ch; margin: 0 auto var(--s-6); font-size: clamp(1.05rem, 1.9vw, 1.18rem); color: rgba(247, 244, 238, .95); }
.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(247, 244, 238, .65); }
.hero .pill--ghost .pill__arrow { background: rgba(247, 244, 238, .18); }
.hero .pill--ghost:hover { background: var(--color-on-dark); color: var(--color-primary); border-color: var(--color-on-dark); }
/* ====================================================================
   LA STRUTTURA
   ==================================================================== */
.struttura__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 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; }
.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
   ==================================================================== */
.amenities { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); 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:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-border); }
.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), #324A42);
    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(247, 244, 238, .14); color: var(--color-on-dark); }
.shuttle__body { flex: 1 1 280px; min-width: 0; }
.shuttle__title { color: var(--color-on-dark); font-size: 1.6rem; margin-bottom: 4px; }
.shuttle__body p { color: rgba(247, 244, 238, .9); }
.shuttle__cta { color: var(--color-on-dark); border-color: rgba(247, 244, 238, .6); }
.shuttle__cta .pill__arrow { background: rgba(247, 244, 238, .2); }
.shuttle__cta:hover { background: var(--color-on-dark); color: var(--color-primary); border-color: var(--color-on-dark); }

/* ====================================================================
   GALLERIA — asymmetric editorial grid, 50px radius
   ==================================================================== */
.gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 220px; grid-auto-flow: dense; gap: var(--s-3); }
.gallery-item {
    position: relative; overflow: hidden; border-radius: var(--r-img);
    box-shadow: var(--shadow-sm); padding: 0; display: block; height: 100%;
}
.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(46, 58, 53, .35), transparent 55%);
    opacity: 0; transition: opacity .4s var(--ease);
}
.gallery-item:hover img { transform: scale(1.07); }
.gallery-item:hover { box-shadow: var(--shadow-lg); }
.gallery-item:hover::after { opacity: 1; }
.g-wide { grid-column: span 2; }
.g-tall { grid-row: span 2; }
.g-big  { grid-column: span 2; grid-row: span 2; }

/* Lightbox */
.lightbox {
    position: fixed; inset: 0; z-index: 1600; display: flex; align-items: center; justify-content: center;
    background: rgba(46, 58, 53, .92); padding: var(--s-5);
    /* visibility stays out of the transition: while it animates, the dialog is not
       focusable and openLightbox()'s .focus() fails silently, which leaves the focus
       trap inert and lets Tab wander the page behind the overlay. Same pattern as
       .nav-menu, which transitions transform only. */
    opacity: 0; visibility: hidden; transition: opacity .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(247, 244, 238, .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(247, 244, 238, .5);
    background: rgba(247, 244, 238, .08); font-size: 2rem; line-height: 1; transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(247, 244, 238, .22); transform: scale(1.06); }
.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%); }
.lightbox__nav--prev:hover { transform: translateY(-50%) scale(1.06); }
.lightbox__nav--next:hover { transform: translateY(-50%) scale(1.06); }

/* ====================================================================
   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); }
.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:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-border); }
.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); }
.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
   ==================================================================== */
.rating {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(var(--s-5), 5vw, var(--s-7)); align-items: center;
    background: var(--color-surface); border: 1px solid var(--color-border-soft);
    border-radius: var(--r-card); padding: clamp(var(--s-4), 4vw, var(--s-6)); margin-bottom: var(--s-6);
}
.rating__score { display: flex; align-items: center; gap: var(--s-3); }
.rating__num {
    font-family: var(--font-heading); font-weight: 600; font-size: 3.6rem; line-height: 1;
    color: var(--color-on-dark); background: var(--color-primary);
    padding: 14px 18px; border-radius: 22px 22px 22px 6px;
}
.rating__meta { font-family: var(--font-ui); font-size: .9rem; color: var(--color-text-soft); }
.rating__meta strong { color: var(--color-text); font-size: 1.05rem; }
.rating__cats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3) var(--s-5); }
.rating__cat { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; font-family: var(--font-ui); font-size: .85rem; }
.rating__cat-label { color: var(--color-text-soft); }
.rating__cat-val { font-weight: 500; color: var(--color-primary); }
.rating__bar { grid-column: 1 / -1; height: 6px; border-radius: var(--r-pill); background: var(--color-surface-2); overflow: hidden; }
.rating__bar-fill { display: block; height: 100%; width: 0; background: var(--color-secondary); border-radius: var(--r-pill); transition: width 1.1s var(--ease); }
.rating.is-visible .rating__bar-fill { width: var(--w); }

/* Intestazione della fonte (Booking.com / Airbnb) sopra ogni blocco punteggi. */
.rating__head {
    font-family: var(--font-ui); font-size: .78rem; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-soft);
    margin-bottom: var(--s-3);
}

/* Blocco Airbnb: stessa struttura del blocco Booking, punteggio su 5. */
.rating--airbnb .rating__num { font-size: 3rem; }
.rating--airbnb .rating__num small { font-size: .38em; font-weight: 400; opacity: .75; }
/* Nota sotto il punteggio: dove Airbnb non pubblica il dettaglio per categoria
   la riga spiega da dove viene il numero, invece di inventare delle barre. */
/* Senza barre per categoria la riga della nota si stacca troppo dal punteggio. */
.rating--nocats { row-gap: var(--s-4); }
.rating__note {
    grid-column: 1 / -1; font-family: var(--font-ui); font-size: .82rem;
    line-height: 1.6; color: var(--color-text-soft); margin: 0;
}
.rating__note a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
/* Media complessiva: e' il valore dichiarato nel JSON-LD, quindi deve restare leggibile in pagina. */
.rating__overall {
    margin-top: var(--s-5); margin-bottom: var(--s-6);
    font-family: var(--font-ui); font-size: .95rem;
    color: var(--color-text-soft); line-height: 1.6;
    padding-left: var(--s-4); border-left: 2px solid var(--color-secondary);
}
.rating__overall strong { color: var(--color-text); font-weight: 500; }

.reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.review {
    display: flex; flex-direction: column; gap: var(--s-3);
    background: var(--color-surface); border: 1px solid var(--color-border-soft);
    border-radius: var(--r-card); padding: var(--s-5);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.review:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.review__top { display: flex; justify-content: space-between; align-items: center; }
.review__quote { color: var(--color-border); }
.review__score { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-ui); font-weight: 500; font-size: .9rem; color: var(--color-primary); background: var(--color-background); border-radius: var(--r-pill); padding: 4px 12px; }
.review__score .icon { color: var(--color-accent); }
/* Airbnb valuta in stelle, Booking in decimi: ogni card mostra la sua scala reale. */
.review__score--stars { gap: 1px; padding: 5px 11px; }
.review__score--stars .icon--off { color: var(--color-border-soft); }
.review__text { font-style: italic; color: var(--color-text); flex: 1; }
/* Translation printed under a review left in its original language (see Violeta, es).
   Reads as secondary/derived text, never as the quote itself. */
.review__trans { display: block; margin-top: .6em; font-size: .9em; font-style: italic; color: var(--color-text-soft); }
.review__by { display: grid; gap: 2px; border-top: 1px solid var(--color-border-soft); padding-top: var(--s-3); }
.review__name { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 600; }
.review__country { font-family: var(--font-ui); font-size: .8rem; color: var(--color-text-soft); }

/* "Leggi di più": oltre le prime 9 le recensioni restano nascoste finché
   non si preme il bottone (vedi il modulo reviewsMore in js/main.js). */
.review--hidden { display: none; }
.reviews__more { display: flex; justify-content: center; margin-top: var(--s-5); }
.reviews__more-btn .pill__arrow .icon { transition: transform .3s var(--ease); }
.reviews__more-btn[aria-expanded="true"] .pill__arrow .icon { transform: rotate(180deg); }

/* ====================================================================
   BUONO A SAPERSI
   ==================================================================== */
.info__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 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
   ==================================================================== */
/* minmax(0, …) e non 1.1fr/.9fr: con `1fr` la traccia non puo' scendere sotto il
   min-content dei suoi figli, e il .pill in nowrap della card ("Chiama +39 351 406
   5061") la gonfiava fino a 328px dentro un .container da 272px — a 320px l'intera
   pagina sbordava di 32px, tagliati e resi irraggiungibili da body{overflow-x:hidden}. */
.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); }
.contatti__list li { display: flex; gap: var(--s-3); align-items: center; }
/* I figli flex partono da min-width:auto: senza questo l'email e l'indirizzo,
   che sono token lunghi, allargherebbero la riga oltre la colonna. */
.contatti__list li > div { 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); }
.contatti__card {
    background: var(--color-surface); border: 1px solid var(--color-border-soft);
    border-radius: var(--r-card); padding: clamp(var(--s-4), 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); }
/* Questi pill sono impilati a tutta larghezza: il nowrap di base non serve e su
   schermi stretti e' proprio lui a imporre la larghezza minima della colonna. */
.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); }
/* Recapiti reali: senza sottolineatura i link sarebbero indistinguibili dal testo,
   perche' la base e' `a { color: inherit; text-decoration: none }`. */
.contatti__val {
    color: var(--color-text); text-decoration: underline;
    text-decoration-color: var(--color-border-soft); text-underline-offset: 3px;
    transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
    /* email e URL sono token senza spazi: su un telefono devono poter andare a capo. */
    overflow-wrap: anywhere;
}
.contatti__val:hover { color: var(--color-accent); text-decoration-color: currentColor; }
.contatti__sep { color: var(--color-secondary); margin-inline: 8px; }

/* Portali di prenotazione: secondari rispetto a telefono ed email, che restano i CTA principali. */
.contatti__ota { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--color-border-soft); }
.contatti__ota-lab { font-family: var(--font-ui); font-size: .72rem; text-transform: uppercase; letter-spacing: .18em; color: var(--color-text-soft); margin-bottom: var(--s-3); }
.contatti__ota-list { display: grid; gap: var(--s-2); font-family: var(--font-ui); font-size: .92rem; }
.contatti__ota-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); }
.contatti__ota-name { color: var(--color-text-soft); min-width: 7em; }
.contatti__ota-list a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; transition: color .25s var(--ease); }
.contatti__ota-list a:hover { color: var(--color-accent); }

.pending {
    display: inline-block; font-family: var(--font-ui); font-size: .78rem; font-style: normal;
    color: var(--color-primary); background: rgba(156, 75, 22, .1);
    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); }
/* Il reset globale azzera list-style e padding: senza questa regola gli elenchi
   delle pagine legali (dati del titolare, diritti, finalita') si leggono come
   righe di testo indistinguibili dai paragrafi. */
.legal ul { list-style: disc; padding-left: 1.4em; margin: var(--s-3) 0; display: grid; gap: 8px; }
.legal li { color: var(--color-text-soft); }
.legal li::marker { color: var(--color-secondary); }
/* Stessa ragione per i link: `a { color: inherit; text-decoration: none }` li
   renderebbe invisibili dentro il corpo del testo legale. Il .pill di "Torna
   alla home" e' escluso perche' ha gia' il suo stile. */
.legal__wrap p a:not(.pill),
.legal__wrap li a:not(.pill) {
    color: var(--color-primary); text-decoration: underline;
    text-underline-offset: 3px; transition: color .25s var(--ease);
}
.legal__wrap p a:not(.pill):hover,
.legal__wrap li a:not(.pill):hover { color: var(--color-accent); }
.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 repeat(3, minmax(0, 1fr)); gap: var(--s-6); padding-bottom: var(--s-7); }
/* The footer ground is deep sage: the ivory ("light") logo variant is used here.
   "La Capasa" is not part of the mark, so it stays as a typographic subtitle. */
.footer__brand picture { display: block; }
.footer__logo { display: block; width: 210px; max-width: 100%; height: auto; margin-bottom: var(--s-2); }
.footer__sub { display: block; font-family: var(--font-ui); font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: rgba(247, 244, 238, .82); }
.footer__tag { margin-top: var(--s-3); color: rgba(247, 244, 238, .82); font-size: .95rem; }
.footer__title { color: var(--color-on-dark); font-size: 1.25rem; margin-bottom: var(--s-3); }
/* Sotto-titolo ("Prenota su"): stessa colonna, gerarchia piu' bassa del titolo principale. */
.footer__title--sub { font-size: 1.05rem; margin-top: var(--s-5); }
.footer__list { display: grid; gap: 10px; overflow-wrap: anywhere; font-family: var(--font-ui); font-size: .92rem; color: rgba(247, 244, 238, .82); }
.footer__sep { color: rgba(247, 244, 238, .5); }
.footer__list a { transition: color .25s var(--ease); }
.footer__list a:hover { color: var(--color-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.footer__bar { border-top: 1px solid rgba(247, 244, 238, .18); }
.footer__bar-inner { display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; padding-block: var(--s-4); font-family: var(--font-ui); font-size: .82rem; color: rgba(247, 244, 238, .82); }
.footer .pending { color: var(--color-on-dark); background: rgba(247, 244, 238, .12); border-color: rgba(247, 244, 238, .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--contact:hover { transform: translateY(-3px); background: var(--color-accent-deep); box-shadow: var(--shadow-lg); }
.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--top:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.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; }
/* light stagger inside grids */
.amenities .amenity:nth-child(2), .places .place:nth-child(2), .reviews .review:nth-child(2), .gallery-item:nth-child(2) { transition-delay: .07s; }
.amenities .amenity:nth-child(3), .places .place:nth-child(3), .reviews .review: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; }
    .amenities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery-grid { grid-auto-rows: 200px; }
}

@media (max-width: 860px) {
    /* The navbar wordmark is an <img> logo here, not .brand-script text, so a blanket
       .brand-script shrink is orphaned and only regressed the hero name and the mobile
       menu title — removed. Elements that must shrink on phones keep their own rules. */
    .navbar__logo { height: 33px; }
    /* .55rem = 8.8px reali: illeggibili su un telefono. Il tracking scende da .28em
       a .18em cosi' la riga sta comunque su una sola linea (a 320px andava a capo
       in "NOCI ·" / "PUGLIA", perche' la colonna centrale li' vale 74px). */
    .navbar__brand .brand-sub { font-size: .66rem; letter-spacing: .18em; white-space: nowrap; }
    .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); }
    .rating { grid-template-columns: minmax(0, 1fr); }
    .reviews { grid-template-columns: minmax(0, 1fr); }
    .places { grid-template-columns: minmax(0, 1fr); }
    /* simplify gallery to a balanced 2-col masonry */
    .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 180px; }
    .g-wide, .g-big { grid-column: span 2; }
    .g-big { grid-row: span 2; }
    .g-tall { grid-row: span 2; }
}

@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 */
    /* Hero mobile hierarchy: the wordmark must clearly dominate, everything else
       scaled beneath it. The base .28em tracking is tightened here so a larger
       size still fits "L'ARMONIA" on one line down to 320px without overflowing.
       Scala tipografica del telefono (a 390px): 11.5 eyebrow / 44 nome / 11.5 sub /
       14.7 lead. Il salto nome->lead vale ~3x: e' quello che fa leggere il nome
       come unico centro, e va tenuto — un lead a 15.7px (rapporto 2.6) rimetteva
       i due livelli sullo stesso piano perche' il paragrafo, su 4-5 righe, pesa
       molto piu' del titolo a parita' di corpo. */
    .hero__eyebrow { font-size: .72rem; letter-spacing: .22em; }
    .hero__title { margin-bottom: var(--s-4); }
    .hero__title .hero__script { font-size: clamp(2.4rem, 11.2vw, 3.5rem); letter-spacing: .12em; }
    .hero__sub { font-size: .72rem; letter-spacing: .26em; margin-top: var(--s-1); }
    .hero__lead { font-size: .92rem; line-height: 1.68; }
    .hero__actions .pill { width: 100%; justify-content: center; }
    .amenities { grid-template-columns: minmax(0, 1fr); }
    .rating__cats { grid-template-columns: minmax(0, 1fr); }
    .rating__score { flex-direction: column; align-items: flex-start; }
    .gallery-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 230px; }
    .g-wide, .g-big, .g-tall { grid-column: auto; grid-row: auto; }
    .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); }
    .footer__brand { grid-column: 1 / -1; }
    .fab--contact .fab__label { display: none; }
    .fab--contact { padding: 14px; }
}

/* Sotto i 400px la colonna centrale della navbar non basta piu' per il payoff
   accanto al logo: resta il marchio, che dice gia' tutto. */
@media (max-width: 400px) {
    .navbar__brand .brand-sub { display: none; }
}

/* On narrow phones the fixed icon, the text and the nowrap distance chip cannot share
   one line: at 320px they ran 35px past the viewport, and body{overflow-x:hidden} made
   the cut edge unreachable. The chip drops to its own line, indented to the text, so the
   text keeps a readable measure instead of collapsing to one word per line.
   The basis (100% - icon - gap) is what pushes the chip down: `flex: 1` alone has a 0
   basis, so the body would just shrink and the chip would never wrap. */
@media (max-width: 480px) {
    .place { flex-wrap: wrap; }
    .place__body { min-width: 0; flex: 1 1 calc(100% - 62px); }
    .place .chip { margin-left: 62px; align-self: flex-start; }
}

/* ====================================================================
   STRUTTURE — two discovery cards with in-card carousel
   (home page: "Scopri le strutture")
   ==================================================================== */
.strutture__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(var(--s-4), 4vw, var(--s-6)); }
.scard {
    display: flex; flex-direction: column;
    background: var(--color-background); border: 1px solid var(--color-border-soft);
    border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.scard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-border); }

/* --- in-card carousel --- */
.scard__carousel { position: relative; aspect-ratio: 4 / 3; background: var(--color-surface-2); overflow: hidden; }
.scard__track { position: absolute; inset: 0; }
.scard__slide {
    position: absolute; inset: 0; opacity: 0; visibility: hidden;
    transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
.scard__slide.is-active { opacity: 1; visibility: visible; }
.scard__slide img { width: 100%; height: 100%; object-fit: cover; }
.scard__carousel::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(46,58,53,.42), transparent 42%);
}
.scard__badge {
    position: absolute; top: var(--s-3); left: var(--s-3); z-index: 3;
    font-family: var(--font-ui); font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
    color: var(--color-on-dark); background: rgba(63, 92, 82, .82);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    padding: 5px 14px; border-radius: var(--r-pill);
}
.scard__nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
    color: var(--color-on-dark); border: 1.5px solid rgba(247, 244, 238, .55);
    background: rgba(46, 58, 53, .28); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    font-size: 1.5rem; line-height: 1;
    transition: background-color .3s var(--ease), transform .3s var(--ease), opacity .25s var(--ease);
}
.scard__nav:hover { background: rgba(46, 58, 53, .5); }
.scard__nav--prev { left: var(--s-3); }
.scard__nav--next { right: var(--s-3); }
.scard__nav--prev:hover { transform: translateY(-50%) scale(1.06); }
.scard__nav--next:hover { transform: translateY(-50%) scale(1.06); }
/* gap:0 perche' la spaziatura ottica la da' ora l'area toccabile del ::after
   (24px di passo, contro i 7px di gap di prima). */
.scard__dots { position: absolute; left: 0; right: 0; bottom: var(--s-3); z-index: 3; display: flex; justify-content: center; gap: 0; }
.scard__dot {
    position: relative;
    width: 8px; height: 8px; border-radius: 50%; padding: 0;
    background: rgba(247, 244, 238, .5); border: 1px solid rgba(247, 244, 238, .7);
    transition: background-color .3s var(--ease), transform .3s var(--ease);
}
/* Il pallino resta 8px per disegno, ma 8px non si centrano con un pollice:
   il ::after porta l'area toccabile a 24x34 senza toccare la grafica.
   L'estensione verticale sta dentro il carousel (bottom:16px), che ha
   overflow:hidden e ritaglierebbe anche gli eventi. */
.scard__dot::after { content: ""; position: absolute; inset: -13px -8px; border-radius: var(--r-pill); }
.scard__dot.is-active { background: var(--color-on-dark); transform: scale(1.25); }

/* --- card body --- */
.scard__body { display: flex; flex-direction: column; gap: var(--s-3); padding: clamp(var(--s-4), 3vw, var(--s-5)); flex: 1; }
.scard__name { font-size: clamp(1.7rem, 3vw, 2.1rem); color: var(--color-text); }
.scard__lead { color: var(--color-text-soft); font-size: 1rem; }
.scard__facts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.scard__fact {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-ui); font-size: .82rem; color: var(--color-text-soft);
    padding: 6px 13px; border: 1.5px solid var(--color-border-soft); border-radius: var(--r-pill);
}
.scard__fact .icon { color: var(--color-border); }
.scard__cta { margin-top: auto; }
.scard__cta .pill { width: 100%; justify-content: center; }

/* ====================================================================
   PAGE HERO — compact banner for the structure detail pages
   ==================================================================== */
.page-hero {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    min-height: clamp(340px, 56vh, 560px);
    color: var(--color-on-dark);
}
.page-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.06); animation: heroZoom 18s var(--ease) forwards; }
.page-hero__overlay {
    position: absolute; inset: 0;
    /* Text is centred over the middle of the photo (often the brightest part), so the scrim
       stays fairly even, with a slight centre darkening, to keep the ivory text legible. */
    background:
        linear-gradient(to bottom, rgba(46,58,53,.5) 0%, rgba(46,58,53,.42) 50%, rgba(46,58,53,.58) 100%),
        radial-gradient(120% 100% at 50% 50%, rgba(46,58,53,.05), rgba(46,58,53,.3));
}
/* The content keeps the shared .container width/centering; only add vertical rhythm here
   (no width:100% — that would override .container and push the text to the viewport edge). */
.page-hero__content { position: relative; z-index: 2; padding-block: clamp(var(--s-5), 6vw, var(--s-7)); }
.page-hero__eyebrow { color: rgba(247, 244, 238, .9); letter-spacing: .26em; margin-bottom: var(--s-2); }
.page-hero__title { color: var(--color-on-dark); }
.page-hero__title .brand-script { display: block; font-size: clamp(1rem, 3vw, 1.5rem); color: rgba(247, 244, 238, .92); margin-bottom: var(--s-2); }
/* Stessa correzione del wordmark della home: il minimo sale da 2.2rem a 3.2rem cosi' il
   nome della struttura non si dimezza appena si esce dalle regole telefono (a 561px
   passava da 51px a 34px) e su tutto il tablet resta il triplo dell'introduzione.
   L'introduzione diventa fluida per lo stesso motivo: a 1.1rem fissi, su un iPad in
   verticale, era grande quanto il "L'Armonia" sopra al nome. */
.page-hero__name { display: block; font-size: clamp(3.2rem, 9vw, 3.6rem); line-height: 1.05; }
.page-hero__lead { max-width: 56ch; margin: var(--s-3) auto 0; font-size: clamp(1.05rem, 1.8vw, 1.1rem); color: rgba(247, 244, 238, .95); }
.page-hero__crumbs { font-family: var(--font-ui); font-size: .8rem; color: rgba(247, 244, 238, .82); margin-bottom: var(--s-4); }
.page-hero__crumbs a { text-decoration: underline; text-underline-offset: 3px; }
.page-hero__crumbs a:hover { color: var(--color-on-dark); }

/* Ghost pill sits on a dark photo here: it needs the ivory treatment (like the home hero),
   otherwise the sage default text/border vanish against the background. */
.page-hero .pill--ghost { color: var(--color-on-dark); border-color: rgba(247, 244, 238, .65); }
.page-hero .pill--ghost .pill__arrow { background: rgba(247, 244, 238, .18); }
.page-hero .pill--ghost:hover { background: var(--color-on-dark); color: var(--color-primary); border-color: var(--color-on-dark); }
.page-hero :focus-visible { outline-color: var(--color-on-dark); }

/* Structure switch on detail pages — jump to the other property */
.struct-switch { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: var(--s-4); }

@media (max-width: 860px) {
    .strutture__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Gerarchia del page-hero su telefono. Senza queste regole il nome della struttura
   restava al minimo della clamp fluida (2.2rem = 35px) mentre il lead teneva il suo
   1.1rem (17.6px): l'introduzione risultava piu' grande del "L'Armonia" sopra al nome
   e, su 5 righe, copriva 150px contro i 37px del titolo. Qui il nome sale a 44px e il
   lead scende a 14.7px, lo stesso rapporto ~3x della home, cosi' le due pagine hanno
   una sola scala. "La Terrazza" a 2.75rem misura 200px: sta su una riga anche a 320px,
   dove la colonna e' 288px. */
@media (max-width: 560px) {
    .page-hero__name { font-size: clamp(2.75rem, 11.5vw, 3.2rem); line-height: 1.02; }
    /* Il titolo e' piu' alto: il distacco cresce di conseguenza, o il paragrafo
       gli si appoggia addosso e i due blocchi tornano a leggersi come uno solo. */
    .page-hero__lead { font-size: .92rem; line-height: 1.68; margin-top: var(--s-4); }
}

/* ====================================================================
   MOBILE-FIRST — lightbox, orientamento, tocco
   In fondo al file di proposito: queste regole devono vincere sul
   cascade rispetto ai blocchi responsive qui sopra.
   ==================================================================== */

/* --- Lightbox su telefono ---------------------------------------------
   Le frecce erano ancorate ai lati del viewport (left/right:22px) mentre la
   foto occupa min(1100px, 92vw): su un 390px l'immagine va da 32 a 358 e le
   frecce (22-66 e 324-368) le finivano sopra, proprio a meta' altezza. Qui
   scendono sotto la foto, affiancate, dove il pollice le raggiunge davvero. */
@media (max-width: 700px) {
    .lightbox { padding: var(--s-3) var(--s-3) 96px; }
    .lightbox__fig { max-width: 100%; }
    .lightbox__img { max-height: 62svh; }
    .lightbox__close { top: max(16px, env(safe-area-inset-top, 0px)); right: 16px; width: 48px; height: 48px; }
    .lightbox__nav {
        top: auto; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
        width: 52px; height: 52px; transform: none;
    }
    .lightbox__nav--prev { left: 50%; margin-left: -68px; }
    .lightbox__nav--next { right: 50%; margin-right: -68px; }
    .lightbox__nav--prev:hover, .lightbox__nav--next:hover { transform: scale(1.06); }
}

/* --- Telefono in orizzontale ------------------------------------------
   L'hero e' min-height:100svh + 128px di padding verticale: su un viewport
   alto 360px diventava 581px e spingeva i due CTA fuori schermo, con la
   sensazione di una pagina che finisce li'. */
@media (max-height: 540px) and (orientation: landscape) {
    .hero { min-height: 420px; }
    .hero__content { padding-block: var(--s-5); }
    .hero__lead { margin-bottom: var(--s-4); }
    .hero__actions { flex-wrap: nowrap; }
    .page-hero { min-height: 280px; }
    .page-hero__content { padding-block: var(--s-3); }
    /* In orizzontale il vincolo e' l'altezza, non la larghezza: il titolo si misura
       sui ~360px di schermo, non sugli 800 di viewport. Senza questi due tetti il
       wordmark prendeva 67px e i CTA tornavano sotto la piega, che e' esattamente
       cio' che questo blocco esiste per evitare. Il rapporto col testo resta sopra
       il doppio, quindi la gerarchia regge anche qui. */
    .hero__title .hero__script { font-size: clamp(2.6rem, 5.5vw, 3.2rem); }
    .page-hero__name { font-size: clamp(2.4rem, 5vw, 3rem); }
    .nav-menu__panel { padding: var(--s-5) var(--s-4) var(--s-4); border-radius: 32px; }
    .nav-menu__link { font-size: 1.35rem; padding: 2px 0; }
    .lightbox__img { max-height: 70svh; }
}

/* --- Tocco -------------------------------------------------------------
   Su touch il :hover resta "incollato" dopo il tap finche' non si tocca
   altrove: le card restavano sollevate e con l'ombra accesa. Qui si azzera
   la sola parte geometrica (transform/ombra), non i colori, che come
   feedback al tap invece servono. */
@media (hover: none) {
    .pill:hover { transform: none; box-shadow: none; }
    .pill:hover .pill__arrow { transform: none; }
    .amenity:hover, .place:hover { transform: none; box-shadow: none; border-color: var(--color-border-soft); }
    .review:hover { transform: none; box-shadow: none; }
    .scard:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--color-border-soft); }
    .gallery-item:hover { box-shadow: var(--shadow-sm); }
    .gallery-item:hover img { transform: none; }
    .gallery-item:hover::after { opacity: 0; }
    .fab--contact:hover, .fab--top:hover { transform: none; box-shadow: var(--shadow-md); }
    .fab--contact:hover { background: var(--color-accent); }
    .scard__nav--prev:hover, .scard__nav--next:hover { transform: translateY(-50%); }
    .lightbox__close:hover, .lightbox__nav:hover { transform: none; }
    .lightbox__nav--prev:hover { transform: translateY(-50%); }
    .lightbox__nav--next:hover { transform: translateY(-50%); }
}
@media (hover: none) and (max-width: 700px) {
    .lightbox__nav--prev:hover, .lightbox__nav--next:hover { transform: none; }
}

/* Il flash grigio di iOS/Android su ogni tap fa sembrare il sito lento:
   il feedback lo danno gia' le transizioni di ogni componente. */
a, button, [role="button"] { -webkit-tap-highlight-color: rgba(63, 92, 82, .12); }

/* Il carosello e la lightbox gestiscono lo swipe orizzontale da JS: il
   browser deve restare padrone dello scroll verticale, o la pagina si
   inchioda mentre si sfoglia. */
.scard__carousel, .lightbox__fig { touch-action: pan-y; }

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