/* PADRAO APPLE (01/11/2026). As 12 propostas da pagina "Site GoSeek no padrao Apple", aprovadas pelo Luis
   ("aprovo tudo, avance"). Esta folha entra depois da visual.css em toda pagina e manda sobre ela.
   Volta: tirar o <link> desta folha das paginas (lista em apple-11-01/voltar).
   Fonte: Apple Design Resources e Human Interface Guidelines, traduzidos para a web. A SF Pro e os SF Symbols nao
   podem ser servidos no site (licenca): a letra vem do sistema, e a IBM Plex Sans fica de reserva. */

/* 01 e 08. Letra do sistema e cinzas da Apple; o azul segue o do logo */
:root{
  --fonte:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","IBM Plex Sans",Arial,sans-serif;
  --tinta:#1d1d1f;--tinta-2:#424245;--tinta-3:#6e6e73;
  --plano:#ffffff;--superficie:#ffffff;--superficie-alta:#f5f5f7;--casca:#f5f5f7;--azul-claro:#f5f5f7;
  --borda:rgba(0,0,0,.1);--borda-forte:rgba(0,0,0,.2);--linha-a:#e8e8ed;
  --r:22px;--r-sm:14px;
  --vidro:rgba(255,255,255,.62);--vidro-borda:rgba(255,255,255,.85);--vidro-sombra:0 8px 24px -10px rgba(0,0,0,.22);
  --entre:#ffffff;--fundo-branco:#ffffff;--fundo-cinza:#f5f5f7;
}
/* 12. Tema escuro em preto e grafite */
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-theme="daltonico"]){
  --tinta:#f5f5f7;--tinta-2:#d2d2d7;--tinta-3:#a1a1a6;
  --plano:#000000;--superficie:#1c1c1e;--superficie-alta:#1c1c1e;--casca:#000000;--azul-claro:#1c1c1e;
  --borda:rgba(255,255,255,.12);--borda-forte:rgba(255,255,255,.24);--linha-a:#2c2c2e;
  --vidro:rgba(28,28,30,.62);--vidro-borda:rgba(255,255,255,.14);--vidro-sombra:0 8px 24px -10px rgba(0,0,0,.7);--entre:#000000;--fundo-branco:#000000;--fundo-cinza:#1c1c1e}}
:root[data-theme="dark"]{
  --tinta:#f5f5f7;--tinta-2:#d2d2d7;--tinta-3:#a1a1a6;
  --plano:#000000;--superficie:#1c1c1e;--superficie-alta:#1c1c1e;--casca:#000000;--azul-claro:#1c1c1e;
  --borda:rgba(255,255,255,.12);--borda-forte:rgba(255,255,255,.24);--linha-a:#2c2c2e;
  --vidro:rgba(28,28,30,.62);--vidro-borda:rgba(255,255,255,.14);--vidro-sombra:0 8px 24px -10px rgba(0,0,0,.7);--entre:#000000;--fundo-branco:#000000;--fundo-cinza:#1c1c1e}
html body{font-family:var(--fonte);letter-spacing:-.012em;-webkit-font-smoothing:antialiased;background:var(--plano)}
html body{transition:background-color .3s ease}

/* 02. Escala da Apple: corpo 17, legenda 12, titulos em poucos degraus */
html body,html .prosa p,html .dupla p,html .painel-cartao p,html .a-passo p,html .entrega span,html .artigo p{font-size:17px;line-height:1.47}
html .sec-tit h2,html .a-tit h2,html #produto h2,html #como h2,html .fechamento h2{font-size:clamp(32px,4vw,48px);font-weight:700;letter-spacing:-.02em;line-height:1.1}
html .sec-tit p,html .a-tit p{font-size:clamp(19px,1.5vw,21px);line-height:1.38;letter-spacing:-.018em}
html .abertura h1{font-size:clamp(40px,5vw,64px);letter-spacing:-.022em;line-height:1.05;font-weight:700}
html .abertura#inicio h1{font-size:clamp(44px,5.4vw,76px);letter-spacing:-.025em;line-height:1.05}
html .chamada{font-size:clamp(19px,1.6vw,24px);line-height:1.38;letter-spacing:-.02em}
html h3,html .painel-cartao h3,html .a-passo h3{font-size:24px;font-weight:600;letter-spacing:-.015em;line-height:1.17}
html .olho,html .a-olho{font-size:17px;font-weight:600;letter-spacing:-.01em}
html small,html .pq,html .rodape-site,html .mapa-site a{font-size:12px}

/* 03. Barras em vidro: topo de 52 px, aviso de cookies e barra do celular */
html body nav.topo,html body.rolagem-js nav.topo,html .rolagem-js nav.topo{background:var(--vidro)!important;-webkit-backdrop-filter:saturate(180%) blur(20px)!important;backdrop-filter:saturate(180%) blur(20px)!important;
  box-shadow:inset 0 -1px 0 var(--borda);border-bottom:0!important}
html .topo-in{min-height:52px}
html .topo .topo-links>a,html .topo .topo-g,html .topo .topo-links a{font-size:13px;font-weight:400;letter-spacing:-.01em;color:var(--tinta)}
html .barra-pe,html [class*="consentimento"]{background:var(--vidro)!important;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  box-shadow:inset 0 1px 0 var(--vidro-borda),var(--vidro-sombra);border:0}
html [class*="consentimento"]{border-radius:22px}

/* 04. Botoes em pilula: um cheio, o segundo em vidro, o resto link com a seta */
html .btn{border-radius:999px;font-size:17px;font-weight:500;letter-spacing:-.02em;min-height:44px;padding:11px 22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 16px -8px rgba(29,78,216,.55)}
html .btn:active{transform:scale(.97)}
html .btn.btn-sec,html .btn-sec,html .topo-demo{background:var(--vidro);color:var(--tinta);border:0;
  -webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);
  box-shadow:inset 0 1px 0 var(--vidro-borda),inset 0 0 0 1px var(--borda),var(--vidro-sombra)}
html .btn.a-mais{background:transparent;color:var(--acao);box-shadow:none;padding-left:0;padding-right:0;font-weight:400}
html .btn.a-mais::after{content:"\203A";margin-left:6px;font-size:1.25em;line-height:1}
html .topo .btn,html .topo .topo-diag{min-height:30px;padding:5px 14px;font-size:13px;border-radius:999px}
html .topo .topo-demo{display:none}
html .topo .topo-entrar{background:none!important;border:0!important;box-shadow:none!important;font-size:13px!important;font-weight:400!important;color:var(--tinta)!important;padding:0 6px!important;min-height:0!important;margin-left:8px!important}
html .topo .topo-entrar:hover{color:var(--acao)!important;text-decoration:underline}

/* 05. Abertura centralizada, com o produto embaixo */
@media(min-width:960px){
  html .abertura#inicio .abertura-grade{display:flex;flex-direction:column;align-items:center;text-align:center;gap:48px}
  html .abertura#inicio .abertura-grade>div:first-child{max-width:880px;display:flex;flex-direction:column;align-items:center}
  html .abertura#inicio .chamada{max-width:720px;margin-inline:auto}
  html .abertura#inicio .form{max-width:560px;margin-inline:auto;width:100%}
  html .abertura#inicio .hx{width:min(100%,1040px)}
  html .abertura#inicio .hx-nucleo{display:none}
  html .abertura#inicio .hx{text-align:left}
}

html .abertura#inicio .hxb-voa{display:none}

/* 06. Titulo de secao em cima e texto embaixo, nunca lado a lado */
@media(min-width:0px){
  html .sec>.faixa>.sec-tit,html .sec>.faixa>div:not([class])>.sec-tit,html .dupla.dupla-texto>.sec-tit{display:flex!important;flex-direction:column;gap:14px;max-width:880px!important}
}

/* 06b. Abertura das paginas internas: trilha, titulo e frase empilhados */
html .abertura .capa-a-in{display:flex!important;flex-direction:column;align-items:flex-start;gap:16px}
html .abertura .capa-a-in h1{max-width:880px}
html .abertura .chamada{max-width:720px;margin-top:8px}
html body header.abertura.capa-a>.faixa.capa-a-in>.chamada{max-width:720px!important;margin:8px 0 0!important;align-self:flex-start!important}
html body header.abertura.capa-a>.faixa.capa-a-in>a.btn{margin-top:16px}

/* 07. Cartoes em bloco: canto grande, sem borda nem sombra, a cor separa */
html .painel-cartao,html .a-passo,html .entrega,html .artigo,html .card,html .cartao,html .a-lado{border:0!important;box-shadow:none!important;border-radius:22px;padding:32px}
@media(hover:hover){html .painel-cartao,html .a-passo,html .artigo{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
  html .painel-cartao:hover,html .a-passo:hover,html .artigo:hover{transform:scale(1.01)}}

/* 09. Numeros grandes, no estilo de keynote */
html .a-numeros .a-tres{text-align:center}
html .a-numeros .a-tres>div{border:0!important;align-items:center}
html .a-numeros .a-tres b{font-size:clamp(40px,4.6vw,64px);font-weight:700;letter-spacing:-.025em;line-height:1;
  background:linear-gradient(180deg,var(--acao) 0%,#0b1f6b 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .a-numeros .a-tres b{background:linear-gradient(180deg,#a9c2ff,#5b84f7);-webkit-background-clip:text;background-clip:text}}
:root[data-theme="dark"] .a-numeros .a-tres b{background:linear-gradient(180deg,#a9c2ff,#5b84f7);-webkit-background-clip:text;background-clip:text}
html .a-numeros .a-tres span{font-size:17px;color:var(--tinta-2)}

/* 10. Campos no padrao Apple: 52 px, canto de 12, anel de foco macio */
html input[type=email],html input[type=text],html input[type=tel],html textarea,html select{font-size:17px;border-radius:12px}
html .form input[type=email]{min-height:52px}
html input:focus-visible,html textarea:focus-visible,html select:focus-visible{outline:0;box-shadow:inset 0 0 0 1.5px var(--acao),0 0 0 4px rgba(29,78,216,.18)}

/* 11. Rodape claro e compacto, letra de 12 px */
html footer .rodape-site{background:var(--superficie-alta)!important;color:var(--tinta-3)!important}
html footer .rodape-site b,html footer .rodape-site .col-mapa b a{color:var(--tinta)!important;font-size:12px!important;font-weight:600}
html footer .rodape-site a,html footer .rodape-site p,html footer .rodape-site span,html footer .rodape-site button{color:var(--tinta-3)!important;font-size:12px!important}
html footer .rodape-site a:hover{color:var(--tinta)!important;text-decoration:underline}
html footer .rodape-site .col-mapa b svg{display:none}
html footer .rodape-site .marca-nome,html footer .rodape-site b .marca-nome{color:var(--tinta)!important;font-size:inherit!important}
html footer .rodape-site .marca-nome i{color:var(--acao)!important}
html footer .rodape-site svg .marca,html footer .marca-rodape svg .marca{fill:var(--tinta)!important}
html footer .rodape-site .social a{color:var(--tinta-3)!important}
html footer .rodape-site [class*="base"],html footer .rodape-site hr,html footer .rodape-site .rodape-fim{border-color:var(--borda)!important}
html footer .rodape-site *{border-color:var(--borda)}

@media(prefers-reduced-transparency:reduce){html .topo,html .barra-pe,html [class*="consentimento"],html .btn-sec,html .topo-demo{background:var(--superficie)!important;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media(prefers-contrast:more){html .topo,html .barra-pe{background:var(--superficie)!important;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 -1px 0 var(--borda-forte)}}
@media(prefers-reduced-motion:reduce){html .painel-cartao,html .a-passo,html .artigo{transition:none}html .painel-cartao:hover,html .a-passo:hover,html .artigo:hover{transform:none}}

/* 13. Menu do topo centralizado na tela (Luis, 01/11/2026: "centralize o menu superior") */
@media(min-width:1181px){
  html .topo-in{position:relative}
  html .topo-in>.topo-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}
  html .topo-in>.controles{margin-left:auto}
}

/* ===== 01/11/2026, segunda passada: o layout das paginas do apple.com (Luis: "se baseie nos padroes do site da
   apple https://www.apple.com/ e refaca o site goseek"). Padroes medidos no apple.com/br: barra de 44 px com letra
   de 12 px, cada secao um bloco de largura inteira com o titulo e a frase no centro, 12 px de branco entre os
   blocos, botao cheio e botao contornado lado a lado, e o bloco escuro em preto. Os textos sao os de antes. */

/* 14. Barra global de 44 px */
@media(min-width:1181px){
  html body nav.topo .topo-in{min-height:44px;height:44px}
  html .topo .topo-in>a svg.logo,html .topo .topo-in>a:first-child svg{height:22px;width:auto}
  html .topo .topo-links>a,html .topo .topo-g,html .topo .topo-links a{font-size:12px}
  html .topo .topo-cta,html .topo .btn{min-height:26px!important;padding:3px 12px!important;font-size:12px!important}
  html .topo .topo-entrar{font-size:12px!important}
}

/* 15. Blocos: cada secao de largura inteira, com 12 px de branco entre elas (preto no tema escuro) */
html body:not(:has(.autor-artigo)) main>section.sec+section.sec{border-top:12px solid var(--entre)}

/* 16. Titulo e frase no centro de cada bloco, como no apple.com; artigos, glossario e textos legais seguem a esquerda */
html body:not(:has(.autor-artigo)):not(:has(.legal-capa)) main>section.sec>.faixa>.sec-tit{align-items:center!important;text-align:center;margin-left:auto!important;margin-right:auto!important;max-width:880px!important}
html body:not(:has(.autor-artigo)):not(:has(.legal-capa)) main>section.sec>.faixa>.sec-tit p{max-width:720px;margin-inline:auto}
html body:not(:has(.autor-artigo)):not(:has(.legal-capa)) main>section.sec>.faixa>.sec-tit h2{font-size:clamp(34px,4.2vw,56px);letter-spacing:-.02em;line-height:1.07}
html body:not(:has(.autor-artigo)):not(:has(.legal-capa)) main>section.sec>.faixa>.sec-tit p{font-size:clamp(19px,1.5vw,21px);line-height:1.38;color:var(--tinta-2);letter-spacing:-.015em}
html body:not(:has(.autor-artigo)):not(:has(.legal-capa)) main>section.sec .a-mais{display:flex;width:max-content;margin-inline:auto}

/* 17. Abertura das paginas internas no centro, como as paginas de produto da Apple */
html body:not(:has(.autor-artigo)):not(:has(.legal-capa)) header.abertura.capa-a>.faixa.capa-a-in{align-items:center!important;text-align:center}
html body:not(:has(.autor-artigo)):not(:has(.legal-capa)) header.abertura.capa-a>.faixa.capa-a-in>.chamada{align-self:center!important;margin-inline:auto!important}
html body:not(:has(.autor-artigo)):not(:has(.legal-capa)) header.abertura.capa-a>.faixa.capa-a-in>h1{font-size:clamp(40px,5vw,64px);margin-inline:auto}
html body:not(:has(.autor-artigo)):not(:has(.legal-capa)) header.abertura.capa-a>.faixa.capa-a-in>a.btn{justify-self:center;align-self:center}

/* 18. Botoes do apple.com: cheio azul e contornado azul, em pilula, lado a lado */
html .btn.btn-sec,html .btn-sec{background:transparent!important;color:var(--acao)!important;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 0 0 1px var(--acao)!important}
html .btn.btn-sec:hover,html .btn-sec:hover{background:var(--acao)!important;color:#fff!important}
html .btn{box-shadow:none}

/* 19. O bloco escuro em preto, como os blocos escuros do apple.com */
html main>section.sec.azul,html .sec.azul,html .sec-video,html section[class*="video"]{background:#000!important}
html .sec.azul .painel-cartao,html .sec.azul .form{background:#1c1c1e}

/* 20. Fundo alternado em todas as paginas (Luis, 01/11/2026: "alterne as cores de fundo entre uma secao e outra de
   todas as paginas do site, uma secao com fundo branco, a outra com fundo cinza claro"). A abertura e branca; a
   primeira secao depois dela e cinza, a seguinte branca, e assim por diante, pela posicao e nao pela classe. O
   bloco do video segue preto e conta como uma secao. Cartao em secao branca e cinza; em secao cinza, branco. */
html main>section.sec:nth-of-type(odd):not(.azul){background:var(--fundo-cinza)!important}
html main>section.sec:nth-of-type(even):not(.azul){background:var(--fundo-branco)!important}
html main>section.sec+section.sec{border-top:0!important}
html main>section.sec:nth-of-type(odd):not(.azul) :is(.painel-cartao,.a-passo,.artigo,.card,.cartao){background:var(--fundo-branco)}
html main>section.sec:nth-of-type(even):not(.azul) :is(.painel-cartao,.a-passo,.artigo,.card,.cartao){background:var(--fundo-cinza)}

/* 21. O cartao Evidencias (e o quadrinho Procedencia da legenda) num cinza bem claro, para nao sumir no fundo da
   secao (Luis, 01/11/2026). Em secao cinza ele fica branco. */
html main>section.sec:nth-of-type(even) #conteudo .arvore .entrega.g-p,html main>section.sec:nth-of-type(even) .arvore .entrega.g-p,html main>section.sec:nth-of-type(even) .arvore-leg .g-p,
html main>section.sec:nth-of-type(even)#conteudo .arvore .entrega.g-p,html main>section.sec:nth-of-type(even)#conteudo .arvore-leg .g-p{background:var(--fundo-cinza)!important}
html main>section.sec:nth-of-type(odd) .arvore .entrega.g-p,html main>section.sec:nth-of-type(odd) .arvore-leg .g-p{background:var(--fundo-branco)!important}

/* 22. Rodape (Luis, 01/11/2026): "Preferencias de cookies" no mesmo padrao dos outros links, e a ultima linha no
   centro, "Plataforma Brasileira | (c) 2026 GoSeek", na mesma letra. */
html body footer .rodape-site .col-mapa .abre-cookies,html body footer .rodape-a .col-mapa .abre-cookies{all:unset;display:block;cursor:pointer;font:inherit;font-size:12px!important;font-weight:400!important;line-height:inherit;color:var(--tinta-3)!important;text-align:left;padding:0!important;margin:0!important;background:none!important;border:0!important;letter-spacing:inherit}
html footer .rodape-site .col-mapa .abre-cookies:hover{color:var(--tinta)!important;text-decoration:underline}
html footer .rodape-site .col-mapa .abre-cookies:focus-visible{outline:2px solid var(--acao);outline-offset:2px}
html footer .rodape-site .rodape-fim{display:flex!important;justify-content:center!important;align-items:center;flex-wrap:wrap;gap:0!important;text-align:center}
html footer .rodape-site .rodape-fim>*{margin:0!important;flex:none}
html footer .rodape-site .rodape-fim .feito-br,html footer .rodape-site .rodape-fim .feito-br span,html footer .rodape-site .rodape-fim .dir,html footer .rodape-site .rodape-fim .dir span{font-size:12px!important;font-weight:400!important;color:var(--tinta-3)!important}
html footer .rodape-site .rodape-fim .dir .marca-nome{font-weight:700!important;color:var(--tinta)!important}
html footer .rodape-site .rodape-fim .dir .marca-nome i{color:var(--acao)!important}
html footer .rodape-site .rodape-fim .dir::before{content:"|";margin:0 10px;color:var(--tinta-3)}
html footer .rodape-site .rodape-fim{flex-direction:row!important}
html footer .rodape-site .rodape-fim .dir{display:inline-flex!important;align-items:center;gap:0!important;padding:0!important;margin:0!important;white-space:nowrap}
html footer .rodape-site .rodape-fim .feito-br{white-space:nowrap}
html footer .rodape-site .rodape-fim .dir{flex-direction:row!important}html footer .rodape-site .rodape-fim{align-items:center!important}

/* 23. As 19 secoes do dossie numa escala de cor pelos 5 grupos (Luis, 01/11/2026: "repense e refaca esta escala
   de cores de acordo com os 5 grupos"). Tres tons do azul do logo, do mais forte ao mais leve, para o que o
   vendedor le primeiro (Resumo, Empresa, Ataque), e dois cinzas neutros para o apoio (Defesa, Procedencia).
   A legenda acima dos cartoes usa as mesmas cores. */
:root{--g-r:#d4e0ff;--g-e:#e3ebff;--g-a:#eff4ff;--g-d:#e8e8ed;--g-p:#f5f5f7}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-theme="daltonico"]){--g-r:#1e3170;--g-e:#18264f;--g-a:#131c36;--g-d:#2c2c2e;--g-p:#1c1c1e}}
:root[data-theme="dark"]{--g-r:#1e3170;--g-e:#18264f;--g-a:#131c36;--g-d:#2c2c2e;--g-p:#1c1c1e}
html body #conteudo .arvore .entrega.g-r,html body #conteudo .arvore-leg .g-r{background:var(--g-r)!important}
html body #conteudo .arvore .entrega.g-e,html body #conteudo .arvore-leg .g-e{background:var(--g-e)!important}
html body #conteudo .arvore .entrega.g-a,html body #conteudo .arvore-leg .g-a{background:var(--g-a)!important}
html body #conteudo .arvore .entrega.g-d,html body #conteudo .arvore-leg .g-d{background:var(--g-d)!important}
html body #conteudo .arvore .entrega.g-p,html body #conteudo .arvore-leg .g-p{background:var(--g-p)!important}
html body main>section.sec:nth-of-type(odd) #conteudo .arvore .entrega.g-p,html body main>section.sec:nth-of-type(odd)#conteudo .arvore .entrega.g-p{background:var(--fundo-branco)!important}

/* 24. Ultima linha do rodape (Luis, 01/11/2026): "Plataforma Brasileira | (c) 2026 GoSeek" a esquerda e "Termos |
   Privacidade | Preferencias de cookies | Mapa do site" a direita, como a ultima linha do apple.com. No celular as
   duas partes ficam uma embaixo da outra, no centro. */
html footer .rodape-site .rodape-fim{justify-content:flex-start!important;row-gap:8px!important}
html footer .rodape-site .rodape-fim .rodape-legal{margin-left:auto!important;display:flex!important;flex-wrap:wrap;align-items:center;gap:4px 0!important;padding:0!important;grid-template-columns:none!important;width:auto!important}
html footer .rodape-site .rodape-fim .rodape-legal>a,html body footer .rodape-site .rodape-fim .rodape-legal>.abre-cookies{all:unset;cursor:pointer;font:inherit;font-size:12px!important;font-weight:400!important;color:var(--tinta-3)!important;white-space:nowrap;display:inline-block!important;flex:none!important;width:auto!important;min-width:0!important;min-height:0!important;line-height:1.6!important;padding:0!important;margin:0!important;background:none!important;border:0!important}
html footer .rodape-site .rodape-fim .rodape-legal>*+*::before{content:"|";margin:0 10px;color:var(--tinta-3);text-decoration:none;display:inline-block}
html footer .rodape-site .rodape-fim .rodape-legal>a:hover,html body footer .rodape-site .rodape-fim .rodape-legal>.abre-cookies:hover{color:var(--tinta)!important;text-decoration:underline}
html footer .rodape-site .rodape-fim .rodape-legal>*:focus-visible{outline:2px solid var(--acao);outline-offset:2px}
@media(max-width:760px){
  html footer .rodape-site .rodape-fim{justify-content:center!important}
  html footer .rodape-site .rodape-fim .rodape-legal{margin-left:0!important;flex-basis:100%;justify-content:center}
}

/* 25. Secao do video com a mesma letra da secao Prioridade da home (Luis, 01/11/2026): titulo como o titulo de
   secao (34 a 56 px, 700) e a legenda como o texto de apoio (19 a 21 px). */
html .fech-demo h2{font-size:clamp(34px,4.2vw,56px)!important;font-weight:700!important;letter-spacing:-.02em!important;line-height:1.07!important}
html .fech-demo figcaption{font-size:clamp(19px,1.5vw,21px)!important;line-height:1.38!important;letter-spacing:-.015em!important}

/* 26. Titulo das colunas do rodape sem o espaco duplo de "A GoSeek" (o titulo era flex com gap para o icone, que
   saiu na regra 11). */
html footer .rodape-site .col-mapa>b{display:block!important;gap:0!important}

/* 27. Os 5 niveis de maturidade (diagnostico) na largura inteira da faixa, com o texto no meio da altura de cada
   cartao (Luis, 01/11/2026). */
html body:not(:has(.autor-artigo)):not(:has(.legal-capa)) main>section.sec>.faixa>.sec-tit:has(.mat-niveis){max-width:none!important;width:100%}
html .mat-niveis{width:100%;align-self:stretch}
html .mat-niveis li{align-items:center!important;grid-template-columns:minmax(180px,260px) minmax(0,1fr)!important;padding:22px 32px!important}
html .mat-niveis li>*{align-self:center;margin:0}
@media(max-width:760px){html .mat-niveis li{grid-template-columns:minmax(0,1fr)!important;padding:18px 20px!important}}

/* 28. Os 5 niveis com a largura so o bastante para cada linha caber inteira (Luis, 01/11/2026: "nao era pra
   explorar todo o limite, so o suficiente para caber tudo"). As colunas sao comuns aos cinco cartoes (subgrid), a
   lista se centra na faixa e nunca passa da largura dela. */
@media(min-width:761px){
  html .mat-niveis{display:grid!important;grid-template-columns:max-content max-content;width:max-content!important;max-width:100%!important;margin-inline:auto!important;align-self:center!important}
  html .mat-niveis li{grid-column:1 / -1;grid-template-columns:subgrid!important;column-gap:40px!important;padding:20px 32px!important}
}

/* 29. Os popups das 19 secoes do dossie ocupam a largura da faixa do site (Luis, 01/11/2026: "deixar as 19 fotos
   mais widescreen e ocupar os limites da tela do site"). As fotos sao tiradas a 1920 px. */
html .dp-dlg{width:min(calc(100vw - 96px),1760px)!important;max-width:calc(100vw - 32px)!important;max-height:94vh!important}
@media(max-width:760px){html .dp-dlg{width:calc(100vw - 24px)!important}}

/* 30. A frase de abertura da home em no maximo duas linhas no computador (Luis, 01/11/2026), nas quatro versoes do
   teste A/B: a coluna da abertura vai a largura da faixa e o titulo encolhe com a tela. */
@media(min-width:960px){
  html .abertura#inicio .abertura-grade>div:first-child{max-width:min(1240px,100%)!important}
  html .abertura#inicio h1{max-width:none!important;font-size:clamp(36px,3.7vw,60px)!important;line-height:1.08!important;text-wrap:balance}
}

/* ===== 01/11/2026, paleta Slate e Ocean (Luis: "q tal utilizar as cores descritas nas 2 imagens [...] pode usar
   degrade, deixe um site moderno e vivo, com vida e animacao, empolgante"). Os cinzas sao os da paleta Slate
   (#0F172A, #334155, #E2E8F0, #F8FAFC) e os azuis de apoio os da Ocean (#082F49, #0369A1, #38BDF8, #BAE6FD, #F0F9FF).
   O azul do logo (#1D4ED8) segue o principal. Movimento: so transform e opacidade; o brilho da abertura roda duas
   voltas e para; a entrada das secoes segue a rolagem; nada se move com o sistema pedindo menos movimento. */

/* 31. Cores */
:root{
  --tinta:#0f172a;--tinta-2:#334155;--tinta-3:#64748b;
  --borda:#e2e8f0;--borda-forte:#cbd5e1;--linha-a:#e2e8f0;
  --superficie-alta:#f8fafc;--fundo-cinza:#f8fafc;--azul-claro:#f0f9ff;
  --o-900:#082f49;--o-700:#0369a1;--o-400:#38bdf8;--o-200:#bae6fd;--o-50:#f0f9ff;
  --g-r:#bae6fd;--g-e:#e0f2fe;--g-a:#f0f9ff;--g-d:#e2e8f0;--g-p:#f8fafc;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-theme="daltonico"]){
  --tinta:#f8fafc;--tinta-2:#cbd5e1;--tinta-3:#94a3b8;--borda:#1e293b;--borda-forte:#334155;--linha-a:#1e293b;
  --plano:#0b1120;--superficie:#0f172a;--superficie-alta:#0f172a;--fundo-branco:#0b1120;--fundo-cinza:#0f172a;--entre:#0b1120;
  --g-r:#0c4a6e;--g-e:#082f49;--g-a:#0b2a3f;--g-d:#1e293b;--g-p:#0f172a}}
:root[data-theme="dark"]{
  --tinta:#f8fafc;--tinta-2:#cbd5e1;--tinta-3:#94a3b8;--borda:#1e293b;--borda-forte:#334155;--linha-a:#1e293b;
  --plano:#0b1120;--superficie:#0f172a;--superficie-alta:#0f172a;--fundo-branco:#0b1120;--fundo-cinza:#0f172a;--entre:#0b1120;
  --g-r:#0c4a6e;--g-e:#082f49;--g-a:#0b2a3f;--g-d:#1e293b;--g-p:#0f172a}

/* 32. Degrades */
/* abertura: um brilho azul de oceano atras do titulo, em camada propria (transform), que roda duas voltas e para */
html .abertura{position:relative;isolation:isolate;overflow:hidden}
html .abertura::before{content:"";position:absolute;inset:-30% -20% auto -20%;height:130%;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 50% at 30% 40%,rgba(56,189,248,.28),transparent 70%),radial-gradient(35% 45% at 72% 30%,rgba(29,78,216,.22),transparent 70%),radial-gradient(45% 40% at 55% 75%,rgba(186,230,253,.45),transparent 70%);
  filter:blur(10px);animation:gs-mar 14s ease-in-out 2 alternate}
@keyframes gs-mar{0%{transform:translate3d(-3%,0,0) scale(1)}50%{transform:translate3d(3%,-2%,0) scale(1.06)}100%{transform:translate3d(-1%,2%,0) scale(1.02)}}
/* titulo da abertura com o fim da frase num degrade do azul do logo ao oceano */
html .abertura#inicio h1{background:linear-gradient(100deg,var(--tinta) 0%,var(--tinta) 45%,#1d4ed8 75%,#0369a1 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* botao principal: degrade do azul do logo, com o brilho que corre no hover */
html .btn:not(.btn-sec):not(.a-mais){background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 55%,#1e40af 100%)!important;position:relative;overflow:hidden}
html .btn:not(.btn-sec):not(.a-mais)::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
@media(hover:hover){html .btn:not(.btn-sec):not(.a-mais):hover::after{transform:translateX(120%)}}
/* numeros de keynote no degrade oceano */
html .a-numeros .a-tres b{background:linear-gradient(120deg,#38bdf8 0%,#1d4ed8 50%,#082f49 100%)!important;-webkit-background-clip:text!important;background-clip:text!important}
/* bloco escuro (video): oceano profundo ao slate, com um brilho */
html main>section.sec.azul,html .sec.azul{background:radial-gradient(60% 80% at 85% 10%,rgba(56,189,248,.18),transparent 60%),linear-gradient(160deg,#082f49 0%,#0f172a 70%)!important}
/* secoes cinzas com um toque de oceano no alto */
html main>section.sec:nth-of-type(odd):not(.azul){background:linear-gradient(180deg,#f0f9ff 0%,#f8fafc 40%)!important}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-theme="daltonico"]) main>section.sec:nth-of-type(odd):not(.azul){background:linear-gradient(180deg,#0b2a3f 0%,#0f172a 45%)!important}}
:root[data-theme="dark"] main>section.sec:nth-of-type(odd):not(.azul){background:linear-gradient(180deg,#0b2a3f 0%,#0f172a 45%)!important}
/* cartoes: borda em degrade e leve subida no hover */
@media(hover:hover){
  html .painel-cartao,html .a-passo,html .artigo,html .entrega{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease}
  html .painel-cartao:hover,html .a-passo:hover,html .artigo:hover,html #conteudo .arvore .entrega:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(3,105,161,.45),0 0 0 1px rgba(56,189,248,.35)!important}
}

/* 33. Entrada das secoes pela rolagem (sem script; navegador sem suporte mostra tudo parado) */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    html main>section.sec>.faixa>.sec-tit,html .a-passo,html .painel-cartao,html .artigo,html #conteudo .arvore .entrega,html .a-numeros .a-tres>div{
      animation:gs-entra linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
  }
}
@keyframes gs-entra{from{opacity:0;transform:translate3d(0,28px,0) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){html .abertura::before{animation:none}html .btn::after{display:none}}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-theme="daltonico"]) .abertura .marca-nome i{color:#7ea4ff!important}}
:root[data-theme="dark"] .abertura .marca-nome i{color:#7ea4ff!important}

/* 34. A primeira secao de cada pagina (a abertura) com fundo branco (Luis, 01/11/2026), como manda o padrao de
   fundos do site: abertura branca e depois as secoes alternando. O brilho de oceano da abertura fica so no tema
   escuro. */
html header.abertura,html .abertura#inicio{background:#ffffff!important}
html header.abertura::before,html .abertura#inicio::before{display:none}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-theme="daltonico"]) header.abertura,:root:not([data-theme="light"]):not([data-theme="daltonico"]) .abertura#inicio{background:var(--plano)!important}
  :root:not([data-theme="light"]):not([data-theme="daltonico"]) header.abertura::before,:root:not([data-theme="light"]):not([data-theme="daltonico"]) .abertura#inicio::before{display:block}}
:root[data-theme="dark"] header.abertura,:root[data-theme="dark"] .abertura#inicio{background:var(--plano)!important}
:root[data-theme="dark"] header.abertura::before,:root[data-theme="dark"] .abertura#inicio::before{display:block}
/* nas paginas sem abertura (o diagnostico), a primeira secao e branca e a alternancia comeca dela */
html body:not(:has(.abertura)) main>section.sec:nth-of-type(odd):not(.azul){background:var(--fundo-branco)!important}
html body:not(:has(.abertura)) main>section.sec:nth-of-type(even):not(.azul){background:var(--fundo-cinza)!important}

/* 35. Secao "Da lista a conversa" da home (Luis, 01/11/2026): importacao, geracao de leads e cadencia, cada uma com
   a tela ficticia da plataforma, alternando o lado da foto. */
html .hp-recursos .rec-lista{display:flex;flex-direction:column;gap:clamp(56px,7vw,112px);margin-top:clamp(32px,4vw,56px)}
html .hp-recursos .rec-linha{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:clamp(28px,4vw,64px);align-items:center}
html .hp-recursos .rec-linha.rec-inv{grid-template-columns:minmax(0,8fr) minmax(0,5fr)}
html .hp-recursos .rec-linha.rec-inv .rec-texto{order:2}
html .hp-recursos .rec-texto{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
html .hp-recursos .rec-nome{font-size:17px;font-weight:600;color:var(--acao)}
html .hp-recursos .rec-plano{font-size:13px;font-weight:600;color:#0369a1;background:#f0f9ff;border:1px solid #bae6fd;border-radius:999px;padding:4px 12px}
html .hp-recursos .rec-texto h3{font-size:clamp(26px,2.4vw,34px);font-weight:700;letter-spacing:-.02em;line-height:1.12;margin:6px 0 0}
html .hp-recursos .rec-texto p{font-size:17px;line-height:1.55;color:var(--tinta-2);margin:0;max-width:52ch}
html .hp-recursos .rec-tela{margin:0;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -30px rgba(8,47,73,.45),0 0 0 1px rgba(15,23,42,.08)}
html .hp-recursos .rec-tela img{display:block;width:100%;height:auto}
html .hp-recursos .rec-leg{display:block;width:100%;max-width:none;margin:32px 0 0;font-size:13px;color:var(--tinta-3);text-align:center}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-theme="daltonico"]) .hp-recursos .rec-plano{color:#bae6fd;background:#082f49;border-color:#0369a1}}
:root[data-theme="dark"] .hp-recursos .rec-plano{color:#bae6fd;background:#082f49;border-color:#0369a1}
@media(max-width:900px){html .hp-recursos .rec-linha,html .hp-recursos .rec-linha.rec-inv{grid-template-columns:1fr}html .hp-recursos .rec-linha.rec-inv .rec-texto{order:0}}
@supports (animation-timeline:view()){@media(prefers-reduced-motion:no-preference){html .hp-recursos .rec-tela{animation:gs-entra linear both;animation-timeline:view();animation-range:entry 0% entry 45%}}}

/* 36. Vida no site (Luis, 01/11/2026: as 7 animacoes). O movimento so liga com html.vida, que o js/vida.js poe
   quando a pessoa nao pediu para reduzir movimento; sem ele tudo aparece parado e no lugar. So transform e opacity. */
html #inicio .hx-foto{position:relative;margin:0 auto;width:100%;max-width:1160px}
html #inicio .hx-foto img{display:block;width:100%;height:auto;border-radius:18px;background:#fff;box-shadow:0 40px 80px -40px rgba(8,47,73,.5),0 0 0 1px rgba(15,23,42,.08)}
html #inicio .hx-chips{position:absolute;inset:0;pointer-events:none}
html #inicio .hx-chip{position:absolute;display:flex;align-items:baseline;gap:8px;padding:12px 18px;border-radius:16px;background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);box-shadow:0 18px 40px -18px rgba(8,47,73,.5),0 0 0 1px rgba(15,23,42,.07);white-space:nowrap}
html #inicio .hx-chip b{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--acao);font-variant-numeric:tabular-nums}
html #inicio .hx-chip small{font-size:14px;color:var(--tinta-2)}
html #inicio .hx-chip:nth-child(1){left:-28px;top:20%}
html #inicio .hx-chip:nth-child(2){right:-28px;top:46%}
html #inicio .hx-chip:nth-child(3){left:-28px;bottom:12%}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-theme="daltonico"]) #inicio .hx-chip{background:rgba(15,23,42,.8);box-shadow:0 18px 40px -18px rgba(0,0,0,.7),0 0 0 1px rgba(148,163,184,.2)}}
:root[data-theme="dark"] #inicio .hx-chip{background:rgba(15,23,42,.8);box-shadow:0 18px 40px -18px rgba(0,0,0,.7),0 0 0 1px rgba(148,163,184,.2)}
@media(max-width:900px){html #inicio .hx-chip{padding:7px 11px;gap:6px;border-radius:12px}html #inicio .hx-chip b{font-size:17px}html #inicio .hx-chip small{font-size:11.5px}
 html #inicio .hx-chip:nth-child(1){left:-6px;top:auto;bottom:calc(100% - 14px)}html #inicio .hx-chip:nth-child(2){right:-6px;top:auto;bottom:-16px}html #inicio .hx-chip:nth-child(3){display:none}}
html.vida #inicio .hx-foto img{opacity:0;transform:translateY(40px) scale(.97)}
html.vida #inicio .hx-foto.vida-ve img{opacity:1;transform:none;transition:opacity .9s ease,transform 1.2s cubic-bezier(.16,1,.3,1)}
html.vida #inicio .hx-chip{opacity:0;transform:translateY(14px) scale(.9)}
html.vida #inicio .hx-foto.vida-ve .hx-chip{opacity:1;transform:none;transition:opacity .5s ease,transform .7s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(.6s + var(--i) * .25s)}
html .a-numeros b.vida-num{font-variant-numeric:tabular-nums}
html.vida .vida-passos .a-passo{opacity:.2;transform:translateY(20px);transition:opacity .6s ease,transform .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i) * .35s)}
html.vida .vida-passos .a-n{transform:scale(.55);transition:transform .7s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--i) * .35s + .15s)}
html.vida .vida-passos.vida-ve .a-passo,html.vida .vida-passos.vida-ve .a-n{opacity:1;transform:none}
@supports (animation-timeline:view()){html.vida .hp-recursos .rec-tela{animation:vida-paralaxe linear both;animation-timeline:view();animation-range:entry 0% cover 45%}}
@keyframes vida-paralaxe{from{opacity:.25;transform:translateY(80px) scale(.93)}to{opacity:1;transform:none}}
html .hp-recursos .rec-tela{position:relative}
html .rec-pinos{position:absolute;inset:0;pointer-events:none}
html .rec-pino{position:absolute;width:3.6%;aspect-ratio:1;border-radius:50%;border:2px solid #2563eb;background:rgba(37,99,235,.12);opacity:0;transform:translate(-50%,-50%) scale(.3)}
html.vida .rec-tela.vida-ve .rec-pino{animation:vida-ping 1.5s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.5s + var(--i) * .3s);animation-iteration-count:2}
@keyframes vida-ping{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.9)}}
html .vida-video{margin:clamp(40px,5vw,72px) auto 0;max-width:1080px}
html .vida-video video{display:block;width:100%;height:auto;border-radius:18px;background:#0b1120;box-shadow:0 30px 60px -30px rgba(8,47,73,.45),0 0 0 1px rgba(15,23,42,.08)}
html .vida-video figcaption{margin-top:14px;font-size:13px;color:var(--tinta-3);text-align:center}
html .vida-cartao{position:relative;transition:transform .55s cubic-bezier(.34,1.56,.64,1);will-change:transform}
html .vida-cartao.vida-sobre{transition:transform .12s ease-out}
html .vida-brilho{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .3s ease}
html .vida-sobre>.vida-brilho{opacity:1}
html .vida-brilho i{position:absolute;left:-170px;top:-170px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.13),rgba(37,99,235,0) 70%)}
@media(prefers-reduced-motion:no-preference){
 html .btn,html .btn-linha,html .pl-zap-btn,html .ok-zap{transition:transform .45s cubic-bezier(.34,1.56,.64,1),background-color .2s ease,color .2s ease,box-shadow .2s ease,border-color .2s ease}
 html .btn:active,html .btn-linha:active,html .pl-zap-btn:active,html .ok-zap:active{transform:scale(.95);transition-duration:.08s}
 html a svg:has(>path[d^="M5 12h14"]){transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
 @media(hover:hover){html a:hover svg:has(>path[d^="M5 12h14"]){transform:translateX(4px)}}
}

/* 37. O codigo no formulario em linha e o aviso do PDF do diagnostico (Luis, 02/11/2026). O campo do codigo herdava
   ".form input{flex:1 1 220px}" e, no celular, com o formulario em coluna, os 220 px viravam altura. */
html .form input[name="codigo"]{flex:1 1 auto;height:52px;min-height:52px;margin:0;font-size:17px;font-variant-numeric:tabular-nums}
html .form input[name="codigo"]:not(:placeholder-shown){font-size:22px;letter-spacing:.3em}
html #inicio .form input[name="codigo"],html .sec.azul .fechamento .form input[name="codigo"]{border:0;background:transparent;padding:0 12px}
html .diag-baixou{margin:14px 0 0;font-size:15px;line-height:1.5;color:var(--tinta-2)}
html .diag-baixou a{margin-left:4px;font-weight:600;color:var(--acao)}
html .diag-baixou.diag-baixou-erro{color:#b91c1c;font-weight:700}

/* 38. A abertura viva (Luis, 02/11/2026): "revelar da esquerda pra direita, rapido" no titulo, "flutuante" na tela
   do Cockpit e "aumente 100% e deixe cintilante" nos tres selos. O flutuar usa a propriedade translate, que soma com a
   entrada (transform), e so anda com .vida-anda, que o js/vida.js poe enquanto a abertura esta na tela. */
html #inicio .hx-chip{padding:24px 36px;gap:14px;border-radius:28px;overflow:hidden}
html #inicio .hx-chip b{font-size:52px;line-height:1}
html #inicio .hx-chip small{font-size:24px}
html #inicio .hx-chip:nth-child(1){left:-56px;top:16%}
html #inicio .hx-chip:nth-child(2){right:-56px;top:44%}
html #inicio .hx-chip:nth-child(3){left:-56px;bottom:8%}
html #inicio .hx-chip::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.85) 48%,rgba(191,219,254,.6) 52%,transparent 70%);transform:translateX(-130%)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-theme="daltonico"]) #inicio .hx-chip::after{background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 48%,rgba(147,197,253,.25) 52%,transparent 70%)}}
:root[data-theme="dark"] #inicio .hx-chip::after{background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 48%,rgba(147,197,253,.25) 52%,transparent 70%)}
@media(max-width:1300px){html #inicio .hx-chip{padding:16px 24px;border-radius:22px}html #inicio .hx-chip b{font-size:38px}html #inicio .hx-chip small{font-size:18px}
 html #inicio .hx-chip:nth-child(1),html #inicio .hx-chip:nth-child(3){left:-20px}html #inicio .hx-chip:nth-child(2){right:-20px}}
@media(max-width:900px){html #inicio .hx-chip{padding:10px 15px;gap:8px;border-radius:16px}html #inicio .hx-chip b{font-size:26px}html #inicio .hx-chip small{font-size:14px}
 html #inicio .hx-chip:nth-child(1){left:-6px;top:auto;bottom:calc(100% - 18px)}html #inicio .hx-chip:nth-child(2){right:-6px;top:auto;bottom:-22px}}
@media(prefers-reduced-motion:no-preference){
 html.vida #inicio h1{animation:vida-revela .65s cubic-bezier(.65,0,.35,1) both}
 html.vida #inicio .hx-foto.vida-anda img{animation:vida-flutua 7s ease-in-out 1.4s infinite}
 html.vida #inicio .hx-foto.vida-anda .hx-chip{animation:vida-flutua-selo 6s ease-in-out infinite;animation-delay:calc(1.8s + var(--i) * -1.7s)}
 html.vida #inicio .hx-foto.vida-anda .hx-chip::after{animation:vida-cintila 4.2s ease-in-out infinite;animation-delay:calc(2.2s + var(--i) * .9s)}
}
@keyframes vida-revela{from{clip-path:inset(-25% 100% -25% 0)}to{clip-path:inset(-25% -6% -25% 0)}}
@keyframes vida-flutua{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes vida-flutua-selo{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes vida-cintila{0%{transform:translateX(-130%)}40%,100%{transform:translateX(130%)}}


/* 39. Os numeros dos passos de "Como funciona" (Luis, 02/11/2026: "aumentar os numeros 1, 2 e 3 em 300%, negrito"):
   de 13 px para 52 px, em negrito. */
html .a-passos .a-n{font-size:52px;font-weight:800;line-height:1;letter-spacing:-.02em;margin-bottom:6px;transform-origin:left bottom}

/* 40. As tres janelas da abertura cobrem no maximo 20% de si sobre a tela do Cockpit (Luis, 02/11/2026: "nao
   sobrepor mais do que 20% da tela de baixo"). A foto fica na coluna do meio e as janelas nas colunas dos lados,
   com o numero em cima do texto; o translate de 20% da propria largura e o unico pedaco que entra na foto. No
   celular as tres vao para uma fileira embaixo da foto, sem cobrir nada. */
html #inicio .hx-foto{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;grid-template-rows:repeat(3,minmax(0,1fr));align-items:center;max-width:1400px}
html #inicio .hx-foto>img{grid-column:2;grid-row:1/4;position:relative;z-index:0}
html #inicio .hx-chips{display:contents}
html #inicio .hx-chip{position:relative;z-index:1;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;flex-direction:column;align-items:flex-start;gap:6px;padding:22px 28px;translate:var(--dx) 0}
html #inicio .hx-chip b{font-size:52px}
html #inicio .hx-chip small{font-size:18px}
html #inicio .hx-chip:nth-child(1){grid-column:1;grid-row:1;--dx:20%;align-self:center}
html #inicio .hx-chip:nth-child(2){grid-column:3;grid-row:2;--dx:-20%}
html #inicio .hx-chip:nth-child(3){grid-column:1;grid-row:3;--dx:20%;display:flex}
@keyframes vida-flutua-selo{0%,100%{translate:var(--dx) 0}50%{translate:var(--dx) -12px}}
@media(max-width:1300px){html #inicio .hx-chip{padding:16px 20px}html #inicio .hx-chip b{font-size:40px}html #inicio .hx-chip small{font-size:15px}}
@media(max-width:900px){
 html #inicio .hx-foto{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;gap:10px;align-items:stretch}
 html #inicio .hx-foto>img{grid-column:1/4;grid-row:1}
 html #inicio .hx-chip,html #inicio .hx-chip:nth-child(1),html #inicio .hx-chip:nth-child(2),html #inicio .hx-chip:nth-child(3){grid-row:2;--dx:0%;padding:10px 12px;gap:2px;border-radius:14px;white-space:normal;display:flex}
 html #inicio .hx-chip:nth-child(1){grid-column:1}html #inicio .hx-chip:nth-child(2){grid-column:2}html #inicio .hx-chip:nth-child(3){grid-column:3}
 html #inicio .hx-chip b{font-size:26px}html #inicio .hx-chip small{font-size:12.5px;line-height:1.3}
}
/* (02/11/2026: "coloca-las mais para fora, direita e esquerda") as janelas entram so 8% na foto, e o conjunto usa a
   largura da janela do navegador, fora da coluna do texto da abertura. */
@media(min-width:901px){
 html #inicio .hx-foto{width:min(calc(100vw - 48px),1720px);max-width:none;flex:0 0 auto}
 html #inicio .hx-chip:nth-child(1),html #inicio .hx-chip:nth-child(3){--dx:8%}
 html #inicio .hx-chip:nth-child(2){--dx:-8%}
}

/* 41. A borda azul das tres janelas da abertura, a mesma luz da janela de "Por dentro do dossie" (hpt-luz, na
   index): borda #1D4ED8, anel de 4 px e brilho azul em volta (Luis, 02/11/2026). */
html #inicio .hx-chip{border:1.5px solid #1D4ED8;box-shadow:0 18px 40px -18px rgba(8,47,73,.5),0 0 0 4px rgba(29,78,216,.14),0 0 32px 4px rgba(29,78,216,.28)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-theme="daltonico"]) #inicio .hx-chip{border-color:#3b82f6;box-shadow:0 18px 40px -18px rgba(0,0,0,.7),0 0 0 4px rgba(59,130,246,.18),0 0 32px 4px rgba(59,130,246,.32)}}
:root[data-theme="dark"] #inicio .hx-chip{border-color:#3b82f6;box-shadow:0 18px 40px -18px rgba(0,0,0,.7),0 0 0 4px rgba(59,130,246,.18),0 0 32px 4px rgba(59,130,246,.32)}

/* 42. A janela "pessoas no mapa de poder" no canto inferior esquerdo, com metade da largura sobre a tela do Cockpit
   (Luis, 02/11/2026: "na parte de baixo no canto inferior esquerdo 50% pra dentro da tela de baixo"). */
@media(min-width:901px){html #inicio .hx-chip:nth-child(3){--dx:50%;align-self:end;margin-bottom:-28px;z-index:2}}
/* (02/11/2026: "e a de cima 518, na mesma posicao, mas 28 % pra dentro e por cima da tela de baixo") */
@media(min-width:901px){html #inicio .hx-chip:nth-child(1){--dx:28%;z-index:2}}

/* 43. As tres janelas da abertura com metade do tamanho (Luis, 02/11/2026: "diminuir tam 50% das 3 janelas
   flutuantes"). O texto de baixo fica em 13 px, e nao em 9, para continuar legivel. */
@media(min-width:901px){
 html #inicio .hx-chip{padding:11px 16px;gap:3px;border-radius:16px}
 html #inicio .hx-chip b{font-size:26px}
 html #inicio .hx-chip small{font-size:13px}
 html #inicio .hx-chip:nth-child(3){margin-bottom:-14px}
}
@media(min-width:901px) and (max-width:1300px){html #inicio .hx-chip{padding:8px 12px}html #inicio .hx-chip b{font-size:22px}html #inicio .hx-chip small{font-size:12px}}

/* 44. O codigo de confirmacao no padrao do iPhone, em todo o site (Luis, 02/11/2026): seis quadradinhos, o da vez em
   azul, um respiro entre o terceiro e o quarto, sem botao; recusado, as caixas balancam e ficam vermelhas. Nos
   formularios da pagina as caixas tomam o lugar do campo de e-mail, na mesma linha. */
html .codigo-caixas{display:flex;justify-content:center;gap:10px;margin-top:4px}
html .codigo-caixa{width:52px;height:62px;padding:0;border:1.5px solid #cbd5e1;border-radius:14px;background:var(--superficie,#fff);color:var(--tinta);font:600 28px/1 var(--fonte);font-variant-numeric:tabular-nums;text-align:center;caret-color:#1D4ED8;box-shadow:0 1px 2px rgba(15,23,42,.06);transition:border-color .15s ease,box-shadow .15s ease}
html .codigo-caixa:nth-child(3){margin-right:10px}
html .codigo-caixa:focus{outline:none;border-color:#1D4ED8;box-shadow:0 0 0 4px rgba(29,78,216,.18)}
html .codigo-caixa[aria-invalid="true"],html .codigo-recusado .codigo-caixa{border-color:#dc2626;box-shadow:0 0 0 4px rgba(220,38,38,.14)}
@media(prefers-reduced-motion:no-preference){html .codigo-recusado{animation:codigo-balanca .45s cubic-bezier(.36,.07,.19,.97) both}}
@keyframes codigo-balanca{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}
html .form .codigo-em-linha{flex:1 1 auto;margin:0;padding:6px 4px;min-height:52px;align-items:center}
html .form .codigo-em-linha[hidden]{display:none}
html .form .codigo-em-linha .codigo-caixa{width:46px;height:54px;font-size:24px;border-radius:12px}
@media(max-width:480px){html .codigo-caixas{gap:7px}html .codigo-caixa{width:42px;height:52px;font-size:24px;border-radius:12px}html .codigo-caixa:nth-child(3){margin-right:7px}
 html .form .codigo-em-linha .codigo-caixa{width:40px;height:50px;font-size:22px}}
@media(max-width:360px){html .codigo-caixas{gap:5px}html .codigo-caixa,html .form .codigo-em-linha .codigo-caixa{width:36px;height:46px;font-size:20px}html .codigo-caixa:nth-child(3){margin-right:5px}}
/* (02/11/2026) as caixas do formulario da pagina nao esticam: ".form input" dava flex 1 1 220px a todo campo */
html .form .codigo-em-linha .codigo-caixa{flex:0 0 auto;min-width:0;min-height:0;margin-top:0;margin-bottom:0}
html .form .codigo-em-linha{justify-content:center}

/* 45. Sem o filete embaixo do menu do topo (Luis, 02/11/2026: "retirar essa linha"): a sombra de 1 px por dentro da
   barra sai em todos os estados, inclusive com a pagina rolada e no tema escuro. */
html nav.topo,html.passou-abertura nav.topo,html .topo.rolou{box-shadow:none!important;border-bottom:0!important}

/* 46. Respiro no topo e letra maior no menu (Luis, 02/11/2026: "distancie um pouco mais essa faixa superior do limite do
   topo (falta um respiro) e aumente um pouco as fontes de tudo, exceto o logo"). A barra ganha 14 px de folga em cima
   (8 px no celular); os itens, o Diagnostico e o Entrar vao de 12 para 14 px; o logo fica com os mesmos 181x32. */
html body nav.topo{padding-top:14px!important}
html{scroll-padding-top:72px}
@media(min-width:1181px){
  html body nav.topo .topo-in{min-height:50px;height:50px}
  html .topo .topo-links>a,html .topo .topo-g,html .topo .topo-links a{font-size:14px}
  html .topo .topo-cta,html .topo .btn{min-height:32px!important;padding:5px 15px!important;font-size:14px!important}
  html .topo .topo-entrar{font-size:14px!important}
}
@media(max-width:1180px){html body nav.topo{padding-top:8px!important}html .topo .topo-entrar{font-size:15px!important}}

/* abertura centralizada no celular e tablet, igual ao desktop */
@media(max-width:959.98px){
  html .abertura#inicio .abertura-grade{text-align:center}
  html .abertura#inicio .abertura-grade>div:first-child{display:flex;flex-direction:column;align-items:center;text-align:center;margin-inline:auto;width:100%}
  html .abertura#inicio .a-olho,html .abertura#inicio h1,html .abertura#inicio .chamada{text-align:center;margin-inline:auto}
  html .abertura#inicio h1{text-wrap:balance}
  html .abertura#inicio .chamada{text-wrap:pretty}
  html .abertura#inicio .hx-acoes{align-items:center;justify-content:center}
  html .abertura#inicio .form{margin-inline:auto}
}

/* 47. O X das janelas responde ao mouse (Luis, 02/11/2026: "animar este clique no x"): gira um quarto de volta com mola ao
   passar o mouse e afunda ao pressionar; o fechamento animado mora no js/vida.js. */
@media(prefers-reduced-motion:no-preference){
  html .saida-x,html .dp-x{transition:transform .45s cubic-bezier(.34,1.56,.64,1),background-color .2s ease,color .2s ease,border-color .2s ease}
  @media(hover:hover){html .saida-x:hover,html .dp-x:hover{transform:rotate(90deg)}}
  html .saida-x:active,html .dp-x:active{transform:rotate(90deg) scale(.82);transition-duration:.1s}
}

/* 48. Letra maior no rodape (Luis, 02/11/2026: "exceto o logo, aumentar um pouco a fonte das palavras"): links, descricao
   e dados de 12 para 14 px, titulos das colunas para 15 px e a ultima linha para 13 px. O logo e o aviso de cookies nao mudam. */
html body footer :is(p,a,span,button,li):not(.cookies-painel *):not(.cookies-painel){font-size:14px!important}
html body footer .col-mapa b,html body footer .col-mapa b a,html body footer .col-mapa b span{font-size:15px!important}
html body footer :is(.rodape-legal,.rodape-baixo,.rodape-fim) :is(a,span,button):not(.cookies-painel *){font-size:13px!important}
html body footer .marca-nome,html body footer .marca-nome i{font-size:inherit!important}
html body footer .rodape-site .rodape-fim .feito-br,html body footer .rodape-site .rodape-fim .feito-br span,html body footer .rodape-site .rodape-fim .dir,html body footer .rodape-site .rodape-fim .dir span,html body footer .rodape-site .rodape-fim a,html body footer .rodape-site .rodape-fim button{font-size:13px!important}
html body footer .rodape-site .col-mapa .abre-cookies,html body footer .rodape-a .col-mapa .abre-cookies,html body footer .rodape-site .rodape-fim .abre-cookies{font-size:13px!important}
html body footer .rodape-site .rodape-fim .rodape-legal>a,html body footer .rodape-site .rodape-fim .rodape-legal>.abre-cookies{font-size:13px!important}