/* =============================================================
   Landing 2 — Cuenta fondeada de 200K
   El video manda: ocupa la primera pantalla completa. Todo lo
   demás existe para sostener lo que el video ya prometió.
   ============================================================= */
:root{
  --bg:#070A12; --bg2:#0B1020; --bg3:#131A2C;
  --em:#C9A961; --em-l:#E5CE99; --em-d:#8C6826;
  --verde:#25D366; --verde-d:#1c9e4d;
  --rojo:#E0533D;
  --text:#F2EFE8; --text2:#9DA4B4; --text3:#666D80;
  --line:rgba(201,169,97,.18);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,sans-serif;
  --pad:clamp(20px,5vw,56px);
  --maxw:1080px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);
  font-weight:400;line-height:1.5;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* ---------- barra superior ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(7,10,18,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.top-in{max-width:var(--maxw);margin:0 auto;padding:12px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:14px}
.marca{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.12em;
  font-size:.78rem}
.marca i{width:26px;height:26px;border:1px solid var(--em);color:var(--em);
  display:grid;place-items:center;font-style:normal;font-family:var(--serif);
  font-size:1rem;border-radius:3px}
.btn-mini{background:var(--verde);color:#052a14;font-weight:800;font-size:.76rem;
  letter-spacing:.04em;padding:10px 16px;border-radius:100px;white-space:nowrap}

/* ---------- video principal ---------- */
.hero{padding:78px 0 0}
.hero-in{display:grid;gap:clamp(20px,4vw,44px);align-items:center;
  grid-template-columns:1fr}
@media(min-width:900px){.hero-in{grid-template-columns:minmax(0,380px) 1fr}}
.video-caja{position:relative;border-radius:18px;overflow:hidden;
  border:1px solid var(--line);background:#000;
  box-shadow:0 30px 80px rgba(0,0,0,.55)}
.video-caja video{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
/* Botón para activar el sonido.

   El video arranca solo pero mudo, porque ningún navegador permite
   autoplay con audio. Se deja a la vista el botón para encenderlo:
   pedirle a la gente que dé play para arrancar hace que la mayoría
   no lo vea nunca. */
.video-son{position:absolute;left:12px;bottom:12px;z-index:3;
  background:rgba(7,10,18,.86);border:1px solid var(--line);color:var(--text);
  font-size:.8rem;font-weight:800;letter-spacing:.03em;padding:11px 17px;
  border-radius:100px;cursor:pointer;backdrop-filter:blur(10px);
  box-shadow:0 8px 26px rgba(0,0,0,.45)}
.video-son:hover{border-color:var(--em)}

.kicker{display:inline-flex;align-items:center;gap:9px;color:var(--em);
  font-size:.72rem;font-weight:800;letter-spacing:.18em;margin-bottom:16px}
.kicker::before{content:"";width:26px;height:1px;background:var(--em)}
h1{font-size:clamp(2rem,6.4vw,3.4rem);line-height:1.03;letter-spacing:-.02em;
  font-weight:800;margin-bottom:14px}
h1 span{color:var(--em)}
.bajada{color:var(--text2);font-size:clamp(1rem,2.4vw,1.14rem);max-width:46ch;
  margin-bottom:26px}

/* ---------- la oferta ---------- */
.oferta{margin-top:clamp(46px,8vw,86px)}
.precio-caja{background:linear-gradient(160deg,var(--bg3),var(--bg2));
  border:1px solid var(--line);border-radius:20px;padding:clamp(24px,5vw,44px);
  text-align:center;position:relative;overflow:hidden}
.precio-caja::before{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 50% at 50% 0%,rgba(201,169,97,.14),transparent 70%)}
.precio-caja > *{position:relative}
.antes{color:var(--text3);font-size:.9rem;letter-spacing:.1em;font-weight:700}
.precio{font-size:clamp(3.2rem,13vw,5.6rem);font-weight:800;line-height:1;
  letter-spacing:-.03em;color:var(--em);margin:6px 0 2px}
.precio small{font-size:.32em;letter-spacing:.06em;color:var(--em-l);
  vertical-align:super;font-weight:700}
.precio-pie{color:var(--text);font-size:clamp(1.05rem,3.2vw,1.5rem);font-weight:800;
  letter-spacing:-.01em}
.precio-pie b{color:var(--em)}
.unico{display:inline-block;margin-top:14px;border:1px solid var(--line);
  color:var(--text2);font-size:.78rem;font-weight:700;letter-spacing:.1em;
  padding:8px 16px;border-radius:100px}

/* ---------- beneficios ---------- */
.rejilla{display:grid;gap:14px;margin-top:26px;grid-template-columns:1fr}
@media(min-width:700px){.rejilla{grid-template-columns:repeat(2,1fr)}}
.item{display:flex;gap:14px;align-items:flex-start;background:var(--bg2);
  border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.item .tic{flex:none;width:26px;height:26px;border-radius:7px;background:var(--verde);
  display:grid;place-items:center;color:#052a14;font-weight:900;font-size:.9rem}
.item h3{font-size:1rem;font-weight:800;margin-bottom:3px;letter-spacing:-.01em}
.item p{color:var(--text2);font-size:.9rem;line-height:1.45}

/* ---------- comparativa ---------- */
.vs{margin-top:clamp(46px,8vw,86px)}
.vs-tabla{border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:var(--bg2)}
.vs-fila{display:grid;grid-template-columns:1fr 88px 88px;gap:0;
  border-bottom:1px solid var(--line);align-items:center}
@media(min-width:600px){.vs-fila{grid-template-columns:1fr 130px 130px}}
.vs-fila:last-child{border-bottom:0}
.vs-fila > *{padding:14px 16px;font-size:.9rem}
.vs-fila.enc > *{background:var(--bg3);font-weight:800;font-size:.76rem;
  letter-spacing:.08em;text-align:center;color:var(--text2)}
.vs-fila.enc > :first-child{text-align:left}
.vs-que{color:var(--text)}
.vs-si,.vs-no{text-align:center;font-weight:800}
.vs-si{color:var(--verde)}
.vs-no{color:var(--text3)}

/* ---------- comprobantes ---------- */
.pruebas{margin-top:clamp(46px,8vw,86px)}
.muro{display:grid;gap:10px;grid-template-columns:repeat(2,1fr);margin-top:22px}
@media(min-width:620px){.muro{grid-template-columns:repeat(4,1fr)}}
.muro img{border-radius:10px;border:1px solid var(--line);aspect-ratio:1;
  object-fit:cover;background:var(--bg3)}
.cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
.cifra{background:var(--bg2);border:1px solid var(--line);border-radius:14px;
  padding:18px 12px;text-align:center}
.cifra b{display:block;font-size:clamp(1.4rem,5vw,2.1rem);color:var(--em);
  font-weight:800;line-height:1}
.cifra span{display:block;color:var(--text2);font-size:.74rem;margin-top:6px;
  letter-spacing:.04em}

/* ---------- garantía ---------- */
.garantia{margin-top:clamp(46px,8vw,86px);
  background:linear-gradient(150deg,rgba(37,211,102,.10),transparent);
  border:1px solid rgba(37,211,102,.30);border-radius:20px;
  padding:clamp(22px,4vw,38px);display:flex;gap:18px;align-items:flex-start}
.garantia .esc{flex:none;width:44px;height:44px;border-radius:12px;
  background:var(--verde);display:grid;place-items:center;color:#052a14;
  font-size:1.3rem;font-weight:900}
.garantia h3{font-size:clamp(1.1rem,3vw,1.4rem);font-weight:800;margin-bottom:6px}
.garantia p{color:var(--text2);font-size:.95rem}

/* ---------- cuenta regresiva ---------- */
.urge{margin-top:clamp(46px,8vw,86px);text-align:center;
  border:1px solid rgba(224,83,61,.34);border-radius:20px;
  background:linear-gradient(150deg,rgba(224,83,61,.10),transparent);
  padding:clamp(24px,5vw,40px)}
.urge .eti{color:var(--rojo);font-size:.76rem;font-weight:800;letter-spacing:.16em}
.urge h2{font-size:clamp(1.5rem,5vw,2.3rem);font-weight:800;margin:10px 0 20px;
  letter-spacing:-.02em}
.reloj{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.uni{background:var(--bg);border:1px solid var(--line);border-radius:14px;
  min-width:76px;padding:14px 10px}
.uni b{display:block;font-size:clamp(1.7rem,6vw,2.4rem);font-weight:800;
  color:var(--text);line-height:1;font-variant-numeric:tabular-nums}
.uni span{display:block;color:var(--text3);font-size:.68rem;letter-spacing:.12em;
  margin-top:6px}

/* ---------- llamada final ---------- */
.cta{margin:clamp(34px,6vw,60px) 0 0;text-align:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;
  background:var(--verde);color:#052a14;font-weight:900;
  font-size:clamp(1rem,3vw,1.16rem);letter-spacing:.01em;
  padding:20px 36px;border-radius:100px;width:100%;max-width:460px;
  box-shadow:0 16px 44px rgba(37,211,102,.28);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 22px 56px rgba(37,211,102,.36)}
.btn svg{width:22px;height:22px;flex:none}
.cta-nota{color:var(--text3);font-size:.84rem;margin-top:14px}

/* ---------- barra fija móvil ---------- */
.fija{position:fixed;left:0;right:0;bottom:0;z-index:70;padding:10px var(--pad)
  calc(10px + env(safe-area-inset-bottom));
  background:rgba(7,10,18,.94);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);transform:translateY(110%);
  transition:transform .35s cubic-bezier(.16,1,.3,1)}
.fija.ver{transform:translateY(0)}
.fija .btn{padding:15px 24px;font-size:.98rem;max-width:none}

/* ---------- pie ---------- */
footer{margin-top:clamp(50px,8vw,90px);padding:30px 0 120px;
  border-top:1px solid var(--line)}
.aviso{color:var(--text3);font-size:.74rem;line-height:1.6;max-width:70ch}
.aviso b{color:var(--text2)}
.pie-links{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:16px;
  font-size:.82rem;color:var(--text2)}

h2.tit{font-size:clamp(1.5rem,5vw,2.3rem);font-weight:800;letter-spacing:-.02em;
  margin-bottom:8px}
p.sub{color:var(--text2);font-size:clamp(.95rem,2.4vw,1.05rem);max-width:52ch}