/* =========================================================
   08. SINGLE
   Noticias individuales
   Theme: PortalGeek Isopixel
   ========================================================= */


/* =========================================================
   01. ESTRUCTURA GENERAL
   ========================================================= */

.pgi-single-wrap {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        var(--pg-sidebar-width);

    gap: 28px;

    align-items: start;

    padding-top: 34px;
    padding-bottom: 34px;
}


.pgi-single-main,
.pgi-single,
.pgi-single-sidebar {
    min-width: 0;
}


.pgi-single {
    overflow: hidden;

    background: #151515;

    color: var(--pg-white);
}


/* =========================================================
   02. ENCABEZADO
   ========================================================= */

.pgi-single__header {
    padding:
        0
        20px
        22px;
}


/* =========================================================
   CATEGORÍAS
   ========================================================= */

.pgi-single__categories {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-bottom: 12px;
}


.pgi-single__category {
    display: inline-flex;
    align-items: center;

    margin: 0;

    padding:
        5px
        8px;

    background: var(--pg-red);

    color: var(--pg-white);

    font-size: 9px;
    font-weight: 800;

    line-height: 1;

    text-decoration: none;
    text-transform: uppercase;

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


.pgi-single__category:hover {
    color: inherit;

    filter: brightness(1.12);

    transform: translateY(-1px);
}


/* =========================================================
   TÍTULO
   Más compacto
   ========================================================= */

.pgi-single__title {
    max-width: 980px;

    margin: 0;

    color: var(--pg-white);

    font-size:
        clamp(
            32px,
            3.3vw,
            50px
        );

    font-weight: 900;

    line-height: 1.02;

    letter-spacing: -0.035em;
}


/* =========================================================
   META
   ========================================================= */

.pgi-single__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 6px;

    margin-top: 14px;

    color: #9b9b9b;

    font-size: 11px;
    line-height: 1.35;
}


.pgi-single__meta a {
    color: #d9d9d9;

    font-weight: 700;

    text-decoration: none;
}


.pgi-single__meta a:hover {
    color: var(--pg-white);
}


.pgi-single__meta-separator {
    color: #555555;
}


/* =========================================================
   03. IMAGEN DESTACADA
   ========================================================= */

.pgi-single__hero {
    width: 100%;

    margin: 0;

    background: #0d0d0d;
}


.pgi-single__hero-image {
    display: block;

    width: 100%;
    height: auto;

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

    object-fit: contain;
    object-position: center;
}


.pgi-single__caption {
    padding:
        9px
        20px;

    color: #8e8e8e;

    font-size: 11px;
    line-height: 1.45;
}


/* =========================================================
   04. HERRAMIENTAS
   Compartir + AtlasVoice
   ========================================================= */

.pgi-single-tools {
    display: grid;

    gap: 15px;

    padding:
        16px
        20px
        18px;

    border-top: 1px solid #242424;
    border-bottom: 1px solid #242424;

    background: #111111;
}


/* =========================================================
   COMPARTIR
   ========================================================= */

.pgi-share {
    position: static;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    width: auto;

    gap: 12px;
}


.pgi-share__title {
    display: inline-block;

    color: #8f8f8f;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.65px;

    text-transform: uppercase;
}


.pgi-share__buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px;
}


.pgi-share__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 38px;
    height: 38px;

    padding:
        0
        11px;

    border: 1px solid #303030;

    background: #1b1b1b;

    color: #ffffff;

    font-size: 13px;
    font-weight: 800;

    line-height: 1;

    text-decoration: none;

    cursor: pointer;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}


.pgi-share__button svg {
    display: block;

    width: 17px;
    height: 17px;

    fill: currentColor;
}


.pgi-share__button:hover {
    background: var(--pg-red);

    border-color: var(--pg-red);

    color: #ffffff;

    transform: translateY(-2px);
}


.pgi-share__button--copy {
    gap: 6px;

    padding:
        0
        13px;
}


.pgi-share__button--copy.is-copied {
    background: #2b2b2b;

    border-color: #444444;
}


.pgi-share__label {
    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.3px;

    text-transform: uppercase;
}


/* =========================================================
   ATLASVOICE
   Siempre dentro del artículo
   ========================================================= */

.pgi-single-listen {
    position: static !important;

    inset: auto !important;

    display: block;

    width: 100%;

    padding-top: 14px;

    /* Un solo separador entre Compartir y Escuchar noticia */
    border-top: 1px solid #262626;

    float: none !important;

    transform: none !important;
}


.pgi-single-listen__title {
    display: block;

    margin-bottom: 8px;

    color: #8f8f8f;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.65px;

    text-transform: uppercase;
}


.pgi-single-listen__player {
    position: static !important;

    inset: auto !important;

    width: 100%;

    float: none !important;

    transform: none !important;
}


.pgi-single-listen__player > * {
    position: relative !important;

    inset: auto !important;

    width: 100%;
    max-width: 100%;

    margin: 0 !important;

    float: none !important;

    transform: none !important;
}


.pgi-single-listen__player button,
.pgi-single-listen__player [role="button"] {
    border-radius: 0 !important;
}


.pgi-single-listen__player button {
    min-height: 46px !important;
}


/* =========================================================
   05. CONTENIDO
   ========================================================= */

.pgi-single__content {
    padding:
        23px
        20px
        21px;

    color: #e3e3e3;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 16px;

    line-height: 1.72;
}


.pgi-single__content > *:first-child {
    margin-top: 0;
}


.pgi-single__content > *:last-child {
    margin-bottom: 0;
}


.pgi-single__content p {
    margin:
        0
        0
        19px;
}


.pgi-single__content > p:first-of-type {
    color: #eeeeee;

    font-size: 17px;

    line-height: 1.7;
}


/* =========================================================
   ENCABEZADOS INTERNOS
   ========================================================= */

.pgi-single__content h2,
.pgi-single__content h3,
.pgi-single__content h4 {
    margin-top: 30px;
    margin-bottom: 12px;

    color: var(--pg-white);

    font-weight: 850;

    line-height: 1.12;

    letter-spacing: -0.02em;
}


.pgi-single__content h2 {
    font-size: 25px;
}


.pgi-single__content h3 {
    font-size: 21px;
}


.pgi-single__content h4 {
    font-size: 18px;
}


/* =========================================================
   LISTAS
   ========================================================= */

.pgi-single__content ul,
.pgi-single__content ol {
    margin:
        0
        0
        20px;

    padding-left: 24px;
}


.pgi-single__content li {
    margin-bottom: 7px;
}


/* =========================================================
   ENLACES
   ========================================================= */

.pgi-single__content a {
    color: #f0f0f0;

    text-decoration: underline;

    text-decoration-color: #666666;

    text-underline-offset: 3px;
}


.pgi-single__content a:hover {
    color: var(--pg-white);

    text-decoration-color: var(--pg-red);
}


/* =========================================================
   IMÁGENES / VIDEO
   ========================================================= */

.pgi-single__content img {
    max-width: 100%;

    height: auto;
}


/* ---------------------------------------------------------
   ESPACIADO DE IMÁGENES INTERNAS
   Gutenberg + editor clásico + imágenes sueltas
   --------------------------------------------------------- */

/* Bloques de imagen de Gutenberg */
.pgi-single__content figure.wp-block-image {
    margin:
        0
        0
        24px;
}


/* Imágenes con caption del editor clásico */
.pgi-single__content .wp-caption {
    max-width: 100%;

    margin-bottom: 24px;
}


/* Imágenes sueltas insertadas directamente en el contenido */
.pgi-single__content > img,
.pgi-single__content > a > img {
    display: block;

    margin-bottom: 24px;
}


/* Imágenes antiguas / editor clásico que WordPress mete dentro de un <p> */
.pgi-single__content p > img,
.pgi-single__content p > a > img {
    display: block;

    margin-bottom: 24px;
}


/* Si el párrafo contiene únicamente una imagen, el espacio va en el párrafo */
.pgi-single__content p:has(> img:only-child),
.pgi-single__content p:has(> a:only-child > img:only-child) {
    margin-bottom: 24px;
}


/* Evita espacio raro debajo de la propia imagen dentro del figure */
.pgi-single__content figure.wp-block-image > img,
.pgi-single__content figure.wp-block-image > a > img,
.pgi-single__content .wp-caption img {
    display: block;

    margin-bottom: 0;
}


/* Caption de Gutenberg */
.pgi-single__content figure.wp-block-image figcaption {
    margin-top: 8px;
    margin-bottom: 0;

    color: #8e8e8e;

    font-size: 11px;
    line-height: 1.45;
}


.pgi-single__content iframe {
    max-width: 100%;
}


/* =========================================================
   CITAS
   ========================================================= */

.pgi-single__content blockquote {
    position: relative;

    max-width: 760px;

    margin:
        30px
        auto;

    padding:
        24px
        32px;

    border-top: 1px solid #555555;
    border-bottom: 1px solid #555555;

    color: #eeeeee;

    font-size: 17px;
    font-style: italic;

    line-height: 1.6;

    text-align: center;
}


.pgi-single__content blockquote::before {
    position: absolute;

    top: -19px;
    left: 50%;

    padding:
        0
        12px;

    background: #151515;

    color: #8a8a8a;

    font-size: 40px;

    line-height: 1;

    content: "“";

    transform: translateX(-50%);
}


.pgi-single__content blockquote p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   TABLAS
   ========================================================= */

.pgi-single__content table {
    display: block;

    width: 100%;

    overflow-x: auto;

    border-collapse: collapse;
}


.pgi-single__content th,
.pgi-single__content td {
    padding: 10px;

    border: 1px solid #343434;
}


/* =========================================================
   PÁGINAS INTERNAS
   ========================================================= */

.pgi-page-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 8px;

    margin-top: 24px;

    padding-top: 16px;

    border-top: 1px solid #2b2b2b;
}


/* =========================================================
   06. ETIQUETAS
   ========================================================= */

.pgi-single__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 8px;

    padding:
        7px
        20px
        24px;
}


.pgi-single__tags-label {
    color: #8f8f8f;

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
}


.pgi-single__tags a {
    display: inline-flex;

    padding:
        6px
        9px;

    background: #202020;

    color: #cfcfcf;

    font-size: 11px;

    text-decoration: none;
}


.pgi-single__tags a:hover {
    background: #292929;

    color: var(--pg-white);
}


/* =========================================================
   07. NAVEGACIÓN ANTERIOR / SIGUIENTE
   ========================================================= */

.pgi-post-navigation {
    display: grid;

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

    gap: 18px;

    margin:
        0
        20px;

    padding:
        22px
        0;

    border-top: 1px solid #303030;
}


.pgi-post-navigation__item {
    min-width: 0;
}


.pgi-post-navigation__item--next {
    text-align: right;
}


.pgi-post-navigation__label {
    display: block;

    margin-bottom: 6px;

    color: #7f7f7f;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.5px;

    text-transform: uppercase;
}


.pgi-post-navigation a {
    color: #dcdcdc;

    font-size: 12px;
    font-weight: 700;

    line-height: 1.4;

    text-decoration: none;
}


.pgi-post-navigation a:hover {
    color: var(--pg-white);
}


/* =========================================================
   08. MÁS HISTORIAS
   ========================================================= */

.pgi-related {
    margin-top: 28px;
}


.pgi-related__heading {
    position: relative;

    margin-bottom: 14px;

    padding-bottom: 8px;
}


.pgi-related__heading::after {
    position: absolute;

    bottom: 0;
    left: 0;

    width: 42px;
    height: 2px;

    background: var(--pg-red);

    content: "";
}


.pgi-related__heading h2 {
    margin: 0;

    color: var(--pg-white);

    font-size: 16px;
    font-weight: 850;

    line-height: 1.12;
}


.pgi-related__grid {
    display: grid;

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

    gap: 12px;
}


.pgi-related-card {
    min-width: 0;

    overflow: hidden;

    background: #1a1a1a;
}


.pgi-related-card__image {
    display: block;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    background: #0e0e0e;
}


.pgi-related-card__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.3s ease;
}


.pgi-related-card:hover .pgi-related-card__image img {
    transform: scale(1.035);
}


.pgi-related-card__content {
    padding: 12px;
}


.pgi-related-card__categories {
    display: flex;
    flex-wrap: wrap;

    gap: 5px;

    margin-bottom: 8px;
}


.pgi-related-card__category {
    display: inline-flex;
    align-items: center;

    margin: 0;

    padding:
        5px
        7px;

    background: var(--pg-red);

    color: var(--pg-white);

    font-size: 9px;
    font-weight: 800;

    line-height: 1;

    text-decoration: none;
    text-transform: uppercase;
}


.pgi-related-card__category:hover {
    color: inherit;

    filter: brightness(1.12);
}


.pgi-related-card__title {
    margin: 0;

    font-size: 14px;

    line-height: 1.22;
}


.pgi-related-card__title a {
    color: var(--pg-white);

    text-decoration: none;
}


.pgi-related-card__title a:hover {
    color: #d8d8d8;
}


.pgi-related-card__meta {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 8px;

    color: #838383;

    font-size: 9px;
}


/* =========================================================
   09. SIDEBAR
   ========================================================= */

.pgi-single-sidebar {
    align-self: start;
}


.pgi-single-sidebar .pgi-sidebar-editorial {
    position: sticky;

    top: 20px;
}


.pgi-single-sidebar .pgi-sidebar-section {
    margin-bottom: 24px;
}


/* =========================================================
   10. REDES SOCIALES FLOTANTES
   Oficiales de PortalGeek
   ========================================================= */

.pgi-floating-social {
    position: fixed;

    top: 50%;
    right: 18px;
    left: auto;

    z-index: 80;

    display: flex;
    flex-direction: column;

    gap: 7px;

    transform: translateY(-50%);
}


.pgi-floating-social__link {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    border: 1px solid transparent;

    color: #ffffff;

    text-decoration: none;

    box-shadow:
        0
        5px
        18px
        rgba(0, 0, 0, 0.28);

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


.pgi-floating-social__link svg {
    display: block;

    width: 19px;
    height: 19px;

    fill: currentColor;
}


.pgi-floating-social__link--facebook {
    background: #1877f2;

    border-color: #1877f2;
}


.pgi-floating-social__link--instagram {
    background:
        linear-gradient(
            135deg,
            #833ab4 0%,
            #c13584 32%,
            #e1306c 55%,
            #fd1d1d 72%,
            #fcb045 100%
        );

    border-color: #c13584;
}


.pgi-floating-social__link--x {
    background: #050505;

    border-color: #353535;
}


.pgi-floating-social__link--youtube {
    background: #ff0000;

    border-color: #ff0000;
}


.pgi-floating-social__link--tiktok {
    background:
        linear-gradient(
            135deg,
            #25f4ee 0%,
            #111111 42%,
            #111111 58%,
            #fe2c55 100%
        );

    border-color: #292929;
}


.pgi-floating-social__link:hover {
    background: #383838;

    border-color: #505050;

    color: #ffffff;

    transform: translateX(-3px);
}


/* =========================================================
   11. COMENTARIOS DARK
   ========================================================= */

.pgi-comments {
    margin:
        26px
        20px
        0;

    padding-top: 24px;

    border-top: 1px solid #303030;
}


.pgi-comments__header {
    margin-bottom: 18px;
}


.pgi-comments__title,
.pgi-comment-form__title {
    margin:
        0
        0
        16px;

    color: var(--pg-white);

    font-size: 21px;
    font-weight: 850;

    line-height: 1.12;

    letter-spacing: -0.02em;
}


.pgi-comments__list,
.pgi-comments__list .children {
    margin: 0;

    padding: 0;

    list-style: none;
}


.pgi-comments__list .children {
    margin-top: 14px;
    margin-left: 38px;
}


.pgi-comment {
    margin-bottom: 18px;
}


.pgi-comment__body {
    display: grid;

    grid-template-columns:
        54px
        minmax(0, 1fr);

    gap: 14px;

    padding: 16px;

    border: 1px solid #2c2c2c;

    background: #111111;
}


.pgi-comment__avatar-image {
    display: block;

    width: 54px;
    height: 54px;

    border-radius: 50%;

    object-fit: cover;
}


.pgi-comment__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 8px;

    margin-bottom: 9px;
}


.pgi-comment__author {
    color: var(--pg-white);

    font-size: 14px;
    font-weight: 800;
}


.pgi-comment__author a {
    color: inherit;

    text-decoration: none;
}


.pgi-comment__date a {
    color: #777777;

    font-size: 11px;

    text-decoration: none;
}


.pgi-comment__text {
    color: #d5d5d5;

    font-size: 15px;

    line-height: 1.65;
}


.pgi-comment__text p:last-child {
    margin-bottom: 0;
}


.pgi-comment__reply {
    margin-top: 11px;
}


.pgi-comment__reply a {
    display: inline-flex;

    padding:
        6px
        9px;

    background: #242424;

    color: #d6d6d6;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
    text-transform: uppercase;
}


.pgi-comment__reply a:hover {
    background: var(--pg-red);

    color: #ffffff;
}


.pgi-comment__moderation {
    margin:
        0
        0
        10px;

    color: #d8a94e;

    font-size: 12px;
}


/* =========================================================
   FORMULARIO COMENTARIOS
   ========================================================= */

.pgi-comment-form {
    margin-top: 26px;

    padding: 20px;

    border: 1px solid #2c2c2c;

    background: #101010;
}


.pgi-comment-form__note {
    margin:
        0
        0
        16px;

    color: #7f7f7f;

    font-size: 13px;

    line-height: 1.5;
}


.pgi-comment-form p {
    margin:
        0
        0
        14px;
}


.pgi-comment-form label {
    display: block;

    margin-bottom: 8px;

    color: #a8a8a8;

    font-size: 12px;
    font-weight: 800;

    line-height: 1.3;

    text-transform: uppercase;
}


.pgi-comment-form input[type="text"],
.pgi-comment-form input[type="email"],
.pgi-comment-form input[type="url"],
.pgi-comment-form textarea {
    width: 100%;

    padding:
        12px
        13px;

    border: 1px solid #343434;
    border-radius: 0;

    outline: none;

    background: #181818;

    color: #ffffff;

    font-size: 15px;

    line-height: 1.5;
}


.pgi-comment-form textarea {
    min-height: 180px;

    resize: vertical;
}


.pgi-comment-form input:focus,
.pgi-comment-form textarea:focus {
    border-color: #666666;

    background: #1d1d1d;
}


.pgi-comment-form .comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    margin-top: 4px;
}


.pgi-comment-form .comment-form-cookies-consent input {
    flex: 0 0 auto;

    width: 16px;
    height: 16px;

    margin-top: 2px;
}


.pgi-comment-form .comment-form-cookies-consent label {
    margin: 0;

    color: #b8b8b8;

    font-size: 12px;
    font-weight: 600;

    line-height: 1.5;

    text-transform: none;
}


.pgi-comment-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;

    padding:
        0
        20px;

    border: 0;

    background: var(--pg-red);

    color: #ffffff;

    font-size: 12px;
    font-weight: 850;

    text-transform: uppercase;

    cursor: pointer;
}


.pgi-comment-form__submit:hover {
    background: #3b3b3b;
}


.pgi-comments__closed {
    padding: 14px;

    background: #111111;

    color: #888888;

    font-size: 12px;
}


/* =========================================================
   12. RESPONSIVE — NOTEBOOK
   ========================================================= */

@media (max-width: 1100px) {

    .pgi-single-wrap {
        grid-template-columns:
            minmax(0, 1fr)
            280px;

        gap: 22px;
    }


    .pgi-single__title {
        font-size:
            clamp(
                30px,
                4vw,
                44px
            );
    }


    .pgi-related__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .pgi-floating-social {
        right: 8px;
    }


    .pgi-floating-social__link {
        width: 40px;
        height: 40px;
    }

}


/* =========================================================
   13. RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 820px) {

    .pgi-single-wrap {
        display: block;

        padding-top: 26px;
    }


    .pgi-single-main {
        width: 100%;
    }


    .pgi-single-sidebar {
        margin-top: 32px;
    }


    .pgi-single-sidebar .pgi-sidebar-editorial {
        position: static;
    }


    .pgi-single__header {
        padding:
            0
            18px
            20px;
    }


    .pgi-single__title {
        font-size:
            clamp(
                29px,
                7vw,
                40px
            );

        line-height: 1.03;
    }


    .pgi-single__content {
        padding:
            20px
            18px;

        font-size: 16px;
    }


    .pgi-related__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* =====================================================
       COMPARTIR
       Fix fuerte de SVG móvil
       ===================================================== */

    .pgi-single .pgi-single-tools {
        display: grid !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 15px !important;

        padding:
            16px
            15px
            18px !important;

        overflow: hidden !important;

        background: #111111 !important;
    }


    .pgi-single .pgi-share {
        position: static !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        transform: none !important;
    }


    .pgi-single .pgi-share__title {
        display: block !important;

        margin:
            0
            0
            10px !important;

        font-size: 11px !important;
    }


    .pgi-single .pgi-share__buttons {
        display: flex !important;

        flex-direction: row !important;
        flex-wrap: wrap !important;

        align-items: center !important;

        width: 100% !important;

        gap: 6px !important;
    }


    .pgi-single .pgi-share__button {
        display: inline-flex !important;

        flex:
            0
            0
            auto !important;

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

        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;

        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;

        margin: 0 !important;

        padding: 0 !important;

        overflow: hidden !important;

        transform: none !important;
    }


    .pgi-single .pgi-share__button svg {
        display: block !important;

        flex:
            0
            0
            17px !important;

        width: 17px !important;
        min-width: 17px !important;
        max-width: 17px !important;

        height: 17px !important;
        min-height: 17px !important;
        max-height: 17px !important;

        margin: 0 !important;

        padding: 0 !important;

        fill: currentColor !important;

        transform: none !important;
    }


    .pgi-single .pgi-share__button--copy {
        width: auto !important;

        min-width: 82px !important;
        max-width: none !important;

        gap: 6px !important;

        padding:
            0
            12px !important;
    }


    .pgi-single .pgi-share__button--copy svg {
        flex-basis: 16px !important;

        width: 16px !important;
        min-width: 16px !important;
        max-width: 16px !important;

        height: 16px !important;
        min-height: 16px !important;
        max-height: 16px !important;
    }


    .pgi-single .pgi-share__label {
        display: inline !important;

        font-size: 10px !important;
    }


    /* =====================================================
       REDES OFICIALES
       Barra inferior
       ===================================================== */

    .pgi-floating-social {
        top: auto;

        right: 50%;
        bottom: 12px;
        left: auto;

        flex-direction: row;

        gap: 5px;

        padding: 5px;

        background:
            rgba(
                15,
                15,
                15,
                0.94
            );

        border: 1px solid #333333;

        transform:
            translateX(50%);
    }


    .pgi-floating-social__link {
        width: 38px;
        height: 38px;

        box-shadow: none;
    }


    .pgi-floating-social__link:hover {
        background: #383838;

        border-color: #505050;

        transform:
            translateY(-2px);
    }

}


/* =========================================================
   14. RESPONSIVE — MÓVIL
   ========================================================= */

@media (max-width: 620px) {

    .pgi-single-wrap {
        padding-top: 22px;
        padding-bottom: 78px;
    }


    .pgi-single__header {
        padding:
            0
            15px
            18px;
    }


    .pgi-single__categories {
        margin-bottom: 11px;
    }


    .pgi-single__category {
        padding:
            5px
            8px;

        font-size: 9px;
    }


    .pgi-single__title {
        font-size:
            clamp(
                27px,
                8.2vw,
                34px
            );

        line-height: 1.04;

        letter-spacing: -0.03em;
    }


    .pgi-single__meta {
        gap: 5px;

        margin-top: 12px;

        font-size: 10px;
    }


    /* =====================================================
       IMAGEN DESTACADA — MÓVIL
       Mantener proporción completa y evitar el recorte lateral
       ===================================================== */

    .pgi-single__hero {
        width: 100% !important;

        margin-right: 0 !important;
        margin-left: 0 !important;

        overflow: hidden;

        background: #0d0d0d;
    }


    .pgi-single__hero-image {
        display: block;

        width: 100% !important;
        height: auto !important;

        max-width: 100% !important;
        max-height: none !important;

        object-fit: contain !important;
        object-position: center !important;
    }


    .pgi-single__caption {
        padding:
            9px
            15px;
    }


    .pgi-single__content {
        padding:
            18px
            15px;

        font-size: 15.5px;

        line-height: 1.68;
    }


    .pgi-single__content > p:first-of-type {
        font-size: 16.5px;

        line-height: 1.68;
    }


    .pgi-single__content p {
        margin-bottom: 18px;
    }


    .pgi-single__content h2 {
        font-size: 23px;
    }


    .pgi-single__content h3 {
        font-size: 20px;
    }


    .pgi-single__content blockquote {
        margin:
            28px
            0;

        padding:
            24px
            18px;

        font-size: 16px;
    }


    .pgi-single__tags {
        padding:
            8px
            15px
            22px;
    }


    .pgi-post-navigation {
        grid-template-columns:
            1fr;

        gap: 20px;

        margin:
            0
            15px;
    }


    .pgi-post-navigation__item--next {
        text-align: left;
    }


    .pgi-related {
        margin-top: 26px;
    }


    .pgi-related__heading::after {
        width: 36px;
    }


    .pgi-related__grid {
        grid-template-columns:
            1fr;

        gap: 18px;
    }


    .pgi-related-card__image {
        aspect-ratio: 16 / 9;
    }


    .pgi-related-card__content {
        padding: 14px;
    }


    .pgi-related-card__title {
        font-size: 18px;

        line-height: 1.2;
    }


    .pgi-related-card__meta {
        font-size: 10px;
    }


    .pgi-comments {
        margin:
            24px
            15px
            0;
    }


    .pgi-comments__title,
    .pgi-comment-form__title {
        font-size: 20px;
    }


    .pgi-comment__body {
        grid-template-columns:
            42px
            minmax(0, 1fr);

        gap: 11px;

        padding: 13px;
    }


    .pgi-comment__avatar-image {
        width: 42px;
        height: 42px;
    }


    .pgi-comments__list .children {
        margin-left: 18px;
    }


    .pgi-comment-form {
        padding: 15px;
    }


    .pgi-comment-form__note {
        font-size: 12.5px;
    }


    .pgi-comment-form label {
        font-size: 11.5px;
    }


    .pgi-comment-form input[type="text"],
    .pgi-comment-form input[type="email"],
    .pgi-comment-form input[type="url"],
    .pgi-comment-form textarea {
        font-size: 16px;
    }


    .pgi-comment-form__submit {
        width: 100%;

        min-height: 48px;
    }


    .pgi-floating-social {
        bottom: 10px;
    }


    .pgi-floating-social__link {
        width: 36px;
        height: 36px;
    }


    .pgi-floating-social__link svg {
        width: 16px;
        height: 16px;
    }

}


/* =========================================================
   15. MÓVIL PEQUEÑO
   ========================================================= */

@media (max-width: 420px) {

    .pgi-single__title {
        font-size: 27px;
    }


    .pgi-single__content {
        padding:
            17px
            14px;

        font-size: 15px;
    }


    .pgi-single__content h2 {
        font-size: 22px;
    }


    .pgi-single__content h3 {
        font-size: 19px;
    }


    .pgi-related-card__title {
        font-size: 17px;
    }


    .pgi-floating-social {
        max-width:
            calc(
                100vw - 20px
            );

        overflow-x: auto;
    }


    .pgi-floating-social__link {
        flex:
            0
            0
            36px;
    }

}

/* =========================================================
   FIX DEFINITIVO — ESPACIO DESPUÉS DE IMÁGENES INTERNAS
   ========================================================= */

/* Gutenberg */
.pgi-single__content figure,
.pgi-single__content .wp-block-image {
    margin-bottom: 26px !important;
}

/* Editor clásico / imágenes dentro de párrafos */
.pgi-single__content p > img,
.pgi-single__content p > a > img {
    display: block;
    margin-bottom: 26px !important;
}

/* Si el párrafo contiene la imagen completa */
.pgi-single__content p:has(img) {
    margin-bottom: 26px !important;
}

/* Garantía extra: espacio en el bloque que viene después */
.pgi-single__content figure + p,
.pgi-single__content .wp-block-image + p,
.pgi-single__content p:has(img) + p {
    margin-top: 26px !important;
}