/* Composição das páginas: topo, capa, convergência, o dia, oficinas, rodapé. */

/* -------------------------------------------- faixa institucional */

/* Assinatura do órgão realizador, acima de tudo. Hoje em texto; o espaço
   da marca oficial está reservado no HTML. */
.institucional {
  background: var(--escola);
  color: #ffffff;
  font-size: .925rem;
  padding: .55rem 0;
}
.institucional p { margin: 0; }
.institucional__marca { display: block; height: 2.2rem; width: auto; }

/* --------------------------------------------------------------- topo */

.topo {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 251, 253, .94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--linha);
}
.topo__conteudo {
  display: flex; align-items: center; gap: 1.4rem;
  min-height: 3.5rem;
  overflow-x: auto; scrollbar-width: none;
}
.topo__conteudo::-webkit-scrollbar { display: none; }
.topo a { color: var(--tinta-media); text-decoration: none; white-space: nowrap; font-size: .975rem; }
.topo a:hover { color: var(--tinta); }
/* No celular o menu rola na horizontal. O aviso de inscrição gruda na
   borda direita para não sumir junto com a rolagem — ele é o único da
   página. */
.topo .botao {
  margin-left: auto;
  padding: .5rem 1rem;
  font-size: .95rem;
  position: sticky;
  right: 0;
  z-index: 1;
  flex: none;
  box-shadow: -.6rem 0 .6rem rgba(255, 255, 255, .9);
}

/* --------------------------------------------------------------- capa */

.capa { padding: 3rem 0 2.5rem; background: var(--escola-tenue); }
.capa__realizacao { color: var(--tinta-media); margin-bottom: 1.6rem; }
.capa__linha { font-size: clamp(1.15rem, 3.5vw, 1.5rem); color: var(--tinta-media); margin: -.2em 0 1.8rem; }
.capa__fatos {
  display: grid; gap: 1rem 2.5rem; margin: 0 0 2rem;
  border-top: 2px solid var(--tinta); padding-top: 1.1rem;
  max-width: 58rem;
}
@media (min-width: 34rem) { .capa__fatos { grid-template-columns: repeat(3, auto); justify-content: start; } }
.capa__fatos dt { font-size: .95rem; color: var(--tinta-media); margin-bottom: .1rem; }
.capa__fatos dd { margin: 0; font-weight: 700; }

/* ------------------------------------------------------- convergência */

.convergencia { margin: 2.25rem 0 0; max-width: 46rem; }
.convergencia svg { display: block; width: 100%; height: auto; }
.convergencia figcaption { color: var(--tinta-media); max-width: var(--prosa); margin-top: .6rem; }
.chave { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; list-style: none; margin: 0 0 .8rem; padding: 0; }
.chave li { display: flex; align-items: center; gap: .5rem; font-weight: 700; }
.chave i { display: block; width: 1.6rem; height: .3rem; border-radius: 2px; }
.chave--familia i { background: #c17d0a; }
.chave--escola i  { background: #2e8fd8; }
.chave--saude i   { background: #1f9a63; }

@media (prefers-reduced-motion: no-preference) {
  .fio { stroke-dasharray: 820; stroke-dashoffset: 820; animation: tracar 1.2s cubic-bezier(.2, .7, .3, 1) forwards; }
  .fio--escola { animation-delay: .12s; }
  .fio--saude { animation-delay: .24s; }
  .fio--uniao { animation-delay: 1s; animation-duration: .5s; }
  .no { opacity: 0; animation: surgir .4s ease-out .95s forwards; }
  @keyframes tracar { to { stroke-dashoffset: 0; } }
  @keyframes surgir { to { opacity: 1; } }
}

/* ------------------------------------------------------------- seções */

.secao { padding: 3.5rem 0; border-top: 1px solid var(--linha); }
.secao--carta { background: var(--familia-tenue); }
.secao--fundo { background: var(--papel-fundo); }

/* ---------------------------------------------------------- públicos */

.publicos { margin: 1.8rem 0 0; }
.publicos div { padding: .95rem 0 .95rem 1.5rem; border-top: 1px solid var(--linha); position: relative; }
.publicos div::before {
  content: ""; position: absolute; left: 0; top: 1.5rem;
  width: .55rem; height: .55rem; border-radius: 2px; background: var(--escola-vivo);
}
.publicos div:nth-child(3n+2)::before { background: var(--acao); }
.publicos div:nth-child(3n)::before { background: var(--saude-vivo); }
.publicos div:last-child { border-bottom: 1px solid var(--linha); }
.publicos dt { font-weight: 700; }
.publicos dd { margin: 0; color: var(--tinta-media); }
@media (min-width: 44rem) {
  .publicos div { display: grid; grid-template-columns: 17rem 1fr; gap: 0 2rem; }
}

/* ------------------------------------------------------------- o dia */

.dia { list-style: none; margin: 2rem 0 0; padding: 0 0 0 1.4rem; border-left: 3px solid var(--escola-tenue); }
.bloco { position: relative; padding: 0 0 1.9rem; }
.bloco::before {
  content: ""; position: absolute; left: -2.05rem; top: .35rem;
  width: .95rem; height: .95rem; border-radius: 50%;
  border: 3px solid var(--papel);
  background: var(--escola-vivo);
}
.bloco--pausa::before { background: var(--linha); }
.bloco--salas::before { background: var(--saude-vivo); }
.bloco--pausa .bloco__titulo { color: var(--tinta-media); font-weight: 400; font-size: 1rem; }
.bloco__hora {
  display: block; font-weight: 700; font-size: .95rem;
  font-variant-numeric: tabular-nums; color: var(--escola);
}
.bloco--pausa .bloco__hora { color: var(--tinta-media); font-weight: 400; }
.bloco--salas .bloco__hora { color: var(--saude); }
.bloco__titulo {
  font-family: Archivo, system-ui, sans-serif; font-weight: 700; font-size: 1.15rem;
  display: flex; align-items: center; gap: .55rem;
}
/* As palestras são numeradas no documento do evento; o número é dado, não enfeite. */
.bloco__numero {
  flex: none;
  display: inline-grid; place-items: center;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--acao); color: var(--tinta);
  font-size: .95rem; line-height: 1;
}
.bloco__nota { color: var(--tinta-media); max-width: var(--prosa); margin: .2rem 0 0; }
@media (min-width: 44rem) {
  .bloco { display: grid; grid-template-columns: 8rem 1fr; gap: 0 1.5rem; }
  .bloco__hora { grid-row: span 3; padding-top: .15rem; }
  .bloco::before { top: .4rem; }
}

/* O trecho do dia em que o auditório se divide em três salas. */
.trilhas { display: grid; gap: .7rem; margin: .8rem 0 0; }
@media (min-width: 52rem) { .trilhas { grid-template-columns: repeat(3, 1fr); } }
.trilha { border-left: 8px solid; border-radius: 0 6px 6px 0; padding: .7rem .9rem; }
.trilha strong { display: block; font-family: Archivo, system-ui, sans-serif; }
.trilha span { font-size: .95rem; color: var(--tinta-media); }
.trilha--familia { border-color: var(--familia-vivo); background: var(--familia-tenue); }
.trilha--escola  { border-color: var(--escola-vivo);  background: var(--escola-tenue); }
.trilha--saude   { border-color: var(--saude-vivo);   background: var(--saude-tenue); }

/* ------------------------------------------------------- palestrantes */

.palestras { list-style: none; margin: 2rem 0 0; padding: 0; }
.palestras > li { padding: 1.6rem 0; border-top: 1px solid var(--linha); }
.palestras > li:first-child { border-top: 0; }
.palestras > li:last-child { border-bottom: 1px solid var(--linha); }
.palestra__numero {
  display: inline-grid; place-items: center;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--acao); color: var(--tinta);
  font-family: Archivo, system-ui, sans-serif; font-weight: 700; font-size: 1.25rem;
  margin-bottom: .5rem;
}
.palestra__ordem { display: block; font-size: .95rem; color: var(--tinta-media); }
.palestra__nome { font-family: Archivo, system-ui, sans-serif; font-weight: 700; font-size: 1.45rem; line-height: 1.15; margin: .1rem 0 0; }
.palestra__tema { margin: .5rem 0 0; max-width: var(--prosa); }
.palestra__bio { margin: .5rem 0 0; font-size: .975rem; color: var(--tinta-media); max-width: var(--prosa); }
@media (min-width: 52rem) {
  .palestras > li { display: grid; grid-template-columns: 20rem 1fr; gap: 0 3rem; }
  .palestra__tema, .palestra__bio { grid-column: 2; }
  .palestra__numero, .palestra__ordem, .palestra__nome { grid-column: 1; }
  .palestra__tema { margin-top: 0; }
}

/* ----------------------------------------------------------- oficinas */

.oficinas { display: grid; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 56rem) { .oficinas { grid-template-columns: repeat(3, 1fr); } }
.oficina { border-top: 8px solid; border-radius: 6px 6px 0 0; padding: 1.1rem 1.2rem 1.3rem; }
.oficina--familia { border-color: var(--familia-vivo); background: var(--familia-tenue); }
.oficina--escola  { border-color: var(--escola-vivo);  background: var(--escola-tenue); }
.oficina--saude   { border-color: var(--saude-vivo);   background: var(--saude-tenue); }
.oficina__sala { font-weight: 700; font-size: .95rem; }
.oficina--familia .oficina__sala { color: var(--familia); }
.oficina--escola .oficina__sala  { color: var(--escola); }
.oficina--saude .oficina__sala   { color: var(--saude); }
.oficina h3 { margin: .2rem 0 .6rem; }
.oficina p { font-size: .975rem; }
.oficina__produto { border-top: 1px solid rgba(27, 54, 84, .18); padding-top: .8rem; margin-bottom: 0; }

/* -------------------------------------------------------------- carta */

.compromissos { margin: 1.8rem 0 2rem; padding: 0; list-style: none; max-width: var(--prosa); }
.compromissos li { padding: .7rem 0 .7rem 1.6rem; border-bottom: 1px solid rgba(27, 54, 84, .14); position: relative; }
.compromissos li::before {
  content: ""; position: absolute; left: 0; top: 1.2rem;
  width: .6rem; height: .6rem; border-radius: 2px; background: var(--familia-vivo);
}

/* ------------------------------------------------------------- rodapé */

.rodape { background: var(--escola-tenue); color: var(--tinta-media); padding: 3rem 0; border-top: 4px solid var(--escola-vivo); }
.rodape h2 { color: var(--tinta); font-size: 1.35rem; }
.rodape a { color: var(--escola); }
.rodape dl { display: grid; gap: .9rem 2.5rem; margin: 1.5rem 0; }
@media (min-width: 34rem) { .rodape dl { grid-template-columns: repeat(3, auto); justify-content: start; } }
.rodape dt { font-size: .95rem; color: var(--tinta-media); }
.rodape dd { margin: 0; color: var(--tinta); font-weight: 700; }
.rodape__nota { font-size: .95rem; color: var(--tinta-media); max-width: var(--prosa); margin-bottom: 0; }
/* Entrada da equipe: discreta, no fim, sem disputar com as inscrições. */
.rodape__equipe {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
  margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--linha);
}
.rodape__equipe-titulo { margin: 0; width: 100%; font-size: .95rem; font-weight: 700; color: var(--tinta); }
.rodape__equipe .botao { padding: .55rem 1.1rem; font-size: .95rem; background: var(--papel); }

/* Assinatura institucional: quem realiza e quem organiza. */
.assinaturas {
  display: grid; gap: 1.4rem 3rem;
  margin: 2rem 0 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(27, 54, 84, .18);
}
@media (min-width: 44rem) { .assinaturas { grid-template-columns: repeat(3, minmax(0, 15rem)); } }
.assinatura__papel { font-size: .85rem; color: var(--tinta-media); margin: 0 0 .25rem; }
.assinatura__nome { color: var(--tinta); font-weight: 700; margin: 0; }

/* As marcas vêm em PNG de fundo branco e resolução modesta: ficam sobre um
   cartão branco e num tamanho em que a linha menor ainda se lê. */
.assinatura__marca {
  display: block;
  margin-top: .5rem;
  width: 13rem;
  height: 6rem;
  object-fit: contain;
  background: #fff;
  padding: .7rem .9rem;
  border-radius: 6px;
}