/* Selección de botones comunes de WordPress (Gutenberg, Elementor y genéricos) */
.wp-block-button__link,
.elementor-button,
.btn,
button,
input[type="submit"] {
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

/* Efecto al pasar el cursor (Hover) */
.wp-block-button__link:hover,
.elementor-button:hover,
.btn:hover,
button:hover,
input[type="submit"]:hover {
    transform: translateY(-4px); /* Se desplaza 4px hacia arriba */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15); /* Sombra para dar profundidad */
}
/* Cambiar el color del botón al pasar el mouse */
.wp-block-button__link:hover,
.elementor-button:hover,
.btn:hover,
button:hover,
input[type="submit"]:hover {
    background-color: #FFAE1C !important; /* Cambia este código por el color de tu marca */
    color: #FFFFFF !important;            /* Cambia el color del texto (opcional) */
}
@media (max-width: 781px) {
  /* 1. Convierte el desplegable en una tarjeta centrada en pantalla */
  .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    top: 70px !important;            /* Distancia desde arriba (ajusta según el alto de tu cabecera) */
    left: 50% !important;            /* Se posiciona al centro horizontal */
    transform: translateX(-50%) !important; /* Corrección para centrado exacto */
    
    width: 90% !important;           /* Ocupa el 90% del ancho del teléfono */
    max-width: 380px !important;     /* Evita que sea excesivamente ancho */
    height: auto !important;         /* Solo ocupa el alto necesario para las letras */
    min-height: 0 !important;
    bottom: auto !important;
    
    padding: 20px 15px !important;   /* Espaciado interno alrededor del texto */
    border-radius: 12px !important;  /* Esquinas redondeadas */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important; /* Sombra flotante */
    z-index: 99999 !important;
  }

  /* 2. Alinea los enlaces al centro dentro de la tarjeta */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    height: auto !important;
    padding: 0 !important;
    align-items: center !important;  /* Cambia a flex-start si prefieres alinear a la izquierda */
    text-align: center !important;
  }

  /* 3. Posiciona la "X" de cerrar en la esquina superior derecha del desplegable */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    position: absolute !important;
    top: 8px !important;
    right: 12px !important;
  }
}