#hero {
    min-height: calc(100dvh - 80px);
    width: 100%;
    position:relative;
    display:flex;
    justify-content: space-around;
    align-items: center;
}

@media (max-width:768px) {
    #hero { align-items:start; justify-content: start;}
}

#hero .hero-back {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 10;
}

.hero-content {
    position: relative;
    z-index: 20;
    display: flex;
    gap:2rem;
    justify-content:center;
    align-items: center;
    margin: 1.5rem 0;
    @media (max-width: 992px) {
        width: 100%;
    }
}

.hero-content > * {
    flex: 1;
    max-width: 35%;
}

@media (max-width: 1024px) {
    .hero-content {
        flex-direction: column;
    }
    .hero-content > * {
        width: 90%;
        max-width: 600px;
    }
}

.hero-content .hero-sell {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #2c2927;
    border-radius:500px;
    display:flex;
    justify-content:center;
    padding: 3rem;
    text-align:center;
    flex-direction: column;
}


.hero-content .hero-sell h1 {
    font: normal normal 800 36px/42px 'Nunito', sans-serif;
    letter-spacing: 0px;
    color: #FFFFFF;
}
.hero-content .hero-sell h2 {
    font: normal normal normal 42px/50px Playfair Display;
    letter-spacing: 0px;
    color: #FBB709;
}

.hero-content .hero-form {
    width: 100%;
    display:flex;
    align-items:center;
    justify-content: center;
}

.hero-content .hero-form > div {
    max-width: 435px;
    border-radius: 12px;
    padding: 1rem 3rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    text-align: center;
    background: transparent linear-gradient(360deg, #EFEFEA 0%, #2C2926 100%) 0% 0% no-repeat padding-box;
}

.hero-content .hero-form .contact-us-at {
    font: normal normal bold 20px/24px 'Nunito', sans-serif;
    letter-spacing: 0em;
    color: #FFFFFF;
    margin-top: .5rem;
}

.hero-content .hero-form .contact-us-at a {
    display: block;
    font: normal normal bold 24px/28px 'Nunito', sans-serif;
    text-decoration:none; 
}

.hero-content .hero-form .contact-you {
    color: #FFFFFF;
}

.hero-content .hero-form .contact-us-at a:hover {
    color: inherit;
    text-decoration: underline;
}

.hero-content .hero-form form * {
    max-width: 100%;
}

.hero-content .hero-form form input[type=email],
.hero-content .hero-form form input[type=tel],
.hero-content .hero-form form input[type=text],
#callModal form input[type=email], 
#callModal form input[type=tel],
#callModal form input[type=text],
#personas, #data-hora, #inicio-fin{
    font: normal normal normal 18px/24px 'Nunito', sans-serif;
    padding: 1rem;
    letter-spacing: 0px;
    border-radius: 3px;
    border: 0;
    max-width: 100%;
}

#personas, #data-hora, #inicio-fin {
    text-align: start; background-color: white; color: gray; 
    select { border:0; } 
}

.hero-content .hero-form form p { margin:0; }

.hero-content .hero-form form .wpcf7-list-item {
    font-size: .8rem;
    margin: 1rem 0;
}

@media (max-width: 768px) {
    .hero-content .hero-sell {
        background-color: rgba(0, 0, 0, .8);
        border-radius: 12px;
        width: 90%;
        aspect-ratio: initial;
    }
    .hero-content .hero-form {
        width: 90%;
        display:flex;
    }
    .hero-content .hero-sell h1 {
        font: normal normal 800 36px/48px 'Nunito', sans-serif;
    }
    .hero-content .hero-sell h2 {
        font: normal normal normal 48px/56px Playfair Display;
    }
}

#landing-fixed {
    position:fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 60px;
    background-color: #2C2926;
    font: normal normal normal 20px/27px 'Nunito', sans-serif;
    letter-spacing: 0.05em;
    color: #FFFFFF;
}

#landing-fixed .container {
    min-height: 60px;
}

#landing-fixed a {
    font: normal normal bold 24px/32px 'Nunito', sans-serif;
    text-decoration: none;
    margin-left: .5rem;
}
#landing-fixed a:hover {
    text-decoration: underline;
    color: inherit;
}

#landing-fixed #contact-you {
    position:relative;
    padding-right: 242px
}

#landing-fixed button.landing-cta,
.hero-content .hero-form form input[type=submit],
#callModal .modal-content form input[type=submit] {
    border: 0;
    width: 242px;
    height: 242px;
    background-color: #FBB709;
    font: normal normal 800 24px / 26px 'Nunito', sans-serif;
    letter-spacing: 0px;
    color: #2C2926;
    position: absolute;
    top: -108px;
    border-radius: 200px;
    margin-left: 1rem;
    padding: 1rem 2rem 2rem;
    transition: all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#landing-fixed button.landing-cta:hover,
.hero-content .hero-form form input[type=submit]:hover,
#callModal .modal-content form input[type=submit]:hover{
    background-color: rgb(var(--text-color));
    color: white;
}

@media (max-width: 1024px) {
    #landing-fixed { font: normal normal normal 1rem / 1rem 'Nunito', sans-serif; }
    #landing-fixed a {
        font-size: 1rem;
        white-space: nowrap;
    }
    #landing-fixed button.landing-cta {
        width: auto;
        height: auto;
        font-size: 1rem;
        position: static;
        padding: 0 .5rem;
    }
}

.hero-content .hero-form form,
#callModal form { position:relative; margin-bottom: 3rem; }

.hero-content .hero-form form > *,
#callModal .modal-content form, #callModal .modal-content form > * {
    display:flex;
    flex-direction: column;
    gap: .5rem;
}

.hero-content .hero-form form input[type=submit],
#callModal .modal-content form input[type=submit]{
    width: 142px;
    height: 142px;
    font: normal normal 800 16px / 24px 'Nunito', sans-serif;
    top: initial;
    left: 50%;
    transform: translateX(-50%);
    bottom: -150px;
    margin-left: 0rem;
    padding: 1rem;
    transition: all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hero-content .hero-form form input[type=submit]:disabled,
#callModal .modal-content form input[type=submit]:disabled { 
    opacity:1; 
    pointer-events: all;
}

.wpcf7 form .wpcf7-response-output {
    border: 0;
    margin: 0;
}

.wpcf7 form span.wpcf7-spinner {
    position: absolute;
    left: 50%;
    margin-left: -12px;
    top: 1rem;
}

#landing-fixed button.landing-cta:hover {
    cursor:pointer;
    top: -158px;
    padding: 2rem;
}

.seccion {
    display: flex;
    justify-content: center;
    gap: 2rem;
    @media (max-width: 992px) {
        flex-direction: column;
        align-items: center;

    }
    > * {
        flex: 1;
    }
}

.seccion {
    padding: 10rem 0 0;
}

.seccion.half {
    padding: 5rem 0 0;    
}

.seccion.white {
    background: white;
    padding: 3rem;
    margin-top: 10rem;
    border-radius: 12px;
    color:inherit;
}

.seccion.half.white {
    padding: 3rem;
    margin-top: 5rem;
}

.seccion.white .wp-block-columns {gap:3rem;}

.wp-block-image figure { text-align: center; }

.plan > div {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.plan-title {
    font-weight: bold;
    margin-bottom: 2rem;
}
.plan-cta a, .plan-cta button {
    background-color: rgb(var(--yellow));
    color: rgb(var(--text-color));
    border: 2px solid rgb(var(--yellow));
    font-weight: 700;
    padding: 1rem 1.5rem;
    text-transform: uppercase;
    border-radius: 3px;
    transition: all .4s ease-in-out;
    margin: 1.5rem 0 .5rem;
}

.plan-cta a:hover, .plan-cta button:hover {
    background-color: rgb(var(--text-color));
    color: rgb(255,255,255);
    border: 2px solid rgb(var(--text-color));
}

.plan-caracteristicas { font-size: .8rem; }

.seccion.fototexto {
    display: flex;
    gap: 2rem;
    justify-content: space-around;
}

.seccion.fototexto > div {
    max-width: 40%;

}

@media (max-width:1024px) {
    .seccion.fototexto > div {
        max-width: 50%;
    }
}

.seccion.fototexto > div:first-child { text-align: right;}
.seccion.fototexto > div:first-child ul { direction:rtl;}

.seccion h1, .seccion h2, .seccion h3, .seccion h4 { text-wrap: balance;}

.custom-title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5rem;
    margin-bottom:2rem;
    gap:.5rem;
}

.reviews {
    gap: 3rem;
    flex-wrap: wrap!important;
    display: flex;
    justify-content: center;
    text-align: center;
}
.reviews > div {
    gap: 1rem;
    display: flex;
    flex-direction: column;
    max-width: 400px;
    flex-basis: 400px!important;
}

.reviews > div * { margin:0; }

@media (max-width:768px) {
    .seccion.fototexto {
        flex-direction: column;
    }
    .seccion.fototexto > div:first-child {
        text-align: left;
        direction: ltr;
    }
    .seccion.fototexto > div {
        max-width: 100%;
    }   
    .seccion {
        padding: 5rem 0 0;
    }
    
    .seccion.half {
        padding: 3rem 0 0;    
    }
}

/* form */

.btn-clear { 
    border: 0 !important;
    background-color: transparent !important;
}

#callModal .modal-content {
    background-image: url('img/call-clerk.jpg');
    background-size: 1024px ;
    background-position:center;
    color: white;
}
#callModal .modal-header {
    border: 0;
}

#callModal .btn-close {
    --bs-btn-close-bg : url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFF'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e")!important;
}

#callModal .modal-body {
    padding: 2rem 4rem;
    text-align: center;
}

#callModal .modal-content form > * br,
.hero-content .hero-form form > * br { display:none; }

#callModal .modal-content form a,
.hero-content .hero-form form a {
    color: inherit; 
}

.wpcf7-not-valid-tip { 
    color: rgb(var(--yellow));
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
    color: rgb(var(--yellow));
    font-weight: 600;
    font-size: 1.25em;
}

.hero-content .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
    background: black;
    border-radius: 12px;
    padding: .5rem;
}