@charset "utf-8";
/* ==========================================================================
   Milênio, YinYang
   Direção "Virada": a página é o yin-yang. Cada seção inverte o par preto e
   branco, e o verde é a única coisa que atravessa os dois lados sem mudar de
   valor, porque muda de papel.

   Três cores no sistema inteiro. Nenhum cinza fora do alfa da própria tinta,
   nenhuma sombra, nenhum degradê que misture cor.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTES, auto-hospedadas. Nunca Google Fonts por CDN (regra 9.1).
      Os OFL.txt de cada família estão em assets/fontes/.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Instrument Serif";
  src: url("../assets/fontes/instrument-serif-latin-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../assets/fontes/instrument-serif-latin-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../assets/fontes/barlow-condensed-latin-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../assets/fontes/barlow-condensed-latin-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../assets/fontes/barlow-condensed-latin-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../assets/fontes/barlow-condensed-latin-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fontes/ibm-plex-mono-latin-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* Reservas com métrica ajustada, para o swap não dar salto.
   PENDENTE: os size-adjust abaixo são estimados e precisam ser MEDIDOS no
   navegador antes de publicar. */
@font-face {
  font-family: "Serifa reserva";
  src: local("Georgia"), local("Times New Roman"), local("serif");
  size-adjust: 88%; ascent-override: 88%; descent-override: 22%; line-gap-override: 0%;
}
@font-face {
  font-family: "Condensada reserva";
  src: local("Arial Narrow"), local("Helvetica Neue Condensed"), local("system-ui");
  size-adjust: 82%; ascent-override: 96%; descent-override: 24%; line-gap-override: 0%;
}
@font-face {
  font-family: "Mono reserva";
  src: local("Consolas"), local("Menlo"), local("monospace");
  size-adjust: 94%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Cor. Três valores, e só três. */
  --sinal: #a1fea0;            /* accent único. Luminância medida 0,810 */
  --preto: #000;
  --branco: #fff;

  /* Escala de tinta: o contorno é uma escala paralela à tipográfica */
  --tinta-1: 2px;
  --tinta-2: 3px;
  --tinta-3: 6px;

  /* Espaço */
  --e1: .5rem; --e2: 1rem; --e3: 1.5rem; --e4: 2rem; --e5: 3rem; --e6: 5rem;
  --col: 1440px;          /* alargado a pedido: o texto ocupa mais a página */
  --pad-x: clamp(1.25rem, 5vw, 4.5rem);   /* margem que sobra dos dois lados */
  --medida: min(72ch, 100%);              /* medida do texto corrido, centrada */
  --medida-curta: min(52ch, 100%);        /* para descrição e legenda */
  --gap: 1.5rem;
  --secao-y: clamp(4.5rem, 9vw, 8rem);
  --arco: clamp(3.5rem, 6vw, 10rem);
  --raio-cartao: 25px;
  --raio-pill: 100px;
  --pad-cartao: 2rem;
  --barra-h: 56px;

  /* Tipografia. Piso e teto em rem para obedecer ao zoom de texto (WCAG 1.4.4).
     Nenhum clamp com piso ou teto em px em lugar nenhum do projeto. */
  --t-hero:  clamp(3.5rem, 13vw, 9rem);
  --t-h2:    clamp(2.5rem, 7vw, 5.5rem);
  --t-h3:    clamp(1.625rem, 3.2vw, 2.75rem);
  --t-cit:   clamp(1.5rem, 3.6vw, 2.875rem);
  --t-num:   clamp(2.5rem, 8vw, 6.5rem);
  --t-corpo: clamp(1.1875rem, .95rem + .9vw, 1.375rem);
  --t-ui:    1rem;
  --t-rot:   clamp(.6875rem, .64rem + .18vw, .8125rem);

  /* Famílias */
  --f-display: "Instrument Serif", "Serifa reserva", Georgia, serif;
  --f-ui: "Barlow Condensed", "Condensada reserva", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", "Mono reserva", ui-monospace, monospace;

  /* Movimento */
  --desl: 24px;
  --dur-entrada: 520ms;
  --dur-ui: 180ms;
  --dur-ui-lento: 240ms;
  --saida: cubic-bezier(0.23, 1, 0.32, 1);
  --tela: cubic-bezier(0.77, 0, 0.175, 1);

  /* Barra de rolagem do estúdio (ferramentas/barra-rolagem).
     Ela flutua sobre preto puro e branco puro na mesma rolagem, que é o caso
     exato da regra 9.25: corpo resolve o lado claro, halo resolve o escuro. */
  --barra-cor: #000;                     /* 21:1 contra o branco */
  --barra-halo: rgba(161, 254, 160, .92);/* composto #94ea93, 14,45:1 contra o preto */
  --barra-recuo: 8px;
}

/* --------------------------------------------------------------------------
   3. SUPERFÍCIE MANDA NA COR, NÃO O COMPONENTE (regra 9.8).
      Nenhum componente escreve o verde nem o preto direto.
   -------------------------------------------------------------------------- */

.painel--escuro {
  --fundo: #000;
  --tinta: #fff;
  --tinta-fraca: rgba(255, 255, 255, .62);  /* composto #9e9e9e, 7,84:1 */
  --regua: rgba(255, 255, 255, .22);
  --acento-tinta: var(--sinal);             /* aqui o verde PODE ser texto */
  --foco: #fff;
  --contorno-forma: 0px;
  -webkit-font-smoothing: antialiased;
}
.painel--claro {
  --fundo: #fff;
  --tinta: #000;
  --tinta-fraca: rgba(0, 0, 0, .62);        /* composto #616161, 6,19:1 */
  --regua: rgba(0, 0, 0, .18);
  --acento-tinta: #000;                     /* aqui o verde NUNCA é texto */
  --foco: #000;
  --contorno-forma: var(--tinta-1);         /* toda forma verde ganha contorno */
  -webkit-font-smoothing: auto;
}

/* --------------------------------------------------------------------------
   4. BASE
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  background: #000;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #000;
  color: #fff;
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: var(--t-corpo);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

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

/* Alvo de âncora não nasce embaixo da barra fixa */
[id] { scroll-margin-block-start: calc(var(--barra-h) + 1.5rem); }

/* Foco: 21:1 nos dois fundos. Nunca verde, porque o mesmo componente
   aparece nos dois painéis e o verde só passa em um. */
:focus-visible {
  outline: 3px solid var(--foco, #fff);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

.oculto-visual {
  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;
}

.pular {
  position: absolute; inset-block-start: -100vh; inset-inline-start: var(--pad-x);
  z-index: 100; background: var(--sinal); color: #000;
  font-family: var(--f-ui); font-weight: 700; font-size: var(--t-ui);
  text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
  padding: .75rem 1.25rem; border-radius: var(--raio-pill);
  --foco: #fff;
}
.pular:focus { inset-block-start: calc(var(--barra-h) + .5rem); }

/* --------------------------------------------------------------------------
   5. LAYOUT DE SEÇÃO
   -------------------------------------------------------------------------- */

.painel {
  background: var(--fundo);
  color: var(--tinta);
  position: relative;
}

.coluna {
  max-inline-size: var(--col);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.secao { padding-block: var(--secao-y); }

/* ==========================================================================
   COMPOSIÇÃO CENTRADA
   A página inteira é centrada, e a medida de leitura é larga. Centrar texto
   longo só funciona com a linha equilibrada, então `text-wrap: balance` nos
   títulos e `pretty` no corpo não são enfeite, são o que impede a linha órfã.
   ========================================================================== */

.painel { text-align: center; }

.coluna > *,
.corpo,
.h2 { margin-inline: auto; }

/* Rótulo em mono: a voz de etiqueta do sistema */
.rotulo {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: var(--t-rot);
  text-transform: uppercase;
  letter-spacing: .2em;
  margin: 0;
}
/* O tracking joga a última letra para fora do alinhamento óptico */
.rotulo > span:last-child { margin-inline-end: -.2em; }

.rotulo--sinal { color: var(--acento-tinta); }
.rotulo--fraco { color: var(--tinta-fraca); }

h1, h2, h3 { margin: 0; text-wrap: balance; }

.h2 {
  text-align: center;
  text-wrap: balance;
  max-inline-size: 20ch;
  font-family: var(--f-display);
  /* A Instrument Serif só existe em 400: este 700 é o negrito sintético do
     navegador. Conferido lado a lado com as alternativas, e nesta face ele
     engrossa a haste sem achatar o filete, então o contraste da didona
     sobrevive. Varia um pouco entre navegadores, e em título isso é aceitável.
     Se um dia entrar uma serifa com negrito de verdade, é trocar aqui. */
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: .94;
  letter-spacing: -.015em;
  font-feature-settings: "case" 1;
  margin-block: 0 var(--e5);
}

.corpo {
  font-size: var(--t-corpo);
  line-height: 1.55;
  max-inline-size: var(--medida);
  text-align: center;
  text-wrap: pretty;
  margin-block: 0 var(--e3);
}
.corpo:last-child { margin-block-end: 0; }

/* --------------------------------------------------------------------------
   7. BARRA FIXA
   -------------------------------------------------------------------------- */

.barra {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  block-size: var(--barra-h);
  background: #000;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--e2);
  padding-inline: var(--pad-x);
  --foco: #fff;   /* a barra não é painel: precisa declarar o próprio foco */
}
.barra::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 1px;
  background: var(--sinal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-ui-lento) var(--tela);
}
.rolou .barra::after { transform: scaleX(1); }

.barra__marca {
  display: inline-flex;
  align-items: center;
  color: #fff;
  justify-self: start;
  padding: 6px;
  margin: -6px;
}
.barra__marca svg { block-size: 22px; inline-size: 32.35px; }

.barra__lema {
  justify-self: center;
  color: var(--sinal);
  white-space: nowrap;
}

.barra__nav {
  justify-self: end;
  display: flex;
  gap: var(--e3);
}
.barra__nav a {
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: var(--t-ui);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  position: relative;
}
.barra__nav a::after {
  content: "";
  position: absolute;
  inset-block-end: 10px;
  inset-inline: 0;
  block-size: 2px;
  background: var(--sinal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--tela);
}
.barra__nav a:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) {
  .barra__nav a:hover::after { transform: scaleX(1); }
}

@media (max-width: 720px) {
  :root { --barra-h: 48px; }
  .barra { grid-template-columns: auto 1fr; }
  .barra__nav { display: none; }
  .barra__lema { justify-self: end; }
}
@media (max-width: 420px) {
  .barra__lema { display: none; }
}

/* --------------------------------------------------------------------------
   8. BOTÃO: a prensa de tinta.
      Profundidade sem uma sombra sequer. É prensa, não flutuação.
   -------------------------------------------------------------------------- */

.botao {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 48px;
  padding: .5rem 1.75rem;
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: var(--t-ui);
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
  color: var(--texto-botao);
  background: transparent;
  transition: transform var(--dur-ui) var(--saida);
}

/* A superfície do botão e a chapa atrás dele são as duas pseudo, e não o
   fundo do próprio elemento. Motivo medido: `will-change: transform` cria
   contexto de empilhamento, e dentro dele um filho com z-index negativo
   pinta ACIMA do fundo do elemento. Com o fundo no elemento, a chapa verde
   cobria o botão inteiro e o texto branco caía para 1,22:1. */
.botao::before {            /* a chapa deslocada, registro fora de esquadro */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background: var(--chapa);
  transform: translate(6px, 6px);
  transition: transform var(--dur-ui) var(--saida);
}
.botao::after {             /* a superfície do botão */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--superficie);
  border: var(--tinta-1) solid var(--traco);
}
.botao { border-radius: var(--raio-pill); }

/* Canto vivo. A chapa e a superfície herdam o raio, então basta zerar aqui. */
.botao--reto { border-radius: 0; }
.botao > * { position: relative; z-index: 1; }

.botao--principal {
  --superficie: var(--sinal);
  --texto-botao: #000;
  --chapa: var(--tinta);
  --traco: transparent;
}
.painel--claro .botao--principal { --traco: #000; }

.botao--vazado {
  --superficie: var(--fundo);
  --texto-botao: var(--tinta);
  --chapa: var(--sinal);
  --traco: var(--tinta);
}

.botao:focus-visible { transform: translate(4px, 4px); }
.botao:focus-visible::before { transform: translate(2px, 2px); }
@media (hover: hover) {
  .botao:hover { transform: translate(4px, 4px); }
  .botao:hover::before { transform: translate(2px, 2px); }
}
.botao:active { transform: translate(6px, 6px); transition-duration: 90ms; }
.botao:active::before { transform: translate(0, 0); transition-duration: 90ms; }

.botoes { display: flex; flex-wrap: wrap; gap: var(--e3); }

/* Link em texto */
.elo {
  color: var(--tinta);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.painel--escuro .elo { text-decoration-color: var(--sinal); }
.painel--claro .elo { text-decoration-color: #000; }

/* --------------------------------------------------------------------------
   9. ABERTURA
      Dois olhos ladeiam o título, inclinados e mirando a frase. A frase é uma
      mistura de três vozes tipográficas de propósito, porque o disco se chama
      YinYang: condensada pesada (punho), serifa itálica em caixa baixa (sopro)
      e serifa romana em caixa alta (monumento).
   -------------------------------------------------------------------------- */

/* A abertura é uma faixa preta de tela cheia com a frase do grupo
   atravessando a largura. `overflow: clip` não é enfeite: o canvas do efeito
   de vidro é 11% mais largo que o texto de cada lado, para a distorção ter
   para onde entortar, e sem o corte isso vira barra de rolagem na página. */
.abertura {
  min-block-size: 100svh;
  display: grid;
  place-items: center;
  padding-block: calc(var(--barra-h) + clamp(1.5rem, 4vw, 3rem));
  overflow: clip;
  position: relative;
  isolation: isolate;
  --raios-forca: .8;
}
.abertura__frase {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--f-display);
  /* A Instrument Serif só existe em 400: este 700 é o negrito sintético, o
     mesmo que os h2 usam. */
  font-weight: 700;
  /* 0,103 da largura da janela. O número saiu de medição: em caixa alta, nesta
     face, a frase de 22 caracteres rende 8,898 vezes o corpo em tinta, então
     0,103 x 8,898 = 0,917 da janela — cheia o bastante para atravessar, com
     sobra suficiente para a distorção não ser cortada na borda. Sem teto: a
     frase acompanha a tela em qualquer tamanho. */
  font-size: 10.3vw;
  line-height: 1;
  letter-spacing: -.015em;
  /* Caixa alta. O `case` deixa de ser detalhe e passa a ser obrigatório: é ele
     que baixa o circunflexo do Ê para a altura de versal. */
  text-transform: uppercase;
  font-feature-settings: "case" 1;
  color: var(--tinta);
  text-align: center;
}

.abertura__raios {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
  background: var(--fundo);
  pointer-events: none;            /* não rouba clique nem seleção de texto */
  /* A força mora AQUI, no invólucro, e não no `video`. Estava no vídeo, e o
     quadro parado do movimento reduzido — que é fundo do invólucro — saía com
     força cheia: mais claro do que a versão que se mexe, justo para quem pediu
     menos. Como o fundo do invólucro é o mesmo preto da seção, a composição
     dá no mesmo para o vídeo. */
  opacity: var(--raios-forca);
}
.abertura__raios video {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* A metade escura é baixa e larga, e `cover` centrado cortaria fora
     justamente o núcleo dos raios, que nasce no topo do quadro. */
  object-position: 50% 0;
}

@media (prefers-reduced-motion: reduce) {
  .abertura__raios video { display: none; }
  .abertura__raios {
    background-image: url("../assets/video/raios-parado.jpg");
    background-position: 50% 0;
    background-size: cover;
    background-repeat: no-repeat;
  }
}
/* Alto contraste do Windows: o sistema manda na cor, e imagem de fundo atrás
   de texto é justamente o que ele está tentando eliminar. */
@media (forced-colors: active) {
  .abertura__raios { display: none; }
}



/* Olho, título, olho. Os olhos encolhem antes do título (minmax com 0). */
.abertura__titulo {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, max-content) minmax(0, auto);
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 6.5vw, 9rem);
  inline-size: 100%;
}

.olho { display: block; }
.olho svg {
  display: block;
  inline-size: clamp(3.5rem, 11vw, 13rem);
  block-size: auto;
  color: #fff;
  fill: currentColor;
}
/* O da direita é espelhado, então o par mira o título dos dois lados */
.olho--dir svg { transform: scaleX(-1); }

/* O tilt. Repouso já inclinado; a oscilação é um respiro, não um balanço.
   Só `transform`, e cada olho com fase própria para não pulsarem em uníssono. */
.olho--esq { animation: tilt-esq 2.6s ease-in-out infinite; }
.olho--dir { animation: tilt-dir 2.6s ease-in-out infinite; animation-delay: -.9s; }

@keyframes tilt-esq {
  0%, 100% { transform: rotate(-15deg); }
  50%      { transform: rotate(4deg); }
}
@keyframes tilt-dir {
  0%, 100% { transform: rotate(15deg); }
  50%      { transform: rotate(-4deg); }
}

/* A frase, três vozes */
.abertura__frase {
  display: grid;
  justify-items: center;
  gap: 0;
  color: #fff;
  text-transform: uppercase;
}
.frase__punho {                    /* condensada pesada: o soco */
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: clamp(3rem, 10vw, 9.5rem);
  line-height: .9;
  letter-spacing: -.015em;
}
.frase__sopro {                    /* serifa itálica em caixa baixa: o ar */
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  font-size: clamp(1.5rem, 4.6vw, 4.25rem);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--sinal);
  /* O circunflexo do Ê sobe acima da altura de caixa alta, e com `line-height`
     abaixo de 1 na linha de baixo ele invadia esta aqui: medido, o vão entre a
     tinta das duas era de 0px em 1440, 1280, 721 e 720. A folga sai daqui, e
     não de um `line-height` maior, que afrouxaria o bloco inteiro. */
  margin-block: clamp(.1rem, .5vw, .45rem) clamp(.8rem, 3.2vw, 3rem);
}
.frase__monumento {                /* serifa romana em caixa alta: o monumento */
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(3.25rem, 11.5vw, 11rem);
  line-height: .96;
  letter-spacing: -.005em;
  font-feature-settings: "case" 1;   /* reposiciona o circunflexo do Ê */
}

/* Abaixo de 720px o par de olhos não cabe ladeando: espremeria a frase a menos
   de 12 caracteres por linha. Fica UM olho só, acima de tudo.

   `display: contents` no invólucro do título dissolve a caixa dele, e aí olho e
   frase viram filhos diretos da grade da abertura, o que deixa o `order` levar
   o olho para cima da frase sem mexer na ordem do HTML. */
@media (max-width: 720px) {
  .abertura__titulo { display: contents; }

  .olho--esq { order: -2; margin-block-end: clamp(1.25rem, 4vw, 2rem); }
  .olho--dir { display: none; }
  .olho svg { inline-size: clamp(4rem, 17vw, 6.5rem); }

  .abertura__frase { order: 0; }

}

@media (prefers-reduced-motion: reduce) {
  .olho--esq, .olho--dir { animation: none; }
  .olho--esq { transform: rotate(-9deg); }
  .olho--dir { transform: rotate(9deg); }
}

/* --------------------------------------------------------------------------
   10. A MILÊNIO: régua de totais
   -------------------------------------------------------------------------- */

/* Régua de totais */
.totais {
  list-style: none;
  margin: var(--e6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block-start: var(--tinta-2) solid var(--tinta);
}
.totais li {
  padding: var(--e3) var(--e2) 0 0;
  border-inline-start: 1px solid var(--regua);
  padding-inline-start: var(--e2);
}
.totais li:first-child { border-inline-start: 0; padding-inline-start: 0; }
.totais__n {
  display: block;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: var(--t-num);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: .9;
}
/* A única grandeza sem número troca de família e assume a ausência */
.totais__n--sem-numero {
  font-family: var(--f-display);
  font-style: italic;
  text-transform: none;
  letter-spacing: -.01em;
}
.totais__r { display: block; margin-block-start: var(--e1); }
@media (max-width: 560px) {
  .totais { grid-template-columns: repeat(2, 1fr); row-gap: var(--e4); }
  .totais li:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
}

/* --------------------------------------------------------------------------
   11. OS TRÊS
   -------------------------------------------------------------------------- */

.citacao { margin: 0 0 clamp(2rem, 4vw, 3.5rem); }
.citacao p {
  font-family: var(--f-display);
  font-style: italic;
  font-size: var(--t-cit);
  line-height: 1.14;
  margin: 0;
  color: #fff;
  text-indent: -.5em;
  max-inline-size: 14em;   /* em da PRÓPRIA fonte de exibição, não ch do pai */
}
/* Abre e fecha. A aspa é decoração tipográfica, e o texto entre elas já é
   citação por estar num <figure> com crédito, então as duas ficam fora da
   árvore de acessibilidade para o leitor de tela não anunciar pontuação. */
.citacao p::before,
.citacao p::after {
  font-family: var(--f-mono);
  font-weight: 500;
  color: var(--sinal);
  font-style: normal;
  speak: never;
}
.citacao p::before { content: "\201C"; }
.citacao p::after  { content: "\201D"; }
.citacao figcaption { margin-block-start: var(--e3); }

.trio { display: grid; }

.integrantes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e4);
  inline-size: 100%;
}
.integrante__nome {
  margin: 0;              /* o <p> trazia 1em de margem, e 1em aqui é 59px */
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.125rem, 4.6vw, 4rem);
  letter-spacing: -.01em;
  line-height: 1;
  font-feature-settings: "case" 1;
}
.integrante__meta a {
  padding-block: .28rem;   /* leva o alvo de 19px para 24px (WCAG 2.5.8) */
  display: inline-flex;
  align-items: center;
}
.integrante__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1) var(--e3);
  align-items: baseline;
  margin-block-start: .35rem;
  color: var(--tinta-fraca);
}
.integrante__desde { font-variant-numeric: tabular-nums lining-nums; }

.faixa-vivo {
  margin: var(--e6) 0 0;
  inline-size: 100%;
}
.faixa-vivo img {
  inline-size: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  object-position: center 42%;
  filter: grayscale(1) contrast(1.1);
}
.faixa-vivo figcaption { margin-block-start: var(--e2); }
@media (max-width: 720px) {
  .faixa-vivo img { aspect-ratio: 16 / 10; }
}

/* --------------------------------------------------------------------------
   12. YINYANG, O ÁLBUM
   -------------------------------------------------------------------------- */

.faixas {
  list-style: none;
  margin: var(--e3) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (min-width: 900px) {
  .faixas { grid-template-columns: repeat(8, 1fr); }
}
.faixas li {
  aspect-ratio: 1;
  border: var(--tinta-1) solid #000;
  position: relative;
  /* Paradas duras: cor chapada dentro de contorno, sem mistura e sem degradê */
  background: linear-gradient(135deg, #fff 0 50%, var(--sinal) 50% 100%);
}
.faixas li:nth-child(odd) {
  background: linear-gradient(135deg, var(--sinal) 0 50%, #fff 50% 100%);
}
.faixas__n {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-start: 8px;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: var(--t-rot);
  font-variant-numeric: tabular-nums lining-nums;
  color: #000;
}

/* --------------------------------------------------------------------------
   13. ASSISTA
   -------------------------------------------------------------------------- */

.videos { display: grid; gap: var(--gap); }
@media (min-width: 900px) { .videos { grid-template-columns: 1fr 1fr; } }

.video {
  border: var(--tinta-1) solid var(--regua);
  border-radius: var(--raio-cartao);
  padding: var(--pad-cartao);
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}
.video__n {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: var(--t-num);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: .82;
}
.video__titulo {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-h3);
  line-height: 1.04;
}
.video .botao { margin-block-start: auto; align-self: start; }

/* --------------------------------------------------------------------------
   14. QUEM BANCOU O COMEÇO
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   15. RODAPÉ PARTIDO
      A única seção onde os dois lados aparecem ao mesmo tempo.
   -------------------------------------------------------------------------- */



/* A dobra NÃO recorta: quem recorta é a curva, num invólucro próprio.
   Com overflow: hidden na dobra, o botão que fica em cima da linha de virada
   era cortado ao meio, e o texto preto caía sobre o preto da dobra. */

/* O botão que fica em cima da linha de virada. É o único objeto da página
   idêntico nos dois lados, e o único com foco de duas camadas: cor única
   passaria em uma metade e sumiria na outra (WCAG 2.4.11). */




.redes {
  list-style: none;
  margin: var(--e5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--e2) var(--e4);
}
@media (min-width: 560px) { .redes { grid-template-columns: 1fr 1fr; } }
.redes a {
  display: inline-flex;
  align-items: center;
  min-block-size: 48px;
  font-family: var(--f-ui);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.redes a {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}


/* O rodapé é a única parte da página onde os dois lados aparecem ao mesmo
   tempo. A faixa do meio não tem altura: ela é só a linha onde as metades se
   encontram, e é dela que o lema se pendura. */
.rodape {
  position: relative;
  display: grid;
  grid-template-rows: auto 0 auto;
  /* Corpo do lema. Vive aqui porque as duas metades precisam do valor para se
     afastarem da divisa exatamente o quanto ele avança sobre elas. */
  --lema-corpo: clamp(1.75rem, 4.4vw, 3.5rem);
}
.rodape__metade {
  display: grid;
  place-items: center;
  position: relative;
  padding-inline: clamp(1rem, 3vw, 3rem);
}
/* Cada metade recua da divisa mais do que a metade do corpo do lema, senão o
   texto cai em cima do olho: medido, sem este recuo eram 24px de sobreposição.
   O recuo cresce junto com a frase, que é proporcional à tela. */
.rodape__metade--escura {
  padding-block: clamp(2rem, 4vw, 3.25rem) calc(var(--lema-corpo) * .62 + 1.75rem);
}
.rodape__metade--clara {
  padding-block: calc(var(--lema-corpo) * .62 + 1.75rem) clamp(2rem, 4vw, 3.25rem);
}

.rodape__marca { display: grid; place-items: center; }
.rodape__marca svg { inline-size: clamp(120px, 20vw, 240px); block-size: auto; }
.rodape__metade--escura .rodape__marca svg { color: #fff; }
.rodape__metade--clara  .rodape__marca svg { color: #000; }
.rodape__marca--avesso svg { transform: scaleY(-1); }

.rodape__divisa { position: relative; block-size: 0; z-index: 2; }
.lema { font-size: var(--lema-corpo); }

/* O ano fica centrado, no mesmo eixo da frase logo acima. Era flex com
   space-between de quando havia duas linhas aqui, e com uma só ele espalhava
   os pedaços do texto pela largura inteira. */
.rodape__fim {
  margin-block: clamp(1rem, 2vw, 1.5rem) 0;
  text-align: center;
}

/* --------------------------------------------------------------------------
   16. ENTRADA DE BLOCO
      O estado escondido só existe sob .tem-js, posto no <html> antes da
      primeira pintura. Sem JavaScript a página aparece inteira e estática.
   -------------------------------------------------------------------------- */

.tem-js [data-revelar] {
  opacity: 0;
  transform: translateY(var(--desl));
  transition:
    opacity var(--dur-entrada) var(--saida),
    transform var(--dur-entrada) var(--saida);
  transition-delay: var(--atraso, 0ms);
}
.tem-js [data-revelar].visivel {
  opacity: 1;
  transform: none;
}

/* O rodapé partido não entra animado: ele é a última coisa da página e chega
   junto com o fim da rolagem. A abertura usa o `[data-revelar]` comum. */

/* --------------------------------------------------------------------------
   17. MOVIMENTO REDUZIDO: reduz, não zera.
      O fade continua, o deslocamento some, nenhum bloco fica invisível.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root { --desl: 0px; --dur-entrada: 200ms; }
  html { scroll-behavior: auto; }
  .botao { transition-duration: 90ms; }
}

/* --------------------------------------------------------------------------
   18. ALTO CONTRASTE DO WINDOWS
      A página inteira depende da alternância de fundo, que este modo derruba.
   -------------------------------------------------------------------------- */

/* Alto contraste do Windows: a página inteira depende da alternância de fundo,
   que esse modo derruba. Aqui as formas viram contorno e a chapa do botão sai. */
@media (forced-colors: active) {
      .botao::after,
  .video,
  .mosaico img { border: 1px solid CanvasText; }
  .botao::before { display: none; }
  .faixas li { background: Canvas; }
  :focus-visible { outline: 3px solid Highlight; }
}

/* ==========================================================================
   19. AJUSTES DA COMPOSIÇÃO CENTRADA
      Cada peça que nasceu alinhada à esquerda, recentrada na mão. Regra 9.24:
      nenhuma regra de seção mira elemento nu, para não atropelar componente.
   ========================================================================== */

.rotulo { text-align: center; }

/* Tabela de trajetória */

/* Régua de totais */
.totais li { padding-inline: var(--e2); text-align: center; }
.totais li:first-child { padding-inline-start: var(--e2); }

/* Citação: sem aspas penduradas fora da coluna, que só funciona alinhado */
.citacao { margin-inline: auto; }
.citacao p {
  max-inline-size: min(24em, 100%);
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
  text-indent: 0;
}

/* Os três: foto centrada em cima, nomes centrados embaixo */
.trio { justify-items: center; }
.trio > * { inline-size: 100%; }
.integrantes {
  grid-auto-flow: row;
  justify-items: center;
  inline-size: 100%;
}
@media (min-width: 720px) {
  .integrantes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 3.5rem);
  }
}
.integrante__meta { justify-content: center; }

.faixas { max-inline-size: min(72rem, 100%); margin-inline: auto; }

/* Vídeos */
.videos { max-inline-size: min(68rem, 100%); margin-inline: auto; }
.video { align-items: center; text-align: center; }
.video .botao { align-self: center; }

/* Rodapé */
.redes { justify-items: center; max-inline-size: min(52rem, 100%); margin-inline: auto; }

/* Foto larga centrada, usada em "A Milênio" e em "YinYang" */
.foto-larga {
  margin: var(--e6) auto 0;
  max-inline-size: min(46rem, 100%);
}
.foto-larga img {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 42%;
  border: var(--tinta-3) solid var(--tinta);
  border-radius: var(--raio-cartao);
  filter: grayscale(1) contrast(1.1);
}
@media (max-width: 720px) {
  .foto-larga img { aspect-ratio: 4 / 5; }
}

/* ==========================================================================
   20. LETREIRO ROLANTE
       Importado do projeto do claude.ai/design: o mecanismo é o de lá, dois
       blocos idênticos lado a lado deslizando 50% da própria largura, que é o
       jeito de o laço fechar sem emenda. O desenho foi refeito nos tokens
       daqui: sem `style=` em elemento, sem cor escrita à mão, sem Google Fonts.
   ========================================================================== */

.letreiro {
  overflow: hidden;
  padding-block: clamp(.6rem, 1.4vw, 1.125rem);
  background: var(--faixa-fundo);
  color: var(--faixa-tinta);
  border-block: var(--tinta-1) solid #000;
}
.letreiro--claro {
  --faixa-fundo: #fff;
  --faixa-tinta: #000;
  border-block-start-width: 0;
}
.letreiro--sinal {
  --faixa-fundo: var(--sinal);   /* preto sobre o verde: 17,2:1 */
  --faixa-tinta: #000;
}

.letreiro__trilho {
  display: flex;
  inline-size: max-content;
  animation: letreiro-rola var(--letreiro-dur, 26s) linear infinite;
  will-change: transform;
}

.letreiro__texto {
  white-space: pre;
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: clamp(1.75rem, 4.4vw, 3.5rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.letreiro--sinal .letreiro__texto { font-size: clamp(1.375rem, 3.4vw, 2.75rem); }
/* O par das redes — o verde acima dos links e o branco abaixo — anda no mesmo
   corpo de letra. Sem isto a cópia branca cairia no tamanho padrão do letreiro
   de página, que é maior, e as duas faixas não leriam como uma só moldura. */
.letreiro--redes .letreiro__texto { font-size: clamp(1.375rem, 3.4vw, 2.75rem); }

@keyframes letreiro-rola {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* O avesso corre para o outro lado: os dois juntos são a dualidade do disco
   escrita em movimento. */
.letreiro--avesso .letreiro__trilho { animation-name: letreiro-rola-avesso; }
@keyframes letreiro-rola-avesso {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Par da sonoridade: mais baixo que os letreiros de página, e colado um no
   outro para ler como um bloco só. */
.letreiro--som {
  --letreiro-dur: 32s;
  padding-block: clamp(.4rem, 1vw, .75rem);
  margin-block-start: 0;
}
.letreiro--som .letreiro__texto { font-size: clamp(1.5rem, 3.6vw, 3rem); }
/* Contorno só no verde. O branco entra sem fio nenhum, para não desenhar
   uma linha solta entre o par e a seção preta que vem em seguida. */
.letreiro--som.letreiro--avesso { border-block: 0; }

/* Pausa em quem parou o ponteiro em cima ou chegou por teclado. Não substitui
   o botão de pausar que a WCAG 2.2.2 pede para conteúdo em movimento, e isso
   está anotado na ficha técnica como limitação conhecida. */
@media (hover: hover) {
  .letreiro:hover .letreiro__trilho { animation-play-state: paused; }
}
.letreiro:focus-within .letreiro__trilho { animation-play-state: paused; }

/* Movimento reduzido: o letreiro para de vez. O texto continua legível,
   parado, e não some (a regra é reduzir, não zerar o conteúdo). */
@media (prefers-reduced-motion: reduce) {
  /* Dois seletores, e não um: `.letreiro--avesso .letreiro__trilho` é 0-2-0 e
     atropelaria um `.letreiro__trilho` solto, que é 0-1-0. Media query não
     soma especificidade (regra 9.24). */
  .letreiro .letreiro__trilho,
  .letreiro--avesso .letreiro__trilho { animation: none; }
  .letreiro { text-align: center; }
}

@media (forced-colors: active) {
  .letreiro { border-block: 1px solid CanvasText; background: Canvas; }
  .letreiro__trilho { animation: none; }
}

/* Bloco de botões estacionado no fim da página, provisório */
.botoes--fim {
  justify-content: center;
  margin-block-start: var(--e6);
}
@media (max-width: 720px) {
  .botoes--fim {
    flex-direction: column;
    align-items: stretch;
    inline-size: min(20rem, 100%);
    margin-inline: auto;
    gap: var(--e2);
  }
}

/* ==========================================================================
   21. RETÍCULA (Halftone Reveal)
       Seção inteira, sangrando a coluna. A fotografia fica visível por baixo
       e o canvas só a cobre quando o WebGL2 sobe (`.halftone--ativo`), então
       nunca existe caixa vazia esperando um contexto que não veio.
   ========================================================================== */

.reticula { padding-block: 0 0; }

.halftone {
  position: relative;
  inline-size: 100%;
  block-size: clamp(34rem, 100svh, 74rem);
  overflow: hidden;
  background: var(--sinal);
  cursor: crosshair;
}
.halftone img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.halftone canvas {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  z-index: 1;
}
/* Enquanto o canvas não tem textura, a fotografia é o que se vê */
.halftone canvas { opacity: 0; transition: opacity 320ms var(--saida); }
.halftone--ativo canvas { opacity: 1; }

/* No toque não existe ponteiro parado sobre a arte: a lupa não é oferecida,
   e o cursor de mira também não. */
@media (hover: none), (pointer: coarse) {
  .halftone { cursor: default; }
  /* Quadro alto e estreito com fonte em paisagem cortaria 70% da largura e a
     fotografia viraria textura. Mais baixo, o recorte fica suave. */
  .halftone { block-size: clamp(20rem, 56svh, 28rem); }
}

/* ==========================================================================
   22. GALERIA EM MOSAICO
   ========================================================================== */

.som__rotulo { margin-block: var(--e6) var(--e3); }

.mosaico {
  list-style: none;
  margin: var(--e5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}
.mosaico li { margin: 0; }
.mosaico img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border: var(--tinta-1) solid var(--tinta);
  border-radius: var(--raio-cartao);
  display: block;
}

@media (min-width: 760px) {
  .mosaico {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: clamp(11rem, 17vw, 15rem);
    grid-auto-flow: dense;
  }
  .mosaico__alta { grid-row: span 2; }
  .mosaico__larga { grid-column: span 3; }
}
@media (max-width: 759px) {
  .mosaico img { aspect-ratio: 4 / 5; }
  .mosaico__larga img { aspect-ratio: 3 / 2; }
}

/* Seção que encosta na seguinte sem respiro: o letreiro é a última coisa dela
   e o preto da próxima entra colado. */
.secao--cola-no-fim { padding-block-end: 0; }

/* O mosaico entra logo depois dos nomes, no painel escuro */
.mosaico { margin-block-start: var(--e6); }

/* A faixa larga corta muito na vertical: sem enquadrar, o recorte centrado
   pega o tronco e deixa as cabeças de fora. */
.mosaico__larga img { object-position: center 24%; }
@media (min-width: 760px) {
  .mosaico__larga { grid-row: span 2; }   /* 3:1 em vez de 6:1 */
}

/* ==========================================================================
   23. WARP TEXT
       Vidro líquido sobre as duas linhas brancas do título, portado do React
       Bits para WebGL2 puro em js/warp.js.

       O texto real continua no DOM: a tinta só fica transparente depois que o
       canvas sobe (`.warp--ativo`). Sem JavaScript, sem WebGL2, com o contexto
       perdido ou com movimento reduzido, o título aparece nítido e normal.
   ========================================================================== */

[data-warp] { position: relative; display: inline-block; }
/* Dentro do h2 o alvo é um span: ele precisa herdar a caixa do título para o
   canvas medir o tamanho certo. */
.h2__warp { line-height: inherit; }

.warp__tela {
  position: absolute;
  display: block;
  pointer-events: none;   /* o ponteiro é ouvido na seção, não aqui */
  z-index: 1;
}

/* A tinta some só quando há canvas pintando por cima. A seleção de texto
   continua existindo, e o leitor de tela continua lendo o <h1> inteiro. */
.warp--ativo { color: transparent; }

/* Cinto e suspensório: se o alto contraste do Windows entrar depois que o
   efeito já subiu, a tinta volta e o canvas some. O título nunca fica
   invisível. */
@media (forced-colors: active) {
  .warp--ativo { color: CanvasText; forced-color-adjust: none; }
  .warp__tela { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .warp--ativo { color: inherit; }
  .warp__tela { display: none; }
}

/* ==========================================================================
   24. LINKS
       Todos os endereços do grupo, no mesmo formato, numa faixa que ocupa a
       tela inteira. Cada botão estica na própria célula, então a fileira fica
       com todos do mesmo tamanho, sem depender do comprimento da palavra.
   ========================================================================== */

.elos {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  /* Margem curta de propósito: a fileira tem que chegar perto da borda. */
  padding-inline: clamp(.75rem, 2vw, 1.75rem);
}
.elos__grade {
  display: grid;
  /* Duas fileiras de quatro no desktop, por decisão de composição: em fileira
     única os oito ficam estreitos demais para o peso do botão. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.6rem, 1.2vw, 1.125rem);
  inline-size: 100%;
}
@media (min-width: 560px) {
  .elos__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Na grade o botão precisa preencher a célula: `inline-flex` sozinho encolhe
   para o tamanho da palavra e a fileira fica desalinhada. */
.elos__grade .botao {
  display: flex;
  inline-size: 100%;
  padding-inline: 1rem;
}
.elos__grade .botao span { white-space: nowrap; }

/* A cor não alterna por posição: ela diz o que a coisa é. Plataforma do grupo
   fica preta, nome de integrante fica branco. A chapa verde é a mesma nos dois
   e é ela que amarra a fileira.
   Contraste: branco sobre preto e preto sobre branco dão 21:1 nos dois. */
.elos__grade .botao--integrante {
  --superficie: #fff;
  --texto-botao: #000;
  --traco: #fff;
}

/* ==========================================================================
   25. FALE COM A GENTE
       Campo com contorno de tinta, do mesmo jeito das formas da página. Sem
       raio nos campos: o canto vivo é o que separa "coisa para preencher" de
       "coisa para clicar", que são as pílulas.
   ========================================================================== */

.forma {
  max-inline-size: min(52rem, 100%);
  margin-inline: auto;
  text-align: start;
}

.forma__abas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e2);
  margin-block-end: var(--e3);
}
.aba {
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: var(--t-ui);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tinta);
  background: transparent;
  border: var(--tinta-1) solid var(--regua);
  border-radius: 0;
  min-block-size: 48px;
  padding-inline: 1rem;
  cursor: pointer;
  transition: border-color var(--dur-ui) var(--saida);
}
.aba--ativa {
  border-color: var(--tinta);
  background: var(--sinal);
  color: #000;
}
@media (hover: hover) {
  .aba:not(.aba--ativa):hover { border-color: var(--tinta); }
}

.forma__grade { display: grid; gap: var(--e2); }
@media (min-width: 640px) {
  .forma__grade { grid-template-columns: 1fr 1fr; }
}

.campo { display: grid; gap: .3rem; margin: 0 0 var(--e2); text-align: start; }
.campo__rotulo {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: var(--t-rot);
  text-transform: uppercase;
  letter-spacing: .2em;
}
.campo__opcional { color: var(--tinta-fraca); }
.campo__campo {
  font-family: var(--f-ui);
  font-size: var(--t-corpo);
  color: var(--tinta);
  background: var(--fundo);
  border: var(--tinta-1) solid var(--tinta);
  border-radius: 0;
  padding: .625rem .75rem;
  min-block-size: 48px;
  inline-size: 100%;
  transition: box-shadow var(--dur-ui) var(--saida);
}
textarea.campo__campo { min-block-size: 0; resize: vertical; }
.campo__campo:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}
/* Campo recusado pela validação: o contorno engrossa E aparece o texto do
   aviso. Cor sozinha não pode carregar a informação (WCAG 1.4.1). */
.campo__campo[aria-invalid="true"] { border-width: var(--tinta-3); }

.forma__erro {
  outline: none;
  font-family: var(--f-ui);
  font-weight: 500;
  margin: 0 0 var(--e3);
  padding: .75rem 1rem;
  border: var(--tinta-1) solid var(--tinta);
  background: var(--sinal);
  color: #000;
}

.forma__acao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
  margin-block-start: var(--e3);
}
.forma__aviso { text-align: start; margin: 0; }

.botao[disabled] { cursor: not-allowed; opacity: .55; }
.botao[disabled]::before { transform: none; }


/* ==========================================================================
   26. O LEMA PARTIDO PELA DIVISA
       Duas cópias do mesmo texto, empilhadas e recortadas na metade. A de
       cima é branca e só aparece do lado preto; a de baixo é preta e só
       aparece do lado branco. O corte cai exatamente na divisa porque o
       parágrafo é puxado meio corpo para cima a partir dela.

       É a mesma tese do disco: a mesma coisa lida de dois jeitos, dependendo
       do lado em que ela cai.
   ========================================================================== */


.lema {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  transform: translateY(-50%);
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  /* O corpo vem do `--lema-corpo` do rodapé, mais abaixo: uma fonte de verdade
     só, porque o recuo das duas metades é calculado a partir dele. */
  line-height: 1;
  text-align: center;
  pointer-events: none;
}
/* As duas cópias encolhem até o texto e se centram: a caixa de cada uma é o
   que o efeito de vidro usa para medir o canvas, e uma caixa da largura da
   página espalharia a distorção por metros de vazio. */
.lema span { display: block; inline-size: fit-content; margin-inline: auto; }
.lema__baixo { position: absolute; inset-block-start: 0; inset-inline: 0; }

/* O recorte é o que parte a cor na divisa, e os 50% são o que importa. Os
   outros três lados recuam para fora da caixa, senão o recorte comeria junto a
   folga que o efeito de vidro usa para entortar a letra sem cortá-la. */
.lema__cima  { color: #fff; clip-path: inset(-60% -30% 50% -30%); }
.lema__baixo { color: #000; clip-path: inset(50% -30% -60% -30%); }

/* Alto contraste do Windows: recorte e cor fixa não sobrevivem lá. Fica uma
   cópia só, na cor do sistema. */
@media (forced-colors: active) {
  /* 0-2-0 de propósito: `.lema span`, mais acima, é 0-1-1 e venceria estes
     dois. Sem isto o `display: none` não pegava e as duas cópias ficavam
     empilhadas, uma por cima da outra, com o recorte desligado — medido. */
  .lema .lema__cima { clip-path: none; color: CanvasText; }
  .lema .lema__baixo { display: none; }
}