:root{
    --color-primario:#2C3639;
    --color-secundario:#e7e3dc;
    --color-terciario:#a27b5c;
    --color-hover:#3b5249;
    --color-blanco:#ffffff;
}

body{
    margin:0;
    padding:0;
    font-family:Arial,sans-serif;
    background-color:var(--color-secundario);
    color:var(--color-primario);
}

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

.portadaSantuario{
    position:relative;
    width:100%;
    height:350px;
    overflow:hidden;
}

.portadaSantuario img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:brightness(65%);
}

.contenidoPortada{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
    color:white;
    width:90%;
}

.contenidoPortada h1{
    font-size:3.2rem;
    margin-bottom:15px;
    text-shadow:2px 2px 10px rgba(0,0,0,.7);
}

.contenidoPortada p{
    font-size:1.2rem;
    line-height:1.7;
    text-shadow:2px 2px 8px rgba(0,0,0,.6);
}

/* ========================= */
/* GALERÍA */
/* ========================= */

.galeriaSantuario{
    display:flex;
    justify-content:center;
    gap:25px;
    flex-wrap:wrap;
    padding:50px 30px;
}

.galeriaSantuario img{
    width:250px;
    height:250px;
    object-fit:cover;
    border-radius:18px;
    box-shadow:0 5px 18px rgba(0,0,0,.2);
    transition:.3s ease;
}

.galeriaSantuario img:hover{
    transform:translateY(-8px) scale(1.03);
}

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

.contenedorSantuario{
    width:100%;
    padding-bottom:60px;
}

.cajaTexto{
    background-color:#f5f3ef;
    width:85%;
    max-width:950px;
    margin:25px auto;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 4px 15px rgba(0,0,0,.1);
}

.cajaTexto h2{
    margin:0;
    padding:22px 30px;
    background-color:var(--color-terciario);
    color:white;
    font-size:1.8rem;
}

.cajaTexto p{
    padding:0 30px;
    margin:25px 0;
    color:#333;
    line-height:1.9;
    font-size:1.05rem;
}

/* ========================= */
/* CAJA EXTRA */
/* ========================= */

.infoExtra{
    margin:30px;
    background:#ede7dc;
    border-left:6px solid var(--color-terciario);
    border-radius:15px;
    padding:25px;
}

.infoExtra h3{
    margin-top:0;
    margin-bottom:15px;
    color:var(--color-hover);
    font-size:1.5rem;
}

.infoExtra p{
    padding:0;
    margin:0;
}

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

@media(max-width:768px){

    .portadaSantuario{
        height:280px;
    }

    .contenidoPortada h1{
        font-size:2rem;
    }

    .contenidoPortada p{
        font-size:1rem;
    }

    .galeriaSantuario img{
        width:100%;
        max-width:350px;
        height:240px;
    }

    .cajaTexto{
        width:92%;
    }

    .cajaTexto h2{
        font-size:1.3rem;
    }

    .cajaTexto p{
        font-size:1rem;
    }

}