/* Solo diferencias de detalle_noticia; componentes compartidos en primera_plana.css. */

    /* ===== VARIABLES GLOBALES (heredadas del tema principal) ===== */
    :root {
        --color-primario: #007bff;
        --color-primario-oscuro: #0056b3;
        --color-primario-claro: #4da3ff;
        --color-secundario: #00c4b4;
        --color-acento: #28a745;

        --color-texto: #333333;
        --color-texto-claro: #666666;

        --color-fondo: #ffffff;
        --color-fondo-claro: #f8f9fa;
        --color-borde: #e0e0e0;

        --sombra-suave: 0 4px 12px rgba(0, 0, 0, .08);
        --sombra-media: 0 8px 24px rgba(0, 0, 0, .12);
        --sombra-fuerte: 0 16px 32px rgba(0, 0, 0, .16);

        --trans-rapida: all .2s cubic-bezier(.4, 0, .2, 1);
        --trans-media: all .3s cubic-bezier(.4, 0, .2, 1);
        --trans-lenta: all .5s cubic-bezier(.4, 0, .2, 1);

        --radio-borde: 8px;
        --radio-borde-grande: 12px;
    }


    /* ====================================================
       IMAGEN PRINCIPAL (POSTER) + FONDO BONITO SI NO HAY
       ==================================================== */
    .periodico_portada .periodico_contenedor-imagen {
        width: 100%;
        max-width: 520px;
        margin: 0 auto 0px auto;

        /* poster bonito (ajústalo si quieres) */
        aspect-ratio: 9 / 10;

        overflow: hidden;
        border-radius: var(--radio-borde-grande);
        position: relative;
        box-shadow: var(--sombra-media);

        /* fondo bonito por defecto (sirve incluso cuando sí hay img, debajo) */
        background: radial-gradient(1200px circle at 20% 20%, rgba(0, 196, 180, .35), transparent 55%),
        radial-gradient(900px circle at 80% 30%, rgba(0, 123, 255, .35), transparent 55%),
        linear-gradient(135deg, #0f172a, #111827);
    }


    /* Si todavía existe la clase vieja en HTML, la dejamos compatible */
    .periodico_leer-mas {
        width: 100%;
        height: 36px;
        /* 🔥 mismo tamaño */
        padding: 0 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--color-primario), var(--color-secundario));
        color: #fff;
        text-decoration: none;
        border-radius: 18px;
        font-size: .82rem;
        font-weight: 800;
    }


    /* ===== ESTILOS PARA DETALLE DE NOTICIA ===== */
    .periodico_detalle {
        background: var(--color-fondo);
        border: 1px solid rgba(0, 0, 0, .06);
        border-radius: var(--radio-borde-grande);
        box-shadow: var(--sombra-media);
        padding: 28px;
    }


    /* Chips de categoría (reusa estética del sitio) */
    .periodico_detalle .periodico_detalle-categorias {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 14px;
    }


    .periodico_detalle .periodico_detalle-categoria {
        display: inline-flex;
        align-items: center;
        padding: 7px 16px;
        border-radius: 999px;
        font-weight: 800;
        font-size: .9rem;
        text-decoration: none;
        color: var(--color-primario);
        border: 1px solid rgba(0, 123, 255, .25);
        background: rgba(0, 123, 255, .06);
        transition: var(--trans-rapida);
    }


    .periodico_detalle .periodico_detalle-categoria:hover {
        background: linear-gradient(135deg, var(--color-primario), var(--color-secundario));
        color: #fff;
        transform: translateY(-2px);
        border-color: transparent;
    }


    /* Subtitulo */
    .periodico_detalle .periodico_detalle-subtitulo {
        margin: 14px 0 12px;
        font-weight: 800;
        color: var(--color-primario-oscuro);
    }


    /* Imagen principal: REUSO correcto de clases */
    .periodico_detalle .periodico_contenedor-imagen {
        width: 100%;
        max-width: 980px;
        margin: 16px auto 10px;
        overflow: hidden;
        border-radius: var(--radio-borde-grande);
        box-shadow: var(--sombra-suave);
        border: 1px solid rgba(0, 0, 0, .06);
        background: #0f172a;
    }


    .periodico_detalle img.periodico_imagen-portada {
        width: 100%;
        height: auto;
        display: block;
        max-height: 520px;
        object-fit: cover;
    }


    /* ===== MEJORAS PARA CITAS DE IMÁGENES ===== */
    /* Contenedor de cita de imagen */
    .periodico_imagen-cita {
        margin-top: 8px;
        padding: 12px 16px;
        background: linear-gradient(135deg, rgba(0, 123, 255, 0.03), rgba(0, 196, 180, 0.03));
        border-left: 4px solid var(--color-primario);
        border-radius: 0 var(--radio-borde) var(--radio-borde) 0;
        font-size: 0.9rem;
        color: var(--color-texto-claro);
        display: flex;
        align-items: flex-start;
        gap: 12px;
        box-shadow: var(--sombra-suave);
    }


    .periodico_imagen-cita i {
        color: var(--color-primario);
        font-size: 1.2rem;
        margin-top: 2px;
    }


    .periodico_imagen-cita-contenido {
        flex: 1;
    }


    .periodico_imagen-cita-autor {
        font-weight: 800;
        color: var(--color-primario);
        display: inline-block;
        margin-right: 8px;
    }


    .periodico_imagen-cita-fecha {
        font-size: 0.85rem;
        color: var(--color-texto-claro);
        display: inline-block;
    }


    .periodico_imagen-cita-descripcion {
        margin-top: 4px;
        font-style: italic;
        line-height: 1.5;
    }


    /* Versión compacta para cards */
    .periodico_imagen-cita-compacta {
        font-size: 0.8rem;
        padding: 6px 12px;
        background: rgba(0, 0, 0, 0.02);
        border-radius: var(--radio-borde);
        color: var(--color-texto-claro);
        display: flex;
        align-items: center;
        gap: 6px;
    }


    .periodico_imagen-cita-compacta i {
        color: var(--color-primario-claro);
        font-size: 0.9rem;
    }


    /* Meta imagen (autor/fecha) - MEJORADO */
    .periodico_detalle .img-meta-columna-centro {
        margin-top: 12px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding: 16px;
        border-radius: var(--radio-borde);
        background: linear-gradient(135deg, var(--color-fondo-claro), #ffffff);
        border: 1px solid var(--color-borde);
        box-shadow: var(--sombra-suave);
    }


    .periodico_detalle .img-meta-columna-centro:hover {
        border-color: var(--color-primario-claro);
        box-shadow: var(--sombra-media);
    }


    .periodico_detalle .img-meta-label {
        font-size: .75rem;
        color: var(--color-texto-claro);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }


    .periodico_detalle .img-meta-value {
        font-size: 1rem;
        font-weight: 800;
        color: var(--color-primario);
        display: block;
        margin-top: 2px;
    }


    /* Nota imagen - MEJORADA */
    .periodico_detalle .periodico_detalle-nota {
        text-align: center;
        font-size: 0.9rem;
        color: var(--color-texto-claro);
        margin: 15px auto 5px;
        padding: 8px 16px;
        background: var(--color-fondo-claro);
        border-radius: 30px;
        display: inline-block;
        border: 1px dashed var(--color-borde);
        line-height: 1.6;
        word-break: break-word;
        max-width: 90%;
    }


    /* Texto secciones */
    .periodico_detalle .descripcion {
        margin-top: 18px;
        font-size: 1.05rem;
        line-height: 1.8;
        color: var(--color-texto);
    }


    .periodico_detalle .descripcion p {
        margin: 0 0 14px;
    }


    /* ===== Swiper (scoped) ===== */
    .periodico_detalle .swiper-wrapper-container {
        width: 100%;
        max-width: 980px;
        margin: 18px auto;
        border-radius: var(--radio-borde-grande);
        overflow: hidden;
        border: 1px solid rgba(0, 0, 0, .06);
        box-shadow: var(--sombra-suave);
        background: #ffffff;
    }


    .periodico_detalle swiper-container.mySwiper {
        width: 100%;
        display: block;
        background: #ffffff;
        --swiper-navigation-color: #fff;
        --swiper-pagination-color: #fff;
    }


    .periodico_detalle swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #000;
    }


    .periodico_detalle .swiper-img {
        width: 100%;
        height: auto;
        max-height: 520px;
        object-fit: contain;
        display: block;
        background: #000;
    }


    /* Citas para imágenes en swiper */
    .periodico_swiper-cita {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
        color: #fff;
        padding: 30px 20px 15px;
        font-size: 0.9rem;
        transform: translateY(100%);
        transition: transform 0.3s ease;
    }


    swiper-slide:hover .periodico_swiper-cita {
        transform: translateY(0);
    }


    .periodico_swiper-cita-autor {
        font-weight: 800;
        color: var(--color-secundario);
    }


    /* Tags */
    .periodico_detalle .tags {
        margin-top: 22px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }


    .periodico_detalle .tag {
        padding: 6px 14px;
        border-radius: 999px;
        font-weight: 900;
        font-size: .85rem;
        color: var(--color-primario);
        background: rgba(0, 123, 255, .08);
        border: 1px solid rgba(0, 123, 255, .18);
        transition: var(--trans-rapida);
    }


    .periodico_detalle .tag:hover {
        background: linear-gradient(135deg, var(--color-primario), var(--color-secundario));
        color: #fff;
        transform: translateY(-2px);
    }


    /* Volver */
    .periodico_detalle .volver {
        margin-top: 24px;
    }


    .periodico_detalle .volver a {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 10px 16px;
        border-radius: 999px;
        font-weight: 900;
        text-decoration: none;
        color: #fff;
        background: linear-gradient(135deg, var(--color-primario), var(--color-secundario));
        box-shadow: var(--sombra-suave);
        transition: var(--trans-rapida);
    }


    .periodico_detalle .volver a:hover {
        transform: translateY(-2px);
        box-shadow: var(--sombra-media);
    }


    /* ===== NUEVAS CLASES PARA CITAS DE IMÁGENES EN EL DETALLE ===== */
    /* Contenedor de cita para imagen principal */
    .periodico_cita-principal {
        margin: 15px 0 20px;
        padding: 15px 20px;
        background: linear-gradient(135deg, #f8f9ff, #ffffff);
        border-radius: var(--radio-borde);
        border: 1px solid rgba(0, 123, 255, 0.15);
        box-shadow: var(--sombra-suave);
        position: relative;
    }


    .periodico_cita-principal::before {
        content: '\f10d';
        font-family: 'FontAwesome';
        position: absolute;
        top: -10px;
        left: 20px;
        background: var(--color-primario);
        color: #fff;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        box-shadow: var(--sombra-suave);
    }


    .periodico_cita-principal-autor {
        font-weight: 800;
        color: var(--color-primario);
        font-size: 1rem;
        margin-bottom: 5px;
    }


    .periodico_cita-principal-fecha {
        font-size: 0.85rem;
        color: var(--color-texto-claro);
        margin-left: 10px;
        font-weight: normal;
    }


    .periodico_cita-principal-texto {
        font-style: italic;
        color: var(--color-texto);
        line-height: 1.6;
        padding-left: 10px;
        border-left: 3px solid var(--color-secundario);
    }


    /* Pie de foto elegante */
    .periodico_pie-foto {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 8px;
        padding: 8px 12px;
        background: rgba(0, 0, 0, 0.02);
        border-radius: 6px;
        font-size: 0.85rem;
    }


    .periodico_pie-foto-icono {
        color: var(--color-primario);
        font-size: 1rem;
    }


    .periodico_pie-foto-texto {
        color: var(--color-texto-claro);
        font-style: italic;
    }


    .periodico_pie-foto-autor {
        font-weight: 800;
        color: var(--color-primario);
        margin-left: 5px;
    }


    /* Cita para imágenes secundarias */
    .periodico_cita-secundaria {
        margin: 10px 0 15px;
        padding: 10px 15px;
        background: var(--color-fondo-claro);
        border-radius: var(--radio-borde);
        display: flex;
        align-items: center;
        gap: 10px;
        border: 1px solid var(--color-borde);
    }


    .periodico_cita-secundaria i {
        color: var(--color-secundario);
        font-size: 1.1rem;
    }


    .periodico_cita-secundaria-contenido {
        flex: 1;
    }


    .periodico_cita-secundaria-autor {
        font-weight: 800;
        color: var(--color-primario);
        font-size: 0.9rem;
    }


    .periodico_cita-secundaria-detalle {
        font-size: 0.85rem;
        color: var(--color-texto-claro);
    }


    @media (max-width: 768px) {
        .periodico_detalle {
            padding: 18px;
        }

        .periodico_detalle .img-meta-columna-centro {
            grid-template-columns: 1fr;
        }

        .periodico_imagen-cita {
            flex-direction: column;
            gap: 8px;
        }
    }

    /* Nota / descripción (centrada) */
    .periodico_detalle-nota {
        text-align: center;
        font-size: .95rem;
        color: #666;
        margin: 12px auto 18px;
        max-width: 980px; /* ajusta si quieres */
        line-height: 1.6;
        word-break: break-word;
        white-space: normal;
    }


    /* Contenedor autor/fecha */
    .img-meta-columna-centro {
        display: flex;
        justify-content: center;
        align-items: stretch;
        gap: 0;

        max-width: 980px; /* ajusta al ancho que uses */
        margin: 0 auto 22px;

        padding: 18px 10px;
        border-top: 1px solid #e6e6e6; /* línea superior */
        border-bottom: 1px solid #e6e6e6; /* línea inferior */
    }


    /* Cada columna */
    .img-meta-column {
        flex: 1;
        text-align: center;
        padding: 6px 18px;
    }


    /* Línea divisoria vertical entre columnas */
    .img-meta-column + .img-meta-column {
        border-left: 1px solid #dcdcdc;
    }


    /* Label */
    .img-meta-label {
        font-weight: 700;
        color: #555;
        font-size: 1rem;
    }


    /* Value (azul, como link) */
    .img-meta-value {
        display: inline-block;
        margin-top: 6px;
        font-weight: 800;
        color: #1a73e8; /* azul */
        font-size: 1.05rem;
        text-decoration: none;
    }


    /* Responsive: apila en móvil */
    @media (max-width: 640px) {
        .img-meta-columna-centro {
            flex-direction: column;
            padding: 14px 10px;
        }

        .img-meta-column + .img-meta-column {
            border-left: none;
            border-top: 1px solid #dcdcdc;
        }
    }

    /* ===== CONTENEDOR GENERAL DEL CARRUSEL ===== */
    .swiper-wrapper-container {
        width: 100%;
        max-width: 980px;
        margin: 18px auto 22px;
        border-radius: 14px;
        overflow: hidden;
        border: 1px solid rgba(0, 0, 0, .08);
        box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
        background: #000;
    }


    /* El componente swiper */
    swiper-container.mySwiper {
        width: 100%;
        display: block;
        background: #ffffff;

        /* colores de navegación/paginación */
        --swiper-navigation-color: #fff;
        --swiper-pagination-color: #fff;
        --swiper-pagination-bullet-inactive-color: rgba(255, 255, 255, .45);
        --swiper-pagination-bullet-inactive-opacity: 1;

        /* tamaño bullets */
        --swiper-pagination-bullet-size: 10px;
        --swiper-pagination-bullet-horizontal-gap: 6px;
    }


    /* Cada slide */
    swiper-container.mySwiper swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #ffffff;
        padding: 0;
    }


    /* ===== OVERRIDE: en el carrusel NO queremos poster 9/10 ===== */
    /* OJO: tú tienes aspect-ratio 9/10 en .periodico_portada .periodico_contenedor-imagen */
    swiper-container.mySwiper .periodico_contenedor-imagen {
        max-width: 980px; /* mismo ancho del wrapper */
        width: 100%;
        margin: 0 auto;
        aspect-ratio: auto !important; /* 🔥 desactiva el poster */
        border-radius: 14px;
        overflow: hidden;
        background: #ffffff; /* fondo para imágenes con transparencia */
        box-shadow: none;
    }



    /* Placeholder (si falla imagen) centrado y bonito */
    swiper-container.mySwiper .periodico_contenedor-imagen.periodico_sin-imagen {
        min-height: 420px;
        display: grid;
        place-items: center;
        background: radial-gradient(900px circle at 20% 20%, rgba(0, 196, 180, .25), transparent 55%),
        radial-gradient(700px circle at 80% 30%, rgba(0, 123, 255, .25), transparent 55%),
        linear-gradient(135deg, #0f172a, #111827);
    }


    /* Paginación: que se vea encima de la imagen (abajo) */
    swiper-container.mySwiper::part(pagination) {
        bottom: 12px;
    }


    /* Flechas: un poco más visibles y con “hit area” grande */
    swiper-container.mySwiper::part(button-prev),
    swiper-container.mySwiper::part(button-next) {
        width: 44px;
        height: 44px;
        border-radius: 999px;
        background: rgba(71, 169, 120, 0.35);
        backdrop-filter: blur(6px);
        border: 1px solid rgba(0, 0, 0, 0.18);
    }


    /* Responsive */
    @media (max-width: 768px) {
        .swiper-wrapper-container {
            border-radius: 12px;
        }

    }

    /* ===== SWIPER: que no herede el "poster" ===== */
    swiper-container.mySwiper {
        height: auto !important;
    }


    /* Centrar bien el contenido del slide */
    swiper-container.mySwiper swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
    }


    /* Tu wrapper interno (periodico_portada) también centrado */
    swiper-container.mySwiper .periodico_portada {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    /* OVERRIDE fuerte: quita el aspect-ratio 9/10 SOLO en el carrusel */
    swiper-container.mySwiper .periodico_portada .periodico_contenedor-imagen {
        width: 100%;
        max-width: 980px;
        margin: 0 auto;
        aspect-ratio: unset !important;
        height: auto !important;
        background: transparent; /* o #000 si quieres fondo negro */
        box-shadow: none;
    }


    /* OVERRIDE fuerte: tu CSS global pone height:100% en img, aquí lo anulamos */
    swiper-container.mySwiper img.periodico_imagen-portada {
        width: 100% !important;
        height: auto !important; /* 🔥 clave */
        max-height: 560px; /* ajusta a gusto */
        object-fit: contain !important; /* completa sin recortar */
        display: block;
    }

    /* Nota (descripción) centrada y con ancho bonito */
    .periodico_detalle-nota {
        text-align: center;
        font-size: .9rem;
        color: #666;
        margin: 12px auto 0;
        max-width: 980px; /* alínea con la imagen */
        line-height: 1.6;
        word-break: break-word;
        white-space: normal;
    }


    /* Meta datos debajo de la imagen: 2 columnas + divisor vertical */
    .img-meta-columna-centro {
        max-width: 980px;
        margin: 14px auto 0;
        padding: 16px 0;

        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        text-align: center;

        border-top: 1px solid #e6e6e6;
        border-bottom: 1px solid #e6e6e6;
        position: relative;
    }


    /* línea vertical al centro */
    .img-meta-columna-centro::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 12px;
        bottom: 12px;
        width: 1px;
        background: #d9d9d9;
        transform: translateX(-50%);
    }


    .img-meta-column {
        padding: 6px 12px;
    }


    .img-meta-label {
        font-weight: 700;
        color: #555;
        font-size: .95rem;
    }


    .img-meta-value {
        display: inline-block;
        margin-top: 6px;
        font-weight: 600;
        font-size: 1.05rem;
        color: var(--color-primario, #0d6efd); /* azul tipo link */
    }


    /* responsive: en móvil apila y quita divisor */
    @media (max-width: 576px) {
        .img-meta-columna-centro {
            grid-template-columns:1fr;
            gap: 10px;
            padding: 14px 0;
        }

        .img-meta-columna-centro::after {
            display: none;
        }
    }

    /* ===== SWIPER (DETALLE / SECCIONES) ===== */
    .swiper-wrapper-container {
        max-width: 980px;
        margin: 18px auto;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid rgba(0, 0, 0, .10);
        box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
        background: #ffffff; /* fondo uniforme */
    }


    /* El custom element debe ser block */
    swiper-container.mySwiper {
        display: block;
        width: 100%;
        height: clamp(260px, 60vh, 520px); /* alto fijo bonito */
        background: #0f172a;
    }


    /* Cada slide ocupa el alto completo y centra */
    swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        background: #0f172a;
    }


    /* IMPORTANTÍSIMO:
       Tu .periodico_contenedor-imagen tiene aspect-ratio 9/10 (poster).
       Dentro del swiper lo anulamos para que NO deforme el carrusel. */
    .swiper-wrapper-container .periodico_contenedor-imagen {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;

        aspect-ratio: auto !important; /* anula el poster */
        border-radius: 0 !important;
        box-shadow: none !important;

        background: #0f172a !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ===== BASE: imagen normal ===== */
    img.periodico_imagen-portada {
        width: 100%;
        height: auto;
        display: block;
    }


    /* ===== POSTER (portada bonita 9/10) ===== */
    .periodico_portada--poster .periodico_contenedor-imagen {
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
        aspect-ratio: 9 / 10;
        overflow: hidden;
        border-radius: var(--radio-borde-grande);
        box-shadow: var(--sombra-media);
    }


    .periodico_portada--poster img.periodico_imagen-portada {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }


    /* ===== SLIDE (swiper y 1 sola imagen en sección) ===== */
    .periodico_portada--slide .periodico_contenedor-imagen {
        width: 100%;
        max-width: 980px;
        margin: 0 auto;
        height: 520px; /* 🔥 altura pareja para todas */
        background: #fff;
        overflow: hidden;
        border-radius: var(--radio-borde-grande);
        box-shadow: var(--sombra-suave);
        border: 1px solid rgba(0, 0, 0, .06);
    }


    .periodico_portada--slide img.periodico_imagen-portada {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }


    /* ===== Swiper (solo layout, NO tocar object-fit aquí) ===== */
    .swiper-wrapper-container {
        width: 100%;
        max-width: 980px;
        margin: 18px auto;
        border-radius: var(--radio-borde-grande);
        overflow: hidden;
        border: 1px solid rgba(0, 0, 0, .06);
        box-shadow: var(--sombra-suave);
        background: #fff;
    }


    swiper-container.mySwiper {
        width: 100%;
        display: block;
    }


    swiper-slide {
        display: block;
    }


    @media (max-width: 768px) {
        .periodico_portada--slide .periodico_contenedor-imagen {
            height: 420px;
        }
    }


    @media (max-width: 480px) {
        .periodico_portada--slide .periodico_contenedor-imagen {
            height: 320px;
        }
    }

    /* Slide: deja que el alto lo maneje el contenido (imagen + meta) */
    .periodico_portada--slide {
        padding: 14px 14px 18px;
        background: #fff;
    }


    /* Contenedor del carrusel: que no fuerce alturas raras */
    .swiper-wrapper-container {
        background: transparent;
        border: 0;
        box-shadow: none;
        overflow: visible;
    }


    /* El swiper como tal */
    swiper-container.mySwiper {
        display: block;
        width: 100%;
    }


    /* IMPORTANTE: dentro del swiper NO uses el aspect-ratio poster */
    .periodico_portada--slide .periodico_contenedor-imagen {
        max-width: 980px;
        margin: 0 auto;
        aspect-ratio: auto !important;
    }


    /* Imagen: que no se recorte */
    .periodico_portada--slide img.periodico_imagen-portada {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }


    /* Nota centrada (como tú quieres) */
    .periodico_portada--slide .periodico_detalle-nota {
        text-align: center;
        margin: 10px auto 12px;
    }

    /* =========================
   FIX: Swiper Carousel Layout
   ========================= */

    /* Asegura que cada slide sea alto automático */
    .swiper-wrapper-container swiper-container.mySwiper,
    .swiper-wrapper-container swiper-slide {
        height: auto !important;
    }


    /* Fuerza el layout en columna dentro de cada slide */
    .swiper-wrapper-container .periodico_portada--slide {
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        gap: 12px;
        padding: 14px 14px 18px;
        background: #fff;
        border-radius: 12px;
    }


    /* OVERRIDE del estilo "poster" SOLO para el carrusel */
    .swiper-wrapper-container .periodico_portada--slide .periodico_contenedor-imagen {
        width: 100% !important;
        max-width: 980px !important;
        margin: 0 auto !important;
        aspect-ratio: auto !important; /* quita el 9/10 del index */
    }



    /* Nota centrada */
    .swiper-wrapper-container .periodico_portada--slide .periodico_detalle-nota {
        width: 100%;
        max-width: 980px;
        text-align: center;
        margin: 0 auto;
    }


    /* Meta datos: mismos debajo y centrados */
    .swiper-wrapper-container .periodico_portada--slide .img-meta-columna-centro {
        width: 100% !important;
        max-width: 980px;
        margin: 0 auto;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        text-align: center;

        border-top: 1px solid #e5e7eb;
        padding-top: 14px;
    }


    .swiper-wrapper-container .periodico_portada--slide .img-meta-column {
        padding: 10px 8px;
    }


    .swiper-wrapper-container .periodico_portada--slide .img-meta-column + .img-meta-column {
        border-left: 1px solid #e5e7eb;
    }


    @media (max-width: 768px) {
        .swiper-wrapper-container .periodico_portada--slide .img-meta-columna-centro {
            grid-template-columns: 1fr;
            text-align: center;
        }

        .swiper-wrapper-container .periodico_portada--slide .img-meta-column + .img-meta-column {
            border-left: 0;
            border-top: 1px solid #e5e7eb;
        }
    }

    /* ================================
   Swipper Periodico Detalle (AISLADO)
   Prefijo: swipper_periodico_detalle_
   ================================ */

    .swipper_periodico_detalle_contenedor {
        width: 100%;
        max-width: 980px;
    }


    /* Tarjeta (slide o imagen única) */
    .swipper_periodico_detalle_bloque {
        background: #fff;
        border-radius: 14px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }


    /* Área de imagen: altura pareja SIEMPRE (equilibrada) */
    .swipper_periodico_detalle_media {
        width: 100%;
        max-width: 520px;
        margin: 0 auto 0px auto;
        height: clamp(320px, 60vh, 560px);
        border-radius: 14px;
        overflow: hidden;
        position: relative;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    /* Imagen dentro: por defecto "contain" para NO recortar */
    .swipper_periodico_detalle_imagen {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        object-position: center !important;
        object-fit: contain !important;
        background: #ffffff;
    }


    /* Si algún día quieres recorte tipo portada, cambia el bloque a --cover */
    .swipper_periodico_detalle_bloque--cover .swipper_periodico_detalle_imagen {
        object-fit: cover !important;
    }


    /* Placeholder */
    .swipper_periodico_detalle_placeholder {
        position: absolute;
        inset: 0;
        display: none;
        place-items: center;
        padding: 18px;
    }


    .swipper_periodico_detalle_placeholder_caja {
        display: flex;
        align-items: center;
        gap: 12px;
        color: #fff;
        background: rgba(255, 255, 255, .10);
        border: 1px solid rgba(255, 255, 255, .18);
        border-radius: 14px;
        padding: 14px 16px;
        backdrop-filter: blur(8px);
        max-width: 420px;
        width: min(90%, 420px);
    }


    .swipper_periodico_detalle_placeholder_caja i {
        font-size: 26px;
        opacity: .95;
    }


    .swipper_periodico_detalle_placeholder_caja strong {
        display: block;
        font-weight: 800;
    }


    .swipper_periodico_detalle_placeholder_caja span {
        display: block;
        opacity: .85;
        margin-top: 2px;
    }


    /* Mostrar placeholder si no hay imagen o si falla */
    .swipper_periodico_detalle_sin_imagen .swipper_periodico_detalle_placeholder {
        display: grid;
    }


    /* Nota centrada */
    .swipper_periodico_detalle_nota {
        margin: 0 auto;
        text-align: center;
        font-size: .92rem;
        color: #666;
        line-height: 1.6;
        max-width: 100%;
        word-break: break-word;
    }


    /* Metadatos 2 columnas */
    .swipper_periodico_detalle_metadatos {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        border-top: 1px solid #e6e6e6;
        padding-top: 14px;
        margin-top: 2px;
    }


    .swipper_periodico_detalle_meta_columna {
        text-align: center;
        padding: 8px 10px;
    }


    .swipper_periodico_detalle_meta_columna + .swipper_periodico_detalle_meta_columna {
        border-left: 1px solid #dcdcdc;
    }


    .swipper_periodico_detalle_meta_etiqueta {
        display: block;
        font-weight: 800;
        color: #444;
        font-size: .95rem;
        margin-bottom: 6px;
    }


    .swipper_periodico_detalle_meta_valor {
        display: block;
        font-weight: 700;
        color: #1a73e8;
        font-size: 1.05rem;
    }


    /* Responsive: metadatos apilados */
    @media (max-width: 640px) {
        .swipper_periodico_detalle_media {
            height: clamp(240px, 50vh, 420px);
        }

        .swipper_periodico_detalle_metadatos {
            grid-template-columns: 1fr;
            gap: 10px;
        }

        .swipper_periodico_detalle_meta_columna + .swipper_periodico_detalle_meta_columna {
            border-left: 0;
            border-top: 1px solid #dcdcdc;
        }
    }


    /* ================================
       Swiper (solo estilo del componente)
       ================================ */

    .swipper_periodico_detalle_swiper {
        width: 100%;
        display: block;
        height: auto !important;

        --swiper-navigation-color: #fff;
        --swiper-pagination-color: #fff;
        --swiper-pagination-bullet-inactive-color: rgba(255, 255, 255, .45);
        --swiper-pagination-bullet-inactive-opacity: 1;
    }


    /* Slide: no forces alturas raras */
    .swipper_periodico_detalle_slide {
        height: auto !important;
        display: block;
        background: transparent;
        padding: 0;
    }


    /* Botones (swiper-element) */
    .swipper_periodico_detalle_swiper::part(button-prev),
    .swipper_periodico_detalle_swiper::part(button-next) {
        width: 46px;
        height: 46px;
        border-radius: 999px;
        background: rgba(0, 0, 0, .35);
        border: 1px solid rgba(255, 255, 255, .22);
        backdrop-filter: blur(6px);
    }


    /* Paginación abajo */
    .swipper_periodico_detalle_swiper::part(pagination) {
        bottom: 12px;
    }

    /* =========================
   SWIPPER PERIODICO DETALLE
   ========================= */

    /* Contenedor general (NO achica) */
    .swipper_periodico_detalle_contenedor {
        width: 100%;
        max-width: 980px;
        margin: 18px auto;
    }


    /* Swiper element */
    swiper-container.swipper_periodico_detalle_swiper {
        width: 100%;
        display: block;
        --swiper-navigation-color: #ffffff;
        --swiper-pagination-color: #ffffff;
        --swiper-pagination-bullet-inactive-color: rgba(255, 255, 255, .45);
        --swiper-pagination-bullet-inactive-opacity: 1;
    }


    /* Slide */
    .swipper_periodico_detalle_slide {
        padding: 0 !important;
        display: flex;
        justify-content: center;
    }


    /* Card/bloque: columna */
    .swipper_periodico_detalle_bloque {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }


    /* Marco de la imagen: FULL WIDTH + redondeo */
    .swipper_periodico_detalle_media {
        width: 100%;
        height: clamp(320px, 55vh, 560px); /* alto consistente */
        border-radius: 22px; /* “un chance” redondeado */
        overflow: hidden; /* recorta las esquinas */
        position: relative;
        background: #0f172a;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    /* Imagen: ocupa TODO el marco siempre (evita conflictos con tu CSS viejo) */
    .swipper_periodico_detalle_imagen {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        object-position: center !important;
        border-radius: inherit;
    }


    /* Modo contain (sin recorte) */
    .swipper_periodico_detalle_bloque--contain .swipper_periodico_detalle_imagen {
        object-fit: contain !important;
        background: #ffffff;
    }


    /* Modo cover (llena y recorta) */
    .swipper_periodico_detalle_bloque--cover .swipper_periodico_detalle_imagen {
        object-fit: cover !important;
    }


    /* Placeholder: oculto por defecto */
    .swipper_periodico_detalle_placeholder {
        position: absolute;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 18px;
        background: radial-gradient(900px circle at 20% 20%, rgba(0, 196, 180, .20), transparent 55%),
        radial-gradient(700px circle at 80% 30%, rgba(0, 123, 255, .20), transparent 55%),
        linear-gradient(135deg, #0f172a, #111827);
    }


    .swipper_periodico_detalle_placeholder_caja {
        display: flex;
        gap: 12px;
        align-items: center;
        color: #fff;
        background: rgba(255, 255, 255, .10);
        border: 1px solid rgba(255, 255, 255, .18);
        backdrop-filter: blur(8px);
        border-radius: 14px;
        padding: 14px 16px;
    }


    /* Placeholder visible si no hay imagen o si falló */
    .swipper_periodico_detalle_sin_imagen .swipper_periodico_detalle_placeholder,
    .swipper_periodico_detalle_media--error .swipper_periodico_detalle_placeholder {
        display: flex;
    }


    /* Nota */
    .swipper_periodico_detalle_nota {
        margin: 0;
        text-align: center;
        color: #666;
        line-height: 1.6;
    }


    /* Metadatos (2 columnas) */
    .swipper_periodico_detalle_metadatos {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-top: 1px solid #e6e6e6;
        border-bottom: 1px solid #e6e6e6;
        padding: 14px 0;
        position: relative;
    }


    .swipper_periodico_detalle_meta_columna {
        text-align: center;
        padding: 8px 12px;
    }


    .swipper_periodico_detalle_metadatos::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 12px;
        bottom: 12px;
        width: 1px;
        background: #d9d9d9;
        transform: translateX(-50%);
    }


    .swipper_periodico_detalle_meta_etiqueta {
        display: block;
        font-weight: 700;
        color: #555;
    }


    .swipper_periodico_detalle_meta_valor {
        display: block;
        margin-top: 6px;
        font-weight: 800;
        color: #1a73e8;
    }


    /* Responsive */
    @media (max-width: 640px) {
        .swipper_periodico_detalle_metadatos {
            grid-template-columns: 1fr;
            gap: 10px;
        }

        .swipper_periodico_detalle_metadatos::after {
            display: none;
        }

        .swipper_periodico_detalle_media {
            height: clamp(260px, 50vh, 420px);
            border-radius: 18px;
        }
    }



    swiper-container.swipper_periodico_detalle_swiper {
        background: transparent !important;
    }


    /* El slide NO debe tener fondo oscuro */
    swiper-container.swipper_periodico_detalle_swiper swiper-slide.swipper_periodico_detalle_slide {
        background: transparent !important;
    }


    /* Tu bloque completo en blanco */
    .swipper_periodico_detalle_bloque {
        background: #fff !important;
    }


    /* El área de la imagen en blanco */
    .swipper_periodico_detalle_media {
        background: #fff !important;
    }


    /* Metadatos en blanco (sin azul) */
    .swipper_periodico_detalle_metadatos {
        background: #fff !important;
        border-top: 1px solid #e6e6e6 !important;
    }

    /* ===========================
   PATCH: Swipper Periodico Detalle
   (SIN cambiar HTML)
   =========================== */

    /* 1) Contenedor general */
    .swipper_periodico_detalle_contenedor {
        width: 100% !important;
        max-width: 980px !important;
        margin: 18px auto !important;
        background: transparent !important;
    }


    /* 2) Swiper element: quita fondos raros y asegura layout */
    swiper-container.swipper_periodico_detalle_swiper {
        width: 100% !important;
        display: block !important;
        background: transparent !important;
        --swiper-navigation-color: #ffffff;
        --swiper-pagination-color: #ffffff;
        --swiper-pagination-bullet-inactive-color: rgba(255, 255, 255, .55);
        --swiper-pagination-bullet-inactive-opacity: 1;
    }


    /* 3) Slide: que no meta azul/oscuro abajo */
    swiper-container.swipper_periodico_detalle_swiper swiper-slide.swipper_periodico_detalle_slide {
        background: transparent !important;
        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;
        padding: 0 !important;
    }


    /* 4) Bloque: centra y evita que el fondo del slide se vea azul */
    .swipper_periodico_detalle_bloque {
        width: 100% !important;
        max-width: 980px !important;
        margin: 0 auto !important;
        background: transparent !important;
    }


    /* 5) CAJA 9/10 REAL + redondeo
       - Usa clamp para que no se vuelva ENORME en desktop */
    .swipper_periodico_detalle_media {
        width: 100% !important;
        max-width: 520px;
        margin: 0 auto !important;

        aspect-ratio: 9 / 10 !important; /* 🔒 ratio */
        position: relative !important;
        overflow: hidden !important;

        border-radius: 22px !important; /* 🔥 round */
        background: #ffffff !important; /* quita el azul */
        box-shadow: 0 10px 26px rgba(0, 0, 0, .12) !important;
        border: 1px solid rgba(0, 0, 0, .08) !important;
    }


    /* 6) Imagen: rellena la caja (no “aire”)
       - Esto elimina el problema que ves (imagen centrada con espacios). */
    .swipper_periodico_detalle_media > img.swipper_periodico_detalle_imagen {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important; /* ✅ llena la caja 9/10 */
        object-position: center !important;

        display: block !important;
        border-radius: 22px !important; /* round real */
    }


    /* 7) Placeholder: oculto por defecto, visible si no hay imagen */
    .swipper_periodico_detalle_placeholder {
        position: absolute !important;
        inset: 0 !important;
        display: none !important;
        align-items: center !important;
        justify-content: center !important;
        background: #0f172a !important;
        color: #fff !important;
    }


    .swipper_periodico_detalle_sin_imagen .swipper_periodico_detalle_placeholder {
        display: flex !important;
    }


    /* 8) Nota y metadatos: sin fondo azul */
    .swipper_periodico_detalle_nota {
        max-width: 980px;
        margin: 12px auto 10px;
        text-align: center;
    }


    .swipper_periodico_detalle_metadatos {
        max-width: 980px;
        margin: 10px auto 0;
        background: #ffffff !important; /* quita azul */
        border-radius: 16px;
        border: 1px solid rgba(0, 0, 0, .08);
        overflow: hidden;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }


    .swipper_periodico_detalle_meta_columna {
        padding: 14px 12px;
        text-align: center;
    }


    .swipper_periodico_detalle_meta_columna + .swipper_periodico_detalle_meta_columna {
        border-left: 1px solid rgba(0, 0, 0, .08);
    }


    /* 9) Botones (prev/next) y bullets: que se vean sí o sí */
    swiper-container.swipper_periodico_detalle_swiper::part(button-prev),
    swiper-container.swipper_periodico_detalle_swiper::part(button-next) {
        width: 46px;
        height: 46px;
        border-radius: 999px;
        background: rgba(0, 0, 0, .35);
        backdrop-filter: blur(6px);
        border: 1px solid rgba(255, 255, 255, .22);
        box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
    }


    swiper-container.swipper_periodico_detalle_swiper::part(pagination) {
        bottom: 14px;
    }


    /* 10) Responsive metadatos */
    @media (max-width: 680px) {
        .swipper_periodico_detalle_metadatos {
            grid-template-columns: 1fr;
        }

        .swipper_periodico_detalle_meta_columna + .swipper_periodico_detalle_meta_columna {
            border-left: 0;
            border-top: 1px solid rgba(0, 0, 0, .08);
        }
    }

    .periodico_cartas_secundarias {
        margin: 44px 0 28px;
        padding: 14px 0 0;
        position: relative;
    }


    .periodico_cartas_secundarias__grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
        gap: 24px;
        align-items: stretch;
        margin: 0;
    }


    .periodico_cartas_secundarias__card {
        background:
            radial-gradient(circle at top right, rgba(0, 196, 180, 0.08), transparent 28%),
            linear-gradient(180deg, #fcfcfd 0%, #f6f7f9 100%);
        border-radius: 18px;
        overflow: hidden;
        border: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow:
            0 10px 24px rgba(0, 0, 0, 0.05),
            0 2px 8px rgba(0, 0, 0, 0.03);
        display: flex;
        flex-direction: column;
        min-height: 332px;
        height: 100%;
        position: relative;
        opacity: 1;
        transform: translateY(0) scale(1);
        transition:
            transform .34s cubic-bezier(.22, .61, .36, 1),
            box-shadow .34s cubic-bezier(.22, .61, .36, 1),
            border-color .28s ease,
            background .34s ease,
            filter .28s ease;
        will-change: transform, opacity;
        isolation: isolate;
    }


    .periodico_cartas_secundarias__card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            180deg,
            rgba(255,255,255,.18),
            transparent 22%,
            transparent 78%,
            rgba(255,255,255,.06)
        );
        pointer-events: none;
        z-index: 0;
    }


    .periodico_cartas_secundarias__card::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            130deg,
            rgba(255,255,255,0) 20%,
            rgba(255,255,255,.20) 48%,
            rgba(255,255,255,0) 72%
        );
        transform: translateX(-120%);
        opacity: 0;
        transition:
            opacity .28s ease,
            transform .65s ease;
        pointer-events: none;
        z-index: 0;
    }


    .periodico_cartas_secundarias__card:hover {
        transform: translateY(-7px) scale(1.012);
        background:
            radial-gradient(circle at top right, rgba(0, 196, 180, 0.11), transparent 28%),
            linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        border-color: rgba(0, 123, 255, 0.16);
        box-shadow:
            0 18px 38px rgba(0, 0, 0, 0.08),
            0 8px 18px rgba(0, 123, 255, 0.08);
        filter: saturate(1.02);
    }


    .periodico_cartas_secundarias__card:hover::after {
        opacity: 1;
        transform: translateX(120%);
    }


    .periodico_cartas_secundarias__contenido {
        padding: 22px 22px 14px;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 14px;
        position: relative;
        z-index: 1;
    }


    .periodico_cartas_secundarias__tag {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        width: fit-content;
        max-width: 100%;
        padding: 8px 16px;
        border-radius: 999px;
        background: linear-gradient(
            135deg,
            rgba(0, 123, 255, 0.14),
            rgba(0, 196, 180, 0.16)
        );
        color: var(--color-primario, #007bff);
        border: 1px solid rgba(0, 123, 255, 0.16);
        font-size: .84rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .7px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition:
            background .28s ease,
            color .28s ease,
            border-color .28s ease,
            transform .28s ease;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
    }


    .periodico_cartas_secundarias__tag i {
        font-size: .92em;
        flex: 0 0 auto;
    }


    .periodico_cartas_secundarias__card:hover .periodico_cartas_secundarias__tag {
        background: linear-gradient(
            135deg,
            var(--color-primario, #007bff),
            var(--color-secundario, #00c4b4)
        );
        color: #fff;
        border-color: transparent;
        transform: translateY(-1px);
    }


    .periodico_cartas_secundarias__titulo {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        text-decoration: none;
        color: #191a1f;
        font-weight: 900;
        font-size: clamp(1.04rem, 1.15vw, 1.2rem);
        line-height: 1.48;
        min-height: calc(1.48em * 3);
        margin: 0;
        word-break: break-word;
        text-wrap: balance;
        transition:
            color .24s ease,
            transform .24s ease;
    }


    .periodico_cartas_secundarias__card:hover .periodico_cartas_secundarias__titulo {
        color: var(--color-primario, #007bff);
        transform: translateX(1px);
    }


    .periodico_cartas_secundarias__meta {
        margin: auto 0 0;
        padding-top: 12px;
        border-top: 1px dashed rgba(0, 0, 0, 0.10);
        display: flex;
        align-items: center;
        gap: 8px;
        color: #4c72c7;
        font-size: .92rem;
        font-weight: 600;
        line-height: 1.35;
        position: relative;
    }


    .periodico_cartas_secundarias__meta i {
        color: var(--color-secundario, #00c4b4);
        font-size: .95rem;
        flex: 0 0 auto;
    }


    .periodico_cartas_secundarias__footer {
        padding: 18px 22px 22px;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        background: linear-gradient(
            180deg,
            rgba(255,255,255,.26),
            rgba(255,255,255,.72)
        );
        position: relative;
        z-index: 1;
    }


    .periodico_cartas_secundarias__boton {
        width: 100%;
        min-height: 50px;
        height: 50px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(
            135deg,
            var(--color-primario, #007bff),
            var(--color-secundario, #00c4b4)
        );
        color: #fff;
        text-decoration: none;
        border-radius: 999px;
        font-size: .98rem;
        font-weight: 900;
        letter-spacing: .32px;
        box-shadow:
            0 10px 18px rgba(0, 123, 255, 0.18),
            inset 0 1px 0 rgba(255,255,255,.25);
        position: relative;
        overflow: hidden;
        transition:
            transform .26s ease,
            box-shadow .26s ease,
            filter .26s ease;
    }


    .periodico_cartas_secundarias__boton:hover {
        transform: translateY(-2px);
        box-shadow:
            0 14px 24px rgba(0, 123, 255, 0.24),
            inset 0 1px 0 rgba(255,255,255,.25);
        filter: saturate(1.06);
    }


    .periodico_cartas_secundarias__boton:active {
        transform: translateY(0);
    }


    .periodico_cartas_secundarias__boton::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            120deg,
            transparent 18%,
            rgba(255,255,255,.22) 48%,
            transparent 78%
        );
        transform: translateX(-120%);
        transition: transform .65s ease;
    }


    .periodico_cartas_secundarias__boton:hover::before {
        transform: translateX(120%);
    }


    .periodico_cartas_secundarias__vacio {
        grid-column: 1 / -1;
        padding: 48px 22px;
        background: linear-gradient(180deg, #fbfbfc 0%, #f7f8fa 100%);
        border-radius: 16px;
        color: var(--color-texto-claro, #666);
        font-size: 1rem;
        font-weight: 600;
        border: 2px dashed var(--color-borde, #e0e0e0);
        text-align: center;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.03);
    }


    .periodico_cartas_secundarias__vacio i {
        margin-right: 8px;
        color: var(--color-secundario, #00c4b4);
    }


    .periodico_cartas_secundarias__card--entrada {
        opacity: 0;
        transform: translateY(24px) scale(.982);
        animation: periodico_cartas_secundarias_aparecer .62s cubic-bezier(.22, .61, .36, 1) forwards;
        animation-delay: var(--periodico-cartas-delay, 0ms);
    }


    .periodico_cartas_secundarias__card--nueva {
        opacity: 0;
        transform: translateY(28px) scale(.978);
        animation: periodico_cartas_secundarias_aparecer_nueva .66s cubic-bezier(.22, .61, .36, 1) forwards;
        animation-delay: var(--periodico-cartas-delay, 0ms);
    }


    .periodico_cartas_secundarias__skeleton-card {
        pointer-events: none;
        box-shadow:
            0 8px 20px rgba(0, 0, 0, 0.04),
            0 2px 6px rgba(0, 0, 0, 0.02);
    }


    .periodico_cartas_secundarias__skeleton-line,
    .periodico_cartas_secundarias__skeleton-icon {
        display: block;
        background:
            linear-gradient(90deg, #efefef 25%, #e2e2e2 50%, #efefef 75%);
        background-size: 220% 100%;
        animation: periodico_cartas_secundarias_skeleton 1.35s ease-in-out infinite;
    }


    .periodico_cartas_secundarias__skeleton-line {
        border-radius: 999px;
    }


    .periodico_cartas_secundarias__skeleton-tag {
        width: 144px;
        height: 34px;
        max-width: 62%;
    }


    .periodico_cartas_secundarias__skeleton-title {
        width: 100%;
        height: 18px;
        border-radius: 10px;
    }


    .periodico_cartas_secundarias__skeleton-title.short {
        width: 78%;
    }


    .periodico_cartas_secundarias__skeleton-meta {
        width: 126px;
        height: 14px;
        border-radius: 8px;
    }


    .periodico_cartas_secundarias__skeleton-boton {
        width: 100%;
        height: 50px;
        border-radius: 999px;
    }


    .periodico_cartas_secundarias__skeleton-icon {
        width: 16px;
        height: 16px;
        border-radius: 4px;
        flex: 0 0 16px;
    }


    @keyframes periodico_cartas_secundarias_skeleton {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }


    @keyframes periodico_cartas_secundarias_aparecer {
        0% {
            opacity: 0;
            transform: translateY(24px) scale(.982);
            filter: blur(3px);
        }
        55% {
            opacity: 1;
            transform: translateY(-3px) scale(1.004);
            filter: blur(0);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
            filter: blur(0);
        }
    }


    @keyframes periodico_cartas_secundarias_aparecer_nueva {
        0% {
            opacity: 0;
            transform: translateY(28px) scale(.978);
            filter: blur(4px);
        }
        52% {
            opacity: 1;
            transform: translateY(-4px) scale(1.006);
            filter: blur(0);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
            filter: blur(0);
        }
    }


    @media (max-width: 1024px) {
        .periodico_cartas_secundarias__grid {
            grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
            gap: 20px;
        }
    }


    @media (max-width: 768px) {
        .periodico_cartas_secundarias {
            margin: 34px 0 22px;
            padding-top: 8px;
        }

        .periodico_cartas_secundarias__grid {
            grid-template-columns: 1fr;
            gap: 16px;
        }

        .periodico_cartas_secundarias__card {
            min-height: 292px;
            border-radius: 16px;
        }

        .periodico_cartas_secundarias__contenido {
            padding: 18px 16px 12px;
            gap: 12px;
        }

        .periodico_cartas_secundarias__tag {
            font-size: .8rem;
            padding: 7px 14px;
        }

        .periodico_cartas_secundarias__titulo {
            font-size: 1rem;
            min-height: calc(1.48em * 3);
        }

        .periodico_cartas_secundarias__meta {
            font-size: .88rem;
        }

        .periodico_cartas_secundarias__footer {
            padding: 14px 16px 16px;
        }

        .periodico_cartas_secundarias__boton {
            height: 46px;
            min-height: 46px;
            font-size: .92rem;
        }

        .periodico_cartas_secundarias__skeleton-tag {
            width: 126px;
            height: 30px;
        }

        .periodico_cartas_secundarias__skeleton-title {
            height: 16px;
        }
    }


    @media (max-width: 480px) {
        .periodico_cartas_secundarias__card {
            min-height: auto;
        }

        .periodico_cartas_secundarias__tag {
            max-width: 100%;
        }

        .periodico_cartas_secundarias__titulo {
            -webkit-line-clamp: 3;
        }
    }


    @media (prefers-reduced-motion: reduce) {
        .periodico_cartas_secundarias__card,
        .periodico_cartas_secundarias__boton,
        .periodico_cartas_secundarias__skeleton-line,
        .periodico_cartas_secundarias__skeleton-icon,
        .periodico_cartas_secundarias__card--entrada,
        .periodico_cartas_secundarias__card--nueva {
            animation: none !important;
            transition: none !important;
            filter: none !important;
        }
    }