/* Landings de venta v2 · PANORO
   Una promesa clara arriba, el dolor con numero, antes/despues, la demo para tocar, la oferta
   apilada con garantia, preguntas y WhatsApp. Se lee en un celular en dos minutos. */

:root{
  --bg:#F3F5F4;
  --surf:#FFFFFF;
  --ink:#0B0F10;
  --ink2:#3E4649;
  --mut:#6B7478;
  --line:rgba(0,0,0,.10);
  --acc:#0F5F52;
  --acc-s:#E3F0EB;
  --wa:#25D366;
  --warn:#B4541E;
  --warn-s:#FBE9DF;
  --ama:#F5C400;
  --r:20px;
  --ease:cubic-bezier(.2,.9,.25,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.03em;line-height:1.1}
p{margin:0}
img,iframe{max-width:100%}
.w{max-width:860px;margin:0 auto;padding:0 20px}

/* ---------- barra ---------- */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;background:rgba(11,15,16,.92);backdrop-filter:blur(8px);color:#fff}
.nav__m{font-weight:700;letter-spacing:.14em;font-size:13px;color:#fff;text-decoration:none}
.nav__w{background:var(--wa);color:#0B2E19;border-radius:999px;padding:9px 18px;font-size:14px;font-weight:600;text-decoration:none;transition:.2s var(--ease)}
.nav__w:hover{background:#1EB855;color:#fff}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:12px;padding:15px 24px;font-size:16px;font-weight:600;cursor:pointer;text-decoration:none;transition:.2s var(--ease);line-height:1.2}
.btn svg{width:21px;height:21px;fill:currentColor;flex:none}
.btn--p{background:var(--ink);color:#fff}
.btn--p:hover{background:var(--acc);transform:translateY(-1px)}
.btn--bl{background:#fff;color:var(--ink)}
.btn--bl:hover{background:var(--ama)}
.btn--l{background:none;color:var(--ink);border:1.5px solid var(--ink)}
.btn--l:hover{background:var(--ink);color:#fff}
.btn--l.inv{color:#fff;border-color:rgba(255,255,255,.6)}.btn--l.inv:hover{background:#fff;color:var(--ink)}
.btn--wa{background:var(--wa);color:#0B2E19;box-shadow:0 14px 30px -16px rgba(37,211,102,.9)}
.btn--wa:hover{background:#1EB855;color:#fff;transform:translateY(-1px)}
.btn--lg{padding:18px 30px;font-size:17px}
.btn small{display:block;font-size:12px;font-weight:500;opacity:.8}

/* ---------- portada ---------- */
.hero{background:var(--ink);color:#fff;padding:56px 0 46px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(15,95,82,.55),transparent 68%);pointer-events:none}
.hero .w{display:grid;gap:18px;justify-items:start;position:relative}
.hero__k{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.hero__k i{width:7px;height:7px;border-radius:50%;background:var(--wa)}
.hero h1{font-size:clamp(34px,6.4vw,58px);max-width:17ch}
.hero h1 em{font-style:normal;color:var(--ama)}
.hero__p{font-size:18.5px;color:rgba(255,255,255,.82);max-width:52ch}
.hero__bts{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.hero__n{font-size:13.5px;color:rgba(255,255,255,.6)}
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;margin-top:14px}
.num{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px 16px}
.num b{display:block;font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--ama);line-height:1.1}
.num span{font-size:13px;color:rgba(255,255,255,.75)}

/* ---------- secciones ---------- */
.sec{padding:44px 0 0}
.sec .w{display:grid;gap:14px;justify-items:start}
.sec h2{font-size:clamp(24px,4.4vw,34px);max-width:22ch}
.lbl{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.lbl::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc)}
.sub{font-size:16.5px;color:var(--ink2);max-width:56ch}

/* te suena */
.dol{list-style:none;margin:0;padding:0;display:grid;gap:9px;width:100%}
.dol li{display:flex;gap:12px;align-items:flex-start;background:var(--surf);border-radius:12px;padding:13px 16px;font-size:16px;color:var(--ink2)}
.dol li::before{content:"✕";color:var(--warn);font-weight:700;flex:none;margin-top:1px}
.costo{width:100%;background:var(--warn-s);border-left:4px solid var(--warn);border-radius:0 12px 12px 0;padding:14px 18px;font-size:16.5px;font-weight:500;color:var(--ink)}
.costo b{color:var(--warn)}

/* antes / despues */
.ad{width:100%;display:grid;grid-template-columns:1fr 1fr;border-radius:var(--r);overflow:hidden;background:var(--surf);border:1px solid var(--line)}
.ad__h{padding:12px 18px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.ad__h--a{background:#F1F1F1;color:var(--mut)}.ad__h--d{background:var(--acc);color:#fff}
.ad__c{padding:13px 18px;border-top:1px solid var(--line);font-size:15px;color:var(--ink2)}
.ad__c--d{color:var(--ink);font-weight:500;background:var(--acc-s)}
.ad__c--d::before{content:"✓ ";color:var(--acc);font-weight:700}
.ad__c--a::before{content:"✕ ";color:var(--warn);font-weight:700}

/* la demo */
.sec--demo .w{justify-items:center;text-align:center}
.pasos{display:grid;gap:8px;width:100%;max-width:520px;margin:4px 0 8px;text-align:left}
.paso{display:flex;gap:12px;align-items:center;background:var(--surf);border-radius:12px;padding:11px 14px;font-size:15px}
.paso b{width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:13px;flex:none}
.tel{width:100%;display:grid;place-items:center;margin:6px 0 4px}
.tel__b{width:min(100%,380px);aspect-ratio:9/17;background:var(--ink);border-radius:32px;padding:11px;box-shadow:0 40px 70px -40px rgba(0,0,0,.8)}
.tel__b iframe{width:100%;height:100%;border:0;border-radius:22px;background:var(--bg);display:block}
.demo__bts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* la oferta */
.of{width:100%;background:var(--surf);border-radius:var(--r);padding:28px 26px;display:grid;gap:18px;border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(0,0,0,.4)}
.of__t{font-size:clamp(22px,4vw,30px)}
.of__l{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.of__l li{display:flex;gap:11px;align-items:flex-start;font-size:16px}
.of__l li::before{content:"✓";width:22px;height:22px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;flex:none;margin-top:1px}
.bonos{display:grid;gap:8px;border-top:1px dashed var(--line);padding-top:16px}
.bonos p{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.bono{display:flex;gap:10px;align-items:center;background:#FFF8D6;border-radius:10px;padding:10px 14px;font-size:15px;font-weight:500}
.bono::before{content:"+";width:22px;height:22px;border-radius:50%;background:var(--ama);color:var(--ink);display:grid;place-items:center;font-weight:800;flex:none}
.gar{display:flex;gap:14px;align-items:flex-start;border:2px solid var(--acc);border-radius:14px;padding:14px 16px;background:var(--acc-s)}
.gar__i{width:40px;height:40px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;flex:none;font-size:18px}
.gar b{display:block;font-size:15px;margin-bottom:2px}
.gar p{font-size:14.5px;color:var(--ink2)}
.of__c{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--ink2)}
.of__c i{width:8px;height:8px;border-radius:50%;background:var(--warn);flex:none;margin-top:7px;animation:late 2.4s infinite}
@keyframes late{50%{opacity:.3}}
.of__c b{color:var(--ink);font-weight:600}
.of .btn{justify-self:start}

/* preguntas */
.faqs{display:grid;gap:8px;width:100%}
.faq{background:var(--surf);border-radius:12px;padding:14px 18px}
.faq summary{cursor:pointer;font-weight:500;font-size:16px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--acc);font-weight:700}
.faq[open] summary::after{content:"−"}
.faq p{margin-top:9px;color:var(--mut);font-size:15px}

/* cierre */
.fin{background:var(--ink);color:#fff;margin-top:52px;padding:52px 0}
.fin .w{display:grid;gap:16px;justify-items:center;text-align:center}
.fin h2{font-size:clamp(26px,4.6vw,38px);max-width:22ch}
.fin p{color:rgba(255,255,255,.72);max-width:48ch}

/* pie */
.pie{max-width:860px;margin:0 auto;padding:28px 20px 44px;display:grid;gap:14px}
.pie__ls{display:flex;gap:8px;flex-wrap:wrap}
.pie__ls a{background:var(--surf);border-radius:999px;padding:8px 15px;font-size:13.5px;color:var(--ink2);text-decoration:none;transition:.2s var(--ease)}
.pie__ls a:hover{background:var(--ink);color:#fff}
.pie__c{font-size:13px;color:var(--mut)}
.pie__c a{color:var(--acc);text-decoration:none}

/* boton flotante */
.fab{position:fixed;right:18px;bottom:18px;z-index:60;display:inline-flex;align-items:center;gap:9px;background:var(--wa);color:#0B2E19;border-radius:999px;padding:13px 20px 13px 16px;font-size:15px;font-weight:600;text-decoration:none;box-shadow:0 16px 32px -14px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(20px) scale(.9);transition:opacity .35s var(--ease),transform .45s var(--ease),visibility .35s}
.fab.on{opacity:1;visibility:visible;transform:none}
.fab svg{width:21px;height:21px;fill:currentColor}
.fab:hover{background:#1EB855;color:#fff}

@media (max-width:640px){
  .hero{padding:40px 0 34px}
  .hero__bts{width:100%}.hero__bts .btn{flex:1;padding:14px 12px;font-size:15px}
  .nums{grid-template-columns:1fr 1fr 1fr;gap:6px}.num{padding:10px}.num b{font-size:19px}.num span{font-size:11.5px}
  .ad{grid-template-columns:1fr}
  .ad__h--a{display:none}
  .ad .par{display:grid}
  .ad__c--d{border-top:0}
  .of{padding:22px 18px}.of .btn{justify-self:stretch}
  .fab{right:12px;bottom:12px;padding:12px 16px 12px 13px}.fab span{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}