:root{
  --bg:#070A12;
  --panel:rgba(255,255,255,.04);
  --panel2:rgba(5,6,10,.45);
  --border:rgba(255,255,255,.08);
  --text:#F6F7FB;
  --muted:rgba(246,247,251,.72);
  --muted2:rgba(246,247,251,.58);
  --a1:#FF7A18;
  --a2:#FF3B2F;
  --ok:#34d399;

  --r1:16px;
  --r2:22px;
  --shadow: 0 22px 90px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
html{
  scroll-behavior:smooth;
  scroll-padding-top: 92px;
}
body{
  margin:0;
  background:
    radial-gradient(900px 520px at 18% 8%, rgba(255,122,24,.18), transparent 60%),
    radial-gradient(900px 520px at 82% 18%, rgba(255,59,47,.14), transparent 62%),
    radial-gradient(900px 520px at 55% 110%, rgba(255,122,24,.08), transparent 62%),
    var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  line-height:1.5;
}
a{color:inherit}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible{
  outline: 3px solid rgba(255,122,24,.28);
  outline-offset: 3px;
  border-radius: 12px;
}
.container{max-width:1120px; margin:0 auto; padding:0 18px}
.header__inner{min-height:64px}
.nav{gap:8px}
.nav a{white-space:nowrap}
.btn{white-space:nowrap}
.btn:active{transform: translateY(0)}
.btn--wa{white-space:nowrap}
.btn--wa:hover{background: rgba(5,6,10,.68)}
.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: linear-gradient(to bottom, rgba(7,10,18,.78), rgba(7,10,18,.35));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:12px;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.logo{
  width:34px; height:34px; border-radius:12px;
  background:
    radial-gradient(14px 14px at 30% 30%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(135deg, rgba(255,122,24,.95), rgba(255,59,47,.70));
  box-shadow: 0 12px 34px rgba(255,122,24,.12), 0 0 0 1px rgba(255,255,255,.10) inset;
}
.brand__name{font-weight:900; letter-spacing:.2px}
.nav{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.nav a{
  text-decoration:none; color:var(--muted);
  padding:8px 10px; border-radius:12px;
}
.nav a:hover{background:rgba(255,255,255,.04); color:var(--text)}

/* Dropdown "Soluciones" */
.nav__drop{position:relative; display:inline-flex; align-items:center}
.nav__dropBtn{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.nav__dropBtn:hover{
  background: rgba(255,255,255,.04);
  color: var(--text);
}
.nav__chev{
  width:10px; height:10px; display:inline-block;
  border-right:2px solid rgba(255,255,255,.45);
  border-bottom:2px solid rgba(255,255,255,.45);
  transform: rotate(45deg);
  margin-top:-2px;
}
.nav__menuDrop{
  position:absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 220px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,6,10,.88);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  display:none;
}
.nav__menuDrop{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nav__drop:hover .nav__menuDrop,
.nav__drop:focus-within .nav__menuDrop{display:block}
.nav__menuDrop a{
  display:block;
  padding:10px 10px;
  border-radius: 12px;
  text-decoration:none;
  color: rgba(246,247,251,.82);
}
.nav__menuDrop a:hover{background: rgba(255,255,255,.06); color: var(--text)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 14px; border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:var(--text);
  text-decoration:none;
  font-weight:800;
  letter-spacing:.1px;
  transition: transform .14s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{transform: translateY(-1px); background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14)}
.btn--primary{
  border-color: rgba(255,122,24,.45);
  background:
    radial-gradient(400px 200px at 25% 10%, rgba(255,122,24,.35), transparent 60%),
    linear-gradient(135deg, rgba(255,122,24,.92), rgba(255,59,47,.75));
  box-shadow: 0 18px 60px rgba(255,122,24,.14);
}
.btn--primary:hover{border-color: rgba(255,122,24,.65)}
.btn--wa{
  border-color: rgba(78,255,167,.35);
  background: rgba(5,6,10,.55);
  box-shadow: 0 18px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(78,255,167,.10);
}
.btn--wa:hover{border-color: rgba(78,255,167,.55)}
.tag{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  color:var(--muted);
  font-size:12.5px;
}
.tag b{color:var(--text)}
.dot{
  width:8px; height:8px; border-radius:99px;
  background: linear-gradient(135deg, rgba(255,122,24,.95), rgba(255,59,47,.80));
  box-shadow: 0 0 0 4px rgba(255,122,24,.10);
}

.hero{padding:44px 0 22px}
.heroCard, .aside, .card, .step, .caseCol, .track, details, .miniForm, .kpi, .chan, .hubCard{
  box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset;
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
  align-items:start;
}
.heroCard{
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(740px 420px at 18% 10%, rgba(255,122,24,.18), transparent 60%),
    radial-gradient(740px 420px at 86% 30%, rgba(255,59,47,.14), transparent 62%),
    rgba(255,255,255,.02);
  padding:22px;
  box-shadow: var(--shadow);
}
h1{
  margin:14px 0 10px;
  font-size: clamp(28px, 3.4vw, 48px);
  letter-spacing:-.8px;
  line-height:1.06;
}
.accent{
  background: linear-gradient(90deg, rgba(255,122,24,1), rgba(255,59,47,1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__sub{margin:0; color:var(--muted); font-size:15.5px; line-height:1.7; max-width:68ch}
.ctaRow{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.ctaRow .btn{flex:1 1 240px}
.micro{margin:10px 0 0; color:var(--muted2); font-size:13px}
.trustStrip{
  margin-top:14px;
  display:flex; flex-wrap:wrap; gap:10px;
  padding:12px;
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
.trustItem{
  flex: 1 1 180px;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(5,6,10,.35);
}
.trustItem__k{display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted2); font-weight:900}
.trustItem__v{display:block; margin-top:4px; font-size:13.5px; color: rgba(246,247,251,.85); font-weight:750}
.aside{
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(5,6,10,.45);
  padding:18px;
}
.aside h3{margin:0 0 8px; font-size:16px}
.check{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.check li{display:flex; gap:10px; align-items:flex-start; color:var(--muted)}
.check li::before{content:"✓"; color: var(--ok); font-weight:1000}

.section{padding:28px 0}
.section--alt{
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.01);
}
.head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-bottom:14px;
}
.head h2{margin:0; font-size:24px; letter-spacing:-.4px}
.head p{margin:0; color:var(--muted); max-width:78ch}
.head h2, .card h3, .step h3, .track h3{letter-spacing:-.2px}
.grid2{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px}
.grid3{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px}
.card{
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(5,6,10,.35);
  padding:18px;
}
.card h3{margin:0 0 8px; font-size:18px}
.card p{margin:0; color:var(--muted); line-height:1.65}
.pillRow{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.pill{
  font-size:12px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  color: rgba(246,247,251,.75);
}

/* Hub verticales */
.hubGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
}
.hubCard{min-height:132px}
.hubCard{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  padding:14px;
  text-decoration:none;
  transition: transform .14s ease, border-color .2s ease, background .2s ease;
}
.hubCard:hover{
  transform: translateY(-2px);
  border-color: rgba(255,122,24,.35);
  background: rgba(255,255,255,.03);
}
.hubCard b{display:block; font-size:15.5px; margin-bottom:6px}
.hubCard span{display:block; color: var(--muted); line-height:1.55; font-size:13.5px}
.hubCard__cta{margin-top:10px; color: rgba(246,247,251,.85); font-weight:800}

.channels{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap:10px;
}
.chan{min-height:112px}
.chan{
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  padding:14px;
  text-align:center;
}
.chan b{display:block; margin-top:8px; font-size:13.5px}
.chan span{display:block; color:var(--muted2); font-size:12.5px; margin-top:4px}
.icon{
  width:34px; height:34px; border-radius:14px; margin:0 auto;
  background:
    radial-gradient(12px 12px at 30% 30%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
}

.steps{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px}
.step{
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(5,6,10,.35);
  padding:18px;
}
.step .n{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border-radius:12px;
  border:1px solid rgba(255,122,24,.35);
  background: rgba(255,122,24,.12);
  font-weight:1000;
}
.step h3{margin:10px 0 8px; font-size:18px}
.step p{margin:0; color:var(--muted); line-height:1.65}

.case{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px;
  align-items:stretch;
}
.caseCol{
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(5,6,10,.35);
  padding:18px;
}
.caseCol h3{margin:0 0 10px}
.caseCol ul{margin:0; padding-left:18px; color:var(--muted); line-height:1.7}
.caseNote{
  margin:14px 0 0;
  color: rgba(246,247,251,.78);
  font-size: 13.5px;
}

.benefits{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:10px;
}
.kpi{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  padding:14px;
}
.kpi b{display:block; font-size:18px}
.kpi span{display:block; color:var(--muted); margin-top:6px}

.tracks{display:grid; grid-template-columns: 1fr 1fr; gap:14px}
.track{
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(520px 320px at 15% 10%, rgba(255,122,24,.16), transparent 60%),
    rgba(5,6,10,.45);
  padding:18px;
}
.track h3{margin:0 0 8px}
.track p{margin:0; color:var(--muted); line-height:1.65}
.track ul{margin:12px 0 0; padding-left:18px; color:var(--muted); line-height:1.7}
.track .btn{margin-top:12px; width:100%}

.faq{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px}
details{
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(5,6,10,.35);
  padding:12px 12px;
}
summary{
  cursor:pointer;
  list-style:none;
  font-weight:900;
  line-height:1.35;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; float:right; color:var(--muted2); font-weight:1000}
details[open] summary::after{content:"–"}
details p{margin:10px 0 0; color:var(--muted); line-height:1.65}

.ctaBlock{
  border-radius: 24px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(740px 420px at 18% 10%, rgba(255,122,24,.20), transparent 60%),
    radial-gradient(740px 420px at 86% 30%, rgba(255,59,47,.16), transparent 62%),
    rgba(5,6,10,.45);
  padding:18px;
  box-shadow: var(--shadow);
}
.ctaBlock__grid{display:grid; grid-template-columns: 1.05fr .95fr; gap:14px; align-items:start}
.ctaBlock h2{margin:0 0 10px; font-size: clamp(22px, 2.4vw, 34px); letter-spacing:-.4px; line-height:1.1}
.ctaBlock p{margin:0; color:var(--muted); line-height:1.65}
.miniForm{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  padding:14px;
  display:grid;
  gap:10px;
}
.field{display:grid; gap:6px}
label{font-size:13px; font-weight:800; color:var(--muted2)}
input{
  width:100%;
  background: rgba(5,6,10,.45);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding:12px 14px;
  color:var(--text);
  font-size:15px;
  font-family:inherit;
  outline:none;
}
input::placeholder{color: rgba(246,247,251,.35)}
input:focus{
  border-color: rgba(255,122,24,.55);
  box-shadow: 0 0 0 3px rgba(255,122,24,.10);
}
.note{margin:0; color:var(--muted2); font-size:12.8px; line-height:1.45; text-align:center}
.footer{
  border-top:1px solid rgba(255,255,255,.06);
  padding:22px 0 18px;
  color: var(--muted2);
}
.footer__inner{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center}
.footer a{
  color: rgba(246,247,251,.78);
  text-decoration:none;
  padding:8px 10px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}
.footer a:hover{
  color: var(--text);
  border-color: rgba(255,122,24,.30);
  background: rgba(255,255,255,.03);
}
.waFloat{
  position:fixed; right:18px; bottom:18px; z-index:60;
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 14px;
  border-radius:999px;
  text-decoration:none;
  color:var(--text);
  border:1px solid rgba(78,255,167,.35);
  background: rgba(5,6,10,.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(78,255,167,.10);
}
.waFloat:hover{border-color: rgba(78,255,167,.55)}
.waFloat .w{width:18px; height:18px; border-radius:6px; background: linear-gradient(135deg, rgba(78,255,167,.95), rgba(78,255,167,.55))}
.waFloat span{font-weight:1000; font-size:12.5px; letter-spacing:.2px}

@media (max-width: 980px){
  .header__inner{padding:12px 0}
  .hero__grid{grid-template-columns:1fr}
  .ctaBlock__grid{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .channels{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .case{grid-template-columns:1fr}
  .benefits{grid-template-columns:1fr 1fr}
  .tracks{grid-template-columns:1fr}
  .faq{grid-template-columns:1fr}
  .hubGrid{grid-template-columns:1fr}
  .nav{display:none}
  .btn{width:100%}
  .ctaRow .btn{flex: 1 1 100%}
}