/* Multi-step "Landing Inversionista" form (Figma: Alpha Institucional / Landing 5422:9961).
   Paired with the `inversionista` Umbraco Forms theme. */

.investor-form,
.investor-form *,
.investor-hero__form {
    box-sizing: border-box;
}

.investor-form {
    --investor-form-ink: #26242B;
    --investor-form-muted: #AAA9AD;
    --investor-form-line: #26242B;
    --investor-form-blue: #2E58EB;
    --investor-form-border: #DAD9DE;
    --investor-form-dot-active: #FF62E5;

    background-color: #fff;
    width: 100%;
    max-width: 577px;
    margin-inline: auto;
    padding: 75px;
    border: 1px solid var(--investor-form-border);
    border-radius: 38px;
    box-shadow: 0 4px 24px 4px rgba(0, 0, 0, 0.12);
}

/* The form runs with the default Umbraco Forms stylesheet disabled, so the
   helper classes its markup relies on have to be defined here. */

.investor-form .umbraco-forms-hidden {
    display: none;
}

.investor-form__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    clip-path: inset(50%);
}

/* Umbraco Forms wraps each page in a fieldset; strip the UA chrome. */

.investor-form fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.investor-form legend {
    padding: 0;
}

/* Field groups ---------------------------------------------------------- */

.investor-form .investor-form__group + .investor-form__group {
    margin-top: 70px;
}

.investor-form__label {
    display: block;
    margin: 0 0 20px;
    font-family: Rubik, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--investor-form-ink);
}

.investor-form__input {
    display: block;
    width: 100%;
    max-width: none;
    height: 28px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--investor-form-line);
    border-radius: 0;
    background-color: transparent;
    font-family: Rubik, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: var(--investor-form-ink);
    appearance: none;
}

.investor-form__input::placeholder {
    color: var(--investor-form-muted);
    opacity: 1;
}

.investor-form__input:focus {
    outline: none;
    border-bottom-color: var(--investor-form-blue);
}

.investor-form__input:focus-visible {
    outline: 2px solid var(--investor-form-blue);
    outline-offset: 4px;
}

/* Native select gets the Figma chevron instead of the OS arrow */
select.investor-form__input {
    padding-right: 24px;
    background-image: url("/images/landing/select-chevron.svg");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 14px 14px;
    cursor: pointer;
}

/* Keep the prompt greyed while nothing is chosen, like the design's placeholder */
select.investor-form__input:invalid,
select.investor-form__input option[value=""] {
    color: var(--investor-form-muted);
}

/* Submit --------------------------------------------------------------- */

.investor-form__submit {
    display: block;
    width: 100%;
    margin-top: 70px;
    padding: 16px 56px 17px;
    border: 0;
    border-radius: 40px;
    background-color: var(--investor-form-blue);
    font-family: Rubik, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 0.978;
    text-align: center;
    color: #fff;
    cursor: pointer;
}

.investor-form__submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Stepper -------------------------------------------------------------- */

.investor-form__stepper {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}

.investor-form__dot {
    width: 24px;
    height: 24px;
    border: 1px solid #000;
    border-radius: 50%;
    background-color: #fff;
}

.investor-form__dot--current {
    border-color: var(--investor-form-dot-active);
    background-color: var(--investor-form-dot-active);
}

/* Validation ----------------------------------------------------------- */

.investor-form .field-validation-error {
    display: block;
    margin-top: 8px;
    font-family: Rubik, sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: #D0021B;
}

.investor-form .input-validation-error {
    border-bottom-color: #D0021B;
}

/* Success toast (Figma node 5426:10895) -------------------------------- */

.investor-form__toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    max-width: 353px;
    margin-inline: auto;
    padding: 12px 16px;
    border: 1px solid #48BA2C;
    border-radius: 8px;
    background-color: #EDFAEA;
}

.investor-form__toast-icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin-top: 2px;
}

.investor-form__toast-text {
    flex: 1 1 auto;
    font-family: Rubik, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #292929;
}

/* Mobile: the design drops the card chrome and goes edge to edge -------- */

@media screen and (max-width: 767px) {
    .investor-form {
        max-width: none;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background-color: transparent;
    }

    .investor-form__submit {
        margin-top: 48px;
    }
}

.investor-form__toast-close {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    line-height: 0;
}

/* ===================================================================== */
/* Hero (Figma: Landing 5422:9961 — headline left, multi-step form right) */
/* ===================================================================== */

/* Coordinates below come straight from the 1440x4497 Figma frame. The site
   header overlays the hero, so the section starts at page top and the design's
   absolute Y values can be used as-is.
     vector   x=964  y=123.23  759x409.78
     card     x=767  y=284     577x664
     headline x=96   y=404     515 wide
   The frame draws the hero on a 1248px grid, but the site's own shell uses
   mw-xl-container (1168px) for the header and footer, so the container below
   follows the site instead and the headline lines up with the logo. */

.investor-hero {
    position: relative;
    overflow: hidden;
    /* card top = 284; section ends at 1098, card bottom = 948 -> 150 below */
    padding-block: 284px 150px;
}

.investor-hero__decoration {
    position: absolute;
    top: 123.23px;
    right: -283px;   /* 964 + 759 - 1440 = 283 bleed past the right edge */
    width: 759px;
    height: 409.78px;
    pointer-events: none;
    z-index: 0;
}

.investor-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    max-width: 1168px;
    margin-inline: auto;
}

/* Typography comes from the rich text editor's style dropdown (rte-styles.css),
   so the block only owns the placement. */
.investor-hero__headline {
    flex: 0 0 515px;
    margin: 120px 0 0;   /* headline y=404, card y=284 */
}

.investor-hero__headline p {
    margin: 0;
}

.investor-hero__form {
    flex: 0 0 577px;
    max-width: 577px;
}

@media screen and (max-width: 1199px) {
    .investor-hero {
        padding-block: 180px 96px;
    }

    .investor-hero__inner {
        padding-inline: 16px;
        flex-direction: column;
        align-items: center;
        gap: 48px;
    }

    .investor-hero__headline {
        flex: 0 1 auto;
        margin-top: 0;
        width: 100%;
        max-width: 696px;
    }

    .investor-hero__form {
        flex: 0 0 auto;
        width: 100%;
        max-width: 577px;
    }

    .investor-hero__decoration {
        top: 60px;
        right: -420px;
        width: 700px;
        height: auto;
    }
}

@media screen and (max-width: 767px) {
    .investor-hero {
        padding-block: 120px 56px;
    }

    .investor-hero__decoration {
        display: none;
    }
}

/* ===================================================================== */
/* Text section (Figma: "Quienes Somos", nodes 5422:10190 / 5450:11028)  */
/* ===================================================================== */

/* Typography is chosen in the editor's style menu, so this owns spacing only.
   The blocks that usually sit above already carry a generous margin-bottom
   (the products section has 200px), so the top padding stays small to avoid
   doubling the gap. */
.investor-text {
    padding-block: 32px 120px;
}

.investor-text__inner {
    max-width: 1168px;
    margin-inline: auto;
}

.investor-text__inner > :first-child {
    margin-top: 0;
}

.investor-text__inner > :last-child {
    margin-bottom: 0;
}

/* ===================================================================== */
/* Closing CTA (Figma: nodes 5452:11043 / 5450:11038 / 5450:11030)       */
/* Section is 650 tall: a 490 graphic centred inside 80 of padding.      */
/* ===================================================================== */

.investor-cta {
    background-color: #F9F8FE;
    padding-block: 80px;
}

.investor-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 64px;
    min-height: 490px;
    max-width: 1168px;
    margin-inline: auto;
}

.investor-cta__content {
    flex: 0 1 596px;
}

.investor-cta__headline p {
    margin: 0;
}

.investor-cta__button {
    display: inline-block;
    min-width: 280px;
    margin-top: 48px;      /* headline bottom 3672, button top 3720 */
    padding: 16px 56px 17px;
    border: 1px solid #2E58EB;
    border-radius: 40px;
    background-color: transparent;
    font-family: Rubik, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 0.978;
    text-align: center;
    text-decoration: none;
    color: #2E58EB;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.investor-cta__button:hover,
.investor-cta__button:focus-visible {
    background-color: #2E58EB;
    color: #fff;
}

.investor-cta__image {
    flex: 0 0 490px;
    width: 490px;
    height: 490px;
}

@media screen and (max-width: 1199px) {
    .investor-text,
    .investor-cta {
        padding-inline: 16px;
    }

    .investor-cta__inner {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 48px;
        min-height: 0;
    }

    .investor-cta__content {
        flex: 0 1 auto;
    }

    .investor-cta__image {
        flex: 0 0 auto;
        width: 340px;
        height: 340px;
        align-self: center;
    }
}

@media screen and (max-width: 767px) {
    .investor-text {
        padding-block: 24px 64px;
    }

    .investor-cta {
        padding-block: 56px;
    }

    .investor-cta__button {
        min-width: 0;
        width: 100%;
        margin-top: 32px;
    }

    .investor-cta__image {
        width: 240px;
        height: 240px;
    }
}