/* ============================================================
   PALIO DELLA MANNAJA 2026 — styles.css  (v2 — Premium)
   Struttura:
   0.  Reset, variabili, base
   1.  Tipografia & testo
   2.  Layout utilities, sezioni, ornamenti
   3.  Skip link
   4.  Navigazione
   5.  Hero
   6.  Anima di Pietralunga
   7.  Il Miracolo
   8.  Programma / Timeline
   9.  Vivi il Palio — Card
   10. Informazioni pratiche
   11. FAQ
   12. Resta aggiornato
   13. Footer
   14. Back to top
   15. Placeholder immagini
   16. Media queries
============================================================ */

/* ============================================================
   0. RESET & VARIABILI
   PERSONALIZZA: modifica i colori qui per cambiare l'intera palette
============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Protegge l'attributo HTML hidden da override accidentali di display */
[hidden] { display: none !important; }

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

:root {
    /* ── Palette medievale ── */
    --borgogna: #6b1a2a;
    --borgogna-dk: #3e0e18;
    --borgogna-md: #54162a;
    --gold: #c9a84c;
    --gold-lt: #e8d080;
    --gold-dk: #9e7e2e;
    --gold-glow: rgba(201, 168, 76, 0.35);
    --pergamena: #f5edd8;
    --pergamena-dk: #ede0c4;
    --pergamena-ddk: #e2d0a8;
    --pietra: #3e362c;
    --pietra-lt: #6e6050;
    --pietra-xlt: #a09080;
    --bosco: #2a4226;
    --bosco-lt: #3d6138;
    --nero: #100c08;
    --nero-soft: #1a1410;
    --bianco: #ffffff;

    /* ── Gradients riutilizzabili ── */
    --grad-gold: linear-gradient(
        135deg,
        var(--gold-lt) 0%,
        var(--gold) 50%,
        var(--gold-dk) 100%
    );
    --grad-borgogna: linear-gradient(
        160deg,
        var(--borgogna) 0%,
        var(--borgogna-dk) 100%
    );
    --grad-hero:
        radial-gradient(
            ellipse 90% 70% at 15% 25%,
            rgba(107, 26, 42, 0.75) 0%,
            transparent 55%
        ),
        radial-gradient(
            ellipse 70% 50% at 85% 75%,
            rgba(42, 66, 38, 0.6) 0%,
            transparent 50%
        ),
        radial-gradient(
            ellipse at center,
            transparent 35%,
            rgba(10, 5, 3, 0.85) 100%
        ),
        linear-gradient(
            155deg,
            #0f0a07 0%,
            #1f0c10 30%,
            #0c1408 60%,
            #160a06 100%
        );

    /* ── Tipografia ── */
    --font-display: "Cinzel", Georgia, "Times New Roman", serif;
    --font-body: "Lora", Georgia, serif;

    /* ── Spaziatura modulare ── */
    --sp-2xs: 0.25rem;
    --sp-xs: 0.5rem;
    --sp-sm: 1rem;
    --sp-md: 2rem;
    --sp-lg: 3.5rem;
    --sp-xl: 5.5rem;
    --sp-2xl: 8rem;

    /* ── Bordi ── */
    --r-xs: 3px;
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 20px;
    --r-xl: 32px;

    /* ── Ombre ── */
    --sh-xs: 0 1px 4px rgba(0, 0, 0, 0.1);
    --sh-sm: 0 2px 10px rgba(0, 0, 0, 0.14);
    --sh-md: 0 4px 24px rgba(0, 0, 0, 0.2);
    --sh-lg: 0 8px 48px rgba(0, 0, 0, 0.28);
    --sh-xl: 0 16px 80px rgba(0, 0, 0, 0.38);
    --sh-gold: 0 4px 24px var(--gold-glow);

    /* ── Transizioni ── */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --t-fast: 0.18s;
    --t-med: 0.32s;
    --t-slow: 0.5s;

    /* ── Layout ── */
    --max-w: 1160px;
    --max-w-narrow: 820px;
}

/* ============================================================
   1. TIPOGRAFIA & BASE
============================================================ */
body {
    font-family: var(--font-body);
    color: var(--pietra);
    background: var(--pergamena);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden; /* previene scroll orizzontale da qualsiasi overflow */
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    line-height: 1.15;
    color: var(--nero-soft);
    letter-spacing: 0.01em;
}

a {
    color: var(--borgogna);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--t-fast) var(--ease);
}
a:hover {
    color: var(--borgogna-dk);
}
a:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 2px;
}

p {
    margin-bottom: var(--sp-sm);
}
p:last-child {
    margin-bottom: 0;
}

blockquote {
    border-left: 3px solid var(--gold);
    padding: var(--sp-sm) var(--sp-md);
    font-style: italic;
    color: var(--pietra-lt);
    background: rgba(201, 168, 76, 0.06);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* ============================================================
   2. LAYOUT, SEZIONI, ORNAMENTI
============================================================ */
.container {
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--sp-md);
}

/* Sezione generica */
.section {
    padding: var(--sp-xl) 0;
}
.section--light {
    background: var(--pergamena);
}
.section--tinted {
    background: var(--pergamena-dk);
}
.section--dark {
    background: var(--nero-soft);
}
.section--borgogna {
    background: var(--borgogna-dk);
}
.section--crimson {
    background: var(--borgogna);
}

/* ── section__label su sfondi scuri — regola globale ─────────
   Copre le classi utility e tutte le sezioni borgogna/nero.
   Le sezioni specifiche (vivere, section-aggiornamenti…) che
   hanno già un override più preciso continueranno a vincere
   per specificità.
──────────────────────────────────────────────────────────── */
.section--dark .section__label,
.section--borgogna .section__label,
.section--crimson .section__label {
    background: rgba(201, 168, 76, 0.13);
    border-color: rgba(201, 168, 76, 0.38);
    color: var(--gold-lt);
}
.section--dark .section__label::before,
.section--dark .section__label::after,
.section--borgogna .section__label::before,
.section--borgogna .section__label::after,
.section--crimson .section__label::before,
.section--crimson .section__label::after {
    color: var(--gold);
}

/* Label di sezione — piccolo badge */
.section__label {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-lt);
    background: linear-gradient(90deg, var(--borgogna-md), var(--borgogna-dk));
    border: 1px solid rgba(201, 168, 76, 0.3);
    padding: 0.3em 1em;
    border-radius: 100px;
    margin-bottom: var(--sp-sm);
}
.section__label::before,
.section__label::after {
    content: "·";
    color: var(--gold);
}

/* Titolo di sezione */
.section__title {
    font-size: clamp(1.9rem, 4.5vw, 3rem);
    font-weight: 700;
    color: var(--borgogna-dk);
    margin-bottom: var(--sp-xs);
}
.section__title::after {
    content: "";
    display: block;
    height: 2px;
    width: 140px;
    margin-top: 0.7rem;
    background: linear-gradient(
        to right,
        var(--borgogna),
        var(--gold),
        transparent
    );
    border-radius: 2px;
}

.section__subtitle {
    font-size: 1.05rem;
    color: var(--pietra-lt);
    margin-bottom: var(--sp-md);
    max-width: 60ch;
}

/* ── Ornamento SVG divisore ─────────────────────────────── */
.ornament-divider {
    display: block;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    padding: var(--sp-xs) 0;
}
.ornament-divider svg {
    display: block;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    height: 32px;
    color: var(--gold);
    opacity: 0.55;
}
/* Su sezione chiara (pergamena) */
.ornament-divider--on-light {
    background: var(--pergamena);
}
.ornament-divider--on-light svg {
    color: var(--borgogna);
    opacity: 0.25;
}
/* Su sezione scura (nero) */
.ornament-divider--on-dark {
    background: var(--nero-soft);
}
.ornament-divider--on-dark svg {
    color: var(--gold-lt);
    opacity: 0.45;
}
/* Su sezione tinted (pergamena-dk) */
.ornament-divider--on-tinted {
    background: var(--pergamena-dk);
}
.ornament-divider--on-tinted svg {
    color: var(--borgogna);
    opacity: 0.2;
}

/* ── Sfondo pattern SVG ──────────────────────────────────── */
/* Usato come pseudo-elemento su sezioni dark */
.pattern-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30Z' fill='none' stroke='rgba(201%2C168%2C76%2C0.04)' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 60px 60px;
}

/* ============================================================
   3. SKIP LINK
============================================================ */
.skip-link {
    position: absolute;
    top: -120px;
    left: 1rem;
    z-index: 9999;
    background: var(--borgogna-dk);
    color: var(--gold-lt);
    padding: 0.6em 1.6em;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    text-decoration: none;
    border: 2px solid var(--gold);
    border-top: none;
    transition: top 0.2s var(--ease-out);
}
.skip-link:focus {
    top: 0;
}

/* ============================================================
   4. NAVIGAZIONE
============================================================ */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition:
        background var(--t-med) var(--ease),
        box-shadow var(--t-med) var(--ease);
}
.nav.nav--scrolled {
    background: rgba(22, 8, 14, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 1px 0 rgba(201, 168, 76, 0.2),
        var(--sh-md);
}
.nav__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--sp-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 66px;
}
.nav__brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--gold-lt);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    transition: color var(--t-fast) var(--ease);
}
.nav__brand:hover {
    color: var(--gold);
}
.nav__brand-icon {
    width: 1.3rem;
    height: 1.3rem;
    object-fit: contain;
    display: block;
}

.nav__menu {
    display: flex;
    list-style: none;
    gap: 1.6rem;
    align-items: center;
}
.nav__link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.25em 0;
    border-bottom: 1px solid transparent;
    transition:
        color var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease);
}
.nav__link:hover,
.nav__link:focus,
.nav__link--active {
    color: var(--gold-lt);
    border-color: var(--gold);
}

/* ── Dropdown "Vivi il Palio" — desktop ── */
.nav__item--dropdown {
    position: relative;
    /* Nessun display:flex qui — il <li> si comporta come gli altri nel flex row */
}
.nav__dropdown-toggle {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    /* inline-flex: si allinea alla baseline come i <a> nella stessa riga flex */
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    gap: 0.3em;
}
.nav__dropdown-arrow {
    display: inline-block;
    font-size: 0.72em;
    line-height: 1;
    margin-top: 1px;
    transition: transform 0.22s var(--ease);
    will-change: transform;
}
.nav__item--dropdown:hover .nav__dropdown-arrow,
.nav__item--dropdown:focus-within .nav__dropdown-arrow,
.nav__item--dropdown.nav__item--open .nav__dropdown-arrow {
    transform: rotate(180deg);
}
.nav__dropdown {
    list-style: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 190px;
    background: rgba(22, 8, 14, 0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(201, 168, 76, 0.22);
    border-radius: var(--r-sm);
    padding: 0.35rem 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
    z-index: 200;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}
/* piccolo triangolino gold */
.nav__dropdown::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    width: 8px;
    height: 8px;
    background: rgba(22, 8, 14, 0.98);
    border-top: 1px solid rgba(201, 168, 76, 0.22);
    border-left: 1px solid rgba(201, 168, 76, 0.22);
    transform: translateX(-50%) rotate(45deg);
}
/* Ponte invisibile che copre il gap tra il bottone e il dropdown:
   quando il mouse è in quella zona rimane sull'elemento e il hover non si perde */
.nav__dropdown::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 12px; /* leggermente più del gap (8px) per sicurezza */
}
.nav__item--dropdown:hover .nav__dropdown,
.nav__item--dropdown:focus-within .nav__dropdown,
.nav__item--dropdown.nav__item--open .nav__dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.nav__dropdown-link {
    display: block;
    padding: 0.65em 1.4em;
    color: rgba(245, 237, 216, 0.7);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.nav__dropdown-link:hover,
.nav__dropdown-link:focus {
    color: var(--gold-lt);
    background: rgba(201, 168, 76, 0.08);
    outline: none;
}
.nav__dropdown-link--active {
    color: var(--gold);
    border-left: 2px solid var(--gold);
    padding-left: calc(1.4em - 2px);
}

/* CTA link in nav */
.nav__link--cta {
    color: var(--gold) !important;
    border: 1px solid rgba(201, 168, 76, 0.45) !important;
    border-radius: 100px;
    padding: 0.3em 1em !important;
    transition:
        background var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease);
}
.nav__link--cta:hover {
    background: rgba(201, 168, 76, 0.12);
    border-color: var(--gold) !important;
}

/* ── Switcher lingua ──────────────────────────────────────── */
.nav__lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    color: var(--gold);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid rgba(201, 168, 76, 0.35);
    border-radius: 100px;
    padding: 0.3em 0.85em;
    transition:
        background var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease);
}
.nav__lang-switch span:first-child {
    font-size: 1.05em;
    line-height: 1;
}
.nav__lang-switch:hover,
.nav__lang-switch:focus-visible {
    background: rgba(201, 168, 76, 0.12);
    border-color: var(--gold);
    color: var(--gold);
}

/* Contenitore switch mobile + burger — invisibile su desktop (0 impatto sul
   layout attuale: .nav__inner torna ad avere solo 2 figli, brand e menu) */
.nav__mobile-controls {
    display: none;
}

/* Versione persistente mobile (accanto al burger) — nascosta su desktop */
.nav__lang-switch--mobile {
    display: none;
    border: none;
    padding: 0.4em 0.3em;
}
.nav__lang-switch--mobile span:first-child {
    font-size: 1.75rem;
}

/* Burger */
.nav__burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}
.nav__burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--gold-lt);
    border-radius: 2px;
    transition:
        transform var(--t-med) var(--ease),
        opacity var(--t-med) var(--ease);
}
.nav__burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav__burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.nav__burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   5. HERO
   PERSONALIZZA: aggiungi la tua foto sostituendo il CSS background con:
   background: url('images/hero.jpg') center/cover no-repeat;
   e aumenta l'opacità di .hero__overlay a .6
============================================================ */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    /* Gradiente overlay sopra la foto — modifica le opacità per più/meno scurimento */
    background:
        radial-gradient(ellipse 90% 70% at 15% 25%, rgba(107,26,42,.75) 0%, transparent 55%),
        radial-gradient(ellipse 70% 50% at 85% 75%, rgba(42,66,38,.6) 0%, transparent 50%),
        radial-gradient(ellipse at center, transparent 35%, rgba(10,5,3,.85) 100%),
        linear-gradient(155deg, rgba(15,10,7,.55) 0%, rgba(31,12,16,.55) 50%, rgba(22,10,6,.55) 100%),
        url("images/hero.jpg") center/cover no-repeat;
    background-color: #0f0a07;
}

/* Texture diagonale sottile in overlay */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 80L80 0M-10 10L10-10M70 90L90 70' stroke='rgba(201%2C168%2C76%2C0.03)' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 80px 80px;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse at center bottom,
            rgba(10, 5, 3, 0.9) 0%,
            transparent 60%
        ),
        radial-gradient(
            ellipse at center top,
            rgba(10, 5, 3, 0.7) 0%,
            transparent 50%
        );
    pointer-events: none;
}

/* SVG ornamento a spade incrociate sopra il titolo */
.hero__swords {
    display: block;
    width: 80px;
    height: 80px;
    margin: 0 auto var(--sp-sm);
    opacity: 0.55;
    animation: hero-swords-breathe 6s ease-in-out infinite;
}
@keyframes hero-swords-breathe {
    0%,
    100% {
        opacity: 0.45;
        transform: scale(1);
    }
    50% {
        opacity: 0.65;
        transform: scale(1.05);
    }
}

.hero__content {
    position: relative;
    z-index: 2;
    max-width: 860px;
    /* Padding ridotto: SVG spade rimosso, date visibili senza scrollare */
    padding: calc(var(--sp-lg) + 66px) var(--sp-md) var(--sp-lg);
}

.hero__pretitle {
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: var(--sp-md);
}

.hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 9vw, 6rem);
    font-weight: 900;
    line-height: 0.95;
    color: var(--bianco);
    text-shadow:
        0 2px 40px rgba(0, 0, 0, 0.6),
        0 0 80px rgba(107, 26, 42, 0.4);
    letter-spacing: 0.015em;
    margin-bottom: 0;
}

/* Riga decorativa tra titolo e anno */
.hero__rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    margin: 1rem auto;
    width: 220px;
    color: var(--gold);
    opacity: 0.7;
}
.hero__rule::before,
.hero__rule::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--gold));
}
.hero__rule::before {
    background: linear-gradient(to left, transparent, var(--gold));
}
.hero__rule-diamond {
    width: 8px;
    height: 8px;
    background: var(--gold);
    transform: rotate(45deg);
    flex-shrink: 0;
}

.hero__year {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4.5vw, 2.8rem);
    font-weight: 400;
    color: var(--gold);
    letter-spacing: 0.35em;
    text-shadow: 0 0 30px var(--gold-glow);
    margin-bottom: var(--sp-md);
    /* Shimmer sottile */
    animation: gold-shimmer 5s ease-in-out infinite;
}
@keyframes gold-shimmer {
    0%,
    100% {
        text-shadow: 0 0 20px rgba(201, 168, 76, 0);
    }
    50% {
        text-shadow:
            0 0 40px rgba(201, 168, 76, 0.4),
            0 0 80px rgba(201, 168, 76, 0.12);
    }
}

.hero__subtitle {
    font-size: clamp(1.05rem, 2.5vw, 1.3rem);
    font-style: italic;
    color: rgba(245, 237, 216, 0.85);
    line-height: 1.65;
    margin-bottom: var(--sp-md);
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
}

/* Badge date — sigillo */
.hero__dates {
    display: inline-block;
    text-align: center;
    background: rgba(10, 5, 3, 0.55);
    border: 1px solid rgba(201, 168, 76, 0.45);
    border-radius: var(--r-md);
    padding: 0.75em 2em;
    color: var(--gold-lt);
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    margin-bottom: var(--sp-md);
    backdrop-filter: blur(4px);
}
.hero__dates-main {
    display: block;
}

.hero__cta {
    display: flex;
    gap: var(--sp-sm);
    justify-content: center;
    flex-wrap: wrap;
}

/* Freccia scroll */
.hero__scroll-hint {
    position: absolute;
    bottom: 2.2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    animation: scroll-bounce 2.5s ease-in-out infinite;
    opacity: 0.55;
}
.hero__scroll-hint span {
    font-family: var(--font-display);
    font-size: 0.6rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
}
.hero__scroll-arrow {
    display: block;
    width: 24px;
    height: 24px;
    border-right: 2px solid var(--gold);
    border-bottom: 2px solid var(--gold);
    transform: rotate(45deg);
    margin-top: -8px;
}
@keyframes scroll-bounce {
    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(8px);
    }
}

/* ============================================================
   BOTTONI
============================================================ */
.btn {
    display: inline-block;
    padding: 0.9em 2.2em;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--r-xs);
    cursor: pointer;
    border: 2px solid transparent;
    transition:
        background var(--t-fast) var(--ease),
        color var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease),
        transform var(--t-fast) var(--ease),
        box-shadow var(--t-fast) var(--ease);
    min-height: 48px; /* touch target */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
}
.btn:hover {
    transform: translateY(-2px);
}
.btn:active {
    transform: translateY(0);
}
.btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* Primario — gradiente oro */
.btn--primary {
    background: var(--grad-gold);
    color: var(--borgogna-dk);
    border-color: transparent;
    box-shadow: 0 2px 12px rgba(201, 168, 76, 0.25);
}
.btn--primary:hover {
    box-shadow:
        var(--sh-gold),
        0 6px 20px rgba(201, 168, 76, 0.3);
    color: var(--borgogna-dk);
}

/* Secondario — outline gold su scuro */
.btn--secondary {
    background: transparent;
    color: var(--gold-lt);
    border-color: rgba(232, 208, 128, 0.55);
}
.btn--secondary:hover {
    background: rgba(201, 168, 76, 0.12);
    border-color: var(--gold-lt);
    color: var(--bianco);
    box-shadow: 0 0 20px rgba(201, 168, 76, 0.15);
}

/* Outline borgogna su chiaro */
.btn--outline {
    background: transparent;
    color: var(--borgogna);
    border-color: var(--borgogna);
}
.btn--outline:hover {
    background: var(--borgogna);
    color: var(--bianco);
    box-shadow: var(--sh-md);
}

/* Gold pieno — su sfondo borgogna */
.btn--gold {
    background: var(--grad-gold);
    color: var(--borgogna-dk);
    border-color: transparent;
    box-shadow: 0 2px 12px rgba(201, 168, 76, 0.25);
}
.btn--gold:hover {
    box-shadow: var(--sh-gold);
    color: var(--borgogna-dk);
}

/* Gold outline — su sfondo borgogna */
.btn--gold-outline {
    background: transparent;
    color: var(--gold-lt);
    border-color: rgba(232, 208, 128, 0.55);
}
.btn--gold-outline:hover {
    background: rgba(201, 168, 76, 0.12);
    border-color: var(--gold-lt);
    color: var(--gold-lt);
}

.btn--sm {
    font-size: 0.75rem;
    padding: 0.6em 1.4em;
    min-height: 40px;
}

/* ============================================================
   6. ANIMA DI PIETRALUNGA
============================================================ */
.anima {
    background: var(--pergamena);
}

.anima__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-lg);
    align-items: center;
}

.anima .section__title {
    color: var(--borgogna-dk);
}
/* Etichetta su sfondo pergamena chiaro — allineata al default gold */
.anima .section__label {
    color: var(--gold-lt);
}

.anima__lead {
    font-size: 1.2rem;
    font-style: italic;
    color: var(--borgogna-dk); /* rimosso !important — colore esplicito */
    line-height: 1.6;
    margin-bottom: var(--sp-md);
    padding-left: var(--sp-sm);
    border-left: 3px solid var(--gold);
}

.anima__text p {
    color: var(--pietra);
}

.anima__image-wrap {
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-xl);
    position: relative;
}
/* Immagine reale del borgo */
.anima__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 420px;
}

/* Cornice oro decorativa intorno all'immagine */
.anima__image-wrap::after {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(201, 168, 76, 0.3);
    border-radius: calc(var(--r-lg) - 4px);
    pointer-events: none;
}

/* ============================================================
   7. IL MIRACOLO
============================================================ */
.miracolo {
    background: var(--nero-soft) !important;
    position: relative;
    overflow: hidden;
}

/* Grandi caratteri decorativi in background */
.miracolo::after {
    content: "ANNO DOMINI MCCCXXXIV";
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 3vw, 2.2rem);
    letter-spacing: 0.5em;
    color: rgba(201, 168, 76, 0.18);
    text-shadow: 0 0 40px rgba(201, 168, 76, 0.08);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

.miracolo__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-lg);
    align-items: center;
    position: relative;
    z-index: 1;
}

.miracolo .section__label {
    background: rgba(201, 168, 76, 0.13);
    border-color: rgba(201, 168, 76, 0.38);
    color: var(--gold-lt);
}
.miracolo .section__label::before,
.miracolo .section__label::after {
    color: var(--gold);
}
.miracolo .section__title {
    color: var(--gold-lt);
}
.miracolo .section__title::after {
    background: linear-gradient(to right, var(--gold-lt), transparent);
}

.miracolo__text p {
    color: rgba(245, 237, 216, 0.82);
}
.miracolo__text p + p {
    margin-top: var(--sp-xs);
}

.miracolo__year-badge {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid rgba(201, 168, 76, 0.4);
    padding: 0.35em 1.1em;
    border-radius: 100px;
    margin-bottom: var(--sp-md) !important;
}

.miracolo__quote {
    margin-top: var(--sp-md);
    border-left-color: var(--gold);
    color: var(--gold-lt);
    font-size: 1.1rem;
    background: rgba(201, 168, 76, 0.06);
}

.miracolo__image-wrap {
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow:
        0 0 80px rgba(201, 168, 76, 0.15),
        var(--sh-xl);
    position: relative;
}
.miracolo__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.miracolo__image-wrap::after {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(201, 168, 76, 0.2);
    border-radius: calc(var(--r-lg) - 4px);
    pointer-events: none;
}

/* ============================================================
   8. PROGRAMMA / TIMELINE
============================================================ */
.programma {
    background: var(--pergamena-dk);
}

/* Banner avviso */
.programma__notice {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-sm);
    background: rgba(201, 168, 76, 0.08);
    border: 1px solid rgba(201, 168, 76, 0.45);
    border-left: 4px solid var(--gold);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    padding: var(--sp-sm) var(--sp-md);
    margin-bottom: var(--sp-lg);
}
.programma__notice-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    line-height: 1.5;
}
.programma__notice p {
    margin: 0;
    color: var(--pietra);
    font-size: 0.95rem;
}
.programma__notice strong {
    color: var(--borgogna);
}

/* Timeline */
.timeline {
    position: relative;
    padding-left: var(--sp-md);
    max-width: 900px;
    margin: 0 auto;
}
.timeline::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        var(--borgogna) 8%,
        var(--gold) 50%,
        var(--borgogna) 92%,
        transparent 100%
    );
}

/* Singolo item */
.timeline__item {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: var(--sp-md);
    align-items: start;
    margin-bottom: var(--sp-md);
    scroll-margin-top: 82px; /* nav 66px + 16px respiro */
    transition:
        opacity var(--t-slow) var(--ease),
        transform var(--t-slow) var(--ease);
}
/* Nasconde la card quando non corrisponde alla ricerca live */
.timeline__item--search-hidden {
    display: none !important;
}
/* Nascondi solo se JS è caricato (fallback: visibile) */
.js-loaded .timeline__item {
    opacity: 0;
    transform: translateX(-16px);
}
.timeline__item.visible {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* Pallino connettore */
.timeline__item::before {
    content: "";
    position: absolute;
    left: calc(-0.5rem - 1px);
    top: 1.3rem;
    width: 12px;
    height: 12px;
    background: var(--borgogna-md);
    border: 2px solid var(--gold);
    border-radius: 50%;
    transform: translateX(-50%);
    transition: box-shadow var(--t-fast) var(--ease);
}
.timeline__item:hover::before {
    box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.2);
}

.timeline__item--highlight::before {
    width: 16px;
    height: 16px;
    background: var(--gold);
    border-color: var(--borgogna);
    top: 1.1rem;
    box-shadow: 0 0 12px var(--gold-glow);
}

/* Marker giorno */
.timeline__marker {
    background: var(--grad-borgogna);
    color: var(--bianco);
    border-radius: var(--r-sm);
    padding: 0.5rem 0.4rem;
    text-align: center;
    box-shadow: var(--sh-sm);
    border: 1px solid rgba(201, 168, 76, 0.15);
    transition:
        transform var(--t-fast) var(--ease),
        box-shadow var(--t-fast) var(--ease);
}
.timeline__item:hover .timeline__marker {
    transform: scale(1.04);
    box-shadow: var(--sh-md);
}
.timeline__item--highlight .timeline__marker {
    background: var(--grad-gold);
    color: var(--borgogna-dk);
    border-color: transparent;
    box-shadow: var(--sh-gold);
}

.timeline__day {
    display: block;
    font-family: var(--font-display);
    font-size: 0.58rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 0.1em;
}
.timeline__num {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

/* Content card */
.timeline__content {
    background: var(--bianco);
    border-radius: var(--r-md);
    padding: 1.2rem var(--sp-md);
    box-shadow: var(--sh-sm);
    border-left: 3px solid transparent;
    transition:
        box-shadow var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease);
}
.timeline__item:hover .timeline__content {
    box-shadow: var(--sh-md);
    border-color: rgba(201, 168, 76, 0.4);
}
.timeline__item--highlight .timeline__content {
    border-left: 3px solid var(--gold);
    background: linear-gradient(
        to right,
        rgba(201, 168, 76, 0.05) 0%,
        var(--bianco) 40%
    );
}

.timeline__title {
    font-size: 1.05rem;
    font-family: var(--font-display);
    color: var(--borgogna-dk);
    margin-bottom: 0.4rem;
    font-weight: 600;
}
.timeline__desc {
    font-size: 0.92rem;
    color: var(--pietra-lt);
    line-height: 1.65;
    margin-bottom: 0.6rem;
}

.timeline__tag {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: var(--pergamena-ddk);
    color: var(--pietra-lt);
    padding: 0.25em 0.8em;
    border-radius: 100px;
}
.timeline__tag--gold {
    background: var(--grad-gold);
    color: var(--borgogna-dk);
    box-shadow: 0 1px 6px rgba(201, 168, 76, 0.3);
}

.programma__disclaimer {
    margin-top: var(--sp-md);
    font-size: 0.8rem;
    font-style: italic;
    color: var(--pietra-xlt);
    text-align: center;
    padding-top: var(--sp-sm);
    border-top: 1px solid rgba(201, 168, 76, 0.15);
}

/* ── Nota/sottotitolo giornata — appare tra l'intestazione e gli eventi ── */
.timeline__nota {
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--borgogna);
    margin: 0 0 0.85rem;
    padding: 0.3em 0.7em;
    background: rgba(107, 26, 42, 0.06);
    border-left: 2px solid var(--borgogna);
    border-radius: 0 var(--r-xs) var(--r-xs) 0;
    display: inline-block;
}
.timeline__nota--gold {
    color: var(--gold-dk);
    background: rgba(201, 168, 76, 0.12);
    border-left-color: var(--gold);
}

/* ── Intestazione giorno (titolo + luogo principale) ── */
.timeline__giorno-header {
    margin-bottom: 0.9rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--pergamena-ddk);
}
.timeline__luogo-giorno {
    font-size: 0.8rem;
    color: var(--pietra-lt);
    margin: 0.25rem 0 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-style: italic;
}

/* ── Lista eventi del giorno ── */
.timeline__eventi {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 0.9rem;
}

/* Singolo evento */
.timeline__evento {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 0.6rem;
    align-items: start;
    padding-bottom: 0.65rem;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
}
.timeline__evento:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Orario — colonna sinistra */
.timeline__ev-left {
    padding-top: 0.15rem;
    text-align: center;
}
.timeline__ev-orario {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--borgogna);
    background: rgba(107, 26, 42, 0.08);
    border: 1px solid rgba(107, 26, 42, 0.15);
    padding: 0.2em 0.45em;
    border-radius: var(--r-xs);
    white-space: nowrap;
}
/* Orario non ancora noto */
.timeline__ev-orario--nd {
    color: var(--pietra-xlt);
    background: var(--pergamena-ddk);
    border-color: rgba(0, 0, 0, 0.08);
    font-weight: 400;
    font-style: italic;
    font-size: 0.65rem;
}
/* Orario evidenziato nelle card highlight */
.timeline__item--highlight .timeline__ev-orario {
    color: var(--borgogna-dk);
    background: rgba(201, 168, 76, 0.15);
    border-color: rgba(201, 168, 76, 0.35);
}

/* Corpo evento — colonna destra */
.timeline__ev-right {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.timeline__ev-titolo {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--pietra);
    line-height: 1.35;
}
.timeline__ev-luogo {
    font-size: 0.74rem;
    font-style: italic;
    color: var(--pietra-xlt);
}
.timeline__ev-desc {
    font-size: 0.85rem;
    color: var(--pietra-lt);
    line-height: 1.6;
    margin: 0.1rem 0 0;
}

/* Mobile: timeline sub-eventi a colonna singola */
@media (max-width: 480px) {
    .timeline__evento {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
    .timeline__ev-left {
        text-align: left;
    }
}

/* ============================================================
   9. VIVI IL PALIO — CARD
============================================================ */
.vivere {
    background: var(--nero-soft) !important;
    position: relative;
    overflow: hidden;
}
.vivere::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30Z' fill='none' stroke='rgba(201%2C168%2C76%2C0.035)' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 60px 60px;
    pointer-events: none;
}
.vivere .section__label {
    background: linear-gradient(90deg, var(--gold-dk), var(--gold));
    color: var(--borgogna-dk);
}
.vivere .section__label::before,
.vivere .section__label::after {
    color: var(--borgogna-dk);
}
.vivere .section__title {
    color: var(--gold-lt);
}
.vivere .section__title::after {
    background: linear-gradient(to right, var(--gold-lt), transparent);
}
.vivere .section__subtitle {
    color: rgba(245, 237, 216, 0.6);
}

/* Griglia card */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 1.5rem;
}

/* Singola card */
.card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(201, 168, 76, 0.12);
    border-radius: var(--r-lg);
    overflow: hidden;
    backdrop-filter: blur(4px);
    transition:
        transform var(--t-med) var(--ease),
        box-shadow var(--t-med) var(--ease),
        border-color var(--t-med) var(--ease);
    /* Flex column: il body si allunga fino a coprire tutta la card */
    display: flex;
    flex-direction: column;
}
.card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.5),
        0 0 32px var(--gold-glow);
    border-color: rgba(201, 168, 76, 0.4);
}

/* Immagine / placeholder card */
.card__img {
    height: 180px;
    position: relative;
    overflow: hidden;
}
/* Immagini reali nelle card — oggetto in cover centrato */
.card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s var(--ease);
}
.card:hover .card__img img {
    transform: scale(1.04);
}

/* Linea oro in cima alla card al hover */
.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad-gold);
    opacity: 0;
    transition: opacity var(--t-fast) var(--ease);
    z-index: 1;
}
.card {
    position: relative;
}
.card:hover::before {
    opacity: 1;
}

.card__body {
    padding: 1.4rem var(--sp-md);
    background: rgba(255, 255, 255, 0.96);
    flex: 1; /* occupa tutto lo spazio rimanente sotto l'immagine */
}
.card__title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--borgogna-dk);
    margin-bottom: 0.4rem;
    letter-spacing: 0.02em;
}
.card__desc {
    font-size: 0.92rem;
    color: var(--pietra-lt);
    line-height: 1.65;
    margin: 0;
}

/* ============================================================
   10. INFORMAZIONI PRATICHE
============================================================ */
.info {
    background: var(--pergamena);
}

.info__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: var(--sp-md);
    margin-bottom: var(--sp-lg);
}

.info__card {
    background: var(--bianco);
    border-radius: var(--r-md);
    padding: 1.5rem var(--sp-md);
    box-shadow: var(--sh-sm);
    border-top: 3px solid var(--borgogna);
    transition:
        box-shadow var(--t-fast) var(--ease),
        transform var(--t-fast) var(--ease);
    position: relative;
    overflow: hidden;
}
.info__card:hover {
    box-shadow: var(--sh-md);
    transform: translateY(-3px);
}
/* Angolo decorativo */
.info__card::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: linear-gradient(
        225deg,
        rgba(201, 168, 76, 0.12) 0%,
        transparent 60%
    );
}

.info__icon {
    font-size: 1.8rem;
    margin-bottom: 0.6rem;
    display: block;
    line-height: 1;
}
.info__title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--borgogna-dk);
    margin-bottom: 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--pergamena-ddk);
}
.info__note {
    display: inline-block;
    font-size: 0.74rem;
    font-style: italic;
    color: #7a5800;
    background: rgba(201, 168, 76, 0.12);
    border-radius: var(--r-xs);
    padding: 0.25em 0.7em;
    margin-top: 0.5rem !important;
}
.info__placeholder {
    color: var(--pietra-lt);
    font-style: italic;
}
.info__map-btn {
    margin-top: 0.75rem;
}

/* Lista puntata nelle info card */
.info__list {
    list-style: none;
    padding: 0;
    margin: 0.4rem 0 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.info__list li {
    font-size: 0.9rem;
    color: var(--pietra);
    padding-left: 1.1em;
    position: relative;
}
.info__list li::before {
    content: "›";
    position: absolute;
    left: 0;
    color: var(--borgogna);
    font-weight: 700;
}

/* Link PDF orari bus */
.info__link-pdf {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--borgogna);
    text-decoration: none;
    border-bottom: 1px solid rgba(107, 26, 42, 0.25);
    transition:
        color var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease);
}
.info__link-pdf:hover {
    color: var(--borgogna-dk);
    border-bottom-color: var(--borgogna-dk);
}

/* Variante leggibile su sfondo scuro (es. dentro .avviso-card) */
.avviso-card .info__link-pdf {
    color: var(--gold);
    border-bottom-color: rgba(201, 168, 76, 0.35);
}
.avviso-card .info__link-pdf:hover {
    color: var(--gold-lt);
    border-bottom-color: var(--gold-lt);
}

/* Link social nella card */
.social-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--borgogna);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.4em 0.6em;
    border-radius: var(--r-xs);
    border: 1px solid rgba(107, 26, 42, 0.2);
    transition:
        background var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease);
    letter-spacing: 0.04em;
}
.social-link:hover {
    background: rgba(107, 26, 42, 0.06);
    border-color: var(--borgogna);
}
.social-link__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--borgogna);
    color: var(--bianco);
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 900;
    flex-shrink: 0;
}

/* Placeholder mappa */
.map-placeholder {
    height: 340px;
    border-radius: var(--r-lg);
    overflow: hidden;
    position: relative;
    box-shadow: var(--sh-md);
}

/* ============================================================
   11. FAQ
============================================================ */
.faq {
    background: var(--pergamena-dk);
}

/* Intestazione FAQ centrata */
.faq .section__label {
    display: block;          /* necessario per margin: auto */
    width: fit-content;      /* si restringe al contenuto */
    margin-left: auto;
    margin-right: auto;
}
.faq .section__title {
    text-align: center;
}
.faq .section__title::after {
    margin-left: auto;
    margin-right: auto;
}
.faq .section__subtitle {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.faq__list {
    max-width: var(--max-w-narrow);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.faq__item {
    background: var(--bianco);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--sh-xs);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: box-shadow var(--t-fast) var(--ease);
}
.faq__item:has(.faq__question[aria-expanded="true"]) {
    box-shadow: var(--sh-md);
    border-color: rgba(201, 168, 76, 0.2);
}

.faq__question {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-sm);
    padding: 1.1rem var(--sp-md);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--borgogna-dk);
    text-align: left;
    letter-spacing: 0.01em;
    transition:
        background var(--t-fast) var(--ease),
        color var(--t-fast) var(--ease);
}
.faq__question:hover {
    background: rgba(245, 237, 216, 0.6);
}
.faq__question[aria-expanded="true"] {
    background: var(--grad-borgogna);
    color: var(--gold-lt);
}

.faq__icon {
    font-size: 1.3rem;
    font-weight: 300;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    opacity: 0.7;
    transition:
        transform var(--t-fast) var(--ease),
        opacity var(--t-fast) var(--ease);
    line-height: 1;
}
.faq__question[aria-expanded="true"] .faq__icon {
    transform: rotate(45deg);
    opacity: 1;
}

.faq__answer {
    padding: var(--sp-sm) var(--sp-md) 1.2rem;
    color: var(--pietra);
    border-top: 1px solid var(--pergamena-dk);
    font-size: 0.95rem;
    line-height: 1.75;
    animation: faq-in 0.22s var(--ease-out);
}
.faq__answer[hidden] {
    display: none;
}

@keyframes faq-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   12. RESTA AGGIORNATO
============================================================ */
.section-aggiornamenti {
    background: var(--borgogna) !important;
    position: relative;
    overflow: hidden;
}
.section-aggiornamenti::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 80L80 0M-10 10L10-10M70 90L90 70' stroke='rgba(201%2C168%2C76%2C0.06)' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 80px 80px;
    pointer-events: none;
}
.section-aggiornamenti .section__label {
    background: rgba(0, 0, 0, 0.25);
    color: var(--gold-lt);
    border-color: rgba(201, 168, 76, 0.2);
}
.section-aggiornamenti .section__label::before,
.section-aggiornamenti .section__label::after {
    color: var(--gold-lt);
}
.section-aggiornamenti .section__title {
    color: var(--gold-lt);
}
.section-aggiornamenti .section__title::after {
    background: linear-gradient(to right, var(--gold-lt), transparent);
}

.aggiornamenti__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--sp-lg);
    align-items: center;
    position: relative;
    z-index: 1;
}
.aggiornamenti__lead {
    font-size: 1.1rem;
    font-style: italic;
    color: rgba(245, 237, 216, 0.9) !important;
    margin-bottom: var(--sp-sm) !important;
}
.aggiornamenti__inner p {
    color: rgba(245, 237, 216, 0.7);
}
.aggiornamenti__cta {
    display: flex;
    gap: var(--sp-sm);
    flex-wrap: wrap;
    margin-top: var(--sp-md);
}
.aggiornamenti__note {
    font-size: 0.72rem;
    font-style: italic;
    color: rgba(245, 237, 216, 0.35) !important;
    margin-top: var(--sp-xs) !important;
}

/* Simbolo decorativo */
.aggiornamenti__symbol {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    opacity: 0.18;
    user-select: none;
}
.aggiornamenti__icon {
    font-size: 5.5rem;
    line-height: 1;
    color: var(--gold-lt);
}
.aggiornamenti__anno {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--gold-lt);
    letter-spacing: 0.25em;
}
.aggiornamenti__luogo {
    font-family: var(--font-display);
    font-size: 0.62rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold-lt);
}

/* ============================================================
   13. FOOTER
============================================================ */
.footer {
    background: var(--nero);
    color: rgba(245, 237, 216, 0.65);
    padding: var(--sp-xl) 0 var(--sp-md);
    position: relative;
}

/* Ornamento in cima al footer */
.footer__ornament {
    display: block;
    width: 100%;
    overflow: hidden;
    margin-bottom: var(--sp-lg);
    line-height: 0;
}
.footer__ornament svg {
    display: block;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    height: 28px;
    color: var(--gold);
    opacity: 0.3;
}

.footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: var(--sp-md) var(--sp-lg);
    margin-bottom: var(--sp-lg);
}

/* Colonna brand */
.footer__brand {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.footer__brand-icon {
    width: 2.2rem;
    height: 2.2rem;
    object-fit: contain;
    display: block;
}
.footer__brand-name {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gold-lt);
    letter-spacing: 0.04em;
}
.footer__brand-place {
    font-family: var(--font-display);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(245, 237, 216, 0.4);
}
.footer__brand-desc {
    font-size: 0.85rem;
    color: rgba(245, 237, 216, 0.5);
    margin-top: 0.5rem;
    line-height: 1.6;
}

/* Colonne nav */
.footer__col-title {
    font-family: var(--font-display);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.8rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(201, 168, 76, 0.15);
}
.footer__col-links {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.footer__col-links a {
    color: rgba(245, 237, 216, 0.6);
    text-decoration: none;
    font-size: 0.88rem;
    line-height: 1.5;
    transition: color var(--t-fast) var(--ease);
}
.footer__col-links a:hover {
    color: var(--gold-lt);
}

/* Social nel footer */
.footer__social {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.footer__social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(245, 237, 216, 0.6);
    text-decoration: none;
    font-size: 0.85rem;
    padding: 0.4em 0.8em;
    border: 1px solid rgba(201, 168, 76, 0.2);
    border-radius: var(--r-xs);
    transition:
        color var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease),
        background var(--t-fast) var(--ease);
}
.footer__social-link:hover {
    color: var(--gold-lt);
    border-color: rgba(201, 168, 76, 0.5);
    background: rgba(201, 168, 76, 0.06);
}

/* Legal */
.footer__legal {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: var(--sp-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-sm);
    font-size: 0.78rem;
    color: rgba(245, 237, 216, 0.65);
}
.footer__disclaimer {
    color: rgba(245, 237, 216, 0.8);
}
.footer__disclaimer a {
    color: rgba(245, 237, 216, 0.8);
    text-decoration: none;
    transition: color var(--t-fast) var(--ease);
}
.footer__disclaimer a:hover {
    color: var(--gold-lt);
}

/* ============================================================
   14. BACK TO TOP
============================================================ */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 900;
    width: 48px;
    height: 48px;
    background: var(--borgogna-md);
    color: var(--gold-lt);
    border: 1px solid rgba(201, 168, 76, 0.4);
    border-radius: 50%;
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--sh-md);
    transition:
        background var(--t-fast) var(--ease),
        transform var(--t-fast) var(--ease),
        box-shadow var(--t-fast) var(--ease);
}
.back-to-top:hover {
    background: var(--borgogna-dk);
    transform: translateY(-3px);
    box-shadow: var(--sh-gold), var(--sh-md);
}
.back-to-top[hidden] {
    display: none;
}
.back-to-top:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* ============================================================
   15. PLACEHOLDER IMMAGINI
============================================================ */
.img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    background: linear-gradient(135deg, #c0b5a0 0%, #a09080 100%);
}
.img-placeholder--tall {
    min-height: 420px;
}

.img-placeholder__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    padding: var(--sp-md);
}
.img-placeholder__icon {
    font-size: 3.5rem;
    opacity: 0.5;
}
.img-placeholder__label {
    font-size: 0.88rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--font-display);
    letter-spacing: 0.05em;
}
.img-placeholder__hint {
    font-family: monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.2);
    padding: 0.2em 0.6em;
    border-radius: var(--r-xs);
}

/* Card img placeholder override */
.card__img.img-placeholder {
    min-height: 0;
    height: 100%;
}

/* ============================================================
   16. MEDIA QUERIES
============================================================ */

/* ── Tablet ≤ 960px ── */
@media (max-width: 960px) {
    .anima__inner,
    .miracolo__inner {
        grid-template-columns: 1fr;
    }
    .miracolo__image-wrap {
        order: -1;
    }

    .footer__grid {
        grid-template-columns: 1fr 1fr;
    }

    .timeline__item {
        grid-template-columns: 60px 1fr;
    }
}

/* Logo iniettato nel menu — nascosto su desktop, visibile solo su mobile */
.nav__menu-logo { display: none; }

/* ── Nav hamburger ≤ 1250px ── */
@media (max-width: 1250px) {

    /* Switcher lingua: la versione dentro al menu si nasconde,
       resta solo l'icona persistente accanto al burger */
    .nav__lang-item { display: none; }
    .nav__mobile-controls {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        position: relative;
        z-index: 1002; /* resta sopra al menu full-screen, come il burger */
    }
    .nav__lang-switch--mobile {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Burger: sempre sopra il menu full-screen */
    .nav__burger {
        display: flex;
        position: relative;
        z-index: 1002;
    }

    /* Quando il menu è aperto: la nav diventa trasparente
       ma resta sopra (z-index 1002) così il burger rimane cliccabile */
    .nav--menu-open {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        z-index: 1002;
    }
    .nav--menu-open .nav__brand { visibility: hidden; }
    .nav--menu-open .nav__inner { pointer-events: none; }
    .nav--menu-open .nav__burger { pointer-events: auto; }
    .nav--menu-open .nav__lang-switch--mobile { pointer-events: auto; }
    .nav--menu-open .nav__menu  { pointer-events: auto; } /* ripristina i click sulle voci */

    /* Menu full-screen — copre tutta la viewport, nav inclusa */
    .nav__menu {
        display: none;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100vh;
        height: 100dvh;
        z-index: 1001;
        background: rgba(22, 8, 14, 1);
        padding: 0;
        gap: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .nav__menu.nav__menu--open {
        display: flex;
        animation: navMenuIn 0.44s cubic-bezier(0.76, 0, 0.24, 1) both;
    }

    /* Logo iniettato come <li> in cima al menu */
    .nav__menu-logo {
        display: flex;
        align-items: center;
        min-height: 66px;
        padding: 0 var(--sp-md);
        border-bottom: 1px solid rgba(201, 168, 76, 0.18);
        flex-shrink: 0;
        width: 100%;
        box-sizing: border-box;
        list-style: none;
    }
    .nav__menu.nav__menu--open .nav__menu-logo {
        animation: navItemFadeUp 0.38s cubic-bezier(0.16, 1, 0.3, 1) 0.14s both;
    }

    /* Voci di menu: stagger via custom property --nav-i impostata da JS */
    .nav__menu li { width: 100%; }
    .nav__menu.nav__menu--open > li:not(.nav__menu-logo) {
        animation: navItemFadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1)
                   calc(0.20s + var(--nav-i, 0) * 0.05s) both;
    }

    .nav__link {
        display: block;
        font-size: 1.05rem;
        padding: 0.9em var(--sp-md);
        border-bottom: 1px solid rgba(201, 168, 76, 0.08);
        border-right: none;
        letter-spacing: 0.12em;
    }
    .nav__link--cta {
        display: block;
        margin: var(--sp-sm) var(--sp-md) var(--sp-md);
        padding: 0.8em var(--sp-md);
        border: 1px solid rgba(201, 168, 76, 0.35) !important;
        border-radius: var(--r-sm);
        text-align: center;
    }

    /* — Dropdown mobile: inline, toggled via JS — */
    .nav__item--dropdown {
        display: flex;           /* necessario perché flex-direction funzioni */
        position: static;
        flex-direction: column;
        align-items: stretch;    /* bottone e sottomenu a piena larghezza */
        width: 100%;
    }
    .nav__dropdown-toggle {
        display: flex;           /* su mobile torna flex (non inline-flex) */
        width: 100%;
        justify-content: space-between;
        align-items: center;     /* centra verticalmente testo e freccia */
        text-align: left;
        vertical-align: unset;
    }
    .nav__dropdown-arrow {
        font-size: 1.15rem;      /* più grande e visibile */
        line-height: 1;
        margin-top: 0;           /* annulla il micro-offset desktop */
        color: var(--gold);
        opacity: .8;
        flex-shrink: 0;
    }
    /* Neutralizza le regole hover/focus-within desktop che usano translateX(-50%)
       — su mobile causano lo spostamento off-screen del dropdown aperto */
    .nav__item--dropdown:hover .nav__dropdown,
    .nav__item--dropdown:focus-within .nav__dropdown,
    .nav__item--dropdown.nav__item--open .nav__dropdown {
        transform: none;
        opacity: 1;
        pointer-events: auto;
    }
    .nav__dropdown {
        position: static;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        background: transparent;   /* stesso sfondo del menu */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        min-width: 0;
        width: 100%;
        display: none;
        transition: none;
    }
    .nav__dropdown::before { display: none; }
    .nav__dropdown.nav__dropdown--open { display: block; }
    .nav__dropdown-link {
        /* Identico a .nav__link mobile ma con testo più piccolo e rientro */
        display: block;
        color: rgba(255, 255, 255, 0.8);
        border-bottom: 1px solid rgba(201, 168, 76, 0.08);
        letter-spacing: 0.12em;
        font-size: 0.88rem;        /* leggermente più piccolo */
        padding: 0.9em var(--sp-md) 0.9em calc(var(--sp-md) + 1.4rem); /* rientro sx */
        transition: none;          /* hover immediato su mobile */
    }
    .nav__dropdown-link:hover,
    .nav__dropdown-link:focus {
        color: var(--gold-lt);
        background: transparent;
        transition: none;
    }
    .nav__dropdown-link--active {
        color: var(--gold);
        border-left: none;
        padding-left: calc(var(--sp-md) + 1.4rem);
    }

    /* ── Link rapidi in fondo al menu mobile ─────────── */
    .nav__quick-links {
        margin-top: auto;
        width: 100%;
        border-top: 1px solid rgba(201, 168, 76, .15);
        padding: var(--sp-sm) var(--sp-md) var(--sp-md);
        list-style: none;
        flex-shrink: 0;
    }
    .nav__quick-links__label {
        font-family: var(--font-display);
        font-size: .52rem;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: rgba(201, 168, 76, .4);
        margin: 0 0 .6rem;
    }
    .nav__quick-links__list {
        display: flex;
        flex-direction: column;
        gap: .3rem;
    }
    .nav__quick-link {
        display: flex;
        align-items: center;
        gap: .65rem;
        font-family: var(--font-display);
        font-size: .75rem;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: rgba(245, 237, 216, .7);
        text-decoration: none;
        padding: .55rem .7rem;
        border-radius: 4px;
        border: 1px solid rgba(201, 168, 76, .12);
        background: rgba(201, 168, 76, .04);
        transition: background .15s, color .15s, border-color .15s;
    }
    .nav__quick-link:hover,
    .nav__quick-link:focus-visible {
        background: rgba(201, 168, 76, .1);
        border-color: rgba(201, 168, 76, .3);
        color: var(--gold-lt);
    }
    .nav__quick-link__icon {
        font-size: 1.05rem;
        line-height: 1;
        flex-shrink: 0;
    }
}

/* Nav quick-links: nascosti su desktop */
.nav__quick-links {
    display: none;
}
@media (max-width: 1250px) {
    .nav__quick-links {
        display: list-item;
    }
}

/* Keyframes menu mobile */
@keyframes navMenuIn {
    from { clip-path: inset(0 0 100% 0); }
    to   { clip-path: inset(0 0 0% 0);   }
}
@keyframes navItemFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ── Mobile ≤ 640px ── */
@media (max-width: 640px) {
    :root {
        --sp-lg: 2.5rem;
        --sp-xl: 3.5rem;
    }

    /* Hero mobile */
    .hero__title {
        font-size: clamp(2.4rem, 13vw, 4rem);
    }
    .hero__year {
        margin-bottom: 0.6rem;
    }
    .hero__cta {
        flex-direction: column;
        align-items: center;
    }
    .hero__cta .btn {
        width: 100%;
        max-width: 340px;
    }

    /* Card mobile */
    .cards {
        grid-template-columns: 1fr;
        gap: var(--sp-sm);
    }

    /* Info mobile */
    .info__grid {
        grid-template-columns: 1fr;
    }

    /* Timeline mobile */
    .timeline {
        padding-left: var(--sp-sm);
    }
    .timeline__item {
        grid-template-columns: 1fr;
        padding-left: var(--sp-sm);
    }
    .timeline__marker {
        display: none;
    }
    .timeline__item::before {
        left: calc(-0.5rem);
    }

    /* Footer mobile */
    .footer__grid {
        grid-template-columns: 1fr;
    }
    .footer__legal {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding-top: calc(var(--sp-md) - 10px);
    }
    .footer__legal .footer__disclaimer {
        margin-bottom: calc(1em + 25px);
    }

    /* Aggiornamenti mobile */
    .aggiornamenti__inner {
        grid-template-columns: 1fr;
    }
    .aggiornamenti__symbol {
        display: none;
    }
    .aggiornamenti__cta {
        flex-direction: column;
    }
    .aggiornamenti__cta .btn {
        text-align: center;
        justify-content: center;
    }

    /* Back to top */
    .back-to-top {
        bottom: 1rem;
        right: 1rem;
        width: 44px;
        height: 44px;
    }
}

/* ── Riduzione animazioni (accessibilità) ── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .hero__scroll-hint {
        animation: none;
    }
}


/* ============================================================
   17. SITO MULTIPAGINA — stili condivisi fra tutte le pagine
============================================================ */

/* ── Countdown widget (home hero) ── */
.countdown {
    display: flex;
    gap: 1.25rem;
    justify-content: center;
    margin: 1.25rem 0 1.5rem;
}
.countdown__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    min-width: 64px;
}
.countdown__num {
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 900;
    line-height: 1;
    color: var(--gold-lt);
    letter-spacing: -.02em;
    text-shadow: 0 0 18px rgba(201,168,76,.35);
}
.countdown__label {
    font-family: var(--font-display);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pietra-xlt);
}
.countdown__sep {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 300;
    color: var(--gold);
    align-self: flex-start;
    padding-top: .1rem;
    opacity: .55;
}
.countdown__in-corso {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--gold-lt);
    text-align: center;
    padding: .5rem 1rem;
}

/* ── Countdown mini nel footer ── */
.footer__countdown {
    font-family: var(--font-display);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--gold);
    text-transform: uppercase;
    margin-top: .4rem;
    opacity: .85;
}

/* ── Inner hero (pagine interne) ── */
.inner-hero {
    position: relative;
    min-height: 390px;
    display: flex;
    align-items: flex-end;
    background:
        radial-gradient(ellipse 90% 70% at 15% 25%, rgba(107,26,42,.72) 0%, transparent 55%),
        radial-gradient(ellipse 70% 50% at 85% 75%, rgba(42,66,38,.55) 0%, transparent 50%),
        radial-gradient(ellipse at center, transparent 35%, rgba(10,5,3,.85) 100%),
        linear-gradient(155deg, rgba(15,10,7,.55) 0%, rgba(31,12,16,.55) 50%, rgba(22,10,6,.55) 100%),
        url("images/hero.jpg") center/cover no-repeat;
    background-color: #0f0a07;
    padding-top: 90px; /* spazio per la nav sticky */
}
.inner-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(10,5,3,.35);
    pointer-events: none;
}
.inner-hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 3rem var(--sp-lg) 2.5rem;
    text-align: center;
}
.inner-hero__pretitle {
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: .6rem;
}
.inner-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 6vw, 3.8rem);
    font-weight: 900;
    color: var(--pergamena);
    line-height: 1.1;
    text-shadow: 0 2px 24px rgba(10,5,3,.7);
    margin-bottom: .6rem;
}
.inner-hero__subtitle {
    font-family: var(--font-body);
    font-size: 1rem;
    font-style: italic;
    color: var(--gold-lt);
    opacity: .9;
    max-width: 560px;
    margin: 0 auto;
}
.inner-hero--miracolo {
    background-color: #0d080a;
    background-image:
        radial-gradient(ellipse 90% 70% at 15% 25%, rgba(107,26,42,.72) 0%, transparent 55%),
        radial-gradient(ellipse 70% 50% at 85% 75%, rgba(42,66,38,.55) 0%, transparent 50%),
        radial-gradient(ellipse at center, transparent 35%, rgba(10,5,3,.85) 100%),
        linear-gradient(155deg, rgba(15,10,7,.55) 0%, rgba(31,12,16,.55) 50%, rgba(22,10,6,.55) 100%),
        url("images/miracolo/1-cammino.webp");
}
.inner-hero--programma { background-color: #0a0e08; }
.inner-hero--borghi    { background-color: #0c0a08; }
.inner-hero--pietralunga { background-color: #080d0a; }
.inner-hero--dormire   { background-color: #0b0a0d; }
.inner-hero--mangiare  { background-color: #0d0b08; }
.inner-hero--info      { background-color: #080b0d; }
.inner-hero--quiz      { background-color: #0e0a0d; }

/* ── Navigazione interna sezioni (borghi-quartieri.html) ──
   Appare scorrendo oltre l'hero; evidenzia la sezione corrente. ── */
.page-subnav {
    position: sticky;
    top: 66px; /* agganciata subito sotto la nav principale */
    z-index: 900;
    background: rgba(28,9,15,.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(201,168,76,.18);
}
.page-subnav .container {
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
}
.page-subnav__arrow {
    display: none; /* visibili solo su mobile via media query */
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2.4rem;
    border: none;
    background: transparent;
    color: var(--gold);
    font-size: 1.3rem;
    cursor: pointer;
    z-index: 2;
    align-items: center;
    transition: opacity .2s;
}
.page-subnav__arrow--hidden {
    opacity: 0;
    pointer-events: none;
}
.page-subnav__arrow--left {
    left: 0;
    justify-content: flex-start;
    padding-left: .35rem;
    background: linear-gradient(to right, rgba(28,9,15,1) 55%, transparent);
}
.page-subnav__arrow--right {
    right: 0;
    justify-content: flex-end;
    padding-right: .35rem;
    background: linear-gradient(to left, rgba(28,9,15,1) 55%, transparent);
}
.page-subnav__list {
    display: flex;
    justify-content: center; /* centrata su desktop */
    list-style: none;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 0;
    margin: 0;
}
.page-subnav__list::-webkit-scrollbar { display: none; }
.page-subnav__link {
    display: flex;
    align-items: center;
    line-height: 1;
    padding: .65rem 1rem;
    font-family: var(--font-display);
    font-size: .63rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(245,237,216,.5);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s;
}
.page-subnav__link:hover {
    color: var(--gold-lt);
}
.page-subnav__link--active {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

/* Offset scroll per le sezioni con id su borghi-quartieri.html
   (nav 66px + subnav ~35px + 5px respiro) */
#i-borghi,
#la-corsa,
#albo-doro,
#statistiche,
#vota {
    scroll-margin-top: 106px;
}

/* Pulsante "Mostra altre edizioni" — Albo d'oro */
.albo-doro__mostra-wrap {
    text-align: center;
    margin: var(--sp-sm) 0 0;
}
.albo-doro__mostra-piu {
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--borgogna);
    background: none;
    border: 1px solid var(--borgogna);
    border-radius: 2rem;
    padding: .5rem 1.6rem;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.albo-doro__mostra-piu:hover {
    background: var(--borgogna);
    color: var(--pergamena);
}

/* ── Inner hero: programma — leggermente più alto per le pill di navigazione ── */
.inner-hero--programma {
    min-height: 430px;
}

/* ── Pill di navigazione giorni (hero programma.html) ── */
.prog-days {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.5rem;
    list-style: none;
}
.prog-days__pill {
    display: inline-block;
    padding: .35rem .85rem;
    border: 1px solid rgba(201,168,76,.4);
    border-radius: 2rem;
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold-lt);
    text-decoration: none;
    background: rgba(10,5,3,.3);
    transition: background .2s, border-color .2s, color .2s;
}
.prog-days__pill:hover,
.prog-days__pill:focus-visible {
    background: rgba(201,168,76,.18);
    border-color: var(--gold);
    color: var(--gold);
    outline: none;
}
.prog-days__pill--gold {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(201,168,76,.1);
}
.prog-days__pill--gold:hover,
.prog-days__pill--gold:focus-visible {
    background: rgba(201,168,76,.25);
}

/* ── Barra di ricerca live (programma.html) ── */
.prog-search-wrap {
    margin-bottom: var(--sp-lg);
}
.prog-search__label {
    display: block;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pietra-lt);
    margin-bottom: .5rem;
}
.prog-search__field {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--pergamena);
    border: 1.5px solid var(--pergamena-ddk);
    border-radius: var(--r-md);
    box-shadow: 0 2px 8px rgba(62,54,44,.08);
    transition: border-color .2s, box-shadow .2s;
}
.prog-search__field:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-glow);
}
.prog-search__icon {
    flex-shrink: 0;
    padding: 0 .75rem 0 1rem;
    font-size: 1rem;
    pointer-events: none;
}
.prog-search__input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--pietra);
    padding: .75rem .5rem;
    outline: none;
}
.prog-search__input::placeholder {
    color: var(--pietra-xlt);
    font-style: italic;
}
.prog-search__input::-webkit-search-cancel-button {
    display: none;
}
.prog-search__clear {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--pietra-lt);
    cursor: pointer;
    padding: .5rem .9rem;
    font-size: .85rem;
    line-height: 1;
    border-radius: 0 var(--r-md) var(--r-md) 0;
    transition: color .15s, background .15s;
}
.prog-search__clear:hover {
    color: var(--borgogna);
    background: rgba(107,26,42,.07);
}
.prog-search__hint {
    margin-top: .45rem;
    font-size: .8rem;
    font-style: italic;
    color: var(--pietra-xlt);
    min-height: 1.2em;
}

/* ── Messaggio nessun risultato ── */
#prog-no-results {
    text-align: center;
    padding: 3rem 1rem;
    font-family: var(--font-body);
    font-style: italic;
    color: var(--pietra-lt);
    font-size: 1rem;
    line-height: 1.7;
}
.prog-no-results__reset {
    display: inline-block;
    margin-top: .75rem;
    background: none;
    border: 1px solid var(--borgogna);
    border-radius: 2rem;
    color: var(--borgogna);
    font-family: var(--font-display);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .4rem 1.2rem;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.prog-no-results__reset:hover {
    background: var(--borgogna);
    color: var(--pergamena);
}

/* ── Link CTA inline (cena ristoranti/taverne) ── */
.timeline__ev-cta {
    display: inline-block;
    margin-top: .35rem;
    font-size: .8rem;
    color: var(--borgogna);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .15s;
}
.timeline__ev-cta:hover {
    color: var(--gold-dk);
}

/* ── Sezione CTA "Prima di venire" (programma.html) ── */
.prog-cta-section {
    background: var(--pergamena-dk);
}
.prog-cta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-md);
    margin-top: var(--sp-lg);
}
.prog-cta-card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.75rem 1.5rem 1.5rem;
    background: var(--pergamena);
    border: 1px solid var(--pergamena-ddk);
    border-top: 3px solid var(--borgogna);
    border-radius: var(--r-md);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-card);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-top-color .25s;
}
.prog-cta-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    border-top-color: var(--gold);
}
.prog-cta-card__icon {
    font-size: 1.8rem;
    line-height: 1;
}
.prog-cta-card__title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--borgogna);
}
.prog-cta-card__text {
    font-family: var(--font-body);
    font-size: .9rem;
    color: var(--pietra-lt);
    line-height: 1.5;
    flex: 1;
}
.prog-cta-card__arrow {
    font-size: 1.1rem;
    color: var(--gold-dk);
    align-self: flex-end;
    transition: transform .2s;
}
.prog-cta-card:hover .prog-cta-card__arrow {
    transform: translateX(4px);
}

/* ── Teaser programma (home — ultimi 3 giorni) ── */
/* ── Slider programma home ───────────────────────────── */
.prog-slider {
    position: relative;
    margin-top: var(--sp-lg);
    padding: 0 2.6rem; /* spazio per le frecce */
}

.prog-slider__viewport {
    overflow: hidden;
}

.prog-slider__track {
    display: flex;
    gap: 1.25rem;
    will-change: transform;
    /* transition gestita via JS per alternare animato / istantaneo */
}

/* le card prendono larghezza calcolata da JS */
.prog-slider__track .teaser-card {
    flex-shrink: 0;
    min-width: 0;
}

/* Frecce */
.prog-slider__btn {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    z-index: 2;
    width: 2.4rem; height: 2.4rem;
    border-radius: 50%;
    border: 1.5px solid rgba(107,26,42,.22);
    background: #fff;
    color: var(--borgogna);
    font-size: 1.65rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.13);
    transition: background .2s, color .2s, box-shadow .2s;
    padding: 0;
}
.prog-slider__btn:hover {
    background: var(--borgogna);
    color: var(--gold);
    box-shadow: 0 4px 16px rgba(107,26,42,.28);
}
.prog-slider__btn[disabled] {
    opacity: .22;
    pointer-events: none;
}
.prog-slider__btn--prev { left: 0; }
.prog-slider__btn--next { right: 0; }

/* Dots — pillola attiva */
.prog-slider__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .4rem;
    margin-top: 1.1rem;
}
.prog-slider__dot {
    height: .48rem;
    width: .48rem;
    border-radius: 100px;
    background: var(--borgogna);
    opacity: .2;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: opacity .25s, width .25s;
    flex-shrink: 0;
}
.prog-slider__dot--active {
    opacity: 1;
    width: 1.4rem;
}
.teaser-card {
    background: var(--pergamena);
    border: 1px solid var(--pergamena-ddk);
    border-top: 3px solid var(--borgogna);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.teaser-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}
.teaser-card--gold {
    border-top-color: var(--gold);
}
.teaser-card__header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem .65rem;
    background: var(--borgogna-dk);
    color: var(--pergamena);
}
.teaser-card--gold .teaser-card__header {
    background: linear-gradient(135deg, var(--borgogna-dk), #2a1810);
    border-bottom: 1px solid var(--gold-dk);
}
.teaser-card__abbr {
    font-family: var(--font-display);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--gold);
    line-height: 1;
}
.teaser-card__num {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 900;
    color: var(--pergamena);
    line-height: 1;
}
.teaser-card--gold .teaser-card__num {
    color: var(--gold-lt);
}
.teaser-card__meta {
    flex: 1;
    min-width: 0;
}
.teaser-card__giorno {
    display: block;
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--pergamena);
    line-height: 1.15;
}
.teaser-card__nota {
    display: block;
    font-family: var(--font-display);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--gold);
    text-transform: uppercase;
    margin-top: 0;
    line-height: 1.2;
}
.teaser-card__lista {
    list-style: none;
    padding: .7rem 1rem .9rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.teaser-card__ev {
    font-family: var(--font-body);
    font-size: .82rem;
    color: var(--pietra);
    line-height: 1.35;
    padding-left: .6rem;
    border-left: 2px solid var(--pergamena-ddk);
}
.teaser-card__ora {
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 700;
    color: var(--borgogna);
    letter-spacing: .05em;
}
.teaser-card--gold .teaser-card__ora {
    color: var(--gold-dk);
}
.teaser-card__ev--prima,
.teaser-card__ev--more {
    font-style: italic;
    color: var(--pietra-lt);
    border-left-color: transparent;
    font-size: .75rem;
}

/* ── Sezione con testo centrato (CTA di fondo pagina) ── */
.section--center {
    text-align: center;
    background: var(--pergamena-dk);
    border-top: 1px solid var(--pergamena-ddk);
    position: relative;
}
/* Riga ornamentale dorata in cima */
.section--center::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.section--center .section__label {
    /* inline-flex già centrata dal text-align del parent */
    display: inline-flex;
}
.section--center .section__title {
    text-align: center;
}
.section--center .section__title::after {
    margin-left: auto;
    margin-right: auto;
}
.section--center .section__subtitle {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* ── Gruppo pulsanti CTA ── */
.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--sp-md);
}
@media (max-width: 480px) {
    .cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    .cta-buttons .btn {
        text-align: center;
        justify-content: center;
    }
}

/* ── Link CTA verso pagine interne ── */
.section-cta-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--borgogna);
    text-decoration: none;
    border-bottom: 1px solid rgba(107,26,42,.3);
    padding-bottom: .1rem;
    transition: color .2s, border-color .2s;
    margin-top: var(--sp-md);
}
.section-cta-link:hover {
    color: var(--borgogna-dk);
    border-color: var(--borgogna-dk);
}
.section-cta-link--gold {
    color: var(--gold-dk);
    border-color: rgba(158,126,46,.3);
}
.section-cta-link--gold:hover {
    color: var(--gold);
    border-color: var(--gold);
}

/* Override su sfondo scuro (sezione .miracolo) */
.miracolo .section-cta-link {
    color: var(--gold-lt);
    border-bottom-color: rgba(232, 208, 128, 0.4);
}
.miracolo .section-cta-link:hover {
    color: var(--gold);
    border-color: var(--gold);
}

/* ── Breadcrumb ── */
.breadcrumb {
    padding: .65rem 0 .2rem;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pietra-lt);
}
.breadcrumb a {
    color: var(--borgogna);
    text-decoration: none;
}
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb__sep {
    margin: 0 .4em;
    opacity: .5;
}

/* ── Card "Arrive" — schede info-utili ── */
.arrive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sp-md);
}
.arrive-card {
    background: var(--pergamena);
    border: 1px solid var(--pergamena-ddk);
    border-radius: var(--r-md);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
}
.arrive-card__icon {
    font-size: 2rem;
    margin-bottom: .6rem;
    display: block;
}
.arrive-card__title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--borgogna-dk);
    letter-spacing: .04em;
    margin-bottom: .5rem;
}
.arrive-card p {
    font-size: .9rem;
    color: var(--pietra);
    line-height: 1.6;
    margin-bottom: .4rem;
}
.arrive-card p:last-child { margin-bottom: 0; }
.arrive-card strong { color: var(--borgogna-dk); }

/* ── Listing CTA card (dove-dormire, dove-mangiare) ── */
.listing-cta {
    background: var(--borgogna-dk);
    color: var(--pergamena);
    border-radius: var(--r-md);
    padding: 2rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    box-shadow: var(--shadow-card);
}
.listing-cta__icon { font-size: 2.5rem; }
.listing-cta__title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--gold-lt);
}
.listing-cta__text {
    font-size: .9rem;
    color: var(--pergamena);
    opacity: .85;
    max-width: 360px;
    line-height: 1.55;
}
.listing-cta .btn {
    margin-top: .25rem;
}

/* ── Borgo/Quartiere cards (borghi-quartieri.html) ── */
.borgo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-md);
    margin-top: var(--sp-lg);
}
/* Prima card (campione) si allarga su tutta la prima riga da sola se è l'unica */
@media (min-width: 900px) {
    .borgo-grid .borgo-card:first-child {
        grid-column: span 1;
    }
}
/* Variante borghi: 2 borghi in prima riga + 3 quartieri in seconda */
@media (min-width: 1100px) {
    .borgo-grid--borghi {
        grid-template-columns: repeat(6, 1fr);
    }
    .borgo-grid--borghi .borgo-card:nth-child(-n+2) {
        grid-column: span 3;
    }
    .borgo-grid--borghi .borgo-card:nth-child(n+3) {
        grid-column: span 2;
    }
}
.borgo-card {
    background: var(--pergamena);
    border: 1px solid var(--pergamena-ddk);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform .3s var(--ease);
}
.borgo-card:hover { transform: translateY(-3px); }
.borgo-card__header {
    padding: 1.25rem 1.25rem .75rem;
    border-bottom: 2px solid var(--borgogna);
    background: linear-gradient(135deg, rgba(107,26,42,.05), rgba(107,26,42,.02));
    min-height: 4.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.borgo-card--vincitore .borgo-card__header {
    border-bottom-color: var(--gold);
    background: linear-gradient(135deg, rgba(201,168,76,.1), rgba(201,168,76,.03));
}
.borgo-card__badge {
    display: inline-block;
    font-family: var(--font-display);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--gold-dk);
    background: rgba(201,168,76,.15);
    border: 1px solid rgba(201,168,76,.3);
    border-radius: var(--r-xs);
    padding: .15em .5em;
    margin-bottom: .4rem;
}
.borgo-card__name {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 900;
    color: var(--borgogna-dk);
    letter-spacing: .04em;
    line-height: 1.2;
    white-space: nowrap;
}
.borgo-card__body {
    padding: 1rem 1.25rem 1.25rem;
    font-size: .875rem;
    color: var(--pietra);
    line-height: 1.6;
}

/* Riga interna dell'header: simbolo + nome + colori */
.borgo-card__top-row {
    margin-bottom: .4rem;
}
.borgo-card__identity {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.borgo-card__symbol {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
    color: var(--pietra-lt);
}
.borgo-card__symbol svg,
.borgo-card__symbol img {
    width: 2.5rem;
    height: 2.5rem;
    display: block;
    object-fit: contain;
}
.borgo-card__colori {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--font-display);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pietra-lt);
    margin-top: .25rem;
}
.borgo-card__swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.15);
    flex-shrink: 0;
}

/* ── Albo d'oro ── */
.albo-doro {
    background: var(--pergamena);
}
.albo-doro__wrap {
    overflow-x: auto;
    margin: var(--sp-lg) 0 var(--sp-md);
    border-radius: var(--r-md);
    border: 1px solid var(--pergamena-ddk);
    box-shadow: var(--shadow-card);
}
.albo-doro__table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: .95rem;
}
.albo-doro__table thead {
    background: var(--borgogna);
    color: var(--pergamena);
}
.albo-doro__table thead th {
    padding: .9rem 1.25rem;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}
.albo-doro__table tbody tr {
    border-bottom: 1px solid var(--pergamena-ddk);
    background: #fff;
    transition: background .15s;
}
.albo-doro__table tbody tr:last-child {
    border-bottom: none;
}
.albo-doro__table tbody tr:nth-child(even) {
    background: #f6f6f6;
}
.albo-doro__table tbody tr:hover {
    background: rgba(201,168,76,.12);
}
.albo-doro__table tbody td {
    padding: .75rem 1.25rem;
    color: var(--pietra);
}
/* Prima riga = edizione più recente: evidenziata */
.albo-doro__row--recente td {
    font-weight: 600;
    color: var(--borgogna);
}
/* Badge colore borgo nella colonna vincitore */
.albo-badge {
    display: inline-block;
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    margin-right: .45rem;
    vertical-align: middle;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
/* Placeholder "da inserire" */
.albo-nd {
    color: var(--pietra-xlt);
    font-style: italic;
    font-size: .85rem;
}
.albo-doro__note {
    font-size: .8rem;
    color: var(--pietra-lt);
    font-style: italic;
}
.albo-doro__note a {
    color: var(--borgogna);
}
.albo-doro__note a:hover {
    text-decoration: underline;
}

/* ── Toggle Grandi / Piccoli ── */
.albo-toggle {
    display: flex;
    width: fit-content;
    margin: var(--sp-md) auto 0;
    border: 1.5px solid rgba(107,26,42,.22);
    border-radius: 100px;
    overflow: hidden;
}
.albo-toggle__btn {
    padding: .48rem 1.5rem;
    border: none;
    background: transparent;
    color: var(--borgogna);
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s, color .2s;
    line-height: 1;
}
.albo-toggle__btn + .albo-toggle__btn {
    border-left: 1.5px solid rgba(107,26,42,.22);
}
.albo-toggle__btn--active {
    background: var(--borgogna);
    color: var(--gold);
}
.albo-toggle__btn:not(.albo-toggle__btn--active):hover {
    background: rgba(107,26,42,.07);
}

/* ── Leaderboard classifica vittorie ── */
.leaderboard {
    margin-top: var(--sp-md);
    border-radius: var(--r-md);
    border: 1px solid var(--pergamena-ddk);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.leaderboard__row {
    display: grid;
    grid-template-columns: 2.2rem 1fr auto;
    align-items: center;
    gap: .75rem;
    padding: .72rem 1.25rem;
    border-bottom: 1px solid var(--pergamena-ddk);
    background: #fff;
    transition: background .15s;
}
.leaderboard__row:last-child { border-bottom: none; }
.leaderboard__row:hover { background: rgba(201,168,76,.12); }

.leaderboard__row--primo:hover { background: rgba(201,168,76,.12); }

/* Numero posizione */
.leaderboard__pos {
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--pietra-lt);
    text-align: center;
}
.leaderboard__pos--gold   { color: #b8860b; }
.leaderboard__pos--silver { color: #888; }
.leaderboard__pos--bronze { color: #8b5e3c; }

/* Colonna centrale: nome + barra */
.leaderboard__info {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
}
.leaderboard__nome {
    display: flex;
    align-items: center;
    gap: .48rem;
    font-family: var(--font-display);
    font-size: .8rem;
    font-weight: 600;
    color: var(--pietra);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.leaderboard__swatch {
    display: inline-block;
    width: .58rem;
    height: .58rem;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.leaderboard__bar-wrap {
    height: .28rem;
    background: rgba(0,0,0,.07);
    border-radius: 100px;
    overflow: hidden;
}
.leaderboard__bar {
    height: 100%;
    border-radius: 100px;
    transition: width .55s cubic-bezier(.25,.46,.45,.94);
}

/* Conteggio vittorie (destra) */
.leaderboard__count {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--borgogna);
    min-width: 2rem;
    text-align: right;
    white-space: nowrap;
}
.leaderboard__row--primo .leaderboard__count { color: #b8860b; }

/* ── Statistiche ── */
.statistiche {
    background: var(--pergamena-dk);
}
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sp-md);
    margin: var(--sp-lg) 0 var(--sp-md);
}
.stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .3rem;
    padding: 2rem 1.25rem 1.5rem;
    background: var(--pergamena);
    border: 1px solid var(--pergamena-ddk);
    border-top: 3px solid var(--borgogna);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-card);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}
.stat-card__icona {
    font-size: 1.75rem;
    line-height: 1;
    margin-bottom: .2rem;
}
.stat-card__valore {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 900;
    color: var(--borgogna);
    line-height: 1;
}
/* Valori lunghi (es. nomi di borgo) usano una dimensione ridotta */
.stat-card__valore--sm {
    font-size: 1.15rem;
    line-height: 1.2;
}
.stat-card__etichetta {
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pietra);
}
.stat-card__nota {
    font-size: .7rem;
    font-style: italic;
    color: var(--pietra-xlt);
}
.statistiche__note {
    font-size: .8rem;
    color: var(--pietra-lt);
    font-style: italic;
    text-align: center;
}

/* ── Sezione vota il tuo borgo ── */
.vota {
    background: var(--borgogna-dk);
}
.vota .section__label {
    background: rgba(201, 168, 76, 0.13);
    border-color: rgba(201, 168, 76, 0.38);
    color: var(--gold-lt);
}
.vota .section__label::before,
.vota .section__label::after {
    color: var(--gold);
}
.vota .section__title {
    color: var(--pergamena);
}
.vota__subtitle {
    color: rgba(245,237,216,.75) !important;
}
.vota__disclaimer {
    display: block;
    font-size: .78rem;
    margin-top: .3rem;
    opacity: .65;
}
.vota__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: var(--sp-md);
    margin: var(--sp-lg) 0 var(--sp-md);
}
.vota-card {
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-top: 3px solid var(--borgo-color, var(--gold));
    border-radius: var(--r-md);
    overflow: hidden;
    transition: transform .25s var(--ease), background .25s;
}
.vota-card:hover {
    transform: translateY(-3px);
    background: rgba(255,255,255,.09);
}
.vota-card--scelto {
    background: rgba(255,255,255,.1);
    box-shadow: 0 0 0 2px var(--borgo-color, var(--gold)), 0 8px 24px rgba(0,0,0,.3);
}
.vota-card__header {
    padding: 1.25rem 1rem .85rem;
    flex: 1;
    border-bottom: 1px solid rgba(255,255,255,.07);
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.vota-card__nome {
    display: block;
    font-family: var(--font-display);
    font-size: .85rem;
    font-weight: 700;
    color: var(--pergamena);
    line-height: 1.3;
}
.vota-card__footer {
    padding: .75rem 1rem;
}
.vota-card__btn {
    display: block;
    width: 100%;
    text-align: center;
    border: 1px solid rgba(255,255,255,.25);
    background: transparent;
    color: var(--pergamena);
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .42rem .8rem;
    border-radius: 2rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s, border-color .2s, color .2s;
}
.vota-card__btn:hover:not(:disabled) {
    background: var(--borgo-color, var(--gold));
    border-color: transparent;
}
.vota-card__btn:disabled {
    opacity: .45;
    cursor: default;
}
.vota-card--scelto .vota-card__btn:disabled {
    background: var(--borgo-color, var(--gold));
    border-color: transparent;
    opacity: 1;
}
.vota-card__count {
    font-size: .72rem;
    color: rgba(245,237,216,.85);
}
.vota__message {
    text-align: center;
    padding: .75rem 1rem;
    font-family: var(--font-display);
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .05em;
    color: var(--gold-lt);
}

/* ── Partner / Sponsor cards ── */
.partner-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: var(--sp-lg);
}
.partner-card {
    background: var(--pergamena);
    border: 1px solid var(--pergamena-ddk);
    border-radius: var(--r-md);
    padding: 1.25rem 2rem;
    min-width: 160px;
    text-align: center;
    box-shadow: var(--shadow-card);
    font-family: var(--font-display);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--pietra-lt);
    text-transform: uppercase;
}

/* ── Poi card (punti di interesse — pietralunga.html) ── */
.poi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--sp-md);
    margin-top: var(--sp-md);
}
.poi-card {
    display: flex;
    gap: 1rem;
    background: var(--pergamena);
    border: 1px solid var(--pergamena-ddk);
    border-radius: var(--r-md);
    padding: 1.25rem;
    box-shadow: var(--shadow-card);
}
.poi-card__icon {
    font-size: 2rem;
    flex-shrink: 0;
    line-height: 1;
}
.poi-card__body {}
.poi-card__title {
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 700;
    color: var(--borgogna-dk);
    letter-spacing: .04em;
    margin-bottom: .3rem;
}
.poi-card p {
    font-size: .85rem;
    color: var(--pietra);
    line-height: 1.55;
}

/* ── Miracolo — timeline storica ── */
.storia-timeline {
    position: relative;
    padding-left: 2rem;
    margin-top: var(--sp-lg);
}
.storia-timeline::before {
    content: '';
    position: absolute;
    left: .55rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--borgogna), var(--borgogna-dk));
    border-radius: 1px;
}
.storia-item {
    position: relative;
    margin-bottom: 2rem;
}
.storia-item::before {
    content: '';
    position: absolute;
    left: -1.9rem;
    top: .35rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--borgogna);
    border: 2px solid var(--pergamena);
    box-shadow: 0 0 0 2px var(--borgogna);
}
.storia-item__year {
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .15em;
    color: var(--borgogna);
    text-transform: uppercase;
    margin-bottom: .2rem;
}
.storia-item__title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--borgogna-dk);
    margin-bottom: .4rem;
}
.storia-item p {
    font-size: .9rem;
    color: var(--pietra);
    line-height: 1.6;
}

/* ── Paginazione interna (link "torna a..." nelle pagine interne) ── */
.page-nav {
    display: flex;
    justify-content: center;
    gap: var(--sp-md);
    flex-wrap: wrap;
    padding: var(--sp-md) 0;
}

/* ── Responsive per i nuovi componenti ── */
@media (max-width: 768px) {
    .inner-hero {
        min-height: 300px;
    }
    .miracolo-hero,
    .petra-hero {
        min-height: 300px;
    }
    .inner-hero--programma {
        min-height: 350px;
    }
    .inner-hero__title {
        font-size: clamp(1.6rem, 8vw, 2.6rem);
    }
    .prog-days {
        gap: .35rem;
    }
    .prog-days__pill {
        font-size: .65rem;
        padding: .3rem .7rem;
    }
    .prog-slider {
        padding: 0 1.8rem;
    }
    .prog-slider__btn {
        width: 2rem; height: 2rem;
        font-size: 1.35rem;
    }
    .prog-cta-grid {
        grid-template-columns: 1fr;
    }
    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Colonna Edizione superflua su mobile — nascosta */
    .albo-col-edizione {
        display: none;
    }
    /* Subnav su mobile: left-aligned + fade per suggerire lo scroll */
    .page-subnav__list {
        justify-content: flex-start;
        -webkit-mask-image: none;
        mask-image: none;
        padding-right: 0;
    }
    .page-subnav__arrow {
        display: flex;
    }
    .countdown {
        gap: .75rem;
    }
    .countdown__num {
        font-size: 2rem;
    }
    .countdown__box {
        min-width: 48px;
    }
    .arrive-grid {
        grid-template-columns: 1fr;
    }
    .borgo-grid {
        grid-template-columns: 1fr;
    }
    .poi-grid {
        grid-template-columns: 1fr;
    }
    .storia-timeline {
        padding-left: 1.5rem;
    }
}
@media (max-width: 480px) {
    .borgo-grid {
        grid-template-columns: 1fr;
    }
    .inner-hero__content {
        padding: 2rem var(--sp-sm) 2rem;
    }
    .stat-grid {
        grid-template-columns: 1fr;
    }
    .vota__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ═══════════════════════════════════════════════════════════════
   LISTING CARDS — dove-dormire.html / dove-mangiare.html
   ═══════════════════════════════════════════════════════════════ */

/* Sezione con sfondo chiaro che contiene le card */
.listing-section { background: #faf7f2; }

/* Ricerca */
.listing-search-wrap { margin-bottom: var(--sp-md); }
.listing-search__label {
    display: block;
    font-family: var(--font-display);
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(107,26,42,.6);
    margin-bottom: .5rem;
}
.listing-search__field {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid rgba(107,26,42,.2);
    border-radius: 2rem;
    padding: .5rem 1.1rem;
    gap: .5rem;
    transition: border-color .2s;
    max-width: 480px;
}
.listing-search__field:focus-within { border-color: var(--maroon, #6b1a2a); }
.listing-search__icon { font-size: .85rem; opacity: .45; flex-shrink: 0; }
.listing-search__input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: .88rem;
    color: rgba(40,20,20,.85);
    outline: none;
}
.listing-search__input::placeholder { color: rgba(107,26,42,.35); }
.listing-search__clear {
    border: none;
    background: transparent;
    cursor: pointer;
    color: rgba(107,26,42,.45);
    font-size: .8rem;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}
.listing-search__clear:hover { color: var(--maroon, #6b1a2a); }

/* Filtri */
.listing-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: var(--sp-md) 0 var(--sp-lg);
}
.listing-filter {
    font-family: var(--font-display);
    font-size: .63rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .4rem .9rem;
    border-radius: 2rem;
    border: 1px solid rgba(107,26,42,.22);
    background: transparent;
    color: rgba(107,26,42,.55);
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.listing-filter:hover { border-color: var(--maroon, #6b1a2a); color: var(--maroon, #6b1a2a); }
.listing-filter--active { background: var(--maroon, #6b1a2a); border-color: var(--maroon, #6b1a2a); color: #fff; }
.listing-filter--active:hover { color: #fff; }

/* Nessun risultato */
.listing-no-results {
    text-align: center;
    padding: var(--sp-xl) 0;
    font-family: var(--font-display);
    font-size: .9rem;
    color: rgba(107,26,42,.5);
}
.listing-no-results__reset {
    display: inline-block;
    margin-top: .75rem;
    background: none;
    border: 1px solid rgba(107,26,42,.3);
    border-radius: 2rem;
    padding: .35rem .9rem;
    font-family: var(--font-display);
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--maroon, #6b1a2a);
    cursor: pointer;
}

/* Mostra altri */
.listing-mostra-wrap { text-align: center; margin-top: var(--sp-xl); }

/* Grid */
.listing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-lg);
    margin-top: 0;
}

/* Card */
.listing-card {
    background: #fff;
    border: 1px solid rgba(107,26,42,.1);
    border-top: 3px solid rgba(107,26,42,.15);
    border-radius: var(--r-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
    transition: transform .25s var(--ease), box-shadow .25s;
}
.listing-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(107,26,42,.1);
}
.listing-card--partner { border-top: 3px solid var(--gold); }

.listing-card__badges {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}
.listing-badge {
    font-family: var(--font-display);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .22rem .55rem;
    border-radius: 2rem;
    line-height: 1.4;
}
.listing-badge--partner    { background: var(--gold); color: #3a0a14; }
.listing-badge--nel-borgo  { background: rgba(107,26,42,.9); color: #f5edd8; }
.listing-badge--dintorni   { background: rgba(40,80,50,.9); color: #d8f0e0; }
.listing-badge--taverna    { background: #7a1f1f; color: #f5edd8; }
.listing-badge--osteria    { background: #5a3a10; color: #f5e8d0; }
.listing-badge--ristorante { background: #1f3a6b; color: #d0e4f8; }
.listing-badge--sapori     { background: #4a5f20; color: #e8f0c8; }

.listing-card__body {
    padding: 1.1rem 1.1rem .9rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    flex: 1;
}
.listing-card__name {
    font-family: var(--font-display);
    font-size: .97rem;
    font-weight: 700;
    color: var(--maroon, #6b1a2a);
    margin: 0;
    line-height: 1.3;
}
.listing-card__tipo {
    display: block;
    font-family: var(--font-display);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9a7410;
    margin-top: .15rem;
}
.listing-card__desc {
    font-size: .84rem;
    color: rgba(40,20,20,.68);
    line-height: 1.65;
    margin: 0;
}
.listing-card__meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.listing-card__meta li { font-size: .78rem; color: rgba(40,20,20,.52); }
.listing-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.listing-tag {
    font-family: var(--font-display);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .07em;
    padding: .18rem .5rem;
    border-radius: 2rem;
    background: rgba(107,26,42,.07);
    color: var(--maroon, #6b1a2a);
    border: 1px solid rgba(107,26,42,.15);
}
.listing-card__footer {
    margin-top: auto;
    padding-top: .75rem;
    border-top: 1px solid rgba(107,26,42,.08);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .6rem;
    flex-wrap: wrap;
}
.listing-card__contacts { display: flex; flex-direction: column; gap: .28rem; }
.listing-contact {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .76rem;
    color: rgba(107,26,42,.6);
    text-decoration: none;
    transition: color .2s;
}
.listing-contact:hover { color: var(--maroon, #6b1a2a); }
.listing-card__web {
    display: inline-block;
    font-family: var(--font-display);
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .32rem .7rem;
    border-radius: 2rem;
    border: 1px solid rgba(107,26,42,.3);
    color: var(--maroon, #6b1a2a);
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s, border-color .2s, color .2s;
}
.listing-card__web:hover { background: var(--maroon, #6b1a2a); color: #fff; border-color: var(--maroon, #6b1a2a); }

/* Link dorato inline */
.link--gold {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: .2em;
}
.link--gold:hover { color: var(--gold-lt); }

/* CTA diventa partner */
.partner-join {
    background: linear-gradient(135deg, #130810 0%, #220d15 100%);
    border-top: 1px solid rgba(201,168,76,.15);
    border-bottom: 1px solid rgba(201,168,76,.15);
}
.partner-join__inner {
    display: flex;
    align-items: center;
    gap: var(--sp-xl);
}
.partner-join__icon {
    font-size: 3.5rem;
    opacity: .6;
    flex-shrink: 0;
}
.partner-join__label {
    font-family: var(--font-display);
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 .4rem;
}
.partner-join__title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--pergamena);
    margin: 0 0 .75rem;
    line-height: 1.2;
}
.partner-join__lead {
    color: rgba(245,237,216,.65);
    font-size: .92rem;
    line-height: 1.75;
    margin: 0 0 1.25rem;
    max-width: 54ch;
}

@media (max-width: 1024px) {
    .listing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .listing-grid { grid-template-columns: 1fr; }
    .listing-search__field { max-width: 100%; }
    .partner-join__inner { flex-direction: column; text-align: center; }
    .partner-join__icon  { font-size: 2.5rem; }
    .partner-join__lead  { margin-left: auto; margin-right: auto; }
}

/* ============================================================
   17. QUIZ — A quale borgo appartieni?
       Tutte le variabili di colore usano le custom property
       già definite in :root (sezione 0).
============================================================ */

/* ── Sezione contenitore ──────────────────────────────────── */
.quiz-section {
    background: var(--pergamena);
}

.quiz-wrap {
    max-width: 700px;
    margin: 0 auto;
}

/* ── Schermata Intro ──────────────────────────────────────── */
.quiz-intro {
    text-align: center;
    padding: var(--sp-lg) var(--sp-md) var(--sp-md);
    animation: quizFadeUp 0.44s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.quiz-intro__icon {
    font-size: 3.2rem;
    line-height: 1;
    display: block;
    margin-bottom: var(--sp-sm);
}

.quiz-intro__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 700;
    color: var(--borgogna-dk);
    margin-bottom: 0.6rem;
}

.quiz-intro__desc {
    font-size: 1rem;
    color: var(--pietra-lt);
    max-width: 50ch;
    margin: 0 auto var(--sp-md);
    line-height: 1.75;
}

.quiz-intro__tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: var(--sp-md);
}

.quiz-intro__tags li {
    font-size: 0.82rem;
    font-style: italic;
    color: var(--pietra-lt);
    background: rgba(201, 168, 76, 0.09);
    border: 1px solid rgba(201, 168, 76, 0.22);
    border-radius: 100px;
    padding: 0.28em 0.9em;
}

/* ── Progress bar ─────────────────────────────────────────── */
.quiz-progress-wrap {
    height: 3px;
    background: rgba(107, 26, 42, 0.1);
    border-radius: 3px;
    margin-bottom: 0.8rem;
    overflow: hidden;
}

.quiz-progress-bar {
    height: 100%;
    background: var(--grad-gold);
    border-radius: 3px;
    transition: width 0.5s var(--ease);
}

.quiz-step-label {
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-dk);
    margin-bottom: var(--sp-sm);
}

/* ── Card domanda ─────────────────────────────────────────── */
.quiz-question-card {
    background: #ffffff;
    border: 1px solid var(--pergamena-ddk);
    border-radius: var(--r-md);
    padding: var(--sp-md) var(--sp-md) calc(var(--sp-md) * 1.1);
    box-shadow: var(--sh-md);
}

.quiz-question-text {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 2.4vw, 1.35rem);
    font-weight: 600;
    color: var(--borgogna-dk);
    line-height: 1.35;
    margin-bottom: var(--sp-md);
}

/* ── Risposte ─────────────────────────────────────────────── */
.quiz-answers {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.quiz-answer {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--pergamena);
    border: 1.5px solid var(--pergamena-ddk);
    border-radius: var(--r-sm);
    padding: 0.8em 1.1em;
    font-family: var(--font-body);
    font-size: 0.97rem;
    color: var(--pietra);
    cursor: pointer;
    line-height: 1.5;
    transition:
        background var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease),
        color var(--t-fast) var(--ease),
        transform var(--t-fast) var(--ease),
        box-shadow var(--t-fast) var(--ease);
}

.quiz-answer::before {
    content: "›";
    margin-right: 0.6em;
    color: var(--borgogna);
    opacity: 0;
    transition: opacity var(--t-fast) var(--ease);
}

.quiz-answer:hover,
.quiz-answer:focus-visible {
    background: rgba(107, 26, 42, 0.05);
    border-color: var(--borgogna);
    color: var(--borgogna-dk);
    transform: translateX(4px);
    box-shadow: var(--sh-xs);
}

.quiz-answer:hover::before,
.quiz-answer:focus-visible::before {
    opacity: 1;
}

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

.quiz-answer--selected {
    background: var(--borgogna) !important;
    border-color: var(--borgogna-dk) !important;
    color: var(--pergamena) !important;
    transform: translateX(4px);
}

.quiz-answer--selected::before {
    content: "✓";
    opacity: 1;
    color: var(--gold-lt);
}

.quiz-answer:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.quiz-answer--selected:disabled {
    opacity: 1;
}

/* ── Animazioni step ──────────────────────────────────────── */
.quiz-step {
    animation: quizFadeUp 0.36s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.quiz-step--out {
    animation: quizFadeOut 0.24s ease-in both;
    pointer-events: none;
}

@keyframes quizFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes quizFadeOut {
    to { opacity: 0; transform: translateY(-10px); }
}

/* ── Schermata Risultato ─────────────────────────────────── */
.quiz-result {
    text-align: center;
    padding: var(--sp-md) var(--sp-sm) var(--sp-lg);
    animation: quizFadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.quiz-result-emblem {
    --borgo-color: var(--borgogna);
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: var(--borgo-color);
    border: 3px solid var(--gold);
    box-shadow:
        0 0 0 7px rgba(201, 168, 76, 0.15),
        0 0 0 14px rgba(201, 168, 76, 0.06),
        var(--sh-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--sp-md);
    animation: quizEmblemPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}
.quiz-result-emblem img {
    width: 86px;
    height: 86px;
    object-fit: contain;
    display: block;
}

@keyframes quizEmblemPop {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: scale(1); }
}

.quiz-result__pretitle {
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-dk);
    margin-bottom: 0.35rem;
}

.quiz-result__nome {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 5vw, 2.8rem);
    font-weight: 900;
    color: var(--borgogna-dk);
    line-height: 1.1;
    margin-bottom: 0.3rem;
}

.quiz-result__titolo {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-style: italic;
    color: var(--pietra-lt);
    margin-bottom: var(--sp-sm);
}

.quiz-result__divider {
    width: 60px;
    height: 2px;
    background: var(--grad-gold);
    border-radius: 2px;
    margin: 0 auto var(--sp-md);
}

.quiz-result__desc {
    font-size: 1rem;
    color: var(--pietra);
    line-height: 1.85;
    max-width: 54ch;
    margin: 0 auto var(--sp-md);
}

/* ── Card grafica condivisibile ───────────────────────────── */
.quiz-result__card-preview {
    max-width: 280px;
    margin: var(--sp-md) auto 0;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--sh-xl);
    border: 1px solid rgba(201, 168, 76, 0.2);
}
.quiz-result__card-preview img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Azioni risultato ─────────────────────────────────────── */
.quiz-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: var(--sp-md);
}

/* ── Pulsante condividi feedback ──────────────────────────── */
.quiz-share-feedback {
    font-size: 0.82rem;
    color: var(--gold-dk);
    font-style: italic;
    margin-top: 0.5rem;
    min-height: 1.2em;
    text-align: center;
}

/* ── Mobile quiz ──────────────────────────────────────────── */
@media (max-width: 640px) {
    .quiz-wrap {
        padding: 0;
    }
    .quiz-question-card {
        padding: var(--sp-sm);
        border-radius: var(--r-sm);
    }
    .quiz-intro {
        padding: var(--sp-md) var(--sp-sm) var(--sp-sm);
    }
    .quiz-result-emblem {
        width: 100px;
        height: 100px;
    }
    .quiz-result-emblem img {
        width: 66px;
        height: 66px;
    }
    .quiz-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .quiz-actions .btn {
        text-align: center;
    }
}

/* ============================================================
   18. IL MIRACOLO — pagina narrativa premium
       Sezioni aggiuntive rispetto al blocco .miracolo esistente.
       I CSS originali (.miracolo, .storia-timeline, ecc.) restano
       invariati in sezione 7.
============================================================ */

/* ── Hero scenografico potenziato ────────────────────────── */
.miracolo-hero {
    min-height: 390px;
    align-items: center; /* centra verticalmente invece di flex-end */
}

.miracolo-hero__watermark {
    position: absolute;
    bottom: var(--sp-md);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: clamp(1rem, 2.5vw, 1.8rem);
    letter-spacing: 0.55em;
    color: rgba(201, 168, 76, 0.14);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.miracolo-hero__content {
    /* override padding per versione centrata */
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.miracolo-hero__cta {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--sp-md);
}

/* ── Introduzione narrativa ───────────────────────────────── */
.miracolo-intro {
    background: var(--pergamena);
    text-align: center;
}

.miracolo-intro__wrap {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
}

.miracolo-intro__anno {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(4rem, 12vw, 9rem);
    font-weight: 900;
    color: rgba(107, 26, 42, 0.055);
    letter-spacing: 0.06em;
    line-height: 1;
    user-select: none;
    pointer-events: none;
    margin-bottom: -2.5rem; /* sovrappone il titolo */
}

.miracolo-intro__title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    font-weight: 700;
    color: var(--borgogna-dk);
    line-height: 1.2;
    margin-bottom: var(--sp-sm);
    position: relative;
    z-index: 1;
}

.miracolo-intro__ornament {
    color: var(--gold);
    opacity: 0.5;
    margin: var(--sp-sm) auto;
    max-width: 400px;
}

.miracolo-intro__lead {
    font-size: clamp(0.98rem, 1.8vw, 1.1rem);
    color: var(--pietra);
    line-height: 1.9;
    max-width: 62ch;
    margin: 0 auto var(--sp-sm);
}

/* ── Capitoli narrativi ───────────────────────────────────── */
.miracolo-capitoli {
    background: var(--nero-soft);
    padding: var(--sp-xl) 0;
}

.capitolo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-xl);
    align-items: center;
    padding: var(--sp-xl) 0;
    border-bottom: 1px solid rgba(201, 168, 76, 0.07);
    position: relative;
}
.capitolo:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Inversione layout: immagine a sinistra, testo a destra */
.capitolo--reverse .capitolo__content { grid-column: 2; grid-row: 1; }
.capitolo--reverse .capitolo__img-wrap { grid-column: 1; grid-row: 1; }

/* Ultimo capitolo: centrato senza immagine laterale tradizionale */
.capitolo--last {
    grid-template-columns: 1.1fr 0.9fr;
}

.capitolo__num {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 7vw, 6rem);
    font-weight: 900;
    color: rgba(201, 168, 76, 0.1);
    line-height: 1;
    letter-spacing: 0.04em;
    margin-bottom: 0.3rem;
    user-select: none;
}

.capitolo__label {
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.5rem;
}

.capitolo__title {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 3vw, 1.9rem);
    font-weight: 700;
    color: var(--gold-lt);
    line-height: 1.2;
    margin-bottom: var(--sp-sm);
    padding-bottom: var(--sp-sm);
    border-bottom: 1px solid rgba(201, 168, 76, 0.18);
}

.capitolo__text {
    color: rgba(245, 237, 216, 0.78);
    font-size: 1rem;
    line-height: 1.9;
}
.capitolo__text p + p {
    margin-top: 0.85rem;
}

.capitolo__tradition {
    font-style: italic;
    color: rgba(245, 237, 216, 0.5);
    font-size: 0.9rem;
    display: flex;
    align-items: flex-start;
    gap: 0.6em;
    margin-top: 0.85rem;
    border-left: 2px solid rgba(201, 168, 76, 0.2);
    padding-left: 0.8em;
    line-height: 1.7;
}

.capitolo__quote {
    margin-top: var(--sp-md);
    border-left: 3px solid var(--gold);
    padding: var(--sp-sm) var(--sp-md);
    font-style: italic;
    color: var(--gold-lt);
    font-size: 1.05rem;
    line-height: 1.7;
    background: rgba(201, 168, 76, 0.05);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* ── Immagine placeholder capitolo ── */
.capitolo__img-wrap {
    border-radius: var(--r-md);
    overflow: hidden;
    aspect-ratio: 5 / 4.4;
    box-shadow:
        0 0 60px rgba(201, 168, 76, 0.08),
        var(--sh-xl);
    position: relative;
}
.capitolo__img-wrap::after {
    content: '';
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(201, 168, 76, 0.12);
    border-radius: calc(var(--r-md) - 3px);
    pointer-events: none;
    z-index: 1;
}
.capitolo__img-wrap--glow {
    box-shadow:
        0 0 80px rgba(201, 168, 76, 0.18),
        var(--sh-xl);
}
.capitolo__img-wrap--glow::after {
    border-color: rgba(201, 168, 76, 0.22);
}

.capitolo__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.capitolo__img-ph {
    width: 100%;
    height: 100%;
    min-height: 320px;
    background: linear-gradient(135deg, #1c0f0c 0%, #0f0a07 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: var(--sp-md);
}
.capitolo__img-ph--gold {
    background: linear-gradient(135deg, #1a1008 0%, #0d0a05 100%);
}

.capitolo__img-ph-icon {
    font-size: 2.8rem;
    opacity: 0.22;
    line-height: 1;
}
.capitolo__img-ph-label {
    font-family: var(--font-display);
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(201, 168, 76, 0.35);
    text-align: center;
}
.capitolo__img-ph-sub {
    font-size: 0.72rem;
    font-style: italic;
    color: rgba(201, 168, 76, 0.22);
    text-align: center;
}

/* ── Timeline potenziata ──────────────────────────────────── */
.miracolo-storia-timeline {
    max-width: 720px;
}

.storia-item--highlight::before {
    width: 13px;
    height: 13px;
    left: -2.12rem;
    top: 0.28rem;
    background: var(--borgogna);
    box-shadow: 0 0 0 3px rgba(107, 26, 42, 0.25);
}

.storia-item--gold::before {
    background: var(--gold);
    box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.25);
    width: 15px;
    height: 15px;
    left: -2.22rem;
    top: 0.22rem;
}
.storia-item--gold .storia-item__year {
    color: var(--gold-dk);
    font-size: 0.78rem;
}
.storia-item--gold .storia-item__title {
    font-size: 1.05rem;
    color: var(--borgogna);
}

/* ── Simboli del Miracolo ─────────────────────────────────── */
.miracolo-simboli__title { color: var(--gold-lt); }
.miracolo-simboli__title::after {
    background: linear-gradient(to right, var(--gold-lt), transparent);
}
.miracolo-simboli__subtitle { color: rgba(245, 237, 216, 0.55); }

.simboli-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-sm);
    margin-top: var(--sp-lg);
}

.simbolo-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(201, 168, 76, 0.1);
    border-radius: var(--r-md);
    padding: var(--sp-md) var(--sp-sm) calc(var(--sp-md) * 1.1);
    text-align: center;
    transition:
        background var(--t-med) var(--ease),
        border-color var(--t-med) var(--ease),
        transform var(--t-med) var(--ease),
        box-shadow var(--t-med) var(--ease);
    position: relative;
    overflow: hidden;
}
.simbolo-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad-gold);
    opacity: 0;
    transition: opacity var(--t-med) var(--ease);
}
.simbolo-card:hover {
    background: rgba(201, 168, 76, 0.05);
    border-color: rgba(201, 168, 76, 0.28);
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}
.simbolo-card:hover::before {
    opacity: 1;
}

.simbolo-card__icon {
    font-size: 2rem;
    line-height: 1;
    display: block;
    margin-bottom: 0.9rem;
    color: var(--gold);
    opacity: 0.7;
}
.simbolo-card__title {
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--gold-lt);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.7rem;
}
.simbolo-card__desc {
    font-size: 0.88rem;
    color: rgba(245, 237, 216, 0.6);
    line-height: 1.75;
}

/* ── Il Volto Santo di Lucca ──────────────────────────────── */
.miracolo-volto-santo {
    background: var(--pergamena);
}

.volto-santo-intro {
    display: grid;
    grid-template-columns: minmax(180px, 260px) 1fr;
    gap: var(--sp-xl);
    align-items: center;
    margin-bottom: var(--sp-xl);
}
.volto-santo-intro__img {
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--sh-xl);
}
.volto-santo-intro__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.volto-santo-intro__text .section__label {
    color: var(--gold-lt);
}
.volto-santo-intro__text__lead {
    color: var(--pietra);
    line-height: 1.75;
    margin-top: var(--sp-sm);
}

.volto-santo__accordion {
    max-width: var(--max-w-narrow);
    margin: 0 auto;
}
.volto-santo__accordion .faq__answer em {
    font-style: italic;
    color: var(--borgogna);
}
.volto-santo__accordion .faq__answer blockquote {
    margin-top: var(--sp-sm);
}
.volto-santo__accordion .faq__answer blockquote p {
    margin: 0;
}
.volto-santo__accordion .faq__answer blockquote p + p {
    margin-top: 0.5rem;
}

.volto-santo__fonti {
    max-width: var(--max-w-narrow);
    margin: var(--sp-lg) auto 0;
    padding-top: var(--sp-md);
    border-top: 1px solid rgba(110, 96, 80, 0.18);
}
.volto-santo__fonti-title {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pietra-lt);
    margin-bottom: 0.5rem;
}
.volto-santo__fonti-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.volto-santo__fonti-list li {
    font-size: 0.82rem;
    color: var(--pietra-lt);
    line-height: 1.5;
}
.volto-santo__fonti-list a {
    color: var(--borgogna);
    text-decoration: underline;
    text-decoration-color: rgba(107, 26, 42, 0.35);
    text-underline-offset: 2px;
}
.volto-santo__fonti-list a:hover {
    text-decoration-color: var(--borgogna);
}

.volto-santo__gallery-heading {
    margin-top: var(--sp-xl);
    text-align: center;
}
.volto-santo__gallery-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--borgogna-dk);
}

@media (max-width: 720px) {
    .volto-santo-intro {
        grid-template-columns: 1fr;
    }
    .volto-santo-intro__img {
        max-width: 220px;
        margin: 0 auto;
    }
}

/* ── Dal Miracolo al Palio ────────────────────────────────── */
.miracolo-ponte {
    background: var(--pergamena);
}

.miracolo-ponte__inner {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-xl);
    align-items: center;
}

.miracolo-ponte__visual {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-width: 160px;
}

.miracolo-ponte__anno {
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 900;
    color: rgba(107, 26, 42, 0.12);
    line-height: 1;
    display: block;
}

.miracolo-ponte__freccia {
    font-size: 2rem;
    color: var(--borgogna);
    opacity: 0.25;
    display: block;
    margin: 0.3rem 0;
    line-height: 1;
}

.miracolo-ponte__oggi {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    color: rgba(107, 26, 42, 0.18);
    line-height: 1;
    display: block;
}

.miracolo-ponte__testo p {
    color: var(--pietra);
    line-height: 1.85;
    margin-bottom: 0.9rem;
    font-size: 1rem;
}
.miracolo-ponte__testo p:last-of-type { margin-bottom: 0; }

.miracolo-ponte__cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: var(--sp-md);
}

/* ── Gallery evocativa ────────────────────────────────────── */
.miracolo-gallery-section {
    background: var(--nero-soft);
}

.miracolo-gallery__title { color: var(--gold-lt); }
.miracolo-gallery__title::after {
    background: linear-gradient(to right, var(--gold-lt), transparent);
}

.miracolo-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-sm);
    margin-top: var(--sp-lg);
}

.gallery-item {
    border-radius: var(--r-md);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    position: relative;
    background: #100c08;
    display: block;
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.55s var(--ease);
}
.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-item__ph {
    width: 100%;
    height: 100%;
    min-height: 180px;
    background: linear-gradient(145deg, #1c1008 0%, #0e0a07 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: var(--sp-sm);
}

.gallery-item__ph-icon {
    font-size: 2.2rem;
    opacity: 0.2;
    line-height: 1;
}
.gallery-item__ph-label {
    font-family: var(--font-display);
    font-size: 0.62rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(201, 168, 76, 0.3);
    text-align: center;
}

.gallery-item__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(10, 5, 3, 0.82));
    padding: 2rem 1rem 0.75rem;
    font-size: 0.8rem;
    color: rgba(245, 237, 216, 0.82);
    font-style: italic;
    line-height: 1.4;
}

/* ── Section label: colore esplicito nella sezione ponte ── */
.miracolo-ponte .section__label {
    color: var(--gold-lt);
}

/* ── Gallery orizzontale a scorrimento ────────────────────── */
.gallery-h-wrap {
    position: relative;
    margin-top: var(--sp-lg);
    /* Fade ai bordi per effetto profondità */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 5%,
        black 95%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 5%,
        black 95%,
        transparent 100%
    );
}

.gallery-h-track {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Padding verticale generoso: evita che l'overflow tagli
       nettamente l'ombra delle card (deve sfumare, non troncarsi) */
    padding: var(--sp-lg) var(--sp-md);
    cursor: grab;
}
.gallery-h-track::-webkit-scrollbar { display: none; }
.gallery-h-track.is-grabbing {
    cursor: grabbing;
    user-select: none;
    scroll-snap-type: none; /* disattiva snap durante il drag */
}

/* ── Singola card foto ── */
.gallery-h-item {
    flex: 0 0 clamp(230px, 30vw, 350px);
    scroll-snap-align: center;
    border-radius: var(--r-md);
    overflow: hidden;
    aspect-ratio: 2 / 3;
    position: relative;
    background: linear-gradient(145deg, #1c1008 0%, #0e0a07 100%);
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(201, 168, 76, 0.06);
    transition:
        transform 0.38s var(--ease),
        box-shadow 0.38s var(--ease);
    flex-shrink: 0;
}
.gallery-h-item--square {
    aspect-ratio: 1 / 1;
}
.gallery-h-item::before {
    /* gold top border che emerge all'hover */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad-gold);
    opacity: 0;
    transition: opacity 0.3s var(--ease);
    z-index: 2;
}
.gallery-h-item:hover {
    transform: translateY(-8px) scale(1.015);
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(201, 168, 76, 0.18);
}
.gallery-h-item:hover::before {
    opacity: 1;
}

.gallery-h-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s var(--ease);
}
.gallery-h-item:hover img {
    transform: scale(1.06);
}

/* Placeholder quando l'immagine non è ancora inserita */
.gallery-h-ph {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: var(--sp-md);
}
.gallery-h-ph-icon {
    font-size: 2.6rem;
    opacity: 0.16;
    line-height: 1;
}
.gallery-h-ph-path {
    font-family: var(--font-display);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(201, 168, 76, 0.26);
    text-align: center;
    line-height: 1.5;
}

/* Didascalia sovrapposta in basso */
.gallery-h-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 3.5rem 1.1rem 1rem;
    background: linear-gradient(transparent, rgba(10, 5, 3, 0.9));
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    z-index: 1;
}
.gallery-h-num {
    font-family: var(--font-display);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--gold);
    opacity: 0.75;
    display: block;
}
.gallery-h-caption {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-style: italic;
    color: rgba(245, 237, 216, 0.85);
    line-height: 1.4;
}

/* ── Frecce di navigazione ── */
.gallery-h-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gold);
    border: 1px solid rgba(62, 14, 24, 0.25);
    color: var(--borgogna-dk);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease),
        transform var(--t-fast) var(--ease);
}
.gallery-h-arrow:hover {
    background: var(--gold-lt);
    border-color: var(--borgogna-dk);
    transform: translateY(-50%) scale(1.1);
}
.gallery-h-arrow:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}
.gallery-h-arrow[hidden] { display: none; }
.gallery-h-arrow--left  { left:  0.75rem; }
.gallery-h-arrow--right { right: 0.75rem; }

/* ── Contatore numerico (galleria con molti elementi) ── */
.gallery-h-counter {
    text-align: center;
    margin-top: var(--sp-sm);
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: rgba(201, 168, 76, 0.55);
}
.gallery-h-counter #galleryCounterCurrent {
    color: var(--gold);
}

/* ── Responsive — Il Miracolo ─────────────────────────────── */
@media (max-width: 960px) {
    .capitolo,
    .capitolo--reverse .capitolo__content,
    .capitolo--reverse .capitolo__img-wrap,
    .capitolo--last {
        grid-template-columns: 1fr;
        grid-column: unset !important;
        grid-row: unset !important;
    }
    .capitolo {
        gap: var(--sp-md);
        padding: var(--sp-lg) 0;
    }
    .capitolo__img-wrap {
        aspect-ratio: 16 / 9;
        order: -1; /* immagine sempre sopra il testo su mobile */
    }
    .capitolo__img-ph {
        min-height: 200px;
    }
    .simboli-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .miracolo-ponte__inner {
        grid-template-columns: 1fr;
    }
    .miracolo-ponte__visual {
        display: none; /* nasconde il decorativo numerico su mobile */
    }
}

@media (max-width: 640px) {
    .miracolo-hero__cta {
        flex-direction: column;
        align-items: center;
    }
    .miracolo-hero__cta .btn {
        min-width: 200px;
        text-align: center;
    }
    .simboli-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    .simbolo-card {
        padding: var(--sp-sm);
    }
    .miracolo-ponte__cta {
        flex-direction: column;
    }
    .miracolo-ponte__cta .btn {
        text-align: center;
    }
    .miracolo-intro__anno {
        font-size: clamp(3rem, 18vw, 5.5rem);
        margin-bottom: -1.5rem;
    }
    /* Gallery orizzontale su mobile: card quasi full-width */
    .gallery-h-item {
        flex: 0 0 82vw;
        aspect-ratio: 3 / 4;
    }
    .gallery-h-arrow {
        display: none; /* su touch si trascina, frecce non servono */
    }
    .gallery-h-wrap {
        -webkit-mask-image: none; /* rimuove il fade laterale: su mobile va tutto allo stretto */
        mask-image: none;
    }
}


/* ============================================================
   19. PIETRALUNGA — PAGINA TURISTICA
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────────── */
.petra-hero {
    min-height: 390px;
    display: flex;
    align-items: center;
}

.petra-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-sm);
}

.petra-hero__cta {
    display: flex;
    gap: var(--sp-sm);
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--sp-md);
}

/* Scroll indicator */
.petra-hero__scroll {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    margin-top: var(--sp-lg);
    border: 1px solid rgba(222, 196, 138, .35);
    border-radius: 50%;
    color: var(--pergamena-dk);
    font-size: 1rem;
    text-decoration: none;
    opacity: .55;
    transition: opacity .2s, border-color .2s;
    animation: petra-scroll-bounce 2.2s ease-in-out infinite;
}
.petra-hero__scroll:hover,
.petra-hero__scroll:focus-visible {
    opacity: 1;
    border-color: var(--gold);
    color: var(--gold);
}

@keyframes petra-scroll-bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(5px); }
}

/* btn outline light (su sfondi scuri) */
.btn--outline-light {
    background: transparent;
    color: var(--pergamena);
    border: 1.5px solid rgba(222, 196, 138, .5);
    padding: .7rem 1.6rem;
    font-family: var(--font-title);
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 2px;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
    text-decoration: none;
    display: inline-block;
}
.btn--outline-light:hover,
.btn--outline-light:focus-visible {
    background: rgba(222, 196, 138, .1);
    border-color: var(--gold);
    color: var(--gold);
}

/* ── Stat cards ───────────────────────────────────────────── */
.petra-stats-section {
    background: var(--borgogna);
    padding: var(--sp-md) 0;
}

.petra-stats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
}

.petra-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: var(--sp-md) var(--sp-sm);
    border-right: 1px solid rgba(255,255,255,.08);
    text-align: center;
}
.petra-stat-card:last-child {
    border-right: none;
}

.petra-stat-icon {
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: .15rem;
}

.petra-stat-value {
    font-family: var(--font-title);
    font-size: clamp(.95rem, 1.8vw, 1.3rem);
    font-weight: 700;
    color: var(--gold);
    letter-spacing: .03em;
}

.petra-stat-label {
    font-family: var(--font-body);
    font-size: .68rem;
    color: var(--pergamena-dk);
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .7;
    line-height: 1.3;
}

/* ── Durante il Palio ─────────────────────────────────────── */
.petra-palio__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-xl);
    align-items: center;
}

.petra-palio__lead {
    font-size: 1.15rem;
    font-style: italic;
    color: var(--borgogna);
    margin-bottom: var(--sp-sm);
    line-height: 1.6;
}

.petra-palio__links {
    display: flex;
    gap: var(--sp-md);
    margin-top: var(--sp-md);
    flex-wrap: wrap;
}

.link-arrow {
    font-family: var(--font-title);
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--borgogna);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: color .2s, border-color .2s;
}
.link-arrow:hover,
.link-arrow:focus-visible {
    color: var(--gold-dk);
    border-color: var(--gold-dk);
}

.petra-palio__image-wrap {
    border-radius: 3px;
    overflow: hidden;
}

.petra-palio__img-ph {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 3px;
    background: var(--pergamena-dk);
}

.petra-palio__img-ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.petra-palio__img-ph:hover img {
    transform: scale(1.04);
}

/* ── POI grid large ───────────────────────────────────────── */
.poi-grid-lg {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-md);
    margin-top: var(--sp-lg);
}

.poi-card-lg {
    background: var(--pergamena);
    border-radius: 4px;
    border: 1px solid var(--pergamena-dk);
    border-top: 3px solid transparent;
    padding: var(--sp-md);
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
    transition: transform .22s ease, box-shadow .22s ease, border-top-color .22s ease;
}
.poi-card-lg:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 32px rgba(0,0,0,.1);
    border-top-color: var(--gold-dk);
}

/* header row: badge + icon side by side */
.poi-card-lg__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-xs);
}

.poi-card-lg__badge {
    display: inline-block;
    font-family: var(--font-title);
    font-size: .62rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--borgogna);
    border: 1px solid var(--borgogna);
    border-radius: 2px;
    padding: 2px 7px;
    opacity: .65;
}

.poi-card-lg__icon {
    font-size: 1.6rem;
    line-height: 1;
}

.poi-card-lg__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.poi-card-lg__title {
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 700;
    color: var(--borgogna);
    margin: 0;
    line-height: 1.3;
}

.poi-card-lg__body p {
    font-family: var(--font-body);
    font-size: .86rem;
    line-height: 1.65;
    color: var(--text);
    margin: 0;
}

.poi-card-lg__tag {
    font-family: var(--font-body);
    font-size: .73rem;
    color: var(--gold-dk);
    font-style: italic;
    margin-top: auto;
    padding-top: .6rem;
    border-top: 1px solid var(--pergamena-dk);
}

/* ── Mappa / Orientarsi ───────────────────────────────────── */
.petra-mappa-section {
    background: var(--pergamena-dk);
}

/* intestazione centrata */
.petra-mappa-section__heading {
    text-align: center;
    margin-bottom: var(--sp-lg);
}

.petra-mappa-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-xl);
    align-items: stretch;
}

/* colonna sinistra: distanze */
.petra-mappa-distances {
    background: var(--pergamena);
    border-radius: 4px;
    border: 1px solid rgba(107, 26, 42, .12);
    padding: var(--sp-lg);
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}

.petra-mappa-distances__title {
    font-family: var(--font-title);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--borgogna);
    margin: 0 0 var(--sp-xs);
}

.petra-mappa-distances__list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.petra-mappa-distances__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-sm);
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--pergamena-dk);
}
.petra-mappa-distances__row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.petra-mappa-distances__row dt {
    font-family: var(--font-title);
    font-size: .82rem;
    font-weight: 700;
    color: var(--borgogna);
    white-space: nowrap;
}

.petra-mappa-distances__row dd {
    font-family: var(--font-body);
    font-size: .82rem;
    color: var(--text);
    margin: 0;
    text-align: right;
}

.petra-mappa-distances__nota {
    font-family: var(--font-body);
    font-size: .78rem;
    color: var(--text);
    opacity: .75;
    line-height: 1.5;
    margin: var(--sp-sm) 0 0;
    padding-top: var(--sp-sm);
    border-top: 1px solid var(--pergamena-dk);
}

/* colonna destra: CTA mappa */
.petra-mappa-cta {
    background: var(--borgogna);
    border-radius: 4px;
    padding: var(--sp-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-sm);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.petra-mappa-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center top, rgba(183,142,64,.15) 0%, transparent 65%);
    pointer-events: none;
}

.petra-mappa-cta__icon {
    font-size: 2.4rem;
    line-height: 1;
    position: relative;
}

.petra-mappa-cta__title {
    font-family: var(--font-title);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--pergamena);
    margin: 0;
    position: relative;
}

.petra-mappa-cta__coords {
    font-family: var(--font-body);
    font-size: .8rem;
    color: var(--pergamena-dk);
    margin: 0;
    opacity: .7;
    position: relative;
}

.petra-mappa-cta .btn {
    position: relative;
    margin-top: var(--sp-xs);
}

.petra-mappa-cta__secondary {
    font-family: var(--font-title);
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pergamena-dk);
    text-decoration: none;
    opacity: .65;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    position: relative;
    transition: opacity .2s, color .2s;
}
.petra-mappa-cta__secondary:hover,
.petra-mappa-cta__secondary:focus-visible {
    opacity: 1;
    color: var(--gold);
}

/* ── Itinerari ────────────────────────────────────────────── */
.itinerari-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-md);
    margin-top: var(--sp-lg);
    align-items: start;
}

.itinerario-card {
    background: var(--pergamena);
    border: 1px solid var(--pergamena-dk);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.itinerario-card--featured {
    border-color: var(--gold-dk);
    box-shadow: 0 0 0 2px var(--gold-dk);
    position: relative;
}
.itinerario-card--featured::before {
    content: '★ Consigliato';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gold-dk);
    color: var(--borgogna);
    font-family: var(--font-title);
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 3px 14px;
    border-radius: 0 0 4px 4px;
    white-space: nowrap;
}

.itinerario-card__header {
    background: var(--borgogna);
    padding: var(--sp-sm) var(--sp-md);
    padding-top: var(--sp-md);
}
.itinerario-card--featured .itinerario-card__header {
    padding-top: calc(var(--sp-md) + 1.1rem);
}

.itinerario-card__durata {
    display: block;
    font-family: var(--font-title);
    font-size: .62rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: .3rem;
}

.itinerario-card__title {
    font-family: var(--font-title);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--pergamena);
    margin: 0;
    line-height: 1.25;
}

.itinerario-card__steps {
    padding: var(--sp-md);
    margin: 0;
    list-style: none;
    counter-reset: step-counter;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.itinerario-card__steps li {
    counter-increment: step-counter;
    font-family: var(--font-body);
    font-size: .84rem;
    color: var(--text);
    line-height: 1.5;
    padding-left: 1.9rem;
    position: relative;
}
.itinerario-card__steps li::before {
    content: counter(step-counter);
    position: absolute;
    left: 0;
    top: .05rem;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--borgogna);
    color: var(--gold);
    border-radius: 50%;
    font-family: var(--font-title);
    font-size: .62rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.itinerario-card__nota {
    margin: 0;
    padding: var(--sp-sm) var(--sp-md);
    border-top: 1px solid var(--pergamena-dk);
    font-family: var(--font-body);
    font-size: .76rem;
    color: var(--borgogna);
    font-style: italic;
    background: rgba(107, 26, 42, .04);
}

/* ── Dintorni ─────────────────────────────────────────────── */
.petra-dintorni {
    background: var(--borgogna);
    color: var(--pergamena);
}
.petra-dintorni .section__label {
    background: rgba(201, 168, 76, 0.13);
    border-color: rgba(201, 168, 76, 0.38);
    color: var(--gold-lt);
}
.petra-dintorni .section__label::before,
.petra-dintorni .section__label::after {
    color: var(--gold);
}

.dintorni-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-md);
    margin-top: var(--sp-lg);
}

.dintorni-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(222, 196, 138, .14);
    border-radius: 4px;
    padding: var(--sp-md);
    display: flex;
    flex-direction: column;
    gap: .4rem;
    transition: background .2s, border-color .2s;
}
.dintorni-card:hover {
    background: rgba(255,255,255,.07);
    border-color: rgba(222, 196, 138, .32);
}

.dintorni-card__dist {
    font-family: var(--font-title);
    font-size: .62rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold);
    display: inline-block;
    margin-bottom: .2rem;
}

.dintorni-card__icon {
    font-size: 1.5rem;
    line-height: 1;
}

.dintorni-card__name {
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 700;
    color: var(--pergamena);
    margin: 0;
}

.dintorni-card__desc {
    font-family: var(--font-body);
    font-size: .83rem;
    line-height: 1.6;
    color: var(--pergamena-dk);
    margin: 0;
    opacity: .85;
}

/* ── Info pratiche ────────────────────────────────────────── */
.info-pratico {
    margin-top: var(--sp-lg);
}

.info-pratico__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-md);
}

.info-pratico__item {
    background: var(--pergamena);
    border: 1px solid var(--pergamena-dk);
    border-radius: 4px;
    padding: var(--sp-md);
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.info-pratico__icon {
    font-size: 1.4rem;
    line-height: 1;
}

.info-pratico__title {
    font-family: var(--font-title);
    font-size: .82rem;
    font-weight: 700;
    color: var(--borgogna);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.info-pratico__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    flex: 1;
}

.info-pratico__list li {
    font-family: var(--font-body);
    font-size: .82rem;
    color: var(--text);
    line-height: 1.5;
    padding-left: .9rem;
    position: relative;
}
.info-pratico__list li::before {
    content: '·';
    position: absolute;
    left: 0;
    color: var(--gold-dk);
    font-weight: 700;
}

.info-pratico__link {
    font-family: var(--font-title);
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--borgogna);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    display: inline-block;
    margin-top: auto;
    padding-top: .6rem;
    transition: color .2s;
}
.info-pratico__link:hover,
.info-pratico__link:focus-visible {
    color: var(--gold-dk);
}

.info-pratico__social {
    display: flex;
    gap: var(--sp-sm);
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: .5rem;
}

/* ── CTA finale ───────────────────────────────────────────── */
.petra-cta {
    background: var(--borgogna);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.petra-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 30%, rgba(183, 142, 64, .14) 0%, transparent 65%);
    pointer-events: none;
}

.petra-cta__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-sm);
}

.petra-cta__ornament {
    font-size: 2rem;
    opacity: .3;
    display: block;
    margin-bottom: var(--sp-xs);
}

.petra-cta__title {
    font-family: var(--font-title);
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 900;
    color: var(--pergamena);
    margin: 0;
    letter-spacing: .03em;
}

.petra-cta__sub {
    font-family: var(--font-body);
    font-size: .95rem;
    color: var(--pergamena-dk);
    opacity: .8;
    margin: 0;
    max-width: 500px;
    line-height: 1.6;
}

.petra-cta__buttons {
    display: flex;
    gap: var(--sp-sm);
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--sp-md);
}

/* ── Responsive — Pietralunga ─────────────────────────────── */
@media (max-width: 1100px) {
    .poi-grid-lg {
        grid-template-columns: repeat(2, 1fr);
    }
    .petra-stats {
        grid-template-columns: repeat(3, 1fr);
    }
    .petra-stat-card:nth-child(3),
    .petra-stat-card:nth-child(6) {
        border-right: none;
    }
}

@media (max-width: 960px) {
    .petra-palio__inner {
        grid-template-columns: 1fr;
        gap: var(--sp-lg);
    }
    .petra-palio__image-wrap {
        order: -1;
    }
    .petra-mappa-wrap {
        grid-template-columns: 1fr;
        gap: var(--sp-md);
    }
    .itinerari-grid {
        grid-template-columns: 1fr;
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }
    .dintorni-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .info-pratico__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .petra-hero__cta {
        flex-direction: column;
        align-items: center;
    }
    .petra-hero__cta .btn,
    .petra-hero__cta .btn--outline-light {
        min-width: 210px;
        text-align: center;
    }
    .petra-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .petra-stat-card {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .petra-stat-card:nth-child(odd) {
        border-right: 1px solid rgba(255,255,255,.08);
    }
    .petra-stat-card:nth-child(3),
    .petra-stat-card:nth-child(6) {
        border-right: none; /* reset 1100px rule on small screens */
    }
    .poi-grid-lg {
        grid-template-columns: 1fr;
    }
    .petra-mappa-distances__row {
        flex-direction: column;
        gap: .15rem;
    }
    .petra-mappa-distances__row dd {
        text-align: left;
        opacity: .75;
    }
    .dintorni-grid {
        grid-template-columns: 1fr;
    }
    .info-pratico__grid {
        grid-template-columns: 1fr;
    }
    .petra-cta__buttons {
        flex-direction: column;
        align-items: center;
    }
    .petra-cta__buttons .btn,
    .petra-cta__buttons .btn--outline-light {
        min-width: 230px;
        text-align: center;
    }
}


/* ============================================================
   20. INFO UTILI — PAGINA PRATICA
   ============================================================ */

/* ── Navigazione rapida in-page ───────────────────────────── */
.info-quicknav {
    background: var(--borgogna);
    border-bottom: 1px solid rgba(255,255,255,.08);
    position: sticky;
    top: 66px; /* agganciata sotto la nav principale su desktop */
    z-index: 90;
    padding: .4rem 0;
}
/* Neutralizza il padding verticale del .container generico */
.info-quicknav .container,
.info-quicknav__container {
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
}

/* ── Frecce scorrimento (solo mobile) ───────────────────── */
.info-quicknav__arrow {
    display: none; /* nascosti su desktop */
    align-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2.4rem;
    border: none;
    background: transparent;
    color: var(--gold);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    transition: opacity .2s;
}
.info-quicknav__arrow--hidden {
    opacity: 0;
    pointer-events: none;
}
.info-quicknav__arrow--left {
    left: 0;
    justify-content: flex-start;
    padding-left: .35rem;
    background: linear-gradient(to right, var(--borgogna) 55%, transparent);
}
.info-quicknav__arrow--right {
    right: 0;
    justify-content: flex-end;
    padding-right: .35rem;
    background: linear-gradient(to left, var(--borgogna) 55%, transparent);
}

.info-quicknav__list {
    list-style: none;
    margin: 0;
    padding: 2px 0; /* 2px verticale previene il clipping del border da overflow-x */
    display: flex;
    flex-wrap: nowrap;
    gap: .25rem;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    justify-content: center; /* centrato su desktop */
}
.info-quicknav__list::-webkit-scrollbar { display: none; }

.info-quicknav__link {
    font-family: var(--font-title);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pergamena-dk);
    text-decoration: none;
    padding: .35rem .75rem;
    border-radius: 2px;
    border: 1px solid transparent;
    transition: color .18s, border-color .18s, background .18s;
    white-space: nowrap;
    flex-shrink: 0;
}
.info-quicknav__link:hover,
.info-quicknav__link:focus-visible {
    color: var(--gold);
    border-color: rgba(222,196,138,.35);
    background: rgba(222,196,138,.07);
}
.info-quicknav__link--active {
    color: var(--gold);
    border-color: rgba(222,196,138,.4);
    background: rgba(222,196,138,.1);
    font-weight: 600;
}

/* ── Avvisi importanti ────────────────────────────────────── */
.avvisi-section {
    background: #1a1014; /* quasi-nero caldo, distingue dalla pagina */
}

.avvisi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-md);
    margin-top: var(--sp-lg);
}

.avviso-card {
    border-radius: 4px;
    padding: var(--sp-md);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    border-left: 4px solid transparent;
    background: rgba(255,255,255,.04);
}

/* Verde — conferma */
.avviso-card--verde {
    border-left-color: #4caf6e;
    background: rgba(76,175,110,.07);
}
.avviso-card--verde .avviso-card__label {
    color: #4caf6e;
}

/* Ambra — attenzione */
.avviso-card--ambra {
    border-left-color: #e8a020;
    background: rgba(232,160,32,.07);
}
.avviso-card--ambra .avviso-card__label {
    color: #e8a020;
}

/* Oro — informazione */
.avviso-card--oro {
    border-left-color: var(--gold-dk);
    background: rgba(183,142,64,.07);
}
.avviso-card--oro .avviso-card__label {
    color: var(--gold);
}

.avviso-card__header {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.avviso-card__icon {
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
}

.avviso-card__label {
    font-family: var(--font-title);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.avviso-card__testo {
    font-family: var(--font-body);
    font-size: .88rem;
    line-height: 1.6;
    color: var(--pergamena);
    margin: 0;
    opacity: .9;
}
.avviso-card__testo strong {
    color: var(--pergamena);
    opacity: 1;
}

.avviso-card__data {
    font-family: var(--font-body);
    font-size: .72rem;
    color: var(--pergamena-dk);
    opacity: .5;
    margin: 0;
    margin-top: auto;
}

.avvisi-footer {
    margin-top: var(--sp-md);
    font-family: var(--font-body);
    font-size: .85rem;
    color: var(--pergamena-dk);
    opacity: .7;
    text-align: center;
}
.avvisi-footer a {
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}
.avvisi-footer a:hover {
    opacity: .75;
}

/* ── Dove e quando ────────────────────────────────────────── */
.info-quando-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-md);
}

.info-quando-card {
    background: var(--pergamena);
    border-radius: 4px;
    border: 1px solid rgba(107,26,42,.12);
    padding: var(--sp-md);
    display: flex;
    gap: var(--sp-sm);
    align-items: flex-start;
}

.info-quando-card__icon {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: .1rem;
}

.info-quando-card__body {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    flex: 1;
}

.info-quando-card__title {
    font-family: var(--font-title);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--borgogna);
    margin: 0;
}

.info-quando-card__address {
    font-family: var(--font-body);
    font-size: .88rem;
    line-height: 1.55;
    color: var(--text);
    font-style: normal;
}

.info-quando-card__date {
    font-family: var(--font-title);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--borgogna);
    margin: 0;
}

.info-quando-card__detail {
    font-family: var(--font-body);
    font-size: .85rem;
    line-height: 1.6;
    color: var(--text);
    margin: 0;
}

/* ── Distanze in auto ─────────────────────────────────────── */
.info-distanze {
    margin: .5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.info-distanze__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--pergamena-dk);
}
.info-distanze__row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.info-distanze__row dt {
    font-family: var(--font-body);
    font-size: .84rem;
    color: var(--text);
    font-weight: 400;
}

.info-distanze__row dd {
    font-family: var(--font-title);
    font-size: .8rem;
    color: var(--borgogna);
    margin: 0;
    text-align: right;
    white-space: nowrap;
}

/* ── Viabilità highlight ──────────────────────────────────── */
.viabilita-highlight {
    display: flex;
    gap: var(--sp-md);
    align-items: flex-start;
    background: #2d1a00; /* ambra scuro */
    border: 1px solid rgba(232,160,32,.3);
    border-left: 5px solid #e8a020;
    border-radius: 4px;
    padding: var(--sp-md) var(--sp-lg);
    margin-top: var(--sp-lg);
}

.viabilita-highlight__icon {
    font-size: 1.8rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: .1rem;
}

.viabilita-highlight__body {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    flex: 1;
}

.viabilita-highlight__title {
    font-family: var(--font-title);
    font-size: .95rem;
    font-weight: 700;
    color: #e8a020;
    margin: 0;
    letter-spacing: .02em;
}

.viabilita-highlight__text {
    font-family: var(--font-body);
    font-size: .88rem;
    line-height: 1.6;
    color: var(--pergamena);
    margin: 0;
    opacity: .9;
}

.viabilita-highlight__consiglio {
    font-family: var(--font-body);
    font-size: .84rem;
    line-height: 1.55;
    color: var(--pergamena-dk);
    margin: 0;
    opacity: .85;
    margin-top: .25rem;
}

/* ── Famiglie & accessibilità ─────────────────────────────── */
.famiglia-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-md);
    margin-top: var(--sp-lg);
}

.famiglia-card {
    background: var(--pergamena);
    border: 1px solid var(--pergamena-dk);
    border-radius: 4px;
    padding: var(--sp-md);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    transition: box-shadow .2s;
}
.famiglia-card:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,.08);
}

.famiglia-card__icon {
    font-size: 1.6rem;
    line-height: 1;
}

.famiglia-card__title {
    font-family: var(--font-title);
    font-size: .9rem;
    font-weight: 700;
    color: var(--borgogna);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.famiglia-card p {
    font-family: var(--font-body);
    font-size: .85rem;
    line-height: 1.65;
    color: var(--text);
    margin: 0;
}
.famiglia-card p a {
    color: var(--borgogna);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.famiglia-card p a:hover {
    color: var(--gold-dk);
}

/* ── Contatti & social ────────────────────────────────────── */
.info-contatti-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-md);
    margin-top: var(--sp-lg);
}

.info-contatti-card {
    background: var(--pergamena);
    border: 1px solid var(--pergamena-dk);
    border-radius: 4px;
    padding: var(--sp-md);
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.info-contatti-card--social {
    background: var(--borgogna);
    border-color: rgba(222,196,138,.15);
}

.info-contatti-card__icon {
    font-size: 1.6rem;
    line-height: 1;
}

.info-contatti-card__title {
    font-family: var(--font-title);
    font-size: .9rem;
    font-weight: 700;
    color: var(--borgogna);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.info-contatti-card--social .info-contatti-card__title {
    color: var(--gold);
}

.info-contatti-card__desc {
    font-family: var(--font-body);
    font-size: .84rem;
    line-height: 1.6;
    color: var(--text);
    margin: 0;
}
.info-contatti-card--social .info-contatti-card__desc {
    color: var(--pergamena-dk);
    opacity: .8;
}

.info-contatti-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.info-contatti-card__list li {
    font-family: var(--font-body);
    font-size: .84rem;
    color: var(--text);
}

.info-contatti-card__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}
.info-contatti-card__links li a {
    font-family: var(--font-body);
    font-size: .84rem;
    color: var(--borgogna);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .15s, color .15s;
    padding-bottom: 1px;
}
.info-contatti-card__links li a:hover,
.info-contatti-card__links li a:focus-visible {
    color: var(--gold-dk);
    border-bottom-color: currentColor;
}

/* Bottoni social grandi */
.info-social-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
    margin-top: auto;
}

.info-social-btn {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border-radius: 3px;
    text-decoration: none;
    transition: opacity .18s, transform .18s;
    border: 1px solid rgba(255,255,255,.12);
}
.info-social-btn:hover,
.info-social-btn:focus-visible {
    opacity: .85;
    transform: translateX(3px);
}

.info-social-btn--fb {
    background: rgba(24,119,242,.18);
}
.info-social-btn--ig {
    background: rgba(228,64,95,.18);
}

.info-social-btn > span:first-child {
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
}

.info-social-btn > span:nth-child(2) {
    font-family: var(--font-title);
    font-size: .85rem;
    font-weight: 700;
    color: var(--pergamena);
    letter-spacing: .04em;
}

.info-social-btn__sub {
    font-family: var(--font-body);
    font-size: .72rem;
    color: var(--pergamena-dk);
    opacity: .65;
    margin-left: auto;
}

/* ── Responsive — Info utili ──────────────────────────────── */
@media (max-width: 960px) {
    .avvisi-grid {
        grid-template-columns: 1fr;
    }
    .info-quando-grid {
        grid-template-columns: 1fr;
        max-width: 540px;
        margin-left: auto;
        margin-right: auto;
    }
    .viabilita-highlight {
        flex-direction: column;
        gap: var(--sp-sm);
    }
    .famiglia-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .info-contatti-grid {
        grid-template-columns: 1fr;
        max-width: 540px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 640px) {
    .info-quicknav {
        position: static; /* non sticky su mobile */
        padding-top: 0;
        padding-bottom: 3px;
        margin-top: -1px;
    }
    .info-quicknav__arrow {
        display: flex; /* frecce attive su mobile */
    }
    .info-quicknav__list {
        justify-content: flex-start; /* allineato a sinistra per lo scroll mobile */
        padding: 2px .2rem;
    }
    .info-quicknav__link {
        font-size: .65rem;
        padding: .3rem .6rem;
    }
    .famiglia-grid {
        grid-template-columns: 1fr;
    }
    .info-distanze__row {
        flex-direction: column;
        gap: .1rem;
    }
    .info-distanze__row dd {
        text-align: left;
        opacity: .75;
    }
    .info-social-btn__sub {
        display: none; /* troppo affollato su mobile piccolo */
    }
}


/* ============================================================
   21. HOME — PORTALE E MIGLIORAMENTI
   ============================================================ */

/* ── Countdown — impatto visivo migliorato ────────────────── */
.countdown {
    gap: .5rem;          /* sovrascrive eventuale valore esistente */
}

.countdown__box {
    background: rgba(0, 0, 0, .35);
    border: 1px solid rgba(222, 196, 138, .22);
    border-radius: 4px;
    padding: .7rem 1rem;
    min-width: 5.5rem;
    text-align: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.countdown__num {
    display: block;
    font-family: var(--font-title);
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 900;
    color: var(--gold);
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.countdown__label {
    display: block;
    font-family: var(--font-title);
    font-size: .6rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pergamena-dk);
    opacity: .7;
    margin-top: .35rem;
}

.countdown__sep {
    font-family: var(--font-title);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 900;
    color: var(--gold);
    opacity: .4;
    align-self: center;
    line-height: 1;
    margin-top: -.5rem; /* allinea otticamente col numero, non col box */
}

/* Hero — nota date (riga sotto la data principale) */
.hero__dates-note {
    display: block;
    margin-top: .3rem;
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 400;
    letter-spacing: .04em;
    color: var(--pergamena-dk);
    opacity: .7;
}
.hero__dates-ingresso {
    display: inline;
}

/* Ornamento divisore posizionato in fondo all'hero (stesso sfondo) */
.ornament-divider--in-hero {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: transparent;
    z-index: 2;
    padding: var(--sp-xs) 0;
}
.ornament-divider--in-hero svg {
    color: var(--gold-lt);
    opacity: .35;
}

.hero__scroll-hint {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: var(--sp-md);
    font-family: var(--font-title);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pergamena-dk);
    opacity: .5;
    text-decoration: none;
    transition: opacity .2s;
    animation: petra-scroll-bounce 2.5s ease-in-out infinite;
}
.hero__scroll-hint:hover,
.hero__scroll-hint:focus-visible {
    opacity: .9;
}

/* ── Portale di navigazione ───────────────────────────────── */
.home-portal {
    background: var(--pergamena);
}

.portal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-md);
    margin-top: var(--sp-lg);
}

/* Card base — link cliccabile */
.portal-card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    background: #fff;
    border: 1px solid var(--pergamena-dk);
    border-top: 3px solid transparent;
    border-radius: 4px;
    padding: var(--sp-md);
    text-decoration: none;
    color: inherit;
    transition: transform .22s ease, box-shadow .22s ease, border-top-color .22s ease;
    cursor: pointer;
    min-width: 0; /* impedisce alle grid item di espandersi oltre 1fr */
    overflow: hidden; /* clip del contenuto che eccede */
}
.portal-card:hover,
.portal-card:focus-visible {
    transform: translateY(-5px);
    box-shadow: 0 12px 36px rgba(0,0,0,.12);
    border-top-color: var(--gold-dk);
    outline: none;
}
.portal-card:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* Card primaria — Programma */
.portal-card--primary {
    border-top-color: var(--borgogna);
    background: var(--borgogna);
}
.portal-card--primary .portal-card__tag   { color: var(--gold); }
.portal-card--primary .portal-card__title { color: var(--pergamena); }
.portal-card--primary .portal-card__desc  { color: var(--pergamena-dk); opacity: .85; }
.portal-card--primary .portal-card__cta   { color: var(--gold); }
.portal-card--primary:hover {
    border-top-color: var(--gold);
}

.portal-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .25rem;
}

.portal-card__icon {
    font-size: 1.6rem;
    line-height: 1;
}

.portal-card__tag {
    font-family: var(--font-title);
    font-size: .62rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--borgogna);
    opacity: .65;
}

.portal-card__title {
    font-family: var(--font-title);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--borgogna);
    margin: 0;
    line-height: 1.25;
}

.portal-card__desc {
    font-family: var(--font-body);
    font-size: .84rem;
    line-height: 1.6;
    color: var(--text);
    margin: 0;
    flex: 1;
}

.portal-card__cta {
    font-family: var(--font-title);
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--borgogna);
    margin-top: auto;
    padding-top: .5rem;
    border-top: 1px solid var(--pergamena-dk);
    display: block;
    transition: color .18s;
}
.portal-card:hover .portal-card__cta,
.portal-card:focus-visible .portal-card__cta {
    color: var(--gold-dk);
}

/* Card quiz — strip full-width ───────────────────────────── */
.portal-card--quiz {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-lg);
    background: var(--borgogna);
    border-color: rgba(222, 196, 138, .2);
    border-top-color: var(--gold-dk);
    padding: var(--sp-lg);
}
.portal-card--quiz:hover {
    border-top-color: var(--gold);
}

.portal-card-quiz__left {
    display: flex;
    align-items: center;
    gap: var(--sp-md);
    flex: 1;
}

.portal-card-quiz__icon {
    font-size: 2.8rem;
    line-height: 1;
    flex-shrink: 0;
}

.portal-card-quiz__tag {
    font-family: var(--font-title);
    font-size: .62rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 .25rem;
}

.portal-card-quiz__title {
    font-family: var(--font-title);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--pergamena);
    margin: 0 0 .35rem;
    line-height: 1.2;
}

.portal-card-quiz__desc {
    font-family: var(--font-body);
    font-size: .84rem;
    line-height: 1.6;
    color: var(--pergamena-dk);
    margin: 0;
    opacity: .85;
}

.portal-card-quiz__cta {
    font-family: var(--font-title);
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold);
    border: 1.5px solid rgba(222, 196, 138, .45);
    border-radius: 2px;
    padding: .7rem 1.4rem;
    white-space: nowrap;
    transition: background .2s, border-color .2s;
    flex-shrink: 0;
}
.portal-card--quiz:hover .portal-card-quiz__cta,
.portal-card--quiz:focus-visible .portal-card-quiz__cta,
.portal-card-quiz__cta:hover,
.portal-card-quiz__cta:focus-visible {
    background: rgba(222, 196, 138, .12);
    border-color: var(--gold);
    color: var(--gold);
}

/* Wrapper azioni quiz (Fai il quiz + Vota il tuo borgo) */
.portal-card-quiz__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .8rem;
    flex-shrink: 0;
}

/* Link secondario "Vota il tuo borgo →" */
.portal-card-quiz__vote {
    font-family: var(--font-title);
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px solid rgba(222, 196, 138, .4);
    padding-bottom: .1rem;
    white-space: nowrap;
    transition: color .2s, border-color .2s;
}
.portal-card-quiz__vote:hover,
.portal-card-quiz__vote:focus-visible {
    color: var(--gold-lt);
    border-color: var(--gold-lt);
}

/* ── Vivi il Palio — footer link ──────────────────────────── */
.vivere__footer {
    display: flex;
    gap: var(--sp-lg);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--sp-lg);
    padding-top: var(--sp-md);
    border-top: 1px solid rgba(222, 196, 138, .15);
}

/* ── Galleria del Palio (foto generiche, home) ────────────── */
.home-galleria__title {
    color: var(--gold-lt);
}
.home-galleria__title::after {
    background: linear-gradient(to right, var(--gold-lt), transparent);
}
.home-galleria__subtitle {
    color: rgba(245, 237, 216, 0.6);
}

/* ── Sintesi pratica — strip compatta ─────────────────────── */
.home-sintesi {
    background: var(--borgogna);
    padding: var(--sp-md) 0;
}

.sintesi-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}

.sintesi-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: var(--sp-sm) var(--sp-md);
}

.sintesi-item__icon {
    font-size: 1.2rem;
    line-height: 1;
    flex-shrink: 0;
}

.sintesi-item > div {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.sintesi-item__label {
    font-family: var(--font-title);
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold);
    display: block;
}

.sintesi-item__value {
    font-family: var(--font-body);
    font-size: .84rem;
    color: var(--pergamena);
    display: block;
    white-space: nowrap;
}

.sintesi-sep {
    width: 1px;
    height: 2rem;
    background: rgba(255,255,255,.1);
    flex-shrink: 0;
    align-self: center;
}

.sintesi-cta {
    font-family: var(--font-title);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
    border: 1px solid rgba(222, 196, 138, .35);
    border-radius: 2px;
    padding: .5rem 1rem;
    margin-left: var(--sp-md);
    transition: background .2s, border-color .2s;
    white-space: nowrap;
    flex-shrink: 0;
}
.sintesi-cta:hover,
.sintesi-cta:focus-visible {
    background: rgba(222, 196, 138, .1);
    border-color: var(--gold);
    color: var(--gold);
}

/* ── Responsive — Home ────────────────────────────────────── */
@media (max-width: 1100px) {
    .portal-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 960px) {
    .portal-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .portal-card--quiz {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-md);
    }
    .portal-card-quiz__left {
        flex-direction: column;
        align-items: flex-start;
    }
    .portal-card-quiz__actions {
        align-self: flex-start;
    }
    .portal-card-quiz__cta {
        align-self: flex-start;
    }
    .sintesi-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
    .sintesi-sep {
        display: none;
    }
    .sintesi-cta {
        margin-left: var(--sp-md);
        margin-top: var(--sp-sm);
        align-self: flex-start;
    }
}

@media (max-width: 640px) {
    .countdown__box {
        min-width: 4rem;
        padding: .55rem .65rem;
    }
    .countdown__num {
        font-size: clamp(1.8rem, 10vw, 2.4rem);
    }
    .countdown__sep {
        font-size: 1.4rem;
    }
    .hero__dates-note {
        display: none;
    }
    .portal-grid {
        grid-template-columns: 1fr;
    }
    .portal-card--quiz {
        grid-column: 1;
    }
    .portal-card-quiz__icon {
        font-size: 2rem;
    }
    .portal-card-quiz__title {
        font-size: 1rem;
    }
    .portal-card-quiz__actions {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-sm);
        align-self: auto;
    }
    .vivere__footer {
        flex-direction: column;
        align-items: center;
        gap: var(--sp-sm);
    }
    .sintesi-item {
        padding: var(--sp-xs) var(--sp-sm);
    }
    .sintesi-cta {
        align-self: center;
        text-align: center;
    }
}


/* ============================================================
   §22 — DOVE MANGIARE — componenti di pagina
   (dove-mangiare.html)
============================================================ */

/* ── Hero CTAs ────────────────────────────────────────────── */
.inner-hero__ctas {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--sp-md);
}

/* ── Quick-nav (dove-mangiare) ────────────────────────────── */
.page-quicknav--light {
    background: var(--pergamena-dk);
    border-bottom: 1px solid rgba(107, 26, 42, .14);
    position: sticky;
    top: 66px;
    z-index: 200;
}
.page-quicknav__inner {
    max-width: var(--container-w, 1100px);
    margin: 0 auto;
    padding: 0 var(--sp-lg);
    display: flex;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    gap: 0;
}
.page-quicknav__inner::-webkit-scrollbar { display: none; }
.page-quicknav__link {
    display: block;
    font-family: var(--font-display);
    font-size: .6rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--borgogna);
    text-decoration: none;
    padding: .8rem 1.1rem;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    opacity: .75;
    transition: opacity .15s, border-color .15s, color .15s;
    flex-shrink: 0;
}
.page-quicknav__link:hover {
    opacity: 1;
    color: var(--borgogna-dk);
    border-bottom-color: var(--borgogna);
}
@media (max-width: 640px) {
    .page-quicknav--light {
        top: 58px;
    }
    .page-quicknav__inner {
        padding: 0 var(--sp-md);
    }
    .page-quicknav__link {
        font-size: .55rem;
        padding: .7rem .85rem;
    }
}

/* ── Intro taverne ────────────────────────────────────────── */
.taverne-info-list {
    list-style: none;
    margin: var(--sp-sm) 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}
.taverne-info-list li {
    font-family: var(--font-body);
    font-size: .95rem;
    color: var(--text);
    padding-left: 1.1rem;
    position: relative;
    line-height: 1.5;
}
.taverne-info-list li::before {
    content: "·";
    position: absolute;
    left: 0;
    color: var(--borgogna);
    font-weight: 700;
}
.taverne-info-cena {
    font-family: var(--font-body);
    font-size: .9rem;
    color: var(--text);
    background: var(--pergamena-dk);
    border-left: 3px solid var(--gold-dk);
    border-radius: 0 3px 3px 0;
    padding: .65rem .85rem;
    margin: var(--sp-sm) 0;
    line-height: 1.55;
}
.taverne-info-cena a {
    color: var(--borgogna);
    font-weight: 600;
}

/* ============================================================
   §23 — MENÙ TAVERNE 2026 (sezione #menu-taverne)
============================================================ */

/* ── Sezione wrapper ──────────────────────────────────────── */
.menu-taverne-section {
    background: var(--borgogna-dk);
    color: var(--pergamena);
}
.menu-taverne-section > .container {
    text-align: center;
}
.menu-taverne-section .section__label,
#la-corsa .section__label {
    background: rgba(201, 168, 76, 0.13);
    border-color: rgba(201, 168, 76, 0.38);
    color: var(--gold-lt);
}
.menu-taverne-section .section__label::before,
.menu-taverne-section .section__label::after,
#la-corsa .section__label::before,
#la-corsa .section__label::after {
    color: var(--gold);
}
.menu-taverne-section .section__title {
    color: var(--pergamena);
    text-align: center;
}
.menu-taverne-section .section__title::after {
    margin-left: auto;
    margin-right: auto;
}
.menu-taverne-section .section__subtitle {
    color: rgba(245, 237, 216, .75);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* ── Toggle A Tavola / Dopocena ───────────────────────────── */
.menu-taverne__toggle {
    margin-top: var(--sp-md);
    border-color: rgba(201,168,76,.35);
}
.menu-taverne__toggle .albo-toggle__btn {
    color: rgba(245,237,216,.75);
}
.menu-taverne__toggle .albo-toggle__btn + .albo-toggle__btn {
    border-left-color: rgba(201,168,76,.35);
}
.menu-taverne__toggle .albo-toggle__btn--active {
    background: var(--gold);
    color: var(--borgogna-dk);
}
.menu-taverne__toggle .albo-toggle__btn:not(.albo-toggle__btn--active):hover {
    background: rgba(201,168,76,.12);
    color: var(--pergamena);
}
.menu-taverne__tab-desc {
    text-align: center;
    font-size: .8rem;
    letter-spacing: .06em;
    color: rgba(245,237,216,.55);
    margin-top: .55rem;
    font-family: var(--font-display);
}

/* ── Card Dopocena ──────────────────────────────────────────── */
.serata-card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(201,168,76,.18);
    border-top: 3px solid var(--tc, var(--borgogna));
    border-radius: var(--r-md);
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
}
.serata-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,.35);
}
.serata-card__header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.1rem 1.25rem .8rem;
    border-bottom: 1px solid rgba(201,168,76,.12);
}
.serata-card__emoji {
    font-size: 1.6rem;
    flex-shrink: 0;
}
.serata-card__logo {
    width: 2.6rem;
    height: 2.6rem;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 4px;
}
.serata-card__meta {
    min-width: 0;
}
.serata-card__nome {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--pergamena);
    margin: 0 0 .2rem;
    line-height: 1.2;
}
.serata-card__orario {
    font-size: .75rem;
    color: var(--gold);
    font-family: var(--font-display);
    letter-spacing: .06em;
}
.serata-card__body {
    padding: .9rem 1.25rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.serata-card__notacucina {
    display: inline-block;
    font-family: var(--font-display);
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid rgba(201,168,76,.35);
    border-radius: 100px;
    padding: .25rem .75rem;
    width: fit-content;
}
.serata-card__desc {
    font-size: .88rem;
    color: rgba(245,237,216,.75);
    line-height: 1.55;
    margin: 0;
}
.serata-card__lineup {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding-top: .55rem;
    border-top: 1px solid rgba(201,168,76,.12);
}
.serata-card__lineup-giorno {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: .5rem;
    align-items: baseline;
}
.serata-card__lineup-label {
    font-family: var(--font-display);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gold-lt);
}
.serata-card__lineup-voci {
    font-size: .82rem;
    color: rgba(245,237,216,.75);
    line-height: 1.4;
}
.serata-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .1rem;
}
.serata-card__tag {
    font-size: .7rem;
    font-family: var(--font-display);
    letter-spacing: .07em;
    color: rgba(245,237,216,.6);
    background: rgba(255,255,255,.07);
    border-radius: 100px;
    padding: .22rem .65rem;
}

/* ── Card Valcelle (A Tavola) — notaCucina ─────────────────── */
.taverna-notacucina {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    padding: 1.4rem 1rem 1.1rem;
    text-align: center;
}
.taverna-notacucina__badge {
    font-family: var(--font-display);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--borgogna);
    border: 1.5px solid rgba(107,26,42,.22);
    border-radius: 100px;
    padding: .3rem .9rem;
}
.taverna-notacucina__desc {
    font-size: .85rem;
    color: var(--pietra-lt);
    margin: 0;
    line-height: 1.5;
}

/* ── Controlli: ricerca + filtri ──────────────────────────── */
.menu-taverne__controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    margin-top: var(--sp-sm);
    margin-bottom: var(--sp-md);
}
.menu-taverne__search-row {
    width: 100%;
    display: flex;
    justify-content: center;
}
.menu-taverne__search-wrap {
    width: 100%;
    max-width: 480px;
}
.menu-taverne__search-wrap .listing-search__label {
    color: var(--gold);
}
/* Barra di ricerca morbida sul fondo borgogna */
.menu-taverne-section .listing-search__field {
    background: rgba(255,255,255,.1);
    border-color: rgba(201,168,76,.25);
}
.menu-taverne-section .listing-search__field:focus-within {
    background: rgba(255,255,255,.15);
    border-color: rgba(201,168,76,.55);
}
.menu-taverne-section .listing-search__input {
    color: var(--pergamena);
}
.menu-taverne-section .listing-search__input::placeholder {
    color: rgba(245,237,216,.38);
}
.menu-taverne-section .listing-search__icon {
    color: rgba(245,237,216,.55);
}
.menu-taverne-section .listing-search__clear {
    color: rgba(245,237,216,.55);
}
.menu-taverne__filters-row {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    min-width: 0;
}
.menu-taverne__filters-label {
    font-family: var(--font-display);
    font-size: .55rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(245, 237, 216, .45);
    white-space: nowrap;
    margin: 0;
    flex-shrink: 0;
}
.menu-taverne__filters {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

/* ── Pill filtro ──────────────────────────────────────────── */
.menu-filter {
    font-family: var(--font-display);
    font-size: .65rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(245, 237, 216, .06);
    color: var(--pergamena-dk);
    border: 1px solid rgba(245, 237, 216, .2);
    border-radius: 100px;
    padding: .45rem 1.1rem;
    cursor: pointer;
    transition: background .18s, color .18s, border-color .18s;
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 36px;
}
.menu-filter:hover {
    background: rgba(245, 237, 216, .12);
    border-color: rgba(245, 237, 216, .45);
    color: var(--pergamena);
}
.menu-filter:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}
.menu-filter--active {
    background: var(--gold-dk);
    color: var(--borgogna-dk);
    border-color: var(--gold-dk);
    font-weight: 700;
}
.menu-filter--active:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--borgogna-dk);
}
/* ── Nota generale ────────────────────────────────────────── */
.menu-taverne__nota-gen {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-family: var(--font-body);
    font-size: .8rem;
    font-style: italic;
    color: rgba(245, 237, 216, .7);
    margin-bottom: var(--sp-lg);
    background: rgba(245, 237, 216, .05);
    border: 1px solid rgba(201, 168, 76, .18);
    border-radius: 3px;
    padding: .65rem .85rem;
    line-height: 1.55;
}
.menu-taverne__nota-gen-icon {
    font-style: normal;
    font-size: 1rem;
    opacity: .6;
    flex-shrink: 0;
    margin-top: .05rem;
}

/* ── Grid taverne ─────────────────────────────────────────── */
.menu-taverne__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-md);
    align-items: stretch;
}

/* ── Nessun risultato ─────────────────────────────────────── */
.menu-taverne__no-results {
    text-align: center;
    padding: var(--sp-xl) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-sm);
}
.menu-taverne__no-results-text {
    color: rgba(245, 237, 216, .6);
    font-style: italic;
    font-family: var(--font-body);
    font-size: .95rem;
    margin: 0;
}
.menu-taverne__reset-btn {
    font-family: var(--font-display);
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: transparent;
    color: var(--gold);
    border: 1px solid rgba(201, 168, 76, .4);
    border-radius: 100px;
    padding: .5rem 1.2rem;
    cursor: pointer;
    transition: background .18s, border-color .18s;
}
.menu-taverne__reset-btn:hover {
    background: rgba(201, 168, 76, .1);
    border-color: var(--gold);
}

/* ══════════════════════════════════════════════════════════
   CARD TAVERNA
══════════════════════════════════════════════════════════ */
.taverna-card {
    background: var(--pergamena);
    border-radius: 6px;
    border-top: 4px solid var(--tc, var(--borgogna));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: var(--pietra);
    box-shadow: 0 2px 12px rgba(10, 5, 3, .25);
}

/* ── Header ───────────────────────────────────────────────── */
.taverna-card__header {
    background: var(--pergamena-dk);
    padding: .75rem var(--sp-md);
    border-bottom: 1px solid rgba(201, 168, 76, .25);
}
.taverna-card__title-row {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin-bottom: .5rem;
}
.taverna-card__emoji {
    font-size: 1.2rem;
    line-height: 1.2;
    flex-shrink: 0;
    margin-top: .05rem;
}
.taverna-card__logo {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 4px;
}
.taverna-card__title-meta {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}
.taverna-card__nome {
    font-family: var(--font-display);
    font-size: .92rem;
    font-weight: 700;
    color: var(--borgogna-dk);
    margin: 0;
    line-height: 1.3;
}
.taverna-card__orario {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-family: var(--font-display);
    font-size: .6rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--borgogna);
    opacity: .7;
    margin: 0;
}
.taverna-card__orario-icon {
    font-size: .85rem;
    line-height: 1;
}
.taverna-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

/* ── Body ─────────────────────────────────────────────────── */
.taverna-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--pergamena);
}

/* ── Pulsante "Menù completo" / "Programma completo" ─────────
   Condiviso tra card "A Tavola" (sfondo chiaro) e "Dopocena"
   (sfondo scuro) — apre la lightbox dei poster reali. */
.taverna-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-top: .9rem;
    padding: .6rem 1rem;
    font-family: var(--font-display);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 100px;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}
.taverna-card__body .taverna-menu-btn {
    border: 1px solid rgba(107,26,42,.3);
    background: transparent;
    color: var(--borgogna);
}
.taverna-card__body .taverna-menu-btn:hover {
    background: rgba(107,26,42,.08);
    border-color: var(--borgogna);
}
.serata-card__body .taverna-menu-btn {
    border: 1px solid rgba(201,168,76,.35);
    background: transparent;
    color: var(--gold);
}
.serata-card__body .taverna-menu-btn:hover {
    background: rgba(201,168,76,.12);
    border-color: var(--gold);
}

/* ── Stato "tutto in aggiornamento" ───────────────────────── */
.taverna-card--aggiornamento .taverna-card__body {
    justify-content: center;
    padding: var(--sp-md);
}
.taverna-card__aggiornamento-msg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    text-align: center;
    padding: var(--sp-sm) 0;
}
.taverna-card__aggiornamento-icon {
    font-size: 1.6rem;
    opacity: .5;
}
.taverna-card__aggiornamento-text {
    font-family: var(--font-body);
    font-size: .82rem;
    font-style: italic;
    color: var(--borgogna);
    opacity: .65;
    margin: 0;
    line-height: 1.5;
}

/* ── Tab giorni ───────────────────────────────────────────── */
.taverna-tabs {
    display: flex;
    border-bottom: 1px solid var(--pergamena-dk);
}
.taverna-tab {
    flex: 1;
    font-family: var(--font-display);
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--borgogna);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: .7rem .25rem;
    cursor: pointer;
    transition: color .15s, background .15s, border-bottom-color .15s;
    white-space: nowrap;
    min-height: 40px;
}
.taverna-tab:hover {
    background: rgba(107, 26, 42, .05);
    color: var(--borgogna-dk);
}
.taverna-tab:focus-visible {
    outline: 2px solid var(--borgogna);
    outline-offset: -2px;
}
.taverna-tab--active {
    color: var(--borgogna-dk);
    font-weight: 700;
    border-bottom-color: var(--tc, var(--borgogna));
    background: rgba(107, 26, 42, .04);
}

/* ── Panel contenuto giorno ───────────────────────────────── */
.taverna-panel {
    display: none;
    padding: var(--sp-md);
    flex-direction: column;
    gap: var(--sp-sm);
}
.taverna-panel--active {
    display: flex;
}

/* ── Elenco piatti ────────────────────────────────────────── */
.taverna-piatti {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.taverna-piatti__voce {
    font-family: var(--font-body);
    font-size: .88rem;
    color: var(--pietra);
    line-height: 1.45;
    text-align: center;
}

/* ── Prezzi ───────────────────────────────────────────────── */
.taverna-prezzi {
    display: flex;
    align-items: center;
    gap: 0;
    padding: .65rem .85rem;
    background: rgba(107, 26, 42, .06);
    border-radius: 4px;
    border-left: 3px solid var(--tc, var(--borgogna));
    margin-top: var(--sp-xs);
}
.taverna-prezzi__sep {
    width: 1px;
    align-self: stretch;
    background: rgba(107, 26, 42, .18);
    margin: 0 .85rem;
    flex-shrink: 0;
}
.taverna-prezzo {
    display: flex;
    flex-direction: column;
    gap: .05rem;
    flex: 1;
}

/* Adulti — elemento principale */
.taverna-prezzo--adulti .taverna-prezzo__label {
    font-family: var(--font-display);
    font-size: .6rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--borgogna);
    font-weight: 700;
}
.taverna-prezzo--adulti .taverna-prezzo__val {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--borgogna);
    line-height: 1;
}

/* Bambini — elemento secondario */
.taverna-prezzo--bambini .taverna-prezzo__label {
    font-family: var(--font-display);
    font-size: .58rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--borgogna);
    opacity: .85;
}
.taverna-prezzo__subnota {
    font-family: var(--font-body);
    font-size: .57rem;
    font-style: italic;
    color: var(--borgogna);
    opacity: .7;
    line-height: 1;
    margin-bottom: .3rem;
}
.taverna-prezzo--bambini .taverna-prezzo__val {
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 600;
    color: var(--borgogna);
    opacity: .85;
    line-height: 1;
}

/* ── Note menu (vegetariano, ecc.) ───────────────────────── */
.taverna-panel__note {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: .4rem;
    font-family: var(--font-body);
    font-size: .78rem;
    font-style: italic;
    color: #2d6b3a;
    background: rgba(44, 107, 58, .07);
    border-radius: 3px;
    padding: .4rem .65rem;
    margin: 0;
    line-height: 1.4;
}

/* ── Nota prezzo bambini (sotto al box prezzo) ───────────── */
.taverna-panel__nota-bambini {
    font-family: var(--font-body);
    font-size: .74rem;
    font-style: italic;
    color: var(--pietra-lt);
    text-align: center;
    margin: 0;
    line-height: 1.4;
}

/* ── Stato "in aggiornamento" nel panel ───────────────────── */
.taverna-panel__aggiornamento {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: var(--sp-sm) 0;
    margin: 0;
    font-family: var(--font-body);
    font-size: .82rem;
    font-style: italic;
    color: var(--borgogna);
    opacity: .6;
}

/* ── Badge ────────────────────────────────────────────────── */
.tmenu-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-family: var(--font-display);
    font-size: .55rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    padding: .25rem .65rem;
    border-radius: 100px;
    white-space: nowrap;
}
.tmenu-badge--confermato {
    background: rgba(44, 107, 58, .15);
    color: #1e5229;
    border: 1px solid rgba(44, 107, 58, .3);
}
.tmenu-badge--aggiornamento {
    background: rgba(180, 120, 20, .1);
    color: #7a5010;
    border: 1px solid rgba(180, 120, 20, .25);
}
.tmenu-badge--vegetariano {
    background: rgba(44, 107, 58, .12);
    color: #1e5229;
    border: 1px solid rgba(44, 107, 58, .25);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 960px) {
    .menu-taverne__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .menu-taverne__grid {
        grid-template-columns: 1fr;
    }
    .menu-taverne__filters-row {
        flex-direction: column;
        align-items: flex-start;
        gap: .4rem;
    }
    .menu-taverne__filters-label {
        display: none;
    }
    .menu-taverne__controls {
        gap: var(--sp-xs);
    }
    .menu-filter {
        font-size: .6rem;
        padding: .4rem .9rem;
        min-height: 38px;
    }
    .taverna-card__nome {
        font-size: .88rem;
    }
    .taverna-tab {
        font-size: .58rem;
        padding: .65rem .2rem;
        min-height: 44px;
    }
    .taverna-panel {
        padding: var(--sp-sm);
    }
    .taverna-prezzi {
        padding: .55rem .7rem;
    }
    .taverna-prezzi__sep {
        margin: 0 .6rem;
    }
    .taverna-prezzo--adulti .taverna-prezzo__val {
        font-size: 1.15rem;
    }
    .taverna-prezzo--bambini .taverna-prezzo__val {
        font-size: .85rem;
    }
}


/* ══════════════════════════════════════════════════════════════
   LIGHTBOX GALLERY
   ══════════════════════════════════════════════════════════════ */

/* Card clickabile — hint galleria */
.card[data-gallery] { cursor: pointer; }

.card__gallery-hint {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 1.6rem .75rem .55rem;
    background: linear-gradient(transparent, rgba(0,0,0,.62));
    color: #fff;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-family: var(--font-heading);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    opacity: 0;
    transition: opacity .22s;
    pointer-events: none;
}
.card[data-gallery]:hover .card__gallery-hint,
.card[data-gallery]:focus-visible .card__gallery-hint { opacity: 1; }

/* Mobile / tablet — badge sempre visibile nell'angolo (pointer: coarse = touch screen) */
@media (pointer: coarse) {
    .card__gallery-hint {
        /* trasforma la barra in un piccolo badge tondo nell'angolo */
        top: .55rem; right: .55rem;
        bottom: auto; left: auto;
        width: auto;
        padding: .3rem .6rem .3rem .48rem;
        border-radius: 100px;
        background: rgba(0,0,0,.58);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        font-size: .68rem;
        letter-spacing: .05em;
        opacity: 1;          /* sempre visibile */
        justify-content: center;
        gap: .3rem;
    }
}

/* Overlay */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0,0,0,.93);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox[hidden] { display: none; }

/* Chiudi */
.lightbox__close {
    position: absolute;
    top: 1rem; right: 1.25rem;
    background: none; border: none;
    color: rgba(255,255,255,.7);
    font-size: 2rem; line-height: 1;
    cursor: pointer;
    padding: .3rem .5rem;
    border-radius: 3px;
    transition: color .2s, background .2s;
    z-index: 2;
}
.lightbox__close:hover { color: #fff; background: rgba(255,255,255,.1); }

/* Stage centrale */
.lightbox__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: min(92vw, 1100px);
    padding: 0 3.8rem;
    width: 100%;
}
.lightbox__img {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 3px;
    display: block;
    transition: transform .25s ease;
}
.lightbox__img--zoomed {
    cursor: grab;
    transition: none;
}
.lightbox__img--zoomed:active { cursor: grabbing; }
.lightbox__toolbar {
    display: flex;
    justify-content: center;
    gap: .6rem;
    margin-top: .7rem;
}
.lightbox__tool {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.8);
    font-size: 1.1rem;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, color .2s;
}
.lightbox__tool:hover { background: rgba(255,255,255,.18); color: #fff; }
.lightbox__caption {
    color: rgba(255,255,255,.72);
    font-size: .88rem;
    margin-top: .75rem;
    text-align: center;
    font-family: var(--font-body);
    font-style: italic;
}
.lightbox__counter {
    color: rgba(255,255,255,.35);
    font-size: .76rem;
    margin-top: .2rem;
    text-align: center;
    font-family: var(--font-body);
}

/* Frecce prev / next */
.lightbox__nav {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.8);
    font-size: 2.4rem;
    width: 2.8rem; height: 5rem;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, color .2s;
    padding: 0;
}
.lightbox__nav:hover { background: rgba(255,255,255,.18); color: #fff; }
.lightbox__nav[disabled] { opacity: .2; pointer-events: none; }
.lightbox__nav--prev { left: .75rem; }
.lightbox__nav--next { right: .75rem; }

@media (max-width: 600px) {
    .lightbox__stage { padding: 0 2.6rem; }
    .lightbox__nav { width: 2.2rem; height: 4rem; font-size: 1.9rem; }
    .lightbox__nav--prev { left: .25rem; }
    .lightbox__nav--next { right: .25rem; }
}

/* ================================================================
   VOTO BORGO — Banner Firebase offline
   ================================================================ */
.vota__offline-banner {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    background: rgba(180, 100, 0, .12);
    border: 1px solid rgba(201, 140, 0, .4);
    border-left: 4px solid #c87800;
    border-radius: var(--r-md);
    padding: .9rem 1.2rem;
    margin-bottom: var(--sp-md);
    font-size: .9rem;
    color: rgba(245, 237, 216, .85);
    line-height: 1.6;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}
.vota__offline-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: .1rem;
    filter: sepia(1) saturate(3) hue-rotate(10deg);
}

/* ================================================================
   PAGINA 404 — Il Pellegrino Smarrito
   ================================================================ */
.not-found {
    min-height: 100dvh;
    background: var(--borgogna-dk);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--sp-xl) var(--sp-md);
    position: relative;
    overflow: hidden;
}

/* Croce decorativa di sfondo */
.not-found::before {
    content: "✝";
    position: absolute;
    font-size: clamp(18rem, 50vw, 36rem);
    color: rgba(255,255,255,.025);
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

.not-found__ornament {
    color: rgba(201,168,76,.4);
    margin-bottom: var(--sp-md);
}

.not-found__code {
    font-family: var(--font-display);
    font-size: clamp(6rem, 22vw, 12rem);
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px rgba(201,168,76,.5);
    letter-spacing: .05em;
    margin-bottom: .15em;
}

.not-found__mannaja {
    font-size: clamp(2.5rem, 8vw, 5rem);
    line-height: 1;
    margin-bottom: var(--sp-sm);
    filter: drop-shadow(0 0 24px rgba(201,168,76,.3));
}

.not-found__title {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 3.5vw, 2rem);
    font-weight: 700;
    color: var(--gold);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: var(--sp-sm);
}

.not-found__divider {
    color: rgba(201,168,76,.35);
    font-size: 1.2rem;
    letter-spacing: .5em;
    margin-bottom: var(--sp-md);
}

.not-found__text {
    font-family: var(--font-body);
    font-size: clamp(.95rem, 2vw, 1.1rem);
    color: rgba(245,237,216,.7);
    max-width: 48ch;
    line-height: 1.75;
    margin-bottom: var(--sp-lg);
    font-style: italic;
}

.not-found__text strong {
    color: var(--pergamena);
    font-style: normal;
}

.not-found__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-sm);
    justify-content: center;
}

.not-found__anno {
    margin-top: var(--sp-xl);
    font-family: var(--font-display);
    font-size: .65rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(201,168,76,.3);
}

@media (max-width: 600px) {
    .not-found__code { -webkit-text-stroke-width: 1.5px; }
}

/* ============================================================
   POPUP — ANNUNCIO SERVIZIO NAVETTA (una tantum per utente)
============================================================ */
.shuttle-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: rgba(16, 12, 8, 0.72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    opacity: 0;
    animation: shuttlePopupFadeIn .35s ease forwards;
}
.shuttle-popup-overlay.shuttle-popup--closing {
    animation: shuttlePopupFadeOut .22s ease forwards;
}
@keyframes shuttlePopupFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes shuttlePopupFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

.shuttle-popup {
    position: relative;
    width: 100%;
    max-width: 430px;
    background: var(--pergamena);
    border-radius: var(--r-lg);
    border-top: 4px solid var(--gold);
    box-shadow: var(--sh-xl);
    padding: 2.4rem 2rem 2rem;
    text-align: center;
    transform: scale(.92) translateY(10px);
    opacity: 0;
    animation: shuttlePopupPop .4s .1s cubic-bezier(.2,.8,.3,1.1) forwards;
}
@keyframes shuttlePopupPop {
    to { transform: scale(1) translateY(0); opacity: 1; }
}

.shuttle-popup__close {
    position: absolute;
    top: .85rem;
    right: .85rem;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    border: none;
    background: rgba(107, 26, 42, .08);
    color: var(--borgogna);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.shuttle-popup__close:hover {
    background: var(--borgogna);
    color: var(--bianco);
}

.shuttle-popup__icon {
    width: 4.2rem;
    height: 4.2rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--grad-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: var(--sh-gold);
}

.shuttle-popup__eyebrow {
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--borgogna);
    margin: 0 0 .5rem;
}

.shuttle-popup__title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--borgogna-dk);
    margin: 0 0 .75rem;
}

.shuttle-popup__text {
    font-family: var(--font-body);
    font-size: .92rem;
    line-height: 1.55;
    color: var(--pietra);
    margin: 0 0 1.2rem;
}

.shuttle-popup__facts {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: .9rem 1rem;
    background: rgba(107, 26, 42, .05);
    border: 1px solid rgba(107, 26, 42, .12);
    border-radius: var(--r-md);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    text-align: left;
}
.shuttle-popup__facts li {
    font-family: var(--font-body);
    font-size: .87rem;
    color: var(--borgogna-dk);
    display: flex;
    align-items: baseline;
    gap: .55rem;
}
.shuttle-popup__facts li strong {
    font-family: var(--font-display);
    font-weight: 700;
}

.shuttle-popup__actions {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}
.shuttle-popup__btn {
    width: 100%;
    padding: .85em 1.5em;
    font-size: .78rem;
}

@media (max-width: 480px) {
    .shuttle-popup {
        padding: 2.1rem 1.4rem 1.6rem;
    }
    .shuttle-popup__title {
        font-size: 1.3rem;
    }
}