@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

:root {
    --purple1: #794BB5;
    --purple2: #9767CC;
    --purple3: #C7ABF5;
    --purpleBG: #783CBF;

    --accent-primary: #ffbb00;
    --accent-secondary: #7e57c5;
    --light-green-cyan: #7bdcb5;
    --pale-cyan-blue: #8ed1fc;
    --plain-blue: #EFF5FB;
    --plain-gray: #F2F2F2;
    --primary: #4B2683;
    --pure-black: #000000;
    --pure-white: #FFFFFF;
    --secondary: #26256c;
    --vivid-cyan-blue: #0693e3;
    --vivid-green-cyan: #00d084;
    --vivid-purple: #9b51e0;
    --text-gray: #7a7a7a;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100% !important;
    max-width: 100% !important;
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:
        "wdth" 100,
        "YTLC" 500;
}

body {
    background: var(--purpleBG) url(../img/bg2.png) no-repeat top center;
    background-size: cover;
}

.navBar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: transparent;
    padding-top: 2rem;
}

.navBar img {
    max-width: 45%;
}

.navBar h1 {
    text-transform: uppercase;
    color: var(--pure-white);
    font-weight: 600;
    text-align: center;
}

main {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 1rem;
    justify-content: start;
    align-items: center;
    width: 100%;
    min-height: 300px;
}

.mainSection section {
    max-width: 95%;
    margin: 0 auto;
    clear: both;
    text-align: center;
    padding: 2.5rem 1rem;
}

.mainSection section>h2 {
    font-weight: 600;
    color: var(--purple3);
    color: var(--accent-primary);
    line-height: 2.25rem;
}

.mainSection section>h3 {
    font-weight: 400;
    color: var(--pure-white)
}

.mainSection section>p {
    font-weight: 300;
    color: var(--pure-white)
}

.mainSection section>p a {
    color: var(--pure-white);
    transition: ease all .6s;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
}

.mainSection section>p a:hover {
    color: var(--accent-primary);
    text-decoration: underline;
}

#whatsIcon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    top: 10px;
    position: relative;
}

.price {
    display: flex;
    margin-top: 3rem !important;
    font-weight: 700 !important;
    font-size: 1.85rem !important;
    color: var(--primary) !important;
    background-color: var(--accent-primary);
    max-width: 25%;
    height: 2.5rem;
    margin: 0 auto;
    clear: both;
    justify-self: center;
    justify-content: center;
    align-items: center;
    transform: skew(-10deg, 0deg);
}

.splittedArea {
    gap: 1rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    align-content: center;
    overflow: auto;
    flex-direction: row;
}

.splittedArea>div {
    padding: 1rem 2rem;
    width: 50%;
    height: auto;
    text-align: left;
    color: var(--pure-white);
}

.splittedArea>div h3 {
    color: var(--accent-primary);
    font-size: 2rem;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.splittedArea>div ul {
    margin-block-start: .25rem;
    padding-inline-start: 30px;
    color: var(--pure-white);
}

.splittedArea>div ul li {
    margin-bottom: 6px;
}

.splittedArea>div ul li::marker {
    color: var(--purple3);
}

#map {
    height: 380px;
    width: 100%;
}

#registrocdmx2024 div {
    margin-bottom: 2rem;
}

#registrocdmx2024 label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--purple3);
}

#registrocdmx2024 label>sup {
    color: red;
    margin-left: 4px;
}

#registrocdmx2024 input[type="text"],
#registrocdmx2024 input[type="email"],
#registrocdmx2024 input[type="phone"] {
    width: 96%;
}

#registrocdmx2024 textarea {
    width: 100%;
    resize: none;
    field-sizing: content;
}

#registrocdmx2024 input[type="submit"] {
    background-color: var(--accent-primary);
    color: var(--primary);
    font-weight: 800;
    transition: ease all .6s;
}

#registrocdmx2024 input[type="submit"]:hover,
#registrocdmx2024 input[type="submit"]:active,
#registrocdmx2024 input[type="submit"]:focus {
    background-color: var(--primary);
    color: var(--pure-white);
}

.tycDiv {
    display: flex;
    flex-direction: row-reverse;
}

/******** RESPONSIVE ********/
@media screen and (max-width: 1120px) {
    .price {
        max-width: 45%;
        font-size: 1.25rem !important;
    }
}

@media screen and (max-width: 1024px) {
    .splittedArea {
        flex-direction: column;
        padding: 0;
    }

    .splittedArea>div {
        width: -webkit-fill-available;
    }
}

@media screen and (max-width: 768px) {
    .navBar img {
        max-width: 75%;
    }
}

@media screen and (max-width: 520px) {
    .price {
        max-width: 75%;
        font-size: 1.45rem !important;
    }
}

@media screen and (min-width:1920px) {
    body {
        background-size: auto;
    }
}

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