/* Trading Profundo — landing L1 (20/10/2026).
   Identidad: los tokens del Monitor real (web/monitor/workspace/tokens.css),
   no la paleta propuesta del Business Plan (#0A0A0A / #C9A961): la página
   tiene que verse continua con las capturas del producto. Titulares en
   Fraunces (editorial), interfaz en Inter, como pide el plan.
   Móvil primero. Sin pop-ups, sin cuenta regresiva, sin chat flotante. */

:root {
  --bg-base: #050A0F;
  --bg-deep: #03070B;
  --surface: #0C1822;
  --surface-hi: #102131;
  --surface-sunk: #081119;
  --stroke-subtle: #1D3442;
  --stroke-strong: #2A4A5C;
  --text-primary: #EAF2F7;
  --text-secondary: #9CB0C1;
  --text-tertiary: #7F95A7;
  --gold: #F4C257;
  --gold-deep: #C9A961;
  --gold-soft: rgba(244, 194, 87, .14);
  --bull: #20D3E7;
  --bear: #EF64B0;
  --neutral: #D5AC55;

  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font: "Inter", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px;
  --r-panel: 14px; --r-ctl: 10px; --r-chip: 999px;
  --ancho: 1120px;
  --gutter: 16px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --dur: 220ms;
  color-scheme: dark;
}
@media (min-width: 720px) { :root { --gutter: 32px; } }
@media (prefers-reduced-motion: reduce) { :root { --dur: 0ms; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg-base); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; min-height: 100vh; color: var(--text-primary);
  font: 400 16px/1.55 var(--font);
  background:
    radial-gradient(1100px 560px at 22% -10%, rgba(244, 194, 87, .09), transparent 62%),
    radial-gradient(900px 640px at 85% 6%, rgba(32, 211, 231, .05), transparent 60%),
    linear-gradient(180deg, #070D13 0%, var(--bg-base) 38%);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Grano fino sobre el lienzo, como en el Monitor. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
[hidden] { display: none !important; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--bull); text-underline-offset: .18em; }
a:hover { color: var(--text-primary); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.saltar { position: absolute; left: -999px; top: 8px; z-index: 60; background: var(--gold); color: #000; padding: 8px 12px; border-radius: 8px; text-decoration: none; }
.saltar:focus { left: 12px; }

/* ---------- Tipografía ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.012em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.35rem, 2rem + 3.6vw, 4.6rem); line-height: 1.02; font-variation-settings: "opsz" 144, "SOFT" 40; }
h2 { font-size: clamp(1.7rem, 1.35rem + 1.8vw, 2.7rem); line-height: 1.1; font-variation-settings: "opsz" 96; }
h3 { font-size: 1.2rem; line-height: 1.25; font-variation-settings: "opsz" 48; }
h1 em, h2 em { font-style: italic; color: var(--gold); font-weight: 400; }
p { margin: 0; }
.bajada { color: var(--text-secondary); font-size: 1.08rem; line-height: 1.55; max-width: 60ch; }
.bajada b { color: var(--text-primary); font-weight: 500; }
.folio {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--s4);
  font: 600 .72rem/1 var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
}
.folio::before { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }
.nota { font-size: .86rem; color: var(--text-tertiary); line-height: 1.5; }
.tribu { font: 600 .78rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); }

/* ---------- Estructura ---------- */
.contenedor { width: min(100% - 2 * var(--gutter), var(--ancho)); margin-inline: auto; }
.seccion { position: relative; z-index: 1; padding: var(--s16) 0; }
@media (min-width: 900px) { .seccion { padding: var(--s20) 0; } }
.seccion + .seccion { border-top: 1px solid rgba(29, 52, 66, .55); }
.cabecera { max-width: 64ch; margin-bottom: var(--s8); }
.cabecera .bajada { margin-top: var(--s3); }

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--s4);
  height: 60px; background: rgba(5, 10, 15, .78);
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid rgba(29, 52, 66, .8); box-shadow: 0 1px 0 rgba(244, 194, 87, .06);
}
.topbar .contenedor { display: flex; align-items: center; gap: var(--s4); }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-primary); }
.marca-ico { width: 28px; height: 28px; fill: var(--gold); stroke: var(--gold); filter: drop-shadow(0 0 6px rgba(244, 194, 87, .35)); }
.marca-txt { display: flex; flex-direction: column; line-height: 1.1; }
.marca-txt b { font: 700 13px/1.1 var(--font); letter-spacing: .14em; text-transform: uppercase; }
.marca-txt small { font-size: 11px; letter-spacing: .04em; color: var(--text-secondary); }
.nav { display: none; gap: var(--s5); margin-left: var(--s6); }
.nav a { color: var(--text-secondary); text-decoration: none; font-weight: 500; font-size: .92rem; transition: color 160ms var(--ease-out); }
.nav a:hover { color: var(--text-primary); }
@media (min-width: 900px) { .nav { display: flex; } }
.top-cta { margin-left: auto; }
@media (max-width: 599px) {
  .topbar .marca-txt small { display: none; }
  .topbar .marca-txt b { font-size: 12px; letter-spacing: .1em; white-space: nowrap; }
  /* En teléfonos el botón no entra junto a la marca: lo cubren el CTA del hero y la barra fija inferior. */
  .topbar .top-cta { display: none; }
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px;
  padding: 0 22px; border-radius: var(--r-ctl); border: 1px solid transparent; cursor: pointer;
  font: 600 .98rem/1 var(--font); text-decoration: none; white-space: nowrap;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.btn-oro {
  color: #120D02; background: linear-gradient(180deg, #F8D179, var(--gold) 55%, #D9A93E);
  box-shadow: 0 10px 28px -12px rgba(244, 194, 87, .7), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.btn-oro:hover { transform: translateY(-1px); box-shadow: 0 14px 32px -12px rgba(244, 194, 87, .85), inset 0 1px 0 rgba(255, 255, 255, .4); color: #120D02; }
.btn-oro:active { transform: translateY(0); }
.btn-linea { color: var(--text-primary); border-color: var(--stroke-strong); background: rgba(8, 17, 25, .6); }
.btn-linea:hover { border-color: var(--gold); color: var(--text-primary); }
.btn-chico { min-height: 40px; padding: 0 16px; font-size: .9rem; }
.btn[disabled] { opacity: .55; cursor: wait; transform: none; }

/* ---------- Hero ---------- */
.hero { padding: var(--s12) 0 var(--s10); }
.hero-grid { display: grid; gap: var(--s10); align-items: center; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.05fr .95fr; gap: var(--s12); } .hero { padding: var(--s16) 0 var(--s12); } }
.hero .tribu { display: block; margin-bottom: var(--s4); }
.hero h1 { margin-bottom: var(--s5); }
.hero .bajada { font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); }
.hero-acciones { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s8); align-items: center; }
.hero-pie { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.hero-pie span { display: inline-flex; align-items: center; gap: 7px; font-size: .86rem; color: var(--text-secondary); }
.hero-pie i { width: 7px; height: 7px; border-radius: 50%; background: var(--bull); box-shadow: 0 0 8px rgba(32, 211, 231, .8); }

/* Marco del producto: la captura real, enmarcada como un panel del Monitor. */
.marco {
  position: relative; border-radius: 16px; padding: 6px; background: linear-gradient(180deg, rgba(29, 52, 66, .9), rgba(12, 24, 34, .9));
  border: 1px solid var(--stroke-strong);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 40px 80px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(244, 194, 87, .08), 0 0 60px -20px rgba(244, 194, 87, .25);
}
.marco img { border-radius: 11px; width: 100%; }
.marco figcaption { position: absolute; left: 14px; bottom: 14px; padding: 6px 10px; border-radius: 8px; background: rgba(5, 10, 15, .82); border: 1px solid var(--stroke-subtle); font-size: .74rem; color: var(--text-secondary); letter-spacing: .02em; }
.marco-ladeado { transform: perspective(1400px) rotateY(-4deg) rotateX(1.5deg); }
@media (max-width: 979px) { .marco-ladeado { transform: none; } }

/* Banda de instrumentos: los 10 héroes reales del Monitor. */
.banda { margin-top: var(--s10); padding: var(--s4) 0; border-top: 1px solid rgba(29, 52, 66, .55); border-bottom: 1px solid rgba(29, 52, 66, .55); overflow: hidden; position: relative; }
.banda::before, .banda::after { content: ""; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none; }
.banda::before { left: 0; background: linear-gradient(90deg, var(--bg-base), transparent); }
.banda::after { right: 0; background: linear-gradient(270deg, var(--bg-base), transparent); }
.banda ul { list-style: none; margin: 0; padding: 0 var(--gutter); display: flex; gap: var(--s6); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.banda ul::-webkit-scrollbar { display: none; }
.banda li { flex: none; display: inline-flex; align-items: center; gap: 10px; color: var(--text-secondary); font-size: .9rem; }
.banda img { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 1px var(--stroke-subtle), 0 6px 16px -8px rgba(0, 0, 0, .9); }
.banda b { color: var(--text-primary); font-weight: 600; letter-spacing: .02em; }
.banda small { display: block; font-size: .74rem; color: var(--text-tertiary); letter-spacing: .04em; text-transform: uppercase; }

/* ---------- Cómo funciona ---------- */
.capas { display: grid; gap: var(--s4); }
@media (min-width: 720px) { .capas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .capas { grid-template-columns: repeat(3, 1fr); } }
.capa {
  display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5); border-radius: var(--r-panel);
  background: linear-gradient(180deg, rgba(12, 24, 34, .9), rgba(8, 17, 25, .9)); border: 1px solid var(--stroke-subtle);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 18px 40px -24px rgba(0, 0, 0, .9);
}
.capa figure { margin: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--stroke-subtle); background: var(--surface-sunk); aspect-ratio: 16 / 10; }
.capa figure img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
/* Capturas a escala real, recortadas desde la esquina: se leen, no se achican. */
.capa figure img.nativa { object-fit: none; object-position: 0 0; }
.capa h3 { font-size: 1.12rem; }
.capa h3 small { display: block; margin-top: 2px; font: 500 .72rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.capa p { color: var(--text-secondary); font-size: .95rem; }
.capa-ancha { grid-column: 1 / -1; }
.capa-movil figure { aspect-ratio: 16 / 10; background: radial-gradient(circle at 50% 120%, rgba(244, 194, 87, .12), var(--surface-sunk) 70%); }
.capa-movil figure img { object-fit: contain; object-position: center top; padding: 12px 0 0; }
@media (min-width: 1060px) { .capa-ancha { grid-column: span 2; } .capa-ancha figure { aspect-ratio: 16 / 7; } }
.estados { display: flex; flex-wrap: wrap; gap: var(--s2); }
.estado { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid var(--stroke-subtle); border-radius: var(--r-chip); font-size: .8rem; color: var(--text-secondary); background: rgba(8, 17, 25, .8); }
.estado i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-tertiary); }
.estado[data-estado="fresh"] i { background: var(--bull); box-shadow: 0 0 8px rgba(32, 211, 231, .8); }
.estado[data-estado="delayed"] i { background: var(--neutral); border-radius: 2px; }
.estado[data-estado="stale"] i { background: var(--bear); border-radius: 1px; transform: rotate(45deg); }
.estado[data-estado="missing"] i { background: transparent; border: 1.5px solid var(--text-tertiary); }

/* ---------- Equipo Legendario ---------- */
.equipo-grid { display: grid; gap: var(--s8); }
@media (min-width: 900px) { .equipo-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.enfoques { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.enfoques li { padding: 11px 13px; border-radius: 10px; border: 1px solid var(--stroke-subtle); background: var(--surface-sunk); font-size: .88rem; color: var(--text-secondary); display: flex; gap: 10px; align-items: baseline; }
.enfoques li::before { content: counter(enfoque, decimal-leading-zero); counter-increment: enfoque; font: 600 .7rem/1 var(--font); color: var(--gold); letter-spacing: .08em; }
.enfoques { counter-reset: enfoque; }
.enfoques b { color: var(--text-primary); font-weight: 500; }
.aviso-ia {
  margin-top: var(--s5); padding: var(--s4) var(--s5); border-radius: var(--r-panel); border: 1px solid rgba(244, 194, 87, .35);
  background: linear-gradient(180deg, rgba(244, 194, 87, .08), rgba(244, 194, 87, .02)); color: var(--text-secondary); font-size: .92rem;
}
.aviso-ia b { color: var(--gold); font-weight: 600; }
.lectura-ejemplo { border-radius: var(--r-panel); border: 1px solid var(--stroke-subtle); background: var(--surface-sunk); padding: var(--s5); display: grid; gap: var(--s3); }
.lectura-ejemplo .fila { display: grid; grid-template-columns: 110px 1fr; gap: var(--s3); font-size: .9rem; }
.lectura-ejemplo .fila span:first-child { font: 600 .7rem/1.6 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--text-tertiary); }
.lectura-ejemplo .fila span:last-child { color: var(--text-secondary); }
.lectura-ejemplo .etiqueta { display: inline-block; font: 600 .68rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); padding: 6px 10px; border: 1px solid rgba(244, 194, 87, .4); border-radius: var(--r-chip); width: max-content; }

/* ---------- Ecosistema ---------- */
.ecosistema { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
@media (min-width: 720px) { .ecosistema { grid-template-columns: repeat(2, 1fr); } }
.ecosistema li { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; padding: var(--s4) var(--s5); border-radius: var(--r-panel); border: 1px solid var(--stroke-subtle); background: rgba(8, 17, 25, .7); }
.ecosistema .chip { font: 600 .68rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase; padding: 6px 9px; border-radius: 6px; margin-top: 3px; white-space: nowrap; }
.chip-disp { color: #061316; background: var(--bull); }
.chip-prox { color: var(--gold); border: 1px solid rgba(244, 194, 87, .5); }
.chip-dev { color: var(--text-secondary); border: 1px solid var(--stroke-strong); }
.ecosistema h3 { font-size: 1.05rem; }
.ecosistema p { color: var(--text-secondary); font-size: .92rem; margin-top: 4px; }

/* ---------- El ecosistema Desarrolla Tu Futuro ---------- */
.dtf { display: grid; gap: var(--s6); align-items: center; padding: var(--s6); border-radius: var(--r-panel); border: 1px solid var(--stroke-subtle); background: linear-gradient(180deg, rgba(12, 24, 34, .9), rgba(8, 17, 25, .9)); }
@media (min-width: 820px) { .dtf { grid-template-columns: minmax(220px, 300px) 1fr; gap: var(--s10); padding: var(--s8); } }
/* Logo oficial, aplicación monocroma clara sobre fondo oscuro (img/PROCEDENCIA_DTF_LOGO.md). */
.dtf-logo { display: grid; place-items: center; padding: var(--s4); border-radius: 12px; background: var(--surface-sunk); border: 1px solid var(--stroke-subtle); }
.dtf-logo img { width: 100%; max-width: 300px; height: auto; }
.dtf-pilares { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s3); }
.dtf-pilares li { display: flex; align-items: flex-start; gap: 10px; color: var(--text-secondary); font-size: .94rem; }
.dtf-pilares li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; border: 1px solid rgba(244, 194, 87, .6); background: radial-gradient(circle at 50% 50%, var(--gold) 0 3px, transparent 3.5px); }
.dtf-pilares b { color: var(--text-primary); font-weight: 500; }
.dtf .nota { margin-top: var(--s4); }
.marcador { color: var(--gold); background: rgba(244, 194, 87, .1); border: 1px dashed rgba(244, 194, 87, .5); padding: 1px 6px; border-radius: 5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }

/* ---------- Cupo Fundador ---------- */
.oferta-grid { display: grid; gap: var(--s6); }
@media (min-width: 980px) { .oferta-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.oferta {
  position: relative; overflow: hidden; padding: var(--s6); border-radius: 18px;
  border: 1px solid rgba(244, 194, 87, .45);
  background: linear-gradient(160deg, rgba(244, 194, 87, .12), rgba(12, 24, 34, .95) 45%, rgba(8, 17, 25, .98));
  box-shadow: 0 0 0 1px rgba(244, 194, 87, .12), 0 40px 80px -40px rgba(0, 0, 0, .95), 0 0 80px -30px rgba(244, 194, 87, .35);
}
.oferta::after { content: ""; position: absolute; inset: auto -30% -40% auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(244, 194, 87, .14), transparent 65%); pointer-events: none; }
.precio-par { display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap; margin: var(--s4) 0 var(--s2); }
.precio-par .ahora { font-family: var(--font-display); font-size: clamp(3rem, 2.4rem + 3vw, 4.6rem); line-height: 1; color: var(--gold); font-variation-settings: "opsz" 144; letter-spacing: -.02em; }
.precio-par .ahora small { font: 500 .95rem/1 var(--font); color: var(--text-secondary); margin-left: 6px; letter-spacing: 0; }
.precio-par .lista { font-family: var(--font-display); font-size: 1.5rem; color: var(--text-tertiary); text-decoration: line-through; text-decoration-color: var(--bear); text-decoration-thickness: 2px; }
.precio-par .lista small { font: 500 .8rem/1 var(--font); text-decoration: none; display: block; color: var(--text-tertiary); margin-top: 4px; }
.ahorro { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: var(--r-chip); background: rgba(32, 211, 231, .1); border: 1px solid rgba(32, 211, 231, .4); color: var(--bull); font: 600 .84rem/1 var(--font); letter-spacing: .02em; }
.condiciones { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s3); }
.condiciones li { display: flex; align-items: flex-start; gap: 10px; color: var(--text-secondary); font-size: .94rem; }
.condiciones li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(244, 194, 87, .6); background: radial-gradient(circle at 50% 50%, var(--gold) 0 3px, transparent 3.5px); margin-top: 2px; }
.condiciones b { color: var(--text-primary); font-weight: 500; }
.porque { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid rgba(244, 194, 87, .2); }
.porque h3 { font-size: 1.05rem; margin-bottom: var(--s2); }
.porque p { color: var(--text-secondary); font-size: .94rem; }
.contador { margin-top: var(--s4); font-size: .88rem; color: var(--text-secondary); }
.contador b { color: var(--text-primary); }

/* Formulario */
.formulario {
  padding: var(--s6); border-radius: 18px; border: 1px solid var(--stroke-strong);
  background: linear-gradient(180deg, rgba(12, 24, 34, .95), rgba(8, 17, 25, .98));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 30px 60px -36px rgba(0, 0, 0, .95);
}
.formulario h3 { font-size: 1.35rem; margin-bottom: var(--s2); }
.formulario > p { color: var(--text-secondary); font-size: .94rem; margin-bottom: var(--s5); }
.campo { display: grid; gap: 8px; margin-bottom: var(--s5); }
.campo > label, .campo > .etq { font: 600 .8rem/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.campo input[type="email"] {
  min-height: 50px; padding: 0 14px; border-radius: var(--r-ctl); border: 1px solid var(--stroke-strong); background: var(--surface-sunk); color: var(--text-primary);
  font-size: 16px; transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.campo input[type="email"]:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.opciones { display: grid; gap: 8px; }
.opciones label, .casillas label {
  display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px; border-radius: var(--r-ctl); border: 1px solid var(--stroke-subtle); background: var(--surface-sunk);
  cursor: pointer; font-size: .95rem; transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.opciones label:has(:checked), .casillas label:has(:checked) { border-color: var(--gold); background: var(--gold-soft); }
.casillas { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.casillas label { min-height: 42px; padding: 0 12px; font-size: .9rem; }
input[type="radio"], input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--gold); flex: none; }
.consentimiento { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; color: var(--text-secondary); cursor: pointer; }
.consentimiento input { margin-top: 3px; }
.error { color: var(--bear); font-size: .86rem; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-acciones { display: grid; gap: var(--s3); margin-top: var(--s2); }
.form-acciones .btn { width: 100%; }
.form-pie { font-size: .8rem; color: var(--text-tertiary); line-height: 1.5; }
.resultado { padding: var(--s5); border-radius: var(--r-panel); border: 1px solid var(--stroke-strong); background: var(--surface-sunk); }
.resultado[data-tipo="ok"] { border-color: rgba(32, 211, 231, .5); }
.resultado[data-tipo="error"] { border-color: rgba(239, 100, 176, .5); }
.resultado .numero { font-family: var(--font-display); font-size: 3rem; line-height: 1; color: var(--gold); margin: var(--s2) 0; }
.resultado .numero small { font: 500 .85rem/1 var(--font); color: var(--text-secondary); letter-spacing: .04em; margin-left: 8px; }
.resultado p { color: var(--text-secondary); font-size: .94rem; }
#captcha { min-height: 0; }
#captcha:not(:empty) { margin-bottom: var(--s3); }

/* ---------- Planes ---------- */
.planes { display: grid; gap: var(--s4); }
@media (min-width: 720px) { .planes { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.plan { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s6); border-radius: var(--r-panel); border: 1px solid var(--stroke-subtle); background: rgba(8, 17, 25, .8); }
.plan-pro { border-color: rgba(244, 194, 87, .4); background: linear-gradient(180deg, rgba(244, 194, 87, .06), rgba(8, 17, 25, .9)); }
.plan-cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.plan h3 { font-size: 1.5rem; }
.plan .precio { font-family: var(--font-display); font-size: 2rem; color: var(--text-primary); white-space: nowrap; }
.plan .precio small { font: 500 .8rem/1 var(--font); color: var(--text-tertiary); margin-left: 4px; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.plan li { display: flex; align-items: flex-start; gap: 10px; color: var(--text-secondary); font-size: .93rem; }
.plan li::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; margin-top: 3px; background: radial-gradient(circle, var(--bull) 0 3px, transparent 3.5px); border: 1px solid rgba(32, 211, 231, .5); }
.plan li.futuro::before { background: none; border: 1px dashed var(--stroke-strong); }
.plan li.futuro { color: var(--text-tertiary); }
.plan .etiqueta { align-self: flex-start; font: 600 .68rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); padding: 6px 10px; border: 1px solid rgba(244, 194, 87, .4); border-radius: var(--r-chip); }
.plan .etiqueta-gris { color: var(--text-secondary); border-color: var(--stroke-strong); }
.plan .pie { margin-top: auto; font-size: .82rem; color: var(--text-tertiary); }
.comparativa { margin-top: var(--s6); font-size: .9rem; color: var(--text-secondary); }

/* ---------- Demo ---------- */
.demo { position: relative; }
.demo-marco { position: relative; }
.demo-pendiente { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--s6); background: linear-gradient(180deg, rgba(5, 10, 15, .15), rgba(5, 10, 15, .7)); border-radius: 11px; }
.demo-pendiente div { max-width: 44ch; padding: var(--s4) var(--s5); border-radius: var(--r-panel); background: rgba(5, 10, 15, .85); border: 1px solid var(--stroke-strong); }
.demo-pendiente b { display: block; font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; margin-bottom: 6px; }
.demo-pendiente p { color: var(--text-secondary); font-size: .9rem; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: var(--s2); max-width: 78ch; }
.faq details { border: 1px solid var(--stroke-subtle); border-radius: var(--r-panel); background: rgba(8, 17, 25, .7); transition: border-color var(--dur) var(--ease-out); }
.faq details[open] { border-color: var(--stroke-strong); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: var(--s4) var(--s5); font-family: var(--font-display); font-size: 1.12rem; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 1.3rem/1 var(--font-display); color: var(--gold); flex: none; transition: transform var(--dur) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .resp { padding: 0 var(--s5) var(--s5); color: var(--text-secondary); font-size: .95rem; display: grid; gap: var(--s3); }

/* ---------- Pie institucional ---------- */
.pie-sitio { position: relative; z-index: 1; padding: var(--s12) 0 calc(var(--s12) + 72px); border-top: 1px solid rgba(29, 52, 66, .8); background: var(--bg-deep); }
@media (min-width: 900px) { .pie-sitio { padding-bottom: var(--s12); } }
.pie-grid { display: grid; gap: var(--s8); }
@media (min-width: 900px) { .pie-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.pie-sitio h3 { font: 600 .74rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: var(--s3); }
.pie-sitio ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .92rem; }
.pie-sitio a { color: var(--text-secondary); text-decoration: none; }
.pie-sitio a:hover { color: var(--text-primary); }
.avisos { margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid rgba(29, 52, 66, .8); display: grid; gap: var(--s3); font-size: .84rem; color: var(--text-tertiary); line-height: 1.55; max-width: 90ch; }
.avisos b { color: var(--text-secondary); font-weight: 600; }

/* ---------- CTA fija en móvil ---------- */
.cta-fija {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(5, 10, 15, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid rgba(29, 52, 66, .9);
  transform: translateY(110%); transition: transform var(--dur) var(--ease-out);
}
.cta-fija.visible { transform: none; }
.cta-fija .btn { width: 100%; }
@media (min-width: 900px) { .cta-fija { display: none; } }

/* ---------- Aparición en carga (sólo hero) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .aparece { opacity: 0; transform: translateY(14px); animation: aparecer 720ms var(--ease-out) forwards; }
  .aparece:nth-child(2) { animation-delay: 90ms; } .aparece:nth-child(3) { animation-delay: 180ms; }
  .aparece:nth-child(4) { animation-delay: 270ms; } .aparece:nth-child(5) { animation-delay: 360ms; }
  .hero-grid > .marco { opacity: 0; animation: aparecer 900ms var(--ease-out) 320ms forwards; }
  @keyframes aparecer { to { opacity: 1; transform: none; } }
}

/* ---------- Páginas secundarias (legal, baja, en) ---------- */
.prosa { max-width: 72ch; padding: var(--s12) 0 var(--s16); position: relative; z-index: 1; }
.prosa h1 { font-size: clamp(2rem, 1.6rem + 2vw, 3rem); margin-bottom: var(--s4); }
.prosa h2 { font-size: 1.45rem; margin: var(--s8) 0 var(--s3); }
.prosa p, .prosa li { color: var(--text-secondary); margin-bottom: var(--s3); }
.prosa ul { padding-left: 1.2em; }
.prosa .meta { font-size: .86rem; color: var(--text-tertiary); margin-bottom: var(--s6); }
.prosa table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: var(--s4) 0; }
.prosa th, .prosa td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--stroke-subtle); vertical-align: top; color: var(--text-secondary); }
.prosa th { color: var(--text-primary); font-weight: 600; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }

/* Enlace personal de baja (se muestra una vez, hay que poder copiarlo fácil). */
.enlace-baja { margin-top: var(--s4); padding: var(--s4); border-radius: var(--r-ctl); border: 1px solid rgba(244, 194, 87, .45); background: rgba(244, 194, 87, .06); }
.enlace-baja p { color: var(--text-secondary); font-size: .92rem; }
.enlace-baja b { color: var(--gold); font-weight: 600; }
.enlace-baja-fila { display: grid; gap: var(--s2); margin-top: var(--s3); }
@media (min-width: 560px) { .enlace-baja-fila { grid-template-columns: 1fr auto; } }
.enlace-baja input { min-height: 44px; padding: 0 12px; border-radius: var(--r-ctl); border: 1px solid var(--stroke-strong); background: var(--surface-sunk); color: var(--text-primary); font: .84rem ui-monospace, SFMono-Regular, Menlo, monospace; width: 100%; text-overflow: ellipsis; }
.enlace-baja .nota { margin-top: var(--s2); min-height: 1.2em; }
.nota.registro { margin-bottom: var(--s3); }