/* ==========================================================
   Dai Toscani · Sito moderno (stile Lady Pizza · viola Fiorentina)
   Palette: viola scuro (sfondo principale) + oro + crema/bianco.
   Tipografia: Cormorant Garamond per i titoli, Inter per il body.
   ========================================================== */


/* ==========================================================
   PULIZIA CSS 2026-05-26 (Fase 1 + Fase 2)
   Rimosse ~2680 righe (–41%) di codice morto: layout alternativi
   mai cablati nell'HTML.
   Fase 1: .btn-* generico, .hero-text/.hero-visual, prodotti,
     gallery, vecchio borgo (header+aside+mosaico+accordion+min),
     eventi-cards, locandina sagra, giglio originale.
   Fase 2: hero-con-video, valori vecchio, evento vecchio, orari
     lista alternativa, bacheca+ritagli+puntine (tutto il design
     "giornale appeso"), icone svg morte, borgo-lista-clean.
   Backup: style.css.before-cleanup-fase2-2026-05-26.bak
   ========================================================== */

/* ----------------------------------------------------------
   1. VARIABILI E RESET
   ---------------------------------------------------------- */
:root {
    /* Palette ACF Fiorentina: viola + bianco + accento oro */
    --viola:         #5A2D82;     /* viola Fiorentina principale */
    --viola-chiaro:  #7E4FAA;     /* viola lavato per glow */
    --viola-scuro:   #3F1E5C;
    --viola-deep:    #2A1340;     /* sfondo principale */
    --viola-darker:  #1a0e2e;     /* sfondo alternato */
    --bianco:        #ffffff;
    --crema:         #f4ecd8;     /* testo body, leggermente caldo */
    --crema-soft:    #faf6e8;
    --grigio-soft:   rgba(244, 236, 216, .65);
    --oro:           #d4a83c;     /* accento oro caldo */
    --oro-chiaro:    #e8c270;
    --oro-soft:      rgba(212, 168, 60, .25);
    --viola-acceso:  #a86bf0;     /* viola brillante per gli accenti delle sagre */

    /* Backwards compatibility con vecchi nomi del restyle gastronomico */
    --nero-caldo:    var(--viola-deep);
    --nero-soft:     var(--viola-scuro);
    --bordeaux:      var(--viola);
    --bordeaux-deep: var(--viola-darker);
    --arancio:       var(--oro);
    --arancio-glow:  var(--oro-chiaro);

    --font-titolo:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-testo:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --max-w: 1200px;
    --r-sm: 6px;
    --r-md: 12px;
    --transi: .35s ease;
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 80px;
}

body {
    font-family: var(--font-testo);
    font-size: 16px;
    line-height: 1.7;
    color: var(--crema);
    background: var(--viola-deep);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img, svg, iframe { display: block; max-width: 100%; }

a { color: var(--oro); text-decoration: none; transition: color var(--transi); }
a:hover { color: var(--oro-chiaro); }

ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

.container {
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 1.5rem;
}


/* ----------------------------------------------------------
   2. TIPOGRAFIA — serif elegante in oro
   ---------------------------------------------------------- */
h1, h2, h3, h4 {
    font-family: var(--font-titolo);
    color: var(--oro);
    line-height: 1.15;
    font-weight: 600;
}
h1 { font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 600; letter-spacing: -.005em; }
h2 { font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 500; letter-spacing: 0; }
h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 500; }
h4 { font-size: 1.15rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--bianco); }

h2 em, h3 em { font-style: italic; }


/* ----------------------------------------------------------
   3. SEZIONI BASE — sfondo viola scuro per tutto
   ---------------------------------------------------------- */
.sezione {
    background: var(--viola-deep);
    padding: 6rem 0;
    position: relative;
}
.sez-header {
    text-align: center;
    margin-bottom: 4rem;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.sez-header h2 {
    margin-top: .5rem;
}
.occhiello {
    display: inline-block;
    font-family: var(--font-testo);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .35em;
    text-transform: uppercase;
    color: var(--crema);
    margin-bottom: 1rem;
}


/* ----------------------------------------------------------
   5. NAVBAR
   ---------------------------------------------------------- */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: transparent;
    padding: 1rem 0;
    transition: background var(--transi), padding var(--transi);
}
.nav.scrolled {
    background: rgba(26, 14, 46, .95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: .6rem 0;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .4);
}
.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.nav-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--crema);
}
.nav-brand:hover { color: var(--crema); }
.nav-brand-giglio {
    width: 40px; height: 40px;
    flex-shrink: 0;
}
.nav-brand-giglio svg { width: 100%; height: 100%; }
.nav-brand-testo {
    font-family: var(--font-titolo);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--crema);
}
.nav-brand-testo em {
    font-style: italic;
    color: var(--oro);
}
.nav-brand-testo small {
    display: block;
    font-family: var(--font-testo);
    font-size: .65rem;
    font-weight: 500;
    font-style: normal;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--grigio-soft);
    margin-top: 4px;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}
.nav-link {
    color: var(--crema);
    font-family: var(--font-testo);
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .15em;
    text-transform: uppercase;
    padding: .4rem 0;
    position: relative;
}
.nav-link:hover { color: var(--oro); }
.nav-link::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 0;
    height: 1px;
    background: var(--oro);
    transition: width var(--transi);
}
.nav-link:hover::after,
.nav-link.attivo::after { width: 100%; }
.nav-link.attivo { color: var(--oro); }

.nav-toggle {
    display: none;
    background: transparent;
    border: 0;
    width: 40px; height: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.nav-toggle span {
    display: block;
    width: 24px; height: 2px;
    background: var(--crema);
    border-radius: 2px;
    transition: transform var(--transi), opacity var(--transi);
}
.nav-toggle.aperto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.aperto span:nth-child(2) { opacity: 0; }
.nav-toggle.aperto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ----------------------------------------------------------
   6. HERO — gastronomic premium pizzeria
   ---------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    color: var(--crema);
    overflow: hidden;
    isolation: isolate;
    padding: 6rem 0 3rem;
}

/* Sfondo base: viola Fiorentina sfumato MORBIDO con halo crema/oro
   diffusi, gradient più dolci, transizioni vellutate. */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        /* Texture impercettibile (granulosa morbida) */
        radial-gradient(circle at 30% 40%, rgba(244, 236, 216, .02) 1px, transparent 2px),
        radial-gradient(circle at 70% 60%, rgba(212, 168, 60, .025) 1px, transparent 2px),
        /* Halo oro morbido in basso a destra (più ampio, più dolce) */
        radial-gradient(ellipse 90% 70% at 80% 95%,
            rgba(232, 194, 112, .28) 0%,
            rgba(212, 168, 60, .15) 25%,
            rgba(212, 168, 60, .05) 50%,
            transparent 75%),
        /* Halo viola chiaro in alto a sinistra (molto morbido) */
        radial-gradient(ellipse 100% 80% at 15% 0%,
            rgba(126, 79, 170, .45) 0%,
            rgba(126, 79, 170, .22) 30%,
            rgba(126, 79, 170, .08) 55%,
            transparent 80%),
        /* Bagliore centrale crema diffuso che ammorbidisce tutto */
        radial-gradient(ellipse 70% 50% at 50% 40%,
            rgba(244, 236, 216, .07) 0%,
            transparent 70%),
        /* Base viola sfumata MORBIDA — non più scurissima.
           Tre stop per una transizione più dolce in verticale. */
        linear-gradient(165deg,
            #4a2670 0%,
            #3a1d58 35%,
            #2e1745 70%,
            #221033 100%);
    background-size: 6px 6px, 9px 9px, cover, cover, cover, cover;
}

/* ----------------------------------------------------------
   11. TESTIMONIANZE — slider grande quote
   ---------------------------------------------------------- */
.testimonianze {
    background: var(--viola-deep);
    padding: 3.5rem 0;
}
.slider {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
}
.slider-track {
    position: relative;
    min-height: 210px;
}
.slider-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease;
}
.slider-slide.attivo {
    opacity: 1;
    pointer-events: auto;
    position: relative;
}
.slider-slide blockquote {
    font-family: var(--font-titolo);
    font-style: italic;
    font-size: clamp(1.4rem, 2.8vw, 2rem);
    color: var(--bianco);
    line-height: 1.4;
    margin-bottom: 2rem;
    font-weight: 500;
    padding: 0 1rem;
}
.slider-slide figcaption {
    font-family: var(--font-testo);
    font-size: .82rem;
    letter-spacing: .25em;
    text-transform: uppercase;
}
.slider-slide figcaption strong {
    color: var(--oro);
    font-weight: 600;
}
.slider-slide figcaption span {
    color: var(--crema);
    margin-left: .8rem;
}

.slider-dots {
    display: flex;
    justify-content: center;
    gap: .8rem;
    margin-top: 2rem;
}
.slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0;
    background: rgba(212, 168, 60, .35);
    cursor: pointer;
    transition: background var(--transi), transform var(--transi);
}
.slider-dot.attivo {
    background: var(--oro);
    transform: scale(1.15);
}


/* ----------------------------------------------------------
   13. CONTATTI + FOOTER
   ---------------------------------------------------------- */
.contatti {
    background: var(--viola-deep);
    padding: 3.5rem 0 0;
    position: relative;
}
/* Header più compatto nella sezione contatti */
.contatti .sez-header {
    margin-bottom: 1.5rem;
}
.contatti .sez-header h2 {
    margin-bottom: .4rem;
}
.contatti .sez-header p {
    margin-top: .3rem;
    font-size: .95rem;
}
.contatti-griglia {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
}

.contatti-form {
    background: rgba(244, 236, 216, .04);
    border: 1px solid rgba(212, 168, 60, .2);
    padding: 2.2rem;
}
.form-riga { margin-bottom: 1.2rem; }
.form-riga-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-riga label {
    display: block;
    font-size: .85rem;
}
.form-riga label span {
    display: block;
    font-family: var(--font-testo);
    font-weight: 600;
    color: var(--crema);
    letter-spacing: .15em;
    text-transform: uppercase;
    font-size: .72rem;
    margin-bottom: .5rem;
}
.form-riga input,
.form-riga select,
.form-riga textarea {
    width: 100%;
    padding: .8rem 1rem;
    font-family: var(--font-testo);
    font-size: .92rem;
    color: var(--crema);
    background: rgba(0, 0, 0, .25);
    border: 1px solid rgba(212, 168, 60, .25);
    border-radius: 0;
    transition: border-color var(--transi), background var(--transi);
}
.form-riga input::placeholder,
.form-riga textarea::placeholder { color: rgba(244, 236, 216, .35); }
.form-riga input:focus,
.form-riga select:focus,
.form-riga textarea:focus {
    outline: none;
    border-color: var(--oro);
    background: rgba(0, 0, 0, .4);
}
.form-riga textarea { resize: vertical; }

.contatti-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.info-card {
    background: rgba(244, 236, 216, .04);
    border: 1px solid rgba(212, 168, 60, .18);
    padding: 1.4rem 1.6rem;
}
.info-card h3 {
    color: var(--oro);
    font-style: italic;
    font-size: 1.4rem;
    margin-bottom: .6rem;
}
.info-card p {
    color: var(--crema);
    font-size: .92rem;
    line-height: 1.6;
}
.info-card a:not(.btn) {
    color: var(--oro);
    font-weight: 600;
}
.info-orari {
    list-style: none;
}
.info-orari li {
    display: flex;
    justify-content: space-between;
    padding: .35rem 0;
    border-bottom: 1px dashed rgba(212, 168, 60, .15);
    font-size: .85rem;
}
.info-orari li:last-child { border-bottom: 0; }
.info-orari span { color: var(--crema); }
.info-orari strong { color: var(--oro); font-size: .8rem; font-weight: 600; }

.info-mappa {
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border: 1px solid rgba(212, 168, 60, .2);
}
.info-mappa iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(.3) brightness(.92);
}


/* --- Footer integrato direttamente dopo i contatti --- */
.footer {
    background: var(--viola-darker);
    color: var(--crema);
    padding: 3.5rem 0 2rem;
    border-top: 1px solid rgba(212, 168, 60, .18);
}
.footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.2rem;
}
.footer-giglio {
    width: 50px;
    height: 50px;
}
.footer-claim {
    font-family: var(--font-titolo);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--crema);
    line-height: 1.5;
}
.footer-claim strong {
    color: var(--oro);
    font-style: normal;
    font-weight: 600;
}
.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.8rem;
    margin-top: .5rem;
}
.footer-nav a {
    color: var(--crema);
    font-family: var(--font-testo);
    font-size: .78rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 500;
}
.footer-nav a:hover { color: var(--oro); }
.footer-copy {
    font-size: .75rem;
    color: rgba(244, 236, 216, .45);
    letter-spacing: .03em;
    margin-top: 1rem;
    border-top: 1px solid rgba(212, 168, 60, .12);
    padding-top: 1.5rem;
    width: 100%;
    max-width: 720px;
}
.footer-copy a { color: rgba(244, 236, 216, .7); }
.footer-copy a:hover { color: var(--oro); }


/* ----------------------------------------------------------
   14. ANIMAZIONI SCROLL
   ---------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .8s ease, transform .8s ease;
}
.reveal.visibile {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .reveal, .hero-giglio-svg, .valori-logo-svg, .hero-scroll span {
        opacity: 1; transform: none; transition: none; animation: none !important;
    }
    html { scroll-behavior: auto; }
}


/* ----------------------------------------------------------
   15. RESPONSIVE
   ---------------------------------------------------------- */
@media (max-width: 1024px) {
    .prodotti-griglia { grid-template-columns: 1fr; gap: 4rem; max-width: 480px; margin: 0 auto; }
    .gallery-griglia { grid-template-columns: repeat(2, 1fr); }
    .valori-inner { grid-template-columns: 1fr; gap: 2rem; }
    .valori-logo { order: -1; }
    .contatti-griglia { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 760px) {
    .nav-toggle { display: flex; }
    .nav-menu {
        position: absolute;
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: rgba(26, 14, 46, .98);
        backdrop-filter: blur(14px);
        flex-direction: column;
        padding: 1.5rem;
        gap: 1rem;
        transform: translateY(-110%);
        transition: transform var(--transi);
        box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    }
    .nav-menu.aperto { transform: translateY(0); }
    .nav-link::after { display: none; }
    .nav-brand-testo { font-size: 1.1rem; }

    .sezione, .testimonianze, .contatti, .valori { padding: 4.5rem 0; }
    .sez-header { margin-bottom: 2.5rem; }

    .gallery-griglia { grid-template-columns: 1fr; }

    .evento { grid-template-columns: 90px 1fr; gap: 1rem; padding: 1.3rem; }
    .evento-data { padding-right: 1rem; }
    .evento-data-giorno { font-size: 1.4rem; }

    .form-riga-2 { grid-template-columns: 1fr; }

    .hero-azioni { flex-direction: column; align-items: stretch; }
    .hero-azioni .btn { width: 100%; }

    .footer-nav { gap: 1rem; }
}

@media (max-width: 460px) {
    .container { padding: 0 1rem; }
    .hero-titolo { font-size: clamp(2.5rem, 14vw, 4rem); }
    .hero-claim { font-size: 1.05rem; }
    .hero-giglio { width: 160px; }
}


/* =============================================================
   MENÙ SFOGLIABILE — stile giornale antico
   ============================================================= */
.sez-menu { background: var(--viola-deep); }

.menu-giornale {
    position: relative;
    max-width: 920px;
    margin: 0 auto;
    aspect-ratio: 4 / 3;
    perspective: 1800px;
    /* IMPORTANTE: clip dei fogli che ruotano fuori dal box.
       Senza questo, durante l'animazione 3D le pagine
       possono mostrarsi oltre il bordo del container. */
    overflow: hidden;
}

/* Stage 3D che contiene tutte le pagine */
.menu-stage {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

/* Ogni pagina è un foglio di carta giornale */
.menu-pagina {
    position: absolute;
    inset: 0;
    transform-origin: left center;
    transform: rotateY(-95deg);
    opacity: 0;
    transition: transform .9s cubic-bezier(.4, .0, .2, 1), opacity .4s ease;
    backface-visibility: hidden;
}
.menu-pagina.attiva {
    transform: rotateY(0deg);
    opacity: 1;
    z-index: 2;
}
.menu-pagina.passata {
    transform: rotateY(95deg);
    opacity: 0;
    z-index: 1;
}

/* ----------------------------------------------------------
   "Foglio" del menù — adesso è una CARTA VIOLA del ristorante,
   non più carta panna stile giornale. Sfondo viola con
   sfumature morbide, testo crema, accenti oro.
   ---------------------------------------------------------- */
.menu-foglio {
    width: 100%;
    height: 100%;
    background:
        /* Riflesso caldo dorato in alto a sinistra */
        radial-gradient(ellipse at 0% 0%, rgba(212, 168, 60, .14), transparent 55%),
        /* Tocco di profondità in basso a destra */
        radial-gradient(ellipse at 100% 100%, rgba(0, 0, 0, .25), transparent 55%),
        /* Carta viola: due tonalità per dare consistenza, non un piatto solido */
        linear-gradient(160deg, var(--viola, #5A2D82) 0%, var(--viola-deep, #2A1340) 100%);
    color: var(--crema, #f4ecd8);
    padding: clamp(1.5rem, 3.5vw, 3rem);
    /* Bordo dorato sottile + ombra profonda per dare "spessore" al cartoncino */
    box-shadow:
        0 0 0 1px rgba(212, 168, 60, .35),
        0 30px 60px -15px rgba(0, 0, 0, .55),
        inset 0 0 80px rgba(0, 0, 0, .25);
    border-radius: 6px;
    font-family: var(--font-titolo);
    overflow-y: auto;
}
/* Cornice interna dorata, leggera (richiama il bordo di un menù di sala) */
.menu-foglio::before {
    content: '';
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(212, 168, 60, .25);
    pointer-events: none;
    border-radius: 3px;
}

/* "Occhiello" di pagina: PIZZERIA · RISTORANTE / Categoria · 01 */
.menu-eyebrow {
    display: block;
    font-family: var(--font-testo);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .35em;
    text-transform: uppercase;
    color: rgba(212, 168, 60, .85);   /* oro tenue */
    margin-bottom: 1.2rem;
    text-align: center;
}

/* ============================================================
   COPERTINA — stesso allineamento (top + center orizzontale) usato
   dalle pagine interne, così sfogliando il contenuto non "salta".
   ============================================================ */
.menu-copertina {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content rimosso: contenuto parte dall'alto come nelle
       pagine interne, posizione visiva costante quando si sfoglia */
    gap: .3rem;
    padding-top: .5rem;
}

/* Monogramma circolare DT: cerchio con bordo oro, lettere in italic */
.menu-cop-logo {
    width: clamp(72px, 10vw, 96px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 1.5px solid rgba(244, 236, 216, .85);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: .4rem 0 1.2rem;
    /* Piccolo glow oro per farlo "respirare" */
    box-shadow: 0 0 0 4px rgba(212, 168, 60, .08), inset 0 0 18px rgba(0, 0, 0, .25);
}
.menu-cop-logo span {
    font-family: var(--font-titolo);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    letter-spacing: .04em;
    color: var(--crema, #f4ecd8);
    line-height: 1;
}

/* Titolo principale: "Dai" tondo + "Toscani" in italic oro */
.menu-cop-titolo {
    font-family: var(--font-titolo);
    font-weight: 700;
    font-size: clamp(2.4rem, 6vw, 4rem);
    line-height: 1;
    color: var(--crema, #f4ecd8);
    margin: 0 0 1.1rem;
    /* Stato pulito: senza bordi a doppia riga del vecchio "giornale" */
    border: 0;
    padding: 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .35em;
    flex-wrap: wrap;
}
.menu-cop-titolo-r1 {
    font-style: normal;
}
.menu-cop-titolo-r2 {
    font-style: italic;
    color: var(--oro, #c9a14a);
}

/* Sottotitolo "La carta del ristorante" con due linee oro ai lati */
.menu-cop-claim {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    font-style: italic;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    color: var(--crema, #f4ecd8);
    line-height: 1.4;
    margin-bottom: 1rem;
}
.menu-cop-claim em {
    font-style: italic;
    color: var(--crema, #f4ecd8);
    font-weight: 500;
}
.menu-cop-claim-line {
    width: clamp(28px, 6vw, 60px);
    height: 1px;
    background: rgba(212, 168, 60, .65);
    display: inline-block;
}

/* Localizzazione: SESTINO (AR) · TOSCANA in small caps tracked */
.menu-cop-luogo {
    font-family: var(--font-testo);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(244, 236, 216, .65);
    margin-bottom: 1.8rem;
}

/* Bottone "Sfoglia il menù" — pillola oro/viola coerente coi CTA del sito */
.menu-cop-btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: var(--oro, #c9a14a);
    color: var(--viola-deep, #2A1340);
    font-family: var(--font-testo);
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .04em;
    padding: .8rem 1.6rem;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: transform var(--transi), box-shadow var(--transi), background var(--transi);
    box-shadow: 0 8px 24px -8px rgba(212, 168, 60, .55);
}
.menu-cop-btn:hover {
    transform: translateY(-2px);
    background: var(--crema, #f4ecd8);
    box-shadow: 0 12px 28px -10px rgba(244, 236, 216, .55);
}
.menu-cop-btn-fr {
    font-family: var(--font-titolo);
    font-size: 1.2rem;
    line-height: 1;
    transform: translateY(-1px);
}

/* ============================================================
   PAGINE INTERNE — categoria + lista piatti su sfondo viola
   ============================================================ */
.menu-foglio-header {
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(212, 168, 60, .35);
}
.menu-foglio-header h3 {
    font-family: var(--font-titolo);
    font-style: italic;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 700;
    color: var(--crema, #f4ecd8);
    margin: .3rem 0;
}
.menu-foglio-sub {
    font-style: italic;
    font-size: .95rem;
    color: rgba(244, 236, 216, .65);
}

.menu-piatti { list-style: none; }
.menu-piatti li {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: .85rem 0;
    border-bottom: 1px dotted rgba(212, 168, 60, .28);
}
.menu-piatti li:last-child { border-bottom: 0; }

.menu-piatto-info { flex: 1; min-width: 0; }
.menu-piatto-info strong {
    display: block;
    font-family: var(--font-titolo);
    font-style: italic;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--crema, #f4ecd8);
    margin-bottom: .15rem;
}
.menu-piatto-info strong em {
    font-size: .8rem;
    font-weight: 500;
    color: var(--oro, #c9a14a);
    margin-left: .3rem;
}
.menu-piatto-info span {
    display: block;
    font-family: var(--font-testo);
    font-size: .82rem;
    color: rgba(244, 236, 216, .7);
    line-height: 1.45;
}
.menu-prezzo {
    font-family: var(--font-titolo);
    font-style: italic;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--oro, #c9a14a);
    flex-shrink: 0;
    white-space: nowrap;
}
/* --- Varianti di un piatto (es. Tagliata di Angus) ----------------------
   Mini-lista interna alla voce: a sinistra il condimento, a destra il prezzo.
   Vive dentro a .menu-piatto-info, perciò devo azzerare bordi e padding che
   le voci .menu-piatti li le imporrebbero (anche con !important nelle regole
   di .sez-menu), altrimenti ogni variante avrebbe la sua riga puntinata. */
.menu-varianti {
    list-style: none;
    margin: .55rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.sez-menu .menu-varianti li {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: .6rem;
    padding: 0 !important;
    border-bottom: 0 !important;
}
/* Nome del condimento: stesso corsivo del menù, leggermente più marcato. */
.sez-menu .menu-varianti li > span:first-child {
    font-size: .98rem !important;
    color: rgba(244, 236, 216, .85) !important;
}
/* Prezzo della variante: oro come tutti gli altri prezzi della carta. */
.sez-menu .menu-varianti .menu-variante-prezzo {
    font-weight: 700 !important;
    font-size: 1rem !important;
    color: var(--oro, #c9a14a) !important;
    white-space: nowrap;
    flex-shrink: 0;
}

/* --- Elenco "punto per punto" (es. formati di pasta, sughi a scelta) ------
   Voci una per riga con un pallino oro davanti. Vive dentro a .menu-piatto-info,
   quindi azzero bordi/padding che le voci .menu-piatti li imporrebbero. */
.menu-elenco {
    list-style: none;
    margin: .55rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.sez-menu .menu-elenco li {
    display: flex !important;
    align-items: baseline;
    gap: .55rem;
    padding: 0 !important;
    border-bottom: 0 !important;
    font-family: var(--font-titolo, 'Cormorant Garamond');
    font-style: italic;
    font-size: 1.02rem;
    color: rgba(244, 236, 216, .88);
}
/* Pallino oro davanti a ogni voce dell'elenco. */
.sez-menu .menu-elenco li::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--oro, #c9a14a);
    flex: 0 0 auto;
    transform: translateY(-2px);
}
/* Dettaglio fra parentesi (es. ingredienti della norcina): più piccolo e tenue. */
.sez-menu .menu-elenco li em {
    font-style: italic;
    font-size: .82rem;
    color: rgba(244, 236, 216, .6);
    margin-left: .35rem;
}
/* Prezzo accanto alla voce dell'elenco (es. ogni formato di pasta): spinto a
   destra con margin-left auto e in oro, come gli altri prezzi della carta. */
.sez-menu .menu-elenco .menu-elenco-prezzo {
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
    font-weight: 700 !important;
    font-size: 1rem !important;
    color: var(--oro, #c9a14a) !important;
}

/* Layout a due colonne (usato nei Primi): i due blocchi — formati e sughi —
   stanno affiancati invece che uno sotto l'altro, così la pagina resta corta. */
.menu-due-colonne {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem 2.4rem;
    align-items: start;
}
/* I due blocchi non hanno la riga divisoria puntinata fra una colonna e l'altra. */
.sez-menu .menu-due-colonne > li {
    padding: 0 !important;
    border-bottom: 0 !important;
}
/* Su schermi stretti torno a una colonna sola. */
@media (max-width: 560px) {
    .menu-due-colonne {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }
}

.menu-foglio-nota {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(212, 168, 60, .28);
    font-family: var(--font-testo);
    font-style: italic;
    font-size: .75rem;
    color: rgba(244, 236, 216, .6);
    text-align: center;
}
.menu-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1.5px solid rgba(212, 168, 60, .55);
    background: rgba(42, 19, 64, .85);
    color: var(--oro);
    font-family: var(--font-titolo);
    font-size: 1.8rem;
    cursor: pointer;
    z-index: 50;
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
    transition: all var(--transi);
}
.menu-prev { left: -24px; }
.menu-next { right: -24px; }
.menu-nav:hover:not(:disabled) {
    background: var(--oro);
    color: var(--viola-deep);
    transform: translateY(-50%) scale(1.1);
}
.menu-nav:disabled { opacity: .35; cursor: not-allowed; }
.menu-indicatori {
    display: flex;
    justify-content: center;
    gap: .6rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}
.menu-indicatore {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid rgba(212, 168, 60, .35);
    background: transparent;
    color: var(--crema);
    font-family: var(--font-testo);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transi);
}
.menu-indicatore:hover { border-color: var(--oro); color: var(--oro); }
.menu-indicatore.attivo {
    background: var(--oro);
    color: var(--viola-deep);
    border-color: var(--oro);
    transform: scale(1.1);
}
@media (max-width: 720px) {
    /* Su mobile: container largo tutta la viewport, no max-width laterale,
       aspect ratio leggermente più verticale per stare nello schermo.
       NB: lo sfoglio 3D resta attivo anche qui — i browser mobile moderni
       lo gestiscono bene e l'effetto è una parte importante della UX. */
    .sez-menu .container { padding: 0 .8rem; }
    .menu-giornale {
        aspect-ratio: 5 / 7;
        max-width: 100%;
        /* perspective viene impostato a 2200px dalla regola .jones-menu
           .menu-giornale, non la sovrascrivo qui */
    }
    /* Frecce dentro al box, più piccole */
    .menu-prev { left: 6px; }
    .menu-next { right: 6px; }
    .menu-nav {
        width: 38px; height: 38px;
        font-size: 1.4rem;
        background: rgba(42, 19, 64, .92);
    }
    .menu-cop-titolo { font-size: clamp(1.8rem, 8vw, 2.4rem); padding: .8rem 1rem; }
    .menu-foglio { padding: 1.2rem 1rem; }
    .menu-foglio::before { inset: 8px; }

    /* Lista piatti più compatta */
    .menu-foglio-header h3 { font-size: clamp(1.4rem, 5vw, 1.8rem); }
    .menu-piatti li { padding: .6rem 0; gap: .6rem; }
    .menu-piatto-info strong { font-size: 1rem; }
    .menu-piatto-info span { font-size: .75rem; }
    .menu-prezzo { font-size: .95rem; }
}

@media (max-width: 480px) {
    .menu-giornale { aspect-ratio: 4 / 6; }
    .menu-piatto-info span { display: none; } /* nascondo descrizioni su schermi piccoli */
}


/* ----------------------------------------------------------
   CALENDARIO ORARI — 7 card giorni della settimana
   ---------------------------------------------------------- */
.orari-calendario {
    background: var(--viola-deep);
    padding: 4rem 0 4.5rem;
    position: relative;
}
/* Header con più respiro */
.orari-calendario .sez-header {
    margin-bottom: 2.2rem;
}
/* Righe della tabella un filo più ampie */
.orari-calendario .orari-riga {
    padding: 1rem 1.5rem;
}
.orari-calendario .orari-giorno {
    font-size: 1.25rem;
}
.orari-calendario .orari-val {
    font-size: .9rem;
}
.orari-calendario .cal-nota {
    margin-top: 1.2rem;
    font-size: 1rem;
    color: #ffffff;
    font-weight: 500;
}
.orari-calendario .cal-nota a {
    color: #ffffff;
    font-weight: 600;
}
/* Sfumature morbide ai bordi per legare con l'hero sopra */
.orari-calendario::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 80px;
    background: linear-gradient(180deg,
        rgba(34, 16, 51, .8) 0%,
        transparent 100%);
    pointer-events: none;
}

.calendario {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .75rem;
    margin-bottom: 2rem;
}

.cal-giorno {
    background: rgba(244, 236, 216, .04);
    border: 1px solid rgba(212, 168, 60, .2);
    padding: 1.4rem 1rem;
    text-align: center;
    transition: all var(--transi);
    position: relative;
    cursor: default;
}
.cal-giorno:hover {
    background: rgba(244, 236, 216, .08);
    border-color: rgba(212, 168, 60, .5);
    transform: translateY(-4px);
}

/* Numero giorno (in alto piccolo) */
.cal-num {
    display: block;
    font-family: var(--font-testo);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .2em;
    color: rgba(244, 236, 216, .45);
    margin-bottom: .5rem;
}

/* Nome giorno grande in italic oro */
.cal-giorno h3 {
    font-family: var(--font-titolo);
    font-style: italic;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--oro);
    margin-bottom: .8rem;
    text-transform: capitalize;
}

/* Orario testo piccolo */
.cal-orario {
    font-family: var(--font-testo);
    font-size: .82rem;
    line-height: 1.5;
    color: var(--crema);
    margin-bottom: .8rem;
}

/* Tag "Aperto"/"Riposo" */
.cal-tag {
    display: inline-block;
    font-family: var(--font-testo);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .25em;
    text-transform: uppercase;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: rgba(143, 191, 63, .15);
    color: #9ed552;
    border: 1px solid rgba(143, 191, 63, .35);
}
.cal-giorno.chiuso .cal-tag {
    background: rgba(212, 168, 60, .12);
    color: var(--oro);
    border-color: rgba(212, 168, 60, .35);
}

/* Stile "chiuso" — tutto leggermente smorzato */
.cal-giorno.chiuso {
    background: rgba(0, 0, 0, .25);
    opacity: .7;
}
.cal-giorno.chiuso h3 { color: rgba(244, 236, 216, .5); }
.cal-giorno.chiuso .cal-orario {
    color: rgba(244, 236, 216, .55);
    font-style: italic;
}

/* Giorno corrente — evidenziato in oro pieno */
.cal-giorno.oggi {
    background: linear-gradient(160deg,
        rgba(212, 168, 60, .92) 0%,
        rgba(232, 194, 112, .85) 100%);
    border-color: var(--oro-chiaro);
    color: var(--viola-deep);
    transform: translateY(-6px);
    box-shadow: 0 16px 32px -8px rgba(212, 168, 60, .45);
}
.cal-giorno.oggi .cal-num,
.cal-giorno.oggi h3,
.cal-giorno.oggi .cal-orario {
    color: var(--viola-deep);
}
.cal-giorno.oggi .cal-tag {
    background: var(--viola-deep);
    color: var(--oro);
    border-color: var(--viola-deep);
}
/* Anche se è chiuso oggi (lunedì), evidenzia con una sfumatura
   diversa (rosso-viola) per indicare che è il giorno corrente
   ma il locale è chiuso. */
.cal-giorno.oggi.chiuso {
    background: linear-gradient(160deg,
        rgba(120, 50, 90, .9) 0%,
        rgba(90, 45, 130, .85) 100%);
    color: var(--crema);
    opacity: 1;
}
.cal-giorno.oggi.chiuso h3,
.cal-giorno.oggi.chiuso .cal-orario,
.cal-giorno.oggi.chiuso .cal-num {
    color: var(--crema);
}
.cal-giorno.oggi.chiuso .cal-tag {
    background: rgba(244, 236, 216, .15);
    color: var(--crema);
    border-color: rgba(244, 236, 216, .3);
}

.cal-nota {
    text-align: center;
    font-family: var(--font-titolo);
    font-style: italic;
    font-size: 1.05rem;
    color: rgba(244, 236, 216, .8);
    margin-top: 1.5rem;
}
.cal-nota a {
    color: var(--oro);
    font-weight: 600;
}

/* Responsive */
@media (max-width: 880px) {
    .calendario { grid-template-columns: repeat(4, 1fr); }
    .cal-giorno { padding: 1rem .6rem; }
    .cal-giorno h3 { font-size: 1.3rem; }
    .cal-orario { font-size: .75rem; }
    .cal-tag { font-size: .58rem; padding: .25rem .55rem; }
}
@media (max-width: 480px) {
    .calendario { grid-template-columns: repeat(2, 1fr); gap: .55rem; }
}


/* ----------------------------------------------------------
   SEZIONE TESSERE GALLERIA — tile viola con emoji
   Su sfondo crema chiaro per spezzare il viola del resto.
   ---------------------------------------------------------- */
.sezione-chiara {
    background: #f5f0e6;          /* crema chiaro */
    padding: 6rem 0;
    color: #2a1a0e;
}
.sez-header-chiara h2 {
    color: var(--viola-deep);
}
.sez-header-chiara h2 em {
    color: var(--viola);
}
.sez-header-chiara p {
    color: rgba(42, 26, 14, .65);
}
.sez-header-chiara .occhiello {
    color: var(--viola);
}

.tessere-griglia {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
    max-width: 1080px;
    margin: 0 auto;
}

.tessera {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    background: linear-gradient(135deg,
        var(--viola-chiaro) 0%,
        var(--viola) 50%,
        var(--viola-scuro) 100%);
    color: var(--bianco);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    box-shadow:
        0 12px 28px -10px rgba(63, 30, 92, .35),
        inset 0 1px 0 rgba(255, 255, 255, .08);
    transition: transform var(--transi), box-shadow var(--transi), filter var(--transi);
    overflow: hidden;
}

/* Highlight diagonale interno per dare profondità */
.tessera::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 20%,
        rgba(255, 255, 255, .15) 0%,
        transparent 55%);
    pointer-events: none;
}

.tessera:hover {
    transform: translateY(-6px);
    box-shadow:
        0 22px 40px -12px rgba(63, 30, 92, .55),
        inset 0 1px 0 rgba(255, 255, 255, .12);
    filter: brightness(1.08);
    color: var(--bianco);
}

.tessera-icona {
    font-size: 3.2rem;
    line-height: 1;
    margin-bottom: 1.2rem;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .4));
    transition: transform var(--transi);
    position: relative;
    z-index: 1;
}
.tessera:hover .tessera-icona {
    transform: scale(1.15) rotate(-4deg);
}

.tessera-label {
    font-family: var(--font-testo);
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--bianco);
    text-align: center;
    position: relative;
    z-index: 1;
}

/* Responsive */
@media (max-width: 1024px) {
    .tessere-griglia { grid-template-columns: repeat(2, 1fr); max-width: 720px; }
}
@media (max-width: 760px) {
    .tessere-griglia { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .tessera { padding: 1.2rem; }
    .tessera-icona { font-size: 2.6rem; margin-bottom: .8rem; }
    .tessera-label { font-size: .82rem; }
}
@media (max-width: 420px) {
    .tessere-griglia { grid-template-columns: 1fr; }
    .tessera { aspect-ratio: 3 / 1.5; flex-direction: row; padding: 1rem 1.4rem; }
    .tessera-icona { margin-bottom: 0; margin-right: 1rem; font-size: 2.4rem; }
}


/* =============================================================
   EVENTI · LAYOUT BENTO ASIMMETRICO
   Magazine moderno: 1 hero + card di dimensioni diverse.
   ============================================================= */
.sez-eventi.sez-bento {
    background: linear-gradient(180deg, #1e0e36 0%, #2a1340 100%);
}

/* --- Sezione eventi come jones-split (striscia verticale "SAGRE" a sinistra) ---
   La striscia scura tiene il viola pieno per il contrasto della scritta; la
   colonna destra è trasparente così lascia vedere il gradiente del contenitore
   dietro la griglia bento. L'altezza si adatta al contenuto come per Staff/Borgo. */
.jones-split.sez-eventi { min-height: auto; }
/* Per gli eventi stringo la striscia verticale a sinistra e do molto più spazio
   alla colonna destra: così le card della griglia si allargano in orizzontale
   (il default .jones-split è minmax(150px,.65fr) 3.5fr). */
.jones-split.sez-eventi {
    grid-template-columns: minmax(90px, .35fr) 5.4fr;
    /* Linea sottile in oro tenue che separa le sagre dalla sezione del borgo
       qui sopra (lo stacco netto di colore era troppo "piatto"). */
    border-top: 1px solid rgba(212, 168, 60, .28);
}
.jones-split.sez-eventi .jones-split-dark {
    background: var(--viola-deep, #2A1340) !important;
}
.jones-split.sez-eventi .jones-split-light {
    background: transparent !important;
    /* Padding laterale minimo per dare il massimo della larghezza alle card. */
    padding: 3.5rem .8rem !important;
}
/* Su questa colonna la griglia non ha più bisogno del margine superiore del
   vecchio layout centrato: la allineo in alto e la lascio centrata in larghezza. */
.jones-split.sez-eventi .bento-griglia {
    margin-top: 0;
}

.bento-griglia {
    /* Tutte le card in fila su una sola riga, centrate. Uso flex con wrap così
       su schermi stretti vanno a capo invece di sfondare la pagina. */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* Allineo le celle in basso: così tutti i cerchi restano su una stessa linea
       anche se le etichette sopra (titolo/data/luogo) hanno altezze diverse
       — es. la card della locandina che non ha il titolo. */
    align-items: flex-end;
    gap: 1.1rem;
    max-width: 1400px;
    margin: 1rem auto 0;
}
/* Ogni evento è una "cella" impilata in colonna: data sopra (fuori dal cerchio)
   e card tonda sotto. Le celle sono gli elementi che vanno in fila nella
   griglia flex. */
.bento-cella {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Spazio ridotto fra data, luogo e cerchio: stanno vicini come un'unica
       etichetta sopra al tondo. */
    gap: .3rem;
}

/* Titolo dell'evento sopra al cerchio (fuori dal tondo): bianco e in grassetto,
   come intestazione della card. */
.bento-titolo-sopra {
    margin: 0;
    max-width: 210px;            /* non più largo del cerchio sotto */
    font-family: var(--font-titolo);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.12;
    color: #fff;
    text-align: center;
}
.bento-titolo-sopra em {
    /* La parte enfatizzata resta in bianco (niente accento oro/viola qui). */
    font-style: italic;
    color: #fff;
}

/* Data sopra al cerchio: stessa identità grafica delle vecchie date (titolo
   corsivo oro), ma ora come etichetta esterna centrata. */
.bento-data-sopra {
    font-family: var(--font-titolo);
    font-style: italic;
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1;
    letter-spacing: .01em;
    color: var(--oro-chiaro);
    text-align: center;
}

/* Luogo sotto la data, sempre fuori dal cerchio. Il pallino rosso prima del
   testo riprende il vecchio segnaposto 📍 ma in versione grafica pulita. */
.bento-luogo-sopra {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-testo);
    font-size: .88rem;
    letter-spacing: .04em;
    font-weight: 500;
    color: var(--crema);
    text-align: center;
    margin-bottom: .15rem;   /* un filo d'aria prima del cerchio */
}
.bento-luogo-sopra::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e23b3b;                 /* pallino rosso del segnaposto */
    box-shadow: 0 0 0 3px rgba(226, 59, 59, .22);  /* alone morbido attorno */
    flex: 0 0 auto;
}

/* Tutte le card uguali e perfettamente tonde: stesso diametro per ognuna,
   a prescindere dalle vecchie classi size-* ancora presenti nell'HTML.
   aspect-ratio 1 + border-radius 50% = cerchio. flex:0 0 auto evita che il
   flex le deformi. */
.bento-card,
.bento-card.size-hero,
.bento-card.size-wide,
.bento-card.size-tall,
.bento-card.size-square {
    flex: 0 0 auto;
    width: 210px;
    aspect-ratio: 1 / 1;
    height: auto;
    border-radius: 50%;
}

/* Base card */
.bento-card {
    position: relative;
    border-radius: var(--r-md);
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--transi), box-shadow var(--transi);
    box-shadow:
        0 12px 24px -10px rgba(0, 0, 0, .55),
        0 2px 6px rgba(0, 0, 0, .25);
    cursor: pointer;
    color: var(--crema);
}
.bento-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 24px 44px -10px rgba(0, 0, 0, .65),
        0 4px 10px rgba(0, 0, 0, .35);
    z-index: 5;
}

/* Background image */
.bento-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
    transition: transform .6s ease, filter var(--transi);
    filter: saturate(.85);
}
.bento-card:hover .bento-bg {
    transform: scale(1.06);
    filter: saturate(1);
}

/* Overlay viola sopra alla foto */
.bento-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
        rgba(42, 19, 64, .15) 0%,
        rgba(42, 19, 64, .35) 50%,
        rgba(26, 14, 46, .92) 100%);
    transition: background var(--transi);
}
.bento-card:hover .bento-overlay {
    background: linear-gradient(180deg,
        rgba(42, 19, 64, .1) 0%,
        rgba(42, 19, 64, .25) 50%,
        rgba(26, 14, 46, .88) 100%);
}

/* Variante invernale (Mercatini Natale) — bordo più freddo */
.bento-inverno .bento-overlay {
    background: linear-gradient(180deg,
        rgba(60, 30, 100, .15) 0%,
        rgba(60, 30, 100, .35) 50%,
        rgba(26, 14, 46, .92) 100%);
}

/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */
@media (max-width: 560px) {
    /* Mobile: nascondo la striscia verticale "SAGRE" (il titolo della sezione)
       e lascio le card a tutta larghezza. */
    .jones-split.sez-eventi {
        grid-template-columns: 1fr;
    }
    .jones-split.sez-eventi .jones-split-dark {
        display: none;
    }

    /* Mobile: le card delle sagre non vanno più a capo ma restano in fila
       ORIZZONTALE, scorrevole con lo swipe (come un carosello). */
    .bento-griglia {
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-end;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;   /* scorrimento fluido su iOS */
        gap: 1rem;
        padding-bottom: .4rem;               /* spazio per l'ombra delle card */
        scrollbar-width: none;               /* Firefox: niente scrollbar */
    }
    .bento-griglia::-webkit-scrollbar { display: none; }   /* WebKit: idem */

    /* Ogni cella mantiene la sua larghezza (non si stringe) e si "aggancia"
       al centro durante lo scorrimento. */
    .bento-cella {
        flex: 0 0 auto;
        scroll-snap-align: center;
    }
    .bento-card,
    .bento-card.size-hero,
    .bento-card.size-wide,
    .bento-card.size-tall,
    .bento-card.size-square {
        width: 175px;
    }
}


/* ----------------------------------------------------------
   CONTATTI senza form — solo info + mappa
   ---------------------------------------------------------- */
/* Layout 2 colonne: info a sinistra, mappa a destra */
.contatti-layout {
    display: grid;
    grid-template-columns: minmax(280px, 420px) 1fr;
    gap: 1.5rem;
    align-items: stretch;
    margin-bottom: 2rem;
}

/* Colonna info — verticale, compatta */
.contatti-semplice {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
}

/* Blocco con il pulsante CHIAMA in primo piano */
.contatti-call {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .65rem;
    padding: 1.3rem 1.2rem 1.2rem;
    background: linear-gradient(160deg,
        rgba(212, 168, 60, .14) 0%,
        rgba(42, 19, 64, .55) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(212, 168, 60, .5);
    border-radius: var(--r-md);
}
.contatti-numero {
    font-family: var(--font-titolo);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--oro-chiaro);
    font-weight: 600;
    letter-spacing: .01em;
    margin: 0;
}

/* Blocchi info (indirizzo + orari) — soft, leggermente trasparenti */
.contatti-blocco {
    padding: 1rem 1.2rem;
    background: rgba(42, 19, 64, .45);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(212, 168, 60, .28);
    border-radius: var(--r-md);
    transition: background var(--transi), border-color var(--transi), transform var(--transi);
}
.contatti-blocco:hover {
    background: rgba(42, 19, 64, .6);
    border-color: rgba(212, 168, 60, .55);
    transform: translateY(-2px);
}
.contatti-blocco h3 {
    font-family: var(--font-titolo);
    font-style: italic;
    font-weight: 600;
    color: var(--oro-chiaro);
    font-size: 1.2rem;
    margin: 0 0 .35rem;
    letter-spacing: .01em;
}
.contatti-indirizzo {
    color: var(--crema);
    font-size: .95rem;
    margin: 0 0 .4rem;
    line-height: 1.45;
}
.contatti-link {
    display: inline-block;
    color: var(--oro);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .03em;
    border-bottom: 1px solid rgba(212, 168, 60, .35);
    padding-bottom: 2px;
    transition: color var(--transi), border-color var(--transi);
}
.contatti-link:hover {
    color: var(--oro-chiaro);
    border-color: var(--oro-chiaro);
}

.contatti-orari-giorni {
    color: var(--crema);
    font-size: .92rem;
    margin: 0 0 .2rem;
    letter-spacing: .01em;
}
.contatti-orari-fasce {
    color: var(--oro);
    font-family: var(--font-titolo);
    font-style: italic;
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 .55rem;
    letter-spacing: .02em;
}
.contatti-orari-chiuso {
    display: inline-block;
    color: var(--viola-soft, #e0c8ff);
    background: rgba(126, 79, 170, .25);
    border: 1px solid rgba(126, 79, 170, .5);
    padding: .22rem .8rem;
    border-radius: 999px;
    font-size: .75rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin: 0;
}

/* Variante grande del bottone CHIAMA (è quello in evidenza) */
.btn-chiama.btn-chiama-grande {
    padding: .8rem 1.8rem;
    font-size: .9rem;
    letter-spacing: .15em;
}
.btn-chiama.btn-chiama-grande .btn-chiama-icona {
    width: 18px;
    height: 18px;
}
.contatti .info-mappa {
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid rgba(212, 168, 60, .35);
    min-height: 100%;
}
.contatti .info-mappa iframe {
    width: 100%;
    height: 100%;
    min-height: 420px;
    border: 0;
    filter: grayscale(.2) brightness(.95);
    display: block;
}
.contatti-layout + .footer,
.contatti-layout {
    margin-bottom: 3rem;
}
@media (max-width: 880px) {
    .contatti-layout {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
    .contatti .info-mappa iframe { min-height: 320px; }
}
@media (max-width: 560px) {
    .contatti-call { padding: 1.8rem 1.2rem; }
    .contatti-numero { font-size: 1.2rem; }
    .btn-chiama.btn-chiama-grande {
        padding: 1rem 1.6rem;
        font-size: .9rem;
        letter-spacing: .15em;
    }
    .contatti-blocco h3 { font-size: 1.3rem; }
    .contatti-orari-fasce { font-size: 1.1rem; }
}


/* ----------------------------------------------------------
   CONTATTI — sfondo immagine + bottone CHIAMA prominente
   ---------------------------------------------------------- */
.contatti {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.contatti-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    /* Foto del borgo come sfondo atmosferico */
    background-image: url('../images/sestino.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;        /* parallax leggero */
    filter: brightness(.7) saturate(.85);
}
.contatti-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse at 20% 30%,
            rgba(126, 79, 170, .55) 0%,
            transparent 60%),
        radial-gradient(ellipse at 80% 70%,
            rgba(212, 168, 60, .25) 0%,
            transparent 55%),
        linear-gradient(180deg,
            rgba(42, 19, 64, .85) 0%,
            rgba(26, 14, 46, .92) 100%);
}

/* Bottone CHIAMA ORA */
.btn-chiama {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .9rem 1.5rem;
    font-family: var(--font-testo);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    background: var(--oro);
    color: var(--viola-deep);
    border-radius: 999px;
    border: 2px solid var(--oro);
    box-shadow: 0 8px 20px -4px rgba(212, 168, 60, .55);
    transition: all var(--transi);
    text-decoration: none;
    /* Animazione pulse continua per attirare l'occhio */
    animation: btn-chiama-pulse 2.5s ease-in-out infinite;
}
.btn-chiama:hover {
    background: transparent;
    color: var(--oro-chiaro);
    border-color: var(--oro-chiaro);
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 14px 28px -4px rgba(212, 168, 60, .65);
    animation: none;
}
.btn-chiama-icona {
    width: 18px;
    height: 18px;
    transition: transform var(--transi);
}
.btn-chiama:hover .btn-chiama-icona {
    transform: rotate(-15deg) scale(1.15);
}
@keyframes btn-chiama-pulse {
    0%, 100% {
        box-shadow: 0 8px 20px -4px rgba(212, 168, 60, .55),
                    0 0 0 0 rgba(212, 168, 60, .5);
    }
    50% {
        box-shadow: 0 8px 20px -4px rgba(212, 168, 60, .55),
                    0 0 0 14px rgba(212, 168, 60, 0);
    }
}

@media (max-width: 600px) {
    .contatti-bg { background-attachment: scroll; }
}


/* Lista "Cosa vedere e fare" — titoletto sopra, descrizione sotto */
.borgo-testo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.35;
}
.borgo-testo strong {
    display: block;
    color: var(--oro-chiaro);
    font-weight: 600;
    font-size: 1rem;
}
.borgo-testo em {
    display: block;
    font-style: italic;
    color: rgba(244, 236, 216, .72);
    font-size: .85rem;
    line-height: 1.4;
}



/* =============================================================
   SEZIONI CHIARE — Orari & Borgo: sfondo crema per staccare
   dalle sezioni viola scuro circostanti.
   ============================================================= */
/* =============================================================
   HERO STILE OLIVA — logo serif gigante su foto sfocata
   ============================================================= */
.hero.hero-oliva {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--crema, #f4ecd8);
    text-align: center;
    overflow: hidden;
    isolation: isolate;
    padding: 0;
}
/* Nota: la vecchia regola "hide-list" che nascondeva .hero-bg/.hero-glow/
   .hero-overlay-viola/.hero-video-bg dentro hero-oliva è stata rimossa.
   Le prime tre classi non esistono più (pulizia 2026-05-26), mentre
   .hero-video-bg ora va invece MOSTRATA per il video del forno a legna. */

.hero-oliva-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* Sfondo di fallback nel caso entrambi i video falliscano (ad es. autoplay
       bloccato e poster non ancora caricato): viola scuro come prima */
    background: var(--viola-darker, #2A1340);
}
.hero-oliva-bg img {
    /* Eventuale <img> di fallback (oggi non presente, lasciata come safety net) */
    width: 100%; height: 100%;
    object-fit: cover;
    filter: saturate(1.05) brightness(.75);
    transform: scale(1.05);
}

/* ----------------------------------------------------------
   Hero video del forno a legna — crossfade A/B gestito da JS.
   I due <video> sono sovrapposti: quello con .attivo è visibile,
   l'altro resta a opacity 0 in attesa del proprio turno.
   ---------------------------------------------------------- */
.hero-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    /* Filtro morbido: leggera saturazione + bilanciamento luminosità così
       il fuoco resta vivido ma il viola dell'overlay non viene "mangiato" */
    filter: saturate(1.1) brightness(.85);
    transform: scale(1.02);          /* piccolo over-scan per nascondere bordi */
    transition: opacity 1.2s ease;   /* allineato a CROSSFADE_DURATION del JS */
    pointer-events: none;
    will-change: opacity;
}
.hero-video-bg.attivo { opacity: 1; }

/* Overlay viola "schiarito di un altro giro": alphas più basse così il fuoco
   del forno e il colore del video si vedono ancora di più. Il testo sopra
   resta leggibile grazie alla vignette ai bordi e al text-shadow del titolo. */
.hero-oliva-overlay {
    position: absolute;
    inset: 0;
    background:
        /* Vignette radiale: centro praticamente trasparente, bordi tenui */
        radial-gradient(ellipse at 50% 50%, rgba(74, 40, 110, .08) 0%, rgba(42, 19, 64, .38) 100%),
        /* Velatura verticale molto leggera, un filo più carica in basso */
        linear-gradient(180deg, rgba(42, 19, 64, .12) 0%, rgba(42, 19, 64, .28) 100%);
    pointer-events: none;
}

.hero-oliva-content {
    position: relative;
    z-index: 2;
    padding: 6rem 1.5rem 4rem;
    max-width: 1100px;
    width: 100%;
}

/* Giglio della Fiorentina */
.hero-oliva-giglio {
    width: 130px;
    margin: 0 auto 2rem;
    animation: hero-oliva-flutter 6s ease-in-out infinite;
}
.hero-oliva-giglio img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 6px 14px rgba(212, 168, 60, .35));
}
@keyframes hero-oliva-flutter {
    0%, 100% { transform: rotate(-2deg) translateY(0); }
    50%      { transform: rotate(2deg) translateY(-5px); }
}

/* Logo a tre parti: ESTD · TITOLO · ANNO */
.hero-oliva-logo {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: .5rem;
}
.hero-oliva-estd {
    font-family: var(--font-testo, 'Inter');
    font-size: .85rem;
    font-weight: 500;
    letter-spacing: .4em;
    text-transform: uppercase;
    color: var(--crema, #f4ecd8);
    opacity: .85;
}
.hero-oliva-estd-l { text-align: right; }
.hero-oliva-estd-r { text-align: left; }

.hero-oliva-titolo {
    font-family: var(--font-titolo, 'Cormorant Garamond');
    font-style: normal;
    font-weight: 500;
    font-size: clamp(3.5rem, 9vw, 8rem);
    line-height: .95;
    letter-spacing: .04em;
    color: var(--crema, #f4ecd8);
    text-transform: uppercase;
    text-shadow: 0 4px 30px rgba(0, 0, 0, .35);
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}
.hero-oliva-titolo .hero-oliva-r1,
.hero-oliva-titolo .hero-oliva-r2 {
    display: block;
}

.hero-oliva-sub {
    font-family: var(--font-titolo, 'Cormorant Garamond');
    font-style: italic;
    font-size: 1.15rem;
    color: rgba(244, 236, 216, .85);
    margin: .8rem 0 1.5rem;
}

.hero-oliva-divisore {
    width: 220px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--oro, #c9a14a) 50%, transparent);
    margin: 1.2rem auto;
    position: relative;
}
.hero-oliva-divisore-orna {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -55%);
    background: linear-gradient(90deg, transparent, rgba(42, 19, 64, .9) 30%, rgba(42, 19, 64, .9) 70%, transparent);
    padding: 0 1rem;
    color: var(--oro, #c9a14a);
    font-size: .85rem;
}

.hero-oliva-claim {
    font-family: var(--font-titolo, 'Cormorant Garamond');
    font-style: italic;
    font-size: 1.35rem;
    line-height: 1.55;
    color: rgba(244, 236, 216, .9);
    margin: 1.2rem 0 2.2rem;
}

.hero-oliva-cta {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.hero-oliva-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: 14px 28px;
    font-family: var(--font-testo, 'Inter');
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    border-radius: 999px;
    border: 1.5px solid;
    cursor: pointer;
    transition: all .3s ease;
    text-decoration: none;
}
.hero-oliva-btn-primario {
    background: var(--oro, #c9a14a);
    color: var(--viola-deep, #2A1340);
    border-color: var(--oro, #c9a14a);
}
.hero-oliva-btn-primario:hover {
    background: var(--oro-chiaro, #ffd773);
    border-color: var(--oro-chiaro, #ffd773);
    transform: translateY(-2px);
}
.hero-oliva-btn-secondario {
    background: transparent;
    color: var(--crema, #f4ecd8);
    border-color: rgba(244, 236, 216, .5);
}
.hero-oliva-btn-secondario:hover {
    background: rgba(244, 236, 216, .12);
    border-color: var(--crema, #f4ecd8);
    transform: translateY(-2px);
}

.hero-oliva-scroll {
    position: absolute;
    bottom: 1.8rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    width: 24px;
    height: 40px;
    border: 1.5px solid rgba(244, 236, 216, .55);
    border-radius: 12px;
}
.hero-oliva-scroll span {
    display: block;
    width: 3px; height: 8px;
    background: var(--oro, #c9a14a);
    margin: 6px auto 0;
    border-radius: 2px;
    animation: oliva-scroll-bob 1.8s ease-in-out infinite;
}
@keyframes oliva-scroll-bob {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50%      { transform: translateY(10px); opacity: .3; }
}

/* Navbar trasparente sopra l'hero scuro */
body:has(.hero-oliva) .nav:not(.scrolled) {
    background: transparent;
}
body:has(.hero-oliva) .nav:not(.scrolled) .nav-link,
body:has(.hero-oliva) .nav:not(.scrolled) .nav-brand-testo {
    color: var(--crema, #f4ecd8);
}

/* Responsive hero OLIVA */
@media (max-width: 880px) {
    .hero-oliva-content { padding: 5rem 1rem 3rem; }
    .hero-oliva-giglio { width: 100px; margin-bottom: 1.2rem; }
    .hero-oliva-logo {
        grid-template-columns: 1fr;
        gap: .3rem;
    }
    .hero-oliva-estd { font-size: .68rem; letter-spacing: .3em; text-align: center; }
    .hero-oliva-estd-l, .hero-oliva-estd-r { text-align: center; }
    .hero-oliva-titolo {
        font-size: clamp(2.4rem, 13vw, 4rem);
        letter-spacing: .02em;
    }
    .hero-oliva-sub { font-size: .95rem; }
    .hero-oliva-divisore { width: 140px; }
    .hero-oliva-claim { font-size: 1.05rem; line-height: 1.45; margin: 1rem 0 1.6rem; }
    .hero-oliva-cta { flex-direction: column; align-items: stretch; gap: .65rem; }
    .hero-oliva-btn { justify-content: center; padding: 12px 18px; font-size: .68rem; }
}


/* =============================================================
   JONES REDESIGN — Stile editoriale bold + panna + viola
   ============================================================= */

/* SPAZIATURE UNIFORMI fra tutte le sezioni del sito redesign */
.jones-hero,
.sezione.sez-menu,
.sezione.sez-tessere,
.orari-calendario,
.testimonianze,
.sezione.sez-eventi,
.contatti,
.jones-split {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}
/* Eccezioni: la hero ha più spazio sopra per la navbar */
.jones-hero {
    padding-top: 5rem !important;
    padding-bottom: 4rem !important;
}
/* I jones-split mantengono il padding interno sui lati ma sono uniformi sopra/sotto */
.jones-split.jones-menu,
.jones-split.jones-borgo,
.jones-split.sez-eventi,
.jones-split#valori {
    /* Questi jones-split hanno lo sfondo chiaro: azzerando il padding sopra/sotto
       le colonne viola riempiono tutto il contenitore senza strisce bianche. */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.jones-split.jones-menu .jones-split-light,
.jones-split.jones-borgo .jones-split-light {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}
.jones-split.jones-menu .jones-split-dark,
.jones-split.jones-borgo .jones-split-dark {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}
/* Sezione "Cucina Toscana" (#valori): la striscia mantiene un padding
   contenuto, la colonna foto va a padding 0 perché la foto è a tutto sfondo. */
.jones-split#valori .jones-split-dark {
    padding-top: 1.2rem !important;
    padding-bottom: 1.2rem !important;
}
.jones-split#valori .jones-split-light {
    padding: 0 !important;
}
/* Divisori uniformi */
.jones-divider {
    padding: 1.5rem 1rem !important;
}
.jones-marquee {
    padding: 14px 0 !important;
}
.jones-press {
    padding: 1.4rem 0 !important;
}
/* Header di sezione uniformi sopra il contenuto */
.sez-header {
    margin-bottom: 2.5rem !important;
}

/* HERO panna con foto-card ruotata */
.jones-hero {
    background: #f3ead5;
    color: var(--viola-deep, #2A1340);
    min-height: auto;
    padding: 5rem 0 4rem;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
/* Annulla le decorazioni viola precedenti dentro questo hero */
.jones-hero .hero-bg,
.jones-hero .hero-glow,
.jones-hero .hero-overlay-viola,
.jones-hero .hero-video-bg,
.jones-hero .hero-scroll {
    display: none !important;
}

.jones-hero-inner {
    position: relative;
    z-index: 2;
}
.jones-hero-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 3rem;
    align-items: center;
}

/* Giglio della Fiorentina sopra il titolo */
.jones-giglio {
    width: 90px;
    margin-bottom: 1.2rem;
    animation: jones-giglio-flutter 6s ease-in-out infinite;
}
.jones-giglio img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 6px 10px rgba(42, 19, 64, .25));
}
@keyframes jones-giglio-flutter {
    0%, 100% { transform: rotate(-2deg) translateY(0); }
    50%      { transform: rotate(2deg) translateY(-4px); }
}
@media (max-width: 880px) {
    .jones-giglio { width: 72px; margin-left: auto; margin-right: auto; }
}

/* Titolone bold uppercase a sinistra */
.jones-titolo {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: clamp(3rem, 6.5vw, 6rem);
    line-height: .92;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: var(--viola-deep, #2A1340);
    margin: 0 0 1.5rem;
}
.jones-titolo em {
    color: var(--viola, #7e4faa);
    font-style: normal;
}

.jones-claim-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 1rem;
}
.jones-claim-line {
    width: 48px;
    height: 2px;
    background: var(--viola-deep, #2A1340);
}
.jones-claim-tag {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--viola-deep, #2A1340);
}

.jones-descr {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(42, 19, 64, .78);
    max-width: 460px;
    margin: 0 0 1.6rem;
}

.jones-azioni {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.jones-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: .75rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 999px;
    transition: all .25s ease;
    border: 2px solid var(--viola-deep, #2A1340);
}
.jones-btn-primario {
    background: var(--viola-deep, #2A1340);
    color: #f4ecd8;
}
.jones-btn-primario:hover {
    background: var(--viola, #7e4faa);
    border-color: var(--viola, #7e4faa);
    transform: translateY(-2px);
}
.jones-btn-secondario {
    background: transparent;
    color: var(--viola-deep, #2A1340);
}
.jones-btn-secondario:hover {
    background: var(--viola-deep, #2A1340);
    color: #f4ecd8;
    transform: translateY(-2px);
}

/* Foto-card ruotata a destra */
.jones-hero-photo {
    display: flex;
    justify-content: center;
    align-items: center;
}
.jones-photo-card {
    background: #fffdf6;
    padding: 14px 14px 24px;
    box-shadow:
        0 30px 50px -15px rgba(42, 19, 64, .45),
        0 8px 16px rgba(42, 19, 64, .2);
    transform: rotate(3deg);
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
    max-width: 380px;
    width: 100%;
}
.jones-photo-card:hover {
    transform: rotate(0deg) scale(1.02);
}
.jones-photo-frame {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #1a0a02;
}
.jones-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .8s ease;
}
.jones-photo-card:hover .jones-photo-frame img {
    transform: scale(1.05);
}
.jones-photo-label {
    text-align: center;
    font-family: var(--font-titolo, 'Cormorant Garamond');
    font-style: italic;
    font-weight: 600;
    font-size: 1rem;
    color: var(--viola-deep, #2A1340);
    margin-top: 12px;
    letter-spacing: .01em;
}

/* MARQUEE oro scrollante */
.jones-marquee {
    background: var(--oro, #c9a14a);
    color: var(--viola-deep, #2A1340);
    padding: 16px 0;
    overflow: hidden;
    border-top: 1px solid rgba(42, 19, 64, .15);
    border-bottom: 1px solid rgba(42, 19, 64, .15);
}
.jones-marquee-track {
    display: flex;
    gap: 3rem;
    white-space: nowrap;
    animation: jones-marquee-scroll 30s linear infinite;
    width: max-content;
}
.jones-marquee-item {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: .78rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    padding-right: 3rem;
    flex-shrink: 0;
}
@keyframes jones-marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Responsive hero */
@media (max-width: 880px) {
    .jones-hero-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .jones-hero {
        padding: 3rem 0 2.5rem;
    }
    .jones-photo-card {
        max-width: 280px;
        margin: 0 auto;
    }
}

/* Navbar adattata al fondo panna dell'hero */
body:has(.jones-hero) .nav:not(.scrolled) {
    background: transparent;
}
body:has(.jones-hero) .nav:not(.scrolled) .nav-link,
body:has(.jones-hero) .nav:not(.scrolled) .nav-brand-testo {
    color: var(--viola-deep, #2A1340);
}

/* ----------------------------------------------------------
   JONES SPLIT — sezione due-toni con scritta verticale
   ---------------------------------------------------------- */
.jones-split {
    display: grid;
    grid-template-columns: minmax(150px, .65fr) 3.5fr;
    background: #fffdf6;
    min-height: 80vh;
}
.jones-split-side {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.jones-split-dark {
    background: var(--viola-deep, #2A1340);
    padding: 4rem 1rem;
}
.jones-split-light {
    background: #fffdf6;
    padding: 4rem 3rem;
}

/* Scritta verticale gigante nella metà scura */
.jones-split-vert {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: clamp(3rem, 7vw, 6.5rem);
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: var(--oro, #c9a14a);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    line-height: .9;
    white-space: nowrap;
}

.jones-split-content {
    max-width: 600px;
}

/* Tipografia editoriale Jones */
.jones-eyebrow {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: .7rem;
    letter-spacing: .35em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--viola, #7e4faa);
    margin-bottom: .8rem;
}
.jones-h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    line-height: .95;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: var(--viola-deep, #2A1340);
    margin: 0 0 1.2rem;
}
.jones-h2 em {
    color: var(--viola, #7e4faa);
    font-style: normal;
}
.jones-paragraph {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(42, 19, 64, .78);
    margin: 0 0 1.8rem;
}

/* Lista valori numerata */
.jones-valori-list {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 2rem;
}
.jones-valori-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
}
.jones-valori-num {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 1.6rem;
    color: var(--oro, #c9a14a);
    line-height: 1;
    letter-spacing: -.02em;
}
.jones-valori-list h4 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: .85rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--viola-deep, #2A1340);
    margin: 0 0 .35rem;
}
.jones-valori-list li p {
    font-family: 'Inter', sans-serif;
    font-size: .88rem;
    line-height: 1.5;
    color: rgba(42, 19, 64, .72);
    margin: 0;
}

/* Responsive split */
@media (max-width: 880px) {
    .jones-split {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .jones-split-dark {
        min-height: 140px;
        padding: 2rem 1rem;
    }
    .jones-split-vert {
        writing-mode: horizontal-tb;
        transform: none;
        font-size: clamp(2rem, 8vw, 3rem);
    }
    .jones-split-light {
        padding: 2.5rem 1.5rem;
    }
    .jones-valori-list {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------------------------
   JONES PRESS STRIP — "Recensiti su"
   ---------------------------------------------------------- */
.jones-press {
    background: #fffdf6;
    padding: 2.2rem 0;
    text-align: center;
    border-top: 1px solid rgba(42, 19, 64, .1);
    border-bottom: 1px solid rgba(42, 19, 64, .1);
}
.jones-press-eyebrow {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: .7rem;
    letter-spacing: .4em;
    text-transform: uppercase;
    color: rgba(42, 19, 64, .55);
    font-weight: 600;
    margin-bottom: .8rem;
}
.jones-press-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.8rem;
}
.jones-press-item {
    font-family: var(--font-titolo, 'Cormorant Garamond');
    font-style: italic;
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--viola-deep, #2A1340);
    letter-spacing: .01em;
}
.jones-press-divisore {
    color: var(--oro, #c9a14a);
    font-size: .8rem;
    opacity: .6;
}
@media (max-width: 600px) {
    .jones-press-row { gap: 1rem; }
    .jones-press-item { font-size: 1.15rem; }
    .jones-press-divisore { display: none; }
}

/* ----------------------------------------------------------
   JONES TYPOGRAPHY OVERRIDES — titoli di sezione bold
   Applica lo stile Jones (Inter 900 uppercase) ai titoli h2
   delle altre sezioni mantenendo gli 'em' in viola/oro.
   ---------------------------------------------------------- */
.sez-header h2,
.sezione .sez-header h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -.015em;
    line-height: .95;
}
.sez-header h2 em,
.sezione .sez-header h2 em {
    font-style: normal;
    color: var(--oro, #c9a14a);
}
.sez-header .occhiello,
.sezione .sez-header .occhiello {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: .35em;
}

/* ----------------------------------------------------------
   JONES CONTATTI — header bold uppercase su sfondo scuro
   ---------------------------------------------------------- */
.jones-contatti-header {
    text-align: left !important;
    max-width: 900px;
    margin: 0 auto 2rem !important;
}
.jones-contatti-header .jones-eyebrow {
    color: var(--oro-chiaro, #ffd773);
    margin-bottom: 1rem;
}
.jones-h2.jones-h2-light {
    color: var(--crema, #f4ecd8);
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
    line-height: .92;
    letter-spacing: -.02em;
    text-transform: uppercase;
    margin: 0 0 1rem !important;
}
.jones-h2.jones-h2-light em {
    color: var(--oro, #c9a14a);
    font-style: normal;
}
/* Titolo dei Contatti ("Passa a trovarci in piazza") un po' più piccolo,
   senza toccare gli altri titoli .jones-h2 del sito. */
.jones-contatti .jones-h2.jones-h2-light {
    font-size: clamp(1.9rem, 4vw, 3.2rem);
}
.jones-contatti-header p {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: rgba(244, 236, 216, .8);
    max-width: 460px;
}

/* Accento Jones sulla colonna info di sinistra (Chiama / Indirizzo / Orari) */
.jones-contatti .contatti-blocco h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: .8rem;
    letter-spacing: .25em;
    text-transform: uppercase;
}
.jones-contatti .contatti-numero {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-style: normal;
    letter-spacing: .04em;
}


/* ----------------------------------------------------------
   JONES MENÙ — versione "magazine" pulita
   ---------------------------------------------------------- */
.sez-menu {
    background: var(--viola-deep, #2A1340);
    padding: 4rem 0 4.5rem;
    position: relative;
}
.sez-menu .sez-header {
    margin-bottom: 2rem;
}
.sez-menu .sez-header .occhiello {
    color: var(--oro-chiaro, #ffd773);
}
.sez-menu .sez-header h2 {
    color: var(--crema, #f4ecd8);
    font-size: clamp(2.4rem, 5vw, 4.2rem);
}
.sez-menu .sez-header h2 em {
    color: var(--oro, #c9a14a);
}

/* Foglio menù — "carta viola del ristorante", coerente tra copertina
   e pagine interne. Gradiente principale viola con riflessi caldi
   in alto a sinistra e profondità in basso a destra. */
.sez-menu .menu-foglio {
    background:
        radial-gradient(ellipse at 0% 0%, rgba(212, 168, 60, .14), transparent 55%),
        radial-gradient(ellipse at 100% 100%, rgba(0, 0, 0, .25), transparent 55%),
        linear-gradient(160deg, var(--viola, #5A2D82) 0%, var(--viola-deep, #2A1340) 100%) !important;
    border: 1px solid rgba(212, 168, 60, .35) !important;
    box-shadow:
        0 0 0 1px rgba(212, 168, 60, .35),
        0 24px 50px -20px rgba(0, 0, 0, .55),
        inset 0 0 80px rgba(0, 0, 0, .25) !important;
    border-radius: 6px !important;
}
/* Cornice interna oro sottile (richiamo del menù di sala) */
.sez-menu .menu-foglio::before {
    content: '';
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(212, 168, 60, .25) !important;
    background: none !important;
    pointer-events: none;
    border-radius: 3px;
}

/* Copertina — torna allo stile serif "gazzetta" */
.sez-menu .menu-copertina {
    text-align: center;
}
/* Tipografia copertina su sfondo viola — testi crema/oro */
.sez-menu .menu-eyebrow {
    font-family: var(--font-testo, 'Inter') !important;
    font-size: .72rem !important;
    letter-spacing: .35em !important;
    text-transform: uppercase !important;
    color: rgba(212, 168, 60, .85) !important;
    font-weight: 600 !important;
    font-style: normal !important;
}
/* Titolo copertina: il rendering preciso (Dai tondo + Toscani italic oro)
   è gestito dalle classi .menu-cop-titolo-r1/-r2 a livello superiore.
   Qui sotto manteniamo solo la base in crema, lasciando ai child il colore. */
.sez-menu .menu-cop-titolo {
    font-family: var(--font-titolo, 'Cormorant Garamond') !important;
    font-weight: 700 !important;
    font-style: normal !important;
    font-size: clamp(2.4rem, 6vw, 4rem) !important;
    line-height: 1 !important;
    letter-spacing: -.005em !important;
    text-transform: none !important;
    color: var(--crema, #f4ecd8) !important;
    margin: 0 0 1.1rem !important;
}
.sez-menu .menu-cop-titolo-r2 {
    color: var(--oro, #c9a14a) !important;
    font-style: italic !important;
}
.sez-menu .menu-cop-claim {
    font-family: var(--font-titolo, 'Cormorant Garamond') !important;
    font-style: italic !important;
    font-size: 1.1rem !important;
    color: var(--crema, #f4ecd8) !important;
    margin: .3rem 0 1rem !important;
}
.sez-menu .menu-cop-claim em {
    color: var(--crema, #f4ecd8) !important;
}
.sez-menu .menu-cop-claim-line {
    background: rgba(212, 168, 60, .65) !important;
}
.sez-menu .menu-cop-luogo {
    color: rgba(244, 236, 216, .65) !important;
}
.sez-menu .menu-cop-btn {
    background: var(--oro, #c9a14a) !important;
    color: var(--viola-deep, #2A1340) !important;
}
.sez-menu .menu-cop-btn:hover {
    background: var(--crema, #f4ecd8) !important;
}

/* Pagine categorie — titoli serif eleganti su sfondo viola */
.sez-menu .menu-foglio-header {
    text-align: center !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid rgba(212, 168, 60, .35) !important;
}
.sez-menu .menu-foglio-header h3 {
    font-family: var(--font-titolo, 'Cormorant Garamond') !important;
    font-weight: 700 !important;
    font-style: italic !important;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem) !important;
    text-transform: none !important;
    letter-spacing: -.005em !important;
    color: var(--crema, #f4ecd8) !important;
    margin: .3rem 0 .4rem !important;
    line-height: 1.05 !important;
}
/* Sottotitolo categoria con linee oro ai lati, identico al .menu-cop-claim
   della copertina: due brevi tratti dorati che incorniciano il testo. */
.sez-menu .menu-foglio-sub {
    font-family: var(--font-titolo, 'Cormorant Garamond') !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: .95rem !important;
    color: rgba(244, 236, 216, .75) !important;
    letter-spacing: .01em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .9rem;
    margin-top: .25rem;
}
.sez-menu .menu-foglio-sub::before,
.sez-menu .menu-foglio-sub::after {
    content: '';
    flex: 0 0 auto;
    width: clamp(24px, 5vw, 50px);
    height: 1px;
    background: rgba(212, 168, 60, .65);
}

/* Lista piatti — bordi in oro tenue per stacco dolce sul viola */
.sez-menu .menu-piatti li {
    border-bottom: 1px dashed rgba(212, 168, 60, .28) !important;
    padding: .9rem 0 !important;
}
.sez-menu .menu-piatto-info strong {
    font-family: var(--font-titolo, 'Cormorant Garamond') !important;
    font-weight: 700 !important;
    font-style: italic !important;
    font-size: 1.2rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--crema, #f4ecd8) !important;
}
.sez-menu .menu-piatto-info span {
    font-family: var(--font-titolo, 'Cormorant Garamond') !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: .95rem !important;
    color: rgba(244, 236, 216, .7) !important;
}
.sez-menu .menu-prezzo {
    font-family: var(--font-titolo, 'Cormorant Garamond') !important;
    font-weight: 700 !important;
    font-style: italic !important;
    font-size: 1.15rem !important;
    color: var(--oro, #c9a14a) !important;
}
.sez-menu .menu-foglio-nota {
    font-family: var(--font-titolo, 'Cormorant Garamond') !important;
    font-style: italic !important;
    font-size: .78rem !important;
    color: rgba(244, 236, 216, .6) !important;
    letter-spacing: 0 !important;
    border-top: 1px dashed rgba(212, 168, 60, .28) !important;
}

/* Frecce e indicatori */
.menu-nav {
    background: var(--viola-deep, #2A1340) !important;
    color: var(--oro-chiaro, #ffd773) !important;
    border: 2px solid var(--viola-deep, #2A1340) !important;
}
.menu-nav:hover {
    background: var(--oro, #c9a14a) !important;
    color: var(--viola-deep, #2A1340) !important;
    border-color: var(--oro, #c9a14a) !important;
}
.menu-indicatore.attivo {
    background: var(--oro, #c9a14a) !important;
    color: var(--viola-deep, #2A1340) !important;
}

/* ----------------------------------------------------------
   JONES MENÙ — libro aperto con doppia pagina affiancata
   ---------------------------------------------------------- */
.jones-menu {
    /* Stesse proporzioni di Valori e Borgo per allineare le divisioni */
    grid-template-columns: minmax(150px, .65fr) 3.5fr;
    padding: 0;
    min-height: auto;
    background: var(--viola-deep, #2A1340);
}
.jones-menu.jones-split .jones-split-dark {
    padding: 3rem 1rem;
}
.jones-menu.jones-split .jones-split-light {
    padding: 3rem 2rem;
}
.jones-menu .jones-menu-content {
    max-width: none;
    width: 100%;
}
.jones-menu .jones-paragraph {
    margin-bottom: 1.5rem;
}

/* Stage diventa una doppia pagina (libro aperto) */
.jones-menu .menu-giornale {
    margin: 0 auto;
    max-width: 820px;
    /* Prospettiva 3D sulle pagine per dare l'effetto sfoglio reale.
       Valore alto (2200px) = poca distorsione, sembra una pagina che gira
       vista da circa 1.5m di distanza, non un foglio piegato in faccia. */
    perspective: 2200px;
    perspective-origin: center center;
}
/* Stage menù: una sola pagina alla volta, ALTEZZA FISSA così tutte le
   pagine hanno esattamente le stesse dimensioni. Il contenuto più lungo
   (es. lista di 8 pizze) scrolla dentro al foglio senza far cambiare
   altezza al riquadro esterno. */
.jones-menu .menu-stage {
    display: block;
    position: relative;
    /* Altezza fissa: tutte le pagine hanno la stessa dimensione, il
       contenuto scrolla internamente al foglio se necessario. */
    height: 620px;
    min-height: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 6px;
    /* preserve-3d: serve perché le pagine figlie ruotano in 3D durante
       lo sfoglio, e devono mantenere la profondità rispetto allo stage */
    transform-style: preserve-3d;
}
/* Disattivo cucitura e ombra centrale del vecchio "libro aperto" */
.jones-menu .menu-stage::before,
.jones-menu .menu-stage::after {
    display: none;
}

/* ============================================================
   SFOGLIO PAGINA VERA — versione "morbida"
   ============================================================
   Niente flip completo a 180° (era troppo definitivo, da cartone animato).
   Qui ogni pagina si solleva di un'inclinazione contenuta (~25°), trasla di
   un cinquantesimo di pagina sul piano orizzontale e svanisce in opacity —
   il cervello dell'utente legge: "una pagina si è alzata, ne sta arrivando
   un'altra da sotto". L'effetto è più simile a un foglio leggero di carta
   che si muove, meno a una porta che sbatte. */
/* SFOGLIO PAGINA — versione "realistica" (vera page-flip).
   Logica: SOLO la pagina che ESCE ruota di -180° attorno al dorso a
   sinistra, come una vera pagina di libro che si alza, gira e si posa
   dall'altra parte. La pagina nuova non ruota: sta piatta "sotto" la
   corrente e si rivela con un fade rapido mentre la vecchia è ancora a
   metà del giro. È così che il cervello legge lo sfoglio di un libro
   reale: vede una sola pagina muoversi.
   backface-visibility: hidden fa sì che superati i 90° di rotazione si
   smetta di vedere il retro speculare. */
.jones-menu .menu-pagina {
    position: absolute;
    inset: 0;
    padding: 0;
    pointer-events: none;
    opacity: 0;
    /* Default: piatte e invisibili, "sotto" alla pagina attiva.
       Diventeranno visibili con un semplice fade-in quando attive. */
    transform: rotateY(0deg);
    transform-origin: left center;
    backface-visibility: hidden;
    /* Due durate distinte, allungate per dare il giusto "peso" al foglio:
       - opacity 0.5s: il fade è più disteso, la pagina nuova compare con
         calma sotto la rotazione di quella vecchia
       - transform 1.4s: la rotazione è ben lenta, si "sente" il foglio
         che gira anziché un movimento mordi-e-fuggi
       La curva ease imita la fisica della carta: parte morbida, accelera
       a metà giro, rallenta nel finale come una pagina che si posa piano. */
    transition:
        transform 1.4s cubic-bezier(.45, .05, .25, 1),
        opacity   .5s  ease;
}

/* Pagina attiva: aperta davanti all'utente, piatta, completamente visibile. */
.jones-menu .menu-pagina.attiva {
    transform: rotateY(0deg);
    opacity: 1;
    pointer-events: auto;
    z-index: 3;
}

/* Pagina già letta: ruotata di -180° attorno al dorso a sinistra.
   Resta a opacity 1 — non sparisce per fade ma perché backface-visibility
   nasconde il retro una volta superato l'angolo di 90°. */
.jones-menu .menu-pagina.passata {
    transform: rotateY(-180deg);
    opacity: 1;
    z-index: 2;
}

/* Foglio in pagina singola: lasciamo che lo sfondo viola sia gestito da
   .sez-menu .menu-foglio (gradiente + cornice oro), qui controlliamo solo
   dimensioni e padding. */
.jones-menu .menu-foglio {
    height: 100% !important;
    min-height: 520px;
    padding: 1.6rem 1.8rem !important;
}
/* Numeri di pagina in basso (effetto vero menù) */
.jones-menu .menu-pagina:not([data-pagina="0"]) .menu-foglio {
    position: relative;
}
.jones-menu .menu-pagina:not([data-pagina="0"]) .menu-foglio::after {
    content: '— ' attr(data-pagina-num) ' —';
    position: absolute;
    bottom: .8rem;
    left: 0;
    right: 0;
    text-align: center;
    font-family: var(--font-titolo, 'Cormorant Garamond');
    font-style: italic;
    font-size: .8rem;
    /* Era viola scuro su carta panna; ora oro tenue su viola */
    color: rgba(212, 168, 60, .55);
    letter-spacing: .1em;
    pointer-events: none;
}
/* Numero pagina sinistra (pari) — angolo basso sinistro */
.jones-menu .menu-pagina.attiva:not([data-pagina="0"]) .menu-foglio::after {
    text-align: left;
    padding-left: 2rem;
}
/* Numero pagina destra (dispari) — angolo basso destro */
.jones-menu .menu-pagina.attiva + .menu-pagina .menu-foglio::after {
    text-align: right;
    padding-right: 2rem;
}

/* (Rimosso) — le vecchie regole che mettevano background semi-trasparente
   sul foglio attivo erano pensate per il "libro aperto a doppia pagina"
   (creavano l'ombra di curvatura tra le due pagine). Ora che c'è una
   pagina alla volta su sfondo viola pieno non servono e creavano
   conflitti con il gradiente di .sez-menu .menu-foglio. */

/* Compatto tipografia interna del menù per stare in viewport — torna al serif */
.jones-menu .menu-foglio-header h3 {
    font-size: clamp(1.5rem, 2.8vw, 2.2rem) !important;
    font-weight: 700 !important;
    margin-bottom: .25rem !important;
}
.jones-menu .menu-foglio-sub {
    font-size: .9rem !important;
    font-weight: 600 !important;
}
.jones-menu .menu-piatti li {
    padding: .55rem 0 !important;
}
.jones-menu .menu-piatto-info strong {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
}
.jones-menu .menu-piatto-info span {
    font-size: .9rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}
.jones-menu .menu-prezzo {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
}
/* Copertina più compatta */
.jones-menu .menu-cop-titolo {
    font-size: clamp(2.4rem, 5vw, 3.8rem) !important;
    margin: .5rem 0 !important;
}
.jones-menu .menu-cop-claim {
    font-size: 1rem !important;
    margin: .3rem 0 .8rem !important;
}

/* Frecce minimal: solo chevron oro, niente cerchio */
.jones-menu .menu-nav {
    background: transparent !important;
    border: none !important;
    color: var(--oro, #c9a14a) !important;
    font-size: 2.5rem !important;
    width: 36px !important;
    height: 36px !important;
    box-shadow: none !important;
    opacity: .7;
    transition: opacity .25s ease, transform .25s ease, color .25s ease;
    padding: 0 !important;
    line-height: 1 !important;
}
.jones-menu .menu-nav:hover {
    background: transparent !important;
    color: var(--oro-chiaro, #ffd773) !important;
    opacity: 1;
    transform: translateY(-50%) scale(1.15);
    border: none !important;
}
.jones-menu .menu-nav:disabled {
    opacity: .25;
    cursor: not-allowed;
}
.jones-menu .menu-prev { left: -8px; }
.jones-menu .menu-next { right: -8px; }

/* (rimosso) — non serve più un override speciale per la copertina:
   stage e .menu-foglio sono già coerenti (sfondo viola) per tutte le pagine,
   quindi la copertina e le pagine interne hanno esattamente lo stesso look. */

@media (max-width: 880px) {
    .jones-menu { grid-template-columns: 1fr; }
    .jones-menu.jones-split .jones-split-light { padding: 2rem 1rem; }
    /* Su mobile torna pagina singola */
    .jones-menu .menu-stage {
        grid-template-columns: 1fr;
        min-height: 500px;
    }
    .jones-menu .menu-stage::before,
    .jones-menu .menu-stage::after {
        display: none;
    }
    .jones-menu .menu-pagina.attiva + .menu-pagina {
        display: none;
    }
}

/* ----------------------------------------------------------
   JONES BORGO — lista editoriale dei 5 luoghi
   ---------------------------------------------------------- */
.jones-borgo .jones-split-light {
    padding: 4rem 3rem;
}
.jones-borgo .jones-h2 {
    margin-bottom: 1rem;
}
.jones-borgo-list {
    list-style: none;
    margin: 2rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}
.jones-borgo-list li {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1.4rem;
    align-items: center;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(42, 19, 64, .15);
}
.jones-borgo-list li:last-of-type {
    border-bottom: none;
}
.jones-borgo-foto {
    width: 120px;
    height: 120px;
    overflow: hidden;
    border-radius: 4px;
    background: #1a0a02;
    flex-shrink: 0;
}
.jones-borgo-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
    filter: saturate(.9);
}
.jones-borgo-list li:hover .jones-borgo-foto img {
    transform: scale(1.08);
    filter: saturate(1);
}
.jones-borgo-info {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .8rem 1.2rem;
    align-items: start;
}
.jones-borgo-num {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 2.4rem;
    line-height: 1;
    color: var(--oro, #c9a14a);
    letter-spacing: -.02em;
    grid-row: span 2;
}
.jones-borgo-info h4 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--viola-deep, #2A1340);
    margin: 0;
    line-height: 1.1;
}
.jones-borgo-info p {
    font-family: 'Inter', sans-serif;
    font-size: .88rem;
    line-height: 1.5;
    color: rgba(42, 19, 64, .72);
    margin: 0;
}
/* Banner "Lo sapevi?" finale */
.jones-borgo-note {
    margin-top: 2rem;
    padding: 1rem 1.2rem;
    background: rgba(126, 79, 170, .1);
    border-left: 3px solid var(--oro, #c9a14a);
    font-family: 'Inter', sans-serif;
    font-size: .9rem;
    line-height: 1.55;
    color: rgba(42, 19, 64, .85);
    display: flex;
    gap: .6rem;
    align-items: flex-start;
}
.jones-borgo-note strong {
    color: var(--viola-deep, #2A1340);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .78rem;
    margin-right: .2rem;
}
.jones-borgo-note em {
    color: var(--oro, #c9a14a);
    font-style: normal;
    font-weight: 700;
}

@media (max-width: 880px) {
    .jones-borgo-list li {
        grid-template-columns: 90px 1fr;
        gap: 1rem;
    }
    .jones-borgo-foto {
        width: 90px;
        height: 90px;
    }
    .jones-borgo-num {
        font-size: 1.8rem;
    }
}

/* ----------------------------------------------------------
   JONES FLUIDITY — transizioni e divisori tra le sezioni
   ---------------------------------------------------------- */
/* Divisore decorativo riutilizzabile: linea oro + ★ centrale */
.jones-divider {
    background: var(--viola-deep, #2A1340);
    padding: 1.5rem 1rem;
    text-align: center;
    position: relative;
}
.jones-divider-content {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    color: var(--oro, #c9a14a);
}
.jones-divider-line {
    display: inline-block;
    width: 80px;
    height: 1px;
    background: var(--oro, #c9a14a);
    opacity: .55;
}
.jones-divider-star {
    font-size: 1rem;
    color: var(--oro, #c9a14a);
}
.jones-divider-label {
    font-family: 'Inter', sans-serif;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .35em;
    text-transform: uppercase;
    color: var(--oro-chiaro, #ffd773);
}

/* Divisore alternativo su sfondo panna */
.jones-divider.light {
    background: #f3ead5;
}
.jones-divider.light .jones-divider-line {
    background: var(--viola-deep, #2A1340);
    opacity: .35;
}
.jones-divider.light .jones-divider-star {
    color: var(--viola, #7e4faa);
}
.jones-divider.light .jones-divider-label {
    color: var(--viola-deep, #2A1340);
}

/* Fade-in/fade-out morbidi tra sezioni viola scuro e panna */
.sez-tessere::before,
.sez-borgo::before,
.sez-borgo-mosaico::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(180deg, rgba(42, 19, 64, .15) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}
.sez-menu,
.testimonianze,
.sez-eventi,
.contatti {
    position: relative;
}
.sez-menu::after,
.testimonianze::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .2) 100%);
    pointer-events: none;
    z-index: 0;
}


.sez-borgo,
.sez-borgo-mosaico {
    background:
        radial-gradient(circle at 20% 0%, rgba(212, 168, 60, .08), transparent 55%),
        radial-gradient(circle at 80% 100%, rgba(90, 45, 130, .08), transparent 55%),
        url('../images/carta%20.jpg') center/cover no-repeat #f7f1e3 !important;
    color: var(--viola-deep);
}

/* ORARI — sfondo immagine "open" con la porta diventata viola */
.orari-calendario {
    position: relative;
    isolation: isolate;
    background-color: var(--viola-deep);
}
.orari-calendario::before {
    /* Immagine OPEN rimossa: la sezione resta sul viola scuro */
    display: none;
}
/* Overlay leggero — l'immagine sfuma già da sola tramite mask, qui solo una velatura uniforme */
.orari-calendario::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(74, 40, 110, .12) 0%, rgba(42, 19, 64, .18) 100%);
    pointer-events: none;
}
.orari-calendario {
    background-color: #2a1340;
}
/* (regola obsoleta: la posizione viene gestita direttamente nella regola principale ::before) */

/* ----------------------------------------------------------
   ORARI SPLIT — pranzo a sx · tessere OPEN al centro · cena a dx
   ---------------------------------------------------------- */
.orari-calendario .orari-split {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 160px 1fr;
    gap: 28px;
    align-items: start;
    max-width: 900px;
    margin: 0 auto;
}
.orari-calendario .orari-spacer {
    /* spazio vuoto per lasciar respirare le tessere OPEN del background */
}
.orari-calendario .orari-col {
    color: var(--crema);
}
.orari-calendario .orari-fascia {
    text-align: center;
    font-family: var(--font-testo);
    font-size: .68rem;
    letter-spacing: .35em;
    text-transform: uppercase;
    color: var(--oro);
    margin: 0 0 .5rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid rgba(212, 168, 60, .35);
    font-weight: 700;
}
.orari-calendario .orari-elenco {
    list-style: none;
    margin: 0;
    padding: 0;
}
.orari-calendario .orari-elenco li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: .55rem 0;
    border-bottom: 1px solid rgba(212, 168, 60, .15);
    transition: background var(--transi);
}
.orari-calendario .orari-elenco li:last-child {
    border-bottom: none;
}
.orari-calendario .orari-elenco li:hover {
    background: rgba(244, 236, 216, .05);
}
.orari-calendario .orari-elenco .day {
    font-family: var(--font-titolo);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--crema);
}
.orari-calendario .orari-elenco .hr {
    font-family: var(--font-testo);
    font-size: .85rem;
    color: var(--oro-chiaro);
    font-weight: 500;
    letter-spacing: .02em;
}
.orari-calendario .orari-elenco li.closed {
    justify-content: center;
    opacity: .55;
    padding: .55rem 0;
}
.orari-calendario .orari-elenco li.closed span {
    font-family: var(--font-testo);
    font-size: .65rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--oro);
    font-weight: 700;
}
.orari-calendario .orari-elenco li.oggi {
    background: linear-gradient(90deg, rgba(212, 168, 60, .25) 0%, rgba(212, 168, 60, .05) 100%);
    border-left: 3px solid var(--oro);
    padding-left: .5rem;
}

/* Responsive: su mobile, il centro sparisce e le colonne si impilano */
@media (max-width: 760px) {
    .orari-calendario .orari-split {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
    .orari-calendario .orari-spacer {
        display: none;
    }
    .orari-calendario::after {
        background: linear-gradient(180deg, rgba(42, 19, 64, .55) 0%, rgba(42, 19, 64, .7) 100%);
    }
}
.orari-calendario .container {
    position: relative;
    z-index: 2;
}

/* Header per BORGO (su sfondo crema) */
.sez-borgo .sez-header .occhiello,
.sez-borgo-mosaico .sez-header .occhiello {
    color: var(--viola, #7e4faa);
}
.sez-borgo .sez-header h2,
.sez-borgo-mosaico .sez-header h2 {
    color: var(--viola-deep, #2A1340);
}
.sez-borgo .sez-header h2 em,
.sez-borgo-mosaico .sez-header h2 em {
    color: var(--oro, #c9a14a);
}
.sez-borgo .sez-header p,
.sez-borgo-mosaico .sez-header p {
    color: rgba(42, 19, 64, .8);
}
/* Header per ORARI (su immagine, colori chiari) */
.orari-calendario .sez-header .occhiello { color: var(--oro-chiaro, #ffd773); }
.orari-calendario .sez-header h2 { color: var(--crema, #f4ecd8); }
.orari-calendario .sez-header h2 em { color: var(--oro, #c9a14a); }
.orari-calendario .sez-header p { color: rgba(244, 236, 216, .9); }

/* ORARI — tabella spostata a destra, lascia spazio al cartello "OPEN" */
.orari-calendario .orari-lista {
    background: rgba(42, 19, 64, .85);
    border: 1px solid rgba(212, 168, 60, .35);
    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    max-width: 620px;
    margin: 0 0 2rem auto;
}
/* Su schermi stretti la tabella torna centrata */
@media (max-width: 880px) {
    .orari-calendario .orari-lista {
        max-width: 100%;
        margin: 0 auto 2rem;
    }
    .orari-calendario::before {
        background-position: center;
    }
}
.orari-calendario .orari-riga {
    border-bottom-color: rgba(244, 236, 216, .12);
}
.orari-calendario .orari-riga:hover {
    background: rgba(244, 236, 216, .08);
}
/* Testi e accenti dentro la tabella restano chiari (oro/crema) come prima */
.orari-calendario .cal-nota {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 500;
}
.orari-calendario .cal-nota a {
    color: #ffffff;
    font-weight: 600;
}





/* ==========================================================
   GALLERIA PIATTI — carosello orizzontale subito sotto al menù.
   Stessa palette del menù (viola scuro + cornici oro + caption
   crema italic) così le due sezioni dialogano visivamente.
   ========================================================== */

.sez-galleria-piatti {
    background: var(--viola-deep, #2A1340);
    padding: 4rem 0 5rem;
    position: relative;
}
/* Titolo sezione in linea con il resto del sito */
.sez-galleria-piatti .sez-header {
    text-align: center;
    margin-bottom: 2.4rem;
}
.sez-galleria-piatti .sez-header .occhiello {
    color: var(--oro, #c9a14a);
}
.sez-galleria-piatti .sez-header h2 {
    color: var(--crema, #f4ecd8);
    font-size: clamp(2rem, 4vw + 1rem, 3.4rem);
    line-height: 1.1;
}
.sez-galleria-piatti .sez-header h2 em {
    color: var(--oro, #c9a14a);
    font-style: italic;
}
.sez-galleria-piatti .sez-header-sub {
    color: rgba(244, 236, 216, .7);
    font-family: var(--font-titolo, 'Cormorant Garamond');
    font-style: italic;
    font-size: 1.05rem;
    margin-top: .6rem;
}

/* Contenitore del carosello con frecce ai due lati */
.carosello-piatti {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 3.5rem;
}

/* Area scrollabile orizzontalmente con snap.
   Le scrollbar native sono nascoste: si naviga con frecce o swipe. */
.carosello-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* IE/Edge legacy */
    -webkit-overflow-scrolling: touch;
    padding: 1rem .25rem 1.5rem;
}
.carosello-viewport::-webkit-scrollbar { display: none; }

/* Track interno: flex orizzontale con gap tra le card */
.carosello-track {
    display: flex;
    gap: 1.5rem;
}

/* Singola card piatto: cornice oro su sfondo viola, foto cropped 4:3,
   didascalia italic sotto. Senza rotazioni (a differenza delle polaroid),
   look pulito da menù di sala. */
.piatto-card {
    /* Card più contenute: la foto è verticale, quindi una larghezza ridotta
       tiene l'altezza sotto controllo. */
    flex: 0 0 250px;
    scroll-snap-align: start;
    margin: 0;
    background: linear-gradient(160deg,
        rgba(126, 79, 170, .25) 0%,
        rgba(42, 19, 64, .55) 100%);
    border: 1px solid rgba(212, 168, 60, .35);
    border-radius: 8px;
    overflow: hidden;
    box-shadow:
        0 14px 28px -12px rgba(0, 0, 0, .6),
        inset 0 0 0 1px rgba(212, 168, 60, .12);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.piatto-card:hover {
    transform: translateY(-6px);
    border-color: rgba(212, 168, 60, .65);
    box-shadow:
        0 22px 36px -14px rgba(0, 0, 0, .7),
        inset 0 0 0 1px rgba(212, 168, 60, .25);
}

/* Foto: ratio 4:3 fissa così le card hanno tutte la stessa altezza */
.piatto-foto {
    /* Cornice verticale (3:4): le foto dei piatti sono quasi tutte in formato
       ritratto, così entrano molto meglio e vengono ritagliate molto meno. */
    aspect-ratio: 3 / 4;
    overflow: hidden;
    position: relative;
}
.piatto-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
    filter: saturate(1.05);
}
.piatto-card:hover .piatto-foto img {
    transform: scale(1.06);
}

/* Didascalia: stile coerente con i titoli del menù (italic crema su viola) */
.piatto-label {
    font-family: var(--font-titolo, 'Cormorant Garamond');
    font-style: italic;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--crema, #f4ecd8);
    text-align: center;
    padding: 1rem 1.2rem 1.2rem;
    letter-spacing: .005em;
    border-top: 1px solid rgba(212, 168, 60, .25);
    background: rgba(0, 0, 0, .15);
}

/* Frecce stile "menù di sala": minimal, solo chevron oro */
.carosello-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: var(--oro, #c9a14a);
    font-family: var(--font-titolo, 'Cormorant Garamond');
    font-size: 2.6rem;
    width: 40px;
    height: 40px;
    cursor: pointer;
    opacity: .75;
    transition: opacity .25s ease, color .25s ease, transform .25s ease;
    z-index: 5;
    line-height: 1;
    padding: 0;
}
.carosello-nav:hover:not(:disabled) {
    opacity: 1;
    color: var(--oro-chiaro, #ffd773);
    transform: translateY(-50%) scale(1.15);
}
.carosello-nav:disabled {
    opacity: .2;
    cursor: not-allowed;
}
.carosello-prev { left: 0; }
.carosello-next { right: 0; }

/* Responsive: card via via più piccole, così le foto verticali non diventano
   enormi e su mobile se ne vede più di una (si scorre col dito). */
@media (max-width: 880px) {
    .piatto-card { flex: 0 0 220px; }
    .carosello-track { gap: 1.1rem; }
    .carosello-piatti { padding: 0 2.4rem; }
}
@media (max-width: 600px) {
    .sez-galleria-piatti { padding: 3rem 0 3.5rem; }
    /* Niente più card a tutta larghezza: dimensione contenuta + peek della
       successiva, così l'immagine resta piccola anche sul telefono. */
    .piatto-card { flex: 0 0 200px; }
    .carosello-track { gap: 1rem; }
    .carosello-piatti { padding: 0 1.8rem; }
    .carosello-nav { width: 30px; height: 30px; font-size: 1.9rem; }
    .piatto-label { font-size: .95rem; padding: .75rem .9rem .9rem; }
}


/* ==========================================================
   (rimossa la foto di gruppo dalla sezione Staff — ora la foto della
   famiglia vive solo nella sezione Tradizione) */


/* ==========================================================
   VALORI / "Tradizione" — foto con doppio bordo strappato viola
   ==========================================================
   Striscia "TRADIZIONE" viola a sinistra + foto nella colonna destra
   con bordo "strappato/liquido" viola sopra e sotto, e testo nel blocco
   viola sotto la foto. */

.valori-foto-piena .jones-split-dark {
    background: var(--viola-deep, #2A1340) !important;
    padding-top: 1.2rem !important;
    padding-bottom: 1.2rem !important;
}
.valori-foto-piena.jones-split { min-height: auto; }

/* Colonna destra: contiene l'area editoriale "about" */
.valori-foto-piena .jones-split-light {
    position: relative;
    display: block;
    background: var(--viola-deep, #2A1340) !important;
}

/* Area editoriale */
.valori-about {
    position: relative;
    padding: 2.6rem clamp(1.4rem, 3vw, 3rem) 2.4rem;
    overflow: hidden;
    isolation: isolate;
}

/* Parole-watermark sfumate sullo sfondo */
.valori-ghost {
    position: absolute;
    z-index: 0;
    font-family: var(--font-testo, 'Inter');
    font-weight: 900;
    text-transform: lowercase;
    color: rgba(244, 236, 216, .05);
    letter-spacing: -.02em;
    line-height: .8;
    pointer-events: none;
    user-select: none;
}
.valori-ghost-top { top: .4rem; left: -.5rem; font-size: clamp(4rem, 11vw, 9rem); }
.valori-ghost-bottom { bottom: -.8rem; right: 1rem; font-size: clamp(4rem, 11vw, 9rem); }

/* Etichette sezione (alto/basso) */
.valori-label-top,
.valori-label-bot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: 1rem;
}
.valori-label-top { margin-bottom: 1.8rem; }
.valori-label-bot { margin-top: 2rem; }
.valori-label-top b,
.valori-label-bot b {
    font-family: var(--font-testo, 'Inter');
    font-weight: 700; font-size: 1rem; letter-spacing: .45em;
    text-transform: uppercase; color: var(--crema, #f4ecd8);
}
.valori-label-top span,
.valori-label-bot span {
    font-family: var(--font-testo, 'Inter');
    font-weight: 700; font-size: 1rem; letter-spacing: .4em;
    text-transform: uppercase; color: rgba(244, 236, 216, .25);
}

/* Riga centrale: titolo a sinistra + piccola foto a destra */
.valori-mid {
    position: relative;
    z-index: 1;
    display: grid;
    /* Più spazio alla foto (a destra) senza allargare la sezione: si toglie
       larghezza alla colonna del titolo. */
    grid-template-columns: 1fr 1.15fr;
    gap: 2.5rem;
    align-items: center;
    margin-bottom: .6rem;   /* descrizione più vicina/alzata */
}
.valori-titolo-blocco h2 {
    font-family: var(--font-titolo, 'Cormorant Garamond');
    font-style: italic; font-weight: 600;
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    color: #fff; line-height: 1.1;
}
.valori-titolo-blocco h2 em { color: var(--oro-chiaro, #ffd773); font-style: italic; }
.valori-hash {
    font-family: var(--font-testo, 'Inter');
    font-weight: 600; font-size: .95rem;
    color: rgba(244, 236, 216, .6); margin-top: .4rem; letter-spacing: .02em;
}
.valori-about-foto {
    position: relative;          /* contesto per il "post-it" appiccicato sopra */
    justify-self: stretch;       /* riempie tutta la sua colonna della griglia */
    max-width: none;
    width: 100%; margin: 0;
    border: 1px solid rgba(212, 168, 60, .3);
    border-radius: 12px;         /* angoli stondati */
    overflow: hidden;            /* clippa la foto agli angoli arrotondati */
    box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .6);
}
.valori-about-foto img {
    width: 100%; height: auto; display: block;
    filter: saturate(.7) brightness(.92);
}

/* Colonna sinistra: titolo + descrizione impilati */
.valori-testo-col {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

/* "Post-it" amici: piccola foto appiccicata in un angolo della foto principale,
   con cornice bianca da polaroid, leggera rotazione e ombra che la stacca. */
.valori-postit {
    position: absolute;
    left: 16px;
    bottom: 16px;
    width: 118px;
    aspect-ratio: 1 / 1;
    background: #fff;                 /* bordo bianco da bigliettino/polaroid */
    padding: 6px;
    border-radius: 3px;
    box-shadow: 0 10px 20px -6px rgba(0, 0, 0, .55);
    transform: rotate(-5deg);
    transform-origin: center;
    z-index: 2;
}
.valori-postit img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    border-radius: 1px;
}

/* Paragrafo storia (dentro la colonna testo, sotto al titolo) */
.valori-corpo { position: relative; z-index: 1; max-width: 480px; }
.valori-corpo p {
    font-family: var(--font-testo, 'Inter');
    font-size: .92rem; line-height: 1.75;
    color: rgba(244, 236, 216, .82); text-align: justify;
}

/* Responsive: foto sotto il titolo, padding ridotto */
@media (max-width: 760px) {
    .valori-mid { grid-template-columns: 1fr; gap: 1.2rem; }
    .valori-about { padding: 1.8rem 1.4rem; }

    /* Su mobile niente post-it sovrapposto: le due foto (staff + amici) si
       affiancano semplicemente una accanto all'altra. Tolgo cornice/ombra dal
       contenitore e le rimetto sulle singole immagini. */
    .valori-about-foto {
        justify-self: start;
        max-width: none;
        display: flex;
        align-items: center;
        gap: .6rem;
        overflow: visible;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .valori-about-foto > img {
        flex: 1 1 0;
        min-width: 0;
        border: 1px solid rgba(212, 168, 60, .3);
        border-radius: 12px;
    }
    /* Il "post-it" torna un'immagine normale affiancata: niente posizione
       assoluta, niente rotazione, niente cornice bianca. */
    .valori-postit {
        position: static;
        transform: none;
        flex: 0 0 38%;
        width: auto;
        padding: 0;
        background: transparent;
        box-shadow: none;
        border: 1px solid rgba(212, 168, 60, .3);
        border-radius: 12px;
        overflow: hidden;
    }
    .valori-postit img { border-radius: 12px; }
}


/* ==========================================================
   IL BORGO — stile editoriale (come Tradizione) + griglia 2 a 2
   ========================================================== */
/* Padding del borgo a 0: lo spazio lo dà .valori-about. Sfondo viola pieno
   (sia striscia che colonna) come Tradizione, così il testo crema si legge. */
.jones-split#borgo .jones-split-light { padding: 0 !important; }
.jones-split#borgo .jones-split-dark,
.jones-split#borgo .jones-split-light {
    background: var(--viola-deep, #2A1340) !important;
}
.jones-split.jones-borgo { min-height: auto; }

/* Header: titolo + intro */
.borgo-head { position: relative; z-index: 1; max-width: 620px; margin-bottom: 1.8rem; }
.borgo-head h2 {
    font-family: var(--font-titolo, 'Cormorant Garamond');
    font-style: italic; font-weight: 600;
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    color: #fff; line-height: 1.1; margin-bottom: .7rem;
}
.borgo-head h2 em { color: var(--oro-chiaro, #ffd773); font-style: italic; }
.borgo-head p {
    font-family: var(--font-testo, 'Inter');
    font-size: .92rem; line-height: 1.7; color: rgba(244, 236, 216, .82);
}

/* Griglia: le 4 mete tutte in fila su una riga sola (4 colonne) */
.borgo-griglia {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.8rem;
}
.borgo-card {
    display: flex;
    flex-direction: column;
    background: rgba(126, 79, 170, .12);
    border: 1px solid rgba(212, 168, 60, .18);
    border-radius: 12px;
    overflow: hidden;
    transition: transform .35s ease, border-color .35s ease;
}
.borgo-card:hover { transform: translateY(-4px); border-color: rgba(212, 168, 60, .5); }
.borgo-card-foto { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.borgo-card-foto img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: saturate(.85);
    transition: transform .5s ease;
}
.borgo-card:hover .borgo-card-foto img { transform: scale(1.05); }
.borgo-card-testo { padding: .7rem .85rem .9rem; }
.borgo-card-testo h4 {
    font-family: var(--font-titolo, 'Cormorant Garamond');
    font-style: italic; font-weight: 600; font-size: 1.05rem;
    color: var(--crema, #f4ecd8); margin-bottom: .2rem; line-height: 1.15;
}
.borgo-card-testo p {
    font-family: var(--font-testo, 'Inter');
    /* Descrizioni più evidenti: corpo più grande e testo più chiaro/leggibile. */
    font-size: .9rem; line-height: 1.5; color: rgba(244, 236, 216, .95);
}

/* Nota "Lo sapevi?" */
.borgo-nota {
    position: relative; z-index: 1;
    font-family: var(--font-titolo, 'Cormorant Garamond');
    font-style: italic; font-size: 1.2rem; line-height: 1.55;
    color: rgba(244, 236, 216, .8);
    border-top: 1px solid rgba(212, 168, 60, .25);
    padding-top: 1rem; max-width: 620px;
}
.borgo-nota strong { color: var(--oro, #c9a14a); font-style: normal; }
.borgo-nota em { color: var(--oro-chiaro, #ffd773); font-style: italic; }

@media (max-width: 760px) {
    .borgo-griglia { grid-template-columns: 1fr 1fr; }
}
/* Mobile: le card "Cose da vedere" diventano una fila orizzontale scorrevole
   con lo swipe (scroll-snap), invece della griglia. */
@media (max-width: 560px) {
    .borgo-griglia {
        display: flex;
        grid-template-columns: none;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;   /* scorrimento fluido su iOS */
        gap: .9rem;
        padding-bottom: .4rem;
        scrollbar-width: none;               /* Firefox: niente scrollbar */
    }
    .borgo-griglia::-webkit-scrollbar { display: none; }   /* WebKit: idem */
    .borgo-card {
        /* Ogni card occupa ~72% della larghezza: si vede un assaggio della
           successiva, come invito a scorrere. */
        flex: 0 0 72%;
        scroll-snap-align: center;
    }
}


/* ==========================================================
   DICONO DI NOI — a tutta larghezza, stile editoriale (no verticale)
   ========================================================== */
.sez-recensioni {
    background: var(--viola-deep, #2A1340);
    padding: 3rem 0;
}
.sez-recensioni .valori-about { padding: 1rem 0; text-align: center; }
/* Parola-watermark "recensioni" centrata dietro al titolo */
.sez-recensioni .valori-ghost-top {
    top: 50%; left: 0; right: 0;
    transform: translateY(-50%);
    text-align: center;
    font-size: clamp(3.5rem, 10vw, 8rem);
}
.sez-recensioni .borgo-head { margin: 0 auto 1.4rem; max-width: none; }
.sez-recensioni .slider {
    position: relative; z-index: 1;
    margin: 0 auto; max-width: 680px; text-align: center;
}
.sez-recensioni .slider-track { min-height: 170px; }
.sez-recensioni .slider-dots { justify-content: center; }


/* ============================================================
   MOBILE REFINEMENT — affinamenti finali per la visione da telefono.
   Blocco aggiuntivo posto in fondo così vince sulle regole precedenti
   dove serve. Suddiviso per sezione, così se un domani vogliamo
   toccare solo una parte del sito non dobbiamo cercare in giro.
   Breakpoint principali usati:
     - 760px  → tablet in portrait / smartphone in landscape
     - 560px  → smartphone medi (iPhone standard)
     - 400px  → smartphone piccoli / SE
   ============================================================ */

/* ---- Base mobile: evita gli overflow orizzontali e allarga i
   touch target di link/pulsanti dentro la nav. -------------- */
@media (max-width: 760px) {
    /* Alcuni contenitori con transform / decorazioni assolute possono
       generare pixel oltre il bordo destro: qui li teniamo dentro. */
    html, body { max-width: 100%; overflow-x: hidden; }

    /* Padding container leggermente ridotto così i contenuti hanno
       più aria disponibile su schermi stretti. */
    .container { padding: 0 1.1rem; }

    /* La navbar mobile a tendina aveva link poco alti da cliccare:
       li rendo veri "bottoni" toccabili col dito (>= 44px). */
    .nav-menu.aperto .nav-link {
        padding: .8rem 0;
        font-size: .95rem;
    }
    .nav-toggle { width: 44px; height: 44px; }
}

/* ---- HERO OLIVA: tarature per iPhone-size. Il video di sfondo
   resta attivo (non lo nascondiamo su mobile). --------------- */
@media (max-width: 560px) {
    .hero.hero-oliva { min-height: 92vh; }
    .hero-oliva-content { padding: 6rem 1rem 3.5rem; }
    .hero-oliva-giglio { width: 78px; margin-bottom: .8rem; }
    .hero-oliva-titolo {
        /* Titolone: scala controllata così non "sfora" mai lateralmente */
        font-size: clamp(2.6rem, 15vw, 3.6rem);
    }
    .hero-oliva-sub { font-size: .88rem; padding: 0 .4rem; }
    .hero-oliva-claim {
        font-size: .98rem;
        line-height: 1.5;
        padding: 0 .3rem;
    }
    /* Bottoni full-width così sono facili da premere col pollice */
    .hero-oliva-cta { width: 100%; }
    .hero-oliva-btn {
        min-height: 48px;
        width: 100%;
        font-size: .72rem;
    }
    /* Freccia "scroll" più piccola per non rubare spazio */
    .hero-oliva-scroll { bottom: 1rem; }
}

/* ---- MENÙ SFOGLIABILE (mobile) ---------------------------------
   Nessun override aggiuntivo: il menù giornale mantiene lo stile e il
   comportamento originali (aspect-ratio, 3D perspective, frecce laterali,
   indicatori sotto). Le regole responsive originali stanno più in alto
   nel file, dentro la sezione "MENÙ SFOGLIABILE — stile giornale antico"
   (~riga 631) e nei suoi @media (max-width: 720px) / (max-width: 480px).
   ----------------------------------------------------------------- */

/* ---- ORARI: colonne pranzo/cena impilate. Piccoli affinamenti
   perché sotto i 480 lo spazio è davvero poco. ------------ */
@media (max-width: 560px) {
    .orari-calendario { padding: 3rem 0 !important; }
    .orari-calendario .orari-split { gap: 1.6rem; }
    .orari-calendario .orari-elenco .day { font-size: 1rem; }
    .orari-calendario .orari-elenco .hr { font-size: .82rem; }
    .orari-calendario .orari-fascia {
        font-size: .62rem;
        letter-spacing: .3em;
    }
    .cal-nota { font-size: .9rem; }
}

/* ---- JONES-SPLIT (Tradizione / Menù headline / Borgo): sotto gli
   880px già diventa una colonna sola, ma su smartphone i padding
   erano ancora un po' larghi. ----------------------------- */
@media (max-width: 560px) {
    .jones-split-light { padding: 2rem 1.2rem; }
    .jones-split-dark { padding: 1.6rem 1rem; min-height: 110px; }
    .jones-split-vert { font-size: clamp(1.8rem, 8.5vw, 2.6rem); }
    .jones-paragraph { font-size: .98rem; line-height: 1.55; }
    .jones-eyebrow { font-size: .65rem; letter-spacing: .3em; }
}

/* ---- GALLERIA PIATTI (carosello signature): sotto i 480 le card
   erano un filo grandi, riduco un altro po' e restringo il padding
   laterale così le frecce non "mangiano" la card visibile. -- */
@media (max-width: 480px) {
    .carosello-piatti { padding: 0 1.2rem; }
    .piatto-card { flex: 0 0 178px; }
    .piatto-label {
        font-size: .88rem;
        padding: .6rem .7rem .75rem;
    }
    /* Frecce fuori dalla card: le porto molto piccole,
       tanto la navigazione principale è lo swipe touch. */
    .carosello-nav {
        width: 26px; height: 26px;
        font-size: 1.5rem;
    }
    .sez-galleria-piatti .sez-header h2 { font-size: clamp(1.8rem, 7vw, 2.4rem); }
}

/* ---- CONTATTI: numero, orari, mappa in colonna. La mappa non deve
   diventare uno scudo enorme che copre tutto lo schermo. ---- */
@media (max-width: 560px) {
    .contatti { padding: 3.5rem 0 !important; }
    .contatti-call { padding: 1.6rem 1rem; }
    .contatti-numero { font-size: 1.15rem; }
    .contatti .info-mappa iframe { min-height: 260px; }
    .contatti-orari-giorni { font-size: .9rem; }
    .contatti-orari-fasce { font-size: 1.02rem; }
    .contatti-orari-chiuso { font-size: .82rem; }
    .btn-chiama.btn-chiama-grande {
        width: 100%;
        min-height: 52px;
        padding: 1rem 1.2rem;
        font-size: .88rem;
    }
}

/* ---- FOOTER: dopo la rimozione della nav interna, l'inner ha bisogno
   di un po' meno respiro verticale e i copyright vanno a capo puliti. */
@media (max-width: 560px) {
    .footer { padding: 2.8rem 0 1.5rem; }
    .footer-inner { gap: .9rem; }
    .footer-claim { font-size: 1rem; }
    .footer-copy {
        font-size: .68rem;
        line-height: 1.6;
        padding-top: 1.2rem;
    }
}

/* ---- FIX GENERALI: alcune sezioni con animazioni/decorazioni
   assolute potevano creare "code" oltre la viewport su mobile.
   Qui ne facciamo un ultimo giro di pulizia. ---------------- */
@media (max-width: 760px) {
    /* Titoli di sezione: garantisce che gli em in italico non si
       spezzino male occupando due righe con orfani. */
    .sez-header h2 { font-size: clamp(1.9rem, 7vw, 2.6rem); }
    .sez-header p, .sez-header-sub { font-size: .95rem; }

    /* La marquee jones-marquee (se presente) non deve indurre scroll */
    .jones-marquee { overflow: hidden; }

    /* Le tessere/borgo card manteniamo scrollabili orizzontalmente
       (già gestite sopra) — qui rinforzo lo scroll fluido iOS */
    .carosello-viewport { -webkit-overflow-scrolling: touch; }
}