/* ═══════════════════════════════════════════════════════════════════════
   HOME · nueva distribución sobre la base de la landing original.
   Esta hoja SOLO añade lo nuevo (píldora, menú, las seis puertas, redes).
   Todo lo demás (fondo, hero, vidrio, preloader, dock) viene de
   main.css, que es lo que daba el encanto.
   Marca: solo el isotipo, el círculo con el iD y la playera.
   Colores: el azul y el verde del logo, por variable, como manda main.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Lo que el mockup no lleva ───────────────────────────────────── */
/* Ni la hoja del próximo partido, ni su píldora, ni el dock flotante: el
   inicio es el isotipo, el lema, las seis puertas y las redes. Todo eso
   sigue en el layout para las demás páginas; aquí se apaga con CSS. */
body .mn-sheet, body .mn-overlay, body .mn-mini, body .sid-dock { display: none !important; }

/* ─── Selector de idioma, como el mockup ──────────────────────────── */
/* Píldora oscura translúcida; el idioma activo en blanco con texto oscuro,
   el otro en gris. Va con body delante para ganarle a main.css. */
body .language-selector { padding: 6px; border-radius: 999px; background: rgba(8,12,24,0.55); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 6px 24px rgba(0,0,0,0.35); gap: 4px; }
body .lang-btn { padding: 8px 16px; border-radius: 999px; color: rgba(255,255,255,0.66); font-weight: 700; }
body .lang-btn:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); }
body .lang-btn.active { background: #fff; color: #0b1020; box-shadow: 0 2px 10px rgba(0,0,0,0.25); }
body .lang-btn:not(.active) .lang-flag { filter: grayscale(1) opacity(0.6); }
/* En celular, más chico: banderas de 15 px y píldora compacta. */
@media (max-width: 768px) {
  body .language-selector { padding: 4px; }
  body .lang-btn { padding: 5px 9px; }
  body .lang-flag { font-size: 15px; }
}

/* ─── Hero: el home es el menú ────────────────────────────────────── */
/* El hero es la primera pantalla entera y lleva dentro todo: la marca, el
   lema, las seis puertas y las redes. Así no hay que bajar para elegir. */
.hero-logo-text img { filter: drop-shadow(0 10px 30px rgba(0,0,0,0.5)); }
.hero-section { height: auto; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 0; }
.hero-logo-text { margin-bottom: 14px; }
/* El isotipo escala con la pantalla, no se queda chico en un monitor. */
.hero-logo-text img { width: clamp(84px, 5vw, 128px); height: auto; }
/* Calibrado contra el mockup midiendo cielo, gradas y pasto: la foto se
   levanta (brillo 1.25, un poco de sepia para que la gente de las gradas
   se vea cálida) y encima va un velo neutro, denso en el cielo y en el
   pasto y ligero a la altura de las gradas. */
.hero-video-container::after { background: linear-gradient(180deg, rgba(18,20,24,0.65) 0%, rgba(18,20,24,0.30) 45%, rgba(18,20,24,0.74) 100%); }
.hero-image { filter: saturate(0.7) brightness(1.25) sepia(0.2); }
/* El tamaño del lema en celular ya está calibrado en main.css (dos líneas
   exactas); sólo se toca en escritorio. */
@media (min-width: 1025px) { .hero-tagline { font-size: clamp(1.6rem, 2vw, 2.6rem); margin-bottom: 0; line-height: 1.35; } }
/* El destacado del slogan: blanco y Black Italic con su archivo propio. Los
   iconos de las puertas también van en blanco: el verde no es el color de
   SOCCER iD en el home y cada sección ya trae el suyo en su barra. */
@font-face { font-family: "Raleway"; src: url('/assets/fonts/raleway-900-italic.ttf?v=mvvwrggw') format("truetype"); font-weight: 900; font-style: italic; font-display: swap; }
.hero-section .hero-tagline em { font-style: italic; font-weight: 900; color: #fff; }

/* ─── La columna de la primera pantalla ───────────────────────────── */
/* Tres piezas en vertical: cabecera (marca y lema), las seis puertas y las
   redes. La cabecera y las redes miden lo suyo; las puertas se quedan con
   todo lo que sobre, hasta su tope. Si aun así sobra espacio —un monitor
   alto—, `justify-content: center` lo parte por igual arriba y abajo en vez
   de dejar un hueco en medio. Nada de alturas fijas ni de colgar las
   puertas del borde de abajo con un margen negativo: eso es lo que abría
   el hueco al crecer la pantalla. */
.hero-content { flex: 1 1 auto; max-width: none; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(20px, 3.2vh, 46px); padding: clamp(26px, 4.5vh, 60px) clamp(24px, 3vw, 56px) clamp(22px, 3.5vh, 48px); }
.hero-cabecera { flex: 0 0 auto; }

/* ─── Las seis puertas ────────────────────────────────────────────── */
/* `flex: 1 1 0` con `min-height: 0`: crecen y se encogen con la pantalla.
   El tope evita que en un monitor muy alto se vuelvan paneles enormes. */
/* El texto de las cards va a la izquierda: la columna del hero centra el
   lema y las puertas heredaban ese centrado. */
.puertas { text-align: left; position: relative; z-index: 4; flex: 1 1 0; min-height: 0; max-height: clamp(340px, 58vh, 720px); display: flex; gap: 12px; width: min(100%, 1920px, max(1560px, 70vw)); margin: 0; }
.puerta {
  position: relative; flex: 1; min-width: 0; border-radius: 22px; overflow: hidden; isolation: isolate;
  text-decoration: none; color: #fff;
  background: rgba(10, 10, 26, 0.42); border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
  opacity: 0; transform: translateY(26px); animation: puertaEntra .7s cubic-bezier(.34,1.56,.64,1) forwards; animation-delay: calc(var(--i) * 80ms + 200ms);
  transition: flex .55s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s;
}
@keyframes puertaEntra { to { opacity: 1; transform: none; } }
/* La foto va a plena luz, como en el mockup; sólo se oscurece el pie,
   donde va el texto. */
.puerta::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--foto) center / cover no-repeat; opacity: .92; transform: scale(1.04); transition: opacity .5s, transform .9s cubic-bezier(.2,.8,.2,1); }

/* ─── Encuadre de cada foto (entrega del 28/10/2026) ──────────────── */
/* Las seis son cuadradas. La tarjeta cambia de forma según la pantalla y
   el recorte se piensa en cada caso, medido en capturas:
     escritorio  alta y angosta (216×522 a 1440): se ve de arriba abajo y
                 se recortan los lados → manda la x del protagonista.
     tableta     ancha y baja (491×139 a 1024, 363×224 a 768): se recorta
                 arriba y abajo → manda la y de las caras.
     teléfono    casi cuadrada, y el texto tapa la mitad de abajo → en Tour
                 y Nosotros la foto se acerca y se sube para que las caras
                 queden en la parte libre, sin dejar a nadie fuera. */
.puerta--tour::before      { background-position: 52% 50%; }  /* el duelo América–Nacional */
.puerta--travel::before    { background-position: 50% 50%; }  /* estadio simétrico */
.puerta--legends::before   { background-position: 52% 50%; }  /* Figo */
.puerta--podcast::before   { background-position: 50% 50%; }  /* letrero iD y sillón central */
.puerta--opiniones::before { background-position: 64% 50%; }  /* el teléfono con TUDN */
.puerta--nosotros::before  { background-position: 48% 50%; }  /* el grupo, centrado */
.puerta::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(5,4,21,0.92) 0%, rgba(5,4,21,0.70) 22%, rgba(5,4,21,0.15) 50%, rgba(5,4,21,0) 100%); }
/* Al pasar, la card crece y se le marca el borde. Nada de halo de color:
   antes el azul de marca pintaba el borde y una sombra de 50 px, y era lo
   último que quedaba del azul en el inicio. El realce lo da el borde claro
   y una sombra más honda, en negro, como en las secciones. */
.puerta:hover { flex: 2.4; border-color: rgba(255,255,255,0.55); box-shadow: 0 18px 54px rgba(0,0,0,0.55); }
.puerta:hover::before { opacity: 1; transform: none; }
.puerta__icono {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(8,12,24,0.55); border: 1px solid rgba(255,255,255,0.3); color: #fff;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.puerta__icono svg { width: 20px; height: 20px; }
.puerta__cuerpo { position: absolute; left: 20px; right: 20px; bottom: 22px; z-index: 2; display: flex; flex-direction: column; gap: 0; }
.puerta__nombre { font-size: clamp(1.3rem, 1.8vw, 1.8rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.05; white-space: nowrap; }
.puerta__barra { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--barra, var(--brand-lime)); margin: 8px 0 10px; }
/* Dos líneas reservadas siempre, para que los seis títulos queden a la
   misma altura aunque el lema sea de una sola línea. */
.puerta__linea { font-size: 14px; line-height: 1.3; min-height: 2.6em; color: rgba(255,255,255,0.88); max-width: 300px; }
/* En escritorio se reservan TRES renglones: a 1280 px, y al pasar el cursor
   (la tarjeta crece y las demás se angostan), unas descripciones caben en
   dos y otras en tres, y los títulos quedaban a alturas distintas. */
@media (min-width: 1025px) { .puerta__linea { min-height: 3.9em; } }

/* ─── Redes ───────────────────────────────────────────────────────── */
/* Seis círculos centrados bajo las puertas, como en el mockup. Chicos y
   discretos: son un pie, no un bloque. Miden lo suyo y el hueco que los
   separa de las puertas lo pone el `gap` de la columna. */
.redes-v2 { position: relative; z-index: 4; flex: 0 0 auto; height: auto; padding: 0; }
.redes-v2 .section-header { display: none; }
.redes-v2__grid { display: flex; justify-content: center; gap: 14px; }
.redes-v2__chip {
  width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.85); text-decoration: none; border: 1.5px solid rgba(255,255,255,0.6); background: rgba(8,12,24,0.35);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform .2s, background .2s, border-color .2s, color .2s;
}
.redes-v2__chip svg { width: 16px; height: 16px; }
.redes-v2__chip span, .redes-v2__chip small { display: none; }
.redes-v2__chip:hover { transform: translateY(-3px); background: #fff; border-color: #fff; color: #0b1020; }
/* ─── Pie ────────────────────────────────────────── */
/* Una sola columna centrada: logo completo, enlaces y aviso, en ese orden. */
/* Los grises del pie los subió el auditor de contraste: a 13px la regla de
   la casa pide 7.0 y con 0.6 de blanco daban 6.68. Y `.footer-content a`
   ganaba por especificidad a `.footer-link`, así que los enlaces caían al
   gris del contenedor en vez de usar el suyo; por eso ya no está. */
.footer-content { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; max-width: 1200px; margin: 0 auto; padding: 28px 20px 32px; color: rgba(255,255,255,0.68); font-size: 13px; }
/* El ancho manda y la altura va en auto: el archivo es 1200×271 y los
   atributos del <img> llevan esa misma medida, así que el navegador
   reserva el hueco exacto y el logo no se deforma nunca. */
.footer-marca { width: 200px; height: auto; display: block; }
.footer-content .footer-links { margin-bottom: 0; gap: 10px 24px; }
.footer-link { color: rgba(255,255,255,0.82); font-size: 13px; }
.footer-link:hover { color: #fff; }
.footer-legal { margin: 0; }

/* ─── Sin menú lateral ───────────────────────────────────────────── */
/* El home no pinta el dot-nav de la landing original, ni en web ni en
   celular: las seis puertas son el único menú y el lateral se encimaba
   sobre las cards. La regla queda por si alguna hoja heredada lo saca. */
.dot-nav--inicio { display: none !important; }

/* Hasta 1600 px no caben los seis usuarios junto a la píldora: sólo nombres. */
@media (min-width: 1025px) and (max-width: 1600px) { .redes-v2__chip small { display: none; } }

/* ─── Celular y tableta ───────────────────────────────────────────── */
/* La foto vertical es más luminosa que la horizontal, así que con el
   mismo velo se veía viva y contrastada. Velo propio, calibrado midiendo
   cielo, gradas y pasto contra la captura de web, para que quede igual
   de mate. */
@media (max-width: 1024px) {
  /* Más mate que en web: menos saturación y contraste, y un velo gris
     casi parejo, para que el fondo acompañe y no compita con las cards. */
  .hero-image { filter: saturate(0.45) brightness(0.95) contrast(0.85) sepia(0.15); }
  .hero-video-container::after { background: linear-gradient(180deg, rgba(38,40,46,0.72) 0%, rgba(38,40,46,0.62) 40%, rgba(38,40,46,0.74) 100%); }
}
/* La misma idea que en escritorio: isotipo, lema y las seis puertas en la
   primera pantalla, en dos columnas y tres filas. La banda de abajo es de
   la píldora del partido. */
@media (max-width: 1024px) {
  /* La misma columna, con menos aire. */
  .hero-content { gap: clamp(14px, 2.4vh, 26px); padding: clamp(18px, 3.4vh, 34px) 16px clamp(16px, 2.6vh, 28px); }
  .hero-logo-text img { width: 72px; height: 72px; }  /* Dos columnas por tres filas que llenan lo que queda de pantalla. */
  .puertas { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); gap: 10px; width: 100%; max-height: none; }
  .puerta { flex: none; border-radius: 18px; }
  .puerta:hover { flex: none; }
  /* En celular no hay hover: la foto va al 100 %, el oscurecido sólo en el
     pie, y un borde y una sombra más marcados para que la card resalte
     sobre el fondo mate. */
  .puerta { border-color: rgba(255,255,255,0.22); box-shadow: 0 14px 40px rgba(0,0,0,0.55); }
  .puerta::before { opacity: 1; transform: none; filter: saturate(1.08) contrast(1.05); }
  .puerta::after { background: linear-gradient(to top, rgba(5,4,21,0.90) 0%, rgba(5,4,21,0.62) 30%, rgba(5,4,21,0.10) 58%, rgba(5,4,21,0) 100%); }
  .puerta__nombre { font-size: 1.25rem; }
  .puerta__linea { font-size: 12px; }
  .puerta__barra { width: 30px; height: 3px; margin: 5px 0 6px; }
  .puerta__cuerpo { left: 14px; right: 14px; bottom: 12px; }
  .puerta__icono { width: 34px; height: 34px; top: 10px; left: 10px; }
  .puerta__icono svg { width: 16px; height: 16px; }
  .redes-v2__grid { gap: 8px; }
  .redes-v2__chip { width: 30px; height: 30px; border-width: 1px; }
  .redes-v2__chip svg { width: 13px; height: 13px; }
  .footer-marca { width: 164px; }
  .footer-content { gap: 14px; padding: 24px 20px 28px; }
}
/* Tableta (tarjetas anchas y bajas): manda la altura de las caras. A 1024 la
   tarjeta de Legends, centrada, enseñaba el pecho de Figo sin su cabeza, y
   la de Podcast cortaba el letrero iD. */
@media (max-width: 1024px) {
  .puerta--legends::before   { background-position: 52% 18%; }
  .puerta--podcast::before   { background-position: 50% 35%; }
  .puerta--travel::before    { background-position: 50% 45%; }
  .puerta--opiniones::before { background-position: 60% 50%; }
}
/* Teléfono (tarjetas casi cuadradas, texto sobre la mitad de abajo). Tour y
   Nosotros tenían las caras justo detrás del título: la foto se agranda en
   alto (150 % y 140 %; con eso siempre cubre el ancho, aun en las tarjetas
   más anchas que altas de 375×667) y se recorre hacia abajo para que las
   caras suban al tercio libre. Nosotros se agranda menos para que el grupo
   completo quepa de lado a lado. */
/* Sólo en teléfonos de hasta 460 px: en el Surface Duo (540) las tarjetas
   son más anchas que altas y la foto agrandada en alto ya no llenaba el
   ancho. */
@media (max-width: 460px) {
  .puerta--tour::before     { background-size: auto 150%; background-position: 35% 82%; }
  .puerta--nosotros::before { background-size: auto 130%; background-position: 44% 100%; }
}
@media (max-width: 600px) {
  .puerta--legends::before  { background-position: 52% 20%; }
  /* Cada tarjeta es su propio contenedor: así el texto se compacta según
     el alto real de la tarjeta, no según el de la pantalla. */
  .puerta { container-type: size; }
}
/* Tarjetas bajas (teléfonos chicos: 167×125 en un iPhone SE). Con el texto
   a tamaño normal tapaba tres cuartas partes de la foto y las caras quedaban
   detrás del título. Se compacta, sin quitar nada: la descripción sigue. */
@container (max-height: 150px) {
  .puerta__nombre { font-size: 1.05rem; }
  .puerta__barra { margin: 3px 0 4px; }
  .puerta__linea { font-size: 11px; line-height: 1.25; min-height: 2.5em; }
  .puerta__cuerpo { bottom: 9px; }
  .puerta__icono { width: 28px; height: 28px; top: 8px; left: 8px; }
  .puerta__icono svg { width: 14px; height: 14px; }
}

/* ─── Toque ───────────────────────────────────────────────────────── */
/* Sin hover en el teléfono, la card tiene que responder al bajar el dedo:
   se hunde apenas y se marca el borde, como un botón del sistema. El
   `transform` va en `.puerta` y no en `::before` para que la foto y el
   texto se muevan juntos. Se declara tras `animation`: la animación de
   entrada termina en `transform: none` con `forwards`, y por eso el
   hundido va con `scale` (propiedad aparte), que la animación no pisa. */
.puerta, .redes-v2__chip, body .lang-btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.puerta { transition: flex .55s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s, scale .12s; }
.puerta:active { scale: .97; border-color: rgba(255,255,255,0.6); }
.redes-v2__chip:active { background: #fff; border-color: #fff; color: #0b1020; scale: .92; }
body .lang-btn:active { background: rgba(255,255,255,0.16); }

/* Áreas de toque de 44 px en celular sin agrandar lo que se ve: los
   círculos de redes miden 30 y los botones de idioma 25 de alto. */
@media (max-width: 1024px) {
  .redes-v2__chip, body .lang-btn { position: relative; }
  .redes-v2__chip::after { content: ''; position: absolute; inset: -7px; }
  body .lang-btn::after { content: ''; position: absolute; inset: -10px -2px; }
}

@media (prefers-reduced-motion: reduce) {
  .puerta { animation: none; opacity: 1; transform: none; }
  .puerta, .redes-v2__chip { transition: none; }
}

/* ─── Tabletas y plegables (iPad, Surface Duo, Galaxy Fold) ───────── */
/* Entre 601 y 1024 px en horizontal, seis tarjetas en dos columnas
   quedaban muy anchas y bajas: van en tres columnas y dos filas. */
@media (min-width: 601px) and (max-width: 1024px) and (orientation: landscape) {
  .puertas { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
}
/* Cada tarjeta mide su propio alto: cuando es baja, el ícono (decorativo)
   se encimaba en el nombre de la sección, así que se oculta. */
@media (max-width: 1024px) { .puerta { container-type: size; } }
@container (max-height: 210px) { .puerta__icono { display: none; } }