/* ============================================================
   style-portada-v2.css — Portada "Producto premium"
   Fondo blanco/negro con linear gradients · color en componentes
   Tipografía: Space Grotesk (display/datos) + Inter (texto/UI)
   Tema: OSCURO por defecto (#app) · CLARO con .light-theme
   Lo usan: index.php · pacientes.php · entrenadores.php
============================================================ */

/* ───── Tokens · OSCURO (base) ───── */
#app{
  --bg:#070709;
  --bg2:#0A0A0D;
  --surface1:#101014;
  --surface2:#0B0B0E;
  --tile:#15151A;
  --cbd:rgba(255,255,255,.09);
  --tbd:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.08);
  --title:#FAFAFA;
  --text:#E9E9EC;
  --muted:#9b9ba3;
  --faint:#6b6b73;
  --sheen:rgba(255,255,255,.06);
  --a-lime:#bef264;
  --a-emer:#34d399;
  --a-teal:#2dd4bf;
  --a-viol:#9b7bff;
  --btn-fg:#08080A;
  --phone:#161616;
  --max:1180px;
}
/* ───── Tokens · CLARO (.light-theme) ───── */
#app.light-theme{
  --bg:#ffffff;
  --bg2:#F5F6F8;
  --surface1:#ffffff;
  --surface2:#FBFBFD;
  --tile:#F4F5F7;
  --cbd:rgba(15,18,25,.10);
  --tbd:rgba(15,18,25,.07);
  --line:rgba(15,18,25,.08);
  --title:#0C0C12;
  --text:#24242C;
  --muted:#5D5D68;
  --faint:#9A9AA3;
  --sheen:rgba(15,18,25,.04);
  --a-lime:#5C9E00;
  --a-emer:#0F9D6E;
  --a-teal:#0D9488;
  --a-viol:#6D3FD6;
  --btn-fg:#ffffff;
  --phone:#1c1c20;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
.body-style{
  background:var(--bg);color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background .35s ease,color .35s ease;
}
.wrap{position:relative;z-index:1}
.wrap::before{content:"";position:absolute;top:0;left:0;right:0;height:680px;background:linear-gradient(180deg,var(--sheen),transparent 40%),linear-gradient(120deg,var(--sheen),transparent 42%);pointer-events:none;z-index:0}
.ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block;flex-shrink:0}

/* Display: Space Grotesk */
.hero-v2 h1,.hf-h,.s-title,.bn-h,.beta-title,.pilar-name,.story-title,.story-number,.usa-h,.logo,.foot-logo,.aside-title,.es-t,.ned-list-hd,.hcd-head b,.hct-hd b,.hcx-hd{
  font-family:'Space Grotesk','Inter',sans-serif;
}
/* Texto con degradado (palabra acento) */
.hero-v2 h1 em,.hf-h em,.s-title em,.beta-title em{font-style:normal;font-weight:700;color:var(--title)}

/* ───── Header / nav ───── */
header{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(16px) saturate(1.1);border-bottom:1px solid var(--line)}
.nav{max-width:var(--max);margin:0 auto;padding:15px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{font-size:18px;font-weight:700;letter-spacing:-.3px;color:var(--title);text-decoration:none}
.nav-right{display:flex;align-items:center;gap:18px}
.nav-link{font-size:14px;font-weight:500;color:var(--muted);text-decoration:none;transition:color .2s}
.nav-link:hover{color:var(--title)}
.nav-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--a-lime) 30%,transparent);background:color-mix(in srgb,var(--a-lime) 8%,transparent);color:var(--a-lime);font-size:11px;font-weight:600;letter-spacing:.3px}
.nav-badge-dot{width:5px;height:5px;border-radius:50%;background:var(--a-lime)}
.btn-login{padding:9px 16px;border-radius:8px;border:1px solid var(--cbd);background:transparent;color:var(--text);font-size:13px;font-weight:500;text-decoration:none;transition:border-color .2s,color .2s}
.btn-login:hover{border-color:var(--a-emer);color:var(--a-emer)}

/* Botón de tema (icono via CSS) */
.theme-btn{width:34px;height:34px;border:1px solid var(--cbd);background:transparent;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--text);transition:border-color .2s,color .2s;flex-shrink:0}
.theme-btn:hover{border-color:var(--a-emer);color:var(--a-emer)}
.theme-btn .ic{width:16px;height:16px}
.theme-btn .t-moon{display:none}.theme-btn .t-sun{display:block}
#app.light-theme .theme-btn .t-sun{display:none}
#app.light-theme .theme-btn .t-moon{display:block}

/* ───── Botones ───── */
.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:9px;background:linear-gradient(135deg,var(--a-lime),var(--a-emer));color:var(--btn-fg);font-size:14px;font-weight:600;border:none;cursor:pointer;text-decoration:none;transition:transform .2s,filter .2s}
.btn-primary:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn-ghost{display:inline-flex;align-items:center;gap:7px;padding:12px 22px;border-radius:9px;background:transparent;border:1px solid var(--cbd);color:var(--text);font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;transition:border-color .2s,color .2s}
.btn-ghost:hover{border-color:var(--a-emer);color:var(--a-emer)}

/* ───── Kicker (pill, sin raya) ───── */
.hero-tag,.s-tag,.hf-tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--a-lime);border:1px solid color-mix(in srgb,var(--a-lime) 24%,transparent);background:color-mix(in srgb,var(--a-lime) 8%,transparent);padding:5px 13px;border-radius:999px}
.hero-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--a-lime)}

/* ───── HERO (centrado, sobre lienzo) ───── */
.hero-v2{max-width:var(--max);margin:0 auto;padding:64px 32px 26px;text-align:center}
.hero-tag{margin-bottom:20px;opacity:0;animation:up .6s .05s ease forwards}
.center .s-tag,.band-head .s-tag{margin-bottom:18px}
.hero-v2 h1{font-size:clamp(38px,6vw,56px);font-weight:700;line-height:1.04;letter-spacing:-1.6px;color:var(--title);max-width:640px;margin:0 auto 16px;opacity:0;animation:up .6s .12s ease forwards}
.hero-sub{font-size:16.5px;line-height:1.6;color:var(--muted);font-weight:400;max-width:520px;margin:0 auto 26px;opacity:0;animation:up .6s .2s ease forwards}
.hero-cta{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;opacity:0;animation:up .6s .28s ease forwards}
.hero-pills{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:26px;opacity:0;animation:up .6s .4s ease forwards}
.hpill{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;font-weight:500}
.hpill .ic{width:15px;height:15px;color:var(--a-emer)}
.hero-stage{position:relative;max-width:900px;margin:44px auto 0;opacity:0;animation:up .8s .32s ease forwards}

/* ───── HERO split + tarjetas flotantes ───── */
.hero-split{max-width:var(--max);margin:0 auto;padding:56px 32px 48px;display:grid;grid-template-columns:1.02fr .98fr;gap:32px;align-items:center}
.hs-text{opacity:0;animation:up .6s .1s ease forwards}
.hs-text .hero-tag{margin-bottom:20px}
.hs-text h1{font-family:'Space Grotesk','Inter',sans-serif;font-size:clamp(34px,4.6vw,50px);font-weight:700;line-height:1.04;letter-spacing:-1.5px;color:var(--title);margin:0 0 16px}
.hs-text h1 em{font-style:normal;font-weight:700;color:var(--title)}
.hs-text .hero-sub{font-size:16px;line-height:1.6;color:var(--muted);font-weight:400;max-width:410px;margin:0 0 24px}
.hs-text .hero-cta{display:flex;gap:11px;flex-wrap:wrap}
.hs-stage{position:relative;min-height:350px;opacity:0;animation:up .8s .3s ease forwards}
.float-card{position:absolute;background:linear-gradient(180deg,var(--surface1),var(--surface2));border:1px solid var(--cbd);border-radius:12px;box-shadow:0 30px 60px -28px rgba(0,0,0,.85);padding:14px;will-change:transform}
.fc-notes{top:4px;right:6px;width:240px;animation:floatA 7s ease-in-out infinite}
.fc-chart{top:112px;left:0;width:214px;animation:floatB 8s ease-in-out infinite .4s}
.fc-appt{bottom:0;right:34px;width:208px;animation:floatC 6.5s ease-in-out infinite .2s}
@keyframes floatA{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(-11px) rotate(2deg)}}
@keyframes floatB{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(-3deg)}}
@keyframes floatC{0%,100%{transform:translateY(0) rotate(2.5deg)}50%{transform:translateY(-9px) rotate(2.5deg)}}
.fcn-hd{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:9px}
.fcn-hd b{color:var(--title);font-weight:600}
.fcn-g{font-size:9px;font-weight:600;letter-spacing:.06em;margin-bottom:2px;color:var(--a-emer)}
.fcn-g.gb{color:var(--a-lime)}.fcn-g.gc{color:var(--a-viol)}
.fcn-v{font-size:11px;color:var(--muted);font-family:'Space Grotesk','Inter',sans-serif;margin-bottom:7px}
.fcn-v:last-child{margin-bottom:0}
.fc-lbl{font-size:11px;font-weight:600;color:var(--text);margin-bottom:6px}
.fc-big{font-size:18px;font-weight:700;font-family:'Space Grotesk';color:var(--a-emer);margin-top:4px}
.fca-row{display:flex;align-items:center;gap:9px}
.fca-av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--a-lime),var(--a-emer));color:var(--btn-fg);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;flex-shrink:0}
.fca-n{font-size:12px;font-weight:600;color:var(--title)}
.fca-s{font-size:10px;color:var(--muted)}
.fca-amt{margin-left:auto;font-size:14px;font-weight:700;font-family:'Space Grotesk';color:var(--a-emer)}
.fca-paid{display:inline-block;margin-top:9px;font-size:9.5px;font-weight:600;color:var(--a-emer);border:1px solid color-mix(in srgb,var(--a-emer) 25%,transparent);padding:3px 8px;border-radius:5px}
@media(prefers-reduced-motion:reduce){.float-card{animation:none !important}.fc-notes{transform:rotate(2deg)}.fc-chart{transform:rotate(-3deg)}.fc-appt{transform:rotate(2.5deg)}}
@media(max-width:860px){
  .hero-split{grid-template-columns:1fr;padding:48px 20px 36px;gap:8px}
  .hs-stage{min-height:0;display:flex;flex-direction:column;gap:12px;margin-top:18px}
  .float-card{position:static;width:auto !important;animation:none !important;transform:none !important}
}

/* ───── Carrusel hero ───── */
.hero-carousel{max-width:600px;margin:40px auto 0;opacity:0;animation:up .8s .32s ease forwards}
.hc-view{overflow:hidden;border-radius:14px}
.hc-track{display:flex;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.hc-slide{min-width:100%}
.hc-card{background:linear-gradient(180deg,var(--surface1),var(--surface2));border:1px solid var(--cbd);border-radius:14px;padding:20px;text-align:left;min-height:240px;box-shadow:0 30px 60px -28px rgba(0,0,0,.7)}
.hc-dots{display:flex;gap:7px;justify-content:center;margin-top:18px}
.hc-dot{width:7px;height:7px;border-radius:50%;background:var(--cbd);border:none;padding:0;cursor:pointer;transition:all .3s}
.hc-dot.on{background:var(--a-emer);width:22px;border-radius:3px}
.hcx-tag{display:inline-block;margin-top:14px;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--a-lime)}
.hcd-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.hcd-head b{font-size:14px;font-weight:600;color:var(--title)}
.hcd-chip{font-size:11px;color:var(--muted);background:var(--tile);border:1px solid var(--tbd);padding:3px 10px;border-radius:6px;font-weight:500}
.hcd-kpis{display:flex;gap:9px;margin-bottom:13px}
.hcd-kpi{flex:1;background:var(--tile);border:1px solid var(--tbd);border-radius:8px;padding:11px}
.hcd-kpi .l{font-size:10px;color:var(--muted);font-weight:500}
.hcd-kpi .n{font-family:'Space Grotesk';font-size:19px;font-weight:700;margin-top:3px;color:var(--title)}
.hcd-kpi .n.g{color:var(--a-emer)}
.hcd-chart{display:flex;align-items:flex-end;gap:6px;height:46px;margin-bottom:13px}
.hcd-col{flex:1;background:color-mix(in srgb,var(--a-emer) 28%,transparent);border-radius:3px 3px 0 0}
.hcd-col.hi{background:linear-gradient(180deg,var(--a-lime),var(--a-emer))}
.hcd-cita{display:flex;align-items:center;gap:10px;background:var(--tile);border:1px solid var(--tbd);border-radius:8px;padding:10px 12px}
.hcd-av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--a-lime),var(--a-emer));color:var(--btn-fg);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.hcd-paid{margin-left:auto;font-size:10px;font-weight:600;color:var(--a-emer)}
.hcx-hd{font-size:14px;font-weight:600;color:var(--title);display:flex;justify-content:space-between;margin-bottom:9px}
.hcx-hd span{color:var(--muted);font-weight:400;font-family:'Inter';font-size:13px}
.hcx-food{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);font-weight:400;padding:3px 0}
.hcx-eqr{display:flex;align-items:center;gap:8px;margin-top:8px}
.hcx-eql{font-size:10.5px;color:var(--muted);width:64px;font-weight:500}
.hcx-eqbar{flex:1;height:7px;background:var(--tile);border-radius:99px;overflow:hidden}
.hcx-eqf{display:block;height:100%;background:linear-gradient(90deg,var(--a-lime),var(--a-emer));border-radius:99px}
.hcx-eqr + .hcx-eqr .hcx-eqf{background:linear-gradient(90deg,var(--a-emer),var(--a-teal))}
.hcx-eqr + .hcx-eqr + .hcx-eqr .hcx-eqf{background:linear-gradient(90deg,var(--a-teal),var(--a-viol))}
.hcm{display:flex;align-items:center;gap:20px;padding:8px 0}
.hcm-leg{display:flex;flex-direction:column;gap:9px}
.hcm-lg{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--text)}
.hcm-ld{width:10px;height:10px;border-radius:2px}
.hcm-lv{color:var(--muted);font-weight:400;margin-left:auto}
.hct{display:flex;flex-direction:column;gap:10px}
.hct-hd{display:flex;align-items:center;justify-content:space-between}
.hct-hd b{font-size:15px;font-weight:600;color:var(--title)}
.hct-score{font-size:12px;color:var(--muted);font-weight:400}
.hct-score b{font-size:18px;color:var(--title);font-weight:700}
.hct-flag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#fbbf24;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.28);padding:6px 11px;border-radius:6px;align-self:flex-start}
.hct-flag .ic{width:14px;height:14px}
.hct-crit{font-size:12px;color:var(--muted);font-weight:400;display:flex;align-items:center;gap:6px}
.hct-crit .ic{width:14px;height:14px;color:var(--a-emer)}

/* ───── HERO full-bleed (pacientes) ───── */
.hero-full{position:relative;min-height:560px;display:flex;align-items:center;overflow:hidden;background:#0c0e11}
.hero-full video,.hero-full .hf-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-full::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(7,7,9,.86) 0%,rgba(7,7,9,.55) 46%,rgba(7,7,9,.15) 100%)}
.hf-inner{position:relative;z-index:2;max-width:var(--max);margin:0 auto;padding:64px 32px;width:100%}
.hf-box{max-width:580px;color:#F7F8FA}
.hf-tag{color:var(--a-lime);background:color-mix(in srgb,var(--a-lime) 12%,transparent);border-color:color-mix(in srgb,var(--a-lime) 30%,transparent);margin-bottom:18px}
.hf-h{font-size:clamp(38px,5.4vw,60px);font-weight:700;letter-spacing:-1.5px;line-height:1.03;margin-bottom:18px;color:#F7F8FA}
.hf-sub{font-size:16.5px;line-height:1.6;color:rgba(247,248,250,.9);font-weight:400;margin-bottom:26px;max-width:480px}
.hf-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-full .btn-ghost{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.4);color:#fff}
.hero-full .btn-ghost:hover{background:rgba(255,255,255,.2);border-color:#fff;color:#fff}
.hf-pills{display:flex;gap:22px;flex-wrap:wrap;margin-top:26px}
.hf-pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:rgba(247,248,250,.92)}
.hf-pill .ic{width:15px;height:15px;color:var(--a-lime)}
@media(max-width:700px){.hero-full{min-height:480px}.hf-inner{padding:48px 20px}.hf-pills{display:none}.hero-full .btn-ghost{display:none}}

/* ───── Bandas ───── */
.band{max-width:none;padding:84px 0;position:relative}
.band--tint{background:linear-gradient(180deg,var(--bg2),var(--bg))}
.band--app{background:linear-gradient(180deg,var(--bg2),var(--bg))}
.band-inner{max-width:var(--max);margin:0 auto;padding:0 32px}
.center{text-align:center}
.band-head{margin-bottom:48px}
.center .s-tag{margin-left:auto;margin-right:auto}
.s-title{font-size:clamp(28px,4vw,40px);font-weight:700;letter-spacing:-1.1px;line-height:1.08;color:var(--title);margin:0 0 14px}
.s-sub{font-size:15.5px;line-height:1.6;color:var(--muted);font-weight:400;max-width:540px}
.s-sub.center{margin-left:auto;margin-right:auto}

/* ───── Bento de pilares ───── */
.pilar-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:14px}
.pilar-card{background:linear-gradient(180deg,var(--surface1),var(--surface2));border:1px solid var(--cbd);border-radius:14px;padding:28px;transition:border-color .3s,transform .3s}
.pilar-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--a-emer) 45%,var(--cbd))}
.pilar-card.feat{grid-row:span 2;display:flex;flex-direction:column}
.pilar-ico{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;margin-bottom:16px;background:color-mix(in srgb,var(--a-emer) 13%,transparent);border:1px solid color-mix(in srgb,var(--a-emer) 22%,transparent);color:var(--a-emer)}
.pilar-ico .ic{width:22px;height:22px}
.pbadge{display:inline-flex;align-items:center;gap:7px;margin-bottom:12px;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--a-emer)}
.pbadge .ic{width:12px;height:12px}
.pilar-name{font-size:20px;font-weight:600;letter-spacing:-.3px;color:var(--title);margin-bottom:9px}
.pilar-desc{font-size:13.5px;color:var(--muted);line-height:1.6;font-weight:400}
.pilar-card.cat-blue .pilar-ico{background:color-mix(in srgb,var(--a-viol) 14%,transparent);border-color:color-mix(in srgb,var(--a-viol) 25%,transparent);color:var(--a-viol)}
.pilar-card.cat-blue .pbadge{color:var(--a-viol)}
.pilar-card.cat-amber .pilar-ico{background:color-mix(in srgb,var(--a-lime) 13%,transparent);border-color:color-mix(in srgb,var(--a-lime) 22%,transparent);color:var(--a-lime)}
.pilar-card.cat-amber .pbadge{color:var(--a-lime)}

/* Notas / filas de datos */
.pilar-note{margin-top:auto;padding-top:18px}
.pn-row{background:var(--tile);border:1px solid var(--tbd);border-left:2px solid var(--a-emer);border-radius:8px;padding:11px 13px;margin-top:8px}
.pn-h{font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--a-emer);display:block;margin-bottom:2px}
.pn-v{font-size:12.5px;color:var(--muted);font-family:'Space Grotesk','Inter',sans-serif}

/* ───── Banners ───── */
.bn{border-radius:14px;padding:36px 32px;display:flex;gap:26px;align-items:center;flex-wrap:wrap;background:linear-gradient(180deg,var(--surface1),var(--surface2));border:1px solid var(--cbd)}
.bn-l{flex:1;min-width:240px}
.bn-kick{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--a-emer);margin-bottom:14px}
.bn-kick .ic{width:14px;height:14px}
.bn-green .bn-kick{color:var(--a-lime)}
.bn-blue .bn-kick,.bn-orange .bn-kick{color:var(--a-viol)}
.bn-h{font-size:clamp(26px,3.6vw,32px);font-weight:700;line-height:1.05;letter-spacing:-.7px;margin-bottom:11px;color:var(--title)}
.bn-sub{font-size:14.5px;line-height:1.55;color:var(--muted);font-weight:400;margin-bottom:18px;max-width:380px}
.bn-btn{display:inline-flex;align-items:center;gap:7px;color:var(--a-emer);font-weight:600;font-size:14px;text-decoration:none;border-bottom:1.5px solid var(--a-emer);padding-bottom:2px}
.bn-green .bn-btn{color:var(--a-lime);border-color:var(--a-lime)}
.bn-blue .bn-btn,.bn-orange .bn-btn{color:var(--a-viol);border-color:var(--a-viol)}
.bn-card{flex:1;min-width:240px;background:var(--tile);border:1px solid var(--tbd);border-radius:10px;padding:16px;color:var(--text)}
.bnc-hd{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:9px;margin-bottom:11px;font-weight:500}
.bnc-hd b{color:var(--title);font-weight:600}
.bnc-row{margin-bottom:9px}
.bnc-row:last-child{margin-bottom:0}
.bnc-g{font-size:10px;font-weight:600;letter-spacing:.06em;display:block;margin-bottom:2px;color:var(--a-emer)}
.bnc-v{font-size:12.5px;color:var(--muted);font-family:'Space Grotesk','Inter',sans-serif}
.bnc-appt{display:flex;align-items:center;gap:11px}
.bnc-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;background:color-mix(in srgb,var(--a-emer) 16%,transparent);color:var(--a-emer)}
.bnc-amt{margin-left:auto;font-family:'Space Grotesk';font-size:17px;font-weight:700;color:var(--a-emer)}
.bnc-badges{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.bnc-b{font-size:10.5px;font-weight:600;padding:4px 10px;border-radius:5px;border:1px solid var(--tbd);color:var(--muted) !important;background:transparent !important}
.bn-green .bnc-g,.bn-green .bnc-amt{color:var(--a-lime)}
.bn-green .bnc-av{background:color-mix(in srgb,var(--a-lime) 16%,transparent);color:var(--a-lime)}
@media(max-width:600px){.bn{padding:28px 22px}}

/* ───── Integraciones ───── */
.intg{max-width:var(--max);margin:0 auto;padding:16px 32px;display:flex;align-items:center;justify-content:center;gap:10px 22px;flex-wrap:wrap;font-size:13px;font-weight:500}
.intg .lab{color:var(--faint)}
.intg-chip{display:inline-flex;align-items:center;gap:7px;color:var(--muted)}
.intg-chip .ic{width:16px;height:16px;color:var(--a-emer)}
.intg-chip:nth-child(2) .ic{color:var(--a-lime)}
.intg-chip:nth-child(6) .ic{color:var(--a-teal)}
.intg-chip:nth-child(8) .ic{color:var(--a-viol)}
.intg-sep{color:var(--faint)}

/* ───── UI redibujada (recorrido / app) ───── */
.story-ui{background:linear-gradient(180deg,var(--surface1),var(--surface2));border:1px solid var(--cbd);border-radius:14px;padding:20px}
.story-visual .story-ui{transform:translateY(22px) scale(.97);opacity:.55;transition:transform .9s cubic-bezier(.22,.61,.36,1),opacity .9s ease}
.story-visual.in .story-ui{transform:none;opacity:1}

/* ───── Marco navegador (entrenadores) ───── */
.browser-frame{border-radius:14px;border:1px solid var(--cbd);background:linear-gradient(180deg,var(--surface1),var(--surface2));overflow:hidden;box-shadow:0 30px 60px -28px rgba(0,0,0,.7);transition:transform .5s cubic-bezier(.22,.61,.36,1),border-color .3s}
.browser-frame:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--a-emer) 45%,var(--cbd))}
.browser-bar{padding:11px 14px;border-bottom:1px solid var(--line);background:var(--surface2);display:flex;align-items:center;gap:7px}
.browser-dot{width:9px;height:9px;border-radius:50%;background:#2a2a30}
.browser-url{font-size:11px;color:var(--faint);margin-left:8px;font-family:'Space Grotesk','Inter',sans-serif;background:var(--tile);padding:3px 12px;border-radius:5px;border:1px solid var(--line)}
.browser-body{position:relative;overflow:hidden}
.browser-body img{width:100%;display:block;transition:transform 6s cubic-bezier(.25,.46,.45,.94)}
.browser-frame:hover .browser-body img{transform:scale(1.02)}

/* ───── Demo editor (rutina / notas) ───── */
.notas-demo{max-width:920px;margin:0 auto}
.notas-editor{display:flex;background:var(--surface1)}
.ned-main{flex:1;min-width:0;padding:24px 26px}
.ned-fname{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:15px;font-family:'Space Grotesk','Inter',sans-serif}
.ned-fname .ic{width:14px;height:14px;color:var(--a-emer);margin-right:6px;vertical-align:-2px;display:inline-block}
.ned-grp{margin-bottom:12px}
.ned-h{color:var(--a-emer);font-size:11px;font-weight:600;letter-spacing:.06em;display:block;margin-bottom:3px}
.ned-v{color:var(--muted);font-size:13px;font-family:'Space Grotesk','Inter',sans-serif}
.ned-list{width:218px;flex-shrink:0;border-left:1px solid var(--line);padding:24px 18px;background:var(--surface2)}
.ned-list-hd{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:600;color:var(--title);margin-bottom:13px}
.ned-badge{font-size:11px;font-weight:600;color:var(--a-emer);background:color-mix(in srgb,var(--a-emer) 14%,transparent);border-radius:5px;padding:1px 9px}
.ned-item{background:var(--tile);border:1px solid var(--tbd);border-radius:8px;padding:10px 12px;margin-bottom:8px}
.ned-item-d{font-size:10.5px;color:var(--faint);margin-bottom:2px}
.ned-item-s{font-size:12px;color:var(--text);font-weight:500}

/* ───── Recorrido ───── */
.narrative{max-width:var(--max);margin:0 auto;padding:0 32px}
.story{display:grid;grid-template-columns:1fr 1.15fr;gap:52px;align-items:center;padding:56px 0}
.story+.story{border-top:1px solid var(--line)}
.story--left{grid-template-columns:1.15fr 1fr}
.story--left .story-visual{order:-1}
.story-number{font-size:42px;font-weight:600;color:var(--a-emer);opacity:.5;line-height:1;margin-bottom:10px;letter-spacing:-1px}
.story--right .story-number{color:var(--a-viol)}
.story-title{font-size:clamp(22px,3vw,28px);font-weight:600;letter-spacing:-.5px;color:var(--title);line-height:1.18;margin-bottom:12px}
.story-desc{font-size:14px;color:var(--muted);line-height:1.7;font-weight:400;max-width:400px}
.story-desc b{color:var(--text);font-weight:500}
.story-tag{display:inline-flex;margin-top:16px;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--a-emer)}
.story-visual .browser-frame{transform:translateY(22px) scale(.97);opacity:.55;transition:transform .9s cubic-bezier(.22,.61,.36,1),opacity .9s ease}
.story-visual.in .browser-frame{transform:none;opacity:1}
.feat-more{text-align:center;padding:48px 0 0;font-size:14px;color:var(--muted);line-height:1.9;font-weight:400}
.feat-more span{color:var(--a-emer);font-weight:500}

/* ───── App ───── */
.app-wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;max-width:var(--max);margin:0 auto;padding:0 32px}
.phones-real{display:flex;gap:18px;justify-content:center;perspective:1200px}
.phone-real{width:185px;border-radius:30px;border:6px solid var(--phone);background:var(--phone);overflow:hidden;box-shadow:0 30px 60px -22px rgba(0,0,0,.7);transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.phone-real:hover{transform:translateY(-8px) scale(1.02)}
.phone-real:nth-child(2){margin-top:34px}
.phone-real:nth-child(3){margin-top:14px}
.phone-real-notch{height:9px;display:flex;align-items:center;justify-content:center}
.phone-real-notch span{width:40px;height:4px;border-radius:999px;background:rgba(255,255,255,.25)}
.phone-real img{width:100%;display:block;border-radius:0 0 24px 24px}
.app-feats{list-style:none;display:grid;gap:18px;margin-top:30px}
.af{display:flex;gap:14px;align-items:flex-start}
.af-ico{width:42px;height:42px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;background:color-mix(in srgb,var(--a-emer) 13%,transparent);border:1px solid color-mix(in srgb,var(--a-emer) 22%,transparent);color:var(--a-emer)}
.af:nth-child(2) .af-ico{background:color-mix(in srgb,var(--a-lime) 13%,transparent);border-color:color-mix(in srgb,var(--a-lime) 22%,transparent);color:var(--a-lime)}
.af:nth-child(3) .af-ico{background:color-mix(in srgb,var(--a-viol) 14%,transparent);border-color:color-mix(in srgb,var(--a-viol) 25%,transparent);color:var(--a-viol)}
.af-ico .ic{width:20px;height:20px}
.af-title{font-size:15px;font-weight:600;color:var(--title);margin-bottom:3px}
.af-desc{font-size:13.5px;color:var(--muted);line-height:1.6;font-weight:400}

/* ───── Explorar ───── */
.explorar-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;max-width:var(--max);margin:0 auto;padding:0 32px}
.feedg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.feedc{aspect-ratio:9/16;border-radius:11px;border:1px solid var(--cbd);position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:13px;overflow:hidden}
.feedc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .5s}
.feedc:hover img{transform:scale(1.05)}
.feedc::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(7,7,9,.7),rgba(7,7,9,0) 56%);z-index:1}
.feedc .play{position:absolute;top:43%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--a-lime),var(--a-emer));display:flex;align-items:center;justify-content:center;z-index:2}
.feedc .play .ic{width:17px;height:17px;color:var(--btn-fg)}
.feedc .ft{font-size:11.5px;font-weight:600;color:#fff;position:relative;z-index:2}
.feedc .fa{font-size:10px;color:rgba(255,255,255,.82);font-weight:400;margin-top:2px;position:relative;z-index:2}
.explorar-posters{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;border-radius:11px;overflow:hidden}
.explorar-posters img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:9px;border:1px solid var(--cbd);transition:transform .5s;cursor:pointer;display:block}
.explorar-posters img:hover{transform:scale(1.04)}

/* ───── Tira cruzada ───── */
.entrenador-wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.entrenador-strip{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:28px 32px;border-radius:14px;background:linear-gradient(180deg,var(--surface1),var(--surface2));border:1px solid var(--cbd)}
.entrenador-strip .es-t{display:flex;align-items:center;gap:11px;font-size:18px;font-weight:600;color:var(--title)}
.entrenador-strip .es-t .ic{width:22px;height:22px;color:var(--a-lime)}
.entrenador-strip .es-d{font-size:13.5px;color:var(--muted);margin-top:5px;max-width:520px;font-weight:400}

/* ───── Divisor ───── */
.glow-divider{max-width:var(--max);margin:0 auto;padding:0 32px}
.glow-divider-line{height:1px;background:var(--line);position:relative}
.glow-divider-line::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--a-lime),var(--a-emer))}

/* ───── Ticker ───── */
.ticker-wrap{overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);padding:6px 0}
.ticker{display:flex;gap:56px;width:max-content;padding:20px 28px;animation:tick 32s linear infinite;align-items:center}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.brand-sep{color:var(--faint)}

/* ───── Aurora (banda de métricas · siempre oscura) ───── */
.aurora-band{position:relative;height:420px;overflow:hidden;background:linear-gradient(165deg,#16092E 0%,#11082A 45%,#0C0720 100%);border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07)}
.aurora-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.aurora-copy{position:absolute;top:34px;left:0;right:0;z-index:2;max-width:600px;margin:0 auto;padding:0 32px;font-family:'Space Grotesk','Inter',sans-serif;font-size:23px;line-height:1.32;letter-spacing:-.3px}
.ab-strong{color:#FAFAFA;font-weight:600}
.ab-soft{color:#7a7a85;font-weight:500}
.aurora-stats{position:absolute;bottom:34px;left:0;right:0;z-index:2;max-width:var(--max);margin:0 auto;padding:0 32px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ab-num{font-family:'Space Grotesk';font-weight:600;font-size:clamp(30px,4.4vw,44px);letter-spacing:-1px;line-height:1;background-clip:text;-webkit-background-clip:text;color:transparent}
.ab-num.n1{background-image:linear-gradient(100deg,#bef264,#34d399)}
.ab-num.n2{background-image:linear-gradient(100deg,#34d399,#2dd4bf)}
.ab-num.n3{background-image:linear-gradient(100deg,#2dd4bf,#9b7bff)}
.ab-lbl{font-size:12.5px;color:#8e8e98;margin-top:7px}
@media(max-width:640px){.aurora-band{height:480px}.aurora-copy{font-size:19px;top:26px}.aurora-stats{grid-template-columns:1fr;gap:12px;bottom:26px}}

/* ───── Dashboard anotado (Recorrido) ───── */
.annot{position:relative;margin:0 0 8px}
.annot-stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:430px}
.annot-glow{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(540px 280px at 13% 6%,color-mix(in srgb,var(--a-viol) 22%,transparent),transparent 60%),radial-gradient(560px 300px at 88% 96%,color-mix(in srgb,var(--a-emer) 20%,transparent),transparent 60%),radial-gradient(420px 240px at 96% 4%,color-mix(in srgb,var(--a-lime) 16%,transparent),transparent 60%)}
.annot-dash{position:relative;z-index:2;width:min(700px,100%);border-radius:13px;background:linear-gradient(180deg,var(--surface1),var(--surface2));border:1px solid var(--cbd);box-shadow:0 40px 90px -30px rgba(0,0,0,.55);overflow:hidden}
.adash-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--surface2)}
.adash-bar i{width:9px;height:9px;border-radius:50%;background:var(--cbd);display:block}
.adash-url{margin-left:8px;font-size:11px;color:var(--faint);font-family:'Space Grotesk','Inter',sans-serif}
.annot-co{position:absolute;z-index:5;width:214px;background:linear-gradient(180deg,var(--surface1),var(--surface2));border:1px solid var(--cbd);border-radius:11px;padding:12px 13px;box-shadow:0 20px 50px -16px rgba(0,0,0,.5)}
.annot-co .ct{font-size:12.5px;font-weight:600;color:var(--title);margin:0 0 4px;display:flex;align-items:center;gap:7px}
.annot-co .ct .ic{width:14px;height:14px;flex-shrink:0}
.annot-co .cd{font-size:11px;line-height:1.45;color:var(--muted);margin:0}
.annot-co .cln{position:absolute;top:50%;height:2px;width:22px;border-radius:2px;margin-top:-1px}
.annot-co .cdt{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;border:2px solid var(--surface1);margin-top:-5.5px}
.co-r .cln{right:-22px}.co-r .cdt{right:-27px}
.co-l .cln{left:-22px}.co-l .cdt{left:-27px}
.ac-citas{left:0;top:52px}
.ac-solic{left:0;bottom:52px}
.ac-pago{right:0;top:52px}
.ac-vencer{right:0;bottom:52px}
@media(max-width:1100px){
  .annot-stage{display:block;min-height:0}
  .annot-dash{width:100%}
  .annot-co{position:static;width:auto;margin-top:12px}
  .annot-co .cln,.annot-co .cdt{display:none}
}

/* ───── Tienda + envíos (bento) ───── */
.tienda-band{position:relative;overflow:hidden}
.tienda-glow{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(540px 280px at 92% 4%,color-mix(in srgb,var(--a-viol) 14%,transparent),transparent 60%),radial-gradient(520px 280px at 6% 96%,color-mix(in srgb,var(--a-emer) 14%,transparent),transparent 60%)}
.tienda-band .band-inner{position:relative;z-index:1}
.tienda-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:14px;margin-bottom:24px}
.tienda-head .s-title{margin:0;max-width:440px}
.tienda-head .s-tag{margin-bottom:12px}
.tienda-chips{display:flex;gap:7px;flex-wrap:wrap}
.tienda-chips span{font-size:11.5px;color:var(--muted);border:1px solid var(--cbd);padding:6px 12px;border-radius:7px}
.tienda-chips span.on{color:var(--btn-fg);background:linear-gradient(135deg,var(--a-lime),var(--a-emer));border-color:transparent;font-weight:600}
.tienda-bento{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tb-card{border:none;border-radius:14px;padding:24px;background:linear-gradient(180deg,var(--surface1),var(--surface2));box-shadow:0 0 0 1px var(--cbd),0 18px 44px -26px rgba(0,0,0,.75);transition:transform .3s,box-shadow .3s}
.tb-card:hover{transform:translateY(-2px);box-shadow:0 0 0 1px color-mix(in srgb,var(--text) 22%,transparent),0 26px 56px -26px rgba(0,0,0,.85)}
.tb-h{font-family:'Space Grotesk','Inter',sans-serif;font-size:18px;font-weight:600;color:var(--title);margin:0 0 14px;display:flex;align-items:center;gap:9px}
.tb-h .ic{width:20px;height:20px}
.tb-li{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--text);line-height:1.45;margin-bottom:10px}
.tb-li:last-child{margin-bottom:0}
.tb-li .ic{width:15px;height:15px;color:var(--a-emer);flex-shrink:0;margin-top:2px}
.tb-mini{background:var(--tile);border:1px solid var(--tbd);border-radius:9px;padding:12px;margin-top:14px}
.tb-feat{border-radius:14px;padding:26px;background:linear-gradient(145deg,var(--a-emer),var(--a-teal));display:flex;flex-direction:column}
.tb-feat h3{font-family:'Space Grotesk','Inter',sans-serif;font-size:19px;font-weight:700;margin:0 0 9px;color:#06251c}
.tb-feat p{font-size:13px;line-height:1.55;margin:0 0 18px;color:#0a3329}
.tf-btn{margin-top:auto;align-self:flex-start;font-size:13px;font-weight:600;color:#fff;background:#08332a;padding:11px 18px;border-radius:9px;text-decoration:none}
@media(max-width:760px){.tienda-bento{grid-template-columns:1fr}}

/* ───── Planes ───── */
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.plan-card{position:relative;display:flex;flex-direction:column;padding:30px 26px;background:linear-gradient(180deg,var(--surface1),var(--surface2));border:1px solid var(--cbd);border-radius:14px;transition:border-color .3s,transform .3s}
.plan-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--a-emer) 45%,var(--cbd))}
/* El plan ancla se marca con borde y sello, no agrandándolo: escalar la tarjeta
   descuadra la rejilla en móvil, donde van una debajo de otra. */
.plan-card--feat{border-color:color-mix(in srgb,var(--a-emer) 55%,var(--cbd));box-shadow:0 0 0 1px color-mix(in srgb,var(--a-emer) 22%,transparent)}
.plan-flag{position:absolute;top:-10px;left:26px;padding:4px 11px;background:var(--a-emer);color:var(--btn-fg);border-radius:99px;font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.plan-nom{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:700;color:var(--title);margin-bottom:4px}
.plan-desc{font-size:13px;color:var(--muted);margin-bottom:20px;min-height:34px}
.plan-price{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.pp-num{font-family:'Space Grotesk',sans-serif;font-size:36px;font-weight:700;letter-spacing:-1.2px;color:var(--title)}
.pp-per{font-size:12.5px;color:var(--muted);font-weight:500}
/* El total del checkout. Va discreto: el número que se compara entre planes es
   la base, éste sólo evita la sorpresa al llegar a Stripe. */
.plan-total{font-size:11.5px;color:var(--faint);margin:3px 0 22px}
.plan-list{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px;flex:1}
.plan-list li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--text)}
.plan-list .ic{width:15px;height:15px;flex:0 0 15px;margin-top:2px;stroke:var(--a-emer);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.plan-btn{width:100%;text-align:center;justify-content:center}
.plan-foot{text-align:center;margin:34px auto 0;max-width:520px;font-size:13px;color:var(--muted)}
@media(max-width:900px){
  .plan-grid{grid-template-columns:1fr;gap:14px}
  .plan-desc{min-height:0}
}

/* ───── Beta CTA ───── */
.beta-wrap{max-width:var(--max);margin:0 auto;padding:0 32px;text-align:center}
.beta-card{max-width:640px;margin:0 auto;padding:54px 44px;border-radius:16px;background:linear-gradient(180deg,var(--surface1),var(--surface2));border:1px solid var(--cbd);position:relative;overflow:hidden}
.beta-card::before{content:"";position:absolute;top:0;left:0;right:0;height:160px;background:linear-gradient(180deg,color-mix(in srgb,var(--a-emer) 10%,transparent),transparent);pointer-events:none}
.beta-label{display:inline-flex;align-items:center;gap:8px;position:relative;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--a-lime);margin-bottom:18px}
.beta-label-dot{width:5px;height:5px;border-radius:50%;background:var(--a-lime)}
.beta-title{font-size:clamp(28px,4vw,40px);font-weight:700;letter-spacing:-.8px;color:var(--title);margin-bottom:13px;line-height:1.08;position:relative}
.beta-sub{font-size:14.5px;color:var(--muted);line-height:1.6;font-weight:400;margin-bottom:26px;max-width:480px;margin-left:auto;margin-right:auto;position:relative}
.beta-cta{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;position:relative}
.beta-note{margin-top:18px;font-size:11.5px;color:var(--faint);font-weight:400;position:relative}

/* ───── Footer ───── */
footer{padding:34px 32px;border-top:1px solid var(--line)}
.foot-inner{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.foot-logo{font-size:16px;font-weight:600;color:var(--title);text-decoration:none}
.foot-links{display:flex;gap:20px;flex-wrap:wrap}
.foot-links a{color:var(--muted);font-size:13px;font-weight:400;text-decoration:none;transition:color .2s}
.foot-links a:hover{color:var(--a-emer)}
.foot-copy{color:var(--faint);font-size:11.5px}

/* ───── Reveal ───── */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ───── Nav móvil / aside ───── */
.nav-toggle{display:none;background:none;border:1px solid var(--cbd);border-radius:8px;cursor:pointer;width:38px;height:38px;flex-shrink:0;position:relative}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{display:block;width:16px;height:2px;background:var(--text);border-radius:2px;position:absolute;left:50%;transform:translateX(-50%);transition:transform .3s,opacity .2s,top .3s}
.nav-toggle span{top:50%;margin-top:-1px}
.nav-toggle span::before{content:'';top:-5px}
.nav-toggle span::after{content:'';top:5px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:translateX(-50%) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:translateX(-50%) rotate(-45deg)}
.aside-bar{position:fixed;top:0;right:0;bottom:0;z-index:200;width:288px;max-width:84vw;background:var(--bg);border-left:1px solid var(--cbd);display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;box-shadow:-8px 0 40px rgba(0,0,0,.4);visibility:hidden;opacity:0;transition:opacity .25s,visibility .25s}
.aside-bar.open{visibility:visible;opacity:1}
.aside-header{padding:20px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.aside-title{font-size:18px;font-weight:600;color:var(--title)}
.aside-nav{display:flex;flex-direction:column;padding:8px 0;flex:1}
.aside-link{font-size:14px;font-weight:500;padding:15px 24px;color:var(--text);text-decoration:none;border-bottom:1px solid var(--line);transition:background .15s,color .15s}
.aside-link:hover{background:var(--bg2);color:var(--a-emer)}
.aside-theme{display:flex;align-items:center;gap:10px;width:auto;justify-content:flex-start;border:none;border-bottom:1px solid var(--line);border-radius:0;padding:15px 24px;font-size:14px;font-weight:500;color:var(--text);background:transparent;cursor:pointer;font-family:inherit}
.aside-theme:hover{background:var(--bg2);color:var(--a-emer)}
.aside-theme .ic{width:17px;height:17px}
.aside-theme .t-moon{display:none}
#app.light-theme .aside-theme .t-sun{display:none}
#app.light-theme .aside-theme .t-moon{display:block}
.aside-theme .lbl-to-light{display:inline}
.aside-theme .lbl-to-dark{display:none}
#app.light-theme .aside-theme .lbl-to-light{display:none}
#app.light-theme .aside-theme .lbl-to-dark{display:inline}
.aside-login{margin:auto 24px 24px;padding:14px 18px;border-radius:9px;background:linear-gradient(135deg,var(--a-lime),var(--a-emer));color:var(--btn-fg);font-size:14px;font-weight:600;text-align:center;text-decoration:none;display:block}
.aside-backdrop{position:fixed;inset:0;z-index:199;background:rgba(4,4,6,.55);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .25s}
.aside-backdrop.visible{opacity:1;pointer-events:auto}
@media(min-width:861px){.aside-bar,.aside-backdrop,.nav-toggle{display:none !important}}

/* ───── Responsivo ───── */
@media(max-width:860px){
  .nav-right{display:none}
  .nav-toggle{display:block}
  .hero-v2{padding:54px 20px 22px}
  .pilar-grid{grid-template-columns:1fr;gap:12px}
  .pilar-card.feat{grid-row:auto}
  .app-wrap,.explorar-grid{grid-template-columns:1fr;gap:40px}
  .phones-real{gap:12px}.phone-real{width:150px}
  .band{padding:64px 0}
  .story{grid-template-columns:1fr;gap:28px;padding:42px 0}
  .story--left{grid-template-columns:1fr}.story--left .story-visual{order:0}
}
@media(max-width:700px){
  .band-inner,.narrative,.app-wrap,.explorar-grid,.entrenador-wrap,.glow-divider,.beta-wrap{padding-left:20px;padding-right:20px}
  .ned-list{display:none}
  .entrenador-strip{padding:26px 22px}
  .beta-card{padding:42px 26px}
  .hero-pills{gap:16px}
}
@media(max-width:560px){
  .phones-real{display:grid;justify-items:center;align-items:center}
  .phone-real{grid-area:1/1;width:176px}
  .phone-real:nth-child(1){z-index:3;margin:0}
  .phone-real:nth-child(2){z-index:2;margin:0;transform:translate(-36px,-14px) scale(.9) rotate(-6deg);filter:brightness(.85)}
  .phone-real:nth-child(3){z-index:1;margin:0;transform:translate(36px,-14px) scale(.9) rotate(6deg);filter:brightness(.78)}
  .explorar-posters{grid-template-columns:1fr 1fr}
  .explorar-posters img:nth-child(3){grid-column:1/-1;aspect-ratio:16/9}
}
@media(hover:none) and (pointer:coarse){
  .btn-primary,.btn-ghost,.btn-login,.nav-link,.aside-link{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}