/* ==========================================================================
   Base del rediseño de Inertia.gg · v1 (28/10/2026)
   Lo COMPARTIDO entre los tres lotes. Se carga en todas las páginas después de
   css/kit-visual.css y antes de la hoja del lote (scripts/cabeza.js). Los tokens
   de color, la escala y los radios viven en css/styles.css (:root) y el kit en
   css/kit-visual.css: aquí no se repiten, solo se usan.
   Dueño único: el desarrollador de la base. Los lotes NO editan este archivo:
   si les falta algo, lo piden (o lo resuelven en su css/lote-x.css).

   Contenido
     1. Kit alineado con la escala (radios 4/8/16 y botón único)
     2. Títulos: .titulo-1 · .titulo-2 · .titulo-3
     3. Layout: .r-seccion · .r-contenedor · .r-cabeza · .r-rejilla · .r-pila
     4. Hero del kit enganchado a la barra del sitio (.fondo--hero)
   ========================================================================== */

/* ---------- 1. Kit alineado con la escala ---------- */
:root {
  --k-radio: var(--radio-2, 8px);
  --alto-barra: 69px;      /* .site-header: 68 px de alto + 1 px de borde */
}
@media (max-width: 860px) { :root { --alto-barra: 61px; } }

/* El botón del kit y el del sitio son el mismo botón: verde #9DE83B, texto tinta, Inter 700, radio 8 px. */
.k-boton { padding: .87em 1.2em; border-radius: var(--radio-2, 8px); font: 700 15px/1 var(--font-body); }
.k-etiqueta { border-radius: var(--radio-1, 4px); }
.k-selector-juego a, .k-selector-juego button { border-radius: var(--radio-2, 8px); }

/* ---------- 2. Escala única de títulos ----------
   H1 → .titulo-1 (o font-size: var(--titulo-1)) · H2 → .titulo-2 · H3 → .titulo-3.
   Mayúsculas en Archivo 900 expandida (125 %) para H1 y H2, como la campaña; H3 en frase normal.
   <em> dentro de .titulo-1/.titulo-2 = segunda línea en el acento (verde; dorado o coral dentro de un
   bloque de juego del kit). Con .k-titulo del kit se combina igual: <h1 class="k-titulo titulo-1">. */
.titulo-1, .titulo-2, .titulo-3 { margin: 0; font-family: var(--font-display); text-wrap: balance; }
.titulo-1, .titulo-2 { font-stretch: 125%; font-weight: 900; letter-spacing: -.005em; text-transform: uppercase; }
.titulo-1 { font-size: var(--titulo-1); line-height: .95; }
.titulo-2 { font-size: var(--titulo-2); line-height: 1; }
.titulo-3 { font-size: var(--titulo-3); font-stretch: 105%; font-weight: 800; line-height: 1.2; }
.titulo-1 em, .titulo-2 em { font-style: normal; color: var(--k-ac-tx, var(--accent)); background: var(--k-em-marca, none); }

/* ---------- 3. Layout para los lotes ----------
   <section class="r-seccion [r-seccion--alterna|--compacta|--sin-arriba|--sin-abajo]">
     <div class="r-contenedor [r-contenedor--estrecho|--ancho]">
       <header class="r-cabeza"><p class="k-ceja">…</p><h2 class="titulo-2">…</h2><p>…</p></header>
       <ul class="r-rejilla" style="--r-min: 280px">…</ul>
     </div>
   </section>
   .r-contenedor = mismo ancho que .wrap (1180 px), así conviven en la misma página.
   .r-rejilla usa auto-fit: nunca deja celdas vacías al final de la fila. */
.r-seccion { padding-block: clamp(56px, 8vw, 104px); }
.r-seccion--compacta { padding-block: clamp(36px, 5vw, 64px); }
.r-seccion--sin-arriba { padding-top: 0; }
.r-seccion--sin-abajo { padding-bottom: 0; }
.r-seccion--alterna { background: var(--surface); border-block: 1px solid var(--line-soft); }
.r-contenedor { width: min(1180px, 100%); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.r-contenedor--estrecho { width: min(760px, 100%); }
.r-contenedor--ancho { width: min(1440px, 100%); }
.r-cabeza { display: grid; gap: 14px; max-width: 680px; margin-bottom: clamp(28px, 4vw, 52px); }
.r-cabeza > * { margin: 0; }
.r-cabeza > p:not(.k-ceja):not(.eyebrow) { color: var(--muted); font-size: 17px; max-width: 60ch; }
.r-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--r-min, 260px), 100%), 1fr)); gap: var(--r-espacio, clamp(16px, 2vw, 24px)); margin: 0; padding: 0; list-style: none; }
.r-pila { display: grid; gap: var(--r-espacio, 16px); align-content: start; }
.r-pila > * { margin: 0; }

/* ---------- 4. Hero del kit enganchado a la barra ----------
   Si el primer hijo del <main> es un hero del kit, sube por debajo de la barra superior (que es
   translúcida y con desenfoque): el fondo empieza arriba, sin franja de color entre la barra y el hero,
   y el texto conserva su aire. Solo hay que ponerlo de primer hijo:
     <main id="main"><section class="fondo-lol fondo--hero" aria-labelledby="…"><div class="wrap">…
   El aviso «No oficial» queda arriba de la barra, como en todas las páginas. Si un bloque de
   scripts/landings.js (lp-intro) va antes, el hero no se engancha: el lote lo resuelve en su página.
   Si el <main> tiene relleno arriba (.terminos, .acceso, .cuenta, .ec…), se anula para el hero.
   Un <main class="wrap"> limita el ancho del hero: quita .wrap del <main> y ponlo dentro de cada sección. */
main:has(> .fondo--hero:first-child) { padding-top: 0; }
main > .fondo--hero:first-child {
  margin-top: calc(-1 * var(--alto-barra));
  padding-top: calc(var(--alto-barra) + clamp(56px, 8vw, 112px));
}
body:has(> main > .fondo--hero:first-child) .site-header { border-bottom-color: transparent; }
@media (max-width: 760px) {
  main > .fondo--hero:first-child { padding-top: calc(var(--alto-barra) + 120px); }
}