:root{
  --bg:#0e1117;
  --bg2:#131a24;
  --text:#eef2ff;
  --muted:#b7c0d4;
  --line:rgba(255,255,255,.12);

  --card:rgba(255,255,255,.07);
  --card2:rgba(255,255,255,.10);

  --accent:#6ea8ff;
  --accent2:#9ad7ff;
  --shadow:0 16px 40px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
.wrap{width:min(1120px,92%);margin:0 auto}

/* Smooth scroll + anchors no tapados por topbar */
html { scroll-behavior:smooth; }
#inicio,#soluciones,#decision,#paquetes,#detalle-paquetes,#paraquien,#como,#contacto,
#paquete-starter,#paquete-growth,#paquete-pro{
  scroll-margin-top: 92px;
}

.topbar{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(10px);
  background:rgba(14,17,23,.70);
  border-bottom:1px solid var(--line);
}

/* brillo suave arriba */
.topbar::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:2px;
  background:linear-gradient(90deg, transparent, rgba(110,168,255,.65), transparent);
  opacity:.85;
}

/* para que el contenido quede encima del brillo */
.topbar__inner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
}

.topbar.isScrolled{
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.menuBtn{
  display:none;
  background:transparent;border:1px solid var(--line);color:var(--text);
  padding:8px 12px;border-radius:12px;cursor:pointer
}

.nav{display:flex;gap:18px;align-items:center}
.nav a{opacity:.85}
.nav a:hover{opacity:1}
.nav__cta{
  padding:10px 14px;border-radius:14px;
  background:var(--card2);border:1px solid var(--line);
}

/* HERO */
.hero{
  position:relative;
  padding:72px 0 42px 0;
  background:
    radial-gradient(1200px 520px at 20% 10%, rgba(110,168,255,.18), transparent 60%),
    radial-gradient(900px 420px at 90% 30%, rgba(154,215,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(19,26,36,.35), transparent 60%);
  overflow:hidden;
}

/* Imagen de fondo (grafo/cubos) sutil */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:url("/assets/img/bg-grafo-cubos.webp");
  background-repeat:no-repeat;
  background-size: min(920px, 92vw);
  background-position: right 10% top 40%;
  opacity:.26; /* ↑ antes .18 */
  filter: grayscale(.75) contrast(1.15);
  pointer-events:none;
}

.hero__inner{position:relative; z-index:1;}
.hero__inner{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:stretch}
.hero h1{margin:0 0 10px 0;font-size:44px;letter-spacing:.08em}
.hero__lead{margin:0 0 18px 0;color:var(--muted);line-height:1.65}

.hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0 16px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:16px;padding:12px 16px;border:1px solid var(--line);
  font-weight:600;cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.btn--primary{
  background:linear-gradient(135deg, rgba(110,168,255,.22), rgba(154,215,255,.10));
  border-color:rgba(110,168,255,.35);
  box-shadow:var(--shadow);
}
.btn--ghost{
  background:rgba(255,255,255,.06); /* ↑ más contraste */
  border-color:rgba(255,255,255,.16);
}
.btn:hover{transform:translateY(-1px); border-color:rgba(154,215,255,.40)}

.hero__badges{display:flex;gap:10px;flex-wrap:wrap}
.hero__badges span{
  font-size:12px;color:var(--muted);
  border:1px solid var(--line);
  padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.04);
  backdrop-filter: blur(6px);
}

/* Panel hero: más contraste para legibilidad */
.panelCard{
  background:rgba(255,255,255,.10); /* ↑ más legible */
  border:1px solid rgba(255,255,255,.14);
  border-radius:22px;
  padding:18px;
  min-height:100%;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.panelCard h3{margin:0 0 8px 0}
.panelCard p{margin:0 0 10px 0;color:var(--muted);line-height:1.65}
.panelCard ul{margin:0;padding-left:18px;color:var(--muted);line-height:1.8}
.panelCard ul li{margin:6px 0}

.section{padding:54px 0;border-top:1px solid var(--line)}
.section--alt{background:var(--bg2)}
.section__head{margin-bottom:18px}
.section__head h2{margin:0 0 8px 0;font-size:28px}
.section__head p{margin:0;color:var(--muted);line-height:1.65}

.services{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:22px;
  padding:16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.card h3{margin:0 0 8px 0}
.card p{margin:0;color:var(--muted);line-height:1.65}

/* Listas bonitas en cards */
.card ul{
  margin:10px 0 0 0;
  padding-left:18px;
  color:var(--muted);
  line-height:1.8;
}
.card ul li{margin:6px 0}

/* Subtítulos dentro de cards */
.card h3[style*="margin-top"]{
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
}

/* Botones en cards */
.card .btn{
  margin-top:12px;
}
.card .btn{ width:100%; }

/* Tag “Más elegido” */
.tag{
  display:inline-flex;
  align-items:center;
  margin-left:8px;
  font-size:11px;
  color:var(--text);
  border:1px solid rgba(110,168,255,.35);
  background:rgba(110,168,255,.12);
  padding:4px 8px;
  border-radius:999px;
  vertical-align:middle;
}

/* Mini texto en guía de decisión */
.mutedMini{
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
  opacity:.95;
}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.form{
  max-width:620px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:22px;
  padding:18px;
}
.form__row{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
label{font-size:13px;color:var(--muted)}
input,textarea,select{
  background:rgba(0,0,0,.25);
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
  color:var(--text);
  outline:none;
}
select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.35) 50%),
    linear-gradient(135deg, rgba(255,255,255,.35) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:38px;
}
input:focus,textarea:focus,select:focus{border-color:rgba(255,255,255,.25)}
.form__note{color:var(--muted);font-size:12px;margin:10px 0 0 0}

.footer{border-top:1px solid var(--line);padding:18px 0}
.footer__inner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.footer__links{display:flex;gap:14px;color:var(--muted)}
.footer__links a:hover{color:var(--text)}

/* ===== Acordeón Detalle Paquetes ===== */
.accordion { display:flex; flex-direction:column; gap:12px; }

.accItem{
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(255,255,255,.04);
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

.accBtn{
  width:100%;
  display:grid;
  grid-template-columns: 1fr auto auto;
  gap:12px;
  align-items:center;
  padding:16px;
  background:transparent;
  border:0;
  color:var(--text);
  cursor:pointer;
  text-align:left;
}

.accTitle{ font-weight:800; letter-spacing:.02em; }
.accMeta{ color:var(--muted); font-size:13px; opacity:.95; white-space:nowrap; }
.accIcon{
  width:34px; height:34px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  font-weight:900;
  transition: transform .15s ease;
}

.accPanel{ padding:0 16px 16px 16px; }
.accPanel .grid2{ margin-top:12px; }

/* Estado abierto */
.accItem.isOpen .accIcon{ transform:rotate(45deg); }

@media (max-width: 960px){
  .hero__inner{grid-template-columns:1fr}
  .services{grid-template-columns:repeat(2,1fr)}
  .grid2{grid-template-columns:1fr}
  .menuBtn{display:inline-flex}
  .nav{
    position:absolute;left:0;right:0;top:60px;
    display:none;flex-direction:column;align-items:flex-start;
    padding:14px 4%;
    background:rgba(11,12,16,.95);
    border-bottom:1px solid var(--line);
  }
  .nav.isOpen{display:flex}
}

@media (max-width: 520px){
  .services{grid-template-columns:1fr}
  .hero h1{font-size:36px}

  .accBtn{ grid-template-columns: 1fr auto; }
  .accMeta{ grid-column: 1 / -1; white-space:normal; }
}

/* Logo / Marca */
.brand{display:flex;gap:10px;align-items:center}
.brand__img{
  width:44px;height:44px;object-fit:contain;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  padding:6px;
}
.brand__text{display:flex;flex-direction:column;line-height:1.05}
.brand__title{font-weight:800;letter-spacing:.12em;font-size:13px}
.brand__tag{font-size:12px;color:var(--muted);opacity:.9;margin-top:4px}
/* =========================
   MOBILE UI BOOST (solo móvil)
   Mejora separación, contraste y legibilidad
   ========================= */

@media (max-width: 520px){

  /* 1) Fondo general un poquito menos “negro plano” */
  body{
    background:
      radial-gradient(900px 420px at 20% 10%, rgba(110,168,255,.10), transparent 60%),
      radial-gradient(700px 360px at 90% 30%, rgba(154,215,255,.07), transparent 60%),
      var(--bg);
  }

  /* 2) Hero: baja ruido y sube claridad */
  .hero{
    padding:56px 0 28px 0;
  }
  .hero::before{
    opacity:.30; /* menos ruido en móvil */
    background-position: right 30% top 35%;
  }

  /* 3) Secciones: un poco más de “aire” */
  .section{
    padding:42px 0;
  }

  /* 4) Cards: más contraste y separación */
  .card{
    background: rgba(255,255,255,.10);      /* más clara */
    border-color: rgba(255,255,255,.16);     /* borde más visible */
    box-shadow: 0 14px 34px rgba(0,0,0,.40); /* sombra más fuerte */
  }

  /* 5) Cards dentro de sección alterna: diferencia más notoria */
  .section--alt .card{
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.18);
  }

  /* 6) Panel del hero: que destaque sin verse igual a todo */
  .panelCard{
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.18);
  }

  /* 7) Texto: un pelito más claro para lectura */
  .card p,
  .panelCard p,
  .section__head p{
    color: rgba(235,240,255,.86);
  }

  /* 8) Badges: más visibles en móvil */
  .hero__badges span{
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.18);
  }

  /* 9) Botones: que se vean “tocables” y no apagados */
  .btn--ghost{
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.20);
  }

  /* 10) Accordion: más contraste */
  .accItem{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.16);
  }
  .accIcon{
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
  }

  /* 11) Topbar un poco menos oscura para que no “aplastre” */
  .topbar{
    background: rgba(14,17,23,.78);
  }
}
/* =========================
   MOBILE: Tema ligeramente más claro
   (solo móvil, no afecta desktop)
   ========================= */
@media (max-width: 520px){

  /* 1) Variables un poco más claras */
  :root{
    --bg:  #111827;                 /* antes #0e1117 */
    --bg2: #182235;                 /* antes #131a24 */
    --card: rgba(255,255,255,.12);  /* antes .07 */
    --card2: rgba(255,255,255,.16); /* antes .10 */
    --line: rgba(255,255,255,.16);  /* antes .12 */
  }

  /* 2) Fondo con luz suave (evita negro plano) */
  body{
    background:
      radial-gradient(900px 420px at 20% 10%, rgba(110,168,255,.14), transparent 60%),
      radial-gradient(700px 360px at 90% 30%, rgba(154,215,255,.10), transparent 60%),
      var(--bg);
  }

  /* 3) Hero: menos ruido, más claridad */
  .hero{ padding:56px 0 28px 0; }
  .hero::before{
    opacity:.30; /* aún más sutil */
    background-position: right 30% top 35%;
  }

  /* 4) Cards: que se separen y “floten” */
  .card{
    background: var(--card);
    border-color: var(--line);
    box-shadow: 0 16px 40px rgba(0,0,0,.45);
  }
  .section--alt .card{
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.18);
  }

  /* 5) Panel hero más distinguible */
  .panelCard{
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.20);
  }

  /* 6) Texto un poquito más claro (sin quemar) */
  .card p,
  .panelCard p,
  .section__head p{
    color: rgba(238,242,255,.90);
  }

  /* 7) Botones ghost más visibles */
  .btn--ghost{
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.22);
  }

  /* 8) Acordeón: más contraste */
  .accItem{
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.18);
  }
  .accIcon{
    border-color: rgba(255,255,255,.20);
    background: rgba(255,255,255,.08);
  }

  /* 9) Topbar un poco más visible en móvil */
  .topbar{
    background: rgba(17,24,39,.82);
  }
}
/* =========================
   Extras UX: microcopy + tags + acordeón + barra
   ========================= */

.mutedMini{
  margin:10px 0 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

.tag{
  display:inline-flex;
  align-items:center;
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  margin-left:8px;
  vertical-align:middle;
}

.accordion{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:14px;
}

.accItem{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.accBtn{
  width:100%;
  background:transparent;
  border:0;
  color:var(--text);
  padding:16px;
  cursor:pointer;
  display:grid;
  grid-template-columns: 1fr auto auto;
  gap:12px;
  align-items:center;
  text-align:left;
}

.accBtn:hover{
  background:rgba(255,255,255,.04);
}

.accTitle{
  font-weight:800;
  letter-spacing:.02em;
}

.accMeta{
  color:var(--muted);
  font-size:13px;
  white-space:nowrap;
}

.accIcon{
  width:34px;height:34px;
  display:grid;
  place-items:center;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  font-weight:800;
}

.accPanel{
  padding:0 16px 16px 16px;
}

.noteBar{
  margin-top:16px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.noteBar__title{
  font-weight:800;
  letter-spacing:.02em;
}

.noteBar__text{
  color:var(--muted);
}

.noteBar__text a{
  text-decoration:underline;
}

@media (max-width: 960px){
  .accBtn{
    grid-template-columns: 1fr;
    gap:8px;
  }
  .accMeta{
    white-space:normal;
  }
  .accIcon{
    justify-self:flex-start;
  }
}