html { scroll-behavior: smooth; }

.par {
  display: grid;
  gap: var(--esp-bloco);
  max-width: var(--container);
  margin: 0 auto;
}
@media (min-width: 900px) {
  .par {
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: var(--esp-bloco) clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
}

.rotulo {
  margin: 0;
  font-size: var(--tipo-rotulo);
  font-weight: var(--peso-negrito);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--cor-acento-texto);
  font-variant-numeric: tabular-nums;
}

.abertura {
  margin: 0;
  font-size: var(--tipo-h2);
  font-weight: var(--peso-black);
  line-height: var(--altura-titulo);
  letter-spacing: var(--tracking-titulo);
  color: var(--cor-texto);
  text-wrap: balance;
}

.fecho {
  margin: 0;
  font-size: var(--tipo-h3);
  font-weight: var(--peso-black);
  line-height: var(--altura-subtitulo);
  letter-spacing: var(--tracking-titulo);
  color: var(--cor-texto);
  text-wrap: balance;
}

.descritor {
  margin: 0;
  font-size: var(--tipo-corpo);
  line-height: var(--altura-corpo);
  color: var(--cor-texto-2);
}

.microcopy {
  margin: 0;
  font-size: var(--tipo-detalhe);
  line-height: var(--altura-corpo);
  color: var(--cor-texto-3);
}

.divisor {
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(7rem, 16vw, 13rem);
  background-position: center top;
  background-size: 150% auto;
  mask-image: linear-gradient(to bottom, currentColor 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, currentColor 0%, transparent 100%);
}

.campo-secao {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: no-repeat;
}
.secao-miolo { z-index: 1; }

.caixa-manchete {
  container-type: inline-size;
  width: 100%;
  max-width: var(--container-largo);
}
.manchete {
  margin: 0;
  font-weight: var(--peso-black);
  line-height: var(--altura-manifesto);
  letter-spacing: var(--tracking-manifesto);
}
.manchete .acento { color: var(--cor-acento-texto); }

.marcador {
  position: relative;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  align-self: center;
}
.marcador::before,
.marcador::after {
  content: "";
  position: absolute;
  background: var(--cor-texto-3);
  transition:
    background-color var(--dur-utilidade) var(--ease-confiante),
    transform var(--dur-utilidade) var(--ease-confiante);
}
.marcador::before { left: 0; right: 0; top: 50%; height: 1px; }
.marcador::after  { top: 0; bottom: 0; left: 50%; width: 1px; }

.palco {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  overflow: clip;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: var(--margem-pagina);
  isolation: isolate;
  text-align: center;
}

.palco > .barra { position: relative; z-index: 2; }
.palco > .miolo { position: relative; z-index: 1; }
.palco > .grafismo-dither { position: absolute; z-index: 0; }

.grafismo-dither--hero {
  background-position: center 38%;
  background-size: min(180vw, 40rem);
}
@media (min-width: 900px) {
  .grafismo-dither--hero {
    background-position: center 33%;
    background-size: min(60vw, 46rem);
  }
}

.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-item);
}
.logo { height: var(--escala-4); width: auto; display: block; }

.menu { position: relative; }
.menu > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-item);
  list-style: none;
  cursor: pointer;
  color: var(--cor-texto-2);
  font-size: var(--tipo-rotulo);
  font-weight: var(--peso-medio);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  transition: color var(--dur-utilidade) var(--ease-confiante);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { color: var(--cor-texto); }
.menu[open] > summary { color: var(--cor-texto); }

.menu[open] .marcador::before,
.menu[open] .marcador::after { transform: rotate(45deg); }
.menu[open] .marcador::before,
.menu[open] .marcador::after,
.menu > summary:hover .marcador::before,
.menu > summary:hover .marcador::after { background: var(--cor-acento-texto); }

.menu-lista {
  position: absolute;
  right: 0;
  top: calc(100% + var(--esp-item));
  z-index: 2;
  display: grid;
  gap: var(--esp-item);
  min-width: 12rem;
  padding-top: var(--esp-item);
  border-top: 1px solid var(--hairline);
  text-align: right;
  animation: menu-abre var(--dur-conteudo) var(--ease-confiante) both;
}
@keyframes menu-abre {
  from { opacity: 0; transform: translateY(-0.5rem); }
  to   { opacity: 1; transform: none; }
}
.menu-lista a {
  color: var(--cor-texto-2);
  text-decoration: none;
  font-size: var(--tipo-detalhe);
  transition: color var(--dur-utilidade) var(--ease-confiante);
}
.menu-lista a:hover { color: var(--cor-acento-texto); }

@media (max-width: 700px) {
  .menu-lista { gap: 0; }
  .menu-lista a { display: block; padding: calc(var(--esp-item) * 0.6875) 0; }
  .menu > summary { padding: var(--esp-item) 0; margin: calc(var(--esp-item) * -1) 0; }
  .rodape-coluna a,
  .contato-acao { display: block; padding: calc(var(--esp-item) * 0.75) 0; }
  .rodape-coluna { gap: 0; }

  nav.rodape-coluna { grid-template-columns: 1fr 1fr; column-gap: var(--esp-item); }
  nav.rodape-coluna .rodape-coluna-titulo { grid-column: 1 / -1; }
}

@media (max-width: 899px) {
  .miolo { transition: opacity var(--dur-conteudo) var(--ease-confiante); }
  .palco:has(.menu[open]) .miolo { opacity: 0.16; }
}

.miolo {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--esp-grupo);
  padding: var(--esp-bloco) 0;
}

.manchete .linha {
  display: block;
  white-space: nowrap;
  font-size: clamp(2.5rem, 10vw, 7.5rem);
  font-size: calc(100cqw / 10);
}

.palco .descritor { max-width: 44ch; }

.acoes-hero {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--esp-item);
}

@media (max-width: 30rem) {
  .acoes-hero {
    display: grid;
    grid-template-columns: 1fr;
    width: min(100%, 20rem);
  }
}

.deslize {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: var(--esp-item);
  font-size: var(--tipo-rotulo);
  font-weight: var(--peso-medio);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--cor-texto-3);
}
.deslize .traco {
  display: block;
  width: 1px;
  height: var(--escala-12);
  background: var(--cor-borda-forte);
  position: relative;
  overflow: hidden;
}
.deslize .traco::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cor-acento);
  transform: translateY(-100%);
  animation: descer 2.6s var(--ease-suave) infinite;
}
@keyframes descer {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .deslize .traco::after { animation: none; transform: translateY(0); opacity: 0.35; }
}

@media (max-width: 700px) {
  .miolo { gap: var(--esp-item); }
  .miolo .deslize { margin-top: var(--esp-grupo); }
  .manchete .linha { font-size: calc(100cqw / 7.6); }
}

.secao--dor .texto {
  display: grid;
  gap: var(--esp-bloco);
}
@media (min-width: 900px) {
  .secao--dor .texto { gap: clamp(2.5rem, 4vw, 3.5rem); }
}

.secao--dor .abertura,
.secao--dor .corpo,
.secao--dor .fecho { max-width: var(--container-texto); }

.secao--dor .corpo {
  display: grid;
  gap: var(--esp-grupo);
  padding-top: var(--esp-bloco);
  border-top: 1px solid var(--hairline);
}
.secao--dor .corpo p {
  margin: 0;
  font-size: var(--tipo-destaque);
  line-height: var(--altura-corpo);
  color: var(--cor-texto-2);
  text-wrap: pretty;
}

.secao--dor .fecho {
  padding-top: var(--esp-bloco);
  border-top: 1px solid var(--hairline);
  line-height: var(--altura-subtitulo);
}

.secao--numeros {
  padding-left: 0;
  padding-right: 0;
  isolation: isolate;
  overflow: visible;
}

.painel { position: relative; z-index: 2; }
.painel .contador { margin-top: var(--esp-grupo); }

.pode-trilho .grude {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;

  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 100%;
  overflow: hidden;
}

.pode-trilho .faixa {
  flex-direction: row;
  align-items: stretch;
  will-change: transform;
}

.pode-trilho .quadro {
  flex: 0 0 100vw;
  width: auto;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.faixa {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.quadro {
  flex: 0 0 auto;
  width: 100%;
  min-height: 32rem;
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: var(--esp-grupo);
  padding: var(--esp-bloco) var(--margem-pagina);
  min-height: min(84svh, 44rem);
}
.quadro > :not(.campo-secao) { position: relative; z-index: 1; }

.quadro .campo-secao {
  background-position: center 42%;
  background-size: min(155vw, 62rem);
}
.quadro--2 .campo-secao { transform: scaleX(-1); }
.quadro--3 .campo-secao { transform: scaleY(-1); }
.quadro--4 .campo-secao { transform: scale(-1); }

.quadro .rotulo .de { color: var(--cor-texto-3); font-weight: var(--peso-medio); }

.quadro .caixa-manchete { max-width: var(--container); }
.quadro .manchete { display: grid; gap: var(--esp-micro); }
.manchete .cifra {
  display: block;
  font-size: calc(100cqw / 11);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.manchete .unidade {
  display: block;
  font-size: var(--tipo-h2);
  font-weight: var(--peso-regular);
  line-height: var(--altura-subtitulo);
  letter-spacing: var(--tracking-titulo);
  text-wrap: balance;
}

.quadro--4 .manchete .unidade,
.quadro--fecho .manchete .unidade {
  font-size: calc(100cqw / 22);
  font-weight: var(--peso-black);
  letter-spacing: var(--tracking-manifesto);
  line-height: var(--altura-titulo);
  max-width: 20ch;
  margin: 0 auto;
}

.quadro .descritor { max-width: 46ch; }
.quadro--4 .descritor { max-width: 62ch; }

.quadro--abertura { justify-items: stretch; text-align: left; flex-basis: 100vw; }
.quadro--abertura .par { width: 100%; }
.quadro--abertura .abertura { max-width: 20ch; margin-bottom: var(--esp-grupo); }

.acao-fecho { margin: var(--esp-item) 0 0; }

.contador {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--esp-item);
  font-size: var(--tipo-rotulo);
  font-weight: var(--peso-medio);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--cor-texto-3);
}
.contador .traco {
  display: block;
  width: var(--escala-12);
  height: 1px;
  background: var(--cor-borda-forte);
  position: relative;
  overflow: hidden;
}
.contador .traco::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cor-acento);
  transform: translateX(-100%);
  animation: correr 2.6s var(--ease-suave) infinite;
}
@keyframes correr {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

@keyframes descer {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}
@media (prefers-reduced-motion: reduce) {

  .contador .traco::after { animation: none; transform: none; opacity: 0.35; }
}

@media (max-width: 700px) {
  html { scroll-snap-type: y proximity; }

  .quadro {
    flex-basis: auto;
    min-height: 100svh;
    scroll-snap-align: center;

    scroll-snap-stop: always;
    padding: var(--esp-bloco) var(--esp-item);
  }

  .quadro--abertura {
    flex-basis: auto;
    justify-items: center;
    text-align: center;
  }
  .quadro--abertura .par { justify-items: center; }
  .quadro--abertura .abertura { max-width: 16ch; margin-inline: auto; }

  .contador { flex-direction: column; gap: var(--esp-item); }
  .contador .traco { width: 1px; height: var(--escala-8); }
  .contador .traco::after { transform: translateY(-100%); animation-name: descer; }

  .manchete .cifra { font-size: calc(100cqw / 6.4); }
  .manchete .unidade { font-size: var(--tipo-h3); }
  .quadro--4 .manchete .unidade,
  .quadro--fecho .manchete .unidade { font-size: calc(100cqw / 11); }

  .quadro .campo-secao { background-size: min(230vw, 46rem); }
}

.secao--fazemos .cabecalho {
  display: grid;
  gap: var(--esp-item);
  justify-items: start;
  margin-bottom: var(--esp-bloco);
}
.secao--fazemos .abertura { max-width: 26ch; }

.grade {
  display: grid;
  gap: var(--esp-item);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--container);
}
@media (min-width: 680px)  { .grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .grade { grid-template-columns: repeat(3, 1fr); } }

.celula {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--esp-grupo);
  padding: clamp(1.5rem, 2vw, 2rem);
  border-radius: var(--raio-m);
  background: var(--cor-fundo-elevada);
  min-height: clamp(12rem, 17vw, 17rem);
}

.celula--ancora {
  grid-template-rows: 1fr;
  align-content: center;
  padding: clamp(1.75rem, 2.4vw, 2.5rem);
}

@media (max-width: 679px) {
  .celula {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto;
    align-items: start;
    gap: var(--esp-item);
    min-height: 0;
  }

  .celula > span:empty { display: none; }
  .celula--ancora { grid-template-columns: 1fr; }
  .icone { width: var(--escala-8); }
}

.texto-celula {
  margin: 0;
  font-size: var(--tipo-destaque);
  font-weight: var(--peso-negrito);
  line-height: var(--altura-subtitulo);
  color: var(--cor-texto-2);
  text-wrap: pretty;
}
.texto-celula .nome {
  display: block;
  color: var(--cor-texto);
  letter-spacing: var(--tracking-titulo);
}

.icone {
  display: block;
  width: clamp(3rem, 4.5vw, 4rem);
  height: auto;
  color: var(--cor-texto);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 0 5;
}

.secao--perguntas .abertura {
  margin-bottom: var(--esp-bloco);
  max-width: 18ch;
}

.secao--perguntas .campo-secao {
  background-position: right -78% center;
  background-size: min(110vw, 50rem);
}

.lista { display: grid; }
.item { border-top: 1px solid var(--hairline); }
.lista .item:last-child { border-bottom: 1px solid var(--hairline); }

.pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-grupo);
  padding: var(--esp-grupo) 0;
  cursor: pointer;
  list-style: none;
  color: var(--cor-texto);
  font-size: var(--tipo-h3);
  font-weight: var(--peso-black);
  line-height: var(--altura-subtitulo);
  letter-spacing: var(--tracking-titulo);
}
.pergunta::-webkit-details-marker { display: none; }
.pergunta .aspa { color: var(--cor-texto-3); }

.item[open] .marcador::after { transform: scaleY(0); }
.item[open] .marcador::before,
.item[open] .marcador::after,
.pergunta:hover .marcador::before,
.pergunta:hover .marcador::after { background: var(--cor-acento-texto); }

.resposta {
  margin: 0;
  padding-bottom: var(--esp-grupo);
  max-width: var(--container-texto);
  font-size: var(--tipo-destaque);
  line-height: var(--altura-corpo);
  color: var(--cor-texto-2);
  text-wrap: pretty;
}
.item[open] .resposta { animation: revelar var(--dur-conteudo) var(--ease-confiante) both; }
@keyframes revelar {
  from { opacity: 0; transform: translateY(-0.5rem); }
  to   { opacity: 1; transform: none; }
}

.contexto-claro .pergunta { font-size: var(--tipo-destaque); }

@media (max-width: 700px) {

  .secao--perguntas .campo-secao {
    background-size: min(120vw, 20rem);
    background-position: right -2rem bottom -8rem;
  }
}

.secao--formulario .abertura { max-width: 20ch; }
.secao--formulario .descritor {
  margin-top: var(--esp-grupo);
  max-width: var(--container-texto);
  font-size: var(--tipo-destaque);
  text-wrap: pretty;
}

.sala { overflow: hidden; }
.secao--formulario > .campo-secao {

  background-position: right -14% top -30%;
  background-size: min(84vw, 34rem);
}

.acao { margin: var(--esp-bloco) 0 0; }
.convite-nota {
  margin: var(--esp-item) 0 0;
  font-size: var(--tipo-detalhe);
  line-height: var(--altura-corpo);
  color: var(--cor-texto-3);
}

.sala {
  display: none;
  margin: var(--esp-secao) calc(var(--margem-pagina) * -1) 0;
  padding: var(--esp-bloco) var(--margem-pagina) 0;
  border-top: 1px solid var(--hairline);
  position: relative;
  z-index: 1;

  opacity: 0;
  translate: 0 -0.75rem;
  transition:
    opacity var(--dur-conteudo) var(--ease-confiante),
    translate var(--dur-conteudo) var(--ease-confiante),
    display var(--dur-conteudo) allow-discrete;
}
.forma:has(:target) .sala {
  display: block;
  opacity: 1;
  translate: 0 0;
}

@starting-style {
  .forma:has(:target) .sala { opacity: 0; translate: 0 -0.75rem; }
}
.sala-miolo { max-width: var(--container); margin: 0 auto; }

.indice {
  display: flex;
  gap: var(--esp-grupo);
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 var(--esp-bloco);
  padding: 0 0 var(--esp-item);
  border-bottom: 1px dashed var(--hairline);
}
.indice a {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-micro);
  text-decoration: none;
  color: var(--cor-texto-3);
  font-size: var(--tipo-rotulo);
  font-weight: var(--peso-negrito);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-utilidade) var(--ease-confiante);
}
.indice a:hover { color: var(--cor-texto); }

.forma:has(#etapa-1:target) .ind-1 a,
.forma:has(#etapa-2:target) .ind-2 a,
.forma:has(#etapa-3:target) .ind-3 a { color: var(--cor-texto); }

.passo-marca {
  width: 0.625rem;
  height: 0.625rem;
  border: 1px solid var(--cor-borda-forte);
  transition:
    background-color var(--dur-utilidade) var(--ease-confiante),
    border-color var(--dur-utilidade) var(--ease-confiante);
}
.forma:not(:has(#etapa-1 :invalid)) .ind-1 .passo-marca,
.forma:not(:has(#etapa-2 :invalid)) .ind-2 .passo-marca {
  background: var(--cor-acento);
  border-color: var(--cor-acento);
}

.passo { display: none; }
.passo:target {
  display: block;
  animation: entrar var(--dur-conteudo) var(--ease-confiante) both;
}

.passo { scroll-margin-top: 15rem; }
@media (max-width: 700px) { .passo { scroll-margin-top: 13rem; } }
@keyframes entrar {
  from { opacity: 0; transform: translateY(0.75rem); }
  to   { opacity: 1; transform: none; }
}

.forma .linha { display: grid; gap: var(--esp-micro); }
@media (min-width: 900px) {
  .forma .linha {
    grid-template-columns: 11rem minmax(0, 1fr) 1.5rem;
    gap: 0 clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }

  .forma .linha .campo-rotulo { padding-top: var(--esp-micro); }
  .forma .passo-cabecalho.linha { align-items: center; }

  .forma .campo .campo-entrada { grid-column: 2 / -1; }
}

.passo-cabecalho { padding: 0 0 var(--esp-item); }
.passo-numero {
  font-size: var(--tipo-h3);
  font-weight: var(--peso-black);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-titulo);
  line-height: 1;
  color: var(--cor-texto);
}
.passo-nome {
  margin: 0;
  font-size: var(--tipo-rotulo);
  font-weight: var(--peso-negrito);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--cor-texto-2);
}
.passo-nome .opcional { color: var(--cor-texto-3); font-weight: var(--peso-medio); }

.forma {
  --entrada-repouso: color-mix(in srgb, var(--cor-texto) 11%, transparent);
  --entrada-viva:    color-mix(in srgb, var(--cor-texto) 16%, transparent);
}

.forma .contexto-claro {
  --entrada-repouso: color-mix(in srgb, var(--cor-texto) 14%, transparent);
  --entrada-viva:    color-mix(in srgb, var(--cor-texto) 20%, transparent);
}

.forma .campo {
  margin-bottom: 0;

  padding: var(--esp-micro) 0 0;

  border-bottom: 1px solid var(--cor-borda-forte);
  cursor: text;
  transition:
    border-color var(--dur-utilidade) var(--ease-confiante),
    box-shadow var(--dur-utilidade) var(--ease-confiante);
}
.forma .campo:hover { border-bottom-color: var(--cor-borda-forte); }

.forma .campo:focus-within {
  border-bottom-color: var(--cor-acento);
  box-shadow: 0 1px 0 var(--cor-acento);
}
.forma .campo .campo-rotulo { margin-bottom: 0; color: var(--cor-texto-3); }
.forma .campo:focus-within .campo-rotulo { color: var(--cor-texto); }
.forma .campo .campo-entrada {
  background: var(--entrada-repouso);
  border: 0;
  border-radius: 0;

  padding: var(--esp-micro);
  margin-left: calc(var(--esp-micro) * -1);
  width: calc(100% + var(--esp-micro));
  max-width: none;
  font-size: var(--tipo-destaque);
  color: var(--cor-texto);
  min-height: 2.75rem;
  transition: background-color var(--dur-utilidade) var(--ease-confiante);
}
.forma .campo:hover .campo-entrada,
.forma .campo .campo-entrada:focus { background: var(--entrada-viva); }

.forma .campo .campo-entrada:focus-visible { outline: none; }

.forma .campo .campo-entrada::placeholder { color: var(--cor-texto-2); }

@media (forced-colors: active) {
  .forma .campo .campo-entrada { border: 1px solid; }
  .forma .campo .campo-entrada:focus-visible { outline: 3px solid; outline-offset: 2px; }
}
.forma .campo .campo-mensagem {
  grid-column: 2;
  margin-top: 0;
  padding-bottom: var(--esp-micro);
  color: var(--cor-texto-3);
}

.forma .campo--erro {
  border-bottom-color: var(--cor-erro);
  box-shadow: 0 1px 0 var(--cor-erro);
}
.forma .campo--erro .campo-mensagem { color: var(--cor-erro); }
@media (max-width: 899px) { .forma .campo .campo-mensagem { grid-column: auto; } }

.avanco {
  margin: var(--esp-bloco) 0 0;
  display: flex;
  gap: var(--esp-item);
  align-items: center;
  flex-wrap: wrap;
}
@media (min-width: 900px) { .avanco { grid-column: 2; } }

.envio {
  display: grid;
  justify-items: start;
  gap: var(--esp-item);
  margin-top: var(--esp-bloco);
}
@media (min-width: 900px) { .envio { grid-column: 2; } }

.falta { display: none; margin: 0; font-size: var(--tipo-detalhe); color: var(--cor-texto-2); }
.falta a { color: var(--cor-texto); }
.forma:has(#etapa-1 :invalid) .falta-1,
.forma:has(#etapa-2 :invalid) .falta-2 { display: block; }
.forma:has(#etapa-1 :invalid) .botao-envio,
.forma:has(#etapa-2 :invalid) .botao-envio { display: none; }

.sucesso {
  margin: 0;
  font-size: var(--tipo-destaque);
  line-height: var(--altura-corpo);
  color: var(--cor-texto);
  max-width: var(--container-texto);
}
.forma:not(.forma--enviada) .sucesso,
.forma:not(.forma--falhou) .erro-envio { display: none; }
.forma--enviada .botao-envio,
.forma--enviada .falta { display: none; }
.erro-envio { margin: 0; font-size: var(--tipo-detalhe); color: var(--cor-erro); }

@media (max-width: 700px) {
  .secao--formulario .campo-secao {

    background-size: min(160vw, 32rem);
    background-position: right -20% top -6%;
  }
}

.secao--rodape {
  padding-bottom: 0;
  padding-top: var(--esp-secao);
}

.secao--rodape .campo-secao {
  background-position: left top;
  background-size: 130% auto;

  mask-image:
    linear-gradient(to bottom, transparent 0%, currentColor 20%, currentColor 62%, transparent 100%),
    linear-gradient(to right, currentColor 0%, currentColor 34%, transparent 76%);
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, currentColor 20%, currentColor 62%, transparent 100%),
    linear-gradient(to right, currentColor 0%, currentColor 34%, transparent 76%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}

.rodape-topo {
  display: grid;
  justify-items: end;
  text-align: right;
  gap: var(--esp-grupo);
  padding-bottom: clamp(4rem, 3rem + 5vw, 7rem);
}

.marca-gigante {
  display: block;
  width: min(20rem, 32%);
  height: auto;

  opacity: 0.6;
}

.rodape-colunas {
  display: grid;
  gap: var(--esp-bloco) clamp(2.5rem, 6vw, 6rem);
  text-align: left;
  justify-items: start;
}
@media (min-width: 560px) {
  .rodape-colunas {
    grid-auto-flow: column;
    align-items: start;

    grid-auto-columns: 1fr;
  }
}

.rodape-coluna {
  display: grid;
  gap: var(--esp-micro);
  justify-items: start;
  min-width: 11rem;
}

@media (max-width: 700px) {
  .rodape-topo {
    justify-items: start;
    text-align: left;
    gap: var(--esp-bloco);
  }
  .marca-gigante { width: min(20rem, 58%); }
  .rodape-colunas { gap: var(--esp-bloco); }
  .rodape-coluna { min-width: 0; justify-self: stretch; }

  .secao--rodape .campo-secao {
    mask-image: linear-gradient(to bottom, currentColor 0%, currentColor 11%, transparent 19%);
    -webkit-mask-image: linear-gradient(to bottom, currentColor 0%, currentColor 11%, transparent 19%);

    background-size: 210% auto;
  }

  .rodape-colunas > :not(nav) { order: -1; }

  .rodape-coluna .contato-acao {
    font-size: var(--tipo-destaque);
    letter-spacing: var(--tracking-titulo);
    text-transform: none;
    padding-bottom: var(--esp-item);
  }
  .rodape-coluna .contato-acao::after { content: " \2192"; }
}

.rodape-coluna-titulo {
  margin: 0 0 var(--esp-item);
  padding-bottom: var(--esp-item);

  justify-self: stretch;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--tipo-rotulo);
  font-weight: var(--peso-negrito);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--cor-texto-2);
}

.rodape-coluna a,
.contato-acao {
  color: var(--cor-texto-3);
  text-decoration: none;
  font-size: var(--tipo-rotulo);
  font-weight: var(--peso-negrito);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  transition: color var(--dur-utilidade) var(--ease-confiante);
}
.rodape-coluna a:hover { color: var(--cor-texto); }

.rodape-coluna .contato-acao { color: var(--cor-texto); }
.rodape-coluna .contato-acao:hover { color: var(--cor-acento-texto); }

.contato {
  display: grid;
  gap: 0.125rem;
  margin: var(--esp-item) 0 0;
}
.contato-rotulo {
  font-size: var(--tipo-rotulo);
  font-weight: var(--peso-negrito);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--cor-texto-3);
}

.lacuna {
  justify-self: start;
  font-size: var(--tipo-detalhe);
  color: var(--cor-texto-3);
  border-bottom: 1px dashed var(--cor-borda-forte);
}

.rodape-legal {
  border-top: 1px solid var(--hairline);
  padding: var(--esp-grupo) 0 var(--esp-bloco);
  position: relative;
  z-index: 1;
}
.rodape-legal-miolo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-item) var(--esp-grupo);
}
.rodape-legal .fecho { font-size: var(--tipo-destaque); }

.conector-a .malha {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to right,
    var(--hairline) 0 1px,
    transparent 1px calc(100% / 6)
  );
  opacity: 0.55;
  mask-image: linear-gradient(to right, transparent 0, currentColor 6%, currentColor 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, currentColor 6%, currentColor 94%, transparent 100%);
}
.conector-a .palco,
.conector-a .secao { z-index: 1; }

.conector-a .secao[data-numero]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background:
    linear-gradient(to bottom, var(--hairline) 0 1px, transparent 1px),
    repeating-linear-gradient(to right,
      var(--cor-borda-forte) 0 5px, transparent 5px calc(100% / 6));
  background-size: 100% 1px, 100% 5px;
  background-position: 0 0, 0 0;
  background-repeat: no-repeat;
}

.conector-b .eixo {
  display: block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: var(--margem-pagina);
  width: 1px;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom, var(--cor-borda-forte) 0 2px, transparent 2px 8px);
  opacity: 0.5;
}
.conector-b .secao[data-numero]::before {
  content: attr(data-numero);
  position: absolute;
  left: var(--margem-pagina);
  top: var(--esp-secao);
  transform: translateX(-50%);
  padding: var(--esp-micro) 0;
  background: var(--cor-fundo);
  font-size: var(--tipo-rotulo);
  font-weight: var(--peso-negrito);
  letter-spacing: var(--tracking-rotulo);
  font-variant-numeric: tabular-nums;
  color: var(--cor-texto-3);
  z-index: 2;
}

.conector-b .secao--numeros::before { top: var(--esp-bloco); }

.conector-c .secao[data-numero] {
  border-top: 1px solid var(--hairline);
}
.conector-c .secao[data-numero]::before {
  content: attr(data-numero) "  ·  " attr(data-capitulo);
  position: absolute;
  top: 0;
  right: var(--margem-pagina);
  transform: translateY(-50%);
  padding: var(--esp-micro) var(--esp-item);
  background: var(--cor-fundo);
  font-size: var(--tipo-rotulo);
  font-weight: var(--peso-negrito);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--cor-texto-2);
  z-index: 2;
  white-space: nowrap;
}

.conector-c .divisor { top: 1px; }

.malha, .eixo { display: none; }

.contexto-claro .grafismo-dither { display: none; }
.contexto-cinza .grafismo-dither { opacity: 0.55; }

.contexto-claro .celula { border: 1px solid var(--cor-borda); }

.contexto-claro > .divisor,
.contexto-cinza > .divisor { display: none; }

.contexto-claro.secao,
.contexto-cinza.secao { padding-top: calc(var(--esp-secao) * 1.15); padding-bottom: calc(var(--esp-secao) * 1.15); }

.entra {
  transition:
    opacity var(--dur-conteudo) var(--ease-confiante),
    transform var(--dur-conteudo) var(--ease-confiante);
}
.js-motion .entra:not(.entrou) {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
}
.entra--tarde { transition-delay: 90ms; }

.js-motion .quadro .cifra { display: inline-block; }
.entra--cena {
  transition:
    opacity var(--dur-cena) var(--ease-cena),
    transform var(--dur-cena) var(--ease-cena);
}

.campo-secao { transition: opacity var(--dur-cena) var(--ease-cena); }
.js-motion .campo-secao:not(.entrou) { opacity: 0; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .secao--formulario > .campo-secao,
    .secao--rodape > .campo-secao,
    .palco > .grafismo-dither--hero {

      animation-name: deriva;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @media (max-width: 700px) {
      .secao--formulario > .campo-secao,
      .secao--rodape > .campo-secao,
      .palco > .grafismo-dither--hero { animation-name: deriva-curta; }
    }
  }
}

@keyframes deriva {
  from { transform: translate3d(0, 24px, 0); }
  to   { transform: translate3d(0, -24px, 0); }
}
@keyframes deriva-curta {
  from { transform: translate3d(0, 12px, 0); }
  to   { transform: translate3d(0, -12px, 0); }
}

.tela-grafismo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;

  image-rendering: pixelated;
}

.grafismo-dither.grafismo-vivo { background-image: none; }

@media (prefers-reduced-motion: reduce) {
  .js-motion .entra:not(.entrou),
  .js-motion .campo-secao:not(.entrou) { opacity: 1; transform: none; }
}

.fio { display: none; }

@supports (animation-timeline: view()) {

  @media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
    .fio {
      display: block;
      position: absolute;

      left: max(calc(var(--margem-pagina) / 2 - 3px), calc(50% - var(--container) / 2 - 3.25rem));
      top: 0;
      bottom: 0;
      width: 5px;
      z-index: 0;
      pointer-events: none;
    }

    .fio-haste {
      position: absolute;
      inset: 0;

      overflow: clip;
      background-image: repeating-linear-gradient(
        to bottom,
        currentColor 0 5px,
        transparent 5px 15px);
      color: var(--cor-texto-3);
      opacity: 0.30;
    }

    .fio-haste::after {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--cor-fundo);
      transform-origin: 50% 100%;
      animation-name: fio-revela;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view(block auto 50%);
      animation-range: cover 8% cover 86%;
    }

    .fio-carro {
      position: absolute;
      inset: 0;
      animation-name: fio-desce;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view(block auto 50%);
      animation-range: cover 8% cover 86%;
    }
    .fio-carro::before {
      content: "";
      position: absolute;
      left: -2px;
      top: -9px;
      width: 9px;
      height: 9px;
      background: var(--cor-acento-texto);

      animation: fio-pulso 2.8s var(--ease-suave) infinite;
    }

    .fio-carro::after {
      content: "";
      position: absolute;
      left: 0;
      top: -54px;
      width: 5px;
      height: 45px;
      background-image: repeating-linear-gradient(
        to bottom, var(--cor-acento-texto) 0 5px, transparent 5px 15px);
      opacity: 0.5;
      mask-image: linear-gradient(to bottom, transparent, currentColor);
      -webkit-mask-image: linear-gradient(to bottom, transparent, currentColor);
    }

    .palco .fio-haste::after,
    .palco .fio-carro {
      animation-timeline: view();
      animation-range: exit 0% exit 94%;
    }

    .fio-num {
      position: absolute;
      top: calc(var(--esp-secao) * 0.72);
      left: 0;
      font-size: var(--tipo-rotulo);
      font-weight: var(--peso-negrito);
      letter-spacing: var(--tracking-rotulo);
      font-variant-numeric: tabular-nums;
      color: var(--cor-texto-3);
      background: var(--cor-fundo);
      padding: var(--esp-micro) 0;
      transform: translateX(-50%) translateY(8px);
      animation-name: fio-marca;
      animation-duration: auto;
      animation-timing-function: var(--ease-confiante);
      animation-fill-mode: both;
      animation-timeline: view(block auto 50%);
      animation-range: entry 30% entry 90%;
    }

  }
}

@keyframes fio-revela {
  from { transform: scaleY(1); }
  to   { transform: scaleY(0); }
}
@keyframes fio-desce {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, 100%, 0); }
}
@keyframes fio-marca {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes fio-pulso {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.62); opacity: 0.72; }
}

@supports (animation-timeline: view()) {

  @media (prefers-reduced-motion: no-preference) {

    .foco-palavra {
      display: inline-block;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
    }

    .foco--acende .foco-palavra { animation-name: palavra-acende; }

    .foco--sai .foco-palavra { animation-name: palavra-sai; }

    @media (max-width: 700px) {
      .foco--sai .foco-palavra { animation-name: palavra-sai-limpa; }
    }
  }
}

@keyframes palavra-acende {
  from { opacity: 0.16; }
  to   { opacity: 1; }
}
@keyframes palavra-sai {
  from { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0); }
  to   { opacity: 0.06; filter: blur(7px); transform: translate3d(0, -14px, 0); }
}
@keyframes palavra-sai-limpa {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to   { opacity: 0.06; transform: translate3d(0, -14px, 0); }
}

/* v2 posicionamento (13/10): três pontos lado a lado e o fecho ocupando a linha inteira */
@media (min-width: 1040px) { .grade--elos .celula--ancora { grid-column: 1 / -1; min-height: 0; } }
.convite-nota a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
/* v3 identidade verbal (13/10): a headline é pergunta longa, a linha encolhe pra caber */
.manchete--pergunta .linha { font-size: calc(100cqw / 13); }
@media (max-width: 700px) { .manchete--pergunta .linha { font-size: calc(100cqw / 10.2); } }
/* rodada 2 (13/10): nos três pontos, o texto embaixo do nome fica fino; só o nome pesa */
.grade--elos .texto-celula { font-weight: var(--peso-regular, 400); }
.grade--elos .texto-celula .nome { font-weight: var(--peso-negrito); margin-bottom: 0.35em; }

/* 27/10: vírgula e ponto dos títulos grandes colados na palavra (a 800 eles ficam soltos) */
.pontuacao { margin-left: -0.1em; }