/*
Theme Name: Divi Child
Theme URI: http://www.elegantthemes.com/gallery/divi/
Template: Divi
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
Version: 4.22.1.1749575638
Updated: 2025-06-10 17:13:58

*/
/*
 * Estilos Personalizados para el Tamaño de Fuente de los Submenús de Divi
/*
 * Estilos Personalizados para el Tamaño de Fuente, Tipografía y Fondo en Hover de los Submenús de Divi
 */
#top-menu li .sub-menu li a {
    font-family: "Montserrat", sans-serif !important;
    font-size: 14px !important;
    color: #333 !important; /* Color del texto en estado normal, ajusta si es necesario */
    background-color: transparent !important; /* Fondo transparente por defecto */

    /* Transición suave para múltiples propiedades: fondo y border-radius */
    transition: background-color 0.5s ease-in-out, border-radius 0.5s ease-in-out; 
    
    padding: 10px 20px !important; /* Ajusta el padding para que el fondo se vea bien */
    display: block !important; /* Asegura que el enlace ocupe todo el ancho disponible */
    border-radius: 0 !important; /* Asegura que no haya redondeado en estado normal si no lo quieres */
}

/* Estilo al pasar el cursor (hover) */
#top-menu li .sub-menu li a:hover {
    background-color: rgba(210, 207, 111, 0.4) !important; /* Color de fondo con transparencia */
    color: #000000 !important; /* Color del texto al hacer hover */
    border-radius: 5px !important; /* Redondeado de las esquinas al pasar el cursor. Ajusta el valor. */
}
/* === CONTROL DE VELOCIDAD PARA EL GIRO COMPLETO DEL MÓDULO DIVI === */
/* COLOCAR ESTE CÓDIGO EN: Divi > Opciones del Tema > CSS Personalizado */

.modulo-giro-completo { /* <-- ¡IMPORTANTE! Asegúrate de que esta sea la clase CSS que has asignado a tu MÓDULO COMPLETO */
    /* Define la duración de la transición para cualquier transformación (incluido tu giro de 360 grados) */
    /* Ajusta '1s' para la duración deseada (ej., 0.5s para más rápido, 2s para más lento) */
    transition: transform 2s ease-in-out; 

    /* Opcional: Si notas algún salto inicial o comportamiento extraño con otras animaciones de Divi,
       podrías añadir las siguientes líneas. Pruébalo primero sin ellas. */
    /* animation: none !important; */
    /* transform: none !important; */
}
/* === Capa de Superposición Transparente para Sección Hero === */
/* COLOCAR ESTE CÓDIGO EN: Divi > Opciones del Tema > CSS Personalizado */

.hero-con-transparencia {
    position: relative; /* Esencial para que el pseudo-elemento se posicione correctamente */
    overflow: hidden; /* Ayuda a asegurar que la capa no se salga de los límites de la sección */
}

.hero-con-transparencia::before {
    content: ""; /* Obligatorio para que el pseudo-elemento exista */
    position: absolute; /* Posicionamiento absoluto para cubrir toda la sección */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Color de superposición: Negro con 50% de opacidad */
    z-index: 1; /* Coloca esta capa por encima del vídeo de fondo */
}

/* Asegúrate de que el contenido del texto esté por encima de la capa transparente */
.hero-con-transparencia .et_pb_row { /* Apunta a las filas dentro de esta sección */
    position: relative; /* Asegura que la fila tenga un contexto de apilamiento */
    z-index: 2; /* Coloca el contenido de la fila por encima de la capa transparente */
}

/* Asegura que los módulos de texto también estén por encima */
.hero-con-transparencia .et_pb_module { /* Apunta a todos los módulos dentro de esta sección */
    position: relative;
    z-index: 2;
}