:root{
    --bg:#0b0e14; --surface:#0f1420; --card:#121826;
    --text:#e7e9ee; --muted:#aab1c3;
    --brand:#2962ff; --brand2:#00e5ff;
    --border:rgba(255,255,255,.08);
    --container:1120px; --radius:14px; --speed:280ms;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; color:var(--text); background:var(--bg);
    font:400 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  }
  
  /* Layout helpers */
  .container{max-width:var(--container); margin:0 auto; padding:0 20px}
  
  /* Header/Nav */
  .site-header{
    position:sticky; top:0; z-index:50;
    backdrop-filter: blur(8px);
    background:rgba(11,14,20,.75);
    border-bottom:1px solid var(--border);
  }
  .nav-wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
  
  .brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text)}
  .logo-img{height:36px; width:auto; display:block; object-fit:contain}
  
  .site-nav{display:flex; gap:10px; align-items:center}
  .nav-link{
    color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:10px;
    transition:background var(--speed), color var(--speed), transform var(--speed);
  }
  .nav-link:hover{background:rgba(255,255,255,.05); color:var(--text); transform:translateY(-1px)}
  .nav-link.active{color:var(--text); background:rgba(255,255,255,.06)}
  .btn{border:1px solid rgba(255,255,255,.14); border-radius:12px}
  .btn:hover{background:rgba(255,255,255,.06)}
  
  /* Mobile toggle */
  .nav-toggle{
    display:none; width:42px; height:42px; border-radius:12px; border:1px solid var(--border);
    background:rgba(255,255,255,.03); cursor:pointer;
  }
  .nav-toggle .bar{display:block; width:22px; height:2px; background:var(--text); margin:6px auto}
  
  /* Sections */
  .section{padding:48px 0}
  .section h1,.section h2{margin:0 0 10px}
  .lead{color:var(--muted); max-width:65ch}
  
  /* Cards (uso general) */
  .cards{display:grid; gap:16px; grid-template-columns:repeat(3,1fr)}
  .card{
    background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
    border:1px solid var(--border); border-radius:var(--radius);
    padding:18px;
  }
  
  /* Footer */
  .site-footer{padding:24px 0 40px; border-top:1px solid var(--border); background:var(--surface)}
  .footer-grid{display:grid; gap:16px; grid-template-columns:1.2fr .8fr}
  .f-links{display:grid; gap:8px}
  .f-links a{color:var(--muted); text-decoration:none; padding:6px 8px; border-radius:10px}
  .f-links a:hover{background:rgba(255,255,255,.06); color:var(--text)}
  .f-copy{grid-column:1/-1; color:var(--muted); font-size:14px; border-top:1px solid var(--border); padding-top:12px}
  
  /* Responsive */
  @media (max-width:960px){
    .cards{grid-template-columns:repeat(2,1fr)}
    .footer-grid{grid-template-columns:1fr}
  }
  @media (max-width:720px){
    .nav-toggle{display:block}
    .site-nav{
      position:absolute; right:20px; top:64px; width:220px; display:none; flex-direction:column;
      background:rgba(11,14,20,.96); border:1px solid var(--border); border-radius:12px; padding:10px;
    }
    .site-nav.open{display:flex}
    .cards{grid-template-columns:1fr}
  }
  
  .logo-img {
    height: 36px;
    width: auto;
    object-fit: contain;
    border-radius: 8px; /* Bordes suaves */
  }
  
  /* ==== Home specifics (mínimo) ==== */
.hero { padding: 56px 0; background: linear-gradient(180deg, rgba(255,255,255,.03), transparent); }
.hero-grid { display:grid; gap:24px; grid-template-columns: 1.1fr .9fr; align-items:center; }
.hero-title { margin:0 0 10px; font-size: clamp(26px, 4.2vw, 44px); line-height:1.15; }
.hero-cta { display:flex; gap:12px; margin-top:14px; }

.btn-primary{ 
  background: linear-gradient(135deg, var(--brand), var(--brand2)); 
  color:#fff; border:1px solid transparent; border-radius:12px; padding:10px 16px; 
  font-weight:600; display:inline-block; 
}
.btn-primary:hover{ transform: translateY(-1px); }

.btn-ghost{
  background: rgba(255,255,255,.05); color: var(--text); 
  border:1px solid var(--border); border-radius:12px; padding:10px 16px; 
  font-weight:600; display:inline-block;
}
.btn-ghost:hover{ background: rgba(255,255,255,.07); }

/* Visual decorativa */
.hero-visual { display:grid; place-items:center; }
.neo-card{
  width:min(520px,100%); aspect-ratio:16/10; border-radius:18px;
  border:1px solid var(--border);
  background: radial-gradient(600px 260px at 120% 20%, rgba(41,98,255,.14), transparent 60%),
              radial-gradient(480px 300px at -10% 120%, rgba(0,229,255,.12), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  position:relative; overflow:hidden;
}
.neo-dot{
  position:absolute; right:-40px; bottom:-40px; width:220px; height:220px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(0,229,255,.22), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(41,98,255,.20), transparent 60%);
  filter: blur(10px);
}
.neo-lines::before{
  content:""; position:absolute; inset:-10% -10% auto -10%; height:60%;
  background: repeating-linear-gradient(105deg, rgba(255,255,255,.06) 0 2px, transparent 2px 26px);
  transform: translateY(-10px) rotate(2deg);
}

/* CTA final – overrides fuertes */
.section.cta-final,
.cta-final .container {
  text-align: center !important;
}

.cta-final h2,
.cta-final .lead {
  text-align: center !important;
  margin: 0 auto 20px;   /* centra y da respiro */
  max-width: 820px;      /* opcional: ancho cómodo para el párrafo */
  display: block;
}

/* Responsive hero */
@media (max-width: 960px){
  .hero-grid { grid-template-columns: 1fr; }
}

/* ── Separador con acento (degradado) ─────────────────────────── */
.accent-sep {
    height: 2px;
    margin: 10px 0 6px;
    background: linear-gradient(90deg,
      rgba(41,98,255,0), rgba(41,98,255,.65),
      rgba(0,229,255,.65), rgba(41,98,255,0));
    border: 0;
    opacity: .95;
  }
  
  .accent-sep.thick {
    height: 4px;
    opacity: 1;
  }
  
  /* ── Micro-animaciones: reveal on scroll + hover sutil ────────── */
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .52s ease, transform .52s ease;
  }
  
  .reveal[data-dir="left"]  { transform: translateX(-18px); }
  .reveal[data-dir="right"] { transform: translateX(18px); }
  .reveal[data-dir="up"]    { transform: translateY(18px); }
  
  .reveal.in {
    opacity: 1;
    transform: translate(0,0);
  }
  
  /* Hover sutil en tarjetas genéricas */
  .card {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }
  
  .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,.30);
    border-color: rgba(255,255,255,.16);
  }
  
  /* Respetar accesibilidad */
  @media (prefers-reduced-motion: reduce) {
    .reveal, .card { transition: none; }
  }

/* Botones: refuerzo por si caché/orden de carga falló */
.btn{ border:1px solid rgba(255,255,255,.14); border-radius:12px; display:inline-block }
.btn-primary{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color:#fff; border:1px solid transparent; border-radius:12px; padding:10px 16px;
  font-weight:600; display:inline-block; transition: transform .2s ease;
}
.btn-primary:hover{ transform: translateY(-1px); }

.btn-ghost{
  background: rgba(255,255,255,.05); color: var(--text);
  border:1px solid var(--border); border-radius:12px; padding:10px 16px;
  font-weight:600; display:inline-block;
}
.btn-ghost:hover{ background: rgba(255,255,255,.07); }

.btn-primary { 
    background: linear-gradient(135deg, var(--brand), var(--brand2)); 
    color: #fff !important; 
    border: 1px solid transparent; 
    border-radius: 12px; 
    padding: 10px 16px; 
    font-weight: 600; 
    display: inline-block; 
    text-decoration: none;
    transition: transform var(--speed), box-shadow var(--speed);
  }
  .btn-primary:hover { 
    transform: translateY(-1px); 
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
  }
  
 /* ===== Barra horizontal de estadísticas ===== */
.statsbar{
    background:
      radial-gradient(800px 300px at 120% -20%, rgba(41,98,255,.20), transparent 60%),
      radial-gradient(700px 260px at -10% 120%, rgba(0,229,255,.16), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 26px 0;
  }
  
  .statsbar-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;              /* sin separación horizontal, separamos con divisores */
    align-items: center;
    text-align: center;
  }
  
  .stat-item{
    padding: 16px 10px;
    position: relative;
  }
  
  .stat-item:not(:last-child)::after{
    content:"";
    position:absolute; top:18%; right:0; bottom:18%;
    width:1px; background: var(--border);
  }
  
  .stat-value{
    font-weight: 800;
    font-size: clamp(22px, 4.6vw, 36px);
    letter-spacing: .5px;
    line-height: 1.1;
    color: #fff;
    text-shadow: 0 0 1px rgba(0,0,0,.25);
  }
  
  .stat-label{
    margin-top: 6px;
    color: var(--muted);
    font-size: clamp(12px, 2.1vw, 15px);
    line-height: 1.35;
    max-width: 22ch;
    margin-left:auto; margin-right:auto;
  }
  
  /* Hover sutil opcional */
  .stat-item:hover .stat-value{ transform: translateY(-1px); transition: transform .2s ease }
  
  /* Responsive */
  @media (max-width: 960px){
    .statsbar-grid{ grid-template-columns: repeat(2, 1fr); }
    .stat-item:nth-child(2)::after,
    .stat-item:nth-child(4)::after{ display:none } /* evitar doble divisor en wrap */
  }
  
  @media (max-width: 560px){
    .statsbar-grid{ grid-template-columns: 1fr; }
    .stat-item::after{ display:none }
  }
  
  .tech-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
  }
  
  .badge {
    padding: 6px 12px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--brand), var(--brand2));
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: transform .2s ease;
  }
  
  .badge:hover {
    transform: translateY(-2px);
  }
  
  /* Estilo base mejorado para chips */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .chip {
    padding: 6px 14px;
    font-size: 0.95rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  }
  
  /* Hover suave */
  .chip:hover {
    background: linear-gradient(135deg, var(--brand), var(--brand2));
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    transform: translateY(-2px);
  }
  
  /* Colores por categoría */
  .about-block:nth-of-type(1) .chip:hover { background: linear-gradient(135deg, #ff6b6b, #ff9a9e); }
  .about-block:nth-of-type(2) .chip:hover { background: linear-gradient(135deg, #6a11cb, #2575fc); }
  .about-block:nth-of-type(3) .chip:hover { background: linear-gradient(135deg, #43cea2, #185a9d); }
  .about-block:nth-of-type(4) .chip:hover { background: linear-gradient(135deg, #f7971e, #ffd200); }
  .about-block:nth-of-type(5) .chip:hover { background: linear-gradient(135deg, #ff512f, #dd2476); }
  
  /* ===== Barra horizontal de capacidades ===== */
.techbar{
    background:
      radial-gradient(800px 300px at 120% -20%, rgba(41,98,255,.20), transparent 60%),
      radial-gradient(700px 260px at -10% 120%, rgba(0,229,255,.16), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 26px 0;
  }
  
  .techbar-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    align-items: start;
  }
  
  .tech-item{
    padding: 12px 14px;
    position: relative;
    min-width: 0; /* evita overflow de textos largos */
  }
  
  .tech-item:not(:last-child)::after{
    content:"";
    position:absolute; top:18%; right:0; bottom:18%;
    width:1px; background: var(--border);
  }
  
  .tech-title{
    font-weight: 700;
    letter-spacing: .3px;
    margin-bottom: 6px;
  }
  
  .tech-list{
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px; /* filas x columnas */
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--muted);
  }
  
  .tech-list li{
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 10px;
    background: rgba(255,255,255,.04);
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap; /* luce como “pills” */
  }
  
  /* Hover sutil (desktop) */
  @media (hover:hover){
    .tech-list li{ transition: transform .18s ease, box-shadow .18s ease, background .18s ease }
    .tech-list li:hover{
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(0,0,0,.18);
      background: linear-gradient(135deg, var(--brand), var(--brand2));
      color:#fff;
    }
  }
  
  /* Responsive: 2 columnas en tablet, 1 en móvil con scroll suave */
  @media (max-width: 960px){
    .techbar-grid{ grid-template-columns: repeat(2, 1fr); }
    .tech-item:nth-child(2)::after,
    .tech-item:nth-child(4)::after{ display:none } /* evita doble divisor cuando hay salto */
  }
  @media (max-width: 560px){
    .techbar-grid{
      grid-template-columns: 1fr;
      row-gap: 10px;
    }
    .tech-item::after{ display:none }
    .tech-list{
      overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px;
    }
    .tech-list li{ scroll-snap-align: start }
  }
  
 
  /* Tarjeta base */
.promo-card {
  padding: 28px;
  text-align: center;
  color: #fff;
  border-radius: 18px;
  background:
    radial-gradient(1200px 400px at 80% 120%, rgba(0,153,255,0.12), transparent 60%),
    linear-gradient(145deg, #0d1220, #141a2a 55%, #0f1b34);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}

/* Título con acento */
.promo-card h3 {
  margin-bottom: 10px;
  font-size: 1.6rem;
  letter-spacing: .2px;
}
.promo-card h3 span {
  color: #59b6ff;
  text-shadow: 0 0 8px rgba(89,182,255,.7);
}

/* Texto */
.promo-card p {
  margin: 6px 0 14px;
  font-size: 1rem;
  line-height: 1.5;
  color: #e9eef7;
}

/* Lista de beneficios */
.promo-list {
  margin: 12px 0 18px;
  padding: 0;
  display: grid;
  gap: 10px 20px;
  text-align: left;
  list-style: none;
}
.promo-list li {
  position: relative;
  padding-left: 28px;
  color: #d6e3ff;
}
.promo-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
  color: #66d0ff;
  text-shadow:
    0 0 6px rgba(102,208,255,.9),
    0 0 14px rgba(0,160,255,.6);
}

/* En pantallas medianas, dos columnas */
@media (min-width: 520px) {
  .promo-list { grid-template-columns: 1fr 1fr; }
}

/* Borde neón “respirando” */
.promo-glow {
  position: relative;
  border: 1px solid rgba(100, 190, 255, .55);
  box-shadow:
    0 0 0 1px rgba(70,160,255,.25) inset,
    0 0 18px rgba(60,160,255,.35),
    0 0 38px rgba(30,130,255,.25);
}
.promo-glow::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(0,160,255,.55),
    rgba(120,220,255,.35),
    rgba(0,140,255,.55));
  filter: blur(18px);
  opacity: .75;
  z-index: -1;
  animation: glowPulse 3.2s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { opacity: .55; filter: blur(14px); }
  50% { opacity: .95; filter: blur(22px); }
}

.promo-card {
  padding: 1px 25px 30px; /* top | lados | bottom */
  text-align: center;
  color: #fff;
  border-radius: 18px;
  background:
    radial-gradient(1200px 400px at 80% 120%, rgba(0,153,255,0.12), transparent 60%),
    linear-gradient(145deg, #0d1220, #141a2a 55%, #0f1b34);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}

.btn-whatsapp {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  z-index: 1000;
  border-radius: 50%;
  background: linear-gradient(145deg, #1e3a8a, #3b82f6); /* azul oscuro → azul brillante */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.8), 0 0 24px rgba(30, 58, 138, 0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-whatsapp img {
  width: 60%;
  height: 60%;
  filter: brightness(0) invert(1); /* fuerza el icono a blanco si es SVG negro */
}

.btn-whatsapp:hover {
  transform: scale(1.1);
  box-shadow: 0 0 18px rgba(59, 130, 246, 1), 0 0 36px rgba(30, 58, 138, 0.8);
}

.btn-whatsapp {
  animation: pulseGlow 1.5s infinite;
}

.btn-whatsapp img,
.btn-whatsapp svg {
  width: 60%;
  height: 60%;
  filter: brightness(0) invert(1); /* si tu logo es negro, esto lo hace blanco */
}

/* Hover con zoom */
.btn-whatsapp:hover {
  transform: scale(1.1);
  box-shadow: 0 0 18px rgba(59,130,246,1), 0 0 36px rgba(30,58,138,.8);
}

/* Animación de pulso */
@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 12px rgba(59,130,246,.8), 0 0 24px rgba(30,58,138,.6);
  }
  50% {
    box-shadow: 0 0 20px rgba(59,130,246,1), 0 0 48px rgba(30,58,138,.9);
  }
  100% {
    box-shadow: 0 0 12px rgba(59,130,246,.8), 0 0 24px rgba(30,58,138,.6);
  }
}