/* =============================================================================
   ClaveGTA — landing.css   ·   páginas de aterrizaje de intención de compra
   -----------------------------------------------------------------------------
   Requiere base.css cargado antes.

   UNA hoja para las tres (/gta-6-precio, /gta-6-ps5, /gta-6-xbox). No una por
   página: tres hojas parecidas acaban siendo tres diseños distintos, y a la
   cuarta landing ya nadie sabe cuál es la buena. Lo que cambia entre ellas es
   el CONTENIDO, no la forma.

   Estructura de todas:
     1. la pregunta (h1)
     2. la respuesta, inmediata y con su fuente
     3. el botón
     4. lo que hace falta saber, en bloques cortos
     5. el botón otra vez
     6. a dónde ir después

   Quien llega de Google buscando «gta 6 precio» quiere el número, no un
   artículo. Si tiene que hacer scroll para saber cuánto cuesta, la página ha
   fallado por muy bien escrita que esté.
   ========================================================================== */

.lwrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }

/* ---------- Migas: dónde estoy, en una línea -------------------------------- */
/* Las migas van sobre la foto del encabezado, no sobre fondo plano. Con
   `--fg-faint` medían 4,43:1 sobre el velo, justo por debajo del 4,5 que pide
   AA para texto pequeño. Suben a `--fg-dim` y el separador a `--fg-faint`,
   que es decoración y no tiene que competir. */
.crumbs {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--fg-dim);
  padding: 18px 0 0;
}
.crumbs a { color: var(--fg-dim); text-decoration: none; }
.crumbs a:hover { color: var(--fg); text-decoration: underline; }
.crumbs span::before { content: '/'; margin-right: 8px; color: var(--fg-faint); }

/* ---------- La pregunta y la respuesta -------------------------------------- */
/* El escenario es el mismo del resto del sitio (.scene, en base.css), a la
   escala más pequeña de las tres: aquí manda la respuesta, no el paisaje.

   Antes esto era un degradado suelto, y la landing —que es la puerta de entrada
   desde Google— era la única página del sitio sin identidad visual. Se vio
   haciendo el recorrido completo como un visitante, no mirando los tests. */
.lhero {
  --ground: 84px; --sun-w: min(175vw, 980px);
  position: relative; overflow: hidden; isolation: isolate;
  padding-bottom: calc(var(--ground) + 22px);
}
@media (min-width: 760px) { .lhero { --ground: 104px; } }
.lhero .lwrap { position: relative; z-index: 1; }

.lhero h1 {
  font-weight: 800;
  font-size: clamp(30px, 8vw, 54px);
  line-height: 1.02; letter-spacing: -.035em;
  text-wrap: balance; max-width: 16ch;
  margin: 12px 0 0;
}

/* LA RESPUESTA. Es el elemento más importante de la página y por eso es el
   único con borde cian: cian = dato comprobado en todo el sitio. */
.answer {
  margin-top: 18px;
  border-left: 3px solid var(--cyan);
  background: var(--panel);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.answer__main {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(18px, 4.4vw, 24px); line-height: 1.32;
  letter-spacing: -.02em;
}
.answer__sub { font-size: 15px; color: var(--fg-dim); line-height: 1.6; }
.answer__stamp { font-size: 12px; color: var(--fg-faint); }
.answer__stamp b { color: var(--fg-dim); font-weight: 600; }

/* Aviso de precio pendiente de reconfirmar. Lo pinta landing.js pasado
   site.officialStaleDays; no oculta la cifra, la matiza. */
.answer__aged {
  font-size: 12.5px; color: var(--amber);
  display: flex; align-items: flex-start; gap: 7px;
}
.answer__aged::before { content: '·'; font-weight: 800; }

.lhero .cta { margin-top: 18px; width: 100%; }
@media (min-width: 560px) { .lhero .cta { width: auto; min-width: 300px; } }

/* ---------- Precios oficiales, si la página los enseña ---------------------- */
.prices {
  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: 560px) { .prices { grid-template-columns: 1fr 1fr; } }
.prices li {
  background: var(--ink-2); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 5px;
}
.prices dt, .prices .ed {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint);
}
.prices .amount {
  font-family: var(--display); font-weight: 800; font-size: 30px;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1;
}
.prices .what { font-size: 13.5px; color: var(--fg-dim); line-height: 1.5; }

/* ---------- Bloques de contenido -------------------------------------------- */
.lsec { padding: 34px 0; border-top: 1px solid var(--line-soft); }
.lsec--alt { background: var(--ink-2); }
.lsec h2 {
  font-weight: 800; font-size: clamp(21px, 5.2vw, 30px);
  line-height: 1.1; letter-spacing: -.028em; text-wrap: balance; max-width: 20ch;
}
/* Sub-encabezado dentro de una sección: a 17px quedaba a un punto de su
   cuerpo (16px) y no se leía como jerarquía. */
.lsec h3 {
  font-weight: 700; font-size: var(--t-sub); letter-spacing: -.018em; margin-top: 4px;
}
.lsec p { font-size: 16px; color: var(--fg-dim); line-height: 1.65; max-width: 64ch; }
.lsec p + p { margin-top: 12px; }
.lsec p b, .lsec p strong { color: var(--fg); font-weight: 600; }
.lsec__body { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }

/* Lista de hechos con marca cian. Misma gramática visual que la home. */
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
/* El check iba en rejilla `18px 1fr`, y en una rejilla CADA nodo de texto
   suelto se convierte en celda. Con un <li> de un solo hijo colaba; con uno que
   mezcla <b> y texto corrido, la frase caía en la columna de 18 px y se leía a
   una palabra por línea. Con posición absoluta el check no depende de cuántos
   hijos tenga el <li>. */
.checks li {
  position: relative; padding-left: 28px;
  font-size: 15.5px; line-height: 1.55; color: var(--fg-dim);
}
.checks li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--cyan); font-weight: 800; font-family: var(--display);
}
.checks li b { color: var(--fg); font-weight: 600; }

/* Aviso, no alarma. Ámbar = léelo antes de pagar. */
.heads-up {
  border-left: 3px solid var(--amber); background: var(--panel);
  border-radius: 0 var(--r-s) var(--r-s) 0; padding: 15px 18px;
  display: flex; flex-direction: column; gap: 7px;
}
.heads-up h3 { font-size: var(--t-bloque); font-weight: 700; letter-spacing: -.012em; }
.heads-up p { font-size: 14.5px; line-height: 1.6; }

.srcline { font-size: 11.5px; color: var(--fg-faint); margin-top: 4px; }
.srcline a { color: var(--fg-faint); text-decoration: underline; text-underline-offset: 2px; }
.srcline a:hover { color: var(--fg-dim); }

/* ---------- Botón repetido --------------------------------------------------
   Aparece después de los bloques que dan motivo para pulsarlo, no cada dos
   párrafos: un CTA repetido sin razón se lee como publicidad y se ignora. */
.ctaband {
  border-top: 1px solid var(--line-soft); padding: 38px 0 42px;
  position: relative; overflow: hidden;
}
.ctaband::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 130%, rgba(255, 107, 123, .26), transparent 60%);
}
.ctaband .lwrap { position: relative; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.ctaband h2 {
  font-weight: 800; font-size: clamp(22px, 5.6vw, 32px);
  line-height: 1.05; letter-spacing: -.03em; text-transform: uppercase; max-width: 16ch;
}
.ctaband p { font-size: 15.5px; color: var(--fg-dim); max-width: 54ch; }
.ctaband .cta { width: 100%; }
@media (min-width: 560px) { .ctaband .cta { width: auto; min-width: 300px; } }

/* ---------- A dónde ir después ---------------------------------------------- */
.related { border-top: 1px solid var(--line-soft); padding: 30px 0 34px; }
.related h2 {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-faint); font-weight: 700;
}
.related ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 640px) { .related ul { grid-template-columns: repeat(3, 1fr); } }
.related a {
  display: flex; flex-direction: column; gap: 3px; min-height: 44px;
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--r-s);
  padding: 13px 15px; text-decoration: none; color: inherit;
  transition: border-color .16s ease;
}
.related a:hover { border-color: var(--fg-faint); }
.related b { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.related span { font-size: 12.5px; color: var(--fg-faint); }

/* ---------- Barra fija de compra --------------------------------------------
   Misma que la tienda, pero sin precio: aquí solo lleva a /comprar. */
.lsticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(14, 9, 25, .96);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(12px);
  transform: translateY(110%);
  transition: transform .22s ease;
}
.lsticky.is-on { transform: translateY(0); }
.lsticky__t {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lsticky .cta { min-height: 46px; padding: 10px 18px; font-size: 14px; flex: 0 0 auto; }
body.has-lsticky { padding-bottom: 74px; }
@media (min-width: 860px) {
  .lsticky { display: none; }
  body.has-lsticky { padding-bottom: 0; }
}


/* =============================================================================
   REJILLA DE LA EDICIÓN ULTIMATE
   -----------------------------------------------------------------------------
   Dieciséis fichas agrupadas por tipo. Cada una es nombre + imagen oficial +
   una etiqueta de qué es. La etiqueta describe lo que se VE en la imagen, no lo
   que hace: Rockstar no lo ha explicado y esta rejilla no lo va a inventar.
   ========================================================================== */
/* `.lsec h3` tiene más especificidad que `.ue-grupo` y la pisaba: la etiqueta
   salía a 17px en Archivo en vez de a 11px en la pila del sistema. Se veía como
   un encabezado normal, no como el rótulo que es. Se sube la especificidad en
   vez de recurrir a !important. */
.lsec h3.ue-grupo {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cyan); font-weight: 700; font-family: var(--body);
  line-height: 1.6;
  margin: 26px 0 12px;
}
.lsec h3.ue-grupo:first-of-type { margin-top: 18px; }

.ue-grid {
  list-style: none; margin: 0 0 4px; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 12px;
}
@media (min-width: 620px) { .ue-grid { grid-template-columns: repeat(3, 1fr); gap: 20px 16px; } }

.ue-grid li { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ue-grid img {
  width: 100%; height: auto; border-radius: var(--r-s);
  border: 1px solid var(--line-soft);
  box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .9);
}
.ue-grid b {
  font-family: var(--display); font-weight: 700; font-size: 14.5px;
  letter-spacing: -.01em; color: var(--fg); line-height: 1.25;
}
.ue-grid span { font-size: 12px; color: var(--fg-faint); }