/* ==========================================================================
   Lote A · Portada, El Comienzo y Notas · rediseño v1
   Hoja PROPIA del lote. Ya está enlazada en el <head> de sus páginas (scripts/cabeza.js),
   después de css/kit-visual.css y css/rediseno-base.css, así que gana a todo lo compartido.
   Guía: diseno-v1\BASE-LISTA.txt. No edites styles.css, kit-visual.css ni rediseno-base.css;
   no corras scripts/landings.js (lo corre el integrador).

   Prefijo propio: .la- (lote A). Lo demás son clases del kit (.fondo-*, .k-*, .tarjeta-juego, .arte-marco)
   y de la base (.titulo-1/2/3) puestas en el marcado de las páginas.

   Contenido
     0. Tokens dentro de los bloques del kit · esquinas en L (HUD) · marca de 3 franjas
     1. Títulos y cejas (escala de la base, cejas en mono)
     2. Hero «versus» de la portada y de /el-comienzo (F4 + arte de los dos juegos)
     3. Tarjetas de juego con arte: «Elige tu juego» (/el-comienzo) y Compite en equipos (portada)
     4. Secciones: pasos, reglas, tabla y logros, Compite en equipos, preguntas, bandas, cierre
     5. Ranking (/el-comienzo/ranking)
     6. Verificar (/verificar)
     7. Notas: blog, noticias, proyectos, juegos, nosotros y la plantilla de detalle
     8. Movimiento reducido y contraste alto
   ========================================================================== */

/* ---------- 0. Tokens del kit para lo viejo del sitio ----------
   Dentro de un bloque del kit, lo que pinta el CSS viejo con --text, --muted, --accent… lee los tokens del
   juego, así el AA se cumple en los dos temas (el kit los cambia solos con el tema). */
.la-hero, .fondo--seccion.fondo-neutro, .fondo--seccion.fondo-doble, .la-verificar-escena, .la-notas-hero {
  --text: var(--k-tx); --muted: var(--k-suave);
}
.fondo--seccion.fondo-lol, .fondo--seccion.fondo-val, .fondo--hero.fondo-lol, .fondo--hero.fondo-val,
.tarjeta-juego--lol, .tarjeta-juego--val {
  --text: var(--k-tx); --muted: var(--k-suave); --accent: var(--k-ac-tx);
  --line: var(--k-borde); --line-soft: color-mix(in srgb, var(--k-borde) 60%, transparent);
  --surface: var(--k-panel); --surface-2: color-mix(in srgb, var(--k-panel) 55%, var(--k-borde)); --ink: var(--k-sup);
}

/* Esquinas en L (HUD de la campaña). Color: --la-esq (por defecto el acento); fondo: --la-fondo. */
.la-hud, .e-pasos li, .ec-vista, .ec-dos > div, .ec-compite, .e-pilar, .ec-tarjeta, .ec-mio, .vr-paso,
.la-hero .ec-sellos, .la-hero .ec-horas-caja, .la-notas .e-bloque {
  --la-l: 16px; --la-g: 2px; --la-c: var(--la-esq, var(--accent));
  background:
    linear-gradient(var(--la-c) 0 0) 0 0 / var(--la-l) var(--la-g) no-repeat,
    linear-gradient(var(--la-c) 0 0) 0 0 / var(--la-g) var(--la-l) no-repeat,
    linear-gradient(var(--la-c) 0 0) 100% 0 / var(--la-l) var(--la-g) no-repeat,
    linear-gradient(var(--la-c) 0 0) 100% 0 / var(--la-g) var(--la-l) no-repeat,
    linear-gradient(var(--la-c) 0 0) 0 100% / var(--la-l) var(--la-g) no-repeat,
    linear-gradient(var(--la-c) 0 0) 0 100% / var(--la-g) var(--la-l) no-repeat,
    linear-gradient(var(--la-c) 0 0) 100% 100% / var(--la-l) var(--la-g) no-repeat,
    linear-gradient(var(--la-c) 0 0) 100% 100% / var(--la-g) var(--la-l) no-repeat,
    var(--la-fondo, var(--surface));
  border-radius: var(--radio-1, 4px);
}

/* La «marca» de 3 franjas sesgadas de la campaña (verde, ámbar o color del juego, verde): pequeña, abajo a la
   derecha. Sustituye al .corte lima gigante en los heroes del lote. */
.la-marca {
  position: absolute; right: clamp(16px, 4vw, 56px); bottom: clamp(16px, 2.6vw, 34px); z-index: 0;
  width: clamp(84px, 9vw, 140px); height: clamp(12px, 1.2vw, 18px); pointer-events: none;
  background: linear-gradient(90deg, var(--k-verde) 0 46%, transparent 46% 54%, var(--la-franja, var(--k-ambar)) 54% 68%, transparent 68% 76%, var(--k-verde) 76%);
  transform: skewX(-31deg);
}
.fondo-lol .la-marca { --la-franja: var(--k-lol); }
.fondo-val .la-marca { --la-franja: var(--k-val); }

/* ---------- 1. Títulos y cejas ---------- */
/* Cejas y datos en mono (la voz técnica de la campaña). */
.e-kicker, .ec-sellos span, .ec-horas caption, .ec-ejemplo, .e-open-datos dt,
.ec-tabla th, .e-ficha dt, .e-tarjeta-meta, .e-articulo-meta {
  font-family: var(--font-mono); letter-spacing: .12em;
}
.e-kicker { font-size: 12px; font-weight: 700; color: var(--muted); }
.e-kicker-num { color: var(--accent); }
.e-kicker::after { width: 56px; background: linear-gradient(90deg, var(--accent), transparent); }
.section-head .eyebrow { font: 700 12px/1.3 var(--font-mono); letter-spacing: .14em; }
/* H2 de sección: la escala de la base (titulo-2). */
.e-titulo, .ec-titulo-chico, .e-final h2 {
  font-size: var(--titulo-2); font-stretch: 125%; font-weight: 900; line-height: 1; letter-spacing: -.005em;
}
.e-bloque h2, .e-detalle-cuerpo > section > h2 { font-stretch: 125%; font-weight: 900; }
.ec-marca-titulo { font-size: var(--titulo-1); font-stretch: 125%; }
.e-pasos h3, .e-pilar h3, .ec-tarjeta h2, .ec-mio h2, .vr-paso-titulo, .e-open h3 {
  font-family: var(--font-display); font-stretch: 105%; font-weight: 800;
}

/* ==========================================================================
   2. HERO «VERSUS» (portada y /el-comienzo)
   <section class="fondo-doble fondo--hero la-hero"> con .la-versus (arte) y la marca.
   ≥ 1280 px: LoL a la izquierda (ventana diagonal), VALORANT a la derecha (agente), texto al centro (F4).
   < 1280 px: el arte forma una banda arriba (LoL | VALORANT) y el texto va debajo.
   ========================================================================== */
.la-hero { --la-banda: clamp(310px, 80vw, 460px); --la-lado: clamp(360px, calc((100vw - 700px) / 2 + 110px), 700px); align-content: start; }
.la-hero .e-hero-marca, .la-hero .ec-hero-fondo, .la-hero > .corte, .la-notas-hero > .corte { display: none; }
.la-hero:has(+ .k-corte--marca) > .la-marca { display: none; }   /* la franja de abajo ya es la marca */
.la-hero .wrap { position: relative; z-index: 1; }

/* Arte */
.la-versus { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.la-versus .k-hero-arte { z-index: 0; width: var(--la-lado); bottom: auto; height: min(100%, 940px); }
.la-versus .la-versus__lol { left: 0; right: auto; }
.la-versus .la-versus__lol .k-ventana, .la-versus .la-versus__lol .k-filo { clip-path: polygon(0 0, 100% 0, 74% 100%, 0 100%); }
.la-versus .la-versus__lol .k-filo { transform: translateX(14px); }
.la-versus .la-versus__lol .k-ventana::after {
  background:
    linear-gradient(270deg, rgb(var(--k-sup-rgb) / .92), rgb(var(--k-sup-rgb) / 0) 48%),
    linear-gradient(0deg, rgb(var(--k-sup-rgb) / .95), rgb(var(--k-sup-rgb) / 0) 34%),
    linear-gradient(180deg, rgb(var(--k-sup-rgb) / .6), rgb(var(--k-sup-rgb) / 0) 20%);
}
.la-versus .la-versus__val { right: 0; left: auto; }
.la-versus__corte {      /* filo coral en diagonal, espejo del filo dorado de LoL */
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--k-val), color-mix(in srgb, var(--k-val) 40%, transparent));
  clip-path: polygon(30% 0, 31.4% 0, 9.4% 100%, 8% 100%);
}
.la-versus .la-versus__val .k-agente { left: auto; right: clamp(28px, 7vw, 130px); bottom: 0; height: min(84%, 640px); }
/* El juego elegido (/el-comienzo) gana presencia: el otro se funde con el fondo (capa encima; el arte no cambia). */
.la-versus .k-hero-arte::after { content: ""; position: absolute; inset: 0; background: rgb(var(--k-sup-rgb) / .62); opacity: 0; transition: opacity .5s var(--k-curva); }
.ec[data-juego="lol"] .la-versus__val::after, .ec[data-juego="val"] .la-versus__lol::after { opacity: 1; }

/* Capa de contraste: la del kit para F4 (texto al centro), con más tinta abajo para los datos. */
.la-hero.fondo-doble::before {
  background:
    radial-gradient(42% 58% at 50% 34%, rgb(var(--k-sup-rgb) / .94) 0%, rgb(var(--k-sup-rgb) / .84) 58%, rgb(var(--k-sup-rgb) / 0) 100%),
    linear-gradient(0deg, rgb(var(--k-sup-rgb) / .95) 0%, rgb(var(--k-sup-rgb) / .7) 26%, rgb(var(--k-sup-rgb) / 0) 48%);
}

/* Texto al centro */
.la-hero__centro { display: grid; justify-items: center; gap: 0; max-width: 700px; margin-inline: auto; text-align: center; }
.la-hero__ceja { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px; margin: 0 0 18px; color: var(--k-tx); }
.la-hero__ceja .k-juego { --k-juego-tam: 14px; --k-emblema-tam: 1.8em; text-shadow: 0 2px 12px rgb(var(--k-sup-rgb) / .95); }
.la-hero h1 { margin: 0; text-shadow: 0 4px 24px rgb(var(--k-sup-rgb) / .6); }
.la-hero h1 .e-linea { display: block; }
.la-hero .ec-num { color: var(--k-ac-tx, var(--accent)); }
:root[data-tema="claro"] .la-hero .ec-num { color: var(--accent); }
.la-hero .ec-empieza { margin: clamp(16px, 1.8vw, 22px) 0 8px; color: var(--k-tx); font: 700 13px/1.2 var(--font-mono); letter-spacing: .2em; }
.la-hero .ec-fecha span { white-space: nowrap; font-size: clamp(21px, 2.6vw, 38px); }
.la-hero .ec-contador { justify-content: center; margin-top: 16px; }
.la-hero .ec-contador-hora { color: var(--k-tx); }
.la-hero .ec-contador-dias strong { font-stretch: 112%; }
.la-hero .e-hero-lede { max-width: 54ch; margin: 18px auto 0; color: var(--k-tx); }
.la-hero .e-hero-lede strong { color: var(--k-tx); }
.la-hero .e-acciones, .la-hero .ec-accion { justify-content: center; }
.la-hero .ec-boton-nota { text-align: center; color: var(--k-tx); flex-basis: 100%; max-width: none; }
.la-hero .ec-discord { margin-top: 10px; }
.la-hero .ec-discord a { color: var(--k-tx); }

/* Datos abajo: sellos y horas en paneles HUD sobre el fondo */
.la-hero__pie { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; margin-top: clamp(36px, 5vw, 64px); align-items: stretch; }
.la-hero .ec-sellos, .la-hero .ec-horas-caja {
  --la-fondo: rgb(var(--k-sup-rgb) / .9); --la-esq: var(--k-verde);
  margin: 0; padding: 14px 20px; border: 1px solid var(--k-borde);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
:root[data-tema="claro"] .la-hero .ec-sellos, :root[data-tema="claro"] .la-hero .ec-horas-caja { --la-esq: var(--accent); --la-fondo: rgb(var(--k-sup-rgb) / .97); }
.la-hero .ec-sellos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; border-top: 1px solid var(--k-borde); }
.la-hero .ec-sellos li { padding: 12px 2px; border-bottom-color: var(--k-borde); }
.la-hero .ec-sellos li:last-child { grid-column: 1 / -1; border-bottom: 0; }
.la-hero .ec-sellos li:nth-last-child(2) { border-bottom: 0; }
.la-hero .ec-sellos span { font-size: 11.5px; color: var(--k-suave); }
.la-hero .ec-sellos strong { color: var(--k-tx); font-size: clamp(15px, 1.3vw, 18px); }
.la-hero .ec-horas-caja { margin: 0; }
.la-hero .ec-horas { max-width: none; }
.la-hero .ec-horas caption { color: var(--k-suave); font-size: 11.5px; }
.la-hero .ec-horas th, .la-hero .ec-horas td { border-top-color: var(--k-borde); font-size: 15px; color: var(--k-tx); }
.la-hero .ec-horas th { color: var(--k-ac-tx, var(--accent)); font-family: var(--font-mono); }
:root[data-tema="claro"] .la-hero .ec-horas th { color: var(--accent); }
.la-hero .ec-horas tr:first-child th, .la-hero .ec-horas tr:first-child td { border-top: 0; }

@media (min-width: 1280px) {
  .la-hero.fondo--hero { min-height: 0; padding-bottom: clamp(48px, 5vw, 72px); }
}
@media (max-width: 1279px) {
  /* Banda de arte arriba: LoL a la izquierda, VALORANT a la derecha. */
  .la-versus { bottom: auto; height: calc(var(--alto-barra) + var(--la-banda)); }
  .la-versus .la-versus__lol { width: 66%; }
  .la-versus .la-versus__lol .k-ventana, .la-versus .la-versus__lol .k-filo { clip-path: polygon(0 0, 100% 0, 76% 100%, 0 100%); }
  .la-versus .la-versus__lol .k-filo { transform: translateX(10px); }
  .la-versus .la-versus__lol .k-ventana::after {
    background: linear-gradient(0deg, rgb(var(--k-sup-rgb) / .95), rgb(var(--k-sup-rgb) / 0) 32%), linear-gradient(270deg, rgb(var(--k-sup-rgb) / .5), rgb(var(--k-sup-rgb) / 0) 30%), linear-gradient(180deg, rgb(var(--k-sup-rgb) / .4), rgb(var(--k-sup-rgb) / 0) 22%);
  }
  .la-versus .la-versus__val { width: 50%; height: auto; bottom: 0; top: 0; }
  .la-versus .la-versus__val .k-agente { right: 5%; height: min(92%, 640px); }
  .la-versus__corte { clip-path: polygon(18% 0, 21% 0, 4% 100%, 1% 100%); }
  main > .la-hero.fondo--hero:first-child { padding-top: calc(var(--alto-barra) + var(--la-banda) - 24px); }
  .la-hero.fondo--hero { min-height: 0; padding-bottom: 48px; }
  .la-hero.fondo-doble::before {
    background: linear-gradient(180deg, rgb(var(--k-sup-rgb) / 0) 0, rgb(var(--k-sup-rgb) / 0) calc(var(--alto-barra) + var(--la-banda) * .72), rgb(var(--k-sup-rgb) / .93) calc(var(--alto-barra) + var(--la-banda) - 12px), rgb(var(--k-sup-rgb) / .95) 100%);
  }
}
@media (max-width: 900px) {
  .la-hero__pie { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .la-hero__centro { justify-items: start; text-align: left; margin-inline: 0; }
  .la-hero__ceja { justify-content: flex-start; }
  .la-hero .ec-contador { justify-content: flex-start; }
  .la-hero .e-hero-lede { margin-inline: 0; }
  .la-hero .e-acciones, .la-hero .ec-accion { justify-content: flex-start; }
  .la-hero .ec-boton-nota { text-align: left; }
  .la-hero .ec-fecha span { white-space: normal; }
  .la-hero .ec-sellos { column-gap: 14px; padding: 8px 14px; }
  .la-hero .ec-sellos li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .la-hero .ec-sellos strong { text-align: left; }
  .la-hero .ec-horas-caja { padding: 10px 14px; }
  .la-versus .la-versus__val .k-agente { height: min(96%, 420px); right: 3%; }
  .la-marca { bottom: 14px; }
}

/* ==========================================================================
   3. TARJETAS DE JUEGO CON ARTE
   ========================================================================== */
/* «Elige tu juego» (/el-comienzo): cada botón vive en una tarjeta de portada; toda la tarjeta es el botón. */
.la-elige { display: flex; flex-wrap: wrap; gap: 14px; width: 100%; max-width: 680px; margin: 22px 0 0; padding: 0; border: 0; }
.la-elige legend { width: 100%; margin: 0 0 10px; padding: 0; color: var(--k-tx); font: 700 12px/1.3 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.la-elige__tarjeta { flex: 1 1 260px; min-width: 0; --k-proporcion: 16 / 8; padding-bottom: 12px; text-align: left; cursor: pointer; }
.la-elige__tarjeta .tarjeta-juego__cuerpo { margin-top: -30px; padding-inline: 14px; }
.la-elige .ec-juego {
  position: static; display: flex; align-items: center; gap: 10px; width: 100%; flex: none;
  min-height: 48px; margin: 0; padding: 6px 2px; border: 0; border-radius: 0; background: none; color: var(--k-ac-tx);
  --k-juego-tam: clamp(14px, 1.3vw, 16px); --k-emblema-tam: 30px; text-shadow: 0 2px 10px rgb(var(--k-sup-rgb) / .95);
}
.la-elige .ec-juego .ec-juego-punto { order: 2; margin-left: auto; width: 18px; height: 18px; border: 2px solid currentColor; border-radius: 50%; }
.la-elige .ec-juego::after { content: ""; position: absolute; inset: 0; z-index: 4; }   /* toda la tarjeta pulsa el botón */
.la-elige .ec-juego:hover { border: 0; }
.la-elige .ec-juego[aria-pressed="true"] { background: none; }
.la-elige .ec-juego[aria-pressed="true"] .ec-juego-punto { background: currentColor; box-shadow: inset 0 0 0 3px var(--k-sup); }
.la-elige .ec-juego:focus-visible { outline: none; }
.la-elige__tarjeta:has(.ec-juego:focus-visible) { outline: 3px solid var(--k-ac-tx); outline-offset: 3px; }
.la-elige__tarjeta.tarjeta-juego--lol:has([aria-pressed="true"]) { border-color: var(--k-ac); box-shadow: 0 0 0 2px var(--k-ac), 0 22px 40px -18px color-mix(in srgb, var(--k-ac) 55%, transparent); }
.la-elige__tarjeta.tarjeta-juego--val:has([aria-pressed="true"]) { border-color: var(--k-ac); filter: drop-shadow(0 0 1px var(--k-ac)) drop-shadow(0 0 1px var(--k-ac)); }
.ec[data-juego] .la-elige__tarjeta:not(:has([aria-pressed="true"]))::after { opacity: .35; }
@media (max-width: 560px) {
  .la-elige__tarjeta { --k-proporcion: 16 / 6; }
}

/* Compite en equipos en la portada: las dos tarjetas de los Open llevan arte */
.e-open.tarjeta-juego--portada { gap: 0; padding: 0 0 22px; border-top: 1px solid var(--k-borde); background: var(--k-sup); align-content: start; }
.e-open.tarjeta-juego--portada .tarjeta-juego__portada { --k-proporcion: 16 / 7; }
.e-open.tarjeta-juego--portada .tarjeta-juego__cuerpo { gap: 12px; padding-inline: 22px; margin-top: -48px; }
.e-open .e-open-juego.k-juego { gap: .55em; font: 900 15px/1 var(--font-display); font-stretch: 125%; letter-spacing: .04em; color: var(--k-ac-tx); text-shadow: 0 2px 12px rgb(var(--k-sup-rgb) / .95); }
.e-open.tarjeta-juego--portada h3 { font-size: clamp(26px, 2.6vw, 34px); font-stretch: 125%; font-weight: 900; text-shadow: 0 2px 14px rgb(var(--k-sup-rgb) / .9); }
.e-open.tarjeta-juego--portada h3 a::after { z-index: 3; }
.e-open.tarjeta-juego--portada .e-open-estado--pronto { background: color-mix(in srgb, var(--k-ac) 16%, var(--k-panel)); color: var(--k-tx); border: 1px solid color-mix(in srgb, var(--k-ac) 40%, transparent); font-family: var(--font-mono); letter-spacing: .08em; }
.e-open.tarjeta-juego--portada .e-open-datos dd { color: var(--k-tx); }
.e-open.tarjeta-juego--portada .e-open-nota { color: var(--k-suave); }
.e-open.tarjeta-juego--portada:has(a:focus-visible) { outline: 3px solid var(--k-ac-tx); outline-offset: 3px; }
.e-open.tarjeta-juego--portada h3 a:focus-visible { outline: none; }

/* ==========================================================================
   4. SECCIONES
   ========================================================================== */
.fondo--seccion > .wrap { position: relative; }
.k-corte + .fondo--seccion, .k-corte + .section, .k-corte + .e-seccion { border-top: 0; }
.k-corte--marca { margin: 0; }
.la-separador { margin-block: clamp(8px, 2vw, 20px) 0; }

/* Pasos: tarjetas HUD con número en contorno */
.e-pasos { gap: 14px; }
.e-pasos li { position: relative; gap: 10px; padding: 22px 20px 20px; border: 1px solid var(--line); --la-fondo: var(--surface); transition: transform .35s var(--k-curva), border-color .35s var(--k-curva); }
.e-pasos li::before { content: ""; position: absolute; left: 18px; right: 18px; top: -1px; height: 3px; background: linear-gradient(90deg, var(--accent), transparent 80%); }
.e-pasos li:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.e-paso-num { font: 900 46px/.9 var(--font-display); font-stretch: 125%; color: transparent; -webkit-text-stroke: 1.5px var(--accent); }
.e-pasos h3 { font-size: var(--titulo-3); }
.fondo--seccion .e-pasos li { --la-fondo: rgb(var(--k-sup-rgb) / .82); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
:root[data-tema="claro"] .fondo--seccion .e-pasos li { --la-fondo: var(--surface); }
.ec-pasos li.is-siguiente { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 18px 40px -22px var(--accent); }

/* Pilares de la portada (05) */
.e-pilar { --la-fondo: var(--ink); }
.fondo--seccion .e-pilar { --la-fondo: rgb(var(--k-sup-rgb) / .84); }
:root[data-tema="claro"] .fondo--seccion .e-pilar { --la-fondo: var(--surface); }
.fondo--seccion .k-energia { opacity: .26; }

/* /el-comienzo · 03: lo que te pedimos y reglas, en dos paneles HUD */
.ec-dos > div { padding: clamp(22px, 3vw, 34px); border: 1px solid var(--line); --la-fondo: var(--surface); }
.ec-reglas li { padding-left: 46px; }
.ec-reglas li::before { font: 900 30px/1 var(--font-display); font-stretch: 125%; color: transparent; -webkit-text-stroke: 1.2px var(--accent); }

/* /el-comienzo · 04: tabla y logros en el fondo de LoL (HUD con esquinas doradas) */
.ec-vista { border: 1px solid var(--line); --la-fondo: rgb(var(--k-sup-rgb) / .88); padding: clamp(20px, 2.6vw, 28px); }
:root[data-tema="claro"] .ec-vista { --la-fondo: var(--surface); }
.ec-ejemplo { border-radius: var(--radio-1); font-size: 11.5px; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.ec-tabla caption { font-family: var(--font-display); font-stretch: 110%; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.ec-tabla th { font-size: 11.5px; text-transform: uppercase; }
.ec-tabla tbody tr td { transition: background-color .2s var(--k-curva); }
.ec-tabla tbody tr:hover td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ec-tabla tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.ec-tabla td:first-child { font-family: var(--font-display); font-stretch: 125%; }
.ec-tabla tbody tr:nth-child(1) td:first-child { color: var(--accent); }
.ec-logros li { border-radius: var(--radio-1); border-left-color: var(--accent); background: var(--surface); }

/* /el-comienzo · 05: Compite en equipos en el fondo de VALORANT */
.ec-compite { --la-fondo: rgb(var(--k-sup-rgb) / .88); border: 1px solid var(--line); }
:root[data-tema="claro"] .ec-compite { --la-fondo: var(--surface); }
.ec-formato li::before { font-family: var(--font-mono); font-size: 18px; }

/* Preguntas */
.ec-faq .faq details { border-radius: var(--radio-1); }
/* En la columna angosta (421 px a 1440) «PREGUNTARNOS» no cabía a 38 px y overflow-wrap la partía dejando la «S» sola
   (29/10/2026). Igual que en Torneos (#faq, lote-b.css): sin partir palabras y un tope de 34 px, que sí cabe. */
@media (min-width: 861px) { .ec-faq .section-head h2 { font-size: clamp(26px, 2.4vw, 34px); overflow-wrap: normal; word-break: normal; hyphens: manual; } }

/* Bandas (Discord, Academia) y cierre de la portada */
.e-banda { border-radius: var(--radio-1); background: linear-gradient(118deg, var(--surface) 0 58%, color-mix(in srgb, var(--accent) 12%, var(--surface)) 58% 60%, var(--surface) 60% 63%, color-mix(in srgb, var(--accent) 8%, var(--surface)) 63% 70%, var(--surface) 70%); }
.la-sin-mascota .e-banda-mascota { display: none; }   /* una sola mascota por pantalla: la del cierre queda justo abajo */
.la-sin-mascota .e-banda { grid-template-columns: minmax(0, 1fr); }
.e-final { position: relative; isolation: isolate; border-top: 0; }

/* ==========================================================================
   5. RANKING (/el-comienzo/ranking)
   Cabecera con el fondo del juego activo: LoL por defecto; con la pestaña VALORANT, F3 y su arte (CSS :has,
   sin tocar la lógica del JS). Pestañas con el selector del kit. Tablas HUD y estados vacíos con .k-vacio.
   ========================================================================== */
main.la-ranking { gap: 0; padding-bottom: 56px; }
.la-ranking-cabeza.fondo--hero { min-height: clamp(400px, 56vh, 560px); padding-bottom: clamp(28px, 4vw, 44px); align-content: end; }
.la-ranking-cabeza .ec-cabeza { max-width: 640px; gap: 14px; }
.la-ranking-cabeza .ec-cabeza > .k-ceja { color: var(--k-ac-tx); }
.la-ranking-cabeza .ec-cabeza h1 { margin: 0; font-size: var(--titulo-1); }
.la-ranking-cabeza .ec-intro { color: var(--k-tx); max-width: 56ch; }
.la-ranking-arte--val { display: none; }
.la-ranking:has(#ec-tab-val[aria-selected="true"]) .la-ranking-arte--lol { display: none; }
.la-ranking:has(#ec-tab-val[aria-selected="true"]) .la-ranking-arte--val { display: block; }
.la-ranking:has(#ec-tab-val[aria-selected="true"]) .la-ranking-cabeza {
  --k-sup: var(--k-v-sup); --k-sup-rgb: var(--k-v-sup-rgb); --k-tx: var(--k-v-tx); --k-suave: var(--k-v-suave); --k-ac: var(--k-v-ac); --k-ac-tx: var(--k-v-ac-tx);
  --k-tex: var(--k-v-tex); --k-panel: var(--k-v-panel); --k-borde: var(--k-v-borde);
  --k-img-1920: var(--k-v-img-1920); --k-img-1440: var(--k-v-img-1440); --k-img-390: var(--k-v-img-390); --la-franja: var(--k-val);
}
/* Pestañas = selector de juego del kit (role="tab" con aria-selected) */
.la-ranking .ec-pestanas { margin-top: 26px; border-bottom: 0; gap: 10px; }
.la-ranking .ec-pestana { min-height: 48px; color: var(--k-tx); background: rgb(var(--k-sup-rgb) / .8); border: 1.5px solid var(--k-borde); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.la-ranking .ec-pestana[aria-selected="true"] { color: var(--k-tx); }
.la-ranking .ec-pestana.k-juego--lol[aria-selected="true"] { border-color: var(--k-l-ac-tx); box-shadow: inset 0 -3px 0 var(--k-lol); }
.la-ranking .ec-pestana.k-juego--val[aria-selected="true"] { border-color: var(--k-v-ac-tx); box-shadow: inset 0 -3px 0 var(--k-val); }
.la-ranking .ec-pestana:focus-visible { outline: 2px solid var(--k-ac-tx); outline-offset: 3px; }

.la-ranking-cuerpo { display: grid; gap: 20px; padding-top: 28px; --la-esq: var(--k-l-ac-tx); }
.la-ranking:has(#ec-tab-val[aria-selected="true"]) .la-ranking-cuerpo { --la-esq: var(--k-v-ac-tx); }
.ec-mio, .ec-tarjeta { padding: 20px 22px; --la-fondo: var(--surface); }
.ec-mio h2, .ec-tarjeta h2 { font-size: var(--titulo-3); text-transform: uppercase; font-stretch: 112%; letter-spacing: .01em; }
.ec-tarjeta h2::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 12px; background: var(--la-esq); transform: translateY(-2px) rotate(45deg); }
.la-ranking .ec-contador { font-family: var(--font-mono); font-weight: 700; color: var(--accent); }
.la-ranking .ec-tabla th { font: 700 11.5px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.la-ranking .ec-tabla tbody tr:hover td { background: color-mix(in srgb, var(--la-esq) 10%, transparent); }
.la-ranking .ec-tabla tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--la-esq); }
.la-ranking .ec-tabla td:first-child { font: 900 16px/1 var(--font-display); font-stretch: 125%; font-variant-numeric: tabular-nums; }
.la-ranking .ec-tabla tbody tr:nth-child(-n+3) td:first-child { color: var(--la-esq); }
.la-ranking .ec-cargando { padding: 18px 0; color: var(--muted); font-family: var(--font-mono); letter-spacing: .08em; }
.la-ranking .ec-premios { padding: 12px 16px; border: 1px solid var(--line); border-left: 3px solid var(--k-ambar); border-radius: var(--radio-1); background: var(--surface); }
/* Estado vacío: el F5 del kit, más bajo dentro de cada tabla */
.ec-tarjeta .k-vacio { min-height: 220px; margin: 4px 0 0; padding: 32px 18px; font-weight: 600; color: var(--k-tx); }
.ec-grupos .ec-tarjeta .k-vacio { min-height: 150px; padding: 24px 14px; font-size: 15px; }
@media (max-width: 760px) {
  main > .la-ranking-cabeza.fondo--hero:first-child { padding-top: calc(var(--alto-barra) + 240px); }
  .la-ranking-cabeza.fondo--hero { min-height: 0; }
  .la-ranking-cabeza .k-hero-arte { height: calc(var(--alto-barra) + 230px); }
  .la-ranking-cabeza.fondo--hero::before { background: linear-gradient(180deg, rgb(var(--k-sup-rgb) / 0) 0, rgb(var(--k-sup-rgb) / 0) calc(var(--alto-barra) + 150px), rgb(var(--k-sup-rgb) / .94) calc(var(--alto-barra) + 222px), rgb(var(--k-sup-rgb) / .96) 100%); }
}

/* ==========================================================================
   6. VERIFICAR (/verificar)
   F4 de fondo con la capa de contraste del lado del texto; a la derecha, una carta por juego (arte completo
   con el marco del kit, más chico que su tamaño). Pasos numerados con línea de progreso.
   ========================================================================== */
.la-verificar-escena.fondo--hero { min-height: clamp(560px, 86vh, 900px); align-content: start; }
.la-verificar-escena.fondo-doble::before {
  background:
    linear-gradient(90deg, rgb(var(--k-sup-rgb) / .96) 0%, rgb(var(--k-sup-rgb) / .9) 52%, rgb(var(--k-sup-rgb) / .3) 72%, rgb(var(--k-sup-rgb) / .1) 100%),
    linear-gradient(0deg, rgb(var(--k-sup-rgb) / .9) 0%, rgb(var(--k-sup-rgb) / 0) 24%);
}
.la-verificar-grid { display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.la-verificar #verificar > .eyebrow { font: 700 12px/1.3 var(--font-mono); letter-spacing: .16em; color: var(--k-ac-tx); }
:root[data-tema="claro"] .la-verificar #verificar > .eyebrow { color: var(--accent); }
.la-verificar .perfil-titulo { margin: 0; font-family: var(--font-display); font-size: var(--titulo-1); font-stretch: 125%; font-weight: 900; line-height: .95; text-transform: uppercase; color: var(--k-tx); text-wrap: balance; }
.la-verificar #verificar > .section-sub { color: var(--k-tx); max-width: 60ch; }
.la-verificar #verificar > .vr-tenue { color: var(--k-suave); }
.la-verificar-arte { position: sticky; top: calc(var(--alto-barra) + 24px); display: flex; justify-content: center; align-items: flex-start; padding-top: 12px; }
.la-verificar-arte .arte-marco { --k-marco: 8px; }
.la-verificar-arte .arte-marco img { width: min(100%, 210px); }
.la-verificar-arte .arte-marco--lol { transform: rotate(-4deg); z-index: 1; }
.la-verificar-arte .arte-marco--val { transform: rotate(5deg) translate(-26px, 56px); }
/* Pasos */
.vr-pasos { position: relative; counter-reset: vr; gap: 14px; }
.vr-pasos::before { content: ""; position: absolute; left: 31px; top: 30px; bottom: 30px; width: 2px; background: linear-gradient(180deg, var(--accent), var(--line) 70%); }
.vr-paso { position: relative; counter-increment: vr; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; padding: 18px 20px 18px 14px; border: 1px solid var(--line); --la-fondo: var(--surface); --la-esq: transparent; }
.vr-paso.is-hecho { --la-fondo: var(--surface-2); }
.vr-paso.is-actual { --la-esq: var(--accent); border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent), 0 18px 40px -24px var(--accent); }
.vr-marca { position: relative; z-index: 1; width: 34px; height: 34px; background: var(--surface); border: 2px solid var(--line); border-radius: var(--radio-1); font: 900 16px/1 var(--font-display); color: var(--text); }
.vr-marca:empty::before { content: counter(vr, decimal-leading-zero); font: 700 12px/1 var(--font-mono); color: var(--text); }
.vr-paso.is-hecho .vr-marca { background: var(--verde); border-color: var(--verde); color: var(--verde-tx); }
.vr-paso.is-actual .vr-marca { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.vr-paso-titulo { font-size: var(--titulo-3); }
.vr-aviso { border-radius: var(--radio-1); }
@media (max-width: 960px) {
  .la-verificar-grid { grid-template-columns: minmax(0, 1fr); }
  .la-verificar-arte { display: none; }
}
@media (max-width: 760px) {
  main > .la-verificar-escena.fondo--hero:first-child { padding-top: calc(var(--alto-barra) + 40px); }
  .la-verificar-escena.fondo--hero { min-height: 0; align-content: start; padding-bottom: 48px; }
  .la-verificar-escena.fondo-doble::before { background: linear-gradient(180deg, rgb(var(--k-sup-rgb) / .9) 0%, rgb(var(--k-sup-rgb) / .82) 50%, rgb(var(--k-sup-rgb) / .94) 100%); }
  .vr-pasos::before { left: 30px; }
}
@media (max-width: 480px) {
  .vr-paso { grid-template-columns: 34px minmax(0, 1fr); }
}

/* ==========================================================================
   7. NOTAS (blog, noticias, proyectos, juegos, nosotros y detalle)
   Fondo neutro (F1) sin arte de Riot. Portadas de nota con el marco del kit (anillo con degradado y la
   marca de 3 franjas), H1 con la escala de la base y cejas en mono.
   ========================================================================== */
.la-notas-hero.fondo--hero { min-height: clamp(380px, 52vh, 540px); align-content: end; padding-bottom: clamp(36px, 5vw, 60px); }
.la-notas-hero > .wrap { position: relative; display: grid; justify-items: start; gap: 16px; }
.la-notas-hero > .wrap > * { max-width: 780px; }
.la-notas-hero h1 { text-shadow: 0 4px 24px rgb(var(--k-sup-rgb) / .6); }
.la-notas-hero h1 { margin: 0; }
.la-notas-hero .e-kicker { margin: 0; color: var(--k-ac-tx); }
:root[data-tema="claro"] .la-notas-hero .e-kicker { color: var(--accent); }
.la-notas-hero .e-kicker::after { display: none; }
.la-notas-hero .e-sub { margin: 0; color: var(--k-tx); }
.la-notas-hero .e-pestanas { margin-top: 6px; }
.la-notas-hero .e-pestanas a { background: rgb(var(--k-sup-rgb) / .75); color: var(--k-tx); border-color: var(--k-borde); border-radius: var(--radio-2); font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; }
.la-notas-hero .e-pestanas a[aria-current] { background: var(--verde); border-color: var(--verde); color: var(--verde-tx); }
.la-notas-hero .k-energia { opacity: .3; }
@media (max-width: 760px) {
  main > .la-notas-hero.fondo--hero:first-child { padding-top: calc(var(--alto-barra) + 96px); }
  .la-notas-hero.fondo--hero { min-height: 0; padding-bottom: 36px; }
}
/* Filtros (chips) */
.la-notas .e-chip { border-radius: var(--radio-2); font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; }
.la-notas .e-chip[aria-current] { background: var(--verde); border-color: var(--verde); color: var(--verde-tx); }
/* Tarjetas: portada con el marco del kit */
.la-notas .e-tarjeta, .la-notas-detalle .e-tarjeta { border-radius: var(--radio-2); }
.la-notas .e-tarjeta-media, .la-notas-detalle .e-tarjeta-media { margin: 10px 10px 0; border: 0; border-radius: var(--radio-1); isolation: isolate; }
.la-notas .e-tarjeta-media::before, .la-notas-detalle .e-tarjeta-media::before {   /* anillo con degradado (solo el borde) */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; padding: 2px; border-radius: inherit;
  background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 12%, transparent) 42%, color-mix(in srgb, var(--accent) 12%, transparent) 62%, var(--accent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.la-notas .e-tarjeta-media::after, .la-notas-detalle .e-tarjeta-media::after {   /* la marca de 3 franjas */
  content: ""; position: absolute; right: 14px; bottom: 10px; z-index: 2; width: 58px; height: 6px; pointer-events: none;
  background: linear-gradient(90deg, var(--k-verde) 0 30%, transparent 30% 40%, var(--k-ambar) 40% 50%, transparent 50% 60%, var(--k-verde) 60%);
  transform: skewX(-31deg);
}
.la-notas .e-tarjeta:hover, .la-notas-detalle .e-tarjeta:hover { box-shadow: var(--e-sombra), 0 0 42px -16px color-mix(in srgb, var(--accent) 55%, transparent); }
.la-notas .e-tarjeta-titulo { font-stretch: 118%; font-weight: 900; }
.la-notas .e-insignia, .la-notas .e-estado { border-radius: var(--radio-1); font-family: var(--font-mono); letter-spacing: .06em; }
.la-notas .e-vacio { border-radius: var(--radio-1); border-style: solid; background: var(--surface); }
.la-notas .fondo--seccion { padding-block: clamp(48px, 7vw, 88px); }
/* Nosotros: bloques HUD numerados */
.la-notas .e-bloques { counter-reset: bloque; gap: 16px; }
.la-notas .e-bloque { counter-increment: bloque; padding: clamp(22px, 3vw, 36px); border: 1px solid var(--line); --la-fondo: var(--surface); }
.la-notas .e-bloque h2::before { content: counter(bloque, decimal-leading-zero); display: block; margin-bottom: 10px; color: var(--accent); font: 700 12px/1 var(--font-mono); letter-spacing: .16em; }
.la-notas .e-roles li { border-radius: var(--radio-1); font-family: var(--font-mono); font-size: 13px; }
/* Cierre de las landings (bloque de scripts/landings.js): mismo radio que el resto */
.la-notas [data-landing$="-final"] .lp-final { border-radius: var(--radio-1); }
/* Detalle (plantillas/detalle.html; el contenido lo arma el Worker): cabecera de nota sobre F1, H1 de la escala.
   Los juegos propios (.e-detalle-hero--arte) conservan su arte. */
.la-notas-detalle .e-detalle-hero:not(.e-detalle-hero--arte) {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--k-n-sup) var(--k-n-img-1440) right center / cover no-repeat;
}
.la-notas-detalle .e-detalle-hero:not(.e-detalle-hero--arte)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgb(var(--k-n-sup-rgb) / .95) 0%, rgb(var(--k-n-sup-rgb) / .85) 45%, rgb(var(--k-n-sup-rgb) / .3) 80%), linear-gradient(0deg, rgb(var(--k-n-sup-rgb) / .9), rgb(var(--k-n-sup-rgb) / 0) 30%);
}
.la-notas-detalle .e-detalle-hero:not(.e-detalle-hero--arte) h1 { font-size: var(--titulo-1); font-stretch: 125%; line-height: .95; color: var(--k-n-tx); }
.la-notas-detalle .e-detalle-hero:not(.e-detalle-hero--arte) .e-articulo-extracto { color: var(--k-n-tx); }
.la-notas-detalle .e-detalle-hero:not(.e-detalle-hero--arte) .e-articulo-meta,
.la-notas-detalle .e-detalle-hero:not(.e-detalle-hero--arte) .e-migas,
.la-notas-detalle .e-detalle-hero:not(.e-detalle-hero--arte) .e-migas a { color: var(--k-n-suave); }
.la-notas-detalle .e-migas { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .06em; }
.la-notas-detalle .e-detalle-media { border-radius: var(--radio-2); }
@media (max-width: 760px) {
  .la-notas-detalle .e-detalle-hero:not(.e-detalle-hero--arte) { background-image: var(--k-n-img-390); background-position: center top; }
  .la-notas-detalle .e-detalle-hero:not(.e-detalle-hero--arte)::before { background: linear-gradient(0deg, rgb(var(--k-n-sup-rgb) / .96), rgb(var(--k-n-sup-rgb) / .86) 60%, rgb(var(--k-n-sup-rgb) / .6)); }
}

/* ==========================================================================
   8. MOVIMIENTO REDUCIDO Y CONTRASTE ALTO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .e-pasos li, .la-versus .k-hero-arte::after, .ec-tabla tbody tr td { transition: none; }
  .e-pasos li:hover { transform: none; }
}
@media (prefers-contrast: more) {
  .la-hero .ec-sellos, .la-hero .ec-horas-caja, .la-ranking .ec-pestana { --la-fondo: var(--k-sup); background-color: var(--k-sup); }
}