/* ViraLab MX — estilos compartidos de las landings. Mobile-first. */
:root{
  --y:#FDD007; --y2:#ffe45a; --negro:#000; --blanco:#fff;
  --bg:#0a0a0a; --alt:#121212; --card:#171717; --ink:#fff; --muted:#bdbdbd; --line:rgba(255,255,255,.1);
  --acc:#FDD007; --acc-soft:rgba(253,208,7,.14); --hero:radial-gradient(120% 70% at 50% 0%,#2b2300 0%,#0a0a0a 62%);
  --r:18px; --sh:0 18px 40px -18px rgba(0,0,0,.45);
  --f:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
/* Temas por página (mismo ADN de marca, distinto tono) */
.t-noche{--bg:#0a0a0a;--alt:#111;--card:#181818;--ink:#fff;--muted:#c2c2c2;--acc:#FDD007;--acc-soft:rgba(253,208,7,.13);--hero:radial-gradient(120% 75% at 70% 0%,#3a2a00 0%,#0a0a0a 60%)}
.t-lavanda{--bg:#13112a;--alt:#1a1735;--card:#221e42;--ink:#f5f2ff;--muted:#bdb6de;--line:rgba(255,255,255,.1);--acc:#bfaeff;--acc-soft:rgba(191,174,255,.15);--hero:radial-gradient(110% 70% at 20% 0%,#3b2f78 0%,#13112a 62%)}
.t-menta{--bg:#f4fbf8;--alt:#e6f5ef;--card:#fff;--ink:#0e2924;--muted:#4b6a64;--line:rgba(14,41,36,.1);--acc:#0c8f6f;--acc-soft:rgba(12,143,111,.12);--hero:linear-gradient(180deg,#dff4ec 0%,#f4fbf8 100%);--sh:0 18px 40px -22px rgba(14,41,36,.35)}
.t-clinico{--bg:#f7fbff;--alt:#eaf3fc;--card:#fff;--ink:#0c1e33;--muted:#4b6078;--line:rgba(12,30,51,.1);--acc:#1b67cf;--acc-soft:rgba(27,103,207,.1);--hero:radial-gradient(120% 70% at 80% 0%,#d7e9fb 0%,#f7fbff 60%);--sh:0 18px 40px -22px rgba(12,30,51,.3)}
.t-crema{--bg:#fbf7f0;--alt:#f3eadb;--card:#fff;--ink:#2a2118;--muted:#6d5f4e;--line:rgba(42,33,24,.1);--acc:#2c69b6;--acc-soft:rgba(44,105,182,.1);--hero:linear-gradient(160deg,#f2e5cf 0%,#fbf7f0 55%,#e8f1fb 100%);--sh:0 18px 40px -22px rgba(42,33,24,.3)}
.t-verde{--bg:#f5fcf1;--alt:#e6f4dc;--card:#fff;--ink:#13301d;--muted:#4c6a55;--line:rgba(19,48,29,.1);--acc:#23803a;--acc-soft:rgba(35,128,58,.1);--hero:radial-gradient(120% 70% at 20% 0%,#d6f2c2 0%,#f5fcf1 60%);--sh:0 18px 40px -22px rgba(19,48,29,.3)}
.t-sol{--bg:#fff9ef;--alt:#ffeed3;--card:#fff;--ink:#2b1906;--muted:#735a3b;--line:rgba(43,25,6,.1);--acc:#d95f00;--acc-soft:rgba(217,95,0,.1);--hero:radial-gradient(120% 70% at 85% 0%,#ffd98a 0%,#fff9ef 58%);--sh:0 18px 40px -22px rgba(43,25,6,.3)}
.t-grafito{--bg:#0c1016;--alt:#121923;--card:#18212d;--ink:#eef4fb;--muted:#a3b3c6;--acc:#22d3ee;--acc-soft:rgba(34,211,238,.12);--hero:radial-gradient(120% 70% at 80% 0%,#15384a 0%,#0c1016 60%)}
.t-neon{--bg:#0d0918;--alt:#140e25;--card:#1c1533;--ink:#f6f1ff;--muted:#b9acd9;--acc:#c78bff;--acc-soft:rgba(199,139,255,.14);--hero:radial-gradient(120% 70% at 50% 0%,#3d1780 0%,#0d0918 62%)}
.t-oceano{--bg:#0a1926;--alt:#0f2436;--card:#142e46;--ink:#eaf6ff;--muted:#a3c2d8;--acc:#5ee7ff;--acc-soft:rgba(94,231,255,.12);--hero:radial-gradient(120% 70% at 30% 0%,#12506b 0%,#0a1926 62%)}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f);background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ico{width:24px;height:24px;flex:none}

/* Encabezado */
.top{position:sticky;top:0;z-index:30;background:#000;backdrop-filter:saturate(1.4) blur(8px);-webkit-backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid rgba(255,255,255,.08)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;gap:12px}
.top .logo img{height:32px;width:auto;mix-blend-mode:lighten}
.top .mini{font-size:.8rem;font-weight:800;text-decoration:none;color:#000;background:var(--y);padding:9px 14px;border-radius:999px;white-space:nowrap}

/* Hero */
.hero{background:var(--hero);padding:28px 0 44px;position:relative;overflow:hidden}
.hero .grid{display:grid;gap:28px;align-items:center}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:999px;line-height:1}
.pill.y{background:var(--y);color:#000}
.pill.o{border:1px solid var(--line);background:var(--acc-soft);color:var(--ink)}
.pill .ico{width:14px;height:14px}
.kicker{font-size:.85rem;font-weight:700;color:var(--acc);letter-spacing:.02em;margin-bottom:8px}
h1{font-size:clamp(2rem,8.6vw,3.5rem);line-height:1.04;font-weight:900;letter-spacing:-.025em}
h1 em{font-style:normal;color:var(--acc);background:linear-gradient(transparent 62%,var(--acc-soft) 62%)}
.t-noche h1 em{color:var(--y)}
.lead{margin-top:14px;font-size:1.06rem;color:var(--muted);max-width:40em}

.price{margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 16px 18px;box-shadow:var(--sh)}
.price .lbl{font-size:.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.price .row{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin-top:4px}
.price .now{font-size:clamp(2.2rem,11vw,3rem);font-weight:900;letter-spacing:-.03em;line-height:1}
.price .now sup{font-size:.45em;vertical-align:.85em;margin-left:1px}
.price .was{font-size:1.05rem;color:var(--muted)}
.price .was s{text-decoration-thickness:2px}
.price .off{background:#e8322b;color:#fff;font-weight:900;font-size:.95rem;padding:4px 9px;border-radius:8px}
.price .save{margin-top:6px;font-size:.9rem;font-weight:700;color:var(--acc)}
.t-noche .price .save{color:var(--y)}
.price .note{margin-top:10px;font-size:.78rem;color:var(--muted)}

.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:14px;padding:17px 20px;border-radius:14px;background:var(--y);color:#000;font-weight:900;font-size:1.05rem;text-decoration:none;letter-spacing:-.01em;box-shadow:0 10px 26px -10px rgba(253,208,7,.8),inset 0 -3px 0 rgba(0,0,0,.14);transition:transform .15s ease,box-shadow .15s ease;text-align:center;line-height:1.2}
.btn:hover{transform:translateY(-1px);box-shadow:0 14px 30px -10px rgba(253,208,7,.9),inset 0 -3px 0 rgba(0,0,0,.14)}
.btn:active{transform:translateY(1px)}
.btn .ico{width:20px;height:20px}
.micro{margin-top:8px;font-size:.78rem;color:var(--muted);text-align:center}
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.trust div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;font-size:.72rem;line-height:1.25;color:var(--muted);font-weight:600}
.trust .ico{color:var(--acc);width:22px;height:22px}
.t-noche .trust .ico{color:var(--y)}

.art{position:relative}
.art img{border-radius:22px;box-shadow:var(--sh);aspect-ratio:4/3;object-fit:cover;width:100%}
.art .chip{position:absolute;left:12px;bottom:-14px;background:#000;color:#fff;border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:8px 12px;font-size:.78rem;font-weight:800;display:flex;gap:8px;align-items:center;box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}
.art .chip b{color:var(--y)}
.art .chip .ico{color:var(--y);width:18px;height:18px}
.art figcaption{position:absolute;top:10px;right:10px;font-size:.66rem;font-weight:600;color:#fff;background:rgba(0,0,0,.55);padding:4px 8px;border-radius:999px;backdrop-filter:blur(4px)}

/* Secciones */
.sec{padding:56px 0}
.sec.alt{background:var(--alt)}
.eyebrow{display:inline-block;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--acc);margin-bottom:10px}
.t-noche .eyebrow{color:var(--y)}
h2{font-size:clamp(1.6rem,6.4vw,2.5rem);line-height:1.1;font-weight:900;letter-spacing:-.02em;max-width:22em}
.sub2{color:var(--muted);margin-top:10px;max-width:42em}

.cards{display:grid;gap:12px;margin-top:24px}
.pain{display:flex;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.pain .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(232,50,43,.12);color:#e8322b;flex:none}
.pain h3{font-size:1.02rem;font-weight:800;line-height:1.25}
.pain p{font-size:.93rem;color:var(--muted);margin-top:4px}
.agita{margin-top:18px;font-weight:700;padding:14px 16px;border-left:4px solid #e8322b;background:var(--card);border-radius:0 12px 12px 0}

.sol{display:grid;gap:26px;align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chips span{font-size:.82rem;font-weight:700;padding:8px 12px;border-radius:999px;background:var(--acc-soft);border:1px solid var(--line)}

.ph{position:relative;border:2px dashed color-mix(in srgb,var(--acc) 55%,transparent);border-radius:22px;background:
  repeating-linear-gradient(45deg,var(--acc-soft) 0 12px,transparent 12px 24px),var(--card);display:grid;place-items:center;text-align:center;padding:24px;color:var(--muted)}
.ph .ico{width:44px;height:44px;color:var(--acc);margin:0 auto 10px}
.ph b{display:block;color:var(--ink);font-size:.95rem;letter-spacing:.04em;text-transform:uppercase}
.ph small{display:block;font-size:.8rem;margin-top:4px}
.ph.foto{aspect-ratio:1/1;max-width:520px;width:100%;margin:0 auto}
.ph.video{aspect-ratio:9/16;max-width:320px;width:100%;margin:0 auto}

.bens{display:grid;gap:12px;margin-top:26px}
.ben{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;gap:14px}
.ben .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--acc);color:var(--bg);flex:none}
.t-noche .ben .ic{background:var(--y);color:#000}
.ben h3{font-size:1.02rem;font-weight:800;line-height:1.25}
.ben p{font-size:.92rem;color:var(--muted);margin-top:4px}

.steps{display:grid;gap:14px;margin-top:26px;counter-reset:s}
.step{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 18px 74px;min-height:88px}
.step::before{counter-increment:s;content:counter(s);position:absolute;left:16px;top:16px;width:44px;height:44px;border-radius:50%;background:var(--y);color:#000;font-weight:900;font-size:1.3rem;display:grid;place-items:center}
.step h3{font-size:1.05rem;font-weight:800}
.step p{font-size:.92rem;color:var(--muted);margin-top:4px}

.vs{display:grid;gap:12px;margin-top:26px}
.vs .col{border-radius:var(--r);padding:20px;border:1px solid var(--line)}
.vs .sin{background:var(--card);opacity:.92}
.vs .con{background:#000;color:#fff;border:2px solid var(--y);box-shadow:0 20px 40px -20px rgba(253,208,7,.45)}
.vs h3{font-size:1.1rem;font-weight:900;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.vs ul{list-style:none;display:grid;gap:10px}
.vs li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem}
.vs .sin li{color:var(--muted)}
.vs .sin .ico{color:#e8322b;width:20px;height:20px;margin-top:2px}
.vs .con .ico{color:var(--y);width:20px;height:20px;margin-top:2px}

.proof{display:grid;gap:26px;align-items:center}
.stat{background:#000;color:#fff;border-radius:24px;padding:28px 22px;text-align:center;border:1px solid rgba(255,255,255,.12);position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;inset:auto -30% -60% -30%;height:80%;background:radial-gradient(closest-side,rgba(253,208,7,.35),transparent)}
.stat .big{font-size:clamp(3rem,16vw,5rem);font-weight:900;letter-spacing:-.04em;line-height:1;color:var(--y);position:relative}
.stat .cap{font-size:1.05rem;font-weight:800;margin-top:6px;position:relative}
.stat .extra{display:inline-flex;gap:6px;align-items:center;margin-top:14px;background:rgba(255,255,255,.08);border-radius:999px;padding:7px 12px;font-size:.82rem;font-weight:700;position:relative}
.stat .src{font-size:.75rem;color:#aaa;margin-top:14px;position:relative}

.objs{display:grid;gap:12px;margin-top:24px}
.obj{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.obj h3{font-size:1.02rem;font-weight:800}
.obj p{font-size:.93rem;color:var(--muted);margin-top:6px}

.faq{margin-top:22px;display:grid;gap:10px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:16px 48px 16px 16px;font-weight:800;position:relative;font-size:.98rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:var(--acc-soft);display:grid;place-items:center;font-weight:900;color:var(--acc)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 16px 16px;color:var(--muted);font-size:.94rem}

.final{background:#000;color:#fff;padding:56px 0;position:relative;overflow:hidden}
.final::before{content:"";position:absolute;inset:-40% -20% auto -20%;height:90%;background:radial-gradient(closest-side,rgba(253,208,7,.22),transparent)}
.final .wrap{position:relative;max-width:640px;text-align:center}
.final h2{margin:0 auto}
.final .price{background:#111;border-color:rgba(255,255,255,.12);color:#fff;text-align:left;margin-top:22px}
.final .price .lbl,.final .price .was,.final .price .note{color:#bbb}
.final .price .save{color:var(--y)}
.final .micro{color:#bbb}
.urg{display:flex;gap:10px;align-items:flex-start;text-align:left;margin-top:16px;padding:14px;border-radius:14px;background:rgba(253,208,7,.1);border:1px solid rgba(253,208,7,.35);font-size:.88rem}
.urg .ico{color:var(--y)}

.nota{font-size:.8rem;color:var(--muted);margin-top:22px;padding:14px;border-radius:12px;border:1px dashed var(--line)}

footer{background:#000;color:#bdbdbd;padding:36px 0 120px;font-size:.84rem;border-top:1px solid #1d1d1d}
footer .logo img{height:30px;width:auto;margin-bottom:14px;mix-blend-mode:lighten}
footer p{margin-top:10px;max-width:60em}
footer a{color:#fff}
footer .links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px}

/* Barra CTA fija (móvil) */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(0,0,0,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid rgba(255,255,255,.12);padding:10px 14px calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px;transition:transform .25s ease}
.bar.oculta{transform:translateY(110%)}
.bar .p{color:#fff;line-height:1.1;flex:none}
.bar .p b{display:block;font-size:1.25rem;font-weight:900}
.bar .p s{font-size:.78rem;color:#aaa}
.bar .p i{font-style:normal;font-size:.72rem;font-weight:900;color:#000;background:var(--y);border-radius:6px;padding:2px 5px;margin-left:4px}
.bar .btn{margin:0;padding:13px 12px;font-size:.9rem;flex:1;box-shadow:none}

@media (min-width:760px){
  .cards,.bens,.objs{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(3,1fr)}
  .step{padding:74px 18px 18px}
  .vs{grid-template-columns:1fr 1fr}
  .trust div{flex-direction:row;text-align:left}
}
@media (min-width:980px){
  .top .logo img{height:36px}
  .hero{padding:56px 0 72px}
  .hero .grid{grid-template-columns:1.05fr .95fr;gap:48px}
  .btn{width:auto;display:inline-flex;padding:18px 28px}
  .hero .btn{width:100%}
  .sol{grid-template-columns:.9fr 1.1fr;gap:48px}
  .proof{grid-template-columns:1fr 1fr;gap:48px}
  .bens{grid-template-columns:repeat(3,1fr)}
  .sec{padding:84px 0}
  .bar{display:none}
  footer{padding-bottom:40px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}












/* HALLOWEEN:INICIO (tema temporada 15-oct al 2-nov-2026; build-viral/tema_halloween.py) */
.t-halloween{--bg:#14091F;--alt:#1D0F2C;--card:#26153A;--ink:#FFF4E6;--muted:#C9B6D9;--line:rgba(255,244,230,.12);--acc:#FF7A00;--acc-soft:rgba(255,122,0,.14);--hero:radial-gradient(120% 70% at 50% 0%,#4a1f00 0%,#14091F 62%);background:#14091F;color:#FFF4E6}
.t-halloween header{border-bottom:4px solid transparent;border-image:repeating-linear-gradient(90deg,#E4007C 0 24px,#FF7A00 24px 48px,#7B2CBF 48px 72px) 1}
.t-halloween::before{content:"";position:fixed;left:0;right:0;top:0;height:14px;background:url(/assets/halloween/papel-picado.svg) repeat-x 0 0/72px 14px;z-index:60;pointer-events:none;opacity:.9}
.t-halloween::after{content:"";position:fixed;right:0;bottom:0;width:110px;height:110px;background:url(/assets/halloween/telarana.svg) no-repeat;transform:rotate(180deg);opacity:.18;pointer-events:none;z-index:1}
.t-halloween .hero{position:relative}
.t-halloween .hero::before{content:"";position:absolute;inset:0 auto auto 0;width:120px;height:120px;background:url(/assets/halloween/telarana.svg) no-repeat;background-size:contain;opacity:.25;pointer-events:none}
.t-halloween .spooky{font-family:"Creepster",var(--f,system-ui);color:#FF7A00;letter-spacing:.02em;font-weight:400}
.t-halloween .card,.t-halloween .vc{border:1px solid var(--line);box-shadow:0 0 0 2px rgba(255,122,0,.25)}
.t-halloween .btn{background:#FF7A00;color:#000;box-shadow:0 10px 26px -10px rgba(255,122,0,.8),inset 0 -3px 0 rgba(0,0,0,.14)}
.t-halloween .badge-temporada{display:inline-block;background:#FF7A00;color:#000;border-radius:999px;font-weight:900;padding:4px 10px}
.t-halloween .sec-halloween{background:#1D0F2C}
@media (max-width:700px){.t-halloween::after{display:none}.t-halloween .hero::before{width:70px;height:70px}}
/* HALLOWEEN:FIN */