/* trybases.com — o estilo do site inteiro (D45, 15/10/2026).

   Um tamanho para cada coisa, em todas as páginas: no WordPress cada página tinha a sua família
   de classes, e o título principal saía com 48, 56 ou 64 px. As cores são as do tema escuro do
   DS (`assets/ds/colors.css`) e a fonte é a Inter do
   Google Fonts, como no site do WordPress (decisão dele, 15/10: "fonte é a Inter do Google Fonts"),
   sem as variantes do manual.

   Linhas (12/10, decisão dele): contínua só no enquadramento; as internas são tracejadas, menos
   as do FAQ, todas sólidas; a página termina com uma linha de ponta a ponta. */

:root {
  /* tema escuro do manual de identidade (cap. 03, "Tema claro e escuro"; tokens do DS) */
  --fundo: #0E0E10;           /* fundo da página        --color-bg-base */
  --superficie: #141416;      /* superfície             --color-bg-primary */
  --superficie-suave: #1A1A1C;/* superfície suave       --color-bg-secondary */
  --terciaria: #242426;       /* terciária              --color-bg-tertiary */
  --linha: #2B2B2F;           /* borda                  --color-border-gray */
  --texto: #FAFAFA;           /* texto                  --color-text-primary */
  --texto-2: #A8A8AD;         /* texto de apoio         --color-text-secondary */
  --texto-3: #86868B;         /* legenda                --color-text-tertiary */
  --acao: #54A2FF;            /* ação                   --color-accent-default */
  --acao-fundo: #162456B3;    /* fundo de informação    --color-info-muted */
  --aviso: #FF8B1A;           /* atenção                --color-warning-default */
  --aviso-fundo: #441306B3;   /* fundo de atenção       --color-warning-muted */
  --fonte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --barra: 64px;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--barra) + 16px); }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font-family: var(--fonte); font-size: 16px; line-height: 24px; letter-spacing: -0.2px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
h1, h2, h3, h4, h5, h6, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
/* As <img> que o gerador mediu (gerar.py, ajustar_imgs): o width/height do atributo vale só como
   proporção, para reservar o espaço antes de a imagem chegar; o tamanho continua com o CSS de cada
   página. :where() não tem especificidade, então qualquer regra de tamanho ganha desta. */
:where(img[data-medida]) { width: auto; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; }

/* ------------------------------------------------------------ tipografia */
.t-h1 { font-size: 56px; line-height: 64px; letter-spacing: -1.6px; font-weight: 500; color: var(--texto); max-width: 760px; text-wrap: balance; }
.t-h2 { font-size: 32px; line-height: 40px; letter-spacing: -0.72px; font-weight: 500; color: var(--texto); text-wrap: balance; }
.t-h3 { font-size: 24px; line-height: 32px; letter-spacing: -0.3px; font-weight: 500; color: var(--texto); }
.t-h5 { font-size: 17px; line-height: 24px; letter-spacing: -0.21px; font-weight: 500; color: var(--texto); }
.t-h6 { font-size: 16px; line-height: 24px; letter-spacing: -0.2px; font-weight: 500; color: var(--texto); }
.lead { font-size: 18px; line-height: 28px; letter-spacing: -0.2px; color: var(--texto-2); max-width: 720px; text-wrap: pretty; }
.sub, .texto-maior { font-size: 16px; line-height: 24px; letter-spacing: -0.2px; color: var(--texto-2); max-width: 720px; text-wrap: pretty; }
.texto-maior { max-width: 420px; }
.texto { font-size: 15px; line-height: 24px; letter-spacing: -0.2px; color: var(--texto-2); max-width: 460px; text-wrap: pretty; }
.rotulo { font-size: 14px; line-height: 20px; letter-spacing: -0.17px; color: var(--texto-2); }

@media (max-width: 767px) {
  .t-h1 { font-size: 36px; line-height: 42px; letter-spacing: -0.9px; }
  .t-h2 { font-size: 26px; line-height: 34px; letter-spacing: -0.5px; }
  .t-h3 { font-size: 22px; line-height: 30px; }
  .lead { font-size: 16px; line-height: 24px; }
}

/* -------------------------------------------------------- campo de pontos */
/* O fundo do login do produto (pf-pontos do DS, js/pontos.js): o canvas vai para trás do conteúdo.
   .pontos-halo apaga os pontos atrás do texto, no meio, e os deixa mais fortes nas bordas. */
.pf-pontos { position: relative; isolation: isolate; }
.pf-pontos > canvas[data-pontos] { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; pointer-events: none; }
.pontos-halo > canvas[data-pontos] {
  -webkit-mask-image: radial-gradient(ellipse 46% 50% at 50% 50%, transparent 0%, rgba(0,0,0,.25) 55%, #000 100%);
          mask-image: radial-gradient(ellipse 46% 50% at 50% 50%, transparent 0%, rgba(0,0,0,.25) 55%, #000 100%);
}
@media (max-width: 767px) {
  /* no celular o texto ocupa quase a largura toda: o halo fica mais largo e mais baixo */
  .pontos-halo > canvas[data-pontos] {
    -webkit-mask-image: radial-gradient(ellipse 75% 38% at 50% 52%, transparent 0%, rgba(0,0,0,.2) 60%, #000 100%);
            mask-image: radial-gradient(ellipse 75% 38% at 50% 52%, transparent 0%, rgba(0,0,0,.2) 60%, #000 100%);
  }
}

/* ------------------------------------------------------- buraco de minhoca */
/* O túnel de anéis de pontos (estilo/minhoca.js), atrás do conteúdo, como o campo de pontos. */
.minhoca { position: relative; isolation: isolate; }
.minhoca > canvas[data-minhoca] { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; pointer-events: none; }
/* as linhas apagam atrás do texto, no meio, para a frase ler bem em qualquer ponto da rolagem */
.minhoca > canvas[data-minhoca] {
  -webkit-mask-image: radial-gradient(ellipse 32% 28% at 50% 50%, rgba(0,0,0,.18) 30%, rgba(0,0,0,.5) 65%, #000 100%);
          mask-image: radial-gradient(ellipse 32% 28% at 50% 50%, rgba(0,0,0,.18) 30%, rgba(0,0,0,.5) 65%, #000 100%);
}
@media (max-width: 767px) {
  .minhoca > canvas[data-minhoca] {
    -webkit-mask-image: radial-gradient(ellipse 62% 30% at 50% 50%, rgba(0,0,0,.18) 30%, rgba(0,0,0,.5) 65%, #000 100%);
            mask-image: radial-gradient(ellipse 62% 30% at 50% 50%, rgba(0,0,0,.18) 30%, rgba(0,0,0,.5) 65%, #000 100%);
  }
}

/* ------------------------------------------------- faixa "Nas IAs que…" */
/* A faixa das IAs das páginas de Soluções e de Agências (espelhada do WordPress, classes aeo-ias):
   no celular, alinhada à esquerda, como a faixa da Home (pedido dele em 15/10), com o título e os
   logos na mesma margem. A especificidade passa a do CSS de cada página, que carrega depois deste. */
@media (max-width: 767px) {
  .v4 .aeo-ias-bloco .aeo-ias-titulo { text-align: left; }
  .v4 .aeo-ias-bloco .aeo-ias > * { justify-content: flex-start; padding-inline: 16px; }
}
/* até 419 px, "Google AI Overviews" não cabe com folga numa linha na meia coluna: o nome quebra, e as
   duas colunas ficam iguais (sem isso a coluna crescia e a página passava da tela) */
@media (max-width: 419px) {
  .v4 .aeo-ias-bloco .aeo-ias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v4 .aeo-ias-bloco .aeo-ia-nome { white-space: normal; }
}

/* ---------------------------------------------------------------- moldura */
.pagina { display: flex; justify-content: center; border-bottom: 1px solid var(--linha); }
.moldura { display: flex; flex-direction: column; width: 100%; max-width: 1200px; border-inline: 2px solid var(--linha); }
/* Abaixo de 1260 px (o iPad deitado tem 1180) a moldura de 1200 px encostaria na borda: ganha 30 px de
   cada lado, e o cabeçalho e o rodapé acompanham, para o logo e os botões baterem nas linhas. */
@media (max-width: 1260px) { .pagina { padding-inline: 30px; } }
@media (max-width: 1024px) { .pagina { padding-inline: 60px; } }
@media (max-width: 767px) { .pagina { padding-inline: 10px; } }

/* ----------------------------------------------------------------- botões */
.botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.btn { display: inline-block; padding: 10px 15px; border-radius: 10px; font-size: 14px; line-height: 15px; font-weight: 500; text-align: center; white-space: nowrap; transition: background-color .15s; }
.btn-claro { background: var(--texto); color: var(--fundo); }
.btn-claro:hover { background: #E4E4E7; }
.btn-escuro { background: var(--superficie); color: var(--texto); box-shadow: inset 0 0 0 1px var(--linha); }
.btn-escuro:hover { background: var(--terciaria); }

/* ------------------------------------------------------------------- topo */
.topo { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 96px 24px 64px; }
.topo-centro { align-items: center; text-align: center; }
.topo-centro .t-h1, .topo-centro .lead { margin-inline: auto; }
.topo-centro .botoes { justify-content: center; }
/* texto centralizado fora do topo padrão (ex.: o topo com órbitas do Manifesto) */
.centro { text-align: center; margin-inline: auto; }
.lead.centro { max-width: 560px; }
@media (max-width: 767px) { .topo { padding: 64px 16px 40px; } }

/* -------------------------------------------------------------- cartões */
.cartoes { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--linha); }
.cartao { display: flex; flex-direction: column; gap: 8px; padding: 32px 24px; }
.cartao + .cartao { border-left: 1px dashed var(--linha); }
.cartao-icone { display: flex; width: 16px; height: 16px; margin-bottom: 8px; color: var(--texto); }
.cartao-icone svg { width: 100%; height: 100%; }
.cartao-link { transition: background-color .15s; }
.cartao-mais { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; font-size: 14px; line-height: 20px; color: var(--texto); }
@media (max-width: 1024px) {
  .cartoes { grid-template-columns: repeat(2, 1fr); }
  .cartao + .cartao { border-left: 0; }
  .cartao:nth-child(even) { border-left: 1px dashed var(--linha); }
  .cartao:nth-child(n+3) { border-top: 1px dashed var(--linha); }
}
@media (max-width: 767px) {
  .cartoes { grid-template-columns: 1fr; }
  .cartao { padding: 24px 16px; }
  .cartao:nth-child(even) { border-left: 0; }
  .cartao + .cartao { border-top: 1px dashed var(--linha); }
}

/* ------------------------------------------------------- cabeça de seção */
.cab-secao { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 96px 24px 40px; }
@media (max-width: 767px) { .cab-secao { padding: 64px 16px 24px; } }

/* ---------------------------------------------------------------- blocos */
.blocos { display: flex; flex-direction: column; border-bottom: 1px solid var(--linha); }
.bloco { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--linha); }
/* O título do bloco fica parado enquanto a lista da direita rola, e sobe junto quando o bloco acaba (15/10:
   no WordPress isso valia só em Agent Analytics, Agents, Documentos e Site; agora vale em todas). */
.bloco-esq { display: flex; flex-direction: column; gap: 12px; padding: 40px 32px; position: sticky; top: 96px; align-self: start; }
.bloco-dir { display: flex; flex-direction: column; border-left: 1px dashed var(--linha); }
.bloco-item { display: flex; flex-direction: column; gap: 8px; padding: 32px; }
.bloco-item:not(:last-child) { border-bottom: 1px dashed var(--linha); }
/* Com o item inteiro clicável (/legal/, /parceiros/). No fim da página, deixa o respiro antes da linha. */
.bloco-link { transition: background-color .15s; }
.bloco-link:hover, .cartao-link:hover { background: var(--superficie); }
.bloco-link-cab { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.bloco-link-seta { display: flex; flex: 0 0 12px; width: 12px; height: 12px; color: var(--texto-3); transition: color .15s, transform .15s; }
.bloco-link-seta svg { width: 100%; height: 100%; }
.bloco-link:hover .bloco-link-seta, .cartao-link:hover .bloco-link-seta { color: var(--texto); transform: translateX(2px); }
.bloco-link-nota { font-size: 14px; line-height: 20px; letter-spacing: -0.17px; color: var(--texto-3); }
.blocos-links:last-child { margin-bottom: 96px; }
@media (max-width: 767px) {
  .blocos-links:last-child { margin-bottom: 64px; }
  .bloco { grid-template-columns: 1fr; }
  .bloco-esq { padding: 32px 16px 16px; position: static; }
  .bloco-dir { border-left: 0; }
  .bloco-item { padding: 20px 16px; }
  .bloco-item:last-child { padding-bottom: 32px; }
}

/* ------------------------------------------------- grade 2 × 2 com imagem */
.grade-2x2 { display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid var(--linha); }
.grade-celula { display: flex; flex-direction: column; gap: 8px; padding: 40px 32px; min-width: 0; }
.grade-celula:nth-child(even) { border-left: 1px dashed var(--linha); }
.grade-celula:nth-child(n+3) { border-top: 1px dashed var(--linha); }
@media (max-width: 767px) {
  .grade-2x2 { grid-template-columns: 1fr; }
  .grade-celula { padding: 32px 16px; }
  .grade-celula:nth-child(even) { border-left: 0; }
  .grade-celula + .grade-celula { border-top: 1px dashed var(--linha); }
}

/* ------------------------------------------------------------------- IAs */
.ias { display: grid; grid-template-columns: 1fr 1fr; margin-top: 96px; border-block: 1px solid var(--linha); }
.ias-txt { display: flex; flex-direction: column; gap: 12px; padding: 40px 32px; }
.ias-grade { display: grid; grid-template-columns: 1fr 1fr; border-left: 1px dashed var(--linha); }
.ia { display: flex; align-items: center; gap: 12px; padding: 32px; min-width: 0; }
.ia:nth-child(odd) { border-right: 1px dashed var(--linha); }
.ia:nth-child(-n+4) { border-bottom: 1px dashed var(--linha); }
.ia-nome { font-size: 16px; line-height: 24px; letter-spacing: -0.2px; font-weight: 500; color: var(--texto); }
.ia-caixa { display: flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 7px; overflow: hidden; }
.ia-fundo-preto { background: #000; box-shadow: inset 0 0 0 1px var(--linha); }
.ia-fundo-claro { background: #F5F5F5; }
.ia-fundo-perplexity { background: #00808C; }
.ia-fundo-claude { background: #D97757; }
.ia-logo { width: 18px; height: 18px; object-fit: contain; }
.ia-logo-branco { width: 20px; height: 20px; object-fit: contain; filter: invert(1); }
.ia-logo-cheio { width: 28px; height: 28px; object-fit: cover; mix-blend-mode: screen; }
.ia-logo-inteiro { width: 28px; height: 28px; object-fit: cover; }
/* Também no iPad: o texto em cima e a grade das IAs embaixo, na largura toda (os nomes quebravam). */
@media (max-width: 1024px) {
  .ias { grid-template-columns: 1fr; }
  .ias-grade { border-left: 0; border-top: 1px dashed var(--linha); }
}
@media (max-width: 767px) {
  .ias { margin-top: 64px; }
  .ias-txt { padding: 32px 16px; }
  .ia { gap: 10px; padding: 20px 16px; }
  .ia-nome { font-size: 14px; line-height: 20px; }
}

/* --------------------------------------------------------------- chamada */
.chamada { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 48px 40px; margin-top: 96px; border-block: 1px solid var(--linha);
  background: radial-gradient(120% 160% at 100% 100%, var(--terciaria) 0%, var(--superficie) 55%, var(--fundo) 100%); }
/* No fim da página: respiro em cima e embaixo, menos depois do FAQ, que já tem o seu (e sem ele as bordas
   do bloco de cima e da chamada somavam uma linha de 2 px). */
.chamada-final { margin: 96px 0; }
.faq + .chamada-final { margin-top: 0; }
@media (max-width: 767px) {
  .chamada { padding: 40px 16px; margin-top: 64px; }
  .chamada-final { margin: 64px 0; }
  .faq + .chamada-final { margin-top: 0; }
}

/* ------------------------------------------------------------------- FAQ */
.faq { display: flex; padding: 96px 0; margin-top: 96px; border-top: 1px solid var(--linha); }
.faq-lado { flex: 0 0 300px; padding: 24px; }
.faq-lista { flex: 1; min-width: 0; border-top: 1px solid var(--linha); border-left: 1px solid var(--linha); }
.faq-item { border-bottom: 1px solid var(--linha); }
.faq-perg { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 32px; cursor: pointer; list-style: none; font-size: 16px; line-height: 24px; color: var(--texto); }
.faq-perg::-webkit-details-marker { display: none; }
.faq-seta { flex: 0 0 10px; width: 10px; height: 10px; color: var(--texto-2); transition: transform .2s; }
.faq-seta svg, .faq-seta > div { width: 100%; height: 100%; }
.faq-item[open] .faq-seta { transform: rotate(180deg); }
.faq-resp { padding: 0 32px 24px; font-size: 15px; line-height: 24px; color: var(--texto-2); max-width: 760px; }
/* No iPad o título ao lado espremia as perguntas em três linhas: de 1024 px para baixo ele vai para cima. */
@media (max-width: 1024px) {
  .faq { flex-direction: column; gap: 24px; }
  .faq-lado { flex-basis: auto; padding: 0 32px; }
  .faq-lista { border-left: 0; }
}
@media (max-width: 767px) {
  .faq { padding: 64px 0; margin-top: 64px; }
  .faq-lado { padding: 0 16px; }
  .faq-perg { padding: 20px 16px; }
  .faq-resp { padding: 0 16px 20px; }
}

/* ----------------------------------------------------------------- legal */
/* Os documentos (componentes/documento.py): o índice das seções parado à esquerda e o texto numa
   coluna de leitura de 720 px. Do iPad para baixo o índice vira uma caixa que abre, em cima do texto. */
.doc-topo { padding-bottom: 48px; }
a.rotulo:hover { color: var(--texto); }
.doc-data { font-size: 14px; line-height: 20px; letter-spacing: -0.17px; color: var(--texto-3); }
.doc { display: grid; grid-template-columns: 300px minmax(0, 1fr); border-top: 1px solid var(--linha); }
.doc-indice { position: sticky; top: var(--barra); align-self: start; max-height: calc(100vh - var(--barra)); overflow-y: auto; padding: 48px 24px; }
.doc-indice-tit { margin-bottom: 12px; font-size: 13px; line-height: 18px; color: var(--texto-3); }
.doc ol { list-style: none; padding: 0; margin: 0; }
.doc-indice a, .doc-indice-cel a { display: block; padding: 6px 0; font-size: 14px; line-height: 20px; color: var(--texto-2); transition: color .15s; }
.doc-indice a:hover, .doc-indice a[aria-current], .doc-indice-cel a:hover { color: var(--texto); }
.doc-indice-cel { display: none; }
.prosa { min-width: 0; padding: 48px 48px 96px; border-left: 1px dashed var(--linha); font-size: 16px; line-height: 28px; letter-spacing: -0.2px; color: var(--texto-2); }
.prosa > * { max-width: 720px; }
.prosa > :first-child { margin-top: 0; }
.prosa h2 { margin: 56px 0 16px; font-size: 24px; line-height: 32px; letter-spacing: -0.3px; font-weight: 500; color: var(--texto); text-wrap: balance; }
.prosa h3 { margin: 32px 0 12px; font-size: 17px; line-height: 24px; letter-spacing: -0.21px; font-weight: 500; color: var(--texto); }
.prosa p, .prosa ul, .prosa-tabela { margin-bottom: 16px; }
.prosa ul { list-style: disc; padding-left: 20px; }
.prosa li { margin-bottom: 8px; padding-left: 4px; }
.prosa li::marker { color: var(--texto-3); }
.prosa strong { font-weight: 500; color: var(--texto); }
.prosa a { color: var(--texto); text-decoration: underline; text-decoration-color: var(--texto-3); text-underline-offset: 3px; overflow-wrap: anywhere; }
.prosa a:hover { text-decoration-color: var(--texto); }
.prosa code { padding: 1px 6px; border-radius: 6px; background: var(--terciaria); font: 13px/20px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--texto); white-space: nowrap; }
.prosa-tabela { border: 1px solid var(--linha); border-radius: 10px; overflow: hidden; }
.prosa table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 22px; }
.prosa th { padding: 12px 16px; text-align: left; font-weight: 500; color: var(--texto); background: var(--superficie); border-bottom: 1px dashed var(--linha); }
.prosa td { padding: 12px 16px; vertical-align: top; }
.prosa tbody tr + tr > td { border-top: 1px dashed var(--linha); }
@media (max-width: 1024px) {
  .doc { grid-template-columns: minmax(0, 1fr); }
  .doc-indice { display: none; }
  .doc-indice-cel { display: block; margin: 32px 32px 0; border: 1px solid var(--linha); border-radius: 10px; }
  .doc-indice-cel summary { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; cursor: pointer; list-style: none; font-size: 15px; line-height: 22px; color: var(--texto); }
  .doc-indice-cel summary::-webkit-details-marker { display: none; }
  .doc-indice-cel[open] .hdr-chevron { transform: rotate(180deg); }
  .doc-indice-cel ol { padding: 4px 16px 12px; border-top: 1px dashed var(--linha); }
  .prosa { padding: 40px 32px 72px; border-left: 0; }
}
/* No celular cada linha da tabela vira um cartão, com o nome da coluna em cima de cada valor. */
@media (max-width: 767px) {
  .doc-topo { padding-bottom: 32px; }
  .doc-indice-cel { margin: 24px 16px 0; }
  .prosa { padding: 32px 16px 64px; font-size: 15px; line-height: 26px; }
  .prosa h2 { margin-top: 40px; font-size: 20px; line-height: 28px; }
  .prosa-tabela { border: 0; border-radius: 0; overflow: visible; }
  .prosa table, .prosa tbody, .prosa tr, .prosa td { display: block; }
  .prosa thead { display: none; }
  .prosa tbody tr { border: 1px solid var(--linha); border-radius: 10px; }
  .prosa tbody tr + tr { margin-top: 12px; }
  .prosa tbody tr + tr > td { border-top: 0; }
  .prosa tbody tr > td + td { border-top: 1px dashed var(--linha); }
  .prosa td { padding: 10px 16px; }
  .prosa td[data-coluna]::before { content: attr(data-coluna); display: block; margin-bottom: 2px; font-size: 12px; line-height: 16px; color: var(--texto-3); }
}

/* Preferência de cookies (o painel) e o aviso, que o site.js põe no canto da tela até a pessoa escolher. */
.lead-link { color: var(--texto); text-decoration: underline; text-decoration-color: var(--texto-3); text-underline-offset: 3px; }
.pref { margin-bottom: 96px; border-block: 1px solid var(--linha); }
.pref-linha { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 32px 24px; }
.pref-linha + .pref-linha, .pref-acoes { border-top: 1px dashed var(--linha); }
.pref-txt { display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
.pref-txt .texto { max-width: none; }
.pref-txt code { padding: 1px 6px; border-radius: 6px; background: var(--terciaria); font: 13px/20px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--texto); white-space: nowrap; }
.pref-fixo { flex: none; font-size: 14px; line-height: 20px; color: var(--texto-3); }
.pref-acoes { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 24px; }
.pref-status { font-size: 14px; line-height: 20px; color: var(--texto-2); }
.chave { flex: none; position: relative; display: inline-flex; cursor: pointer; }
.chave input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chave-trilho { position: relative; width: 40px; height: 24px; border-radius: 12px; background: var(--terciaria); box-shadow: inset 0 0 0 1px var(--linha); transition: background-color .15s; }
.chave-trilho::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--texto-2); transition: transform .15s, background-color .15s; }
.chave input:checked + .chave-trilho { background: var(--acao); box-shadow: none; }
.chave input:checked + .chave-trilho::after { transform: translateX(16px); background: #fff; }
.chave input:focus-visible + .chave-trilho { outline: 2px solid var(--acao); outline-offset: 2px; }
.ck { position: fixed; left: 24px; bottom: 24px; z-index: 900; display: flex; flex-direction: column; gap: 16px; width: 400px; max-width: calc(100vw - 48px); padding: 20px;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; box-shadow: 0 24px 48px rgba(0, 0, 0, .55); }
.ck-txt { font-size: 14px; line-height: 22px; color: var(--texto-2); }
.ck-txt a, .ck-pref { color: var(--texto); text-decoration: underline; text-decoration-color: var(--texto-3); text-underline-offset: 3px; }
.ck-acoes { display: flex; align-items: center; gap: 8px; }
.ck-pref { margin-left: auto; font-size: 14px; line-height: 20px; }
@media (max-width: 767px) {
  .pref { margin-bottom: 64px; }
  .pref-linha { align-items: flex-start; gap: 16px; padding: 24px 16px; }
  .pref-acoes { padding: 20px 16px; }
  .ck { left: 10px; right: 10px; bottom: 10px; width: auto; max-width: none; padding: 16px; }
  .ck-acoes .btn { flex: 1; }
}

/* ------------------------------------------------------------- cabeçalho */
.hdr { height: var(--barra); background: var(--fundo); }
.hdr-barra { position: fixed; inset: 0 0 auto; height: var(--barra); z-index: 1000; display: flex; justify-content: center;
  background: rgba(14, 14, 16, .72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.hdr-miolo { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; max-width: 1200px; height: var(--barra); position: relative; }
.hdr-logo { flex: 0 0 auto; position: relative; z-index: 3; }
.hdr-logo img { width: 96px; height: auto; }
.hdr-nav { display: flex; align-items: center; justify-content: center; gap: 4px; flex: 1; height: var(--barra); position: relative; }
.hdr-item { height: var(--barra); display: flex; align-items: center; }
.hdr-rotulo { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; font-size: 14px; line-height: 20px; color: var(--texto); position: relative; }
.hdr-rotulo:hover, .hdr-item:focus-within .hdr-rotulo { background: var(--superficie-suave); }
.hdr-chevron { display: flex; width: 10px; height: 10px; color: var(--texto-2); }
.hdr-chevron svg { width: 100%; height: 100%; }
.hdr-link { padding: 6px 12px; border-radius: 8px; font-size: 14px; line-height: 20px; color: var(--texto); white-space: nowrap; }
.hdr-link:hover { background: var(--superficie-suave); color: var(--texto); }
/* o painel abre no hover e no foco; ao sair, espera 300 ms para o mouse que desce na diagonal não fechá-lo */
.hdr-ponte { position: absolute; top: var(--barra); left: 50%; transform: translateX(-50%); width: 720px; padding-top: 3px; z-index: 10;
  visibility: hidden; opacity: 0; transition: opacity .15s, visibility 0s linear 300ms; }
.hdr-ponte-larga { width: 880px; }
.hdr-item:hover .hdr-ponte, .hdr-item:focus-within .hdr-ponte { visibility: visible; opacity: 1; transition-delay: 0s; }
.hdr-item:hover { z-index: 2; }
.hdr-seta { position: absolute; left: 50%; top: calc(100% + 15px); margin-left: -5px; width: 10px; height: 10px; z-index: 11;
  background: var(--superficie); border: 2px solid var(--linha); border-width: 2px 0 0 2px; transform: scaleY(.42) rotate(45deg);
  visibility: hidden; opacity: 0; transition: opacity .15s, visibility 0s linear 300ms; }
.hdr-item:hover .hdr-seta, .hdr-item:focus-within .hdr-seta { visibility: visible; opacity: 1; transition-delay: 0s; }
.hdr-painel { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 16px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; box-shadow: 0 24px 48px rgba(0, 0, 0, .55); }
.hdr-painel-rec { display: flex; }
.hdr-coluna, .hdr-rec-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 0; }
.hdr-rec-col { gap: 0; }
.hdr-rec-dir { display: flex; flex-direction: column; gap: 16px; flex: 2 1 0; min-width: 0; }
.hdr-rec-topo { display: flex; gap: 24px; }
.hdr-grupo { padding: 4px 12px 8px; font-size: 12px; line-height: 16px; color: var(--texto-3); }
.hdr-opcao { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; }
.hdr-opcao:hover { background: var(--superficie-suave); }
.hdr-op-ic { display: flex; align-items: center; justify-content: center; flex: 0 0 36px; height: 36px; border-radius: 8px; background: var(--superficie-suave); color: var(--texto); }
.hdr-op-ic svg { width: 14px; height: 14px; }
.hdr-op-txts { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hdr-op-nome { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--texto); }
.hdr-op-desc { font-size: 13px; line-height: 18px; color: var(--texto-2); }
.hdr-rec-op { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 8px; }
a.hdr-rec-op:hover { background: var(--superficie-suave); }
.sem-link { cursor: default; }
.hdr-rec-op.sem-link .hdr-op-nome { color: var(--texto-2); }
.hdr-rec-destaque { margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--linha); }
.hdr-cartao { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding: 16px; border: 1px solid var(--linha); border-radius: 10px; background-color: var(--superficie); }
.hdr-cartao:hover { border-color: #3A3A3F; }
/* a grade de pontos da home, acesa no canto de cima à direita (14/10) */
.hdr-cartao-pontos {
  background-image: radial-gradient(ellipse 120% 160% at 100% 0%, rgba(20,20,22,0) 0%, rgba(20,20,22,.5) 45%, #141416 85%),
    radial-gradient(circle at 30% 16.67%, rgba(50,50,56,.9) 3.49%, rgba(50,50,56,0) 4.94%),
    radial-gradient(circle at 50% 50%, rgba(50,50,56,.7) 3.49%, rgba(50,50,56,0) 4.94%),
    radial-gradient(circle at 50% 50%, rgba(50,50,56,.75) 21.2%, rgba(50,50,56,0) 30.05%);
  background-size: auto, 40px 24px, 56px 40px, 8px 8px;
}
.hdr-cartao-titulo { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--texto); }
.hdr-cartao-txt { font-size: 13px; line-height: 18px; color: var(--texto-2); }
.hdr-cartao-mais { padding-top: 4px; font-size: 13px; line-height: 18px; color: var(--texto); }
.hdr-acoes { display: flex; align-items: center; gap: 8px; }
.hdr-btn-ghost, .hdr-btn { padding: 8px 12px; border-radius: 8px; font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; }
.hdr-btn-ghost:hover { background: var(--superficie-suave); }
.hdr-btn { padding-inline: 14px; background: var(--texto); color: var(--fundo); }
.hdr-btn:hover { background: #E4E4E7; }
/* celular e tablet: o menu é um <details> em tela cheia, com o "Comece agora" ao lado na barra */
.hdr-mob-acoes { display: none; align-items: center; gap: 8px; }
.hdr-mob-comece { position: relative; z-index: 3; }
.hdr-mob-botao { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; cursor: pointer; list-style: none; position: relative; z-index: 3; color: var(--texto); }
.hdr-mob-botao::-webkit-details-marker { display: none; }
.hdr-mob-botao svg { width: 20px; height: 20px; }
.hdr-mob-fechar, .hdr-mob[open] .hdr-mob-abrir { display: none; }
.hdr-mob[open] .hdr-mob-fechar { display: block; }
/* o backdrop-filter da barra vira o bloco de contenção do `fixed`: a altura tem de ser a da tela, e não "até o fim" */
.hdr-mob-painel { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100dvh; z-index: 2; display: flex; flex-direction: column; padding: 80px 60px 32px; overflow-y: auto; background: var(--fundo); }
.hdr-mob-sec { border-bottom: 1px solid var(--superficie-suave); }
.hdr-mob-sec-cab { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-size: 17px; line-height: 24px; color: var(--texto); cursor: pointer; list-style: none; }
.hdr-mob-sec-cab::-webkit-details-marker { display: none; }
.hdr-mob-sec[open] .hdr-chevron { transform: rotate(180deg); }
.hdr-mob-sec-corpo { display: flex; flex-direction: column; padding-bottom: 12px; }
.hdr-mob-grupo { padding: 12px 0 4px; font-size: 12px; line-height: 16px; color: var(--texto-3); }
.hdr-mob-link { display: block; padding: 10px 0; font-size: 15px; line-height: 22px; color: var(--texto); }
.hdr-mob-link.sem-link { color: var(--texto-3); }
.hdr-mob-topo { display: block; padding: 16px 0; font-size: 17px; line-height: 24px; color: var(--texto); border-bottom: 1px solid var(--superficie-suave); }
.hdr-mob-botoes { display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding-top: 32px; }
.hdr-mob-btn-ghost, .hdr-mob-btn { display: block; padding: 14px 16px; border-radius: 10px; font-size: 15px; line-height: 20px; font-weight: 500; text-align: center; }
.hdr-mob-btn-ghost { border: 1px solid var(--linha); }
.hdr-mob-btn { background: var(--texto); color: var(--fundo); }
/* Abrir e fechar com movimento (pedido dele em 15/10): o painel desce um pouco enquanto aparece, e
   os itens vêm logo atrás, um de cada vez; o ícone gira na troca. Fechar faz o caminho de volta: o
   <details> fecharia na hora, então o site.js põe `fechando`, espera a saída e só então fecha. */
@keyframes hdr-mob-entra { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes hdr-mob-sai { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-12px); } }
@keyframes hdr-mob-item { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes hdr-mob-gira { from { opacity: 0; transform: rotate(-90deg) scale(.6); } to { opacity: 1; transform: none; } }
.hdr-mob[open] .hdr-mob-painel { animation: hdr-mob-entra .32s cubic-bezier(.2, .8, .2, 1) both; }
.hdr-mob[open] .hdr-mob-painel > * { animation: hdr-mob-item .4s cubic-bezier(.2, .8, .2, 1) both; }
.hdr-mob[open] .hdr-mob-painel > :nth-child(2) { animation-delay: .04s; }
.hdr-mob[open] .hdr-mob-painel > :nth-child(3) { animation-delay: .08s; }
.hdr-mob[open] .hdr-mob-painel > :nth-child(4) { animation-delay: .12s; }
.hdr-mob[open] .hdr-mob-painel > :nth-child(5) { animation-delay: .16s; }
.hdr-mob.fechando .hdr-mob-painel { animation: hdr-mob-sai .22s ease-in both; }
.hdr-mob.fechando .hdr-mob-painel > * { animation: none; }
.hdr-mob[open] .hdr-mob-fechar svg, .hdr-mob.usado:not([open]) .hdr-mob-abrir svg { animation: hdr-mob-gira .25s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .hdr-mob .hdr-mob-painel, .hdr-mob .hdr-mob-painel > *, .hdr-mob svg { animation: none !important; }
}
@media (max-width: 1260px) { .hdr-miolo { padding-inline: 30px; } }
@media (max-width: 1024px) {
  .hdr-miolo { padding-inline: 60px; }
  .hdr-nav, .hdr-acoes { display: none; }
  .hdr-mob-acoes { display: flex; }
}
@media (max-width: 767px) {
  .hdr-miolo { padding-inline: 10px; }
  .hdr-mob-painel { padding: 80px 10px 24px; }
}

/* ------------------------------------------------------------------ rodapé */
/* Quatro colunas, como o do WordPress (15/10, "rodapé tem 4 colunas"): o logo e o selo de status na
   primeira; nas outras três, dois andares de grupos. Só entram links que levam a algum lugar. */
.rod { display: flex; justify-content: center; padding: 96px 0 40px; }
.rod-miolo { width: 100%; max-width: 1200px; display: flex; flex-direction: column; gap: 96px; }
.rod-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 24px; }
.rod-marca { grid-row: 1 / span 2; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.rod-logo img { width: 102px; height: auto; }
.rod-grupos { grid-column: 2 / span 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: 72px 24px; }
.rod-tit { margin-bottom: 24px; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--texto); }
.rod-col ul { display: flex; flex-direction: column; gap: 13px; }
.rod-col a, .rod-legal summary { font-size: 14px; line-height: 20px; color: var(--texto-2); }
.rod-col a:hover, .rod-legal summary:hover { color: var(--texto); }
.rod-legal summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.rod-legal summary::-webkit-details-marker { display: none; }
.rod-legal[open] .hdr-chevron { transform: rotate(180deg); }
.rod-legal ul { margin-top: 13px; padding-left: 12px; border-left: 1px solid var(--linha); }
.rod-social a { display: inline-flex; align-items: center; gap: 12px; }
.rod-social svg { width: 18px; height: 18px; fill: currentColor; }
.rod-base { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; font-size: 14px; line-height: 20px; color: var(--texto-2); }
@media (max-width: 1260px) { .rod { padding-inline: 30px; } }
@media (max-width: 1024px) {
  .rod { padding: 72px 60px 32px; }
  .rod-grade { grid-template-columns: 1fr; gap: 48px; }
  .rod-marca { grid-row: auto; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .rod-grupos { grid-column: auto; }
}
@media (max-width: 767px) {
  .rod { padding: 64px 10px 24px; }
  .rod-miolo { gap: 64px; padding-inline: 16px; }
  .rod-grupos { grid-template-columns: 1fr 1fr; gap: 48px 16px; }
}

/* Selo de status (D42): o estado vem da ALTURA da imagem em platform.trybases.com/status.svg —
   40 px online, 20 px com atraso, imagem quebrada fora. A imagem entra como marcador de lista
   (com `content: url()` o Safari desenha o ícone de imagem quebrada). Ver status-site/gerar_status.py. */
.bases-ss { display: inline-block; vertical-align: top; height: 20px; overflow: hidden; }
.bases-ss-trilho { margin-top: -40px; }
.bases-ss-trilho::before { content: ""; display: list-item; list-style: none inside url("https://platform.trybases.com/status.svg"); font-size: 0; line-height: 0; }
.bases-ss-linha { display: flex; align-items: center; gap: 10px; height: 20px; white-space: nowrap; }
.bases-ss-ponto { flex: none; width: 6px; height: 6px; border-radius: 1.5px; background: currentColor; }
.bases-ss-texto { font-size: 14px; line-height: 20px; letter-spacing: 0; color: inherit; }
.bases-ss-online { color: #16C784; }
.bases-ss-atraso { color: #F99C00; }
.bases-ss-fora { color: #FF4D5F; opacity: 0; animation: bases-ss-aparece .3s 4s forwards; }
@keyframes bases-ss-aparece { to { opacity: 1; } }