:root{
  --bg-dark:#0f172a;     /* azul muy oscuro */
  --bg-darker:#0b1221;
  --primary:#0ea5e9;     /* cian */
  --accent:#6366f1;      /* violeta */
  --text:#0f172a;
  --muted:#6b7280;
  --soft:#f4f7fb;        /* fondo secciones claras */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:#fff;
}

/* Navbar */
.nav-glass{
  background:rgba(15,23,42,.35);
  backdrop-filter:saturate(120%) blur(6px);
  transition:background .25s ease, box-shadow .25s ease;
}
.nav-glass.scrolled{
  background:var(--bg-dark);
  box-shadow:0 8px 24px rgba(2,6,23,.35);
}
.navbar .logo {
  height: 40px;
}

@media (min-width: 768px) {
  .navbar .logo {
    height: 50px;
  }
}

@media (min-width: 1200px) {
  .navbar .logo {
    height: 60px;
  }
}

.brand-text{font-weight:700;letter-spacing:.3px}

/* CTA buttons */
.btn-cta{
  background:linear-gradient(90deg,var(--primary),var(--accent));
  border:none;color:#fff;font-weight:700;border-radius:999px;
  padding:.65rem 1.25rem; box-shadow:0 10px 20px rgba(99,102,241,.35);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-cta:hover{transform:translateY(-2px); filter:brightness(1.05)}
.btn-outline-cta{
  border:2px solid rgba(255,255,255,.6); color:#fff; border-radius:999px;
}
.btn-outline-cta:hover{border-color:#fff; color:#fff; background:rgba(255,255,255,.08)}

/* Hero */
.hero{
  min-height:92vh; position:relative; padding-top:96px; /* compensar navbar fixed */
  color:#fff; overflow:hidden;
  background:
    radial-gradient(80rem 40rem at 10% 10%, rgba(99,102,241,.25), transparent 60%),
    radial-gradient(80rem 40rem at 90% 20%, rgba(14,165,233,.22), transparent 60%),
    linear-gradient(180deg, rgba(11,18,33,.85), rgba(11,18,33,.85)),
    url('hero.jpg') center/cover no-repeat; /* usa tu imagen hero.jpg */
}
.hero-title{
  font-weight:900; letter-spacing:-.02em;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
}
.hero-title span{background:linear-gradient(90deg,var(--primary),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-subtitle{
  max-width:760px; margin:1rem auto 0; font-size:1.1rem; color:#e5e7eb
}

/* Secciones */
.section-py{padding:80px 0}
.section-title{
  font-weight:800; letter-spacing:-.02em; margin-bottom:.5rem;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  opacity:0; transform:translateY(12px); transition:.6s ease;
}
.section-text {
  text-align: center;   /* fuerza centrado en todos los textos de esta clase */
}

/* Tarjetas y efectos */
.lift{transform:translateY(0); transition:transform .25s ease, box-shadow .25s ease, opacity .6s ease}
.lift:hover{transform:translateY(-6px); box-shadow:0 16px 40px rgba(2,6,23,.15)}
.reveal{opacity:1 !important; transform:none !important}

.service-card{
  border:0; border-radius:20px; background:#fff;
  box-shadow:0 8px 24px rgba(2,6,23,.06);
}
.icon-badge{
  width:72px;height:72px;border-radius:18px;margin:0 auto;
  background:linear-gradient(90deg, rgba(14,165,233,.15), rgba(99,102,241,.15));
  display:flex;align-items:center;justify-content:center; overflow:hidden;
}
.icon-badge img{max-width:56px; max-height:56px}

.service-title{font-weight:700; margin-bottom:.5rem}
.service-desc{color:var(--muted); margin:0}

/* Info cards (Visión/Misión) */
.info-card{
  border:0; border-radius:18px; background:#fff;
  box-shadow:0 6px 20px rgba(2,6,23,.06);
}
.info-title{font-weight:700}

/* Listas */
.bullet-list{padding-left:1.1rem; margin:0}
.bullet-list li{margin:.5rem 0; color:var(--text)}

/* Formulario de contacto */
.contact-form{max-width:680px}
.contact-form .form-control{
  border-radius:12px; border:1px solid #e5e7eb; padding:.9rem .95rem
}
.contact-form .form-control:focus{
  border-color:var(--accent); box-shadow:0 0 0 .2rem rgba(99,102,241,.15)
}

/* Footer */
.site-footer{
  background:var(--bg-darker); color:#cbd5e1; padding:28px 0
}

/* WhatsApp FAB */
/* Botón flotante de WhatsApp */
.whatsapp-fab {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 20px;
  right: 20px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 28px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.whatsapp-fab:hover {
  transform: scale(1.1);
  box-shadow: 3px 3px 8px rgba(0,0,0,0.4);
  text-decoration: none;
  color: #fff;
}

.trust-row{
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center;
  margin-top:1rem;
}
.pill{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.5rem .8rem; font-weight:600; font-size:.95rem;
  color:#e5e7eb; border:1px solid rgba(255,255,255,.25);
  border-radius:999px; background:rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
}
.pill:hover{ background:rgba(255,255,255,.12); }
.pill svg{ opacity:.9 }

/* Segment control */
.hero-switch{
  display:inline-flex; background:rgba(255,255,255,.08);
  padding:.35rem; border-radius:999px; gap:.35rem;
  backdrop-filter: blur(8px); margin-bottom:1.2rem;
  border:1px solid rgba(255,255,255,.18);
}
.seg-btn{
  border:0; padding:.55rem 1rem; border-radius:999px; cursor:pointer;
  color:#e5e7eb; font-weight:700; letter-spacing:.2px; background:transparent;
  transition:all .2s ease;
}
.seg-btn.active{
  color:#0b1221; background:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}

/* Panels */
.hero-panel {
  max-width:980px;
  margin:0 auto;
  opacity:0;
  transform:translateY(10px);
  transition:.35s ease;
  text-align:center; /* <-- agrega esto para centrar todo */
}

.hero-panel.active {
  opacity:1;
  transform:none;
}

.hero-panel[hidden] {
  display:block;
  height:0;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}

/* Cambiar gradiente del hero según el panel */
.hero.dev-active{
  background:
    radial-gradient(80rem 40rem at 10% 10%, rgba(99,102,241,.25), transparent 60%),
    radial-gradient(80rem 40rem at 90% 20%, rgba(14,165,233,.22), transparent 60%),
    linear-gradient(180deg, rgba(11,18,33,.88), rgba(11,18,33,.88)),
    url('hero-dev.jpg') center/cover no-repeat;
}
.hero.cloud-active{
  background:
    radial-gradient(80rem 40rem at 15% 15%, rgba(14,165,233,.28), transparent 60%),
    radial-gradient(80rem 40rem at 85% 25%, rgba(34,197,94,.22), transparent 60%),
    linear-gradient(180deg, rgba(9,12,20,.9), rgba(9,12,20,.9)),
    url('hero-cloud.jpg') center/cover no-repeat;
}

.price-card{
  border:0; border-radius:18px; background:#fff;
  box-shadow:0 10px 28px rgba(2,6,23,.08);
  transition:transform .25s ease, box-shadow .25s ease;
}
.price-card:hover{transform:translateY(-6px); box-shadow:0 16px 40px rgba(2,6,23,.12)}
.price-title{font-weight:700; font-size:1.5rem; margin-bottom:.25rem}
.price-subtitle{color:var(--muted); font-size:.95rem; margin-bottom:1rem}
.price-value{font-size:1.25rem; margin-bottom:1rem}
.price-value strong{font-size:1.8rem; color:var(--accent)}
.price-features{list-style:none; padding:0; margin:0}
.price-features li{margin-bottom:.5rem; color:var(--text)}