:root {
    --primary-color: #004BC2;
    --background-color: #002649;
    --partners-color: #00C7A9;
    --font-headers: 'Montserrat', sans-serif;
    --font-text: 'Roboto', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

img {
    max-width: 100%;
}

p {
    margin-bottom: 0px;
}

.heroContainer {
    background-color: var(--background-color);
}

.hero {
    display: grid;
    grid-template-columns: .8fr 1fr;
    gap: 70px;
    padding: 150px 90px 80px;
    align-items: center;
    justify-content: center;
}

.heroText {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.heroText h1 {
    font-family: var(--font-text);
    font-size: 23px;
    font-weight: 500;
    line-height: 28px;
    color: #3DC4AB;
}

.heroText h2 {
    font-family: var(--font-headers);
    font-size: 43px;
    font-weight: 700;
    line-height: 50px;
    color: white;
}

.heroText p {
    font-family: var(--font-text);
    font-size: 18px;
    font-weight: 300;
    line-height: 25px;
    color: white;
}

.bttnsContainer {
    display: flex;
    gap: 10px;
}

.bttnsContainer button, .bttnsContainer a {
    background-color: var(--primary-color);
    padding: 15px 30px;
    color: white;
    font-family: var(--font-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    border-radius: 100px;
    border: none;
    width: fit-content;
    border: 1px solid #004BC2;
    text-decoration: none;
}

.bttnsContainer .bttnSecundario {
    background-color: transparent;
    color: #004BC2;
    text-decoration: underline;
    padding: 15px 0;
    border: none;
}

.bttnsContainer .bttnSecundario:hover {
    color: var(--background-color);
}

.bttnsContainer .bttnPrincipal:hover {
    background-color: #003892;
}

/****************************/
.whyContainer,
.whyEmblue {
    display: grid;
    grid-template-columns: .7fr 1fr;
    gap: 70px;
    padding: 90px;
    align-items: center;
}

.whyText,
.whyEmblueArticles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    row-gap: 30px;
}

.whyTextNuevosIngresos {
    margin-top: 10px;
}

.whyText h2 {
    font-family: var(--font-headers);
    color: var(--primary-color);
    font-size: 40px;
    font-weight: 700;
    line-height: 45px;
}

.whyText article div {
    display: flex;
    gap: 15px;
    height: 80px;
    align-items: center;
    border-bottom: 3px solid var(--partners-color);
}

.whyText article div h3 {
    font-family: var(--font-headers);
    font-size: 20px;
    font-weight: 700;
    color: var(--background-color);
    padding: 2px 5px;
    width: fit-content;
}

.whyText article p {
    font-family: var(--font-text);
    font-size: 16px;
    line-height: 22px;
    margin-top: 20px;
    hyphens: auto;
}

/*************************/
.whyEmblueContainer {
    background-color: #F4F3FE;
}

.whyEmblue {
    background-image: url(../assets/bkg.svg);
    background-repeat: no-repeat;
    background-position: right 70px;
}

.whyEmblue article h2 {
    font-family: var(--font-headers);
    color: var(--primary-color);
    font-size: 40px;
    font-weight: 700;
    line-height: 45px;
}

.whyEmblue article p {
    font-family: var(--font-text);
    font-size: 16px;
    line-height: 22px;
    padding: 15px 0 40px;
    width: 80%;
}

.insignias {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.whyEmblueArticles div h3 {
    font-family: var(--font-headers);
    font-size: 20px;
    font-weight: 700;
    line-height: 25px;
    color: var(--primary-color);
    height: 70px;
    display: flex;
    align-items: center;
    gap: 20px;
    border-bottom: 3px solid var(--primary-color);
    hyphens: auto;
}

.whyEmblueArticles div h3 span {
    font-weight: 900;
    font-size: 20px;
}

.whyEmblueArticles div p {
    font-family: var(--font-text);
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0em;
    text-align: left;
    font-weight: 400;
    margin-top: 20px;
    hyphens: auto;
    color: var(--background-color);
}

/*********************************/
.gridContainer {
    padding: 90px 0 90px;
    display: grid;
    grid-template-columns: 20% 20% 10% 10% 10% 10% 10% 10%;
    grid-template-rows: auto 60px 70px 70px 70px;
    grid-template-areas: "header header bronce bronce plata plata oro oro"
        "header header referral1 resseler1 referral2 resseler2 referral3 resseler3"
        "revenue revenueShare revenueShare revenueShare revenueShare revenueShare revenueShare revenueShare"
        "revenue newCustomers newCustomers newCustomers newCustomers newCustomers newCustomers newCustomers"
        "revenue conditions conditions conditions conditions conditions conditions conditions";
    margin: 0 auto;
    width: 1000px;
    justify-content: center;
    align-items: center;
    place-items: center;
    color: var(--primary-color);
}

.gridContainer div {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #B6ACFA;
    font-family: var(--font-headers);
}

.header {
    grid-area: header;
    border: 1px solid #B6ACFA;
    flex-direction: column;
    padding: 20px;
    border-top-left-radius: 10px !important;
}

.header h2 {
    font-family: var(--font-headers);
    color: var(--primary-color);
    font-size: 35px;
    font-weight: 700;
    line-height: 40px;
}

.header p {
    font-family: var(--font-text);
    color: var(--background-color);
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    margin-top: 20px;
}

.bronce {
    grid-area: bronce;
    background-color: #E6E2FF;
}

.referral1 {
    grid-area: referral1;
}

.resseler1 {
    grid-area: resseler1;
}

.plata {
    grid-area: plata;
    background-color: #D9FFF9;
}

.referral2 {
    grid-area: referral2;
}

.resseler2 {
    grid-area: resseler2;
}

.oro {
    grid-area: oro;
    border-top-right-radius: 10px !important;
    background-color: #D4E5FF;
}

.referral3 {
    grid-area: referral3;
}

.resseler3 {
    grid-area: resseler3;
}

.resseler1,
.resseler2,
.resseler3 {
    font-weight: 700;
    background-color: #F1F1F1;
}

.revenue {
    grid-area: revenue;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-bottom-left-radius: 10px;
    font-weight: 600;
    color: white;
    background-color: var(--primary-color);
    border-color: var(--primary-color) !important;
}

.revenueShare {
    grid-area: revenueShare;
    display: grid !important;
    grid-template-columns: 25.1% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5%;
    place-items: center;
}

.newCustomers {
    grid-area: newCustomers;
    display: grid !important;
    grid-template-columns: 25% 25% 25% 25%;
    place-items: center;
}

.conditions {
    grid-area: conditions;
    display: grid !important;
    grid-template-columns: 25% 75%;
    place-items: center;
    border-bottom-right-radius: 10px;
}

.revenueShare p,
.newCustomers p,
.conditions p {
    border-right: 1px solid #B6ACFA;
    height: 100%;
    width: 100%;
    display: flex;
    place-items: center;
    padding-left: 10px;
    font-weight: 600;
}

.gridContainer div span {
    border-right: 1px solid #B6ACFA;
    border-left: 1px solid #B6ACFA;
    height: 100%;
    width: 100%;
    display: flex;
    place-items: center;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.gridContainer .conditions span {
    font-style: italic;
    font-weight: 400;
    line-height: 22px;
}

.gridContainer div span:last-child {
    border-right: none;
}

.grey {
    background-color: #F7F6F6;
}

.tablesMobile {
    display: none;
}

/********************/
.accordionContainer {
    padding: 50px 90px 90px;
    font-family: var(--font-text);
}

.accordionContainer h2 {
    font-family: var(--font-headers);
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 60px;
    font-size: 40px;
    text-align: center;
}

.accordion-collapse {
    border-radius: 0 0 5px 5px !important;
    background-color: #E6E2FF !important;
    padding: 8px 8px 20px;
}

.accordion-button:not(.collapsed) {
    background-color: white;
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-button {
    font-family: var(--font-text);
    color: var(--background-color);
    font-size: 15px;
    font-weight: 600;
    line-height: 30px;
}

/**********************/
.cta {
    background-color: var(--background-color);
    padding: 120px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    background-image: url(../assets/partner-background.svg);
    background-repeat: no-repeat;
    background-position: bottom left;
}

.cta h2 {
    font-family: var(--font-headers);
    font-size: 30px;
    font-weight: 500;
    line-height: 37px;
    color: white;
    text-align: center;
    max-width: 900px;
}

.cta button {
    font-family: var(--font-text);
    font-size: 18px;
    font-weight: 500;
    line-height: 21px;
    background-color: var(--primary-color);
    padding: 15px 30px;
    color: white;
    font-family: var(--font-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    border-radius: 100px;
    border: none;
    width: fit-content;
    margin-top: 20px;
}


form {
    margin: 0 auto;
    width: 450px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 30px;
    border-radius: 20px;
    border: 1px solid #CBCAC8;
    background: #FFF;
    z-index: 2;
    min-height: 555px;
    justify-content: center;
}

form input,
.pais {
    border-radius: 6px;
    border: 1px solid #004BC2;
    padding: 10px;
    color: #00224C;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
}

form .bttnPrincipal {
    min-width: 50%;
}

form h2 {
    color: #004DBC;
    font-family: Montserrat;
    font-size: 25px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.sentDescription {
    color: #00224C;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
}

.hidden {
    display: none;
}

.show {
    display: block;
}

.pais img,
.paisList li img {
    max-height: 100%;
    height: 20px;
}

.paisList li img {
    margin-right: 10px;
    margin-bottom: -3px;
}

.pais:hover {
    cursor: pointer;
}

.pais #arrow {
    padding-top: 3px;
}

.pais p img {
    font-size: 10px;
}

.paisList {
    overflow-y: auto;
    width: 300%;
    background-color: white;
    position: absolute;
    top: 43px;
    padding: 10px;
    border-radius: 10px;
    border: solid 1px lightgrey;
}

.paisList li {
    cursor: pointer;
    padding: 10px 20px;
    font-size: 16px;
    border-bottom: solid 1px lightgrey;
    font-family: 'Roboto', sans-serif;
}

.paisList li:last-child {
    border-bottom: none;
}

.telefonoIputCodarea {
    position: relative;
}

.telefonoIput {
    display: grid;
    grid-template-columns: 25% 75%;
}

.pais {
    display: flex;
    justify-content: space-between;
    color: grey;
    margin-right: 3px;
}

.paisListOptions span {
    color: grey;
    margin-left: 10px;
}

/* Estilo general para el marcador de posición */
::placeholder {
    color: #00224C;
}

/* Estilo específico para el marcador de posición en navegadores WebKit (Chrome, Safari) */
::-webkit-input-placeholder {
    color: #00224C;
}

/* Estilo específico para el marcador de posición en navegadores Firefox */
:-moz-placeholder {
    color: #00224C;
}

/* Estilo específico para el marcador de posición en Edge */
::-ms-input-placeholder {
    color: #00224C;
}

.emailValidatorContainer {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    margin-top: -10px;
    margin-left: 10px;
    color: red;
    height: 10px;
}

#emailValidatorText {
    display: none;
}

.visible {
    display: block !important;
}

div#codAreaSelector {
    min-height: 47px;
}

.sent {
    color: #004DBC;
    font-family: Montserrat;
    font-size: 25px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    justify-self: flex-start;
}

.thanks {
    color: var(--background-color);
    font-family: 'Montserrat', sans-serif;
    font-size: 19px;
    font-weight: 500;
}

.description {
    font-family: var(--font-text);
    color: var(--background-color);
}


/* MEDIA QUERY */
@media (max-width: 1120px) {
    .hero {
        padding: 120px 30px 90px;
        grid-template-columns: 100%;
        gap: 40px;
    }

    .heroImg img {
        position: static;
        display: flex;
        margin: 0 auto;
    }

    .heroText h2 {
        font-size: 33px;
        line-height: normal;
    }

    .heroText p {
        font-size: 16px;
        line-height: 1.5;
    }

    /************/
    .whyContainer,
    .whyEmblue {
        padding: 60px 30px;
        grid-template-columns: 100%;
    }

    .whyContainer .whyImg {
        display: none;
    }

    .whyText,
    .whyEmblueArticles {
        grid-template-columns: 100%;
        gap: 50px;
    }

    .whyText h2 {
        font-size: 35px;
    }

    .whyTextNuevosIngresos {
        margin-top: 0px;
    }

    /**********/
    .whyEmblue {
        gap: 50px;
        background-position: 90% 30px
    }

    .whyEmblue article img {
        display: none;
    }

    .whyEmblue article p {
        padding: 15px 0 0;
    }

    /*********/
    .tableDesktop {
        display: none;
    }

    .tablesMobile {
        display: block;
    }

    .tablesMobile h2 {
        padding: 60px 30px 10px;
        font-family: var(--font-headers);
        font-size: 33px;
        font-weight: 700;
        line-height: 42px;
        letter-spacing: 0em;
        text-align: left;
        color: var(--primary-color);
    }

    .tablesMobile .description {
        font-family: var(--font-text);
        color: var(--background-color);
        font-size: 16px;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0em;
        text-align: left;
        padding: 0 30px 20px;
    }

    .tableMobileBronce {
        padding: 15px;
        display: grid;
        grid-template-columns: 40% 60%;
        grid-template-rows: 120px 35px 35px 35px;
        grid-template-areas: "bronce revenue"
            "revenueS revenueS"
            "customer customer"
            "conditions conditions";

        font-family: var(--font-headers);
        font-size: 16px;
        font-weight: 500;
        line-height: 14px;
        letter-spacing: 0em;
        text-align: center;
        color: var(--primary-color);
    }

    .tableMobileBronce span {
        font-weight: 600;
    }

    .bronceM {
        grid-area: bronce;
        width: 100%;
        background-color: #E6E2FF;
        display: flex;
        border: 1px solid #B6ACFA;
        border-radius: 10px 0 0 0;
    }

    .bronceM img {
        width: 70px;
        margin: 0 auto;
    }

    .revenueContainerM {
        grid-area: revenue;
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: space-between;
    }

    .revenueContainerM img {
        width: 30px;
    }

    .eachType {
        display: flex;
        justify-content: space-around;
        border: 1px solid #B6ACFA;
        border-left: none;
    }

    .eachType div {
        border-left: 1px solid #B6ACFA;
        ;
        width: 100%;
        text-align: center;
        height: 30px;
        justify-content: center;
        align-items: center;
        display: flex;
    }

    .resselerM {
        font-weight: 600;
    }

    .revenueM {
        background-color: var(--primary-color);
        font-family: var(--font-headers);
        font-size: 15px;
        font-weight: 600;
        line-height: 22px;
        letter-spacing: 0em;
        text-align: center;
        color: white;
        height: 100%;
        justify-content: center;
        align-items: center;
        gap: 10px;
        display: flex;
        border-radius: 0 10px 0 0;
    }

    .revenueShareM {
        grid-area: revenueS;
        border: 1px solid #B6ACFA;
        display: grid;
        grid-template-columns: 40% 30% 30%;
        place-items: center;
        align-items: center;
    }

    .revenueShareM span {
        border-right: 1px solid #B6ACFA;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .revenueShareM span:last-child {
        font-weight: 700;
    }

    .revenueShareM p,
    .newCustomersM p,
    .conditionsM p {
        border-right: 1px solid #B6ACFA;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        padding-left: 10px;
        text-align: start;
    }

    .newCustomersM {
        grid-area: customer;
        display: grid;
        grid-template-columns: 40% 60%;
        place-items: center;

        border: 1px solid #B6ACFA;
        border-top: none;
    }

    .conditionsM {
        grid-area: conditions;
        display: grid;
        grid-template-columns: 40% 60%;
        place-items: center;

        border: 1px solid #B6ACFA;
        border-top: none;
        border-radius: 0 0 10px 10px;
    }

    .conditionsM span {
        font-family: var(--font-text);
        font-size: 14px;
        font-style: italic;
        font-weight: 400;
        line-height: 14px;
        letter-spacing: 0em;
        text-align: center;
        padding: 0 10px;
    }

    /****************/
    .tableMobilePlate {
        padding: 15px;
        display: grid;
        grid-template-columns: 40% 60%;
        grid-template-rows: 120px 35px 35px 35px;
        grid-template-areas: "plate revenueContainerP"
            "revenueShareP revenueShareP"
            "customerP customerP"
            "conditionsP conditionsP";

        font-family: var(--font-headers);
        font-size: 16px;
        font-weight: 500;
        line-height: 14px;
        letter-spacing: 0em;
        text-align: center;
        color: var(--primary-color);
    }

    .tableMobilePlate span {
        font-weight: 600;
    }

    .plate {
        grid-area: plate;
        width: 100%;
        background-color: #E6E2FF;
        display: flex;
        border: 1px solid #B6ACFA;
        border-radius: 10px 0 0 0;
    }

    .plate img {
        width: 70px;
        margin: 0 auto;
    }

    .revenueP {
        background-color: var(--primary-color);
        font-family: var(--font-headers);
        font-size: 15px;
        font-weight: 600;
        line-height: 22px;
        letter-spacing: 0em;
        text-align: center;
        color: white;
        height: 100%;
        justify-content: center;
        align-items: center;
        gap: 10px;
        display: flex;
        border-radius: 0 10px 0 0;
    }


    .revenueContainerP {
        grid-area: revenueContainerP;
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: space-between;
    }

    .revenueContainerP img {
        width: 30px;
    }

    .revenueShareP {
        grid-area: revenueShareP;
        border: 1px solid #B6ACFA;
        display: grid;
        grid-template-columns: 40% 30% 30%;
        place-items: center;
        align-items: center;
    }

    .revenueShareP span {
        border-right: 1px solid #B6ACFA;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .revenueShareP span:last-child {
        font-weight: 700;
    }

    .revenueShareP p,
    .newCustomersP p,
    .conditionsP p {
        border-right: 1px solid #B6ACFA;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        padding-left: 10px;
        text-align: start;
    }

    .newCustomersP {
        grid-area: customerP;
        display: grid;
        grid-template-columns: 40% 60%;
        place-items: center;

        border: 1px solid #B6ACFA;
        border-top: none;
    }

    .conditionsP {
        grid-area: conditionsP;
        display: grid;
        grid-template-columns: 40% 60%;
        place-items: center;

        border: 1px solid #B6ACFA;
        border-top: none;
        border-radius: 0 0 10px 10px;
    }

    .conditionsP span {
        font-family: var(--font-text);
        font-size: 14px;
        font-style: italic;
        font-weight: 400;
        line-height: 14px;
        letter-spacing: 0em;
        text-align: center;
        padding: 0 10px;
    }

    /****************/
    .tableMobileGold {
        padding: 15px;
        display: grid;
        grid-template-columns: 40% 60%;
        grid-template-rows: 120px 35px 35px 35px;
        grid-template-areas: "goldd revenueContainerG"
            "revenueShareG revenueShareG"
            "customerG customerG"
            "conditionsG conditionsG";

        font-family: var(--font-headers);
        font-size: 16px;
        font-weight: 500;
        line-height: 14px;
        letter-spacing: 0em;
        text-align: center;
        color: var(--primary-color);
    }

    .tableMobileGold span {
        font-weight: 600;
    }

    .gold {
        grid-area: goldd;
        width: 100%;
        background-color: #E6E2FF;
        display: flex;
        border: 1px solid #B6ACFA;
        border-radius: 10px 0 0 0;
    }

    .gold img {
        width: 70px;
        margin: 0 auto;
    }

    .revenueG {
        background-color: var(--primary-color);
        font-family: var(--font-headers);
        font-size: 15px;
        font-weight: 600;
        line-height: 22px;
        letter-spacing: 0em;
        text-align: center;
        color: white;
        height: 100%;
        justify-content: center;
        align-items: center;
        gap: 10px;
        display: flex;
        border-radius: 0 10px 0 0;
    }


    .revenueContainerG {
        grid-area: revenueContainerG;
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: space-between;
    }

    .revenueContainerG img {
        width: 30px;
    }

    .revenueShareG {
        grid-area: revenueShareG;
        border: 1px solid #B6ACFA;
        display: grid;
        grid-template-columns: 40% 30% 30%;
        place-items: center;
        align-items: center;
    }

    .revenueShareG span {
        border-right: 1px solid #B6ACFA;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .revenueShareG span:last-child {
        font-weight: 700;
    }

    .revenueShareG p,
    .newCustomersG p,
    .conditionsG p {
        border-right: 1px solid #B6ACFA;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        padding-left: 10px;
        text-align: start;
    }

    .newCustomersG {
        grid-area: customerG;
        display: grid;
        grid-template-columns: 40% 60%;
        place-items: center;

        border: 1px solid #B6ACFA;
        border-top: none;
    }

    .conditionsG {
        grid-area: conditionsG;
        display: grid;
        grid-template-columns: 40% 60%;
        place-items: center;

        border: 1px solid #B6ACFA;
        border-top: none;
        border-radius: 0 0 10px 10px;
    }

    .conditionsG span {
        font-family: var(--font-text);
        font-size: 14px;
        font-style: italic;
        font-weight: 400;
        line-height: 14px;
        letter-spacing: 0em;
        text-align: center;
        padding: 0 10px;
    }



    /**********/
    .accordionContainer {
        padding: 60px 15px;
    }

    .accordionContainer h2 {
        font-size: 35px;
        margin-bottom: 40px;
    }

    /************/

    .cta {
        align-items: flex-start;
        background-size: 100px;
    }

    .cta h2 {
        font-size: 30px;
        line-height: 37px;
        text-align: left;
    }
}


@media (max-width: 700px) {
    .bttnsContainer {
        flex-direction: column;
    }

    form {
        width: 100%;
        padding: 15px;
    }

    .bttnsContainer {
        align-items: center;
    }
    
}

@media (min-width: 750px) and (max-width: 1120px) {

    .hero,
    .whyContainer,
    .whyEmblue,
    .tablesMobile,
    .accordionContainer {
        padding-left: 90px;
        padding-right: 90px;
    }

    .insignias {
        justify-content: flex-start;
        gap: 30px;
    }
}

/* MEDIA QUERY - GENERAL Zoom */
@media (min-width: 768px) and (max-width: 1800px) {

    nav,
    footer {
        zoom: .85;
    }

    .box-menu button {
        line-height: 1.19;
    }
}

@media (min-width:1209px) {
    .containerLayout {
        margin: 0 auto;
        max-width: 1366px
    }
}