/* ════════════════════════════════════════════════════════════════
   APEX FLOW — Landing pública (/flow/) + placeholder (/flow/pro/)
   APEX FLOW – fase 2 (archivo nuevo)

   Reutiliza tokens globales (apex-tokens.css) y las clases .flow-*
   ya creadas en apex-home.css (sección #flow del home) para que la
   landing dedicada se vea como una extensión natural del home, no
   como una pieza aparte.
   ════════════════════════════════════════════════════════════════ */

/* ── Contenedor general de la landing ── */
.apex-flow-wrap{max-width:1200px;margin:0 auto}

/* ── HERO ── */
.apex-flow-hero{padding:96px 48px 64px;text-align:center;display:flex;flex-direction:column;align-items:center}
.apex-flow-hero-eyebrow{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.apex-flow-hero-h1{font-family:var(--font-display);font-weight:900;font-size:clamp(40px,6vw,68px);line-height:.96;text-transform:uppercase;letter-spacing:-.01em;color:var(--text);max-width:760px;margin:0 0 20px}
.apex-flow-hero-h1 .lx{color:var(--accent)}
.apex-flow-hero-sub{font-size:16px;color:var(--gray);line-height:1.6;max-width:560px;margin:0 0 36px}
.apex-flow-hero-ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:20px}
.apex-flow-hero-alumno{font-size:13px;color:var(--gray)}
.apex-flow-hero-alumno a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* Botones (mismo lenguaje visual que .flow-btn de apex-home.css, reutilizado tal cual) */
.flow-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:14px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;padding:14px 26px;border-radius:var(--radius-md);text-decoration:none;transition:filter .15s,transform .1s,border-color .15s}
.flow-btn.primary{background:var(--accent);color:var(--accent-t)}
.flow-btn.primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.flow-btn.outline{background:transparent;color:var(--text);border:1px solid var(--border2)}
.flow-btn.outline:hover{border-color:var(--accent);color:var(--accent)}

/* ── BARRA DE CONFIANZA: alianza cTrader + brókers (2026-08-07) ──────────────
   Va pegada al hero. Deliberadamente sobria: una barra de confianza que grita
   compite con el CTA que tiene tres centímetros más arriba. El logo de cTrader
   se muestra a opacidad plena; los brókers son texto (no hay permiso de logo). */
/* ── ECOSISTEMA (2026-08-29) ──────────────────────────────────────────────
   Reemplaza la franja "En alianza con". Deja de ser una barra de logos y pasa
   a ser una sección con título propio, porque ahora hay algo concreto que
   declarar: la integración autorizada con cTrader. */
/* padding-top:64px (no 8px) — mismo ritmo que .apex-flow-section: la cinta ya
   pone una línea arriba, pero sin aire esta sección se leía pegada al hero,
   como una continuación en vez de un bloque propio (reporte Sergio 2026-08-29). */
.apex-flow-eco{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:64px 48px 56px;border-bottom:1px solid var(--border)}
.apex-flow-eco-kicker{margin:0;font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.apex-flow-eco-titulo{margin:0;font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:clamp(28px,4.6vw,52px);line-height:.98;letter-spacing:-.01em;color:var(--text);text-wrap:balance;max-width:16ch}
/* El punto en acento: mismo recurso que ya usa el hero — cierra la frase y
   ata la sección a la identidad sin agregar un elemento nuevo. */
.apex-flow-eco-punto{color:var(--accent)}
/* `text-wrap:balance` agregado 2026-09-04: sin él, el lead de la cinta cortaba
   dejando "cTrader." solo en la segunda línea. Una palabra huérfana debajo de
   una frase centrada se lee como un error de maquetación. Reparte las dos
   líneas parejo y no cambia ni tamaño ni color. */
.apex-flow-eco-lead{margin:2px 0 0;font-size:15px;line-height:1.6;color:var(--gray);max-width:52ch;text-wrap:balance}
.apex-flow-eco-label{margin:22px 0 0;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}

/* Subtítulo del bloque de brókers. Es el hermano CHICO de .apex-flow-eco-titulo,
   y esa diferencia es deliberada: el h2 de la sección ("Conexiones claras…")
   tiene que seguir mandando. Por eso acá va en caja normal y no en versalitas
   —el titular ya se lleva las MAYÚSCULAS— y el tamaño arranca donde el otro
   termina. Misma familia y mismo color de texto que el resto: no hay
   tipografía ni paleta nueva, solo otra escala. */
.apex-flow-eco-sub{margin:6px 0 0;font-family:var(--font-display);font-weight:800;font-size:clamp(21px,2.7vw,29px);line-height:1.12;letter-spacing:-.005em;color:var(--text);text-wrap:balance;max-width:24ch}

/* La tarjeta: texto a la izquierda, logo a la derecha. En una sola columna a
   partir de 640px — el logo arriba, que es donde pega. */
.apex-flow-eco-card{display:flex;align-items:center;gap:32px;width:100%;max-width:860px;text-align:left;
  background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:26px 30px}
.apex-flow-eco-card-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.apex-flow-eco-card-t{margin:0;font-family:var(--font-display);font-size:19px;font-weight:800;color:var(--text);line-height:1.25}
.apex-flow-eco-card-d{margin:0;font-size:14px;line-height:1.6;color:var(--gray)}
.apex-flow-eco-card-d strong{color:var(--text);font-weight:600}
.apex-flow-eco-card-logo{flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-width:170px}

.apex-flow-eco-txt{margin:26px 0 0;font-size:13.5px;line-height:1.6;color:var(--gray2);max-width:620px}
.apex-flow-eco-nota{margin:2px 0 0;font-size:12.5px;line-height:1.55;color:var(--gray2);max-width:600px}
.apex-flow-eco-nota strong{color:var(--gray);font-weight:600}

/* Fila de brókers */
.apex-flow-marcas{display:flex;align-items:center;justify-content:center;gap:34px;flex-wrap:wrap;max-width:820px}

/* Una marca: logo si el archivo existe, tipografía si no. Las dos variantes
   tienen que pesar ÓPTICAMENTE lo mismo, porque van a convivir — es probable
   que lleguen los kits de a uno y la fila quede mitad logo, mitad texto. */
.apex-marca{display:inline-flex;align-items:center;justify-content:center;height:26px}
.apex-marca--destacado{height:34px}

/* Monocromo: cinco logos a todo color sobre el fondo oscuro compiten con el CTA
   y ensucian el hero. El gris es el tratamiento estándar de una franja de
   confianza, y además tolera que cada marca llegue con su propia paleta.
   `brightness` alto porque casi todos los kits vienen en versión para fondo claro. */
.apex-marca-logo{max-height:100%;width:auto;display:block;filter:grayscale(1) brightness(1.9) contrast(.85);opacity:.72;transition:opacity .18s ease}
.apex-marca:hover .apex-marca-logo{opacity:1}
.apex-marca--destacado .apex-marca-logo{opacity:.92}

/* ⚠️ LOGO OFICIAL — SIN FILTRO, Y NO ES UNA DECISIÓN ESTÉTICA.
   El gris de arriba existe para logos de respaldo, bajados o tipografiados,
   que conviene uniformar. Este archivo es el kit OFICIAL que envió Spotware
   junto con la autorización de uso.

   Alterarle el color a un logotipo autorizado es lo que casi todos los
   manuales de marca prohíben expresamente, y sería raro pedir permiso para
   usar la marca y después publicarla desteñida. El isotipo de cTrader es rojo
   (#FF101F en el propio SVG) y así va: a color pleno, opacidad 1, sin filtro.

   La variante que se usa es "light" (texto blanco + isotipo rojo), que es la
   que el kit trae para fondos oscuros — no se le invierte ni se le toca nada. */
.apex-marca--oficial{height:auto}
.apex-marca--oficial .apex-marca-logo{filter:none;opacity:1;max-height:none;width:170px;max-width:100%}
.apex-marca--oficial .apex-marca-texto{font-weight:900;font-size:24px;color:var(--text)}

.apex-marca-texto{font-family:var(--font-display);font-weight:800;font-size:17px;letter-spacing:.01em;color:var(--gray);white-space:nowrap;transition:color .18s ease}
.apex-marca:hover .apex-marca-texto{color:var(--text)}
.apex-marca--destacado .apex-marca-texto{font-weight:900;font-size:24px;color:var(--text)}

@media(max-width:640px){
  .apex-flow-eco{padding:4px 20px 40px;gap:12px}
  .apex-flow-marcas{gap:18px 24px}
  .apex-marca{height:22px}
  .apex-marca-texto{font-size:15px}
  .apex-marca--destacado .apex-marca-texto{font-size:21px}
  .apex-flow-eco-txt,.apex-flow-eco-nota{font-size:12.5px}
  /* La tarjeta pasa a una columna: el logo ARRIBA, que es donde pega cuando
     no hay ancho para ponerlo al costado, y el texto debajo. */
  .apex-flow-eco-card{flex-direction:column-reverse;gap:18px;text-align:center;padding:22px 20px}
  .apex-flow-eco-card-logo{min-width:0}
  .apex-marca--oficial .apex-marca-logo{width:150px}
  .apex-flow-eco-lead{font-size:14px}
}

/* ── SECCIÓN: pillars (gratis) — reusa .flow-pillar* de apex-home.css, agrega grid propio ── */
.apex-flow-section{padding:64px 48px;border-bottom:1px solid var(--border)}
.apex-flow-section.alt{background:var(--bg2)}
.apex-flow-section-head{max-width:640px;margin:0 auto 44px;text-align:center}
.apex-flow-section-eyebrow{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gray2);margin-bottom:10px}
.apex-flow-section-h2{font-family:var(--font-display);font-weight:900;font-size:clamp(26px,3vw,34px);text-transform:uppercase;letter-spacing:-.01em;color:var(--text);margin:0 0 12px}
.apex-flow-section-sub{font-size:14px;color:var(--gray);line-height:1.6;margin:0}
/* Cabecera de sección SIN grilla debajo (p. ej. "Quién lo hace" de la portada):
   el margen de 44px estaba pensado para separarla de las tarjetas que vienen
   después. Sin tarjetas, dejaba un hueco muerto de más de 100px. */
.apex-flow-section-head.solo{margin-bottom:0}

.apex-flow-pillars-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;max-width:1040px;margin:0 auto}
.apex-flow-pillars-grid .flow-pillar{flex-direction:column;align-items:flex-start;text-align:left}

/* ── SECCIÓN: teaser PRO ── */
.apex-flow-pro-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1040px;margin:0 auto 36px}
.apex-flow-pro-chip{background:var(--bg3);border:1px solid var(--border-acc);border-radius:var(--radius-md);padding:18px}
.apex-flow-pro-chip-icon{color:var(--accent);margin-bottom:10px}
.apex-flow-pro-chip-title{font-family:var(--font-display);font-weight:800;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--text);margin-bottom:4px}
.apex-flow-pro-chip-sub{font-size:12px;color:var(--gray);line-height:1.5}
.apex-flow-pro-cta-wrap{text-align:center}
.apex-flow-pro-nota{margin-top:18px;font-size:12.5px;color:var(--gray2);max-width:520px;margin-left:auto;margin-right:auto}

/* ── SECCIÓN: instalar (reusa .apex-start-instalar de apex-start-content.css) ── */
.apex-flow-instalar-wrap{max-width:520px;margin:0 auto}

/* ── /flow/pro/ — placeholder ── */
.apex-flow-pro-page-wrap{max-width:760px;margin:0 auto;padding:72px 24px 96px}
.apex-flow-pro-page-head{text-align:center;margin-bottom:36px}
.apex-flow-pro-page-h1{font-family:var(--font-display);font-weight:900;font-size:clamp(30px,4vw,42px);text-transform:uppercase;letter-spacing:-.01em;color:var(--text);margin:14px 0 12px}
.apex-flow-pro-page-sub{font-size:14px;color:var(--gray);line-height:1.6;max-width:480px;margin:0 auto}
.apex-flow-pro-page-back{display:block;text-align:center;margin-top:28px;font-size:13px;color:var(--gray)}
.apex-flow-pro-page-back a{color:var(--accent)}
.apex-flow-pro-aviso{margin-top:24px;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--radius-md);padding:16px 20px;font-size:12.5px;color:var(--gray);line-height:1.6}
.apex-flow-pro-aviso strong{color:var(--text)}

/* ── /flow/pro/ — bloque de precios (Fase 4) ── */
.apex-flow-precios{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 28px}
.apex-flow-precio{position:relative;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--radius-md);padding:24px 22px;text-align:center}
.apex-flow-precio.destacado{border-color:var(--accent-bd);background:var(--accent-bg)}
.apex-flow-precio-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--accent);color:var(--accent-t);font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:20px;white-space:nowrap}
.apex-flow-precio-nombre{font-family:var(--font-display);font-weight:800;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--text);margin-bottom:8px}
.apex-flow-precio-monto{display:flex;align-items:baseline;justify-content:center;gap:3px;margin-bottom:8px}
.apex-flow-precio-num{font-family:var(--font-display);font-weight:900;font-size:40px;line-height:1;color:var(--text)}
.apex-flow-precio.destacado .apex-flow-precio-num{color:var(--accent)}
.apex-flow-precio-per{font-size:14px;color:var(--gray)}
.apex-flow-precio-sub{font-size:12px;color:var(--gray);line-height:1.5;margin-bottom:18px;min-height:32px}
/* Reemplaza al botón de compra dentro de la app de Play — ver apex-app-contexto.php.
   Ocupa el mismo hueco que el botón para que la tarjeta del plan no se descuadre. */
.apex-flow-buy-fuera-app{margin:0;padding:13px 16px;border:1px dashed var(--apex-border-mid,rgba(200,255,0,.18));border-radius:4px;font-size:12.5px;line-height:1.55;color:var(--apex-gray,#8a9fa8);text-align:center}
.apex-flow-buy-fuera-app b{color:var(--apex-text,#f0f4f0);font-weight:700}
.apex-flow-buy-form{margin:0}
.apex-flow-buy-form .flow-btn{width:100%;justify-content:center}
.apex-flow-buy-form .flow-btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}

/* ── Lanzamiento y prueba gratis (2026-08-02) ──────────────────────────────
   Aviso de precio de lanzamiento arriba de las dos tarjetas, precio oficial
   tachado adentro de cada una, y la letra chica de la prueba abajo. El tachado
   es la única forma honesta de mostrar un descuento: se ve de dónde viene y a
   dónde va, sin "antes $99" inventado. Si el cupo se agota, todo esto
   desaparece solo — no queda un cartel mintiendo. */
.apex-flow-lanzamiento{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;background:var(--accent-bg);border:1px solid var(--accent-bd);border-radius:var(--radius-md);padding:14px 18px;margin:0 0 18px}
.apex-flow-lanzamiento-tag{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.apex-flow-lanzamiento-txt{margin:0;font-size:13px;line-height:1.55;color:var(--text)}
.apex-flow-precio-tachado{font-size:16px;color:var(--gray2);text-decoration:line-through;align-self:center;margin-right:2px}
.apex-flow-pro-trial{text-align:center;font-size:12.5px;line-height:1.6;color:var(--gray);max-width:560px;margin:-14px auto 20px}

/* ── Marcas de tarjeta aceptadas, abajo de las dos tarjetas de precio ──────
   Pedido de Sergio (2026-09-03): "decir qué tarjetas aceptamos, con sus
   logos". Las tres son las certificadas con Red Enlace el 2026-09-01 — la
   lista y los dibujos viven en apex_flow_marcas_tarjetas() (apex-flow-pasarela.php).

   Los chips van en fondo CLARO a propósito, sobre el fondo oscuro de la
   portada: el azul de Visa (#1434CB) sobre negro no llega al contraste
   mínimo, y las marcas se leen como las conoce todo el mundo — como en el
   dorso de la tarjeta. El de Amex es su propia caja azul, que ES la marca. */
.apex-flow-tarjetas{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:-6px 0 22px}
.apex-flow-tarjetas-lbl{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}
.apex-flow-tarjetas-fila{display:flex;align-items:center;gap:8px}
.apex-flow-tarjeta{display:inline-flex;align-items:center;justify-content:center;width:48px;height:31px;border-radius:5px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.35);font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:800;line-height:1;user-select:none}
.apex-flow-tarjeta.is-visa{color:#1434CB;font-style:italic;font-size:15px;letter-spacing:-.01em}
.apex-flow-tarjeta.is-amex{background:#016FD0;color:#fff;font-size:11px;letter-spacing:.06em}
@media(max-width:620px){
  .apex-flow-tarjetas{gap:8px;margin-bottom:18px}
  .apex-flow-tarjeta{width:44px;height:28px}
  .apex-flow-tarjeta.is-visa{font-size:14px}
}
@media(max-width:560px){.apex-flow-precio-tachado{font-size:14px}}

/* Las dos tarjetas de precio, una debajo de otra en el teléfono.
   BUG REAL medido el 2026-08-07 en un viewport de 390px: con `1fr 1fr`, el
   contenido no entra y el grid se desborda — las columnas medían 188 y 205 px
   (409 px con el gap, contra 390 de pantalla) y TODA la página scrolleaba en
   horizontal. Venía pasando en /flow/pro/ desde el 2026-08-02, o sea en la
   pantalla donde la gente paga y donde casi todo el tráfico es móvil.
   El corte va en 620px y no en 560: a 560 las tarjetas ya venían apretadas. */
@media(max-width:620px){
  .apex-flow-precios{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}
  .apex-flow-precio-num{font-size:34px}
}

/* Puerta de entrada del que YA es Pro (pagó o le regalaron) — 2026-07-24 */
.apex-flow-pro-yatengo{text-align:center;font-size:13px;color:var(--gray);margin:-10px 0 26px}
.apex-flow-pro-yatengo a{color:var(--accent);font-weight:700;text-decoration:none;white-space:nowrap}
.apex-flow-pro-yatengo a:hover{text-decoration:underline}

/* Feedback de retorno de Stripe */
.apex-flow-pro-feedback{border-radius:var(--radius-md);padding:14px 18px;font-size:13.5px;line-height:1.55;margin-bottom:22px;border:1px solid}
.apex-flow-pro-feedback strong{font-weight:700}
.apex-flow-pro-feedback.ok{background:var(--green-bg);border-color:var(--green);color:var(--text)}
.apex-flow-pro-feedback.info{background:var(--bg3);border-color:var(--border2);color:var(--gray)}
.apex-flow-pro-feedback.err{background:var(--red-bg);border-color:var(--red);color:var(--text)}

/* ── /lab/ — cabecera de estado para quien SÍ tiene Pro (Fase 6) ── */
.apex-lab-status{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-md);padding:10px 16px;margin-bottom:18px;font-size:12px}
.apex-lab-status--pagado{border-color:var(--accent-bd)}
.apex-lab-status-txt{color:var(--gray)}
.apex-lab-status--pagado .apex-lab-status-txt{color:var(--accent);font-weight:600}
.apex-lab-status-link{color:var(--accent);text-decoration:none;font-weight:600;white-space:nowrap}
.apex-lab-status-link:hover{text-decoration:underline}

/* ── /lab/ — CTA de desbloqueo para no-Pro (Fase 4) ── */
.apex-lab-unlock{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--accent-bg);border:1px solid var(--accent-bd);border-radius:var(--radius-md);padding:16px 20px;margin-bottom:18px}
.apex-lab-unlock-txt{flex:1;min-width:200px}
.apex-lab-unlock-t{font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:.01em;text-transform:uppercase;color:var(--text);margin-bottom:3px}
.apex-lab-unlock-s{font-size:12.5px;color:var(--gray);line-height:1.5}
.apex-lab-unlock .flow-btn{flex-shrink:0}

@media (max-width: 980px){
  .apex-flow-pillars-grid,.apex-flow-pro-strip{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 640px){
  .apex-flow-hero{padding:72px 20px 48px}
  .apex-flow-section{padding:48px 20px}
  .apex-flow-pillars-grid,.apex-flow-pro-strip{grid-template-columns:1fr;max-width:420px}
  .apex-flow-hero-ctas{flex-direction:column;width:100%}
  .flow-btn{justify-content:center;width:100%}
}

/* ── Salida hacia la app desde /flow/pro/ (2026-08-09) ──────────────────────
   Vive acá y no en apex-home.css a propósito: ahí `.btn-academia` se apaga con
   `display:none` bajo 640px, así que en un teléfono la nav de esta página se
   quedaba SOLO con el logo — sin una sola salida en 4.400px de scroll. Este
   link tiene que estar sobre todo en el celular, que es donde no hay botón
   atrás (PWA instalada en iPhone). Por eso no se declara dentro de ninguna
   media query: se ve en los dos lados. */
.apex-flow-pro-volver{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--gray);background:transparent;
  border:1px solid var(--border2);padding:8px 14px;border-radius:2px;
  text-decoration:none;transition:border-color .15s,color .15s;
}
.apex-flow-pro-volver:hover,.apex-flow-pro-volver:focus-visible{
  color:var(--text);border-color:var(--accent);
}
@media (max-width:400px){
  /* El texto se abrevia, nunca el área tocable. */
  .apex-flow-pro-volver{padding:8px 12px;letter-spacing:.06em}
}

/* ── EL TRIÁNGULO DEL TRADER (2026-08-16) ─────────────────────────────────
   Diagrama + 3 tarjetas. En escritorio van lado a lado; en móvil el triángulo
   se achica y las tarjetas pasan a columna.

   ⚠️ El SVG NO lleva el texto largo: solo los tres nombres. El detalle vive en
   las tarjetas, que son texto real y se ajustan solas. Meter las preguntas
   dentro del SVG las habría vuelto ilegibles en un teléfono —el texto SVG no
   se reajusta— y habría dejado el contenido fuera del alcance de un lector de
   pantalla. */
.apex-tri{
  display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:44px;align-items:center;
  max-width:1040px;margin:0 auto;
}
.apex-tri-svg{width:100%;height:auto;color:var(--accent)}
.apex-tri-dot{fill:var(--accent)}
.apex-tri-lbl{
  fill:var(--text);font-family:var(--font-display);font-size:15px;font-weight:800;
  letter-spacing:.04em;
}
.apex-tri-sub{fill:var(--gray2);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em}

.apex-tri-cards{display:flex;flex-direction:column;gap:16px}
.apex-tri-card{
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-md);padding:18px 20px;
}
.apex-tri-t{
  display:flex;align-items:center;gap:9px;margin:0 0 6px;
  font-family:var(--font-display);font-size:14px;font-weight:800;letter-spacing:.03em;
  text-transform:uppercase;color:var(--text);
}
.apex-tri-n{
  display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:50%;background:var(--accent);color:var(--accent-t,#0b0b0b);
  font-family:var(--font-mono);font-size:11px;font-weight:700;flex:0 0 auto;
}
.apex-tri-q{margin:0 0 6px;font-size:13px;font-weight:700;color:var(--accent)}
.apex-tri-d{margin:0;font-size:13px;line-height:1.6;color:var(--gray)}
.apex-tri-d b{color:var(--text);font-weight:700}

.apex-tri-cierre{
  max-width:720px;margin:40px auto 0;text-align:center;
  font-size:14px;line-height:1.65;color:var(--gray);
}
.apex-tri-cierre b{color:var(--text)}

@media (max-width:900px){
  .apex-tri{grid-template-columns:1fr;gap:28px}
  /* El diagrama se achica pero NO desaparece: es lo que hace entender de un
     vistazo que son tres cosas conectadas, no una lista de features. */
  .apex-tri-svg{max-width:340px;margin:0 auto;display:block}
  .apex-tri-lbl{font-size:16px}
  .apex-tri-sub{font-size:11.5px}
  .apex-tri-cierre{margin-top:28px;text-align:left}
}

/* ── BARRA DE CAPACIDAD bajo el hero (2026-08-16) ──
   Cuatro cifras de lo que el producto tiene. En móvil van 2×2 —no en una fila
   de 4 que obligaría a achicar el número hasta volverlo decorativo, ni en
   columna de 4 que empujaría el resto de la página fuera de la primera
   pantalla. */
.apex-flow-prueba{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  max-width:880px;margin:40px auto 0;padding:0;list-style:none;
}
.apex-flow-prueba-item{
  display:flex;flex-direction:column;gap:2px;text-align:center;
  padding:16px 10px;background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--radius-md);
}
.apex-flow-prueba-n{
  font-family:var(--font-display);font-size:30px;font-weight:900;
  line-height:1;color:var(--accent);
}
.apex-flow-prueba-q{
  font-family:var(--font-display);font-size:12px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;color:var(--text);margin-top:4px;
}
.apex-flow-prueba-d{font-size:11.5px;line-height:1.45;color:var(--gray2)}

@media (max-width:640px){
  .apex-flow-prueba{grid-template-columns:1fr 1fr;gap:10px;margin-top:32px}
  .apex-flow-prueba-n{font-size:26px}
  .apex-flow-prueba-item{padding:14px 8px}
}

/* ── HUECOS DE RODAJE (2026-08-16) ──
   Solo se ven con ?rodaje=1. Estética deliberadamente "de obra": borde
   punteado y ámbar, para que nadie los confunda con contenido terminado si
   alguna vez quedan visibles por error. */
.apex-rodaje-wrap{max-width:1040px;margin:40px auto 0}
.apex-rodaje-titulo{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:#e0a800;margin:0 0 14px;text-align:center;
}
.apex-rodaje-titulo code{background:rgba(224,168,0,.12);padding:1px 5px;border-radius:3px}
.apex-rodaje-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.apex-rodaje-box{
  border:1.5px dashed rgba(224,168,0,.55);border-radius:var(--radius-md);
  padding:16px;background:rgba(224,168,0,.04);
}
.apex-rodaje-tag{
  display:block;font-family:var(--font-mono);font-size:10px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#e0a800;margin-bottom:8px;
}
.apex-rodaje-box p{margin:0 0 8px;font-size:12.5px;line-height:1.55;color:var(--gray)}
.apex-rodaje-box p:last-child{margin-bottom:0}
.apex-rodaje-box b{color:var(--text)}
@media (max-width:900px){ .apex-rodaje-grid{grid-template-columns:1fr} }
/* ══════════════════════════════════════════════════════════════════════════
   21 · EL CARTEL DEL CUPÓN
   ──────────────────────────────────────────────────────────────────────────
   Reemplaza al viejo `.apex-flow-precio-badge` ("Ahorrás 17%"). Ocupa EL MISMO
   SLOT —absoluto, montado sobre el borde superior de la tarjeta— para que la
   tarjeta no cambie de alto cuando hay campaña y cuando no.

   El detalle se abre como POPOVER absoluto y no empujando el contenido: si
   empujara, abrir el cupón del plan mensual movería el precio del anual de
   lugar, y mover un precio mientras alguien lo está leyendo es lo último que
   se quiere hacer en esta pantalla.

   Se abre con hover (escritorio) Y con clic/teclado (todos). No solo hover:
   en un teléfono no existe, y ahí es donde se va a mirar la mayoría.
   ══════════════════════════════════════════════════════════════════════════ */
.apex-cupon-wrap{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  z-index:5;
}
.apex-cupon{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 11px;border:0;border-radius:20px;
  background:var(--accent);color:var(--accent-t);
  font-family:var(--font-mono);font-size:10.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 0 0 3px var(--bg3),0 4px 18px var(--accent-glow);
  transition:transform var(--mo-fast) var(--mo-ease),
             box-shadow var(--mo-fast) var(--mo-ease);
}
/* El anillo del `box-shadow` recorta la tarjeta destacada, que tiene otro
   fondo: sin esto se ve un halo del color equivocado. */
.apex-flow-precio.destacado .apex-cupon{ box-shadow:0 0 0 3px #16301b,0 4px 18px var(--accent-glow) }

/* ⚠️ CÓDIGOS LARGOS. `FOUNDERSMONTHLY` son 15 caracteres y el chip se salía de
   la tarjeta. **No se trunca**: un código de cupón cortado es inservible —la
   gente lo copia— así que lo que cede es el espaciado entre letras, que a este
   tamaño no se percibe y devuelve unos 20 px. El `max-width` es la red: si
   algún día aparece un código todavía más largo, el chip se queda adentro de
   la tarjeta en vez de desbordarla. */
.apex-cupon-cod{ font-weight:700;letter-spacing:.02em }
.apex-cupon{ max-width:calc(100% - 12px) }
/* El porcentaje en un chip oscuro adentro del chip lima: es el número que
   decide, y necesita contraste propio para no fundirse con el código. */
.apex-cupon-pct{
  background:rgba(10,30,38,.88);color:var(--accent);
  padding:2px 6px;border-radius:11px;font-weight:700;letter-spacing:.02em;
}
.apex-cupon-chev{ transition:transform 260ms var(--mo-ease);opacity:.75 }

.apex-cupon:hover,.apex-cupon:focus-visible{ transform:translateY(-1px) }
.apex-cupon[aria-expanded="true"] .apex-cupon-chev{ transform:rotate(180deg) }

/* ⚠️ SE ABRE HACIA ARRIBA, no hacia abajo. Probado en pantalla: abriendo hacia
   abajo, el globo tapaba exactamente el precio — o sea, el número que el cupón
   está modificando. Leer "60% de descuento" mientras el $79,60 queda oculto
   detrás del propio cartel que lo explica es el peor lugar donde ponerlo.
   Hacia arriba tapa el banner de lanzamiento, que es contexto estático y no
   cambia nada de la decisión. */
.apex-cupon-det{
  position:absolute;bottom:calc(100% + 9px);left:50%;
  width:min(268px,78vw);
  transform:translateX(-50%) translateY(6px) scale(.97);
  transform-origin:50% 100%;
  background:var(--bg2);border:1px solid var(--accent-bd);
  border-radius:var(--radius-md);padding:12px 14px;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
  text-align:left;opacity:0;pointer-events:none;
  transition:opacity 200ms var(--mo-ease),transform 200ms var(--mo-ease);
}
/* `hidden` lo saca del árbol de accesibilidad mientras está cerrado; el JS lo
   quita ANTES de animar (si no, no hay nada que animar). */
.apex-cupon-det[hidden]{ display:none }
.apex-cupon-det.is-open{ opacity:1;transform:translateX(-50%) translateY(0) scale(1);pointer-events:auto }

.apex-cupon-det-l{
  margin:0 0 6px;font-size:12px;line-height:1.5;color:var(--gray);
}
.apex-cupon-det-l:last-child{ margin-bottom:0 }
.apex-cupon-det-l b{ color:var(--accent);font-weight:700 }
.apex-cupon-det-auto{ color:var(--gray2);font-size:11.5px }

/* La flechita del globo. Pintada con el borde del propio globo para que siga
   cualquier cambio de color sin tocar dos lugares. */
.apex-cupon-det::before{
  content:"";position:absolute;bottom:-5px;left:50%;
  width:9px;height:9px;margin-left:-4.5px;
  background:var(--bg2);
  border-right:1px solid var(--accent-bd);border-bottom:1px solid var(--accent-bd);
  transform:rotate(45deg);
}

@media (max-width:560px){
  .apex-cupon{ font-size:10px;padding:5px 9px }
  .apex-cupon-det{ width:min(240px,86vw) }
}

@media (prefers-reduced-motion:reduce){
  .apex-cupon-det,.apex-cupon-chev,.apex-cupon{ transition:none }
}