/* =====================================================================================
   Docnitz — landing page, termos e privacidade (layout "landing").
   Bootstrap 5.3 só como CSS (grid/tabelas/utilitários das páginas legais), SEM AdminLTE, sem o tema
   da aplicação, sem Bootstrap JS e sem Bootstrap Icons. Carregado depois de web/css/docnitz-tokens.css
   (views/layouts/landing.php): cores, raios, sombras, fonte e durações vêm dos tokens --docnitz-*;
   nenhuma cor literal aqui. Movimento: web/js/landing.js (grava --progress nas seções [data-lp-scrub],
   .is-visible nos [data-lp-reveal], .is-active nos benefícios, .is-hidden/.is-scrolled no cabeçalho).

   Regra do movimento: o layout BASE é estático e legível (celular, sem JS, movimento reduzido).
   Sticky/scroll-linked só em  @media (min-width: 992px) and (prefers-reduced-motion: no-preference)
   e com html.lp-js (classe posta no <head>). Só transform / opacity / clip-path.

   Estrutura:
     1. Apelidos --lp-* e ponte com o Bootstrap (variáveis --bs-*)
     2. Base, foco, botões, badges e ícones (mesmo visual do produto)
     3. Cabeçalho e menu do celular
     4. Blocos comuns: seções, títulos, moldura de tela, reveal
     5. Momento 1 · Hero
     6. Momento 2 · Problema (trilho horizontal)
     7. Momentos 3+4 · Virada → Produto (Deep Teal, sequência sticky com anotações)
     8. Momento 5 · Benefícios (moldura sticky com crossfade)
     9. Momento 6 · Antes → depois (cortina)
    10. Momento 7 · Pessoas e garantias
    11. Momento 8 · Planos e dúvidas
    12. Momento 9 · CTA final
    13. Rodapé
    14. Páginas legais (termos e privacidade)
    15. Movimento reduzido e impressão
   ===================================================================================== */


/* =====================================================================================
   1. APELIDOS E PONTE COM O BOOTSTRAP
   ===================================================================================== */
:root {
    --lp-primary: var(--docnitz-primary);
    --lp-primary-dark: var(--docnitz-dark);
    --lp-ink: var(--docnitz-text);
    --lp-heading: var(--docnitz-deep);
    --lp-muted: var(--docnitz-text-muted);
    --lp-border: var(--docnitz-border-card);
    --lp-border-strong: var(--docnitz-border-strong);
    --lp-soft: var(--docnitz-bg);
    --lp-radius: var(--docnitz-radius-lg);      /* cards */
    --lp-radius-lg: var(--docnitz-radius-xl);   /* blocos grandes (molduras, planos) */
    --lp-shadow: var(--docnitz-shadow-card);
    --lp-shadow-lg: var(--docnitz-shadow-lg);
    --lp-nav-h: 64px;
    --lp-section-y: clamp(4rem, 2.5rem + 4.5vw, 6.5rem);
    /* Distância da borda da tela até o conteúdo do .container (trilhos que "sangram" até a borda) */
    --lp-edge: 1rem;

    --bs-gutter-x: 2rem; /* .container com 16 px de respiro lateral */
    --bs-primary: var(--docnitz-primary);
    --bs-primary-rgb: var(--docnitz-primary-rgb);
    --bs-link-color: var(--docnitz-dark);
    --bs-link-color-rgb: var(--docnitz-dark-rgb);
    --bs-link-hover-color: var(--docnitz-deep);
    --bs-link-hover-color-rgb: var(--docnitz-deep-rgb);
    --bs-body-font-family: var(--docnitz-font);
    --bs-body-color: var(--docnitz-text);
    --bs-emphasis-color: var(--docnitz-deep);
    --bs-border-color: var(--docnitz-silver);
    --bs-secondary-color: var(--docnitz-text-muted);
    --bs-tertiary-bg: var(--docnitz-bg);
    --bs-border-radius-sm: var(--docnitz-radius-sm);
    --bs-border-radius: var(--docnitz-radius-control);
    --bs-border-radius-lg: var(--docnitz-radius-md);
    --bs-focus-ring-color: var(--docnitz-selection);
}
@media (min-width: 576px)  { :root { --lp-edge: calc((100vw - 540px) / 2 + 1rem); } }
@media (min-width: 768px)  { :root { --lp-edge: calc((100vw - 720px) / 2 + 1rem); } }
@media (min-width: 992px)  { :root { --lp-edge: calc((100vw - 960px) / 2 + 1rem); } }
@media (min-width: 1200px) { :root { --lp-edge: calc((100vw - 1140px) / 2 + 1rem); } }
@media (min-width: 1400px) { :root { --lp-edge: calc((100vw - 1320px) / 2 + 1rem); } }
.lp-body .container { --bs-gutter-x: 2rem; }


/* =====================================================================================
   2. BASE, FOCO, BOTÕES, BADGES E ÍCONES
   ===================================================================================== */
html {
    scroll-behavior: smooth;
}
body.lp-body {
    padding-top: var(--lp-nav-h);
    background: var(--docnitz-card);
    color: var(--lp-ink);
    font-family: var(--docnitz-font);
    font-size: var(--docnitz-text-lg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* Sem rolagem horizontal da página; clip (e não hidden) não cria contêiner de rolagem e preserva o sticky */
.lp-body main {
    overflow-x: clip;
}
.lp-body :is(h1, h2, h3, .h1, .h2, .h3) {
    color: var(--lp-heading);
    letter-spacing: -.015em;
}
::selection {
    background: var(--docnitz-selection);
}
[id] {
    scroll-margin-top: calc(var(--lp-nav-h) + 12px);
}
.lp-body img {
    max-width: 100%;
}

/* Foco visível e consistente (anel aqua do produto) */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.btn:focus-visible,
[tabindex="0"]:focus-visible {
    outline: 2px solid var(--docnitz-accent);
    outline-offset: 2px;
    box-shadow: none;
}
main:focus {
    outline: none;
}

.lp-skip-link {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 1100;
    padding: .5rem 1rem;
    border-radius: var(--docnitz-radius-sm);
    background: var(--docnitz-card);
    color: var(--lp-primary-dark);
    font-weight: var(--docnitz-weight-semibold);
    box-shadow: var(--lp-shadow-lg);
}

/* Botões: mesmas medidas e cores do componente do produto (docnitz-btn) */
.lp-body .btn {
    --bs-btn-padding-x: 1.125rem;
    --bs-btn-padding-y: .5rem;
    --bs-btn-font-size: var(--docnitz-text-base);
    --bs-btn-font-weight: var(--docnitz-weight-semibold);
    --bs-btn-line-height: 1.25;
    --bs-btn-border-radius: var(--docnitz-radius-control);
    --bs-btn-focus-box-shadow: var(--docnitz-ring);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: var(--docnitz-control-h);
    transition: background-color var(--docnitz-fast) var(--docnitz-ease),
                border-color var(--docnitz-fast) var(--docnitz-ease),
                color var(--docnitz-fast) var(--docnitz-ease),
                box-shadow var(--docnitz-fast) var(--docnitz-ease),
                transform var(--docnitz-fast) var(--docnitz-ease);
}
.lp-body .btn:active { transform: translateY(1px); }
.lp-body .btn-sm {
    --bs-btn-padding-x: .75rem;
    --bs-btn-padding-y: .25rem;
    --bs-btn-font-size: var(--docnitz-text-sm);
    --bs-btn-border-radius: var(--docnitz-radius-sm);
    min-height: var(--docnitz-control-h-sm);
}
.lp-body .btn-lg {
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: .625rem;
    --bs-btn-font-size: var(--docnitz-text-lg);
    --bs-btn-border-radius: var(--docnitz-radius-md);
    min-height: var(--docnitz-control-h-lg);
}
.lp-body .btn-primary {
    --bs-btn-color: var(--docnitz-on-color);
    --bs-btn-bg: var(--docnitz-primary);
    --bs-btn-border-color: var(--docnitz-primary);
    --bs-btn-hover-color: var(--docnitz-on-color);
    --bs-btn-hover-bg: var(--docnitz-dark);
    --bs-btn-hover-border-color: var(--docnitz-dark);
    --bs-btn-active-color: var(--docnitz-on-color);
    --bs-btn-active-bg: var(--docnitz-primary-press);
    --bs-btn-active-border-color: var(--docnitz-primary-press);
    box-shadow: var(--docnitz-shadow-btn);
}
.lp-body .btn-outline-primary {
    --bs-btn-color: var(--docnitz-dark);
    --bs-btn-bg: var(--docnitz-card);
    --bs-btn-border-color: var(--docnitz-primary-200);
    --bs-btn-hover-color: var(--docnitz-deep);
    --bs-btn-hover-bg: var(--docnitz-primary-50);
    --bs-btn-hover-border-color: var(--docnitz-primary);
    --bs-btn-active-color: var(--docnitz-deep);
    --bs-btn-active-bg: var(--docnitz-primary-100);
    --bs-btn-active-border-color: var(--docnitz-primary);
}
.lp-body .btn-outline-secondary {
    --bs-btn-color: var(--docnitz-text);
    --bs-btn-bg: var(--docnitz-card);
    --bs-btn-border-color: var(--docnitz-silver);
    --bs-btn-hover-color: var(--docnitz-dark);
    --bs-btn-hover-bg: var(--docnitz-card);
    --bs-btn-hover-border-color: var(--docnitz-primary);
    --bs-btn-active-color: var(--docnitz-deep);
    --bs-btn-active-bg: var(--docnitz-primary-50);
    --bs-btn-active-border-color: var(--docnitz-primary);
}
.lp-body .btn-light {
    --bs-btn-color: var(--docnitz-deep);
    --bs-btn-bg: var(--docnitz-card);
    --bs-btn-border-color: var(--docnitz-card);
    --bs-btn-hover-color: var(--docnitz-deep);
    --bs-btn-hover-bg: var(--docnitz-primary-50);
    --bs-btn-hover-border-color: var(--docnitz-primary-50);
    --bs-btn-active-color: var(--docnitz-deep);
    --bs-btn-active-bg: var(--docnitz-primary-100);
    --bs-btn-active-border-color: var(--docnitz-primary-100);
}
.lp-body .btn-link {
    --bs-btn-color: var(--docnitz-dark);
    --bs-btn-hover-color: var(--docnitz-deep);
    --bs-btn-active-color: var(--docnitz-deep);
    --bs-btn-font-weight: var(--docnitz-weight-semibold);
    text-decoration: none;
}
.lp-body .btn-link:hover { background-color: var(--docnitz-hover); }

/* CTA principal: sombra teal e leve elevação no hover (como o produto, um pouco mais expressivo) */
.lp-body .lp-cta {
    box-shadow: var(--docnitz-shadow-cta);
}
.lp-body .lp-cta:hover {
    transform: translateY(-1px);
}
.lp-body .lp-cta:active {
    transform: translateY(1px);
    box-shadow: var(--docnitz-shadow-btn);
}
.lp-link-arrow .lp-icon {
    transition: transform var(--docnitz-base) var(--docnitz-ease);
}
.lp-link-arrow:hover .lp-icon {
    transform: translateY(2px);
}

/* Ícones SVG inline (herdam currentColor) */
.lp-icon {
    display: inline-block;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
}
.lp-icon-cut {
    fill: none;
    stroke: var(--lp-cut, var(--docnitz-on-color));
}
.lp-icon-cut-fill {
    fill: var(--lp-cut, var(--docnitz-on-color));
}

/* Badges de situação: pílula suave com texto escuro (igual ao docnitz-badge do produto) */
.lp-badge {
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
    padding: .25rem .625rem;
    border: 1px solid transparent;
    border-radius: var(--docnitz-radius-pill);
    font-size: var(--docnitz-text-xs);
    font-weight: var(--docnitz-weight-semibold);
    line-height: 1.35;
    white-space: nowrap;
}
.lp-badge .lp-icon { width: .8125rem; height: .8125rem; }
.lp-badge--warning {
    --lp-cut: var(--docnitz-warning-bg);
    border-color: var(--docnitz-warning-border);
    background: var(--docnitz-warning-bg);
    color: var(--docnitz-warning-text);
}
.lp-badge--danger {
    --lp-cut: var(--docnitz-danger-bg);
    border-color: var(--docnitz-danger-border);
    background: var(--docnitz-danger-bg);
    color: var(--docnitz-danger-text);
}


/* =====================================================================================
   3. CABEÇALHO E MENU DO CELULAR
   Fixo e discreto; some ao rolar para baixo e volta ao rolar para cima (.is-hidden pelo landing.js).
   ===================================================================================== */
.lp-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1030;
    background: var(--docnitz-card);
    border-bottom: 1px solid transparent;
    transition: transform var(--docnitz-slow) var(--docnitz-ease),
                border-color var(--docnitz-fast) var(--docnitz-ease),
                box-shadow var(--docnitz-fast) var(--docnitz-ease);
}
@supports (backdrop-filter: blur(8px)) {
    .lp-header {
        background: var(--docnitz-glass);
        backdrop-filter: blur(12px) saturate(1.4);
    }
}
.lp-header.is-scrolled {
    border-bottom-color: var(--docnitz-border);
}
.lp-header.is-hidden {
    transform: translate3d(0, -100%, 0);
}
.lp-header.is-menu-open {
    background: var(--docnitz-card);
    box-shadow: var(--docnitz-shadow-md);
}
.lp-header-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: var(--lp-nav-h);
}
.lp-brand {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: .45rem;
    border-radius: var(--docnitz-radius-sm);
}
.lp-brand-logo {
    display: block;
    width: auto;
    height: 34px;
}
.lp-nav {
    display: none;
    margin: 0 auto;
}
.lp-nav-links,
.lp-menu-links {
    margin: 0;
    padding: 0;
    list-style: none;
}
.lp-nav-links {
    display: flex;
    gap: .25rem;
}
.lp-nav-links a {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0 .875rem;
    border-radius: var(--docnitz-radius-sm);
    color: var(--lp-muted);
    font-size: var(--docnitz-text-base);
    font-weight: var(--docnitz-weight-medium);
    text-decoration: none;
    transition: color var(--docnitz-fast) var(--docnitz-ease), background-color var(--docnitz-fast) var(--docnitz-ease);
}
.lp-nav-links a:hover {
    background: var(--docnitz-hover);
    color: var(--lp-heading);
}
.lp-header-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}
.lp-header-login,
.lp-header-cta {
    display: none !important;
}
.lp-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--docnitz-control-h);
    height: var(--docnitz-control-h);
    padding: 0;
    border: 1px solid var(--docnitz-border-strong);
    border-radius: var(--docnitz-radius-control);
    background: var(--docnitz-card);
    color: var(--lp-heading);
    transition: border-color var(--docnitz-fast) var(--docnitz-ease), background-color var(--docnitz-fast) var(--docnitz-ease);
}
.lp-menu-toggle:hover {
    border-color: var(--docnitz-primary);
}
.lp-menu-toggle .lp-icon {
    width: 1.25rem;
    height: 1.25rem;
}
.lp-menu-line {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    transform-box: view-box;
    transform-origin: 10px 10px;
    transition: transform var(--docnitz-base) var(--docnitz-ease);
}
.lp-header.is-menu-open .lp-menu-line--1 { transform: rotate(45deg) translateY(4px); }
.lp-header.is-menu-open .lp-menu-line--2 { transform: rotate(-45deg) translateY(-4px); }
/* Sem JS o botão não funcionaria: mostra o CTA direto */
html:not(.lp-js) .lp-menu-toggle { display: none; }
html:not(.lp-js) .lp-header-cta { display: inline-flex !important; }

.lp-menu {
    max-height: calc(100vh - var(--lp-nav-h));
    overflow-y: auto;
    border-top: 1px solid var(--docnitz-border);
    background: var(--docnitz-card);
    animation: lp-menu-in var(--docnitz-base) var(--docnitz-ease);
}
.lp-menu[hidden] {
    display: none;
}
.lp-menu-links {
    padding: .5rem 0;
}
.lp-menu-links a {
    display: flex;
    align-items: center;
    min-height: 3.25rem;
    border-bottom: 1px solid var(--docnitz-border);
    color: var(--lp-heading);
    font-size: var(--docnitz-text-lg);
    font-weight: var(--docnitz-weight-semibold);
    text-decoration: none;
}
.lp-menu-links a:hover {
    color: var(--lp-primary-dark);
}
.lp-menu-actions {
    display: grid;
    gap: .75rem;
    padding: 1rem 0 1.5rem;
}
@keyframes lp-menu-in {
    from { opacity: 0; transform: translate3d(0, -.5rem, 0); }
    to { opacity: 1; transform: none; }
}
@media (max-width: 379.98px) {
    .lp-brand-logo { height: 28px; }
}
@media (min-width: 576px) {
    .lp-header-cta { display: inline-flex !important; }
}
@media (min-width: 992px) {
    .lp-nav { display: block; }
    .lp-header-actions { margin-left: 0; }
    .lp-header-login { display: inline-flex !important; }
    .lp-menu-toggle,
    .lp-menu { display: none !important; }
}


/* =====================================================================================
   4. BLOCOS COMUNS: SEÇÕES, TÍTULOS, MOLDURA DE TELA, REVEAL
   ===================================================================================== */
.lp-section {
    padding: var(--lp-section-y) 0;
}
.lp-head {
    max-width: 48rem;
    margin: 0 auto clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
    text-align: center;
}
.lp-head--start {
    margin-left: 0;
    text-align: left;
}
.lp-eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: .375rem .875rem;
    border-radius: var(--docnitz-radius-pill);
    background: var(--docnitz-primary-50);
    color: var(--lp-primary-dark);
    font-size: var(--docnitz-text-sm);
    font-weight: var(--docnitz-weight-semibold);
    letter-spacing: .01em;
}
.lp-display {
    margin: 0 0 1.5rem;
    font-size: clamp(2.5rem, 1.3rem + 4.8vw, 5rem);
    font-weight: var(--docnitz-weight-bold);
    line-height: 1.03;
    letter-spacing: -.045em !important;
    text-wrap: balance;
}
.lp-title {
    margin: 0 0 1.25rem;
    font-size: clamp(2rem, 1.3rem + 2.8vw, 3.5rem);
    font-weight: var(--docnitz-weight-bold);
    line-height: 1.06;
    letter-spacing: -.035em !important;
    text-wrap: balance;
}
.lp-lead {
    max-width: 38rem;
    margin: 0 auto;
    color: var(--lp-muted);
    font-size: clamp(1.0625rem, 1rem + .35vw, 1.3125rem);
    line-height: 1.55;
    text-wrap: pretty;
}
.lp-head--start .lp-lead { margin-left: 0; }
.lp-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin-top: 2.25rem;
}
.lp-actions--center { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.lp-note {
    margin: 1rem 0 0;
    color: var(--lp-muted);
    font-size: var(--docnitz-text-sm);
}
.lp-caption {
    margin-top: 1.5rem;
    color: var(--lp-muted);
    font-size: var(--docnitz-text-sm);
    text-align: center;
}
@media (max-width: 575.98px) {
    .lp-actions { flex-direction: column; align-items: stretch; }
}

/* Moldura de tela: cantos 20, borda fina, sombra longa e suave; a imagem fica presa ao topo/esquerda */
.lp-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--docnitz-border-strong);
    border-radius: var(--lp-radius-lg);
    background: var(--docnitz-card);
    box-shadow: var(--docnitz-shadow-frame);
}
.lp-frame--flat {
    box-shadow: var(--lp-shadow-lg);
}
.lp-frame--dark {
    border-color: var(--docnitz-on-dark-line);
    box-shadow: var(--docnitz-shadow-frame-dark);
}
.lp-frame-bar {
    display: flex;
    align-items: center;
    gap: .875rem;
    height: 2.25rem;
    padding: 0 1rem;
    border-bottom: 1px solid var(--docnitz-border);
    background: var(--docnitz-surface-2);
}
.lp-frame-dots {
    display: inline-flex;
    gap: .375rem;
}
.lp-frame-dots i {
    width: .625rem;
    height: .625rem;
    border-radius: var(--docnitz-radius-circle);
    background: var(--docnitz-silver);
}
.lp-frame-title {
    overflow: hidden;
    color: var(--lp-muted);
    font-size: var(--docnitz-text-xs);
    font-weight: var(--docnitz-weight-medium);
    white-space: nowrap;
    text-overflow: ellipsis;
}
.lp-frame-media {
    position: relative;
    background: var(--docnitz-bg);
}
.lp-frame-media img,
.lp-frame img,
.lp-story-photo img,
.lp-compare-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left top;
}
.lp-ratio-16x10 { aspect-ratio: 16 / 10; }
.lp-ratio-3x2 { aspect-ratio: 3 / 2; }
.lp-ratio-4x5 { aspect-ratio: 4 / 5; }
/* <picture> com a tela de celular: não interfere no layout; até 767 px o contêiner vira retrato e recorta o topo */
.lp-body picture {
    display: contents;
}
@media (max-width: 767.98px) {
    .lp-media-m {
        aspect-ratio: 4 / 5;
    }
    .lp-media-m img {
        object-position: center top;
    }
}
/* Arquivo de imagem ainda não publicado: bloco neutro do mesmo tamanho */
.lp-media-missing {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    background: var(--docnitz-surface-2);
}

/* Reveal ao rolar: usa a propriedade translate (não transform) para não brigar com transforms de cada bloco */
@media (prefers-reduced-motion: no-preference) {
    .lp-js [data-lp-reveal] {
        opacity: 0;
        translate: 0 1.25rem;
        transition: opacity var(--docnitz-reveal) var(--docnitz-ease-out),
                    translate var(--docnitz-reveal) var(--docnitz-ease-out),
                    scale var(--docnitz-reveal) var(--docnitz-ease-out);
        transition-delay: calc(var(--d, 0) * var(--docnitz-stagger) * 2);
    }
    .lp-js [data-lp-reveal].is-visible {
        opacity: 1;
        translate: none;
    }
}


/* =====================================================================================
   5. MOMENTO 1 · HERO
   --progress (0 → 1 nos primeiros ~55% da altura da tela) endireita e cresce a moldura.
   ===================================================================================== */
.lp-hero {
    position: relative;
    isolation: isolate;
    padding: clamp(3rem, 2rem + 3.5vw, 5rem) 0 clamp(3.5rem, 2rem + 4vw, 6rem);
}
.lp-hero::before {
    content: "";
    position: absolute;
    inset: calc(var(--lp-nav-h) * -1) 0 auto;
    z-index: -1;
    height: 80%;
    background: radial-gradient(60% 60% at 50% 0%, var(--docnitz-primary-50), transparent 75%);
    pointer-events: none;
}
.lp-hero-copy {
    max-width: 54rem;
    margin: 0 auto;
    text-align: center;
}
.lp-hero-lead {
    max-width: 34rem;
}
.lp-hero-visual {
    --p: var(--progress, 0);
    position: relative;
    max-width: 1000px;
    margin: clamp(2.5rem, 2rem + 2.5vw, 4rem) auto 0;
    perspective: 1800px;
}
.lp-hero-tilt {
    position: relative;
    transform-origin: 50% 0;
    transform-style: preserve-3d;
    transform: rotateX(calc((1 - var(--p)) * 9deg)) scale(calc(.93 + var(--p) * .07));
    will-change: transform;
}
.lp-float {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border: 1px solid var(--docnitz-border-card);
    border-radius: var(--lp-radius);
    background: var(--docnitz-card);
    box-shadow: var(--docnitz-shadow-float);
    font-size: var(--docnitz-text-sm);
    white-space: nowrap;
}
.lp-float-doc {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.lp-float-doc strong {
    color: var(--lp-heading);
    font-weight: var(--docnitz-weight-semibold);
}
.lp-float-doc span {
    color: var(--lp-muted);
    font-size: var(--docnitz-text-xs);
}
.lp-float-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--docnitz-radius-md);
    background: var(--docnitz-primary-50);
    color: var(--lp-primary);
}
.lp-float-icon .lp-icon { width: 1.125rem; height: 1.125rem; }
/* Posições escolhidas para não esconder conteúdo da tela: o badge sai pela borda esquerda sobre a parte vazia
   da barra lateral (abaixo do menu); o resumo sai pela borda direita, embaixo (sobre "Atividades recentes"). */
.lp-float--badge {
    top: 60%;
    left: -5%;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    transform: translate3d(0, calc(var(--p) * -1.25rem), 60px);
}
.lp-float--digest {
    right: -4%;
    bottom: 8%;
    transform: translate3d(0, calc(var(--p) * -2rem), 80px);
}
@media (max-width: 1199.98px) {
    .lp-float--badge { left: -.5rem; }
    .lp-float--digest { right: -.5rem; }
}
/* Celular: sem profundidade (translateZ ampliava e cortava o cartão) e sempre dentro da tela */
@media (max-width: 767.98px) {
    .lp-hero-visual { perspective: none; }
    .lp-hero-tilt { transform: none; }
    .lp-float { gap: .5rem; padding: .5rem .75rem; transform: none; }
    .lp-float--badge { top: -1rem; bottom: auto; left: .75rem; flex-direction: row; }
    .lp-float--digest { right: .75rem; bottom: -1.25rem; max-width: calc(100% - 1.5rem); }
    .lp-float--badge .lp-float-doc { display: none; }
    .lp-float-icon { width: 1.75rem; height: 1.75rem; }
    .lp-hero-visual .lp-caption { margin-top: 2.5rem; }
}
/* Entrada do hero só com CSS (não depende do JS: o h1 nunca fica invisível) */
@media (prefers-reduced-motion: no-preference) {
    [data-lp-enter] {
        animation: lp-enter calc(var(--docnitz-reveal) * 1.4) var(--docnitz-ease-out) calc(var(--d, 0) * var(--docnitz-stagger) * 2) both;
    }
    .lp-frame--hero {
        animation: lp-rise calc(var(--docnitz-reveal) * 1.8) var(--docnitz-ease-out) calc(var(--docnitz-stagger) * 6) both;
    }
    .lp-float--badge {
        animation: lp-float-in calc(var(--docnitz-reveal) * 1.2) var(--docnitz-ease-out) calc(var(--docnitz-reveal) * 1.4) both;
    }
    .lp-float--digest {
        animation: lp-float-in calc(var(--docnitz-reveal) * 1.2) var(--docnitz-ease-out) calc(var(--docnitz-reveal) * 1.8) both;
    }
}
@keyframes lp-enter {
    from { opacity: 0; translate: 0 1rem; }
    to { opacity: 1; translate: none; }
}
@keyframes lp-rise {
    from { opacity: 0; translate: 0 2.5rem; }
    to { opacity: 1; translate: none; }
}
@keyframes lp-float-in {
    from { opacity: 0; translate: 0 .75rem; scale: .96; }
    to { opacity: 1; translate: none; scale: 1; }
}


/* =====================================================================================
   6. MOMENTO 2 · PROBLEMA — trilho horizontal (único da página)
   Base: trilho com scroll-snap nativo (swipe). ≥ 992 px: sticky + translateX(--progress × --lp-shift).
   ===================================================================================== */
.lp-problem {
    padding: var(--lp-section-y) 0;
    background: var(--docnitz-bg);
}
.lp-problem-head {
    max-width: 52rem;
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
    text-align: center;
}
.lp-track-viewport {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 1.5rem 0 2rem;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--lp-edge);
    scrollbar-width: none;
}
.lp-track-viewport::-webkit-scrollbar {
    display: none;
}
.lp-track {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    width: max-content;
    padding: 0 var(--lp-edge);
}
.lp-track-steps {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.lp-story {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: .5rem;
    width: min(80vw, 21rem);
    margin: 0;
    padding: 1.25rem;
    border: 1px solid var(--docnitz-border-card);
    border-radius: var(--lp-radius);
    background: var(--docnitz-card);
    box-shadow: var(--docnitz-shadow-card);
    scroll-snap-align: start;
    transform: translate3d(0, var(--lift, 0), 0) rotate(var(--tilt, 0deg));
}
/* Cada etapa um pouco mais "bagunçada" que a anterior */
.lp-track-steps > :nth-child(1) { --tilt: -.5deg; }
.lp-track-steps > :nth-child(2) { --tilt: 1deg; --lift: .5rem; }
.lp-track-steps > :nth-child(3) { --tilt: -1.75deg; --lift: -.25rem; }
.lp-track-steps > :nth-child(4) { --tilt: 2.5deg; --lift: .75rem; }
.lp-track-steps > :nth-child(5) { --tilt: -3.5deg; --lift: .25rem; }
.lp-story--photo {
    width: min(84vw, 27rem);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.lp-story-photo {
    overflow: hidden;
    border-radius: var(--lp-radius);
    background: var(--docnitz-surface-2);
    box-shadow: var(--docnitz-shadow-card);
}
.lp-story-kicker {
    margin: .875rem 0 0;
    color: var(--lp-heading);
    font-size: var(--docnitz-text-lg);
    font-weight: var(--docnitz-weight-semibold);
    line-height: 1.35;
    letter-spacing: -.01em;
}
.lp-story-visual {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    min-height: 9.5rem;
    padding: 1rem;
    border: 1px solid var(--docnitz-border-strong);
    border-radius: var(--docnitz-radius-md);
    background: var(--docnitz-card);
    font-size: var(--docnitz-text-sm);
    line-height: 1.4;
}
.lp-mock-from,
.lp-mock-auto,
.lp-mock-sheet-name {
    color: var(--lp-muted);
    font-size: var(--docnitz-text-xs);
    font-weight: var(--docnitz-weight-medium);
}
.lp-mock-subject,
.lp-mock-doc {
    color: var(--lp-ink);
    font-weight: var(--docnitz-weight-semibold);
}
.lp-mock-snippet {
    color: var(--lp-muted);
}
.lp-mock-attach,
.lp-mock-path,
.lp-mock-file {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}
.lp-mock-attach {
    align-self: flex-start;
    margin-top: auto;
    padding: .25rem .5rem;
    border-radius: var(--docnitz-radius-sm);
    background: var(--docnitz-surface-2);
    color: var(--lp-ink);
    font-size: var(--docnitz-text-xs);
}
.lp-mock-path {
    margin-bottom: .25rem;
    color: var(--lp-muted);
    font-size: var(--docnitz-text-xs);
    font-weight: var(--docnitz-weight-medium);
}
.lp-mock-file {
    padding: .25rem 0;
    border-bottom: 1px dashed var(--docnitz-border-strong);
    color: var(--lp-ink);
}
.lp-mock-file .lp-icon,
.lp-mock-path .lp-icon,
.lp-mock-attach .lp-icon { color: var(--docnitz-gray); }
.lp-mock-sheet {
    border-color: var(--docnitz-success-border);
}
.lp-mock-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    overflow: hidden;
    border: 1px solid var(--docnitz-success-border);
    border-radius: var(--docnitz-radius-sm);
    font-size: var(--docnitz-text-xs);
    font-variant-numeric: tabular-nums;
}
.lp-mock-grid > span {
    padding: .3125rem .5rem;
    border-bottom: 1px solid var(--docnitz-success-border);
}
.lp-mock-grid > span:nth-child(even) { border-left: 1px solid var(--docnitz-success-border); }
.lp-mock-grid > span:nth-child(-n + 2) {
    background: var(--docnitz-success-bg);
    color: var(--docnitz-success-text);
    font-weight: var(--docnitz-weight-semibold);
}
.lp-mock-grid > span:nth-last-child(-n + 2) { border-bottom: 0; }
.lp-mock-note {
    border-color: var(--docnitz-warning-border);
    background: var(--docnitz-warning-bg);
}
.lp-mock-note .lp-mock-auto { color: var(--docnitz-warning-text); }
.lp-mock-note .lp-mock-snippet { color: var(--lp-ink); }
.lp-mock-expired {
    align-items: flex-start;
    border-color: var(--docnitz-danger-border);
    background: var(--docnitz-danger-bg);
}
.lp-mock-expired .lp-badge { background: var(--docnitz-card); --lp-cut: var(--docnitz-card); }
.lp-mock-expired .lp-mock-snippet { color: var(--docnitz-danger-text); font-weight: var(--docnitz-weight-medium); }
.lp-story-step {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .75rem 0 0;
    color: var(--lp-heading);
    font-size: var(--docnitz-text-lg);
    font-weight: var(--docnitz-weight-bold);
    letter-spacing: -.01em;
}
.lp-story-step > span {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--docnitz-radius-circle);
    background: var(--docnitz-primary-50);
    color: var(--lp-primary-dark);
    font-size: var(--docnitz-text-xs);
}
.lp-story-text {
    margin: 0;
    color: var(--lp-muted);
    font-size: var(--docnitz-text-base);
    line-height: 1.5;
}
.lp-story--danger {
    border-color: var(--docnitz-danger-border);
}
.lp-story--danger .lp-story-step { color: var(--docnitz-danger-text); }
.lp-story--danger .lp-story-step > span {
    background: var(--docnitz-danger-bg);
    color: var(--docnitz-danger-text);
}
.lp-track-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    margin: 0;
    color: var(--lp-muted);
    font-size: var(--docnitz-text-sm);
}
.lp-track-progress {
    display: none;
}

@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
    .lp-js .lp-problem {
        height: 190vh;
        padding: 0;
    }
    .lp-js .lp-problem-sticky {
        position: sticky;
        top: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100vh;
        overflow: hidden;
    }
    .lp-js .lp-track-viewport {
        overflow: visible;
        padding: 2rem 0 2.5rem;
        scroll-snap-type: none;
    }
    .lp-js .lp-track {
        gap: 2rem;
        transform: translate3d(calc(var(--progress, 0) * var(--lp-shift, 0px) * -1), 0, 0);
        will-change: transform;
    }
    .lp-js .lp-track-steps { gap: 1.5rem; }
    /* sobreposição crescente no fim da história */
    .lp-js .lp-track-steps > :nth-child(4) { margin-left: -1.5rem; z-index: 1; }
    .lp-js .lp-track-steps > :nth-child(5) { margin-left: -2.5rem; z-index: 2; }
    .lp-js .lp-track-hint { display: none; }
    .lp-js .lp-track-progress {
        display: block;
        width: min(16rem, 40vw);
        height: 3px;
        margin: 0 auto;
        overflow: hidden;
        border-radius: var(--docnitz-radius-pill);
        background: var(--docnitz-border-strong);
    }
    .lp-js .lp-track-progress > span {
        display: block;
        height: 100%;
        background: var(--docnitz-primary);
        transform: scaleX(var(--progress, 0));
        transform-origin: left center;
    }
}
@media (min-width: 992px) and (max-height: 780px) and (prefers-reduced-motion: no-preference) {
    .lp-js .lp-problem .lp-title { font-size: clamp(1.75rem, 1rem + 2.2vw, 2.75rem); }
    .lp-js .lp-problem .lp-lead { font-size: var(--docnitz-text-lg); }
    .lp-js .lp-problem-head { margin-bottom: 1rem; }
    .lp-js .lp-story-visual { min-height: 8rem; }
}


/* =====================================================================================
   7. MOMENTOS 3+4 · VIRADA → PRODUTO (#produto) — uma sequência em Deep Teal
   Base (celular, sem JS, movimento reduzido): título final + subtítulo + painel + lista de anotações, estático.
   ≥ 992 px: .lp-show-pin alto + palco sticky; --chips (0–.30), --win (.15–.45), --swap (.45–.55) e o --t de cada
   anotação (.58, .66, .74, .82) derivam do --progress gravado pelo landing.js.
   ===================================================================================== */
.lp-show {
    position: relative;
    isolation: isolate;
    padding: var(--lp-section-y) 0;
    background: var(--docnitz-deep);
    color: var(--docnitz-on-dark);
}
.lp-show::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(55% 45% at 50% 55%, var(--docnitz-accent-glow), transparent 72%);
    pointer-events: none;
}
.lp-body .lp-title--on-dark {
    color: var(--docnitz-on-dark-strong);
}
.lp-show-head {
    max-width: 56rem;
    text-align: center;
}
.lp-show-titles {
    display: grid;
}
.lp-show-titles > * {
    align-self: center;
    grid-area: 1 / 1;
    margin-bottom: 1rem;
}
.lp-show .lp-title {
    font-size: clamp(2rem, 1.2rem + 2.4vw, 3.25rem);
}
.lp-show-a .lp-title {
    margin-bottom: .75rem;
}
.lp-show-q {
    display: none;
}
.lp-body .lp-show-lead {
    color: var(--docnitz-on-dark);
}
.lp-show-stage {
    width: min(100% - 2rem, 1080px);
    margin: clamp(2rem, 1.5rem + 2vw, 3rem) auto 0;
}
.lp-show-visual {
    position: relative;
}
.lp-show-window {
    margin-inline: auto;
}
.lp-turn-chips {
    display: none;
}
.lp-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem .875rem;
    border-radius: var(--docnitz-radius-md);
    background: var(--docnitz-card);
    color: var(--lp-ink);
    font-size: var(--docnitz-text-sm);
    font-weight: var(--docnitz-weight-medium);
    white-space: nowrap;
    box-shadow: var(--docnitz-shadow-frame-dark);
}
.lp-chip .lp-icon { color: var(--docnitz-gray); }
.lp-chip--sheet .lp-icon { color: var(--docnitz-success); }
.lp-chip--note {
    background: var(--docnitz-warning-bg);
    color: var(--docnitz-warning-text);
    font-weight: var(--docnitz-weight-semibold);
}
.lp-chip-day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--docnitz-radius-sm);
    background: var(--docnitz-danger-bg);
    color: var(--docnitz-danger-text);
    font-size: var(--docnitz-text-xs);
    font-weight: var(--docnitz-weight-bold);
}
/* Marcadores sobre a tela desktop (posições valem só para ela: escondidos abaixo de 768 px) */
.lp-pin {
    position: absolute;
    top: var(--y);
    left: var(--x);
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: -1rem 0 0 -1rem;
    border-radius: var(--docnitz-radius-circle);
    background: var(--lp-primary);
    color: var(--docnitz-on-color);
    font-size: var(--docnitz-text-sm);
    font-weight: var(--docnitz-weight-bold);
    box-shadow: var(--docnitz-ring), var(--docnitz-shadow-md);
}
.lp-notes {
    display: grid;
    gap: .875rem 2rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}
.lp-notes li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    color: var(--docnitz-on-dark-strong);
    font-size: var(--docnitz-text-lg);
    font-weight: var(--docnitz-weight-semibold);
    line-height: 1.35;
    letter-spacing: -.01em;
}
.lp-notes-n {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--docnitz-radius-circle);
    background: var(--docnitz-on-dark-active);
    color: var(--docnitz-light-on-dark);
    font-size: var(--docnitz-text-sm);
    font-weight: var(--docnitz-weight-bold);
}
.lp-show-cta {
    margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    text-align: center;
}
@media (min-width: 768px) {
    .lp-pin { display: inline-flex; }
    .lp-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .lp-notes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
    .lp-js .lp-show {
        padding: 0 0 var(--lp-section-y);
    }
    .lp-js .lp-show-pin {
        height: 215vh;
    }
    .lp-js .lp-show-sticky {
        --chips: clamp(0, var(--progress, 0) / .3, 1);
        --win: clamp(0, (var(--progress, 0) - .15) / .3, 1);
        --swap: clamp(0, (var(--progress, 0) - .45) / .1, 1);
        position: sticky;
        top: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100vh;
        overflow: hidden;
    }
    .lp-js .lp-show-q {
        display: block;
        opacity: calc(1 - var(--swap));
        transform: translate3d(0, calc(var(--swap) * -.75rem), 0);
    }
    .lp-js .lp-show-a {
        opacity: var(--swap);
        transform: translate3d(0, calc((1 - var(--swap)) * .75rem), 0);
    }
    .lp-js .lp-show-stage {
        width: min(100% - 4rem, 1080px);
        margin-top: 1.5rem;
    }
    .lp-js .lp-show-window {
        width: min(100%, (100vh - 23rem) * 1.55);
        opacity: var(--win);
        transform: scale(calc(.6 + var(--win) * .4));
        transform-origin: 50% 40%;
        will-change: transform, opacity;
    }
    .lp-js .lp-turn-chips {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: block;
        margin: 0;
        padding: 0;
        list-style: none;
        pointer-events: none;
    }
    .lp-js .lp-chip {
        position: absolute;
        top: 50%;
        left: 50%;
        opacity: calc(1 - var(--chips) * 1.1);
        transform: translate(-50%, -50%)
                   translate(calc(var(--x) * (1 - var(--chips))), calc(var(--y) * (1 - var(--chips))))
                   rotate(calc(var(--r) * (1 - var(--chips))))
                   scale(calc(1 - var(--chips) * .55));
    }
    .lp-js .lp-chip--sheet  { --x: -30vw; --y: -15vh; --r: -7deg; }
    .lp-js .lp-chip--mail   { --x: 27vw;  --y: -18vh; --r: 5deg; }
    .lp-js .lp-chip--note   { --x: -26vw; --y: 14vh;  --r: 6deg; }
    .lp-js .lp-chip--folder { --x: 29vw;  --y: 12vh;  --r: -5deg; }
    .lp-js .lp-chip--cal    { --x: -3vw;  --y: 22vh;  --r: -3deg; }
    /* Anotações: cada uma acende num trecho curto do progresso (--t = início) */
    .lp-js .lp-show .lp-pin,
    .lp-js .lp-show .lp-notes li {
        --on: clamp(0, (var(--progress, 0) - var(--t, 0)) / .05, 1);
    }
    .lp-js .lp-show .lp-pin {
        opacity: var(--on);
        transform: scale(calc(.5 + var(--on) * .5));
    }
    .lp-js .lp-show .lp-notes {
        margin-top: 1.5rem;
    }
    .lp-js .lp-show .lp-notes li {
        opacity: var(--on);
        translate: 0 calc((1 - var(--on)) * .5rem);
        transition: none;
    }
}
@media (min-width: 992px) and (max-height: 760px) and (prefers-reduced-motion: no-preference) {
    .lp-js .lp-show .lp-title { font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem); }
    .lp-js .lp-show-lead { font-size: var(--docnitz-text-base); }
    .lp-js .lp-show .lp-notes li { font-size: var(--docnitz-text-base); }
}


/* =====================================================================================
   8. MOMENTO 5 · BENEFÍCIOS — texto rola, moldura sticky troca a tela (crossfade)
   Base: imagem logo abaixo de cada texto. ≥ 992 px sem JS/movimento reduzido: texto | imagem lado a lado.
   ===================================================================================== */
.lp-benefits {
    background: var(--docnitz-bg);
}
.lp-steps {
    display: grid;
    gap: clamp(3.5rem, 2.5rem + 4vw, 6rem);
    margin: 0;
    padding: 0;
    list-style: none;
}
.lp-step-n {
    display: block;
    margin-bottom: .75rem;
    color: var(--lp-primary);
    font-size: var(--docnitz-text-sm);
    font-weight: var(--docnitz-weight-bold);
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
}
.lp-step-title {
    margin: 0 0 .75rem;
    font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.25rem);
    font-weight: var(--docnitz-weight-bold);
    line-height: 1.12;
    letter-spacing: -.03em !important;
    text-wrap: balance;
}
.lp-step-text {
    max-width: 30rem;
    margin: 0;
    color: var(--lp-muted);
    font-size: var(--docnitz-text-lg);
    line-height: 1.55;
}
.lp-step-media {
    margin-top: 1.75rem;
}
.lp-step-media.lp-ratio-4x5 {
    max-width: 22rem;
}
.lp-step-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left top;
}
.lp-benefits-aside {
    display: none;
}
@media (min-width: 992px) {
    .lp-step {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        grid-template-rows: auto auto 1fr;
        column-gap: 4rem;
        align-items: start;
    }
    .lp-step > :not(.lp-step-media) { grid-column: 1; }
    .lp-step-media { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
    .lp-step-media.lp-ratio-4x5 { width: 60%; justify-self: center; }
}
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
    .lp-js .lp-benefits-grid {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 4rem;
        align-items: start;
    }
    .lp-js .lp-steps { gap: 0; }
    .lp-js .lp-step {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 46vh;
        opacity: .32;
        transition: opacity var(--docnitz-reveal) var(--docnitz-ease);
    }
    .lp-js .lp-step:first-child { min-height: 36vh; justify-content: flex-start; padding-top: 0; }
    .lp-js .lp-step:last-child { min-height: 40vh; }
    .lp-js .lp-step.is-active { opacity: 1; }
    .lp-js .lp-step-media { display: none; }
    .lp-js .lp-benefits-aside {
        position: sticky;
        top: max(5.5rem, 50vh - 12rem);
        display: block;
    }
    .lp-stage {
        aspect-ratio: 16 / 10;
        background: var(--docnitz-card);
    }
    .lp-stage-shot {
        position: absolute;
        inset: 0;
        opacity: 0;
        transform: scale(.985);
        transition: opacity var(--docnitz-reveal) var(--docnitz-ease), transform var(--docnitz-reveal) var(--docnitz-ease-out);
    }
    .lp-stage-shot.is-active {
        opacity: 1;
        transform: none;
    }
    .lp-stage-shot > img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: left top;
    }
    .lp-stage-shot.is-portrait {
        display: flex;
        justify-content: center;
        padding: 1.75rem;
        background: var(--docnitz-primary-50);
    }
    .lp-stage-shot.is-portrait > img {
        width: auto;
        height: 100%;
        aspect-ratio: 4 / 5;
        border-radius: var(--docnitz-radius-md);
        box-shadow: var(--lp-shadow-lg);
        object-fit: cover;
    }
}


/* =====================================================================================
   9. MOMENTO 6 · ANTES → DEPOIS — cortina (clip-path) controlada por --progress
   Base: dois painéis empilhados com rótulos.
   ===================================================================================== */
.lp-compare {
    padding: var(--lp-section-y) 0;
}
.lp-compare-stage {
    position: relative;
    display: grid;
    gap: 1rem;
}
.lp-compare-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 24rem;
    border-radius: var(--lp-radius-lg);
}
.lp-compare-panel--before {
    display: flex;
    background: var(--docnitz-surface-2);
}
.lp-compare-photo {
    position: absolute;
    inset: 0;
    z-index: -1;
}
.lp-compare-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--docnitz-deep) 45%, transparent));
}
.lp-compare-label {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 3;
    margin: 0;
    padding: .375rem .875rem;
    border-radius: var(--docnitz-radius-pill);
    background: var(--docnitz-card);
    color: var(--lp-ink);
    font-size: var(--docnitz-text-sm);
    font-weight: var(--docnitz-weight-semibold);
    box-shadow: var(--docnitz-shadow-sm);
}
.lp-compare-label--brand {
    background: var(--lp-primary);
    color: var(--docnitz-on-color);
}
.lp-compare-chips {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
    gap: .5rem;
    width: 100%;
    margin: 0;
    padding: 4.5rem 1rem 1.25rem;
    list-style: none;
}
.lp-compare-chips li {
    padding: .5rem .75rem;
    border-radius: var(--docnitz-radius-sm);
    background: var(--docnitz-card);
    color: var(--lp-ink);
    font-size: var(--docnitz-text-sm);
    font-weight: var(--docnitz-weight-medium);
    line-height: 1.3;
    box-shadow: var(--docnitz-shadow-float);
    transform: rotate(var(--r, 0deg));
}
.lp-compare-panel--before .lp-compare-chips li:nth-child(1) { --r: -3deg; }
.lp-compare-panel--before .lp-compare-chips li:nth-child(2) { --r: 2deg; }
.lp-compare-panel--before .lp-compare-chips li:nth-child(3) { --r: -1.5deg; }
.lp-compare-panel--before .lp-compare-chips li:nth-child(4) { --r: 3deg; background: var(--docnitz-warning-bg); color: var(--docnitz-warning-text); }
.lp-compare-panel--before .lp-compare-chips li:nth-child(5) { --r: -2.5deg; }
.lp-compare-panel--after {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 4.25rem 1rem 1.25rem;
    background: var(--docnitz-primary-50);
}
.lp-compare-chips--done {
    padding: 0;
}
.lp-compare-chips--done li {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    border: 1px solid var(--docnitz-primary-100);
    color: var(--lp-heading);
    box-shadow: var(--docnitz-shadow-xs);
    transform: none;
}
.lp-compare-chips--done .lp-icon { color: var(--lp-primary); }
.lp-compare-divider {
    display: none;
}
@media (min-width: 768px) {
    .lp-compare-panel--after { padding: 4.5rem 2rem 2rem; }
}
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
    .lp-js .lp-compare {
        height: 140vh;
        padding: 0;
    }
    .lp-js .lp-compare-sticky {
        --cut: clamp(0, (var(--progress, 0) - .15) * 1.45, 1);
        position: sticky;
        top: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100vh;
        overflow: hidden;
    }
    .lp-js .lp-compare .lp-head { margin-bottom: 2rem; }
    .lp-js .lp-compare-stage {
        display: block;
        width: min(100%, (100vh - 14rem) * 16 / 9);
        aspect-ratio: 16 / 9;
        margin-inline: auto;
        overflow: hidden;
        border-radius: var(--lp-radius-lg);
        box-shadow: var(--lp-shadow-lg);
    }
    .lp-js .lp-compare-panel {
        position: absolute;
        inset: 0;
        min-height: 0;
        border-radius: 0;
    }
    .lp-js .lp-compare-panel--before .lp-compare-label { right: 1.25rem; left: auto; top: 1.25rem; }
    .lp-js .lp-compare-panel--before .lp-compare-chips {
        position: absolute;
        inset: 0;
        padding: 0;
    }
    .lp-js .lp-compare-panel--before .lp-compare-chips li {
        position: absolute;
        top: var(--cy);
        left: var(--cx);
        padding: .625rem .875rem;
        font-size: var(--docnitz-text-base);
    }
    .lp-js .lp-compare-panel--before .lp-compare-chips li:nth-child(1) { --cx: 6%;  --cy: 14%; }
    .lp-js .lp-compare-panel--before .lp-compare-chips li:nth-child(2) { --cx: 58%; --cy: 22%; }
    .lp-js .lp-compare-panel--before .lp-compare-chips li:nth-child(3) { --cx: 14%; --cy: 62%; }
    .lp-js .lp-compare-panel--before .lp-compare-chips li:nth-child(4) { --cx: 40%; --cy: 44%; }
    .lp-js .lp-compare-panel--before .lp-compare-chips li:nth-child(5) { --cx: 62%; --cy: 72%; }
    .lp-js .lp-compare-panel--after {
        flex-direction: row;
        align-items: center;
        gap: 2.5rem;
        padding: 3.5rem 2.75rem 2.5rem;
        clip-path: inset(0 calc((1 - var(--cut)) * 100%) 0 0);
    }
    .lp-js .lp-compare-panel--after .lp-compare-label { left: 1.25rem; top: 1.25rem; }
    .lp-js .lp-compare-shot {
        flex: 1 1 auto;
        min-width: 0;
        transform: scale(calc(.96 + var(--cut) * .04));
        transform-origin: left center;
    }
    .lp-js .lp-compare-chips--done {
        flex: 0 0 auto;
        flex-direction: column;
        align-content: flex-start;
        width: auto;
    }
    .lp-js .lp-compare-chips--done li { font-size: var(--docnitz-text-base); padding: .625rem .875rem; }
    .lp-js .lp-compare-divider {
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(var(--cut) * 100%);
        z-index: 4;
        display: block;
        width: 3px;
        margin-left: -1.5px;
        background: var(--docnitz-card);
        box-shadow: var(--lp-shadow-lg);
        opacity: clamp(0, min(var(--cut), 1 - var(--cut)) * 25, 1);
    }
}


/* =====================================================================================
   10. MOMENTO 7 · PESSOAS (perfis ilustrativos / depoimentos) E GARANTIAS
   Base: slider por scroll-snap. ≥ 992 px: grade centralizada (3 + 2).
   ===================================================================================== */
.lp-people {
    background: var(--docnitz-bg);
}
.lp-people-note {
    margin: 0;
    color: var(--lp-muted);
    font-size: var(--docnitz-text-sm);
}
.lp-people-list {
    display: flex;
    gap: 1rem;
    margin: 0 -1rem;
    padding: .5rem 1rem 1.5rem;
    overflow-x: auto;
    list-style: none;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    scrollbar-width: none;
}
.lp-people-list::-webkit-scrollbar {
    display: none;
}
.lp-person {
    display: flex;
    flex: 0 0 min(84%, 22rem);
    scroll-snap-align: start;
}
.lp-person > figure {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    margin: 0;
    padding: 1.5rem;
    border: 1px solid var(--docnitz-border-card);
    border-radius: var(--lp-radius);
    background: var(--docnitz-card);
    box-shadow: var(--lp-shadow);
}
.lp-person-tag {
    align-self: flex-start;
    padding: .1875rem .625rem;
    border: 1px solid var(--docnitz-neutral-border);
    border-radius: var(--docnitz-radius-pill);
    background: var(--docnitz-neutral-bg);
    color: var(--docnitz-neutral-text);
    font-size: var(--docnitz-text-xs);
    font-weight: var(--docnitz-weight-semibold);
}
.lp-person-quote {
    flex: 1;
    margin: 0;
}
.lp-person-quote p {
    margin: 0;
    color: var(--lp-ink);
    font-size: var(--docnitz-text-lg);
    line-height: 1.55;
}
.lp-person-quote p::before { content: "“"; }
.lp-person-quote p::after { content: "”"; }
.lp-person-who {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.lp-avatar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--docnitz-radius-circle);
    background: var(--docnitz-primary-100);
    color: var(--lp-heading);
    font-size: var(--docnitz-text-base);
    font-weight: var(--docnitz-weight-bold);
    object-fit: cover;
}
.lp-person-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}
.lp-person-meta strong {
    color: var(--lp-heading);
    font-size: var(--docnitz-text-base);
    font-weight: var(--docnitz-weight-semibold);
}
.lp-person-meta span {
    color: var(--lp-muted);
    font-size: var(--docnitz-text-sm);
}
.lp-guarantees {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem 2rem;
    margin: clamp(2.5rem, 2rem + 2vw, 4rem) 0 0;
    padding: 0;
    color: var(--lp-muted);
    font-size: var(--docnitz-text-sm);
    list-style: none;
}
.lp-guarantees li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.lp-guarantees .lp-icon { color: var(--lp-primary); flex: none; }
/* Celular: lista vertical alinhada à esquerda (centralizada, as linhas que quebram desalinham os ícones) */
@media (max-width: 575.98px) {
    .lp-guarantees {
        flex-direction: column;
        align-items: flex-start;
        width: fit-content;
        margin-inline: auto;
    }
    .lp-guarantees li { align-items: flex-start; }
    .lp-guarantees .lp-icon { margin-top: .2em; }
}
@media (min-width: 992px) {
    .lp-people-list {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem;
        margin: 0;
        padding: 0;
        overflow: visible;
    }
    .lp-person { flex: 0 1 calc((100% - 3rem) / 3); }
}


/* =====================================================================================
   11. MOMENTO 8 · PLANOS E DÚVIDAS
   ===================================================================================== */
.lp-plans {
    padding-bottom: clamp(3rem, 2rem + 3vw, 4.5rem);
}

/* Seletor "Mensal | Anual": radios nativos num controle segmentado (oculto sem JS; landing.js tira o hidden) */
.lp-cycle {
    display: flex;
    gap: .25rem;
    width: fit-content;
    min-width: 0;
    max-width: 100%;
    margin: calc(clamp(2.5rem, 1.5rem + 3vw, 4.5rem) * -.5) auto 2rem;
    padding: .25rem;
    border: 1px solid var(--lp-border-strong);
    border-radius: var(--docnitz-radius-pill);
    background: var(--docnitz-card);
    box-shadow: var(--docnitz-shadow-xs);
}
.lp-cycle[hidden] { display: none; }
.lp-cycle-option {
    position: relative;
    margin: 0;
}
.lp-cycle-option input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.lp-cycle-option > span {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.5rem;
    padding: .375rem 1.125rem;
    border-radius: var(--docnitz-radius-pill);
    color: var(--lp-muted);
    font-size: var(--docnitz-text-base);
    font-weight: var(--docnitz-weight-semibold);
    white-space: nowrap;
    transition: background-color var(--docnitz-fast) var(--docnitz-ease), color var(--docnitz-fast) var(--docnitz-ease),
                box-shadow var(--docnitz-fast) var(--docnitz-ease);
}
.lp-cycle-option input:hover + span { color: var(--lp-heading); }
.lp-cycle-option input:checked + span {
    background: var(--lp-primary);
    color: var(--docnitz-on-color);
    box-shadow: var(--docnitz-shadow-btn);
}
.lp-cycle-option input:focus-visible + span { box-shadow: var(--docnitz-ring); }
.lp-cycle-save {
    padding: .125rem .5rem;
    border-radius: var(--docnitz-radius-pill);
    background: var(--docnitz-success-bg);
    color: var(--docnitz-success-text);
    font-size: var(--docnitz-text-xs);
    font-weight: var(--docnitz-weight-semibold);
    line-height: 1.4;
}
.lp-cycle-option input:checked + span .lp-cycle-save {
    background: var(--docnitz-card);
    color: var(--lp-primary-dark);
}
@media (max-width: 359.98px) {
    .lp-cycle-option > span { padding-inline: .75rem; }
}

.lp-plan-grid {
    display: grid;
    gap: 1.25rem;
    max-width: 28rem;
    margin: 0 auto;
}
.lp-plan {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    border: 1px solid var(--lp-border-strong);
    border-radius: var(--lp-radius-lg);
    background: var(--docnitz-card);
    transition: box-shadow var(--docnitz-base) var(--docnitz-ease), border-color var(--docnitz-base) var(--docnitz-ease);
}
.lp-plan:hover {
    box-shadow: var(--docnitz-shadow-card-hover);
}
.lp-plan.is-featured {
    border-color: var(--lp-primary);
    box-shadow: var(--docnitz-outline-selected), var(--lp-shadow-lg);
}
.lp-plan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.lp-plan-name {
    margin: 0;
    font-size: var(--docnitz-text-lg);
    font-weight: var(--docnitz-weight-semibold);
}
.lp-plan-tag {
    padding: .25rem .625rem;
    border-radius: var(--docnitz-radius-pill);
    background: var(--docnitz-primary-50);
    color: var(--lp-primary-dark);
    font-size: var(--docnitz-text-xs);
    font-weight: var(--docnitz-weight-semibold);
    white-space: nowrap;
}
.lp-plan-tagline {
    margin: .375rem 0 0;
    color: var(--lp-muted);
    font-size: var(--docnitz-text-sm);
    line-height: 1.5;
}
.lp-plan-offer {
    margin: 1.25rem 0 0;
}
.lp-plan-offer-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .5rem;
}
.lp-plan-offer-name {
    color: var(--lp-heading);
    font-size: var(--docnitz-text-sm);
    font-weight: var(--docnitz-weight-semibold);
}
.lp-plan-save {
    padding: .125rem .5rem;
    border-radius: var(--docnitz-radius-pill);
    background: var(--docnitz-success-bg);
    color: var(--docnitz-success-text);
    font-size: var(--docnitz-text-xs);
    font-weight: var(--docnitz-weight-semibold);
    line-height: 1.4;
}
.lp-plan-price {
    display: flex;
    align-items: baseline;
    gap: .25rem;
    margin: 0;
}
.lp-plan-amount {
    color: var(--lp-heading);
    font-size: 2.5rem;
    font-weight: var(--docnitz-weight-bold);
    line-height: 1;
    letter-spacing: -.035em;
    font-variant-numeric: tabular-nums;
}
.lp-plan-period {
    color: var(--lp-muted);
    font-size: var(--docnitz-text-base);
}
.lp-plan-billing {
    margin: .5rem 0 0;
    color: var(--lp-muted);
    font-size: var(--docnitz-text-sm);
    font-variant-numeric: tabular-nums;
}
/* Sem JS: o anual aparece em versão compacta logo abaixo do mensal, com link próprio (.lp-plan-alt) */
.lp-plan-offer--annual {
    padding: .875rem 1rem;
    border-radius: var(--docnitz-radius-md);
    background: var(--docnitz-bg);
}
.lp-plan-offer--annual .lp-plan-amount { font-size: 1.5rem; }
.lp-plan-offer--annual .lp-plan-billing { margin-top: .25rem; }
.lp-plan-alt {
    margin-top: .875rem;
    font-size: var(--docnitz-text-sm);
    font-weight: var(--docnitz-weight-semibold);
    text-align: center;
}
/* Com JS (landing.js põe .is-cycle-ready e data-cycle na seção): só o ciclo escolhido, no tamanho cheio */
.lp-plans.is-cycle-ready .lp-plan-offer--annual {
    padding: 0;
    border-radius: 0;
    background: none;
}
.lp-plans.is-cycle-ready .lp-plan-offer--annual .lp-plan-amount { font-size: 2.5rem; }
.lp-plans.is-cycle-ready .lp-plan-offer--annual .lp-plan-billing { margin-top: .5rem; }
.lp-plans.is-cycle-ready[data-cycle="monthly"] .lp-plan-offer[data-cycle="annual"],
.lp-plans.is-cycle-ready[data-cycle="annual"] .lp-plan-offer[data-cycle="monthly"],
.lp-plans.is-cycle-ready .lp-plan-alt {
    display: none;
}
.lp-plans.is-cycle-ready .lp-plan-offer {
    animation: lp-fade var(--docnitz-base) var(--docnitz-ease);
}
.lp-plan-list {
    display: grid;
    gap: .625rem;
    margin: 1.5rem 0 2rem;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--docnitz-border);
    list-style: none;
    font-size: var(--docnitz-text-base);
}
.lp-plan-list li {
    position: relative;
    padding-left: 1.5rem;
    line-height: 1.45;
}
/* "check" desenhado em CSS (sem fonte de ícones) */
.lp-plan-list li::before {
    content: "";
    position: absolute;
    top: .4em;
    left: .125rem;
    width: .75rem;
    height: .4rem;
    border-bottom: 2px solid var(--lp-primary);
    border-left: 2px solid var(--lp-primary);
    transform: rotate(-45deg);
}
.lp-plan-cta {
    width: 100%;
    margin-top: auto;
}
.lp-plans-assure {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem 2rem;
    margin: 2rem 0 0;
    padding: 0;
    color: var(--lp-ink);
    font-size: var(--docnitz-text-sm);
    font-weight: var(--docnitz-weight-medium);
    list-style: none;
}
.lp-plans-assure li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.lp-plans-assure .lp-icon { color: var(--lp-primary); flex: none; }
.lp-plans-foot {
    margin: .875rem 0 0;
    color: var(--lp-muted);
    font-size: var(--docnitz-text-sm);
    text-align: center;
    text-wrap: balance;
}
@media (max-width: 575.98px) {
    .lp-plan { padding: 1.5rem; }
    /* lista vertical alinhada à esquerda (como as garantias) */
    .lp-plans-assure {
        flex-direction: column;
        align-items: flex-start;
        width: fit-content;
        margin-inline: auto;
    }
    .lp-plans-assure li { align-items: flex-start; }
    .lp-plans-assure .lp-icon { margin-top: .2em; }
}
@media (min-width: 768px) {
    .lp-plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        max-width: 52rem;
    }
}

.lp-faq {
    max-width: 48rem;
    margin: clamp(3.5rem, 2.5rem + 3vw, 5rem) auto 0;
}
.lp-faq-title {
    margin: 0 0 1.5rem;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    font-weight: var(--docnitz-weight-bold);
    letter-spacing: -.03em !important;
    text-align: center;
}
.lp-faq-item {
    border-bottom: 1px solid var(--lp-border-strong);
}
.lp-faq-item:first-child {
    border-top: 1px solid var(--lp-border-strong);
}
.lp-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0;
    border-radius: var(--docnitz-radius-sm);
    color: var(--lp-heading);
    font-size: var(--docnitz-text-lg);
    font-weight: var(--docnitz-weight-semibold);
    line-height: 1.4;
    list-style: none;
    cursor: pointer;
    transition: color var(--docnitz-fast) var(--docnitz-ease);
}
.lp-faq-item summary::-webkit-details-marker {
    display: none;
}
.lp-faq-item summary::after {
    content: "";
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--lp-muted);
    -webkit-mask: var(--docnitz-icon-chevron) center / 1.25rem no-repeat;
    mask: var(--docnitz-icon-chevron) center / 1.25rem no-repeat;
    transition: transform var(--docnitz-base) var(--docnitz-ease);
}
.lp-faq-item summary:hover {
    color: var(--lp-primary-dark);
}
.lp-faq-item[open] summary::after {
    transform: rotate(180deg);
}
.lp-faq-item p {
    max-width: 42rem;
    margin: 0 0 1.5rem;
    color: var(--lp-muted);
    font-size: var(--docnitz-text-base);
    line-height: 1.65;
}
.lp-faq-item[open] p {
    animation: lp-fade var(--docnitz-slow) var(--docnitz-ease);
}
@keyframes lp-fade {
    from { opacity: 0; translate: 0 -.25rem; }
    to { opacity: 1; translate: none; }
}


/* =====================================================================================
   12. MOMENTO 9 · CTA FINAL
   ===================================================================================== */
.lp-final {
    padding: clamp(4.5rem, 3rem + 5vw, 7.5rem) 0;
    border-top: 1px solid var(--docnitz-border);
    background: radial-gradient(60% 55% at 50% 100%, var(--docnitz-primary-50), transparent 75%), var(--docnitz-card);
    text-align: center;
}
.lp-final-inner {
    max-width: 62rem;
    margin: 0 auto;
}
.lp-final-symbol {
    display: block;
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 2rem;
    border-radius: var(--docnitz-radius-lg);
    box-shadow: var(--docnitz-shadow-md);
}
.lp-final-title {
    margin-bottom: 0;
}
.lp-final-title span {
    display: block;
    color: var(--lp-primary);
}
.lp-final-lead {
    max-width: 32rem;
    margin: 2rem auto 0;
    color: var(--lp-muted);
    font-size: var(--docnitz-text-lg);
}


/* =====================================================================================
   13. RODAPÉ
   ===================================================================================== */
.lp-footer {
    padding: 3.5rem 0 1.5rem;
    background: var(--docnitz-deep);
    color: var(--docnitz-on-dark);
    font-size: var(--docnitz-text-base);
}
.lp-footer a {
    color: var(--docnitz-on-dark);
    text-decoration: none;
    transition: color var(--docnitz-fast) var(--docnitz-ease);
}
.lp-footer a:hover {
    color: var(--docnitz-on-dark-strong);
    text-decoration: underline;
}
.lp-footer a:focus-visible {
    outline-color: var(--docnitz-light);
}
.lp-footer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
}
.lp-footer-brand {
    grid-column: 1 / -1;
}
.lp-brand-footer,
.lp-brand-footer:hover {
    text-decoration: none !important;
}
.lp-brand-footer .lp-brand-wordmark {
    display: block;
    width: auto;
    height: 1.5rem;
}
.lp-tagline {
    margin: 1rem 0 0;
    color: var(--lp-primary-dark);
    font-weight: var(--docnitz-weight-semibold);
    letter-spacing: .01em;
}
.lp-footer .lp-tagline {
    color: var(--docnitz-light-on-dark);
}
.lp-footer-text {
    max-width: 380px;
    margin: .5rem 0 0;
}
.lp-footer-title {
    margin-bottom: .9rem;
    color: var(--docnitz-on-dark-strong) !important;
    font-size: var(--docnitz-text-sm);
    font-weight: var(--docnitz-weight-semibold);
    letter-spacing: .06em !important;
    text-transform: uppercase;
}
.lp-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.lp-footer li {
    margin-bottom: .45rem;
    overflow-wrap: anywhere;
}
.lp-footer-bottom {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--docnitz-on-dark-line);
    color: var(--docnitz-on-dark-muted);
    font-size: var(--docnitz-text-sm);
}
@media (max-width: 479.98px) {
    .lp-footer-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 768px) {
    .lp-footer-grid { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
    .lp-footer-brand { grid-column: auto; }
}


/* =====================================================================================
   14. PÁGINAS LEGAIS (Termos de Uso, Política de Privacidade, Política de Cookies)
   Cabeçalho com versão/data e abas entre os documentos; sumário lateral fixo (no celular, recolhível);
   "Em resumo" em destaque; seções numeradas em cartões; tabelas legíveis no celular.
   ===================================================================================== */
.legal { padding-bottom: 4.5rem; background: var(--lp-soft); }
.legal-hero {
    padding: 2.75rem 0 2rem;
    background: linear-gradient(180deg, var(--docnitz-card) 0%, var(--lp-soft) 100%);
    border-bottom: 1px solid var(--lp-border);
}
.legal-eyebrow {
    margin: 0 0 .5rem;
    color: var(--lp-primary-dark);
    font-size: var(--docnitz-text-sm);
    font-weight: var(--docnitz-weight-semibold);
    letter-spacing: .06em;
    text-transform: uppercase;
}
.legal-hero h1 {
    margin: 0 0 .75rem;
    color: var(--lp-heading);
    font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem);
    font-weight: var(--docnitz-weight-bold);
    letter-spacing: -.02em;
}
.legal-lead { max-width: 46rem; margin: 0 0 1.25rem; color: var(--lp-muted); font-size: 1.0625rem; line-height: 1.6; }
.legal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1.5rem; color: var(--lp-muted); font-size: var(--docnitz-text-sm); }
.legal-version {
    padding: .25rem .75rem;
    border-radius: var(--docnitz-radius-pill);
    background: var(--docnitz-primary);
    color: #fff;
    font-weight: var(--docnitz-weight-semibold);
}
.legal-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.legal-tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: .375rem 1rem;
    border: 1.5px solid var(--lp-border-strong);
    border-radius: var(--docnitz-radius-pill);
    background: var(--docnitz-card);
    color: var(--lp-heading);
    font-size: var(--docnitz-text-sm);
    font-weight: var(--docnitz-weight-semibold);
    text-decoration: none;
}
.legal-tabs a:hover { border-color: var(--docnitz-accent); }
.legal-tabs a[aria-current="page"] { border-color: var(--lp-heading); background: var(--lp-heading); color: #fff; }

.legal-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-top: 2rem; }
@media (min-width: 992px) {
    .legal-layout { grid-template-columns: 17rem minmax(0, 1fr); gap: 2.5rem; align-items: start; }
    .legal-toc { position: sticky; top: calc(var(--lp-nav-h) + 1.5rem); max-height: calc(100vh - var(--lp-nav-h) - 3rem); overflow-y: auto; }
}
.legal-toc-box {
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    background: var(--docnitz-card);
}
.legal-toc-box summary {
    padding: .875rem 1.125rem;
    color: var(--lp-heading);
    font-size: var(--docnitz-text-sm);
    font-weight: var(--docnitz-weight-bold);
    cursor: pointer;
    list-style-position: inside;
}
.legal-toc-box ol { margin: 0; padding: 0 .5rem .75rem; list-style: none; counter-reset: legal-toc; }
.legal-toc-box li { counter-increment: legal-toc; }
.legal-toc-box a {
    display: flex;
    gap: .5rem;
    padding: .375rem .625rem;
    border-radius: 8px;
    color: var(--lp-muted);
    font-size: .875rem;
    line-height: 1.4;
    text-decoration: none;
}
.legal-toc-box a::before { content: counter(legal-toc) "."; min-width: 1.5rem; color: var(--lp-border-strong); font-variant-numeric: tabular-nums; }
.legal-toc-box a:hover { background: var(--lp-soft); color: var(--lp-heading); }
.legal-toc-box a.is-active { background: color-mix(in srgb, var(--docnitz-primary) 10%, transparent); color: var(--lp-primary-dark); font-weight: var(--docnitz-weight-semibold); }
.legal-toc-box a.is-active::before { color: var(--docnitz-primary); }

.legal-body { min-width: 0; max-width: 50rem; }
.legal-summary {
    margin-bottom: 1.5rem;
    padding: 1.375rem 1.5rem;
    border: 1px solid color-mix(in srgb, var(--docnitz-primary) 25%, transparent);
    border-radius: var(--lp-radius);
    background: color-mix(in srgb, var(--docnitz-light) 10%, var(--docnitz-card));
}
.legal-summary h2 { margin: 0 0 .75rem; color: var(--lp-heading); font-size: 1.125rem; font-weight: var(--docnitz-weight-bold); }
.legal-summary ul { margin: 0; padding: 0; list-style: none; }
.legal-summary li { position: relative; margin-bottom: .5rem; padding-left: 1.5rem; color: var(--lp-ink); font-size: 1rem; line-height: 1.55; }
.legal-summary li::before { content: ""; position: absolute; left: .25rem; top: .55em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--docnitz-primary); }

.legal-section {
    margin-bottom: 1rem;
    padding: 1.5rem 1.625rem;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    background: var(--docnitz-card);
    scroll-margin-top: calc(var(--lp-nav-h) + 1rem);
}
.legal-section h2 {
    display: flex;
    align-items: baseline;
    gap: .625rem;
    margin: 0 0 .875rem;
    color: var(--lp-heading);
    font-size: 1.25rem;
    font-weight: var(--docnitz-weight-bold);
    letter-spacing: -.01em;
}
.legal-num {
    flex: none;
    display: inline-grid;
    place-items: center;
    min-width: 1.875rem;
    height: 1.875rem;
    padding: 0 .375rem;
    border-radius: 8px;
    background: var(--lp-soft);
    color: var(--lp-primary-dark);
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
}
.legal-section h3 { margin: 1.25rem 0 .5rem; color: var(--lp-heading); font-size: 1.0625rem; font-weight: var(--docnitz-weight-bold); }
.legal-section p, .legal-section li { color: var(--lp-ink); font-size: 1rem; line-height: 1.7; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul, .legal-section ol { padding-left: 1.25rem; }
.legal-section li { margin-bottom: .375rem; }
.legal-section a { color: var(--lp-primary-dark); font-weight: var(--docnitz-weight-medium); }
.legal-note {
    margin: 1rem 0 0;
    padding: .875rem 1rem;
    border-left: 3px solid var(--docnitz-primary);
    border-radius: 0 10px 10px 0;
    background: var(--lp-soft);
    font-size: .9375rem !important;
}
.legal-callout {
    display: grid;
    gap: .75rem;
    margin: 1rem 0;
}
@media (min-width: 768px) { .legal-callout { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.legal-callout > div { padding: 1rem 1.125rem; border: 1px solid var(--lp-border); border-radius: 12px; background: var(--lp-soft); }
.legal-callout h3 { margin-top: 0; font-size: 1rem; }
.legal-callout p { margin: 0; font-size: .9375rem; }

/* Tabelas: no celular cada linha vira um cartão (data-label em cada célula) */
.legal-table { width: 100%; margin: 1rem 0 0; border-collapse: separate; border-spacing: 0; font-size: .9375rem; }
.legal-table th, .legal-table td { padding: .75rem .875rem; border-bottom: 1px solid var(--lp-border); text-align: left; vertical-align: top; line-height: 1.5; }
.legal-table thead th { background: var(--lp-soft); color: var(--lp-heading); font-size: .8125rem; font-weight: var(--docnitz-weight-semibold); letter-spacing: .02em; text-transform: uppercase; }
.legal-table thead th:first-child { border-top-left-radius: 10px; }
.legal-table thead th:last-child { border-top-right-radius: 10px; }
.legal-table td:first-child { color: var(--lp-heading); font-weight: var(--docnitz-weight-semibold); }
.legal-table code { color: var(--lp-heading); font-size: .875rem; }
@media (max-width: 767.98px) {
    .legal-table thead { display: none; }
    .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: 100%; }
    .legal-table tr { margin-bottom: .75rem; border: 1px solid var(--lp-border); border-radius: 12px; overflow: hidden; }
    .legal-table td { padding: .5rem .875rem; border-bottom: 1px solid var(--lp-border); }
    .legal-table td:last-child { border-bottom: 0; }
    .legal-table td::before { content: attr(data-label); display: block; margin-bottom: .125rem; color: var(--lp-muted); font-size: .75rem; font-weight: var(--docnitz-weight-semibold); text-transform: uppercase; letter-spacing: .03em; }
    .legal-section { padding: 1.25rem 1.125rem; }
}
.legal-cta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.legal-footnote { margin-top: 1.5rem; color: var(--lp-muted); font-size: var(--docnitz-text-sm); }


/* =====================================================================================
   15. MOVIMENTO REDUZIDO E IMPRESSÃO
   Movimento reduzido: nada preso, nada atrelado ao scroll, tudo visível e estático
   (os blocos sticky acima só existem com prefers-reduced-motion: no-preference).
   ===================================================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after { transition: none !important; animation: none !important; }
    .lp-body .btn:active,
    .lp-body .lp-cta:hover,
    .lp-header.is-hidden,
    .lp-hero-tilt,
    .lp-float { transform: none; }
    /* Problema: pilha estática em vez de trilho */
    .lp-track-viewport { overflow: visible; padding: 0; scroll-snap-type: none; }
    .lp-track { display: block; width: auto; padding: 0 var(--lp-edge); }
    .lp-story--photo { width: auto; max-width: 34rem; margin: 0 auto 1.5rem; }
    .lp-track-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
    .lp-story { width: auto; transform: none; }
    .lp-track-hint { display: none; }
}
@media print {
    .lp-header,
    .lp-footer,
    .lp-skip-link { display: none !important; }
    body.lp-body { padding-top: 0; }
    .lp-js [data-lp-reveal] { opacity: 1 !important; translate: none !important; }
}

/* Botão "Preferências de cookies" no rodapé escuro, com aparência de link */
.lp-footer .cc-footer-link { color: var(--docnitz-on-dark); text-align: left; }
.lp-footer .cc-footer-link:hover { color: var(--docnitz-on-dark-strong); }
.lp-footer .cc-footer-link:focus-visible { outline: 2px solid var(--docnitz-light); outline-offset: 2px; }
.legal-inline-link { color: var(--lp-primary-dark); font-weight: var(--docnitz-weight-medium); text-decoration: underline; }