/* ============================================================
   TATO TOTAL — PORTA DE ENTRADA (/) — v2
   Ver docs/arquivo/planos-concluidos/PLANO_LANDING_V2.md

   A v1 contava o que o produto faz. Esta MOSTRA: a demonstração
   prova o mecanismo e uma série fotográfica acompanha a mesma
   pequena empresária pelos quatro produtos. Texto estreito,
   imagem larga, interface exata em grafismos de HTML/CSS.

   Três decisões que explicam quase tudo aqui:
     1. TIPO GRANDE E LEVE. Peso 500, nunca 700. Título grande
        em negrito parece anúncio de liquidação; grande e leve
        chama atenção sem gritar.
     2. QUASE NENHUMA BORDA. O que separa uma seção da outra é
        espaço e fundo, não linha. Caixa com borda em volta de
        tudo foi o que dava à v1 o ar de template.
     3. RESPIRO GRANDE. 120px entre seções. Aperto passa
        urgência; espaço passa confiança.

   Fundo claro quente + navy + o arco da marca como assinatura.
   Não é branco/preto seco de propósito: o respiro é emprestado,
   a cor é da casa.
   ============================================================ */

:root {
    --lp-paper:      #FFFFFF;
    --lp-wash:       #F7F5F1;   /* seção alternada, quente */
    --lp-wash-cool:  #F2F5F9;   /* seção alternada, fria */
    --lp-navy:       var(--tato-navy, #031A39);
    --lp-ink:        #0B2140;
    --lp-ink-2:      #52627A;
    /* O tom terciário (rótulo de seção, legenda de foto, linha de segurança
       embaixo do botão) precisa passar em AA sobre os TRÊS fundos claros da
       página, não só sobre o branco. O #8A96A8 anterior dava 3.0:1 no branco
       e 2.75:1 na faixa quente — reprovado nos dois. Este dá 5.4 / 5.0 / 4.9.
       Quem separa terciário de secundário aqui é o tamanho, o peso e a caixa
       alta do rótulo, não a lavagem da cor. */
    --lp-ink-3:      #5F6B7C;
    --lp-line:       #E7E2DA;
    --lp-line-soft:  #F0ECE5;
    --lp-green:      #1B8F57;
    --lp-wa:         #25D366;

    --lp-max:     1180px;
    --lp-read:    780px;    /* largura de LEITURA — o texto nunca passa daqui */
    --lp-gut:     24px;
    --lp-display: 'Fredoka', 'Inter', system-ui, sans-serif;
    --lp-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --lp-shadow:  0 30px 70px -32px rgba(3, 26, 57, .38);
    --lp-shadow-s: 0 16px 40px -22px rgba(3, 26, 57, .3);

    /* O arco de 5 bolhas, a assinatura da marca. Numa variável porque ele
       aparece em régua, em traço de rótulo, em barra de progresso e em
       marcador de item — e uma sexta cópia à mão é como uma delas acaba
       ficando com a ordem trocada. */
    --lp-arc: var(--arc-gradient);
}

/* ---------- base ----------
   Resets por seletor de TIPO (0,0,1), nunca `.lp p` (0,1,1):
   qualquer regra de componente precisa vencê-los sem depender
   da ordem no arquivo. Foi assim que, na v1, `.lp p{margin:0}`
   venceu `.lp-caption{margin:auto}` e a legenda nunca centrava. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

h1, h2, h3, h4 {
    font-family: var(--lp-display);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.06;
    margin: 0;
    color: var(--lp-navy);
}
p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }
svg { width: 18px; height: 18px; flex: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }

body.lp {
    margin: 0;
    background: var(--lp-paper);
    color: var(--lp-ink);
    font-family: var(--lp-body);
    font-size: 18px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.lp-wrap { width: 100%; max-width: var(--lp-max); margin: 0 auto; padding: 0 var(--lp-gut); }
.lp-read { max-width: var(--lp-read); margin-left: auto; margin-right: auto; }
/* Mesma largura de leitura, mas ancorada na margem esquerda.
   `.lp-read` centraliza o bloco: numa seção estreita inteira (as dúvidas)
   isso está certo, porque o conteúdo abaixo também é estreito e as duas
   bordas coincidem. Sobre uma grade que ocupa a largura toda (as três
   cenas, os quatro produtos, a comparação do filtro) o título ficava
   recuado ~166px em relação à primeira coluna — a página perdia a linha
   vertical que sustenta a leitura e o recuo parecia acidental. */
.lp-lead { max-width: var(--lp-read); margin-left: 0; margin-right: auto; }

/* O cabeçalho é fixo: sem esta folga, pular para uma âncora esconde
   justamente o título da seção para onde a pessoa clicou. */
#demonstracao, #modelos, #produtos, #planos, #duvidas, #conversa {
    scroll-margin-top: 88px;
}

.lp-arc { height: 4px; background: var(--lp-arc); }

/* ---------- tipografia de seção ---------- */

.lp-section { padding: 120px 0; }
.lp-section-tight { padding: 88px 0; }
/* A faixa alternada é um degradê vertical, não um retângulo de cor.
   Chapada, ela lê como uma tira colada por cima da página — o corte
   aparece antes do conteúdo. Saindo do branco e assentando na cor, a
   seção entra sem costura visível e o respiro de 120px faz o trabalho de
   separação sozinho, que era a intenção desde o começo. */
.lp-wash      { background: linear-gradient(180deg, #FFFFFF 0%, var(--lp-wash) 16%, var(--lp-wash) 100%); }
.lp-wash-cool { background: linear-gradient(180deg, #FFFFFF 0%, var(--lp-wash-cool) 16%, var(--lp-wash-cool) 100%); }

/* O rótulo de seção carrega o arco.
   O arco de 5 bolhas é o que a marca tem de mais reconhecível, e nesta
   página ele aparecia UMA vez: a régua de 4px no topo, que ninguém
   registra. O resto era navy sobre branco com pontinhos coloridos de 9px —
   uma paleta tímida, distribuída por igual, que qualquer empresa poderia
   ter. Aqui o gradiente vira a assinatura que separa uma seção da outra:
   um traço curto antes de cada rótulo, seis vezes ao longo da página.
   Curto de propósito — o arco assina, não decora. */
.lp-kicker {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lp-ink-3);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.lp-kicker::before {
    content: "";
    width: 34px; height: 3px; border-radius: 2px;
    background: var(--lp-arc);
    flex-shrink: 0;
}
/* Numa composição centrada o traço iria para a esquerda do bloco inteiro e
   quebraria a simetria — ali ele vem em cima, centralizado. */
.lp-center .lp-kicker { flex-direction: column; gap: 14px; }
.lp-h2 { font-size: clamp(34px, 4.6vw, 56px); }
.lp-sub {
    font-size: clamp(17px, 1.5vw, 20px);
    color: var(--lp-ink-2);
    margin-top: 20px;
    max-width: 33em;
}
.lp-center { text-align: center; }
.lp-center .lp-sub { margin-left: auto; margin-right: auto; }

/* ---------- botões ---------- */

.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 30px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    font-family: var(--lp-body);
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.lp-btn svg { width: 18px; height: 18px; }
.lp-btn:hover { transform: translateY(-1px); }
.lp-btn:focus-visible { outline: 3px solid var(--arc-2); outline-offset: 3px; }

/* A CHAMADA DE AÇÃO É LIMA, NÃO NAVY.
   O navy é a cor do texto e do fundo escuro desta página inteira — um botão
   navy sobre branco é mais um pedaço de navy, e o olho não separa o que é
   para ler do que é para clicar. O lima do arco é a única cor que não
   aparece em mais nada aqui, e por isso vira o sinal de "aqui se clica".
   Escrita em navy sobre ele, e nunca em branco: lima com texto branco não
   passa em contraste nenhum. */
.lp-btn-primary { background: var(--tato-lime, #93D63F); color: var(--lp-navy); }
.lp-btn-primary:hover { background: #A6E351; }
.lp-btn-ghost { background: transparent; color: var(--lp-navy); border-color: #D8D1C6; }
.lp-btn-ghost:hover { border-color: var(--lp-navy); }
.lp-btn-light { background: #fff; color: var(--lp-navy); }
.lp-btn-lg { padding: 19px 38px; font-size: 17.5px; }
.lp-btn-block { width: 100%; }

.lp-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    color: var(--lp-navy);
    border-bottom: 1.5px solid rgba(3,26,57,.22);
    padding-bottom: 3px;
}
.lp-link:hover { border-bottom-color: var(--lp-navy); }
.lp-link svg { width: 16px; height: 16px; transition: transform .16s ease; }
.lp-link:hover svg { transform: translateX(4px); }

/* ---------- cabeçalho ---------- */

.lp-head {
    position: sticky; top: 0; z-index: 60;
    background: rgba(255,255,255,.86);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease;
}
.lp-head.is-stuck { border-bottom-color: var(--lp-line); }
.lp-head .inner { display: flex; align-items: center; gap: 30px; height: 72px; }
.lp-head .brand {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}
.lp-head .brand img {
    display: block;
    width: auto;
    height: auto;
    max-width: 174px;
    max-height: 50px;
    object-fit: contain;
    /* A marca é um PNG único: um contraste sutil melhora a leitura de
       "total" no fundo claro sem tirar o protagonismo de "tato". */
    filter: contrast(1.12);
}
.lp-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; font-size: 15.5px; }
.lp-nav a { text-decoration: none; color: var(--lp-ink-2); font-weight: 500; }
.lp-nav a:hover { color: var(--lp-navy); }
.lp-head-cta { display: flex; align-items: center; gap: 16px; }
.lp-head-cta .lp-btn { padding: 12px 22px; font-size: 15px; }
.lp-head-cta .enter { font-size: 15.5px; font-weight: 500; text-decoration: none; color: var(--lp-ink-2); }

/* ---------- menu do celular ----------
   Abaixo de 960px o menu inteiro sumia e sobrava logo + botão. Numa página
   de quase 18 mil pixels isso significava rolar 22 telas para chegar ao
   preço, e nenhuma porta para quem já é cliente. O painel desce colado no
   cabeçalho em vez de cobrir a tela — quem abriu quer escolher um destino,
   não sair da página. */

.lp-menu { display: none; position: relative; }
.lp-menu-toggle {
    cursor: pointer;
    width: 42px; height: 42px; border-radius: 12px;
    display: grid; place-items: center;
    border: 1px solid var(--lp-line);
    background: #fff;
    transition: border-color .18s ease;
}
.lp-menu-toggle:hover { border-color: var(--lp-navy); }
.lp-menu-toggle:focus-visible { outline: 3px solid rgba(47,194,168,.32); outline-offset: 2px; }
.lp-menu .bars { display: grid; gap: 5px; width: 17px; }
.lp-menu .bars i { height: 2px; border-radius: 2px; background: var(--lp-navy); transition: transform .18s ease; }
.lp-menu.is-open .bars i:first-child { transform: translateY(3.5px) rotate(45deg); }
.lp-menu.is-open .bars i:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

.lp-menu-panel {
    position: absolute; right: 0; top: calc(100% + 12px);
    min-width: 232px;
    display: grid;
    padding: 13px 10px 10px;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--lp-shadow);
    overflow: hidden;
}
.lp-menu-panel[hidden] { display: none; }
/* O arco assina o painel — é o mesmo traço da régua do topo da página. */
.lp-menu-panel::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 3px;
    background: var(--lp-arc);
}
.lp-menu-panel a {
    padding: 12px 14px; border-radius: 10px;
    text-decoration: none; font-weight: 500; font-size: 16px;
    color: var(--lp-ink-2);
}
.lp-menu-panel a:hover { background: var(--lp-wash); color: var(--lp-navy); }
.lp-menu-panel .is-enter {
    margin-top: 6px; padding-top: 16px;
    border-top: 1px solid var(--lp-line-soft);
    border-radius: 0 0 10px 10px;
    color: var(--lp-navy); font-weight: 600;
}

@media (max-width: 960px) {
    .lp-nav { display: none; }
    .lp-head-cta { margin-left: auto; }
    .lp-menu { display: block; }
    /* "Entrar" agora mora dentro do menu, por extenso — repetido nos dois
       lugares, viraria a mesma palavra duas vezes no mesmo canto. */
    .lp-head-cta .enter { display: none; }
}
@media (max-width: 520px) {
    .lp-head .inner { height: 62px; gap: 12px; }
    .lp-head .brand img { max-width: 128px; max-height: 42px; }
    .lp-head-cta { gap: 10px; }
    .lp-head-cta .lp-btn { padding: 11px 16px; font-size: 14.5px; }
    .lp-menu-toggle { width: 40px; height: 40px; }
}
@media (max-width: 380px) {
    .lp-head .brand img { height: 24px; }
    .lp-head-cta .lp-btn { padding: 11px 13px; font-size: 13.5px; }
}

/* ---------- abertura ---------- */

/* A abertura tem atmosfera, não fundo chapado.
   Branco liso atrás de um título grande é a escolha que o desenho faz
   quando não faz nenhuma: limpo e sem lugar. Estes três campos de luz —
   nas cores do arco, em opacidade que nem se nomeia como cor — dão
   profundidade ao topo e fazem a foto de tela parecer pousada sobre a
   página em vez de colada nela. Mesma técnica já usada em `.lp-dark`.
   Não é gradiente decorativo: são as cores da marca, quase invisíveis. */
.lp-hero { padding: 84px 0 24px; position: relative; overflow: hidden; }
.lp-hero::before {
    content: "";
    position: absolute; inset: -80px 0 0;
    background:
        radial-gradient(58% 62% at 18% 4%,  rgba(79,169,220,.20), transparent 68%),
        radial-gradient(52% 58% at 82% 2%,  rgba(47,194,168,.17), transparent 66%),
        radial-gradient(66% 46% at 50% 42%, rgba(246,217,62,.13), transparent 72%);
    pointer-events: none;
    z-index: 0;
}
.lp-hero > * { position: relative; z-index: 1; }
.lp-hero-grid {
    display: grid; grid-template-columns: 1.08fr 1fr;
    align-items: center; gap: clamp(38px, 4vw, 56px);
}
.lp-hero-copy { min-width: 0; }
.lp-hero .lp-kicker { margin-bottom: 22px; }
.lp-hero h1 {
    font-size: clamp(43px, 4.7vw, 62px);
    letter-spacing: -0.035em;
    max-width: 10.5em;
}
.lp-hero .lede {
    font-size: clamp(18px, 1.7vw, 21px);
    color: var(--lp-ink-2);
    margin: 26px 0 0;
    max-width: 31em;
}
.lp-hero .lp-btn { margin-top: 36px; }
/* Bloco, não inline: como inline-flex ela subia para a MESMA linha do
   botão, e o microtexto de segurança tem que vir embaixo dele — é ali que
   ele responde à objeção que o botão acabou de levantar. */
.lp-reassure {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    margin-top: 22px; font-size: 15px; color: var(--lp-ink-3);
}
.lp-reassure svg { width: 16px; height: 16px; color: var(--lp-green); }
.lp-hero-copy .lp-reassure { justify-content: flex-start; }
.lp-hero-visual {
    position: relative; min-width: 0;
    aspect-ratio: 4 / 4.15;
    border-radius: 26px; box-shadow: var(--lp-shadow);
}
.lp-hero-visual::before {
    content: ""; position: absolute; inset: -12px 24px 12px -12px;
    border-radius: 30px; background: var(--lp-arc); opacity: .28; z-index: -1;
}
.lp-hero-visual > img {
    width: 100%; height: 100%; object-fit: cover; object-position: 55% center;
    border-radius: 26px;
}
.lp-presence-card {
    position: absolute; left: -28px; bottom: 28px; width: min(330px, 72%);
    padding: 20px; border-radius: 18px;
    background: rgba(255,255,255,.94); backdrop-filter: blur(12px);
    box-shadow: var(--lp-shadow-s);
}
.lp-presence-card > p {
    font-size: 12.5px; font-weight: 700; letter-spacing: .11em;
    text-transform: uppercase; color: var(--lp-ink-3); margin-bottom: 13px;
}
.lp-presence-card ol {
    display: grid;
    /* A segunda coluna carrega a única expressão longa: dar a ela o respiro
       certo evita que "É recomendado" pareça um item acidentalmente quebrado. */
    grid-template-columns: minmax(0, .7fr) minmax(0, 1fr);
    column-gap: 12px; row-gap: 10px;
}
.lp-presence-card li {
    display: flex; align-items: center; min-width: 0;
    gap: 8px; font-size: 14px; color: var(--lp-navy);
}
.lp-presence-card li span {
    width: 30px; height: 30px; display: grid; place-items: center; flex: none;
    border-radius: 9px; background: #EAF4FB; color: var(--tato-blue, #4FA9DC);
}
.lp-presence-card li:nth-child(2) span { background: #E8F8F4; color: var(--arc-2); }
.lp-presence-card li:nth-child(3) span { background: #EAF8F0; color: var(--tato-green, #34C97E); }
.lp-presence-card li:nth-child(4) span { background: #F7F7DA; color: #769E21; }
.lp-presence-card svg { width: 15px; height: 15px; }
.lp-presence-card b {
    font-size: 13.5px; font-weight: 600; letter-spacing: -.01em;
    white-space: nowrap;
}

/* O convite ao scroll — um chevron quieto no fim da hero.
   A página evita microanimações de enfeite; esta é a única exceção, e por
   necessidade: o primeiro viewport termina aqui e algo precisa dizer que a
   página continua. Círculo fino (a linha mais leve da casa), cor terciária,
   descida de 6px em laço suave. Sem movimento para quem pede menos. */
.lp-scroll-hint {
    display: grid;
    place-items: center;
    position: relative;
    width: 72px; height: 72px;
    margin: 88px auto 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--lp-shadow-s);
    animation: lp-scroll-hint 2.4s ease-in-out infinite;
}
/* O anel é a própria assinatura da marca: o mesmo gradiente do arco do
   topo, girando como um loader em volta do convite ao scroll. O movimento
   do anel e o balanço do círculo são independentes: um roda, o outro desce. */
.lp-scroll-hint::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: 50%;
    padding: 4px;
    background: var(--lp-arc);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: lp-scroll-hint-spin 1.6s linear infinite;
}
.lp-scroll-hint svg { width: 27px; height: 27px; color: var(--lp-navy); }
@keyframes lp-scroll-hint {
    0%, 100% { transform: translateY(0); opacity: .85; }
    50%      { transform: translateY(6px); opacity: .4; }
}
@keyframes lp-scroll-hint-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .lp-scroll-hint { animation: none; opacity: .6; }
    .lp-scroll-hint::before { animation: none; }
}

@media (max-width: 920px) {
    .lp-hero { padding-top: 60px; }
    .lp-hero-grid { grid-template-columns: 1fr; gap: 56px; }
    .lp-hero-copy { max-width: 720px; }
    .lp-hero h1 { max-width: 11.5em; }
    .lp-hero-visual { max-width: 760px; aspect-ratio: 16 / 10; }
}
@media (max-width: 620px) {
    /* O card passa a revelar a foto antes de continuar como legenda visual:
       só o primeiro terço se apoia na imagem; o restante ganha fundo próprio. */
    .lp-hero { padding: 48px 0 24px; }
    .lp-hero-grid { gap: 32px; }
    .lp-hero h1 { font-size: clamp(39px, 12vw, 54px); }
    .lp-hero .lp-btn { width: 100%; }
    .lp-hero-copy .lp-reassure { justify-content: center; }
    .lp-hero-visual { border-radius: 18px; aspect-ratio: 4 / 5; }
    .lp-hero-visual::before { inset: -8px 12px 8px -8px; border-radius: 22px; }
    .lp-hero-visual > img { border-radius: 18px; object-position: 52% center; }
    .lp-presence-card {
        left: 14px; right: 14px; top: 100%; bottom: auto;
        width: auto; padding: 16px;
        transform: translateY(-33.333%);
    }
    .lp-scroll-hint { margin-top: 56px; }
}

/* ============================================================
   A SIMULAÇÃO DE USO — QUATRO ATOS
   Duas pontas na mesma tela: o site do visitante e o painel do
   dono. Um palco só; o que muda entre os atos é o ESTADO.

   O estado do ATO vive em `#lp-acts[data-ato]`; os micro-estados
   de dentro de um ato (popup aberto, enviando, salvo) vivem em
   classes `is-*` no `.lp-demo`. Separar os dois é o que permite
   pular de capítulo sem a cena ficar num meio-termo estranho.
   ============================================================ */

/* ---------- o que muda, antes de a cena começar ----------
   Duas metades e uma seta. A primeira é o mundo de hoje e fica em tom
   secundário; a segunda é o que se compra e fica em navy, com peso. Elas
   entram acima do palco porque a cena leva 25s para chegar ao fim, e quem
   só passou o olho precisa saber o que está em jogo antes disso. */

.lp-ba {
    margin: 26px auto 0;
    max-width: 48em;
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 10px 14px;
    font-size: 16px;
}
.lp-ba .antes  { color: var(--lp-ink-3); }
.lp-ba .depois { color: var(--lp-navy); font-weight: 600; }
.lp-ba .seta   { display: inline-flex; color: var(--arc-2); }
.lp-ba .seta svg { width: 18px; height: 18px; }

/* Empilhado, a seta tem que apontar para baixo — apontando para a direita
   ela mandaria o olho para fora da coluna. */
@media (max-width: 640px) {
    .lp-ba { flex-direction: column; gap: 9px; }
    .lp-ba .seta svg { transform: rotate(90deg); }
}

/* ---------- barra de capítulos ---------- */

.lp-acts-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 48px;
}
.lp-acts-nav button {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-top: 2px solid var(--lp-line);
    padding: 14px 12px 0 0;
    font-family: var(--lp-body);
    cursor: pointer;
    display: grid;
    gap: 3px;
    transition: border-color .25s ease;
}
.lp-acts-nav .n { font-family: var(--lp-display); font-size: 12.5px; font-weight: 600; color: var(--lp-ink-3); }
.lp-acts-nav .t { font-size: 15.5px; font-weight: 600; color: var(--lp-ink-3); letter-spacing: -.01em; transition: color .25s ease; }
/* Sem `opacity` aqui: ela recolocava por transparência o contraste que a cor
   acabou de ganhar (13px a 80% volta para ~4:1). Recuar é papel do tamanho. */
.lp-acts-nav .r { font-size: 13px; color: var(--lp-ink-3); }
.lp-acts-nav button:hover .t { color: var(--lp-ink-2); }
.lp-acts-nav button:focus-visible { outline: 2px solid var(--arc-2); outline-offset: 3px; }

/* o capítulo em cena */
.lp-acts[data-ato="1"] .lp-acts-nav li:nth-child(1) button,
.lp-acts[data-ato="2"] .lp-acts-nav li:nth-child(2) button,
.lp-acts[data-ato="3"] .lp-acts-nav li:nth-child(3) button,
.lp-acts[data-ato="4"] .lp-acts-nav li:nth-child(4) button,
.lp-acts[data-ato="5"] .lp-acts-nav li:nth-child(5) button { border-top-color: var(--lp-navy); }
.lp-acts[data-ato="1"] .lp-acts-nav li:nth-child(1) .t,
.lp-acts[data-ato="2"] .lp-acts-nav li:nth-child(2) .t,
.lp-acts[data-ato="3"] .lp-acts-nav li:nth-child(3) .t,
.lp-acts[data-ato="4"] .lp-acts-nav li:nth-child(4) .t,
.lp-acts[data-ato="5"] .lp-acts-nav li:nth-child(5) .t { color: var(--lp-navy); }

@media (max-width: 760px) {
    .lp-acts-nav { grid-template-columns: 1fr 1fr; gap: 8px 14px; }
    .lp-acts-nav .r { display: none; }
    .lp-acts-nav .t { font-size: 14.5px; }
}

/* ---------- narração ---------- */

.lp-act-narr {
    margin-top: 30px;
    text-align: center;
    min-height: 3.4em;
}
.lp-act-narr p {
    display: none;
    font-size: 17px;
    color: var(--lp-ink-2);
    max-width: 44em;
    margin: 0 auto;
}
.lp-act-narr b { color: var(--lp-navy); font-weight: 600; }
.lp-acts[data-ato="1"] .lp-act-narr [data-narr="1"],
.lp-acts[data-ato="2"] .lp-act-narr [data-narr="2"],
.lp-acts[data-ato="3"] .lp-act-narr [data-narr="3"],
.lp-acts[data-ato="4"] .lp-act-narr [data-narr="4"] { display: block; }

/* Sem JavaScript a barra de capítulos não serve para nada e a narração
   precisa aparecer inteira — vira um resumo dos cinco momentos em texto. */
html:not(.lp-js) .lp-acts-nav { display: none; }
html:not(.lp-js) .lp-act-narr p { display: block; margin-bottom: 12px; }
html:not(.lp-js) .lp-demo-controls { display: none; }

/* ============================================================
   O PALCO
   ============================================================ */

.lp-demo-grid {
    position: relative;   /* âncora do cartão de convite, que cobre o palco */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 40px;
    align-items: start;
}
.lp-demo-col { position: relative; }
.lp-demo-tag {
    font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--lp-ink-3); margin-bottom: 14px;
}

/* --- lado esquerdo: o site --- */
.lp-demo-screen {
    position: relative;
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--lp-shadow-s);
    overflow: hidden;
    /* 430 e nao 380: no ato 4 o painel do lado precisa caber dois cartoes
       mais a anotacao, e as duas telas tem que ter a mesma altura. */
    height: 430px;
}
.lp-demo-bar {
    display: flex; align-items: center; gap: 6px;
    padding: 12px 14px; background: #F4F1EC;
}
.lp-demo-bar i { width: 9px; height: 9px; border-radius: 50%; background: #DAD3C8; display: block; }
.lp-demo-bar span { margin-left: 10px; flex: 1; height: 18px; border-radius: 999px; background: #E7E1D7; }

.lp-demo-page { padding: 22px 24px; }
.lp-demo-page .b { background: #EFE9DF; border-radius: 5px; }
.lp-demo-page .b.t { height: 16px; width: 62%; margin-bottom: 11px; }
.lp-demo-page .b.s { height: 9px; width: 84%; margin-bottom: 7px; }
.lp-demo-page .b.s2 { height: 9px; width: 55%; margin-bottom: 18px; }
.lp-demo-page .b.img { height: 84px; width: 100%; background: #E9E2D6; }

/* o botão verde e o cursor que caminha até ele */
.lp-demo-wa {
    position: absolute; right: 18px; bottom: 18px;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--lp-wa);
    display: grid; place-items: center;
    box-shadow: 0 8px 20px -6px rgba(37,211,102,.7);
    transition: transform .18s ease;
}
.lp-demo-wa svg { width: 26px; height: 26px; fill: #fff; }
.lp-demo.is-clicking .lp-demo-wa { transform: scale(.88); }

.lp-demo-cursor {
    position: absolute; left: 42%; top: 40%;
    width: 20px; height: 20px; z-index: 5;
    opacity: 0;
    transition: opacity .3s ease, left .9s cubic-bezier(.4,.1,.2,1), top .9s cubic-bezier(.4,.1,.2,1);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
}
.lp-demo-cursor svg { width: 20px; height: 20px; fill: var(--lp-ink); }
.lp-demo.is-pointing .lp-demo-cursor { opacity: 1; left: calc(100% - 44px); top: calc(100% - 44px); }

/* o popup de captura */
.lp-demo-popup {
    position: absolute; left: 16px; right: 16px; bottom: 16px;
    background: #fff; border-radius: 13px;
    box-shadow: 0 20px 46px -14px rgba(3,26,57,.34);
    overflow: hidden;
    opacity: 0; transform: translateY(14px) scale(.97);
    transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.3,1);
    pointer-events: none;
}
.lp-demo.is-open .lp-demo-popup { opacity: 1; transform: none; }
.lp-demo-popup .top {
    background: var(--lp-wa); color: #fff; padding: 11px 14px;
    display: flex; align-items: center; gap: 9px;
}
.lp-demo-popup .top svg { width: 19px; height: 19px; fill: currentColor; }
.lp-demo-popup .top strong { font-size: 13.5px; font-weight: 600; }
.lp-demo-popup .body { padding: 13px 14px 15px; }
.lp-demo-popup .body > p { font-size: 12.5px; color: var(--lp-ink-2); margin-bottom: 10px; }
.lp-demo-field {
    height: 36px; border: 1px solid var(--lp-line); border-radius: 8px;
    margin-bottom: 8px; display: flex; align-items: center; padding: 0 11px;
    font-size: 13.5px; color: var(--lp-ink); background: #FDFCFA;
}
.lp-demo-field.is-empty { color: var(--lp-ink-3); }
.lp-demo-caret {
    display: inline-block; width: 1.5px; height: 15px;
    background: var(--lp-navy); margin-left: 1px; vertical-align: -2px;
    animation: lp-blink 1s steps(1) infinite;
}
@keyframes lp-blink { 50% { opacity: 0; } }
.lp-demo-send {
    height: 38px; border-radius: 8px; background: var(--lp-wa); color: #fff;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    font-size: 13.5px; font-weight: 600; margin-top: 3px;
    transition: transform .15s ease;
}
.lp-demo-send svg { width: 15px; height: 15px; fill: currentColor; }
.lp-demo.is-sending .lp-demo-send { transform: scale(.95); }

/* --- lado direito: o painel --- */
.lp-demo-panel {
    background: var(--lp-navy);
    border-radius: 14px;
    box-shadow: var(--lp-shadow-s);
    overflow: hidden;
    height: 430px;
    display: flex; flex-direction: column;
}
.lp-demo-panel .ph {
    padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.1);
    display: flex; align-items: center; justify-content: space-between;
}
.lp-demo-panel .ph b { color: #fff; font-size: 14.5px; font-weight: 600; font-family: var(--lp-display); }
.lp-demo-count {
    background: rgba(255,255,255,.12); color: rgba(255,255,255,.75);
    font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
    transition: background-color .3s ease, color .3s ease;
}
.lp-demo.is-saved .lp-demo-count { background: var(--tato-green, #34C97E); color: var(--lp-navy); }

/* `safe center`: centraliza enquanto sobra espaço e volta a alinhar pelo
   topo quando o conteúdo passa da altura do painel (ato 4, com a anotação).
   Com `center` puro, o conteúdo alto seria cortado em cima E embaixo. */
.lp-demo-list { padding: 14px; display: grid; gap: 10px; align-content: safe center; flex: 1; }
.lp-demo-empty {
    color: rgba(255,255,255,.35); font-size: 14px; text-align: center;
    padding: 40px 16px; transition: opacity .3s ease;
}
.lp-demo.is-saved .lp-demo-empty { opacity: 0; }

.lp-demo-card {
    background: rgba(255,255,255,.07);
    border-left: 3px solid var(--tato-green, #34C97E);
    border-radius: 9px; padding: 12px 14px;
    opacity: 0; transform: translateY(-10px);
    transition: opacity .4s ease, transform .4s cubic-bezier(.2,.8,.3,1);
}
.lp-demo.is-saved .lp-demo-card { opacity: 1; transform: none; }
.lp-demo-card b { display: block; color: #fff; font-size: 14px; font-weight: 600; }
.lp-demo-card span { display: block; color: rgba(255,255,255,.55); font-size: 12.5px; margin-top: 2px; }
.lp-demo-card em {
    display: inline-block; font-style: normal; margin-top: 8px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    color: var(--tato-lime, #93D63F);
}

/* ---------- o que cada ato liga e desliga ---------- */

/* Ato 1: a conversa em branco que faz desistir. */
.lp-blank {
    position: absolute; left: 16px; right: 16px; bottom: 16px;
    background: #fff; border-radius: 13px; overflow: hidden;
    box-shadow: 0 20px 46px -14px rgba(3,26,57,.34);
    opacity: 0; transform: translateY(14px);
    transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.3,1);
    pointer-events: none;
}
.lp-demo.is-blank .lp-blank { opacity: 1; transform: none; }
.lp-blank .top {
    background: var(--lp-wa); color: #fff; padding: 11px 14px;
    display: flex; align-items: center; gap: 9px;
}
.lp-blank .top svg { width: 19px; height: 19px; fill: currentColor; }
.lp-blank .top strong { font-size: 13.5px; font-weight: 600; }
.lp-blank .body { padding: 26px 14px 14px; }
.lp-blank .vazio {
    text-align: center; font-size: 13px; color: var(--lp-ink-3);
    padding-bottom: 26px;
}
.lp-blank .campo {
    height: 36px; border: 1px solid var(--lp-line); border-radius: 999px;
    display: flex; align-items: center; padding: 0 14px;
    font-size: 13.5px; color: #B5AD9F; background: #FDFCFA;
}

/* Ato 3: o carimbo de fora do horário. */
.lp-night {
    position: absolute; top: 46px; left: 50%;
    transform: translateX(-50%) translateY(-6px);
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--lp-navy); color: #fff;
    font-size: 12px; font-weight: 600;
    padding: 6px 13px; border-radius: 999px;
    opacity: 0; transition: opacity .3s ease, transform .3s ease;
    z-index: 6;
}
.lp-night svg { width: 13px; height: 13px; }
.lp-acts[data-ato="3"] .lp-night { opacity: 1; transform: translateX(-50%); }

/* O popup fala de dia num ato e de noite no outro. */
/* O popup fala de dia num ato e de noite no outro.
   ATENÇÃO AO ALCANCE DESTES SELETORES: o botão de enviar fica DENTRO do
   popup, então `.lp-demo-popup .noite` também acertava o rótulo do botão —
   que herdava 12,5px e cor de texto escura e aparecia desformatado sobre o
   verde. Por isso o parágrafo é alvejado por `.body > p`, e o rótulo do
   botão só pelas regras de `.lp-demo-send`. */
.lp-demo-popup .body > p.noite { display: none; }
.lp-demo-send .noite { display: none; }
.lp-acts[data-ato="3"] .lp-demo-popup .body > p.dia { display: none; }
.lp-acts[data-ato="3"] .lp-demo-send .dia { display: none; }
.lp-acts[data-ato="3"] .lp-demo-popup .body > p.noite { display: block; }
.lp-acts[data-ato="3"] .lp-demo-send .noite { display: inline; }
.lp-demo-popup .body > p.noite { font-size: 12.5px; color: var(--lp-ink-2); margin-bottom: 11px; }

/* Os cartões entram um por vez e ficam. O contador acumula junto — número
   que sobe é a prova de que o sistema trabalha sozinho. */
.lp-demo-card { display: none; }
.lp-demo.is-c1 .lp-demo-card[data-card="1"],
.lp-demo.is-c2 .lp-demo-card[data-card="2"] { display: block; }
/* `display:none`, e não só `opacity:0`: transparente ele CONTINUAVA ocupando
   os ~100px do próprio recheio no topo da lista, e era isso que empurrava os
   cartões para o rodapé do painel. */
.lp-demo.is-c1 .lp-demo-empty, .lp-demo.is-c2 .lp-demo-empty { display: none; }
.lp-demo.is-c1 .lp-demo-card[data-card="1"],
.lp-demo.is-c2 .lp-demo-card[data-card="2"] { opacity: 1; transform: none; }

.lp-demo-card em.noite { color: var(--tato-blue, #4FA9DC); display: inline-flex; align-items: center; gap: 5px; }
.lp-demo-card em.noite svg { width: 12px; height: 12px; }

/* Ato 4: situação e anotação aparecem no cartão que já existe. */
.lp-card-status {
    display: none; margin-top: 10px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(255,255,255,.12); color: rgba(255,255,255,.8);
}
.lp-demo.is-status .lp-card-status { display: inline-block; }
/* Assim que o cartão ganha SITUAÇÃO, o selo "salva agora" sai: dois selos
   lado a lado dizendo coisas diferentes sobre o mesmo contato confundem. */
.lp-demo.is-status .lp-demo-card[data-card="1"] em.agora { display: none; }
.lp-demo.is-cliente .lp-card-status { background: var(--tato-green, #34C97E); color: var(--lp-navy); }
.lp-card-note {
    display: none; margin-top: 10px;
    font-size: 13px; color: rgba(255,255,255,.72);
    border-left: 2px solid rgba(255,255,255,.2); padding-left: 10px;
    font-style: italic;
}
.lp-demo.is-nota .lp-card-note { display: block; }

/* O convite, por cima do palco, no fim do ciclo. */
.lp-demo-cta {
    position: absolute; inset: 0;
    display: grid; place-content: center; justify-items: center; gap: 20px;
    background: rgba(250, 248, 244, .92);
    backdrop-filter: blur(6px);
    border-radius: 16px;
    opacity: 0; visibility: hidden;
    transition: opacity .45s ease, visibility .45s;
    z-index: 20;
}
.lp-demo.is-fim .lp-demo-cta { opacity: 1; visibility: visible; }
.lp-demo-cta p {
    font-family: var(--lp-display); font-weight: 500;
    font-size: clamp(24px, 3vw, 34px); letter-spacing: -.025em;
    color: var(--lp-navy); text-align: center;
}

.lp-demo-controls {
    margin-top: 22px; display: flex; align-items: center; justify-content: center; gap: 14px;
    font-size: 14px; color: var(--lp-ink-3);
}
.lp-demo-btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: transparent; border: 1.5px solid var(--lp-line);
    border-radius: 999px; padding: 8px 18px;
    /* 44px é o alvo mínimo para o dedo. É o único botão da página que estava
       abaixo disso — e é justamente o que a pessoa procura com pressa quando
       a animação a incomoda. */
    min-height: 44px;
    font-family: var(--lp-body); font-size: 14px; font-weight: 600;
    color: var(--lp-ink-2); cursor: pointer;
}
.lp-demo-btn:hover { border-color: var(--lp-navy); color: var(--lp-navy); }
.lp-demo-btn svg { width: 14px; height: 14px; }

@media (max-width: 820px) {
    .lp-demo-grid { grid-template-columns: 1fr; gap: 22px; }
    .lp-demo-screen, .lp-demo-panel { height: 400px; }
}

/* ---------- faixa de modelos ----------
   Rola na horizontal e é cortada na borda, para dizer "tem mais"
   sem precisar escrever. */

/* ============================================================
   FLUXO DA PRESENÇA COMPLETA
   Um palco, cinco momentos. A ferramenta em cena muda; a leitura
   permanece contínua para o prospect acompanhar o caminho do lead.
   ============================================================ */

.lp-flow {
    margin-top: 34px;
    padding: 30px;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(10,43,82,.1);
    border-radius: 24px;
    box-shadow: 0 24px 54px -38px rgba(3,26,57,.46);
}
.lp-flow-stage { min-height: 486px; margin-top: 0; }
.lp-flow-scene {
    display: none; grid-template-columns: minmax(190px,.7fr) minmax(0,1.3fr);
    gap: clamp(24px,5vw,58px); align-items: center;
}
.lp-flow-scene.is-active {
    display: grid; animation: lp-flow-in .55s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes lp-flow-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
.lp-flow-scene-copy { padding-left: 6px; }
.lp-flow-scene-product {
    position: relative; display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 13px;
    align-items: center; min-width: 0; padding-left: 12px;
    --lp-stage-accent: var(--arc-1);
}
.lp-flow-scene:nth-child(2) .lp-flow-scene-product { --lp-stage-accent: var(--arc-2); }
.lp-flow-scene:nth-child(3) .lp-flow-scene-product { --lp-stage-accent: var(--arc-3); }
.lp-flow-scene:nth-child(4) .lp-flow-scene-product { --lp-stage-accent: var(--arc-4); }
.lp-flow-scene:nth-child(5) .lp-flow-scene-product { --lp-stage-accent: var(--arc-5); }
.lp-flow-scene-product::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    border-radius: 99px; background: var(--lp-stage-accent);
}
.lp-flow-scene-icon {
    width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px;
    color: var(--lp-navy); background: rgba(10,43,82,.06);
    background: color-mix(in srgb, var(--lp-stage-accent) 18%, white);
}
.lp-flow-scene-icon svg { width: 20px; height: 20px; }
.lp-flow-scene-product-copy { min-width: 0; }
.lp-flow-scene-label {
    display: block; color: var(--lp-navy); font-size: 12px; font-weight: 700;
    letter-spacing: .1em; line-height: 1.2; text-transform: uppercase;
}
.lp-flow-scene-module {
    display: block; margin-top: 4px; color: var(--lp-ink-3); font-size: 11px; line-height: 1.25;
}
.lp-flow-scene-copy h3 {
    max-width: 12em; margin: 16px 0 14px; color: var(--lp-navy);
    font-family: var(--lp-display); font-size: clamp(25px,3vw,36px); font-weight: 500;
    letter-spacing: -.035em; line-height: 1.03;
}
.lp-flow-scene-copy p {
    max-width: 31em; margin: 0; color: var(--lp-ink-2); font-size: 16px; line-height: 1.65;
}
.lp-flow-window {
    display: grid; grid-template-rows: auto auto auto; align-content: start;
    overflow: hidden; min-width: 0; min-height: 0; border-radius: 18px;
    background: #fff; box-shadow: 0 22px 44px -26px rgba(3,26,57,.45);
}
.lp-flow-window-bar {
    display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px;
    min-height: 48px; padding: 0 18px; border-bottom: 1px solid rgba(10,43,82,.09);
    background: #F4F1EC;
}
.lp-flow-window-bar b {
    overflow: hidden; color: var(--lp-navy); font-family: var(--lp-display); font-size: 13px;
    font-weight: 600; text-overflow: ellipsis; white-space: nowrap;
}
.lp-flow-dots { display: inline-flex; gap: 5px; }
.lp-flow-dots i { display: block; width: 8px; height: 8px; border-radius: 50%; background: #DAD3C8; }
.lp-flow-window-state {
    color: var(--lp-ink-3); font-size: 10px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; white-space: nowrap; transition: color .3s ease;
}
.lp-flow-site-body {
    display: grid; grid-template-columns: minmax(0,1.25fr) minmax(172px,.75fr);
    gap: 14px; min-height: 0; padding: 18px; background: #F8FAFC;
}
.lp-flow-site-preview {
    position: relative; display: block; overflow: hidden; min-height: 0; border: 1px solid #E4E8EE;
    border-radius: 12px; background: #fff;
}
.lp-flow-site-result-image {
    display: block; width: 100%; height: auto; object-fit: contain; object-position: center;
}
.lp-flow-site-result .lp-flow-site-wa {
    position: absolute; right: 14px; bottom: 14px; z-index: 1; margin: 0;
}
.lp-flow-site-wa {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
    margin: auto 17px 16px; padding: 9px 12px; border-radius: 999px; background: var(--lp-wa);
    box-shadow: 0 9px 18px -8px rgba(37,211,102,.75); color: #fff; font-size: 11px;
    font-weight: 700; transition: transform .22s ease;
}
.lp-flow-site-wa svg { width: 15px; height: 15px; fill: currentColor; }
.lp-flow-site-result .lp-flow-site-wa-fab {
    display: grid; width: 48px; height: 48px; place-items: center; padding: 0;
    border-radius: 50%; isolation: isolate;
}
.lp-flow-site-wa-fab svg { position: relative; z-index: 2; width: 58%; height: 58%; fill: currentColor; }
.lp-flow-site-wa-ring {
    position: absolute; inset: 0; z-index: 0; border-radius: 50%;
    background: var(--lp-wa); opacity: .55; pointer-events: none;
    animation: lp-flow-site-wa-sonar 2.4s ease-out infinite;
}
.lp-flow-site-wa-ring-delay { animation-delay: 1.2s; }
@keyframes lp-flow-site-wa-sonar {
    0% { transform: scale(1); opacity: .55; }
    70%, 100% { transform: scale(2.1); opacity: 0; }
}
.lp-flow-site-tool {
    align-self: center; padding: 18px; border: 1px solid #E1E6ED; border-radius: 13px;
    background: #fff;
}
.lp-flow-tool-label {
    display: block; color: #8D9AAF; font-size: 10px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase;
}
.lp-flow-site-tool strong {
    display: block; margin: 13px 0 19px; color: var(--lp-navy); font-family: var(--lp-display);
    font-size: 17px; font-weight: 500; letter-spacing: -.02em; line-height: 1.15;
}
.lp-flow-meter { display: block; height: 6px; overflow: hidden; border-radius: 999px; background: #E9EDF2; }
.lp-flow-meter i {
    display: block; width: 62%; height: 100%; border-radius: inherit;
    background: var(--arc-2); transition: width .7s cubic-bezier(.2,.8,.3,1);
}
.lp-flow-action {
    display: inline-flex; align-items: center; justify-content: center; min-height: 42px;
    margin-top: 20px; padding: 0 15px; border-radius: 8px; background: var(--lp-navy);
    color: #fff; font-size: 12px; font-weight: 700;
    transition: background-color .3s ease, color .3s ease, transform .2s ease;
}
.lp-flow-contact-card,
.lp-flow-invite-card { position: relative; }
.lp-flow-cursor {
    --lp-cursor-fill: #fff;
    --lp-cursor-stroke: var(--lp-navy);
    position: absolute; left: 0; top: 0; z-index: 10; display: block;
    width: 27px; height: 27px; opacity: 0; pointer-events: none;
    transform: translate3d(var(--cursor-x, -32px), var(--cursor-y, -32px), 0) scale(.88);
    transform-origin: 5px 3px;
    transition: opacity .25s ease, transform .78s cubic-bezier(.2,.8,.3,1);
    filter: drop-shadow(0 2px 3px rgba(3,26,57,.3));
}
.lp-flow-cursor.is-visible {
    opacity: 1;
    transform: translate3d(var(--cursor-x, -32px), var(--cursor-y, -32px), 0) scale(1);
}
.lp-flow-cursor svg {
    display: block; width: 100%; height: 100%; overflow: visible;
    fill: var(--lp-cursor-fill); stroke: var(--lp-cursor-stroke); stroke-width: 1.25;
    stroke-linejoin: round; transition: transform .16s ease;
}
.lp-flow-cursor.is-clicking svg { transform: scale(.78); transform-origin: 5px 3px; }
.lp-flow-cursor.is-clicking::after {
    content: ''; position: absolute; left: 5px; top: 3px; width: 13px; height: 13px;
    border: 1.5px solid var(--lp-cursor-stroke); border-radius: 50%; opacity: 0;
    transform: translate(-50%, -50%) scale(.45);
    animation: lp-flow-cursor-click .42s ease-out;
}
@keyframes lp-flow-cursor-click {
    0% { opacity: .8; transform: translate(-50%, -50%) scale(.45); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); }
}
.lp-flow-window-contacts .lp-flow-cursor {
    --lp-cursor-fill: var(--lp-navy);
    --lp-cursor-stroke: #fff;
}
.lp-flow-action.is-flow-clicked { transform: scale(.94); }
#lp-demo .lp-flow-site-wa-fab.is-flow-clicked { transform: scale(.9); }
.lp-flow-confirm {
    position: static; display: flex; align-items: center; gap: 8px; min-width: 0;
    max-height: 0; margin: 0 16px; padding: 0 13px; overflow: hidden; border-radius: 9px;
    background: var(--tato-green,#34C97E); color: var(--lp-navy); font-size: 12px;
    font-weight: 700; opacity: 0;
    transition: max-height .35s ease, margin .35s ease, padding .35s ease, opacity .35s ease;
}
.lp-flow-confirm svg { flex: 0 0 auto; width: 16px; height: 16px; }
#lp-demo.is-published .lp-flow-meter i { width: 100%; }
#lp-demo.is-published .lp-flow-site-wa { transform: scale(1.04); }
#lp-demo.is-published .lp-flow-window-site .lp-flow-window-state { color: #218D65; }
#lp-demo.is-published .lp-flow-site-tool .lp-flow-action,
#lp-demo.is-captured .lp-flow-capture .lp-flow-action,
#lp-demo.is-organized .lp-flow-contact-badge {
    background: var(--tato-green,#34C97E); color: var(--lp-navy);
}
#lp-demo.is-published .lp-flow-confirm-site,
#lp-demo.is-captured .lp-flow-confirm-whatsapp,
#lp-demo.is-filtered .lp-flow-confirm-filter,
#lp-demo.is-organized .lp-flow-confirm-contacts,
#lp-demo.is-invite-ready .lp-flow-confirm-google {
    max-height: 64px; margin: 0 16px 14px; padding: 11px 13px; opacity: 1;
}
.lp-flow-whatsapp-body {
    min-height: 0; padding: 16px 20px; background: #F7FAFC;
}
.lp-flow-whatsapp-demo {
    position: relative; display: flex; flex-direction: column; justify-content: flex-start; width: min(100%, 420px);
    min-height: 0; margin: 0 auto;
}
.lp-flow-whatsapp-start {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    min-height: 92px; max-height: 92px; padding: 8px 0; overflow: hidden; opacity: 1; transform: none;
    transition: opacity .35s ease, max-height .35s ease, min-height .35s ease, padding .35s ease,
        transform .35s cubic-bezier(.2,.8,.3,1);
}
.lp-flow-whatsapp-start .lp-flow-site-wa { margin: 0; padding: 12px 18px; font-size: 12px; }
.lp-flow-whatsapp-start .lp-flow-site-wa svg { width: 17px; height: 17px; }
.lp-flow-whatsapp-start small { color: var(--lp-ink-3); font-size: 11px; }
.lp-flow-message,
.lp-flow-capture {
    min-width: 0; max-height: 0; margin: 0; padding: 0; overflow: hidden; border-width: 0;
    border-radius: 13px; opacity: 0; transform: translateY(12px);
    transition: max-height .4s ease, margin .4s ease, padding .4s ease, border-width .4s ease,
        opacity .4s ease, transform .4s cubic-bezier(.2,.8,.3,1);
}
.lp-flow-message {
    padding: 0; border: 0; background: #E5F6EC;
    box-shadow: 0 12px 22px -18px rgba(24,103,57,.5);
}
.lp-flow-message > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lp-flow-message strong { color: #164D32; font-size: 13px; }
.lp-flow-message > div span { color: #5B9172; font-size: 10px; }
.lp-flow-message p { margin: 11px 0 15px; color: #295D40; font-size: 14px; line-height: 1.45; }
.lp-flow-message small {
    display: inline-flex; align-items: center; gap: 5px; color: #3D835B; font-size: 10px;
    font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.lp-flow-message small svg { width: 13px; height: 13px; }
.lp-flow-capture {
    padding: 0; border: 0; background: #fff;
    box-shadow: 0 14px 26px -22px rgba(3,26,57,.35);
}
.lp-flow-capture-head,
.lp-flow-invite-head {
    display: flex; align-items: center; gap: 8px; color: var(--lp-navy); font-size: 12px; font-weight: 700;
}
.lp-flow-capture-head > div { min-width: 0; }
.lp-flow-capture-head > div strong,
.lp-flow-capture-head > div small { display: block; }
.lp-flow-capture-head > div small { margin-top: 3px; color: var(--lp-ink-3); font-size: 10px; font-weight: 500; }
.lp-flow-capture-icon { display: grid; place-items: center; width: 31px; height: 31px; flex: 0 0 auto; border-radius: 9px; background: #E7F8F2; color: #1AAB8E; }
.lp-flow-capture-icon svg { width: 18px; height: 18px; }
.lp-flow-capture-fields { display: grid; gap: 7px; margin-top: 15px; }
.lp-flow-capture-fields span {
    min-height: 34px; padding: 9px 10px; border: 1px solid var(--lp-line); border-radius: 7px;
    background: #FDFCFA; color: var(--lp-ink); font-size: 12px;
}
.lp-flow-capture .lp-flow-action {
    width: 100%; margin-top: 14px; white-space: nowrap;
}
.lp-flow-hidden-capture {
    display: flex; align-items: center; gap: 9px; min-width: 0; max-height: 0; margin: 0; padding: 0 13px;
    overflow: hidden; border: 1px dashed transparent; border-radius: 10px; opacity: 0; transform: translateY(-6px);
    color: var(--lp-navy); transition: max-height .4s ease, margin .4s ease, padding .4s ease,
        border-color .4s ease, opacity .4s ease, transform .4s cubic-bezier(.2,.8,.3,1);
}
.lp-flow-hidden-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto; border-radius: 8px; background: #E5F8F2; color: #1AAB8E; }
.lp-flow-hidden-icon svg { width: 17px; height: 17px; }
.lp-flow-hidden-capture > div { min-width: 0; }
.lp-flow-hidden-capture strong,
.lp-flow-hidden-capture small { display: block; }
.lp-flow-hidden-capture strong { font-size: 11px; }
.lp-flow-hidden-capture small { margin-top: 2px; color: var(--lp-ink-3); font-size: 10px; }
.lp-flow-hidden-check { display: grid; place-items: center; width: 18px; height: 18px; margin-left: auto; border-radius: 50%; background: #34C97E; color: var(--lp-navy); }
.lp-flow-hidden-check svg { width: 12px; height: 12px; }
#lp-demo.is-message .lp-flow-whatsapp-start {
    min-height: 0; max-height: 0; padding-top: 0; padding-bottom: 0;
    opacity: 0; transform: translateY(-8px); pointer-events: none;
}
#lp-demo.is-message .lp-flow-capture {
    max-height: 260px; padding: 18px; border-width: 1px; opacity: 1; transform: none;
}
#lp-demo.is-capturing .lp-flow-hidden-capture,
#lp-demo.is-captured .lp-flow-hidden-capture {
    max-height: 62px; margin: 10px 0 12px; padding: 9px 13px; border-color: #9FDDCE; opacity: 1; transform: none;
}
#lp-demo.is-capturing .lp-flow-hidden-icon { animation: lp-flow-magnet-pulse 1.1s ease-in-out infinite; }
#lp-demo.is-captured .lp-flow-capture {
    max-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; border-width: 0;
    opacity: 0; transform: translateY(-10px); pointer-events: none;
}
#lp-demo.is-captured .lp-flow-message {
    max-height: 130px; padding: 17px; border-width: 1px; opacity: 1; transform: none;
    border-color: #34C97E; box-shadow: 0 14px 26px -20px rgba(24,103,57,.62);
}
@keyframes lp-flow-magnet-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(47,194,168,0); }
    45% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(47,194,168,.16); }
}
#lp-demo.is-message .lp-flow-window-whatsapp .lp-flow-window-state { color: #218D65; }

.lp-flow-filter-body {
    display: grid; grid-template-columns: minmax(0,1fr) minmax(92px,.55fr) minmax(0,1fr); gap: 14px;
    align-items: center; min-height: 310px; padding: 24px 20px 18px; background: #F7FAFC;
}
.lp-flow-filter-message,
.lp-flow-filter-contact {
    min-width: 0; padding: 17px; border: 1px solid #DCE5EE; border-radius: 13px; background: #fff;
    box-shadow: 0 14px 26px -22px rgba(3,26,57,.35);
}
.lp-flow-keyword {
    display: block; color: #8D9AAF; font-size: 9px; font-weight: 700; letter-spacing: .1em; line-height: 1.2;
    text-transform: uppercase;
}
.lp-flow-filter-message strong { display: block; margin-top: 15px; color: var(--lp-navy); font-family: var(--lp-display); font-size: 18px; font-weight: 500; line-height: 1.1; }
.lp-flow-filter-core { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; color: #1AAB8E; }
.lp-flow-filter-magnet {
    position: relative; display: grid; place-items: center; width: 92px; height: 92px; flex: 0 0 auto;
    border: 1px solid #A7DFD2; border-radius: 20px; background: #E5F8F2;
    box-shadow: 0 14px 28px -18px rgba(26,171,142,.8);
}
.lp-flow-magnet-glyph { width: 66px; height: 66px; overflow: visible; }
.lp-flow-scene-icon-magnet .lp-flow-magnet-glyph { width: 22px; height: 22px; }
.lp-flow-hidden-icon .lp-flow-magnet-glyph { width: 18px; height: 18px; }
.lp-flow-magnet-arc { stroke: var(--lp-navy); stroke-width: 10; stroke-linecap: round; }
.lp-flow-magnet-pole { stroke-width: 10; stroke-linecap: butt; }
.lp-flow-magnet-pole-left { stroke: #E97961; }
.lp-flow-magnet-pole-right { stroke: #4A8CF0; }
.lp-flow-filter-progress {
    display: block; width: 94px; height: 6px; overflow: hidden; border-radius: 999px;
    background: #DCEFEA; box-shadow: inset 0 0 0 1px rgba(26,171,142,.08);
}
.lp-flow-filter-progress i {
    display: block; width: 0; height: 100%; border-radius: inherit; background: #1AAB8E;
    transition: width .7s cubic-bezier(.2,.8,.3,1);
}
.lp-flow-filter-progress-label {
    color: #218D65; font-size: 9px; font-weight: 800; letter-spacing: .06em; line-height: 1;
    text-transform: uppercase;
}
.lp-flow-filter-contact { opacity: 0; transform: translateX(-12px); transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.3,1), border-color .3s ease, box-shadow .3s ease; }
.lp-flow-filter-avatar { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: #DDEAF7; color: var(--lp-navy); font-size: 13px; font-weight: 700; }
.lp-flow-filter-contact > div { min-width: 0; margin-top: 12px; }
.lp-flow-filter-contact strong,
.lp-flow-filter-contact small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-flow-filter-contact strong { color: var(--lp-navy); font-family: var(--lp-display); font-size: 16px; font-weight: 600; }
.lp-flow-filter-contact small { margin-top: 4px; color: var(--lp-ink-3); font-size: 10px; }
.lp-flow-filter-status { display: block; margin-top: 16px; color: #8D9AAF; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
#lp-demo.is-filtering .lp-flow-filter-contact,
#lp-demo.is-filtered .lp-flow-filter-contact { opacity: 1; transform: none; }
#lp-demo.is-filtering .lp-flow-filter-progress i { width: 78%; }
#lp-demo.is-filtered .lp-flow-filter-progress i { width: 100%; background: #34C97E; }
#lp-demo.is-filtering .lp-flow-filter-magnet { animation: lp-flow-magnet-catch .7s ease-out both; }
#lp-demo.is-filtered .lp-flow-filter-contact { border-color: #34C97E; box-shadow: 0 14px 26px -20px rgba(24,103,57,.62); }
#lp-demo.is-filtered .lp-flow-filter-status { color: #218D65; }
#lp-demo.is-filtered .lp-flow-filter-magnet { background: #D9F7E4; color: #218D65; }
@keyframes lp-flow-magnet-catch {
    0% { transform: translateX(-8px) scale(.94); opacity: .72; }
    70% { transform: translateX(3px) scale(1.04); opacity: 1; }
    100% { transform: none; opacity: 1; }
}

.lp-flow-contacts-body {
    display: grid; grid-template-columns: minmax(150px,.72fr) minmax(0,1.28fr); gap: 14px;
    min-height: 340px; padding: 20px 18px 18px; background: var(--lp-navy);
}
.lp-flow-inbox-list { padding: 4px 0; }
.lp-flow-inbox-heading {
    display: block; margin: 0 8px 12px; color: rgba(255,255,255,.52); font-size: 10px;
    font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.lp-flow-inbox-row {
    display: flex; align-items: center; gap: 9px; min-height: 57px; padding: 8px;
    border-radius: 9px; color: rgba(255,255,255,.55);
}
.lp-flow-inbox-row.is-selected { background: rgba(255,255,255,.1); color: #fff; }
.lp-flow-inbox-row > i {
    display: block; width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; background: #D9E1EA;
}
.lp-flow-inbox-row > span { min-width: 0; }
.lp-flow-inbox-row strong,
.lp-flow-inbox-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-flow-inbox-row strong { font-size: 11px; }
.lp-flow-inbox-row small { margin-top: 3px; font-size: 10px; opacity: .65; }
.lp-flow-inbox-row em { margin-left: auto; font-size: 10px; font-style: normal; }
.lp-flow-contact-card {
    align-self: center; min-width: 0; padding: 18px; border-radius: 13px; background: rgba(255,255,255,.95);
    box-shadow: 0 18px 30px -22px rgba(0,0,0,.48);
}
.lp-flow-contact-action { display: flex; width: 100%; }
.lp-flow-contact-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lp-flow-contact-head > div { min-width: 0; flex: 1 1 auto; }
.lp-flow-contact-head strong,
.lp-flow-contact-head span { display: block; }
.lp-flow-contact-head strong {
    color: var(--lp-navy); font-family: var(--lp-display); font-size: 17px; font-weight: 600;
}
.lp-flow-contact-head span { margin-top: 5px; color: var(--lp-ink-3); font-size: 10px; }
.lp-flow-contact-badge {
    flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; background: #EEF2F6; color: #718099;
    font-size: 10px; font-weight: 700;
}
.lp-flow-contact-status,
.lp-flow-contact-note { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--lp-line); }
.lp-flow-contact-status > span,
.lp-flow-contact-note > span {
    display: block; color: var(--lp-ink-3); font-size: 9px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
}
.lp-flow-contact-status strong { display: block; margin-top: 6px; color: var(--lp-navy); font-size: 13px; }
.lp-flow-contact-note p { margin: 6px 0 0; color: var(--lp-ink-2); font-size: 12px; }
#lp-demo.is-organized .lp-flow-window-contacts .lp-flow-window-state { color: var(--tato-lime,#93D63F); }
#lp-demo.is-organized .lp-flow-contact-status strong { color: #218D65; }

.lp-flow-google-body {
    display: grid; grid-template-columns: minmax(0,.82fr) minmax(220px,1.18fr); gap: 14px;
    min-height: 340px; padding: 22px 20px 18px; background: #F8FAFC;
}
.lp-flow-google-profile {
    grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; min-height: 54px;
    padding: 10px 12px; border-radius: 10px; background: #fff; box-shadow: 0 10px 20px -18px rgba(3,26,57,.35);
}
.lp-flow-google-mark,
.lp-flow-review-mark {
    display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto;
    border-radius: 50%; background: #4285F4; color: #fff; font-family: Arial,sans-serif;
    font-size: 17px; font-weight: 700;
}
.lp-flow-google-profile > div { min-width: 0; }
.lp-flow-google-profile strong,
.lp-flow-google-profile div span { display: block; }
.lp-flow-google-profile strong { color: var(--lp-navy); font-size: 12px; }
.lp-flow-google-profile div span { margin-top: 3px; color: var(--lp-ink-3); font-size: 10px; }
.lp-flow-stars { margin-left: auto; color: #F5B73B; font-family: Arial,sans-serif; font-size: 12px; letter-spacing: .04em; white-space: nowrap; }
.lp-flow-invite-card,
.lp-flow-review-card {
    align-self: center; min-width: 0; padding: 18px; border-radius: 13px; background: #fff;
    box-shadow: 0 14px 26px -22px rgba(3,26,57,.35);
}
.lp-flow-invite-card { border: 1px solid #DCE5EE; }
.lp-flow-invite-head > span {
    display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px;
    background: #EAF0FF; color: #4285F4;
}
.lp-flow-invite-head svg { width: 16px; height: 16px; }
.lp-flow-invite-head strong,
.lp-flow-invite-head small { display: block; }
.lp-flow-invite-head small { margin-top: 3px; color: var(--lp-ink-3); font-size: 10px; font-weight: 400; }
.lp-flow-invite-card > p { margin: 13px 0 0; color: var(--lp-ink-2); font-size: 12px; line-height: 1.45; }
.lp-flow-review-card {
    opacity: 0; transform: translateY(12px);
    transition: opacity .4s ease, transform .4s cubic-bezier(.2,.8,.3,1);
}
.lp-flow-review-card > div { display: flex; align-items: center; gap: 8px; }
.lp-flow-review-mark { width: 26px; height: 26px; background: #E3A43A; font-size: 12px; }
.lp-flow-review-mark-pending { background: #EEF2F6; color: var(--lp-navy); }
.lp-flow-review-mark-pending svg { width: 14px; height: 14px; }
.lp-flow-review-card > div strong,
.lp-flow-review-card > div small { display: block; }
.lp-flow-review-card > div strong { color: var(--lp-navy); font-size: 12px; }
.lp-flow-review-card > div small { margin-top: 2px; color: var(--lp-ink-3); font-size: 10px; }
.lp-flow-review-card .lp-flow-stars { margin-left: auto; }
.lp-flow-review-card > p { margin: 13px 0 0; color: var(--lp-ink-2); font-size: 12px; }
#lp-demo.is-invited .lp-flow-window-google .lp-flow-window-state { color: #4285F4; }
#lp-demo.is-invited .lp-flow-invite-card .lp-flow-action { background: #4285F4; }
#lp-demo.is-invite-ready .lp-flow-review-card { opacity: 1; transform: none; }
#lp-demo.is-invite-ready .lp-flow-window-google .lp-flow-window-state { color: #4285F4; }
.lp-flow-sr {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap;
}

/* Sem JavaScript, o resumo continua navegável e completo. */
html:not(.lp-js) .lp-flow-stage { min-height: 0; }
html:not(.lp-js) .lp-flow-scene {
    display: grid; margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--lp-line);
}
html:not(.lp-js) .lp-flow-scene:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
html:not(.lp-js) .lp-flow-scene [data-site-confirm],
html:not(.lp-js) .lp-flow-scene [data-whatsapp-message],
html:not(.lp-js) .lp-flow-scene [data-whatsapp-capture],
html:not(.lp-js) .lp-flow-scene [data-whatsapp-hidden],
html:not(.lp-js) .lp-flow-scene [data-filter-contact],
html:not(.lp-js) .lp-flow-scene [data-contacts-confirm],
html:not(.lp-js) .lp-flow-scene [data-google-review],
html:not(.lp-js) .lp-flow-scene .lp-flow-confirm {
    max-height: none; margin: 0 16px 14px; padding: 11px 13px;
    opacity: 1; transform: none;
}
@media (max-width: 900px) {
    .lp-flow-scene { grid-template-columns: 1fr; gap: 25px; }
    .lp-flow-scene-copy h3 { max-width: 18em; }
    .lp-flow-scene-copy p { max-width: 42em; }
    .lp-flow-stage { min-height: 690px; }
}
@media (max-width: 760px) {
    .lp-flow { margin-top: 26px; padding: 20px 15px; border-radius: 17px; }
    .lp-flow-stage { min-height: 720px; margin-top: 0; }
    .lp-flow-scene-copy { padding-left: 2px; }
    .lp-flow-scene-copy h3 { margin-top: 12px; font-size: 27px; }
    .lp-flow-scene-copy p { font-size: 15px; }
    .lp-flow-window { min-height: 0; }
    .lp-flow-cursor { width: 23px; height: 23px; }
    .lp-flow-window-bar { gap: 8px; padding: 0 12px; }
    .lp-flow-window-state { max-width: 112px; overflow: hidden; text-overflow: ellipsis; font-size: 9px; }
    .lp-flow-site-body,
    .lp-flow-whatsapp-body,
    .lp-flow-contacts-body,
    .lp-flow-google-body { grid-template-columns: minmax(0,1fr); min-height: 0; }
    .lp-flow-site-body { padding: 13px; }
    .lp-flow-site-preview { min-height: 0; }
    .lp-flow-site-result-image { height: auto; }
    .lp-flow-site-tool { align-self: auto; }
    .lp-flow-confirm {
        position: static; right: auto; bottom: auto; left: auto;
        max-height: 0; margin: 0 14px; padding: 0 13px; overflow: hidden;
        opacity: 0; transform: none;
    }
    #lp-demo.is-published .lp-flow-confirm-site,
    #lp-demo.is-captured .lp-flow-confirm-whatsapp,
    #lp-demo.is-filtered .lp-flow-confirm-filter,
    #lp-demo.is-organized .lp-flow-confirm-contacts,
    #lp-demo.is-invite-ready .lp-flow-confirm-google {
        max-height: 80px; margin: 0 14px 14px; padding: 11px 13px;
        opacity: 1; transform: none;
    }
    .lp-flow-whatsapp-body { padding: 14px 13px; }
    .lp-flow-whatsapp-start { min-height: 82px; max-height: 82px; padding: 5px 0; }
    #lp-demo.is-message .lp-flow-capture { max-height: 280px; padding: 14px; }
    .lp-flow-capture-fields { gap: 6px; margin-top: 12px; }
    .lp-flow-capture-fields span { min-height: 32px; padding: 8px 9px; }
    .lp-flow-capture .lp-flow-action { min-height: 44px; margin-top: 12px; padding: 0 12px; }
    .lp-flow-message,
    .lp-flow-capture,
    .lp-flow-contact-card,
    .lp-flow-invite-card,
    .lp-flow-review-card { align-self: auto; }
    .lp-flow-contacts-body { padding: 17px 13px 0; }
    .lp-flow-filter-body { grid-template-columns: 1fr; min-height: 0; padding: 18px 14px 0; }
    .lp-flow-filter-core { flex-direction: column; justify-content: center; gap: 8px; padding: 4px 0 8px; }
    .lp-flow-filter-magnet { width: 82px; height: 82px; border-radius: 18px; }
    .lp-flow-magnet-glyph-core { width: 60px; height: 60px; }
    .lp-flow-filter-progress { width: 110px; }
    .lp-flow-filter-contact { transform: translateY(10px); }
    .lp-flow-inbox-list { min-width: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
    .lp-flow-inbox-heading { grid-column: 1 / -1; margin-bottom: 3px; }
    .lp-flow-inbox-row { min-height: 45px; padding: 5px; }
    .lp-flow-inbox-row > i { width: 22px; height: 22px; }
    .lp-flow-inbox-row em { display: none; }
    .lp-flow-inbox-row strong { font-size: 10px; }
    .lp-flow-inbox-row small { font-size: 9px; }
    .lp-flow-google-body { padding: 16px 13px 0; }
    .lp-flow-google-profile { grid-column: auto; }
    .lp-flow-stars { font-size: 10px; }
    .lp-demo-controls { margin-top: 16px; }
    html:not(.lp-js) .lp-flow-scene { display: block; }
    html:not(.lp-js) .lp-flow-scene-copy { margin-bottom: 20px; }
    .lp-flow-scene-copy h3,
    .lp-flow-scene-copy p,
    .lp-flow-scene-module,
    .lp-flow-contact-head span,
    .lp-flow-contact-note p,
    .lp-flow-invite-card > p,
    .lp-flow-review-card > p { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-flow-scene.is-active,
    .lp-flow-review-card,
    .lp-flow-message,
    .lp-flow-capture,
    .lp-flow-filter-magnet,
    .lp-flow-filter-progress i,
    .lp-flow-filter-contact,
    .lp-flow-confirm,
    .lp-flow-site-wa,
    .lp-flow-site-wa-ring,
    .lp-flow-cursor,
    .lp-flow-cursor svg,
    .lp-flow-cursor::after,
    .lp-flow-meter i,
    .lp-flow-action { animation: none; transition: none; }
}

.lp-strip-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 40px; flex-wrap: wrap;
}
/* Sem uma base de flex explícita, a coluna do título assume a largura do
   próprio conteúdo e empurra o parágrafo para a linha de baixo. */
.lp-strip-head > div { flex: 1 1 24em; min-width: 0; }
.lp-strip-head .lp-h2 { max-width: 11em; }
.lp-strip-head .lp-sub { flex: 0 1 24em; margin: 0; max-width: 24em; }

/* ---------- a vitrine de modelos ----------

   ANTES: dez miniaturas de 300px numa tira que rolava na horizontal, com a
   última cortada na borda. O corte devia convidar a arrastar; na prática a
   seção mostrava dez retângulos ilegíveis e nenhum site — e a promessa
   ("você não começa de uma página em branco") só se cumpre se o visitante
   conseguir VER a página que vai receber.

   AGORA: índice à esquerda, um modelo grande à direita. A composição é a de
   um sumário editorial — nomes em coluna, peso leve, o escolhido em navy —
   e não a de um carrossel. Três coisas a mantêm viva sem virar enfeite: o
   arco marca o item ativo, a barra de tempo mostra que ela anda sozinha, e
   a troca é um fade curto com um degrau de escala. Nada disso roda com
   `prefers-reduced-motion` ligado. */

.lp-showcase {
    margin-top: 56px;
    display: grid;
    grid-template-columns: minmax(230px, 268px) 1fr;
    gap: 56px;
    align-items: start;
}

/* o índice */
.lp-showcase-index { display: grid; gap: 2px; }
.lp-showcase-pick {
    position: relative;
    width: 100%;
    display: grid; grid-template-columns: 26px 1fr; align-items: baseline; gap: 12px;
    padding: 11px 12px 11px 14px;
    border: 0; background: none; cursor: pointer; text-align: left;
    border-radius: 10px;
    font-family: var(--lp-display);
    color: var(--lp-ink-3);
    transition: color .18s ease, background-color .18s ease;
}
.lp-showcase-pick .n { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; opacity: .8; }
.lp-showcase-pick .nome { font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.lp-showcase-pick:hover { color: var(--lp-ink-2); background: rgba(3, 26, 57, .035); }
.lp-showcase-pick.is-on { color: var(--lp-navy); }

/* O traço do arco à esquerda do escolhido: a mesma assinatura do rótulo de
   seção, aqui no papel de "você está aqui". */
.lp-showcase-pick .risco {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleY(0);
    width: 3px; height: 26px; border-radius: 3px;
    background: var(--lp-arc);
    transition: transform .2s ease;
}
.lp-showcase-pick.is-on .risco { transform: translateY(-50%) scaleY(1); }

/* A barra de tempo só existe enquanto a vitrine anda sozinha. Ela some no
   primeiro clique — quem já escolheu não precisa saber quanto falta para a
   página escolher por ele. */
.lp-showcase-pick::after {
    content: ""; position: absolute; left: 14px; right: 12px; bottom: 4px;
    height: 2px; border-radius: 2px;
    background: var(--lp-arc);
    transform: scaleX(0); transform-origin: left;
    opacity: 0;
}
.lp-showcase.is-auto .lp-showcase-pick.is-on::after {
    opacity: .55;
    animation: lpTempo 4.2s linear forwards;
}
/* Passar o mouse segura a barra — e, como é o fim dela que troca o modelo,
   segura a troca junto. Ninguém consegue ler uma tela que muda enquanto
   está sendo lida. */
.lp-showcase:hover .lp-showcase-pick.is-on::after { animation-play-state: paused; }
@keyframes lpTempo { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* o palco */
.lp-showcase-stage { min-width: 0; }
.lp-showcase-stage .frame {
    border-radius: 16px; overflow: hidden;
    background: #fff;
    box-shadow: var(--lp-shadow);
}
/* 16:9 — o formato das thumbnails que o admin cadastra, e a proporção de uma
   tela de computador. O palco era 4:3 quando a foto vinha de captura própria;
   agora quem manda no enquadramento é a imagem do cadastro. */
.lp-showcase-stage .shots { position: relative; aspect-ratio: 16 / 9; }
/* Escondidas por opacidade, não por `display:none` nem `visibility:hidden`:
   imagem com carregamento preguiçoso fora do fluxo não baixa até aparecer, e
   a troca mostraria um quadro branco antes da foto. Assim as dez baixam
   quando a seção chega perto — 220 KB no total, em webp. */
.lp-showcase-stage .shot {
    position: absolute; inset: 0; margin: 0;
    opacity: 0;
    transition: opacity .42s ease, transform .42s ease;
    transform: scale(1.015);
}
.lp-showcase-stage .shot.is-on { opacity: 1; transform: none; }
.lp-showcase-stage .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* O ÚLTIMO PAINEL: "e mais N modelos".
   Ele fecha a rodada e é o único que pede uma ação, então é o único escuro —
   a mesma inversão que o bloco do filtro usa para dizer "pare aqui". Não imita
   um site: sem texto de negócio, sem foto. O número é o argumento, e por isso
   é ~5x o tamanho da linha que o explica. */
.lp-showcase-stage .shot.lp-more {
    display: grid; place-content: center; justify-items: center;
    gap: 6px; padding: 24px;
    text-align: center;
    background: var(--lp-navy);
    overflow: hidden;
}
.lp-showcase-stage .shot.lp-more::before {
    content: ""; position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
    width: 120%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 194, 168, .22), transparent 62%);
    pointer-events: none;
}
.lp-showcase-stage .lp-more > * { position: relative; }
.lp-showcase-stage .lp-more .n {
    font-family: var(--lp-display); font-weight: 500;
    font-size: clamp(56px, 11vw, 104px); line-height: 1;
    letter-spacing: -.04em;
    /* O arco pinta o número. É a única área grande da página em que ele
       preenche, e cabe justamente por ser um algarismo, não um bloco. */
    background: var(--lp-arc);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}
.lp-showcase-stage .lp-more .t {
    font-size: 17px; color: rgba(255, 255, 255, .8);
    max-width: 22ch;
}
.lp-showcase-stage .lp-more .lp-btn { margin-top: 20px; }

/* No índice, o cartão final não recebe número de ordem: ele não é o 11º
   modelo. O "+" ocupa a coluna do número para a coluna de nomes não torcer. */
.lp-showcase-pick.is-more .n { font-size: 17px; opacity: 1; }
.lp-showcase-pick.is-more.is-on { color: var(--lp-navy); }

/* As legendas empilham no mesmo lugar para a altura não pular na troca. */
.lp-showcase-stage .caps { position: relative; margin-top: 22px; min-height: 3.2em; }
.lp-showcase-stage .cap {
    position: absolute; inset: 0;
    opacity: 0; transform: translateY(6px);
    transition: opacity .32s ease, transform .32s ease;
}
.lp-showcase-stage .cap.is-on { opacity: 1; transform: none; }
.lp-showcase-stage .cap b {
    display: block;
    font-family: var(--lp-display); font-weight: 500; letter-spacing: -.02em;
    font-size: 25px; color: var(--lp-navy);
}
.lp-showcase-stage .cap span { display: block; margin-top: 5px; font-size: 16px; color: var(--lp-ink-2); }

@media (prefers-reduced-motion: reduce) {
    .lp-showcase-stage .shot,
    .lp-showcase-stage .cap { transition: none; transform: none; }
    .lp-showcase .lp-showcase-pick::after { animation: none; }
}

/* No celular o índice vira uma fita de nomes que rola por cima do palco: a
   coluna de dez linhas empurraria a foto para 600px abaixo do título. */
@media (max-width: 900px) {
    .lp-showcase { grid-template-columns: 1fr; gap: 26px; margin-top: 40px; }
    .lp-showcase-index {
        display: flex; gap: 6px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        padding-bottom: 6px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .lp-showcase-index::-webkit-scrollbar { display: none; }
    .lp-showcase-index li { flex: none; scroll-snap-align: start; }
    .lp-showcase-pick {
        grid-template-columns: auto; gap: 0;
        padding: 9px 15px;
        border-radius: 999px;
        background: rgba(3, 26, 57, .04);
        white-space: nowrap;
    }
    .lp-showcase-pick .n { display: none; }
    .lp-showcase-pick .nome { font-size: 17px; }
    .lp-showcase-pick .risco { display: none; }
    .lp-showcase-pick.is-on { background: var(--lp-navy); color: #fff; }
    .lp-showcase-pick::after { left: 15px; right: 15px; bottom: 3px; }
    .lp-showcase-stage .cap b { font-size: 21px; }
}

/* ---------- a segunda página em branco: o assistente ----------
   Fica colado na vitrine de modelos, na mesma seção, porque as duas coisas
   respondem à mesma pergunta ("eu consigo fazer isso sozinho?"): a vitrine
   tira o medo do layout, este bloco tira o medo do texto.

   É uma caixa com fundo, e não uma seção nova, de propósito. Como seção ela
   competiria com a vitrine pela mesma atenção; como caixa ela é a nota de pé
   de página que fecha o argumento. O fundo é a lavagem quente da página, sem
   borda — separação aqui é cor e respiro, nunca linha. */

.lp-assist {
    margin-top: 64px;
    background: var(--lp-wash);
    border-radius: 20px;
    padding: 46px 48px;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 22px 56px; align-items: start;
}
.lp-assist-say h3 { font-size: clamp(25px, 2.6vw, 33px); }
.lp-assist-say p { margin-top: 16px; font-size: 17px; color: var(--lp-ink-2); }

/* Os marcadores percorrem o arco na ordem, como os das opções de produto e
   os números das cenas. Mesmo gesto em toda a página. */
.lp-assist-list { display: grid; gap: 13px; align-content: center; padding-top: 116px; }
.lp-assist-list li {
    display: grid; grid-template-columns: 9px 1fr; gap: 14px;
    align-items: start; font-size: 16.5px; color: var(--lp-ink-2);
}
.lp-assist-list .dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 8px; background: var(--tato-blue, #4FA9DC); }
.lp-assist-list li:nth-child(2) .dot { background: var(--arc-2); }
.lp-assist-list li:nth-child(3) .dot { background: var(--tato-green, #34C97E); }
.lp-assist-list li:nth-child(4) .dot { background: var(--tato-lime, #93D63F); }

.lp-assist-foot {
    grid-column: 1 / -1;
    padding-top: 22px; border-top: 1px solid var(--lp-line);
    font-size: 15px; color: var(--lp-ink-3);
}

@media (max-width: 900px) {
    .lp-assist { grid-template-columns: 1fr; gap: 26px; padding: 34px 26px; margin-top: 48px; border-radius: 16px; }
    .lp-assist-list { padding-top: 0; }
    .lp-assist-foot { padding-top: 18px; }
}

/* ---------- a jornada: quatro verbos, uma presença ---------- */

.lp-journey {
    position: relative; overflow: hidden; padding: 86px 0;
    background: var(--lp-navy); color: #fff;
}
.lp-journey::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 8% 14%, rgba(79,169,220,.18), transparent 26%),
        radial-gradient(circle at 92% 84%, rgba(147,214,63,.13), transparent 28%);
    pointer-events: none;
}
.lp-journey-grid {
    position: relative; display: grid; grid-template-columns: .88fr 1.12fr;
    gap: clamp(52px, 7vw, 92px); align-items: center;
}
.lp-journey .lp-kicker { color: var(--tato-lime, #93D63F); }
.lp-journey .lp-h2 { color: #fff; font-size: clamp(34px, 4vw, 50px); }
.lp-journey-statement > p:last-child { margin-top: 20px; color: rgba(255,255,255,.68); max-width: 31em; }
.lp-journey-line { position: relative; display: grid; grid-template-columns: 1fr; gap: 18px; }
.lp-journey-line::before {
    content: ""; position: absolute; left: 27px; top: 27px; bottom: 27px;
    width: 3px; border-radius: 999px; background: var(--lp-arc); opacity: .5;
}
.lp-journey-line li { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; }
.lp-journey-line .ico {
    position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 17px;
    display: grid; place-items: center; flex: none;
    background: #0D2A4C; color: var(--tato-blue, #4FA9DC);
    box-shadow: 0 0 0 6px var(--lp-navy);
}
.lp-journey-line li:nth-child(2) .ico { color: var(--arc-2); }
.lp-journey-line li:nth-child(3) .ico { color: var(--tato-green, #34C97E); }
.lp-journey-line li:nth-child(4) .ico { color: var(--tato-lime, #93D63F); }
.lp-journey-line .ico svg { width: 22px; height: 22px; }
.lp-journey-line b { display: block; color: #fff; font-family: var(--lp-display); font-weight: 500; font-size: 20px; }
.lp-journey-line div span { display: block; margin-top: 2px; color: rgba(255,255,255,.56); font-size: 13.5px; }

@media (max-width: 850px) {
    .lp-journey { padding: 72px 0; }
    .lp-journey-grid { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 560px) { .lp-journey-line::before { bottom: 27px; } }

/* ---------- produtos alternando lado ---------- */

.lp-prod {
    display: grid; grid-template-columns: 1fr 1.15fr;
    gap: 72px; align-items: center;
    padding: 72px 0;
}
.lp-prod + .lp-prod { border-top: 1px solid var(--lp-line-soft); }
/* Ao inverter, as COLUNAS também trocam de tamanho. Sem isto o texto cai na
   coluna larga e a foto na estreita, e as telas alternam entre 567px e
   493px de largura ao longo da página — o olho percebe como desalinho. */
.lp-prod.is-flipped { grid-template-columns: 1.15fr 1fr; }
.lp-prod.is-flipped .lp-prod-text { order: 2; }
.lp-prod-ask {
    font-family: var(--lp-display); font-weight: 500;
    font-size: clamp(26px, 3.2vw, 38px); letter-spacing: -.028em;
    line-height: 1.12; color: var(--lp-navy);
}
.lp-prod-name {
    display: inline-flex; align-items: center; gap: 9px;
    margin-top: 18px; font-size: 14px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--lp-ink-3);
}
.lp-prod-name svg { width: 16px; height: 16px; color: var(--arc-2); }
.lp-prod-text p.base { font-size: 17.5px; color: var(--lp-ink-2); margin-top: 20px; }

.lp-prod-feats { margin-top: 26px; display: grid; gap: 16px; }
.lp-prod-feats li { display: grid; grid-template-columns: 9px 1fr; gap: 14px; align-items: start; }
/* Os marcadores percorrem o arco na ordem dele — azul, teal, verde —, como
   os três números das cenas logo acima. Estavam em verde, lima e azul: a
   mesma paleta fora de ordem, que o olho lê como três cores quaisquer em vez
   de uma sequência. */
.lp-prod-feats .dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 8px; background: var(--tato-blue, #4FA9DC); }
.lp-prod-feats li:nth-child(2) .dot { background: var(--arc-2); }
.lp-prod-feats li:nth-child(3) .dot { background: var(--tato-green, #34C97E); }
.lp-prod-feats li:nth-child(4) .dot { background: var(--tato-lime, #93D63F); }
.lp-prod-feats b { display: block; font-size: 16.5px; font-weight: 600; color: var(--lp-navy); }
.lp-prod-feats span { display: block; font-size: 15.5px; color: var(--lp-ink-2); margin-top: 3px; }

.lp-prod-shot {
    position: relative; min-width: 0; border-radius: 20px;
    aspect-ratio: 4 / 3;
    overflow: hidden; box-shadow: var(--lp-shadow); background: var(--lp-navy);
}
.lp-prod-shot::after {
    content: ""; position: absolute; inset: 42% 0 0;
    background: linear-gradient(180deg, transparent, rgba(3,26,57,.28));
    pointer-events: none;
}
.lp-prod-shot img { width: 100%; height: 100%; object-fit: cover; }
.lp-prod-shot-builder img, .lp-prod-shot-contacts img { object-position: center; }
.lp-prod-shot-whatsapp img, .lp-prod-shot-google img { object-position: 55% center; }

.lp-product-proof {
    position: absolute; z-index: 2; right: 20px; bottom: 20px;
    width: min(268px, calc(100% - 40px)); padding: 17px 18px;
    border-radius: 16px; background: rgba(255,255,255,.95);
    backdrop-filter: blur(12px); box-shadow: var(--lp-shadow-s);
    color: var(--lp-navy);
}
.lp-prod-shot-whatsapp .lp-product-proof { right: auto; left: 20px; }
.lp-product-proof .proof-top {
    display: flex; align-items: center; gap: 7px;
    color: var(--lp-ink-3); font-size: 11px; line-height: 1.3;
    font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}
.lp-product-proof .proof-top svg { width: 14px; height: 14px; color: var(--arc-2); }
.lp-product-proof strong {
    display: block; margin-top: 10px;
    font-family: var(--lp-display); font-size: 22px; font-weight: 500; line-height: 1.15;
}
.lp-product-proof small { display: block; margin-top: 5px; color: var(--lp-ink-2); font-size: 12px; line-height: 1.45; }
.lp-product-proof ul { display: grid; gap: 8px; margin-top: 11px; }
.lp-product-proof li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--lp-ink-2); }
.lp-product-proof li i { width: 7px; height: 7px; border-radius: 50%; background: var(--tato-blue, #4FA9DC); }
.lp-product-proof li:nth-child(2) i { background: var(--arc-2); }
.lp-product-proof li:nth-child(3) i { background: var(--tato-green, #34C97E); }
.lp-product-proof .proof-stars { color: #B88A00; letter-spacing: .08em; }

/* ---------- o que ainda vem ----------
   O produto não construído saiu da sequência (ver LandingService::products).
   Aqui ele é uma nota de rodapé da seção: mesma coluna de leitura, sem foto,
   sem promessa. A regra que isto respeita é a de sempre — mostrar que existe
   vende, entregar o que não existe é mentira. */
.lp-next {
    margin-top: 76px; padding-top: 34px;
    border-top: 1px solid var(--lp-line);
    max-width: var(--lp-read);
}
.lp-next-tag {
    font-size: 12.5px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--lp-ink-3); margin-bottom: 18px;
}
.lp-next ul { display: grid; gap: 14px; }
.lp-next li { font-size: 16.5px; color: var(--lp-ink-2); }
.lp-next li b {
    font-family: var(--lp-display); font-weight: 500; font-size: 20px;
    letter-spacing: -.02em; color: var(--lp-navy); margin-right: 10px;
}
.lp-next-foot { margin-top: 20px; font-size: 15px; color: var(--lp-ink-3); }

@media (max-width: 900px) {
    .lp-prod { grid-template-columns: 1fr; gap: 36px; padding: 52px 0; }
    /* A linha invertida PRECISA repetir a coluna única aqui.
       `.lp-prod.is-flipped` (0,2,0) vence `.lp-prod` (0,1,0) mesmo dentro de
       uma media query — media query não soma especificidade. Sem esta linha o
       bloco do Botão WhatsApp continuava em duas colunas no celular: texto de
       156px quebrando de três em três palavras e a foto de tela em 135px
       (89px num aparelho de 320). Era o único dos quatro produtos quebrado. */
    .lp-prod.is-flipped { grid-template-columns: 1fr; }
    .lp-prod.is-flipped .lp-prod-text { order: 0; }
}
@media (max-width: 520px) {
    /* A foto conserva o protagonismo: os comprovantes saem dela como uma
       legenda visual, com apenas o terço superior ancorado no enquadramento. */
    .lp-prod-shot {
        border-radius: 15px; aspect-ratio: 4 / 4.25;
        overflow: visible; margin-bottom: 132px;
    }
    .lp-prod-shot img { border-radius: 15px; }
    .lp-prod-shot::after { border-radius: 0 0 15px 15px; }
    .lp-product-proof,
    .lp-prod-shot-whatsapp .lp-product-proof {
        left: 12px; right: 12px; top: 100%; bottom: auto;
        width: auto; padding: 14px 15px;
        transform: translateY(-33.333%);
        background: rgba(248, 251, 255, .98);
        box-shadow: 0 22px 42px -24px rgba(3, 26, 57, .5), 0 4px 12px rgba(3, 26, 57, .12);
    }
}

/* ---------- bloco escuro: o filtro ---------- */

.lp-dark { background: var(--lp-navy); color: #fff; position: relative; overflow: hidden; }
.lp-dark::before {
    content: ""; position: absolute; top: -220px; right: -140px;
    width: 620px; height: 620px; border-radius: 50%;
    background: radial-gradient(circle, rgba(47,194,168,.2), transparent 62%);
    pointer-events: none;
}
.lp-dark h2 { color: #fff; }
.lp-dark .lp-kicker { color: var(--tato-lime, #93D63F); }
.lp-dark .lp-sub { color: rgba(255,255,255,.7); }

.lp-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 60px; }
.lp-col { border-radius: 16px; padding: 32px 30px 34px; }
.lp-col.before { background: rgba(255,255,255,.04); }
.lp-col.after { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(147,214,63,.35); }
.lp-col .tag {
    font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 22px;
}
.lp-col.after .tag { color: var(--tato-lime, #93D63F); }

.lp-steps li {
    display: grid; grid-template-columns: 26px 1fr; gap: 14px;
    align-items: start; padding: 12px 0; font-size: 16.5px; color: rgba(255,255,255,.84);
}
.lp-steps li + li { border-top: 1px solid rgba(255,255,255,.07); }
.lp-steps .ico { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); margin-top: 1px; }
.lp-steps .ico svg { width: 14px; height: 14px; color: rgba(255,255,255,.72); }
.lp-steps li.end .ico { background: rgba(199,51,59,.22); }
.lp-steps li.end .ico svg { color: #FF9AA0; }
.lp-steps li.win .ico { background: rgba(52,201,126,.24); }
.lp-steps li.win .ico svg { color: var(--tato-green, #34C97E); }
.lp-steps li.end, .lp-steps li.win { font-weight: 600; color: #fff; }

.lp-dark-note {
    margin-top: 40px; font-size: 16.5px; color: rgba(255,255,255,.6);
    display: flex; gap: 12px; max-width: 42em;
}
.lp-dark-note svg { width: 19px; height: 19px; margin-top: 3px; color: var(--arc-2); }
.lp-dark-note strong { color: #fff; font-weight: 600; }

@media (max-width: 800px) { .lp-compare { grid-template-columns: 1fr; } }

/* ---------- como funciona: lista numerada editorial ---------- */

.lp-howto { display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start; }
/* A coluna da esquerda acaba muito antes da direita: título, botão, e uns
   250px de nada até o fim dos quatro passos. Grudada, ela acompanha a
   leitura — e o botão fica ao alcance no momento em que a pessoa termina de
   ler como o site sai do papel, que é exatamente quando ele importa. */
.lp-howto-aside { position: sticky; top: 108px; }
.lp-howto-aside .lp-btn { margin-top: 30px; }
@media (max-width: 900px) { .lp-howto-aside { position: static; } }
.lp-steps-num { border-top: 1px solid var(--lp-line); }
.lp-steps-num li {
    display: grid; grid-template-columns: 54px 1fr; gap: 8px;
    padding: 26px 0; border-bottom: 1px solid var(--lp-line);
}
.lp-steps-num .n {
    font-family: var(--lp-display); font-size: 15px; font-weight: 600;
    color: var(--lp-ink-3); padding-top: 3px;
}
/* Quatro passos são uma série, e série percorre o arco na ordem — como os
   números das cenas, os marcadores das opções e os ícones da corrente. Em
   cinza, os quatro liam como quatro itens iguais; coloridos, leem como um
   caminho com começo e fim. */
.lp-steps-num li:nth-child(1) .n { color: var(--tato-blue,  #4FA9DC); }
.lp-steps-num li:nth-child(2) .n { color: var(--arc-2); }
.lp-steps-num li:nth-child(3) .n { color: var(--tato-green, #34C97E); }
/* O quarto passo é a chegada, e fecha em navy em vez de seguir para o lima:
   o lima do arco em texto de 15px sobre a faixa quente é o pior contraste da
   paleta. Ele continua sendo a cor do botão logo ao lado, que é onde ele
   trabalha bem. */
.lp-steps-num li:nth-child(4) .n { color: var(--lp-navy); }
.lp-steps-num p { font-size: 17px; color: var(--lp-ink-2); }
.lp-steps-num b { color: var(--lp-navy); font-weight: 600; }

@media (max-width: 900px) { .lp-howto { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- planos: a ponte, sem preço ----------
   A tabela de planos saiu desta página (ver o comentário na view). O que
   ficou é a visão da plataforma e o caminho para a comparação. Quatro itens
   em linha, com o arco percorrido na ordem — os mesmos quatro produtos, os
   mesmos nomes do catálogo, o mesmo gesto do resto da página. */

.lp-todos {
    margin-top: 56px;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
}
.lp-todos li { display: grid; gap: 10px; align-content: start; }
.lp-todos .ico {
    width: 44px; height: 44px; border-radius: 13px;
    display: grid; place-items: center;
    background: #fff;
    box-shadow: 0 2px 0 0 var(--lp-line-soft), 0 0 0 1px var(--lp-line-soft);
    color: var(--tato-blue, #4FA9DC);
}
.lp-todos li:nth-child(2) .ico { color: var(--arc-2); }
.lp-todos li:nth-child(3) .ico { color: var(--tato-green, #34C97E); }
.lp-todos li:nth-child(4) .ico { color: #769E21; }
.lp-todos .ico svg { width: 21px; height: 21px; }
.lp-todos b {
    font-family: var(--lp-display); font-weight: 500; letter-spacing: -.02em;
    font-size: 23px; color: var(--lp-navy); margin-top: 6px;
}
.lp-todos .sub { font-size: 16px; color: var(--lp-ink-2); }

.lp-planos-cta { margin-top: 60px; text-align: center; }
.lp-planos-cta .lp-reassure { margin-top: 22px; }

@media (max-width: 820px) {
    .lp-todos { grid-template-columns: 1fr; gap: 26px; margin-top: 42px; }
    .lp-todos li { grid-template-columns: 44px 1fr; grid-template-areas: "ico nome" "ico sub"; column-gap: 16px; row-gap: 2px; }
    .lp-todos .ico { grid-area: ico; align-self: start; }
    .lp-todos b { grid-area: nome; margin-top: 0; font-size: 21px; }
    .lp-todos .sub { grid-area: sub; }
    .lp-planos-cta { margin-top: 44px; }

}
/* ---------- dúvidas ---------- */

.lp-faq { margin-top: 48px; border-top: 1px solid var(--lp-line); }
.lp-faq details { border-bottom: 1px solid var(--lp-line); }
.lp-faq summary {
    list-style: none; cursor: pointer; position: relative;
    padding: 26px 48px 26px 0;
    font-family: var(--lp-display); font-size: 21px; font-weight: 500;
    letter-spacing: -.022em; color: var(--lp-navy);
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
    content: ""; position: absolute; right: 8px; top: 50%;
    width: 11px; height: 11px; margin-top: -8px;
    border-right: 2px solid var(--lp-ink-3); border-bottom: 2px solid var(--lp-ink-3);
    transform: rotate(45deg); transition: transform .18s ease;
}
.lp-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.lp-faq .a { padding: 0 64px 28px 0; font-size: 17px; color: var(--lp-ink-2); }

@media (max-width: 560px) { .lp-faq .a { padding-right: 0; } .lp-faq summary { font-size: 19px; } }

/* ---------- conversa (captura de lead) ---------- */

.lp-talk .inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.lp-talk .aside p { font-size: 18px; color: var(--lp-ink-2); margin-top: 20px; }
.lp-talk .aside ul { margin-top: 30px; display: grid; gap: 15px; }
.lp-talk .aside li { display: grid; grid-template-columns: 19px 1fr; gap: 13px; font-size: 16.5px; color: var(--lp-ink-2); align-items: start; }
.lp-talk .aside li svg { width: 19px; height: 19px; color: var(--lp-green); margin-top: 2px; }
.lp-talk .aside li a { color: var(--lp-navy); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.lp-form { background: #fff; border-radius: 18px; padding: 34px 32px 30px; box-shadow: var(--lp-shadow); }
.lp-field { margin-bottom: 18px; }
.lp-field label { display: block; font-size: 14.5px; font-weight: 600; color: var(--lp-navy); margin-bottom: 8px; }
.lp-field .hint { font-weight: 400; color: var(--lp-ink-3); }
.lp-field input, .lp-field textarea {
    width: 100%; font-family: var(--lp-body); font-size: 16px; color: var(--lp-ink);
    background: #FCFBF9; border: 1.5px solid var(--lp-line); border-radius: 11px;
    padding: 14px 16px; transition: border-color .14s ease, background-color .14s ease;
}
.lp-field textarea { resize: vertical; min-height: 100px; line-height: 1.5; }
.lp-field input:focus, .lp-field textarea:focus { outline: none; background: #fff; border-color: var(--lp-navy); }
.lp-field input::placeholder, .lp-field textarea::placeholder { color: #B5AD9F; }

.lp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lp-form-foot { font-size: 14px; color: var(--lp-ink-3); margin-top: 16px; text-align: center; }

.lp-msg { border-radius: 12px; padding: 15px 17px; font-size: 15.5px; margin-bottom: 20px; display: flex; gap: 11px; align-items: flex-start; }
.lp-msg svg { width: 18px; height: 18px; margin-top: 2px; }
.lp-msg.ok { background: #E4F8ED; color: #146E43; }
.lp-msg.err { background: #FBE7E8; color: #9A2A31; }

.lp-thanks { text-align: center; padding: 30px 10px 26px; }
.lp-thanks .tick { width: 58px; height: 58px; border-radius: 50%; background: #E4F8ED; display: grid; place-items: center; margin: 0 auto 20px; }
.lp-thanks .tick svg { width: 28px; height: 28px; color: var(--lp-green); }
.lp-thanks h3 { font-size: 25px; margin-bottom: 12px; }
.lp-thanks p { font-size: 16.5px; color: var(--lp-ink-2); }

.lp-or { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--lp-line-soft); font-size: 15.5px; color: var(--lp-ink-2); text-align: center; }
.lp-or a { font-weight: 600; color: var(--lp-navy); }

@media (max-width: 900px) { .lp-talk .inner { grid-template-columns: 1fr; gap: 44px; } }

/* ---------- fecho ---------- */

/* O fecho era o único bloco da página sem desenho nenhum: navy sobre branco
   liso, no momento em que a decisão acontece. Recebe a mesma atmosfera da
   abertura, invertida — os campos de luz vêm de baixo, empurrando o olho
   para o botão em vez de para o título. A página abre e fecha com a mesma
   respiração. */
.lp-final { text-align: center; padding: 120px 0 128px; position: relative; overflow: hidden; }
.lp-final::before {
    content: "";
    position: absolute; inset: 26% 0 -80px 0;
    background:
        radial-gradient(56% 60% at 20% 96%, rgba(79,169,220,.18), transparent 68%),
        radial-gradient(52% 56% at 80% 98%, rgba(47,194,168,.15), transparent 66%),
        radial-gradient(64% 44% at 50% 58%, rgba(246,217,62,.12), transparent 72%);
    pointer-events: none;
}
.lp-final > * { position: relative; z-index: 1; }
.lp-final h2 { font-size: clamp(36px, 5.4vw, 62px); margin: 0 auto; max-width: 14em; }
.lp-final p { font-size: 19px; color: var(--lp-ink-2); margin: 24px auto 38px; max-width: 32em; }

/* Os compromissos, embaixo do botão.
   O lugar da prova social numa página que ainda não tem prova social: em vez
   de depoimento inventado ou "+500 clientes", as quatro linhas que as dúvidas
   mais acima já respondem por extenso, resumidas onde o dedo está sobre o
   botão. Discretas de propósito — elas tiram um medo, não fazem uma promessa
   nova, e em corpo grande passariam a competir com a chamada. */
.lp-selos {
    margin-top: 46px;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 12px 30px;
    font-size: 15px; color: var(--lp-ink-3);
}
.lp-selos li { display: inline-flex; align-items: center; gap: 8px; }
.lp-selos svg { width: 16px; height: 16px; color: var(--lp-green); }

@media (max-width: 640px) {
    .lp-selos { flex-direction: column; align-items: flex-start; text-align: left; gap: 11px; margin-top: 36px; }
}

/* ---------- rodapé ---------- */

.lp-foot { background: var(--lp-navy); color: rgba(255,255,255,.6); padding: 64px 0 44px; font-size: 15.5px; position: relative; }
/* A página abre com a régua do arco; fecha com ela também. Sem isto o
   rodapé terminava num corte seco de navy, e a assinatura da marca só
   existia no primeiro pixel — que ninguém olha duas vezes. */
.lp-foot::after { content: ""; position: absolute; inset: auto 0 0; height: 4px; background: var(--lp-arc); }
.lp-foot a { color: rgba(255,255,255,.82); text-decoration: none; }
.lp-foot a:hover { color: #fff; text-decoration: underline; }
.lp-foot .top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.12); }
.lp-foot .brand img { height: 27px; width: auto; }
.lp-foot .brand p { margin-top: 16px; max-width: 26em; }
.lp-foot nav { display: flex; gap: 56px; flex-wrap: wrap; }
.lp-foot nav div { display: grid; gap: 11px; align-content: start; }
.lp-foot nav b { color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.lp-foot .bottom { padding-top: 28px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 14px; color: rgba(255,255,255,.42); }

/* ============================================================
   ENTRADA AO ROLAR
   Só vale com a classe `lp-js` no <html>, posta pelo próprio
   script: um erro de JS não pode deixar a página em branco.
   E tudo mora dentro de `prefers-reduced-motion: no-preference`
   — quem pediu menos movimento no aparelho não vê nada disso.

   SÃO QUATRO GESTOS, E SÓ QUATRO.
   A tentação aqui é dar a cada seção uma animação própria, e o
   resultado disso é uma página que pisca de dez jeitos
   diferentes — "site de template" é exatamente isso. O que dá
   sensação de coisa cara é o CONTRÁRIO: um vocabulário curto,
   repetido em toda a página até virar sistema.

     1. `.lp-reveal`        um bloco sobe 16px e aparece
     2. `.lp-reveal-head`   a abertura da seção entra em tempos:
                            o rótulo (com o arco se desenhando),
                            o título, o resto
     3. `.lp-reveal-group`  o container fica parado e os FILHOS
                            entram em cascata, 70ms entre um e
                            outro
     4. `.lp-reveal-shot`   mídia: entra depois e assenta, com um
                            fio de escala — é o que faz a tela
                            parecer pousando na página

   Nada quica, nada gira, nada pisca. Deslocamento curto (14-24px)
   e desaceleração no fim: movimento grande passa pressa,
   movimento curto e lento passa confiança.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

    /* ---- 1. bloco ----
       O atraso em cascata NÃO está aqui: quem o calcula é o script, a partir
       da posição do elemento entre os irmãos que também revelam. Escrito em
       CSS por `nth-child` ele contaria os irmãos errados (os que não revelam
       entram na conta), e escrito pelo índice global do documento — como
       estava — a cascata sai embaralhada: as três cenas do problema entravam
       na ordem 2ª, 3ª, 1ª. */
    .lp-js .lp-reveal {
        opacity: 0; transform: translateY(16px);
        transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.3,1);
    }
    .lp-js .lp-reveal.is-in { opacity: 1; transform: none; }

    /* ---- 2. abertura de seção, em tempos ----
       O rótulo entra e o traço do arco se DESENHA da esquerda para a direita;
       o título vem 90ms atrás; a linha de apoio fecha. Como é o mesmo gesto
       em todas as seções, o olho aprende o ritmo e passa a esperar por ele —
       que é o que diferencia orquestração de enfeite.

       O H1 DA ABERTURA FICA DE FORA de propósito, e não por esquecimento: a
       primeira frase da página não pode depender de script nenhum para
       existir. Ela já está lá quando o resto ainda está entrando. */
    .lp-js .lp-reveal-head .lp-kicker,
    .lp-js .lp-reveal-head h2,
    .lp-js .lp-reveal-head .lede,
    .lp-js .lp-reveal-head .lp-sub,
    .lp-js .lp-reveal-head .lp-ba,
    .lp-js .lp-reveal-head > .lp-btn,
    .lp-js .lp-reveal-head .lp-reassure,
    .lp-js .lp-reveal-head.lp-journey-statement > p:last-child {
        opacity: 0; transform: translateY(14px);
        transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
    }
    .lp-js .lp-reveal-head.is-in .lp-kicker,
    .lp-js .lp-reveal-head.is-in h2,
    .lp-js .lp-reveal-head.is-in .lede,
    .lp-js .lp-reveal-head.is-in .lp-sub,
    .lp-js .lp-reveal-head.is-in .lp-ba,
    .lp-js .lp-reveal-head.is-in > .lp-btn,
    .lp-js .lp-reveal-head.is-in .lp-reassure,
    .lp-js .lp-reveal-head.lp-journey-statement.is-in > p:last-child { opacity: 1; transform: none; }

    .lp-js .lp-reveal-head h2 { transition-delay: 90ms; }
    .lp-js .lp-reveal-head .lede,
    .lp-js .lp-reveal-head .lp-sub,
    .lp-js .lp-reveal-head .lp-ba { transition-delay: 170ms; }
    .lp-js .lp-reveal-head > .lp-btn { transition-delay: 240ms; }
    .lp-js .lp-reveal-head .lp-reassure { transition-delay: 300ms; }
    .lp-js .lp-reveal-head.lp-journey-statement > p:last-child { transition-delay: 340ms; }

    /* A ASSINATURA SE DESENHANDO.
       O traço do arco antes do rótulo é o que a marca tem de mais
       reconhecível nesta página, e ele aparece seis vezes ao longo dela.
       Crescer de 0 a 34px custa uma linha e transforma a repetição em gesto:
       a cada seção, a marca assina de novo na frente da pessoa. */
    .lp-js .lp-reveal-head .lp-kicker::before {
        width: 0;
        transition: width .55s cubic-bezier(.2,.7,.3,1) .12s;
    }
    .lp-js .lp-reveal-head.is-in .lp-kicker::before { width: 34px; }

    /* ---- 3. cascata de filhos ----
       Para fileira, lista e passo numerado. O container não se move: se ele
       subisse junto, o deslocamento dele se somaria ao dos filhos e o
       conjunto andaria o dobro. O escalonamento para no sexto — além disso a
       última linha demoraria mais de meio segundo para chegar, e a pessoa já
       rolou. */
    .lp-js .lp-reveal-group > * {
        opacity: 0; transform: translateY(15px);
        transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
    }
    .lp-js .lp-reveal-group.is-in > * { opacity: 1; transform: none; }
    .lp-js .lp-reveal-group > *:nth-child(2)    { transition-delay:  70ms; }
    .lp-js .lp-reveal-group > *:nth-child(3)    { transition-delay: 140ms; }
    .lp-js .lp-reveal-group > *:nth-child(4)    { transition-delay: 210ms; }
    .lp-js .lp-reveal-group > *:nth-child(5)    { transition-delay: 280ms; }
    .lp-js .lp-reveal-group > *:nth-child(n+6)  { transition-delay: 350ms; }

    /* GRUPO MAIS ALTO QUE A TELA: quem recebe `is-in` é cada filho, não o
       container (o script decide isso e marca com `is-alto`). Sem
       escalonamento aqui — cada item já espera a própria vez na rolagem, e
       somar atraso a isso viraria lentidão, não ritmo. Precisa vir DEPOIS do
       bloco de `nth-child` acima: mesma especificidade, decide a ordem. */
    .lp-js .lp-reveal-group.is-alto > * { transition-delay: 0s; }
    .lp-js .lp-reveal-group.is-alto > .is-in { opacity: 1; transform: none; }

    /* ---- 4. mídia ----
       Sobe um pouco mais e vem de 98,5% de tamanho. A escala é quase
       imperceptível de propósito: o suficiente para a tela parecer assentando
       sobre a página, longe do "zoom" que denuncia efeito de biblioteca. */
    .lp-js .lp-reveal-shot {
        transform: translateY(24px) scale(.985);
        transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1);
    }
    .lp-js .lp-reveal-shot.is-in { transform: none; }

    /* A foto do produto entra DEPOIS do texto da mesma fileira. É a
       profundidade que o plano pedia: o texto assenta, e a tela chega em
       seguida, como um painel flutuando um passo atrás. */
    .lp-js .lp-reveal-group > .lp-prod-shot {
        transform: translateY(24px) scale(.985);
        transition-duration: .8s; transition-delay: 130ms;
    }
    .lp-js .lp-reveal-group.is-in > .lp-prod-shot { transform: none; }

}

/* ============================================================
   O QUE FICA PRONTO — prova tangível depois da promessa
   O centro é o site publicado; as quatro peças orbitam a janela para que
   a pessoa veja o produto como um conjunto, não como uma ideia abstrata.
   ============================================================ */
.lp-deliverables {
    position: relative;
    overflow: hidden;
    padding-top: 70px;
    background: linear-gradient(180deg, var(--lp-paper) 0%, var(--lp-wash-cool) 100%);
}
.lp-deliverables-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(184px, 220px) minmax(0, 1fr) minmax(184px, 220px);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    margin-top: 54px;
    padding: 28px;
    border-radius: 30px;
    background:
        radial-gradient(circle at 8% 15%, rgba(79, 169, 220, .13), transparent 27%),
        radial-gradient(circle at 93% 85%, rgba(47, 194, 168, .12), transparent 26%),
        rgba(255, 255, 255, .72);
    box-shadow: 0 26px 70px rgba(3, 26, 57, .09);
}
.lp-deliverables-stage::before,
.lp-deliverables-stage::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    border: 1px solid rgba(47, 194, 168, .16);
}
.lp-deliverables-stage::before { width: 260px; height: 260px; left: -120px; top: 34%; }
.lp-deliverables-stage::after { width: 330px; height: 330px; right: -190px; bottom: -170px; border-color: rgba(142, 211, 56, .2); }
.lp-deliverable-card {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 17px;
    border-radius: 17px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 10px 28px rgba(3, 26, 57, .07);
}
.lp-deliverable-card-site { grid-column: 1; grid-row: 1; }
.lp-deliverable-card-contacts { grid-column: 1; grid-row: 2; }
.lp-deliverable-card-whatsapp { grid-column: 3; grid-row: 1; }
.lp-deliverable-card-google { grid-column: 3; grid-row: 2; }
.lp-deliverable-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--lp-ink-3);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .1em;
    line-height: 1.2;
    text-transform: uppercase;
}
.lp-deliverable-icon {
    display: grid;
    width: 29px;
    height: 29px;
    flex: none;
    place-items: center;
    border-radius: 9px;
    color: var(--arc-2);
    background: #e8f8f4;
}
.lp-deliverable-icon svg { width: 15px; height: 15px; }
.lp-deliverable-card-site .lp-deliverable-icon { color: var(--tato-blue, #4fa9dc); background: #eaf4fb; }
.lp-deliverable-card-contacts .lp-deliverable-icon { color: var(--tato-green, #34c97e); background: #eaf8f0; }
.lp-deliverable-card-google .lp-deliverable-icon { color: #769e21; background: #f7f7da; }
.lp-deliverable-card strong {
    color: var(--lp-navy);
    font-family: var(--lp-display);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -.025em;
    line-height: 1.1;
}
.lp-deliverable-card p {
    margin: 0;
    color: var(--lp-ink-2);
    font-size: 13px;
    line-height: 1.45;
}
.lp-deliverable-thumb {
    width: 100%;
    height: 80px;
    flex: none;
    border-radius: 11px;
    object-fit: cover;
    object-position: center;
    box-shadow: 0 5px 15px rgba(3, 26, 57, .1);
}
.lp-mini-list { display: flex; gap: 5px; margin-top: auto; }
.lp-mini-list i {
    display: block;
    width: 24px;
    height: 7px;
    border-radius: 99px;
    background: #d9f2e8;
}
.lp-mini-list i:nth-child(2) { width: 42px; background: #c9e9f4; }
.lp-mini-list i:nth-child(3) { width: 17px; background: #f5edb8; }
.lp-mini-action,
.lp-mini-publish {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    color: var(--lp-navy);
    font-size: 11px;
    font-weight: 700;
}
.lp-mini-action svg { width: 14px; height: 14px; color: var(--arc-2); }
.lp-mini-publish i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tato-green, #34c97e);
}
.lp-mini-stars {
    margin-top: auto;
    color: #f2bb24;
    font-size: 15px;
    letter-spacing: .11em;
}
.lp-deliverables-window {
    position: relative;
    z-index: 1;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 18px;
    background: var(--lp-paper);
    box-shadow: 0 18px 42px rgba(3, 26, 57, .16);
}
.lp-deliverables-window-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    padding: 0 13px;
    color: var(--lp-ink-3);
    background: #f6f7f8;
    font-size: 10px;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.lp-deliverables-window-bar > span { display: flex; gap: 4px; }
.lp-deliverables-window-bar > span i { width: 7px; height: 7px; border-radius: 50%; background: #ef6b57; }
.lp-deliverables-window-bar > span i:nth-child(2) { background: #f5bd2b; }
.lp-deliverables-window-bar > span i:nth-child(3) { background: #5cc56d; }
.lp-deliverables-window-bar b { font-weight: 800; }
.lp-deliverables-window-bar small { margin-left: auto; color: var(--arc-2); font-size: 10px; font-weight: 800; }
.lp-deliverables-window > img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.lp-deliverables-window figcaption {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    color: var(--lp-ink-2);
    font-size: 12px;
    line-height: 1.3;
}
.lp-deliverables-window figcaption .lp-deliverable-icon { width: 24px; height: 24px; border-radius: 7px; }
.lp-deliverables-window figcaption .lp-deliverable-icon svg { width: 13px; height: 13px; }
.lp-deliverables-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 25px auto 0;
    color: var(--lp-ink-3);
    font-size: 14px;
    text-align: center;
}
.lp-deliverables-foot > span { width: 8px; height: 8px; border-radius: 50%; background: var(--lp-arc); }

@media (max-width: 920px) {
    .lp-deliverables-stage { grid-template-columns: minmax(164px, 190px) minmax(0, 1fr) minmax(164px, 190px); padding: 20px; }
    .lp-deliverable-card { padding: 14px; }
    .lp-deliverable-thumb { height: 68px; }
}
@media (max-width: 760px) {
    .lp-deliverables { padding-top: 88px; }
    .lp-deliverables-stage {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        gap: 13px;
        margin-top: 38px;
        padding: 15px;
    }
    .lp-deliverables-window { grid-column: 1 / -1; grid-row: 1; }
    .lp-deliverable-card-site { grid-column: 1; grid-row: 2; }
    .lp-deliverable-card-contacts { grid-column: 2; grid-row: 2; }
    .lp-deliverable-card-whatsapp { grid-column: 1; grid-row: 3; }
    .lp-deliverable-card-google { grid-column: 2; grid-row: 3; }
    .lp-deliverable-thumb { height: 74px; }
}
@media (max-width: 520px) {
    .lp-deliverables-stage { grid-template-columns: 1fr; }
    .lp-deliverables-window,
    .lp-deliverable-card-site,
    .lp-deliverable-card-contacts,
    .lp-deliverable-card-whatsapp,
    .lp-deliverable-card-google { grid-column: 1; }
    .lp-deliverables-window { grid-row: 1; }
    .lp-deliverable-card-site { grid-row: 2; }
    .lp-deliverable-card-contacts { grid-row: 3; }
    .lp-deliverable-card-whatsapp { grid-row: 4; }
    .lp-deliverable-card-google { grid-row: 5; }
    .lp-deliverable-card { display: grid; grid-template-columns: auto 1fr; column-gap: 11px; align-items: center; }
    .lp-deliverable-card-head { grid-column: 1 / -1; }
    .lp-deliverable-thumb { grid-column: 1 / -1; height: 126px; }
    .lp-deliverable-card strong,
    .lp-deliverable-card p,
    .lp-mini-list,
    .lp-mini-action,
    .lp-mini-publish,
    .lp-mini-stars { grid-column: 1 / -1; }
    .lp-deliverables-foot { align-items: flex-start; font-size: 13px; }
}