:root{
      --bg: #0b1220;
      --card: rgba(255,255,255,.08);
      --card2: rgba(255,255,255,.06);
      --text: #eaf0ff;
      --muted:#b7c0d8;
      --primary:#00d4ff;
      --primary2:#2b7bff;
      --border: rgba(255,255,255,.14);
      --shadow: 0 18px 45px rgba(0,0,0,.45);
      --radius: 18px;
    }

    *{ box-sizing:border-box; margin:0; padding:0; }
    body{
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: radial-gradient(1200px 700px at 20% 10%, rgba(0,212,255,.18), transparent 55%),
                  radial-gradient(900px 600px at 90% 30%, rgba(43,123,255,.20), transparent 55%),
                  linear-gradient(180deg, #060a14, var(--bg));
      color: var(--text);
      line-height:1.5;
      overflow-x:hidden;
    }

    a{ color:inherit; text-decoration:none; }
    .container{ width:min(1100px, 92%); margin:0 auto; }

    /* NAV */
    .nav{
      position: sticky;
      top:0;
      z-index:50;
      backdrop-filter: blur(10px);
      background: rgba(6,10,20,.55);
      border-bottom:1px solid var(--border);
    }
    .nav-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 14px 0;
      gap: 14px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      font-weight:800;
      letter-spacing:.5px;
    }
    .brand-badge{
      width:40px; height:40px;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(0,212,255,.35), rgba(43,123,255,.35));
      border:1px solid var(--border);
      box-shadow: var(--shadow);
      display:grid; place-items:center;
      font-weight:900;
      color: var(--primary);
    }

    .menu{
      display:flex;
      align-items:center;
      gap: 6px;
      list-style:none;
    }
    .menu a{
      display:inline-flex;
      padding:10px 12px;
      border-radius: 12px;
      color: var(--muted);
      transition: .2s ease;
    }
    .menu a:hover{
      color: var(--text);
      background: rgba(255,255,255,.06);
    }

    .nav-cta{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding: 10px 14px;
      border-radius: 14px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.06);
      color: var(--text);
      cursor:pointer;
      transition:.2s ease;
      white-space:nowrap;
    }
    .btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.09); }
    .btn-primary{
      background: linear-gradient(135deg, rgba(0,212,255,.25), rgba(43,123,255,.25));
      border:1px solid rgba(0,212,255,.35);
      color: var(--text);
    }
    .btn-primary:hover{ background: linear-gradient(135deg, rgba(0,212,255,.35), rgba(43,123,255,.35)); }

    .hamb{
      display:none;
      width:44px; height:44px;
      border-radius:14px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.06);
      color: var(--text);
      cursor:pointer;
    }

    /* HERO */
    .hero{
      padding: 60px 0 28px;
    }
    .hero-grid{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 22px;
      align-items:stretch;
    }
    .hero-card{
      border:1px solid var(--border);
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 28px;
      position:relative;
      overflow:hidden;
    }
    .hero-card:before{
      content:"";
      position:absolute;
      inset:-2px;
      background: radial-gradient(600px 220px at 25% 0%, rgba(0,212,255,.20), transparent 55%),
                  radial-gradient(600px 260px at 90% 20%, rgba(43,123,255,.18), transparent 60%);
      pointer-events:none;
    }
    .hero-card > *{ position:relative; }
    .kicker{
      display:inline-flex;
      gap:8px;
      align-items:center;
      padding: 7px 12px;
      border-radius: 999px;
      border:1px solid rgba(0,212,255,.25);
      background: rgba(0,212,255,.08);
      color: var(--primary);
      font-weight:700;
      font-size: 13px;
    }
    h1{
      margin-top:14px;
      font-size: clamp(28px, 4vw, 44px);
      line-height:1.12;
      letter-spacing:.2px;
    }
    .lead{
      margin-top:12px;
      color: var(--muted);
      font-size: 16px;
      max-width: 56ch;
    }
    .hero-actions{
      margin-top: 18px;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }
    .stats{
      margin-top: 18px;
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }
    .stat{
      border:1px solid var(--border);
      background: rgba(255,255,255,.05);
      border-radius: 16px;
      padding: 12px;
    }
    .stat b{ display:block; font-size: 18px; color: var(--text); }
    .stat span{ color: var(--muted); font-size: 12px; }

    .side{
      border:1px solid var(--border);
      background: rgba(255,255,255,.05);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 18px;
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .side .card{
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      border-radius: 16px;
      padding: 14px;
    }
    .side h3{
      font-size: 16px;
      margin-bottom:6px;
    }
    .side p{ color: var(--muted); font-size: 14px; }
    .pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 8px 12px;
      border-radius: 999px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.04);
      color: var(--muted);
      font-size: 13px;
      width: fit-content;
    }

    /* SECTIONS */
    section{ padding: 38px 0; }
    .section-title{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap: 14px;
      margin-bottom: 16px;
    }
    .section-title h2{
      font-size: 22px;
    }
    .section-title p{
      color: var(--muted);
      max-width: 60ch;
      font-size: 14px;
    }

    .grid-3{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .feature{
      border:1px solid var(--border);
      background: rgba(255,255,255,.05);
      border-radius: var(--radius);
      padding: 18px;
      box-shadow: 0 12px 30px rgba(0,0,0,.25);
      min-height: 140px;
    }
    .feature .icon{
      width:44px; height:44px;
      border-radius: 14px;
      border:1px solid rgba(0,212,255,.25);
      background: rgba(0,212,255,.08);
      display:grid; place-items:center;
      margin-bottom: 10px;
      color: var(--primary);
      font-weight: 900;
    }
    .feature h3{ font-size: 16px; margin-bottom:6px; }
    .feature p{ color: var(--muted); font-size: 14px; }

    .cover{
      border:1px solid var(--border);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      border-radius: var(--radius);
      padding: 18px;
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .cover ul{ list-style:none; display:grid; gap:10px; }
    .cover li{
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      border-radius: 16px;
      padding: 12px;
      color: var(--muted);
      font-size: 14px;
    }
    .cover b{ color: var(--text); }

    /* CONTACT */
    .contact{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .form{
      border:1px solid var(--border);
      background: rgba(255,255,255,.05);
      border-radius: var(--radius);
      padding: 18px;
    }
    .form label{ display:block; color: var(--muted); font-size: 13px; margin: 10px 0 6px; }
    .form input, .form textarea{
      width:100%;
      padding: 12px 12px;
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.25);
      color: var(--text);
      outline:none;
    }
    .form textarea{ min-height: 120px; resize: vertical; }
    .form small{ color: var(--muted); display:block; margin-top:8px; font-size: 12px; }

    footer{
      padding: 24px 0 60px;
      border-top:1px solid var(--border);
      color: var(--muted);
      text-align:center;
    }

    /* WhatsApp floating button */
    .wa{
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 999;
      width: 54px;
      height: 54px;
      border-radius: 18px;
      display:grid;
      place-items:center;
      background: linear-gradient(135deg, rgba(37,211,102,.35), rgba(37,211,102,.20));
      border:1px solid rgba(37,211,102,.40);
      box-shadow: 0 18px 40px rgba(0,0,0,.45);
      transition: .2s ease;
    }
    .wa:hover{ transform: translateY(-2px) scale(1.02); }

    /* Responsive */
    @media (max-width: 900px){
      .hero-grid{ grid-template-columns: 1fr; }
      .grid-3{ grid-template-columns: 1fr; }
      .cover{ grid-template-columns: 1fr; }
      .contact{ grid-template-columns: 1fr; }
      .menu{ 
        position: absolute;
        left: 0;
        right: 0;
        top: 68px;
        padding: 10px;
        margin: 0 auto;
        width: min(1100px, 92%);
        border:1px solid var(--border);
        background: rgba(6,10,20,.88);
        border-radius: 18px;
        display:none;
        flex-direction:column;
        align-items:stretch;
      }
      .menu a{ width:100%; justify-content:flex-start; }
      .hamb{ display:inline-flex; align-items:center; justify-content:center; }
      .nav-cta .btn{ display:none; } /* oculta CTA extra en móvil */
    }
    .menu.show{ display:flex; }


    /* Sidebar logo grande */
.brand img{
  width: 54px;
  height: 54px;
  border-radius: 14px;
  object-fit: contain;      /* NO se deforma */
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  padding: 6px;
}

/* Logo pequeño en topbar */
.top-logo{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  object-fit: contain;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  padding: 6px;
}


.contact-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 10px;
}

.contact-card{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  border-radius: 18px;
  padding: 22px 18px;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.contact-card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.07);
  border-color: rgba(0,212,255,.28);
}

.contact-icon{
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  border: 1px solid rgba(0,212,255,.25);
  background: rgba(0,212,255,.08);
  color: #00d4ff;
  font-size: 22px;
}

.contact-card h4{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: #eaf0ff;
}

.contact-card p{
  margin: 0 0 12px;
  font-size: 13px;
  color: rgba(234,240,255,.75);
  line-height: 1.35;
}

.contact-link{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: #eaf0ff;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  word-break: break-word;
}

.contact-link:hover{
  border-color: rgba(0,212,255,.30);
  background: rgba(0,212,255,.10);
}

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