.cmp-contact-form {
    background: var(--color-white);
}

.cmp-contact-form__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-width: var(--especiales-max-width-desktop);
    width: 100%;
    margin-inline: auto;
    padding-block: var(--space-6);
}

/* ----------------------------------------------------------------------------
   Form card
---------------------------------------------------------------------------- */
.cmp-contact-form__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    width: 100%;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--Primario-50);
}

.cmp-contact-form__title .cmp-title {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    gap: 0;
    justify-content: flex-start;
}

.cmp-contact-form__title .cmp-title .cmp-vista-general-title__headline {
    margin: 0;
    margin-inline: 0;
    max-width: none;
    text-align: start;
    color: var(--Primario-900);
    font-family: var(--Heading-Escritorio-H3-fontFamily);
    font-size: var(--Heading-Mvil-H1-fontSize);
    font-weight: var(--Weights-Bold);
    line-height: var(--Heading-Mvil-H1-lineHeight);
    letter-spacing: var(--Heading-Escritorio-H3-letterSpacing);
}

.cmp-contact-form__row {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--space-6);
    width: 100%;
}

.cmp-contact-form__field {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-1);
    width: 100%;
    min-width: 0;
    min-inline-size: 0;
    margin: 0;
    border: 0;
    padding: 0;
}

.cmp-contact-form__label {
    color: var(--Neutros-800);
    font-family: var(--font-family-body);
    font-size: var(--Subheading-Escritorio-M-fontSize);
    font-weight: var(--Weights-Regular);
    line-height: var(--Subheading-Escritorio-M-lineHeight);
}

.cmp-contact-form__input {
    width: 100%;
    height: 3rem;
    padding: var(--space-4);
    border: var(--border-width-1) solid var(--CAF-Colores-neutros-gris-900);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--Neutros-900);
    font-family: var(--font-family-body);
    font-size: var(--Label-Label-2-fontSize);
    font-weight: var(--Weights-Regular);
    line-height: var(--Label-Label-2-lineHeight);
    appearance: none;
    -webkit-appearance: none;
}

.cmp-contact-form__input::placeholder {
    color: var(--CAF-Colores-neutros-gris-300);
    opacity: 1;
}

.cmp-contact-form__input:focus-visible {
    outline: var(--border-width-2) solid var(--Primario-600);
    outline-offset: var(--border-width-1);
    border-color: var(--Primario-600);
}

.cmp-contact-form__input[aria-invalid="true"] {
    border-color: #b3261e;
}

textarea.cmp-contact-form__input {
    height: auto;
    min-height: 6.5rem;
    padding: var(--space-4);
    line-height: 1.5rem;
    resize: vertical;
}

/* Select with chevron */
.cmp-contact-form__select-wrap {
    position: relative;
    display: flex;
    width: 100%;
}

.cmp-contact-form__select-wrap::after {
    content: "";
    position: absolute;
    top: 50%;
    right: var(--space-4);
    width: 1rem;
    height: 1rem;
    transform: translateY(-50%);
    pointer-events: none;
    background-image: url("../../../../etc.clientlibs/caf/clientlibs/clientlib-site/resources/images/svg/chevron-down.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.cmp-contact-form__select {
    padding-block: var(--space-3-5);
    padding-inline-end: var(--space-9);
    cursor: pointer;
}

/* Actions row: recaptcha + submit */
.cmp-contact-form__actions {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: stretch;
    width: 100%;
}

.cmp-contact-form__actions .g-recaptcha {
    max-width: 100%;
}

.cmp-contact-form__recaptcha {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 18.125rem; /* 290px reCAPTCHA widget */
    max-width: 100%;
    height: 4.625rem; /* 74px */
    padding: var(--space-3);
    border: var(--border-width-1) solid #d3d3d3;
    border-radius: var(--radius-sm);
    background: #f9f9f9;
}

.cmp-contact-form__recaptcha-check {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border: var(--border-width-2) solid #c1c1c1;
    border-radius: 0.125rem;
    background: var(--color-surface);
}

.cmp-contact-form__recaptcha-label {
    flex: 1 1 auto;
    color: #3c4043;
    font-family: var(--font-family-body);
    font-size: var(--Body-Body-3-fontSize);
    line-height: var(--Body-Body-3-lineHeight);
}

.cmp-contact-form__recaptcha-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}

.cmp-contact-form__recaptcha-logo {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    background: conic-gradient(from 180deg, #1c72d4, #2ba24c, #f6b704, #1c72d4);
    mask: radial-gradient(circle at center, transparent 0.35rem, #000 0.36rem);
}

.cmp-contact-form__recaptcha-legal {
    color: #9aa0a6;
    font-family: var(--font-family-body);
    font-size: 0.5rem;
    line-height: 0.75rem;
    text-align: center;
}

.cmp-contact-form .cmp-contact-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    height: 3rem;
    padding-inline: var(--space-6);
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--Primario-600);
    color: var(--CAF-Colores-neutros-full-white);
    font-family: var(--Label-Label-1-fontFamily);
    font-size: var(--Label-Label-1-fontSize);
    font-weight: var(--Weights-Bold);
    line-height: var(--Label-Label-1-lineHeight);
    letter-spacing: var(--Label-Label-1-letterSpacing);
    cursor: pointer;
    transition: background-color 150ms ease, transform 120ms ease;
}

.cmp-contact-form .cmp-contact-form__submit:hover {
    background: var(--Primario-700);
}

.cmp-contact-form .cmp-contact-form__submit:focus-visible {
    outline: var(--border-width-2) solid var(--Primario-900);
    outline-offset: var(--border-width-2);
}

.cmp-contact-form .cmp-contact-form__submit:active {
    transform: translateY(0.0625rem);
}

.cmp-contact-form .cmp-contact-form__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.cmp-contact-form__submit-icon {
    width: 1rem;
    height: 1rem;
}

.cmp-contact-form__feedback {
    margin: 0;
    color: var(--Secundario-700);
    font-family: var(--font-family-body);
    font-size: var(--Body-Body-2-fontSize);
    line-height: var(--Body-Body-2-lineHeight);
}

.cmp-contact-form__feedback[data-state="error"] {
    color: #b3261e;
}

/* ----------------------------------------------------------------------------
   Aside (office data)
---------------------------------------------------------------------------- */
.cmp-contact-form__aside {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-4);
    width: 100%;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--Primario-700);
}

.cmp-contact-form__aside-title .cmp-title {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.cmp-contact-form__aside-title .cmp-title .cmp-vista-general-title__headline {
    margin: 0;
    margin-inline: 0;
    max-width: none;
    text-align: start;
    color: var(--color-white) !important;
    font-family: var(--font-family-display);
    font-size: var(--Heading-Escritorio-H3-fontSize);
    font-weight: var(--Weights-Bold);
    line-height: 2.5rem;
}

.cmp-contact-form__aside-text p,
.cmp-contact-form__aside-text a {
    margin: 0;
    color: var(--color-white) !important;
    font-family: var(--font-family-display);
    font-size: var(--Body-Body-2-fontSize);
    font-weight: var(--Weights-Bold);
    line-height: var(--Body-Body-2-lineHeight);
}

.cmp-contact-form__aside-email {
    margin: 0;
    color: var(--Neutros-50);
    font-family: var(--Label-Label-1-fontFamily);
    font-size: var(--Label-Label-1-fontSize);
    font-weight: var(--Weights-Bold);
    line-height: var(--Label-Label-1-lineHeight);
    letter-spacing: var(--Label-Label-1-letterSpacing);
}

.cmp-contact-form__aside-link {
    color: inherit;
    text-decoration: none;
}

.cmp-contact-form__aside-link:hover,
.cmp-contact-form__aside-link:focus-visible {
    text-decoration: underline;
}

/* ----------------------------------------------------------------------------
   Desktop
---------------------------------------------------------------------------- */
@media (min-width: 64rem) {
    .cmp-contact-form__inner {
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        padding-block: var(--space-11-5);
    }

    .cmp-contact-form__card {
        flex: 1 1 auto;
        padding: var(--space-8);
    }

    .cmp-contact-form__title .cmp-title .cmp-vista-general-title__headline {
        font-size: var(--Heading-Escritorio-H3-fontSize);
        line-height: var(--Heading-Escritorio-H3-lineHeight);
        letter-spacing: var(--Heading-Escritorio-H3-letterSpacing);
    }

    .cmp-contact-form__row {
        flex-direction: row;
    }

    .cmp-contact-form__field {
        flex: 1 1 0;
        width: auto;
    }

    .cmp-contact-form__actions {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .cmp-contact-form .cmp-contact-form__submit {
        width: auto;
    }

    .cmp-contact-form__aside {
        flex: 0 0 29rem; /* 464px */
        max-width: 29rem;
        padding: var(--space-4) var(--space-8);
    }
}