:root {
    --pa-content-max: 1480px;
    --pa-content-gutter: clamp(22px, 4vw, 72px);
}

/* Una sola alineación para las filas de contenido de todas las páginas. */
body .et-l--body .et_pb_section > .et_pb_row:not(:has(.pa-family-explorer)):not(:has(.pa-global-footer)) {
    width: min(var(--pa-content-max), calc(100% - (var(--pa-content-gutter) * 2))) !important;
    max-width: var(--pa-content-max) !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

body.single-product .pa-product-extra {
    width: 100% !important;
    max-width: 100% !important;
}

.pa-family-heading,
.pa-family-grid,
.pa-footer-top,
.pa-footer-grid,
.pa-footer-bottom {
    width: 100%;
    max-width: var(--pa-content-max);
    margin-right: auto;
    margin-left: auto;
}

/* Captcha matemático de Divi y botón en una sola línea. */
body .et_pb_contact_form_container .et_contact_bottom_container {
    display: flex !important;
    float: none !important;
    clear: both !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    width: 100% !important;
    margin: 10px 0 0 !important;
    text-align: right !important;
}

body .et_pb_contact_form_container .et_pb_contact_right {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    height: 44px !important;
    margin: 0 !important;
    color: #8c999f !important;
    line-height: 44px !important;
    white-space: nowrap;
}

body .et_pb_contact_form_container .et_pb_contact_captcha_question {
    color: #8c999f !important;
    font-size: 12px !important;
    line-height: 44px !important;
}

body .et_pb_contact_form_container input.et_pb_contact_captcha {
    width: 48px !important;
    min-width: 48px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 7px !important;
    border: 1px solid rgba(111, 230, 241, 0.25) !important;
    border-radius: 0 !important;
    background: #091015 !important;
    color: #fff !important;
    font-weight: 900 !important;
    text-align: center !important;
}

body .et_pb_contact_form_container button.et_pb_contact_submit {
    min-width: 176px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 24px !important;
    border: 1px solid #22c5d5 !important;
    border-radius: 0 !important;
    background: #22b9ca !important;
    color: #031014 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: 0.13em !important;
    text-transform: uppercase !important;
}

body .et_pb_contact_form_container button.et_pb_contact_submit:hover {
    border-color: #61e9f3 !important;
    background: #36d3e1 !important;
}

/* En Inicio, el formulario ocupa solamente la mitad derecha de la pantalla. */
body.home .et_pb_contact_form_container {
    width: min(50vw, 100%) !important;
    max-width: 50vw !important;
    margin-right: 0 !important;
    margin-left: auto !important;
}

/* Sustitución visual del nombre escrito por el logotipo oficial. */
.pa-footer-brand-replacement {
    display: block !important;
    width: 150px !important;
    max-width: 150px !important;
    height: auto !important;
    margin: 0 !important;
    object-fit: contain;
    object-position: left center;
}

@media (max-width: 767px) {
    :root { --pa-content-gutter: 15px; }

    body .et_pb_contact_form_container .et_contact_bottom_container {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
    }

    body .et_pb_contact_form_container button.et_pb_contact_submit {
        flex: 1 1 180px;
    }

    body.home .et_pb_contact_form_container {
        width: 100% !important;
        max-width: 100% !important;
    }
}
/* Flecha vectorial consistente: evita que ↗ se convierta en emoji en iOS/Android. */
.pa-ui-arrow {
    --pa-arrow-size: 14px;
    --pa-arrow-inset: 1px;
    position: relative;
    display: inline-block;
    width: var(--pa-arrow-size);
    height: var(--pa-arrow-size);
    flex: 0 0 var(--pa-arrow-size);
    color: currentColor;
    font-size: 0 !important;
    line-height: 0;
    vertical-align: middle;
}

.pa-ui-arrow::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--pa-arrow-size);
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: translate(-50%, -50%) rotate(-45deg);
}

.pa-ui-arrow::after {
    content: "";
    position: absolute;
    right: var(--pa-arrow-inset);
    top: var(--pa-arrow-inset);
    width: 6px;
    height: 6px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}