/* ============================================================
   BioCódigo · sistema de diseño
   Azul marino profundo, verde esmeralda, blanco. El dorado queda
   reservado al logotipo: usarlo en botones y titulares decía
   "caro" y esta pagina promete lo contrario. El verde dice
   biologia y "adelante", que es lo que aqui se ofrece.
   Dentro de los datos el color sigue codificando informacion.
   ============================================================ */

:root{
  /* Azul marino, escala profunda */
  --bg:#060F1C;
  --bg-2:#0A1729;
  --bg-3:#0D1E36;
  --sup:#122641;
  --sup-2:#1A3457;
  --linea:rgba(214,226,244,.12);
  --linea-2:rgba(214,226,244,.22);
  --brillo:rgba(255,255,255,.055);

  /* Blanco, escala de texto */
  --tx:#FFFFFF;
  --tx-2:#CBD9EC;
  --tx-3:#8FA5C2;

  /* Verde vital: color de acción. Biología, salud, "adelante".
     Reemplaza al dorado en botones, enlaces y acentos porque el
     dorado dice "caro" y esta página promete justo lo contrario. */
  --vd:#3FB98C;          /* acción: verde bajado de saturación */
  --vd-alto:#54CBA0;
  --vd-suave:#93D6BB;    /* texto destacado: no grita, acompaña */
  --vd-bajo:#0E6B4E;
  --vd-tx:#04231A;
  --vd-vel:rgba(63,185,140,.11);
  --vd-borde:rgba(63,185,140,.34);
  --vd-metal:linear-gradient(135deg,#7BE9C0 0%,#33D79A 32%,#17A876 62%,#5FE0B4 82%,#0E7A57 100%);

  /* Oro: solo la marca */
  --oro:#E3C36B;
  --oro-alto:#FBEEC4;
  --oro-bajo:#A87F23;
  --oro-tx:#0A1729;
  --oro-vel:rgba(37,201,141,.13);
  --oro-borde:rgba(37,201,141,.42);
  --oro-metal:linear-gradient(135deg,#FBEEC4 0%,#E7C86E 26%,#C69C36 54%,#EBD290 76%,#A87F23 100%);

  /* Estados */
  --ok:#16C088; --ok-vel:rgba(22,192,136,.14);
  --alerta:#EBA53F; --alerta-vel:rgba(235,165,63,.14);
  --riesgo:#EF6E60; --riesgo-vel:rgba(239,110,96,.14);
  --dato:#5FA0F5; --dato-vel:rgba(95,160,245,.14);

  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px;
  --e6:32px; --e7:48px; --e8:72px; --e9:104px;
  --r1:12px; --r2:16px; --r3:22px; --r4:30px; --rp:999px;
  --r-btn:999px;   /* píldora, como los botones de Apple */

  --tipo-t:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --tipo-c:"Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ancho:1180px;

  --sombra:0 24px 60px -20px rgba(0,0,0,.75);
  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--tx-2);
  font-family:var(--tipo-c);font-size:16px;line-height:1.68;
  -webkit-font-smoothing:antialiased;position:relative;
}
/* Grano fino: da textura de impreso, evita el plano digital barato */
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:var(--grano);opacity:.035;mix-blend-mode:overlay;
}
body > *{position:relative;z-index:2}
.defs{position:absolute;width:0;height:0;overflow:hidden}

h1,h2,h3,h4{font-family:var(--tipo-t);color:var(--tx);line-height:1.14;margin:0 0 var(--e3);letter-spacing:-.022em}
h1{font-size:clamp(2.35rem,5.8vw,4.25rem);font-weight:800;letter-spacing:-.038em;line-height:1.06}
h1 em{font-style:normal;color:var(--vd-suave)}
/* El énfasis del titular: degradado de luz que baja del blanco al
   verde. Es la técnica que da acabado caro sin perder legibilidad,
   porque la parte de arriba, donde el ojo entra, queda casi blanca. */
h1 em.brillo{
  background:linear-gradient(178deg,#F2FBF7 4%,#C8ECDD 34%,#8FD3B8 68%,#5FB999 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.25));
  padding-bottom:.06em;
}
h2{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:700}
h3{font-size:1.15rem;font-weight:700}
h4{font-size:1rem;font-weight:600}
p{margin:0 0 var(--e4)}
a{color:var(--vd)}
ul,ol{margin:0;padding:0}
b,strong{color:var(--tx);font-weight:700}
img,svg{max-width:100%}
table{border-collapse:collapse;width:100%}

.wrap{width:min(var(--ancho),91vw);margin-inline:auto}
.wrap-md{width:min(780px,91vw)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none!important}
.opt{color:var(--tx-3);font-weight:400}
.fineprint{font-size:.875rem;color:var(--tx-3);margin:var(--e3) 0 0}
.lead{font-size:1.08rem;color:var(--tx-2);max-width:60ch}

.skip{position:absolute;left:-999px;top:0;z-index:99;background:var(--vd);color:var(--vd-tx);padding:var(--e3) var(--e4)}
.skip:focus{left:0}
:where(a,button,input,select,summary,[tabindex]):focus-visible{outline:2px solid var(--vd);outline-offset:3px;border-radius:var(--r1)}

/* ── Marca ──────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:var(--e4);
  padding:var(--e3) clamp(var(--e4),4vw,var(--e6));
  background:rgba(6,15,28,.86);backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--linea);
}
.brand{display:flex;align-items:center;gap:var(--e3);text-decoration:none;min-height:44px}
.brand-mark{
  width:38px;height:38px;display:grid;place-items:center;border-radius:12px;
  background:var(--oro-metal);color:#0A1729;
  box-shadow:0 6px 18px -6px rgba(216,177,74,.45), inset 0 1px 0 rgba(255,255,255,.5);
}
.brand-mark svg{width:26px;height:26px}
.brand-name{font-family:var(--tipo-t);font-weight:700;font-size:1.24rem;color:var(--tx);letter-spacing:-.028em}
.brand-name em{font-style:normal;background:var(--oro-metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.topnav{display:flex;align-items:center;gap:var(--e5)}
.topnav a:not(.btn){color:var(--tx-2);text-decoration:none;font-size:.9375rem;font-weight:600}
.topnav a:not(.btn):hover{color:var(--vd)}

/* ── Botones ────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
  font-family:var(--tipo-t);font-weight:700;font-size:1rem;line-height:1.2;
  padding:15px 30px;border-radius:var(--r-btn);border:1px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.btn-lg{padding:18px 38px;font-size:1.06rem}
.btn-sm{padding:12px 20px;font-size:.875rem;min-height:44px}
.btn-primary{
  background:var(--vd);color:var(--vd-tx);
  box-shadow:none;
}
.btn-primary:hover{background:var(--vd-alto)}
.btn-quiet{background:rgba(255,255,255,.04);color:var(--tx);border-color:var(--linea-2);backdrop-filter:blur(6px)}
/* Acción secundaria: se lee, pero no compite con el botón principal.
   Una sola pieza sólida por pantalla, el resto en contorno. */
.btn-linea{
  background:rgba(63,185,140,.07);color:var(--vd-suave);
  border-color:var(--vd-borde);backdrop-filter:blur(8px);
}
.btn-linea:hover{background:rgba(63,185,140,.15);border-color:var(--vd);color:#BEE7D6}
/* En la portada tiene más cuerpo que el de la barra: sigue siendo
   la acción principal, solo que sin bloque de color macizo. */
.hero-cta .btn-linea{
  border-width:1.5px;border-color:rgba(63,185,140,.55);color:#C6EBDA;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.hero-cta .btn-linea:hover{border-color:var(--vd);background:rgba(63,185,140,.16)}
.btn-quiet:hover{background:rgba(255,255,255,.09);border-color:var(--vd-borde)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ── Bloques ────────────────────────────────────── */
.band{padding:clamp(var(--e8),8vw,var(--e9)) 0}
.band.alt{background:var(--bg-2);border-block:1px solid var(--linea)}
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--e2);
  font-family:var(--tipo-t);font-size:.75rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--vd-suave);margin:0 0 var(--e4);
}
.punto{width:5px;height:5px;border-radius:50%;background:var(--vd);box-shadow:0 0 0 3px var(--vd-vel)}
.sec-head{text-align:center;max-width:660px;margin-inline:auto;margin-bottom:var(--e7)}
.sec-head.left{text-align:left;margin-inline:0}
.sec-title{margin:var(--e8) 0 var(--e4);font-size:1.3rem}

/* ── Hero ───────────────────────────────────────── */
.hero{position:relative;padding:clamp(var(--e8),8vw,var(--e9)) 0 clamp(var(--e7),6vw,var(--e8));overflow:hidden}
.hero-fondo{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 620px at 74% 32%, rgba(30,74,122,.55), transparent 68%),
    radial-gradient(760px 520px at 6% 4%, rgba(63,185,140,.07), transparent 62%),
    linear-gradient(180deg,#0A1729 0%,#060F1C 78%);
}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(var(--e5),4vw,var(--e8));align-items:center}
.hero h1{max-width:15ch;margin-bottom:var(--e5)}
.hero .lead:last-of-type{color:var(--tx-3)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--e3);margin:var(--e6) 0 var(--e6)}
.hero-prueba{list-style:none;display:flex;gap:clamp(var(--e5),4vw,var(--e7));border-top:1px solid var(--linea);padding-top:var(--e5)}
.hero-prueba li{display:flex;flex-direction:column}
.hero-prueba b{
  font-family:var(--tipo-t);font-size:1.7rem;font-weight:800;line-height:1;
  color:var(--tx);
}
.hero-prueba span{font-size:.8125rem;color:var(--tx-3);margin-top:4px}

.hero-friccion{margin:var(--e3) 0 0;font-size:.82rem;color:var(--tx-3);letter-spacing:.03em}

/* ── Escena 3D del hero ─────────────────────────
   Profundidad real con perspectiva del navegador:
   pesa nada y se ve nítida en cualquier pantalla. */
.hero-media{margin:0}
.escena{position:relative;perspective:1400px;perspective-origin:52% 42%;padding:var(--e5) 0}
.fono{
  position:relative;width:min(280px,74%);margin-inline:auto;
  transform:rotateY(-15deg) rotateX(7deg) rotateZ(-1.5deg);
  transform-style:preserve-3d;
  border-radius:36px;padding:9px;
  background:linear-gradient(150deg,#31435C,#0C1826 42%,#25344A);
  box-shadow:
    0 2px 0 rgba(255,255,255,.14) inset,
    -22px 34px 70px -22px rgba(0,0,0,.9),
    38px 22px 90px -30px rgba(30,74,122,.55);
  animation:flotar 9s ease-in-out infinite;
}
@keyframes flotar{
  0%,100%{transform:rotateY(-15deg) rotateX(7deg) rotateZ(-1.5deg) translateY(0)}
  50%{transform:rotateY(-11deg) rotateX(5deg) rotateZ(-1deg) translateY(-14px)}
}
.fono-luz{
  position:absolute;inset:-40% -30% auto;height:120%;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(37,201,141,.2),transparent 72%);
  transform:translateZ(-60px);
}
.fono-pant{
  position:relative;border-radius:28px;overflow:hidden;padding:16px 14px;
  background:linear-gradient(178deg,#0C1B31,#060F1C 62%);
  border:1px solid rgba(255,255,255,.09);
  display:grid;gap:12px;
}
.mini-cab{display:flex;align-items:center;gap:10px}
.mini-ico{
  width:38px;height:38px;flex:none;display:grid;place-items:center;font-size:1.05rem;
  border-radius:11px;background:var(--sup);border:1px solid var(--vd-borde);
}
.mini-cab small{display:block;font-family:var(--tipo-t);font-size:.5rem;font-weight:700;letter-spacing:.16em;color:var(--vd)}
.mini-cab strong{display:block;font-family:var(--tipo-t);font-size:.86rem;color:var(--tx);letter-spacing:-.02em}
.mini-anillos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mini-anillo{
  --p:50;--c:var(--vd);position:relative;aspect-ratio:1;border-radius:50%;
  background:conic-gradient(var(--c) calc(var(--p)*1%),rgba(255,255,255,.07) 0);
  display:grid;place-items:center;
}
.mini-anillo::after{content:"";position:absolute;inset:6px;border-radius:50%;background:#08131F}
.mini-anillo b{position:relative;z-index:1;font-family:var(--tipo-t);font-size:.62rem;font-weight:800;color:var(--tx)}
.mini-barras{display:grid;gap:6px}
.mini-b{display:grid;grid-template-columns:60px 1fr;align-items:center;gap:8px}
.mini-b span{font-size:.52rem;color:var(--tx-3);letter-spacing:.03em}
.mini-b i{display:block;height:5px;border-radius:99px;background:rgba(255,255,255,.08);position:relative}
.mini-b i::after{content:"";position:absolute;inset:0;width:var(--w);background:var(--c);border-radius:99px}
.mini-fila{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:7px 9px;border-radius:8px;background:rgba(255,255,255,.045);
  font-size:.55rem;color:var(--tx-3);
}
.mini-fila b{color:var(--vd);font-family:var(--tipo-t);font-size:.58rem}

.chip{
  position:absolute;z-index:3;padding:9px 14px;border-radius:13px;
  background:rgba(16,32,56,.82);backdrop-filter:blur(10px);
  border:1px solid var(--vd-borde);
  box-shadow:0 16px 34px -14px rgba(0,0,0,.85);
  animation:flotarChip 7s ease-in-out infinite;
}
.chip b{display:block;font-family:var(--tipo-t);font-size:.95rem;font-weight:800;line-height:1;color:var(--tx)}
.chip span{display:block;font-size:.6rem;color:var(--tx-3);margin-top:3px;letter-spacing:.05em;text-transform:uppercase}
.chip-a{top:6%;left:-2%;animation-delay:-1s}
.chip-b{top:44%;right:-4%;animation-delay:-3.5s}
.chip-c{bottom:8%;left:2%;animation-delay:-5s}
@keyframes flotarChip{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}

.hero-pie{margin-top:var(--e4);text-align:center;font-size:.8125rem;color:var(--tx-3);letter-spacing:.03em}

/* ── Franja de dolor ────────────────────────────── */
.dolor{
  padding:clamp(var(--e7),6vw,var(--e8)) 0;
  background:var(--bg-2);border-block:1px solid var(--linea);
}
.dolor-intro{
  font-family:var(--tipo-t);font-weight:600;font-size:1.05rem;color:var(--vd);
  text-align:center;margin-bottom:var(--e6);letter-spacing:-.01em;
}
.dolor-lista{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--e4)}
.dolor-lista li{
  position:relative;padding:var(--e5) var(--e5) var(--e5) 58px;
  border:1px solid var(--linea);border-radius:var(--r3);
  background:linear-gradient(180deg,var(--brillo),transparent 60%);
  font-size:1.02rem;color:var(--tx);line-height:1.55;
}
.dolor-lista li::before{
  content:"”";position:absolute;left:20px;top:14px;
  font-family:var(--tipo-t);font-size:3.4rem;line-height:1;font-weight:800;
  color:var(--vd);opacity:.55;
}
.dolor-cierre{
  margin:var(--e6) auto 0;max-width:62ch;text-align:center;
  font-size:1.06rem;color:var(--tx-2);
}

/* ── Tarjetas y módulos ─────────────────────────── */
.cols-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--e4)}
.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e4)}
.gap{margin-top:var(--e4)}

/* Íconos en dos tonos: una silueta rellena de fondo y el trazo
   nítido encima. Es lo que separa un ícono dibujado de una línea
   suelta, y hace que el set se lea como un sistema. */
.ico{
  display:inline-grid;place-items:center;width:54px;height:54px;flex:none;
  border-radius:16px;margin-bottom:var(--e4);
  background:linear-gradient(150deg,rgba(63,185,140,.16),rgba(63,185,140,.04));
  border:1px solid var(--vd-borde);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
.ico svg{width:30px;height:30px;overflow:visible}
.ico svg .f{fill:var(--vd);opacity:.30;stroke:none}
.ico svg .l{fill:none;stroke:var(--vd);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ico svg .p{fill:var(--vd);stroke:none}
.tarjeta:hover .ico,.modulos li:hover .ico{background:linear-gradient(150deg,rgba(63,185,140,.26),rgba(63,185,140,.07))}

.foto-ico svg .f{fill:var(--vd);opacity:.32;stroke:none}
.foto-ico svg .l{fill:none;stroke:var(--vd);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.tarjetas{margin-top:var(--e6)}
.tarjeta{
  border:1px solid var(--linea);border-radius:var(--r4);padding:var(--e5);
  background:linear-gradient(180deg,var(--brillo),transparent 55%);
  transition:border-color .2s ease,transform .2s ease;
}
.tarjeta:hover{border-color:var(--vd-borde);transform:translateY(-3px)}
.tarjeta p{color:var(--tx-3);margin:0;font-size:.95rem}

.modulos{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e4);margin-top:var(--e6)}
.modulos li{
  border:1px solid var(--linea);border-radius:var(--r4);padding:var(--e5);
  background:linear-gradient(180deg,var(--brillo),transparent 55%);
}
.modulos li .ico{width:44px;height:44px;margin-bottom:var(--e3)}
.modulos h3{font-size:1.06rem;margin-bottom:var(--e2)}
.modulos p{margin:0;color:var(--tx-3);font-size:.9375rem}

.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e5);margin-top:var(--e6)}
.steps li{border-top:0;padding-top:0}

/* Tres pantallas reales del producto, no ilustraciones.
   Son la interfaz de verdad, con la misma tipografía, los mismos
   colores y los mismos radios. Lo que ve la persona es lo que va
   a recibir, y eso vende más que cualquier dibujo. */
.pantalla{
  margin-bottom:var(--e5);border:1px solid var(--linea-2);border-radius:var(--r3);
  background:linear-gradient(180deg,#0E1F36,#091524);overflow:hidden;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.85);
}
.pt-cab{display:flex;gap:6px;padding:11px 14px;border-bottom:1px solid var(--linea);background:rgba(255,255,255,.03)}
.pt-punto{width:8px;height:8px;border-radius:50%;background:rgba(214,226,244,.22)}
.pt-cuerpo{padding:var(--e4) var(--e4) var(--e5)}
.pt-prog{height:4px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden;margin-bottom:9px}
.pt-prog i{display:block;height:100%;background:var(--vd);border-radius:99px}
.pt-paso{font-size:.68rem;color:var(--tx-3);margin:0 0 var(--e4);letter-spacing:.04em}

.pt-campo{margin-bottom:11px}
.pt-campo span{display:block;font-family:var(--tipo-t);font-size:.68rem;font-weight:600;color:var(--tx-2);margin-bottom:5px}
.pt-input{
  padding:10px 12px;border:1px solid var(--linea-2);border-radius:10px;
  background:var(--sup);font-size:.8rem;color:var(--tx);
}
.pt-input em{font-style:normal;color:var(--tx-3)}
.pt-select{position:relative;color:var(--tx-2)}
.pt-select::after{content:"";position:absolute;right:12px;top:50%;width:6px;height:6px;border-right:1.5px solid var(--tx-3);border-bottom:1.5px solid var(--tx-3);transform:translateY(-70%) rotate(45deg)}

.pt-preg{font-family:var(--tipo-t);font-size:.82rem;font-weight:600;color:var(--tx);margin:0 0 10px}
.pt-preg b{color:var(--vd-suave);margin-right:4px}
.pt-op{
  padding:9px 12px;border:1px solid var(--linea-2);border-radius:10px;
  font-size:.75rem;color:var(--tx-2);margin-bottom:7px;display:flex;align-items:center;gap:8px;
}
.pt-op.is-on{border-color:var(--vd);background:var(--vd-vel);color:var(--tx)}
.pt-check{
  width:14px;height:14px;flex:none;border-radius:50%;background:var(--vd);position:relative;
}
.pt-check::after{content:"";position:absolute;left:4.4px;top:2.6px;width:3.6px;height:6.4px;border-right:2px solid #04231A;border-bottom:2px solid #04231A;transform:rotate(42deg)}

.pt-perfil{display:flex;align-items:center;gap:10px;margin-bottom:var(--e4)}
.pt-glifo{
  width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:11px;
  background:var(--sup);border:1px solid rgba(216,177,102,.4);
}
.pt-glifo svg{width:21px;height:21px;color:#D8B166}
.pt-perfil small{display:block;font-family:var(--tipo-t);font-size:.5rem;font-weight:700;letter-spacing:.15em;color:#D8B166}
.pt-perfil strong{display:block;font-family:var(--tipo-t);font-size:.86rem;color:var(--tx);letter-spacing:-.02em}

.pt-anillos{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:var(--e4)}
.pt-anillo{
  --p:50;--c:var(--vd);position:relative;aspect-ratio:1;border-radius:50%;
  background:conic-gradient(var(--c) calc(var(--p)*1%),rgba(255,255,255,.07) 0);
  display:grid;place-content:center;text-align:center;
}
.pt-anillo::after{content:"";position:absolute;inset:7px;border-radius:50%;background:#0A1729}
.pt-anillo b,.pt-anillo span{position:relative;z-index:1}
.pt-anillo b{font-family:var(--tipo-t);font-size:.62rem;font-weight:800;color:var(--tx);display:block}
.pt-anillo span{font-size:.45rem;color:var(--tx-3);letter-spacing:.06em;text-transform:uppercase}

.pt-barras{display:grid;gap:7px}
.pt-b{display:grid;grid-template-columns:64px 1fr 20px;align-items:center;gap:8px}
.pt-b span{font-size:.55rem;color:var(--tx-3)}
.pt-b i{display:block;height:5px;border-radius:99px;background:rgba(255,255,255,.08);position:relative}
.pt-b i::after{content:"";position:absolute;inset:0;width:var(--w);background:var(--c);border-radius:99px}
.pt-b em{font-style:normal;font-family:var(--tipo-t);font-size:.55rem;font-weight:700;color:var(--tx-2);text-align:right}
.step-n{
  display:inline-grid;place-items:center;width:32px;height:32px;border-radius:var(--rp);
  background:var(--vd);color:var(--vd-tx);font-family:var(--tipo-t);font-weight:800;font-size:.9rem;
  margin-bottom:var(--e3);box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}
.steps p{color:var(--tx-3);margin:0;font-size:.9375rem}

/* ── Formulario ─────────────────────────────────── */
.progress{height:5px;background:var(--sup);border-radius:var(--rp);overflow:hidden;max-width:440px;margin:var(--e4) auto var(--e2)}
.sec-head.left .progress{margin-inline:0}
.progress i{display:block;height:100%;width:25%;background:var(--vd);transition:width .35s ease}
.progress-label{font-size:.875rem;color:var(--tx-3);margin:0}

fieldset.step{border:0;padding:0;margin:0;display:none}
fieldset.step.is-on{display:block}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--e4) var(--e5)}
.f{display:flex;flex-direction:column;gap:var(--e2);margin:0}
.f label,.lbl{font-family:var(--tipo-t);font-weight:600;font-size:.9375rem;color:var(--tx)}
.help{font-size:.8125rem;color:var(--tx-3);line-height:1.45}
.err{font-size:.8125rem;color:var(--riesgo);font-weight:600}
.err:empty{display:none}

input[type=text],input[type=number],input[type=date],select{
  width:100%;padding:14px 15px;font:inherit;font-size:1rem;
  color:var(--tx);background:var(--sup);
  border:1px solid var(--linea-2);border-radius:var(--r2);color-scheme:dark;
  transition:border-color .16s ease,background .16s ease;
}
input:hover,select:hover{border-color:var(--tx-3)}
input:focus,select:focus{border-color:var(--vd)}
input::placeholder{color:var(--tx-3)}
input[aria-invalid=true],select[aria-invalid=true]{border-color:var(--riesgo);background:var(--riesgo-vel)}
select option{color:#111}

.seg{display:flex;border:1px solid var(--linea-2);border-radius:var(--r2);overflow:hidden;background:var(--sup)}
.seg label{flex:1;cursor:pointer;position:relative}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg span{display:block;text-align:center;padding:13px;font-family:var(--tipo-t);font-weight:600;font-size:.9375rem;color:var(--tx-3)}
.seg input:checked+span{background:var(--vd);color:var(--vd-tx)}
.seg input:focus-visible+span{outline:2px solid var(--vd);outline-offset:-2px}

.checkbox-group{border:1px solid var(--linea);border-radius:var(--r3);padding:var(--e5);margin:var(--e5) 0 0;background:linear-gradient(180deg,var(--brillo),transparent 60%)}
.checkbox-group legend{font-family:var(--tipo-t);font-weight:600;font-size:.9375rem;color:var(--tx);padding:0 var(--e2)}
.chk{display:flex;gap:var(--e3);align-items:flex-start;padding:var(--e2) 0;cursor:pointer;font-size:.9375rem}
.chk input{width:18px;height:18px;margin:4px 0 0;accent-color:var(--vd);flex:none}

.hint{
  margin:var(--e4) 0 0;padding:var(--e3) var(--e4);font-size:.9375rem;font-weight:600;
  color:var(--tx);background:var(--riesgo-vel);border-left:3px solid var(--riesgo);border-radius:0 var(--r1) var(--r1) 0;
}
.actions{display:flex;justify-content:flex-end;gap:var(--e3);margin-top:var(--e6);flex-wrap:wrap}

.q{border-top:1px solid var(--linea);padding:var(--e5) 0}
.q:first-child{border-top:0;padding-top:0}
.q h3{font-size:1.06rem;margin-bottom:var(--e3)}
.q h3 .qn{color:var(--vd);margin-right:var(--e2);font-weight:800}
.opts{display:grid;gap:var(--e2)}
.opt-l{position:relative;cursor:pointer}
.opt-l input{position:absolute;opacity:0;width:1px;height:1px}
.opt-l span{display:block;padding:13px 15px;border:1px solid var(--linea-2);border-radius:var(--r2);font-size:.9375rem;background:var(--sup);transition:border-color .16s,background .16s}
.opt-l:hover span{border-color:var(--tx-3)}
.opt-l input:checked+span{border-color:var(--vd);background:var(--vd-vel);color:var(--tx)}
.opt-l input:focus-visible+span{outline:2px solid var(--vd);outline-offset:2px}
.q[data-bad=true]{border-left:3px solid var(--riesgo);padding-left:var(--e4)}

.calc{text-align:center;padding:var(--e8) 0}
.calc-bar{height:5px;background:var(--sup);border-radius:var(--rp);overflow:hidden;max-width:340px;margin:0 auto var(--e5)}
.calc-bar i{display:block;height:100%;width:30%;background:var(--vd);animation:carga 1.5s ease-in-out infinite}
@keyframes carga{0%{width:12%;margin-left:0}50%{width:70%;margin-left:30%}100%{width:12%;margin-left:88%}}
.calc p{color:var(--tx-3);margin:0}

/* ============================================================
   TEMA POR BIOTIPO
   Cada resultado toma un acento propio. El azul marino y el
   verde de acción no se tocan: solo cambia el tono que viste
   la ficha de perfil, los datos y los bordes, para que cada
   persona sienta que la pantalla se armó para ella.
   ============================================================ */
[data-bio]{ --bio:var(--vd); --bio-2:var(--vd-suave); --bio-vel:var(--vd-vel); --bio-borde:var(--vd-borde); --bio-luz:rgba(63,185,140,.10) }

/* Fuego · ámbar cálido, el que más empuja */
[data-bio="F"]{ --bio:#E8955E; --bio-2:#F2BC93; --bio-vel:rgba(232,149,94,.12); --bio-borde:rgba(232,149,94,.38); --bio-luz:rgba(232,149,94,.13) }
/* Aire · azul claro, ligero y translúcido */
[data-bio="A"]{ --bio:#8FBEE8; --bio-2:#B9D8F2; --bio-vel:rgba(143,190,232,.12); --bio-borde:rgba(143,190,232,.36); --bio-luz:rgba(143,190,232,.11) }
/* Tierra · ocre dorado, denso y estable */
[data-bio="T"]{ --bio:#D8B166; --bio-2:#EBD199; --bio-vel:rgba(216,177,102,.12); --bio-borde:rgba(216,177,102,.38); --bio-luz:rgba(216,177,102,.12) }
/* Agua · turquesa profundo, sereno */
[data-bio="G"]{ --bio:#57B8C6; --bio-2:#93D6DF; --bio-vel:rgba(87,184,198,.12); --bio-borde:rgba(87,184,198,.36); --bio-luz:rgba(87,184,198,.11) }

[data-bio] .eyebrow{color:var(--bio-2)}
[data-bio] .punto{background:var(--bio);box-shadow:0 0 0 3px var(--bio-vel)}
[data-bio] .sec-title{color:var(--tx)}
[data-bio] .perfil{border-color:var(--bio-borde)}
[data-bio] .perfil-mark{border-color:var(--bio-borde)}
[data-bio] .perfil-mark svg{color:var(--bio)}
[data-bio] .tag.oro{border-color:var(--bio-borde);color:var(--bio-2);background:var(--bio-vel)}
[data-bio] .cta-block{border-color:var(--bio-borde)}
[data-bio] .mes,[data-bio] .horarios b,[data-bio] .plato h4,[data-bio] .dia-h h4{color:var(--bio-2)}
[data-bio] table.rutina thead th,[data-bio] .metas thead th{color:var(--bio-2)}
[data-bio] .tab[aria-selected=true]{background:var(--bio);color:#08131F}
[data-bio] .lista.num li::before{color:var(--bio)}
[data-bio] .plato li::before,[data-bio] .compras li::before{color:var(--bio)}
[data-bio] .steps li,[data-bio] .reveal[open] summary{color:inherit}
[data-bio] .dock-txt{color:var(--bio-2)}

/* El fondo del bloque de resultados toma el tinte del biotipo */
.results[data-bio]{background:radial-gradient(1000px 520px at 50% -6%,var(--bio-luz),transparent 66%),linear-gradient(180deg,var(--bg-2),var(--bg) 70%)}
.perfil[data-bio],[data-bio] .perfil{background:radial-gradient(700px 300px at 12% 0%,var(--bio-vel),transparent 60%),linear-gradient(180deg,var(--brillo),transparent 60%)}

/* ── Adelanto tras el paso 1 ─────────────────────
   Entregar un dato aquí es lo que evita el abandono:
   la persona ya recibió algo antes de seguir dando. */
.adelanto{
  margin-top:var(--e6);padding:var(--e5);border-radius:var(--r4);
  border:1px solid var(--vd-borde);
  background:radial-gradient(700px 320px at 20% 0%,rgba(63,185,140,.10),transparent 65%),var(--bg-2);
  animation:sube .6s var(--ease) both;
}
.adelanto-fila{display:flex;align-items:center;gap:var(--e5);flex-wrap:wrap}
.adelanto-anillo{flex:none}
.adelanto .anillo{width:96px;height:96px;margin:0}
.adelanto .anillo::after{inset:9px;background:var(--bg-2)}
.adelanto-txt{flex:1;min-width:220px}
.adelanto-txt h3{margin-bottom:var(--e2);font-size:1.1rem}
.adelanto-txt p{margin:0 0 var(--e2);font-size:.95rem;color:var(--tx-2)}
.adelanto-pie{
  margin-top:var(--e5);padding-top:var(--e4);border-top:1px solid var(--linea);
  display:flex;align-items:center;justify-content:space-between;gap:var(--e4);flex-wrap:wrap;
}
.adelanto-pie p{margin:0;flex:1;min-width:260px;font-size:.95rem;color:var(--tx-2)}
@media (max-width:640px){
  .adelanto{padding:var(--e4)}
  .adelanto-fila{gap:var(--e4)}
  .adelanto .anillo{width:80px;height:80px}
  .adelanto-pie .btn{width:100%}
}

/* ── Avisos y perfil ────────────────────────────── */
.aviso{border:1px solid var(--alerta);background:var(--alerta-vel);border-radius:var(--r3);padding:var(--e5);margin-bottom:var(--e6)}
.aviso.grave{border-color:var(--riesgo);background:var(--riesgo-vel)}
.aviso h3{margin-bottom:var(--e2)}
.aviso p:last-child{margin-bottom:0}

.perfil{
  border:1px solid var(--vd-borde);border-radius:var(--r4);padding:clamp(var(--e5),3vw,var(--e6));
  background:linear-gradient(150deg,var(--vd-vel),transparent 55%),linear-gradient(180deg,var(--brillo),transparent 60%);
  box-shadow:var(--sombra);
}
.perfil-id{display:flex;align-items:center;gap:var(--e4);margin-bottom:var(--e4)}
.perfil-mark{
  width:66px;height:66px;flex:none;display:grid;place-items:center;
  border-radius:var(--r2);background:var(--sup);border:1px solid var(--vd-borde);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.perfil-mark svg{width:36px;height:36px;color:var(--vd)}
.perfil-mark svg use,.mini-ico svg use{color:var(--vd)}
.mini-ico svg{width:20px;height:20px;color:var(--vd)}
.perfil-id h2{margin:0}
.perfil-sub{color:var(--tx-2);max-width:72ch;margin-bottom:var(--e5);font-size:1.04rem}
.tags{display:flex;flex-wrap:wrap;gap:var(--e2)}
.tag{font-family:var(--tipo-t);font-size:.8125rem;font-weight:600;padding:6px 14px;border-radius:var(--rp);border:1px solid var(--linea-2);color:var(--tx-2);background:var(--sup)}
.tag.oro{border-color:var(--vd-borde);color:var(--vd);background:var(--vd-vel)}
.tag.ok{border-color:var(--ok);color:var(--ok);background:var(--ok-vel)}

/* ── Datos: anillos y barras (codifican valor) ──── */
.numeros{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e4)}
.num{border:1px solid var(--linea);border-radius:var(--r3);padding:var(--e5);text-align:center;background:linear-gradient(180deg,var(--brillo),transparent 55%)}
.anillo{
  --p:50;--c:var(--vd);
  position:relative;width:112px;height:112px;margin:0 auto var(--e4);border-radius:50%;
  background:conic-gradient(var(--c) calc(var(--p)*1%),var(--sup) 0);
  display:grid;place-items:center;
}
.anillo::after{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.anillo b{position:relative;z-index:1;font-family:var(--tipo-t);font-size:1.32rem;font-weight:800;color:var(--tx)}
.num-l{font-family:var(--tipo-t);font-weight:600;font-size:.9375rem;color:var(--tx);display:block}
.num-e{font-size:.8125rem;color:var(--tx-3);display:block;margin-top:2px}

.barras{display:grid;gap:var(--e4);border:1px solid var(--linea);border-radius:var(--r3);padding:var(--e6);background:linear-gradient(180deg,var(--brillo),transparent 45%)}
.barra{display:grid;grid-template-columns:138px 1fr 46px;align-items:center;gap:var(--e4);font-size:.9375rem}
.barra .pista{height:11px;background:var(--sup);border-radius:var(--rp);overflow:hidden}
.barra .relleno{display:block;height:100%;width:0;background:var(--c,var(--vd));border-radius:var(--rp);transition:width .8s cubic-bezier(.2,.7,.2,1)}
.barra em{font-style:normal;font-family:var(--tipo-t);font-weight:700;text-align:right;color:var(--tx)}

/* ── Paneles ────────────────────────────────────── */
.panel{border:1px solid var(--linea);border-radius:var(--r4);padding:var(--e5);background:linear-gradient(180deg,var(--brillo),transparent 55%)}
.panel h3{margin-bottom:var(--e3)}
.panel>p:last-child,.panel>ul:last-child{margin-bottom:0}
.lista{list-style:none;display:grid;gap:var(--e3)}
.lista li{padding-left:28px;position:relative;font-size:.9375rem}
.lista li::before{position:absolute;left:0;top:0;font-weight:800;font-family:var(--tipo-t)}
.lista.pos li::before{content:"+";color:var(--ok)}
.lista.warn li::before{content:"!";color:var(--alerta);left:6px}
.lista.num{counter-reset:n}
.lista.num li{counter-increment:n}
.lista.num li::before{content:counter(n);color:var(--vd)}

.rasgos{display:grid;grid-template-columns:1fr 1fr;gap:var(--e4);margin:var(--e4) 0 0}
.rasgos dt{font-family:var(--tipo-t);font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--tx-3)}
.rasgos dd{margin:3px 0 0;font-size:.875rem;color:var(--tx-2)}

.clima{list-style:none;display:grid;gap:var(--e2)}
.clima li{display:grid;grid-template-columns:26px 1fr auto;gap:var(--e3);align-items:center;padding:11px 14px;border:1px solid var(--linea);border-radius:var(--r2);font-size:.9375rem;background:var(--sup)}
.clima li.top{border-color:var(--ok);background:var(--ok-vel)}
.clima li.bajo{border-color:var(--alerta);background:var(--alerta-vel)}
.clima .niv{font-family:var(--tipo-t);font-weight:700;font-size:.8125rem}
.clima li.top .niv{color:var(--ok)}
.clima li.bajo .niv{color:var(--alerta)}

.reveal{border:1px solid var(--linea);border-radius:var(--r2);padding:var(--e4) var(--e5);margin-top:var(--e3);background:var(--sup)}
.reveal summary{font-family:var(--tipo-t);font-weight:600;cursor:pointer;color:var(--tx);font-size:.9375rem;min-height:44px;display:flex;align-items:center}
.reveal[open] summary{margin-bottom:var(--e3);color:var(--vd)}
.reveal p:last-child{margin-bottom:0;font-size:.9375rem}

.cta-block{
  border:1px solid var(--vd-borde);border-radius:var(--r4);padding:clamp(var(--e6),4vw,var(--e7));
  margin-top:var(--e8);text-align:center;
  background:radial-gradient(600px 300px at 50% 0%,var(--vd-vel),transparent 70%);
}
.cta-block p{color:var(--tx-2);max-width:60ch;margin-inline:auto}

/* ── Pestañas del plan ──────────────────────────── */
.tabs{display:flex;flex-wrap:wrap;gap:var(--e2);border-bottom:1px solid var(--linea);margin-bottom:var(--e7);padding-bottom:var(--e3)}
.tab{font-family:var(--tipo-t);font-weight:600;font-size:.9375rem;padding:10px 17px;border-radius:var(--r1);border:1px solid transparent;background:transparent;color:var(--tx-3);cursor:pointer;transition:color .16s,background .16s}
.tab:hover{color:var(--tx);background:var(--sup)}
.tab[aria-selected=true]{background:var(--vd);color:var(--vd-tx);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.panel-tab{display:none}
.panel-tab.is-on{display:block}

.bloque{margin-bottom:var(--e8)}
.bloque:last-child{margin-bottom:0}
.bloque>h3{border-bottom:1px solid var(--linea);padding-bottom:var(--e3);margin-bottom:var(--e5)}

.tabla-wrap{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--r3)}
table.rutina{min-width:580px;font-size:.9375rem}
table.rutina th,table.rutina td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--linea);vertical-align:top}
table.rutina thead th{font-family:var(--tipo-t);font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--vd);background:var(--sup)}
table.rutina tbody tr:last-child td{border-bottom:0}
table.rutina tbody tr:hover{background:var(--brillo)}
table.rutina td:first-child{color:var(--tx);font-weight:600}
table.rutina .sust{display:block;color:var(--tx-3);font-size:.8125rem;font-weight:400;margin-top:4px}
.dia-h{display:flex;align-items:baseline;gap:var(--e3);margin:var(--e6) 0 var(--e3);flex-wrap:wrap}
.dia-h h4{margin:0;color:var(--vd-suave)}
.dia-h span{font-size:.875rem;color:var(--tx-3)}

.ruta{list-style:none;display:grid;gap:0}
.ruta li{display:grid;grid-template-columns:84px 1fr;gap:var(--e5);padding:var(--e5) 0;border-top:1px solid var(--linea)}
.ruta li:first-child{border-top:0}
.mes{font-family:var(--tipo-t);font-weight:800;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--vd-suave)}
.ruta h4{margin:0 0 3px}
.ruta p{margin:0;font-size:.9375rem;color:var(--tx-3)}
.ruta .meta{color:var(--vd);font-weight:600}

.comida{display:grid;gap:var(--e4)}
.plato{border:1px solid var(--linea);border-radius:var(--r3);padding:var(--e5);background:linear-gradient(180deg,var(--brillo),transparent 55%)}
.plato h4{margin-bottom:var(--e3);color:var(--vd-suave)}
.plato ul{list-style:none;display:grid;gap:6px;font-size:.9375rem}
.plato li{padding-left:18px;position:relative}
.plato li::before{content:"·";position:absolute;left:5px;color:var(--vd)}
.medidas{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e3);margin-top:var(--e5)}
.medida{border:1px solid var(--linea);border-radius:var(--r2);padding:var(--e4);text-align:center;background:var(--sup)}
.medida b{display:block;font-family:var(--tipo-t);font-size:1.7rem;font-weight:800;color:var(--tx)}
.medida span{font-size:.8125rem;color:var(--tx-3)}
.compras{columns:2;column-gap:var(--e5);list-style:none;font-size:.9375rem}
.compras li{break-inside:avoid;padding-left:18px;position:relative;margin-bottom:5px}
.compras li::before{content:"·";position:absolute;left:5px;color:var(--vd)}

.metas{width:100%;font-size:.9375rem}
.metas th,.metas td{padding:12px 14px;border-bottom:1px solid var(--linea);text-align:left}
.metas thead th{font-family:var(--tipo-t);font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--vd);background:var(--sup)}
.metas td:first-child{color:var(--tx);font-weight:600}

.score{display:flex;align-items:center;gap:var(--e6);border:1px solid var(--linea);border-radius:var(--r3);padding:var(--e6);margin-bottom:var(--e5);background:linear-gradient(180deg,var(--brillo),transparent 55%)}
.score .anillo{margin:0}
.score-tx h4{margin:0 0 var(--e2)}
.score-tx p{margin:0;color:var(--tx-3);font-size:.9375rem}

/* ── Revisión semanal ───────────────────────────── */
.checkin{border:1px solid var(--linea);border-radius:var(--r3);padding:var(--e6);margin-bottom:var(--e5);background:linear-gradient(180deg,var(--brillo),transparent 55%)}
.veredicto{border:1px solid var(--linea-2);border-left-width:4px;border-radius:var(--r3);padding:var(--e6);margin-bottom:var(--e4);background:linear-gradient(180deg,var(--brillo),transparent 55%)}
.veredicto.bien{border-left-color:var(--ok)}
.veredicto.ajusta{border-left-color:var(--alerta)}
.veredicto.frena{border-left-color:var(--riesgo)}
.veredicto h3{margin-bottom:var(--e2)}
.veredicto p:last-child{margin-bottom:0}
.tendencia{border:1px solid var(--linea);border-radius:var(--r3);padding:var(--e5);margin-bottom:var(--e4)}
.tendencia svg{display:block;width:100%;height:130px}
.hist{list-style:none;font-size:.875rem;display:grid;gap:0;margin-top:var(--e3)}
.hist li{display:flex;justify-content:space-between;gap:var(--e3);padding:9px 0;border-top:1px solid var(--linea);color:var(--tx-3)}
.hist li b{color:var(--vd)}
.vacio{border:1px dashed var(--linea-2);border-radius:var(--r3);padding:var(--e7);text-align:center;color:var(--tx-3)}

/* ── Producto recomendado ───────────────────────── */
.prod{
  margin-top:var(--e5);border:1px solid var(--vd-borde);border-radius:var(--r4);
  padding:var(--e5);overflow:hidden;
  background:radial-gradient(700px 320px at 15% 0%,var(--vd-vel),transparent 68%),var(--bg-2);
}
.prod-eti{
  font-family:var(--tipo-t);font-size:.68rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--vd);margin:0 0 var(--e4);
}
.prod-cuerpo{display:grid;grid-template-columns:200px 1fr;gap:var(--e5);align-items:start}
.prod-foto{margin:0;border-radius:var(--r3);overflow:hidden;background:#050A12;border:1px solid var(--linea)}
.prod-foto img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.prod-tipo{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3);margin:0 0 4px}
.prod-txt h4{font-family:var(--tipo-t);font-size:1.35rem;font-weight:800;margin:0 0 var(--e3);letter-spacing:-.02em}
.prod-motivo{color:var(--tx);font-size:.98rem;margin-bottom:var(--e3)}
.prod-puntos{list-style:none;display:grid;gap:6px;margin:0 0 var(--e3);font-size:.9rem}
.prod-puntos li{padding-left:22px;position:relative;color:var(--tx-2)}
.prod-puntos li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:800}
.prod-formato{font-size:.85rem;color:var(--tx-3);margin-bottom:var(--e4)}
.prod-btns{display:flex;flex-wrap:wrap;gap:var(--e2);align-items:center}
.btn-wa{background:#22C55E;color:#052E16;border-color:#22C55E;box-shadow:0 10px 26px -12px rgba(34,197,94,.7)}
.btn-wa:hover{background:#34D36F}
.prod-legal{font-size:.76rem;color:var(--tx-3);margin:var(--e4) 0 0;line-height:1.5;max-width:62ch}

/* ── Barra fija ─────────────────────────────────── */
.dock{
  position:sticky;bottom:0;z-index:25;
  display:flex;align-items:center;justify-content:space-between;gap:var(--e4);flex-wrap:wrap;
  padding:var(--e3) clamp(var(--e4),4vw,var(--e6));
  background:rgba(10,23,41,.92);backdrop-filter:blur(14px);
  border-top:1px solid var(--vd-borde);
}
.dock-txt{font-family:var(--tipo-t);font-weight:700;font-size:.9375rem;color:var(--vd)}
.dock-btns{display:flex;gap:var(--e2);flex-wrap:wrap}

/* ── Cierre y pie ───────────────────────────────── */
.close{text-align:center;background:radial-gradient(700px 340px at 50% 0%,rgba(30,74,122,.4),transparent 70%)}
.close .lead{margin-inline:auto;margin-bottom:var(--e6)}
.foot{border-top:1px solid var(--linea);padding:var(--e7) 0;background:var(--bg-2)}
.foot .brand-name{margin-bottom:var(--e3);display:block}
.foot .fineprint{max-width:80ch}

/* ── Responsive ─────────────────────────────────── */
@media (max-width:1000px){
  /* Móvil primero: el titular y el botón mandan.
     El teléfono 3D va debajo, como prueba de lo que recibes. */
  .hero{padding-top:var(--e6)}
  .hero-grid{grid-template-columns:1fr;gap:var(--e4)}
  .hero-media{order:2}
  .hero h1{max-width:none}
  .escena{perspective:1000px;padding:var(--e4) 0 0}
  .fono{width:min(238px,62%);transform:rotateY(-11deg) rotateX(5deg)}
  @keyframes flotar{0%,100%{transform:rotateY(-11deg) rotateX(5deg) translateY(0)}50%{transform:rotateY(-8deg) rotateX(4deg) translateY(-9px)}}
  .chip-a{top:2%;left:0}
  .chip-b{top:40%;right:0}
  .chip-c{bottom:4%;left:3%}
  .prod-cuerpo{grid-template-columns:150px 1fr;gap:var(--e4)}
  .numeros{grid-template-columns:repeat(2,1fr)}
  .modulos{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .cols-3,.steps,.modulos{grid-template-columns:1fr}
  .cols-2,.grid-2,.dolor-lista{grid-template-columns:1fr}
  .medidas{grid-template-columns:repeat(2,1fr)}
  .compras{columns:1}
}
@media (max-width:640px){
  .topnav a:not(.btn){display:none}
  .numeros{grid-template-columns:repeat(2,1fr)}
  .hero-cta .btn,.actions .btn{width:100%}
  .actions{flex-direction:column-reverse}
  .hero-prueba{gap:var(--e5)}
  .hero-prueba b{font-size:1.4rem}
  .barra{grid-template-columns:106px 1fr 40px;font-size:.875rem}
  .rasgos{grid-template-columns:1fr}
  .score{flex-direction:column;text-align:center;gap:var(--e4)}
  .ruta li{grid-template-columns:1fr;gap:var(--e2)}
  .dock{flex-direction:column;align-items:stretch;text-align:center}
  .dock-btns{justify-content:center}
  .dolor-lista li{padding:var(--e4) var(--e4) var(--e4) 48px;font-size:.95rem}
  .dolor-lista li::before{left:14px;font-size:2.8rem}
  .prod{padding:var(--e4)}
  .prod-cuerpo{grid-template-columns:1fr;gap:var(--e4)}
  .prod-foto{width:min(190px,55%);margin-inline:auto}
  .prod-btns .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.001ms!important}
}

/* ============================================================
   MOVIMIENTO · curvas estilo Apple
   --ease sale rápido y frena largo; --pop rebota apenas.
   ============================================================ */
:root{
  --ease:cubic-bezier(.22,1,.36,1);
  --pop:cubic-bezier(.34,1.4,.64,1);
}
@property --p{syntax:"<number>";inherits:false;initial-value:0}

.btn{transition:transform .38s var(--ease),box-shadow .38s var(--ease),background .38s var(--ease),border-color .38s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.975);transition-duration:.11s}
.tarjeta,.tab,.opt-l span,.reveal,input,select,.modulos li{transition:all .34s var(--ease)}
.topnav a:not(.btn){transition:color .3s var(--ease)}
.modulos li:hover{border-color:var(--vd-borde);transform:translateY(-2px)}

/* ── Entrada del logo, una sola vez al cargar ─────────────── */
.brand-mark{opacity:0;transform:scale(.72) rotate(-8deg)}
.brand-name{opacity:0;transform:translateX(-10px)}
.js-entrada .brand-mark{animation:marca-entra 1s var(--pop) .15s forwards}
.js-entrada .brand-mark svg g path{stroke-dasharray:46;stroke-dashoffset:46;animation:huella-traza .8s var(--ease) forwards}
.js-entrada .brand-mark svg g path:nth-child(1){animation-delay:.42s}
.js-entrada .brand-mark svg g path:nth-child(2){animation-delay:.55s}
.js-entrada .brand-mark svg g path:nth-child(3){animation-delay:.68s}
.js-entrada .brand-mark svg g path:nth-child(4){animation-delay:.81s}
.js-entrada .brand-name{animation:nombre-entra .8s var(--ease) .6s forwards}
@keyframes marca-entra{
  0%{opacity:0;transform:scale(.72) rotate(-8deg);filter:drop-shadow(0 0 0 rgba(216,177,74,0))}
  60%{opacity:1;transform:scale(1.03) rotate(1deg);filter:drop-shadow(0 0 12px rgba(216,177,74,.45))}
  100%{opacity:1;transform:scale(1) rotate(0);filter:drop-shadow(0 0 0 rgba(216,177,74,0))}
}
@keyframes huella-traza{to{stroke-dashoffset:0}}
@keyframes nombre-entra{to{opacity:1;transform:none}}

.js-entrada .hero-txt>*{opacity:0;animation:sube .9s var(--ease) forwards}
.js-entrada .hero-txt>*:nth-child(1){animation-delay:.48s}
.js-entrada .hero-txt>*:nth-child(2){animation-delay:.60s}
.js-entrada .hero-txt>*:nth-child(3){animation-delay:.72s}
.js-entrada .hero-txt>*:nth-child(4){animation-delay:.84s}
.js-entrada .hero-media{opacity:0;animation:sube 1.1s var(--ease) .78s forwards}
@keyframes sube{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── Aparición al desplazar ──────────────────────────────── */
.rev{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rev.visto{opacity:1;transform:none}
.rev-hijo>*{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rev-hijo.visto>*{opacity:1;transform:none}
.rev-hijo.visto>*:nth-child(1){transition-delay:.04s}
.rev-hijo.visto>*:nth-child(2){transition-delay:.12s}
.rev-hijo.visto>*:nth-child(3){transition-delay:.20s}
.rev-hijo.visto>*:nth-child(4){transition-delay:.28s}
.rev-hijo.visto>*:nth-child(5){transition-delay:.36s}
.rev-hijo.visto>*:nth-child(6){transition-delay:.44s}

.anim{opacity:0;transform:translateY(14px);animation:sube .75s var(--ease) var(--d,0ms) forwards}
.num{animation:sube .7s var(--ease) var(--d,0ms) backwards}

/* ── Rotación de biotipos en la portada ──────────────────── */
[data-rota]{transition:opacity .42s var(--ease),transform .42s var(--ease)}
[data-rota].cambia{opacity:0;transform:translateY(-9px)}

/* ── Paso de la foto ─────────────────────────────────────── */
.foto-cab{margin-bottom:var(--e5)}
.foto-cab h3{font-size:1.3rem}
.foto-privacidad{font-size:.9rem;color:var(--tx-2);background:var(--ok-vel);border-left:3px solid var(--ok);border-radius:0 var(--r2) var(--r2) 0;padding:var(--e3) var(--e4);margin:0}
.foto-zona{display:grid;gap:var(--e4);margin-bottom:var(--e4)}
.foto-drop{
  display:grid;place-items:center;gap:var(--e2);text-align:center;
  padding:var(--e7) var(--e4);cursor:pointer;
  border:1.5px dashed var(--linea-2);border-radius:var(--r3);background:var(--sup);
  transition:border-color .34s var(--ease),background .34s var(--ease),transform .34s var(--ease);
}
.foto-drop:hover{border-color:var(--vd);background:var(--vd-vel);transform:translateY(-2px)}
.foto-drop b{font-family:var(--tipo-t);font-size:1rem;color:var(--tx)}
.foto-drop small{font-size:.82rem;color:var(--tx-3);max-width:36ch}
.foto-ico{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:linear-gradient(150deg,rgba(63,185,140,.16),rgba(63,185,140,.04));border:1px solid var(--vd-borde)}
.foto-ico svg{width:30px;height:30px;overflow:visible}
.foto-vista{margin:0;display:grid;gap:var(--e3);justify-items:center}
.foto-vista img{max-height:340px;width:auto;border-radius:var(--r3);border:1px solid var(--vd-borde)}
.foto-salto{font-size:.9rem;color:var(--tx-3);margin-bottom:var(--e5)}

/* ── Horarios y telas ────────────────────────────────────── */
.horarios{list-style:none;display:grid;gap:0}
.horarios li{display:grid;grid-template-columns:140px 1fr;gap:var(--e4);padding:var(--e4) 0;border-top:1px solid var(--linea)}
.horarios li:first-child{border-top:0;padding-top:0}
.horarios b{font-family:var(--tipo-t);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--vd-suave)}
.horarios p{margin:0;font-size:.9375rem;color:var(--tx-2)}
.telas{display:grid;grid-template-columns:1fr 1fr;gap:var(--e4);margin-top:var(--e4)}
.telas h4{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--tx-3);margin-bottom:var(--e2)}

/* ── Productos, al final del recorrido ───────────────────── */
.productos{background:radial-gradient(800px 400px at 50% 0%,rgba(37,201,141,.07),transparent 68%),var(--bg-2);border-top:1px solid var(--vd-borde)}
.prods{display:grid;gap:var(--e4);margin:var(--e6) 0 var(--e4)}
.prod{
  display:grid;grid-template-columns:180px 1fr;gap:var(--e5);align-items:start;
  border:1px solid var(--linea-2);border-radius:var(--r4);padding:var(--e5);
  background:linear-gradient(180deg,var(--brillo),transparent 55%);
  transition:border-color .38s var(--ease),transform .38s var(--ease);
}
.prod:hover{border-color:var(--vd-borde);transform:translateY(-2px)}
.prod-foto{margin:0;border-radius:var(--r3);overflow:hidden;background:#050A12;border:1px solid var(--linea)}
.prod-foto img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.prod-foto-ficha{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  aspect-ratio:1;padding:var(--e4);text-align:center;
  background:linear-gradient(165deg,#0E2136,#06101C);border-color:var(--vd-borde);
}
.pf-marca{font-family:var(--tipo-t);font-size:.6rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--oro)}
.pf-nombre{font-family:var(--tipo-t);font-size:2rem;font-weight:800;color:var(--vd);line-height:1}
.pf-linea{width:34px;height:2px;background:var(--vd);opacity:.6;border-radius:2px;margin:2px 0 4px}
.pf-ing{list-style:none;display:grid;gap:3px;margin:0}
.pf-ing li{font-size:.66rem;color:var(--tx-3);line-height:1.35}
.prod-tipo{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);margin:0 0 4px}
.prod-txt h4{font-family:var(--tipo-t);font-size:1.4rem;font-weight:800;margin:0 0 var(--e3);letter-spacing:-.02em;color:var(--tx)}
.prod-motivo{color:var(--tx);font-size:.98rem;margin-bottom:var(--e3)}
.prod-puntos{list-style:none;display:grid;gap:6px;margin:0 0 var(--e3);font-size:.9rem}
.prod-puntos li{padding-left:22px;position:relative;color:var(--tx-2)}
.prod-puntos li::before{content:"\2713";position:absolute;left:0;color:var(--ok);font-weight:800}
.prod-formato{font-size:.85rem;color:var(--tx-3);margin-bottom:var(--e4)}
.prod-btns{display:flex;flex-wrap:wrap;gap:var(--e2);align-items:center}
.btn-wa{background:#22C55E;color:#052E16;border-color:#22C55E;box-shadow:0 10px 26px -12px rgba(34,197,94,.7)}
.btn-wa:hover{background:#34D36F}

@media (max-width:860px){
  .telas{grid-template-columns:1fr}
  .horarios li{grid-template-columns:1fr;gap:var(--e1)}
  .prod{grid-template-columns:1fr;gap:var(--e4)}
  .prod-foto,.prod-foto-vacia{width:min(180px,52%);margin-inline:auto}
  .prod-btns .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .brand-mark,.brand-name,.js-entrada .hero-txt>*,.js-entrada .hero-media,.anim,.num{opacity:1!important;transform:none!important;animation:none!important}
  .rev,.rev-hijo>*{opacity:1!important;transform:none!important}
  .js-entrada .brand-mark svg g path{stroke-dashoffset:0!important;animation:none!important}
}

@media print{
  body::after,.topbar,.dock,.hero,.dolor,.band.close,#faq,#para-quien,#que-recibes,#como-funciona,#test,.tabs,.productos{display:none!important}
  body{background:#fff;color:#111}
  h1,h2,h3,h4,b,strong{color:#000}
  .panel,.num,.tabla-wrap{border-color:#bbb;background:none}
  .panel-tab{display:block!important}
}