/* A FOLHA DO SITE INSTITUCIONAL — porte de `globals.css` da landing em Next.js (`~/Documents/ChatGPT/transcribia/site`), com UMA regra: nenhuma cor literal. ⚠️ ZERO HEXADECIMAIS NESTE ARQUIVO, e é medido e não afirmado: o teste `institucional/tests_secoes.py::sem_literal_de_cor` recusa qualquer `#rrggbb` ou `rgb(...)` aqui dentro. Toda cor sai de `static/styles.css`. ── COMO CADA FAMÍLIA DA LANDING VIROU TOKEN (por MEDIDA, ΔE em Lab) ──────── 1 · O TERMINAL / O CARTÃO JSON — superfície que NÃO inverte. A landing pinta-o de `#071535`/`#030a1c`, e a medida diz o que ele é: `#071535` está a ΔE 3,4 do `--tinta-50` ESCURO e `#1f315c` a ΔE 1,5 do `--tinta-200` ESCURO. Ou seja, o terminal É o tom escuro, localmente. ⛔ Usar a rampa `--tinta-*` punha-o BRANCO no tom claro e desfazia o desenho. Usa-se por isso o único escuro que a casa declara igual nos dois tons (SISTEMA-DE-DESIGN §1.2): o `--marinho`, e sobre ele o `--sobre-primario`, o `--ciano` e o `--certo`, que também não invertem. Os degraus saem de `color-mix`, e não de hexadecimal novo: #071535 #030a1c #05102C -> var(--marinho) (chão) #102958 #102a5c #0B2A72 -> mix(branco 10-12%) ΔE 4,0-5,6 #1f315c #233d73 -> mix(branco 15%) ΔE 6,7 #264879 -> mix(branco 20%) ΔE 3,0 #456392 -> mix(branco 30%) ΔE 4,1 #556B9A #7890bb #7894bd -> mix(branco 50%) ΔE 7,9-8,0 #9bb7df #AFC3E0 #A9BEDD -> mix(branco 70%) ΔE 7,4-8,6 #c0cadf -> mix(branco 75%) ΔE 3,6 #D8E5FF -> mix(ciano 15%, branco) ΔE 8,4 #8ed8fa #9ED8FA -> mix(ciano 45%, branco) ΔE 1,9-2,1 #79d8ff -> mix(ciano 50%, branco) ΔE 4,9 #55c7f3 -> mix(ciano 60%, branco) ΔE 5,1 ⚠️ DUAS destas trocas são as PIORES do porte, e ficam escritas em vez de escondidas: o creme dos valores do JSON (`#F1D2A9`) e a menta das confirmações (`#8FE5C2`). A casa não tem quente nem menta que NÃO inverta — o par do aviso inverte, e sobre um chão que não inverte isso apagava-o no tom oposto. Saíram de `--aviso-tinta` e de `--certo` lavados com branco, a ΔE 18-20. **É a diferença visível deste porte**, e ela está no relatório. 2 · AS MOLDURAS QUENTES da colagem — o PAR DO AVISO, que inverte junto. O bege `#E8D7B7` e o castanho `#725c42` são papel e tinta de documento. Medidos, o par mais próximo é `--aviso-lavado`/`--aviso-tinta` (ΔE 5,6 e 27 no claro), e é o par que a D-1614 cunhou RESOLVIDO PARA A RAZÃO >= 4,5 nos dois tons — 5,23 claro e 4,96 escuro. No escuro a moldura fica castanha-escura com tinta ocre: continua QUENTE, e o manuscrito continua a ler-se sobre ela. ⛔ A rampa `--tinta-*` era o vizinho por luminosidade e teria posto a moldura AZUL-MARINHO no escuro — o defeito que o §0.1 do sistema de desenho descreve. 3 · O TÍTULO. A landing escreve `color:var(--marinho)` e repete quinze regras `:root[data-theme='dark'] X{color:var(--texto)}`. ⛔ Copiadas, elas falhavam no terceiro estado do tema: o produto tem `dark`, `light` E o AUSENTE, que cai na consulta de media (`produto.css`, a técnica do `.logo-claro`). Quinze regras viraram UM token, `--titulo`, declarado nos três sítios como a casa faz. ⭐ Três `color:var(--marinho)` NÃO viraram `--titulo`, e é medida: caem sobre chão que não inverte (o branco do `.button.light`, o ciano do passo activo, o ciano do selo «mais vendido») e ali o marinho é o certo nos dois tons. 4 · O ANEL DE FOCO. A landing tinha `--foco:0 0 0 3px rgb(0 159 240/30%)` — o ciano, que mede 2,72 sobre o papel claro e é exactamente o que a D-1614 recusou. Aqui o anel é `var(--foco)` do produto (3,91 claro, 4,53 escuro), e o que fica local é só a GEOMETRIA. */ :root { /* Só geometria e família tipográfica: nenhuma cor nasce aqui. */ --r3: 16px; --pilula: 999px; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --anel-foco: 0 0 0 3px var(--foco); /* O título das seções. Ver a nota 3 acima. */ --titulo: var(--marinho); /* Os robôs são o MESMO PNG nos dois tons (SISTEMA-DE-DESIGN §1.2): o que muda é o tratamento, e ele é um token para não virar bloco escuro. */ --filtro-robo: saturate(.72) contrast(.96); --opacidade-robo: 1; --filtro-robo-fundo: saturate(.7) contrast(.95); --opacidade-robo-fundo: .94; } @media (prefers-color-scheme: dark) { /* ⚠ O `:not([data-theme="light"])` não é enfeite: sem ele a escolha explícita do claro perdia para a preferência do sistema. */ :root:not([data-theme="light"]) { --titulo: var(--texto); --filtro-robo: saturate(.68) brightness(.9) contrast(.92); --opacidade-robo: .9; --filtro-robo-fundo: saturate(.62) brightness(.86); --opacidade-robo-fundo: .76; } } :root[data-theme="dark"] { --titulo: var(--texto); --filtro-robo: saturate(.68) brightness(.9) contrast(.92); --opacidade-robo: .9; --filtro-robo-fundo: saturate(.62) brightness(.86); --opacidade-robo-fundo: .76; } *{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;background:var(--papel);color:var(--texto);font-family:var(--ui);font-weight:400;transition:background .3s ease,color .3s ease}a{color:inherit;text-decoration:none}h1,h2,h3,p,ul,dl,dd{margin:0}ul{padding:0;list-style:none}b,strong{font-weight:600}button{font:inherit}.skip-link{position:fixed;top:-70px;left:14px;z-index:100;padding:11px 18px;border-radius:var(--radius-md);background:var(--marinho);color:var(--sobre-primario)}.skip-link:focus{top:14px} .site-header{position:sticky;top:0;z-index:30;width:100%;height:64px;padding:0 max(28px,calc((100vw - 1312px)/2));display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--linha);background:color-mix(in srgb,var(--papel) 92%,transparent);backdrop-filter:blur(14px)}.brand img{display:block;width:168px;height:auto}.site-header nav{display:flex;gap:26px;font-size:13px;font-weight:400;color:var(--texto-fraco)}.site-header nav a:hover,.login:hover{color:var(--acento-escuro)}.header-actions{justify-self:end;display:flex;align-items:center;gap:18px;font-size:13px;font-weight:500}.theme-toggle{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;background:transparent;color:var(--tinta-700);cursor:pointer}.theme-toggle:hover{color:var(--acento-escuro)}.theme-toggle:focus-visible{outline:0;border-radius:var(--pilula);box-shadow:var(--anel-foco)}.theme-toggle svg{width:19px;height:19px} .button,.outline-button{display:inline-flex;align-items:center;justify-content:center;gap:22px;padding:11px 20px;border-radius:var(--radius-md);font-size:14px;line-height:1.3;font-weight:500;transition:color .2s ease,background .2s ease,border-color .2s ease,transform .2s ease}.button{border:1px solid transparent;background:var(--marinho);color:var(--sobre-primario)}.button:hover{background:color-mix(in srgb, var(--sobre-primario) 12%, var(--marinho));transform:translateY(-1px)}.button:focus-visible,.outline-button:focus-visible{outline:0;box-shadow:var(--anel-foco)}.button-small{padding:7px 14px;gap:0;font-size:12.5px}.outline-button{border:1px solid var(--tinta-300);background:var(--papel);color:var(--tinta-800)}.outline-button:hover{border-color:var(--tinta-500);background:var(--tinta-50);color:var(--titulo)} .hero{width:min(1312px,calc(100% - 56px));min-height:680px;margin:0 auto;display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:48px;position:relative;overflow:hidden}.hero::before{content:'';position:absolute;right:-40px;top:74px;width:520px;height:520px;border:1px solid color-mix(in srgb,var(--linha) 65%,transparent);border-radius:50%;z-index:-1}.eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-size:10.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--acento-escuro)}.eyebrow span{width:22px;height:1px;background:var(--ciano)}h1{font-family:var(--leitura);font-size:clamp(48px,5.2vw,74px);font-weight:400;line-height:1.04;letter-spacing:-.012em;color:var(--titulo)}.hero-lead{margin-top:20px;font-size:18px;line-height:1.5;font-weight:500;color:var(--acento-escuro)}.hero-detail{max-width:610px;margin-top:12px;font-size:15px;line-height:1.72;color:var(--texto-fraco);text-wrap:pretty}.hero-actions{display:flex;align-items:center;gap:24px;margin-top:28px}.text-link{display:inline-flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--tinta-300);font-size:13px;font-weight:500;color:var(--tinta-800)}.free-note{display:flex;gap:9px;margin-top:18px;font-size:12px;color:var(--texto-fraco)}.free-note strong{color:var(--texto)}.hero-visual{min-height:580px;position:relative;display:grid;place-items:center}.hero-robot-static{position:relative;z-index:2;width:min(100%,565px);height:auto;filter:var(--filtro-robo) drop-shadow(0 14px 18px color-mix(in srgb, var(--marinho) 7%, transparent));opacity:var(--opacidade-robo)}.scan-card{position:absolute;z-index:1;width:142px;min-height:110px;padding:16px;border:1px solid var(--linha);border-radius:var(--radius-lg);background:color-mix(in srgb,var(--papel) 90%,transparent)}.scan-card span{display:block;margin-bottom:8px;font-size:10.5px;font-weight:500;letter-spacing:.13em;color:var(--texto-fraco)}.scan-card b{font-family:var(--leitura);font-size:25px;font-weight:400}.scan-card-left{left:2%;top:120px;rotate:-3deg}.scan-card-right{right:1%;top:105px;rotate:2deg}.scribble,.typed{display:block;width:100%;height:6px;margin:9px 0;border-top:2px solid var(--aviso-tinta);transform:skewY(-3deg)}.typed{border-color:var(--ciano);transform:none}.scribble.short,.typed.short{width:64%}.speed-badge{position:absolute;z-index:3;right:20px;bottom:62px;width:104px;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--marinho);color:var(--sobre-primario);box-shadow:0 0 0 7px var(--tinta-100);rotate:3deg}.speed-badge b{font-family:var(--leitura);font-size:29px;font-weight:400}.speed-badge span{margin-top:4px;font-size:9px} .trust-strip{width:min(1312px,calc(100% - 56px));margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--linha)}.trust-strip p{padding:20px 26px;display:flex;flex-direction:column;gap:5px;border-right:1px solid var(--linha)}.trust-strip p:last-child{border:0}.trust-strip b{font-size:13px;font-weight:500}.trust-strip span{font-size:11px;color:var(--texto-fraco)} .section{width:min(1312px,calc(100% - 56px));margin:0 auto;padding:104px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:48px;margin-bottom:42px}.section-head.narrow{display:block;max-width:800px}.section-head h2,.final-cta h2{max-width:820px;font-family:var(--leitura);font-size:clamp(36px,4vw,58px);font-weight:400;line-height:1.08;letter-spacing:-.01em;color:var(--titulo)}.section-head>p:last-child{max-width:650px;margin-top:12px;font-size:14.5px;line-height:1.7;color:var(--texto-fraco)} .brand-title-ia{color:var(--ciano)} .mode-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--linha);border-radius:var(--r3);overflow:hidden}.mode-card{min-height:330px;padding:32px;display:flex;flex-direction:column;align-items:flex-start;background:transparent}.mode-card.assisted{border-left:1px solid var(--linha);background:var(--tinta-50)}.mode-card .number{font-size:10.5px;font-weight:500;letter-spacing:.13em;color:var(--acento-escuro)}.mode-card h3{margin:54px 0 10px;font-family:var(--leitura);font-size:32px;font-weight:400;color:var(--titulo)}.mode-card p{max-width:490px;margin-bottom:22px;font-size:14px;line-height:1.68;color:var(--texto-fraco)}.confidence-line{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 22px;padding:18px 4px;border-bottom:1px solid var(--linha);font-size:11px;color:var(--texto-fraco)}.confidence-line span::before{content:'✓';margin-right:7px;color:var(--acento-escuro)} .audiences{padding-top:34px}.audiences .section-head{max-width:850px}.audience-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;padding:1px;border-radius:var(--r3);overflow:hidden;background:var(--linha)}.audience-grid article{min-height:282px;padding:28px;display:flex;flex-direction:column;align-items:flex-start;background:var(--papel)}.audience-icon{width:26px;height:26px;margin-bottom:42px;color:var(--acento-escuro)}.audience-grid article>span{margin-bottom:10px;font-size:9.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-fraco)}.audience-grid h3{font-family:var(--leitura);font-size:25px;font-weight:400;line-height:1.15;color:var(--titulo)}.audience-grid p{margin-top:11px;font-size:12.5px;line-height:1.65;color:var(--texto-fraco)}.audience-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:17px 4px 0}.audience-footer>p{font-size:11px;color:var(--texto-fraco)}.audience-footer .text-link{padding-top:0} .examples{position:relative}.country-tabs{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--linha)}.country-tabs button{padding:16px 18px;border:0;border-bottom:2px solid transparent;background:transparent;text-align:left;color:var(--texto-fraco);cursor:pointer}.country-tabs button.active{border-color:var(--ciano);color:var(--texto)}.country-tabs small,.country-tabs span{display:block;font-size:10.5px}.country-tabs b{display:block;margin:7px 0 3px;font-size:13px;font-weight:500}.document-demo{display:grid;grid-template-columns:.86fr 1.14fr;min-height:530px;margin-top:28px;border:1px solid var(--linha);border-radius:var(--r3);overflow:hidden}.document-paper{position:relative;margin:28px;padding:50px 40px;background:var(--aviso-lavado);color:var(--aviso-tinta);box-shadow:0 7px 18px color-mix(in srgb, var(--aviso-tinta) 7%, transparent);rotate:-1deg;overflow:hidden}.paper-meta{margin-bottom:48px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}.paper-seal{position:absolute;right:28px;top:25px;width:62px;height:62px;border:1px solid color-mix(in srgb, var(--aviso-tinta) 70%, var(--aviso-lavado));border-radius:50%;display:grid;place-items:center;font-family:var(--leitura)}.document-paper i{display:block;height:9px;margin:11px 0;border-top:2px solid var(--aviso-tinta);border-radius:50%;transform:skewY(-2deg)}.document-result{padding:44px;border-left:1px solid var(--linha)}.result-tabs{display:flex;align-items:center;flex-wrap:wrap;gap:26px;padding-bottom:14px;border-bottom:1px solid var(--linha);font-size:12px}.result-tabs b{color:var(--acento-escuro)}.document-result p{margin-top:15px;font-size:14px;line-height:1.8;color:var(--texto-fraco)}.document-result p strong{font-family:var(--leitura);font-size:25px;font-weight:400;color:var(--titulo)}.document-result dl{margin-top:28px}.document-result dl div{display:grid;grid-template-columns:1fr 1fr;padding:11px 0;border-top:1px solid var(--linha);font-size:12px}.document-result dt{color:var(--texto-fraco)}.document-result dd{text-align:right;font-weight:500}.ai-warning,.source-note{font-size:10.5px!important;color:var(--texto-fraco)!important}.source-note{margin-top:12px} .time-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.time-card{min-height:270px;padding:28px;border:1px solid var(--linha);border-radius:var(--r3);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}.time-card>span{grid-column:1/-1;align-self:start;font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-fraco)}.time-card div{display:flex;flex-direction:column}.time-card b{font-family:var(--leitura);font-size:40px;font-weight:400;line-height:1.05;color:var(--titulo)}.time-card small{margin-top:7px;font-size:11px;color:var(--texto-fraco)}.time-card>i{font-style:normal;font-size:20px;color:var(--tinta-500)}.time-card .cyan-time b{color:var(--acento-escuro)}.back-robot{display:grid;grid-template-columns:245px 1fr;align-items:end;margin-top:-32px}.back-robot img{width:250px;filter:var(--filtro-robo);opacity:var(--opacidade-robo)}.back-robot p{padding-bottom:38px;font-size:10.5px;color:var(--texto-fraco)} .steps{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--linha)}.steps article{padding:28px;border-right:1px solid var(--linha)}.steps article:last-child{border:0}.steps b{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--marinho);color:var(--sobre-primario);font-size:10.5px;font-weight:500}.steps h3{margin:34px 0 9px;font-family:var(--leitura);font-size:27px;font-weight:400;color:var(--titulo)}.steps p{font-size:13.5px;line-height:1.7;color:var(--texto-fraco)}.conveyor-feature,.formats-feature{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:56px;margin-top:64px;padding:34px;border:1px solid var(--linha);border-radius:var(--r3);overflow:hidden}.conveyor-feature{background:var(--tinta-50)}.formats-feature{background:color-mix(in srgb,var(--ciano) 16%,var(--papel))}.scene-static,.formats-feature img{display:block;width:100%;height:auto;filter:var(--filtro-robo);opacity:var(--opacidade-robo)}.conveyor-feature h2,.formats-feature h2{font-family:var(--leitura);font-size:42px;font-weight:400;line-height:1.08;color:var(--titulo)}.conveyor-feature>div>p:not(.eyebrow),.formats-feature>div>p:not(.eyebrow){margin-top:12px;font-size:14px;line-height:1.7;color:var(--texto-fraco)}.format-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.format-chips span{padding:5px 10px;border:1px solid var(--tinta-300);border-radius:var(--pilula);font-size:10.5px;font-weight:500;color:var(--tinta-700);background:transparent}.format-chips .is-selected{border-color:var(--titulo);background:var(--marinho);color:var(--sobre-primario);box-shadow:0 0 0 2px color-mix(in srgb,var(--ciano) 22%,transparent)} .security{position:relative;border-top:1px solid var(--linha);overflow:hidden}.security .section-head{padding-right:270px}.security-robot{position:absolute;z-index:-1;right:8px;top:38px;width:245px;height:auto;filter:var(--filtro-robo-fundo);opacity:var(--opacidade-robo-fundo)}.security-grid{display:grid;grid-template-columns:repeat(4,1fr)}.security-grid article{min-height:190px;padding:24px;border-left:1px solid var(--linha);display:flex;flex-direction:column;align-items:flex-start}.security-grid article:first-child{border:0}.security-icon{width:22px;height:22px;margin-bottom:28px;color:var(--acento-escuro)}.security-grid b{font-family:var(--leitura);font-size:21px;font-weight:400;color:var(--titulo)}.security-grid p{margin-top:8px;font-size:12.5px;line-height:1.62;color:var(--texto-fraco)} .pricing{position:relative}.credit-explainer{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:34px;padding:20px 26px;border:1px solid var(--linha);border-left-color:var(--ciano);border-radius:14px}.credit-explainer>div{display:flex;flex-direction:column;gap:5px}.credit-explainer>div>span{font-size:10.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--texto-fraco)}.credit-explainer p{font-size:13px;line-height:1.6;color:var(--texto-fraco)}.credit-explainer>div p{font-size:14px;color:var(--texto)}.credit-explainer>p{padding-left:34px;border-left:1px solid var(--linha)}.optional-badge{display:inline-flex;margin-left:6px;padding:1px 6px;border:1px solid var(--tinta-300);border-radius:var(--pilula);background:var(--tinta-200);color:var(--tinta-700);font-size:9px;font-style:normal;font-weight:500;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}.price-grid{display:grid;grid-template-columns:1.18fr repeat(4,1fr);gap:14px;margin-top:26px;align-items:stretch}.price-grid article{position:relative;padding:24px;border:1px solid var(--linha);border-radius:var(--r3);display:flex;flex-direction:column;gap:0;background:transparent}.price-grid article.free-plan{margin-block:-8px;padding-top:28px;border-color:var(--ciano);background:var(--acento-lavado);box-shadow:inset 0 3px var(--ciano)}.free-labels{min-height:24px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}.free-labels span{font-size:10.5px;font-weight:500;letter-spacing:.11em;color:var(--acento-escuro)}.free-labels strong{padding:3px 7px;border-radius:var(--pilula);background:var(--marinho);color:var(--sobre-primario);font-size:9px;font-weight:500;letter-spacing:.06em}.price-grid article.featured{border-color:var(--ciano)}.price-grid article.featured .selo-vendido{position:absolute;top:-9px;left:24px;padding:3px 10px;border-radius:var(--pilula);background:var(--ciano);color:var(--sobre-primario);font-size:10.5px;font-style:normal;font-weight:500;letter-spacing:.08em;text-transform:uppercase}.price-grid article.enterprise{background:var(--tinta-50)}.price-grid article>span{min-height:24px;font-size:10.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--texto-fraco)}.price-grid h3{margin-top:10px;font-size:15px;font-weight:500}.price-grid article.free-plan h3{font-family:var(--leitura);font-size:25px;font-weight:400;color:var(--titulo)}.price-grid article>p{margin-top:9px;font-size:11px;line-height:1.5;color:var(--texto-fraco)}.price-grid article>b{margin-top:16px;font-family:var(--leitura);font-size:32px;font-weight:400;line-height:1.1;color:var(--titulo)}.price-grid article.free-plan>b{font-size:38px}.price-grid article>small{margin-top:5px;font-size:12.5px;line-height:1.45;color:var(--texto-fraco)}.price-grid article>ul{min-height:255px;margin:22px 0;display:flex;flex-direction:column;gap:8px}.price-grid li{display:flex;gap:8px;font-size:12px;line-height:1.42;color:var(--texto-fraco)}.price-grid li::before{content:'✓';color:var(--tinta-400);flex:0 0 auto}.price-grid .formats-item{display:flex;flex-direction:column;gap:7px}.price-grid .formats-item::before{display:none}.price-grid .formats-item>span::before{content:'✓';margin-right:8px;color:var(--tinta-400)}.price-grid .formats-item ul{display:flex;flex-direction:column;gap:5px;padding-left:24px}.price-grid .formats-item ul li{color:var(--tinta-500)}.price-grid .formats-item ul li::before{content:'·';color:var(--tinta-300)}.price-grid article>a{margin-top:auto}.pricing-note{margin-top:20px;font-size:11px;line-height:1.6;color:var(--texto-fraco)} .promotion-price{color:var(--texto);text-decoration-color:var(--acento-escuro);text-decoration-thickness:1.5px}.credit-explainer>div .promotion-helper{margin-top:3px;font-size:11.5px;line-height:1.5;color:var(--acento-escuro)}.promotion-helper strong{font-weight:600}.promotion-helper a{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:500;color:var(--acento-escuro);text-decoration:underline;text-underline-offset:3px}.promotion-helper a:hover{color:var(--acento-escuro)}.promotion-terms{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;margin-top:8px;padding-top:12px;border-top:1px solid var(--linha)}.promotion-terms p{max-width:940px;font-size:10.5px;line-height:1.6;color:var(--texto-fraco)}.promotion-terms p strong{font-weight:600;color:var(--texto)}.promotion-terms a{flex:0 0 auto;font-size:11px;font-weight:500;color:var(--acento-escuro);text-decoration:underline;text-underline-offset:3px}.promotion-terms a:hover{color:var(--acento-escuro)} .faq{display:grid;grid-template-columns:.72fr 1.28fr;gap:60px}.faq .section-head{display:block}.faq-list{border-top:1px solid var(--linha)}.faq-list details{border-bottom:1px solid var(--linha)}.faq-list summary{display:flex;justify-content:space-between;gap:24px;padding:20px 0;font-size:13.5px;font-weight:500;cursor:pointer;list-style:none}.faq-list summary span{font-size:18px;font-weight:400;color:var(--acento-escuro)}.faq-list details p{margin:-3px 40px 20px 0;font-size:13px;line-height:1.7;color:var(--texto-fraco)} .final-cta{width:min(1312px,calc(100% - 56px));margin:20px auto 0;padding:56px;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:58px;border-radius:var(--r3);background:var(--marinho);color:var(--sobre-primario)}.final-cta h2{color:var(--sobre-primario)!important}.final-cta .eyebrow{color:color-mix(in srgb, var(--ciano) 45%, var(--sobre-primario))}.final-cta>div>p:not(.eyebrow){max-width:640px;margin-top:12px;font-size:14px;line-height:1.7;color:color-mix(in srgb, var(--sobre-primario) 70%, var(--marinho))}.final-actions{display:flex;flex-direction:column;gap:10px;margin-top:24px}.button.light{background:var(--sobre-primario);color:var(--marinho)}.final-actions small{text-align:center;font-size:10.5px;color:color-mix(in srgb, var(--sobre-primario) 70%, var(--marinho))}.outline-button.light-outline{border-color:color-mix(in srgb, var(--sobre-primario) 50%, var(--marinho));background:transparent;color:var(--sobre-primario)}footer{width:min(1312px,calc(100% - 56px));margin:0 auto;padding:44px 0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-top:1px solid var(--linha)}footer img{width:142px}footer div{display:flex;gap:22px;font-size:11px;font-weight:500}footer p{justify-self:end;font-size:10.5px;color:var(--texto-fraco)} /* ⚠️⚠️ A ENTRADA DAS SEÇÕES SÓ ESCONDE SE HOUVER QUEM AS MOSTRE. A landing escrevia `opacity:0` SEM guarda: quem mostrava era o componente `ScrollExperience` do React, e sem JavaScript a página inteira ficava INVISÍVEL — cabeçalho por cima de nada. Não é hipótese: foi medido nesta bancada, a captura de `#precos` a 390 saiu em branco com o topo desenhado. ⭐ A guarda é a classe `.revela`, que o `site.js` escreve na RAIZ na primeira linha. Sem script ela nunca existe e nada se esconde; com script ela existe antes da primeira pintura e a entrada acontece como na landing. É a mesma técnica do `.logo-claro`: o HTML nasce certo, e o que corre depois só acrescenta. */ .revela .section,.revela .trust-strip,.revela .final-cta,.revela footer{opacity:0;translate:0 16px;transition:opacity .7s ease,translate .7s cubic-bezier(.22,1,.36,1)}.revela .section.is-visible,.revela .trust-strip.is-visible,.revela .final-cta.is-visible,.revela footer.is-visible{opacity:1;translate:0 0}.section:nth-of-type(even){transition-delay:.05s} @media(max-width:980px){.site-header{grid-template-columns:1fr auto}.site-header nav{display:none}.hero{grid-template-columns:1fr;padding-top:56px}.hero-visual{min-height:500px}.section{padding:78px 0}.section-head{display:block}.mode-grid,.document-demo,.time-grid,.conveyor-feature,.formats-feature,.final-cta,.faq{grid-template-columns:1fr}.document-result{border-left:0;border-top:1px solid var(--linha)}.security-grid,.price-grid{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:1fr}.steps article{border-right:0;border-bottom:1px solid var(--linha)}.final-cta{padding:44px}footer{grid-template-columns:1fr;gap:22px}footer p{justify-self:start}} @media(max-width:620px){.site-header{padding-inline:14px}.brand img{width:132px}.login{display:none}.hero,.section,.trust-strip,.final-cta,footer{width:min(100% - 28px,1312px)}.hero{min-height:auto}.hero-copy{padding-top:20px}h1{font-size:45px}.hero-actions,.free-note{align-items:flex-start;flex-direction:column}.hero-visual{min-height:410px}.scan-card{display:none}.speed-badge{width:88px;right:4px;bottom:42px}.trust-strip,.mode-grid,.security-grid,.price-grid{grid-template-columns:1fr}.trust-strip p{border-right:0;border-bottom:1px solid var(--linha)}.mode-card{padding:26px}.mode-card.assisted{border-left:0;border-top:1px solid var(--linha)}.country-tabs{grid-template-columns:1fr 1fr}.document-paper{margin:14px;padding:35px 24px}.document-result{padding:26px}.time-card{grid-template-columns:1fr;min-height:auto}.time-card>span{grid-column:auto}.time-card>i{rotate:90deg}.back-robot{grid-template-columns:1fr;margin-top:0}.conveyor-feature,.formats-feature{padding:22px;gap:24px}.conveyor-feature h2,.formats-feature h2{font-size:36px}.free-banner,.free-price{align-items:flex-start;flex-direction:column}.free-banner{padding:22px}.free-price{width:100%}.security-grid article{border-left:0;border-top:1px solid var(--linha)}.final-cta{padding:32px 24px}.final-cta h2{font-size:40px}footer div{flex-wrap:wrap}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.revela .section,.revela .trust-strip,.revela .final-cta,.revela footer{opacity:1;translate:none}} @media(max-width:980px){.security .section-head{padding-right:210px}.security-robot{width:195px;top:50px}} @media(max-width:620px){.security .section-head{padding-right:0}.security-robot{position:relative;z-index:0;display:block;width:190px;margin:-20px 0 -22px auto;top:auto;right:auto}.security-grid article:first-child{border-top:1px solid var(--linha)}} @media(max-width:980px){.credit-explainer{grid-template-columns:1fr}.credit-explainer>p{padding:16px 0 0;border-left:0;border-top:1px solid var(--linha)}.price-grid .free-plan{grid-column:span 2}} @media(max-width:620px){.price-grid .free-plan{grid-column:span 1;margin-block:0}.price-grid article>ul{min-height:auto}.promotion-terms{align-items:flex-start;flex-direction:column;gap:10px}} .price-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.price-grid .free-plan>ul>li:last-child{display:none} .contact-form{display:flex;flex-direction:column;gap:12px;max-width:430px;padding:24px;border:1px solid color-mix(in srgb, var(--sobre-primario) 28%, transparent);border-radius:var(--r3);background:color-mix(in srgb, var(--sobre-primario) 8%, transparent)}.contact-form label{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:500;color:color-mix(in srgb, var(--sobre-primario) 82%, transparent)}.contact-form label span{font-weight:400;opacity:.7}.contact-form input,.contact-form textarea{width:100%;padding:10px 11px;border:1px solid color-mix(in srgb, var(--sobre-primario) 30%, transparent);border-radius:10px;background:color-mix(in srgb, var(--sobre-primario) 10%, transparent);color:var(--sobre-primario);font:inherit;resize:vertical}.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--ciano);outline-offset:2px}.contact-form button{margin-top:4px;justify-content:center}.contact-form>small{font-size:10px;color:color-mix(in srgb, var(--sobre-primario) 62%, transparent)} @media(max-width:980px){.price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.price-grid .free-plan{grid-column:auto}} @media(max-width:620px){.price-grid{grid-template-columns:1fr}} footer p{font-size:13px} .price-grid article.free-plan h3{font-family:inherit;font-size:15px;font-weight:500} .json-terminal{margin-top:22px;overflow:hidden;border:1px solid color-mix(in srgb, var(--sobre-primario) 15%, var(--marinho));border-radius:12px;background:var(--marinho);box-shadow:0 12px 24px color-mix(in srgb, var(--marinho) 14%, transparent)}.terminal-bar{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid color-mix(in srgb, var(--sobre-primario) 15%, var(--marinho));background:var(--marinho);color:color-mix(in srgb, var(--sobre-primario) 55%, var(--marinho));font:500 10px/1 var(--mono)}.terminal-bar i{width:7px;height:7px;border-radius:50%;background:color-mix(in srgb, var(--sobre-primario) 50%, var(--marinho))}.terminal-bar i:first-child{background:color-mix(in srgb, var(--ciano) 60%, var(--sobre-primario))}.terminal-bar span{margin-left:6px}.json-terminal pre{margin:0;padding:16px 18px;overflow:auto;color:color-mix(in srgb, var(--ciano) 15%, var(--sobre-primario));font:12px/1.65 var(--mono)}.json-terminal code strong{color:color-mix(in srgb, var(--ciano) 50%, var(--sobre-primario));font-weight:500}.json-terminal code b{color:color-mix(in srgb, var(--aviso-tinta) 35%, var(--sobre-primario));font-weight:400}.json-terminal code mark{padding:0;background:transparent;color:color-mix(in srgb, var(--certo) 40%, var(--sobre-primario))}.json-terminal code em{color:color-mix(in srgb, var(--sobre-primario) 70%, var(--marinho));font-style:normal}.faq-robot{display:flex;align-items:end;gap:20px;margin-top:28px;padding-top:24px;border-top:1px solid var(--linha)}.faq-robot img{width:min(100%,420px);height:auto;filter:var(--filtro-robo);opacity:var(--opacidade-robo)}.faq-robot p{max-width:230px;padding-bottom:22px;font-family:var(--leitura);font-size:22px;line-height:1.2;color:var(--titulo)} .security-robot{width:300px} @media(max-width:980px){.security-robot{width:250px}.faq-robot{align-items:flex-start;flex-direction:column}.faq-robot p{padding:0}} .contact-form{border-color:var(--linha);background:var(--papel);box-shadow:0 12px 28px color-mix(in srgb, var(--marinho) 12%, transparent)}.contact-form label{color:var(--titulo)}.contact-form input,.contact-form textarea{border-color:var(--linha);background:var(--tinta-50);color:var(--texto)}.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--texto-fraco)}.contact-form button{border-color:var(--titulo);background:var(--marinho);color:var(--sobre-primario)}.contact-form>small{color:var(--texto-fraco)} .contact-card{position:relative;min-height:520px;perspective:1100px}.contact-card .contact-form,.contact-success{backface-visibility:hidden;transition:transform .72s cubic-bezier(.22,1,.36,1)}.contact-card .contact-form{height:100%;margin:0}.contact-success{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;border:1px solid var(--linha);border-radius:var(--r3);background:var(--papel);color:var(--titulo);text-align:center;transform:rotateY(180deg)}.contact-card.is-sent .contact-form{transform:rotateY(-180deg)}.contact-card.is-sent .contact-success{transform:rotateY(0)}.success-icon{display:grid;place-items:center;width:68px;height:68px;margin-bottom:22px;border-radius:50%;background:var(--marinho);color:var(--sobre-primario)}.success-icon svg{width:32px;height:32px}.contact-success p{font-family:var(--leitura);font-size:26px;line-height:1.2} @media(max-width:620px){.contact-card{min-height:560px}} .contact-form .outline-button.light-outline{border-color:var(--titulo);background:transparent;color:var(--titulo)!important}.contact-form .outline-button.light-outline span{color:var(--titulo)!important} .legal-link{display:inline-flex;margin-top:28px;padding:11px 16px;color:var(--titulo);border-color:var(--tinta-300)}.legal-link:hover{border-color:var(--ciano);color:var(--acento-escuro)} .format-note{max-width:none;margin:14px 0 0!important;font-size:10.5px!important;line-height:1.55!important;color:var(--texto-fraco)!important;text-align:left;white-space:nowrap} .faq-left{min-width:0}.faq-left .faq-robot{display:block;margin-top:34px;padding-top:0;border-top:0}.faq-left .faq-robot img{display:block;width:min(100%,500px);height:auto;filter:var(--filtro-robo-fundo);opacity:var(--opacidade-robo-fundo)} .price-grid article>a{min-height:72px;justify-content:center;text-align:center} .security-robot{width:420px;right:-18px;top:18px}.price-grid article{height:100%;box-sizing:border-box}.price-grid article.free-plan{margin-block:0;padding-top:24px}.contact-form button{border-color:var(--titulo);background:transparent;color:var(--titulo)} @media(max-width:980px){.security-robot{width:320px;right:-12px;top:28px}} @media(max-width:620px){.security-robot{width:250px;right:auto;top:auto}} /* Navigation lands on the section eyebrow, below the sticky header. */ #inicio,#acervos,#para-quem,#exemplos,#como-funciona,#seguranca,#precos,#duvidas,#contato{scroll-margin-top:88px} /* Country tabs use compact, self-contained SVG flags. */ .country-name{display:flex!important;align-items:center;gap:8px} .country-flag{display:block;width:18px;height:12px;flex:0 0 auto;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px color-mix(in srgb, var(--texto) 12%, transparent)} /* Keep the decorative security scene behind the readable feature grid. */ .security .section-head,.security-grid{position:relative;z-index:1} .security-grid{background:var(--papel)} .security-grid article{position:relative} .security-robot{z-index:0} /* Eyebrows stay intact when a section is reached from the menu. */ .section-head{min-width:0} .eyebrow{white-space:nowrap;flex-wrap:nowrap} .eyebrow span{flex:0 0 auto} .section-head>.eyebrow{flex:0 0 auto} .section-head h2{min-width:0} @media(max-width:980px){.format-note{white-space:normal}} @media(max-width:980px){.audience-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:620px){.audience-grid{grid-template-columns:1fr}.audience-grid article{min-height:0}.audience-icon{margin-bottom:30px}.audience-footer{align-items:flex-start;flex-direction:column;gap:4px}} @media(max-width:620px){#inicio,#acervos,#para-quem,#exemplos,#como-funciona,#seguranca,#precos,#duvidas,#contato{scroll-margin-top:80px}} /* Dark mode contrast for secondary controls and contact form */ .footer-brand{display:block!important} .footer-brand img{display:block;width:142px} .time-section{padding-bottom:32px} .time-section + .how{padding-top:48px} .section-head:not(.narrow) h2{max-width:none;flex:1} /* Design system alignment: landing-parda.html */ .site-header,.hero,.section,.trust-strip,.final-cta,footer{width:min(1080px,calc(100% - 48px))} .site-header{height:72px;padding:0;margin-inline:auto} .hero{min-height:auto;padding:84px 0 64px} h1{font-size:clamp(2.2rem,5.4vw,3.5rem);line-height:1.08;letter-spacing:-.014em} .hero-lead{margin-top:18px;font-size:clamp(1.05rem,2.2vw,1.3rem);line-height:1.5} .hero-detail{font-size:1.0625rem;line-height:1.62} .hero-actions{gap:12px;margin-top:30px} .button,.outline-button{padding:13px 22px;font-size:15px;line-height:1.2} .button-small{padding:13px 14px;font-size:14px} .free-note{margin-top:14px;font-size:14px} .section{padding:60px 0} .section-head{margin-bottom:32px} .section-head h2,.final-cta h2{font-size:clamp(1.5rem,3.4vw,2.05rem);line-height:1.22;letter-spacing:0} .section-head>p:last-child{font-size:1.0625rem;line-height:1.62} .mode-card{min-height:0;padding:24px} .mode-card p{font-size:1.0625rem;line-height:1.62} .steps article{padding:24px} .steps p{font-size:1.0625rem;line-height:1.62} .conveyor-feature,.formats-feature{gap:24px;margin-top:34px;padding:24px} .conveyor-feature h2,.formats-feature h2{font-size:clamp(1.5rem,3.4vw,2.05rem);line-height:1.22} .document-result p{font-size:1rem;line-height:1.62} .price-grid article{padding:22px} @media(max-width:620px){ .site-header,.hero,.section,.trust-strip,.final-cta,footer{width:calc(100% - 36px)} .site-header{height:68px} .hero{padding:52px 0 44px} .section{padding:44px 0} } /* Type and control details kept in lockstep with the established pardo system. */ body{-webkit-font-smoothing:antialiased} a{color:var(--acento-escuro)} .site-header{gap:20px} .site-header nav{gap:20px;font-size:14px} .brand img{width:176px} .eyebrow{font-size:11px;letter-spacing:.14em;color:var(--texto-fraco)} .hero h1{color:var(--texto);text-wrap:balance} .hero-lead{max-width:36ch;color:var(--texto-fraco)} .hero-detail{max-width:36ch} .outline-button{background:transparent;color:var(--texto)} .section-head h2,.final-cta h2{color:var(--texto);text-wrap:balance} .final-cta h2{font-size:clamp(1.7rem,4.2vw,2.5rem);line-height:1.22} .steps b{width:30px;height:30px;font-size:13px} .steps h3{margin:12px 0 0;font-family:var(--ui);font-size:1.125rem;font-weight:500;line-height:1.3} .steps p{font-size:1rem;line-height:1.62} .price-grid li{font-size:13.5px;line-height:1.5} .price-grid .formats-item ul li{font-size:12.5px} footer div{color:var(--texto-fraco)} /* Reading metadata follows the reference layout: title on the left, metric on the right. */ .reading-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:32px 0 14px} .reading-heading .eyebrow{margin-bottom:0} .reading-heading h3{margin-top:14px;font-family:var(--leitura);font-size:clamp(1.7rem,3vw,2.6rem);font-weight:400;line-height:1.12;letter-spacing:0;color:var(--texto)} .reading-metric{display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;padding:8px 15px;border:1px solid var(--linha);border-radius:var(--pilula);font-size:13px;line-height:1.3;color:var(--texto-fraco);white-space:nowrap} .reading-metric svg{width:20px;height:20px;flex:0 0 auto;color:var(--tinta-500)} .result-tabs .reading-metric{margin-left:auto;gap:6px;padding:5px 10px;font-size:10.5px;line-height:1.2} .result-tabs .reading-metric svg{width:14px;height:14px} .reading-intro{max-width:70ch;margin:0 0 26px;font-size:1.0625rem;line-height:1.62;color:var(--texto-fraco)} .reading-intro strong{color:var(--texto);font-weight:600} .modes>.section-head{align-items:baseline} .modes>.section-head>.eyebrow{margin-bottom:0} /* Keep the feature bar close to the illustration without letting it overlap the robot. */ .security .section-head{padding-bottom:48px} @media(max-width:620px){ .reading-heading{align-items:flex-start;flex-direction:column;gap:14px;margin-top:28px} .reading-metric{white-space:normal} .security .section-head{padding-bottom:0} } @media(max-width:980px) and (min-width:621px){.security .section-head{padding-bottom:90px}} /* Give the time-section illustration a little more presence while preserving responsive bounds. */ .back-robot img{width:300px;max-width:100%} /* Lift the security illustration so the lower edge remains visible above the feature grid. */ .security-robot{top:-34px} @media(max-width:620px){.security-robot{top:auto}} /* Keep the hero robot clear of the surrounding before/after cards. */ .hero-robot-static{width:min(100%,500px)} /* Keep the timing methodology outside the cards and aligned with the large-volume card. */ .time-note{margin:10px 0 0 calc(50% + 8px);max-width:calc(50% - 8px);font-size:10.5px;line-height:1.55;color:var(--texto-fraco)} @media(max-width:980px){.time-note{margin-left:0;max-width:none}} /* Keep the long volume label readable: split only at the intended phrase boundary on mobile. */ .time-label{display:block} .time-label-primary,.time-label-secondary{display:inline} .time-label-secondary{margin-left:.35em} @media(max-width:620px){.time-label-primary,.time-label-secondary{display:block}.time-label-secondary{margin-top:2px;margin-left:0;letter-spacing:.04em}} .security{border-top:0} /* Use the same brand-blue wash on the free pricing card and the formats card. */ .price-grid article.free-plan{background:color-mix(in srgb,var(--ciano) 16%,var(--papel))} /* Section headings follow the reference hierarchy: eyebrow above the title. */ .section-head{display:block} .section-head>.eyebrow{margin-bottom:14px} .section-head h2{max-width:820px} /* Accessibility color alignment shared with the application. */ a{color:var(--acento-escuro)} .site-header nav a:hover,.login:hover,.theme-toggle:hover{color:var(--acento-escuro)} .eyebrow,.mode-card .number{color:var(--acento-escuro)} .format-chips span{color:var(--tinta-600)} .document-paper{color:var(--texto)} .formats-feature,.price-grid article.free-plan{background:color-mix(in srgb,var(--ciano) 16%,var(--papel))} .free-labels span{color:var(--texto)} .price-grid article.featured .selo-vendido{color:var(--marinho)} .legal-link:hover{color:var(--acento-escuro)} /* Language picker mirrors the compact account-menu pattern used in the app. */ .language-selector{position:relative} .language-trigger{height:32px;display:inline-flex;align-items:center;gap:5px;padding:0 8px;border:0;border-radius:9px;background:transparent;color:var(--tinta-700);cursor:pointer} .language-trigger:hover,.language-trigger[aria-expanded='true']{background:var(--tinta-100);color:var(--acento-escuro)} .language-trigger:focus-visible{outline:0;box-shadow:var(--anel-foco)} .language-trigger svg:last-child{width:12px;height:12px} .language-trigger span{font-size:11px;font-weight:600;letter-spacing:.04em} .language-trigger .language-trigger-flag{display:block;width:20px;height:20px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px color-mix(in srgb, var(--texto) 12%, transparent)} .language-menu{position:absolute;z-index:60;top:calc(100% + 12px);right:0;width:220px;padding:12px;border:1px solid var(--linha);border-radius:14px;background:var(--papel);box-shadow:0 18px 44px color-mix(in srgb, var(--marinho) 18%, transparent)} .language-menu::before{content:'';position:absolute;right:22px;top:-6px;width:10px;height:10px;border-top:1px solid var(--linha);border-left:1px solid var(--linha);background:var(--papel);rotate:45deg} .language-menu>p{padding:4px 10px 9px;font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-fraco)} .language-menu button{width:100%;min-height:44px;display:grid;grid-template-columns:26px 1fr 18px;align-items:center;gap:8px;padding:8px 10px;border:0;border-radius:10px;background:transparent;color:var(--texto-fraco);text-align:left;cursor:pointer} .language-menu button:hover{background:var(--tinta-50);color:var(--texto)} .language-menu button.is-selected{background:color-mix(in srgb,var(--ciano) 14%,var(--papel));color:var(--texto)} .language-menu button>svg{width:18px;height:18px;color:var(--tinta-500)} .language-flag{display:block;width:22px;height:22px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px color-mix(in srgb, var(--texto) 12%, transparent)} @media(max-width:620px){.header-actions{gap:8px}.language-trigger{padding-inline:6px}.language-trigger span:not(.language-trigger-flag),.language-trigger svg:last-child{display:none}.language-menu{right:-70px}} /* The JSON card now focuses on the output itself, without a mascot. */ .formats-feature{grid-template-columns:1fr} .formats-feature>div{width:100%} /* Let the contact form use the full mobile and tablet card width. */ @media(max-width:980px){ .contact-card,.contact-form{width:100%;max-width:none} } /* The live document walkthrough replaces the former country transcription tabs. */ .transformation{padding-top:74px}.transformation .section-head{max-width:760px}.machine-steps{display:grid;grid-template-columns:repeat(3,1fr);margin-top:34px;border:1px solid var(--linha);border-radius:var(--r3);overflow:hidden}.machine-steps button{min-height:78px;display:flex;align-items:center;gap:13px;padding:16px 20px;border:0;border-right:1px solid var(--linha);background:var(--papel);color:var(--texto-fraco);text-align:left;cursor:pointer;transition:background .28s ease,color .28s ease}.machine-steps button:last-child{border-right:0}.machine-steps button:hover{background:var(--tinta-50);color:var(--texto)}.machine-steps button.active{background:var(--marinho);color:var(--sobre-primario)}.machine-steps button small{font-size:10px;letter-spacing:.12em}.machine-steps button b{font-family:var(--leitura);font-size:22px;font-weight:400}.transform-demo{position:relative;display:grid;grid-template-columns:.92fr 1.08fr;min-height:550px;margin-top:20px;padding:28px;border:1px solid var(--linha);border-radius:var(--r3);overflow:hidden;background:var(--tinta-50)}.transform-demo::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 82% 12%,color-mix(in srgb, var(--ciano) 15%, transparent),transparent 30%);pointer-events:none}.transform-route{position:absolute;z-index:0;inset:0;pointer-events:none}.transform-route svg{width:100%;height:100%}.transform-route path:first-child{stroke:var(--tinta-300);stroke-width:1.5;stroke-dasharray:5 8}.transform-route path:last-child{stroke:var(--ciano);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1500;filter:drop-shadow(0 0 5px color-mix(in srgb, var(--ciano) 55%, transparent));animation:transform-route 1.25s ease both}.stage-1 .transform-route svg{transform:scaleX(-1)}.stage-2 .transform-route svg{transform:rotate(8deg) scale(1.08)}.transform-panel{position:relative;z-index:1;align-self:center;opacity:.25;filter:grayscale(.55);transform:scale(.94) translateY(10px);transition:opacity .5s ease,transform .55s cubic-bezier(.22,1,.36,1),filter .45s ease}.transform-panel.active{opacity:1;filter:none;transform:scale(1) translateY(0)}.source-panel{width:92%;padding:14px;background:var(--aviso-lavado);box-shadow:13px 17px 0 color-mix(in srgb, var(--marinho) 10%, transparent);rotate:-2deg}.source-panel img{display:block;width:100%;height:320px;object-fit:cover;object-position:center;border:1px solid color-mix(in srgb, var(--aviso-tinta) 22%, transparent);mix-blend-mode:multiply}.panel-label{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px;font-size:9px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--texto-fraco)}.source-panel .panel-label{color:var(--aviso-tinta)}.transform-panel>p{margin:14px 2px 1px;font-size:11px;line-height:1.5;color:var(--aviso-tinta)}.transcription-panel,.data-panel{grid-column:2;grid-row:1;width:100%;overflow:hidden;border:1px solid color-mix(in srgb, var(--sobre-primario) 15%, var(--marinho));border-radius:12px;background:var(--marinho);box-shadow:15px 18px 0 color-mix(in srgb, var(--marinho) 11%, transparent)}.transcription-panel .panel-label,.data-panel .panel-label{margin:0;padding:13px 17px;border-bottom:1px solid color-mix(in srgb, var(--sobre-primario) 15%, var(--marinho));background:var(--marinho);color:color-mix(in srgb, var(--sobre-primario) 70%, var(--marinho))}.transcription-panel blockquote{max-height:345px;margin:0;padding:23px 24px;overflow:auto;color:color-mix(in srgb, var(--ciano) 15%, var(--sobre-primario));font-family:var(--leitura);font-size:20px;font-style:italic;line-height:1.55}.data-panel dl{max-height:345px;margin:0;padding:4px 19px;overflow:auto}.data-panel dl div{display:grid;grid-template-columns:.85fr 1.15fr;gap:14px;padding:13px 0;border-bottom:1px solid color-mix(in srgb, var(--sobre-primario) 18%, transparent);font-size:11px}.data-panel dt{color:color-mix(in srgb, var(--ciano) 50%, var(--sobre-primario))}.data-panel dd{margin:0;color:color-mix(in srgb, var(--aviso-tinta) 35%, var(--sobre-primario));text-align:right}.panel-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 17px;border-top:1px solid color-mix(in srgb, var(--sobre-primario) 15%, var(--marinho));color:color-mix(in srgb, var(--sobre-primario) 70%, var(--marinho));font-size:10px}.panel-footer b{color:color-mix(in srgb, var(--certo) 40%, var(--sobre-primario));font-weight:500}.transformation .source-note{margin-top:13px} @keyframes transform-route{from{stroke-dashoffset:1450}to{stroke-dashoffset:0}} @media(max-width:980px){.transform-demo{grid-template-columns:1fr;gap:18px}.source-panel{width:min(92%,460px);justify-self:center}.transcription-panel,.data-panel{grid-column:1;grid-row:2}.transform-panel:not(.active){display:none}} @media(max-width:620px){.transformation{padding-top:50px}.machine-steps{grid-template-columns:1fr}.machine-steps button{min-height:58px;border-right:0;border-bottom:1px solid var(--linha)}.machine-steps button:last-child{border-bottom:0}.machine-steps button b{font-size:20px}.transform-demo{min-height:0;padding:14px;margin-top:14px}.source-panel img{height:235px}.transcription-panel blockquote{max-height:350px;padding:20px;font-size:17px}.data-panel dl div{grid-template-columns:1fr;padding:11px 0;gap:4px}.data-panel dd{text-align:left}.panel-footer{align-items:flex-start;flex-direction:column;gap:5px}.transform-route{display:none}} /* Scroll-driven machine, tuned to the original landing page's type, tokens and rhythm. */ .transformation-scene{width:100%!important;max-width:none!important;min-height:300vh;margin:0!important;padding:0!important;opacity:1!important;translate:none!important;background:var(--marinho);color:var(--sobre-primario)}.transformation-sticky{position:sticky;top:0;display:flex;flex-direction:column;height:100svh;min-height:600px;padding:46px max(24px,calc((100vw - 1080px)/2));overflow:hidden}.transformation-sticky::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 60%,color-mix(in srgb, var(--ciano) 16%, transparent),transparent 31%),radial-gradient(circle at 8% 88%,color-mix(in srgb, var(--tinta-800) 65%, transparent),transparent 30%);pointer-events:none}.transformation-top,.transform-demo,.machine-steps,.transformation-sticky>.source-note{position:relative;z-index:2}.transformation-top{display:flex;align-items:flex-start;justify-content:space-between;gap:30px}.transformation-top .section-head{max-width:560px;margin-bottom:0}.transformation-top .section-head .eyebrow{color:color-mix(in srgb, var(--ciano) 45%, var(--sobre-primario))}.transformation-top .section-head h2{margin-top:0;color:var(--sobre-primario);font-size:clamp(2.1rem,4vw,3.2rem)}.transformation-top .section-head>p:last-child{max-width:500px;color:color-mix(in srgb, var(--sobre-primario) 70%, var(--marinho));font-size:14px}.transformation-index{padding-top:3px;color:color-mix(in srgb, var(--sobre-primario) 50%, var(--marinho));font-size:10px;letter-spacing:.14em;white-space:nowrap}.transform-demo{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(25px,6vw,82px);align-items:center;flex:1;min-height:0;margin:10px 0 14px;padding:0;border:0;border-radius:0;overflow:visible;background:transparent}.transform-demo::before{display:none}.transform-route{position:absolute;z-index:0;inset:-5% -8%;pointer-events:none}.transform-route svg{width:100%;height:100%}.transform-route path:first-child{stroke:color-mix(in srgb, var(--sobre-primario) 20%, var(--marinho));stroke-width:1.5;stroke-dasharray:5 10;fill:none}.transform-route path:last-child{stroke:var(--ciano);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1500;filter:drop-shadow(0 0 5px color-mix(in srgb, var(--ciano) 70%, transparent));fill:none;animation:transform-route-scroll 1.25s ease both}.stage-1 .transform-route svg{transform:scaleX(-1)}.stage-2 .transform-route svg{transform:rotate(7deg) scale(1.07)}.transform-story-copy{position:relative;z-index:2;align-self:center;animation:machine-copy-in .6s ease both}.transform-story-copy>span{color:color-mix(in srgb, var(--ciano) 45%, var(--sobre-primario));font-size:10px;font-weight:500;letter-spacing:.14em}.transform-story-copy h3{margin-top:15px;font-family:var(--leitura);font-size:clamp(3.8rem,7vw,7rem);font-weight:400;line-height:.83;letter-spacing:-.06em;color:var(--sobre-primario)}.transform-story-copy p{max-width:310px;margin-top:30px;color:color-mix(in srgb, var(--sobre-primario) 70%, var(--marinho));font-size:14px;line-height:1.65}.transform-count{display:flex;align-items:center;gap:11px;margin-top:30px}.transform-count b{font-family:var(--leitura);font-size:30px;font-weight:400}.transform-count i{width:65px;height:1px;background:color-mix(in srgb, var(--sobre-primario) 30%, var(--marinho))}.transform-count small{color:color-mix(in srgb, var(--sobre-primario) 50%, var(--marinho));font-size:10px}.transform-visual{position:relative;z-index:2;height:min(55vh,470px);min-height:315px}.transform-panel{position:absolute!important;inset:0;display:flex;align-items:center;justify-content:center;grid-column:auto!important;grid-row:auto!important;width:100%!important;opacity:0;filter:grayscale(.6);transform:translateY(25px) scale(.96);transition:opacity .55s ease,transform .65s cubic-bezier(.22,1,.36,1),filter .45s ease;pointer-events:none}.transform-panel.active{opacity:1;filter:none;transform:translateY(0) scale(1);pointer-events:auto}.source-panel{rotate:0;padding:14px;background:var(--papel);box-shadow:14px 16px 0 color-mix(in srgb, var(--marinho) 20%, transparent);color:var(--texto)}.source-panel img{display:block;width:100%;height:auto!important;max-height:none;object-fit:contain;object-position:center;border:0;mix-blend-mode:multiply}.source-panel .panel-label{color:var(--texto-fraco)}.source-panel>p{color:var(--texto-fraco)}.transcription-panel,.data-panel{position:absolute!important;inset:2% 0!important;width:100%!important;max-width:550px;margin:auto;box-shadow:15px 17px 0 color-mix(in srgb, var(--marinho) 20%, transparent)}.transcription-panel blockquote{max-height:min(44vh,330px);font-family:var(--leitura);font-size:clamp(17px,2vw,23px);line-height:1.52}.data-panel dl{max-height:min(44vh,330px)}.machine-steps{display:grid;grid-template-columns:repeat(3,1fr);width:min(100%,540px);margin-left:auto;border:1px solid color-mix(in srgb, var(--sobre-primario) 30%, transparent);border-radius:var(--radius-lg);overflow:hidden}.machine-steps button{min-height:58px;display:flex;align-items:center;gap:10px;padding:12px 14px;border:0;border-right:1px solid color-mix(in srgb, var(--sobre-primario) 30%, transparent);background:transparent;color:color-mix(in srgb, var(--sobre-primario) 50%, var(--marinho));text-align:left;cursor:pointer;transition:background .25s ease,color .25s ease}.machine-steps button:last-child{border-right:0}.machine-steps button:hover{background:color-mix(in srgb, var(--sobre-primario) 10%, var(--marinho));color:var(--sobre-primario)}.machine-steps button.active{background:var(--ciano);color:var(--marinho)}.machine-steps button small{font-size:9px;letter-spacing:.1em}.machine-steps button b{font-family:var(--ui);font-size:11px;font-weight:500}.transformation-sticky>.source-note{width:100%;margin:10px 0 0!important;color:color-mix(in srgb, var(--sobre-primario) 50%, var(--marinho))!important}.transformation-scene .panel-label{font-size:9px}.transformation-scene .panel-label b{font-weight:500}.transformation-scene .panel-footer{font-size:10px}.transformation-scene .panel-footer b{font-weight:500} @keyframes transform-route-scroll{from{stroke-dashoffset:1450}to{stroke-dashoffset:0}}@keyframes machine-copy-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} @media(max-width:980px){.transformation-sticky{padding:38px max(24px,calc((100vw - 720px)/2))}.transformation-top{display:block}.transformation-index{display:block;margin-top:9px}.transform-demo{grid-template-columns:.78fr 1.22fr;gap:25px}.transform-story-copy h3{font-size:clamp(3.6rem,8vw,6rem)}.transform-story-copy p{font-size:13px}.source-panel{width:100%!important}.transformation-sticky>.source-note{font-size:10px!important}} @media(max-width:620px){.transformation-scene{min-height:240vh}.transformation-sticky{height:100svh;min-height:650px;padding:32px 14px 20px}.transformation-top .section-head h2{font-size:clamp(2rem,9vw,2.7rem)}.transformation-top .section-head>p:last-child{font-size:12px;line-height:1.5}.transformation-index{font-size:9px}.transform-demo{display:block;margin:0;flex:1}.transform-route{display:none}.transform-story-copy{padding-top:22px}.transform-story-copy h3{font-size:clamp(3.8rem,17vw,5.5rem)}.transform-story-copy p{max-width:300px;margin-top:17px;font-size:12px}.transform-count{margin-top:17px}.transform-visual{height:300px;min-height:0;margin-top:10px}.source-panel{align-items:flex-start}.source-panel img{height:auto!important}.transcription-panel,.data-panel{inset:0!important}.transcription-panel blockquote{max-height:190px;padding:18px;font-size:15px}.data-panel dl{max-height:190px;padding:3px 15px}.data-panel dl div{grid-template-columns:.9fr 1.1fr;padding:9px 0;font-size:10px}.machine-steps{width:100%;margin:8px 0 0}.machine-steps button{min-height:48px;padding:9px 8px;gap:6px}.machine-steps button b{font-size:9px}.machine-steps button small{font-size:8px}.transformation-sticky>.source-note{font-size:9px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}} /* Keep the scroll scene on the original canvas and make the document content the hero. */ .transformation-scene{width:min(1080px,calc(100% - 48px))!important;max-width:none!important;margin-inline:auto!important;background:var(--papel);color:var(--texto)}.transformation-sticky{padding-inline:0;background:var(--papel);color:var(--texto)}.transformation-sticky::before{display:none}.transformation-top .section-head h2{font-size:clamp(1.65rem,3vw,2.45rem);color:var(--texto)}.transformation-top .section-head .eyebrow{color:var(--acento-escuro)}.transformation-top .section-head>p:last-child{color:var(--texto-fraco)}.transformation-index{color:var(--texto-fraco)}.transform-demo{grid-template-columns:.56fr 1.44fr;gap:clamp(28px,5vw,64px);margin:14px 0 20px}.transform-route path:first-child{stroke:var(--tinta-300)}.transform-route path:last-child{stroke:var(--ciano)}.transform-story-copy>span{color:var(--acento-escuro)}.transform-story-copy h3{font-size:clamp(2.75rem,4.5vw,4.9rem);line-height:.9;color:var(--texto);letter-spacing:-.045em}.transform-story-copy p{max-width:255px;color:var(--texto-fraco);font-size:13px;line-height:1.58}.transform-count b{color:var(--texto)}.transform-count i{background:var(--tinta-300)}.transform-count small{color:var(--texto-fraco)}.transform-visual{height:min(61vh,540px);min-height:350px}.source-panel{width:100%!important;max-width:680px;padding:13px;background:var(--aviso-lavado);color:var(--aviso-tinta);box-shadow:14px 16px 0 color-mix(in srgb, var(--marinho) 12%, transparent)}.source-panel img{width:100%;height:auto!important;object-fit:contain;mix-blend-mode:normal;filter:none}.source-panel .panel-label{color:var(--aviso-tinta)}.source-panel>p{color:var(--aviso-tinta)}.transcription-panel,.data-panel{max-width:680px;background:var(--papel);border-color:var(--linha);box-shadow:14px 16px 0 color-mix(in srgb, var(--marinho) 10%, transparent)}.transcription-panel .panel-label,.data-panel .panel-label{background:var(--tinta-50);border-color:var(--linha);color:var(--texto-fraco)}.transcription-panel blockquote{max-height:min(47vh,390px);padding:27px;color:var(--texto);font-family:var(--ui);font-size:15px;font-style:normal;line-height:1.75}.data-panel dl{max-height:min(47vh,390px)}.data-panel dl div{border-color:var(--linha);font-size:12px}.data-panel dt{color:var(--acento-escuro)}.data-panel dd{color:var(--texto);font-weight:500}.panel-footer{border-color:var(--linha);color:var(--texto-fraco)}.panel-footer b{color:var(--verde-desconto)}.machine-steps{width:min(100%,680px);border-color:var(--linha)}.machine-steps button{border-color:var(--linha);background:var(--papel);color:var(--texto-fraco)}.machine-steps button:hover{background:var(--tinta-50);color:var(--texto)}.machine-steps button.active{background:var(--marinho);color:var(--sobre-primario)}.transformation-sticky>.source-note{color:var(--texto-fraco)!important} @media(max-width:980px){.transformation-scene{width:min(720px,calc(100% - 48px))!important}.transform-demo{grid-template-columns:.56fr 1.44fr}.transform-story-copy h3{font-size:clamp(2.7rem,6vw,4.4rem)}} @media(max-width:620px){.transformation-scene{width:calc(100% - 28px)!important;min-height:240vh}.transformation-sticky{padding-inline:0}.transformation-top .section-head h2{font-size:clamp(1.65rem,8vw,2.25rem)}.transform-story-copy h3{font-size:clamp(2.9rem,13vw,4.7rem)}.transform-story-copy p{font-size:12px}.transform-visual{height:310px}.source-panel{padding:10px}.source-panel img{width:100%;height:auto!important}.transcription-panel blockquote{max-height:205px;padding:18px;font-size:13px;line-height:1.6}.data-panel dl{max-height:205px}.data-panel dl div{grid-template-columns:.9fr 1.1fr;padding:9px 0;font-size:10px}} /* Comparison cards: keep labels readable, then pair every output with its source image. */ .source-panel .panel-label{display:grid;grid-template-columns:1fr;justify-items:start;gap:5px;line-height:1.35}.source-panel .panel-label b{max-width:100%;overflow-wrap:anywhere;font-size:8px}.comparison-layout{display:grid;grid-template-columns:minmax(120px,.38fr) minmax(0,1fr);gap:15px;align-items:stretch;padding:15px;background:var(--tinta-50)}.comparison-thumb{display:flex;flex-direction:column;gap:7px;min-width:0;padding:8px;background:var(--aviso-lavado);color:var(--aviso-tinta)}.comparison-thumb img{display:block;width:100%;height:auto;max-height:190px;object-fit:contain;object-position:center;mix-blend-mode:normal}.comparison-thumb span{font-size:8px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}.transcription-panel{background:var(--papel)}.transcription-panel .comparison-layout{background:color-mix(in srgb,var(--acento-lavado) 58%,var(--papel))}.transcription-panel blockquote{max-height:235px;margin:0;padding:15px;overflow:auto;background:var(--papel);color:var(--texto);font-family:var(--mono);font-size:11px;font-style:normal;line-height:1.7}.data-panel{background:var(--marinho);border-color:color-mix(in srgb, var(--sobre-primario) 15%, var(--marinho))}.data-panel .comparison-layout{background:var(--marinho)}.data-panel .comparison-thumb{background:var(--aviso-lavado)}.json-code{max-height:235px;margin:0;padding:15px;overflow:auto;background:var(--marinho);color:color-mix(in srgb, var(--sobre-primario) 75%, var(--marinho));font:11px/1.65 var(--mono);white-space:pre-wrap}.json-code::first-line{color:color-mix(in srgb, var(--ciano) 50%, var(--sobre-primario))}.data-panel .panel-footer{border-color:color-mix(in srgb, var(--sobre-primario) 15%, var(--marinho));color:color-mix(in srgb, var(--sobre-primario) 70%, var(--marinho))}.data-panel .panel-footer b{color:color-mix(in srgb, var(--certo) 40%, var(--sobre-primario))}.transcription-panel .panel-footer{border-color:var(--linha)} @media(max-width:980px){.comparison-layout{grid-template-columns:minmax(120px,.42fr) minmax(0,1fr);gap:13px}.comparison-thumb img{max-height:180px}.transcription-panel blockquote,.json-code{max-height:260px}} @media(max-width:620px){.comparison-layout{grid-template-columns:108px minmax(0,1fr);gap:10px;padding:10px}.comparison-thumb{padding:6px}.comparison-thumb img{max-height:150px}.transcription-panel blockquote,.json-code{max-height:205px;padding:12px;font-size:10px;line-height:1.55}.source-panel .panel-label{gap:4px}.source-panel .panel-label b{font-size:7px}.source-panel>p{font-size:10px}} .comparison-layout{width:100%} .transform-panel{flex-direction:column} /* The TXT and JSON states return to the original collage composition: source image first, output card floating over it. */ .transcription-panel,.data-panel{display:flex!important;overflow:visible!important;border:0!important;background:transparent!important;box-shadow:none!important}.collage-scene{position:relative;width:100%;height:100%;max-width:650px}.collage-photo{position:absolute;top:2%;left:2%;z-index:0;width:88%;margin:0;padding:11px;background:var(--aviso-lavado);box-shadow:14px 17px 0 color-mix(in srgb, var(--marinho) 12%, transparent);transform:rotate(-3deg)}.collage-photo img{display:block;width:100%;height:auto;object-fit:contain;mix-blend-mode:normal}.collage-photo figcaption{margin-top:8px;color:var(--aviso-tinta);font-size:8px;font-weight:500;letter-spacing:.08em}.txt-card,.json-card{position:absolute;z-index:2;right:0;bottom:3%;width:72%;overflow:hidden;box-shadow:16px 18px 0 color-mix(in srgb, var(--marinho) 14%, transparent);transform:rotate(3deg)}.txt-card{border:1px solid var(--linha);background:var(--papel);color:var(--texto)}.json-card{border:1px solid color-mix(in srgb, var(--sobre-primario) 15%, var(--marinho));background:var(--marinho);color:color-mix(in srgb, var(--sobre-primario) 75%, var(--marinho));transform:rotate(-2.5deg)}.collage-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 13px;border-bottom:1px solid var(--linha);background:var(--tinta-50);color:var(--texto-fraco);font:500 9px/1 var(--mono)}.json-card .collage-bar{border-color:color-mix(in srgb, var(--sobre-primario) 15%, var(--marinho));background:var(--marinho);color:color-mix(in srgb, var(--sobre-primario) 70%, var(--marinho))}.collage-bar span{display:flex;align-items:center;gap:4px;min-width:0}.collage-bar i{display:block;width:6px;height:6px;border-radius:50%;background:var(--tinta-400)}.json-card .collage-bar i:first-child{background:color-mix(in srgb, var(--ciano) 50%, var(--sobre-primario))}.collage-bar b{font:500 8px var(--ui);white-space:nowrap}.txt-card blockquote{max-height:min(30vh,228px);margin:0;padding:16px 18px;overflow:auto;background:var(--papel);color:var(--texto);font:11px/1.7 var(--mono);font-style:normal}.json-card .json-code{max-height:min(30vh,228px);margin:0;padding:16px 18px;overflow:auto;background:var(--marinho);color:color-mix(in srgb, var(--sobre-primario) 75%, var(--marinho));font:11px/1.65 var(--mono);white-space:pre-wrap}.collage-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 13px;border-top:1px solid var(--linha);color:var(--texto-fraco);font-size:9px}.collage-footer b{color:var(--verde-desconto);font-weight:500}.json-card .collage-footer{border-color:color-mix(in srgb, var(--sobre-primario) 15%, var(--marinho));color:color-mix(in srgb, var(--sobre-primario) 70%, var(--marinho))}.json-card .collage-footer b{color:color-mix(in srgb, var(--certo) 40%, var(--sobre-primario))}.transcription-panel .comparison-layout,.data-panel .comparison-layout{display:none} @media(max-width:620px){.transform-visual{height:360px}.collage-scene{max-width:none}.collage-photo{top:1%;left:0;width:91%;padding:8px}.collage-photo figcaption{margin-top:5px;font-size:7px}.txt-card,.json-card{right:0;bottom:1%;width:82%;box-shadow:10px 12px 0 color-mix(in srgb, var(--marinho) 14%, transparent)}.collage-bar{padding:8px 10px;font-size:8px}.collage-bar b{font-size:7px}.txt-card blockquote,.json-card .json-code{max-height:145px;padding:11px 12px;font-size:9px;line-height:1.55}.collage-footer{padding:8px 10px;font-size:8px}} .transcription-panel,.data-panel,.collage-scene{height:100%!important} /* Warm the collage frames with the landing page's paper and editorial type system. */ .collage-photo{background:var(--aviso-lavado);box-shadow:13px 16px 0 color-mix(in srgb, var(--marinho) 10%, transparent)}.txt-card{border-color:color-mix(in srgb, var(--aviso-tinta) 28%, var(--aviso-lavado));background:var(--aviso-lavado);box-shadow:16px 18px 0 color-mix(in srgb, var(--marinho) 10%, transparent)}.txt-card .collage-bar{border-color:color-mix(in srgb, var(--aviso-tinta) 28%, var(--aviso-lavado));background:color-mix(in srgb, var(--aviso-tinta) 12%, var(--aviso-lavado));color:var(--titulo);font-family:var(--leitura);font-size:13px;letter-spacing:.02em}.txt-card .collage-bar b{font-family:var(--ui);color:var(--texto-fraco)}.txt-card blockquote{background:color-mix(in srgb, var(--aviso-lavado) 45%, var(--papel));color:var(--texto)}.txt-card .collage-footer{border-color:color-mix(in srgb, var(--aviso-tinta) 28%, var(--aviso-lavado));background:var(--aviso-lavado);color:var(--texto-fraco)}.json-card{border-color:color-mix(in srgb, var(--sobre-primario) 15%, var(--marinho));background:var(--marinho);box-shadow:16px 18px 0 color-mix(in srgb, var(--marinho) 16%, transparent)}.json-card .collage-bar{background:color-mix(in srgb, var(--sobre-primario) 10%, var(--marinho));color:var(--sobre-primario);font-family:var(--leitura);font-size:13px;letter-spacing:.02em}.json-card .collage-bar b{font-family:var(--ui);color:color-mix(in srgb, var(--ciano) 45%, var(--sobre-primario))}.json-card .json-code{background:var(--marinho);color:color-mix(in srgb, var(--ciano) 15%, var(--sobre-primario))}.json-card .collage-footer{background:var(--marinho);color:color-mix(in srgb, var(--sobre-primario) 70%, var(--marinho))}.json-card .collage-footer b{color:color-mix(in srgb, var(--certo) 35%, var(--sobre-primario))}.collage-footer{font-family:var(--ui)} /* ── O QUE ESTE PORTE ACRESCENTA, e a razão de cada linha ──────────────────── Nada aqui é enfeite: são as quatro peças que a landing não tinha porque o React resolvia por outro caminho, mais os pisos que se medem. */ /* 1 · A ARMADILHA do formulário. Fora da vista, fora do teclado, fora do leitor de tela — e sem `display:none`, que alguns robôs sabem ignorar. */ .contato-armadilha{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* 2 · O ERRO do formulário, quando a view o devolve. Sobre o marinho do CTA: o `--selo` mede 2,7 ali, então a mensagem vai a branco sobre o lavado do erro é impossível (ele inverte) — fica o branco, com o peso a fazer o sinal, e o `role=alert` a carregar o resto. */ .contact-erro{margin:0 0 4px;font-size:12px;font-weight:600;color:var(--titulo)} /* 3 · O endereço e o e-mail sob o CTA. Sobre o marinho, e por isso a cor sai do branco lavado — a mesma família do `.final-actions small`. */ .contato-endereco{margin-top:20px;font-size:11px;color:color-mix(in srgb, var(--sobre-primario) 70%, var(--marinho))} .contato-endereco a{color:color-mix(in srgb, var(--ciano) 45%, var(--sobre-primario));text-underline-offset:3px;text-decoration:underline} /* 4 · O ALVO DE 44px. Medido: `.button`/`.outline-button` davam 13+13+18 = 44 já com o `line-height` 1.2 de 15px; o `.button-small` da barra dava 40, o `.text-link` 35 e o `summary` das dúvidas 42. ⛔ E não se resolve com `padding`, que empurraria o desenho: resolve-se com `min-height`, que só cresce o que estava abaixo do piso. A caixa pequena não é alvo pequeno — o que se prova é o ALVO EFECTIVO, e é ele que a sonda mede. ⚠️⚠️ **`.machine-steps button` SAIU DESTA LISTA em 05/09 (frente S4), e a frase «só cresce o que estava abaixo do piso» é a razão — ela era FALSA para ele.** Aquele botão tem `min-height` PRÓPRIO no desenho da landing — 78 na forma antiga, **58 na cena da máquina, 48 a 390** —, e `min-height` não é uma função de máximo: é uma declaração, e a última que ganha o cascata vence. Um piso escrito DEPOIS de um valor maior não é piso, é tecto. Medido a 05/09 antes de tirar: os três passos da máquina saíam a **44px de alto a 1440 e a 390**, onde o desenho pedia 58 e 48. *A regra existia para proteger o alvo e encolheu o único item da lista que já estava a salvo.* ⭐ E o critério, para a próxima: só entra nesta lista quem NÃO declara `min-height` em lado nenhum. Quem declara já respondeu à pergunta, e a resposta dele é a que vale — se estiver abaixo de 44, conserta-se lá, na regra que a decidiu, e não por cima. */ .button,.outline-button,.button-small,.text-link,.login,.faq-list summary{min-height:44px} .text-link,.login,.faq-list summary{display:inline-flex;align-items:center} .faq-list summary{display:flex} /* 5 · `text-wrap: balance` nos títulos. A landing já o tinha no `h1` e no `h2`; os `h3` das famílias «modos», «para quem», «passos» e «máquina» ficaram de fora, e são eles que partem feio a 390. */ .mode-card h3,.audience-grid h3,.steps h3,.transform-story-copy h3,.price-grid h3,.security-grid b{text-wrap:balance} /* 6 · SEM TRANSBORDO HORIZONTAL. A cena da máquina é `width:100%!important` em três camadas da folha original e a `.transform-route` sai `inset:-5% -8%`; a 390 isso empurrava o documento. O corte fica na cena, e não no `body`: `overflow-x:hidden` na raiz mata o `position:sticky` do topo — é o defeito que a D-1615 acabou de consertar no produto, e não se refaz aqui. */ .transformation-scene{overflow-x:clip} /* ── A MARCA, e o porquê de ela estar AQUI e não no topo ───────────────────── ⚠️ Este bloco esteve no início do arquivo e NÃO FUNCIONAVA. A regra da landing `.brand img{display:block;width:168px}` vem depois e tem especificidade 0,1,1 contra os 0,1,0 de `.logo-escuro{display:none}` — os DOIS logotipos apareciam lado a lado, e no escuro dava um alvo de 342px de largura. Foi a sonda dos alvos que o apanhou, e não a leitura: no claro os dois desenham-se quase iguais e ninguém repara. ⭐ A emenda é a ordem, e não `!important`: o bloco desce para depois de quem o vencia. A técnica dos três estados é a do `produto.css`. */ .brand .logo-claro, .brand .logo-escuro { display: block } .brand .logo-escuro { display: none } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand .logo-claro { display: none } :root:not([data-theme="light"]) .brand .logo-escuro { display: block } } :root[data-theme="dark"] .brand .logo-claro { display: none } :root[data-theme="dark"] .brand .logo-escuro { display: block } /* ── O ALVO das âncoras do topo ────────────────────────────────────────────── Medidos a 19px de altura pela sonda da casa. ⛔ `min-height` sozinho não chega num `` de fluxo: ele fica com a caixa alta e o alvo pequeno. É o `display:flex` + `align-items:center` que faz a caixa SER o alvo. */ .site-header nav a { display: inline-flex; align-items: center; min-height: 44px } /* ── O PREÇO não parte em duas linhas ──────────────────────────────────────── Medido: «BRL 222.22» a 32px partia em 2 linhas na coluna de 98px do 1440 com cinco cartões. A moeda e o número são uma coisa só; o que cede é o corpo da letra, e ele cede em banda para não empurrar o 390. */ .price-grid article > b { white-space: nowrap; font-size: clamp(21px, 1.9vw, 32px) } .price-grid article.free-plan > b { font-size: clamp(24px, 2.2vw, 38px) } /* ── O «ia» DA MARCA: 2,72 medido, e o piso da forma grande é 3,0 ──────────── ⚠️ A landing pinta-o de `--ciano`, e o ciano NÃO inverte: sobre o papel claro ele mede **2,72** — o mesmo 2,72 que a D-1614 escreveu ao recusar o ciano como origem do anel de foco. Falha por 0,28, que é o pior modo de falhar: parece certo em toda leitura menos na medição. ⭐ Quem serve é o `--acento-escuro`, que É o par que inverte — `#00679C` no claro (5,75 sobre o papel) e `#009FF0` no escuro, que é o ciano da marca. **No tom escuro o «ia» continua ciano exacto**; só no claro ele escurece, e é a mesma troca que o produto já fez no link dentro de texto corrido. */ .brand-title-ia { color: var(--acento-escuro) } /* ── Os dois alvos que faltavam no topo ────────────────────────────────────── Medidos: a marca dava 31px de altura e o «Log in» 36px de largura. A marca ganha altura, não margem — o cabeçalho tem 72px e cabe. */ .brand { display: inline-flex; align-items: center; min-height: 44px } .login { min-width: 44px; justify-content: center } /* ── AS DUAS PEÇAS DA BARRA — a cópia que existe porque `produto.css` não vem ─ O botão de tema e o seletor de idioma subiram do rodapé para o `_nav.html` em 05/09, com a forma de `cliente/_barra.html`. O desenho delas vive em `produto.css`, e essa folha **não é carregada aqui de propósito** (90 kB de telas do aplicativo na página que mais precisa abrir depressa — a razão inteira está em `institucional/base.html`). ⚠️ Por isso as regras estão COPIADAS, e a cópia é a decisão: sem elas as duas peças rendem sem desenho nenhum — que é o que acontecia desde que a S1 as pôs no rodapé. As medidas são as do produto, ao número: `gap 8`, botão `28×28` com ícone de 24, gatilho de altura 32 com `padding 0 6`, raio 9, `gap 5`, texto 13/500. ⭐ Os 32px do `.hd-idioma` são DECISÃO DO ALAN e não pendência de alvo: o mínimo de 44 vale para a marca e para o «Sign in» ao lado (que já os têm, mais abaixo nesta folha), não para este gatilho. */ .hd-acoes { display: flex; align-items: center; gap: 8px } .hd-tema { display: flex; margin: 0 } /* As duas formas do botão, e são TRÊS estados a caber em duas: `dark` e `light` explícitos vêm do `data-theme` na raiz, e o AUSENTE («Sistema») cai na consulta de media. Sem isto o botão mente a quem chega sem cookie com o sistema no escuro — ícone, rótulo e valor enviado, os três trocados. */ .hd-tema-escuro { display: none } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hd-tema-claro { display: none } :root:not([data-theme="light"]) .hd-tema-escuro { display: flex } } :root[data-theme="dark"] .hd-tema-claro { display: none } :root[data-theme="dark"] .hd-tema-escuro { display: flex } .hd-tema-botao { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; color: var(--texto) } .hd-tema-botao svg { width: 24px; height: 24px; display: block } .hd-tema-botao:hover { color: var(--acento-escuro) } /* ⚠️ `inline-flex` + `align-items`: sem eles o `gap` não tem em que agir e a bandeira (que é `display: block`) EMPILHA sobre a sigla. Foi o que o Alan viu na tela de entrada em produção em 05/09/2026. */ /* ⚠️⚠️ ESTAS DUAS REGRAS SÃO ESPECÍFICAS DE PROPÓSITO, e a razão é medida. O seletor de idioma é um `