/* 
Theme Name: GDC
Author: Joseph Salazar
Author URI: +51951355550
Description: Tema desarrollado para GDC desarrolladora.
Version: 1.0
Text Domain: gdc
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

.wasapito {
    width: 48px;
    height: 48px;
    position: fixed;
    bottom: 4rem;
    right: 2rem;
    /* transform: translateY(-50%); */
    z-index: 9999999999;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 0 1rem rgba(0, 0, 0, .25);
}

.wasapito img, .wasapito svg {
    width: 80%;
    height: 80%;
}

.wasapito::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    border-radius: 50%;
    background-color: #25d366;
    /* opacity: 0.5; */
    /* animation: pulse 2s infinite; */
    z-index: -1;
}

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0.5;
    }

    50% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0.5;
    }
}

/* Sperant */

.sperant-title {
    font-size: 1.2em;
    margin-bottom: 20px;
}

.sperant-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sperant-form-group {
    margin-bottom: 15px;
}

.sperant-label {
    margin-bottom: 5px;
    display: block;
}

.sperant-input,
.sperant-select,
.sperant-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-family: "Inter", serif;
}

.sperant-textarea {
    resize: vertical;
}

.sperant-checkbox-group {
    display: flex;
    align-items: center;
}

.sperant-checkbox {
    margin-right: 10px;
}

.sperant-link {
    color: #f39200;
    text-decoration: none;
}

.sperant-button {
    background-color: #f39200;
    color: #ffffff;
    border: none;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

.sperant-button:hover {
    background-color: #e67e00;
}

.sperant-custom {
    display: grid;
    grid-template-columns: 55% 1fr;
    gap: 3rem;
}

@media screen and (max-width: 768px) {
    .sperant-custom {
        display: grid;
        grid-template-columns: 100%;
        gap: 2rem;
    }
}

.logo-sperant {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: #151718;
    color: #fff;
    place-items: center;
    padding: 1rem;
}



.cotizador-sperant-info {
    /* display: grid;
    grid-template-rows: 1fr; */
    height: fit-content;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            /* Añade sombra alrededor del elemento */
}

.sperant-info {
    display: flex;
    /* gap: 4rem; */
    justify-content: space-between;
    background-color: #151718;
    color: #fff;
    
    align-items: center;
    padding: 2rem;
}

.brochure-video {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

#myDialog {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

dialog {
    border: 1px solid #ccc;
    border-radius: 5px;
    width: clamp(350px, 50vw, 600px);
    max-width: 90%;
}

dialog h2 {
    margin-top: 0;
}

dialog button {
    display: block;
    margin: 1rem auto 0;
}



/* .swiperSperant {
    height: 100%;
}

.swiperSperant .swiper-wrapper {
    height: 100%;
}

.sperant-type img {
    aspect-ratio: 4/3;
    object-fit: contain !important;
} */

.cotizador-sperant-info .swiper-slide img {
    height: auto !important;
}

/* 
    jcmv 
*/
#menu-header-menu li a {
	padding: .9rem 1rem;
}
.logo-project {
    width: 100%;
    height: 4rem;
}
.logo-project img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.card-info-project-soon {
    flex: 1 1 0%;
    align-items: center;
    justify-content: center;
}
/* header */
.header-btn {
    display: flex !important;
}

/* footer */
.footer {
    align-items: center;
    font-size: .85em;
}
.grid-5-g1 {
    display: grid;
    grid-template-columns: repeat(5, 1fr) ;
}
.footer__sub {
    padding: 2rem 0;
    border-top: 1px solid #582A12;
}
.footer__logos {
    margin-top: 1rem;
    /* width: 12rem; */
    display: flex;
    gap: 1rem;
    /* margin-left: 1rem; */
    align-items: center;
    /* grid-template-columns: 1fr .7fr !important; */
}
.footer__logos img {
    height: 4rem;
    width: 6rem;
    object-fit: contain;
}
.dci-footer {
    width: 7rem;
}

/* proyecto */
.project__loop__address {
    grid-column: 1 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 !important;
    margin-bottom: 1rem;
}
.project__loop__features .flex-row-g1 {
    gap: .25rem !important;
}
.cotizador-sperant-info {
    box-shadow: none;
}
.cotizador-sperant-info .swiper-slide {
    padding: 0 4rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.project__summary {
    display: flex;
    border-bottom: 1px solid #F3F3F3;
    flex-wrap: wrap;
}
.project__summary__price, 
.project__summary__item, 
.project__summary__brochure {
    flex: 1;
}
.project__summary__price {
    background-color: #F3F3F3;
    padding: 1rem 1.5rem;
    font-size: 1.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.project__summary__price span {
    font-size: .5em;
    display: block;
    font-weight: 700;
}
.project__summary__item {
    background-color: white;
    padding: 1rem 1.5rem;
    display: flex;
    gap: .5rem;
    align-items: center;
    color: #787878;
}
.project__summary__item svg {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}
.project__summary__item svg,
.project__summary__item svg * {
    fill: #787878;
}
.project__summary__item div p {
    text-transform: uppercase;
}
.project__summary__brochure button {
    width: 100%;
    border: none;
    background-color: black;
    color: white;
    padding: 1rem 1.5rem;
    display: flex;
    gap: .5rem;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    height: 100%;
    transition: .3s;
    cursor: pointer;
}
.project__summary__brochure button:hover {
    background-color: #F08825;
}
.project__summary__brochure svg {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}
.project__summary__brochure svg,
.project__summary__brochure svg * {
    fill: white;
}
.project__tipos_list {
    display: flex;
    list-style: none;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.project__tipos_list button {
    color:black;
    font-weight: 700;
    font-size: .9rem;
    background-color: transparent;
    padding: 0 .5rem .5rem .5rem;
    border-bottom: .2rem solid transparent;
    cursor: pointer;
}
.project__tipos_list button.__active {
    border-color: #F08825;
    pointer-events: none;
}
    @media screen and (max-width: 500px) {
        .project__summary__price {
            font-size: 1.7rem;
        }
        .project__summary__item {
            font-size: .85rem;
        }
        .project__summary__price,
        .project__summary__item {
            padding: 1rem;
        }
        .cotizador-sperant-info .swiper-slide {
            padding: 0 0;
        }
    }

.project__process {
    display: grid;
    grid-template-columns: 1fr 50%;
    gap: 4rem;
    align-items: center;
    margin-top: 3rem;
}
.project__process__content {
    display: none;
    transition: .3s ease-in-out;
}
.project__process__content.__active {
    display: block;
}
.project__process__gallery img {
    width: 100%;
    height: 25rem;
    object-fit: cover;
}
.project__process__list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.project__process__list button {
    background-color: transparent;
    border: 1px solid #919191;
    padding: .5rem 1rem;
    border-radius: 10rem;
    color: black;
    font-weight: 500;
    font-size: .85rem;
    cursor: pointer;
}
.project__process__list button:hover {
    background-color: #F3F3F3;
}
.project__process__list button.__active {
    color: white;
    background-color: black;
    border-color: transparent;
    pointer-events: none;
}
.project__process__image {
    width: 100%;
    max-width: 20rem;
    margin-left: auto;
    margin-right: auto;
}
    @media screen and (max-width: 500px) {
        .project__process {
            grid-template-columns: 100%;
        }
    }
.project__others.owl-carousel .owl-stage {
    padding: 1.5rem 0 !important;
}
/* home */
.home__contact {
    display: grid;
    grid-template-columns: 50% 50%;
    align-items: center;
}
.home__contact__images {
    border-radius: 1rem;
    overflow: hidden;
}
.home__contact__images img {
    width: 100%;
    height: 35rem;
    object-fit: cover;
}
    @media screen and (max-width: 500px) {
        .home__contact {
            grid-template-columns: 100% !important;
        }
        .home__contact__images {
            order: 2;
        }
        .home__contact__images img {
            height: 20rem;
        }
        .home__contact__form {
            order: 1;
        }
    }

/* thanks */
.thanks__content {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: -3.25rem;
}
.thanks__content::before {
    content: '';
    background-color: rgba(0,0,0,.4);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
}
.thanks__bg {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.thanks__content .container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    justify-content: center;
}
.thanks__logo {
    max-width: 100%;
    height: 2.5rem;
    object-fit: contain;
}
.thanks__message {
    margin-top: 2.5rem;
    font-size: 1.5rem;
    text-align: center;
    color: white;
}

/* common */
.message-success {
    background-color: black;
    color: white;
    padding: 1.5rem 1rem;
    text-align: center;
    font-weight: 700;
    border-radius: .5rem;
}
.padding-2 {
    padding: 3rem 0;
    /* margin-top: 2rem; */
    margin-top: 4rem;
}

/* home blog */
.home__blog {
    padding-top: 4rem;
}
.home__blog__content {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.home__blog__list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4rem;
}
.home__blog__card:hover h2 {
    color: #F08825;
}
.home__blog__card img {
    width: 100%;
    height: 13rem;
    object-fit: cover;
}
.home__blog__card h2 {
    font-size: 1.35rem;
    margin-top: .5rem;
    margin-bottom: .5rem;
}
.home__blog__card span {
    display: block;
    color: #F08825;
    font-weight: 700;
    margin-top: .5rem;
    margin-bottom: .5rem;
    text-transform: capitalize;
}
.home__blog__card p {
    line-height: 1.5;
}
.home__blog__button {
    text-align: center;
}
    @media screen and (max-width: 500px) {
        .home__blog__list {
            grid-template-columns: 1fr;
        }
    }

/* evento */
.evento_form.submitting {
    opacity: .5;
    pointer-events: none;
}
.evento_form:not(.sent) .wpcf7-response-output {
    display: none !important;
}
.evento_form .wpcf7-response-output {
    padding: 1rem !important;
    margin: 0 0 1.5rem 0 !important;
    background-color: black;
    color: white;
    border-radius: .5rem;
    border: none !important;
    line-height: 1.5;
    text-align: center;
    font-weight: 700;
    font-family: "Inter", serif;
}
.evento_form .wpcf7-not-valid-tip {
    font-size: .85rem;
}
.evento_form_content {
    margin: 1rem 0;
}
.evento_form_checks {
    margin-bottom: 1rem;
}
.evento_form_group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
.gdc-input select {
    background-color: white;
}
    @media screen and (max-width: 500px) {
        .evento_form_group {
            grid-template-columns: 1fr;
        }
    }
.logo-project-soon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-bottom: 1px solid #e8e8e870;
    height: 6rem;
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.logo-project-soon img {
    height: 4rem;
}
    @media screen and (max-width: 500px) {
        .project-card-effect .card-info {
            transform: translate(0, 0) !important;
        }
    }

.project__texto__banner {
    font-size: 2.5rem;
    text-transform: uppercase;
    margin-top: 1rem;
    color: white;
    text-align: left;
    font-family: "Inter", serif;
}
.project__texto__banner__address {
    color: white;
    text-align: left;
    font-family: "Inter", serif;
    font-size: 15px;
}
.project__texto__banner.__home {
    font-size: 2.5rem;
}
    @media screen and (max-width: 800px) {
        .project__texto__banner, .project__texto__banner.__home {
            font-size: 2rem;
        }
    }
.tipo_item_slider {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.img-fachada {
    position: relative;
    height: 500px !important;
}

.img-fachada img {
    object-fit: cover;
}



/*  */
/*  */
/* LANDING INVERSION */
/*  */
/*  */

:root {
    --inv-color-1: #E99000;
    --inv-color-2: #EDEDED;
    --inv-color-3: #39B549;
}
.page-template-template-landing-inversion .wasapito {
    display: none !important;

}
.__container {
    width: 100%;
    max-width: 1150px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.inversion__button {
    background-color: var(--inv-color-1);
    padding: .85rem 1rem;
    border-radius: .25rem;
    text-align: center;
    color: white;
    display: inline-flex;
    font-weight: 700;
    line-height: 1;
    transition: .3s ease-in-out;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-weight: 400;
}
.inversion__button.__disabled {
    pointer-events: none;
    opacity: .8;
    filter: grayscale(100);
}
.inversion__button:hover {
    background-color: black;
}
.ta--center {
    text-align: center;
}

/* steps */
.inversion__steps {
    background-color: black;
    padding-top: 6rem;
    padding-bottom: 6rem;
    text-align: center;
}
.inversion__steps h2 {
    text-align: center;
    color: var(--inv-color-1);
    font-size: 2.5rem;
    margin-bottom: 4rem;
}
.inversion__steps__list {
    display: inline-flex;
    gap: 6rem;
    position: relative;
}
.inversion__steps__list .__arrow {
    position: absolute;
    top: 5.5rem;
    left: 0;
    width: calc(100% + 5rem);
    height: 5px;
    background-color: var(--inv-color-1);
}
.inversion__steps__list .__arrow::before {
    content: '';
    position: absolute;
    width: 2rem;
    height: 2rem;
    top: .1rem;
    right: -.55rem;
    transform: rotate(45deg) translateY(-.1rem) translateX(-1.25rem);
    border-top: 5px solid var(--inv-color-1);
    border-right: 5px solid var(--inv-color-1);
}
.inversion__steps__item {
    color: white;
    text-align: center;
    position: relative;
    flex-shrink: 0;
}
.inversion__steps__item img {
    width: 11rem;
    height: 11rem;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1.25rem;
}
.inversion__steps__item h3 {
    margin-bottom: .5rem;
}
.inversion__steps__item p {
    width: 168px;
}
.inversion__steps__item p br {
    display: none;
}
@media screen and (max-width: 768px) {
    .inversion__steps {
        padding-bottom: 10rem;
    }
    .inversion__steps__list {
        flex-direction: column;
        gap: 4rem;
    }
    .inversion__steps__item {
        background-color: black;
        padding-bottom: 1.5rem;
    }
    .inversion__steps__list .__arrow {
        top: 0;
        left: 5.5rem;
        height: calc(100% + 5rem);
        width: 5px;
    }
    .inversion__steps__list .__arrow::before {
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
        transform: none;
        transform: rotate(135deg) translateX(.58rem)  translateY(.58rem) ; 
        border-top: 5px solid var(--inv-color-1);
        border-right: 5px solid var(--inv-color-1);
    }

}

/* intro */

.inversion__intro {
    background-color: white;
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.inversion__intro__container {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    align-items: flex-start;
    gap: 8rem;
}
.inversion__intro__image h1 {
    font-size: 3rem;
    position: relative;
    /* background-color: var(--inv-color-2); */
    display: inline;
    line-height: 1.2;
}
.inversion__intro__image img {
    margin-top: -6rem;
}
.inversion__intro__form {
    background-color: white;
    box-shadow: 0 0 .5rem rgba(0, 0, 0, .2);
    padding: 2rem;
}
.inversion__intro__form .wpcf7-response-output {
    /* display: none; */
}
.inversion__intro__form h2 {
    font-size: 1.25rem;
    text-align: center;
    margin-bottom: 1rem;
}
.inversion__intro__form .__form__tipo {
    border-bottom: 1px solid var(--inv-color-1);
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
}
.inversion__intro__form .__form__tipo .wpcf7-form-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.inversion__intro__form .__form__fields .__field {
    margin-bottom: .75rem;
}
.inversion__intro__form .__form__fields input {
    width: 100%;
    padding: .75rem;
    border-radius: .45rem;
    border: 1px solid var(--inv-color-1);
    color: black;
}
.inversion__intro__form .wpcf7-not-valid-tip {
    font-size: .8rem;
    padding-top: .25rem;
    display: block;
}
.inversion__intro__form .inversion__button {
    width: 100%;
}
.inversion__intro__form .__form__legales {
    font-size: .75rem;
    margin-bottom: 3rem;
}
.inversion__intro__form .__form__legales .wpcf7-list-item {
    margin: 0;
    margin-bottom: .25rem;
    line-height: 1.5;
}
    @media screen and (max-width: 768px) {
        .inversion__intro__container {
            grid-template-columns: 1fr;
            gap: 3rem;
        }
    }
    @media screen and (max-width: 500px) {
        .inversion__intro__image h1 {
            font-size: 2.25rem;
            text-align: center;
            display: block;
        }
        .inversion__intro__image h1 br {
            display: none;
        }

        .inversion__intro__image img {
            margin-top: 1.5rem;
        }
    }



/* info */
.inversion__info {
    background: linear-gradient(90deg, white 50%, var(--inv-color-1) 50%);
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.inversion__info__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8rem;
    padding-left: 4rem;
    padding-right: 4rem;
}
.inversion__info__img h2 {
    text-align: center;
    font-weight: 400;
    margin-bottom: 3rem;
}
.inversion__info__img h2 strong {
    display: block;
}
.inversion__info__data h2 {
    margin-bottom: 3rem;
    text-align: center;
}
.inversion__info__data__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
.inversion__info__data__list div {
    display: flex;
    gap: .5rem;
    margin-bottom: 1.5rem;
}
.inversion__info__data__list div p {
    text-align: justify;
}
.inversion__info__data__list div svg {
    width: 1.65rem;
    height: 1.65rem;
    flex-shrink: 0;
    border-radius: 50%;
}
.inversion__info__data__list svg, .inversion__info__data__list svg * {
    fill: white;
}
.inversion__info__data__list .__true svg {
    background-color: var(--inv-color-3);
}
.inversion__info__data__list .__false svg {
    background-color: black;
}
    @media screen and (max-width: 768px) {
        .inversion__info {
            background: none;
            padding-bottom: 0;
        }
        .inversion__info__container {
            grid-template-columns: 1fr;
            gap: 0;
            padding-inline: 0 !important;
        }
        .inversion__info__img {

        }
        .inversion__info__data {
            background-color: var(--inv-color-1);
            padding: 4rem 1rem;

        }
    }
    @media screen and (max-width: 500px) {
        .inversion__info__data__list {
            grid-template-columns: 1fr;
            gap: 0;
        }

    }


/* calcula */
.inversion__calcula {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.inversion__calcula__header {
    margin-bottom: 3rem;
}
.inversion__calcula__header h2 {
    font-size: 2.5rem;
    text-align: center;
}
.inversion__calcula__header p {
    text-align: center;
    margin-top: 1rem;
}
.inversion__calcula form .wpcf7-response-output {
    display: none;
}
.inversion__calcula form .wpcf7-not-valid-tip {
    font-size: .8rem;
    padding-top: .25rem;
    display: block;
}
.inversion__calcula form {
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.inversion__calcula form .__form__legales {
    font-size: .8rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.inversion__calcula form .__fields {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
}
.inversion__calcula form .__fields.__1 {
    grid-template-columns: 1fr;
}
.inversion__calcula form .__fields.__3 {
    grid-template-columns: 1fr 1fr 1fr;
}
.inversion__calcula form .__fields .__field {
    /* margin-bottom: 1rem; */
    width: 100%;
}
.inversion__calcula form .__fields input,
.inversion__calcula form .__fields select {
    width: 100%;
    padding: .75rem;
    border-radius: .25rem;
    border: 1px solid var(--inv-color-1);
    color: black;
    font-size: 1rem;
}
.inversion__calcula form .inversion__button {
    width: 50%;
    margin-top: 3rem;
}
@media screen and (max-width: 500px) {
    .inversion__calcula form .__fields.__3 {
        grid-template-columns: 1fr;
    }
    .inversion__calcula form .inversion__button {
        width: 100%;
    }
}


/* proyectos */
.inversion__projects {
    background-color: var(--inv-color-2);
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.inversion__projects__header {
    text-align: center;
    margin-bottom: 2rem;
}
.inversion__projects__header h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}
.inversion__projects__list {
    /* display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem; */
}
.inversion__projects__card {
    box-shadow: .25rem .25rem .5rem rgba(0, 0, 0, .2);
    transition: .3s ease-in-out;
    position: relative;
}
.inversion__projects__card:hover {
    transform: translateY(-1px);
    box-shadow: .25rem .25rem 2rem rgba(0, 0, 0, .1);
}
.inversion__projects__card img {
    /* height: 240px; */
    object-fit: cover;
    width: 100%;
}
.inversion__projects__card__info {
    background-color: white;
    padding: 1.5rem;
}
.inversion__projects__card__info h3 {
    text-align: center;
    margin-bottom: 1rem;
}
.inversion__projects__card__data {
    margin-bottom: .85rem;
    padding-bottom: .85rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    border-bottom: .1rem solid var(--inv-color-1);
}
.inversion__projects__card__data strong {
    font-weight: 700;
    font-size: .75rem;
    display: block;
}
.inversion__projects__card__data span {
    font-size: 1.5rem;
    color: var(--inv-color-1);
    font-weight: 700;
}
.inversion__projects__card__data p {
    color: black;
    width: min-content;
    font-size: .9rem;
}
.inversion__projects__card__extra {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    font-size: .85rem;
    margin-bottom: 2rem;
}
.inversion__projects__card__extra strong {
    color: var(--inv-color-1);
    font-weight: 700;
    display: block;
}
    @media screen and (max-width: 768px) {
        .inversion__projects__list {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media screen and (max-width: 500px) {
        .inversion__projects__list {
            grid-template-columns: 1fr;
        }
    }


/* features */
.inversion__features {
    background-color: white;
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.inversion__features .inversion__projects__header h2 {
    display: flex;
    align-items: center;
    justify-content: center;
}
.inversion__features .inversion__projects__header h2 img {
    width: 8rem;
    height: auto;
}
.inversion__features__item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin-bottom: 5rem;
    align-items: center;
    text-align: left;
}
.inversion__features__item:last-of-type {
    margin-bottom: 0;
}
.inversion__features__item h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}
.inversion__features__item p {
    margin-bottom: 2rem;
}
.inversion__features__item img {
    box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, .5);
    width: 90%;
    height: 300px;
    max-width: 100%;
    object-fit: cover;
    margin-left: auto;
}
.inversion__features__item.__inverse .inversion__features__item__info {
    text-align: right;
    order: 2;
}
.inversion__features__item.__inverse .inversion__features__item__image {
    order: 1;
}
.inversion__features__item.__inverse .inversion__features__item__image img {
    margin-right: auto;
    margin-left: 0;
}
    @media screen and (max-width: 768px) {
        .inversion__features__item {
            display: grid;
            grid-template-columns: 1fr;
            gap: 4rem;
            margin-bottom: 4rem;
        }
        .inversion__features__item h2 {
            font-size: 2rem;
        }
        .inversion__features__item h2 br {
            display: none;
        }
        .inversion__features__item img {
            width: 100%;
        }
        .inversion__features__item.__inverse .inversion__features__item__info {
            text-align: left;
            order: 1;
        }
        .inversion__features__item.__inverse .inversion__features__item__image {
            order: 2;
        }
    }


/* CALCULADORA */
.inversion__calculadora__tabs {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
}
.inversion__calculadora__tabs li button {
    border: 1px solid black;
    padding: .85rem 1rem;
    text-align: center;
    background-color: white;
    text-transform: uppercase;
    color: black;
    font-weight: 600;
    cursor: pointer;
}
.inversion__calculadora__tabs li button.__active {
    background-color: black;
    pointer-events: none;
    color: white;
    border-color: transparent;
}

.inversion__calculadora__content {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.inversion__calculadora__form {
    width: 100%;
    max-width: 30rem;
    box-shadow: 0 0 1rem rgba(0, 0, 0, .15);
    padding: 2rem;
}

.inversion__calculadora__group {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    width: 100%;
}

.inversion__calculadora__field {
    width: 100%;
}

.inversion__calculadora__field select,
.inversion__calculadora__field input {
    width: 100%;
}
.inversion__calculadora__field input {
    padding: .8rem .5rem;
    border: 1px solid #a3a3a3;
    border-radius: 5px;
    width: 100%;
    font: inherit;
}

.inversion__calculadora__field span {
    color: black;
    display: block;
    padding-bottom: .5rem;
}

.inversion__calculadora__legal {
    font-size: 12px;
    text-align: center;
    opacity: .8;
    margin-top: .5rem;
    margin-bottom: 1rem;
}
.inversion__calculadora__resultado {
    padding: 2rem;
    max-width: 30rem;
    width: 100%;
}
.inversion__calculadora__resultado h6 {
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    margin-bottom: 1rem;
}
.inversion__calculadora__resultado__ideal h6 {
    font-size: 18px;
}

.inversion__calculadora__resultado table {
    color:#585858;
}
.inversion__calculadora__resultado__ideal table {
    color:white;
}

.inversion__calculadora__resultado table td {
    padding: .25rem 0;
}

.inversion__calculadora__resultado__ideal {
    background-color: #5f5f5f;
    color: white;
    padding: 1rem;
    margin-top: 1rem;
}

table .__result {
    display: block;
    padding-left: 1rem;
}
.inversion__button__wasap {
    background-color: #26D367;
    color: white;
    padding: .85rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    text-transform: uppercase;
    margin-top: 1.5rem;
}
.inversion__button__wasap svg, .inversion__button__wasap svg * {
    fill: white;
}
    @media screen and (max-width: 768px) {
        .inversion__calculadora__group {
            flex-direction: column;
        }
        .inversion__calculadora__content {
            flex-direction: column;
            align-items: center;
        }
        .inversion__calculadora__resultado {
            padding: 1rem;
            margin-top: 2rem;        
        }
    }

[x-cloak] {
    display: none;
}

/* hero */
.hero-slide-content.container {
	max-width: 88rem
}
p.hero-status {
    background-color: transparent;
    padding: 0;
    font-family: "Inter", serif;
    text-transform: uppercase;
    font-weight: 500;
}

:root {
    --bg-color: #FFFDF5;
}

/* about us */
.about__page {
    background-color: var(--bg-color);
}
.about__page .container {
    max-width: 65rem;
}
.about__detail {
    position: relative;
    width: 100%;
    height: .1rem;
    background-color: rgba(0, 0, 0, .1);
}
.about__detail::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--inv-color-1);
    width: 4rem;
    height: .2rem;
    display: block;
}
/*  */
.about__banner {
    height: calc(100vh - 10rem);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin-top: -.5rem;
    display: flex;
    align-items: center;
    box-shadow: 0 0  0 10000rem rgba(0, 0, 0, .5) inset;
}
.about__banner .container {
    flex: 1;
}
.about__banner h1 {
    color: white;
    text-transform: uppercase;
    margin-bottom: 4rem;
    font-weight: 400;
    font-size: 1rem;
}
.about__banner h2 {
    font-weight: 500;
    color: white;
    margin-bottom: 1rem;
    font-size: 2rem;
    text-transform: uppercase;
}
@media screen and (max-width: 500px) {
    .about__banner {
        height: calc(100vh - 4rem);
        margin-top: -1.25rem;
    }
    .about__banner h1 br,
    .about__banner h2 br {
        display: none;
    }
    .about__banner h2  {
        font-size: 1.85rem;
    }
}

.about__banner p {
    line-height: 1.5;
    color: white;
    opacity: .8;
    margin-bottom: 2rem;
}

/*  */
.about__intro {
    display: grid;
    grid-template-columns: .8fr 1fr;
    gap: 5rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.about__intro__media small {
    text-transform: uppercase;
}
.about__intro__media h2 {
    text-transform: uppercase;
    font-weight: 400;
    margin-top: 1rem;
    margin-bottom: 3rem;
}
.about__intro__media img {
    width: 100%;
    border-radius: .5rem;
}
.about__intro__content h2 {
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 2rem;
}
.about__intro__col {
    display: flex;
    gap: 3rem;
    margin-bottom: 3rem;
}
.about__intro__col__item {
    flex: 1;
}
.about__intro__col__item {
    line-height: 1.5;
    font-size: .9rem;
}
@media screen and (max-width: 768px) {
    .about__intro {
        gap: 2.5rem;
    }
}
@media screen and (max-width: 500px) {
    .about__intro {
        grid-template-columns: 1fr;
    }
    .about__intro__col {
        gap: 2rem;
    }
}
/*  */
.about__map {
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 3rem;
    padding-right: 3rem;
}
.about__map img {
    width: 100%;
}
/*  */
.about__exp {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.about__exp__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4rem;
    margin-bottom: 4rem;
}
.about__exp__header__1 small {
    text-transform: uppercase;
    display: block;
    margin-bottom: 1rem;
}
.about__exp__header__1 h2 {
    font-weight: 500;
    text-transform: uppercase;
}
.about__exp__header__2 p {
    text-transform: uppercase;
    line-height: 1.5;
    font-size: 1.5rem;
    font-weight: 300;
}
.about__exp__list {
    display: flex;
    gap: 2rem;
    justify-content: space-between;
}
.about__exp__list li {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.about__exp__list span {
    font-weight: 500;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}
.about__exp__list small {
    text-transform: uppercase;
    letter-spacing: .085rem;
    font-size: .8rem;
    margin-bottom: 1rem;
}
@media screen and (max-width: 500px) {
    .about__exp__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
    }
    .about__exp__list {
        flex-wrap: wrap;
    }
}

/*  */
.about__ad {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.about__ad__card {
    width: 100%;
    max-width: 42rem;
    background-color: black;
    padding: 2.5rem;
    margin-left: auto;
    margin-right: auto;
    border-radius: 1rem;
}
.about__ad__title {
    color: white;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 1.5;
    width: 100%;
    max-width: 30rem;
}
.about__ad__details {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 2rem;
    gap: 2rem;
    border-top: 1px solid var(--bg-color);
}
.about__ad__details li {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
}
.about__ad__details li svg,
.about__ad__details li img {
    fill: var(--inv-color-1);
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
}
.about__ad__details li span {
    display: block;
    color: white;
    font-weight: 300;
    font-size: 13px;
    text-transform: uppercase;
}
@media screen and (max-width: 500px) {
    .about__ad {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    .about__ad__details {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    .about__ad__details li span br {
        display: none;
    }
}
/*  */
.about__empresas {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.about__empresas__header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6rem;
}
.about__empresas__header h2 {
    font-weight: 400;
    text-transform: uppercase; 
}
.about__empresas__header p {
    text-transform: uppercase;
    line-height: 1.5;
    width: 100%;
    max-width: 30rem;
}
.about__empresas__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5rem;
}
.about__empresas__list img {
    width: 8rem;
    height: 4rem;
    object-fit: contain;
    object-position: top left;
    margin-bottom: 2rem;
}
.about__empresas__list h3 {
    font-size: .85rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .15rem;
    margin-bottom: 1rem;
}
.about__empresas__list p {
    font-size: .85rem;
    line-height: 1.5;
    text-align: justify;
}
@media screen and (max-width: 500px) {
    .about__empresas__header {
        flex-direction: column;
        gap: 2rem;
        margin-bottom: 4rem;
    }
    .about__empresas__list {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
    .about__empresas__list img {
        width: 80%;
    }
}
/*  */
.about__aliados {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.about__aliados h2 {
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 3rem;
}
.about__aliados__list {
    /* display: flex; */
    /* align-items: center; */
    /* gap: 2rem 4rem; */
    margin-bottom: 2rem;
    /* flex-wrap: wrap; */
}
.about__aliados__list img {
    width: 8rem;
    height: 4rem;
    object-fit: contain;
}
.header__menu {
    display: flex;
    align-items: center;
}
@media screen and (max-width: 500px) {
    .header__menu {
        display: none;
    }
}
.header__menu li .btn {
    color: white;
    font-weight: 700;
}
.header__menu li .btn:hover {
    text-decoration: underline;
}

.header-wrapper {
    /* background-color: rgba(0, 0, 0, .25) !important; */
    background-color: rgba(27, 27, 27, 0.35) !important;
    /* box-shadow: 0 0 5px 2px #3f3f3f46; */
    box-shadow: none !important;
}

/* footer */
.link__footer:hover {
    text-decoration: underline;
}

/* gtranslate */
.gtranslate_wrapper {
    background-color: transparent !important;
    border: none !important;
    gap: 1rem !important;
    flex-direction: row-reverse !important;
}
.gtranslate_wrapper a {
    color: white;
    font-weight: 700;
    padding-bottom: .15rem;
    border-bottom: 3px solid transparent;
}
.gtranslate_wrapper a::before {
    display: none;
}
.gtranslate_wrapper a.gt-current-lang {
    border-bottom: 3px solid var(--inv-color-1);
}

/* Referidos */
.referidos__page {
    background-color: #14181B;
    padding-top: 6rem;
    padding-bottom: 6rem;
}
.referidos__container {
    display: flex;
    gap: 8rem;
    max-width: 65rem;
    margin-left: auto;
    margin-right: auto;
}
.referidos__section {
    flex: 1;
}

/* referidos info */
.referidos__info__item {
    min-height: calc(100vh - 10rem);
    display: flex;
    flex-direction: column;
/*     justify-content: end; */
    margin-bottom: 4rem;
	margin-top: 4rem;
}
.referidos__info__title {
    color: #FFFBF1;
    font-weight: 600;
    font-size: 3rem;
}
.referidos__info__title span {
    color: var(--inv-color-1);
}
.referidos__info__image {
    width: 25rem;
    margin-top: 3rem;
    border-radius: 1rem;
    max-width: 100%;
}
.referidos__info__subtitle {
    color: var(--inv-color-1);
    font-weight: 500;
    margin-bottom: 2rem;
}
.referidos__info__steps {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.referidos__info__steps li {
    border-left: .8rem solid var(--inv-color-1);
    color: #FFFBF1;
    padding: 1rem;
}
.referidos__info__steps li h3 {
    margin-bottom: .5rem;
}
.referidos__info__steps li p {
    line-height: 1.5;
}
.referidos__info__ganancia {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}
.referidos__info__ganancia li {
    border-bottom: .25rem solid var(--inv-color-1);
    padding-bottom: .5rem;
}
.referidos__info__ganancia li h3 {
    margin-bottom: .5rem;
    color: white;
    text-transform: uppercase;
}
.referidos__info__ganancia li p {
    font-size: 4rem;
    color: var(--inv-color-1);
    font-weight: 600;
}

/* referidos form */
.referidos__form__container {
    position: sticky;
    top: 5rem;
    min-height: calc(100vh - 10rem);
}
.referidos__form__container form {
    background-color: #FFFBF1;
    padding: 2rem;
    border-radius: 1.5rem;
}
.referidos__form__container form .wpcf7-not-valid-tip {
    font-size: .75rem;
    padding-top: .25rem;
}
.referidos__form__title {
    color: var(--inv-color-1);
    text-transform: uppercase;
    font-weight: 500;
    font-size: 1.15rem;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}
.referidos__form__item {
    margin-bottom: 1rem;
}
.referidos__form__subtitle {
    margin-bottom: 1rem;
    font-size: 1rem;
}
.referidos__form__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem;
    width: 100%;
}
.referidos__form__fields .__field {
    width: 100%;
}
.referidos__form__fields .__field input,
.referidos__form__fields .__field select {
    width: 100%;
    padding: .5rem;
    border-radius: .25rem;
    background-color: transparent;
    border: 1px solid #8A8C8E;
    font-size: .85rem;
}
.referidos__form__fields .__field__2cols {
    grid-column: 1 / 3;
}
.referidos__form__container form .__field__send {
    background-color: var(--inv-color-1);
    color: white;
    width: 100%;
    text-align: center;
    border-radius: .25rem;
    padding: .85rem;
    font-size: .85rem;
    cursor: pointer;
    border: none;
}
.referidos__form__checks {
    font-size: .85rem;
    color: #8A8C8E;
    margin: 1.5rem 0;
}
.referidos__form__checks .wpcf7-list-item {
    margin: 0;
    margin-bottom: .5rem;
}

@media screen and (max-width: 768px) {
    .referidos__container {
        flex-direction: column;
        gap: 2rem;
    }
    .referidos__info__item {
        height: auto;
        /* margin-bottom: 3rem; */
    }
    .referidos__form__fields {
        grid-template-columns: 1fr;
    }
    .referidos__form__fields .__field__2cols {
        grid-column: 1 / 2;
    }
}

/* BENEFICIOS */
:root {
    --b-1: #EF8623;
    --b-1d: #CB5F15;
    --b-bg: #FFFAF5;
    --b-gray: #878786;
}

.benefits {
    background-color: var(--b-bg);
}
.benefits__banner {
    height: 35rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    display: flex;
    align-items: center;
    box-shadow: 0 0 0 1000rem rgba(0, 0, 0, .25) inset;
    padding-top: 2rem;
}
.benefits__banner .container {
    width: 100%;
}
.benefits__banner__title {
    color: white;
    font-size: 2.5rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
}
.benefits__banner__text {
    color: white;
    font-size: 1.5rem;
    line-height: 1.5;
    margin-bottom: 2rem;
}
.benefits__banner__options {
    display: flex;
    background-color: white;
    border-radius: 10rem;
    width: max-content;
}
.benefits__banner__options li a {
    padding: .85rem 2rem;
    font-size: 1.2rem;
    display: block;
    border-radius: 10rem;
}
.benefits__banner__options li a:hover {
    text-decoration: underline;
}
.benefits__banner__options li a.__active {
    background-color: var(--b-1);
    color: white;
    pointer-events: none;
}

.benefits__section {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.benefits__section .container {
    max-width: 65rem;
}
.benefits__button {
    background-color: var(--b-1);
    padding: .85rem 1rem;
    color: white;
    text-align: center;
    width: 100%;
    border-radius: .5rem;
    display: block;
    font-weight: 500;
    font-size: 1.15rem;
    cursor: pointer;
}
.benefits__legal__text {
    color: var(--b-gray);
    text-align: center;
    line-height: 1.5;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.benefits__form__prop.__props .wpcf7-response-output {
    display: none !important;
}
.benefits__form__prop.submitting {
    opacity: .5;
    pointer-events: none;
}
.benefits__form__prop {
    max-width: 25rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.benefits__form__prop .__group {
    display: flex;
    border-radius: .5rem;
    border: 1px solid var(--b-gray);
    padding: .15rem;
    align-items: center;
    background-color: white;
    margin-bottom: 2rem;
    position: relative;
}
.benefits__form__prop .__group .wpcf7-form-control-wrap {
    flex: 1;
}
.benefits__form__prop .__group .wpcf7-form-control-wrap input {
    width: 100%;
    font-size: 1.15rem;
    padding: .5rem;
    background-color: transparent;
    border: none;
}
.benefits__form__prop .__group .wpcf7-form-control-wrap input:focus {
    border: none;
    outline: none;
}
.benefits__form__prop button {
    background-color: var(--b-1);
    color: white;
    border-radius: .5rem;
    padding: .75rem 1rem;
    cursor: pointer;
}
.benefits__form__prop .__group .wpcf7-not-valid-tip {
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    font-size: .75rem;
    display: block;
    padding: .25rem .5rem;
    border-radius: .15rem;
}
.benefits__form__prop .wpcf7-form-control.wpcf7-acceptance {
    color: var(--b-gray);
    font-size: .8rem;
    margin-top: .5rem;
    display: block;
}

.benefits__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 3rem;
}
.benefits__card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.benefits__card__title {
    color: var(--b-1d);
    font-size: 1.2rem;
    margin-bottom: 1rem;
}
.benefits__card__text {
    color: var(--b-gray);
    font-size: 1.15rem;
    line-height: 1.5 ;
}

.benefits__card figure {
    width: 100%;
    border-radius: .5rem;
    background-color: white;
    height: 18rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.benefits__card:hover figure::after {
    opacity: 1;
}

.benefits__card figure::after {
    content: '';
    position: absolute;
    background-color: rgba(0, 0, 0, .5);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: .3s ease-in-out;
    opacity: 0;
}

.benefits__card figure img {
    width: 50%;
    height: 50%;
    object-fit: contain;
}
.benefits__card figure span {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--b-1d);
    padding: .85rem 1rem;
    border-radius: 0 0 0 1rem;
    font-size: 2rem;
    font-weight: 900;
    display: flex;
    align-items: flex-start;
    color: white;
}
.benefits__card figure span small {
    font-size: .75rem;
    font-weight: 400;
}

.benefits__module {
    padding-top: 8rem;
}
.benefits__module__tabs__content {
    width: 100%;
    max-width: 45rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3rem;
}
.benefits__module__tabs {
    border: 1px solid var(--b-gray);
    position: relative;
    border-radius: 10rem;
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.benefits__module__tabs .owl-nav {
    margin-top: 0 !important;
}
.benefits__module__tabs .owl-nav button {
    position: absolute;
    top: 50%;
}
.benefits__module__tabs .owl-nav button.owl-prev {
    left: 0;
    transform: translateY(-50%) translateX(calc(-100% - 1rem));
}
.benefits__module__tabs .owl-nav button.owl-next {
    right: 0;
    transform: translateY(-50%) translateX(calc(100% + 1rem));
}
.benefits__module__tabs li button {
    border-radius: 10rem;
    color: var(--b-gray);
    padding: 1rem;
    background-color: transparent;
    cursor: pointer;
}
.benefits__module__tabs li button.__active {
    background-color: black;
    color: white;
    pointer-events: none;
}
.benefits__module__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}
.benefits__module__list .benefits__card {
    display: none;
}

.benefit__modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, .5);
    z-index: 1000000000;
    display: none;
}
.benefit__modal__content {
    padding: 2rem;
    border-radius: 1rem;
    max-width: 38rem;
    width: 95%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 .5rem rgba(0,0,0,.1);
    max-height: 80vh;
    overflow-y: auto;
}
.benefit__modal__content.__welcome {
    background-color: white;
}
.benefit__modal__content.__detail {
    background-color: var(--b-gray);
}
.benefit__modal__content.__detail small {
    color: white;
    border-top: 1px solid white;
    width: 100%;
    display: block;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: .75rem;
}
.benefit__modal__detail__content {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 2rem;
    color: white;
    display: none;
}
.benefit__modal__detail__content figure {
    background-color: white;
    border-radius: .85rem;
    padding: 2rem 1rem;
    width: 160px;
    flex-shrink: 0;
}
.benefit__modal__content .benefits__button {
    width: auto;
    padding: .5rem 1rem;
}
.benefit__modal__detail__content section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.benefit__modal__detail__content h3 {
    margin-bottom: .5rem;
}
.benefit__modal__detail__content p {
    line-height: 1.5;
}
.benefit__modal__welcome__title, .benefit__modal__detail__title {
    color: var(--b-1d);
    text-align: center;
    font-size: 1.75rem;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1rem;
}
.benefit__modal__detail__title {
    color: white;
    text-align: left;
    align-items: flex-start;
}
.benefit__modal__welcome__title svg {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}
.benefit__modal__text {
    color: var(--b-gray);
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 2rem;
    line-height: 1.5;
}
.benefit__modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    border: none;
    background-color: transparent;
    cursor: pointer;
}
.benefit__modal__content.__detail .benefit__modal__close svg, 
.benefit__modal__content.__detail .benefit__modal__close svg * {
    fill: white;
} 

.form__text {
    padding: 1rem;
    color: var(--b-gray);
    border-radius: .5rem;
    border: 1px solid var(--b-gray);
    width: 100%;
}
.benefit__btn__submit {
    margin-top: 1rem;
    width: 100%;
}
.benefits__section__brand .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: flex-start;
}
.benefits__section__brand .benefits__legal__text {
    font-size: 1.5rem;
    text-align: left;
    margin-top: 0;
}
.benefits__soon {
    margin-top: 6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.benefits__soon .__title {
    color: var(--b-1d);
    font-weight: 700;
    text-align: center;
    font-size: 2rem;
    max-width: 30rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}


@media screen and (max-width: 500px) {
    .benefits__list {
        grid-template-columns: 1fr;
    }
    .benefits__banner__options {
        flex-direction: column;
        background-color: transparent;
        gap: .5rem;
    }
    .benefits__banner__options li a:not(.__active) {
        background-color: white;
    }
    .benefits__module__list {
        grid-template-columns: 1fr;
    }
    .benefits__section__brand .container {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .benefit__modal__detail__content {
        flex-wrap: wrap;
        gap: 1rem;
    }
    .benefit__modal__detail__content figure {
        width: 60%;
    }
}