.article-page {
    background-color: #F6E9CD;
    padding: 33px 0;
}

.page-node.not-front main[role=main] article {
    margin: 0 33px;
    background-color: white;
}

.page-node.not-front main[role=main] .layout-content .container,
.page-node.not-front main[role=main] .layout-content .field-name-node-title,
.page-node.not-front main[role=main] .layout-content .field-name-body,
.page-node.not-front main[role=main] .layout-content .field-name-field-nombre-de-pila,
.page-node.not-front main[role=main] .layout-content .field-name-field-nombre,
.page-node.not-front main[role=main] .layout-content .field-name-node-author,
.page-node.not-front main[role=main] .layout-content .field-name-field-video-ref,
.page-node.not-front main[role=main] .layout-content .field-name-field-descripcion-2 {
    max-width: 720px;
    margin: 0 auto;
}

.page-node.not-front main[role=main] .layout-content .field-name-body::first-letter {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    margin: 0;
}
.page-node.not-front main[role=main] .layout-content .field-name-post-date {
    font-size: 16px;
    font-weight: 300;
    color: #000;
}

.page-node.not-front main[role=main] .layout-content .field-name-node-title h1 {
    font-size: 40px;
    font-weight: 500;
    color: #000;
}

.page-node.not-front main[role=main] .layout-content .field-name-field-lead p {
    max-width: 500px;
}

.page-node.not-front main[role=main] .layout-content .field-name-field-lead p em {
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
}

.page-node.not-front main[role=main] .layout-content .field-name-body p, 
.page-node.not-front main[role=main] .layout-content .field-name-body div, 
.page-node.not-front main[role=main] .layout-content .field-name-body ol li, 
.page-node.not-front main[role=main] .layout-content .field-name-body ul li, 
.page-node.not-front main[role=main] .layout-content .field-name-body a,
.page-node.not-front main[role=main] .layout-content .field-name-field-descripcion-2 p, 
.page-node.not-front main[role=main] .layout-content .field-name-field-descripcion-2 div, 
.page-node.not-front main[role=main] .layout-content .field-name-field-descripcion-2 ol li, 
.page-node.not-front main[role=main] .layout-content .field-name-field-descripcion-2 ul li, 
.page-node.not-front main[role=main] .layout-content .field-name-field-descripcion-2 a  {
    font-family: "Fira Sans", Helvetica;
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
}

.page-node.not-front main[role=main] .layout-content .field-name-body h1, 
.page-node.not-front main[role=main] .layout-content .field-name-body h2, 
.page-node.not-front main[role=main] .layout-content .field-name-body h3, 
.page-node.not-front main[role=main] .layout-content .field-name-body h4, 
.page-node.not-front main[role=main] .layout-content .field-name-body h5, 
.page-node.not-front main[role=main] .layout-content .field-name-body h6,
.page-node.not-front main[role=main] .layout-content .field-name-field-descripcion-2 h1, 
.page-node.not-front main[role=main] .layout-content .field-name-field-descripcion-2 h2, 
.page-node.not-front main[role=main] .layout-content .field-name-field-descripcion-2 h3, 
.page-node.not-front main[role=main] .layout-content .field-name-field-descripcion-2 h4, 
.page-node.not-front main[role=main] .layout-content .field-name-field-descripcion-2 h5, 
.page-node.not-front main[role=main] .layout-content .field-name-field-descripcion-2 h6  {
    color: #4F4F4F;
    font-family: "Fira Sans", Helvetica;
}

.page-node.not-front main[role=main] .layout-content .field-name-field-lead {
    border-bottom: #342f2f47 solid 0.25px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* o center */
    gap: 1rem; /* opcional */
}

.page-node.not-front main[role=main] .layout-content .social-icons {
    gap: 0.5rem;
}

.page-node.not-front main[role=main] .layout-content .social-icons a {
    color: #333;
    margin-left: 10px;
    text-decoration: none;
    font-size: 14px;
    width: 15px;
}


.page-node.not-front main[role=main] .layout-content .social-icons a:hover {
    color: #555;
}

.page-node.not-front main[role=main] .layout-content .social-icons a svg {
    max-width: 15px;
}


.page-node.not-front main[role=main] .layout-content .field-name-field-nombre-de-pila,
.page-node.not-front main[role=main] .layout-content .field-name-field-nombre,
.page-node.not-front main[role=main] .layout-content .field-name-node-author  {
    font-size: 24px;
    font-weight: 700;
    color: #000;
}

.page-node.not-front main[role=main] .layout-content .field-name-field-nombre-de-pila span,
.page-node.not-front main[role=main] .layout-content .field-name-field-nombre span,
.page-node.not-front main[role=main] .layout-content .field-name-node-author span {
    font-size: 24px;
    font-weight: 275;
    color: #000;
}

.page-node.not-front main[role=main] .layout-content .field-name-user article {
    margin: 0;
}

.page-node.not-front main[role=main] .layout-content .group-img-content {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--bs-gutter-x, 0.75rem);
    padding-right: var(--bs-gutter-x, 0.75rem);
    position: relative;
    margin-bottom: 1.5rem;
}

.page-node.not-front main[role=main] .layout-content .group-img-content .field-name-field-image {
    height: auto;
    margin-bottom: 40px;
}

.page-node.not-front main[role=main] .layout-content .group-img-content img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.75rem; /* esquinas redondeadas */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* sombra suave */
}

.page-node.not-front main[role=main] .layout-content .group-img-content .field-name-field-creditos-imagen {
    font-size: 12px;
    font-weight: 300;
    color: #000;
}


@media screen and (max-width: 767px) {
    .page-node.not-front main[role=main] article {
        margin: 0 10px;
    }

    .page-node.not-front:not(.page-historia-gabo) .field-name-body, .page-node.not-front .field-name-like-dislike, .page-node.not-front .field-name-dynamic-block-fieldme-gusta-no-me-gusta, .page-node.not-front #block-custom-layouts-continuar-leyendo, .page-node.not-front .field-name-field-video-ref, .page-node.not-front .field-name-field-gif, .page-node.not-front .field-name-field-descripcion-2, .page-node.not-front .field-name-field-audio-ref {
        padding: 0 !important;
    }
}