@font-face{font-family:"Neue Haas Casa";font-weight:300 400;font-display:swap;src:local("NHaasGroteskDSPro-45Lt"),local("Neue Haas Grotesk Display Pro 45 Light")}
@font-face{font-family:"Neue Haas Casa";font-weight:500;font-display:swap;src:local("NHaasGroteskDSPro-55Rg"),local("Neue Haas Grotesk Display Pro 55 Roman"),local("Neue Haas Grotesk Display Pro")}
@font-face{font-family:"Neue Haas Casa";font-weight:600 700;font-display:swap;src:local("NHaasGroteskDSPro-65Md"),local("Neue Haas Grotesk Display Pro 65 Medium")}

:root {
  color-scheme: dark;
  --nero: #1c1f1c;
  --inchiostro: #ffffff;
  --inchiostro-spento: rgba(255, 255, 255, 0.62);
  --inchiostro-riga: rgba(255, 255, 255, 0.16);
  --giallo: #fff172;
  --giallo-forte: #f2e04f;

  --bordo: max(16px, 1.4vw);
  --raggio-tasto: 18.2px;
  --canale: var(--bordo);
  --vw: 100vw;
  --colonna: calc((var(--vw) - 2 * var(--bordo) - 5 * var(--canale)) / 6);

  --curva-principale: cubic-bezier(0.65, 0, 0, 1);
  --curva-titolo: cubic-bezier(0.75, 0, 0.25, 1);
  --curva-tendina: cubic-bezier(0.75, 0, 0, 1);
  --curva-arrivo: cubic-bezier(0.165, 0.84, 0.44, 1);
  --curva-voce: cubic-bezier(0.19, 1, 0.22, 1);
  --spazio-piccolo: 0.06em;
  --spazio-medio: 0.02em;
  --spazio-titolo: -0.01em;
  --inchiostro-spento: rgba(255, 255, 255, 0.45);

  --font: "neue-haas-grotesk-display", "Neue Haas Casa", "Helvetica Neue", helvetica, arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior: none; }
body {
  margin: 0;
  background: var(--nero);
  color: var(--inchiostro);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: var(--spazio-piccolo);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
}
html.scorre { overflow-y: scroll; scrollbar-gutter: stable; }
html.scorre body { height: auto; overflow: visible; }
html.scorre:has(body.con-scheda) { overflow-y: hidden; }
.corsa { height: calc(var(--fermate, 7) * 100vh); pointer-events: none; }
html:not(.scorre) .corsa { display: none; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 1px solid var(--giallo); outline-offset: 3px; }

.testa {
  position: fixed; z-index: 40; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--bordo);
  pointer-events: none;
}
.testa > * { pointer-events: auto; }
.marchio { display: inline-flex; align-items: center; gap: 2px; justify-self: start; }
.marchio img { height: 44px; width: auto; }

.capitoli {
  position: absolute; top: 100%; left: var(--bordo); width: var(--colonna);
  margin-top: -0.3em;
  font-size: 14px; line-height: 1.4; font-weight: 400;
}
.capitoli ul { margin: 0; padding: 0; list-style: none; }
.capitoli li { overflow: hidden; }
.capitoli a {
  display: inline-block; color: var(--inchiostro-spento);
  transform: translateY(-100%); opacity: 0;
  transition: transform 1.2s var(--curva-voce) calc(var(--indice, 0) * 25ms), opacity 1.2s var(--curva-voce) calc(var(--indice, 0) * 25ms), color 0.2s linear;
}
.capitoli.is-pronta a { transform: none; opacity: 1; }
.capitoli a:hover, .capitoli a.is-attiva { color: var(--inchiostro); }
.capitoli__testo { display: inline-block; position: relative; transition: transform 1s var(--curva-voce); }
.capitoli__testo::after { content: attr(data-testo); position: absolute; left: 0; top: 100%; width: 100%; }
@media (hover: hover) { .capitoli a:hover .capitoli__testo { transform: translateY(-100%); } }
.testa__destra { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); }
.testa__voci { display: flex; gap: clamp(18px, 2vw, 34px); }
.testa__voci a { color: var(--inchiostro); font-weight: 400; }
.testa__voci a:hover, .testa__voci a.is-qui { font-weight: 500; }

.piede {
  position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: flex-end; align-items: flex-end;
  padding: var(--bordo);
  min-height: calc(2 * var(--bordo) + 1.35em);
  color: var(--inchiostro);
  pointer-events: none;
}
.piede > * { pointer-events: auto; margin: 0; }
.piede__dove { font-weight: 400; }

.griglia {
  position: fixed; z-index: 100; inset: 0 var(--bordo); pointer-events: none;
  display: grid; grid-template-columns: repeat(6, 1fr); column-gap: var(--canale);
}
.griglia span { background: rgba(255, 60, 60, 0.14); border-inline: 1px solid rgba(255, 60, 60, 0.5); }

.ovale {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; padding: 0.8em 1.4em;
  font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap;
  transition: transform 0.18s ease, background-color 0.18s ease;
}
.ovale--giallo { background: var(--giallo); color: var(--nero); }
@media (hover: hover) { .ovale--giallo:hover { background: var(--giallo-forte); transform: scale(1.04); } }
.ovale--bordo { box-shadow: inset 0 0 0 1px var(--inchiostro); color: var(--inchiostro); font-weight: 400; }
@media (hover: hover) { .ovale--bordo:hover { transform: scale(1.04); } }
.ovale:active { transform: scale(0.97); }
.ovale[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.testa__prenota-icona { display: none; flex: none; width: 18px; height: 18px; }
.testa--stretta .testa__prenota { position: relative; width: 2.4em; height: 2.4em; padding: 0; }
.testa--stretta .testa__prenota::after { content: ""; position: absolute; inset: -5px; }
.testa--stretta .testa__prenota-icona { display: block; }
.testa--stretta .testa__prenota-testo {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; overflow: clip; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.pausa {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: var(--bordo);
  background: rgba(0, 0, 0, 0.55);
}
.pausa[hidden] { display: none; }
.pausa__scheda {
  display: grid; justify-items: center; gap: 24px;
  width: min(360px, 100%); padding: 36px 24px 28px;
  background: var(--nero); color: var(--inchiostro);
  border: 1px solid var(--inchiostro-riga); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  text-align: center;
}
.pausa__titolo { margin: 0; font-size: 32px; line-height: 36px; font-weight: 400; letter-spacing: var(--spazio-medio); }

@media (min-width: 768px) and (max-width: 991px) {
  .capitoli { display: none; }
}
@media (max-width: 767px) {
  .testa__voci, .piede__dove { display: none; }
  .marchio img { height: 34px; }
  :root { --canale: 15px; --colonna: calc((var(--vw) - 2 * var(--bordo) - var(--canale)) / 2); }
  .griglia { grid-template-columns: repeat(2, 1fr); }
  .griglia span:nth-child(n+3) { display: none; }
  .testa .ovale { padding: 0.7em 1.1em; }
  :root { --raggio-tasto: 16.8px; }
  .capitoli { width: max-content; }
  .capitoli-tendina .capitoli li:not(.is-qui) { height: 0; visibility: hidden; }
  .capitoli-tendina .capitoli a.is-attiva::after {
    content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 0.25em 0.55em;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); vertical-align: middle; transition: transform 0.2s ease;
  }
  .capitoli-tendina .capitoli.is-aperta {
    margin: calc(-0.3em - 9px) 0 0 -15px; padding: 8px 14px 10px;
    background: var(--nero); border: 1px solid var(--inchiostro-riga); border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  }
  .capitoli-tendina .capitoli.is-aperta li { height: auto; visibility: visible; }
  .capitoli-tendina .capitoli.is-aperta a.is-attiva::after { transform: rotate(-135deg); margin-bottom: -0.05em; }
}

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