/* ─────────────────────────────────────────────────────────────
   Tekluma · sitio público
   Lenguaje «plano técnico»: líneas finas, rótulos en mono,
   numeración de secciones y un solo acento ámbar por vista.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Marca */
  --navy: #0f1b2d;
  --ambar: #ff8a1f;
  --pizarra: #3b5174;
  --niebla: #a9b7cc;
  --papel: #f6f5f2;
  --blanco: #ffffff;
  --verde: #1f9d55;
  --rojo: #d64545;

  /* Roles (modo claro) */
  --fondo: var(--papel);
  --superficie: var(--blanco);
  --tinta: var(--navy);
  --tinta-2: var(--pizarra);
  --tinta-3: #6a7a93;
  --linea: rgba(15, 27, 45, 0.13);
  --linea-fuerte: rgba(15, 27, 45, 0.32);
  --rejilla: rgba(59, 81, 116, 0.075);
  --rejilla-mayor: rgba(59, 81, 116, 0.13);
  --primario: var(--navy);
  --sobre-primario: var(--papel);
  --acento-suave: rgba(255, 138, 31, 0.1);

  /* Tipografía */
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Espaciado (base 4) */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px;

  --radio: 3px;
  --ancho: 1120px;
  --margen: 16px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: var(--navy);
    --superficie: #132339;
    --tinta: var(--papel);
    --tinta-2: var(--niebla);
    --tinta-3: #7f90aa;
    --linea: rgba(169, 183, 204, 0.16);
    --linea-fuerte: rgba(169, 183, 204, 0.36);
    --rejilla: rgba(169, 183, 204, 0.05);
    --rejilla-mayor: rgba(169, 183, 204, 0.09);
    --primario: var(--papel);
    --sobre-primario: var(--navy);
    --acento-suave: rgba(169, 183, 204, 0.08);
  }
}

@media (min-width: 720px) { :root { --margen: 32px; } }

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--ambar); }
:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; }
img, svg { display: block; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.025em; }
p { margin: 0; }
::selection { background: var(--ambar); color: var(--navy); }

.hoja { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }
.mono { font-family: var(--mono); font-feature-settings: "zero"; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Iconos (sprite /iconos.svg) */
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; }
.i-s { width: 16px; height: 16px; }
.i-l { width: 28px; height: 28px; stroke-width: 1.5; }

/* Rótulo: etiqueta pequeña en mono, mayúsculas */
.etq {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.etq b { color: var(--tinta); font-weight: 500; text-transform: none; }

/* ── Cabecera ── */
.cabecera { border-bottom: 1px solid var(--linea); }
.cabecera .hoja { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); height: 60px; }
.marca { display: block; text-decoration: none; }
.marca img { height: 26px; width: auto; }
.cabecera nav { display: flex; align-items: center; gap: var(--e5); }
.cabecera nav a { font-size: 14px; font-weight: 600; color: var(--tinta-2); text-decoration: none; }
.cabecera nav a:hover, .cabecera nav a[aria-current] { color: var(--tinta); }
.cabecera nav a[aria-current] { box-shadow: inset 0 -2px 0 var(--ambar); padding: 19px 0; }
.cabecera .ref { display: none; }
@media (min-width: 720px) { .cabecera .ref { display: inline; } }
.solo-ancho { display: none; }
@media (min-width: 720px) { .solo-ancho { display: initial; } }

/* ── Botones ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 10px 20px;
  font-family: var(--sans); font-size: 16px; font-weight: 700; letter-spacing: -0.005em; line-height: 1.25;
  text-align: center; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--radio);
  cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn .i { width: 18px; height: 18px; }
.btn-acento { background: var(--ambar); color: var(--navy); }
.btn-acento:hover { background: #ff9a3d; }
.btn-primario { background: var(--primario); color: var(--sobre-primario); }
.btn-primario:hover { opacity: 0.92; }
.btn-linea { background: transparent; color: var(--tinta); border-color: var(--linea-fuerte); }
.btn-linea:hover { border-color: var(--tinta); }
.btn-bloque { display: flex; width: 100%; }
.enlace { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--linea-fuerte); padding-bottom: 2px; }
.enlace:hover { border-color: var(--ambar); }
.enlace .i { width: 16px; height: 16px; }

/* ── Decoración técnica ── */
/* Papel milimetrado: solo en el héroe */
.rejilla {
  background-color: var(--fondo);
  background-image:
    linear-gradient(var(--rejilla-mayor) 1px, transparent 1px),
    linear-gradient(90deg, var(--rejilla-mayor) 1px, transparent 1px),
    linear-gradient(var(--rejilla) 1px, transparent 1px),
    linear-gradient(90deg, var(--rejilla) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
}
/* Línea de cota con remates */
.cota {
  display: flex; align-items: center; gap: 10px;
  height: 11px; border-inline: 1px solid var(--linea-fuerte);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-3);
}
.cota::before, .cota::after { content: ""; flex: 1; height: 1px; background: var(--linea-fuerte); }
/* Marcas de registro en esquinas */
.registro { position: relative; }
.registro::before, .registro::after {
  content: ""; position: absolute; width: 11px; height: 11px; pointer-events: none;
  border: 0 solid var(--tinta-2);
}
.registro::before { top: -6px; left: -6px; border-top-width: 1px; border-left-width: 1px; }
.registro::after { bottom: -6px; right: -6px; border-bottom-width: 1px; border-right-width: 1px; }

/* ── Landing ── */
.heroe { border-bottom: 1px solid var(--linea); }
.heroe .hoja { display: grid; gap: var(--e7); padding-top: var(--e7); padding-bottom: var(--e7); }
.heroe .kicker { display: flex; align-items: center; gap: 10px; }
.heroe .kicker::before { content: ""; width: 24px; height: 2px; background: var(--ambar); }
.heroe h1 {
  margin: var(--e5) 0 var(--e5);
  font-size: clamp(38px, 10.5vw, 72px); line-height: 1; letter-spacing: -0.045em;
  max-width: 12.5ch;
}
.heroe .lede { font-size: 18px; line-height: 1.55; color: var(--tinta-2); max-width: 34em; }
.heroe .acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e4) var(--e5); margin-top: var(--e6); }
.heroe .acciones .btn { width: 100%; }
.pronto { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tinta-2); }
@media (min-width: 560px) { .heroe .acciones .btn { width: auto; } }
@media (min-width: 960px) {
  .heroe .hoja { grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: var(--e8); padding-top: var(--e9); padding-bottom: var(--e9); }
}

/* Lámina de ejemplo (tarjeta de estudio dibujada) */
.lamina { background: var(--superficie); border: 1px solid var(--linea-fuerte); }
.lamina-cab { display: flex; justify-content: space-between; gap: var(--e3); padding: 10px var(--e4); border-bottom: 1px solid var(--linea); }
.lamina-cuerpo { padding: var(--e5) var(--e4) var(--e4); }
.lamina-cuerpo p.pregunta-ej { font-size: 19px; font-weight: 700; line-height: 1.35; letter-spacing: -0.015em; }
.lamina ol { list-style: none; margin: var(--e4) 0 0; padding: 0; border-top: 1px solid var(--linea); }
.lamina li { display: flex; align-items: center; gap: var(--e3); padding: 9px 0; border-bottom: 1px solid var(--linea); font-size: 15px; font-weight: 600; }
.lamina li .letra { width: 24px; height: 24px; font-size: 12px; }
.lamina li.ok { color: var(--tinta); }
.lamina li.ok .letra { background: var(--verde); border-color: var(--verde); color: #fff; }
.lamina li.ok .i { margin-left: auto; color: var(--verde); }
.lamina-cita { margin: 0; padding: var(--e4); border-top: 1px solid var(--linea); background: var(--fondo); font-size: 14px; color: var(--tinta-2); }
.lamina-cita .etq { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; color: var(--tinta); }
.lamina-pie { margin-top: var(--e3); }

/* Secciones numeradas */
.seccion { border-bottom: 1px solid var(--linea); }
.seccion > .hoja { padding-top: var(--e8); padding-bottom: var(--e8); display: grid; gap: var(--e6); }
.seccion-cab { display: grid; gap: var(--e3); align-content: start; }
.seccion-cab .num { font-family: var(--mono); font-size: 13px; color: var(--tinta-3); display: flex; gap: 10px; align-items: baseline; }
.seccion-cab .num b { font-weight: 500; color: var(--tinta); }
.seccion-cab h2 { font-size: clamp(26px, 6vw, 38px); line-height: 1.08; max-width: 16ch; }
.seccion-cab p { color: var(--tinta-2); max-width: 30em; }
@media (min-width: 960px) {
  .seccion > .hoja { grid-template-columns: 4fr 8fr; gap: var(--e8); padding-top: var(--e9); padding-bottom: var(--e9); }
  .seccion-cab { position: sticky; top: var(--e6); }
}

/* Especificación: filas con línea fina */
.espec { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea-fuerte); }
.espec li { display: grid; grid-template-columns: 28px 1fr; gap: 4px var(--e4); padding: var(--e5) 0; border-bottom: 1px solid var(--linea); }
.espec .i { color: var(--tinta-2); margin-top: 2px; }
.espec h3 { font-size: 18px; line-height: 1.35; letter-spacing: -0.015em; }
.espec p { grid-column: 2; color: var(--tinta-2); }
.espec .ref { grid-column: 2; margin-top: 6px; }
@media (min-width: 720px) {
  .espec li { grid-template-columns: 44px 220px 1fr; align-items: baseline; }
  .espec li .i { align-self: start; }
  .espec p { grid-column: 3; }
  .espec .ref { grid-column: 3; }
}

/* Pasos con cota */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: paso; border-top: 1px solid var(--linea-fuerte); }
.pasos li { position: relative; padding: var(--e5) 0 var(--e5) 56px; border-bottom: 1px solid var(--linea); }
.pasos li::before {
  counter-increment: paso; content: counter(paso, decimal-leading-zero);
  position: absolute; left: 0; top: var(--e5);
  font-family: var(--mono); font-size: 13px; color: var(--tinta-3);
  width: 36px; height: 24px; line-height: 22px; text-align: center; border: 1px solid var(--linea-fuerte);
}
.pasos h3 { font-size: 18px; letter-spacing: -0.015em; margin-bottom: 4px; }
.pasos p { color: var(--tinta-2); }
.pasos .codigos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--e3); }
.codigo { font-family: var(--mono); font-size: 12px; padding: 2px 7px; border: 1px solid var(--linea-fuerte); border-radius: 2px; color: var(--tinta); }
@media (min-width: 720px) {
  .pasos { grid-template-columns: repeat(3, 1fr); border-top: 0; }
  .pasos li { padding: var(--e6) var(--e5) 0 0; border-bottom: 0; border-top: 1px solid var(--linea-fuerte); }
  .pasos li::before { position: static; display: block; margin-bottom: var(--e4); }
  .pasos li::after { content: ""; position: absolute; top: -6px; left: 0; width: 1px; height: 11px; background: var(--linea-fuerte); }
}

/* Entradas (pregunta del día / duelo) */
.entradas { display: grid; gap: var(--e4); }
.entrada { display: flex; flex-direction: column; gap: var(--e3); padding: var(--e5) var(--e4); background: var(--superficie); border: 1px solid var(--linea); }
.entrada .entrada-cab { display: flex; justify-content: space-between; align-items: center; color: var(--tinta-2); }
.entrada h3 { font-size: 22px; letter-spacing: -0.02em; }
.entrada p { color: var(--tinta-2); }
.entrada .datos { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0; }
.entrada .pie-entrada { margin-top: auto; padding-top: var(--e3); }
@media (min-width: 720px) { .entradas { grid-template-columns: 1fr 1fr; } .entrada { padding: var(--e6); } }
@media (min-width: 1040px) { .entradas { grid-template-columns: repeat(3, 1fr); } }

/* Disponibilidad */
.tiendas { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.tienda { display: flex; align-items: center; gap: var(--e4); padding: var(--e4); background: var(--fondo); }
.tienda strong { display: block; font-size: 17px; line-height: 1.3; }
.tienda .i { color: var(--tinta-2); }
@media (min-width: 560px) { .tiendas { grid-template-columns: 1fr 1fr; } }
.contacto { margin-top: var(--e5); color: var(--tinta-2); }

/* ── Pie: cajetín de plano ── */
.pie { padding: var(--e7) 0 var(--e7); }
.cajetin { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linea-fuerte); border: 1px solid var(--linea-fuerte); }
.cajetin > div { background: var(--fondo); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
.cajetin a { color: var(--tinta); }
.cajetin .doble { grid-column: span 2; }
.cajetin .marca-pie img { height: 20px; width: auto; margin-top: 4px; }
.cajetin .vinculos { display: flex; gap: var(--e4); flex-wrap: wrap; }
@media (min-width: 720px) {
  .cajetin { grid-template-columns: 1.4fr 1fr 1fr 1.4fr 0.8fr; }
  .cajetin .doble { grid-column: auto; }
}

/* ── Documentos legales ── */
.documento > .hoja { display: grid; gap: var(--e6); padding-top: var(--e6); padding-bottom: var(--e8); }
.doc-cab { display: grid; gap: var(--e3); }
.doc-cab h1 { font-size: clamp(30px, 7vw, 44px); line-height: 1.05; letter-spacing: -0.035em; }
.doc-ficha { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--linea); border: 1px solid var(--linea); margin-top: var(--e3); }
.doc-ficha > div { background: var(--fondo); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.doc-indice { display: none; }
.legal { max-width: 68ch; font-size: 16.5px; line-height: 1.75; }
.legal > p, .legal li { color: var(--tinta); }
.legal > p + p { margin-top: var(--e4); }
.legal h2 {
  display: flex; gap: var(--e3); align-items: baseline;
  margin: var(--e7) 0 var(--e3); padding-top: var(--e4); border-top: 1px solid var(--linea);
  font-size: 20px; line-height: 1.3; letter-spacing: -0.015em; scroll-margin-top: var(--e5);
}
.legal h2 .n { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--tinta-3); min-width: 2.2em; }
.legal h2 + p, .legal h2 + ul, .legal h2 + table { margin-top: 0; }
.legal ul { margin: var(--e3) 0; padding: 0; list-style: none; }
.legal ul li { position: relative; padding-left: 22px; }
.legal ul li + li { margin-top: var(--e2); }
.legal ul li::before { content: ""; position: absolute; left: 2px; top: 0.85em; width: 10px; height: 1px; background: var(--tinta-2); }
.legal strong { font-weight: 700; }
.legal a { color: var(--tinta); text-decoration-color: var(--ambar); }
.legal p + ul, .legal ul + p, .legal table + p { margin-top: var(--e4); }
.legal table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.5; display: block; overflow-x: auto; margin: var(--e4) 0; border-top: 1px solid var(--linea-fuerte); }
.legal th, .legal td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.legal th { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-3); }
.legal td:first-child { font-weight: 600; width: 40%; }
@media (min-width: 960px) {
  .documento > .hoja { grid-template-columns: 280px 1fr; gap: var(--e8); padding-top: var(--e8); }
  .doc-lado { position: sticky; top: var(--e6); align-self: start; display: grid; gap: var(--e5); }
  .doc-indice { display: block; }
  .doc-indice ol { list-style: none; margin: var(--e2) 0 0; padding: 0; border-top: 1px solid var(--linea); }
  .doc-indice li { border-bottom: 1px solid var(--linea); }
  .doc-indice a { display: flex; gap: 10px; padding: 7px 0; font-size: 14px; line-height: 1.35; color: var(--tinta-2); text-decoration: none; }
  .doc-indice a:hover { color: var(--tinta); }
  .doc-indice a span { font-family: var(--mono); font-size: 12px; color: var(--tinta-3); min-width: 1.8em; padding-top: 1px; }
  .legal { padding-top: 0; }
  .legal > p:first-child { font-size: 18px; line-height: 1.65; }
}

/* ── Juegos: pregunta del día y duelo ── */
.juego-hoja { max-width: 680px; margin: 0 auto; padding: var(--e5) var(--margen) var(--e8); }
.juego { display: flex; flex-direction: column; gap: var(--e5); }
.cargando { color: var(--tinta-2); font-family: var(--mono); font-size: 13px; padding: var(--e7) 0; }

.rotulo-juego { display: grid; grid-template-columns: 1fr; grid-auto-flow: column; grid-auto-columns: auto; gap: 1px; background: var(--linea-fuerte); border: 1px solid var(--linea-fuerte); }
.rotulo-juego > div { background: var(--fondo); padding: 7px 10px 8px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rotulo-juego .valor { font-family: var(--mono); font-size: 14px; font-weight: 500; white-space: nowrap; }
.rotulo-juego .ancho { grid-column: 1 / -1; }

.pregunta { font-size: clamp(23px, 6.2vw, 32px); font-weight: 800; line-height: 1.2; letter-spacing: -0.03em; text-wrap: pretty; }
.ayuda { color: var(--tinta-2); font-size: 15px; display: flex; align-items: center; gap: 8px; }
.ayuda .i { width: 16px; height: 16px; }

.opciones { display: flex; flex-direction: column; border-top: 1px solid var(--linea-fuerte); }
.opcion {
  display: flex; align-items: center; gap: var(--e4); width: 100%; min-height: 64px;
  padding: 12px 4px; text-align: left;
  font: inherit; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--tinta);
  background: transparent; border: 0; border-bottom: 1px solid var(--linea); border-radius: 0;
  cursor: pointer; transition: background-color 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.opcion .texto { flex: 1; }
.letra {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; border: 1px solid var(--linea-fuerte); border-radius: 2px;
  font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--tinta-2);
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
@media (hover: hover) {
  .opcion:not(:disabled):hover { background: var(--superficie); }
  .opcion:not(:disabled):hover .letra { border-color: var(--ambar); color: var(--tinta); }
}
.opcion:not(:disabled):active { background: var(--superficie); }
.opcion:disabled { cursor: default; }
.opcion .i { color: currentColor; }
.opcion.mal { color: var(--tinta-2); }
.opcion.mal .letra { background: transparent; border-color: var(--rojo); color: var(--rojo); }
.opcion.mal > .i { color: var(--rojo); }
.opcion.mal .texto { text-decoration: line-through; text-decoration-thickness: 1px; }
.opcion.mal { animation: sacudir 0.28s; }
.opcion.bien { background: rgba(31, 157, 85, 0.08); color: var(--tinta); }
.opcion.bien .letra { background: var(--verde); border-color: var(--verde); color: #fff; }
.opcion.bien > .i { color: var(--verde); }
.opcion.apagada { color: var(--tinta-3); }
.opcion.elegida { background: var(--primario); color: var(--sobre-primario); }
.opcion.elegida .letra { background: var(--ambar); border-color: var(--ambar); color: var(--navy); }
@keyframes sacudir { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-2px); } }
@media (prefers-reduced-motion: reduce) { .opcion.mal { animation: none; } .resultado { animation: none; } }

/* Intentos: casillas cuadradas */
.casillas { display: inline-flex; gap: 4px; }
.casilla { width: 14px; height: 14px; border: 1px solid var(--linea-fuerte); display: inline-flex; align-items: center; justify-content: center; }
.casilla.bien { background: var(--verde); border-color: var(--verde); }
.casilla.mal { background: var(--rojo); border-color: var(--rojo); }
.casillas.grandes .casilla { width: 28px; height: 28px; color: #fff; }
.casillas.grandes .i { width: 16px; height: 16px; stroke-width: 2; }

/* Resultado */
.resultado { display: flex; flex-direction: column; gap: var(--e4); padding: var(--e5) var(--e4); background: var(--superficie); border: 1px solid var(--linea-fuerte); border-top: 3px solid var(--ambar); animation: aparecer 0.3s ease-out; }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } }
.resultado-cab { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); }
.resultado h2 { font-size: clamp(28px, 7.5vw, 36px); line-height: 1.05; letter-spacing: -0.035em; display: flex; align-items: center; gap: 12px; }
.resultado h2 .i { width: 30px; height: 30px; stroke-width: 1.75; }
.resultado .acciones { display: grid; gap: 10px; margin-top: var(--e2); }
.nota { color: var(--tinta-3); font-size: 13.5px; line-height: 1.5; }
@media (min-width: 720px) { .resultado { padding: var(--e6); } }

.cita { margin: 0; border-left: 2px solid var(--tinta); padding: 2px 0 2px var(--e4); display: flex; flex-direction: column; gap: 8px; }
.cita .etq { display: flex; align-items: center; gap: 6px; color: var(--tinta); }
.cita .etq .i { width: 16px; height: 16px; }
.cita p { color: var(--tinta-2); font-size: 15px; line-height: 1.55; }
.cita blockquote { margin: 0; font-size: 15px; line-height: 1.55; color: var(--tinta); }

.aviso { display: flex; gap: 10px; align-items: flex-start; padding: var(--e3) var(--e4); border: 1px solid var(--linea-fuerte); border-left: 3px solid var(--tinta-2); font-size: 15px; color: var(--tinta); background: var(--superficie); }

.campo-grupo { display: flex; flex-direction: column; gap: 6px; }
.campo {
  font: inherit; font-size: 17px; font-weight: 600; width: 100%; min-height: 52px; padding: 12px 14px;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--superficie); color: var(--tinta);
}
.campo::placeholder { color: var(--tinta-3); font-weight: 500; }
.campo:focus { outline: none; border-color: var(--tinta); box-shadow: inset 0 -2px 0 var(--ambar); }
.campo.error { border-color: var(--rojo); }

/* Duelo */
.duelo-portada { display: flex; flex-direction: column; gap: var(--e5); }
.vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--e3); color: var(--tinta-2); }
.vs .lado { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vs .lado:last-child { text-align: right; }
.vs .lado strong { font-size: 17px; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs .centro { width: 48px; height: 48px; border: 1px solid var(--linea-fuerte); display: flex; align-items: center; justify-content: center; color: var(--tinta); }
.reglas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.reglas > div { background: var(--fondo); padding: 10px 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.reglas .cifra { font-family: var(--mono); font-size: 22px; font-weight: 500; line-height: 1.2; }

.progreso-duelo { display: flex; align-items: center; gap: var(--e4); }
.progreso { display: flex; gap: 4px; flex: 1; }
.segmento { flex: 1; height: 6px; border: 1px solid var(--linea-fuerte); }
.segmento.hecho { background: var(--tinta); border-color: var(--tinta); }
.segmento.actual { background: var(--ambar); border-color: var(--ambar); }
.reloj { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; color: var(--tinta); min-width: 64px; justify-content: flex-end; }
.reloj .i { width: 16px; height: 16px; color: var(--tinta-2); }

.tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabla th { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-3); text-align: left; padding: 0 8px 8px 0; border-bottom: 1px solid var(--linea-fuerte); }
.tabla td { padding: 12px 8px 12px 0; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla .der { text-align: right; padding-right: 0; }
.tabla .pos { font-family: var(--mono); color: var(--tinta-3); width: 40px; }
.tabla .pos .i { color: var(--tinta); }
.tabla .cifra { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla .nombre { font-weight: 700; }
.tabla tr.yo td { background: var(--acento-suave); }
.tabla tr.yo td:first-child { box-shadow: inset 3px 0 0 var(--ambar); padding-left: 10px; }
.marca-retador { display: inline-block; margin-left: 8px; padding: 1px 5px; border: 1px solid var(--linea-fuerte); border-radius: 2px; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.08em; color: var(--tinta-2); vertical-align: 2px; }

.bloque { display: flex; flex-direction: column; gap: var(--e3); }
.revisiones { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea-fuerte); }
.revision { display: grid; grid-template-columns: 24px 1fr; gap: 4px 12px; padding: var(--e4) 0; border-bottom: 1px solid var(--linea); font-size: 15px; }
.revision > .i { margin-top: 2px; }
.revision.ok > .i { color: var(--verde); }
.revision.ko > .i { color: var(--rojo); }
.revision .q { font-weight: 700; line-height: 1.4; }
.revision .q .mono { color: var(--tinta-3); font-weight: 500; margin-right: 6px; }
.revision .det { grid-column: 2; display: flex; flex-direction: column; gap: 2px; color: var(--tinta-2); }
.revision .tuya { color: var(--rojo); }
.revision .correcta { color: var(--tinta); font-weight: 600; }
.revision .correcta b { color: var(--verde); font-weight: 600; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; margin-right: 6px; }
.revision .tuya b { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; margin-right: 6px; }
.rotulo-juego .casillas { align-items: center; height: 21px; }
.reglas .cifra .i { width: 22px; height: 22px; margin: 2px 0 3px; }

/* Figura de la pregunta (diaria y duelo) */
.figura { margin: 0; padding: 10px; background: #fff; border: 1px solid var(--linea-fuerte); border-radius: 6px; }
.figura img { display: block; width: 100%; height: auto; max-height: 340px; object-fit: contain; }

/* ── Libro de Reclamaciones ── */
.form-reclamo [hidden], .resultado[hidden] { display: none; }
.reclamo-tipos { display: grid; gap: var(--e3); margin-top: var(--e5); font-size: 14px; line-height: 1.55; color: var(--tinta-2); }
.reclamo-tipos b { color: var(--tinta); }
.form-reclamo { display: flex; flex-direction: column; gap: var(--e6); line-height: 1.5; }
.form-reclamo fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.form-reclamo legend { display: flex; align-items: baseline; gap: 10px; padding: 0 0 var(--e3); margin-bottom: var(--e4); width: 100%; border-bottom: 1px solid var(--linea); font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.form-reclamo legend .n { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--tinta-3); }
.rejilla-campos { display: grid; gap: var(--e4); }
@media (min-width: 640px) { .rejilla-campos { grid-template-columns: 1fr 1fr; } .rejilla-campos .ancho { grid-column: 1 / -1; } }
.form-reclamo .campo { font-size: 16px; font-weight: 500; }
.form-reclamo textarea.campo { resize: vertical; min-height: 96px; line-height: 1.5; }
.form-reclamo select.campo { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--tinta-2) 50%), linear-gradient(135deg, var(--tinta-2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.eleccion { display: flex; flex-wrap: wrap; gap: var(--e2); }
.eleccion label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--superficie); font-weight: 600; cursor: pointer; }
.eleccion label:has(input:checked) { border-color: var(--tinta); box-shadow: inset 0 -2px 0 var(--ambar); }
.eleccion input, .marcar input { accent-color: var(--ambar); width: 18px; height: 18px; margin: 0; }
.marcar { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; font-weight: 600; cursor: pointer; flex-wrap: wrap; }
.marcar input { margin-top: 2px; flex: none; }
.marcar .msj-error { flex-basis: 100%; }
.msj-error { font-size: 13.5px; font-weight: 600; color: var(--rojo); }
.aviso-error { padding: var(--e3) var(--e4); border: 1px solid var(--rojo); border-left-width: 3px; color: var(--tinta); font-size: 15px; }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-reclamo button[disabled] { opacity: 0.6; cursor: wait; }
.form-reclamo > .btn { align-self: flex-start; }
.hoja-texto { margin: 0; padding: var(--e4); white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); font-size: 13px; line-height: 1.6; background: var(--fondo); border: 1px solid var(--linea); }
.acciones-fila { display: flex; flex-wrap: wrap; gap: var(--e3); }
@media print {
  .cabecera, .pie, .doc-lado, .acciones-fila { display: none !important; }
  .resultado { border: 0; padding: 0; }
  .hoja-texto { border: 0; font-size: 11px; }
}