/* ============================================================================
   BARRA SUPERIOR FIJA — beenergetic.es
   Este archivo lo comparten TODAS las páginas. Si cambias algo aquí,
   cambia en todo el sitio de golpe. No hace falta tocar los .html.
   ============================================================================ */

html{scroll-padding-top:84px;}
body{padding-top:64px;}

.bn-barra{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:#FFFFFF;border-bottom:1px solid #DFE7EC;
  font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
}
.bn-barra *{box-sizing:border-box;}
.bn-barra .marco-barra{
  max-width:1060px;margin:0 auto;padding:0 24px;height:64px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}

/* ---------- Logo ---------- */
.bn-barra .logo{display:flex;align-items:center;flex:none;}
.bn-barra .logo img{height:38px;width:auto;display:block;}
.bn-barra .logo .marca-min{display:none;}

/* ---------- Enlaces ---------- */
.bn-barra nav{display:flex;align-items:center;gap:2px;}
.bn-barra nav a{
  display:block;padding:8px 13px;border-radius:100px;
  font-size:.92rem;font-weight:600;line-height:1.2;
  color:#5A6874;text-decoration:none;white-space:nowrap;
  transition:background .15s ease,color .15s ease;
}
.bn-barra nav a:hover{background:#F3F7F9;color:#0B1420;}
.bn-barra nav a.activo{color:#0B1420;background:#F3F7F9;}
/* "Contacto" destaca como llamada a la acción */
.bn-barra nav a.destacar{
  background:#0B1420;color:#FFFFFF;margin-left:6px;
}
.bn-barra nav a.destacar:hover{background:#22303F;color:#FFFFFF;}
.bn-barra nav a.destacar.activo{background:#0B1420;color:#FFFFFF;}

/* ---------- Botón de menú (solo en pantallas estrechas) ---------- */
.bn-barra .menu-btn{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;padding:0 9px;flex:none;
  background:transparent;border:1.5px solid #DFE7EC;border-radius:12px;
  cursor:pointer;transition:border-color .15s ease;
}
.bn-barra .menu-btn:hover{border-color:#0B1420;}
.bn-barra .menu-btn span{
  display:block;height:2px;width:100%;background:#0B1420;border-radius:2px;
  transition:transform .18s ease,opacity .18s ease;
}
.bn-barra .menu-btn:focus-visible{outline:2px solid #1272A8;outline-offset:2px;}

/* ============================================================================
   PANTALLAS ESTRECHAS
   Sin JavaScript los enlaces se ven igual, apilados: nunca queda
   un menú inaccesible. La clase "js" la añade el propio script.
   ============================================================================ */
@media (max-width:900px){
  .bn-barra .logo .marca{display:none;}
  .bn-barra .logo .marca-min{display:block;height:34px;}
  .bn-barra .menu-btn{display:flex;}

  .bn-barra nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;
    background:#FFFFFF;border-bottom:1px solid #DFE7EC;
    padding:10px 16px 16px;
    box-shadow:0 14px 28px rgba(11,20,32,.10);
  }
  .bn-barra nav a{padding:12px 14px;font-size:1rem;border-radius:12px;}
  .bn-barra nav a.destacar{margin-left:0;margin-top:6px;text-align:center;}

  /* Con JS: cerrado por defecto, se abre con el botón */
  .bn-barra.js nav{display:none;}
  .bn-barra.js.abierto nav{display:flex;}
  .bn-barra.js.abierto .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .bn-barra.js.abierto .menu-btn span:nth-child(2){opacity:0;}
  .bn-barra.js.abierto .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}

@media (max-width:620px){
  body{padding-top:56px;}
  html{scroll-padding-top:74px;}
  .bn-barra .marco-barra{height:56px;padding:0 16px;}
  .bn-barra .logo .marca-min{height:30px;}
  .bn-barra .menu-btn{width:38px;height:38px;}
}

@media (prefers-reduced-motion:reduce){
  .bn-barra *{transition:none!important;}
}