/*
 * Novedades — diseño moderno
 * Complementa estilo-moderno.css
 *
 * Colores principales:
 * #35845d
 * #ffffff
 */


/* =========================================
   CONTENEDOR GENERAL
   ========================================= */

.novedades-pagina {
    padding-bottom: 70px;
}


/* =========================================
   HERO
   ========================================= */

.novedades-hero {
    width: min(1000px, 100%);
    margin: 0 auto;

    padding: 55px 20px 42px;

    text-align: center;
}

.novedades-hero__eyebrow {
    display: inline-block;

    margin-bottom: 9px;

    color: #35845d;

    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.novedades-hero__titulo {
    margin: 0;

    color: #222;

    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
}

.novedades-hero__descripcion {
    max-width: 650px;

    margin: 14px auto 0;

    color: #666;

    font-size: 1rem;
    line-height: 1.65;
}


/* =========================================
   LISTADO
   ========================================= */

.novedades-lista {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 25px;

    width: min(1100px, 100%);
    margin: 0 auto;

    padding: 0 20px;
}


/* =========================================
   TARJETA
   ========================================= */

.novedad-card {
    display: flex;
    flex-direction: column;

    overflow: hidden;

    padding: 0;

    background: #fff;

    border: 1px solid #e5e5e5;
    border-radius: 14px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.novedad-card:hover {
    transform: translateY(-5px);

    border-color: rgba(53, 132, 93, 0.3);

    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.08);
}


/* =========================================
   IMAGEN
   ========================================= */

.novedad-card__imagen {
    display: block;

    width: 100%;

    overflow: hidden;

    background: #f3f3f3;
}

.novedad-card__imagen img {
    display: block;

    width: 100%;
    height: 220px;

    object-fit: cover;

    transition:
        transform 0.4s ease;
}

.novedad-card:hover
.novedad-card__imagen img {
    transform: scale(1.04);
}


/* =========================================
   CONTENIDO
   ========================================= */

.novedad-card__texto {
    display: flex;
    flex-direction: column;

    flex-grow: 1;

    padding: 22px;
}


/* =========================================
   FECHA
   ========================================= */

.novedad-card__fecha {
    display: block;

    margin-bottom: 9px;

    color: #35845d;

    font-size: 0.82rem;
    font-weight: 600;
}


/* =========================================
   TÍTULO
   ========================================= */

.novedad-card__titulo {
    margin: 0 0 12px;

    font-size: 1.25rem;
    line-height: 1.35;
}

.novedad-card__titulo a {
    color: #222;

    text-decoration: none;

    transition:
        color 0.2s ease;
}

.novedad-card__titulo a:hover {
    color: #35845d;
}


/* =========================================
   EXTRACTO
   ========================================= */

.novedad-card__extracto {
    display: -webkit-box;

    margin: 0 0 20px;

    overflow: hidden;

    color: #666;

    font-size: 0.94rem;
    line-height: 1.65;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}


/* =========================================
   LEER MÁS
   ========================================= */

.novedad-card__mas {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    width: fit-content;

    margin-top: auto;

    color: #35845d;

    font-size: 0.92rem;
    font-weight: 700;

    text-decoration: none;
}

.novedad-card__mas:hover {
    text-decoration: none;
}

.novedad-card__mas::after {
    content: "→";

    transition:
        transform 0.2s ease;
}

.novedad-card__mas:hover::after {
    transform: translateX(4px);
}


/* =========================================
   PAGINACIÓN
   ========================================= */

.novedades-paginacion {
    display: flex;

    flex-wrap: wrap;

    align-items: center;
    justify-content: center;

    gap: 15px;

    width: min(1100px, 100%);

    margin: 42px auto 0;

    padding: 0 20px;
}


/* =========================================
   BOTONES PAGINACIÓN
   ========================================= */

.btn-mostrar-mas {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 46px;

    padding: 0 20px;

    background: #35845d;

    border: 2px solid #35845d;
    border-radius: 9px;

    color: #fff;

    font-size: 0.92rem;
    font-weight: 600;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.btn-mostrar-mas:hover {
    background: #fff;

    color: #35845d;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(53, 132, 93, 0.15);
}


/* =========================================
   ESTADO DE PAGINACIÓN
   ========================================= */

.novedades-paginacion__estado {
    color: #777;

    font-size: 0.9rem;
    font-weight: 500;
}


/* =========================================
   SIN NOVEDADES
   ========================================= */

.novedades-pagina .mensaje.info {
    width: min(700px, calc(100% - 40px));

    margin: 0 auto;

    padding: 25px;

    background: #f7f9f8;

    border: 1px solid #e5ece8;
    border-radius: 12px;

    color: #666;

    text-align: center;
}


/* =========================================
   ACCESIBILIDAD
   ========================================= */

.novedad-card a:focus-visible,
.btn-mostrar-mas:focus-visible {
    outline: 3px solid #35845d;

    outline-offset: 3px;
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 750px) {

    .novedades-lista {
        grid-template-columns: 1fr;
    }

    .novedad-card__imagen img {
        height: 240px;
    }

}


@media (max-width: 600px) {

    .novedades-hero {
        padding:
            40px 16px
            32px;
    }

    .novedades-lista {
        padding: 0 16px;

        gap: 20px;
    }

    .novedad-card__texto {
        padding: 19px;
    }

    .novedad-card__imagen img {
        height: 210px;
    }

    .novedades-paginacion {
        flex-direction: column;

        padding: 0 16px;
    }

    .btn-mostrar-mas {
        width: 100%;
    }
   
}
/* =========================================
   PÁGINA DE DETALLE DE NOVEDAD
   ========================================= */

.novedad-pagina {
    padding-bottom: 80px;
}

.novedad-contenedor {
    width: min(900px, 100%);

    margin: 0 auto;

    padding:
        40px 20px
        0;
}


/* =========================================
   VOLVER
   ========================================= */

.novedad-volver {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 28px;

    color: #35845d;

    font-size: 0.92rem;
    font-weight: 600;

    text-decoration: none;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.novedad-volver span {
    font-size: 1.1rem;

    transition:
        transform 0.2s ease;
}

.novedad-volver:hover {
    color: #286947;
}

.novedad-volver:hover span {
    transform: translateX(-4px);
}


/* =========================================
   ARTÍCULO
   ========================================= */

.novedad-detalle {
    overflow: hidden;

    background: #fff;

    border: 1px solid #e5e5e5;
    border-radius: 16px;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.05);
}


/* =========================================
   CABECERA
   ========================================= */

.novedad-detalle__cabecera {
    padding:
        30px 38px
        0;
}

.novedad-detalle__fecha {
    display: inline-block;

    color: #35845d;

    font-size: 0.85rem;
    font-weight: 600;
}


/* =========================================
   CUERPO
   ========================================= */

.novedad-cuerpo {
    max-width: none;

    padding:
        0 38px
        38px;

    color: #333;

    font-size: 1rem;
    line-height: 1.75;
}


/* Títulos creados desde el editor */

.novedad-cuerpo h2,
.novedad-cuerpo h3 {
    color: #222;

    line-height: 1.3;
}

.novedad-cuerpo h2 {
    margin-top: 2rem;

    font-size: clamp(
        1.55rem,
        3vw,
        2.05rem
    );
}

.novedad-cuerpo h3 {
    margin-top: 1.6rem;

    font-size: 1.3rem;
}


/* Primer elemento */

.novedad-cuerpo > :first-child {
    margin-top: 0;
}


/* Párrafos */

.novedad-cuerpo p {
    margin:
        0 0 1rem;
}


/* Listas */

.novedad-cuerpo ul,
.novedad-cuerpo ol {
    margin:
        1rem 0;

    padding-left: 1.5rem;
}

.novedad-cuerpo li + li {
    margin-top: 0.4rem;
}


/* Imágenes */

.novedad-cuerpo img {
    display: block;

    width: auto;
    max-width: 100%;
    height: auto;

    margin:
        2rem auto;

    border-radius: 10px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.08);
}


/* Citas */

.novedad-cuerpo blockquote {
    margin:
        1.5rem 0;

    padding:
        14px 20px;

    border-left:
        4px solid #35845d;

    background:
        #f3f8f5;

    border-radius:
        0 8px 8px 0;

    color: #666;
}


/* =========================================
   NAVEGACIÓN ENTRE NOVEDADES
   ========================================= */

.novedad-navegacion {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;

    margin-top: 25px;
}


/* =========================================
   ENLACES ANTERIOR / SIGUIENTE
   ========================================= */

.novedad-navegacion__item {
    display: flex;

    flex-direction: column;

    min-width: 0;

    padding: 18px 20px;

    background: #fff;

    border:
        1px solid #e5e5e5;

    border-radius: 10px;

    color: #222;

    text-decoration: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.novedad-navegacion__item:hover {
    border-color:
        rgba(53, 132, 93, 0.35);

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.06);

    transform: translateY(-2px);
}


/* Alineación del siguiente */

.novedad-navegacion__item--siguiente {
    text-align: right;
}


/* =========================================
   TEXTOS DE NAVEGACIÓN
   ========================================= */

.novedad-navegacion__label {
    margin-bottom: 6px;

    color: #35845d;

    font-size: 0.76rem;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.novedad-navegacion__titulo {
    overflow: hidden;

    color: #333;

    font-size: 0.92rem;
    font-weight: 600;

    line-height: 1.4;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}


/* =========================================
   ERROR
   ========================================= */

.novedad-error {
    width: min(700px, calc(100% - 40px));

    margin:
        60px auto;

    padding: 35px;

    background: #fff;

    border:
        1px solid #e5e5e5;

    border-radius: 14px;

    text-align: center;
}

.novedad-error__volver {
    display: inline-flex;

    margin-top: 20px;

    color: #35845d;

    font-weight: 600;

    text-decoration: none;
}

.novedad-error__volver:hover {
    text-decoration: underline;
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 650px) {

    .novedad-contenedor {
        padding:
            30px 16px
            0;
    }

    .novedad-detalle {
        border-radius: 12px;
    }

    .novedad-detalle__cabecera {
        padding:
            24px 22px
            0;
    }

    .novedad-cuerpo {
        padding:
            0 22px
            28px;
    }

    .novedad-navegacion {
        grid-template-columns: 1fr;
    }

    .novedad-navegacion__item--siguiente {
        text-align: left;
    }

}