/* ==================================================
   SELAH - STYLE PRINCIPAL
   Configuración general del sitio
================================================== */





/* ==================================================
   1. CONFIGURACIÓN GENERAL
================================================== */


* {

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html {

    scroll-behavior:smooth;

}



body {

    font-family:'Montserrat', sans-serif;

    background:#ffffff;

    color:#222;

    line-height:1.6;

    overflow-x:hidden;

}



a {

    text-decoration:none;

    color:inherit;

    -webkit-tap-highlight-color:transparent;

}



img {

    max-width:100%;

    height:auto;

    display:block;

}



button {

    -webkit-tap-highlight-color:transparent;

}



section {

    scroll-margin-top:90px;

}









/* ==================================================
   2. MENÚ PRINCIPAL
================================================== */


.menu-header {

    width:100%;

    position:absolute;

    top:0;

    left:0;

    z-index:1000;

}



.menu {

    max-width:1200px;

    margin:0 auto;

    padding:25px 40px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.logo {

    color:#ffffff;

    font-size:28px;

    font-weight:700;

    letter-spacing:.5px;

}



.menu ul {

    list-style:none;

    display:flex;

    align-items:center;

    gap:35px;

}



.menu ul li a {

    color:#ffffff;

    font-size:15px;

    font-weight:500;

    transition:opacity .30s ease;

}



.menu ul li a:hover {

    opacity:.70;

}









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


.menu-devocional {

    width:100%;

    position:relative;

    background:#222;

    z-index:1000;

}



.menu-devocional .menu {

    padding:20px 40px;

}



.menu-devocional .logo,

.menu-devocional .menu ul li a {

    color:#ffffff;

}



.menu-devocional .menu ul li a:hover {

    opacity:.65;

}









/* ==================================================
   4. PORTADA PRINCIPAL
================================================== */


.hero {

    min-height:100vh;



    background-image:



        linear-gradient(

            rgba(0,0,0,.70),

            rgba(0,0,0,.70)

        ),



        url("../img/portada.jpg");



    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;



    display:flex;

    justify-content:center;

    align-items:center;



    text-align:center;

    padding:20px;

}



.hero-contenido {

    max-width:750px;

    color:#ffffff;

}



.hero-contenido h1 {

    font-size:70px;

    font-weight:700;

    line-height:1.2;

    margin-bottom:20px;

}



.hero-contenido p {

    font-size:20px;

    font-weight:300;

    margin-bottom:40px;

}









/* ==================================================
   5. BOTONES GENERALES
================================================== */


.boton {

    display:inline-block;

    padding:15px 40px;

    border-radius:30px;

    background:#ffffff;

    color:#222;

    font-weight:600;



    transition:

        transform .30s ease,

        box-shadow .30s ease;

}



.boton:hover {

    transform:translateY(-3px);

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

}









/* ==================================================
   6. ENCABEZADO PÁGINAS INTERNAS
================================================== */


.encabezado-pagina {

    min-height:280px;



    background-image:



        linear-gradient(

            rgba(0,0,0,.70),

            rgba(0,0,0,.70)

        ),



        url("../img/portada.jpg");



    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;



    display:flex;

    justify-content:center;

    align-items:center;



    text-align:center;

    color:#ffffff;



    padding:40px;

}



.encabezado-contenido {

    max-width:750px;

}



.encabezado-pagina h1 {

    font-size:55px;

    font-weight:700;

    line-height:1.2;

    margin-bottom:15px;

}



.encabezado-pagina p {

    font-size:18px;

    font-weight:300;

}



/* ==================================================
   7. SECCIONES GENERALES
================================================== */


.seccion {

    padding:100px 20px;

}



.seccion:nth-of-type(even) {

    background:#fafafa;

}



.seccion h2 {

    font-size:42px;

    font-weight:700;

    text-align:center;

    margin-bottom:18px;

    color:#222;

}



.descripcion-seccion {

    max-width:720px;

    margin:0 auto 55px;

    text-align:center;

    color:#666;

    font-size:17px;

    line-height:1.8;

}









/* ==================================================
   8. TARJETAS PRINCIPALES
================================================== */


.tarjetas-inicio {

    max-width:1200px;

    margin:0 auto;

    display:flex;

    justify-content:center;

    align-items:stretch;

    gap:40px;

    flex-wrap:wrap;

}



.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;

}



.tarjeta-inicio:hover {

    transform:translateY(-8px);

    box-shadow:

        0 18px 45px rgba(0,0,0,.18);

}



.tarjeta-inicio img {

    width:100%;

    height:230px;

    object-fit:cover;

}









/* ==================================================
   CONTENIDO TARJETAS PRINCIPALES
   Solo página inicial
================================================== */


.tarjeta-inicio .contenido-tarjeta {

    padding:28px;

    text-align:center;

}



.tarjeta-inicio .contenido-tarjeta h3 {

    font-size:24px;

    font-weight:700;

    color:#222;

    margin-bottom:14px;

}



.tarjeta-inicio .contenido-tarjeta p {

    font-size:15px;

    color:#666;

    margin-bottom:24px;

    line-height:1.8;

}



.tarjeta-inicio .contenido-tarjeta a {

    display:inline-block;

    padding:12px 28px;

    background:#222;

    color:#ffffff;

    border-radius:30px;

    font-size:14px;

    font-weight:600;



    transition:

        background .30s ease,

        transform .30s ease;

}



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

    background:#444;

    transform:translateY(-2px);

}









/* ==================================================
   8.1 SECCIÓN DEVOCIONALES
================================================== */


#devocionales {

    background:#ffffff;

}









/* ==================================================
   8.2 SECCIÓN ESTUDIOS BÍBLICOS
================================================== */


#estudios {

    background:#f8f8f8;

}







/* ==================================================
   8.3 SECCIÓN ATRIBUTOS DE DIOS
================================================== */


#atributos {

    background:#f8f8f8;

}








/* ==================================================
   8.3 SEPARACIÓN ENTRE SECCIONES
================================================== */


#devocionales + #estudios + #atributos  {

    border-top:1px solid #ececec;

}









/* ==================================================
   9. FOOTER
================================================== */


footer {

    background:#222;

    color:#ffffff;

    text-align:center;

    padding:45px 20px;

}



footer p {

    font-size:14px;

    font-weight:400;

    letter-spacing:.3px;

    opacity:.90;

}









/* ==================================================
   10. UTILIDADES GENERALES
================================================== */


::selection {

    background:#222;

    color:#ffffff;

}



.contenedor {

    width:100%;

    max-width:1200px;

    margin:0 auto;

    padding-left:20px;

    padding-right:20px;

}



.texto-centro {

    text-align:center;

}



.oculto {

    display:none;

}