body{
  padding-top:96px;
}

.ab-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:2147483000;
  background:linear-gradient(180deg, rgba(0,0,0,.99), rgba(5,5,5,.96));
  border-bottom:1px solid rgba(255,0,0,.32);
  box-shadow:0 18px 48px rgba(0,0,0,.64);
  backdrop-filter:blur(14px);
}

.ab-header-inner{
  width:88%;
  min-height:96px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.ab-logo{
  display:flex;
  align-items:center;
  flex:0 0 auto;
}

.ab-logo img{
  width:220px;
  height:auto;
  display:block;
}

.ab-desktop-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
  flex-wrap:wrap;
}

/* TIPOGRAFÍA PREMIUM */
.ab-desktop-nav a,
.ab-mobile-nav a{
  text-decoration:none;
  text-transform:uppercase;
  font-family:'Montserrat','Poppins','Arial',sans-serif;
  font-weight:800;
  letter-spacing:1.1px;
}

.ab-desktop-nav a{
  position:relative;
  color:#fff;
  font-size:13px;
  white-space:nowrap;
  padding:15px 0;
  transition:.25s ease;
}

.ab-desktop-nav a:hover{
  color:#ff2a2a;
}

.ab-desktop-nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:3px;
  background:#ff1d1d;
  border-radius:20px;
  transition:.25s ease;
}

.ab-desktop-nav a:hover::after,
.ab-desktop-nav a.active::after{
  width:100%;
}

/* BOTÓN ECOSISTEMA */
.ab-desktop-nav .eco,
.ab-mobile-nav .eco{
  color:#071100 !important;
  background:linear-gradient(135deg,#ecff7a,#a6ff00 50%,#62d800);
  border:1px solid rgba(232,255,120,.85);
  box-shadow:0 0 26px rgba(166,255,0,.35), inset 0 0 16px rgba(255,255,255,.22);
  font-weight:900;
}

/* BOTÓN ÁREA COMERCIAL */
.ab-desktop-nav .comercial,
.ab-mobile-nav .comercial{
  color:#00131f !important;
  background:linear-gradient(135deg,#c8f6ff,#35c9ff 50%,#0b8fff);
  border:1px solid rgba(180,240,255,.85);
  box-shadow:0 0 26px rgba(53,201,255,.36), inset 0 0 16px rgba(255,255,255,.22);
  font-weight:900;
}

.ab-desktop-nav .eco,
.ab-desktop-nav .comercial{
  padding:14px 20px;
  border-radius:18px;
}

.ab-desktop-nav .eco::after,
.ab-desktop-nav .comercial::after{
  display:none;
}

/* DESPLEGABLE ECOSISTEMA */
.ab-dropdown{
  position:relative;
  display:flex;
  align-items:center;
}

.ab-dropdown::after{
  content:"";
  position:absolute;
  top:100%;
  left:0;
  width:100%;
  height:22px;
}

.ab-submenu{
  position:absolute;
  top:calc(100% + 18px);
  right:0;
  width:1080px;
  max-width:88vw;
  display:none;
  grid-template-columns:repeat(5,1fr);
  gap:26px;
  padding:34px;
  background:linear-gradient(180deg,#070707,#000);
  border:1px solid rgba(255,255,255,.10);
  border-radius:24px;
  box-shadow:0 34px 90px rgba(0,0,0,.85), 0 0 42px rgba(166,255,0,.14);
}

.ab-dropdown:hover .ab-submenu,
.ab-submenu:hover{
  display:grid;
}

.ab-submenu h3{
  color:#b6ff00;
  font-family:'Montserrat','Poppins','Arial',sans-serif;
  font-size:13px;
  font-weight:900;
  letter-spacing:1.4px;
  text-transform:uppercase;
  margin-bottom:16px;
}

.ab-submenu a{
  display:block;
  padding:9px 0;
  color:rgba(255,255,255,.76);
  font-size:12px;
  font-weight:700;
  letter-spacing:.7px;
  text-transform:uppercase;
  transition:.25s ease;
}

.ab-submenu a:hover{
  color:#b6ff00;
  padding-left:6px;
}

.ab-mobile-button,
.ab-mobile-close,
.ab-mobile-nav{
  display:none;
}

@media(max-width:980px){
  body{
    padding-top:102px !important;
    padding-bottom:0 !important;
  }

  .ab-header{
    top:0 !important;
    bottom:auto !important;
    min-height:92px;
  }

  .ab-header-inner{
    width:92%;
    min-height:92px;
    justify-content:space-between;
  }

  .ab-logo img{
    width:168px;
  }

  .ab-desktop-nav{
    display:none !important;
  }

  .ab-mobile-button{
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:112px;
    height:52px;
    border:1px solid rgba(255,255,255,.20);
    border-radius:18px;
    background:linear-gradient(135deg, rgba(16,16,16,.98), rgba(62,0,0,.96));
    color:#fff;
    font-family:'Montserrat','Poppins','Arial',sans-serif;
    font-size:14px;
    font-weight:900;
    letter-spacing:1.4px;
    box-shadow:0 0 28px rgba(255,0,0,.22);
    cursor:pointer;
  }

  .ab-mobile-nav{
    position:fixed;
    top:102px;
    left:50%;
    transform:translateX(-50%) translateY(-12px);
    z-index:2147482999;
    width:min(92vw,440px);
    max-height:calc(100vh - 122px);
    overflow-y:auto;
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:10px;
    background:linear-gradient(180deg, rgba(0,0,0,.99), rgba(24,0,0,.99));
    border:1px solid rgba(255,0,0,.35);
    border-radius:0 0 28px 28px;
    box-shadow:0 30px 80px rgba(0,0,0,.78), 0 0 44px rgba(255,0,0,.18);
    opacity:0;
    pointer-events:none;
    transition:.22s ease;
  }

  .ab-mobile-nav.open{
    opacity:1;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
  }

  .ab-mobile-nav a{
    display:block;
    width:100%;
    padding:17px 16px;
    border-radius:18px;
    text-align:center;
    color:#fff;
    font-size:16px;
    line-height:1.2;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.08);
  }

  .ab-mobile-nav a.active{
    border-color:rgba(255,0,0,.58);
    box-shadow:inset 0 -3px 0 #ff1d1d, 0 0 20px rgba(255,0,0,.18);
  }

  .ab-mobile-close{
    display:flex !important;
    align-items:center;
    justify-content:center;
    align-self:flex-end;
    width:44px;
    height:44px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:34px;
    line-height:1;
    cursor:pointer;
  }
}