/* ==========================================================================
   NordesteLAB 2026 — Site
   Estética: papel, xilogravura, cordel. Cores e texturas da arte oficial.
   ========================================================================== */

/* ---------- Tokens ---------- */

:root {
  --papel: #fbf8ef;
  --papel-2: #f2ead8;
  --tinta: #262523;
  --tinta-2: #55524d;
  --vermelho: #d2241b;
  --vermelho-escuro: #a3170f;
  --laranja: #ee8a2e;
  --amarelo: #f5c21f;
  --verde: #2f6b37;
  --verde-escuro: #1d4526;

  --fonte: "Mona Sans", "Helvetica Neue", Arial, sans-serif;

  /* moldura de xilogravura do hero (fatias: 64 topo/direita, 56 esquerda) */
  --moldura: clamp(16px, 1.7vw, 36px);
  --moldura-esq: calc(var(--moldura) * 56 / 64);
  --moldura-visivel: calc(var(--moldura) * 0.55);

  --respiro: clamp(20px, 5.5vw, 88px);
  --largura: 1280px;
  --topo-altura: 72px;

  --sombra: 6px 6px 0 var(--tinta);
  --sombra-leve: 4px 4px 0 var(--tinta);
  --borda: 2px solid var(--tinta);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topo-altura) + 16px);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--papel) url("../assets/img/papel.jpg") center top / 1600px auto repeat;
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: 1.0625rem;
  font-weight: 450;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--vermelho);
}

:focus-visible {
  outline: 3px solid var(--vermelho);
  outline-offset: 3px;
}

h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  padding: 0;
  list-style: none;
}

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

.visualmente-oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.pular-conteudo {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--tinta);
  color: var(--papel);
  font-weight: 700;
  transform: translateY(-200%);
}

.pular-conteudo:focus {
  transform: none;
}

/* ---------- Tipografia ---------- */

.expandida {
  font-stretch: 125%;
}

.titulo-xl,
.titulo-lg,
.titulo-md,
.titulo-sm {
  font-stretch: 125%;
  font-weight: 900;
  line-height: 0.98;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.titulo-xl { font-size: clamp(2.3rem, 1rem + 5.2vw, 6rem); }
.titulo-lg { font-size: clamp(1.9rem, 1rem + 3.2vw, 3.9rem); }
.titulo-md { font-size: clamp(1.35rem, 1rem + 1.2vw, 2rem); line-height: 1.05; }
.titulo-sm { font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem); line-height: 1.15; }

.condensado {
  font-stretch: 75%;
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.01em;
}

.destaque { color: var(--vermelho); }

.rotulo {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.8rem;
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rotulo::before {
  content: "";
  width: 0.8em;
  height: 0.8em;
  background: var(--vermelho);
  box-shadow: 1.1em 0 0 var(--amarelo);
  margin-right: 1.1em;
}

.lead {
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  line-height: 1.5;
  font-weight: 500;
  text-wrap: pretty;
}

.texto p + p {
  margin-top: 1em;
}

.texto p {
  text-wrap: pretty;
  max-width: 64ch;
}

/* textura de impressão (pintas cor de papel por cima do texto) */
.impresso {
  position: relative;
}

.impresso::after {
  content: "";
  position: absolute;
  inset: -0.2em;
  background: url("../assets/img/granulado.png") 0 0 / 200px;
  pointer-events: none;
}

/* ---------- Layout ---------- */

.container {
  width: min(var(--largura), 100% - 2 * var(--respiro));
  margin-inline: auto;
}

.secao {
  position: relative;
  padding-block: clamp(72px, 10vw, 150px);
}

.secao--vermelha {
  background: var(--vermelho) url("../assets/img/papel-vermelho.jpg") center / cover;
  color: var(--papel);
}

.secao--amarela {
  background: var(--amarelo) url("../assets/img/papel-amarelo.jpg") center / cover;
}

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

.secao--vermelha .rotulo::before,
.secao--tinta .rotulo::before {
  background: var(--papel);
  box-shadow: 1.1em 0 0 var(--amarelo);
}

.secao--vermelha a:hover,
.secao--tinta a:hover {
  color: var(--amarelo);
}

.secao__cabeca {
  display: grid;
  gap: 20px;
  margin-bottom: clamp(40px, 6vw, 80px);
}

.secao__cabeca--linha {
  grid-template-columns: 1fr auto;
  align-items: end;
  column-gap: 40px;
}

@media (max-width: 760px) {
  .secao__cabeca--linha {
    grid-template-columns: 1fr;
    justify-items: start;
  }
}

/* faixa de "película": quadradinhos do logo */
.pelicula {
  height: 14px;
  background:
    repeating-linear-gradient(90deg,
      var(--vermelho) 0 14px, transparent 14px 26px,
      var(--amarelo) 26px 40px, transparent 40px 52px,
      var(--vermelho) 52px 66px, var(--vermelho) 66px 80px, transparent 80px 92px,
      var(--tinta) 92px 106px, transparent 106px 118px);
}

/* ---------- Botões: recorte de papel ----------
   Duas camadas de papel cortado à mão (frente e fundo, com cantos tortos).
   No hover as camadas se desencontram. Cores por variante/contexto via
   --frente e --fundo. */

.botao {
  --frente: var(--vermelho) url("../assets/img/papel-vermelho.jpg") center / cover;
  --fundo: var(--amarelo) url("../assets/img/papel-amarelo.jpg") center / cover;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 52px;
  padding: 1em 1.8em;
  border: 0;
  background: none;
  color: var(--papel);
  font: inherit;
  font-size: 0.9rem;
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.botao::before,
.botao::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: translate 0.25s var(--ease), rotate 0.25s var(--ease);
}

.botao::before {
  z-index: -1;
  background: var(--frente);
  clip-path: polygon(1% 12%, 97% 0%, 100% 84%, 5% 100%);
}

.botao::after {
  z-index: -2;
  background: var(--fundo);
  clip-path: polygon(4% 0%, 100% 14%, 95% 100%, 0% 88%);
  translate: 6px 6px;
}

.botao:hover {
  color: var(--papel);
}

.botao:hover::before {
  rotate: -1.5deg;
}

.botao:hover::after {
  translate: 10px 9px;
  rotate: 1.5deg;
}

.botao:active::before {
  translate: 3px 3px;
}

.botao--claro,
.botao--claro:hover {
  --frente: var(--papel);
  --fundo: var(--tinta);
  color: var(--tinta);
}

.botao--amarelo,
.botao--amarelo:hover {
  --frente: var(--amarelo) url("../assets/img/papel-amarelo.jpg") center / cover;
  --fundo: var(--tinta);
  color: var(--tinta);
}

/* sobre vermelho: frente de papel */
:is(.secao--vermelha, .gravura--vermelha) .botao,
:is(.secao--vermelha, .gravura--vermelha) .botao:hover {
  --frente: var(--papel);
  --fundo: var(--amarelo) url("../assets/img/papel-amarelo.jpg") center / cover;
  color: var(--tinta);
}

:is(.secao--vermelha, .gravura--vermelha) .botao--claro,
:is(.secao--vermelha, .gravura--vermelha) .botao--claro:hover {
  --frente: var(--amarelo) url("../assets/img/papel-amarelo.jpg") center / cover;
  --fundo: var(--tinta);
}

/* sobre amarelo: fundo escuro */
:is(.secao--amarela, .gravura--amarela) .botao {
  --fundo: var(--tinta);
}

.botao[aria-disabled="true"],
.botao:disabled {
  --frente: var(--papel-2);
  --fundo: transparent;
  color: var(--tinta-2);
  cursor: default;
}

.botao[aria-disabled="true"]::before,
.botao[aria-disabled="true"]::after,
.botao:disabled::before,
.botao:disabled::after {
  rotate: 0deg;
  translate: 0 0;
}

.botao .seta {
  transition: translate 0.2s var(--ease);
}

.botao:hover .seta {
  translate: 4px 0;
}

.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-stretch: 125%;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
}

.selo {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 0.7em;
  border: 2px solid currentColor;
  font-size: 0.72rem;
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.selo--breve::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--laranja);
  animation: pulsar 1.8s ease-in-out infinite;
}

@keyframes pulsar {
  50% { opacity: 0.25; }
}

/* ---------- Topo (cabeçalho fixo) ---------- */

.topo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  transition: background-color 0.3s, box-shadow 0.3s, padding 0.3s var(--ease);
}

.topo--sobre-hero {
  padding: var(--moldura-visivel) var(--moldura-visivel) 0;
}

.topo__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--topo-altura);
  padding-inline: clamp(16px, 3vw, 40px);
}

.topo--solido {
  background: var(--papel) url("../assets/img/papel.jpg") center top / 1600px auto;
}

.topo__logo {
  flex: 0 0 auto;
  display: block;
  width: clamp(124px, 10.5vw, 158px);
  transition: opacity 0.3s, transform 0.3s var(--ease);
}

.topo--sobre-hero .topo__logo {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.menu {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
}

.menu__lista {
  display: flex;
  gap: clamp(14px, 2vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__lista a {
  position: relative;
  font-size: 0.78rem;
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.menu__lista a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 3px;
  background: var(--vermelho);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}

.menu__lista a:hover::after,
.menu__lista a[aria-current="page"]::after {
  transform: none;
}

.menu__lista a:hover {
  color: inherit;
}

.menu .botao {
  min-height: 44px;
  padding: 0.7em 1.1em;
  font-size: 0.74rem;
}

.menu-botao {
  position: relative;
  isolation: isolate;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 0;
  background: none;
  color: var(--papel);
  font: inherit;
  font-size: 0.75rem;
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.menu-botao::before,
.menu-botao::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.menu-botao::before {
  z-index: -1;
  background: var(--tinta);
  clip-path: polygon(2% 10%, 96% 0%, 100% 88%, 5% 100%);
}

.menu-botao::after {
  z-index: -2;
  background: var(--vermelho);
  clip-path: polygon(5% 0%, 100% 12%, 94% 100%, 0% 90%);
  translate: 4px 4px;
}

.menu-botao__icone {
  position: relative;
  width: 20px;
  height: 2px;
  background: currentColor;
}

.menu-botao__icone::before,
.menu-botao__icone::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
}

.menu-botao__icone::before { top: -6px; }
.menu-botao__icone::after { top: 6px; }

@media (max-width: 1080px) {
  .menu-botao {
    display: inline-flex;
  }

  .menu {
    position: fixed;
    inset: 0;
    z-index: 85;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    padding: 88px clamp(28px, 8vw, 64px);
    background: var(--vermelho) url("../assets/img/papel-vermelho.jpg") center / cover;
    color: var(--papel);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 0.3s, transform 0.35s var(--ease), visibility 0s 0.35s;
  }

  .menu--aberto {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.3s, transform 0.35s var(--ease);
  }

  .menu__lista {
    flex-direction: column;
    gap: 14px;
  }

  .menu__lista a {
    font-size: clamp(1.6rem, 7vw, 3rem);
    font-weight: 900;
    letter-spacing: -0.01em;
  }

  .menu__lista a::after {
    background: var(--amarelo);
    bottom: -2px;
  }

  .menu__lista a:hover {
    color: var(--amarelo);
  }

  .menu .botao {
    min-height: 52px;
    font-size: 0.85rem;
  }

  .menu__fechar {
    color: var(--tinta);
  }

  .menu__fechar::before {
    background: var(--papel);
  }

  .menu__fechar::after {
    background: var(--tinta);
  }

  .menu__fechar {
    position: absolute;
    top: 16px;
    right: 16px;
  }
}

@media (min-width: 1081px) {
  .menu__fechar {
    display: none;
  }
}

/* ---------- Hero (home) ----------
   Conteúdo à esquerda, ilustração à direita. A arte (hero-lado, 4670×847) tem
   o chão estendido para a esquerda: ele corre sob o conteúdo até a moldura.
   Medidas da arte em frações da altura (--h): núcleo de 3.0543h a 4.6375h,
   centro em 3.8453h, chão com 0.0933h de altura na esquerda. */

.hero {
  container-type: inline-size;
  --logo: clamp(220px, min(22vw, 42svh), 540px);
  --gap: clamp(24px, 3.4svh, 44px);
  /* texto + ilustração formam um conjunto centralizado que ocupa
     --largura-grupo da tela; aumente para abrir, diminua para concentrar */
  --largura-grupo: 86cqw;
  --entre: clamp(40px, 3.5cqw, 80px);
  /* ilustração: até 76% da altura da tela, limitada pela largura que sobra no
     conjunto (núcleo da arte = 1.583·h de largura). O topo da arte passa do
     topo do texto; o texto fica centralizado na altura da tela. */
  --h: min(76svh, (var(--largura-grupo) - var(--logo) - var(--entre)) / 1.583);
  --grupo-x: calc((100cqw - var(--logo) - var(--entre) - var(--h) * 1.583) / 2);
  /* altura do conteúdo ≈ 0.615·logo + 52px + 2 gaps (medido) */
  --conteudo: calc(var(--logo) * 0.615 + 52px + 2 * var(--gap));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: end;
  min-height: 100vh;
  min-height: 100svh;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-style: solid;
  border-color: transparent;
  border-width: var(--moldura) var(--moldura) var(--moldura) var(--moldura-esq);
  border-image: url("../assets/img/moldura-completa.webp") 64 64 64 56 / var(--moldura) var(--moldura) var(--moldura) var(--moldura-esq) stretch;
}

.hero__conteudo {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: var(--gap);
  width: var(--logo);
  margin-left: var(--grupo-x);
  /* bloco de texto centralizado na altura da tela (folga igual em cima e
     embaixo, então o centro do conteúdo é o centro do hero) */
  align-self: center;
  padding-block: calc(var(--topo-altura) + var(--moldura-visivel) + 16px);
}

.hero__marca {
  width: 100%;
}

.hero__info {
  position: relative;
  display: grid;
  justify-items: start;
  text-transform: uppercase;
  font-stretch: 125%;
  line-height: 1;
}

.hero__local,
.hero__chamada {
  font-size: calc(var(--logo) * 0.037);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.hero__data {
  margin: 0.24em 0 0.2em;
  color: var(--vermelho);
  /* largura da data = largura do logo */
  font-size: calc(var(--logo) / 12.7);
  font-weight: 900;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* contagem regressiva: 4 fichas escuras com a largura do logo; os dias em
   vermelho, para chamar o olho primeiro */
.hero__contagem {
  --u: var(--logo);
  width: 100%;
  margin-top: calc(var(--u) * 0.05);
}

.hero__contagem-titulo {
  margin: 0 0 calc(var(--u) * 0.028);
  font-size: calc(var(--u) * 0.038);
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.hero__contagem-grade {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 1fr;
  gap: calc(var(--u) * 0.025);
}

.hero__contagem-bloco {
  position: relative;
  display: grid;
  justify-items: center;
  gap: calc(var(--u) * 0.006);
  margin: 0;
  padding: calc(var(--u) * 0.045) 0 calc(var(--u) * 0.036);
  background: var(--tinta) url("../assets/img/granulado.png") 0 0 / 180px;
  background-blend-mode: soft-light;
  color: var(--papel);
  clip-path: polygon(1% 4%, 98% 0, 100% 95%, 3% 100%);
}

.hero__contagem-bloco:nth-child(even) { clip-path: polygon(0 0, 97% 3%, 100% 100%, 2% 96%); }

.hero__contagem-bloco--dias {
  background-color: var(--vermelho);
  background-image: url("../assets/img/papel-vermelho.jpg");
  background-size: cover;
  background-blend-mode: normal;
}

.hero__contagem-valor {
  font-size: calc(var(--u) * 0.17);
  font-variant-numeric: tabular-nums;
  line-height: 0.95;
}

.hero__contagem-bloco--dias .hero__contagem-valor {
  font-size: calc(var(--u) * 0.205);
}

.hero__contagem-rotulo {
  font-size: calc(var(--u) * 0.026);
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero__arte {
  /* recuo sob a faixa da moldura: a borda externa da faixa entra até 13/64 */
  --recuo: calc(var(--moldura) * 17 / 64);
  position: absolute;
  inset: var(--recuo);
  z-index: 1;
  margin: 0;
  overflow: clip;
  pointer-events: none;
}

/* ---- palco pop-up ----
   A ilustração é montada em camadas (coordenadas em % da arte 4670×847).
   Entrada: cada camada "brota" do chão, de trás para a frente, como um livro
   pop-up. Rolagem (--p): as camadas se desmontam em velocidades diferentes,
   as de trás tombando para trás. Mouse (--mx, --my): leve paralaxe de
   profundidade. */
.hero__palco {
  position: absolute;
  bottom: 0;
  /* borda esquerda do núcleo logo depois do texto (núcleo começa em 3.0543·h) */
  left: calc(var(--grupo-x) + var(--logo) + var(--entre) - var(--h) * 3.0543 - var(--recuo));
  width: calc(var(--h) * 5.5136);
  height: var(--h);
  perspective: calc(var(--h) * 2.6);
  perspective-origin: 70% 90%;
}

.camada {
  --prof: 0;
  --cai: 0;
  --tomba: 0deg;
  --cresce: 0;
  position: absolute;
  max-width: none;
  translate:
    calc(var(--mx, 0) * var(--prof) * var(--h) * 0.03)
    calc(var(--p, 0) * var(--cai) * var(--h) + var(--my, 0) * var(--prof) * var(--h) * 0.015);
  rotate: x calc(var(--p, 0) * var(--tomba));
  scale: calc(1 + var(--p, 0) * var(--cresce));
  transition: translate 0.25s linear;
}

.camada--chao   { left: 0;        top: 0;        width: 100%;     height: 100%;     transform-origin: 50% 82%; --prof: 0.2; --cai: 0.08; }
.camada--fundo  { left: 55.3961%; top: 0.9445%;  width: 30.6424%; height: 87.3672%; transform-origin: 50% 93.5%; --prof: -0.6; --cai: 0.22; --tomba: 38deg; }
.camada--meio   { left: 55.7816%; top: 27.0366%; width: 26.7238%; height: 72.9634%; transform-origin: 50% 76%;   --prof: -0.2; --cai: 0.17; --tomba: 24deg; }
.camada--vitorias  { left: 55.6959%; top: 71.9008%; width: 30.3426%; height: 28.0992%; transform-origin: 50% 85%;  --prof: 0.4; --cai: 0.1; }
.camada--carrancas { left: 64.4968%; top: 53.719%;  width: 12.6552%; height: 46.281%;  transform-origin: 50% 100%; --prof: 0.7; --cai: 0.02; --cresce: 0.06; }
.camada--onca      { left: 67.2163%; top: 79.1027%; width: 7.2163%;  height: 20.8973%; transform-origin: 50% 100%; --prof: 1;   --cai: -0.06; --cresce: 0.12; }

.hero__conteudo > * {
  translate: 0 calc(var(--p, 0) * -70px);
  opacity: calc(1 - var(--p, 0) * 1.3);
}

/* retrato (celular e tablet em pé): conteúdo em cima, centralizado; arte embaixo */

@media (max-width: 767px), (max-aspect-ratio: 1/1) {
  .hero {
    --logo: min(62vw, 470px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 100svh;
    --gap: clamp(18px, 2.6svh, 32px);
  }

  .hero__conteudo {
    flex: 1;
    align-content: center;
    justify-items: center;
    margin: 0 auto;
    padding: calc(var(--topo-altura) + var(--moldura-visivel) + 4vw) 0 6vw;
    text-align: center;
  }

  .hero__info {
    justify-items: center;
  }

  .hero__contagem {
    --u: min(var(--logo), 78vw);
    width: var(--u);
  }

  .hero__arte {
    --h: 63vw;
    position: relative;
    inset: auto;
    align-self: stretch;
    flex: none;
    height: var(--h);
    margin: 0 var(--recuo) var(--recuo);
  }

  .hero__palco {
    left: calc(50% - var(--h) * 3.8453);
    perspective-origin: 50% 90%;
  }
}

@media (max-width: 767px) {
  .hero {
    --logo: 72vw;
  }

  .hero__arte {
    --h: 76vw;
  }
}

/* ---------- Identidade "gravura" (todos os cards) ----------
   Moldura de xilogravura, a mesma linguagem do hero. O fundo é desenhado um
   pouco para dentro (--recuo) para ficar sempre escondido sob a faixa preta:
   a borda externa da faixa entra até 13/64 e a interna começa em 22/64. */

.gravura {
  --borda-card: clamp(18px, 1.6vw, 24px);
  --recuo: calc(var(--borda-card) * 17 / 64);
  --giro: 0deg;
  position: relative;
  isolation: isolate;
  border: var(--recuo) solid transparent;
  background-color: var(--papel-2);
  background-clip: padding-box;
  color: var(--tinta);
  rotate: var(--giro);
  transition: rotate 0.45s var(--ease), translate 0.45s var(--ease), background-color 0.25s,
    opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

/* moldura (cobre também a faixa transparente do recuo) */
.gravura::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--recuo));
  z-index: 1;
  pointer-events: none;
  border: var(--borda-card) solid transparent;
  border-image: url("../assets/img/moldura-card.webp") 64 / var(--borda-card) stretch;
}

/* granulado de impressão */
.gravura::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("../assets/img/granulado.png") 0 0 / 180px;
  opacity: 0.35;
}

.gravura > :not([class*="__arte"]) {
  position: relative;
  z-index: 2;
}

.gravura--fina {
  --borda-card: clamp(14px, 1.15vw, 18px);
}

.gravura--papel { background-color: var(--papel); }

.gravura--vermelha {
  background: var(--vermelho) url("../assets/img/papel-vermelho.jpg") center / cover padding-box;
  color: var(--papel);
}

.gravura--amarela {
  background: var(--amarelo) url("../assets/img/papel-amarelo.jpg") center / cover padding-box;
}

.gravura--laranja { background-color: var(--laranja); }

.gravura--verde {
  background-color: var(--verde);
  color: var(--papel);
}

.gravura--escura {
  background-color: var(--tinta);
  color: var(--papel);
}

.gravura--verde::after,
.gravura--escura::after {
  opacity: 0.16;
}

.gravura--vermelha .rotulo::before,
.gravura--escura .rotulo::before,
.gravura--verde .rotulo::before {
  background: var(--papel);
  box-shadow: 1.1em 0 0 var(--amarelo);
}

.gravura--vermelha a:hover,
.gravura--escura a:hover {
  color: var(--amarelo);
}

/* no fundo escuro, a gravura vira negativo: moldura cor de papel */
.gravura--escura::before {
  filter: invert(1) sepia(0.2);
}

/* leve inclinação de cartaz colado */
:is(.gravura--inclinada:nth-child(3n + 1), li:nth-child(3n + 1) > .gravura--inclinada) { --giro: -0.8deg; }
:is(.gravura--inclinada:nth-child(3n + 2), li:nth-child(3n + 2) > .gravura--inclinada) { --giro: 0.6deg; }
:is(.gravura--inclinada:nth-child(3n), li:nth-child(3n) > .gravura--inclinada) { --giro: -0.35deg; }

a.gravura {
  text-decoration: none;
}

a.gravura:hover,
.gravura--interativa:hover {
  color: inherit;
  rotate: 0deg;
  translate: 0 -6px;
}

/* ---------- Cenas: ilustrações de composição ligadas à rolagem ----------
   O JS escreve --p (0 → 1) conforme o elemento atravessa a tela (ou, em
   data-cena="saida", conforme a página rola a partir do topo). Tudo é
   calculado a partir de --p, então a animação volta ao rolar para cima. */

.cena-caixa {
  position: relative;
  overflow: clip;
}

/* carranca: emerge do rio e navega, balançando com a rolagem. A arte é um
   recorte (o barco termina num corte reto à direita), então ela encosta na
   borda direita da tela e o corte fica escondido para fora. */
.cena-caixa--carranca {
  align-self: center;
  height: clamp(360px, 40vw, 640px);
  margin-right: calc(-1 * max(var(--respiro), (100vw - var(--largura)) / 2));
}

.cena-caixa--carranca img {
  --e: clamp(0, calc((var(--p, 0.6) - 0.1) * 2.4), 1);
  position: absolute;
  right: -4%;
  bottom: calc(clamp(28px, 2.6vw, 40px) * 0.35);
  width: auto;
  height: 92%;
  max-width: none;
  transform-origin: 60% 100%;
  translate: 0 calc((1 - var(--e)) * 95%);
  rotate: calc(sin(calc(var(--p, 0.6) * 18.85rad)) * 4.5deg);
}

/* o "rio": faixa de xilogravura (a mesma da moldura do hero) */
.cena-caixa--carranca::after {
  --rio: clamp(28px, 2.6vw, 40px);
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--rio);
  /* faixa de xilogravura contínua: a "água" corre conforme a rolagem */
  background: url("../assets/img/faixa-xilo.webp") 0 0 / auto 100% repeat-x;
  background-position-x: calc(var(--p, 0.6) * -900px);
}

/* capivara: entra caminhando pela direita, com o passo marcado pela rolagem */
.cena-capivara {
  --e: clamp(0, calc((var(--p, 0.6) - 0.08) * 2.3), 1);
  --onda: sin(calc(var(--p, 0.6) * 44rad));
  --passo: max(var(--onda), calc(-1 * var(--onda)));
  position: absolute;
  z-index: 0;
  right: calc(-1 * var(--respiro));
  top: 50%;
  width: clamp(260px, 40vw, 640px);
  max-width: none;
  pointer-events: none;
  transform-origin: 50% 100%;
  translate: calc((1 - var(--e)) * 75%) calc(-50% - var(--passo) * 16px * (1 - var(--e)));
  rotate: calc(var(--onda) * 2.5deg * (1 - var(--e)));
}

/* onça: avança devagar, baixa e se ergue, como quem espreita */
.cena-onca {
  --e: clamp(0, calc((var(--p, 0.6) - 0.1) * 2), 1);
  transform-origin: 70% 100%;
  translate: calc(-1 * (1 - var(--e)) * 60%) 0;
  scale: 1 calc(0.9 + var(--e) * 0.1);
}

/* ---------- Sobre (home) ---------- */

.sobre {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 120px);
  align-items: start;
}

.sobre__conteudo {
  display: grid;
  gap: clamp(28px, 3vw, 44px);
}

.sobre__titulo .titulo-lg {
  margin-top: 20px;
}

.sobre__texto {
  display: grid;
  gap: 28px;
}

/* página "O evento": o título acompanha a leitura do texto longo */
@media (min-width: 901px) {
  .sobre > .sobre__titulo {
    position: sticky;
    top: calc(var(--topo-altura) + 40px);
  }
}

@media (max-width: 900px) {
  .sobre {
    grid-template-columns: 1fr;
  }

  .cena-caixa--carranca {
    height: 300px;
  }
}

/* ---------- Números ---------- */

.numeros {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.2vw, 30px);
  margin: 0;
}

.numero {
  padding: clamp(24px, 2.8vw, 40px);
}

.numero dd {
  margin: 0;
}

.numero__valor {
  display: block;
  font-size: clamp(3.4rem, 2rem + 5vw, 7.5rem);
  color: var(--vermelho);
}

.numero__rotulo {
  display: block;
  margin-top: 10px;
  font-size: 0.82rem;
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.numeros__legenda {
  margin-top: 22px;
  font-size: 0.85rem;
  color: var(--tinta-2);
}

@media (max-width: 860px) {
  .numeros {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .numero {
    padding: 22px 20px;
  }

  .numero__valor {
    font-size: 3.2rem;
  }

  .numero__rotulo {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
  }

  .contato__item {
    padding: 18px 22px;
  }

  .contato__item a {
    font-size: 0.9rem;
  }
}

/* ---------- Formatos (cards-gravura com arte vazando) ---------- */

.formatos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(40px, 4.4vw, 64px) clamp(26px, 3vw, 44px);
  margin: 0;
  padding: 0 0 28px;
  list-style: none;
}

.formato {
  --borda-card: clamp(20px, 1.8vw, 26px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 410px;
  padding: calc(var(--borda-card) - var(--recuo) + 22px) calc(var(--borda-card) - var(--recuo) + 22px) 170px;
}

.formato__num {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 1.3rem;
  font-stretch: 75%;
  font-weight: 900;
  line-height: 1;
  transform: rotate(-8deg);
}

.formato .titulo-sm {
  margin-top: 20px;
  max-width: 13ch;
}

.formato p {
  margin-top: 12px;
  max-width: 32ch;
  font-size: 0.98rem;
  line-height: 1.55;
}

.formato__arte {
  --e: clamp(0, calc((var(--p, 0.6) - 0.05) * 3), 1);
  position: absolute;
  z-index: 3;
  right: -7%;
  bottom: -9%;
  width: 58%;
  translate: 0 calc((1 - var(--e)) * 22%);
  transition: transform 0.5s var(--ease);
}

.formato__arte--vertical {
  width: 25%;
  right: 9%;
  bottom: -11%;
}

.formato__arte--larga {
  width: 66%;
  bottom: -6%;
}

.formato__arte--casinha {
  width: 44%;
}

.formato:hover .formato__arte {
  transform: translate(-4px, -10px) rotate(-3deg) scale(1.05);
}

/* versão B: ilustração no canto superior direito, vazando por cima do card;
   desce para dentro do card conforme a rolagem */
.formatos--topo {
  padding: clamp(70px, 6.5vw, 100px) 0 0;
  row-gap: clamp(90px, 7.5vw, 120px);
}

.formatos--topo .formato {
  --pt: clamp(130px, 10.5vw, 150px);
  justify-content: flex-end;
  min-height: 330px;
  padding-top: var(--pt);
  padding-bottom: calc(var(--borda-card) - var(--recuo) + 26px);
}

.formatos--topo .formato__num {
  position: absolute;
  top: calc(var(--borda-card) - var(--recuo) + 22px);
  left: calc(var(--borda-card) - var(--recuo) + 22px);
}

/* a base da ilustração fica logo acima do título; ela cresce para cima,
   vazando do card */
.formatos--topo .formato__arte {
  top: auto;
  bottom: calc(100% - var(--pt) + 12px);
  right: -4%;
  width: 62%;
  translate: 0 calc(-1 * (1 - var(--e)) * 22%);
}

.formatos--topo .formato__arte--vertical {
  right: 9%;
  width: 23%;
}

.formatos--topo .formato__arte--larga {
  width: 70%;
}

.formatos--topo .formato__arte--casinha {
  width: 50%;
}

@media (max-width: 980px) {
  .formatos { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .formatos { grid-template-columns: 1fr; }
  .formato { min-height: 0; padding-bottom: 160px; }
  .formato__arte { width: 50%; bottom: -8%; right: -2%; }
  .formato__arte--vertical { width: 20%; bottom: -12%; }
  .formato__arte--larga { width: 60%; }
  .formatos--topo .formato { --pt: 130px; padding-bottom: 30px; }
  .formatos--topo .formato__arte { width: 56%; }
  .formatos--topo .formato__arte--vertical { width: 20%; }
  .formatos--topo .formato__arte--larga { width: 62%; }
  .formatos--topo .formato__arte--casinha { width: 44%; }
}

/* ---------- Programação (home) ---------- */

.dias {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 34px);
}

.dia {
  display: grid;
  gap: 18px;
  padding: clamp(26px, 3vw, 42px);
}

a.dia:hover {
  background-color: var(--amarelo);
}

.dia__semana {
  font-size: 0.8rem;
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dia__numero {
  font-size: clamp(5rem, 3rem + 7vw, 10rem);
  color: var(--vermelho);
}

.dia__mes {
  font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
  font-stretch: 125%;
  font-weight: 900;
  text-transform: uppercase;
}

.dia__nota {
  padding-top: 16px;
  border-top: 2px dashed currentColor;
  font-size: 0.92rem;
}

.contagem {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: clamp(12px, 2.4vw, 36px);
}

.contagem__bloco {
  display: grid;
  gap: 6px;
}

.contagem__valor {
  font-size: clamp(3rem, 2rem + 4vw, 6.5rem);
  font-variant-numeric: tabular-nums;
}

.contagem__rotulo {
  font-size: 0.75rem;
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .dias { grid-template-columns: 1fr; }
  .dia { gap: 10px; }
  .dia__numero { font-size: clamp(4rem, 3rem + 6vw, 6rem); }
}

@media (max-width: 760px) {
  .contagem { gap: 18px; }
  .contagem__valor { font-size: clamp(2.6rem, 1.6rem + 5vw, 4rem); }
}

/* vitória-régia: centralizada, as folhas descem por trás dos cards dos dias
   e assentam na linha d'água (a base da seção), balançando. Ao subir, sobem
   de volta. */
.dias {
  position: relative;
  z-index: 1;
}

.prog-rodape {
  position: relative;
  z-index: 0;
  display: flex;
  justify-content: center;
  margin-top: clamp(24px, 3vw, 48px);
}

.cena-vitoria {
  --e: clamp(0, calc((var(--p, 0.6) - 0.02) * 2.2), 1);
  width: clamp(300px, 52vw, 820px);
  max-width: none;
  margin-bottom: calc(-1 * clamp(72px, 10vw, 150px) - 1.5vw);
  transform-origin: 50% 90%;
  translate: 0 calc(-1 * (1 - var(--e)) * 70% + sin(calc(var(--p, 0.6) * 26rad)) * 8px);
  rotate: calc(sin(calc(var(--p, 0.6) * 17rad)) * 2deg);
  scale: calc(0.9 + var(--e) * 0.1);
}

@media (max-width: 760px) {
  .cena-vitoria {
    width: 96vw;
  }
}

/* ---------- Inscrições (home: capivara + cards de categoria) ---------- */

.secao--cena {
  overflow-x: clip;
}

.secao__cabeca--com-cena {
  position: relative;
  min-height: clamp(280px, 30vw, 460px);
  align-content: center;
  padding-right: min(44%, 560px);
}

.secao__cabeca--com-cena > :not(.cena-capivara) {
  position: relative;
  z-index: 1;
}

@media (max-width: 760px) {
  .secao__cabeca--com-cena {
    padding-right: 0;
    padding-bottom: 58vw;
    min-height: 0;
  }

  .cena-capivara {
    top: auto;
    bottom: 0;
    width: 74vw;
    translate: calc((1 - var(--e)) * 75%) calc(0px - var(--passo) * 12px * (1 - var(--e)));
  }
}

.categorias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}

.categoria {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 2.6vw, 34px);
}

.categoria__topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.categoria__icone {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-stretch: 75%;
  font-weight: 900;
  font-size: 1.2rem;
  rotate: -8deg;
}

.categoria p {
  font-size: 0.96rem;
  line-height: 1.55;
}

.categoria__para {
  margin-top: auto;
  padding-top: 14px;
  border-top: 2px dashed currentColor;
  font-size: 0.85rem !important;
}

.categoria__para strong {
  display: block;
  font-size: 0.72rem;
  font-stretch: 125%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- Local (Salvador): arte do Elevador como fundo da seção ---------- */

.local {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  align-items: center;
  min-height: clamp(560px, 64vw, 940px);
  padding-block: clamp(64px, 8vw, 120px);
}

.local__fundo {
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: 0;
}

.local__fundo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 22% 62%;
}

/* parallax em camadas: o morro (fundo) corre mais devagar que a página e o
   elevador (frente) corre mais rápido; ao subir, tudo volta. O elevador é um
   recorte (a passarela termina num corte à esquerda), por isso encosta na
   borda esquerda. A base da torre e do pilar se estende para baixo da seção. */
.local__morro {
  transform-origin: 50% 50%;
  scale: 1.14;
  translate: 0 calc((var(--p, 0.5) - 0.5) * 12%);
}

.local__fundo .local__elevador {
  top: auto;
  right: auto;
  bottom: -15%;
  left: 0;
  width: auto;
  height: 98%;
  object-fit: fill;
  translate: 0 calc((0.5 - var(--p, 0.5)) * 26%);
}

.local .container {
  display: grid;
}

.local__texto {
  justify-self: end;
  display: grid;
  gap: 20px;
  width: min(100%, 540px);
  padding: clamp(30px, 3.6vw, 56px);
  translate: 0 calc((0.5 - var(--p, 0.5)) * 60px);
}

@media (max-width: 760px) {
  .local {
    align-items: end;
    min-height: 0;
    padding-top: 78vw;
  }

  .local__fundo {
    bottom: auto;
    height: 96vw;
  }

  .local__texto {
    justify-self: stretch;
  }
}

/* ---------- Notícias ---------- */

.noticias {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 34px);
  margin: 0;
  padding: 0;
}

.noticia {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: clamp(24px, 2.6vw, 34px);
}

.noticia__data {
  font-size: 0.75rem;
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vermelho);
}

.noticia h3 {
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.3;
  text-wrap: balance;
}

.noticia p {
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--tinta-2);
}

.noticia .link-seta {
  margin-top: auto;
  align-self: flex-start;
}

.noticias--lista {
  grid-template-columns: 1fr;
  gap: 20px;
}

.noticias--lista .noticia {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  align-items: start;
  column-gap: 32px;
}

.noticias--lista .noticia .link-seta {
  margin-top: 0;
}

@media (max-width: 980px) {
  .noticias { grid-template-columns: 1fr; }
  .noticias--lista .noticia { grid-template-columns: 1fr; }
}

/* ---------- Vídeo institucional: sala escura ----------
   A tela usa a moldura de xilogravura do hero em negativo (cor de papel).
   Com a rolagem ela "abre": entra menor e deitada para trás e se endireita
   conforme --p, como um telão sendo erguido (volta ao rolar para cima). */

.secao--tinta .destaque {
  color: var(--amarelo);
}

.sala {
  overflow: clip;
}

.sala__nota {
  max-width: 34ch;
  color: rgb(251 248 239 / 0.72);
  font-size: 0.95rem;
}

.sala__palco {
  --abre: min(1, var(--p, 1) * 2.4);
  position: relative;
  perspective: 1600px;
  perspective-origin: 50% 100%;
}

/* luz do projetor por trás da tela */
.sala__palco::before {
  content: "";
  position: absolute;
  inset: -14% -10%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgb(245 194 31 / 0.2), transparent);
  opacity: calc(0.25 + 0.75 * var(--abre));
}

.tela {
  --borda: clamp(18px, 2.1vw, 36px);
  --recuo: calc(var(--borda) * 17 / 64);
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  transform-origin: 50% 100%;
  scale: calc(0.84 + 0.16 * var(--abre));
  rotate: x calc((1 - var(--abre)) * 18deg);
}

.tela__video {
  position: absolute;
  inset: var(--recuo);
  width: calc(100% - 2 * var(--recuo));
  height: calc(100% - 2 * var(--recuo));
  object-fit: cover;
  border: 0;
  background: #000;
}

/* poeira de impressão por cima da imagem */
.tela::before {
  content: "";
  position: absolute;
  inset: var(--recuo);
  z-index: 1;
  pointer-events: none;
  background: url("../assets/img/granulado.png") 0 0 / 180px;
  opacity: 0.28;
}

.tela::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-style: solid;
  border-color: transparent;
  border-width: var(--borda) var(--borda) var(--borda) calc(var(--borda) * 56 / 64);
  border-image: url("../assets/img/moldura-completa.webp") 64 64 64 56 / var(--borda) var(--borda) var(--borda) calc(var(--borda) * 56 / 64) stretch;
  filter: invert(1) sepia(0.2);
}

/* com um vídeo tocando por cima (YouTube), some a poeira */
.tela--assistindo::before {
  display: none;
}

/* pausar/reproduzir: só o ícone (duas barras ou triângulo) */
.tela__controle {
  position: absolute;
  z-index: 3;
  left: calc(var(--borda) + 10px);
  bottom: calc(var(--borda) + 10px);
  width: 50px;
  min-height: 44px;
  padding: 0;
  font-size: 1rem;
}

.tela__icone {
  width: 0.75em;
  height: 0.85em;
  border-inline: 0.26em solid currentColor;
}

.tela__controle--parado .tela__icone {
  width: 0;
  height: 0;
  border-inline: 0;
  border-left: 0.75em solid currentColor;
  border-block: 0.45em solid transparent;
  translate: 0.1em 0;
}

.tela__assistir {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  font-size: clamp(0.85rem, 0.75rem + 0.4vw, 1.05rem);
}

.tela__play {
  width: 0;
  height: 0;
  border-left: 0.85em solid currentColor;
  border-block: 0.5em solid transparent;
}

/* ---------- Slider de fotos (seção "Vídeo e galeria") ----------
   Mesma tela emoldurada do vídeo. Cada foto entra deslizando, levemente
   torta, como cartaz colado, e ganha cor saindo do preto e branco (o "banho"
   da galeria). A tira de quadradinhos é a película do logo: o ponto ativo
   enche em vermelho durante os 5 s e, ao terminar, passa para a próxima. */

.sala__palco--slider {
  margin-top: clamp(48px, 6vw, 96px);
}

.tela--slider {
  user-select: none;
  touch-action: pan-y;
}

.slider__pista {
  position: absolute;
  inset: var(--recuo);
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  background: #000;
}

.slide {
  position: absolute;
  inset: 0;
  margin: 0;
  visibility: hidden;
}

.slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide--ativo,
.slide--saindo {
  visibility: visible;
}

.slide--ativo {
  z-index: 2;
}

.slide--saindo {
  z-index: 1;
}

.js .slide--ativo.slide--anima {
  animation: slide-entra 0.9s var(--ease) both;
}

.js .slide--ativo.slide--anima img {
  animation: slide-cor 1.5s var(--ease) both;
}

.js .slide--saindo {
  animation: slide-sai 0.9s var(--ease) both;
}

@keyframes slide-entra {
  from {
    opacity: 0;
    translate: calc(var(--dir, 1) * 12%) 0;
    rotate: calc(var(--dir, 1) * 3deg);
    scale: 1.06;
  }
}

@keyframes slide-sai {
  to {
    opacity: 0;
    translate: calc(var(--dir, 1) * -9%) 0;
    rotate: calc(var(--dir, 1) * -2deg);
  }
}

@keyframes slide-cor {
  from { filter: grayscale(1) contrast(1.25) brightness(0.85); }
}

.slider__seta {
  position: absolute;
  z-index: 3;
  top: 50%;
  translate: 0 -50%;
  min-width: 56px;
  min-height: 52px;
  padding: 0.9em 1.1em;
  font-size: 1.15rem;
}

.slider__seta--anterior { left: calc(var(--borda) + 14px); }
.slider__seta--proxima { right: calc(var(--borda) + 14px); }

.slider__tira {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: clamp(16px, 2vw, 26px);
}

.slider__ponto {
  position: relative;
  width: 30px;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.slider__ponto::before {
  content: "";
  position: absolute;
  inset: 11px 0;
  background: rgb(251 248 239 / 0.3);
  transition: background-color 0.25s, inset 0.25s var(--ease);
}

.slider__ponto:hover::before { background: rgb(251 248 239 / 0.6); }

.slider__ponto--ativo::before {
  inset: 8px 0;
  background: var(--amarelo);
}

.slider--auto:not(.slider--pausado) .slider__ponto--ativo::after,
.slider--auto.slider--pausado .slider__ponto--ativo::after {
  content: "";
  position: absolute;
  inset: 8px 0;
  background: var(--vermelho);
  transform-origin: 0 50%;
  animation: slider-progresso var(--slider-tempo, 5s) linear both;
}

.slider--pausado .slider__ponto--ativo::after {
  animation-play-state: paused;
}

@keyframes slider-progresso {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (max-width: 760px) {
  .slider__seta {
    min-width: 44px;
    min-height: 44px;
    padding: 0.7em 0.8em;
    font-size: 1rem;
  }

  .slider__seta--anterior { left: calc(var(--borda) + 6px); }
  .slider__seta--proxima { right: calc(var(--borda) + 6px); }
  .slider__ponto { width: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .slide--ativo,
  .slide--ativo img,
  .slide--saindo {
    animation: none !important;
  }
}

/* ---------- Galeria de fotos ----------
   Mosaico em 12 colunas (cada foto ocupa --colunas), com a moldura de
   xilogravura. As fotos se "revelam" com a rolagem: entram em preto e branco
   e ganham cor ao subir na tela, como no banho do laboratório. */

.galeria {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: clamp(26px, 3.2vw, 48px) clamp(18px, 2.4vw, 36px);
}

.galeria__item {
  --revela: max(0, 1 - var(--p, 1) * 3.2);
  grid-column: span var(--colunas, 4);
}

.galeria__foto {
  --borda-card: clamp(16px, 1.4vw, 22px);
  --recuo: calc(var(--borda-card) * 17 / 64);
  --giro: 0deg;
  --flutua: 0px;
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  cursor: zoom-in;
  rotate: var(--giro);
  translate: 0 calc((0.5 - var(--p, 0.5)) * var(--flutua));
}

.js .galeria__foto[data-revelar] {
  transition: opacity 0.8s var(--ease) var(--atraso, 0s), transform 0.8s var(--ease) var(--atraso, 0s),
    rotate 0.45s var(--ease), scale 0.45s var(--ease);
}

.galeria__foto img {
  position: absolute;
  inset: var(--recuo);
  width: calc(100% - 2 * var(--recuo));
  height: calc(100% - 2 * var(--recuo));
  object-fit: cover;
  filter: grayscale(var(--revela)) contrast(calc(1 + var(--revela) * 0.25)) brightness(calc(1 - var(--revela) * 0.12));
}

.galeria__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: var(--borda-card) solid transparent;
  border-image: url("../assets/img/moldura-card.webp") 64 / var(--borda-card) stretch;
}

.galeria__foto:hover,
.galeria__foto:focus-visible {
  --giro: 0deg;
  scale: 1.02;
}

.galeria__item:nth-child(3n + 1) .galeria__foto { --giro: -0.9deg; --flutua: 30px; }
.galeria__item:nth-child(3n + 2) .galeria__foto { --giro: 0.7deg; --flutua: -22px; }
.galeria__item:nth-child(3n) .galeria__foto { --giro: -0.4deg; --flutua: 40px; }

.galeria__credito {
  margin-top: clamp(30px, 3.4vw, 50px);
  color: var(--tinta-2);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-align: right;
}

@media (max-width: 760px) {
  .galeria {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .galeria__item {
    grid-column: span 1;
  }

  .galeria__item:first-child,
  .galeria__item:last-child {
    grid-column: span 2;
  }
}

/* ---- visor (foto ampliada) ---- */

html:has(.visor[open]) {
  overflow: hidden;
}

.visor {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(16px, 3vw, 40px);
  border: 0;
  background: rgb(38 37 35 / 0.96);
  color: var(--papel);
  overscroll-behavior: contain;
}

.visor[open] {
  display: grid;
  grid-template: "anterior figura proxima" minmax(0, 1fr) / auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(14px, 2.4vw, 36px);
}

.visor::backdrop {
  background: transparent;
}

.visor__figura {
  grid-area: figura;
  display: grid;
  justify-items: center;
  gap: 22px;
  min-width: 0;
  margin: 0;
  animation: surgir 0.35s var(--ease);
}

.visor__moldura {
  --borda-card: clamp(18px, 1.8vw, 28px);
  --recuo: calc(var(--borda-card) * 17 / 64);
  position: relative;
  max-width: 100%;
}

.visor__moldura::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--recuo));
  pointer-events: none;
  border: var(--borda-card) solid transparent;
  border-image: url("../assets/img/moldura-card.webp") 64 / var(--borda-card) stretch;
  filter: invert(1) sepia(0.2);
}

.visor__img {
  display: block;
  max-width: 100%;
  max-height: calc(100svh - 170px);
  width: auto;
  height: auto;
  transition: opacity 0.25s;
}

.visor__img.carregando {
  opacity: 0;
}

.visor__legenda {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
  max-width: 70ch;
  font-size: 0.9rem;
  text-align: center;
}

.visor__contador {
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.visor__navegar {
  min-width: 56px;
  padding: 0.9em 1.1em;
  font-size: 1.15rem;
}

.visor__navegar--anterior { grid-area: anterior; }
.visor__navegar--proxima { grid-area: proxima; }

.visor__fechar {
  position: absolute;
  z-index: 2;
  top: clamp(14px, 2.4vw, 30px);
  right: clamp(18px, 2.8vw, 36px);
  min-height: 44px;
  padding: 0.8em 1.3em;
  font-size: 0.75rem;
}

@media (max-width: 760px) {
  .visor[open] {
    grid-template:
      "figura figura" minmax(0, 1fr)
      "anterior proxima" auto / 1fr 1fr;
    padding-top: 78px;
  }

  .visor__navegar--anterior { justify-self: start; }
  .visor__navegar--proxima { justify-self: end; }
}

/* ---- nomes da realização ---- */

.parceiros__nomes {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  font-stretch: 125%;
  font-weight: 800;
  line-height: 1.2;
}

/* ---------- Equipe ---------- */

.time {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(36px, 4vw, 64px) clamp(18px, 2.4vw, 36px);
}

.pessoa:nth-child(4n + 2),
.pessoa:nth-child(4n + 4) {
  margin-top: clamp(20px, 3vw, 44px);
}

.pessoa__foto {
  --borda-card: clamp(16px, 1.4vw, 22px);
  --recuo: calc(var(--borda-card) * 17 / 64);
  position: relative;
  aspect-ratio: 4 / 5;
  margin-bottom: 18px;
  background: var(--papel-2);
  rotate: -0.8deg;
}

.pessoa:nth-child(even) .pessoa__foto { rotate: 0.7deg; }

.pessoa__foto img {
  position: absolute;
  inset: var(--recuo);
  width: calc(100% - 2 * var(--recuo));
  height: calc(100% - 2 * var(--recuo));
  object-fit: cover;
}

.pessoa__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: var(--borda-card) solid transparent;
  border-image: url("../assets/img/moldura-card.webp") 64 / var(--borda-card) stretch;
}

/* quem ainda não tem foto: papel colorido com as iniciais */
.pessoa__foto--sem {
  display: grid;
  place-items: center;
  background-clip: padding-box;
  border: var(--recuo) solid transparent;
}

.pessoa__foto--vermelha { background-color: var(--vermelho); color: var(--papel); }
.pessoa__foto--amarela { background-color: var(--amarelo); }
.pessoa__foto--laranja { background-color: var(--laranja); }
.pessoa__foto--verde { background-color: var(--verde); color: var(--papel); }

.pessoa__inicial {
  font-size: clamp(3.5rem, 7vw, 6.5rem);
  line-height: 1;
}

.pessoa__nome {
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
  font-stretch: 125%;
  font-weight: 800;
  line-height: 1.1;
}

.pessoa__funcao {
  margin-top: 6px;
  color: var(--tinta-2);
  font-size: 0.9rem;
  line-height: 1.3;
}

@media (max-width: 900px) {
  .time { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pessoa:nth-child(4n + 2),
  .pessoa:nth-child(4n + 4) { margin-top: 0; }
  .pessoa:nth-child(even) { margin-top: clamp(20px, 5vw, 36px); }
}

/* ---------- Chamada (bloco de destaque) ---------- */

.chamada {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  padding: clamp(34px, 5vw, 72px);
}

.chamada__texto {
  display: grid;
  gap: 18px;
  max-width: 720px;
}

.chamada__arte {
  position: relative;
  z-index: 3;
  width: clamp(160px, 22vw, 340px);
}

@media (max-width: 760px) {
  .chamada { grid-template-columns: 1fr; }
  .chamada__arte { justify-self: end; margin: -20px 0 -40px; }
}

/* ---------- Parceiros ---------- */

.parceiros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
}

.parceiros__grupo {
  display: grid;
  gap: 16px;
  align-content: start;
  min-height: 160px;
  padding: 28px;
}

.parceiros__grupo p {
  font-size: 0.95rem;
  color: var(--tinta-2);
}

@media (max-width: 760px) {
  .parceiros { grid-template-columns: 1fr; }
}

/* ---------- Contato ---------- */

.contato {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}

.contato__lista {
  display: grid;
  gap: 16px;
}

.contato__item {
  display: grid;
  gap: 4px;
  padding: 22px 28px;
}

.contato__item span {
  font-size: 0.72rem;
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.contato__item a {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.contato__arte {
  width: min(100%, 560px);
  justify-self: center;
}

.contato--invertido > .contato__arte {
  order: -1;
  justify-self: start;
}

@media (max-width: 860px) {
  .contato { grid-template-columns: 1fr; }
  .contato__arte { width: min(76%, 380px); order: -1; }
}

/* ---------- Rodapé ---------- */

/* barra de marcas (realização / correalização), faixa clara antes do rodapé */
.marcas {
  padding: clamp(36px, 5vw, 64px) 0 clamp(40px, 5.5vw, 72px);
  background: var(--papel);
}

.marcas img {
  display: block;
  width: min(100%, 1000px);
  height: auto;
  margin-inline: auto;
}

.rodape {
  position: relative;
  padding: clamp(64px, 8vw, 110px) 0 32px;
  background: var(--tinta);
  color: var(--papel);
}

.rodape::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 14px;
  background:
    repeating-linear-gradient(90deg,
      var(--vermelho) 0 14px, transparent 14px 26px,
      var(--amarelo) 26px 40px, transparent 40px 52px,
      var(--vermelho) 52px 80px, transparent 80px 92px,
      var(--papel) 92px 106px, transparent 106px 118px);
}

.rodape__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 80px);
}

.rodape__logo {
  width: min(100%, 340px);
}

.rodape__marca p {
  margin-top: 22px;
  max-width: 40ch;
  font-size: 0.95rem;
  color: #cfc9bc;
}

.rodape h2 {
  margin-bottom: 18px;
  font-size: 0.75rem;
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amarelo);
}

.rodape ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rodape a {
  text-decoration: none;
}

.rodape a:hover {
  color: var(--amarelo);
  text-decoration: underline;
}

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: 24px;
  border-top: 1px solid rgba(251, 248, 239, 0.25);
  font-size: 0.82rem;
  color: #cfc9bc;
}

@media (max-width: 860px) {
  .rodape__grade { grid-template-columns: 1fr 1fr; }
  .rodape__marca { grid-column: 1 / -1; }
}

/* ---------- Páginas internas ---------- */

.pagina-topo {
  --topo-pad: calc(var(--topo-altura) + clamp(56px, 8vw, 120px));
  position: relative;
  overflow: hidden;
  padding: var(--topo-pad) 0 clamp(56px, 7vw, 100px);
}

.pagina-topo .container {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 22px;
}

.pagina-topo .lead {
  max-width: 46ch;
}

/* arte parada, encostada no rodapé da faixa; o topo dela passa um pouco
   do topo do conteúdo (trilha) */
.pagina-topo__arte {
  position: absolute;
  right: max(var(--respiro), calc((100vw - var(--largura)) / 2));
  bottom: -2px;
  width: auto;
  height: calc(100% - var(--topo-pad) + clamp(28px, 3.4vw, 52px));
  max-width: 42vw;
  object-fit: contain;
  object-position: right bottom;
}

/* o título "Programação" é longo: o teatro não pode encostar nele */
.pagina-topo__arte--teatro {
  max-width: 33vw;
}

@media (max-width: 760px) {
  .pagina-topo__arte {
    position: relative;
    right: auto;
    margin: 12px 0 calc(-1 * clamp(56px, 7vw, 100px)) auto;
    height: 200px;
    max-width: 64vw;
  }
}

.trilha {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.75rem;
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.trilha a {
  text-decoration: none;
}

.trilha li + li::before {
  content: "/";
  margin-right: 8px;
  opacity: 0.6;
}

/* ---------- Programação (página) ---------- */

.prog-controles {
  display: grid;
  gap: 22px;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.abas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.aba {
  display: grid;
  gap: 2px;
  min-width: 138px;
  padding: 16px 20px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.aba:hover {
  rotate: 0deg;
  translate: 0 -4px;
}

.aba[aria-selected="true"] {
  background-color: var(--vermelho);
  color: var(--papel);
}

.aba__dia {
  font-size: 2.2rem;
  font-stretch: 75%;
  font-weight: 900;
  line-height: 0.9;
}

.aba__semana {
  font-size: 0.7rem;
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filtro {
  padding: 8px 14px;
  border: 2px solid var(--tinta);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.filtro[aria-pressed="true"] {
  background: var(--tinta);
  color: var(--papel);
}

.edicao-troca {
  display: inline-flex;
  justify-self: start;
  padding: 4px;
}

.edicao-troca button {
  padding: 10px 18px;
  border: 0;
  background: transparent;
  color: var(--tinta);
  font: inherit;
  font-size: 0.8rem;
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.edicao-troca button[aria-pressed="true"] {
  background: var(--tinta);
  color: var(--papel);
}

.periodo-bloco {
  margin-top: clamp(28px, 3vw, 44px);
}

.periodo-bloco:first-child {
  margin-top: 0;
}

.periodo-bloco h3 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  font-size: 0.8rem;
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.periodo-bloco h3::after {
  content: "";
  flex: 1;
  height: 0;
  border-top: 2px dashed var(--tinta);
}

.atividades {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.atividade {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 24px;
  padding: 24px 28px;
}

.atividade__hora {
  font-size: 2rem;
  font-stretch: 75%;
  font-weight: 900;
  line-height: 1;
}

.atividade__corpo {
  display: grid;
  gap: 8px;
}

.atividade__corpo h4 {
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.3;
}

.atividade__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 0.88rem;
  color: var(--tinta-2);
}

.atividade__pessoas {
  font-size: 0.92rem;
}

.atividade__pessoas b {
  font-weight: 700;
}

.tipo {
  justify-self: start;
  padding: 4px 9px;
  font-size: 0.68rem;
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--tinta);
  color: var(--papel);
}

.tipo--mesa { background: var(--vermelho); }
.tipo--masterclass { background: var(--verde); }
.tipo--clinica { background: var(--laranja); color: var(--tinta); }
.tipo--rodadas { background: var(--amarelo); color: var(--tinta); }
.tipo--pitching { background: var(--verde-escuro); }
.tipo--abertura,
.tipo--encerramento { background: var(--tinta); }

.aviso {
  display: grid;
  gap: 18px;
  justify-items: start;
  padding: clamp(30px, 4vw, 58px);
}

@media (max-width: 700px) {
  .atividade {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ---------- Inscrições (página) ---------- */

.inscricao {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) 250px;
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
  padding: clamp(26px, 3vw, 42px);
}

.inscricao + .inscricao {
  margin-top: 22px;
}

.inscricao__titulo {
  display: grid;
  gap: 12px;
}

.inscricao__desc {
  display: grid;
  gap: 12px;
}

.inscricao__desc dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  font-size: 0.92rem;
}

.inscricao__desc dt {
  font-stretch: 125%;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-top: 0.25em;
}

.inscricao__desc dd {
  margin: 0;
}

@media (max-width: 900px) {
  .inscricao { grid-template-columns: 1fr; }
}

/* perguntas frequentes */
.perguntas {
  display: grid;
  gap: 16px;
}

.pergunta summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  font-weight: 800;
  font-size: 1.05rem;
  cursor: pointer;
  list-style: none;
}

.pergunta summary::-webkit-details-marker {
  display: none;
}

.pergunta summary::after {
  content: "+";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--papel);
  font-size: 1.4rem;
  line-height: 1;
  transition: transform 0.25s var(--ease), background-color 0.25s;
}

.pergunta[open] summary::after {
  transform: rotate(45deg);
  background: var(--vermelho);
}

.pergunta__resposta {
  padding: 0 26px 24px;
  max-width: 72ch;
}

/* ---------- Sobre (página) ---------- */

.pilares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(18px, 2.2vw, 30px);
  margin: 0;
  padding: 0;
}

.pilar {
  padding: 30px;
}

.pilar h3 {
  margin-bottom: 10px;
}

.pilar p {
  font-size: 0.96rem;
}

.edicao {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding: clamp(30px, 4vw, 58px);
}

.edicao__ano {
  font-size: clamp(5rem, 3rem + 8vw, 11rem);
  color: var(--vermelho);
}

.edicao__texto {
  display: grid;
  gap: 16px;
}

@media (max-width: 760px) {
  .edicao { grid-template-columns: 1fr; }
}

.equipe {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: clamp(16px, 2vw, 26px);
  align-items: start;
}

.equipe__grupo {
  padding: 24px 26px;
}

.equipe__grupo h3 {
  margin-bottom: 10px;
  font-size: 0.72rem;
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vermelho);
}

.equipe__grupo ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 600;
  line-height: 1.5;
}

/* ---------- Revelar ao rolar ---------- */

.js [data-revelar] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease) var(--atraso, 0s), transform 0.8s var(--ease) var(--atraso, 0s),
    rotate 0.45s var(--ease), translate 0.45s var(--ease), background-color 0.25s;
}

.js [data-revelar].visivel {
  opacity: 1;
  transform: none;
}

/* entrada do hero */
.js .hero__marca,
.js .hero__info,
.js .hero__contagem,
.js .hero__conteudo > p {
  animation: surgir 0.9s var(--ease) both;
}

.js .hero__info { animation-delay: 0.12s; }
.js .hero__contagem { animation-delay: 0.18s; }
.js .hero__conteudo > p { animation-delay: 0.24s; }

.js .camada {
  animation: brotar 1.15s cubic-bezier(0.3, 0.9, 0.35, 1) both;
}

.js .camada--chao {
  animation-name: assentar;
  animation-duration: 0.9s;
  animation-delay: 0.05s;
}

/* da frente para trás: cada peça que sobe já encontra à sua frente as que
   a escondem, e as grandes (palmeiras, cactos, catedral) fecham o número */
.js .camada--vitorias  { animation-delay: 0.2s; animation-duration: 0.95s; }
.js .camada--onca      { animation-delay: 0.38s; animation-duration: 0.9s; }
.js .camada--carrancas { animation-delay: 0.5s; }
.js .camada--meio      { animation-delay: 0.78s; }
.js .camada--fundo     { animation-delay: 1.05s; animation-duration: 1.3s; }

/* a peça começa deitada para trás e se levanta, passa um pouco do ponto e
   assenta, como uma dobradura de livro pop-up */
@keyframes brotar {
  0% { opacity: 0; transform: rotateX(84deg); }
  18% { opacity: 1; }
  68% { transform: rotateX(-7deg); }
  86% { transform: rotateX(2.5deg); }
  100% { opacity: 1; transform: none; }
}

@keyframes assentar {
  from { opacity: 0; transform: translateY(12%); }
}

@keyframes surgir {
  from { opacity: 0; transform: translateY(14px); }
}

@keyframes subir {
  from { opacity: 0; transform: translateY(4%); }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js [data-revelar] {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   VERSÃO 1 — acréscimos do cliente
   ========================================================================== */

/* ---- Faça sua inscrição (home): 3 atividades ---- */

.categorias--tres {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .categorias--tres { grid-template-columns: 1fr; }
}

.categoria__acoes {
  display: grid;
  gap: 10px;
  margin: auto 0 0;
  padding: 16px 0 0;
  list-style: none;
  border-top: 2px dashed currentColor;
}

.categoria .acao,
.categoria__acoes .link-seta {
  font-size: 0.78rem;
}

.acao {
  flex-wrap: wrap;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ação que ainda não tem endereço: riscada e apagada, com selo "em breve" */
.acao--breve {
  color: var(--tinta-2);
  cursor: default;
}

.acao--breve::after {
  content: "em breve";
  white-space: nowrap;
  padding: 0.25em 0.6em;
  border: 2px solid currentColor;
  font-size: 0.8em;
  letter-spacing: 0.08em;
}

/* ---- Inscrições (página): botões de cada atividade ---- */

.inscricao__titulo .selo {
  justify-self: start;
}

.inscricao__acoes {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0 8px 8px 0;
  list-style: none;
  justify-items: stretch;
}

.inscricao__acoes .botao {
  width: 100%;
  min-width: 220px;
}

@media (max-width: 900px) {
  .inscricao__acoes { justify-items: start; }
  .inscricao__acoes .botao { width: auto; }
}

/* ---- Programação: convidados com foto ---- */

.atividade__grupo {
  display: grid;
  gap: 10px;
}

.convidados {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.convidado {
  display: flex;
  align-items: center;
  gap: 12px;
}

.convidado__foto {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border: 2px solid var(--tinta);
  border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%;
  background: var(--amarelo);
}

.convidado__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.convidado__inicial {
  font-size: 1.5rem;
  line-height: 1;
}

.convidado__texto {
  display: grid;
  gap: 2px;
  line-height: 1.2;
}

.convidado__nome {
  font-size: 0.95rem;
  font-weight: 800;
}

.convidado__cargo {
  font-size: 0.82rem;
  color: var(--tinta-2);
}

/* ---- Notícias (cards montados pelo JS) ---- */

.noticia__meta {
  display: grid;
  gap: 6px;
  align-content: start;
}

.noticia__categoria {
  justify-self: start;
  font-size: 0.7rem;
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

.noticias--lista .noticia[id] {
  scroll-margin-top: calc(var(--topo-altura) + 24px);
}

.noticia__mais {
  margin-top: 14px;
}

.noticia__mais summary {
  display: inline-flex;
  cursor: pointer;
  list-style: none;
}

.noticia__mais summary::-webkit-details-marker { display: none; }

.noticia__mais p {
  margin-top: 12px;
}

.noticias[hidden],
.aviso[hidden],
section[hidden] {
  display: none;
}

/* ---- Equipe em formação ---- */

.formacao {
  display: grid;
  gap: 16px;
  margin-top: clamp(40px, 5vw, 72px);
  padding: clamp(22px, 2.6vw, 34px);
}

.formacao__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.formacao__lista li {
  padding: 0.5em 0.9em;
  border: 2px dashed currentColor;
  font-size: 0.85rem;
  font-weight: 700;
}

.tela__contagem .hero__contagem-titulo--fim {
  margin: calc(var(--u) * 0.04) 0 0;
}

.tela__contagem [hidden] { display: none; }

/* ---- Vídeo que abre na tela toda ----
   --o (0 → 1, vem do JS) vai do quadro emoldurado até a tela inteira. Só com
   movimento permitido; senão o vídeo fica como um quadro comum. */

.sala--cheia {
  --o: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .sala--cheia {
    height: 175svh;
    padding: 0;
  }

  .sala__fixo {
    position: sticky;
    top: 0;
    display: grid;
    place-items: center;
    height: 100svh;
  }
}

.sala__palco--cheio {
  display: grid;
  place-items: center;
  width: 100%;
  perspective: none;
}

.sala__palco--cheio::before { display: none; }

.tela--cheia {
  --w0: min(var(--largura), calc(100vw - 2 * var(--respiro)));
  --h0: calc(var(--w0) * 9 / 16);
  --recuo: calc(var(--borda) * 17 / 64 * (1 - var(--o)));
  width: calc(var(--w0) + (100vw - var(--w0)) * var(--o));
  height: calc(var(--h0) + (100svh - var(--h0)) * var(--o));
  aspect-ratio: auto;
  scale: none;
  rotate: none;
}

.tela--cheia::before { opacity: calc(0.28 * (1 - var(--o))); }
.tela--cheia::after { opacity: calc(1 - var(--o) * 2); }

@media (prefers-reduced-motion: reduce) {
  .tela--cheia {
    width: var(--w0);
    height: var(--h0);
  }
}

/* ---- Contagem regressiva no centro do vídeo ----
   Sem caixas: números e texto brancos com leve transparência, sobre um
   escurecido suave no centro do vídeo para manter a leitura. */

.tela__contagem {
  --u: clamp(300px, 40vw, 560px);
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: var(--u);
  margin: 0;
  color: var(--papel);
  translate: -50% -50%;
}

.tela__contagem::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -45% -40%;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.42), transparent);
  pointer-events: none;
}

.tela__contagem .hero__contagem-titulo {
  margin: 0 0 calc(var(--u) * 0.045);
  font-size: calc(var(--u) * 0.05);
  text-align: center;
  opacity: 0.86;
  text-shadow: 0 1px 10px rgb(0 0 0 / 0.55);
}

.tela__contagem .hero__contagem-titulo--fim {
  margin: calc(var(--u) * 0.045) 0 0;
}

.tela__contagem [hidden] { display: none; }

.tela__contagem .hero__contagem-bloco {
  padding: 0;
  background: none;
  clip-path: none;
  color: inherit;
  opacity: 0.88;
  text-shadow: 0 2px 14px rgb(0 0 0 / 0.5);
}

.tela__contagem .hero__contagem-bloco--dias {
  background: none;
  color: var(--amarelo);
}

.tela__contagem .hero__contagem-rotulo {
  font-size: calc(var(--u) * 0.034);
}

@media (max-width: 760px) {
  .tela__contagem { --u: min(76vw, 300px); }
  .tela__contagem .hero__contagem-titulo { display: none; }
}

/* ---- Inscrições (home): ações dentro dos cards "O que acontece" ---- */

.formato__acoes {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 16px 0 0;
  list-style: none;
  border-top: 2px dashed currentColor;
}

.formato__acoes .acao,
.formato__acoes .link-seta {
  font-size: 0.78rem;
}

.formato__acoes .acao--breve {
  color: inherit;
  opacity: 0.85;
}

.formato__acoes .link-seta:hover {
  color: inherit;
}

/* ---- Instagram ---- */

.contato__item--instagram a,
.instagram-icone {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.instagram-icone {
  text-decoration: none;
  font-weight: 800;
}

.instagram-icone svg {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 9px;
  background: var(--tinta);
  color: var(--papel);
  border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%;
  transition: rotate 0.3s var(--ease), background-color 0.2s;
}

.instagram-icone:hover svg {
  rotate: -8deg;
  background: var(--vermelho);
}

/* ---------- Notícias: páginas independentes e cartões com foto ---------- */

.foto-gravura {
  --borda-card: clamp(14px, 1.3vw, 22px);
  --recuo: calc(var(--borda-card) * 17 / 64);
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
}

.foto-gravura img {
  position: absolute;
  inset: var(--recuo);
  width: calc(100% - 2 * var(--recuo));
  height: calc(100% - 2 * var(--recuo));
  object-fit: cover;
}

.foto-gravura::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: var(--borda-card) solid transparent;
  border-image: url("../assets/img/moldura-card.webp") 64 / var(--borda-card) stretch;
}

.cartoes-noticia {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(36px, 4vw, 56px) clamp(22px, 2.6vw, 38px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cartoes-noticia--dois {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cartao-noticia {
  display: grid;
  gap: 12px;
  align-content: start;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.cartao-noticia__foto {
  margin-bottom: 6px;
  rotate: -0.8deg;
  transition: rotate 0.45s var(--ease), translate 0.45s var(--ease);
}

li:nth-child(even) > .cartao-noticia .cartao-noticia__foto { rotate: 0.7deg; }

.cartao-noticia:hover .cartao-noticia__foto,
.cartao-noticia:focus-visible .cartao-noticia__foto {
  rotate: 0deg;
  translate: 0 -6px;
}

.cartao-noticia__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: baseline;
}

.cartao-noticia__data,
.artigo__meta time {
  font-size: 0.75rem;
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vermelho);
}

.cartao-noticia__categoria,
.artigo__categoria {
  font-size: 0.7rem;
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

.cartao-noticia__titulo {
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  font-weight: 800;
  line-height: 1.25;
  text-wrap: balance;
}

.cartao-noticia__resumo {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--tinta-2);
}

.cartao-noticia .link-seta {
  align-self: start;
  justify-self: start;
  margin-top: 4px;
}

@media (max-width: 980px) {
  .cartoes-noticia,
  .cartoes-noticia--dois { grid-template-columns: 1fr; }
}

/* página da notícia */

.artigo__topo {
  padding: calc(var(--topo-altura) + clamp(40px, 6vw, 90px)) 0 clamp(28px, 4vw, 52px);
}

.artigo__estreito {
  display: grid;
  gap: 18px;
  width: min(880px, 100% - 2 * var(--respiro));
}

.artigo__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: baseline;
  margin: 0;
}

.artigo__capa {
  margin: 0 auto clamp(36px, 5vw, 64px);
  max-width: 1080px;
  rotate: -0.5deg;
}

.artigo__texto {
  display: grid;
  gap: 24px;
  width: min(900px, 100%);
  margin-inline: auto;
}

.artigo__texto > p {
  width: min(720px, 100%);
  justify-self: center;
}

.artigo__texto p {
  font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.15rem);
  line-height: 1.7;
}

.artigo__figura {
  margin: clamp(12px, 2vw, 28px) 0;
  width: 100%;
}

.artigo__figura figcaption {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--tinta-2);
  text-align: center;
}

.artigo__voltar {
  width: min(720px, 100%);
  margin: clamp(36px, 5vw, 64px) auto 0;
  padding-bottom: clamp(56px, 7vw, 100px);
}

/* inscrições (página): cartão só com título e ações */
.inscricao--simples {
  grid-template-columns: minmax(0, 1fr) 250px;
  align-items: center;
}

@media (max-width: 900px) {
  .inscricao--simples { grid-template-columns: 1fr; }
}