/* ==========================================================================
   QUELLI DELL'ALBA – ROAD RUNNERS
   Foglio di stile unico del progetto (mobile first)

   INDICE
   1.  Variables
   2.  Reset
   3.  Typography
   4.  Buttons
   5.  Navbar
   6.  Hero
   7.  Sponsors
   8.  About
   9.  Races
   10. Gallery
   11. Contact
   12. Form
   13. Footer
   14. Animations
   15. Responsive
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES
   Palette ricavata dal logo: indaco del lettering, corallo/pesca del sole,
   teal delle foglie, viola della maglia, cremisi dei pantaloni.
   ========================================================================== */
:root {
    /* Colori principali */
    --color-primary: #26004d;          /* indaco scuro – lettering logo */
    --color-primary-light: #3d1873;
    --color-secondary: #ff7a59;        /* corallo – sole/alba */
    --color-secondary-dark: #f25c3a;
    --color-accent: #5a43c0;           /* viola – maglia runner */
    --color-teal: #066e6e;             /* verde petrolio – foglie */
    --color-teal-light: #13a38a;
    --color-crimson: #be0e3a;          /* cremisi – dettagli */
    --color-peach: #ffd2bf;
    --color-pink: #ffb3b5;
    --color-background: #fff7ee;       /* crema / bianco caldo */
    --color-surface: #ffffff;
    --color-cream-dark: #fbe9d8;
    --color-text: #1c1233;
    --color-text-muted: #5b4f6e;
    --color-dark: #150a28;

    /* Gradienti */
    --gradient-dawn: linear-gradient(160deg, #26004d 0%, #6a2160 40%, #e2685a 75%, #ffb38f 100%);
    --gradient-sun: linear-gradient(180deg, #ffb3b5 0%, #ff8a64 55%, #ff7a59 100%);

    /* Tipografia */
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
    --fs-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.95rem);
    --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --fs-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.3rem);
    --fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
    --fs-h2: clamp(1.9rem, 1.4rem + 2.4vw, 3.4rem);
    --fs-h1: clamp(2.8rem, 1.6rem + 6vw, 6.5rem);

    /* Spaziature */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: clamp(2rem, 1.5rem + 2vw, 3rem);
    --space-xl: clamp(3.5rem, 2.5rem + 5vw, 7rem);
    --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
    --container: 1240px;

    /* Forme */
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --radius-xl: 40px;
    --radius-pill: 999px;

    /* Ombre */
    --shadow-sm: 0 2px 8px rgba(38, 0, 77, 0.08);
    --shadow-md: 0 12px 30px -10px rgba(38, 0, 77, 0.22);
    --shadow-lg: 0 30px 60px -20px rgba(38, 0, 77, 0.35);

    /* Transizioni */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --t-fast: 0.2s var(--ease);
    --t-med: 0.45s var(--ease);
    --t-slow: 0.8s var(--ease);

    --nav-height: 72px;

    /* Pulsanti fissi in basso */
    --float-size: 54px;

    /* Barra sponsor */
    --sponsor-overlap: 1.75rem;   /* quanto la barra sale sopra la hero */
    --sponsor-logo-h: 40px;       /* altezza dei loghi */
}


/* ==========================================================================
   2. RESET
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-height);
}

body {
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--color-text);
    background-color: var(--color-background);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

body.no-scroll {
    overflow: hidden;
}

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

img {
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: 0;
}

ul,
ol {
    list-style: none;
}

[hidden] {
    display: none !important;
}

/* Focus visibile per la navigazione da tastiera */
:focus-visible {
    outline: 3px solid var(--color-secondary);
    outline-offset: 3px;
    border-radius: 6px;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: var(--gutter);
    z-index: 1000;
    padding: 0.75rem 1.25rem;
    background: var(--color-secondary);
    color: var(--color-primary);
    font-weight: 700;
    border-radius: var(--radius-pill);
    transition: top var(--t-fast);
}

.skip-link:focus {
    top: 1rem;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.container {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
}

.section {
    position: relative;
    padding-block: var(--space-xl);
}

/* Evita lo scroll orizzontale causato da decorazioni e animazioni in ingresso
   (clip non crea un contenitore di scroll: position: sticky continua a funzionare) */
main {
    overflow-x: hidden;
    overflow-x: clip;
}


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.05;
    color: var(--color-primary);
    letter-spacing: -0.02em;
    font-variation-settings: "SOFT" 100, "WONK" 1;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p + p {
    margin-top: 1em;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: var(--space-sm);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-secondary-dark);
}

.eyebrow::before {
    content: "";
    width: 28px;
    height: 3px;
    border-radius: 3px;
    background: currentColor;
}

.section-head {
    max-width: 720px;
    margin-bottom: var(--space-lg);
}

.section-head--center {
    margin-inline: auto;
    text-align: center;
}

.section-head--center .eyebrow::after {
    content: "";
    width: 28px;
    height: 3px;
    border-radius: 3px;
    background: currentColor;
}

.section-head p {
    margin-top: var(--space-sm);
    font-size: var(--fs-lg);
    color: var(--color-text-muted);
}

.lead {
    font-size: var(--fs-lg);
    color: var(--color-text-muted);
}

.text-coral {
    color: var(--color-secondary);
}

.placeholder-text {
    /* Evidenzia i testi da sostituire: rimuovere la classe quando inserito il dato reale */
    color: var(--color-crimson);
    font-weight: 600;
}


/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 52px;
    padding: 0.85rem 1.6rem;
    font-weight: 700;
    font-size: var(--fs-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.btn svg {
    width: 18px;
    height: 18px;
    transition: transform var(--t-fast);
}

.btn:hover svg {
    transform: translateX(4px);
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
}

.btn--primary {
    background: var(--color-secondary);
    color: var(--color-primary);
    box-shadow: 0 10px 24px -10px rgba(255, 122, 89, 0.8);
}

.btn--primary:hover {
    background: #ff8f73;
    box-shadow: 0 16px 30px -10px rgba(255, 122, 89, 0.9);
}

.btn--dark {
    background: var(--color-primary);
    color: #fff;
}

.btn--dark:hover {
    background: var(--color-primary-light);
    box-shadow: var(--shadow-md);
}

.btn--ghost {
    border-color: currentColor;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(6px);
}

.btn--ghost:hover {
    background: #fff;
    border-color: #fff;
    color: var(--color-primary);
}

.btn--outline {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn--outline:hover {
    background: var(--color-primary);
    color: #fff;
}

.btn--teal {
    background: var(--color-teal);
    color: #fff;
}

.btn--teal:hover {
    background: #0a8080;
    box-shadow: var(--shadow-md);
}

.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: var(--fs-sm);
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-secondary);
    padding-bottom: 4px;
    transition: gap var(--t-fast), color var(--t-fast);
}

.link-arrow:hover {
    gap: 0.9rem;
    color: var(--color-secondary-dark);
}


/* ==========================================================================
   5. NAVBAR
   ========================================================================== */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    padding-block: 0.75rem;
    transition: padding var(--t-med);
}

/* Sfondo sfocato dell'header dopo lo scroll.
   Sta su uno pseudo-elemento e NON sull'header: un backdrop-filter sull'header
   "intrappolerebbe" il menu mobile (position: fixed) dentro i suoi 64px. */
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 247, 238, 0.88);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    box-shadow: 0 6px 24px -12px rgba(38, 0, 77, 0.35);
    opacity: 0;
    transition: opacity var(--t-med);
    pointer-events: none;
}

/* Stato dopo lo scroll (classe aggiunta da script.js) */
.site-header.is-scrolled {
    padding-block: 0.4rem;
}

.site-header.is-scrolled::before {
    opacity: 1;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    min-height: 56px;
}

.nav__brand {
    position: relative;
    z-index: 2; /* resta visibile sopra il menu mobile aperto */
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.nav__logo {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #fff;
    padding: 2px;
    box-shadow: var(--shadow-sm);
    transition: width var(--t-med), height var(--t-med), transform var(--t-med);
}

.nav__brand:hover .nav__logo {
    transform: rotate(-8deg) scale(1.05);
}

.is-scrolled .nav__logo {
    width: 44px;
    height: 44px;
}

.nav__name {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
    color: #fff;
    transition: color var(--t-med);
}

.nav__name small {
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-peach);
    transition: color var(--t-med);
}

.is-scrolled .nav__name,
.nav-open .nav__name {
    color: var(--color-primary);
}

.is-scrolled .nav__name small,
.nav-open .nav__name small {
    color: var(--color-secondary-dark);
}

/* Hamburger */
.nav__toggle {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(8px);
    transition: background-color var(--t-fast);
}

.is-scrolled .nav__toggle,
.nav-open .nav__toggle {
    background: var(--color-primary);
}

.nav__toggle-bars {
    position: relative;
    width: 22px;
    height: 14px;
}

.nav__toggle-bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: transform var(--t-med), opacity var(--t-fast), top var(--t-med);
}

.nav__toggle-bars span:nth-child(1) { top: 0; }
.nav__toggle-bars span:nth-child(2) { top: 6px; width: 70%; }
.nav__toggle-bars span:nth-child(3) { top: 12px; }

.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(1) {
    top: 6px;
    transform: rotate(45deg);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(2) {
    opacity: 0;
    transform: translateX(-8px);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(3) {
    top: 6px;
    transform: rotate(-45deg);
}

/* Menu mobile: pannello a tutto schermo */
.nav__menu {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--nav-height) + 1.5rem) var(--gutter) 1.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 122, 89, 0.35), transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(6, 110, 110, 0.35), transparent 50%),
        var(--color-background);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity var(--t-med), transform var(--t-med), visibility 0s linear 0.45s;
}

.nav__menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--t-med), transform var(--t-med), visibility 0s;
}

.nav__list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.nav__link {
    position: relative;
    display: inline-block;
    padding: 0.4rem 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2rem, 8vw, 3rem);
    color: var(--color-primary);
    transition: color var(--t-fast), transform var(--t-fast);
}

.nav__link:hover {
    color: var(--color-secondary-dark);
    transform: translateX(6px);
}

.nav__link.is-active,
.nav__link[aria-current="page"] {
    color: var(--color-secondary-dark);
}

.nav__cta {
    margin-top: var(--space-lg);
    align-self: flex-start;
}

/* Contatti rapidi in fondo al menu mobile */
.nav__extra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(38, 0, 77, 0.12);
}

.nav__extra a {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    transition: background-color var(--t-fast), transform var(--t-fast);
}

.nav__extra a:hover {
    background: var(--color-secondary);
    color: var(--color-primary);
    transform: translateY(-2px);
}

.nav__extra svg {
    width: 20px;
    height: 20px;
}

.nav__extra span {
    flex-basis: 100%;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* Con il menu aperto il logo volante della home lascia il posto al logo della navbar */
.menu-open .flying-logo {
    opacity: 0;
    visibility: hidden;
}

.js .has-flying-logo.menu-open .nav__logo {
    visibility: visible;
}

/* Le voci del menu entrano in sequenza su mobile */
.nav__menu .nav__list li {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--t-med), transform var(--t-med);
}

.nav__menu.is-open .nav__list li {
    opacity: 1;
    transform: none;
}

.nav__menu.is-open .nav__list li:nth-child(2) { transition-delay: 0.05s; }
.nav__menu.is-open .nav__list li:nth-child(3) { transition-delay: 0.1s; }
.nav__menu.is-open .nav__list li:nth-child(4) { transition-delay: 0.15s; }
.nav__menu.is-open .nav__list li:nth-child(5) { transition-delay: 0.2s; }


/* ==========================================================================
   6. HERO
   ========================================================================== */
#hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: calc(var(--nav-height) + 2rem) 0 calc(var(--sponsor-overlap) + 5.5rem);
    overflow: hidden;
    color: #fff;
    isolation: isolate;
}

/* Foto del team a tutto schermo */
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -3;
}

.hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    transform: scale(1.08);
    animation: heroZoom 18s ease-out forwards;
}

/* Overlay gradiente alba */
.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(180deg, rgba(38, 0, 77, 0.85) 0%, rgba(38, 0, 77, 0.55) 45%, rgba(190, 14, 58, 0.45) 80%, rgba(255, 122, 89, 0.65) 100%),
        linear-gradient(90deg, rgba(38, 0, 77, 0.65) 0%, rgba(38, 0, 77, 0) 70%);
}

/* Raggi di sole ispirati al logo */
.hero__rays {
    position: absolute;
    z-index: -1;
    right: -30vmax;
    bottom: -30vmax;
    width: 80vmax;
    height: 80vmax;
    border-radius: 50%;
    background: repeating-conic-gradient(from 200deg, rgba(255, 210, 191, 0.16) 0deg 9deg, transparent 9deg 22deg);
    mask-image: radial-gradient(circle, #000 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%);
    animation: spin 120s linear infinite;
    pointer-events: none;
}

/* Forme geometriche "in corsa" */
.hero__shape {
    position: absolute;
    z-index: -1;
    border-radius: var(--radius-pill);
    pointer-events: none;
}

.hero__shape--1 {
    left: -60px;
    bottom: 13%;
    width: 220px;
    height: 14px;
    background: var(--color-secondary);
    transform: rotate(-18deg);
    animation: dash 6s var(--ease) infinite alternate;
}

.hero__shape--2 {
    left: 10%;
    bottom: 9%;
    width: 120px;
    height: 14px;
    background: var(--color-teal-light);
    transform: rotate(-18deg);
    animation: dash 6s var(--ease) 0.6s infinite alternate;
}

.hero__shape--3 {
    right: 8%;
    top: 18%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-pink);
    box-shadow: 40px 30px 0 -4px var(--color-secondary), -30px 70px 0 -6px var(--color-teal-light);
    animation: float 6s ease-in-out infinite;
}

.hero__inner {
    display: grid;
    gap: var(--space-lg);
    align-items: center;
}

.hero__content {
    max-width: 680px;
}

.hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 1rem;
    margin-bottom: var(--space-md);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.hero__kicker::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-secondary);
    box-shadow: 0 0 0 4px rgba(255, 122, 89, 0.3);
    animation: pulse 2s infinite;
}

.hero__title {
    color: #fff;
    font-size: clamp(2.6rem, 1.3rem + 5.2vw, 5.8rem);
    line-height: 0.95;
}

.hero__title span {
    display: block;
    color: var(--color-secondary);
    font-style: italic;
}

.hero__subtitle {
    max-width: 520px;
    margin-top: var(--space-md);
    font-size: var(--fs-lg);
    color: rgba(255, 255, 255, 0.9);
}

.hero__actions {
    margin-top: var(--space-lg);
}

/* Segnaposto del logo grande nella hero (il logo vero è .flying-logo) */
.hero__visual {
    position: relative;
    order: -1;
    justify-self: center;
    width: min(46vw, 200px);
    aspect-ratio: 1;
}

/* --------------------------------------------------------------------------
   LOGO VOLANTE
   Elemento fisso unico: script.js calcola il percorso da .hero__visual a
   .nav__logo e lo affida a un'animazione CSS legata allo scroll
   (animation-timeline: scroll()), eseguita dalla GPU in sincronia col dito.
   Sui browser senza supporto lo muove JavaScript (fallback).
   Variabili impostate da JS: --fly-size (dimensione in px), --rings (fallback).
   Si animano solo transform e opacity: niente ricalcoli di ombre a ogni frame.
   -------------------------------------------------------------------------- */
.flying-logo {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 101; /* sopra l'header */
    display: none;
    width: var(--fly-size, 200px);
    height: var(--fly-size, 200px);
    transform-origin: 0 0;
    pointer-events: none; /* i click passano al link del brand sottostante */
    will-change: transform;
}

.js .has-flying-logo .flying-logo {
    display: block;
}

/* Il logo della navbar resta come "posto di arrivo" invisibile */
.js .has-flying-logo .nav__logo {
    visibility: hidden;
    transition: none;
}

/* Anelli di luce attorno al "sole": svaniscono avvicinandosi all'header */
.flying-logo::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 calc(var(--fly-size, 200px) * 0.035) rgba(255, 210, 191, 0.22),
                0 0 0 calc(var(--fly-size, 200px) * 0.08) rgba(255, 210, 191, 0.1);
    opacity: var(--rings, 1);
    will-change: opacity;
}

.flying-logo__inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 30px 60px -20px rgba(21, 10, 40, 0.45);
    animation: flyIntro 1.1s var(--ease) 0.2s both;
}

.flying-logo__inner img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 9%;
    /* fluttua nella hero, si ferma quando è nell'header */
    animation: floatSoft 7s ease-in-out infinite;
}

.flying-logo.is-docked .flying-logo__inner img {
    animation: none;
}

/* Piccolo "rimbalzo" quando il logo arriva nell'header */
.flying-logo.is-docked .flying-logo__inner {
    animation: dockPop 0.45s var(--ease);
}

.hero__scroll {
    position: absolute;
    left: 50%;
    bottom: calc(var(--sponsor-overlap) + 1rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    transform: translateX(-50%);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.85);
    transition: color var(--t-fast);
}

.hero__scroll:hover {
    color: #fff;
}

.hero__scroll-mouse {
    position: relative;
    width: 24px;
    height: 38px;
    border: 2px solid currentColor;
    border-radius: 14px;
}

.hero__scroll-mouse::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 7px;
    width: 4px;
    height: 8px;
    margin-left: -2px;
    border-radius: 2px;
    background: var(--color-secondary);
    animation: scrollWheel 1.8s var(--ease) infinite;
}

/* Hero compatta (pagina galleria) */
.gallery-hero {
    position: relative;
    padding: calc(var(--nav-height) + var(--space-xl)) 0 var(--space-xl);
    overflow: hidden;
    color: #fff;
    background: var(--gradient-dawn);
    isolation: isolate;
}

.gallery-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    bottom: -70%;
    width: 140vmax;
    height: 140vmax;
    transform: translateX(-50%);
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(255, 210, 191, 0.12) 0deg 8deg, transparent 8deg 20deg);
    mask-image: radial-gradient(circle, #000 20%, transparent 60%);
    -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 60%);
}

.gallery-hero h1 {
    color: #fff;
}

.gallery-hero p:not(.eyebrow) {
    margin-top: var(--space-sm);
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--fs-h3);
    color: var(--color-peach);
}

.gallery-hero .eyebrow {
    color: var(--color-peach);
}

.breadcrumb {
    display: flex;
    gap: 0.5rem;
    margin-bottom: var(--space-md);
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.75);
}

.breadcrumb a:hover {
    color: #fff;
    text-decoration: underline;
}


/* ==========================================================================
   7. SPONSORS
   ========================================================================== */
/* Barra bianca unica che si sovrappone al fondo della hero:
   loghi alla stessa altezza, separati da linee sottili, senza card */
#sponsors {
    position: relative;
    z-index: 3;
    margin-top: calc(var(--sponsor-overlap) * -1);
    padding-bottom: var(--space-md);
}

.sponsors__bar {
    display: grid;
    gap: 0.9rem;
    padding: 1.1rem 1.25rem 1.25rem;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: 0 24px 50px -20px rgba(38, 0, 77, 0.35);
}

.sponsors__title {
    text-align: center;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.sponsors__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
}

.sponsors__list li {
    display: flex;
    justify-content: center;
    padding-inline: 0.5rem;
}

/* linee sottili tra un logo e l'altro */
.sponsors__list li + li {
    border-left: 1px solid rgba(38, 0, 77, 0.1);
}

.sponsor {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--sponsor-logo-h);
    transition: transform var(--t-med);
}

.sponsor img {
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    transition: filter var(--t-med), opacity var(--t-med);
}

.sponsor:hover {
    transform: translateY(-3px);
}

/* Su desktop i loghi sono monocromatici e si colorano al passaggio del mouse */
@media (hover: hover) {
    .sponsor img {
        filter: grayscale(1);
        opacity: 0.7;
    }

    .sponsor:hover img,
    .sponsor:focus-visible img {
        filter: none;
        opacity: 1;
    }
}


/* ==========================================================================
   8. ABOUT
   ========================================================================== */
#chi-siamo {
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 179, 181, 0.35), transparent 40%),
        var(--color-background);
    overflow: hidden;
}

.about {
    display: grid;
    gap: var(--space-lg);
    align-items: center;
}

.about__visual {
    position: relative;
    width: min(100%, 520px);
    margin-inline: auto;
    aspect-ratio: 1;
}

/* Cerchio "sole" decorativo dietro al logo */
.about__visual::before {
    content: "";
    position: absolute;
    inset: 6%;
    border-radius: 50%;
    background: var(--gradient-sun);
    opacity: 0.35;
}

.about__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px dashed rgba(38, 0, 77, 0.2);
    animation: spin 60s linear infinite;
}

.about__logo {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6%;
    transition: transform var(--t-slow);
}

.about__visual:hover .about__logo {
    transform: rotate(-3deg) scale(1.03);
}

.about__badge {
    position: absolute;
    z-index: 2;
    right: 2%;
    bottom: 8%;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.9rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--color-primary);
    animation: float 6s ease-in-out infinite;
}

.about__badge img {
    width: 64px;
    height: auto;
}

.about__stripe {
    position: absolute;
    z-index: 2;
    left: -4%;
    top: 14%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transform: rotate(-18deg);
}

.about__stripe span {
    display: block;
    height: 10px;
    border-radius: 10px;
}

.about__stripe span:nth-child(1) { width: 90px; background: var(--color-teal); }
.about__stripe span:nth-child(2) { width: 60px; background: var(--color-secondary); margin-left: 20px; }
.about__stripe span:nth-child(3) { width: 40px; background: var(--color-accent); margin-left: 40px; }

.about__content h2 {
    margin-bottom: var(--space-md);
}

.about__content h2 em {
    color: var(--color-secondary-dark);
}

.about__content .lead {
    color: var(--color-text);
    font-weight: 500;
}

.about__text {
    margin-top: var(--space-sm);
    color: var(--color-text-muted);
}

.stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: var(--space-lg);
}

.stat {
    position: relative;
    padding: 1.1rem 1.1rem 1rem;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--t-med), box-shadow var(--t-med);
}

.stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 4px;
    background: var(--color-secondary);
}

.stat:nth-child(2)::before { background: var(--color-teal); }
.stat:nth-child(3)::before { background: var(--color-accent); }
.stat:nth-child(4)::before { background: var(--color-crimson); }

.stat:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.stat__value {
    display: block;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem);
    line-height: 1;
    color: var(--color-primary);
}

.stat__label {
    display: block;
    margin-top: 0.4rem;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}


/* ==========================================================================
   9. RACES
   ========================================================================== */
.race {
    position: relative;
    overflow: hidden;
}

.race__grid {
    display: grid;
    gap: var(--space-lg);
    align-items: center;
}

.race__media {
    position: relative;
    border-radius: var(--radius-lg);
}

.race__photo {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.race__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow);
}

.race__media:hover .race__photo img {
    transform: scale(1.05);
}

.race__logo-badge {
    position: absolute;
    z-index: 2;
    bottom: -1.5rem;
    width: min(62%, 300px);
    padding: 0.6rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    transition: transform var(--t-med);
}

.race__media:hover .race__logo-badge {
    transform: translateY(-6px) rotate(-2deg);
}

.race__logo-badge img {
    width: 100%;
    border-radius: calc(var(--radius-md) - 6px);
}

.race__content h2 {
    font-size: clamp(2.4rem, 1.5rem + 4vw, 4.6rem);
}

.race__tagline {
    margin-top: 0.5rem;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: var(--fs-h3);
}

.race__desc {
    margin-top: var(--space-md);
}

.race__info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: var(--space-lg) 0;
}

.info-card {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1rem;
    border-radius: var(--radius-md);
    transition: transform var(--t-med), background-color var(--t-med);
}

.info-card:hover {
    transform: translateY(-3px);
}

.info-card__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 0.3rem;
    border-radius: 12px;
}

.info-card__icon svg {
    width: 20px;
    height: 20px;
}

.info-card__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.info-card__value {
    font-weight: 700;
    line-height: 1.3;
    word-break: break-word;
}

/* Card con il solo logo (Da 0 a 10, senza locandina) */
.race__logo-card {
    position: relative;
    display: grid;
    place-items: center;
    width: min(100%, 520px);
    margin-inline: auto;
    padding: clamp(1.25rem, 4vw, 2.5rem);
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xl) 120px;
    background:
        linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
        linear-gradient(135deg, var(--color-teal), var(--color-teal-light) 50%, var(--color-secondary)) border-box;
    border: 4px solid transparent;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    isolation: isolate;
    transform: rotate(1.5deg);
    transition: transform var(--t-med);
}

.race__logo-card:hover {
    transform: rotate(0deg) scale(1.02);
}

/* grande "10" decorativo dietro al logo */
.race__logo-card-num {
    position: absolute;
    z-index: -1;
    right: -4%;
    bottom: -18%;
    font-weight: 900;
    font-style: italic;
    font-size: clamp(9rem, 30vw, 17rem);
    line-height: 1;
    letter-spacing: -0.06em;
    color: rgba(6, 110, 110, 0.12);
}

.race__logo-card img {
    width: 100%;
    height: auto;
}

/* Locandina ufficiale della gara (cliccabile → lightbox) */
.race__poster {
    position: relative;
    display: block;
    width: min(100%, 440px);
    margin-inline: auto;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.08);
    cursor: zoom-in;
    transform: rotate(-2deg);
    transition: transform var(--t-med), box-shadow var(--t-med);
}

.race__poster:hover,
.race__poster:focus-visible {
    transform: rotate(0deg) scale(1.02);
    box-shadow: 0 40px 80px -24px rgba(255, 122, 89, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.race__poster img {
    width: 100%;
    height: auto;
}

.race__poster-hint {
    position: absolute;
    right: 0.75rem;
    top: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-pill);
    background: rgba(21, 10, 40, 0.78);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: background-color var(--t-fast), color var(--t-fast);
}

.race__poster:hover .race__poster-hint {
    background: var(--color-secondary);
    color: var(--color-primary);
}

.race__poster-hint svg {
    width: 15px;
    height: 15px;
}

.race__edition {
    display: inline-flex;
    margin-top: 0.9rem;
    padding: 0.35rem 0.9rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-peach);
}

/* --- Vignaletto Challenge: sezione scura, molto forte --- */
#vignaletto {
    color: rgba(255, 255, 255, 0.86);
    background:
        radial-gradient(circle at 85% 10%, rgba(255, 122, 89, 0.28), transparent 45%),
        radial-gradient(circle at 0% 100%, rgba(6, 110, 110, 0.35), transparent 45%),
        var(--color-dark);
}

/* Strisce ispirate al logo della gara */
#vignaletto::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 10px;
    background: linear-gradient(90deg,
        #2f8c87 0 25%,
        #8b3a2b 25% 50%,
        #e1663f 50% 75%,
        #f2b53c 75% 100%);
}

#vignaletto .eyebrow {
    color: var(--color-secondary);
}

#vignaletto h2 {
    color: #fff;
}

#vignaletto .race__tagline {
    color: var(--color-secondary);
}

#vignaletto .race__logo-badge {
    right: -0.5rem;
    background: #2a2a2a;
}

#vignaletto .info-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#vignaletto .info-card:hover {
    background: rgba(255, 255, 255, 0.1);
}

#vignaletto .info-card__icon {
    background: rgba(255, 122, 89, 0.18);
    color: var(--color-secondary);
}

#vignaletto .info-card__label {
    color: rgba(255, 255, 255, 0.6);
}

#vignaletto .info-card__value {
    color: #fff;
}

.race__stripes {
    position: absolute;
    right: -80px;
    bottom: 12%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transform: rotate(-14deg);
    opacity: 0.6;
    pointer-events: none;
}

.race__stripes span {
    display: block;
    width: 320px;
    height: 12px;
    border-radius: 12px;
}

.race__stripes span:nth-child(1) { background: #2f8c87; }
.race__stripes span:nth-child(2) { background: #8b3a2b; margin-left: 30px; }
.race__stripes span:nth-child(3) { background: #e1663f; margin-left: 60px; }
.race__stripes span:nth-child(4) { background: #f2b53c; margin-left: 90px; }

/* --- Corri a San Vito: colori della locandina (blu elettrico, arancio, giallo) --- */
#san-vito {
    --sanvito-orange: #ff8a1f;
    --sanvito-yellow: #ffd23f;
    color: rgba(255, 255, 255, 0.88);
    background:
        radial-gradient(circle at 85% 15%, rgba(255, 138, 31, 0.35), transparent 40%),
        radial-gradient(circle at 10% 90%, rgba(0, 170, 255, 0.35), transparent 45%),
        linear-gradient(160deg, #0a1f6b 0%, #1239b5 55%, #0b2a8a 100%);
}

/* scie di luce "in velocità" */
#san-vito::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(-18deg, transparent 0 46px, rgba(255, 210, 63, 0.07) 46px 48px, transparent 48px 120px);
    pointer-events: none;
}

#san-vito .eyebrow {
    color: var(--sanvito-yellow);
}

#san-vito h2 {
    color: #fff;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

#san-vito h2 span {
    color: var(--sanvito-orange);
}

#san-vito .race__tagline {
    color: var(--sanvito-yellow);
}

#san-vito .race__desc strong {
    color: #fff;
}

.race__claim {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-h3);
    color: #fff;
}

#san-vito .info-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

#san-vito .info-card:hover {
    background: rgba(255, 255, 255, 0.13);
}

#san-vito .info-card__icon {
    background: rgba(255, 138, 31, 0.2);
    color: var(--sanvito-orange);
}

#san-vito .info-card__label {
    color: rgba(255, 255, 255, 0.65);
}

#san-vito .info-card__value {
    color: #fff;
}

#san-vito .race__poster {
    transform: rotate(2deg);
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.12);
}

#san-vito .race__poster:hover,
#san-vito .race__poster:focus-visible {
    transform: rotate(0deg) scale(1.02);
    box-shadow: 0 40px 80px -24px rgba(255, 138, 31, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.2);
}

#san-vito .btn--primary {
    background: var(--sanvito-orange);
    color: #10123a;
    box-shadow: 0 10px 24px -10px rgba(255, 138, 31, 0.9);
}

/* Conto alla rovescia (gare in arrivo) */
.race__countdown {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.9rem;
    padding: 0.45rem 1rem 0.45rem 0.6rem;
    border-radius: var(--radius-pill);
    background: var(--color-secondary);
    color: var(--color-primary);
    font-size: var(--fs-sm);
    font-weight: 700;
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.5);
}

#san-vito .race__countdown {
    background: var(--sanvito-yellow);
    color: #10123a;
}

.race__countdown strong {
    display: grid;
    place-items: center;
    min-width: 2.2em;
    height: 2.2em;
    padding-inline: 0.4em;
    border-radius: var(--radius-pill);
    background: #10123a;
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.05em;
}

/* --- La 10 di Martina: colori della locandina (blu notte, arancio, sabbia) --- */
#la-dieci {
    --ladieci-navy: #1e2a47;
    --ladieci-orange: #e8722a;
    background:
        radial-gradient(circle at 100% 0%, rgba(232, 114, 42, 0.22), transparent 45%),
        linear-gradient(180deg, #f6e3cf 0%, #fbefe2 100%);
}

/* "10" decorativo in sfondo */
#la-dieci::before {
    content: "10";
    position: absolute;
    left: -2%;
    bottom: -4%;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(11rem, 32vw, 28rem);
    line-height: 0.8;
    color: rgba(30, 42, 71, 0.06);
    pointer-events: none;
}

#la-dieci .eyebrow {
    color: var(--ladieci-orange);
}

#la-dieci h2 {
    color: var(--ladieci-navy);
}

#la-dieci .race__tagline {
    color: var(--ladieci-orange);
}

#la-dieci .race__edition {
    border-color: rgba(30, 42, 71, 0.18);
    background: rgba(30, 42, 71, 0.06);
    color: var(--ladieci-navy);
}

#la-dieci .race__desc {
    color: var(--color-text);
}

#la-dieci .info-card {
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    border-top: 3px solid var(--ladieci-orange);
}

#la-dieci .info-card__icon {
    background: rgba(232, 114, 42, 0.12);
    color: var(--ladieci-orange);
}

#la-dieci .info-card__label {
    color: var(--color-text-muted);
}

#la-dieci .info-card__value {
    color: var(--ladieci-navy);
}

#la-dieci .race__poster {
    transform: rotate(2deg);
    box-shadow: 0 30px 60px -20px rgba(30, 42, 71, 0.55);
}

#la-dieci .race__poster:hover,
#la-dieci .race__poster:focus-visible {
    transform: rotate(0deg) scale(1.02);
}

#la-dieci .btn--outline {
    border-color: var(--ladieci-navy);
    color: var(--ladieci-navy);
}

#la-dieci .btn--outline:hover {
    background: var(--ladieci-navy);
    color: #fff;
}

.btn--navy {
    background: #1e2a47;
    color: #fff;
}

.btn--navy:hover {
    background: #2b3a61;
    box-shadow: var(--shadow-md);
}

/* --- Da 0 a 10 KM: identità più grafica/editoriale, accento teal --- */
#da-zero-a-dieci {
    background:
        linear-gradient(180deg, #f1ece6 0%, var(--color-background) 100%);
}

#da-zero-a-dieci::before {
    /* Grande "10" decorativo in sfondo */
    content: "10";
    position: absolute;
    right: -2%;
    top: 4%;
    font-family: var(--font-body);
    font-weight: 900;
    font-style: italic;
    font-size: clamp(12rem, 35vw, 30rem);
    line-height: 0.8;
    color: rgba(6, 110, 110, 0.06);
    pointer-events: none;
}

#da-zero-a-dieci .eyebrow {
    color: var(--color-teal);
}

#da-zero-a-dieci h2 {
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 900;
    letter-spacing: -0.04em;
    color: var(--color-dark);
}

#da-zero-a-dieci h2 span {
    color: var(--color-teal);
}

#da-zero-a-dieci .race__tagline {
    color: var(--color-teal);
}

#da-zero-a-dieci .race__desc {
    color: var(--color-text-muted);
}

#da-zero-a-dieci .race__logo-badge {
    left: -0.5rem;
    background: #fff;
}

#da-zero-a-dieci .info-card {
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--color-teal);
}

#da-zero-a-dieci .info-card__icon {
    background: rgba(6, 110, 110, 0.1);
    color: var(--color-teal);
}

#da-zero-a-dieci .info-card__label {
    color: var(--color-text-muted);
}

#da-zero-a-dieci .info-card__value {
    color: var(--color-text);
}

#da-zero-a-dieci .race__photo {
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xl) 120px;
}


/* --- Seguici sui social --- */
#social {
    background:
        radial-gradient(circle at 0% 100%, rgba(255, 122, 89, 0.18), transparent 45%),
        radial-gradient(circle at 100% 0%, rgba(90, 67, 192, 0.14), transparent 45%),
        var(--color-cream-dark);
}

.social-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    max-width: 1000px;
    margin-inline: auto;
}

.social-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    height: 100%;
    padding: 1.4rem 0.75rem 1.25rem;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: transform var(--t-med), box-shadow var(--t-med);
}

.social-card:hover,
.social-card:focus-visible {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}

.social-card__icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 0.5rem;
    border-radius: 50%;
    color: #fff;
    transition: transform var(--t-med);
}

.social-card:hover .social-card__icon {
    transform: scale(1.08) rotate(-6deg);
}

.social-card__icon svg {
    width: 30px;
    height: 30px;
}

.social-card--instagram .social-card__icon {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.social-card--facebook .social-card__icon { background: #1877f2; }
.social-card--whatsapp .social-card__icon { background: #25d366; }
.social-card--phone .social-card__icon { background: var(--color-secondary); color: var(--color-primary); }

.social-card__name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--color-primary);
}

.social-card__handle {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    word-break: break-word;
}


/* ==========================================================================
   10. GALLERY
   ========================================================================== */

/* Media generico con fallback: se una foto non esiste ancora,
   script.js aggiunge .is-missing e appare un placeholder con il nome file */
.media {
    position: relative;
    overflow: hidden;
    background: var(--color-cream-dark);
}

.media.is-missing {
    background:
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.06) 0 14px, transparent 14px 28px),
        var(--gradient-dawn);
}

.media.is-missing img {
    opacity: 0;
}

.media.is-missing::after {
    content: "📷 " attr(data-placeholder);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    text-align: center;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.9);
    word-break: break-all;
}

/* --- Anteprima galleria (home) --- */
#gallery-preview {
    background: var(--color-surface);
}

.preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.gallery-item {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    text-align: left;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow);
}

.gallery-item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent 40%, rgba(38, 0, 77, 0.75) 100%);
    opacity: 0.55;
    transition: opacity var(--t-med);
}

/* Locandine in griglia: si vede la parte alta (titolo); intera nel lightbox */
.gallery-item--poster img {
    object-position: center top;
}

.gallery-item:hover img,
.gallery-item:focus-visible img {
    transform: scale(1.08);
}

.gallery-item:hover::before,
.gallery-item:focus-visible::before {
    opacity: 1;
}

.gallery-item__caption {
    position: absolute;
    z-index: 2;
    left: 0.9rem;
    right: 0.9rem;
    bottom: 0.8rem;
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transform: translateY(6px);
    opacity: 0.9;
    transition: transform var(--t-med), opacity var(--t-med);
}

.gallery-item:hover .gallery-item__caption,
.gallery-item:focus-visible .gallery-item__caption {
    transform: none;
    opacity: 1;
}

.gallery-item__zoom {
    position: absolute;
    z-index: 2;
    top: 0.75rem;
    right: 0.75rem;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--color-secondary);
    color: var(--color-primary);
    transform: scale(0.6);
    opacity: 0;
    transition: transform var(--t-med), opacity var(--t-med);
}

.gallery-item__zoom svg {
    width: 18px;
    height: 18px;
}

.gallery-item:hover .gallery-item__zoom,
.gallery-item:focus-visible .gallery-item__zoom {
    transform: scale(1);
    opacity: 1;
}

.preview-cta {
    display: flex;
    justify-content: center;
    margin-top: var(--space-lg);
}

/* --- Filtri galleria --- */
.gallery-filters {
    position: sticky;
    top: calc(var(--nav-height) - 8px);
    z-index: 10;
    padding-block: var(--space-md);
    background: rgba(255, 247, 238, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.filters {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 4px;
    margin: -4px;
}

.filters::-webkit-scrollbar {
    display: none;
}

.filter-btn {
    flex-shrink: 0;
    min-height: 44px;
    padding: 0.55rem 1.2rem;
    border-radius: var(--radius-pill);
    border: 2px solid rgba(38, 0, 77, 0.15);
    background: var(--color-surface);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--color-primary);
    transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}

.filter-btn:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

.filter-btn[aria-pressed="true"] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.filter-btn__count {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0 0.45rem;
    border-radius: var(--radius-pill);
    background: rgba(38, 0, 77, 0.08);
    font-size: 0.7rem;
}

.filter-btn[aria-pressed="true"] .filter-btn__count {
    background: var(--color-secondary);
    color: var(--color-primary);
}

/* --- Griglia galleria --- */
.gallery-grid {
    padding-block: var(--space-lg) var(--space-xl);
}

.masonry {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.masonry .gallery-item {
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

/* Le locandine (verticali) occupano due righe della griglia */
.masonry {
    grid-auto-flow: dense;
}

.masonry .gallery-item--poster {
    grid-row: span 2;
    aspect-ratio: auto;
}

/* Stati di filtraggio gestiti da script.js */
.masonry .gallery-item.is-hiding {
    opacity: 0;
    transform: scale(0.94);
}

.masonry .gallery-item.is-hidden {
    display: none;
}

.gallery-empty {
    padding: var(--space-lg);
    text-align: center;
    color: var(--color-text-muted);
}

/* --- Lightbox --- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: grid;
    place-items: center;
    padding: 4rem 1rem;
    background: rgba(21, 10, 40, 0.94);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-med), visibility 0s linear 0.45s;
}

.lightbox.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--t-med), visibility 0s;
}

.lightbox__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    max-width: min(1100px, 100%);
    transform: scale(0.96);
    transition: transform var(--t-med);
}

.lightbox.is-open .lightbox__figure {
    transform: none;
}

.lightbox__img {
    max-width: 100%;
    max-height: 75vh;
    max-height: 75svh;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    object-fit: contain;
    transition: opacity 0.25s ease;
}

.lightbox__img.is-loading {
    opacity: 0;
}

.lightbox__placeholder {
    display: grid;
    place-items: center;
    width: min(80vw, 700px);
    aspect-ratio: 4 / 3;
    padding: 1rem;
    border-radius: var(--radius-md);
    background:
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.06) 0 14px, transparent 14px 28px),
        var(--gradient-dawn);
    color: #fff;
    text-align: center;
    font-weight: 700;
    word-break: break-all;
}

.lightbox__caption {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--fs-sm);
    text-align: center;
}

.lightbox__counter {
    color: var(--color-secondary);
    font-weight: 700;
    margin-right: 0.5rem;
}

.lightbox__btn {
    position: absolute;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transition: background-color var(--t-fast), transform var(--t-fast), color var(--t-fast);
}

.lightbox__btn:hover {
    background: var(--color-secondary);
    color: var(--color-primary);
}

.lightbox__btn svg {
    width: 24px;
    height: 24px;
}

.lightbox__close {
    top: 1rem;
    right: 1rem;
}

.lightbox__prev,
.lightbox__next {
    bottom: 1rem;
}

.lightbox__prev { left: calc(50% - 64px); }
.lightbox__next { right: calc(50% - 64px); }


/* ==========================================================================
   11. CONTACT
   ========================================================================== */
#contact-info {
    background:
        radial-gradient(circle at 100% 0%, rgba(6, 110, 110, 0.12), transparent 45%),
        var(--color-background);
}

.contact {
    display: grid;
    gap: var(--space-lg);
    align-items: stretch;
}

.contact__intro p {
    margin-top: var(--space-sm);
    color: var(--color-text-muted);
}

.contact-cards {
    display: grid;
    gap: 0.75rem;
    margin-top: var(--space-lg);
}

.contact-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-med), box-shadow var(--t-med);
}

a.contact-card:hover,
.contact-card:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-md);
}

.contact-card__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--color-primary);
    color: var(--color-secondary);
}

.contact-cards li:nth-child(2) .contact-card__icon { background: var(--color-teal); color: #fff; }
.contact-cards li:nth-child(3) .contact-card__icon { background: var(--color-secondary); color: var(--color-primary); }
.contact-cards li:nth-child(4) .contact-card__icon { background: var(--color-accent); color: #fff; }

.contact-card__icon svg {
    width: 22px;
    height: 22px;
}

.contact-card__label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.contact-card__value {
    display: block;
    font-weight: 700;
    color: var(--color-primary);
    word-break: break-word;
}

.socials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.3rem;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 40px;
    padding: 0.35rem 0.9rem 0.35rem 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--color-background);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--color-primary);
    transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

.social-link svg {
    width: 22px;
    height: 22px;
}

.social-link:hover {
    background: var(--color-primary);
    color: #fff;
    transform: translateY(-2px);
}

/* Mappa */
.map {
    position: relative;
    min-height: 360px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-cream-dark);
    box-shadow: var(--shadow-md);
    border: 6px solid var(--color-surface);
}

.map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Mostrato da script.js finché l'URL di Google Maps non è inserito */
.map__placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 0.75rem;
    padding: 2rem;
    text-align: center;
    background:
        linear-gradient(rgba(38, 0, 77, 0.06) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(90deg, rgba(38, 0, 77, 0.06) 1px, transparent 1px) 0 0 / 32px 32px,
        var(--color-cream-dark);
    color: var(--color-text-muted);
}

.map__placeholder svg {
    width: 56px;
    height: 56px;
    margin-inline: auto;
    color: var(--color-secondary);
    animation: bounce 2s ease-in-out infinite;
}

.map__placeholder strong {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    color: var(--color-primary);
}

.map__placeholder code {
    font-size: var(--fs-xs);
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    background: rgba(38, 0, 77, 0.08);
    color: var(--color-crimson);
}


/* ==========================================================================
   12. FORM
   ========================================================================== */
#contact-form {
    color: rgba(255, 255, 255, 0.85);
    background: var(--gradient-dawn);
    overflow: hidden;
    isolation: isolate;
}

#contact-form::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -20vmax;
    top: -20vmax;
    width: 60vmax;
    height: 60vmax;
    border-radius: 50%;
    background: repeating-conic-gradient(from 90deg, rgba(255, 210, 191, 0.1) 0deg 8deg, transparent 8deg 20deg);
    mask-image: radial-gradient(circle, #000 20%, transparent 65%);
    -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 65%);
}

#contact-form h2 {
    color: #fff;
}

#contact-form .eyebrow {
    color: var(--color-peach);
}

#contact-form .section-head p {
    color: rgba(255, 255, 255, 0.85);
}

.form-card {
    max-width: 860px;
    margin-inline: auto;
    padding: clamp(1.25rem, 0.8rem + 3vw, 3rem);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-lg);
}

.form-grid {
    display: grid;
    gap: 1.1rem;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-field label {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--color-primary);
}

.form-field label .req {
    color: var(--color-crimson);
}

.form-field input,
.form-field textarea {
    width: 100%;
    min-height: 52px;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    border: 2px solid #e8dfd6;
    background: var(--color-background);
    font-size: 1rem; /* 16px: evita lo zoom automatico su iOS */
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
}

.form-field textarea {
    min-height: 150px;
    resize: vertical;
}

.form-field input:hover,
.form-field textarea:hover {
    border-color: #d5c7bb;
}

.form-field input:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(90, 67, 192, 0.15);
}

.form-field.has-error input,
.form-field.has-error textarea {
    border-color: var(--color-crimson);
    background: #fff5f6;
}

.form-error {
    min-height: 1.1em;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--color-crimson);
}

/* Campo anti-spam invisibile (FormSubmit) */
.form-honeypot {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: var(--fs-sm);
}

.form-check input {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.form-check a {
    color: var(--color-accent);
    font-weight: 700;
    text-decoration: underline;
}

.form-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.5rem;
}

.form-actions .btn {
    width: 100%;
}

.form-actions small {
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
}

.btn.is-loading {
    pointer-events: none;
    opacity: 0.75;
}

.btn.is-loading::after {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: spin 0.7s linear infinite;
}

.form-success {
    display: none;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 1.25rem;
    padding: 1.1rem 1.25rem;
    border-radius: var(--radius-md);
    background: rgba(6, 110, 110, 0.1);
    border: 2px solid var(--color-teal);
    color: var(--color-teal);
    font-weight: 600;
}

.form-success.is-visible {
    display: flex;
    animation: slideUp 0.5s var(--ease);
}

.form-success svg {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
}


/* ==========================================================================
   13. FOOTER
   ========================================================================== */
/* Footer minimal: una riga (logo · link · social), riga legale, credit */
.site-footer {
    position: relative;
    padding-top: 2.5rem;
    color: rgba(255, 255, 255, 0.65);
    background: var(--color-dark);
    font-size: var(--fs-sm);
}

.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent), var(--color-secondary), var(--color-teal));
}

.footer__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
}

.footer__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #fff;
}

.footer__brand img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    padding: 2px;
}

.footer__brand strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.1rem;
    line-height: 1.1;
    text-align: left;
}

.footer__brand small {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--color-secondary);
    text-align: left;
}

.footer__nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1.5rem;
}

.footer__nav a {
    display: inline-block;
    padding-block: 0.3rem;
    transition: color var(--t-fast);
}

.footer__nav a:hover {
    color: #fff;
}

.footer__social {
    display: flex;
    gap: 0.5rem;
}

.footer__social a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    transition: background-color var(--t-fast), transform var(--t-fast), color var(--t-fast);
}

.footer__social a:hover {
    background: var(--color-secondary);
    color: var(--color-primary);
    transform: translateY(-3px);
}

.footer__social svg {
    width: 18px;
    height: 18px;
}

.footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: var(--fs-xs);
    text-align: center;
}

.footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
}

.footer__legal a:hover {
    color: var(--color-secondary);
}

.footer__credit {
    padding-block: 1.25rem 1.5rem;
    text-align: center;
    font-size: var(--fs-xs);
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.45);
}

.footer__credit a {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid var(--color-secondary);
    transition: color var(--t-fast);
}

.footer__credit a:hover {
    color: var(--color-secondary);
}

/* Pulsanti fissi: WhatsApp a sinistra, Instagram a destra */
.float-btn {
    position: fixed;
    z-index: 95; /* sotto header/menu (100), banner cookie (400) e lightbox (500) */
    bottom: 1rem;
    display: grid;
    place-items: center;
    width: var(--float-size);
    height: var(--float-size);
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 12px 28px -8px rgba(21, 10, 40, 0.45);
    transition: transform var(--t-fast), box-shadow var(--t-fast);
    animation: floatIn 0.6s var(--ease) 0.8s backwards; /* "backwards": dopo l'ingresso l'hover funziona */
}

.float-btn:hover {
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 16px 34px -8px rgba(21, 10, 40, 0.55);
}

.float-btn svg {
    width: 28px;
    height: 28px;
}

.float-btn--whatsapp {
    left: 1rem;
    background: #25d366;
}

/* piccolo "respiro" per attirare l'attenzione */
.float-btn--whatsapp::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55);
    animation: floatPulse 2.6s ease-out 2s infinite;
}

.float-btn--instagram {
    right: 1rem;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

/* con il menu mobile aperto spariscono */
.menu-open .float-btn {
    opacity: 0;
    visibility: hidden;
}

@keyframes floatIn {
    from { opacity: 0; transform: translateY(20px) scale(0.8); }
    to { opacity: 1; transform: none; }
}

@keyframes floatPulse {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
    70%, 100% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
}

.back-to-top {
    position: fixed;
    right: calc(1rem + (var(--float-size) - 48px) / 2);
    bottom: calc(1rem + var(--float-size) + 0.75rem); /* sopra il pulsante Instagram */
    z-index: 90;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-secondary);
    color: var(--color-primary);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity var(--t-med), transform var(--t-med), visibility 0s linear 0.45s;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--t-med), transform var(--t-med), visibility 0s;
}

.back-to-top:hover {
    transform: translateY(-3px);
}

.back-to-top svg {
    width: 22px;
    height: 22px;
}


/* --------------------------------------------------------------------------
   DOMANDE FREQUENTI
   -------------------------------------------------------------------------- */
#faq {
    background: var(--color-background);
}

.faq__list {
    display: grid;
    gap: 0.75rem;
    max-width: 820px;
    margin-inline: auto;
}

.faq__item {
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--t-med);
}

.faq__item[open] {
    box-shadow: var(--shadow-md);
}

.faq__item summary {
    position: relative;
    display: block;
    padding: 1.1rem 3.5rem 1.1rem 1.25rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
    color: var(--color-primary);
    cursor: pointer;
    list-style: none;
}

.faq__item summary::-webkit-details-marker {
    display: none;
}

/* icona + / – */
.faq__item summary::after {
    content: "+";
    position: absolute;
    right: 1rem;
    top: 50%;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    border-radius: 50%;
    background: var(--color-secondary);
    color: var(--color-primary);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1;
    transition: transform var(--t-med), background-color var(--t-fast);
}

.faq__item[open] summary::after {
    content: "–";
    background: var(--color-primary);
    color: #fff;
}

.faq__item p {
    padding: 0 1.25rem 1.2rem;
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   PAGINE LEGALI (privacy-policy.html, cookie-policy.html)
   -------------------------------------------------------------------------- */
.legal__content {
    max-width: 780px;
}

.legal__updated {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.3rem 0.85rem;
    border-radius: var(--radius-pill);
    background: var(--color-cream-dark);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--color-text-muted);
}

.legal__content h2 {
    margin: 2.25rem 0 0.75rem;
    font-size: var(--fs-h3);
}

.legal__content p,
.legal__content li {
    color: var(--color-text);
}

.legal__content ul {
    display: grid;
    gap: 0.5rem;
    margin-block: 0.75rem;
    padding-left: 1.25rem;
    list-style: disc;
}

.legal__content li::marker {
    color: var(--color-secondary);
}

.legal__content a:not(.btn) {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-word;
}

.legal__table-wrap {
    margin-block: 1rem;
    overflow-x: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.legal__table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    background: var(--color-surface);
    font-size: var(--fs-sm);
}

.legal__table th,
.legal__table td {
    padding: 0.8rem 1rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(38, 0, 77, 0.08);
}

.legal__table th {
    background: var(--color-primary);
    color: #fff;
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.legal__table small {
    color: var(--color-text-muted);
}

.legal__btn {
    margin-top: 0.5rem;
}

.legal-hero {
    padding-bottom: clamp(2.25rem, 4vw, 3.5rem);
}

/* --------------------------------------------------------------------------
   PAGINE GARA (vignaletto-challenge.html, corri-a-san-vito.html, ...)
   -------------------------------------------------------------------------- */
.race-hero {
    --race-accent: var(--color-secondary);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: calc(var(--nav-height) + 2.5rem) 0 clamp(2.75rem, 5vw, 4.5rem);
    color: #fff;
    background: var(--gradient-dawn);
}

/* locandina ingrandita e sfocata come sfondo */
.race-hero__bg {
    position: absolute;
    inset: -60px;
    z-index: -2;
    background-size: cover;
    background-position: center;
    filter: blur(30px) saturate(1.25);
    transform: scale(1.1);
}

.race-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(12, 6, 28, 0.78) 0%, rgba(12, 6, 28, 0.55) 55%, rgba(12, 6, 28, 0.82) 100%);
}

.race-hero--vignaletto { --race-accent: #f2b53c; }
.race-hero--san-vito { --race-accent: #ffd23f; }
.race-hero--la-dieci { --race-accent: #ff9a52; }

.race-hero--da-zero-a-dieci {
    --race-accent: #7fe3cf;
    background: linear-gradient(150deg, #0a4040 0%, #066e6e 55%, #13a38a 100%);
}

.race-hero--da-zero-a-dieci::after {
    background: radial-gradient(circle at 90% 10%, rgba(255, 122, 89, 0.3), transparent 45%);
}

.race-hero .breadcrumb a,
.race-hero .breadcrumb span {
    color: rgba(255, 255, 255, 0.8);
}

.race-hero .eyebrow {
    color: var(--race-accent);
}

.race-hero h1 {
    color: #fff;
    font-size: clamp(2.4rem, 1.3rem + 5vw, 5rem);
    max-width: 16ch;
}

.race-hero__tagline {
    margin-top: 0.6rem;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: var(--fs-h3);
    color: var(--race-accent);
}

.race-hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.race-hero__facts li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.race-hero__facts svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--race-accent);
}

.race-hero__actions {
    margin-top: 1.5rem;
}

/* badge "Edizione conclusa" quando la data è passata */
.race__countdown.is-past {
    padding: 0.45rem 1rem;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    box-shadow: none;
}

.race-map {
    background: var(--color-surface);
}

/* Le altre gare */
.other-races {
    background: var(--color-cream-dark);
}

.race-links {
    display: grid;
    gap: 0.75rem;
    max-width: 1000px;
    margin-inline: auto;
}

.race-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-med), box-shadow var(--t-med);
}

.race-link:hover,
.race-link:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.race-link__thumb {
    display: grid;
    place-items: center;
    flex: 0 0 76px;
    aspect-ratio: 3 / 4;
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-background);
}

.race-link__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.race-link__thumb .race-link__logo {
    object-fit: contain;
    padding: 6px;
}

.race-link__body strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.15rem;
    line-height: 1.15;
    color: var(--color-primary);
}

.race-link__body span {
    display: block;
    margin-top: 0.25rem;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

@media (min-width: 768px) {
    .race-links {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Footer: link a tutte le gare */
.footer__races {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 1.25rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: var(--fs-sm);
}

.footer__races span {
    flex-basis: 100%;
    text-align: center;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #fff;
}

.footer__races a {
    transition: color var(--t-fast);
}

.footer__races a:hover {
    color: var(--color-secondary);
}

.footer__races + .footer__bottom {
    margin-top: 1.25rem;
}

@media (min-width: 768px) {
    .footer__races {
        justify-content: flex-start;
    }

    .footer__races span {
        flex-basis: auto;
        margin-right: 0.5rem;
    }
}

/* --------------------------------------------------------------------------
   PAGINA 404
   -------------------------------------------------------------------------- */
.notfound {
    display: flex;
    align-items: center;
    min-height: 82vh;
    min-height: 82svh;
    text-align: center;
}

.notfound__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.notfound__code {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(6rem, 4rem + 14vw, 12rem);
    line-height: 0.9;
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 210, 191, 0.7);
}

.notfound p:not(.notfound__code) {
    max-width: 480px;
    margin-top: 0;
    font-family: var(--font-body);
    font-style: normal;
    font-size: var(--fs-lg);
    color: rgba(255, 255, 255, 0.85);
}

.notfound__actions {
    justify-content: center;
    margin-top: 0.75rem;
}

/* --------------------------------------------------------------------------
   COOKIE BANNER (creato da script.js al primo accesso)
   -------------------------------------------------------------------------- */
.cookie-banner {
    position: fixed;
    z-index: 400; /* sopra header e pulsanti, sotto il lightbox */
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    max-width: 560px;
    padding: 1.25rem;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: 0 30px 70px -20px rgba(21, 10, 40, 0.55), 0 0 0 1px rgba(38, 0, 77, 0.06);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--t-med), transform var(--t-med);
}

.cookie-banner.is-visible {
    opacity: 1;
    transform: none;
}

.cookie-banner__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--color-primary);
}

.cookie-banner__text {
    margin-top: 0.4rem;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--color-text-muted);
}

.cookie-banner__text a {
    font-weight: 700;
    color: var(--color-accent);
    text-decoration: underline;
}

.cookie-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}

.cookie-banner__actions .btn {
    flex: 1 1 150px;
    min-height: 46px;
    padding: 0.7rem 1rem;
}

@media (min-width: 768px) {
    .cookie-banner {
        left: 1.5rem;
        bottom: 1.5rem;
        padding: 1.5rem;
    }
}

.map__placeholder .btn {
    justify-self: center;
    margin-top: 0.25rem;
}

.map__placeholder .link-arrow {
    justify-self: center;
    font-size: var(--fs-xs);
}

.footer__legal button {
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: color var(--t-fast);
}

.footer__legal button:hover {
    color: var(--color-secondary);
}


/* ==========================================================================
   14. ANIMATIONS
   ========================================================================== */

/* Elementi animati allo scroll (IntersectionObserver in script.js).
   La classe .js viene aggiunta su <html> solo se JS è attivo:
   senza JavaScript il contenuto resta comunque visibile. */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
    transition-delay: var(--reveal-delay, 0s);
}

.js [data-reveal="left"] { transform: translateX(-40px); }
.js [data-reveal="right"] { transform: translateX(40px); }
.js [data-reveal="zoom"] { transform: scale(0.92); }
.js [data-reveal="fade"] { transform: none; }

.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

@keyframes heroZoom {
    to { transform: scale(1); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes floatSoft {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4%); }
}

@keyframes flyIntro {
    from { opacity: 0; transform: scale(0.6) rotate(-12deg); }
    to { opacity: 1; transform: none; }
}

@keyframes dockPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

@keyframes dash {
    from { translate: 0 0; }
    to { translate: 60px -20px; }
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 122, 89, 0.6); }
    100% { box-shadow: 0 0 0 12px rgba(255, 122, 89, 0); }
}

@keyframes scrollWheel {
    0% { opacity: 0; transform: translateY(0); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: translateY(12px); }
}

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

@keyframes slideUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

/* Rispetto delle preferenze utente sul movimento */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .js [data-reveal] {
        opacity: 1;
        transform: none;
    }

    /* il logo segue comunque lo scroll (movimento controllato dall'utente) */
    .flying-logo.is-timeline,
    .flying-logo.is-timeline::before {
        animation-duration: auto !important;
    }
}


/* ==========================================================================
   15. RESPONSIVE (mobile first: i valori base sono per smartphone)
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO A COLONNA SINGOLA (< 1024px): logo al centro, testi e bottoni centrati
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .hero__inner {
        justify-items: center;
        text-align: center;
    }

    .hero__content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero__subtitle {
        margin-inline: auto;
    }

    .hero__actions {
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   SMARTPHONE (< 768px): versione compatta di tutto il sito
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    :root {
        --fs-base: 0.95rem;
        --fs-lg: 1.02rem;
        --fs-h2: clamp(1.7rem, 1.2rem + 3vw, 2.2rem);
        --fs-h3: 1.15rem;
        --fs-h1: clamp(2.4rem, 1.4rem + 6vw, 3.2rem);
        --space-lg: 1.6rem;
        --space-xl: 3.25rem;
        --nav-height: 64px;
        --radius-lg: 22px;
    }

    body {
        line-height: 1.6;
    }

    .section-head {
        margin-bottom: 1.4rem;
    }

    .eyebrow {
        margin-bottom: 0.6rem;
        letter-spacing: 0.18em;
    }

    /* Navbar */
    .site-header {
        padding-block: 0.5rem;
    }

    .nav {
        min-height: 48px;
    }

    .nav__logo {
        width: 44px;
        height: 44px;
    }

    .nav__name {
        font-size: 1rem;
    }

    .nav__name small {
        font-size: 0.6rem;
    }

    .nav__toggle {
        width: 44px;
        height: 44px;
    }

    .nav__link {
        font-size: clamp(1.7rem, 7vw, 2.2rem);
    }

    /* Bottoni: più compatti, affiancati quando c'è spazio */
    .btn {
        min-height: 46px;
        padding: 0.7rem 1.15rem;
        white-space: nowrap;
        font-size: 0.78rem;
        letter-spacing: 0.05em;
    }

    .btn svg {
        width: 16px;
        height: 16px;
    }

    .btn-group {
        gap: 0.6rem;
    }

    .btn-group .btn {
        flex: 1 1 140px;
        min-width: fit-content; /* se il testo non entra il pulsante va a capo, non viene tagliato */
    }

    /* Hero */
    #hero {
        padding: calc(var(--nav-height) + 1rem) 0 calc(var(--sponsor-overlap) + 4rem);
    }

    .hero__inner {
        gap: 1.25rem;
    }

    .hero__visual {
        width: min(52vw, 210px);
    }

    .hero__kicker {
        margin-bottom: 0.9rem;
        padding: 0.35rem 0.85rem;
        font-size: 0.68rem;
    }

    .hero__subtitle {
        margin-top: 0.9rem;
    }

    .hero__actions {
        margin-top: 1.4rem;
    }

    .hero__scroll {
        bottom: calc(var(--sponsor-overlap) + 0.6rem);
        font-size: 0.6rem;
    }

    .hero__scroll-mouse {
        width: 20px;
        height: 32px;
    }

    .hero__shape--1 { width: 150px; height: 10px; }
    .hero__shape--2 { width: 80px; height: 10px; }

    /* Chi siamo */
    .about__visual {
        width: min(72vw, 270px);
    }

    .about__stripe {
        transform: rotate(-18deg) scale(0.7);
        transform-origin: left center;
    }

    .about__badge {
        right: 50%;
        bottom: -0.5rem;
        transform: translateX(50%);
        padding: 0.4rem 0.7rem;
        font-size: 0.66rem;
        animation: none;
        white-space: nowrap;
    }

    .about__badge img {
        width: 46px;
    }

    .about__content h2 {
        margin-bottom: 0.9rem;
    }

    .stats {
        gap: 0.5rem;
        margin-top: 1.5rem;
    }

    .stat {
        padding: 0.85rem 0.9rem 0.75rem;
        border-radius: var(--radius-sm);
    }

    .stat__value {
        font-size: 1.6rem;
    }

    .stat__label {
        font-size: 0.66rem;
    }

    /* Gare */
    .race__grid {
        gap: 2.25rem;
    }

    .race__photo {
        aspect-ratio: 4 / 3;
    }

    .race__logo-badge {
        bottom: -1.1rem;
        width: min(52%, 200px);
        padding: 0.4rem;
        border-radius: var(--radius-sm);
    }

    .race__logo-badge img {
        border-radius: 6px;
    }

    #vignaletto .race__logo-badge { right: 0.75rem; }
    #da-zero-a-dieci .race__logo-badge { left: 0.75rem; }

    .race__stripes {
        display: none;
    }

    .race__logo-card {
        width: min(100%, 360px);
    }

    .social-card {
        padding: 1.1rem 0.5rem 1rem;
    }

    .social-card__icon {
        width: 52px;
        height: 52px;
    }

    .social-card__icon svg {
        width: 24px;
        height: 24px;
    }

    .social-card__name {
        font-size: 1rem;
    }

    .race__poster {
        width: min(82%, 320px);
    }

    .race__edition {
        margin-top: 0.7rem;
        font-size: 0.64rem;
    }

    .race__content h2 {
        font-size: clamp(2rem, 1.4rem + 4vw, 2.6rem);
    }

    .race__tagline {
        font-size: 1.05rem;
    }

    .race__desc {
        margin-top: 0.9rem;
    }

    .race__info {
        gap: 0.5rem;
        margin: 1.25rem 0;
    }

    .info-card {
        padding: 0.75rem;
        border-radius: var(--radius-sm);
    }

    .info-card__icon {
        width: 30px;
        height: 30px;
        border-radius: 9px;
    }

    .info-card__icon svg {
        width: 16px;
        height: 16px;
    }

    .info-card__label {
        font-size: 0.62rem;
    }

    .info-card__value {
        font-size: 0.85rem;
    }

    #da-zero-a-dieci::before {
        font-size: 11rem;
    }

    /* Galleria */
    .preview-grid,
    .masonry {
        gap: 0.5rem;
    }

    .gallery-item {
        border-radius: var(--radius-sm);
    }

    .gallery-item__caption {
        left: 0.6rem;
        bottom: 0.5rem;
        font-size: 0.62rem;
    }

    .gallery-item__zoom {
        display: none;
    }

    .media.is-missing::after {
        font-size: 0.6rem;
        padding: 0.5rem;
    }

    .preview-cta {
        margin-top: 1.5rem;
    }

    .gallery-hero {
        padding: calc(var(--nav-height) + 2rem) 0 2.25rem;
    }

    .gallery-hero .breadcrumb {
        margin-bottom: 1rem;
    }

    .gallery-filters {
        padding-block: 0.75rem;
    }

    .filter-btn {
        min-height: 40px;
        padding: 0.45rem 0.9rem;
        font-size: 0.66rem;
    }

    .gallery-grid {
        padding-block: 1rem var(--space-xl);
    }

    .lightbox {
        padding: 3.5rem 0.75rem 5rem;
    }

    .lightbox__btn {
        width: 46px;
        height: 46px;
    }

    .lightbox__close {
        top: 0.75rem;
        right: 0.75rem;
    }

    /* Contatti */
    .contact-cards {
        gap: 0.5rem;
        margin-top: 1.25rem;
    }

    .contact-card {
        gap: 0.8rem;
        padding: 0.75rem 0.85rem;
        border-radius: var(--radius-sm);
    }

    .contact-card__icon {
        width: 40px;
        height: 40px;
        border-radius: 11px;
    }

    .contact-card__icon svg {
        width: 19px;
        height: 19px;
    }

    .contact-card__value {
        font-size: 0.9rem;
    }

    .social-link {
        min-height: 36px;
        font-size: 0.82rem;
    }

    .socials {
        flex-wrap: nowrap;
    }

    .map {
        min-height: 260px;
        border-width: 4px;
    }

    .map__placeholder {
        padding: 1.25rem;
        gap: 0.5rem;
        font-size: 0.85rem;
    }

    .map__placeholder svg {
        width: 40px;
        height: 40px;
    }

    /* Form */
    .form-card {
        padding: 1.15rem;
        border-radius: var(--radius-md);
    }

    .form-grid {
        gap: 0.7rem;
    }

    .form-field label {
        font-size: 0.85rem;
    }

    .form-field input,
    .form-field textarea {
        min-height: 46px;
        padding: 0.7rem 0.85rem;
    }

    .form-field textarea {
        min-height: 120px;
    }

    .form-error:empty {
        min-height: 0;
    }

    .form-check {
        font-size: 0.82rem;
    }

    /* Footer */
    .footer__nav ul {
        gap: 0.1rem 1.1rem;
    }

    :root {
        --float-size: 50px;
    }

    .back-to-top {
        width: 44px;
        height: 44px;
        right: calc(1rem + (var(--float-size) - 44px) / 2);
    }

    .float-btn svg {
        width: 25px;
        height: 25px;
    }

    /* spazio in fondo alla pagina perché i pulsanti fissi non coprano il credit */
    .footer__credit {
        padding-bottom: calc(var(--float-size) + 1.75rem);
    }
}

/* Smartphone con schermo basso: nascondo l'indicatore di scroll nella hero */
@media (max-width: 767px) and (max-height: 700px) {
    .hero__scroll {
        display: none;
    }

    #hero {
        padding-bottom: calc(var(--sponsor-overlap) + 1.5rem);
    }
}

/* Smartphone molto piccoli (≤ 374px) */
@media (max-width: 374px) {
    .nav__name small {
        display: none;
    }

    .nav__logo {
        width: 44px;
        height: 44px;
    }

    .btn {
        padding-inline: 0.9rem;
    }

    .nav__name {
        font-size: 0.92rem;
    }

    .info-card__value {
        font-size: 0.8rem;
    }

    :root {
        --sponsor-logo-h: 32px;
    }
}

/* ≥ 375px */
@media (min-width: 375px) {
    .nav__name {
        font-size: 1.1rem;
    }
}

/* ≥ 480px */
@media (min-width: 480px) {
    .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-field--full {
        grid-column: 1 / -1;
    }

    .form-actions {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .form-actions .btn {
        width: auto;
    }
}

/* ≥ 768px – Tablet */
@media (min-width: 768px) {
    :root {
        --nav-height: 80px;
    }

    :root {
        --sponsor-overlap: 2.75rem;
        --sponsor-logo-h: 64px;
    }

    .sponsors__bar {
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 2rem;
        padding: 1.4rem 2.25rem;
        border-radius: var(--radius-xl);
    }

    .sponsors__title {
        max-width: 19ch;
        padding-right: 2rem;
        border-right: 2px solid var(--color-secondary);
        text-align: left;
        line-height: 1.5;
    }

    .sponsors__list li {
        padding-inline: 1.5rem;
    }

    .hero__visual {
        width: min(40vw, 300px);
    }

    .hero__shape--1 { bottom: 22%; }
    .hero__shape--2 { bottom: 18%; }

    .stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .race__info {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .race__info--6 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .race__photo {
        aspect-ratio: 4 / 3;
    }

    .preview-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }

    .masonry {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }

    .contact-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-card--wide {
        grid-column: 1 / -1;
    }

    .social-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
    }

    .footer__top {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }

    .footer__bottom {
        flex-direction: row;
        justify-content: space-between;
    }

    .lightbox__prev,
    .lightbox__next {
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
    }

    .lightbox__prev { left: 1.5rem; }
    .lightbox__next { right: 1.5rem; }

    .lightbox__prev:hover,
    .lightbox__next:hover {
        transform: translateY(-50%) scale(1.08);
    }

    .float-btn {
        bottom: 1.5rem;
    }

    .float-btn--whatsapp {
        left: 1.5rem;
    }

    .float-btn--instagram {
        right: 1.5rem;
    }

    .back-to-top {
        right: calc(1.5rem + (var(--float-size) - 48px) / 2);
        bottom: calc(1.5rem + var(--float-size) + 0.75rem);
    }
}

/* ≥ 1024px – Desktop: navbar orizzontale e layout a due colonne */
@media (min-width: 1024px) {
    .nav__toggle {
        display: none;
    }

    .nav__menu {
        position: static;
        flex-direction: row;
        align-items: center;
        gap: 1.25rem;
        padding: 0;
        background: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }

    .nav__menu .nav__list li {
        opacity: 1;
        transform: none;
    }

    .nav__list {
        flex-direction: row;
        gap: 0.25rem;
        padding: 0.3rem;
        border-radius: var(--radius-pill);
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.15);
        transition: background-color var(--t-med), border-color var(--t-med);
    }

    .is-scrolled .nav__list {
        background: rgba(38, 0, 77, 0.05);
        border-color: rgba(38, 0, 77, 0.08);
    }

    .nav__link {
        padding: 0.55rem 1.05rem;
        border-radius: var(--radius-pill);
        font-family: var(--font-body);
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #fff;
    }

    .nav__link:hover {
        transform: none;
        color: #fff;
        background: rgba(255, 255, 255, 0.15);
    }

    .nav__link.is-active,
    .nav__link[aria-current="page"] {
        background: var(--color-secondary);
        color: var(--color-primary);
    }

    .is-scrolled .nav__link {
        color: var(--color-primary);
    }

    .is-scrolled .nav__link:hover {
        background: rgba(38, 0, 77, 0.08);
        color: var(--color-primary);
    }

    .is-scrolled .nav__link.is-active,
    .is-scrolled .nav__link[aria-current="page"] {
        background: var(--color-primary);
        color: #fff;
    }

    .nav__extra {
        display: none;
    }

    .nav__cta {
        margin-top: 0;
        min-height: 46px;
        padding: 0.6rem 1.3rem;
    }

    .hero__inner {
        grid-template-columns: 1.25fr 1fr;
    }

    .hero__visual {
        order: 0;
        width: min(36vw, 480px);
    }

    .about {
        grid-template-columns: 1fr 1.15fr;
        gap: var(--space-xl);
    }

    .race__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }

    .race__photo {
        aspect-ratio: 4 / 5;
    }

    /* Layout alternato: testo a sinistra, immagine a destra */
    .race--reverse .race__media {
        order: 2;
    }

    .race__info {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }

    .map {
        min-height: 100%;
    }

    .masonry {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }


    /* 3 colonne: la prima foto occupa 2x2, le altre 5 riempiono la griglia 3x3 */
    .preview-grid .gallery-item:nth-child(1) {
        grid-column: span 2;
        grid-row: span 2;
        aspect-ratio: auto;
    }
}

/* 1024–1279px: colonna contatti stretta, card su una colonna */
@media (min-width: 1024px) and (max-width: 1279px) {
    .contact-cards {
        grid-template-columns: 1fr;
    }
}

/* ≥ 1280px */
@media (min-width: 1280px) {
    :root {
        --sponsor-logo-h: 74px;
    }

    .nav__list {
        gap: 0.4rem;
    }

    .race__info {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .race__info--6 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ≥ 1440px – schermi grandi */
@media (min-width: 1440px) {
    :root {
        --container: 1320px;
    }

    .hero__visual {
        width: 520px;
    }
}

/* Hero su schermi bassi in orizzontale (smartphone landscape) */
@media (max-height: 540px) and (orientation: landscape) {
    #hero {
        min-height: auto;
        padding-bottom: 5rem;
    }

    /* niente spazio per il logo grande: script.js lo aggancia subito all'header */
    .hero__visual {
        display: none;
    }
}