/* General */
*,
*::before,
*::after {
    box-sizing: border-box; /* Asegura que el padding y el border no afecten el ancho */
}

body {
    background-color: #fafafa;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
    color: #333333;
}

/* Header */
header {
    background-color: #ffffff;
    padding: 20px 0;
    width: 100%; /* Asegura que el header ocupe todo el ancho */
    margin: 0; /* Elimina cualquier margen extra */
}

.header-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Permite que los elementos se muevan en pantallas pequeñas */
    gap: 20px; /* Espacio entre logo y banner */
}

/* Logo */
.logo {
    max-width: 350px; /* Controla el ancho del logo */
    margin-bottom: 10px;
}

/* Banner Publicitario */
.advertisement img {
    width: 100%;
    max-width: 740px; /* Asegura que el banner no sea más grande que el logo */
    margin-top: 10px;
}

/* Menú */
nav {
    background-color: #db4109;
    padding: 10px 0;
    text-align: center;
    width: 100%;
}

/* Botón de menú en dispositivos móviles */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
}

/* Menú */
.menu {
    display: flex;
    justify-content: center;
}

.menu a {
    color: white;
    margin: 0 20px;
    text-decoration: none;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.menu a:hover {
    text-decoration: underline;
}

/* Estilos para el menú móvil */
@media (max-width: 768px) {
    /* Botón de menú en móviles */
    .menu-toggle {
        display: block;
        margin-top: 10px;
    }

    /* El menú está oculto por defecto */
    .menu {
        display: none;
        flex-direction: column;
        align-items: center;
    }

    /* Cuando se activa el menú, se muestra */
    .menu.active {
        display: flex;
    }

    /* Asegura que el banner esté debajo del logo en móviles */
    .header-container {
        flex-direction: column; /* Coloca el logo y el banner verticalmente */
        align-items: center; /* Centra ambos elementos */
    }

    .advertisement img {
        max-width: 300px; /* El banner también se ajusta en móviles */
        margin-top: 10px;
    }
}

/* Estilos en pantallas pequeñas (móviles) */
@media (max-width: 480px) {
    .logo {
        max-width: 300px; /* Asegura que el logo se ajuste bien en móviles */
    }

    .advertisement img {
        max-width: 300px; /* El banner se ajusta al tamaño del logo */
    }

    .menu a {
        font-size: 16px; /* Reduce el tamaño de fuente en móviles */
        margin: 10px 0; /* Espaciado más grande entre enlaces en móviles */
    }
}

/* Contenedor principal con dos columnas */
.container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.main-content {
    flex: 1;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.sidebar {
    width: 350px;
    background-color: #ffffff;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

/* Estilo para cada widget */
.widget {
    margin-bottom: 30px; /* Espaciado entre widgets */
    padding-bottom: 20px;
}

/* Títulos de los widgets */
.widget-title {
    font-size: 20px;
    color: #333333;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 2px solid #db4109;
    font-weight: bold;
}

/* Contenido del widget */
.widget-content {
    margin-top: 15px;
}

/* Estilo para las imágenes dentro del widget */
.widget-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 10px;
    transition: transform 0.3s ease;
}

.widget-image:hover {
    transform: scale(1.05);
}

/* Estilo para los videos dentro del widget */
.widget-video iframe {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* RSS Feed: Diseño intacto con imagen a la izquierda y texto a la derecha */
.rss-feed .article {
    display: flex;
    flex-direction: row;
    margin-bottom: 30px;
    padding: 20px;
    border-radius: 8px;
    background-color: #ffffff;
    border: 1px solid #e6e6e6;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rss-feed .article:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* Imagen del artículo */
.rss-feed .article img {
    width: 250px;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-right: 20px;
}

/* Texto del artículo */
.rss-feed .article .text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Título del artículo */
.rss-feed .article h4 {
    font-size: 20px;
    font-weight: bold;
    color: #00000;
    margin: 0 0 10px 0;
    padding-bottom: 5px;
    border-bottom: 2px solid #db4109; /* Línea separadora debajo del título */
    transition: color 0.3s ease;
}

.rss-feed .article h4:hover {
    color: #db4109; /* Cambio de color del texto al pasar el cursor */
}

/* Enlace del título */
.rss-feed .article h4 a {
    color: inherit; /* Hereda el color definido en el h4 */
    text-decoration: none;
    display: block;
}

/* Descripción del artículo */
.rss-feed .article p {
    font-size: 17px;
    margin: 15px 0;
    color: #000000;
    line-height: 1.6;
}

/* Botón "Leer más" */
.rss-feed .article .read-more-button {
    display: inline-block;
    align-self: start;
    background-color: #db4109;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin-top: 20px; /* Asegura que el botón tenga un espaciado adecuado con el texto */
}

.rss-feed .article .read-more-button:hover {
    background-color: #c33c00;
    transform: scale(1.05);
}

/* Responsive */
@media (max-width: 768px) {
    /* Ajustar el header para móviles */
    header {
        padding: 40px 0; /* Ajustar el padding en móvil si es necesario */
        width: 100%; /* Asegura que el header ocupe todo el ancho */
        margin: 0; /* Elimina cualquier margen extra */
    }

    /* Ajustar el footer para móviles */
    footer {
        padding: 15px 0; /* Ajustar el padding en móvil si es necesario */
        width: 100%; /* Asegura que el footer ocupe todo el ancho */
        margin: 0; /* Elimina cualquier margen extra */
    }

    .container {
        flex-direction: column; /* Apilar columnas */
    }

    .sidebar {
        width: 100%;
        margin-bottom: 20px;
    }

    .main-content {
        width: 100%;
    }

    .rss-feed .article {
        flex-direction: column; /* Imagen encima del texto */
        text-align: center;
    }

    .rss-feed .article img {
        width: 100%; /* Imagen de ancho completo */
        height: auto;
        margin-bottom: 15px;
    }

    .rss-feed .article h4,
    .rss-feed .article p,
    .rss-feed .article .read-more-button {
        order: initial; /* Mantener el flujo natural */
    }

    /* Reestructurar el artículo en modo móvil */
    .rss-feed .article {
        flex-direction: column; /* Apilar los elementos */
        text-align: center;
    }

    .rss-feed .article img {
        width: 100%; /* Imagen de ancho completo en móvil */
        height: auto; /* Altura proporcional */
        margin-bottom: 15px; /* Espacio entre la imagen y el texto */
    }

    .rss-feed .article h4 {
        order: 2;  /* El título irá después de la imagen */
    }

    .rss-feed .article p {
        order: 3;  /* La descripción irá después del título */
    }

    .rss-feed .article .read-more-button {
        order: 4;  /* El botón de leer más irá al final */
        margin-top: 20px; /* Más espacio entre el resumen y el botón */
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 22px;
    }

    .button {
        padding: 8px 15px;
        font-size: 14px;
    }

    .rss-feed .article img {
        width: 100%;
        height: auto; /* Asegura que las imágenes también se ajusten */
    }
}

footer {
    text-align: center;
    margin-top: 50px;
    padding: 20px;
    background-color: #ffffff;
    color: #333333;
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
    width: 100%; /* Asegura que el footer ocupe todo el ancho */
    margin: 0; /* Elimina cualquier margen extra */
}

footer a {
    color: #db4109;
    text-decoration: none;
    margin: 0 15px;
}

footer a:hover {
    text-decoration: underline;
}

/* Estilos para el widget de Facebook */
.facebook-widget {
    width: 100%; /* Asegura que el contenedor tenga el 100% de ancho disponible */
    max-width: 100%; /* Limita el ancho máximo */
    padding: 10px 0; /* Puedes añadir algo de espaciado si lo deseas */
}

/* Para asegurarte de que el iframe se ajusta correctamente */
.facebook-widget iframe {
    width: 100% !important; /* Se asegura de que el iframe tenga 100% del contenedor */
    height: 600px; /* Mantiene la altura original del iframe */
}


/* Nuevo contenedor SEO agregado */
.container-seo {
    margin-top: 40px; /* Separación entre el contenedor principal y el contenedor SEO */
    max-width: 1200px; /* Mantiene el mismo ancho del contenedor principal */
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin-bottom: 40px; /* Añadido margen inferior para separarlo del footer */
}

/* Estilo para el contenido SEO */
.seo-content {
    width: 100%;
    padding: 20px;
}

/* Título SEO */
.seo-title {
    font-size: 30px;
    color: #000000;
    margin-bottom: 20px;
    font-weight: 700;
}

/* Texto SEO */
.seo-text {
    font-size: 18px;
    color: #000000;
    line-height: 1.6;
}

/* Estilo para enlaces dentro del contenido SEO */
.seo-text a {
    color: #db4109; /* Color del enlace */
    text-decoration: none; /* Sin subrayado */
    font-weight: 600; /* Peso para hacer el enlace más destacado */
    transition: color 0.3s ease; /* Transición para suavizar el cambio de color */
}

/* Efecto al pasar el cursor sobre el enlace */
.seo-text a:hover {
    color: #c33c00; /* Cambio de color al pasar el cursor */
    text-decoration: underline; /* Subrayado al pasar el cursor */
}