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

   Papel blanco, tinta negra, filete gris de 1px. Sin color, sin sombras,
   sin esquinas redondeadas. La jerarquía la hace la ESCALA tipográfica,
   nunca el peso ni el color. Tres familias y nada más:

     Oswald             → display y títulos (equivalente a DIN)
     Cormorant Garamond → cuerpo editorial (equivalente a Cochin)
     Jost               → navegación, tags y micro-UI: siempre 13px en
                          mayúsculas con tracking 0.062em

   El ADN de VQS entra por contraste: las dos únicas superficies que no
   son blancas son NEGRAS — el hero con el cromo 3D y el pie. El choque
   papel/cromo es la firma de la marca.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Jost:wght@400;500&family=Oswald:wght@200;300;400&display=swap');


/* ===== TOKENS ============================================================ */
:root {
  --paper:    #ffffff;   /* fondo de página y de tarjeta */
  --ink:      #000000;   /* todo el texto */
  --hairline: #e5e7eb;   /* filetes de 1px: el esqueleto del layout */
  --ash:      #a9a9a9;   /* relleno donde todavía no hay foto */

  --font-display: 'Oswald', 'Barlow Condensed', Impact, sans-serif;
  --font-body:    'Cormorant Garamond', 'Hoefler Text', Georgia, serif;
  --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; }

body {
  background: var(--paper);
  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; }

/* 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.
   ========================================================================= */
nav a,
.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: var(--paper);
  padding: 26px var(--gutter) 0;
}

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

.masthead-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 9.2vw, 124px);
  line-height: 0.80;
  letter-spacing: -0.008em;
  text-transform: uppercase;
  white-space: nowrap;
}

.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;
  gap: clamp(20px, 5vw, 72px);
  align-items: center;
  padding: 15px 0;
}

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;
  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); }


/* ===== HERO ==============================================================
   Portada a sangre: una sola fotografía editorial ocupando el viewport,
   con el texto flotando encima. Sin caja, sin fondo, sin padding propio.
   La foto ES la portada, no una decoración alrededor del texto.

   Mientras no haya imagen queda el bloque gris ceniza del sistema.
   Para cargarla, una línea en index.html:
       <div class="hero-media" style="background-image:url('assets/hero.jpg')">
   Ideal: foto apaisada de jugador, recortada bien ancha (2000x1200 o más),
   con aire a la izquierda para que el texto no le tape la cara.
   ========================================================================= */
.hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 82vh;
  min-height: 460px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ash);
}

.hero-media {
  position: absolute;
  inset: 0;
  background-color: var(--ash);
  background-size: cover;
  background-position: center top;
}

/* Velo inferior: garantiza que el texto se lea sobre cualquier foto
   (y también sobre el gris del placeholder). */
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.15) 42%, transparent 70%);
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 var(--gutter) 58px;
  max-width: 1100px;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 6.6vw, 100px);
  line-height: 0.80;
  letter-spacing: -0.008em;
  text-transform: uppercase;
  color: var(--paper);
}

.hero-sub {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.5;
  color: var(--paper);
  margin-top: 20px;
  max-width: 46ch;
}


/* ===== 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: 400;
  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: 400;
  font-size: clamp(40px, 5vw, 74px);
  line-height: 1;
  letter-spacing: -0.006em;
  color: var(--paper);
}

/* 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: 400;
  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;
}

.card-flags { letter-spacing: 0; }

/* 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: -56px;
  padding: 0 3px;
  border: none;
  background: none;
  color: var(--ink);
  cursor: pointer;
  font-size: 0;
  transition: opacity 0.2s;
}

.carousel-prev { right: 34px; }
.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: 100vw;
  margin-left: calc(50% - 50vw);
  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: 400;
  font-size: clamp(30px, 5.2vw, 78px);
  line-height: 0.86;
  letter-spacing: -0.008em;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 22px;
}

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

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


/* ===== 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.
   ========================================================================= */
.starfield-page { background: var(--paper); }
.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: 400;
  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.55);
}

.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: 400;
  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;
}

/* El valor de mercado como lead serif sobredimensionado. */
.vqs-modal-value {
  font-family: var(--font-body);
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.2;
  color: var(--ink);
  margin-top: 12px;
}

.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(--ink); opacity: 0.45; }

.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: 400;
  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: 400;
  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(--ink);
  color: var(--paper);
  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(--paper);
  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(--paper);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.footer-col ul li a:hover { border-bottom-color: var(--paper); }

.footer-col p { color: var(--paper); opacity: 0.72; }

.social-links { display: flex; gap: 20px; margin-top: 2px; }
.social-links a { color: var(--paper); 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: 44px; width: auto; }

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


/* ===== 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; }

  .masthead-name { font-size: 11.4vw; }
  .masthead-sub { font-size: 9px; letter-spacing: 0.18em; margin-top: 10px; padding-bottom: 16px; }

  .hamburger { display: flex; }

  nav {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 20px 0 26px;
    width: 100%;
    border-top: 1px solid var(--hairline);
  }
  nav.open { display: flex; }

  .nav-bar { flex-wrap: wrap; justify-content: flex-end; }

  .hero { height: 56vh; min-height: 340px; }

  .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; }
}