:root{
  --bg:#060D16;
  --bg-1:#0B1524;
  --bg-2:#101E33;
  --border:rgba(170,204,238,.16);
  --border-strong:rgba(170,204,238,.3);
  --text:#F0F8FF;
  --muted:#8AA0B8;
  --faint:#516779;
  --accent:#5CB7FF;
  --accent-dim:rgba(92,183,255,.14);
  --accent-hover:rgba(92,183,255,.24);
  --accent-btn-text:#04101d;
  --green:#2AD39B;
  --red:#FF6E67;
  --yellow:#FFB65E;
  --purple:#A78BFA;
  --nav-bg:rgba(11,21,36,.62);
  --menu-bg:rgba(11,21,36,.75);
  --shadow:rgba(0,0,0,.6);
  --shadow-2:rgba(0,0,0,.7);

  --font-display: 'Inter', -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body: 'Inter', -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;

  --pad: clamp(20px, 4vw, 64px);
}

:root[data-theme="light"]{
  --bg:#F5F5F4;
  --bg-1:#FFFFFF;
  --bg-2:#EBEBE8;
  --border:rgba(30,35,45,.10);
  --border-strong:rgba(30,35,45,.20);
  --text:#1A1D22;
  --muted:#565D66;
  --faint:#868E97;
  --accent:#0B63C9;
  --accent-dim:rgba(11,99,201,.10);
  --accent-hover:rgba(11,99,201,.16);
  --accent-btn-text:#FFFFFF;
  --green:#0E8F63;
  --red:#D6483F;
  --yellow:#B4740E;
  --purple:#7C5CD6;
  --nav-bg:rgba(245,245,244,.7);
  --menu-bg:rgba(245,245,244,.86);
  --shadow:rgba(30,30,25,.12);
  --shadow-2:rgba(30,30,25,.16);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{ background:var(--accent-dim); color:var(--text); }
a{ color:inherit; }
button{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
img,svg{ max-width:100%; }

#blobs{ position:fixed; inset:0; z-index:0; pointer-events:none; }

.frame{ position:relative; z-index:2; }

/* ---------- brand / logo ---------- */
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.logo-slot{ display:block; }
.logo{ display:block; height:auto; }
.logo-slot[data-size="nav"] .logo{ height:40px; }
.logo-slot[data-size="footer"] .logo{ height:26px; }

/* ---------- nav ---------- */
nav{
  position:sticky; top:0; z-index:15;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px var(--pad);
}
nav::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--nav-bg);
  backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
  border-bottom:1px solid var(--border-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 8px 30px -20px var(--shadow);
}
nav ul{ list-style:none; display:flex; gap:26px; margin:0; padding:0; }
nav a.navlink{
  text-decoration:none; font-size:14px; color:var(--muted);
  transition:color .15s ease;
}
nav a.navlink:hover{ color:var(--text); }
nav .nav-cta{
  font-size:13px; padding:9px 18px; border-radius:6px;
  border:1px solid var(--accent); color:var(--accent); text-decoration:none;
  background:var(--accent-dim); transition:background .15s ease;
  white-space:nowrap;
}
nav .nav-cta:hover{ background:var(--accent-hover); }
.nav-right{ display:flex; align-items:center; gap:18px; }

.lang-toggle{
  height:32px; display:flex; align-items:center; gap:5px; padding:0 12px;
  background:transparent; border:1px solid var(--border); border-radius:20px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.04em;
  color:var(--faint); cursor:pointer; flex:none; transition:border-color .15s ease;
}
.lang-toggle:hover{ border-color:var(--muted); }
.lang-toggle .sep{ color:var(--border-strong); }
.lang-toggle [data-lang-btn]{ transition:color .15s ease; }
.lang-toggle [data-lang-btn].active{ color:var(--accent); font-weight:700; }

.theme-toggle{
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--border); border-radius:50%;
  color:var(--muted); cursor:pointer; flex:none; transition:color .15s ease, border-color .15s ease;
}
.theme-toggle:hover{ color:var(--text); border-color:var(--muted); }
.theme-toggle svg{ width:16px; height:16px; }
.theme-toggle .icon-moon{ display:none; }
:root[data-theme="light"] .theme-toggle .icon-sun{ display:none; }
:root[data-theme="light"] .theme-toggle .icon-moon{ display:block; }

.nav-toggle{
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--border-strong); border-radius:6px;
  cursor:pointer; flex:none; position:relative; z-index:31;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:''; display:block; width:16px; height:1.5px; background:var(--text);
  position:absolute; transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before{ transform:translateY(-5px); }
.nav-toggle span::after{ transform:translateY(5px); }
.nav-toggle.open span{ background:transparent; }
.nav-toggle.open span::before{ transform:translateY(0) rotate(45deg); background:var(--accent); }
.nav-toggle.open span::after{ transform:translateY(0) rotate(-45deg); background:var(--accent); }

.mobile-menu{ display:none; }
.mobile-close{
  position:absolute; top:14px; right:var(--pad);
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:var(--bg-1); border:1px solid var(--border-strong); border-radius:8px;
  color:var(--text); cursor:pointer;
}
.mobile-close svg{ width:18px; height:18px; }
@media (max-width:860px){
  nav ul, .nav-cta{ display:none; }
  .nav-right{ display:none; }
  .nav-toggle{ display:flex; }
  .mobile-menu.open{
    display:flex; position:fixed; inset:0; z-index:30;
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:30px; padding:var(--pad);
    background:var(--menu-bg);
    backdrop-filter:blur(24px) saturate(150%); -webkit-backdrop-filter:blur(24px) saturate(150%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  }
  .mobile-menu ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:28px; }
  .mobile-menu a{ text-decoration:none; font-size:22px; color:var(--muted); }
  .mobile-menu a:hover{ color:var(--text); }
  .mobile-menu .nav-cta{ display:inline-block; margin-top:6px; font-size:16px; padding:12px 22px; }
  .mobile-menu-controls{ display:flex; align-items:center; gap:16px; }
}

section{ padding:0 var(--pad); position:relative; }

.eyebrow{
  font-size:13px; color:var(--accent); text-transform:uppercase;
  letter-spacing:.1em; margin:0 0 16px; display:flex; align-items:center; gap:10px;
  font-weight:600;
}
.eyebrow::before{ content:''; width:16px; height:1px; background:var(--accent); opacity:.7; }

/* ---------- reveal ---------- */
/* Visible por defecto: el JS agrega .pre ANTES de animar, así que si el JS
   nunca corre (falla de red, error, etc.) el contenido nunca queda oculto. */
.reveal{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s ease; }
.reveal.pre{ opacity:0; transform:translateY(18px); }

/* ---------- hero ---------- */
.hero{
  min-height:88vh; display:flex; flex-direction:column; justify-content:center;
  padding-top:70px; padding-bottom:60px;
}
h1{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2rem, 5vw, 3.6rem); line-height:1.12; letter-spacing:-.01em;
  margin:0 0 24px; max-width:18ch; text-wrap:balance;
}
h1 .accent{ color:var(--accent); }
.lede{ max-width:56ch; color:var(--muted); font-size:17px; line-height:1.7; margin:0 0 36px; }
.cta-row{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:44px; }
.btn{
  font-size:14px; letter-spacing:.01em; padding:14px 26px; border-radius:8px;
  cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
  border:1px solid var(--border-strong); background:transparent; color:var(--text);
  font-weight:600;
}
.btn:hover{ transform:translateY(-1px); border-color:var(--muted); }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-btn-text); }
.btn.primary:hover{ filter:brightness(1.12); }
.btn:disabled{ opacity:.6; cursor:default; transform:none; }
.btn .arrow{ transition:transform .15s ease; }
.btn:hover .arrow{ transform:translateX(3px); }

.hero-facts{
  display:flex; gap:32px; flex-wrap:wrap; padding-top:28px; border-top:1px solid var(--border);
}
.hero-fact{ display:flex; flex-direction:column; gap:4px; }
.hero-fact b{ font-size:15px; }
.hero-fact span{ font-size:13px; color:var(--faint); }

/* ---------- section heads ---------- */
.sec-head{ margin-bottom:44px; max-width:60ch; }
.sec-head h2{
  font-family:var(--font-display); font-size:clamp(1.5rem,2.8vw,2.2rem);
  font-weight:800; margin:0 0 14px; text-wrap:balance;
}
.sec-head p{ color:var(--muted); font-size:15.5px; line-height:1.7; margin:0; }

/* ---------- modules ---------- */
.modules{ padding-top:110px; padding-bottom:100px; }
.mod-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
@media (max-width:980px){ .mod-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .mod-grid{ grid-template-columns:1fr; } }
.mod-card{
  background:var(--bg-1); padding:30px 26px; display:flex; flex-direction:column; gap:14px;
  transition:background .2s ease;
}
.mod-card:hover{ background:var(--bg-2); }
.mod-icon{
  width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:var(--accent-dim); color:var(--accent); flex:none;
}
.mod-icon svg{ width:22px; height:22px; }
.mod-card h3{ font-size:16.5px; margin:0; font-weight:700; }
.mod-card p{ color:var(--muted); font-size:14px; margin:0; line-height:1.6; }
.mod-tag{
  font-size:11px; color:var(--faint); letter-spacing:.04em; text-transform:uppercase;
  margin-top:auto; padding-top:10px;
}

/* ---------- benefits ---------- */
.benefits{ padding-top:100px; padding-bottom:100px; border-top:1px solid var(--border); }
.benefit-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }
@media (max-width:860px){ .benefit-grid{ grid-template-columns:1fr; gap:40px; } }
.benefit{ display:flex; flex-direction:column; gap:12px; }
.benefit .num{ font-family:var(--font-mono); font-size:13px; color:var(--accent); }
.benefit h3{ font-size:19px; margin:0; font-weight:700; }
.benefit p{ color:var(--muted); font-size:14.5px; line-height:1.7; margin:0; max-width:38ch; }

/* ---------- spotlight (llamada DTMF) ---------- */
.spotlight{ padding-top:100px; padding-bottom:100px; border-top:1px solid var(--border); }
.spot-wrap{ display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:center; }
@media (max-width:900px){ .spot-wrap{ grid-template-columns:1fr; gap:40px; } }
.spot-copy h2{ font-family:var(--font-display); font-size:clamp(1.5rem,2.6vw,2rem); font-weight:800; margin:0 0 16px; max-width:20ch; text-wrap:balance; }
.spot-copy p{ color:var(--muted); font-size:15px; line-height:1.75; max-width:44ch; margin:0 0 14px; }
.spot-copy p:last-child{ margin-bottom:0; }

.call-card{
  background:var(--bg-1); border:1px solid var(--border); border-radius:14px; padding:26px;
  box-shadow:0 30px 70px -40px var(--shadow-2);
}
.call-row{ display:flex; align-items:center; gap:14px; padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--border); }
.call-dot{ width:10px; height:10px; border-radius:50%; background:var(--green); flex:none; box-shadow:0 0 0 4px color-mix(in srgb, var(--green) 15%, transparent); }
.call-row b{ font-size:14.5px; }
.call-row span{ font-size:12.5px; color:var(--faint); display:block; }
.call-line{ display:flex; gap:10px; margin-bottom:12px; font-size:13.5px; }
.call-line .who{ color:var(--faint); font-family:var(--font-mono); font-size:11.5px; flex:none; padding-top:2px; }
.call-line .txt{ color:var(--muted); line-height:1.6; }
.call-keys{ display:flex; gap:10px; margin-top:18px; }
.call-key{
  flex:1; text-align:center; padding:10px; border-radius:8px; font-family:var(--font-mono); font-size:13px;
  border:1px solid var(--border-strong);
}
.call-key.allow{ color:var(--green); border-color:color-mix(in srgb, var(--green) 40%, transparent); background:color-mix(in srgb, var(--green) 8%, transparent); }
.call-key.deny{ color:var(--red); border-color:color-mix(in srgb, var(--red) 40%, transparent); background:color-mix(in srgb, var(--red) 8%, transparent); }

/* ---------- integrations ---------- */
.integrations{ padding-top:100px; padding-bottom:100px; border-top:1px solid var(--border); }
.int-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
@media (max-width:860px){ .int-grid{ grid-template-columns:1fr; } }
.int-card{ background:var(--bg-1); padding:28px 26px; }
.int-card h3{ font-size:15.5px; margin:0 0 8px; font-weight:700; }
.int-card p{ color:var(--muted); font-size:13.5px; line-height:1.6; margin:0; }

/* ---------- casos de uso ---------- */
.cases{ padding-top:100px; padding-bottom:100px; border-top:1px solid var(--border); }
.case-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:920px){ .case-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .case-grid{ grid-template-columns:1fr; } }
.case-card{ border:1px solid var(--border); border-radius:12px; padding:24px 20px; }
.case-card h3{ font-size:15px; margin:0 0 8px; font-weight:700; }
.case-card p{ color:var(--muted); font-size:13.5px; line-height:1.6; margin:0; }

/* ---------- plans ---------- */
.plans{ padding-top:100px; padding-bottom:110px; border-top:1px solid var(--border); }
.plan-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:900px){ .plan-grid{ grid-template-columns:1fr; max-width:440px; margin:0 auto; } }
.plan-card{
  border:1px solid var(--border); border-radius:14px; padding:30px 26px;
  display:flex; flex-direction:column; gap:20px; background:var(--bg-1);
}
.plan-card.featured{ border-color:var(--accent); background:var(--bg-2); position:relative; }
.plan-badge{
  position:absolute; top:-13px; left:26px; background:var(--accent); color:var(--accent-btn-text);
  font-size:11px; font-weight:700; padding:4px 12px; border-radius:20px; letter-spacing:.03em;
}
.plan-name{ font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.plan-price{ font-family:var(--font-display); font-size:22px; font-weight:800; }
.plan-price span{ font-size:13px; color:var(--muted); font-weight:400; }
.plan-feats{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.plan-feats li{ display:flex; gap:10px; font-size:13.5px; color:var(--muted); align-items:flex-start; }
.plan-feats li.off{ color:var(--faint); }
.plan-feats svg{ width:16px; height:16px; flex:none; margin-top:2px; }
.plan-feats li.on svg{ color:var(--green); }
.plan-feats li.off svg{ color:var(--faint); }

/* ---------- closing / contact form ---------- */
.closing{
  padding-top:100px; padding-bottom:90px; border-top:1px solid var(--border);
  text-align:center; display:flex; flex-direction:column; align-items:center;
}
.closing h2{ font-family:var(--font-display); font-size:clamp(1.6rem,3.2vw,2.4rem); font-weight:800; margin:0 0 18px; max-width:20ch; text-wrap:balance; }
.closing p{ color:var(--muted); max-width:48ch; margin:0 0 30px; font-size:15.5px; }

.demo-form{
  background:var(--bg-1); border:1px solid var(--border); border-radius:14px; padding:30px;
  width:100%; max-width:460px; text-align:left; display:flex; flex-direction:column; gap:16px;
  box-shadow:0 30px 70px -40px var(--shadow-2);
}
.demo-form .field{ display:flex; flex-direction:column; gap:6px; }
.demo-form .field label{ font-size:12.5px; color:var(--muted); }
.demo-form input, .demo-form textarea{
  background:var(--bg-2); border:1px solid var(--border-strong); border-radius:8px;
  padding:11px 12px; color:var(--text); font-size:14px; font-family:inherit; outline:none;
  transition:border-color .15s ease;
}
.demo-form textarea{ min-height:84px; resize:none; line-height:1.5; }
.demo-form input:focus, .demo-form textarea:focus{ border-color:var(--accent); }
.demo-form input::placeholder, .demo-form textarea::placeholder{ color:var(--faint); }
.demo-form .hp-field{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }
.demo-form .form-status{ font-size:13px; color:var(--accent); min-height:1.3em; margin:0; }
.demo-form .btn{ align-self:flex-start; }

footer{
  padding:34px var(--pad) 44px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
}
footer ul{ list-style:none; display:flex; gap:20px; margin:0; padding:0; flex-wrap:wrap; }
footer a{ font-size:12.5px; color:var(--muted); text-decoration:none; }
footer a:hover{ color:var(--text); }
footer .fine{ font-size:11.5px; color:var(--faint); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ transition:none; opacity:1; transform:none; }
}

/* ==================================================================
   Mobile
   ================================================================== */
@media (max-width:640px){
  /* hero */
  .hero{ min-height:auto; padding-top:48px; padding-bottom:56px; }
  h1{ margin-bottom:20px; line-height:1.22; }
  .lede{ font-size:15.5px; line-height:1.75; margin-bottom:28px; }
  .cta-row{ flex-direction:column; gap:12px; margin-bottom:32px; }
  .cta-row .btn{ width:100%; justify-content:center; }
  .hero-facts{ flex-direction:column; gap:18px; padding-top:22px; }

  /* section rhythm */
  .sec-head{ margin-bottom:30px; }
  .modules{ padding-top:70px; padding-bottom:60px; }
  .benefits{ padding-top:64px; padding-bottom:64px; }
  .spotlight{ padding-top:64px; padding-bottom:64px; }
  .integrations{ padding-top:64px; padding-bottom:64px; }
  .cases{ padding-top:64px; padding-bottom:64px; }
  .plans{ padding-top:64px; padding-bottom:74px; }
  .closing{ padding-top:64px; padding-bottom:56px; }

  .benefit-grid{ gap:32px; }
  .benefit p{ max-width:none; }

  .mod-card{ padding:24px 20px; }
  .call-card{ padding:22px; }
  .call-keys{ gap:8px; }
  .call-key{ font-size:12px; padding:9px; }

  .int-card, .case-card{ padding:22px 18px; }

  .plan-card{ padding:26px 22px; }
  .plan-card .btn{ width:100%; justify-content:center; }

  .demo-form{ padding:22px; max-width:none; }
  .demo-form .btn{ width:100%; justify-content:center; }

  footer{ flex-direction:column; align-items:flex-start; gap:18px; }
  footer ul{ gap:16px; }
}