.site-header {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  max-width: 100%; /* ✅ ocupa todo el ancho */
  z-index: 1000;
}

.header-container {
  max-width: 100%;
  margin: 0 auto; /* ✅ centra el contenido */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-header nav a {
  color: var(--color-primary); /* azul corporativo */
}

.menu-link {
  position: relative;
  display: inline-block;
  font-weight: 600;
  padding: 0.5rem 1.5rem;
  transition: color 0.3s ease;
  color: inherit;
}

/* Pseudo-elemento que actúa como marco decorativo */
.menu-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/coloresmenu.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* evita interferencia con el hover */
  z-index: -1; /* detrás del texto */
}

/* Al hacer hover, muestra el marco y cambia el color */
.menu-link:hover {
  color: var(--color-azul-neock);
}

.menu-link:hover::before {
  opacity: 1;
}


/* Colores aleatorios por clase */
.menu-link.color-naranja:hover {
  color: var(--color-naranja-tools);
}
.menu-link.color-verde:hover {
  color: var(--color-verde-cife);
}
.menu-link.color-azul:hover {
  color: var(--color-azul-agente360);
}
.menu-link.color-rosa:hover {
  color: var(--color-rosa-talentia);
}

/* 🔹 Botón CTA específico del header */
.site-header .cta-button {
  display: inline-block;
  padding: 0.5rem 1.2rem;
  font-size: 1rem;
  background: var(--color-primary); /* azul corporativo */
  color: white;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.3s ease;
}

.site-header .cta-button:hover {
  background: #022b40; /* tono más oscuro */
}

@media (max-width: 1280px) {
  .site-header {
   transition: all 0.3s ease;
  margin-bottom:0px;
  max-width: 100%;
  margin: 0px auto 0;
}
.header-container {
  max-width: 100%;
  margin: 0 auto; /* ✅ centra el contenido */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
}

.mobile-menu a {
  color: var(--color-primary);
  font-family: 'Lato', sans-serif;
  transition: color 0.3s;
}

.mobile-menu a:hover {
  color: var(--color-secondary);
}

.menu-overlay {
  transition: opacity 0.3s ease;
}
.mobile-menu a {
  font-family: 'Lato', sans-serif;
  letter-spacing: 0.5px;
  transition: background 0.3s;
}

.mobile-menu a:hover {
  background: rgba(255, 255, 255, 0.1);
}

.menu-item {
    transition: background 0.3s, color 0.3s;
  }
  .menu-item:hover {
    background: var(--color-primary);
    color: white;
  }
  .menu-item:hover .arrow {
    color: white;
  }

  .link-hover {
  transition: background 0.3s, color 0.3s;
}

.link-hover:hover {
  background: var(--color-primary);
  color: white;
}

.link-hover:hover span {
  color: white !important;
}
.btn-close-menu {
  background-color: var(--color-primary); /* tu color primario */
}
/* ===== FIX header móvil sticky blanco ===== */
@media (max-width: 1280px) {
  .site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: #fff !important;
    transition: all 0.3s ease;
    margin: 0 auto;
    max-width: 100%;
    z-index: 1000 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    backdrop-filter: none !important;
  }

  /* Evita que algún contenedor interno meta fondos/transparencias */
  
  /* Botón hamburguesa legible sobre blanco */
  .site-header .menu-toggle { color: var(--color-primary) !important; }

  /* Panel móvil y overlay: orden correcto y fondo blanco del panel */
  .site-header .mobile-menu { background: #fff !important; z-index: 1001 !important; }
  .menu-overlay { z-index: 900 !important; }
}

/* Si el tema añade clases en scroll/sticky, mantenlo en blanco igualmente */
.site-header.is-transparent,
.site-header.header--transparent,
.site-header.is-sticky,
.site-header.stuck,
.site-header.scrolled {
  background: #fff !important;
  backdrop-filter: none !important;
}

/* Asegura color de enlaces del nav sobre blanco */
.site-header nav a { color: var(--color-primary) !important; }

/* Evita “recortes” en las esquinas por overflow del header */
.site-header { overflow: visible !important; }

/* (Opcional) desplaza el contenido para que no quede oculto tras el header fijo */
@media (max-width: 1280px) {
  body { scroll-padding-top: 96px; }
}
@media (max-width: 1280px) {
  header.site-header,
  body header.site-header,
  header.site-header.bg-transparent,
  header.site-header.is-transparent,
  header.site-header.header--transparent,
  header.site-header.is-sticky,
  header.site-header.stuck,
  header.site-header.scrolled {
    background: #fff !important;
    background-color: #fff !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    backdrop-filter: none !important;
  }

  /* Asegura orden de capas con el overlay y menú móvil */
  .menu-overlay { z-index: 900 !important; }
  header.site-header { z-index: 1000 !important; }
  header.site-header .mobile-menu {
    background: #fff !important;
    z-index: 1001 !important;
  }

  /* Icono hamburguesa visible sobre blanco */
  header.site-header .menu-toggle { color: var(--color-primary) !important; }

  /* Si algún hijo trae fondo/transparencia, anúlalo */
  header.site-header .header-container { background: transparent !important; }
}

/* Colores del nav sobre blanco */
.site-header nav a { color: var(--color-primary) !important; }

/* Opcional: separa el contenido del header fijo */
@media (max-width: 1280px) {
  body { scroll-padding-top: 96px; }
}
/* --- Hotfix visibilidad móvil --- */
/* Por defecto, todo lo móvil oculto */
#mobile-full,
#mobile-overlay {
  display: none;
}

/* Solo en móvil se habilitan estilos/visibilidad */
@media (max-width: 1279.98px){
  #mobile-overlay {
    display: block;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 1000;
    opacity: 0; visibility: hidden;
    transition: opacity .25s ease;
  }
  #mobile-overlay.open { opacity:1; visibility:visible; }

  #mobile-full {
    display: flex;               /* ⚠️ ahora sí se muestra en móvil */
    position: fixed; inset: 0;   /* pantalla completa */
    width: 100vw; height: 100vh;
    background: #fff; z-index: 1001;
    flex-direction: column;
    opacity: 0; transform: translateY(10px);
    pointer-events: none;
    transition: opacity .28s ease, transform .28s ease;
  }
  #mobile-full.open {
    opacity: 1; transform: translateY(0);
    pointer-events: auto;
  }
}

/* En escritorio, forzar invisibles sí o sí */
@media (min-width: 1280px){
  #mobile-full,
  #mobile-overlay {
    display: none !important;
  }
  /* Si aún tienes el menú móvil antiguo en el DOM, ocúltalo también por si acaso */
  .mobile-menu { display: none !important; }
}