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 {
  background: transparent;
  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 */
}
/* === MOBILE NEW PATTERN (no afecta ≥1280px) === */
@media (max-width: 1279.98px){
  .mobile-drawer{
    position: fixed; inset: 0 0 0 auto; /* anclado derecha */
    width: 100%; max-width: 420px; height: 100vh;
    transform: translateX(100%);
    background: #fff; box-shadow: -20px 0 40px rgba(0,0,0,.15);
    z-index: 1001; display: flex; flex-direction: column;
    transition: transform .28s ease;
    border-top-left-radius: 1.25rem; border-bottom-left-radius: 1.25rem;
  }
  .mobile-drawer.is-open{ transform: translateX(0); }

  .mobile-overlay{
    position: fixed; inset: 0; background: rgba(0,0,0,.45);
    z-index: 1000; opacity: 0; visibility: hidden; transition: opacity .2s ease;
  }
  .mobile-overlay.is-open{ opacity: 1; visibility: visible; }

  .drawer-header{
    position: sticky; top: 0; z-index: 2; background: #fff;
    display:flex; align-items:center; justify-content:space-between;
    padding: .9rem 1rem; border-bottom: 1px solid #e5e7eb;
  }
  .drawer-title{ display:flex; gap:.75rem; align-items:center; }
  .drawer-title img{ height: 34px; }

  .drawer-close{
    display:inline-flex; align-items:center; justify-content:center;
    width: 44px; height: 44px; border-radius: 9999px; border: 0;
    background: var(--color-primary); color: #fff; font-size: 1.25rem;
  }

  .drawer-body{ overflow: auto; -webkit-overflow-scrolling: touch; padding: .25rem 0 1rem; }

  /* Acordeón */
  .acc-item{ border-bottom: 1px solid #eef0f2; }
  .acc-btn{
    width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
    gap:.75rem; padding: 1rem 1.25rem; font-family: 'Lato', sans-serif; font-weight: 800;
    text-transform: uppercase; letter-spacing: .02em; color: var(--color-primary);
    background: transparent; border: 0; cursor: pointer;
  }
  .acc-btn .chev{ transition: transform .2s ease; font-size: 1.1rem; }
  .acc-btn[aria-expanded="true"] .chev{ transform: rotate(90deg); }

  .acc-panel{ max-height: 0; overflow: hidden; transition: max-height .25s ease; background:#fff; }
  .acc-panel.open{ max-height: 600px; } /* suficiente para el contenido típico */

  .acc-links{ padding: .25rem 0 .75rem 1.25rem; }
  .acc-links li a{
    display:block; padding:.6rem .75rem; border-radius:.5rem;
    color: var(--color-primary); font-weight: 500; transition: background .2s,color .2s;
  }
  .acc-links li a:hover{ background: rgba(0,0,0,.04); color:#022b40; }

  /* Cabeceras coloreadas - bordes laterales */
  .acc-panel.border-naranja{ border-left: 4px solid var(--color-naranja-tools); }
  .acc-panel.border-verde  { border-left: 4px solid var(--color-verde-cife); }
  .acc-panel.border-azul   { border-left: 4px solid var(--color-azul-agente360); }
  .acc-panel.border-rosa   { border-left: 4px solid var(--color-rosa-talentia); }
  .acc-panel.border-gris   { border-left: 4px solid var(--color-gris-neock); }

  /* Link suelto (sin submenú) */
  .drawer-link{
    display:flex; align-items:center; justify-content:space-between;
    padding: 1rem 1.25rem; text-transform: uppercase; font-weight: 800;
    color: var(--color-primary);
  }

  /* CTA fija al pie */
  .drawer-footer{
    position: sticky; bottom: 0; background: #fff; border-top:1px solid #e5e7eb;
    padding: .85rem 1rem;
  }
  .drawer-cta{
    display:block; width:100%; text-align:center; border-radius: 9999px;
    padding: .7rem 1rem; font-weight: 700; color:#fff; background: var(--color-primary);
  }

  /* Preferencia de usuarios sin animaciones */
  @media (prefers-reduced-motion: reduce){
    .mobile-drawer{ transition: none; }
    .mobile-overlay{ transition: none; }
    .acc-panel{ transition: none; }
    .acc-btn .chev{ transition: none; }
  }
}

/* Utilidad para bloquear scroll del body cuando el drawer está abierto */
.body-no-scroll{ overflow: hidden; touch-action: none; }