/* ==========================================================================
   Claudinho Finanças — tokens v1
   Lido do Figma "Claudinho Finanças — Marca + Design System v1" em 09/11/2026
   (arquivo 1dVD217CiLkmEZjBG1tzXp · 59 variáveis · 12 estilos de texto).

   Como ler este arquivo
   - [Figma]    valor que está no Figma (variável, estilo ou componente).
   - [decidido] o Figma não define; decisão tomada aqui. Tudo explicado no LEIA-ME.md.
   Os nomes --cf-* são os mesmos que o Figma publica como "code syntax".

   Tema
   - Claro é o padrão (único modo que existe no Figma).
   - Escuro é [decidido]: entra sozinho com prefers-color-scheme, ou à força com
     <html data-tema="escuro">. Para travar no claro: <html data-tema="claro">.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------- Primitivos · paleta [Figma: coleção "CF · Primitivos"] ---------- */
  --cf-orange-100: #F8E2D8;
  --cf-orange-300: #E8A285;
  --cf-orange-500: #D97757;   /* Laranja Claudinho: é a cor do personagem */
  --cf-orange-700: #A6472F;
  --cf-orange-900: #622D21;

  --cf-forest-100: #E8EEDC;
  --cf-forest-300: #A9BD98;
  --cf-forest-500: #497253;
  --cf-forest-700: #173D2A;   /* Verde-floresta: estrutura, títulos e ações */
  --cf-forest-900: #10271C;

  --cf-sage-100: #F0F3E9;
  --cf-sage-300: #CAD6B6;
  --cf-sage-500: #8DA572;     /* Verde-sálvia: apoio e áreas suaves */
  --cf-sage-700: #526A3F;
  --cf-sage-900: #304427;

  --cf-neutral-0: #FFFDF7;    /* Papel: superfície de cards */
  --cf-neutral-50: #FAF3E7;   /* Marfim: fundo da página */
  --cf-neutral-200: #D8DFC9;
  --cf-neutral-500: #526457;  /* Musgo: texto secundário */
  --cf-neutral-900: #1D2921;  /* Tinta: texto */

  --cf-gold-500: #B28A3E;     /* Dourado: só detalhe de ilustração e gráfico, nunca texto */
  --cf-danger-700: #A63830;
  --cf-info-700: #315F76;

  /* ---------- Primitivos derivados [decidido] ----------
     Degraus que faltavam para o tema escuro e para os tons das telas. */
  --cf-forest-600: #30583F;   /* entre 500 e 700 · borda no escuro */
  --cf-forest-800: #143223;   /* entre 700 e 900 · área suave no escuro */
  --cf-forest-950: #0B1A13;   /* fundo da página no escuro */
  --cf-gold-100: #F4EAD2;
  --cf-gold-300: #D9B66A;
  --cf-gold-700: #7A5A1C;     /* dourado que aguenta virar texto (6,2:1 no papel) */
  --cf-gold-900: #3A3018;
  --cf-danger-100: #F6E0DD;
  --cf-danger-300: #E39A92;
  --cf-danger-900: #4A2421;
  --cf-info-100: #DEEAF0;
  --cf-info-300: #8FBCD0;
  --cf-info-900: #1C3A47;
  --cf-orange-950: #4A2A20;

  /* ---------- Semântica · claro [Figma: coleção "CF · Semântica", modo "Claro"] ---------- */
  --cf-bg-canvas: var(--cf-neutral-50);
  --cf-bg-surface: var(--cf-neutral-0);
  --cf-bg-brand: var(--cf-forest-700);
  --cf-bg-soft: var(--cf-forest-100);

  --cf-text-primary: var(--cf-neutral-900);
  --cf-text-secondary: var(--cf-neutral-500);
  --cf-text-inverse: var(--cf-neutral-0);      /* texto sobre --cf-bg-brand */
  --cf-text-brand: var(--cf-forest-700);       /* títulos */

  --cf-action-primary: var(--cf-forest-700);
  --cf-action-hover: var(--cf-forest-900);
  --cf-action-disabled: var(--cf-neutral-200);
  --cf-border-default: var(--cf-neutral-200);

  --cf-brand-character: var(--cf-orange-500);
  --cf-brand-accent: var(--cf-sage-500);

  --cf-status-success: var(--cf-forest-500);
  --cf-status-warning: var(--cf-orange-700);
  --cf-status-danger: var(--cf-danger-700);
  --cf-status-info: var(--cf-info-700);

  /* ---------- Semântica complementar [decidido] ---------- */
  --cf-action-text: var(--cf-neutral-0);         /* texto do botão principal (no Figma é text/inverse; separado porque inverte no escuro) */
  --cf-action-secondary-hover: var(--cf-forest-100);
  --cf-focus-ring: var(--cf-orange-700);         /* [Figma] estado Focus dos componentes: contorno de 3px #A6472F */
  --cf-bg-overlay: rgba(16, 39, 28, 0.55);       /* fundo atrás de janelas/modais */

  --cf-status-success-bg: var(--cf-forest-100);
  --cf-status-warning-bg: var(--cf-orange-100);
  --cf-status-danger-bg: var(--cf-danger-100);
  --cf-status-info-bg: var(--cf-info-100);

  /* Tons das telas do agente (campo "tom" do BLOCOS.md): texto/traço + fundo suave */
  --cf-tom-bom: var(--cf-forest-500);
  --cf-tom-bom-bg: var(--cf-forest-100);
  --cf-tom-morno: var(--cf-gold-700);
  --cf-tom-morno-bg: var(--cf-gold-100);
  --cf-tom-aviso: var(--cf-orange-700);
  --cf-tom-aviso-bg: var(--cf-orange-100);
  --cf-tom-ruim: var(--cf-danger-700);
  --cf-tom-ruim-bg: var(--cf-danger-100);
  --cf-tom-neutro: var(--cf-neutral-500);
  --cf-tom-neutro-bg: var(--cf-sage-100);

  /* Séries de gráfico, nesta ordem. Saída de dinheiro comum é laranja, nunca vermelho de erro. */
  --cf-chart-1: var(--cf-forest-500);   /* entrou / série principal */
  --cf-chart-2: var(--cf-orange-500);   /* saiu / comparação */
  --cf-chart-3: var(--cf-gold-500);
  --cf-chart-4: var(--cf-info-700);
  --cf-chart-5: var(--cf-sage-500);
  --cf-chart-6: var(--cf-orange-900);
  --cf-chart-outros: var(--cf-forest-300);
  --cf-chart-grid: var(--cf-neutral-200);
  --cf-chart-track: var(--cf-forest-100); /* trilho de barras de progresso e medidor */
  --cf-text-tertiary: #5F7163;            /* eixos, datas e rodapés: musgo mais claro, 4,7:1 no marfim */

  /* Mapa de calor: do mais frio ao mais quente */
  --cf-heat-0: var(--cf-sage-100);
  --cf-heat-1: var(--cf-sage-300);
  --cf-heat-2: var(--cf-sage-500);
  --cf-heat-3: var(--cf-forest-500);
  --cf-heat-4: var(--cf-forest-700);

  /* ---------- Geometria [Figma: coleção "CF · Geometria"] ---------- */
  --cf-space-4: 4px;
  --cf-space-8: 8px;
  --cf-space-12: 12px;
  --cf-space-16: 16px;
  --cf-space-24: 24px;
  --cf-space-32: 32px;
  --cf-space-48: 48px;
  --cf-space-64: 64px;
  --cf-space-80: 80px;
  --cf-space-96: 96px;

  --cf-radius-0: 0px;
  --cf-radius-8: 8px;       /* detalhes */
  --cf-radius-16: 16px;     /* cards */
  --cf-radius-24: 24px;     /* painéis */
  --cf-radius-999: 999px;   /* botões, tags e chips: cápsula */

  --cf-size-44: 44px;       /* alvo de toque mínimo */
  --cf-size-48: 48px;       /* altura do botão */
  --cf-size-56: 56px;

  /* Layout [Figma: página 01.4, texto "Espaço e grade"] */
  --cf-layout-max: 1200px;          /* conteúdo */
  --cf-layout-page: 1440px;         /* página de referência */
  --cf-layout-margin: 64px;         /* margem no computador (padding dos quadros do Figma) */
  --cf-layout-margin-mobile: 24px;  /* margem no celular (390 px) */
  --cf-border-width: 1px;
  --cf-focus-width: 3px;

  /* ---------- Tipografia [Figma: 12 estilos de texto "CF/…"] ---------- */
  --cf-font-display: "Fraunces", Georgia, "Times New Roman", serif;   /* só Bold (700) */
  --cf-font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;   /* Regular (400) e Bold (700) */

  /* atalho `font:` = peso tamanho/entrelinha família · espaçamento entre letras é 0 em todos */
  --cf-type-hero: 700 72px/78px var(--cf-font-display);
  --cf-type-h1: 700 56px/62px var(--cf-font-display);
  --cf-type-h2: 700 40px/48px var(--cf-font-display);
  --cf-type-h3: 700 32px/40px var(--cf-font-display);
  --cf-type-h4: 700 24px/32px var(--cf-font-body);
  --cf-type-body-large: 400 20px/30px var(--cf-font-body);
  --cf-type-body: 400 18px/28px var(--cf-font-body);
  --cf-type-body-small: 400 16px/24px var(--cf-font-body);
  --cf-type-caption: 400 14px/20px var(--cf-font-body);
  --cf-type-label: 700 12px/18px var(--cf-font-body);       /* caixa alta, só em rótulo curto */
  --cf-type-button: 700 16px/24px var(--cf-font-body);
  --cf-type-number: 700 40px/48px var(--cf-font-body);      /* número grande; usar tabular-nums */
  --cf-type-hero-mobile: 700 40px/48px var(--cf-font-display);   /* [Figma] "No mobile: título principal 40/48, corpo 18/28" */

  /* ---------- Movimento [Figma: página 01.4, texto "Movimento"] ---------- */
  --cf-duration-fast: 160ms;     /* resposta de interface */
  --cf-duration-normal: 240ms;
  --cf-duration-scene: 480ms;    /* entrada de cena */
  --cf-ease: cubic-bezier(.2, .8, .2, 1);          /* [decidido] vem do pacote v0.2; o Figma não cita curva */
  --cf-ease-elastic: cubic-bezier(.3, 1.4, .5, 1); /* [decidido] "elasticidade discreta": só no personagem */

  /* ---------- Relevo [decidido] ----------
     O Figma não tem estilo de sombra; a regra é "borda discreta de 1 px, sem sombra que dispute
     com a informação". Estas duas existem para quando algo flutua de verdade. */
  --cf-shadow-card: 0 1px 2px rgba(29, 41, 33, .05), 0 8px 24px rgba(29, 41, 33, .06);
  --cf-shadow-float: 0 2px 6px rgba(16, 39, 28, .08), 0 18px 48px rgba(16, 39, 28, .16);

  /* ---------- Modo privado [decidido] ---------- */
  --cf-private-blur: 7px;        /* desfoque de valores e nomes */
}

/* ==========================================================================
   Tema escuro [decidido — o Figma só tem o modo "Claro"]
   Mesmo desenho: floresta vira o fundo, marfim vira texto e botão.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;

    --cf-bg-canvas: var(--cf-forest-950);
    --cf-bg-surface: var(--cf-forest-900);
    --cf-bg-brand: var(--cf-forest-700);
    --cf-bg-soft: var(--cf-forest-800);

    --cf-text-primary: var(--cf-neutral-50);
    --cf-text-secondary: var(--cf-forest-300);
    --cf-text-inverse: var(--cf-neutral-0);
    --cf-text-brand: var(--cf-forest-100);

    --cf-action-primary: var(--cf-neutral-50);
    --cf-action-hover: var(--cf-neutral-0);
    --cf-action-text: var(--cf-forest-700);
    --cf-action-disabled: var(--cf-forest-800);
    --cf-action-secondary-hover: var(--cf-forest-700);
    --cf-border-default: #264A38;
    --cf-focus-ring: var(--cf-orange-300);
    --cf-bg-overlay: rgba(5, 12, 9, 0.7);

    --cf-status-success: var(--cf-sage-500);
    --cf-status-warning: var(--cf-orange-300);
    --cf-status-danger: var(--cf-danger-300);
    --cf-status-info: var(--cf-info-300);
    --cf-status-success-bg: var(--cf-forest-800);
    --cf-status-warning-bg: var(--cf-orange-950);
    --cf-status-danger-bg: var(--cf-danger-900);
    --cf-status-info-bg: var(--cf-info-900);

    --cf-tom-bom: var(--cf-sage-500);
    --cf-tom-bom-bg: var(--cf-forest-800);
    --cf-tom-morno: var(--cf-gold-300);
    --cf-tom-morno-bg: var(--cf-gold-900);
    --cf-tom-aviso: var(--cf-orange-300);
    --cf-tom-aviso-bg: var(--cf-orange-950);
    --cf-tom-ruim: var(--cf-danger-300);
    --cf-tom-ruim-bg: var(--cf-danger-900);
    --cf-tom-neutro: var(--cf-forest-300);
    --cf-tom-neutro-bg: var(--cf-forest-800);

    --cf-chart-1: #7A9A6D;
    --cf-chart-2: var(--cf-orange-500);
    --cf-chart-3: var(--cf-gold-300);
    --cf-chart-4: var(--cf-info-300);
    --cf-chart-5: var(--cf-sage-300);
    --cf-chart-6: var(--cf-orange-300);
    --cf-chart-outros: var(--cf-forest-500);
    --cf-chart-grid: #264A38;
    --cf-chart-track: var(--cf-forest-700);
    --cf-text-tertiary: var(--cf-sage-500);

    --cf-heat-0: var(--cf-forest-800);
    --cf-heat-1: var(--cf-forest-600);
    --cf-heat-2: var(--cf-forest-500);
    --cf-heat-3: var(--cf-sage-500);
    --cf-heat-4: var(--cf-sage-300);

    --cf-shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    --cf-shadow-float: 0 2px 6px rgba(0, 0, 0, .35), 0 18px 48px rgba(0, 0, 0, .45);
  }
}

:root[data-tema="escuro"] {
  color-scheme: dark;

  --cf-bg-canvas: var(--cf-forest-950);
  --cf-bg-surface: var(--cf-forest-900);
  --cf-bg-brand: var(--cf-forest-700);
  --cf-bg-soft: var(--cf-forest-800);

  --cf-text-primary: var(--cf-neutral-50);
  --cf-text-secondary: var(--cf-forest-300);
  --cf-text-inverse: var(--cf-neutral-0);
  --cf-text-brand: var(--cf-forest-100);

  --cf-action-primary: var(--cf-neutral-50);
  --cf-action-hover: var(--cf-neutral-0);
  --cf-action-text: var(--cf-forest-700);
  --cf-action-disabled: var(--cf-forest-800);
  --cf-action-secondary-hover: var(--cf-forest-700);
  --cf-border-default: #264A38;
  --cf-focus-ring: var(--cf-orange-300);
  --cf-bg-overlay: rgba(5, 12, 9, 0.7);

  --cf-status-success: var(--cf-sage-500);
  --cf-status-warning: var(--cf-orange-300);
  --cf-status-danger: var(--cf-danger-300);
  --cf-status-info: var(--cf-info-300);
  --cf-status-success-bg: var(--cf-forest-800);
  --cf-status-warning-bg: var(--cf-orange-950);
  --cf-status-danger-bg: var(--cf-danger-900);
  --cf-status-info-bg: var(--cf-info-900);

  --cf-tom-bom: var(--cf-sage-500);
  --cf-tom-bom-bg: var(--cf-forest-800);
  --cf-tom-morno: var(--cf-gold-300);
  --cf-tom-morno-bg: var(--cf-gold-900);
  --cf-tom-aviso: var(--cf-orange-300);
  --cf-tom-aviso-bg: var(--cf-orange-950);
  --cf-tom-ruim: var(--cf-danger-300);
  --cf-tom-ruim-bg: var(--cf-danger-900);
  --cf-tom-neutro: var(--cf-forest-300);
  --cf-tom-neutro-bg: var(--cf-forest-800);

  --cf-chart-1: #7A9A6D;
  --cf-chart-2: var(--cf-orange-500);
  --cf-chart-3: var(--cf-gold-300);
  --cf-chart-4: var(--cf-info-300);
  --cf-chart-5: var(--cf-sage-300);
  --cf-chart-6: var(--cf-orange-300);
  --cf-chart-outros: var(--cf-forest-500);
  --cf-chart-grid: #264A38;
  --cf-chart-track: var(--cf-forest-700);
  --cf-text-tertiary: var(--cf-sage-500);

  --cf-heat-0: var(--cf-forest-800);
  --cf-heat-1: var(--cf-forest-600);
  --cf-heat-2: var(--cf-forest-500);
  --cf-heat-3: var(--cf-sage-500);
  --cf-heat-4: var(--cf-sage-300);

  --cf-shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  --cf-shadow-float: 0 2px 6px rgba(0, 0, 0, .35), 0 18px 48px rgba(0, 0, 0, .45);
}

/* Movimento reduzido [Figma: "Respeitar redução de movimento"] */
@media (prefers-reduced-motion: reduce) {
  :root {
    --cf-duration-fast: 1ms;
    --cf-duration-normal: 1ms;
    --cf-duration-scene: 1ms;
  }
}

/* Claudinho Finanças — site de vendas v1.
   As variáveis --cf-* vêm de tokens.css (design system), colado antes deste arquivo no build. */

@font-face{font-family:"Fraunces";src:url("fontes/fraunces-bold-latin.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("fontes/dmsans-400-700-latin.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --pad:clamp(24px,5vw,64px);
  --sec:clamp(72px,9vw,128px);
  --painel:clamp(24px,3vw,36px);          /* raio dos painéis de seção */
  --beira:clamp(8px,1.6vw,20px);          /* recuo lateral dos painéis */
  --ink-claro:rgba(255,253,247,.14);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--cf-bg-canvas);color:var(--cf-text-primary);font:var(--cf-type-body);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
p{text-wrap:pretty}
ul,ol{padding:0;list-style:none}
img,svg,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
b,strong{font-weight:700}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.nb{white-space:nowrap}
br.so-g{display:none}
@media (min-width:961px){br.so-g{display:inline}}
:focus-visible{outline:var(--cf-focus-width) solid var(--cf-focus-ring);outline-offset:3px;border-radius:4px}
.pular{position:absolute;left:16px;top:-80px;z-index:50;background:var(--cf-action-primary);color:var(--cf-action-text);padding:12px 16px;border-radius:var(--cf-radius-8);font:var(--cf-type-button)}
.pular:focus{top:16px}

.largura{width:100%;max-width:calc(var(--cf-layout-max) + 2*var(--pad));margin-inline:auto;padding-inline:var(--pad)}

/* ---------- tipografia ---------- */
h1{font:700 clamp(36px,4.6vw,60px)/1.1 var(--cf-font-display);color:var(--cf-text-brand);text-wrap:balance}
h2{font:700 clamp(32px,4.4vw,56px)/1.1 var(--cf-font-display);color:var(--cf-text-brand);text-wrap:balance}
.h2-menor{font-size:clamp(28px,3vw,40px);line-height:1.2}
h3{font:var(--cf-type-h4);color:var(--cf-text-brand)}
.olho{font:var(--cf-type-label);text-transform:uppercase;letter-spacing:.04em;color:var(--cf-text-brand);margin-bottom:var(--cf-space-16)}
.lide{font:var(--cf-type-body-large);max-width:60ch;margin-top:var(--cf-space-24)}
.miudo{font:var(--cf-type-caption);color:var(--cf-text-secondary)}
.v{font-variant-numeric:tabular-nums;white-space:nowrap;transition:filter var(--cf-duration-normal) var(--cf-ease)}
.privado .v{filter:blur(var(--cf-private-blur));user-select:none}

/* ---------- botões (CF/Button) ---------- */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:var(--cf-space-8);min-height:var(--cf-size-48);padding:var(--cf-space-12) var(--cf-space-24);border:1px solid transparent;border-radius:var(--cf-radius-999);background:var(--cf-action-primary);color:var(--cf-action-text);font:var(--cf-type-button);text-decoration:none;cursor:pointer;transition:background var(--cf-duration-fast) var(--cf-ease),transform var(--cf-duration-fast) var(--cf-ease),box-shadow var(--cf-duration-fast) var(--cf-ease)}
.bt:hover{background:var(--cf-action-hover);transform:translateY(-2px)}
.bt:active{transform:translateY(0)}
.bt-g{min-height:var(--cf-size-56);padding-inline:var(--cf-space-32);font-size:18px}
.bt-s{background:var(--cf-bg-surface);color:var(--cf-text-brand);border-color:var(--cf-border-default)}
.bt-s:hover{background:var(--cf-action-secondary-hover)}
.bt-cheio{width:100%}
.bt .ic{transition:transform var(--cf-duration-normal) var(--cf-ease)}
.bt:hover .ic{transform:translateX(4px)}
.acoes{display:flex;flex-wrap:wrap;gap:var(--cf-space-12);margin-top:var(--cf-space-32)}

/* ---------- topo ---------- */
.topo{position:sticky;top:0;z-index:20;background:var(--cf-bg-canvas);border-bottom:1px solid transparent;transition:border-color var(--cf-duration-normal)}
.topo.rolou{border-bottom-color:var(--cf-border-default)}
.topo-in{display:flex;align-items:center;gap:var(--cf-space-24);min-height:72px}
.marca{font:700 24px/1 var(--cf-font-display);color:var(--cf-text-brand);text-decoration:none;white-space:nowrap}
.menu{display:flex;gap:var(--cf-space-24);margin-left:auto;font:var(--cf-type-body-small);color:var(--cf-text-secondary)}
.menu a{text-decoration:none;padding:8px 0;border-bottom:2px solid transparent;transition:color var(--cf-duration-fast),border-color var(--cf-duration-fast)}
.menu a:hover{color:var(--cf-text-brand);border-bottom-color:var(--cf-brand-character)}
.topo .bt{min-height:var(--cf-size-44);padding-block:8px}

/* ---------- entradas ---------- */
@keyframes sobe{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.ent{animation:sobe var(--cf-duration-scene) var(--cf-ease) both;animation-delay:calc(var(--i,0)*90ms + 80ms)}
.rev-on .rev{opacity:0;transform:translateY(22px);transition:opacity var(--cf-duration-scene) var(--cf-ease),transform var(--cf-duration-scene) var(--cf-ease);transition-delay:calc(var(--d,0)*80ms)}
.rev-on .rev.in{opacity:1;transform:none}

/* ---------- hero ---------- */
.hero{padding-top:clamp(24px,4vw,56px)}
.hero-in{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:var(--cf-space-48);align-items:center}
.hero-txt{padding-bottom:clamp(24px,4vw,56px)}
.interroga{position:relative;display:inline-block;white-space:nowrap}
.interroga::after{content:"";position:absolute;left:0;right:.2em;bottom:-.06em;height:.16em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5c5-6 10-6 15 0s10 6 15 0 5-5 10-2' fill='none' stroke='%23D97757' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50%/40px 100%;clip-path:inset(0 100% 0 0);animation:risca .9s 1s var(--cf-ease) forwards}
@keyframes risca{to{clip-path:inset(0 0 0 0)}}
.pt{color:var(--cf-brand-character)}

.palco{position:relative;z-index:4;align-self:end;min-height:300px;display:flex;justify-content:center;align-items:flex-end}
.palco-bolha{position:absolute;left:50%;bottom:8%;width:min(108%,460px);aspect-ratio:1;border-radius:50%;background:var(--cf-bg-soft);transform:translateX(-50%)}
.mascote{position:relative;z-index:4;display:block;width:min(100%,400px);margin-bottom:-26px}
.mascote img{width:100%;transform-origin:50% 100%;animation:balanca 5.5s ease-in-out infinite}
@keyframes balanca{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-8px) rotate(.8deg)}}

.flut{position:absolute;z-index:5;display:grid;place-items:center;animation:boia 6s ease-in-out infinite}
.flut>*{grid-area:1/1}
.flut b{width:48px;height:48px;border-radius:50%;background:var(--cf-brand-character);color:var(--cf-neutral-900);font:700 30px/48px var(--cf-font-display);text-align:center;animation:pergunta 9s infinite both}
.flut i{font-style:normal;white-space:nowrap;display:inline-flex;gap:6px;align-items:center;padding:8px 14px 8px 10px;border-radius:var(--cf-radius-999);background:var(--cf-bg-surface);border:1px solid var(--cf-border-default);font:700 14px/20px var(--cf-font-body);color:var(--cf-text-brand);box-shadow:var(--cf-shadow-card);animation:resposta 9s infinite both}
.flut i .ic{color:var(--cf-status-success)}
.f1{left:-6%;top:16%}.f2{right:-4%;top:4%;animation-delay:-2s}.f3{left:-12%;top:58%;animation-delay:-4s}
.f2 b,.f2 i{animation-delay:-3s}.f3 b,.f3 i{animation-delay:-6s}
@keyframes boia{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pergunta{0%,28%{opacity:1;transform:scale(1) rotate(0)}36%,92%{opacity:0;transform:scale(.3) rotate(-30deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes resposta{0%,30%{opacity:0;transform:scale(.6)}40%,88%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.6)}}

.demo{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--cf-space-32);padding:var(--cf-space-32);border-radius:var(--painel);background:var(--cf-bg-brand);color:var(--cf-text-inverse)}
.demo-txt{display:flex;flex-direction:column;justify-content:center;padding:var(--cf-space-16) 0 var(--cf-space-16) var(--cf-space-16)}
.demo .olho{color:var(--cf-sage-300)}
.demo-t{font:700 clamp(28px,3vw,40px)/1.15 var(--cf-font-display)}
.demo .miudo{color:var(--cf-forest-300);margin-top:var(--cf-space-16)}
.pergunte-cx{display:flex;align-items:center;gap:var(--cf-space-12);min-height:var(--cf-size-56);margin-top:var(--cf-space-24);padding:0 var(--cf-space-16);border-radius:var(--cf-radius-16);background:var(--cf-bg-surface);color:var(--cf-text-primary);font:var(--cf-type-body)}
.pergunte-cx .ic{color:var(--cf-text-secondary)}
.pergunte-tx{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cursor{width:2px;height:1.2em;background:var(--cf-brand-character);margin-left:-8px;animation:pisca 1s steps(1) infinite}
@keyframes pisca{50%{opacity:0}}
.pergunte-ops{display:flex;flex-wrap:wrap;gap:var(--cf-space-8);margin-top:var(--cf-space-16)}
.chip-bt{min-height:var(--cf-size-44);padding:8px 16px;border-radius:var(--cf-radius-999);border:1px solid var(--ink-claro);background:rgba(255,253,247,.06);color:var(--cf-text-inverse);font:700 14px/20px var(--cf-font-body);cursor:pointer;transition:background var(--cf-duration-fast),color var(--cf-duration-fast),border-color var(--cf-duration-fast),transform var(--cf-duration-fast) var(--cf-ease)}
.chip-bt:hover{background:rgba(255,253,247,.14);transform:translateY(-1px)}
.chip-bt.ativo{background:var(--cf-bg-surface);color:var(--cf-text-brand);border-color:var(--cf-bg-surface)}
.selos{display:flex;flex-wrap:wrap;gap:var(--cf-space-8);margin-top:var(--cf-space-24)}
.selos li{display:inline-flex;align-items:center;gap:6px;padding:6px 14px 6px 10px;border-radius:var(--cf-radius-999);background:var(--cf-bg-surface);border:1px solid var(--cf-border-default);font:700 13px/20px var(--cf-font-body);color:var(--cf-text-brand)}
.selos .ic{width:18px;height:18px;color:var(--cf-status-success)}
.nota-demo{font:var(--cf-type-caption);color:var(--cf-text-secondary);text-align:center;margin-top:var(--cf-space-16)}

/* ---------- janela com tela do produto ---------- */
.janela{position:relative;background:var(--cf-bg-canvas);border:1px solid var(--cf-border-default);border-radius:var(--cf-radius-16);overflow:hidden;box-shadow:var(--cf-shadow-float);color:var(--cf-text-primary)}
.janela-topo{display:flex;align-items:center;gap:var(--cf-space-12);min-height:44px;padding:0 var(--cf-space-12) 0 var(--cf-space-16);background:var(--cf-bg-surface);border-bottom:1px solid var(--cf-border-default)}
.bolinhas{display:flex;gap:6px}
.bolinhas i{width:10px;height:10px;border-radius:50%;background:var(--cf-orange-300)}
.bolinhas i:nth-child(2){background:var(--cf-gold-300)}
.bolinhas i:nth-child(3){background:var(--cf-sage-500)}
.janela-nome{font:700 14px/20px var(--cf-font-body);color:var(--cf-text-brand);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.selo-ex{margin-left:auto;flex:none;padding:3px 10px;border-radius:var(--cf-radius-999);border:1px solid var(--cf-border-default);background:var(--cf-bg-surface);font:700 11px/16px var(--cf-font-body);text-transform:uppercase;letter-spacing:.04em;color:var(--cf-text-secondary)}
.janela-abrir,.janela-soltar{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;border:0;background:none;color:var(--cf-text-secondary);cursor:pointer;transition:background var(--cf-duration-fast),color var(--cf-duration-fast)}
.janela-abrir:hover,.janela-soltar:hover{background:var(--cf-bg-soft);color:var(--cf-text-brand)}
.janela-corpo{position:relative;height:clamp(460px,62vh,640px);background:var(--cf-bg-canvas)}
.tela-frame{width:100%;height:100%;border:0;background:var(--cf-bg-canvas);transition:opacity var(--cf-duration-normal) var(--cf-ease)}
.tela-frame.trocando{opacity:0}
.janela-pegar{display:none}
.js .janela-pegar{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:center;padding:var(--cf-space-24);border:0;background:linear-gradient(to top,rgba(250,243,231,.92),rgba(250,243,231,0) 36%);cursor:pointer}
.pilula{display:inline-flex;align-items:center;gap:var(--cf-space-8);min-height:var(--cf-size-48);padding:0 var(--cf-space-24);border-radius:var(--cf-radius-999);background:var(--cf-action-primary);color:var(--cf-action-text);font:var(--cf-type-button);box-shadow:var(--cf-shadow-float);transition:background var(--cf-duration-fast),transform var(--cf-duration-fast) var(--cf-ease)}
.janela-pegar:hover .pilula{background:var(--cf-action-hover);transform:translateY(-2px)}
.janela.ativa{outline:var(--cf-focus-width) solid var(--cf-brand-character);outline-offset:3px}
.janela.ativa .janela-pegar{display:none}
.janela-soltar{display:none;width:auto;padding:0 12px;border-radius:var(--cf-radius-999);font:700 13px/1 var(--cf-font-body);gap:6px;background:var(--cf-bg-soft);color:var(--cf-text-brand)}
.janela.ativa .janela-soltar{display:inline-flex;align-items:center}
.janela.ativa .janela-abrir{display:none}
.hero-janela .janela-corpo{height:clamp(420px,52vh,560px)}

/* ---------- faixa ---------- */
.faixa{margin-top:var(--cf-space-48);padding:var(--cf-space-16) 0;border-block:1px solid var(--cf-border-default);overflow:hidden}
.faixa-trilho{display:flex;align-items:center;gap:var(--cf-space-24);width:max-content;animation:corre 46s linear infinite;font:700 clamp(18px,2vw,24px)/1 var(--cf-font-display);color:var(--cf-text-brand);white-space:nowrap}
.faixa-trilho i{width:10px;height:10px;border-radius:50%;background:var(--cf-brand-character);flex:none}
@keyframes corre{to{transform:translateX(-50%)}}

/* ---------- seções ---------- */
.sec{padding-block:var(--sec)}
.sec-escura,.sec-suave{margin-inline:var(--beira);border-radius:var(--painel)}
.sec-escura{background:var(--cf-bg-brand);color:var(--cf-text-inverse)}
.sec-escura h2,.sec-escura h3{color:var(--cf-text-inverse)}
.sec-escura .olho{color:var(--cf-sage-300)}
.sec-escura .lide{color:var(--cf-forest-100)}
.sec-suave{background:var(--cf-bg-soft)}
.sec+.sec-escura,.sec+.sec-suave,.sec-escura+.sec-suave,.sec-suave+.sec-escura{margin-top:0}
.sec-escura+.sec-suave,.sec-suave+.sec-escura{margin-top:var(--beira)}
.duas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}

.checks{display:grid;gap:var(--cf-space-12);margin-top:var(--cf-space-32)}
.checks li{display:flex;gap:var(--cf-space-12);align-items:flex-start}
.checks .ic{margin-top:4px;padding:3px;width:24px;height:24px;border-radius:50%;background:var(--cf-bg-surface);color:var(--cf-text-brand)}
.sec:not(.sec-suave):not(.sec-escura) .checks .ic{background:var(--cf-bg-soft)}
.checks-claro .ic{background:rgba(255,253,247,.12);color:var(--cf-text-inverse)}

/* ---------- dores ---------- */
.dores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cf-space-16);margin-top:var(--cf-space-48)}
.dores li{display:flex;flex-direction:column;gap:var(--cf-space-12);padding:var(--cf-space-24);border-radius:var(--cf-radius-16);background:rgba(255,253,247,.06);border:1px solid var(--ink-claro);font:var(--cf-type-body-large)}
.dores .q{display:inline-block;width:max-content;font:700 56px/1 var(--cf-font-display);color:var(--cf-brand-character);transform-origin:50% 80%}
.rev-on .dores li.in .q{animation:duvida 1.2s var(--cf-ease-elastic) both;animation-delay:calc(var(--d,0)*80ms + 200ms)}
@keyframes duvida{0%{transform:rotate(-24deg) scale(.4);opacity:0}60%{transform:rotate(10deg) scale(1.08);opacity:1}100%{transform:rotate(0) scale(1)}}
.fala{display:flex;align-items:center;gap:var(--cf-space-32);margin-top:var(--cf-space-64)}
.fala img{flex:none;width:clamp(96px,14vw,168px);height:auto;border-radius:50%;background:var(--cf-orange-100)}
.fala p{font:700 clamp(24px,3vw,40px)/1.2 var(--cf-font-display)}
.fala footer{margin-top:var(--cf-space-12);font:var(--cf-type-label);text-transform:uppercase;letter-spacing:.04em;color:var(--cf-sage-300)}
.ponte{margin-top:var(--cf-space-48);font:var(--cf-type-body-large);color:var(--cf-forest-100)}

/* ---------- como funciona ---------- */
.como{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);margin-top:var(--cf-space-64);align-items:start}
.passos3{display:grid;gap:var(--cf-space-32);counter-reset:p}
.passos3 li{position:relative;display:grid;grid-template-columns:56px 1fr;column-gap:var(--cf-space-24);row-gap:var(--cf-space-8)}
.passos3 li:not(:last-child)::before{content:"";position:absolute;left:27px;top:64px;bottom:-24px;width:2px;background:var(--cf-border-default)}
.passos3 .num{grid-row:span 2;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--cf-bg-soft);color:var(--cf-text-brand);font:700 28px/1 var(--cf-font-display)}
.passos3 h3{align-self:end;padding-top:10px}
.passos3 p{grid-column:2}

.conversa{border-radius:var(--cf-radius-24);background:var(--cf-bg-surface);border:1px solid var(--cf-border-default);box-shadow:var(--cf-shadow-card);overflow:hidden}
.conversa-topo{display:flex;align-items:center;gap:var(--cf-space-12);padding:var(--cf-space-16) var(--cf-space-24);border-bottom:1px solid var(--cf-border-default)}
.conversa-topo img{width:44px;height:44px;border-radius:50%;background:var(--cf-orange-100)}
.conversa-topo b{display:block;font:700 16px/20px var(--cf-font-body);color:var(--cf-text-brand)}
.conversa-topo span:not(.selo-ex){font:var(--cf-type-caption);color:var(--cf-text-secondary)}
.conversa-corpo{display:flex;flex-direction:column;gap:var(--cf-space-12);padding:var(--cf-space-24)}
.msg{max-width:86%;padding:var(--cf-space-12) var(--cf-space-16);font:var(--cf-type-body-small);border-radius:var(--cf-radius-16)}
.msg.eu{align-self:flex-end;background:var(--cf-bg-brand);color:var(--cf-text-inverse);border-bottom-right-radius:4px}
.msg.ele{align-self:flex-start;background:var(--cf-bg-soft);border-bottom-left-radius:4px}
.msg-tela{display:flex;align-items:center;gap:var(--cf-space-12);text-decoration:none;background:var(--cf-bg-surface)!important;border:1px solid var(--cf-border-default);color:var(--cf-text-brand);transition:transform var(--cf-duration-fast) var(--cf-ease),border-color var(--cf-duration-fast)}
.msg-tela:hover{transform:translateY(-2px);border-color:var(--cf-text-brand)}
.msg-tela b{display:block}.msg-tela small{font:var(--cf-type-caption);color:var(--cf-text-secondary)}
.msg-tela span{flex:1}
.rev-on .conversa .msg{opacity:0;transform:translateY(12px) scale(.98)}
.rev-on .conversa.in .msg{animation:sobe var(--cf-duration-scene) var(--cf-ease) both}
.rev-on .conversa.in .msg:nth-child(1){animation-delay:.3s}
.rev-on .conversa.in .msg:nth-child(2){animation-delay:1.2s}
.rev-on .conversa.in .msg:nth-child(3){animation-delay:2.3s}
.rev-on .conversa.in .msg:nth-child(4){animation-delay:3.1s}
.rev-on .conversa.in .msg:nth-child(5){animation-delay:4.3s}
.rev-on .conversa.in .msg:nth-child(6){animation-delay:5.1s}

/* ---------- open finance ---------- */
.fluxo-of{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:var(--cf-space-8)}
.no{display:flex;flex-direction:column;align-items:center;gap:var(--cf-space-8);padding:var(--cf-space-24) var(--cf-space-16);border-radius:var(--cf-radius-16);background:var(--cf-bg-surface);border:1px solid var(--cf-border-default);text-align:center}
.no b{font:700 16px/20px var(--cf-font-body);color:var(--cf-text-brand)}
.no small{font:var(--cf-type-caption);color:var(--cf-text-secondary)}
.no-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--cf-bg-soft);color:var(--cf-text-brand);font-size:22px}
.no-cl img{width:56px;height:56px;border-radius:50%;background:var(--cf-orange-100)}
.fio{position:relative;width:clamp(20px,4vw,56px);height:2px;background:repeating-linear-gradient(90deg,var(--cf-forest-500) 0 6px,transparent 6px 12px)}
.fio i{position:absolute;left:0;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--cf-brand-character);animation:viaja 2.4s var(--cf-ease) infinite}
.fio:nth-of-type(2) i{animation-delay:1.2s}
@keyframes viaja{0%{left:-4px;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 6px);opacity:0}}

/* ---------- raio-x ---------- */
.raiox{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);margin-top:var(--cf-space-48);align-items:start}
.raiox-txt .lide{margin-top:0}
.raiox-txt>p+p{margin-top:var(--cf-space-16)}
.perfis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cf-space-8);margin-top:var(--cf-space-24)}
.perfis li{padding:var(--cf-space-16) var(--cf-space-12);border-radius:var(--cf-radius-16);border:1px solid var(--cf-border-default);background:var(--cf-bg-surface);text-align:center}
.perfis li.ativo{border-color:var(--t);box-shadow:0 0 0 1px var(--t)}
.perfis b{display:block;font:700 16px/20px var(--cf-font-body);color:var(--t)}
.perfis small{display:block;margin-top:4px;font:400 13px/18px var(--cf-font-body);color:var(--cf-text-secondary)}
.t-bom{--t:var(--cf-tom-bom)}.t-morno{--t:var(--cf-tom-morno)}.t-ruim{--t:var(--cf-tom-ruim)}
.arco{width:76px;margin:0 auto 8px}
.arco path,.medidor path{fill:none;stroke-width:9;stroke-linecap:round}
.tr{stroke:var(--cf-chart-track)}
.va{stroke:var(--t,var(--cf-chart-1));stroke-dasharray:157.08;stroke-dashoffset:calc(157.08 - 157.08*var(--n)/100);transition:stroke-dashoffset 1.2s var(--cf-ease) .3s}
.rev-on .rev:not(.in) .va{stroke-dashoffset:157.08}
.primeiro-acesso{margin-top:var(--cf-space-32);padding:var(--cf-space-16) var(--cf-space-24);border-radius:var(--cf-radius-16);background:var(--cf-bg-soft);font:var(--cf-type-body-small)}
.raiox .janela-corpo{height:clamp(520px,74vh,760px)}

/* ---------- vitrine das skills ---------- */
.vitrine{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:var(--cf-space-32);margin-top:var(--cf-space-48);align-items:start}
.vitrine-lista{display:grid;gap:var(--cf-space-8)}
.skill{display:flex;align-items:center;gap:var(--cf-space-16);width:100%;padding:var(--cf-space-12) var(--cf-space-16);border-radius:var(--cf-radius-16);border:1px solid transparent;background:none;text-align:left;cursor:pointer;transition:background var(--cf-duration-fast),border-color var(--cf-duration-fast),transform var(--cf-duration-fast) var(--cf-ease)}
.skill:hover{background:rgba(255,253,247,.6)}
.skill.ativo{background:var(--cf-bg-surface);border-color:var(--cf-border-default);box-shadow:var(--cf-shadow-card)}
.skill-ic{display:grid;place-items:center;flex:none;width:var(--cf-size-48);height:var(--cf-size-48);border-radius:50%;background:var(--cf-bg-surface);color:var(--cf-text-brand);font-size:19px;transition:background var(--cf-duration-normal),color var(--cf-duration-normal),transform var(--cf-duration-normal) var(--cf-ease-elastic)}
.skill.ativo .skill-ic{background:var(--cf-bg-brand);color:var(--cf-text-inverse);transform:scale(1.06)}
.skill-tx b{display:block;font:700 18px/24px var(--cf-font-body);color:var(--cf-text-brand)}
.skill-tx span{display:block;font:var(--cf-type-caption);color:var(--cf-text-secondary)}
.pede{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--cf-space-24);margin-bottom:var(--cf-space-24);align-items:start}
.pede small{display:block;font:var(--cf-type-label);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.pede-bal{padding:var(--cf-space-16) var(--cf-space-24);border-radius:var(--cf-radius-16) var(--cf-radius-16) var(--cf-radius-16) 4px;background:var(--cf-bg-brand);color:var(--cf-text-inverse)}
.pede-bal small{color:var(--cf-sage-300)}
.pede-bal p{font:700 clamp(18px,1.8vw,22px)/1.3 var(--cf-font-body)}
.pede-ent small{color:var(--cf-text-brand)}
.pede-ent p{font:var(--cf-type-body-small)}
.pede.trocando p{opacity:0;transform:translateY(6px)}
.pede p{transition:opacity var(--cf-duration-normal) var(--cf-ease),transform var(--cf-duration-normal) var(--cf-ease)}
.mais-visoes{margin-top:var(--cf-space-64)}
.duas-cartas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cf-space-16)}
.carta{display:flex;flex-direction:column;gap:var(--cf-space-12);padding:var(--cf-space-24);border-radius:var(--cf-radius-16);background:var(--cf-bg-surface);border:1px solid var(--cf-border-default);text-decoration:none;transition:transform var(--cf-duration-normal) var(--cf-ease),box-shadow var(--cf-duration-normal) var(--cf-ease)}
.carta:hover{transform:translateY(-4px);box-shadow:var(--cf-shadow-float)}
.carta .skill-ic{background:var(--cf-bg-soft)}
.carta p{font:var(--cf-type-body-small)}
.link{display:inline-flex;align-items:center;gap:6px;margin-top:auto;font:var(--cf-type-button);color:var(--cf-text-brand)}

/* ---------- modo privado ---------- */
.duas-priv{align-items:start}
.chave{display:flex;align-items:center;gap:var(--cf-space-16);margin-top:var(--cf-space-32);padding:var(--cf-space-12) var(--cf-space-24) var(--cf-space-12) var(--cf-space-12);border-radius:var(--cf-radius-999);border:1px solid var(--ink-claro);background:rgba(255,253,247,.06);color:var(--cf-text-inverse);text-align:left;cursor:pointer;transition:background var(--cf-duration-fast)}
.chave:hover{background:rgba(255,253,247,.12)}
.chave-trilho{position:relative;flex:none;width:84px;height:48px;border-radius:var(--cf-radius-999);background:rgba(255,253,247,.18);transition:background var(--cf-duration-normal) var(--cf-ease)}
.chave-trilho i{position:absolute;left:4px;top:4px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--cf-bg-surface);color:var(--cf-text-brand);transition:transform var(--cf-duration-normal) var(--cf-ease-elastic)}
.chave-trilho .on{display:none}
.chave[aria-checked="true"] .chave-trilho{background:var(--cf-brand-character)}
.chave[aria-checked="true"] .chave-trilho i{transform:translateX(36px)}
.chave[aria-checked="true"] .on{display:block}
.chave[aria-checked="true"] .off{display:none}
.chave-tx b{display:block;font:700 18px/24px var(--cf-font-body)}
.chave-tx small{font:var(--cf-type-caption);color:var(--cf-forest-300)}

/* ---------- placar ---------- */
.placar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--cf-space-16);margin-top:var(--cf-space-48)}
.jogo{position:relative;display:flex;flex-direction:column;gap:var(--cf-space-8);padding:var(--cf-space-24);border-radius:var(--cf-radius-16);background:var(--cf-bg-surface);border:1px solid var(--cf-border-default)}
.jogo .selo-ex{position:absolute;top:var(--cf-space-16);right:var(--cf-space-16)}
.jogo>:nth-child(2){min-height:132px;display:flex;flex-direction:column;justify-content:center;margin-top:var(--cf-space-24)}
.jogo p{font:var(--cf-type-body-small)}
.medidor svg{width:150px;margin-inline:auto}
.medidor text{font:700 30px var(--cf-font-body);fill:var(--cf-text-primary)}
.missoes{gap:var(--cf-space-8)}
.missoes li{display:flex;align-items:center;gap:var(--cf-space-8);font:var(--cf-type-body-small)}
.missoes .ic{padding:3px;width:22px;height:22px;border-radius:50%}
.missoes .m-ok .ic{background:var(--cf-tom-bom-bg);color:var(--cf-tom-bom)}
.missoes .m-nao .ic{background:var(--cf-tom-ruim-bg);color:var(--cf-tom-ruim)}
.missoes .m-nao{color:var(--cf-text-secondary)}
.sequencia{flex-direction:row!important;align-items:center;justify-content:flex-start!important;gap:8px}
.sequencia i{width:24px;height:24px;border-radius:50%;background:var(--cf-chart-track)}
.sequencia .on{background:var(--cf-tom-bom)}
.rev-on .jogo.in .sequencia .on{animation:pinga .5s var(--cf-ease-elastic) both}
.rev-on .jogo.in .sequencia .on:nth-child(2){animation-delay:.12s}.rev-on .jogo.in .sequencia .on:nth-child(3){animation-delay:.24s}.rev-on .jogo.in .sequencia .on:nth-child(4){animation-delay:.36s}.rev-on .jogo.in .sequencia .on:nth-child(5){animation-delay:.48s}
@keyframes pinga{from{transform:scale(0)}to{transform:scale(1)}}
.recuperado b{font:var(--cf-type-number);color:var(--cf-text-brand)}
.recuperado small{font:var(--cf-type-caption);color:var(--cf-text-secondary);margin-top:6px}
.barra{height:10px;border-radius:var(--cf-radius-999);background:var(--cf-chart-track);overflow:hidden;margin-top:var(--cf-space-8)}
.barra i{display:block;height:100%;width:var(--p);border-radius:inherit;background:var(--cf-tom-bom);transition:width 1.2s var(--cf-ease) .3s}
.rev-on .rev:not(.in) .barra i{width:0}

/* ---------- rolo de perguntas ---------- */
.sec-rolo{overflow:hidden}
.rolo{display:grid;gap:var(--cf-space-12);margin-top:var(--cf-space-48)}
.rolo-linha{display:flex;gap:var(--cf-space-12);width:max-content;animation:corre 60s linear infinite}
.rolo-linha.inv{animation-direction:reverse}
.rolo:hover .rolo-linha{animation-play-state:paused}
.rolo-linha span{padding:var(--cf-space-12) var(--cf-space-24);border-radius:var(--cf-radius-999);background:var(--cf-bg-surface);border:1px solid var(--cf-border-default);font:var(--cf-type-body-large);color:var(--cf-text-brand);white-space:nowrap}

/* ---------- o que não faz ---------- */
.naofaz{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--cf-space-32);margin-top:var(--cf-space-48)}
.naofaz li{display:flex;flex-direction:column;gap:var(--cf-space-12)}
.naofaz .x{display:grid;place-items:center;width:var(--cf-size-48);height:var(--cf-size-48);border-radius:50%;background:var(--cf-orange-100);color:var(--cf-orange-700);font-size:20px}
.naofaz p{font:var(--cf-type-body-small)}

/* ---------- oferta ---------- */
.oferta{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:center}
.oferta-txt{position:relative}
.oferta-masc{display:block;width:min(70%,300px);margin-top:var(--cf-space-48)}
.oferta-masc img{animation:balanca 5.5s ease-in-out infinite;transform-origin:50% 100%}
.cartao-oferta{padding:clamp(24px,3.4vw,40px);border-radius:var(--cf-radius-24);background:var(--cf-bg-surface);color:var(--cf-text-primary)}
.cartao-nome{font:var(--cf-type-h3);color:var(--cf-text-brand)}
.cartao-sub{font:var(--cf-type-body-small);color:var(--cf-text-secondary);margin-top:4px}
.pilha{display:grid;gap:var(--cf-space-16);margin-top:var(--cf-space-32)}
.pilha li{display:flex;gap:var(--cf-space-16);align-items:flex-start}
.pilha-ic{display:grid;place-items:center;flex:none;width:var(--cf-size-44);height:var(--cf-size-44);border-radius:50%;background:var(--cf-bg-soft);color:var(--cf-text-brand);font-size:18px}
.pilha b{font:700 18px/24px var(--cf-font-body);color:var(--cf-text-brand)}
.pilha p{font:var(--cf-type-body-small);margin-top:2px}
.rev-on .cartao-oferta .pilha li{opacity:0;transform:translateX(-14px)}
.rev-on .cartao-oferta.in .pilha li{animation:entra-lado var(--cf-duration-scene) var(--cf-ease) both}
.rev-on .cartao-oferta.in .pilha li:nth-child(1){animation-delay:.2s}.rev-on .cartao-oferta.in .pilha li:nth-child(2){animation-delay:.34s}.rev-on .cartao-oferta.in .pilha li:nth-child(3){animation-delay:.48s}.rev-on .cartao-oferta.in .pilha li:nth-child(4){animation-delay:.62s}.rev-on .cartao-oferta.in .pilha li:nth-child(5){animation-delay:.76s}
@keyframes entra-lado{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.unico{margin-top:var(--cf-space-32);padding-top:var(--cf-space-24);border-top:1px solid var(--cf-border-default);font:700 18px/24px var(--cf-font-body);color:var(--cf-text-brand)}
.preco{display:flex;align-items:flex-start;gap:8px;margin-top:var(--cf-space-12);color:var(--cf-text-brand)}
.preco .rs{font:700 24px/1 var(--cf-font-body);margin-top:12px}
.preco .valor{font:700 clamp(72px,9vw,104px)/.9 var(--cf-font-body);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cartao-oferta .bt{margin-top:var(--cf-space-24)}
.cartao-oferta .miudo{margin-top:var(--cf-space-16);text-align:center}
.pendente{display:none;margin-top:var(--cf-space-12);padding:var(--cf-space-12) var(--cf-space-16);border-radius:var(--cf-radius-8);background:var(--cf-status-warning-bg);color:var(--cf-status-warning);font:var(--cf-type-caption);font-weight:700;text-align:center}
[data-checkout-pronto="nao"] .pendente:target,[data-checkout-pronto="nao"] .pendente.mostra{display:block}

/* ---------- feito para você ---------- */
.feito{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:center}
.feito-lista{display:grid;gap:var(--cf-space-12)}
.feito-lista li{display:flex;align-items:center;gap:var(--cf-space-16);padding:var(--cf-space-16) var(--cf-space-24) var(--cf-space-16) var(--cf-space-16);border-radius:var(--cf-radius-16);background:var(--cf-bg-surface);border:1px solid var(--cf-border-default);font:var(--cf-type-body);color:var(--cf-text-brand);font-weight:700}
.feito-lista .ic{padding:5px;width:32px;height:32px;border-radius:50%;background:var(--cf-bg-brand);color:var(--cf-text-inverse)}

/* ---------- você também recebe ---------- */
.recebe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cf-space-16);margin-top:var(--cf-space-48)}
.recebe article{display:flex;flex-direction:column;gap:var(--cf-space-12);padding:var(--cf-space-32) var(--cf-space-24);border-radius:var(--cf-radius-16);background:var(--cf-bg-surface);border:1px solid var(--cf-border-default)}
.recebe .skill-ic{background:var(--cf-bg-soft)}
.recebe p{font:var(--cf-type-body-small)}

/* ---------- para quem é ---------- */
.paraquem{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,4vw,64px);margin-top:var(--cf-space-48);align-items:start}
.evoce{padding:clamp(24px,3vw,32px);border-radius:var(--cf-radius-24);background:var(--cf-bg-surface)}
.evoce .checks{margin-top:var(--cf-space-24)}
.evoce .checks .ic{background:var(--cf-bg-soft)}
.naofaz-t{margin-bottom:var(--cf-space-8)}
.paraquem .naofaz{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--cf-space-24)}

/* ---------- garantia ---------- */
.sec-garantia{padding-block:clamp(56px,7vw,96px) clamp(40px,5vw,64px)}
.garantia{display:flex;gap:var(--cf-space-32);align-items:center;max-width:880px;margin-inline:auto;padding:clamp(24px,3.4vw,40px);border-radius:var(--cf-radius-24);background:var(--cf-bg-soft)}
.garantia p{margin-top:var(--cf-space-12)}
.selo7{flex:none;display:grid;place-content:center;justify-items:center;width:clamp(96px,12vw,136px);aspect-ratio:1;border-radius:50%;border:3px solid var(--cf-text-brand);color:var(--cf-text-brand);transform:rotate(-8deg)}
.selo7 b{font:700 clamp(44px,5vw,64px)/.9 var(--cf-font-display)}
.selo7 span{font:var(--cf-type-label);text-transform:uppercase;letter-spacing:.08em}

/* ---------- comprei, e agora ---------- */
.depois3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cf-space-16);margin-top:var(--cf-space-48)}
.depois3 li{display:flex;flex-direction:column;gap:var(--cf-space-12);padding:var(--cf-space-24);border-radius:var(--cf-radius-16);background:var(--cf-bg-surface);border:1px solid var(--cf-border-default)}
.depois3 .num{display:grid;place-items:center;width:var(--cf-size-48);height:var(--cf-size-48);border-radius:50%;background:var(--cf-bg-soft);color:var(--cf-text-brand);font:700 24px/1 var(--cf-font-display)}
.depois3 p{font:var(--cf-type-body-small)}
.sec-suave+.final{margin-top:var(--beira)}

/* ---------- prova social (bloco desligado no HTML) ---------- */
.prova{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cf-space-16);margin-top:var(--cf-space-48)}
.prova img{width:100%;border-radius:var(--cf-radius-16);border:1px solid var(--cf-border-default)}

/* ---------- quem ---------- */
.duas-quem{grid-template-columns:minmax(0,420px) minmax(0,1fr)}
.foto{display:block;border-radius:var(--cf-radius-24);overflow:hidden;aspect-ratio:3/4;background:var(--cf-forest-300)}
.foto img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.papel{font:var(--cf-type-label);text-transform:uppercase;letter-spacing:.04em;color:var(--cf-text-secondary);margin:var(--cf-space-12) 0 var(--cf-space-24)}
.duas-quem p+p{margin-top:var(--cf-space-16)}
.duas-quem p:not(.olho):not(.papel){font:var(--cf-type-body-large);max-width:56ch}

/* ---------- dúvidas ---------- */
.faq-in{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(32px,5vw,80px);align-items:start}
.faq-in>div:first-child{position:sticky;top:104px}
.faq details{border-bottom:1px solid var(--cf-border-default)}
.faq details:first-child{border-top:1px solid var(--cf-border-default)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:var(--cf-space-16);padding:var(--cf-space-24) 0;font:700 clamp(18px,1.6vw,20px)/1.4 var(--cf-font-body);color:var(--cf-text-brand);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{color:var(--cf-text-secondary);transition:transform var(--cf-duration-normal) var(--cf-ease)}
.faq details[open] summary .ic{transform:rotate(45deg);color:var(--cf-brand-character)}
.faq details p{padding:0 var(--cf-space-48) var(--cf-space-24) 0;max-width:68ch}

/* ---------- chamada final ---------- */
.final{margin:0 var(--beira) var(--beira);border-radius:var(--painel);background:var(--cf-orange-100);overflow:hidden}
.final-in{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end;padding-top:var(--sec)}
.final-in>div{padding-bottom:var(--sec)}
.final-masc{display:block;align-self:end}
.final-masc img{animation:balanca 5.5s ease-in-out infinite;transform-origin:50% 100%}
.tres{display:flex;flex-wrap:wrap;gap:4px var(--cf-space-16);margin-top:var(--cf-space-24);font:var(--cf-type-body-large);color:var(--cf-text-brand)}
.final .miudo{margin-top:var(--cf-space-16);color:var(--cf-orange-900)}

/* ---------- rodapé ---------- */
.rodape{background:var(--cf-forest-900);color:var(--cf-forest-300);padding-block:var(--cf-space-64)}
.rodape-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--cf-space-48)}
.marca-clara{color:var(--cf-text-inverse);margin-bottom:var(--cf-space-12);display:block;font-size:28px}
.avisos{display:grid;gap:var(--cf-space-8);font:var(--cf-type-caption)}

/* ---------- barra fixa no celular ---------- */
.barra-fixa{display:none}

/* =================================================================== telas médias */
@media (max-width:1080px){
  .menu{display:none}
  .topo .bt{margin-left:auto}
  .placar,.naofaz{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vitrine{grid-template-columns:1fr}
  .vitrine-lista{grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);overflow-x:auto;padding:4px 4px var(--cf-space-12);margin:-4px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .skill{scroll-snap-align:start}
}
@media (max-width:960px){
  .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:var(--cf-space-16)}
  .demo{grid-template-columns:1fr;padding:var(--cf-space-24)}
  .demo-txt{padding:0}
  .duas,.como,.raiox,.oferta,.faq-in,.rodape-in,.feito,.paraquem{grid-template-columns:1fr}
  .recebe,.depois3{grid-template-columns:1fr}
  .faq-in>div:first-child{position:static}
  .dores{grid-template-columns:repeat(2,minmax(0,1fr))}
  .duas-quem{grid-template-columns:1fr}
  .foto{max-width:420px}
  .oferta-masc{display:none}
  .final-in{grid-template-columns:minmax(0,200px) minmax(0,1fr)}
  .fluxo-of{max-width:560px}
}

/* =================================================================== celular */
@media (max-width:640px){
  :root{--sec:56px}
  .topo-in{min-height:64px}
  .marca{font-size:21px}
  .topo .bt{display:none}
  .hero-in{grid-template-columns:1fr}
  .hero-txt{padding-bottom:0}
  .palco{min-height:0;margin-top:var(--cf-space-24);justify-content:flex-end;padding-right:6%}
  .mascote{width:48%;margin-bottom:-40px}
  .palco-bolha{left:auto;right:-6%;width:64%;transform:none;bottom:0}
  .f1{left:4%;top:8%}.f2{left:30%;right:auto;top:52%}.f3{left:2%;top:74%}
  .acoes .bt{width:100%}
  .bt-g{font-size:16px;padding-inline:var(--cf-space-16);white-space:nowrap}
  .dores,.placar,.naofaz,.paraquem .naofaz,.duas-cartas,.pede,.prova{grid-template-columns:1fr}
  .feito-lista li{font-size:16px;line-height:24px;padding:var(--cf-space-12) var(--cf-space-16) var(--cf-space-12) var(--cf-space-12)}
  .dores li{flex-direction:row;align-items:center;gap:var(--cf-space-16);font:var(--cf-type-body)}
  .dores .q{font-size:40px;flex:none;width:28px;text-align:center}
  .fala{flex-direction:column;align-items:flex-start;gap:var(--cf-space-16)}
  .perfis{grid-template-columns:1fr}
  .perfis li{display:grid;grid-template-columns:64px 1fr;column-gap:var(--cf-space-12);text-align:left;align-items:center}
  .perfis .arco{grid-row:span 2;width:56px;margin:0}
  .fluxo-of{grid-template-columns:1fr;justify-items:stretch}
  .fio{width:2px;height:28px;margin-inline:auto;background:repeating-linear-gradient(180deg,var(--cf-forest-500) 0 6px,transparent 6px 12px)}
  .fio i{left:-4px;top:0;animation-name:viaja-v}
  @keyframes viaja-v{0%{top:-4px;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:calc(100% - 6px);opacity:0}}
  .no{flex-direction:row;text-align:left;padding:var(--cf-space-16);column-gap:var(--cf-space-16);flex-wrap:wrap}
  .no small{flex-basis:100%;margin-left:72px;margin-top:-28px}
  .no b{margin-top:-18px}
  .garantia{flex-direction:column;align-items:flex-start}
  .final-in{grid-template-columns:1fr;padding-top:var(--cf-space-48)}
  .final-in>div{order:1;padding-bottom:var(--cf-space-24)}
  .final-masc{order:2;width:52%;margin-inline:auto;margin-bottom:-8%}
  .faq details p{padding-right:0}
  .janela-corpo,.hero-janela .janela-corpo,.raiox .janela-corpo{height:min(68vh,500px)}
  .janela-topo .selo-ex{display:none}
  .janela-topo .janela-abrir,.janela-topo .janela-soltar{margin-left:auto}
  .jogo>:nth-child(2){min-height:0;padding-block:var(--cf-space-8)}
  .rolo-linha span{font:var(--cf-type-body);padding:10px 18px}
  .barra-fixa{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:var(--cf-space-12);padding:10px var(--cf-space-16) calc(10px + env(safe-area-inset-bottom));background:var(--cf-bg-surface);border-top:1px solid var(--cf-border-default);font:var(--cf-type-caption);color:var(--cf-text-secondary);transform:translateY(110%);transition:transform var(--cf-duration-normal) var(--cf-ease)}
  .barra-fixa.mostra{transform:none}
  .barra-fixa b{display:block;font:700 18px/22px var(--cf-font-body);color:var(--cf-text-brand)}
  .barra-fixa .bt{min-height:var(--cf-size-44);padding-inline:var(--cf-space-16);font-size:15px;white-space:nowrap}
  .rodape{padding-bottom:calc(var(--cf-space-64) + 72px)}
}

/* =================================================================== movimento reduzido */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .ent,.rev-on .rev{opacity:1!important;transform:none!important}
  .rev-on .conversa .msg,.rev-on .cartao-oferta .pilha li{opacity:1!important;transform:none!important}
  .interroga::after{clip-path:none}
  .flut b{display:none}
  .flut i{opacity:1!important;transform:none!important}
  .faixa-trilho,.rolo-linha{animation:none!important}
  .faixa,.rolo{overflow-x:auto}
  .cursor{display:none}
}

/* ---------- respostas resumidas (no lugar das telas embutidas) ---------- */
.resumo{display:flex;flex-direction:column;gap:var(--cf-space-16);padding:clamp(20px,2.4vw,28px);border-radius:var(--cf-radius-24);background:var(--cf-bg-surface);border:1px solid var(--cf-border-default);color:var(--cf-text-primary);box-shadow:var(--cf-shadow-card)}
.resumo:not(.rev){transition:opacity var(--cf-duration-normal) var(--cf-ease),transform var(--cf-duration-normal) var(--cf-ease)}
.resumo.trocando{opacity:0;transform:translateY(8px)}
.resumo-topo{display:flex;align-items:center;gap:var(--cf-space-12)}
.resumo-topo img{width:44px;height:44px;border-radius:50%;background:var(--cf-orange-100)}
.resumo-topo b{display:block;font:700 16px/20px var(--cf-font-body);color:var(--cf-text-brand)}
.resumo-topo span:not(.selo-ex){font:var(--cf-type-caption);color:var(--cf-text-secondary)}
.resumo-fala{font:700 clamp(18px,1.9vw,22px)/1.35 var(--cf-font-body);color:var(--cf-text-brand)}
.resumo-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cf-space-8)}
.resumo-kpis li{padding:var(--cf-space-12);border-radius:var(--cf-radius-16);background:var(--cf-bg-soft)}
.resumo-kpis small{display:block;font:var(--cf-type-caption);color:var(--cf-text-secondary)}
.resumo-kpis b{display:block;margin-top:2px;font:700 clamp(18px,2vw,24px)/1.2 var(--cf-font-body);font-variant-numeric:tabular-nums;color:var(--cf-text-primary)}
.resumo-linhas{display:grid;gap:var(--cf-space-8);font:var(--cf-type-body-small)}
.resumo-linhas li{display:flex;gap:var(--cf-space-8);align-items:flex-start}
.resumo-linhas .ic{margin-top:3px;width:18px;height:18px;color:var(--cf-status-success)}
.demo{align-items:center}
/* ---------- mini-VSL ---------- */
.vsl{display:grid;place-content:center;justify-items:center;gap:var(--cf-space-12);margin-top:var(--cf-space-24);aspect-ratio:16/9;max-width:640px;border-radius:var(--cf-radius-24);background:var(--cf-bg-brand);color:var(--cf-text-inverse);overflow:hidden}
.vsl video,.vsl iframe{width:100%;height:100%;border:0}
.vsl-play{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--cf-brand-character);color:var(--cf-neutral-900);font-size:26px}
.vsl-tx{font:var(--cf-type-caption);color:var(--cf-forest-300)}
@media (max-width:640px){.resumo-kpis{grid-template-columns:1fr 1fr}.resumo-kpis li:last-child{grid-column:1/-1}.rodape{padding-bottom:var(--cf-space-64)}}

/* ---------- as seis visões, empilhadas ---------- */
.visoes{display:grid;gap:var(--cf-space-24);margin-top:var(--cf-space-48)}
.visao{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(20px,3vw,40px);border-radius:var(--cf-radius-24);background:rgba(255,253,247,.55);border:1px solid var(--cf-border-default)}
.visao-tx{display:grid;gap:var(--cf-space-16)}
.visao-cab{display:flex;align-items:center;gap:var(--cf-space-16)}
.visao-cab .skill-ic{background:var(--cf-bg-brand);color:var(--cf-text-inverse)}
.visao-cab small{font:var(--cf-type-label);text-transform:uppercase;letter-spacing:.04em;color:var(--cf-text-secondary)}
.visao-cab p{font:var(--cf-type-body-small);color:var(--cf-text-secondary)}
.visao .pede-ent small,.visao .pede-bal small{display:block;font:var(--cf-type-label);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
@media (max-width:960px){.visao{grid-template-columns:1fr}}