*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:#080810;color:#F0F0FF;overflow-x:hidden}

:root{
  --purple:#8B5CF6;
  --purple-dark:#5B21B6;
  --pink:#EC4899;
  --bg:#080810;
  --bg2:#0D0D1A;
  --bg3:#12121F;
  --border:#1E1E35;
  --text:#F0F0FF;
  --muted:#6B6B8A;
  --muted2:#9494B0;
}

/* ─── NAV ─── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 3rem;height:68px;
  border-bottom:1px solid var(--border);
  background:rgba(8,8,16,0.8);
  backdrop-filter:blur(20px);
}
.logo{
  font-size:1.1rem;font-weight:900;letter-spacing:-0.5px;
  display:flex;align-items:center;gap:10px;
}
.logo-mark{
  width:30px;height:30px;border-radius:8px;
  background:linear-gradient(135deg,var(--purple),var(--pink));
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;
}
.nav-links{display:flex;align-items:center;gap:2.5rem;list-style:none}
.nav-links a{text-decoration:none;color:var(--muted2);font-size:.875rem;font-weight:500;transition:color .15s}
.nav-links a:hover{color:var(--text)}
.nav-actions{display:flex;align-items:center;gap:.75rem}
.btn-ghost{
  background:transparent;color:var(--muted2);border:1px solid var(--border);
  padding:.5rem 1.1rem;border-radius:8px;font-size:.875rem;font-weight:600;
  cursor:pointer;transition:all .15s;text-decoration:none;
}
.btn-ghost:hover{border-color:var(--purple);color:var(--text)}
.btn-purple{
  background:var(--purple);color:#fff;border:none;
  padding:.5rem 1.25rem;border-radius:8px;font-size:.875rem;font-weight:700;
  cursor:pointer;transition:all .15s;text-decoration:none;
  box-shadow:0 0 20px rgba(139,92,246,.35);
}
.btn-purple:hover{background:#7C3AED;transform:translateY(-1px)}

/* ─── HERO ─── */
.hero{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:120px 2rem 6rem;position:relative;overflow:hidden;
}
/* ambient blobs */
.blob{
  position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;
}
.blob-1{
  width:500px;height:500px;
  background:radial-gradient(circle,rgba(139,92,246,.18),transparent 70%);
  top:-100px;left:-100px;
}
.blob-2{
  width:400px;height:400px;
  background:radial-gradient(circle,rgba(236,72,153,.12),transparent 70%);
  top:100px;right:-80px;
}
.blob-3{
  width:300px;height:300px;
  background:radial-gradient(circle,rgba(139,92,246,.1),transparent 70%);
  bottom:0;left:40%;
}
.hero-inner{
  max-width:900px;text-align:center;position:relative;z-index:1;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.3);
  padding:.35rem 1rem;border-radius:999px;
  font-size:.75rem;font-weight:700;letter-spacing:.08em;color:#A78BFA;
  text-transform:uppercase;margin-bottom:2rem;
}
.eyebrow-dot{width:6px;height:6px;border-radius:50%;background:#22C55E;animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

.hero h1{
  font-size:clamp(3rem,6.5vw,5.5rem);
  font-weight:900;line-height:.97;
  letter-spacing:-3px;
  margin-bottom:1.5rem;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(90deg,#A78BFA 0%,#EC4899 60%,#F97316 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-sub{
  font-size:1.1rem;color:var(--muted2);line-height:1.7;
  max-width:560px;margin:0 auto 2.5rem;
}
.hero-cta-row{
  display:flex;align-items:center;gap:1rem;justify-content:center;flex-wrap:wrap;
  margin-bottom:1.25rem;
}
.btn-lg{
  padding:.875rem 2.25rem;border-radius:10px;font-size:1rem;font-weight:800;
  cursor:pointer;border:none;transition:all .2s;text-decoration:none;display:inline-block;
}
.btn-lg-purple{
  background:linear-gradient(135deg,var(--purple),#7C3AED);color:#fff;
  box-shadow:0 4px 30px rgba(139,92,246,.4);
}
.btn-lg-purple:hover{transform:translateY(-2px);box-shadow:0 8px 40px rgba(139,92,246,.5)}
.btn-lg-outline{
  background:transparent;color:var(--text);
  border:1px solid var(--border);
}
.btn-lg-outline:hover{border-color:var(--purple);color:#A78BFA}
.hero-note{font-size:.8rem;color:var(--muted);margin-top:.5rem}

/* stats row */
.stats-row{
  display:flex;align-items:center;justify-content:center;gap:3rem;
  margin-top:3.5rem;padding-top:3rem;
  border-top:1px solid var(--border);
  flex-wrap:wrap;
}
.stat{text-align:center}
.stat-n{font-size:2rem;font-weight:900;letter-spacing:-1px;color:#fff}
.stat-n span{
  background:linear-gradient(90deg,var(--purple),var(--pink));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.stat-l{font-size:.8rem;color:var(--muted);margin-top:.15rem}

/* ─── DEMO SECTION ─── */
.demo-section{
  padding:6rem 2rem;
  background:var(--bg2);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.section-header{text-align:center;margin-bottom:3rem}
.section-eyebrow{
  display:inline-block;
  font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--purple);margin-bottom:.75rem;
}
.section-title{
  font-size:clamp(1.8rem,3.5vw,2.75rem);
  font-weight:900;letter-spacing:-1.5px;line-height:1.05;margin-bottom:.75rem;
}
.section-sub{font-size:.95rem;color:var(--muted2);max-width:480px;margin:0 auto}

/* search box */
.search-box{
  max-width:760px;margin:0 auto;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:18px;
}
.search-top{
  padding:1.5rem;
  display:grid;grid-template-columns:1fr 1fr auto;gap:.75rem;
  border-bottom:1px solid var(--border);
}
.field-label{
  font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);margin-bottom:.4rem;
}
.field-select{
  width:100%;background:var(--bg);border:1px solid var(--border);
  color:var(--text);padding:.7rem 1rem;border-radius:8px;
  font-size:.875rem;font-family:inherit;cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B6B8A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
  transition:border-color .15s;
}
.field-select:focus{outline:none;border-color:var(--purple)}
.search-btn{
  align-self:flex-end;
  background:linear-gradient(135deg,var(--purple),#7C3AED);color:#fff;
  border:none;padding:.7rem 1.5rem;border-radius:8px;
  font-weight:800;font-size:.875rem;font-family:inherit;
  cursor:pointer;transition:all .2s;white-space:nowrap;
  box-shadow:0 0 20px rgba(139,92,246,.3);
}
.search-btn:hover{transform:translateY(-1px);box-shadow:0 4px 24px rgba(139,92,246,.45)}
.search-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* results area */
.results-area{display:none;flex-direction:column}
.results-header{
  padding:1rem 1.5rem;
  display:flex;align-items:center;justify-content:between;gap:1rem;
  border-bottom:1px solid var(--border);
  background:rgba(139,92,246,.04);
}
.results-count{
  font-size:.8rem;font-weight:700;color:var(--purple);
  background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.25);
  padding:.25rem .75rem;border-radius:999px;
}
.results-label{font-size:.8rem;color:var(--muted);margin-left:.5rem}

/* lead rows */
.leads-list{display:flex;flex-direction:column}
.lead-row{
  display:grid;
  grid-template-columns:36px 1fr 120px 80px 90px;
  align-items:center;gap:1rem;
  padding:.9rem 1.5rem;
  border-bottom:1px solid var(--border);
  transition:background .15s;
  position:relative;
}
.lead-row:hover{background:rgba(255,255,255,.02)}
.lead-row:last-child{border-bottom:none}
.lead-num{
  width:28px;height:28px;border-radius:6px;
  background:var(--bg);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:700;color:var(--muted);
}
.lead-info{}
.lead-name{font-size:.875rem;font-weight:700;color:var(--text)}
.lead-cat{font-size:.75rem;color:var(--muted);margin-top:.1rem}
.lead-stars{font-size:.75rem;color:#F59E0B;font-weight:600}
.lead-phone{font-size:.8rem;color:var(--muted2);font-weight:500}
.lead-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.65rem;font-weight:800;padding:.25rem .6rem;border-radius:999px;
  text-transform:uppercase;letter-spacing:.05em;
}
.badge-noweb{background:rgba(239,68,68,.12);color:#F87171;border:1px solid rgba(239,68,68,.25)}

/* blurred locked rows */
.lead-row.locked{
  user-select:none;
  filter:blur(5px);
  pointer-events:none;
}
.lock-overlay{
  display:none;
  position:relative;
}
.lock-wall{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:2.5rem 2rem;
  background:linear-gradient(180deg,transparent,var(--bg3) 30%);
  position:relative;z-index:2;
  margin-top:-80px;
}
.lock-icon{
  width:56px;height:56px;border-radius:14px;
  background:linear-gradient(135deg,var(--purple),var(--pink));
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;margin-bottom:1rem;
  box-shadow:0 8px 30px rgba(139,92,246,.4);
}
.lock-title{font-size:1.25rem;font-weight:900;letter-spacing:-.5px;margin-bottom:.4rem}
.lock-sub{font-size:.875rem;color:var(--muted2);margin-bottom:1.5rem;text-align:center;max-width:340px}
.lock-plans{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;margin-bottom:1.25rem}
.lock-plan{
  background:var(--bg);border:1px solid var(--border);
  border-radius:12px;padding:1rem 1.25rem;min-width:140px;
  text-align:center;cursor:pointer;transition:all .2s;
  position:relative;
}
.lock-plan:hover{border-color:var(--purple);transform:translateY(-2px)}
.lock-plan.highlight{border-color:var(--purple);background:rgba(139,92,246,.06)}
.plan-rec{
  position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  background:var(--purple);color:#fff;
  font-size:.6rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 10px;border-radius:999px;white-space:nowrap;
}
.lock-plan-name{font-size:.7rem;color:var(--muted);text-transform:uppercase;font-weight:700;letter-spacing:.08em;margin-bottom:.35rem}
.lock-plan-price{font-size:1.6rem;font-weight:900;letter-spacing:-.5px}
.lock-plan-price sub{font-size:.75rem;font-weight:400;color:var(--muted)}
.lock-plan-desc{font-size:.7rem;color:var(--muted);margin-top:.2rem}
.btn-unlock{
  background:linear-gradient(135deg,var(--purple),#7C3AED);
  color:#fff;border:none;padding:.85rem 2.5rem;
  border-radius:10px;font-size:1rem;font-weight:800;
  cursor:pointer;transition:all .2s;font-family:inherit;
  box-shadow:0 4px 30px rgba(139,92,246,.4);
}
.btn-unlock:hover{transform:translateY(-2px);box-shadow:0 8px 40px rgba(139,92,246,.5)}
.lock-note{font-size:.75rem;color:var(--muted);margin-top:.75rem}

/* scanning animation */
.scanning{
  padding:2.5rem;text-align:center;display:none;
}
.scan-bar-wrap{
  width:100%;height:3px;background:var(--bg);border-radius:3px;margin-bottom:1.25rem;overflow:hidden;
}
.scan-bar{
  height:100%;background:linear-gradient(90deg,var(--purple),var(--pink));
  border-radius:3px;width:0%;transition:width .1s linear;
}
.scan-steps{display:flex;flex-direction:column;gap:.4rem;text-align:left;max-width:360px;margin:0 auto}
.scan-step{
  font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:.5rem;
  opacity:0;transition:opacity .3s;
}
.scan-step.active{opacity:1;color:var(--text)}
.scan-step.done{opacity:.6;color:var(--muted)}
.scan-step-dot{
  width:6px;height:6px;border-radius:50%;background:var(--muted);flex-shrink:0;
}
.scan-step.active .scan-step-dot{background:var(--purple);animation:pulse2 1s infinite}
.scan-step.done .scan-step-dot{background:#22C55E}
@keyframes pulse2{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}

/* ─── HOW ─── */
.how{padding:6rem 2rem;background:var(--bg)}
.how-inner{max-width:1000px;margin:0 auto}
.steps-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border);
  border-radius:16px;overflow:hidden;margin-top:3rem;
}
.step-card{
  background:var(--bg);padding:2rem 1.5rem;
  transition:background .2s;
}
.step-card:hover{background:var(--bg2)}
.step-icon{
  width:44px;height:44px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;margin-bottom:1.25rem;
  border:1px solid var(--border);
}
.step-num-label{
  font-size:.65rem;font-weight:800;letter-spacing:.12em;color:var(--purple);
  text-transform:uppercase;margin-bottom:.4rem;
}
.step-card h3{font-size:.95rem;font-weight:700;margin-bottom:.4rem;line-height:1.3}
.step-card p{font-size:.8rem;color:var(--muted2);line-height:1.6}

/* ─── FEATURES ─── */
.features{
  padding:6rem 2rem;
  background:var(--bg2);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.features-inner{max-width:1000px;margin:0 auto}
.feat-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border);
  border-radius:16px;overflow:hidden;margin-top:3rem;
}
.feat-card{
  background:var(--bg2);padding:2rem;
  transition:background .2s;
}
.feat-card:hover{background:var(--bg3)}
.feat-icon-wrap{
  width:40px;height:40px;border-radius:10px;
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;margin-bottom:1.25rem;
}
.feat-card h4{font-size:.95rem;font-weight:700;margin-bottom:.35rem}
.feat-card p{font-size:.8rem;color:var(--muted2);line-height:1.6}

/* ─── PRICING ─── */
.pricing{padding:6rem 2rem;background:var(--bg)}
.pricing-inner{max-width:960px;margin:0 auto}
.plans-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:18px;
  overflow:hidden;margin-top:3rem;
}
.plan-card{
  background:var(--bg);padding:2rem;position:relative;
  transition:background .2s;
}
.plan-card:hover{background:var(--bg2)}
.plan-card.featured{background:var(--bg2)}
.plan-badge{
  display:inline-block;
  background:linear-gradient(90deg,var(--purple),var(--pink));
  color:#fff;font-size:.65rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;
  padding:.25rem .75rem;border-radius:999px;
  margin-bottom:1rem;
}
.plan-card-name{
  font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;
  color:var(--muted);margin-bottom:.5rem;
}
.plan-card-price{
  font-size:3rem;font-weight:900;letter-spacing:-2px;line-height:1;
  margin-bottom:.25rem;
}
.plan-card-price sup{font-size:1.25rem;vertical-align:super;font-weight:700}
.plan-card-price sub{font-size:.85rem;font-weight:400;color:var(--muted)}
.plan-card-desc{font-size:.8rem;color:var(--muted2);margin:1rem 0;line-height:1.5}
.plan-divider{border:none;border-top:1px solid var(--border);margin:.75rem 0}
.plan-feats{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.75rem}
.plan-feats li{
  font-size:.8rem;color:var(--muted2);
  display:flex;align-items:flex-start;gap:.5rem;
}
.plan-feats li::before{content:'✓';color:var(--purple);font-weight:800;flex-shrink:0;margin-top:.05rem}
.plan-feats li.off::before{content:'·';color:var(--muted)}
.plan-feats li.off{color:#3D3D5A}
.plan-cta{
  display:block;text-align:center;text-decoration:none;
  padding:.75rem;border-radius:8px;font-weight:700;font-size:.875rem;
  transition:all .15s;cursor:pointer;border:none;font-family:inherit;
  width:100%;
}
.plan-cta-purple{background:var(--purple);color:#fff}
.plan-cta-purple:hover{background:#7C3AED}
.plan-cta-ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.plan-cta-ghost:hover{border-color:var(--purple);color:#A78BFA}

/* ─── TESTIMONIALS ─── */
.testi{padding:6rem 2rem;background:var(--bg2);border-top:1px solid var(--border)}
.testi-inner{max-width:1000px;margin:0 auto}
.testi-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border);
  border-radius:16px;overflow:hidden;margin-top:3rem;
}
.testi-card{background:var(--bg2);padding:2rem;transition:background .2s}
.testi-card:hover{background:var(--bg3)}
.t-stars{color:#F59E0B;font-size:.8rem;letter-spacing:2px;margin-bottom:1rem}
.t-text{font-size:.875rem;color:var(--muted2);line-height:1.7;margin-bottom:1.5rem;font-style:italic}
.t-author{display:flex;align-items:center;gap:10px}
.t-av{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.8rem;flex-shrink:0;
}
.t-name{font-size:.8rem;font-weight:700}
.t-role{font-size:.7rem;color:var(--muted)}

/* ─── CTA FINAL ─── */
.cta-final{
  padding:8rem 2rem;text-align:center;
  background:var(--bg);
  border-top:1px solid var(--border);
  position:relative;overflow:hidden;
}
.cta-final::before{
  content:'';position:absolute;
  width:800px;height:400px;
  background:radial-gradient(ellipse,rgba(139,92,246,.1),transparent 70%);
  top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;
}
.cta-final h2{
  font-size:clamp(2.5rem,5vw,4.5rem);
  font-weight:900;letter-spacing:-2.5px;line-height:.95;
  margin-bottom:1.25rem;position:relative;
}
.cta-final h2 em{
  font-style:normal;
  background:linear-gradient(90deg,var(--purple),var(--pink));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.cta-final p{
  font-size:1rem;color:var(--muted2);margin-bottom:2.5rem;
  position:relative;max-width:440px;margin-left:auto;margin-right:auto;
}
.cta-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;position:relative}

/* ─── FOOTER ─── */
footer{
  background:var(--bg2);border-top:1px solid var(--border);
  padding:2.5rem 2rem;
}
.footer-inner{
  max-width:1000px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
}
.footer-copy{font-size:.75rem;color:var(--muted)}
.footer-links{display:flex;gap:1.5rem}
.footer-links a{text-decoration:none;font-size:.75rem;color:var(--muted);transition:color .15s}
.footer-links a:hover{color:var(--text)}

/* modal */
.modal-overlay{
  display:none;position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,.8);backdrop-filter:blur(6px);
  align-items:center;justify-content:center;padding:1rem;
}
.modal-overlay.open{display:flex}
.modal{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:20px;padding:2.5rem;max-width:460px;width:100%;
  position:relative;animation:modalIn .2s ease;
}
@keyframes modalIn{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
.modal-close{
  position:absolute;top:1rem;right:1rem;
  background:var(--bg3);border:1px solid var(--border);
  color:var(--muted);width:30px;height:30px;border-radius:6px;
  cursor:pointer;font-size:.8rem;display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.modal-close:hover{color:var(--text);border-color:var(--purple)}
.modal h3{font-size:1.4rem;font-weight:900;letter-spacing:-.5px;margin-bottom:.4rem}
.modal p{font-size:.875rem;color:var(--muted2);margin-bottom:1.5rem;line-height:1.6}
.modal-input{
  width:100%;background:var(--bg);border:1px solid var(--border);
  color:var(--text);padding:.75rem 1rem;border-radius:8px;
  font-size:.875rem;font-family:inherit;margin-bottom:.75rem;
  transition:border-color .15s;
}
.modal-input:focus{outline:none;border-color:var(--purple)}
.modal-input::placeholder{color:var(--muted)}
.modal-submit{
  width:100%;background:linear-gradient(135deg,var(--purple),#7C3AED);
  color:#fff;border:none;padding:.85rem;border-radius:8px;
  font-size:.95rem;font-weight:800;cursor:pointer;font-family:inherit;
  transition:all .2s;
}
.modal-submit:hover{transform:translateY(-1px);box-shadow:0 8px 30px rgba(139,92,246,.4)}
.modal-secure{font-size:.72rem;color:var(--muted);text-align:center;margin-top:.6rem}

/* responsive */
@media(max-width:768px){
  nav{padding:0 1.25rem}
  .nav-links{display:none}
  .hero h1{letter-spacing:-2px}
  .search-top{grid-template-columns:1fr;grid-template-rows:auto auto auto}
  .steps-grid{grid-template-columns:1fr 1fr}
  .feat-grid{grid-template-columns:1fr}
  .plans-grid{grid-template-columns:1fr}
  .testi-grid{grid-template-columns:1fr}
  .lead-row{grid-template-columns:28px 1fr 80px;gap:.5rem}
  .lead-phone,.lead-stars{display:none}
}

/* --- Contenedor de la Comparativa --- */
.hero-comparison {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 4rem;
  margin-bottom: 5rem;
  width: 100%;
  max-width: 1100px;
}

.comp-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.comp-card h3 {
  font-size: clamp(1.8rem, 3.5vw, 2.75rem);
  font-weight: 900;
  letter-spacing: -1.5px;
  line-height: 1.05;
  margin-bottom: .75rem;
}

/* Colores de títulos idénticos a la imagen */
.comp-card.before h3 {
  color: #a37081; /* Tono rojizo/apagado */
}

.comp-card.after h3 {
  color: #ffffff; /* Tono blanco brillante */
}

/* Contenedores de las imágenes con bordes redondeados */
.comp-card .img-container {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: #12111a;
}

.comp-card .img-container img {
  width: 100%;
  display: block;
  height: auto;
}

/* Textos inferiores */
.comp-meta {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.comp-meta .time {
  font-size: 1.3rem;
  font-weight: 600;
  color: #8c7284;
}

.comp-meta .desc {
  font-size: 1rem;
  color: #61505c;
}

/* Destacados del lado derecho (Con FindLead) */
.comp-meta .time.highlight {
  color: #bfa1ff; /* Morado claro brillante */
}

.comp-meta .desc.highlight {
  color: #826e9e;
}

/* Divisor central (Flecha) */
.comp-divider {
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow-circle {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.03);
  color: #bfa1ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 0 15px rgba(191, 161, 255, 0.1);
}


/* --- Ticker / Marquesina Infinita (Fondo de sección) --- */
.ticker-wrap {
  width: 100%;
  overflow: hidden;
  background: rgba(10, 9, 15, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  padding: 1.2rem 0;
  position: absolute;
  bottom: 0;
  left: 0;
}

.ticker {
  display: flex;
  width: max-content;
  animation: marquee 25s linear infinite;
}

.ticker-item {
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding: 0 2rem;
  color: #a39cb5;
  font-size: 0.95rem;
  font-weight: 500;
}

.ticker-item .dot {
  margin: 0 0.8rem;
  color: #4a3e66;
}

/* Badge "SIN WEB" verde de la imagen */
.badge-sin-web {
  background: rgba(0, 200, 115, 0.12);
  color: #00ff94;
  border: 1px solid rgba(0, 200, 115, 0.25);
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-right: 0.8rem;
}
/* Animación del scroll infinito */
@keyframes marquee {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* Responsive */
@media (max-width: 768px) {
  .hero-comparison {
    flex-direction: column;
    gap: 3rem;
  }
  .comp-divider {
    transform: rotate(90deg);
    margin: -1rem 0;
  }
}

/* Contenedor principal que debe envolver al input */
.input-group-container {
  position: relative;
  width: 100%;
}

/* La caja de resultados */
.autocomplete-results {
  position: absolute;
  top: 100%; /* Justo debajo del input */
  left: 0;
  right: 0;
  background: #12121F; /* El color de fondo oscuro de tu app */
  border: 1px solid #1E1E35;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  z-index: 9999; /* Asegura que esté por encima de todo */
  max-height: 250px;
  overflow-y: auto;
  margin-top: 2px;
  display: none; /* Se controla con JS */
}

.autocomplete-item {
  padding: 12px 16px;
  color: #F0F0FF;
  cursor: pointer;
  border-bottom: 1px solid #1E1E35;
  font-size: 14px;
  transition: background 0.2s;
}

.autocomplete-item:hover {
  background: #8B5CF6; /* Tu color morado */
}

/*pseudo-video*/
.how-video{ margin: 2.5rem 0 3.5rem; display:flex; justify-content:center; }
.how-video-frame{
  width:100%; max-width:640px;
  background: var(--card-bg, #12131a);
  border:1px solid var(--border-color, #2a2b36);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.how-video-topbar{
  display:flex; align-items:center; gap:.4rem;
  padding:.6rem .8rem;
  background: var(--topbar-bg, #1a1b24);
  border-bottom:1px solid var(--border-color, #2a2b36);
}
.hv-dot{ width:9px; height:9px; border-radius:50%; }
.hv-red{ background:#ff5f57; } .hv-yellow{ background:#febc2e; } .hv-green{ background:#28c840; }
.how-video-url{
  margin-left:.6rem; font-size:.75rem; color: var(--text-muted, #8b8d9a);
  background: rgba(255,255,255,.05); padding:.15rem .6rem; border-radius:6px;
}

.how-video-screen{ position:relative; height:300px; overflow:hidden; }

/* Cursor falso */
.hv-cursor{
  position:absolute; z-index:50; font-size:1.1rem;
  transform: translate(-4px,-2px);
  transition: left .6s cubic-bezier(.4,0,.2,1), top .6s cubic-bezier(.4,0,.2,1), opacity .3s;
  opacity:0; pointer-events:none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
.hv-cursor.is-visible{ opacity:1; }
.hv-cursor.is-clicking{ animation: hvClickPulse .35s ease; }
@keyframes hvClickPulse{ 0%{ transform: translate(-4px,-2px) scale(1);} 50%{ transform: translate(-4px,-2px) scale(.8);} 100%{ transform: translate(-4px,-2px) scale(1);} }

/* Paneles genéricos */
.hv-panel{
  position:absolute; inset:0; padding:1.5rem;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(12px);
  transition:opacity .4s ease, transform .4s ease;
  pointer-events:none;
  
}
.hv-panel.is-active{ opacity:1; transform:translateY(0); pointer-events:auto; }

/* --- Formulario (nicho + ciudad) --- */
.hv-panel-form .hv-field{ margin-bottom: 1rem; width:100%; max-width:360px; }
.hv-panel-form{ flex-direction:column; align-items:stretch; }
.hv-field label{ font-size:.7rem; color: var(--text-muted,#8b8d9a); display:block; margin-bottom:.35rem; }

.hv-select{
  position:relative;
  background: rgba(255,255,255,.06); border:1px solid var(--border-color,#2a2b36);
  padding:.6rem .8rem; border-radius:8px; font-size:.85rem; display:flex; justify-content:space-between;
  cursor:pointer; transition: border-color .2s, background .2s;
}
.hv-select.is-open{ border-color: var(--accent,#6c5ce7); background: rgba(108,92,231,.08); }
#hvNicheValue.is-placeholder{ color: var(--text-muted,#8b8d9a); }

.hv-dropdown{
  position:absolute; top:calc(100% + 6px); left:0; right:0;
  background: var(--topbar-bg,#1a1b24); border:1px solid var(--border-color,#2a2b36);
  border-radius:8px; overflow:hidden; z-index:20;
  opacity:0; transform:translateY(-6px) scale(.98);
  pointer-events:none; transition:opacity .2s, transform .2s;
  box-shadow:0 10px 24px rgba(0,0,0,.4);
}
.hv-select.is-open .hv-dropdown{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.hv-option{ padding:.55rem .8rem; font-size:.8rem; transition: background .15s; }
.hv-option.is-hover, .hv-option:hover{ background: rgba(108,92,231,.15); }
.hv-option.is-selected{ color: var(--accent,#6c5ce7); font-weight:600; }

.hv-input{
  background: rgba(255,255,255,.06); border:1px solid var(--border-color,#2a2b36);
  padding:.6rem .8rem; border-radius:8px; font-size:.85rem; min-height:1.1em;
}
.hv-caret-blink{ animation: hvBlink 1s steps(1) infinite; color: var(--accent,#6c5ce7); }
@keyframes hvBlink{ 0%,50%{ opacity:1;} 51%,100%{ opacity:0;} }

.hv-btn{
  text-align:center; padding:.65rem; border-radius:8px;
  background: var(--accent, #6c5ce7); color:#fff; font-size:.85rem; font-weight:600;
  max-width:360px; width:100%; align-self:center; cursor:pointer;
  transition: transform .15s, box-shadow .15s;
}
.hv-btn.is-pressed{ transform: scale(.96); box-shadow:0 0 0 4px rgba(108,92,231,.25); }

/* --- Escaneo --- */
.hv-mock-scan{ position:relative; width:100%; max-width:420px; height:180px; background:rgba(255,255,255,.04); border-radius:10px; overflow:hidden; }
.hv-scan-line{
  position:absolute; left:0; right:0; height:2px; background: var(--accent,#6c5ce7);
  box-shadow:0 0 12px var(--accent,#6c5ce7);
  animation: hvScan 1.4s linear infinite;
}
@keyframes hvScan{ 0%{ top:0; } 100%{ top:100%; } }
.hv-pin{ position:absolute; width:8px; height:8px; background:#ff5f57; border-radius:50%; box-shadow:0 0 0 4px rgba(255,95,87,.2); }
.hv-scan-label{ position:absolute; bottom:.5rem; left:.7rem; font-size:.72rem; color: var(--text-muted,#8b8d9a); }

/* --- Lista de resultados --- */
.hv-panel-list{ flex-direction:column; align-items:stretch; }
.hv-list-title{ font-size:.75rem; color: var(--text-muted,#8b8d9a); margin-bottom:.6rem; }
.hv-row{
  display:flex; justify-content:space-between; align-items:center; font-size:.78rem;
  padding:.55rem .75rem; border-radius:8px; background:rgba(255,255,255,.04); margin-bottom:.4rem;
  opacity:0; transform:translateX(-8px);
}
.hv-panel-list.is-active .hv-row{
  animation: hvRowIn .4s ease forwards;
  animation-delay: calc(var(--d) * .28s + .15s);
}
@keyframes hvRowIn{ to{ opacity:1; transform:translateX(0);} }
.hv-row.hv-bad{ opacity:.5; }
.hv-panel-list.is-active .hv-row.hv-bad{ animation-name: hvRowInFaded; }
@keyframes hvRowInFaded{ to{ opacity:.45; transform:translateX(0);} }
.hv-badge{ font-weight:700; font-size:.7rem; }
.hv-badge-ok{ color:#28c840; }
.hv-badge-bad{ color:#ff5f57; text-decoration:line-through; }
.hv-row.hv-highlight{ box-shadow: 0 0 0 1.5px var(--accent,#6c5ce7) inset; background: rgba(108,92,231,.1); }

/* --- Detalle + contacto --- */
.hv-detail-card{
  width:100%; max-width:400px;
  background: rgba(255,255,255,.04); border:1px solid var(--border-color,#2a2b36);
  border-radius:12px; padding:1rem;
}
.hv-detail-head{ display:flex; align-items:center; gap:.7rem; margin-bottom:.8rem; }
.hv-detail-avatar{ font-size:1.6rem; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; }
.hv-detail-name{ font-size:.9rem; font-weight:700; }
.hv-detail-meta{ font-size:.7rem; color: var(--text-muted,#8b8d9a); }
.hv-detail-row{ font-size:.78rem; color: var(--text-muted,#8b8d9a); margin-bottom:.4rem; }
.hv-contact-btns{ display:flex; gap:.6rem; margin-top:.8rem; }
.hv-contact-btn{
  flex:1; text-align:center; padding:.6rem; border-radius:8px; font-size:.8rem; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:.35rem; cursor:pointer;
  transition: transform .15s, box-shadow .15s;
}
.hv-contact-btn.is-pressed{ transform: scale(.94); }
.hv-whatsapp{ background: rgba(37,211,102,.15); color:#25d366; border:1px solid rgba(37,211,102,.4); }
.hv-call{ background: rgba(108,92,231,.15); color: var(--accent,#6c5ce7); border:1px solid rgba(108,92,231,.4); }

/* --- Export --- */
.hv-panel-export{ flex-direction:column; gap:.6rem; }
.hv-export-icon{ font-size:2.2rem; }
.hv-export-text{ font-size:.85rem; color: var(--text-muted,#8b8d9a); }
.hv-btn-download{ display:flex; align-items:center; justify-content:center; gap:.4rem; max-width:220px; }
.hv-ico{ font-size:.9rem; }
.hv-time{
  margin-left: .6rem;
    font-size: .75rem;
    color: var(--text-muted, #8b8d9a);
    background: rgba(255, 255, 255, .05);
    padding: .15rem .6rem;
    border-radius: 6px;
}

/*donde funciona*/
.where{
  padding: 5rem 1.5rem;
  background: var(--bg2);
}
.where-inner{
  max-width: 1100px;
  margin: 0 auto;
}

.niche-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .9rem;
  margin-top: 2.5rem;
}

.niche-pill{
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1.1rem;
  border-radius: 10px;
  background: var(--card-bg, #14151f);
  border: 1px solid var(--border-color, #23242f);
  color: #e9e9ee;
  font-size: .88rem;
  font-weight: 600;
  cursor: default;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.niche-pill:hover{
  border-color: var(--accent, #6c5ce7);
  background: rgba(108, 92, 231, .08);
  transform: translateY(-2px);
}

.niche-dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #28c840;
  box-shadow: 0 0 6px rgba(40, 200, 64, .6);
  flex-shrink: 0;
}

.niche-footnote{
  margin-top: 1.8rem;
  font-size: .85rem;
  color: var(--accent, #6c5ce7);
}

@media (max-width: 900px){
  .niche-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .niche-grid{ grid-template-columns: 1fr; }
  .where{ padding: 3.5rem 1.2rem; }
}

/*para quien es*/
.for-who{
  padding: 5rem 1.5rem;
  background: var(--bg, #0c0d15);
}
.for-who-inner{
  max-width: 1000px;
  margin: 0 auto;
}

.audience-list{
  margin-top: 2.5rem;
  border-top: 1px solid var(--border-color, #23242f);
}

.audience-item{
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: 2.2rem 0;
  border-bottom: 1px solid var(--border-color, #23242f);
}

.audience-num{
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--accent, #6c5ce7);
  opacity: .55;
  line-height: 1;
}

.audience-content h3{
  font-size: 1.15rem;
  font-weight: 700;
  color: #f2f2f5;
  margin: 0 0 .5rem;
}

.audience-icon{
  font-size: 1.3rem;
  margin-bottom: .6rem;
}

.audience-content p{
  font-size: .88rem;
  color: var(--text-muted, #9496a1);
  line-height: 1.55;
  max-width: 480px;
  margin: 0 0 .8rem;
}

.audience-highlight{
  display: inline-flex;
  align-items: center;
  font-size: .78rem;
  font-weight: 600;
  color: var(--accent, #6c5ce7);
  padding-left: .7rem;
  border-left: 2px solid var(--accent, #6c5ce7);
}

.audience-cta{
  white-space: nowrap;
  background: var(--accent, #6c5ce7);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  padding: .7rem 1.3rem;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.audience-cta span{
  transition: transform .15s ease;
}
.audience-cta:hover{
  background: var(--accent-hover, #7d6cf0);
  box-shadow: 0 8px 20px rgba(108, 92, 231, .35);
}
.audience-cta:hover span{
  transform: translateX(3px);
}

@media (max-width: 760px){
  .audience-item{
    grid-template-columns: 1fr;
    gap: .8rem;
  }
  .audience-num{ font-size: 1.6rem; }
  .audience-cta{
    justify-self: start;
    margin-top: .4rem;
  }
}

/*faq*/
.faq{
  padding: 5rem 1.5rem;
  background: var(--bg2);
}
.faq-inner{
  max-width: 820px;
  margin: 0 auto;
}

.faq-list{
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.faq-item{
  background: var(--card-bg, #14151f);
  border: 1px solid var(--border-color, #23242f);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .2s ease;
}
.faq-item.is-open{
  border-color: var(--accent, #6c5ce7);
}

.faq-question{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: none;
  border: none;
  padding: 1.1rem 1.4rem;
  color: #f2f2f5;
  font-size: .92rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.faq-chevron{
  color: var(--accent, #6c5ce7);
  font-size: .9rem;
  flex-shrink: 0;
  transition: transform .25s ease;
}
.faq-item.is-open .faq-chevron{
  transform: rotate(180deg);
}

.faq-answer{
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s ease;
  padding: 0 1.4rem;
}
.faq-item.is-open .faq-answer{
  max-height: 300px;
  padding: 0 1.4rem 1.2rem;
}

.faq-answer p{
  font-size: .85rem;
  line-height: 1.6;
  color: var(--text-muted, #9496a1);
  margin: 0;
}

@media (max-width: 600px){
  .faq{ padding: 3.5rem 1.2rem; }
  .faq-question{ font-size: .85rem; padding: 1rem 1.1rem; }
}

/*modal login*/
.login-modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 10, .65);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  padding: 1.5rem;
}
.login-modal-overlay.is-open{
  opacity: 1;
  visibility: visible;
}

.login-modal{
  width: 100%;
  max-width: 380px;
  background: var(--card-bg, #14151f);
  border: 1px solid var(--border-color, #23242f);
  border-radius: 16px;
  padding: 2.2rem 1.8rem 1.8rem;
  text-align: center;
  position: relative;
  transform: translateY(16px) scale(.97);
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
  box-shadow: 0 30px 60px rgba(0,0,0,.5);
}
.login-modal-overlay.is-open .login-modal{
  transform: translateY(0) scale(1);
  opacity: 1;
}

.login-modal-close{
  position: absolute;
  top: .9rem;
  right: .9rem;
  background: rgba(255,255,255,.06);
  border: none;
  color: var(--text-muted, #9496a1);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, color .2s ease;
}
.login-modal-close:hover{
  background: rgba(255,255,255,.12);
  color: #fff;
}

.login-modal-icon{
  font-size: 1.8rem;
  margin-bottom: .8rem;
}

.login-modal-title{
  font-size: 1.25rem;
  font-weight: 800;
  color: #f2f2f5;
  margin: 0 0 .5rem;
}

.login-modal-sub{
  font-size: .85rem;
  color: var(--text-muted, #9496a1);
  margin: 0 0 1.6rem;
  line-height: 1.5;
}

.google-btn{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  background: #fff;
  color: #1f1f1f;
  border: none;
  border-radius: 10px;
  padding: .8rem 1rem;
  font-size: .9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.google-btn:hover{
  box-shadow: 0 8px 20px rgba(255,255,255,.15);
  transform: translateY(-1px);
}
.google-btn:active{
  transform: translateY(0) scale(.98);
}
.google-btn.is-loading{
  opacity: .7;
  pointer-events: none;
}
.google-icon{ flex-shrink: 0; }

.login-modal-terms{
  font-size: .72rem;
  color: var(--text-muted, #6d6f7a);
  margin: 1.4rem 0 0;
  line-height: 1.5;
}
.login-modal-terms a{
  color: var(--accent, #6c5ce7);
  text-decoration: none;
}
.login-modal-terms a:hover{
  text-decoration: underline;
}

@media (max-width: 420px){
  .login-modal{ padding: 1.8rem 1.4rem 1.4rem; }
}