body {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    position: relative;
    background-image: url(../img/fondo-principal.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}


/* carousel */

.main {
    filter: drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.5));
    animation: slow-down 1s ease;
}

.carousel {
    clip-path: polygon(0% 0%, 0% 100%, 2% 97%, 4% 100%, 6% 97%, 8% 100%, 10% 97%, 12% 100%, 14% 97%, 16% 100%, 18% 97%, 20% 100%, 22% 97%, 24% 100%, 26% 97%, 28% 100%, 30% 97%, 32% 100%, 34% 97%, 36% 100%, 38% 97%, 40% 100%, 42% 97%, 44% 100%, 46% 97%, 48% 100%, 50% 97%, 52% 100%, 54% 97%, 56% 100%, 58% 97%, 60% 100%, 62% 97%, 64% 100%, 66% 97%, 68% 100%, 70% 97%, 72% 100%, 74% 97%, 76% 100%, 78% 97%, 80% 100%, 82% 97%, 84% 100%, 86% 97%, 88% 100%, 90% 97%, 92% 100%, 94% 97%, 96% 100%, 98% 97%, 100% 100%, 100% 0%);
}


/* after carousel */

.p-aviso {
    font-size: 1.2rem;
    font-weight: 500;
    text-align: center;
    color: #eeeeee;
    padding-top: 1rem;
    margin: 0px;
    animation: slow-down 1.5s ease;
}

.box_card {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin-bottom: 2rem;
}

.cards {
    position: relative;
    min-height: 300px;
    width: 100%;
    max-width: 220px;
    overflow: hidden;
    margin-bottom: 1rem;
    animation: slow-down 2s ease;
}

.img_card {
    position: absolute;
    width: 100%;
    padding: 1rem;
    opacity: 1;
    transition: .5s opacity ease-in-out;
    overflow: hidden;
}

.img_card2 {
    position: absolute;
    width: 100%;
    padding: 1rem;
    opacity: 1;
    transition: .5s transform ease-in-out;
    transform: translateY(100%);
}

.box_btn_card {
    position: absolute;
    bottom: 5%;
    width: 50%;
    transition: .5s transform ease-in-out;
    transform: translate(50%, 250%);
    text-align: center;
    cursor: pointer;
}

.img_btn {
    width: 100%;
    max-width: 40%;
    margin: .2rem 0rem;
}

.btn_card {
    width: 100%;
    font-size: .8rem;
    font-weight: bolder;
    background-color: #FFFFFF;
    border-radius: 100px;
}

.btn_1,
.btn_1:hover {
    color: #CB88A1;
}

.btn_2,
.btn_2:hover {
    color: #E9C064;
}

.btn_3,
.btn_3:hover {
    color: #BF4C32;
}

.btn_4,
.btn_4:hover {
    color: #000;
}


/* efectos cards web*/

.cards:hover>.img_card2 {
    opacity: 1;
    transform: translateY(0%);
}

.cards:hover>.img_card {
    opacity: 0;
    transform: translateY(0%);
}

.cards:hover>.box_btn_card {
    opacity: 1;
    transform: translate(50%, 0%);
}


/* modal */

.modal-content {
    max-width: 21rem;
    border-radius: 1.1rem;
}

.modal-body {
    background: linear-gradient(180deg, #22A1C7 0%, #F1BB03 100%);
    border-radius: 1rem;
}

.modal-color {
    background-color: rgba(36, 1, 50, .8);
}

.p-modal-title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 1.7rem;
    padding-top: 1rem;
}

.p-modal-subtitle {
    text-align: center;
    font-size: .9rem;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 1rem;
    padding: 1rem 0;
}

.box-btn-armar {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.img-modal {
    width: 100%;
    max-width: 5rem;
    margin: .5rem;
}

.btn-modal-armar {
    background-color: #FFFFFF;
    color: #230131;
    font-size: 1.2rem;
    font-weight: 800;
    padding: .3rem 2.2rem;
    border-radius: .8rem;
}


/* Radio buttons modal */

.cont-radio {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-bottom: .8rem;
}

.input-radio {
    display: none;
}

.label {
    position: relative;
    color: #FFFFFF;
    font-size: 1.5rem;
    font-weight: 800;
    border: 2px solid #fff;
    border-radius: 100px;
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    padding: .3rem 2.8rem;
    margin: 0;
}

.input-radio:checked+.label {
    background-color: #FFFFFF;
    color: #230131;
}

.input-radio:checked+.label::before {
    height: 20px;
    width: 20px;
    background-color: #FFFFFF;
}


/* redes */

.box_redes {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    z-index: 1;
    /* animation: slow-down 2s ease-in-out; */
    display: flex;
    justify-content: center;
}

.redes {
    padding: 0rem .5rem;
}


/* contáctanos */

.btn_redes {
    color: #1DB9DF;
    font-size: .9rem;
    font-weight: 600;
    white-space: nowrap;
    padding: .2rem 1rem;
    margin: 0;
    background-color: #FFFFFF;
    border-radius: 0px 0px 25px 25px;
    width: 100%;
}

.btn_redes:focus {
    box-shadow: none;
}

.btn_redes:hover {
    color: #1DB9DF;
    box-shadow: 0px 3px 2px 2px rgba(0, 0, 0, 0.2);
}

.redes_contenido {
    display: flex;
    justify-content: space-evenly;
    background-color: #FFFFFF;
    padding-top: .4rem;
}

.btn_img {
    user-select: none;
}

.btn_img:hover {
    opacity: .8;
}

.img_redes {
    width: 100%;
    max-width: 35px;
    margin: .2rem;
}


/* qué hay aquí */

.btn_link {
    font-size: .9rem;
    font-weight: 500;
    white-space: nowrap;
    color: #fff;
    border-radius: 25px;
    background-color: #230131;
    margin: .2rem;
}

.btn_link:hover {
    color: #fff;
    opacity: .8;
}

.link_color1 {
    background-color: #FBBA00;
}

.link_color2 {
    background-color: #73BB71;
}

.link_color3 {
    background-color: #1CB9DD;
}

@media (max-width: 576px) {
    .main {
        overflow: hidden;
        display: flex;
        justify-content: center;
    }
    .carousel {
        min-width: 180%;
    }
}