.elementor-90 .elementor-element.elementor-element-d6c4efc{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:-20px;--margin-bottom:100px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-90 .elementor-element.elementor-element-97489c8{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-90 .elementor-element.elementor-element-4fb03b9{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--margin-top:0px;--margin-bottom:55px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-90 .elementor-element.elementor-element-c887037{--display:flex;}.elementor-90 .elementor-element.elementor-element-ed7af6d .aux-modern-heading-primary{font-family:"Poppins", Sans-serif;font-size:50px;font-weight:700;line-height:1em;letter-spacing:-3px;color:rgb(14, 32, 56);margin:0px 0px 25px 0px;}.elementor-90 .elementor-element.elementor-element-ed7af6d .aux-modern-heading-divider{height:2px;width:53px;background-color:#0E2038;}.elementor-90 .elementor-element.elementor-element-283d4e1{margin:0px 15px calc(var(--kit-widget-spacing, 0px) + 0px) 15px;animation-delay:150ms;animation-timing-function:cubic-bezier(0.165,0.84,0.44,1);}.elementor-90 .elementor-element.elementor-element-283d4e1 .entry-title a{color:#0E2038;font-family:"Montserrat Alternates", Sans-serif;font-size:16px;font-weight:500;line-height:29px;}.elementor-90 .elementor-element.elementor-element-283d4e1 .entry-info, .elementor-90 .elementor-element.elementor-element-283d4e1 .entry-info a{font-family:"Montserrat Alternates", Sans-serif;font-size:11px;font-weight:400;line-height:1.5em;letter-spacing:-0.4px;}@media(max-width:767px){.elementor-90 .elementor-element.elementor-element-283d4e1{padding:80px 0px 0px 0px;}.elementor-90 .elementor-element.elementor-element-283d4e1 .entry-meta{padding:0px 0px 0px 0px;}.elementor-90 .elementor-element.elementor-element-283d4e1 .column-entry{padding:120px 0px 0px 0px;}.elementor-90 .elementor-element.elementor-element-283d4e1 .type-post .entry-main{padding:0px 0px 0px 0px;}}@media(min-width:768px){.elementor-90 .elementor-element.elementor-element-d6c4efc{--content-width:1600px;}}/* Start custom CSS for aux_recent_posts, class: .elementor-element-283d4e1 *//* 
============================================
ESTILOS PARA EL WIDGET DE POSTS RECIENTES - BLOG
============================================
Este código aplica estilos para el widget de posts recientes
en diferentes tamaños de pantalla.
*/

/* 
Contenedor principal del título y metadatos
Lo posicionamos absolutamente sobre la imagen
*/
.elementor-90 .elementor-element.elementor-element-283d4e1 .entry-main {
    bottom: 10%;
    left: 10%;
    right: 10%;
    position: absolute;
    z-index: 1;
    /* CAMBIADO: Color más oscuro que #001122 con 85% opacidad */
    background-color: rgba(0, 10, 30, 0.8); /* #001122 con 85% opacidad */
}

/* 
Efecto hover en el post completo
Cuando pasas el mouse sobre cualquier parte del post
*/
.elementor-90 .elementor-element.elementor-element-283d4e1 .aux-widget-recent-posts .type-post:hover .entry-main {
    background-color: rgba(255, 255, 255, 0.8); /* Blanco con 90% opacidad */
}

/* 
Título del post en estado normal
Aseguramos que sea blanco inicialmente
*/
.elementor-90 .elementor-element.elementor-element-283d4e1 .aux-widget-recent-posts .entry-title,
.elementor-90 .elementor-element.elementor-element-283d4e1 .aux-widget-recent-posts .entry-title a {
    color: #FFFFFF !important; /* Blanco */
    line-height: 20px; /* Interlineado moderado para el título */
}

/* 
Título del post en estado hover
Cambia a tu color específico cuando pasa el mouse sobre el post
*/
.elementor-90 .elementor-element.elementor-element-283d4e1 .aux-widget-recent-posts .type-post:hover .entry-title,
.elementor-90 .elementor-element.elementor-element-283d4e1 .aux-widget-recent-posts .type-post:hover .entry-title a {
    color: #0E2038 !important; /* Tu color específico para hover */
}

/* 
Metadatos del post (autor, fecha, categoría) en estado normal
*/
.elementor-90 .elementor-element.elementor-element-283d4e1 .entry-info,
.elementor-90 .elementor-element.elementor-element-283d4e1 .entry-info a,
.elementor-90 .elementor-element.elementor-element-283d4e1 .entry-info span {
    color: #FFFFFF !important; /* Blanco inicial */
    line-height: 1.5; /* Buen interlineado para mejor lectura */
}

/* 
Metadatos del post en estado hover
Cambian al color específico cuando pasa el mouse sobre el post
*/
.elementor-90 .elementor-element.elementor-element-283d4e1 .aux-widget-recent-posts .type-post:hover .entry-info,
.elementor-90 .elementor-element.elementor-element-283d4e1 .aux-widget-recent-posts .type-post:hover .entry-info a,
.elementor-90 .elementor-element.elementor-element-283d4e1 .aux-widget-recent-posts .type-post:hover .entry-info span {
    color: #303E4D !important; /* Tu color para hover de metadatos */
}

/* 
============================================
AJUSTES DE ESPACIADO - ESCRITORIO
============================================
Para pantallas de escritorio (generalmente > 767px)
*/

/* 
Espaciado interno del contenedor de metadatos
Padding: top right bottom left
*/
.elementor-90 .elementor-element.elementor-element-283d4e1 .entry-info {
    padding: 25px 40px 0 40px; /* TOP:25px RIGHT:40px BOTTOM:0 LEFT:40px */
}

/* 
Espaciado interno del encabezado (donde va el título)
*/
.elementor-90 .elementor-element.elementor-element-283d4e1 .entry-header {
    padding: 0 40px 20px 40px; /* TOP:0 RIGHT:40px BOTTOM:20px LEFT:40px */
}

/* 
============================================
ESTILOS PARA PANTALLAS MEDIANAS (hasta 1399px)
============================================
Estos estilos se aplican solo en pantallas menores a 1400px
*/
@media screen and (max-width: 1399px) {
    /* Comportamiento consistente para hover */
    .elementor-90 .elementor-element.elementor-element-283d4e1 .aux-widget-recent-posts .type-post:hover .entry-title a {
        color: #0E2038 !important;
    }
}

/* 
============================================
ESTILOS PARA MÓVILES PEQUEÑOS (hasta 767px)
============================================
Reduce el padding en pantallas muy pequeñas para optimizar espacio
*/
@media screen and (max-width: 767px) {
    .elementor-90 .elementor-element.elementor-element-283d4e1 .entry-header {
        padding: 0 20px 10px 20px; /* TOP:0 RIGHT:20px BOTTOM:10px LEFT:20px */
    }
    
    .elementor-90 .elementor-element.elementor-element-283d4e1 .entry-info {
        padding: 10px 20px 0 20px; /* TOP:10px RIGHT:20px BOTTOM:0 LEFT:20px */
    }
    
    /* Ajuste de posición en móviles */
    .elementor-90 .elementor-element.elementor-element-283d4e1 .entry-main {
        bottom: 5%;
        left: 5%;
        right: 5%;
    }
}

/* 
============================================
ESTILOS ADICIONALES PARA GARANTIZAR COMPORTAMIENTO
============================================
Estos estilos aseguran que el efecto de superposición funcione
en TODOS los tamaños de pantalla
*/

/* Hacemos que .entry-media sea relativo para posicionamiento absoluto */
.elementor-90 .elementor-element.elementor-element-283d4e1 .entry-media {
    position: relative;
    overflow: hidden;
}

/* Aseguramos que las imágenes se muestren correctamente */
.elementor-90 .elementor-element.elementor-element-283d4e1 .entry-media img {
    width: 100%;
    height: auto;
    display: block;
}

/* 
Para pantallas entre 991px y 1399px aplicamos superposición
(Esta era la brecha donde no se aplicaba originalmente)
*/
@media screen and (min-width: 991px) and (max-width: 1399px) {
    .elementor-90 .elementor-element.elementor-element-283d4e1 .entry-main {
        bottom: 10%;
        left: 10%;
        right: 10%;
        position: absolute;
        z-index: 1;
        background-color: rgba(0, 17, 34, 0.85); /* Color oscuro consistente */
    }
}

/* 
Para pantallas menores a 990px aseguramos colores
(Aunque la superposición ya funcionaba aquí)
*/
@media screen and (max-width: 990px) {
    .elementor-90 .elementor-element.elementor-element-283d4e1 .entry-main {
        background-color: rgba(0, 17, 34, 0.85) !important;
    }
}

/* 
============================================
ESTILOS PARA DISPOSITIVOS MUY PEQUEÑOS (opcional)
============================================
Para pantallas menores a 480px (teléfonos muy pequeños)
*/
@media screen and (max-width: 480px) {
    .elementor-90 .elementor-element.elementor-element-283d4e1 .entry-header {
        padding: 0 15px 8px 15px;
    }
    
    .elementor-90 .elementor-element.elementor-element-283d4e1 .entry-info {
        padding: 8px 15px 0 15px;
    }
    
    .elementor-90 .elementor-element.elementor-element-283d4e1 .entry-main {
        bottom: 3%;
        left: 3%;
        right: 3%;
    }
}

/* 
============================================
MEJORAS VISUALES ADICIONALES
============================================
*/

/* Suavizar transición de hover */
.elementor-90 .elementor-element.elementor-element-283d4e1 .entry-main {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.elementor-90 .elementor-element.elementor-element-283d4e1 .aux-widget-recent-posts .entry-title,
.elementor-90 .elementor-element.elementor-element-283d4e1 .aux-widget-recent-posts .entry-title a,
.elementor-90 .elementor-element.elementor-element-283d4e1 .entry-info,
.elementor-90 .elementor-element.elementor-element-283d4e1 .entry-info a,
.elementor-90 .elementor-element.elementor-element-283d4e1 .entry-info span {
    transition: color 0.3s ease;
}

/* Mejorar visibilidad del texto sobre fondo oscuro */
.elementor-90 .elementor-element.elementor-element-283d4e1 .entry-main {
    /* Sutil sombra de texto para mejor contraste */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* En hover, reducir sombra de texto ya que el fondo es claro */
.elementor-90 .elementor-element.elementor-element-283d4e1 .aux-widget-recent-posts .type-post:hover .entry-main {
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

/* 
============================================
CORRECCIÓN DE POSICIONAMIENTO PARA PANTALLAS GRANDES
============================================
Asegurar que en pantallas >1400px también funcione correctamente
*/
@media screen and (min-width: 1400px) {
    .elementor-90 .elementor-element.elementor-element-283d4e1 .entry-main {
        bottom: 10%;
        left: 10%;
        right: 10%;
        position: absolute;
        z-index: 1;
        background-color: rgba(0, 17, 34, 0.85);
    }
}

/* 
============================================
MEDIA QUERY ESPECÍFICA PARA BLOG (conservada del original)
============================================
Esta media query se mantiene porque maneja casos específicos del blog
*/
@media screen and (max-width: 990px), screen and (min-width: 1400px) {
    .elementor-90 .elementor-element.elementor-element-283d4e1 .entry-media {
        margin-bottom: 0;
    }
    
    .elementor-90 .elementor-element.elementor-element-283d4e1 .aux-col {
        padding: 0;
        margin: 0;
    }
    
    /* Aseguramos que mantenga los colores y estilos correctos */
    .elementor-90 .elementor-element.elementor-element-283d4e1 .entry-main {
        bottom: 10%;
        left: 10%;
        right: 10%;
        position: absolute;
        z-index: 1;
        background-color: rgba(0, 10, 30, 0.8); /* Cambiado a nuestro color consistente */
    }
    
    /* Hover mantiene los colores del esquema principal */
    .elementor-90 .elementor-element.elementor-element-283d4e1 .aux-widget-recent-posts .type-post:hover .entry-main {
        background-color: rgba(255, 255, 255, 0.8); /* Blanco con 90% opacidad */
    }
    
    .elementor-90 .elementor-element.elementor-element-283d4e1 .aux-widget-recent-posts .type-post:hover .entry-title,
    .elementor-90 .elementor-element.elementor-element-283d4e1 .aux-widget-recent-posts .type-post:hover .entry-title a {
        color: #0E2038 !important; /* Color específico para hover */
    }
    
    .elementor-90 .elementor-element.elementor-element-283d4e1 .aux-widget-recent-posts .type-post:hover .entry-info,
    .elementor-90 .elementor-element.elementor-element-283d4e1 .aux-widget-recent-posts .type-post:hover .entry-info a,
    .elementor-90 .elementor-element.elementor-element-283d4e1 .aux-widget-recent-posts .type-post:hover .entry-info span {
        color: #303E4D !important; /* Color para hover de metadatos */
    }
    
    /* Mantenemos el padding específico para estos breakpoints */
    .elementor-90 .elementor-element.elementor-element-283d4e1 .entry-info {
        padding: 25px 40px 0 40px; /* Consistente con el resto */
    }
    
    .elementor-90 .elementor-element.elementor-element-283d4e1 .entry-header {
        padding: 0 40px 20px 40px; /* Consistente con el resto */
    }
}

/* 
============================================
AJUSTE PARA TABLETS (1024px o menos)
============================================
Reduce padding en tablets para mejor adaptación
*/
@media screen and (max-width: 1024px) {
    .elementor-90 .elementor-element.elementor-element-283d4e1 .entry-info,
    .elementor-90 .elementor-element.elementor-element-283d4e1 .entry-header {
        padding: 10px 20px 0 20px; /* Padding consistente y moderado */
    }
}

/* 
============================================
AJUSTE PARA EL LAYOUT DE COLUMNAS EN BLOG
============================================
Asegurar que las columnas del grid funcionen correctamente
*/
.elementor-90 .elementor-element.elementor-element-283d4e1 .aux-widget-recent-posts .aux-col {
    margin-bottom: 30px; /* Espacio entre posts */
}

/* 
============================================
CORRECCIÓN DE IMÁGENES EN BLOG
============================================
Asegurar que las imágenes mantengan proporción en todos los tamaños
*/
.elementor-90 .elementor-element.elementor-element-283d4e1 .entry-media .aux-media-frame {
    position: relative;
    overflow: hidden;
}

.elementor-90 .elementor-element.elementor-element-283d4e1 .entry-media .aux-media-frame img {
    transition: transform 0.3s ease; /* Efecto zoom suave en hover */
}

.elementor-90 .elementor-element.elementor-element-283d4e1 .entry-media .aux-media-frame:hover img {
    transform: scale(1.05); /* Zoom sutil en hover */
}/* End custom CSS */