/* =============================================================================
   ClaveGTA — home.css   ·   la portada
   -----------------------------------------------------------------------------
   Requiere base.css cargado antes (paleta, reset, .cta, fachada, pie).

   El trabajo de esta página NO es vender en el primer segundo: es que alguien
   que llega buscando GTA VI piense «esta es LA página de GTA VI» y se quede.
   La compra aparece arriba, desaparece mientras lee, y vuelve al final.

   Por eso el escenario es más grande que el de la tienda y el contenido va en
   bloques largos: aquí se lee, allí se compra.

   Mobile-first. Ancho de lectura ~66 caracteres.
   ========================================================================== */

/* ---------- Cabecera ------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 30;
  border-bottom: 1px solid transparent;
  background: rgba(20, 0, 31, 0);
  transition: background .2s ease, border-color .2s ease;
}
.nav.is-stuck {
  background: rgba(20, 0, 31, .90);
  border-bottom-color: var(--line-soft);
  backdrop-filter: blur(12px);
}
.nav__in {
  max-width: 1080px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 14px;
}
.nav__links { display: none; margin-left: auto; gap: 22px; }
.nav__links a {
  font-size: 13.5px; color: var(--fg-dim); text-decoration: none;
  font-family: var(--display); font-weight: 500;
}
.nav__links a:hover { color: var(--fg); }
.nav__cta {
  /* 44 px es el suelo, también aquí. Un botón de compra en la barra superior
     es de los que más se pulsan en móvil y era el más pequeño de la página. */
  margin-left: auto; min-height: 44px; padding: 8px 16px; font-size: 13px; gap: 7px;
}
.nav__cta::after { font-size: 15px; }
@media (min-width: 860px) {
  .nav__links { display: flex; }
  .nav__cta { margin-left: 0; }
}

/* ---------- Escenario principal ----------------------------------------------
   El arte vive en base.css (.scene): lo comparten portada, tienda y landings.
   Aquí solo se ajusta su escala. Sin `100vh`: el alto lo pone el contenido. */
.hero { --ground: 132px; --sun-w: min(190vw, 1400px);
  position: relative; overflow: hidden; isolation: isolate; }
@media (min-width: 760px) { .hero { --ground: 176px; } }

.hero__in {
  position: relative; z-index: 2;
  max-width: 1080px; margin: 0 auto;
  /* Alto generoso, pero NUNCA 100vh: el alto lo pone el contenido. Un hero de
     altura de pantalla empuja la propia página fuera del primer vistazo. */
  padding: 76px 20px calc(var(--ground) + 30px);
  display: flex; flex-direction: column; gap: 16px;
  text-shadow: 0 2px 28px rgba(20, 0, 31, .85);
}
@media (min-width: 760px) {
  .hero__in { padding: 104px 20px calc(var(--ground) + 40px); }
}
.hero__eyebrow {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  /* Sobre el arte oficial, no sobre panel: cian claro. Medido, el normal daba
     2,65:1 aquí arriba, donde el velo es más ligero para no matar el cielo. */
  color: var(--cyan-hi); font-weight: 700;
}
.hero__title {
  font-weight: 800;
  /* Se baja de 118px a 96px y de 12ch a 9ch. No es timidez: con arte real
     detras, un titular de 12ch a 118px cruza por encima de las dos caras.
     El hero pasa a leerse en dos mitades -texto izquierda, escena derecha-
     que es como compone una tienda, no una landing. */
  font-size: clamp(40px, 10.5vw, 96px);
  line-height: .90; letter-spacing: -.038em;
  text-transform: uppercase; text-wrap: balance;
  max-width: 9ch;
  /* Un punto de neón detrás de la tipografía, no un contorno: el contorno se
     lee como efecto, el resplandor se lee como luz de la escena. */
  text-shadow: 0 3px 30px rgba(20, 0, 31, .92), 0 0 68px rgba(255, 107, 123, .28);
}
.hero__lead {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(17px, 4.6vw, 25px);
  line-height: 1.3; letter-spacing: -.015em;
  color: var(--fg); max-width: 26ch;
}
/* La fecha es lo segundo que tiene que leerse, después del nombre del juego.
   Antes iba de pie de foto debajo de la cuenta atrás y se perdía. */
.hero__date {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px;
  margin-top: 6px;
}
.hero__date > b {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(26px, 6.6vw, 40px); line-height: 1;
  letter-spacing: -.025em; text-transform: uppercase;
  color: var(--fg); font-variant-numeric: tabular-nums;
}
.hero__date > span {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 13px; color: var(--fg-dim); background: rgba(20, 13, 36, .55);
}
.hero__date > span b {
  font-family: var(--display); font-weight: 800; font-size: 16px;
  color: var(--cyan); font-variant-numeric: tabular-nums;
}

.hero__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.hero__actions .cta { width: 100%; }
.ghostlink {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  min-height: 44px; padding: 8px 2px;
  font-family: var(--display); font-weight: 600; font-size: 14.5px;
  color: var(--fg-dim); text-decoration: none;
}
.ghostlink:hover { color: var(--fg); }
.ghostlink::after { content: '↓'; }
@media (min-width: 640px) {
  .hero__actions { flex-direction: row; align-items: center; gap: 20px; }
  .hero__actions .cta { width: auto; }
}

/* ---------- Entrada: NO la hay, y es una decisión ----------------------------
   Aquí hubo una animación de entrada escalonada sobre el hero (eyebrow, título,
   fecha y CTA subiendo con 40–220 ms de retardo). Se ha quitado.

   Era finita, que es lo que creía que bastaba. No basta: la captura del
   navegador headless no se toma cuando el arnés termina de esperar, sino al
   agotarse el presupuesto de tiempo, y con los retardos encadenados eso caía
   dentro de la animación. Resultado: capturas con el título a medio opacar y
   sin fecha ni botón. Además, dos capturas seguidas SALÍAN IGUALES —las dos
   pilladas en el mismo fotograma—, así que la comprobación de determinismo
   daba verde en falso. Peor que no tener comprobación.

   El coste real de esto no es una captura fea: es que el primer fotograma que
   ve un visitante con la red lenta, y el que sale en una miniatura al
   compartir, tampoco tienen el botón de compra.

   La composición es lo que sostiene el hero. El movimiento no lo mejoraba lo
   suficiente como para pagar esto.

/* ---------- Estructura de secciones ---------------------------------------- */
.sec { padding: 52px 0; border-top: 1px solid var(--line-soft); }
.sec--alt { background: var(--ink-2); }
.sec__in {
  max-width: 1080px; margin: 0 auto; padding: 0 20px;
  display: flex; flex-direction: column; gap: 22px;
}
.sec__head { display: flex; flex-direction: column; gap: 8px; }
.eyebrow {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--fg-faint); font-weight: 700;
}
.sec h2 {
  font-weight: 800; font-size: clamp(26px, 6.4vw, 40px);
  line-height: 1.04; letter-spacing: -.03em; text-wrap: balance;
  max-width: 18ch;
}
.sec__lead { font-size: 16.5px; color: var(--fg-dim); line-height: 1.62; max-width: 62ch; }

/* ---------- Premisa: bloque editorial, sin caja ----------------------------- */
.premise__body {
  font-size: clamp(18px, 4.4vw, 23px); line-height: 1.5;
  color: var(--fg); max-width: 30ch; font-family: var(--display); font-weight: 500;
  letter-spacing: -.015em;
}
@media (min-width: 760px) { .premise__body { max-width: 46ch; } }

/* ---------- Fuente citada ---------------------------------------------------
   Aparece bajo cada bloque con dato. Si algún día un bloque sale sin esto,
   es que se ha publicado algo sin fuente y el QA (grupo C) lo caza. */
.src { font-size: 11.5px; color: var(--fg-faint); }
.src a { color: var(--fg-faint); text-decoration: underline; text-underline-offset: 2px; }
.src a:hover { color: var(--fg-dim); }

/* ---------- Personajes y lugares -------------------------------------------- */
.duo { display: grid; gap: 14px; }
@media (min-width: 720px) { .duo { grid-template-columns: 1fr 1fr; gap: 18px; } }

.figure {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--r); overflow: hidden;
}
.figure__art { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-2); }
.figure__art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Con foto oficial, la ficha enseña al personaje o al sitio de verdad. El
   encuadre sube un poco para que las caras no queden cortadas por abajo. */
.figure__art img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 34%;
}
.figure__body { display: flex; flex-direction: column; gap: 7px; padding: 0 18px 18px; }
.figure__role {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cyan); font-weight: 700;
}
.figure h3 { font-weight: 800; font-size: var(--t-h3); letter-spacing: -.02em; }
.figure p { font-size: 15px; color: var(--fg-dim); line-height: 1.6; }

/* ---------- Confirmado / no confirmado --------------------------------------
   Dos listas, no dos tarjetas. La marca de la izquierda es la información:
   cian = lo dice la fuente, ámbar = la fuente NO lo dice. */
.split { display: grid; gap: 26px; }
@media (min-width: 780px) { .split { grid-template-columns: 1fr 1fr; gap: 40px; } }
.split h3 {
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; margin-bottom: 12px;
}
.split h3.is-yes { color: var(--cyan); }
.split h3.is-no { color: var(--amber); }
.marklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.marklist li {
  display: grid; grid-template-columns: 20px 1fr; gap: 10px;
  font-size: 15px; line-height: 1.55; color: var(--fg-dim);
}
.marklist li::before { font-weight: 800; font-family: var(--display); }
.marklist--yes li::before { content: '✓'; color: var(--cyan); }
.marklist--no li::before { content: '—'; color: var(--amber); }

/* ---------- Ediciones -------------------------------------------------------
   Sin precio, a propósito: el precio vive en la tienda y solo si es un total
   comprobado. Aquí se explica QUÉ es cada edición, que es lo que se pregunta
   quien todavía no sabe cuál quiere. */
.eds { display: grid; gap: 14px; }
@media (min-width: 720px) { .eds { grid-template-columns: 1fr 1fr; } }
.ed {
  border: 1px solid var(--line-soft); border-radius: var(--r);
  padding: 20px; display: flex; flex-direction: column; gap: 10px;
  background: var(--panel);
}
.ed h3 { font-weight: 800; font-size: var(--t-h3); letter-spacing: -.02em; }
.ed p { font-size: 15px; color: var(--fg-dim); line-height: 1.6; }
.ed .ghostlink { margin-top: auto; color: var(--magenta-hi); }
.ed .ghostlink::after { content: '→'; }

.bonus {
  border-left: 3px solid var(--amber);
  background: var(--panel); border-radius: 0 var(--r-s) var(--r-s) 0;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 7px;
}
.bonus h3 { font-weight: 700; font-size: var(--t-bloque); letter-spacing: -.012em; }
.bonus p { font-size: 14.5px; color: var(--fg-dim); line-height: 1.6; }

/* ---------- Fechas clave ---------------------------------------------------- */
.dates { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--line-soft); border: 1px solid var(--line-soft);
  border-radius: var(--r-s); overflow: hidden; }
@media (min-width: 720px) { .dates { grid-template-columns: repeat(3, 1fr); } }
.dates li { background: var(--ink); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.dates span { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); }
.dates b { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -.015em; }
.dates small { font-size: 12.5px; color: var(--fg-faint); line-height: 1.5; }

/* ---------- Noticias --------------------------------------------------------
   Filas con filete, no tarjetas: es una lista cronológica, y una lista se lee
   mejor como lista. */
.news { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.news li { border-top: 1px solid var(--line-soft); }
.news li:last-child { border-bottom: 1px solid var(--line-soft); }
.news a {
  display: grid; gap: 4px; padding: 18px 0; text-decoration: none; color: inherit;
  grid-template-columns: 1fr;
}
.news a:hover .news__t { color: var(--magenta-hi); }
.news__d {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-faint); font-variant-numeric: tabular-nums;
}
.news__t {
  font-family: var(--display); font-weight: 700; font-size: 17px;
  letter-spacing: -.015em; line-height: 1.3; transition: color .16s ease;
}
.news__t::after { content: ' ↗'; color: var(--fg-faint); font-size: 13px; }
.news__b { font-size: 14.5px; color: var(--fg-dim); line-height: 1.55; }
@media (min-width: 760px) {
  .news a { grid-template-columns: 130px 1fr; gap: 4px 24px; align-items: baseline; }
  .news__d { grid-row: span 2; }
}

/* ---------- Pendiente ------------------------------------------------------- */
.soon { display: flex; flex-wrap: wrap; gap: 8px; }
.soon span {
  border: 1px dashed var(--line); border-radius: 999px;
  padding: 6px 14px; font-size: 13px; color: var(--fg-faint);
}

/* ---------- Banda de compra final ------------------------------------------- */
.buyband { border-top: 1px solid var(--line-soft); padding: 56px 0 60px; position: relative; overflow: hidden; }
.buyband::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 130%, rgba(255,107,123,.30), transparent 62%);
}
.buyband__in {
  position: relative; max-width: 1080px; margin: 0 auto; padding: 0 20px;
  display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
}
.buyband h2 {
  font-weight: 800; font-size: clamp(28px, 7.5vw, 46px);
  line-height: 1.02; letter-spacing: -.035em; text-transform: uppercase; max-width: 14ch;
}
.buyband p { font-size: 16px; color: var(--fg-dim); max-width: 52ch; }
.buyband .cta { width: 100%; }
@media (min-width: 640px) { .buyband .cta { width: auto; min-width: 300px; } }