/* ============================================================
   Nostra FC — estilos base
   Todo lo que sigue consume tokens de tokens.css. Ningún valor
   suelto: si hace falta uno nuevo, se agrega ahí, no acá.
   ============================================================ */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--negro-800);
  color: var(--texto);
  font-family: var(--fuente);
  line-height: var(--alto-cuerpo);
}

a {
  color: inherit;
}

main {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---- Navegación ---- */

.cabecera-sitio {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgba(15, 15, 16, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
}

.nav-principal {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: var(--e-4) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-6);
  flex-wrap: wrap;
}

.nav-marca {
  font-family: var(--fuente-display);
  font-size: var(--t-4);
  text-decoration: none;
}

.nav-principal ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-principal a {
  text-decoration: none;
  color: var(--texto-2);
  font-size: var(--t-chico);
  border-bottom: 1px solid transparent;
  padding-bottom: var(--e-1);
  transition: color var(--trans), border-color var(--trans);
}

.nav-principal a:hover,
.nav-principal a.activa {
  color: var(--texto);
  border-color: var(--rosa);
}

.marca-proximamente {
  color: var(--rosa);
  margin-left: var(--e-1);
}

/* ---- Pie ---- */

.pie-sitio {
  border-top: 1px solid var(--linea);
  margin-top: var(--e-32);
  padding: var(--e-10) var(--gutter);
  text-align: center;
  color: var(--texto-3);
  font-size: var(--t-chico);
}

/* ---- Home ---- */

.inicio-hero {
  min-height: 60vh;
  display: grid;
  place-items: center;
  gap: var(--e-4);
  text-align: center;
}

.inicio-hero h1 {
  margin: 0;
  font-family: var(--fuente-display);
  font-size: var(--t-display);
  letter-spacing: var(--track-display);
  color: var(--rosa);
}

.inicio-hero p {
  max-width: var(--ancho-texto);
  margin: 0 auto;
  color: var(--texto-2);
}

/* ---- Hero de página ---- */

.hero-pagina {
  padding: var(--seccion) 0;
  border-bottom: 1px solid var(--linea);
  text-align: center;
}

.hero-pagina h1 {
  margin: 0 0 var(--e-3);
  font-family: var(--fuente-display);
  font-size: var(--t-1);
  letter-spacing: var(--track-titulo);
}

.hero-pagina p {
  max-width: var(--ancho-texto);
  margin: 0 auto;
  color: var(--texto-2);
}

/* ---- Selector de categoría ---- */

.selector-categoria {
  display: flex;
  justify-content: center;
  gap: var(--e-4);
  padding: var(--e-8) 0;
}

.selector-categoria a {
  padding: var(--e-2) var(--e-5);
  border: 1px solid var(--linea);
  border-radius: var(--r-full);
  color: var(--texto-2);
  text-decoration: none;
  font-family: var(--fuente-densa);
  font-weight: var(--peso-fuerte);
  font-size: var(--t-chico);
  text-transform: uppercase;
  letter-spacing: var(--track-abierto);
  transition: color var(--trans), border-color var(--trans), background var(--trans);
}

.selector-categoria a.activa,
.selector-categoria a:hover {
  color: var(--texto);
  border-color: var(--rosa);
  background: var(--rosa-tenue);
}

/* ---- Grilla de jugadoras ---- */

.grupo-posicion {
  padding: var(--e-10) 0;
}

.grupo-posicion h3 {
  margin: 0 0 var(--e-6);
  font-family: var(--fuente-densa);
  font-size: var(--t-micro);
  color: var(--texto-3);
  text-transform: uppercase;
  letter-spacing: var(--track-abierto);
}

.grilla-jugadoras {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e-4);
}

@media (min-width: 800px) {
  .grilla-jugadoras {
    grid-template-columns: repeat(4, 1fr);
  }
}

.tarjeta-jugadora-foto {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--r-2);
  background: var(--negro-700);
}

.tarjeta-jugadora-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.marcador-dorsal {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-family: var(--fuente-densa);
  font-weight: var(--peso-negro);
  font-size: var(--t-display);
  color: var(--rosa-tenue);
}

.cinta-capitana {
  position: absolute;
  top: var(--e-3);
  right: var(--e-3);
  width: var(--e-4);
  height: var(--e-4);
  border-radius: var(--r-full);
  background: var(--rosa);
  box-shadow: var(--sombra-1);
}

.tarjeta-jugadora-datos {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  padding-top: var(--e-3);
}

.tarjeta-jugadora-dorsal {
  font-family: var(--fuente-densa);
  font-weight: var(--peso-fuerte);
  color: var(--texto-3);
}

.tarjeta-jugadora-nombre {
  font-size: var(--t-chico);
}

/* ---- Cuerpo técnico ---- */

.cuerpo-tecnico {
  padding: var(--e-16) 0;
}

.cuerpo-tecnico h2 {
  margin: 0 0 var(--e-6);
  font-family: var(--fuente-display);
  font-size: var(--t-2);
}

.grilla-staff {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e-4);
}

@media (min-width: 800px) {
  .grilla-staff {
    grid-template-columns: repeat(5, 1fr);
  }
}

.tarjeta-staff img,
.marcador-staff {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-full);
  object-fit: cover;
  background: var(--negro-700);
}

.tarjeta-staff-nombre {
  display: block;
  margin-top: var(--e-2);
  font-size: var(--t-chico);
}

.tarjeta-staff-rol {
  display: block;
  font-size: var(--t-micro);
  color: var(--texto-3);
}

/* ---- Estados transversales ---- */

.estado-vacio {
  padding: var(--e-16) 0;
  color: var(--texto-3);
  text-align: center;
}

.pagina-error,
.pagina-proximamente {
  min-height: 50vh;
  display: grid;
  place-items: center;
  gap: var(--e-3);
  text-align: center;
}

.pagina-error h1,
.pagina-proximamente h1 {
  font-family: var(--fuente-display);
  font-size: var(--t-1);
  margin: 0;
}

.pagina-error p,
.pagina-proximamente p {
  max-width: var(--ancho-texto);
  color: var(--texto-2);
  margin: 0;
}