/* --- Texto y encabezados --- */
.article-text p,
.article-text h2,
.article-text h3,
.article-text h4,
.article-text ul,
.article-text ol {
    max-width: 600px;
    margin: auto !important;
}

.article-text p {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.article-text h2 {
    padding-top: 2rem;
    padding-bottom: 0.75rem;
    color: var(--col-green-0);
}
@media (max-width: 768px) {
    .article-text h2 {
        font-size: 2rem;
    }
}

.article-text h3 {
    padding-top: 2rem;
    padding-bottom: 0.75rem;
    color: var(--col-green-1);
}

.article-text h4 {
    padding-top: 2rem;
    padding-bottom: 0.75rem;
    color: var(--col-green-1);
    font-size: 1.2rem;
    font-family: inherit;
    font-weight: 300;
}

.article-text strong {
    font-weight: 500;
}

.article-text big {
    font-size: 1.3rem;
    font-family: var(--font-1);
}

/* --- Bloques y listas --- */
.article-text div {
    padding: 0.75rem 1.2rem;
    margin: 0.75rem auto;
    background-color: var(--col-red-5);
    max-width: 600px;
    border-radius: 5px;
}

.article-text ul {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    list-style-type: disc;
    padding-left: 0;
    padding-right: 0;
    margin: 0;
}

.article-text ul li {
    padding-left: 1rem;
    margin-left: 1rem;
    margin-bottom: 1.5rem;
}

.article-text ul li ul {
    padding: 0;
}

.article-text ul li::marker {
    color: var(--col-green-2);
}

.article-text ol {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 0;
    margin: 0;
    position: relative;
    left: 1rem;
}

.article-text ol li {
    padding-left: 1rem;
}

/* --- Enlaces --- */
.article-text a,
.article-text a span {
    color: inherit !important;
    box-shadow: inset 0rem -0.2rem var(--col-green-4) !important;
    transition: all ease .3s !important;
}

.article-text a:hover,
.article-text a span:hover {
    text-decoration: none !important;
    box-shadow: inset 0rem -1.3rem var(--col-green-4) !important;
}

/* --- Otros estilos --- */
u {
    text-decoration: none;
}

.article-meta {
    font-size: .9rem;
}

/* --- Citas --- */
blockquote {
    margin: 0.75rem auto;
    text-align: left;
    width: 100%;
    max-width: 750px;
    border-left: 2px solid var(--col-green-4);
    font-size: 1.2rem;
    color: var(--col-green-1);
}

blockquote p {
    text-align: left;
    padding-left: 5%;
    padding-right: 5%;
}

/* --- Imágenes y figuras --- */
.article-text p img {
    margin: auto;
    width: 100%;
    height: auto;
}

figure {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

figure.image {
    margin: auto;
    max-width: 750px;
}

figure.image img {
    width: 100%;
    height: auto;
}

figure.image figcaption {
    width: 100%;
    max-width: 750px;
    border-left: 2px solid var(--col-green-4);
    padding: 0.3rem 0.5rem;
    margin-top: 0.5rem !important;
    text-align: left;
    font-style: italic;
}

/* --- Tablas --- */
.article-text table {
    border: none !important;
    width: 100% !important;
    max-width: 750px;
    margin: auto;
    table-layout: fixed;
}

.article-text hr {
    max-width: 750px;
    border-top: 2px solid var(--col-green-4);
}

.article-text tr td:first-child {
    text-align: center;
    font-size: 2rem;
    font-family: var(--font-1);
    color: var(--col-green-2);
}

.article-text tr td:nth-child(2),
.article-text tr td:nth-child(2) p {
    font-size: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: left;
}

.article-text tr td small {
    display: inline-block;
    text-transform: capitalize;
    color: black;
    font-size: 0.8rem;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    transform-origin: 40% 30%;
    margin-left: 0.2rem;
}

/* --- Carousel y recursos --- */
#carouselArticles .carousel-control-next {
    right: -10%;
}
#carouselArticles .carousel-control-prev {
    left: -10%;
}

div .resource {
    padding: 0.75rem 1.2rem;
    margin: 0.75rem auto;
    background-color: var(--col-green-5);
    max-width: calc(600px + 2.4rem);
    border-radius: 5px;
}

/* --- Social y cabecera --- */
#article-social-btns {
    text-align: center;
    font-size: 0.8rem;
    padding-top: 8rem;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

#article-social-btns-container {
    position: absolute;
    right: 0;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 1;
}

.header-col {
    background-color: white;
    padding-top: 3.3rem;
    padding-right: 3.3rem;
    padding-left: 0;
    border-radius: 10px;
}
@media (max-width: 768px) {
    .header-col {
        padding-right: 2rem;
    }
}
@media (max-width: 576px) {
    .header-col {
        padding-right: 1.5rem;
        padding-top: 1.5rem;
    }
}

.header-container {
    margin-left: 2rem;
}
@media (max-width: 768px) {
    .header-container {
        margin-left: 1.5rem;
    }
}
@media (max-width: 576px) {
    .header-container {
        margin-left: 1rem;
    }
}

/* --- Video y contenedores --- */
.video-cont {
    padding: 3rem 3rem 3rem 2rem;
}
@media (max-width: 576px) {
    .video-cont {
        padding: 0;
    }
}

#article-social-rounded-bg {
    width: 50%;
    background-color: white;
    border-radius: 40px;
    position: relative;
    margin: 0 auto;
}

.article-bottom-cont {
    max-width: 1400px;
    padding-top: 5rem;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}
@media (max-width: 576px) {
    .article-bottom-cont {
        padding-top: 2rem;
    }
}

.article-thumbnail-cont {
    width: 450px;
    padding: 1rem;
}

#comments-cont {
    padding-right: 5%;
    padding-left: 5%;
    max-width: 1400px;
    padding-top: 5rem;
}

.vrec-container {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    position: relative;
}

.vrec-ad {
    min-height: 600px;
    position: sticky;
    top: 90px;
}

/* --- Card Hover --- */
.card-hover {
    transition: transform 0.3s cubic-bezier(.4,2,.6,1), box-shadow 0.3s cubic-bezier(.4,2,.6,1);
    will-change: transform, box-shadow;
    border-radius: 18px;
    overflow: hidden;
}
.card-hover:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 32px rgba(0,0,0,0.13);
    z-index: 2;
    text-decoration: none;
}
.card-hover .card-img {
    border-radius: 18px 18px 0 0;
}

.card-img-top {
    width: 100% !important;
    height: 240px !important;
    object-fit: cover !important;
    background: #f4f4f4 !important;
}