/* Wüst Software Landing — brand utilities + overrides */

:root {
    --landing-primary: #21349a;
    --landing-primary-light: #3d54c4;
    --landing-secondary: #F26B1F;
    --landing-secondary-dark: #D85A14;
    --landing-secondary-light: #FF8847;
}

html { scroll-behavior: smooth; scroll-padding-top: 80px; background-color: #ffffff !important; color: var(--landing-primary) !important; }

html, body,
html.dark, body.dark, .dark,
.dark html, .dark body {
    background-color: #ffffff !important;
    color: var(--landing-primary) !important;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Browser autofill — force light background */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: #18181b !important;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    transition: background-color 5000s ease-in-out 0s;
    caret-color: #18181b !important;
}

/* Force section bgs — defeat any cascading dark background from app.css */
section { background-color: inherit; }
section.bg-white { background-color: #ffffff !important; }
section.bg-gray-50, .bg-gray-50 { background-color: #f9fafb !important; }

/* Filament app.css overrides — these apply globally and break landing */
.fi-section, .fi-widget, .fi-card, .fi-fo-field-wrp, .fi-ta, .fi-in {
    background-color: transparent !important;
}

/* ─────────── Brand backgrounds ─────────── */
.bg-primary { background-color: var(--landing-primary) !important; }
.bg-primary-light { background-color: var(--landing-primary-light) !important; }
.bg-secondary { background-color: var(--landing-secondary) !important; }
.bg-secondary-dark { background-color: var(--landing-secondary-dark) !important; }
.bg-secondary-light { background-color: var(--landing-secondary-light) !important; }

/* Brand text */
.text-primary { color: var(--landing-primary) !important; }
.text-secondary { color: var(--landing-secondary) !important; }
.text-secondary-light { color: var(--landing-secondary-light) !important; }

/* Brand borders */
.border-primary { border-color: var(--landing-primary) !important; }
.border-secondary { border-color: var(--landing-secondary) !important; }

/* Hover variants */
.hover\:bg-primary:hover { background-color: var(--landing-primary) !important; }
.hover\:bg-primary-light:hover { background-color: var(--landing-primary-light) !important; }
.hover\:bg-secondary:hover { background-color: var(--landing-secondary) !important; }
.hover\:bg-secondary-dark:hover { background-color: var(--landing-secondary-dark) !important; }
.hover\:text-primary:hover { color: var(--landing-primary) !important; }
.hover\:text-secondary:hover { color: var(--landing-secondary) !important; }
.hover\:text-white:hover { color: #ffffff !important; }
.hover\:border-secondary:hover { border-color: var(--landing-secondary) !important; }
.focus\:border-secondary:focus { border-color: var(--landing-secondary) !important; }

/* Group hover */
.group:hover .group-hover\:bg-secondary { background-color: var(--landing-secondary) !important; }

/* Opacity variants */
.bg-secondary\/20 { background-color: rgba(242, 107, 31, 0.2) !important; }
.bg-secondary\/30 { background-color: rgba(242, 107, 31, 0.3) !important; }
.border-secondary\/30 { border-color: rgba(242, 107, 31, 0.3) !important; }
.text-secondary-light { color: var(--landing-secondary-light) !important; }
.focus\:ring-secondary\/20:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(242, 107, 31, 0.2) !important;
}

/* ─────────── Gradients (Tailwind v3 syntax fallback) ─────────── */
.bg-gradient-to-br.from-primary.via-primary.to-primary-light {
    background-image: linear-gradient(to bottom right, var(--landing-primary) 0%, var(--landing-primary) 50%, var(--landing-primary-light) 100%) !important;
}
.bg-gradient-to-br.from-primary.via-primary-light.to-primary {
    background-image: linear-gradient(to bottom right, var(--landing-primary), var(--landing-primary-light), var(--landing-primary)) !important;
}
.bg-gradient-to-br.from-primary.to-primary-light {
    background-image: linear-gradient(to bottom right, var(--landing-primary), var(--landing-primary-light)) !important;
}
.bg-gradient-to-br.from-secondary.to-secondary-dark {
    background-image: linear-gradient(to bottom right, var(--landing-secondary), var(--landing-secondary-dark)) !important;
}
.bg-gradient-to-b.from-gray-50.to-white {
    background-image: linear-gradient(to bottom, #f9fafb, #ffffff) !important;
}
.bg-gradient-to-r.from-secondary.via-secondary.to-secondary {
    background-image: linear-gradient(to right, var(--landing-secondary), var(--landing-secondary), var(--landing-secondary)) !important;
}

/* ─────────── Custom shadows ─────────── */
.shadow-soft { box-shadow: 0 10px 40px -10px rgba(33, 52, 154, 0.15) !important; }
.shadow-card { box-shadow: 0 4px 20px -2px rgba(33, 52, 154, 0.08) !important; }
.hover\:shadow-soft:hover { box-shadow: 0 10px 40px -10px rgba(33, 52, 154, 0.15) !important; }
.hover\:shadow-card:hover { box-shadow: 0 4px 20px -2px rgba(33, 52, 154, 0.08) !important; }

/* ─────────── Force Flux input labels visible (light variant) ─────────── */
[data-flux-label] { color: #27272a !important; }
[data-flux-heading] { color: var(--landing-primary) !important; }
[data-flux-subheading] { color: #71717a !important; }

/* Force Flux input borders (zinc-200 oklch too light on white) */
[data-flux-input] input,
[data-flux-input] select,
[data-flux-input] textarea,
[data-flux-input] [data-flux-control],
[data-flux-select-button],
button[data-flux-select-button] {
    border: 1px solid #d4d4d8 !important;
    border-bottom-color: #a1a1aa !important;
    background-color: #ffffff !important;
    color: #18181b !important;
}

[data-flux-input] input:focus,
[data-flux-input] select:focus,
[data-flux-input] textarea:focus,
[data-flux-input] [data-flux-control]:focus,
[data-flux-select-button]:focus {
    border-color: var(--landing-secondary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(242, 107, 31, 0.2) !important;
}

[data-flux-input]:focus-within {
    border-color: var(--landing-secondary) !important;
}

/* ─────────── Misc ─────────── */
summary::-webkit-details-marker { display: none; }
summary { list-style: none; }

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    will-change: opacity, transform;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

#header.scrolled { box-shadow: 0 2px 20px -5px rgba(33, 52, 154, 0.1); }

button[disabled] { opacity: 0.7; cursor: not-allowed; }

/* Feature cards hover lift */
.feature-card {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s !important;
}
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 50px -15px rgba(33, 52, 154, 0.18) !important;
}

/* Range slider (calculadora ROI) */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    outline: none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    background: var(--landing-secondary);
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: var(--landing-secondary);
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid #fff;
}

/* Sticky mobile CTA padding compensation */
@media (max-width: 1023px) {
    body { padding-bottom: 76px; }
}

/* x-cloak */
[x-cloak] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
}