/* Hipnozia — embudo. Mobile-first: el 99,7% del tráfico es celular. */
:root{
  --teal:#038885; --teal-dark:#026E6B; --teal-soft:#E6F4F3; --teal-glow:rgba(3,136,133,.16);
  --ink:#0B1A24; --ink-2:#4A6270; --line:#E2ECEF; --bg:#FBFDFF; --white:#fff;
  --rojo:#DC2626; --verde:#16A34A; --amarillo:#F5A524;
  --r:16px; --r-lg:22px; --h:58px;
  --max:520px;
  --shadow:0 1px 2px rgba(11,26,36,.04), 0 8px 24px rgba(11,26,36,.06);
  --shadow-lg:0 2px 4px rgba(11,26,36,.05), 0 18px 40px rgba(11,26,36,.10);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- cabecera fija: logo + progreso ---------- */
.top{position:sticky;top:0;z-index:50;background:rgba(251,253,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{max-width:var(--max);margin:0 auto;padding:12px 18px 10px;display:flex;align-items:center;gap:12px;min-height:56px}
.back{width:34px;height:34px;margin-left:-6px;border-radius:50%;display:none;align-items:center;justify-content:center;flex:0 0 34px;transition:background .15s}
.back:active{background:var(--teal-soft)}
.back svg{width:20px;height:20px;stroke:var(--ink-2)}
.top.has-back .back{display:flex}
.logo{height:26px;width:auto;margin:0 auto}
.top.has-back .logo{margin-right:auto;margin-left:0}
.bar{height:3px;background:var(--line);position:relative;overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--teal),#2BC0BC);border-radius:0 3px 3px 0;transition:width .45s cubic-bezier(.22,1,.36,1)}

/* ---------- pantallas ---------- */
.screen{display:none;scroll-margin-top:90px;max-width:var(--max);margin:0 auto;padding:22px 18px 40px;animation:in .38s cubic-bezier(.22,1,.36,1) both}
.screen.on{display:block}
@keyframes in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.screen{animation:none}*{transition:none!important}}

/* ---------- tipografía ---------- */
h1,h2{font-weight:800;letter-spacing:-.02em;line-height:1.18;text-wrap:balance}
h1{font-size:26px;margin-bottom:10px}
h2{font-size:21px;margin-bottom:8px}
.q{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.24;margin-bottom:6px;text-wrap:balance}
.sub{font-size:15px;color:var(--ink-2);margin-bottom:18px}
.txt{font-size:16px;color:var(--ink-2);margin-bottom:16px}
.txt strong{color:var(--ink);font-weight:700}
.center{text-align:center}
.teal{color:var(--teal)}
.kicker{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:8px}

/* ---------- opciones ---------- */
.opts{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.opt{
  display:flex;align-items:center;gap:12px;width:100%;min-height:var(--h);
  padding:14px 16px;background:var(--white);border:1.5px solid var(--line);
  border-radius:var(--r);text-align:left;font-size:16px;font-weight:600;
  box-shadow:var(--shadow);transition:transform .12s,border-color .15s,background .15s,box-shadow .15s;
}
.opt:active{transform:scale(.985)}
.opt .lbl{flex:1}
.opt .mark{flex:0 0 22px;width:22px;height:22px;border-radius:7px;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;transition:all .15s}
.opt .mark svg{width:13px;height:13px;stroke:#fff;stroke-width:3.4;opacity:0;transform:scale(.6);transition:all .18s}
.opt.sel{border-color:var(--teal);background:var(--teal-soft);box-shadow:0 0 0 3px var(--teal-glow)}
.opt.sel .mark{background:var(--teal);border-color:var(--teal)}
.opt.sel .mark svg{opacity:1;transform:none}
.opt .arrow{flex:0 0 22px;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center}
.opt .arrow svg{width:12px;height:12px;stroke:var(--ink-2);stroke-width:2.5}

/* ---------- botón ---------- */
.cta{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:var(--h);
  background:var(--teal);color:#fff;border-radius:var(--r);font-size:16px;font-weight:800;
  letter-spacing:.01em;box-shadow:0 8px 20px rgba(3,136,133,.28);transition:transform .12s,filter .15s,opacity .2s;
  padding:16px 20px;text-align:center;text-decoration:none;
}
.cta:active{transform:translateY(1px)}
.cta[disabled]{opacity:.38;box-shadow:none;pointer-events:none}
.cta.buy{font-size:17px;line-height:1.25;background:linear-gradient(180deg,#04A19D,var(--teal));animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 8px 20px rgba(3,136,133,.28)}50%{box-shadow:0 8px 30px rgba(3,136,133,.5)}}
.sticky{position:sticky;bottom:0;padding:12px 0 calc(12px + env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,var(--bg) 28%)}

/* ---------- tarjetas / imágenes ---------- */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow);margin-bottom:16px}
.fig{border-radius:var(--r-lg);overflow:hidden;margin:0 auto 18px;box-shadow:var(--shadow)}
.fig.plain{box-shadow:none;border-radius:0}
.fig img{width:100%}
.icon-row{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.icon-row img{flex:0 0 44px;width:44px}
.icon-row p{font-size:15px;color:var(--ink-2)}
.pill{display:inline-flex;align-items:center;gap:7px;background:var(--teal-soft);color:var(--teal-dark);border-radius:999px;padding:7px 14px;font-size:13.5px;font-weight:700;margin-bottom:14px}

/* ---------- alertas del plan ---------- */
.alert{display:flex;gap:11px;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:12px;padding:13px 14px;margin-bottom:9px;font-size:14.5px;box-shadow:var(--shadow)}
.alert svg{flex:0 0 19px;width:19px;height:19px;stroke:var(--teal);margin-top:1px}
.alert b{font-weight:800}

/* ---------- medidas ---------- */
.metric{display:flex;align-items:center;gap:10px;background:var(--white);border:1.5px solid var(--line);border-radius:var(--r);padding:8px 8px 8px 18px;margin-bottom:14px;box-shadow:var(--shadow);transition:border-color .15s,box-shadow .15s}
.metric:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-glow)}
.metric input{flex:1;min-width:0;border:0;outline:0;font-size:26px;font-weight:800;background:none;color:var(--ink);-moz-appearance:textfield;padding:8px 0}
.metric input::-webkit-outer-spin-button,.metric input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.metric .u{flex:0 0 auto;background:var(--teal-soft);color:var(--teal-dark);font-weight:800;font-size:14px;border-radius:11px;padding:11px 15px}

/* ---------- gráfico ---------- */
.chart{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 14px 12px;box-shadow:var(--shadow);margin-bottom:14px}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .lbl{font-size:10.5px;font-weight:600;fill:var(--ink-2)}
.chart path.ln{fill:none;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.on .chart path.ln{animation:draw 1.5s cubic-bezier(.4,0,.2,1) .25s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.chart .dot{opacity:0}
.on .chart .dot{animation:pop .4s cubic-bezier(.34,1.56,.64,1) 1.5s forwards}
@keyframes pop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
.chart .tip{font-size:10px;font-weight:800;fill:var(--teal-dark)}
.legend{display:flex;flex-direction:column;gap:7px;font-size:14px;font-weight:600;margin-bottom:16px}
.legend span{display:flex;align-items:center;gap:9px}
.legend i{width:11px;height:11px;border-radius:50%;flex:0 0 11px}

/* ---------- loading ---------- */
.load{margin-bottom:22px}
.load .hd{display:flex;justify-content:space-between;font-size:14.5px;font-weight:700;margin-bottom:8px}
.load .hd em{font-style:normal;color:var(--teal);font-variant-numeric:tabular-nums}
.load .tr{height:8px;background:var(--line);border-radius:99px;overflow:hidden}
.load .tr i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),#2BC0BC);border-radius:99px;transition:width .25s linear}
.load.done .hd em{color:var(--verde)}

/* ---------- precio ---------- */
.price{background:linear-gradient(160deg,#0C2430,#071720);color:#fff;border-radius:var(--r-lg);padding:22px 20px;text-align:center;box-shadow:var(--shadow-lg);margin-bottom:14px;position:relative;overflow:hidden}
.price::before{content:"";position:absolute;left:-70px;top:-90px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(43,192,188,.25),transparent 70%)}
.price>*{position:relative}
.price .tag{display:inline-block;background:var(--verde);color:#fff;font-size:12px;font-weight:800;letter-spacing:.06em;border-radius:999px;padding:6px 13px;margin-bottom:12px}
.price .off{font-size:13px;font-weight:800;color:#2BC0BC;letter-spacing:.08em;text-transform:uppercase}
.price .big{font-size:42px;font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:4px 0 2px}
.price .cuotas{font-size:14px;opacity:.85;font-weight:600}
.tachado{font-size:15px;color:var(--ink-2);text-align:center;margin-bottom:6px}
.tachado s{text-decoration-color:var(--rojo);text-decoration-thickness:2px}

/* ---------- timer ---------- */
.timer{display:flex;align-items:center;justify-content:center;gap:9px;background:#FFF1F1;border:1px solid #FFD9D9;color:#A31212;border-radius:12px;padding:11px 14px;font-size:14px;font-weight:700;margin-bottom:16px}
.timer b{font-variant-numeric:tabular-nums;font-size:16px;font-weight:800}
.timer svg{width:17px;height:17px;stroke:#A31212;flex:0 0 17px}

/* ---------- carrusel ---------- */
.car{margin:0 -18px 18px;padding:0 18px;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.car::-webkit-scrollbar{display:none}
.car .it{flex:0 0 78%;max-width:300px;scroll-snap-align:center;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.car .it img{width:100%;aspect-ratio:1/1;object-fit:cover}
.car .it .cap{padding:13px 14px;font-size:14px;line-height:1.45;text-align:center;color:var(--ink-2)}
.car .it .cap strong{color:var(--ink)}
.dots{display:flex;justify-content:center;gap:6px;margin:-8px 0 18px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--line);transition:all .25s}
.dots i.on{background:var(--teal);width:18px;border-radius:3px}

/* ---------- FAQ ---------- */
.faq{border:1px solid var(--line);border-radius:var(--r);background:var(--white);overflow:hidden;margin-bottom:10px;box-shadow:var(--shadow)}
.faq summary{list-style:none;padding:16px;font-weight:700;font-size:15.5px;display:flex;justify-content:space-between;gap:12px;align-items:center;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex:0 0 18px;width:18px;height:18px;stroke:var(--teal);transition:transform .25s}
.faq[open] summary svg{transform:rotate(45deg)}
.faq .a{padding:0 16px 16px;font-size:14.5px;color:var(--ink-2);line-height:1.6}

/* ---------- varios ---------- */
.mini{font-size:12.5px;color:var(--ink-2);text-align:center;margin-top:12px;line-height:1.55}
.sep{height:1px;background:var(--line);margin:26px 0}
.stack>*+*{margin-top:12px}
.logos{opacity:.72;margin:6px auto 18px;max-width:300px}
.garantia{max-width:150px;margin:0 auto 14px}
@media (min-width:560px){
  h1{font-size:30px}.q{font-size:25px}
  .screen{padding:30px 18px 48px}
}

/* ═══════════ mejoras de diseño ═══════════ */

/* bordes difuminados en las fotos */
/* Difuminado por MÁSCARA (la imagen se vuelve transparente), no por velo encima:
   un velo blanco sobre una foto oscura no la funde, sólo la aclara y deja el
   borde duro. La rampa tiene varios pasos para que no se vea el corte.
   Sólo vertical: arriba y abajo. Los costados quedan a full. */
.fig.fade,.fig.soft{box-shadow:none;border-radius:0;background:none;overflow:visible}
.fig.fade::after,.fig.soft::after{content:none}
.fig.fade img,.fig.soft img{
  -webkit-mask-image:linear-gradient(180deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.04) 2%, rgba(0,0,0,.14) 4%, rgba(0,0,0,.33) 6%,
    rgba(0,0,0,.58) 8%, rgba(0,0,0,.8) 10%, rgba(0,0,0,.94) 12%, rgba(0,0,0,1) 15%,
    rgba(0,0,0,1) 85%, rgba(0,0,0,.94) 88%, rgba(0,0,0,.8) 90%, rgba(0,0,0,.58) 92%,
    rgba(0,0,0,.33) 94%, rgba(0,0,0,.14) 96%, rgba(0,0,0,.04) 98%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(180deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.04) 2%, rgba(0,0,0,.14) 4%, rgba(0,0,0,.33) 6%,
    rgba(0,0,0,.58) 8%, rgba(0,0,0,.8) 10%, rgba(0,0,0,.94) 12%, rgba(0,0,0,1) 15%,
    rgba(0,0,0,1) 85%, rgba(0,0,0,.94) 88%, rgba(0,0,0,.8) 90%, rgba(0,0,0,.58) 92%,
    rgba(0,0,0,.33) 94%, rgba(0,0,0,.14) 96%, rgba(0,0,0,.04) 98%, rgba(0,0,0,0) 100%)}

/* ── radar de la prueba social ── */
.radar{position:relative;width:min(300px,84vw);aspect-ratio:1;margin:4px auto 34px;display:grid;place-items:center}
.radar .ring{position:absolute;border-radius:50%;border:1.5px dashed rgba(3,136,133,.28)}
.radar .r1{inset:31%}.radar .r2{inset:16%}.radar .r3{inset:1%}
.radar .sweep{position:absolute;inset:1%;border-radius:50%;
  background:conic-gradient(from 0deg, rgba(3,136,133,.22), rgba(3,136,133,0) 42%);
  animation:sweep 5s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.radar .hub{position:relative;width:38%;aspect-ratio:1;border-radius:50%;overflow:hidden;
  border:4px solid var(--teal);box-shadow:0 0 0 7px rgba(3,136,133,.13),0 12px 26px rgba(3,136,133,.22);z-index:2}
.radar .hub img{width:100%;height:100%;object-fit:cover}
.radar .av{position:absolute;width:19%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:3px solid #fff;
  box-shadow:0 5px 14px rgba(11,26,36,.2);animation:float 4.5s ease-in-out infinite}
.radar .av img{width:100%;height:100%;object-fit:cover}
.radar .av.s{width:13%;border-width:2.5px;opacity:.92}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.radar .cnt{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);z-index:3;
  background:var(--teal);color:#fff;border-radius:999px;padding:7px 15px;font-size:13px;font-weight:800;
  box-shadow:0 8px 20px rgba(3,136,133,.32);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.radar .sweep,.radar .av{animation:none}}

/* ── carrusel infinito de logos de prensa ── */
.marq{--gap:34px;overflow:hidden;margin:2px -18px 20px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marq .tr{display:flex;gap:var(--gap);width:max-content;animation:marq 26s linear infinite}
.marq:hover .tr{animation-play-state:paused}
.marq img{height:26px;width:auto;opacity:.62;filter:grayscale(1)}
@keyframes marq{to{transform:translateX(calc(-50% - var(--gap)/2))}}
@media (prefers-reduced-motion:reduce){.marq .tr{animation:none}}

/* ── aviso (reemplaza el PNG de la diana) ── */
.aviso{display:flex;gap:13px;align-items:flex-start;background:linear-gradient(135deg,#EAF3FF,#F4F8FF);
  border:1px solid #D6E4F7;border-radius:var(--r-lg);padding:16px 17px;margin-bottom:16px}
.aviso .ic{flex:0 0 38px;width:38px;height:38px;border-radius:12px;background:#fff;display:grid;place-items:center;
  box-shadow:0 3px 10px rgba(11,26,36,.08)}
.aviso .ic svg{width:21px;height:21px;stroke:#2563EB;fill:none;stroke-width:2}
.aviso p{font-size:14.5px;line-height:1.5;color:#1E3A5F}
.aviso b{display:block;font-weight:800;color:#0B2545;margin-bottom:2px}

/* ── tarjetas con ícono (reemplazan capturas de pantalla) ── */
.tarj{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;
  display:flex;gap:15px;align-items:flex-start;box-shadow:var(--shadow);margin-bottom:12px}
.tarj .ic{flex:0 0 46px;width:46px;height:46px;border-radius:14px;display:grid;place-items:center}
.tarj .ic svg{width:26px;height:26px;fill:none;stroke-width:1.9}
.tarj h3{font-size:17.5px;font-weight:800;letter-spacing:-.01em;margin-bottom:5px;line-height:1.25}
.tarj p{font-size:14.5px;color:var(--ink-2);line-height:1.5}
.ic-verde{background:#E8F6EE}.ic-verde svg{stroke:#16A34A}
.ic-rosa{background:#FDEBEF}.ic-rosa svg{stroke:#E35D75}
.ic-teal{background:var(--teal-soft)}.ic-teal svg{stroke:var(--teal)}
.ic-ambar{background:#FEF3E2}.ic-ambar svg{stroke:#D98324}

/* ── IMC personalizado ── */
.imc{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow);margin-bottom:12px}
.imc h3{font-size:16px;font-weight:800;margin-bottom:14px}
.imc .esc{position:relative;height:11px;border-radius:99px;margin:74px 0 8px;
  background:linear-gradient(90deg,#4F8DF7 0%,#5BC0A8 28%,#8CC152 46%,#F5C33B 64%,#EE8B3F 80%,#E5533E 100%)}
.imc .pin{position:absolute;top:50%;width:20px;height:20px;border-radius:50%;background:#fff;
  border:4px solid var(--teal);transform:translate(-50%,-50%);box-shadow:0 3px 10px rgba(11,26,36,.2);
  transition:left 1.1s cubic-bezier(.22,1,.36,1)}
.imc .globo{position:absolute;bottom:26px;transform:translateX(-50%);background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:8px 13px;text-align:center;box-shadow:var(--shadow);white-space:nowrap;
  transition:left 1.1s cubic-bezier(.22,1,.36,1)}
.imc .globo b{display:block;font-size:13.5px;font-weight:800;letter-spacing:.02em}
.imc .globo span{font-size:11.5px;color:var(--ink-2)}
.imc .num{display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:var(--ink-2)}
.imc .val{text-align:center;font-size:13.5px;color:var(--ink-2);margin-top:10px}
.imc .val b{color:var(--ink);font-weight:800}

/* ── bloques de texto de las pantallas de argumento ── */
.lead2{font-size:17.5px;line-height:1.52;color:var(--ink);font-weight:600;margin-bottom:14px;text-wrap:pretty}
.bloque{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 17px;box-shadow:var(--shadow);margin-bottom:18px}
.bloque p{font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.nota{display:flex;gap:11px;background:var(--teal-soft);border-radius:var(--r);padding:14px 15px;margin-bottom:18px}
.nota svg{flex:0 0 18px;width:18px;height:18px;stroke:var(--teal);fill:none;stroke-width:2;margin-top:2px}
.nota p{font-size:14.5px;line-height:1.52;color:#14514F}

/* ── imagen de la primera pantalla: sangra y se funde con el fondo ── */
.hero{margin:22px -18px -30px;position:relative;box-shadow:none;border-radius:0}
.hero{overflow:visible}
.hero::after{content:none}
.hero img{width:100%;aspect-ratio:5/4;object-fit:cover;object-position:50% 38%;
  -webkit-mask-image:linear-gradient(180deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 3%, rgba(0,0,0,.24) 6%, rgba(0,0,0,.55) 9%,
    rgba(0,0,0,.85) 12%, rgba(0,0,0,1) 16%, rgba(0,0,0,1) 72%, rgba(0,0,0,.9) 80%,
    rgba(0,0,0,.65) 87%, rgba(0,0,0,.34) 93%, rgba(0,0,0,.1) 97%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(180deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 3%, rgba(0,0,0,.24) 6%, rgba(0,0,0,.55) 9%,
    rgba(0,0,0,.85) 12%, rgba(0,0,0,1) 16%, rgba(0,0,0,1) 72%, rgba(0,0,0,.9) 80%,
    rgba(0,0,0,.65) 87%, rgba(0,0,0,.34) 93%, rgba(0,0,0,.1) 97%, rgba(0,0,0,0) 100%)}
/* la flecha de las opciones, en el color de la marca */
#p0 .opt{min-height:64px;font-size:17px}
#p0 .opt .arrow{border-color:var(--teal);background:var(--teal-soft)}
#p0 .opt .arrow svg{stroke:var(--teal)}
#p0 .opt:active .arrow{background:var(--teal)}
#p0 .opt:active .arrow svg{stroke:#fff}


/* ── panel de plan personalizado ── */
.plan{background:linear-gradient(160deg,#0E3B33,#0A2B26);border-radius:var(--r-lg);overflow:hidden;
  margin:2px 0 20px;box-shadow:0 14px 34px rgba(10,43,38,.22)}
.plan-hd{display:flex;align-items:center;gap:9px;background:rgba(46,217,198,.14);color:#6EE7D6;
  font-size:11.5px;font-weight:800;letter-spacing:.14em;padding:11px 16px;border-bottom:1px solid rgba(110,231,214,.18)}
.plan-hd .dot{width:8px;height:8px;border-radius:50%;background:#34D399;box-shadow:0 0 0 0 rgba(52,211,153,.7);
  animation:latido 1.8s ease-out infinite}
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(52,211,153,.7)}70%{box-shadow:0 0 0 9px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.plan-bd{list-style:none;padding:6px 16px 14px}
.plan-bd li{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.plan-bd li:last-child{border-bottom:0}
.plan-bd svg{flex:0 0 18px;width:18px;height:18px;stroke:#34D399;fill:none;stroke-width:2;margin-top:2px}
.plan-bd b{display:block;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#7FB8AE;margin-bottom:2px}
.plan-bd span{display:block;font-size:14.5px;line-height:1.42;color:#EAF6F3;font-weight:600}
@media (prefers-reduced-motion:reduce){.plan-hd .dot{animation:none}}

/* ── leyenda del gráfico ── */
.leg2{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:-2px 0 18px}
.leg2 div{border-radius:14px;padding:11px 12px;border:1.5px solid}
.leg2 .v{background:#EAF7EF;border-color:#BCE5CB}
.leg2 .r{background:#FDEDEC;border-color:#F6CFCB}
.leg2 b{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:800;margin-bottom:2px}
.leg2 b i{width:9px;height:9px;border-radius:50%;flex:0 0 9px}
.leg2 .v b{color:#15803D} .leg2 .v b i{background:#16A34A}
.leg2 .r b{color:#B42318} .leg2 .r b i{background:#DC2626}
.leg2 span{font-size:12.5px;line-height:1.38;color:var(--ink-2);display:block}

/* ── IMC en rojo cuando está alto ── */
.imc.alto .pin{border-color:var(--rojo)}
.imc.alto .globo{border-color:#F6CFCB;background:#FDEDEC}
.imc.alto .globo b{color:#B42318}
.imc .val b.mal{color:var(--rojo)}
.imc .estado{display:inline-flex;align-items:center;gap:6px;background:#FDEDEC;color:#B42318;border:1px solid #F6CFCB;
  border-radius:999px;padding:5px 11px;font-size:12px;font-weight:800;margin-top:10px}
.imc .estado svg{width:13px;height:13px;stroke:#B42318;fill:none;stroke-width:2.4}
.edadmet{font-size:21px;font-weight:800;color:var(--rojo);letter-spacing:-.02em;margin:2px 0 8px;line-height:1.15}

/* ── lista de lo que incluye el programa ── */
.incluye{list-style:none;display:flex;flex-direction:column;gap:10px;margin:2px 0 20px}
.incluye li{display:flex;gap:12px;align-items:flex-start;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:14px 15px;box-shadow:var(--shadow)}
.incluye .tk{flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--teal);display:grid;place-items:center;margin-top:1px}
.incluye .tk svg{width:13px;height:13px;stroke:#fff;stroke-width:3.4}
.incluye b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.01em;margin-bottom:3px}
.incluye span{display:block;font-size:14px;line-height:1.48;color:var(--ink-2)}

/* ═══════════ pantalla de oferta ═══════════ */

/* el verde del plan, más suave */
.plan{background:linear-gradient(160deg,#F2FAF7,#E9F6F1);box-shadow:0 8px 24px rgba(11,26,36,.07);border:1px solid #CFE9DF}
.plan-hd{background:#DFF3EA;color:#1A6B58;border-bottom:1px solid #CFE9DF}
.plan-bd li{border-bottom:1px solid #DDEDE6}
.plan-bd b{color:#4E8877}
.plan-bd span{color:#173D33}

/* barra de descuento fija arriba de todo, y el logo debajo */
body.oferta{padding-top:46px}
body.oferta .top{top:46px}
[data-oferta] .timer{position:fixed;top:0;left:0;right:0;z-index:70;margin:0;border-radius:0;border:0;
  border-bottom:1px solid #F3C9C9;justify-content:center;padding:13px 14px;
  box-shadow:0 2px 12px rgba(163,18,18,.10)}
body.oferta .back{display:none!important}

/* valor total y descuento */
.valor{text-align:center;margin:6px 0 14px}
.valor .ap{display:inline-flex;align-items:center;gap:7px;background:#E8F6EE;color:#15803D;border:1px solid #BCE5CB;
  border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:800;letter-spacing:.06em;margin-bottom:12px}
.valor .ap svg{width:14px;height:14px;stroke:#15803D;fill:none;stroke-width:3}
.valor .tot{font-size:15px;color:var(--ink-2);font-weight:600}
.valor .tot s{text-decoration-color:var(--rojo);text-decoration-thickness:2px}
.valor .hoy{font-size:14px;font-weight:700;color:var(--ink-2);margin-top:10px}
.valor .num{font-size:40px;font-weight:800;letter-spacing:-.03em;color:var(--teal-dark);line-height:1.05}
.valor .num small{font-size:16px;font-weight:700;color:var(--ink-2);letter-spacing:0}

/* caja de la cuota, sin el 70% que confundía */
.price .cuotas-hd{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.8;margin-bottom:2px}
.price .big{font-size:38px}
.price .cuotas b{color:#2BC0BC}

/* botón que late más fuerte */
.cta.buy{animation:latir 1.9s ease-in-out infinite}
@keyframes latir{0%,100%{transform:scale(1);box-shadow:0 8px 20px rgba(3,136,133,.30)}
  50%{transform:scale(1.018);box-shadow:0 10px 34px rgba(3,136,133,.55)}}
@media (prefers-reduced-motion:reduce){.cta.buy{animation:none}}

/* "¿Cómo funciona?" más chico */
.q.chico{font-size:19px;margin:28px 0 14px}

/* garantía más chica */
.garantia-ch{max-width:112px;margin:16px auto 10px;box-shadow:none;background:none}
.garantia-ch::after{display:none}

/* captura de la app */
.app{background:linear-gradient(165deg,#0E2A24,#071720 60%);border-radius:var(--r-lg);padding:16px 10px 0;
  margin:20px 0 18px;overflow:hidden;box-shadow:var(--shadow-lg);position:relative}
.app::before{content:"";position:absolute;left:50%;top:-40px;width:280px;height:280px;transform:translateX(-50%);
  border-radius:50%;background:radial-gradient(circle,rgba(46,217,198,.20),transparent 70%)}
.app-hd{color:#6EE7D6;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-align:center;margin-bottom:12px}
.app img{position:relative;width:100%;display:block;margin-bottom:-4%}

/* pasos numerados de "¿Cómo funciona?" */
.paso{display:flex;align-items:center;gap:13px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:12px 14px;margin-bottom:10px;box-shadow:var(--shadow)}
.paso .n{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:var(--teal);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:800}
.paso img{flex:0 0 38px;width:38px;height:auto}
.paso p{font-size:14.5px;line-height:1.42;color:var(--ink-2)}
.ico{width:44px;height:auto;margin:0 auto 10px}


/* la pantalla de oferta no anima transform: si no, el contenedor rompe el
   position:fixed de la barra de descuento */
.screen[data-oferta]{animation:aparecer .3s ease both}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
body.oferta .screen[data-oferta]{padding-top:14px}


/* la barra fija tiene que entrar en una línea en 375px */
[data-oferta] .timer{font-size:12.5px;gap:8px;padding:0 12px;min-height:46px;flex-wrap:nowrap;text-align:left}
[data-oferta] .timer span{line-height:1.2}
[data-oferta] .timer b{font-size:15px;white-space:nowrap;margin-left:auto}
[data-oferta] .timer svg{width:15px;height:15px}