/* ============================================================
   landing-tokens.css
   Tokens do DoceFinance Design System (paginas publicas).
   Referencia: docs/design-system/DESIGN.md
   Usado apenas pelas paginas em Components/Pages/Landing/.

   As cores sao triplos RGB (ex.: "50 91 179") para que tanto as
   classes .df-* como os utilitarios Tailwind (rgb(var(--df-x) / <alpha>))
   reajam a [data-theme="dark"].
   ============================================================ */

/* ── Reset minimo ──────────────────────────────────────────────
   O Tailwind tem o preflight desligado e as paginas de marketing ja
   nao carregam o MudBlazor/app.css — sem isto o box-sizing volta a
   content-box (conteudo transborda no mobile) e o body ganha a
   margem default de 8px (moldura branca a volta de tudo). */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
/* Sem preflight, uma classe de display (tw-grid, tw-flex, ...) no mesmo
   elemento que o atributo `hidden` ganha ao `hidden` — o elemento fica
   visivel na mesma. Repoe a prioridade do atributo nativo. */
[hidden] { display: none !important; }
body.marketing-page {
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body.marketing-page img,
body.marketing-page svg,
body.marketing-page video { max-width: 100%; }
/* Foco programatico (FocusOnNavigate no <h1>) nao deve mostrar contorno */
body.marketing-page :focus:not(:focus-visible) { outline: none; }
body.marketing-page [tabindex="-1"]:focus { outline: none; }

/* Scrollbar fina (o "grosso" e o estilo por omissao do Windows/Chrome no desktop;
   mobile ja usa uma scrollbar fina/overlay por omissao do proprio SO). */
html:has(body.marketing-page) {
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--df-outline) / .5) transparent;
}
body.marketing-page::-webkit-scrollbar { width: 10px; height: 10px; }
body.marketing-page::-webkit-scrollbar-track { background: transparent; }
body.marketing-page::-webkit-scrollbar-thumb {
    background-color: rgb(var(--df-outline) / .45);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
body.marketing-page::-webkit-scrollbar-thumb:hover {
    background-color: rgb(var(--df-outline) / .7);
}

:root {
    /* ── Cor: primario / secundario / terciario ── */
    --df-primary: 16 66 154;
    --df-on-primary: 255 255 255;
    --df-primary-container: 50 91 179;
    --df-on-primary-container: 205 217 255;
    --df-secondary: 70 72 212;
    --df-secondary-container: 96 99 238;
    --df-tertiary: 140 0 89;
    --df-tertiary-container: 172 38 114;
    --df-on-tertiary-container: 255 203 223;

    /* ── Assinatura de marca (marketing) ── */
    --df-accent: 236 91 166;   /* rosa — so nas paginas publicas */
    --df-indigo: 99 102 241;   /* so em gradiente com o azul */
    --df-amber: 245 158 11;    /* aviso semantico */

    /* ── Superficies ── */
    --df-surface: 249 249 255;
    --df-surface-lowest: 255 255 255;
    --df-surface-container-low: 241 243 255;
    --df-surface-container: 233 237 255;
    --df-surface-container-high: 225 232 253;
    --df-surface-container-highest: 220 226 247;

    /* ── Texto / contornos ── */
    --df-on-surface: 20 27 43;
    --df-on-surface-variant: 67 70 82;
    --df-outline: 116 119 131;
    --df-outline-variant: 196 198 212;

    /* ── Superficie inversa ── */
    --df-inverse-surface: 41 48 64;
    --df-inverse-on-surface: 237 240 255;

    /* ── Rodape: sempre escuro nos dois temas (NAO redefinir nos blocos dark) ── */
    --df-footer-bg: 27 32 46;
    --df-footer-fg: 237 240 255;

    /* ── Semantico ── */
    --df-error: 186 26 26;
    --df-error-container: 255 218 214;

    /* ── Forma ── */
    --df-radius-sm: .25rem;
    --df-radius: .5rem;
    --df-radius-md: .75rem;
    --df-radius-lg: 1rem;
    --df-radius-xl: 1.5rem;
    --df-radius-full: 9999px;

    /* ── Elevacao ── */
    --df-shadow-1: 0 4px 6px -1px rgba(0, 0, 0, .05), 0 2px 4px -2px rgba(0, 0, 0, .05);
    --df-shadow-2: 0 10px 15px -3px rgba(0, 0, 0, .08);

    /* ── Layout ── */
    --df-container-max: 1280px;
}

/* ── Tema escuro (paleta derivada — o DESIGN.md so fornece a clara) ── */
:root[data-theme="dark"] {
    --df-primary: 177 197 255;
    --df-on-primary: 0 25 71;
    --df-primary-container: 77 127 212;
    --df-on-primary-container: 218 226 255;
    --df-secondary: 192 193 255;
    --df-secondary-container: 47 46 190;
    --df-tertiary: 255 175 209;
    --df-tertiary-container: 139 0 89;
    --df-on-tertiary-container: 255 216 230;

    --df-accent: 255 142 199;

    --df-surface: 18 18 18;
    --df-surface-lowest: 26 26 31;
    --df-surface-container-low: 30 30 36;
    --df-surface-container: 35 35 43;
    --df-surface-container-high: 42 42 51;
    --df-surface-container-highest: 50 50 61;

    --df-on-surface: 237 240 255;
    --df-on-surface-variant: 196 198 212;
    --df-outline: 139 141 153;
    --df-outline-variant: 67 69 79;

    --df-inverse-surface: 237 240 255;
    --df-inverse-on-surface: 20 27 43;

    --df-error: 255 180 171;
    --df-error-container: 147 0 10;

    --df-shadow-1: 0 4px 6px -1px rgba(0, 0, 0, .35), 0 2px 4px -2px rgba(0, 0, 0, .35);
    --df-shadow-2: 0 10px 15px -3px rgba(0, 0, 0, .45);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --df-primary: 177 197 255;
        --df-on-primary: 0 25 71;
        --df-primary-container: 77 127 212;
        --df-on-primary-container: 218 226 255;
        --df-secondary: 192 193 255;
        --df-secondary-container: 47 46 190;
        --df-tertiary: 255 175 209;
        --df-tertiary-container: 139 0 89;
        --df-on-tertiary-container: 255 216 230;

        --df-accent: 255 142 199;

        --df-surface: 18 18 18;
        --df-surface-lowest: 26 26 31;
        --df-surface-container-low: 30 30 36;
        --df-surface-container: 35 35 43;
        --df-surface-container-high: 42 42 51;
        --df-surface-container-highest: 50 50 61;

        --df-on-surface: 237 240 255;
        --df-on-surface-variant: 196 198 212;
        --df-outline: 139 141 153;
        --df-outline-variant: 67 69 79;

        --df-inverse-surface: 237 240 255;
        --df-inverse-on-surface: 20 27 43;

        --df-error: 255 180 171;
        --df-error-container: 147 0 10;

        --df-shadow-1: 0 4px 6px -1px rgba(0, 0, 0, .35), 0 2px 4px -2px rgba(0, 0, 0, .35);
        --df-shadow-2: 0 10px 15px -3px rgba(0, 0, 0, .45);
    }
}

/* Helpers internos: rgb() a partir dos triplos */
:root {
    --df-c-primary: rgb(var(--df-primary));
    --df-c-primary-container: rgb(var(--df-primary-container));
    --df-c-indigo: rgb(var(--df-indigo));
    --df-c-accent: rgb(var(--df-accent));
    --df-c-surface: rgb(var(--df-surface));
    --df-c-surface-lowest: rgb(var(--df-surface-lowest));
    --df-c-surface-container-highest: rgb(var(--df-surface-container-highest));
    --df-c-on-surface: rgb(var(--df-on-surface));
    --df-c-on-surface-variant: rgb(var(--df-on-surface-variant));
    --df-c-outline-variant: rgb(var(--df-outline-variant));
    --df-c-inverse-surface: rgb(var(--df-inverse-surface));
    --df-c-inverse-on-surface: rgb(var(--df-inverse-on-surface));

    /* Timing (antes vinha do extinto landing.css) */
    --lp-ease:   0.22s cubic-bezier(.4, 0, .2, 1);
    --lp-spring: 0.35s cubic-bezier(.34, 1.56, .64, 1);
}

/* ============================================================
   Classes de componente (o que o Tailwind nao da de forma limpa)
   ============================================================ */

.df-gradient-hero {
    background: linear-gradient(135deg, var(--df-c-primary-container), var(--df-c-indigo));
}

/* Foto de fundo do hero (confeiteira a decorar um bolo). Um scrim por
   cima mantem o texto legivel a esquerda e deixa a foto respirar a direita.
   Adapta-se ao tema via rgb(var(--df-surface) / alpha). */
.df-hero-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url('/assets/images/landing/pastry-hands.webp') right center / cover no-repeat;
    filter: brightness(.86) saturate(1.05);
}

/* Dois layers: veu da superficie (legibilidade do texto a esquerda) +
   tinta slate (escurece a foto, sobretudo a direita). */
.df-hero-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            100deg,
            rgb(var(--df-surface) / .93) 0%,
            rgb(var(--df-surface) / .78) 42%,
            rgb(var(--df-surface) / .24) 72%,
            rgb(var(--df-surface) / .06) 100%
        ),
        linear-gradient(
            100deg,
            transparent 45%,
            rgb(15 23 42 / .16) 74%,
            rgb(15 23 42 / .34) 100%
        );
}

@media (max-width: 1024px) {
    .df-hero-photo { background-position: 72% center; }
    .df-hero-photo::after {
        background: linear-gradient(
            180deg,
            rgb(var(--df-surface) / .90) 0%,
            rgb(var(--df-surface) / .78) 45%,
            rgb(var(--df-surface) / .93) 100%
        );
    }
}

/* Bloco decorativo do hero: retangulo diagonal encostado a direita que
   esbate para o df-ambient-bg em vez de cortar com uma aresta dura. */
.df-hero-accent {
    position: absolute;
    inset: 0 0 0 auto;
    width: 42%;
    background: linear-gradient(135deg, var(--df-c-primary-container), var(--df-c-indigo));
    opacity: .08;
    pointer-events: none;
    transform: skewX(-12deg) translateX(12%);
    transform-origin: top right;
    border-bottom-left-radius: 80px;
    -webkit-mask-image: linear-gradient(to left, #000 55%, transparent);
            mask-image: linear-gradient(to left, #000 55%, transparent);
}

@media (max-width: 1024px) {
    .df-hero-accent { width: 60%; opacity: .06; }
}

.df-text-gradient {
    background: linear-gradient(135deg, #325bb3, #6366f1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Variante rosa (assinatura de marketing) — ex.: "preço certo" no hero */
.df-text-gradient--accent {
    background: linear-gradient(135deg, rgb(var(--df-accent)), rgb(var(--df-tertiary-container)));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Compatibilidade para WebKit (Safari, Chrome) */
    -webkit-text-fill-color: transparent;
}

.df-border-premium {
    background: linear-gradient(90deg, #325bb3, #6366f1);
    height: 2px;
}

.df-glass {
    background: rgb(var(--df-surface-lowest) / .78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--df-c-outline-variant);
    box-shadow: var(--df-shadow-1);
}

.df-shadow-1 { box-shadow: var(--df-shadow-1); }
.df-shadow-2 { box-shadow: var(--df-shadow-2); }

/* Gradiente estatico: animar background-position custava um repaint full-screen
   por frame (sem composicao no GPU). O movimento quase nao se notava. */
.df-ambient-bg {
    background: linear-gradient(-45deg, var(--df-c-surface), rgb(var(--df-surface-container-low)), rgb(var(--df-surface-container-high)), var(--df-c-surface));
}

.df-accent { color: var(--df-c-accent); }

/* FAQ com <details>/<summary> (sem JS) */
.df-faq-chevron { transition: transform var(--lp-ease); flex-shrink: 0; }
details[open] .df-faq-chevron { transform: rotate(180deg); }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

/* ── Prose (paginas legais) ── */
.df-prose > :first-child { margin-top: 0; }
.df-prose h2 {
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    color: var(--df-c-on-surface);
    margin: 3rem 0 1rem;
    padding-bottom: .5rem;
    position: relative;
    scroll-margin-top: 96px;
}
.df-prose h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    border-radius: 9999px;
    background: var(--df-c-accent);
}
.df-prose p,
.df-prose ul {
    font-size: 16px;
    line-height: 28px;
    color: var(--df-c-on-surface-variant);
    margin-bottom: 1.5rem;
}
.df-prose ul { list-style: none; padding-left: 0; }
.df-prose li { position: relative; padding-left: 1.5rem; margin-bottom: .5rem; }
.df-prose li::before {
    content: '\2022';
    position: absolute;
    left: 0;
    color: var(--df-c-accent);
    font-weight: bold;
}

/* ============================================================
   Scaffolding partilhado das paginas publicas
   ============================================================ */

.df-page {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--df-c-on-surface);
    background: var(--df-c-surface);
}

.df-container {
    width: 100%;
    max-width: var(--df-container-max);
    margin-inline: auto;
    padding-inline: 1rem;
}
@media (min-width: 768px) {
    .df-container { padding-inline: 2.5rem; }
}

.df-section { padding-block: clamp(3rem, 8vw, 6rem); }

/* ── Navbar ── */
.df-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgb(var(--df-surface) / .85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgb(var(--df-outline-variant) / .45);
    transition: box-shadow .2s ease, background .2s ease;
}
.df-nav--scrolled {
    box-shadow: var(--df-shadow-1);
    background: rgb(var(--df-surface) / .96);
}
.df-nav__link {
    color: var(--df-c-on-surface-variant);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color .15s ease;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.df-nav__link:hover,
.df-nav__link.df-nav__link--active {
    color: var(--df-c-primary-container);
}

/* Botao de tema da navbar */
.df-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--df-radius-full);
    border: 1px solid rgb(var(--df-outline-variant) / .5);
    background: transparent;
    color: var(--df-c-on-surface-variant);
    cursor: pointer;
    font-size: 1rem;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.df-theme-toggle:hover {
    color: var(--df-c-primary-container);
    border-color: rgb(var(--df-primary-container) / .4);
    background: rgb(var(--df-primary-container) / .08);
}

/* ── Botoes ── */
.df-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    padding: .75rem 1.25rem;
    border-radius: var(--df-radius);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: box-shadow .2s ease, background .2s ease, transform .1s ease, border-color .2s ease;
}
.df-btn--lg { padding: .95rem 1.6rem; font-size: 15px; }
.df-btn--primary { background: var(--df-c-primary-container); color: #fff; }
.df-btn--primary:hover { background: var(--df-c-primary); color: #fff; }
.df-btn--cta {
    background: linear-gradient(135deg, var(--df-c-primary-container), var(--df-c-indigo));
    color: #fff;
    border-radius: var(--df-radius-lg);
}
.df-btn--cta:hover { box-shadow: var(--df-shadow-2); color: #fff; }
.df-btn--ghost {
    background: rgb(var(--df-surface-lowest) / .6);
    color: var(--df-c-primary-container);
    border-color: rgb(var(--df-primary-container) / .3);
}
.df-btn--ghost:hover { background: rgb(var(--df-primary-container) / .08); }
.df-btn--outline {
    background: transparent;
    color: var(--df-c-primary-container);
    border-color: rgb(var(--df-primary-container) / .25);
}
.df-btn--outline:hover { background: rgb(var(--df-primary-container) / .08); }

/* ── Cards / chips ── */
.df-card {
    background: var(--df-c-surface-lowest);
    border: 1px solid rgb(var(--df-outline-variant) / .4);
    border-radius: var(--df-radius-lg);
    box-shadow: var(--df-shadow-1);
    color: var(--df-c-on-surface);
}

/* Cartoes de preco: cresce ao passar o rato / focar, encolhe ligeiramente ao clicar. */
.df-card--interactive {
    transition: transform .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s ease;
}
.df-card--interactive:hover,
.df-card--interactive:focus-within {
    transform: scale(1.03);
    box-shadow: var(--df-shadow-2);
}
.df-card--interactive:active { transform: scale(1.01); }
@media (prefers-reduced-motion: reduce) {
    .df-card--interactive { transition: none; }
    .df-card--interactive:hover,
    .df-card--interactive:focus-within,
    .df-card--interactive:active { transform: none; }
}
.df-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    padding: .35rem .75rem;
    border-radius: var(--df-radius-full);
    background: rgb(var(--df-primary-container) / .1);
    color: var(--df-c-primary-container);
}
.df-badge--accent {
    background: rgb(var(--df-accent) / .12);
    color: var(--df-c-accent);
}

/* ── Campos de formulario (todos iguais: input / select / textarea) ── */
.df-field {
    display: block;
    width: 100%;
    padding: .625rem .875rem;
    font: inherit;
    line-height: 1.5;
    color: var(--df-c-on-surface);
    background-color: var(--df-c-surface);
    border: 1px solid rgb(var(--df-outline-variant) / .7);
    border-radius: var(--df-radius);
    appearance: none;
    -webkit-appearance: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.df-field::placeholder { color: rgb(var(--df-on-surface-variant) / .65); }
.df-field:focus {
    outline: none;
    border-color: var(--df-c-primary-container);
    box-shadow: 0 0 0 3px rgb(var(--df-primary-container) / .15);
}
select.df-field {
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m6 8 4 4 4-4' stroke='%23777' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right .75rem center;
    background-repeat: no-repeat;
    background-size: 1.15em;
}
textarea.df-field { min-height: 8rem; resize: vertical; }

/* ── Footer ── */
.df-footer {
    background: rgb(var(--df-footer-bg));
    color: rgb(var(--df-footer-fg) / .82);
}
.df-footer a {
    color: rgb(var(--df-footer-fg) / .72);
    text-decoration: none;
    transition: color .15s ease;
}
.df-footer a:hover { color: rgb(var(--df-footer-fg)); }
.df-footer__title {
    color: rgb(var(--df-footer-fg));
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

/* ── Browser mock frame ── */
.df-frame {
    border-radius: var(--df-radius-lg);
    overflow: hidden;
    border: 1px solid rgb(var(--df-outline-variant) / .5);
    background: var(--df-c-surface-lowest);
    box-shadow: var(--df-shadow-2);
}
.df-frame__bar {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .6rem .9rem;
    background: var(--df-c-surface-container-highest);
    border-bottom: 1px solid rgb(var(--df-outline-variant) / .4);
}
.df-frame__dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--df-c-outline-variant); }
.df-frame img { display: block; width: 100%; height: auto; }

/* ── Facade de video (YouTube) ── */
.lp-video {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    border-radius: var(--df-radius-lg);
    overflow: hidden;
    border: 1px solid rgb(var(--df-outline-variant) / .5);
    box-shadow: var(--df-shadow-2);
    background: rgb(var(--df-surface-container));
    cursor: pointer;
    text-decoration: none;
}
.lp-video > img,
.lp-video > iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.lp-video > img { object-fit: cover; }
.lp-video__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(0 0 0 / .32);
    transition: background .2s ease;
}
.lp-video:hover .lp-video__play { background: rgb(0 0 0 / .18); }
.lp-video__play::before {
    content: "";
    position: absolute;
    width: clamp(48px, 12vw, 68px);
    height: clamp(48px, 12vw, 68px);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--df-c-primary-container), var(--df-c-indigo));
    box-shadow: 0 8px 24px rgb(15 23 42 / .35);
}
.lp-video__play i {
    position: relative;
    color: #fff;
    font-size: clamp(1.25rem, 5vw, 1.9rem);
    margin-left: .1em;
}

/* ============================================================
   Alinhamento das paginas ainda em landing.css (lp-*) ao novo shell.
   Carregado depois de landing.css, por isso ganha na cascata.
   ============================================================ */

:root {
    /* Antes 'Fraunces' (ja nao carregada) -> caia em Georgia serif.
       Agora Inter, coerente com o resto das paginas publicas. */
    --lp-serif: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --lp-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* A nova .df-nav e sticky (nao fixed) — o offset de 66px deixava um vazio no topo. */
.lp-subpage { padding-top: 0; }

/* Acento das sub-paginas alinhado ao token da marca. */
.lp-subpage__hero h1 { letter-spacing: -.02em; }

/* ── Reveal on scroll (JS: window.landingReveal em interop.js) ── */
.lp-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.5, 0, 0, 1), transform .7s cubic-bezier(.5, 0, 0, 1);
}
.lp-reveal--visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .lp-reveal { opacity: 1; transform: none; transition: none; }
}

/* Sem JavaScript (ou se o landing-public.js falhar) o conteudo tem de aparecer na mesma. */
@media (scripting: none) {
    .lp-reveal { opacity: 1 !important; transform: none !important; }
}

/* backdrop-filter e caro em mobile (repaint por frame no scroll com a nav sticky);
   abaixo de 768px cai para fundo solido. */
@media (max-width: 767px) {
    .df-nav {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgb(var(--df-surface) / .98);
    }
    .df-glass {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgb(var(--df-surface-lowest) / .96);
    }
}