.elementor-2252 .elementor-element.elementor-element-e61b217{--display:flex;--margin-top:-44px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2252 .elementor-element.elementor-element-d9495ad{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--margin-top:22px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2252 .elementor-element.elementor-element-1a123b2{--display:flex;}@media(max-width:1024px){.elementor-2252 .elementor-element.elementor-element-d9495ad{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-2252 .elementor-element.elementor-element-d9495ad{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for container, class: .elementor-element-e61b217 */.text-carousel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    border: 2px solid #ff9900;
    border-radius: 10px;
    padding: 10px 20px;
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
}

.carousel-text {
    flex: 1;
    text-align: center;
    transition: opacity 0.5s ease-in-out;
}

.carousel-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.carousel-arrow {
    cursor: pointer;
    font-size: 18px;
    color: #ff9900;
    transition: color 0.3s;
}

.carousel-arrow:hover {
    color: #e67e22;
}

#counter {
    font-size: 14px;
    color: #555;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2aeee2d */.news-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 20px;
    max-width: 1200px;
    margin: auto;
    font-family: Arial, sans-serif;
}

.newsfeed, .top-stories {
    background: #f8f8f8;
    padding: 15px;
    border-radius: 8px;
}

.newsfeed h3, .top-stories h3 {
    border-bottom: 2px solid #ff9900;
    padding-bottom: 10px;
    margin-bottom: 10px;
    font-size: 18px;
}

.newsfeed ul, .top-stories ul {
    list-style: none;
    padding: 0;
}

.newsfeed li, .top-stories li {
    margin-bottom: 12px;
    font-size: 14px;
}

.newsfeed li a, .top-stories li a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

.newsfeed li span {
    display: block;
    font-size: 12px;
    color: #666;
}

.main-news img {
    width: 100%;
    border-radius: 8px;
}

.main-news h2 {
    font-size: 22px;
    margin-top: 10px;
}

.main-news p {
    font-size: 14px;
    color: #555;
}

/* 🔹 Estilos para la lista de historias */
.top-stories ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 🔹 Cada historia en la lista */
.top-stories li {
    display: flex;
    align-items: center; /* 🔹 Asegura que imagen y texto estén alineados */
    margin-bottom: 18px; /* 🔹 Espaciado entre historias */
    overflow: hidden; /* 🔹 Evita desbordamiento */
}

/* 🔹 Imágenes con más separación */
.top-stories li img {
    width: 120px; /* 🔹 Ajusta el tamaño de la imagen */
    height: 90px;
    object-fit: cover;
    border-radius: 5px;
    margin-right: 15px; /* 🔹 Más separación entre imagen y texto */
    flex-shrink: 0; /* 🔹 Evita que la imagen se reduzca */
}

/* 🔹 Ajuste del texto */
.top-stories li a {
    text-decoration: none;
    color: #333;
    font-size: 14px;
    line-height: 1.5; /* 🔹 Más espacio entre líneas */
    font-weight: 400;
    display: flex;
    align-items: center; /* 🔹 Mantiene el texto alineado */
    max-width: calc(100% px); /* 🔹 Limita el ancho del texto para evitar que baje */
    white-space: normal; /* 🔹 Permite que el texto se ajuste sin romper diseño */
    word-wrap: break-word; /* 🔹 Evita palabras largas fuera del contenedor */
    overflow: hidden;
}

/* 🔹 Estilo para el enlace "See all stories" */
.see-all {
    display: block;
    text-align: right;
    font-weight: bold;
    color: #DAA520; /* 🔹 Color dorado */
    margin-top: 15px;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease-in-out;
}

/* 🔹 Cambia el color al pasar el mouse */
.see-all:hover {
    color: #B8860B; /* 🔹 Un dorado más oscuro al hacer hover */
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4aada7a *//* Contenedor principal */
.trending-container {
    max-width: 1200px;
    margin: auto;
    padding: 20px;
    font-family: Arial, sans-serif;
}

/* Título de la sección */
.trending-container h2 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
}

/* Diseño en cuadrícula para escritorio */
.trending-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Tarjetas de las noticias */
.trending-card {
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
    text-align: left;
    transition: transform 0.2s ease-in-out;
}

/* Efecto hover en desktop */
.trending-card:hover {
    transform: scale(1.05);
}

/* Imágenes */
.trending-card img {
    width: 100%;
    border-radius: 8px;
}

/* Títulos */
.trending-card h3 {
    font-size: 16px;
    margin: 10px 0;
}

/* Meta info (categoría + fecha) */
.trending-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #555;
    margin-top: 10px;
}

/* Categoría */
.trending-meta .category {
    background: #ddd;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
}

/* Fecha */
.trending-meta .date {
    font-weight: normal;
}

/* 🔹 RESPONSIVE DESIGN 🔹 */

/* Tablets: Cambiar a 2 columnas */
@media (max-width: 1024px) {
    .trending-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Móviles: Cambiar a 1 columna y ajustar espaciados */
@media (max-width: 600px) {
    .trending-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .trending-card {
        padding: 10px;
    }

    .trending-card h3 {
        font-size: 14px;
    }

    .trending-meta {
        font-size: 11px;
    }

    .trending-meta .category {
        padding: 3px 8px;
    }
}/* End custom CSS */