/* ==========================================================================
   VQS — Vision Quan Sport Global
   Sistema visual: MONOLITO EDITORIAL

   Estructura editorial sobre la identidad real de la marca: fondo negro,
   plata cromada y dorado. Filete de 1px, sin sombras y sin esquinas
   redondeadas. La jerarquía la hace la ESCALA, no el color.

   Los colores NO son inventados: se muestrearon del propio isotipo.
     plata  #dadada  → la V y la S
     dorado #c9a460  → la Q y el "GLOBAL"
     fondo  negro

   Tres familias:
     Saira Condensed → display y títulos: cuadrada, del palo del isotipo
     Saira           → cuerpo, misma superfamilia en ancho normal
     Jost            → micro-UI en caja alta con tracking generoso, que es
                       cómo está resuelto "VISION QUAN SPORT" en el logo

   El wordmark repite ese lockup: plata liviana y espaciada, con el QUAN
   en dorado.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&family=Saira+Condensed:wght@500;600;700&family=Saira:wght@400;500&display=swap');


/* ===== TOKENS ============================================================ */
:root {
  --paper:    #0b0c0d;   /* fondo de página */
  --surface:  #131415;   /* pie y superficies alternas */
  --ink:      #ececed;   /* texto principal */
  --muted:    #8d9094;   /* texto secundario */
  --hairline: #26282a;   /* filetes de 1px: el esqueleto del layout */
  --ash:      #1c1e20;   /* bloque donde todavía no hay foto */

  /* Plata cromada del isotipo (la V y la S), muestreada del propio logo. */
  --silver:   #dadada;

  /* Dorado real de la Q y del "GLOBAL", también muestreado del logo. */
  --gold:      #c9a460;
  --gold-soft: #dcbd7d;

  /* Cuadrada y deportiva, del palo del isotipo VQS. */
  --font-display: 'Saira Condensed', 'Oswald', Impact, sans-serif;
  /* Misma superfamilia, ancho normal, para leer parrafos. */
  --font-body:    'Saira', system-ui, -apple-system, sans-serif;
  /* Geometrica y liviana: es la del "VISION QUAN SPORT" del logo,
     siempre en caja alta y con tracking generoso. */
  --font-micro:   'Jost', 'Futura PT', 'Avenir Next', sans-serif;

  --page-max: 1400px;
  --gutter:   60px;
}


/* ===== RESET ============================================================= */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

html { background: var(--paper); }

body {
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* Cielo estrellado: capa fija por detras de todo. El contenido pasa por
   encima al scrollear y el cielo no se mueve.
   Para apagarlo o encenderlo, esta el opacity de abajo. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url('assets/estrellas.png');
  background-repeat: repeat;
  background-size: 900px 900px;
  pointer-events: none;
}

/* Nada tiene esquinas redondeadas en este sistema. */
a, button, input, img, .card-img, .placeholder-img { border-radius: 0; }


/* ===== MICRO-UI ==========================================================
   La firma del sistema: 13px en mayúsculas con tracking generoso. Va en
   navegación, tags, links funcionales y pie. No cambia de tamaño nunca.
   ========================================================================= */
.roster-tab,
.card-tag,
.player-meta,
.search-label,
.btn-load-more,
.btn-outline,
.footer-col ul li a,
.footer-col p,
.footer-bottom p,
.page-hero-sub,
.eyebrow,
.vqs-row dt,
.vqs-links a,
.grid-empty {
  font-family: var(--font-micro);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.062em;
  text-transform: uppercase;
}


/* ===== MASTHEAD ==========================================================
   El logo de VQS es cromado: sobre blanco no se lee (luminancia media
   191/255). Por eso la cabecera es un wordmark tipográfico y el PNG
   cromado se muda al pie, que es negro.
   ========================================================================= */
header {
  background: transparent;
  padding: 26px var(--gutter) 0;
}

.masthead {
  display: block;
  text-decoration: none;
  color: var(--ink);
}

/* El wordmark replica el lockup del isotipo: caja alta, peso liviano,
   tracking generoso y plata cromada, con el QUAN en dorado — exactamente
   cómo está resuelto "VISION QUAN SPORT" en el logo.

   Va SIEMPRE en una sola línea, a cualquier ancho: por eso el cuerpo es
   vw puro y no un clamp (un mínimo en px desbordaría en pantallas
   angostas y aparecería scroll horizontal). Ojo al ajustarlo: medir con
   getBoundingClientRect engaña, porque devuelve la caja y no el texto.
   La comparación buena es scrollWidth contra clientWidth. */
.masthead-name {
  display: block;
  font-family: var(--font-micro);
  font-weight: 300;
  font-size: 4.05vw;
  line-height: 1.12;
  letter-spacing: 0.155em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--silver);
  /* Aire para la cola de la Q, que baja por debajo de la línea base. */
  padding-bottom: 0.12em;
}

.masthead-sub {
  display: block;
  font-family: var(--font-micro);
  font-weight: 500;
  font-size: clamp(9px, 1.15vw, 15px);
  letter-spacing: 0.24em;
  line-height: 1;
  text-transform: uppercase;
  margin-top: 14px;
  padding-bottom: 22px;
}

/* ===== NAVEGACIÓN ===== */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

nav {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 15px 0;
}

/* La navegación es el único texto del sistema que NO queda fijo en 13px:
   son cinco ítems repartidos de borde a borde y en pantallas angostas
   tienen que entrar igual, sin apilarse ni colapsar en un menú. */
nav a,
.nav-search {
  font-family: var(--font-micro);
  font-weight: 500;
  font-size: clamp(8.5px, 1.02vw, 13px);
  line-height: 1.6;
  letter-spacing: 0.062em;
  text-transform: uppercase;
  white-space: nowrap;
}

nav a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.2s;
}
nav a:hover, nav a.active { border-bottom-color: var(--ink); }

.hamburger {
  display: none;   /* el menu va siempre desplegado: no hace falta */
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 12px 0;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--ink);
  transition: transform 0.3s, opacity 0.3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }


/* ===== PORTADA ===========================================================
   La barra superior va FIJA y por encima de las fotos: los slides del
   carrusel pasan por detras del wordmark.

   Al scrollear, el wordmark grande se desvanece y la barra se compacta
   en una franja blanca con la navegacion, pegada arriba.
   ========================================================================= */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  padding: 6px var(--gutter) 0;
  border-bottom: 1px solid transparent;
  transition: background 0.35s ease, border-color 0.35s ease;
}

.masthead { display: block; text-decoration: none; }

/* El recorte para el colapso va en el CONTENEDOR, no en el texto.
   Con overflow:hidden sobre el propio texto y line-height < 1, la línea
   base queda por debajo de la caja y se comen el pie de las letras. */
/* Sin transition a propósito: el desvanecido lo maneja el JS atado al
   scroll, cuadro a cuadro. Una transición acá va siempre corriendo
   detrás del scroll y el efecto se siente elástico en vez de directo. */
.topbar .masthead {
  display: block;
  overflow: hidden;
  max-height: 30vw;
  will-change: opacity, max-height;
}

.topbar .masthead-name {
  display: block;
  font-family: var(--font-micro);
  font-weight: 300;
  font-size: 4.05vw;
  line-height: 1.12;
  letter-spacing: 0.155em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--silver);
  /* La cola de la Q baja ~0,16 em por debajo de la línea base. Con
     line-height ajustado la base cae casi al ras de la caja y la cola
     quedaba cortada. El padding agranda la caja sin mover la base. */
  padding-bottom: 0.2em;
}

/* La unica pincelada de color del sitio: el QUAN va en el dorado del
   isotipo, que es el color real de la Q del logo. */
.mark-gold { font-style: normal; color: var(--gold); }

.topbar .nav-bar { display: block; border: none; }

.topbar nav {
  width: 100%;
  justify-content: space-between;
  gap: 0;
  padding: 4px 0 11px;
}

.topbar nav a,
.topbar .nav-search { color: var(--ink); }

.topbar nav a:hover,
.topbar nav a.active { border-bottom-color: var(--ink); }

.topbar .hamburger { position: absolute; top: 12px; right: var(--gutter); }
.topbar .hamburger span { background: var(--ink); }

/* --- Estado compacto: el wordmark se fue, queda la barra blanca --- */
.topbar.compact { background: var(--paper); border-bottom-color: var(--hairline); }


.topbar.compact nav a,
.topbar.compact .nav-search { color: var(--ink); }

.topbar.compact nav a:hover,
.topbar.compact nav a.active { border-bottom-color: var(--ink); }

.topbar.compact .hamburger { top: 8px; }
.topbar.compact .hamburger span { background: var(--ink); }


/* ===== ESCENARIO DEL HERO ================================================ */
.hero-stage {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  /* Sin fondo propio: las portadas traen el cielo estrellado HORNEADO
     adentro del jpg, y los slides que todavia no tienen foto muestran el
     cielo de la pagina. Si aca hubiera un color, la portada se veria como
     un recuadro mas claro pegado sobre el sitio. */
  background: transparent;
}

.hero-slides { position: absolute; inset: 0; }

.hero-slide {
  position: absolute;
  inset: 0;
  background-color: transparent;
  /* La foto se pasa desde el HTML en la variable --foto. */
  background-image: var(--foto);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  /* El texto va a la izquierda: la figura del jugador ocupa la derecha. */
  justify-content: flex-start;
  opacity: 0;
  /* El cruce va atado al pase automatico, que esta en script.js (PASE).
     Con el pase en 2s, un cruce de 0,9s dejaba la portada casi siempre a
     mitad de camino entre dos fotos y no se llegaba a ver ninguna limpia. */
  transition: opacity 0.55s ease;
  pointer-events: none;
}

.hero-slide.active { opacity: 1; pointer-events: auto; }

/* Pantalla mas alta que ancha (celular parado, tablet parada): entra la
   version vertical. Si el slide no tiene una, sigue con la apaisada.

   Se decide por FORMA y no por ancho a proposito: un celular acostado es
   angosto en pixeles pero apaisado en forma, y le corresponde la foto
   apaisada. */
@media (max-aspect-ratio: 1 / 1) {
  .hero-slide {
    background-image: var(--foto-movil, var(--foto));
    /* ANCLADA ABAJO, no centrada. La vertical es 1200x2850, o sea mas
       angosta en proporcion que cualquier celular: con `cover` siempre le
       sobra ALTO y nunca ancho, asi que el navegador recorta cielo y no
       jugadores. Pero si quedara centrada, ese sobrante se repartiria
       mitad arriba y mitad abajo y les comeria los pies. Anclada al pie,
       todo el recorte sale del cielo de arriba. */
    background-position: center bottom;
  }
}

/* El velo (un degradado negro sobre toda la portada, para que el texto
   blanco se leyera sobre una foto clara) se saco a proposito: oscurecia
   el cielo horneado de la foto y dejaba la portada mas apagada que el
   resto de la pagina, o sea que volvia a marcarse el corte justo donde
   termina. El texto igual se lee, porque cae sobre cielo, no sobre el
   jugador. */

.hero-caption {
  position: relative;
  z-index: 2;
  text-align: left;
  padding: 0 var(--gutter);
  /* Se queda en la mitad izquierda para no pisar al jugador. */
  max-width: 48%;
}

.hero-eyebrow {
  font-family: var(--font-micro);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.062em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.78;
  margin-bottom: 14px;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 4.6vw, 56px);
  line-height: 1;
  letter-spacing: -0.006em;
  text-transform: uppercase;
  color: var(--ink);
}

.hero-sub {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.5;
  color: var(--ink);
  margin-top: 12px;
  opacity: 0.92;
}

/* El "+" se reemplazo por el isotipo: ver .hero-logo mas abajo. */

/* Item BUSCAR de la navegacion: es un boton pero se ve como un link mas. */
.nav-search {
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 0 0 2px;
  cursor: pointer;
  color: var(--ink);
  transition: border-color 0.2s;
}
.nav-search:hover { border-bottom-color: currentColor; }


/* ===== FLECHAS Y PUNTITOS DEL HERO ======================================= */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
  background: none;
  border: none;
  padding: 22px 14px;
  cursor: pointer;
  color: var(--ink);
  font-size: 0;
  transition: opacity 0.2s;
}
.hero-arrow:hover { opacity: 0.6; }

.hero-prev { left: 4px; }
.hero-next { right: 4px; }

.hero-arrow svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.hero-dots {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  z-index: 15;
  display: flex;
  justify-content: center;
  gap: 9px;
}

/* Los puntitos son la unica forma redonda del sistema: son un indicador
   de posicion, no un componente. */
.hero-dot {
  width: 5px;
  height: 5px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0.34;
  cursor: pointer;
  transition: opacity 0.25s;
}
.hero-dot.active { opacity: 1; }

/* Con una sola imagen no hay nada que pasar. */
.hero-stage.hero-single .hero-arrow,
.hero-stage.hero-single .hero-dots { display: none; }


/* ===== ENCABEZADO DE FILA ================================================
   El titulo de cada seccion es un link a su pagina filtrada.
   ========================================================================= */
.row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  text-decoration: none;
  color: var(--ink);
  border-top: 1px solid var(--hairline);
  padding-top: 20px;
  margin-bottom: 40px;
  transition: opacity 0.2s;
}
.row-head:hover { opacity: 0.55; }

/* Adentro del link, el h2 ya no lleva su propio filete ni margen. */
.row-head h2 {
  border-top: none;
  padding-top: 0;
  margin-bottom: 0;
}

.row-head-link {
  flex: 0 0 auto;
  font-family: var(--font-micro);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.062em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}


/* ===== RESPONSIVE DE LA PORTADA ========================================== */
@media (max-width: 768px) {
  .hero-stage { height: 88vh; min-height: 460px; }

  .topbar { padding-top: 10px; }

  .hero-arrow { padding: 16px 6px; }
  .hero-arrow svg { width: 20px; height: 20px; }

  /* En celular el encabezado se apila (titulo arriba, "Ver todos" abajo),
     asi que hace falta mas aire para que las flechas no lo pisen. */
  .row-head { flex-direction: column; gap: 10px; margin-bottom: 50px; }
  .row-head-link { align-self: flex-start; }
}


/* ===== SECCIONES ========================================================= */
.section-professionals {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 100px var(--gutter) 60px;
}

.home-row { margin-bottom: 100px; }
.home-row:last-of-type { margin-bottom: 60px; }

/* Título de sección: escala grande, interlínea colapsada, filete arriba. */
.section-professionals h2,
.home-row h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(38px, 6vw, 90px);
  line-height: 0.82;
  letter-spacing: -0.008em;
  text-transform: uppercase;
  color: var(--ink);
  border-top: 1px solid var(--hairline);
  padding-top: 20px;
  margin-bottom: 40px;
}

/* La fila de entrenadores va deliberadamente más chica. */
.home-row-compact h2 {
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1;
  letter-spacing: -0.004em;
}


/* ===== TARJETA EDITORIAL =================================================
   Sin contenedor, sin borde, sin fondo: la imagen y el texto se apoyan
   directamente sobre el papel.
   ========================================================================= */
.player-card {
  cursor: pointer;
  background: none;
  border: none;
}

.card-frame {
  position: relative;
  margin-bottom: 16px;
}

.card-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--ash);
}

.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: opacity 0.4s ease;
}

/* Sin foto: bloque gris ceniza macizo con las iniciales caladas en blanco.
   No es un "faltante", es una pieza tipográfica válida. */
.placeholder-img,
.card-img.img-failed {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--ash);
}

.placeholder-img::after,
.card-img.img-failed::after {
  content: attr(data-initials);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 5vw, 74px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(236, 237, 237, 0.13);
}

/* Tag de categoría: posición y valor de mercado. */
.card-tag {
  color: var(--ink);
  margin-bottom: 7px;
}

.player-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.3vw, 36px);
  line-height: 1;
  letter-spacing: -0.004em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Descripción editorial en serif: club y liga. */
.player-club {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  margin-top: 8px;
}

.player-meta {
  color: var(--ink);
  opacity: 0.5;
  margin-top: 7px;
}

/* Banderas: van en SVG porque los emoji de bandera no existen en
   Windows. Un filete tenue las despega del fondo oscuro cuando la
   bandera tiene blanco en el borde (Polonia, Uruguay, Suiza). */
.card-flags {
  letter-spacing: 0;
  display: inline-flex;
  gap: 4px;
  vertical-align: -1px;
}

.bandera {
  height: 9px;
  width: auto;
  display: block;
  border: 0.5px solid rgba(236, 237, 237, 0.22);
}

/* En la ficha van un poco mas grandes y con el nombre del pais al lado. */
.vqs-row dd .nac {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.vqs-row dd .nac + .nac { margin-left: 16px; }
.vqs-row dd .bandera { height: 11px; }

/* Al pasar el mouse solo se atenúa la imagen y se subraya el nombre.
   Sin movimiento, sin sombra, sin escala. */
@media (hover: hover) {
  .player-card:hover .card-img img,
  .player-card:hover .placeholder-img { opacity: 0.74; }
  .player-card:hover .player-name { text-decoration: underline; text-underline-offset: 5px; }
}

@media (hover: none) {
  .player-card.touch-active .card-img img,
  .player-card.touch-active .placeholder-img { opacity: 0.74; }
}

.card-hidden { display: none; }


/* ===== GRILLA DE 4 COLUMNAS ============================================== */
.players-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 52px 12px;
  max-width: var(--page-max);
  margin: 0 auto 60px;
}

.grid-empty {
  color: var(--ink);
  opacity: 0.45;
  padding: 40px 0 60px;
}


/* ===== CARRUSEL ==========================================================
   Mismo lenguaje que la grilla: 12px de separación, cero cromo.
   ========================================================================= */
.carousel { position: relative; }

.carousel-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding-bottom: 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.carousel-track::-webkit-scrollbar { display: none; }

.carousel-track > .player-card {
  flex: 0 0 calc((100% - 36px) / 4);
  scroll-snap-align: start;
}

.carousel-compact .carousel-track > .player-card {
  flex: 0 0 calc((100% - 60px) / 6);
}
.carousel-compact .player-name { font-size: clamp(15px, 1.4vw, 21px); }
.carousel-compact .player-club { font-size: 14px; }

/* Flechas: glifos, sin caja ni círculo. Van arriba a la derecha, a la
   altura del título de la fila. */
.carousel-arrow {
  position: absolute;
  top: -62px;
  padding: 0 3px;
  border: none;
  background: none;
  color: var(--ink);
  cursor: pointer;
  font-size: 0;
  transition: opacity 0.2s;
}

.carousel-prev { right: 52px; }
.carousel-next { right: 0; }

.carousel-arrow svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.carousel-arrow:disabled { opacity: 0.16; cursor: default; }
.carousel-static .carousel-arrow { display: none; }


/* ===== ACCIONES ==========================================================
   No existen botones con fondo: toda acción es una palabra subrayada.
   ========================================================================= */
.load-more-wrap {
  max-width: var(--page-max);
  margin: 0 auto 60px;
}

.btn-load-more,
.btn-outline {
  display: inline-block;
  background: none;
  border: none;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  padding: 0 0 2px;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}
.btn-load-more:hover,
.btn-outline:hover { opacity: 0.5; }


/* ===== BUSCADOR ========================================================== */
.search-section {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.search-label { color: var(--ink); }

.search-btn {
  background: none;
  border: none;
  border-bottom: 1px solid var(--ink);
  padding: 0 0 3px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: opacity 0.2s;
}
.search-btn:hover { opacity: 0.5; }
.search-btn svg {
  width: 15px;
  height: 15px;
  stroke: var(--ink);
  fill: none;
  stroke-width: 1.4;
}


/* ===== SOLAPAS =========================================================== */
.roster-tabs {
  display: flex;
  gap: 28px;
  padding: 0 var(--gutter) 36px;
  max-width: var(--page-max);
  margin: 0 auto;
}

.roster-tab {
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--ink);
  opacity: 0.42;
  padding: 0 0 3px;
  cursor: pointer;
  transition: opacity 0.2s, border-color 0.2s;
}
.roster-tab:hover { opacity: 1; }
.roster-tab.active { opacity: 1; border-bottom-color: var(--ink); }


/* ===== FRANJA EDITORIAL ==================================================
   Reemplaza los numerales 01 / 02 / 03: entrada en serif grande y tres
   afirmaciones separadas por filetes.
   ========================================================================= */
.section-build {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 20px var(--gutter) 100px;
}

.eyebrow {
  color: var(--ink);
  opacity: 0.5;
  margin-bottom: 24px;
}

.section-build h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(26px, 4vw, 46px);
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  max-width: 22ch;
  margin-bottom: 64px;
}

.creed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  border-top: 1px solid var(--hairline);
}

.creed p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  padding: 24px 24px 0 0;
}

.creed p + p {
  border-left: 1px solid var(--hairline);
  padding-left: 24px;
}


/* ===== BANDA A SANGRE ====================================================
   Interrupción fotográfica que corta el ritmo de la grilla. Hoy es un
   bloque gris ceniza esperando la foto de estadio.
   ========================================================================= */
.section-about {
  position: relative;
  width: 100%;
  min-height: 64vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.section-about-bg {
  position: absolute;
  inset: 0;
  background: var(--ash);
  /* Cuando llegue la foto: background-image: url('assets/images/estadio.jpg'); */
  background-size: cover;
  background-position: center;
}

.section-about-content {
  position: relative;
  z-index: 2;
  padding: 0 var(--gutter) 60px;
  max-width: 980px;
}

.section-about-content h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 5.2vw, 78px);
  line-height: 0.86;
  letter-spacing: -0.008em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 22px;
}

.section-about-content p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 30px;
}

.section-about .btn-outline {
  color: var(--ink);
  border-bottom-color: var(--ink);
}


/* ===== PÁGINAS INTERNAS ==================================================
   El wrapper .starfield-page quedó del diseño anterior (fondo de estrellas
   sobre negro). En tema claro no aplica: ahora es simplemente papel.
   ========================================================================= */
/* Las paginas internas dejan ver el cielo de fondo. */
.starfield-page { background: transparent; }
.starfield-content { max-width: var(--page-max); margin: 0 auto; }

.page-hero {
  padding: 80px var(--gutter) 44px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 46px;
}

.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(52px, 11vw, 140px);
  line-height: 0.78;
  letter-spacing: -0.008em;
  text-transform: uppercase;
  color: var(--ink);
}

.page-hero-sub {
  color: var(--ink);
  opacity: 0.5;
  margin-top: 20px;
}

.page-hero .search-label { margin-top: 22px; display: inline-block; }
.page-hero .search-btn { margin-left: 12px; }

.players-page-section { padding: 0 var(--gutter) 100px; }


/* ===== FICHA (modal) =====================================================
   Una hoja de papel sobre el fondo. Filete de 1px, sin sombra ni radio.
   ========================================================================= */
.vqs-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 600;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.vqs-modal.active { display: flex; }

.vqs-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
}

.vqs-modal-box {
  position: relative;
  z-index: 1;
  width: min(94vw, 940px);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--hairline);
  padding: 48px;
}

.vqs-modal-close {
  position: absolute;
  top: 14px;
  right: 20px;
  background: none;
  border: none;
  color: var(--ink);
  font-family: var(--font-micro);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.2s;
}
.vqs-modal-close:hover { opacity: 0.5; }

.vqs-modal-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 44px;
  align-items: start;
}

.vqs-modal-photo .card-frame { margin-bottom: 0; }

.vqs-modal-info h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 0.84;
  letter-spacing: -0.006em;
  text-transform: uppercase;
  color: var(--ink);
}

.vqs-modal-pos {
  font-family: var(--font-micro);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.062em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.5;
  margin-top: 16px;
}

.vqs-data {
  margin-top: 34px;
  border-top: 1px solid var(--hairline);
}

.vqs-row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hairline);
}

.vqs-row dt { color: var(--muted); }

.vqs-row dd {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}

.vqs-carac { margin-top: 42px; }

.vqs-carac h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 25px;
  line-height: 1;
  letter-spacing: -0.004em;
  text-transform: uppercase;
  color: var(--ink);
}

.vqs-perfil {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  margin-top: 16px;
}

.vqs-links { margin-top: 24px; display: flex; gap: 24px; flex-wrap: wrap; }

.vqs-links a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: opacity 0.2s;
}
.vqs-links a:hover { opacity: 0.5; }


/* ===== BUSCADOR A PANTALLA COMPLETA ====================================== */
.search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 500;
  align-items: center;
  justify-content: center;
}
.search-overlay.active { display: flex; }

.search-box {
  display: flex;
  align-items: center;
  gap: 20px;
  width: min(92vw, 1100px);
  border-bottom: 1px solid var(--ink);
}

.search-box input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 7vw, 90px);
  line-height: 1;
  letter-spacing: -0.008em;
  text-transform: uppercase;
  padding: 10px 0;
  outline: none;
}
.search-box input::placeholder { color: var(--ink); opacity: 0.16; }

.search-close {
  background: none;
  border: none;
  color: var(--ink);
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.2s;
}
.search-close:hover { opacity: 0.5; }


/* ===== PIE NEGRO =========================================================
   La otra superficie no blanca. Acá el logo cromado sí se lee, así que
   es su lugar natural.
   ========================================================================= */
footer {
  background: var(--surface);
  color: var(--ink);
  padding: 80px var(--gutter) 40px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  max-width: var(--page-max);
  margin: 0 auto 70px;
}

.footer-col h4 {
  font-family: var(--font-micro);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.062em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.42;
  margin-bottom: 18px;
}

.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 7px; }

.footer-col ul li a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.footer-col ul li a:hover { border-bottom-color: var(--ink); }

.footer-col p { color: var(--muted); }

.social-links { display: flex; gap: 20px; margin-top: 2px; }
.social-links a { color: var(--ink); display: flex; transition: opacity 0.2s; }
.social-links a:hover { opacity: 0.5; }
.social-links svg { width: 19px; height: 19px; }

/* Logo cromado sobre negro: acá recupera todo su degradé metálico. */
.footer-logo {
  max-width: var(--page-max);
  margin: 0 auto 36px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.footer-logo img { height: 52px; width: auto; }

.footer-bottom { max-width: var(--page-max); margin: 0 auto; }
.footer-bottom p { color: var(--muted); opacity: 0.7; }


/* ===== RESPONSIVE ======================================================== */
@media (max-width: 1024px) {
  :root { --gutter: 32px; }

  .players-grid { grid-template-columns: repeat(3, 1fr); }
  .carousel-track > .player-card { flex: 0 0 calc((100% - 24px) / 3); }
  .carousel-compact .carousel-track > .player-card { flex: 0 0 calc((100% - 48px) / 5); }
  .vqs-modal-grid { grid-template-columns: 230px 1fr; gap: 32px; }
}

@media (max-width: 768px) {
  :root { --gutter: 20px; }

  header { padding-top: 18px; }

  /* El cuerpo del wordmark NO se toca acá: 6.4vw ya escala solo y es el
     único valor que lo mantiene en una línea sin recortarse. Subirlo
     acá era lo que lo cortaba en pantallas angostas. */
  .masthead-sub { font-size: 9px; letter-spacing: 0.18em; margin-top: 10px; padding-bottom: 16px; }

  .section-professionals { padding: 56px var(--gutter) 40px; }
  .home-row { margin-bottom: 64px; }

  .players-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 12px; }
  .carousel-track > .player-card { flex: 0 0 calc((100% - 12px) / 2); }
  .carousel-compact .carousel-track > .player-card { flex: 0 0 calc((100% - 24px) / 3); }

  /* En celular se arrastra con el dedo: las flechas sobran. */
  .carousel-arrow { display: none; }

  .roster-tabs { gap: 18px; flex-wrap: wrap; }

  .creed { grid-template-columns: 1fr; gap: 0; border-top: none; }
  .creed p { padding: 20px 0; border-top: 1px solid var(--hairline); }
  .creed p + p { border-left: none; padding-left: 0; }

  .section-build { padding: 10px var(--gutter) 60px; }
  .page-hero { padding: 44px var(--gutter) 28px; }
  .players-page-section { padding: 0 var(--gutter) 60px; }

  .vqs-modal { padding: 0; }
  .vqs-modal-box {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    padding: 56px 20px 40px;
    border: none;
  }
  .vqs-modal-grid { grid-template-columns: 1fr; gap: 26px; }
  .vqs-modal-photo { max-width: 240px; }
  .vqs-row { grid-template-columns: 1fr; gap: 3px; }

  footer { padding: 56px var(--gutter) 32px; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; margin-bottom: 50px; }
}


/* ==========================================================================
   SELECTOR DE IDIOMA
   Las dos banderas juntas al final del menu. La del idioma activo va a
   plena opacidad; la otra apagada, para que se lea de un vistazo cual
   esta puesto.
   ========================================================================== */
.idioma {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

.idioma-btn {
  background: none;
  border: none;
  padding: 3px;
  cursor: pointer;
  display: flex;
  line-height: 0;
  opacity: 0.34;
  transition: opacity 0.2s;
  border-bottom: 1px solid transparent;
}

.idioma-btn:hover { opacity: 0.75; }

.idioma-btn.activo {
  opacity: 1;
  border-bottom-color: currentColor;
}

.idioma-btn .bandera {
  height: 12px;
  width: auto;
}

@media (max-width: 768px) {
  .idioma { gap: 5px; }
  .idioma-btn .bandera { height: 10px; }
}


/* ==========================================================================
   PAGINA DE STAFF
   Hace tambien de "Quienes somos": el link del pie y el boton de la
   portada llevan aca.
   ========================================================================== */
.staff-intro {
  max-width: 62ch;
  padding: 0 var(--gutter);
  margin: 0 0 56px;
}

.staff-intro p {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.9vw, 23px);
  line-height: 1.55;
  color: var(--ink);
}

.staff-titulo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1;
  letter-spacing: -0.004em;
  text-transform: uppercase;
  color: var(--ink);
  border-top: 1px solid var(--hairline);
  padding: 20px var(--gutter) 0;
  margin-bottom: 34px;
}

@media (max-width: 768px) {
  .staff-intro { margin-bottom: 38px; }
}


/* ==========================================================================
   ACENTOS EN DORADO
   --------------------------------------------------------------------------
   El dorado es el color de la Q del isotipo y hasta ahora solo vivia en el
   "QUAN" del wordmark. Se extiende como ACENTO DE INTERACCION: aparece
   cuando algo responde al mouse o marca donde esta parado el visitante.

   Regla: el dorado nunca es el estado normal de nada. Solo hover, foco,
   estado activo y las pistas de navegacion. Si estuviera siempre, dejaria
   de llamar la atencion.
   ========================================================================== */

/* ===== Subrayados: todo lo que responde al mouse ===== */
nav a:hover,
.footer-col ul li a:hover,
.vqs-links a:hover,
.idioma-btn:hover {
  border-bottom-color: var(--gold);
  color: var(--gold-soft);
}

nav a.active,
.roster-tab.active {
  border-bottom-color: var(--gold);
}

.roster-tab:hover { color: var(--gold-soft); }

.btn-load-more:hover,
.btn-outline:hover,
.row-head-link {
  transition: color 0.2s, border-color 0.2s, opacity 0.2s;
}

.btn-load-more:hover,
.btn-outline:hover {
  opacity: 1;
  color: var(--gold-soft);
  border-bottom-color: var(--gold);
}

.search-btn:hover { opacity: 1; border-bottom-color: var(--gold); }
.search-btn:hover svg { stroke: var(--gold); }

.search-close:hover { opacity: 1; color: var(--gold); }
.vqs-modal-close:hover { opacity: 1; color: var(--gold); }

/* La bandera del idioma activo lleva su filete dorado. */
.idioma-btn.activo { border-bottom-color: var(--gold); }


/* ===== Encabezado de fila: filete dorado de arranque ===== */
.row-head { position: relative; }

.row-head::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 46px;
  height: 1px;
  background: var(--gold);
}

.row-head:hover { opacity: 1; }
.row-head:hover h2 { color: var(--gold-soft); }
.row-head:hover .row-head-link {
  color: var(--gold-soft);
  border-bottom-color: var(--gold);
}

/* Mismo filete de arranque en los titulos de seccion sueltos. */
.staff-titulo { position: relative; }
.staff-titulo::before {
  content: '';
  position: absolute;
  top: -1px;
  left: var(--gutter);
  width: 46px;
  height: 1px;
  background: var(--gold);
}


/* ===== Tarjetas: el dorado marca cual estas mirando ===== */
@media (hover: hover) {
  .player-card:hover .card-tag { color: var(--gold); }

  .player-card:hover .player-name {
    color: var(--gold-soft);
    text-decoration-color: var(--gold);
  }

  /* Filete dorado al pie de la foto. */
  .player-card .card-frame::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
    pointer-events: none;
  }
  .player-card:hover .card-frame::after { transform: scaleX(1); }
}

@media (hover: none) {
  .player-card.touch-active .card-tag { color: var(--gold); }
  .player-card.touch-active .player-name { color: var(--gold-soft); }
}


/* ===== Portada ===== */

.hero-dot.active { background: var(--gold); opacity: 1; }


/* ==========================================================================
   PISTAS DE DESLIZAMIENTO
   --------------------------------------------------------------------------
   Las flechas solas no alcanzaban: en escritorio pasaban desapercibidas y
   en celular ni estaban. Ahora hay tres senales, de menos a mas insistente:

     1. Las flechas se ven SIEMPRE, tambien en celular.
     2. Un degrade dorado en el borde derecho mientras quede algo por ver.
     3. Una pista "DESLIZA" que aparece solo en pantallas tactiles y se va
        apenas la persona desliza por primera vez.
   ========================================================================== */

/* Las flechas son el control principal de la fila: van doradas de
   entrada, grandes y de trazo grueso. Antes eran gris fino y pasaban
   completamente desapercibidas. */
.carousel-arrow {
  color: var(--gold);
  opacity: 1;
  padding: 6px 4px;
  transition: color 0.2s, opacity 0.2s, transform 0.2s;
}

.carousel-arrow svg {
  width: 30px;
  height: 30px;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.carousel-arrow:hover:not(:disabled) {
  color: var(--gold-soft);
  transform: scale(1.12);
}

/* Cuando no hay para donde ir, se apaga pero no desaparece: sigue
   contando que el control existe. */
.carousel-arrow:disabled { opacity: 0.2; }

/* Degrade del borde: avisa que la fila sigue. */
.carousel::after {
  content: '';
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 8px;
  width: 72px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: linear-gradient(to right,
    rgba(11, 12, 13, 0) 0%,
    rgba(11, 12, 13, 0.85) 62%,
    var(--paper) 100%);
}

.carousel.hay-mas::after { opacity: 1; }


/* La pista tactil. */
.carousel-pista {
  position: absolute;
  right: 0;
  bottom: -24px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-micro);
  font-weight: 500;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  pointer-events: none;
  transition: opacity 0.45s ease;
}

.carousel-pista svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: pista-empuja 1.9s ease-in-out infinite;
}

.carousel-pista.oculta { opacity: 0; }

@keyframes pista-empuja {
  0%, 100% { transform: translateX(0);   opacity: 0.6; }
  50%      { transform: translateX(6px); opacity: 1;   }
}

/* Quien pidio menos movimiento ve la pista quieta. */
@media (prefers-reduced-motion: reduce) {
  .carousel-pista svg { animation: none; opacity: 1; }
}

/* En celular las flechas se muestran igual, mas chicas y arrimadas. */
@media (max-width: 768px) {
  .carousel-arrow { display: block; padding: 4px 2px; top: -42px; }
  .carousel-arrow svg { width: 24px; height: 24px; stroke-width: 2.4; }
  .carousel-prev { right: 42px; }
  .carousel-next { right: 0; }

  .carousel::after { width: 46px; }
  .carousel-pista { bottom: -20px; font-size: 10px; }

  .staff-titulo::before { left: var(--gutter); }
}


/* ==========================================================================
   MENU EN PANTALLAS ANGOSTAS
   Con el toggle de idioma son SEIS elementos en la misma linea. A 375px
   la separacion de 12px los empujaba fuera del borde. Se aprietan las
   separaciones en vez de achicar mas la tipografia, que ya esta al minimo.
   ========================================================================== */
@media (max-width: 768px) {
  nav { gap: 5px; }

  .idioma { gap: 4px; }
  .idioma-btn { padding: 2px 1px; }
  .idioma-btn .bandera { height: 9px; }
}


/* ==========================================================================
   EPIGRAFE DE LA PORTADA EN PANTALLAS VERTICALES
   --------------------------------------------------------------------------
   Va al final del archivo a proposito: la regla base de .hero-caption
   esta mas abajo que el bloque de la portada, asi que una media query
   escrita alla arriba quedaba pisada por ella.

   En apaisado el jugador ocupa la derecha y el texto va a la izquierda.
   En vertical el montaje es otro (jugador abajo), asi que el texto se
   centra y se ancla arriba, donde el cielo esta despejado.
   ========================================================================== */
@media (max-aspect-ratio: 1 / 1) {
  .hero-slide {
    align-items: flex-start;
    justify-content: center;
  }

  .hero-caption {
    text-align: center;
    max-width: 100%;
    padding-top: 11vh;
  }
}


/* ==========================================================================
   ISOTIPO EN LA PORTADA + ALTERNANCIA DE LADO
   --------------------------------------------------------------------------
   El isotipo va en el SITIO y no quemado en la foto. Asi:
     - se puede controlar su tamano y su brillo desde aca
     - acompana al texto cuando el epigrafe cambia de lado
     - nunca lo corta el recorte en celular
     - las fotos quedan limpias, sin depender de que el generador lo
       coloque bien cinco veces

   Para pasar un slide al lado derecho alcanza con agregarle el atributo
   en el HTML:
       <div class="hero-slide" data-lado="derecha" style="--foto: ...">
   Ese slide necesita una foto con el jugador a la IZQUIERDA.
   ========================================================================== */

.hero-logo {
  display: block;
  /* El isotipo es muy apaisado (4,2:1), asi que a poca altura se
     lee chico. Va bastante mas grande que un logo cuadrado. */
  height: clamp(38px, 5vw, 82px);
  width: auto;
  margin-top: 26px;
  /* Sin resplandor: el cromo del isotipo ya se despega del negro. */
  opacity: 0.92;
}

/* ===== Slides con el texto a la derecha ===== */
.hero-slide[data-lado="derecha"] { justify-content: flex-end; }

.hero-slide[data-lado="derecha"] .hero-caption { text-align: right; }

.hero-slide[data-lado="derecha"] .hero-logo { margin-left: auto; }

/* En vertical no hay alternancia: el texto va siempre centrado arriba,
   porque la figura ocupa todo el ancho abajo. */
@media (max-aspect-ratio: 1 / 1) {
  .hero-slide[data-lado="derecha"] { justify-content: center; }
  .hero-slide[data-lado="derecha"] .hero-caption { text-align: center; }

  .hero-logo {
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-slide[data-lado="derecha"] .hero-logo { margin-left: auto; }
}