:root {
    --primario: rgb(12, 54, 65);
    --secundario: rgb(124, 206, 233);
    --gris: #3B3B3B;
    --blanco: #FFFFFF;
    --negro: #1F1E1E;
    --grisClaro: #E1E1E1;

    --separacion: 5rem;

    --fuentePrincipal: 'Roboto', sans-serif;
    --fuenteSecundaria: 'Lato', sans-serif;
}

html {
    box-sizing: border-box;
    font-size: 62.5%;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    font-family: var(--fuentePrincipal);
    font-size: 1.6rem;
    line-height: 1.5;
}

/**** Globales ****/

.contenedor {
    max-width: 120rem;
    width: 90%;
    margin: 0 auto;
}

h1,
h2,
h3 {
    font-weight: 900;
    font-family: var(--fuenteSecundaria);
    margin: calc(var(--separacion) / 2) 0;
}

h1 {
    font-size: 4.4rem;
}

h2 {
    font-size: 3.6rem;
}

h3 {
    font-size: 2.8rem;
}

img {
    max-width: 100%;
    display: block;
    height: auto;
}

a {
    text-decoration: none;
}

.btn-floating{
    background-color: var(--secundario);
}
.btn-floating i{
    font-size: 4rem;
}

/**** Utilidades ****/

.text-center {
    text-align: center;
}

.separador {
    margin-top: var(--separacion);
    margin-bottom: var(--separacion);
}

/**** Header ****/
.brand-logo img {
    height: 5rem;
}

@media (min-width: 768px) {
    .brand-logo img {
        height: 6rem;
    }
}

.nav-wrapper {
    background: var(--secundario);
}

@media (min-width: 768px) {
    .nav-wrapper {
        background: linear-gradient(190deg, var(--primario) 55%, var(--primario) 69%, var(--secundario) 69%);
    }
}

.sidenav {
    background: linear-gradient(220deg, var(--primario) 55%, var(--primario) 69%, var(--secundario) 69%);
}

/**** carrousel *****/
.contenedor-carrousel {
    margin-top: 2.5rem;
}

/**** Main ****/

.contenedor-redes-contactame div {
    border-radius: 1rem;
}

.contenedor-redes-contactame {
    display: flex;
    height: 80rem;
    flex-direction: column;
}

.contenedor-iconos {
    display: flex;
    justify-content: space-evenly;
}

@media (min-width: 768px) {
    .contenedor-redes-contactame {
        display: flex;
        flex-direction: row;
        height: 45rem;
        column-gap: 5rem;
    }
}

.contenedor-iconos-redes img {
    height: 4rem;
}


/**** contenedor convenios ****/
.contendor-convenios {
    padding:var(--separacion) 0;
    height:45rem;
    
}

@media (min-width: 768px) {
    .contendor-convenios {
        padding: var(--separacion) 0;
    }
}

.convenios {
    height: 30rem;
}

@media (min-width: 768px) {
    .convenios {
        height: 20rem;
    }
}

.convenios-title {
    border-bottom: 4px dotted var(--secundario);
}

.convenio {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 25rem;
}

@media (min-width: 768px) {
    .convenio {
        height: 20rem;
    }

    .convenio:nth-child(2) {
        flex-direction: row;
    }

    .convenio:nth-child(2) img {
        height: 12rem;
    }
}

.convenio span {
    font-size: 1.2rem;
    text-align: center;
    font-weight: 900;
}

.contendor-img-convenios img {
    height: 10rem;
}


/**** Formas de pago ****/
.carousel-pagos {
    padding-top:0;
    margin-top:0;
    margin-bottom:4rem;
    height: 6rem;
}

@media (min-width: 768px) {
    .carousel-pagos {
        height: 10rem;
    }
}

.carousel-pagos img {
    height: 4rem;
    max-width: 80%;
}

@media (min-width: 768px) {
    .carousel-pagos img {
        height: 8rem;
        max-width: 60%;
    }
}

/**** Footer ****/
.page-footer {
    background: var(--primario);
}

.logo-footer img {
    height: 10rem;
}


/**** Planes ****/
.contenedor-planes {
    margin: var(--separacion) auto;

}

.contenedor-texto-planes span {
    color: var(--secundario);
}

/**** Sedes ****/

.contenedor-tabla {
    margin-bottom: 5rem;
}

@media (min-width: 768px) {
    .contenedor-tabla {
        margin-bottom: 0;
    }
}

/**** Zafiro ****/
.contenedor-zafiro{
    height: 50rem;

}

@media (min-width: 768px) {
    .contenedor-zafiro{
        height: 60rem;
    }
}

.contenedor-tarjeta{
    display: flex;
    align-content: center;
    justify-content: center;
}

.contenedor-tarjeta img{
    max-width: 100%;
}

@media (min-width: 768px) {
    .contenedor-tarjeta img{
        max-width: 60%;
    }
}

.carousel-aliados{
    height: 7rem;
}

.carousel-aliados img{
    height: 6rem;
    max-width: 50%;
}

/**** Obituarios ****/

.contenedor-hero{
    height: 22rem;
}

.hero-form{
    border: 1px solid var(--gris);
    display: flex;
    border-radius: 1rem;
    padding: 1rem;
    -webkit-box-shadow: 2px 9px 7px 5px var(--secundario);
    -moz-box-shadow: 2px 9px 7px 5px var(--secundario);
    box-shadow: 2px 9px 7px 5px var(--secundario);
}

/**** Card obituarios ****/

.contenedor-cards{
    height: 120rem;
    margin: 2rem 1rem;
    overflow-y:scroll;
}
.card{
    background-image: url('../img/obituarios.png');
    background-size: cover;
    background-position: center;
    height: 40rem;
}

.card-title{
    font-weight: 700;
}