/*
 * ============================================================
 *  vms-header.css — Encabezado VMS Energy
 *  Versión 1.0 · agosto 2026 · primer módulo de vms-core.css
 * ============================================================
 *
 *  Depende de tokens.css v2.0. No define ni un solo color propio:
 *  todo sale de los tokens. Si algo aquí necesita un valor nuevo,
 *  se agrega a tokens.css, no a este archivo.
 *
 *  Reemplaza los bloques de nav repetidos en 89 páginas, donde
 *  `nav ul` tenía 13 definiciones distintas y `.submenu` tenía 14.
 *
 *  Carga: <link rel="stylesheet" href="tokens.css">
 *         <link rel="stylesheet" href="vms-header.css">
 * ============================================================ */

/* ⚠ ESPECIFICIDAD BLINDADA — generado, no editar a mano.
 *
 * Todos los selectores van bajo .site-header porque 70 de las 93 páginas
 * del prototipo traen CSS de navegación inline que usa las MISMAS clases
 * (.submenu, .menu-toggle, .brand) y carga DESPUÉS del núcleo. Sin este
 * scope ese CSS viejo ganaba por orden de documento y el botón de menú
 * móvil nunca aparecía.
 *
 * El scope se retira en F-3, cuando se limpie el CSS inline de las páginas.
 */

.skip-link {
  position:absolute;
  left:-9999px;
  top:0;
  z-index:1000;
  background:var(--concept-primary);
  color:var(--text-invert);
  padding:.7rem 1.1rem;
  border-radius:0 0 var(--radius-sm) 0;
  font-weight:var(--font-weight-bold)
}
.skip-link:focus {
  left:0
}
.site-header {
  position:sticky;
  top:0;
  z-index:900;
  background:var(--bg-page);
  border-bottom:1px solid var(--border-line)
}
.site-header--scrolled {
  box-shadow:var(--shadow-nav)
}
.site-header__inner {
  /* El aire vertical vive en una variable porque el desplegable simple lo
     necesita para caer en la misma linea que el megamenu (ver mas abajo). */
  --header-pad-y:.6rem;
  position:relative;
  max-width:var(--max-width-wide);
  margin-inline:auto;
  padding:var(--header-pad-y) clamp(1rem,3vw,2rem);
  display:flex;
  align-items:center;
  gap:clamp(1rem,2.5vw,2.2rem)
}
.site-header .brand {
  flex:none;
  display:flex;
  align-items:center
}
.site-header .brand img {
  display:block;
  height:42px;
  width:auto
}
/* position:static explicito. El CSS inline de 70 paginas trae
   `nav{position:relative}`, y como yo no declaraba position aqui, esa
   regla se filtraba y convertia a .site-nav en el marco de posicionamiento
   del megamenu — por eso el panel no abarcaba el contenedor.
   El blindaje por especificidad solo protege lo que se declara. */
.site-header .site-nav {
  position:static;
  flex:1
}
.site-header .site-nav__list {
  /* `position` se declara aqui por la misma razon que en .site-nav: las hojas
     heredadas traen `nav ul{position:absolute;top:60px}` para su menu movil
     antiguo. Al no declararlo, esa regla sacaba la lista del flujo, .site-nav
     se quedaba en 1 px de alto y —con `overflow-y:auto`— recortaba el menu
     entero: en telefono el boton abria y no aparecia nada. */
  position:static;
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:clamp(.4rem,1.4vw,1.35rem)
}
.site-header .nav-item {
  position:relative
}
.site-header .nav-item>a {
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.55rem .3rem;
  color:var(--text-primary);
  text-decoration:none;
  font-family:var(--font-body);
  font-weight:var(--font-weight-medium);
  font-size:var(--fs-sm);
  white-space:nowrap;
  /* Borde explicito en los cuatro lados: los scripts de las paginas
     siguen anadiendo la clase .is-active a estos enlaces, y el CSS
     inline la decora con borde y radio. El estado activo de este
     sistema es aria-current, no .is-active. Se retira en F-3. */
  border:0 solid transparent;
  border-bottom-width:2px;
  border-radius:0;
  transition:color var(--transition-base),border-color var(--transition-base)
}
.site-header .nav-item>a:hover {
  color:var(--concept-primary)
}
.site-header .nav-item:has(.submenu)>a::after {
  content:"";
  width:.42em;
  height:.42em;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-.12em);
  opacity:.55;
  transition:transform var(--transition-base)
}
.site-header .nav-item:hover:has(.submenu)>a::after,
.site-header .nav-item:focus-within:has(.submenu)>a::after {
  transform:rotate(225deg) translateY(-.22em)
}
.site-header .nav-item>a[aria-current="page"],
.site-header .submenu__list a[aria-current="page"] {
  color:var(--concept-primary);
  font-weight:var(--font-weight-bold)
}
.site-header .nav-item>a[aria-current="page"] {
  border-bottom-color:var(--concept-primary)
}
.site-header .submenu {
  /* `display` se declara AQUI a proposito.
     Las hojas heredadas traen `.submenu{display:none}` y lo abren con
     `.nav-item--has-submenu:hover .submenu{display:block}` — una clase que
     este encabezado no usa. Resultado: la regla que oculta si aplicaba y la
     que muestra no, asi que Proyectos, VMShop y Nosotros nunca se desplegaban.
     Los tres megamenus se salvaban de casualidad porque `.submenu--mega`
     declara `display:grid` mas abajo.
     Es la misma leccion de siempre: blindar por especificidad solo protege
     las propiedades que uno declara. Aqui faltaba declarar `display`. */
  display:block;
  position:absolute;
  /* El megamenu cuelga de .site-header__inner (su item es position:static) y
     por eso queda a ras del borde inferior del encabezado. El desplegable
     simple cuelga de su propio .nav-item, que es mas bajo, y caia 10 px por
     encima de esa linea: los paneles no arrancaban a la misma altura.
     Se compensa con el mismo aire vertical del encabezado, tomado de la
     variable, para que no puedan desalinearse otra vez. */
  top:calc(100% + var(--header-pad-y));
  left:0;
  min-width:15rem;
  background:var(--bg-page);
  border:1px solid var(--border-line);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-nav);
  padding:1rem 1.15rem;
  opacity:0;
  visibility:hidden;
  transform:translateY(-.35rem);
  transition:opacity var(--transition-base),transform var(--transition-base),visibility var(--transition-base)
}
.site-header .nav-item:hover>.submenu,
.site-header .nav-item:focus-within>.submenu,
.site-header .nav-item>a[aria-expanded="true"]+.submenu {
  opacity:1;
  visibility:visible;
  transform:translateY(0)
}
/* MEGAMENU anclado al contenedor, no al item.
   Antes se posicionaba respecto a .nav-item: con 4 columnas arrancando
   en la x de 'Servicios' se salia de la pantalla y envolvia a una segunda
   fila, dejando ver la pagina por debajo. Al poner el item en
   position:static, el marco de referencia pasa a ser .site-header__inner
   y el panel abarca el ancho del contenedor. Asi no puede desbordar. */
.site-header .nav-item--mega {
  position:static
}
.site-header .submenu--mega {
  display:grid;
  top:100%;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:.4rem 2rem;
  left:0;
  right:0;
  width:auto;
  max-width:none;
  background:var(--bg-page)
}
.site-header .site-nav__list>.nav-item:not(.nav-item--mega):nth-last-child(-n+2)>.submenu {
  left:auto;
  right:0
}
.site-header .submenu__title {
  margin:0 0 .45rem;
  font-family:var(--font-body);
  font-size:var(--fs-xs);
  font-weight:var(--font-weight-bold);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--text-hint)
}
/* Declaracion defensiva. El CSS inline de la pagina trae
   `nav ul{display:flex;gap:18px;flex-wrap:wrap;align-items:center}` y esta
   lista es un <ul> dentro de <nav>. Todo lo que yo no declare, se filtra:
   sin align-items explicito los <li> se encogian y quedaban centrados. */
.site-header .submenu__list {
  /* Tercera vez que hace falta declarar `position` de forma explicita: las
     hojas heredadas traen `nav ul{position:absolute}` y eso alcanza a TODAS
     las listas del encabezado, tambien a las de dentro de un submenu. En
     movil eso dejaba el panel de Nosotros en 24 px de alto con sus cinco
     enlaces flotando fuera de la caja. */
  position:static;
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  flex-wrap:nowrap;
  gap:0;
  text-align:left
}
.site-header .submenu__list a {
  display:block;
  border-radius:0;
  padding:.38rem 0;
  color:var(--text-muted);
  text-decoration:none;
  font-size:var(--fs-sm);
  line-height:1.35;
  transition:color var(--transition-base)
}
.site-header .submenu__list a:hover {
  color:var(--concept-primary)
}
.site-header--minimal .site-nav,
.site-header--minimal .menu-toggle {
  display:none
}
.site-header--minimal .site-header__actions {
  margin-left:auto
}
.site-header__actions {
  flex:none;
  display:flex;
  align-items:center;
  gap:.7rem
}
.site-header .lang-switch {
  font-family:var(--font-body);
  font-size:var(--fs-xs);
  font-weight:var(--font-weight-bold);
  letter-spacing:.06em;
  color:var(--text-muted);
  text-decoration:none;
  padding:.35rem .55rem;
  border:1px solid var(--border-line);
  border-radius:var(--radius-sm);
  transition:border-color var(--transition-base),color var(--transition-base)
}
.site-header .lang-switch:hover {
  color:var(--concept-primary);
  border-color:var(--border-hover)
}
.site-header__cta {
  padding:.5rem 1.15rem;
  font-size:var(--fs-sm);
  font-weight:var(--font-weight-bold);
  text-decoration:none;
  white-space:nowrap
}
.site-header .menu-toggle {
  display:none;
  align-items:center;
  gap:.5rem;
  margin-left:auto;
  background:transparent;
  border:1px solid var(--border-line);
  border-radius:var(--radius-sm);
  padding:.45rem .7rem;
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:var(--fs-sm);
  font-weight:var(--font-weight-medium);
  cursor:pointer
}
.site-header .menu-toggle__bars,
.site-header .menu-toggle__bars::before,
.site-header .menu-toggle__bars::after {
  display:block;
  width:18px;
  height:2px;
  background:currentColor;
  transition:transform var(--transition-base),opacity var(--transition-base)
}
.site-header .menu-toggle__bars {
  position:relative
}
.site-header .menu-toggle__bars::before,
.site-header .menu-toggle__bars::after {
  content:"";
  position:absolute;
  left:0
}
.site-header .menu-toggle__bars::before {
  top:-6px
}
.site-header .menu-toggle__bars::after {
  top:6px
}
.site-header .menu-toggle[aria-expanded="true"] .menu-toggle__bars {
  background:transparent
}
.site-header .menu-toggle[aria-expanded="true"] .menu-toggle__bars::before {
  top:0;
  transform:rotate(45deg)
}
.site-header .menu-toggle[aria-expanded="true"] .menu-toggle__bars::after {
  top:0;
  transform:rotate(-45deg)
}
@media (max-width:1080px) {
  .site-header .menu-toggle {
    display:inline-flex
  }
  .site-header .site-nav {
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--bg-page);
    border-bottom:1px solid var(--border-line);
    box-shadow:var(--shadow-nav);
    max-height:calc(100dvh - 100%);
    overflow-y:auto;
    display:none
  }
  .site-header--open .site-nav {
    display:block
  }
  .site-header .site-nav__list {
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:.5rem 0
  }
  /* NEUTRALIZA EL MENU MOVIL HEREDADO.
     Las paginas traen un script propio que, ademas del boton, pone
     `aria-expanded` en la LISTA, y una regla

         #menuList[aria-expanded="true"]{display:flex!important;
             position:absolute;top:60px;right:20px}

     que la posiciona como el menu movil antiguo. Con un selector de ID y
     `!important` no hay especificidad de clases que le gane: la lista salia
     del flujo, `.site-nav` se quedaba en 1 px de alto y, con `overflow-y:auto`,
     recortaba el menu entero. En telefono el boton abria y no aparecia nada.

     Es el unico sitio del nucleo donde se usa `!important`, y se usa porque
     la regla heredada lo usa primero. Lo correcto a plazo es que las paginas
     dejen de traer ese script —hace lo mismo que vms-header.js— pero eso es
     cirugia en ~70 archivos; esto deja el menu funcionando hoy. */
  .site-header #menuList,
  .site-header #menuList[aria-expanded="true"],
  .site-header #menuList.nav-force-open {
    display:flex !important;
    position:static;
    inset:auto;
    width:auto;
    background:transparent;
    border:0;
    box-shadow:none;
    padding:.5rem 0;
    gap:0
  }
  .site-header .nav-item {
    border-bottom:1px solid var(--border-line)
  }
  .site-header .nav-item:last-child {
    border-bottom:0
  }
  .site-header .nav-item>a {
    padding:.85rem clamp(1rem,4vw,2rem);
    font-size:var(--fs-base);
    border-bottom:0
  }
  .site-header .nav-item>a[aria-current="page"] {
    border-bottom:0
  }
  .site-header .nav-item:has(.submenu)>a {
    justify-content:space-between
  }
  .site-header .submenu {
    position:static;
    opacity:1;
    visibility:visible;
    transform:none;
    border:0;
    box-shadow:none;
    border-radius:0;
    background:var(--bg-soft);
    padding:.6rem clamp(1rem,4vw,2rem) .9rem;
    width:auto;
    max-width:none;
    display:none
  }
  .site-header .submenu--mega {
    grid-template-columns:1fr;
    gap:.5rem
  }
  .site-header .nav-item>a[aria-expanded="true"]+.submenu {
    display:grid
  }
  .site-header .nav-item:hover>.submenu,.site-header .nav-item:focus-within>.submenu {
    display:none
  }
  .site-header .nav-item>a[aria-expanded="true"]+.submenu {
    display:grid
  }
  .site-header .submenu__title {
    margin-top:.5rem
  }
  .site-header .submenu__list a {
    padding:.5rem 0;
    font-size:var(--fs-base)
  }
  .site-header__actions {
    margin-left:auto
  }
  .site-header__cta {
    display:none
  }
  .site-header--open .site-nav .site-header__cta {
    display:inline-flex
  }
}
@media (max-width:480px) {
  .site-header .brand img {
    height:34px
  }
  .site-header .menu-toggle__label {
    display:none
  }
}

/* ==== encabezado en pantallas estrechas ==== */
/* Medido a 320 px: logotipo (103) + boton de menu (42) + bloque de acciones
   (160) mas los dos huecos de 16 suman 337 en una caja de 288. Desbordaba 33 px
   en iPhone SE y en cualquier Android de 320-344. A 360 px seguia desbordando 8
   px en las paginas cuyo boton de contacto lleva etiqueta larga: por eso son dos
   escalones y no uno. Ni el conmutador de idioma ni el boton de contacto se
   ocultan; solo se aprieta el aire, y el logotipo baja de talla unicamente en el
   escalon mas estrecho. */
@media (max-width:400px) {
  .site-header .site-header__inner {
    gap:.5rem
  }
  .site-header .site-header__actions {
    gap:.45rem
  }
  .site-header .site-header__actions .btn {
    padding:.55rem .8rem;
    font-size:.82rem
  }
  .site-header .menu-toggle {
    padding:.42rem .6rem
  }
}

@media (max-width:359px) {
  .site-header .site-header__inner {
    padding-inline:10px;
    gap:.4rem
  }
  .site-header .brand img {
    height:28px
  }
  .site-header .site-header__actions {
    gap:.35rem
  }
  .site-header .site-header__actions .btn {
    padding:.5rem .68rem;
    font-size:.78rem
  }
}