/* =========================================================================
   BIOSHIFT HOUSE — foglio di stile unico
   Palette e identità tipografica originali, con contrasti portati ad
   AA (WCAG 2.2), layout fluido e componenti condivisi tra le pagine.
   ========================================================================= */

:root {
    --nero-assoluto: #09090B;
    --antracite-opaco: #121215;
    --antracite-alto: #17171B;
    --ottone-brunito: #C5A059;
    --ottone-chiaro: #DCBE84;
    --grigio-marmo: #F4F4F6;
    --grigio-testo: #D4D4D8;
    /* Il vecchio #71717A stava a 3,9:1 sul nero: sotto la soglia AA. */
    --grigio-cemento: #9E9EA8;
    --bordo-sottile: rgba(197, 160, 89, 0.14);
    --bordo-neutro: #232329;
    --verde-segnale: #4ADE80;
    --rosso-segnale: #F87171;

    --font-titoli: 'Cinzel', 'Times New Roman', serif;
    --font-testo: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --altezza-header: 88px;
    --larghezza-max: 1300px;
    --gutter: clamp(20px, 5vw, 40px);
    --spazio-sezione: clamp(72px, 11vw, 140px);
    --transizione: 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
    scroll-behavior: smooth;
    /* Le ancore non finiscono più sotto l'header fisso. */
    scroll-padding-top: calc(var(--altezza-header) + 24px);
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--nero-assoluto);
    color: var(--grigio-marmo);
    font-family: var(--font-testo);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    padding-top: var(--altezza-header);
}

h1, h2, h3, h4 {
    font-family: var(--font-titoli);
    letter-spacing: 0.06em;
    color: #FFFFFF;
    line-height: 1.25;
    text-wrap: balance;
}

p { color: var(--grigio-testo); text-wrap: pretty; }
img, picture, video { max-width: 100%; display: block; }
a { color: var(--ottone-chiaro); }

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

.container {
    width: 100%;
    max-width: var(--larghezza-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

section { padding: var(--spazio-sezione) 0; border-bottom: 1px solid #17171B; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.salta-al-contenuto {
    position: absolute;
    top: 8px; left: 8px;
    z-index: 2000;
    transform: translateY(-160%);
    background: var(--ottone-brunito);
    color: var(--nero-assoluto);
    padding: 12px 22px;
    font-size: 13px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.2s ease;
}
.salta-al-contenuto:focus { transform: translateY(0); }

/* ---------- HEADER + NAVIGAZIONE -------------------------------------- */

header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    background-color: rgba(9, 9, 11, 0.86);
    border-bottom: 1px solid var(--bordo-sottile);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.header-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: var(--altezza-header);
}

.brand-container { text-decoration: none; display: block; flex-shrink: 1; min-width: 0; }
.brand-container .main-logo {
    display: block;
    font-family: var(--font-titoli);
    font-size: clamp(19px, 2.4vw, 25px);
    font-weight: 800;
    letter-spacing: 0.22em;
    color: #FFFFFF;
    line-height: 1.1;
}
.brand-container .tagline {
    display: block;
    font-size: 10px; font-weight: 600;
    color: var(--ottone-brunito);
    letter-spacing: 0.24em; text-transform: uppercase;
    margin-top: 4px;
}

.nav-principale { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }
.nav-principale a {
    color: var(--grigio-testo);
    text-decoration: none;
    font-size: 12.5px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    padding: 6px 0;
    border-bottom: 1px solid transparent;
    transition: color 0.3s ease, border-color 0.3s ease;
    white-space: nowrap;
}
.nav-principale a:hover { color: var(--ottone-chiaro); border-bottom-color: var(--ottone-brunito); }
.nav-principale a[aria-current="page"] { color: var(--ottone-brunito); border-bottom-color: var(--ottone-brunito); }

.nav-cta {
    border: 1px solid var(--ottone-brunito) !important;
    color: var(--ottone-brunito) !important;
    padding: 11px 22px !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.nav-cta:hover { background-color: var(--ottone-brunito); color: var(--nero-assoluto) !important; }

.tasto-menu {
    display: none;
    background: none;
    border: 1px solid var(--bordo-neutro);
    color: var(--grigio-marmo);
    width: 46px; height: 42px;
    cursor: pointer;
    align-items: center; justify-content: center;
}
.tasto-menu span,
.tasto-menu span::before,
.tasto-menu span::after {
    content: ""; display: block;
    width: 20px; height: 1.5px;
    background: currentColor;
    transition: transform 0.3s ease, opacity 0.2s ease;
}
.tasto-menu span::before { transform: translateY(-6px); }
.tasto-menu span::after { transform: translateY(4.5px); }
.tasto-menu[aria-expanded="true"] span { background: transparent; }
.tasto-menu[aria-expanded="true"] span::before { transform: rotate(45deg); }
.tasto-menu[aria-expanded="true"] span::after { transform: translateY(-1.5px) rotate(-45deg); }

/* ---------- HERO ------------------------------------------------------- */

.hero {
    position: relative;
    isolation: isolate;
    padding: clamp(90px, 15vw, 170px) 0 clamp(80px, 12vw, 140px);
    text-align: center;
    overflow: hidden;
    border-bottom: 1px solid var(--bordo-sottile);
}
.hero::before {
    content: "";
    position: absolute; inset: 0; z-index: -2;
    background: radial-gradient(circle at 50% 22%, #1A1A20 0%, var(--nero-assoluto) 68%);
}
.hero__sfondo {
    position: absolute; inset: 0; z-index: -1;
    object-fit: cover; width: 100%; height: 100%;
    opacity: 0.2;
    filter: grayscale(0.5) contrast(1.05);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85), rgba(0,0,0,0.15) 72%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85), rgba(0,0,0,0.15) 72%, transparent);
}

.hero__occhiello {
    display: inline-block;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--ottone-brunito);
    border: 1px solid var(--bordo-sottile);
    padding: 9px 20px;
    margin-bottom: 34px;
    background: rgba(197, 160, 89, 0.05);
}

.hero h1 {
    font-size: clamp(30px, 5.4vw, 56px);
    line-height: 1.12;
    margin-bottom: 30px;
    text-transform: uppercase;
}
.hero h1 em { font-style: normal; color: var(--ottone-brunito); }
.hero__testo {
    font-size: clamp(16px, 1.6vw, 19px);
    max-width: 780px;
    margin: 0 auto 44px;
    color: var(--grigio-cemento);
}

.gruppo-cta { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }

.cta-caveau {
    display: inline-block;
    background-color: transparent;
    color: var(--ottone-brunito);
    padding: 19px 44px;
    font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
    font-size: 12px;
    border: 1px solid var(--ottone-brunito);
    text-decoration: none;
    transition: background-color var(--transizione), color var(--transizione), box-shadow var(--transizione);
}
.cta-caveau:hover {
    background-color: var(--ottone-brunito);
    color: var(--nero-assoluto);
    box-shadow: 0 0 44px rgba(197, 160, 89, 0.22);
}
.cta-secondaria {
    color: var(--grigio-marmo);
    border-color: var(--bordo-neutro);
}
.cta-secondaria:hover {
    background-color: transparent;
    color: var(--ottone-chiaro);
    border-color: var(--ottone-brunito);
    box-shadow: none;
}

/* ---------- BARRA NUMERI ---------------------------------------------- */

.barra-numeri {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    background: var(--bordo-neutro);
    border: 1px solid var(--bordo-neutro);
    margin-top: clamp(56px, 8vw, 90px);
}
.numero { background: var(--nero-assoluto); padding: 34px 24px; text-align: center; }
.numero__valore {
    font-family: var(--font-titoli);
    font-size: clamp(28px, 3.4vw, 38px);
    color: var(--ottone-brunito);
    display: block; line-height: 1;
}
.numero__etichetta {
    display: block; margin-top: 12px;
    font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--grigio-cemento);
}

/* ---------- MANIFESTO -------------------------------------------------- */

.manifesto-wrap {
    max-width: 1000px; margin: 0 auto; text-align: center;
    background-color: var(--antracite-opaco);
    border: 1px solid var(--bordo-sottile);
    padding: clamp(40px, 7vw, 78px) clamp(24px, 5vw, 60px);
}
.manifesto-wrap h2 {
    font-size: clamp(24px, 3.2vw, 36px);
    color: var(--ottone-brunito);
    margin-bottom: 28px; text-transform: uppercase;
}
.manifesto-wrap blockquote p {
    font-size: clamp(17px, 2vw, 21px);
    font-family: var(--font-titoli);
    line-height: 1.75; font-style: italic; color: #ECECEF;
}

/* ---------- TITOLI DI SEZIONE ------------------------------------------ */

.titolo-sezione { text-align: center; margin-bottom: clamp(44px, 6vw, 76px); max-width: 760px; margin-inline: auto; }
.titolo-sezione h2 { font-size: clamp(25px, 3.6vw, 40px); text-transform: uppercase; margin-bottom: 18px; }
.titolo-sezione p { color: var(--grigio-cemento); font-size: 16px; }
.titolo-sezione .occhiello {
    display: block; margin-bottom: 16px;
    font-family: var(--font-testo);
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--ottone-brunito);
}

/* ---------- PILASTRI --------------------------------------------------- */

.griglia-pilastri { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 24px; }
.scheda-pilastro {
    background-color: var(--antracite-opaco);
    border: 1px solid var(--bordo-neutro);
    padding: clamp(32px, 4vw, 48px) clamp(24px, 3vw, 38px);
    transition: border-color var(--transizione), transform var(--transizione), background-color var(--transizione);
}
.scheda-pilastro:hover {
    border-color: var(--bordo-sottile);
    background-color: var(--antracite-alto);
    transform: translateY(-4px);
}
.scheda-pilastro .indice {
    font-family: var(--font-titoli); font-size: 30px;
    color: var(--ottone-brunito); display: block; margin-bottom: 18px;
}
.scheda-pilastro h3 { font-size: 19px; margin-bottom: 14px; text-transform: uppercase; }
.scheda-pilastro p { font-size: 15px; color: var(--grigio-cemento); }

/* ---------- SLOT CANTIERI ---------------------------------------------- */

.griglia-slot { display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: 24px; }
.scheda-slot {
    background-color: var(--antracite-opaco);
    border: 1px solid var(--bordo-neutro);
    padding: clamp(38px, 5vw, 56px) clamp(24px, 3vw, 40px);
    text-align: center;
}
.scheda-slot--aperto { border-color: rgba(34, 197, 94, 0.35); background-color: rgba(34, 197, 94, 0.03); }
.scheda-slot h3 { font-size: 21px; margin-bottom: 14px; text-transform: uppercase; }
.scheda-slot p { font-size: 15px; color: var(--grigio-cemento); }
.stato-segnale {
    display: inline-block; padding: 7px 18px;
    font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.16em;
    margin-bottom: 26px;
}
.segnale-chiuso { background-color: rgba(239, 68, 68, 0.08); color: var(--rosso-segnale); border: 1px solid rgba(239, 68, 68, 0.55); }
.segnale-aperto { background-color: rgba(34, 197, 94, 0.08); color: var(--verde-segnale); border: 1px solid #22C55E; }
.scheda-slot .cta-slot {
    display: inline-block; margin-top: 24px;
    font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--ottone-brunito); text-decoration: none;
    border-bottom: 1px solid var(--bordo-sottile); padding-bottom: 4px;
}
.scheda-slot .cta-slot:hover { border-bottom-color: var(--ottone-brunito); }

/* ---------- ANTEPRIMA GALLERIA IN HOMEPAGE ----------------------------- */

.teaser {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(230px, 74vw, 340px);
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 18px;
    scrollbar-width: thin;
    scrollbar-color: var(--bordo-neutro) transparent;
    /* Sbordo controllato oltre il container, per far capire che scorre. */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
}
.teaser::-webkit-scrollbar { height: 4px; }
.teaser::-webkit-scrollbar-thumb { background: var(--bordo-neutro); }
.teaser__item {
    position: relative;
    display: block;
    scroll-snap-align: start;
    border: 1px solid var(--bordo-neutro);
    overflow: hidden;
    text-decoration: none;
    aspect-ratio: 4 / 5;
}
.teaser__item .tile__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--transizione), opacity 0.5s ease; }
.teaser__item:hover .tile__img { transform: scale(1.05); }
.teaser__label {
    position: absolute; inset: auto 0 0 0;
    padding: 46px 20px 18px;
    background: linear-gradient(to top, rgba(9, 9, 11, 0.94), transparent);
    display: grid; gap: 5px;
}
.teaser__cta { text-align: center; margin-top: 44px; }

/* ---------- GRIGLIA GALLERIA ------------------------------------------- */

.filtri {
    display: flex; flex-wrap: wrap; gap: 10px;
    justify-content: center; margin-bottom: 48px;
}
.filtro {
    background: transparent;
    border: 1px solid var(--bordo-neutro);
    color: var(--grigio-cemento);
    font-family: var(--font-testo);
    font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    padding: 12px 22px; cursor: pointer;
    transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}
.filtro:hover { color: var(--grigio-marmo); border-color: var(--bordo-sottile); }
.filtro.is-active { color: var(--nero-assoluto); background: var(--ottone-brunito); border-color: var(--ottone-brunito); }
.filtro__n { opacity: 0.55; margin-left: 6px; font-size: 10.5px; }

.griglia-galleria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 18px;
}
@media (min-width: 1100px) {
    .griglia-galleria { grid-template-columns: repeat(3, 1fr); }
    .tile--featured { grid-column: span 2; }
}

/* <picture> è inline: senza questo l'altezza al 100% dell'img non si risolve
   e object-fit: cover non entra mai in funzione. */
.tile__trigger picture,
.teaser__item picture { display: block; width: 100%; height: 100%; }

.tile { position: relative; margin: 0; }
.tile[hidden] { display: none; }
.tile__trigger {
    display: block; position: relative;
    width: 100%; padding: 0;
    background: var(--antracite-opaco);
    border: 1px solid var(--bordo-neutro);
    cursor: zoom-in; overflow: hidden;
    aspect-ratio: 4 / 5;
    transition: border-color var(--transizione);
}
/* Tutte le tessere normali hanno lo stesso rapporto, orizzontali comprese:
   basta una foto più bassa delle altre per sfilacciare l'intera riga. */
.tile--featured .tile__trigger { aspect-ratio: 16 / 10; }
/* Uno scatto verticale ritagliato in 16/10 perde troppo: gli lascio più altezza. */
.tile--featured.tile--portrait .tile__trigger { aspect-ratio: 3 / 2; }
.tile__trigger:hover { border-color: var(--bordo-sottile); }

.tile__img {
    width: 100%; height: 100%;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    transition: transform 0.9s var(--transizione), filter var(--transizione);
}
.tile__trigger:hover .tile__img { transform: scale(1.045); filter: brightness(1.06); }

.tile__overlay {
    position: absolute; inset: auto 0 0 0;
    display: grid; gap: 6px;
    padding: 58px 22px 20px;
    text-align: left;
    background: linear-gradient(to top, rgba(9, 9, 11, 0.95) 8%, rgba(9, 9, 11, 0.45) 55%, transparent);
}
.tile__cat {
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--ottone-brunito);
}
.tile__title {
    font-family: var(--font-titoli);
    font-size: 15.5px; letter-spacing: 0.03em; color: #FFFFFF;
    line-height: 1.35;
}
.galleria-vuota { text-align: center; color: var(--grigio-cemento); padding: 60px 0; }

/* ---------- LIGHTBOX --------------------------------------------------- */

.lightbox {
    width: 100%; max-width: 100%;
    height: 100%; max-height: 100%;
    margin: 0; padding: 0;
    border: 0; background: transparent; color: var(--grigio-marmo);
    overflow: hidden;
}
.lightbox::backdrop { background: rgba(5, 5, 7, 0.95); backdrop-filter: blur(6px); }
.lightbox__inner {
    display: grid;
    grid-template-rows: 1fr auto;
    height: 100%;
    padding: clamp(52px, 7vh, 76px) clamp(12px, 4vw, 64px) clamp(20px, 3vh, 34px);
}
.lightbox__figura {
    display: flex; align-items: center; justify-content: center;
    min-height: 0; margin: 0;
}
.lightbox__figura picture { display: contents; }
.lightbox__figura img {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain;
    border: 1px solid var(--bordo-neutro);
}
.lightbox__didascalia { text-align: center; padding-top: 20px; display: grid; gap: 7px; }
.lightbox__didascalia .tile__title { font-size: 18px; }
.lightbox__meta { font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ottone-brunito); }

.lightbox__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 52px; height: 52px;
    display: grid; place-items: center;
    background: rgba(9, 9, 11, 0.72);
    border: 1px solid var(--bordo-neutro);
    color: var(--grigio-marmo);
    font-size: 20px; cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.lightbox__nav:hover { background: var(--ottone-brunito); color: var(--nero-assoluto); border-color: var(--ottone-brunito); }
.lightbox__nav--prec { left: clamp(8px, 2vw, 24px); }
.lightbox__nav--succ { right: clamp(8px, 2vw, 24px); }
.lightbox__chiudi {
    position: absolute; top: 14px; right: clamp(8px, 2vw, 24px);
    width: 46px; height: 46px;
    background: transparent; border: 1px solid var(--bordo-neutro);
    color: var(--grigio-marmo); font-size: 22px; line-height: 1; cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.lightbox__chiudi:hover { background: var(--ottone-brunito); color: var(--nero-assoluto); }
.lightbox__contatore {
    position: absolute; top: 24px; left: clamp(12px, 4vw, 64px);
    font-size: 11px; letter-spacing: 0.2em; color: var(--grigio-cemento);
}

/* ---------- FORM ------------------------------------------------------- */

.scatola-buttafuori {
    max-width: 760px; margin: 0 auto 32px;
    background-color: var(--antracite-opaco);
    border: 1px solid var(--bordo-sottile);
    padding: clamp(32px, 6vw, 66px);
}
.scatola-buttafuori h3 {
    font-size: clamp(19px, 2.4vw, 24px); text-transform: uppercase;
    text-align: center; color: var(--ottone-brunito); margin-bottom: 22px;
}
.buttafuori-testo {
    font-size: 15px; color: var(--grigio-cemento);
    text-align: center; margin-bottom: 42px; line-height: 1.75;
}
.gruppo-input { margin-bottom: 28px; }
.gruppo-input label {
    display: block; font-size: 11.5px; text-transform: uppercase;
    letter-spacing: 0.16em; margin-bottom: 11px;
    color: var(--ottone-brunito); font-weight: 600;
}
.gruppo-input .aiuto { display: block; margin-top: 8px; font-size: 12.5px; color: var(--grigio-cemento); letter-spacing: 0; text-transform: none; font-weight: 400; }
.campo-input {
    width: 100%;
    background-color: var(--nero-assoluto);
    border: 1px solid #27272A;
    padding: 16px;
    color: #FFFFFF;
    font-family: var(--font-testo);
    font-size: 15.5px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.campo-input::placeholder { color: #5C5C66; }
.campo-input:focus { border-color: var(--ottone-brunito); outline: none; box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.12); }
.campo-input[aria-invalid="true"] { border-color: var(--rosso-segnale); }
select.campo-input {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ottone-brunito) 50%),
                      linear-gradient(135deg, var(--ottone-brunito) 50%, transparent 50%);
    background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 46px;
}
textarea.campo-input { resize: vertical; min-height: 120px; }

.errore-campo { display: block; margin-top: 9px; font-size: 13px; color: var(--rosso-segnale); }
.campo-esca { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.avviso {
    border: 1px solid var(--bordo-neutro);
    padding: 18px 20px; margin-bottom: 28px; font-size: 14.5px; line-height: 1.6;
}
.avviso[hidden] { display: none; }
.avviso--errore { border-color: rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.06); color: #FCA5A5; }
.avviso--ok { border-color: rgba(34, 197, 94, 0.5); background: rgba(34, 197, 94, 0.06); color: #86EFAC; }
.avviso--info { border-color: var(--bordo-sottile); background: rgba(197, 160, 89, 0.05); color: var(--ottone-chiaro); }

.bottone-militare {
    width: 100%;
    background-color: var(--ottone-brunito);
    color: var(--nero-assoluto);
    border: 1px solid var(--ottone-brunito);
    padding: 20px;
    font-family: var(--font-testo);
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em;
    font-size: 12.5px; cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.bottone-militare:hover:not(:disabled) { background-color: #FFFFFF; border-color: #FFFFFF; }
.bottone-militare:disabled { opacity: 0.3; cursor: not-allowed; }
.bottone-militare[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.nota-privacy { font-size: 12.5px; color: var(--grigio-cemento); text-align: center; margin-top: 18px; line-height: 1.6; }

/* ---------- FAQ -------------------------------------------------------- */

.lista-faq { max-width: 880px; margin: 0 auto; border-top: 1px solid var(--bordo-neutro); }
.faq { border-bottom: 1px solid var(--bordo-neutro); }
.faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 26px 4px; cursor: pointer; list-style: none;
    font-family: var(--font-titoli); font-size: clamp(16px, 1.9vw, 19px);
    color: #FFFFFF; letter-spacing: 0.03em;
    transition: color 0.3s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--ottone-chiaro); }
.faq summary::after {
    content: "+"; color: var(--ottone-brunito);
    font-family: var(--font-testo); font-size: 24px; font-weight: 300;
    line-height: 1; flex-shrink: 0; transition: transform 0.3s ease;
}
.faq[open] summary::after { transform: rotate(45deg); }
.faq__corpo { padding: 0 4px 28px; }
.faq__corpo p { font-size: 15.5px; color: var(--grigio-cemento); max-width: 74ch; }

/* ---------- FOOTER ----------------------------------------------------- */

footer {
    padding: clamp(60px, 9vw, 96px) 0 44px;
    background-color: #050507;
    border-top: 1px solid #17171B;
    font-size: 13.5px; color: var(--grigio-cemento); line-height: 1.85;
}
.footer-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 40px; text-align: left; margin-bottom: 52px;
}
.footer-grid h4 {
    font-size: 11.5px; font-family: var(--font-testo); font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--ottone-brunito); margin-bottom: 18px;
}
.footer-grid ul { list-style: none; }
.footer-grid li { margin-bottom: 9px; }
.footer-grid a { color: var(--grigio-cemento); text-decoration: none; transition: color 0.3s ease; }
.footer-grid a:hover { color: var(--ottone-chiaro); }
.footer-legale {
    border-top: 1px solid #17171B; padding-top: 32px;
    font-size: 12.5px; text-align: center;
}
.footer-legale strong { color: var(--ottone-brunito); font-weight: 600; letter-spacing: 0.1em; }

/* ---------- ANIMAZIONI DI ENTRATA -------------------------------------- */

.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- BREAKPOINT ------------------------------------------------- */

@media (max-width: 900px) {
    .tasto-menu { display: inline-flex; }
    .nav-principale {
        position: fixed;
        inset: var(--altezza-header) 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: rgba(9, 9, 11, 0.98);
        border-bottom: 1px solid var(--bordo-sottile);
        padding: 8px var(--gutter) 26px;
        transform: translateY(-12px);
        opacity: 0; visibility: hidden;
        transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
        max-height: calc(100dvh - var(--altezza-header)); overflow-y: auto;
    }
    .nav-principale.is-open { transform: none; opacity: 1; visibility: visible; }
    .nav-principale a { padding: 17px 0; border-bottom: 1px solid var(--bordo-neutro); font-size: 13.5px; }
    .nav-cta { margin-top: 18px; text-align: center; border-bottom: 1px solid var(--ottone-brunito) !important; }
    .tile--featured .tile__trigger { aspect-ratio: 4 / 3; }
    .lightbox__nav { width: 44px; height: 44px; top: auto; bottom: 16px; transform: none; }
    .lightbox__nav--prec { left: 16px; }
    .lightbox__nav--succ { right: 16px; }
    .lightbox__didascalia { padding-bottom: 56px; }
}

@media (max-width: 560px) {
    :root { --altezza-header: 76px; }
    .brand-container .tagline { letter-spacing: 0.16em; }
    .gruppo-cta .cta-caveau { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .reveal { opacity: 1; transform: none; }
}

@media print {
    header, .lightbox, .filtri, .teaser, .gruppo-cta { display: none !important; }
    body { background: #FFF; color: #000; padding-top: 0; }
    h1, h2, h3, h4, p { color: #000 !important; }
}

/* WHATSAPP */
.whatsapp-float { position: fixed; z-index: 20; right: clamp(18px, 3vw, 34px); bottom: clamp(18px, 3vw, 30px); display: inline-flex; align-items: center; justify-content: center; min-width: 132px; min-height: 48px; padding: 12px 20px; background: #1f9d55; border: 1px solid #76d69a; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; box-shadow: 0 12px 30px rgba(0,0,0,.35); transition: transform .25s ease, background .25s ease; }
.whatsapp-float:hover, .whatsapp-float:focus-visible { background: #168044; color: #fff; transform: translateY(-3px); }
.whatsapp-float:focus-visible { outline: 3px solid var(--ottone-chiaro); outline-offset: 4px; }
.gruppo-check label { display:flex; align-items:flex-start; gap:12px; text-transform:none; letter-spacing:0; color:var(--grigio-cemento); }
.gruppo-check input { accent-color:var(--ottone-brunito); margin-top:3px; width:18px; height:18px; }


.privacy-info { display:inline-flex; align-items:center; justify-content:center; width:1.2em; height:1.2em; margin-left:.35rem; border:1px solid currentColor; border-radius:50%; color:var(--ottone-brunito); font-size:.75em; cursor:help; }
.privacy-info:focus-visible { outline:2px solid var(--ottone-chiaro); outline-offset:3px; }

/* BARRA MUSICA */
.barra-musica { position: fixed; z-index: 20; left: clamp(18px, 3vw, 34px); bottom: clamp(18px, 3vw, 30px); display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; background: rgba(18, 18, 21, .92); border: 1px solid var(--bordo-sottile); border-radius: 999px; box-shadow: 0 12px 30px rgba(0,0,0,.35); backdrop-filter: blur(6px); }
.bottone-musica { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto; background: var(--ottone-brunito); border: 1px solid var(--ottone-chiaro); border-radius: 50%; color: #09090B; cursor: pointer; transition: transform .25s ease, background .25s ease; }
.bottone-musica:hover, .bottone-musica:focus-visible { background: var(--ottone-chiaro); transform: translateY(-2px); }
.bottone-musica:focus-visible { outline: 3px solid var(--ottone-chiaro); outline-offset: 4px; }
.musica-icona { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; transition: opacity .2s ease; }
.musica-icona--pausa { opacity: 0; font-size: 10px; letter-spacing: 1px; }
.barra-musica.in-riproduzione .musica-icona--play { opacity: 0; }
.barra-musica.in-riproduzione .musica-icona--pausa { opacity: 1; }
.musica-titolo { font-family: var(--font-testo); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--grigio-testo); white-space: nowrap; }
.musica-volume { width: 88px; height: 4px; accent-color: var(--ottone-brunito); cursor: pointer; }
.musica-volume:focus-visible { outline: 2px solid var(--ottone-chiaro); outline-offset: 3px; }
#player-musica { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); pointer-events: none; }
@media (max-width: 640px) {
    .musica-titolo { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .bottone-musica { transition: none; }
}