/* =====================================================
   BLOG PASTORAL
   IGLESIA LA LUZ DE DIOS
====================================================== */

/*==============================
PALETA INSTITUCIONAL
==============================*/

:root{

    --vino:#73030F;
    --vino-hover:#5b020b;

    --dorado:#EDAA11;
    --dorado-claro:#F6D41B;

    --gris:#6c757d;
    --gris-claro:#f8f9fa;

    --texto:#2d2d2d;

    --blanco:#ffffff;

    --radio:18px;

    --sombra:0 10px 35px rgba(0,0,0,.08);

}

/*==============================
GENERAL
==============================*/

body{

    background:#fafafa;

    color:var(--texto);

    font-family:
    "Segoe UI",
    Tahoma,
    Geneva,
    Verdana,
    sans-serif;

}

a{

    text-decoration:none;

    transition:.30s;

}

img{

    max-width:100%;

}

/*==============================
NAVBAR
==============================*/

.navbar{

    background:var(--vino);

    box-shadow:0 3px 12px rgba(0,0,0,.15);

}

.navbar-brand{

    font-size:1.3rem;

    font-weight:bold;

}

.navbar-brand small{

    font-size:.75rem;

    opacity:.85;

}

.nav-link{

    color:#fff !important;

    font-weight:500;

    margin-left:12px;

}

.nav-link:hover{

    color:var(--dorado) !important;

}

/*==============================
BOTONES
==============================*/

.btn-blog{

    background:var(--vino);

    color:#fff;

    border:none;

    border-radius:12px;

    padding:10px 24px;

    font-weight:600;

}

.btn-blog:hover{

    background:var(--vino-hover);

    color:#fff;

}

.btn-blog-gold{

    background:var(--dorado);

    color:#fff;

    border:none;

    border-radius:12px;

}

.btn-blog-gold:hover{

    background:#d59609;

}

/*==============================
TITULOS
==============================*/

h1,h2,h3,h4,h5{

    font-weight:700;

}

.section-title{

    color:var(--vino);

    margin-bottom:25px;

    position:relative;

}

.section-title::after{

    content:"";

    width:70px;

    height:4px;

    background:var(--dorado);

    display:block;

    margin-top:8px;

    border-radius:10px;

}

/*==============================
TARJETAS
==============================*/

.card{

    border:none;

    border-radius:18px;

    overflow:hidden;

    box-shadow:var(--sombra);

    transition:.35s;

}

.card:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 45px rgba(0,0,0,.18);

}

.card img{

    object-fit:cover;

}

/*==============================
BADGES
==============================*/

.badge-blog{

    background:var(--dorado);

    color:#000;

    font-size:.8rem;

    padding:8px 14px;

}

/*==============================
SIDEBAR
==============================*/

.sidebar-box{

    background:#fff;

    border-radius:18px;

    box-shadow:var(--sombra);

    padding:25px;

    margin-bottom:30px;

}

.sidebar-box h5{

    color:var(--vino);

    margin-bottom:18px;

}

/*==============================
FORMULARIOS
==============================*/

.form-control{

    border-radius:12px;

    border:1px solid #ddd;

}

.form-control:focus{

    border-color:var(--vino);

    box-shadow:none;

}

/*==============================
FOOTER
==============================*/

footer{

    background:var(--vino);

    color:#fff;

    padding:60px 0;

    margin-top:70px;

}

footer h5,
footer h6{

    color:var(--dorado);

}

footer a{

    color:#fff;

}

footer a:hover{

    color:var(--dorado);

}

/*==============================
ANIMACIONES
==============================*/

.fade-up{

    animation:fadeUp .8s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==============================
RESPONSIVE
==============================*/

@media(max-width:992px){

    .navbar-brand{

        font-size:1rem;

    }

}

@media(max-width:768px){

    h1{

        font-size:2rem;

    }

    .section-title{

        text-align:center;

    }

}

/*======================================================
ARTÍCULO DESTACADO
======================================================*/

.featured-post{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 18px 45px rgba(0,0,0,.10);

    margin-top:-40px;

    position:relative;

    z-index:20;

}

.featured-image{

    height:470px;

    object-fit:cover;

}

.featured-post h2{

    color:var(--vino);

    line-height:1.2;

}

.featured-post .lead{

    color:#555;

    line-height:1.8;

}

@media(max-width:991px){

.featured-image{

height:280px;

}

.featured-post{

margin-top:20px;

}

}


/*======================================================
ARTÍCULOS
======================================================*/

.article-image{

    height:230px;

    object-fit:cover;

}

.card-body h5{

    color:var(--vino);

    min-height:65px;

}

.card-body p{

    color:#666;

    line-height:1.7;

}

/*======================================================
SIDEBAR
======================================================*/

.sidebar-box{

    background:#fff;

    border-radius:18px;

    padding:25px;

    margin-bottom:30px;

    box-shadow:var(--sombra);

}

.sidebar-box .list-group-item{

    border:none;

    border-bottom:1px solid #eee;

}

.sidebar-box .list-group-item:last-child{

    border-bottom:none;

}

.sidebar-box .list-group-item:hover{

    background:#faf6f6;

}


/*======================================================
CTA
======================================================*/

.cta-blog{

    background:linear-gradient(
        135deg,
        var(--vino),
        #5a020b
    );

    border-radius:20px;

}

/*======================================================
FOOTER
======================================================*/

.footer-blog{

    background:#1c1c1c;

    color:#ddd;

    padding:70px 0 40px;

}

.footer-blog h4,
.footer-blog h5{

    color:var(--dorado);

    margin-bottom:20px;

}

.footer-blog a{

    color:#ddd;

    text-decoration:none;

}

.footer-blog a:hover{

    color:var(--dorado);

}

.footer-blog li{

    margin-bottom:10px;

}

/*======================================================
ARTICULO
======================================================*/

.article-header{

    padding:70px 0 40px;

}

.article-title{

    font-size:3rem;

    font-weight:700;

    color:var(--vino);

    line-height:1.2;

}

.article-summary{

    font-size:1.25rem;

    color:#666;

    margin-top:20px;

}

.article-meta{

    color:#777;

    font-size:.95rem;

}

.article-cover{

    width:100%;

    max-height:550px;

    object-fit:cover;

}

.scripture-box{

    background:#fff7df;

    border-left:6px solid var(--dorado);

    padding:40px;

    border-radius:15px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.scripture-box h4{

    color:var(--vino);

    margin-bottom:15px;

}

.scripture-box h5{

    color:#555;

    margin-bottom:25px;

}

.scripture-box blockquote{

    font-size:1.25rem;

    font-style:italic;

    line-height:1.8;

    margin:0;

}

/*======================================================
CONTENIDO
======================================================*/

.article-content{

    font-size:1.15rem;

    line-height:2;

    color:#444;

}

.article-content h2{

    color:var(--vino);

    margin-top:50px;

}

.article-content h3{

    color:var(--vino);

    margin-top:40px;

}

.article-content img{

    max-width:100%;

    border-radius:12px;

    margin:30px 0;

}

.article-content p{

    margin-bottom:25px;

}

/*======================================================
SIDEBAR
======================================================*/

.article-sidebar{

    top:100px;

}

.sidebar-card{

    background:white;

    border-radius:15px;

    padding:25px;

    margin-bottom:25px;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

}

.pastor-photo{

    width:120px;

    height:120px;

    border-radius:50%;

    object-fit:cover;

}

/*======================================================
VIDEO
======================================================*/

.video-box{

    background:white;

    padding:35px;

    border-radius:18px;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

}

/*======================================================
UPLOAD
======================================================*/

.upload-area{

    border:3px dashed #cccccc;

    border-radius:20px;

    padding:60px;

    text-align:center;

    cursor:pointer;

    transition:.3s;

    background:#fafafa;

}

.upload-area:hover{

    border-color:#73030F;

    background:#fff;

}

.upload-area.dragover{

    border-color:#EDAA11;

    background:#fff7df;

}

#previewImage{

    width:100%;

    max-height:450px;

    object-fit:cover;

    border-radius:15px;

}

/* =========================================================
   ARTÍCULO PÚBLICO
========================================================= */

.articulo-header {
    background:
        linear-gradient(
            135deg,
            #fff8f8,
            #fffdf5
        );
    border-bottom: 1px solid #eee;
}

.articulo-titulo {
    color: #73030F;
    line-height: 1.15;
}

.articulo-resumen {
    max-width: 850px;
}

.articulo-meta {
    color: #6c757d;
    font-size: .95rem;
}

.articulo-portada img {
    max-height: 560px;
    object-fit: cover;
}


/* =========================================================
   TEXTO GENERAL DEL ARTÍCULO
========================================================= */

.contenido-articulo {
    font-size: 17px;
    line-height: 1.75;
    color: #343a40;
}

.contenido-articulo p {
    margin-bottom: 1rem;
}

.contenido-articulo h2,
.contenido-articulo h3,
.contenido-articulo h4 {
    color: #73030F;
    margin-top: 1.8rem;
    margin-bottom: 1rem;
}

.contenido-articulo blockquote {
    border-left: 5px solid #EDAA11;
    padding: 16px 20px;
    background: #fff9e6;
    border-radius: 8px;
    font-style: italic;
}


/* =========================================================
   TEXTO BÍBLICO PRINCIPAL
========================================================= */

.texto-biblico-principal {
    position: relative;
    padding: 24px 26px;
    background: #fff9e6;
    border-left: 6px solid #EDAA11;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(0,0,0,.06);
}

.texto-biblico-principal h4 {
    color: #73030F;
}

.texto-biblico-icono {
    color: #EDAA11;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.texto-biblico-principal .texto-biblico-contenido {
    color: #343a40 !important;
    font-size: 17px;
    line-height: 1.7;
    font-style: italic;
}


/* =========================================================
   OBJETIVO DEL ESTUDIO
========================================================= */

.objetivo-estudio {
    padding: 22px 24px;
    background: #fffaf0;
    border: 2px solid #EDAA11;
    border-left: 7px solid #73030F;
    border-radius: 10px;
}

.objetivo-estudio i {
    color: #EDAA11;
}

.objetivo-estudio h4 {
    color: #73030F;
}


/* =========================================================
   APLICACIÓN PRÁCTICA GENERAL
========================================================= */

.aplicacion-practica {
    padding: 22px 24px;
    background: #eef9f2;
    border-left: 6px solid #198754;
    border-radius: 10px;
}

.aplicacion-practica i {
    color: #198754;
}

.aplicacion-practica h4 {
    color: #146c43;
}


/* =========================================================
   BLOQUES DEL EDITOR PASTORAL
========================================================= */

/* BASE */

.contenido-articulo .bloque-texto-biblico,
.contenido-articulo .bloque-aplicacion,
.contenido-articulo .bloque-reflexion,
.contenido-articulo .bloque-preguntas,
.contenido-articulo .bloque-idea-principal,
.contenido-articulo .bloque-conclusion,
.contenido-articulo .bloque-personaje,
.contenido-articulo .bloque-lugar,
.contenido-articulo .bloque-diccionario,
.contenido-articulo .bloque-referencias-cruzadas {
    width: 100%;
    margin: 24px 0;
    padding: 22px 24px;
    border-radius: 10px;
    box-sizing: border-box;
    box-shadow: 0 3px 10px rgba(0,0,0,.07);
}


/* =========================================================
   📖 TEXTO BÍBLICO INSERTADO
========================================================= */

.contenido-articulo .bloque-texto-biblico {
    background: #fff9e6 !important;
    border-left: 6px solid #EDAA11 !important;
}

.contenido-articulo .texto-biblico-cabecera {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: #73030F !important;
    font-weight: 700;
}

.contenido-articulo .texto-biblico-cabecera i {
    color: #EDAA11 !important;
}

.contenido-articulo .texto-biblico-contenido {
    color: #343a40 !important;
    line-height: 1.7;
    font-style: italic;
}


/* =========================================================
   💡 APLICACIÓN
========================================================= */

.contenido-articulo .bloque-aplicacion {
    background: #eef9f2 !important;
    border-left: 6px solid #198754 !important;
}

.contenido-articulo .aplicacion-cabecera {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: #146c43 !important;
    font-weight: 700;
}

.contenido-articulo .aplicacion-contenido {
    color: #343a40 !important;
    line-height: 1.65;
}


/* =========================================================
   🙏 REFLEXIÓN
========================================================= */

.contenido-articulo .bloque-reflexion {
    background: #fff5f6 !important;
    border-left: 6px solid #73030F !important;
}

.contenido-articulo .reflexion-cabecera {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: #73030F !important;
    font-weight: 700;
}

.contenido-articulo .reflexion-cabecera i {
    color: #EDAA11 !important;
}

.contenido-articulo .reflexion-contenido {
    color: #343a40 !important;
    line-height: 1.65;
    font-style: italic;
}


/* =========================================================
   ❓ PREGUNTAS
========================================================= */

.contenido-articulo .bloque-preguntas {
    background: #eefbfe !important;
    border-left: 6px solid #0dcaf0 !important;
}

.contenido-articulo .preguntas-cabecera {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: #087990 !important;
    font-weight: 700;
}

.contenido-articulo .preguntas-lista {
    list-style-type: decimal !important;
    list-style-position: outside;
    padding-left: 32px !important;
    margin: 0;
}

.contenido-articulo .preguntas-lista li {
    display: list-item !important;
    margin-bottom: 10px;
    line-height: 1.6;
    color: #343a40 !important;
}


/* =========================================================
   🎯 IDEA PRINCIPAL
========================================================= */

.contenido-articulo .bloque-idea-principal {
    background: #fffaf0 !important;
    border: 2px solid #EDAA11 !important;
    border-left: 7px solid #73030F !important;
}

.contenido-articulo .idea-principal-cabecera {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    color: #73030F !important;
    font-weight: 700;
}

.contenido-articulo .idea-principal-cabecera i {
    color: #EDAA11 !important;
}

.contenido-articulo .idea-principal-contenido {
    color: #343a40 !important;
    font-size: 17px;
    line-height: 1.6;
    font-weight: 500;
}


/* =========================================================
   🏁 CONCLUSIÓN
========================================================= */

.contenido-articulo .bloque-conclusion {
    background:
        linear-gradient(
            135deg,
            #73030F,
            #52020B
        ) !important;
    border-top: 4px solid #EDAA11 !important;
    color: #ffffff !important;
}

.contenido-articulo .conclusion-cabecera {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    color: #F6D41B !important;
    font-weight: 700;
}

.contenido-articulo .conclusion-contenido {
    color: #ffffff !important;
    line-height: 1.7;
}


/* =========================================================
   👤 PERSONAJE BÍBLICO
========================================================= */

.contenido-articulo .bloque-personaje {
    background: #fbf6ef !important;
    border-left: 6px solid #8b5e34 !important;
}

.contenido-articulo .personaje-cabecera {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 15px;
    color: #5a3d1e !important;
    font-weight: 700;
}

.contenido-articulo .personaje-cabecera i {
    color: #EDAA11 !important;
}

.contenido-articulo .personaje-contenido p {
    margin: 0 0 10px 0;
    color: #343a40 !important;
    line-height: 1.6;
}


/* =========================================================
   📍 LUGAR BÍBLICO
========================================================= */

.contenido-articulo .bloque-lugar {
    background: #effcf9 !important;
    border-left: 6px solid #0f766e !important;
}

.contenido-articulo .lugar-cabecera {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 15px;
    color: #0f5f55 !important;
    font-weight: 700;
}

.contenido-articulo .lugar-cabecera i {
    color: #EDAA11 !important;
}

.contenido-articulo .lugar-contenido p {
    margin: 0 0 10px 0;
    color: #343a40 !important;
    line-height: 1.6;
}


/* =========================================================
   📚 DICCIONARIO BÍBLICO
========================================================= */

.contenido-articulo .bloque-diccionario {
    background: #f6f3fc !important;
    border-left: 6px solid #6f5ca8 !important;
}

.contenido-articulo .diccionario-cabecera {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 15px;
    color: #4b3f72 !important;
    font-weight: 700;
}

.contenido-articulo .diccionario-cabecera i {
    color: #EDAA11 !important;
}

.contenido-articulo .diccionario-contenido p {
    margin: 0 0 10px 0;
    color: #343a40 !important;
    line-height: 1.65;
}


/* =========================================================
   🔗 REFERENCIAS CRUZADAS
========================================================= */

.contenido-articulo .bloque-referencias-cruzadas {
    background: #f1f7fb !important;
    border-left: 6px solid #315a7d !important;
}

.contenido-articulo .referencias-cruzadas-cabecera {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    color: #315a7d !important;
    font-weight: 700;
}

.contenido-articulo .referencias-cruzadas-cabecera i {
    color: #EDAA11 !important;
}

.contenido-articulo .referencias-cruzadas-lista {
    list-style-type: disc !important;
    padding-left: 30px !important;
    margin: 0;
}

.contenido-articulo .referencias-cruzadas-lista li {
    display: list-item !important;
    margin-bottom: 9px;
    line-height: 1.6;
    color: #343a40 !important;
}


/* =========================================================
   RECURSOS MULTIMEDIA
========================================================= */

.recurso-articulo {
    padding-top: 10px;
}

.recurso-articulo h3,
.recurso-pdf h4 {
    color: #73030F;
}

.recurso-articulo audio {
    margin-top: 12px;
}


/* =========================================================
   RELACIONADOS
========================================================= */

.articulos-relacionados {
    background: #f8f9fa;
}

.articulos-relacionados .card {
    transition: transform .2s ease, box-shadow .2s ease;
}

.articulos-relacionados .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,.10) !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 768px) {

    .articulo-titulo {
        font-size: 2.2rem;
    }

    .articulo-meta span {
        display: block;
        margin-bottom: 8px;
    }

    .contenido-articulo {
        font-size: 16px;
    }

    .contenido-articulo .bloque-texto-biblico,
    .contenido-articulo .bloque-aplicacion,
    .contenido-articulo .bloque-reflexion,
    .contenido-articulo .bloque-preguntas,
    .contenido-articulo .bloque-idea-principal,
    .contenido-articulo .bloque-conclusion,
    .contenido-articulo .bloque-personaje,
    .contenido-articulo .bloque-lugar,
    .contenido-articulo .bloque-diccionario,
    .contenido-articulo .bloque-referencias-cruzadas {
        padding: 18px;
    }

}

/* =========================================================
   VERSÍCULO SEMANAL - BLOG
========================================================= */

.sidebar-box .blockquote {
    margin: 0;
    padding: 15px 18px;

    background: #fff8df;

    border-left: 5px solid #EDAA11;

    border-radius: 8px;
}


/* TEXTO DEL VERSÍCULO */

.sidebar-box .blockquote p {
    color: #343a40 !important;

    font-size: 1rem;

    line-height: 1.65;

    font-style: italic;

    margin-bottom: 0;

    white-space: pre-line;
}


/* CITA BÍBLICA */

.sidebar-box .fw-bold.text-end {
    color: #73030F !important;

    margin-top: 12px;

    margin-bottom: 0;
}


/* REFLEXIÓN */

.sidebar-box small {
    color: #495057 !important;

    line-height: 1.6;

    display: block;
}

.articulo-portada img {
    width: 100%;
    max-height: 560px;
    object-fit: cover;
    object-position: center;
}

.articulos-relacionados .article-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: center;
}



/* =========================================================
   SIDEBAR DEL ARTÍCULO
========================================================= */

.sidebar-articulo {
    top: 90px;
}


/* =========================================================
   ÍNDICE
========================================================= */

.indice-articulo {
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 3px 12px rgba(0,0,0,.06);
}


.indice-titulo {
    color: #73030F;
    font-weight: 700;
    margin-bottom: 15px;
}


#indiceArticulo li {
    margin-bottom: 8px;
}


#indiceArticulo a {
    display: block;

    color: #495057;

    text-decoration: none;

    font-size: .92rem;

    line-height: 1.4;

    padding: 6px 8px;

    border-radius: 6px;

    transition: all .15s ease;
}


#indiceArticulo a:hover {
    color: #73030F;
    background: #fff5f6;
    padding-left: 12px;
}


#indiceArticulo .indice-subnivel {
    padding-left: 16px;
}


#indiceArticulo .indice-subnivel a {
    font-size: .86rem;
    color: #6c757d;
}


/* =========================================================
   DATOS DEL ARTÍCULO
========================================================= */

.datos-articulo {
    background: #ffffff;

    border: 1px solid #ececec;

    border-radius: 12px;

    padding: 20px;

    box-shadow: 0 3px 12px rgba(0,0,0,.06);
}


.datos-articulo h5 {
    color: #73030F;

    font-weight: 700;

    margin-bottom: 15px;
}


.dato-articulo {
    display: flex;

    justify-content: space-between;

    gap: 12px;

    padding: 9px 0;

    border-bottom: 1px solid #eee;

    font-size: .9rem;
}


.dato-articulo:last-child {
    border-bottom: 0;
}


.dato-articulo span {
    color: #6c757d;
}


.dato-articulo strong {
    color: #343a40;
    text-align: right;
}


/* =========================================================
   AJUSTE PARA SCROLL
========================================================= */

.contenido-articulo h2,
.contenido-articulo h3 {
    scroll-margin-top: 110px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .sidebar-articulo {
        position: static !important;

        margin-top: 35px;
    }

}

/* =========================================================
   CORRECCIONES ARTÍCULO PÚBLICO
========================================================= */

/* OBJETIVO */

.objetivo-estudio {
    background: #fffaf0 !important;
    border: 2px solid #EDAA11 !important;
    border-left: 7px solid #73030F !important;
    color: #343a40 !important;
}

.objetivo-estudio h4 {
    color: #73030F !important;
}

.objetivo-estudio-texto,
.objetivo-estudio p {
    color: #343a40 !important;
    line-height: 1.65;
}


/* APLICACIÓN PRÁCTICA */

.aplicacion-practica {
    color: #343a40 !important;
}

.aplicacion-practica p {
    color: #343a40 !important;
}


/* ÍNDICE */

.indice-articulo {
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 3px 12px rgba(0,0,0,.06);
}

.indice-titulo {
    color: #73030F !important;
    font-weight: 700;
    margin-bottom: 15px;
}

#indiceArticulo li {
    margin-bottom: 6px;
}

#indiceArticulo a {
    display: block;
    color: #495057 !important;
    text-decoration: none;
    font-size: .90rem;
    line-height: 1.4;
    padding: 7px 8px;
    border-radius: 6px;
    transition: all .15s ease;
}

#indiceArticulo a:hover {
    color: #73030F !important;
    background: #fff4f5;
    padding-left: 12px;
}

#indiceArticulo .indice-subnivel {
    padding-left: 15px;
}

#indiceArticulo .indice-subnivel a {
    font-size: .84rem;
    color: #6c757d !important;
}


/* SCROLL */

[data-indice],
.contenido-articulo h2,
.contenido-articulo h3,
.contenido-articulo [class^="bloque-"],
.contenido-articulo [class*=" bloque-"] {
    scroll-margin-top: 105px;
}


/* SIDEBAR */

.sidebar-articulo {
    top: 90px;
}


/* RESPONSIVE */

@media (max-width: 991px) {

    .sidebar-articulo {
        position: static !important;
        margin-top: 35px;
    }

}


/* =========================================================
   COMPARTIR ARTÍCULO
========================================================= */

.compartir-articulo {

    background: #ffffff;

    border: 1px solid #ececec;

    border-radius: 12px;

    padding: 20px;

    box-shadow:
        0 3px 12px rgba(0,0,0,.06);

}


.compartir-articulo h5 {

    color: #73030F;

    font-weight: 700;

    margin-bottom: 15px;

}


.compartir-articulo .btn {

    font-size: .9rem;

    font-weight: 600;

    padding: 9px 12px;

}

/* =========================================================
   NAVEGACIÓN ENTRE ARTÍCULOS
========================================================= */

.nav-articulo {

    display: flex;

    flex-direction: column;

    height: 100%;

    padding: 18px 20px;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 12px;

    color: #343a40;

    text-decoration: none;

    box-shadow:
        0 3px 12px rgba(0,0,0,.05);

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        border-color .15s ease;

}


.nav-articulo:hover {

    transform: translateY(-3px);

    border-color: #EDAA11;

    box-shadow:
        0 7px 18px rgba(0,0,0,.09);

    color: #73030F;

}


.nav-articulo-etiqueta {

    color: #73030F;

    font-size: .82rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .03em;

    margin-bottom: 7px;

}


.nav-articulo strong {

    font-size: .95rem;

    line-height: 1.4;

}


.nav-articulo-siguiente {

    text-align: right;

    align-items: flex-end;

}


@media (max-width: 767px) {

    .nav-articulo-siguiente {

        text-align: left;

        align-items: flex-start;

    }

}


/* =========================================================
   BOTÓN VOLVER ARRIBA
========================================================= */

.btn-volver-arriba {

    position: fixed;

    right: 26px;
    bottom: 26px;

    width: 48px;
    height: 48px;

    display: flex;

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

    border: none;

    border-radius: 50%;

    background: #73030F;

    color: #ffffff;

    font-size: 1.15rem;

    box-shadow:
        0 5px 16px rgba(0,0,0,.22);

    z-index: 1050;

    cursor: pointer;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(15px);

    transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .2s ease,
        background .2s ease;
}


.btn-volver-arriba.visible {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);
}


.btn-volver-arriba:hover {

    background: #EDAA11;

    color: #73030F;

    transform:
        translateY(-3px);
}


.btn-volver-arriba:focus {

    outline: none;

    box-shadow:
        0 0 0 4px rgba(237,170,17,.30),
        0 5px 16px rgba(0,0,0,.22);
}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 576px) {

    .btn-volver-arriba {

        right: 16px;
        bottom: 16px;

        width: 44px;
        height: 44px;

    }

}


/* =========================================================
   SECCIÓN ACTIVA DEL ÍNDICE
========================================================= */

#indiceArticulo a.activo {

    color: #73030F !important;

    background: #fff3cd;

    font-weight: 700;

    border-left: 4px solid #EDAA11;

    padding-left: 12px;

}


#indiceArticulo a.activo::before {

    content: "›";

    color: #EDAA11;

    font-weight: 900;

    margin-right: 5px;

}

/* =========================================================
   ÍNDICE RESPONSIVE
========================================================= */

.btn-indice-movil {

    display: none;

    width: 100%;

    border: 0;

    background: transparent;

    color: #73030F;

    font-weight: 700;

    font-size: 1rem;

    padding: 0;

    text-align: left;

    align-items: center;

    justify-content: space-between;

}


@media (max-width: 991px) {

    .indice-titulo-desktop {

        display: none;

    }


    .btn-indice-movil {

        display: flex;

    }


    #contenedorIndice {

        display: none;

        margin-top: 15px;

        padding-top: 12px;

        border-top: 1px solid #eee;

    }


    #contenedorIndice.indice-abierto {

        display: block;

    }


    .sidebar-articulo {

        position: static !important;

        margin-top: 35px;

    }

}


/* =========================================================
   ESCRITORIO
========================================================= */

@media (min-width: 992px) {

    #contenedorIndice {

        display: block !important;

    }

}


/* =========================================================
   RESPONSIVE COMPLETO DEL ARTÍCULO
========================================================= */


/* =========================================================
   PORTADA
========================================================= */

.articulo-portada img {
    width: 100%;
    max-height: 560px;
    object-fit: cover;
    object-position: center;
}


/* =========================================================
   CABECERA
========================================================= */

.articulo-header {
    padding-left: 15px;
    padding-right: 15px;
}

.articulo-titulo {
    word-break: normal;
    overflow-wrap: break-word;
}

.articulo-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 0;
}


/* =========================================================
   CONTENIDO GENERAL
========================================================= */

.contenido-articulo,
.texto-biblico-principal,
.objetivo-estudio,
.aplicacion-practica {
    overflow-wrap: break-word;
}

.contenido-articulo img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.contenido-articulo iframe {
    max-width: 100%;
}


/* =========================================================
   TABLAS INSERTADAS EN EL EDITOR
========================================================= */

.contenido-articulo table {
    width: 100%;
    border-collapse: collapse;
}

.contenido-articulo table th,
.contenido-articulo table td {
    padding: 9px;
    border: 1px solid #dee2e6;
}


/* Permite desplazamiento si una tabla es muy grande */

.contenido-articulo .table-responsive {
    overflow-x: auto;
}


/* =========================================================
   RECURSOS
========================================================= */

.recurso-articulo iframe {
    border-radius: 10px;
}

.recurso-articulo audio {
    width: 100%;
}

.recurso-pdf .card {
    border-radius: 12px;
}


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar-articulo {
    z-index: 10;
}

.indice-articulo,
.datos-articulo,
.compartir-articulo {
    width: 100%;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    /* Eliminar desplazamiento lateral Bootstrap */

    .articulo-contenedor .offset-lg-1 {
        margin-left: 0;
    }


    .articulo-contenedor .col-lg-8 {
        width: 100%;
    }


    .articulo-contenedor .col-lg-3 {
        width: 100%;
    }


    /* Sidebar debajo del artículo */

    .sidebar-articulo {
        position: static !important;
        margin-top: 40px;
    }


    /* Portada */

    .articulo-portada img {
        max-height: 450px;
    }


    /* Título */

    .articulo-titulo {
        font-size: 2.6rem;
    }


    /* Metadatos */

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


    /* Bloques */

    .texto-biblico-principal,
    .objetivo-estudio,
    .aplicacion-practica,

    .contenido-articulo .bloque-texto-biblico,
    .contenido-articulo .bloque-aplicacion,
    .contenido-articulo .bloque-reflexion,
    .contenido-articulo .bloque-preguntas,
    .contenido-articulo .bloque-idea-principal,
    .contenido-articulo .bloque-conclusion,
    .contenido-articulo .bloque-personaje,
    .contenido-articulo .bloque-lugar,
    .contenido-articulo .bloque-diccionario,
    .contenido-articulo .bloque-referencias-cruzadas {

        padding: 20px;

    }

}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 767px) {

    /* =============================================
       CABECERA
    ============================================= */

    .articulo-header {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }


    .articulo-titulo {
        font-size: 2rem !important;
        line-height: 1.2;
    }


    .articulo-resumen {
        font-size: 1rem;
        line-height: 1.6;
    }


    /* Metadatos en columnas */

    .articulo-meta {
        display: block;
    }


    .articulo-meta span {
        display: block;
        margin-right: 0 !important;
        margin-bottom: 8px;
    }


    /* =============================================
       PORTADA
    ============================================= */

    .articulo-portada img {
        max-height: 300px;
        border-radius: 8px !important;
    }


    /* =============================================
       CUERPO
    ============================================= */

    .contenido-articulo {
        font-size: 16px;
        line-height: 1.7;
    }


    .contenido-articulo h2 {
        font-size: 1.65rem;
    }


    .contenido-articulo h3 {
        font-size: 1.35rem;
    }


    .contenido-articulo h4 {
        font-size: 1.15rem;
    }


    /* =============================================
       TEXTO BÍBLICO
    ============================================= */

    .texto-biblico-principal {
        padding: 18px;
    }


    .texto-biblico-principal h4 {
        font-size: 1.25rem;
    }


    .texto-biblico-principal
    .texto-biblico-contenido {

        font-size: 1rem;
        line-height: 1.65;

    }


    /* =============================================
       OBJETIVO / APLICACIÓN
    ============================================= */

    .objetivo-estudio,
    .aplicacion-practica {

        padding: 18px;

    }


    .objetivo-estudio .d-flex,
    .aplicacion-practica .d-flex {

        align-items: flex-start;

    }


    .objetivo-estudio i,
    .aplicacion-practica i {

        font-size: 1.5rem !important;

    }


    /* =============================================
       BLOQUES DEL EDITOR
    ============================================= */

    .contenido-articulo .bloque-texto-biblico,
    .contenido-articulo .bloque-aplicacion,
    .contenido-articulo .bloque-reflexion,
    .contenido-articulo .bloque-preguntas,
    .contenido-articulo .bloque-idea-principal,
    .contenido-articulo .bloque-conclusion,
    .contenido-articulo .bloque-personaje,
    .contenido-articulo .bloque-lugar,
    .contenido-articulo .bloque-diccionario,
    .contenido-articulo .bloque-referencias-cruzadas {

        padding: 17px;

        margin: 18px 0;

        border-radius: 8px;

    }


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

    .contenido-articulo ul,
    .contenido-articulo ol {

        padding-left: 24px;

    }


    /* =============================================
       VIDEO
    ============================================= */

    .recurso-articulo h3 {

        font-size: 1.35rem;

    }


    /* =============================================
       PDF
    ============================================= */

    .recurso-pdf .card-body {

        padding: 18px !important;

    }


    .recurso-pdf .row {

        text-align: center;

    }


    .recurso-pdf .col-auto {

        width: 100%;

        margin-bottom: 12px;

    }


    .recurso-pdf .col {

        width: 100%;

    }


    .recurso-pdf .col-md-auto {

        width: 100%;

        margin-top: 15px;

    }


    .recurso-pdf .btn {

        width: 100%;

    }


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

    .nav-articulo {

        padding: 16px;

    }


    .nav-articulo-siguiente {

        text-align: left;

        align-items: flex-start;

    }


    /* =============================================
       SIDEBAR
    ============================================= */

    .sidebar-articulo {

        margin-top: 35px;

    }


    .indice-articulo,
    .datos-articulo,
    .compartir-articulo {

        padding: 18px;

    }


    /* =============================================
       RELACIONADOS
    ============================================= */

    .articulos-relacionados {

        padding-top: 35px !important;
        padding-bottom: 35px !important;

    }


    .articulos-relacionados
    .section-title {

        font-size: 1.6rem;

    }


    .articulos-relacionados
    .article-image {

        height: 210px;

    }

}


/* =========================================================
   CELULARES PEQUEÑOS
========================================================= */

@media (max-width: 480px) {

    .articulo-titulo {

        font-size: 1.75rem !important;

    }


    .articulo-portada img {

        max-height: 240px;

    }


    .contenido-articulo {

        font-size: 15.5px;

    }


    .texto-biblico-principal,
    .objetivo-estudio,
    .aplicacion-practica,

    .contenido-articulo .bloque-texto-biblico,
    .contenido-articulo .bloque-aplicacion,
    .contenido-articulo .bloque-reflexion,
    .contenido-articulo .bloque-preguntas,
    .contenido-articulo .bloque-idea-principal,
    .contenido-articulo .bloque-conclusion,
    .contenido-articulo .bloque-personaje,
    .contenido-articulo .bloque-lugar,
    .contenido-articulo .bloque-diccionario,
    .contenido-articulo .bloque-referencias-cruzadas {

        padding: 15px;

    }


    .btn-volver-arriba {

        width: 42px;
        height: 42px;

        right: 13px;
        bottom: 13px;

    }

}


/* =========================================================
   RESPONSIVE BLOG PRINCIPAL
========================================================= */


/* =========================================================
   HERO
========================================================= */

.hero-blog {
    overflow: hidden;
}

.hero-blog .container {
    position: relative;
}

.hero-blog h1 {
    overflow-wrap: break-word;
}

.hero-image {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   BUSCADOR SUPERIOR
========================================================= */

.blog-search-form .input-group {
    width: 100%;
}

.blog-search-form .form-control {
    min-width: 0;
}


/* =========================================================
   ARTÍCULO DESTACADO
========================================================= */

.featured-post {
    overflow: hidden;
    border-radius: 16px;
}

.featured-image {
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
    object-position: center;
}


/* =========================================================
   TARJETAS
========================================================= */

.article-image {
    width: 100%;
    height: 240px;
    object-fit: cover;
    object-position: center;
}

.card {
    overflow: hidden;
}


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar-box,
.sidebar-card {
    width: 100%;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    /* HERO */

    .hero-blog {
        text-align: center;
    }

    .hero-blog .row {
        row-gap: 30px;
    }

    .hero-blog h1 {
        font-size: 2.6rem;
    }

    .hero-blog .lead {
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-image {
        max-height: 420px;
        object-fit: contain;
    }


    /* DESTACADO */

    .featured-post .p-5 {
        padding: 32px !important;
    }

    .featured-image {
        min-height: 300px;
        max-height: 420px;
    }


    /* SIDEBAR */

    .col-lg-4 {
        margin-top: 35px;
    }

}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 767px) {

    /* HERO */

    .hero-blog {
        padding-top: 25px;
    }

    .hero-blog h1 {
        font-size: 2rem !important;
        line-height: 1.2;
    }

    .hero-blog .lead {
        font-size: 1rem;
        line-height: 1.6;
    }

    .hero-blog .badge {
        font-size: .8rem;
    }


    /* BUSCADOR HERO */

    .blog-search-form .input-group {
        flex-wrap: nowrap;
    }

    .blog-search-form .form-control {
        font-size: 1rem;
        padding: 12px 14px;
    }

    .blog-search-form .btn {
        min-width: 54px;
    }


    /* IMAGEN PASTOR */

    .hero-image {
        max-height: 320px;
    }


    /* DESTACADO */

    .featured-post {
        border-radius: 12px;
    }

    .featured-post .p-5 {
        padding: 24px !important;
    }

    .featured-post h2 {
        font-size: 1.8rem;
    }

    .featured-post .lead {
        font-size: 1rem;
    }

    .featured-image {
        min-height: 220px;
        max-height: 280px;
    }

    .featured-post .btn {
        width: 100%;
    }


    /* TÍTULO DE SECCIÓN */

    .section-title {
        font-size: 1.7rem;
    }


    /* TARJETAS */

    .article-image {
        height: 220px;
    }

    .card-body {
        padding: 18px;
    }

    .card-footer {
        padding: 0 18px 18px 18px;
    }


    /* SIDEBAR */

    .sidebar-box,
    .sidebar-card {
        padding: 20px;
    }


    /* CTA */

    .cta-blog {
        text-align: center;
    }

    .cta-blog h2 {
        font-size: 1.7rem;
    }

    .cta-blog .btn {
        width: 100%;
    }


    /* FOOTER */

    .footer-blog {
        text-align: center;
    }

    .footer-blog .btn {
        margin-bottom: 8px;
    }

}


/* =========================================================
   CELULAR PEQUEÑO
========================================================= */

@media (max-width: 480px) {

    .hero-blog h1 {
        font-size: 1.75rem !important;
    }

    .hero-blog .lead {
        font-size: .95rem;
    }

    .hero-image {
        max-height: 270px;
    }

    .featured-post h2 {
        font-size: 1.55rem;
    }

    .featured-image {
        height: 210px;
        min-height: 210px;
    }

    .article-image {
        height: 200px;
    }

    .section-title {
        font-size: 1.5rem;
    }

}


/* =========================================================
   CATEGORÍA ACTIVA
========================================================= */

.sidebar-box .list-group-item.active {
    background: #73030F;
    border-color: #73030F;
    color: #ffffff;
}

.sidebar-box .list-group-item.active:hover {
    background: #5b020c;
    border-color: #5b020c;
    color: #ffffff;
}

/* =========================================================
   ARTÍCULOS MÁS LEÍDOS
========================================================= */

.articulo-popular {

    display: flex;

    gap: 12px;

    padding: 12px 0;

    text-decoration: none;

    color: #343a40;

    border-bottom: 1px solid #eeeeee;

    transition:
        transform .15s ease,
        color .15s ease;

}


.articulo-popular:last-child {

    border-bottom: 0;

}


.articulo-popular:hover {

    color: #73030F;

    transform: translateX(3px);

}


.articulo-popular-imagen {

    flex: 0 0 78px;

    width: 78px;

    height: 65px;

    overflow: hidden;

    border-radius: 8px;

    background: #f3f3f3;

}


.articulo-popular-imagen img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.articulo-popular-contenido {

    flex: 1;

    min-width: 0;

}


.articulo-popular-titulo {

    font-size: .92rem;

    font-weight: 700;

    line-height: 1.35;

    margin-bottom: 5px;

}


.articulo-popular-meta {

    font-size: .78rem;

    color: #777;

}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 767px) {

    .articulo-popular-imagen {

        flex-basis: 85px;

        width: 85px;

        height: 70px;

    }

}

/* =========================================================
   SERIES DE ESTUDIOS
========================================================= */

.serie-articulo {

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-top: 5px solid #73030F;

    border-radius: 14px;

    padding: 25px;

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

}


/* CABECERA */

.serie-articulo-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 20px;

    margin-bottom: 15px;

}


.serie-etiqueta {

    color: #EDAA11;

    font-weight: 800;

    font-size: .78rem;

    letter-spacing: .08em;

}


.serie-titulo {

    color: #73030F;

    font-weight: 800;

    margin-top: 5px;

    margin-bottom: 0;

}


.serie-progreso {

    background: #73030F;

    color: #ffffff;

    padding: 8px 14px;

    border-radius: 20px;

    white-space: nowrap;

    font-size: .85rem;

}


.serie-descripcion {

    color: #666;

    line-height: 1.65;

    margin-bottom: 22px;

}


/* =========================================================
   LISTA DE LECCIONES
========================================================= */

.serie-lista {

    border:

        1px solid #eeeeee;

    border-radius: 10px;

    overflow: hidden;

}


.serie-leccion {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 14px 15px;

    border-bottom: 1px solid #eeeeee;

    color: #343a40;

    text-decoration: none;

    transition: all .15s ease;

}


.serie-leccion:last-child {

    border-bottom: 0;

}


.serie-leccion:hover {

    background: #fffaf0;

    color: #73030F;

}


/* NÚMERO */

.serie-numero {

    display: flex;

    justify-content: center;

    align-items: center;

    flex: 0 0 34px;

    width: 34px;

    height: 34px;

    border-radius: 50%;

    background: #f3f3f3;

    color: #73030F;

    font-weight: 800;

}


/* INFORMACIÓN */

.serie-leccion-info {

    display: flex;

    flex-direction: column;

    flex: 1;

}


.serie-leccion-info strong {

    font-size: .95rem;

}


.serie-leccion-info small {

    color: #777;

    margin-top: 3px;

}


/* =========================================================
   LECCIÓN ACTIVA
========================================================= */

.serie-leccion-activa {

    background: #fff3cd;

    border-left: 5px solid #EDAA11;

    color: #73030F;

}


.serie-leccion-activa
.serie-numero {

    background: #73030F;

    color: #ffffff;

}


.serie-actual {

    color: #EDAA11;

    font-size: 1.1rem;

}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 767px) {

    .serie-articulo {

        padding: 18px;

    }


    .serie-articulo-header {

        flex-direction: column;

    }


    .serie-progreso {

        align-self: flex-start;

    }


    .serie-leccion {

        padding: 12px;

    }


    .serie-leccion-info strong {

        font-size: .9rem;

    }

}


/* =========================================================
   TEXTO NORMAL DEL CONTENIDO DEL ARTÍCULO
========================================================= */

.contenido-articulo {
    color: #f1f1f1 !important;
}

.contenido-articulo p,
.contenido-articulo span,
.contenido-articulo li {
    color: #f1f1f1 !important;
}


/* TÍTULOS NORMALES DEL CONTENIDO */

.contenido-articulo h1,
.contenido-articulo h2,
.contenido-articulo h3,
.contenido-articulo h4,
.contenido-articulo h5,
.contenido-articulo h6 {
    color: #ffffff !important;
}


/* ENLACES */

.contenido-articulo a {
    color: #EDAA11 !important;
}


/* NEGRITAS */

.contenido-articulo strong,
.contenido-articulo b {
    color: #ffffff;
}


/* =========================================================
   CONSERVAR TEXTO OSCURO EN BLOQUES CLAROS
========================================================= */

.contenido-articulo .bloque-idea-principal,
.contenido-articulo .bloque-idea-principal p,
.contenido-articulo .bloque-idea-principal span,
.contenido-articulo .bloque-idea-principal strong,

.contenido-articulo .bloque-texto-biblico,
.contenido-articulo .bloque-texto-biblico p,
.contenido-articulo .bloque-texto-biblico span,

.contenido-articulo .bloque-aplicacion,
.contenido-articulo .bloque-aplicacion p,
.contenido-articulo .bloque-aplicacion span,

.contenido-articulo .bloque-reflexion,
.contenido-articulo .bloque-reflexion p,
.contenido-articulo .bloque-reflexion span,

.contenido-articulo .bloque-preguntas,
.contenido-articulo .bloque-preguntas p,
.contenido-articulo .bloque-preguntas span,

.contenido-articulo .bloque-personaje,
.contenido-articulo .bloque-personaje p,
.contenido-articulo .bloque-personaje span,

.contenido-articulo .bloque-lugar,
.contenido-articulo .bloque-lugar p,
.contenido-articulo .bloque-lugar span,

.contenido-articulo .bloque-diccionario,
.contenido-articulo .bloque-diccionario p,
.contenido-articulo .bloque-diccionario span,

.contenido-articulo .bloque-referencias-cruzadas,
.contenido-articulo .bloque-referencias-cruzadas p,
.contenido-articulo .bloque-referencias-cruzadas span {
    color: #343a40 !important;
}

.contenido-articulo .bloque-conclusion,
.contenido-articulo .bloque-conclusion p,
.contenido-articulo .bloque-conclusion span {
    color: #ffffff !important;
}

.contenido-articulo .bloque-conclusion strong,
.contenido-articulo .bloque-conclusion h1,
.contenido-articulo .bloque-conclusion h2,
.contenido-articulo .bloque-conclusion h3,
.contenido-articulo .bloque-conclusion h4 {
    color: #F6D41B !important;
}


/* =========================================================
   PAGINACIÓN BLOG
========================================================= */

.pagination .page-link {
    color: #73030F;
    border-color: #e5e7eb;
    margin: 0 3px;
    border-radius: 7px;
}

.pagination .page-link:hover {
    color: #73030F;
    background: #fff3cd;
    border-color: #EDAA11;
}

.pagination .page-item.active .page-link {
    background: #73030F;
    border-color: #73030F;
    color: #ffffff;
}

.pagination .page-item.disabled .page-link {
    color: #999;
}

/* =========================================================
   PÁGINA DE CATEGORÍAS
========================================================= */

.categoria-blog-card {

    display: flex;

    flex-direction: column;

    height: 100%;

    background: #ffffff;

    border: 1px solid #e6e6e6;

    border-top: 5px solid #73030F;

    border-radius: 14px;

    padding: 25px;

    color: #343a40;

    text-decoration: none;

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

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;

}


.categoria-blog-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 10px 25px
        rgba(0,0,0,.10);

    border-top-color: #EDAA11;

    color: #343a40;

}


/* ICONO */

.categoria-blog-icono {

    width: 62px;

    height: 62px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #fff3cd;

    color: #73030F;

    font-size: 1.6rem;

    margin-bottom: 20px;

}


/* TÍTULO */

.categoria-blog-contenido h3 {

    color: #73030F;

    font-size: 1.35rem;

    font-weight: 800;

    margin-bottom: 12px;

}


/* DESCRIPCIÓN */

.categoria-blog-contenido p {

    color: #666;

    line-height: 1.6;

    min-height: 76px;

}


/* PIE */

.categoria-blog-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 10px;

    margin-top: 20px;

    padding-top: 15px;

    border-top:
        1px solid #eeeeee;

    font-size: .85rem;

    color: #777;

}


.categoria-blog-ver {

    color: #73030F;

    font-weight: 700;

}


/* HOVER DEL ICONO */

.categoria-blog-card:hover
.categoria-blog-icono {

    background: #73030F;

    color: #EDAA11;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 767px) {

    .categoria-blog-card {

        padding: 20px;

    }

    .categoria-blog-contenido p {

        min-height: auto;

    }

    .categoria-blog-footer {

        flex-direction: column;

        align-items: flex-start;

    }

}

/* =========================================================
   PÁGINA DE PREDICACIONES
========================================================= */

.predicaciones-hero {
    background:
        linear-gradient(
            135deg,
            #111111 0%,
            #250104 55%,
            #73030F 100%
        );

    color: #ffffff;
}

.predicaciones-hero h1 {
    color: #ffffff;
}

.predicaciones-hero .lead {
    color: rgba(255,255,255,.82);
}

.predicaciones-icono {
    width: 75px;
    height: 75px;

    margin-left: auto;
    margin-right: auto;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 50%;

    background: #EDAA11;

    color: #73030F;

    font-size: 2rem;
}


/* =========================================================
   TARJETA
========================================================= */

.predicacion-card {
    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #ffffff;

    border-radius: 14px;

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

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.predicacion-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 10px 28px
        rgba(0,0,0,.13);
}


/* =========================================================
   IMAGEN
========================================================= */

.predicacion-imagen {
    position: relative;

    height: 230px;

    overflow: hidden;

    background: #111111;
}

.predicacion-imagen img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .3s ease;
}

.predicacion-card:hover
.predicacion-imagen img {
    transform: scale(1.04);
}


/* =========================================================
   BOTÓN PLAY
========================================================= */

.predicacion-play {
    position: absolute;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%);

    width: 64px;
    height: 64px;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 50%;

    background:
        rgba(115,3,15,.92);

    color: #ffffff;

    font-size: 1.35rem;

    text-decoration: none;

    border:
        3px solid
        rgba(255,255,255,.85);

    transition:
        background .15s ease,
        transform .15s ease;
}

.predicacion-play:hover {
    background: #EDAA11;
    color: #73030F;

    transform:
        translate(-50%, -50%)
        scale(1.1);
}


/* =========================================================
   DURACIÓN
========================================================= */

.predicacion-duracion {
    position: absolute;

    right: 12px;
    bottom: 12px;

    padding: 5px 9px;

    border-radius: 6px;

    background:
        rgba(0,0,0,.78);

    color: #ffffff;

    font-size: .78rem;
}


/* =========================================================
   CONTENIDO
========================================================= */

.predicacion-contenido {
    display: flex;
    flex-direction: column;

    flex: 1;

    padding: 22px;
}

.predicacion-meta {
    display: flex;

    justify-content:
        space-between;

    gap: 10px;

    margin-bottom: 12px;

    color: #777;

    font-size: .78rem;
}

.predicacion-contenido h3 {
    font-size: 1.25rem;
    font-weight: 800;

    margin-bottom: 12px;
}

.predicacion-contenido h3 a {
    color: #73030F;
    text-decoration: none;
}

.predicacion-contenido h3 a:hover {
    color: #EDAA11;
}

.predicacion-referencia {
    margin-bottom: 13px;

    color: #73030F;

    font-size: .88rem;

    font-weight: 700;
}

.predicacion-contenido p {
    flex: 1;

    color: #666;

    line-height: 1.6;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 767px) {

    .predicaciones-hero {
        padding-top: 35px !important;
        padding-bottom: 35px !important;
    }

    .predicaciones-hero h1 {
        font-size: 2rem;
    }

    .predicaciones-icono {
        width: 62px;
        height: 62px;

        font-size: 1.6rem;
    }

    .predicacion-imagen {
        height: 220px;
    }

    .predicacion-contenido {
        padding: 18px;
    }

}


/* =========================================================
   MENÚ ACTIVO BLOG
========================================================= */

.navbar .nav-link.active {
    color: #EDAA11 !important;
    font-weight: 700;
    position: relative;
}

.navbar .nav-link.active::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 2px;

    width: 22px;
    height: 3px;

    transform: translateX(-50%);

    background: #EDAA11;

    border-radius: 10px;
}


/* =========================================================
   CORRECCIÓN DE NEGRITAS EN BLOQUE REFLEXIÓN
========================================================= */

.contenido-articulo .bloque-reflexion strong,
.contenido-articulo .bloque-reflexion b,
.contenido-articulo .reflexion-contenido strong,
.contenido-articulo .reflexion-contenido b {
    color: #73030F !important;
    font-weight: 700;
}


.contenido-articulo .bloque-reflexion strong,
.contenido-articulo .bloque-reflexion b {
    color: #73030F !important;
    font-weight: 700;
}

/* APLICACIÓN */
.contenido-articulo .bloque-aplicacion strong,
.contenido-articulo .bloque-aplicacion b {
    color: #146c43 !important;
}

.contenido-articulo .bloque-preguntas strong,
.contenido-articulo .bloque-preguntas b {
    color: #73030F !important;
    font-weight: 700;
}


/* =========================================================
   BLOQUE DE AUDIO - TEXTO SOBRE FONDO OSCURO
========================================================= */

#seccionAudio .text-muted {
    color: #e9ecef !important;
}


/* =========================================================
   REACCIONES DE LOS LECTORES
========================================================= */

.reacciones-blog {
    margin: 45px 0 35px;
    padding: 28px;
    background: #f8f9fa;
    border-radius: 14px;
    border-top: 4px solid #73030F;
    box-shadow: 0 5px 20px rgba(0,0,0,.12);
}

.reacciones-encabezado {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 22px;
}

.reacciones-icono {
    font-size: 32px;
}

.reacciones-encabezado h3 {
    margin: 0 0 4px;
    color: #73030F;
    font-size: 1.35rem;
    font-weight: 700;
}

.reacciones-encabezado p {
    margin: 0;
    color: #6c757d;
}


/* OPCIONES */

.reacciones-opciones {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.btn-reaccion {
    position: relative;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 16px;

    border: 1px solid #dedede;
    border-radius: 10px;

    background: #ffffff;

    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.btn-reaccion:hover {
    transform: translateY(-3px);

    border-color: #EDAA11;

    box-shadow:
        0 5px 15px rgba(0,0,0,.12);
}


/* EMOJI */

.reaccion-emoji {
    font-size: 28px;
}


/* TEXTO */

.reaccion-texto {
    display: flex;
    flex-direction: column;

    text-align: left;

    flex: 1;
}

.reaccion-texto strong {
    color: #212529 !important;
    font-size: .95rem;
}

.reaccion-texto small {
    color: #6c757d;
    margin-top: 2px;
}


/* CONTADOR */

.reaccion-contador {
    min-width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #73030F;
    color: #ffffff;

    font-size: .82rem;
    font-weight: 700;
}


/* SELECCIONADA */

.btn-reaccion.reaccion-seleccionada {
    border: 2px solid #EDAA11;

    background:
        linear-gradient(
            135deg,
            #fffdf5,
            #fff8dc
        );

    box-shadow:
        0 5px 18px rgba(237,170,17,.25);
}


/* MENSAJE */

.mensaje-reaccion {
    margin-top: 20px;
    padding: 14px 18px;

    background: #fff3cd;
    color: #5a4a00;

    border-left: 4px solid #EDAA11;
    border-radius: 7px;

    text-align: center;
}


/* MÓVIL */

@media (max-width: 768px) {

    .reacciones-blog {
        padding: 20px 16px;
    }

    .reacciones-opciones {
        grid-template-columns: 1fr;
    }

}