/*
 * Ficha publica do PJ.bio.
 *
 * CSS puro e proposital: o desenho da ficha e todo bespoke (avatar, faixa de
 * destaques, pilha de acoes, escala tipografica propria) e sai mais curto e
 * mais legivel aqui do que como utilitarios. O Tailwind do skeleton continua
 * disponivel para o resto do app.
 *
 * A ORDEM da pagina e a decisao de desenho principal: identidade (quem e) →
 * numeros (o que prova) → acoes (o que da pra fazer) → dossie (o que a
 * Receita registra). O dado cadastral e o mais volumoso, nao o mais urgente;
 * quem chega pelo Google quer ligar ou achar o site antes de ler natureza
 * juridica.
 */

:root {
  --red: #DE1A2B;
  --red-deep: #A80F1E;
  --red-wash: #fdeef0;
  --ink: #171412;
  --ink-soft: #6b625b;
  --paper: #ece7dd;
  --card: #ffffff;
  --gold: #E8A93A;
  --green: #1F7A4C;
  --green-bg: #e5f2ea;
  --grey: #8a817a;
  --grey-bg: #efedea;
  --line: #efece4;
  --surface: #faf8f3;
}

* { box-sizing: border-box; }

/* Coluna: o cartao no meio, o rodape de largura total embaixo, empurrado
   para o fim da janela quando a ficha e curta. O padding lateral saiu do
   body para o .page para o rodape ir de borda a borda. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--paper);
  background-image: radial-gradient(circle at 1px 1px, rgba(23, 20, 18, 0.06) 1px, transparent 0);
  background-size: 16px 16px;
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}
/* O cabecalho do site e irmao do .page, de borda a borda. */
body > .cabecalho-site { width: 100%; align-self: stretch; }

.page { width: 100%; max-width: 462px; padding: 0 16px 56px; flex: 1 0 auto; }
body > .rodape-site { width: 100%; align-self: stretch; }

/* ------------------------------------------------------------------ topo */

/* Marca em cima, trilha embaixo. A trilha e UMA linha: o ultimo item (o
   nome da empresa, que pode ter 80 caracteres) corta com reticencias. Duas
   linhas de migalha em cima do cartao era o que mais sujava o topo. */
.topo-ficha { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; padding-top: 16px; }

.migalhas {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
  letter-spacing: .06em; color: var(--ink-soft);
  padding: 0 4px;
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap; overflow: hidden; min-width: 0;
}
.migalhas a { color: var(--red); text-decoration: none; flex-shrink: 0; }
.migalhas a:hover { text-decoration: underline; }
.migalhas [aria-current="page"] { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.migalhas-sep { color: #c9c2b9; flex-shrink: 0; }

/* Foco visivel em tudo que recebe teclado. O desenho original nao previa,
   e sem isto a ficha fica inavegavel sem mouse. */
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: 8px;
}

.card {
  background: var(--card);
  border-radius: 18px;
  /* `clip`, nao `hidden`: corta nos cantos arredondados do mesmo jeito, mas
     nao vira container de rolagem — e e isso que deixa a coluna da
     identidade ficar `sticky` no desktop. */
  overflow: clip;
  box-shadow: 0 20px 40px -22px rgba(23, 20, 18, 0.35);
}

.ficha-grade { display: block; }
.ficha-dossie { min-width: 0; }

/* A marca continua no topo, mas em 5px: o nome da empresa e o assunto da
   pagina, e um banner inteiro empurrava as acoes para fora da primeira
   dobra no celular. */
.card-accent {
  height: 5px;
  background: linear-gradient(90deg, var(--red) 0%, var(--red-deep) 100%);
}

/* ------------------------------------------------------------------ hero */

.hero {
  display: flex; align-items: center; gap: 16px;
  padding: 24px 24px 16px;
}

.hero-avatar {
  width: 72px; height: 72px; flex-shrink: 0;
  border-radius: 50%;
  /* `--setor` chega por style inline quando o CNAE tem seção conhecida.
     Sem ela, o vermelho da marca — que é o certo para quem não sabemos
     classificar, e não uma cor de reserva que afirmaria um setor errado.
     `color-mix` escurece o segundo ponto do gradiente sem precisar de uma
     segunda variável por setor. */
  background: linear-gradient(135deg,
    var(--setor, var(--red)) 0%,
    color-mix(in srgb, var(--setor, var(--red-deep)) 76%, #000) 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Archivo', sans-serif;
  font-style: italic; font-weight: 800; font-size: 26px;
  overflow: hidden;
  box-shadow: 0 8px 18px -10px rgba(168, 15, 30, 0.7);
}
.hero-avatar img { width: 100%; height: 100%; object-fit: cover; }

.hero-id { min-width: 0; }

/* Uma linha so, cortada pela largura real: descricao de CNAE vai a 100+
   caracteres ("Manutencao e reparacao de maquinas e equipamentos para as
   industrias de alimentos, bebidas e fumo") e em duas linhas o sobrenome
   empurra o nome da empresa para fora do eixo do avatar. Corte por CSS e
   nao por contagem de caracteres porque a largura muda com o aparelho. */
.hero-categoria {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--red);
  margin: 0 0 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

h1 {
  font-family: 'Archivo', sans-serif;
  font-style: italic; font-weight: 800;
  font-size: 24px; line-height: 1.08;
  color: var(--ink);
  margin: 0 0 5px;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.hero-local { font-size: 13px; color: var(--ink-soft); margin: 0; }
.hero-razao { font-size: 11.5px; color: var(--ink-soft); margin: 4px 0 0; line-height: 1.35; }

/* ----------------------------------------------------------------- selos */

.selos {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding: 0 24px 20px;
}

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--green-bg); color: var(--green);
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 500;
  padding: 5px 11px 5px 8px; border-radius: 100px;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

/* Situacao diferente de ATIVA nao pode sair verde: a cor e o dado. */
.badge.inativa { background: var(--grey-bg); color: var(--grey); }
.badge.inativa .dot { background: var(--grey); }

.badge-cnpj {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
  color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line);
  padding: 5px 11px; border-radius: 100px;
}

.badge-rfb {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  color: var(--red-deep); background: var(--red-wash);
  padding: 5px 11px; border-radius: 100px;
}

/* ------------------------------------------------------------ destaques */

/* Numero grande so entra aqui se for CONTAGEM de linha que existe no banco.
   Nada de proporcao estimada: a ficha inteira vive da confianca no dado, e
   um percentual chutado no topo derruba a leitura de tudo que vem depois. */
.destaques {
  display: grid;
  grid-template-columns: repeat(var(--colunas, 3), 1fr);
  margin: 0 24px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
}

.destaque {
  padding: 15px 6px;
  text-align: center;
  border-left: 1px solid var(--line);
}
.destaque:first-child { border-left: none; }

.destaque-valor {
  display: block;
  font-family: 'Archivo', sans-serif;
  font-style: italic; font-weight: 800; font-size: 27px; line-height: 1;
  color: var(--red);
}
/* letter-spacing curto de proposito: "ANOS DE ATIVIDADE" e o rotulo mais
   longo e precisa caber em uma linha na coluna mais estreita (3 destaques
   num aparelho de 360px), senao so ele quebra e desalinha a faixa. */
.destaque-rotulo {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 6px;
}

/* ------------------------------------------------------------- as acoes */

/* Vocabulario unico: link do dono, telefone da Receita, mapa e reivindicacao
   sao a MESMA caixa com pintura diferente. Classes separadas para caixas
   identicas criam duas verdades sobre o mesmo componente. */
.acoes { display: flex; flex-direction: column; gap: 9px; padding: 0 20px 22px; }

.acao {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 15px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  text-decoration: none; color: var(--ink);
  transition: transform .12s ease, border-color .12s ease;
}
.acao:hover { transform: translateY(-1px); border-color: var(--red); }

.acao-primaria {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%);
  border-color: transparent; color: #fff;
  box-shadow: 0 10px 22px -14px rgba(168, 15, 30, 0.9);
}
.acao-primaria:hover { border-color: transparent; }
.acao-primaria .acao-sub { color: rgba(255, 255, 255, 0.82); }
.acao-primaria .chev { color: rgba(255, 255, 255, 0.9); }
.acao-primaria .acao-icone { background: rgba(255, 255, 255, 0.22); }

.acao-icone {
  width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--red); color: #fff;
}
.acao-icone.ouro { background: var(--gold); }
.acao-icone.escuro { background: var(--ink); }

.acao-texto { flex: 1; min-width: 0; }
/* display:block porque o markup usa <span>: <a> nao pode conter conteudo
   interativo, e span mantem o link valido sem depender de <p>. */
.acao-titulo {
  display: block; font-size: 14.5px; font-weight: 600; line-height: 1.25;
  overflow-wrap: anywhere;
}
.acao-sub { display: block; font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; line-height: 1.35; }

.chev { color: var(--ink-soft); flex-shrink: 0; }

/* Portao do contato e reivindicacao: tracejado porque nao entregam o dado
   ainda — sao convite, nao acao concluida. */
.acao-portao,
.acao-reivindicar { background: #fff; border-style: dashed; }
.acao-reivindicar { border-color: var(--red); }
.acao-reivindicar .acao-titulo { color: var(--red-deep); }

/* --------------------------------------------- "Como chegar" expansivel */

/* O <summary> vira a mesma caixa .acao das outras acoes: quem olha a pilha
   nao precisa aprender que uma delas se comporta diferente.

   NAO usar `display: contents` aqui. Ele some com a caixa do <details> para
   que summary e opcoes virem itens diretos do flex da pilha — parece elegante
   e quebra o proprio widget: o clique no <summary> deixa de alternar em parte
   dos navegadores. O grupo E um item da pilha; modelar como item resolve o
   espacamento sem mexer no comportamento nativo. */
.acao-grupo { display: block; }

.acao-grupo > summary {
  cursor: pointer;
  list-style: none;
}
.acao-grupo > summary::-webkit-details-marker { display: none; }

/* A seta gira: e o unico aviso de que esta caixa ABRE em vez de sair da
   pagina. Sem isso ela e indistinguivel de um link comum. */
.acao-grupo > summary .chev { transition: transform .15s ease; }
.acao-grupo[open] > summary .chev { transform: rotate(90deg); }
.acao-grupo[open] > summary { border-color: var(--red); }

.acao-opcoes {
  display: flex; flex-direction: column; gap: 7px;
  margin: 7px 0 0; padding-left: 16px;
  border-left: 2px solid var(--line);
}

.acao-opcao {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 13px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
  text-decoration: none; color: var(--ink);
  transition: border-color .12s ease;
}
.acao-opcao:hover { border-color: var(--red); }
.acao-opcao .acao-icone { width: 32px; height: 32px; border-radius: 9px; }
.acao-opcao .acao-titulo { flex: 1; font-size: 13.5px; }

@media (prefers-reduced-motion: reduce) {
  .acao-grupo > summary .chev { transition: none; }
}

.acao-verificada {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 0; padding: 12px 14px;
  border-radius: 14px;
  background: var(--green-bg); color: var(--green);
  font-size: 12px; line-height: 1.4; text-align: center;
}

/* ------------------------------------------------------ dossie: os fatos */

.facts {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px 14px;
  padding: 0 24px 18px;
}
.fact-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 3px;
}
.fact-value { font-size: 13px; font-weight: 600; line-height: 1.3; margin: 0; }
.fact-extra {
  display: block; font-weight: 400; font-size: 11px; color: var(--ink-soft); margin-top: 1px;
}

.divider { height: 1px; background: var(--line); margin: 20px 24px; }

/* Cada secao da ficha some sozinha quando nao tem dado, e ai sobram traços
   colados. Colapsar aqui evita repetir na view o "esta vazio?" que cada
   component ja sabe responder — duas fontes da mesma regra divergem. */
.divider + .divider { display: none; }

.address {
  margin: 0 24px 20px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 13px; line-height: 1.5;
  display: flex; gap: 10px;
}
.address svg { flex-shrink: 0; margin-top: 2px; color: var(--red); }
.address .muted { color: var(--ink-soft); font-size: 11.5px; margin: 2px 0 0; }

/* A coordenada e a precisao dela.
   Mono porque e dado, nao prosa — e porque numero em fonte de texto com
   larguras diferentes fica torto quando duas fichas sao comparadas. */
.address .coord {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 8px 0 0;
}
.coord-par {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: #fff; border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 7px;
}
/* Cinza por padrao: coordenada da via nao merece o mesmo destaque da porta.
   A cor E o dado — verde so quando a precisao e do imovel. */
.coord-precisao {
  font-size: 10.5px; color: var(--ink-soft);
  background: var(--grey-bg);
  border-radius: 100px; padding: 3px 9px;
}
.coord-precisao.exata { background: var(--green-bg); color: var(--green); }

.section-eyebrow {
  padding: 0 24px 12px; margin: 0;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
  /* E um <h2> (titulo de secao, para leitor de tela e para robo), mas
     continua parecendo o rotulo discreto de sempre. */
  font-weight: 500; line-height: 1.4;
}

/* Tags semanticas sem o visual padrao do navegador: <dl>/<dd>, <ul>/<li>,
   <address>, <section>. As classes fazem o desenho; as tags dizem o que e. */
.secao { margin: 0; padding: 0; }
.facts, .extra-fields { margin: 0; }
.facts dd, .extra-row dd { margin: 0; }
.facts dt, .extra-row dt { margin: 0; }
.qsa, .unidades, .relacionados { list-style: none; margin: 0; }
.unidades li { display: flex; flex-direction: column; }
.address { font-style: normal; }

/* --------------------------------------------------------------- galeria */

.gallery { display: flex; gap: 8px; padding: 0 24px 22px; overflow-x: auto; }

.gallery figure { margin: 0; flex-shrink: 0; }
.gallery img {
  display: block;
  width: 92px; height: 92px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--surface);
}
.gallery figcaption {
  font-size: 10px; color: var(--ink-soft);
  margin-top: 5px; max-width: 92px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------------------------------------------------------- dados extras */

.extra-fields { padding: 0 24px 22px; display: flex; flex-direction: column; gap: 12px; }
.extra-row {
  display: flex; justify-content: space-between; gap: 14px; font-size: 13px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.extra-row:last-child { border-bottom: none; padding-bottom: 0; }
.extra-row .k { color: var(--ink-soft); flex-shrink: 0; }
.extra-row .v { text-align: right; font-weight: 600; }

/* ------------------------------------------------------------------- faq */

.faq { padding: 0 24px 22px; display: flex; flex-direction: column; gap: 8px; }
.faq details {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--surface);
}
.faq summary {
  font-size: 13px; font-weight: 600; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: 'IBM Plex Mono', monospace; color: var(--red); font-size: 16px;
  flex-shrink: 0;
}
.faq details[open] summary::after { content: "–"; }
.faq p { font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; margin: 10px 0 0; }

/* ------------------------------------------------------------------- QSA */

.qsa { padding: 0 24px 22px; display: flex; flex-direction: column; gap: 10px; }
.qsa-linha {
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px;
}
.qsa-linha:last-child { border-bottom: none; padding-bottom: 0; }
.qsa-nome { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.qsa-meta { font-size: 11.5px; color: var(--ink-soft); }
.qsa-nota { margin: -10px 24px 22px; font-size: 11.5px; color: var(--ink-soft); line-height: 1.5; }

/* -------------------------------------------------------------- unidades */

.unidades { padding: 0 24px 22px; display: flex; flex-direction: column; gap: 8px; }
.unidade {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 11px 14px;
  text-decoration: none; color: var(--ink);
}
.unidade:hover { border-color: var(--red); }
.unidade-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.unidade-tipo { font-size: 12.5px; font-weight: 600; }
.unidade-cnpj { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--ink-soft); }
.unidade-local { font-size: 12px; color: var(--ink-soft); }
.unidade-inativa {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  background: var(--grey-bg); color: var(--grey);
  padding: 2px 7px; border-radius: 100px; margin-left: 6px;
}

/* -------------------------------------------------------------- anuncio */

.anuncio-ficha {
  margin: 0 24px 22px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}
.anuncio-rotulo {
  display: block;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft);
  padding: 7px 12px;
}
.anuncio-ficha img { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------- links internos */

.relacionados {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0 24px 22px;
}
.relacionados a {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 100px; padding: 8px 14px;
  font-size: 12.5px; text-decoration: none; color: var(--ink);
}
.relacionados a:hover { border-color: var(--red); color: var(--red); }
.relacionados .sem-link {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 100px; padding: 8px 14px;
  font-size: 12.5px; color: var(--ink-soft);
}

/* ------------------------------------------------------------- precificacao */

.pricing {
  margin: 0 24px 22px;
  border-radius: 14px;
  padding: 16px;
  background: linear-gradient(135deg, #fff6ea, #fdeecb);
  border: 1px solid var(--gold);
}
.pricing-title { font-size: 13px; font-weight: 700; margin: 0 0 3px; }
.pricing-sub { font-size: 11.5px; color: var(--ink-soft); margin: 0 0 12px; line-height: 1.5; }
.pricing-opts { display: flex; gap: 10px; }
.pricing-opt {
  flex: 1; text-align: center; border-radius: 10px; padding: 10px 8px;
  background: #fff; border: 1px solid var(--line);
  text-decoration: none; color: inherit;
  display: block;
}
.pricing-opt.best { border-color: var(--gold); box-shadow: 0 6px 14px -10px rgba(232, 169, 58, 0.6); }
.pricing-tag {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .05em;
  color: #a8791c; text-transform: uppercase; margin: 0 0 4px;
}
.pricing-price { font-size: 17px; font-weight: 800; margin: 0; font-family: 'Archivo', sans-serif; }
.pricing-period { font-size: 10.5px; color: var(--ink-soft); margin: 0; }

/* ---------------------------------------------------------------- rodape */

.footer { padding: 6px 24px 24px; text-align: center; }
.footer p {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--ink-soft);
  line-height: 1.6; margin: 0;
}
.footer a { color: var(--red); font-weight: 600; }

/* ------------------------------------------------ horario de funcionamento */
/* "Aberto agora" e a conveniencia; a tabela e a informacao. O dia de hoje
   fica em negrito para o olho achar a linha sem ler as sete. */
.horarios-ficha { display: flex; flex-direction: column; gap: 10px; margin: 0 0 6px; padding: 0 24px 18px; }
.horarios-estado {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.horarios-estado .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.horarios-estado.aberto { color: var(--green, #1f7a4d); }
.horarios-estado.fechado { color: var(--ink-soft, #6b625b); }
.horarios-tabela { border-collapse: collapse; font-size: 14px; max-width: 360px; }
.horarios-tabela th { text-align: left; font-weight: 500; padding: 4px 18px 4px 0; color: var(--ink-soft, #6b625b); }
.horarios-tabela td { padding: 4px 0; }
.horarios-tabela tr.hoje th, .horarios-tabela tr.hoje td { font-weight: 700; color: var(--ink, #1a1613); }

/* ================================================================ desktop */
/* A partir de 900px a ficha vira DUAS colunas: a identidade (avatar, nome,
   selos, numeros, acoes) a esquerda, fixa enquanto o dossie rola a direita.
   Ate aqui o cartao de 462px ficava sozinho no meio de uma tela de 1900px:
   dois tercos de vazio, e a ficha inteira lida por um canudo. As mesmas
   secoes, a mesma ordem — so a geometria muda. */
@media (min-width: 900px) {
  .page { max-width: 1080px; padding: 0 24px 64px; }

  .topo-ficha { padding-top: 20px; margin-bottom: 16px; }

  .ficha-grade {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    align-items: start;
  }
  .ficha-identidade {
    position: sticky; top: 20px;
    border-right: 1px solid var(--line);
    padding-top: 6px;
  }
  .ficha-dossie { padding: 10px 8px 4px; }
  /* O primeiro divisor do dossie separava identidade de dossie na coluna
     unica; em duas colunas a borda ja faz isso. */
  .ficha-dossie > .divider:first-child { display: none; }

  .hero { gap: 18px; padding: 26px 26px 16px; }
  .hero-avatar { width: 84px; height: 84px; font-size: 30px; }
  h1 { font-size: 27px; }
  .hero-categoria { font-size: 10px; }

  /* Quatro fatos em uma linha: a coluna do dossie tem ~650px. */
  .facts { grid-template-columns: repeat(4, 1fr); gap: 16px 18px; }
  .fact-value { font-size: 13.5px; }

  /* Socios e unidades em duas colunas: 30 nomes numa coluna so de 650px
     e uma lista de dois metros. */
  .qsa, .unidades { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; }
  .qsa-linha:last-child, .qsa-linha:nth-last-child(2):nth-child(odd) { border-bottom: none; padding-bottom: 0; }

  .horarios-tabela { max-width: 420px; }
}

/* Telas largas de verdade: a identidade ganha mais ar. */
@media (min-width: 1200px) {
  .ficha-grade { grid-template-columns: 430px minmax(0, 1fr); }
}