/* ==================================================
   LOS ATRIBUTOS DE DIOS - SELAH
   Estilos exclusivos de la sección Atributos de Dios
================================================== */


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

#atributos .tarjetas-inicio {

    display:flex;

    justify-content:center;

    margin-top:40px;

}


#atributos .tarjeta-inicio {

    width:280px;

    background:#ffffff;

    border-radius:16px;

    overflow:hidden;

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

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


#atributos .tarjeta-inicio:hover {

    transform:translateY(-6px);

    box-shadow:0 12px 32px rgba(0,0,0,0.15);

}


#atributos .tarjeta-inicio img {

    width:100%;

    height:220px;

    object-fit:cover;

    display:block;

}


#atributos .tarjeta-inicio .contenido-tarjeta {

    text-align:center;

}



/* ==================================================
   LISTA DE ATRIBUTOS
================================================== */

.lista-atributos {

    max-width:1100px;

    margin:0 auto;

    padding:70px 20px;

    display:grid;

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

    gap:35px;

}



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

.tarjeta-atributo {

    background:#ffffff;

    border-radius:16px;

    overflow:hidden;

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

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.tarjeta-atributo:hover {

    transform:translateY(-6px);

    box-shadow:0 12px 32px rgba(0,0,0,0.12);

}


.tarjeta-atributo img {

    width:100%;

    height:260px;

    object-fit:cover;

    display:block;

}



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

.tarjeta-atributo .contenido-tarjeta {

    padding:25px;

}


.tarjeta-atributo h2 {

    font-size:22px;

    font-weight:600;

    line-height:1.4;

    margin-bottom:12px;

    color:#222;

}


.tarjeta-atributo p {

    font-size:14px;

    font-weight:300;

    line-height:1.8;

    color:#666;

    margin-bottom:25px;

}



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

.tarjeta-atributo .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:
        background-color .3s ease,
        color .3s ease;

}


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

    background:#222;

    color:#ffffff;

}



/* ==================================================
   PAGINA INDIVIDUAL DEL ATRIBUTO
================================================== */

.atributo-individual {

    width:100%;

}


.atributo-contenido {

    max-width:850px;

    margin:0 auto;

    padding:40px 20px 70px;

}



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

.atributo-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
================================================== */

.atributo-header {

    text-align:center;

    margin-bottom:50px;

}


.atributo-header h1 {

    font-size:42px;

    line-height:1.3;

    font-weight:700;

    color:#222;

    margin-bottom:18px;

}


.atributo-versiculo {

    font-size:18px;

    font-style:italic;

    font-weight:300;

    line-height:1.8;

    color:#666;

}


.atributo-versiculo strong {

    display:inline-block;

    font-style:normal;

    font-weight:600;

    margin-top:8px;

}



/* ==================================================
   CONTENIDO DEL ATRIBUTO
================================================== */

.atributo-texto {

    color:#333;

}


.atributo-texto p {

    font-size:17px;

    font-weight:300;

    line-height:1.9;

    margin-bottom:25px;

}


.atributo-texto h2 {

    font-size:28px;

    font-weight:700;

    line-height:1.4;

    color:#222;

    margin-top:50px;

    margin-bottom:20px;

}


.atributo-texto strong {

    font-weight:600;

}



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

@media(max-width:900px) {

    .lista-atributos {

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

    }

}


@media(max-width:600px) {

    .lista-atributos {

        grid-template-columns:1fr;

        gap:30px;

        padding:50px 20px;

    }


    .tarjeta-atributo img {

        height:auto;

        aspect-ratio:1 / 1;

    }


    .atributo-contenido {

        padding:30px 20px 60px;

    }


    .atributo-header {

        margin-bottom:40px;

    }


    .atributo-header h1 {

        font-size:32px;

    }


    .atributo-versiculo {

        font-size:16px;

    }


    .atributo-texto p {

        font-size:16px;

    }


    .atributo-texto h2 {

        font-size:24px;

    }

}



/* ==================================================
   NAVEGACIÓN ENTRE ATRIBUTOS
================================================== */


.navegacion-atributos {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:60px;

    padding-top:30px;

    border-top:1px solid #ddd;

}









.navegacion-atributos 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-atributos a:hover {

    background:#222;

    color:#ffffff;

}