/* Port de base.css do Astro + o que o WordPress precisa (alinhamentos, telas de leitor, placeholder). */
html { background: var(--cor-fundo); scroll-behavior: smooth; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte);
  font-weight: var(--peso-normal);
  overflow-x: hidden;
  /* Reserva dos dois fixos do topo: barra de avisos + header. */
  padding-top: calc(var(--altura-topbar) + var(--altura-header-real, var(--altura-header)));
}
body.sem-topo { padding-top: var(--altura-header-real, var(--altura-header)); }

html.menu-aberto, html.mural-aberto { overflow: hidden; }

a { color: var(--cor-link); text-decoration: none; }
a:hover { color: var(--cor-link-hover); }

:focus-visible { outline: 2px solid var(--cor-borda-ativa); outline-offset: 3px; border-radius: var(--raio-1); }
::selection { background: var(--cor-selecao); color: #fff; }

h1 { font-size: var(--texto-titulo-1); font-weight: var(--peso-display); line-height: var(--altura-apertada); letter-spacing: var(--tracking-titulo); }
h2 { font-size: var(--texto-titulo-2); font-weight: var(--peso-display); line-height: var(--altura-apertada); letter-spacing: var(--tracking-titulo); }
h3 { font-size: var(--texto-titulo-3); font-weight: var(--peso-forte); line-height: var(--altura-apertada); letter-spacing: var(--tracking-titulo); }

.rotulo {
  font-size: var(--texto-rotulo);
  font-weight: var(--peso-display);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
}

.conteudo { width: min(100% - var(--gutter) * 2, var(--largura-conteudo)); margin-inline: auto; }

main { position: relative; z-index: 1; flex: 1 0 auto; }
.home { display: flex; flex-direction: column; gap: 0; padding-bottom: var(--esp-transicao-secao); }

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

.pular-para-conteudo {
  position: absolute; left: -9999px; top: var(--esp-2);
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding: var(--esp-2) var(--esp-4); background: var(--cor-superficie-alta);
  border-radius: var(--raio-1); z-index: 100;
}
.pular-para-conteudo:focus { left: var(--esp-4); }

/* Placeholder de imagem (nebulosa) — port de Placeholder.astro */
.placeholder {
  position: relative; display: grid; place-items: center; width: 100%; overflow: hidden; border-radius: var(--raio-2);
  background: radial-gradient(90% 120% at 20% 0%, rgb(126 74 255 / .28), rgb(26 11 61 / .9) 70%), rgb(18 7 38);
  color: var(--cor-texto-suave);
}
.placeholder--16-9 { aspect-ratio: 16 / 9; }
.placeholder--4-3 { aspect-ratio: 4 / 3; }
.placeholder--1-1 { aspect-ratio: 1; }
.placeholder__texto { font-size: var(--texto-rotulo); letter-spacing: var(--tracking-rotulo); text-transform: uppercase; opacity: .7; }

/* Botão pill com o gradiente da marca. Serve para <a> e para <button>: o border: 0 e o font-family: inherit tiram a
   borda "outset" e a fonte do sistema que o navegador dá ao <button>, senão ele aparece com um anel claro em volta. */
.botao {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  min-height: 2.75rem; padding: var(--esp-2) var(--esp-6);
  border: 0; border-radius: var(--raio-pill); background: var(--gradiente-acao); cursor: pointer;
  font-family: inherit; line-height: inherit;
  color: var(--fas-lavanda); font-size: var(--texto-mini); font-weight: var(--peso-forte); white-space: nowrap;
  transition: filter var(--dur-rapida) var(--ease-padrao), transform var(--dur-rapida) var(--ease-padrao);
}
.botao:hover { filter: brightness(1.12); transform: translateY(-1px); color: var(--fas-lavanda); }

/* Campo de formulário genérico (comentários, mural). O rótulo é pequeno e em caixa alta; o input usa --texto-entrada
   para o celular não dar zoom. A versão do thread de comentários só acrescenta o que é dela em single.css. */
.campo { display: grid; gap: var(--esp-2); margin: 0; }
.campo label { font-size: var(--texto-rotulo); letter-spacing: var(--tracking-rotulo); text-transform: uppercase; font-weight: var(--peso-forte); color: var(--cor-texto-suave); }
.campo input[type="text"], .campo input[type="email"], .campo textarea {
  width: 100%; min-height: var(--alvo-toque); padding: var(--esp-2) var(--esp-3);
  border: 1px solid var(--cor-borda); border-radius: var(--raio-1); background: var(--cor-superficie);
  color: var(--cor-texto); font: inherit; font-size: var(--texto-entrada);
}
.campo input:focus-visible, .campo textarea:focus-visible { outline: 2px solid var(--cor-borda-ativa); outline-offset: 1px; }
.campo--privacidade label { display: block; padding-inline-start: var(--esp-6); text-transform: none; letter-spacing: normal; font-weight: var(--peso-normal); font-size: var(--texto-mini); color: var(--cor-texto); }
.campo--privacidade input { float: left; margin-inline-start: calc(-1 * var(--esp-6)); margin-block-start: var(--esp-1); }
.campo--privacidade a { text-decoration: underline; text-underline-offset: 2px; }
/* Empata em especificidade com ".fas-comentarios__form .req" (single.css). Numa empate de especificidade quem
   ganha é a folha carregada depois — aqui, single.css, que carrega depois de base.css. Ou seja: no formulário de
   comentários é a regra de single.css que pinta o asterisco, não esta; esta regra é a única a valer em
   formulários fora do escopo ".fas-comentarios__form" (ex.: o do mural), onde não há empate. Por isso a regra de
   single.css não é redundante: apagá-la achando que sobra trocaria a cor do asterisco dos comentários sem aviso. */
.campo .req { color: var(--cor-acento); }
/* Campo-armadilha para robôs: fora da tela, sem tabulação. */
.fas-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Páginas comuns (arquivo, página, 404) */
.pagina { padding-block: var(--recuo-pagina) var(--esp-12); display: grid; gap: var(--esp-pagina); }
@media (min-width: 48rem) { :root { --recuo-pagina: var(--esp-8); } }
.pagina-cabecalho { display: grid; justify-items: center; gap: var(--esp-3); text-align: center; }
.pagina-cabecalho .etiqueta { color: var(--cor-acento); font-size: var(--texto-mini); }
.pagina-cabecalho .descricao { max-width: 46rem; color: var(--cor-texto-suave); font-size: var(--texto-lead); line-height: 1.5; }
.vazio { text-align: center; color: var(--cor-texto-suave); }
/* Texto só para leitores de tela (ex.: unidade ao lado de um número com ícone). */
.so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Resiliência do conteúdo sem alterar o shell: textos e grades podem encolher. */
main :where(.pagina-cabecalho, .pagina-corpo, .fas-single, .fas-single__conteudo, .portal__corpo) { min-width: 0; }
main :where(.pagina-cabecalho h1, .fas-single__titulo, .prosa) { overflow-wrap: anywhere; }

/* A borboleta pousada abrindo o 404 — mesma cadeia perspective → preserve-3d → asas do rodapé
   (shell.css, @keyframes pouso-*), só que maior. Fica scopada em .pagina-cabecalho para não
   pegar a do rodapé, que está na mesma página e tem tamanho próprio. */
.pagina-cabecalho .pouso {
  display: block; width: clamp(5rem, 14vw, 7.5rem); aspect-ratio: 1;
  perspective: 420px;
  filter: drop-shadow(0 0 10px rgb(150 96 255 / .35));
  animation: pouso-corpo 3.5s ease-in-out infinite;
}
.pagina-cabecalho .camera { display: block; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(-24deg); }
.pagina-cabecalho .pouso .borboleta { display: block; width: 100%; height: 100%; filter: none; }
.pagina-cabecalho .pouso .borboleta svg { width: 100%; height: 100%; }
.pagina-cabecalho .pouso .asa--esq { animation: pouso-asa-esq 3.5s ease-in-out infinite; }
.pagina-cabecalho .pouso .asa--dir { animation: pouso-asa-dir 3.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .pagina-cabecalho .pouso,
  .pagina-cabecalho .pouso .asa--esq,
  .pagina-cabecalho .pouso .asa--dir { animation: none; }
}