/* FORM SYSTEM v2 — .form-light | .form-dark | .cf7_customize_white | .cf7_customize_black | .form-cols-{2,3,4} | .form-field | .form-split | .form-check | .form-btn | .form-msg | .form-field-full */
.form-light,
.cf7_customize_white {
    --form-label: var(--color-1-headings-dark);
    --form-border: var(--boton-4-texto-normal);
    --form-color: var(--boton-4-texto-normal);
    --form-focus: var(--color-boton-1-normal);
    --form-btn-bg: var(--color-boton-1-normal);
    --form-btn-c: var(--color-boton-1-texto-normal);
    --form-btn-hbg: var(--color-boton-1-hover);
    --form-btn-hc: var(--color-boton-1-texto-hover);
    --form-msg-c: var(--color-1-headings-dark);
    --form-radio-bg: var(--boton-4-texto-normal);
    --form-radio-shadow: var(--background-1-light);
    --form-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e")
}

.form-dark,
.cf7_customize_black {
    --form-label: var(--color-2-headings-light);
    --form-border: var(--boton-5-texto-normal);
    --form-color: var(--boton-5-texto-normal);
    --form-focus: var(--color-boton-3-normal);
    --form-btn-bg: var(--color-boton-3-normal);
    --form-btn-c: var(--color-boton-3-texto-normal);
    --form-btn-hbg: var(--color-boton-3-hover);
    --form-btn-hc: var(--color-boton-3-texto-hover);
    --form-msg-c: var(--color-2-headings-light);
    --form-radio-bg: var(--boton-5-texto-normal);
    --form-radio-shadow: var(--background-1-dark);
    --form-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e")
}

:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) label {
    color: var(--form-label);
    font-size: var(--tamano-7-mediumcta-font-size);
    font-weight: var(--tamano-7-mediumcta-font-weight);
    line-height: var(--tamano-7-mediumcta-line-height);
    letter-spacing: var(--tamano-7-mediumcta-letter-spacing);
    font-family: var(--tamano-7-mediumcta-font-family)
}

:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 25px;
    min-width: 0
}

/* Inputs, Textarea, Select — scoped under .form-field */
:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-field input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-field textarea,
:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-field select {
    padding: 15px 25px;
    border: 1.5px solid var(--form-border);
    outline: none;
    background: transparent;
    color: var(--form-color);
    font-size: var(--tamano7-font-size);
    font-weight: var(--tamano7-font-weight);
    line-height: var(--tamano7-line-height);
    letter-spacing: var(--tamano7-letter-spacing);
    font-family: var(--tamano7-font-family);
    border-radius: 3px;
    width: 100%;
    box-sizing: border-box
}

:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-field input:focus,
:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-field textarea:focus,
:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-field select:focus {
    border-color: var(--form-focus)
}

:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-field textarea {
    max-height: 125px;
    resize: vertical
}

:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-field select {
    appearance: none;
    background-image: var(--form-select-arrow);
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px 12px;
    padding-right: 40px
}

:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) ::placeholder {
    color: inherit;
    opacity: .7;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    font-family: inherit
}

/* Grid columns */
.form-cols-2,
.form-cols-3,
.form-cols-4 {
    display: grid;
    gap: 30px;
    align-items: start
}

.form-cols-2 {
    grid-template-columns: repeat(2, 1fr)
}

.form-cols-3 {
    grid-template-columns: repeat(3, 1fr)
}

.form-cols-4 {
    grid-template-columns: repeat(4, 1fr)
}

.form-field-full {
    grid-column: 1/-1
}

/* Grid propagation into CF7 wrapper */
:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black).form-cols-2>.wpcf7>form,
:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black).form-cols-3>.wpcf7>form,
:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black).form-cols-4>.wpcf7>form {
    display: grid;
    gap: 30px;
    align-items: start
}

:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black).form-cols-2>.wpcf7>form {
    grid-template-columns: repeat(2, 1fr)
}

:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black).form-cols-3>.wpcf7>form {
    grid-template-columns: repeat(3, 1fr)
}

:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black).form-cols-4>.wpcf7>form {
    grid-template-columns: repeat(4, 1fr)
}

:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black).form-cols-2>.wpcf7>form>p,
:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black).form-cols-3>.wpcf7>form>p,
:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black).form-cols-4>.wpcf7>form>p {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    min-width: 0
}

/* Split layout */
:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px
}

:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-split>div {
    min-width: 0
}

:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-split>.wpcf7>form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px
}

:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-split>.wpcf7>form>p {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    min-width: 0
}

/* Checkbox & Radio */
:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-check label {
    display: flex;
    align-items: baseline;
    gap: 10px;
    cursor: pointer
}

:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-check input[type="checkbox"],
:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-check input[type="radio"] {
    cursor: pointer;
    background-color: transparent;
    position: relative;
    width: 15px;
    height: 15px;
    appearance: none;
    flex-shrink: 0;
    border: 1.5px solid var(--form-border);
    border-radius: 3px;
    margin: 0;
    padding: 0
}

:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-check input[type="radio"] {
    border-radius: 50%
}

:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-check input[type="radio"]:checked {
    background-image: none;
    background-color: var(--form-radio-bg);
    box-shadow: inset 0 0 0 3px var(--form-radio-shadow)
}

:is(.form-light, .cf7_customize_white) .form-check :checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")
}

:is(.form-dark, .cf7_customize_black) .form-check :checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")
}

/* Submit button */
:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-btn,
:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .wpcf7-submit {
    background: var(--form-btn-bg);
    border: none;
    cursor: pointer;
    transition: all ease .3s;
    border-radius: 60px;
    color: var(--form-btn-c);
    height: 51px;
    width: 210px;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 25px;
    font-size: var(--tamano6-boldcta-font-size);
    font-weight: var(--tamano6-boldcta-font-weight);
    line-height: var(--tamano6-boldcta-line-height);
    letter-spacing: var(--tamano6-boldcta-letter-spacing);
    font-family: var(--tamano6-boldcta-font-family)
}

:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-btn:hover,
:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .wpcf7-submit:hover {
    background-color: var(--form-btn-hbg);
    color: var(--form-btn-hc)
}

/* Messages */
:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-msg,
:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .wpcf7-response-output {
    color: var(--form-msg-c);
    margin: 15px 0 0 0;
    padding: 10px 15px;
    border-radius: 3px;
    font-size: var(--tamano8-font-size);
    font-weight: var(--tamano8-font-weight);
    line-height: var(--tamano8-line-height);
    letter-spacing: var(--tamano8-letter-spacing);
    font-family: var(--tamano8-font-family)
}

:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-msg-ok {
    border-color: #46b450
}

:is(.form-light, .cf7_customize_white) .form-msg-ok {
    background: rgba(70, 180, 80, .1)
}

:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-msg-err {
    color: #dc3232;
    border-color: #dc3232
}

:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) form.sent .wpcf7-response-output {
    border-color: #46b450
}

:is(.form-light, .cf7_customize_white) form.sent .wpcf7-response-output {
    background: rgba(70, 180, 80, .1)
}

:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) form.failed .wpcf7-response-output,
:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) form.invalid .wpcf7-response-output,
:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) form.unaccepted .wpcf7-response-output {
    color: #dc3232;
    border-color: #dc3232
}

:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .wpcf7-not-valid-tip {
    color: #dc3232;
    margin-top: 5px;
    font-size: var(--tamano8-font-size);
    font-weight: var(--tamano8-font-weight);
    line-height: var(--tamano8-line-height);
    letter-spacing: var(--tamano8-letter-spacing);
    font-family: var(--tamano8-font-family)
}

:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .wpcf7-list-item {
    margin: 0
}

:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .wpcf7-file {
    display: none
}

:is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .wpcf7-spinner {
    position: absolute
}

/* ── Responsive ── */
@media(max-width:1200px) {
    :is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) label {
        font-size: var(--tamano-7-mediumcta-font-size-tablet)
    }

    :is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-msg,
    :is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .wpcf7-not-valid-tip,
    :is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .wpcf7-response-output {
        font-size: var(--tamano8-font-size-tablet)
    }

    :is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-field input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
    :is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-field textarea,
    :is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-field select {
        font-size: var(--tamano7-font-size-tablet)
    }

    :is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-btn,
    :is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .wpcf7-submit {
        font-size: var(--tamano6-boldcta-font-size-tablet)
    }
}

@media(max-width:768px) {

    .form-cols-2,
    .form-cols-3,
    .form-cols-4 {
        grid-template-columns: 1fr;
        gap: 0
    }

    :is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black).form-cols-2>.wpcf7>form,
    :is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black).form-cols-3>.wpcf7>form,
    :is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black).form-cols-4>.wpcf7>form {
        grid-template-columns: 1fr;
        gap: 0
    }

    :is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-split,
    :is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-split>.wpcf7>form {
        grid-template-columns: 1fr;
        gap: 0
    }

    :is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) label {
        font-size: var(--tamano-7-mediumcta-font-size-mobile)
    }

    :is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-field {
        margin-bottom: 18px
    }

    :is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-field input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
    :is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-field textarea,
    :is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-field select {
        font-size: calc(var(--tamano7-font-size-mobile) - 4px)
    }

    :is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-field textarea {
        max-height: 125px
    }

    :is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-msg,
    :is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .wpcf7-not-valid-tip,
    :is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .wpcf7-response-output {
        font-size: var(--tamano8-font-size-mobile)
    }

    :is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .wpcf7-not-valid-tip {
        margin-top: 7px
    }

    :is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-btn,
    :is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .wpcf7-submit {
        font-size: calc(var(--tamano7-font-size-mobile) - 2px);
        max-width: 131px;
        margin: 25px auto 0
    }
}

@media(max-width:480px) {

    :is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-field input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
    :is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-field textarea,
    :is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-field select {
        padding: 12px 18px
    }

    :is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .form-btn,
    :is(.form-light, .form-dark, .cf7_customize_white, .cf7_customize_black) .wpcf7-submit {
        width: 100%;
        max-width: 100%
    }
}