.btn-menu{
position:absolute;
left:20px;
top:50%;
transform:translateY(-50%);
}

.btn-menu label{
color:white;
font-size:25px;
cursor:pointer;
}


/* CONTENEDOR DEL MENU */

.directorio-menu{
position:fixed;
width:100%;
height:100vh;
top:0;
left:0;
transition:all 500ms ease;
opacity:0;
visibility:hidden;
z-index:9999;
}

#btn-menu:checked ~ .directorio-menu{
opacity:1;
visibility:visible;
}

#btn-menu{
display:none;
}


/* PANEL DEL MENU */

#menuPanel{

position:fixed;
top:80px;

/* MENU MAS GRANDE */

width:280px;
min-height:300px;

/* EMPIEZA FUERA DE LA PANTALLA */

left:-300px;

/* ESTILO */

background:#080808;
border:1px solid #d4af37;
box-shadow:0 0 12px rgba(212,175,55,0.4);
border-radius:0 12px 12px 0;

padding:12px 10px;

/* ANIMACION */

transition:left 0.45s ease;

}


/* CUANDO SE ABRE */

#btn-menu:checked ~ .directorio-menu #menuPanel{
left:0;
}


/* LINKS */

#menuPanel nav{
display:flex;
flex-direction:column;
gap:4px;
}

#menuPanel a{

display:block;
text-decoration:none;

padding:10px 12px;

color:#d1d5db;
font-size:14px;

border-left:4px solid transparent;

transition:all 0.3s ease;

border-radius:6px;

}

#menuPanel a:hover{

background:#111;
color:#ff7a00;
border-left:4px solid #ff7a00;

}


/* LINEA DECORATIVA */

#lineaAnimada{

position:absolute;
width:120%;
height:2px;

background:linear-gradient(
90deg,
transparent,
#ffd700,
#ffcc00,
#ffd700,
transparent
);

top:0;
left:-120%;
opacity:0.9;

}
@keyframes whatsappPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(41, 167, 26, 0.7);
  }

  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 12px rgba(41, 167, 26, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(41, 167, 26, 0);
  }
}

.animate-whatsapp-pulse {
  animation: whatsappPulse 2s infinite;
}

#chatbot-btn {
  backdrop-filter: blur(10px);
}
@media (max-width: 768px){

header .max-w-7xl{
min-height: 70px;
display: flex;
align-items: center;
}

.btn-menu{
top: 50%;
transform: translateY(-50%);
}

}