/* -----------------------------------------------------------------------------
   Caratteri tipografici

   Il font NON viene piu' preso da Google Fonts. Non era una questione di
   cookie (Google Fonts non ne deposita), ma di dati: ogni visita avrebbe
   inviato l'indirizzo IP del visitatore ai server di Google, e questo in
   Europa e' un trasferimento da dichiarare.

   Se vuoi Inter, scarica i file .woff2 da rsms.me/inter e mettili in
   assets/fonts/. Se i file non ci sono, il browser usa da solo il carattere
   di sistema, che su Windows, Mac, Android e iOS e' gia' molto simile: il
   sito resta identico e carica anche piu' in fretta.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/inter-variable.woff2') format('woff2-variations');
}

/* =============================================================================
   BEBGEST4 — Foglio di stile del sito pubblico

   Scritto a mano, servito dal tuo dominio: niente CDN, niente build, niente
   Node. Il pannello usa invece Tailwind da CDN, come il gestionale.
   ========================================================================== */

:root {
    --ink:        #050505;

    /* Le stesse componenti di --ink, ma numeriche.
       Serve perche' rgba() non accetta un colore esadecimale come primo
       argomento: per un fondo semitrasparente (testata, veli sopra le
       immagini, menu del telefono) occorrono i tre numeri separati. Tenerli
       qui evita che quei punti restino scuri quando si sceglie un tema
       chiaro dalle Impostazioni. */
    --ink-rgb:    5, 5, 5;
    --panel:      #0d0d0e;
    --panel-alt:  #141416;
    --gold:       #d5a43b;
    --gold-light: #f1cc72;
    --bone:       #f6f4ef;
    --ash:        #aaa79f;
    --line:       rgba(246, 244, 239, 0.10);

    --shell:      1240px;
    --radius:     2px;
    --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--ink);
    color: var(--bone);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

h1, h2, h3 { line-height: 1.15; margin: 0 0 0.5em; font-weight: 700; letter-spacing: -0.02em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--gold); color: var(--ink); }

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--gold); color: var(--ink); padding: 12px 20px; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* --- Struttura ----------------------------------------------------------- */
.shell {
    width: 100%;
    max-width: var(--shell);
    margin: 0 auto;
    padding: 0 24px;
}
.shell--stretto { max-width: 780px; }

.section { padding: 88px 0; }
.section--dark { background: var(--panel); }

.section__head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.section__head--left { margin-left: 0; text-align: left; }
.section__title { font-size: clamp(1.75rem, 4vw, 2.6rem); margin-bottom: 12px; }
.section__lead { color: var(--ash); margin: 0; }
.section__actions { margin-top: 48px; text-align: center; }

.eyebrow {
    font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--gold); font-weight: 600; margin: 0 0 12px;
}

.grid { display: grid; gap: 28px; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

/* --- Bottoni ------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 30px; border: 1px solid transparent; border-radius: var(--radius);
    font-weight: 600; font-size: 0.9rem; letter-spacing: 0.04em;
    transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.btn:hover { transform: translateY(-1px); }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--gold-light); }
.btn--ghost { border-color: var(--line); color: var(--bone); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn--small { padding: 9px 18px; font-size: 0.82rem; }
.btn--large { padding: 17px 40px; font-size: 0.95rem; }

.badge {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    padding: 5px 12px; border-radius: var(--radius);
    font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
}
.badge--gold { background: var(--gold); color: var(--ink); }

.chip-list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.chip {
    padding: 8px 18px; border: 1px solid var(--line); border-radius: 100px;
    font-size: 0.85rem; color: var(--ash); transition: all var(--transition);
}
.chip:hover { border-color: var(--gold); color: var(--gold); }

/* --- Testata ------------------------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(var(--ink-rgb), 0.88);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    transition: padding var(--transition);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 18px; }
.site-header.is-compatta .site-header__inner { padding-block: 10px; }
.site-header__logo img { width: 130px; height: auto; }

.site-nav__list { display: flex; align-items: center; gap: 28px; }
.site-nav__list a { font-size: 0.88rem; color: var(--ash); transition: color var(--transition); }
.site-nav__list a:hover { color: var(--gold); }
.site-nav__list .btn { color: var(--ink); }

.site-header__burger {
    display: none; flex-direction: column; gap: 5px;
    background: none; border: 0; padding: 8px;
}
.site-header__burger span { width: 24px; height: 2px; background: var(--bone); transition: var(--transition); }

/* --- Hero ---------------------------------------------------------------- */
.hero { padding: 96px 0 80px; overflow: hidden; }
.hero__inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.hero__title { font-size: clamp(2.2rem, 6vw, 4rem); text-transform: uppercase; letter-spacing: -0.03em; }
.hero__lead { color: var(--ash); font-size: 1.05rem; max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.hero__visual img {
    border-radius: var(--radius);
    /* Tetto deciso dal pannello: una foto verticale non deve allungare la
       pagina fino a spingere fuori schermo il testo che le sta accanto. */
    max-height: var(--altezza-immagine, 400px);
    width: 100%;
    object-fit: contain;
    object-position: center;
}
.hero__placeholder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hero__placeholder span {
    aspect-ratio: 3 / 4; border-radius: var(--radius);
    background: linear-gradient(150deg, var(--panel-alt), rgba(213, 164, 59, 0.14));
    border: 1px solid var(--line);
}
.hero__placeholder span:nth-child(1) { transform: rotate(-6deg) translateY(12px); }
.hero__placeholder span:nth-child(3) { transform: rotate(6deg) translateY(12px); }

/* --- Barra vantaggi ------------------------------------------------------ */
.benefits { border-block: 1px solid var(--line); background: var(--panel); }
.benefits__grid.shell { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 32px; padding: 48px 24px; }

/* Testo e icona al centro: con l'icona sopra, il testo allineato a sinistra
   lasciava le voci sbilanciate. Chi preferisce l'allineamento a sinistra puo'
   ancora sceglierlo dal pannello. */
.benefits__grid--centro .benefits__item { text-align: center; }
.benefits__grid--centro .benefits__icona { margin-left: auto; margin-right: auto; }
.benefits__grid--sinistra .benefits__item { text-align: left; }
.benefits__item h3 { font-size: 0.95rem; margin-bottom: 6px; }
.benefits__item p { color: var(--ash); font-size: 0.86rem; margin: 0; }

.benefits__icona {
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; margin-bottom: 14px;
    border-radius: 50%;
    border: 1px solid rgba(213, 164, 59, 0.35);
    background: rgba(213, 164, 59, 0.07);
    color: var(--gold);
}

/* Griglia con numero di colonne deciso dal pannello */
/* Icona caricata: sta dentro lo stesso cerchio delle icone incluse, cosi'
   mescolando le due la fila resta ordinata. */
.benefits__icona--immagine img { width: 30px; height: 30px; object-fit: contain; }

.grid--configurabile { grid-template-columns: repeat(var(--colonne-mobile, 1), minmax(0, 1fr)); }

@media (min-width: 720px) {
    .grid--configurabile { grid-template-columns: repeat(var(--colonne-desktop, 3), minmax(0, 1fr)); }
}

/* --- Schede prodotto ----------------------------------------------------- */
.card {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; display: flex; flex-direction: column;
    transition: border-color var(--transition), transform var(--transition);
}
.card:hover { border-color: rgba(213, 164, 59, 0.45); transform: translateY(-3px); }
.card__media { position: relative; display: block; aspect-ratio: 1; background: var(--panel-alt); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.card:hover .card__media img { transform: scale(1.04); }
.card__body { padding: 18px 20px; display: flex; flex-direction: column; flex: 1; }
.card__eyebrow { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin: 0 0 8px; }
.card__title { font-size: 1rem; margin: 0 0 6px; }
.card__text { color: var(--ash); font-size: 0.85rem; margin: 0; }
.card__price { font-weight: 700; color: var(--gold); margin: 10px 0 0; }

/* L'intera scheda e' cliccabile.
   Prima l'unico invito a cliccare era la scritta "Scopri", che pero' non era
   un pulsante: sembrava cliccabile e non lo era. Tolta quella, si allarga il
   collegamento del titolo fino a coprire tutta la scheda, cosi' funziona
   ovunque si clicchi. Il titolo resta l'unico link vero, quindi chi naviga
   con la tastiera o con uno screen reader sente una voce sola e sensata. */
.card { position: relative; }
.card__title a::after { content: ''; position: absolute; inset: 0; z-index: 3; }

/* --- Riquadri categoria -------------------------------------------------- */
.tile {
    display: block; background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden; transition: all var(--transition);
}
.tile:hover { border-color: rgba(213, 164, 59, 0.45); transform: translateY(-3px); }
.tile__media { aspect-ratio: 4 / 3; background: var(--panel-alt); }
.tile__media img { width: 100%; height: 100%; object-fit: cover; }
.tile__body { padding: 22px; }
.tile__body h3 { font-size: 1.1rem; margin-bottom: 8px; }
.tile__body p { color: var(--ash); font-size: 0.87rem; margin: 0; }
.tile__meta { margin-top: 10px !important; font-size: 0.75rem !important; color: var(--gold) !important; }

/* --- Banner, story, cta -------------------------------------------------- */
.banner {
    background: var(--panel-alt) center/cover no-repeat; padding: 72px 0;
    border-block: 1px solid var(--line); position: relative;
}
.banner::after { content: ''; position: absolute; inset: 0; background: rgba(var(--ink-rgb), 0.72); }
.banner__inner { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.banner__title { font-size: clamp(1.5rem, 3.4vw, 2.2rem); margin: 0; }
.banner__text { color: var(--ash); margin: 10px 0 0; max-width: 52ch; }

.story { padding: 88px 0; }
.story__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.story__text p { color: var(--ash); }
.story__media img { border-radius: var(--radius); }

.cta { padding: 88px 0; background: linear-gradient(140deg, var(--panel), rgba(213,164,59,0.10)); }
.cta__inner { text-align: center; max-width: 620px; margin: 0 auto; }
.cta__title { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.cta__text { color: var(--ash); margin-bottom: 28px; }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.gallery__item { margin: 0; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }

/* --- Newsletter ---------------------------------------------------------- */
.newsletter-block { max-width: 620px; margin: 0 auto; text-align: center; }
.newsletter-block__nota { font-size: 0.78rem; color: var(--ash); margin-top: 16px; }

.newsletter { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }
.newsletter__input {
    flex: 1 1 260px; padding: 14px 18px; background: var(--ink);
    border: 1px solid var(--line); border-radius: var(--radius); color: var(--bone);
}
.newsletter__input:focus { border-color: var(--gold); outline: none; }
.newsletter__trap { position: absolute; left: -9999px; }
.newsletter__esito { margin-top: 14px; font-size: 0.88rem; }
.newsletter__esito--success { color: var(--gold-light); }
.newsletter__esito--error { color: #ef9a9a; }

/* --- Filtri e paginazione ------------------------------------------------ */
.filtri { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 40px; }
.filtri__input, .filtri__select {
    padding: 12px 16px; background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--radius); color: var(--bone); font-size: 0.88rem;
}
.filtri__input { flex: 1 1 220px; }
.filtri__input:focus, .filtri__select:focus { border-color: var(--gold); outline: none; }
.filtri__reset { font-size: 0.82rem; color: var(--ash); text-decoration: underline; }

.paginazione { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 56px; }
.paginazione__voce {
    min-width: 42px; padding: 10px 14px; text-align: center;
    border: 1px solid var(--line); border-radius: var(--radius);
    font-size: 0.85rem; color: var(--ash); transition: all var(--transition);
}
.paginazione__voce:hover { border-color: var(--gold); color: var(--gold); }
.paginazione__voce.is-attiva { background: var(--gold); border-color: var(--gold); color: var(--ink); font-weight: 700; }

.vuoto { color: var(--ash); text-align: center; padding: 64px 0; }

/* --- Breadcrumb ---------------------------------------------------------- */
.breadcrumbs { padding: 20px 0; border-bottom: 1px solid var(--line); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.8rem; color: var(--ash); }
.breadcrumbs li + li::before { content: '/'; margin-right: 8px; opacity: 0.5; }
.breadcrumbs a:hover { color: var(--gold); }

/* --- Pagina prodotto ----------------------------------------------------- */
.prodotto { padding: 64px 0 88px; }
.prodotto__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.prodotto__principale {
    aspect-ratio: 1; background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden;
}
.prodotto__principale img { width: 100%; height: 100%; object-fit: cover; }
.prodotto__miniature { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.prodotto__miniatura {
    width: 76px; height: 76px; padding: 0; overflow: hidden;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    transition: border-color var(--transition);
}
.prodotto__miniatura img { width: 100%; height: 100%; object-fit: cover; }
.prodotto__miniatura.is-attiva, .prodotto__miniatura:hover { border-color: var(--gold); }

.prodotto__titolo { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
.prodotto__sottotitolo { color: var(--ash); font-size: 1.02rem; }
.prodotto__sottotitolo-sezione { font-size: 1.05rem; margin: 36px 0 14px; }
.prodotto__prezzo { font-size: 1.5rem; font-weight: 700; color: var(--gold); margin: 20px 0; }
.prodotto__nota { font-size: 0.78rem; color: var(--ash); margin-top: 12px; }

.prosa p { color: var(--ash); }

.specifiche { margin: 0 0 28px; }
.specifiche__riga {
    display: flex; justify-content: space-between; gap: 20px;
    padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem;
}
.specifiche__riga dt { color: var(--ash); margin: 0; }
.specifiche__riga dd { margin: 0; text-align: right; font-weight: 500; }

/* --- Errore -------------------------------------------------------------- */
.errore { padding: 120px 0; }
.errore__inner { max-width: 560px; margin: 0 auto; text-align: center; }
.errore__titolo { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.errore__testo { color: var(--ash); margin-bottom: 32px; }
.errore__azioni { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* --- Piede --------------------------------------------------------------- */
.site-footer { background: var(--panel); border-top: 1px solid var(--line); padding: 64px 0 28px; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.site-footer__brand img { width: 130px; margin-bottom: 16px; }
.site-footer__brand p { color: var(--ash); font-size: 0.88rem; max-width: 34ch; }
.site-footer__title { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.site-footer__list li { margin-bottom: 10px; }
.site-footer__list a, .site-footer__list li { color: var(--ash); font-size: 0.87rem; }
.site-footer__list a:hover { color: var(--gold); }
.site-footer__social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.site-footer__social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--line); color: var(--ash);
    transition: color var(--transition), border-color var(--transition), transform var(--transition);
}
.site-footer__social a:hover {
    color: var(--gold); border-color: var(--gold); transform: translateY(-2px);
}
.site-footer__bottom {
    display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
    margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line);
    font-size: 0.78rem; color: var(--ash);
}
.site-footer__bottom p { margin: 0; }

/* --- Comparsa progressiva ------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 620ms ease, transform 620ms ease; }
.reveal.is-visibile { opacity: 1; transform: none; }

/* --- Adattamento ai piccoli schermi -------------------------------------- */
@media (max-width: 960px) {
    .hero__inner, .story__inner, .prodotto__inner { grid-template-columns: 1fr; gap: 40px; }
    .site-footer__grid { grid-template-columns: 1fr 1fr; }

    .site-header__burger { display: flex; }

    .site-nav {
        position: fixed; inset: 64px 0 auto; background: var(--ink);
        border-bottom: 1px solid var(--line); padding: 24px;
        transform: translateY(-120%); transition: transform var(--transition);
    }
    .site-nav.is-aperto { transform: none; }
    .site-nav__list { flex-direction: column; align-items: flex-start; gap: 18px; }
}

@media (max-width: 900px) {
    /* Su telefono le voci si impilano: senza spazio sopra e sotto la barra
       sembrava incollata ai blocchi vicini.
       Il selettore include .shell di proposito: quella classe azzera lo spazio
       verticale sugli schermi stretti, e senza pari specificita' vincerebbe. */
    .benefits__grid.shell { gap: 26px; padding: 40px 24px; }
    .benefits__icona { width: 46px; height: 46px; margin-bottom: 10px; }
}

@media (max-width: 560px) {
    .section { padding: 64px 0; }
    .shell { padding: 0 18px; }
    .site-footer__grid { grid-template-columns: 1fr; }
    .grid--4 { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
}

/* --- Chi preferisce meno animazioni ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
}

/* --- Hero con video di sfondo ---------------------------------------------
   L'altezza arriva dalla variabile --altezza, impostata dal blocco stesso:
   un valore per telefono e uno per schermo grande, decisi dal pannello.
   -------------------------------------------------------------------------- */
.hero-video {
    position: relative;
    min-height: var(--altezza, 460px);
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--panel);
}

.hero-video__sfondo { position: absolute; inset: 0; }

.hero-video__poster,
.hero-video__media {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}

/* Il video sta sopra all'immagine di riserva: se non parte, resta l'immagine. */
.hero-video__media { z-index: 1; }

.hero-video__velo {
    position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(
        180deg,
        rgba(var(--ink-rgb), calc(var(--velo, 0.45) * 0.75)) 0%,
        rgba(var(--ink-rgb), var(--velo, 0.45)) 60%,
        rgba(var(--ink-rgb), calc(var(--velo, 0.45) + 0.15)) 100%
    );
}

.hero-video__contenuto {
    position: relative; z-index: 3;
    padding-block: 64px;
    max-width: 720px;
}

.hero-video__titolo {
    font-size: clamp(1.9rem, 5vw, 3.4rem);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.hero-video__testo {
    color: var(--bone);
    opacity: 0.88;
    font-size: 1.03rem;
    max-width: 52ch;
}

.hero-video__azioni { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* Chi ha chiesto meno animazioni non riceve il video in movimento. */
@media (prefers-reduced-motion: reduce) {
    .hero-video__media { display: none; }
}

/* --- WhatsApp -------------------------------------------------------------
   Pulsante fisso sul computer, voce di menu sul telefono: sono lo stesso
   collegamento mostrato dove ha senso in ciascun caso.
   -------------------------------------------------------------------------- */
.whatsapp-badge {
    position: fixed; left: 20px; bottom: 20px; z-index: 55;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 18px 12px 14px; border-radius: 100px;
    background: var(--gold); color: var(--ink);
    font-size: 0.85rem; font-weight: 600;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
    transition: background var(--transition), transform var(--transition);
}
.whatsapp-badge:hover { background: var(--gold-light); transform: translateY(-2px); }

/* Ritirato quando si arriva al footer, dove l'icona c'e' gia'. */
.whatsapp-badge--nascosto {
    opacity: 0; visibility: hidden; transform: translateY(12px);
    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
}

/* Riserva per i browser senza JavaScript: un po' di spazio in fondo. */
body:has(.whatsapp-badge) .site-footer__bottom { padding-bottom: 40px; }

@media (max-width: 960px) {
    body:has(.whatsapp-badge) .site-footer__bottom { padding-bottom: 24px; }
}
.whatsapp-badge .icona { flex-shrink: 0; }

/* La voce nel menu compare solo dove il pulsante fisso non c'e'. */
.site-nav__whatsapp { display: none; }
.site-nav__whatsapp a {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--gold) !important; font-weight: 600;
}

@media (max-width: 960px) {
    /* Su telefono il pulsante fisso coprirebbe i contenuti: si usa il menu. */
    .whatsapp-badge { display: none; }
    .site-nav__whatsapp { display: block; }
}

/* Schermi stretti in verticale: il pulsante si riduce alla sola icona. */
@media (min-width: 961px) and (max-height: 620px) {
    .whatsapp-badge { padding: 12px; }
    .whatsapp-badge__testo { display: none; }
}

@media print { .whatsapp-badge { display: none; } }

/* --- Selettore della lingua ------------------------------------------------ */
.site-nav__lingue { display: flex; align-items: center; gap: 4px; }
.site-nav__lingue a {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 9px; border-radius: 3px;
    font-size: 0.78rem; letter-spacing: 0.04em; color: var(--ash);
    border: 1px solid transparent; transition: all var(--transition);
}
.site-nav__lingue a:hover { color: var(--gold); border-color: var(--line); }
.site-nav__lingue a.is-attiva { color: var(--gold); border-color: rgba(213, 164, 59, 0.4); }
.site-nav__lingue-codice { font-weight: 600; }

@media (max-width: 960px) {
    .site-nav__lingue { padding-top: 8px; border-top: 1px solid var(--line); width: 100%; }
}

/* --- Moduli (contatti) -----------------------------------------------------
   Su schermo grande: informazioni a sinistra (un terzo), modulo a destra (due
   terzi). Su telefono l'ordine si inverte, perche' chi apre la pagina dal
   telefono vuole scrivere, non leggere la partita IVA.
   -------------------------------------------------------------------------- */
.contatti {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 48px;
    align-items: start;
}

.contatti__info { position: sticky; top: 100px; }
.contatti__logo { width: 140px; margin-bottom: 24px; }

.contatti__blocco { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.contatti__blocco:last-of-type { border-bottom: 0; }
.contatti__blocco p { color: var(--ash); font-size: 0.9rem; margin: 0 0 6px; }

.contatti__ragione { color: var(--bone) !important; font-weight: 600; font-size: 0.98rem !important; }
.contatti__vat { font-size: 0.82rem !important; opacity: 0.8; }

.contatti__titolo {
    font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 12px;
}

.contatti__blocco a {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--bone); transition: color var(--transition);
}
.contatti__blocco a:hover { color: var(--gold); }

.contatti__social { display: flex; flex-wrap: wrap; gap: 10px; }
.contatti__social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--line); color: var(--ash);
    transition: color var(--transition), border-color var(--transition), transform var(--transition);
}
.contatti__social a:hover { color: var(--gold); border-color: var(--gold); transform: translateY(-2px); }

.contatti__modulo {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px;
}

.contatti__titolo-modulo { font-size: 1.3rem; margin-bottom: 24px; }
.contatti__grazie { text-align: center; padding: 40px 0; }
.contatti__grazie p { color: var(--ash); margin-bottom: 24px; }

/* --- Campi ---------------------------------------------------------------- */
.modulo__riga { margin-bottom: 18px; }
.modulo__riga label { display: block; font-size: 0.8rem; color: var(--ash); margin-bottom: 6px; }
.modulo__riga input,
.modulo__riga textarea {
    width: 100%; padding: 12px 14px;
    background: var(--ink); border: 1px solid var(--line);
    border-radius: var(--radius); color: var(--bone); font: inherit; font-size: 0.95rem;
}
.modulo__riga input:focus,
.modulo__riga textarea:focus { border-color: var(--gold); outline: none; }
.modulo__riga textarea { resize: vertical; min-height: 150px; }

/* Due campi affiancati dove ci sta */
.modulo__coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.modulo__nota { margin-top: 14px; font-size: 0.78rem; color: var(--ash); }

.esito {
    padding: 14px 18px; border-radius: var(--radius);
    border: 1px solid var(--line); font-size: 0.9rem; margin: 0 0 28px;
}
.esito--success { border-color: rgba(213, 164, 59, 0.45); background: rgba(213, 164, 59, 0.08); color: var(--gold-light); }
.esito--error { border-color: rgba(220, 80, 80, 0.4); background: rgba(220, 80, 80, 0.07); color: #ffb4b4; }

@media (max-width: 900px) {
    .contatti { grid-template-columns: 1fr; gap: 40px; }

    /* Il modulo passa in cima: su telefono e' quello che serve per primo. */
    .contatti__modulo { order: -1; padding: 24px; }
    .contatti__info { position: static; }
    .contatti__logo { display: none; }
}

@media (max-width: 560px) {
    .modulo__coppia { grid-template-columns: 1fr; gap: 0; }
    .contatti__modulo { padding: 20px; }
}

/* --- Sfondo dei blocchi ----------------------------------------------------
   Tre modi: immagine ferma che scorre con la pagina, immagine fissa (il
   contenuto ci scorre sopra), parallasse (lo sfondo si muove più lentamente).
   Su telefono gli ultimi due diventano fermi: l'effetto scatta e consuma
   batteria, e "background-attachment: fixed" su iOS non funziona proprio.
   -------------------------------------------------------------------------- */
.blocco-sfondo { position: relative; overflow: hidden; isolation: isolate; }

.blocco-sfondo__immagine {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

.blocco-sfondo--fisso .blocco-sfondo__immagine { background-attachment: fixed; }

/* Nella parallasse il livello è più alto della sezione, così può scorrere
   senza scoprire i bordi. Lo spostamento lo fa il JavaScript. */
.blocco-sfondo--parallax .blocco-sfondo__immagine {
    top: -15%; height: 130%;
    will-change: transform;
}

.blocco-sfondo__velo {
    position: absolute; inset: 0; z-index: 1;
    background: rgba(var(--ink-rgb), var(--velo-sfondo, 0.55));
}

.blocco-sfondo__contenuto { position: relative; z-index: 2; }

/* I blocchi con sfondo proprio non devono sovrapporne un secondo. */
.blocco-sfondo .section,
.blocco-sfondo .section--dark,
.blocco-sfondo .story,
.blocco-sfondo .cta,
.blocco-sfondo .benefits { background: transparent; }

@media (max-width: 900px) {
    .blocco-sfondo--fisso .blocco-sfondo__immagine { background-attachment: scroll; }
    .blocco-sfondo--parallax .blocco-sfondo__immagine {
        top: 0; height: 100%; transform: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .blocco-sfondo--fisso .blocco-sfondo__immagine { background-attachment: scroll; }
    .blocco-sfondo--parallax .blocco-sfondo__immagine {
        top: 0; height: 100%; transform: none !important;
    }
}

/* --- Avviso al centro dello schermo -----------------------------------------
   Compare dopo un'iscrizione o un invio. Non serve JavaScript per vederlo:
   e' HTML e CSS, e il pulsante di chiusura e' un link alla stessa pagina
   senza il parametro dell'esito.
   -------------------------------------------------------------------------- */
.avviso-modale {
    position: fixed; inset: 0; z-index: 80;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    animation: avviso-entra 220ms ease;
}

.avviso-modale__sfondo {
    position: absolute; inset: 0;
    background: rgba(var(--ink-rgb), 0.82);
    backdrop-filter: blur(3px);
}

.avviso-modale__riquadro {
    position: relative; z-index: 1;
    width: 100%; max-width: 420px;
    padding: 36px 32px 32px;
    text-align: center;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.avviso-modale__riquadro--success { border-color: rgba(213, 164, 59, 0.5); }
.avviso-modale__riquadro--error { border-color: rgba(220, 80, 80, 0.45); }

.avviso-modale__icona {
    display: inline-flex; align-items: center; justify-content: center;
    width: 68px; height: 68px; margin-bottom: 18px;
    border-radius: 50%;
}
.avviso-modale__riquadro--success .avviso-modale__icona {
    color: var(--gold); background: rgba(213, 164, 59, 0.1);
    border: 1px solid rgba(213, 164, 59, 0.35);
}
.avviso-modale__riquadro--error .avviso-modale__icona {
    color: #ff9b9b; background: rgba(220, 80, 80, 0.1);
    border: 1px solid rgba(220, 80, 80, 0.3);
}

.avviso-modale__testo {
    font-size: 1.02rem; line-height: 1.6; color: var(--bone);
    margin: 0 0 24px;
}

@keyframes avviso-entra {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .avviso-modale { animation: none; }
}

/* Chi non ha JavaScript non perde niente: il link di chiusura funziona. */
.avviso-modale--chiuso { display: none; }

/* --- Articoli --------------------------------------------------------------
   Il testo scorre accanto all'immagine e prosegue sotto quando è più lungo:
   si ottiene con float, non con una griglia, perché una griglia terrebbe il
   testo confinato nella sua colonna lasciando spazio vuoto.
   -------------------------------------------------------------------------- */
.articolo__testa { margin-bottom: 32px; }
.articolo__titolo { font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.15; margin: 10px 0 16px; }
.articolo__riassunto { color: var(--ash); font-size: 1.05rem; line-height: 1.7; }

.articolo__copertina { margin: 0 0 40px; }
.articolo__copertina img { width: 100%; border-radius: var(--radius); }

.articolo__testo { color: var(--bone); font-size: 1rem; line-height: 1.8; }
.articolo__testo + .articolo__testo { margin-top: 18px; }

.articolo__blocco { margin-bottom: 44px; }
/* Il contenitore si richiude sotto l'immagine: senza, il blocco successivo
   partirebbe accanto a quella e si accavallerebbe. */
.articolo__blocco::after { content: ''; display: block; clear: both; }

.articolo__sottotitolo { font-size: 1.3rem; margin-bottom: 14px; }

.articolo__immagine { margin: 0 0 12px; max-width: 46%; }
.articolo__immagine img { width: 100%; border-radius: var(--radius); display: block; }
.articolo__immagine figcaption {
    margin-top: 8px; font-size: 0.8rem; color: var(--ash); line-height: 1.5;
}

.articolo__immagine--sinistra { float: left; margin-right: 28px; }
.articolo__immagine--destra { float: right; margin-left: 28px; }

.articolo__ritorno { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }

@media (max-width: 720px) {
    /* Su telefono un'immagine affiancata lascia al testo una colonna di poche
       parole, illeggibile: l'immagine passa sopra, a tutta larghezza. */
    .articolo__immagine,
    .articolo__immagine--sinistra,
    .articolo__immagine--destra {
        float: none; max-width: 100%; margin: 0 0 18px;
    }
}

/* --- Filtro per sottocategoria --------------------------------------------- */
.chip.is-attiva {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--ink);
    font-weight: 600;
}

.filtro-attivo {
    margin: 14px 0 0;
    font-size: 0.85rem;
    color: var(--ash);
}
.filtro-attivo strong { color: var(--bone); }
.filtro-attivo a { color: var(--gold); }
.filtro-attivo a:hover { color: var(--gold-light); }

/* --- Schede prodotto su telefono -------------------------------------------
   Titolo e descrizione più contenuti: con due schede affiancate su uno
   schermo stretto, il testo alla misura del desktop mangiava metà altezza.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
    .card__body { padding: 14px 14px 16px; }
    .card__eyebrow { font-size: 0.62rem; letter-spacing: 0.1em; margin-bottom: 5px; }
    .card__title { font-size: 0.86rem; line-height: 1.3; margin-bottom: 4px; }
    .card__text { font-size: 0.75rem; line-height: 1.45; }
    .card__price { font-size: 0.9rem; margin-top: 8px; }
}

@media (max-width: 420px) {
    .card__body { padding: 12px; }
    .card__title { font-size: 0.82rem; }
    .card__text { font-size: 0.72rem; }
}

/* -----------------------------------------------------------------------------
   Ancore sotto la testata fissa

   La testata resta appiccicata in alto (position: sticky, riga 143). Senza
   questa regola, un link come "#prenota" porta la sezione al bordo superiore
   della finestra, dove la testata la copre: si atterra sul modulo con il
   titolo gia' nascosto. scroll-margin-top dice al browser di fermarsi qualche
   pixel piu' su, tanti quanti ne occupa la testata.
   -------------------------------------------------------------------------- */
#prenota { scroll-margin-top: 96px; }

/* Nota sotto il pulsante di invio: e' l'avviso che quella appena mandata e' una
   richiesta e non una prenotazione. Va letta, quindi non e' grigio spento. */
.modulo__nota--rilievo {
    color: var(--gold-light);
    border-left: 2px solid var(--gold);
    padding-left: 12px;
}

/* -----------------------------------------------------------------------------
   Disposizioni della scheda camera

   Cinque modi di sistemare gli stessi tre blocchi: galleria, testo, modulo.
   L'HTML e' identico in tutti e cinque - cambia solo la classe sul contenitore
   e queste regole. Cosi' non esistono cinque modelli da tenere allineati, e
   una correzione fatta una volta vale ovunque.

   Sotto i 900 pixel tutti diventano una colonna sola: affiancare qualcosa su
   un telefono non ha senso, e la scelta serve al monitor.
   -------------------------------------------------------------------------- */

/* Il riquadro del modulo quando sta dentro la griglia invece che nella
   fascia sotto. */
.prenota-riquadro {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 24px;
}
.prenota-riquadro__titolo { font-size: 1.15rem; margin: 0 0 16px; }

/* Resta visibile mentre si scorre la descrizione. Il valore tiene conto
   della testata appiccicata in alto. */
.prodotto--modulo-destra .prodotto__modulo,
.prodotto--modulo-sinistra .prodotto__modulo {
    position: sticky;
    top: 96px;
}

/* 1. Classico: galleria e testo affiancati, modulo nella fascia sotto.
      E' la disposizione che c'era prima e resta il predefinito. */
.prodotto--classico .prodotto__inner {
    grid-template-columns: 1fr 1fr;
}

/* 2. Modulo a destra: galleria e testo incolonnati a sinistra. */
.prodotto--modulo-destra .prodotto__inner {
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr);
    grid-template-areas:
        "galleria modulo"
        "testo    modulo";
}
.prodotto--modulo-destra .prodotto__galleria { grid-area: galleria; }
.prodotto--modulo-destra .prodotto__testo    { grid-area: testo; }
.prodotto--modulo-destra .prodotto__modulo   { grid-area: modulo; }

/* 3. Modulo a sinistra: la stessa cosa a specchio. */
.prodotto--modulo-sinistra .prodotto__inner {
    grid-template-columns: minmax(300px, 1fr) minmax(0, 1.45fr);
    grid-template-areas:
        "modulo galleria"
        "modulo testo";
}
.prodotto--modulo-sinistra .prodotto__galleria { grid-area: galleria; }
.prodotto--modulo-sinistra .prodotto__testo    { grid-area: testo; }
.prodotto--modulo-sinistra .prodotto__modulo   { grid-area: modulo; }

/* 4. Copertina grande: foto a tutta larghezza, poi testo e modulo affiancati. */
.prodotto--copertina .prodotto__inner {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr);
    grid-template-areas:
        "galleria galleria"
        "testo    modulo";
}
.prodotto--copertina .prodotto__galleria { grid-area: galleria; }
.prodotto--copertina .prodotto__testo    { grid-area: testo; }
.prodotto--copertina .prodotto__modulo   { grid-area: modulo; }
.prodotto--copertina .prodotto__principale { aspect-ratio: 21 / 9; }

/* 5. Colonna unica: tutto incolonnato in una misura stretta e leggibile. */
.prodotto--verticale .prodotto__inner {
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
    gap: 36px;
}

@media (max-width: 900px) {
    .prodotto--classico .prodotto__inner,
    .prodotto--modulo-destra .prodotto__inner,
    .prodotto--modulo-sinistra .prodotto__inner,
    .prodotto--copertina .prodotto__inner,
    .prodotto--verticale .prodotto__inner {
        grid-template-columns: 1fr;
        grid-template-areas: "galleria" "testo" "modulo";
        gap: 32px;
    }

    /* Appiccicare il modulo su uno schermo alto quanto il modulo stesso
       coprirebbe la pagina invece di aiutare. */
    .prodotto--modulo-destra .prodotto__modulo,
    .prodotto--modulo-sinistra .prodotto__modulo {
        position: static;
    }

    .prodotto--copertina .prodotto__principale { aspect-ratio: 4 / 3; }
}

/* Pulsanti dopo l'invio di una richiesta: uno pieno per l'azione principale
   (mandarne un'altra), uno vuoto per quella secondaria. */
.grazie__azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.btn--vuoto {
    background: transparent;
    color: var(--bone);
    border: 1px solid var(--line);
}
.btn--vuoto:hover { border-color: var(--gold); color: var(--gold); }

/* Codici identificativi obbligatori in fondo al sito. Piccoli ma leggibili:
   devono esserci per legge, non devono rubare la scena. */
.site-footer__codici {
    font-size: 0.78rem;
    color: var(--ash);
    letter-spacing: 0.02em;
    margin-top: 6px;
}

/* Codici identificativi della singola camera, quando ne ha di propri.
   Piccoli: devono esserci per legge, non devono rubare la scena. */
.prodotto__codici {
    font-size: 0.78rem;
    color: var(--ash);
    letter-spacing: 0.02em;
    padding-bottom: 24px;
}