/* SPACE — SPORTS & LIVE EXPERIENCES
   base.css · v1
   Reset, tipografia, contenedores, utilidades, foco visible y la anulacion
   global de movimiento. Ningun hex: todo sale de tokens.css. */

/* ======== 1. RESET ======== */

*,
*::before,
*::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* El nav fijo no debe tapar el destino de un ancla */
  scroll-padding-top: calc(var(--nav-h) + var(--sp-5));
  background: var(--bg);
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ol, ul{ margin: 0; padding: 0; }

ol[class], ul[class]{ list-style: none; }

body{
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg-dim);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-reg);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Garantiza el criterio de aceptacion §11.4: a 360px no hay scroll
     horizontal del body. `clip` (no `hidden`) para no romper position:sticky. */
  overflow-x: clip;
  max-width: 100%;
}

img, picture, svg, video, canvas{ display: block; max-width: 100%; }

img, video{ height: auto; }

svg{ fill: currentColor; }

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

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

textarea{ resize: vertical; }

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

hr{
  border: 0;
  border-top: var(--bw) solid var(--hairline);
  margin: 0;
}

table{ border-collapse: collapse; }

[hidden]{ display: none !important; }

/* ======== 2. TIPOGRAFIA ======== */
/* Archivo con pesos ESTATICOS. Prohibido animar el peso o un eje variable
   (SPEC §3): una transition sobre fuente variable se comio el 88% del hilo. */

h1, h2, h3, h4, h5, h6,
.t-mega, .t-h1, .t-h2, .t-h3{
  font-family: var(--ff-display);
  color: var(--fg);
  text-transform: none;
  /* red de seguridad a 360px: una palabra larga nunca desborda el body */
  overflow-wrap: break-word;
}

.t-mega,
h1{
  font-size: var(--fs-h1);
  font-weight: var(--fw-black);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-h);
}

/* Mega es opt-in: solo el titular del hub lo lleva */
.t-mega{
  font-size: var(--fs-mega);
  line-height: var(--lh-mega);
  letter-spacing: var(--tr-mega);
}

h2,
.t-h1{
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-h);
}

.t-h2,
h3{
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-h);
}

.t-h3,
h4{
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  line-height: var(--lh-h3);
  letter-spacing: var(--tr-h3);
}

h5, h6{
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
  line-height: var(--lh-h3);
}

.t-lead{
  font-family: var(--ff-body);
  font-size: var(--fs-lead);
  font-weight: var(--fw-reg);
  line-height: var(--lh-lead);
  color: var(--fg-dim);
  max-width: var(--measure);
}

.t-body{
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-dim);
  max-width: var(--measure);
}

.t-small{
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--fg-dim);
}

.t-label{
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-med);
  line-height: var(--lh-flat);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* Numero de indice 01..05 */
.t-index{
  font-family: var(--ff-display);
  font-size: var(--fs-index);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-label);
  line-height: var(--lh-flat);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

p{ max-width: var(--measure); }
p + p{ margin-top: var(--sp-4); }

/* Ancho de medida explicito dentro de un contenedor ancho */
.measure{ max-width: var(--measure); }
.measure--sm{ max-width: var(--measure-sm); }

strong, b{ font-weight: var(--fw-med); color: var(--fg); }
em, i{ font-style: italic; }
small{ font-size: var(--fs-small); }

::selection{ background: var(--accent); color: var(--ink); }

/* Enlace de texto en linea */
.link{
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.28em;
  text-decoration-thickness: 1px;
  transition: color var(--d-fast) var(--ease);
}
.link:hover{ color: var(--accent-hi); }

/* Enlace con flecha: la flecha la pone el CSS */
.link-arrow{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--ff-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-med);
  letter-spacing: var(--tr-cta);
  text-transform: uppercase;
  color: var(--fg);
}
.link-arrow::after{
  content: "";
  width: 1.6em;
  height: var(--bw);
  background: var(--accent);
  transition: transform var(--d-mid) var(--ease);
  transform-origin: left center;
}
.link-arrow:hover::after{ transform: scaleX(1.5); }

/* ======== 3. CONTENEDORES ======== */

.wrap{
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide{ max-width: var(--wrap-wide); }
.wrap--narrow{ max-width: var(--wrap-narrow); }

/* Ritmo vertical */
.section{
  position: relative;
  padding-block: var(--section-y);
  background: var(--bg);
  color: var(--fg-dim);
}
.section--tight{ padding-block: var(--section-y-tight); }
.section--flush-top{ padding-block-start: 0; }
.section--flush-bottom{ padding-block-end: 0; }
.section--flush{ padding-block: 0; }

/* Un punto por encima del fondo */
.section--raised{ background: var(--bg-2); }
/* Fondo teal profundo — nunca --teal-400 en superficies grandes */
.section--deep{ background: var(--accent-bg-deep); --hairline: var(--accent-bg); }

/* UNA sola seccion clara por pagina como maximo (SPEC §2).
   Remapea los alias semanticos; ningun componente necesita saberlo. */
.section--light{
  --bg:            var(--paper);
  --bg-2:          var(--paper);
  --surface:       var(--paper);
  --surface-hover: var(--paper-dim);
  --fg:            var(--ink);
  --fg-dim:        var(--ink-4);
  --fg-mute:       var(--teal-800);
  --fg-soft:       var(--teal-700);
  --accent:        var(--teal-700);
  --accent-hi:     var(--teal-800);
  --accent-deep:   var(--teal-800);
  --accent-bg:     var(--teal-800);
  --hairline:      var(--paper-mute);
  --focus:         var(--teal-700);
  --alert:         var(--ink);
  --ok:            var(--teal-700);
  background: var(--paper);
  color: var(--ink);
}

/* Hairline entre secciones */
.section--ruled{ border-top: var(--bw) solid var(--hairline); }

.rule{
  border: 0;
  border-top: var(--bw) solid var(--hairline);
  width: 100%;
}
.rule--accent{ border-top-color: var(--accent); }

/* ======== 4. PRIMITIVAS DE LAYOUT ======== */

.stack{ display: flex; flex-direction: column; gap: var(--sp-5); align-items: flex-start; }
.stack--sm{ gap: var(--sp-3); }
.stack--lg{ gap: var(--sp-7); }
.stack--center{ align-items: center; text-align: center; }

.cluster{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.cluster--between{ justify-content: space-between; }
.cluster--end{ justify-content: flex-end; }

/* minmax(0,1fr): sin el 0, una imagen ancha rompe la rejilla */
.grid{ display: grid; gap: var(--gap); }
.grid--2{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

/* Dos columnas asimetricas */
.cols{ display: grid; gap: var(--gap-lg); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px){
  .cols{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cols--40-60{ grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
  .cols--60-40{ grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
  .cols--sticky > :first-child{ position: sticky; top: calc(var(--nav-h) + var(--sp-6)); align-self: start; }
}

/* Imagen que llena su caja */
.fill{ width: 100%; height: 100%; object-fit: cover; }

/* Sangre completa dentro de un .wrap */
.bleed{
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* ======== 5. UTILIDADES ======== */

.u-accent{ color: var(--accent); }
.u-fg{ color: var(--fg); }
.u-dim{ color: var(--fg-dim); }
.u-mute{ color: var(--fg-mute); }
.u-center{ text-align: center; }
.u-right{ text-align: right; }
.u-upper{ text-transform: uppercase; letter-spacing: var(--tr-cta); }
.u-nowrap{ white-space: nowrap; }
.u-balance{ text-wrap: balance; }
.u-full{ width: 100%; }
.u-relative{ position: relative; }
.u-tabular{ font-variant-numeric: tabular-nums; }

/* Solo para lectores de pantalla */
.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ======== 6. SKIP LINK ======== */

.skip-link{
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: var(--z-skip);
  display: inline-block;
  padding: var(--sp-3) var(--sp-5);
  background: var(--accent);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-med);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  border-radius: var(--r-1);
  /* Fuera de pantalla hasta el foco. Nunca `display:none`. */
  transform: translateY(calc(-100% - var(--sp-6)));
  transition: transform var(--d-fast) var(--ease);
}
.skip-link:focus-visible,
.skip-link:focus{ transform: translateY(0); }

/* ======== 7. FOCO VISIBLE ======== */
/* Obligatorio en todo lo interactivo (SPEC §9) */

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible{
  outline: var(--bw-thick) solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

/* Navegadores sin :focus-visible */
@supports not selector(:focus-visible){
  :where(a, button, input, textarea, select, summary, [tabindex]):focus{
    outline: var(--bw-thick) solid var(--focus);
    outline-offset: 3px;
  }
}

/* El scroll horizontal se recorre con teclado: los paneles entran a la vista */
[tabindex="-1"]:focus{ outline: none; }
.band__panel,
.verticals__item,
.grid-gallery__item{ scroll-margin: calc(var(--nav-h) + var(--sp-6)); }

/* ======== 8. MOVIMIENTO REDUCIDO ======== */
/* SPEC §5.2.2 — fuera todo desplazamiento, parallax, scroll horizontal y
   contador: contenido estatico y completo. sections.css anade sus bloques. */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto !important; }

  *,
  *::before,
  *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  /* Nada oculto por un estado inicial de animacion */
  .js-anim [class*="reveal"],
  .js-anim .split__a,
  .js-anim .split__b{
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    visibility: visible !important;
  }
}