/* =========================================================================
   Tche na Serra — 2a edicao
   Folha unica. Sem framework, sem build.

   O sistema visual reaproveita quatro elementos que existem nas pecas de
   divulgacao, em vez de inventar linguagem nova:
     1. campo azul com grao de papel        -> .secao--azul, .grao
     2. pilula de contorno amarelo          -> .pilula      (do selo "2a edicao")
     3. bloco amarelo atras de uma palavra  -> .destaque    (do badge "na")
     4. foto com veu azul                   -> .hero__veu
   ========================================================================= */

/* ---------- 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 {
  /* Azuis e amarelo amostrados diretamente das pecas. */
  --azul: #3470c6;
  --azul-medio: #2b5fb0;
  --azul-escuro: #1b4586;
  --azul-noite: #0e2a55;
  --amarelo: #fdca04;
  --amarelo-claro: #ffd84d;

  /* Papel levemente quente: conversa com o arenito da catedral na foto e
     com o grao, coisa que um cinza-azulado frio nao faz. */
  --papel: #f6f3ee;
  --papel-fundo: #ebe5db;
  --branco: #ffffff;

  --tinta: #10203a;
  --tinta-suave: #4a5a72;
  --erro: #a4211b;

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

  --display: "Poppins", "Trebuchet MS", sans-serif;
  --corpo: "IBM Plex Sans", "Segoe UI", sans-serif;

  --sombra-cartao: 0 20px 44px -30px rgb(16 32 58 / 55%);
  --sombra-alta: 0 30px 70px -34px rgb(14 42 85 / 60%);

  /* Grao de papel: ruido fractal em SVG, sem arquivo de imagem. */
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");

  --foco: var(--azul-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);
}

.secao--azul {
  background: linear-gradient(158deg, var(--azul) 0%, var(--azul-escuro) 100%);
  color: var(--branco);
  --foco: var(--amarelo);
}

.secao--noite {
  background: var(--azul-noite);
  color: var(--branco);
  --foco: var(--amarelo);
}

/* 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;
}

.grao::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grao);
  background-size: 180px;
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: 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--azul .texto {
  color: rgb(255 255 255 / 88%);
}

.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 — do selo "2a edicao" da peca. */
.pilula {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1.1rem 0.45rem;
  border: 2px solid var(--amarelo);
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--amarelo);
}

.secao--papel .pilula,
.secao--papel-fundo .pilula {
  border-color: var(--azul);
  color: var(--azul-escuro);
}

/* Bloco amarelo atras da palavra — do badge "na" do lettering. */
.destaque {
  background: var(--amarelo);
  color: var(--tinta);
  padding: 0.04em 0.34em 0.1em;
  border-radius: 10px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.tom-amarelo {
  color: var(--amarelo);
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1rem 1.9rem;
  border: 0;
  border-radius: 999px;
  background: var(--amarelo);
  color: var(--tinta);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 14px 30px -16px rgb(253 202 4 / 70%);
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1),
    background-color 0.22s, box-shadow 0.22s;
}

.botao:hover {
  background: var(--amarelo-claro);
  transform: translateY(-2px);
  box-shadow: 0 20px 38px -16px rgb(253 202 4 / 80%);
}

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

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

.botao--contorno:hover {
  background: rgb(255 255 255 / 12%);
  box-shadow: none;
}

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

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

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

.hero {
  position: relative;
  min-height: min(94svh, 820px);
  display: grid;
  align-content: end;
  padding-block: clamp(3rem, 7vw, 5.5rem);
  color: var(--branco);
  isolation: isolate;
  --foco: var(--amarelo);
}

.hero__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  z-index: -2;
}

/* Veu azul: transforma a foto em campo de marca em vez de foto de banco de
   imagens, e garante contraste do texto branco em cima. */
.hero__veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      177deg,
      rgb(27 69 134 / 94%) 0%,
      rgb(52 112 198 / 62%) 38%,
      rgb(14 42 85 / 88%) 82%,
      rgb(14 42 85 / 97%) 100%
    ),
    radial-gradient(120% 80% at 82% 18%, rgb(52 112 198 / 45%), transparent 60%);
}

.hero__veu::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grao);
  background-size: 180px;
  opacity: 0.45;
  mix-blend-mode: overlay;
}

.hero__conteudo {
  display: grid;
  justify-items: start;
  gap: clamp(1.25rem, 2.6vw, 1.9rem);
}

.hero__marca {
  /* Minimo de 280px, e nao 240px: o lockup passou a incluir "em Caxias do
     Sul" numa linha bem menor que o resto, e no menor telefone ela ficava
     apertada. Cabe em 320px de largura util. */
  width: clamp(280px, 52vw, 600px);
  height: auto;
  filter: drop-shadow(0 14px 30px rgb(9 26 52 / 45%));
}

.hero__quando {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.75rem, 5.4vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.hero__onde {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.0625rem, 2.3vw, 1.5rem);
  line-height: 1.35;
  max-width: 26ch;
}

.assinatura {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: rgb(255 255 255 / 78%);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.assinatura::before {
  content: "";
  width: 2rem;
  height: 2px;
  background: var(--amarelo);
}

/* ---------- 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(16 32 58 / 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: var(--raio-pequeno);
  background: var(--azul);
  color: var(--branco);
}

.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(--azul-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(--tinta);
  color: var(--branco);
  box-shadow: 0 16px 32px -18px rgb(16 32 58 / 80%);
}

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

/* ---------- 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(--amarelo);
  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 amarelo: a hora
   ja e amarela 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(--azul-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 textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 2px solid rgb(16 32 58 / 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 textarea:hover {
  border-color: rgb(16 32 58 / 26%);
}

.campo input:focus,
.campo textarea:focus {
  outline: 0;
  border-color: var(--azul);
  box-shadow: 0 0 0 4px rgb(52 112 198 / 18%);
}

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

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

.campo--invalido input: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(52 112 198 / 7%);
  border: 1px solid rgb(52 112 198 / 16%);
  font-size: 0.9375rem;
  line-height: 1.55;
}

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

.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(16 32 58 / 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(--azul-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. Sao sete: selo da edicao, lockup, selo de
     vagas, data, local, botao e assinatura. 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(--azul-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(16 32 58 / 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(16 32 58 / 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(16 32 58 / 14%);
  border-radius: var(--raio-pequeno);
  min-width: min(18rem, 60vw);
  font-size: 0.9375rem;
}

.busca input:focus {
  outline: 0;
  border-color: var(--azul);
  box-shadow: 0 0 0 4px rgb(52 112 198 / 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(16 32 58 / 12%);
  position: sticky;
  top: 0;
}

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

.tabela tbody tr:hover {
  background: rgb(52 112 198 / 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(16 32 58 / 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(16 32 58 / 16%);
  text-decoration: none;
  font-weight: 500;
}

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

.paginacao__links span {
  opacity: 0.45;
}

/* Login */

.login {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: linear-gradient(158deg, var(--azul) 0%, var(--azul-escuro) 100%);
  position: relative;
  overflow: hidden;
}

.login::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grao);
  background-size: 180px;
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.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 amarelo em cima da divisoria. */
.grade__item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--amarelo);
  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(16 32 58 / 8%);
  padding: 0.1em 0.4em;
  border-radius: 6px;
}

.confirmacao a {
  color: var(--azul-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(--azul);
  color: var(--azul-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(--amarelo);
  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(--amarelo);
  border-color: var(--amarelo);
}

.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(--amarelo);
  border-color: var(--amarelo);
  color: var(--tinta);
  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(16 32 58 / 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(52 112 198 / 45%);
}

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

/* :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(--azul);
  background: rgb(52 112 198 / 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(--azul-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;
}

/* Randonprev ao lado da Tche Previdencia na assinatura do hero. Altura menor
   que a do logo da Tche: aquele empacota simbolo e texto, este e wordmark
   puro, entao na mesma altura a tipografia da Randonprev sairia maior e
   pesaria mais que a da organizadora. */
.assinatura__logo--randonprev {
  height: 1.15rem;
}

.assinatura {
  flex-wrap: wrap;
  row-gap: 0.5rem;
}

.assinatura__separador {
  width: 1px;
  height: 1.5rem;
  background: rgb(255 255 255 / 32%);
  flex: none;
}

/* ---------- 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 amarelo em vez de fundo chapado: no bloco azul
   do formulario, mais um retangulo amarelo cheio brigaria com o botao. */
.prazo {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.6rem 1.15rem;
  border: 2px solid var(--amarelo);
  border-radius: var(--raio-pequeno);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  color: var(--amarelo);
}

/* 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(16 32 58 / 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(16 32 58 / 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(16 32 58 / 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(52 112 198 / 8%);
  border-bottom: 1px solid rgb(52 112 198 / 20%);
  font-weight: 500;
}

.painel__aviso svg {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--azul-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(16 32 58 / 35%);
}

.tabela__nome a:hover {
  color: var(--azul-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(16 32 58 / 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(16 32 58 / 9%);
  border-radius: var(--raio-pequeno);
  padding: 1rem;
  min-height: 5.5rem;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px -20px rgb(16 32 58 / 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(--azul-escuro);
}

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

.doc a {
  color: var(--azul-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(253 202 4 / 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(16 32 58 / 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(16 32 58 / 10%);
}

.doc__tabela thead th {
  background: rgb(52 112 198 / 8%);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--azul-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(14 42 85 / 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(--azul-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(16 32 58 / 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(--azul-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 ----------------------------------------- */

.palestrantes {
  list-style: none;
  padding: 0;
  display: grid;
  /* 26rem, e nao um valor menor: com 21rem cabiam tres colunas em 1200px, e
     quatro palestrantes viravam 3 + 1, com a ultima sozinha numa linha. Duas
     colunas fecham 2 + 2 e ainda dao uma medida de leitura melhor — as bios
     passam de 40 caracteres por linha para uns 70. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);

  /* stretch (o padrao), e nao start. Com start, o cartao curto terminava antes
     do alto da linha e sobrava um vao no fundo da secao entre uma linha e a
     seguinte — o buraco que o cliente apontou. Esticados, os dois cartoes da
     linha terminam juntos: a folga da bio mais curta passa a ficar DENTRO do
     cartao, delimitada pelo branco dele, onde le como "texto mais curto" e nao
     como falha de diagramacao.

     A ordem ja ajuda: as duas bios longas estao na primeira linha e as duas
     curtas, quase do mesmo tamanho, na segunda. A folga restante e so entre a
     bio da Lidia e a do Helder. */
}

.palestrante {
  background: var(--branco);
  border: 1px solid rgb(16 32 58 / 8%);
  border-radius: var(--raio);
  padding: clamp(1.35rem, 2.4vw, 1.9rem);
  box-shadow: var(--sombra-cartao);
}


/* Foto e identificacao lado a lado. flex-wrap com base de 11rem no bloco de
   texto faz o arranjo se resolver sozinho, sem media query: onde sobram menos
   de ~11rem ao lado da foto — o que acontece no cartao de um celular —, a
   identificacao desce para baixo dela. O gap vale nos dois eixos, entao o
   espacamento continua certo depois da quebra. */
.palestrante__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1.1rem;
}

.palestrante__identidade {
  flex: 1 1 11rem;
}

/* Altura fixa e largura livre, e nao o contrario. As quatro imagens chegaram
   com proporcoes diferentes (0,82 a 1,05): travando a largura, as alturas
   variariam e os nomes comecariam em alturas diferentes de um cartao para o
   outro. Travando a altura, o que varia e a largura — invisivel, porque as
   fotos sao alinhadas a esquerda.

   Sem recorte, sem borda e sem border-radius: a moldura amarela inclinada faz
   parte do arquivo, e o fundo em volta dela e transparente. Qualquer moldura
   aqui emolduraria a moldura. */
.palestrante__foto {
  height: 8.5rem;
  width: auto;
}

.palestrante__nome {
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  line-height: 1.15;
}

/* O cargo e uma frase inteira em dois dos quatro casos ("Socia e Diretora de
   Relacionamento com Investidores da Icatu Vanguarda"), entao nada de caixa
   alta com espacamento de letra: viraria uma faixa ilegivel. Peso e cor
   bastam para separa-lo do nome. */
.palestrante__cargo {
  margin-top: 0.4rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--azul-escuro);
}

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