/* =====================================================================
   A-Players em fatos (/sobre/) · a página para IAs e buscadores
   Só composição: tipografia, cores, placa, pill, botões, marcas de tom e
   listas vêm de design-system/css/aplayers.css. A página segue o padrão
   do site: abertura na noite com o gráfico vivo, o texto numa folha e o
   fechamento na noite com a assinatura e a barra espectral.
   Texto antes de enfeite: a leitura corre em parágrafos, e os componentes
   aparecem só onde organizam (fatos, listas com marca de tom, a placa da
   descrição oficial e a tabela de caminhos). Sem barra lateral colorida.
   ===================================================================== */
html { scroll-padding-top: 24px; -webkit-text-size-adjust: 100%; }
/* a noite é o fundo da página; as classes da noite (ap-night) ficam só na abertura e no fechamento, para a folha usar as cores dela */
body.sobre { margin: 0; min-height: 100vh; overflow-x: clip; background: radial-gradient(circle at 1px 1px, rgba(183, 194, 211, .09) 0 1px, transparent 1.3px) 0 0 / var(--ap-grid) var(--ap-grid), var(--ap-night); }

.sobre__pular { position: absolute; left: 16px; top: -60px; z-index: 10; padding: 10px 14px; border-radius: var(--ap-r-action); background: var(--ap-yellow); color: var(--ap-night-ink); font-weight: 700; text-decoration: none; }
.sobre__pular:focus { top: 16px; }

/* ----------------------------------------------------------- abertura na noite */
.sobre__topo { padding: 22px var(--ap-gutter) clamp(96px, 11vw, 150px); }
.sobre__topo :focus-visible, .sobre__rodape :focus-visible { outline-color: var(--ap-focus); }
.sobre__barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: var(--ap-wrap-w); margin: 0 auto; }
.sobre__logo { flex: none; }   /* o logo não encolhe: cada largura dele é um desenho no pixel */
.sobre__logo img { display: block; width: 152px; height: auto; }
/* em celulares estreitos, o logo e o botão não cabem lado a lado com o logo de 152px: ele vai a 120px
   (em inglês, o botão é mais largo e isso acontece abaixo de 375px de tela) */
@media (max-width: 374px) { html[lang^="en"] .sobre__logo img { width: 120px; } }
@media (max-width: 359px) { .sobre__logo img { width: 120px; } }
.sobre__abre { max-width: var(--ap-wrap-w); margin: clamp(64px, 9vw, 120px) auto 0; }
.sobre__abre > .ap-pill { margin-bottom: 0; }   /* o espaço até o título é o do .sobre__titulo */
.sobre__titulo { margin-top: 26px; color: #fff; font-weight: var(--ap-w-night); }
.sobre__apoio { max-width: 58ch; margin-top: 22px; }
.sobre__acoes { margin-top: 32px; }

/* ----------------------------------------------------------- a folha */
.sobre__folha {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start;
  margin: -56px var(--ap-sheet-inset) 0; padding: clamp(48px, 6vw, 96px) clamp(22px, 6vw, 96px) clamp(64px, 7vw, 112px);
}
.sobre__indice { position: sticky; top: 28px; }
.sobre__indice ol { display: grid; gap: 2px; margin-top: 14px; }
.sobre__indice a { display: block; padding: 5px 0; font: 600 14.5px/1.35 var(--ap-text); color: var(--ap-ink-2); text-decoration: none; transition: color .2s; }
.sobre__indice a:hover { color: var(--ap-ink); }

/* texto corrido: uma coluna de leitura, ritmo entre seções do site */
.sobre__texto { max-width: 70ch; }
.sobre__texto > section + section { margin-top: clamp(72px, 8vw, 112px); }
.sobre__texto .ap-kicker { margin-bottom: 14px; }
.sobre__texto h2 { color: var(--ap-ink); }
.sobre__texto h3 { margin-top: 32px; color: var(--ap-ink); }
.sobre__texto p { margin-top: 16px; font-size: 17px; line-height: 1.7; color: var(--ap-ink-2); }
.sobre__texto h2 + p, .sobre__texto h3 + p { margin-top: 14px; }
.sobre__texto strong { color: var(--ap-ink); }
.sobre__texto a { color: var(--ap-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--ap-tone); transition: text-underline-offset .2s var(--ap-ease); }
.sobre__texto a:hover { text-underline-offset: 2px; }
.sobre__primeiro { font-size: var(--ap-t-lead) !important; color: var(--ap-ink) !important; }

/* fatos: lista de definição em linhas finas, sem caixa */
.fatos { margin-top: 28px; border-top: 1px solid var(--ap-line); }
.fatos > div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--ap-line); }
.fatos dt { font: 700 var(--ap-t-label)/1.55 var(--ap-text); color: var(--ap-ink-2); }
.fatos dd { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ap-ink); }

/* a descrição oficial é o único destaque: a placa da marca no tom amarelo */
.sobre__descricao { margin-top: 24px; padding: 24px 28px 28px; }
.sobre__descricao .ap-label { margin-top: 20px; margin-bottom: 0; }
.sobre__descricao .ap-label:first-child { margin-top: 0; }
.sobre__descricao .sobre__citavel { margin-top: 8px; color: var(--ap-ink); }

/* listas do sistema (ap-bars e ap-ticks) no corpo do texto */
.sobre__lista { margin-top: 20px; }
.sobre__lista.ap-bars span { font-size: 15.5px; line-height: 1.55; }
.sobre__lista.ap-ticks > li { font-size: 16px; line-height: 1.6; }

/* cada plataforma de IA: título com a marca de tom de 9px */
.sobre__plataforma { display: flex; align-items: baseline; gap: 10px; margin-top: 40px !important; }
.sobre__plataforma .ap-mark { transform: translateY(-.1em); }

/* tabela dos caminhos: linhas finas, como os fatos */
.sobre__tabela { margin-top: 24px; overflow-x: auto; }
.sobre__tabela table { width: 100%; border-collapse: collapse; font-size: 16px; }
.sobre__tabela th { padding: 0 16px 12px 0; text-align: left; font: 700 var(--ap-t-label)/1.35 var(--ap-text); color: var(--ap-ink-2); border-bottom: 1px solid var(--ap-line-strong); }
.sobre__tabela td { padding: 13px 16px 13px 0; line-height: 1.5; color: var(--ap-ink-2); border-bottom: 1px solid var(--ap-line); vertical-align: top; }
.sobre__tabela td:last-child { font-weight: 700; color: var(--ap-ink); }

.sobre__pergunta { margin-top: 28px; }
.sobre__pergunta p { margin-top: 8px !important; }

/* ----------------------------------------------------------- fechamento na noite */
.sobre__rodape { padding: clamp(96px, 11vw, 160px) var(--ap-gutter) 40px; }
.sobre__fecho { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; max-width: var(--ap-wrap-w); margin: 0 auto 48px; }
.sobre__assinatura { font: var(--ap-w-night) clamp(38px, 5vw, 76px)/.95 var(--ap-title); letter-spacing: -.045em; color: #fff; }
.sobre__rodape > .ap-spectrum { max-width: var(--ap-wrap-w); margin: 0 auto; }
.sobre__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; max-width: var(--ap-wrap-w); margin: 24px auto 0; font-size: 14px; color: var(--ap-on-night-2); }
.sobre__base a { color: #fff; font-weight: 700; text-underline-offset: 4px; }
/* Preferências de cookies: um botão (abre o painel) com a cara dos links ao lado */
.sobre__cookies { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: #fff; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }

/* ----------------------------------------------------------- telas menores */
@media (max-width: 980px) {
  .sobre__folha { grid-template-columns: minmax(0, 1fr); }
  .sobre__indice { position: static; }
  .sobre__indice ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
}
@media (max-width: 640px) {
  .sobre__indice ol { grid-template-columns: minmax(0, 1fr); }
  .fatos > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sobre__descricao { padding: 20px 20px 22px; }
  /* a tabela de caminhos vira lista no celular: desafio em cima, caminho embaixo, sem rolagem lateral */
  .sobre__tabela table, .sobre__tabela tbody, .sobre__tabela tr, .sobre__tabela td { display: block; }
  .sobre__tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sobre__tabela tbody { border-top: 1px solid var(--ap-line-strong); }
  .sobre__tabela tr { padding: 13px 0; border-bottom: 1px solid var(--ap-line); }
  .sobre__tabela td { padding: 0; border: 0; }
  .sobre__tabela td:last-child { margin-top: 4px; }
}
@media print {
  .ap-vivo__canvas, .sobre__indice, .sobre__pular, .sobre__acoes { display: none !important; }
  body.sobre, .sobre__topo, .sobre__rodape { background: #fff !important; color: #000 !important; }
  .sobre__titulo, .sobre__apoio, .sobre__assinatura { color: #000 !important; }
}

/* e-mails não quebram no hífen do domínio */
.sobre a[href^="mailto:"] { white-space: nowrap; }