/* ==================================================
   DEVOCIONALES SELAH
   Estilos exclusivos de la sección Devocionales
================================================== */





/* ==================================================
   TARJETA DESTACADA - PAGINA PRINCIPAL
================================================== */


#devocionales .tarjetas-inicio {

    display:flex;

    justify-content:center;

    margin-top:40px;

}



#devocionales .tarjeta-inicio {

    width:280px;

    background:#ffffff;

    border-radius:16px;

    overflow:hidden;

    box-shadow:0 8px 25px rgba(0,0,0,0.12);

    transition:.3s;

}



#devocionales .tarjeta-inicio:hover {

    transform:translateY(-6px);

}



#devocionales .tarjeta-inicio img {

    width:100%;

    height:220px;

    object-fit:cover;

    display:block;

}



#devocionales .tarjeta-inicio .contenido-tarjeta {

    text-align:center;

}





/* ==================================================
   LISTA DEVOCIONALES
================================================== */


.lista-devocionales {

    max-width:1100px;

    margin:auto;

    padding:70px 20px;

    display:grid;

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

    gap:35px;

}







/* ==================================================
   TARJETA INDIVIDUAL DEVOCIONAL
================================================== */


.tarjeta-devocional {

    background:#ffffff;

    border-radius:16px;

    overflow:hidden;

    box-shadow:0 8px 25px rgba(0,0,0,0.08);

    transition:.3s;

}



.tarjeta-devocional:hover {

    transform:translateY(-6px);

}



.tarjeta-devocional img {

    width:100%;

    height:260px;

    object-fit:cover;

    display:block;

}





/* ==================================================
   CONTENIDO DE TARJETA
================================================== */


.tarjeta-devocional .contenido-tarjeta {

    padding:25px;

}



.tarjeta-devocional h2 {

    font-size:22px;

    font-weight:600;

    line-height:1.4;

    margin-bottom:12px;

    color:#222;

}



.tarjeta-devocional p {

    font-size:14px;

    font-weight:300;

    line-height:1.8;

    color:#666;

    margin-bottom:25px;

}





/* ==================================================
   BOTON LEER MAS
================================================== */


.tarjeta-devocional .contenido-tarjeta a {

    display:inline-block;

    color:#222;

    font-size:14px;

    font-weight:600;

    text-decoration:none;

    padding:10px 18px;

    border:1px solid #222;

    border-radius:30px;

    transition:.3s;

}



.tarjeta-devocional .contenido-tarjeta a:hover {

    background:#222;

    color:#ffffff;

}







/* ==================================================
   PAGINA INDIVIDUAL DEVOCIONAL
================================================== */


.devocional-individual {

    width:100%;

}



.devocional-contenido {

    max-width:850px;

    margin:0 auto;

    padding:40px 20px 70px;

}







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


.devocional-imagen img {

    width:100%;

    max-width:500px;

    aspect-ratio:1 / 1;

    object-fit:cover;

    display:block;

    margin:0 auto 35px;

    border-radius:18px;

}







/* ==================================================
   TITULO Y VERSICULO
================================================== */


.devocional-header {

    text-align:center;

    margin-bottom:50px;

}



.devocional-header h1 {

    font-size:42px;

    line-height:1.3;

    font-weight:700;

    color:#222;

    margin-bottom:18px;

}



.devocional-versiculo {

    font-size:18px;

    font-style:italic;

    font-weight:300;

    line-height:1.8;

    color:#666;

}



.devocional-versiculo strong {

    display:inline-block;

    font-style:normal;

    font-weight:600;

    margin-top:8px;

}







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


.devocional-texto {

    color:#333;

}



.devocional-texto p {

    font-size:17px;

    font-weight:300;

    line-height:1.9;

    margin-bottom:25px;

}



.devocional-texto h2 {

    font-size:28px;

    font-weight:700;

    color:#222;

    margin-top:50px;

    margin-bottom:20px;

}



.devocional-texto strong {

    font-weight:600;

}