/* ==================================================
   RESPONSIVE SELAH
   Adaptación para tablets y móviles
================================================== */





/* ==================================================
   TABLETS
   Hasta 900px
================================================== */


@media(max-width:900px) {





    /* ==================================================
       MENÚ PRINCIPAL
    ================================================== */


    .menu {

        padding:20px 30px;

    }



    .menu ul {

        gap:25px;

    }



    .menu ul li a {

        font-size:14px;

    }









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


    .hero-contenido {

        max-width:650px;

    }



    .hero-contenido h1 {

        font-size:55px;

    }



    .hero-contenido p {

        font-size:18px;

    }









    /* ==================================================
       BOTÓN PRINCIPAL
    ================================================== */


    .boton {

        padding:14px 35px;

    }









    /* ==================================================
       ENCABEZADOS PÁGINAS INTERNAS
    ================================================== */


    .encabezado-pagina {

        min-height:260px;

        padding:35px 20px;

    }



    .encabezado-pagina h1 {

        font-size:42px;

    }



    .encabezado-pagina p {

        font-size:17px;

    }









    /* ==================================================
       SECCIONES PRINCIPALES
    ================================================== */


    .seccion {

        padding:80px 20px;

    }



    .seccion h2 {

        font-size:36px;

    }



    .descripcion-seccion {

        font-size:16px;

        margin-bottom:40px;

    }









    /* ==================================================
       TARJETAS INICIO
       Devocionales / Estudios Bíblicos
    ================================================== */


    .tarjetas-inicio {

        gap:30px;

    }



    .tarjeta-inicio {

        width:300px;

    }



    .tarjeta-inicio img {

        height:220px;

    }



    .tarjeta-inicio .contenido-tarjeta {

        padding:25px;

    }



    .tarjeta-inicio .contenido-tarjeta h3 {

        font-size:22px;

    }



    .tarjeta-inicio .contenido-tarjeta p {

        font-size:14px;

    }









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


    .lista-devocionales {

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

        gap:30px;

    }



    .tarjeta-devocional img {

        height:240px;

    }



    .tarjeta-devocional .contenido-tarjeta {

        padding:25px;

    }



    .tarjeta-devocional h2 {

        font-size:21px;

    }



    .tarjeta-devocional p {

        font-size:14px;

        line-height:1.7;

    }



    .tarjeta-devocional .contenido-tarjeta a {

        margin-top:10px;

    }





    .devocional-contenido {

        padding:40px 20px 60px;

    }



    .devocional-header h1 {

        font-size:32px;

    }



    .devocional-versiculo {

        font-size:16px;

    }



    .devocional-texto p {

        font-size:16px;

    }



    .devocional-texto h2 {

        font-size:24px;

    }









    /* ==================================================
       ESTUDIOS BÍBLICOS
    ================================================== */


    .lista-estudios {

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

        gap:30px;

    }



    .curso-contenido,
    .estudio-contenido,
    .leccion-contenido {

        padding:40px 20px 60px;

    }



    .curso-header h1,
    .estudio-header h1,
    .leccion-header h1 {

        font-size:32px;

    }



    .curso-descripcion,
    .leccion-subtitulo {

        font-size:16px;

    }



    .leccion-texto p {

        font-size:16px;

    }



}



/* ==================================================
   CELULARES
   Hasta 600px
================================================== */


@media(max-width:600px) {





    /* ==================================================
       MENÚ PRINCIPAL
    ================================================== */


    .menu {

        flex-direction:column;

        gap:18px;

        padding:20px;

    }



    .logo {

        font-size:25px;

    }



    .menu ul {

        width:100%;

        justify-content:center;

        flex-wrap:wrap;

        gap:18px;

    }



    .menu ul li a {

        font-size:14px;

    }









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


    .hero {

        padding:20px;

    }



    .hero-contenido {

        max-width:100%;

    }



    .hero-contenido h1 {

        font-size:42px;

    }



    .hero-contenido p {

        font-size:16px;

        margin-bottom:30px;

    }



    .boton {

        padding:13px 30px;

        font-size:14px;

    }









    /* ==================================================
       ENCABEZADOS PÁGINAS INTERNAS
    ================================================== */


    .encabezado-pagina {

        min-height:230px;

        padding:30px 20px;

    }



    .encabezado-pagina h1 {

        font-size:34px;

    }



    .encabezado-pagina p {

        font-size:16px;

    }









    /* ==================================================
       MENÚ PÁGINAS INTERNAS
    ================================================== */


    .menu-devocional .menu {

        padding:20px;

    }









    /* ==================================================
       SECCIONES PRINCIPALES
    ================================================== */


    .seccion {

        padding:70px 20px;

    }



    .seccion h2 {

        font-size:30px;

    }



    .descripcion-seccion {

        font-size:15px;

        line-height:1.7;

    }









    /* ==================================================
       TARJETAS PRINCIPALES
       Devocionales / Estudios Bíblicos
    ================================================== */


    .tarjetas-inicio {

        width:100%;

        gap:25px;

    }



    .tarjeta-inicio {

        width:100%;

        max-width:340px;

    }



    .tarjeta-inicio img {

        height:220px;

    }



    .tarjeta-inicio .contenido-tarjeta {

        padding:25px 20px;

    }



    .tarjeta-inicio .contenido-tarjeta h3 {

        font-size:21px;

    }



    .tarjeta-inicio .contenido-tarjeta p {

        font-size:14px;

        line-height:1.7;

    }









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


    .lista-devocionales {

        grid-template-columns:1fr;

        padding:50px 20px;

        gap:30px;

    }



    .tarjeta-devocional img {

        height:230px;

    }



    .tarjeta-devocional .contenido-tarjeta {

        padding:22px;

    }



    .tarjeta-devocional h2 {

        font-size:21px;

    }



    .tarjeta-devocional p {

        font-size:14px;

        line-height:1.8;

    }



    .tarjeta-devocional .contenido-tarjeta a {

        font-size:14px;

        padding:10px 18px;

        margin-top:10px;

    }





    .devocional-contenido {

        padding:35px 20px 60px;

    }



    .devocional-imagen img {

        width:100%;

        height:auto;

        border-radius:15px;

    }



    .devocional-header {

        margin-bottom:35px;

    }



    .devocional-header h1 {

        font-size:28px;

    }



    .devocional-versiculo {

        font-size:15px;

    }



    .devocional-texto p {

        font-size:16px;

    }



    .devocional-texto h2 {

        font-size:23px;

    }









    /* ==================================================
       ESTUDIOS BÍBLICOS
    ================================================== */


    .lista-estudios {

        grid-template-columns:1fr;

        padding:50px 20px;

        gap:30px;

    }



    .curso-imagen img,
    .estudio-imagen img,
    .leccion-imagen img {

        width:100%;

        height:auto;

        border-radius:15px;

    }



    .curso-header h1,
    .estudio-header h1,
    .leccion-header h1 {

        font-size:28px;

    }



    .curso-descripcion,
    .leccion-subtitulo {

        font-size:15px;

    }



    .leccion-texto p {

        font-size:16px;

    }









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


    .tarjeta-leccion {

        padding:20px;

    }



    .tarjeta-leccion h2 {

        font-size:19px;

    }









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


    .navegacion-lecciones {

        flex-direction:column;

        gap:20px;

        text-align:center;

    }



}