/* ============================================================
   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(2.5rem, 5vw, 4rem); }

/* ── 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);
}

/* ── Menu do telemóvel ── */
/* Botão: três linhas que se transformam num X. */
.df-burger {
    align-items: center; background: transparent; border: 1px solid rgb(var(--df-outline-variant) / .6);
    border-radius: 999px; cursor: pointer; display: inline-flex; flex-direction: column; gap: 5px;
    height: 40px; justify-content: center; padding: 0; width: 40px;
    transition: background .2s ease, border-color .2s ease;
}
.df-burger:hover { background: rgb(var(--df-primary-container) / .08); }
.df-burger__linha {
    background: var(--df-c-primary-container); border-radius: 2px; display: block; height: 2px; width: 18px;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
}
.df-burger[aria-expanded="true"] { background: rgb(var(--df-primary-container) / .1); border-color: transparent; }
.df-burger[aria-expanded="true"] .df-burger__linha:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.df-burger[aria-expanded="true"] .df-burger__linha:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.df-burger[aria-expanded="true"] .df-burger__linha:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Página bloqueada enquanto o menu está aberto. */
html.df-menu-aberto, html.df-menu-aberto body { overflow: hidden; }
html.df-menu-aberto .lp-back-top { opacity: 0 !important; pointer-events: none !important; }

/* Fechado: invisível e inerte; a visibilidade só muda no fim da transição (fecho suave). */
/* Fixo ao ecrã, logo abaixo da barra (o JS mede a barra ao abrir: --df-mmenu-topo). */
.df-mmenu { left: 0; pointer-events: none; position: fixed; right: 0; top: var(--df-mmenu-topo, 72px); visibility: hidden; transition: visibility 0s linear .35s; }
.df-mmenu[data-open] { pointer-events: auto; visibility: visible; transition-delay: 0s; }

.df-mmenu__fundo {
    background: rgb(var(--df-inverse-surface) / .35); height: 100dvh; left: 0; opacity: 0; position: absolute; right: 0; top: 0;
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    transition: opacity .3s ease;
}
.df-mmenu[data-open] .df-mmenu__fundo { opacity: 1; }

.df-mmenu__painel {
    background: var(--df-c-surface-lowest); border-bottom: 1px solid rgb(var(--df-outline-variant) / .5);
    border-radius: 0 0 var(--df-radius-xl) var(--df-radius-xl); box-shadow: var(--df-shadow-2);
    max-height: calc(100dvh - var(--df-mmenu-topo, 72px)); opacity: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: .75rem 1rem 1.25rem; position: relative;
    transform: translateY(-12px); transform-origin: top center;
    transition: opacity .25s ease, transform .35s cubic-bezier(.2, .9, .3, 1);
}
.df-mmenu[data-open] .df-mmenu__painel { opacity: 1; transform: none; }

.df-mmenu__lista { display: flex; flex-direction: column; gap: .25rem; list-style: none; margin: 0; padding: 0; }
/* Entrada escalonada: cada linha aparece um pouco depois da anterior (--i = posição). */
.df-mmenu__lista > li,
.df-mmenu__acoes {
    opacity: 0; transform: translateY(-6px);
    transition: opacity .25s ease, transform .3s cubic-bezier(.2, .9, .3, 1);
}
.df-mmenu[data-open] .df-mmenu__lista > li,
.df-mmenu[data-open] .df-mmenu__acoes {
    opacity: 1; transform: none; transition-delay: calc(60ms + var(--i, 0) * 35ms);
}

.df-mmenu__link {
    align-items: center; border-radius: var(--df-radius-md); color: var(--df-c-on-surface); display: flex;
    font-size: 15px; font-weight: 500; gap: .85rem; padding: .7rem .75rem; text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.df-mmenu__link:hover,
.df-mmenu__link:focus-visible { background: rgb(var(--df-primary-container) / .07); }
.df-mmenu__icone {
    align-items: center; background: rgb(var(--df-primary-container) / .09); border-radius: 10px;
    color: var(--df-c-primary-container); display: inline-flex; flex-shrink: 0; font-size: 1rem; height: 36px;
    justify-content: center; width: 36px;
}
.df-mmenu__seta { color: var(--df-c-on-surface-variant); font-size: .8rem; opacity: .6; }
.df-mmenu__link--ativo { background: rgb(var(--df-primary-container) / .1); color: var(--df-c-primary-container); font-weight: 600; }
.df-mmenu__link--ativo .df-mmenu__icone { background: var(--df-c-primary-container); color: #fff; }

.df-mmenu__acoes {
    border-top: 1px solid rgb(var(--df-outline-variant) / .5); display: grid; gap: .6rem;
    grid-template-columns: 1fr 1fr; margin-top: .75rem; padding-top: 1rem;
}
.df-mmenu__acoes .df-btn { justify-content: center; width: 100%; }

@media (prefers-reduced-motion: reduce) {
    .df-burger__linha, .df-mmenu, .df-mmenu__fundo, .df-mmenu__painel,
    .df-mmenu__lista > li, .df-mmenu__acoes { transition: none !important; }
}

/* 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: .8rem 1.35rem; font-size: 15px; }
@media (min-width: 640px) { .df-btn--lg { white-space: nowrap; } }
.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) / .4);
}
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);
    }
}

/* ============================================================
   Revisao Web Interface Guidelines (acessibilidade / toque / tema)
   ============================================================ */

/* Controlos nativos e scrollbars acompanham o tema da app */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }

/* Titulos: quebras de linha equilibradas */
body.marketing-page h1,
body.marketing-page h2,
body.marketing-page h3 { text-wrap: balance; }

/* Sem atraso de duplo-toque em controlos */
body.marketing-page a,
body.marketing-page button,
body.marketing-page summary,
body.marketing-page input,
body.marketing-page select,
body.marketing-page textarea { touch-action: manipulation; }

/* Ancoras nao ficam tapadas pela navbar fixa */
body.marketing-page [id] { scroll-margin-top: 88px; }

/* Foco visivel consistente (teclado) */
.df-btn:focus-visible,
.df-nav__link:focus-visible,
.df-theme-toggle:focus-visible,
.df-footer a:focus-visible,
.lp-back-top:focus-visible,
.lp-cf:focus-visible,
.lp-cf__dot:focus-visible,
.lp-video:focus-visible,
[data-nav-toggle]:focus-visible,
details > summary:focus-visible {
    outline: 2px solid var(--df-c-primary-container);
    outline-offset: 2px;
    border-radius: 6px;
}
.df-gradient-hero .df-btn:focus-visible { outline-color: #fff; }
.lp-lead-input:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Texto so para leitores de ecra + skip link */
.df-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.df-skip-link {
    position: fixed;
    top: 8px; left: 8px;
    z-index: 2000;
    padding: .625rem 1rem;
    border-radius: 8px;
    background: var(--df-c-primary-container);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-200%);
}
.df-skip-link:focus { transform: translateY(0); }

/* Botao desabilitado enquanto o formulario e enviado */
button[disabled][data-submitting] { opacity: .75; cursor: progress; }

/* ── Landing: calculadora rápida, listas de pilares, fluxo ── */
.lp-qcalc { display: grid; gap: 1.5rem; max-width: 60rem; margin: 0 auto; }
@media (min-width: 900px) { .lp-qcalc { grid-template-columns: 3fr 2fr; align-items: start; } }
.lp-qcalc__form, .lp-qcalc__result { padding: 1.5rem; }
.lp-qcalc__grid { display: grid; gap: 1rem; }
@media (min-width: 560px) { .lp-qcalc__grid { grid-template-columns: 1fr 1fr; } .lp-qcalc__field:first-child { grid-column: 1 / -1; } }
.lp-qcalc__field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.lp-qcalc__field label { font-size: .8125rem; font-weight: 600; color: rgb(var(--df-on-surface-variant)); }
.lp-qcalc__field input {
    width: 100%; min-height: 2.75rem; padding: .55rem .75rem; font: inherit; font-size: 1rem;
    color: rgb(var(--df-on-surface)); background: rgb(var(--df-surface-lowest));
    border: 1px solid rgb(var(--df-outline)); border-radius: var(--df-radius);
}
.lp-qcalc__field input[aria-invalid="true"] { border-color: rgb(var(--df-error)); }
.lp-qcalc__aviso { font-size: .8125rem; color: rgb(var(--df-error)); }
.lp-qcalc__aviso[hidden] { display: none; }
.lp-qcalc__field input:focus-visible { outline: 2px solid rgb(var(--df-primary-container)); outline-offset: 1px; }
.lp-qcalc__nota { margin: 1rem 0 0; font-size: .875rem; color: rgb(var(--df-on-surface-variant)); }
.lp-qcalc__nota a { color: rgb(var(--df-accent)); font-weight: 600; }
.lp-qcalc__label { display: block; font-size: .875rem; color: rgb(var(--df-on-surface-variant)); }
.lp-qcalc__price { display: block; margin: .25rem 0 1rem; font-size: 2rem; line-height: 1.1; color: rgb(var(--df-primary-container)); }
.lp-qcalc__dl { margin: 0; display: grid; gap: .5rem; }
.lp-qcalc__dl > div { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; }
.lp-qcalc__dl dt { color: rgb(var(--df-on-surface-variant)); }
.lp-qcalc__dl dd { margin: 0; font-weight: 600; color: rgb(var(--df-on-surface)); }
.lp-qcalc__next { max-width: 60rem; margin: 2rem auto 0; text-align: center; }
.lp-qcalc__next[hidden] { display: none; }

.lp-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.lp-checks li { position: relative; padding-left: 1.5rem; font-size: .9375rem; color: rgb(var(--df-on-surface-variant)); }
.lp-checks li::before {
    content: "\F26A"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: 0;
    color: rgb(var(--df-accent));
}

.lp-flow {
    list-style: none; margin: 2.5rem 0 0; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
}
.lp-flow li {
    padding: .4rem .9rem; border-radius: 999px; font-weight: 600; font-size: .9rem;
    color: rgb(var(--df-primary-container)); background: rgb(var(--df-primary-container) / .1);
}
.lp-flow li + li::before { content: "→"; margin-right: .6rem; color: rgb(var(--df-accent)); }

.lp-btn-onhero { color: #fff; border: 1px solid rgb(255 255 255 / .6); background: transparent; }
.lp-btn-onhero:hover { background: rgb(255 255 255 / .12); }

.lp-acoes { max-width: 52rem; margin-left: auto; margin-right: auto; padding: 1rem 1.25rem; }
.lp-acoes summary { cursor: pointer; font-weight: 600; color: rgb(var(--df-on-surface)); }
.lp-acoes p { margin: .75rem 0 0; font-size: .9375rem; color: rgb(var(--df-on-surface-variant)); }

/* ── Planos (landing e /precos, gerados do modelo de planos) ──
   Só tokens do tema (--df-*), que trocam em [data-theme="dark"] e em
   prefers-color-scheme: dark. Grelha 1 → 2 → 4 colunas; a tabela
   comparativa rola por dentro do seu contentor, nunca a página. */
.lp-planos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: stretch; }
@media (min-width: 768px) { .lp-planos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .lp-planos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.lp-plano { position: relative; display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem; min-width: 0; }
.lp-plano--destaque { border-color: rgb(var(--df-primary-container)); box-shadow: var(--df-shadow-2); }
.lp-plano__selo {
    position: absolute; top: -.75rem; left: 50%; transform: translateX(-50%);
    padding: .2rem .75rem; border-radius: var(--df-radius-full); white-space: nowrap;
    font-size: .75rem; font-weight: 700;
    /* Par de contraste do tema (primary / on-primary), trocado em claro e escuro. */
    color: rgb(var(--df-on-primary));
    background: rgb(var(--df-primary));
}
.lp-plano__nome { margin: 0; display: flex; align-items: center; gap: .5rem; font-size: 1.125rem; font-weight: 700; color: rgb(var(--df-on-surface)); }
.lp-plano__nome i { color: rgb(var(--df-primary-container)); }
.lp-plano__preco { margin: 0; font-size: 1.75rem; line-height: 1.15; font-weight: 800; color: rgb(var(--df-on-surface)); overflow-wrap: anywhere; }
.lp-plano--destaque .lp-plano__preco { color: rgb(var(--df-primary-container)); }
.lp-plano__nota { margin: -.4rem 0 0; font-size: .8125rem; color: rgb(var(--df-on-surface-variant)); }
.lp-plano__mensagem { margin: 0; font-size: .9375rem; font-weight: 600; color: rgb(var(--df-on-surface)); }
.lp-plano__destaques { flex: 1 1 auto; align-content: start; }
.lp-plano__limite {
    margin: 0; display: flex; gap: .5rem; align-items: flex-start; padding: .65rem .75rem;
    border-radius: var(--df-radius-md); font-size: .875rem; font-weight: 600;
    color: rgb(var(--df-on-surface)); background: rgb(var(--df-primary-container) / .1);
}
.lp-plano__limite i { color: rgb(var(--df-accent)); margin-top: .1rem; }
.lp-plano__ideal { margin: 0; font-size: .8125rem; font-style: italic; color: rgb(var(--df-on-surface-variant)); }
.lp-plano__cta { width: 100%; margin-top: .25rem; }

.lp-gratis { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; max-width: 60rem; margin: 0 auto; }
@media (min-width: 768px) { .lp-gratis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lp-gratis__bloco { padding: 1.5rem; min-width: 0; }
.lp-gratis__bloco--livre { border-color: rgb(var(--df-accent) / .5); }
.lp-gratis__bloco p { margin: 0; font-size: .9375rem; color: rgb(var(--df-on-surface-variant)); }
.lp-gratis__bloco a { color: rgb(var(--df-primary-container)); font-weight: 600; }
.lp-gratis__titulo { margin: 0 0 .75rem; display: flex; gap: .5rem; align-items: center; font-size: 1.125rem; font-weight: 700; color: rgb(var(--df-on-surface)); }
.lp-gratis__titulo i { color: rgb(var(--df-accent)); }

.lp-tabela {
    /* relative: os .df-sr-only (absolutos) das células ficam presos ao contentor que rola, senão alargam a página no telemóvel. */
    position: relative; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    border: 1px solid rgb(var(--df-outline-variant) / .5); border-radius: var(--df-radius-lg);
    background: var(--df-c-surface-lowest);
}
.lp-tabela:focus-visible { outline: 2px solid rgb(var(--df-primary-container)); outline-offset: 2px; }
.lp-tabela table { width: 100%; min-width: 44rem; border-collapse: collapse; font-size: .875rem; }
.lp-tabela th, .lp-tabela td { padding: .75rem .9rem; text-align: left; vertical-align: top; border-bottom: 1px solid rgb(var(--df-outline-variant) / .4); }
.lp-tabela tbody tr:last-child th, .lp-tabela tbody tr:last-child td { border-bottom: 0; }
.lp-tabela thead th { font-weight: 700; color: rgb(var(--df-on-surface)); background: rgb(var(--df-surface-container)); white-space: nowrap; }
.lp-tabela tbody th { font-weight: 600; color: rgb(var(--df-on-surface)); }
.lp-tabela td { color: rgb(var(--df-on-surface-variant)); }
/* Primeira coluna fixa ao rolar na horizontal (telemóvel). */
.lp-tabela th:first-child {
    position: sticky; left: 0; z-index: 1; min-width: 10rem; max-width: 14rem;
    background: var(--df-c-surface-lowest);
}
.lp-tabela thead th:first-child { background: rgb(var(--df-surface-container)); }
.lp-tabela .lp-tabela__destaque { background: rgb(var(--df-primary-container) / .07); }
.lp-tabela thead .lp-tabela__destaque { color: rgb(var(--df-primary-container)); background: rgb(var(--df-primary-container) / .14); }
.lp-tabela__nao { color: rgb(var(--df-outline)); }
.lp-tabela__dica { margin: .75rem 0 0; text-align: center; font-size: .8125rem; color: rgb(var(--df-on-surface-variant)); }
@media (max-width: 767px) {
    .lp-tabela table { min-width: 36rem; font-size: .8125rem; }
    .lp-tabela th, .lp-tabela td { padding: .6rem .65rem; }
    .lp-tabela th:first-child { min-width: 8.5rem; max-width: 9.5rem; }
    .lp-plano { padding: 1.25rem; }
}

/* ── Novidades (landing, /novidades e artigo /novidades/{slug}) ── */
/* Capa: a imagem do Admin ou, sem ela, um fundo com as cores da marca e o ícone do tipo. */
.df-nvd-capa { aspect-ratio: 16 / 9; overflow: hidden; width: 100%; }
/* Destaque da landing e capa do artigo: mais baixas, para não empurrar o texto para fora do ecrã. */
.df-nvd-landing > .df-nvd-card .df-nvd-capa,
.df-artigo__capa { aspect-ratio: 2 / 1; }
.df-nvd-capa img { display: block; height: 100%; object-fit: cover; width: 100%; }
.df-nvd-capa__vazia {
    align-items: center; color: #fff; display: flex; font-size: 2.25rem; height: 100%; justify-content: center;
    background:
        radial-gradient(circle at 80% 20%, rgb(255 255 255 / .18), transparent 45%),
        linear-gradient(135deg, var(--df-c-primary-container), var(--df-c-indigo) 60%, var(--df-c-accent));
}

.df-nvd-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; text-decoration: none; }
.df-nvd-card__titulo { color: var(--df-c-on-surface); font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
.df-nvd-card__titulo--grande { font-size: 1.375rem; line-height: 1.3; }
.df-nvd-card__resumo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.df-nvd-card__ler { color: var(--df-c-primary-container); font-size: .875rem; font-weight: 600; }
.df-nvd-card__ler i { display: inline-block; transition: transform .2s ease; }
.df-nvd-card:hover .df-nvd-card__ler i { transform: translateX(3px); }

/* Compacto: miniatura à esquerda, tipo/data e título à direita. */
.df-nvd-card--compacto { align-items: center; flex-direction: row; gap: .9rem; height: auto; padding: .6rem; transition: box-shadow .2s ease; }
.df-nvd-card--compacto:hover { box-shadow: var(--df-shadow-2); }
.df-nvd-card--compacto__capa { aspect-ratio: 4 / 3; border-radius: var(--df-radius-md); flex-shrink: 0; width: 6.5rem; }
.df-nvd-card--compacto__capa .df-nvd-capa__vazia { font-size: 1.4rem; }
.df-nvd-card__titulo--compacto {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: .9375rem; overflow: hidden;
}

/* Landing: destaque à esquerda, lista compacta à direita (computador). */
.df-nvd-landing { display: grid; gap: 1.25rem; }
.df-nvd-landing__lista { display: flex; flex-direction: column; gap: .9rem; }
@media (min-width: 1024px) {
    .df-nvd-landing { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; }
    .df-nvd-landing__lista { justify-content: space-between; }
    .df-nvd-landing__lista .df-nvd-card--compacto { flex: 1; }
}

/* Artigo: conteúdo à esquerda, outras novidades à direita (computador). */
.df-artigo-grelha { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) {
    .df-artigo-grelha { grid-template-columns: minmax(0, 1fr) 20rem; gap: 3.5rem; align-items: start; }
    .df-artigo-lateral { position: sticky; top: 6rem; }
}
.df-artigo { min-width: 0; }
.df-artigo__titulo { color: var(--df-c-on-surface); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.df-artigo__voltar {
    align-items: center; color: var(--df-c-primary-container); display: inline-flex; font-size: .875rem;
    font-weight: 600; gap: .4rem; margin-bottom: 1.25rem; text-decoration: none;
}
.df-artigo__capa { border-radius: var(--df-radius-lg); margin-bottom: 1.75rem; }
.df-artigo__capa .df-nvd-capa__vazia { font-size: 4rem; }
.df-artigo__corpo { color: var(--df-c-on-surface); font-size: 1rem; line-height: 1.75; overflow-wrap: anywhere; }
.df-artigo__corpo > * + * { margin-top: 1rem; }
.df-artigo__corpo h2, .df-artigo__corpo h3 { color: var(--df-c-on-surface); font-weight: 700; line-height: 1.3; margin-top: 2rem; }
.df-artigo__corpo h2 { font-size: 1.375rem; }
.df-artigo__corpo h3 { font-size: 1.125rem; }
.df-artigo__corpo ul, .df-artigo__corpo ol { padding-left: 1.5rem; }
.df-artigo__corpo ul { list-style: disc; }
.df-artigo__corpo ol { list-style: decimal; }
.df-artigo__corpo a { color: var(--df-c-primary-container); text-decoration: underline; }
.df-artigo__corpo img { border-radius: var(--df-radius-md); height: auto; max-width: 100%; }
/* Imagens alinhadas no editor (float) com o texto ao lado; no telemóvel ocupam a largura toda. */
.df-artigo__corpo { display: flow-root; }
.df-artigo__corpo img[style*="float: left"], .df-artigo__corpo img[style*="float:left"] { margin: .25rem 1.5rem 1rem 0; }
.df-artigo__corpo img[style*="float: right"], .df-artigo__corpo img[style*="float:right"] { margin: .25rem 0 1rem 1.5rem; }
.df-artigo__corpo :is(h2, h3, hr, blockquote) { clear: both; }
@media (max-width: 600px) {
    .df-artigo__corpo img[style*="float"] { float: none !important; display: block; width: 100% !important; height: auto !important; margin: 1rem 0 !important; }
}
.df-artigo__video { align-items: center; display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; padding: 1rem; text-decoration: none; }
.df-artigo__video img { border-radius: var(--df-radius-md); max-width: 100%; width: 12rem; }