/* ============================================================
   Navegación mobile (menú hamburguesa)
   Cargado DESPUÉS de responsive.css para ganar la cascada.
   ============================================================ */

/* Botón hamburguesa y logo mobile ocultos en desktop */
.nav-toggle{ display:none; }
.nav-logo-mobile{ display:none; }

/* --- Escalado fluido del texto del nav en desktop/tablet (menú horizontal) --- */
@media (min-width: 771px){
  nav.header ul li{
    font-size:clamp(9px, 1.1vw, 12px);
    letter-spacing:clamp(1px, 0.25vw, 3px);
  }
  /* El menú fijo (scroll) un poco más contenido */
  nav.scroll_menu.header ul li{
    font-size:clamp(9px, 1vw, 12px);
  }
}

@media (max-width: 770px){

  /* --- Barra superior en mobile --- */
  nav.scroll_menu.header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 16px;
    position:fixed;
  }

  /* Logo visible a la izquierda en la barra */
  nav.scroll_menu.header .nav-logo-mobile{
    display:block;
    flex:0 0 auto;
    margin:0;
  }
  nav.scroll_menu.header .nav-logo-mobile img{
    width:120px;
    height:auto;
    display:block;
  }

  /* Botón hamburguesa a la derecha */
  nav.scroll_menu.header .nav-toggle{
    display:inline-flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:44px;
    height:44px;
    padding:9px;
    border:0;
    background:transparent;
    cursor:pointer;
    flex:0 0 auto;
    margin-left:auto;
    margin-right:0;
    z-index:1001;
  }
  nav.scroll_menu.header .nav-toggle span{
    display:block;
    width:100%;
    height:3px;
    background:#000;
    border-radius:3px;
    transition:transform .25s ease, opacity .25s ease;
  }

  /* Animación a "X" cuando está abierto */
  nav.scroll_menu.header .nav-toggle[aria-expanded="true"] span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
  }
  nav.scroll_menu.header .nav-toggle[aria-expanded="true"] span:nth-child(2){
    opacity:0;
  }
  nav.scroll_menu.header .nav-toggle[aria-expanded="true"] span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
  }

  /* --- Lista de enlaces como panel desplegable --- */
  nav.scroll_menu.header ul{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    width:100%;
    flex-direction:column;
    flex-wrap:nowrap;
    gap:0;
    background:#eff0ea;
    box-shadow:0 8px 16px rgba(0,0,0,.18);
    padding:8px 0;
    margin:0;
    float:none;
    z-index:1000;
  }
  nav.scroll_menu.header ul.is-open{
    display:flex;
  }

  nav.scroll_menu.header ul li{
    width:100%;
    margin:0;
    float:none;
    font-size:14px;
    letter-spacing:1px;
    text-align:center;
    border-bottom:1px solid rgba(0,0,0,.06);
  }
  nav.scroll_menu.header ul li:last-child{
    border-bottom:0;
  }
  nav.scroll_menu.header ul li a{
    display:block;
    padding:14px 16px;
    width:100%;
  }

  /* Ocultar el logo que iba dentro de la lista (ya se muestra en la barra) */
  nav.scroll_menu.header ul li.logo{
    display:none;
  }

  /* Menú fijo al hacer scroll: misma barra */
  nav.scroll_menu.header{
    height:auto;
    padding:8px 16px;
  }
  nav.scroll_menu.header ul{
    width:100%;
    float:none;
  }
  nav.scroll_menu.header ul li{
    float:none;
    margin:0;
  }
  nav.scroll_menu.header .nav-logo-mobile img{
    width:90px;
  }
}

/* ============================================================
   Barra de navegación única y fija (siempre visible)
   El antiguo nav duplicado fue eliminado; .scroll_menu es ahora
   la única barra y permanece fija arriba en todo momento.
   ============================================================ */
nav.scroll_menu.header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1000;
}

/* En desktop/tablet la barra se muestra como bloque (menú horizontal) */
@media (min-width: 771px){
  nav.scroll_menu.header{
    display:block;          /* anula el display:none original */
  }
}

/* Compensar la altura de la barra fija para que no tape el contenido */
#header .main{
  padding-top:100px;
}

/* En mobile la barra es más baja, menos padding de compensación */
@media (max-width: 770px){
  #header .main{
    padding-top:70px;
  }
}