/* NOVO VISUAL (29/10/2026). As 12 propostas da pagina "Novo visual da GoSeek", aprovadas pelo Luis
   ("avance e faca tudo"). Esta folha entra por ultimo em toda pagina e manda sobre as outras.
   Volta: o comando rollbacksite devolve o HTML de antes, que nao chama esta folha.
   Medidas: letra 12/14/16/18/20/24/40/64, espacos em multiplos de 8, cantos 6/8/12/pilula, 3 sombras. */
:root{
  --respiro:clamp(20px,5vw,80px);
  --maxw:calc(1200px + 2 * var(--respiro));
  --r:12px;--r-sm:8px;
  --sec-y:clamp(64px,7.4vw,112px);
  --sombra-1:0 1px 2px rgba(16,27,75,.06);
  --sombra-2:0 1px 2px rgba(16,27,75,.05),0 14px 34px -20px rgba(16,27,75,.32);
  --sombra-3:0 30px 70px -30px rgba(11,18,32,.45),0 2px 6px rgba(11,18,32,.06);
  --fonte:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --leitura:680px;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-theme="daltonico"]){--sombra-2:0 1px 2px rgba(0,0,0,.5),0 16px 40px -22px rgba(0,0,0,.9)}}
:root[data-theme="dark"]{--sombra-2:0 1px 2px rgba(0,0,0,.5),0 16px 40px -22px rgba(0,0,0,.9)}

/* 02. Uma familia de letra, algarismos de mesma largura nos numeros */
html body{font-family:var(--fonte);font-size:16px;line-height:1.55;letter-spacing:0}
html .a-numeros b,html .pl-tab,html .pl-col-nome,html [data-fixo],html .tabela-artigo td{font-variant-numeric:tabular-nums}

/* 01 e 03. Largura, ritmo e escala de titulo */
html .sec,html main>section.sec:not(.a-numeros):not(.pl-sec){padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
html .sec-tit{max-width:720px;gap:16px;margin-bottom:clamp(32px,4vw,56px)}
html .sec-tit h2{font-size:clamp(28px,3.1vw,40px);font-weight:600;letter-spacing:-.022em;line-height:1.1}
html .sec-tit p{font-size:clamp(16px,1.3vw,18px);line-height:1.6;max-width:62ch}
html .olho{font-size:14px;font-weight:600;letter-spacing:0}
html .abertura h1{font-size:clamp(34px,4vw,52px);letter-spacing:-.026em;line-height:1.06;font-weight:700}
html .abertura#inicio h1{font-size:clamp(38px,4.6vw,64px);letter-spacing:-.03em;line-height:1.04}
html .chamada{font-size:clamp(17px,1.4vw,20px);line-height:1.55}
html .prosa p,html .dupla p{max-width:68ch}
html .fechamento h2{font-size:clamp(28px,3vw,40px);letter-spacing:-.022em;line-height:1.1}
html .fechamento p{font-size:18px}

/* botoes: 44 px de altura, um cheio e um contornado */
html .btn{min-height:44px;font-size:15px;font-weight:600;padding:11px 22px;transition:background .15s ease,transform .1s ease-out}
html .btn:active{transform:scale(.97)}
html .topo .btn{min-height:40px;padding:9px 18px;font-size:14px}
.btn.btn-sec{background:transparent;color:var(--tinta);border:1px solid var(--borda-forte)}
.btn.btn-sec:hover{background:var(--superficie-alta);color:var(--tinta)}

/* 07. Um cartao so, com letra de leitura */
html .painel-cartao{padding:28px;gap:12px;border-radius:var(--r);box-shadow:none}
html .painel-cartao h3{font-size:20px;font-weight:600;letter-spacing:-.008em;line-height:1.3}
html .painel-cartao p{font-size:16px;line-height:1.55}
html .painel-cartao .ic{width:24px;height:24px;margin-bottom:8px}
html .painel-cartao.alvo:hover{transform:translateY(-2px);box-shadow:var(--sombra-2);border-color:var(--borda-forte)}
html .a-passo h3,html .tres h3{font-size:20px;font-weight:600;letter-spacing:-.008em}
html .a-passo p{font-size:16px;line-height:1.55}
html .tres{gap:20px}
html .duvidas summary{font-size:18px;padding:20px 0}
html .duvidas .resp{font-size:16px;line-height:1.65}

/* 06. Faixa de numeros em cinza, com divisorias finas e o azul so no numero */
html .sec.a-numeros,html main:has(>section.a-numeros:first-of-type)>section.sec.a-numeros:nth-of-type(n){background:var(--azul-claro);padding-top:clamp(40px,4.4vw,64px);padding-bottom:clamp(40px,4.4vw,64px);border:0}
html main .sec.a-numeros span{color:var(--tinta-3);font-size:14px;line-height:1.4}
html main .sec.a-numeros b{color:var(--acao-tinta);font-size:clamp(32px,3.2vw,44px);letter-spacing:-.025em;line-height:1}
html .a-numeros .a-tres{gap:0}
html .a-numeros .a-tres>div{padding:0 clamp(16px,2.2vw,32px);border-left:1px solid var(--borda)}
html .a-numeros .a-tres>div:first-child{border-left:0;padding-left:0}
@media(max-width:640px){
  html .a-numeros .a-tres{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--borda);border-radius:12px;overflow:hidden}
  html .a-numeros .a-tres>div,html .a-numeros .a-tres>div:first-child{background:var(--superficie);padding:16px;border:0}
  html .sec.a-numeros b{font-size:24px}
  html .sec.a-numeros span{font-size:12.5px}
}

/* 04. Topo: cinco itens, Entrar e o botao */
html .topo-links{gap:2px}
html .topo-links>a,html .topo-g{font-size:15px;font-weight:500}
html .topo-contato.topo-entrar{font-weight:500}

/* 05. Abertura com o produto: sem a orbita, a tela maior e com sombra, dois botoes */
html #inicio .hx-nucleo{display:none}
html #inicio .hx{transform:none}
html #inicio .hx .hx-cartao.hxb-jan{box-shadow:var(--sombra-3)}
html #inicio .hx-acoes{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:4px}
html #inicio .hx-selos{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--tinta-3)}
html #inicio .hx-selos span{display:inline-flex;align-items:center;gap:8px}
html #inicio .hx-selos span::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--acao-fraca);box-shadow:inset 0 0 0 4px var(--acao)}
html #inicio .hx-micro{display:none}

/* 08. Planos: traco cinza no lugar do xis, grupos como titulo */
html .pl-tab-rec svg.pl-x{display:none}
html .pl-tab-rec td:has(> svg.pl-x)::before{content:"";display:inline-block;width:12px;height:2px;border-radius:2px;background:var(--borda-forte);vertical-align:middle}
html .pl-tab-rec svg.pl-v{width:18px;height:18px;padding:3px;border-radius:50%;background:var(--acao-fraca);stroke:var(--acao);stroke-width:2.2}
html .pl-tab-rec tr.pl-grupo-lin th{font-size:14px;font-weight:600;color:var(--tinta);padding-top:24px;padding-bottom:8px}
html .pl-tab-rec tbody th[scope="row"]{font-size:15px;font-weight:400;color:var(--tinta-2)}

/* 09. Aviso de cookies em cartao pequeno no canto; WhatsApp menor */
@media(min-width:641px){
  html .cookies{left:24px;right:auto;bottom:24px;width:min(380px,calc(100vw - 48px));border-radius:14px;padding:16px;box-shadow:var(--sombra-3)}
  html .cookies-in{flex-direction:column;align-items:stretch;gap:12px}
  html .cookies-txt{font-size:13.5px;line-height:1.5}
  html .cookies-acoes{display:flex;flex-wrap:wrap;gap:8px}
}
html .zap{transform:scale(.86);transform-origin:100% 100%;transition:opacity .25s ease,transform .25s ease}
html:not(.passou-abertura) .zap{opacity:0;pointer-events:none}

/* 10. Rodape em quatro colunas */
@media(min-width:961px){html footer .mapa-site{grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:32px}}
html footer .col-mapa{gap:10px}
html footer .col-mapa a,html footer .col-mapa button{font-size:14px}
html footer .col-mapa>b{font-size:14px;margin-bottom:4px}

/* 11. Artigo: indice "Nesta pagina" numa faixa propria a esquerda, o texto e a ilustracao usam o resto */
html body:has(.autor-artigo) main .dupla p{line-height:1.65}
.indice-artigo{display:none}
@media(min-width:1360px){
  html.tem-indice main .faixa,html.tem-indice header.abertura .faixa{padding-left:calc(var(--respiro) + 248px)}
  .indice-artigo{display:flex;flex-direction:column;gap:10px;position:fixed;top:112px;left:max(var(--respiro),calc((100vw - var(--maxw)) / 2 + var(--respiro)));width:208px;max-height:calc(100vh - 160px);overflow:auto;font-size:14px;line-height:1.35;border-left:1px solid var(--borda);padding-left:16px;z-index:5;transition:opacity .2s ease}
  .indice-artigo b{color:var(--tinta);font-weight:600;margin-bottom:4px}
  .indice-artigo a{color:var(--tinta-3);text-decoration:none}
  .indice-artigo a:hover{color:var(--tinta)}
  .indice-artigo a.on{color:var(--acao-tinta);font-weight:500;margin-left:-17px;padding-left:15px;border-left:2px solid var(--acao)}
  .indice-artigo.some{opacity:0;pointer-events:none}
}

/* 12. Celular: barra de acao no pe, topo so com logo e menu */
.barra-pe{display:none}
@media(max-width:640px){
  html .topo .topo-cta{display:none}
  .barra-pe{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:70;padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:color-mix(in srgb,var(--plano) 88%,transparent);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-top:1px solid var(--borda);transform:translateY(110%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .barra-pe .btn{flex:1;min-height:44px;font-size:14.5px;padding:10px 12px}
  html.barra-pe-ligada .barra-pe{transform:none}
  html.barra-pe-ligada .zap{opacity:0;pointer-events:none}
  html.barra-pe-ligada body{padding-bottom:72px}
}
@media(prefers-reduced-transparency:reduce){.barra-pe{background:var(--plano);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){html .btn,.barra-pe,html .zap,.indice-artigo{transition:none}html .painel-cartao.alvo:hover{transform:none}}

/* mapa do site */
.mapa-completo{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:40px 32px}
.mapa-completo .col-mapa{display:flex;flex-direction:column;gap:10px}
.mapa-completo .col-mapa>b{font-size:16px;font-weight:600;color:var(--tinta);margin-bottom:4px}
.mapa-completo .col-mapa a{font-size:15px;color:var(--tinta-2);text-decoration:none}
.mapa-completo .col-mapa a:hover{color:var(--acao-tinta);text-decoration:underline}
.mapa-completo svg{display:none}

/* 01. A grade das 19 secoes na /dossie/: letra de leitura */
html .entrega b{font-size:16px;line-height:1.3}
html .entrega span{font-size:14px;line-height:1.5}
html #conteudo .entregas.arvore .entrega span{font-size:14.5px;line-height:1.5}
html #conteudo .entregas.arvore .entrega b{font-size:16px}
.mapa-completo .par{display:inline}
.mapa-completo .par span,.mapa-completo .par .marca-nome{display:inline;background:none;border:0;padding:0;font-size:inherit;color:inherit;width:auto;height:auto}
.mapa-completo .abre-cookies{all:unset;font-size:15px;color:var(--tinta-2);cursor:pointer}
.mapa-completo .abre-cookies:hover{color:var(--acao-tinta);text-decoration:underline}
.mapa-completo .col-mapa>b a{color:var(--tinta);font-size:16px}

/* LARGURA DA TELA (Luis, 29/10/2026: "explorar mais os limites da direita e esquerda, sem espacos em branco,
   sem aumentar fontes e imagens, rediagramando cada tela por resolucao"). O conteudo acompanha a tela ate 1.760 px;
   as grades ganham colunas conforme a largura, no lugar de esticar o que ja existe. A letra nao muda. */
:root{--respiro:clamp(16px,3.4vw,56px);--maxw:calc(1760px + 2 * var(--respiro))}
html .sec-tit{max-width:min(100%,1040px)}
html .sec-tit p{max-width:86ch}
html .dupla .sec-tit,html .dupla .sec-tit p{max-width:none}
html .prosa p,html .dupla p{max-width:none}
html .chamada,html #inicio .chamada,html .abertura#inicio .chamada{max-width:62ch}
html .dupla{gap:clamp(32px,4vw,96px)}
/* cartoes em grade que preenche a linha: 1 coluna no celular, 2 no tablet, 3 ou 4 no computador, 5 em tela larga */
html .tres,html .tres.quatro{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
@media(min-width:1600px){html .tres.quatro{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* duvidas em duas colunas a partir de 1.100 px, sem a caixa estreita de 920 px */
html .a-faq .faixa{max-width:var(--maxw)}
html .duvidas{max-width:none}
@media(min-width:1100px){
  html .a-faq .duvidas,html main .duvidas:not(.duvidas-grade .duvidas){display:block;columns:2;column-gap:clamp(40px,4vw,80px);border-top:0}
  html main .duvidas details{break-inside:avoid;border-top:1px solid var(--borda);border-bottom:0}
  html .duvidas .resp,html .duvidas details p{max-width:none}
}
/* fechamento azul: titulo e formulario lado a lado na tela larga */
@media(min-width:1100px){
  html .sec.azul:has(.fechamento) .fechamento{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(40px,5vw,112px);row-gap:12px;text-align:left;align-items:center}
  html .sec.azul:has(.fechamento) .fechamento>*{grid-column:1;justify-self:start;margin-inline:0}
  html .sec.azul:has(.fechamento) .fechamento h2{max-width:none}
  html .sec.azul:has(.fechamento) .fechamento .form{grid-column:2;grid-row:1 / span 3;justify-self:stretch;max-width:none;justify-content:flex-start}
  html .sec.azul:has(.fechamento) .fechamento .form-nota,html .sec.azul:has(.fechamento) .fechamento .ok,html .sec.azul:has(.fechamento) .fechamento .erro{grid-column:2;text-align:left}
}
/* tablet: duas colunas onde o computador tem tres ou mais, sem deixar meia tela vazia */
@media(min-width:641px) and (max-width:1099px){html .dupla{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}}
@media(max-width:640px){html .dupla{grid-template-columns:minmax(0,1fr)}}
/* tela muito larga: o rodape e o topo acompanham */
@media(min-width:1600px){html footer .mapa-site{grid-template-columns:minmax(0,1.2fr) repeat(4,minmax(0,1fr))}}
/* rodape: as regras antigas posicionam cada coluna pela ordem (nth-child) para 6 colunas; com 4 colunas a posicao
   fixa deixava uma coluna sozinha embaixo entre 700 e 1.399 px. O !important so zera essa posicao antiga. */
@media(min-width:641px){
  html body footer .rodape-a .mapa-site{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 32px;justify-content:stretch}
  html body footer .rodape-a .mapa-site>div{grid-row:auto!important;grid-column:auto!important}
  html body footer .rodape-a .mapa-site>.col-marca{grid-column:1 / -1!important}
}
@media(min-width:1100px){
  html body footer .rodape-a .mapa-site{grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr))}
  html body footer .rodape-a .mapa-site>.col-marca{grid-column:auto!important}
}
/* passos e listas de tres: lado a lado tambem no tablet */
html .a-tres:not(.a-numeros .a-tres){grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
/* home, prioridade: texto e carteira lado a lado na tela larga, sem meia tela vazia */
@media(min-width:1280px){
  html .hp-prioridade>.faixa{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:clamp(40px,5vw,96px);align-items:center}
  html .hp-prioridade>.faixa>.sec-tit{margin-bottom:0}
}
/* paragrafos dentro do bloco de titulo acompanham a coluna (o bloco ja tem o seu limite) */
html .sec-tit p{max-width:none}
html .sobre-quem .sec-tit{max-width:none}
/* sobre: os dois fundadores lado a lado a partir de 1.400 px */
@media(min-width:1400px){
  html .sec:has(.sobre-quem)>.faixa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(48px,4vw,96px);align-items:start}
  html .sec:has(.sobre-quem)>.faixa>.sobre-tit{grid-column:1 / -1}
  html .sobre-quem-2{margin-top:0}
}

/* ABERTURA, FORMULARIO (Luis, 29/10/2026: "nao esta bom, rediagramar"). O campo e o botao principal viram uma peca so,
   com a mesma altura e uma borda; Agendar demonstracao vira link de acao logo abaixo, alinhado a esquerda, e os selos
   fecham a linha. No celular o botao desce para baixo do campo, na largura toda. */
html #inicio .form,html .sec.azul .fechamento .form{display:flex;align-items:center;gap:6px;width:100%;max-width:600px;margin:0;padding:6px;border:1px solid var(--borda-forte);border-radius:12px;background:var(--superficie);box-shadow:var(--sombra-1);transition:border-color .15s ease,box-shadow .15s ease}
html #inicio .form:focus-within,html .sec.azul .fechamento .form:focus-within{border-color:var(--acao);box-shadow:0 0 0 3px var(--acao-fraca)}
html #inicio .form input[type="email"],html .sec.azul .fechamento .form input[type="email"]{flex:1 1 auto;min-width:0;height:48px;margin:0;padding:0 12px;border:0;border-radius:8px;background:transparent;box-shadow:none;outline:none;color:var(--tinta);font-size:16px}
html #inicio .form input[type="email"]::placeholder,html .sec.azul .fechamento .form input[type="email"]::placeholder{color:var(--tinta-3)}
html #inicio .form input[type="email"]:focus,html #inicio .form input[type="email"]:focus-visible,html .sec.azul .fechamento .form input[type="email"]:focus,html .sec.azul .fechamento .form input[type="email"]:focus-visible{border:0;box-shadow:none;outline:none}
html #inicio .form .btn,html .sec.azul .fechamento .form .btn{flex:0 0 auto;height:48px;min-height:48px;margin:0;padding:0 22px;border-radius:8px;font-size:15px;font-weight:600;white-space:nowrap}
html #inicio .hx-acoes{margin-top:18px;gap:14px}
html #inicio .hx-acoes .btn.btn-sec{min-height:0;height:auto;padding:0;border:0;border-radius:0;background:none;color:var(--acao-tinta);font-size:15px;font-weight:600;gap:6px}
html #inicio .hx-acoes .btn.btn-sec::after{content:"\2192";transition:transform .15s ease-out}
html #inicio .hx-acoes .btn.btn-sec:hover{background:none;text-decoration:underline;text-underline-offset:3px}
html #inicio .hx-acoes .btn.btn-sec:hover::after{transform:translateX(3px)}
@media(max-width:560px){
  html #inicio .form,html .sec.azul .fechamento .form{flex-direction:column;align-items:stretch;padding:6px}
  html #inicio .form .btn,html .sec.azul .fechamento .form .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){html #inicio .hx-acoes .btn.btn-sec::after{transition:none}html #inicio .hx-acoes .btn.btn-sec:hover::after{transform:none}}

/* FIM DE PAGINA, VIDEO (Luis, 29/10/2026: "nao esta bom, rediagramar"). Coluna da esquerda: titulo, apoio e o campo do
   e-mail, centrados na altura do video; coluna da direita: o video com a legenda logo abaixo, na mesma borda. */
html .sec.azul .fechamento.fech-demo{text-align:left;align-items:flex-start}
html .sec.azul .fechamento.fech-demo .form{max-width:560px;justify-content:flex-start}
html .sec.azul .fechamento.fech-demo .demo-video{width:100%;margin:8px 0 0}
html .sec.azul .fechamento.fech-demo figcaption{margin:14px 0 0;max-width:none;text-align:left;font-size:14px;line-height:1.5;color:var(--tinta-a3,var(--tinta-3))}
@media(min-width:1100px){
  html .sec.azul:has(.fechamento) .fechamento.fech-demo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-auto-rows:auto;column-gap:clamp(48px,5vw,112px);row-gap:16px;align-content:center;align-items:start}
  html .sec.azul:has(.fechamento) .fechamento.fech-demo>*{grid-column:1;justify-self:stretch;margin:0}
  html .sec.azul:has(.fechamento) .fechamento.fech-demo>h2{align-self:end}
  html .sec.azul:has(.fechamento) .fechamento.fech-demo>.form{grid-column:1;grid-row:auto;justify-self:start;width:100%;margin-top:8px}
  html .sec.azul:has(.fechamento) .fechamento.fech-demo>.ok,html .sec.azul:has(.fechamento) .fechamento.fech-demo>.erro{grid-column:1}
  html .sec.azul:has(.fechamento) .fechamento.fech-demo>.demo-video{grid-column:2;grid-row:1 / span 6;align-self:center;margin:0}
}
html .sec.azul:has(.fech-demo) .fechamento.fech-demo{max-width:none;width:100%}
html .sec.azul:has(.fech-demo) .fechamento.fech-demo h2{white-space:normal;max-width:20ch;text-wrap:balance}
html .sec.azul:has(.fech-demo) .fechamento.fech-demo .demo-video{display:flex;flex-direction:column;align-items:stretch}
html .sec.azul:has(.fech-demo) .fechamento.fech-demo figcaption{width:auto;align-self:stretch}
html .sec.azul:has(.fech-demo) .fechamento.fech-demo figcaption{white-space:normal;overflow-wrap:anywhere}

/* SEM REPETICAO (29/10/2026): secao cuja ilustracao so repetia o paragrafo perdeu a ilustracao (sem_repeticao.py) e
   vira titulo a esquerda e texto a direita. No celular e no tablet, um embaixo do outro. */
html .dupla.dupla-texto{grid-template-columns:minmax(0,1fr)}
html .dupla.dupla-texto>.sec-tit{max-width:none}
@media(min-width:1100px){
  html .dupla.dupla-texto>.sec-tit{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(40px,5vw,112px);row-gap:0;align-items:start}
  html .dupla.dupla-texto>.sec-tit>*:not(h2):not(.olho){margin:0 0 16px}
  html .dupla.dupla-texto>.sec-tit>*{grid-column:2}
  html .dupla.dupla-texto>.sec-tit>h2,html .dupla.dupla-texto>.sec-tit>.olho{grid-column:1}
  html .dupla.dupla-texto>.sec-tit>h2{grid-row:1 / span 20;align-self:start;position:sticky;top:96px}
  html .dupla.dupla-texto>.sec-tit>.olho+h2{grid-row:2 / span 20}
}

/* INDICE DO ARTIGO (Luis, 29/10/2026: "nao pode ter fundo transparente, tem de ter um fundo fixo"): cartao solido
   com borda e sombra, como toda janela do site; o marcador da secao em leitura fica dentro do cartao. */
@media(min-width:1360px){
  .indice-artigo{background:var(--superficie);border:1px solid var(--borda);border-left:1px solid var(--borda);border-radius:12px;padding:16px 16px 16px 18px;box-shadow:var(--sombra-2);gap:8px}
  .indice-artigo a.on{margin-left:-19px;padding-left:17px}
}

/* TITULO A ESQUERDA, APOIO A DIREITA (Luis, 29/10/2026: "olha como nao esta legal este monte de espaco em branco a
   direita"). Em toda secao, o bloco de titulo deixava a metade direita vazia. A partir de 1.100 px o titulo fica na
   coluna da esquerda e o texto de apoio na da direita; a abertura das paginas internas segue o mesmo desenho, com a
   chamada a direita. row-gap 0 porque o titulo ocupa varias linhas da grade, e linha vazia com gap viraria vao. */
@media(min-width:1100px){
  html .sec>.faixa>.sec-tit,html .sec>.faixa>div:not([class])>.sec-tit{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(40px,5vw,112px);row-gap:0;max-width:none!important;align-items:start}
  html .sec>.faixa>.sec-tit>*,html .sec>.faixa>div:not([class])>.sec-tit>*{grid-column:2;margin:0 0 14px}
  html .sec>.faixa>.sec-tit>*:last-child,html .sec>.faixa>div:not([class])>.sec-tit>*:last-child{margin-bottom:0}
  html .sec>.faixa>.sec-tit>.olho,html .sec>.faixa>div:not([class])>.sec-tit>.olho{grid-column:1;grid-row:1;margin:0 0 12px}
  html .sec>.faixa>.sec-tit>h2,html .sec>.faixa>div:not([class])>.sec-tit>h2{grid-column:1;grid-row:1 / span 8;margin:0}
  html .sec>.faixa>.sec-tit>.olho~h2,html .sec>.faixa>div:not([class])>.sec-tit>.olho~h2{grid-row:2 / span 8}
  html body:not(:has(.autor-artigo)) header.abertura.capa-a>.faixa.capa-a-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:clamp(40px,5vw,112px);row-gap:0;align-items:end}
  html body:not(:has(.autor-artigo)) header.abertura.capa-a>.faixa.capa-a-in>*{grid-column:1}
  html body:not(:has(.autor-artigo)) header.abertura.capa-a>.faixa.capa-a-in>.trilha{grid-column:1 / -1}
  html body:not(:has(.autor-artigo)) header.abertura.capa-a>.faixa.capa-a-in>.chamada{grid-column:2;grid-row:2 / span 3;align-self:end;max-width:none;margin:0}
  html body:not(:has(.autor-artigo)) header.abertura.capa-a>.faixa.capa-a-in>h1{max-width:none}
}
/* o max-width:none!important acima vence o style="max-width:64ch" escrito na pagina, que deixava a direita vazia */
/* concorrentes: fundo branco nas 9 colunas, a da GoSeek segue azul claro */
html .matriz tbody td:not(.gs){background:var(--superficie)}

/* DUVIDAS EM GRUPOS (29/10/2026): 25 perguntas em 5 grupos na /duvidas/. O nome do grupo fica na coluna da esquerda e
   as perguntas na da direita, uma coluna so, para o grupo se ler de cima para baixo. */
.duvidas-grupos{display:flex;flex-direction:column}
.duvidas-grupo{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 0;padding:28px 0;border-top:1px solid var(--borda)}
.duvidas-grupo:first-child{border-top:0;padding-top:0}
.duvidas-grupo>h3{margin:0;font-size:20px;font-weight:600;letter-spacing:-.008em;color:var(--tinta)}
html main .duvidas-grupos .duvidas-grupo .duvidas{columns:auto;display:flex;flex-direction:column;border-top:0}
html main .duvidas-grupo .duvidas details{border-top:0;border-bottom:1px solid var(--borda)}
html main .duvidas-grupo .duvidas details:first-child summary{padding-top:4px}
@media(min-width:1100px){
  .duvidas-grupo{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(40px,5vw,112px);padding:40px 0}
  .duvidas-grupo>h3{position:sticky;top:96px;align-self:start;padding-top:4px}
}

/* CODIGO EM SEIS CAIXAS (29/10/2026): uma caixa por numero; o botao de enviar some enquanto o codigo e pedido, porque
   o pedido segue sozinho ao completar o sexto numero (js/script.js, goseekCodigo). */
.codigo-caixas{display:flex;gap:8px;margin-top:2px}
.codigo-caixa{width:48px;height:56px;padding:0;border:1px solid var(--borda-forte);border-radius:10px;background:var(--superficie);color:var(--tinta);font:600 24px/1 var(--fonte);font-variant-numeric:tabular-nums;text-align:center;caret-color:var(--acao);transition:border-color .12s ease,box-shadow .12s ease}
.codigo-caixa:focus{outline:none;border-color:var(--acao);box-shadow:0 0 0 3px var(--acao-fraca)}
.codigo-caixa[aria-invalid="true"]{border-color:var(--critico)}
@media(max-width:380px){.codigo-caixas{gap:6px}.codigo-caixa{width:42px;height:50px;font-size:22px}}
form.codigo-aberto button[type="submit"],form.codigo-aberto .saida-enviar{display:none}

/* ABERTURA, BOTAO DA APRESENTACAO (Luis, 29/10/2026: "ficou horrivel este botao acima do titulo, coloque abaixo do
   titulo, menor, no padrao de um botao"): na grade da abertura o botao vem depois do titulo, na largura do texto. */
@media(min-width:1100px){
  html body:not(:has(.autor-artigo)) header.abertura.capa-a>.faixa.capa-a-in>h1{grid-row:2}
  html body:not(:has(.autor-artigo)) header.abertura.capa-a>.faixa.capa-a-in>a.btn{grid-row:3;justify-self:start;align-self:start;margin-top:24px;position:static;order:0;width:auto}
}
html header.abertura.capa-a>.faixa.capa-a-in>a.btn{width:auto;min-height:40px;padding:9px 18px;font-size:14px;gap:8px}

/* LEGENDA DO VIDEO (Luis, 29/10/2026: "nao esta dando para ler de forma nitida, esta muito escuro"): o bloco do video e
   sempre escuro, nos dois temas; a legenda vai em branco a 86%, 15 px. */
html .sec.azul:has(.fech-demo) .fechamento.fech-demo figcaption{color:rgba(255,255,255,.86);font-size:15px;line-height:1.55}
html .sec.azul:has(.fech-demo) .fechamento.fech-demo figcaption .marca-nome{color:#fff}
html .sec.azul:has(.fech-demo) .fechamento.fech-demo figcaption .marca-nome i{color:#9db8ff}

/* ABERTURA, AREA DE ACAO (Luis, 29/10/2026: "o e-mail e o botao muito grudados no texto acima; o link e as 3
   informacoes ainda nao estao legais, repense"). Tres andares com folga propria: o campo com o botao, 32 px abaixo do
   texto; as garantias logo embaixo, com um visto (e nao um circulo, que lia como opcao de formulario), em letra menor;
   e, separado por uma linha fina, "Prefere conversar? Agendar demonstracao", para o segundo caminho ter contexto. */
html #inicio .form{margin-top:32px}
html #inicio .hx-acoes{margin-top:0;gap:0;width:100%;max-width:600px}
html #inicio .hx-selos{order:1;margin-top:14px;gap:6px 18px;font-size:13.5px;color:var(--tinta-3)}
html #inicio .hx-selos span{gap:6px}
html #inicio .hx-selos span::before{width:14px;height:14px;border-radius:0;box-shadow:none;background:var(--acao);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
html #inicio .hx-conversa{order:2;margin:24px 0 0;padding-top:18px;border-top:1px solid var(--borda);font-size:15px;color:var(--tinta-2);max-width:none}
html #inicio .hx-conversa a{color:var(--acao-tinta);font-weight:600;text-decoration:none;white-space:nowrap}
html #inicio .hx-conversa a::after{content:" \2192";display:inline-block;transition:transform .15s ease-out}
html #inicio .hx-conversa a:hover{text-decoration:underline;text-underline-offset:3px}
html #inicio .hx-conversa a:hover::after{transform:translateX(3px)}
@media(max-width:560px){html #inicio .form{margin-top:24px}html #inicio .hx-conversa{margin-top:20px}}
@media(prefers-reduced-motion:reduce){html #inicio .hx-conversa a::after{transition:none}html #inicio .hx-conversa a:hover::after{transform:none}}

/* TITULO E APOIO NA MESMA LINHA (Luis, 29/10/2026: "ficou desconexo, ajuste estruturalmente"). Com rotulo (.olho)
   acima do titulo, o rotulo ocupava so a coluna da esquerda: o texto da direita subia para a altura do rotulo e o
   titulo descia uma linha. Agora o rotulo atravessa as duas colunas, titulo e texto comecam juntos na linha seguinte,
   e o texto desce o que falta para a primeira linha dele ficar na altura da primeira linha do titulo. O titulo nao
   acompanha mais a rolagem. Vale para as secoes, para as que perderam a ilustracao e para os grupos de duvidas. */
@media(min-width:1100px){
  html .sec>.faixa>.sec-tit>.olho,html .sec>.faixa>div:not([class])>.sec-tit>.olho,html .dupla.dupla-texto>.sec-tit>.olho{grid-column:1 / -1;grid-row:1;margin:0 0 14px}
  html .sec>.faixa>.sec-tit>.olho~h2,html .sec>.faixa>div:not([class])>.sec-tit>.olho~h2,html .dupla.dupla-texto>.sec-tit>.olho~h2{grid-row:2 / span 8}
  html .sec>.faixa>.sec-tit>h2+*,html .sec>.faixa>div:not([class])>.sec-tit>h2+*,html .dupla.dupla-texto>.sec-tit>h2+*{margin-top:.45em}
  html .dupla.dupla-texto>.sec-tit>h2,.duvidas-grupo>h3{position:static}
}

/* o rotulo escondido (display:none, como na home) nao ocupa linha na grade, e o texto subia para a primeira linha:
   com rotulo antes do titulo, cada peca do texto de apoio ganha a linha dela, a partir da linha do titulo */
@media(min-width:1100px){
  html .sec>.faixa>.sec-tit>.olho:first-child+h2~*:nth-child(3),html .sec>.faixa>div:not([class])>.sec-tit>.olho:first-child+h2~*:nth-child(3),html .dupla.dupla-texto>.sec-tit>.olho:first-child+h2~*:nth-child(3){grid-row:2}
  html .sec>.faixa>.sec-tit>.olho:first-child+h2~*:nth-child(4),html .sec>.faixa>div:not([class])>.sec-tit>.olho:first-child+h2~*:nth-child(4),html .dupla.dupla-texto>.sec-tit>.olho:first-child+h2~*:nth-child(4){grid-row:3}
  html .sec>.faixa>.sec-tit>.olho:first-child+h2~*:nth-child(5),html .sec>.faixa>div:not([class])>.sec-tit>.olho:first-child+h2~*:nth-child(5),html .dupla.dupla-texto>.sec-tit>.olho:first-child+h2~*:nth-child(5){grid-row:4}
  html .sec>.faixa>.sec-tit>.olho:first-child+h2~*:nth-child(6),html .sec>.faixa>div:not([class])>.sec-tit>.olho:first-child+h2~*:nth-child(6),html .dupla.dupla-texto>.sec-tit>.olho:first-child+h2~*:nth-child(6){grid-row:5}
  html .sec>.faixa>.sec-tit>.olho:first-child+h2~*:nth-child(7),html .sec>.faixa>div:not([class])>.sec-tit>.olho:first-child+h2~*:nth-child(7),html .dupla.dupla-texto>.sec-tit>.olho:first-child+h2~*:nth-child(7){grid-row:6}
  html .sec>.faixa>.sec-tit>.olho:first-child+h2~*:nth-child(8),html .sec>.faixa>div:not([class])>.sec-tit>.olho:first-child+h2~*:nth-child(8),html .dupla.dupla-texto>.sec-tit>.olho:first-child+h2~*:nth-child(8){grid-row:7}
  html .sec>.faixa>.sec-tit>.olho:first-child+h2~*:nth-child(9),html .sec>.faixa>div:not([class])>.sec-tit>.olho:first-child+h2~*:nth-child(9),html .dupla.dupla-texto>.sec-tit>.olho:first-child+h2~*:nth-child(9){grid-row:8}
  html .sec>.faixa>.sec-tit>.olho:first-child+h2~*:nth-child(10),html .sec>.faixa>div:not([class])>.sec-tit>.olho:first-child+h2~*:nth-child(10),html .dupla.dupla-texto>.sec-tit>.olho:first-child+h2~*:nth-child(10){grid-row:9}
  html .sec>.faixa>.sec-tit>.olho:first-child+h2~*:nth-child(11),html .sec>.faixa>div:not([class])>.sec-tit>.olho:first-child+h2~*:nth-child(11),html .dupla.dupla-texto>.sec-tit>.olho:first-child+h2~*:nth-child(11){grid-row:10}
}
html #inicio .hx-conversa{align-self:stretch}
html #inicio .hx-conversa a::after{margin-left:4px}

/* LEGENDA DO VIDEO ABAIXO DO E-MAIL (Luis, 29/10/2026: "muda para ficar abaixo da digitacao do email e do botao
   assistir ao video"). A figura do video vira so moldura (display:contents): a tela do video fica na coluna da
   direita e a legenda desce para a coluna da esquerda, logo depois do formulario. No celular: titulo, apoio,
   formulario, legenda e video. */
html .sec.azul:has(.fech-demo) .fechamento.fech-demo>.demo-video{display:contents}
html .sec.azul:has(.fech-demo) .fechamento.fech-demo>.ok,html .sec.azul:has(.fech-demo) .fechamento.fech-demo>.erro{order:3}
html .sec.azul:has(.fech-demo) .fechamento.fech-demo figcaption{order:4;margin:16px 0 0;max-width:560px}
html .sec.azul:has(.fech-demo) .fechamento.fech-demo .demo-tela{order:5;margin-top:24px;width:100%}
@media(min-width:1100px){
  html .sec.azul:has(.fech-demo) .fechamento.fech-demo figcaption{grid-column:1;margin:4px 0 0}
  html .sec.azul:has(.fech-demo) .fechamento.fech-demo .demo-tela{grid-column:2;grid-row:1 / span 7;align-self:center;margin:0}
}

/* ABERTURA DAS INTERNAS, CHAMADA NA ALTURA DO TITULO (Luis, 29/10/2026: "centralize na altura, conforme o titulo da
   esquerda, de forma estrutural"): a chamada divide a linha com o h1 e fica centrada na altura dele; o botao e o resto
   descem abaixo do titulo, na coluna da esquerda. */
@media(min-width:1100px){
  html body:not(:has(.autor-artigo)) header.abertura.capa-a>.faixa.capa-a-in{align-items:start}
  html body:not(:has(.autor-artigo)) header.abertura.capa-a>.faixa.capa-a-in>.chamada{grid-row:2;align-self:center}
}
/* titulo comprido (Planos): as quebras fixas da abertura forcavam linhas mais largas que a coluna e invadiam a da
   direita; na grade o titulo e a chamada quebram pela largura da propria coluna */
@media(min-width:1100px){
  html body:not(:has(.autor-artigo)) header.abertura.capa-a>.faixa.capa-a-in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  html body:not(:has(.autor-artigo)) header.abertura.capa-a>.faixa.capa-a-in>h1,html body:not(:has(.autor-artigo)) header.abertura.capa-a>.faixa.capa-a-in>.chamada{white-space:normal;overflow-wrap:break-word;min-width:0}
  html body:not(:has(.autor-artigo)) header.abertura.capa-a>.faixa.capa-a-in>.chamada br{display:none}
}
@media(min-width:1100px){
  html body:not(:has(.autor-artigo)) header.abertura.capa-a>.faixa.capa-a-in>.chamada .pc-lc,html body:not(:has(.autor-artigo)) header.abertura.capa-a>.faixa.capa-a-in>h1 .pc-l{white-space:normal}
  html body:not(:has(.autor-artigo)) header.abertura.capa-a>.faixa.capa-a-in>.chamada .pc-lc{display:inline}
  html body:not(:has(.autor-artigo)) header.abertura.capa-a>.faixa.capa-a-in>h1:has(br.q2),html body:not(:has(.autor-artigo)) header.abertura.capa-a>.faixa.capa-a-in>.chamada:has(br.q2){white-space:normal}
}

/* Planos: as duas linhas da chamada viram um paragrafo so na grade; o espaco entre elas nao pode sumir */
@media(min-width:1100px){html body:not(:has(.autor-artigo)) header.abertura.capa-a>.faixa.capa-a-in>.chamada .pc-lc+.pc-lc::before{content:" "}}

/* COMPARACOES, LEGENDA E NOTA DA TABELA (Luis, 29/10/2026: "nao ta legal, olha quanto espaco em branco a direita"):
   abaixo da tabela, uma faixa na largura dela, separada por um filete: a legenda empilhada a esquerda e a nota de
   fonte a direita, ocupando o resto da linha. No celular, uma embaixo da outra. */
@media(min-width:900px){
  html .faixa:has(>.matriz-rola){display:grid;grid-template-columns:minmax(220px,max-content) minmax(0,1fr);column-gap:clamp(32px,4vw,80px)}
  html .faixa:has(>.matriz-rola)>*{grid-column:1 / -1}
  html .faixa:has(>.matriz-rola)>.matriz-rola{width:100%}
  html .faixa:has(>.matriz-rola)>.matriz-legenda{grid-column:1;flex-direction:column;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid var(--borda)}
  html .faixa:has(>.matriz-rola)>.matriz-nota{grid-column:2;margin-top:24px;padding-top:20px;border-top:1px solid var(--borda);max-width:none}
}
html .matriz-legenda{font-size:14px}
html .matriz-nota{font-size:14px;line-height:1.6;color:var(--tinta-2)}

/* PERGUNTAS FREQUENTES NAS PAGINAS (Luis, 29/10/2026: "ta estranho, rediagramar de forma estrutural"). O mesmo
   desenho das outras secoes: rotulo e titulo na coluna da esquerda, as perguntas numa coluna so a direita, cada uma
   numa linha com o sinal de abrir alinhado ao meio do texto. Revoga as duas colunas de perguntas de antes. */
html .duvidas summary{display:block;position:relative;padding:18px 40px 18px 0;line-height:1.4}
html .duvidas summary::after{position:absolute;right:4px;top:50%;transform:translateY(-50%);margin:0;line-height:1}
html .duvidas details:first-child summary{padding-top:18px}
@media(min-width:1100px){
  html .faixa:has(>.duvidas){display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(40px,5vw,112px);align-items:start}
  html .faixa:has(>.duvidas)>.sec-tit{grid-column:1;display:flex;flex-direction:column;gap:12px;max-width:none!important;margin:0}
  html .faixa:has(>.duvidas)>.sec-tit>*{grid-column:auto;grid-row:auto;margin:0}
  html main .faixa:has(>.duvidas)>.duvidas{grid-column:2;display:flex;flex-direction:column;columns:auto;border-top:1px solid var(--borda)}
  html main .faixa:has(>.duvidas)>.duvidas details{border-top:0;border-bottom:1px solid var(--borda)}
  html .faixa:has(>.duvidas)>*:not(.sec-tit):not(.duvidas){grid-column:1 / -1}
}
html .duvidas .resp{padding-bottom:20px}

/* LINK NO TEXTO (Luis, 29/10/2026: "evite usar links nos textos, mas se for necessario, colocar em negrito e azul, de
   forma padrao e estrutural"). Todo link dentro de texto corrido (paragrafo, item de lista, resposta, legenda, nota,
   celula de tabela) sai em negrito e no azul da marca, sem sublinhado; o sublinhado so aparece ao passar o mouse.
   Botao, cartao e menu nao entram. No bloco escuro, o azul claro da marca. */
html :is(main,header.abertura) :is(p:not(.trilha),li,td,figcaption,.resp,.matriz-nota) a:not(.btn):not([class*="cartao"]):not(.ok-zap){color:var(--acao-tinta);font-weight:600;text-decoration:none}
html :is(main,header.abertura) :is(p:not(.trilha),li,td,figcaption,.resp,.matriz-nota) a:not(.btn):not([class*="cartao"]):not(.ok-zap):hover{text-decoration:underline;text-underline-offset:3px}
html main .sec.azul :is(p,li,figcaption) a:not(.btn):not(.ok-zap){color:#9db8ff}

/* AVISO DE COOKIES (Luis, 29/10/2026: "nao ficou bom, antes estava melhor, repense e rediagrame"). Revoga o cartao no
   canto: volta a faixa baixa que flutua no pe da tela, agora na largura do conteudo, com o texto a esquerda e os tres
   botoes numa linha a direita, da mesma altura, Aceitar por ultimo. No celular, texto curto em cima e os botoes numa
   linha embaixo. */
html .cookies{left:50%;right:auto;bottom:max(16px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(1120px,calc(100vw - 32px));height:auto;min-height:0;max-height:none;padding:14px 16px 14px 24px;border:1px solid var(--borda);border-radius:14px;background:var(--superficie);box-shadow:var(--sombra-3)}
html .cookies-in{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:16px 28px;max-width:none;margin:0;height:auto;min-height:0}
html .cookies-txt{flex:1 1 auto;margin:0;font-size:14px;line-height:1.5;color:var(--tinta-2)}
html .cookies-acoes{flex:0 0 auto;display:flex;flex-wrap:nowrap;align-items:center;gap:8px;margin:0}
html .cookies-acoes button{min-height:40px;height:40px;padding:0 16px;font-size:14px;border-radius:10px;white-space:nowrap}
@media(max-width:760px){
  html .cookies{padding:14px 14px 12px}
  html .cookies-in{flex-direction:column;align-items:stretch;gap:12px}
  html .cookies-acoes{display:grid;grid-template-columns:1fr 1fr 1fr}
  html .cookies-acoes button{padding:0 8px}
}
@media(min-width:761px){
  html .cookies-in{flex-wrap:nowrap}
  html .cookies-txt{flex:1 1 0;min-width:0}
}
html .cookies-txt a{color:var(--acao-tinta);font-weight:600;text-decoration:none}
html .cookies-txt a:hover{text-decoration:underline;text-underline-offset:3px}

/* SEM BOTAO VERDE (Luis, 29/10/2026: "nao precisa do botao verde, confirma codigo"). As seis caixas ja enviam o
   codigo sozinhas; o botao que o vigia do js/script.js marca como .botao-codigo ("Confirmar codigo") nao aparece em
   nenhum momento, nem enquanto a proposta, o PDF ou o video sao preparados depois do codigo certo. */
html button.botao-codigo{display:none!important}

/* WHATSAPP DESDE A ENTRADA (Luis, 29/10/2026: "esta demorando para entrar, ja coloca direto, assim q entrar no site"):
   revoga o "so depois da primeira tela"; o botao flutuante aparece com a pagina. No celular ele ainda sai quando a
   barra do pe esta a mostra, para nao haver dois botoes flutuando. */
html:not(.passou-abertura) .zap{opacity:1;pointer-events:auto}

/* TOPO, TRES BOTOES (Luis, 29/10/2026): na ordem Diagnostico (azul cheio), Demonstracao (contornado no azul da marca,
   abre a janela de agendamento) e Entrar (branco, com filete). Os tres na mesma altura. No celular a barra do pe ja
   tem Diagnostico e Demonstracao; o topo fica com o logo, o Entrar e o menu. */
html .topo-in>.topo-cta{order:10}
html .topo-in>.topo-demo{order:11}
html .topo-in>.topo-entrar{order:12}
html .topo-in>.btn-menu{order:13}
html .topo .topo-demo{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 18px;font-size:14px;font-weight:600;border-radius:99px;background:transparent;color:var(--acao-tinta);border:1.5px solid var(--acao);text-decoration:none;white-space:nowrap;margin-left:10px}
html .topo .topo-demo:hover{background:var(--acao-fraca)}
html .topo .topo-contato.topo-entrar{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 18px;font-size:14px;font-weight:600;border-radius:99px;background:var(--superficie);color:var(--tinta);border:1px solid var(--borda-forte);text-decoration:none;white-space:nowrap;margin-left:10px}
html .topo .topo-contato.topo-entrar:hover{background:var(--superficie-alta)}
@media(max-width:640px){html .topo .topo-demo{display:none}html .topo .topo-contato.topo-entrar{min-height:36px;padding:6px 14px;margin-left:6px}}
html .topo .btn.topo-cta{border-radius:99px}
/* Cartoes de Blog, Comparacoes e Segmentos: um tamanho so de titulo e texto (29/10/2026, lista 239) */
html main a.artigo h2{font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
html main a.artigo h2 .pos,html main a.artigo h2 .seg{font-size:inherit;line-height:inherit;letter-spacing:inherit}
html main a.artigo h2 .seg{font-weight:600}
html main a.artigo p{font-size:14px;line-height:1.5}
html main a.artigo .editoria{font-size:12px;font-weight:600}