/* 
   Mobile and Responsive Layout Optimizations for Microarea 
   Ensures seamless visibility on all mobile screens and tablets
*/

/* 1. Prevent global horizontal scrolling overflow */
html, body {
    max-width: 100% !important;
    /* overflow-x: hidden !important; */
    /* position: relative !important; */
}

/* 2. Responsive videos, iframes and embeds */
embed, iframe, object, video {
    max-width: 100% !important;
}

.et_pb_video_box iframe {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9 !important;
}

/* 3. Word wrapping to prevent long titles from breaking viewport */
h1, h2, h3, h4, h5, h6, p, a, span, li, td, th {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* 4. Font size scaling for smaller screens (Mobile & Tablet) */
@media (max-width: 767px) {
    h1, h1 *, .et_pb_text h1, .et_pb_text_0 h1, .et_pb_text_1 h1 {
        font-size: 26px !important;
        line-height: 1.25 !important;
    }
    h2, h2 *, .et_pb_text h2 {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }
    h3, h3 *, .et_pb_text h3 {
        font-size: 18px !important;
        line-height: 1.35 !important;
    }
    p, span, li, a {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    
    /* Spacing adjustments */
    .et_pb_section {
        padding: 20px 0 !important;
    }
    .et_pb_row {
        padding: 10px 0 !important;
        width: 90% !important;
    }
}

/* 5. Logo Grid Responsive Structure (2-Column Grid instead of 1 long list of 6) */
@media (max-width: 767px) {
    .et_pb_row_1, .et_pb_row_3 {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 5px 0 !important;
    }
    .et_pb_row_1 .et_pb_column, .et_pb_row_3 .et_pb_column {
        width: calc(50% - 8px) !important;
        margin-bottom: 8px !important;
        float: none !important;
    }
    
    /* Adjust logo height inside the grid cards */
    .et_pb_row_1 .et_pb_image, .et_pb_row_3 .et_pb_image {
        margin-bottom: 0 !important;
    }
    .et_pb_row_1 img, .et_pb_row_3 img {
        max-height: 60px !important;
        width: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }
}

/* 6. Product Showcase Grid (5 blurbs) - Stack cleanly with margins */
@media (max-width: 767px) {
    .et_pb_row_5 {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    .et_pb_row_5 .et_pb_column {
        width: 100% !important;
        margin-bottom: 0 !important;
        float: none !important;
    }
    .et_pb_blurb {
        padding: 15px !important;
        margin-bottom: 0 !important;
        border-radius: 8px !important;
    }
    .et_pb_blurb_content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
}

/* 7. Next Range Features Grid (4 blurbs) - 2x2 Clean Layout */
@media (max-width: 767px) {
    .et_pb_row_9 {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    .et_pb_row_9 .et_pb_column {
        width: calc(50% - 5px) !important;
        margin-bottom: 0 !important;
        float: none !important;
    }
    .et_pb_row_9 .et_pb_blurb {
        padding: 10px !important;
        height: 100% !important;
        box-sizing: border-box !important;
    }
    .et_pb_row_9 .et_pb_blurb_container {
        margin-top: 5px !important;
    }
    .et_pb_row_9 .et_pb_module_header {
        font-size: 14px !important;
        line-height: 1.2 !important;
    }
}

/* 8. Table Responsive View */
table {
    width: 100% !important;
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* 9. Header Logo resizing on Mobile */
@media (max-width: 980px) {
    #logo {
        max-height: 36px !important;
        margin-top: 2px !important;
    }
}

/* 10. Divi contact form responsive columns */
@media (max-width: 767px) {
    .et_pb_contact_field {
        width: 100% !important;
        margin-bottom: 12px !important;
    }
}

/* 11. Optimizaciones específicas para dispositivos móviles en la Home de microarea.ai:
   Evitar la carga y visualización de videos (fondo e iframe) para solucionar bloqueos,
   reemplazándolos por imágenes estáticas optimizadas. */
@media (max-width: 767px) {
    /* Ocultar el video de fondo del Hero */
    .home .et_pb_section_video_bg video {
        display: none !important;
    }
    
    /* Mostrar la imagen en su lugar como fondo del Hero */
    .home .et_pb_section_0 {
        background-image: url('/assets/uploads/2021/12/videoportadawebeditadov3WEBOPTIMIZED-poster.webp') !important;
        background-size: cover !important;
        background-position: center !important;
    }

    /* Ocultar el iframe del video de Vimeo (LexNext) */
    .home .et_pb_video_box iframe {
        display: none !important;
    }

    /* Mostrar la imagen miniatura de Vimeo en su lugar con aspecto de video 16:9 */
    .home .et_pb_video_box {
        background-image: url('/assets/uploads/2021/12/vimeo-329833886-thumbnail.webp') !important;
        background-size: cover !important;
        background-position: center !important;
        aspect-ratio: 16/9 !important;
        width: 100% !important;
        display: block !important;
    }
}

/* ==========================================================================
   ESTILO OPTIMIZADO LIQUID GLASS (INSPIRADO EN iOS 26/27)
   Inyección de refracción de luz, hiper-cristal líquido, bordes brillantes,
   saturación de fondo y sombras orgánicas fluidas.
   ========================================================================== */

/* --- 1. BOTONES GLOBALES ESTILO LIQUID GLASS (Gota de Cristal Líquido) --- */
.et_pb_button, 
.et_pb_contact_submit, 
input#wp-submit {
    border-radius: 40px !important;
    padding: 11px 32px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    background: linear-gradient(135deg, rgba(68, 113, 177, 0.8) 0%, rgba(0, 169, 157, 0.8) 100%) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    box-shadow: 
        inset 0 1.5px 1.5px rgba(255, 255, 255, 0.45), 
        inset 0 -1.5px 1.5px rgba(0, 0, 0, 0.15),
        0 8px 24px rgba(68, 113, 177, 0.18) !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative;
    overflow: hidden;
}

.et_pb_button:hover, 
.et_pb_contact_submit:hover, 
input#wp-submit:hover {
    transform: translateY(-2px) scale(1.02) !important;
    background: linear-gradient(135deg, rgba(68, 113, 177, 0.95) 0%, rgba(0, 169, 157, 0.95) 100%) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 
        inset 0 2px 2px rgba(255, 255, 255, 0.6), 
        inset 0 -2px 2px rgba(0, 0, 0, 0.1),
        0 14px 28px rgba(0, 169, 157, 0.28) !important;
}

.et_pb_button:active, 
.et_pb_contact_submit:active, 
input#wp-submit:active {
    transform: translateY(1px) scale(0.98) !important;
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.3), 
        inset 0 -1px 1px rgba(0, 0, 0, 0.2),
        0 4px 10px rgba(0, 169, 157, 0.2) !important;
}

/* --- 2. COLUMNAS Y TARJETAS (BLURBS) COMO LÁMINAS DE CRISTAL LÍQUIDO --- */
.et_pb_blurb, 
#et-main-area .et_pb_column.et_pb_column_1_3, 
#et-main-area .et_pb_column.et_pb_column_1_4,
#et-main-area .et_pb_column.et_pb_column_1_2 {
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 
        inset 0 1.5px 1.5px rgba(255, 255, 255, 0.4), 
        0 10px 30px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Efecto hover interactivo: brillo refractario e incremento de saturación */
.et_pb_blurb:hover,
#et-main-area .et_pb_column.et_pb_column_1_3:hover, 
#et-main-area .et_pb_column.et_pb_column_1_4:hover,
#et-main-area .et_pb_column.et_pb_column_1_2:hover {
    transform: translateY(-6px) !important;
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(25px) saturate(210%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(210%) !important;
    border-color: rgba(0, 169, 157, 0.4) !important;
    box-shadow: 
        inset 0 2px 2px rgba(255, 255, 255, 0.65), 
        0 20px 45px rgba(68, 113, 177, 0.12) !important;
}

/* Transición suave para las imágenes y contenedores de iconos */
.et_pb_blurb img, 
.et_pb_main_blurb_image {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.et_pb_blurb:hover img,
.et_pb_blurb:hover .et_pb_main_blurb_image {
    transform: scale(1.08) translateY(-2px) !important;
}

/* --- 3. MENÚ DE NAVEGACIÓN Y CABECERA (Liquid Glass Bar) --- */
/* Línea inferior animada y fluida en enlaces */
#top-menu li a {
    position: relative;
    transition: color 0.3s ease !important;
}

#top-menu li a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 3px;
    border-radius: 10px;
    background: linear-gradient(90deg, #4471b1, #00a99d);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#top-menu li:hover a::after,
#top-menu li.current-menu-item a::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Color hover azul clarito para los enlaces del menú principal */
#top-menu li a:hover,
.et-menu-nav ul.nav li a:hover,
.et_pb_menu_0_tb_header .et-menu-nav ul.nav > li > a:hover,
.et_pb_menu_1_tb_header .et-menu-nav ul.nav > li > a:hover,
.et_pb_menu_0_tb_header .et-menu-nav ul.nav li:hover > a,
.et_pb_menu_1_tb_header .et-menu-nav ul.nav li:hover > a {
    color: #3a86e9 !important; /* Premium light/sky blue */
}

/* Cabecera flotante e integrada tipo barra de cristal líquido */
#main-header, .et_pb_menu {
    border-radius: 0 0 24px 24px !important;
    background-color: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 
        inset 0 1.5px 1px rgba(255, 255, 255, 0.5),
        0 10px 35px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.4s ease !important;
}

/* --- 3.1 RESET CABECERA (No contenedores para menú o logo) --- */
.et-l--header .et_pb_column,
.et-l--header .et_pb_column.et_pb_column_1_2,
.et-l--header .et_pb_column.et_pb_column_1_3,
.et-l--header .et_pb_column.et_pb_column_1_4,
.et-l--header .et_pb_menu {
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
}

.et-l--header .et_pb_column:hover,
.et-l--header .et_pb_column.et_pb_column_1_2:hover,
.et-l--header .et_pb_column.et_pb_column_1_3:hover,
.et-l--header .et_pb_column.et_pb_column_1_4:hover {
    transform: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.et-fixed-header {
    background-color: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(25px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(200%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 
        inset 0 1.5px 1.5px rgba(255, 255, 255, 0.6),
        0 12px 40px rgba(68, 113, 177, 0.1) !important;
}

/* Menús Desplegables (Submenús) estilo burbujas de cristal líquido */
.et_pb_menu_0_tb_header .et-menu-nav ul.sub-menu,
.et_pb_menu_1_tb_header .et-menu-nav ul.sub-menu,
.et_pb_menu_0_tb_header .nav li ul,
.et_pb_menu_1_tb_header .nav li ul,
#main-header .nav li ul,
.et_pb_menu .nav li ul,
ul.sub-menu,
.nav li ul {
    border-radius: 16px !important;
    /* Very light blue gradient that fades to white */
    background: linear-gradient(135deg, rgba(215, 233, 255, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    /* Subtly colored border in brand blue */
    border: 1px solid rgba(68, 113, 177, 0.18) !important;
    border-top: none !important; /* Remove Divi's default top solid border to make it look clean */
    /* Organic, elegant and prominent drop shadows + inner glow */
    box-shadow: 
        0 15px 40px rgba(68, 113, 177, 0.15), 
        0 4px 15px rgba(0, 0, 0, 0.06),
        inset 0 1px 1.5px rgba(255, 255, 255, 0.9) !important;
    padding: 10px 0 !important;
    overflow: hidden !important;
}

/* Ensure list items don't overflow the rounded borders */
.et_pb_menu_0_tb_header .et-menu-nav ul.sub-menu li:first-child,
.et_pb_menu_1_tb_header .et-menu-nav ul.sub-menu li:first-child,
ul.sub-menu li:first-child,
ul.sub-menu li:first-child > a {
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
}

.et_pb_menu_0_tb_header .et-menu-nav ul.sub-menu li:last-child,
.et_pb_menu_1_tb_header .et-menu-nav ul.sub-menu li:last-child,
ul.sub-menu li:last-child,
ul.sub-menu li:last-child > a {
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
}

/* Transición fluida de apertura tipo burbuja */
ul.sub-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: block !important;
}

li:hover > ul.sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0px) scale(1) !important;
}

/* Premium Hover effect: brand blue background tint with matching text color and slight shift */
.et_pb_menu_0_tb_header .et-menu-nav ul.sub-menu li a,
.et_pb_menu_1_tb_header .et-menu-nav ul.sub-menu li a,
ul.sub-menu li a {
    padding: 10px 20px !important;
    margin: 4px 8px !important;
    border-radius: 10px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    background: transparent !important;
    display: block !important;
    border: 1px solid transparent !important;
}

.et_pb_menu_0_tb_header .et-menu-nav ul.sub-menu li a:hover,
.et_pb_menu_1_tb_header .et-menu-nav ul.sub-menu li a:hover,
ul.sub-menu li a:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(58, 134, 233, 0.2) 100%) !important;
    color: #3a86e9 !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 
        inset 0 1.5px 1.5px rgba(255, 255, 255, 0.8), 
        inset 0 -1.5px 1.5px rgba(58, 134, 233, 0.15),
        0 4px 12px rgba(58, 134, 233, 0.15) !important;
    padding-left: 24px !important; /* Elegant slide to the right */
}


/* --- 4. FORMULARIOS E INPUTS INTERACTIVOS --- */
.et_pb_contact_field input, 
.et_pb_contact_field textarea, 
div#popup-entrar input, 
div#recuperar-pass input {
    border: 1px solid #dcdcdc !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    padding: 10px 14px !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.02) !important;
}

.et_pb_contact_field input:focus, 
.et_pb_contact_field textarea:focus, 
div#popup-entrar input:focus, 
div#recuperar-pass input:focus {
    border-color: #00a99d !important;
    box-shadow: 0 0 0 3px rgba(0, 169, 157, 0.15) !important;
    outline: none !important;
}

/* --- 5. ANIMACIÓN DE FLOTADO SUAVE --- */
@keyframes premiumFloat {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-8px);
    }
    100% {
        transform: translateY(0px);
    }
}

.premium-float-element {
    animation: premiumFloat 6s ease-in-out infinite !important;
}

/* --- 6. REDES SOCIALES E ICONOS --- */
.et-social-icon a {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.et-social-icon a:hover {
    transform: scale(1.18) rotate(6deg) !important;
    color: #00a99d !important;
}

/* --- 7. APARIENCIA GLOBAL DE CRISTAL LÍQUIDO (Liquid Glass Whole Site) --- */
/* Fondo de gradiente premium para todo el sitio */
body, #page-container {
    background: linear-gradient(135deg, #f4f7fc 0%, #eef6f5 40%, #fcf7ff 70%, #f5faf8 100%) !important;
    background-attachment: fixed !important; /* Mantiene el gradiente estático al hacer scroll */
}

/* Hacer transparentes las secciones estándar para revelar el gradiente de fondo */
.et_pb_section:not(.et_pb_section_video):not(.et_pb_section_0_tb_footer):not(.et_pb_section_8) {
    background-color: transparent !important;
}

/* Efecto cristal en el contenedor principal de formularios y popups */
.et_pb_contact_form_container, 
div#popup-entrar .et_pb_column, 
div#recuperar-pass .et_pb_column,
.et_pb_newsletter {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 20px !important;
    box-shadow: 
        inset 0 1.5px 1.5px rgba(255, 255, 255, 0.4), 
        0 10px 30px rgba(0, 0, 0, 0.05) !important;
    padding: 24px !important;
}

/* Asegurar que las cabeceras fijas de otras subpáginas tengan el mismo aspecto de cristal */
.et_pb_menu_0_tb_header, .et_pb_menu_1_tb_header {
    background-color: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

/* Cabecera del pie de página (Footer) estilo cristal líquido oscuro */
.et_pb_section_0_tb_footer {
    background: rgba(9, 28, 79, 0.85) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: inset 0 1.5px 0.5px rgba(255, 255, 255, 0.15) !important;
}

/* --- 7.1 RESET PIE DE PÁGINA (No contenedores para las columnas del footer) --- */
#et-main-area .et-l--footer .et_pb_column,
#et-main-area .et-l--footer .et_pb_column.et_pb_column_1_2,
#et-main-area .et-l--footer .et_pb_column.et_pb_column_1_3,
#et-main-area .et-l--footer .et_pb_column.et_pb_column_1_4,
#et-main-area .et_pb_section_8 .et_pb_column,
.et-l--footer .et_pb_column,
.et-l--footer .et_pb_column.et_pb_column_1_2,
.et-l--footer .et_pb_column.et_pb_column_1_3,
.et-l--footer .et_pb_column.et_pb_column_1_4,
.et_pb_section_8 .et_pb_column {
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
}

#et-main-area .et-l--footer .et_pb_column:hover,
#et-main-area .et-l--footer .et_pb_column.et_pb_column_1_2:hover,
#et-main-area .et-l--footer .et_pb_column.et_pb_column_1_3:hover,
#et-main-area .et-l--footer .et_pb_column.et_pb_column_1_4:hover,
#et-main-area .et_pb_section_8 .et_pb_column:hover,
.et-l--footer .et_pb_column:hover,
.et-l--footer .et_pb_column.et_pb_column_1_2:hover,
.et-l--footer .et_pb_column.et_pb_column_1_3:hover,
.et-l--footer .et_pb_column.et_pb_column_1_4:hover,
.et_pb_section_8 .et_pb_column:hover {
    transform: none !important;
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* --- 12. ESTILOS DE BANDERAS DE IDIOMAS (Pastel con Burbuja Azul Clarito) --- */
/* Hacer las banderas de idiomas más pastel por defecto con transición suave */
.lang-item a {
    padding: 6px 12px !important;
    margin: 0 2px !important;
    border-radius: 20px !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: none !important;
}

.lang-item a svg {
    filter: saturate(55%) brightness(1.1) contrast(90%) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
    border-radius: 50% !important;
}

/* Burbuja azul clarito transparente sobre la bandera seleccionada (actual) - Liquid Glass */
.lang-item.current-lang a {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(68, 113, 177, 0.15) 100%) !important;
    color: #4471b1 !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 
        inset 0 1.5px 1.5px rgba(255, 255, 255, 0.75), 
        inset 0 -1px 1px rgba(68, 113, 177, 0.1),
        0 6px 16px rgba(68, 113, 177, 0.18) !important;
}

.lang-item.current-lang a svg {
    filter: saturate(80%) brightness(1.05) contrast(95%) !important;
    box-shadow: 0 1.5px 4px rgba(0,0,0,0.2) !important;
}

/* Efecto hover: burbuja azul clarito transparente más pronunciada y pop de escala - Liquid Glass */
.lang-item a:hover {
    transform: scale(1.05) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(58, 134, 233, 0.2) 100%) !important;
    color: #3a86e9 !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 
        inset 0 2px 2px rgba(255, 255, 255, 0.8), 
        inset 0 -1.5px 2px rgba(58, 134, 233, 0.15),
        0 8px 24px rgba(58, 134, 233, 0.28) !important;
}

.lang-item a:hover svg {
    filter: saturate(90%) brightness(1.05) contrast(95%) !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.25) !important;
}

/* --- 13. ESTILOS DE MENÚ DE NAVEGACIÓN PRINCIPAL (Burbuja Azul Clarito Transparente) --- */
/* Estilo base para los enlaces del menú principal */
.et-menu-nav ul.nav > li:not(.lang-item) > a {
    padding: 8px 16px !important;
    margin: 0 4px !important;
    border-radius: 24px !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    display: inline-block !important;
}

/* Ocultar la línea inferior animada para evitar conflicto visual con la burbuja */
.et-menu-nav ul.nav > li:not(.lang-item) > a::after {
    display: none !important;
}

/* Burbuja azul clarito transparente sobre la opción del menú seleccionada (actual) - Liquid Glass */
.et-menu-nav ul.nav > li:not(.lang-item).current-menu-item > a,
.et-menu-nav ul.nav > li:not(.lang-item).current_page_item > a {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(68, 113, 177, 0.15) 100%) !important;
    color: #4471b1 !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 
        inset 0 1.5px 1.5px rgba(255, 255, 255, 0.75), 
        inset 0 -1px 1px rgba(68, 113, 177, 0.1),
        0 6px 16px rgba(68, 113, 177, 0.18) !important;
}

/* Efecto hover: burbuja azul clarito transparente al pasar el cursor y pequeña escala - Liquid Glass */
.et-menu-nav ul.nav > li:not(.lang-item) > a:hover,
.et-menu-nav ul.nav > li:not(.lang-item):hover > a {
    transform: scale(1.03) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(58, 134, 233, 0.2) 100%) !important;
    color: #3a86e9 !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 
        inset 0 2px 2px rgba(255, 255, 255, 0.8), 
        inset 0 -1.5px 2px rgba(58, 134, 233, 0.15),
        0 8px 24px rgba(58, 134, 233, 0.28) !important;
}

/* Reset background for the footer menu to prevent gray rounded background */
#et-main-area .et-l--footer .et_pb_menu,
#et-main-area #menu-inferior,
#et-main-area .et_pb_section_8 .et_pb_menu,
.et-l--footer .et_pb_menu, 
#menu-inferior {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* --- 14. OPTIMIZACIÓN DE ESPACIADO Y DIRECCIÓN EN PÁGINA DE CONTACTO (page-id-171) --- */
.page-id-171 .et_pb_column_3, 
.page-id-171 .et_pb_column_4 {
    padding: 24px !important;
}

.page-id-171 .et_pb_column_3 p, 
.page-id-171 .et_pb_column_4 p {
    margin-bottom: 4px !important;
    line-height: 1.35 !important;
}

.page-id-171 .et_pb_column_3 p:first-child, 
.page-id-171 .et_pb_column_4 p:first-child {
    margin-bottom: 12px !important;
}