/* ==========================================================================
   hosannatecnologia.com.br — estilos do site publico
   ==========================================================================

   Regra do arquivo (docs/frontend.md): cor, tamanho de letra, espacamento e
   raio so por variavel. Os valores vivem nos blocos :root abaixo e em nenhum
   outro lugar. tests/Unit/Frontend/SiteCssTest.php reprova quem escrever um
   valor solto — e confere o contraste de cada par de cor de texto e fundo.

   Tema: as cores vivem em tokens no :root e sao redefinidas em dois lugares —
   pela preferencia do sistema (prefers-color-scheme) e pelo atributo
   data-theme no <html>, que o seletor de tema escreve. O seletor de media vem
   guardado por :root:not([data-theme]) para que a escolha EXPLICITA do visitante
   sempre vença a preferencia do sistema; sem essa guarda, quem estivesse no
   escuro por preferencia de SO nao conseguiria escolher claro.

   TODA cor daqui espelha o Design System do omni
   (D:/Work/omni/shared/interfaces/core/token.css), que e a referencia de toda
   aplicacao da Hosanna. Mudou la, muda aqui. Nome daqui = token de la:
     --fundo            = --ds-bg           fundo da pagina
     --fundo-cromo      = --ds-surface      cabecalho e rodape (o "cromo");
                          no claro e branco QUENTE, nunca #fff
     --fundo-elevado    = --ds-raised       cartao, faixa, submenu
     --texto            = --ds-text         conteudo
     --texto-suave      = --ds-text-2       subtitulo, apoio, rotulo
     --borda            = --ds-border       linha que SEPARA blocos, fraca de
                          proposito
     --borda-controle   = --ds-border-strong contorno de controle interativo
                          (B-4.42 do omni): minimo 3 contra o fundo
     --destaque         = --ds-accent       #FF8C00, a marca, IGUAL nos dois
                          temas: fundo de botao cheio, borda, detalhe
     --destaque-texto   = --ds-on-accent    #2A1D08, tinta ESCURA sobre o
                          laranja (7,05). Branco sobre ele da 2,33 e reprova
     --destaque-leitura = --ds-accent-text  o laranja COMO texto ou contorno
                          sobre fundo neutro. No escuro e o proprio accent; no
                          claro e color-mix(accent 60%, black) = #995400,
                          escrito ja calculado porque color-mix e proibido aqui
     --fundo-campo      = --ds-input        campo de formulario: no escuro
                          RECUA (mais escuro que a pagina), no claro e o
                          branco quente do cromo
     --perigo           = --ds-danger       contorno de campo com erro
     --perigo-texto     = --ds-danger-text  mensagem de erro do campo
     --destaque-fundo   = --ds-accent-soft  fundo tintado (selo, icone)
     --foco             = --ds-accent-text  anel de foco
     --sombra           = --ds-shadow-lg    painel que flutua (submenu)
     --veu              = --ds-scrim        fundo escurecido atras de uma janela
                          (visualizador de midia)
   ========================================================================== */

:root {
    color-scheme: light dark;

    --fundo: #f8f9fa;
    --fundo-cromo: #fefdfb;
    --fundo-elevado: #f1f3f5;
    --texto: #212529;
    --texto-suave: #495057;
    --borda: #dee2e6;
    --borda-controle: #878d93;
    --destaque: #ff8c00;
    --destaque-leitura: #995400;
    --destaque-fundo: #fbf2e6;
    --destaque-texto: #2a1d08;
    --fundo-campo: #fefdfb;
    --perigo: #dc2626;
    --perigo-texto: #b91c1c;
    /* Informacao (omni --ds-info, --ds-info-text e --ds-info-tint composto
       sobre a superficie, 13/10/2026): aviso de estado. O laranja e da acao. */
    --info: #2563eb;
    --info-texto: #175893;
    --info-fundo: #edf1fa;
    /* Fundo e contorno dos tipos de caixa (22/10/2026): o -tint do omni
       (14% da cor sobre a superficie) e o contorno a 30%. */
    --info-borda: color-mix(in srgb, var(--info) 30%, var(--borda));
    --sucesso-fundo: color-mix(in srgb, var(--sucesso) 14%, var(--fundo-elevado));
    --sucesso-borda: color-mix(in srgb, var(--sucesso) 30%, var(--borda));
    --atencao-fundo: color-mix(in srgb, var(--atencao) 14%, var(--fundo-elevado));
    --atencao-borda: color-mix(in srgb, var(--atencao) 30%, var(--borda));
    --destaque-suave: color-mix(in srgb, var(--destaque) 6%, var(--fundo-elevado));
    --destaque-borda: color-mix(in srgb, var(--destaque) 22%, var(--borda));
    --sombra-botao: inset 0 1px 0 rgb(255 255 255 / .35), 0 1px 2px rgb(0 0 0 / .14);
    /* Realce de item sob o mouse (o --bg-2 do v3, 13/10/2026). */
    --fundo-realce: #e9ecef;
    /* Estado pronto e em andamento (omni --ds-success-text e
       --ds-warning-text, 13/10/2026): o ponto da etiqueta de estado. */
    --sucesso: #166534;
    --atencao: #92400e;
    --foco: #995400;
    --sombra: 0 8px 24px rgb(0 0 0 / .12);
    --veu: rgb(15 15 25 / .45);

    /* Espacamento: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96px. Os dois ultimos
       (12/10/2026) sao o respiro entre secoes do layout do v3 (110px la; 96 no
       computador e 64 no celular aqui). Nao servem dentro de componente. */
    --esp-1: .25rem;
    --esp-2: .5rem;
    --esp-3: .75rem;
    --esp-4: 1rem;
    --esp-5: 1.5rem;
    --esp-6: 2rem;
    --esp-7: 3rem;
    --esp-8: 4rem;
    --esp-9: 6rem;
    /* Respiro das secoes do v3 (--section-y): 110px, e 76px abaixo de
       576px. So para o padding de secao. */
    --secao: 6.875rem;
    --secao-celular: 4.75rem;
    /* Filete: o vao de 1px que desenha a linha entre as celulas de um painel
       (o fundo do painel aparece pelo vao). So para isso. */
    --filete: 1px;

    /* Letra. Pisos no celular: corpo 16px, rotulo 12px, titulo de pagina 28px,
       titulo de secao 22px. */
    /* Escala do v3 (12/10/2026): titulos grandes e fluidos. --letra-hero e so
       o h1 da home (36px no celular, 64px no computador); --letra-titulo e o h1
       das paginas internas; --letra-secao o h2 de secao. */
    --letra-hero: clamp(2.15rem, 1.35rem + 3.9vw, 4.25rem);
    --letra-titulo: clamp(1.9rem, 1.35rem + 2.7vw, 3.25rem);
    --letra-secao: clamp(1.7rem, 1.25rem + 2.1vw, 2.85rem);
    --letra-subtitulo: 1.125rem;
    --letra-destaque: clamp(1rem, 3vw, 1.25rem);
    --letra-corpo: 1rem;
    /* Abertura da home (o `lead-hsna` do v3) e menu/botao (.95rem do v3). */
    --letra-lead: 1.08rem;
    --letra-controle: .95rem;
    --letra-menor: .875rem;
    --letra-rotulo: .8rem;
    /* Sobretitulo: o v3 usa .72rem (11,5px); aqui .75rem, o piso de 12px
       de rotulo no celular (meio pixel de diferenca). */
    --letra-sobretitulo: .75rem;
    /* Nome no cartao de certificacao (o `cert-nome` do v3). */
    --letra-cartao: clamp(1.3rem, 1.05rem + .85vw, 1.75rem);
    /* Titulo do item de servico (o `servico-titulo` do v3). */
    --letra-item: clamp(1.05rem, .95rem + .4vw, 1.3rem);
    /* Medidas do v3 lado a lado (13/10/2026): nome do cartao da prateleira
       (o h4 do `.tile`), texto de apoio de cartao e servico, link "Conhecer",
       nome da familia no mapa, frase da ligacao e texto do rodape. */
    --letra-tile: min(1.275rem + .3vw, 1.5rem);
    --letra-apoio: .94rem;
    --letra-pequena: .92rem;
    --letra-link: .88rem;
    --letra-familia: clamp(1.05rem, .95rem + .45vw, 1.35rem);
    --letra-ligacao: .78rem;
    /* Paginas de texto do v3 (`inst-*` e `leg-*`, 13/10/2026): titulo de
       secao do corpo, texto do corpo e link do indice. */
    --letra-capitulo: clamp(1.25rem, 1.08rem + .7vw, 1.7rem);
    --letra-texto: .96rem;
    --letra-indice: .84rem;
    /* Titulo de cartao de contato (o h5 do `card-hsna` do v3, 20px). */
    --letra-quadro: 1.25rem;
    /* E-mail e link de canal (o `contato-email` do v3, .85rem laranja). */
    --letra-canal: .85rem;
    /* Faixa de baixo do rodape (o `footer-bottom` do v3, .82rem). */
    --letra-fino: .82rem;

    /* Entrelinha, peso e espacamento entre letras — espelham --ds-lh-*,
       --ds-fw-* e --ds-ls-label do omni. Quanto maior a letra, mais justa a
       entrelinha; peso sao tres degraus e so tres. */
    /* Titulo grande do v3 (`display-hsna`): 1.06 em todos. */
    --entrelinha-hero: 1.06;
    --entrelinha-titulo: 1.06;
    --entrelinha-secao: 1.06;
    --entrelinha-subtitulo: 1.3;
    --entrelinha-destaque: 1.4;
    --entrelinha-corpo: 1.5;
    --entrelinha-lead: 1.75;
    /* v3 (13/10/2026): o sobretitulo mora numa linha de 24px (12px x 2); o
       nome do cartao 1.12; titulo de item 1.2; texto de cartao 1.6 e de
       servico/rodape 1.65. */
    --entrelinha-sobretitulo: 2;
    --entrelinha-cartao: 1.12;
    --entrelinha-item: 1.2;
    --entrelinha-tile: 1.6;
    --entrelinha-apoio: 1.65;
    --peso-normal: 400;
    /* Menu e sobretitulo do v3 (Inter e JetBrains Mono 500). */
    --peso-leve: 500;
    --peso-medio: 600;
    --peso-forte: 700;
    /* So o h1 da home (o `display-hsna` do v3, Sora 800). */
    --peso-hero: 800;
    --espaco-titulo: -.025em;
    --espaco-rotulo: .04em;
    /* Rotulo largo (omni --ds-ls-wide): o sobretitulo em caixa alta do v3. */
    --espaco-largo: .24em;
    /* v3: rotulo do cartao .2em, numero do servico .12em, nome de item -.01em. */
    --espaco-cartao: .2em;
    --espaco-numero: .12em;
    --espaco-item: -.01em;
    --espaco-trilha: .14em;
    --espaco-capitulo: -.015em;
    /* Nome de certificacao e numeros grandes do v3 (`cert-nome`, `stat b`). */
    --espaco-marca: -.02em;

    /* Familias de letra do v3 (pedido do Sylvio, 12/10/2026: o site igual ao
       /v3, inclusive a letra). Sora nos titulos e botoes, Inter no corpo,
       JetBrains Mono em rotulo, sobretitulo e trilha. Os arquivos moram em
       /assets/fonts/ (os mesmos do v3) e o @font-face fica logo abaixo deste
       bloco; a pilha do sistema segura a pagina enquanto a letra chega. */
    --fonte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --fonte-titulo: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --fonte-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Cantos do omni (12/10/2026, com o layout do v3): --raio-1 = --ds-radius-md
       (botao, campo, menu), --raio-2 = --ds-radius-lg (cartao, painel). */
    --raio-1: 10px;
    --raio-2: 16px;
    /* Circulo (omni --ds-radius-circle): o botao de voltar ao topo do v3. */
    --raio-circulo: 50%;
    /* Pilula (omni --ds-radius-pill): a altura decide o raio. */
    --raio-pilula: 999px;

    /* Altura do cabecalho fixo (12/10/2026, layout do v3): logo de 50px + o
       respiro de --esp-4 em cima e embaixo + a linha. O que gruda no topo ao
       rolar (indice) e o que a rolagem leva ate (ancora) descontam isto. */
    --altura-cabecalho: 5.25rem;

    /* Coluna do conteudo = o `.container` do v3 (Bootstrap 5, 13/10/2026):
       toda a largura no celular e, a partir de cada degrau, 540, 720, 960,
       1140 e 1320px, com 12px de respiro dos lados (--esp-3). Cabecalho,
       home, paginas internas e rodape usam a mesma coluna. */
    --coluna: 100%;

    /* Respiros das paginas internas do v3 (13/10/2026), fluidos como la:
       acima da trilha, abaixo do topo (ate a linha), da linha ate o corpo,
       entre secoes do corpo e entre o indice e o texto. */
    --topo-cima: clamp(2.4rem, 5vw, 4rem);
    --topo-baixo: clamp(2.4rem, 4.5vw, 3.5rem);
    --topo-corpo: clamp(2.6rem, 5.5vw, 4.5rem);
    --topo-secao: clamp(2rem, 4vw, 3rem);
    --topo-indice: clamp(2rem, 5vw, 4.5rem);
    /* Largura do indice a esquerda do texto (o `leg` do v3). */
    --largura-indice: 16.25rem;

    /* Desfoque do fundo atras de uma janela (omni --ds-modal-blur): o
       saturate acompanha o blur porque desfoque puro deslava a cor. */
    --desfoque-janela: blur(8px) saturate(140%);

    /* Alvo de toque minimo no celular (44px). */
    --alvo-toque: 2.75rem;

    /* Segmento do seletor de idioma no computador (36px dentro do trilho de
       4px de respiro = 46px, acima do alvo); no celular ele vai a --alvo-toque. */
    --altura-segmento: 2.25rem;

    /* Campo de formulario (omni --ds-field-h = 36px): MENOR que o botao de
       proposito — o campo e onde se escreve, o botao e onde se age. No toque
       sobe para o alvo de 44px (regra do site, PRODUCT.md). */
    --altura-campo: 2.25rem;

    /* Anel de foco do omni (--ds-focus-ring, B-4.48): duas camadas, acento e
       tinta do texto, em box-shadow; o outline transparente e o que sobra no
       alto contraste do sistema. Usado nos controles de formulario. */
    --anel-foco: 0 0 0 2px var(--destaque), 0 0 0 3px var(--texto);

    /* Acabamento do v3 (pedido do Sylvio, 12/10/2026: igual ao /v3).
       --brilho-topo  o leve clarao no alto de todo cartao (13.2 do v3)
       --feixe        traco laranja que se dissolve para a direita (o
                      `spectrum` do v3: regua da abertura da home)
       --feixe-largo  feixe que acende no centro, no alto do rodape (o
                      `spectrum-full` do v3), com o --halo-feixe subindo dele
       --halo-topo    clarao laranja no canto do topo das paginas internas
                      (o `inst-topo` do v3)
       --vidro-*      fundo translucido do cabecalho e do voltar ao topo; o
                      desfoque e o --desfoque-vidro. Sem suporte ao desfoque,
                      o fundo fica solido (@supports).
       Botoes (22/10/2026, aprovado pelo Thiago):
       --destaque-mouse   o laranja do cheio com o mouse (omni --ds-accent-hover)
       --destaque-clique  o laranja do cheio no clique (omni --ds-accent-active)
       --brilho-botao     o clarao em cima do cheio, numa camada POR CIMA da
                          cor: so a cor muda no mouse e ela transiciona. Com
                          o degrade no lugar da cor, o degrade sumia de uma vez
                          e a cor entrava do transparente: o botao piscava
                          escuro por 0,15 s (medido em 22/10/2026)
       --controle-mouse   o fundo que acende no contornado com o mouse (omni
                          --ds-hover: 4% da cor do texto)
       --controle-mouse-camada o mesmo, como camada por cima do fundo que o
                          controle ja tem (voltar ao topo e os botoes do
                          visualizador tem fundo solido: trocar o fundo pelos
                          4% deixava o botao quase transparente)
       --sombra-botao     brilho fino na borda de cima e sombra curta embaixo
                          (por tema, nos blocos de cor) */
    --destaque-mouse: #ffb340;
    --destaque-clique: #db8400;
    --brilho-botao: linear-gradient(180deg, rgb(255 255 255 / .12), rgb(255 255 255 / 0));
    --controle-mouse: color-mix(in srgb, var(--texto) 4%, transparent);
    --controle-mouse-camada: linear-gradient(var(--controle-mouse), var(--controle-mouse));
    --brilho-topo:linear-gradient(180deg, rgb(255 255 255 / .04) 0%, rgb(255 255 255 / 0) 45%);
    --feixe: linear-gradient(90deg, var(--destaque) 0%, rgb(240 150 30 / .6) 52%, rgb(240 150 30 / 0) 100%);
    --feixe-largo: linear-gradient(90deg, rgb(240 150 30 / 0) 0%, rgb(240 150 30 / .18) 12%, rgb(240 150 30 / .72) 34%, var(--destaque) 50%, rgb(240 150 30 / .72) 66%, rgb(240 150 30 / .18) 88%, rgb(240 150 30 / 0) 100%);
    --halo-feixe: radial-gradient(ellipse 46% 100% at 50% 100%, rgb(240 150 30 / .13), rgb(240 150 30 / 0) 72%);
    --halo-topo: radial-gradient(ellipse 60% 100% at 12% 0%, rgb(240 150 30 / .13), rgb(240 150 30 / 0) 62%);
    /* Canais do Omnichannel (15/10/2026): clarao laranja em volta do
       hexagono e a luz que corre pelas linhas do canal ate o centro. */
    --halo-hexagono: drop-shadow(0 0 1.25rem rgb(240 150 30 / .22));
    --luz-ponto: radial-gradient(closest-side, var(--destaque) 0, var(--destaque) 45%, rgb(240 150 30 / .28) 70%, rgb(240 150 30 / 0) 100%);
    --vidro-cromo: rgb(10 10 12 / .78);
    --vidro-elevado: rgb(18 18 23 / .78);
    --desfoque-vidro: blur(14px) saturate(140%);
    /* Hexagono do centro dos mapas (o `eco-hex` do v3), deitado para caber o
       logo sem crescer a altura de que sai a conta dos ramos. */
    --hexagono: polygon(var(--esp-6) 0, calc(100% - var(--esp-6)) 0, 100% 50%, calc(100% - var(--esp-6)) 100%, var(--esp-6) 100%, 0 50%);
}

/* Letras do v3 (os mesmos arquivos). `swap`: o texto aparece na hora com a
   letra do sistema e troca quando o arquivo chega. As duas da primeira tela
   (Sora 800 do titulo e Inter 400 do corpo) sao pre-carregadas no base.html;
   o ?v= aqui tem de ser o mesmo de la, senao o arquivo baixa duas vezes. */
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/sora-latin-400-normal.woff2?v=a87be5f5') format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/sora-latin-600-normal.woff2?v=4c3aca48') format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/sora-latin-700-normal.woff2?v=b2758c7e') format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/sora-latin-800-normal.woff2?v=566a81b2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/inter-latin-400-normal.woff2?v=da03732a') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/inter-latin-500-normal.woff2?v=51205681') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('/assets/fonts/inter-latin-600-normal.woff2?v=2ede57db') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/jetbrains-mono-latin-400-normal.woff2?v=caf0dfde') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('/assets/fonts/jetbrains-mono-latin-500-normal.woff2?v=a21e038a') format('woff2'); }

/* Preferencia do SISTEMA — so vale quando nao ha escolha explicita. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --fundo: #0a0a0c;
        --fundo-cromo: #121217;
        --fundo-elevado: #121217;
        --texto: #f5f5f7;
        --texto-suave: #a5a5b0;
        --borda: #1e1e1f;
        --borda-controle: #6d6f7d;
        --destaque: #f0961e;
        --destaque-leitura: #f0961e;
        --destaque-fundo: #281c0e;
        --destaque-texto: #141414;
        --fundo-campo: #0d0f13;
        --perigo: #f87171;
        --perigo-texto: #f87171;
        /* Informacao (omni --ds-info, --ds-info-text e --ds-info-tint composto
           sobre a superficie, 13/10/2026): aviso de estado. O laranja e da acao. */
        --info: #4ea0ff;
        --info-texto: #7fb4e4;
        --info-fundo: #1a2637;
        /* Fundo e contorno dos tipos de caixa (22/10/2026): o -tint do omni
           (14% da cor sobre a superficie) e o contorno a 30%. */
        --info-borda: color-mix(in srgb, var(--info) 30%, var(--borda));
        --sucesso-fundo: color-mix(in srgb, var(--sucesso) 14%, var(--fundo-elevado));
        --sucesso-borda: color-mix(in srgb, var(--sucesso) 30%, var(--borda));
        --atencao-fundo: color-mix(in srgb, var(--atencao) 14%, var(--fundo-elevado));
        --atencao-borda: color-mix(in srgb, var(--atencao) 30%, var(--borda));
        --destaque-suave: color-mix(in srgb, var(--destaque) 6%, var(--fundo-elevado));
        --destaque-borda: color-mix(in srgb, var(--destaque) 22%, var(--borda));
        --sombra-botao: inset 0 1px 0 rgb(255 255 255 / .3), 0 1px 2px rgb(0 0 0 / .45);
        /* Realce de item sob o mouse (o --bg-2 do v3, 13/10/2026). */
        --fundo-realce: #1a1a21;
        /* Estado pronto e em andamento (omni --ds-success-text e
           --ds-warning-text, 13/10/2026): o ponto da etiqueta de estado. */
        --sucesso: #3fb950;
        --atencao: #fbbf24;
        --foco: #f0961e;
        --sombra: 0 2px 6px rgb(0 0 0 / .36), 0 24px 52px -22px rgb(0 0 0 / .7);
        --veu: rgb(0 0 0 / .66);
    }
}

/* Escolha EXPLICITA do visitante. */
:root[data-theme='dark'] {
    /* Site so escuro e com as cores do /v3 (pedido do Sylvio, 12/10/2026:
       "exatamente igual"). Valores tirados do 01-base.css do v3: fundo
       --bg-0, cromo e cartao --bg-1, texto --ink e --ink-2, laranja --orange
       #F0961E, tinta sobre ele #141414. --borda e o --line do v3 (branco 8%)
       ja misturado no fundo. Unica diferenca: --borda-controle continua a do
       omni, porque o --line-2 do v3 (branco 16%) da 1,5 de contraste e o
       contorno de controle precisa de 3 (WCAG 1.4.11). Os blocos claros ficam
       como referencia do omni e para o teste de contraste. */
    color-scheme: dark;
    --fundo: #0a0a0c;
    --fundo-cromo: #121217;
    --fundo-elevado: #121217;
    --texto: #f5f5f7;
    --texto-suave: #a5a5b0;
    --borda: #1e1e1f;
    --borda-controle: #6d6f7d;
    --destaque: #f0961e;
    --destaque-leitura: #f0961e;
    --destaque-fundo: #281c0e;
    --destaque-texto: #141414;
    --fundo-campo: #0d0f13;
    --perigo: #f87171;
    --perigo-texto: #f87171;
    /* Informacao (omni --ds-info, --ds-info-text e --ds-info-tint composto
       sobre a superficie, 13/10/2026): aviso de estado. O laranja e da acao. */
    --info: #4ea0ff;
    --info-texto: #7fb4e4;
    --info-fundo: #1a2637;
    /* Fundo e contorno dos tipos de caixa (22/10/2026): o -tint do omni
       (14% da cor sobre a superficie) e o contorno a 30%. */
    --info-borda: color-mix(in srgb, var(--info) 30%, var(--borda));
    --sucesso-fundo: color-mix(in srgb, var(--sucesso) 14%, var(--fundo-elevado));
    --sucesso-borda: color-mix(in srgb, var(--sucesso) 30%, var(--borda));
    --atencao-fundo: color-mix(in srgb, var(--atencao) 14%, var(--fundo-elevado));
    --atencao-borda: color-mix(in srgb, var(--atencao) 30%, var(--borda));
    --destaque-suave: color-mix(in srgb, var(--destaque) 6%, var(--fundo-elevado));
    --destaque-borda: color-mix(in srgb, var(--destaque) 22%, var(--borda));
    --sombra-botao: inset 0 1px 0 rgb(255 255 255 / .3), 0 1px 2px rgb(0 0 0 / .45);
    /* Realce de item sob o mouse (o --bg-2 do v3, 13/10/2026). */
    --fundo-realce: #1a1a21;
    /* Estado pronto e em andamento (omni --ds-success-text e
       --ds-warning-text, 13/10/2026): o ponto da etiqueta de estado. */
    --sucesso: #3fb950;
    --atencao: #fbbf24;
    --foco: #f0961e;
    --sombra: 0 2px 6px rgb(0 0 0 / .36), 0 24px 52px -22px rgb(0 0 0 / .7);
    --veu: rgb(0 0 0 / .66);
}

:root[data-theme='light'] {
    --fundo: #f8f9fa;
    --fundo-cromo: #fefdfb;
    --fundo-elevado: #f1f3f5;
    --texto: #212529;
    --texto-suave: #495057;
    --borda: #dee2e6;
    --borda-controle: #878d93;
    --destaque: #ff8c00;
    --destaque-leitura: #995400;
    --destaque-fundo: #fbf2e6;
    --destaque-texto: #2a1d08;
    --fundo-campo: #fefdfb;
    --perigo: #dc2626;
    --perigo-texto: #b91c1c;
    /* Informacao (omni --ds-info, --ds-info-text e --ds-info-tint composto
       sobre a superficie, 13/10/2026): aviso de estado. O laranja e da acao. */
    --info: #2563eb;
    --info-texto: #175893;
    --info-fundo: #edf1fa;
    /* Fundo e contorno dos tipos de caixa (22/10/2026): o -tint do omni
       (14% da cor sobre a superficie) e o contorno a 30%. */
    --info-borda: color-mix(in srgb, var(--info) 30%, var(--borda));
    --sucesso-fundo: color-mix(in srgb, var(--sucesso) 14%, var(--fundo-elevado));
    --sucesso-borda: color-mix(in srgb, var(--sucesso) 30%, var(--borda));
    --atencao-fundo: color-mix(in srgb, var(--atencao) 14%, var(--fundo-elevado));
    --atencao-borda: color-mix(in srgb, var(--atencao) 30%, var(--borda));
    --destaque-suave: color-mix(in srgb, var(--destaque) 6%, var(--fundo-elevado));
    --destaque-borda: color-mix(in srgb, var(--destaque) 22%, var(--borda));
    --sombra-botao: inset 0 1px 0 rgb(255 255 255 / .35), 0 1px 2px rgb(0 0 0 / .14);
    /* Realce de item sob o mouse (o --bg-2 do v3, 13/10/2026). */
    --fundo-realce: #e9ecef;
    /* Estado pronto e em andamento (omni --ds-success-text e
       --ds-warning-text, 13/10/2026): o ponto da etiqueta de estado. */
    --sucesso: #166534;
    --atencao: #92400e;
    --foco: #995400;
    --sombra: 0 8px 24px rgb(0 0 0 / .12);
    --veu: rgb(15 15 25 / .45);
}

* {
    box-sizing: border-box;
}

/* Reserva o lugar da barra de rolagem mesmo na pagina curta, que nao a tem.
   Sem isto, ao ir de uma pagina curta para uma comprida a coluna inteira
   andava 8px para o lado (auditoria de 01/10/2026, S4: 72px x 80px em 1280).
   No celular a barra flutua sobre a pagina e isto nao muda nada. */
html {
    scrollbar-gutter: stable;
    /* Cabecalho fixo: a ancora (#cert-27001, indice, "pular para o conteudo")
       para abaixo dele, e nao escondida atras. */
    scroll-padding-top: calc(var(--altura-cabecalho) + var(--esp-4));
}

body {
    margin: 0;
    min-height: 100vh;
    /* dvh: no celular, 100vh conta a area que a barra de endereco cobre. */
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: var(--fonte);
    font-size: var(--letra-corpo);
    line-height: var(--entrelinha-corpo);
    /* Letra fina sobre fundo escuro, como o body do v3 (13/10/2026): sem
       isto o Mac engrossa o traco de toda letra clara. Windows ignora. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--fundo);
    color: var(--texto);
    /* Sem transicao em prefers-reduced-motion: ver o bloco no fim. */
    transition: background-color .2s ease, color .2s ease;
}

/* Brilho laranja do topo das paginas internas (o `inst-topo` do v3): nasce
   colado na linha do cabecalho e ocupa a largura da tela. Antes ficava no
   .pagina-topo, que comeca 64px abaixo do cabecalho e na coluna de 72rem: o
   brilho aparecia com uma borda reta no meio do nada e cortado na lateral
   (12/10/2026). */
body:has(.pagina-topo) {
    background-image: var(--halo-topo);
    background-position: 0 var(--altura-cabecalho);
    background-repeat: no-repeat;
    background-size: 100% 25rem;
}

/* Titulos quebram a linha de forma equilibrada (sem uma palavra sozinha na
   ultima linha); paragrafos evitam a ultima linha com uma palavra so.
   Navegador sem suporte ignora e quebra como sempre. */
/* Titulo sem regra propria nao herda o 1.5 do corpo: 1.5 num titulo de 18px
   abre um vao que separa as linhas da mesma frase. */
h1,
h2,
h3 {
    font-family: var(--fonte-titulo);
    line-height: var(--entrelinha-subtitulo);
    letter-spacing: var(--espaco-titulo);
    text-wrap: balance;
}

p,
li {
    text-wrap: pretty;
}

/* Link "Pular para o conteudo": fora da tela ate receber foco pelo Tab. */
.pular {
    position: absolute;
    top: var(--esp-2);
    left: var(--esp-2);
    /* Acima do cabecalho fixo (z-index 30): abaixo dele o link aparecia
       escondido atras do cabecalho (medido em 12/10/2026). */
    z-index: 40;
    padding: var(--esp-2) var(--esp-4);
    border-radius: var(--raio-1);
    background: var(--destaque);
    color: var(--destaque-texto);
    font-weight: var(--peso-medio);
    text-decoration: none;
    transform: translateY(-200%);
}

.pular:focus {
    transform: none;
}

/* --- Voltar ao topo ----------------------------------------------------- */

/* Entre o conteudo e o rodape, grudado embaixo da tela (sticky): no fim da
   pagina ele para no proprio lugar e nunca cobre o rodape. O lugar fica
   reservado desde o primeiro desenho, entao aparecer nao empurra nada.
   `safe-area-inset-bottom`: no iPhone sem botao fisico ele nao fica atras da
   barra de gestos. */
.voltar-topo {
    position: sticky;
    bottom: var(--esp-4);
    bottom: calc(var(--esp-4) + env(safe-area-inset-bottom, 0px));
    z-index: 10;
    align-self: flex-end;
    display: grid;
    place-items: center;
    width: var(--esp-7);
    height: var(--esp-7);
    /* Sem margem em cima (13/10/2026): o lugar reservado do botao (64px)
       entra no respiro antes do rodape, que fica o do v3 (110px; 76 no
       celular) somado ao fim da pagina. */
    margin: 0 var(--esp-4) var(--esp-4);
    padding: 0;
    border: 1px solid var(--borda-controle);
    border-radius: var(--raio-circulo);
    background: var(--fundo-elevado);
    box-shadow: var(--sombra);
    color: var(--texto);
    text-decoration: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s, border-color .2s ease;
}

/* Botao do v3 (12/10/2026): circulo de 48px so com a seta e um anel laranja
   que se completa conforme a leitura desce, em vidro fosco como no v3. O nome "Voltar ao topo" continua no
   HTML: o leitor de tela sempre le, e com mouse ou Tab ele aparece como dica
   ao lado do botao. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .voltar-topo {
        background: var(--vidro-elevado);
        -webkit-backdrop-filter: var(--desfoque-vidro);
        backdrop-filter: var(--desfoque-vidro);
    }
}

.voltar-topo:hover {
    /* Mouse neutro como o do .botao contornado (22/10/2026): o laranja fica
       para a acao principal e para o estado marcado. */
    border-color: var(--texto-suave);
    background-image: var(--controle-mouse-camada);
}

.voltar-topo:focus-visible {
    border-color: var(--destaque);
}

.voltar-topo-anel,
.voltar-topo-seta {
    grid-area: 1 / 1;
}

.voltar-topo-anel {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: rotate(-90deg);
}

.voltar-topo-barra {
    fill: none;
    stroke: var(--destaque);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}

/* O anel e a posicao na pagina, ligado a rolagem (scroll-driven animation).
   Sem suporte o bloco nao vale: o anel fica vazio e sobra a seta. */
@supports (animation-timeline: scroll()) {
    .voltar-topo-barra {
        animation-name: voltar-topo-progresso;
        animation-duration: auto;
        animation-timing-function: linear;
        animation-fill-mode: both;
        animation-timeline: scroll(root block);
    }

    @keyframes voltar-topo-progresso {
        to {
            stroke-dashoffset: 0;
        }
    }
}

.voltar-topo-seta {
    transition: transform .2s ease;
}

.voltar-topo:hover .voltar-topo-seta {
    transform: translateY(calc(-1 * var(--esp-1) / 2));
}

/* O texto: so para o leitor de tela, ate o mouse ou o Tab chegar. */
.voltar-topo-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (hover: hover) {
    .voltar-topo:hover .voltar-topo-texto {
        top: 50%;
        right: calc(100% + var(--esp-2));
        width: auto;
        height: auto;
        padding: var(--esp-1) var(--esp-3);
        overflow: visible;
        clip: auto;
        border: 1px solid var(--borda);
        border-radius: var(--raio-1);
        background: var(--fundo-cromo);
        box-shadow: var(--sombra);
        color: var(--texto);
        font-size: var(--letra-menor);
        font-weight: var(--peso-medio);
        transform: translateY(-50%);
    }
}

/* Pelo Tab a dica aparece em qualquer aparelho (teclado ligado no tablet). */
.voltar-topo:focus-visible .voltar-topo-texto {
    top: 50%;
    right: calc(100% + var(--esp-2));
    width: auto;
    height: auto;
    padding: var(--esp-1) var(--esp-3);
    overflow: visible;
    clip: auto;
    border: 1px solid var(--borda);
    border-radius: var(--raio-1);
    background: var(--fundo-cromo);
    box-shadow: var(--sombra);
    color: var(--texto);
    font-size: var(--letra-menor);
    font-weight: var(--peso-medio);
    transform: translateY(-50%);
}

/* Com JS, escondido ate o visitante rolar uma tela inteira. `visibility` tira
   o botao tambem do Tab e do leitor de tela enquanto ele nao aparece. Sem JS
   esta regra nao vale e o link fica sempre visivel. */
.js .voltar-topo:not([data-visivel]) {
    visibility: hidden;
    opacity: 0;
    transform: translateY(var(--esp-2));
}

/* Marco a uma tela do topo, observado pelo voltar-topo.js. */
.voltar-topo-marco {
    position: absolute;
    top: 100vh;
    top: 100dvh;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

/* Alvo do foco do botao (o cabecalho, tabindex="-1"): recebe o foco so para o
   proximo Tab seguir dali; nao e controle, entao nao ganha anel. */
[tabindex='-1']:focus {
    outline: none;
}

/* Degraus da coluna (o `.container` do v3): 576, 768, 992, 1200 e 1400px. */
@media (min-width: 36rem) {
    :root {
        --coluna: 33.75rem;
    }
}

@media (min-width: 48rem) {
    :root {
        --coluna: 45rem;
    }
}

@media (min-width: 62rem) {
    :root {
        --coluna: 60rem;
    }
}

@media (min-width: 75rem) {
    :root {
        --coluna: 71.25rem;
    }
}

@media (min-width: 87.5rem) {
    :root {
        --coluna: 82.5rem;
    }
}

/* --- Cabecalho e menu --------------------------------------------------- */

/* O fundo e a linha vao de ponta a ponta; o conteudo fica na coluna de 72rem,
   a mesma da home (.home-faixa) e do rodape (.rodape-mapa). Assim o logo
   comeca onde comeca o titulo da pagina e o menu termina onde termina o
   rodape, em qualquer largura de tela. */
.cabecalho {
    /* Layout do v3 (12/10/2026): o cabecalho acompanha a rolagem. O vidro
       fosco do v3 entra no @supports logo abaixo; sem ele, fundo solido. */
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid var(--borda);
    background: var(--fundo-cromo);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .cabecalho {
        background: var(--vidro-cromo);
        -webkit-backdrop-filter: var(--desfoque-vidro);
        backdrop-filter: var(--desfoque-vidro);
    }
}

.cabecalho-faixa {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-3);
    align-items: center;
    justify-content: space-between;
    max-width: var(--coluna);
    margin: 0 auto;
    padding: var(--esp-4) var(--esp-3);
}

.marca {
    font-size: var(--letra-destaque);
    font-weight: var(--peso-forte);
    color: var(--texto);
    text-decoration: none;
    letter-spacing: var(--espaco-titulo);
}

.marca-forte {
    color: var(--destaque-leitura);
}

/* O menu ocupa o espaco entre o logo e o botao de contato, encostado no botao
   (como o `ms-auto` do v3). */
.navegacao {
    margin-left: auto;
}

/* `>` de proposito: sem ele esta regra tambem pega os `.submenu` (que sao ul
   dentro da nav) e, por ser mais especifica que `.submenu`, vence o
   `display: none` deles — os quatro submenus ficavam abertos o tempo todo. */
.navegacao > ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Menu do v3 (12/10/2026, no lugar do menu do www de 09/10): letra de corpo,
   peso medio, cinza de apoio; passar o mouse acende para a cor do texto. */
.navegacao a {
    display: inline-block;
    /* 8px dos lados, como o nav-link do v3: com a Inter (mais larga que a
       letra do sistema) os 12px de antes jogavam o menu em espanhol para
       baixo do logo em 1280px (cabecalho de 143px, medido em 12/10/2026). */
    padding: var(--esp-2);
    border-radius: var(--raio-1);
    color: var(--texto-suave);
    font-size: var(--letra-controle);
    font-weight: var(--peso-leve);
    text-decoration: none;
    /* Auditoria do menu (15/10/2026): a cor mudava num estalo. */
    transition: color .15s ease, background-color .15s ease;
}

.navegacao a:hover {
    color: var(--texto);
}

/* aria-current marca a pagina atual: o estilo segue o estado acessivel em vez
   de uma classe paralela, entao os dois nunca divergem. Cor do texto E um
   traco laranja embaixo: a cor sozinha nao pode ser o unico sinal. */
.navegacao > ul > li > a[aria-current='page'] {
    color: var(--texto);
    box-shadow: inset 0 -2px 0 var(--destaque);
}

.navegacao a[aria-current='page'] {
    color: var(--texto);
}

/* Menu aberto em linha a partir de 992px, como o `navbar-expand-lg` do v3;
   abaixo disso, o botao "Menu" (bloco do celular, no fim do arquivo). Entre
   os itens, 16px (`gap-lg-3`). */
@media (min-width: 62rem) {
    .navegacao > ul {
        gap: var(--esp-4);
    }
}

/* Botao de contato do cabecalho (o "Fale conosco" do v3): o mesmo destino do
   item Contato, como acao principal. So aparece de 75rem (1200px) para cima,
   onde a coluna do v3 tem 1116px: abaixo disso (coluna de 936px) logo + sete
   itens + botao nao cabem numa linha e o botao caia para uma segunda linha
   (medido em 13/10/2026).
   Abaixo dali fica o item Contato do menu, que leva ao mesmo lugar. */
/* `.cabecalho` na frente: o `.botao`, mais abaixo no arquivo, poe
   `display: inline-flex` e venceria uma regra de mesmo peso. */
.cabecalho .cabecalho-cta {
    display: none;
    /* Botao pequeno do v3 (.5rem 1rem, 41px): so aparece de 1120px para
       cima, com mouse; o alvo de 44px do toque nao se aplica aqui. */
    min-height: 0;
    padding: var(--esp-2) var(--esp-4);
}

@media (min-width: 75rem) {
    /* 24px entre o ultimo item e o botao, como no v3 (16 + `ms-lg-2`). */
    .cabecalho .cabecalho-cta {
        display: inline-flex;
        margin-left: var(--esp-3);
    }

    /* Em espanhol o menu e o botao sao mais longos: na coluna de 1116px
       passavam 5px e o botao caia para uma segunda linha (13/10/2026). O
       botao aparece na coluna seguinte, de 1400px; antes disso fica o item
       Contacto do menu, que leva ao mesmo lugar. */
    .cabecalho .cabecalho-cta:lang(es) {
        display: none;
    }
}

@media (min-width: 87.5rem) {
    .cabecalho .cabecalho-cta:lang(es) {
        display: inline-flex;
    }
}

/* Botao "Menu" — so existe no celular, e so com JavaScript. Sem JS o menu fica
   aberto (como sempre foi): um botao que nao abre nada engana mais que a sua
   ausencia. O `hidden` sai no menu.js. */
.botao-menu {
    display: none;
}

/* --- Conteudo ----------------------------------------------------------- */

.conteudo {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* 12px de respiro lateral, o do `.container` do v3. */
    padding: var(--esp-7) var(--esp-3);
}

.conteudo h1 {
    margin: 0 0 var(--esp-2);
    font-size: var(--letra-titulo);
    font-weight: var(--peso-hero);
    line-height: var(--entrelinha-titulo);
    letter-spacing: var(--espaco-titulo);
}

/* As paginas internas usam a MESMA coluna de 72rem do cabecalho, da home e do
   rodape: o titulo comeca na mesma linha do logo (auditoria de 01/10/2026,
   S1). Antes a coluna era de 44rem centralizada, e o titulo ficava 224px a
   direita do logo numa tela de 1920.

   O texto continua na medida de leitura de 44rem (cerca de 75 letras por
   linha): o limite passa para cada bloco. Cartoes e o bloco de contato sao
   navegacao, nao texto corrido, e usam a coluna inteira (S2). */
.conteudo-pagina {
    align-items: flex-start;
    justify-content: flex-start;
    max-width: var(--coluna);
    margin: 0 auto;
    /* v3: o topo comeca --topo-cima abaixo do cabecalho e a pagina termina
       com o respiro de secao (`inst-corpo`) antes do rodape. */
    padding-top: var(--topo-cima);
    /* + os 64px do botao de voltar ao topo = os 76px do v3 no celular. */
    padding-bottom: var(--esp-3);
    text-align: left;
    width: 100%;
}

/* + 64px do botao = 112px, o respiro de secao do v3 (110px). */
@media (min-width: 36rem) {
    .conteudo-pagina {
        padding-bottom: var(--esp-7);
    }
}

/* Ultima secao da home: o mesmo desconto do botao de voltar ao topo. */
.home > .home-secao:last-child {
    padding-bottom: var(--esp-3);
}

@media (min-width: 36rem) {
    .home > .home-secao:last-child {
        padding-bottom: var(--esp-7);
    }
}

.conteudo-pagina > * {
    max-width: 44rem;
}

/* Topo da pagina interna (layout do v3, 12/10/2026): trilha, titulo e frase
   de abertura numa faixa separada do corpo por uma linha. A faixa ocupa a
   coluna inteira (a linha vai de borda a borda); o titulo e a frase ficam na
   medida de leitura. */
/* O `inst-topo` do v3: a linha de baixo vai de ponta a ponta da tela (a
   borda-imagem sai para os lados sem criar rolagem). */
.pagina-topo {
    width: 100%;
    margin-bottom: var(--topo-corpo);
    padding-bottom: var(--topo-baixo);
    border-bottom: 1px solid var(--borda);
    border-image: linear-gradient(var(--borda), var(--borda)) 0 0 1 0 / 0 0 1px 0 / 0 100vw 0 100vw;
}

.pagina-topo .sobretitulo {
    margin-bottom: var(--esp-2);
}

/* Banner da pagina de produto (21/10/2026, partes-banner-produto.html): no
   celular embaixo do titulo, na largura toda; a partir de 64rem ao lado,
   com o texto a esquerda. Prancheta pontilhada como os desenhos, e um brilho
   laranja atras do escudo. */
.banner-produto {
    margin-top: var(--esp-5);
    padding: var(--esp-3);
    border: 1px solid var(--borda);
    border-radius: var(--raio-2);
    background-image:
        radial-gradient(circle at 27% 45%, var(--destaque-fundo), transparent 38%),
        radial-gradient(circle, var(--borda) 1px, transparent 1.5px);
    background-size: 100% 100%, var(--esp-4) var(--esp-4);
}

.banner-produto svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.banner-escudo {
    filter: var(--halo-hexagono);
}

.banner-linha {
    fill: none;
    stroke: var(--destaque);
    stroke-width: 2;
}

.banner-ligacao {
    fill: none;
    stroke: var(--borda-controle);
    stroke-width: 1.5;
    stroke-dasharray: 4 4;
}

.banner-ponto {
    fill: var(--fundo);
    stroke: var(--destaque);
    stroke-width: 2;
}

.banner-aio {
    fill: var(--fundo-elevado);
    stroke: var(--destaque);
    stroke-width: 1.5;
}

.banner-aio-nome {
    fill: var(--texto);
    font-family: var(--fonte-titulo);
    font-size: var(--letra-subtitulo);
    font-weight: var(--peso-forte);
}

.banner-vizinho {
    fill: var(--fundo-elevado);
    stroke: var(--borda);
    stroke-width: 1;
}

.banner-vizinho-icone {
    color: var(--texto-suave);
    fill: currentColor;
}

@media (min-width: 64rem) {
    /* As quatro linhas do texto (trilha, sobretitulo, titulo, frase) no
       tamanho delas, e a sobra de altura do banner numa quinta linha vazia:
       sem ela a grade repartia a sobra entre as linhas, e o titulo ficava
       43px longe da frase (medido, 22/10/2026). */
    .pagina-topo-banner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
        grid-template-rows: auto auto auto auto 1fr;
        column-gap: var(--esp-7);
        align-items: start;
    }

    .pagina-topo-banner > :not(.banner-produto) {
        grid-column: 1;
    }

    /* Na grade as margens somam (no bloco comum elas se sobrepoem): o titulo
       (8px embaixo) e a frase (16px em cima) davam 24px, e nas paginas sem
       banner sao 16. */
    .pagina-topo-banner > h1 {
        margin-bottom: 0;
    }

    .pagina-topo-banner > .banner-produto {
        grid-column: 2;
        grid-row: 1 / -1;
        margin-top: 0;
    }
}

/* A primeira secao logo abaixo do topo nao repete a linha nem o vao: o topo
   ja termina numa linha (antes saiam duas linhas com ~70px vazios entre
   elas em /contato e /empresa/infraestrutura, 12/10/2026). */
/* O vao entre o topo e o conteudo e so a margem do topo, igual em toda
   pagina (antes 48px numas e 72px noutras). */
.conteudo-pagina > .pagina-topo + *,
.pagina-topo + .pagina-com-indice .pagina-corpo > :first-child,
.pagina-topo + .pagina-com-indice > .indice,
.pagina-abertura > :first-child {
    margin-top: 0;
}

.pagina-topo + .contato-secao,
.pagina-topo + .pagina-com-indice .pagina-corpo > .pagina-secao:first-child,
.pagina-topo + .pagina-com-indice .pagina-corpo > .familia-previa + .pagina-secao {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.conteudo-pagina > .pagina-topo,
.conteudo-pagina > .cartoes,
.conteudo-pagina > .contato,
.conteudo-pagina > .contato-secao,
.conteudo-pagina > .familias-pagina,
.conteudo-pagina > .empresa-grupo,
.conteudo-pagina > .familia-previa,
.conteudo-pagina > .produtos-pagina,
.conteudo-pagina > .familia-secao,
.conteudo-pagina > .pagina-com-indice,
.conteudo-pagina > .evento {
    max-width: none;
}

/* --- Home: o Ecossistema Hosanna (ADR-0008) ------------------------------ */

.home {
    flex: 1;
}

/* Faixa de leitura: a pagina ocupa a tela, o conteudo fica numa coluna. */
.home-faixa {
    max-width: var(--coluna);
    margin: 0 auto;
    padding: 0 var(--esp-3);
}

.home-abertura {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* `section pb-5` do v3: respiro de secao em cima, 48px embaixo. */
    padding: var(--secao-celular) 0 var(--esp-7);
}

@media (min-width: 36rem) {
    .home-abertura {
        padding-top: var(--secao);
    }
}

/* Arte do v3 (12/10/2026), atras da abertura e a direita. Duas mascaras de
   transparencia: uma apaga a esquerda (o titulo fica sobre fundo liso, com o
   contraste da paleta intacto) e outra apaga a base. Sao mascaras de alfa,
   nao cor: nenhuma cor nova entra na pagina. So no tema escuro (regras no fim
   deste bloco): a arte e escura e foi desenhada para fundo escuro. */
.home-arte {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    display: none;
    width: min(78%, 94rem);
    height: 100%;
    object-fit: cover;
    object-position: center right;
    opacity: .85;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 50%, black 94%), linear-gradient(to bottom, black 72%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0%, transparent 50%, black 94%), linear-gradient(to bottom, black 72%, transparent 100%);
    mask-composite: intersect;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .home-arte {
        display: block;
    }
}

:root[data-theme='dark'] .home-arte {
    display: block;
}

/* No celular nao sobra faixa a direita: a arte ocupa a largura e recua para
   textura, so no topo, e some antes do paragrafo. */
@media (max-width: 64rem) {
    .home-arte {
        width: 100%;
        opacity: .22;
        object-position: center;
        -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 92%);
        mask-image: linear-gradient(to bottom, black 40%, transparent 92%);
    }
}

.home-abertura h1 {
    /* col-lg-9 do v3: 3/4 da coluna. */
    max-width: 75%;
    margin: 0;
    font-size: var(--letra-hero);
    font-weight: var(--peso-hero);
    line-height: var(--entrelinha-hero);
    letter-spacing: var(--espaco-titulo);
}

.home-lead {
    max-width: 56ch;
    margin: 0 0 var(--esp-5);
    font-size: var(--letra-lead);
    line-height: var(--entrelinha-lead);
    color: var(--texto-suave);
}

.home-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-3);
}

/* Secoes do v3: respiro grande entre elas e fundo alternado no lugar da
   linha (12/10/2026). 64px no celular, 96px no computador. */
.home-secao {
    padding: var(--secao-celular) 0;
}

.home-secao-alt {
    background: var(--fundo-cromo);
}

@media (min-width: 36rem) {
    .home-secao {
        padding: var(--secao) 0;
    }
}

/* Do titulo (ou da frase de apoio) ao conteudo: 48px, o `mb-5` do v3. */
.home-secao h2 {
    margin: 0 0 var(--esp-7);
    font-size: var(--letra-secao);
    font-weight: var(--peso-hero);
    line-height: var(--entrelinha-secao);
}

/* Secoes da home na ordem do v3 (12/10/2026): a frase de apoio sob o titulo
   (o `lead-hsna` do v3) e o link para a pagina da secao (o `tile-link` do v3:
   Sora 600 em laranja, com seta). */
.home-secao h2:has(+ .home-secao-lead) {
    margin-bottom: var(--esp-2);
}

.home-secao-lead {
    max-width: 56ch;
    margin: 0 0 var(--esp-7);
    color: var(--texto-suave);
    font-size: var(--letra-lead);
    line-height: var(--entrelinha-lead);
}

.home-ir {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    min-height: var(--alvo-toque);
    color: var(--destaque-leitura);
    font-family: var(--fonte-titulo);
    font-size: var(--letra-controle);
    font-weight: var(--peso-medio);
    text-decoration: none;
}

.home-ir:hover {
    text-decoration: underline;
}

.home-ir span {
    transition: transform .2s ease;
}

.home-ir:hover span {
    transform: translateX(3px);
}

/* --- Cartoes de certificacao e premio da home (o `.cert` do v3) ----------
   O cartao inteiro e o link. Em cima, em rotulo mono laranja, o que a norma
   protege; embaixo, o codigo dela em Sora 800 (o que o comprador procura).
   Fundo da pagina sobre a secao no cromo, como no v3, com o fio laranja no
   topo que acende no passar do mouse. */
.certs {
    display: grid;
    /* 24px entre cartoes, o `g-4` do v3. */
    gap: var(--esp-5);
    margin: 0 0 var(--esp-5);
    padding: 0;
    list-style: none;
}

@media (min-width: 36rem) {
    .certs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .certs-um {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (min-width: 64rem) {
    .certs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .certs-um {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cert {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--esp-2);
    height: 100%;
    padding: var(--esp-5);
    overflow: hidden;
    border: 1px solid var(--borda);
    border-radius: var(--raio-2);
    background-color: var(--fundo);
    background-image: var(--brilho-topo);
    color: var(--texto);
    text-decoration: none;
    transition: border-color .22s ease, transform .22s ease;
}

.cert::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: var(--feixe);
    opacity: .35;
    transition: opacity .22s ease;
}

.cert:hover {
    border-color: var(--borda-controle);
    transform: translateY(-1px);
}

.cert:hover::before {
    opacity: 1;
}

/* Separada: navegador que nao conhece :focus-visible descarta a lista toda. */
.cert:focus-visible::before {
    opacity: 1;
}

.cert-id {
    color: var(--destaque-leitura);
    font-family: var(--fonte-mono);
    font-size: var(--letra-sobretitulo);
    font-weight: var(--peso-normal);
    letter-spacing: var(--espaco-cartao);
    text-transform: uppercase;
}

.cert-nome {
    font-family: var(--fonte-titulo);
    font-size: var(--letra-cartao);
    font-weight: var(--peso-hero);
    line-height: var(--entrelinha-cartao);
    letter-spacing: var(--espaco-marca);
}

.cert-cobre {
    color: var(--texto-suave);
    font-size: var(--letra-menor);
}

/* Cartao da prateleira (abertura e Solucoes), o `.tile` do v3: traco laranja
   de 3px no topo, fundo elevado sobre a pagina, nome em Sora 700 no tamanho
   de item. "Conhecer" no pe, na mesma altura em todos. */
.cert-compacto {
    background-color: var(--fundo-elevado);
}

.cert-compacto::before {
    display: none;
}

.cert-compacto .cert-nome {
    font-size: var(--letra-tile);
    font-weight: var(--peso-forte);
    line-height: var(--entrelinha-item);
    letter-spacing: var(--espaco-item);
}

.cert-compacto .cert-cobre {
    font-size: var(--letra-pequena);
    line-height: var(--entrelinha-tile);
}

.cert-ir {
    margin-top: auto;
    padding-top: var(--esp-3);
    color: var(--destaque-leitura);
    font-family: var(--fonte-titulo);
    font-size: var(--letra-link);
    font-weight: var(--peso-medio);
}

/* Cinco cartoes (abertura e Solucoes): um por linha no celular, dois a
   partir de 36rem com o quinto na linha inteira (sem cartao sozinho com um
   buraco ao lado), cinco numa linha no computador. */
@media (min-width: 36rem) {
    .certs-cinco > li:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (min-width: 64rem) {
    .certs-cinco {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .certs-cinco > li:last-child:nth-child(odd) {
        grid-column: auto;
    }
}

/* --- Servicos da home (o `#servicos` do v3) --------------------------------
   Duas colunas no computador: a chamada (presa no topo ao rolar) e a lista
   numerada, com linha entre os itens e um fio laranja que corre sobre a
   linha no passar do mouse. */
.home-servicos {
    display: grid;
    gap: var(--esp-6);
}

.home-servicos-trilho h2 {
    margin-bottom: var(--esp-4);
}

.servicos {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
}

.servico {
    position: relative;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    column-gap: var(--esp-6);
    padding: var(--esp-6) 0;
    border-top: 1px solid var(--borda);
}

.servico:last-child {
    border-bottom: 1px solid var(--borda);
}

.servico::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--feixe);
    transition: width .45s cubic-bezier(.22, .61, .36, 1);
}

.servico:hover::before,
.servico:focus-within::before {
    width: 100%;
}

.servico-num {
    padding-top: var(--esp-1);
    color: var(--texto-suave);
    font-family: var(--fonte-mono);
    font-size: var(--letra-rotulo);
    letter-spacing: var(--espaco-numero);
    transition: color .25s ease;
}

.servico:hover .servico-num {
    color: var(--destaque-leitura);
}

.servico-corpo {
    display: grid;
    gap: var(--esp-2);
}

.servico-titulo {
    margin: 0;
    font-size: var(--letra-item);
    font-weight: var(--peso-forte);
    line-height: var(--entrelinha-item);
    letter-spacing: var(--espaco-item);
}

.servico-titulo a {
    color: var(--texto);
    text-decoration: none;
}

.servico-titulo a:hover {
    color: var(--destaque-leitura);
    text-decoration: underline;
}

.servico-texto {
    max-width: 58ch;
    margin: 0;
    color: var(--texto-suave);
    font-size: var(--letra-apoio);
    line-height: var(--entrelinha-apoio);
}

@media (min-width: 64rem) {
    /* A grade de 12 colunas do v3 com 48px entre elas (`g-5`): a chamada em
       4 colunas e a lista em 7, depois de uma coluna vazia (`offset-lg-1`). */
    .home-servicos {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: var(--esp-7);
        align-items: start;
    }

    .home-servicos-trilho {
        grid-column: 1 / span 4;
    }

    .home-servicos > .servicos {
        grid-column: 6 / span 7;
    }

    .home-servicos-trilho {
        position: sticky;
        top: calc(var(--altura-cabecalho) + var(--esp-5));
    }
}

/* Sobretitulo (o `eyebrow` do v3): letra mono, caixa alta, espacada, em
   laranja de leitura, com um quadrado laranja antes. Fica acima do titulo e
   diz a que parte do site a secao pertence. */
.sobretitulo {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    margin: 0 0 var(--esp-4);
    color: var(--destaque-leitura);
    font-family: var(--fonte-mono);
    font-size: var(--letra-sobretitulo);
    font-weight: var(--peso-leve);
    letter-spacing: var(--espaco-largo);
    line-height: var(--entrelinha-sobretitulo);
    text-transform: uppercase;
}

.sobretitulo::before {
    content: '';
    flex: none;
    width: var(--esp-2);
    height: var(--esp-2);
    background: var(--destaque);
}

/* Traco laranja sob o titulo da abertura (o `spectrum` do v3): acende na
   esquerda e se dissolve para a direita. Decorativo. */
.regua {
    display: block;
    width: calc(3 * var(--esp-7));
    height: 3px;
    margin: var(--esp-5) 0;
    background: var(--feixe);
}

.selo {
    display: inline-block;
    margin: 0 0 var(--esp-2);
    padding: var(--esp-1) var(--esp-3);
    border-radius: var(--raio-1);
    background: var(--destaque-fundo);
    color: var(--destaque-leitura);
    font-size: var(--letra-rotulo);
    font-weight: var(--peso-medio);
}

/* Botoes de acao. So um "cheio" por bloco: ele e a acao principal. */
/* Botoes do v3 (12/10/2026): sobem 1px ao passar o mouse e voltam no clique.
   Sem movimento quando o visitante pede menos movimento (bloco no fim). */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--alvo-toque);
    /* .72rem 1.4rem do v3 (48px de altura), na escala do site. */
    padding: var(--esp-3) var(--esp-5);
    border: 1px solid var(--borda-controle);
    border-radius: var(--raio-1);
    color: var(--texto);
    font-family: var(--fonte-titulo);
    font-size: var(--letra-controle);
    font-weight: var(--peso-medio);
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}

/* Estados (22/10/2026, aprovado pelo Thiago; antes eram os do v3): sobe 1px
   ao passar o mouse. O contornado nao fica mais laranja: o contorno clareia
   e o fundo acende de leve (o hover do .ds-btn do omni e o dos cartoes), e o
   laranja fica so na acao principal. O cheio tem brilho fino em cima e
   sombra curta (parece peca que se aperta) e usa as cores de mouse e de
   clique do omni, em vez de clarear por filtro. */
.botao:hover {
    border-color: var(--texto-suave);
    background-image: var(--controle-mouse-camada);
    transform: translateY(-1px);
}

.botao:active {
    border-color: var(--texto-suave);
    background-image: var(--controle-mouse-camada);
    transform: none;
}

.botao-cheio {
    border-color: var(--destaque);
    background-color: var(--destaque);
    background-image: var(--brilho-botao);
    color: var(--destaque-texto);
    box-shadow: var(--sombra-botao);
}

.botao-cheio:hover {
    border-color: var(--destaque-mouse);
    background-color: var(--destaque-mouse);
}

.botao-cheio:active {
    border-color: var(--destaque-clique);
    background-color: var(--destaque-clique);
    box-shadow: none;
}

/* Moldura em hexagono do centro do mapa da Network (.mapa-marca, o `eco-hex`
   do v3): contorno laranja e miolo tingido, desenhados ATRAS do conteudo
   pelos dois pseudo-elementos. A caixa em si fica sem fundo: assim quem mede
   o contraste acha o fundo escuro da secao. O mapa do Inicio, que tambem a
   usava, virou o hexagrama em 23/10/2026. */
.mapa-marca {
    position: relative;
    isolation: isolate;
}

.mapa-marca::before,
.mapa-marca::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--destaque);
    clip-path: var(--hexagono);
}

.mapa-marca::after {
    inset: var(--eco-linha);
    background: var(--destaque-fundo);
}

.familias {
    position: relative;
    display: grid;
    /* 24px, o `g-4` do v3 (13/10/2026). */
    gap: var(--esp-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.familia {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--esp-5);
    border: 1px solid var(--borda);
    border-radius: var(--raio-2);
    background: var(--fundo-elevado);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

/* Cartao com pagina: o cartao inteiro e o alvo (o link estica por cima dele,
   ver .familia a::after), e o contorno acende no passar do mouse e no foco. */
/* Efeito de mouse de todo cartao clicavel (22/10/2026, o mesmo dos cartoes
   novos que o Thiago aprovou): sobe 1px e o contorno clareia, sem sombra e
   sem contorno laranja. Antes subia 3px com sombra e contorno laranja. */
.familia:has(a):hover {
    border-color: var(--borda-controle);
    transform: translateY(-1px);
}

.familia:has(a:focus-visible) {
    outline: 2px solid var(--foco);
    outline-offset: 2px;
}

/* Mapa de uma suite (/network, 10/10/2026): o inventario no centro e as
   capacidades em volta, pedido do Sylvio. Mesma gramatica do mapa do
   ecossistema da home (.eco-mapa) e do fluxograma do v3: ate 64rem uma arvore
   vertical com trilho a esquerda; de 64rem em diante o centro NO MEIO, a
   fileira de cima descendo e a de baixo subindo ate a barra.

   As linhas sao pseudo-elementos, decorativas: no leitor de tela sai o no do
   centro e depois a lista. O que muda em relacao ao .eco-mapa: os nos nao tem
   icone nem link, entao o galho do celular chega na altura do nome. */
.mapa-suite {
    /* Linhas e setas do diagrama do v3, como o .eco-mapa. */
    --eco-linha: 2px;
    --eco-cor: var(--destaque);
    /* Altura da moldura do centro. Ela e DECLARADA, e nao deixada ao texto,
       porque o ramo de cada no tem altura fixa e precisa terminar exatamente
       na barra: --eco-ramo abaixo sai desta medida. Cabem as duas linhas do
       centro (nome 16px + papel 14px, as duas em 1.5) com folga de 9px. */
    --mapa-centro-altura: calc(var(--esp-7) + var(--esp-5) + var(--esp-4));
    margin-top: var(--esp-5);
}

.mapa-centro {
    display: flex;
    width: fit-content;
    margin: 0;
}

/* Hexagono do centro, como o do v3: nome em Sora 800 (o `eco-hex-texto` de
   la). Contorno e miolo como no .eco-marca. */
.mapa-marca {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--esp-1);
    padding: var(--esp-4) var(--esp-7);
    font-family: var(--fonte-titulo);
    font-size: var(--letra-subtitulo);
    font-weight: var(--peso-hero);
    text-align: center;
    /* Nome em --texto, como o `eco-hex-texto` do v3 (--ink): sem isso
       herdava o cinza do paragrafo (refino de cor, 15/10/2026). */
    color: var(--texto);
}

/* O papel do centro e uma frase (no v3 era um nome curto): fica em letra de
   texto, para nao virar duas linhas largas de caixa alta. O hexagono para
   em 32rem e a frase quebra dentro dele. */
.mapa-marca-papel {
    max-width: 24rem;
    color: var(--texto-suave);
    font-family: var(--fonte);
    font-size: var(--letra-menor);
    font-weight: var(--peso-normal);
}

.mapa-nos {
    position: relative;
    display: grid;
    gap: var(--esp-4);
    margin: 0;
    padding: var(--esp-5) 0 0 var(--esp-5);
    list-style: none;
}

/* No do v3 (`eco-no`): traco laranja no topo, nome em Sora e o papel em
   rotulo mono. */
.mapa-nos > li {
    position: relative;
    padding: var(--esp-4) var(--esp-5);
    border: 1px solid var(--borda);
    border-radius: var(--raio-1);
    background: var(--fundo-elevado);
}

.mapa-no-nome {
    margin: 0;
    /* Titulo do no em --texto, como o `eco-no-nome` do v3 (--ink). */
    color: var(--texto);
    font-family: var(--fonte-titulo);
    font-size: var(--letra-subtitulo);
    font-weight: var(--peso-forte);
}

/* Rotulo em cinza, como o `eco-no-cat` do v3: o laranja fica so no traco,
   nas linhas, no icone e no hexagono. O --ink-3 do v3 (#70707c) da 3,9:1
   em letra de 12px, abaixo do piso de 4,5 do site; por isso --texto-suave. */
.mapa-no-papel {
    margin: var(--esp-1) 0 0;
    color: var(--texto-suave);
    font-family: var(--fonte-mono);
    font-size: var(--letra-sobretitulo);
    font-weight: var(--peso-leve);
    letter-spacing: var(--espaco-largo);
    text-transform: uppercase;
}

.mapa-no-nota {
    margin: var(--esp-2) 0 0;
    color: var(--texto-suave);
    font-size: var(--letra-menor);
}

/* Galho: do trilho (a --esp-3 da borda da lista) ate o no, na altura do nome. */
.mapa-nos > li::before {
    content: '';
    position: absolute;
    top: calc(var(--esp-4) + var(--esp-3));
    left: calc(-1 * var(--esp-3));
    width: var(--esp-3);
    border-top: var(--eco-linha) solid var(--eco-cor);
}

/* Trilho: cada no desenha o seu pedaco, como em .familia. */
.mapa-nos > li::after {
    content: '';
    position: absolute;
    top: calc(-1 * var(--esp-4));
    bottom: calc(-1 * var(--esp-2));
    left: calc(-1 * var(--esp-3));
    border-left: var(--eco-linha) solid var(--eco-cor);
}

.mapa-nos > li:first-child::after {
    /* Sobe ate a quina do hexagono, como no .eco-mapa (este e 8px mais alto). */
    top: calc(-1 * (var(--esp-5) + var(--esp-4) + var(--esp-1)));
}

.mapa-nos > li:last-child::after {
    bottom: auto;
    height: calc(var(--esp-5) + var(--esp-4) + var(--esp-3));
}

/* Acabamento dos canais (15/10/2026): o cartao com o clarao do topo dos
   cartoes do v3 sobre o fundo translucido, o icone do canal a esquerda do
   nome e o hexagono com halo laranja. */
.mapa-nos > li:has(> .mapa-no-icone) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--esp-4);
    align-items: center;
}

.mapa-no-icone {
    display: grid;
    grid-row: span 2;
    place-items: center;
    width: var(--esp-7);
    height: var(--esp-7);
    border: 1px solid var(--destaque);
    border-radius: var(--raio-1);
    background: var(--destaque-fundo);
    color: var(--destaque);
}

/* Halo fixo do centro nos dois mapas (Omnichannel e /network, 16/10/2026):
   marca o protagonista sem movimento. A luz que corre fica so nos canais,
   onde tudo chega ao centro; na /network o fluxo vai e volta ("desce" e
   "volta"), e uma luz numa direcao so contaria metade. */
.mapa-suite .mapa-marca {
    filter: var(--halo-hexagono);
}

/* Luz: no celular corre pelo trilho, de baixo para cima, ate o hexagono.
   Cada canal acende depois do anterior. Enfeite: some com movimento
   reduzido (bloco logo abaixo). A luz e um ponto redondo de 10px com halo
   (--luz-ponto), centrado na linha de 2px: o traco alongado de antes parecia
   um defeito parado no print (refino de cor, 15/10/2026). */
.mapa-pulso {
    position: absolute;
    top: calc(-1 * var(--esp-4));
    bottom: calc(-1 * var(--esp-2));
    left: calc(-1 * var(--esp-3) - 4px);
    width: 10px;
    background: var(--luz-ponto) no-repeat;
    background-size: 10px 10px;
    /* Uma vez so, e para (16/10/2026): o ultimo canal acende em 1,8s e a
       luz termina em 4,2s, antes dos 5 segundos a partir dos quais a WCAG
       2.2.2 (nivel A) pede um botao de pausa para o que se mexe sozinho.
       `both`: invisivel antes de comecar e depois de terminar. */
    animation: luz-sobe 2.4s linear 1 both;
    pointer-events: none;
}

.hub-no:nth-child(2) .mapa-pulso { animation-delay: .6s; }
.hub-no:nth-child(3) .mapa-pulso { animation-delay: 1.2s; }
.hub-no:nth-child(4) .mapa-pulso { animation-delay: 1.8s; }

@keyframes luz-sobe {
    0% { background-position: 0 100%; opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { background-position: 0 0; opacity: 0; }
}

@keyframes luz-desce {
    0% { background-position: 0 0; opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { background-position: 0 100%; opacity: 0; }
}

/* No desenho do Omnichannel (computador) a luz corre pelo galho deitado,
   do canal ate o trilho do AiO. */
@keyframes luz-direita {
    0% { background-position: 0 0; opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { background-position: 100% 0; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .mapa-pulso {
        display: none;
        animation: none;
    }
}

@media (min-width: 64rem) {
    /* Fluxograma 3 x 3: tres nos em cima, o inventario no meio e tres embaixo.
       A lista vira `display: contents` para os nos e o centro dividirem a mesma
       grade (role="list" no HTML guarda a semantica). */
    .mapa-suite {
        --eco-coluna: calc((100% - 2 * var(--esp-4)) / 3);
        /* Do pe do no ate a barra: o respiro da faixa (--esp-6, igual ao
           padding do .mapa-centro) mais metade da moldura do centro, que e
           onde a barra passa (top: 50%). */
        --eco-ramo: calc(var(--esp-6) + var(--mapa-centro-altura) / 2);
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: var(--esp-4);
    }

    .mapa-nos {
        display: contents;
    }

    /* A faixa do meio ocupa a largura toda; a barra vai do meio da primeira
       coluna ao meio da ultima, na altura do meio da moldura. */
    .mapa-centro {
        position: relative;
        grid-row: 2;
        grid-column: 1 / -1;
        justify-content: center;
        width: auto;
        padding: var(--esp-6) 0;
    }

    .mapa-centro::before {
        content: '';
        position: absolute;
        top: 50%;
        left: calc(var(--eco-coluna) / 2);
        right: calc(var(--eco-coluna) / 2);
        border-top: var(--eco-linha) solid var(--eco-cor);
    }

    /* O centro fica POR CIMA das linhas: sem isso o ramo do no do meio
       atravessa a moldura. A altura e a declarada, e o texto fica no meio
       dela: e dessa medida que sai o --eco-ramo. */
    .mapa-marca {
        position: relative;
        z-index: 1;
        height: var(--mapa-centro-altura);
        justify-content: center;
    }

    /* Ramo de cada no ate a barra: os tres de cima descem do pe do no, os tres
       de baixo sobem do topo. */
    .mapa-nos > li::before {
        top: 100%;
        left: 50%;
        width: 0;
        height: var(--eco-ramo);
        border-top: 0;
        border-left: var(--eco-linha) solid var(--eco-cor);
    }

    .mapa-nos > li:nth-child(n + 4)::before {
        top: auto;
        bottom: 100%;
    }

    /* Seta na ponta do ramo, encostada no no, como no .eco-mapa. */
    .mapa-suite .mapa-nos > li::after {
        top: 100%;
        bottom: auto;
        left: 50%;
        width: 0;
        height: 0;
        border: 5px solid transparent;
        border-top: 0;
        border-bottom: 8px solid var(--eco-cor);
        transform: translateX(-50%);
    }

    .mapa-suite .mapa-nos > li:nth-child(n + 4)::after {
        top: auto;
        bottom: 100%;
        border-top: 8px solid var(--eco-cor);
        border-bottom: 0;
    }

    /* Mapa de tres colunas (/network): a caixa tem 195 a 231px, e o icone
       ao lado tirava 64px do rotulo, que vazava ate 70px da borda e
       desalinhava os nomes (medido, 16/10/2026). Aqui o icone fica em cima,
       como nos cartoes. */
    /* Respiro lateral de 16px: com 24px, "OBSERVABILIDADE" (palavra unica em
       mono espacado) passava 6px da caixa de 195px (tela de 1180px). */
    .mapa-suite .mapa-nos > li:has(> .mapa-no-icone) {
        display: block;
        padding-inline: var(--esp-4);
    }

    .mapa-suite .mapa-no-icone {
        margin-bottom: var(--esp-3);
    }
}


/* Mapa do Inicio em hexagrama (23/10/2026, pedido do Sylvio: "Hosanna como
   centro do Hexograma e os Ecossistemas como verteces"; aprovado pelo Thiago
   com fotos): a Hosanna no centro e as seis familias nas pontas, no sentido
   do relogio a partir do alto. Mesma prancheta pontilhada e mesmos cartoes
   dos desenhos (contorno fino, quadro do icone em degrade, nome em Sora 600,
   sobe 1px no mouse). O aro tracejado e os raios sao um SVG decorativo
   esticado na prancheta (preserveAspectRatio none, traco sem escala); a
   posicao de cada cartao e a mesma ponta do SVG, em porcentagem.

   Deitado (16:9, pontas a esquerda e a direita) de 64rem para cima; em pe
   abaixo disso (quadrado ate 48rem, 2:3 no celular: em 768px o deitado
   encavalava os cartoes, medido), com o cartao so com icone e nome: a frase sai da tela
   e fica para o leitor de tela. Os produtos de cada familia ficam na pagina
   dela. */
.eco-mapa {
    position: relative;
    aspect-ratio: 16 / 9;
    padding: var(--esp-5);
    border: 1px solid var(--borda);
    border-radius: var(--raio-2);
    background-image: radial-gradient(circle, var(--borda) 1px, transparent 1.5px);
    background-size: var(--esp-4) var(--esp-4);
}

.hexa-linhas {
    position: absolute;
    inset: var(--esp-5);
    width: calc(100% - 2 * var(--esp-5));
    height: calc(100% - 2 * var(--esp-5));
    overflow: visible;
}

.hexa-aro,
.hexa-raio {
    fill: none;
    stroke: var(--borda-controle);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.hexa-aro {
    stroke-dasharray: 4 6;
}

.hexa-linhas-estreito {
    display: none;
}

.hexa-centro,
.hexa-no {
    position: absolute;
    left: calc(var(--esp-5) + (100% - 2 * var(--esp-5)) * var(--x) / 100);
    top: calc(var(--esp-5) + (100% - 2 * var(--esp-5)) * var(--y) / 100);
    margin: 0;
    transform: translate(-50%, -50%);
}

.hexa-centro {
    --x: 50;
    --y: 50;
    padding: var(--esp-4) var(--esp-6);
    border: 1px solid var(--destaque);
    border-radius: var(--raio-1);
    background: var(--brilho-topo), var(--fundo-elevado);
    box-shadow: 0 0 0 4px var(--destaque-fundo);
}

.hexa-centro img {
    display: block;
}

/* A frase de cada familia mora no centro, uma sobre a outra, e so aparece
   no computador (ver o bloco de 64rem abaixo). */
.hexa-centro-frases {
    display: none;
}

.hexa-nos {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* As pontas, na ordem do Sylvio: Omnichannel, Network, Security, Audience,
   Governance, Inteligencia. Os mesmos numeros do SVG (viewBox / 10). */
.hexa-no-1 { --x: 30; --y: 15; }
.hexa-no-2 { --x: 70; --y: 15; }
.hexa-no-3 { --x: 88; --y: 50; }
.hexa-no-4 { --x: 70; --y: 85; }
.hexa-no-5 { --x: 30; --y: 85; }
.hexa-no-6 { --x: 12; --y: 50; }

.hexa-no {
    width: 19%;
}

.hexa-cartao {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--esp-2) var(--esp-3);
    padding: var(--esp-4);
    border: 1px solid var(--borda);
    border-radius: var(--raio-1);
    background: var(--brilho-topo), var(--fundo-elevado);
    color: var(--texto);
    text-decoration: none;
    transition: border-color .2s ease, transform .2s ease;
}

a.hexa-cartao:hover {
    border-color: var(--borda-controle);
    transform: translateY(-1px);
}

/* Separada: sem :focus-visible o navegador descartaria a lista inteira. */
a.hexa-cartao:focus-visible {
    border-color: var(--borda-controle);
    outline: 2px solid var(--foco);
    outline-offset: 2px;
    transform: translateY(-1px);
}

.hexa-cartao .familia-icone {
    border: 1px solid var(--borda);
    background: linear-gradient(180deg, var(--destaque-fundo), var(--fundo-elevado));
    color: var(--destaque);
    transition: border-color .2s ease;
}

a.hexa-cartao:hover .familia-icone {
    border-color: var(--destaque);
}

a.hexa-cartao:focus-visible .familia-icone {
    border-color: var(--destaque);
}

.hexa-nome {
    font-family: var(--fonte-titulo);
    font-size: var(--letra-subtitulo);
    font-weight: var(--peso-medio);
    line-height: var(--entrelinha-titulo);
}

/* A frase dentro do link e so para o leitor de tela: na tela ela aparece no
   centro (computador) ou no topo da pagina da familia (celular). */
.hexa-frase {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* O centro conta a historia (23/10/2026, aprovado pelo Thiago com fotos):
   o mouse ou o Tab numa ponta faz o centro crescer e trocar o logo pelo
   icone, o nome, um traco laranja e a frase da familia; a linha dela acende
   em laranja e o resto apaga. A frase nao ocupa lugar em repouso (posicao
   absoluta), senao o centro ficaria alto e vazio.

   Ordem do movimento (refino de 23/10/2026, "pode aplicar" do Thiago): na
   SAIDA o texto some primeiro (0,14s), so depois o quadro encolhe (0,14s a
   0,46s) e por ultimo o logo volta; antes o quadro encolhia com o texto
   aceso e ele vazava ate 163px pela borda (medido). Na ENTRADA o quadro
   cresce (0,36s) e a frase entra aos 0,26s, quase aberto, para nao se
   rearranjar enquanto aparece. A curva e a mesma do site (ease-out). O
   quadro corta o que passar da borda (overflow: clip), por garantia. Os
   tempos de saida ficam no estado parado; os de entrada, no aceso. */
@media (min-width: 64rem) {
    .hexa-centro {
        display: grid;
        place-items: center;
        width: 17%;
        min-height: 0;
        padding: var(--esp-4) var(--esp-5);
        overflow: clip;
        text-align: center;
        transition: width .32s cubic-bezier(.22, .61, .36, 1) .14s, min-height .32s cubic-bezier(.22, .61, .36, 1) .14s;
    }

    .hexa-centro-logo {
        grid-area: 1 / 1;
        transition: opacity .22s ease .36s;
    }

    .hexa-centro-frases {
        position: absolute;
        inset: var(--esp-5);
        display: grid;
    }

    .hexa-centro-frase {
        display: grid;
        grid-area: 1 / 1;
        align-content: center;
        justify-items: center;
        color: var(--texto-suave);
        font-size: var(--letra-menor);
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .14s ease-in, transform .14s ease-in;
    }

    .hexa-centro-frase .hexa-centro-icone {
        margin-bottom: var(--esp-3);
        border: 1px solid var(--borda);
        background: linear-gradient(180deg, var(--destaque-fundo), var(--fundo-elevado));
        color: var(--destaque);
    }

    .hexa-centro-frase strong {
        color: var(--texto);
        font-family: var(--fonte-titulo);
        font-size: var(--letra-subtitulo);
        font-weight: var(--peso-medio);
        line-height: var(--entrelinha-titulo);
    }

    /* O traco curto sob o nome: o mesmo detalhe de titulo do site. */
    .hexa-centro-frase strong::after {
        content: '';
        display: block;
        width: var(--esp-6);
        height: 2px;
        margin: var(--esp-3) auto;
        background: var(--destaque);
    }

    .hexa-centro-texto {
        max-width: 34ch;
        line-height: var(--entrelinha-corpo);
        text-wrap: pretty;
    }

    .hexa-raio,
    .hexa-aro {
        transition: stroke .3s cubic-bezier(.22, .61, .36, 1), opacity .3s cubic-bezier(.22, .61, .36, 1);
    }

    .hexa-cartao {
        transition: border-color .25s ease, transform .25s cubic-bezier(.22, .61, .36, 1), opacity .3s cubic-bezier(.22, .61, .36, 1);
    }

    /* :is() aceita a lista mesmo onde :focus-visible nao existe. */
    .eco-mapa:has(.hexa-cartao:is(:hover, :focus-visible)) .hexa-centro {
        width: 32%;
        min-height: 15.5rem;
        background: radial-gradient(120% 70% at 50% 0%, var(--destaque-suave), transparent 70%), var(--brilho-topo), var(--fundo-elevado);
        transition: width .36s cubic-bezier(.22, .61, .36, 1), min-height .36s cubic-bezier(.22, .61, .36, 1);
    }

    .eco-mapa:has(.hexa-cartao:is(:hover, :focus-visible)) .hexa-centro-logo {
        opacity: 0;
        transition: opacity .12s ease;
    }

    .eco-mapa:has(.hexa-cartao:is(:hover, :focus-visible)) .hexa-raio {
        opacity: .35;
    }

    .eco-mapa:has(.hexa-cartao:is(:hover, :focus-visible)) .hexa-aro {
        opacity: .35;
    }

    /* Familia ativa: a do mouse; sem mouse em cima, a do Tab. Assim o foco
       de teclado parado numa ponta nao soma uma segunda frase no centro
       quando o mouse passa por outra (medido: as duas se sobrepunham). */
    .eco-mapa:has(.hexa-cartao:hover) .hexa-cartao:not(:hover) {
        opacity: .55;
    }

    .eco-mapa:not(:has(.hexa-cartao:hover)):has(.hexa-cartao:focus-visible) .hexa-cartao:not(:focus-visible) {
        opacity: .55;
    }

    .eco-mapa:has(.hexa-no-1 .hexa-cartao:hover) .hexa-centro-frase-1,
    .eco-mapa:has(.hexa-no-2 .hexa-cartao:hover) .hexa-centro-frase-2,
    .eco-mapa:has(.hexa-no-3 .hexa-cartao:hover) .hexa-centro-frase-3,
    .eco-mapa:has(.hexa-no-4 .hexa-cartao:hover) .hexa-centro-frase-4,
    .eco-mapa:has(.hexa-no-5 .hexa-cartao:hover) .hexa-centro-frase-5,
    .eco-mapa:has(.hexa-no-6 .hexa-cartao:hover) .hexa-centro-frase-6 {
        opacity: 1;
        transform: none;
        transition: opacity .28s cubic-bezier(.22, .61, .36, 1) .26s, transform .34s cubic-bezier(.22, .61, .36, 1) .26s;
    }

    .eco-mapa:not(:has(.hexa-cartao:hover)):has(.hexa-no-1 .hexa-cartao:focus-visible) .hexa-centro-frase-1,
    .eco-mapa:not(:has(.hexa-cartao:hover)):has(.hexa-no-2 .hexa-cartao:focus-visible) .hexa-centro-frase-2,
    .eco-mapa:not(:has(.hexa-cartao:hover)):has(.hexa-no-3 .hexa-cartao:focus-visible) .hexa-centro-frase-3,
    .eco-mapa:not(:has(.hexa-cartao:hover)):has(.hexa-no-4 .hexa-cartao:focus-visible) .hexa-centro-frase-4,
    .eco-mapa:not(:has(.hexa-cartao:hover)):has(.hexa-no-5 .hexa-cartao:focus-visible) .hexa-centro-frase-5,
    .eco-mapa:not(:has(.hexa-cartao:hover)):has(.hexa-no-6 .hexa-cartao:focus-visible) .hexa-centro-frase-6 {
        opacity: 1;
        transform: none;
        transition: opacity .28s cubic-bezier(.22, .61, .36, 1) .26s, transform .34s cubic-bezier(.22, .61, .36, 1) .26s;
    }

    .eco-mapa:has(.hexa-no-1 .hexa-cartao:hover) .hexa-raio-1,
    .eco-mapa:has(.hexa-no-2 .hexa-cartao:hover) .hexa-raio-2,
    .eco-mapa:has(.hexa-no-3 .hexa-cartao:hover) .hexa-raio-3,
    .eco-mapa:has(.hexa-no-4 .hexa-cartao:hover) .hexa-raio-4,
    .eco-mapa:has(.hexa-no-5 .hexa-cartao:hover) .hexa-raio-5,
    .eco-mapa:has(.hexa-no-6 .hexa-cartao:hover) .hexa-raio-6 {
        stroke: var(--destaque);
        stroke-width: 1.5;
        opacity: 1;
    }

    .eco-mapa:not(:has(.hexa-cartao:hover)):has(.hexa-no-1 .hexa-cartao:focus-visible) .hexa-raio-1,
    .eco-mapa:not(:has(.hexa-cartao:hover)):has(.hexa-no-2 .hexa-cartao:focus-visible) .hexa-raio-2,
    .eco-mapa:not(:has(.hexa-cartao:hover)):has(.hexa-no-3 .hexa-cartao:focus-visible) .hexa-raio-3,
    .eco-mapa:not(:has(.hexa-cartao:hover)):has(.hexa-no-4 .hexa-cartao:focus-visible) .hexa-raio-4,
    .eco-mapa:not(:has(.hexa-cartao:hover)):has(.hexa-no-5 .hexa-cartao:focus-visible) .hexa-raio-5,
    .eco-mapa:not(:has(.hexa-cartao:hover)):has(.hexa-no-6 .hexa-cartao:focus-visible) .hexa-raio-6 {
        stroke: var(--destaque);
        stroke-width: 1.5;
        opacity: 1;
    }
}

/* De 1024 a 1279px a prancheta e baixa: com o icone e 15,5rem o quadro
   aberto encostava nos cartoes de cima e de baixo (medido). Ali ele abre mais
   largo e mais baixo, sem o icone (que ja esta no cartao aceso). Medido em
   1024px, espanhol, Security: 22px ate o cartao mais perto. */
@media (min-width: 64rem) and (max-width: 79.99rem) {
    .eco-mapa:has(.hexa-cartao:is(:hover, :focus-visible)) .hexa-centro {
        width: 36%;
        min-height: 14rem;
    }

    .hexa-centro-frase .hexa-centro-icone {
        display: none;
    }
}

@media (max-width: 63.99rem) {
    .eco-mapa {
        aspect-ratio: 1 / 1;
        padding: var(--esp-3);
    }

    .hexa-linhas {
        inset: var(--esp-3);
        width: calc(100% - 2 * var(--esp-3));
        height: calc(100% - 2 * var(--esp-3));
    }

    .hexa-linhas-largo {
        display: none;
    }

    .hexa-linhas-estreito {
        display: block;
    }

    .hexa-centro,
    .hexa-no {
        left: calc(var(--esp-3) + (100% - 2 * var(--esp-3)) * var(--x) / 100);
        top: calc(var(--esp-3) + (100% - 2 * var(--esp-3)) * var(--y) / 100);
    }

    .hexa-no-1 { --x: 50; --y: 7; }
    .hexa-no-2 { --x: 81; --y: 29; }
    .hexa-no-3 { --x: 81; --y: 71; }
    .hexa-no-4 { --x: 50; --y: 93; }
    .hexa-no-5 { --x: 19; --y: 71; }
    .hexa-no-6 { --x: 19; --y: 29; }

    .hexa-no {
        width: 36%;
    }

    .hexa-cartao {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        padding: var(--esp-3) var(--esp-1);
        text-align: center;
    }

    .hexa-nome {
        font-size: var(--letra-controle);
    }

    .hexa-centro {
        padding: var(--esp-3) var(--esp-4);
    }

    .hexa-centro img {
        width: 5.75rem;
        height: auto;
    }
}

@media (max-width: 47.99rem) {
    .eco-mapa {
        aspect-ratio: 2 / 3;
    }
}

@media (prefers-reduced-motion: reduce) {
    a.hexa-cartao:hover {
        transform: none;
    }

    a.hexa-cartao:focus-visible {
        transform: none;
    }

    /* A frase ainda aparece, sem crescer nem deslizar. */
    .hexa-centro,
    .hexa-centro-logo,
    .hexa-centro-frase {
        transition: none;
    }
}

/* Mapa da Network (.mapa-suite) no estilo do desenho do Omnichannel
   (21/10/2026, pedido do Thiago: "aplica esse mesmo estilo nos outros
   desenhos"): prancheta pontilhada, cartoes de contorno fino com o nome em
   Sora 600 de 15px, quadro do icone em degrade e o centro como cartao (o
   hexagono saiu: parecia recortado). As linhas retas ficam: aqui o fluxo
   desce e volta, e e isso que elas contam. */
.mapa-suite {
    padding: var(--esp-4);
    border: 1px solid var(--borda);
    border-radius: var(--raio-2);
    background-image: radial-gradient(circle, var(--borda) 1px, transparent 1.5px);
    background-size: var(--esp-4) var(--esp-4);
}

.mapa-suite .mapa-nos > li {
    border: 1px solid var(--borda);
    background: var(--brilho-topo), var(--fundo-elevado);
}

.mapa-suite .mapa-no-nome {
    font-size: var(--letra-controle);
    font-weight: var(--peso-medio);
}

.mapa-suite .mapa-no-papel {
    font-family: var(--fonte);
    font-size: var(--letra-menor);
    font-weight: var(--peso-normal);
    letter-spacing: normal;
    text-transform: none;
}

.mapa-suite .mapa-no-icone {
    width: var(--esp-6);
    height: var(--esp-6);
    border: 1px solid var(--borda);
    background: linear-gradient(180deg, var(--destaque-fundo), var(--fundo-elevado));
}

.mapa-suite .mapa-no-icone svg {
    width: var(--esp-4);
    height: var(--esp-4);
}

.mapa-suite .mapa-marca {
    padding: var(--esp-3) var(--esp-5);
    border: 1px solid var(--destaque);
    border-radius: var(--raio-1);
    background: var(--brilho-topo), var(--fundo-elevado);
    box-shadow: 0 0 0 4px var(--destaque-fundo);
    font-size: var(--letra-subtitulo);
    font-weight: var(--peso-forte);
}

.mapa-suite .mapa-marca::before,
.mapa-suite .mapa-marca::after {
    display: none;
}

/* Desenho do ecossistema Omnichannel (21/10/2026, pedido do Sylvio: "a gente
   nao conseguiu representar ainda graficamente... as modalidades nossas";
   depois "pobres visualmente e nada modernos", com o React Flow e o GSAP de
   referencia). O AiO no centro e os dez produtos em volta, cinco de cada lado,
   na ordem da lista da pagina, numa prancheta pontilhada.

   Uma regra so para tudo (refeito a pedido do Thiago: tipografia desconexa,
   cartoes de alturas diferentes, hexagono "recorte de jornal"):
     - os dez cartoes sao iguais: 56px de altura, icone de 32px e o nome em
       Sora 600 de 15px, uma linha; nada de traco grosso, so contorno de 1px;
     - o centro e o mesmo cartao, maior: monograma da Hosanna, nome em Sora
       700 de 18px e a frase em 14px, centrados, com contorno laranja e halo;
     - as curvas (desenho-vivo.js) saem do meio de cada cartao e chegam ao
       meio do centro, com uma bolinha em cada ponta, como no React Flow.

   Ate 43rem de QUADRO (container query: na tela de 1024px o quadro tem
   626px) e uma arvore vertical: o centro em cima e os dez num trilho. */
.hub-quadro {
    container-type: inline-size;
    margin: var(--esp-5) 0;
    padding: var(--esp-4);
    border: 1px solid var(--borda);
    border-radius: var(--raio-2);
    background-image: radial-gradient(circle, var(--borda) 1px, transparent 1.5px);
    background-size: var(--esp-4) var(--esp-4);
}

.hub {
    --eco-linha: 2px;
    --eco-cor: var(--destaque);
    position: relative;
    display: grid;
    gap: var(--esp-3);
}

/* Curvas do desenho-vivo.js: por baixo dos cartoes, decorativas. */
.hub-linhas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.hub-linha {
    fill: none;
    stroke: var(--destaque);
    stroke-width: 1.5;
    stroke-opacity: .7;
}

.hub-ponto {
    fill: var(--fundo);
    stroke: var(--destaque);
    stroke-width: 1.5;
}

.hub-luz {
    fill: var(--destaque);
    filter: var(--halo-hexagono);
}

/* Centro: monograma, nome e frase. No celular, lado a lado; no computador,
   empilhados e centrados. */
.hub-centro {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--esp-3);
    align-items: center;
    margin: 0;
    padding: var(--esp-4);
    border: 1px solid var(--destaque);
    border-radius: var(--raio-1);
    background: var(--brilho-topo), var(--fundo-elevado);
    box-shadow: 0 0 0 4px var(--destaque-fundo);
}

.hub-centro-marca {
    grid-row: span 2;
    width: var(--esp-7);
    height: var(--esp-7);
    padding: var(--esp-2);
    border-radius: var(--raio-1);
}

.hub-nome {
    color: var(--texto);
    font-family: var(--fonte-titulo);
    font-size: var(--letra-subtitulo);
    font-weight: var(--peso-forte);
    line-height: var(--entrelinha-subtitulo);
}

.hub-papel {
    color: var(--texto-suave);
    font-size: var(--letra-menor);
    line-height: var(--entrelinha-destaque);
}

/* As duas listas viram uma coluna so no celular (role="list" no HTML). */
.hub-lado {
    display: contents;
}

/* Cartao de produto: o mesmo para os dez. */
.hub-no {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    /* 56px: cabe o nome em duas linhas ("Dashboards / Reports" quebra no
       cartao de 218px), entao os dez ficam da mesma altura. */
    min-height: calc(var(--esp-7) + var(--esp-2));
    margin: 0 0 0 var(--esp-5);
    padding: var(--esp-1) var(--esp-3);
    border: 1px solid var(--borda);
    border-radius: var(--raio-1);
    background: var(--brilho-topo), var(--fundo-elevado);
}

/* Quadro do icone (refino de 21/10/2026, a pedido do Thiago: o contorno
   laranja em dez quadros brigava com o nome). Contorno neutro, igual ao do
   cartao, e um degrade do laranja escuro para o fundo do cartao: o laranja
   fica so no desenho do icone. */
.hub .mapa-no-icone,
.hub-centro-marca {
    border: 1px solid var(--borda);
    background: linear-gradient(180deg, var(--destaque-fundo), var(--fundo-elevado));
}

.hub .mapa-no-icone {
    flex: none;
    width: var(--esp-6);
    height: var(--esp-6);
    border-radius: var(--raio-1);
}

.hub .mapa-no-icone svg {
    width: var(--esp-4);
    height: var(--esp-4);
}

.hub .mapa-no-nome {
    font-size: var(--letra-controle);
    font-weight: var(--peso-medio);
    line-height: var(--entrelinha-subtitulo);
}

/* Cada cartao leva a pagina do produto (21/10/2026): o link fica no nome e
   o ::after dele cobre o cartao inteiro, como os canais do /contato. Ao
   passar o mouse ou chegar pelo Tab: o cartao sobe 1px, o contorno clareia,
   o quadro do icone acende e a curva dele ate o centro acende inteira
   (.hub-linha-ativa, pelo desenho-vivo.js). Sem movimento com movimento
   reduzido. */
.hub-no-link {
    color: inherit;
    text-decoration: none;
}

.hub-no-link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--raio-1);
}

.hub-no-link:focus-visible {
    outline: none;
}

.hub-no-link:focus-visible::after {
    outline: 2px solid var(--foco);
    outline-offset: 2px;
}

.hub-no,
.hub .mapa-no-icone,
.hub-linha {
    transition: border-color .2s ease, transform .2s ease, stroke-opacity .2s ease, stroke-width .2s ease;
}

.hub-no:hover,
.hub-no:focus-within {
    border-color: var(--borda-controle);
    transform: translateY(-1px);
}

.hub-no:hover .mapa-no-icone,
.hub-no:focus-within .mapa-no-icone {
    border-color: var(--destaque);
}

.hub-linha.hub-linha-ativa {
    stroke-opacity: 1;
    stroke-width: 2.5;
}

@media (prefers-reduced-motion: reduce) {
    .hub-no,
    .hub .mapa-no-icone,
    .hub-linha {
        transition: none;
    }

    .hub-no:hover,
    .hub-no:focus-within {
        transform: none;
    }
}

/* Arvore do celular: trilho a esquerda, galho ate o meio de cada cartao. */
.hub-no::before,
.hub-no::after {
    content: '';
    position: absolute;
    left: calc(-1 * var(--esp-3));
}

.hub-no::before {
    top: 50%;
    width: var(--esp-3);
    border-top: var(--eco-linha) solid var(--eco-cor);
}

.hub-no::after {
    top: calc(-1 * var(--esp-3));
    bottom: 0;
    border-left: var(--eco-linha) solid var(--eco-cor);
}

/* O ultimo para no proprio galho. */
.hub-lado:last-of-type > .hub-no:last-child::after {
    bottom: 50%;
}

@container (min-width: 43rem) {
    .hub {
        grid-template-columns: minmax(0, 1fr) 10rem minmax(0, 1fr);
        column-gap: var(--esp-7);
        align-items: center;
    }

    .hub-centro {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--esp-2);
        grid-row: 1;
        grid-column: 2;
        padding: var(--esp-5) var(--esp-3);
        text-align: center;
    }

    .hub-centro-marca {
        margin-bottom: var(--esp-1);
    }

    .hub-lado {
        position: relative;
        display: grid;
        gap: var(--esp-3);
        grid-row: 1;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .hub-lado:first-of-type {
        grid-column: 1;
    }

    .hub-lado:last-of-type {
        grid-column: 3;
    }

    .hub-no {
        margin: 0;
    }

    /* Sem script, ligacao reta: galho ate o meio do vao, trilho, e do meio
       do trilho uma linha ate o centro. Com o script (.hub-vivo) as curvas
       substituem tudo isso. */
    .hub-no::before {
        left: 100%;
        width: calc(var(--esp-7) / 2);
    }

    .hub-lado:last-of-type > .hub-no::before {
        right: 100%;
        left: auto;
    }

    .hub-no::after,
    .hub-lado:last-of-type > .hub-no:last-child::after {
        top: calc(-1 * var(--esp-3) / 2);
        bottom: calc(-1 * var(--esp-3) / 2);
        left: calc(100% + var(--esp-7) / 2 - var(--eco-linha) / 2);
    }

    .hub-lado:last-of-type > .hub-no::after,
    .hub-lado:last-of-type > .hub-no:last-child::after {
        right: calc(100% + var(--esp-7) / 2 - var(--eco-linha) / 2);
        left: auto;
    }

    .hub-lado > .hub-no:first-child::after {
        top: 50%;
    }

    .hub-lado > .hub-no:last-child::after,
    .hub-lado:last-of-type > .hub-no:last-child::after {
        bottom: 50%;
    }

    .hub-lado::before {
        content: '';
        position: absolute;
        top: 50%;
        left: calc(100% + var(--esp-7) / 2);
        width: calc(var(--esp-7) / 2);
        border-top: var(--eco-linha) solid var(--eco-cor);
    }

    .hub-lado:last-of-type::before {
        right: calc(100% + var(--esp-7) / 2);
        left: auto;
    }

    .hub-vivo .hub-no::before,
    .hub-vivo .hub-no::after,
    .hub-vivo .hub-lado::before,
    .hub-vivo .mapa-pulso {
        display: none;
    }

    /* Luz do CSS (sem script) no galho deitado. */
    .hub .mapa-pulso {
        top: calc(50% - 4px);
        bottom: auto;
        left: 100%;
        width: calc(var(--esp-7) / 2);
        height: 10px;
        animation-name: luz-direita;
    }
}

/* Cartoes de Recursos (09/10/2026): dois links por cartao (a pagina do
   recurso e o produto no Omnichannel), entao o cartao e o <li>, nao o <a>. */
.cartoes-recursos > li {
    padding: var(--esp-5);
    border: 1px solid var(--borda);
    border-radius: var(--raio-2);
    background: var(--fundo-elevado);
}

/* Os links do cartao de Recursos sao links de texto: anula o .cartoes a
   (que transforma o link no cartao inteiro). Dois seletores de classe para
   vencer a regra geral, que vem depois no arquivo. */
.cartoes.cartoes-recursos a {
    display: inline-flex;
    align-items: center;
    min-height: var(--alvo-toque);
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

.cartoes-recursos h2 {
    margin: 0;
}

/* Nome do recurso: o link do cartao, no desenho do `tile` do v3 (branco,
   Sora 700); acende em laranja e sublinha ao passar o mouse. */
.cartoes-recursos h2 a {
    display: inline-flex;
    align-items: center;
    min-height: var(--alvo-toque);
    color: var(--texto);
}

.cartoes-recursos h2 a:hover {
    color: var(--destaque-leitura);
    text-decoration: underline;
}

.cartoes-recursos > li > span {
    display: block;
    color: var(--texto-suave);
    font-size: var(--letra-pequena);
    line-height: var(--entrelinha-tile);
}

/* Servicos (12/10/2026): a lista editorial numerada do v3. Sem cartao: cada
   servico e uma linha com o numero em mono a esquerda, separada por linhas. */
.cartoes.lista-servicos {
    counter-reset: servico;
    display: block;
}

.cartoes-recursos.lista-servicos > li {
    display: grid;
    grid-template-columns: var(--esp-8) minmax(0, 1fr);
    padding: var(--esp-6) 0;
    border: 0;
    border-top: 1px solid var(--borda);
    border-radius: 0;
    background: none;
    counter-increment: servico;
}

/* O topo da pagina ja termina numa linha: o primeiro servico nao repete. */
.pagina-topo + .lista-servicos > li:first-child {
    padding-top: 0;
    border-top: 0;
}

.cartoes-recursos.lista-servicos > li:last-child {
    border-bottom: 1px solid var(--borda);
}

.lista-servicos > li > * {
    grid-column: 2;
}

/* O numero fica na linha do titulo: mesma altura minima (o alvo de 44px do
   link do titulo) e centrado nela. */
.lista-servicos > li::before {
    content: counter(servico, decimal-leading-zero);
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    min-height: var(--alvo-toque);
    color: var(--texto-suave);
    font-family: var(--fonte-mono);
    font-size: var(--letra-menor);
    letter-spacing: var(--espaco-rotulo);
}

.cartoes.lista-servicos h2 {
    font-size: var(--letra-destaque);
}

.cartoes.lista-servicos h2 a {
    color: var(--texto);
}

.recurso-onde {
    margin: var(--esp-3) 0 0;
    padding-top: var(--esp-2);
    border-top: 1px solid var(--borda);
    color: var(--texto-suave);
    font-size: var(--letra-menor);
}

.recurso-onde a {
    display: inline-flex;
    align-items: center;
    min-height: var(--alvo-toque);
    font-weight: var(--peso-medio);
}

/* Pagina de familia sem texto proprio (09/10/2026): aviso honesto, grade
   de produtos, onde a familia aparece e o pedido de contato. */
.familia-previa {
    width: 100%;
    max-width: none;
    margin: var(--esp-5) 0 0;
}

.produtos-pagina {
    width: 100%;
    max-width: none;
    margin: 0;
}

/* Os produtos dividem a linha inteira (3 produtos = 3 colunas, 5 = 5), sem
   sobrar um sozinho na linha de baixo; no celular, um por linha. */
@media (min-width: 48rem) {
    .familia-secao .produtos-pagina {
        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    }
}

.familia-secao {
    width: 100%;
    margin-top: var(--topo-secao);
}

/* Titulo de secao das paginas internas do v3 (13/10/2026), como na
   .pagina-secao: o de 45px de antes pesava mais que o conteudo embaixo. */
.familia-secao > h2 {
    margin: 0 0 var(--esp-5);
    font-size: var(--letra-capitulo);
    font-weight: var(--peso-forte);
    line-height: var(--entrelinha-item);
    letter-spacing: var(--espaco-capitulo);
}

/* Produtos da familia na pagina dela: o painel do v3 (fio laranja no topo,
   celulas no fundo da pagina que acendem ao passar o mouse), com o nome em
   Sora e um ponto laranja de marcador. */
.familia-secao .produtos-pagina {
    position: relative;
    gap: var(--filete);
    overflow: hidden;
    border: 1px solid var(--borda);
    border-radius: var(--raio-2);
    background: var(--borda);
    font-size: var(--letra-corpo);
}

.familia-secao .produtos-pagina::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: 1;
    height: 2px;
    background: var(--feixe);
    opacity: .6;
    pointer-events: none;
}

.familia-secao .produtos-pagina li {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    padding: var(--esp-5);
    border: 0;
    background: var(--fundo);
    color: var(--texto);
    font-family: var(--fonte-titulo);
    font-weight: var(--peso-forte);
    letter-spacing: var(--espaco-item);
    transition: background-color .2s ease;
}

.familia-secao .produtos-pagina li:hover {
    background: var(--fundo-elevado);
}

.familia-secao .produtos-pagina li::before {
    content: "";
    flex: none;
    width: var(--esp-2);
    height: var(--esp-2);
    background: var(--destaque);
}

/* "Onde ela aparece": os cartoes no tamanho do `tile` do v3. */
.familia-secao .credenciais-3 {
    gap: var(--esp-5);
}

.familia-secao .credenciais-3 a {
    padding: var(--esp-5);
}

.familia-secao .credenciais-3 strong {
    margin-bottom: var(--esp-1);
    font-size: var(--letra-quadro);
    line-height: var(--entrelinha-item);
    letter-spacing: var(--espaco-item);
}

.familia-secao .credenciais-3 span {
    font-size: var(--letra-pequena);
    line-height: var(--entrelinha-tile);
}

/* Grupos da pagina Empresa (09/10/2026): titulo de secao e os cartoes de
   sempre embaixo; o nome do cartao virou h3, com o tamanho do h2 de antes. */
.empresa-grupo {
    width: 100%;
    margin-top: var(--esp-6);
}

.empresa-grupo > h2 {
    margin: 0;
    font-size: var(--letra-secao);
    line-height: var(--entrelinha-secao);
}

.empresa-grupo .cartoes {
    margin-top: var(--esp-4);
}

.cartoes h3 {
    margin: 0 0 var(--esp-2);
    color: var(--texto);
    font-size: var(--letra-tile);
    font-weight: var(--peso-forte);
    line-height: var(--entrelinha-item);
    letter-spacing: var(--espaco-item);
}

/* Familias na pagina Plataforma (09/10/2026): os mesmos cartoes da home, sem
   o fluxograma (as linhas so fazem sentido em volta do logo). Grade de duas
   colunas: Omnichannel (12 produtos) e Governance (nenhum ainda) ocupam a
   linha inteira, as outras quatro ficam duas a duas; nenhum buraco. */
.familias-pagina {
    width: 100%;
    margin-top: var(--esp-6);
}

.familias-pagina .familias {
    display: grid;
    padding: 0;
}

.familias-pagina .familia::before,
.familias-pagina .familia::after {
    display: none;
}

.familias-pagina .familia h2 {
    margin: 0;
    /* O nome da familia como no mapa da home (o `eco-no-nome` do v3). */
    font-size: var(--letra-familia);
    letter-spacing: var(--espaco-item);
}

@media (min-width: 48rem) {
    .familias-pagina .familias {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .familias-pagina .familia-larga,
    .familias-pagina .familia-governance {
        grid-column: 1 / -1;
    }
}

.conteudo-pagina > .eco-chamada {
    width: 100%;
    max-width: none;
}

/* Pedido logo depois do mapa: uma linha de texto e o botão vazado, separados
   do mapa por uma linha fina. */
.eco-chamada {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-4) var(--esp-5);
    width: 100%;
    margin-top: var(--topo-secao);
    /* Chamada final num painel (13/10/2026), como o pedido de contato do
       fim da home: a pergunta em Sora e o botao a direita. */
    padding: var(--esp-5);
    border: 1px solid var(--borda);
    border-radius: var(--raio-2);
    background-color: var(--fundo-elevado);
    background-image: var(--brilho-topo);
}

.eco-chamada p {
    max-width: 36ch;
    margin: 0;
    font-family: var(--fonte-titulo);
    font-size: var(--letra-quadro);
    line-height: var(--entrelinha-item);
    letter-spacing: var(--espaco-item);
    font-weight: var(--peso-forte);
}

/* Os produtos da familia, sempre a vista: grade de nomes com uma linha fina
   em cima de cada um, como ficha tecnica. Duas colunas no celular, tres no
   tablet; no desktop duas no cartao comum e quatro no largo, assim nenhuma
   lista passa de tres linhas. Sem link enquanto o produto nao tem pagina. */
.produtos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--esp-4);
    margin: 0 0 var(--esp-4);
    padding: 0;
    list-style: none;
    color: var(--texto);
    font-size: var(--letra-menor);
}

.produtos li {
    padding: var(--esp-1) 0;
    border-top: 1px solid var(--borda);
}

/* Produto com pagina propria (na pagina da familia): alvo de toque inteiro. */
.produtos a {
    display: flex;
    align-items: center;
    min-height: var(--alvo-toque);
}

@media (min-width: 40rem) {
    .produtos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .produtos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .familia-larga .produtos {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.familia-topo {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    margin: 0 0 var(--esp-2);
}

.familia-icone {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--esp-6);
    height: var(--esp-6);
    border-radius: var(--raio-1);
    background: var(--destaque-fundo);
    color: var(--destaque-leitura);
}

.familia h3 {
    margin: 0;
    font-size: var(--letra-familia);
    letter-spacing: var(--espaco-item);
}

.familia p {
    margin: 0 0 var(--esp-3);
    color: var(--texto-suave);
    font-size: var(--letra-pequena);
    line-height: var(--entrelinha-tile);
}

/* A acao fica no rodape do cartao, separada por uma linha, e na mesma altura
   nos cinco: margin-top auto empurra para baixo no cartao esticado da grade. */
.familia a {
    display: flex;
    align-items: center;
    gap: var(--esp-1);
    min-height: var(--alvo-toque);
    margin-top: auto;
    /* "Conhecer →" no desenho do `tile-link` do v3 (13/10/2026): Sora 600
       .88rem laranja, sem a linha em cima. */
    padding-top: var(--esp-3);
    color: var(--destaque-leitura);
    font-family: var(--fonte-titulo);
    font-size: var(--letra-link);
    font-weight: var(--peso-medio);
    text-decoration: none;
}

.familia a:hover {
    text-decoration: underline;
}

.familia a:focus-visible {
    outline: none;
}

.familia a::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--raio-2);
}

/* Pedido final: painel no fundo laranja-claro da marca (destaque-fundo), que
   se distingue nos dois temas — o fundo elevado sumia no claro. Painel e não
   faixa de ponta a ponta: assim o fim da página continua na cor dela e o
   lugar do "voltar ao topo" não vira uma tira solta. Chamada à esquerda e
   canais diretos à direita, como a abertura. */
/* Pedido final no `card-anchor` do v3 (12/10/2026): cartao com o traco
   laranja no topo, sobre o fundo do cromo da secao. */
.home-final-painel {
    padding: var(--esp-6) var(--esp-5);
    border: 1px solid var(--borda);
    border-radius: var(--raio-2);
    background: var(--fundo-elevado);
    box-shadow: var(--sombra);
}

.home-final p {
    max-width: 36rem;
    margin: 0 0 var(--esp-5);
    color: var(--texto-suave);
}

.home-canais {
    margin: var(--esp-6) 0 0;
    padding: 0;
    list-style: none;
}

.home-canais li {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--alvo-toque);
    padding: var(--esp-2) 0;
}

/* Canal no desenho do cartao de contato do v3 (13/10/2026), na home e em
   /contato: sem linha entre os canais; rotulo em cinza; TELEFONE em Sora 20
   branco (o `h5` do cartao), e-mail e link em laranja menor (o
   `contato-email`), valor sem link (horario) no corpo. */
.home-canais span,
.contato-canais span {
    color: var(--texto-suave);
    font-size: var(--letra-menor);
}

.home-canais a,
.contato-canais a {
    color: var(--destaque-leitura);
    font-size: var(--letra-canal);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.home-canais a[href^='tel:'],
.contato-canais a[href^='tel:'] {
    color: var(--texto);
    font-family: var(--fonte-titulo);
    font-size: var(--letra-quadro);
    font-weight: var(--peso-forte);
    line-height: var(--entrelinha-item);
    letter-spacing: var(--espaco-item);
}

.home-canais strong,
.contato-canais strong {
    color: var(--texto);
    font-size: var(--letra-controle);
    font-weight: var(--peso-medio);
}

/* O link cobre a linha inteira (44px ou mais): alvo de toque, nao so o texto. */
.home-canais a::after,
.contato-canais a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.home-canais a:hover {
    color: var(--destaque-leitura);
    text-decoration: underline;
}

@media (min-width: 64rem) {
    .home-final-painel {
        display: grid;
        padding: var(--esp-7);
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        gap: var(--esp-7);
        align-items: center;
    }

    .home-canais {
        margin: 0;
    }
}

/* Prova na abertura: certificações e prêmio como credencial (nome forte +
   o que garante), não como pílula de filtro. No celular vem logo abaixo do
   título, separada por uma linha; no desktop ocupa a coluna da direita, ao
   lado da chamada, e a lista vira uma coluna. */
.home-prova {
    margin-top: var(--esp-6);
    padding-top: var(--esp-6);
    border-top: 1px solid var(--borda);
}

.credenciais {
    display: grid;
    /* Um por linha no celular; o numero de colunas vem do contexto (abaixo).
       O auto-fit de antes deixava 2 + 1 nas paginas de familia em 375px, um
       cartao sozinho com buraco ao lado (medido em 12/10/2026). */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--esp-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.credenciais a {
    /* Cartao do v3 (o `.tile`, 12/10/2026, o mesmo desenho da prateleira da
       home): traco laranja de 3px no topo, fundo elevado, nome em Sora e a
       frase de apoio embaixo. Nas paginas de texto a coluna e estreita (cinco
       por linha em 44rem), por isso o nome fica no tamanho do corpo. */
    display: flex;
    flex-direction: column;
    gap: var(--esp-1);
    height: 100%;
    min-height: var(--alvo-toque);
    padding: var(--esp-4);
    border: 1px solid var(--borda);
    border-radius: var(--raio-2);
    background-color: var(--fundo-elevado);
    background-image: var(--brilho-topo);
    color: var(--texto);
    text-decoration: none;
    transition: border-color .22s ease, transform .22s ease;
}

.credenciais strong {
    display: block;
    font-family: var(--fonte-titulo);
    font-weight: var(--peso-forte);
}

.credenciais span {
    display: block;
    color: var(--texto-suave);
    font-size: var(--letra-menor);
}

.credenciais a:hover {
    border-color: var(--borda-controle);
    transform: translateY(-1px);
}

.credenciais a:hover strong {
    color: var(--destaque-leitura);
}

/* Como a abertura do v3 (12/10/2026): a chamada ocupa a largura (o titulo
   em 3/4, o `col-lg-9` de la) e as credenciais vem numa fileira de cartoes
   embaixo, como a prateleira de produtos do v3 (`row g-4 mt-5`, `.tile`).
   Cartao solido sobre a arte: o texto nunca fica sobre a imagem. */
@media (min-width: 64rem) {
    .home-prova {
        margin-top: var(--esp-7);
        padding-top: var(--esp-5);
        border-top: 0;
    }
}

/* Credenciais dentro de pagina de texto (Sobre nos): os 5 itens numa linha
   so no computador e um por linha no celular. O auto-fit da home dava 4 + 1
   na coluna de texto, com um buraco ao lado do premio (regra de simetria). */
.pagina-secao .credenciais {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 48rem) {
    .pagina-secao .credenciais {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* Resumo de produtos (Omnichannel, 10 itens): dois por linha no computador,
   cinco linhas sem buraco; um por linha no celular. Os recursos de cada
   produto (22/10/2026) usam a mesma grade. */
/* Numero impar de recursos (Qualitys tem 1, Campaigns 11): o ultimo ocupa a
   linha inteira, em vez de ficar sozinho com meia linha vazia ao lado. */
@media (min-width: 48rem) {
    .credenciais-funcoes > li:last-child:nth-child(odd),
    .familia-secao .credenciais-produtos > li:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    /* Produtos da familia Security e Governance (22/10/2026): a mesma grade
       do resumo do Omnichannel. */
    .pagina-secao .credenciais-produtos,
    .familia-secao .credenciais-produtos,
    .pagina-secao .credenciais-funcoes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Cartoes das listas das paginas de produto (resumo do Omnichannel e
   "Recursos" de cada produto) no estilo dos desenhos (22/10/2026, decisao do
   Thiago: o traco grosso do topo parecia de outra epoca ao lado do resto da
   pagina): contorno fino, sem traco, raio do cartao do desenho; no passar do
   mouse e no foco sobe 1px, o contorno clareia e o escudo acende. Os outros
   cartoes .credenciais do site ficam como estao. */
.credenciais-produtos a,
.credenciais-funcoes a {
    border: 1px solid var(--borda);
    border-radius: var(--raio-1);
    transition: border-color .2s ease, transform .2s ease;
}

.credenciais-produtos a:hover,
.credenciais-funcoes a:hover {
    border-color: var(--borda-controle);
    transform: translateY(-1px);
}

/* Separado do :hover: navegador que nao conhece :focus-visible derrubaria a
   regra inteira (SiteCssTest). */
.credenciais-produtos a:focus-visible,
.credenciais-funcoes a:focus-visible {
    border-color: var(--borda-controle);
    transform: translateY(-1px);
}

.credenciais-produtos a:hover strong,
.credenciais-funcoes a:hover strong {
    color: var(--texto);
}

.credenciais-produtos .escudo-filete {
    transition: stroke-opacity .2s ease;
}

.credenciais-produtos a:hover .escudo-filete {
    stroke-opacity: 1;
}

.credenciais-produtos a:focus-visible .escudo-filete {
    stroke-opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .credenciais-produtos a,
    .credenciais-funcoes a {
        transition: none;
    }

    .credenciais-produtos a:hover,
    .credenciais-funcoes a:hover {
        transform: none;
    }

    .credenciais-produtos a:focus-visible,
    .credenciais-funcoes a:focus-visible {
        transform: none;
    }
}

/* Resumo de tres itens (Premios e paginas de familia): tres numa linha no
   computador. */
@media (min-width: 48rem) {
    /* auto-fit: tres cabem na coluna de texto (3 x 12rem < 44rem), e quando
       a pagina tem so um ou dois (ingles e espanhol nas familias), eles
       ocupam a linha inteira em vez de um terco dela. */
    .credenciais-3,
    .pagina-secao .credenciais-3 {
        grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    }
}

/* Texto so para leitor de tela: "Conhecer Omnichannel", e nao tres "Conhecer". */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* --- Trilha (breadcrumb visual) ----------------------------------------- */

/* Trilha do v3 (12/10/2026): letra mono, caixa alta, espacada. */
.trilha {
    margin-bottom: var(--esp-5);
    color: var(--texto-suave);
    font-family: var(--fonte-mono);
    /* v3: .64rem; aqui 12px, o piso de rotulo. */
    font-size: var(--letra-sobretitulo);
    letter-spacing: var(--espaco-trilha);
    text-transform: uppercase;
}

.trilha a {
    color: var(--texto-suave);
    text-decoration: none;
}

.trilha a:hover {
    color: var(--destaque-leitura);
}

.trilha span[aria-hidden] {
    margin: 0 var(--esp-2);
    opacity: .6;
}

.trilha [aria-current='page'] {
    color: var(--texto);
}

/* --- Cartões dos hubs ---------------------------------------------------- */

/* Grade sem buraco na ultima linha (auditoria de 01/10/2026, S3). No maximo 3
   por linha; o que sobrar na ultima linha cresce e ocupa a largura toda, em
   vez de deixar um cartao sozinho ao lado de um vazio. Na coluna de 72rem:
   5 cartoes = 3 + 2, 6 = 3 + 3, 2 = 2. Com 4, duas linhas de 2 (3 + 1 seria
   o cartao sozinho de novo). Abaixo de 16rem por cartao, cai para 2 e depois
   para 1 por linha, e a regra do "sobrou cresce" continua valendo.
   Vale para os cartoes dos indices e para os blocos de /contato. */
.cartoes,
.contato {
    --por-linha: 3;
    display: flex;
    flex-wrap: wrap;
}

.cartoes:has(> :nth-child(4):last-child),
.contato:has(> :nth-child(4):last-child) {
    --por-linha: 2;
}

.cartoes > *,
.contato > * {
    flex: 1 1 calc((100% - (var(--por-linha) - 1) * var(--vao-grade)) / var(--por-linha));
    min-width: min(100%, var(--largura-cartao));
}

.cartoes {
    /* 24px entre cartoes, o `g-4` do v3 (13/10/2026). */
    --vao-grade: var(--esp-5);
    --largura-cartao: 16rem;
    gap: var(--esp-5);
    margin: var(--esp-5) 0 0;
    padding: 0;
    list-style: none;
    width: 100%;
}

/* Cartao do v3 (o `tile`, 12/10/2026): traco laranja no topo e, ao passar o
   mouse, sobe um pouco com sombra. */
.cartoes a {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--esp-5);
    border: 1px solid var(--borda);
    border-radius: var(--raio-2);
    background: var(--fundo-elevado);
    color: var(--texto);
    text-decoration: none;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.cartoes a:hover {
    border-color: var(--borda-controle);
    transform: translateY(-1px);
}

/* O nome do cartao e titulo (h2): quem usa leitor de tela navega pelos
   cartoes pela lista de titulos. Desde 13/10/2026 no desenho do `tile` do
   v3: nome em Sora 700 de ate 24px, branco; frase .92rem cinza; "Conhecer"
   em laranja no pe, na mesma altura em todos. */
.cartoes h2 {
    margin: 0 0 var(--esp-2);
    color: var(--texto);
    font-size: var(--letra-tile);
    font-weight: var(--peso-forte);
    line-height: var(--entrelinha-item);
    letter-spacing: var(--espaco-item);
}

.cartoes span {
    font-size: var(--letra-pequena);
    line-height: var(--entrelinha-tile);
    color: var(--texto-suave);
}

.cartoes .cartao-ir {
    margin-top: auto;
    padding-top: var(--esp-4);
    line-height: var(--entrelinha-corpo);
    color: var(--destaque-leitura);
    font-family: var(--fonte-titulo);
    font-size: var(--letra-link);
    font-weight: var(--peso-medio);
}

.rascunho {
    margin-top: var(--esp-5);
}

.tagline {
    margin: 0;
    font-size: var(--letra-lead);
    line-height: var(--entrelinha-lead);
    color: var(--texto-suave);
}

.subtitulo {
    margin: var(--esp-4) 0 0;
    max-width: 62ch;
    color: var(--texto-suave);
    /* `lead-hsna` do v3, como a abertura da home. */
    font-size: var(--letra-lead);
    line-height: var(--entrelinha-lead);
}

/* --- Indice "Nesta pagina" (01/10/2026) ---------------------------------- */

/* Pagina de texto do v3 (`leg`, 13/10/2026): indice a ESQUERDA, 260px, e
   o texto ao lado em ate 72 letras por linha. Ate 991px o indice vira um
   cartao acima do texto, com os links em colunas. */
.pagina-com-indice {
    display: grid;
    gap: var(--esp-6);
    width: 100%;
}

.pagina-corpo {
    max-width: 72ch;
}

.indice[hidden] {
    display: none;
}

.indice {
    padding: var(--esp-4) var(--esp-5);
    border: 1px solid var(--borda);
    border-radius: var(--raio-2);
    background: var(--fundo-elevado);
}

.indice ol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.75rem), 1fr));
}

@media (min-width: 62rem) {
    .pagina-com-indice:has(> .indice:not([hidden])) {
        grid-template-columns: var(--largura-indice) minmax(0, 1fr);
        column-gap: var(--topo-indice);
        align-items: start;
    }

    .indice {
        position: sticky;
        /* Abaixo do cabecalho fixo, e nao atras dele (12/10/2026). */
        top: calc(var(--altura-cabecalho) + var(--esp-5));
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
    }

    .indice ol {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Linha fina a esquerda da lista; o item atual (ou sob o mouse) ganha
       o traco laranja de 2px por cima dela. */
    /* `li` na frente: a regra base de `.indice a`, mais abaixo, venceria. */
    .indice li a {
        padding: var(--esp-2) var(--esp-3);
        box-shadow: inset 1px 0 0 var(--borda);
    }

    .indice li a:hover,
    .indice li a[aria-current='true'] {
        box-shadow: inset 2px 0 0 var(--destaque);
    }
}

/* O titulo levado pelo indice nao encosta no topo da tela. */
.pagina-corpo h2[id],
.pagina-corpo h3[id] {
    scroll-margin-top: var(--esp-5);
}

/* "Nesta pagina" em rotulo mono (v3: .6rem; aqui 12px, o piso). */
.indice-titulo {
    margin: 0 0 var(--esp-4);
    font-size: var(--letra-sobretitulo);
    font-weight: var(--peso-normal);
    font-family: var(--fonte-mono);
    text-transform: uppercase;
    letter-spacing: var(--espaco-cartao);
    color: var(--texto-suave);
}

.indice ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.indice a {
    display: block;
    padding: var(--esp-2) 0;
    font-size: var(--letra-indice);
    line-height: var(--entrelinha-destaque);
    color: var(--texto-suave);
    text-decoration: none;
}

.indice a:hover {
    color: var(--texto);
}

/* A secao em que o leitor esta: cor do texto E o traco laranja (no
   computador), nao so cor. No celular o traco nao existe: peso. */
.indice a[aria-current='true'] {
    color: var(--texto);
    font-weight: var(--peso-medio);
}

/* --- Corpo das paginas internas (conteudo/, desde 30/09/2026) ------------ */

/* Blocos do corpo ocupam a coluna de leitura inteira (44rem). */
.pagina-abertura,
.pagina-secao,
.declaracoes {
    width: 100%;
}

.pagina-abertura {
    margin-top: var(--esp-5);
}

/* Secao do corpo (o `leg-secao` do v3): linha entre secoes, titulo em
   Sora 700 de 20 a 27px, texto em cinza de apoio. */
.pagina-secao {
    margin-top: var(--topo-secao);
    padding-top: var(--topo-secao);
    border-top: 1px solid var(--borda);
}

.pagina-secao h2 {
    margin: 0 0 var(--esp-4);
    font-size: var(--letra-capitulo);
    font-weight: var(--peso-forte);
    line-height: var(--entrelinha-item);
    letter-spacing: var(--espaco-capitulo);
}

.pagina-secao h2:has(+ .pagina-secao-lead) {
    margin-bottom: var(--esp-2);
}

.pagina-secao h3 {
    margin: var(--esp-5) 0 var(--esp-2);
    font-size: var(--letra-corpo);
    font-weight: var(--peso-medio);
    /* O `leg-sub` do v3: entrelinha 1,2 e sem aperto entre as letras. */
    line-height: var(--entrelinha-item);
    letter-spacing: normal;
}

/* Texto corrido do corpo (o `leg-corpo p` do v3). `:where` deixa a regra com
   o peso de um `p` solto: componente com classe propria continua valendo. */
:where(.pagina-corpo) p {
    margin: 0 0 var(--esp-4);
    color: var(--texto-suave);
    font-size: var(--letra-texto);
    line-height: var(--entrelinha-lead);
}

:where(.pagina-corpo) strong {
    color: var(--texto);
    font-weight: var(--peso-medio);
}

/* Item de lista no corpo = paragrafo (16/10/2026): sem esta regra o <li>
   herdava o branco da pagina e 16px, mais forte que o paragrafo ao lado
   (95 itens em 6 paginas). O inicio em negrito continua em --texto pela
   regra do `strong` acima. :where() deixa a especificidade baixa: as listas
   com desenho proprio (ficha, grade) seguem as regras delas.
   A COR vale em toda lista do corpo; o TAMANHO so na lista solta na secao.
   Dentro de cartao e de legenda a lista herda a letra de la (14px): com o
   tamanho do paragrafo ela ficava maior que o texto do proprio cartao
   (36 itens) e da legenda (23 itens, medido). */
:where(.pagina-corpo) .lista-destaque > li {
    color: var(--texto-suave);
}

:where(.pagina-secao, .pagina-abertura) > .lista-destaque > li {
    font-size: var(--letra-texto);
    line-height: var(--entrelinha-lead);
}

:where(.lista-eco) > li .lista-destaque > li {
    font-size: var(--letra-menor);
    line-height: var(--entrelinha-apoio);
}

.pagina-secao-lead {
    margin: 0 0 var(--esp-4);
    font-size: var(--letra-lead);
    line-height: var(--entrelinha-lead);
    color: var(--texto-suave);
}

.pagina-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-3);
    margin-top: var(--esp-5);
}

/* Declaracao (missao, visao): frase principal em destaque e explicacao
   abaixo. Duas colunas quando cabem, uma sob a outra no celular. */
.declaracoes {
    display: grid;
    gap: var(--esp-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    margin-top: var(--esp-7);
}

/* Declaracao do v3 (12/10/2026): sem moldura, com uma regua laranja a
   esquerda e o nome (Missao, Visao) em rotulo mono, como o `emp-decl`. */
.declaracao {
    padding: 0 0 0 var(--esp-5);
    /* Fio neutro (22/10/2026): o laranja saiu, como dos cartoes e caixas; o
       fio fica porque e ele que separa a declaracao do texto ao lado. */
    border-left: 1px solid var(--borda-controle);
}

.declaracao h2 {
    margin: 0 0 var(--esp-3);
    color: var(--destaque-leitura);
    font-family: var(--fonte-mono);
    font-size: var(--letra-sobretitulo);
    font-weight: var(--peso-leve);
    letter-spacing: var(--espaco-largo);
    text-transform: uppercase;
}

.declaracao-frase {
    margin: 0 0 var(--esp-3);
    font-size: var(--letra-destaque);
    font-weight: var(--peso-medio);
    line-height: var(--entrelinha-destaque);
}

.declaracao p:last-child {
    margin: 0;
    color: var(--texto-suave);
}

/* Lista do v3 (o `list-hsna`): marcador quadrado laranja no lugar da bola. */
.lista-destaque {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lista-destaque li {
    position: relative;
    padding-left: var(--esp-5);
}

.lista-destaque li::before {
    content: '';
    position: absolute;
    top: .55em;
    left: 0;
    width: 7px;
    height: 7px;
    background: var(--destaque);
}

.lista-destaque li + li {
    margin-top: var(--esp-3);
}

/* Lista de ecossistemas (Sobre nos): desde 09/10/2026 cada cartao leva a
   pagina da familia. O link fica no nome (h3) e cobre o cartao inteiro; o
   contorno acende ao passar o mouse, como nos cartoes de /empresa. */
.lista-eco {
    display: grid;
    gap: var(--esp-3);
    margin: var(--esp-5) 0 0;
    padding: 0;
    list-style: none;
}

/* `> li` (13/10/2026): com `.lista-eco li` a regra do cartao pegava tambem
   os itens das listas de DENTRO do cartao, e cada item virava uma caixinha. */
.lista-eco > li {
    position: relative;
    padding: var(--esp-5);
    border: 1px solid var(--borda);
    border-radius: var(--raio-2);
    background: var(--fundo-elevado);
    transition: border-color .15s ease, transform .15s ease;
}

.pagina-secao .lista-eco h3 {
    margin: 0;
}

.lista-eco h3 a {
    color: var(--texto);
    text-decoration: none;
}

.lista-eco h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--raio-2);
}

.lista-eco > li:has(a:hover) {
    /* Mesmo mouse de todo cartao clicavel (22/10/2026). */
    border-color: var(--borda-controle);
    transform: translateY(-1px);
}

.lista-eco > li:has(a:hover) h3 a {
    color: var(--destaque-leitura);
    text-decoration: underline;
}

.lista-eco h3 a:focus-visible {
    outline: 0;
}

.lista-eco h3 a:focus-visible::after {
    outline: 2px solid var(--foco);
    outline-offset: 2px;
}

/* Rotulo do v3 em letra mono (categoria, emissor, papel). Sem caixa alta:
   aqui chega a 60 letras, e mono maiuscula longa fica dificil de ler. */
/* Subtitulo do produto (13/10/2026): Inter de apoio, como a frase do cartao
   do v3. Antes mono 14px em laranja: frase longa em letra de codigo e na cor
   dos links, sem ser link. */
.lista-eco-sub {
    margin: 0 0 var(--esp-2);
    color: var(--texto-suave);
    font-size: var(--letra-apoio);
    font-weight: var(--peso-medio);
    line-height: var(--entrelinha-apoio);
}

.lista-eco > li > p:last-child {
    margin: 0;
}

/* Ficha de produto (13/10/2026, desenho da pagina do Vyraw pedido pelo
   Thiago, nas cores do site): traco laranja no topo; nome grande com as
   categorias em mono laranja ao lado; frase em destaque; lista com traco;
   e as etiquetas no pe, separadas por uma linha e por "/". A primeira ficha
   ocupa a linha; as outras, duas por linha quando cabem. */
.lista-eco-ficha {
    gap: var(--esp-5);
}

@media (min-width: 48rem) {
    .lista-eco-ficha {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lista-eco-ficha > li:first-child,
    .lista-eco-ficha > li:last-child:nth-child(even) {
        grid-column: 1 / -1;
    }
}

.lista-eco-ficha > li {
    display: flex;
    flex-direction: column;
}

/* Fichas lado a lado com as partes na mesma altura (nome, frase, lista e a
   linha das etiquetas): cada ficha usa as 4 linhas da grade de fora. O vao
   entre fichas vira margem, porque o da grade cairia DENTRO de cada uma. */
@supports (grid-template-rows: subgrid) {
    .lista-eco-ficha {
        row-gap: 0;
    }

    .lista-eco-ficha > li {
        display: grid;
        grid-row: span 4;
        grid-template-rows: subgrid;
        margin-bottom: var(--esp-5);
    }

    /* Na grade a linha das etiquetas ja comeca junto nas duas fichas: a
       margem automatica (do plano B em coluna) empurraria a menor para baixo. */
    .lista-eco-ficha > li > ul.etiquetas {
        margin-top: 0;
    }
}

/* Icone de cartao (16/10/2026, /network): o da apresentacao da OpsSuite,
   no quadro do icone das familias da home (contorno laranja, miolo
   --destaque-fundo). O mesmo icone marca o modulo nos cartoes, no mapa e na
   ficha. No alto do cartao, acima do nome. */
.cartao-icone {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: calc(var(--esp-7) - var(--esp-2));
    height: calc(var(--esp-7) - var(--esp-2));
    border: 1px solid var(--destaque);
    border-radius: var(--raio-1);
    background: var(--destaque-fundo);
    color: var(--destaque);
}

.lista-painel > li > .cartao-icone {
    order: -2;
    margin-bottom: var(--esp-2);
}

/* Na ficha o icone fica em cima do nome, como no painel: ao lado, ele
   empurrava a categoria para a linha de baixo (cartao de 282px, medido). Mora
   dentro do h3 para nao somar uma linha a grade das fichas (subgrid). */
.lista-eco-ficha h3 .cartao-icone {
    display: grid;
    margin-bottom: var(--esp-3);
}

/* Escudo do produto (21/10/2026, pedido do Sylvio no audio: "um escudo para
   representar o que e o LiveChat, o que e o LiveCall... uns brasoezinhos";
   na OpsSuite, monitoramento, backup e banco de gestao). O brasao do produto:
   escudo com contorno laranja e um filete por dentro, miolo laranja escuro e
   o icone do produto (o mesmo do icons.json do omni que ele ja usa no resto
   da pagina) no centro. Desenho em SVG no proprio HTML, enfeite
   (aria-hidden): o nome do produto vem escrito ao lado. Nos 10 produtos do
   Omnichannel (resumo) e nos 7 modulos da Network (fichas). */
.escudo {
    display: block;
    flex: none;
    width: var(--esp-7);
}

.escudo svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.escudo-forma {
    fill: var(--destaque-fundo);
    stroke: var(--destaque);
    stroke-width: 1.5;
}

.escudo-filete {
    fill: none;
    stroke: var(--destaque);
    stroke-width: 1;
    stroke-opacity: .35;
}

.escudo-icone {
    color: var(--destaque);
    fill: currentColor;
}

/* Resumo do Omnichannel: escudo a esquerda, nome e frase ao lado. */
.credenciais-produtos a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--esp-4);
    align-content: center;
}

.credenciais-produtos .escudo {
    grid-row: span 2;
    align-self: center;
}

/* Ficha da Network: o escudo no lugar do quadro do icone, em cima do nome. */
.lista-eco-ficha h3 .escudo {
    margin-bottom: var(--esp-3);
}

/* Aviso: o icone do tipo (informacao, confirmacao, alerta) antes do titulo,
   na cor do titulo. O tipo fica dito pelo desenho, nao so pela cor. */
.nota .nota-titulo:has(> .nota-icone) {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
}

.nota-icone {
    flex: none;
}

.pagina-secao .lista-eco-ficha h3 {
    margin: 0 0 var(--esp-2);
    font-size: var(--letra-quadro);
    font-weight: var(--peso-forte);
    line-height: var(--entrelinha-item);
    letter-spacing: var(--espaco-item);
}

/* Categorias ao lado do nome: mono, sem caixa alta (chegam a 50 letras, e
   mono maiuscula longa cansa). */
/* Rotulo ao lado do titulo em cinza (refino de cor, 16/10/2026), como o
   rotulo do .mapa-suite e o `eco-no-cat` do v3: o laranja fica no traco do
   cartao, nas linhas e no sobretitulo. */
.lista-eco-tags {
    margin-left: var(--esp-2);
    color: var(--texto-suave);
    font-family: var(--fonte-mono);
    font-size: var(--letra-sobretitulo);
    font-weight: var(--peso-normal);
    letter-spacing: var(--espaco-rotulo);
    white-space: normal;
}

.lista-eco-ficha .lista-eco-sub {
    margin: 0 0 var(--esp-4);
    color: var(--texto);
    font-size: var(--letra-corpo);
    font-weight: var(--peso-medio);
}

.lista-eco-ficha .lista-destaque li {
    padding-left: var(--esp-5);
    color: var(--texto-suave);
    font-size: var(--letra-apoio);
    line-height: var(--entrelinha-apoio);
}

.lista-eco-ficha .lista-destaque li + li {
    margin-top: var(--esp-2);
}

/* Traco no lugar do quadrado: o marcador do Vyraw, em laranja. */
.lista-eco-ficha .lista-destaque li::before {
    top: .8em;
    width: var(--esp-2);
    height: 2px;
}

.lista-eco-ficha .lista-destaque strong {
    color: var(--texto);
}

/* Etiquetas no pe: texto mono simples, separado por "/", sob uma linha.
   `> li >` para vencer o `.lista-eco .etiquetas`, mais abaixo no arquivo
   (sem isso o pe nao descia e as fichas lado a lado desalinhavam). */
.lista-eco-ficha > li > .etiquetas {
    gap: var(--esp-2);
    margin-top: auto;
    padding-top: var(--esp-4);
    border-top: 1px solid var(--borda);
}

.lista-eco-ficha .lista-destaque {
    margin-bottom: var(--esp-5);
}

.lista-eco-ficha .etiquetas li {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--texto-suave);
    font-size: var(--letra-sobretitulo);
    letter-spacing: var(--espaco-numero);
    text-transform: uppercase;
}

.lista-eco-ficha .etiquetas li + li::before {
    content: "/";
    margin-right: var(--esp-2);
    color: var(--borda-controle);
}

/* Painel do v3 (12/10/2026, /empresa/infraestrutura): os itens viram
   celulas de um painel so, separadas por um filete, no lugar de cartoes
   soltos. Grade de 6 colunas no computador: tres por linha e, quando sobram
   dois, eles dividem a linha (sem buraco); um que sobra sozinho ocupa a
   linha inteira. */
/* Painel no desenho do `painel` do v3 (13/10/2026): fio laranja que se
   apaga no topo, celulas no fundo da pagina que acendem ao passar o mouse,
   rotulo mono laranja ACIMA do titulo (no HTML vem depois: so a ordem visual
   muda, o leitor de tela ouve o titulo primeiro). */
.lista-painel {
    position: relative;
    gap: var(--filete);
    overflow: hidden;
    border: 1px solid var(--borda);
    border-radius: var(--raio-2);
    background: var(--borda);
}

.lista-painel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: 1;
    height: 2px;
    background: var(--feixe);
    opacity: .6;
    pointer-events: none;
}

.lista-painel > li {
    display: flex;
    flex-direction: column;
    gap: var(--esp-2);
    border: 0;
    border-radius: 0;
    background-color: var(--fundo);
    transition: background-color .2s ease;
}

.lista-painel > li:hover {
    background-color: var(--fundo-elevado);
}

.pagina-secao .lista-painel h3 {
    margin: 0;
    font-size: var(--letra-corpo);
    font-weight: var(--peso-forte);
    line-height: var(--entrelinha-item);
    letter-spacing: var(--espaco-item);
    text-wrap: pretty;
}

.lista-painel p {
    margin: 0;
    color: var(--texto-suave);
    font-size: var(--letra-menor);
    line-height: var(--entrelinha-tile);
}

.lista-painel .lista-eco-sub {
    order: -1;
    color: var(--destaque-leitura);
    font-family: var(--fonte-mono);
    font-size: var(--letra-sobretitulo);
    font-weight: var(--peso-normal);
    letter-spacing: var(--espaco-cartao);
    text-transform: uppercase;
}

@media (min-width: 48rem) {
    .lista-painel {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .lista-painel li {
        grid-column: span 2;
    }

    .lista-painel li:nth-child(3n + 1):nth-last-child(2),
    .lista-painel li:nth-child(3n + 2):last-child {
        grid-column: span 3;
    }

    .lista-painel li:nth-child(3n + 1):last-child {
        grid-column: 1 / -1;
    }
}

/* Credencial com a miniatura do certificado a esquerda; o link abre o
   documento inteiro. O fundo claro da imagem e o do proprio certificado. */
.lista-cert li {
    display: grid;
    grid-template-columns: 6rem 1fr;
    column-gap: var(--esp-4);
    align-content: start;
}

.lista-cert-img {
    grid-row: 1 / span 5;
    align-self: start;
    display: block;
    border: 1px solid var(--borda-controle);
    border-radius: var(--raio-1);
    overflow: hidden;
}

.lista-cert-img img {
    display: block;
    width: 100%;
    height: auto;
}

.lista-cert-numero {
    margin: var(--esp-2) 0 0;
    color: var(--texto-suave);
    font-size: var(--letra-menor);
}

.lista-cert li a:not(.lista-cert-img) {
    display: inline-flex;
    align-items: center;
    min-height: var(--alvo-toque);
}

/* Foto dentro de pagina de texto (Infraestrutura): ocupa a coluna inteira,
   como todo bloco; a legenda e curta e fica em texto suave. */
.pagina-foto {
    width: 100%;
    margin: var(--esp-5) 0;
}

.pagina-foto img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--borda);
    border-radius: var(--raio-2);
}

.pagina-foto figcaption {
    margin-top: var(--esp-2);
    color: var(--texto-suave);
    font-size: var(--letra-menor);
}

/* --- Eventos (15/10/2026) ----------------------------------------------- */

/* Pagina Eventos: um cartao largo por evento, um por linha (a lista cresce
   para baixo sem buraco na grade). Do celular ate 767px a foto fica em cima;
   dali para cima, foto e texto lado a lado, meio a meio. */
.cartoes-eventos > li {
    flex-basis: 100%;
}

.cartoes.cartoes-eventos a {
    display: grid;
    padding: 0;
    overflow: hidden;
}

.evento-cartao-foto {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.cartoes-eventos .evento-cartao-texto {
    display: flex;
    flex-direction: column;
    padding: var(--esp-5);
}

.evento-quando,
.evento-ficha dt {
    color: var(--destaque-leitura);
    font-family: var(--fonte-mono);
    font-size: var(--letra-sobretitulo);
    font-weight: var(--peso-leve);
    letter-spacing: var(--espaco-largo);
    line-height: var(--entrelinha-sobretitulo);
    text-transform: uppercase;
}

.cartoes-eventos .evento-onde {
    margin: 0 0 var(--esp-3);
    color: var(--texto);
    font-weight: var(--peso-leve);
}

@media (min-width: 48rem) {
    .cartoes.cartoes-eventos a {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .cartoes-eventos .evento-cartao-texto {
        padding: var(--esp-6);
    }
}

/* Pagina de um evento: ficha, capa, videos e fotos na coluna inteira. */
.evento {
    width: 100%;
}

/* Ficha num cartao so (no celular, tres cartoes empurravam a capa para fora
   da primeira tela): no celular uma linha por dado, do computador em diante
   tres colunas, separadas por filete. */
.evento-ficha {
    display: grid;
    margin: 0;
    border: 1px solid var(--borda);
    border-radius: var(--raio-2);
    background: var(--fundo-elevado);
}

.evento-ficha > div {
    padding: var(--esp-3) var(--esp-5);
}

.evento-ficha > div + div {
    border-top: 1px solid var(--borda);
}

.evento-ficha dd {
    margin: 0;
    color: var(--texto);
    font-family: var(--fonte-titulo);
    font-size: var(--letra-item);
    font-weight: var(--peso-medio);
    line-height: var(--entrelinha-item);
}

@media (min-width: 48rem) {
    .evento-ficha {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .evento-ficha > div {
        padding: var(--esp-4) var(--esp-5);
    }

    .evento-ficha > div + div {
        border-top: 0;
        border-left: 1px solid var(--borda);
    }
}

.evento-capa {
    margin: var(--esp-6) 0 0;
}

.evento-capa a,
.evento-videos a,
.evento-fotos a {
    display: block;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--borda);
    border-radius: var(--raio-2);
    background: var(--fundo-elevado);
}

.evento-capa img,
.evento-videos img,
.evento-fotos img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .4s ease;
}

.evento-capa a:hover img,
.evento-videos a:hover img,
.evento-fotos a:hover img {
    transform: scale(1.03);
}

.evento-secao {
    margin-top: var(--topo-secao);
}

.evento-secao h2 {
    margin: 0 0 var(--esp-4);
    color: var(--texto);
    font-family: var(--fonte-titulo);
    font-size: var(--letra-capitulo);
    font-weight: var(--peso-forte);
    line-height: var(--entrelinha-item);
    letter-spacing: var(--espaco-capitulo);
}

.evento-videos,
.evento-fotos {
    display: grid;
    gap: var(--esp-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Videos em pe (do celular): tres lado a lado em qualquer tela. No celular
   inteiros (9:16); no computador cortados em 4:5, para nao passar da altura
   da tela. O video inteiro abre no visualizador. */
.evento-videos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.evento-videos img {
    aspect-ratio: 9 / 16;
    object-fit: cover;
}

.evento-play {
    position: absolute;
    inset: 50% auto auto 50%;
    width: var(--alvo-toque);
    height: var(--alvo-toque);
    translate: -50% -50%;
    border-radius: var(--raio-circulo);
    background: var(--destaque);
}

.evento-play::after {
    content: '';
    position: absolute;
    inset: 30% 30% 30% 38%;
    background: var(--destaque-texto);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Fotos: 2, 3 e 4 por linha (24 fotos fecham as linhas nos tres casos),
   todas em 4:3; a foto inteira abre no visualizador. O ponto de corte fica
   acima do meio, onde costuma estar o rosto nas fotos em pe. */
.evento-fotos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.evento-fotos a {
    border-radius: var(--raio-1);
}

.evento-fotos img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 50% 30%;
}

@media (min-width: 36rem) {
    .evento-fotos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 48rem) {
    .evento-videos,
    .evento-fotos {
        gap: var(--esp-4);
    }

    .evento-videos img {
        aspect-ratio: 4 / 5;
    }
}

@media (min-width: 64rem) {
    .evento-fotos {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .evento-capa img,
    .evento-videos img,
    .evento-fotos img {
        transition: none;
    }

    .evento-capa a:hover img,
    .evento-videos a:hover img,
    .evento-fotos a:hover img {
        transform: none;
    }
}

/* Linha do tempo: um trilho a esquerda e o ano como rotulo acima do titulo. */
.linha-tempo {
    margin: var(--esp-5) 0 0;
    padding: 0;
    list-style: none;
    border-left: 2px solid var(--borda);
}

.linha-tempo li {
    padding: 0 0 var(--esp-5) var(--esp-5);
}

.linha-tempo li:last-child {
    padding-bottom: 0;
}

.pagina-secao .linha-tempo h3 {
    margin: 0 0 var(--esp-2);
}

.linha-tempo p {
    margin: 0;
}

.ano {
    display: block;
    color: var(--destaque-leitura);
    font-family: var(--fonte-mono);
    font-size: var(--letra-menor);
    font-weight: var(--peso-forte);
    letter-spacing: var(--espaco-rotulo);
}

/* Etapa com entrega (/network, 12/10/2026): a linha "Voce recebe" sai em
   texto de apoio, separada da descricao da etapa. */
.linha-tempo p + .linha-tempo-saida {
    margin-top: var(--esp-2);
    color: var(--texto-suave);
    font-size: var(--letra-menor);
}

/* --- Pecas da pagina /network (12/10/2026) -------------------------------

   Vindas da apresentacao executiva da OpsSuite, redesenhadas com o que o
   site ja tem: borda, fundo elevado, raio 2 e o laranja so no que importa.
   Sem brilho, sombra nem degrade (omni). Cada uma serve a qualquer pagina. */

/* Etiquetas (os `chips` da apresentacao): rotulo curto em letra mono, com
   contorno. Nao sao botoes: nao acendem ao passar o mouse. */
.etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-2);
    margin: var(--esp-4) 0 0;
    padding: 0;
    list-style: none;
}

/* Etiqueta (13/10/2026): Inter na cor do texto, pilula discreta com o
   contorno de separador: e informacao, nao botao (nao acende no mouse). */
.etiquetas li {
    padding: var(--esp-1) var(--esp-3);
    border: 1px solid var(--borda);
    border-radius: var(--raio-pilula);
    background: var(--fundo-elevado);
    color: var(--texto);
    font-size: var(--letra-menor);
}

/* O texto depois de uma fileira de etiquetas nao cola nela. */
.etiquetas + p {
    margin-top: var(--esp-5);
}

.lista-eco .etiquetas {
    margin-top: var(--esp-4);
}

/* Numeros em destaque (os `stat` da apresentacao): celulas de um painel so,
   como .lista-painel. Dois por linha no celular, quatro no computador. */
/* Numeros no desenho do `stat` do v3 (13/10/2026): sem caixa; um fio
   laranja que se apaga para baixo, a esquerda; o numero em Sora 800 branco
   e a explicacao embaixo, em cinza. */
.numeros {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--esp-5);
    margin: var(--esp-6) 0 0;
    padding: 0;
    list-style: none;
}

.numeros li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--esp-2);
    padding-left: var(--esp-4);
}

.numeros li::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: linear-gradient(var(--destaque), transparent);
}

.numeros-valor {
    color: var(--texto);
    font-family: var(--fonte-titulo);
    font-size: var(--letra-cartao);
    font-weight: var(--peso-hero);
    line-height: var(--entrelinha-item);
    letter-spacing: var(--espaco-marca);
}

.numeros-rotulo {
    color: var(--texto-suave);
    font-size: var(--letra-menor);
    line-height: var(--entrelinha-tile);
}

@media (min-width: 48rem) {
    .numeros {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Nota (o `callout` da apresentacao): a frase que decide a secao, com regua
   laranja a esquerda e fundo tintado, como o aviso .familia-previa. */
/* Nota no desenho do `prod-producao` do v3 (13/10/2026): fundo neutro,
   contorno fino, fio laranja de 2px a esquerda e o titulo em rotulo mono
   laranja. Antes: fundo laranja e faixa de 4px, a cor da acao num destaque
   de texto. */
.nota {
    margin: var(--esp-5) 0 0;
    padding: var(--esp-5);
    /* Sem o fio laranja a esquerda desde 22/10/2026 (decisao do Thiago, a
       mesma do traco dos cartoes): o icone e o titulo ja marcam a caixa. */
    border: 1px solid var(--borda);
    border-radius: var(--raio-1);
    background-color: var(--fundo-elevado);
    background-image: var(--brilho-topo);
}

.nota p {
    margin: 0;
    color: var(--texto-suave);
    font-size: var(--letra-apoio);
    line-height: var(--entrelinha-apoio);
}

.nota p strong {
    color: var(--texto);
}

.nota .nota-titulo {
    margin: 0 0 var(--esp-2);
    color: var(--destaque-leitura);
    font-family: var(--fonte-mono);
    font-size: var(--letra-sobretitulo);
    font-weight: var(--peso-medio);
    letter-spacing: var(--espaco-cartao);
    text-transform: uppercase;
}

/* Tipo da caixa (22/10/2026, pergunta do Thiago: "nao deveriam ter um
   estilo refinado como mensagens informativas?"). Pelo Design System do omni
   (token.css: --ds-info/-success/-warning e o -tint, 14% da cor sobre a
   superficie): fundo tingido, contorno na cor e titulo e icone na cor do
   tipo. O tipo vem do icone que a caixa ja tinha: informacao (i), sucesso
   (check) e atencao (alerta). A caixa de destaque de conteudo (icone do
   assunto: escudo, cadeado, documento) fica no laranja da marca, bem leve. */
.nota {
    border-color: var(--destaque-borda);
    background-color: var(--destaque-suave);
}

.nota-info {
    border-color: var(--info-borda);
    background-color: var(--info-fundo);
}

.nota-sucesso {
    border-color: var(--sucesso-borda);
    background-color: var(--sucesso-fundo);
}

.nota-atencao {
    border-color: var(--atencao-borda);
    background-color: var(--atencao-fundo);
}

.nota-info .nota-titulo {
    color: var(--info-texto);
}

.nota-sucesso .nota-titulo {
    color: var(--sucesso);
}

.nota-atencao .nota-titulo {
    color: var(--atencao);
}

/* Figura (diagrama + legenda). A legenda tem titulo em negrito e texto de
   apoio; a seta em texto e a legenda das ligacoes do mapa. */
.figura {
    margin: var(--esp-5) 0 0;
}

.figura figcaption {
    margin-top: var(--esp-4);
    color: var(--texto-suave);
    font-size: var(--letra-menor);
}

.figura figcaption strong {
    color: var(--texto);
}

.figura-seta {
    margin: var(--esp-3) 0 0;
    color: var(--texto-suave);
    font-family: var(--fonte-mono);
    font-size: var(--letra-rotulo);
}

.figura .mapa-suite {
    margin-top: var(--esp-3);
}

/* Diagrama (.diagrama, 13/10/2026; estudo-graficos-audience no Vault): o
   desenho dos graficos da peca do VyRAW que o Sylvio prefere, em HTML. Mede o
   proprio quadro (container query), e nao a tela: deitado quando cabe, em
   coluna quando falta. Desenho em SVG nao serve aqui: na coluna de 726px a
   letra cairia para 8,7px, e no celular para 4px. Setas sao decorativas
   (aria-hidden); o leitor de tela le os nomes na ordem do codigo. Cores:
   seta neutra em --borda-controle, caminho principal em --destaque, centro
   com contorno laranja e miolo --destaque-fundo, o que nao existe tracejado. */
/* Estilo do desenho do Omnichannel (.hub) levado aos 26 graficos
   (21/10/2026, pedido do Thiago): a mesma prancheta pontilhada, o mesmo
   cartao (contorno de 1px, clarao no alto, sem fundo chapado) e o nome em
   Sora 600 de 15px. As setas continuam retas: aqui o desenho e sequencia, e
   a curva do .hub so faz sentido onde tudo converge num centro. */
.diagrama {
    container-type: inline-size;
    --diagrama-linha: var(--borda-controle);
    margin: var(--esp-6) 0 0;
    padding: var(--esp-5) var(--esp-4) var(--esp-4);
    border: 1px solid var(--borda);
    border-radius: var(--raio-2);
    background-image: radial-gradient(circle, var(--borda) 1px, transparent 1.5px);
    background-size: var(--esp-4) var(--esp-4);
}

.diagrama figcaption {
    margin-top: var(--esp-5);
    padding-top: var(--esp-4);
    border-top: 1px solid var(--borda);
    color: var(--texto-suave);
    font-size: var(--letra-menor);
    line-height: var(--entrelinha-apoio);
}

.diagrama figcaption strong {
    color: var(--texto);
}

.diagrama-rotulo {
    margin: 0;
    color: var(--texto-suave);
    font-family: var(--fonte-mono);
    font-size: var(--letra-rotulo);
    letter-spacing: var(--espaco-numero);
    text-transform: uppercase;
}

.diagrama-rotulo-forte {
    color: var(--destaque-leitura);
}

.diagrama-no {
    margin: 0;
    padding: var(--esp-3) var(--esp-4);
    border: 1px solid var(--borda);
    border-radius: var(--raio-1);
    background: var(--brilho-topo), var(--fundo-elevado);
    text-align: center;
}

.diagrama-no p {
    margin: 0;
}

/* Nome do no em --texto (refino de cor, 16/10/2026): e um <p>, e a regra
   base `:where(.pagina-corpo) p` o deixava no cinza do paragrafo, igual ao
   papel logo abaixo. Vale nas 6 paginas com .diagrama. */
.diagrama-nome {
    color: var(--texto);
    font-family: var(--fonte-titulo);
    font-size: var(--letra-controle);
    font-weight: var(--peso-medio);
    line-height: var(--entrelinha-subtitulo);
}

.diagrama-papel {
    color: var(--texto-suave);
    font-size: var(--letra-menor);
    line-height: var(--entrelinha-corpo);
}

/* Centro e o cartao central do .hub: contorno laranja de 1px e um anel. */
.diagrama-no-centro {
    border-color: var(--destaque);
    box-shadow: 0 0 0 4px var(--destaque-fundo);
}

.diagrama-no-forte {
    border-color: var(--destaque);
}

.diagrama-no-aparte {
    border-style: dashed;
    border-color: var(--borda-controle);
    background: transparent;
}

/* Seta: traco com ponta de triangulo. -h deitada, -v em pe. */
.diagrama-seta {
    position: relative;
    display: block;
    background: var(--diagrama-cor, var(--diagrama-linha));
}

.diagrama-seta-forte {
    --diagrama-cor: var(--destaque);
}

.diagrama-seta-h {
    width: 100%;
    height: 2px;
}

.diagrama-seta-v {
    width: 2px;
    height: 1.75rem;
    margin: 0 auto;
}

.diagrama-seta::after {
    content: '';
    position: absolute;
    border: 5px solid transparent;
}

.diagrama-seta-dir::after {
    top: -4px;
    right: -2px;
    border-right-width: 0;
    border-left: 9px solid var(--diagrama-cor, var(--diagrama-linha));
}

.diagrama-seta-esq::after {
    top: -4px;
    left: -2px;
    border-left-width: 0;
    border-right: 9px solid var(--diagrama-cor, var(--diagrama-linha));
}

.diagrama-seta-baixo::after {
    bottom: -2px;
    left: -4px;
    border-bottom-width: 0;
    border-top: 9px solid var(--diagrama-cor, var(--diagrama-linha));
}

.diagrama-seta-cima::after {
    top: -2px;
    left: -4px;
    border-top-width: 0;
    border-bottom: 9px solid var(--diagrama-cor, var(--diagrama-linha));
}

/* Canais: vendedor | leilao | comprador. Em coluna: cada ator e uma moldura
   com os seus nos, e entre eles as ligacoes com setas em pe. Deitado (5
   colunas, 40rem de quadro: em 578px sobravam 7 pecas para fora, medido):
   os atores viram faixas laterais e as ligacoes ficam deitadas. */
.diagrama-canais {
    display: grid;
    gap: var(--esp-3);
}

/* Em coluna o ator nao tem moldura: o nome dele ja agrupa os nos, e a
   moldura dentro do quadro somava 400px de altura no celular (medido). */
.diagrama-ator {
    display: grid;
    gap: var(--esp-3);
}

.diagrama-ator-cab {
    text-align: center;
}

.diagrama-ator-cab p {
    margin: 0;
}

.diagrama-via,
.diagrama-video {
    display: grid;
    justify-items: center;
    gap: var(--esp-1);
    text-align: center;
}

.diagrama-via {
    padding: var(--esp-2) 0;
}

.diagrama-par {
    display: flex;
    gap: var(--esp-6);
}

.diagrama-par > span {
    display: grid;
    justify-items: center;
    gap: var(--esp-1);
}

.diagrama-canais .diagrama-seta-h {
    display: none;
}

@container (min-width: 40rem) {
    .diagrama-canais {
        grid-template-columns: minmax(9.5rem, 1fr) minmax(6rem, 1fr) minmax(11rem, 1.25fr) minmax(6rem, 1fr) minmax(9.5rem, 1fr);
        grid-template-rows: auto auto auto;
        align-items: center;
        row-gap: var(--esp-4);
        column-gap: 0;
    }

    /* A moldura do ator vira um pseudo-elemento que ocupa as 3 linhas;
       os nos dele entram direto na grade. */
    .diagrama-ator {
        display: contents;
    }

    .diagrama-ator::before {
        content: '';
        grid-row: 1 / 4;
        align-self: stretch;
        border: 1px solid var(--borda);
        border-radius: var(--raio-2);
        background: var(--fundo);
    }

    .diagrama-ator-a::before,
    .diagrama-ator-a > * {
        grid-column: 1;
    }

    .diagrama-ator-b::before,
    .diagrama-ator-b > * {
        grid-column: 5;
    }

    .diagrama-ator-cab {
        grid-row: 1;
        padding-top: var(--esp-4);
    }

    .diagrama-ator .diagrama-no {
        margin: 0 var(--esp-3);
    }

    .diagrama-ator .diagrama-linha-1 {
        grid-row: 2;
    }

    .diagrama-ator .diagrama-linha-2 {
        grid-row: 3;
        margin-bottom: var(--esp-4);
    }

    .diagrama-video {
        grid-column: 2 / 5;
        grid-row: 2;
        padding: 0 var(--esp-3);
    }

    .diagrama-via-a {
        grid-column: 2;
        grid-row: 3;
    }

    .diagrama-centro {
        grid-column: 3;
        grid-row: 3;
    }

    .diagrama-via-b {
        grid-column: 4;
        grid-row: 3;
    }

    .diagrama-via {
        justify-items: stretch;
        gap: var(--esp-2);
        padding: 0 var(--esp-2);
    }

    .diagrama-par {
        display: grid;
        gap: var(--esp-2);
    }

    .diagrama-par > span {
        justify-items: stretch;
    }

    .diagrama-canais .diagrama-seta-h {
        display: block;
    }

    .diagrama-canais .diagrama-seta-v {
        display: none;
    }
}

/* Caminho do lote: em coluna, um no abaixo do outro e os dois fins do
   martelo lado a lado. Deitado (36rem): quatro nos em fila com seta entre
   eles, o ramo que desce do martelo para os dois fins, e o que esta no
   roteiro (tracejado) embaixo do "Vendido". */
.diagrama-lote {
    display: grid;
    gap: var(--esp-2);
}

.diagrama-fins {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--esp-3);
}

.diagrama-fim {
    display: grid;
    gap: var(--esp-2);
}

.diagrama-ramo {
    display: none;
}

@container (min-width: 36rem) {
    .diagrama-lote {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        row-gap: 0;
        column-gap: var(--esp-5);
    }

    .diagrama-lote > .diagrama-no {
        position: relative;
        display: grid;
        align-content: center;
    }

    /* Seta entre um no e o seguinte, no vao da grade. */
    .diagrama-lote > .diagrama-no:not(.diagrama-no-centro)::after {
        content: '';
        position: absolute;
        top: 50%;
        right: calc(-1 * var(--esp-5));
        width: var(--esp-5);
        height: 2px;
        background: var(--diagrama-linha);
    }

    .diagrama-lote > .diagrama-no:not(.diagrama-no-centro)::before {
        content: '';
        position: absolute;
        z-index: 1;
        top: calc(50% - 4px);
        right: calc(-1 * var(--esp-5) - 1px);
        border: 5px solid transparent;
        border-right-width: 0;
        border-left: 9px solid var(--diagrama-linha);
    }

    .diagrama-lote > .diagrama-seta {
        display: none;
    }

    .diagrama-ramo {
        position: relative;
        display: block;
        grid-column: 3 / 5;
        height: 2.75rem;
    }

    .diagrama-ramo::before {
        content: '';
        position: absolute;
        top: 0;
        left: calc(75% + var(--esp-5) / 4 - 1px);
        width: 2px;
        height: 50%;
        background: var(--diagrama-linha);
    }

    .diagrama-ramo::after {
        content: '';
        position: absolute;
        top: 50%;
        right: calc(25% - var(--esp-5) / 4);
        left: calc(25% - var(--esp-5) / 4);
        height: 2px;
        background: var(--diagrama-linha);
    }

    .diagrama-ramo .diagrama-seta-v {
        position: absolute;
        top: 50%;
        height: 50%;
    }

    .diagrama-ramo-a {
        left: calc(25% - var(--esp-5) / 4 - 1px);
    }

    .diagrama-ramo-b {
        left: calc(75% + var(--esp-5) / 4 - 1px);
    }

    .diagrama-fins {
        grid-column: 2 / 5;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: var(--esp-5);
        row-gap: 0;
    }

    .diagrama-fim-vendido {
        display: contents;
    }

    .diagrama-fim-vendido > * {
        grid-column: 2;
    }

    .diagrama-fim-vendido > .diagrama-no-aparte {
        grid-column: 1 / 4;
        justify-self: center;
        min-width: 60%;
    }

    .diagrama-fim-encerrado {
        grid-column: 3;
        grid-row: 1;
    }
}

/* Linha do tempo: em coluna, uma lista (tempo em mono a esquerda, o que
   acontece a direita, "+5 s" em etiqueta). Deitada (36rem): uma pista com
   escala de segundos (0 s na ponta, corte "//", e de 52 s a 75 s ocupando
   de 20% a 100% da largura, 3,48% por segundo: medido em 726px, os
   rotulos ficam a 18px ou mais um do outro), pontos laranja nos lances, marcos embaixo e o arco do
   "+5 s" em cima. A posicao vem de --s (segundo) no proprio item. */
.diagrama-tempo-cab {
    margin-bottom: var(--esp-4);
}

.diagrama-tempo {
    display: grid;
    gap: var(--esp-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.diagrama-tempo li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--esp-2);
}

/* Em coluna, o lance mostra a frase ("lance aos 58 s") e o marco o rotulo
   com o tempo ("fim previsto: 60 s"): sem repetir o tempo duas vezes. */
.diagrama-lance .diagrama-t {
    display: none;
}

.diagrama-t {
    color: var(--texto-suave);
    font-family: var(--fonte-mono);
    font-size: var(--letra-rotulo);
}

.diagrama-x {
    font-size: var(--letra-menor);
}

.diagrama-mais {
    display: inline-block;
    padding: 0 var(--esp-2);
    border-radius: var(--raio-1);
    background: var(--destaque-fundo);
    color: var(--destaque-leitura);
    font-family: var(--fonte-mono);
    font-size: var(--letra-rotulo);
}

.diagrama-pista,
.diagrama-janela {
    display: none;
}

@container (min-width: 36rem) {
    .diagrama-tempo-cab {
        margin-bottom: 0;
    }

    .diagrama-tempo-corpo {
        --diagrama-y: 5rem;
        position: relative;
        height: 10.5rem;
    }

    .diagrama-pista {
        position: absolute;
        top: var(--diagrama-y);
        right: 0;
        left: 0;
        display: block;
        height: 2px;
        background: linear-gradient(to right, var(--diagrama-linha) 0 10%, transparent 10% 15%, var(--diagrama-linha) 15% 100%);
    }

    .diagrama-pista::after {
        content: '//';
        position: absolute;
        top: -.7rem;
        left: 12.5%;
        transform: translateX(-50%);
        color: var(--texto-suave);
        font-family: var(--fonte-mono);
    }

    .diagrama-janela {
        position: absolute;
        top: calc(var(--diagrama-y) - .75rem);
        left: calc(20cqw + 3 * 3.48cqw);
        display: block;
        width: calc(15 * 3.48cqw);
        height: 1.5rem;
        border-radius: var(--raio-1);
        background: var(--destaque-fundo);
    }

    /* O rotulo termina antes do arco do 60 s (que comeca a 5 s do inicio
       da faixa), para nao encostar nele. */
    .diagrama-janela .diagrama-rotulo {
        position: absolute;
        right: calc(100% - 5 * 3.48cqw + var(--esp-3));
        bottom: calc(100% + var(--esp-2));
        white-space: nowrap;
    }

    .diagrama-tempo {
        position: absolute;
        inset: 0;
        display: block;
    }

    .diagrama-tempo li {
        position: absolute;
        top: 0;
        left: var(--diagrama-pos, calc(20cqw + (var(--s) - 52) * 3.48cqw));
        display: block;
        width: 0;
    }

    .diagrama-t,
    .diagrama-x {
        position: absolute;
        transform: translateX(-50%);
        white-space: nowrap;
    }

    .diagrama-marco .diagrama-t {
        top: calc(var(--diagrama-y) + 2.5rem);
    }

    .diagrama-marco::before {
        content: '';
        position: absolute;
        top: calc(var(--diagrama-y) - .6rem);
        left: -1px;
        width: 2px;
        height: 1.2rem;
        background: var(--diagrama-linha);
    }

    .diagrama-abre {
        --diagrama-pos: 0px;
    }

    .diagrama-abre .diagrama-t {
        transform: none;
    }

    .diagrama-lance::before {
        content: '';
        position: absolute;
        top: calc(var(--diagrama-y) - 5px);
        left: -6px;
        width: 12px;
        height: 12px;
        border-radius: var(--raio-circulo);
        background: var(--destaque);
    }

    .diagrama-lance .diagrama-x {
        top: calc(var(--diagrama-y) + .9rem);
    }

    .diagrama-fecha::before {
        top: calc(var(--diagrama-y) - 1.2rem);
        width: 3px;
        height: 2.4rem;
        background: var(--destaque);
    }

    .diagrama-fecha .diagrama-t {
        color: var(--texto);
    }

    /* Arco = elipse inteira (raio-circulo) cortada no meio pelo clip-path:
       so a metade de cima aparece, com um resto de 10px para a ponta. */
    .diagrama-mais {
        position: absolute;
        top: calc(var(--diagrama-y) - 3.6rem);
        left: 0;
        box-sizing: border-box;
        width: calc(5 * 3.48cqw);
        height: 5.2rem;
        margin: 0;
        padding: 0;
        border: 2px solid var(--destaque);
        border-radius: var(--raio-circulo);
        background: none;
        clip-path: inset(-2rem -1rem calc(50% - 12px) -1rem);
    }

    .diagrama-mais span {
        position: absolute;
        bottom: calc(100% + 2px);
        left: 50%;
        transform: translateX(-50%);
    }

    .diagrama-mais::after {
        content: '';
        position: absolute;
        top: calc(50% - 4px);
        right: -6px;
        border: 5px solid transparent;
        border-bottom-width: 0;
        border-top: 9px solid var(--destaque);
    }
}

/* Fila (.diagrama-fila, /network, 13/10/2026): a mesma gramatica dos canais
   para qualquer sequencia de nos, grupos e ligacoes. Em coluna no celular;
   deitada a partir de 40rem de quadro, com o centro um pouco mais largo e as
   ligacoes um pouco mais estreitas que os nos. */
.diagrama-fila {
    display: grid;
    gap: var(--esp-2);
}

.diagrama-fila .diagrama-seta-h {
    display: none;
}

/* Grupo: um perimetro (a rede do cliente, um conjunto de ferramentas), com
   o nome em rotulo mono no alto. Contorno cheio: tracejado aqui e so o que
   ainda nao existe. */
.diagrama-grupo {
    display: flex;
    flex-direction: column;
    gap: var(--esp-3);
    padding: var(--esp-4);
    border: 1px solid var(--borda);
    border-radius: var(--raio-2);
    background: var(--fundo);
    text-align: center;
}

.diagrama-via-texto {
    color: var(--texto-suave);
    font-size: var(--letra-menor);
    line-height: var(--entrelinha-corpo);
}

.diagrama-via-texto-forte {
    color: var(--destaque-leitura);
}

/* Ligacao dentro de um grupo: seta em pe com o rotulo ao lado. */
.diagrama-ligacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--esp-2);
    margin: 0;
}

.diagrama-ligacao .diagrama-seta-v {
    height: 1.5rem;
    margin: 0;
}

.diagrama-nota {
    margin: var(--esp-4) 0 0;
    color: var(--texto-suave);
    font-size: var(--letra-menor);
    line-height: var(--entrelinha-corpo);
    text-align: center;
}

/* Comparacao: dois grupos lado a lado a partir de 36rem de quadro. */
.diagrama-comparacao {
    display: grid;
    gap: var(--esp-4);
}

/* Grade de nos: duas colunas so quando cada no cabe a palavra mais longa
   ("Provisionamento", 135px em 16px): abaixo disso, uma coluna. */
.diagrama-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: var(--esp-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.diagrama-grupo .diagrama-no {
    padding: var(--esp-2) var(--esp-2);
}

.diagrama-total {
    display: grid;
    gap: var(--esp-1);
    margin: auto 0 0;
    padding-top: var(--esp-2);
}

.diagrama-total span {
    color: var(--texto-suave);
    font-size: var(--letra-menor);
}

@container (min-width: 36rem) {
    .diagrama-comparacao {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container (min-width: 40rem) {
    .diagrama-fila {
        display: flex;
        align-items: center;
        gap: 0;
    }

    .diagrama-fila > * {
        flex: 1 1 0;
        min-width: 0;
    }

    .diagrama-fila > .diagrama-no-centro {
        flex-grow: 1.25;
    }

    /* O grupo leva dois ou tres nos dentro da moldura: precisa de mais
       largura que um no solto (com 1 de peso, "equipamentos" vazava). */
    /* 8px de respiro: com 12px, "Provisionamento" passava 2px da caixa num
       quadro de 648px (tela de 768px, sem o indice; medido). */
    .diagrama-fila > .diagrama-grupo {
        flex-grow: 1.6;
        padding: var(--esp-2);
    }

    .diagrama-fila > .diagrama-via {
        flex-grow: .75;
        justify-items: stretch;
        gap: var(--esp-2);
        padding: 0 var(--esp-1);
    }

    /* No solto na ponta ("OpsInventory", 110px): um pouco mais de peso e
       menos respiro dos lados. */
    .diagrama-fila > .diagrama-no:not(.diagrama-no-centro) {
        flex-grow: 1.1;
        padding: var(--esp-3) var(--esp-2);
    }

    .diagrama-fila > .diagrama-via .diagrama-par {
        display: grid;
        gap: var(--esp-3);
    }

    .diagrama-fila > .diagrama-via .diagrama-par > span {
        justify-items: stretch;
    }

    .diagrama-fila .diagrama-seta-h {
        display: block;
    }

    .diagrama-fila > .diagrama-via .diagrama-seta-v {
        display: none;
    }
}

/* Cadeia de cinco nos (.diagrama-lote-5, /ecossistema/security/discovery):
   o mesmo caminho do lote, com cinco colunas e vao menor, para a palavra
   mais longa ("Autorizacao") caber no no em 726px de coluna. */
.diagrama-cabeca {
    margin-bottom: var(--esp-4);
    text-align: center;
}

@container (min-width: 40rem) {
    .diagrama-lote-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        column-gap: var(--esp-4);
    }

    .diagrama-lote-5 > .diagrama-no {
        padding: var(--esp-3) var(--esp-2);
    }

    .diagrama-lote-5 > .diagrama-no:not(.diagrama-no-centro)::after {
        right: calc(-1 * var(--esp-4));
        width: var(--esp-4);
    }

    .diagrama-lote-5 > .diagrama-no:not(.diagrama-no-centro)::before {
        right: calc(-1 * var(--esp-4) - 1px);
    }
}

/* Pecas do IAM (/ecossistema/security/iam, 13/10/2026).
   Coluna (.diagrama-coluna): quem usa em cima, a peca embaixo, dentro de uma
   .diagrama-grade (.diagrama-grade-4 so marca as quatro colunas; quantas
   cabem lado a lado continua sendo a grade que decide).
   Ciclo (.diagrama-ciclo): estados em fila e, embaixo de cada seta, o fato
   que leva ao estado seguinte. Em 40rem de quadro ou mais, uma grade de dez
   meias colunas: o estado ocupa duas (--c e a seguinte) e a passagem fica
   na divisa entre dois estados. Em coluna, um embaixo do outro.
   Perimetro (.diagrama-comparacao-perimetro): o grupo de dentro com o dobro
   da largura do de fora. */
.diagrama-coluna {
    display: grid;
    align-content: start;
    gap: var(--esp-2);
}

.diagrama-coluna .diagrama-seta-v {
    height: 1.5rem;
}

.diagrama-ligacao-larga {
    margin: var(--esp-3) 0;
}

.diagrama-ciclo {
    display: grid;
    gap: var(--esp-2);
}

.diagrama-grupo-fora {
    justify-content: center;
}

@container (min-width: 36rem) {
    .diagrama-comparacao-perimetro {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
}

@container (min-width: 40rem) {
    .diagrama-ciclo {
        grid-template-columns: repeat(10, minmax(0, 1fr));
        column-gap: var(--esp-4);
        row-gap: var(--esp-2);
    }

    .diagrama-ciclo > .diagrama-no {
        position: relative;
        display: grid;
        grid-column: var(--c) / span 2;
        grid-row: 1;
        align-content: center;
        padding: var(--esp-3) var(--esp-2);
    }

    .diagrama-ciclo > .diagrama-no:not(.diagrama-no-centro)::after {
        content: '';
        position: absolute;
        top: 50%;
        right: calc(-1 * var(--esp-4));
        width: var(--esp-4);
        height: 2px;
        background: var(--diagrama-linha);
    }

    .diagrama-ciclo > .diagrama-no:not(.diagrama-no-centro)::before {
        content: '';
        position: absolute;
        z-index: 1;
        top: calc(50% - 4px);
        right: calc(-1 * var(--esp-4) - 1px);
        border: 5px solid transparent;
        border-right-width: 0;
        border-left: 9px solid var(--diagrama-linha);
    }

    .diagrama-ciclo > .diagrama-passagem {
        grid-column: var(--c) / span 2;
        grid-row: 2;
        text-align: center;
    }

    .diagrama-passagem .diagrama-seta {
        display: none;
    }
}

/* Pecas do ATENA (/ecossistema/governance/atena, 13/10/2026).
   Centro (.diagrama-hub): o produto no meio e as integracoes em volta, numa
   grade de 3 x 3 a partir de 40rem de quadro; em coluna, o centro primeiro.
   O rotulo de cada ligacao fica dentro do no (.diagrama-via-texto).
   Sequencia (.diagrama-sequencia): quem conversa com quem, em ordem. A partir
   de 40rem, uma faixa por participante (--raias) e cada mensagem com seta de
   --c1 ate --c2 (colunas da grade, a segunda exclusiva; --k colunas
   abrangidas), ou uma acao dentro de uma faixa so. Em coluna, uma lista com
   quem fala com quem escrito antes de cada mensagem. */
.diagrama-hub {
    display: grid;
    gap: var(--esp-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.diagrama-hub > .diagrama-no-centro {
    order: -1;
}

.diagrama-hub .diagrama-via-texto {
    margin: 0;
    color: var(--destaque-leitura);
}

.diagrama-raias,
.diagrama-mensagens {
    display: grid;
    gap: var(--esp-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.diagrama-raias {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: var(--esp-4);
}

.diagrama-msg,
.diagrama-acao {
    display: grid;
    gap: var(--esp-1);
    padding: var(--esp-2) var(--esp-3);
    border-left: 2px solid var(--borda-controle);
}

.diagrama-acao {
    border-left-color: var(--destaque);
}

.diagrama-msg-quem {
    color: var(--texto-suave);
    font-family: var(--fonte-mono);
    font-size: var(--letra-rotulo);
}

.diagrama-msg .diagrama-seta {
    display: none;
}

@container (min-width: 40rem) {
    .diagrama-hub {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .diagrama-hub > .diagrama-no-centro {
        order: 0;
        align-self: center;
    }

    .diagrama-raias,
    .diagrama-mensagens {
        grid-template-columns: repeat(var(--raias), minmax(0, 1fr));
        column-gap: var(--esp-3);
    }

    .diagrama-mensagens {
        row-gap: var(--esp-2);
    }

    .diagrama-msg,
    .diagrama-acao {
        position: relative;
        grid-column: var(--c1) / var(--c2);
        border-left: 0;
        text-align: center;
    }

    .diagrama-msg {
        padding: 0 0 var(--esp-3);
    }

    /* Quem fala com quem vira so leitor de tela: a posicao da seta ja diz. */
    .diagrama-msg-quem {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .diagrama-msg .diagrama-seta {
        position: absolute;
        right: calc(100% / (2 * var(--k)));
        bottom: 0;
        left: calc(100% / (2 * var(--k)));
        display: block;
        width: auto;
    }

    .diagrama-acao {
        border: 1px solid var(--borda);
        border-radius: var(--raio-1);
        background: var(--fundo);
    }
}

/* No da grade com 8px dos lados: com 16px, "Armazenamento" passava da caixa
   na grade de tres colunas em 768px (medido). */
.diagrama-grade > .diagrama-no {
    padding: var(--esp-3) var(--esp-2);
}

/* Comando de exemplo no corpo (ATENA, 13/10/2026): quebra a linha em vez de
   alargar a coluna. Uma linha sem espaco de 56 caracteres empurrava a pagina
   para 484px no celular de 375px (medido). */
:where(.pagina-corpo) pre {
    margin: 0 0 var(--esp-4);
    padding: var(--esp-3) var(--esp-4);
    border: 1px solid var(--borda);
    border-radius: var(--raio-1);
    background: var(--fundo-elevado);
    color: var(--texto);
    font-family: var(--fonte-mono);
    font-size: var(--letra-menor);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Cronograma (.diagrama-cronograma, /ecossistema/security/vault, 13/10/2026):
   etapas em barras sobre semanas, o desenho da peca. A escala vai de 0 a 4,8
   semanas; cada barra le --de e --ate (em semanas) e o grafico le --em,
   a semana do marco. No
   celular o nome fica em cima da pista; de 40rem de quadro em diante, a
   coluna de nomes (--diagrama-nomes) fica a esquerda e as semanas em cima. */
.diagrama-cronograma {
    --diagrama-nomes: 0rem;
    --diagrama-escala: 4.8;
    position: relative;
}

/* A primeira coluna e a dos nomes (vazia aqui); as semanas dividem a pista. */
.diagrama-semanas::before {
    content: '';
}

.diagrama-semanas {
    display: grid;
    grid-template-columns: var(--diagrama-nomes) repeat(4, calc((100% - var(--diagrama-nomes)) / var(--diagrama-escala)));
    margin: 0 0 var(--esp-2);
    padding: 0;
    color: var(--texto-suave);
    font-family: var(--fonte-mono);
    font-size: var(--letra-rotulo);
    list-style: none;
    text-align: center;
}

.diagrama-etapas {
    display: grid;
    gap: var(--esp-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.diagrama-etapas li {
    display: grid;
    gap: var(--esp-1);
}

.diagrama-etapa-nome {
    font-size: var(--letra-menor);
    line-height: var(--entrelinha-corpo);
}

.diagrama-etapa-forte .diagrama-etapa-nome {
    color: var(--destaque-leitura);
    font-weight: var(--peso-medio);
}

/* Pista com as divisas das semanas; a barra e o ::after, posta pela escala. */
.diagrama-barra {
    position: relative;
    display: block;
    height: 1.125rem;
    background: repeating-linear-gradient(to right, var(--borda) 0 1px, transparent 1px calc(100% / var(--diagrama-escala)));
}

.diagrama-barra::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--de) / var(--diagrama-escala) * 100%);
    width: calc((var(--ate) - var(--de)) / var(--diagrama-escala) * 100%);
    border-radius: var(--raio-pilula);
    background: var(--destaque-fundo);
    box-shadow: inset 0 0 0 1px var(--destaque);
}

.diagrama-etapa-forte .diagrama-barra::after {
    background: var(--destaque);
}

/* Servico que nao acaba (ATENA: sustentacao e consultoria): barra tracejada. */
.diagrama-etapa-continua .diagrama-barra::after {
    border: 2px dashed var(--destaque);
    background: transparent;
    box-shadow: none;
}

/* Marcas da escala (ATENA, 0 a 16 semanas): cada numero no seu ponto (--s),
   em vez de uma coluna por semana. */
.diagrama-marcas {
    position: relative;
    height: 1.25rem;
    margin: 0 0 var(--esp-2);
    padding: 0;
    color: var(--texto-suave);
    font-family: var(--fonte-mono);
    font-size: var(--letra-rotulo);
    list-style: none;
}

.diagrama-marcas li {
    position: absolute;
    top: 0;
    left: calc(var(--diagrama-nomes) + (100% - var(--diagrama-nomes)) * var(--s) / var(--diagrama-escala));
    transform: translateX(-50%);
}

.diagrama-marcas li:first-child {
    transform: none;
}

.diagrama-marcas li:last-child {
    transform: translateX(-100%);
}

/* No celular o marco e so a frase, abaixo das etapas: uma linha em pe
   cortaria os nomes, que ficam em cima das pistas. */
.diagrama-marco-cronograma {
    margin: var(--esp-4) 0 0;
    color: var(--destaque-leitura);
    font-family: var(--fonte-mono);
    font-size: var(--letra-rotulo);
}

@container (min-width: 40rem) {
    .diagrama-cronograma {
        --diagrama-nomes: 13rem;
    }

    .diagrama-etapas li {
        grid-template-columns: var(--diagrama-nomes) minmax(0, 1fr);
        align-items: center;
        gap: 0;
    }

    /* Linha do marco sobre as pistas, com a frase terminando nela. */
    /* A frase termina na linha do marco e pode ocupar a coluna dos nomes:
       so na pista, ela quebrava em tres linhas (medido em 1280px). */
    .diagrama-marco-cronograma {
        padding-top: var(--esp-2);
    }

    /* A linha corta o grafico inteiro, das semanas ate a frase. */
    .diagrama-cronograma::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(var(--diagrama-nomes) + (100% - var(--diagrama-nomes)) * var(--em) / var(--diagrama-escala));
        width: 2px;
        background: var(--destaque);
    }

    .diagrama-marco-cronograma span {
        display: block;
        width: calc(var(--diagrama-nomes) + (100% - var(--diagrama-nomes)) * var(--em) / var(--diagrama-escala));
        padding-right: var(--esp-2);
        text-align: right;
    }
}

/* Quadro do diagrama mais largo pede mais respiro (mesma regra do v3). */
@media (min-width: 48rem) {
    .diagrama {
        padding: var(--esp-6) var(--esp-5) var(--esp-5);
    }
}

/* Passos numerados em cartao (.passos, 13/10/2026; a peca do VyRAW): o
   mesmo cartao do site (fundo-elevado, borda, raio 16px), sem hover porque
   nao e link. O numero fica num quadrado laranja a esquerda; a ordem para
   o leitor de tela vem da propria lista numerada (o numero e aria-hidden). */
.passos {
    /* Linha do tempo (13/10/2026, pedido do Thiago: mais elegante): os
       passos num painel so, ligados por um trilho vertical entre os numeros,
       no lugar de cinco caixas soltas. */
    display: grid;
    margin: 0;
    padding: var(--esp-5) var(--esp-4);
    border: 1px solid var(--borda);
    border-radius: var(--raio-2);
    background-color: var(--fundo-elevado);
    background-image: var(--brilho-topo);
    list-style: none;
}

.passo {
    position: relative;
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    column-gap: var(--esp-4);
    row-gap: var(--esp-1);
    padding-bottom: var(--esp-6);
}

.passo:last-child {
    padding-bottom: 0;
}

/* O trilho: do fim de um numero ate o comeco do proximo. Decorativo. */
.passo::before {
    content: "";
    position: absolute;
    top: calc(2.5rem + var(--esp-2));
    bottom: var(--esp-2);
    left: 1.25rem;
    width: 1px;
    background: linear-gradient(var(--destaque), var(--borda-controle));
}

.passo:last-child::before {
    display: none;
}

/* Numero num anel laranja sobre o fundo da pagina, como a marca de etapa. */
.passo-num {
    display: grid;
    grid-row: 1 / 3;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--destaque);
    border-radius: var(--raio-circulo);
    background: var(--fundo);
    color: var(--destaque-leitura);
    font-family: var(--fonte-mono);
    font-size: var(--letra-sobretitulo);
    font-weight: var(--peso-medio);
}

/* Titulo centrado na altura do anel; texto de apoio embaixo. */
.passo h3 {
    margin: var(--esp-2) 0 0;
    font-size: var(--letra-quadro);
    font-weight: var(--peso-forte);
    line-height: var(--entrelinha-item);
    letter-spacing: var(--espaco-item);
}

.passo p {
    max-width: 62ch;
    margin: 0;
    color: var(--texto-suave);
    font-size: var(--letra-apoio);
    line-height: var(--entrelinha-apoio);
}

.passo p strong {
    color: var(--texto);
}

/* Tudo que nao e o numero fica na coluna do texto, com quantos paragrafos
   tiver (na Network a etapa tem a entrega embaixo). */
.passo > :not(.passo-num) {
    grid-column: 2;
}

.passo p + .linha-tempo-saida {
    margin-top: var(--esp-2);
    color: var(--texto);
    font-size: var(--letra-menor);
}

@media (min-width: 48rem) {
    .passos {
        padding: var(--esp-6);
    }

    .passo {
        column-gap: var(--esp-5);
    }
}

/* Jornada (13/10/2026, Omnichannel): a linha do tempo dos .passos para uma
   lista numerada comum. O numero vem do contador da lista (o leitor de tela
   ja ouve "1 de 6" pela propria lista); a frase em negrito vira o titulo. */
.jornada {
    counter-reset: jornada;
    display: grid;
    margin: var(--esp-5) 0;
    padding: var(--esp-5) var(--esp-4);
    border: 1px solid var(--borda);
    border-radius: var(--raio-2);
    background-color: var(--fundo-elevado);
    background-image: var(--brilho-topo);
    list-style: none;
}

.jornada > li {
    position: relative;
    min-height: 2.5rem;
    /* 64px: o anel (40) + 24 de respiro ate o texto. */
    padding: 0 0 var(--esp-6) var(--esp-8);
    color: var(--texto-suave);
    font-size: var(--letra-apoio);
    line-height: var(--entrelinha-apoio);
    counter-increment: jornada;
}

.jornada > li:last-child {
    padding-bottom: 0;
}

.jornada > li::before {
    content: counter(jornada);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--destaque);
    border-radius: var(--raio-circulo);
    background: var(--fundo);
    color: var(--destaque-leitura);
    font-family: var(--fonte-mono);
    font-size: var(--letra-sobretitulo);
    font-weight: var(--peso-medio);
}

.jornada > li::after {
    content: "";
    position: absolute;
    top: calc(2.5rem + var(--esp-2));
    bottom: var(--esp-2);
    left: 1.25rem;
    width: 1px;
    background: linear-gradient(var(--destaque), var(--borda-controle));
}

.jornada > li:last-child::after {
    display: none;
}

/* A frase em negrito que abre a etapa e o titulo dela, na altura do anel. */
.jornada > li > strong:first-child {
    display: block;
    margin: var(--esp-2) 0 var(--esp-1);
    color: var(--texto);
    font-family: var(--fonte-titulo);
    font-size: var(--letra-quadro);
    font-weight: var(--peso-forte);
    line-height: var(--entrelinha-item);
    letter-spacing: var(--espaco-item);
}

@media (min-width: 48rem) {
    .jornada {
        padding: var(--esp-6);
    }
}

/* Lista em grade (13/10/2026, Omnichannel): o painel do v3 para listas de
   "Titulo: explicacao", duas por linha a partir de 768px, com o fio laranja
   no topo e a celula que acende ao passar o mouse. */
.lista-destaque.lista-grade {
    position: relative;
    display: grid;
    gap: var(--filete);
    margin: var(--esp-5) 0;
    overflow: hidden;
    border: 1px solid var(--borda);
    border-radius: var(--raio-2);
    background: var(--borda);
}

.lista-destaque.lista-grade::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: 1;
    height: 2px;
    background: var(--feixe);
    opacity: .6;
    pointer-events: none;
}

.lista-destaque.lista-grade > li {
    margin: 0;
    padding: var(--esp-5);
    background-color: var(--fundo);
    color: var(--texto-suave);
    font-size: var(--letra-apoio);
    line-height: var(--entrelinha-apoio);
    transition: background-color .2s ease;
}

.lista-destaque.lista-grade > li:hover {
    background-color: var(--fundo-elevado);
}

.lista-destaque.lista-grade > li::before {
    display: none;
}

.lista-destaque.lista-grade strong {
    display: block;
    margin-bottom: var(--esp-1);
    color: var(--texto);
    font-family: var(--fonte-titulo);
    font-weight: var(--peso-forte);
}

@media (min-width: 48rem) {
    .lista-destaque.lista-grade {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Produtos do Omnichannel no detalhe (13/10/2026): nome em Sora 20, o
   subtitulo em destaque logo abaixo e o texto de apoio em cinza. */
.pagina-secao .lista-eco-produtos h3 {
    margin: 0 0 var(--esp-1);
    font-size: var(--letra-quadro);
    font-weight: var(--peso-forte);
    line-height: var(--entrelinha-item);
    letter-spacing: var(--espaco-item);
}

.lista-eco-produtos .lista-eco-sub {
    margin: 0 0 var(--esp-3);
    color: var(--texto);
    font-size: var(--letra-corpo);
}

.lista-eco-produtos > li > p:not(.lista-eco-sub) {
    margin: 0 0 var(--esp-3);
    color: var(--texto-suave);
    font-size: var(--letra-apoio);
    line-height: var(--entrelinha-apoio);
}

.lista-eco-produtos {
    gap: var(--esp-5);
}

/* Resumo dos produtos (os 10 cartoes do topo): nome e frase no tamanho do
   `tile` do v3. */
.credenciais-produtos strong {
    font-size: var(--letra-quadro);
    line-height: var(--entrelinha-item);
    letter-spacing: var(--espaco-item);
}

.credenciais-produtos span {
    font-size: var(--letra-pequena);
    line-height: var(--entrelinha-tile);
}

.pagina-secao .credenciais-produtos {
    gap: var(--esp-5);
}

/* Tabela de leitura: cabecalho em rotulo mono, linhas separadas por filete.
   No celular cada linha vira uma ficha, com o nome da coluna (data-rotulo)
   antes de cada valor: tres colunas de texto longo nao cabem em 375px. */
/* Tabela (13/10/2026): numa moldura arredondada, cabecalho em rotulo mono
   sobre o fundo elevado, linha que acende ao passar o mouse. */
.tabela {
    width: 100%;
    margin: var(--esp-5) 0 0;
    overflow: hidden;
    border: 1px solid var(--borda);
    border-radius: var(--raio-2);
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--letra-menor);
}

.tabela caption {
    margin-bottom: var(--esp-3);
    color: var(--texto-suave);
    text-align: left;
}

.tabela th,
.tabela td {
    padding: var(--esp-3) var(--esp-4);
    border-top: 1px solid var(--borda);
    text-align: left;
    vertical-align: top;
}

.tabela thead th {
    border-top: 0;
    background: var(--fundo-elevado);
    color: var(--texto-suave);
    font-family: var(--fonte-mono);
    font-size: var(--letra-sobretitulo);
    font-weight: var(--peso-normal);
    letter-spacing: var(--espaco-cartao);
    text-transform: uppercase;
}

.tabela tbody tr:hover {
    background: var(--fundo-elevado);
}

.tabela tbody th {
    font-weight: var(--peso-medio);
}

/* Estado (pronto, em andamento, no roteiro): etiqueta com ponto colorido e
   o texto escrito; o ponto vazio e o roteiro. Nunca so a cor. */
.estado {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    padding: var(--esp-1) var(--esp-3);
    border: 1px solid var(--borda-controle);
    border-radius: var(--raio-pilula);
    color: var(--texto);
    font-weight: var(--peso-medio);
    white-space: nowrap;
}

.estado::before {
    content: "";
    flex: none;
    width: var(--esp-2);
    height: var(--esp-2);
    border-radius: var(--raio-circulo);
    background: var(--sucesso);
}

.estado-construcao::before {
    background: var(--atencao);
}

.estado-roteiro::before {
    border: 1px solid var(--texto-suave);
    background: none;
}

@media (max-width: 47.99rem) {
    .tabela thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .tabela,
    .tabela caption,
    .tabela tbody,
    .tabela tr,
    .tabela th,
    .tabela td {
        display: block;
    }

    /* Ficha com o mesmo respiro de 16px da celula no computador: com 0, o
       texto encostava no contorno da tabela (1px de folga, medido nas 25
       tabelas do site em 375px, 22/10/2026). A primeira ficha nao repete a
       linha de cima: o contorno da tabela ja a desenha. */
    .tabela tr {
        padding: var(--esp-3) var(--esp-4);
        border-top: 1px solid var(--borda);
    }

    .tabela tbody tr:first-child {
        border-top: 0;
    }

    .tabela th,
    .tabela td {
        padding: 0;
        border-top: 0;
    }

    .tabela td {
        margin-top: var(--esp-2);
    }

    .tabela td::before {
        content: attr(data-rotulo);
        display: block;
        color: var(--texto-suave);
        font-family: var(--fonte-mono);
        font-size: var(--letra-rotulo);
        text-transform: uppercase;
        letter-spacing: var(--espaco-rotulo);
    }
}

/* Perguntas frequentes: <details> nativo (abre com Enter e Espaco, sem
   JavaScript). A pergunta e a linha inteira, com alvo de toque de 44px; o
   sinal + vira - quando aberta. */
/* Perguntas (13/10/2026): num painel de raio 16; a pergunta acende ao
   passar o mouse, a aberta fica no fundo elevado, e uma seta que gira
   no lugar do + e -. */
.perguntas {
    margin: var(--esp-4) 0 0;
    overflow: hidden;
    border: 1px solid var(--borda);
    border-radius: var(--raio-2);
}

.perguntas details + details {
    border-top: 1px solid var(--borda);
}

.perguntas details[open] {
    background: var(--fundo-elevado);
}

.perguntas summary {
    display: flex;
    gap: var(--esp-4);
    align-items: center;
    justify-content: space-between;
    min-height: var(--alvo-toque);
    padding: var(--esp-4) var(--esp-5);
    font-weight: var(--peso-medio);
    cursor: pointer;
    list-style: none;
    transition: background-color .2s ease;
}

.perguntas summary::-webkit-details-marker {
    display: none;
}

.perguntas summary::after {
    content: "";
    flex: none;
    border-top: .35em solid var(--destaque);
    border-right: .35em solid transparent;
    border-left: .35em solid transparent;
    transition: transform .2s ease;
}

.perguntas details[open] summary::after {
    transform: rotate(180deg);
}

.perguntas summary:hover {
    background: var(--fundo-elevado);
}

.perguntas summary:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: 2px;
}

.perguntas details p {
    max-width: 62ch;
    margin: 0;
    padding: 0 var(--esp-5) var(--esp-5);
    color: var(--texto-suave);
    font-size: var(--letra-apoio);
    line-height: var(--entrelinha-apoio);
}

/* --- Barra de controles ------------------------------------------------- */

/* Rodape: mapa do site (do mesmo `menu` do cabecalho) e, abaixo, idioma e
   tema. */
/* Rodape do v3 (12/10/2026): logo no alto, titulos dos grupos em rotulo mono
   (caixa alta, espacado, cinza de apoio) e os links em cinza que acendem. */
.rodape {
    position: relative;
    background: var(--fundo-cromo);
}

/* O `spectrum-full` do v3: feixe de 2px no alto do rodape, que acende no
   centro, com um halo subindo dele. Decorativo. */
.rodape::before,
.rodape::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
}

.rodape::before {
    top: 0;
    height: 2px;
    background: var(--feixe-largo);
}

.rodape::after {
    bottom: 100%;
    height: 34px;
    background: var(--halo-feixe);
}

/* Logo e frase numa coluna, mapa do site ao lado (computador); um sobre o
   outro no celular. As duas partes ficam na coluna de 72rem. */
.rodape-topo {
    max-width: var(--coluna);
    margin: 0 auto;
    /* 64px em cima, como o rodape do v3. */
    padding: var(--esp-8) 0 0;
}

.rodape-marca {
    max-width: var(--coluna);
    margin: 0 auto;
    padding: 0 var(--esp-3);
}

.rodape-marca p {
    max-width: 22rem;
    margin: var(--esp-4) 0 0;
    color: var(--texto-suave);
    font-size: var(--letra-pequena);
    line-height: var(--entrelinha-apoio);
}

/* Selos das certificacoes sob a frase (pedido do Sylvio, 21/10/2026): os 4
   SVG do omni numa fila so, ate 3.5rem cada, num link so para
   /empresa/certificacoes. Com a coluna do logo estreita (1280px: 255px) os
   selos encolhem juntos em vez de o quarto cair sozinho na linha de baixo.
   O link e o alvo inteiro; o anel de foco contorna a fila. O seletor leva
   `.rodape-marca` para vencer o `.rodape-marca a` (inline-flex) do logo. */
.rodape-marca .rodape-selos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, calc(var(--esp-7) + var(--esp-2))));
    /* 16px entre os selos (21/10/2026, pedido do Thiago: 8px deixava os
       aneis quase encostados). */
    gap: var(--esp-4);
    width: fit-content;
    max-width: 100%;
    margin-top: var(--esp-5);
    border-radius: var(--raio-pilula);
}

/* `.rodape-marca` no seletor vence a altura fixa do logo (`.rodape-marca img`,
   52/62px), que esticava o selo para fora da coluna e comia o vao. */
.rodape-marca .rodape-selos img {
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 64rem) {
    .rodape-topo {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
        column-gap: var(--esp-5);
    }

    /* Os seis grupos do menu numa linha so: com 5 colunas, Contato caia
       sozinho numa segunda linha. */
    .rodape-topo .rodape-mapa {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        column-gap: var(--esp-3);
        padding-top: 0;
    }
}

.rodape-marca a {
    display: inline-flex;
}

/* Logo do rodape do v3 (`brand-logo-lg`): 52px, e 62px a partir de 992px. */
.rodape-marca img {
    display: block;
    height: 3.25rem;
    width: auto;
}

@media (min-width: 62rem) {
    .rodape-marca img {
        height: 3.875rem;
    }
}

.rodape-mapa {
    display: grid;
    gap: var(--esp-5) var(--esp-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    max-width: var(--coluna);
    margin: 0 auto;
    /* 48px ate a linha de baixo (o `mt` de 44px do `footer-bottom` do v3). */
    padding: var(--esp-6) var(--esp-3) var(--esp-7);
}

/* Do titulo do grupo ao primeiro link: o respiro do `h6` do v3 (~18px). */
.rodape-mapa ul {
    margin: var(--esp-2) 0 0;
    padding: 0;
    list-style: none;
}

.rodape-mapa a {
    display: inline-flex;
    align-items: center;
    min-height: var(--alvo-toque);
    color: var(--texto-suave);
    font-size: var(--letra-pequena);
    text-decoration: none;
}

.rodape-mapa a:hover {
    color: var(--texto);
    text-decoration: underline;
}

.rodape-mapa .rodape-titulo {
    color: var(--texto-suave);
    font-family: var(--fonte-mono);
    font-size: var(--letra-sobretitulo);
    font-weight: var(--peso-leve);
    letter-spacing: var(--espaco-largo);
    text-transform: uppercase;
}

.rodape-mapa .rodape-titulo:hover {
    color: var(--destaque-leitura);
}

/* Dados da empresa: uma faixa discreta entre o mapa e os controles. */
/* Faixa de baixo no desenho do `footer-bottom` do v3 (13/10/2026): na
   mesma coluna das outras faixas (SimetriaTest), com a linha desenhada na
   largura do TEXTO (sem o respiro de 12px dos lados), 24px abaixo dela, 32
   no fim, letra .82rem em cinza. */
.rodape-empresa {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-2) var(--esp-5);
    align-items: center;
    justify-content: space-between;
    max-width: var(--coluna);
    margin: 0 auto;
    padding: var(--esp-5) var(--esp-3) var(--esp-6);
    background: linear-gradient(var(--borda), var(--borda)) var(--esp-3) 0 / calc(100% - 2 * var(--esp-3)) 1px no-repeat;
    color: var(--texto-suave);
    font-size: var(--letra-fino);
}

.rodape-empresa address {
    font-style: normal;
}

.rodape-empresa strong {
    color: var(--texto);
    font-weight: var(--peso-medio);
}

.rodape-empresa ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--esp-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rodape-empresa a {
    display: inline-flex;
    align-items: center;
    min-height: var(--alvo-toque);
    color: var(--texto-suave);
}

.rodape-empresa a:hover {
    color: var(--texto);
}

@media (min-width: 48rem) {
    /* No computador os links ficam mais juntos; o alvo de 44px e do toque. */
    .rodape-mapa a {
        min-height: 0;
        padding: var(--esp-1) 0;
    }
}

.controles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-5);
    align-items: center;
    justify-content: center;
    padding: var(--esp-4);
    border-top: 1px solid var(--borda);
}

.grupo-controle {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
}

.grupo-controle > .rotulo {
    /* Rotulo mono do v3 (`dt` dos dados cadastrais): peso normal, .2em. */
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    font-size: var(--letra-sobretitulo);
    font-weight: var(--peso-normal);
    font-family: var(--fonte-mono);
    text-transform: uppercase;
    letter-spacing: var(--espaco-cartao);
    color: var(--texto-suave);
}

/* Globo do omni (`i-globe`) antes de "Idioma": enfeite, na cor do rotulo. */
.rotulo-icone {
    flex: none;
    width: var(--esp-4);
    height: var(--esp-4);
    fill: currentColor;
}

/* --- Seletor de idioma (links, funciona sem JS) ------------------------- */

/* Controle segmentado do omni (`componentes.css`, `.abas`), 23/10/2026: um
   trilho so, com respiro de 4px, e os idiomas dentro dele sem contorno
   proprio. O trilho fica mais fundo que o rodape (`fundo` sobre
   `fundo-cromo`) e leva o contorno de controle, minimo 3 de contraste. Antes
   eram tres caixas com contorno a 4px uma da outra, que pareciam soltas. */
.idiomas {
    display: inline-flex;
    gap: 0;
    margin: 0;
    padding: var(--esp-1);
    list-style: none;
    background: var(--fundo);
    border: 1px solid var(--borda-controle);
    border-radius: var(--raio-pilula);
}

/* Largura igual que cede ao conteudo, como a emenda do omni de 25/09/2026:
   base zero, piso no nome, entao nenhum nome e cortado. */
.idiomas li {
    display: flex;
    flex: 1 1 0;
    min-inline-size: max-content;
}

.idiomas a {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--altura-segmento);
    padding: 0 var(--esp-4);
    border-radius: var(--raio-pilula);
    color: var(--texto-suave);
    font-size: var(--letra-menor);
    font-weight: var(--peso-medio);
    text-decoration: none;
    transition: color .2s ease, background-color .2s ease;
}

.idiomas a:hover {
    /* Mouse neutro como o do .botao contornado (22/10/2026): o laranja fica
       para a acao principal e para o estado marcado. */
    color: var(--texto);
    background-image: var(--controle-mouse-camada);
}

/* aria-current marca o idioma ativo: o estilo segue o estado acessivel em vez
   de uma classe paralela, entao os dois nunca divergem. O ativo e o acento
   solido do segmento do omni, com o acabamento do .botao-cheio (clarao fino
   em cima e sombra curta). O nome proprio da transicao faz o laranja deslizar
   de um idioma para o outro na troca (a troca ja esmaece, @view-transition;
   desligado com movimento reduzido). */
.idiomas a[aria-current='true'] {
    background-color: var(--destaque);
    background-image: var(--brilho-botao);
    box-shadow: var(--sombra-botao);
    color: var(--destaque-texto);
    view-transition-name: idioma-ativo;
}

/* Celular estreito: o globo, "Idioma" e o trilho pediam 365px numa linha de
   343px e o trilho encostava na borda da tela (medido em 375px, 23/10/2026).
   Menos respiro dentro de cada idioma; numa tela ainda menor, "Idioma" sobe
   para cima do trilho em vez de empurra-lo para fora. */
@media (max-width: 29.99rem) {
    .grupo-controle {
        flex-wrap: wrap;
        justify-content: center;
    }

    .idiomas a {
        padding: 0 var(--esp-3);
    }
}

/* --- Visualizador de midia (etapa 1, 12/10/2026) -------------------------- */

/* Janela do tamanho da tela; o proprio <dialog> faz o veu (cor e desfoque),
   e nao o ::backdrop: em navegador mais antigo o ::backdrop nao enxerga as
   variaveis da pagina e o veu sairia transparente. */
.visualizador {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: var(--veu);
    color: var(--texto);
    -webkit-backdrop-filter: var(--desfoque-janela);
    backdrop-filter: var(--desfoque-janela);
    transition: opacity .2s ease;
}

.visualizador::backdrop {
    background: transparent;
}

@starting-style {
    .visualizador[open] {
        opacity: 0;
    }
}

/* A pagina de tras nao rola enquanto a janela esta aberta. */
html:has(.visualizador[open]) {
    overflow: hidden;
}

/* Palco: a imagem centrada, com espaco para o botao de fechar em cima. */
.visualizador-palco {
    display: grid;
    /* Uma celula com altura e largura definidas (1fr do palco): e o que faz o
       max-height: 100% da imagem valer. Sem isso a celula crescia com a
       imagem e o certificado de 1263px passava da tela (12/10/2026). */
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    place-items: center;
    width: 100%;
    height: 100%;
    padding: var(--esp-8) var(--esp-4) var(--esp-4);
}

.visualizador-palco > .visualizador-midia {
    grid-area: 1 / 1;
}

/* Etapa 4 (12/10/2026): video e quadro (PDF, YouTube, Vimeo) dividem o
   palco com a imagem; so um aparece por vez. O [hidden] precisa vencer o
   display das regras da midia. */
.visualizador-palco > [hidden] {
    display: none;
}

.visualizador-video,
.visualizador-quadro {
    grid-area: 1 / 1;
    border: 0;
    border-radius: var(--raio-2);
    box-shadow: var(--sombra);
}

/* Video com o player do navegador: cabe na tela, proporcao do arquivo. */
.visualizador-video {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    background: var(--fundo-elevado);
}

/* PDF: a altura toda, numa largura de leitura de documento. */
.visualizador-quadro {
    display: block;
    width: min(100%, 60rem);
    height: 100%;
    background: var(--fundo-elevado);
}

/* Player incorporado (YouTube, Vimeo): 16:9, ate a largura da coluna. */
.visualizador[data-tipo='incorporado'] .visualizador-quadro {
    width: min(100%, 72rem);
    height: auto;
    max-height: 100%;
    aspect-ratio: 16 / 9;
}

/* Etapa 2: o dedo desliza na horizontal para trocar de imagem; o navegador
   cuida so da rolagem vertical e do zoom de dois dedos. */
.visualizador-palco {
    touch-action: pan-y pinch-zoom;
}

.visualizador-midia {
    -webkit-user-select: none;
    user-select: none;
}

/* Com a barra de navegacao, a imagem para acima dela. */
.visualizador:has(.visualizador-barra:not([hidden])) .visualizador-palco {
    padding-bottom: var(--esp-9);
}

/* Barra de navegacao: embaixo e no meio, no alcance do polegar, no mesmo
   lugar em qualquer tela. Pilula solida com anterior, contador e proxima. */
.visualizador-barra {
    position: absolute;
    bottom: var(--esp-4);
    left: 50%;
    display: flex;
    align-items: center;
    gap: var(--esp-1);
    padding: var(--esp-1);
    border: 1px solid var(--borda-controle);
    border-radius: var(--raio-pilula);
    background: var(--fundo-elevado);
    box-shadow: var(--sombra);
    transform: translateX(-50%);
}

.visualizador-barra[hidden] {
    display: none;
}

.visualizador-anterior,
.visualizador-proxima {
    display: grid;
    place-items: center;
    width: var(--alvo-toque);
    height: var(--alvo-toque);
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--raio-circulo);
    background: transparent;
    color: var(--texto);
    cursor: pointer;
}

.visualizador-anterior:hover,
.visualizador-proxima:hover {
    /* Mouse neutro como o do .botao contornado (22/10/2026): o laranja fica
       para a acao principal e para o estado marcado. */
    border-color: var(--texto-suave);
    background-image: var(--controle-mouse-camada);
}

/* No primeiro e no ultimo item a seta apaga, mas segue focavel (o foco nao
   cai fora da barra). */
.visualizador-anterior[aria-disabled='true'],
.visualizador-proxima[aria-disabled='true'] {
    border-color: transparent;
    opacity: .4;
    cursor: default;
}

.visualizador-contador {
    min-width: var(--esp-8);
    color: var(--texto);
    font-family: var(--fonte-mono);
    font-size: var(--letra-menor);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.visualizador-midia {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--raio-2);
    box-shadow: var(--sombra);
    opacity: 0;
    transform: scale(.98);
    transition: opacity .2s ease, transform .2s ease;
}

.visualizador[data-carregado] .visualizador-midia {
    opacity: 1;
    transform: none;
}

/* Carregando: um anel girando no meio, ate a imagem chegar. */
.visualizador:not([data-carregado]) .visualizador-palco::before {
    content: '';
    grid-area: 1 / 1;
    width: var(--esp-7);
    height: var(--esp-7);
    border: 3px solid var(--borda-controle);
    border-top-color: var(--destaque);
    border-radius: var(--raio-circulo);
    animation: visualizador-gira .8s linear infinite;
}

@keyframes visualizador-gira {
    to {
        transform: rotate(1turn);
    }
}

.visualizador-fechar {
    position: absolute;
    top: var(--esp-4);
    right: var(--esp-4);
    display: grid;
    place-items: center;
    width: var(--alvo-toque);
    height: var(--alvo-toque);
    padding: 0;
    border: 1px solid var(--borda-controle);
    border-radius: var(--raio-circulo);
    background: var(--fundo-elevado);
    box-shadow: var(--sombra);
    color: var(--texto);
    cursor: pointer;
}

.visualizador-fechar:hover {
    /* Mouse neutro como o do .botao contornado (22/10/2026): o laranja fica
       para a acao principal e para o estado marcado. */
    border-color: var(--texto-suave);
    background-image: var(--controle-mouse-camada);
}

/* Etapa 3 (12/10/2026): ampliar para ler. A lupa fica ao lado do fechar,
   com o mesmo desenho; so aparece quando a imagem esta reduzida. */
.visualizador-ampliar {
    position: absolute;
    top: var(--esp-4);
    right: calc(var(--esp-4) + var(--alvo-toque) + var(--esp-2));
    display: none;
    place-items: center;
    width: var(--alvo-toque);
    height: var(--alvo-toque);
    padding: 0;
    border: 1px solid var(--borda-controle);
    border-radius: var(--raio-circulo);
    background: var(--fundo-elevado);
    box-shadow: var(--sombra);
    color: var(--texto);
    cursor: pointer;
}

.visualizador[data-ampliavel] .visualizador-ampliar,
.visualizador[data-ampliado] .visualizador-ampliar {
    display: grid;
}

.visualizador-ampliar:hover {
    /* Mouse neutro como o do .botao contornado (22/10/2026): o laranja fica
       para a acao principal e para o estado marcado. */
    border-color: var(--texto-suave);
    background-image: var(--controle-mouse-camada);
}

/* Ampliada, a lupa vira "menos" e fica marcada em laranja. */
.visualizador-ampliar[aria-pressed='true'] {
    border-color: var(--destaque);
    color: var(--destaque-leitura);
}

.visualizador-ampliar[aria-pressed='true'] .visualizador-ampliar-mais {
    display: none;
}

/* A imagem diz o que o clique faz: amplia, ou volta. */
.visualizador[data-ampliavel] .visualizador-midia {
    cursor: zoom-in;
}

.visualizador[data-ampliado] .visualizador-midia {
    max-width: none;
    max-height: none;
    margin: auto;
    border-radius: 0;
    cursor: grab;
}

.visualizador[data-ampliado] .visualizador-midia:active {
    cursor: grabbing;
}

/* Ampliada, o palco rola nas duas direcoes; o dedo move a imagem pela
   rolagem do proprio navegador. O margin: auto da imagem centra quando ela
   cabe e vira zero quando passa, para a rolagem alcancar as bordas. */
.visualizador[data-ampliado] .visualizador-palco {
    overflow: auto;
    place-items: start;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y pinch-zoom;
}

@media (min-width: 48rem) {
    .visualizador-palco {
        padding: var(--esp-8);
    }

    .visualizador-barra {
        bottom: var(--esp-5);
    }

    .visualizador-fechar {
        top: var(--esp-5);
        right: var(--esp-5);
    }

    .visualizador-ampliar {
        top: var(--esp-5);
        right: calc(var(--esp-5) + var(--alvo-toque) + var(--esp-2));
    }
}

@media (prefers-reduced-motion: reduce) {
    .visualizador-midia {
        transform: none;
    }

    /* O anel de carregando fica parado. */
    .visualizador:not([data-carregado]) .visualizador-palco::before {
        animation: none;
    }
}

/* --- Acessibilidade ----------------------------------------------------- */

/* Link no texto corrido. Sem esta regra o navegador usava o azul padrao
   (#0000ee), que no tema escuro dava contraste 1,98 (medido em 30/09/2026 nos
   corpos de Certificacoes e Premios). :where() tem peso zero: todo componente
   que ja pinta o seu link (menu, cartao, botao, rodape) continua valendo.
   Sublinhado fica: a cor sozinha nao pode ser o unico sinal de link. */
:where(a) {
    color: var(--destaque-leitura);
    text-underline-offset: .15em;
}

:where(a):hover {
    text-decoration-thickness: 2px;
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: 2px;
}

/* Troca de idioma: esmaecimento curto entre as duas paginas, em vez de tela
   branca (View Transitions entre documentos). O idioma.js desliga o efeito em
   qualquer outra navegacao. Navegador sem suporte ignora a regra. */
@view-transition {
    navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* Sem transicao, a subida do botao e do cartao vira um pulo seco: com menos
   movimento pedido, eles nao se mexem (como no v3). */
@media (prefers-reduced-motion: reduce) {
    .botao:hover,
    .cartoes a:hover,
    .cert:hover,
    .credenciais a:hover {
        transform: none;
    }

    /* Separada: sem :has() o navegador descartaria a lista inteira. */
    .familia:has(a):hover {
        transform: none;
    }

    .lista-eco > li:has(a:hover) {
        transform: none;
    }

    .voltar-topo:hover .voltar-topo-seta {
        transform: none;
    }

    /* O anel nao e animacao de tempo: anda junto com a rolagem que o proprio
       visitante faz. A regra geral acima (.01ms) o deixaria cheio de cara. */
    .voltar-topo-barra {
        animation-duration: auto !important;
    }
}

/* --- Aviso de estado (13/10/2026, docs/estudos/2026-10-13-avisos-de-estado.md)
   Um so desenho para todo aviso de estado (formulario em preparacao, pagina
   em construcao, so em portugues, texto provisorio): a cor de INFORMACAO do
   omni, nunca o laranja, que e da acao. Contorno fino, icone "i" e texto:
   o tipo do aviso nao depende so da cor. */
.aviso {
    display: flex;
    gap: var(--esp-3);
    align-items: flex-start;
    padding: var(--esp-3) var(--esp-4);
    border: 1px solid var(--info);
    border-radius: var(--raio-1);
    background: var(--info-fundo);
    color: var(--texto);
    text-wrap: pretty;
}

/* O icone mora numa caixa da altura de uma linha: fica centrado na primeira
   linha do texto, com uma ou varias. */
.aviso-icone {
    display: flex;
    flex: none;
    align-items: center;
    height: 1.5em;
    color: var(--info-texto);
}

.aviso-icone svg {
    display: block;
}

/* "e-mail" nao quebra no hifen. */
.sem-quebra {
    white-space: nowrap;
}

/* --- Bloco de contato ---------------------------------------------------- */

/* /contato (09/10/2026): tres secoes com o mesmo ritmo das paginas de texto
   (.pagina-secao) — caminhos por assunto, formulario e sede. Todo bloco ocupa
   a linha inteira; os cartoes dividem a linha em 3 (1 no celular). */
.contato-secao {
    width: 100%;
    margin-top: var(--topo-secao);
    padding-top: var(--topo-secao);
    border-top: 1px solid var(--borda);
}

/* Titulo de secao das paginas internas do v3 (o mesmo da .pagina-secao). */
.contato-secao > h2 {
    margin: 0 0 var(--esp-5);
    font-size: var(--letra-capitulo);
    font-weight: var(--peso-forte);
    line-height: var(--entrelinha-item);
    letter-spacing: var(--espaco-capitulo);
}

.contato-caminhos {
    display: grid;
    gap: var(--esp-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.contato-caminhos > li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--esp-3);
    padding: var(--esp-5);
    border: 1px solid var(--borda);
    border-radius: var(--raio-2);
    background: var(--fundo-elevado);
}

/* Cartao de contato do v3 (`card-hsna`): titulo Sora 700 de 20px, texto
   de apoio .94rem em cinza. */
.contato-caminhos h3 {
    margin: 0;
    font-size: var(--letra-quadro);
    line-height: var(--entrelinha-item);
    letter-spacing: var(--espaco-item);
}

.contato-caminhos p {
    margin: 0;
    color: var(--texto-suave);
    font-size: var(--letra-apoio);
    line-height: var(--entrelinha-apoio);
}

/* Canal: rotulo em cima, valor embaixo, linha de 44px — como na home. */
.contato-canais {
    align-self: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contato-canais li {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--alvo-toque);
    padding: var(--esp-2) 0;
}

.contato-canais a:hover {
    color: var(--destaque-leitura);
    text-decoration: underline;
}

/* O botao vai para o pe do cartao: os tres cartoes terminam alinhados. */
.contato-caminhos .botao {
    margin-top: auto;
}

@media (min-width: 64rem) {
    .contato-caminhos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Formulario de /contato no Design System do omni, sem o desenho nativo de
   nenhum controle (09/10/2026). Fonte: componentes.css do omni — `.campo`
   (fundo --ds-input, raio, contorno), `.busca` (contorno escurece ao passar o
   ponteiro, acende no acento com o anel ao focar), DS-47 (desligado: mesma
   tinta, opacidade .55 e cursor de recusa) e B-4.48 (anel em box-shadow).
   Seta da selecao e estado de erro nao existem no omni: montados aqui com os
   tokens dele (lacuna anotada em docs/estudos/2026-10-09-contato.md). */
.contato-form {
    /* Refino de 15/10/2026: campo da altura do botao do pe (48px, o do v3),
       e nao os 36px de painel. Vale tambem no toque (acima dos 44px). */
    --altura-campo: 3rem;
    display: grid;
    gap: var(--esp-5);
}

.campo {
    display: flex;
    flex-direction: column;
    gap: var(--esp-2);
}

/* Rotulo: a tinta do texto em letra menor e o campo em cima, como nos
   formularios atuais; a dica e o "(opcional)" ficam no cinza, abaixo dele. */
.campo label {
    color: var(--texto);
    font-size: var(--letra-menor);
    font-weight: var(--peso-medio);
}

.campo .opcional,
.campo small {
    color: var(--texto-suave);
    font-size: var(--letra-menor);
    font-weight: var(--peso-normal);
}

.campo input,
.campo select,
.campo textarea {
    appearance: none;
    width: 100%;
    height: var(--altura-campo);
    margin: 0;
    /* Altura declarada = folga vertical zero (omni B-4.292: as duas brigam). */
    padding: 0 var(--esp-4);
    border: 1px solid var(--borda-controle);
    border-radius: var(--raio-1);
    background: var(--fundo-campo);
    box-shadow: none;
    color: var(--texto);
    font: inherit;
    font-size: var(--letra-corpo);
    line-height: var(--entrelinha-corpo);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.campo textarea {
    height: auto;
    min-height: 9rem;
    padding: var(--esp-3) var(--esp-4);
    resize: vertical;
}

.campo input:hover,
.campo select:hover,
.campo textarea:hover {
    border-color: var(--texto-suave);
}

.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
    border-color: var(--destaque);
    outline: 2px solid transparent;
    outline-offset: 1px;
    box-shadow: var(--anel-foco);
}

/* Erro: so depois que a pessoa mexeu (:user-invalid) ou tentou enviar
   (aria-invalid, escrito pelo formulario.js). Nunca so cor: a mensagem
   escrita vem embaixo do campo. */
/* Duas regras, e nao uma lista so: navegador sem :user-invalid (Safari
   antes de 16.5, Chrome antes de 119) descarta a lista INTEIRA, e o contorno
   de erro que o formulario.js marca com aria-invalid sumia junto
   (12/10/2026). */
.campo [aria-invalid='true'] {
    border-color: var(--perigo);
}

.campo input:user-invalid,
.campo select:user-invalid,
.campo textarea:user-invalid {
    border-color: var(--perigo);
}

.campo-erro {
    margin: 0;
    color: var(--perigo-texto);
    font-size: var(--letra-menor);
    font-weight: var(--peso-medio);
}

.campo input:disabled,
.campo select:disabled,
.campo textarea:disabled {
    cursor: not-allowed;
    opacity: .55;
}

/* Botao do formulario: o .botao-cheio da casa num <button>, sem o fundo, a
   fonte e o cursor do navegador. Desligado: DS-47. */
.contato-form button {
    appearance: none;
    font: inherit;
    /* Depois do `font: inherit`: a letra do .botao (Sora .95rem), como os
       outros botoes do site; antes saia em Inter 16px. */
    font-family: var(--fonte-titulo);
    font-size: var(--letra-controle);
    font-weight: var(--peso-medio);
    cursor: pointer;
}

.contato-form button:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 1px;
    box-shadow: var(--anel-foco);
}

.contato-form button:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.contato-form button:disabled:hover {
    border-color: var(--destaque);
    background-color: var(--destaque);
    transform: none;
}

.contato-aviso {
    margin: 0;
    color: var(--texto-suave);
    font-size: var(--letra-menor);
}

/* Previa (formulario sem rota de envio): aviso no topo, botao desligado. */
.contato-previa {
    margin: 0 0 var(--esp-6);
}

/* --- Envio (13/10/2026, docs/estudos/2026-10-13-formulario-contato.md) ---
   Apoio a esquerda (4 de 12) e o formulario num cartao (8 de 12) a partir de
   992px, como a pagina de dados cadastrais do v3; abaixo disso, um sobre o
   outro. O bloco ocupa a linha inteira: e a coluna de dentro que se divide. */
.contato-envio {
    display: grid;
    gap: var(--esp-6);
}

/* Coluna de apoio (o `dc-apoio` do v3): regua laranja a esquerda, a frase do
   que acontece depois e os canais de quem nao quer escrever. */
.contato-apoio {
    padding-left: var(--esp-5);
    /* Fio neutro (22/10/2026), como na .declaracao. */
    border-left: 1px solid var(--borda-controle);
}

.contato-apoio > p {
    margin: 0 0 var(--esp-4);
    color: var(--texto-suave);
    font-size: var(--letra-apoio);
    line-height: var(--entrelinha-apoio);
}

/* Valor sem link (o horario), no mesmo peso dos canais. */
@media (min-width: 62rem) {
    .contato-envio {
        grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
        column-gap: var(--esp-7);
        align-items: start;
    }

    .contato-apoio {
        position: sticky;
        top: calc(var(--altura-cabecalho) + var(--esp-5));
    }
}

/* Cartao do formulario (o `card-hsna` do v3): a regiao que diz "isto e uma
   tarefa so". */
.contato-cartao {
    padding: var(--esp-5) var(--esp-4);
    border: 1px solid var(--borda);
    border-radius: var(--raio-2);
    background-color: var(--fundo-elevado);
    background-image: var(--brilho-topo);
}

@media (min-width: 36rem) {
    .contato-cartao {
        padding: var(--esp-6);
    }
}

/* Escolha unica a vista (o chip do omni sobre radio): as quatro faixas de
   tamanho com um clique, no lugar da lista suspensa. */
.campo-escolha {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.campo-escolha legend {
    margin: 0 0 var(--esp-2);
    padding: 0;
    color: var(--texto);
    font-size: var(--letra-menor);
    font-weight: var(--peso-medio);
}

/* As quatro faixas em grade de larguras iguais (15/10/2026): duas por linha
   a partir de 36rem, uma no celular. Antes quebravam 3 + 1, cada uma de um
   tamanho. */
.escolhas {
    display: grid;
    gap: var(--esp-2);
}

@media (min-width: 36rem) {
    .escolhas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.escolha {
    position: relative;
}

/* O radio fica no lugar (foco, setas do teclado, envio), invisivel por cima
   do rotulo: o clique cai nele. Depois de `.campo input` de proposito. */
.escolha input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.escolha label {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    height: 100%;
    min-height: var(--altura-campo);
    padding: var(--esp-2) var(--esp-4);
    border: 1px solid var(--borda-controle);
    border-radius: var(--raio-1);
    background: var(--fundo-campo);
    color: var(--texto-suave);
    font-size: var(--letra-menor);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

/* Marca da escolha: circulo vazio; marcado, cheio. Nunca so a cor. */
.escolha label::before {
    content: '';
    flex: none;
    /* Borda por dentro: marcar engrossa a borda sem crescer a bolinha nem
       empurrar o texto (antes andava 8px, medido em 16/10/2026). */
    box-sizing: border-box;
    width: var(--esp-4);
    height: var(--esp-4);
    border: 1px solid var(--borda-controle);
    border-radius: var(--raio-circulo);
    transition: border-width .15s ease, border-color .15s ease;
}

.escolha:hover label {
    border-color: var(--texto-suave);
    color: var(--texto);
}

.escolha input:checked + label {
    border-color: var(--destaque);
    background: var(--destaque-fundo);
    color: var(--texto);
}

.escolha input:checked + label::before {
    border: 5px solid var(--destaque);
}

.escolha input:focus-visible + label {
    box-shadow: var(--anel-foco);
}

/* Contador da mensagem, a direita, com algarismos de largura fixa. */
.campo-contador {
    align-self: flex-end;
    font-variant-numeric: tabular-nums;
}

/* Pe do cartao: privacidade a esquerda, botao a direita; no celular o botao
   ocupa a largura toda. */
.contato-pe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-4);
    padding-top: var(--esp-5);
    border-top: 1px solid var(--borda);
}

.contato-pe .contato-aviso {
    max-width: 46ch;
}

@media (max-width: 35.99rem) {
    .contato-pe .botao {
        width: 100%;
    }
}

/* Resumo de erro (padrao GOV.UK): no topo do formulario, um link por campo
   com problema; recebe o foco ao enviar. Texto e contorno, nunca so cor. */
.contato-resumo {
    grid-column: 1 / -1;
    padding: var(--esp-4) var(--esp-5);
    border: 1px solid var(--perigo);
    border-radius: var(--raio-1);
}

.contato-resumo ul {
    display: grid;
    gap: var(--esp-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.contato-resumo a {
    color: var(--perigo-texto);
    font-weight: var(--peso-medio);
}

/* Enviando: o botao avisa (aria-busy) e o formulario.js nao deixa enviar
   duas vezes. O giro para com movimento reduzido. */
.contato-form button[aria-busy='true'] {
    cursor: progress;
}

.contato-form button[aria-busy='true']::before {
    content: '';
    width: var(--esp-3);
    height: var(--esp-3);
    margin-right: var(--esp-2);
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--raio-circulo);
    animation: girar .8s linear infinite;
}

@keyframes girar {
    to {
        transform: rotate(1turn);
    }
}

@media (prefers-reduced-motion: reduce) {
    .contato-form button[aria-busy='true']::before {
        animation: none;
    }
}

/* Armadilha para robo: fora da tela, nunca display:none (robo ignora este). */
.contato-armadilha {
    position: absolute;
    left: -100vw;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (pointer: coarse) {
    :root {
        --altura-campo: var(--alvo-toque);
    }
}

@media (min-width: 48rem) {
    .contato-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .campo-largo {
        grid-column: 1 / -1;
    }
}

/* Sede, horario e registro: os dados do Organization do JSON-LD. */
.contato {
    --vao-grade: var(--esp-5);
    --largura-cartao: 15rem;
    gap: var(--esp-5);
    width: 100%;
    /* Moldura dos `dados-cadastrais` do v3 (13/10/2026): contorno fino,
       raio 16, respiro de 24, sobre o fundo da pagina. */
    padding: var(--esp-5);
    border: 1px solid var(--borda);
    border-radius: var(--raio-2);
}

/* Rotulos da sede no desenho dos `dados-cadastrais` do v3: mono, caixa
   alta, peso normal (12px, o piso; no v3 9,6px). */
.contato h3 {
    margin: 0 0 var(--esp-2);
    font-size: var(--letra-sobretitulo);
    font-weight: var(--peso-normal);
    font-family: var(--fonte-mono);
    text-transform: uppercase;
    letter-spacing: var(--espaco-cartao);
    color: var(--texto-suave);
}

.contato address,
.contato p {
    margin: 0;
    font-style: normal;
    line-height: var(--entrelinha-corpo);
}

/* Valores da sede no tamanho do `dd` do v3 (.95rem). */
.contato address {
    font-size: var(--letra-controle);
}

.contato address strong {
    font-weight: var(--peso-medio);
}

.contato p {
    color: var(--texto-suave);
    font-size: var(--letra-apoio);
    line-height: var(--entrelinha-apoio);
}

/* "Ver no mapa": link de 44px de altura, abaixo do endereco. */
.contato-mapa {
    display: inline-flex;
    align-items: center;
    min-height: var(--alvo-toque);
    color: var(--destaque-leitura);
    font-size: var(--letra-canal);
}

.contato dl {
    margin: 0;
    line-height: var(--entrelinha-corpo);
}

.contato dt {
    color: var(--texto-suave);
    font-family: var(--fonte-mono);
    font-size: var(--letra-sobretitulo);
    letter-spacing: var(--espaco-cartao);
    text-transform: uppercase;
}

/* Valor em Inter .95rem, como o `dd` dos dados cadastrais do v3. */
.contato dd {
    margin: 0 0 var(--esp-2);
    font-size: var(--letra-controle);
}

/* Ficha de dados (/empresa/dados-cadastrais, 09/10/2026): uma linha por
   dado, "rotulo | valor | copiar". Quem abre a pagina quer levar o numero
   para outro sistema; por isso o valor tem letra de corpo (16px, antes 14px
   monoespacada) e algarismos de largura igual, e o botao fica na mesma linha.
   Uma familia de letra so, como o omni (ele nao tem token de monoespacada). */
/* Desde 12/10/2026 a ficha e o cartao do v3: as linhas dentro de um painel
   elevado, com borda e canto, e o rotulo em letra mono caixa alta. */
.ficha {
    width: 100%;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--borda);
    border-radius: var(--raio-2);
    background: var(--fundo-elevado);
    box-shadow: var(--sombra);
}

.ficha-linha {
    display: grid;
    gap: var(--esp-1);
    padding: var(--esp-3) var(--esp-5);
}

.ficha-linha + .ficha-linha {
    border-top: 1px solid var(--borda);
}

.ficha dt {
    color: var(--texto-suave);
    font-family: var(--fonte-mono);
    /* O `dt` do `dc-linha` do v3: peso normal e .2em (12px, o piso). */
    font-size: var(--letra-sobretitulo);
    font-weight: var(--peso-normal);
    letter-spacing: var(--espaco-cartao);
    text-transform: uppercase;
}

.ficha dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-2) var(--esp-4);
    margin: 0;
}

.ficha-valor {
    color: var(--texto);
    font-style: normal;
    line-height: var(--entrelinha-corpo);
    overflow-wrap: anywhere;
}

.ficha-numero {
    font-variant-numeric: tabular-nums;
}

/* Canais: cada link e alvo de 44px; dois na mesma linha quebram no celular. */
.ficha-canais {
    justify-content: flex-start;
}

.ficha-canais a {
    display: inline-flex;
    align-items: center;
    min-height: var(--alvo-toque);
    /* O `a.dc-valor` do v3: o valor no branco do texto, sublinhado laranja. */
    color: var(--texto);
    text-decoration: underline;
    text-decoration-color: var(--destaque);
    text-underline-offset: .2em;
    overflow-wrap: anywhere;
}

/* Copiar: botao vazado da casa, menor que o de acao (e secundario), mas com
   alvo de 44px no toque. Acende o contorno por 2,5 s depois de copiar. */
.ficha-copiar {
    appearance: none;
    display: inline-flex;
    align-items: center;
    min-height: var(--altura-campo);
    padding: 0 var(--esp-3);
    border: 1px solid var(--borda-controle);
    border-radius: var(--raio-1);
    background: transparent;
    color: var(--texto);
    font: inherit;
    font-size: var(--letra-menor);
    font-weight: var(--peso-medio);
    cursor: pointer;
}

.ficha-copiar:hover {
    /* O mesmo mouse do .botao contornado (22/10/2026): contorno clareia e o
       fundo acende de leve. O laranja fica para o "copiado", que e a resposta. */
    border-color: var(--texto-suave);
    background-image: var(--controle-mouse-camada);
}

.ficha-copiar:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 1px;
    box-shadow: var(--anel-foco);
}

.ficha-copiar[data-copiado] {
    border-color: var(--destaque);
    background: var(--destaque-fundo);
}

.ficha-nota {
    margin: var(--esp-3) 0 0;
}

.ficha-nota a {
    display: inline-flex;
    align-items: center;
    min-height: var(--alvo-toque);
}

/* Aviso de "Copiado": a regiao viva fica sempre no HTML; vazia, nao ocupa
   lugar; com texto, aparece no pe da tela, sem empurrar nada. */
.ficha-status:empty {
    display: none;
}

.ficha-status {
    position: fixed;
    bottom: var(--esp-6);
    left: 50%;
    z-index: 30;
    margin: 0;
    padding: var(--esp-2) var(--esp-4);
    border: 1px solid var(--borda-controle);
    border-radius: var(--raio-1);
    background: var(--fundo-cromo);
    box-shadow: var(--sombra);
    color: var(--texto);
    transform: translateX(-50%);
}

@media (min-width: 40rem) {
    .ficha-linha {
        grid-template-columns: 12rem minmax(0, 1fr);
        align-items: center;
        gap: var(--esp-4);
    }
}

/* O logo do cabecalho: altura fixa, largura proporcional. */
/* 50px como no v3 (12/10/2026): abaixo de ~48px a palavra TECNOLOGIA do
   lockup vira borrao, entao este e o piso no computador; no celular, 42px.
   Antes eram 64px, copiados do www. */
.marca img {
    display: block;
    height: 3.125rem;
    width: auto;
}

/* Logo por tema. O arquivo oficial tem as letras brancas e some no fundo
   claro; o -claro e a mesma marca com as letras escuras. Mesma regra de
   precedencia dos tokens: a escolha explicita vence a preferencia do sistema. */
.logo-escuro {
    display: none !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .logo-claro {
        display: none !important;
    }

    :root:not([data-theme]) .logo-escuro {
        display: block !important;
    }
}

:root[data-theme='dark'] .logo-claro {
    display: none !important;
}

:root[data-theme='dark'] .logo-escuro {
    display: block !important;
}

/* --- Submenu (megamenu) -------------------------------------------------- */

.navegacao li {
    position: relative;
}

/* O submenu vive no HTML e e revelado por CSS. Sem JavaScript: menu que depende
   de JS some para quem tem o script bloqueado, e aqui nao ha nada que
   justifique esse risco.

   Sem margem em cima de proposito: um vao entre o item e o submenu faz o mouse
   "sair" do item no caminho, e o submenu fecha antes de ser alcancado. */
.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    display: none;
    min-width: 15rem;
    margin: 0;
    /* Painel do v3: respiro igual nos quatro lados, item com fundo no hover. */
    padding: var(--esp-2);
    border: 1px solid var(--borda);
    border-radius: var(--raio-2);
    background: var(--fundo-elevado);
    /* Sem sombra, como o `dropdown-menu` do v3: o contorno separa. */
    list-style: none;
}

/* Os ultimos itens abrem o submenu para a ESQUERDA: alinhado pela esquerda, o
   de "Servicos" passava da borda da tela e criava rolagem para o lado. */
.navegacao > ul > li:nth-last-child(-n + 2) > .submenu {
    left: auto;
    right: 0;
}

/* `:focus-within` e o que faz o Tab funcionar. Sem ele o submenu abriria so no
   mouse, e quem navega por teclado ficaria sem acesso a 17 das 23 paginas. */
.navegacao li:hover > .submenu,
.navegacao li:focus-within > .submenu {
    display: block;
}

/* Item do submenu do v3 (12/10/2026): letra menor que o primeiro nivel,
   cinza de apoio, fundo tintado ao passar o mouse; a pagina atual fica com o
   fundo tintado e a cor do texto. Sem seta: o v3 nao tem. */
.submenu a {
    display: flex;
    align-items: center;
    padding: var(--esp-2) var(--esp-3);
    border-radius: var(--raio-1);
    color: var(--texto-suave);
    /* .92rem e entrelinha 1,5: o `dropdown-item` do v3 (13/10/2026). */
    font-size: var(--letra-pequena);
    font-weight: var(--peso-normal);
    line-height: var(--entrelinha-corpo);
    white-space: nowrap;
}

/* Sob o mouse, fundo cinza; a pagina atual, fundo laranja (v3: hover no
   --bg-2, ativo no --accent-soft). */
.submenu a:hover {
    background: var(--fundo-realce);
    color: var(--texto);
}

.submenu a[aria-current='page'] {
    background: var(--destaque-fundo);
    color: var(--texto);
    /* O mesmo traco laranja do primeiro nivel (15/10/2026): so com o fundo,
       a pagina atual (1,12:1 sobre o painel) e o item sob o mouse (1,08:1)
       ficavam iguais, os dois com a letra branca. */
    box-shadow: inset 2px 0 0 var(--destaque);
}

/* O indicador de submenu e decorativo: o estado real e anunciado por
   aria-haspopup, entao o simbolo fica fora da arvore de acessibilidade.
   Triangulo para baixo, o `dropdown-toggle` do v3 (no lugar da seta
   diagonal do www). */
.navegacao .tem-submenu > a::after {
    /* O `dropdown-toggle` do Bootstrap no v3: triangulo de borda de .3em. */
    content: "";
    display: inline-block;
    margin-left: var(--esp-1);
    vertical-align: .255em;
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-left: .3em solid transparent;
}

/* Botao de abrir o submenu: so existe no celular, com JavaScript. */
.submenu-abrir {
    display: none;
}

/* Painel no computador (auditoria do menu, 15/10/2026). Medido antes:
   painel e pagina com 1,06:1 e contorno com 1,19:1, entao o painel sumia
   sobre o fundo escuro; abria e fechava num estalo; e fechava no instante
   em que o mouse escapava 1px. Agora: sombra do tema para dar altura,
   entrada curta (opacidade e 4px de subida) e 120ms de tolerancia antes de
   fechar. `visibility` no lugar de `display`: o link escondido continua
   fora do Tab e do leitor de tela, e a transicao funciona. */
@media (min-width: 62rem) {
    .submenu {
        display: block;
        visibility: hidden;
        opacity: 0;
        transform: translateY(calc(var(--esp-1) * -1));
        box-shadow: var(--sombra);
        transition: opacity .15s ease .12s, transform .15s ease .12s, visibility 0s linear .27s;
    }

    .navegacao li:hover > .submenu,
    .navegacao li:focus-within > .submenu {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: opacity .15s ease, transform .15s ease, visibility 0s;
    }

    /* Esc fecha o painel aberto (WCAG 1.4.13: conteudo que aparece no mouse
       ou no foco tem de poder ser dispensado). O menu.js poe a classe e a
       tira quando o mouse ou o foco saem do item. Depois da regra de cima
       de proposito: mesmo peso, vence a ultima. */
    .navegacao li.dispensado > .submenu {
        visibility: hidden;
        opacity: 0;
        transition: none;
    }

    /* Com o painel aberto o item de cima continua aceso: antes ele voltava
       ao cinza assim que o mouse descia para o painel, e o painel ficava sem
       dono a vista. */
    .navegacao li:hover > a,
    .navegacao li:focus-within > a {
        color: var(--texto);
    }

    /* O triangulo vira para cima com o painel aberto. */
    .navegacao .tem-submenu > a::after {
        transition: transform .15s ease;
    }

    .navegacao .tem-submenu:hover > a::after,
    .navegacao .tem-submenu:focus-within > a::after {
        transform: rotate(180deg);
    }

    .navegacao .tem-submenu.dispensado > a::after {
        transform: none;
    }
}

@media (min-width: 62rem) and (prefers-reduced-motion: reduce) {
    .submenu {
        transform: none;
    }
}

/* Traco laranja do topo dos cartoes: saiu de todos em 22/10/2026 (decisao do
   Thiago, depois do estilo novo dos desenhos). O cartao e o contorno de 1px
   em --borda; o laranja fica no icone, na seta, na acao e no sobretitulo. */
/* --- Acabamento dos cartoes (v3, 12/10/2026) -------------------------------
   O leve clarao no alto de todo cartao (o 13.2 do v3). Fica aqui, depois de
   todos os cartoes, porque a regra de cada um usa `background:` e apagaria a
   imagem se viesse depois. */
.familia,
.mapa-nos > li,
.cartoes-recursos > li,
.home-final-painel,
.cartoes a,
.lista-eco > li,
.lista-painel li,
.numeros li,
.diagrama-no,
.contato-caminhos > li,
.ficha,
.credenciais a,
.lista-cert li,
.submenu {
    background-image: var(--brilho-topo);
}

/* --- Entrada ao rolar (o `reveal` do v3, 12/10/2026) ----------------------
   O revelar.js poe .revelar so nos blocos abaixo da primeira tela, e so com
   movimento liberado; .revelado quando entram na tela. Sem o script nada fica
   escondido. Na impressao tudo aparece. */
.revelar {
    opacity: 0;
    transform: translateY(var(--esp-4));
    transition: opacity .6s ease, transform .6s ease;
}

.revelar.revelado {
    opacity: 1;
    transform: none;
}

@media print {
    .revelar {
        opacity: 1;
        transform: none;
    }
}

/* --- Celular ------------------------------------------------------------- */

/* No celular nao ha hover: o submenu passa a ficar sempre visivel, recuado,
   dentro do menu. O menu inteiro fica atras do botao "Menu" — aberto, eram 23
   links e 934px antes do titulo da pagina. */
/* Ate 991px, como o v3 (`navbar-expand-lg`): na coluna de 720px do tablet
   logo + sete itens nao cabem numa linha (13/10/2026). */
@media (max-width: 61.99rem) {
    .botao-menu {
        display: inline-flex;
        align-items: center;
        gap: var(--esp-2);
        min-height: var(--alvo-toque);
        /* Sem contorno, como o `navbar-toggler border-0` do v3; o icone de
           tres tracos dele, e a palavra "Menu" continua escrita. */
        padding: 0 var(--esp-3);
        border: 0;
        border-radius: var(--raio-1);
        background: none;
        color: var(--texto);
        font: inherit;
        font-size: var(--letra-corpo);
        font-weight: var(--peso-medio);
        cursor: pointer;
    }

    .botao-menu::before {
        content: "";
        width: 1.125rem;
        height: 2px;
        background: currentColor;
        box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
    }

    /* Menu aberto: os tres tracos viram um X (15/10/2026). Antes o icone
       nao mudava e so o leitor de tela sabia que o menu estava aberto. */
    .botao-menu[aria-expanded='true']::before {
        height: 1.125rem;
        background:
            linear-gradient(45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)),
            linear-gradient(-45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px));
        box-shadow: none;
    }

    .botao-menu[hidden] {
        display: none;
    }

    .marca img {
        height: 2.625rem;
    }

    /* Com o cabecalho fixo, o menu aberto rola por dentro: sem isto, o fim da
       lista ficava abaixo da tela e fora de alcance. */
    .navegacao {
        flex-basis: 100%;
        /* No celular o cabecalho, com o vao ate o menu, tem ~93px. A linha em
           vh e o plano B de quem nao conhece dvh (Safari antes de 15.4). */
        max-height: calc(100vh - var(--altura-cabecalho) - var(--esp-4));
        max-height: calc(100dvh - var(--altura-cabecalho) - var(--esp-4));
        margin-left: 0;
        overflow-y: auto;
    }

    /* Fechado quando ha JavaScript. A classe `js` e posta no <html> pelo trecho
       inline do <head>, ANTES do primeiro desenho; o menu.js so chega depois.
       Por isso o estado inicial e decidido aqui, e nao pelo atributo que o
       menu.js escreve: esperar por ele fazia a pagina nascer com o menu aberto
       e pular (CLS 0,906). Sem JS, nada disso vale e o menu fica aberto. */
    .js .navegacao:not([data-menu='aberto']) {
        display: none;
    }

    /* O botao ja ocupa o seu lugar no primeiro desenho, sem aparecer depois. */
    .js .botao-menu[hidden] {
        display: inline-flex;
    }

    .submenu {
        position: static;
        display: block;
        min-width: 0;
        margin: 0 0 0 var(--esp-3);
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
    }

    .navegacao > ul {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .navegacao a {
        display: flex;
        align-items: center;
        min-height: var(--alvo-toque);
        font-size: var(--letra-corpo);
    }

    /* Hierarquia na coluna (15/10/2026): secao em branco, pagina da secao
       em cinza. Antes as duas eram cinza e so 12px de recuo as separavam. */
    .navegacao > ul > li > a {
        color: var(--texto);
    }

    /* O triangulo do link some no celular: quem abre o submenu e o botao ao
       lado (13/10/2026, como o v3, onde o submenu fica fechado ate o toque).
       A pagina atual ganha o traco laranja na ESQUERDA, porque no celular o
       menu e uma coluna. */
    .navegacao .tem-submenu > a::after {
        display: none;
    }

    /* Link e botao na mesma linha; o submenu embaixo, na largura toda. */
    .js .navegacao .tem-submenu {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--alvo-toque);
    }

    .js .navegacao .tem-submenu > .submenu {
        grid-column: 1 / -1;
    }

    /* Fechado ate o toque (so com JS: sem ele, tudo aberto como sempre). */
    .js .navegacao .tem-submenu:not(.aberto) > .submenu {
        display: none;
    }

    .submenu-abrir {
        display: grid;
        place-items: center;
        width: var(--alvo-toque);
        height: var(--alvo-toque);
        padding: 0;
        border: 0;
        border-radius: var(--raio-1);
        background: none;
        color: var(--texto-suave);
        cursor: pointer;
    }

    .submenu-abrir[hidden] {
        display: none;
    }

    .submenu-abrir::before {
        content: "";
        border-top: .35em solid;
        border-right: .35em solid transparent;
        border-left: .35em solid transparent;
        transition: transform .2s ease;
    }

    .submenu-abrir[aria-expanded='true']::before {
        transform: rotate(180deg);
    }

    .submenu-abrir:hover {
        background: var(--fundo-realce);
        color: var(--texto);
    }

    .submenu a {
        font-size: var(--letra-corpo);
    }

    .navegacao > ul > li > a[aria-current='page'] {
        box-shadow: inset 2px 0 0 var(--destaque);
    }

    /* Alvos de toque: no celular os telefones e e-mails do Contato sao o que
       mais se toca no site, e a trilha e o logo sao a volta para cima. */
    .marca,
    .trilha a,
    .contato a,
    .idiomas a {
        display: inline-flex;
        align-items: center;
        min-height: var(--alvo-toque);
    }
}