* {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        /* background-color: white; */
}

:root {
        --rojo-claro: #EF3829;
        --rojo-claro-bajo: #F65041;
        --rojo-claro-alto: #DA291C;
        --turquesa-claro: #1097AE;
        --negro: #000000;
        --negro-medio: #222222;
        --negro-bajo: #444444;
        --gris-medio: #666666;
        --gris-alto: #888888;
        --gris-container-border: #DBDBDB;
        --gris-container: #F4F4F4;

}

@font-face {
        font-family: 'Roboto';
        src: url('../fonts/Roboto-Regular.ttf') format('truetype');
}

html,
body{
        font-size: 62.5%;
        height: 100%;
        scroll-behavior: smooth;
}

header {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 320px;
        justify-content: center;
        height: auto;
        margin-top: 20px;
}

header img {
        align-self: center;
        height: 60px;
        
}

header .header--title {
        width: 90%;
        margin-top: 0px;
        align-self: center;
        font-size: 2.2rem;
        font-family: 'Roboto', sans-serif;
        font-weight: bold;
        color: var(--rojo-claro-bajo);
        text-align: center;
}

header .header--titleinferior {
        width: 90%;
        margin-top: 0px;
        align-self: center;
        font-size: 1.8rem;
        font-family: 'Roboto', sans-serif;
        font-weight: 150;
        color: var(--negro-bajo);
        text-align: center;
}

header .header--description {
        width: 100%;
        align-self: center;
        font-size: 2.4rem;
        font-family: 'Roboto', sans-serif;
        font-weight: 900;
        color: var(--negro-bajo);
        text-align: center;
}

main{
    min-width: 320px;
    width: 100%;
    height: auto;
    background-color: var(--off-white);
}

.paso--content {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
       
}

.container-background {
        width: 100%;
        position: relative;
        overflow: hidden; 
}

/* .container-background #backgroundImg{
        background-image: url('../image/background_wave.svg');
        visibility: visible !important;
        position: absolute;
        left: 0;
        background-size: contain;
        background-repeat: no-repeat;
        background-position-x: center;
        background-color: transparent;
        align-content: center;
        padding-top: 56.25%;       
} */

.paso--content img {
        height: 50px;
        margin-top: 8px;
        margin-bottom: 10px;
}

/* Start CARROUSEL*/
/* End CARROUSEL*/

.btn-enviar-new {
        background-color: var(--rojo-claro-alto);
        color: #FFFFFF;
        text-align: center !important;
        width: 90%;
        font-size: 2.4rem;
        font-weight: 500;
        /* padding: 1.25rem; */
        border: 0 solid;
        border-radius: 74px;
        height: 48px;
        margin-bottom: 0px;
        max-width: 70%;
        align-self: center;
        margin-top: 1.5rem;

}

.btn-enviar--disable {
        /* background-color: #888888; */
        background-color: var(--rojo-claro-alto);
}

.paso--content--fan {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

}

.paso--content--fanimg{
        height: 70px;
        margin-top: 2rem;
}


.paso--content--fan .fan-consulta {
        margin-left: 30px;
        text-align: start;
}

.paso--content--fan p {
        font-size: 1.4rem;
        font-weight: bold;
        color: var(--negro);
}

.paso--content--fan span {
        font-size: 1.6rem;
        color: var(--gris-medio);
}

/*carousel*/
.carousel-content {
        /* margin: 0 14%; */
}

/* @media (min-width: 1400px) {
        .carousel-content {
                margin: 0 18%;
        }
} */

.carousel {
        margin-bottom: 20px;
}

.cards-wrapper {
        display: flex;
        justify-content: center;
        margin: 10px 0px;
}

.card {
        margin: 0 1.5em;
        box-shadow: 0px 0px 8px rgba(22, 22, 26, 0.18);
        border: 1px solid var(--gris-container-border);
        border-radius: 0.5em;
        height: 370px;
        /*width: 50%;*/
        background: var(--gris-container);
        /* max-width: 227px; */
        min-width: 350px;
        justify-content: center;
}

.card img {
        width: 85%;
        height: 258px;
        margin-top: 28px;
        margin-bottom: 0px;
        padding-left: 30px;
        padding-right: 30px;
        align-self: center;
}

.card-title{
        font-size: 2.8rem;
        font-weight: 700;
        margin-bottom: 0px;
}

.card-text{
        font-size: 1.6rem;
}

.carousel-inner {
        /* padding: 1em;  */
}

.carousel-control-prev,
.carousel-control-next {
        background-color: #e1e1e1;
        width: 5vh;
        height: 5vh;
        border-radius: 50%;
        top: 50%;
        transform: translateY(-50%);
}

#backgroundImg {
        background-image: url('../image/fondo-blanco-azul.svg'); /* Reemplaza 'ruta/a/tu/imagen.jpg' con la ruta a tu imagen */
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -100;
}

.text-inferior {
        width: 90%;
        margin-top: 0px;
        align-self: center;
        font-size: 1.6rem;
        font-family: 'Roboto', sans-serif;
        font-weight: 150;
        color: var(--negro-bajo);
        text-align: center;
}