/* Autos Esquivel — banda inversa para "Vende tu auto" en el Home.
   Light mode = sección oscura. Dark mode = sección clara.
   La lógica, datos y envío al CRM permanecen en el componente original. */

.public-site-rebuild .ae-sell {
    --sell-bg: #08090a;
    --sell-panel: #0f1114;
    --sell-panel-soft: #15181c;
    --sell-ink: #f4f5f6;
    --sell-muted: #949aa3;
    --sell-line: #292d33;
    --sell-line-strong: #3b4149;
    --sell-accent: #f4f5f6;
    --sell-accent-contrast: #090a0b;
    --sell-shadow: 0 28px 86px rgba(0, 0, 0, .38);

    border-top: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color-scheme: dark;
}

html[data-theme="dark"] .public-site-rebuild .ae-sell {
    --sell-bg: #f5f5f2;
    --sell-panel: #ffffff;
    --sell-panel-soft: #ececea;
    --sell-ink: #101113;
    --sell-muted: #696d73;
    --sell-line: #d7d8da;
    --sell-line-strong: #b9bdc2;
    --sell-accent: #111316;
    --sell-accent-contrast: #ffffff;
    --sell-shadow: 0 24px 68px rgba(15, 16, 18, .11);

    border-top-color: rgba(15, 16, 18, .09);
    border-bottom-color: rgba(15, 16, 18, .09);
    color-scheme: light;
}

/* La retícula queda como textura editorial, no como una capa que ensucie el fondo. */
.public-site-rebuild .ae-sell::before {
    opacity: .12;
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .82) 18%, transparent 42%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .82) 18%, transparent 42%);
}

html[data-theme="dark"] .public-site-rebuild .ae-sell::before {
    opacity: .2;
}

/* Firma racing mínima en la entrada de la sección. */
.public-site-rebuild .ae-sell::after {
    width: 92px;
    height: 3px;
    border-radius: 999px;
    box-shadow: 0 0 18px color-mix(in srgb, var(--sell-accent) 18%, transparent);
}

/* Refuerza la sensación de bloque inverso sin convertirlo en una caja gigante. */
.public-site-rebuild .ae-sell__promise,
.public-site-rebuild .ae-sell__form-card,
.public-site-rebuild .ae-sell__summary,
.public-site-rebuild .ae-sell__success {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Los campos deben pertenecer visualmente al panel aun cuando el tema global sea el contrario. */
.public-site-rebuild .ae-sell__fields input,
.public-site-rebuild .ae-sell__fields select,
.public-site-rebuild .ae-sell__fields textarea {
    caret-color: var(--sell-ink);
}

.public-site-rebuild .ae-sell__fields select option {
    background: var(--sell-panel);
    color: var(--sell-ink);
}

/* CTA principal siempre utiliza el contraste opuesto a la banda. */
.public-site-rebuild .ae-sell__next,
.public-site-rebuild .ae-sell__submit,
.public-site-rebuild .ae-sell__success-actions a {
    box-shadow: 0 10px 26px color-mix(in srgb, var(--sell-ink) 10%, transparent);
}

.public-site-rebuild .ae-sell__next:hover,
.public-site-rebuild .ae-sell__submit:hover:not(:disabled),
.public-site-rebuild .ae-sell__success-actions a:hover {
    box-shadow: 0 15px 34px color-mix(in srgb, var(--sell-ink) 14%, transparent);
}

/* Focus visible consistente para teclado sobre ambos fondos. */
.public-site-rebuild .ae-sell button:focus-visible,
.public-site-rebuild .ae-sell a:focus-visible,
.public-site-rebuild .ae-sell input:focus-visible,
.public-site-rebuild .ae-sell select:focus-visible,
.public-site-rebuild .ae-sell textarea:focus-visible {
    outline: 2px solid var(--sell-ink);
    outline-offset: 3px;
}

/* Mantiene la separación visual con Financiamiento y el footer en pantallas estrechas. */
@media (max-width: 720px) {
    .public-site-rebuild .ae-sell {
        padding-top: 70px;
        padding-bottom: 84px;
    }

    .public-site-rebuild .ae-sell__promise,
    .public-site-rebuild .ae-sell__form-card,
    .public-site-rebuild .ae-sell__summary,
    .public-site-rebuild .ae-sell__success {
        box-shadow: 0 18px 46px color-mix(in srgb, var(--sell-ink) 8%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .public-site-rebuild .ae-sell__next,
    .public-site-rebuild .ae-sell__submit,
    .public-site-rebuild .ae-sell__success-actions a {
        transition: none;
    }
}