/* Páginas institucionais herdadas do WordPress (/congresso/, /transparencia/…).
   O conteúdo vem do WP com marcação livre, então a folha estiliza pelos
   elementos, não por classes que o conteúdo não tem. */

.pg-main {
  width: min(880px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(28px, 5vw, 60px) 0 40px;
}

.pg-shell { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }

.pg-head { margin-bottom: clamp(20px, 3vw, 34px); }

.pg-article h1 {
  margin: 0;
  font-family: "Baloo 2", Nunito, sans-serif;
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--home-ink, #2c377f);
  text-wrap: balance;
}

.pg-body {
  color: var(--home-text, #51587f);
  font-size: 1.02rem;
  line-height: 1.72;
}

.pg-body > * + * { margin-top: 1.1em; }

.pg-body h2 {
  margin-top: 1.8em;
  font-family: "Baloo 2", Nunito, sans-serif;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--home-ink, #2c377f);
}

.pg-body h3 {
  margin-top: 1.5em;
  font-family: "Baloo 2", Nunito, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--home-ink, #2c377f);
}

.pg-body a {
  color: var(--home-pink-deep, #b65b84);
  font-weight: 700;
}

.pg-body img {
  max-width: 100%;
  height: auto;
  border-radius: 18px;
}

.pg-body ul, .pg-body ol { padding-left: 22px; }
.pg-body li + li { margin-top: .4em; }

.pg-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: .93rem;
}

.pg-body th, .pg-body td {
  padding: 9px 12px;
  border: 1px solid var(--home-line, rgba(44, 55, 127, .13));
  text-align: left;
}

.pg-body th { background: var(--home-paper, #fff9ec); font-weight: 700; }

/* tabelas largas (a programação do congresso) rolam sozinhas */
.pg-body .pg-scroll { overflow-x: auto; }

.pg-body blockquote {
  margin-left: 0;
  padding: 4px 0 4px 18px;
  border-left: 4px solid var(--home-pink, #e9afc7);
  color: var(--home-ink, #2c377f);
  font-weight: 600;
}

.pg-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: clamp(32px, 5vw, 56px);
  padding: clamp(22px, 3vw, 30px);
  border-radius: 26px 26px 44px 26px;
  background: var(--home-pink, #e9afc7);
}

.pg-cta strong {
  display: block;
  font-family: "Baloo 2", Nunito, sans-serif;
  font-size: 1.2rem;
  color: var(--home-ink, #2c377f);
}

.pg-cta p {
  margin: 6px 0 0;
  max-width: 46ch;
  font-size: .93rem;
  font-weight: 600;
  color: rgba(30, 39, 89, .82);
}

.pg-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--home-ink, #2c377f);
  color: #fffdf7;
  font-family: "Baloo 2", Nunito, sans-serif;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.pg-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ---------- Dobra do congresso ----------
   Fica no topo da página que já rankeia. A programação continua abaixo: é ela
   que sustenta a posição, e trocá-la por uma dobra curta jogaria fora o
   conteúdo mais longo do domínio. */
.cong-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Sangra por POSIÇÃO NO DOM, não por 100vw.

     O 100vw + margin-left:calc(50% - 50vw) daqui era o mesmo combustível que
     cortou a loja no iPhone: se a viewport de layout alarga um pixel, o 100vw
     cresce junto e trava a página larga. Como .pg-main--bleed já entrega a
     largura toda, "borda a borda" vira width:100%, sem unidade de viewport
     nenhuma para realimentar. Era isto que descentralizava o congresso: a
     coluna de leitura passava a medir contra a viewport inflada, e a foto e a
     programação saíam pela direita. */
  width: 100%;
  margin-bottom: clamp(30px, 4vw, 48px);
  padding: clamp(44px, 7vw, 88px) 20px clamp(44px, 6vw, 80px);
  background: var(--home-pink, #e9afc7);
}

/* sobre o rosa da hero, o cinza padrão do breadcrumb não teria contraste */
.hcz-breadcrumb--hero {
  margin-bottom: 14px;
  color: rgba(44, 55, 127, .62);
}

.hcz-breadcrumb--hero a { color: rgba(44, 55, 127, .72); }
.hcz-breadcrumb--hero a:hover { color: var(--home-ink-deep, #202a63); }
.hcz-breadcrumb--hero [aria-current="page"] { color: var(--home-ink-deep, #202a63); }
.hcz-breadcrumb--hero span[aria-hidden="true"] { color: rgba(44, 55, 127, .38); }

/* halo claro atrás do formulário, como nos cards da home */
.cong-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -30%;
  right: -6%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 253, 247, .5), rgba(255, 253, 247, .12) 58%, transparent 72%);
}

/* faixa da paleta encerrando o bloco */
.cong-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 6px;
  background: linear-gradient(90deg, #e9afc7, #f4b8a4 28%, #a9d3ad 58%, #a6d8e4 78%, #c2aad0);
}

.cong-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  gap: clamp(24px, 4vw, 56px);
  /* start, não center: o título alinha pelo topo com o formulário, em vez
     de flutuar no meio da coluna */
  align-items: start;
  width: min(1080px, 100%);
  margin: 0 auto;
}

.cong-hero__copy { display: flex; flex-direction: column; }

/* os números vieram da segunda seção: aqui dão a dimensão do evento logo
   na abertura, em vez de repetir o que o texto ao lado já contava */
.cong-hero .cong-numeros {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: clamp(18px, 3vw, 38px);
  margin: clamp(20px, 3vw, 30px) 0 0;
  padding: clamp(18px, 2.4vw, 24px) 0 0;
  border-top: 1px solid rgba(255, 253, 247, 0.3);
}

.cong-hero .cong-numeros div { display: flex; flex-direction: column; gap: 2px; }

.cong-hero .cong-numeros dt {
  /* rosa escuro da marca: sobre o rosa claro da hero, o creme dava pouco
     peso ao número, que é o dado que a seção existe para mostrar */
  color: var(--rose-deep, #a34771);
  font-family: var(--font-display, "Baloo 2"), sans-serif;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.cong-hero .cong-numeros dd {
  margin: 0;
  max-width: 14ch;
  color: var(--ink, #2c377f);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
}

@media (max-width: 620px) {
  .cong-hero .cong-numeros { grid-template-columns: repeat(2, auto); row-gap: 16px; }
}

.cong-hero__form {
  padding: clamp(20px, 2.6vw, 28px);
  border-radius: 24px 24px 40px 24px;
  background: var(--home-white, #fffdf7);
  box-shadow: 0 18px 40px rgba(120, 55, 90, .18);
}

.cong-hero__form strong {
  display: block;
  font-family: "Baloo 2", Nunito, sans-serif;
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--home-ink, #2c377f);
}

.cong-hero__form > p {
  margin: 6px 0 14px;
  font-size: .89rem;
  font-weight: 600;
  color: var(--home-text, #51587f);
}

.cong-kicker {
  margin: 0 0 10px;
  color: var(--home-white, #fffdf7);
  font-family: "Baloo 2", Nunito, sans-serif;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.cong-hero h1 {
  margin: 0 0 12px;
  max-width: 20ch;
  /* branco sobre o rosa: o azul da marca não separava o bastante do fundo */
  color: var(--home-white, #fffdf7);
  font-family: "Baloo 2", Nunito, sans-serif;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.cong-lead {
  margin: 0;
  max-width: 46ch;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.55;
  color: rgba(255, 253, 247, .93);
}

@media (max-width: 820px) {
  .cong-hero__inner { grid-template-columns: 1fr; }
}

.cong-form { display: grid; gap: 9px; }

.cong-form input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--home-line, rgba(44, 55, 127, .13));
  border-radius: 13px;
  background: var(--home-paper, #fff9ec);
  font-family: Nunito, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--home-ink, #2c377f);
  outline: 0;
}

.cong-form input[type="email"]:focus {
  border-color: var(--home-pink-deep, #b65b84);
  box-shadow: 0 0 0 3px rgba(233, 175, 199, .4);
}

.cong-consent {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--home-text, #51587f);
}

.cong-consent input { margin-top: 2px; accent-color: #b65b84; }

.cong-form button {
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--home-ink, #2c377f);
  color: #fffdf7;
  font-family: "Baloo 2", Nunito, sans-serif;
  font-size: .95rem;
  font-weight: 800;
  cursor: pointer;
}

.cong-form button:hover { background: var(--home-pink-deep, #b65b84); }

.cong-feedback {
  margin: 0;
  min-height: 16px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--home-green-deep, #356b46);
}

.cong-feedback.is-error { color: #a34771; }

.cong-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

@media (max-width: 700px) {
}

/* ---------- Congresso: retrospectiva e programação ----------
   A página inteira puxa para o rosa da marca. A programação é tabela porque é
   o formato natural de uma grade de horários — e sobrevive a qualquer folha
   de estilo, diferente do bloco de abas que veio do WordPress. */
/* Texto de um lado, fotos do outro: sozinho no meio da página o carrossel
   ficava com metade da largura vazia à direita. */
.cong-retro {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  margin: clamp(30px, 4vw, 48px) 0;
}

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

.cong-retro h2,
.cong-prog h2 {
  margin: 0 0 8px;
  font-family: "Baloo 2", Nunito, sans-serif;
  font-size: clamp(1.4rem, 2.8vw, 1.95rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--home-pink-deep, #b65b84);
}

.cong-retro p {
  margin: 0;
  max-width: 58ch;
  font-size: .97rem;
  font-weight: 600;
  color: var(--home-text, #51587f);
}

/* o carrossel é o mesmo componente da home; aqui ele só ganha limite de
   largura e a sombra que os outros blocos da página usam */
.cong-carrossel {
  min-width: 0;
}

/* números da 1ª edição: vêm da própria tabela de programação abaixo */
.cong-numeros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(20px, 3vw, 38px);
  margin: 22px 0 0;
}

.cong-numeros div {
  display: grid;
  gap: 2px;
}

.cong-numeros dt {
  font-family: "Baloo 2", Nunito, sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--home-pink-deep, #b65b84);
}

.cong-numeros dd {
  margin: 0;
  max-width: 15ch;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--home-text, #51587f);
}

.cong-retro__copy p + p {
  margin-top: 12px;
}

.cong-carrossel .proj-carousel {
  box-shadow: 0 16px 34px rgba(44, 55, 127, .18);
}

.cong-prog { margin-top: clamp(30px, 4vw, 48px); }

.cong-dia {
  margin: clamp(24px, 3vw, 34px) 0 10px;
  padding: 8px 16px;
  display: inline-block;
  border-radius: 999px;
  background: var(--home-pink, #e9afc7);
  color: var(--home-ink, #2c377f);
  font-family: "Baloo 2", Nunito, sans-serif;
  font-size: 1rem;
  font-weight: 800;
}

.cong-scroll {
  overflow-x: auto;
  border: 1px solid rgba(182, 91, 132, .22);
  border-radius: 20px;
  background: var(--home-white, #fffdf7);
}

.cong-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}

.cong-tabela th {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(182, 91, 132, .22);
  background: rgba(233, 175, 199, .22);
  color: var(--home-pink-deep, #b65b84);
  font-family: "Baloo 2", Nunito, sans-serif;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

.cong-tabela td {
  padding: 13px 14px;
  border-bottom: 1px solid rgba(44, 55, 127, .09);
  vertical-align: top;
  color: var(--home-text, #51587f);
}

.cong-tabela tr:last-child td { border-bottom: 0; }

.cong-hora {
  font-family: "Baloo 2", Nunito, sans-serif;
  font-weight: 800;
  color: var(--home-ink, #2c377f);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cong-sala { color: var(--home-muted, #777d9d); font-size: .86rem; }

.cong-tipo {
  display: inline-block;
  margin-bottom: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(194, 170, 208, .3);
  color: #6b539b;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.cong-tabela td strong {
  display: block;
  color: var(--home-ink, #2c377f);
  font-size: .97rem;
  line-height: 1.3;
}

.cong-tabela td small {
  display: block;
  margin-top: 4px;
  color: var(--home-muted, #777d9d);
  font-size: .82rem;
}

.cong-palestras {
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 5px;
}

.cong-palestras li {
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--home-paper, #fff9ec);
  font-size: .86rem;
  line-height: 1.4;
}

.cong-palestras b {
  color: var(--home-pink-deep, #b65b84);
  font-variant-numeric: tabular-nums;
}

.cong-palestras i {
  display: block;
  font-style: normal;
  font-weight: 700;
  color: var(--home-ink, #2c377f);
}

/* ---------- Abas dos dias ----------
   79 sessões numa lista corrida viram um paredão. Um dia por vez. */
.cong-abas {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 18px 0 14px;
}

.cong-aba {
  padding: 11px 22px;
  border: 1.5px solid rgba(182, 91, 132, .3);
  border-radius: 999px;
  background: var(--home-white, #fffdf7);
  color: var(--home-pink-deep, #b65b84);
  font-family: "Baloo 2", Nunito, sans-serif;
  font-size: .95rem;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.cong-aba:hover { border-color: var(--home-pink-deep, #b65b84); }

.cong-aba.is-active {
  border-color: transparent;
  background: var(--home-pink-deep, #b65b84);
  color: var(--home-white, #fffdf7);
}

.cong-painel[hidden] { display: none; }

/* campos do formulário do congresso */
.cong-form input[type="text"],
.cong-form input[type="tel"] {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--home-line, rgba(44, 55, 127, .13));
  border-radius: 13px;
  background: var(--home-paper, #fff9ec);
  font-family: Nunito, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--home-ink, #2c377f);
  outline: 0;
}

.cong-form input[type="text"]:focus,
.cong-form input[type="tel"]:focus {
  border-color: var(--home-pink-deep, #b65b84);
  box-shadow: 0 0 0 3px rgba(233, 175, 199, .4);
}

/* o hero sangra a largura toda, mas a página tem coluna estreita: o conteúdo
   que vem depois volta ao normal sozinho */
.pg-body > .cong-hero + * { margin-top: 0; }

/* pontinhos coloridos do chapéu, assinatura da marca */
.cong-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.cong-kicker i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--home-white, #fffdf7);
}

.cong-kicker i:nth-child(2) { background: var(--home-green, #a9d3ad); }
.cong-kicker i:nth-child(3) { background: var(--home-lilac, #c2aad0); }

/* números da edição: dão peso ao hero sem precisar de imagem */
/* selo com o personagem, encavalado na quina do formulário */

/* Botão que abre o resto da programação */
.cong-mais {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 11px 20px;
  border: 1.5px solid rgba(44, 55, 127, 0.2);
  border-radius: 999px;
  color: var(--ink, #2c377f);
  background: transparent;
  font-family: var(--font-display, "Baloo 2"), sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.cong-mais::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2.2px solid currentColor;
  border-bottom: 2.2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 200ms ease;
}

.cong-mais.is-aberto::after { transform: translateY(2px) rotate(-135deg); }
.cong-mais:hover { border-color: var(--rose, #b65b84); background: rgba(182, 91, 132, 0.07); }

@media (prefers-reduced-motion: reduce) {
  .cong-mais, .cong-mais::after { transition: none; }
}

/* o botão fica centrado abaixo da tabela */
.cong-mais-linha { display: flex; justify-content: center; }

/* =========================================================
   Páginas com hero própria (congresso): constraint invertido

   O container deixa de ser a coluna estreita e passa a ocupar a largura
   toda; a coluna de leitura volta nos filhos do corpo. Assim uma faixa
   sangra sendo apenas width:100%, e nada precisa de 100vw.
   ========================================================= */
/* O seletor carrega .inst-body de propósito: a padding lateral vem de
   `.inst-body main`, que tem especificidade (0,1,1) e ganharia de um
   `.pg-main--bleed` sozinho (0,1,0). Sem o peso extra a faixa para 18px
   antes da borda. O respiro volta na coluna de leitura, via calc(100% - 40px). */
.inst-body .pg-main--bleed {
  width: 100%;
  max-width: none;
  padding-inline: 0;
  padding-top: 0;
}

.pg-main--bleed .pg-body > * {
  width: min(880px, calc(100% - 40px));
  margin-inline: auto;
}

/* a hero é a exceção: ela é a faixa que ocupa tudo */
.pg-main--bleed .pg-body > .cong-hero {
  width: 100%;
  max-width: none;
}

/* trava final, igual à do #app da loja: se algo aqui dentro vazar no futuro,
   é cortado aqui e nunca chega a alargar a viewport de layout do iOS */
.pg-main--bleed { overflow-x: clip; }