@charset "UTF-8";
    /* Contenedor principal: equidistancia en lados */
    .menu-header {
      width: 100%;
      position: sticky;
      top: 0;
      background: var(--blanco);
      border-bottom: 1px solid var(--platino);
      z-index: 9999;
      box-shadow: 0px 12px 12px rgba(106, 122, 140, 0.2);
      margin-bottom: 0 ;
      padding: 1.5rem;
 }

 /* Contenedor adaptable */
.menu-container {
  display: flex;
  justify-content: space-between;
  align-items: center; /* ✅ centra verticalmente el logo y el menú */
  max-width: var(--container-max-width-max);
  width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--padding-global) 2rem; /* ✅ usa padding igual arriba y abajo */
  box-sizing: border-box;
  height: auto;
  min-height: 80px; /* ⬆️ ligeramente mayor, más aire */
  position: relative;
}
/* ========================
       LOGO
    =========================== */
/* Imagen del logo controlable */
.logo {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.logo img {
  height: auto; /* ✅ se ajusta al contenedor */
  max-height: 100px; /* 🔧 controla la proporción general */
  object-fit: contain;
  display: block;
  margin: auto 0; /* asegura centrado vertical */
  padding: 0; /*  elimina el padding que causaba el desbalance */
  position: relative;
  z-index: 1000;
  filter: drop-shadow(0px 2px 1px rgba(27, 52, 81, 0.4));

}
.logo a {
  display: flex;
  align-items: center;
}

@media (min-width: 500px) {
  .logo {
    max-width: 450px;
  }
}
/*

    /* Ocultar checkbox */
    #menu-toggle {
      display: none;
    }

    /* Botón hamburguesa */
    .menu-toggle {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      width: 30px;
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 0;
      position: relative;
      margin-left: auto;
      z-index: 1100;
    }

    .menu-toggle span,
    .menu-toggle span::before,
    .menu-toggle span::after {
      position: absolute;
      width: 100%;
      height: 3px;
      background-color: var(--azul-prussia);
      border-radius: 2px;
      content: "";
      transition: all 0.3s cubic-bezier(0.77, 0.2, 0.05, 1);
    }

    .menu-toggle span {
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      position: relative;
    }

    .menu-toggle span::before {
      top: -8px;
      left: 0;
    }

    .menu-toggle span::after {
      top: 8px;
      left: 0;
    }

    /* Animación a X */
    #menu-toggle:checked + .menu-toggle span {
      background: transparent;
    }

    #menu-toggle:checked + .menu-toggle span::before {
      transform: rotate(45deg);
      top: 0;
    }

    #menu-toggle:checked + .menu-toggle span::after {
      transform: rotate(-45deg);
      top: 0;
    }

    /* Menú móvil */
    .main-nav {
      position: fixed;
      top: 0;
      right: -100vw;
      width: 70vw;
      max-width: 280px;
      height: 100vh;
      background: rgba(249, 246, 244, 0.85);
      padding: 5rem 1.2rem 2rem;
      box-shadow: -4px 0 15px rgba(0, 0, 0, 0.08);
      overflow-y: auto;
      transition: right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: right;
      z-index: 1050;
    }

    /* Mostrar menú abierto */
    #menu-toggle:checked ~ .main-nav {
      right: 0;
    }

    /* Lista menú */
    .nav-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
    }

    .nav-list li {
      border-bottom: 1px solid var(--rosa-melocoton);
      margin: 0;
    }

    /* Enlaces menú con padding reducido para evitar overflow */
    .nav-list a {
      display: block;
      font-size: 0.9rem;
      font-weight: 400;
     color: var(--azul-logo);
      text-decoration: none;
      padding: 1.3rem 1rem; /* padding horizontal reducido */
      transition: background-color 0.3s ease, color 0.3s ease;
      width: 100%;
      box-sizing: border-box;
    }
    .nav-list a:hover {
      color: var(--rojo-oscuro);
    
    }

    /* Fondo gris claro al hacer hover o foco */
    .nav-list li:hover,
    .nav-list li:focus-within,
    .nav-list li:active {
      background-color: rgba(0, 0, 0, 0.04);
 }
@media (min-width: 1280px) {
  .menu-toggle {
    display: none !important;
  }
  .main-nav {
    position: static !important;
    display: flex !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    right: auto !important;
    transition: none !important;
    z-index: auto !important;
  }
  .nav-list {
    flex-direction: row !important;
    align-items: center;
    gap: 0.0;/*distancia entre bloques de menu*/
  }
  .nav-list li {
    border-bottom: none;
    padding: 0.9rem 0.4rem;
  }
  .nav-list a {
    padding: 0.5rem 0.4rem;
    white-space: nowrap;
  }
  .menu-overlay {
    display: none !important;
  }
}
/* ========================
   MENU VISUALLY HIDDEN
=========================== */
.visually-hidden {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

/* Estilo para el enlace activo */

.nav-list a.active:not(.lang-link) {
 color: var(--rosa-brillante);
  border-bottom: 2px solid var(--rosa-brillante);
  font-weight: 400;
}