/* A pagina de resultados: uma tela so, sobre a foto.

   O QUE ESTA FOLHA FAZ
   --------------------

   A composicao usa o fundo escuro com particulas fornecido em 25/09/2026.
   O heroi e compacto, os depoimentos formam
   uma grade de tres colunas com fileiras de altura igual, e a chamada final e
   uma barra apoiada no fio, sem caixa.

   A VERSAO ANTERIOR, E POR QUE ELA SAIU
   -------------------------------------

   Ate 2026-09-22 os cartoes ficavam em `columns`, em cascata, cada um com a
   altura do proprio texto. A decisao tinha motivo - a grade de quatro colunas
   de antes esticava um depoimento de tres linhas ate 620px - e o motivo
   continua valido para quatro colunas. Com tres, e fileiras de altura igual, a
   diferenca entre o mais curto e o mais longo da mesma fileira e o que a
   referencia mostra e o que o Lucas aprovou.

   O QUE NAO MUDA
   --------------

   Nenhum depoimento e encurtado. A referencia corta falas para caber em nove
   cartoes numa tela; aqui sao onze, inteiros, e as fileiras crescem com eles.
   Encurtar o que uma pessoa disse muda o que ela disse.

   AS CORES SAO AS DO SISTEMA
   --------------------------

   Nenhum literal: tudo deriva dos tokens por `color-mix`, entao o painel
   continua no controle. */

.pagina-resultados {
  /* Terracota PURO, e nao `--cor-texto-marca` (que clareia com 20% de areia e
     dava salmao). Pedido do Lucas em 2026-09-22 para a escrita do heroi, e
     estendido aos demais acentos da pagina - aspas, aneis, botao - para a tela
     falar uma cor so. Continua atravessando `--brand-primary`: o painel manda. */
  --rx-acento: var(--marca);
  position: relative;
  isolation: isolate;
}

/* Camada fixa para a imagem manter a proporção durante a leitura da página. */
.pagina-resultados::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
      color-mix(in srgb, var(--cor-fundo) 20%, transparent),
      color-mix(in srgb, var(--cor-fundo) 36%, transparent)
    ), url("../img/legal/rodape-fundo.12842195257b.png") center bottom / cover no-repeat;
}

/* O HEROI, COMPACTO
   ========================================================================== */
.rx-heroi__interno {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: clamp(24px, 4vw, 64px);
  padding-block: clamp(28px, 3.6vw, 52px) clamp(8px, 1.4vw, 20px);
}

/* Sem `max-width` aqui: `ch` neste elemento vale sobre a fonte DELE, 16px, e
   estrangulava a manchete. Cada filho limita a propria medida na propria
   escala. */
.rx-heroi__texto {
  min-width: 0;
}

.rx-heroi .sobrancelha {
  margin-bottom: var(--espaco-3);
  color: var(--rx-acento);
}
/* A referencia nao tem o traco antes da sobrancelha; aqui ele sai. */
.rx-heroi .sobrancelha::before { display: none; }

.rx-heroi__titulo {
  margin: 0;
  max-width: 15ch;
  color: var(--cor-texto);
  font-size: clamp(2.5rem, 4.6vw, 4.125rem);
  font-weight: 760;
  line-height: .98;
  letter-spacing: -.045em;
}

.rx-heroi__acento {
  display: block;
  color: var(--rx-acento);
}

.rx-heroi__linha {
  margin: clamp(12px, 1.4vw, 18px) 0 0;
  max-width: 50ch;
  color: var(--cor-texto);
  font-size: var(--fs-18);
  line-height: 1.5;
  text-wrap: pretty;
}

/* A nota lateral. O risco inclinado a esquerda e ornamento, e sai de `::before`:
   uma borda acompanharia a altura inteira e nao teria inclinacao. */
.rx-heroi__nota {
  position: relative;
  margin: clamp(8px, 1vw, 16px) 0 0;
  padding-left: clamp(28px, 3vw, 44px);
  /* Em `rem`, e nao em `ch`: `ch` ignora o `letter-spacing`, que aqui engorda
     cada letra; com `22ch` a frase quebrava em cinco linhas em vez de tres. */
  max-width: 15rem;
  color: var(--cor-texto);
  font-size: .8125rem;
  font-weight: var(--peso-forte);
  line-height: 1.85;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.rx-heroi__nota::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 2px;
  width: 1px;
  height: calc(100% - 4px);
  background: color-mix(in srgb, var(--rx-acento) 80%, transparent);
  transform: skewX(-22deg);
}

/* A GRADE DE DEPOIMENTOS
   =============================================================================
   `grid`, e nao `columns`. Tres colunas; cada fileira tem a altura do mais alto
   dela, que e o que a referencia mostra. No celular, uma coluna. */
.fx-depoimentos {
  --dep-fio: color-mix(in srgb, var(--cor-texto) 13%, transparent);
  --dep-fio-vivo: color-mix(in srgb, var(--rx-acento) 70%, transparent);
  /* Quase preto e levemente translucido, como na referencia: e o FUNDO da
     pagina a 82%, e nao a superficie mais clara. Os cartoes assentam sobre a
     foto, e e esta opacidade que sustenta o contraste do texto. Medido. */
  --dep-superficie: color-mix(in srgb, var(--cor-fundo) 82%, transparent);
  --dep-aspas: var(--rx-acento);
  --dep-coluna: 2.625rem;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 16px);
  margin-block: clamp(16px, 1.8vw, 24px) 0;
}

@media (max-width: 62rem) { .fx-depoimentos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .fx-depoimentos { grid-template-columns: minmax(0, 1fr); } }

.fx-depoimentos .cartao--depoimento {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, .9vw, 12px);
  margin: 0;
  padding: clamp(14px, 1.3vw, 18px) clamp(14px, 1.4vw, 20px);
  border: 1px solid var(--dep-fio);
  border-radius: var(--raio-lg);
  background: var(--dep-superficie);
  transition: border-color var(--mov-base) var(--ease-padrao);
}
.fx-depoimentos .cartao--depoimento:hover { border-color: var(--dep-fio-vivo); transform: none; }

/* Autoria e citacao dividem as mesmas duas colunas - o circulo e as aspas na
   estreita, o nome e o texto na larga -, e e isso que alinha as aspas embaixo
   da inicial, como na referencia. */
.fx-depoimentos .depoimento__autoria {
  display: grid;
  grid-template-columns: var(--dep-coluna) minmax(0, 1fr);
  align-items: center;
  gap: 0 var(--espaco-4);
}
.fx-depoimentos .depoimento__inicial {
  width: var(--dep-coluna);
  height: var(--dep-coluna);
  /* Vazado: onze circulos terracota cheios eram a coisa mais pesada da tela. */
  border: 1px solid var(--dep-fio-vivo);
  background: transparent;
  color: var(--rx-acento);
  font-size: var(--fs-16);
  font-weight: var(--peso-forte);
}
.fx-depoimentos .depoimento__nome {
  margin: 0;
  font-size: var(--fs-15);
  font-weight: var(--peso-semi);
  color: var(--cor-texto);
}
.fx-depoimentos .cartao__meta { margin: 2px 0 0; font-size: .75rem; color: var(--cor-texto-suave); }

.fx-depoimentos .depoimento__texto {
  display: grid;
  grid-template-columns: var(--dep-coluna) minmax(0, 1fr);
  gap: 0 var(--espaco-4);
  margin: 0;
  font-size: .875rem;
  line-height: 1.52;
  color: var(--cor-texto-suave);
  text-wrap: pretty;
}
/* As aspas sao ornamento tipografico, nao conteudo: um leitor de tela que as
   anunciasse leria aspa antes de cada depoimento, onze vezes. Na coluna
   estreita, alinhadas pelo topo da primeira linha do texto. */
.fx-depoimentos .depoimento__texto::before {
  content: "\201C";
  justify-self: center;
  margin-top: -.04em;
  font-size: 2.875rem;
  line-height: .9;
  font-weight: 800;
  color: var(--dep-aspas);
  speak: never;
}

/* O RESPIRO ANTES DO RODAPE
   =============================================================================
   112 px entre o ultimo depoimento e a linha de cima do rodape, na tela de
   Lucas (1095 px, bancada de ajuste de 25/09); proporcional a largura, com
   piso no celular. A barra de chamada que ocupava este lugar saiu no mesmo
   dia, a pedido dele. */
.pagina-resultados main { padding-bottom: clamp(3rem, 10.25vw, 7rem); }

@media (max-width: 62rem) {
  .rx-heroi__interno { grid-template-columns: minmax(0, 1fr); }
  .rx-heroi__nota { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-depoimentos .cartao--depoimento { transition: none; }
}
@media (forced-colors: active) {
  .pagina-resultados::before { display: none; }
  .fx-depoimentos .cartao--depoimento { border-color: CanvasText; }
  .fx-depoimentos .depoimento__texto::before { color: CanvasText; }
  .rx-heroi__nota::before { background: CanvasText; }
}

@media print {
  .pagina-resultados::before { display: none; }
}