/* =========================================
   Página de Noticias (Grilla y Paginación)
   ========================================= */

.page-noticias-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
}

/* La Grilla de 3 columnas */
.noticias-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px; /* Separación amplia como en el Figma */
    margin-bottom: 60px; /* Separación con la paginación */
}

/* Tarjeta de Noticia */
.noticia-card {
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.08); /* Sombra sutil para distinguir del fondo */
    overflow: hidden; /* Corta las esquinas de la imagen de arriba */
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.noticia-card:hover {
    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.15); /* Sombra más fuerte al pasar el mouse */
    transform: translateY(-3px); /* Levanta un poco la carta */
}

/* Imagen con Zoom */
.noticia-img-wrapper {
    height: 237px;
    overflow: hidden; /* Fundamental para que el zoom no se salga de la caja */
}

.noticia-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease; /* Transición suave del zoom */
}

.noticia-card:hover .noticia-img-wrapper img {
    transform: scale(1.08); /* El efecto de Zoom */
}

/* Contenido de Texto */
.noticia-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Estira el contenido para que los botones queden alineados abajo */
}

.noticia-fecha {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    color: #394049;
    margin-bottom: 12px;
    display: block;
}

.noticia-titulo {
    margin: 0 0 15px 0;
}

.noticia-titulo a {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    line-height: 25px;
    color: #00837A; 
    text-decoration: none;
    text-transform: uppercase; /* <-- Títulos siempre en mayúsculas */
    transition: color 0.3s;
}

.noticia-titulo a:hover {
    color: #00A499; /* Verde claro al hover */
}

.noticia-extracto {
    margin-bottom: 25px;
    flex-grow: 1;
    
    /* Aplicamos el truco de las 3 líneas al contenedor principal */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3; /* <-- Propiedad estándar añadida para quitar el warning */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.noticia-extracto p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;
    color: #394049;
    margin: 0;
    display: inline; /* Obliga a los párrafos a juntarse por si WordPress genera más de uno */
}

/* Botón Naranja Inferior */
.noticia-footer {
    display: flex;
    justify-content: center; /* Centra el botón */
}

.btn-seguir-leyendo {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 8px 24px;
    background: #FFFFFF;
    border: 1px solid #EA7600;
    border-radius: 10px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16px;
    color: #EA7600;
    text-decoration: none;
    transition: all 0.3s;
}

.btn-seguir-leyendo:hover {
    background: #EA7600;
    color: #FFFFFF;
}

/* =========================================
   Paginación (Botones 1, 2, 3...)
   ========================================= */
.noticias-paginacion {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.noticias-paginacion .page-numbers {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid #00A499;
    border-radius: 4px;
    color: #00A499;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s;
}

.noticias-paginacion .page-numbers.current,
.noticias-paginacion .page-numbers:hover {
    background: #00A499;
    color: #FFFFFF;
}

.noticias-paginacion .prev {
    border-color: #CFD0D2;
}
.noticias-paginacion .prev:hover {
    background: #CFD0D2;
    color: #FFFFFF;
}

/* --- Adaptabilidad (Móviles y Tablets) --- */
@media (max-width: 992px) {
    .noticias-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .noticias-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   Página Individual de Noticia (single.php)
   ========================================= */

.single-noticia-container {
    max-width: 1200px; 
    margin: 0 auto;
    padding: 40px 20px 80px 20px;
    text-align: left; /* <-- ESTO ARREGLA EL TEXTO DE LA NOTICIA */
}

.top-nav-noticia {
    margin-bottom: 40px;
    text-align: center; /* <-- Centra el botón horizontalmente */
}

.btn-volver-noticias {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #EA7600;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: opacity 0.3s;
}

.btn-volver-noticias:hover {
    opacity: 0.7;
}

/* Cabecera de la noticia */
.noticia-header {
    margin-bottom: 40px;
    text-align: center; /* Título y fecha centrados */
}

.noticia-main-titulo {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 32px;
    color: #00837A;
    text-transform: uppercase;
    margin-bottom: 15px;
    line-height: 1.2;
}

.noticia-meta {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 15px;
    color: #757575;
}

/* Imagen Flotando a la Izquierda */
.noticia-imagen-destacada {
    float: left; /* Empuja la imagen a la izquierda y el texto la envuelve */
    width: 450px; /* Tamaño máximo de la imagen */
    max-width: 100%;
    margin: 0 40px 20px 0; /* Margen a la derecha y abajo para separar del texto */
    border-radius: 15px;
    overflow: hidden;
}

.noticia-imagen-destacada img {
    width: 100%;
    height: auto;
    display: block;
}

/* El cuerpo del texto */
.noticia-contenido-texto {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.7; 
    color: #394049;
}

.noticia-contenido-texto p {
    margin-bottom: 25px;
}
/* =========================================
   Estilos Nativos del Editor (Colores, Alineación y Listas)
   ========================================= */

/* Enlaces naranjas */
.noticia-contenido-texto a {
    color: #EA7600;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.3s;
}
.noticia-contenido-texto a:hover {
    text-decoration: underline;
}

/* Correos Verdes (!important para que le gane al naranja) */
.noticia-contenido-texto a[href^="mailto:"] {
    color: #00A499 !important;
}

/* Soporte para las alineaciones del editor de WordPress */
.noticia-contenido-texto .has-text-align-center { text-align: center; }
.noticia-contenido-texto .has-text-align-right { text-align: right; }
.noticia-contenido-texto .has-text-align-left { text-align: left; }
.noticia-contenido-texto .has-text-align-justify { text-align: justify; }

/* Estilos elegantes para las listas (Guiones y Números) */
.noticia-contenido-texto ul,
.noticia-contenido-texto ol {
    margin-left: 20px;
    margin-bottom: 25px;
    padding-left: 20px;
}

.noticia-contenido-texto ul {
    list-style-type: disc; /* Puntitos redondos */
}

.noticia-contenido-texto ol {
    list-style-type: decimal; /* Números */
}

.noticia-contenido-texto li {
    margin-bottom: 10px;
    line-height: 1.7;
}

/* Limpiar los flotantes al final para que no se rompa el diseño */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* --- Adaptabilidad (Móviles y Tablets) --- */
@media (max-width: 992px) {
    .noticias-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Adaptabilidad Móvil para la imagen flotante */
@media (max-width: 768px) {
    .noticia-imagen-destacada {
        float: none; /* En celulares quitamos el flote */
        width: 100%;
        margin: 0 0 30px 0; /* Solo margen abajo */
    }
}

@media (max-width: 768px) {
    .noticias-grid {
        grid-template-columns: 1fr;
    }
    
    /* Regla de seguridad: Oculta forzosamente la paginación en móviles */
    .noticias-paginacion {
        display: none !important;
    }
}