/**
 * APEX HOME — Estilos V10
 * Extraído de front-page.php. Tokens en apex-tokens.css.
 * Cargado solo en is_front_page() via functions.php.
 */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body.home{font-family:'Barlow',sans-serif;background:#0a1e26;color:#e8f0f0;overflow-x:hidden;line-height:1}
body.home a{text-decoration:none;color:inherit}
body.home button{cursor:pointer;font-family:inherit}

/* Ocultar header y footer de Kadence en la home — APEX usa su propio nav */
body.home .site-header,
body.home .site-footer,
body.home #masthead,
body.home .kadence-header,
body.home .main-navigation,
body.home .wp-block-template-part,
body.home .entry-hero,
body.home .kadence-breadcrumbs{display:none !important}

:root{
  --bg:#0a1e26;--bg2:#0d2530;--bg3:#112c38;--bg4:#163545;
  --bg-deeper:#060f14;
  --border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.13);
  --accent:#C8FF00;--accent-t:#0a1e26;
  --accent-bg:rgba(200,255,0,0.08);--accent-bd:rgba(200,255,0,0.25);
  --accent-dm:rgba(200,255,0,0.07);
  --red:#ff5f6b;--text:#e8f0f0;
  /* 2026-09-02 — SE QUITAN --gray y --gray2 DE ACÁ, a propósito.
     Tenían los valores viejos (--gray:#6a8f9f = 4,9:1 · --gray2:#3d5f6e = 2,5:1),
     que reprobaban WCAG AA (pide 4,5:1). Los tokens buenos ya existían en
     apex-tokens.css desde el 2026-08-29 (#8fb0bd = 7,4:1 · #7695a3 = 5,4:1),
     pero esta redefinición los pisaba: apex-home.css se encola CON dependencia
     de apex-tokens, o sea DESPUÉS, y ganaba la cascada.
     Se veía en la portada — que dentro de la app SÍ se abre ("Ir al inicio").
     Al borrar estas dos líneas, la portada hereda los tokens medidos.
     Si alguna regla de acá necesitara un gris propio, se define con otro
     nombre; no se vuelve a redefinir el token. */
}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes tickerMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes modalIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}

/* ══ ATMÓSFERA — grid de líneas de fondo ══ */
.atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.atmos::before{content:'';position:absolute;inset:0;background:radial-gradient(90% 70% at 78% 12%,rgba(200,255,0,0.07),transparent 55%),linear-gradient(180deg,#081820 0%,#0a1e26 45%,#071017 100%)}
.atmos-grid{position:absolute;inset:-2px;background-image:linear-gradient(rgba(200,255,0,0.035) 1px,transparent 1px),linear-gradient(90deg,rgba(200,255,0,0.035) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(110% 80% at 30% 20%,#000 0%,transparent 72%);-webkit-mask-image:radial-gradient(110% 80% at 30% 20%,#000 0%,transparent 72%)}
.atmos-noise{position:absolute;inset:0;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ══ POPUP ══ */
.event-overlay{position:fixed;inset:0;z-index:9999;background:rgba(6,15,20,.85);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;animation:overlayIn .3s ease}
.event-overlay.hidden{display:none}
.event-modal{background:var(--bg3);border:1px solid var(--accent-bd);border-radius:8px;max-width:520px;width:90%;position:relative;overflow:hidden;animation:modalIn .35s cubic-bezier(.16,1,.3,1)}
.event-modal-body{padding:24px 28px 28px}
.event-modal-tag{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.event-modal-title{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;color:var(--text);margin-bottom:8px;line-height:1.1}
.event-modal-desc{font-size:13px;color:var(--gray);line-height:1.65;margin-bottom:18px}
.event-modal-cta{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--accent-t);font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:10px 22px;border-radius:2px;border:none;cursor:pointer}
.event-modal-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:rgba(6,15,20,.7);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--text);cursor:pointer}
.event-modal-close:hover{background:rgba(200,255,0,.15);border-color:var(--accent-bd);color:var(--accent)}

/* ══ TICKER ══ */
.ticker-bar{position:sticky;top:64px;z-index:90;background:var(--bg-deeper);border-bottom:1px solid var(--border);height:34px;display:flex;align-items:center;overflow:hidden}
.admin-bar .ticker-bar{top:96px}
.ticker-label{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:0 18px;border-right:1px solid var(--border);background:var(--bg-deeper);z-index:2;height:100%}
.ticker-label span{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.pulse-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:pulse 1.8s ease-in-out infinite}
.ticker-track{display:flex;animation:tickerMove 30s linear infinite;white-space:nowrap}
.t-item{display:flex;align-items:center;gap:8px;padding:0 22px;border-right:1px solid var(--border);font-family:'JetBrains Mono',monospace;font-size:10px}
.t-sym{color:var(--text);font-weight:600}.t-price{color:var(--gray)}.t-up{color:var(--accent)}.t-dn{color:var(--red)}

/* ══ NAV ══ */
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 48px;height:64px;
  border-bottom:1px solid var(--border);
  position:fixed;top:0;left:0;right:0;
  background:rgba(10,30,38,.97);
  backdrop-filter:blur(14px);
  z-index:9999;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  will-change:transform;
}
/* Adminbar activa (admin/staff logueado) — nav baja 32px en desktop, 46px en mobile */
.admin-bar .nav{top:32px}
@media screen and (max-width:782px){.admin-bar .nav{top:46px}}
/* Padding del body compensa nav fixed. Con adminbar: 64 + 32 = 96px */
body.home{padding-top:64px}
.admin-bar body.home{padding-top:96px}
@media screen and (max-width:782px){.admin-bar body.home{padding-top:46px}}
.logo{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:26px;letter-spacing:.01em;color:var(--text);display:inline-flex;align-items:center;gap:0;line-height:1}
.logo-apex-text{display:inline-flex;align-items:center;line-height:1}
.logo-apex-text .lx{color:var(--accent)}
.logo-academy-wrap{display:flex;flex-direction:column;justify-content:center;padding-left:8px;border-left:2px solid var(--accent);margin-left:8px;height:22px}
.logo-academy{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:10px;letter-spacing:.22em;color:var(--gray);line-height:1;text-transform:uppercase}
.nav-right{display:flex;align-items:center;gap:10px}
.btn-academia{display:flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);background:var(--bg3);border:1px solid var(--border2);padding:8px 16px;border-radius:2px;transition:border-color .15s,color .15s}
.btn-academia:hover{border-color:var(--accent-bd);color:var(--accent)}
.btn-accent{background:var(--accent);color:var(--accent-t);font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:10px 22px;border-radius:2px;border:none;transition:filter .15s,transform .1s;display:inline-flex;align-items:center;gap:8px}
.btn-accent:hover{filter:brightness(1.08);transform:translateY(-1px)}
a.btn-accent{color:var(--accent-t) !important;text-decoration:none !important}
.btn-outline{font-size:13px;font-weight:500;color:var(--gray);border:1px solid var(--border2);padding:10px 22px;border-radius:2px;background:transparent;transition:border-color .15s,color .15s}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}

/* ══ HERO V2 ══ */
.hero-v2{position:relative;z-index:5;min-height:calc(100vh - 106px)}
.hero-v2-inner{position:relative;max-width:1360px;margin:0 auto;height:100%;min-height:calc(100vh - 106px);display:flex;align-items:center;padding:0 0 0 24px}
.hv2-left{width:48%;padding:40px 32px 40px 0}
.hv2-eyebrow{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border:1px solid var(--accent-bd);border-radius:30px;background:var(--accent-bg);margin-bottom:30px}
.hv2-eyebrow span{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.hv2-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);flex-shrink:0}
.hv2-title{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:clamp(52px,6.4vw,88px);line-height:.92;letter-spacing:.004em;text-transform:uppercase;margin-bottom:0}
.hv2-rot{display:block;position:relative;line-height:.92}
.hv2-rot b{display:inline-block;font-weight:800;color:var(--accent);text-shadow:0 0 40px rgba(200,255,0,.55),0 0 14px rgba(200,255,0,.3)}
.hv2-ln{display:block;color:var(--text)}
.hv2-hl{display:block;color:var(--accent);text-shadow:0 0 45px rgba(200,255,0,.4)}
.hv2-rule{width:64px;height:3px;background:var(--accent);margin:30px 0 26px;box-shadow:0 0 16px rgba(200,255,0,.5)}
.hv2-desc{font-size:17px;color:var(--gray);max-width:430px;line-height:1.7;margin-bottom:38px}
.hv2-cta{display:flex;align-items:center;gap:16px;margin-bottom:46px;flex-wrap:wrap}
.hv2-btn-accent{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-t)!important;background:var(--accent);padding:15px 30px;border-radius:4px;text-decoration:none!important;transition:box-shadow .3s,transform .2s;display:inline-block}
.hv2-btn-accent:hover{box-shadow:0 8px 30px rgba(200,255,0,.35);transform:translateY(-2px)}
.hv2-btn-line{display:flex;align-items:center;gap:8px;font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text);background:transparent;border:1px solid var(--border2);padding:14px 28px;border-radius:4px;text-decoration:none;transition:.25s}
.hv2-btn-line:hover{border-color:var(--accent);color:var(--accent)}
.hv2-adm{display:flex;align-items:center;gap:18px;padding-top:8px}
.hv2-adm-icon{width:58px;height:58px;border-radius:16px;border:1px solid rgba(200,255,0,.16);background:radial-gradient(130% 130% at 30% 22%,rgba(200,255,0,.13),rgba(200,255,0,.015));display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0;box-shadow:inset 0 0 20px rgba(200,255,0,.06),0 0 22px rgba(200,255,0,.05)}
.hv2-adm-icon svg{width:28px;height:28px;opacity:.92;stroke-width:1.5}
.hv2-adm-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--text);margin-bottom:3px}
.hv2-adm-sub{font-size:13.5px;color:var(--gray);line-height:1.5;max-width:340px}
/* foto — bleed a la derecha */
.hv2-photo{position:absolute;right:0;top:0;bottom:0;width:54%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 16%,#000 42%),linear-gradient(180deg,#000 80%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 16%,#000 42%),linear-gradient(180deg,#000 80%,transparent 100%);
  mask-composite:intersect}
.hv2-photo img{width:100%;height:100%;object-fit:cover;object-position:center 12%;filter:saturate(1.06) contrast(1.04)}
.hv2-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,rgba(10,30,38,.3) 24%,transparent 52%),linear-gradient(180deg,transparent 65%,rgba(8,24,32,.55) 88%,var(--bg) 100%)}
/* nametag sobre la foto */
.hv2-nametag{position:absolute;z-index:6;left:64%;bottom:236px}
.hv2-name{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:26px;letter-spacing:.03em;text-transform:uppercase;color:var(--text)}
.hv2-role{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;color:var(--accent);margin-top:4px}
/* panel sala de operaciones — transparente sobre la foto */
.hv2-ops{position:absolute;z-index:6;left:60%;right:0;bottom:40px;background:transparent;border:none;border-radius:0;padding:24px 90px 24px 34px;-webkit-mask-image:linear-gradient(90deg,#000 70%,transparent 100%);mask-image:linear-gradient(90deg,#000 70%,transparent 100%)}
.hv2-ops::before{content:'';position:absolute;left:0;top:16px;bottom:16px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--accent),rgba(200,255,0,.04));box-shadow:0 0 14px rgba(200,255,0,.45)}
.hv2-ops-tag{display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.hv2-ops-h{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:27px;line-height:1.05;color:var(--text);margin-bottom:8px}
.hv2-ops-sub{font-size:13.5px;color:var(--gray);margin-bottom:20px}
.hv2-ops-chips{display:flex;gap:26px;flex-wrap:wrap}
.hv2-chip{display:flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.05em;color:var(--text);padding:6px 2px 9px;border:none;background:none;border-bottom:1px solid rgba(200,255,0,.16);transition:.25s}
.hv2-chip:hover{border-bottom-color:var(--accent);color:#fff}
.hv2-chip svg,.hv2-chip i{width:18px;height:18px;color:var(--accent);opacity:.88}
/* utilidad */
.hl{color:var(--accent)}

/* ══ SECTIONS ══ */
.section{position:relative;z-index:1;padding:80px 48px;border-bottom:1px solid var(--border)}
.section.alt{background:var(--bg2)}.section.alt2{background:var(--bg3)}
.sec-tag{display:inline-flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:20px}
.sec-tag::before{content:'';width:22px;height:1px;background:var(--accent)}
.sec-h2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(38px,4.5vw,56px);font-weight:900;line-height:.95;letter-spacing:-.01em;color:var(--text);margin-bottom:16px}
.sec-body{font-size:15px;color:var(--gray);line-height:1.75;max-width:500px}
.sec-body-lg{font-size:18px;color:#c8d5da;line-height:1.7;max-width:420px}

/* ══ PROGRAMAS ══ */
.prog-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px}
.prog-card{background:var(--bg3);border:1px solid var(--border);border-radius:4px;padding:36px;position:relative;overflow:hidden;transition:background .35s,border-color .35s,transform .2s;cursor:default}
.prog-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--border2);transition:background .35s}
.prog-card:hover{background:rgba(200,255,0,0.06);border-color:rgba(200,255,0,0.35);transform:translateY(-3px)}
.prog-card:hover::before{background:var(--accent)}
.prog-badge{display:inline-flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:2px;margin-bottom:18px}
.badge-gray{background:var(--bg4);color:var(--gray);border:1px solid var(--border)}
.badge-accent{background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-bd)}
.prog-card:hover .badge-gray{background:var(--accent-bg);color:var(--accent);border-color:var(--accent-bd);transition:all .3s}
.prog-card h3{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;color:var(--text);margin-bottom:10px;line-height:1.1;transition:color .3s}
.prog-card:hover h3{color:var(--accent)}
.prog-duration{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;color:var(--accent);margin-bottom:16px}
.prog-duration::before{content:'//';color:var(--gray2)}
.prog-desc{font-size:13px;color:var(--gray);line-height:1.75;transition:opacity .2s,max-height .3s;max-height:400px;overflow:hidden}
.prog-card:hover .prog-desc{opacity:0;max-height:0;margin:0}
.prog-points{list-style:none;max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s;opacity:0}
.prog-card:hover .prog-points{max-height:400px;opacity:1}
.prog-points li{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--text);line-height:1.55;padding:7px 0;border-bottom:1px solid rgba(200,255,0,.1)}
.prog-points li:last-child{border-bottom:none}
.prog-points li::before{content:'→';color:var(--accent);font-weight:700;flex-shrink:0;font-size:12px}

/* ══ ESPECIALIZACIONES ══ */
.specs-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:40px}
.spec-card{background:var(--bg2);border:1px solid var(--border);border-radius:4px;padding:20px 16px;transition:background .35s,border-color .35s,transform .2s;position:relative;overflow:hidden;cursor:default}
.spec-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--border2);transition:background .35s}
.spec-card:hover{background:rgba(200,255,0,0.06);border-color:rgba(200,255,0,0.35);transform:translateY(-4px)}
.spec-card:hover::before{background:var(--accent)}
.spec-num{font-family:'Barlow Condensed',sans-serif;font-size:32px;font-weight:900;color:var(--accent-dm);line-height:1;margin-bottom:12px;transition:color .3s}
.spec-card:hover .spec-num{color:rgba(200,255,0,.15)}
.spec-name{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;color:var(--text);line-height:1.2;margin-bottom:6px;transition:color .3s}
.spec-card:hover .spec-name{color:var(--accent)}
.spec-duration{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;color:var(--accent);margin-bottom:14px;display:flex;align-items:center;gap:8px;transition:opacity .2s}
.spec-card:hover .spec-duration{opacity:.7}
.spec-sub{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--gray2);letter-spacing:.04em;transition:opacity .2s,max-height .3s;margin-bottom:0;max-height:60px;overflow:hidden}
.spec-card:hover .spec-sub{opacity:0;max-height:0;margin:0}
.spec-points{list-style:none;max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s;opacity:0;margin:0;padding:0}
.spec-card:hover .spec-points{max-height:500px;opacity:1}
.spec-points li{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--text);line-height:1.55;padding:6px 0;border-bottom:1px solid rgba(200,255,0,.1)}
.spec-points li:last-child{border-bottom:none}
.spec-points li::before{content:'→';color:var(--accent);font-weight:700;flex-shrink:0;font-size:11px}

/* ══ PILARES ══ */
.pilares-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:48px}
.pilar{
  position:relative;overflow:hidden;padding:34px 36px 31px;
  border:1px solid var(--border2);border-radius:var(--radius-md);
  background:linear-gradient(125deg,rgba(200,255,0,.08),rgba(200,255,0,.012) 38%,rgba(17,44,56,.50) 100%),rgba(17,44,56,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  transition:border-color .3s,transform .25s,box-shadow .3s;cursor:default}
.pilar:hover{border-color:rgba(200,255,0,.42);transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,.35),0 0 50px rgba(200,255,0,.05)}
/* quitamos la línea superior — usamos el mismo estilo que spec-cards */
.pilar::before{display:none}
/* badge número + ícono */
.pilar-num-badge{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.pilar-num-badge span{font-family:var(--font-display);font-size:47px;line-height:.9;font-weight:900;color:var(--accent);letter-spacing:.045em}
.pilar-icon{width:36px;height:36px;color:var(--accent);opacity:.6;stroke-width:1.5;transition:opacity .3s}
.pilar:hover .pilar-icon{opacity:1}
/* compat: pilar-num ya no se usa pero lo dejamos inerte */
.pilar-num{display:none}
.pilar h3{font-family:var(--font-display);font-size:25px;font-weight:800;letter-spacing:.042em;line-height:1.07;color:var(--text);margin-bottom:13px}
.pilar p{font-size:15px;color:#c8d5da;line-height:1.62;margin-bottom:20px;transition:opacity .2s,max-height .3s;max-height:200px;overflow:hidden}
.pilar:hover p{opacity:0;max-height:0;margin:0}
.pilar-tags{display:flex;flex-wrap:wrap;gap:8px;transition:opacity .2s,max-height .3s;max-height:120px;overflow:hidden}
.pilar:hover .pilar-tags{opacity:0;max-height:0;overflow:hidden}
.pilar-tag{font-family:'JetBrains Mono',monospace;font-size:11px;padding:5px 12px;background:var(--bg4);border:1px solid var(--border2);border-radius:3px;color:#c8d5da}
.pilar-detail{list-style:none;max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1),opacity .35s;opacity:0}
.pilar:hover .pilar-detail{max-height:500px;opacity:1}
.pilar-detail li{display:flex;align-items:flex-start;gap:14px;font-size:14px;color:#c8d5da;line-height:1.6;padding:11px 0;border-bottom:1px solid var(--border)}
.pilar-detail li:last-child{border-bottom:none;padding-bottom:0}
.pilar-detail li .di-icon{width:32px;height:32px;border-radius:5px;background:var(--accent-bg);border:1px solid var(--accent-bd);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;color:var(--accent);font-weight:700}
.pilar-detail li .di-text strong{display:block;font-weight:700;color:var(--text);margin-bottom:3px;font-size:14px}
.pilar-detail li .di-text span{font-size:12.5px;color:var(--gray)}

/* ══ EQUIPO ══ */
.equipo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
.miembro{background:var(--bg2);border:1px solid var(--border);border-radius:4px;overflow:hidden;position:relative;transition:border-color .3s;aspect-ratio:3/4}
.miembro:hover{border-color:var(--accent-bd)}
.miembro-foto{position:absolute;inset:0;overflow:hidden}
.miembro-foto img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .55s cubic-bezier(.4,0,.2,1),filter .4s;display:block}
.miembro:hover .miembro-foto img{transform:translateY(-30%);filter:brightness(.35) saturate(.5)}
.miembro-bio{position:absolute;bottom:0;left:0;right:0;padding:24px 20px;background:linear-gradient(to top, var(--bg2) 60%, transparent);transform:translateY(100%);transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .35s;opacity:0;z-index:2}
.miembro:hover .miembro-bio{transform:translateY(0);opacity:1}
.miembro-nombre{font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:800;color:var(--text);margin-bottom:3px}
.miembro-rol{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--accent);letter-spacing:.08em;margin-bottom:10px}
.miembro-lema{font-size:13px;color:#ddeae8;line-height:1.65;font-style:italic;margin-bottom:12px}
.miembro-bio-detail{font-size:13px;color:#ddeae8;line-height:1.65;list-style:none}
.miembro-bio-detail li{margin-bottom:4px;padding-left:12px;position:relative}
.miembro-bio-detail li::before{content:'·';position:absolute;left:0;color:var(--accent)}
.miembro-name-label{position:absolute;bottom:0;left:0;right:0;padding:16px 20px;background:linear-gradient(to top,rgba(10,30,38,.9) 70%,transparent);z-index:1;transition:opacity .3s}
.miembro:hover .miembro-name-label{opacity:0}
.mnl-name{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:800;color:var(--text)}
.mnl-role{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--accent);letter-spacing:.08em;margin-top:2px}
.founder-badge{position:absolute;top:12px;left:12px;background:var(--accent);color:var(--accent-t);font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;padding:3px 8px;border-radius:2px;letter-spacing:.08em;text-transform:uppercase;z-index:3}
.miembro-foto.placeholder{background:var(--bg3);display:flex;align-items:center;justify-content:center}
.miembro-iniciales{font-family:'Barlow Condensed',sans-serif;font-size:44px;font-weight:900;color:var(--gray2)}

/* ══ VALORES ══ */
.valores-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.flip-grid{margin-top:40px;display:flex;flex-direction:column;gap:8px}
.flip-card{height:72px;perspective:1000px;cursor:default}
.flip-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.flip-card:hover .flip-inner{transform:rotateX(180deg)}
.flip-front,.flip-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:4px;display:flex;align-items:center;padding:0 20px}
.flip-front{background:var(--bg3);border:1px solid var(--border);justify-content:space-between}
.flip-front-name{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;color:var(--text);letter-spacing:.02em}
.flip-front-icon{color:var(--gray2);font-size:14px;opacity:.6}
.flip-back{background:var(--accent);transform:rotateX(180deg);flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:12px 20px}
.flip-back-text{font-size:14px;font-style:italic;color:#07161d;line-height:1.6;font-weight:500}
.flip-back-author{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;color:rgba(7,22,29,.7);letter-spacing:.06em;margin-top:4px}

/* ══ CASOS ══ */
.casos-inner{background:var(--bg2);border:1px solid var(--border);border-radius:4px;padding:48px;max-width:580px;margin:36px auto 0;position:relative;overflow:hidden;text-align:center}
.casos-inner::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}

/* ══ FOOTER ══ */
.footer-main{position:relative;z-index:1;background:var(--bg-deeper);border-top:1px solid var(--border);padding:60px 48px 36px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-logo{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:20px;color:var(--text);letter-spacing:.04em;margin-bottom:12px;display:flex;align-items:center;gap:5px}
.footer-logo .dot{color:var(--accent)}
.footer-tagline{font-size:13px;color:var(--gray);line-height:1.65;max-width:240px;margin-bottom:20px}
.social-links{display:flex;gap:8px;flex-wrap:wrap}
.social-btn{display:flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text);background:var(--bg3);border:1px solid var(--border);padding:8px 12px;border-radius:2px;transition:border-color .15s,color .15s,background .15s;text-decoration:none}
.social-btn:hover{border-color:var(--accent-bd);color:var(--accent);background:var(--accent-bg)}
.footer-col-title{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gray2);margin-bottom:16px}
.footer-links-list{display:flex;flex-direction:column;gap:10px;list-style:none}
.footer-links-list a{font-size:13px;color:var(--gray);transition:color .15s}
.footer-links-list a:hover{color:var(--accent)}
.footer-bottom{border-top:1px solid var(--border);padding-top:24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.footer-bottom-copy{font-size:11px;color:var(--gray2);font-family:'JetBrains Mono',monospace;letter-spacing:.04em}
.footer-legal{display:flex;gap:20px;list-style:none}
.footer-legal a{font-size:11px;color:var(--gray2);transition:color .15s}
.footer-legal a:hover{color:var(--gray)}

/* ══ INTRO ANIMATION ══ */
#apex-intro{position:fixed;inset:0;z-index:99999;background:#0a1e26;display:flex;align-items:center;justify-content:center;overflow:hidden;opacity:1;transition:opacity .8s ease}
#apex-intro.apex-intro-hidden{opacity:0;pointer-events:none}
#apex-intro.apex-intro-gone{display:none}
#apex-intro .apex-intro-inner{position:relative;display:flex;align-items:center;gap:0;--apex-laser-h:clamp(62px,11vw,124px)}
#apex-intro .apex-intro-ape{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:clamp(80px,14vw,160px);line-height:.88;letter-spacing:-.02em;color:#ddeae8;transform:translateX(-120vw);opacity:0}
#apex-intro .apex-intro-x{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:clamp(80px,14vw,160px);line-height:.88;letter-spacing:-.02em;color:#C8FF00;transform:translateY(-100vh);opacity:0}
#apex-intro .apex-intro-laser{width:0;height:3px;background:#C8FF00;opacity:0;margin:0 8px;box-shadow:0 0 20px #C8FF00,0 0 40px rgba(200,255,0,.6);align-self:center}
#apex-intro .apex-intro-academy{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-weight:400;font-size:clamp(18px,2.6vw,36px);letter-spacing:.16em;color:#6a8f9f;transform:translateX(120vw);opacity:0;align-self:center}
#apex-intro .apex-intro-skip{position:absolute;bottom:24px;right:28px;padding:7px 16px;background:transparent;border:1px solid rgba(200,255,0,.25);color:#6a8f9f;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;cursor:pointer;border-radius:2px;transition:all .15s;opacity:0;z-index:10}
#apex-intro .apex-intro-skip:hover{color:#C8FF00;border-color:#C8FF00}
@keyframes apexIntroXBounce{0%{transform:translateY(-100vh);opacity:0}55%{opacity:1}65%{transform:translateY(14px)}75%{transform:translateY(-10px)}84%{transform:translateY(6px)}91%{transform:translateY(-4px)}96%{transform:translateY(2px);opacity:1}100%{transform:translateY(0);opacity:1}}
@media (prefers-reduced-motion: reduce){
  #apex-intro{animation:none}
  #apex-intro .apex-intro-ape,#apex-intro .apex-intro-x,#apex-intro .apex-intro-academy,#apex-intro .apex-intro-laser{transition:opacity .3s ease!important;animation:none!important;transform:none!important;opacity:1!important}
  #apex-intro .apex-intro-laser{width:2px;height:var(--apex-laser-h,88px)}
}

/* ══ NAV MOBILE DERECHA (solo mobile) ══ */
.nav-mobile-right{display:none;align-items:center;gap:8px}

/* ══ HAMBURGUESA ══ */
.nav-hamburger{
  width:36px;height:36px;background:var(--bg3);border:1px solid var(--border2);
  border-radius:3px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;cursor:pointer;flex-shrink:0;
  transition:border-color .15s,background .15s;padding:0;
}
.nav-hamburger:hover{border-color:var(--accent-bd);background:var(--bg4)}
.nav-hamburger.active{border-color:var(--accent-bd);background:var(--accent-bg)}
.ham-bar{width:14px;height:1.5px;background:var(--gray);border-radius:1px;transition:transform .25s,opacity .2s,background .15s}
.nav-hamburger.active .ham-bar:nth-child(1){transform:translateY(6.5px) rotate(45deg);background:var(--accent)}
.nav-hamburger.active .ham-bar:nth-child(2){opacity:0}
.nav-hamburger.active .ham-bar:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);background:var(--accent)}

/* ══ MENÚ DESPLEGABLE MOBILE ══ */
.mob-menu{
  display:none;
  position:fixed;top:0;right:0;bottom:0;
  width:min(320px,90vw);z-index:1000;
  background:var(--bg2);border-left:1px solid var(--border2);
  flex-direction:column;
  transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
}
.mob-menu.open{transform:translateX(0)}
.mob-menu-overlay{
  display:none;position:fixed;inset:0;z-index:999;
  background:rgba(6,15,20,.7);backdrop-filter:blur(3px);
}
.mob-menu-overlay.visible{display:block;animation:fadeInOverlay .2s ease}
@keyframes fadeInOverlay{from{opacity:0}to{opacity:1}}
.mob-menu-inner{display:flex;flex-direction:column;height:100%;padding:0}
.mob-menu-section{padding:20px 0 8px;flex:1}
.mob-menu-label{font-family:'JetBrains Mono',monospace;font-size:8px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gray2);padding:0 20px;margin-bottom:8px}
.mob-menu-item{display:flex;align-items:center;gap:14px;padding:14px 20px;text-decoration:none;border-bottom:1px solid var(--border);transition:background .15s;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mob-menu-item:first-of-type{border-top:1px solid var(--border)}
.mob-menu-item:hover,.mob-menu-item:active{background:var(--bg3)}
.mob-item-icon{width:36px;height:36px;border-radius:4px;background:var(--bg3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--gray)}
.mob-menu-item:hover .mob-item-icon{background:var(--accent-bg);border-color:var(--accent-bd);color:var(--accent)}
.mob-item-text{flex:1;min-width:0}
.mob-item-text strong{display:block;font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;color:var(--text);margin-bottom:2px;letter-spacing:.02em}
.mob-item-text span{display:block;font-size:11px;color:var(--gray);font-family:'Barlow',sans-serif}
.mob-item-arrow{font-size:14px;color:var(--gray2);flex-shrink:0;transition:color .15s,transform .15s}
.mob-menu-item:hover .mob-item-arrow{color:var(--accent);transform:translateX(3px)}
.mob-menu-cta{padding:20px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:10px;background:var(--bg-deeper)}
.mob-menu-btn-primary{display:flex;align-items:center;justify-content:center;background:var(--accent);color:#0a1e26 !important;font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:13px 20px;border-radius:2px;text-decoration:none;transition:filter .15s}
.mob-menu-btn-primary:hover{filter:brightness(1.08)}
.mob-menu-btn-secondary{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--gray);font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:var(--bg3);border:1px solid var(--border2);padding:10px 20px;border-radius:2px;text-decoration:none;transition:color .15s,border-color .15s}
.mob-menu-btn-secondary:hover{color:var(--text)}

/* ══ RESPONSIVE — TABLET (980px) ══ */
@media (max-width:980px){
  .hero-v2-inner{flex-direction:column;align-items:stretch;padding:0;min-height:auto}
  .hv2-left{width:100%;padding:40px 24px}
  .hv2-photo{position:relative;width:100%;height:520px}
  .hv2-nametag{left:24px;bottom:200px}
  .hv2-ops{left:16px;right:16px;bottom:24px}
  .prog-grid{grid-template-columns:1fr}
  .specs-grid{grid-template-columns:repeat(2,1fr)}
  .pilares-grid{grid-template-columns:1fr}
  .equipo-grid{grid-template-columns:repeat(2,1fr)}
  .valores-layout{grid-template-columns:1fr;gap:32px}
  /* 2026-09-02 — mismo arreglo que apex-legal.css/apex-public.css: logo
     ocupa la fila entera, las 3 columnas de links comparten la de abajo,
     en vez de caer en 2x2. Ver el comentario largo en apex-legal.css. */
  .footer-grid{grid-template-columns:1fr 1fr 1fr;gap:28px}
  .footer-grid > div:first-child{grid-column:1 / -1}
  .nav{padding:0 24px}
  .section{padding:60px 24px}
  .ticker-bar{top:64px}
  /* Programas y pilares: en tablet mostrar descripción siempre visible */
  .prog-desc,.pilar p{opacity:1 !important;max-height:none !important;margin-bottom:12px !important}
  .prog-points,.pilar-detail{max-height:none !important;opacity:1 !important}
  .pilar-tags{display:none}
}

/* ══ RESPONSIVE — MOBILE (640px) ══ */
@media (max-width:640px){
  /* Nav mobile — la derecha queda SOLO con el selector de idioma (siglas "EN · PT");
     Entrar y Hazte Pro viven en la barra de abajo. Antes todo el bloque era display:none y
     el idioma no se podía cambiar desde un celular (Sergio, Safari, 2026-09-04 noche). */
  .nav-right{display:flex;gap:6px}
  .nav-right .btn-accent{display:none}
  .nav-mobile-right{display:flex}
  .mob-menu{display:flex}

  /* Nav mobile: sticky — evita conflicto con overflow:hidden de Kadence */
  .nav{
    padding:0 16px;height:54px;
    position:sticky;top:0;left:auto;right:auto;
    transform:translateZ(0);-webkit-transform:translateZ(0);
    z-index:9999;
  }
  body.home{padding-top:0}
  .logo{font-size:21px}
  .logo-academy-wrap{height:17px}
  .logo-academy{font-size:8px;letter-spacing:.16em}
  .btn-academia{display:none}
  .btn-accent{padding:8px 14px;font-size:12px;letter-spacing:.06em}

  /* Ticker — se pega justo debajo del nav sticky (54px) */
  .ticker-bar{top:54px;height:30px}
  .admin-bar .ticker-bar{top:100px}
  .ticker-label{padding:0 10px}
  .ticker-label span{display:none}
  .t-item{padding:0 14px;gap:6px}

  /* Hero v2 — mobile */
  .hero-v2{min-height:auto}
  .hero-v2-inner{flex-direction:column;align-items:stretch;padding:0;min-height:auto}
  .hv2-left{width:100%;padding:32px 16px 28px}
  .hv2-eyebrow{margin-bottom:20px}
  .hv2-title{font-size:clamp(44px,13vw,68px)}
  .hv2-desc{font-size:15px;max-width:100%}
  .hv2-cta{flex-direction:column;gap:10px}
  .hv2-btn-accent{width:100%;text-align:center;font-size:14px;padding:13px 20px}
  .hv2-adm{flex-direction:column;align-items:flex-start;gap:10px}
  .hv2-photo{position:relative;width:100%;height:320px}
  .hv2-nametag{left:16px;bottom:140px}
  .hv2-ops{left:12px;right:12px;bottom:16px;padding:18px 24px 18px 28px}
  .hv2-ops-h{font-size:20px}
  .hv2-ops-chips{gap:14px}

  /* Sections */
  .section{padding:40px 16px}
  .sec-tag{font-size:9px;margin-bottom:14px}
  .sec-h2{font-size:clamp(30px,9vw,40px);margin-bottom:12px}
  .sec-body{font-size:13px}

  /* Programas — sin hover en mobile, mostrar todo siempre */
  .prog-grid{gap:12px}
  .prog-card{padding:20px;transform:none !important}
  .prog-card::before{display:none}
  .prog-card h3{font-size:22px}
  .prog-badge{font-size:8px;margin-bottom:12px}
  .prog-duration{font-size:10px;margin-bottom:10px}
  .prog-desc{opacity:1 !important;max-height:none !important;font-size:13px;line-height:1.7}
  .prog-points{max-height:none !important;opacity:1 !important;margin-top:12px}
  .prog-points li{font-size:12px;padding:6px 0}

  /* Especializaciones */
  .specs-grid{grid-template-columns:1fr;gap:8px}
  .spec-card{padding:16px;transform:none !important}
  .spec-card::before{display:none}
  .spec-num{font-size:24px;margin-bottom:8px}
  .spec-name{font-size:15px}
  .spec-sub{opacity:1 !important;max-height:none !important}
  .spec-points{max-height:none !important;opacity:1 !important;margin-top:10px}
  .spec-points li{font-size:11px}

  /* Pilares — sin hover en mobile, mostrar todo */
  .pilares-grid{gap:12px}
  .pilar{padding:20px;transform:none !important}
  .pilar-num{font-size:48px;margin-bottom:8px}
  .pilar h3{font-size:20px}
  .pilar p{opacity:1 !important;max-height:none !important;font-size:13px;line-height:1.7;margin-bottom:12px !important}
  .pilar-tags{display:none}
  .pilar-detail{max-height:none !important;opacity:1 !important}
  .pilar-detail li{font-size:12px;padding:8px 0;gap:10px}
  .pilar-detail li .di-icon{width:24px;height:24px;font-size:10px}

  /* Equipo */
  .equipo-grid{grid-template-columns:1fr 1fr;gap:10px}
  .miembro{aspect-ratio:2/3}
  .miembro-nombre{font-size:15px}
  .miembro-lema{font-size:12px}

  /* Valores — flip cards: en mobile usar accordion en vez de flip */
  .flip-grid{gap:6px}
  .flip-card{height:auto;perspective:none}
  .flip-inner{transform:none !important;position:static;transform-style:flat}
  .flip-front{position:static;backface-visibility:visible;border-radius:4px;padding:12px 16px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .flip-front-icon{font-size:12px}
  .flip-back{position:static;transform:none;backface-visibility:visible;border-radius:4px;padding:12px 16px;margin-top:2px;display:none}
  .flip-card.open .flip-back{display:flex}
  .flip-back-text{font-size:12px;line-height:1.55}
  .flip-back-author{font-size:10px}
  .valores-layout{gap:24px}

  /* CTA final */
  .casos-inner{padding:28px 16px;margin:24px auto 0}
  .casos-inner .btn-accent{width:100%;justify-content:center;font-size:14px;padding:14px 20px}

  /* Footer */
  .footer-main{padding:36px 16px 24px}
  .footer-grid{grid-template-columns:1fr 1fr 1fr;gap:18px}
  .footer-grid > div:first-child{grid-column:1 / -1}
  .footer-logo{font-size:17px}
  .footer-tagline{font-size:12px;max-width:100%}
  .social-links{gap:6px}
  .social-btn{font-size:9px;padding:7px 10px}
  .footer-col-title{font-size:8px;margin-bottom:10px}
  .footer-links-list{gap:8px}
  .footer-links-list a{font-size:12px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:6px;padding-top:16px}
  .footer-bottom-copy{font-size:10px}
}

/* ══ RESPONSIVE — SMALL MOBILE (380px) ══ */
@media (max-width:380px){
  .hero-title{font-size:clamp(44px,13vw,58px)}
  .prog-card{padding:16px}
  .nav{height:50px}
  .equipo-grid{grid-template-columns:1fr}
}

/* ══ PROGRAMA ÚNICO — card grande a la derecha ══ */
.prog-grid--single{
  grid-template-columns:1fr;
  max-width:780px;
  margin-left:auto;
  margin-right:0;
}
.prog-grid--single .prog-card{
  padding:56px 52px;
  border-color:rgba(200,255,0,.22);
}
.prog-grid--single .prog-card::before{
  background:var(--accent);
}
.prog-grid--single .prog-card h3{
  font-size:34px;
  margin-bottom:14px;
}
.prog-grid--single .prog-card .prog-desc{
  font-size:16px;
  line-height:1.7;
}
@media(max-width:640px){
  .prog-grid--single{margin-left:0;max-width:100%}
  .prog-grid--single .prog-card{padding:28px 20px}
  .prog-grid--single .prog-card h3{font-size:26px}
}

/* ════════════════════════════════════════════════════════
   PROGRAMAS + ESPECIALIZACIONES V3 — réplica pixel-like
   Namespace .apex-* / .apx-* — tokens oficiales APEX
   ════════════════════════════════════════════════════════ */
/* Ancho alineado con las secciones full-width (.section, padding 0 48px) para
   que "Nuestros programas" y "Especializaciones" arranquen en el mismo borde
   izquierdo (48px) que "Cómo aprendes"/"El equipo"/"Misión y valores", en vez
   de verse indentadas dentro de una caja centrada de 1250px (reporte de Sergio
   2026-06-27: "no llegan a la izquierda, están restringidas"). El tope de
   1700px evita que se estire de más en monitores ultra-anchos. */
.apex-wrap{width:min(1700px,calc(100% - 96px));margin-inline:auto}

/* ── PROGRAMAS ── */
.apex-programas{
  position:relative;padding:86px 0 72px;
  background:
    radial-gradient(900px 520px at 8% 46%, rgba(200,255,0,.075), transparent 55%),
    radial-gradient(700px 420px at 100% 8%, rgba(61,95,110,.18), transparent 55%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);
  overflow:hidden;
}
.apex-programas::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:var(--border)}
.apex-programas-grid{display:grid;grid-template-columns:minmax(0,470px) minmax(0,1fr);gap:88px;align-items:center}

.apex-copy{position:relative;min-height:640px;padding-top:2px}
/* glow verde que nace desde abajo-izquierda — da vida a la sección */
.apex-copy::before{content:"";position:absolute;left:-90px;bottom:-40px;width:560px;height:380px;z-index:0;pointer-events:none;background:radial-gradient(420px 300px at 12% 92%, rgba(200,255,0,.20), rgba(200,255,0,.05) 42%, transparent 68%)}
.apx-eyebrow{position:relative;z-index:3;font-family:var(--font-mono);color:var(--accent);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.20em;margin:0 0 34px;text-align:left}
.apx-mega-title{position:relative;z-index:3;margin:0;font-family:var(--font-display);font-weight:900;font-size:clamp(54px,5vw,78px);line-height:.88;letter-spacing:.015em;text-transform:uppercase;color:var(--text)}
.apx-mega-title span{color:var(--accent)}
.apx-lead{position:relative;z-index:3;width:430px;max-width:100%;margin:36px 0 46px;color:#c8d5da;font-size:19px;line-height:1.55;letter-spacing:.012em}

.apx-pillars{display:flex;align-items:stretch;gap:31px;position:relative;z-index:3}
.apx-pillars i{display:block;width:1px;height:96px;background:var(--border2);transform:translateY(8px)}
.apx-pillar{width:116px}
.apx-pillar img{display:block;width:52px;height:52px;margin:0 0 17px;filter:drop-shadow(0 0 10px rgba(200,255,0,.25))}
.apx-pillar strong{font-family:var(--font-display);font-size:17px;line-height:1.08;font-weight:800;text-transform:uppercase;letter-spacing:.055em;color:var(--text)}

/* gráfico de velas — ocupa la franja inferior, POR DEBAJO de pilares y texto */
.apx-market-art{position:absolute;left:-40px;right:-30px;bottom:-30px;height:300px;z-index:1;opacity:.92;background-position:left bottom;background-size:cover;background-repeat:no-repeat;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 34%);mask-image:linear-gradient(180deg,transparent 0%,#000 34%);pointer-events:none}

/* ── CARD CORE ── */
.apx-program-card{
  position:relative;min-height:600px;padding:56px 50px 50px;
  border:1px solid var(--border-mid);border-top:2px solid var(--accent);border-radius:var(--radius-lg);
  background:
    radial-gradient(700px 330px at 40% -15%, rgba(200,255,0,.045), transparent 58%),
    linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.007) 42%),
    rgba(17,44,56,.62);
  box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.04);
}
.apx-program-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 55px rgba(200,255,0,.035)}
.apx-tag{display:inline-flex;align-items:center;height:34px;padding:0 18px;border:1px solid var(--accent-bd);background:rgba(200,255,0,.035);color:var(--accent);font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;margin-bottom:34px;border-radius:2px}
.apx-card-title{margin:0 0 25px;font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:42px;line-height:.96;letter-spacing:.045em;color:var(--text)}
.apx-stats{display:flex;align-items:center;gap:33px;margin:0 0 42px;flex-wrap:wrap}
.apx-stats div{display:flex;align-items:center;gap:11px;position:relative}
.apx-stats div:not(:last-child)::after{content:"";position:absolute;right:-18px;width:1px;height:26px;background:var(--border2)}
.apx-stats img{width:28px;height:28px;flex:0 0 auto}
.apx-stats span{font-family:var(--font-display);font-size:19px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--text)}
.apx-card-hr{height:1px;border:0;background:var(--border2);margin:0 0 42px}
.apx-card-desc{margin:0 0 46px;max-width:680px;color:#c8d5da;font-size:20px;line-height:1.67;letter-spacing:.012em}

.apx-details-btn{display:flex;align-items:center;justify-content:center;gap:24px;width:100%;height:68px;padding:0 29px;border:1px solid rgba(200,255,0,.68);border-radius:var(--radius-md);background:rgba(6,15,20,.16);color:var(--text);font-family:var(--font-display);font-size:20px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;cursor:pointer;transition:var(--transition)}
.apx-details-btn:hover{background:rgba(200,255,0,.06);border-color:var(--accent)}
.apx-details-btn svg{color:var(--accent);flex-shrink:0;transition:transform .3s}
.apx-details-btn.open svg{transform:rotate(180deg)}
.apx-details-list{list-style:none;margin:0;padding:0;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s ease,opacity .4s ease;border:1px solid transparent;border-radius:var(--radius-md)}
.apx-details-list.open{max-height:2000px;opacity:1;margin-top:16px;padding:24px 30px;border-color:var(--border-acc);background:rgba(6,15,20,.16)}
/* Expandir al pasar el mouse SOLO en dispositivos con mouse real (desktop).
   En touch (iPhone/Android) el primer tap deja el :hover "pegado" porque no
   hay forma de des-hoverear sin mouse, así que el botón .open nunca se ve
   capaz de cerrar la tarjeta — bug reportado por Sergio en QA de iPhone
   (2026-06-27): "se abre pero no se cierra". En touch manda SOLO la clase
   .open del botón (arriba). */
@media (hover: hover) and (pointer: fine) {
  .apx-program-card:hover .apx-details-list{max-height:2000px;opacity:1;margin-top:16px;padding:24px 30px;border-color:var(--border-acc);background:rgba(6,15,20,.16)}
  .apx-program-card:hover .apx-details-btn{background:rgba(200,255,0,.06);border-color:var(--accent)}
  .apx-program-card:hover .apx-details-btn svg{transform:rotate(180deg)}
}
.apx-details-list li{position:relative;padding:11px 0 11px 24px;color:#c8d5da;font-size:16px;line-height:1.65;border-bottom:1px solid var(--border)}
.apx-details-list li:last-child{border-bottom:none}
.apx-details-list li::before{content:"→";position:absolute;left:0;color:var(--accent);font-weight:700}

/* ── ESPECIALIZACIONES ── */
.apex-especializaciones{
  padding:72px 0 78px;
  background:
    radial-gradient(620px 300px at 50% 55%, rgba(200,255,0,.035), transparent 62%),
    linear-gradient(180deg,var(--bg2) 0%, var(--bg) 100%);
}
.apx-special-head{display:grid;grid-template-columns:minmax(0,470px) minmax(0,1fr);gap:88px;align-items:end;margin-bottom:55px}
.apx-mega-title.small{font-size:clamp(48px,4.4vw,67px);line-height:.90}
.apx-special-head p{width:430px;max-width:100%;margin:0 0 27px;color:#c8d5da;font-size:18px;line-height:1.62}
.apx-special-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}

.apx-special-card{
  position:relative;min-height:280px;overflow:hidden;padding:34px 36px 31px;
  border:1px solid var(--border2);border-radius:var(--radius-md);
  background:
    linear-gradient(125deg, rgba(200,255,0,.08), rgba(200,255,0,.012) 38%, rgba(17,44,56,.50) 100%),
    rgba(17,44,56,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  transition:border-color .3s,transform .25s,box-shadow .3s;
}
.apx-special-card:hover{border-color:rgba(200,255,0,.42);transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,.35),0 0 50px rgba(200,255,0,.05)}

/* visual confinado a la DERECHA — nunca debajo del texto */
.apx-special-visual{position:absolute;top:0;right:0;bottom:0;width:44%;z-index:0;pointer-events:none;background-repeat:no-repeat;opacity:.9;transition:opacity .3s;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%);mask-image:linear-gradient(90deg,transparent 0%,#000 38%)}
.apx-special-card.elliott .apx-special-visual{background-position:right 30%;background-size:auto 78%}
.apx-special-card.risk .apx-special-visual{background-position:right center;background-size:auto 86%}
.apx-special-card:hover .apx-special-visual{opacity:.5}

/* cuerpo de texto a la izquierda, siempre por encima */
.apx-special-body{position:relative;z-index:1;width:64%}
.apx-special-number{font-family:var(--font-display);font-size:47px;line-height:.9;font-weight:900;color:var(--accent);letter-spacing:.045em}
.apx-special-duration{margin:15px 0 17px;font-family:var(--font-mono);color:var(--accent);font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase}
.apx-special-card h3{margin:0 0 13px;font-family:var(--font-display);font-size:25px;font-weight:800;line-height:1.07;letter-spacing:.042em;color:var(--text)}
.apx-special-sub{margin:0 0 22px;color:#c8d5da;font-size:15px;line-height:1.5}

/* puntos — se despliegan al acercarse (hover) */
.apx-special-points{list-style:none;margin:0;padding:0;max-height:0;overflow:hidden;opacity:0;transition:max-height .45s ease,opacity .35s ease}
.apx-special-card:hover .apx-special-points{max-height:360px;opacity:1;margin:0 0 20px}
.apx-special-points li{position:relative;padding:8px 0 8px 20px;color:#c8d5da;font-size:13.5px;line-height:1.5;border-bottom:1px solid var(--border)}
.apx-special-points li:last-child{border-bottom:none}
.apx-special-points li::before{content:"→";position:absolute;left:0;color:var(--accent);font-weight:700}

.apx-special-cta{display:inline-flex;align-items:center;gap:18px;height:41px;padding:0 24px;border:1px solid rgba(200,255,0,.55);border-radius:var(--radius);color:var(--text);background:rgba(6,15,20,.20);font-family:var(--font-display);font-size:16px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;text-decoration:none;transition:var(--transition)}
.apx-special-cta:hover{background:rgba(200,255,0,.08);border-color:var(--accent)}
.apx-special-cta span{color:var(--accent);font-size:29px;line-height:0}

/* ── RESPONSIVE programas/especializaciones ── */
@media(max-width:1100px){
  .apex-programas-grid,.apx-special-head{grid-template-columns:1fr;gap:48px}
  .apex-copy{min-height:540px}
  .apx-program-card{min-height:unset}
  .apx-special-head{align-items:start}
  .apx-special-head p{width:min(520px,100%)}
}
@media(max-width:760px){
  .apex-wrap{width:min(100% - 30px,1250px)}
  .apex-programas{padding:56px 0}
  .apex-copy{min-height:auto}
  .apx-mega-title{font-size:48px}
  .apx-lead{width:100%;font-size:17px}
  .apx-pillars{gap:18px;flex-wrap:wrap}
  .apx-pillars i{display:none}
  .apx-market-art{display:none}
  .apx-program-card{padding:34px 22px}
  .apx-card-title{font-size:33px}
  .apx-stats{gap:16px;flex-direction:column;align-items:flex-start}
  .apx-stats div::after{display:none!important}
  .apx-card-desc{font-size:17px}
  .apx-details-btn{height:auto;min-height:60px;padding:15px;font-size:15px;letter-spacing:.06em;gap:14px}
  .apx-special-grid{grid-template-columns:1fr}
  .apx-special-body{width:72%}
  .apx-special-visual{width:36%}
  .apx-special-points{max-height:none!important;opacity:1!important;margin:0 0 18px!important}
}

/* ════════════════════════════════════════
   APEX FLOW — SECCIÓN HOME (#flow)
   Insertada 2026-06-26, diseño entregado por Sergio
   ════════════════════════════════════════ */

.flow-inner{max-width:1200px;margin:0 auto;padding:0 40px}

/* ─── Layout principal ─── */
.flow-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}

/* ══════════ COLUMNA IZQUIERDA ══════════ */

.flow-headline{font-family:var(--font-display);font-weight:900;font-size:clamp(38px,3.8vw,56px);line-height:.93;text-transform:uppercase;letter-spacing:-.01em;color:var(--text);margin-bottom:24px}
.flow-headline .lx{color:var(--accent)}

.flow-desc{font-size:15px;color:var(--gray);line-height:1.7;margin-bottom:48px;max-width:460px}

.flow-pillars{display:flex;flex-direction:column;gap:26px}

.flow-pillar{display:flex;align-items:flex-start;gap:16px}

.flow-pillar-icon{
  width:42px;height:42px;min-width:42px;
  background:var(--bg3);border:1px solid var(--border2);
  border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;
  color:var(--accent);flex-shrink:0
}

.flow-pillar-title{font-family:var(--font-display);font-weight:900;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--text);margin-bottom:4px;line-height:1;display:flex;align-items:center;gap:9px}
.flow-pillar-pro{font-family:var(--font-mono);font-size:8.5px;font-weight:700;letter-spacing:.12em;color:var(--accent-t);background:var(--accent);border-radius:20px;padding:3px 7px;line-height:1}
.flow-pillar-icon.is-pro{background:var(--accent-bg);border-color:var(--accent-bd)}

.flow-pillar-sub{font-size:13px;color:var(--gray);line-height:1.5}

/* ─── Link de la columna izquierda ─── */
.flow-inline-link{display:inline-flex;align-items:center;gap:9px;margin-top:34px;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);padding-bottom:4px;border-bottom:1px solid var(--accent-bd);transition:gap .18s ease,border-color .18s ease}
.flow-inline-link:hover{gap:14px;border-bottom-color:var(--accent)}

/* ══════════════════════════════════════════════════
   COLUMNA DERECHA — MAQUETA DE TELÉFONO
   Rediseño 2026-07-24: reemplaza la tarjeta-teaser de
   4 mini-paneles (texto de 6,5-8px, ilegible). Reproduce
   la pantalla real de /start/ a tamaño legible.
   ══════════════════════════════════════════════════ */

.flow-device-stage{position:relative;display:flex;justify-content:center;padding:8px 0 6px}

.flow-device-glow{
  position:absolute;top:8%;left:50%;transform:translateX(-50%);
  width:78%;height:70%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(200,255,0,.16),rgba(200,255,0,0));
  filter:blur(30px);pointer-events:none;z-index:0
}

/* ── Carcasa ── */
.flow-phone{
  position:relative;z-index:1;
  width:min(300px,82vw);aspect-ratio:9/19.2;
  padding:9px;border-radius:42px;
  background:linear-gradient(160deg,#26505f 0%,#12303c 38%,#0b222b 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 34px 70px -20px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.16)
}
.flow-phone-island{
  position:absolute;top:19px;left:50%;transform:translateX(-50%);
  width:84px;height:21px;border-radius:14px;background:#04090c;z-index:4
}

/* ── Pantalla ── */
.flow-screen{
  height:100%;border-radius:34px;background:var(--bg);overflow:hidden;
  display:flex;flex-direction:column;position:relative
}

/* Barra de estado del sistema */
.flow-sb{display:flex;align-items:center;justify-content:space-between;padding:15px 20px 0;color:var(--text)}
.flow-sb-time{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.02em}
.flow-sb-icons{display:flex;align-items:center;gap:5px;color:var(--text);opacity:.85}
.flow-sb-batt{width:17px;height:9px;border:1px solid currentColor;border-radius:2.5px;position:relative;display:inline-block;opacity:.9}
.flow-sb-batt::after{content:'';position:absolute;right:-3px;top:2.5px;width:1.5px;height:4px;background:currentColor;border-radius:0 1px 1px 0}
.flow-sb-batt i{position:absolute;inset:1.5px;width:70%;background:currentColor;border-radius:1px;display:block}

/* Topbar de la app */
.flow-app-top{display:flex;align-items:center;gap:9px;padding:12px 14px 12px;border-bottom:1px solid var(--border)}
.flow-app-iso{
  width:28px;height:28px;flex-shrink:0;border-radius:7px;
  background:var(--bg4);border:1px solid var(--border-mid);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:900;font-size:14px;color:var(--text);line-height:1
}
.flow-app-iso i{color:var(--accent);font-style:normal}
.flow-app-titles{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.flow-app-kicker{font-family:var(--font-mono);font-size:7.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);line-height:1}
.flow-app-title{font-family:var(--font-display);font-weight:900;font-size:15px;letter-spacing:.02em;color:var(--text);line-height:1}
.flow-app-pro{font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-t);background:var(--accent);border-radius:20px;padding:4px 9px;flex-shrink:0}

/* Cuenta conectada (cTrader, solo lectura) */
.flow-app-cuenta{display:flex;align-items:center;gap:9px;margin:12px 14px 0;padding:10px 12px;background:var(--bg3);border:1px solid var(--border-mid);border-radius:var(--radius-md)}
.flow-app-cuenta-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;box-shadow:0 0 7px rgba(34,197,94,.55)}
.flow-app-cuenta-txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.flow-app-cuenta-txt b{font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--text);line-height:1}
.flow-app-cuenta-txt i{font-family:var(--font-mono);font-style:normal;font-size:8px;letter-spacing:.08em;color:var(--gray)}
.flow-app-cuenta-tag{font-family:var(--font-mono);font-size:7.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green);background:var(--green-bg);border-radius:3px;padding:3px 6px;flex-shrink:0}

/* Curva de balance */
.flow-app-chart{position:relative;padding:2px 0 4px}
.flow-app-chart svg{display:block;width:100%;height:70px}
.flow-app-chart-note{position:absolute;left:0;bottom:-2px;font-family:var(--font-mono);font-size:7.5px;letter-spacing:.06em;color:var(--gray2)}

/* KPIs */
.flow-app-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px 14px 0}
.flow-app-kpi{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-md);padding:9px 6px;text-align:center}
.flow-app-kpi b{display:block;font-family:var(--font-display);font-weight:900;font-size:17px;line-height:1;color:var(--accent);margin-bottom:4px}
.flow-app-kpi b.warn{color:#ff8080}
.flow-app-kpi i{font-family:var(--font-mono);font-style:normal;font-size:7px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray)}

/* Psicotrading */
.flow-app-psico{display:flex;align-items:center;gap:8px;padding:7px 2px;border-bottom:1px solid var(--border)}
.flow-app-psico:last-child{border-bottom:none}
.flow-app-psico-ico{width:19px;height:19px;flex-shrink:0;border-radius:5px;display:flex;align-items:center;justify-content:center;background:rgba(239,68,68,.14);color:#ff8080}
.flow-app-psico-ico.ok{background:var(--green-bg);color:var(--green)}
.flow-app-psico-t{flex:1;min-width:0;font-size:10.5px;color:var(--text);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flow-app-psico-v{font-family:var(--font-mono);font-size:10px;font-weight:700;color:#ff8080;flex-shrink:0}
.flow-app-psico-v.ok{color:var(--green)}

/* Cuerpo scrolleable de la pantalla: lo que sobra se corta contra la barra
   inferior, igual que en un teléfono real */
.flow-screen-body{flex:1;min-height:0;overflow:hidden}

/* Bloque "hoy en el mercado" / "mis activos" */
.flow-app-block{padding:13px 14px 4px}
.flow-app-block-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.flow-app-block-head>span:first-child{font-family:var(--font-mono);font-size:8.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.flow-app-block-link{font-family:var(--font-mono);font-size:8px;letter-spacing:.06em;color:var(--accent)}
/* Reglas y disciplina */
.flow-app-adh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:2px 0 7px}
.flow-app-adh-k{font-size:10.5px;color:var(--text)}
.flow-app-adh-v{font-family:var(--font-display);font-weight:900;font-size:16px;color:var(--accent);line-height:1}
.flow-app-bar{height:6px;border-radius:20px;background:var(--bg4);overflow:hidden}
.flow-app-bar i{display:block;height:100%;border-radius:20px;background:var(--accent)}

/* Filas clave/valor (costos) */
.flow-app-kv{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:7px 0;border-bottom:1px solid var(--border)}
.flow-app-kv:last-child{border-bottom:none}
.flow-app-kv span{font-size:10.5px;color:var(--gray)}
.flow-app-kv b{font-family:var(--font-mono);font-size:10.5px;font-weight:700;color:var(--text)}
.flow-app-kv b.warn{color:#ff8080}

/* Barra inferior de la app */
.flow-app-nav{margin-top:auto;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:9px 6px 16px;border-top:1px solid var(--border);background:var(--bg2)}
.flow-app-nav-i{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--gray2)}
.flow-app-nav-i i{font-family:var(--font-mono);font-style:normal;font-size:7px;letter-spacing:.04em;text-transform:uppercase}
.flow-app-nav-i.on{color:var(--accent)}
/* Zona Performance: 6 ítems en el mismo ancho */
.flow-app-nav.is-lab{grid-template-columns:repeat(6,1fr);padding-left:3px;padding-right:3px}
.flow-app-nav.is-lab .flow-app-nav-i i{font-size:6px;letter-spacing:0}

/* ── Tarjetas flotantes ── */
.flow-float{
  position:absolute;z-index:2;
  background:rgba(17,44,56,.94);backdrop-filter:blur(6px);
  border:1px solid var(--border-mid);border-radius:var(--radius-md);
  box-shadow:0 18px 36px -12px rgba(0,0,0,.7)
}

/* Posición: pisan sólo el borde del teléfono y las zonas menos importantes
   de la pantalla (nunca el gráfico ni los KPIs). */
.flow-float-calc{left:-26px;bottom:58px;width:142px;padding:11px}
.flow-float-head{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);margin-bottom:9px}
.flow-float-head svg{color:var(--accent);flex-shrink:0}
.flow-float-pro{margin-left:auto;font-size:7.5px;font-weight:700;letter-spacing:.12em;color:var(--accent-t);background:var(--accent);border-radius:20px;padding:2px 6px}
.flow-float-row{display:flex;align-items:center;justify-content:space-between;padding:3.5px 0}
.flow-float-row span{font-size:10.5px;color:var(--gray)}
.flow-float-row b{font-family:var(--font-mono);font-size:10.5px;font-weight:700;color:var(--text)}
.flow-float-out{display:flex;align-items:center;justify-content:space-between;margin-top:7px;padding:7px 9px;background:var(--accent-bg);border:1px solid var(--accent-bd);border-radius:var(--radius)}
.flow-float-out span{font-family:var(--font-mono);font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.flow-float-out b{font-family:var(--font-mono);font-size:14px;font-weight:700;color:var(--accent);line-height:1}

.flow-float-alert{right:-22px;top:14px;width:162px;padding:10px 11px;display:flex;align-items:center;gap:9px}
.flow-float-bell{width:26px;height:26px;flex-shrink:0;border-radius:50%;background:var(--accent-bg);border:1px solid var(--accent-bd);display:flex;align-items:center;justify-content:center;color:var(--accent)}
.flow-float-alert-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.flow-float-alert-txt b{font-size:11px;font-weight:600;color:var(--text);line-height:1.25}
.flow-float-alert-txt i{font-family:var(--font-mono);font-style:normal;font-size:7.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}

/* ── Pie de la maqueta ── */
.flow-device-caption{display:flex;align-items:flex-start;gap:9px;max-width:360px;margin:22px auto 0;font-family:var(--font-mono);font-size:10.5px;line-height:1.65;letter-spacing:.03em;color:var(--gray);text-align:left}
.flow-device-caption b{color:var(--text);font-weight:700}
.flow-device-caption i{font-style:normal;color:var(--gray2)}
.flow-pwa-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-top:5px;box-shadow:0 0 6px var(--accent-glow)}

/* ══════════════════════════════════════════════════
   FRANJA DE PLANES — Gratis vs Pro
   Contenido verificado contra apex-start-pro.php (tabla
   única Gratis/PRO) y el precio de apex-flow-pro.php.
   ══════════════════════════════════════════════════ */

.flow-planes{margin-top:72px}

.flow-planes-head{text-align:center;margin-bottom:30px}
.flow-planes-head .apx-eyebrow{justify-content:center}
.flow-planes-h3{font-family:var(--font-display);font-weight:900;font-size:clamp(24px,2.4vw,34px);line-height:1.05;text-transform:uppercase;letter-spacing:-.01em;color:var(--text);margin-top:10px}

.flow-planes-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1000px;margin:0 auto}

.flow-plan{position:relative;display:flex;flex-direction:column;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:28px 26px}
.flow-plan.is-pro{background:linear-gradient(180deg,rgba(200,255,0,.07),rgba(200,255,0,.015));border-color:var(--border-mid)}

.flow-plan-tag{position:absolute;top:-11px;right:24px;background:var(--accent);color:var(--accent-t);font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:20px}

.flow-plan-top{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.flow-plan-name{font-family:var(--font-display);font-weight:900;font-size:20px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray);line-height:1}
.flow-plan.is-pro .flow-plan-name{color:var(--accent)}
.flow-plan-price{font-family:var(--font-display);font-weight:900;font-size:38px;line-height:.9;color:var(--text);text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.flow-plan-per{font-family:var(--font-mono);font-size:9.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--gray)}

.flow-plan-claim{font-size:13.5px;line-height:1.6;color:var(--gray);margin:16px 0 20px}
.flow-plan-claim b{color:var(--text);font-weight:600}

.flow-plan-list{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:26px}
.flow-plan-list li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.45;color:var(--gray)}
.flow-plan.is-pro .flow-plan-list li{color:var(--text)}
.flow-plan-list li b{font-weight:600;color:var(--text)}
.flow-plan-list svg{width:14px;height:14px;flex-shrink:0;margin-top:2px;color:var(--gray2)}
.flow-plan.is-pro .flow-plan-list svg{color:var(--accent)}

.flow-plan-cta{margin-top:auto;width:100%}

.flow-planes-nota{max-width:720px;margin:26px auto 0;text-align:center;font-size:13px;line-height:1.6;color:var(--gray)}
.flow-planes-nota b{color:var(--text);font-weight:600}

.flow-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 14px;border-radius:var(--radius-md);font-family:var(--font-display);font-weight:900;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border:none;transition:all .18s ease;text-decoration:none;line-height:1}

.flow-btn.primary{background:var(--accent);color:var(--accent-t)}
.flow-btn.primary:hover{background:#d8ff20;transform:translateY(-1px);box-shadow:0 4px 16px var(--accent-glow)}

.flow-btn.outline{background:transparent;color:var(--text);border:1px solid var(--border2)}
.flow-btn.outline:hover{border-color:var(--accent-bd);color:var(--accent)}

/* ─── Franja disclaimer ─── */
.flow-disclaimer{margin-top:40px;padding:14px 22px;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--radius-md);display:flex;align-items:center;gap:16px}

.flow-disc-icon{color:var(--accent);flex-shrink:0}

.flow-disc-text{font-family:var(--font-mono);font-size:11px;color:var(--gray);letter-spacing:.04em;display:flex;align-items:center;gap:14px;flex-wrap:wrap}

.flow-disc-strong{color:var(--text);font-weight:600}

.flow-disc-sep{color:var(--border2);font-size:16px;line-height:1;flex-shrink:0}

/* ─── Responsive ─── */
@media(max-width:1100px){
  .flow-float-calc{left:-20px;bottom:48px;width:134px}
  .flow-float-alert{right:-22px;top:8px;width:150px}
}
@media(max-width:1024px){
  .flow-grid{gap:48px}
}
@media(max-width:900px){
  .flow-grid{grid-template-columns:1fr;gap:52px}
  .flow-headline{font-size:44px}
  .flow-desc{max-width:100%}
  .flow-float-calc{left:calc(50% - 202px);bottom:58px}
  .flow-float-alert{right:calc(50% - 206px);top:8px}
  .flow-planes{margin-top:56px}
}
@media(max-width:760px){
  /* No hay lugar a los costados del teléfono: las flotantes se ocultan y
     la pantalla del teléfono queda como único protagonista. */
  .flow-float{display:none}
  .flow-planes-grid{grid-template-columns:1fr;max-width:460px}
  .flow-plan-tag{right:20px}
}
@media(max-width:640px){
  .flow-inner{padding:0 22px}
  /* La sección nunca se había ajustado a móvil: "TU CENTRO OPERATIVO" a 44px
     no entra en 390px y desbordaba toda la grilla. */
  .flow-headline{font-size:clamp(28px,8.4vw,42px)}
  .flow-desc{font-size:14.5px;margin-bottom:38px}
  .flow-pillars{gap:22px}
  .flow-device-caption{max-width:100%}
  .flow-plan{padding:24px 20px}
  .flow-plan-price{font-size:34px}
  .flow-disclaimer{flex-direction:column;align-items:flex-start}
  .flow-disc-sep{display:none}
  .flow-disc-text{flex-direction:column;align-items:flex-start;gap:6px}
}