/* BotFactoryFX · la web (web-v5, 02-10-2026)
   ═══════════════════════════════════════════════════════════════════════════
   Maqueta en Stitch, escrita aquí a mano: lo que exporta Stitch trae Tailwind
   por CDN, Google Fonts e imágenes de Google, y esta web no hace ni una
   petición fuera de su dominio.

   Los colores son los del propio programa (src/app/globals.css: el ámbar
   «fósforo», la tinta, la traza), en sus dos temas. El visitante elige:
   claro, oscuro o sistema. Sin elección, CLARO (el dueño, 03-10-2026: «La
   configuración clara será la que vaya por defecto»); la elección se guarda
   en el navegador (localStorage), nunca en una cookie.

   Tres estados: el :root a secas es el claro; [data-theme=dark], el oscuro; y
   [data-theme=system] sigue a prefers-color-scheme, que sólo mira quien eligió
   «sistema». Las capturas y los vídeos son el programa, que es oscuro, y no
   cambian con el tema. Ver la-web-abre-en-claro.test.ts. */

:root {
  --fondo: #eeedea;
  --fondo-2: #e7e5e0;
  --superficie: #ffffff;
  --superficie-2: #f6f5f2;
  --linea: #d6d3cc;
  --linea-fuerte: #bcb7ac;
  --texto: #1b1d20;
  --texto-2: #3f4349;
  --apagado: #5b6169;
  --ambar: #a9690c;
  --ambar-fondo: #b8730f;
  --ambar-tinta: #ffffff;
  --ambar-suave: rgba(184, 115, 15, 0.1);
  --ambar-borde: rgba(184, 115, 15, 0.45);
  --traza: #33556f;
  --gana: #0b7a53;
  --pierde: #b3362e;
  --papel: #fffefa;
  --papel-tinta: #1b1d20;
  --papel-gris: #6b6f75;
  --papel-regla: #d9d4c8;
  --sombra: 0 1px 2px rgba(27, 29, 32, 0.06), 0 10px 28px rgba(27, 29, 32, 0.09);
  --sombra-papel: 0 2px 4px rgba(27, 29, 32, 0.08), 0 22px 48px rgba(27, 29, 32, 0.16);
  --vidrio: rgba(238, 237, 234, 0.82);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --fondo: #0e1013;
    --fondo-2: #121419;
    --superficie: #171a1f;
    --superficie-2: #1d2128;
    --linea: #2c323a;
    --linea-fuerte: #3b424c;
    --texto: #eceae6;
    --texto-2: #c3c6cb;
    --apagado: #9ca3ac;
    --ambar: #e9962e;
    --ambar-fondo: #e08a1e;
    --ambar-tinta: #17120a;
    --ambar-suave: rgba(224, 138, 30, 0.12);
    --ambar-borde: rgba(224, 138, 30, 0.5);
    --traza: #7f9bb2;
    --gana: #2db07f;
    --pierde: #e25c5c;
    --papel: #f4f1e9;
    --papel-tinta: #1b1d20;
    --papel-gris: #6b6f75;
    --papel-regla: #d6d0c3;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.45), 0 14px 36px rgba(0, 0, 0, 0.38);
    --sombra-papel: 0 2px 6px rgba(0, 0, 0, 0.5), 0 26px 64px rgba(0, 0, 0, 0.6);
    --vidrio: rgba(14, 16, 19, 0.8);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --fondo: #0e1013;
  --fondo-2: #121419;
  --superficie: #171a1f;
  --superficie-2: #1d2128;
  --linea: #2c323a;
  --linea-fuerte: #3b424c;
  --texto: #eceae6;
  --texto-2: #c3c6cb;
  --apagado: #9ca3ac;
  --ambar: #e9962e;
  --ambar-fondo: #e08a1e;
  --ambar-tinta: #17120a;
  --ambar-suave: rgba(224, 138, 30, 0.12);
  --ambar-borde: rgba(224, 138, 30, 0.5);
  --traza: #7f9bb2;
  --gana: #2db07f;
  --pierde: #e25c5c;
  --papel: #f4f1e9;
  --papel-tinta: #1b1d20;
  --papel-gris: #6b6f75;
  --papel-regla: #d6d0c3;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.45), 0 14px 36px rgba(0, 0, 0, 0.38);
  --sombra-papel: 0 2px 6px rgba(0, 0, 0, 0.5), 0 26px 64px rgba(0, 0, 0, 0.6);
  --vidrio: rgba(14, 16, 19, 0.8);
  color-scheme: dark;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

:root {
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ancho: 1180px;
  --margen: clamp(16px, 4vw, 40px);
  --radio: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
/* [hidden] gana siempre: sin esto, cualquier `display` de la página lo pisa, y
   /descarga/ enseñaba sus seis estados a la vez (visto publicado, 03-10-2026). */
[hidden] { display: none !important; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--mono); font-weight: 600; text-wrap: balance; }
::selection { background: var(--ambar-fondo); color: var(--ambar-tinta); }

:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; border-radius: 4px; }

.envoltura { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }

.saltar {
  position: absolute; left: 12px; top: -48px; z-index: 50;
  background: var(--ambar-fondo); color: var(--ambar-tinta);
  padding: 8px 14px; border-radius: 6px; font-family: var(--mono); font-size: 0.85rem; text-decoration: none;
}
.saltar:focus { top: 12px; }

.ceja {
  font-family: var(--mono); font-size: 0.76rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ambar);
  display: inline-flex; align-items: center; gap: 10px;
}
.ceja::before {
  /* La raya de The Split, en pequeño: lo que se vio y lo que no. */
  content: ""; width: 18px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--ambar) 0 55%, transparent 55% 70%, var(--ambar) 70%);
  opacity: 0.8;
}

.cifra { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── Botones ──────────────────────────────────────────────────────────────── */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 20px; border-radius: 8px;
  font-family: var(--mono); font-size: 0.92rem; font-weight: 500; letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1px solid transparent; transition: background-color 0.15s, border-color 0.15s, transform 0.15s, color 0.15s;
}
.boton:active { transform: translateY(1px); }
.boton-ambar { background: var(--ambar-fondo); color: var(--ambar-tinta); }
.boton-ambar:hover { background: color-mix(in srgb, var(--ambar-fondo) 86%, var(--texto)); }
.boton-linea { border-color: var(--linea-fuerte); color: var(--texto); background: transparent; }
.boton-linea:hover { border-color: var(--ambar-borde); background: var(--ambar-suave); }
.boton-chico { min-height: 36px; padding: 0 14px; font-size: 0.84rem; }
/* El carrito de la cabecera (03-10-2026): cuadrado y del alto de los demás
   botones de la barra; lleva a los programas, que empiezan por el gratuito. */
.boton-carrito { width: 36px; padding: 0; }
.boton-carrito svg { width: 18px; height: 18px; }
.boton .flecha { transition: transform 0.15s; }
.boton:hover .flecha { transform: translateX(3px); }

/* ── Barra ────────────────────────────────────────────────────────────────── */

.barra {
  position: sticky; top: 0; z-index: 40;
  background: var(--vidrio);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--linea);
}
.barra-dentro { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--mono); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
.marca img { width: 30px; height: 30px; }
.marca b { color: var(--ambar); font-weight: 600; }
.barra-enlaces { display: flex; gap: 2px; margin-left: 4px; }
.barra-enlaces a {
  text-decoration: none; font-size: 0.86rem; color: var(--texto-2);
  padding: 8px 7px; border-radius: 6px; white-space: nowrap;
}
.barra-enlaces a:hover, .barra-enlaces a[aria-current="page"] { color: var(--texto); background: var(--superficie-2); }
.barra-acciones { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.idioma {
  font-family: var(--mono); font-size: 0.8rem; text-decoration: none; color: var(--texto-2);
  border: 1px solid var(--linea); border-radius: 6px; padding: 6px 9px;
}
.idioma:hover { border-color: var(--ambar-borde); color: var(--texto); }

.tema {
  display: inline-flex; border: 1px solid var(--linea); border-radius: 8px; padding: 2px; gap: 2px;
}
.tema button {
  appearance: none; border: 0; background: transparent; color: var(--apagado);
  width: 30px; height: 28px; border-radius: 6px; cursor: pointer; display: grid; place-items: center;
}
.tema button:hover { color: var(--texto); }
.tema button[aria-pressed="true"] { background: var(--superficie-2); color: var(--ambar); box-shadow: inset 0 0 0 1px var(--linea); }
.tema svg { width: 16px; height: 16px; }

.menu-movil { display: none; }
.menu-movil summary {
  list-style: none; cursor: pointer; font-family: var(--mono); font-size: 0.85rem;
  border: 1px solid var(--linea); border-radius: 6px; padding: 6px 10px;
}
.menu-movil summary::-webkit-details-marker { display: none; }
.menu-movil nav {
  position: absolute; right: var(--margen); top: 60px; min-width: 220px; z-index: 45;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 8px; display: grid;
}
.menu-movil nav a { text-decoration: none; padding: 10px 12px; border-radius: 6px; }
.menu-movil nav a:hover { background: var(--superficie-2); }

/* El corte del menú: 1080 px hasta el 09-10-2026. Con la pestaña de Contacto
   la barra en castellano pide ~1.061 px de contenido sin partir ningún texto
   —medido: a 1.145 px de ventana se pasaba 11 px—, así que el menú de
   escritorio sale desde 1.181, el ancho de la web (--ancho). Los enlaces no se
   parten (nowrap): antes, «La factura» y «Cómo funciona» bajaban a dos líneas
   en cuanto apretaba el sitio, y la barra crecía a 62 px.
   11-10-2026, con «Notas» / «Lab notes» en el menú: a 1.181 px de ventana
   quedan 20 px entre el menú y los botones en castellano y 52 en inglés.
   31-10-2026, con «La fábrica» / «The Factory»: ya con «Duelo en directo» la
   barra en castellano pedía 1.187 px, más que el ancho de la web (1.180), y a
   1.181 px de ventana el carrito se salía 16 px por la derecha. Con la fábrica
   pedía 1.274. Ahora la letra del menú baja de 0,9 a 0,86 rem, los enlaces
   llevan 7 px a cada lado (antes 10) y 2 px entre ellos (antes 4), y la barra
   16 px entre sus tres partes (antes 20): pide 1.162 px en castellano y ~1.045
   en inglés (medido a 1.600 px de ventana). El menú de escritorio sale cuando
   caben con holgura: 1.162 + 2 × 40 de margen + 15 de barra de desplazamiento
   = 1.257; desde 1.271. OJO: con «Referidos» de vuelta (la venta reabierta)
   el castellano pide 1.237 y no cabe en 1.180 a ningún ancho. */
@media (max-width: 1270px) {
  .barra-enlaces { display: none; }
  .menu-movil { display: block; }
}
@media (max-width: 560px) {
  .barra-acciones .boton-ambar { display: none; }
  /* En un teléfono no caben marca, tema, idioma y menú: el tema se elige en el pie. */
  .barra .tema { display: none; }
  .barra-dentro { gap: 12px; }
}

/* ── Héroe ────────────────────────────────────────────────────────────────── */

.heroe { padding: clamp(40px, 7vw, 88px) 0 clamp(48px, 7vw, 96px); }
.heroe-rejilla { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.heroe h1 {
  font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1.02; letter-spacing: -0.04em; margin: 18px 0 22px;
}
.heroe h1 span { display: block; color: var(--ambar); }
.heroe .entradilla { font-size: clamp(1.08rem, 1.5vw, 1.22rem); color: var(--texto-2); max-width: 54ch; }
/* El lema de la casa (el dueño, 18-10-2026), bajo el titular desde el 23-10-2026. */
.heroe-lema {
  margin: -4px 0 22px; padding-left: 14px; border-left: 3px solid var(--ambar);
  font-size: clamp(1.12rem, 1.7vw, 1.34rem); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--texto);
  text-wrap: balance;
}
.heroe-lema span { color: var(--ambar); }
.heroe .acciones { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 18px; }
.letra-chica { font-family: var(--mono); font-size: 0.78rem; color: var(--apagado); display: flex; flex-wrap: wrap; gap: 6px 14px; }
.letra-chica span { display: inline-flex; align-items: center; gap: 6px; }
.letra-chica span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ambar); opacity: 0.8; }

.ventana {
  border: 1px solid var(--linea); border-radius: 12px; overflow: hidden;
  background: var(--superficie); box-shadow: var(--sombra);
}
.ventana-barra {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  border-bottom: 1px solid var(--linea); background: var(--superficie-2);
  font-family: var(--mono); font-size: 0.74rem; color: var(--apagado);
}
.ventana-barra i { width: 9px; height: 9px; border-radius: 50%; background: var(--linea-fuerte); display: inline-block; }
.ventana-barra span { margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ventana video, .ventana img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: #0e1013; }
.pie-de-foto { font-size: 0.86rem; color: var(--apagado); margin-top: 12px; max-width: 70ch; }
.pie-de-foto b { color: var(--texto-2); font-weight: 600; }
.video-mando {
  float: right; margin-left: 10px; font-family: var(--mono); font-size: 0.75rem;
  background: transparent; border: 1px solid var(--linea); color: var(--texto-2); border-radius: 6px; padding: 3px 8px; cursor: pointer;
}

@media (max-width: 900px) {
  .heroe-rejilla { grid-template-columns: 1fr; }
}

/* ── Secciones ────────────────────────────────────────────────────────────── */

.seccion { padding: clamp(64px, 9vw, 120px) 0; border-top: 1px solid var(--linea); }
.seccion-alterna { background: var(--fondo-2); }
.seccion h2 { font-size: clamp(1.9rem, 3.6vw, 2.85rem); line-height: 1.08; letter-spacing: -0.035em; margin: 16px 0 18px; max-width: 22ch; }
.seccion .entradilla { font-size: 1.12rem; color: var(--texto-2); max-width: 62ch; }
.cabecera-centrada { text-align: center; display: grid; justify-items: center; }
.cabecera-centrada h2 { max-width: 26ch; }

/* ── La factura ───────────────────────────────────────────────────────────── */

.factura-rejilla {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(28px, 4vw, 56px);
  align-items: start; margin-top: clamp(36px, 5vw, 56px);
}

.tique {
  position: relative; background: var(--papel); color: var(--papel-tinta);
  font-family: var(--mono); font-size: 0.92rem; line-height: 1.45;
  padding: 30px clamp(18px, 3vw, 34px) 46px; border-radius: 4px 4px 0 0;
  box-shadow: var(--sombra-papel); transform: rotate(-0.6deg);
  margin-bottom: 12px;
}
.tique::after {
  /* El borde de abajo, arrancado de la impresora: dientes del color del papel. */
  content: ""; position: absolute; left: 0; right: 0; bottom: -11px; height: 12px;
  background:
    linear-gradient(135deg, var(--papel) 50%, transparent 50%) 0 0 / 16px 12px repeat-x,
    linear-gradient(225deg, var(--papel) 50%, transparent 50%) 0 0 / 16px 12px repeat-x;
}
.tique-cabeza { text-align: center; border-bottom: 1px dashed var(--papel-regla); padding-bottom: 14px; margin-bottom: 14px; }
.tique-cabeza strong { display: block; font-size: 1rem; letter-spacing: 0.12em; }
.tique-cabeza small { color: var(--papel-gris); font-size: 0.75rem; letter-spacing: 0.06em; }
.tique ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tique li a { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline; text-decoration: none; color: inherit; }
.tique li a:hover .concepto { text-decoration: underline; text-underline-offset: 3px; }
.tique .relleno { border-bottom: 2px dotted var(--papel-regla); transform: translateY(-4px); }
.tique .importe { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tique .nota { grid-column: 1 / -1; color: var(--papel-gris); font-size: 0.78rem; margin-top: -4px; }
.tique-total { margin-top: 18px; padding-top: 14px; border-top: 2px solid var(--papel-tinta); display: grid; grid-template-columns: 1fr auto; font-weight: 600; letter-spacing: 0.04em; }
.tique-total small { grid-column: 1 / -1; font-weight: 400; color: var(--papel-gris); font-size: 0.78rem; letter-spacing: 0; margin-top: 6px; }

.tique-bfx {
  position: relative; background: var(--superficie); color: var(--texto);
  border: 1px solid var(--ambar-borde); border-radius: 10px; padding: 26px 24px 24px;
  font-family: var(--mono); font-size: 0.9rem; box-shadow: var(--sombra);
  transform: rotate(1.2deg); margin-top: 28px;
}
.tique-bfx::before {
  /* La grapa. */
  content: ""; position: absolute; top: -9px; left: 50%; width: 46px; height: 12px; margin-left: -23px;
  border: 2px solid var(--linea-fuerte); border-bottom: 0; border-radius: 3px 3px 0 0;
}
.tique-bfx header { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px dashed var(--linea-fuerte); }
.tique-bfx header img { width: 28px; height: 28px; }
.tique-bfx header b { color: var(--ambar); }
.tique-bfx dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 10px 14px; }
.tique-bfx dt { color: var(--texto-2); }
.tique-bfx dd { margin: 0; text-align: right; font-weight: 600; }
.tique-bfx dd.precio { color: var(--ambar); font-size: 1.05rem; }
.tique-bfx .boton { width: 100%; margin-top: 20px; }

.remate {
  margin: clamp(40px, 5vw, 64px) auto 0; max-width: 64ch; text-align: center;
  font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.45; color: var(--texto);
}
.remate em { font-style: normal; color: var(--ambar); }

/* La impresora: las líneas salen una a una cuando el tique entra en pantalla.
   Sin JavaScript, o con el movimiento reducido, está todo impreso desde el
   principio: la animación es un adorno, no la manera de leerlo. */
.js .tique:not(.impreso) li, .js .tique:not(.impreso) .tique-total { opacity: 0; transform: translateY(-6px); }
.js .tique li, .js .tique .tique-total { transition: opacity 0.35s ease, transform 0.35s ease; }
.js .tique.impreso li:nth-child(1) { transition-delay: 0.05s; }
.js .tique.impreso li:nth-child(2) { transition-delay: 0.3s; }
.js .tique.impreso li:nth-child(3) { transition-delay: 0.55s; }
.js .tique.impreso li:nth-child(4) { transition-delay: 0.8s; }
.js .tique.impreso li:nth-child(5) { transition-delay: 1.05s; }
.js .tique.impreso li:nth-child(6) { transition-delay: 1.3s; }
.js .tique.impreso .tique-total { transition-delay: 1.65s; }
.js .tique-bfx { transition: opacity 0.5s ease 2s, transform 0.5s cubic-bezier(.2, 1.4, .4, 1) 2s; }
.js .factura-rejilla:not(.impresa) .tique-bfx { opacity: 0; transform: rotate(6deg) translateY(-14px) scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .js .tique li, .js .tique .tique-total, .js .tique-bfx { transition: none !important; opacity: 1 !important; transform: none !important; }
  .js .tique-bfx { transform: rotate(1.2deg) !important; }
}

@media (max-width: 900px) {
  .factura-rejilla { grid-template-columns: 1fr; }
  .tique, .tique-bfx { transform: none; }
  /* Sin giro también antes de imprimirse: girado, el tique asomaba 16 px por
     la derecha de un teléfono y la página entera se movía de lado. */
  .js .factura-rejilla:not(.impresa) .tique-bfx { transform: translateY(-10px); }
}

/* ── Línea a línea ────────────────────────────────────────────────────────── */

.libro { margin-top: clamp(36px, 5vw, 56px); border-top: 1px solid var(--linea); }
.asiento {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); gap: clamp(20px, 4vw, 56px);
  padding: clamp(28px, 4vw, 44px) 0; border-bottom: 1px solid var(--linea); scroll-margin-top: 80px;
}
.asiento-titulo h3 { font-size: 1.35rem; letter-spacing: -0.02em; }
.cambio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: 12px; font-family: var(--mono); font-size: 0.95rem; }
.cambio .antes { color: var(--apagado); text-decoration: line-through; text-decoration-color: var(--pierde); text-decoration-thickness: 2px; }
.cambio .despues { color: var(--ambar); font-weight: 600; }
.cambio .igual { color: var(--apagado); }
.asiento-cuerpo { display: grid; gap: 16px; color: var(--texto-2); }
.asiento-cuerpo p { max-width: 68ch; }
.asiento-cuerpo strong { color: var(--texto); font-weight: 600; }
.lema { font-family: var(--mono); font-size: 1.05rem; color: var(--texto); }
.lema::before { content: "› "; color: var(--ambar); }
.comprobaciones {
  list-style: none; margin: 4px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px;
  font-family: var(--mono); font-size: 0.84rem; color: var(--texto);
}
.comprobaciones li { display: flex; gap: 8px; align-items: baseline; }
.comprobaciones li span { color: var(--apagado); font-variant-numeric: tabular-nums; }
.asiento > .captura { grid-column: 1 / -1; }
.caso { border-left: 3px solid var(--ambar); padding: 4px 0 4px 16px; color: var(--texto); }
.captura {
  border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; box-shadow: var(--sombra); background: var(--superficie);
}
.captura img { width: 100%; height: auto; }
.captura figcaption { font-size: 0.82rem; color: var(--apagado); padding: 10px 14px; border-top: 1px solid var(--linea); background: var(--superficie-2); }

@media (max-width: 900px) {
  .asiento { grid-template-columns: 1fr; }
}

/* ── Tres programas ───────────────────────────────────────────────────────── */

.programas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: clamp(36px, 5vw, 56px); align-items: stretch; }
.programa {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; padding: 24px;
}
.programa-destacado { border-color: var(--ambar-borde); box-shadow: 0 0 0 1px var(--ambar-borde), var(--sombra); }
.programa .etiqueta { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--apagado); }
.programa h3 { font-size: 1.3rem; }
.programa .precio { font-family: var(--mono); font-size: 1.6rem; font-weight: 600; color: var(--ambar); }
.programa .precio small { font-size: 0.8rem; color: var(--apagado); font-weight: 400; }
.programa p { color: var(--texto-2); font-size: 0.98rem; }
.programa .boton { margin-top: auto; }
.sistemas { text-align: center; font-family: var(--mono); font-size: 0.85rem; color: var(--apagado); margin-top: 22px; }

@media (max-width: 900px) {
  .programas { grid-template-columns: 1fr; }
}

/* ── Franja de condiciones ────────────────────────────────────────────────── */

.franja { background: var(--superficie); border-block: 1px solid var(--linea); padding: 22px 0; }
.franja ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; font-family: var(--mono); font-size: 0.86rem; color: var(--texto-2); }
.franja li { display: inline-flex; align-items: center; gap: 8px; }
.franja li::before { content: "✓"; color: var(--ambar); }

.compra-justa {
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start;
  max-width: 820px; margin: clamp(36px, 5vw, 56px) auto 0; padding: 22px 24px;
  border: 1px dashed var(--linea-fuerte); border-radius: 12px; background: var(--superficie);
}
.compra-justa svg { width: 28px; height: 28px; color: var(--ambar); }
.compra-justa p { color: var(--texto-2); }
.compra-justa p + p { margin-top: 8px; }
.compra-justa strong { color: var(--texto); }

/* ── Pie ──────────────────────────────────────────────────────────────────── */

.pie { border-top: 1px solid var(--linea); padding: 56px 0 40px; font-size: 0.92rem; color: var(--texto-2); background: var(--fondo-2); }
.pie-rejilla { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 32px; }
.pie h3 { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--apagado); margin-bottom: 12px; font-weight: 500; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--ambar); }
.pie .legal { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--linea); display: grid; gap: 10px; font-size: 0.84rem; color: var(--apagado); max-width: 100ch; }
.pie .controles { display: flex; gap: 10px; align-items: center; margin-top: 16px; }

@media (max-width: 900px) {
  .pie-rejilla { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .pie-rejilla { grid-template-columns: 1fr; }
}

/* ── Páginas interiores ───────────────────────────────────────────────────── */

.portada-interior { padding: clamp(48px, 7vw, 88px) 0 clamp(28px, 4vw, 48px); }
.portada-interior h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); letter-spacing: -0.04em; line-height: 1.05; margin: 16px 0 18px; }
.portada-interior .entradilla { font-size: 1.15rem; color: var(--texto-2); max-width: 62ch; }

.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; container: tarjetas / inline-size; }
/* LA TARJETA HUÉRFANA (03-10-2026). Con un número impar de tarjetas y sitio
   para dos columnas —una rejilla de 538 a 815 px: un portátil a media
   pantalla, una tableta, el panel lateral—, la última quedaba sola debajo y la
   columna de al lado, vacía: a 864 px de ventana, 251 px de hueco (el 58 %) en
   Recomendaciones, y lo mismo en Descargas y Documentación, en los dos
   idiomas. Ocupa entonces las dos columnas, y las dos terminan a la misma
   altura. Con tres columnas o con una no hace falta.
   Los cortes salen de la rejilla: 538 = 2·260 + 18, y 816 = 3·260 + 2·18. Si
   cambian el mínimo o el hueco, cambian con ellos (lo vigila
   ninguna-tarjeta-huerfana-en-la-web.test.ts). */
@container tarjetas (min-width: 538px) and (max-width: 815.98px) {
  .tarjetas > .tarjeta:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; padding: 22px; display: grid; gap: 10px; align-content: start; }
.tarjeta h3 { font-size: 1.1rem; }
.tarjeta p { color: var(--texto-2); font-size: 0.97rem; }

.aviso { border-left: 3px solid var(--ambar); background: var(--ambar-suave); padding: 14px 18px; border-radius: 0 8px 8px 0; color: var(--texto); }

.tabla-envoltura { overflow-x: auto; border: 1px solid var(--linea); border-radius: 10px; background: var(--superficie); }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--apagado); font-weight: 500; }
tr:last-child td { border-bottom: 0; }
code, .codigo { font-family: var(--mono); font-size: 0.86em; background: var(--superficie-2); border: 1px solid var(--linea); border-radius: 5px; padding: 1px 6px; word-break: break-all; }
/* Lo que no se parte dentro de un code: el ?ref= de un enlace, que se cortaba
   y dejaba «-…» solo en la línea de abajo (03-10-2026). */
.junto { white-space: nowrap; }
pre { font-family: var(--mono); font-size: 0.84rem; background: var(--superficie-2); border: 1px solid var(--linea); border-radius: 8px; padding: 14px 16px; overflow-x: auto; }

.oculto { display: none !important; }

/* Lo que aún no existe: se ve, pero no se pulsa. */
.pendiente { opacity: 0.45; pointer-events: none; }
/* Notas de obra: el publicador se niega a publicar una página que lleve una. */
.borrador {
  font-family: var(--mono); font-size: 0.8rem; color: var(--pierde);
  border: 1px dashed var(--pierde); border-radius: 6px; padding: 6px 10px;
}

/* ── Contacto (09-10-2026) ─────────────────────────────────────────────────
   El dueño: «"contact" merecería más visibilidad… su pestaña en el menú», y
   con los logos de YouTube y Telegram «para que el usuario lo identifique en
   seguida». Los logos van DENTRO de la página, como SVG: esta web no carga
   nada de fuera de su dominio. Sus colores son los de cada marca y no cambian
   con el tema; el sobre del correo es el ámbar de la casa. */
.canales .canal { display: flex; flex-direction: column; gap: 10px; }
.canal-cabeza { display: flex; align-items: center; gap: 12px; }
.logo-canal { height: 36px; width: auto; flex: none; }
.logo-correo { color: var(--ambar-fondo); }
.canal .direccion { font-family: var(--mono); font-size: 0.92rem; color: var(--texto); overflow-wrap: anywhere; }
.canal .boton { margin-top: auto; align-self: flex-start; }
/* En los pies, el logo en pequeño delante del nombre del canal. */
.con-logo { display: inline-flex; align-items: center; gap: 6px; vertical-align: bottom; }
.logo-chico { height: 1.05em; width: auto; flex: none; }

/* Los manuales en PDF, en cada apartado de Descargas (09-10-2026). Los copia el
   publicador desde los documentos de la caja, con su versión comprobada. */
.manuales { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 0.92rem; color: var(--texto-2); }
.manuales svg { width: 18px; height: 18px; color: var(--ambar); flex: none; }

/* Pagar con cripto (10-10-2026): el camino de la tarjeta a la descarga, un
   paso por fila con su número al lado —cinco pasos en la rejilla de tres de
   Referidos dejaban dos colgando—. */
.pasos-pago { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pasos-pago li {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 16px; row-gap: 6px;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; padding: 20px 22px;
}
.pasos-pago li > span {
  grid-row: 1 / span 2; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--ambar-suave); color: var(--ambar); border: 1px solid var(--ambar-borde); font-family: var(--mono);
}
.pasos-pago h3 { font-size: 1.1rem; align-self: center; }
.pasos-pago p { color: var(--texto-2); font-size: 0.97rem; max-width: 72ch; }
.avisos-pago { margin: 0; padding-left: 1.1rem; display: grid; gap: 10px; }

/* Preguntas antes de comprar (11-10-2026): cada una se abre sola; la columna
   empieza donde la cabecera y no pasa de una lectura cómoda. */
.preguntas { display: grid; gap: 10px; }
.preguntas > * { max-width: 820px; }
.preguntas h2 { font-size: 1.4rem; margin: 30px 0 6px; }
.preguntas h2:first-child { margin-top: 0; }
.pregunta { background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; }
.pregunta summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding: 16px 20px; font-weight: 600;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: "+"; color: var(--ambar); font-family: var(--mono); font-weight: 700; flex: none; }
.pregunta[open] summary::after { content: "\2212"; }
.pregunta summary:focus-visible { outline-offset: -2px; border-radius: 12px; }
.pregunta p { padding: 0 20px 18px; color: var(--texto-2); font-size: 0.97rem; max-width: 72ch; }

/* Notas del laboratorio (11-10-2026): texto largo para leer, a la medida de
   una línea cómoda; la tabla se desliza si no cabe, la página no.
   SÓLO article.nota (12-10-2026): con «.nota» a secas, la rejilla alcanzó a
   las notas pequeñas de toda la web —<p class="nota">— y cada cursiva, negrita
   o enlace de esos párrafos salía en su propia línea (lo vio el dueño en la
   página de compra). */
article.nota { max-width: 72ch; display: grid; gap: 14px; }
article.nota h2 { font-size: 1.45rem; margin-top: 22px; }
article.nota ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 8px; }
article.nota .captura { margin: 8px 0; }
article.nota .aviso { margin-top: 10px; }
article.nota .aviso h3 { margin-bottom: 8px; }
article.nota .tabla { overflow-x: auto; }
article.nota td:first-child { white-space: nowrap; }
.nota-fin { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 18px; }
.nota-fecha { font-family: var(--mono); font-size: 0.78rem; color: var(--apagado); }
.notas-lista { display: grid; gap: 14px; max-width: 820px; }
.notas-lista h3 a { color: inherit; text-decoration: none; }
.notas-lista h3 a:hover { text-decoration: underline; }
/* Los gráficos de las notas: SVG dentro de la página, con los colores de la web
   por clase, así que el tema oscuro los cambia solo. Ámbar = lo que hay que
   mirar (lo inventado, la fuga, el número que engaña); traza = el contexto. */
.grafica { margin: 8px 0; padding: 18px 18px 12px; background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; }
.grafica svg { display: block; width: 100%; height: auto; }
.grafica figcaption { font-size: 0.84rem; color: var(--apagado); margin-top: 10px; }
.g-t { fill: var(--apagado); font-family: var(--mono); font-size: 11px; }
.g-tf { fill: var(--texto-2); font-family: var(--mono); font-size: 11px; font-weight: 600; }
.g-eje { stroke: var(--linea); stroke-width: 1; }
.g-real, .g-barra { fill: var(--traza); }
.g-inventada, .g-barra-ojo { fill: var(--ambar); }
.g-falta { stroke: var(--linea-fuerte); stroke-width: 1; }
.g-raya { stroke: var(--linea-fuerte); stroke-width: 2; }
.g-cero-marca { fill: var(--linea-fuerte); }
.g-vela line, .g-vela rect { stroke: var(--traza); stroke-width: 1.4; fill: var(--superficie); }
.g-vela-baja rect { fill: var(--traza); }
.g-vela-media line, .g-vela-media rect { stroke: var(--ambar); stroke-width: 1.6; fill: var(--ambar); }
.g-guia { stroke: var(--ambar); stroke-width: 1.3; stroke-dasharray: 5 4; fill: none; }
.g-guia-neutra { stroke: var(--texto-2); stroke-width: 1; stroke-dasharray: 3 3; }
.g-leyenda { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-size: 0.82rem; color: var(--texto-2); margin-top: 12px; }
.g-item { display: inline-flex; align-items: center; gap: 6px; }
.g-muestra { display: inline-block; width: 14px; height: 10px; border-radius: 2px; }
.g-muestra-real { background: var(--traza); }
.g-muestra-inventada { background: var(--ambar); }
.g-muestra-falta { background: repeating-linear-gradient(45deg, var(--linea-fuerte) 0 2px, transparent 2px 5px); border: 1px solid var(--linea-fuerte); }
.datos { border: 1px solid var(--linea); border-radius: 12px; background: var(--superficie); }
.datos summary { cursor: pointer; padding: 14px 18px; font-weight: 600; }
.datos[open] summary { border-bottom: 1px solid var(--linea); }
.datos .tabla { padding: 4px 6px 8px; }
.semaforo { list-style: none; padding-left: 0; }
.semaforo li { position: relative; padding-left: 30px; }
.semaforo li::before { position: absolute; left: 0; top: 0; width: 20px; text-align: center; font-weight: 700; }
.semaforo li.bien::before { content: "✓"; color: var(--gana); }
.semaforo li.mal::before { content: "✕"; color: var(--pierde); }

/* El duelo en directo (24-10-2026): BotFactoryFX en ámbar, StrategyQuant X en el azul de las trazas, el S&P de puntos. */
.g-linea { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.g-linea-bfx { stroke: var(--ambar); }
.g-linea-sqx { stroke: var(--traza); }
.g-linea-mercado { stroke: var(--apagado); stroke-width: 1.6; stroke-dasharray: 2 5; }
.g-punto { stroke: var(--superficie); stroke-width: 1.5; }
.g-punto-bfx { fill: var(--ambar); }
.g-punto-sqx { fill: var(--traza); }
.g-punto-mercado { fill: var(--apagado); }
.g-fin-bfx { fill: var(--ambar); }
.g-fin-sqx { fill: var(--traza); }
.g-muestra-bfx { background: var(--ambar); }
.g-muestra-sqx { background: var(--traza); }
.g-muestra-mercado { height: 3px; background: repeating-linear-gradient(90deg, var(--apagado) 0 2px, transparent 2px 5px); }
.duelo-directo h2 { margin-top: 40px; }
.duelo-directo h2:first-child { margin-top: 0; }
.duelo-directo ul { padding-left: 20px; }
.duelo-directo li { margin: 10px 0; color: var(--texto-2); }
.duelo-directo .aviso, .duelo-directo .grafica, .duelo-directo .datos { margin-top: 18px; }
.duelo-directo .datos .tabla { overflow-x: auto; }
/* La ficha del duelo (31-10-2026): mercado, vela y cuántas de cada lado, a la vista bajo el título. */
.duelo-ficha { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.duelo-ficha li { border: 1px solid var(--linea); border-radius: 6px; padding: 6px 12px; font-size: 0.95rem; color: var(--texto); background: var(--superficie); }
.duelo-ficha li span { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--apagado); margin-right: 6px; }
/* En el móvil el gráfico no encoge hasta dejar las letras ilegibles: se desliza dentro de su marco. */
.duelo-directo .grafica { overflow-x: auto; }
.duelo-directo .grafica svg { min-width: 620px; }
.tarjeta .duelo-cifra { font-family: var(--mono); font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--texto); }
.tarjeta.duelo-lado-bfx .duelo-cifra { color: var(--ambar); }
.tarjeta.duelo-lado-sqx .duelo-cifra { color: var(--traza); }
.tarjeta .duelo-que { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--apagado); margin-top: -4px; }

/* «The Factory / La fábrica» (31-10-2026): una tarjeta por estrategia en cuarentena, con su tabla y su gráfico; lo vivo
   en ámbar, como BotFactoryFX en el duelo, y el ritmo de su backtest de rayas, en el azul de las trazas. Todo con el
   prefijo fabrica- (esta hoja es la de toda la web). Dos columnas desde 2·420 + 18 = 858 px de rejilla: con un número
   impar, la última ocupa las dos y pone la tabla y el gráfico lado a lado, para que las columnas acaben a la vez. */
.fabrica-rotulo { margin-top: 20px; max-width: 72ch; }
.fabrica .g-leyenda { margin-top: 4px; }
.fabrica-grupo { margin-top: 30px; font-size: 1.05rem; }
.fabrica-grupo + p { color: var(--texto-2); margin-top: 6px; max-width: 72ch; }
.fabrica-robots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 18px; margin-top: 16px; container: fabrica / inline-size; }
.fabrica-robot { background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; padding: 20px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.fabrica-robot h3 { font-size: 1.05rem; }
.fabrica-simulado { justify-self: start; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ambar); background: var(--ambar-suave); border: 1px solid var(--ambar-borde); border-radius: 999px; padding: 1px 8px; }
.fabrica-meta { color: var(--apagado); font-size: 0.88rem; }
.fabrica-veredicto { font-size: 0.92rem; color: var(--texto-2); padding: 6px 10px; border-radius: 6px; background: var(--superficie-2); }
.fabrica-veredicto-gana b { color: var(--gana); }
.fabrica-veredicto-pierde b { color: var(--pierde); }
.fabrica-apagada { font-size: 0.92rem; color: var(--texto); padding: 6px 10px; border-left: 3px solid var(--pierde); background: var(--superficie-2); border-radius: 0 6px 6px 0; }
.fabrica-cuerpo { display: grid; gap: 12px; min-width: 0; }
.fabrica-tabla { font-size: 0.86rem; }
.fabrica-tabla th, .fabrica-tabla td { padding: 5px 6px; text-align: right; }
.fabrica-tabla thead th { font-size: 0.68rem; letter-spacing: 0.06em; }
.fabrica-tabla th[scope="row"] { text-align: left; font-family: var(--sans); font-size: 0.86rem; letter-spacing: 0; text-transform: none; color: var(--texto-2); }
.fabrica-tabla tr:last-child th { border-bottom: 0; }
.fabrica-grafica { margin: 0; }
.fabrica-grafica svg { display: block; width: 100%; height: auto; }
.fabrica-ritmo { font-size: 0.85rem; color: var(--apagado); }
.g-linea-promesa { stroke: var(--traza); stroke-width: 1.6; stroke-dasharray: 5 4; }
.g-muestra-promesa { height: 3px; background: repeating-linear-gradient(90deg, var(--traza) 0 5px, transparent 5px 9px); }
@container fabrica (min-width: 858px) {
  .fabrica-robots > .fabrica-robot:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .fabrica-robots > .fabrica-robot:last-child:nth-child(odd) .fabrica-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px; }
}

/* «Coming soon / Próximamente» (24-10-2026): el móvil y la tableta, sin fecha. */
.pronto { font-size: 0.93rem; color: var(--texto-2); }
/* «Nuevo» (26-10-2026): la misma pastilla que «Próximamente», en verde, para lo que ya está. */
.nuevo-etiqueta { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #1f7a4d; background: rgba(31, 122, 77, 0.1); border: 1px solid rgba(31, 122, 77, 0.45); vertical-align: 1px; }
@media (prefers-color-scheme: dark) { :root[data-theme="system"] .nuevo-etiqueta { color: #4cc38a; background: rgba(76, 195, 138, 0.12); border-color: rgba(76, 195, 138, 0.5); } }
:root[data-theme="dark"] .nuevo-etiqueta { color: #4cc38a; background: rgba(76, 195, 138, 0.12); border-color: rgba(76, 195, 138, 0.5); }

/* Las apps del móvil en la portada (26-10-2026): cada una, su teléfono al lado; en un móvil, debajo. */
.movil-apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: clamp(36px, 5vw, 56px); }
.movil-app { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 22px; align-items: start; padding: 22px; background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; }
.movil-app .telefono { margin: 0; border-radius: 22px; overflow: hidden; border: 6px solid #0e1013; box-shadow: var(--sombra); background: #0e1013; }
.movil-app .telefono img { display: block; width: 100%; height: auto; }
.movil-texto { display: grid; gap: 12px; align-content: start; }
.movil-texto .etiqueta { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--apagado); }
.movil-texto h3 { font-size: 1.3rem; }
.movil-texto p, .movil-garantias { color: var(--texto-2); font-size: 0.98rem; }
.movil-garantias { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }
/* Lo que gana quien tiene el escritorio (26-10-2026): el dueño quiere que se vea claro. */
.movil-con-escritorio { padding: 12px 14px; border-radius: 10px; background: var(--ambar-suave); border: 1px solid var(--ambar-borde); }
.movil-con-escritorio p { color: var(--texto); }
.movil-con-escritorio strong { color: var(--ambar); }
.movil-texto .boton { justify-self: start; }
.movil-texto .direccion { font-family: var(--mono); font-size: 0.8rem; color: var(--apagado); }
.movil-instalar { text-align: center; font-size: 0.9rem; color: var(--apagado); margin-top: 22px; }
@media (max-width: 980px) { .movil-apps { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .movil-app { grid-template-columns: minmax(0, 1fr); } .movil-app .telefono { max-width: 240px; justify-self: center; } }

.pronto-etiqueta { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ambar); background: var(--ambar-suave); border: 1px solid var(--ambar-borde); vertical-align: 1px; }

/* Los referidos, OCULTOS mientras la venta está cerrada (24-10-2026): ver scripts/referidos-ocultos.py. Reabrir el
   programa es BORRAR esta regla (y el aviso de arriba de las páginas de referidos). */
[data-referidos] { display: none !important; }

/* El expediente de cada estrategia de la fábrica (01-11-2026): su backtest, cómo la juzgó el juez y lo que lleva en vivo. */
.fabrica-robot h3 a { color: inherit; text-decoration: none; }
.fabrica-robot h3 a:hover, .fabrica-robot h3 a:focus-visible { color: var(--ambar); text-decoration: underline; }
.fabrica-al-expediente { font-size: 0.9rem; }
.fabrica-al-expediente a { color: var(--ambar); font-weight: 600; text-decoration: none; }
.fabrica-al-expediente a:hover, .fabrica-al-expediente a:focus-visible { text-decoration: underline; }
.fabrica-expediente h3 { margin-top: 28px; font-size: 1.02rem; }
.fabrica-expediente h2 + p, .fabrica-expediente h3 + p { max-width: 72ch; color: var(--texto-2); }
.fabrica-cifras { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; margin: 16px 0 0; }
.fabrica-cifras > div { background: var(--superficie); border: 1px solid var(--linea); border-radius: 10px; padding: 10px 14px; min-width: 0; }
.fabrica-cifras dt { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--apagado); }
.fabrica-cifras dd { margin: 4px 0 0; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.95rem; color: var(--texto); overflow-wrap: anywhere; }
.fabrica-grafica-grande, .fabrica-grafica-caidas { margin-top: 12px; background: var(--superficie); border: 1px solid var(--linea); border-radius: 10px; padding: 8px 6px 2px; }
.g-no-visto { fill: var(--ambar-suave); }
.g-no-visto-t { fill: var(--ambar); font-weight: 600; }
.g-linea-backtest { stroke: var(--traza); stroke-width: 2; }
.g-punto-backtest { fill: var(--traza); }
.g-caida { fill: var(--pierde); opacity: 0.16; }
.g-linea-caida { stroke: var(--pierde); stroke-width: 1.4; }
.g-punto-caida { fill: var(--pierde); }
.fabrica-años-envoltura { max-width: 560px; }
.fabrica-años { width: 100%; }
.fabrica-años th[scope="row"] { font-family: var(--mono); color: var(--texto-2); }
.fabrica-barra-celda { width: 45%; text-align: left !important; }
.fabrica-barra { display: block; height: 10px; border-radius: 2px; min-width: 1px; }
.fabrica-barra-gana { background: var(--gana); }
.fabrica-barra-pierde { background: var(--pierde); }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fabrica-pruebas { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.fabrica-prueba { background: var(--superficie); border: 1px solid var(--linea); border-left: 3px solid var(--linea-fuerte); border-radius: 0 10px 10px 0; padding: 12px 16px; display: grid; gap: 4px; }
.fabrica-prueba-good { border-left-color: var(--gana); }
.fabrica-prueba-warning { border-left-color: var(--ambar); }
.fabrica-prueba-critical { border-left-color: var(--pierde); }
.fabrica-prueba-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.fabrica-prueba-estado { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--linea-fuerte); color: var(--texto-2); }
.fabrica-prueba-good .fabrica-prueba-estado { color: var(--gana); border-color: var(--gana); }
.fabrica-prueba-warning .fabrica-prueba-estado { color: var(--ambar); border-color: var(--ambar-borde); }
.fabrica-prueba-critical .fabrica-prueba-estado { color: var(--pierde); border-color: var(--pierde); }
.fabrica-prueba-cifra { margin-left: auto; font-size: 0.92rem; }
.fabrica-prueba-pregunta { color: var(--apagado); font-size: 0.86rem; }
.fabrica-prueba p { margin: 0; max-width: 78ch; }
.fabrica-prueba p.fabrica-prueba-cabeza { max-width: none; }
@media (min-width: 900px) {
  .fabrica-cuerpo-ancho { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px; }
}
/* En una pantalla estrecha el gráfico encoge entero, letra incluida: la letra del SVG va en sus unidades, así que se
   agranda en proporción para que se siga leyendo. */
.fabrica-grafica-grande .g-t, .fabrica-grafica-caidas .g-t { font-size: 12px; }
@media (max-width: 640px) {
  .fabrica-grafica-grande .g-t, .fabrica-grafica-caidas .g-t { font-size: 21px; }
  .fabrica-grafica-grande .g-linea-backtest { stroke-width: 3.4; }
  .fabrica-grafica-caidas .g-linea-caida { stroke-width: 2.4; }
}