@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&display=swap');
/* Kleiciane Rocha — componentes. Só tokens; nenhum valor de cor solto. Marca plana: sem vidro, sem gradiente em superfície. */
.kr { font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif; color: var(--texto); background: var(--fundo); -webkit-font-smoothing: antialiased; }
.kr *, .kr *::before, .kr *::after { box-sizing: border-box; }
.kr :focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* Título de página: frase leve, UMA palavra em peso (a assinatura da voz) */
.kr-titulo { font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif; font-weight: 300; letter-spacing: -0.03em; font-size: 36px; line-height: 42px; margin: 0; color: var(--texto); text-wrap: balance; }
.kr-titulo b, .kr-titulo strong { font-weight: 600; }
.kr-titulo--display { font-size: 56px; line-height: 60px; letter-spacing: -0.035em; }
.kr-titulo--secao { font-size: 26px; line-height: 32px; letter-spacing: -0.025em; }
.kr-subtitulo { font-size: 16px; line-height: 24px; color: var(--texto-2); margin: 0; max-width: 62ch; }
.kr-rotulo { font: 500 12px/16px 'Archivo', 'Helvetica Neue', Arial, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-2); }

/* Logotipo (marca só tipográfica): o nome em curvas, de identidade/logo/assinatura/. Em linha, nunca abaixo de 200px de largura. */
.kr-logotipo { display: block; flex: none; width: auto; height: 18.4px; fill: var(--logotipo); }
.kr-logotipo--empilhado { height: auto; width: 120px; }

/* Botão */
.kr-botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--raio-md);
  font: 600 14px/20px 'Archivo', 'Helvetica Neue', Arial, sans-serif; border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background-color var(--tempo-rapido) var(--curva-marca), color var(--tempo-rapido) var(--curva-marca), border-color var(--tempo-rapido) var(--curva-marca); }
.kr-botao--principal { background: var(--acao); color: var(--sobre-acao); }
.kr-botao--principal:hover { background: var(--acao-hover); }
.kr-botao--secundario { background: var(--realce); color: var(--sobre-realce); }
.kr-botao--secundario:hover { background: var(--superficie-2); }
.kr-botao--contorno { background: var(--superficie); color: var(--texto); border-color: var(--borda-controle); }
.kr-botao--contorno:hover { background: var(--superficie-2); }
.kr-botao--fantasma { background: transparent; color: var(--texto-2); }
.kr-botao--fantasma:hover { background: var(--superficie-2); color: var(--texto); }
.kr-botao--perigo { background: var(--critico); color: #FFFFFF; }
[data-theme="escuro"] .kr-botao--perigo, .kr-botao--perigo[data-theme="escuro"] { color: var(--fundo); }
.kr-botao--sm { height: 32px; padding: 0 12px; font-size: 13px; }
.kr-botao--lg { height: 48px; padding: 0 22px; font-size: 15px; border-radius: 14px; }
.kr-botao:disabled, .kr-botao[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.kr-botao svg { width: 16px; height: 16px; flex: none; }

/* Campo */
.kr-campo { display: grid; gap: 6px; }
.kr-campo label { font: 600 13px/18px 'Archivo', 'Helvetica Neue', Arial, sans-serif; color: var(--texto); }
.kr-entrada { height: 40px; width: 100%; padding: 0 12px; border-radius: var(--raio-md); border: 1px solid var(--borda-controle); background: var(--superficie);
  color: var(--texto); font: 400 14px/20px 'Archivo', 'Helvetica Neue', Arial, sans-serif; transition: border-color var(--tempo-rapido) var(--curva-marca); }
.kr-entrada::placeholder { color: var(--texto-3); }
.kr-entrada:hover { border-color: var(--texto-2); }
.kr-entrada:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; border-color: var(--acao); }
select.kr-entrada { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, rgba(0,0,0,0) 50%, var(--texto-2) 50%), linear-gradient(135deg, var(--texto-2) 50%, rgba(0,0,0,0) 50%);
  background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px; background-size: 5px 5px; background-repeat: no-repeat; }
textarea.kr-entrada { height: auto; min-height: 88px; padding: 10px 12px; resize: vertical; }
.kr-ajuda { font: 500 12px/16px 'Archivo', 'Helvetica Neue', Arial, sans-serif; color: var(--texto-3); }
.kr-campo--erro .kr-entrada { border-color: var(--critico); background: var(--critico-fundo); }
.kr-campo--erro .kr-ajuda { color: var(--critico); }

/* Cartão */
.kr-cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-lg); box-shadow: var(--sombra-1); padding: 24px; }
.kr-cartao__titulo { font: 500 18px/24px 'Archivo', 'Helvetica Neue', Arial, sans-serif; letter-spacing: -0.015em; margin: 0; }

/* Indicador (número) */
.kr-indicador { display: grid; gap: 6px; }
.kr-indicador__valor { font: 400 32px/36px 'Archivo', 'Helvetica Neue', Arial, sans-serif; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--texto); }
.kr-indicador__variacao { font: 600 12px/16px 'Archivo', 'Helvetica Neue', Arial, sans-serif; font-variant-numeric: tabular-nums; }
.kr-indicador__variacao--sobe { color: var(--sucesso); } .kr-indicador__variacao--desce { color: var(--critico); }

/* Etiqueta de status: sempre ponto + palavra */
.kr-etiqueta { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px; border-radius: var(--raio-sm);
  font: 600 12px/16px 'Archivo', 'Helvetica Neue', Arial, sans-serif; background: var(--superficie-2); color: var(--texto-2); white-space: nowrap; }
.kr-etiqueta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.kr-etiqueta--sucesso { background: var(--sucesso-fundo); color: var(--sucesso); }
.kr-etiqueta--atencao { background: var(--atencao-fundo); color: var(--atencao); }
.kr-etiqueta--critico { background: var(--critico-fundo); color: var(--critico); }
.kr-etiqueta--marca { background: var(--realce); color: var(--sobre-realce); }

/* Tabela */
.kr-tabela-caixa { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-lg); overflow-x: auto; }
.kr-tabela { width: 100%; border-collapse: collapse; font: 400 14px/20px 'Archivo', 'Helvetica Neue', Arial, sans-serif; }
.kr-tabela th { text-align: left; font: 500 12px/16px 'Archivo', 'Helvetica Neue', Arial, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-2);
  background: var(--superficie-2); padding: 12px 16px; white-space: nowrap; }
.kr-tabela td { padding: 14px 16px; border-top: 1px solid var(--linha); color: var(--texto); vertical-align: middle; }
.kr-tabela tbody tr { transition: background-color var(--tempo-rapido) var(--curva-marca); }
.kr-tabela tbody tr:hover { background: var(--superficie-2); }
.kr-tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.kr-tabela .fraco { color: var(--texto-2); }

/* Aviso (toast) */
.kr-aviso { display: flex; gap: 12px; align-items: flex-start; width: min(380px, 100%); padding: 14px 16px; border-radius: var(--raio-lg);
  background: var(--superficie); border: 1px solid var(--linha); box-shadow: var(--sombra-2); }
.kr-aviso__icone { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.kr-aviso__titulo { font: 600 14px/20px 'Archivo', 'Helvetica Neue', Arial, sans-serif; margin: 0; color: var(--texto); }
.kr-aviso__texto { font: 400 13px/18px 'Archivo', 'Helvetica Neue', Arial, sans-serif; margin: 2px 0 0; color: var(--texto-2); }
.kr-aviso--sucesso .kr-aviso__icone { color: var(--sucesso); } .kr-aviso--critico .kr-aviso__icone { color: var(--critico); } .kr-aviso--marca .kr-aviso__icone { color: var(--acao); }

/* Estado vazio: frase + uma ação */
.kr-vazio { display: grid; justify-items: center; text-align: center; gap: 14px; padding: 48px 24px; border-radius: var(--raio-lg); border: 1px dashed var(--linha); }
.kr-vazio__titulo { font: 300 22px/28px 'Archivo', 'Helvetica Neue', Arial, sans-serif; letter-spacing: -0.025em; margin: 0; }
.kr-vazio__titulo b { font-weight: 600; }
.kr-vazio__texto { font: 400 14px/20px 'Archivo', 'Helvetica Neue', Arial, sans-serif; color: var(--texto-2); margin: 0; max-width: 42ch; }

/* Carregando: o movimento-assinatura do nome. Cada trecho do logotipo chega como no vídeo de abertura (logo.trechos[].entrada):
   desliza de --dx/--dy e/ou sai dos eixos --dfv para os eixos --fv da fonte variável. É o único lugar com o nome em texto vivo,
   porque o movimento é o eixo da fonte; parado, coincide com o logotipo. */
.kr-carregando { display: inline-block; white-space: nowrap; font: 600 28px/1.2 'Archivo', 'Helvetica Neue', Arial, sans-serif; color: var(--logotipo); }
.kr-carregando > span { display: inline-block; font-variation-settings: var(--fv); animation: kr-trecho calc(var(--tempo-assinatura) * 2) var(--curva-marca) infinite both; }
@keyframes kr-trecho { 0% { opacity: 0; transform: translate(var(--dx), var(--dy)); font-variation-settings: var(--dfv); } 12% { opacity: 1; } 20% { transform: translate(var(--dx), var(--dy)); font-variation-settings: var(--dfv); } 55%, 88% { opacity: 1; transform: none; font-variation-settings: var(--fv); } 100% { opacity: 0; transform: none; font-variation-settings: var(--fv); } }

/* Navegação lateral */
.kr-nav { display: flex; flex-direction: column; gap: 4px; width: 248px; padding: 16px 12px; background: var(--superficie); border-right: 1px solid var(--linha); }
.kr-nav__marca { display: flex; align-items: center; gap: 10px; padding: 6px 10px 18px; font: 600 15px/20px 'Archivo', 'Helvetica Neue', Arial, sans-serif; letter-spacing: -0.02em; color: var(--texto); }
.kr-nav__marca--logotipo { flex-direction: column; align-items: flex-start; gap: 8px; }
.kr-nav__marca--logotipo span { font: 600 11px/16px 'Archivo', 'Helvetica Neue', Arial, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-3); }
.kr-nav__grupo { font: 500 11px/16px 'Archivo', 'Helvetica Neue', Arial, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-3); padding: 14px 10px 6px; }
.kr-nav__item { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-radius: var(--raio-md); color: var(--texto-2);
  font: 500 14px/20px 'Archivo', 'Helvetica Neue', Arial, sans-serif; text-decoration: none; transition: background-color var(--tempo-rapido) var(--curva-marca), color var(--tempo-rapido) var(--curva-marca); }
.kr-nav__item svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.kr-nav__item:hover { background: var(--superficie-2); color: var(--texto); }
.kr-nav__item[aria-current="page"] { background: var(--realce); color: var(--sobre-realce); font-weight: 600; }
.kr-nav__contador { margin-left: auto; font: 600 11px/16px 'Archivo', 'Helvetica Neue', Arial, sans-serif; font-variant-numeric: tabular-nums; padding: 1px 7px; border-radius: 999px; background: var(--superficie-2); color: var(--texto-2); }

@media (prefers-reduced-motion: reduce) { .kr-carregando path, .kr-carregando > span { animation: none; } .kr * { transition: none !important; } }

/* ===================== v2.1 · componentes completados em 28/09/2026 ===================== */

/* Botão só com ícone (sempre com aria-label) */
.kr-botao-icone { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--raio-md); border: 1px solid transparent; background: transparent; color: var(--texto-2); cursor: pointer;
  transition: background-color var(--tempo-rapido) var(--curva-marca), color var(--tempo-rapido) var(--curva-marca); }
.kr-botao-icone:hover, .kr-botao-icone[aria-expanded="true"] { background: var(--superficie-2); color: var(--texto); }
.kr-botao-icone--contorno { border-color: var(--borda-controle); background: var(--superficie); }
.kr-botao-icone svg { width: 18px; height: 18px; }

/* Menu suspenso (dropdown) — também é a superfície da seleção */
.kr-menu { display: grid; gap: 2px; min-width: 220px; padding: 6px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; box-shadow: var(--sombra-2); z-index: var(--camada-menu); }
.kr-menu__item { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: 8px; border: 0; background: transparent; width: 100%; text-align: left;
  font: 500 14px/20px 'Archivo', 'Helvetica Neue', Arial, sans-serif; color: var(--texto); cursor: pointer; text-decoration: none; transition: background-color var(--tempo-rapido) var(--curva-marca); }
.kr-menu__item svg { width: 16px; height: 16px; flex: none; color: var(--texto-2); }
.kr-menu__item:hover, .kr-menu__item[data-ativo="true"] { background: var(--superficie-2); }
.kr-menu__item[aria-selected="true"], .kr-menu__item[aria-checked="true"] { background: var(--realce); color: var(--sobre-realce); font-weight: 600; }
.kr-menu__item[aria-selected="true"] svg, .kr-menu__item[aria-checked="true"] svg { color: var(--sobre-realce); }
.kr-menu__item--perigo, .kr-menu__item--perigo svg { color: var(--critico); }
.kr-menu__item[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.kr-menu__atalho { margin-left: auto; font: 500 12px/16px 'Archivo', 'Helvetica Neue', Arial, sans-serif; color: var(--texto-3); }
.kr-menu__grupo { font: 500 11px/16px 'Archivo', 'Helvetica Neue', Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); padding: 8px 10px 4px; }
.kr-menu__divisor { height: 1px; background: var(--linha); margin: 4px -6px; }
.kr-menu__busca { margin: 0 0 4px; }
.kr-menu__vazio { padding: 10px; font: 400 13px/18px 'Archivo', 'Helvetica Neue', Arial, sans-serif; color: var(--texto-3); }

/* Seleção personalizada (abre um kr-menu) */
.kr-selecao { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 40px; width: 100%; padding: 0 12px; border-radius: var(--raio-md); border: 1px solid var(--borda-controle);
  background: var(--superficie); color: var(--texto); font: 400 14px/20px 'Archivo', 'Helvetica Neue', Arial, sans-serif; cursor: pointer; text-align: left; }
.kr-selecao:hover { border-color: var(--texto-2); }
.kr-selecao[aria-expanded="true"] { border-color: var(--acao); outline: 2px solid var(--foco); outline-offset: 1px; }
.kr-selecao__valor--vazio { color: var(--texto-3); }
.kr-selecao svg { width: 16px; height: 16px; color: var(--texto-2); flex: none; }

/* Caixa de marcar, opção única e interruptor */
.kr-marcar, .kr-opcao, .kr-interruptor { display: inline-flex; align-items: flex-start; gap: 10px; font: 500 14px/20px 'Archivo', 'Helvetica Neue', Arial, sans-serif; color: var(--texto); cursor: pointer; }
.kr-marcar input, .kr-opcao input { appearance: none; flex: none; width: 18px; height: 18px; margin: 1px 0 0; border: 1.5px solid var(--borda-controle); background: var(--superficie); display: grid; place-items: center; cursor: pointer;
  transition: background-color var(--tempo-rapido) var(--curva-marca), border-color var(--tempo-rapido) var(--curva-marca); }
.kr-marcar input { border-radius: 5px; }
.kr-marcar input:checked, .kr-marcar input:indeterminate { background: var(--acao); border-color: var(--acao); }
.kr-marcar input:checked::after { content: ""; width: 5px; height: 9px; border: solid var(--sobre-acao); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.kr-marcar input:indeterminate::after { content: ""; width: 8px; height: 2px; background: var(--sobre-acao); border-radius: 1px; }
.kr-opcao input { border-radius: 50%; }
.kr-opcao input:checked { border-color: var(--acao); }
.kr-opcao input:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--acao); }
.kr-marcar small, .kr-opcao small, .kr-interruptor small { display: block; font: 400 13px/18px 'Archivo', 'Helvetica Neue', Arial, sans-serif; color: var(--texto-2); }
.kr-interruptor input { appearance: none; flex: none; position: relative; width: 36px; height: 20px; margin: 0; border-radius: 999px; background: var(--borda-controle); cursor: pointer; transition: background-color var(--tempo-rapido) var(--curva-marca); }
.kr-interruptor input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(58,36,48,.25); transition: transform var(--tempo-base) var(--curva-marca); }
.kr-interruptor input:checked { background: var(--acao); }
.kr-interruptor input:checked::after { transform: translateX(16px); }
[data-theme="escuro"] .kr-interruptor input:checked::after { background: var(--fundo); }
.kr-marcar input:disabled, .kr-opcao input:disabled, .kr-interruptor input:disabled { opacity: .45; cursor: not-allowed; }

/* Busca e filtros */
.kr-busca { position: relative; display: block; }
.kr-busca svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--texto-3); pointer-events: none; }
.kr-busca .kr-entrada { padding-left: 38px; }
.kr-filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.kr-filtro { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--borda-controle); background: var(--superficie);
  font: 500 13px/18px 'Archivo', 'Helvetica Neue', Arial, sans-serif; color: var(--texto-2); cursor: pointer; transition: background-color var(--tempo-rapido) var(--curva-marca); }
.kr-filtro:hover { background: var(--superficie-2); color: var(--texto); }
.kr-filtro[aria-pressed="true"] { background: var(--realce); border-color: transparent; color: var(--sobre-realce); font-weight: 600; }
.kr-filtro__conta { font-variant-numeric: tabular-nums; color: var(--texto-3); }
.kr-filtro[aria-pressed="true"] .kr-filtro__conta { color: var(--sobre-realce); }

/* Formulário em etapas (a aplicação / diagnóstico) */
.kr-etapas { display: grid; gap: 20px; width: min(460px, 100%); }
.kr-etapas__topo { display: flex; justify-content: space-between; font: 500 12px/16px 'Archivo', 'Helvetica Neue', Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
.kr-etapas__pergunta { font: 300 24px/30px 'Archivo', 'Helvetica Neue', Arial, sans-serif; letter-spacing: -.025em; margin: 0; color: var(--texto); }
.kr-etapas__escolhas { display: grid; gap: 8px; }
.kr-escolha { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--borda-controle); border-radius: var(--raio-md); background: var(--superficie);
  font: 500 15px/20px 'Archivo', 'Helvetica Neue', Arial, sans-serif; color: var(--texto); cursor: pointer; transition: background-color var(--tempo-rapido) var(--curva-marca), border-color var(--tempo-rapido) var(--curva-marca); }
.kr-escolha:hover { background: var(--superficie-2); }
.kr-escolha input { appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--borda-controle); border-radius: 50%; display: grid; place-items: center; }
.kr-escolha input:checked { border-color: var(--acao); } .kr-escolha input:checked::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--acao); }
.kr-escolha:has(input:checked) { border-color: var(--acao); background: var(--realce); color: var(--sobre-realce); }
.kr-etapas__acoes { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.kr-etapas__nota { font: 500 12px/16px 'Archivo', 'Helvetica Neue', Arial, sans-serif; color: var(--texto-3); margin: 0; text-align: center; }

/* Progresso */
.kr-progresso { display: grid; gap: 8px; }
.kr-progresso__rotulo { display: flex; justify-content: space-between; font: 500 13px/18px 'Archivo', 'Helvetica Neue', Arial, sans-serif; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.kr-progresso__trilho { height: 6px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; }
.kr-progresso__barra { display: block; height: 100%; border-radius: 999px; background: var(--acao); transition: width var(--tempo-lento) var(--curva-marca); }

/* Abas */
.kr-abas { display: flex; gap: 4px; border-bottom: 1px solid var(--linha); overflow-x: auto; }
.kr-aba { height: 40px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; font: 500 14px/20px 'Archivo', 'Helvetica Neue', Arial, sans-serif; color: var(--texto-2); cursor: pointer; white-space: nowrap;
  transition: color var(--tempo-rapido) var(--curva-marca), border-color var(--tempo-rapido) var(--curva-marca); }
.kr-aba:hover { color: var(--texto); }
.kr-aba[aria-selected="true"] { color: var(--texto); font-weight: 600; border-bottom-color: var(--acao); }
.kr-abas--segmento { display: inline-flex; gap: 2px; padding: 4px; border: 0; border-radius: 12px; background: var(--superficie-2); }
.kr-abas--segmento .kr-aba { height: 32px; border: 0; margin: 0; border-radius: 8px; }
.kr-abas--segmento .kr-aba[aria-selected="true"] { background: var(--superficie); box-shadow: var(--sombra-1); }

/* Paginação e trilha */
.kr-paginacao { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font: 500 13px/18px 'Archivo', 'Helvetica Neue', Arial, sans-serif; color: var(--texto-2); }
.kr-paginacao__paginas { display: flex; gap: 4px; }
.kr-pagina { min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px; border: 0; background: transparent; font: 500 13px/18px 'Archivo', 'Helvetica Neue', Arial, sans-serif; color: var(--texto-2); cursor: pointer; font-variant-numeric: tabular-nums; display: inline-grid; place-items: center; }
.kr-pagina:hover { background: var(--superficie-2); color: var(--texto); }
.kr-pagina[aria-current="page"] { background: var(--realce); color: var(--sobre-realce); font-weight: 600; }
.kr-pagina svg { width: 16px; height: 16px; }
.kr-trilha ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; font: 500 13px/18px 'Archivo', 'Helvetica Neue', Arial, sans-serif; }
.kr-trilha li { display: flex; gap: 6px; color: var(--texto-3); }
.kr-trilha li + li::before { content: "/"; color: var(--texto-3); }
.kr-trilha a { color: var(--texto-2); text-decoration: none; } .kr-trilha a:hover { color: var(--texto); text-decoration: underline; }
.kr-trilha [aria-current="page"] { color: var(--texto); }

/* Modal, painel lateral e fundo escurecido */
.kr-veu { position: fixed; inset: 0; background: rgba(58,36,48,.45); z-index: var(--camada-painel); }
.kr-veu--modal { z-index: calc(var(--camada-modal) - 1); }
[data-theme="escuro"] .kr-veu { background: rgba(0,0,0,.6); }
.kr-modal { width: min(480px, 100%); display: grid; gap: 16px; padding: 24px; background: var(--superficie); border-radius: var(--raio-xl); box-shadow: var(--sombra-3); z-index: var(--camada-modal); }
.kr-modal__cabeca { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.kr-modal__titulo { font: 500 20px/26px 'Archivo', 'Helvetica Neue', Arial, sans-serif; letter-spacing: -.02em; margin: 0; color: var(--texto); }
.kr-modal__texto { font: 400 14px/21px 'Archivo', 'Helvetica Neue', Arial, sans-serif; color: var(--texto-2); margin: 0; }
.kr-modal__acoes { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.kr-painel { width: min(440px, 100%); height: 100%; display: grid; grid-template-rows: auto 1fr auto; background: var(--superficie); border-radius: var(--raio-xl) 0 0 var(--raio-xl); box-shadow: var(--sombra-3); z-index: calc(var(--camada-painel) + 1); }
.kr-painel__cabeca { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 20px 16px 24px; border-bottom: 1px solid var(--linha); }
.kr-painel__corpo { padding: 24px; overflow-y: auto; display: grid; gap: 20px; align-content: start; }
.kr-painel__pe { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--linha); }

/* Dica (tooltip): invertida, curta, sem ação dentro */
.kr-dica { position: relative; display: inline-block; max-width: 240px; padding: 6px 10px; border-radius: 8px; background: var(--texto); color: var(--fundo); font: 600 12px/16px 'Archivo', 'Helvetica Neue', Arial, sans-serif; z-index: var(--camada-dica); }
.kr-dica::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; background: var(--texto); transform: translateX(-50%) rotate(45deg); border-radius: 1px; }

/* Alerta na página */
.kr-alerta { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--raio-lg); background: var(--realce); color: var(--texto); }
.kr-alerta__icone { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--sobre-realce); }
.kr-alerta__titulo { font: 600 14px/20px 'Archivo', 'Helvetica Neue', Arial, sans-serif; margin: 0; }
.kr-alerta__texto { font: 400 14px/20px 'Archivo', 'Helvetica Neue', Arial, sans-serif; margin: 2px 0 0; color: var(--texto-2); }
.kr-alerta__acao { margin-left: auto; align-self: center; }
.kr-alerta--sucesso { background: var(--sucesso-fundo); } .kr-alerta--sucesso .kr-alerta__icone { color: var(--sucesso); }
.kr-alerta--atencao { background: var(--atencao-fundo); } .kr-alerta--atencao .kr-alerta__icone { color: var(--atencao); }
.kr-alerta--critico { background: var(--critico-fundo); } .kr-alerta--critico .kr-alerta__icone { color: var(--critico); }

/* Esqueleto de carregamento */
.kr-esqueleto { display: block; border-radius: 8px; background: var(--superficie-2); animation: kr-pulsa 1.6s var(--curva-marca) infinite; }
@keyframes kr-pulsa { 50% { opacity: .55; } }

/* Avatar */
.kr-avatar { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--realce); color: var(--sobre-realce); font: 500 14px/1 'Archivo', 'Helvetica Neue', Arial, sans-serif; letter-spacing: -.02em; }
.kr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.kr-avatar--sm { width: 28px; height: 28px; font-size: 11px; } .kr-avatar--lg { width: 48px; height: 48px; font-size: 17px; }
.kr-avatares { display: flex; } .kr-avatares .kr-avatar { box-shadow: 0 0 0 2px var(--superficie); } .kr-avatares .kr-avatar + .kr-avatar { margin-left: -8px; }

/* Sanfona (perguntas frequentes, detalhes) */
.kr-sanfona { border-bottom: 1px solid var(--linha); }
.kr-sanfona summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; list-style: none; cursor: pointer; font: 400 18px/24px 'Archivo', 'Helvetica Neue', Arial, sans-serif; letter-spacing: -.015em; color: var(--texto); }
.kr-sanfona summary::-webkit-details-marker { display: none; }
.kr-sanfona summary svg { width: 18px; height: 18px; flex: none; color: var(--texto-2); transition: transform var(--tempo-base) var(--curva-marca); }
.kr-sanfona[open] summary svg { transform: rotate(45deg); }
.kr-sanfona__corpo { padding: 0 0 20px; font: 400 15px/24px 'Archivo', 'Helvetica Neue', Arial, sans-serif; color: var(--texto-2); max-width: 65ch; }

/* Gráfico */
.kr-grafico { display: grid; gap: 16px; }
.kr-grafico__cabeca { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.kr-grafico__legenda { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; margin: 0; padding: 0; font: 500 13px/18px 'Archivo', 'Helvetica Neue', Arial, sans-serif; color: var(--texto-2); }
.kr-grafico__legenda li { display: flex; align-items: center; gap: 6px; } .kr-grafico__legenda i { width: 10px; height: 10px; border-radius: 3px; }
.kr-grafico svg { width: 100%; height: auto; overflow: visible; }
.kr-grafico .grade { stroke: var(--linha); stroke-width: 1; }
.kr-grafico .eixo { fill: var(--texto-3); font: 500 12px 'Archivo', 'Helvetica Neue', Arial, sans-serif; }
.kr-grafico .valor { fill: var(--texto); font: 600 12px 'Archivo', 'Helvetica Neue', Arial, sans-serif; }
.kr-grafico .d1 { fill: var(--dado-1); } .kr-grafico .d2 { fill: var(--dado-2); } .kr-grafico .d3 { fill: var(--dado-3); }
.kr-grafico .l1 { stroke: var(--dado-1); } .kr-grafico .l2 { stroke: var(--dado-2); } .kr-grafico .l3 { stroke: var(--dado-3); }
.kr-grafico .linha-serie { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kr-grafico .ponto { stroke: var(--superficie); stroke-width: 2; }
.kr-grafico .marca-barra:hover, .kr-grafico .ponto:hover { opacity: .8; }

/* Depoimento em vídeo */
.kr-depoimento { display: grid; gap: 16px; }
.kr-depoimento__video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--raio-lg); overflow: hidden; background: radial-gradient(70% 90% at 30% 20%, #3A2430, #3A2430); display: grid; place-items: center; }
.kr-depoimento__video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kr-depoimento__play { position: relative; width: 56px; height: 56px; border-radius: 50%; border: 0; background: rgba(252,251,255,.92); color: #E4B9B0; display: grid; place-items: center; cursor: pointer; box-shadow: var(--sombra-2); }
.kr-depoimento__play svg { width: 20px; height: 20px; margin-left: 3px; }
.kr-depoimento__frase { font: 300 20px/28px 'Archivo', 'Helvetica Neue', Arial, sans-serif; letter-spacing: -.02em; color: var(--texto); margin: 0; }
.kr-depoimento__autor { display: flex; align-items: center; gap: 12px; font: 400 13px/18px 'Archivo', 'Helvetica Neue', Arial, sans-serif; color: var(--texto-2); }
.kr-depoimento__autor b { display: block; font: 600 14px/20px 'Archivo', 'Helvetica Neue', Arial, sans-serif; color: var(--texto); }

/* Cabeçalho e rodapé do site */
.kr-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; }
.kr-cabecalho__marca { display: flex; align-items: center; gap: 10px; font: 400 19px/1 'Archivo', 'Helvetica Neue', Arial, sans-serif; letter-spacing: -.035em; color: var(--texto); text-decoration: none; }
.kr-cabecalho__links { display: flex; gap: 28px; font: 500 14px/20px 'Archivo', 'Helvetica Neue', Arial, sans-serif; }
.kr-cabecalho__links a { color: var(--texto-2); text-decoration: none; } .kr-cabecalho__links a:hover { color: var(--texto); }
.kr-cabecalho__menu { display: none; }
@media (max-width: 760px) { .kr-cabecalho { padding: 16px 0; } .kr-cabecalho__links { display: none; } .kr-cabecalho__marca span { display: none; } .kr-cabecalho__menu { display: inline-grid; } }
.kr-menu-movel { display: grid; gap: 4px; padding: 12px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-lg); box-shadow: var(--sombra-2); }
.kr-menu-movel a { display: flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: var(--raio-md); font: 400 18px/24px 'Archivo', 'Helvetica Neue', Arial, sans-serif; color: var(--texto); text-decoration: none; }
.kr-menu-movel a:hover { background: var(--superficie-2); }
.kr-rodape { display: grid; gap: 32px; padding: 48px 0 32px; border-top: 1px solid var(--linha); }
.kr-rodape__topo { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.kr-rodape__frase { font: 300 22px/28px 'Archivo', 'Helvetica Neue', Arial, sans-serif; letter-spacing: -.02em; color: var(--texto); max-width: 22ch; margin: 12px 0 0; } .kr-rodape__frase b { font-weight: 600; }
.kr-rodape__colunas { display: flex; gap: 48px; flex-wrap: wrap; }
.kr-rodape__coluna { display: grid; gap: 10px; align-content: start; font: 400 14px/20px 'Archivo', 'Helvetica Neue', Arial, sans-serif; }
.kr-rodape__coluna strong { font: 500 12px/16px 'Archivo', 'Helvetica Neue', Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); }
.kr-rodape__coluna a { color: var(--texto-2); text-decoration: none; } .kr-rodape__coluna a:hover { color: var(--texto); }
.kr-rodape__base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--linha); font: 400 12px/16px 'Archivo', 'Helvetica Neue', Arial, sans-serif; color: var(--texto-3); }

@media (prefers-reduced-motion: reduce) { .kr-esqueleto { animation: none; } }

/* ===================== v2.2 · documentos e relatórios (HTML que vira PDF) ===================== */

/* Sumário: grade leve de colunas iguais, sem linhas; número de dois dígitos na cor de ação */
.kr-sumario { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 32px; }
.kr-sumario--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kr-sumario a { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--texto-2); font: 400 15px/21px 'Archivo', 'Helvetica Neue', Arial, sans-serif; letter-spacing: -0.01em; transition: color var(--tempo-rapido) var(--curva-marca); }
.kr-sumario a:hover { color: var(--texto); }
.kr-sumario__n { flex: none; font: 500 12px/21px 'Archivo', 'Helvetica Neue', Arial, sans-serif; color: var(--acao); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .kr-sumario, .kr-sumario--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; } }
@media print { .kr-sumario, .kr-sumario--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; } }

/* Documento: página de leitura de até 960 px que também imprime em A4 */
.kr-doc { max-width: 960px; margin: 0 auto; padding: 0 16px; }
.kr-doc__topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 20px 0; border-bottom: 1px solid var(--linha); }
.kr-doc__topo > :first-child { white-space: nowrap; }
.kr-doc__capa { display: grid; gap: 20px; padding: 72px 0 40px; }
.kr-doc__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.kr-doc__sumario { padding: 8px 0 56px; }
.kr-doc__secao { padding: 40px 0; border-top: 1px solid var(--linha); scroll-margin-top: 16px; }
.kr-doc__cabeca { display: grid; gap: 10px; margin-bottom: 28px; }
.kr-doc__grade { display: grid; gap: 16px; }
.kr-doc__grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kr-doc__grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kr-doc__grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .kr-doc__grade--3 { grid-template-columns: 1fr; } .kr-doc__grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .kr-doc__grade--2, .kr-doc__grade--4 { grid-template-columns: 1fr; } }

@page { size: A4; margin: 14mm 0; }
@media print {
  .kr-doc * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .kr-doc { max-width: none; padding: 0 16mm; }
  .kr-doc__capa { padding: 32px 0 28px; }
  .kr-doc__sumario { padding: 0 0 24px; }
  .kr-doc__secao { padding: 24px 0; }
  .kr-doc__cabeca { display: block; break-after: avoid; break-inside: avoid; }
  .kr-doc__cabeca > * + * { margin-top: 10px; }
  /* reserva espaço depois do cabeçalho: se o conteúdo não couber, o cabeçalho desce junto */
  .kr-doc__cabeca::after { content: ""; display: block; height: 200px; margin-bottom: -200px; }
  .kr-doc .kr-cartao, .kr-doc .kr-tabela tr, .kr-doc .kr-alerta, .kr-doc li, .kr-doc figure { break-inside: avoid; }
  .kr-doc h2, .kr-doc h3 { break-after: avoid; }
  .kr-doc p { orphans: 3; widows: 3; }
  .kr-doc .so-tela, .kr-doc .kr-botao-icone { display: none; }
  .kr-doc__grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===================== Kleiciane Rocha · camada da marca (interface/fonte/marca.css) =====================
   Vem depois do sistema e sobrescreve só o que a marca pede (DIRECAO-MARCA.md, seção "Sistema"). Escrita como o bundle:
   classes kr-* e tokens sem prefixo; o gerador troca para o prefixo da marca. Nenhum valor de cor solto: só tokens. */

/* ---------- Tipografia: Archivo em três larguras. Título e frase em 650 na largura 112; a ênfase é de cor, nunca de peso. */
.kr-titulo { font-weight: 650; font-stretch: 112%; letter-spacing: -0.02em; }
.kr-titulo b, .kr-titulo strong { font-weight: inherit; color: var(--enfase); }
.kr-titulo--secao { letter-spacing: -0.015em; }
.kr-rotulo { font-weight: 600; letter-spacing: 0.1em; }
.kr-cartao__titulo, .kr-modal__titulo { font-weight: 600; letter-spacing: -0.01em; }
.kr-indicador__valor { font-weight: 600; font-stretch: 125%; letter-spacing: -0.02em; white-space: nowrap; }
.kr-tabela th, .kr-nav__grupo, .kr-menu__grupo, .kr-rodape__coluna strong, .kr-etapas__topo { font-weight: 600; letter-spacing: 0.1em; }
.kr-vazio__titulo, .kr-etapas__pergunta, .kr-rodape__frase, .kr-depoimento__frase { font-weight: 650; font-stretch: 112%; letter-spacing: -0.015em; }
/* Quebra balanceada em todo título, frase e lema: nunca uma palavra sozinha na última linha.
   Primeiro todo título pela marcação (h1 a h5 e a pergunta da sanfona), em qualquer página ou modelo, com especificidade
   zero (:where), para nenhuma classe precisar repetir; depois as classes de título, frase e lema que não são h*.
   Classe própria de um modelo que faz papel de título (passo, item de "Para quem é", título de slide) leva o mesmo
   text-wrap: balance no CSS do modelo; o assets/ferramentas/conferir.js falha se sobrar uma palavra sozinha. */
:where(h1, h2, h3, h4, h5, summary) { text-wrap: balance; }
.kr-titulo, .kr-frase, .kr-vazio__titulo, .kr-etapas__pergunta, .kr-rodape__frase, .kr-depoimento__frase, .kr-cartao__titulo, .kr-modal__titulo,
.kr-alerta__titulo, .kr-aviso__titulo, .kr-heroi__itens li { text-wrap: balance; }
/* "Método ROCHA" em texto é uma assinatura só: nunca parte em duas linhas */
.kr-nome-produto, .kr-sem-quebra { white-space: nowrap; }  /* data e hora de evento também não partem ("quinta, 12/11 · 20h") */
.kr-vazio__titulo b, .kr-rodape__frase b, .kr-depoimento__frase b { font-weight: inherit; color: var(--enfase); }
.kr-sanfona summary { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
/* Nenhum texto abaixo de 12 px (a aluna lê no celular): os rótulos de 11 px do sistema sobem para 12 */
.kr-nav__marca--logotipo span, .kr-nav__grupo, .kr-nav__contador, .kr-menu__grupo, .kr-avatar--sm { font-size: 12px; }
.kr-menu-movel a { font-weight: 500; }
.kr-sumario a { font-weight: 500; letter-spacing: 0; }
.kr-sumario__n { font-weight: 600; font-stretch: 125%; color: var(--texto-2); }
@media (max-width: 760px) {
  .kr-titulo { font-size: 28px; line-height: 34px; }
  .kr-titulo--display { font-size: 34px; line-height: 38px; }
  .kr-titulo--secao { font-size: 22px; line-height: 28px; }
}

/* ---------- A frase em destaque: o palco da marca. Uma palavra em <b>, na cor de ênfase. */
.kr-frase { margin: 0; font: 650 56px/1.08 'Archivo', 'Helvetica Neue', Arial, sans-serif; font-stretch: 112%; letter-spacing: -0.02em; color: var(--texto); text-align: center; text-wrap: balance; }
.kr-frase b, .kr-frase strong { font-weight: inherit; color: var(--enfase); }
.kr-frase--esquerda { text-align: left; }
@media (max-width: 760px) { .kr-frase { font-size: 32px; line-height: 1.1; } }

/* ---------- Moldura e janela: o efeito da marca. Chapadas, retas, sem sombra. A foto mora sempre dentro da moldura.
   Na tela, uma espessura só para qualquer bloco: 24 px; 16 px abaixo de 760 px. Nenhum bloco tem espessura própria. */
.kr-moldura { background: var(--moldura); padding: 24px; }
.kr-janela { background: var(--janela); }
.kr-foto { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; background: var(--superficie-2); }
@media (max-width: 760px) { .kr-moldura { padding: 16px; } }

/* Peça de comunicação dentro de uma página no tema escuro: o contêiner com data-theme="claro" leva o próprio chão claro
   e, quando a página em volta é escura, o respiro de um cartão (espaco-5), para nada encostar na borda */
.kr [data-theme="claro"] { background: var(--fundo); color: var(--texto); }
[data-theme="escuro"] [data-theme="claro"]:not(.kr-doc):not(body), .dark [data-theme="claro"]:not(.kr-doc):not(body) { padding: var(--espaco-5); }
/* Página de comunicação (landing, evento) é clara mesmo publicada num site com tema: leva data-theme="claro" também no
   <body>, que redeclara os tokens claros embaixo do .dark ou do data-theme="escuro" que o site puser no <html>
   (shadcn e next-themes põem .dark no <html>). O <html> acompanha no esquema de cor (barra de rolagem e controles). */
:root:has(> body[data-theme="claro"]) { color-scheme: light; }

/* PDF: o chão Rosé-ar vai até a borda do papel (sem isto, a margem da página sai branca em volta do chão) */
@page { background: var(--fundo); }

/* ---------- Logotipo, selo do produto e avatar */
.kr-cabecalho__marca .kr-logotipo { height: 22px; }
.kr-rodape .kr-cabecalho__marca .kr-logotipo, .kr-doc__topo .kr-logotipo { height: 18.4px; }
.kr-selo { display: inline-flex; align-items: center; height: 48px; padding: 0 22px; border-radius: var(--raio-pilula); background: var(--realce); }
/* A assinatura Método ROCHA nunca abaixo de 18 px de altura (cerca de 205 px de largura): a mesma letra do logotipo no mínimo dele */
.kr-selo .kr-logotipo { height: 18px; fill: var(--sobre-realce); }
.kr-avatar--marca { box-shadow: 0 0 0 2px var(--fundo), 0 0 0 5px var(--moldura); }
.kr-carregando--parado > span { animation: none; }

/* ---------- O que se toca é redondo; a superfície é reta (raio-lg e raio-xl valem 0) */
.kr-botao { border-radius: var(--raio-pilula); }
.kr-botao--lg { height: 56px; padding: 0 32px; font-size: 17px; border-radius: var(--raio-pilula); }
.kr-botao--contorno { background: transparent; border: 1.5px solid var(--texto); color: var(--texto); }
/* Botão nunca sai da coluna: no celular, o grande ocupa a largura e quebra a linha se o texto não couber */
@media (max-width: 760px) { .kr-botao--lg { max-width: 100%; white-space: normal; height: auto; min-height: 56px; padding-block: 14px; text-align: center; justify-content: center; } }
.kr-botao--contorno:hover { background: var(--superficie); }
.kr-botao--perigo { color: var(--fundo); }
/* No escuro, o botão de perigo é contorno: a ação destrutiva nunca é a mancha mais forte da tela */
[data-theme="escuro"] .kr-botao--perigo, .dark .kr-botao--perigo, .kr-botao--perigo[data-theme="escuro"] { background: transparent; border: 1.5px solid var(--critico); color: var(--critico); }
[data-theme="escuro"] [data-theme="claro"] .kr-botao--perigo { background: var(--critico); border: 0; color: var(--fundo); }
.kr-botao-icone, .kr-pagina { border-radius: var(--raio-pilula); }
.kr-abas--segmento, .kr-abas--segmento .kr-aba { border-radius: var(--raio-pilula); }
.kr-menu { border-radius: var(--raio-lg); }

/* ---------- Ajustes de componente */
/* Alerta de informação usa o Rosé (realce): o corpo fica em Ameixa, porque a Malva sobre o Rosé não passa em letra pequena */
.kr-alerta__texto { color: var(--texto); }
/* Estado vazio: a janela dentro da moldura, sem borda tracejada */
.kr-vazio { border: 0; border-radius: 0; background: var(--janela); }
/* Depoimento: cartão reto; o vídeo da aluna é uma foto reta, sem moldura (a moldura emoldura a Kleiciane) e nunca um bloco escuro */
.kr-depoimento__video { background: var(--superficie-2); border-radius: 0; }
.kr-depoimento__play { background: var(--janela); color: var(--texto); }
.kr-depoimento__resultado { display: block; color: var(--texto-2); }
/* Variação para baixo não é erro: "abaixo do plano" fica em Malva, sem cor de alarme (o crítico é só para erro e perigo) */
.kr-indicador__variacao--desce { color: var(--texto-2); }
/* Formulário em etapas: a nota segue o alinhamento do bloco (à esquerda) */
.kr-etapas__nota { text-align: left; }
/* Estado vazio: texto de apoio em uma linha, até 34 caracteres */
.kr-vazio__texto { max-width: 34ch; }

/* ---------- Grades que fecham certo (nunca auto-fit): 2 e 3 colunas viram 1 no celular; 4 vira 2 */
.kr-grade { display: grid; gap: 12px; }
.kr-grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kr-grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kr-grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .kr-grade--2, .kr-grade--3 { grid-template-columns: minmax(0, 1fr); }
  .kr-grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Sumário sem item sozinho, contado pelo próprio CSS: 3, 5, 6 ou 9 seções em 3 colunas na tela;
   no celular e no PDF, 2 colunas quando o total é par e 1 coluna quando é ímpar */
@media screen and (min-width: 641px) {
  .kr-sumario:has(> li:last-child:nth-child(3n)), .kr-sumario:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) { .kr-sumario:has(> li:last-child:nth-child(odd)) { grid-template-columns: minmax(0, 1fr); } }
@media print { .kr-sumario:has(> li:last-child:nth-child(odd)) { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Gráfico: duas versões do mesmo desenho. O SVG escala com a largura, então o rótulo só fica com 12 px ou
   mais se o desenho tiver a largura em que é visto: a versão larga (viewBox de 480) a partir de 480 px de cartão;
   abaixo disso, a estreita (viewBox de 300, rótulos de 13), com barras deitadas e o valor de cada barra no fim dela. */
.kr-grafico { container-type: inline-size; }
.kr-grafico__estreito { display: none; max-width: 460px; }
.kr-grafico__estreito .eixo, .kr-grafico__estreito .valor { font-size: 13px; }
@container (max-width: 479px) {
  .kr-grafico__largo { display: none; }
  .kr-grafico__estreito { display: block; }
}
/* Fileira de indicadores: 4 colunas; 2 no celular (nunca um sozinho na linha), com o número numa linha só */
.kr-indicadores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) {
  .kr-indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kr-indicadores .kr-cartao { padding: 16px; }
  .kr-indicador__valor { font-size: 26px; line-height: 30px; }
}

/* ---------- Capa de documento: a moldura Rosé com a janela */
.kr-doc__capa { background: var(--janela); border: 24px solid var(--moldura); padding: 56px 48px 48px; margin-top: 24px; }
.kr-doc__sumario { padding-top: 40px; }
@media (max-width: 760px) { .kr-doc__capa { border-width: 16px; padding: 32px 20px 28px; } }
@media print {
  .kr-doc__capa { border-width: 18px; padding: 32px 28px 28px; margin-top: 12px; }
  .kr-doc__sumario { padding-top: 24px; }
}

/* ---------- Composição Leitura: a coluna de 1180 px, com margem de 16 px no celular e de 48 px a partir de 1024 px */
.kr-leitura { box-sizing: border-box; max-width: calc(1180px + 96px); margin: 0 auto; padding: 0 16px; }
@media (min-width: 1024px) { .kr-leitura { padding: 0 48px; } }

/* ---------- Site: cabeçalho e topo da landing (composição Leitura) */
.kr-cabecalho__links { font-size: 15px; }
.kr-cabecalho__links a { color: var(--texto); }
.kr-cabecalho__links a:hover { color: var(--texto); text-decoration: underline; text-underline-offset: 4px; }
.kr-heroi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 64px; align-items: center; }
.kr-heroi__texto { display: grid; gap: 28px; justify-items: start; }
.kr-heroi__texto .kr-subtitulo { font-size: 20px; line-height: 30px; max-width: 28em; }
.kr-heroi__acao { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.kr-heroi__nota { font: 400 15px/20px 'Archivo', 'Helvetica Neue', Arial, sans-serif; color: var(--texto-2); }
.kr-heroi__foto { height: 520px; }
.kr-heroi__itens { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; list-style: none; margin: 0; padding: 0; }
.kr-heroi__itens li { border-top: 1.5px solid var(--linha); padding-top: 22px; font: 600 17px/24px 'Archivo', 'Helvetica Neue', Arial, sans-serif; color: var(--texto); }
.kr-heroi__itens li span { display: block; font-weight: 400; font-size: 15px; line-height: 22px; color: var(--texto-2); }
@media (max-width: 760px) {
  .kr-cabecalho__marca .kr-logotipo { height: 18.4px; }
  .kr-cabecalho__entrar { display: none; }
  .kr-heroi { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .kr-heroi__foto { order: -1; height: 330px; }
  .kr-heroi__texto { gap: 18px; }
  .kr-heroi__texto .kr-subtitulo { font-size: 17px; line-height: 26px; }
  .kr-heroi__acao { gap: 12px; }
  .kr-heroi__acao .kr-botao { width: 100%; }
  .kr-heroi__itens { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}