﻿html {
    scroll-behavior: smooth;
}
body {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    color: #EF0F4D;
    padding: 0;
    margin: 0;
    font-size: 18px;
}
section{
    position:relative;
}
    section#header {
        background: #f4d4d9;
        padding-top: 50px;
        padding-bottom: 170px;
    }
        section#header:before {
            content: "";
            background: url(img/bg1.png);
            position: absolute;
            height: 1200px;
            width: 53%;
            display: block;
            bottom: 0;
            right: 0;
            background-size: cover;
            background-repeat: no-repeat;
        }
        section#header:after {
            content: "";
            background: url(img/wave_h_1.svg);
            position: absolute;
            height: 95px;
            width: 100%;
            bottom: 0;
            right: 0;
            z-index: 0;
        }
    section#porque {
        color: #F4D4D9;
        padding: 100px 0;
        background: #C21635;
        background: linear-gradient(165deg,rgba(194, 22, 53, 1) 59%, rgba(238, 36, 86, 1) 100%);
    }
        section#porque:after {
            content: "";
            background: url(img/wave_bg.svg);
            position: absolute;
            height: 732px;
            width: 49%;
            top: -90px;
            right: 0;
            z-index: 0;
            background-repeat: no-repeat;
            background-size: cover;
            -webkit-mask-image: linear-gradient(360deg, black, transparent);
            mask-image: linear-gradient(360deg, black, transparent);
        }
    section#quees {
        background: #f0c09a;
        padding: 30px 0 200px;
    }
        section#quees:after {
            content: "";
            background: url(img/wave_h_2.svg);
            position: absolute;
            height: 175px;
            width: 100%;
            bottom: 0;
            right: 0;
        }
    section#acerca {
        background: #e9dfe0;
        padding: 40px 0 100px;
    }
        section#acerca::after {
            content: "";
            background: url(img/sobre_Nancy1.png);
            position: absolute;
            height: 710px;
            width: 690px;
            left: 14%;
            bottom: 0;
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
        }
    section#review {
        background: #EF0F4D;
        color: #F4D4D9;
        overflow:hidden;
    }
    section#queincluye {
        background: #e9dfe0;
        padding: 40px 0 220px;
    }
        section#queincluye:after {
            content: "";
            background: url(img/wave_h_1.svg);
            position: absolute;
            height: 210px;
            width: 100%;
            bottom: 0;
            right: 0;
            z-index: 0;
            background-position: bottom;
        }

.chat-faux img {
    width: 80%;
    margin: 40px auto;
    display: block;
    position: relative;
    z-index: 9;
}
.container {
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 20px;
}
.container-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.main-tittle {
    font-size: 50px;
    margin: 40px 0;
    font-weight: 500;
}
    .main-tittle b {
        display: block
    }
.one-half {
    width: 49.333%;
}
b.semi-highligt-text {
    font-size: 30px;
}
ul.list {
    padding: 0 0 0 30px;
    margin: 20px 0;
    max-width: 380px;
}
    ul.list li {
        margin-bottom: 20px
    }
.date {
    display: flex;
    align-items: center;
    font-weight: 700;
    margin: 40px 0;
}
    .date img {
        width: 35px;
        margin-right: 10px;
    }
.basic-button {
    background: #EE2456;
    border: none;
    color: white;
    padding: 15px 0;
    font-size: 20px;
    text-align: center;
    font-weight: 500;
    width: 290px;
    border-radius: 999px;
    display: block;
    opacity:1;
    text-decoration: none;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    cursor:pointer;
}
    .basic-button:hover {
        opacity:0.7;
    }
    .capsule-item {
        padding: 0 0 0 35px;
        border: 2px solid;
        position: relative;
        border-radius: 19px;
        height: 60px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        font-weight: 500;
    }
    .capsule-item:before {
        content: "";
        background: url(img/wirl.svg);
        position: absolute;
        width: 45px;
        height: 45px;
        background-size: contain;
        left: -20px;
    }
.main-tittle span {
    font-weight: 700;
}
.star-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.star-item {
    width: 40%;
    margin-bottom: 20px;
    padding-left: 7%;
    display: flex;
    align-items: center;
    position: relative;
    font-weight: 500;
}
    .star-item:before {
        content: "";
        background: url(img/Star1.svg);
        position: absolute;
        width: 35px;
        height: 35px;
        left: 0;
        background-repeat: no-repeat;
    }
.review-box-main {
    background: #f0c09a;
    position: relative;
    width: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
}
    .review-box-main:before {
        content: "";
        background: url(img/wave_v_3.svg);
        position: absolute;
        height: 100%;
        width: 110px;
        left: 0;
        top: 0;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .review-box-main:after {
        content: "";
        background: #f0c09a;
        position: absolute;
        width: 130%;
        height: 100%;
        left: 20%;
        z-index: 0;
    }
.review-box-parent {
    text-align: center;
    position: relative;
    z-index: 1;
    padding: 80px 0;
}
.review-box {
    background: #e9dfe0;
    color: #EF0F4D;
    font-style: italic;
    width: 290px;
    padding: 20px 20px;
    border-radius: 20px;
    text-align: left;
    position: absolute;
    bottom: 5%;
    right: -30%;
    font-size: 16px;
}
.review-box-score {
    position: absolute;
    background: #ef0f4d;
    padding: 10px 10px 5px;
    top: -28px;
    border-radius: 99px;
}
i.star {
    background: url(img/Star1.svg);
    display: inline-block;
    height: 20px;
    width: 20px;
    background-size: contain;
    background-repeat: no-repeat;
}
.queincluye-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin: 40px 0;
}
.queincluye-list-item {
    width: 47%;
    padding: 10px;
    height: 70px;
    display: flex;
    justify-content: flex-start;
    border: 1px solid #EF0F4D;
    border-radius: 25px;
    align-items: center;
    margin-bottom: 30px;
}
.item-ico {
    width: 50px !important;
    height: 50px;
    margin-left:10px;
    margin-right: 20px;
    background-position: center !important;
    background-size: contain !important;
    display: block;
    background-repeat: no-repeat !important;
}
.queincluye-list-item span {
    width: 80%;
}
.item1 {
    background:url(img/item1.svg)
}
.item2 {
    background: url(img/item2.svg)
}
.item3 {
    background: url(img/item3.svg)
}
.item4 {
    background: url(img/item4.svg)
}
.item5 {
    background: url(img/item5.svg)
}
.item6 {
    background: url(img/item6.svg)
}
.full-width-flex {
    flex-wrap:wrap;
}
.full-width {
    width: 100%
}
/*SLIDER*/
.slider-container {
    position: relative;
    width: 100%; 
    height: 600px;
    overflow: hidden;
}
.slideCont-half {
    width: 45%;
    position: relative;
    padding: 0 20px;
}
    .slideCont-half.slideCont-half-right {
        text-align: center;
    }
/* Estilo de cada diapositiva */
.slide {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
/*    height: 100%;*/
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.7s ease-in-out;
    opacity: 0; 
    background-size: cover; 
    background-position: center; 
}

    /* Diapositiva activa */
    .slide.active {
        opacity: 1; 
    }

.nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    padding: 0.75rem 1.25rem;
    font-size: 0;
    height: 38px;
    width: 38px;
    cursor: pointer;
    background-repeat: no-repeat !important;
    background-position: center !important;
    z-index: 10;
    opacity: 1;
    user-select: none;
    border-radius: 9999px;
    transition: background-color 0.3s ease;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}

    .nav-button:hover {
        opacity:0.5
    }

.prev-button {
    left: 1rem;
}

.next-button {
    right: 1rem; 
}
.slideCont {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.prev-button {
    background: url(img/aleft.svg)
}
.next-button {
    background: url(img/aright.svg)
}
section#loguelograras {
    color: #F4D4D9;
    background: #c21635;
    padding-bottom: 40px;
}
    section#loguelograras .queincluye-list-item {
        background: #F4D4D9;
        color: #c21635;
    }
        section#loguelograras .queincluye-list-item i.loguelograras-item-ico {
            background: url(img/check.svg);
            width: 32px;
            height: 32px;
            margin: 0 20px 0 10px;
        }
section#inscribete {
    padding:40px 0;
    background: #EE8E63;
    background: linear-gradient(90deg,rgba(238, 142, 99, 1) 0%, rgba(238, 142, 99, 1) 25%, rgba(240, 192, 154, 1) 75%, rgba(240, 192, 154, 1) 100%);
    position:relative
}
.waaction {
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.waaction::after {
    content: "";
    background: url(img/inscribete.svg);
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    max-width: 600px;
    background-repeat: no-repeat;
}
.inscribete-one-half {
    position: relative;
    padding-left: 6.5%;
}
    .inscribete-one-half:before {
        content: "";
        background: url(img/inscribete-left.svg);
        height: 196px;
        display: block;
        width: 53px;
        position: absolute;
        background-size: contain;
        background-repeat: no-repeat;
        left: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }
.waaction .basic-button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
    .waaction .basic-button img {
        margin-right: 10px;
    }
footer {
    text-align: center;
    padding: 30px 0;
}
section#contact {
    background: #F4D4D9;
}
.contact-form iframe {
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
    display: block;
    height: 460px;
    border: none;
    padding: 0;
    overflow: hidden;
}
.form-content .text-basic-cont {
    font-weight: 500;
}
.contact-img {
    overflow: hidden;
    margin-bottom: -10px;
}
.row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.col-md-6 {
    width: 49.333%;
}
.basic-input {
    width: 90%;
    background: transparent;
    border: 1px solid #ee2456;
    font-size: 18px;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    color: #EF0F4D;
    padding: 14px 10px;
    border-radius: 90px;
    margin: 10px 0 30px;
}
.col-md-12, button#send-bt2 {
    width: 100%;
}
.sent-notification.alert-sent {
    text-align: center;
    margin: 20px auto;
    text-transform: uppercase;
    background: #EE8E63;
    padding: 8px;
    color: white;
    border-radius: 9px;
    max-width: 90%;
    font-size: 15px;
}
.spinner {
    animation: spin 2s infinite linear;
    display: inline-block;
    width: 18px;
    position: relative;
    top: 2px;
    margin-left: 5px;
}
.sending, .waiting .idle {
    display: none;
}
.waiting .sending {
    display: inline-block;
}
.basic-button.waiting {
    opacity: 0.8;
    pointer-events: none;
}
#mapsection {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(238, 142, 99, 1) 0%, rgba(238, 142, 99, 1) 25%, rgba(240, 192, 154, 1) 75%, rgba(240, 192, 154, 1) 100%);
    position: relative;
    padding: 40px 0;
    min-height: 780px;
    /*    padding: 90px;*/
    /*    margin-bottom: -50px;*/
}
/*    #mapsection:before {
        content: "";
        background: url(img/wave_h_3.svg);
        width: 100%;
        height: 140px;
        display: block;
        z-index: 999;
        position: absolute;
        transform: rotate(180deg);
        background-size: contain;
    }*/
    #mapsection:after {
        content: "";
        background: url(img/wave_h_4.svg);
        width: 100%;
        height: 210px;
        display: block;
        z-index: 0;
        position: absolute;
        transform: rotate(0deg);
        background-size: contain;
        bottom: 50px;
        background-position: -180%;
        bottom: 0;
    }
div#mapsection div#map {
    width: 100% !important;
    max-width: 1000px;
    margin: 0 auto;
    filter: grayscale(100%);
}
.modal-dialog {
    background: #f0c09a !important;
    background: #EE8E63;
    background: linear-gradient(90deg, rgba(238, 142, 99, 1) 0%, rgba(238, 142, 99, 1) 25%, rgba(240, 192, 154, 1) 75%, rgba(240, 192, 154, 1) 100%);
}
.modal-header h2#modal-title {
    font-weight: 900;
    font-size: 30px;
    text-transform: uppercase;
    margin: auto;
}
img#modal-img {
    background: white;
    border-radius: 30px;
    display:none; /*TEMPORAL*/
}
.modal-body p {
    background: #e9dfe0;
    margin: 10px auto;
    padding: 15px 10px;
    font-style: italic;
    border-radius: 10px;
    display: flex;
    align-items: center;
}
    .modal-body p b {
        margin-left: 10px;
    }
#modal-desc {
    font-weight:bold;
}
.social {
    font-size: 0;
    display: inline-block;
    width: 35px;
    height: 35px;
    background-position: center;
    margin: 0 5px;
    opacity: 1;
}
    .social:hover {
        opacity: 0.8;
    }
    .social.insta {
        background: url(img/instagram-brands-solid-full.svg)
    }
    .social.fb {
        background: url(img/facebook-brands-solid-full.svg)
    }
.search {
    width: 100% !important;
    max-width: 1000px;
    margin: 0 auto 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
button.search-input.basic-button {
    height: 51px;
    width: 51px;
    display: flex;
}
    button.search-input.basic-button img {
        width: 100%;
    }
input.search-input.basic-input {
    background: white;
    margin-bottom: 0;
    margin-top: 0;
    width: 50%;
    margin-right: 10px;
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
    @media (max-width: 768px) {
        .slider-container {
            height: 300px;
        }

        .slide {
            font-size: 1.8rem;
        }

        .nav-button {
            padding: 0.5rem 0.8rem;
            font-size: 1.5rem;
        }
    }

    @media (max-width: 480px) {
        .slider-container {
            height: 1050px;
        }

        .slide {
            font-size: 1.2rem;
        }

        .nav-button {
            padding: 0.4rem 0.6rem;
            font-size: 1.2rem;
        }
    }