/* =========================================================================
   Aurora 76 Runners — Componenti (sito pubblico)
   Richiede tokens.css. Mobile-first: nessuna media query "desktop-down".
   ========================================================================= */

/* ============================== BOTTONI ================================= */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  font-family:var(--font-testo); font-size:var(--t-base); font-weight:600;
  line-height:1; text-decoration:none; cursor:pointer; white-space:nowrap;
  border:2px solid transparent; border-radius:var(--r-md);
  padding:0.875rem 1.5rem;
  min-height:48px;              /* > 44px: target touch comodo (WCAG 2.2: ≥24) */
  transition:background var(--transizione), border-color var(--transizione),
             color var(--transizione), transform var(--transizione);
}
.btn:active { transform:translateY(1px); }

.btn--primario   { background:var(--azione); color:#fff; }
.btn--primario:hover   { background:var(--azione-hover); color:#fff; }

.btn--secondario { background:var(--blu-800); color:#fff; }
.btn--secondario:hover { background:var(--blu-700); color:#fff; }

.btn--contorno   { background:transparent; color:var(--accento); border-color:currentColor; }
.btn--contorno:hover   { background:var(--accento); color:var(--sfondo); }

.btn--fantasma   { background:transparent; color:var(--su-sfondo); padding-inline:var(--s-3); }
.btn--fantasma:hover   { background:var(--sfondo-alt); color:var(--su-sfondo); }

/* Su fondo scuro (hero, footer) */
.su-scuro .btn--contorno { color:#fff; }
.su-scuro .btn--contorno:hover { background:#fff; color:var(--blu-900); }

.btn--grande { font-size:var(--t-lg); padding:1.125rem 2rem; min-height:56px; }
.btn--pieno  { width:100%; }
.btn[aria-disabled="true"], .btn:disabled { opacity:.5; pointer-events:none; cursor:not-allowed; }

/* Icona "link esterno" — obbligatoria sui link fuori dal sito (es. ENDU) */
.btn .esterno, .esterno-ico { width:1em; height:1em; flex:none; }

/* =============================== BADGE ================================== */
.badge {
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-family:var(--font-testo); font-size:var(--t-xs); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  padding:.375rem .75rem; border-radius:var(--r-full); line-height:1.3;
}
.badge::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.badge--aperte  { background:#e6f4ec; color:var(--ok); }
.badge--chiuse  { background:#fdecea; color:var(--errore); }
.badge--attesa  { background:#fdf3e0; color:var(--attesa); }
.badge--info    { background:var(--azzurro-100); color:var(--azzurro-600); }
.badge--neutro  { background:var(--superficie); color:var(--testo-muto); }
.badge--gara    { background:#fdeee6; color:var(--alba-700); }
.badge--sociale { background:#eceefb; color:var(--blu-700); }
/* Mai il solo colore a veicolare lo stato: c'è sempre anche l'etichetta. */

/* ============================== HEADER ================================== */
.intestazione {
  position:sticky; top:var(--imp-h, 0px); z-index:100;
  background:color-mix(in srgb, var(--sfondo) 88%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linea);
}
.intestazione__barra {
  display:flex; align-items:center; gap:var(--s-5);
  min-height:72px;
}
.intestazione__logo { display:flex; align-items:center; gap:var(--s-3); margin-right:auto; }
.intestazione__logo img { height:44px; width:auto; }

.nav-principale { display:none; }                 /* mobile: nascosta */
.nav-principale ul { display:flex; align-items:center; gap:var(--s-1); list-style:none; padding:0; }
.nav-principale a {
  display:block; padding:.625rem .75rem; border-radius:var(--r-md);
  font-size:var(--t-sm); font-weight:600; color:var(--su-sfondo); text-decoration:none;
  transition:background var(--transizione), color var(--transizione);
}
.nav-principale a:hover { background:var(--sfondo-alt); color:var(--accento); }
.nav-principale a[aria-current="page"] { color:var(--accento); }
.nav-principale a[aria-current="page"]::after {
  content:""; display:block; height:3px; border-radius:2px;
  background:var(--azione); margin-top:4px;
}
.nav-principale .evidenziata a {
  background:var(--blu-800); color:#fff;
}
.nav-principale .evidenziata a:hover { background:var(--blu-700); color:#fff; }

.hamburger {
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border:1px solid var(--linea); border-radius:var(--r-md);
  background:transparent; color:var(--su-sfondo); cursor:pointer;
}
.intestazione__azioni { display:flex; align-items:center; gap:var(--s-3); }
.intestazione__azioni .btn { min-height:44px; padding:.625rem 1.125rem; font-size:var(--t-sm); }

@media (min-width: 1024px) {
  .nav-principale { display:block; }
  .hamburger { display:none; }
}

/* Menu mobile a tutto schermo */
.menu-mobile {
  position:fixed; inset:0; z-index:200; background:var(--sfondo);
  display:flex; flex-direction:column; padding:var(--gutter);
  overflow-y:auto;
}
/* display:flex qui sopra batte [hidden]{display:none} del browser: senza questa
   riga il drawer resta aperto e copre la pagina a ogni larghezza. */
.menu-mobile[hidden] { display:none; }
.menu-mobile__testa { display:flex; align-items:center; justify-content:space-between;
  min-height:72px; margin-bottom:var(--s-5); }
.menu-mobile ul { list-style:none; padding:0; display:flex; flex-direction:column; }
.menu-mobile li + li { border-top:1px solid var(--linea); }
/* Solo le voci dell'elenco: scoperchiando a `.menu-mobile a` questa regola
   vinceva su .btn--primario/.btn--secondario e anneriva i due CTA in fondo. */
.menu-mobile ul a {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s-4) 0; font-family:var(--font-display); font-size:var(--t-xl);
  font-weight:600; color:var(--su-sfondo); text-decoration:none; min-height:56px;
}
.menu-mobile__cta { margin-top:auto; padding-top:var(--s-6); display:grid; gap:var(--s-3); }

/* ================================ HERO ================================== */
.hero { position:relative; isolation:isolate; color:#fff; overflow:hidden; }
.hero__media { position:absolute; inset:0; z-index:-2; }
.hero__media img { width:100%; height:100%; object-fit:cover; }
.hero::before {                                   /* velo: garantisce il contrasto */
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(11,21,71,.55) 0%, rgba(11,21,71,.30) 35%, rgba(11,21,71,.92) 100%),
    linear-gradient(100deg, rgba(11,21,71,.85) 0%, rgba(11,21,71,.25) 60%);
}
.hero__corpo { padding-block:clamp(3.5rem, 2rem + 9vw, 8rem); }
.hero__contenuto { max-width: 44rem; }

.hero__occhiello {
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-family:var(--font-display); font-size:var(--t-lg); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.35);
  padding:.375rem 1rem; border-radius:var(--r-full);
  backdrop-filter:blur(4px); margin-bottom:var(--s-4);
}
.hero h1, .hero .titolo-hero {
  font-size:var(--t-4xl); line-height:var(--lh-stretta);
  text-transform:uppercase; letter-spacing:-.02em; margin-bottom:var(--s-4);
}
.hero h1 em, .hero .titolo-hero em { font-style:normal; color:var(--alba-400); display:block; }
.hero__sottotitolo {
  font-size:var(--t-lg); color:rgba(255,255,255,.92);
  max-width:36rem; margin-bottom:var(--s-6);
}
.hero__meta {
  display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-6);
  padding-block:var(--s-5); margin-bottom:var(--s-6);
  border-block:1px solid rgba(255,255,255,.22);
}
.hero__meta div { display:flex; flex-direction:column; gap:2px; }
.hero__meta dt, .hero__meta .et {
  font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.72); font-weight:600;
}
.hero__meta dd, .hero__meta .va {
  font-family:var(--font-display); font-size:var(--t-xl); font-weight:700; margin:0;
}
.hero__azioni { display:grid; gap:var(--s-3); }
@media (min-width:560px) { .hero__azioni { grid-auto-flow:column; justify-content:start; } }
.hero__nota { margin-top:var(--s-4); font-size:var(--t-sm); color:rgba(255,255,255,.75); }

/* Hero istituzionale (stato "nessuna-edizione") */
.hero--istituzionale::before {
  background:linear-gradient(160deg, rgba(11,21,71,.92) 0%, rgba(23,41,131,.72) 55%, rgba(0,157,224,.45) 100%);
}

/* ============================= COUNTDOWN =============================== */
.countdown { display:flex; gap:var(--s-3); flex-wrap:wrap; }
.countdown__cella {
  min-width:72px; padding:var(--s-3) var(--s-4);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28);
  border-radius:var(--r-lg); text-align:center; backdrop-filter:blur(4px);
}
.countdown__n {
  display:block; font-family:var(--font-display); font-size:var(--t-2xl);
  font-weight:700; line-height:1; font-variant-numeric:tabular-nums;
}
.countdown__et {
  display:block; font-size:var(--t-xs); letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.78); margin-top:4px;
}
/* Chiaro, per countdown fuori dall'hero */
.countdown--chiaro .countdown__cella {
  background:var(--superficie); border-color:var(--linea); backdrop-filter:none;
}
.countdown--chiaro .countdown__n  { color:var(--accento); }
.countdown--chiaro .countdown__et { color:var(--su-sfondo-muto); }

/* ============================== SEZIONI ================================= */
.testa-sezione { margin-bottom:var(--s-7); max-width:48rem; }
.testa-sezione__occhiello {
  display:block; font-size:var(--t-xs); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--azione); margin-bottom:var(--s-2);
}
.testa-sezione h2 { font-size:var(--t-3xl); text-transform:uppercase; letter-spacing:-.015em; }
.testa-sezione p { margin-top:var(--s-3); color:var(--su-sfondo-muto); font-size:var(--t-lg); }
.testa-sezione--flex { display:flex; align-items:end; justify-content:space-between;
  gap:var(--s-5); max-width:none; flex-wrap:wrap; }

.sezione--alt { background:var(--sfondo-alt); }
.sezione--scura { background:var(--blu-900); color:#fff; }
.sezione--scura .testa-sezione p { color:rgba(255,255,255,.78); }
.sezione--scura .testa-sezione__occhiello { color:var(--alba-400); }

/* ============================== GRIGLIE ================================= */
.griglia { display:grid; gap:var(--s-5); }
.griglia--2 { grid-template-columns:repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.griglia--3 { grid-template-columns:repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.griglia--4 { grid-template-columns:repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* =============================== CARD =================================== */
.card {
  display:flex; flex-direction:column;
  background:var(--bianco); border:1px solid var(--linea); border-radius:var(--r-lg);
  overflow:hidden; transition:box-shadow var(--transizione), transform var(--transizione),
                              border-color var(--transizione);
}
.card:hover { box-shadow:var(--ombra-2); transform:translateY(-2px); border-color:var(--bordo-forte); }
.card__media { aspect-ratio:16/10; background:var(--superficie); overflow:hidden; }
.card__media img { width:100%; height:100%; object-fit:cover; }
.card__corpo { padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-3); flex:1; }
.card__meta { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-3);
  font-size:var(--t-xs); color:var(--su-sfondo-muto); font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; }
.card h3 { font-size:var(--t-xl); }
.card h3 a { color:inherit; text-decoration:none; }
/* Card cliccabile per intero senza annidare link (target touch ampio) */
.card h3 a::after { content:""; position:absolute; inset:0; }
.card { position:relative; }
.card__testo { color:var(--su-sfondo-muto); font-size:var(--t-base); }
.card__pie { margin-top:auto; padding-top:var(--s-3); border-top:1px solid var(--linea);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  font-size:var(--t-sm); }

/* Card evento con data a blocco */
.card-evento { display:flex; gap:var(--s-4); align-items:flex-start; padding:var(--s-5);
  background:var(--bianco); border:1px solid var(--linea); border-radius:var(--r-lg);
  position:relative; transition:box-shadow var(--transizione), border-color var(--transizione); }
.card-evento:hover { box-shadow:var(--ombra-2); border-color:var(--bordo-forte); }
.data-blocco {
  flex:none; width:68px; text-align:center; border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--linea);
}
.data-blocco__m { display:block; background:var(--blu-800); color:#fff;
  font-size:var(--t-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:.25rem 0; }
.data-blocco__g { display:block; background:var(--bianco); color:var(--accento);
  font-family:var(--font-display); font-size:var(--t-2xl); font-weight:700;
  line-height:1.1; padding:.25rem 0; }
.card-evento__corpo { display:flex; flex-direction:column; gap:var(--s-2); min-width:0; }
.card-evento h3 { font-size:var(--t-lg); }
.card-evento h3 a { color:inherit; text-decoration:none; }
.card-evento h3 a::after { content:""; position:absolute; inset:0; }
.card-evento__meta { font-size:var(--t-sm); color:var(--su-sfondo-muto); }

/* ============================ NUMERI / STAT ============================= */
.stat { text-align:center; padding:var(--s-5) var(--s-3); }
.stat__n { display:block; font-family:var(--font-display); font-weight:700;
  font-size:var(--t-3xl); line-height:1; color:var(--accento);
  font-variant-numeric:tabular-nums; }
.sezione--scura .stat__n { color:var(--azzurro-300); }
.stat__et { display:block; margin-top:var(--s-2); font-size:var(--t-sm);
  color:var(--su-sfondo-muto); letter-spacing:.04em; }
.sezione--scura .stat__et { color:rgba(255,255,255,.78); }

/* =========================== GRUPPI ALLENAMENTO ======================== */
.gruppo {
  position:relative; padding:var(--s-6) var(--s-5); border-radius:var(--r-lg);
  background:var(--bianco); border:1px solid var(--linea);
  display:flex; flex-direction:column; gap:var(--s-3);
  border-top:4px solid var(--azzurro-500);
}
.gruppo--principianti { border-top-color:var(--alba-500); }
.gruppo--tecnici      { border-top-color:var(--blu-600); }
.gruppo h3 { font-size:var(--t-xl); }
.gruppo__quando { font-family:var(--font-display); font-size:var(--t-lg); font-weight:600;
  color:var(--accento); }
.gruppo__testo { color:var(--su-sfondo-muto); flex:1; }
.gruppo__nota { font-size:var(--t-sm); background:var(--azzurro-100); color:var(--blu-800);
  padding:var(--s-3); border-radius:var(--r-md); }

/* ============================== SPONSOR ================================= */
.sponsor-muro {
  display:grid; gap:var(--s-4);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
  align-items:center;
}
.sponsor-muro a {
  display:flex; align-items:center; justify-content:center;
  min-height:88px; padding:var(--s-4);
  background:var(--bianco); border:1px solid var(--linea); border-radius:var(--r-md);
  filter:grayscale(1); opacity:.72;
  transition:filter var(--transizione), opacity var(--transizione),
             box-shadow var(--transizione), transform var(--transizione);
}
.sponsor-muro a:hover { filter:grayscale(0); opacity:1; box-shadow:var(--ombra-1);
  transform:translateY(-2px); }
.sponsor-muro img { max-height:44px; width:auto; object-fit:contain; }
/* Nome testuale di ripiego quando manca il logo — e alt sempre presente */
.sponsor-muro .nome { font-family:var(--font-display); font-weight:700;
  font-size:var(--t-lg); color:var(--su-sfondo-muto); text-align:center; }

/* ============================== GALLERIA ================================ */
.galleria-striscia {
  display:grid; gap:var(--s-3);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.galleria-striscia a { display:block; border-radius:var(--r-md); overflow:hidden;
  aspect-ratio:4/3; background:var(--superficie); }
.galleria-striscia img { width:100%; height:100%; object-fit:cover;
  transition:transform 400ms cubic-bezier(.2,.7,.3,1); }
.galleria-striscia a:hover img { transform:scale(1.05); }

/* ============================== STRISCIA CTA ============================ */
.striscia-cta {
  position:relative; isolation:isolate; color:#fff; border-radius:var(--r-lg);
  padding:var(--s-7) var(--s-5); text-align:center; overflow:hidden;
  background:linear-gradient(135deg, var(--blu-900) 0%, var(--blu-800) 45%, var(--azzurro-600) 100%);
}
.striscia-cta::after {         /* raggi: eco del logo, puramente decorativo */
  content:""; position:absolute; inset:-40% -10% auto auto; width:60%; aspect-ratio:1;
  background:conic-gradient(from 200deg, transparent 0 8%, rgba(255,255,255,.10) 8% 12%,
    transparent 12% 20%, rgba(255,255,255,.08) 20% 24%, transparent 24% 100%);
  z-index:-1; pointer-events:none;
}
.striscia-cta h2 { font-size:var(--t-2xl); text-transform:uppercase; margin-bottom:var(--s-3); }
.striscia-cta p { color:rgba(255,255,255,.86); max-width:40rem; margin:0 auto var(--s-5); }
.striscia-cta .azioni { display:grid; gap:var(--s-3); justify-content:center; }
@media (min-width:560px) { .striscia-cta .azioni { grid-auto-flow:column; } }

/* ================================ FOOTER =============================== */
.pie { background:var(--blu-900); color:#fff; padding-block:var(--s-8) var(--s-5); }
.pie a { color:rgba(255,255,255,.82); text-decoration:none; }
.pie a:hover { color:#fff; text-decoration:underline; }
.pie__griglia { display:grid; gap:var(--s-6);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
/* Il logo ha lo sfondo bianco e proporzioni 3:2: sul blu va in un riquadro
   chiaro, con altezza fissa e larghezza automatica (mai schiacciato). */
.pie__logo { display:inline-block; background:#fff; border-radius:var(--r-md); padding:var(--s-2) var(--s-3);
  margin-bottom:var(--s-4); box-shadow:0 2px 10px rgba(0,0,0,.18); }
.pie__marchio .pie__logo img { display:block; height:84px; width:auto; }
.pie__societa { margin-top:var(--s-3); font-size:var(--t-xs) !important; }
.pie__marchio p { color:rgba(255,255,255,.74); font-size:var(--t-sm); max-width:24rem; }
.pie h3 { font-size:var(--t-base); text-transform:uppercase; letter-spacing:.1em;
  color:var(--azzurro-300); margin-bottom:var(--s-4); font-family:var(--font-testo);
  font-weight:700; }
.pie ul { list-style:none; padding:0; display:flex; flex-direction:column; gap:var(--s-2); }
.pie__sotto { margin-top:var(--s-7); padding-top:var(--s-5);
  border-top:1px solid rgba(255,255,255,.16);
  display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-5);
  align-items:center; justify-content:space-between;
  font-size:var(--t-sm); color:rgba(255,255,255,.66); }
.pie__social { display:flex; gap:var(--s-2); }
.pie__social a { display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--r-md);
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); }
.pie__social a:hover { background:rgba(255,255,255,.20); }

/* ============================ BARRA CTA MOBILE ========================== */
/* Fissa in fondo solo quando le iscrizioni sono aperte (doc 01 §7). */
.cta-fissa {
  position:sticky; bottom:0; z-index:90;
  padding:var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--sfondo) 92%, transparent);
  backdrop-filter:blur(12px); border-top:1px solid var(--linea);
}
/* .btn e' nowrap: questa etichetta e' piu' larga del viewport a 390px e veniva
   tagliata. Qui dentro il bottone e' a piena larghezza, mandarla a capo va bene. */
.cta-fissa .btn { white-space:normal; line-height:1.25; text-align:center; }
@media (min-width:1024px) { .cta-fissa { display:none; } }

/* ================================ STATI ================================= */
.stato-vuoto, .stato-errore {
  text-align:center; padding:var(--s-8) var(--s-5);
  border:1px dashed var(--bordo-forte); border-radius:var(--r-lg);
  background:var(--sfondo-alt);
}
.stato-vuoto h3, .stato-errore h3 { font-size:var(--t-xl); margin-bottom:var(--s-2); }
.stato-vuoto p, .stato-errore p { color:var(--su-sfondo-muto); max-width:34rem;
  margin:0 auto var(--s-5); }
.stato-errore { border-color:#e9b8b4; background:#fdf6f5; }
:root[data-tema="scuro"] .stato-errore { background:#2a1412; border-color:#5e2b26; }

.skeleton { background:linear-gradient(90deg, var(--superficie) 25%,
  color-mix(in srgb, var(--superficie) 60%, var(--bordo)) 37%, var(--superficie) 63%);
  background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:var(--r-sm); }
@keyframes sk { 0%{background-position:100% 50%} 100%{background-position:0 50%} }
.skeleton--titolo { height:1.5rem; width:70%; }
.skeleton--riga   { height:.85rem; width:100%; margin-top:.6rem; }
.skeleton--media  { aspect-ratio:16/10; width:100%; border-radius:0; }

/* ============================== ACCORDION =============================== */
.faq { border-top:1px solid var(--linea); }
.faq details { border-bottom:1px solid var(--linea); }
.faq summary {
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  padding:var(--s-5) 0; cursor:pointer; list-style:none;
  font-family:var(--font-display); font-size:var(--t-xl); font-weight:600;
  min-height:56px;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-size:var(--t-2xl); line-height:1;
  color:var(--azione); flex:none; transition:transform var(--transizione); }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq__risposta { padding-bottom:var(--s-5); color:var(--su-sfondo-muto); max-width:52rem; }

/* ============================== BREADCRUMB ============================== */
.briciole { font-size:var(--t-sm); color:var(--su-sfondo-muto); padding-block:var(--s-4); }
.briciole ol { display:flex; flex-wrap:wrap; gap:var(--s-2); list-style:none; padding:0; }
.briciole li:not(:last-child)::after { content:"›"; margin-left:var(--s-2); opacity:.6; }
.briciole [aria-current="page"] { color:var(--su-sfondo); font-weight:600; }

/* ======================== FORM E AUTENTICAZIONE ========================= */
.riquadro-auth {
  max-width: 30rem; margin-inline: auto;
  background: var(--bianco); border: 1px solid var(--linea);
  border-radius: var(--r-lg); padding: var(--s-6); box-shadow: var(--ombra-1);
}
.campo { margin-bottom: var(--s-5); }
.campo label { display:block; font-weight:600; margin-bottom:var(--s-2); font-size:var(--t-sm); }
.campo .obbligatorio { color: var(--errore); }
.campo__aiuto { font-size: var(--t-sm); color: var(--su-sfondo-muto); margin-bottom: var(--s-2); }
.campo__errore {
  display:flex; align-items:center; gap:var(--s-2);
  margin-top:var(--s-2); font-size:var(--t-sm); color:var(--errore); font-weight:600;
}
.campo input, .campo select, .campo textarea, .campo-password input {
  width:100%; font:inherit;
  /* mai sotto 16px: sotto quella soglia iOS ingrandisce la pagina al focus */
  font-size:max(16px, var(--t-base));
  padding:.75rem 1rem; min-height:48px;
  border:1.5px solid var(--bordo-forte); border-radius:var(--r-md);
  background:var(--sfondo); color:var(--su-sfondo);
  transition:border-color var(--transizione), box-shadow var(--transizione);
}
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
  border-color:var(--blu-600); outline:3px solid var(--azzurro-500); outline-offset:1px;
}
.campo--errore input, .campo--errore select, .campo--errore textarea { border-color:var(--errore); }
.campo textarea { min-height:9rem; resize:vertical; }

.campo-password { position:relative; display:flex; }
.campo-password button {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:0; color:var(--link); font-weight:600; font-size:var(--t-sm);
  cursor:pointer; padding:var(--s-2) var(--s-3); min-height:36px; border-radius:var(--r-sm);
}
.campo-password button:hover { background:var(--sfondo-alt); }

.griglia-campi { display:grid; gap:0 var(--s-4); grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr)); }

.campo-consenso { display:flex; gap:var(--s-3); align-items:flex-start; margin-bottom:var(--s-5); }
.campo-consenso input { width:22px; height:22px; margin-top:2px; flex:none; accent-color:var(--blu-800); }
.campo-consenso label { font-size:var(--t-sm); line-height:1.5; }

.avviso {
  display:flex; flex-direction:column; gap:var(--s-1);
  padding:var(--s-4); border-radius:var(--r-md); margin-bottom:var(--s-5);
  font-size:var(--t-sm); border-left:4px solid;
}
.avviso--errore     { background:#fdf3f2; border-color:var(--errore); color:#7f1d1a; }
.avviso--ok         { background:#eef7f1; border-color:var(--ok); color:#125c36; }
.avviso--attenzione { background:#fdf6e8; border-color:var(--attesa); color:#6b4600; }
.avviso--info       { background:var(--azzurro-100); border-color:var(--azzurro-600); color:#0b3f59; }
.avviso strong { font-weight:700; }

.separatore { display:flex; align-items:center; gap:var(--s-4); margin:var(--s-6) 0 var(--s-5); }
.separatore::before, .separatore::after { content:""; flex:1; height:1px; background:var(--linea); }
.separatore span { font-size:var(--t-sm); color:var(--su-sfondo-muto); }

.social__pulsanti { display:flex; flex-direction:column; gap:var(--s-3); align-items:center; }
.btn-apple {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  width:100%; max-width:320px; min-height:44px; padding:.7rem 1.2rem;
  background:#000; color:#fff; border:0; border-radius:var(--r-md);
  font:inherit; font-size:var(--t-sm); font-weight:600; cursor:pointer;
}
.btn-apple:hover { background:#222; }

.esito-ok { text-align:center; }
.esito-ok svg { margin:0 auto var(--s-4); }
.esito-ok h2 { font-size:var(--t-2xl); margin-bottom:var(--s-3); }
.esito-ok p { color:var(--su-sfondo-muto); margin-bottom:var(--s-3); }
.minuto { font-size:var(--t-sm); color:var(--su-sfondo-muto); }

/* Intestazione di pagina interna */
.testa-pagina { background:var(--blu-900); color:#fff; padding-block:var(--s-8) var(--s-7); }
.testa-pagina h1 { font-size:var(--t-3xl); text-transform:uppercase; }
.testa-pagina p { color:rgba(255,255,255,.82); margin-top:var(--s-3); max-width:44rem; font-size:var(--t-lg); }
.testa-pagina .briciole { color:rgba(255,255,255,.7); padding-top:0; }
.testa-pagina .briciole a { color:rgba(255,255,255,.85); }
.testa-pagina .briciole [aria-current="page"] { color:#fff; }

.elenco-passi { counter-reset: passo; list-style: none; padding: 0; display: grid; gap: var(--s-4); }
.elenco-passi li { counter-increment: passo; display: flex; gap: var(--s-4); align-items: flex-start;
  color: var(--su-sfondo-muto); }
.elenco-passi li::before {
  content: counter(passo); flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--blu-800); color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-lg);
}
.elenco-passi strong { color: var(--su-sfondo); }

/* =============================== TABELLE E DATI ========================== */
.scheda-dati { display: grid; gap: var(--s-3); }
.scheda-dati > div { display: grid; gap: 2px; padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--linea); }
.scheda-dati dt { font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--su-sfondo-muto); }
.scheda-dati dd { margin: 0; font-weight: 600; }

.tabella { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tabella th, .tabella td { text-align: left; padding: var(--s-3); border-bottom: 1px solid var(--linea); }
.tabella th { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em;
  color: var(--su-sfondo-muto); }
/* Su schermi stretti la tabella scorre invece di sfondare il layout */
@media (max-width: 640px) {
  .tabella { display: block; overflow-x: auto; white-space: nowrap; }
}

.filtri { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.filtri a {
  display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1rem;
  border: 1.5px solid var(--bordo-forte); border-radius: var(--r-full);
  font-size: var(--t-sm); font-weight: 600; color: var(--su-sfondo); text-decoration: none;
  transition: background var(--transizione), border-color var(--transizione), color var(--transizione);
}
.filtri a:hover { border-color: var(--accento); color: var(--accento); }
.filtri a.attivo { background: var(--blu-800); border-color: var(--blu-800); color: #fff; }

.paginazione { display: flex; align-items: center; justify-content: center;
  gap: var(--s-4); margin-top: var(--s-7); flex-wrap: wrap; }

.elenco-spunte { list-style: none; padding: 0; display: grid; gap: var(--s-2);
  color: var(--su-sfondo-muto); font-size: var(--t-sm); }
.elenco-spunte li { display: flex; gap: var(--s-3); align-items: flex-start; }
.elenco-spunte li::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px;
  background: var(--ok); border-radius: 50%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center/12px no-repeat,
           linear-gradient(#000,#000);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

.articolo p { margin-bottom: var(--s-4); color: var(--su-sfondo); }
.articolo__occhiello { font-size: var(--t-lg); color: var(--su-sfondo-muto);
  padding-bottom: var(--s-4); border-bottom: 1px solid var(--linea); margin-bottom: var(--s-5); }

/* ============================ ARCHIVIO STORICO ========================== */
.archivio { display: grid; gap: var(--s-3); }
.archivio details { background: var(--bianco); border: 1px solid var(--linea);
  border-radius: var(--r-lg); overflow: hidden; }
.archivio summary { padding: var(--s-4) var(--s-5); cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--t-xl); font-weight: 700;
  display: flex; align-items: baseline; gap: var(--s-3); min-height: 56px; }
.archivio summary::-webkit-details-marker { display: none; }
.archivio summary::after { content: "+"; margin-left: auto; color: var(--azione);
  font-size: var(--t-2xl); line-height: 1; transition: transform var(--transizione); }
.archivio details[open] summary::after { transform: rotate(45deg); }
.archivio ul { list-style: none; margin: 0; padding: 0 var(--s-5) var(--s-5); display: grid; gap: 0; }
.archivio li { display: flex; gap: var(--s-4); padding: var(--s-3) 0;
  border-top: 1px solid var(--linea); font-size: var(--t-sm); }
.archivio time { flex: none; width: 3.5rem; color: var(--su-sfondo-muto);
  font-variant-numeric: tabular-nums; font-weight: 600; }

/* ========================= MINISITO 10 MILA ============================= */
/* La gara ha una testata sua: stesso marchio, ma si capisce subito che si è
   nel sito dell'evento e non in quello del gruppo. */
.intestazione--10mila { background:var(--blu-900); border-bottom-color:var(--blu-800); }
.intestazione--10mila .nav-principale a { color:#fff; }
.intestazione--10mila .nav-principale a:hover { background:var(--blu-800); color:#fff; }
.intestazione--10mila .nav-principale a[aria-current="page"] { color:var(--alba-400); }
.intestazione--10mila .intestazione__logo img { background:#fff; border-radius:var(--r-md); padding:2px 4px; }
@media (max-width: 1023px) { .intestazione--10mila .intestazione__azioni .btn { display:none; } }
.intestazione--10mila .btn--contorno { color:#fff; border-color:rgba(255,255,255,.5); }
.intestazione--10mila .hamburger { color:#fff; border-color:rgba(255,255,255,.35); }
.intestazione__minisito {
  font-family:var(--font-display); font-weight:700;
  text-transform:uppercase; line-height:1; font-size:var(--t-sm); color:var(--alba-400);
  border-left:2px solid rgba(255,255,255,.3); padding-left:var(--s-3);
}

/* Banner della gara in home: un rimando, non l'apertura del sito. */
.banner-gara {
  display:grid; gap:var(--s-5); align-items:center;
  background:var(--blu-900); color:#fff; border-radius:var(--r-lg);
  padding:var(--s-6); overflow:hidden; position:relative;
}
.banner-gara h2 { color:#fff; margin:0; }
.banner-gara p { color:rgba(255,255,255,.85); margin:0; }
.banner-gara__occhiello { color:var(--alba-400); font-weight:700; text-transform:uppercase; font-size:var(--t-sm); letter-spacing:.04em; }
@media (min-width: 900px) { .banner-gara { grid-template-columns: 1fr auto; padding:var(--s-7) var(--s-8); } }

/* Pagina social */
.card-social { display:flex; flex-direction:column; gap:var(--s-3); padding:var(--s-6); }
.card-social__icona { width:48px; height:48px; border-radius:var(--r-md); display:inline-flex; align-items:center; justify-content:center; color:#fff; }
.card-social__icona--fb { background:#1877f2; }
.card-social__icona--ig { background:linear-gradient(45deg,#f09433,#dc2743 50%,#bc1888); }
.cornice-social { width:100%; max-width:500px; height:640px; border:1px solid var(--linea); border-radius:var(--r-lg); background:var(--sfondo-alt); }

/* Dati per il bonifico */
.bonifico { display:grid; gap:var(--s-2); font-variant-numeric:tabular-nums; }
.bonifico code { font-size:var(--t-lg); letter-spacing:.03em; word-break:break-all; }

/* Editor delle domande di un evento */
.domanda-editor { border:1px solid var(--linea); border-radius:var(--r-md); padding:var(--s-4); margin-bottom:var(--s-3); display:grid; gap:var(--s-3); }
.domanda-editor__testa { display:flex; gap:var(--s-3); align-items:end; flex-wrap:wrap; }
.domanda-editor__testa > :first-child { flex:1 1 260px; }

/* Requisiti del tesseramento: titolo sopra, spiegazione sotto. */
.elenco-passi--schede li > div { display: grid; gap: 2px; padding-top: 4px; }
.elenco-passi--schede li strong { font-size: var(--t-base); }

/* Gallery: anteprime cliccabili, la foto grande si apre a parte. */
.foto-gallery { margin:0; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--linea); aspect-ratio: 3 / 2; }
.foto-gallery a, .foto-gallery img { display:block; width:100%; height:100%; }
.foto-gallery img { object-fit:cover; transition: transform 240ms ease; }
.foto-gallery a:hover img, .foto-gallery a:focus-visible img { transform: scale(1.03); }

/* Accesso: la strada per chi non ha ancora un account, ben visibile. */
.nuovo-socio { margin-top:var(--s-5); padding:var(--s-4); border-radius:var(--r-md);
  background:var(--sfondo-alt); border:1px solid var(--linea); display:grid; gap:var(--s-2); }
.nuovo-socio p { margin:0; }