/* ==========================================================================
   BASE - reinício, tipografia e elementos globais
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-cabecalho) + var(--e-4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cor-papel);
  color: var(--cor-tinta);
  font-family: var(--fonte-texto);
  font-size: var(--texto-p);
  line-height: var(--entrelinha-texto);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* A barra de rolagem é do navegador, mas a cor dela é do projeto. Fica no
     body, e não no html, porque a página escura troca esse par: com o html em
     auto, o valor do body é o que a janela usa. */
  scrollbar-color: var(--cor-areia) var(--cor-papel);
}

.pagina-interna {
  scrollbar-color: var(--cor-tinta-alta) var(--cor-tinta);
}

/* O laranja da marca vale nos dois terrenos: tinta sobre ele dá 5,9:1. */
::selection {
  background: var(--cor-laranja);
  color: var(--cor-tinta);
}

h1, h2, h3, p, ul, ol, figure, blockquote, address {
  margin: 0;
}

ul, ol { list-style: none; padding: 0; }

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

address { font-style: normal; }

a { color: inherit; }

/* --- Títulos -------------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--fonte-display);
  font-weight: 600;
  line-height: var(--entrelinha-titulo);
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 20, "WONK" 1;
  text-wrap: balance;
}

.titulo-secao {
  font-size: var(--texto-t2);
}

.titulo-secao em {
  font-style: italic;
  font-weight: 300;
}

.paragrafo {
  max-width: var(--medida-leitura);
  color: var(--cor-texto-apoio);
  font-size: var(--texto-p-grande);
}

.paragrafo + .paragrafo { margin-top: var(--e-4); }

/* Quebra decidida no HTML, e não pelo acaso da largura. Em tela estreita as
   partes voltam a correr como texto normal, senão a linha estoura. Mesma
   solução do texto de apoio da abertura. */
.paragrafo--quebrado span { display: block; }

@media (max-width: 30rem) {
  .paragrafo--quebrado span { display: inline; }
}

/* --- Elo de texto --------------------------------------------------------- */

.elo {
  color: var(--cor-brasa);
  text-decoration: none;
  font-weight: 500;
  background-image: linear-gradient(var(--cor-brasa), var(--cor-brasa));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size var(--t-micro) var(--curva-saida);
}

.elo:hover { background-size: 0 1px; }

.elo--claro {
  color: var(--cor-laranja);
  background-image: linear-gradient(var(--cor-laranja), var(--cor-laranja));
}

/* --- Botões --------------------------------------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: var(--e-3) var(--e-8);
  border: 1px solid transparent;
  border-radius: var(--raio-pilula);
  font-family: var(--fonte-texto);
  font-size: var(--texto-p);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--t-micro) var(--curva-saida),
    color var(--t-micro) var(--curva-saida),
    border-color var(--t-micro) var(--curva-saida),
    transform var(--t-micro) var(--curva-saida);
}

.botao--laranja {
  background: var(--cor-laranja);
  color: var(--cor-tinta);
}

.botao--laranja:hover {
  background: var(--cor-laranja-quente);
  transform: translateY(-2px);
}

.botao--linha {
  border-color: var(--cor-tinta);
  color: var(--cor-tinta);
}

.botao--linha:hover {
  background: var(--cor-tinta);
  color: var(--cor-papel);
  transform: translateY(-2px);
}

.botao--linha-clara {
  border-color: var(--cor-borda-clara);
  color: var(--cor-papel);
}

.botao--linha-clara:hover {
  background: var(--cor-papel);
  color: var(--cor-tinta);
}

.botao:active { transform: translateY(0); }

/* --- Foco ----------------------------------------------------------------- */

:where(a, button, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--sombra-foco);
  border-radius: var(--raio-pequeno);
}

/* Toda seção de fundo tinta, mais a fita laranja, inverte o anel. A lista é
   a mesma do terreno alternado descrito no topo de secoes.css. */
.inicio :where(a, button):focus-visible,
.regua :where(a, button):focus-visible,
.eventos :where(a, button):focus-visible,
.videos :where(a, button):focus-visible,
.visite :where(a, button):focus-visible,
.rodape :where(a, button):focus-visible {
  box-shadow: var(--sombra-foco-escuro);
}

/* --- Pular para o conteúdo ------------------------------------------------ */

.pular {
  position: absolute;
  left: var(--e-4);
  top: var(--e-4);
  z-index: 100;
  padding: var(--e-3) var(--e-6);
  background: var(--cor-tinta);
  color: var(--cor-papel);
  border-radius: var(--raio-pilula);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--t-curta) var(--curva-saida);
}

.pular:focus-visible { transform: translateY(0); }

/* --- Pulso do ao vivo -----------------------------------------------------
   Usada no cabeçalho do site e no atalho da página de links. O ponto respira
   devagar: é sinal de transmissão, não chamariz.
--------------------------------------------------------------------------- */

@keyframes pulsar {
  0%, 70%, 100% { transform: scale(1); opacity: 1; }
  35% { transform: scale(1.35); opacity: 0.55; }
}