/* Nuevo CSS para menú de navegación (style3.css) */
/* Colores coherentes con el diseño existente */
:root{
  --brand:#775DA7;
  --brand-dark:#6D5EA4;
  --muted:#9e9e9e;
  --menu-bg: #ffffff;
}

/* Botón hamburguesa */
.nav-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  background:transparent;
  border:none;
  cursor:pointer;
  margin-left:16px;
}

.hamburger,
.hamburger::before,
.hamburger::after{
  display:block;
  width:24px;
  height:2px;
  background:var(--brand-dark);
  border-radius:2px;
  transition: transform .25s ease, opacity .25s ease;
  position:relative;
}
.hamburger{ position:relative; }
.hamburger::before{ content:""; position:absolute; left:0; top:-7px; }
.hamburger::after{ content:""; position:absolute; left:0; top:7px; }

/* Estado abierto - transformar a 'X' */
.nav-toggle.open .hamburger{
  background:transparent;
}
.nav-toggle.open .hamburger::before{
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.open .hamburger::after{
  transform: translateY(-7px) rotate(-45deg);
}

/* Contenedor del menú */
.site-menu{
  z-index:999;
}
.site-menu ul{ list-style:none; margin:0; padding:0; display:flex; gap:28px; align-items:center; }
.site-menu a{ text-decoration:none; color:var(--brand); font-weight:600; }

/* Desktop: mostrar en línea */
@media (min-width: 992px){
  .nav-toggle{ display:none; }
  .site-menu{ display:flex; margin-left:auto; align-items:center; }
  .site-menu a{ padding:8px 6px; }
}

/* Mobile: menú off-canvas derecho */
@media (max-width: 991px){
  .site-menu{
    position:fixed;
    top:0;
    right:-320px;
    width:300px;
    height:100%;
    background:var(--menu-bg);
    box-shadow: -6px 0 18px rgba(0,0,0,0.12);
    transition:right .35s cubic-bezier(.2,.8,.2,1);
    padding-top:90px;
    display:block;
  }
  .site-menu.open{ right:0; }
  .site-menu ul{ flex-direction:column; padding-left:24px; gap:20px; }
  .site-menu a{ color:var(--brand-dark); font-size:18px; }
  /* Fondo semitransparente cuando el menú está abierto */
  .site-menu-backdrop{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.35);
    z-index:998;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease;
  }
  .site-menu-backdrop.visible{ opacity:1; pointer-events:auto; }
}

/* Pequeños ajustes para que el logo no se solape */
.navbar .navbar-brand{ display:flex; align-items:center; }

/* Ajustes de accesibilidad: foco en links */
.site-menu a:focus{ outline:2px solid rgba(117,93,167,0.25); outline-offset:3px; }