/* Variables de colores */

:root {
    --colorpri: #000000;
    --colorsec: #ff0900;
    --gris: #333333;
    --background: #f5f5f5;
    --white: #ffffff;
    --shadow: rgba(0, 0, 0, 0.1);
}

@font-face {
    font-family: 'Hurin';
    src: url('../fonts/hurin-regular.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TT';
    src: url('../fonts/TT-Firs-Text-Trial-Normal-BF668e70f683494.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Aplicar la fuente TT globalmente */
body {
    font-family: 'TT', sans-serif;
    padding: 0;
    background-color: var(--background);
    font-size: 14px; /* Tamaño base ligeramente más pequeño */
}

/* Aplicar la fuente Hurin a los títulos */
h1, h2, h3, h4, h5, h6, .news-box.full-content h2 {
    font-family: 'Hurin', sans-serif;
    font-style: normal;
    font-weight: normal;
    color: var(--colorsec);
    padding:10px;
    margin:0;
}

h1 {
    font-size: 1.7rem; /* Tamaño de título ligeramente reducido */
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.3rem;
}

h4 {
    font-size: 1.1rem;
}

h5 {
    font-size: 0.95rem;
}

h6 {
    font-size: 0.95rem;
}

/* Header */
header {
    background-color: var(--colorpri);
    padding: 0px 20px; /* Padding ligeramente reducido */
    text-align: center;
    color: var(--white);
    box-shadow: 0 4px 6px var(--shadow);
}

a {
    text-decoration: none; /* Elimina el subrayado predeterminado */
    color: inherit; /* Toma el color del contenedor o el color que desees */
}

a:hover {
    text-decoration: underline; /* Subraya al pasar el cursor */
    text-decoration-color: var(--colorsec); /* Cambia el color del subrayado */
}



.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Estilos para móviles */
@media (max-width: 768px) {
    .header-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;  /* Reducción del espacio entre los elementos */
    }

    .socials {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin-top: 10px;
    }
}

.logo{
    margin-top: 5px;
    height: 100px;
}

.logo1{
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Asegurar que la imagen del logo sea responsiva */
.logo img {
    max-width: 100%;
    height: 100px;
}

/* Asegurar que la imagen del logo sea responsiva */
.logo1 img {
    max-width: 100%;
    height: auto;
}

/* Noticia destacada */
.datos{
    display:flex;
}

.highlighted-news {
    display: flex;
    justify-content: flex-start;
    padding: 20px 20px 10px 20px; /* Padding ligeramente reducido */
    gap: 20px; /* Espacio entre la noticia principal y el cuadro publicitario */
}

.news-box.large {
    width: 64%;
    padding: 5px; /* Padding ligeramente reducido */
    background-color: var(--white);
    border-radius: 20px;
    box-shadow: 0 4px 8px var(--shadow);
    text-align: center;
    transition: transform 0.2s;
}

.news-box.large:hover {
    transform: scale(1.02);
}

.news-box.large img {

    max-width: 600px; /* Limitar el ancho máximo a 600 píxeles */
    max-height: 300px; /* Limitar la altura máxima a 400 píxeles */
    width: 100%; /* Asegura que no exceda el tamaño del contenedor */
    height: auto; /* Mantiene la proporción original de la imagen */
    object-fit: contain;
    border-radius: 20px;
    margin: 0 auto;
    margin-top: 10px; /* Añadir un margen arriba de la imagen */
}

/* Estilo para el cuadro publicitario */
.ad-box {
    width: 32%; /* Ocupa el espacio restante */
    padding: 20px;
    background-color: var(--white);
    border-radius: 20px;
    box-shadow: 0 4px 8px var(--shadow);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.ad-box h3 {
    font-size: 1.5rem;
    color: var(--colorsec);
    margin-bottom: 10px;
}

.ad-box p {
    font-size: 1.1rem;
    color: var(--gris);
}

.ad-box:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 12px var(--shadow);
}


.author {
    font-size: 10px;
    color: var(--colorpri);
    font-weight: bold;
    margin: 10px 10px 1px;
}

.news-box .date {
    color: var(--colorpri);
    font-weight: bold;
    font-size: 17px;
    margin: 12px 0;
}

.read-more {
    background-color: var(--colorsec);
    color: var(--white);
    padding: 12px 25px; /* Padding ligeramente reducido */
    border: none;
    border-radius: 12px;
    cursor: pointer;
    margin-top: 12px;
    transition: background-color 0.3s;
}

.read-more:hover {
    background-color: #e60000;
}

/* Otras noticias */
.other-news .news-row {
    display: flex;
    justify-content: space-around;
    gap: 25px;
    padding: 10px;
}

.news-box.small {
    width: 30%;
    padding: 18px;
    background-color: var(--white);
    border-radius: 20px;
    box-shadow: 0 4px 8px var(--shadow);
    text-align: center;
    transition: transform 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.news-box.small img {
    width: 100%; /* Asegura que la imagen no se salga del contenedor */
    max-width: 300px; /* Aumentamos el tamaño máximo de la imagen */
    max-height: 200px; /* Aumentamos la altura máxima */
    object-fit: cover; /* Asegura que la imagen cubra el contenedor sin deformarse */
    border-radius: 12px;
    margin-bottom: 10px; /* Espacio adicional debajo de la imagen */
}


.news-box.small:hover {
    transform: scale(1.02);
}

footer {
    background-color: var(--colorpri);
    color: var(--white);
    padding: 18px;
    text-align: center;
}

/* Ajustes para los iconos sociales */
.socials {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 10px;
}

.social-icon {
    background-color: var(--white);
    color: var(--colorpri);
    padding: 12px; /* Asegura un padding consistente */
    text-decoration: none;
    font-weight: bold;
    font-size: 1.5rem; /* Controla el tamaño del icono */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, transform 0.3s;
    width: 30px;  /* Ancho fijo para la caja */
    height: 30px; /* Altura fija para la caja */
}

.social-icon i {
    font-size: 1.5rem; /* Asegura que los iconos tengan un tamaño consistente */
}

.social-icon:hover {
    background-color: var(--colorsec);
    color: var(--white);
    transform: scale(1.1); /* Efecto hover para hacer el icono más grande */
}

/* Media Queries para Tablets y Móviles */
@media (max-width: 768px) {
    .news-box.large img, .news-box.small img {
        width: 100%;
        height: auto;
    }

    .news-box.small {
        width: 45%;
    }

    .other-news .news-row {
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .news-box.large img, .news-box.small img {
        width: 100%;
        height: auto;
    }

    .news-box.large, .news-box.small {
        width: 100%;
        padding: 16px; /* Padding ligeramente reducido */
    }

    .socials {
        flex-direction: row;
        gap: 12px;
    }
}

/* Página "Leer Más" */
.news-content {
    display: flex;
    justify-content: center;
    padding: 20px; /* Padding ligeramente reducido */
}

.content {
    text-align: justify;
}

.content1 {
    color: var(--gris);
    font-size: 17.6px;
}

.news-box.full-content {
    width: 80%;
    max-width: 800px;
    padding: 20px; /* Padding ligeramente reducido */
    background-color: var(--white);
    border-radius: 20px;
    box-shadow: 0 4px 8px var(--shadow);
    transition: transform 0.2s;
}

.news-box.full-content h2 {
    font-size: 1.9rem; /* Título ligeramente reducido */
    margin-top: 0;
}

.news-box.full-content img {
    width: 100%;
    height: auto;
    margin: 20px 0;
    border-radius: 15px;
}

.news-box.full-content .date {
    margin-bottom: 20px;
}

.news-box.full-content .content {
    font-size: 1.1rem; /* Tamaño de texto ligeramente reducido */
    line-height: 1.7;
    color: var(--gris);
}

/* Media Queries para hacer el contenido responsivo */
@media (max-width: 768px) {
    .news-box.full-content {
        width: 90%;
    }
}

@media (max-width: 480px) {
    .news-box.full-content {
        width: 100%;
        padding: 16px;
    }

    .news-box.full-content h2 {
        font-size: 1.7rem;
    }

    .news-box.full-content .content {
        font-size: 1rem;
    }
}


/* Ajuste para pantallas más pequeñas */
@media (max-width: 768px) {
    .highlighted-news {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .news-box.large {
        width: 100%;
    }

    .ad-box {
        display: none; /* Ocultar el cuadro publicitario */
    }
}

@media (max-width: 480px) {
    .news-box.large {
        padding: 16px; /* Padding reducido para pantallas muy pequeñas */
    }
}

/* Estilo para el cuadro publicitario */
.ad-box-leermas {
    width: 80%;
    /*max-width: 800px;*/
    padding: 20px;
    background-color: var(--white);
    border-radius: 20px;
    box-shadow: 0 4px 8px var(--shadow);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s, box-shadow 0.2s;
    margin: 0 auto;
    margin-bottom: 20px; /* Añadido margen en la parte inferior */
}


.ad-box-leermas h3 {
    font-size: 1.5rem;
    color: var(--colorsec);
    margin-bottom: 10px;
}

.ad-box-leermas p {
    font-size: 1.1rem;
    color: var(--gris);
}

.ad-box-leermas:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 12px var(--shadow);
}

/* Estilo para las categorías */
.categorias{
    background-color: #ff0900;
}
.categories {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; /* Permite que las categorías se adapten en pantallas grandes */
    text-align: center; /* Centrar las categorías */
}

.category {
    font-size: 1.5rem;
    color: var(--white);
    text-decoration: none;
    font-weight: bold;
    padding: 5px 10px;
    transition: background-color 0.3s;
    display: inline-block; /* Asegura que los enlaces se muestren en una línea */
}

/* Efecto hover para las categorías */
.category:hover {
    background-color: var(--colorsec);
    border-radius: 5px;
}

/* Estilo para pantallas pequeñas */
@media (max-width: 768px) {
    .categories {
        display: flex;
        flex-direction: column; /* Cambiar de fila a columna */
        align-items: center; /* Centra las categorías */
        gap: 10px; /* Espacio entre las categorías */
        padding-left: 0; /* Elimina margen izquierdo */
        max-height: 300px; /* Limita la altura de la barra lateral */
        overflow-y: auto; /* Agrega desplazamiento si hay más de 5 categorías */
        width: 200px; /* Ancho fijo para la barra lateral */
        margin: 0 auto; /* Centra la barra lateral */
    }

    .category {
        font-size: 1.2rem; /* Ajusta tamaño de texto */
        width: 80%; /* Las categorías ocupan todo el ancho */
        text-align: center; /* Alinea texto a la izquierda */
        padding: 8px 15px; /* Ajusta el padding */
    }

    /* Mostrar solo las primeras 5 categorías */
    .categories .category:nth-child(n+6) {
        display: none; /* Oculta las categorías a partir de la 6ta */
    }

    /* Asegurarse de que al menos 5 categorías sean visibles */
    .categories .category:nth-child(-n+5) {
        display: inline-block; /* Muestra las primeras 5 categorías */
    }
}


.btn-categorias{
    display:none;
}