/* O CSS da conta: só tokens (marca/tokens.css e marca/dominios.css), nenhum hexadecimal aqui. A cor
   de domínio vem do data-dominio do <html>.

   Celular (< 1024 px): uma coluna com 24 px de lado. Computador (≥ 1024 px, guia seção 5): o mesmo
   contêiner centrado para o topo e a tela (o logo alinha com o conteúdo), 48 px de lado, e cada tela
   abre em colunas (o fim do arquivo). Nada pode passar da largura: a grade da tela é minmax(0, 1fr),
   todo item flex que leva texto tem min-width: 0, e nome de variável ou código quebra onde precisar. */

/* Os tokens que só a conta usa (os da marca ficam em marca/tokens.css). */
:root {
  --largura: 1120px; /* o conteúdo no computador; a 1440 px sobram 112 px de cada lado */
  --botao-cartao: 44px;
  --botao-computador: 48px;
  --t-botao-cartao: 14px;
  --t-veredito-tela: 3.5rem; /* as telas de dentro, no computador; o Início usa --t-veredito-computador */
  --tela-topo: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
:where(h1, h2, h3, p, ul, ol, li, dl, dd, figure) { margin: 0; padding: 0; }
:where(ul, ol) { list-style: none; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--pagina);
  color: var(--tinta);
  font: 400 var(--t-corpo) / 1.5 var(--fonte);
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--dominio); outline-offset: 3px; }
code { font-family: inherit; font-weight: 700; overflow-wrap: anywhere; }

.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* A faixa de 8 px no topo de toda tela, na cor do domínio. */
.faixa { position: sticky; top: 0; height: var(--faixa); background: var(--dominio); z-index: 10; }

/* ---------- o contêiner: o topo e a tela na mesma largura ---------- */

.topo, .tela {
  width: 100%;
  max-width: calc(var(--largura) + 2 * var(--tela-lado));
  margin-inline: auto;
  padding-inline: var(--tela-lado);
}
.topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding-top: var(--tela-topo); }
.topo-marca { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tela { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--bloco); padding-top: 28px; padding-bottom: var(--tela-base); }
.tela:focus { outline: none; }

/* A tela de dentro: a seta, a etiqueta e o nome da tela (guia, seção 8, Navegação). */
.topo-voltar {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px;
  color: var(--tinta); font-size: var(--t-rotulo); font-weight: 700; letter-spacing: var(--t-rotulo-letra); text-decoration: none; text-transform: uppercase;
}
.topo-voltar .icone { flex: none; }
.topo-voltar-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* O logo: Space Grotesk 600 com o sol no lugar do "o". */
.logo { display: inline-flex; align-items: baseline; font-family: var(--fonte); font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.logo-simbolo { width: 0.612em; height: 0.565em; margin: 0 0.035em 0 0.024em; overflow: visible; }
.logo-sol, .logo-horizonte { fill: none; }
.logo-sol { stroke: var(--sinal); stroke-width: 17; }
.logo-horizonte { stroke: currentColor; stroke-width: 16; }

/* A etiqueta do domínio: nome e ícone, nunca só a cor. */
.etiqueta {
  display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--raio-pilula);
  background: var(--dominio-fundo); color: var(--dominio-texto);
  font-size: var(--t-etiqueta); font-weight: 700; letter-spacing: var(--t-etiqueta-letra); text-transform: uppercase;
}

/* ---------- o veredito ---------- */

/* Archivo Black, uma vez por tela, com o ponto laranja desenhado (pendurado na margem: não cai sozinho na linha de baixo). */
.veredito { font: 400 var(--t-veredito) / var(--t-veredito-linha) var(--fonte-veredito); letter-spacing: var(--t-veredito-letra); overflow-wrap: anywhere; text-wrap: balance; outline: none; }
.ponto { display: inline-block; width: var(--ponto); height: var(--ponto); margin-left: var(--ponto-margem); border-radius: 50%; background: var(--sinal); }
.veredito .ponto { margin-right: calc(-1 * (var(--ponto) + var(--ponto-margem))); }
.abre { display: grid; gap: 14px; }
.apoio { max-width: 680px; font-size: var(--t-destaque); line-height: var(--t-destaque-linha); color: var(--tinta-apoio); }
.nota { max-width: 680px; font-size: var(--t-pequeno); line-height: 1.45; color: var(--tinta-2); }

/* ---------- seções: o rótulo, o fio grosso e as linhas ---------- */

.secao { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; min-width: 0; }
.secao-titulo { font-size: var(--t-rotulo); font-weight: 700; letter-spacing: var(--t-rotulo-letra); text-transform: uppercase; color: var(--tinta-2); }
.linhas { display: grid; border-top: 2px solid var(--tinta); }
.linha {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 10px 0;
  border-bottom: 1px solid var(--linha); font-size: var(--t-lista);
}
.linha > * { min-width: 0; overflow-wrap: anywhere; }
.linha-fim { flex: none; text-align: right; }
.linha a, .linha .botao-terciario { color: var(--tinta); font-size: var(--t-lista); font-weight: 700; }
.secundario { color: var(--tinta-2); font-size: var(--t-pequeno); }
.erro { color: var(--negativo); font-size: var(--t-pequeno); overflow-wrap: anywhere; }
.erro:empty { display: none; }

/* O pé do Início: a Administração e o sair, links de 44 px. */
.pe { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.pe a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta); font-size: var(--t-pequeno); font-weight: 700; }

/* ---------- botões (guia, seção 8): primário de tinta, secundário com contorno, terciário sublinhado ---------- */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--botao); padding: 0 24px;
  border: 2px solid transparent; border-radius: var(--raio-pilula); background: transparent; color: var(--tinta);
  font: 700 var(--t-botao) / 1.2 var(--fonte); text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color var(--rapido) var(--troca), color var(--rapido) var(--troca), border-color var(--rapido) var(--troca);
}
.botao-primario { background: var(--tinta); color: var(--pagina); }
.botao-secundario { border-color: var(--tinta); }
.botao-terciario { min-height: 44px; padding: 0; border: 0; text-decoration: underline; }
.botao-cartao { min-height: var(--botao-cartao); padding: 0 18px; font-size: var(--t-botao-cartao); }
.botao-bloco { display: flex; width: 100%; }
/* Na abertura (o fundo escuro): o primário vira papel. */
.botao-claro { background: var(--pagina); color: var(--tinta); }
@media (hover: hover) {
  .botao-primario:not(:disabled):hover { background: var(--tinta-apoio); }
  .botao-secundario:not(:disabled):hover { background: var(--hover); }
}
.botao-primario:not(:disabled):active { background: var(--tinta-2); }
.botao-secundario:not(:disabled):active { background: var(--pressionado); }
.botao:disabled { border-color: transparent; background: var(--desativado-fundo); color: var(--desativado-tinta); cursor: default; }
.botao-terciario:disabled { background: transparent; }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }

/* ---------- selos: pílula 13/700, texto curto; a cor só quando é veredito ---------- */

.selo {
  display: inline-flex; align-items: center; max-width: 100%; padding: 3px 10px; border-radius: var(--raio-pilula);
  background: var(--pagina); color: var(--tinta-2); font-size: var(--t-rotulo); font-weight: 700; line-height: 1.3; white-space: nowrap;
}
.selo-positivo { background: var(--positivo-fundo); color: var(--positivo); }
.selo-atencao { background: var(--negativo-fundo); color: var(--negativo); }
.selo-contorno { border: 1px solid var(--tinta); background: transparent; color: var(--tinta); }

/* ---------- campos ---------- */

.campo {
  width: 100%; min-width: 0; min-height: var(--toque); padding: 0 14px; border: 2px solid var(--linha); border-radius: 0;
  background: var(--cartao); color: var(--tinta); font: inherit; font-size: var(--t-campo);
  transition: border-color var(--rapido) var(--troca);
}
.campo:focus { border-color: var(--tinta); }
.caixa { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--tinta); }

/* ---------- a abertura (entrar): fundo escuro, o logo no meio, a assinatura embaixo ---------- */

.abertura { background: var(--inverso-fundo); color: var(--inverso-tinta); }
.abertura .tela { min-height: 100dvh; align-content: center; justify-items: center; text-align: center; }
.etiqueta-abertura { color: var(--dominio-horizonte); font-size: var(--t-etiqueta); font-weight: 700; letter-spacing: var(--t-etiqueta-letra); text-transform: uppercase; }
.assinatura { font-size: var(--t-etiqueta); font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--inverso-borda); }

/* ---------- o Início ---------- */

.inicio-blocos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }

/* ---------- a foto da pessoa: pílula (um círculo), sem sombra; sem foto, as iniciais em tinta 2 no cartão ---------- */

.avatar { display: inline-grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: var(--raio-pilula); object-fit: cover; }
.avatar-iniciais { background: var(--cartao); border: 2px solid var(--linha); color: var(--tinta-2); font-size: var(--t-pequeno); font-weight: 700; line-height: 1; }
.quem { display: inline-flex; flex: none; color: inherit; text-decoration: none; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: var(--raio-pilula); }
.avatar-perfil { width: 96px; height: 96px; font-size: 1.75rem; }

/* ---------- o perfil: a foto, as partes do formulário e o botão ---------- */

.perfil-foto { display: flex; align-items: center; gap: 20px; min-width: 0; }
.perfil-foto-texto { display: grid; gap: 10px; min-width: 0; }
.perfil-foto-trocar { position: relative; }
.perfil-foto-trocar:focus-within { outline: 2px solid var(--dominio); outline-offset: 3px; }
.perfil-foto-ocupada { border-color: transparent; background: var(--desativado-fundo); color: var(--desativado-tinta); cursor: default; }
.form-perfil { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.perfil-partes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.campos-perfil { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 14px; border-top: 2px solid var(--tinta); }
.campo-perfil { display: grid; align-content: start; gap: 6px; min-width: 0; }
.campo-rotulo { font-size: var(--t-pequeno); font-weight: 700; }
.campo-area { min-height: 96px; padding-block: 10px; line-height: 1.4; resize: vertical; }
.campo-dica { font-size: var(--t-pequeno); line-height: 1.4; color: var(--tinta-2); }
.campo-origem { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; min-height: 20px; font-size: var(--t-pequeno); color: var(--tinta-2); overflow-wrap: anywhere; }
.campo-origem:empty { display: none; }
.campo-origem .botao-terciario { min-height: 32px; font-size: var(--t-pequeno); text-align: left; }
.perfil-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }

/* ---------- o plano: a escolha entre os planos (uma opção por linha; no computador, lado a lado) ---------- */

.form-plano { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.opcoes { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 2px solid var(--tinta); }
.opcao {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; min-height: 64px; padding: 12px 0;
  border-bottom: 1px solid var(--linha); cursor: pointer;
}
.opcao-titulo { font-size: var(--t-lista); font-weight: 700; }
.opcao-valor { font-size: var(--t-lista); font-weight: 700; text-align: right; white-space: nowrap; }
.opcao-valor small { display: block; font-size: var(--t-rotulo); font-weight: 400; color: var(--tinta-2); }
.opcao-gratis { grid-column: 2 / -1; font-size: var(--t-pequeno); color: var(--tinta-2); }

/* ---------- a Administração ---------- */

/* Os blocos da Administração são grandes: mais ar entre eles que o bloco de 24. */
.tela-adm { gap: 40px; }

/* As duas contas do Stripe: empilhadas no celular, lado a lado no computador. Painel reto, no cartão. */
.contas-stripe { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.conta-stripe { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px; min-width: 0; padding: 18px 18px 20px; background: var(--cartao); }
.conta-stripe-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 32px; }
.conta-stripe-nome { font-size: var(--t-destaque); font-weight: 700; }
.fatos { display: grid; border-top: 1px solid var(--linha); }
.fato { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; border-bottom: 1px solid var(--linha); font-size: var(--t-pequeno); }
.fato dt { min-width: 0; color: var(--tinta-2); }
.fato dd { flex: none; }
.segredo { display: block; padding: 10px 12px; border: 2px solid var(--linha); background: var(--pagina); font-size: var(--t-pequeno); overflow-wrap: anywhere; user-select: all; }
.resultado { font-size: var(--t-pequeno); line-height: 1.45; overflow-wrap: anywhere; }
.resultado:empty { display: none; }
.resultado-ok { color: var(--tinta-apoio); }
.resultado-erro { color: var(--negativo); }

/* As duas decisões (o Stripe em uso e a cobrança): uma embaixo da outra; no computador, lado a lado. */
.decisoes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.decisao-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 8px 0; border-bottom: 1px solid var(--linha); }
.decisao-linha > span { min-width: 0; font-size: var(--t-lista); font-weight: 700; }

/* O seletor: pílula com contorno de 2 px, a opção ativa em tinta, aria-pressed. */
.seletor { display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: none; gap: 4px; padding: 3px; border: 2px solid var(--tinta); border-radius: var(--raio-pilula); }
.seletor button {
  min-width: 92px; min-height: 38px; padding: 0 14px; border: 0; border-radius: var(--raio-pilula); background: transparent; color: var(--tinta);
  font: 400 var(--t-pequeno) var(--fonte); cursor: pointer; transition: background-color var(--rapido) var(--troca), color var(--rapido) var(--troca);
}
.seletor button[aria-pressed="true"] { background: var(--tinta); color: var(--pagina); font-weight: 700; cursor: default; }
@media (hover: hover) {
  .seletor button[aria-pressed="false"]:not(:disabled):hover { background: var(--hover); }
}
.seletor button:disabled:not([aria-pressed="true"]) { color: var(--desativado-tinta); cursor: default; }

/* O interruptor (sim ou não, em tinta; F-18). */
.interruptor { position: relative; width: 52px; height: 30px; flex: none; padding: 0; border: 2px solid var(--linha); border-radius: var(--raio-pilula); background: var(--linha); cursor: pointer; }
.interruptor::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: var(--raio-pilula); background: var(--tinta-2); transition: left var(--rapido) var(--troca); }
.interruptor[aria-checked="true"] { background: var(--tinta); border-color: var(--tinta); }
.interruptor[aria-checked="true"]::after { left: 25px; background: var(--pagina); }
.interruptor:disabled { opacity: 0.5; cursor: default; }

/* A confirmação, logo abaixo do controle que a pediu. */
.pergunta { display: grid; gap: 14px; padding: 16px 18px; border-left: 2px solid var(--tinta); background: var(--cartao); }
.pergunta p { font-size: var(--t-pequeno); line-height: 1.45; }

/* Os planos: no celular, um cartão compacto por plano; no computador, uma linha de tabela (o fim do arquivo). */
.tabela-cabeca { display: none; }
.planos { display: grid; border-top: 2px solid var(--tinta); }
.plano-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "titulo titulo"
    "conexoes valor"
    "dias ."
    "teste producao"
    "ativo acao"
    "resultado resultado";
  align-items: center;
  gap: 10px 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--linha);
}
.plano-extra { grid-template-areas: "titulo titulo" "valor valor" "teste producao" "ativo acao" "resultado resultado"; }
.plano-extra .celula-conexoes, .plano-extra .celula-dias { display: none; }
.celula { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; align-content: start; }
.celula-titulo { grid-area: titulo; }
.celula-conexoes { grid-area: conexoes; }
.celula-valor { grid-area: valor; }
.celula-dias { grid-area: dias; }
.celula-ativo { grid-area: ativo; display: flex; align-items: center; gap: 10px; min-height: var(--botao-cartao); font-size: var(--t-lista); cursor: pointer; }
.celula-teste { grid-area: teste; }
.celula-producao { grid-area: producao; }
.celula-teste, .celula-producao { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.celula-acao { grid-area: acao; display: flex; justify-content: flex-end; }
.celula-resultado { grid-area: resultado; }
.celula-rotulo { font-size: var(--t-rotulo); color: var(--tinta-2); }
.celula-titulo .celula-rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.celula-nada { font-size: var(--t-pequeno); color: var(--tinta-2); }
.campo-valor { display: flex; align-items: center; min-width: 0; border: 2px solid var(--linha); background: var(--cartao); transition: border-color var(--rapido) var(--troca); }
.campo-valor:focus-within { border-color: var(--tinta); }
.campo-valor > span { flex: none; padding-left: 12px; color: var(--tinta-2); font-size: var(--t-pequeno); }
.campo-valor .campo { min-height: calc(var(--toque) - 4px); border: 0; padding-left: 8px; }
.campo-valor .campo:focus-visible { outline: none; }
.campo-valor:has(.campo:focus-visible) { outline: 2px solid var(--dominio); outline-offset: 3px; }

/* As casas e as cortesias: no celular, um cartão compacto por casa (o formulário abre ali mesmo); no computador, uma linha de tabela. */
.casas-cabeca { display: none; }
.casas { display: grid; border-top: 2px solid var(--tinta); }
.casa { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--linha); }
.casa-nome, .casa-situacao { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; font-size: var(--t-lista); }
.casa-acao { display: flex; padding-top: 4px; }
.casa-resultado:empty { display: none; }
.pedidos-atendidos { margin-top: 12px; }
.pedidos-atendidos summary { display: flex; align-items: center; min-height: 44px; font-size: var(--t-pequeno); font-weight: 700; cursor: pointer; }
.cortesia-form { display: grid; gap: 16px; margin-top: 8px; padding: 16px 18px; border-left: 2px solid var(--tinta); background: var(--cartao); }
.cortesia-campos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.cortesia-campo { display: grid; align-content: start; gap: 6px; min-width: 0; }
.cortesia-rotulo { font-size: var(--t-rotulo); color: var(--tinta-2); }
.cortesia-prazo { display: grid; justify-items: start; gap: 8px; }
.cortesia-prazo .campo { width: 180px; max-width: 100%; }
.cortesia-form .pergunta { padding: 0; border-left: 0; background: transparent; }

/* ---------- o computador (≥ 1024 px) ---------- */

@media (min-width: 1024px) {
  :root { --tela-lado: 48px; --tela-topo: 36px; }
  .tela { gap: 40px; padding-top: 40px; padding-bottom: 64px; }
  .tela-adm { gap: 56px; }
  .veredito { font-size: var(--t-veredito-tela); }
  .tela-inicio .veredito { font-size: var(--t-veredito-computador); line-height: var(--t-veredito-computador-linha); }
  .abre { gap: 18px; }
  .apoio { font-size: 1.25rem; line-height: 1.45; }
  .botao:not(.botao-cartao) { min-height: var(--botao-computador); }
  .tela-inicio > .botao-primario, .form-plano > .botao-primario { justify-self: start; min-width: 240px; }

  /* O Início: o veredito na largura toda, e as partes em três colunas sob o fio grosso. */
  .inicio-blocos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }

  /* O perfil: as partes do formulário em duas colunas; o endereço com o CEP, a cidade e a UF lado a lado. */
  .perfil-partes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; max-width: 1040px; }
  .campos-perfil { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px 16px; }
  .campo-perfil { grid-column: span 6; }
  .campo-perfil-cep { grid-column: span 2; }
  .campo-perfil-cidade { grid-column: span 4; }
  .campo-perfil-uf { grid-column: span 2; }
  .campo-perfil-cpf, .campo-perfil-nascimento { grid-column: span 3; }
  .tela-perfil .perfil-acoes > .botao-primario { min-width: 240px; }

  /* O plano: as opções lado a lado, cada uma com o valor embaixo. */
  .form-plano { gap: 24px; max-width: 880px; }
  .opcoes { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; border-top: 0; }
  .opcao {
    grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 20px 12px; min-height: 0; padding: 20px;
    border: 2px solid var(--linha); background: var(--cartao);
  }
  .opcao:has(input:checked) { border-color: var(--tinta); }
  .opcao-valor { grid-column: 2; font-size: 1.5rem; line-height: 1.2; text-align: left; }
  .opcao-valor small { font-size: var(--t-pequeno); }

  /* A Administração. */
  .contas-stripe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .conta-stripe { padding: 22px 24px 24px; }
  .decisoes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }

  .tabela-cabeca, .plano-linha {
    grid-template-columns: minmax(0, 1fr) 96px 140px 88px 72px 120px 120px 104px;
    grid-template-areas: "titulo conexoes valor dias ativo teste producao acao";
    align-items: center;
    gap: 0 12px;
  }
  .tabela-cabeca {
    display: grid; min-height: 40px; border-top: 2px solid var(--tinta); border-bottom: 1px solid var(--linha);
    font-size: var(--t-etiqueta); font-weight: 700; letter-spacing: var(--t-etiqueta-letra); text-transform: uppercase; color: var(--tinta-2);
  }
  .planos { border-top: 0; }
  .plano-linha { grid-template-areas: "titulo conexoes valor dias ativo teste producao acao" "resultado resultado resultado resultado resultado resultado resultado resultado"; padding: 10px 0; }
  .plano-extra .celula-conexoes, .plano-extra .celula-dias { display: grid; }
  .celula-rotulo, .celula-ativo-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .celula-ativo { align-self: center; }
  .celula-acao { justify-content: flex-end; }
  .celula-resultado:not(:empty) { padding-top: 8px; }
  .plano-linha .campo { min-height: var(--botao-cartao); }
  .plano-linha .campo-valor .campo { min-height: calc(var(--botao-cartao) - 4px); }

  .casas-cabeca, .casa { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 148px; align-items: center; gap: 0 24px; }
  .casas-cabeca {
    display: grid; min-height: 40px; border-top: 2px solid var(--tinta); border-bottom: 1px solid var(--linha);
    font-size: var(--t-etiqueta); font-weight: 700; letter-spacing: var(--t-etiqueta-letra); text-transform: uppercase; color: var(--tinta-2);
  }
  .casas { border-top: 0; }
  .casa { padding: 14px 0; }
  .casa-acao { justify-content: flex-end; padding-top: 0; }
  .lista-pedidos .casas-cabeca, .lista-pedidos .casa { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 232px; }
  .casa > .cortesia-form, .casa > .casa-resultado { grid-column: 1 / -1; }
  .cortesia-form { margin-top: 14px; padding: 18px 22px; }
  .cortesia-campos { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.4fr); gap: 20px; align-items: start; }
  .cortesia-prazo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
  .casa-resultado:not(:empty) { padding-top: 8px; }
}