/* ==========================================================================
   1 · Cabecalho
   O fundo é sempre pintado (var(--bg-dinamico), que sem JS cai no marinho
   profundo): com o JS off o header nunca fica com texto claro sobre papel.
   ========================================================================== */
.cabecalho{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:50;
  background-color:var(--bg-dinamico,var(--marinho-profundo));
  color:var(--txt-escuro);
  --fundo:var(--bg-dinamico,var(--marinho-profundo));
  --txt:var(--txt-escuro);
  --txt-2:var(--txt2-escuro);
  --foco:var(--txt-escuro);
  --acento:var(--verde);           /* 7,45:1 sobre o profundo do topo */
  transition:transform var(--d-ui) var(--ease-saida),
             background-color var(--d-transicao) var(--ease-sistema),
             box-shadow var(--d-ui) var(--ease-sistema);
}
[data-bg="papel"] .cabecalho,
[data-bg="recuado"] .cabecalho{
  color:var(--txt-claro); --txt:var(--txt-claro); --txt-2:var(--txt2-claro);
  --foco:var(--txt-claro);
  --acento:var(--txt-claro);       /* verde sobre papel seria 2,14:1 */
}
/* B-2: o estado do header NAO pode se chamar data-oculto - e o mesmo nome que
   o Revelar usa, e o [data-oculto] global aplicava opacity:0 sem transicao,
   fazendo o header piscar em vez de deslizar. Estado com nome proprio. */
.cabecalho[data-recolhido]{ transform:translateY(-100%) }
.cabecalho[data-solido]{
  box-shadow:0 1px 0 var(--linha-sutil-escuro);
}
[data-bg="papel"] .cabecalho[data-solido],
[data-bg="recuado"] .cabecalho[data-solido]{ box-shadow:0 1px 0 var(--linha-sutil-claro) }

.cabecalho__grade{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--e-8) var(--e-16);
  min-height:var(--altura-cabecalho);
  /* com zoom de texto a 200% o rótulo do CTA cresce; a barra ganha altura em
     vez de empurrar a página para fora da tela (WCAG 1.4.4 e 1.4.10) */
  flex-wrap:wrap;
}
.cabecalho__nav{ display:flex; align-items:center; flex-wrap:wrap;
                 gap:var(--e-8) var(--e-16); min-width:0;
                 /* t-micro carrega medida de 40ch, que é regra de TEXTO. Num
                    contêiner de layout ela estrangula a barra e quebra a nav
                    em duas linhas mesmo em 1440px. */
                 max-width:none }
@media (min-width:600px){ .cabecalho__nav{ column-gap:var(--e-24) } }
@media (min-width:1280px){ .cabecalho__nav{ column-gap:var(--e-32) } }
/* No celular o menu de seções sai (pendência aberta do dono: "menu de seções
   no mobile"), mas a ação de conversa PERMANECE: tirar o CTA do topo no
   celular seria perder a conversão principal justamente onde está o tráfego. */
.cabecalho__nav a:not(.cta){ display:none }
@media (min-width:960px){
  .cabecalho__nav a:not(.cta){ display:inline-flex }
}
.cabecalho__nav a{
  text-decoration:none;
  display:inline-flex; align-items:center; min-height:var(--alvo-toque);
  transition:color var(--d-instante) var(--ease-sistema);
}
.cabecalho__nav a:hover{ color:var(--txt-2) }
/* o item da IA fica em TODAS as larguras; o rótulo longo, só onde sobra linha */
.cabecalho__nav a.cabecalho__ia{ display:inline-flex; justify-content:center; gap:var(--e-8);
                                 min-width:var(--alvo-toque); font-weight:800 }
.cabecalho__longo{ display:none }
@media (min-width:600px) and (max-width:959px),(min-width:1280px){
  .cabecalho__longo{ display:inline }
}

/* ==========================================================================
   Marca — símbolo + wordmark. A logo nunca anima (§6.4).
   ========================================================================== */
.marca{
  display:inline-flex; align-items:center; justify-content:flex-start;
  gap:var(--e-12);
  min-height:var(--alvo-toque);
  /* abaixo de md o wordmark sai (H-04) e sobra o simbolo de 26px: sem esta
     largura minima o alvo cairia para 26x44 e reprovaria o 2.5.8. */
  min-width:var(--alvo-toque);
  text-decoration:none;
}
.marca__simbolo{ width:26px; height:28px; flex:none }
.marca__wordmark{ font-weight:900; letter-spacing:-.03em; font-size:1.375rem; line-height:1 }
/* H-04: a 360/390px a marca completa (129px) mais o CTA (247px) somam ~392px
   num container util de 328/358 - o cabecalho enrolava a 100% de zoom e
   dessincronizava --altura-cabecalho do sticky da cobertura. Abaixo de md fica
   so o simbolo; o aria-label do <a> preserva o nome, e o lockup completo
   aparece 96px abaixo, dentro da moldura do hero. */
.cabecalho .marca__wordmark{ display:none }
@media (min-width:600px){ .cabecalho .marca__wordmark{ display:inline } }

/* Decisao 2 do portao: o ponto do lockup e --acento, e ponto final.
   Verde sobre marinho/profundo (7,45 e 6,69:1), marinho sobre papel/recuado
   (o verde ali e 2,14:1). Regra sistemica: por construcao nenhum lockup futuro
   nasce com ponto verde sobre papel. */
.ponto{ color:var(--acento) }

/* Lockup com slogan — ponto verde SÓ na última linha (§7 nº12) */
.lockup{ display:grid; gap:var(--e-4) }
.lockup__wordmark{ font-weight:900; letter-spacing:-.03em; line-height:1;
                   font-size:var(--fs-h3) }
.lockup__slogan{ font-weight:500; line-height:1.3; font-size:var(--fs-micro);
                 letter-spacing:var(--ls-micro); color:var(--txt-2) }

/* ==========================================================================
   3 · Cta
   --primaria  : fundo verde + texto marinho = 6,69:1 + Canto escala S
   --secundaria: contorno 2px currentColor, sem Canto
   --solida    : preenchido em --txt, sem Canto e sem verde
   --texto     : sublinhado 2px que engorda no hover
   ========================================================================== */
.cta{
  display:inline-flex; align-items:center; gap:var(--e-12);
  min-height:var(--alvo-toque); max-width:100%;
  text-decoration:none; cursor:pointer; border:0; background:none;
}
/* o display acima vence o atributo `hidden`; a regra devolve o sentido a ele */
.cta[hidden]{ display:none }
.cta svg,.assistente__sugestoes svg{ flex:none; transition:transform var(--d-ui) var(--ease-sistema) }

.cta--primaria{
  padding:var(--e-16) var(--e-32);
  background:var(--verde); color:var(--txt-claro);
  clip-path:polygon(
    0 0,
    calc(100% - var(--canto-s-x)) 0,
    100% var(--canto-s-y),
    100% 100%,
    0 100%);
  border-bottom-left-radius:var(--canto-s-r);
  transition:background-color var(--d-ui) var(--ease-sistema),
             transform var(--d-ui) var(--ease-sistema);
}
.cta--primaria:hover{ background:var(--verde-pressionado); transform:translateY(-1px) }
.cta--primaria:hover svg{ transform:translateX(2px) }
.cta--primaria:active{ transform:translateY(0); transition-duration:var(--d-instante) }
.cta--primaria:focus-visible{ outline-color:var(--txt-claro) }

.cta--secundaria,.cta--solida{
  padding:var(--e-12) var(--e-16);
  border:2px solid currentColor;
  border-radius:var(--raio-neutro);
  transition:background-color var(--d-ui) var(--ease-sistema),
             color var(--d-ui) var(--ease-sistema),
             transform var(--d-ui) var(--ease-sistema);
}
@media (min-width:600px){ .cta--secundaria,.cta--solida{ padding:var(--e-12) var(--e-24) } }
/* Esmaecer apaga o proprio rotulo no instante em que o usuario pede feedback.
   Inverte-se: 15,94:1 sobre escuro, 14,32:1 sobre claro. */
.cta--secundaria:hover{
  background:var(--txt); color:var(--fundo); transform:translateY(-1px);
}
.cta--solida{ background:var(--txt); color:var(--fundo); border-color:var(--txt) }
.cta--solida:hover{ background:none; color:var(--txt); transform:translateY(-1px) }
.cta--secundaria:active,.cta--solida:active{ transform:translateY(0); transition-duration:var(--d-instante) }

.cta--texto{
  padding-block:var(--e-8);
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:.28em;
  transition:text-decoration-thickness var(--d-instante) var(--ease-sistema);
}
.cta--texto:hover{ text-decoration-thickness:4px }

.hero__moldura{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--marinho);
  min-height:clamp(620px,78vh,760px);
  min-height:clamp(620px,78svh,760px);
  padding:calc(var(--e-40) + var(--canto-l-y) * .5) var(--e-24) var(--e-40);
  clip-path:polygon(
    0 0,
    calc(100% - var(--canto-l-x)) 0,
    100% var(--canto-l-y),
    100% 100%,
    0 100%);
  border-bottom-left-radius:var(--canto-l-r);
}
@media (min-width:600px){
  .hero__moldura{ padding:calc(var(--e-64) + var(--canto-l-y) * .5) var(--e-40) var(--e-64) }
}
@media (min-width:960px){
  .hero__moldura{ padding:calc(var(--e-80) + var(--canto-l-y) * .5) var(--e-64) var(--e-80) }
}
.hero__sub{ margin-top:var(--e-32); color:var(--txt-2) }
.hero__acao{ display:flex; flex-wrap:wrap; align-items:center;
             gap:var(--e-8) var(--e-32); margin-top:var(--e-40) }
.hero__assinatura{
  margin-top:var(--e-64); padding-top:var(--e-32);
  border-top:1px solid var(--linha-sutil);
}

/* ==========================================================================
   Régua diagonal 2:1 — a citação em miniatura do Canto (§5.5).
   Mesmo ângulo do chanfro, sem ser o Canto.
   ========================================================================== */
.regua{
  display:block; width:var(--regua-comp); height:var(--regua-esp);
  background:var(--grafico); border-radius:2px;
  transform-origin:left center; transform:rotate(var(--regua-angulo));
  transition:width var(--d-ui) var(--ease-sistema);
}

/* ==========================================================================
   Lista com régua — o índice dos serviços e os casos do assistente falam a
   mesma gramática: hairline, alvo de 44px e a régua 2:1 que cresce no foco.
   ========================================================================== */
.assistente__lista li,.ancora__lista li{ border-top:1px solid var(--linha-sutil) }
.assistente__lista li:last-child,.ancora__lista li:last-child{ border-bottom:1px solid var(--linha-sutil) }
.assistente__lista a,.assistente__lista button,.ancora__lista a{
  display:flex; align-items:center; gap:var(--e-12); width:100%;
  min-height:var(--alvo-toque); padding:var(--e-8) 0;
  background:none; border:0; text-align:left; text-decoration:none; cursor:pointer;
}
.assistente__lista a::before,.assistente__lista button::before,.ancora__lista a::before{
  content:""; flex:none;
  width:var(--regua-mini-comp); height:var(--regua-mini-esp);
  background:var(--grafico); border-radius:1px;
  transform-origin:left center; transform:rotate(var(--regua-angulo));
  transition:width var(--d-ui) var(--ease-sistema);
}
.assistente__lista a:hover::before,.assistente__lista a:focus-visible::before,
.assistente__lista button:hover::before,.assistente__lista button:focus-visible::before,
.ancora__lista a:hover::before,.ancora__lista a:focus-visible::before{
  width:var(--regua-comp);
}

/* Cobertura — índice dos 4 grupos x trilho dos serviços. Abaixo de 960 o índice
   é lista estática de 4 linhas (o trilho horizontal escondia 2 grupos a 360);
   a partir de 960, a coluna fixa marca o grupo lido: cor do texto + peso + a
   régua. O verde sozinho jamais carrega o estado sobre papel. Na lista estática
   o estado ativo não aparece: deslocaria um rótulo sem informar nada. */
.ancora__titulo{ display:none; color:var(--txt-2); margin-bottom:var(--e-16) }
.ancora__lista{ max-width:40ch }
.ancora__lista a{ font-weight:800 }
@media (min-width:960px){
  .ancora__titulo{ display:block }
  .ancora__lista li,.ancora__lista li:last-child{ border:0 }
  .ancora__lista a{ color:var(--txt-2); font-weight:500;
                    transition:color var(--d-ui) var(--ease-sistema) }
  .ancora__lista a::before{ opacity:0;
    transition:width var(--d-ui) var(--ease-sistema), opacity var(--d-ui) var(--ease-sistema) }
  .ancora__lista a[data-active]{ color:var(--txt); font-weight:800 }
  .ancora__lista a[data-active]::before{ opacity:1; width:var(--regua-comp) }
}

.pilar{ scroll-margin-top:calc(var(--altura-cabecalho) + var(--e-48)) }
.pilar + .pilar{ margin-top:var(--ritmo-secao) }
/* No celular só o TÍTULO gruda. Com a linha de apoio junto, a faixa fixa comia
   1/4 da tela e o texto passava cortado por baixo. `display:contents` solta o
   h3 para grudar na altura do pilar inteiro, sem mexer no HTML. */
.pilar__cabeca{ display:contents }
.pilar__cabeca > .t-h3{
  /* a medida do token é regra de TEXTO; aqui o h3 é também a superfície que
     cobre o que rola por baixo, e tem de ir de margem a margem */
  max-width:none;
  position:sticky; top:var(--cabecalho-real,var(--altura-cabecalho)); z-index:2;
  background:var(--fundo);
  padding-block:var(--e-16);
  border-bottom:1px solid var(--linha-sutil);
}
.pilar__linha{ color:var(--txt-2); margin-top:var(--e-16) }
@media (min-width:960px){
  .pilar__cabeca{ display:block; padding:0 0 var(--e-16);
                  border-bottom:1px solid var(--linha-sutil) }
  .pilar__cabeca > .t-h3{ position:static; padding:0; border:0; max-width:var(--m-h3) }
  .pilar__linha{ margin-top:var(--e-8) }
}

/* Os 11 serviços: nome -> frase -> itens. Nunca card, nunca ícone: o marcador
   dos itens é a régua mini 2:1 (a que morava na lista de sintomas). */
.frentes{ margin-top:var(--ritmo-cabecalho-secao) }
.frente{ padding-block:var(--e-32); border-top:1px solid var(--linha-sutil) }
.frente:first-child{ border-top:0; padding-top:var(--e-24) }
.frente__nome{ max-width:none }
.pergunta summary .t-h4{ max-width:none; min-width:0 }
.frente__frase{ margin-top:var(--e-8) }
.frente__itens{ margin-top:var(--e-12); color:var(--txt-2); max-width:var(--m-corpo) }
.frente__itens li{ position:relative; padding-left:var(--e-24) }
.frente__itens li + li{ margin-top:var(--e-4) }
.frente__itens li::before{
  content:""; position:absolute; left:0; top:.7em;
  width:var(--regua-mini-comp); height:var(--regua-mini-esp);
  background:var(--grafico); border-radius:1px;
  transform-origin:left center; transform:rotate(var(--regua-angulo));
}
.pilar__acao{ margin-top:var(--e-32) }

/* ==========================================================================
   8 · CardOferta — o Mapa da Operação. Canto escala L: é o produto.
   ========================================================================== */
.oferta{
  background:var(--papel);
  color:var(--txt-claro);
  --txt-2:var(--txt2-claro);
  --linha-sutil:var(--linha-sutil-claro);
  --foco:var(--txt-claro);
  padding:calc(var(--e-40) + var(--canto-l-y) * .5) var(--e-24) var(--e-40);
  clip-path:polygon(
    0 0,
    calc(100% - var(--canto-l-x)) 0,
    100% var(--canto-l-y),
    100% 100%,
    0 100%);
  border-bottom-left-radius:var(--canto-l-r);
}
@media (min-width:960px){
  .oferta{ padding:calc(var(--e-64) + var(--canto-l-y) * .5) var(--e-64) var(--e-64) }
}
.oferta__texto{ margin-top:var(--e-24); color:var(--txt-2) }

/* 3 passos numerados — aqui o número É informação: é uma sequência. */
.passos{ margin-top:var(--ritmo-cabecalho-secao); display:grid;
         grid-template-columns:minmax(0,1fr); gap:var(--gap-empilhado);
         counter-reset:passo }
@media (min-width:960px){ .passos{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--e-48) } }
.passo{ counter-increment:passo; padding-top:var(--e-16);
        border-top:1px solid var(--linha-sutil) }
.passo::before{
  content:counter(passo);
  display:block; font-weight:800; font-size:var(--fs-h3);
  line-height:1; letter-spacing:var(--ls-h3);
  color:var(--txt-2); font-variant-numeric:tabular-nums;
  margin-bottom:var(--e-12);
}
.oferta__linha{ margin-top:var(--ritmo-cabecalho-secao) }
.oferta__acao{ margin-top:var(--e-32) }

/* ==========================================================================
   Perguntas — <details> com o conteúdo no DOM (indexável, sem clique).
   ========================================================================== */
.perguntas{ max-width:70ch }
.pergunta{ border-top:1px solid var(--linha-sutil) }
.pergunta:last-child{ border-bottom:1px solid var(--linha-sutil) }
.pergunta summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e-16);
  min-height:var(--alvo-toque);
  padding-block:var(--e-24);
  cursor:pointer; list-style:none;
}
.pergunta summary::-webkit-details-marker{ display:none }
.pergunta__sinal{ flex:none; position:relative; width:16px; height:16px }
.pergunta__sinal::before,
.pergunta__sinal::after{
  content:""; position:absolute; left:0; right:0; top:7px; height:2px;
  background:currentColor; border-radius:1px;
  transition:transform var(--d-ui) var(--ease-sistema);
}
.pergunta__sinal::after{ transform:rotate(90deg) }
.pergunta[open] .pergunta__sinal::after{ transform:rotate(0deg) }
.pergunta__resposta{ padding-bottom:var(--e-32); color:var(--txt-2) }

/* ==========================================================================
   Por que confiar / CTA final
   ========================================================================== */
.final__texto{ margin-top:var(--e-24); color:var(--txt-2) }
.final__acao{ margin-top:var(--e-40) }

/* ==========================================================================
   12 · Rodape
   ========================================================================== */
.rodape{ padding-block:var(--ritmo-secao) var(--e-48) }
.rodape__grade{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--gap-empilhado) }
.rodape__lista{ display:grid; gap:var(--e-4) }
.lockup + .rodape__lista{ margin-top:var(--ritmo-bloco) }
.rodape__lista a,.rodape__lista button{
  display:inline-flex; align-items:center; min-height:var(--alvo-toque);
  text-decoration:underline; text-underline-offset:.22em;
  text-decoration-thickness:1px; background:none; border:0; padding:0;
  cursor:pointer; text-align:left;
  transition:text-decoration-thickness var(--d-instante) var(--ease-sistema);
}
.rodape__lista a:hover,.rodape__lista button:hover{ text-decoration-thickness:3px }
.rodape__dados{ margin-top:var(--e-24); color:var(--txt-2) }
.rodape__base{ margin-top:var(--e-48); padding-top:var(--e-24);
               border-top:1px solid var(--linha-sutil); color:var(--txt-2) }
/* separador diagonal 2:1 entre blocos do rodapé (§5.5) */
.rodape__regua{ width:var(--regua-comp); height:var(--regua-esp);
                background:var(--grafico); border-radius:2px;
                transform-origin:left center; transform:rotate(var(--regua-angulo));
                margin-bottom:var(--e-32) }

/* ==========================================================================
   13 · BannerCookies — duas ações de PESO VISUAL IDÊNTICO.
   Otimizar o banner para reduzir a recusa seria ilegítimo.
   ========================================================================== */
.banner{
  position:fixed; z-index:60;
  inset-inline:var(--e-16); inset-block-end:var(--e-16);
  max-width:640px;
  background:var(--marinho-profundo); color:var(--txt-escuro);
  --fundo:var(--marinho-profundo);
  --txt:var(--txt-escuro); --txt-2:var(--txt2-escuro); --foco:var(--txt-escuro);
  --acento:var(--verde);
  border-radius:var(--raio-neutro);
  /* O banner é marinho-profundo sobre um hero marinho-profundo, e a sombra
     desaparece no escuro: sem contorno, o hero parecia terminar num aviso de
     cookies em vez de ter uma camada por cima. A --linha-ui-escuro existe
     exatamente para isto (#8F98AB, >=3:1 nos dois marinhos, WCAG 1.4.11). */
  border:1px solid var(--linha-ui-escuro);
  padding:var(--e-24);
  /* --banner-cobre vem do BannerCookies: cresce para cima e cobre por inteiro o
     CTA que a borda cortaria ao meio (H-15) */
  padding-top:calc(var(--e-24) + var(--banner-cobre, 0px));
  box-shadow:0 8px 32px rgba(16,26,46,.36);
  transition:opacity var(--d-modal) var(--ease-unasse),
             transform var(--d-modal) var(--ease-unasse);
}
.banner[hidden]{ display:none }
/* Com o banner aberto, quem recebe foco não pode ser rolado para debaixo dele
   (WCAG 2.2 · 2.4.11). O navegador leva o elemento para a viewport sem saber
   da camada fixa; `scroll-margin-bottom` conta a ele onde é o fim útil da
   tela. A folga no rodapé cuida de quem já estava embaixo. */
[data-banner="aberto"] a[href],
[data-banner="aberto"] button,
[data-banner="aberto"] summary,
[data-banner="aberto"] [tabindex]{
  scroll-margin-bottom:calc(var(--altura-banner,0px) + var(--e-24));
}
[data-banner="aberto"] .rodape{
  padding-bottom:calc(var(--e-48) + var(--altura-banner,0px));
}
.banner[data-entrando]{ opacity:0; transform:translateY(12px) }
/* H-15: o link da política saiu da linha própria e fechou o parágrafo. A linha
   valia ~54px de altura, e essa altura era a diferença entre o banner cobrir a
   Cta--primaria do hero POR INTEIRO e cortá-la ao meio, deixando à mostra uma
   faixa de verde com meio chanfro. Canto amputado é o pior uso possível da
   assinatura: o manual proíbe alterar o ângulo do corte, e metade dele é o caso
   extremo. Ou o botão aparece inteiro, ou não aparece.
   O alvo do link fica coberto pela exceção de link em linha da WCAG 2.5.8. */
.banner__politica{
  color:inherit; text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:.22em;
  transition:text-decoration-thickness var(--d-instante) var(--ease-sistema);
}
.banner__politica:hover{ text-decoration-thickness:3px }

/* Aceitar e Recusar com peso visual idêntico, e isto não é negociável em
   nenhuma variação: encolher o "Recusar" para ganhar altura seria desenhar
   contra a escolha do visitante. Se um dia for preciso escolher entre altura e
   simetria, perde a altura. */
.banner__acoes{ display:flex; flex-wrap:wrap; gap:var(--e-12); margin-top:var(--e-24) }
.banner__acoes .cta{ flex:1 1 140px; justify-content:center }
@media (min-width:600px){
  .banner{ inset-inline-start:auto; inset-inline-end:var(--e-24);
           inset-block-end:var(--e-24) }
  .banner__acoes .cta{ flex:0 0 auto }
}

/* ==========================================================================
   10 · Revelar — deslocamento de 16px, sem scale, sem blur (§6.3).
   O estado inicial escondido é aplicado por JS (§6.5b): sem JS, tudo visível.
   ========================================================================== */
[data-revelar]{
  transition:opacity var(--d-revelacao) var(--ease-unasse),
             transform var(--d-revelacao) var(--ease-unasse);
  transition-delay:calc(var(--i,0) * var(--stagger));
}
/* Qualificado pelo marcador do proprio Revelar: estado global com nome comum
   colidia com o data-oculto que o Cabecalho escrevia (hoje data-recolhido). */
[data-revelar][data-oculto]{ opacity:0; transform:translateY(16px) }

/* ==========================================================================
   Páginas internas (404 e privacidade)
   ========================================================================== */
.interna{ padding-block:calc(var(--altura-cabecalho) + var(--ritmo-secao)) var(--ritmo-secao) }
/* Sem mapeamento escondido entre elemento e token: o h2 da pagina interna
   carrega .t-h3 no HTML, como em qualquer outro lugar do sistema. */
.interna h2{ margin-top:calc(var(--ritmo-secao) / 2) }
.interna h2:first-of-type{ margin-top:var(--ritmo-cabecalho-secao) }
.interna .t-sub{ margin-top:var(--e-32) }
.interna p,.interna ul{ margin-top:var(--ritmo-bloco); max-width:var(--m-corpo) }
/* H-11: marcador diagonal 2:1 em vez do disco padrao do navegador */
.interna ul{ padding-left:var(--e-32) }
.interna ul li{ position:relative }
.interna ul li::before{
  content:""; position:absolute; left:calc(var(--e-32) * -1); top:.7em;
  width:var(--regua-mini-comp); height:var(--regua-mini-esp);
  background:var(--grafico); border-radius:1px;
  transform-origin:left center; transform:rotate(var(--regua-angulo));
}
.interna li + li{ margin-top:var(--e-8) }

/* Quem somos · .dupla — rótulo (cols 1-5) x leitura (cols 7-12). Único componente novo. */
.dupla{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--ritmo-cabecalho-secao) }
.dupla > *{ min-width:0 }
.dupla__a > * + *,.dupla__b > * + *{ margin-top:var(--ritmo-bloco) }
.dupla__a .regua{ margin-top:var(--e-48) }   /* a régua sobe 24px ao girar */
.dupla__nome{ display:block; margin-bottom:var(--e-12) }
.dupla [data-pendente],.dupla li span{ color:var(--txt-2) }
.dupla li .t-h4{ display:block; max-width:none }
.cabecalho__nav [aria-current]{ font-weight:800 }
@media (min-width:960px){
  .dupla{ grid-template-columns:repeat(var(--colunas),minmax(0,1fr)); gap:var(--gap-grade); align-items:start }
  .dupla__a{ grid-column:1 / span 5; position:sticky;
             top:calc(var(--cabecalho-real,var(--altura-cabecalho)) + var(--e-32)) }
  .dupla__b{ grid-column:7 / span 6 }
}
/* B-01/B-02: a tabela media 429px num viewport de 390 e a 4a coluna caia fora
   do papel, sobre o marinho do canvas - 1,11:1 justamente na coluna que informa
   o prazo de retencao. Abaixo de 720px ela deixa de ser tabela e vira blocos
   empilhados: cada celula carrega o proprio rotulo por data-rotulo. Zero
   rolagem lateral e nada depende de gesto horizontal. */
.tabela{ margin-top:var(--ritmo-bloco); width:100%; border-collapse:collapse;
         font-size:var(--fs-micro); line-height:var(--lh-micro) }
.tabela caption{ text-align:left; color:var(--txt-2); padding-bottom:var(--e-12) }
.tabela th,.tabela td{ text-align:left; vertical-align:top;
                       padding:var(--e-12); border-bottom:1px solid var(--linha-sutil) }
.tabela th{ font-weight:800 }
.tabela code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em;
              overflow-wrap:anywhere }

@media (max-width:719px){
  .tabela thead{ position:absolute; width:1px; height:1px; overflow:hidden;
                 clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap }
  .tabela,.tabela caption,.tabela tbody,.tabela tr,.tabela td{ display:block; width:100% }
  .tabela tr{ padding-block:var(--e-16); border-bottom:1px solid var(--linha-sutil) }
  .tabela tr:first-child{ padding-top:0 }
  .tabela td{ padding:0; border:0 }
  .tabela td + td{ margin-top:var(--e-8) }
  .tabela td::before{
    content:attr(data-rotulo);
    display:block; font-weight:800; color:var(--txt-2);
    font-size:var(--fs-legenda); line-height:var(--lh-legenda);
    letter-spacing:var(--ls-legenda);
  }
}
.erro__acoes{ display:flex; flex-wrap:wrap; align-items:center;
              gap:var(--e-24); margin-top:var(--e-40) }

/* ==========================================================================
   Assistente — o bloco "Pergunte", coda do hero (docs/plano-chat-ia/).
   Sem Canto, sem Revelar, sem balão: quem fala é rótulo em texto + peso
   tipográfico. Estado só em data-assistente-estado e em hidden.
   ========================================================================== */
.assistente{ padding-block:var(--ritmo-cabecalho-secao) calc(var(--ritmo-secao) / 2) }
/* 03/10: a seção seguinte (serviços) é a travessia A->B e sobe o chanfro por cima;
   sem o seletor composto a regra acima venceria a .antes-da-travessia pela cascata */
.assistente.antes-da-travessia{ padding-bottom:calc(var(--ritmo-secao) + var(--canto-xl-y)) }
/* display de classe vence o atributo hidden; a regra devolve o sentido a ele */
.assistente [hidden]{ display:none }
.assistente__grade{ display:grid; grid-template-columns:minmax(0,1fr);
                    gap:var(--ritmo-cabecalho-secao) var(--gap-grade) }
.assistente__grade > *,.assistente__balcao > *{ min-width:0 }
.assistente__selo{ display:flex; align-items:center; gap:var(--e-8) }
.assistente__selo path{ stroke:var(--grafico) }
.assistente__abre .t-h2{ margin-top:var(--e-16) }
.assistente__sub{ margin-top:var(--e-24); color:var(--txt-2) }
/* filhos separados por margem, não gap: status e saídas vazios não abrem vão no pé */
.assistente__balcao{ display:grid; padding:var(--e-16);
                     background:var(--marinho); --fundo:var(--marinho);
                     border:1px solid var(--linha-sutil); border-radius:var(--raio-neutro) }
@media (min-width:600px){ .assistente__balcao{ padding:var(--e-24) } }
.assistente__balcao > * + *{ margin-top:var(--e-16) }
.assistente__aviso{ max-width:var(--m-corpo); color:var(--txt-2) }

/* casos sugeridos (botões) e fallback sem JS (links): a "lista com régua",
   declarada junto com o índice dos serviços (seletores agrupados, lá em cima) */
.assistente__lista{ max-width:none; margin-top:var(--e-16) }
.assistente__sugestoes{ margin-top:0 }
.assistente__sugestoes button{ font-weight:800 }
.assistente__sugestoes svg{ margin-left:auto; color:var(--txt-2) }
.assistente__sugestoes button:hover svg,
.assistente__sugestoes button:focus-visible svg{ transform:translateX(2px) }

/* campo: o espelho ::after repete o valor e dá a altura; o textarea acompanha
   sem que o JS leia geometria */
.assistente__rotulo{ display:block; margin-bottom:var(--e-8); color:var(--txt-2) }
.assistente__campo{ display:grid; max-width:none }
.assistente__campo::after,.assistente__campo textarea{
  grid-area:1 / 1 / 2 / 2; min-width:0; max-height:10em;
  padding:var(--e-12) var(--e-16);
  border:1px solid var(--txt); border-radius:var(--raio-neutro);
  font:inherit; white-space:pre-wrap; overflow-wrap:anywhere;
}
.assistente__campo::after{ content:attr(data-valor) " "; visibility:hidden; overflow:hidden }
.assistente__campo textarea{
  display:block; width:100%; min-height:var(--alvo-toque); margin:0;
  resize:none; overflow:auto; background:var(--txt); color:var(--fundo);
}
.assistente__campo textarea::placeholder{ color:var(--txt2-claro); opacity:1 }
.assistente__acoes{ display:flex; flex-wrap:wrap; gap:var(--e-12); margin-top:var(--e-12) }
/* desligado vira contorno: --txt-2 sobre o preenchido daria 1,6:1 */
.assistente__acoes [aria-disabled="true"]{ background:none; border-color:currentColor;
                                           color:var(--txt-2); pointer-events:none }
.assistente__status{ max-width:var(--m-corpo); color:var(--txt-2) }
/* vazio não ocupa nada, mas nunca display:none (região viva); aberta, a conversa
   guarda a linha dele */
.assistente__status:empty{ margin-top:0 }

/* mínimo + teto; se o CLS de campo estourar, volta a altura fixa (veto D3) */
.assistente__conversa{
  min-height:12rem; max-height:min(52vh,420px); overflow-y:auto; overscroll-behavior:contain;
  border-top:1px solid var(--linha-sutil);
}
.assistente[data-assistente-estado="erro"] .assistente__conversa,
.assistente[data-assistente-estado="limite"] .assistente__conversa,
.assistente[data-assistente-estado="desligado"] .assistente__conversa{ min-height:0 }
.assistente__status:empty + .assistente__conversa{
  margin-top:calc(var(--fs-micro) * var(--lh-micro) + var(--e-32));
}
.assistente__conversa > *{ overflow-anchor:none }
.assistente__conversa > .assistente__ancora{ overflow-anchor:auto; height:1px }
.assistente__fala{ padding-block:var(--e-16); white-space:pre-wrap;
                   overflow-wrap:anywhere; text-wrap:wrap }
.assistente__fala[data-quem="visitante"]{ border-top:1px solid var(--linha-sutil) }
.assistente__fala[data-quem="visitante"]:first-child{ border-top:0 }
.assistente__quem{ display:block; margin-bottom:var(--e-4); color:var(--txt-2) }
/* cursor parado: piscar exigiria ~1s e o teto do sistema é 420ms */
.assistente__parcial .assistente__fala::after{
  content:""; display:inline-block; width:.5em; height:1em; margin-left:var(--e-4);
  vertical-align:text-bottom; background:var(--grafico);
}
/* a margem mora nos links: sem saída à vista, o painel termina no botão */
.assistente__saidas{ display:flex; flex-wrap:wrap; align-items:center;
                     gap:0 var(--e-12); margin-top:0 }
.assistente__saidas .cta{ margin-top:var(--e-16) }
/* com a conversa aberta a linha das saídas reserva a altura do .cta--secundaria
   (rótulo + 2x12 de padding + 2x2 de borda) e a margem: revelar o CTA não desloca nada */
.assistente__conversa:not([hidden]) + .assistente__saidas{
  min-height:calc(var(--e-16) + max(var(--alvo-toque),calc(var(--fs-botao) + var(--e-24) + 4px)));
}

@media (min-width:960px){
  .assistente__grade{ grid-template-columns:repeat(var(--colunas),minmax(0,1fr));
                      align-items:start }
  .assistente__abre{ grid-column:1 / -1 }
  .assistente__sugestoes{ grid-column:1 / span 4; grid-row:2 }
  .assistente__balcao{ grid-column:6 / span 7; grid-row:2; padding:var(--e-32) }
}