/* Contacto — Hero — #contact_hero */

#contact_hero {
    padding: clamp(48px,7vw,104px) 0 clamp(36px,4.4vw,60px);
}

#contact_hero .mgx-contact-hero-002 {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(20px,5vw,56px);
}

#contact_hero .mgx-contact-hero-003 {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 400 12px var(--font-body);
    color: var(--mg-grey);
    margin-bottom: clamp(28px,3.4vw,44px);
}

#contact_hero .mgx-contact-hero-004 {
    color: var(--mg-grey);
    text-decoration: none;
}

#contact_hero .mgx-contact-hero-005 {
    color: var(--color-text);
}

#contact_hero .mgx-contact-hero-006 {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
}

#contact_hero .mgx-contact-hero-007 {
    display: block;
    width: 44px;
    height: 2px;
    background: var(--color-accent);
}

#contact_hero .mgx-contact-hero-008 {
    font: 600 11px var(--font-body);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--color-accent);
}

#contact_hero .mgx-contact-hero-009 {
    margin: 0 0 clamp(24px,3vw,38px);
    max-width: 20ch;
    text-wrap: balance;
}

#contact_hero .mgx-contact-hero-010 {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(24px,4vw,72px);
    align-items: end;
    border-top: 2px solid var(--color-divider);
    padding-top: 28px;
}

#contact_hero .mgx-contact-hero-011 {
    font: 400 clamp(15px,1.35vw,19px)/1.7 var(--font-body);
    color: var(--mg-body);
    margin: 0;
    max-width: 56ch;
}

#contact_hero .mgx-contact-hero-012 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    font: 400 13.5px/1.5 var(--font-body);
    color: var(--mg-body);
}

#contact_hero .mgx-contact-hero-013 {
    white-space: nowrap;
}

#contact_hero .mgx-contact-hero-014 {
    color: var(--mg-grey);
}

#contact_hero .mgx-contact-hero-015 {
    white-space: nowrap;
}

/* Contacto — Formulario — #contact_form */

#contact_form {
    border-top: 2px solid var(--color-divider);
    padding: clamp(48px,6.4vw,96px) 0;
}

#contact_form .mgx-contact-form-002 {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(20px,5vw,56px);
}

#contact_form .mgx-contact-form-003 {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: clamp(32px,5vw,80px);
    align-items: start;
}

#contact_form .mgx-contact-form-004 {
    border-top: 2px solid var(--color-divider);
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

#contact_form .mgx-contact-form-005 {
    font: 600 10.5px var(--font-body);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mg-grey);
    margin-bottom: 11px;
}

#contact_form .mgx-contact-form-006 {
    font: 400 15px/1.7 var(--font-body);
    color: var(--mg-body);
}

#contact_form .mgx-contact-form-007 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 600 11.5px var(--font-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-accent);
    text-decoration: none;
    margin-top: 14px;
}

#contact_form .mgx-contact-form-008 {
    border-top: 1px solid var(--color-divider);
    padding-top: 22px;
}

#contact_form .mgx-contact-form-009 {
    font: 600 10.5px var(--font-body);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mg-grey);
    margin-bottom: 11px;
}

#contact_form .mgx-contact-form-010 {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font: 500 15px var(--font-body);
}

#contact_form .mgx-contact-form-011 {
    color: var(--color-text);
    text-decoration: none;
}

#contact_form .mgx-contact-form-012 {
    color: var(--color-text);
    text-decoration: none;
}

#contact_form .mgx-contact-form-013 {
    color: var(--color-accent);
    text-decoration: none;
}

#contact_form .mgx-contact-form-014 {
    border-top: 1px solid var(--color-divider);
    padding-top: 22px;
}

#contact_form .mgx-contact-form-015 {
    font: 600 10.5px var(--font-body);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mg-grey);
    margin-bottom: 11px;
}

#contact_form .mgx-contact-form-016 {
    font: 400 14.5px/1.75 var(--font-body);
    color: var(--mg-body);
}

#contact_form .mgx-contact-form-017 {
    color: var(--mg-grey);
}

#contact_form .mgx-contact-form-018 {
    border-top: 1px solid var(--color-divider);
    padding-top: 22px;
}

#contact_form .mgx-contact-form-019 {
    font: 600 10.5px var(--font-body);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mg-grey);
    margin-bottom: 14px;
}

#contact_form .mgx-contact-form-020 {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    background: linear-gradient(135deg,#5ee27b 0%,#25d366 48%,#0f8a5f 100%);
    color: #fff;
    text-decoration: none;
    font: 600 13px var(--font-body);
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 15px 22px;
    border-radius: 3px;
    box-shadow: 0 2px 10px rgba(15,138,95,.28);
    transition: transform .3s,box-shadow .3s;
}

#contact_form .mgx-contact-form-021 {
    background: var(--color-surface);
    border: 2px solid var(--color-divider);
    padding: clamp(24px,3.4vw,46px);
}

#contact_form .mgx-contact-form-022 {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

#contact_form .mgx-contact-form-023 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

#contact_form .mgx-contact-form-024 {
    font: 400 12px var(--font-body);
    color: var(--mg-body);
    margin-bottom: 8px;
}

#contact_form .mgx-contact-form-025 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#contact_form .mgx-contact-form-026 {
    border: 1px solid var(--color-divider);
    border-radius: 3px;
}

#contact_form .mgx-contact-form-027 {
    border: 1px solid var(--color-divider);
    border-radius: 3px;
}

#contact_form .mgx-contact-form-028 {
    border: 1px solid var(--color-divider);
    border-radius: 3px;
}

#contact_form .mgx-contact-form-029 {
    border: 1px solid var(--color-divider);
    border-radius: 3px;
}

#contact_form .mgx-contact-form-030 {
    border: 1px solid var(--color-divider);
    border-radius: 3px;
}

#contact_form .mgx-contact-form-031 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

#contact_form .mgx-contact-form-032 {
    font: 400 12px var(--font-body);
    color: var(--mg-body);
    margin-bottom: 8px;
}

#contact_form .mgx-contact-form-033 {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    background: var(--color-bg);
    border: 1px dashed var(--color-divider);
    border-radius: 3px;
    cursor: pointer;
}

#contact_form .mgx-contact-form-034 {
    flex: none;
}

#contact_form .mgx-contact-form-035 {
    display: block;
    font: 600 13.5px var(--font-body);
}

#contact_form .mgx-contact-form-036 {
    display: block;
    font: 400 12px var(--font-body);
    color: var(--mg-grey);
    margin-top: 2px;
}

#contact_form .mgx-contact-form-037 {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

#contact_form .mgx-contact-form-038 {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font: 400 12.5px/1.55 var(--font-body);
    color: var(--mg-body);
    cursor: pointer;
}

#contact_form .mgx-contact-form-039 {
    margin-top: 2px;
    accent-color: var(--color-accent);
    width: 16px;
    height: 16px;
    flex: none;
}

#contact_form .mgx-contact-form-040 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    background: var(--color-accent);
    color: #f7f5f1;
    font: 600 14px var(--font-body);
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 20px 30px;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
}