:root{
      --azul-oscuro:#061529;
      --azul:#0878e4;
      --azul-claro:#eaf4ff;
      --verde:#25d366;
      --texto:#142033;
      --gris:#64748b;
      --blanco:#ffffff;
      --fondo:#f5f8fc;
      --borde:#dbe5f0;
      --sombra:0 18px 55px rgba(15, 36, 64, .12);
      --radio:24px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:Inter,Segoe UI,Arial,sans-serif;
      color:var(--texto);
      background:var(--fondo);
      line-height:1.55;
    }

    img{display:block;max-width:100%}
    a{text-decoration:none;color:inherit}

    .contenedor{
      width:min(1180px, calc(100% - 32px));
      margin:auto;
    }

    .barra{
      position:sticky;
      top:0;
      z-index:50;
      background:rgba(6,21,41,.94);
      backdrop-filter:blur(12px);
      border-bottom:1px solid rgba(255,255,255,.08);
    }

    .nav{
      min-height:72px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
    }

    .marca{
      color:white;
      font-size:1.45rem;
      font-weight:900;
      letter-spacing:-.03em;
    }

    .marca span{color:#1685f5}

    .menu{
      display:flex;
      gap:26px;
      align-items:center;
      color:#dce8f5;
      font-weight:700;
      font-size:.95rem;
    }

    .boton{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:52px;
      padding:0 24px;
      border-radius:999px;
      font-weight:800;
      transition:.2s ease;
      border:0;
      cursor:pointer;
    }

    .boton:hover{transform:translateY(-2px)}
    .boton-azul{background:var(--azul);color:white;box-shadow:0 12px 28px rgba(8,120,228,.26)}
    .boton-verde{background:var(--verde);color:#072012;box-shadow:0 12px 28px rgba(37,211,102,.26)}
    .boton-claro{background:white;color:var(--azul-oscuro)}

    .hero{
      background:var(--azul-oscuro);
      overflow:hidden;
    }

    .hero-imagen{
      width:100%;
      aspect-ratio:1536/405;
      object-fit:cover;
      object-position:center;
    }

    .cta-hero{
      margin-top:-1px;
      background:linear-gradient(90deg,#061529,#0c294c);
      padding:24px 0 30px;
    }

    .cta-hero .contenedor{
      display:flex;
      justify-content:center;
      gap:14px;
      flex-wrap:wrap;
    }

    .seccion{
      padding:76px 0;
    }

    .seccion-blanca{background:white}

    .encabezado{
      max-width:760px;
      margin:0 auto 38px;
      text-align:center;
    }

    .etiqueta{
      display:inline-block;
      margin-bottom:12px;
      color:var(--azul);
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.12em;
      font-size:.78rem;
    }

    h1,h2,h3,p{margin-top:0}
    h2{
      font-size:clamp(2rem,4vw,3.15rem);
      line-height:1.08;
      letter-spacing:-.045em;
      margin-bottom:16px;
    }

    .encabezado p{
      color:var(--gris);
      font-size:1.08rem;
    }

    .imagen-seccion{
      border-radius:var(--radio);
      overflow:hidden;
      box-shadow:var(--sombra);
      border:1px solid var(--borde);
      background:white;
    }

    .imagen-seccion img{
      width:100%;
      height:auto;
    }

    .rubros{
      display:grid;
      grid-template-columns:repeat(6,1fr);
      gap:14px;
      margin-top:34px;
    }

    .rubro{
      background:white;
      border:1px solid var(--borde);
      border-radius:18px;
      padding:20px 12px;
      text-align:center;
      font-weight:800;
      box-shadow:0 8px 22px rgba(15,36,64,.06);
    }

    .rubro span{
      display:block;
      font-size:1.7rem;
      margin-bottom:8px;
    }

    .beneficios{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:20px;
      margin-top:36px;
    }

    .beneficio{
      background:white;
      border:1px solid var(--borde);
      border-radius:22px;
      padding:26px;
      box-shadow:0 10px 30px rgba(15,36,64,.07);
    }

    .beneficio strong{
      display:block;
      font-size:1.08rem;
      margin-bottom:8px;
    }

    .beneficio p{
      color:var(--gris);
      margin:0;
    }

    .hardware{
      background:linear-gradient(180deg,#edf6ff,#f8fbff);
    }

    .hardware-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:20px;
    }

    .equipo{
      background:white;
      border:1px solid var(--borde);
      border-radius:22px;
      padding:28px 22px;
      text-align:center;
      box-shadow:0 10px 30px rgba(15,36,64,.06);
    }

    .equipo .icono{
      font-size:2.3rem;
      margin-bottom:12px;
    }

    .equipo h3{margin-bottom:8px}
    .equipo p{margin:0;color:var(--gris)}

    .cta-final{
      padding:78px 0;
      background:
        radial-gradient(circle at 80% 10%, rgba(22,133,245,.26), transparent 28%),
        linear-gradient(135deg,#061529,#0a2546);
      color:white;
      text-align:center;
    }

    .cta-final h2{max-width:780px;margin-left:auto;margin-right:auto}
    .cta-final p{
      color:#cbd9e8;
      max-width:690px;
      margin:0 auto 28px;
      font-size:1.08rem;
    }

    footer{
      background:#030c17;
      color:#9eb0c4;
      padding:28px 0;
      font-size:.92rem;
    }

    .pie{
      display:flex;
      justify-content:space-between;
      gap:20px;
      flex-wrap:wrap;
    }

    .whatsapp-flotante{
      position:fixed;
      right:22px;
      bottom:22px;
      z-index:60;
      width:60px;
      height:60px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:var(--verde);
      box-shadow:0 16px 35px rgba(37,211,102,.35);
      font-size:1.65rem;
    }

    @media (max-width:980px){
      .menu a:not(.nav-cta){display:none}
      .rubros{grid-template-columns:repeat(3,1fr)}
      .beneficios{grid-template-columns:1fr}
      .hardware-grid{grid-template-columns:repeat(2,1fr)}
    }

    @media (max-width:640px){
      .contenedor{width:min(100% - 22px,1180px)}
      .nav{min-height:64px}
      .marca{font-size:1.2rem}
      .nav .boton{min-height:42px;padding:0 15px;font-size:.86rem}
      .hero-imagen{
        aspect-ratio:auto;
        min-height:360px;
        object-fit:cover;
        object-position:65% center;
      }
      .cta-hero .boton{width:100%}
      .seccion{padding:54px 0}
      .rubros{grid-template-columns:repeat(2,1fr)}
      .hardware-grid{grid-template-columns:1fr}
      .imagen-seccion{
        border-radius:16px;
        overflow-x:auto;
      }
      .imagen-seccion img{
        min-width:920px;
        max-width:none;
      }
      .kits .imagen-seccion img{min-width:1050px}
      .pie{justify-content:center;text-align:center}
    }