@charset "utf-8";

/* ==========================================================================
   23ª SNCT — IFRO Campus Ariquemes
   --------------------------------------------------------------------------
   O sistema visual sai da própria marca do Instituto Federal: uma grade 3x4
   de quadrados arredondados com um círculo vermelho no topo. Dela vêm o raio
   de canto (9,7% da célula), a razão célula:vão (100:20) e os separadores.
   Cores oficiais medidas no arquivo vetorial original:
   verde #39A048 · vermelho #CD2027 · tinta #1F130F
   ========================================================================== */

/* --------------------------------------------------------------- 1. tokens */

:root {
  /* verde institucional, rampa na matiz 146 */
  --verde:        oklch(62.6% 0.158 146);   /* #39A048 — a cor da marca */
  --verde-600:    oklch(55.0% 0.135 147);
  --verde-700:    oklch(46.0% 0.110 147);   /* verde legível em corpo pequeno */
  --verde-800:    oklch(38.0% 0.089 148);
  --verde-900:    oklch(30.05% 0.070 149);   /* chão do topo e do herói */
  --verde-950:    oklch(24.0% 0.055 149);   /* chão do rodapé */
  --verde-100:    oklch(95.0% 0.028 146);
  --verde-200:    oklch(89.0% 0.050 146);

  /* Vermelho: agora só o círculo da marca do IF. É cor institucional, medida
     no vetor oficial — trocá-la descaracterizaria a marca do Instituto. */
  --vermelho:     oklch(54.6% 0.205 26);    /* #CD2027 */
  --vermelho-600: oklch(48.0% 0.190 26);

  /* o rosa vem da marca da 23ª SNCT (#E86AA7), onde ele escreve "DELAS". Cai
     quase no complementar do verde institucional — matiz 352 contra 146, com
     croma parecido — e por isso funciona como assinatura do tema sem brigar
     com a cor da casa. Uso restrito: a assinatura "Ciência Delas". */
  --rosa: oklch(69.3% 0.169 352);
  /* o mesmo rosa diluído até virar papel: fundo do herói da home */
  --rosa-50: oklch(95.5% 0.030 352);   /* #FFE8F2 */

  /* O rosa da ação: botões, fios de costura, datas em destaque. É o rosa do
     "DELAS" na mesma matiz e no mesmo croma, mas escurecido — e o motivo é
     contraste, não gosto. O rosa da marca tem 69,3% de clareza, e texto
     branco em cima dele dá 2,98:1, longe dos 4,5:1 que um botão exige. A
     54% ele chega a 5,56:1, que é onde o vermelho que estava aqui vivia
     (5,48:1). Mesma função, mesmo peso, cor nova. */
  --rosa-700: oklch(54.0% 0.169 352);  /* #B33979 */
  --rosa-800: oklch(49.0% 0.169 352);  /* o tom de hover */

  /* Neutros puxados para a matiz do rosa da marca (352), e não mais para a do
     verde (146): é o que dá ao site inteiro o mesmo ar do herói. Os cromas
     sobem um pouco em relação aos antigos porque o olho perde rosa fraco mais
     depressa que verde fraco no mesmo croma. A tinta continua na matiz verde:
     papel rosa, texto verde — é esse o par. */
  --papel:        oklch(98.6% 0.007 352);
  --papel-2:      oklch(96.4% 0.018 352);
  --papel-3:      oklch(93.6% 0.028 352);
  --tinta:        oklch(22.0% 0.014 146);
  --tinta-2:      oklch(44.0% 0.016 146);   /* texto secundário, ~7:1 no papel */
  --tinta-3:      oklch(50.0% 0.016 146);   /* metadados 13px, 5,7:1 no papel */
  --linha:        oklch(88.0% 0.024 352);
  --linha-forte:  oklch(78.0% 0.034 352);

  /* sobre o verde profundo: nunca cinza em cima de cor */
  --sobre-verde:      oklch(97.0% 0.012 146);
  --sobre-verde-2:    oklch(86.0% 0.038 146);
  --sobre-verde-3:    oklch(74.0% 0.070 146);
  --sobre-verde-fina: oklch(100% 0 0 / 0.16);

  /* tipografia */
  --fonte-display: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --fonte-texto:   "Source Sans 3", "Source Sans 3 Fallback", system-ui, sans-serif;

  --t-xs:    0.8125rem;
  --t-sm:    0.9375rem;
  --t-base:  1.0625rem;
  --t-lead:  clamp(1.25rem,  1.1rem  + 0.7vw,  1.4375rem);
  --t-h3:    clamp(1.5rem,   1.36rem + 0.7vw,  1.75rem);
  --t-h2:    clamp(2rem,     1.55rem + 2.2vw,  2.75rem);
  --t-h1:    clamp(2.125rem, 1.2rem  + 5.4vw,  4.5rem);

  /* espaço: escala 4pt */
  --s-3xs: 0.25rem;
  --s-2xs: 0.5rem;
  --s-xs:  0.75rem;
  --s-sm:  1rem;
  --s-md:  1.5rem;
  --s-lg:  2rem;
  --s-xl:  3rem;
  --s-2xl: 4rem;
  --s-3xl: 6rem;
  --s-secao: clamp(3.5rem, 7vw, 7rem);

  /* raio derivado da célula do módulo IF: 9,7% do lado */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  14px;

  --shell: 72rem;
  --prosa: 66ch;

  --sombra-sm: 0 1px 2px oklch(30% 0.05 149 / 0.05);
  --sombra-md: 0 2px 4px oklch(30% 0.05 149 / 0.05), 0 8px 20px -8px oklch(30% 0.05 149 / 0.10);
  --sombra-lg: 0 2px 4px oklch(30% 0.05 149 / 0.06), 0 18px 40px -12px oklch(30% 0.05 149 / 0.16);

  --saida:  cubic-bezier(0.25, 1, 0.5, 1);      /* quart out */
  --expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ida-volta: cubic-bezier(0.65, 0, 0.35, 1);

  --z-topo: 40;
}

/* métricas de reserva: reduz o pulo de layout enquanto a fonte não chega */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Source Sans 3 Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 95%;
  ascent-override: 105%;
  descent-override: 29%;
  line-gap-override: 0%;
}

/* ----------------------------------------------------------------- 2. base */

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

html {
  scroll-behavior: smooth;
  /* o topo fixo não pode cobrir a seção que acabou de receber o foco */
  scroll-padding-top: calc(var(--altura-topo, 4.5rem) + var(--s-md));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: var(--t-base);
  line-height: 1.62;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--fonte-display);
  font-weight: 800;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); line-height: 0.98; font-stretch: 108%; letter-spacing: -0.028em; }
h2 { font-size: var(--t-h2); line-height: 1.06; }
h3 { font-size: var(--t-h3); line-height: 1.18; letter-spacing: -0.014em; }

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--verde);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: var(--verde-200); color: var(--tinta); }

.pular {
  position: absolute;
  top: var(--s-2xs);
  left: var(--s-2xs);
  z-index: 100;
  padding: var(--s-2xs) var(--s-sm);
  background: var(--verde-900);
  color: var(--sobre-verde);
  border-radius: var(--r-sm);
  font: 600 var(--t-sm)/1 var(--fonte-display);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 160ms var(--saida);
}
.pular:focus-visible { transform: translateY(0); }

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

/* ------------------------------------------------------- 3. peças comuns */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

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

/* rótulo curto: corte estreito da Archivo, caixa alta, tracking aberto */
.rotulo {
  font-family: var(--fonte-display);
  font-size: var(--t-xs);
  font-weight: 700;
  font-stretch: 87%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--verde-700);
}
.rotulo--claro { color: var(--sobre-verde-3); }

.lead {
  max-width: var(--prosa);
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--tinta-2);
}

.prosa { max-width: var(--prosa); }
.prosa + .prosa { margin-top: var(--s-sm); }
/* o texto do "Sobre" vem do painel, em parágrafos que o filtro texto_rico
   monta — não dá para pôr a classe em cada um */
.sobre__prosa p + p { margin-top: var(--s-sm); }

.cabeca-secao {
  display: grid;
  gap: var(--s-xs);
  margin-bottom: var(--s-xl);
  max-width: 44rem;
}

/* o módulo IF em CSS, para uso decorativo e para o separador de seção.
   A marca de verdade é sempre o SVG oficial em assets/img/. */
.modulo {
  --cel: 7px;
  display: grid;
  grid-template-columns: repeat(3, var(--cel));
  grid-template-rows: repeat(4, var(--cel));
  gap: calc(var(--cel) * 0.2);
  flex: none;
}
.modulo i {
  border-radius: calc(var(--cel) * 0.097);
  background: currentColor;
}
.modulo i:first-child { border-radius: 50%; color: var(--vermelho); }
.modulo i:nth-child(6),
.modulo i:nth-child(12) { visibility: hidden; }

/* --------------------------------------------------------------- 4. botões */

.botao {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2xs);
  padding: 0.8125rem 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font: 700 var(--t-sm)/1.1 var(--fonte-display);
  font-stretch: 96%;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms var(--saida),
              border-color 140ms var(--saida),
              color 140ms var(--saida),
              transform 140ms var(--saida);
}
.botao:active { transform: translateY(1px); }

.botao--acao {
  background: var(--rosa-700);
  color: #fff;
}
.botao--acao:hover { background: var(--rosa-800); }

.botao--linha {
  border-color: var(--linha-forte);
  color: var(--tinta);
  background: transparent;
}
.botao--linha:hover { border-color: var(--verde-700); color: var(--verde-700); }

.botao--fantasma-claro {
  border-color: var(--sobre-verde-fina);
  color: var(--sobre-verde);
  background: oklch(100% 0 0 / 0.06);
}
.botao--fantasma-claro:hover {
  background: oklch(100% 0 0 / 0.13);
  border-color: oklch(100% 0 0 / 0.34);
}

/* a seta anda um fio no hover — o suficiente para dizer "vai" */
.botao .seta { transition: transform 160ms var(--saida); }
.botao:hover .seta { transform: translateX(3px); }

/* ------------------------------------------------------------- 5. o topo */

.topo {
  position: sticky;
  top: 0;
  z-index: var(--z-topo);
  background: oklch(98.6% 0.004 146 / 0.92);
  backdrop-filter: blur(8px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--saida), box-shadow 200ms var(--saida);
}
.topo[data-rolado] {
  border-bottom-color: var(--linha);
  box-shadow: var(--sombra-sm);
}

.topo__barra {
  display: flex;
  align-items: center;
  gap: var(--s-md);
  min-height: 4.5rem;
  padding-block: var(--s-xs);
}

.marca {
  display: flex;
  align-items: center;
  gap: var(--s-xs);
  text-decoration: none;
  margin-right: auto;
}
.marca__logo { height: 2.75rem; width: auto; }
.marca__sigla {
  padding-left: var(--s-xs);
  border-left: 1px solid var(--linha-forte);
  font-family: var(--fonte-display);
  font-size: var(--t-xs);
  font-weight: 700;
  font-stretch: 87%;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.marca__sigla b { display: block; color: var(--verde-700); font-weight: 800; }

.menu {
  display: flex;
  align-items: center;
  gap: clamp(var(--s-sm), 2.2vw, var(--s-lg));
}
.menu a {
  position: relative;
  padding-block: var(--s-2xs);
  font-family: var(--fonte-display);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--tinta-2);
  transition: color 140ms var(--saida);
}
.menu a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -2px;
  height: 2px;
  background: var(--verde);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms var(--saida);
}
.menu a:hover { color: var(--tinta); }
.menu a:hover::after,
.menu a[aria-current="true"]::after { transform: scaleX(1); }
.menu a[aria-current="true"] { color: var(--verde-700); }

/* --------------------------------------------------------------- 6. herói */

.heroi {
  position: relative;
  overflow: clip;
  background: var(--verde-900);
  color: var(--sobre-verde);
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 6vw, 5rem);
  /* claro sobre escuro pesa menos: um pouco mais de ar entre as linhas */
  line-height: 1.7;
}

/* a marca do IF, gigante e quase apagada, sangrando pela direita */
.heroi::before {
  content: "";
  position: absolute;
  bottom: -16%;
  right: -7%;
  width: min(27rem, 52vw);
  aspect-ratio: 350 / 460;
  background: url("../img/if-mark-branca.87b0a3d7412c.svg") center / contain no-repeat;
  opacity: 0.05;
  pointer-events: none;
}

.heroi__grade {
  position: relative;
  display: grid;
  gap: var(--s-md);
  justify-items: start;
}

/* Texto de um lado, marca do evento do outro. São só dois filhos, cada um
   posto à mão na sua coluna: nada de grid-row 1/-1, que numa grade sem linhas
   explícitas pára na primeira linha e deixaria a marca colada na tarja da
   data. Abaixo de 62rem vira uma coluna só, com a marca no topo. */
.heroi__topo {
  display: grid;
  gap: clamp(var(--s-lg), 5vw, var(--s-2xl));
  justify-items: start;
}
@media (min-width: 62.0625rem) {
  .heroi__topo {
    grid-template-columns: min(19rem, 30%) minmax(0, 1fr);
    align-items: center;
  }
  .heroi__grade  { grid-area: 1 / 2; }
  /* alinhada pelo topo, e não centrada: o painel começa na altura do título,
     e não no meio de um bloco de texto que é bem mais alto que ele */
  .heroi__marca  {
    grid-area: 1 / 1;
    justify-self: start;
    align-self: start;
    margin-top: var(--s-2xl);
  }
}

/* painel claro: a arte precisa de fundo claro — o branco do jaleco e o miolo
   do círculo vêm do fundo, não da ilustração */
.heroi__marca {
  width: min(19rem, 62vw);
  margin: 0;
  padding: clamp(var(--s-sm), 2.5vw, var(--s-md));
  border-radius: var(--r-lg);
  /* branco puro, e não --papel: a arte tem branco chapado no miolo, e qualquer
     papel levemente esverdeado faz aparecer a emenda do retângulo da imagem */
  background: #fff;
  box-shadow: var(--sombra-lg);
}
.heroi__marca img { display: block; width: 100%; height: auto; }
/* a marca saiu de dentro de .heroi__grade, então entra pela mesma animação
   escalonada por fora — o --i dela continua sendo o do HTML */
.heroi__marca {
  animation: sobe 640ms var(--expo) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

.heroi__data {
  display: flex;
  align-items: center;
  gap: var(--s-xs);
  padding: 0.4375rem 0.875rem 0.4375rem 0.6875rem;
  border: 1px solid var(--sobre-verde-fina);
  border-radius: 999px;
  background: oklch(100% 0 0 / 0.05);
  font-family: var(--fonte-display);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--sobre-verde-2);
}
.heroi__data .modulo { --cel: 4px; color: var(--sobre-verde-3); }

.heroi h1 { max-width: 22ch; color: #fff; }

/* h1 desenhado: a logo escrita no lugar do título em texto. O max-width em ch
   não serve para imagem, e a margem do título vem do gap da grade. */
.heroi__lockup { max-width: none; margin: 0; }
.heroi__lockup img {
  display: block;
  width: min(30rem, 100%);
  height: auto;
}

/* o tema da edição, tratado como assinatura e não como subtítulo */
.heroi__tema {
  display: grid;
  gap: var(--s-2xs);
  margin-top: var(--s-3xs);
}
.heroi__tema span {
  font-family: var(--fonte-display);
  font-size: clamp(1.75rem, 1.1rem + 3vw, 3rem);
  font-weight: 500;
  font-stretch: 112%;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--rosa);
  /* o mesmo rosa que escreve "DELAS" na marca. Sobre o verde-900 do herói dá
     4,4:1 — acima dos 3:1 que texto grande pede, e mais que o verde que estava
     aqui antes (3,9:1). */
}
.heroi__tema em {
  font-style: normal;
  font-size: var(--t-xs);
  font-family: var(--fonte-display);
  font-weight: 700;
  font-stretch: 87%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sobre-verde-3);
}

.heroi .lead { color: var(--sobre-verde-2); line-height: 1.62; }

.heroi__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xs);
  margin-top: var(--s-2xs);
}

.heroi__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-md);
  margin-top: clamp(var(--s-lg), 5vw, var(--s-2xl));
  padding-top: var(--s-md);
  border-top: 1px solid var(--sobre-verde-fina);
}
.heroi__rodape img { height: 2.5rem; width: auto; }

/* a contagem só aparece quando o JS confirma que ela faz sentido */
.contagem[hidden] { display: none; }
.contagem {
  font-family: var(--fonte-display);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--sobre-verde-2);
  text-align: right;
}
.contagem b {
  display: block;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 800;
  font-stretch: 108%;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------- herói claro (só a home)
   O .heroi é compartilhado com os cabeçalhos curtos de /trabalhos/ e
   /cronograma/, que continuam escuros. Por isso isto é um modificador, e não
   uma troca na base: inverte o herói da home para fundo branco e vira, uma a
   uma, todas as cores que foram escolhidas para claro-sobre-escuro.

   Quem mexer aqui precisa saber que três imagens acompanham a inversão, e
   elas estão no HTML, não aqui: o lockup, a marca do IFRO do rodapé do herói
   e a marca-d'água passam da versão branca para a colorida. */
.heroi--claro {
  background: var(--rosa-50);
  color: var(--tinta-2);
  /* o ar extra existia porque claro sobre escuro pesa menos; em tinta sobre
     branco a entrelinha volta ao normal do site */
  line-height: 1.6;
}
.heroi--claro::before {
  background-image: url("../img/if-mark.a132fe92e76f.svg");
  /* a marca colorida deixava uma mancha rosa atrás do texto: o círculo
     vermelho do IF. Achatada em preto ela volta a ser o que era no escuro —
     uma textura neutra, sem cor própria. */
  filter: grayscale(1) brightness(0);
  opacity: 0.06;
}

.heroi--claro h1,
.heroi--claro .contagem b { color: var(--tinta); }
.heroi--claro .lead       { color: var(--tinta-2); }

.heroi--claro .heroi__data {
  border-color: var(--linha);
  /* branco, e não --papel-2: o papel agora é rosa como o fundo do herói, e a
     tarja sumiria dentro dele. O branco é o que a destaca. */
  background: #fff;
  color: var(--tinta-2);
}
.heroi--claro .heroi__data .modulo { color: var(--verde); }

.heroi--claro .heroi__rodape { border-top-color: var(--linha); }
.heroi--claro .contagem      { color: var(--tinta-3); }

/* Sem painel: o selo foi reexportado com o fundo recortado, então a arte cai
   direto sobre o rosa.

   O que isso custa: as áreas claras do desenho — o jaleco, o miolo do anel —
   são buracos na ilustração, não branco pintado. Quem aparece ali é o fundo.
   Em rosa clarinho isso passa por branco; sobre fundo escuro o jaleco sumiria.
   Ou seja, este selo só serve em fundo claro. Se o herói voltar a ser verde,
   é preciso voltar ao painel branco ou reexportar o selo com fundo. */
.heroi--claro .heroi__marca {
  padding: 0;
  background: none;
  box-shadow: none;
}


/* -------------------------------------------- 7. submissão de trabalhos */

/* A submissão é a única ação que vale para o evento inteiro. Ganha faixa
   inteira, e não um cartão no meio do papel: é o que faz a seção ter
   território próprio. O fio rosa no topo é a costura com o herói — sem
   ele, as duas faixas escuras viram uma mancha só. Dentro dela, um cartão
   claro por mostra. */
.chamada {
  background: var(--verde-950);
  color: var(--sobre-verde);
  border-top: 4px solid var(--rosa-700);
  padding-block: clamp(2.75rem, 5.5vw, 4.5rem);
  line-height: 1.7;
}

.chamada__texto { max-width: 46rem; }

.chamada__rotulo {
  display: flex;
  align-items: center;
  gap: var(--s-2xs);
  margin-bottom: var(--s-sm);
}
.chamada__rotulo .modulo { --cel: 6px; color: var(--verde); }

.chamada h2 { color: #fff; max-width: 15ch; }
.chamada .lead {
  margin-top: var(--s-sm);
  color: var(--sobre-verde-2);
  text-align: justify;
  /* justificar sem hifenizar abre rios de espaço entre as palavras, e em
     português, que tem palavras longas, o buraco é maior. O hyphens: auto só
     funciona porque o <html> declara lang="pt-BR" — é o idioma que diz ao
     navegador onde pode cortar. */
  hyphens: auto;
}
/* em coluna estreita nem a hifenização segura: a última linha de cada bloco
   fica curta demais e o resto estica. Abaixo disso volta a alinhar à esquerda */
@media (max-width: 48rem) {
  .chamada .lead { text-align: left; hyphens: manual; }
}

/* As mostras lado a lado: são duas, de peso igual, e nenhuma é a principal.
   Abaixo de ~46rem cada uma ganha a largura toda. */
.mostras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(var(--s-md), 3vw, var(--s-lg));
  margin-top: clamp(var(--s-lg), 4vw, var(--s-xl));
}

/* O cartão de envio de uma mostra. Claro sobre o escuro: é onde o olho
   para. O texto de cada mostra tem tamanho diferente, então o pé do cartão
   (prazo e botão) desce até o fim — os dois botões ficam na mesma altura.
   O lugar grande do pé nunca fica vazio: quando não há prazo ele diz o
   estado, que é a informação que existe. */
.envio {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  padding: clamp(var(--s-md), 2.5vw, var(--s-lg));
  background: #fff;
  color: var(--tinta);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 50px -20px oklch(12% 0.04 149 / 0.55);
}

.envio__nome {
  font-size: var(--t-h3);
  color: var(--verde-900);
  text-wrap: balance;
}

.envio__resumo {
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--tinta-2);
}
.envio__resumo p + p,
.envio__resumo ul + p,
.envio__resumo p + ul { margin-top: var(--s-2xs); }
.envio__resumo ul { padding-left: var(--s-md); list-style: disc; }
.envio__resumo b { color: var(--tinta); }

.envio__pe {
  display: grid;
  justify-items: start;
  gap: var(--s-2xs);
  margin-top: auto;
  padding-top: var(--s-sm);
  border-top: 1px solid var(--linha);
}

.envio__rotulo {
  font-family: var(--fonte-display);
  font-size: var(--t-xs);
  font-weight: 700;
  font-stretch: 87%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

/* O dia em corpo grande e o mês embaixo: quebrar "26 de outubro" no meio
   deixava um "de" órfão no fim da linha. Separado, a data vira número. */
.envio__destaque {
  font-family: var(--fonte-display);
  font-weight: 800;
  font-stretch: 104%;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--verde-900);
}
.envio__destaque b {
  display: block;
  font-size: clamp(3.25rem, 5.2vw, 4.5rem);
  font-variant-numeric: tabular-nums;
}
.envio__destaque span {
  display: block;
  margin-top: var(--s-3xs);
  font-size: var(--t-h3);
  letter-spacing: -0.02em;
}
/* sem prazo, o lugar grande diz o estado — nunca fica vazio */
.envio__destaque--estado {
  font-size: clamp(2.25rem, 3.4vw, 3rem);
  letter-spacing: -0.032em;
  text-wrap: balance;
}
/* com prazo marcado, a data é uma data — e datas vêm na cor da ação */
.envio[data-aberto] .envio__destaque { color: var(--rosa-800); }

.envio .botao--grande { margin-top: var(--s-xs); }

.envio__nota {
  margin-top: var(--s-3xs);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--tinta-2);
  max-width: 34ch;
}

/* botão maior: é o único da página que não divide a linha com outro */
.botao--grande {
  padding: 1.0625rem 1.75rem;
  font-size: var(--t-base);
}

/* ------------------------------------------------------- 8. os quatro dias */

.dias {
  background: var(--papel-2);
  border-block: 1px solid var(--linha);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.dias__cabeca {
  display: grid;
  gap: var(--s-3xs);
  margin-bottom: var(--s-md);
}
.dias__cabeca h2 { font-size: var(--t-h3); }
.dias__cabeca .rotulo { margin-bottom: var(--s-3xs); }

.dias__lista {
  display: grid;
  gap: var(--s-sm);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-top: var(--s-md);
}

/* cada dia é um objeto, e não uma coluna de texto: no papel cinza da faixa,
   o branco é o que faz os três se lerem como três blocos */
.dia {
  display: grid;
  gap: var(--s-2xs);
  padding: var(--s-sm) var(--s-md) var(--s-md);
  background: #fff;
  border: 1px solid var(--linha);
  border-top: 3px solid var(--verde);
  border-radius: var(--r-md);
}
/* os blocos seguintes entram mais discretos: a leitura anda da esquerda */
.dia:not(:first-child) { border-top-color: var(--verde-200); }

.dia__data {
  font-family: var(--fonte-display);
  font-size: clamp(2.125rem, 2.9vw, 2.625rem);
  font-weight: 800;
  font-stretch: 104%;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.dia__data small {
  display: block;
  margin-top: var(--s-3xs);
  font-size: var(--t-xs);
  font-weight: 700;
  font-stretch: 87%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.dia p:not(.dia__data) {
  font-size: var(--t-base);
  line-height: 1.45;
  color: var(--tinta-2);
  max-width: 28ch;
}

/* ------------------------------------------------------------ 9. eventos */

.grade-eventos {
  display: grid;
  gap: var(--s-md);
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.evento {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  padding: var(--s-md);
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  transition: border-color 200ms var(--saida),
              box-shadow 200ms var(--saida),
              transform 200ms var(--saida);
}
.evento:hover {
  border-color: var(--linha-forte);
  box-shadow: var(--sombra-md);
  transform: translateY(-2px);
}

/* o evento com inscrição aberta é o único que ganha peso */
.evento[data-aberto] {
  border-color: var(--verde-200);
  box-shadow: var(--sombra-sm);
}
.evento[data-aberto]:hover { border-color: var(--verde); box-shadow: var(--sombra-lg); }

.evento h3 { font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem); }

.evento__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2xs);
  margin-bottom: var(--s-3xs);
}

.trilha {
  padding: 0.25rem 0.5rem;
  border-radius: var(--r-sm);
  background: var(--verde-100);
  color: var(--verde-800);
  font: 700 var(--t-xs)/1.2 var(--fonte-display);
  font-stretch: 87%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.selo-aberto {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font: 700 var(--t-xs)/1.2 var(--fonte-display);
  font-stretch: 87%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rosa-800);
}
.selo-aberto::before {
  content: "";
  width: 0.4375rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--rosa-700);
}

.evento__responsavel {
  font-size: var(--t-sm);
  color: var(--tinta-2);
}
.evento__responsavel strong {
  font-weight: 600;
  color: var(--tinta);
}
/* faltando não é o mesmo que vazio: o estado é declarado, não deixado em branco */
.evento__responsavel .pendente,
.pendente {
  font-style: italic;
  color: var(--tinta-3);
}

.evento__desc {
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--tinta-2);
}

/* programação: recolhida por padrão; o cartão fica com altura previsível */
.evento__prog { margin-top: var(--s-3xs); }
.evento__prog summary {
  display: flex;
  align-items: center;
  gap: var(--s-2xs);
  padding-block: var(--s-2xs);
  list-style: none;
  cursor: pointer;
  font: 700 var(--t-xs)/1.2 var(--fonte-display);
  font-stretch: 87%;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tinta-2);
  transition: color 140ms var(--saida);
}
.evento__prog summary > span { min-width: 0; }
.evento__prog summary::-webkit-details-marker { display: none; }
.evento__prog summary:hover { color: var(--verde-700); }
.evento__prog summary::after {
  content: "";
  width: 0.5rem; height: 0.5rem;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  rotate: 45deg;
  translate: 0 -0.125rem;
  transition: rotate 220ms var(--saida);
}
.evento__prog[open] summary::after { rotate: -135deg; translate: 0 0.0625rem; }

.evento__prog ul {
  display: grid;
  gap: 0.375rem;
  padding-top: var(--s-2xs);
  font-size: var(--t-sm);
  color: var(--tinta-2);
}
.evento__prog li {
  display: grid;
  grid-template-columns: 0.75rem 1fr;
  gap: var(--s-2xs);
  align-items: baseline;
  line-height: 1.4;
}
/* o quadrado do módulo faz o papel do marcador de lista */
.evento__prog li::before {
  content: "";
  width: 0.375rem; height: 0.375rem;
  border-radius: 0.0364rem;    /* 9,7% de 0,375rem */
  background: var(--verde-200);
  translate: 0 -0.125rem;
}

.evento__acao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2xs) var(--s-xs);
  margin-top: auto;
  padding-top: var(--s-sm);
  border-top: 1px solid var(--linha);
}

/* Ação secundária do cartão: leva ao cronograma daquela área. Vai para a
   outra ponta da linha e é texto, não caixa, para não competir com o botão
   vermelho de inscrição. */
.botao--sutil {
  margin-left: auto;
  padding-inline: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--verde-700);
}
.botao--sutil:hover { border-bottom-color: var(--verde); background: none; }

/* Sem link ainda: um estado, e não um botão morto. O círculo vazio faz par
   com o círculo cheio do selo "Inscrições abertas" — mesma gramática. */
.em-breve {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2xs);
  padding-block: 0.8125rem;      /* casa a linha de base com o botão vermelho */
  font: 600 var(--t-sm)/1.1 var(--fonte-display);
  color: var(--tinta-2);
}
.em-breve::before {
  content: "";
  width: 0.4375rem;
  aspect-ratio: 1;
  border: 1.5px solid var(--linha-forte);
  border-radius: 50%;
}

/* -------------------------------------- 10. como se inscrever (bloco) */

/* Fica acima da grade, sempre aberto: são três frases, e recolher isso só
   escondia o que a pessoa precisa ler antes de olhar os cartões. */
.guia {
  margin-bottom: var(--s-lg);
  padding: var(--s-md);
  background: var(--verde-100);
  border: 1px solid var(--verde-200);
  border-radius: var(--r-lg);
}

.guia__cabeca { display: grid; gap: var(--s-3xs); }
.guia__cabeca b {
  font-family: var(--fonte-display);
  font-size: var(--t-h3);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.014em;
  color: var(--verde-900);
}
.guia__cabeca small {
  font-size: var(--t-sm);
  color: var(--verde-800);
}

.passos {
  display: grid;
  gap: var(--s-md);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: var(--s-md) 0 0;
  padding: 0;
  list-style: none;
}

.passo {
  display: grid;
  gap: var(--s-3xs);
  align-content: start;
  padding-top: var(--s-xs);
  border-top: 2px solid var(--verde-200);
}
/* o primeiro passo é por onde se começa: só ele leva o fio cheio */
.passo:first-child { border-top-color: var(--verde); }

.passo__n {
  font-family: var(--fonte-display);
  font-size: 1.75rem;
  font-weight: 800;
  font-stretch: 104%;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--verde-600);
}
.passo h3 {
  font-size: var(--t-base);
  font-stretch: 100%;
  color: var(--verde-900);
}
.passo p:not(.passo__n) {
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--verde-800);
}
.passo b { font-weight: 700; }

.guia__nota {
  margin-top: var(--s-md);
  padding-top: var(--s-xs);
  border-top: 1px solid var(--verde-200);
  font-size: var(--t-sm);
  color: var(--verde-800);
}
.guia__nota a { color: var(--verde-700); font-weight: 600; }

/* ---------------------------------------------------------- 11. sobre/info */

.sobre { background: var(--papel-2); border-top: 1px solid var(--linha); }

.sobre__grade {
  display: grid;
  gap: clamp(var(--s-lg), 5vw, var(--s-3xl));
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
}

.sobre__texto p { color: var(--tinta-2); }
.sobre__texto strong { color: var(--tinta); font-weight: 600; }

.ficha {
  display: grid;
  gap: 0;
  padding: var(--s-md);
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
}
.ficha > div {
  display: grid;
  gap: var(--s-3xs);
  padding-block: var(--s-xs);
}
.ficha > div + div { border-top: 1px solid var(--linha); }
.ficha dt {
  font: 700 var(--t-xs)/1.2 var(--fonte-display);
  font-stretch: 87%;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.ficha dd {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--tinta);
}
.ficha dd a { color: var(--verde-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* --------------------------------------------------------------- 12. rodapé */

/* ------------------------------------- a fileira de marcas do rodapé

   Todas numa linha, dentro do verde: a instituição, o evento e os cinco
   eventos próprios da semana.

   As duas primeiras são SVG branco, feito para fundo escuro, e ficam soltas
   sobre o verde. As cinco dos eventos são tinta escura sobre claro e não
   existem em versão branca — cada uma ganha uma plaquinha, porque o problema
   delas é contraste, e recortar o fundo não acrescentaria contraste nenhum.

   As imagens já saíram do processamento com áreas equivalentes entre si — por
   isso aqui não há height nem max-width igualando nada. Igualar a altura no
   CSS desfaria o equilíbrio que o recorte buscou: a SIMVET é a única em pé, e
   com altura igual às outras ficaria estreita demais para ler. */
.marcas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;   /* alturas diferentes: alinham pelo meio */
  /* Apertado porque as plaquinhas já acrescentam respiro próprio: somadas,
     elas põem 80px na conta da largura, e a fileira só cabe numa linha se o
     vão ceder esse espaço. */
  gap: var(--s-sm);
  margin: 0 0 var(--s-xl);
  padding: 0;
  list-style: none;
}
.marcas li { display: flex; }
/* O width/height no HTML é a medida de exibição; os arquivos dos eventos têm
   o dobro de pixels, para tela densa. É assim que se serve 2x sem srcset: o
   atributo manda no tamanho, e os pixels sobrando viram nitidez. */
.marcas img { display: block; max-width: 100%; height: auto; }

/* a plaquinha: branca, cantos do sistema, respiro pequeno. Grande demais ela
   vira cartão e rouba a cena do rodapé; pequena demais a marca encosta na
   borda e parece recortada */
.marcas__placa {
  padding: var(--s-3xs) var(--s-2xs);
  background: #fff;
  border-radius: var(--r-sm);
}

/* o fio separa a assinatura institucional das marcas dos eventos: são coisas
   de natureza diferente na mesma linha */
.marcas__instituicao + .marcas__placa {
  padding-left: var(--s-xs);
  margin-left: var(--s-2xs);
  border-left: 1px solid var(--sobre-verde-fina);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

@media (max-width: 40rem) {
  /* quebrada em várias linhas, o fio penderia do nada */
  .marcas__instituicao + .marcas__placa {
    padding-left: var(--s-xs);
    margin-left: 0;
    border-left: 0;
    border-radius: var(--r-sm);
  }
}

.rodape {
  background: var(--verde-950);
  color: var(--sobre-verde-2);
  padding-block: var(--s-xl) var(--s-md);
  font-size: var(--t-sm);
}
.rodape__grade {
  display: grid;
  gap: var(--s-lg) var(--s-xl);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  padding-bottom: var(--s-md);
  border-bottom: 1px solid var(--sobre-verde-fina);
}
/* Não há regra de altura para .rodape img de propósito: cada marca da fileira
   já vem do processamento com a medida certa, calibrada por área. Uma altura
   fixa aqui atropelaria essa calibragem — era o que a regra antiga fazia. */
.rodape__grade p { max-width: 42ch; line-height: 1.5; }
.rodape__links {
  display: grid;
  gap: var(--s-2xs);
  font-family: var(--fonte-display);
  font-weight: 600;
}
.rodape__links a {
  text-decoration: none;
  color: var(--sobre-verde);
  transition: color 140ms var(--saida);
}
.rodape__links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2xs) var(--s-md);
  justify-content: space-between;
  padding-top: var(--s-md);
  font-size: var(--t-xs);
  color: var(--sobre-verde-3);
}
/* crédito da autoria: um tom acima da letra miúda em volta, para se achar
   sem disputar espaço com o nome da instituição */
.rodape__credito { color: var(--sobre-verde-2); }

/* --------------------------------------------------------------- 13. motion */

/* entrada do herói: escalonada, uma vez, e curta */
.heroi__grade > * {
  animation: sobe 640ms var(--expo) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes sobe {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Revelação no scroll conduzida pelo próprio scroll, sem JS. Onde
   animation-timeline não existe (Firefox, hoje), o conteúdo simplesmente
   nasce visível — nada fica escondido esperando um script que talvez
   não carregue. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .revela {
      animation: sobe 1ms linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 62%;
    }
  }
}

/* Abertura da programação com altura animada. Só onde ::details-content
   existe; nos outros navegadores o <details> abre de uma vez, como sempre. */
@supports selector(details::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    .evento__prog { interpolate-size: allow-keywords; }
    .evento__prog::details-content {
      block-size: 0;
      overflow: hidden;
      transition: block-size 300ms var(--saida),
                  content-visibility 300ms allow-discrete;
    }
    .evento__prog[open]::details-content { block-size: auto; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .heroi__grade > *,
  .heroi__marca { animation: aparece 240ms var(--saida) both; animation-delay: 0s; }
  .evento:hover { transform: none; }
  .botao:active { transform: none; }
  @keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
}

/* ----------------------------------------------------------- 14. responsivo */

/* cartão estreito: a programação recolhe sozinha para o cartão não virar coluna */
@container (max-width: 22rem) {
  .evento { padding: var(--s-sm); gap: var(--s-2xs); }
  .evento__acao { flex-wrap: wrap; }
}

@media (max-width: 62rem) {
  .sobre__grade { grid-template-columns: 1fr; }
  .rodape__grade { grid-template-columns: 1fr; }
}

/* com um cartão por linha, o botão ocupa a largura toda */
@media (max-width: 46rem) {
  .chamada h2 { max-width: none; }
  .envio__pe { justify-items: stretch; }
  .envio .botao { justify-content: center; }
}

@media (max-width: 48rem) {
  .marca__sigla { display: none; }
  .marca__logo { height: 2.375rem; }
  .heroi__rodape { align-items: start; }
  .contagem { text-align: left; }
}

/* o menu não desaparece no celular: ele deita e desliza */
@media (max-width: 40rem) {
  .topo__barra {
    flex-wrap: wrap;
    gap: var(--s-2xs);
    padding-bottom: var(--s-2xs);
  }
  .menu {
    order: 3;
    width: 100%;
    gap: var(--s-md);
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: var(--s-3xs);
    /* a borda do último item precisa de folga para não colar na direita */
    padding-right: var(--s-sm);
    /* sugere que há mais para o lado */
    mask-image: linear-gradient(to right, #000 0, #000 92%, transparent 100%);
  }
  .menu::-webkit-scrollbar { display: none; }
  .menu a { white-space: nowrap; }
  .heroi__tema span { font-stretch: 100%; }

  /* dois botões da largura da tela: alvo de toque grande e borda direita alinhada */
  .heroi__acoes { flex-direction: column; align-items: stretch; }
  .heroi__acoes .botao { justify-content: center; }

  /* o herói já está denso no celular; a textura não acrescenta nada aqui */
  .heroi::before { display: none; }
}

/* ------------------------------------------------------------ 15. impressão */

@media print {
  :root { --papel: #fff; }
  .topo, .heroi::before, .contagem, .pular { display: none !important; }
  .botao {
    padding: 0;
    border: 0;
    background: none !important;
    color: #000 !important;
    font-weight: 700;
  }
  .botao .seta { display: none; }
  .heroi { background: #fff; color: #000; padding-block: 0 var(--s-md); }
  .heroi h1, .heroi__tema span { color: #000; }
  .heroi .lead, .heroi__data { color: #333; }
  .revela { opacity: 1 !important; transform: none !important; }
  .evento, .ficha { break-inside: avoid; border-color: #bbb; }
  .evento__prog[open] summary::after, .evento__prog summary::after { display: none; }
  .rodape { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; word-break: break-all; }
}

/* ==========================================================================
   16. cronograma público
   Reaproveita os mesmos tokens, o mesmo módulo e a mesma gramática de
   estado ("a confirmar") do resto da página.
   ========================================================================== */

/* link do bloco de dias para o cronograma completo */
.dias__link { margin-top: var(--s-2xs); }
.dias__link a {
  font-family: var(--fonte-display);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--verde-700);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 140ms var(--saida);
}
.dias__link a:hover { border-bottom-color: var(--verde); }
.dias__link .seta { display: inline-block; transition: transform 160ms var(--saida); }
.dias__link a:hover .seta { transform: translateX(3px); }

/* cabeçalho curto das páginas internas: o herói, sem o peso do herói */
.heroi--curto { padding-block: clamp(2.5rem, 5vw, 3.75rem) clamp(2rem, 4vw, 3rem); }
.heroi--curto::before { display: none; }
.heroi--curto h1 {
  font-size: clamp(2rem, 1.45rem + 2.4vw, 3rem);
  color: #fff;
  max-width: none;
}
/* Os dois seletores acima e abaixo têm a mesma especificidade, e este vem
   depois só por estar mais adiante no arquivo. Como isso é frágil de ler,
   o modificador claro cobra a sua parte com especificidade maior: as duas
   classes no mesmo elemento. */
.heroi--claro.heroi--curto h1 { color: var(--tinta); }

/* a tarja de estado do cabeçalho de /trabalhos/ nasceu para o verde escuro:
   fio branco translúcido e número branco. Em papel rosa, nada disso aparece. */
.heroi--claro .estado {
  border-color: var(--linha);
  background: #fff;
}
.heroi--claro .estado__rotulo { color: var(--tinta-3); }
.heroi--claro .estado b       { color: var(--verde-700); }
/* depois de um cabeçalho curto, o respiro da seção de conteúdo é menor */
.heroi--curto + .secao { padding-top: clamp(2rem, 4vw, 3rem); }

/* filtros por curso/área */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2xs);
  margin-bottom: var(--s-xl);
}
.filtro {
  padding: 0.4375rem 0.8125rem;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: #fff;
  font-family: var(--fonte-display);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--tinta-2);
  text-decoration: none;
  transition: border-color 140ms var(--saida), color 140ms var(--saida),
              background-color 140ms var(--saida);
}
.filtro:hover { border-color: var(--linha-forte); color: var(--tinta); }
.filtro--ativo {
  background: var(--verde-900);
  border-color: var(--verde-900);
  color: var(--sobre-verde);
}
.filtro--ativo:hover { color: #fff; }

/* um dia do cronograma */
.crono-dia + .crono-dia { margin-top: var(--s-xl); }

.crono-dia__cabeca {
  display: flex;
  align-items: baseline;
  gap: var(--s-2xs);
  padding-bottom: var(--s-xs);
  border-bottom: 2px solid var(--verde);
  font-size: var(--t-h3);
  letter-spacing: -0.02em;
}
.crono-dia__numero { font-variant-numeric: tabular-nums; }
.crono-dia__mes { font-weight: 500; color: var(--tinta-2); }
.crono-dia__cabeca small {
  margin-left: auto;
  font-family: var(--fonte-display);
  font-size: var(--t-xs);
  font-weight: 700;
  font-stretch: 87%;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.crono-lista { display: grid; }
.crono-item {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: var(--s-md);
  padding-block: var(--s-md);
  border-bottom: 1px solid var(--linha);
}
/* Uma atividade pode acontecer mais de uma vez no mesmo dia — de manhã e de
   tarde, por exemplo. Nesse caso é um cartão só, com os horários empilhados
   aqui, um por linha: a coluna é estreita e "09:00 às 11:00 · 14:00 às 16:00"
   em linha corrida quebraria em lugar errado. */
.crono-item__hora {
  display: grid;
  gap: var(--s-3xs);
  font-family: var(--fonte-display);
  font-size: var(--t-base);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--verde-700);
  line-height: 1.4;
}
/* do segundo horário em diante, um grau abaixo: o primeiro é quando começa,
   que é o que a pessoa procura ao correr o olho pela coluna */
.crono-item__hora span ~ span {
  font-size: var(--t-sm);
  color: var(--tinta-3);
}
.crono-item__corpo { display: grid; gap: var(--s-2xs); min-width: 0; }
.crono-item h3 { font-size: 1.25rem; }
.crono-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2xs) var(--s-xs);
  font-size: var(--t-sm);
  color: var(--tinta-2);
}
.crono-item__desc {
  max-width: 66ch;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--tinta-2);
}

/* A inscrição da atividade. Botão de linha, e não vermelho: numa lista de
   vinte atividades, vinte botões vermelhos não destacariam nada. */
.crono-item__acao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2xs) var(--s-xs);
  margin-top: var(--s-3xs);
}
.crono-item__acao .botao { padding: 0.5rem 0.875rem; }
.crono-item__nota { font-size: var(--t-xs); color: var(--tinta-3); }

.crono-rodape {
  margin-top: var(--s-lg);
  font-size: var(--t-sm);
  color: var(--tinta-3);
}

/* estado vazio: explica o que está acontecendo, não só que não há nada */
.vazio {
  display: grid;
  gap: var(--s-xs);
  max-width: 52ch;
  padding: var(--s-lg);
  background: var(--verde-100);
  border: 1px solid var(--verde-200);
  border-radius: var(--r-lg);
  color: var(--verde-800);
}
.vazio__titulo {
  font-family: var(--fonte-display);
  font-size: var(--t-h3);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.014em;
  color: var(--tinta);
}
.vazio a { color: var(--verde-700); text-underline-offset: 2px; }

@media (max-width: 40rem) {
  .crono-item { grid-template-columns: 1fr; gap: var(--s-2xs); }
  .crono-dia__cabeca { flex-wrap: wrap; }
  .crono-dia__cabeca small { margin-left: 0; width: 100%; }
}

/* ==========================================================================
   17. página de submissão de trabalhos
   --------------------------------------------------------------------------
   A página tem três tempos: o estado (quando fecha), o que ler antes, e o
   envio. O envio fica no fim de propósito — é o último passo, e chegar nele
   depois de passar pelos documentos é a ordem certa de ler.
   ========================================================================== */

/* a tarja de estado no herói: a data é o que a pessoa veio conferir */
.estado {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-2xs) var(--s-sm);
  margin-top: var(--s-md);
  padding: var(--s-2xs) var(--s-md);
  border: 1px solid var(--sobre-verde-fina);
  border-radius: 999px;
  background: oklch(100% 0 0 / 0.06);
}
.estado__rotulo {
  font-family: var(--fonte-display);
  font-size: var(--t-xs);
  font-weight: 700;
  font-stretch: 87%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sobre-verde-3);
}
.estado b {
  font-family: var(--fonte-display);
  font-size: var(--t-h3);
  font-weight: 800;
  font-stretch: 104%;
  letter-spacing: -0.02em;
  color: #fff;
}

/* os documentos: lista, e não grade. São poucos e de peso desigual — o
   regulamento não é irmão do modelo de resumo —, e em linha cada um fica
   com a largura do próprio texto em vez de esticar para fechar a coluna. */
.docs {
  display: grid;
  gap: var(--s-sm);
  list-style: none;
  max-width: 56rem;
}

.doc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-md);
  padding: var(--s-md);
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  transition: border-color 140ms var(--saida), box-shadow 140ms var(--saida);
}
.doc:hover {
  border-color: var(--linha-forte);
  box-shadow: 0 12px 28px -18px oklch(22% 0.03 146 / 0.5);
}

/* a etiqueta de formato faz as vezes de ícone: diz PDF, DOCX ou "link" —
   que é a única coisa que a pessoa precisa saber antes de clicar. */
.doc__formato {
  display: grid;
  place-items: center;
  min-width: 3.5rem;
  padding: var(--s-2xs) var(--s-xs);
  border-radius: var(--r-sm);
  background: var(--verde-100);
  color: var(--verde-800);
  font: 800 var(--t-xs)/1 var(--fonte-display);
  font-stretch: 87%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.doc__corpo h4 {
  font-size: var(--t-base);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.doc__desc {
  margin-top: var(--s-3xs);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--tinta-2);
}
.doc__meta {
  margin-top: var(--s-3xs);
  font-size: var(--t-xs);
  color: var(--tinta-3);
}

/* Cronograma da submissão: quatro etapas em faixa cinza, no mesmo tratamento
   da programação da home — cartão branco sobre papel cinza, fio verde em cima.
   A ordem é o conteúdo, por isso <ol>: o número não é enfeite, é a etapa. */
.etapas {
  background: var(--papel-2);
  border-block: 1px solid var(--linha);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.etapas__vazio { max-width: var(--prosa); color: var(--tinta-2); }

.etapas__lista {
  display: grid;
  gap: var(--s-sm);
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  margin: var(--s-md) 0 0;
  padding: 0;
  list-style: none;
}

.etapa {
  display: grid;
  gap: var(--s-3xs);
  align-content: start;
  padding: var(--s-sm) var(--s-md) var(--s-md);
  background: #fff;
  border: 1px solid var(--linha);
  border-top: 3px solid var(--verde-200);
  border-radius: var(--r-md);
}
/* o resultado é o que a pessoa veio procurar: é a única etapa em destaque */
.etapa--fecho {
  background: var(--verde-100);
  border-color: var(--verde-200);
  border-top-color: var(--verde);
}

.etapa__n {
  font-family: var(--fonte-display);
  font-size: var(--t-xs);
  font-weight: 800;
  font-stretch: 87%;
  letter-spacing: 0.12em;
  color: var(--verde-600);
  font-variant-numeric: tabular-nums;
}
.etapa h4 {
  font-size: var(--t-xs);
  font-family: var(--fonte-display);
  font-weight: 700;
  font-stretch: 87%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.etapa__data {
  font-family: var(--fonte-display);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 800;
  font-stretch: 104%;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--verde-900);
  text-wrap: balance;
}
.etapa__desc {
  margin-top: var(--s-3xs);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--tinta-2);
  max-width: 26ch;
}
.etapa--fecho .etapa__desc { color: var(--verde-800); }

/* O envio, no fim da página. Era faixa escura e encostava no rodapé, também
   escuro: as duas viravam uma mancha só e o botão se perdia bem onde ele
   precisa ser visto. Como cartão claro sobre o papel, com o fio vermelho em
   cima, ele volta a ser um objeto — e o único rosa forte da página é o botão. */
.secao--fecho { padding-block: clamp(1rem, 2vw, 1.5rem) var(--s-3xl); }

.envio-final {
  display: grid;
  justify-items: start;
  gap: var(--s-2xs);
  max-width: 48rem;
  margin-inline: auto;
  padding: clamp(var(--s-lg), 4vw, var(--s-2xl));
  background: #fff;
  border: 1px solid var(--linha);
  border-top: 4px solid var(--rosa-700);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 60px -32px oklch(22% 0.03 146 / 0.55);
  text-align: left;
}
.envio-final h3 {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.375rem);
  max-width: 18ch;
}
.envio-final__nota {
  max-width: 46ch;
  line-height: 1.6;
  color: var(--tinta-2);
}
.envio-final__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xs);
  margin-top: var(--s-sm);
}
/* fechado, o fio de cima não promete ação que ainda não existe */
.envio-final:not(.envio-final--aberto) { border-top-color: var(--linha-forte); }

/* documento lido no próprio site (o regulamento) */
.voltar-publico { margin-bottom: var(--s-md); font-size: var(--t-sm); }
.voltar-publico a { color: var(--verde-700); text-underline-offset: 2px; }

.documento__baixar { margin-bottom: var(--s-xl); }

.documento {
  max-width: var(--prosa);
  font-size: var(--t-base);
  line-height: 1.7;
  color: var(--tinta);
}
.documento h2 {
  margin-top: var(--s-xl);
  margin-bottom: var(--s-2xs);
  font-size: var(--t-h3);
  scroll-margin-top: 6rem;
}
.documento h2:first-child { margin-top: 0; }
.documento p + p,
.documento ul + p { margin-top: var(--s-sm); }
.documento ul {
  margin-top: var(--s-sm);
  padding-left: var(--s-md);
  list-style: disc;
}
.documento li + li { margin-top: var(--s-3xs); }

.documento__fim {
  margin-top: var(--s-2xl);
  padding-top: var(--s-md);
  border-top: 1px solid var(--linha);
}

/* documento anunciado e ainda sem arquivo: fica na lista, mas sem prometer
   botão — é a mesma ideia do "a confirmar" do resto do site */
.doc--breve { background: var(--papel-2); border-style: dashed; }
.doc--breve .doc__formato { background: var(--papel-3); color: var(--tinta-3); }
.doc--breve h4 { color: var(--tinta-2); }

@media (max-width: 40rem) {
  /* o botão desce para a linha de baixo e ocupa a largura toda: em tela
     estreita, três colunas deixavam o título em duas palavras por linha. */
  .doc { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-sm); }
  .doc__acao { grid-column: 1 / -1; }
  .doc__acao .botao { width: 100%; justify-content: center; }
  .envio-final__botoes .botao { width: 100%; justify-content: center; }
}

/* ----------------------------------------------- as mostras em /trabalhos/

   A página tem uma mostra abaixo da outra, cada uma com documentos, datas
   e envio. O cabeçalho de cada mostra é o que diz "começou outra": um fio
   rosa grosso em cima, o nome em corpo de título de seção. */

/* os atalhos do herói: o nome de cada mostra e o prazo dela */
.atalhos-mostras {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xs);
  margin-top: var(--s-md);
  list-style: none;
}
/* crescem até a largura do texto e, no celular, ocupam a linha toda: dois
   cartões de larguras diferentes empilhados pareciam desalinhados */
.atalhos-mostras li { flex: 1 1 16rem; max-width: 26rem; }
.atalhos-mostras a {
  height: 100%;
  display: grid;
  gap: 0.125rem;
  padding: var(--s-xs) var(--s-md);
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  color: var(--tinta);
  text-decoration: none;
  transition: border-color 140ms var(--saida), box-shadow 140ms var(--saida);
}
.atalhos-mostras a:hover {
  border-color: var(--linha-forte);
  box-shadow: 0 12px 28px -18px oklch(22% 0.03 146 / 0.5);
}
.atalhos-mostras__nome {
  font: 800 var(--t-base)/1.25 var(--fonte-display);
  letter-spacing: -0.01em;
}
.atalhos-mostras__estado {
  font-size: var(--t-sm);
  color: var(--verde-700);
}

.mostra__cabeca {
  padding-top: clamp(3rem, 6vw, 4.5rem);
  border-top: 4px solid var(--rosa-700);
}
/* a primeira encosta no herói, que já separa: o fio seria costura dupla */
.heroi + .mostra .mostra__cabeca { border-top: 0; padding-top: clamp(2rem, 4vw, 3rem); }
.mostra__cabeca h2 { margin-top: var(--s-2xs); text-wrap: balance; }

.mostra__resumo {
  max-width: var(--prosa);
  margin-top: var(--s-sm);
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--tinta-2);
}
.mostra__resumo p + p,
.mostra__resumo ul + p,
.mostra__resumo p + ul { margin-top: var(--s-sm); }
.mostra__resumo ul { padding-left: var(--s-md); list-style: disc; }
.mostra__resumo b { color: var(--tinta); }

/* o cabeçalho já respira em cima; a seção de documentos não precisa dobrar */
.mostra__cabeca + .secao { padding-top: clamp(2rem, 4vw, 3rem); }
.mostra .cabeca-secao { margin-bottom: var(--s-lg); }