:root{
  --bg0:#070b14;
  --bg1:#0b1220;
  --bg2:#0f172a;
  --card:#0c1427;
  --line:rgba(148,163,184,.14);
  --text:#e5e7eb;
  --muted:#9aa6b2;
  --brand1:#38bdf8;
  --brand2:#0ea5e9;
  --accent:#6366f1;
  --ok:#22c55e;
  --warn:#f59e0b;
  --radius:22px;
  --shadow:0 22px 55px rgba(0,0,0,.42);
  --shadow2:0 10px 28px rgba(0,0,0,.35);
  --glass:rgba(255,255,255,.06);
  --glass2:rgba(255,255,255,.09);
  --maxw:1200px;
  --topbar:44px;
  --cookie-h:0px;
}

html{scroll-behavior:smooth}
body{
  background: radial-gradient(1100px 700px at 15% 10%, rgba(56,189,248,.18), transparent 60%),
              radial-gradient(900px 600px at 80% 90%, rgba(99,102,241,.16), transparent 60%),
              linear-gradient(180deg,var(--bg0),var(--bg1) 35%, var(--bg0));
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
  overflow-x:hidden;
}
a{color:var(--brand1); text-decoration:none}
a:hover{color:#7dd3fc}

.container-max{max-width:var(--maxw)}
/* Topbar */
.ek-topbar{
  background: rgba(7,11,20,.76);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(148,163,184,.10);
  font-size:.92rem;
}
.ek-topbar .top-inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.55rem 0;
}
.ek-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .7rem;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(148,163,184,.18);
  color:rgba(255,255,255,.86);
}
.ek-pill i{opacity:.85}
.ek-mini{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  justify-content:flex-end;
}
.ek-mini a{
  color:rgba(255,255,255,.86);
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.35rem .55rem;
  border-radius:999px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(148,163,184,.16);
}
.ek-mini a:hover{background: rgba(255,255,255,.08)}
@media (max-width: 576px){
  .ek-pill span{display:none}
}

/* Navbar */
.ek-header{
  position:sticky; top:0; z-index:1050;
  background: rgba(11,18,32,.78);
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(148,163,184,.10);
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
}
.ek-nav{
  padding:.75rem 0;
}
.ek-brand{
  display:flex; align-items:center; gap:.75rem;
  color:#fff;
}
.ek-mark{
  width:44px; height:44px;
  border-radius:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border:1px solid rgba(148,163,184,.18);
  box-shadow: var(--shadow2);
  display:grid; place-items:center;
  overflow:hidden;
}
.ek-mark img{width:82%; height:82%; object-fit:contain; display:block}
.ek-brand strong{letter-spacing:-.02em}
.ek-brand small{color:var(--muted); font-weight:700}

.navbar .nav-link{
  font-weight:800;
  color: rgba(229,231,235,.88) !important;
  padding:.55rem .75rem;
  border-radius:14px;
  transition: transform .12s ease, background .12s ease;
}
.navbar .nav-link:hover{
  background: rgba(56,189,248,.10);
  transform: translateY(-1px);
}
.navbar .nav-link.active{
  background: rgba(99,102,241,.12);
}
.ek-cta{
  background: linear-gradient(90deg,var(--brand1),var(--brand2));
  color:#06111f !important;
  font-weight:950;
  border:0;
  border-radius:999px;
  padding:.7rem 1rem;
  box-shadow: 0 18px 45px rgba(14,165,233,.16);
}
.ek-cta:hover{filter:saturate(1.1) brightness(1.05)}
.ek-outline{
  border-radius:999px;
  border:1px solid rgba(148,163,184,.22);
  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.05);
  font-weight:900;
  padding:.7rem 1rem;
}
.ek-outline:hover{background: rgba(255,255,255,.08); color:#fff}

.ek-accent-line{
  height:3px;
  background: linear-gradient(90deg,var(--brand1),var(--brand2),var(--accent),var(--brand2),var(--brand1));
  background-size: 240% 100%;
  animation: ekGradient 9s ease-in-out infinite;
  opacity:.9;
}
@keyframes ekGradient{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* Hero */
.hero{
  padding: 5rem 0 4rem;
  position:relative;
}
.hero .hero-grid{
  display:grid;
  grid-template-columns: 1.25fr .95fr;
  gap:2.2rem;
  align-items:center;
}
@media (max-width: 992px){
  .hero .hero-grid{grid-template-columns:1fr}
}
.ek-badge{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.4rem .75rem;
  border-radius:999px;
  background: rgba(56,189,248,.10);
  border:1px solid rgba(56,189,248,.24);
  color:#dbeafe;
  font-weight:900;
}
.h1-hero{
  font-size: clamp(2.1rem, 4.2vw, 3.6rem);
  line-height:1.06;
  font-weight: 980;
  letter-spacing:-.03em;
  margin-top:.9rem;
}
.grad-text{
  background: linear-gradient(90deg,var(--brand1),var(--brand2),var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lead-muted{
  color: rgba(226,232,240,.82);
  font-size: 1.06rem;
  margin-top: 1rem;
  max-width: 58ch;
}
.hero-actions{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem}
.hero-kpis{
  display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.3rem;
  color: rgba(226,232,240,.78);
}
.kpi{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.45rem .7rem;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(148,163,184,.18);
  font-weight:800;
  font-size:.92rem;
}
.kpi i{color: var(--brand1)}

.hero-media{
  border-radius: 28px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(148,163,184,.18);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.hero-media img{width:100%; height:auto; display:block}

/* Section */
section{padding:4.5rem 0}
.section-title{
  font-weight: 980;
  letter-spacing:-.02em;
}
.section-sub{color: rgba(226,232,240,.74)}
.hr-soft{border-color: rgba(148,163,184,.12)}

/* Cards */
.card-pro{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(148,163,184,.16);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
}
.card-pro:hover{
  border-color: rgba(56,189,248,.28);
  transform: translateY(-2px);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  background: rgba(255,255,255,.05);
}
.icon-box{
  width:54px; height:54px; border-radius:18px;
  display:grid; place-items:center;
  background: linear-gradient(180deg, rgba(56,189,248,.16), rgba(56,189,248,.04));
  border:1px solid rgba(56,189,248,.22);
  color:#dbeafe;
}

/* Tabs */
.nav-tabs{
  border-bottom:1px solid rgba(148,163,184,.16) !important;
}
.nav-tabs .nav-link{
  border:0 !important;
  color: rgba(226,232,240,.78) !important;
  font-weight:900;
  border-radius: 14px 14px 0 0;
}
.nav-tabs .nav-link.active{
  background: rgba(56,189,248,.12) !important;
  color:#fff !important;
}
.tab-pane{
  border:1px solid rgba(148,163,184,.16);
  border-top:0;
  border-radius: 0 0 18px 18px;
  background: rgba(255,255,255,.03);
}

/* App cards */
.app-card{
  position:relative;
  overflow:hidden;
}
.app-card .ribbon{
  position:absolute; top:14px; right:14px;
  padding:.35rem .6rem;
  border-radius:999px;
  font-weight:950;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(148,163,184,.18);
}
.app-card img{border-radius:18px; border:1px solid rgba(148,163,184,.16)}
.small-muted{color: rgba(226,232,240,.70)}

/* Process */
.stepper{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:1rem;
}
@media (max-width: 992px){.stepper{grid-template-columns:1fr}}
.step{
  padding:1.25rem;
  border-radius: 20px;
  border:1px solid rgba(148,163,184,.16);
  background: rgba(255,255,255,.03);
}
.step .num{
  width:38px; height:38px; border-radius:14px;
  display:grid; place-items:center;
  background: rgba(99,102,241,.14);
  border:1px solid rgba(99,102,241,.24);
  font-weight:980;
}

/* Contact */
.form-control, .form-select{
  background: rgba(255,255,255,.04) !important;
  border:1px solid rgba(148,163,184,.20) !important;
  color: #fff !important;
  border-radius: 14px !important;
  padding:.8rem .9rem !important;
}
.form-control::placeholder{color: rgba(226,232,240,.55)}
.form-control:focus, .form-select:focus{
  box-shadow: 0 0 0 .25rem rgba(56,189,248,.16) !important;
  border-color: rgba(56,189,248,.45) !important;
}
.form-check-input{
  background-color: rgba(255,255,255,.06) !important;
  border-color: rgba(148,163,184,.30) !important;
}
.form-check-input:checked{
  background-color: var(--brand2) !important;
  border-color: var(--brand2) !important;
}

/* Map */
.map-wrap{
  border-radius: 22px;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.16);
  box-shadow: var(--shadow2);
}

/* Footer */
footer{
  border-top: 1px solid rgba(148,163,184,.12);
  background: rgba(0,0,0,.12);
}
.footer-links a{color: rgba(226,232,240,.70)}
.footer-links a:hover{color:#fff}

/* Floating CTA */
.fab-stack{
  position:fixed;
  right: calc(env(safe-area-inset-right) + 18px);
  bottom: calc(env(safe-area-inset-bottom) + 18px + var(--cookie-h));
  z-index: 1055;
  display:flex;
  flex-direction:column;
  gap:.65rem;
}
.fab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.85rem 1rem;
  border-radius:999px;
  font-weight:950;
  border:1px solid rgba(148,163,184,.16);
  background: rgba(255,255,255,.06);
  color:#fff;
  box-shadow: var(--shadow2);
  min-width: 54px;
}
.fab.primary{
  background: linear-gradient(90deg,var(--brand1),var(--brand2));
  border:0;
  color:#06111f;
}
.fab.whatsapp{
  background:#25D366;
  border:0;
  color:#06111f;
}
.fab:active{transform: translateY(1px)}

@media (max-width: 576px){
  .fab .label{display:none}
  .fab{padding:.9rem; min-width:56px}
}

/* Cookie */
#cookieBanner{
  background: rgba(7,11,20,.92) !important;
  border-top: 1px solid rgba(148,163,184,.16);
  backdrop-filter: blur(10px);
}
#cookieBanner a{color:#7dd3fc}


/* FIX: opciones del select visibles en escritorio */
#contacto .form-select {
  color: #e9eef7;                 /* texto del select (cerrado) */
  background-color: rgba(20, 25, 35, 0.65);
}

/* El desplegable (las opciones) */
#contacto .form-select option {
  color: #111 !important;         /* texto en la lista */
  background-color: #fff !important; /* fondo en la lista */
}






/* ============ Cookies modal pro ============ */
.cookie-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  z-index: 9998;
}

.cookie-modal{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 9999;
  padding: 16px;
}

.cookie-card{
  width: min(560px, 100%);
  border-radius: 18px;
  padding: 18px;
  background: rgba(18, 22, 32, .92);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
  color: rgba(255,255,255,.92);
}

.cookie-head{
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.cookie-icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
}

.cookie-sub{
  font-size: .95rem;
  opacity: .85;
}

.cookie-body p{
  margin: 0;
  line-height: 1.45;
  opacity: .92;
}

.cookie-link{
  color: #9ad7ff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-note{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  font-size: .92rem;
  opacity: .9;
}

.cookie-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

@media (max-width: 420px){
  .cookie-actions{
    flex-direction: column;
  }
  .cookie-actions .btn{
    width: 100%;
  }
}