/*
 * Nuriplast — noticias y eventos, y cada noticia. Va encima de paginas.css.
 * Como el blog de la web actual: los temas en una fila centrada, las noticias en rejilla con la
 * foto de esquinas redondeadas y, en la noticia, la columna de la derecha.
 */

/* ═══ Temas ══════════════════════════════════════════════════════════════════════════ */
.filtros {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.8rem;
    margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}
.filtro {
    position: relative;
    display: inline-flex; align-items: baseline; gap: .35rem;
    padding: .55rem 0;
    font-size: .88rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
    color: var(--tinta-2);
    transition: color .3s ease;
}
.filtro::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--verde);
    transform: scaleX(0); transform-origin: left;
    transition: transform .45s var(--curva);
}
.filtro:hover { color: var(--negro); }
.filtro:hover::after, .filtro--activo::after { transform: scaleX(1); }
.filtro--activo { color: var(--negro); }
.filtro b { font-size: .72rem; font-weight: 600; letter-spacing: 1px; color: var(--tinta-3); }

/* ═══ Rejilla ════════════════════════════════════════════════════════════════════════ */
.noticias-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 4vw, 3.5rem) 40px; }
@media (min-width: 700px) { .noticias-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .noticias-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.noticia-enlace { display: block; height: 100%; }
.noticia-foto {
    position: relative;
    aspect-ratio: 3 / 2;
    border-radius: var(--radio-m);
    overflow: hidden;
    background: var(--gris-tarjeta);
    transition: transform .6s var(--curva), box-shadow .6s var(--curva);
}
.noticia-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--curva); }
.noticia-enlace:hover .noticia-foto { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(2, 2, 2, .55); }
.noticia-enlace:hover .noticia-foto img { transform: scale(1.05); }
.noticia-tema {
    position: absolute; left: 16px; top: 16px;
    padding: .45rem .9rem;
    border-radius: var(--pildora);
    background: rgba(24, 24, 24, .55);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    color: var(--blanco);
    font-size: .68rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
}
.noticia-texto { padding: 1.4rem .3rem 0; }
.noticia-fecha {
    display: flex; align-items: center; gap: .5rem;
    margin: 0 0 .7rem;
    font-size: .76rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
    color: var(--tinta-3);
}
.noticia-fecha svg { width: 16px; height: 16px; flex: none; color: var(--verde-hondo); }
.noticia-titulo { margin: 0 0 .7rem; font-size: clamp(1.3rem, 1.15rem + .55vw, 1.75rem); line-height: 1.25; transition: color .3s ease; }
.noticia-enlace:hover .noticia-titulo { color: #56752F; }
.noticia-resumen {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    overflow: hidden;
    margin: 0 0 1.2rem; color: #666; font-size: .95rem; line-height: 1.6;
}
/* La primera noticia va a lo ancho, con la foto a un lado */
@media (min-width: 1100px) {
    .noticia--grande { grid-column: 1 / -1; }
    .noticia--grande .noticia-enlace { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 50px; align-items: center; }
    .noticia--grande .noticia-foto { aspect-ratio: 16 / 10; }
    .noticia--grande .noticia-texto { padding: 0; }
    .noticia--grande .noticia-titulo { font-size: clamp(1.8rem, 1.2rem + 1.5vw, 2.8rem); line-height: 1.15; }
    .noticia--grande .noticia-resumen { -webkit-line-clamp: 5; font-size: 1.02rem; }
}

/* ═══ Paginación ═════════════════════════════════════════════════════════════════════ */
.paginacion {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem 1.4rem;
    margin-top: clamp(3rem, 6vw, 4.5rem);
}
.paginacion-boton {
    display: inline-flex; align-items: center;
    padding: .8rem 1.4rem;
    border-radius: var(--pildora);
    box-shadow: inset 0 0 0 1.5px var(--verde);
    font-size: .82rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: #56752F;
    transition: background-color .3s ease, color .3s ease;
}
a.paginacion-boton:hover { background: var(--verde); color: var(--negro); }
.paginacion-boton--apagado { opacity: .35; }
.paginacion-cuenta { font-size: .8rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tinta-3); }

/* ═══ Noticia ════════════════════════════════════════════════════════════════════════ */
.entrada-articulo { min-width: 0; }
.entrada-portada { margin: 0 0 clamp(2rem, 4vw, 3rem); }
.entrada-foto { aspect-ratio: 16 / 9; }
.entrada-portada figcaption { margin: .7rem 0 0 .4rem; font-size: .8rem; color: var(--tinta-3); }
.entrada-resumen {
    margin: 0 0 2rem;
    font-family: var(--f-titular); font-size: clamp(1.25rem, 1.1rem + .7vw, 1.75rem); line-height: 1.4;
    font-weight: 300; letter-spacing: -.5px;
    color: var(--tinta);
}
.entrada-cuerpo { font-size: 1.08rem; line-height: 1.75; }
.entrada-cuerpo p { margin-bottom: 1.3em; }
.entrada-cuerpo .bl-figura { margin: 2.2rem 0; }
.entrada-cuerpo .bl-figura img { width: 100%; height: auto; border-radius: var(--radio-m); }
.entrada-cuerpo .bl-figura figcaption { margin: .6rem 0 0 .4rem; font-size: .82rem; color: var(--tinta-3); }

.etiquetas { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 2.6rem 0 0; padding: 0; }
.etiquetas li {
    padding: .45rem .95rem;
    border-radius: var(--pildora);
    background: var(--gris-tarjeta);
    font-size: .8rem; font-weight: 600; color: var(--tinta-2);
}
.fuentes { margin-top: 2.6rem; padding-top: 1.8rem; border-top: 1px solid var(--linea); }
.fuentes h2 { margin: 0 0 .9rem; font-family: var(--f-cuerpo); font-size: .78rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--tinta-3); }
.fuentes ul { list-style: none; display: grid; gap: .55rem; margin: 0; padding: 0; font-size: .92rem; }
.fuentes a { color: #56752F; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.entrada-volver { margin: 3rem 0 0; }
.enlace-flecha--atras svg { transform: rotate(180deg); }
.lateral-fichas--noticias span { text-transform: none; font-size: .92rem; font-weight: 600; }