/* Base comune delle hero del giro 3: caratteri e colori del sito vero (Space Grotesk + Inter, rosso, giallo, blu). */
:root {
  --giallo: #ffd400;
  --rosso: #e21d2b;
  --blu: #1b2a6b;
  --notte: #0f1840;
  --crema: #fdfaf1;
  --bianco: #ffffff;
  --verde: #2fd36b;
  --titolo: "Space Grotesk", "Arial Black", system-ui, sans-serif;
  --testo: "Inter", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--testo); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--giallo); outline-offset: 3px; }

/* Testata */
.testata { position: absolute; inset: 0 0 auto; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px max(20px, env(safe-area-inset-right, 0px)) 18px max(20px, env(safe-area-inset-left, 0px)); }
.testata .logo img { width: 74px; }
.testata nav { display: flex; gap: 30px; font-weight: 600; font-size: 15px; }
.testata nav a { text-decoration: none; opacity: .92; }
.testata nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }
.testata .ordina { font-family: var(--titolo); font-weight: 700; font-size: 15px; text-decoration: none; padding: 11px 20px; border-radius: 999px; }
@media (max-width: 860px) { .testata nav { display: none; } .testata .logo img { width: 58px; } .testata { padding-block: 12px; } }

/* Bottoni */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--titolo); font-weight: 700; font-size: 18px; line-height: 1; text-decoration: none; padding: 19px 30px; border-radius: 999px; border: 0; cursor: pointer; transition: transform .15s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* "giallo" giallo con il contorno */
.giallo { color: var(--giallo); -webkit-text-stroke: .045em var(--bianco); paint-order: stroke fill; }
.giallo.su-chiaro { -webkit-text-stroke-color: var(--notte); }

/* Stato delle sedi */
[data-sede] .stato { display: flex; align-items: center; gap: 8px; }
[data-sede] .stato i { width: 9px; height: 9px; border-radius: 50%; background: #9aa0b8; flex: none; }
[data-sede].aperto .stato i { background: var(--verde); box-shadow: 0 0 0 0 rgba(47, 211, 107, .6); animation: battito 2s infinite; }
@keyframes battito { 70% { box-shadow: 0 0 0 9px rgba(47, 211, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 211, 107, 0); } }

/* Scheda "Portami da Bully" */
.scheda-sedi { width: min(520px, calc(100vw - 32px)); border: 0; border-radius: 22px; padding: 0; background: var(--bianco); color: var(--notte); font-family: var(--testo); }
.scheda-sedi::backdrop { background: rgba(15, 24, 64, .6); backdrop-filter: blur(3px); }
.scheda-testa { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px 6px; }
.scheda-testa p { margin: 0; font-family: var(--titolo); font-weight: 700; font-size: 22px; }
.scheda-testa button { border: 0; background: none; font-size: 20px; cursor: pointer; color: var(--notte); padding: 6px; }
.scheda-sedi article { display: grid; gap: 14px; padding: 18px 22px; border-top: 1px solid #ece7d8; }
.scheda-sedi h3 { margin: 0; font-family: var(--titolo); font-size: 24px; }
.scheda-sedi p { margin: 2px 0 0; font-size: 15px; }
.scheda-sedi .oggi { color: #5b6080; font-size: 14px; }
.scheda-sedi .azioni { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.scheda-sedi .azioni a { font-family: var(--titolo); font-weight: 700; text-decoration: none; padding: 12px 20px; border-radius: 999px; background: var(--rosso); color: var(--bianco); }
.scheda-sedi .azioni a.secondo { background: var(--notte); }
.scheda-sedi .nota { font-size: 14px; color: #5b6080; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }