/* ==========================================================
   HEADER ARS — fuente única del header y menú principal
   Copia fiel del header maestro de index.html (reglas de
   styles.css + <style> de index). Lo cargan todas las páginas
   con header, también las autocontenidas de ecosistema/ que no
   usan styles.css. Usa valores literales (no var(--…)) porque
   cada página autocontenida define su propio :root.
   ========================================================== */
.top{height:76px;display:flex;align-items:center;gap:32px;padding:0 max(24px,calc((100vw - 1240px)/2));position:sticky;top:0;background:rgba(5,7,9,.92);backdrop-filter:blur(14px);z-index:20;border-bottom:1px solid #151b20;font-family:Inter,Arial,Helvetica,sans-serif;line-height:1.45;color:#f7f9fb}
.top,.top *{box-sizing:border-box}
.top a{color:inherit;text-decoration:none}

/* Marca: símbolo 3D animado (GIF) + wordmark */
.top .brand{display:flex;align-items:center;font-weight:800;font-size:26px;letter-spacing:-1px;min-width:235px}
.brand-v2{display:flex!important;align-items:center;gap:10px;min-width:260px;text-decoration:none}
.brand-symbol{width:54px;height:48px;object-fit:contain;filter:drop-shadow(0 0 9px rgba(0,174,239,.18))}
.brand-wordmark{display:flex;align-items:center;gap:12px;line-height:.92;color:#fff;white-space:nowrap}
.brand-wordmark strong{font-size:2.15rem;letter-spacing:.03em;font-weight:700;color:#fff}
.brand-wordmark span{font-size:.84rem;line-height:1.05;text-transform:uppercase;letter-spacing:.08em;color:#c8ccd3;max-width:110px;white-space:normal}
.brand-v2 .brand-symbol{width:54px;height:42px;object-fit:cover;object-position:center;border-radius:4px}

/* Navegación y CTA */
.top nav{display:flex;gap:26px;margin-left:auto}
.top nav a{font-size:14px;color:#dce2e7}
.top nav a:hover{color:#16bfff}
.top>.cta{display:inline-flex;align-items:center;justify-content:center;padding:13px 20px;font-weight:700;border-radius:3px;background:#16bfff;color:#001018;border:1px solid #16bfff}
.top>.cta:hover{background:#6dd8ff}
.top>.cta.small{padding:10px 14px;font-size:13px}

/* Menú móvil (botón ☰; la lógica está en app.js) */
.top .menu{display:none;background:none;border:0;color:white;font-size:25px;cursor:pointer;line-height:1;padding:6px 8px;border-radius:6px}
.top .menu:hover,.top .menu[aria-expanded='true']{color:#16bfff}

/* Entre 901 y 1120px el menú completo y el CTA no caben en una línea:
   se oculta el CTA (Contacto sigue en el menú) para evitar scroll horizontal. */
@media(min-width:901px) and (max-width:1120px){
  .top>.cta{display:none}
}
@media(min-width:901px) and (max-width:1000px){
  .top nav{gap:18px}
}
@media(max-width:900px){
  .top nav,.top>.cta{display:none}
  .top .menu{display:block;margin-left:auto}
  .brand-v2{min-width:auto}
  .brand-wordmark span{display:none}
  .top.nav-open nav{display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;margin:0;
    padding:8px 24px 18px;background:rgba(5,7,9,.98);backdrop-filter:blur(14px);border-bottom:1px solid #26313a;
    box-shadow:0 20px 40px rgba(0,0,0,.5);animation:menuDrop .2s ease}
  .top.nav-open nav a{padding:14px 2px;font-size:16px;border-bottom:1px solid #151b20}
  .top.nav-open nav a:last-child{border-bottom:0}
}
@media(max-width:720px){
  .brand-v2 .brand-symbol{width:46px;height:36px}
}
@media(max-width:560px){
  .brand-symbol{width:46px}
  .brand-wordmark strong{font-size:1.8rem}
}
@keyframes menuDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.top.nav-open nav{animation:none}}