:root{
      --bg:#0b0b0e;              /* fondo base oscuro */
      --fg:#f2f4f8;              /* texto base */
      --muted:#b6bccb;           /* texto secundario */
      --brand:#7c5cff;           /* acento morado/eléctrico */
      --brand-2:#21d4ff;         /* acento cyan */
      --card:#101219cc;          /* vidrio principal */
      --card-solid:#121420;      /* fallback sin blur */
      --stroke:#2a2e3a88;        /* borde vidrio */
      --ok:#00d68f;
      --warn:#ffcc00;
      --danger:#ff3d71;
      --radius:20px;
      --shadow:0 10px 30px rgba(0,0,0,.35);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
   body{
  margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  color:var(--fg); background:var(--bg); overflow-x:hidden;

  /* Patrón de energía diagonal tipo tech */
  background-image:
    radial-gradient(60rem 60rem at 80% -10%, rgba(124,92,255,.15), transparent 60%),
    radial-gradient(50rem 50rem at -10% 90%, rgba(33,212,255,.14), transparent 60%),
    repeating-linear-gradient(45deg, rgba(124,92,255,.05) 0 2px, transparent 2px 8px);
  background-attachment: fixed;
  background-size: cover;
}




    a { color: inherit; text-decoration: none; }
    img{ max-width:100%; height:auto; display:block; }
    .container{ width:min(1200px, 92vw); margin-inline:auto; }

    /* Header */
    header{
      position:sticky; top:0; z-index:40;
      backdrop-filter:saturate(140%) blur(8px);
      -webkit-backdrop-filter:saturate(140%) blur(8px);
      background:linear-gradient(180deg, rgba(16,18,25,.72), rgba(16,18,25,.35));
      border-bottom:1px solid var(--stroke);
    }
    .nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:14px 0; }
    .brand{ display:flex; align-items:center; gap:.75rem; font-weight:800; letter-spacing:.4px; }
    .logo{
      width:36px; aspect-ratio:1; border-radius:12px; display:grid; place-items:center;
      background:radial-gradient(120% 120% at 0% 0%, var(--brand), transparent 70%), radial-gradient(120% 120% at 100% 100%, var(--brand-2), transparent 70%), linear-gradient(135deg,#161925,#0e1118);
      box-shadow: inset 0 0 0 1px #ffffff0f, 0 6px 18px #0008;
      font-size:20px;
    }
    .menu{ display:flex; align-items:center; gap:1rem; }
    .menu a{ opacity:.9; font-weight:600; padding:.5rem .75rem; border-radius:12px; }
    .menu a:hover{ background:#ffffff0d; }
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:.5rem; cursor:pointer;
      padding:.7rem 1rem; border-radius:14px; font-weight:700; border:1px solid var(--stroke);
      background:linear-gradient(180deg, #1a1d29cc, #0f121acc);
      box-shadow: var(--shadow);
      transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
    }
    .btn:hover{ transform: translateY(-1px); border-color:#ffffff22; }
    .btn--primary{ background: linear-gradient(90deg, var(--brand), var(--brand-2)); border: none; color:#0a0c12; }

    /* Hero */
    .hero{ position:relative; isolation:isolate; padding: clamp(72px, 10vw, 120px) 0 64px; }
    .hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: min(5vw, 48px); align-items:center; }
    .eyebrow{ color:var(--brand-2); font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:.82rem; }
    h1{ margin:.35em 0 .3em; font-size: clamp(2rem, 3.8vw, 3.5rem); line-height:1.05; }
    .lead{ color:var(--muted); font-size: clamp(1rem, 1.4vw, 1.2rem); max-width: 60ch; }
    .cta{ display:flex; gap:.8rem; margin-top:1.2rem; flex-wrap:wrap; }

    /* Glass card preview */
    .preview{
      border-radius: var(--radius);
      border:1px solid var(--stroke);
      background: color-mix(in oklab, var(--card), transparent 8%);
      backdrop-filter: blur(10px) saturate(120%);
      -webkit-backdrop-filter: blur(10px) saturate(120%);
      box-shadow: var(--shadow);
      padding:20px; min-height:300px; display:grid; place-items:center;
    }
    .stat-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; width:100%; }
    .stat{ padding:16px; border:1px solid var(--stroke); border-radius:16px; background:#0d111a9a; text-align:center; }
    .stat b{ font-size:1.6rem; }
    .stat small{ color:var(--muted) }

    /* Features */
    .section{ padding:72px 0; }
    .section h2{ font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin:0 0 10px; }
    .muted{ color:var(--muted) }
    .cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; margin-top:22px; }
    .card{ border:1px solid var(--stroke); background:linear-gradient(180deg, #121624ee, #0f1320cc); border-radius:18px; padding:20px; box-shadow: var(--shadow); }
    .card h3{ margin:.4rem 0 .2rem; font-size:1.12rem }

    /* CTA band */
    .band{ margin-top:40px; border:1px dashed #ffffff22; border-radius:18px; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; background:#0b0f19aa }

    /* Footer */
    footer{ margin-top:60px; border-top:1px solid var(--stroke); padding:28px 0 48px; color:#c9cedc; }
    .foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

    /* Icons */
    .i{ width:18px; height:18px; display:inline-block; }
    .i--insta{ background:conic-gradient(from 210deg, #f5d, #f90, #fd0, #6f0, #0cf, #a0f, #f5d); -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M7 2C4.243 2 2 4.243 2 7v10c0 2.757 2.243 5 5 5h10c2.757 0 5-2.243 5-5V7c0-2.757-2.243-5-5-5H7zm0 2h10c1.654 0 3 1.346 3 3v10c0 1.654-1.346 3-3 3H7c-1.654 0-3-1.346-3-3V7c0-1.654 1.346-3 3-3zm12 1a1 1 0 100 2 1 1 0 000-2zM12 7a5 5 0 100 10 5 5 0 000-10zm0 2a3 3 0 110 6 3 3 0 010-6z"/></svg>') center/contain no-repeat; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M7 2C4.243 2 2 4.243 2 7v10c0 2.757 2.243 5 5 5h10c2.757 0 5-2.243 5-5V7c0-2.757-2.243-5-5-5H7zm0 2h10c1.654 0 3 1.346 3 3v10c0 1.654-1.346 3-3 3H7c-1.654 0-3-1.346-3-3V7c0-1.654 1.346-3 3-3zm12 1a1 1 0 100 2 1 1 0 000-2zM12 7a5 5 0 100 10 5 5 0 000-10zm0 2a3 3 0 110 6 3 3 0 010-6z"/></svg>') center/contain no-repeat; }

    /* Responsive */
    .hamb{ display:none; }
    @media (max-width: 900px){
      .hero-grid{ grid-template-columns: 1fr; }
      .cards{ grid-template-columns: 1fr; }
      .stat-grid{ grid-template-columns: 1fr; }
      .menu{ display:none; }
      .hamb{ display:inline-flex; }
      .nav-open .menu{ display:flex; position:absolute; top:64px; right:4vw; flex-direction:column; background:#0b0f19ee; border:1px solid var(--stroke); border-radius:16px; padding:8px; box-shadow:var(--shadow); }
    }
 .brand {
  display: flex;
  align-items: center;
  gap: .8rem;
}

/* Recuadro que reemplaza el icono */
.brand-logo {
  width: 50px;        /* tamaño del recuadro */
  height: 50px;
  border-radius: 19px;
  overflow: hidden;
  background: #11161d; /* fondo oscuro suave */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
}

/* Imagen dentro del recuadro */
.brand-logo img {
  width: 85%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(0,0,0,.6));
}