/* =========================================================================
   Conexoes que Transformam — Tche Previdencia, 04/11/2026
   Folha unica. Sem framework, sem build.

   Base herdada da LP do Tche na Serra; a identidade e a dos quatro cards e
   quatro e-mails do evento. O sistema visual reaproveita os elementos que
   existem nas pecas, em vez de inventar linguagem nova:
     1. arcos grandes em verde e verde-escuro -> .hero, .secao--verde
     2. selo-pilula inclinado, sobreposto     -> .selo, .pilula
     3. bloco verde atras de uma palavra      -> .destaque
     4. estrela de quatro pontas              -> .hero__estrela
     5. icones amarelos (relogio, local)      -> .pratica__icone
   Tudo chapado: as pecas nao tem grao, sombra pesada nem gradiente.
   ========================================================================= */

/* ---------- 1. Reset -------------------------------------------------- */

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

* {
  margin: 0;
}

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

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* ---------- 2. Tokens ------------------------------------------------- */

:root {
  /* Verde, verde-escuro, amarelo e menta amostrados diretamente das pecas
     (card 1 e card 3), por contagem de pixel. */
  --verde: #00d555;
  --verde-medio: #00b848;
  --verde-escuro: #003f26;
  --verde-noite: #002e1c;
  --menta: #c8edd7;
  --amarelo: #ffc000;
  --amarelo-claro: #ffd04d;

  /* O verde vivo da marca tem contraste de so 1,9:1 sobre branco — serve
     para area chapada e titulo grande, nunca para texto corrido. Texto verde
     sobre fundo claro usa este tom, que passa de 4,5:1. */
  --verde-texto: #007a35;

  /* As pecas sao sobre branco puro. O "papel-fundo" e um menta bem lavado,
     para alternar secoes sem sair da paleta. */
  --papel: #ffffff;
  --papel-fundo: #eef9f2;
  --branco: #ffffff;

  --tinta: #0d2a1d;
  --tinta-suave: #47604f;
  --erro: #a4211b;

  --largura: 1180px;
  --raio: 26px;
  --raio-pequeno: 14px;

  /* Uma familia so, como nas pecas: Plus Jakarta Sans variavel, 400 a 800. */
  --display: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  --corpo: "Plus Jakarta Sans", "Segoe UI", sans-serif;

  --sombra-cartao: 0 20px 44px -30px rgb(10 38 26 / 55%);
  --sombra-alta: 0 30px 70px -34px rgb(0 40 24 / 60%);


  --foco: var(--verde-escuro);
}

/* ---------- 3. Base --------------------------------------------------- */

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-radius: 4px;
}

.oculto-visualmente {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- 4. Layout ------------------------------------------------- */

.limite {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.secao {
  position: relative;
  padding-block: clamp(3.75rem, 8vw, 7rem);
  overflow: hidden;
}

.secao--papel {
  background: var(--papel);
}

.secao--papel-fundo {
  background: var(--papel-fundo);
}

/* Campo verde vivo. Texto em verde-escuro, e nao branco como nas pecas:
   branco sobre este verde da 1,9:1, que passa em card de redes sociais mas
   nao em paragrafo de pagina. Verde-escuro sobre ele da 6,2:1. */
.secao--verde {
  background: var(--verde);
  color: var(--verde-escuro);
  --foco: var(--verde-escuro);
}

/* Arco verde-escuro, como o do card 2 e do e-mail 3, so que no canto
   inferior DIREITO e baixo: aparecem no maximo 10vw dele, que cabem no
   padding de baixo da secao. Precisa ficar longe do texto porque o texto
   aqui e verde-escuro — em cima do arco ele simplesmente sumia (foi o que
   aconteceu na primeira versao, com o arco no canto esquerdo). */
.secao--verde::after {
  content: "";
  position: absolute;
  right: -12vw;
  bottom: -30vw;
  width: 40vw;
  height: 40vw;
  border-radius: 50%;
  background: var(--verde-escuro);
  pointer-events: none;
}

.secao--verde > .limite {
  position: relative;
  z-index: 1;
}

.secao--escuro {
  background: var(--verde-escuro);
  color: var(--branco);
  --foco: var(--verde);
}

.secao--menta {
  background: var(--menta);
}

/* Numeral fantasma no canto da secao: marca editorial, puramente decorativa.
   Onde -webkit-text-stroke nao existe, simplesmente nao aparece. */
.secao[data-numero]::before {
  content: attr(data-numero);
  position: absolute;
  top: -0.14em;
  right: clamp(-0.5rem, 1vw, 2rem);
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(7rem, 17vw, 15rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px currentColor;
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
}

/* ---------- 5. Tipografia de bloco ----------------------------------- */

.titulo-seccao {
  font-size: clamp(1.85rem, 4.2vw, 3rem);
  max-width: 22ch;
}

.titulo-seccao--largo {
  max-width: 34ch;
}

.texto {
  max-width: 62ch;
  display: grid;
  gap: 1.15rem;
  margin-top: 1.75rem;
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
}

.secao--verde .texto {
  color: var(--verde-escuro);
}

.chamada {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.5;
  font-weight: 500;
  max-width: 46ch;
}

/* ---------- 6. Componentes ------------------------------------------- */

/* Pilula de contorno, levemente inclinada — o "Inscricoes abertas" / "Faltam
   poucos dias!" das pecas. Caixa mista e peso normal, como la: em caixa alta
   espacada ela deixava de parecer o selo da campanha. */
.pilula {
  display: inline-block;
  padding: 0.35rem 1.15rem 0.4rem;
  border: 2px solid var(--verde);
  border-radius: 999px;
  background: var(--branco);
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.2;
  color: var(--verde-escuro);
  transform: rotate(-2deg);
}

.secao--verde .pilula {
  border-color: var(--verde-escuro);
}

.secao--escuro .pilula {
  background: transparent;
  color: var(--branco);
}

/* Bloco verde atras da palavra — o "4 de novembro" das pecas. Em cada fundo,
   a combinacao que as proprias pecas usam e que passa de 4,5:1. */
.destaque {
  background: var(--verde);
  color: var(--verde-escuro);
  padding: 0.04em 0.34em 0.1em;
  border-radius: 0.4em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.secao--verde .destaque {
  background: var(--verde-escuro);
  color: var(--verde);
}

.tom-verde {
  color: var(--verde-texto);
}

/* Botao verde chapado com texto verde-escuro. Nas pecas o texto e branco,
   mas branco sobre este verde nao passa de 1,9:1. */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1rem 1.9rem;
  border: 0;
  border-radius: 999px;
  background: var(--verde);
  color: var(--verde-escuro);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 14px 30px -18px rgb(0 213 85 / 75%);
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1),
    background-color 0.22s, color 0.22s, box-shadow 0.22s;
}

.botao:hover {
  background: var(--verde-escuro);
  color: var(--verde);
  transform: translateY(-2px);
  box-shadow: 0 20px 38px -18px rgb(0 63 38 / 70%);
}

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

/* Botao branco sobre campo verde — o "Faca sua inscricao" do e-mail 3. */
.botao--claro {
  background: var(--branco);
  color: var(--verde-escuro);
  box-shadow: 0 14px 30px -18px rgb(0 63 38 / 60%);
}

.botao--claro:hover {
  background: var(--verde-escuro);
  color: var(--branco);
}

.botao--contorno {
  background: transparent;
  border: 2px solid currentColor;
  color: inherit;
  box-shadow: none;
}

.botao--contorno:hover {
  background: rgb(0 63 38 / 8%);
  color: inherit;
  box-shadow: none;
}

.botao--largo {
  width: 100%;
}

.cartao {
  background: var(--branco);
  border: 1px solid rgb(10 38 26 / 8%);
  border-radius: var(--raio);
  padding: clamp(1.5rem, 2.4vw, 2rem);
  box-shadow: var(--sombra-cartao);
}

/* ---------- 7. Hero -------------------------------------------------- */

/* Tres faixas, de cima para baixo, como no card 1:
     topo   branco, com a borda de baixo em arco largo; o verde-escuro do
            fundo do hero aparece nos dois cantos
     selos  atravessam a costura entre o topo e a base
     base   verde vivo, com o canto superior esquerdo em arco grande */
.hero {
  position: relative;
  background: var(--verde-escuro);
  color: var(--verde-escuro);
  overflow: hidden;
  isolation: isolate;
}

.hero__topo {
  background: var(--branco);
  border-radius: 0 0 50% 50% / 0 0 clamp(90px, 16vw, 240px) clamp(90px, 16vw, 240px);
  padding-block: clamp(2rem, 5vw, 3.25rem) clamp(4.5rem, 10vw, 7.5rem);
}

.hero__conteudo {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(1.5rem, 3.4vw, 2.5rem);
}

.hero__organizador {
  height: clamp(2.2rem, 4vw, 2.9rem);
  width: auto;
}

/* A logo ja e o titulo: "Conexoes que" em verde, "transformam" no lettering
   proprio da campanha. Nao ha fonte web para esse lettering, entao ele so
   existe como imagem — o texto alternativo carrega o nome. */
.hero__marca {
  width: clamp(280px, 72vw, 780px);
  height: auto;
}

.hero__publico {
  font-weight: 500;
  font-size: clamp(1.05rem, 2.1vw, 1.375rem);
  line-height: 1.4;
  max-width: 30ch;
}

.hero__selos {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  margin-top: calc(-1 * clamp(2.4rem, 5vw, 3.5rem));
  margin-bottom: calc(-1 * clamp(1.6rem, 3vw, 2.2rem));
  padding-inline: 1rem;
}

.selo {
  display: inline-block;
  padding: 0.45em 1.35em 0.5em;
  border: 2px solid var(--verde);
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.3rem, 3.6vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.selo--claro {
  background: var(--branco);
  color: var(--verde-escuro);
  transform: rotate(-2.5deg);
}

/* Desce sobre a borda de baixo do selo claro e escorrega um pouco para a
   direita, como o "Vagas limitadas!" do card 2. */
.selo--escuro {
  background: var(--verde-escuro);
  color: var(--verde);
  font-size: clamp(1.1rem, 3vw, 1.85rem);
  margin-top: -0.35em;
  transform: translateX(12%) rotate(2deg);
}

.hero__base {
  background: var(--verde);
  border-radius: clamp(140px, 34vw, 520px) 0 0 0 / clamp(120px, 22vw, 340px) 0 0 0;
  padding-block: clamp(4rem, 8vw, 5.5rem) clamp(3rem, 6vw, 4.5rem);
}

.hero__base-interno {
  display: grid;
  justify-items: center;
  gap: clamp(2rem, 4vw, 2.75rem);
  text-align: center;
}

.hero__fatos {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(0.9rem, 2.2vw, 1.75rem);
}

.hero__fatos strong {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  /* Teto de 1.6rem: com 1.9rem a linha encostava nas margens perto de
     1200px, e o "4" de novembro entrava no arco verde-escuro da esquerda. */
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.hero__fatos span {
  display: block;
  margin-top: 0.2rem;
  font-weight: 500;
  font-size: clamp(0.95rem, 1.6vw, 1.0625rem);
}

.hero__estrela svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
  stroke: none;
}

/* Abaixo de ~1150px os tres fatos nao cabem numa linha, e o flex-wrap
   deixava o local sozinho embaixo, com uma estrela solta no fim da linha de
   cima. Entao empilham de vez, e as estrelas viram separadores entre linhas,
   exatamente como no card 4. */
@media (max-width: 72rem) {
  .hero__fatos {
    flex-direction: column;
    gap: 0.9rem;
  }
}

/* ---------- 8. Informacoes praticas ---------------------------------- */

.praticas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2rem, 4vw, 3.25rem);
}

.pratica {
  background: var(--branco);
  border: 1px solid rgb(10 38 26 / 8%);
  border-radius: var(--raio);
  padding: clamp(1.4rem, 2.2vw, 1.85rem);
  box-shadow: var(--sombra-cartao);
  display: grid;
  gap: 0.85rem;
  align-content: start;
}

.pratica__icone {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--amarelo);
  color: var(--verde-escuro);
}

.pratica__icone svg {
  width: 1.4rem;
  height: 1.4rem;
}

.pratica__rotulo {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--verde-escuro);
}

.pratica__valor {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.praticas__nota {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--amarelo);
  color: var(--tinta);
  font-family: var(--display);
  font-weight: 600;
  padding: 0.8rem 1.4rem;
  border-radius: var(--raio-pequeno);
}

/* ---------- 9. Faixa de chamada -------------------------------------- */

.faixa {
  background: var(--amarelo);
  color: var(--tinta);
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
}

.faixa__interno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem;
}

.faixa__titulo {
  font-size: clamp(1.5rem, 3.4vw, 2.35rem);
  max-width: 26ch;
}

.faixa .botao {
  background: var(--verde-escuro);
  color: var(--branco);
  box-shadow: 0 16px 32px -18px rgb(10 38 26 / 80%);
}

.faixa .botao:hover {
  background: var(--verde);
  color: var(--verde-escuro);
}

.faixa__titulo em {
  font-weight: 600;
}

/* ---------- 10. Programacao ------------------------------------------ */

.aviso-grade {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 12%);
  font-size: 0.9375rem;
  color: rgb(255 255 255 / 88%);
}

.grade {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgb(255 255 255 / 20%);
}

.grade__item {
  display: grid;
  grid-template-columns: minmax(4.5rem, 7rem) 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding-block: clamp(1rem, 1.8vw, 1.35rem);
  border-bottom: 1px solid rgb(255 255 255 / 20%);
  position: relative;
}

.grade__hora {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  line-height: 1.1;
  color: var(--verde);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.grade__titulo {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Categoria da atividade, acima do tema. De proposito NAO em verde: a hora
   ja e verde na mesma linha, e duas marcacoes competindo roubam a leitura do
   titulo, que e o que a pessoa procura. */
.grade__etiqueta {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
  color: rgb(255 255 255 / 60%);
  margin-bottom: 0.3rem;
}

.grade__detalhe {
  font-size: 1rem;
  color: rgb(255 255 255 / 78%);
  margin-top: 0.35rem;
}

/* ---------- 11. Formulario ------------------------------------------- */

.inscricao {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.formulario {
  background: var(--papel);
  color: var(--tinta);
  border-radius: clamp(20px, 3vw, 32px);
  padding: clamp(1.5rem, 3.4vw, 2.75rem);
  box-shadow: var(--sombra-alta);
  --foco: var(--verde-escuro);
}

.formulario__campos {
  display: grid;
  gap: 1.15rem;
}

.campo {
  display: grid;
  gap: 0.45rem;
}

.campo__rotulo {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
}

.campo__obrigatorio {
  color: var(--erro);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 2px solid rgb(10 38 26 / 14%);
  border-radius: var(--raio-pequeno);
  background: var(--branco);
  font-size: 1.0625rem;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.campo input:hover,
.campo select:hover,
.campo textarea:hover {
  border-color: rgb(10 38 26 / 26%);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: 0;
  border-color: var(--verde);
  box-shadow: 0 0 0 4px rgb(0 63 38 / 18%);
}

.campo textarea {
  min-height: 6.5rem;
  resize: vertical;
}

.campo--invalido input,
.campo--invalido select,
.campo--invalido textarea {
  border-color: var(--erro);
}

.campo--invalido input:focus,
.campo--invalido select:focus,
.campo--invalido textarea:focus {
  box-shadow: 0 0 0 4px rgb(164 33 27 / 16%);
}

.campo__erro {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--erro);
}

.campo__dica {
  font-size: 0.9375rem;
  color: var(--tinta-suave);
}

/* Honeypot: invisivel para pessoa, preenchivel por robo. Nao usa
   display:none porque parte dos robos ignora campo oculto assim. */
.armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.consentimento {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
  padding: 1.15rem;
  border-radius: var(--raio-pequeno);
  background: rgb(0 63 38 / 7%);
  border: 1px solid rgb(0 63 38 / 16%);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.consentimento input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  accent-color: var(--verde);
}

.consentimento--invalido {
  border-color: var(--erro);
  background: rgb(164 33 27 / 6%);
}

.alerta {
  display: grid;
  gap: 0.35rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--raio-pequeno);
  margin-bottom: 1.5rem;
  border-left: 5px solid;
  font-size: 1rem;
}

.alerta--erro {
  background: rgb(164 33 27 / 8%);
  border-color: var(--erro);
  color: var(--erro);
}

.alerta--ok {
  background: var(--branco);
  border-color: var(--amarelo);
  color: var(--tinta);
}

.alerta__titulo {
  font-family: var(--display);
  font-weight: 600;
}

.confirmacao {
  display: grid;
  gap: 1.1rem;
  justify-items: start;
}

.confirmacao__selo {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--amarelo);
  color: var(--tinta);
  display: grid;
  place-items: center;
}

.confirmacao__selo svg {
  width: 1.6rem;
  height: 1.6rem;
}

.confirmacao__titulo {
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
}

/* ---------- 12. Patrocinadores --------------------------------------- */

/* O mural em si — grade e chip escuro — esta no bloco "Patrocinadores" perto
   do fim do arquivo. Aqui ficou so o aviso de pasta vazia.

   Havia neste ponto a primeira versao do mural: faixa de logos sobre o papel
   claro, com filter: grayscale(1), opacity: 0.7 e o brilho voltando no
   :hover. Quando o mural virou chip escuro, essa versao nao foi removida —
   e ela mirava .patrocinadores img, enquanto a nova mira .patrocinador img
   (singular). Selecores diferentes, mesmo elemento, mesma especificidade:
   o filtro continuava valendo por cima. Logo de patrocinador saia a 70%
   sobre o chip, cinza em vez de branco. Removida. */
.patrocinadores--vazio {
  border: 2px dashed rgb(10 38 26 / 18%);
  border-radius: var(--raio);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  text-align: center;
  color: var(--tinta-suave);
  font-family: var(--display);
  font-weight: 500;
}

/* ---------- 13. Rodape ----------------------------------------------- */

.rodape {
  background: var(--verde-noite);
  color: rgb(255 255 255 / 80%);
  padding-block: clamp(2.75rem, 5vw, 4rem);
  --foco: var(--amarelo);
}

.rodape__interno {
  display: grid;
  gap: 2.25rem;
}

.rodape__marca {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--branco);
}

.rodape__marca span {
  font-weight: 400;
  color: rgb(255 255 255 / 72%);
}

.rodape__reservado {
  border: 1px dashed rgb(255 255 255 / 26%);
  border-radius: var(--raio-pequeno);
  padding: 1rem 1.25rem;
  font-size: 0.9375rem;
  color: rgb(255 255 255 / 62%);
}

.rodape__base {
  border-top: 1px solid rgb(255 255 255 / 14%);
  padding-top: 1.5rem;
  font-size: 0.875rem;
  color: rgb(255 255 255 / 60%);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}

/* ---------- 14. Movimento -------------------------------------------- */

@keyframes surge {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__conteudo > * {
    animation: surge 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  }

  /* Um atraso por filho, em cascata. Hoje sao tres: logo da Tche, logo do
     evento e a linha de publico. Os selos ficam de fora DE PROPOSITO: a
     animacao mexe em transform e apagaria a inclinacao deles. Ao acrescentar
     ou remover um elemento no hero, ajustar esta lista — sem a linha correspondente, o
     elemento novo entra sem atraso e atropela a cascata. */
  .hero__conteudo > *:nth-child(1) {
    animation-delay: 0.05s;
  }
  .hero__conteudo > *:nth-child(2) {
    animation-delay: 0.15s;
  }
  .hero__conteudo > *:nth-child(3) {
    animation-delay: 0.25s;
  }
  .hero__conteudo > *:nth-child(4) {
    animation-delay: 0.35s;
  }
  .hero__conteudo > *:nth-child(5) {
    animation-delay: 0.45s;
  }
  .hero__conteudo > *:nth-child(6) {
    animation-delay: 0.55s;
  }
  .hero__conteudo > *:nth-child(7) {
    animation-delay: 0.65s;
  }

  /* Revelacao no scroll sem uma linha de JavaScript. Onde
     animation-timeline nao existe, o conteudo aparece normalmente. */
  @supports (animation-timeline: view()) {
    .revela {
      animation: surge 1s linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 24%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ---------- 15. Responsivo ------------------------------------------- */

@media (min-width: 60rem) {
  /* Havia aqui um deslocamento decorativo dos cartoes pares
     (transform: translateY(1.75rem)). Foi removido porque disputava a MESMA
     propriedade com a animacao de entrada: o cartao e <article class="pratica
     revela">, e .revela anima transform com fill-mode both, o que sobrepoe
     qualquer transform declarado.

     Quem vence depende do ambiente — se prefers-reduced-motion esta ativo, se
     o navegador suporta animation-timeline, se o elemento ja entrou em cena.
     Resultado: em acesso normal os cartoes apareciam alinhados e por RDP
     apareciam deslocados, o que le como defeito de alinhamento, nao como
     decisao de layout.

     Se a assimetria voltar a ser desejada, aplicar num elemento embrulhando o
     cartao, para as duas regras nao brigarem pela mesma propriedade. */

  .inscricao {
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(2.5rem, 5vw, 5rem);
  }

  .rodape__interno {
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 3rem;
  }

  .rodape__base {
    grid-column: 1 / -1;
  }
}

@media (max-width: 30rem) {
  .secao[data-numero]::before {
    display: none;
  }

  /* Os titulos das palestras passam de 100 caracteres. Na coluna estreita que
     sobra ao lado da hora num celular, um deles virava uma torre de oito
     linhas. Empilhado, o titulo usa a largura toda e a hora funciona como
     cabecalho do item — que e como uma linha do tempo se le mesmo. */
  .grade__item {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
}

/* =========================================================================
   16. Area administrativa
   Mesmos tokens, densidade de ferramenta interna.
   ========================================================================= */

.admin {
  min-height: 100svh;
  background: var(--papel-fundo);
}

.admin__topo {
  background: var(--verde-noite);
  color: var(--branco);
  padding-block: 1.35rem;
  --foco: var(--amarelo);
}

.admin__topo-interno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.admin__marca {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.15rem;
}

.admin__marca span {
  font-weight: 400;
  color: rgb(255 255 255 / 70%);
}

.admin__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.admin__corpo {
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
}

.botao--compacto {
  padding: 0.6rem 1.15rem;
  font-size: 0.9375rem;
  box-shadow: none;
}

.painel {
  background: var(--branco);
  border: 1px solid rgb(10 38 26 / 10%);
  border-radius: var(--raio);
  box-shadow: var(--sombra-cartao);
  overflow: hidden;
}

.painel__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem clamp(1rem, 2vw, 1.5rem);
  border-bottom: 1px solid rgb(10 38 26 / 10%);
}

.painel__total {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}

.painel__total span {
  font-family: var(--corpo);
  font-weight: 400;
  font-size: 1rem;
  color: var(--tinta-suave);
}

.busca {
  display: flex;
  gap: 0.5rem;
}

.busca input {
  padding: 0.6rem 0.9rem;
  border: 2px solid rgb(10 38 26 / 14%);
  border-radius: var(--raio-pequeno);
  min-width: min(18rem, 60vw);
  font-size: 0.9375rem;
}

.busca input:focus {
  outline: 0;
  border-color: var(--verde);
  box-shadow: 0 0 0 4px rgb(0 63 38 / 18%);
}

.tabela-rolagem {
  overflow-x: auto;
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  white-space: nowrap;
}

.tabela th {
  text-align: left;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  padding: 0.85rem 1rem;
  background: var(--papel);
  border-bottom: 1px solid rgb(10 38 26 / 12%);
  position: sticky;
  top: 0;
}

.tabela td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgb(10 38 26 / 8%);
  vertical-align: top;
}

.tabela tbody tr:hover {
  background: rgb(0 63 38 / 5%);
}

.tabela__nome {
  font-weight: 500;
  white-space: normal;
  min-width: 12rem;
}

.tabela__mono {
  font-variant-numeric: tabular-nums;
  color: var(--tinta-suave);
}

.tabela__restricao {
  white-space: normal;
  max-width: 22rem;
  color: var(--tinta-suave);
}

.tabela__vazio {
  padding: clamp(2.5rem, 6vw, 4rem) 1rem;
  text-align: center;
  color: var(--tinta-suave);
}

.paginacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem clamp(1rem, 2vw, 1.5rem);
  border-top: 1px solid rgb(10 38 26 / 10%);
  font-size: 0.9375rem;
  color: var(--tinta-suave);
}

.paginacao__links {
  display: flex;
  gap: 0.5rem;
}

.paginacao__links a,
.paginacao__links span {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgb(10 38 26 / 16%);
  text-decoration: none;
  font-weight: 500;
}

.paginacao__links a:hover {
  background: var(--verde);
  border-color: var(--verde);
  color: var(--branco);
}

.paginacao__links span {
  opacity: 0.45;
}

/* Login */

.login {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: var(--verde-escuro);
  position: relative;
  overflow: hidden;
}


.login__cartao {
  position: relative;
  z-index: 1;
  width: min(26rem, 100%);
  background: var(--papel);
  border-radius: clamp(20px, 3vw, 30px);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  box-shadow: var(--sombra-alta);
  display: grid;
  gap: 1.25rem;
}

.login__titulo {
  font-size: 1.6rem;
}

.login__nota {
  font-size: 0.9375rem;
  color: var(--tinta-suave);
}

/* =========================================================================
   17. Complementos
   ========================================================================= */

/* Link de salto: escondido acima da dobra, desce ao receber foco pelo teclado. */
.pular {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 20;
  padding: 0.8rem 1.35rem;
  background: var(--amarelo);
  color: var(--tinta);
  font-family: var(--display);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--raio-pequeno) var(--raio-pequeno);
  transition: top 0.2s ease-out;
}

.pular:focus {
  top: 0;
}

.assinatura--espacada {
  margin-top: 2rem;
}

.secao--papel .assinatura,
.secao--papel-fundo .assinatura {
  color: var(--tinta-suave);
}

.inscricao .chamada {
  margin-top: 1.25rem;
}

.grade {
  list-style: none;
  padding: 0;
}

.grade__detalhe {
  display: block;
}

/* Marcador na linha do tempo: ponto verde em cima da divisoria. */
.grade__item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--verde);
  opacity: 0.85;
}

.praticas__nota svg,
.aviso-grade svg {
  width: 1.2rem;
  height: 1.2rem;
  flex: none;
}

.praticas__nota {
  flex-wrap: wrap;
}

.rodape__detalhe {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.patrocinadores--vazio code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.875em;
  background: rgb(10 38 26 / 8%);
  padding: 0.1em 0.4em;
  border-radius: 6px;
}

.confirmacao a {
  color: var(--verde-escuro);
  font-weight: 500;
}

.botao--compacto svg {
  width: 1.1rem;
  height: 1.1rem;
}


/* A pilula amarela nao tem contraste sobre o cartao claro do login e da
   pagina de erro; ali ela vira azul. */
.login__cartao .pilula {
  border-color: var(--verde);
  color: var(--verde-escuro);
}

/* O realce amarelo tem padding vertical proprio; com line-height 1.06 o
   bloco de uma linha invade a linha de cima. Titulos de secao ganham
   entrelinha maior — o hero, que nao usa realce, segue apertado. */
.titulo-seccao,
.faixa__titulo {
  line-height: 1.2;
}

/* Numeral fantasma: 8% ficava invisivel sobre papel. */
.secao[data-numero]::before {
  opacity: 0.11;
}

.login__cartao .alerta {
  margin-bottom: 0;
}

/* Aperta as colunas para a data da inscricao caber em 1440px sem rolagem
   horizontal. A tabela continua rolavel em tela menor. */
.tabela th,
.tabela td {
  padding: 0.8rem 0.85rem;
}

.tabela__nome {
  min-width: 9.5rem;
}

.tabela__restricao {
  max-width: 15rem;
}

.tabela__data {
  white-space: normal;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-suave);
  line-height: 1.35;
}

.tabela__hora {
  font-size: 0.875em;
  opacity: 0.8;
}

/* Logo Tche Previdencia em negativo. Altura fixa e largura automatica: o
   arquivo tem 318x69, e travar a altura mantem a proporcao em qualquer lugar
   onde ele apareca. */
.assinatura__logo {
  /* Um pouco mais alto do que o texto que estava aqui antes: o logo empacota
     losangos e tipografia numa proporcao fixa, entao na mesma altura da linha
     o texto sairia menor do que era. */
  height: 2.2rem;
  width: auto;
}

.rodape__marca img {
  height: 2.6rem;
  width: auto;
}

@media (max-width: 30rem) {
  .assinatura__logo {
    height: 1.65rem;
  }
}

/* ---------- Rodape: colunas de contato e redes ----------------------- */

.rodape__titulo {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--verde);
  margin-bottom: 0.9rem;
}

.rodape__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  border-bottom: 1px solid rgb(255 255 255 / 30%);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}

.rodape__link:hover {
  color: var(--verde);
  border-color: var(--verde);
}

.rodape__link svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
}

.redes {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.redes a {
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid rgb(255 255 255 / 28%);
  color: var(--branco);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s,
    transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.redes a:hover {
  background: var(--verde);
  border-color: var(--verde);
  color: var(--verde-escuro);
  transform: translateY(-2px);
}

.redes svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* ---------- Grupo de opcoes (radio) --------------------------------- */

.grupo {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.55rem;
}

.grupo .campo__rotulo {
  padding: 0;
  margin-bottom: 0.2rem;
}

.grupo .campo__erro {
  margin-top: 0.1rem;
}

.opcao {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  padding: 0.8rem 1rem;
  border: 2px solid rgb(10 38 26 / 14%);
  border-radius: var(--raio-pequeno);
  background: var(--branco);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.45;
  transition: border-color 0.18s, background-color 0.18s;
}

.opcao:hover {
  border-color: rgb(0 63 38 / 45%);
}

.opcao input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.18rem;
  accent-color: var(--verde);
}

/* :has permite destacar a opcao escolhida sem JavaScript. Onde nao existe, a
   marcacao do proprio radio ja indica a escolha. */
.opcao:has(input:checked) {
  border-color: var(--verde);
  background: rgb(0 63 38 / 7%);
}

.grupo--invalido .opcao {
  border-color: rgb(164 33 27 / 45%);
}

/* Com a coluna de transporte, a tabela passou a estourar 1440px. A restricao
   alimentar cede espaco: o texto completo continua no title e no CSV. */
.tabela__restricao {
  max-width: 12rem;
}

/* ---------- Patrocinadores ------------------------------------------- */

/* Chip escuro atras de cada logo. Logo de patrocinador costuma vir em
   negativo (branco vazado), que desaparece sobre o papel claro da secao —
   e recolorir marca de terceiro nao e opcao. O chip resolve sem mexer no
   ritmo claro/escuro da pagina. */
.patrocinadores {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.patrocinador {
  background: var(--verde-noite);
  border-radius: var(--raio);
  padding: clamp(1.5rem, 3vw, 2rem);
  display: grid;
  place-items: center;
  min-height: 7rem;
  box-shadow: var(--sombra-cartao);
}

.patrocinador img {
  max-width: 100%;
  max-height: 3.5rem;
  width: auto;
  height: auto;
}

/* Linha "Inscricao gratuita..." ao lado do formulario. */
.assinatura {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9375rem;
}

/* ---------- Selo de vagas, prazo, endereco, aviso da grade ----------- */

/* Bloco amarelo chapado, como na peca de divulgacao: caixa baixa, negrito,
   cantos arredondados. Nao usa .pilula porque aquela e de contorno e serve de
   rotulo de secao — este aqui e alerta. */
.selo-vagas {
  display: inline-block;
  background: var(--amarelo);
  color: var(--tinta);
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  letter-spacing: -0.01em;
  line-height: 1.1;
  padding: 0.4rem 0.9rem 0.5rem;
  border-radius: 12px;
}

/* Endereco no cartao de informacoes praticas: menor e mais leve que o valor,
   para nao competir com ele. */
.pratica__detalhe {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--tinta-suave);
}

/* Prazo de inscricao. Contorno em vez de fundo chapado, para nao brigar com
   o botao no campo verde do formulario. */
.prazo {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.6rem 1.15rem;
  border: 2px solid var(--verde-escuro);
  border-radius: var(--raio-pequeno);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  color: var(--verde-escuro);
}

/* Aviso da programacao no lugar do titulo, enquanto a grade nao existe. */
.aviso-grande {
  font-size: clamp(1.7rem, 3.8vw, 2.6rem);
  line-height: 1.25;
  max-width: 26ch;
  margin-top: 1.25rem;
}


/* ---------- Vagas esgotadas ------------------------------------------ */

.opcao--esgotada {
  opacity: 0.55;
  cursor: not-allowed;
  background: rgb(10 38 26 / 4%);
}

/* Sem o hover de opcao disponivel: a borda mudando de cor sugere que da para
   clicar, e nao da. */
.opcao--esgotada:hover {
  border-color: rgb(10 38 26 / 14%);
}

.opcao__esgotado {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--erro);
}

/* O selo da confirmacao e amarelo; no aviso de esgotado ele nao pode parecer
   comemoracao. */
.confirmacao__selo--esgotado {
  background: rgb(10 38 26 / 8%);
  color: var(--tinta-suave);
}

/* ---------- Cancelamento no painel ----------------------------------- */

.painel--estreito {
  max-width: 46rem;
}

.painel__aviso {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem clamp(1rem, 2vw, 1.5rem);
  background: rgb(0 63 38 / 8%);
  border-bottom: 1px solid rgb(0 63 38 / 20%);
  font-weight: 500;
}

.painel__aviso svg {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--verde-escuro);
  flex: none;
}

.painel__vagas {
  display: block;
  font-family: var(--corpo);
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--tinta-suave);
}

.tag-cancelada {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.5rem 0.15rem;
  border-radius: 999px;
  background: rgb(164 33 27 / 12%);
  color: var(--erro);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 0.1em;
}

/* Cancelada continua legivel: esmaecer demais esconderia justamente a linha
   que alguem foi conferir. */
.tabela__linha--cancelada td {
  opacity: 0.62;
}

.tabela__nome a {
  color: inherit;
  text-decoration-color: rgb(10 38 26 / 35%);
}

.tabela__nome a:hover {
  color: var(--verde-escuro);
}

.detalhe {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: grid;
  gap: 1.5rem;
}

.ficha {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  gap: 0.55rem 1.5rem;
  margin: 0;
  font-size: 0.9375rem;
}

.ficha dt {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  padding-top: 0.15rem;
}

.ficha dd {
  margin: 0;
}

.detalhe__acao {
  display: grid;
  gap: 0.9rem;
  justify-items: start;
  padding-top: 1.25rem;
  border-top: 1px solid rgb(10 38 26 / 10%);
}

.detalhe__aviso {
  font-size: 0.9375rem;
  color: var(--tinta-suave);
  max-width: 52ch;
}

.botao--perigo {
  background: var(--erro);
  color: var(--branco);
  box-shadow: none;
}

.botao--perigo:hover {
  background: #8d1c17;
  box-shadow: none;
}

/* ---------- Associadas ----------------------------------------------- */

/* Chip BRANCO, ao contrario do chip escuro dos patrocinadores. A polaridade
   segue o material que existe: dos doze logos das associadas, onze funcionam
   sobre branco (seis deles ja vem com fundo branco opaco no proprio arquivo),
   e so um veio em negativo. O do patrocinador e o oposto. */
/* Flex, e nao grid: com grade de colunas fixas, um numero de logos que nao
   fecha a linha deixa o ultimo orfao encostado na esquerda, e parece erro.
   Aqui a ultima linha centraliza sozinha, para qualquer quantidade — hoje sao
   treze, e entra ou sai associada sem virar problema de layout. */
.associados {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.75rem, 1.6vw, 1.15rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.associado {
  /* Cresce para preencher a linha, mas com teto: sem o max-width, um logo
     sozinho na ultima linha esticaria para a largura toda. */
  flex: 1 1 150px;
  max-width: 190px;
  background: var(--branco);
  border: 1px solid rgb(10 38 26 / 9%);
  border-radius: var(--raio-pequeno);
  padding: 1rem;
  min-height: 5.5rem;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px -20px rgb(10 38 26 / 45%);
}

/* Logo que chegou em negativo e e monocromatico: exibido em preto, para nao
   destoar do mural inteiro com um chip escuro solitario.

   O filtro fica aqui, e nao num arquivo derivado, para o asset servido
   continuar sendo exatamente o que a entidade enviou. Quando chegar a versao
   positiva oficial, e trocar o arquivo e apagar 'tratamento' do content —
   nenhuma outra mudanca.

   brightness(0) zera os canais de cor e preserva o alfa, entao o
   antisserrilhado da borda continua suave. Vale porque o arquivo nao tem cor
   alguma; num logo colorido isso achataria tudo em preto. */
.associado__logo--invertido {
  filter: brightness(0);
}

/* max-height sem height: logo pequeno fica pequeno em vez de esticar e
   borrar. Alguns arquivos tem area util de poucas dezenas de pixels. */
.associado img {
  max-height: 3.25rem;
  max-width: 100%;
  width: auto;
  height: auto;
}

/* ---------- 16. Termo de Privacidade: documento e modal --------------- */

/* Tipografia de documento longo. Serve as duas apresentacoes do mesmo texto:
   dentro do <dialog> na landing e na pagina /privacidade. */
.doc {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--tinta);
}

.doc > * + * {
  margin-top: 0.9rem;
}

.doc h3 {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-top: 1.9rem;
  color: var(--verde-escuro);
}

.doc ul,
.doc ol {
  padding-left: 1.35rem;
  display: grid;
  gap: 0.45rem;
}

.doc a {
  color: var(--verde-escuro);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.doc__atualizacao {
  color: var(--tinta-suave);
  font-size: 0.875rem;
}

/* Ressalva que muda a decisao de quem le (pedir exclusao cancela a inscricao):
   fica marcada, para nao passar como mais um paragrafo. */
.doc__atencao {
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--amarelo);
  background: rgb(255 192 0 / 12%);
  border-radius: 0 var(--raio-pequeno) var(--raio-pequeno) 0;
}

/* A tabela rola dentro do proprio quadro. Sem isto, tres colunas de texto num
   celular empurram a largura da pagina inteira. */
.doc__tabela {
  overflow-x: auto;
  border: 1px solid rgb(10 38 26 / 12%);
  border-radius: var(--raio-pequeno);
}

.doc__tabela table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: 0.875rem;
}

.doc__tabela th,
.doc__tabela td {
  padding: 0.6rem 0.8rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgb(10 38 26 / 10%);
}

.doc__tabela thead th {
  background: rgb(0 63 38 / 8%);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--verde-escuro);
}

.doc__tabela tbody th {
  font-weight: 600;
  white-space: nowrap;
}

.doc__tabela tbody tr:last-child th,
.doc__tabela tbody tr:last-child td {
  border-bottom: 0;
}

/* ----- pagina /privacidade ----- */

.doc--pagina {
  max-width: 52rem;
}

.doc--pagina > .pilula,
.doc--pagina > .titulo-seccao {
  margin-top: 0;
}

.doc--pagina > .titulo-seccao {
  margin-bottom: 1.75rem;
}

.doc__voltar {
  margin-top: 2.5rem;
}

/* ----- modal ----- */

.modal {
  /* margin: auto explicito. O <dialog> nasce centralizado pela folha do
     proprio navegador, mas com width: 100% declarado a largura deixa de ser
     fit-content e a caixa cola no canto superior esquerdo — foi exatamente o
     que aconteceu na primeira captura. Largura definida por min() e margem
     automatica resolvem sem depender do padrao do UA. */
  margin: auto;
  width: min(46rem, calc(100vw - 2rem));
  max-height: min(84svh, 46rem);
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.modal::backdrop {
  background: rgb(0 40 24 / 62%);
  backdrop-filter: blur(2px);
}

/* showModal() torna o resto da pagina inerte, mas nao impede o fundo de
   rolar. Travar a rolagem e o que falta para a caixa nao deslizar junto. */
html:has(dialog[open]) {
  overflow: hidden;
}

.modal__caixa {
  display: grid;
  grid-template-rows: auto 1fr auto;
  max-height: min(84svh, 46rem);
  background: var(--papel);
  border-radius: var(--raio);
  box-shadow: var(--sombra-alta);
  overflow: hidden;
}

/* Topo e base fixos: sao 11 itens de texto juridico, e o botao de fechar tem
   de estar alcancavel em qualquer ponto da leitura. */
.modal__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem clamp(1.1rem, 3vw, 1.75rem);
  background: var(--verde-noite);
  color: var(--branco);
}

.modal__titulo {
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  margin: 0;
}

.modal__fechar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 999px;
  background: transparent;
  color: var(--branco);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
  --foco: var(--amarelo);
}

.modal__fechar:hover {
  background: rgb(255 255 255 / 14%);
  border-color: rgb(255 255 255 / 55%);
}

.modal__fechar svg {
  width: 1.1rem;
  height: 1.1rem;
}

.modal__corpo {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.25rem, 3vw, 1.9rem);
}

.modal__base {
  padding: 1rem clamp(1.1rem, 3vw, 1.75rem);
  border-top: 1px solid rgb(10 38 26 / 12%);
  background: var(--branco);
  display: flex;
  justify-content: flex-end;
}

/* ----- link do termo no bloco de consentimento ----- */

/* Segunda coluna do grid .consentimento: o rotulo e o link empilhados. O link
   e irmao do <label>, nunca filho — ver o comentario no partial. */
.consentimento__texto {
  display: grid;
  gap: 0.4rem;
  justify-items: start;
}

.consentimento__link {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--verde-escuro);
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  .modal[open] .modal__caixa {
    animation: surge 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
}

/* ---------- 17. Palestrantes ----------------------------------------- */

/* Tres convidadas lado a lado, foto redonda sobre o nome — o arranjo do
   card 3 e do e-mail 2. auto-fit com minimo de 15rem: tres colunas a partir
   de ~900px, uma so no celular. Nunca 2 + 1. */
.palestrantes {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(2rem, 4vw, 3rem) clamp(1rem, 3vw, 2.5rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  position: relative;
}

/* Um grupo por momento da programacao: a palestra das 9h45 e o bate-papo
   das 11h. O cabecalho centralizado fica sobre as fotos, que tambem sao
   centralizadas — inclusive a palestra, que tem uma pessoa so. */
.grupo-falas {
  margin-top: clamp(2.75rem, 6vw, 4.5rem);
}

.grupo-falas + .grupo-falas {
  padding-top: clamp(2.75rem, 6vw, 4.5rem);
  border-top: 1px solid rgb(0 63 38 / 12%);
}

.grupo-falas__titulo {
  text-align: center;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--verde-escuro);
  max-width: 34ch;
  margin-inline: auto;
}

/* Sem text-transform: uppercase, que transformaria "11h" em "11H". */
.grupo-falas__rotulo {
  display: block;
  margin-bottom: 0.45rem;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  color: var(--verde-texto);
}

/* Faixa menta atras das fotos, na altura do centro delas, como o fundo de
   arcos do card 3. Decorativa; some no celular, onde as fotos empilham. */
@media (min-width: 56rem) {
  .palestrantes::before {
    content: "";
    position: absolute;
    left: -100vw;
    right: -100vw;
    top: 2.5rem;
    height: 9rem;
    background: var(--menta);
    z-index: -1;
  }
}

.palestrante {
  display: grid;
  justify-items: center;
  text-align: center;
  align-content: start;
}

/* O arquivo ja vem recortado em circulo, com fundo transparente. A borda
   branca e a do proprio card. */
.palestrante__foto {
  width: clamp(10rem, 16vw, 13rem);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 5px solid var(--branco);
  box-shadow: 0 0 0 2px var(--verde), var(--sombra-cartao);
  margin-bottom: 1.1rem;
}

.palestrante__nome {
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--verde-escuro);
}

.palestrante__cargo {
  margin-top: 0.35rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--verde-texto);
}

.palestrante__bio {
  margin-top: 0.9rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--tinta-suave);
  max-width: 34ch;
}

/* Isola a secao para o z-index -1 da faixa menta ficar atras das fotos sem
   escapar para baixo do fundo branco. */
#palestrantes {
  isolation: isolate;
}

/* ---------- Campo de selecao (Entidade Associada) --------------------- */

/* Sem a seta nativa, que muda de desenho em cada navegador e encosta no
   texto. A seta abaixo e um SVG em verde-escuro, com folga a direita. */
.campo select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003f26' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.1rem;
  cursor: pointer;
}

/* Placeholder "Selecione a sua entidade" em tom suave, como o das caixas
   de texto, enquanto nada foi escolhido. */
.campo select:has(option[value=""]:checked) {
  color: var(--tinta-suave);
}