/* Sección Novedades — usa los colores de style.css (#009f95 / #007e76)
   Pensado primero para celular; los @media de abajo agrandan para tablet y computadora. */

/* Seguridad: ninguna imagen de la sección puede salirse de su caja */
.nov-listado img,
.nov-detalle img {
    max-width: 100%;
    height: auto;
}

/* ---------- Encabezado del listado ---------- */
.nov-encabezado {
    background: linear-gradient(135deg, #009f95, #007e76);
    color: #fff;
    padding: 36px 16px;
}
.nov-encabezado h1 {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 6px;
}
.nov-encabezado p {
    font-size: 17px;
    margin: 0;
    opacity: .92;
}

/* ---------- Tarjetas del listado ---------- */
.nov-card {
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
    transition: .3s;
}
.nov-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 35px rgba(0,0,0,.12);
}
/* La imagen se muestra ENTERA (sin recortar), sobre un fondo suave */
.nov-card-img {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: #eef6f5;
    overflow: hidden;
}
.nov-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.nov-sin-imagen {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}
.nov-sin-imagen img {
    width: 55%;
    height: auto;
    object-fit: contain;
    opacity: .6;
}
.nov-fecha {
    font-size: 14px;
    color: #868789;
    margin-bottom: 6px;
}
.nov-titulo {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 10px;
}
.nov-titulo a {
    color: #009f95;
    text-decoration: none;
}
.nov-titulo a:hover {
    color: #007e76;
}
.nov-resumen {
    color: #555;
    font-size: 16px;
    line-height: 1.55;
}

/* ---------- Paginación ---------- */
.nov-paginas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px 24px;
    margin-top: 10px;
    color: #666;
}
.nov-paginas a {
    color: #009f95;
    font-weight: 700;
    text-decoration: none;
}

/* ---------- Página de una novedad ---------- */
.nov-detalle {
    padding: 28px 0 40px;
}
.nov-detalle .container {
    max-width: 820px;
    padding-left: 16px;
    padding-right: 16px;
}
.nov-volver {
    color: #009f95;
    font-weight: 700;
    text-decoration: none;
}
.nov-detalle-titulo {
    color: #009f95;
    font-size: 25px;
    line-height: 1.25;
    font-weight: 700;
    margin: 6px 0 20px;
    overflow-wrap: break-word;
}

/* Imagen principal: entera, centrada y con alto máximo (las verticales no tapan el texto) */
.nov-portada {
    display: block;
    background: #f3f6f6;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 24px;
    cursor: zoom-in;
    overflow: hidden;
}
.nov-detalle-img {
    display: inline-block;
    max-width: 100%;
    max-height: 380px;
    width: auto;
    height: auto;
    vertical-align: middle;
}

.nov-detalle-texto p {
    font-size: 16px;
    line-height: 1.7;
    color: #333;
    overflow-wrap: break-word;
}
.nov-detalle-texto a {
    color: #009f95;
    word-break: break-word;
}

/* Galería: miniaturas cuadradas en grilla de 2 (celular), 3 (tablet) o 4 (computadora) columnas.
   La foto completa se ve al tocarla. */
.nov-galeria {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 24px 0;
}
.nov-galeria a {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: #e9f6f5;
    cursor: zoom-in;
}
.nov-galeria img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transition: transform .3s;
}
.nov-galeria a:hover img { transform: scale(1.05); }

.nov-compartir {
    margin-top: 32px;
    padding-top: 18px;
    border-top: 1px solid #ddd;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #666;
}
.nov-compartir span { font-weight: 400; }
.nov-compartir a {
    font-size: 30px;
    color: #009f95;
}

/* ---------- Visor de fotos (pantalla completa) ---------- */
.nov-visor {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0,0,0,.92);
    display: flex;
    align-items: center;
    justify-content: center;
}
.nov-visor[hidden] { display: none; }
.nov-visor img {
    max-width: 94vw;
    max-height: 80vh;
    border-radius: 6px;
}
.nov-visor button {
    position: absolute;
    background: rgba(0,0,0,.35);
    border: 0;
    border-radius: 50%;
    color: #fff;
    width: 48px;
    height: 48px;
    font-size: 36px;
    line-height: 44px;
    padding: 0;
    cursor: pointer;
}
.nov-visor-cerrar { top: 12px; right: 12px; }
.nov-visor-ant { left: 8px; top: 50%; transform: translateY(-50%); }
.nov-visor-sig { right: 8px; top: 50%; transform: translateY(-50%); }
.nov-visor-contador {
    position: absolute;
    bottom: 18px;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    font-size: 15px;
}

/* ---------- Tablet (576 px o más) ---------- */
@media (min-width: 576px) {
    .nov-galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .nov-detalle-img { max-height: 460px; }
}

/* ---------- Computadora (768 px o más) ---------- */
@media (min-width: 768px) {
    .nov-encabezado { padding: 50px 20px; }
    .nov-encabezado h1 { font-size: 38px; }
    .nov-encabezado p { font-size: 20px; }
    .nov-titulo { font-size: 20px; }
    .nov-detalle { padding: 40px 0 56px; }
    .nov-detalle-titulo { font-size: 34px; margin-bottom: 24px; }
    .nov-detalle-img { max-height: 520px; }
    .nov-detalle-texto p { font-size: 18px; }
    .nov-galeria { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .nov-visor img { max-width: 86vw; max-height: 85vh; }
    .nov-visor-ant { left: 20px; }
    .nov-visor-sig { right: 20px; }
}

/* ---------- Menú en celular: ícono igual que los demás ítems ---------- */
@media (max-width: 575.98px) {
    .icon-novedades::before {
        font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f1ea";
        font-size: 20px;
        color: #009f95;
        padding-right: 10px;
    }
}