/* =========================================
               Estilos para fotos verticales o sueltas sin pie de foto
               ========================================= */

.post-content p>img,
.post-content img.alignnone {
    display: block;
    /* Esto es clave: deja de tratar la imagen como texto */
    margin: 0.65rem auto !important;
    /* El 'auto' a los lados la centra perfectamente */
    max-width: 100%;
    /* Evita que se desborde en móviles */
    border-radius: 12px;
    /* Mantiene tu línea gráfica */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    /* Sombra sutil */
    object-fit: contain;
    /* Opcional aquí, pero ayuda si WP fuerza otras dimensiones */
}

@media (min-width: 768px) {

    .post-content p>img,
    .post-content img.alignnone {
        margin: 1.5rem auto !important;
        /* El 'auto' a los lados la centra perfectamente */
    }

    .post-content p:has(img) {
        max-width: 100%;
    }
}

/* =========================================
               Estilos para Imágenes Sueltas con Pie de Foto (wp-caption)
               ========================================= */

/* 1. Contenedor de la figura */
.post-content .wp-caption {
    margin: 0.65rem 0;
    max-width: 100%;
    break-inside: avoid;
    /* Evita que la foto y el texto se separen si usas columnas */
}

@media (min-width: 768px) {
    .post-content .wp-caption {
        margin: 1.5rem 0;
    }
}

/* Soporte para la clase de centrado nativa de WP */
.post-content .wp-caption.aligncenter {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* 2. La imagen en sí */
.post-content .wp-caption img {
    border-radius: 12px;
    /* Mantiene tu estilo de esquinas redondeadas */
    margin: 0 auto 0.8rem auto !important;
    /* Separación exacta entre foto y texto */
    display: block;
    width: 100%;
    height: auto;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    /* Sombra muy sutil para darle profundidad */
}

/* 3. El texto del pie de foto */
.post-content .wp-caption-text,
.post-hero-image-caption {
    font-size: 9.33pt;
    color: #64748b;
    /* El gris secundario que ya usas en las fechas */
    line-height: 1.1;
    margin: 0;
    padding: 0 1rem;
    font-style: italic;
    /* Toque editorial para distinguirlo del cuerpo de la noticia */
    text-align: start;
}

@media (min-width: 768px) {

    .post-content .wp-caption-text,
    .post-hero-image-caption {
        font-size: 0.9rem;
    }
}

/* =========================================
               Estilos para Embeds (YouTube, FB, IG, X)
               ========================================= */

/* 1. YouTube (Magia con selector de atributo) */
.post-content iframe[src*="youtube.com"],
.post-content iframe[src*="youtu.be"] {
    display: block;
    width: 100% !important;
    /* Fuerza a ocupar el área disponible */
    height: auto !important;
    /* Anula el alto fijo que manda WordPress */
    aspect-ratio: 16 / 9;
    /* Mantiene la proporción perfecta de video siempre */
    margin: 0.65rem auto;
    border-radius: 12px;
    /* Mantiene tu línea de diseño gráfica */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-width: 440px !important;
}

@media (min-width: 768px) {

    .post-content iframe[src*="youtube.com"],
    .post-content iframe[src*="youtu.be"] {
        max-width: 500px !important;
        margin: 1.5rem auto;
    }
}

/* 2. Facebook */
.post-content iframe[src*="facebook.com/plugins"] {
    display: block;
    margin: 0.65rem auto !important;
    /* Centrado automático */
    max-width: 300px !important;
    border-radius: 8px;
}

@media (min-width: 768px) {
    .post-content iframe[src*="facebook.com/plugins"] {
        max-width: 100% !important;
        margin: 1.5rem auto !important;
        /* Centrado automático */
    }
}

/* 3. Instagram */
.post-content .instagram-media {
    display: flex !important;
    justify-content: center !important;
    margin: 0.65rem auto !important;
    /* El !important sobreescribe el margin que IG inyecta en línea */
    max-width: 300px !important;
    /* Acomoda al tamaño de móvil */
    width: 100% !important;
}

@media (min-width: 768px) {
    .post-content .instagram-media {
        max-width: 500px !important;
        margin: 1.5rem auto !important;
        /* Centrado automático */
    }
}

/* 4. X (Twitter) */
.post-content .twitter-tweet {
    margin: 0.65rem auto !important;
    /* Centra el contenedor principal */
    display: flex !important;
    justify-content: center !important;
    /* Centra el contenido de X dentro del div */
    max-width: 300px !important;
    width: 100% !important;
}

@media (min-width: 768px) {
    .post-content .twitter-tweet {
        max-width: 500px !important;
        margin: 1.5rem auto !important;
        /* Centrado automático */
    }
}

/* 5. TikTok */
.post-content blockquote.tiktok-embed {
    margin: 0.65rem auto !important;
    display: flex !important;
    justify-content: center !important;
    max-width: 300px !important;
    width: 100% !important;
    border-radius: 8px;
}

@media (min-width: 768px) {
    .post-content blockquote.tiktok-embed {
        max-width: 500px !important;
        margin: 1.5rem auto !important;
        /* Centrado automático */
    }
}

/* Fix para los párrafos vacíos que a veces WP deja alrededor de los iframes */
.post-content p:has(iframe) {
    text-align: center;
    margin: 0 auto;
}

/* Main Container */
.single-post-container {
    max-width: 1200px;
    width: 90%;
    margin: 5.5rem auto 1.5rem auto;
}

@media (min-width: 768px) {
    .single-post-container {
        margin: 7rem auto 3rem auto;
    }
}

.post-header-container {
    display: flex;
    flex-direction: column-reverse;
}

@media (min-width: 768px) {
    .post-header-container {
        flex-direction: column;
    }
}

/* Header Section */
.post-header-top {
    text-align: start;
    margin-bottom: 0.79rem;
}

@media (min-width: 768px) {
    .post-header-top {
        text-align: center;
        margin-bottom: 1.6rem;
    }
}

.post-categories {
    color: #1957b2;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    text-align: start;
}

@media (min-width: 768px) {
    .post-categories {
        margin-bottom: 0;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
}

.post-title {
    font-family: "Roboto Serif", serif;
    font-size: 17.3pt;
    font-weight: 800;
    /* Extra bold */
    color: #00346e;
    line-height: 1.1;
    max-width: 930px;
    margin: 0.79rem auto 0.4rem auto;
}

@media (min-width: 768px) {
    .post-title {
        font-family: "Roboto Serif", serif;
        font-size: 50pt;
        font-weight: 800;
        /* Extra bold */
        color: #00346e;
        margin: 0 auto 0.4rem auto;
        line-height: 1.1;
    }
}

.post-subtitle {
    font-family: "Noto Sans", sans-serif;
    font-size: 10.65pt;
    font-weight: 700;
    /* Bold */
    color: #264d88;
    line-height: 1.1;
    max-width: 930px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .post-subtitle {
        font-family: "Noto Sans", sans-serif;
        font-size: 22pt;
        font-weight: 700;
        /* Bold */
        color: #264d88;
        line-height: 1.1;
    }
}

/* Two Column Hero/Metadata layout */
.post-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0rem;
}

/* Featured Image */
.post-hero-image {
    overflow: hidden;
    margin: 0 auto;
    text-align: center;
    max-width: 100%;
}

.post-hero-image img {
    border-radius: 12px;
    object-fit: cover;
    margin-bottom: 0.8rem;
    max-width: 100%;
}

/* Sidebar / Author Info */
.post-hero-sidebar {
    display: flex;
    justify-content: space-between;
    margin-top: 0rem;
    flex-flow: column-reverse;
}

@media (min-width: 768px) {
    .post-hero-sidebar {
        flex-flow: row;
        max-width: 874px;
        margin: 1.5rem auto;
        width: 100%;
    }
}

.author-meta-simple {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

@media (min-width: 768px) {
    .author-meta-simple {
        align-items: center;
    }
}

.author-meta-simple .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-top: 0.2rem;
}

.author-meta-info {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .author-meta-info {
        margin-bottom: 0;
    }
}

.author-meta-role {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #1e293b;
    margin-bottom: 0.2rem;
}

@media (min-width: 768px) {
    .author-meta-role {
        margin-bottom: 0;
    }
}

.author-meta-date {
    font-size: 0.85rem;
    color: #64748b;
}

@media (min-width: 768px) {

    .author-meta-role,
    .author-meta-date {
        font-family: "Noto Sans", sans-serif;
        font-size: 14pt;
        font-weight: 500;
        /* Medium */
        color: #264d88;
    }

    .author-meta-role strong {
        font-weight: 800;
        /* Extra Bold */
    }
}

/* Custom Twitter/Social Card */
.twitter-author-card {
    display: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    background: #fff;
    margin-top: 3rem;
    border: 1px solid #e2e8f0;
    max-width: 350px;
}

@media (min-width: 768px) {
    .twitter-author-card {
        display: block;
    }
}

.tac-header {
    background-color: #1da1f2;
    /* Custom light blue from design */
    height: 70px;
    background-size: cover;
    background-position: center;
    transition: background-image 0.3s ease;
}

.tac-body {
    padding: 1rem 1.5rem;
    position: relative;
    background-color: #fff;
}

.tac-avatar-wrapper {
    position: absolute;
    top: -35px;
    left: 1.5rem;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 4px solid #fff;
    background-color: #e2e8f0;
    overflow: hidden;
}

.tac-avatar-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tac-follow {
    display: inline-block;
    float: right;
    border: 1px solid #1da1f2;
    color: #1da1f2;
    border-radius: 9999px;
    padding: 0.35rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    margin-top: -0.5rem;
    transition: all 0.2s;
}

.tac-follow:hover {
    background-color: #f0f8ff;
}

.tac-info {
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;
}

.tac-info strong {
    font-size: 1.1rem;
    color: #0f172a;
    margin-bottom: 0.2rem;
}

.tac-info span {
    font-size: 0.9rem;
    color: #64748b;
}

/* Social Action Buttons */
.social-actions {
    display: flex;
    gap: 1.5rem;
    margin: 0.51rem 0;
    justify-content: end;
}

.action-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #475569;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-btn:hover {
    color: #1957b2;
}

/* Article Content Columns */
.post-content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #334155;
    margin-bottom: -1rem;
}

@media (min-width: 768px) {
    .post-content {
        font-size: 1.15rem;
    }
}

.post-content p,
.post-content ul,
.post-content ol {
    font-family: "Noto Sans", sans-serif;
    font-size: 9.33pt;
    font-weight: 500;
    /* Medium */
    color: #3d444e;
    margin-bottom: 0.65rem;
    text-align: justify;
    break-inside: avoid;
    /* Better flow in columns */
    line-height: 1.2;
}

@media (min-width: 768px) {

    .post-content p,
    .post-content ul,
    .post-content ol {
        font-family: "Noto Sans", sans-serif;
        font-size: 18pt;
        font-weight: 500;
        /* Medium */
        color: #3d444e;
        margin-bottom: 1.5rem;
        max-width: 874px;
        margin-left: auto;
        margin-right: auto;
    }
}

.post-content ul,
.post-content ol {
    padding-left: 2rem;
}

.post-content li>ul,
.post-content li>ol {
    margin-bottom: 0;
    padding-left: 1rem;
}

.post-content h2,
.post-content h3,
.post-content h4 {
    font-family: "Roboto Serif", serif;
    font-size: 12pt;
    font-weight: 600;
    /* Semibold */
    color: #00346e;
    margin-top: 0.79rem;
    margin-bottom: 0.65rem;
    break-after: avoid;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .post-content h2 {
        font-size: 18pt;
    }

    .post-content h3 {
        font-size: 18pt;
    }

    .post-content h4 {
        font-size: 18pt;
    }

    .post-content h2,
    .post-content h3,
    .post-content h4 {
        margin-top: 2rem;
        margin-bottom: 1.5rem;
        line-height: 1.2;
        max-width: 874px;
        margin-left: auto;
        margin-right: auto;
        font-family: "Noto Sans", sans-serif;
    }
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 2rem 0;
    object-fit: contain;
}

.post-content blockquote p,
.post-content blockquote span {
    color: #4091ca !important;
}

@media (min-width: 768px) {

    .post-content blockquote p,
    .post-content blockquote span {
        font-family: "Noto Sans", sans-serif;
        font-size: 18pt;
        font-weight: 500;
        /* Medium */
        color: #4091ca !important;
    }
}

.post-content blockquote {
    margin: 0.79rem 0;
    font-style: italic;
    padding: 0 0 0 0.65rem;
    border-radius: 0 8px 8px 0;
    break-inside: avoid;
}

@media (min-width: 768px) {
    .post-content blockquote {
        margin: 2rem 0;
        padding: 0 0 0 1.5rem;
        max-width: 874px;
        margin-left: auto;
        margin-right: auto;
    }
}

.post-content blockquote p {
    margin-bottom: 0;
}

/* Native WP 'Lea también' blocks */
.post-content .agn-related-block,
.post-content .wp-block-group {
    background-color: #f1f5f9;
    padding: 1.5rem;
    border-radius: 12px;
    margin: 2rem 0;
    display: flex;
    gap: 1rem;
    align-items: center;
    break-inside: avoid;
}


/* =========================================
               Estilos para Notas Recomendadas (Inline)
               ========================================= */
.inline-news-card-wrapper {
    margin: 0.65rem 0;
    position: relative;
    break-inside: avoid;
}

@media (min-width: 768px) {
    .inline-news-card-wrapper {
        margin: 1.5rem 0;
        max-width: 874px;
        margin-left: auto;
        margin-right: auto;
    }
}

.inline-news-card {
    background: #e4f0f9;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
    text-decoration: none !important;
    max-width: 340px !important;
}

.inline-news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.inline-news-card img {
    width: 100% !important;
    height: 200px !important;
    max-height: 200px !important;
    object-fit: cover !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

.inline-news-card-content {
    padding: 0.79rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.inline-news-card-title {
    font-size: 0.7rem !important;
    font-weight: bold;
    line-height: 1.2 !important;
    color: #204262 !important;
    margin: 0 !important;
}

@media (min-width: 768px) {
    .inline-news-card-title {
        font-size: 0.9rem !important;
    }
}

/* =========================================
               Estilos para Galerías WP con Lightbox
               ========================================= */
.post-content .gallery {
    display: grid;
    gap: 10px;
    /* Gap más pequeño para parecer galería moderna */
    margin: 0.79rem 0;
    /* Base: 3 columnas, pero puedes cambiarlo a 2 si prefieres fotos más grandes */
    grid-template-columns: repeat(3, 1fr);
    break-inside: avoid;
    overflow: hidden;
    /* Asegura que la cuadrícula tenga bordes redondeados globales */
    display: flex;
    align-items: center;
}

@media (min-width: 768px) {
    .post-content .gallery {
        margin: 2rem auto;
        max-width: 874px;
    }
}

.post-content .gallery-item {
    margin: 0;
    display: block;
    /* Flex no es necesario aquí */
}

/* ¡EL TRUCO MÁGICO!
             Ocultamos todas las figuras a partir de la 4ta.
             Si quieres mostrar 6 fotos y ocultar el resto, cambia n+4 por n+7.
            */
.post-content .gallery-item:nth-child(n + 4) {
    display: none;
}

/* Ajustes estéticos si la galería tiene 1 o 2 fotos */
.post-content .gallery-item:first-child:nth-last-child(1) {
    grid-column: span 3;
}

.post-content .gallery-item:first-child:nth-last-child(2),
.post-content .gallery-item:nth-child(2):nth-last-child(1) {
    grid-column: span 1.5;
}

/* Requiere ajuste manual o span 1 si sobran huecos */

/* Estilo para el enlace y la imagen */
.post-content .gallery-icon a {
    display: block;
    width: 100%;
    height: 100%;
    /* Asegura que llene la celda */
    position: relative;
}

/* Indicador visual de "+ fotos" en la última miniatura visible */
.post-content .gallery-icon a.has-more-photos::after {
    content: attr(data-remaining);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    font-weight: bold;
    pointer-events: none;
    /* Permite el click a Lightbox */
    z-index: 10;
}

.post-content .gallery-icon img {
    width: 100%;
    height: 200px;
    /* Altura fija para la cuadrícula inicial */
    object-fit: cover;
    margin: 0 !important;
    border-radius: 0;
    /* Quitamos el border-radius individual... */
    display: block;
    cursor: zoom-in;
    /* Le dice al usuario que se puede abrir */
    transition: opacity 0.2s;
}

.post-content .gallery-icon img:hover {
    opacity: 0.85;
    /* Un efecto más sutil y elegante que el scale */
}

/* Fix para PhotoSwipe: Mantiene la proporción original y el centrado exacto */
.pswp__img {
    object-fit: contain !important;
}

/* Ocultamos los captions en la vista principal para que quede limpio, se verán en el Lightbox */
.post-content .gallery-caption {
    display: none;
}

/* 2. Diseño limpio y seguro para el pie de galería único */
.pswp__custom-caption {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 1.1rem;
    text-align: center;
    max-width: 90%;
    width: max-content;
    z-index: 1000;
    line-height: 1.2;
}

.pswp__custom-caption:not(:empty) {
    opacity: 1;
}