.elementor-820 .elementor-element.elementor-element-06838d8{--display:flex;}.elementor-820 .elementor-element.elementor-element-96b9ca5{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-820 .elementor-element.elementor-element-eeee5d4 .elementor-wrapper{--video-aspect-ratio:1.77777;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}@media(max-width:1024px){.elementor-820 .elementor-element.elementor-element-96b9ca5{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-820 .elementor-element.elementor-element-96b9ca5{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for wp-widget-newses_latest_post, class: .elementor-element-088d432 */ /* --- CSS Completo para Grilla de Noticias (Tema Newses) --- */

/* 1. CONTENEDOR PRINCIPAL DE LA GRILLA */
.mg-posts-sec-inner.row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 30px !important;
  
  /* Centrado de la grilla */
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* 2. LA TARJETA DE NOTICIA COMPLETA */
.mg-posts-sec-post {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

/* 3. IMAGEN DESTACADA (CUADRADA) */
.mg-blog-thumb {
  width: 100%;
  aspect-ratio: 1 / 1; /* Fuerza la imagen a ser cuadrada */
  object-fit: cover;   /* Evita que la imagen se deforme */
  background-size: cover;
  background-position: center;
  display: block;
}

/* 4. CONTENIDO DE LA TARJETA (TEXTO) */
.mg-sec-top-post {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* 5. TÍTULO DE LA NOTICIA */
h4.title a {
  font-size: 1.25rem;
  color: #333;
  text-decoration: none;
  font-weight: bold;
}

/* 6. EXTRACTO O RESUMEN CON LÍMITE */
/* Selector adaptado: '.mg-content.overflow-hidden p' */
.mg-content.overflow-hidden p {
  height: 60px; /* Altura aproximada para 3 líneas de texto */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Límite de 3 líneas */
  -webkit-box-orient: vertical;
  margin-bottom: 15px;
}


/* --- RESPONSIVIDAD --- */
@media (max-width: 992px) {
  .mg-posts-sec-inner.row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 768px) {
  .mg-posts-sec-inner.row {
    grid-template-columns: 1fr !important;
  }
} /* End custom CSS */
/* Start custom CSS for video, class: .elementor-element-eeee5d4 */ /* 1. Contenedor de la Imagen o el Video */
/* Esta clase se aplica al contenedor principal del widget de imagen o video */
.elementor-widget-image, 
.elementor-widget-video {
    width: 100%;
    position: relative;
    /* La siguiente propiedad crea un espacio con una relación de aspecto de 16:9,
       ideal para imágenes y videos. Si prefieres un cuadrado, usa 'aspect-ratio: 1 / 1;' */
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 5px 5px 0 0; /* Bordes redondeados solo arriba */
}

/* 2. Estilos para la Imagen (dentro del contenedor) */
.elementor-widget-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* La imagen llenará el espacio sin distorsionarse, recortando si es necesario */
    display: block;
}

/* 3. Estilos para el Video (dentro del contenedor) */
/* Elementor genera un div con esta clase para mantener la relación de aspecto del video */
.elementor-widget-video .elementor-fit-aspect-ratio {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.elementor-widget-video .elementor-fit-aspect-ratio iframe {
    width: 100%;
    height: 100%;
} /* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-96b9ca5 */ /* --- Estilos para Imágenes --- */
img {
    max-width: 100%; /* Asegura que la imagen no sea más grande que su contenedor */
    height: auto;    /* Mantiene la relación de aspecto de la imagen */
    display: block;  /* Evita espacios extra debajo de la imagen */
}

/* --- Estilos para Videos (iframes de YouTube, Vimeo, etc.) --- */
.video-container {
    position: relative; /* Es la base para posicionar el video */
    width: 100%;
    height: 0;          /* Establece la altura a 0 */
    padding-bottom: 56.25%; /* Crea un espacio de 16:9 (9 / 16 = 0.5625) */
    overflow: hidden;   /* Oculta cualquier parte del video que se desborde */
    margin-bottom: 20px; /* Espacio para separar de otros elementos */
}

.video-container iframe,
.video-container video {
    position: absolute; /* Posiciona el video dentro de su contenedor */
    top: 0;
    left: 0;
    width: 100%;       /* El video ocupa todo el ancho del contenedor */
    height: 100%;      /* El video ocupa toda la altura del contenedor */
} /* End custom CSS */