*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Poppins',sans-serif;background:#080C18;color:#F8F7F4;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:'Poppins',sans-serif;cursor:pointer;border:none;outline:none}

:root{
  --or:#E8703A;--or2:#F08455;
  --or-dim:rgba(232,112,58,.12);--or-glow:rgba(232,112,58,.3);
  --bg:#080C18;--bg2:#0A0E1A;--card:#0F1628;
  --b:rgba(255,255,255,.07);--bh:rgba(232,112,58,.35);
  --g:rgba(248,247,244,.5);--g2:rgba(248,247,244,.25);
  --t:.28s ease;
}

/* ── NAV ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:999;display:flex;align-items:center;justify-content:space-between;padding:20px 48px;transition:all var(--t)}
.nav.on{background:rgba(8,12,24,.92);backdrop-filter:blur(24px);padding:13px 48px;border-bottom:1px solid var(--b)}
.logo{font-size:19px;font-weight:800;letter-spacing:-.5px;color:#F8F7F4}
.logo em{color:var(--or);font-style:normal}
.logo-link{display:flex;align-items:center}
.logo-img{height:34px;width:auto;display:block}
.f-brand .logo-img{height:30px}
.nav-mid{display:flex;align-items:center;gap:2px}
.nav-mid>a,.nav-mid>.dd>a{font-size:13.5px;font-weight:500;color:var(--g);padding:7px 13px;border-radius:7px;transition:all var(--t);display:block}
.nav-mid>a:hover,.nav-mid>.dd>a:hover{color:#F8F7F4;background:rgba(255,255,255,.05)}
.dd{position:relative}
.dd>a{display:flex!important;align-items:center;gap:5px}
.dd>a::after{content:'';width:0;height:0;border:4px solid transparent;border-top:5px solid var(--g);transition:transform var(--t)}
.dd:hover>a::after{transform:rotate(180deg)}
.dd-menu{display:none;position:absolute;top:100%;left:0;padding-top:10px;margin-top:0;background:transparent;border:none;box-shadow:none;min-width:250px}
.dd-menu-inner{background:#0F1628;border:1px solid var(--b);border-radius:14px;padding:8px;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.dd:hover .dd-menu,.dd.open .dd-menu{display:block}
.dd.open>a::after{transform:rotate(180deg)}
.dd-menu a{display:block;padding:11px 13px;border-radius:9px;font-size:13px;color:var(--g);transition:all var(--t)}
.dd-menu a:hover{background:rgba(255,255,255,.05);color:#F8F7F4}
.dd-menu a small{display:block;font-size:11px;color:var(--g2);margin-top:1px}
.nav-r{display:flex;align-items:center;gap:10px}
.n-login{display:inline-flex;align-items:center;font-size:13.5px;font-weight:600;color:var(--g);background:none;padding:8px 18px;border-radius:8px;border:1px solid var(--b);transition:all var(--t)}
.n-login:hover{color:#F8F7F4;border-color:rgba(255,255,255,.2)}
.n-try{display:inline-flex;align-items:center;font-size:13.5px;font-weight:700;color:#fff;background:var(--or);padding:9px 20px;border-radius:8px;box-shadow:0 4px 18px var(--or-glow);transition:all var(--t)}
.n-try:hover{background:var(--or2);transform:translateY(-1px)}

/* ── NAV BURGER (móvil) ── */
.nav-burger{display:none;position:relative;width:42px;height:42px;align-items:center;justify-content:center;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid var(--b);color:#F8F7F4;flex-shrink:0}
.nav-burger i{position:absolute;width:19px;height:19px;transition:opacity .2s ease,transform .25s ease}
.nav-burger .burger-close{opacity:0;transform:rotate(-90deg)}
.nav-burger.open .burger-open{opacity:0;transform:rotate(90deg)}
.nav-burger.open .burger-close{opacity:1;transform:rotate(0)}

/* ── MENÚ MÓVIL ── */
.mnav{position:fixed;top:0;right:0;height:100vh;width:min(340px,86vw);background:#0A0E1A;border-left:1px solid var(--b);z-index:1001;transform:translateX(100%);transition:transform .4s cubic-bezier(.22,1,.36,1);overflow-y:auto;padding-top:84px}
.mnav.open{transform:translateX(0)}
.mnav-scroll{padding:6px 24px 44px}
.mnav-item{border-bottom:1px solid var(--b)}
.mnav-top{width:100%;display:flex;align-items:center;justify-content:space-between;padding:17px 2px;font-size:15px;font-weight:600;color:#F8F7F4;background:none}
.mnav-top i{width:17px;height:17px;color:var(--g);transition:transform .25s ease;flex-shrink:0}
.mnav-item.open .mnav-top i{transform:rotate(180deg);color:var(--or)}
.mnav-sub{max-height:0;overflow:hidden;transition:max-height .35s ease}
.mnav-item.open .mnav-sub{max-height:280px}
.mnav-sub a{display:block;padding:10px 8px 10px 14px;font-size:13.5px;color:var(--g)}
.mnav-sub a:hover{color:var(--or)}
.mnav-link{display:block;padding:17px 2px;font-size:15px;font-weight:600;color:#F8F7F4;border-bottom:1px solid var(--b)}
.mnav-btns{display:flex;flex-direction:column;gap:10px;margin-top:26px}
.mnav-btns .n-login,.mnav-btns .n-try{width:100%;padding:14px;text-align:center;justify-content:center}
.mnav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);z-index:1000;opacity:0;pointer-events:none;transition:opacity .3s ease}
.mnav-backdrop.open{opacity:1;pointer-events:auto}
@media(max-width:1024px){ .nav-burger{display:flex} }
@media(min-width:1025px){ .mnav,.mnav-backdrop{display:none} }

/* ── UTILIDADES: ocultar sin borrar / textos móvil ── */
.hidden-section{display:none !important}
.only-mobile{display:none}
@media(max-width:640px){
  .only-desktop{display:none}
  .only-mobile{display:block}
}

/* ── HERO ── */
.hero{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:140px 24px 0;
  position:relative;
  overflow:hidden;
}
.hero-glow{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 80% 55% at 50% -5%,rgba(232,112,58,.16) 0%,transparent 65%),
    #080C18;
}
.hero-glow::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(232,112,58,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(232,112,58,.035) 1px,transparent 1px);
  background-size:72px 72px;
  opacity:.75;
  mask-image:radial-gradient(ellipse 90% 75% at center,#000 0%,rgba(0,0,0,.95) 45%,rgba(0,0,0,.5) 70%,transparent 100%);
  pointer-events:none;
}
.hero-glow::after{
  content:"";position:absolute;width:900px;height:900px;left:50%;top:30%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(232,112,58,.10) 0%,rgba(232,112,58,.04) 35%,transparent 75%);
  filter:blur(80px);
  pointer-events:none;
}
.hero-in{position:relative;z-index:2;max-width:820px}
.badge{display:inline-flex;align-items:center;gap:9px;background:var(--or-dim);border:1px solid rgba(232,112,58,.25);border-radius:100px;padding:7px 17px 7px 10px;font-size:12px;font-weight:600;color:rgba(248,247,244,.85);margin-bottom:32px}
.badge-dot{width:20px;height:20px;border-radius:50%;background:var(--or);display:flex;align-items:center;justify-content:center}
.badge-dot i{width:11px;height:11px;color:#080C18}
.badge strong{color:var(--or)}
.hero h1{font-size:clamp(28px,4vw,55px);font-weight:800;letter-spacing:0;line-height:1;max-width:1400px;width:100%;margin-bottom:22px}
.hero h1 span{color:var(--or)}
.hero-sub{font-size:21px;color:rgba(248,247,244,.52);line-height:1.75;max-width:750px;margin:0 auto 36px}
.btn-primary{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:#fff;background:var(--or);padding:15px 34px;border-radius:10px;box-shadow:0 8px 28px rgba(232,112,58,.4);transition:all var(--t)}
.btn-primary:hover{background:var(--or2);transform:translateY(-2px);box-shadow:0 14px 40px rgba(232,112,58,.5)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:rgba(248,247,244,.6);background:none;padding:15px 26px;border-radius:10px;border:1px solid var(--b);transition:all var(--t)}
.btn-ghost:hover{color:#F8F7F4;border-color:rgba(255,255,255,.2)}
.hero-note{font-size:12px;color:rgba(248,247,244,.25);margin-top:10px}
.hero-media{position:relative;z-index:2;width:calc(100% + 0px);max-width:1100px;margin:56px auto 0;border-radius:20px 20px 0 0;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-bottom:none;box-shadow:0 -20px 80px rgba(232,112,58,.08),0 40px 0 0 #080C18}
.hero-media-ph{position:relative;width:100%;border-radius:24px;overflow:hidden;cursor:pointer;background:#000}
.hero-video{display:block;width:100%;height:100%;min-height:420px;object-fit:cover}
.video-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none}
.play{width:85px;height:85px;border:none;border-radius:50%;background:rgba(0,0,0,.75);color:#fff;cursor:pointer;pointer-events:auto;display:flex;align-items:center;justify-content:center}
.play i{width:30px;height:30px;margin-left:4px}
.ph-label{position:absolute;bottom:20px;left:20px;color:#fff;background:rgba(0,0,0,.6);padding:10px 14px;border-radius:12px;font-size:14px}
.video-modal{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;justify-content:center;align-items:center;z-index:99999}
.video-modal.active{display:flex}
.video-modal-content{position:relative;width:96vw;max-width:1600px}
.video-modal-content video{width:100%;max-height:92vh;border-radius:18px;background:#000}
.close-video{position:absolute;top:-55px;right:0;width:45px;height:45px;border:none;background:none;color:#fff;font-size:42px;cursor:pointer}
@media(max-width:768px){
  .hero-video{min-height:250px}
  .play{width:65px;height:65px}
  .play i{width:22px;height:22px}
  .video-modal-content{width:100vw;padding:10px}
  .video-modal-content video{max-height:80vh;border-radius:12px}
}

/* ── LOGOS ── */
.logos{padding:52px 48px;border-top:1px solid var(--b);border-bottom:1px solid var(--b);text-align:center}
.logos-title{font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:rgba(248,247,244,.2);margin-bottom:32px}
.logos-row{display:flex;align-items:center;justify-content:center;gap:48px;flex-wrap:wrap}
.logo-txt{font-size:14px;font-weight:700;letter-spacing:.5px;color:rgba(248,247,244,.17);text-transform:uppercase;transition:color var(--t)}
.logo-txt:hover{color:rgba(248,247,244,.4)}

/* ── SHARED SECTION STYLES ── */
.sec{padding:100px 48px}
.sec-dark{background:var(--bg2)}
.wrap{max-width:1160px;margin:0 auto}
.ey{font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--or);margin-bottom:14px}
.h2{font-size:clamp(28px,3.8vw,46px);font-weight:900;letter-spacing:-1.8px;line-height:1.08;color:#F8F7F4}
.h2 span{color:var(--or)}
.p{font-size:15.5px;color:var(--g);line-height:1.75;margin-top:14px}

.funnel-wrap{position:relative;max-width:480px;width:100%;margin:0 auto;padding:20px 0 8px}
.funnel-glow{position:absolute;width:280px;height:280px;top:-60px;left:50%;transform:translateX(-50%);border-radius:50%;background:var(--or);filter:blur(70px);opacity:.10;pointer-events:none;z-index:0}
.f-stage{position:relative;margin:0 auto 14px;cursor:pointer;transition:transform .35s cubic-bezier(.22,1,.36,1);width:calc(var(--w,100) * 1%);z-index:1}
.f-stage:hover{transform:translateY(-4px) scale(1.02)}
.f-shape{position:relative;padding:20px 26px;border-radius:14px;border:1px solid rgba(232,112,58,.20);background:linear-gradient(180deg, rgba(232,112,58,.06), rgba(232,112,58,.015));overflow:hidden;transition:border-color var(--t), background var(--t), box-shadow var(--t)}
.f-stage:hover .f-shape{border-color:rgba(232,112,58,.55);background:linear-gradient(180deg, rgba(232,112,58,.15), rgba(232,112,58,.03));box-shadow:0 14px 34px rgba(232,112,58,.12), inset 0 1px 0 rgba(255,255,255,.05)}
.f-top{display:flex;align-items:center;gap:14px}
.f-num{flex:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--or2);border:1px solid rgba(232,112,58,.4);background:var(--or-dim);transition:all var(--t)}
.f-stage:hover .f-num{background:var(--or);color:#080C18;border-color:var(--or)}
.f-title{font-size:15px;font-weight:500;color:#F8F7F4;letter-spacing:.2px}
.f-icon{margin-left:auto;width:22px;height:22px;flex:none;color:rgba(248,247,244,.3);transition:color var(--t), transform var(--t)}
.f-stage:hover .f-icon{color:var(--or2);transform:rotate(90deg)}
.f-detail{max-height:0;opacity:0;overflow:hidden;transition:max-height .4s cubic-bezier(.22,1,.36,1), opacity .3s ease, margin-top .35s ease}
.f-stage:hover .f-detail{max-height:160px;opacity:1;margin-top:14px}
.f-detail-inner{padding-top:14px;border-top:1px solid rgba(248,247,244,.08)}
.f-detail-inner p{font-size:13px;line-height:1.6;color:var(--g);margin:0 0 10px}
.f-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--or2);font-weight:500}
.f-tag i{width:14px;height:14px}
.f-connector{display:flex;justify-content:center;height:24px}
.f-line{stroke:rgba(232,112,58,.35);stroke-width:1.5;stroke-dasharray:4 5;animation:f-flow 1.4s linear infinite}
@keyframes f-flow{to{stroke-dashoffset:-18}}
.f-base{margin-top:8px;display:flex;justify-content:center}
.f-base-pill{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:999px;background:var(--or);color:#080C18;font-size:13px;font-weight:600;letter-spacing:.2px;box-shadow:0 10px 26px rgba(232,112,58,.28)}
.f-base-pill i{width:16px;height:16px}
@media (max-width:640px){
  .funnel-wrap{max-width:100%;padding:16px 4px 4px}
  .f-stage{width:100% !important}
  .f-title{font-size:14px}
}

/* TWO-COL SPLIT */
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;max-width:1160px;margin:0 auto}
.split.flip{direction:rtl}
.split.flip>*{direction:ltr}

.process-card{position:relative;width:100%;max-width:1400px;margin:0 auto;padding:70px;border-radius:32px;background:rgba(8,15,32,.72);border:1px solid rgba(90,130,255,.18);backdrop-filter:blur(18px);box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden}
.process-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top left,rgba(72,115,255,.18),transparent 40%);pointer-events:none}
.process-card::after{content:"";position:absolute;width:420px;height:420px;right:-150px;top:-150px;background:radial-gradient(circle,rgba(77,120,255,.14),transparent 70%);filter:blur(60px);pointer-events:none}
.process-content{position:relative;z-index:2}
.process-visual{position:relative;z-index:2}
.process-card .h2{color:#ffffff}
.process-card .p{color:rgba(255,255,255,.75)}
.process-card .ey{color:#7ea1ff}
.process-card .ai-step{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);border-radius:18px;padding:18px;margin-bottom:14px}

/* checklist */
.cklist{display:flex;flex-direction:column;gap:12px;margin:20px 0 30px}
.cklist li{display:flex;align-items:flex-start;gap:11px;font-size:14px;color:rgba(248,247,244,.72);line-height:1.5}
.cklist li::before{content:'✓';width:21px;height:21px;border-radius:50%;background:var(--or-dim);border:1px solid rgba(232,112,58,.28);color:var(--or);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}

/* pill tags */
.pills{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 28px}
.pill{font-size:13px;font-weight:600;padding:8px 18px;border-radius:100px;border:1px solid var(--b);color:var(--g);transition:all var(--t);cursor:pointer}
.pill:hover,.pill.on{background:var(--or-dim);border-color:rgba(232,112,58,.4);color:var(--or)}

.amp-right{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:70px;padding-top:40px}
.amp-feat{text-align:center;transition:transform var(--t)}
.amp-feat:hover{transform:translateY(-3px)}
.amp-ico{width:78px;height:78px;margin:0 auto 22px;display:flex;align-items:center;justify-content:center;border-radius:20px;background:rgba(232,112,58,.08);border:1px solid rgba(255,179,122,.18);color:#ffb37a;box-shadow:0 0 24px rgba(232,112,58,.08),inset 0 1px 0 rgba(255,255,255,.04);transition:.25s ease}
.amp-ico svg{width:42px;height:42px;stroke-width:2}
.amp-feat:hover .amp-ico{transform:translateY(-2px);box-shadow:0 0 34px rgba(232,112,58,.14),inset 0 1px 0 rgba(255,255,255,.05)}
.amp-feat h4{margin-bottom:10px}
.amp-feat p{max-width:280px;margin:0 auto}

/* ── AI STEPS ── */
.ai-steps{display:flex;flex-direction:column;gap:0;margin-top:28px}
.ai-step{display:flex;gap:18px;padding:20px 0;border-bottom:1px solid var(--b);transition:padding var(--t)}
.ai-step:last-child{border-bottom:none}
.ai-step:hover{padding-left:6px}
.ai-num{width:auto;height:auto;background:none;border:none;color:var(--or);font-size:1.6rem;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:0}
.ai-step h4{font-size:14.5px;font-weight:700;margin-bottom:3px}
.ai-step p{font-size:13px;color:var(--g);line-height:1.6}

/* ── TEMPLATES ── */
.templates-sec{padding:100px 48px 0}
.templates-header{text-align:center;max-width:700px;margin:0 auto 56px}
.tpl-video{width:100%;max-width:1100px;margin:0 auto;border-radius:20px 20px 0 0;overflow:hidden;border:1px solid var(--b);border-bottom:none;box-shadow:0 30px 90px rgba(0,0,0,.4)}
.tpl-video-ph{width:100%;aspect-ratio:16/7;background:var(--card);display:flex;align-items:center;justify-content:center;color:rgba(248,247,244,.07);font-size:11px;letter-spacing:1px;text-transform:uppercase}

/* ── QUOTE BAND ── */
.quote-band{padding:80px 48px;background:var(--bg);border-top:1px solid var(--b);border-bottom:1px solid var(--b)}
.quote-in{max-width:780px;margin:0 auto;text-align:center}
.q-mark{font-size:72px;line-height:.4;color:var(--or);margin-bottom:28px;font-family:Georgia,serif;display:block}
.q-text{font-size:clamp(17px,2.2vw,23px);font-weight:600;line-height:1.55;color:#F8F7F4;margin-bottom:28px}
.q-author{display:flex;align-items:center;justify-content:center;gap:14px}
.q-av{width:46px;height:46px;border-radius:50%;background:var(--or-dim);border:2px solid rgba(232,112,58,.3);display:flex;align-items:center;justify-content:center}
.q-av i{width:20px;height:20px;color:var(--or)}
.q-meta strong{font-size:14px;font-weight:700;display:block}
.q-meta small{font-size:12px;color:var(--g)}
.q-stars{color:var(--or);font-size:18px;letter-spacing:3px;margin-bottom:22px;display:block}

/* ── PUBLISH items ── */
.pub-list{display:flex;flex-direction:column;gap:14px;margin:22px 0 32px}
.pub-item{display:flex;align-items:center;gap:13px;padding:14px 18px;background:var(--card);border:1px solid var(--b);border-radius:12px;font-size:14px;font-weight:600;transition:border-color var(--t),transform var(--t),box-shadow var(--t)}
.pub-item:hover{border-color:var(--bh);transform:translateX(4px);box-shadow:0 10px 26px rgba(0,0,0,.25)}
.pub-item i{width:28px !important;height:28px !important;display:flex !important;align-items:center !important;justify-content:center !important;flex-shrink:0 !important;color:var(--or) !important;background:rgba(232,112,58,.08) !important;border:1px solid rgba(232,112,58,.15) !important;border-radius:8px !important}
.pub-item i svg{width:15px !important;height:15px !important;stroke-width:2.2 !important}

/* ── INTEGRATIONS logos grid ── */
.integ-grid-logos{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:22px 0 28px}
.integ-logo{background:var(--card);border:1px solid var(--b);border-radius:13px;padding:18px 12px;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--g);transition:border-color var(--t)}
.integ-logo:hover{border-color:var(--bh);color:#F8F7F4}
.integ-logo-ic{font-size:22px}
.integ-more{grid-column:span 4;text-align:center;font-size:12px;color:var(--g);padding:8px;background:var(--card);border-radius:10px;border:1px solid var(--b)}

/* ── FUNNELS ── */
.funnels-sec{padding:100px 48px}
.funnels-header{text-align:center;max-width:680px;margin:0 auto 52px}
.funnels-img{max-width:1000px;margin:0 auto;border-radius:20px;overflow:hidden;border:1px solid var(--b);box-shadow:0 30px 90px rgba(0,0,0,.5)}
.funnels-ph{width:100%;aspect-ratio:16/8;background:var(--card);display:flex;align-items:center;justify-content:center;color:rgba(248,247,244,.08);font-size:11px;letter-spacing:1px;text-transform:uppercase}
.funnels-cta{text-align:center;margin-top:40px}
.funnels-image{width:100%;height:100%;display:block;border-radius:inherit}

/* ═══════════════ VISUAL DERECHA — PANEL DE RENDIMIENTO ═══════════════ */
.perf-panel{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:420px}
.perf-glow{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(232,112,58,.14) 0%,transparent 70%);filter:blur(50px);z-index:0;pointer-events:none}
.perf-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr 1fr;grid-template-rows:auto auto;gap:16px;width:100%;max-width:480px}
.perf-card{background:rgba(15,22,40,.78);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:24px;backdrop-filter:blur(16px);box-shadow:0 24px 50px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.05);transition:transform var(--t),border-color var(--t)}
.perf-card:hover{transform:translateY(-3px);border-color:rgba(232,112,58,.3)}
.pc-chart{grid-row:1 / 3;display:flex;flex-direction:column}
.pc-speed{display:flex;flex-direction:column;align-items:center;text-align:center}
.pc-trend{display:flex;flex-direction:column}
.pc-head{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;color:#F8F7F4;margin-bottom:22px}
.pc-head i{width:16px;height:16px;color:var(--or);flex-shrink:0}
.pc-bars{flex:1;display:flex;align-items:flex-end;gap:9px;min-height:110px;padding-bottom:2px}
.pc-bars i{flex:1;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,var(--or2),var(--or));opacity:.85;display:block;transition:opacity var(--t)}
.pc-bars i:last-child{opacity:1;box-shadow:0 6px 16px rgba(232,112,58,.35)}
.pc-foot{margin-top:14px;font-size:11px;color:var(--g);letter-spacing:.2px}
.pc-ring{width:88px;height:88px;border-radius:50%;background:conic-gradient(var(--or) 0 98%, rgba(255,255,255,.08) 98% 100%);display:flex;align-items:center;justify-content:center;margin-bottom:14px;position:relative}
.pc-ring::before{content:"";position:absolute;inset:8px;background:#0F1628;border-radius:50%}
.pc-ring span{position:relative;z-index:1;font-size:19px;font-weight:800;color:#F8F7F4}
.pc-label{font-size:12px;font-weight:600;color:#F8F7F4;line-height:1.5}
.pc-label small{display:block;font-size:10.5px;font-weight:400;color:var(--g);margin-top:2px}
.pc-trend .pc-num{font-size:26px;font-weight:800;color:var(--or2);line-height:1;margin-bottom:6px}
.pc-trend .pc-label{margin-top:auto}
@media (max-width:900px){ .perf-panel{min-height:auto;padding:8px 0} }
@media (max-width:520px){ .perf-grid{grid-template-columns:1fr} .pc-chart{grid-row:auto} }

.phone img,.mob-video-img{width:100%;height:100%;display:block;border-radius:inherit}
.tpl-video-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.tablet-device{width:190px;height:145px;border-radius:22px;padding:7px;background:linear-gradient(180deg,#2a2f3d,#151923);border:2px solid rgba(255,255,255,.08);box-shadow:0 18px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08);overflow:hidden;transform:rotate(-7deg) translateY(8px);transition:.35s ease}
.tablet-device:hover{transform:rotate(-5deg) translateY(0)}
.tablet-device img{width:100%;height:100%;border-radius:15px;display:block}

/* ── A/B CARDS ── */
.ab-sec{padding:100px 48px;background:var(--bg2)}
.ab-wrap{max-width:1160px;margin:0 auto}
.ab-header{text-align:center;margin-bottom:52px}
.ab-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ab-card{background:var(--card);border:1px solid var(--b);border-radius:20px;overflow:hidden;transition:border-color var(--t),transform var(--t),box-shadow var(--t)}
.ab-card:hover{border-color:var(--bh);transform:translateY(-4px);box-shadow:0 24px 50px rgba(0,0,0,.3)}
.ab-card-body{padding:26px 28px 30px}
.ab-card-body h3{font-size:17px;font-weight:800;margin-bottom:8px}
.ab-card-body p{font-size:13.5px;color:var(--g);line-height:1.65}

/* paneles visuales propios (sustituyen a las cajas placeholder) */
.ab-visual{width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,#0A0E1C,#141d33);display:flex;align-items:center;justify-content:center;padding:22px;position:relative;overflow:hidden}
.ab-visual::before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(232,112,58,.16),transparent 70%);filter:blur(30px);top:-40px;right:-40px}
.ab-analytics{position:relative;z-index:1;width:100%;max-width:320px;background:rgba(15,22,40,.85);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:18px 20px;backdrop-filter:blur(10px)}
.ab-analytics .aa-head{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:#F8F7F4;margin-bottom:14px}
.ab-analytics .aa-head i{width:14px;height:14px;color:var(--or)}
.ab-analytics .aa-bars{display:flex;align-items:flex-end;gap:6px;height:64px}
.ab-analytics .aa-bars i{flex:1;border-radius:4px 4px 1px 1px;background:linear-gradient(180deg,var(--or2),var(--or));opacity:.8;display:block}
.ab-analytics .aa-bars i:last-child{opacity:1}
.ab-analytics .aa-foot{margin-top:10px;font-size:10px;color:var(--g);display:flex;justify-content:space-between}
.ab-analytics .aa-foot strong{color:var(--or2)}
.ab-abtest{position:relative;z-index:1;width:100%;max-width:340px;display:flex;gap:10px}
.ab-abtest .ab-mini{flex:1;background:rgba(15,22,40,.85);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px;backdrop-filter:blur(10px)}
.ab-abtest .ab-mini.win{border-color:rgba(232,112,58,.4)}
.ab-abtest .mini-tag{font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--g);margin-bottom:8px;display:block}
.ab-abtest .win .mini-tag{color:var(--or)}
.ab-abtest .mini-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.09);margin-bottom:6px}
.ab-abtest .mini-bar.l1{width:85%}.ab-abtest .mini-bar.l2{width:60%}.ab-abtest .mini-bar.l3{width:40%}
.ab-abtest .win .mini-bar{background:linear-gradient(90deg,var(--or2),var(--or))}
.ab-abtest .mini-pct{margin-top:10px;font-size:17px;font-weight:800;color:#F8F7F4}
.ab-abtest .win .mini-pct{color:var(--or2)}

/* ── VIDEO TESTIMONIALS ── */
.vt-sec{padding:100px 48px;background:var(--bg)}
.vt-header{text-align:center;margin-bottom:52px;max-width:600px;margin-left:auto;margin-right:auto}
.vt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1160px;margin:0 auto}
.vt-card{background:var(--card);border:1px solid var(--b);border-radius:20px;overflow:hidden;transition:border-color var(--t),transform var(--t),box-shadow var(--t)}
.vt-card:hover{border-color:var(--bh);transform:translateY(-5px);box-shadow:0 26px 54px rgba(0,0,0,.32)}
.vt-thumb{width:100%;aspect-ratio:9/13;background:linear-gradient(180deg,#0C1122 0%,#0F1628 100%);display:flex;align-items:center;justify-content:center;position:relative}
.vt-play{width:50px;height:50px;border-radius:50%;background:var(--or);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 20px rgba(232,112,58,.45);transition:transform var(--t)}
.vt-play i{width:19px;height:19px;margin-left:2px}
.vt-card:hover .vt-play{transform:scale(1.1)}
.vt-badge{position:absolute;top:14px;left:14px;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--or);background:var(--or-dim);border:1px solid rgba(232,112,58,.2);padding:4px 12px;border-radius:100px}
.vt-body{padding:18px 20px 22px}
.vt-body p{font-size:13px;color:var(--g);line-height:1.6;margin-bottom:8px}
.vt-author{font-size:12px;font-weight:700;color:#F8F7F4}

/* ── REVIEWS ── */
.rev-sec{padding:100px 48px;background:var(--bg2)}
.rev-header{text-align:center;margin-bottom:52px}
.rating-pill{display:inline-flex;align-items:center;gap:10px;background:var(--or-dim);border:1px solid rgba(232,112,58,.2);border-radius:100px;padding:8px 22px;font-size:13px;font-weight:700;color:#F8F7F4;margin-bottom:20px}
.rev-stars{color:var(--or);font-size:13px;letter-spacing:2px}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1160px;margin:0 auto}
.rev-card{background:var(--card);border:1px solid var(--b);border-radius:18px;padding:26px;transition:border-color var(--t),transform var(--t),box-shadow var(--t)}
.rev-card:hover{border-color:var(--bh);transform:translateY(-3px);box-shadow:0 20px 44px rgba(0,0,0,.28)}
.rev-s{color:var(--or);font-size:13px;letter-spacing:2px;margin-bottom:12px}
.rev-txt{font-size:13.5px;color:rgba(248,247,244,.7);line-height:1.65;margin-bottom:18px}
.rev-author{display:flex;align-items:center;gap:10px}
.rev-av{width:36px;height:36px;border-radius:50%;background:var(--or-dim);border:1px solid rgba(232,112,58,.2);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:var(--or)}
.rev-name{font-size:13px;font-weight:700}
.rev-role{font-size:11px;color:var(--g)}
.rev-cta{text-align:center;margin-top:40px}

/* ── MOBILE SECTION ── */
.mob-sec{padding:100px 48px 0;background:var(--bg)}
.mob-header{text-align:center;max-width:700px;margin:0 auto 52px}
.mob-sub{font-size:16px;color:var(--g);line-height:1.7;margin-top:14px}
.mob-badge{display:inline-flex;align-items:center;gap:8px;background:var(--or-dim);border:1px solid rgba(232,112,58,.2);border-radius:100px;padding:6px 16px;font-size:12px;font-weight:700;color:var(--or);margin:18px 0 8px}
.mob-visual{max-width:900px;margin:0 auto;display:flex;align-items:flex-end;justify-content:center;gap:16px;padding-top:16px}
.phone{border-radius:28px;overflow:hidden;border:2px solid var(--b);background:var(--card);display:flex;align-items:center;justify-content:center;color:rgba(248,247,244,.07);font-size:10px;text-transform:uppercase;letter-spacing:1px;transition:border-color var(--t),transform var(--t),box-shadow var(--t)}
.phone:hover{border-color:rgba(232,112,58,.3);transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.35)}
.phone-sm{width:120px;height:220px;border-radius:22px}
.tablet-device{width:180px;height:240px;border-radius:18px}
.phone-lg{width:160px;height:300px;border-radius:28px;border-color:rgba(232,112,58,.3)}
.mob-video{width:100%;max-width:1100px;margin:32px auto 0;border-radius:20px 20px 0 0;overflow:hidden;border:1px solid var(--b);border-bottom:none;box-shadow:0 30px 90px rgba(0,0,0,.4)}
.mob-vid-ph{width:100%;aspect-ratio:16/7;background:var(--card);display:flex;align-items:center;justify-content:center;color:rgba(248,247,244,.07);font-size:11px;letter-spacing:1px;text-transform:uppercase}

/* ── SUPPORT ── */
.sup-sec{padding:72px 48px;background:var(--bg2);border-top:1px solid var(--b)}
.sup-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1160px;margin:0 auto}
.sup-item{text-align:center;padding:36px 28px;background:var(--card);border:1px solid var(--b);border-radius:18px;transition:border-color var(--t),transform var(--t),box-shadow var(--t)}
.sup-item:hover{border-color:var(--bh);transform:translateY(-3px);box-shadow:0 20px 44px rgba(0,0,0,.28)}
.sup-ico{width:52px;height:52px;margin:0 auto 14px;border-radius:14px;background:var(--or-dim);border:1px solid rgba(232,112,58,.2);display:flex;align-items:center;justify-content:center}
.sup-ico i{width:24px;height:24px;color:var(--or)}
.sup-item h4{font-size:15px;font-weight:700;margin-bottom:8px}
.sup-item p{font-size:13px;color:var(--g);line-height:1.6}
.sup-item a{color:var(--or);font-weight:600}

/* ── PROMO BAND ── */
.promo-band{padding:36px 48px;background:var(--bg);border-top:1px solid var(--b);border-bottom:1px solid var(--b)}
.promo-inner{max-width:1160px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.promo-left{display:flex;align-items:center;gap:20px}
.promo-badge{width:46px;height:46px;border-radius:12px;background:var(--or-dim);border:1px solid rgba(232,112,58,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.promo-badge i{width:22px;height:22px;color:var(--or)}
.promo-text{font-size:14px;font-weight:600;color:#F8F7F4}
.promo-text small{font-size:13px;color:var(--g);font-weight:400;display:block;margin-top:2px}
.promo-btn{font-size:13.5px;font-weight:700;color:var(--or);background:var(--or-dim);border:1px solid rgba(232,112,58,.25);padding:10px 24px;border-radius:100px;transition:all var(--t);flex-shrink:0}
.promo-btn:hover{background:rgba(232,112,58,.2);transform:translateY(-1px)}

/* ── FAQ ── */
.faq-sec{padding:100px 48px;background:var(--bg)}
.faq-inner{max-width:760px;margin:0 auto}
.faq-header{text-align:center;margin-bottom:52px}
.faq-header h2{font-size:clamp(28px,4vw,46px);font-weight:900;letter-spacing:-2px;line-height:1.05;margin-bottom:14px}
.faq-header p{color:var(--g);font-size:15px}
.faq-header a{color:var(--or)}
.faq-item{border-top:1px solid var(--b)}
.faq-item:last-child{border-bottom:1px solid var(--b)}
.faq-q{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;padding:22px 0;gap:16px;font-size:15.5px;font-weight:600;color:#F8F7F4;background:transparent;cursor:pointer;transition:color var(--t)}
.faq-q:hover{color:var(--or)}
.faq-arrow{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;transition:transform var(--t),background var(--t)}
.faq-item.open .faq-arrow{transform:rotate(45deg);background:var(--or-dim);color:var(--or)}
.faq-a{font-size:14.5px;color:var(--g);line-height:1.75;max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s ease}
.faq-item.open .faq-a{max-height:400px;padding-bottom:22px}

/* ── CTA FINAL ── */
.cta-sec{padding:120px 48px;text-align:center;background:var(--bg2);position:relative;overflow:hidden}
.cta-glow{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 60% 80% at 50% 120%,rgba(232,112,58,.11) 0%,transparent 65%)}
.cta-in{position:relative;z-index:1;max-width:680px;margin:0 auto}
.cta-in h2{font-size:clamp(32px,5vw,58px);font-weight:900;letter-spacing:-2.5px;line-height:1.05;margin-bottom:16px}
.cta-in p{font-size:17px;color:var(--g);line-height:1.7;margin-bottom:44px}
.cta-btns{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.cta-meta{display:flex;align-items:center;justify-content:center;gap:20px;font-size:12px;color:rgba(248,247,244,.25)}

/* ── STRIP ── */
.strip{padding:72px 48px;background:var(--bg);border-top:1px solid var(--b);text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}
.strip p{font-size:20px;font-weight:700;color:rgba(248,247,244,.8);letter-spacing:-.4px}
.strip span{color:var(--or)}

/* ── FOOTER ── */
footer{background:#060914;border-top:1px solid var(--b);padding:76px 48px 44px}
.foot-in{max-width:1160px;margin:0 auto}
.foot-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:56px;margin-bottom:60px}
.f-brand p{font-size:13px;color:var(--g);line-height:1.7;max-width:230px;margin-bottom:22px}
.f-soc{display:flex;gap:10px}
.soc{width:34px;height:34px;border-radius:8px;background:var(--card);border:1px solid var(--b);display:flex;align-items:center;justify-content:center;color:var(--g);transition:all var(--t)}
.soc i{width:15px;height:15px}
.soc:hover{border-color:var(--bh);color:var(--or);transform:translateY(-2px)}
.f-col h4{font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:rgba(248,247,244,.27);margin-bottom:16px}
.f-col ul{display:flex;flex-direction:column;gap:10px}
.f-col a{font-size:13.5px;color:var(--g);transition:color var(--t)}
.f-col a:hover{color:var(--or)}
.foot-bottom{border-top:1px solid var(--b);padding-top:26px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.foot-bottom p{font-size:12px;color:rgba(248,247,244,.18)}
.foot-addr{font-size:12px;color:rgba(248,247,244,.18);text-align:right;line-height:1.6}

/* ── REVEAL ── */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

@media (prefers-reduced-motion: reduce){
  .rv{transition:opacity .3s ease;transform:none}
  .f-line{animation:none}
}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .nav-mid{display:none}
  .nav,.nav.on{padding:16px 24px}
  .split{grid-template-columns:1fr;gap:40px}
  .split.flip{direction:ltr}
  .ab-grid{grid-template-columns:1fr}
  .vt-grid{grid-template-columns:1fr 1fr}
  .rev-grid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px}
  .sup-grid{grid-template-columns:1fr 1fr}
  .integ-grid-logos{grid-template-columns:repeat(3,1fr)}
  .integ-more{grid-column:span 3}
  .process-card{padding:40px 32px}
}
@media(max-width:640px){
  .nav,.nav.on{padding:14px 18px}
  .hero{padding:110px 18px 0}
  .hero-sub{font-size:17px}
  .sec,.funnels-sec,.ab-sec,.vt-sec,.rev-sec,.mob-sec,.sup-sec,.cta-sec,.promo-band,.templates-sec,.faq-sec{padding:68px 18px}
  .logos{padding:36px 18px}.logos-row{gap:22px}
  .quote-band{padding:56px 18px}
  .q-text{font-size:18px}
  .vt-grid{grid-template-columns:1fr}
  .rev-grid{grid-template-columns:1fr}
  .ab-grid{grid-template-columns:1fr}
  .sup-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:24px}
  footer{padding:52px 18px 36px}
  .foot-addr{text-align:left}
  .strip{padding:56px 18px}
  .strip p{font-size:17px}
  .cta-sec{padding:80px 18px}
  .integ-grid-logos{grid-template-columns:repeat(2,1fr)}
  .integ-more{grid-column:span 2}
  .mob-visual{gap:10px}
  .phone-sm{width:82px;height:150px}
  .tablet-device{width:110px;height:150px}
  .phone-lg{width:108px;height:200px}
  .promo-inner{flex-direction:column;text-align:center}
  .promo-left{flex-direction:column}
  .process-card{padding:28px 20px}
  .amp-right{grid-template-columns:1fr;gap:28px;margin-top:44px;padding-top:0}
  .ai-step{gap:14px}
  .rev-card,.vt-card{padding:22px}
  .h2{letter-spacing:-1px}
}
@media(max-width:400px){
  .hero h1{font-size:26px}
  .btn-primary,.btn-ghost{width:100%;justify-content:center}
  .cta-btns{flex-direction:column;width:100%}
  .cta-btns .btn-primary,.cta-btns .btn-ghost{width:100%}
}

/* ── ELEMENTOS: mockup de navegador anotado ── */
.elem-stage{position:relative;width:100%;min-height:420px;display:flex;align-items:center;justify-content:center}
.elem-glow{position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(232,112,58,.14) 0%,transparent 70%);filter:blur(40px);top:-40px;right:-60px;z-index:0;pointer-events:none}
.browser-mock{position:relative;z-index:1;width:100%;max-width:440px;border-radius:16px;background:linear-gradient(165deg,#0D1426,#0A0F1E);border:1px solid rgba(255,255,255,.09);box-shadow:0 40px 90px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);overflow:visible}
.bm-bar{display:flex;align-items:center;gap:6px;padding:13px 16px;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.07);border-radius:16px 16px 0 0}
.bm-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.bm-url{margin-left:12px;font-size:10.5px;color:var(--g);background:rgba(255,255,255,.045);padding:4px 12px;border-radius:6px;flex:1;max-width:190px}
.bm-body{padding:28px 28px 34px;position:relative;overflow:hidden;border-radius:0 0 16px 16px}
.bm-nav{display:flex;align-items:center;gap:12px;margin-bottom:36px}
.bm-logo{width:20px;height:20px;border-radius:6px;background:var(--or);flex-shrink:0}
.bm-navline{height:6px;border-radius:3px;background:rgba(255,255,255,.1);flex:1}
.bm-navline.short{flex:.55}
.bm-title-line{height:13px;border-radius:4px;background:rgba(255,255,255,.14);margin-bottom:9px}
.bm-title-line.l1{width:90%}
.bm-title-line.l2{width:60%;background:var(--or);opacity:.85}
.bm-sub-line{height:7px;width:72%;border-radius:4px;background:rgba(255,255,255,.07);margin:14px 0 24px}
.bm-cta-wrap{position:relative;display:inline-block}
.bm-cta{background:var(--or);color:#fff;font-size:12px;font-weight:700;padding:11px 22px;border-radius:8px;box-shadow:0 10px 24px rgba(232,112,58,.35);display:inline-block}
.bm-callout{position:absolute;top:calc(100% + 12px);left:0;display:flex;align-items:center;gap:6px;font-size:10px;font-weight:600;color:var(--or2);white-space:nowrap}
.bm-callout::before{content:"";width:1px;height:10px;background:rgba(232,112,58,.4);position:absolute;top:-11px;left:3px}
.co-dot{width:5px;height:5px;border-radius:50%;background:var(--or);flex-shrink:0}
.bm-tag{position:absolute;z-index:3;font-size:10.5px;font-weight:600;background:rgba(15,22,40,.92);border:1px solid rgba(232,112,58,.28);color:var(--or2);padding:6px 12px;border-radius:8px;box-shadow:0 14px 30px rgba(0,0,0,.4);display:flex;align-items:center;gap:6px;animation:bm-tag-float 5.5s ease-in-out infinite}
.bm-tag i{width:12px;height:12px}
.bm-tag.tag1{top:16%;right:-13%;animation-delay:.2s}
.bm-tag.tag2{bottom:14%;left:-14%;animation-delay:1.3s}
@keyframes bm-tag-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (max-width:900px){
  .bm-tag{display:none}
  .browser-mock{max-width:360px}
}

/* ═══════════════════════════════════════════════
   AMPLIACIÓN — Botón flotante de WhatsApp (global)
═══════════════════════════════════════════════ */
.wa-float{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:998;
  width:60px;height:60px;
  border-radius:50%;
  background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(37,211,102,.45),0 0 0 0 rgba(37,211,102,.5);
  transition:transform var(--t),box-shadow var(--t);
  animation:wa-pulse 2.6s ease-in-out infinite;
}
.wa-float:hover{transform:translateY(-3px) scale(1.05)}
.wa-float svg{width:30px;height:30px}
.wa-tooltip{
  position:absolute;
  right:72px;
  white-space:nowrap;
  background:#0F1628;
  border:1px solid var(--b);
  color:#F8F7F4;
  font-size:12.5px;
  font-weight:600;
  padding:9px 14px;
  border-radius:9px;
  opacity:0;
  transform:translateX(6px);
  transition:opacity var(--t),transform var(--t);
  pointer-events:none;
  box-shadow:0 14px 30px rgba(0,0,0,.35);
}
.wa-float:hover .wa-tooltip{opacity:1;transform:translateX(0)}
@keyframes wa-pulse{
  0%,100%{box-shadow:0 10px 30px rgba(37,211,102,.45),0 0 0 0 rgba(37,211,102,.35)}
  50%{box-shadow:0 10px 30px rgba(37,211,102,.45),0 0 0 10px rgba(37,211,102,0)}
}
@media(max-width:640px){
  .wa-float{right:16px;bottom:16px;width:54px;height:54px}
  .wa-float svg{width:26px;height:26px}
  .wa-tooltip{display:none}
}

/* ═══════════════════════════════════════════════
   PÁGINAS INTERNAS — hero de página + breadcrumb
═══════════════════════════════════════════════ */
.page-hero{
  position:relative;
  padding:170px 48px 90px;
  overflow:hidden;
  text-align:center;
}
.page-hero-glow{
  position:absolute;inset:0;z-index:0;
  background:radial-gradient(ellipse 75% 60% at 50% -10%,rgba(232,112,58,.18) 0%,transparent 65%),#080C18;
}
.page-hero-glow::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(232,112,58,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(232,112,58,.035) 1px,transparent 1px);
  background-size:72px 72px;opacity:.7;
  mask-image:radial-gradient(ellipse 85% 70% at center,#000 0%,rgba(0,0,0,.9) 45%,transparent 100%);
}
.page-hero-in{position:relative;z-index:2;max-width:820px;margin:0 auto}
.breadcrumb{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;color:var(--g2);margin-bottom:24px;flex-wrap:wrap}
.breadcrumb a{color:var(--g);transition:color var(--t)}
.breadcrumb a:hover{color:var(--or)}
.breadcrumb i{width:12px;height:12px}
.breadcrumb span{color:var(--or2);font-weight:600}
.page-hero h1{font-size:clamp(30px,4.4vw,54px);font-weight:900;letter-spacing:-1.6px;line-height:1.08;margin-bottom:18px}
.page-hero h1 span{color:var(--or)}
.page-hero .p{font-size:17px;max-width:640px;margin-left:auto;margin-right:auto}

/* ── VALORES / GRID GENÉRICO ── */
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1160px;margin:0 auto}
.value-card{background:var(--card);border:1px solid var(--b);border-radius:18px;padding:32px 28px;transition:border-color var(--t),transform var(--t),box-shadow var(--t)}
.value-card:hover{border-color:var(--bh);transform:translateY(-4px);box-shadow:0 20px 44px rgba(0,0,0,.3)}
.value-ico{width:52px;height:52px;border-radius:14px;background:var(--or-dim);border:1px solid rgba(232,112,58,.2);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.value-ico i{width:24px;height:24px;color:var(--or)}
.value-card h3{font-size:16.5px;font-weight:800;margin-bottom:10px;letter-spacing:-.2px}
.value-card p{font-size:13.5px;color:var(--g);line-height:1.7}
@media(max-width:900px){ .values-grid{grid-template-columns:1fr 1fr} }
@media(max-width:640px){ .values-grid{grid-template-columns:1fr} }

/* ── ESTADÍSTICAS / COMPROMISOS (sin datos inventados, son promesas de servicio) ── */
.promise-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;max-width:1160px;margin:0 auto;background:var(--b);border:1px solid var(--b);border-radius:18px;overflow:hidden}
.promise-cell{background:var(--card);padding:30px 20px;text-align:center}
.promise-cell i{width:26px;height:26px;color:var(--or);margin-bottom:12px}
.promise-cell h4{font-size:13.5px;font-weight:800;margin-bottom:5px}
.promise-cell p{font-size:11.5px;color:var(--g);line-height:1.5}
@media(max-width:900px){ .promise-strip{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .promise-strip{grid-template-columns:1fr} }

/* ── TIMELINE VERTICAL (metodología) ── */
.mtl-timeline{position:relative;max-width:900px;margin:0 auto;padding-left:0}
.mtl-line{position:absolute;left:29px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,rgba(232,112,58,.5),rgba(232,112,58,.05));z-index:0}
.mtl-step{position:relative;z-index:1;display:flex;gap:28px;padding-bottom:56px}
.mtl-step:last-child{padding-bottom:0}
.mtl-dot{flex:none;width:60px;height:60px;border-radius:50%;background:var(--card);border:2px solid rgba(232,112,58,.35);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:var(--or);box-shadow:0 10px 26px rgba(0,0,0,.3)}
.mtl-body{padding-top:8px}
.mtl-body .mtl-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--or2);margin-bottom:6px}
.mtl-body h3{font-size:19px;font-weight:800;margin-bottom:10px;letter-spacing:-.3px}
.mtl-body p{font-size:14.5px;color:var(--g);line-height:1.75;margin-bottom:14px}
.mtl-tags{display:flex;flex-wrap:wrap;gap:8px}
.mtl-tags span{font-size:11.5px;font-weight:600;color:var(--or2);background:var(--or-dim);border:1px solid rgba(232,112,58,.22);padding:6px 13px;border-radius:100px}
@media(max-width:640px){
  .mtl-line{left:23px}
  .mtl-step{gap:18px}
  .mtl-dot{width:48px;height:48px;font-size:16px}
}

/* ── CITA / PRINCIPIO PSICOLÓGICO (tarjetas) ── */
.psy-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:1000px;margin:0 auto}
.psy-card{background:linear-gradient(165deg,rgba(232,112,58,.07),rgba(232,112,58,.01));border:1px solid rgba(232,112,58,.18);border-radius:16px;padding:26px}
.psy-card h4{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:800;margin-bottom:10px}
.psy-card h4 i{width:18px;height:18px;color:var(--or)}
.psy-card p{font-size:13.5px;color:var(--g);line-height:1.7}
@media(max-width:640px){ .psy-grid{grid-template-columns:1fr} }

/* ── MASCOTA / NOTA DE MARCA ── */
.mascot-block{display:flex;align-items:center;gap:28px;max-width:820px;margin:0 auto;background:var(--card);border:1px solid var(--b);border-radius:20px;padding:30px 34px}
.mascot-block img{width:96px;height:96px;object-fit:contain;flex-shrink:0}
.mascot-block p{font-size:14px;color:var(--g);line-height:1.7}
.mascot-block strong{color:#F8F7F4}
@media(max-width:640px){ .mascot-block{flex-direction:column;text-align:center;padding:26px 22px} }

/* ── CTA banda intermedia con WhatsApp ── */
.wa-cta-band{max-width:920px;margin:0 auto;background:linear-gradient(135deg,rgba(37,211,102,.1),rgba(37,211,102,.02));border:1px solid rgba(37,211,102,.25);border-radius:20px;padding:34px 38px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.wa-cta-left{display:flex;align-items:center;gap:16px}
.wa-cta-ico{width:50px;height:50px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wa-cta-ico svg{width:24px;height:24px}
.wa-cta-text strong{display:block;font-size:15px;margin-bottom:3px}
.wa-cta-text span{font-size:13px;color:var(--g)}
.btn-whatsapp{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:700;color:#0A0E1A;background:#25D366;padding:13px 26px;border-radius:10px;box-shadow:0 8px 24px rgba(37,211,102,.35);transition:all var(--t);flex-shrink:0}
.btn-whatsapp:hover{background:#20bd5a;transform:translateY(-2px)}
.btn-whatsapp svg{width:18px;height:18px}
@media(max-width:640px){ .wa-cta-band{flex-direction:column;text-align:center;padding:26px} .wa-cta-left{flex-direction:column} }

/* ── FOTO CONTEXTO (imágenes reutilizadas del proyecto) ── */
.img-row{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;max-width:1160px;margin:0 auto}
.img-row .img-box{border-radius:18px;overflow:hidden;border:1px solid var(--b);background:var(--card)}
.img-row .img-box img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:900px){ .img-row{grid-template-columns:1fr} }

/* ── ANCLA de secciones internas (para navegación entre páginas) ── */
section[id]{scroll-margin-top:90px}

/* ═══════════════════════════════════════════════
   AMPLIACIÓN 2 — Sobre Nosotros / Metodología
═══════════════════════════════════════════════ */

/* WhatsApp showcase (sustituye a la banda plana anterior) */
.wa-showcase{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;max-width:1160px;margin:0 auto}
.wa-showcase-list{display:flex;flex-direction:column;gap:16px;margin:22px 0 30px}
.wa-showcase-item{display:flex;gap:12px;align-items:flex-start}
.wa-showcase-item i{width:20px;height:20px;color:#25D366;flex-shrink:0;margin-top:2px}
.wa-showcase-item p{font-size:14px;color:var(--g);line-height:1.6;margin:0}
.wa-showcase-item strong{color:#F8F7F4;display:block;font-size:13.5px;margin-bottom:2px}
@media(max-width:900px){ .wa-showcase{grid-template-columns:1fr;gap:36px} }

/* Mockup de chat de WhatsApp */
.chat-phone{max-width:330px;margin:0 auto;background:#0B1120;border:1px solid var(--b);border-radius:22px;overflow:hidden;box-shadow:0 34px 80px rgba(0,0,0,.45)}
.chat-phone-bar{display:flex;gap:6px;padding:12px 16px;background:rgba(255,255,255,.03);border-bottom:1px solid var(--b)}
.cp-dot{width:8px;height:8px;border-radius:50%}
.chat-phone-head{display:flex;align-items:center;gap:11px;padding:15px 16px;border-bottom:1px solid var(--b);background:linear-gradient(135deg,rgba(37,211,102,.1),transparent)}
.cp-avatar{width:38px;height:38px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cp-avatar i{width:19px;height:19px;color:#0A0E1A}
.chat-phone-head strong{display:block;font-size:13px;color:#F8F7F4}
.chat-phone-head small{font-size:11px;color:#25D366;display:flex;align-items:center;gap:5px}
.chat-phone-head small::before{content:"";width:6px;height:6px;border-radius:50%;background:#25D366}
.chat-phone-body{padding:20px 16px;display:flex;flex-direction:column;gap:10px;min-height:210px;background:radial-gradient(circle at top right, rgba(232,112,58,.06), transparent 60%)}
.bubble{max-width:80%;padding:10px 14px;border-radius:14px;font-size:12.5px;line-height:1.55}
.bubble.in{align-self:flex-start;background:rgba(255,255,255,.07);border-bottom-left-radius:4px;color:#F8F7F4}
.bubble.out{align-self:flex-end;background:#25D366;color:#06210f;border-bottom-right-radius:4px;font-weight:600}
.chat-phone-input{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-top:1px solid var(--b);color:var(--g2);font-size:11.5px}
.chat-phone-input i{width:16px;height:16px;color:#25D366}

/* Hero con foto enmarcada + insignia flotante */
.hero-photo-frame{position:relative;max-width:400px;margin:0 auto}
.hero-photo-frame img{width:100%;display:block;border-radius:20px;border:1px solid var(--b);box-shadow:0 34px 80px rgba(0,0,0,.45)}
.hero-photo-badge{position:absolute;bottom:-20px;left:-16px;background:#0F1628;border:1px solid rgba(232,112,58,.32);border-radius:14px;padding:13px 18px;display:flex;align-items:center;gap:11px;box-shadow:0 20px 46px rgba(0,0,0,.45)}
.hero-photo-badge i{width:19px;height:19px;color:var(--or);flex-shrink:0}
.hero-photo-badge strong{display:block;font-size:12.5px;color:#F8F7F4}
.hero-photo-badge span{font-size:10.5px;color:var(--g)}
@media(max-width:640px){ .hero-photo-frame{max-width:280px} }

/* Miniatura de prueba (imágenes pequeñas de apoyo) */
.mini-proof{display:inline-flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--b);border-radius:14px;padding:10px 16px 10px 10px;margin-top:22px}
.mini-proof img{width:64px;height:48px;object-fit:cover;border-radius:8px;display:block}
.mini-proof span{font-size:12px;color:var(--g);max-width:200px;line-height:1.5}

/* Móvil enmarcado para capturas verticales */
.proof-phone-wrap{display:flex;justify-content:center}
.proof-phone{width:180px;height:340px;border-radius:30px;border:2px solid var(--b);background:var(--card);overflow:hidden;box-shadow:0 34px 70px rgba(0,0,0,.4)}
.proof-phone img{width:100%;height:100%;object-fit:cover;display:block}

/* Comparativa Supplio vs agencia generalista */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px;margin:0 auto}
.compare-col{border-radius:18px;padding:30px 26px;border:1px solid var(--b)}
.compare-col.bad{background:var(--card)}
.compare-col.good{background:linear-gradient(165deg,rgba(232,112,58,.1),rgba(232,112,58,.015));border-color:rgba(232,112,58,.3)}
.compare-col h3{font-size:14.5px;font-weight:800;margin-bottom:20px;display:flex;align-items:center;gap:9px}
.compare-col h3 i{width:18px;height:18px}
.compare-col.bad h3 i{color:var(--g)}
.compare-col.good h3 i{color:var(--or)}
.compare-list{display:flex;flex-direction:column;gap:13px;list-style:none}
.compare-list li{display:flex;gap:10px;font-size:13px;color:var(--g);line-height:1.55}
.compare-list li i{width:16px;height:16px;flex-shrink:0;margin-top:2px}
.compare-col.bad .compare-list li i{color:#b25c50}
.compare-col.good .compare-list li i{color:#3ecf8e}
@media(max-width:640px){ .compare-grid{grid-template-columns:1fr} }

/* Pills de sectores con icono */
.sector-pills{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:920px;margin:0 auto}
.sector-pill{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--b);padding:12px 20px;border-radius:100px;font-size:13.5px;font-weight:600;transition:border-color var(--t),transform var(--t)}
.sector-pill:hover{border-color:var(--bh);transform:translateY(-2px)}
.sector-pill i{width:17px;height:17px;color:var(--or)}

/* Cita destacada reutilizable en páginas internas */
.page-quote{max-width:760px;margin:0 auto;text-align:center;padding:8px 0}
.page-quote .q-mark{font-size:60px;line-height:.3;color:var(--or);display:block;margin-bottom:18px;font-family:Georgia,serif}
.page-quote p{font-size:clamp(16px,2vw,20px);font-weight:600;color:#F8F7F4;line-height:1.6}

/* Franja de credenciales/ubicación bajo el hero */
.hero-tags{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.hero-tag{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--g);background:rgba(255,255,255,.04);border:1px solid var(--b);padding:7px 14px;border-radius:100px}
.hero-tag i{width:13px;height:13px;color:var(--or)}

/* ═══════════════════════════════════════════════
   AMPLIACIÓN 3 — Rediseño sin imágenes propias
═══════════════════════════════════════════════ */

/* Banda de WhatsApp robusta (sustituye al showcase con chat que fallaba) */
.wa-banner{max-width:920px;margin:0 auto;background:linear-gradient(135deg,rgba(37,211,102,.13),rgba(37,211,102,.02));border:1px solid rgba(37,211,102,.3);border-radius:22px;padding:38px 42px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.wa-banner-icon{width:60px;height:60px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 14px 34px rgba(37,211,102,.4)}
.wa-banner-icon svg{width:28px;height:28px;display:block}
.wa-banner-text{flex:1;min-width:220px}
.wa-banner-text h3{font-size:18px;font-weight:800;margin-bottom:6px;letter-spacing:-.2px}
.wa-banner-text p{font-size:13.5px;color:var(--g);line-height:1.6}
.wa-banner .btn-whatsapp{flex-shrink:0}
@media(max-width:640px){ .wa-banner{flex-direction:column;text-align:center;padding:30px 24px} }

/* Tarjeta de marca para hero (sin foto) */
.brand-card{position:relative;max-width:400px;margin:0 auto;background:linear-gradient(165deg,rgba(232,112,58,.11),rgba(232,112,58,.02));border:1px solid rgba(232,112,58,.28);border-radius:24px;padding:42px 34px;text-align:center;box-shadow:0 34px 80px rgba(0,0,0,.4)}
.brand-card-icon{width:62px;height:62px;border-radius:17px;background:var(--or);display:flex;align-items:center;justify-content:center;margin:0 auto 22px;box-shadow:0 12px 30px rgba(232,112,58,.4)}
.brand-card-icon i{width:28px;height:28px;color:#fff}
.brand-card-quote{font-size:18px;font-weight:700;color:#F8F7F4;line-height:1.5;margin-bottom:26px}
.brand-card-sectors{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.brand-card-sectors span{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--g);background:rgba(255,255,255,.05);border:1px solid var(--b);padding:8px 13px;border-radius:100px}
.brand-card-sectors span i{width:13px;height:13px;color:var(--or)}

/* Foto de apoyo con proporción fija y controlada (evita que una imagen se vea "gigante") */
.fixed-photo{width:100%;aspect-ratio:4/3;border-radius:16px;overflow:hidden;border:1px solid var(--b);background:var(--card)}
.fixed-photo img{width:100%;height:100%;object-fit:cover;display:block}
.fixed-photo-cap{font-size:11.5px;color:var(--g2);margin-top:10px;text-align:center}

/* Panel de resultados ilustrativo (antes/después sin imagen) */
.results-showcase{display:flex;align-items:center;justify-content:center;gap:18px;max-width:640px;margin:0 auto;flex-wrap:wrap}
.results-card{flex:1;min-width:190px;background:var(--card);border:1px solid var(--b);border-radius:18px;padding:24px 20px;text-align:center}
.results-card.win{border-color:rgba(232,112,58,.35);background:linear-gradient(165deg,rgba(232,112,58,.08),rgba(232,112,58,.01))}
.rc-head{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--g);margin-bottom:16px;text-transform:uppercase;letter-spacing:.5px}
.results-card.win .rc-head{color:var(--or2)}
.rc-head i{width:14px;height:14px}
.rc-bars{display:flex;align-items:flex-end;justify-content:center;gap:7px;height:70px;margin-bottom:12px}
.rc-bars i{width:15px;border-radius:4px 4px 1px 1px;background:rgba(255,255,255,.15);display:block}
.results-card.win .rc-bars i{background:linear-gradient(180deg,var(--or2),var(--or))}
.rc-foot{font-size:10.5px;color:var(--g2)}
.results-arrow{width:38px;height:38px;border-radius:50%;background:var(--or-dim);border:1px solid rgba(232,112,58,.3);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.results-arrow i{width:17px;height:17px;color:var(--or)}
@media(max-width:640px){ .results-arrow{transform:rotate(90deg)} }