/* MomentaSport – pagine pubbliche. Colori del logo. */
:root {
    --notte: #13233f;
    --blu: #2457d6;
    --blu-scuro: #1a42a8;
    --giallo: #ffb020;
    --gesso: #f3f4f1;
    --carta: #ffffff;
    --grigio: #5f6673;
    --bordo: #dcdfd8;
    --testo: 'Barlow', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --titoli: 'Barlow Semi Condensed', 'Arial Narrow', 'Segoe UI', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; min-height: 100vh; display: flex; flex-direction: column;
    font-family: var(--testo); font-size: 1.0625rem; line-height: 1.55;
    color: var(--notte); background: var(--gesso);
}
main { flex: 1; width: 100%; max-width: 860px; margin: 0 auto; padding: 0 1.25rem 4rem; }
a { color: var(--blu); }
a:hover { color: var(--blu-scuro); }
:focus-visible { outline: 3px solid var(--giallo); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.testata {
    background: #fff;
    background-image: repeating-linear-gradient(90deg, var(--giallo) 0 28px, transparent 28px 48px);
    background-size: 100% 3px; background-repeat: no-repeat; background-position: bottom;
    padding: 1.1rem 1.25rem 1.25rem;
}
.logo { display: block; max-width: 860px; margin: 0 auto; line-height: 0; }
.logo img { height: 52px; width: auto; }

.apertura { padding: 3.5rem 0 2.5rem; max-width: 36rem; }
.apertura h1 {
    font-family: var(--titoli); font-weight: 700; font-size: clamp(2.1rem, 5vw, 3.1rem);
    line-height: 1.05; letter-spacing: -.01em; margin: 0 0 1rem;
}
.apertura p { margin: 0; color: var(--grigio); font-size: 1.15rem; }

.eventi h2 {
    font-family: var(--titoli); font-weight: 700; font-size: 1.3rem;
    margin: 0 0 1rem; padding-bottom: .5rem; border-bottom: 2px solid var(--notte);
}
.nessuno { color: var(--grigio); padding: 1.5rem 0; }

.elenco { list-style: none; margin: 0; padding: 0; }
.elenco li + li { border-top: 1px solid var(--bordo); }
.evento {
    display: grid; grid-template-columns: 5rem 64px 1fr auto; gap: 1rem; align-items: center;
    padding: 1.1rem .5rem; color: inherit; text-decoration: none; border-radius: 6px;
}
.evento:hover { background: #fff; color: inherit; }
.evento:hover .titolo { color: var(--blu); }
.data { display: flex; flex-direction: column; line-height: 1.1; }
.giorno { font-family: var(--titoli); font-weight: 700; font-size: 2rem; font-variant-numeric: tabular-nums; }
.mese { font-size: .85rem; color: var(--grigio); text-transform: lowercase; }
.dettagli { display: flex; flex-direction: column; min-width: 0; }
.titolo { font-weight: 600; font-size: 1.15rem; }
.sotto { color: var(--grigio); font-size: .95rem; }
.conteggio {
    font-size: .9rem; font-weight: 600; color: var(--notte); white-space: nowrap;
    padding: .2rem .6rem; border: 1px solid var(--bordo); border-radius: 999px; background: #fff;
}
@media (max-width: 560px) {
    .evento { grid-template-columns: 3.6rem 52px 1fr; gap: .75rem; }
    .conteggio { grid-column: 3; justify-self: start; }
    .giorno { font-size: 1.7rem; }
}

.piede { border-top: 1px solid var(--bordo); padding: 1.5rem 1.25rem; text-align: center; color: var(--grigio); font-size: .95rem; }
.piede p { margin: 0; }

/* --- Pagina caricamento volontari ----------------------------------- */
.carica { max-width: 640px; }
.intestazione-evento, .messaggio { padding: 2.25rem 0 1.5rem; }
.organizza { margin: 0 0 .25rem; font-weight: 600; color: var(--blu); font-size: .95rem; }
.intestazione-evento h1, .messaggio h1 {
    font-family: var(--titoli); font-weight: 700; font-size: clamp(1.8rem, 6vw, 2.4rem);
    line-height: 1.1; margin: 0 0 .4rem;
}
.quando { margin: 0; color: var(--grigio); }
.messaggio p:last-child { color: var(--grigio); }

.pannello-carica { background: #fff; border: 1px solid var(--bordo); border-radius: 8px; padding: 1.25rem; }
.etichetta { display: block; font-weight: 600; margin-bottom: .35rem; }
.etichetta span { font-weight: 400; color: var(--grigio); }
.pannello-carica input[type="text"] {
    width: 100%; font: inherit; padding: .7rem .8rem; margin-bottom: 1.1rem;
    border: 1px solid #bfc3bb; border-radius: 6px; color: inherit;
}
.pannello-carica input[type="text"]:focus { border-color: var(--blu); outline: 2px solid #cdd9f7; }

.scegli {
    position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 1.6rem 1rem; border-radius: 8px; cursor: pointer;
    background: var(--blu); color: #fff;
}
.scegli:hover { background: var(--blu-scuro); }
.scegli:focus-within { outline: 3px solid var(--giallo); outline-offset: 2px; }
.scegli input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.scegli-titolo { font-family: var(--titoli); font-weight: 700; font-size: 1.45rem; }
.scegli-sotto { font-size: .92rem; opacity: .9; }
.nota { font-size: .9rem; color: var(--grigio); margin: .9rem 0 0; }

.stato-carica { margin-top: 1.5rem; }
.riepilogo { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; margin-bottom: .5rem; }
.riepilogo strong { font-family: var(--titoli); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.riepilogo span { color: var(--grigio); font-size: .95rem; }
.barra-totale { height: 6px; background: var(--bordo); border-radius: 3px; overflow: hidden; margin-bottom: 1rem; }
.barra-totale div { height: 100%; width: 0; background: var(--giallo); transition: width .3s; }
.bottone-testo { background: none; border: 0; padding: 0; margin-bottom: 1rem; font: 600 1rem var(--testo); color: var(--blu); text-decoration: underline; cursor: pointer; }

.elenco-file { list-style: none; margin: 0; padding: 0; }
.file { display: flex; gap: .8rem; align-items: center; padding: .55rem 0; border-top: 1px solid var(--bordo); }
.anteprima {
    flex: 0 0 52px; height: 52px; border-radius: 4px; overflow: hidden; background: #e4e6e1;
    display: grid; place-items: center;
}
.anteprima img { width: 100%; height: 100%; object-fit: cover; }
.info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.info .nome { font-size: .92rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dettaglio { font-size: .85rem; color: var(--grigio); }
.progresso { height: 3px; background: transparent; margin-top: .3rem; border-radius: 2px; overflow: hidden; }
.progresso span { display: block; height: 100%; width: 0; background: var(--blu); }
.in-invio .progresso { background: var(--bordo); }
.fatto .progresso, .in-attesa .progresso { display: none; }
.fatto .dettaglio { color: #2c7a4d; }
.errore .dettaglio { color: #b3312a; }
.errore .anteprima::after { content: '!'; font-weight: 700; color: #b3312a; }
@media (prefers-reduced-motion: reduce) { .barra-totale div { transition: none; } }

/* --- Elementi comuni -------------------------------------------------- */
.bottone {
    display: inline-flex; align-items: center; justify-content: center;
    font: 600 1rem var(--testo); color: #fff; background: var(--blu);
    border: 0; border-radius: 6px; padding: .7rem 1.2rem; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.bottone:hover { background: var(--blu-scuro); color: #fff; }
.avviso { padding: .75rem 1rem; border-radius: 6px; margin: 0 0 1rem; border-left: 4px solid; background: #fff; }
.avviso-ok { border-color: #2c7a4d; }
.avviso-errore { border-color: #b3312a; color: #b3312a; }
.avviso-info { border-color: var(--giallo); }

/* --- Galleria ------------------------------------------------------- */
.galleria { max-width: 1120px; }
.descrizione { margin-top: 1rem; max-width: 62ch; color: var(--notte); }

.accesso-galleria {
    background: #fff; border: 1px solid var(--bordo); border-radius: 8px;
    padding: 1.1rem 1.25rem; margin-bottom: 1.5rem; scroll-margin-top: 1rem;
}
.accesso-riga { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; justify-content: space-between; }
.accesso-riga p { margin: 0; }
.modulo-accesso label { display: block; font-weight: 600; margin-bottom: .5rem; }
.riga-campo { display: flex; gap: .5rem; }
.riga-campo input {
    flex: 1; min-width: 0; font: inherit; padding: .7rem .8rem; color: inherit;
    border: 1px solid #bfc3bb; border-radius: 6px;
}
.riga-campo input:focus { border-color: var(--blu); outline: 2px solid #cdd9f7; }
#codice { letter-spacing: .3em; font-variant-numeric: tabular-nums; max-width: 12rem; }
.consenso { display: flex !important; gap: .55rem; align-items: flex-start; font-weight: 400 !important; font-size: .92rem; color: var(--grigio); margin-top: .8rem; }
.consenso input { margin-top: .25rem; width: 1.05rem; height: 1.05rem; accent-color: var(--blu); flex: none; }
.accesso-galleria .nota { margin-top: .6rem; }
.accesso-galleria .bottone-testo { margin: .6rem 0 0; font-weight: 500; }
@media (max-width: 520px) { .riga-campo { flex-direction: column; } #codice { max-width: none; } }

.griglia-foto {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px;
}
@media (max-width: 520px) { .griglia-foto { grid-template-columns: repeat(3, 1fr); gap: 3px; } }
.miniatura {
    position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0;
    background: #e4e6e1; cursor: zoom-in; overflow: hidden; border-radius: 3px;
}
.miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.miniatura:hover img { transform: scale(1.03); }
.miniatura:focus-visible { outline: 3px solid var(--giallo); outline-offset: 2px; }
.miniatura.scaricata::after {
    content: '✓'; position: absolute; top: 6px; right: 6px; width: 24px; height: 24px;
    display: grid; place-items: center; border-radius: 50%;
    background: var(--giallo); color: var(--notte); font-weight: 700; font-size: .85rem;
}

.pagine { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; margin: 2rem 0 0; }
.pagine a, .pagine span {
    min-width: 2.4rem; padding: .45rem .6rem; text-align: center; border-radius: 6px;
    text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums;
}
.pagine a { background: #fff; border: 1px solid var(--bordo); color: var(--notte); }
.pagine span { background: var(--notte); color: #fff; }

.visore {
    width: min(1000px, 96vw); max-height: 96vh; padding: 0; border: 0; border-radius: 8px;
    background: var(--notte); color: #fff; overflow: hidden;
}
.visore::backdrop { background: rgba(10, 18, 34, .85); }
.visore-barra { display: flex; justify-content: space-between; align-items: center; padding: .6rem .9rem; font-size: .92rem; color: #c7cedb; }
.visore-barra button { background: none; border: 0; color: #fff; font-size: 1.3rem; cursor: pointer; padding: .2rem .5rem; }
.visore-foto { position: relative; display: grid; place-items: center; background: #0c1628; }
.visore-foto img { max-width: 100%; max-height: 70vh; display: block; }
.visore-freccia {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 64px; border: 0; border-radius: 6px; cursor: pointer;
    background: rgba(19, 35, 63, .55); color: #fff; font-size: 2rem; line-height: 1;
}
.visore-freccia:hover { background: rgba(19, 35, 63, .85); }
#visore-prec { left: 8px; }
#visore-succ { right: 8px; }
.visore-azioni { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: center; padding: 1rem; min-height: 4.2rem; }
.visore-azioni p { margin: 0; color: #c7cedb; }
.visore-azioni .nota { margin: 0; color: #c7cedb; }
@media (prefers-reduced-motion: reduce) { .miniatura img { transition: none; } }

/* --- Accesso con doppio codice -------------------------------------- */
.titolo-accesso { font-family: var(--titoli); font-weight: 700; font-size: 1.35rem; margin: 0 0 .25rem; }
.nota-accesso { margin: 0 0 1rem; color: var(--grigio); font-size: .95rem; max-width: 60ch; }
.campi-accesso { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: .9rem; }
.campi-accesso input {
    width: 100%; font: inherit; padding: .7rem .8rem; color: inherit;
    border: 1px solid #bfc3bb; border-radius: 6px;
}
.campi-accesso input:focus { border-color: var(--blu); outline: 2px solid #cdd9f7; }
#codice_evento { text-transform: uppercase; letter-spacing: .12em; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; }
.modulo-accesso .consenso { margin: .9rem 0 1rem; }
@media (max-width: 560px) { .campi-accesso { grid-template-columns: 1fr; } }

/* Icona dello sport */
.icona-sport { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; line-height: 1; }
.titolo .icona-sport { font-size: 1.15em; margin-right: .2rem; }

/* --- Icone sport grandi e bandiere ----------------------------------- */
.icona-sport-tessera, .icona-sport-grande {
    display: grid; place-items: center; flex: none;
    background: #fff; border: 1px solid var(--bordo); border-radius: 14px;
}
.icona-sport-tessera { width: 64px; height: 64px; font-size: 2.3rem; }
.evento:hover .icona-sport-tessera { border-color: var(--blu); }
.icona-sport-grande { width: 88px; height: 88px; font-size: 3.2rem; border-radius: 18px; }
.titolo-evento-pubblico { display: flex; gap: 1.1rem; align-items: center; margin-bottom: .5rem; }
.titolo-evento-pubblico h1 { margin-bottom: 0 !important; }
.bandiera {
    display: inline-block; vertical-align: -3px; border-radius: 2px; object-fit: cover;
    box-shadow: 0 0 0 1px rgba(19, 35, 63, .15);
}
@media (max-width: 560px) {
    .icona-sport-tessera { width: 52px; height: 52px; font-size: 1.9rem; border-radius: 12px; }
    .icona-sport-grande { width: 68px; height: 68px; font-size: 2.5rem; border-radius: 15px; }
}

/* ===================================================================== */
/* Pagina iniziale                                                       */
/* ===================================================================== */
.pagina-home .testata { background-image: none; border-bottom: 1px solid var(--bordo); }

.vetrina {
    position: relative; overflow: hidden; color: #fff;
    background:
        radial-gradient(120% 140% at 85% 10%, rgba(36, 87, 214, .55) 0, transparent 55%),
        linear-gradient(160deg, #182c52 0%, var(--notte) 60%);
    padding: 3.75rem 1.25rem 4.25rem;
}
.vetrina::after {   /* la mezzeria gialla */
    content: ''; position: absolute; left: 0; right: 0; bottom: 1.4rem; height: 4px;
    background: repeating-linear-gradient(90deg, var(--giallo) 0 46px, transparent 46px 78px);
    opacity: .9;
}
.vetrina-interna { max-width: 1120px; margin: 0 auto; }
.vetrina-occhiello {
    display: inline-block; margin: 0 0 1rem; padding: .3rem .75rem; border-radius: 999px;
    background: rgba(255, 176, 32, .16); color: var(--giallo); font-weight: 600; font-size: .9rem; letter-spacing: .02em;
}
.vetrina h1 {
    font-family: var(--titoli); font-weight: 800; font-size: clamp(2.2rem, 5.5vw, 3.8rem);
    line-height: 1.02; letter-spacing: -.015em; margin: 0 0 1.1rem; max-width: 18ch;
}
.vetrina-testo { margin: 0; max-width: 52ch; font-size: 1.15rem; color: #c9d3e6; }
.vetrina-numeri { display: flex; gap: 2rem; margin: 1.75rem 0 0; color: #c9d3e6; }
.vetrina-numeri strong { display: block; font-family: var(--titoli); font-size: 2rem; font-weight: 700; color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; }

.home { max-width: 1120px; padding-top: 2.5rem; }
.home-intestazione { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.home-intestazione h2 { font-family: var(--titoli); font-weight: 700; font-size: 1.6rem; margin: 0; }
.filtri-sport { display: flex; flex-wrap: wrap; gap: .4rem; }
.filtri-sport button {
    font: 500 .92rem var(--testo); color: var(--notte); cursor: pointer;
    background: #fff; border: 1px solid var(--bordo); border-radius: 999px; padding: .4rem .85rem;
}
.filtri-sport button:hover { border-color: var(--blu); }
.filtri-sport button[aria-pressed="true"] { background: var(--notte); border-color: var(--notte); color: #fff; }

.carte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1.5rem; }
.carte > li[hidden] { display: none; }
.carta {
    display: flex; flex-direction: column; height: 100%; overflow: hidden;
    background: #fff; border-radius: 20px; color: var(--notte); text-decoration: none;
    box-shadow: 0 1px 2px rgba(19, 35, 63, .06), 0 8px 24px rgba(19, 35, 63, .07);
    transition: transform .2s, box-shadow .2s;
}
.carta:hover { color: var(--notte); transform: translateY(-4px); box-shadow: 0 2px 4px rgba(19, 35, 63, .06), 0 18px 40px rgba(19, 35, 63, .16); }
.carta:focus-visible { outline: 3px solid var(--giallo); outline-offset: 3px; }

.carta-copertina { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden; }
.carta-copertina img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.carta:hover .carta-copertina img { transform: scale(1.04); }
.carta-copertina::after {  /* leggera ombra in basso per leggere le etichette */
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(10, 18, 34, .35) 0, transparent 35%, transparent 70%, rgba(10, 18, 34, .35) 100%);
}
.carta-emoji {
    position: relative; z-index: 1; font-size: 5.2rem; line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .25)); transition: transform .3s;
}
.carta:hover .carta-emoji { transform: scale(1.08) rotate(-3deg); }

/* Colori di sfondo per gruppo di sport, quando non c'è una copertina */
.carta-copertina { background: linear-gradient(140deg, #2457d6, #13233f); }
.gruppo-ciclismo         { background: linear-gradient(140deg, #3b7bff 0%, #1a3c9e 55%, #13233f 100%); }
.gruppo-motori           { background: linear-gradient(140deg, #ff5a3c 0%, #b3212b 55%, #3b0f1c 100%); }
.gruppo-corsa-e-cammino  { background: linear-gradient(140deg, #ffb020 0%, #e5711f 55%, #8a3510 100%); }
.gruppo-sport-di-squadra { background: linear-gradient(140deg, #2fc76f 0%, #178a4c 55%, #0b3d26 100%); }
.gruppo-racchetta        { background: linear-gradient(140deg, #d6e84a 0%, #8fb21f 55%, #3f5410 100%); }
.gruppo-acqua            { background: linear-gradient(140deg, #3ad0e8 0%, #1689b8 55%, #0b3f63 100%); }
.gruppo-neve-e-ghiaccio  { background: linear-gradient(140deg, #e4f3ff 0%, #8fc3ef 50%, #3b6fa8 100%); }
.gruppo-danza-e-discipline-artistiche { background: linear-gradient(140deg, #ff6fb5 0%, #c2307f 55%, #4a0f35 100%); }
.gruppo-altri-sport      { background: linear-gradient(140deg, #9a6cff 0%, #5a35c4 55%, #24135c 100%); }

.carta-data {
    position: absolute; z-index: 2; top: 14px; left: 14px;
    display: flex; flex-direction: column; align-items: center; min-width: 58px; padding: .35rem .55rem .4rem;
    background: #fff; color: var(--notte); border-radius: 12px; line-height: 1; box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}
.carta-data strong { font-family: var(--titoli); font-size: 1.7rem; font-weight: 800; }
.carta-data span { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--grigio); margin-top: .15rem; }
.carta-numero {
    position: absolute; z-index: 2; right: 14px; bottom: 14px;
    background: rgba(10, 18, 34, .72); color: #fff; font-weight: 600; font-size: .85rem;
    padding: .3rem .7rem; border-radius: 999px; backdrop-filter: blur(4px);
}

.carta-corpo { display: flex; flex-direction: column; gap: .3rem; flex: 1; padding: 1.1rem 1.25rem 1.15rem; }
.carta-sport { font-size: .82rem; font-weight: 600; color: var(--blu); text-transform: uppercase; letter-spacing: .04em; }
.carta-sport .icona-sport { font-size: 1rem; }
.carta-titolo { font-family: var(--titoli); font-weight: 700; font-size: 1.45rem; line-height: 1.15; margin: 0 0 .1rem; }
.carta-luogo { color: var(--grigio); font-size: .95rem; }
.carta-piede {
    display: flex; justify-content: space-between; align-items: center; gap: .75rem;
    margin-top: auto; padding-top: .9rem; font-size: .9rem;
}
.carta-org { color: var(--grigio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carta-vai { font-weight: 600; color: var(--blu); white-space: nowrap; }
.carta-vai span { display: inline-block; transition: transform .2s; }
.carta:hover .carta-vai span { transform: translateX(4px); }

@media (max-width: 560px) {
    .vetrina { padding: 2.5rem 1.25rem 3.25rem; }
    .carte { grid-template-columns: 1fr; gap: 1.1rem; }
    .home-intestazione { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
    .carta, .carta-copertina img, .carta-emoji, .carta-vai span { transition: none; }
    .carta:hover { transform: none; }
}

/* --- Ritocchi: logo più grande, fascia blu più bassa ------------------ */
.testata { padding: 1.1rem 1.25rem 1.2rem; }
.logo img { height: 78px; }
.vetrina { padding: 2rem 1.25rem 2.6rem; }
.vetrina::after { bottom: .9rem; height: 3px; }
.vetrina-occhiello { margin-bottom: .6rem; font-size: .82rem; padding: .22rem .65rem; }
.vetrina h1 { font-size: clamp(1.8rem, 4vw, 2.7rem); margin-bottom: .6rem; max-width: none; }
.vetrina-testo { font-size: 1.02rem; }
.home { padding-top: 2rem; }
@media (max-width: 560px) {
    .logo img { height: 58px; }
    .vetrina { padding: 1.6rem 1.25rem 2.2rem; }
}

/* --- Testata con pulsante Home ---------------------------------------- */
.testata-interna { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.testata .logo { margin: 0; max-width: none; }
.vai-home {
    display: inline-flex; align-items: center; gap: .45rem; flex: none;
    font-weight: 600; color: var(--notte); text-decoration: none;
    padding: .55rem 1rem; border: 1px solid var(--bordo); border-radius: 999px; background: #fff;
}
.vai-home:hover { border-color: var(--blu); color: var(--blu); }
.vai-home[aria-current="page"] { background: var(--notte); border-color: var(--notte); color: #fff; }

/* --- Richiesta di rimozione -------------------------------------------- */
.barra-rimozione { margin: -0.5rem 0 1rem; }
.barra-rimozione .bottone-testo { font-weight: 500; font-size: .95rem; margin: 0; }
.selezione-rimozione {
    position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
    background: #fff0f7; border: 1px solid #ffc2df; border-radius: 12px; padding: .7rem 1rem;
}
.selezione-rimozione[hidden] { display: none; }
.selezione-rimozione span { flex: 1; min-width: 12rem; }
.selezione-rimozione .bottone-testo { margin: 0; }
.modo-rimozione .miniatura { cursor: pointer; }
.modo-rimozione .miniatura img { opacity: .75; }
.miniatura.da-rimuovere { outline: 4px solid #ff2e93; outline-offset: -4px; }
.miniatura.da-rimuovere img { opacity: 1; }
.miniatura.da-rimuovere::before {
    content: '✕'; position: absolute; z-index: 2; top: 6px; left: 6px; width: 26px; height: 26px;
    display: grid; place-items: center; border-radius: 50%; background: #ff2e93; color: #fff; font-weight: 700; font-size: .85rem;
}
.visore-rimozione { flex-basis: 100%; text-align: center; color: #c7cedb !important; font-weight: 500 !important; font-size: .88rem; margin: 0 !important; }

.dialogo-rimozione {
    width: min(520px, 94vw); border: 0; border-radius: 16px; padding: 1.5rem; color: var(--notte);
    box-shadow: 0 20px 60px rgba(10, 18, 34, .35);
}
.dialogo-rimozione::backdrop { background: rgba(10, 18, 34, .6); }
.dialogo-rimozione h2 { font-family: var(--titoli); font-weight: 700; font-size: 1.5rem; margin: 0 0 .5rem; }
.dialogo-rimozione p { margin: 0 0 1rem; color: var(--grigio); }
.dialogo-rimozione fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.dialogo-rimozione legend { font-weight: 600; margin-bottom: .4rem; padding: 0; }
.motivo { display: flex; gap: .55rem; align-items: flex-start; padding: .35rem 0; cursor: pointer; }
.motivo input { margin-top: .3rem; accent-color: #ff2e93; }
.etichetta-nota { display: block; font-weight: 600; margin-bottom: .35rem; }
.etichetta-nota span { font-weight: 400; color: var(--grigio); }
.dialogo-rimozione textarea { width: 100%; font: inherit; padding: .6rem .7rem; border: 1px solid #bfc3bb; border-radius: 8px; resize: vertical; }
.dialogo-azioni { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; margin-top: 1.1rem; }
.dialogo-azioni .bottone-testo { margin: 0; }

/* --- Testo della vetrina ------------------------------------------------ */
.vetrina-testo .gratis {
    color: var(--notte); background: var(--giallo); padding: .02em .35em; border-radius: 4px;
    text-transform: uppercase; letter-spacing: .03em; font-weight: 700; white-space: nowrap;
}

/* --- Home: eventi + calendario ------------------------------------------ */
.home-griglia { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2rem; align-items: start; }
.home-eventi .carte { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.filtro-giorno {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1rem;
    background: #fff; border: 1px solid var(--bordo); border-radius: 12px; padding: .6rem 1rem;
}
.filtro-giorno[hidden] { display: none; }
.filtro-giorno .bottone-testo { margin: 0; }

.calendario {
    position: sticky; top: 1rem;
    background: #fff; border-radius: 20px; padding: 1.1rem 1rem 1rem;
    box-shadow: 0 1px 2px rgba(19, 35, 63, .06), 0 8px 24px rgba(19, 35, 63, .07);
}
.calendario-testa { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.calendario-testa h2 { font-family: var(--titoli); font-weight: 700; font-size: 1.25rem; margin: 0; }
.calendario-testa button {
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--bordo); background: #fff;
    font-size: 1.3rem; line-height: 1; color: var(--notte); cursor: pointer;
}
.calendario-testa button:hover { border-color: var(--blu); color: var(--blu); }
.calendario-giorni-settimana, .calendario-griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendario-giorni-settimana span { text-align: center; font-size: .75rem; font-weight: 600; color: var(--grigio); padding-bottom: .3rem; }
.giorno {
    position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-radius: 10px; font: 500 .9rem var(--testo); color: var(--notte); border: 0; background: none; padding: 0;
}
.giorno .numero { font-variant-numeric: tabular-nums; line-height: 1; }
.giorno.oggi { box-shadow: inset 0 0 0 2px var(--giallo); }
.giorno.con-evento {
    cursor: pointer; background: #e7eeff; color: var(--blu); font-weight: 700;
}
.giorno.con-evento .icone { font-size: .8rem; line-height: 1; margin-top: 2px; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.giorno.con-evento:hover { background: var(--blu); color: #fff; }
.giorno.con-evento.scelto { background: var(--notte); color: #fff; }
.calendario-nota { margin: .8rem 0 0; font-size: .82rem; color: var(--grigio); text-align: center; }

@media (max-width: 900px) {
    .home-griglia { grid-template-columns: 1fr; }
    .calendario { position: static; order: -1; max-width: 420px; width: 100%; }
}

/* ===================================================================== */
/* Stesso stile della home per galleria e pagina volontari               */
/* ===================================================================== */
html, body { overflow-x: clip; }
.testata { background-image: none; border-bottom: 1px solid var(--bordo); }

/* Fascia blu a tutta larghezza con il titolo dell'evento */
.intestazione-evento, .messaggio {
    position: relative; color: #fff; background: var(--notte);
    box-shadow: 0 0 0 100vmax var(--notte); clip-path: inset(0 -100vmax);
    padding: 2.2rem 0 2.8rem; margin-bottom: 2rem;
}
.intestazione-evento::after, .messaggio::after {
    content: ''; position: absolute; left: -100vmax; right: -100vmax; bottom: .9rem; height: 3px;
    background: repeating-linear-gradient(90deg, var(--giallo) 0 46px, transparent 46px 78px);
}
.intestazione-evento h1, .messaggio h1 { color: #fff; }
.intestazione-evento .organizza, .messaggio .organizza { color: var(--giallo); }
.intestazione-evento .quando { color: #c9d3e6; margin-top: .6rem; }
.intestazione-evento .descrizione { color: #dfe5f1; }
.messaggio p:last-child { color: #c9d3e6; }
.messaggio a { color: var(--giallo); }
.intestazione-evento .icona-sport-grande { border-color: transparent; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.intestazione-evento .bandiera { box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }

/* Pannelli come le carte della home */
.accesso-galleria, .pannello-carica, .filtro-giorno {
    border: 0; border-radius: 20px;
    box-shadow: 0 1px 2px rgba(19, 35, 63, .06), 0 8px 24px rgba(19, 35, 63, .07);
}
.accesso-galleria { padding: 1.5rem 1.6rem; }
.pannello-carica { padding: 1.5rem; }
.scegli { border-radius: 14px; }
.griglia-foto .miniatura { border-radius: 10px; }
@media (max-width: 520px) { .griglia-foto .miniatura { border-radius: 4px; } }

/* --- Accesso in 3 passi -------------------------------------------------- */
.passi-accesso { list-style: none; margin: 1rem 0 1.1rem; padding: 0; display: grid; gap: .9rem; }
.passo { display: grid; grid-template-columns: 2.4rem 1fr; gap: .9rem; align-items: start; }
.passo-numero {
    width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center;
    font-family: var(--titoli); font-weight: 800; font-size: 1.15rem; background: var(--blu); color: #fff;
}
.passo label, .etichetta-passo { display: block; font-weight: 700; font-size: 1.02rem; margin: .35rem 0 .1rem; color: var(--notte); }
.aiuto-passo { margin: 0 0 .5rem; color: var(--grigio); font-size: .93rem; }
.passo input {
    width: 100%; max-width: 26rem; font: inherit; padding: .7rem .8rem; color: inherit;
    border: 1px solid #bfc3bb; border-radius: 10px;
}
.passo input:focus { border-color: var(--blu); outline: 2px solid #cdd9f7; }
.passo .riga-campo input { max-width: 14rem; }
.passo.fatto .passo-numero { background: #2c7a4d; }
.passo.fatto .etichetta-passo { margin-top: .5rem; }
.passo.futuro { opacity: .55; }
.passo.futuro .passo-numero { background: #c9ced6; color: var(--notte); }
.modulo-accesso > .bottone { margin-top: .2rem; }

.opzione-veloce { display: flex; gap: .6rem; align-items: flex-start; margin-top: 1rem; font-size: .93rem; cursor: pointer; }
.opzione-veloce input { margin-top: .25rem; width: 1.1rem; height: 1.1rem; accent-color: var(--blu); flex: none; }

/* --- Avviso "schermo acceso" ------------------------------------------- */
.avviso-schermo {
    display: flex; gap: .9rem; align-items: center; margin: 0 0 1rem; padding: 1rem 1.1rem;
    background: var(--giallo); color: var(--notte); border-radius: 14px;
}
.avviso-schermo svg { flex: none; }
.avviso-schermo p { margin: 0; font-family: var(--titoli); font-size: 1.35rem; line-height: 1.2; }

.banner-caricamento {
    position: sticky; top: 0; z-index: 20; display: flex; gap: .9rem; align-items: center;
    margin: 1.5rem 0 1rem; padding: 1.1rem 1.2rem; border-radius: 16px; color: var(--notte);
    box-shadow: 0 8px 24px rgba(19, 35, 63, .18);
}
.banner-caricamento[hidden] { display: none; }
.banner-caricamento svg { flex: none; }
.banner-caricamento p { margin: 0; }
.banner-titolo { font-family: var(--titoli); font-weight: 800; font-size: 1.5rem; line-height: 1.15; }
.banner-sotto { font-size: 1rem; font-weight: 600; margin-top: .2rem !important; }
.banner-caricamento.in-corso { background: var(--giallo); }
.banner-caricamento.in-corso svg { animation: pulsa 1.6s ease-in-out infinite; }
.banner-caricamento.finito { background: #2c7a4d; color: #fff; }
.banner-caricamento.con-errori { background: #b3312a; color: #fff; }
@keyframes pulsa { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .banner-caricamento.in-corso svg { animation: none; } }
@media (max-width: 520px) {
    .avviso-schermo p { font-size: 1.15rem; }
    .banner-titolo { font-size: 1.25rem; }
}

/* --- Registrazione -------------------------------------------------------- */
.registrazione { max-width: 680px; }
.pannello-registrazione {
    background: #fff; border-radius: 20px; padding: 1.6rem 1.7rem 1.4rem;
    box-shadow: 0 1px 2px rgba(19, 35, 63, .06), 0 8px 24px rgba(19, 35, 63, .07);
}
.pannello-registrazione h2 { font-family: var(--titoli); font-weight: 700; font-size: 1.3rem; margin: 1.6rem 0 .2rem; }
.pannello-registrazione h2:first-of-type { margin-top: 0; }
.pannello-registrazione label:not(.consenso) { display: block; font-weight: 600; margin: 1rem 0 .35rem; }
.pannello-registrazione input:not([type="checkbox"]), .pannello-registrazione select {
    width: 100%; font: inherit; padding: .7rem .8rem; color: inherit; background: #fff;
    border: 1px solid #bfc3bb; border-radius: 10px;
}
.pannello-registrazione input:focus, .pannello-registrazione select:focus { border-color: var(--blu); outline: 2px solid #cdd9f7; }
.pannello-registrazione [aria-invalid="true"] { border-color: #b3312a; }
.pannello-registrazione .consenso { margin: 1.3rem 0 .2rem; }
.pannello-registrazione .bottone { margin-top: 1.2rem; font-size: 1.05rem; padding: .8rem 1.4rem; }
.errore-campo { color: #b3312a; font-size: .9rem; margin: .3rem 0 0; }
.due-colonne-pubblico { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .due-colonne-pubblico { grid-template-columns: 1fr; } }
.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Collegamenti dell'evento ------------------------------------------- */
.collegamenti-evento { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; }
.collegamenti-evento a {
    display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; font-weight: 600; font-size: .92rem;
    color: #fff; padding: .4rem .85rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35);
}
.collegamenti-evento a:hover { background: #fff; color: var(--notte); }

/* --- Pagine legali ------------------------------------------------------- */
.pagina-legale { max-width: 780px; }
.testo-legale {
    background: #fff; border-radius: 20px; padding: 1.6rem 1.9rem; line-height: 1.65;
    box-shadow: 0 1px 2px rgba(19, 35, 63, .06), 0 8px 24px rgba(19, 35, 63, .07);
}
.testo-legale h2 { font-family: var(--titoli); font-weight: 700; font-size: 1.35rem; margin: 1.6rem 0 .5rem; }
.testo-legale h2:first-child { margin-top: 0; }
.testo-legale ul { padding-left: 1.2rem; }
.testo-legale li { margin-bottom: .3rem; }
.consenso a { color: var(--blu); }

/* --- Selettore della lingua ------------------------------------------------ */
.testata-destra { display: flex; align-items: center; gap: .75rem; }
.lingue { display: inline-flex; border: 1px solid var(--bordo); border-radius: 999px; overflow: hidden; background: #fff; }
.lingue a { padding: .45rem .7rem; font-weight: 700; font-size: .85rem; text-decoration: none; color: var(--grigio); letter-spacing: .03em; }
.lingue a:hover { color: var(--blu); }
.lingue a[aria-current="true"] { background: var(--notte); color: #fff; }
@media (max-width: 520px) { .vai-home { padding: .5rem .75rem; } .testata-destra { gap: .5rem; } }

.scadenza-volontari {
    margin: 0 0 1rem; padding: .8rem 1rem; border-radius: 12px; background: var(--giallo); color: var(--notte);
    font-size: 1.1rem; font-weight: 600;
}

/* Icone disegnate apposta (es. ciclocross): grandi come le emoji */
.simbolo-sport { width: 1.15em; height: 1.15em; vertical-align: -0.2em; display: inline-block; }
.carta-emoji .simbolo-sport, .icona-sport-tessera .simbolo-sport, .icona-sport-grande .simbolo-sport { width: 1em; height: 1em; vertical-align: 0; }

/* --- Barra dei filtri della home ------------------------------------------- */
.barra-filtri { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.4rem; }
.campo-cerca {
    flex: 1 1 280px; display: flex; align-items: center; gap: .5rem; padding: 0 .9rem;
    background: #fff; border: 1px solid var(--bordo); border-radius: 999px; color: var(--grigio);
}
.campo-cerca:focus-within { border-color: var(--blu); box-shadow: 0 0 0 3px #cdd9f7; }
.campo-cerca input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 1.05rem; padding: .75rem 0; background: none; color: var(--notte); }
.campo-filtro select {
    height: 100%; min-height: 48px; font: inherit; color: var(--notte); cursor: pointer;
    padding: .6rem 2rem .6rem .9rem; border: 1px solid var(--bordo); border-radius: 999px; background-color: #fff;
}
.campo-filtro select:focus { border-color: var(--blu); outline: 3px solid #cdd9f7; }
.periodo { display: inline-flex; border: 1px solid var(--bordo); border-radius: 999px; overflow: hidden; background: #fff; }
.periodo button { font: 600 .95rem var(--testo); color: var(--grigio); background: none; border: 0; padding: .6rem 1rem; cursor: pointer; min-height: 48px; }
.periodo button[aria-pressed="true"] { background: var(--notte); color: #fff; }
.nessun-risultato { text-align: center; padding: 2.5rem 1rem; background: #fff; border-radius: 20px; margin-bottom: 1rem; }
.nessun-risultato[hidden] { display: none; }
.nessun-risultato p { font-size: 1.15rem; font-weight: 600; margin: 0 0 1rem; }
@media (max-width: 560px) {
    .barra-filtri { flex-direction: column; }
    .campo-cerca, .campo-filtro, .campo-filtro select, .periodo { width: 100%; }
    .campo-cerca { flex: none; min-height: 48px; }   /* in colonna i 280px diventavano l'altezza */
    .periodo button { flex: 1; }
}

/* --- Promozione e pagina "Per gli organizzatori" ----------------------------- */
.piede .promo { margin-bottom: .6rem; font-weight: 600; }
.piede .promo a { color: var(--blu); }
.vetrina-link { margin: 1rem 0 0; }
.vetrina-link a { color: var(--giallo); font-weight: 600; text-decoration: none; border-bottom: 2px solid rgba(255, 176, 32, .4); }
.vetrina-link a:hover { border-bottom-color: var(--giallo); }
.vetrina-organizzatori { padding: 3rem 1.25rem 3.6rem; }
.vetrina-organizzatori h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); max-width: 16ch; }
.vetrina-azioni { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; margin-top: 1.6rem; }
.bottone-grande { font-size: 1.1rem; padding: .9rem 1.6rem; border-radius: 999px; }
.vetrina .bottone-grande { background: var(--giallo); color: var(--notte); }
.vetrina .bottone-grande:hover { background: #ffc24d; color: var(--notte); }
.bottone-chiaro { color: #fff; font-weight: 600; text-decoration: none; }
.bottone-chiaro:hover { color: var(--giallo); }
.organizzatori section { margin-bottom: 3rem; }
.titolo-sezione { font-family: var(--titoli); font-weight: 700; font-size: 1.8rem; margin: 0 0 1.2rem; }
.vantaggi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.1rem; }
.vantaggi li, .tre-passi li {
    background: #fff; border-radius: 20px; padding: 1.4rem 1.4rem 1.2rem;
    box-shadow: 0 1px 2px rgba(19, 35, 63, .06), 0 8px 24px rgba(19, 35, 63, .07);
}
.vantaggio-icona { font-size: 2.4rem; line-height: 1; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.vantaggi h3, .tre-passi h3 { font-family: var(--titoli); font-weight: 700; font-size: 1.3rem; margin: .7rem 0 .35rem; }
.vantaggi p, .tre-passi p { margin: 0; color: var(--grigio); }
.tre-passi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.numero-passo { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--blu); color: #fff; font-family: var(--titoli); font-weight: 800; font-size: 1.4rem; }
@media (max-width: 800px) { .tre-passi { grid-template-columns: 1fr; } }
.faq details { background: #fff; border-radius: 14px; margin-bottom: .6rem; padding: 0 1.2rem; box-shadow: 0 1px 2px rgba(19, 35, 63, .06); }
.faq summary { cursor: pointer; font-weight: 700; padding: 1rem 0; font-size: 1.05rem; }
.faq details p { margin: 0 0 1rem; color: var(--grigio); }
.invito-finale { text-align: center; background: var(--notte); color: #fff; border-radius: 24px; padding: 2.5rem 1.5rem; }
.invito-finale h2 { font-family: var(--titoli); font-weight: 800; font-size: 2rem; margin: 0 0 .5rem; }
.invito-finale p { color: #c9d3e6; margin: 0 0 1.4rem; }
.invito-finale .bottone-grande { background: var(--giallo); color: var(--notte); }
.invito-finale .nota { margin: 1.2rem 0 0; }
.invito-finale .nota a { color: var(--giallo); }

/* --- Assistenza -------------------------------------------------------------- */
.aiuto-veloce { background: #fff7e6; border: 1px solid #ffd98a; border-radius: 16px; padding: 1rem 1.3rem; margin-bottom: 1.25rem; }
.aiuto-veloce h2 { font-family: var(--titoli); font-weight: 700; font-size: 1.2rem; margin: 0 0 .5rem; }
.aiuto-veloce ul { margin: 0; padding-left: 1.2rem; }
.aiuto-veloce li { margin-bottom: .4rem; }
.pannello-registrazione textarea { width: 100%; font: inherit; padding: .7rem .8rem; color: inherit; border: 1px solid #bfc3bb; border-radius: 10px; resize: vertical; }
.facoltativo { font-weight: 400; color: var(--grigio); }
.messaggio-inviato { text-align: center; }
.grande-ok { font-family: var(--titoli); font-weight: 800; font-size: 1.8rem; color: #2c7a4d; margin: 0 0 .5rem; }

/* --- Foto che arrivano mentre la pagina è aperta ------------------------------ */
.foto-nuove {
    position: sticky; top: .5rem; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin: 0 0 1rem; padding: .8rem 1rem; border-radius: 14px; background: var(--giallo); color: var(--notte);
    font-weight: 700; font-size: 1.05rem; box-shadow: 0 6px 18px rgba(19, 35, 63, .18);
}
.foto-nuove[hidden] { display: none; }
.foto-nuove .bottone { background: var(--notte); }
.lampeggia { animation: lampeggia 1.2s ease-out; }
@keyframes lampeggia { 0% { background: var(--giallo); color: var(--notte); } 100% { } }
@media (prefers-reduced-motion: reduce) { .lampeggia { animation: none; } }

/* --- Miniature in caricamento / non arrivate -------------------------------- */
img.mini-attesa { background: linear-gradient(100deg, #e4e6e1 30%, #f1f2ef 50%, #e4e6e1 70%) 0 0 / 300% 100%; animation: mini-onda 1.4s linear infinite; }
img.mini-errore { background: #f3e1df; cursor: pointer; }
@keyframes mini-onda { to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { img.mini-attesa { animation: none; } }

/* --- Comandi del volontario durante e dopo il caricamento --------------------- */
.azioni-volontario { background: #fff; border-radius: 16px; padding: 1rem 1.1rem; margin: 0 0 1rem; box-shadow: 0 1px 2px rgba(19, 35, 63, .06), 0 8px 24px rgba(19, 35, 63, .07); }
.azioni-volontario[hidden] { display: none; }
.bottone-grande-volontario { width: 100%; font-size: 1.2rem; padding: 1rem; border-radius: 14px; }
.bottone-grande-volontario.in-evidenza { background: #2c7a4d; font-size: 1.35rem; }
.chi-carica { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; margin: .8rem 0 0; color: var(--grigio); }
.chi-carica .bottone-testo, .azioni-volontario > .bottone-testo { margin: 0; }
.totale-volontario { margin: .5rem 0 .3rem; font-weight: 700; color: #2c7a4d; }
.azioni-volontario > .bottone-testo { display: block; margin-top: .4rem; font-weight: 500; font-size: .92rem; }

/* --- Foto nuove contrassegnate ------------------------------------------------ */
.griglia-foto > li { position: relative; }
.griglia-foto > li.nuova .miniatura { outline: 3px solid var(--giallo); outline-offset: -3px; }
.griglia-foto > li.nuova::after {
    content: var(--etichetta-nuova, 'NUOVA'); position: absolute; z-index: 3; left: 6px; bottom: 6px; pointer-events: none;
    background: var(--giallo); color: var(--notte); font-weight: 800; font-size: .72rem; letter-spacing: .05em;
    padding: .15rem .45rem; border-radius: 4px;
}
.solo-nuove {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
    margin: 0 0 1rem; padding: .8rem 1rem; border-radius: 14px; background: #fff7e6; border: 1px solid #ffd98a; font-weight: 700;
}
.solo-nuove .bottone-testo { margin: 0; }

.anteprima-ok { color: #2c7a4d; font-weight: 800; font-size: 1.3rem; }

/* --- Schermo acceso: clessidra e video invisibile ------------------------------ */
#video-acceso { position: fixed; left: 0; bottom: 0; width: 2px; height: 2px; opacity: .01; pointer-events: none; }
.clessidra { font-size: 2.2rem; line-height: 1; margin-left: auto; display: none; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.banner-caricamento.in-corso .clessidra { display: inline-block; animation: clessidra 2s ease-in-out infinite; }
@keyframes clessidra { 0%, 40% { transform: rotate(0); } 50%, 90% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
.stato-schermo { margin: .45rem 0 0 !important; font-weight: 700; font-size: .95rem; padding: .25rem .55rem; border-radius: 6px; display: inline-block; }
.stato-schermo[hidden] { display: none; }
.stato-schermo.ok { background: rgba(255, 255, 255, .55); }
.stato-schermo.attenzione { background: #b3312a; color: #fff; }
@media (prefers-reduced-motion: reduce) { .banner-caricamento.in-corso .clessidra { animation: none; } }

.file.doppia .dettaglio { color: #8a5a00; }
.file.doppia .anteprima { outline: 2px solid var(--giallo); }

/* --- Attesa dopo la scelta delle foto -------------------------------------- */
.attesa-scelta { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
    padding: 16px; background: rgba(19, 35, 63, .72); }
.attesa-scelta[hidden] { display: none; }
.attesa-box { background: var(--carta); border-radius: 14px; padding: 28px 22px; max-width: 360px; width: 100%; text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.attesa-titolo { font-family: var(--titoli); font-size: 1.5rem; font-weight: 700; margin: 14px 0 6px; }
.attesa-sotto { color: var(--grigio); margin: 0 0 6px; }
.attesa-box .bottone { margin-top: 14px; }
.rotella { display: inline-block; width: 56px; height: 56px; border-radius: 50%;
    border: 6px solid var(--bordo); border-top-color: var(--blu); animation: rotella .9s linear infinite; }
@keyframes rotella { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rotella { animation-duration: 2.5s; } }

/* --- Pulsante "Area organizzatori" in alto --------------------------------- */
.vai-organizzatori {
    display: inline-flex; align-items: center; gap: .45rem; flex: none;
    font-weight: 700; color: #fff; text-decoration: none;
    padding: .55rem 1rem; border: 1px solid var(--blu); border-radius: 999px; background: var(--blu);
}
.vai-organizzatori:hover { background: var(--blu-scuro); border-color: var(--blu-scuro); color: #fff; }
@media (max-width: 640px) {
    .testata-interna { flex-wrap: wrap; row-gap: .75rem; }
    .testata-destra { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
    .vai-organizzatori { padding: .5rem .85rem; }
    .testata-destra .vai-home { font-size: 0; gap: 0; padding: .55rem .7rem; }   /* solo l'icona: il logo porta già alla home */
}

.versione { font-size: .8rem; color: #8a9099; letter-spacing: .02em; }

/* --- Riquadro da inserire nel sito dell'associazione (incorpora.php) -------- */
body.incorporata { background: transparent; padding: 4px; margin: 0; min-height: 0; display: block; }
html:has(body.incorporata) { min-height: 0; height: auto; }
.incorporata .carte { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.incorporata-uno .carte { grid-template-columns: minmax(0, 460px); }
.incorporata-vuoto { text-align: center; padding: 2rem 1rem; background: #fff; border-radius: 16px; font-weight: 600; margin: 0; }
.incorporata-firma { margin: .8rem 0 0; text-align: right; font-size: .85rem; }
.incorporata-firma a { display: inline-flex; align-items: center; gap: .4rem; color: var(--grigio); text-decoration: none; }
.incorporata-firma img { height: 22px; width: auto; }

/* --- Social di MomentaSport a fondo pagina ------------------------------------ */
.piede .social { display: flex; justify-content: center; gap: .7rem; margin: 0 0 1rem; }
.piede .social a { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--notte); color: #fff; transition: background .2s; }
.piede .social a:hover { background: var(--blu); }

/* --- Immagini predefinite delle copertine (una scena per gruppo di sport) --- */
.carta-copertina.gruppo-ciclismo { background-image: url(/assets/copertine/ciclismo.svg); background-size: cover; background-position: center; }
.carta-copertina.gruppo-motori { background-image: url(/assets/copertine/motori.svg); background-size: cover; background-position: center; }
.carta-copertina.gruppo-corsa-e-cammino { background-image: url(/assets/copertine/corsa-e-cammino.svg); background-size: cover; background-position: center; }
.carta-copertina.gruppo-sport-di-squadra { background-image: url(/assets/copertine/sport-di-squadra.svg); background-size: cover; background-position: center; }
.carta-copertina.gruppo-racchetta { background-image: url(/assets/copertine/racchetta.svg); background-size: cover; background-position: center; }
.carta-copertina.gruppo-acqua { background-image: url(/assets/copertine/acqua.svg); background-size: cover; background-position: center; }
.carta-copertina.gruppo-neve-e-ghiaccio { background-image: url(/assets/copertine/neve-e-ghiaccio.svg); background-size: cover; background-position: center; }
.carta-copertina.gruppo-danza-e-discipline-artistiche { background-image: url(/assets/copertine/danza-e-discipline-artistiche.svg); background-size: cover; background-position: center; }
.carta-copertina.gruppo-altri-sport { background-image: url(/assets/copertine/altri-sport.svg); background-size: cover; background-position: center; }
.carta-copertina.con-foto { background: #13233f; }
.carta-copertina:not(.con-foto) .carta-emoji {
    font-size: 3rem; width: 5.6rem; height: 5.6rem; display: grid; place-items: center;
    background: rgba(255, 255, 255, .88); border-radius: 50%;
    box-shadow: 0 10px 30px rgba(10, 18, 34, .28); filter: none;
}
.copertina-galleria { display: block; width: min(100%, 360px); height: auto; border-radius: 16px; margin: 0 0 1.2rem; box-shadow: 0 8px 24px rgba(19, 35, 63, .15); }
.home-griglia.senza-calendario { grid-template-columns: 1fr; }

/* --- Copertina caricata (formato Instagram): intera, con lo sfondo sfocato ai lati --- */
.carta-copertina.con-foto img.sfondo { object-fit: cover; filter: blur(18px) brightness(.75) saturate(1.2); transform: scale(1.2); }
.carta-copertina.con-foto img.principale { object-fit: contain; }
.carta:hover .carta-copertina.con-foto img.sfondo { transform: scale(1.25); }
.carta:hover .carta-copertina.con-foto img.principale { transform: scale(1.03); }
.carta-copertina.con-foto::after { background: linear-gradient(180deg, rgba(10, 18, 34, .25) 0, transparent 30%, transparent 75%, rgba(10, 18, 34, .25) 100%); }

/* --- Ricerca per numero di pettorale ----------------------------------------- */
.cerca-numero { margin: 0 0 1rem; padding: .9rem 1rem; background: #fff; border: 1px solid var(--bordo); border-radius: 14px; }
.cerca-numero label { display: block; font-weight: 700; margin-bottom: .45rem; }
.cerca-numero-riga { display: flex; gap: .5rem; }
.cerca-numero-riga input { flex: 1; min-width: 0; max-width: 220px; font: inherit; font-size: 1.2rem; font-weight: 700; letter-spacing: .05em; padding: .55rem .8rem; border: 1px solid var(--bordo); border-radius: 10px; }
.griglia-foto > li.separatore-simili { grid-column: 1 / -1; padding: 1rem .2rem .4rem; border-top: 2px dashed var(--bordo); margin-top: .6rem; display: flex; flex-direction: column; gap: .15rem; }
.griglia-foto > li.separatore-simili span { color: var(--grigio); font-size: .92rem; }

/* =====================================================================
   Pagina "Per gli organizzatori" – più viva
   Il momento memorabile è la scena animata nella vetrina:
   scatto → logo → galleria → ricerca col pettorale. Il resto è fermo e pulito.
   ===================================================================== */
.pagina-organizzatori .vetrina-organizzatori { padding: 3rem 1.25rem 4rem; }
.pagina-organizzatori .vetrina-organizzatori::before {   /* corsie della pista, appena accennate */
    content: ''; position: absolute; left: -10%; right: -10%; bottom: -40%; height: 90%;
    background: repeating-linear-gradient(90deg, transparent 0 118px, rgba(255, 255, 255, .07) 118px 121px);
    transform: perspective(500px) rotateX(62deg); transform-origin: bottom; pointer-events: none;
}
.vetrina-due { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 2.5rem; align-items: center; }
.pagina-organizzatori .vetrina h1 {
    font-style: italic; font-weight: 800; letter-spacing: -.01em;
    font-size: clamp(2.3rem, 5.4vw, 3.9rem); line-height: .98; max-width: 14ch;
}
@media (max-width: 960px) {
    .vetrina-due { grid-template-columns: 1fr; }
    .scena-contenitore { justify-self: center; }
}

/* --- La scena ----------------------------------------------------------------- */
.scena-contenitore { width: 470px; }
.scena { position: relative; width: 470px; height: 330px; }
.telefono {
    position: absolute; left: 6px; top: 12px; width: 156px; height: 304px; border-radius: 30px;
    background: #0b1730; box-shadow: 0 0 0 2px #2c3f66, 0 24px 50px rgba(0, 0, 0, .45); transform: rotate(-4deg);
}
.schermo { position: absolute; inset: 9px; border-radius: 22px; overflow: hidden; background: #000; }
.foto-scena {
    position: absolute; inset: 0; background: url(/assets/copertine/corsa-e-cammino.svg) center / cover;
    display: grid; place-items: center;
}
.foto-scena .atleta { font-size: 3.6rem; line-height: 1; transform: translateY(18%); font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.pettorale-mini {
    position: absolute; left: 50%; top: 61%; transform: translateX(-30%);
    background: #fff; color: var(--notte); font: italic 800 .78rem/1 var(--titoli); padding: .12rem .28rem; border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.lampo { position: absolute; inset: 0; background: #fff; opacity: 0; animation: ms-lampo 10s infinite; }

.galleria-mini {
    position: absolute; left: 196px; top: 26px; width: 262px; height: 272px; padding: 12px;
    background: #fff; border-radius: 18px; box-shadow: 0 24px 50px rgba(0, 0, 0, .35);
}
.cerca-mini {
    display: flex; align-items: center; gap: .4rem; height: 36px; padding: 0 .7rem; margin-bottom: 12px;
    border: 2px solid #dbe3f5; border-radius: 10px; color: var(--notte);
}
.cerca-mini .cifre { font: italic 800 1.25rem/1 var(--titoli); letter-spacing: .04em; }
.cerca-mini .cifre b { opacity: 0; animation: ms-cifra 10s infinite; }
.cerca-mini .cifre b:nth-child(2) { animation-name: ms-cifra2; }
.cerca-mini .cifre b:nth-child(3) { animation-name: ms-cifra3; }
.griglia-mini { display: grid; grid-template-columns: repeat(3, 72px); gap: 8px; }
.griglia-mini span { height: 72px; border-radius: 8px; background: #eef1f6 center / cover; animation: ms-attenua 10s infinite; }
.griglia-mini .posto { background: repeating-linear-gradient(45deg, #f1f3f7 0 6px, #e7ebf2 6px 12px); animation: none; }

/* La foto che parte dal telefono, riceve il logo e atterra nella galleria (ultima casella) */
.foto-volante {
    position: absolute; left: 21px; top: 27px; width: 138px; height: 286px; border-radius: 22px; overflow: hidden;
    opacity: 0; animation: ms-vola 10s infinite;
}
.timbro-logo {
    position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    background: var(--giallo); color: var(--notte); font: 800 .62rem/1 var(--titoli); box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
    transform: scale(0); animation: ms-timbro 10s infinite;
}
.scena-didascalie { list-style: none; display: flex; justify-content: space-between; gap: .6rem; margin: .9rem 0 0; padding: 0; }
.scena-didascalie li {
    flex: 1; padding-top: .55rem; border-top: 3px solid rgba(255, 255, 255, .18); color: #9fb0cf; font-size: .88rem; font-weight: 600;
    animation: ms-didascalia1 10s infinite;
}
.scena-didascalie li:nth-child(2) { animation-name: ms-didascalia2; }
.scena-didascalie li:nth-child(3) { animation-name: ms-didascalia3; }

@keyframes ms-lampo { 0%, 3% { opacity: 0; } 5% { opacity: .95; } 10%, 100% { opacity: 0; } }
@keyframes ms-vola {
    0%, 9%   { opacity: 0; left: 21px; top: 27px; width: 138px; height: 286px; border-radius: 22px; box-shadow: none; }
    10%, 28% { opacity: 1; left: 21px; top: 27px; width: 138px; height: 286px; border-radius: 22px; box-shadow: none; }
    46%      { opacity: 1; left: 368px; top: 164px; width: 72px; height: 72px; border-radius: 8px; box-shadow: none; }
    64%      { box-shadow: 0 0 0 0 rgba(255, 176, 32, 0); }
    68%, 90% { opacity: 1; left: 368px; top: 164px; width: 72px; height: 72px; border-radius: 8px; box-shadow: 0 0 0 4px var(--giallo), 0 8px 18px rgba(0, 0, 0, .3); }
    96%, 100% { opacity: 0; left: 368px; top: 164px; width: 72px; height: 72px; border-radius: 8px; }
}
@keyframes ms-timbro { 0%, 13% { transform: scale(0); } 18% { transform: scale(1.25); } 21%, 40% { transform: scale(1); } 46%, 100% { transform: scale(.55); } }
@keyframes ms-cifra  { 0%, 51% { opacity: 0; } 52%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes ms-cifra2 { 0%, 55% { opacity: 0; } 56%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes ms-cifra3 { 0%, 59% { opacity: 0; } 60%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes ms-attenua { 0%, 63% { opacity: 1; } 68%, 90% { opacity: .35; } 96%, 100% { opacity: 1; } }
@keyframes ms-didascalia1 { 0%, 12% { color: #fff; border-color: var(--giallo); } 14%, 100% { color: #9fb0cf; border-color: rgba(255, 255, 255, .18); } }
@keyframes ms-didascalia2 { 0%, 12% { color: #9fb0cf; border-color: rgba(255, 255, 255, .18); } 14%, 46% { color: #fff; border-color: var(--giallo); } 48%, 100% { color: #9fb0cf; border-color: rgba(255, 255, 255, .18); } }
@keyframes ms-didascalia3 { 0%, 46% { color: #9fb0cf; border-color: rgba(255, 255, 255, .18); } 48%, 94% { color: #fff; border-color: var(--giallo); } 97%, 100% { color: #9fb0cf; border-color: rgba(255, 255, 255, .18); } }

/* Telefoni: la scena si rimpicciolisce senza cambiare le misure interne */
@media (max-width: 520px) {
    .scena-contenitore { width: 320px; }
    .scena { transform: scale(.68); transform-origin: top left; margin-bottom: calc(330px * -.32); }
    .scena-didascalie li { font-size: .78rem; }
}
/* Chi ha chiesto meno movimento vede la scena ferma, già al traguardo */
@media (prefers-reduced-motion: reduce) {
    .lampo, .foto-volante, .timbro-logo, .cerca-mini .cifre b, .griglia-mini span, .scena-didascalie li { animation: none; }
    .foto-volante { opacity: 1; left: 368px; top: 164px; width: 72px; height: 72px; border-radius: 8px; box-shadow: 0 0 0 4px var(--giallo); }
    .timbro-logo { transform: scale(.55); }
    .cerca-mini .cifre b { opacity: 1; }
    .scena-didascalie li:nth-child(3) { color: #fff; border-color: var(--giallo); }
}

/* --- I vantaggi stampati su pettorali di gara -------------------------------- */
.vantaggi-pettorali { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.4rem; }
.vantaggi-pettorali li {
    position: relative; border-radius: 10px; padding: 1.9rem 1.3rem 1.3rem; border: 2px solid #e2e7f1;
    box-shadow: 0 2px 0 #e2e7f1, 0 10px 24px rgba(19, 35, 63, .06);
    background:
        radial-gradient(circle at 14px 14px, var(--gesso) 0 5px, #c9d1e0 5px 6px, transparent 6.5px),
        radial-gradient(circle at calc(100% - 14px) 14px, var(--gesso) 0 5px, #c9d1e0 5px 6px, transparent 6.5px),
        radial-gradient(circle at 14px calc(100% - 14px), var(--gesso) 0 5px, #c9d1e0 5px 6px, transparent 6.5px),
        radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), var(--gesso) 0 5px, #c9d1e0 5px 6px, transparent 6.5px),
        linear-gradient(var(--blu), var(--blu)) top / 100% 7px no-repeat,
        #fff;
    transform: rotate(-.8deg); transition: transform .2s ease, box-shadow .2s ease;
}
.vantaggi-pettorali li:nth-child(even) { transform: rotate(.9deg); }
.vantaggi-pettorali li:hover { transform: rotate(0) translateY(-3px); box-shadow: 0 2px 0 #e2e7f1, 0 16px 30px rgba(19, 35, 63, .12); }
.vantaggi-pettorali .vantaggio-icona { font-size: 2.8rem; }
.vantaggi-pettorali h3 { font-style: italic; font-weight: 800; font-size: 1.4rem; }

/* --- I 3 passi come corsie, con il traguardo a scacchi alla fine ---------------- */
.corsie { counter-reset: none; gap: 0; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 10px 24px rgba(19, 35, 63, .06); }
.corsie li { border-radius: 0; box-shadow: none; padding: 1.6rem 1.5rem 1.5rem; border-left: 3px dashed #dfe4ee; }
.corsie li:first-child { border-left: 0; }
.corsie li:last-child {
    padding-right: 3.2rem;
    background:
        conic-gradient(var(--notte) 25%, #fff 0 50%, var(--notte) 0 75%, #fff 0) right top / 24px 24px repeat-y,
        #fff;
    background-size: 12px 12px; background-position: right top;
    background-clip: padding-box;
}
.corsie .numero-passo {
    width: auto; height: auto; border-radius: 0; background: none; color: var(--blu);
    font-style: italic; font-size: 3.4rem; line-height: .9; justify-content: start;
}
@media (max-width: 800px) {
    .corsie li { border-left: 0; border-top: 3px dashed #dfe4ee; }
    .corsie li:first-child { border-top: 0; }
}

/* --- Invito finale: la linea del traguardo ------------------------------------ */
.traguardo { position: relative; overflow: hidden; padding-top: 3.4rem; }
.traguardo::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 24px;
    background: conic-gradient(#fff 25%, var(--notte) 0 50%, #fff 0 75%, var(--notte) 0) 0 0 / 24px 24px;
}
.traguardo h2 { font-style: italic; font-size: clamp(1.9rem, 4vw, 2.6rem); }

/* =====================================================================
   Carte degli eventi in formato reel (9:16): immagine verticale sopra,
   parte bianca con sport, nome e luogo sotto
   ===================================================================== */
.carta-copertina { aspect-ratio: 9 / 16; }
.carte, .home-eventi .carte { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 1.25rem; }
.carta-copertina:not(.con-foto) .carta-emoji { font-size: 2.6rem; width: 4.8rem; height: 4.8rem; }
.carta-corpo { padding: .9rem 1rem 1rem; }
.carta-titolo { font-size: 1.22rem; }
.carta-luogo { font-size: .9rem; }
.carta-piede { flex-wrap: wrap; gap: .2rem .6rem; }
.carta-copertina.gruppo-ciclismo { background-image: url(/assets/copertine/ciclismo-verticale.svg); }
.carta-copertina.gruppo-motori { background-image: url(/assets/copertine/motori-verticale.svg); }
.carta-copertina.gruppo-corsa-e-cammino { background-image: url(/assets/copertine/corsa-e-cammino-verticale.svg); }
.carta-copertina.gruppo-sport-di-squadra { background-image: url(/assets/copertine/sport-di-squadra-verticale.svg); }
.carta-copertina.gruppo-racchetta { background-image: url(/assets/copertine/racchetta-verticale.svg); }
.carta-copertina.gruppo-acqua { background-image: url(/assets/copertine/acqua-verticale.svg); }
.carta-copertina.gruppo-neve-e-ghiaccio { background-image: url(/assets/copertine/neve-e-ghiaccio-verticale.svg); }
.carta-copertina.gruppo-danza-e-discipline-artistiche { background-image: url(/assets/copertine/danza-e-discipline-artistiche-verticale.svg); }
.carta-copertina.gruppo-altri-sport { background-image: url(/assets/copertine/altri-sport-verticale.svg); }

/* Telefono: due carte per riga, come la griglia dei reel */
@media (max-width: 600px) {
    .carte, .home-eventi .carte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
    .carta { border-radius: 14px; }
    .carta-corpo { padding: .6rem .65rem .7rem; gap: .15rem; }
    .carta-titolo { font-size: 1rem; line-height: 1.15; }
    .carta-sport { font-size: .7rem; }
    .carta-luogo { font-size: .78rem; }
    .carta-org { display: none; }
    .carta-vai { font-size: .82rem; }
    .carta-data { transform: scale(.82); transform-origin: top left; }
    .carta-numero { font-size: .72rem; }
    .carta-copertina:not(.con-foto) .carta-emoji { font-size: 1.9rem; width: 3.5rem; height: 3.5rem; }
}
.incorporata .carte { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.incorporata-uno .carte { grid-template-columns: minmax(0, 300px); }

/* =====================================================================
   Storyboard della pagina organizzatori: 6 scene da 4 secondi (24 s in tutto)
   Ogni scena e la sua didascalia usano lo stesso orologio, sfasato di --i × 4 s
   ===================================================================== */
.vetrina-rassicura { margin: 1rem 0 0; color: #9fb0cf; font-size: .92rem; font-weight: 600; }
.sb { width: 470px; }
.sb-palco { position: relative; width: 470px; height: 340px; }
.sb-scena {
    position: absolute; inset: 0; display: grid; place-items: center; opacity: 0;
    animation: sb-scena 24s infinite both; animation-delay: calc(var(--i) * 4s);
}
.sb-scena *, .sb-didascalie li, .sb-tacche i { animation-delay: calc(var(--i, 0) * 4s); }
.sb-scena { --d: calc(var(--i) * 4s); }
.sb-scena * { animation-delay: var(--d); }
@keyframes sb-scena { 0% { opacity: 0; transform: translateY(10px); } 2%, 15% { opacity: 1; transform: none; } 16.6%, 100% { opacity: 0; } }

/* Pezzi comuni */
.sb-schermo { position: relative; width: 330px; height: 240px; background: #fff; border-radius: 18px; box-shadow: 0 24px 50px rgba(0, 0, 0, .35); padding: 18px; }
.sb-foto { position: relative; border-radius: 16px; overflow: hidden; background: url(/assets/copertine/ciclismo-verticale.svg) center / cover; box-shadow: 0 24px 50px rgba(0, 0, 0, .4); }
.sb-foto-grande { width: 190px; height: 300px; display: grid; place-items: center; }
.sb-atleta { font-size: 4.2rem; transform: translateY(30%); font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }

/* 1. Crei l'evento: copertina, campi che si riempiono, QR */
.sb-copertina { position: absolute; left: 18px; top: 18px; width: 116px; height: 204px; border-radius: 10px; background: url(/assets/copertine/corsa-e-cammino-verticale.svg) center / cover; transform: scale(0); animation: sb-appare 24s infinite both; }
.sb-righe { position: absolute; left: 150px; top: 26px; right: 18px; display: grid; gap: 14px; }
.sb-righe i { display: block; height: 14px; border-radius: 7px; background: #dbe3f5; position: relative; overflow: hidden; }
.sb-righe i::after { content: ''; position: absolute; inset: 0; background: var(--blu); transform: scaleX(0); transform-origin: left; animation: sb-riempi 24s infinite both; animation-delay: inherit; }
.sb-righe i:nth-child(2)::after { animation-name: sb-riempi2; }
.sb-righe i:nth-child(3)::after { animation-name: sb-riempi3; }
.sb-qr {
    position: absolute; right: 18px; bottom: 18px; width: 92px; height: 92px; border-radius: 6px; opacity: 0;
    background:
        conic-gradient(var(--notte) 25%, #fff 0 50%, var(--notte) 0 75%, #fff 0) 0 0 / 18px 18px,
        #fff;
    box-shadow: inset 0 0 0 6px #fff, 0 0 0 2px var(--notte);
    animation: sb-qr 24s infinite both;
}
@keyframes sb-appare { 0%, 2% { transform: scale(0); } 4%, 100% { transform: scale(1); } }
@keyframes sb-riempi  { 0%, 4% { transform: scaleX(0); } 6.5%, 100% { transform: scaleX(1); } }
@keyframes sb-riempi2 { 0%, 6% { transform: scaleX(0); } 8.5%, 100% { transform: scaleX(.7); } }
@keyframes sb-riempi3 { 0%, 8% { transform: scaleX(0); } 10.5%, 100% { transform: scaleX(.85); } }
@keyframes sb-qr { 0%, 10% { opacity: 0; transform: scale(.6) rotate(-8deg); } 12%, 100% { opacity: 1; transform: none; } }

/* 2. I volontari caricano dal telefono */
.sb-telefono {
    width: 170px; height: 300px; border-radius: 28px; background: #0b1730; padding: 34px 14px;
    box-shadow: 0 0 0 2px #2c3f66, 0 24px 50px rgba(0, 0, 0, .45); display: grid; align-content: start; gap: 12px;
}
.sb-carica { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 10px; background: #fff; }
.sb-carica span { font-size: 1.2rem; }
.sb-carica b { flex: 1; height: 8px; border-radius: 4px; background: #dbe3f5; position: relative; overflow: hidden; }
.sb-carica b i { position: absolute; inset: 0; background: #1f9d55; transform: scaleX(0); transform-origin: left; animation: sb-riempi 24s infinite both; animation-delay: var(--d); }
.sb-carica:nth-child(2) b i { animation-name: sb-riempi2b; }
.sb-carica:nth-child(3) b i { animation-name: sb-riempi3b; }
.sb-carica:nth-child(4) b i { animation-name: sb-riempi4b; }
@keyframes sb-riempi2b { 0%, 6% { transform: scaleX(0); } 9%, 100% { transform: scaleX(1); } }
@keyframes sb-riempi3b { 0%, 8% { transform: scaleX(0); } 11%, 100% { transform: scaleX(1); } }
@keyframes sb-riempi4b { 0%, 10% { transform: scaleX(0); } 13%, 100% { transform: scaleX(1); } }

/* 3. Il logo su ogni foto */
.sb-timbro {
    position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
    background: var(--giallo); color: var(--notte); font: 800 .8rem/1 var(--titoli); box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
    transform: scale(0); animation: sb-timbro 24s infinite both;
}
@keyframes sb-timbro { 0%, 4% { transform: scale(0); } 6% { transform: scale(1.3); } 7.5%, 100% { transform: scale(1); } }

/* 4. Gilet rosa: la foto resta nascosta */
.sb-privacy { background-image: url(/assets/copertine/corsa-e-cammino-verticale.svg); }
.sb-gilet { position: absolute; left: 50%; top: 56%; width: 56px; height: 46px; transform: translateX(-42%); border-radius: 10px 10px 6px 6px; background: #ff3ea5; opacity: .92; }
.sb-nascosta {
    position: absolute; inset: 0; display: grid; place-items: center; font-size: 3rem;
    background: rgba(19, 35, 63, .72); opacity: 0; animation: sb-nascondi 24s infinite both;
}
@keyframes sb-nascondi { 0%, 6% { opacity: 0; } 8.5%, 100% { opacity: 1; } }

/* 5. Il partecipante entra con due codici */
.sb-accesso { display: grid; align-content: center; gap: 16px; }
.sb-campo { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; border: 2px solid #dbe3f5; border-radius: 12px; }
.sb-campo small { font-size: 1.3rem; }
.sb-scrive {
    font: italic 800 1.6rem/1 var(--titoli); letter-spacing: .12em; color: var(--notte);
    display: inline-block; overflow: hidden; white-space: nowrap; width: 0; animation: sb-scrivi 24s infinite both;
}
.sb-scrive-2 { animation-name: sb-scrivi2; }
.sb-ok {
    position: absolute; right: -14px; top: -14px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
    background: #1f9d55; color: #fff; font-size: 1.6rem; font-weight: 800; transform: scale(0); animation: sb-timbro2 24s infinite both;
}
@keyframes sb-scrivi  { 0%, 2.5% { width: 0; } 6.5%, 100% { width: 7.4em; } }
@keyframes sb-scrivi2 { 0%, 7% { width: 0; } 10.5%, 100% { width: 7.4em; } }
@keyframes sb-timbro2 { 0%, 11% { transform: scale(0); } 12.5% { transform: scale(1.25); } 13.5%, 100% { transform: scale(1); } }

/* 6. Trova e scarica le sue foto */
.sb-cerca { height: 40px; display: flex; align-items: center; padding: 0 12px; border: 2px solid #dbe3f5; border-radius: 10px; font: italic 800 1.3rem/1 var(--titoli); color: var(--notte); margin-bottom: 14px; }
.sb-griglia { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.sb-griglia i { display: block; aspect-ratio: 9 / 16; border-radius: 6px; background: url(/assets/copertine/acqua-verticale.svg) center / cover; animation: sb-spegni 24s infinite both; animation-delay: var(--d); }
.sb-griglia i:nth-child(2) { background-image: url(/assets/copertine/motori-verticale.svg); }
.sb-griglia i:nth-child(3), .sb-griglia i:nth-child(5) { background-image: url(/assets/copertine/ciclismo-verticale.svg); }
.sb-griglia i:nth-child(4) { background-image: url(/assets/copertine/neve-e-ghiaccio-verticale.svg); }
.sb-griglia i:nth-child(6) { background-image: url(/assets/copertine/sport-di-squadra-verticale.svg); }
.sb-griglia .sb-mia { animation-name: sb-evidenzia; }
.sb-scarica {
    position: absolute; right: 18px; bottom: 16px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
    background: var(--giallo); color: var(--notte); font-size: 1.4rem; font-weight: 800; opacity: 0; animation: sb-scarica 24s infinite both;
}
@keyframes sb-spegni { 0%, 5% { opacity: 1; } 7%, 100% { opacity: .3; } }
@keyframes sb-evidenzia { 0%, 5% { box-shadow: none; } 7%, 100% { box-shadow: 0 0 0 3px var(--giallo); } }
@keyframes sb-scarica { 0%, 8% { opacity: 0; transform: translateY(-10px); } 10% { opacity: 1; transform: none; } 11.5% { transform: translateY(5px); } 13%, 100% { opacity: 1; transform: none; } }

/* Tacche di avanzamento e didascalie */
.sb-tacche { display: flex; gap: 6px; margin: 14px 0 10px; }
.sb-tacche i { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .18); animation: sb-tacca 24s infinite both; animation-delay: calc(var(--i) * 4s); }
@keyframes sb-tacca { 0% { background: rgba(255, 255, 255, .18); } .2%, 16.6% { background: var(--giallo); } 16.7%, 100% { background: rgba(255, 255, 255, .18); } }
.sb-didascalie { position: relative; list-style: none; margin: 0; padding: 0; min-height: 3.2em; }
.sb-didascalie li {
    position: absolute; inset: 0 0 auto 0; color: #fff; font-weight: 700; font-size: 1.05rem; line-height: 1.35; opacity: 0;
    animation: sb-scena 24s infinite both; animation-delay: calc(var(--i) * 4s);
}

@media (max-width: 960px) { .sb { justify-self: center; } }
@media (max-width: 520px) {
    .sb { width: 320px; }
    .sb-palco { transform: scale(.68); transform-origin: top left; margin-bottom: calc(340px * -.32); }
    .sb-didascalie li { font-size: .95rem; }
}
/* Meno movimento: si vede l'ultima scena, ferma, con tutte le didascalie in elenco */
@media (prefers-reduced-motion: reduce) {
    .sb-scena, .sb-scena *, .sb-didascalie li, .sb-tacche i { animation: none !important; }
    .sb-scena { opacity: 0; }
    .sb-scena[style*="--i:5"] { opacity: 1; }
    .sb-griglia i { opacity: .3; } .sb-griglia .sb-mia { opacity: 1; box-shadow: 0 0 0 3px var(--giallo); } .sb-scarica { opacity: 1; }
    .sb-tacche { display: none; }
    .sb-didascalie { min-height: 0; }
    .sb-didascalie li { position: static; opacity: 1; font-size: .92rem; font-weight: 600; margin-bottom: .3rem; }
}

/* Come funziona: 5 corsie */
.cinque-passi { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1000px) { .cinque-passi { grid-template-columns: 1fr; } .cinque-passi li { border-left: 0; border-top: 3px dashed #dfe4ee; } .cinque-passi li:first-child { border-top: 0; } }
/* Tutti i pezzi di una scena seguono l'orologio della loro scena (le regole "animation" sopra azzerano il ritardo) */
.sb-scena *, .sb-scena *::after { animation-delay: var(--d) !important; }

/* --- Modulo "Hai domande? Scrivici" nella pagina organizzatori ----------------- */
.sezione-info { scroll-margin-top: 1rem; }
.info-intro { margin: -.4rem 0 1.2rem; color: var(--grigio); max-width: 62ch; }
.modulo-info { background: #fff; border-radius: 18px; padding: 1.4rem 1.5rem 1.6rem; box-shadow: 0 10px 24px rgba(19, 35, 63, .06); }
.info-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.2rem; }
.modulo-info label:not(.consenso) { display: block; font-weight: 600; margin: .9rem 0 .35rem; }
.modulo-info input:not([type="checkbox"]), .modulo-info textarea {
    width: 100%; font: inherit; padding: .7rem .85rem; border: 1px solid var(--bordo); border-radius: 12px; background: #fff; color: var(--notte);
}
.modulo-info input:focus, .modulo-info textarea:focus { border-color: var(--blu); outline: 2px solid #cdd9f7; }
.modulo-info .bottone-grande { margin-top: 1.2rem; background: var(--giallo); color: var(--notte); }
.modulo-info .bottone-grande:hover { background: #ffc24d; }
.info-inviata { background: #fff; border-radius: 18px; padding: 1.6rem; text-align: center; }
.info-inviata .grande-ok { font-family: var(--titoli); font-size: 1.6rem; font-weight: 800; color: #1f9d55; margin: 0 0 .4rem; }
.vantaggi .limitata { display: block; margin-top: .45rem; color: var(--notte); font-size: .88rem; }
@media (max-width: 640px) { .info-griglia { grid-template-columns: 1fr; } }

/* --- Evento dimostrativo ------------------------------------------------ */
.bottone-demo {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .8rem 1.3rem; border: 2px solid rgba(255, 255, 255, .85); border-radius: 6px;
    color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.bottone-demo:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.bottone-demo span { color: var(--giallo); }
.invito-finale .nota-demo { margin: 1rem 0 0; font-weight: 600; }
.invito-finale .nota-demo a { color: var(--giallo); }
.banner-demo {
    position: relative; margin: 0 0 1.25rem; padding: 1.1rem 1.25rem 1.2rem;
    background: #fff8e6; border: 2px dashed var(--giallo); border-radius: 10px;
}
.banner-demo h2 { margin: 0 0 .35rem; font-size: 1.3rem; }
.banner-demo p { margin: 0 0 .6rem; }
.banner-demo-etichetta {
    display: inline-block; margin: 0 0 .5rem !important; padding: .1rem .55rem; border-radius: 4px;
    background: var(--giallo); color: var(--notte); font: 700 .8rem var(--testo); letter-spacing: .08em;
}
.banner-demo-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: .4rem; }
.banner-demo-azioni form { margin: 0; }
.banner-demo-crea { font-weight: 600; }
.bottone-secondario { background: #fff; color: var(--blu); box-shadow: inset 0 0 0 2px var(--blu); }
.bottone-secondario:hover { background: #eef3ff; color: var(--blu-scuro); }
.banner-demo .bottone { white-space: normal; text-align: center; }

/* --- Il volontario rivede ed elimina le sue foto ------------------------------ */
.gia-caricate { margin: 0 0 1rem; padding: .7rem .9rem; background: #eef3ff; border-radius: 10px; }
.gia-caricate .bottone-testo { margin: 0 0 0 .3rem; }
#apri-mie { width: 100%; margin: .6rem 0; white-space: normal; }
body.pannello-aperto { overflow: hidden; }
.pannello-mie { position: fixed; inset: 0; z-index: 200; background: rgba(19, 35, 63, .55); display: flex; align-items: flex-end; justify-content: center; }
.pannello-mie[hidden] { display: none; }
.pannello-mie-box {
    width: 100%; max-width: 760px; max-height: 92vh; display: flex; flex-direction: column;
    background: #fff; border-radius: 16px 16px 0 0; padding: 1rem 1rem 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .25);
}
@media (min-width: 700px) { .pannello-mie { align-items: center; } .pannello-mie-box { border-radius: 16px; } }
.pannello-mie-testa { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pannello-mie-testa h2 { margin: 0; font-size: 1.25rem; }
.pannello-mie-testa .bottone-testo { margin: 0; }
.mie-aiuto { margin: .5rem 0 .2rem; color: var(--grigio); font-size: .95rem; }
.mie-stato { margin: 0 0 .6rem; font-weight: 600; min-height: 1.4em; }
.griglia-mie { list-style: none; margin: 0; padding: 0 0 1rem; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem; }
.griglia-mie .mia {
    position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1;
    padding: 0; border: 3px solid transparent; border-radius: 10px; overflow: hidden; background: #eceee9; cursor: pointer;
    font: 600 .8rem var(--testo); color: var(--grigio); text-align: center;
}
.griglia-mie .mia img { width: 100%; height: 100%; object-fit: cover; display: block; }
.griglia-mie .mia small { position: absolute; left: 0; right: 0; bottom: 0; padding: .15rem .25rem; background: rgba(255, 47, 166, .9); color: #fff; font-size: .68rem; }
.griglia-mie .mia-errore { color: #c0392b; }
.griglia-mie .mia.scelta { border-color: #c0392b; }
.griglia-mie .mia.scelta::after {
    content: '✕'; position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center; background: #c0392b; color: #fff; font-size: 1rem; font-weight: 700;
}
.griglia-mie .mia.scelta img { opacity: .6; }
.pannello-mie-piede { position: sticky; bottom: 0; padding: .8rem 0 1rem; background: #fff; border-top: 1px solid #e3e5df; }
.bottone-pericolo { width: 100%; background: #c0392b; border-color: #c0392b; color: #fff; }
.bottone-pericolo:hover { background: #a93226; }
.bottone-pericolo:disabled { opacity: .45; cursor: not-allowed; }
.elenco-file li.eliminata { opacity: .5; text-decoration: line-through; }

/* --- Ricerca della home dietro la lente ------------------------------------ */
.home .home-intestazione { flex-direction: row; justify-content: flex-start; align-items: center; gap: .7rem; }
.lente {
    position: relative; display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0;
    border: 2px solid var(--blu); border-radius: 50%; background: #fff; color: var(--blu); cursor: pointer;
    transition: background .15s, color .15s;
}
.lente:hover, .lente[aria-expanded="true"] { background: var(--blu); color: #fff; }
.lente.attiva::after {
    content: ''; position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%;
    background: var(--giallo); border: 2px solid #fff;
}
.barra-filtri[hidden] { display: none; }

/* --- Codice personale via email ------------------------------------------- */
.azioni-codice { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: .6rem 0 0; }
.azioni-codice form { margin: 0; }
.modulo-accesso-codice .consenso { display: flex; gap: .5rem; align-items: flex-start; font-weight: 400; margin: .8rem 0 1rem; }
.modulo-accesso-codice .consenso input { margin-top: .25rem; flex: none; }