/* ==================================================
   ESTUDIOS BÍBLICOS SELAH
   Estilos exclusivos de la sección Estudios
================================================== */





/* ==================================================
   TARJETA PRINCIPAL EN INDEX
================================================== */


#estudios .tarjetas-inicio {

    display:flex;

    justify-content:center;

    margin-top:40px;

}





#estudios .tarjeta-inicio {

    width:320px;

    background:#ffffff;

    border-radius:18px;

    overflow:hidden;

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

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}





#estudios .tarjeta-inicio:hover {

    transform:translateY(-8px);

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

}





#estudios .tarjeta-inicio img {

    width:100%;

    height:230px;

    object-fit:cover;

    display:block;

}





#estudios .tarjeta-inicio .contenido-tarjeta {

    text-align:center;

}





/* ==================================================
   LISTA GENERAL DE ESTUDIOS
================================================== */


.lista-estudios {

    max-width:1100px;

    margin:0 auto;

    padding:70px 20px;

    display:grid;

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

    gap:35px;

}









/* ==================================================
   TARJETAS DE ESTUDIOS
================================================== */


.tarjeta-estudio {

    background:#ffffff;

    border-radius:16px;

    overflow:hidden;

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

    transition:

        transform .30s ease,

        box-shadow .30s ease;

}





.tarjeta-estudio:hover {

    transform:translateY(-6px);

    box-shadow:0 14px 35px rgba(0,0,0,.12);

}





.tarjeta-estudio img {

    width:100%;

    height:260px;

    object-fit:cover;

    display:block;

}





.contenido-estudio {

    padding:25px;

}





.contenido-estudio h2 {

    font-size:22px;

    line-height:1.4;

    font-weight:600;

    color:#222;

    margin-bottom:12px;

}





.contenido-estudio p {

    font-size:14px;

    font-weight:300;

    line-height:1.8;

    color:#666;

    margin-bottom:25px;

}





/* ==================================================
   BOTÓN VER MÁS - ESTUDIOS
================================================== */


.contenido-estudio a {

    display:inline-block;

    color:#222;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    padding:10px 18px;

    border:1px solid #222;

    border-radius:30px;

    transition:

        background .30s ease,

        color .30s ease;

}





.contenido-estudio a:hover {

    background:#222;

    color:#ffffff;

}



/* ==================================================
   PÁGINA PRINCIPAL DEL ESTUDIO
================================================== */


.estudio-individual {

    width:100%;

}





.estudio-contenido {

    max-width:850px;

    margin:0 auto;

    padding:40px 20px 70px;

}





.estudio-imagen img {

    width:100%;

    max-width:500px;

    aspect-ratio:1 / 1;

    object-fit:cover;

    display:block;

    margin:0 auto 35px;

    border-radius:18px;

}





.estudio-header {

    text-align:center;

    margin-bottom:50px;

}





.estudio-header h1 {

    font-size:42px;

    line-height:1.3;

    font-weight:700;

    color:#222;

    margin-bottom:18px;

}





.estudio-descripcion {

    font-size:18px;

    font-weight:300;

    line-height:1.8;

    color:#666;

}









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


.lista-lecciones {

    display:flex;

    flex-direction:column;

    gap:20px;

}









/* ==================================================
   TARJETAS DE LECCIONES
================================================== */


.leccion {

    background:#ffffff;

    border-radius:12px;

    padding:25px;

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

    transition:

        transform .30s ease,

        box-shadow .30s ease;

}






.leccion:hover {

    transform:translateY(-4px);

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

}





.leccion h2 {

    font-size:20px;

    line-height:1.4;

    font-weight:600;

    color:#222;

    margin-bottom:10px;

}





.leccion p {

    font-size:15px;

    font-weight:300;

    line-height:1.7;

    color:#666;

    margin-bottom:18px;

}





.leccion a {

    display:inline-block;

    color:#222;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    padding:10px 18px;

    border:1px solid #222;

    border-radius:30px;

    transition:

        background .30s ease,

        color .30s ease;

}





.leccion a:hover {

    background:#222;

    color:#ffffff;

}



/* ==================================================
   PÁGINA INDIVIDUAL DE LECCIÓN
================================================== */


.leccion-individual {

    width:100%;

}









.leccion-contenido {

    max-width:850px;

    margin:0 auto;

    padding:40px 20px 70px;

}









.leccion-imagen img {

    width:100%;

    max-width:500px;

    aspect-ratio:1 / 1;

    object-fit:cover;

    display:block;

    margin:0 auto 35px;

    border-radius:18px;

}









.leccion-header {

    text-align:center;

    margin-bottom:45px;

}









.leccion-header h1 {

    font-size:42px;

    line-height:1.3;

    font-weight:700;

    color:#222;

    margin-bottom:18px;

}









.leccion-subtitulo {

    font-size:18px;

    font-style:italic;

    font-weight:300;

    line-height:1.8;

    color:#666;

}









/* ==================================================
   CONTENIDO DE LA LECCIÓN
================================================== */


.leccion-texto {

    color:#333;

}









.leccion-texto p {

    font-size:17px;

    font-weight:300;

    line-height:1.9;

    margin-bottom:25px;

}









.leccion-texto h2 {

    font-size:28px;

    font-weight:700;

    color:#222;

    margin-top:50px;

    margin-bottom:20px;

}









.leccion-texto strong {

    font-weight:600;

}









/* ==================================================
   NAVEGACIÓN ENTRE LECCIONES
================================================== */


.navegacion-lecciones {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:60px;

    padding-top:30px;

    border-top:1px solid #ddd;

}









.navegacion-lecciones a {

    display:inline-block;

    color:#222;

    text-decoration:none;

    font-size:15px;

    font-weight:600;

    padding:10px 18px;

    border:1px solid #222;

    border-radius:30px;

    transition:

        background .30s ease,

        color .30s ease;

}









.navegacion-lecciones a:hover {

    background:#222;

    color:#ffffff;

}