/* ═══════════════════════════════════════════════════════════════════════════
   EPIC, de EPIC LABS, Landing /unete/, styles.css
   Rediseño R3-LANDING: nivel Apple / Nike / Whoop. Menos texto, más espacio,
   un mensaje por pantalla, producto como héroe. Movimiento que explica, jamás
   espectáculo. Liquid Glass real. Tokens coherentes con el design system R1
   (assets/css/tokens.css). Self-contained. iPhone primero. reduced-motion-safe.
   Todo GPU-only (transform/opacity).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── @property para contadores GPU-safe (con fallback JS en landing.js) ── */
@property --count { syntax:'<number>'; inherits:false; initial-value:0; }

:root{
  color-scheme:dark;

  /* ── Fondo y profundidad (idénticos a tokens.css R1) ── */
  --bg-root:#04101F;        /* raíz absoluta de marca, nunca negro puro */
  --bg:#0B143C;             /* superficie de página */
  --bg-deep:#04121F;        /* el pozo: headers, sheets */
  --navy:#0E1B4D;
  --navy-deep:#0B143C;

  /* ── Marca (azul eléctrico = hilo conductor) ── */
  --brand:#1A6BF5;
  --brand-soft:#4F8EF7;
  --brand-strong:#0E1B4D;
  --brand-glow:#37C8F0;     /* cian bioluminiscente, imaginería científica */
  --brand-glow-hi:#6FE3FF;

  /* ── Acento élite (SOLO detalle puntual) ── */
  --elite:#C8A45D;
  --gold:#FFB800;

  /* ── Datos de score (paleta por producto = paleta por dato, INTACTOS) ── */
  --score-readiness:#1A6BF5;   /* Azul EPIC */
  --score-strain:#3B4FD8;      /* COREX cobalto */
  --score-sleep:#7FD4D0;       /* CREANOVA aqua */
  --score-momentum:#FFD43B;    /* PUMPX mango */
  --score-fuel:#8DC63F;        /* BIOMAG lima */

  /* ── Texto (jerarquía tibia, AA sobre el fondo real) ── */
  --text:#F2F4FF;
  --text-dim:rgba(242,244,255,.58);
  --text-faint:rgba(242,244,255,.34);
  --text-ghost:rgba(242,244,255,.16);

  /* ── Bordes y filetes ── */
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.14);

  /* ── Liquid Glass (edge lensing + specular real, no glassmorphism plano) ── */
  --glass:rgba(255,255,255,.045);
  --glass-2:rgba(255,255,255,.025);
  --glass-edge:linear-gradient(150deg,
      rgba(255,255,255,.55) 0%,
      rgba(255,255,255,.14) 20%,
      rgba(255,255,255,.02) 44%,
      rgba(255,255,255,0) 60%,
      rgba(255,255,255,.10) 100%);
  --glass-specular:linear-gradient(180deg, rgba(255,255,255,.10), transparent 60%);

  /* ── Motion, curva de la casa ── */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.4,.5,1);

  /* ── Radius (squircle, firma EPIC) ── */
  --r-xs:10px;
  --r-sm:14px;
  --r-md:18px;
  --r-lg:22px;
  --r-xl:28px;
  --r-2xl:34px;
  --r-pill:100px;

  /* ── Tipografía ── */
  --font:'DM Sans',-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',sans-serif;
  --font-h:'Poppins','DM Sans',-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif;

  --max:1200px;
  --max-narrow:820px;
  --safe-t:env(safe-area-inset-top);
  --safe-b:env(safe-area-inset-bottom);
  --safe-l:env(safe-area-inset-left);
  --safe-r:env(safe-area-inset-right);

  /* Gutter lateral seguro: aire generoso + safe-area del iPhone. Nada pega al borde. */
  --gutter:clamp(22px,5.5vw,40px);
  --gutter-l:calc(var(--gutter) + var(--safe-l));
  --gutter-r:calc(var(--gutter) + var(--safe-r));
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:80px;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--bg-root);
  color:var(--text);
  font-family:var(--font);
  font-size:17px;
  line-height:1.6;
  min-height:100svh;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
::selection{ background:var(--brand); color:#fff; }

h1,h2,h3,h4{ font-family:var(--font-h); letter-spacing:-.022em; }
.tabular{ font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; }

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

/* ── Atmósfera de fondo: glow radial navy + cian sutil, fijo ── */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 120% 58% at 50% -12%, rgba(26,107,245,.16), transparent 56%),
    radial-gradient(ellipse 86% 50% at 88% 20%, rgba(55,200,240,.06), transparent 60%),
    radial-gradient(ellipse 80% 60% at 6% 92%, rgba(59,79,216,.08), transparent 62%);
}
main,header,footer{ position:relative; z-index:1; }

.wrap{ max-width:var(--max); margin:0 auto; padding-left:var(--gutter-l); padding-right:var(--gutter-r); }
.wrap-narrow{ max-width:var(--max-narrow); }

/* Ritmo vertical generoso: aire tipo Apple entre pantallas */
section{ padding:clamp(80px,13vw,168px) 0; position:relative; }

/* ═══════════════════════════════════════════════════════════════════════════
   PRIMITIVAS
   ═══════════════════════════════════════════════════════════════════════════ */

.eyebrow{
  font-family:var(--font-h); font-weight:600; font-size:12px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--brand-soft);
  display:inline-block;
}

.section-head{ max-width:760px; margin:0 auto clamp(48px,7vw,72px); }
.section-head.center{ text-align:center; }
.section-head h2{
  font-size:clamp(30px,6vw,56px); font-weight:700; line-height:1.05; margin-top:20px;
  letter-spacing:-.03em;
}
.section-head p{ color:var(--text-dim); font-size:clamp(16px,2.2vw,20px); margin-top:22px; max-width:52ch; }
.section-head.center p{ margin-inline:auto; }

/* ── Liquid Glass card: edge lensing + specular, translucidez viva ── */
.glass{
  position:relative;
  border-radius:var(--r-xl);
  background:
    linear-gradient(158deg, rgba(255,255,255,.07), rgba(255,255,255,.012) 46%, rgba(255,255,255,.03) 100%),
    rgba(11,20,44,.5);
  border:1px solid transparent;
  background-clip:padding-box;
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  backdrop-filter:blur(24px) saturate(1.4);
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 30px 60px -30px rgba(0,0,0,.62),
    0 2px 8px rgba(0,0,0,.28);
  isolation:isolate;
}
.glass::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--glass-edge);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.glass::after{
  content:''; position:absolute; top:0; left:7%; right:32%; height:40%;
  border-radius:inherit; background:var(--glass-specular);
  pointer-events:none; opacity:.7;
}

/* ── Botón ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-h); font-weight:600; font-size:16px; letter-spacing:.005em;
  padding:17px 34px; border-radius:var(--r-pill); min-height:56px; text-align:center;
  transition:transform 220ms var(--spring), box-shadow 260ms var(--ease), filter 220ms var(--ease);
  white-space:nowrap; position:relative; will-change:transform;
}
.btn:active{ transform:scale(.965); }
.btn-primary{
  color:#fff;
  background:linear-gradient(135deg, var(--brand-soft), var(--brand) 58%, #0F4FC2);
  box-shadow:0 16px 38px -10px rgba(26,107,245,.6), 0 1px 0 rgba(255,255,255,.28) inset;
}
.btn-primary:active{ box-shadow:0 8px 22px -8px rgba(26,107,245,.6), 0 1px 0 rgba(255,255,255,.22) inset; }
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{ filter:brightness(1.08); box-shadow:0 20px 48px -10px rgba(26,107,245,.72), 0 1px 0 rgba(255,255,255,.32) inset; }
}
.btn-ghost{
  background:rgba(255,255,255,.05); border:1px solid var(--line-strong); color:var(--text);
}
@media (hover:hover) and (pointer:fine){
  .btn-ghost:hover{ background:rgba(255,255,255,.09); }
}
.btn-block{ width:100%; }

/* micro-línea de confianza bajo un CTA */
.cta-note{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  margin-top:18px; font-size:13.5px; color:var(--text-dim);
}
.cta-note svg{ flex:none; color:var(--elite); }

/* ── Reveal scroll-driven (IntersectionObserver), cero CLS ── */
.reveal{ opacity:1; transform:none; }
html.js-reveal .reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
html.js-reveal .reveal.in{ opacity:1; transform:translateY(0); }
/* stagger para hijos marcados */
html.js-reveal .reveal .stagger{
  opacity:0; transform:translateY(20px);
  transition:opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
}
html.js-reveal .reveal.in .stagger{ opacity:1; transform:translateY(0); }
html.js-reveal .reveal.in .stagger:nth-child(2){ transition-delay:80ms; }
html.js-reveal .reveal.in .stagger:nth-child(3){ transition-delay:160ms; }
html.js-reveal .reveal.in .stagger:nth-child(4){ transition-delay:240ms; }
html.js-reveal .reveal.in .stagger:nth-child(5){ transition-delay:320ms; }
@media (prefers-reduced-motion:reduce){
  html.js-reveal .reveal,
  html.js-reveal .reveal .stagger{ opacity:1; transform:none; transition:none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════════════════ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:80;
  padding:calc(15px + var(--safe-t)) 0 15px;
  background:linear-gradient(180deg, rgba(4,16,31,.72), rgba(4,16,31,0));
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  transition:background .5s var(--ease), backdrop-filter .5s var(--ease);
}
.site-header.solid{
  background:rgba(4,16,31,.82);
  -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{ display:flex; align-items:center; min-height:44px; }
.brand img{ height:20px; width:auto; }
.header-cta{ padding:12px 24px; font-size:14px; min-height:46px; }
@media (max-width:560px){ .header-cta{ display:none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   S1, HERO, el isotipo/app + UNA promesa + un CTA. Visual dominante.
   ═══════════════════════════════════════════════════════════════════════════ */
.hero{
  min-height:100svh;
  padding-top:calc(120px + var(--safe-t));
  padding-bottom:clamp(56px,9vw,96px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; position:relative; overflow:hidden;
}
/* capa de parallax de fondo (lenta) */
.hero-aura{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(circle 44vmax at 50% 38%, rgba(55,200,240,.13), transparent 60%);
  will-change:transform;
}
.hero-inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; width:100%; }

/* isotipo flotando, brillo especular, órbita sutil */
.hero-mark{
  position:relative; width:clamp(104px,22vw,140px); aspect-ratio:1;
  margin-bottom:clamp(28px,5vw,40px);
  display:flex; align-items:center; justify-content:center;
  will-change:transform;
}
.hero-mark-orbit{
  position:absolute; inset:-14%; border-radius:38%;
  border:1px solid rgba(79,142,247,.16);
  animation:markSpin 26s linear infinite; will-change:transform;
}
.hero-mark-orbit::after{
  content:''; position:absolute; top:-4px; left:50%; width:7px; height:7px; margin-left:-3.5px;
  border-radius:50%; background:var(--brand-glow);
  box-shadow:0 0 12px var(--brand-glow);
}
@keyframes markSpin{ to{ transform:rotate(360deg); } }
.hero-mark-glow{
  position:absolute; inset:-6%; border-radius:34%; filter:blur(30px); opacity:.55;
  background:radial-gradient(circle, rgba(26,107,245,.7) 0%, transparent 66%);
  animation:markBreathe 4.6s ease-in-out infinite; will-change:transform,opacity;
}
@keyframes markBreathe{ 0%,100%{ transform:scale(1); opacity:.42; } 50%{ transform:scale(1.1); opacity:.62; } }
.hero-mark-icon{
  position:relative; z-index:2; width:100%; height:100%;
  border-radius:clamp(26px,6vw,34px);
  box-shadow:0 24px 54px -20px rgba(4,16,31,.9), 0 1px 0 rgba(255,255,255,.16) inset;
  animation:markFloat 6.5s ease-in-out infinite;
}
@keyframes markFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
@media (prefers-reduced-motion:reduce){
  .hero-mark-orbit,.hero-mark-glow,.hero-mark-icon{ animation:none; }
}

.hero-kicker{
  font-family:var(--font-h); font-weight:600; font-size:13px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--brand-soft);
  margin-bottom:clamp(22px,4vw,30px);
}
/* Banner de referido, elegante y discreto (aparece SOLO con ?ref válido).
   Liquid Glass sobrio, coherente con las tarjetas; nunca grita. */
.ref-banner{
  display:inline-flex; align-items:center; gap:10px;
  max-width:min(92vw,34ch);
  margin:0 auto clamp(24px,4vw,32px);
  padding:11px 18px;
  border-radius:var(--r-pill);
  background:linear-gradient(150deg, rgba(255,255,255,.07), rgba(255,255,255,.02) 60%), rgba(11,20,44,.55);
  border:1px solid var(--line-strong);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 14px 34px -18px rgba(0,0,0,.6);
  font-size:14px; line-height:1.35; color:var(--text-dim);
}
/* El atributo hidden debe ganar sobre el display de arriba (si no, el banner se vería sin ref). */
.ref-banner[hidden]{ display:none; }
.ref-banner-icon{ flex:none; display:inline-flex; color:var(--brand-glow); }
.ref-banner-text b{ color:var(--text); font-weight:700; }
@media (max-width:400px){
  .ref-banner{ padding:10px 15px; font-size:13px; }
}

.hero-title{
  font-size:clamp(38px,8vw,84px); font-weight:700; line-height:1.02;
  letter-spacing:-.035em; max-width:16ch; margin:0 auto;
}
.hero-title .grad{
  background:linear-gradient(100deg, var(--brand-glow-hi), var(--brand-soft) 52%, var(--brand-glow));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{
  margin:clamp(24px,4vw,32px) auto 0; max-width:44ch;
  font-size:clamp(17px,2.4vw,21px); color:var(--text-dim); line-height:1.55;
}
.hero-actions{ margin-top:clamp(34px,5vw,44px); display:flex; flex-direction:column; align-items:center; }
.hero-scrollcue{
  margin-top:clamp(40px,7vw,64px); color:var(--text-faint);
  animation:cueBob 2.4s ease-in-out infinite;
}
@keyframes cueBob{ 0%,100%{ transform:translateY(0); opacity:.5; } 50%{ transform:translateY(6px); opacity:.9; } }
@media (prefers-reduced-motion:reduce){ .hero-scrollcue{ animation:none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   S2, TIRA DE RESPALDO (una línea elegante, sin ruido)
   ═══════════════════════════════════════════════════════════════════════════ */
.trust{ padding:clamp(30px,5vw,44px) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.trust .wrap{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:clamp(18px,4vw,44px);
}
.trust-item{ display:flex; align-items:center; gap:11px; font-size:14.5px; color:var(--text-dim); }
.trust-item svg{ flex:none; color:var(--brand-soft); }
.trust-item b{ color:var(--text); font-weight:600; }
.trust-stars{ display:flex; gap:2px; color:var(--gold); }
.trust-stars svg{ width:15px; height:15px; }
.trust-sep{ width:1px; height:30px; background:var(--line-strong); }
@media (max-width:720px){ .trust-sep{ display:none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   FEATURE, pantalla completa, una idea + un visual (héroe alternado)
   ═══════════════════════════════════════════════════════════════════════════ */
.feature .wrap{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,88px); align-items:center;
}
.feature.flip .feature-copy{ order:2; }
.feature.flip .feature-visual{ order:1; }
@media (max-width:900px){
  .feature .wrap{ grid-template-columns:1fr; gap:clamp(36px,7vw,52px); }
  .feature.flip .feature-copy{ order:0; }
  .feature.flip .feature-visual{ order:0; }
}
.feature-copy .eyebrow{ margin-bottom:20px; }
.feature-copy h2{
  font-size:clamp(28px,5vw,48px); font-weight:700; line-height:1.06; letter-spacing:-.03em;
}
.feature-copy p{ margin-top:22px; font-size:clamp(16px,2.1vw,19px); color:var(--text-dim); max-width:44ch; line-height:1.6; }
.feature-note{
  margin-top:24px; display:inline-flex; align-items:center; gap:9px;
  font-size:13.5px; color:var(--text-faint);
}
.feature-note svg{ flex:none; color:var(--brand-soft); }

.feature-visual{ position:relative; display:flex; align-items:center; justify-content:center; }

/* ── Visual A, Readiness: instrumento de precisión (anillo con bisel de ticks) ── */
.readiness-instrument{
  position:relative; width:min(340px,80vw); aspect-ratio:1;
  display:flex; align-items:center; justify-content:center;
}
.ri-glow{
  position:absolute; inset:8%; border-radius:50%; filter:blur(40px); opacity:.5;
  background:radial-gradient(circle, rgba(26,107,245,.6), transparent 68%);
  animation:markBreathe 5s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){ .ri-glow{ animation:none; } }
.readiness-instrument svg{ position:relative; z-index:2; width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
.ri-track{ fill:none; stroke:rgba(255,255,255,.06); stroke-width:5; }
.ri-ticks{ stroke:rgba(255,255,255,.14); stroke-width:1.4; }
.ri-value{
  fill:none; stroke:var(--score-readiness); stroke-width:7; stroke-linecap:round;
  stroke-dasharray:var(--circ); stroke-dashoffset:var(--circ);
  filter:drop-shadow(0 0 8px rgba(26,107,245,.6));
}
html.js-reveal .ri-value{ transition:stroke-dashoffset 1.5s var(--ease); }
.readiness-instrument.in .ri-value{ stroke-dashoffset:var(--offset); }
.ri-center{
  position:absolute; inset:0; z-index:3; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
}
.ri-center b{ font-family:var(--font-h); font-weight:700; font-size:clamp(52px,13vw,76px); line-height:1; font-variant-numeric:tabular-nums; }
.ri-center .ri-zone{
  margin-top:6px; font-family:var(--font-h); font-weight:600; font-size:13px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--score-readiness);
}
.ri-center .ri-label{ margin-top:2px; font-size:12px; color:var(--text-faint); letter-spacing:.1em; text-transform:uppercase; }

/* ── Visual B, Coach con evidencia (burbuja de chat glass + cita) ── */
.coach-visual{ width:min(400px,90vw); display:flex; flex-direction:column; gap:14px; }
.coach-bubble{
  padding:20px 22px; border-radius:var(--r-lg); border-bottom-left-radius:8px;
  background:linear-gradient(158deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid var(--line-strong);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  font-size:15.5px; line-height:1.5; color:var(--text);
}
.coach-bubble.me{
  align-self:flex-end; border-bottom-left-radius:var(--r-lg); border-bottom-right-radius:8px;
  background:linear-gradient(135deg, var(--brand-soft), var(--brand) 70%);
  border-color:transparent; color:#fff; max-width:80%;
}
.coach-cite{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  padding:8px 13px; border-radius:var(--r-pill);
  background:rgba(26,107,245,.12); border:1px solid rgba(26,107,245,.3);
  font-size:12px; font-weight:600; color:var(--brand-soft); letter-spacing:.02em;
}
.coach-cite svg{ flex:none; }

/* ── Visual C, Entrenamiento (score strain + carga aguda/crónica) ── */
.train-visual{ width:min(400px,90vw); }
.train-card{ padding:26px 24px; }
.train-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px; }
.train-head .t-label{ font-family:var(--font-h); font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); }
.train-head .t-val{ font-family:var(--font-h); font-weight:700; font-size:34px; color:var(--score-strain); font-variant-numeric:tabular-nums; }
.train-head .t-val small{ font-size:.42em; color:var(--text-faint); font-weight:600; }
.train-bars{ display:flex; flex-direction:column; gap:16px; }
.train-bar-row .tb-top{ display:flex; justify-content:space-between; font-size:13px; color:var(--text-dim); margin-bottom:7px; }
.train-bar-row .tb-top b{ color:var(--text); font-weight:600; font-variant-numeric:tabular-nums; }
.train-bar{ height:10px; border-radius:10px; background:rgba(255,255,255,.07); overflow:hidden; }
.train-bar-fill{ height:100%; border-radius:10px; width:0%; transition:width 1.3s var(--ease); }
.train-bar-fill.acute{ background:linear-gradient(90deg, var(--score-strain), #6E7FE8); box-shadow:0 0 10px rgba(59,79,216,.5); }
.train-bar-fill.chronic{ background:linear-gradient(90deg, rgba(79,142,247,.7), rgba(79,142,247,.4)); }
.train-verdict{
  margin-top:20px; padding-top:18px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text-dim);
}
.train-verdict svg{ flex:none; color:var(--score-fuel); }
.train-verdict b{ color:var(--text); font-weight:600; }

/* ── Visual D, Biomarcadores (los 5 scores como constelación) ── */
.bio-visual{ width:min(420px,92vw); }
.bio-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.bio-cell{
  padding:20px 18px; border-radius:var(--r-lg);
  background:linear-gradient(158deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
  border:1px solid var(--line);
  position:relative; overflow:hidden;
}
.bio-cell:first-child{ grid-column:1 / -1; }
.bio-cell .bc-dot{ width:10px; height:10px; border-radius:50%; margin-bottom:12px; }
.bio-cell .bc-val{ font-family:var(--font-h); font-weight:700; font-size:30px; line-height:1; font-variant-numeric:tabular-nums; }
.bio-cell .bc-val small{ font-size:.42em; color:var(--text-faint); font-weight:600; margin-left:2px; }
.bio-cell .bc-name{ margin-top:6px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); font-weight:600; }
.bio-cell .bc-spark{ position:absolute; right:16px; bottom:16px; width:56px; height:24px; opacity:.75; }
.bio-cell .bc-spark path{ fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ═══════════════════════════════════════════════════════════════════════════
   S, PRODUCTO COMO HÉROE (los suplementos que pagan la app)
   ═══════════════════════════════════════════════════════════════════════════ */
.products{ text-align:center; overflow:hidden; }
.product-row{
  display:flex; align-items:flex-end; justify-content:center; gap:clamp(4px,2vw,26px);
  margin-top:clamp(40px,6vw,60px); flex-wrap:nowrap;
}
.product-shot{
  position:relative; flex:1 1 0; max-width:200px; min-width:0;
  display:flex; align-items:flex-end; justify-content:center;
  will-change:transform;
}
.product-shot img{
  width:100%; height:auto; object-fit:contain;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.55));
}
.product-shot::after{
  content:''; position:absolute; bottom:-4%; left:12%; right:12%; height:14px;
  border-radius:50%; filter:blur(9px); background:rgba(0,0,0,.5);
}
.product-glow{
  position:absolute; bottom:6%; left:50%; transform:translateX(-50%);
  width:78%; aspect-ratio:1; border-radius:50%; filter:blur(34px); z-index:-1; opacity:.5;
}
.pg-strain{ background:radial-gradient(circle, var(--score-strain), transparent 66%); }
.pg-momentum{ background:radial-gradient(circle, var(--score-momentum), transparent 66%); }
.pg-sleep{ background:radial-gradient(circle, var(--score-sleep), transparent 66%); }
.pg-fuel{ background:radial-gradient(circle, var(--score-fuel), transparent 66%); }
.product-caption{ margin-top:clamp(28px,4vw,40px); font-size:15px; color:var(--text-dim); max-width:46ch; margin-inline:auto; }
.product-caption b{ color:var(--text); font-weight:600; }
@media (max-width:640px){
  .product-row{ gap:2px; }
  .product-shot::after{ height:9px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   S, RESPALDO CIENTÍFICO (una línea elegante, el lujo es la evidencia)
   ═══════════════════════════════════════════════════════════════════════════ */
.science .wrap-narrow{ text-align:center; }
.science-badge{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:26px;
  padding:9px 18px; border-radius:var(--r-pill);
  background:rgba(26,107,245,.1); border:1px solid rgba(26,107,245,.28);
  font-family:var(--font-h); font-weight:600; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand-soft);
}
.science-badge svg{ flex:none; }
.science h2{
  font-size:clamp(26px,4.6vw,44px); font-weight:700; line-height:1.12; letter-spacing:-.028em;
  max-width:22ch; margin:0 auto;
}
.science h2 em{ font-style:normal; color:var(--brand-soft); }
.science-founder{
  margin-top:clamp(32px,5vw,44px); display:inline-flex; align-items:center; gap:16px;
  padding:16px 24px 16px 16px; border-radius:var(--r-pill);
}
.science-founder .sf-mark{
  flex:none; width:52px; height:52px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg, var(--navy), #06122E); border:1px solid var(--line-strong);
}
.science-founder .sf-mark img{ width:34px; height:34px; border-radius:9px; }
.science-founder .sf-copy{ text-align:left; }
.science-founder .sf-copy b{ font-family:var(--font-h); font-weight:600; font-size:15px; display:block; color:var(--text); }
.science-founder .sf-copy span{ font-size:12.5px; color:var(--text-dim); }
.science-quote{
  margin-top:clamp(30px,4vw,40px); font-family:var(--font-h); font-weight:500;
  font-size:clamp(15px,2vw,17px); color:var(--elite); letter-spacing:.01em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   S, PRECIOS, 3 tiers, ANUAL héroe
   ═══════════════════════════════════════════════════════════════════════════ */
.pricing{ position:relative; }
.pricing-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,22px);
  align-items:stretch; max-width:1040px; margin:0 auto;
}
@media (max-width:860px){ .pricing-grid{ grid-template-columns:1fr; max-width:440px; } }
.tier{
  position:relative; padding:clamp(28px,3.4vw,38px) clamp(24px,3vw,30px);
  display:flex; flex-direction:column;
}
.tier-hero{
  transform:scale(1.035);
  border-radius:var(--r-2xl);
  background:
    linear-gradient(158deg, rgba(79,142,247,.16), rgba(26,107,245,.05) 52%, rgba(55,200,240,.05) 100%),
    rgba(11,20,44,.62);
  box-shadow:
    0 1px 0 rgba(255,255,255,.12) inset,
    0 40px 80px -32px rgba(26,107,245,.42),
    0 2px 8px rgba(0,0,0,.3);
}
.tier-hero::before{ background:linear-gradient(150deg, rgba(79,142,247,.7) 0%, rgba(79,142,247,.16) 22%, rgba(255,255,255,.02) 46%, transparent 62%, rgba(79,142,247,.2) 100%); }
@media (max-width:860px){ .tier-hero{ transform:none; } }
.tier-badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  padding:7px 18px; border-radius:var(--r-pill);
  background:linear-gradient(135deg, var(--brand-soft), var(--brand));
  font-family:var(--font-h); font-weight:600; font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:#fff; white-space:nowrap;
  box-shadow:0 8px 20px -6px rgba(26,107,245,.6);
}
.tier-name{ font-family:var(--font-h); font-weight:600; font-size:15px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); }
.tier-hero .tier-name{ color:var(--brand-soft); }
.tier-price{ margin-top:16px; display:flex; align-items:baseline; gap:4px; }
.tier-price .tp-currency{ font-family:var(--font-h); font-weight:600; font-size:22px; color:var(--text-dim); align-self:flex-start; margin-top:8px; }
.tier-price .tp-num{ font-family:var(--font-h); font-weight:700; font-size:clamp(46px,8vw,60px); line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.03em; }
.tier-price .tp-per{ font-size:15px; color:var(--text-faint); font-weight:500; }
.tier-sub{ margin-top:10px; font-size:14px; color:var(--text-dim); min-height:2.6em; }
.tier-sub b{ color:var(--text); font-weight:600; }
.tier-save{
  margin-top:14px; margin-bottom:20px; align-self:flex-start;
  padding:6px 14px; border-radius:var(--r-pill);
  background:rgba(141,198,63,.14); border:1px solid rgba(141,198,63,.32);
  font-size:12.5px; font-weight:600; color:var(--score-fuel); font-variant-numeric:tabular-nums;
}
.tier .btn{ margin-top:26px; width:100%; }
.tier-hero .btn{ margin-top:auto; }
.tier:not(.tier-hero) .tier-cta{
  background:rgba(255,255,255,.05); border:1px solid var(--line-strong); color:var(--text);
  box-shadow:none;
}
@media (hover:hover) and (pointer:fine){
  .tier:not(.tier-hero) .tier-cta:hover{ background:rgba(255,255,255,.09); filter:none; box-shadow:none; }
}
.tier-cta[data-config]{ position:relative; }
.pricing-foot{
  margin-top:clamp(30px,4vw,40px); text-align:center; font-size:13.5px; color:var(--text-dim);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 22px;
}
.pricing-foot span{ display:inline-flex; align-items:center; gap:8px; }
.pricing-foot svg{ flex:none; color:var(--elite); }

/* ═══════════════════════════════════════════════════════════════════════════
   S, CIERRE, CTA final
   ═══════════════════════════════════════════════════════════════════════════ */
.final{ text-align:center; }
.final-card{
  position:relative; overflow:hidden; border-radius:var(--r-2xl);
  padding:clamp(56px,10vw,104px) clamp(28px,6vw,56px);
  background:linear-gradient(160deg, #0C1B49, #060F29 74%);
  border:1px solid var(--line);
}
.final-orb{
  position:absolute; top:-24%; left:50%; transform:translateX(-50%);
  width:min(420px,86vw); aspect-ratio:1; z-index:0; pointer-events:none; opacity:.5;
  border-radius:50%; filter:blur(40px);
  background:radial-gradient(circle, rgba(26,107,245,.55), transparent 62%);
  animation:markBreathe 6s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){ .final-orb{ animation:none; } }
.final-content{ position:relative; z-index:2; }
.final h2{ font-size:clamp(32px,6vw,58px); font-weight:700; line-height:1.02; letter-spacing:-.032em; max-width:16ch; margin:0 auto; }
.final p{ margin-top:22px; color:var(--text-dim); font-size:clamp(16px,2.2vw,19px); max-width:44ch; margin-inline:auto; }
.final .btn{ margin-top:34px; }
.final-secondary{
  margin-top:24px; display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:0 8px; font-size:14px; color:var(--text-dim); font-weight:500;
}
.final-secondary svg{ color:#25D366; }
@media (hover:hover) and (pointer:fine){ .final-secondary:hover{ color:var(--text); } }

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */
.site-footer{
  padding:clamp(48px,7vw,64px) 0 calc(88px + var(--safe-b));
  border-top:1px solid var(--line); text-align:center;
}
@media (min-width:900px){ .site-footer{ padding-bottom:calc(40px + var(--safe-b)); } }
.footer-brand{ display:flex; justify-content:center; margin-bottom:20px; }
.footer-brand img{ height:20px; opacity:.8; }
.footer-links{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 22px; font-size:14px; color:var(--text-dim); }
.footer-links a{ transition:color .2s var(--ease); min-height:44px; display:inline-flex; align-items:center; }
@media (hover:hover) and (pointer:fine){ .footer-links a:hover{ color:var(--text); } }
.footer-links .wa svg{ color:#25D366; vertical-align:middle; margin-right:6px; }
.footer-legal{ margin:22px auto 0; max-width:600px; font-size:12px; color:var(--text-faint); line-height:1.65; }

/* ═══════════════════════════════════════════════════════════════════════════
   STICKY MOBILE CTA
   ═══════════════════════════════════════════════════════════════════════════ */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  padding-top:14px; padding-bottom:calc(14px + var(--safe-b));
  padding-left:var(--gutter-l); padding-right:var(--gutter-r);
  background:rgba(6,14,34,.9);
  -webkit-backdrop-filter:blur(20px) saturate(1.6); backdrop-filter:blur(20px) saturate(1.6);
  border-top:1px solid var(--line-strong);
  transform:translateY(130%); transition:transform .45s var(--ease);
}
.sticky-cta.show{ transform:translateY(0); }
.sticky-cta .btn{ width:100%; }
@media (min-width:900px){ .sticky-cta{ display:none; } }