/* ==========================================================================
   BLOCOS — um trecho por módulo de blocks/
   ========================================================================== */

/* --------------------------------------------------------------------------
   00 — Cabeçalho
   Fixo, transparente sobre o hero, preto a partir do scroll.
   O painel guarda navegação + CTA: no desktop é uma linha; no mobile é uma
   gaveta que abre por altura. Antes o CTA era posicionado por conta própria
   e caía por cima dos links — agora os dois moram na mesma caixa e não têm
   como se sobrepor.
   -------------------------------------------------------------------------- */

.cabecalho {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-altura);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-media) var(--ease-padrao),
              border-color var(--dur-media) var(--ease-padrao);
}
.cabecalho.esta-fixo {
  background: var(--preto);
  border-bottom-color: var(--sobre-preto-16);
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-32);
  width: 100%;
}

.cabecalho__logo img {
  width: 148px;
  height: auto;
  transition: opacity var(--dur-rapida) var(--ease-padrao);
}
.cabecalho__logo:hover img { opacity: 0.7; }

.cabecalho__painel { display: flex; }
.cabecalho__painel-conteudo {
  display: flex;
  align-items: center;
  gap: var(--e-32);
}

.cabecalho__nav {
  display: flex;
  gap: var(--e-32);
}
.cabecalho__nav a {
  position: relative;
  font-size: var(--rotulo);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sobre-preto-70);
  padding-block: 8px;
  transition: color var(--dur-rapida) var(--ease-padrao);
}

/* Sublinhado que cresce do começo da palavra. O mesmo traço marca a seção
   em que o leitor está — o JS escreve aria-current durante o scroll. */
.cabecalho__nav a::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--amarelo);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-media) var(--ease-firme);
}
.cabecalho__nav a:hover,
.cabecalho__nav a[aria-current="true"] { color: var(--amarelo); }
.cabecalho__nav a:hover::after,
.cabecalho__nav a:focus-visible::after,
.cabecalho__nav a[aria-current="true"]::after { transform: scaleX(1); }

.cabecalho__cta {
  min-height: 44px;
  padding: 12px 22px;
  font-size: var(--meta);
  font-weight: 700;
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
}

.cabecalho__menu {
  display: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--raio-controle);
  color: var(--branco);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: border-color var(--dur-rapida) var(--ease-padrao),
              color var(--dur-rapida) var(--ease-padrao);
}
.cabecalho__menu:hover { border-color: var(--amarelo); color: var(--amarelo); }

/* Os três traços viram X: cada um tem seu próprio caminho, nada gira junto */
.cabecalho__menu svg path {
  transition: transform var(--dur-media) var(--ease-firme),
              opacity var(--dur-rapida) var(--ease-padrao);
  transform-origin: center;
}
.cabecalho.menu-aberto .cabecalho__menu svg path:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.cabecalho.menu-aberto .cabecalho__menu svg path:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.cabecalho.menu-aberto .cabecalho__menu svg path:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 1023px) {
  .cabecalho__menu { display: inline-flex; }

  .cabecalho.menu-aberto {
    background: var(--preto);
    border-bottom-color: var(--sobre-preto-16);
  }

  /* Gaveta: 0fr → 1fr anima a altura real do conteúdo, sem max-height
     chutado. O padding vive no filho e é cortado junto quando fecha. */
  .cabecalho__painel {
    position: absolute;
    top: var(--header-altura);
    left: 0;
    right: 0;
    display: grid;
    grid-template-rows: 0fr;
    background: var(--preto);
    visibility: hidden;
    opacity: 0;
    transition: grid-template-rows var(--dur-media) var(--ease-firme),
                opacity var(--dur-rapida) var(--ease-padrao),
                visibility 0s linear var(--dur-media);
  }
  .cabecalho.menu-aberto .cabecalho__painel {
    grid-template-rows: 1fr;
    visibility: visible;
    opacity: 1;
    border-bottom: 1px solid var(--sobre-preto-16);
    transition: grid-template-rows var(--dur-media) var(--ease-firme),
                opacity var(--dur-rapida) var(--ease-padrao),
                visibility 0s linear 0s;
  }

  .cabecalho__painel-conteudo {
    overflow: hidden;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-inline: var(--margem);
  }

  .cabecalho__nav {
    flex-direction: column;
    gap: 0;
    padding-top: var(--e-8);
  }
  .cabecalho__nav a {
    padding-block: var(--e-16);
    border-bottom: 1px solid var(--sobre-preto-16);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--dur-media) var(--ease-saida),
                transform var(--dur-media) var(--ease-saida),
                color var(--dur-rapida) var(--ease-padrao);
  }
  .cabecalho.menu-aberto .cabecalho__nav a {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--i, 0) * 50ms + 60ms);
  }
  .cabecalho__nav a::after { inset: auto auto 0 0; width: 40px; }

  .cabecalho__cta {
    margin-block: var(--e-24);
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Bloco 1 — Hero · painel de mídia recuado · pilha centrada
   O cabeçalho fica sobre o preto da página, não sobre a imagem: o painel
   começa abaixo dele e recua dos quatro lados. A pilha — headline, apoio,
   dois botões, meta — vive centrada dentro do painel.
   -------------------------------------------------------------------------- */

.hero {
  padding: calc(var(--header-altura) + var(--hero-recuo)) var(--hero-recuo) var(--hero-recuo);
}

.hero__palco {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--raio-midia);
  min-height: calc(100svh - var(--header-altura) - var(--hero-recuo) * 2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e-96) var(--margem) var(--e-120);
}

/* A caixa da mídia é maior que o painel: a paralaxe desloca até 40px e a
   sobra evita que a borda do vídeo apareça no topo ou na base.
   O poster é o fundo da caixa — segura o bloco enquanto o vídeo carrega e
   continua lá se o navegador recusar o arquivo. O preto fica embaixo dos
   dois, então nunca há um quadro vazio. */
.hero__midia {
  position: absolute;
  inset: -6% 0;
  z-index: -2;
  background-color: var(--preto);
  background-image: url('../img/hero-poster.jpg');
  background-size: cover;
  background-position: center;
}
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Duas camadas sobre o vídeo. A chapada garante o contraste mínimo em
   qualquer quadro — a filmagem tem céu estourado no topo e arquibancada
   escura embaixo. O gradiente adensa as pontas, onde encostam o cabeçalho
   e o indicador de rolagem. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(15, 15, 15, 0.66) 0%, rgba(15, 15, 15, 0.34) 42%, rgba(15, 15, 15, 0.78) 100%),
    rgba(15, 15, 15, 0.34);
}

/* Medida antes de largura, também no centro. Cada linha da pilha tem a sua:
   a headline fecha em 3 linhas dentro de 20ch da própria display, o apoio
   pede uma medida mais curta que a dos 52ch corridos do design system. */
.hero__conteudo {
  position: relative;
  width: 100%;
  max-width: 1200px;
  text-align: center;
}

.hero__titulo {
  max-width: 24ch;
  margin: 0 auto var(--e-32);
}

.hero__apoio {
  max-width: 46ch;
  margin: 0 auto var(--e-32);
  color: var(--sobre-preto-72);
}

.hero__acoes {
  justify-content: center;
  margin-bottom: var(--e-24);
}

/* A linha de meta faz o papel que a caixa de números fazia: o dado aparece
   uma vez, pequeno, sem virar módulo. */
.hero__meta {
  font-size: var(--meta);
  font-weight: 500;
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--sobre-preto-45);
}

/* Indicador de rolagem — traço de 1px que desce e reinicia, centrado na base
   do painel. Some assim que o leitor rola. */
.hero__rolar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--e-24);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: var(--meta);
  font-weight: 500;
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--sobre-preto-45);
  transition: opacity var(--dur-media) var(--ease-padrao);
}
.hero__rolar::after {
  content: '';
  width: 1px;
  height: 32px;
  background: var(--amarelo);
  transform-origin: 50% 0;
  animation: rolar 2.4s var(--ease-padrao) infinite;
}
@keyframes rolar {
  0%        { transform: scaleY(0); opacity: 0; }
  30%       { transform: scaleY(1); opacity: 1; }
  70%       { transform: scaleY(1); opacity: 1; }
  100%      { transform: scaleY(1) translateY(32px); opacity: 0; }
}
body.rolou .hero__rolar { opacity: 0; }

@media (max-width: 1023px) {
  .hero__rolar { display: none; }
  .hero__palco {
    min-height: 0;
    padding-block: var(--e-96);
  }
  .hero__titulo { max-width: 16ch; }
}

@media (max-width: 767px) {
  .hero__palco { padding-block: var(--e-64); }
  .hero__titulo { max-width: none; margin-bottom: var(--e-24); }
  .hero__apoio { max-width: 34ch; }
  .hero__acoes { flex-direction: column; }
  .hero__acoes .btn { width: 100%; }
}


/* --------------------------------------------------------------------------
   Bloco 2a — Cobertura diária · fundo branco · 8 centralizado (col. 3–10)
   Um dos dois blocos em eixo, com o de conversão. Este abre o miolo em oito
   colunas; o de conversão fecha a página nas doze.
   -------------------------------------------------------------------------- */

.cobertura__interno { text-align: center; }

/* Headline em dois degraus. O primeiro sai em 58% do corpo do segundo — a
   razão é fixa em em, então ela sobrevive inteira a cada passo do clamp. */
.cobertura__degrau {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.2vw, 32px);
  font-size: 0.58em;
  line-height: 1.1;
}

/* O texto encolhe e quebra dentro da própria caixa quando a largura aperta —
   os traços continuam ladeando a linha, nunca descem sozinhos. */
.cobertura__degrau-texto { flex: 0 1 auto; min-width: 0; }

/* O traço amarelo 40×2 do divisor, agora ladeando a primeira linha: é o
   ornamento que o design system já permite, no único lugar da página em que
   o acento não podia ficar no texto. */
.cobertura__traco {
  flex: none;
  width: clamp(24px, 3vw, 40px);
  height: 2px;
  background: var(--amarelo);
}

.cobertura__forte { display: block; }

.cobertura__apoio {
  max-width: 62ch;
  margin-top: var(--e-24);
  margin-inline: auto;
}
.cobertura__plataformas { margin-top: var(--e-48); }

@media (max-width: 767px) {
  .cobertura__degrau { gap: 12px; }
}


/* --------------------------------------------------------------------------
   Bloco 2b — Quem apresenta · fundo preto · eixo central, 12 colunas
   -------------------------------------------------------------------------- */

/* O bloco saiu do arranjo 4 + 7 e foi para o eixo. Solta das 4 colunas, a
   headline volta ao D2 cheio da escala e fecha em duas linhas travadas — a
   quebra é de composição, não do acaso da largura. */
.apresentam__topo { text-align: center; }

.apresentam__titulo { margin-bottom: var(--e-24); }

/* Cada degrau da headline em uma linha. No mobile a linha longa reflui em
   duas — o span continua bloco e a leitura não quebra. */
.apresentam__linha { display: block; }

.apresentam__apoio {
  max-width: 58ch;
  margin-inline: auto;
}

/* Os cards ocupam as 12 colunas: 405 px cada no desktop de referência, contra
   os 223 px do arranjo anterior. É o argumento do bloco — a equipe — no
   tamanho que o argumento pede. */
.apresentam__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  align-items: stretch;
  margin-top: var(--e-64);
}

/* Card maior pede respiro e tipo maiores: o miolo cresce junto com a caixa
   em vez de flutuar num canto dela. */
.apresentam__cards .card-apresentador__texto { padding: var(--e-32); }

.apresentam__cards .card-apresentador__nome {
  font-size: var(--apoio);
  margin-bottom: var(--e-16);
}

.apresentam__cards .texto-card {
  font-size: var(--corpo);
  line-height: var(--lh-corpo);
  max-width: 34ch;
}

@media (max-width: 1023px) {
  .apresentam__cards { margin-top: var(--e-48); }
}
@media (max-width: 767px) {
  .apresentam__cards { grid-template-columns: 1fr; }
  .apresentam__cards .card-apresentador__texto { padding: var(--e-24); }
}


/* --------------------------------------------------------------------------
   Bloco 3 — Onde sua marca entra · fundo branco · 6 + 5, depois 3×4
   -------------------------------------------------------------------------- */

.formatos__grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
  margin-top: var(--e-64);
}

.formatos__fecho {
  margin-top: var(--e-48);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-24);
}
.formatos__cota {
  font-size: var(--corpo);
  color: var(--texto-corpo);
  max-width: 40ch;
}

@media (max-width: 1023px) {
  .formatos__grade { grid-template-columns: repeat(2, 1fr); }
  .formatos__corpo { margin-top: var(--e-32); }
}
@media (max-width: 639px) {
  .formatos__grade { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   Bloco 4 — Prova · esteira de marcas
   Stripe preto sangrado entre o bloco 3 e o bloco final. Rótulo no eixo,
   logotipos em cinza rolando sozinhos da direita para a esquerda.
   -------------------------------------------------------------------------- */

.prova { padding-block: var(--e-64); }

.prova__rotulo {
  text-align: center;
  margin-bottom: var(--e-48);
  padding-inline: var(--margem);
}

/* A janela da esteira. Sangra de ponta a ponta — o stripe é faixa, não
   coluna — e as duas pontas desmancham no preto do bloco pela máscara, para
   nenhum logotipo ser cortado ao meio na borda da tela. */
.prova__esteira {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0, #000 var(--margem), #000 calc(100% - var(--margem)), transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0, #000 var(--margem), #000 calc(100% - var(--margem)), transparent 100%);
}

/* O trilho carrega as duas filas idênticas e é ele que anda. O passo é
   -50%, a largura exata de uma fila: quando a volta acontece, a cópia já
   está no lugar da original e a emenda não aparece. `width: max-content`
   impede que o flex aperte as filas na largura da tela. */
.prova__trilho {
  display: flex;
  width: max-content;
  animation: esteira-marcas 44s linear infinite;
}

@keyframes esteira-marcas {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Passar o mouse segura a fila — quem quiser ler um logotipo consegue. */
.prova__esteira:hover .prova__trilho,
.prova__esteira:focus-within .prova__trilho { animation-play-state: paused; }

.prova__fila {
  display: flex;
  align-items: center;
  gap: clamp(48px, 6vw, 96px);
  list-style: none;
  margin: 0;
  /* Meia medida do gap em cada ponta: entre a última da fila e a primeira
     da cópia o espaço fica igual ao de dentro da fila. */
  padding: 0 clamp(24px, 3vw, 48px);

  /* Piso de uma tela cheia por fila. Sem ele, uma fila curta — poucos logos,
     ou monitor largo — mede menos que a janela, e no fim do laço, quando o
     trilho já andou uma fila inteira, sobra um vão preto do lado direito
     antes da cópia alcançar a borda. Com o piso, cada fila sozinha já cobre
     a janela e a emenda nunca aparece.

     O espaço extra é distribuído por space-around: cada logo ganha a mesma
     folga dos dois lados e as pontas ficam com metade, que somada à metade
     da ponta da cópia devolve na emenda o mesmo intervalo de dentro da fila.
     Quando a fila é naturalmente mais larga que a tela não há folga a
     distribuir, e quem manda de volta é o gap. */
  min-width: 100vw;
  justify-content: space-around;
}

.prova__fila img {
  display: block;
  width: auto;
  height: 34px;
  opacity: 0.7;
  filter: grayscale(1);
  transition: opacity var(--dur-rapida) var(--ease-padrao),
              filter var(--dur-rapida) var(--ease-padrao);
}
.prova__fila img:hover { opacity: 1; filter: grayscale(0); }

@media (max-width: 767px) {
  .prova { padding-block: var(--e-48); }
  .prova__rotulo { margin-bottom: var(--e-32); }
  .prova__fila img { height: 26px; }
}

/* Quem pediu menos movimento recebe a faixa parada: o trilho perde a
   animação, a cópia sai de cena e a fila única quebra em linhas centradas.
   Sem isso a régua geral de motion.css cortaria a animação para 1ms e o
   trilho ficaria travado num quadro qualquer do laço. */
@media (prefers-reduced-motion: reduce) {
  .prova__esteira {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .prova__trilho {
    animation: none;
    width: auto;
    justify-content: center;
  }
  .prova__fila[aria-hidden="true"] { display: none; }
  .prova__fila {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--e-32);
    padding-inline: var(--margem);
    min-width: 0;
  }
}


/* --------------------------------------------------------------------------
   Bloco final — Conversão · fundo amarelo · 8 centralizado · 160 topo/base
   Segundo bloco em eixo da página, junto com o 2a: um abre o miolo, o outro
   fecha a página. Entre os dois, tudo é assimétrico.
   -------------------------------------------------------------------------- */

.conversao__interno { text-align: center; }

/* Camada de fundo — carrega o gradient e é o alvo da paralaxe (transform em
   motion.css, valor escrito pelo main.js). Maior que o bloco por dentro e
   por fora: o inset negativo sobra 8% de rampa acima e abaixo, para a
   paralaxe ter para onde deslocar sem a borda aparecer. O .bloco--amarelo
   recorta a sobra com overflow: hidden. */
.conversao__fundo {
  position: absolute;
  inset: -8% 0;
  z-index: 0;
  background: var(--amarelo-gradient);
}

/* Shader de fundo. O canvas é injetado pelo shader-conversao.js dentro de
   .conversao__fundo e só chega aqui se o WebGL inteiro deu certo — por isso
   a regra não mexe no background da camada: o gradient do CSS fica embaixo
   como fallback e como primeiro quadro. O conteúdo sobe para o z-index 1; o
   canvas é decoração e não pode receber clique nem cursor. */
.conversao__shader {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.bloco--amarelo > .container { position: relative; z-index: 1; }

/* A linha de apoio sobe para cima da headline e encolhe: aqui ela é a
   entrada da última fala, não o rodapé dela. A medida curta é o que a
   quebra em duas linhas sob o eixo. */
.conversao__chamada {
  max-width: 46ch;
  margin-inline: auto;
  margin-bottom: var(--e-32);
}

.conversao__titulo { margin-bottom: var(--e-64); }

/* O formulário fica no eixo, num card estreito: centrado o bastante para ser
   o fim da leitura, largo o bastante para os campos não apertarem. Por dentro
   ele volta a ler da esquerda — formulário se lê alinhado, não centrado. */
.conversao__formulario {
  max-width: 520px;
  margin-inline: auto;
  text-align: left;
}

@media (max-width: 767px) {
  .conversao__titulo { margin-bottom: var(--e-48); }
}


/* --------------------------------------------------------------------------
   Rodapé — 12 colunas · 96 topo, 48 base · logotipo sangrando às margens
   -------------------------------------------------------------------------- */

/* O rodapé encosta direto no bloco amarelo, e o vizinho de cima é uma camada
   composta — .conversao__fundo tem will-change: transform e carrega o canvas
   do shader esticado por cima. Camada composta recortada por overflow de um
   ancestral é onde o Chrome erra arredondamento e deixa a costura aparecer na
   emenda. Promover o rodapé à própria camada resolve a ordem: ele passa a ser
   pintado acima, e não na mesma superfície que a borda do amarelo.

   will-change e não translateZ(0): o Chrome achata a matriz do translateZ(0)
   para 2D quando não há contexto 3D em volta (dá para ver no computed style,
   sai matrix() e não matrix3d()), e aí a promoção a camada deixa de ser
   garantida. will-change: transform pede a mesma coisa sem ambiguidade.
   Como transform, ele também faz do rodapé bloco contentor de fixed/absolute
   — hoje não há nenhum dentro dele, mas isso vale ao mexer aqui depois. */
.rodape {
  position: relative;
  isolation: isolate;
  will-change: transform;
  background: var(--preto);
  color: var(--sobre-preto-100);
  --bloco-bg: var(--preto);
  --texto-corpo: var(--sobre-preto-72);
  --texto-meta: var(--sobre-preto-45);
  --linha: var(--sobre-preto-16);
  padding-top: var(--e-96);
  padding-bottom: var(--e-48);
  border-top: 1px solid var(--sobre-preto-16);
}

.rodape__topo { row-gap: var(--e-48); }

.rodape__coluna { grid-column: span 3; }
.rodape__coluna--contato { grid-column: 10 / span 3; }

.rodape__rotulo { margin-bottom: var(--e-16); }

/* O link do rodapé anda 6px para a direita no hover — display inline não
   aceita transform, daí o inline-block. */
.rodape__lista a,
.rodape__contato a {
  display: inline-block;
  font-size: var(--card);
  line-height: 2;
  color: var(--sobre-preto-70);
  transition: color var(--dur-rapida) var(--ease-padrao),
              transform var(--dur-rapida) var(--ease-saida);
}
.rodape__lista a:hover,
.rodape__contato a:hover {
  color: var(--amarelo);
  transform: translateX(6px);
}

.rodape__cta { margin-top: var(--e-16); }

/* Assinatura — só o nome, sem o escudo. O logotipo completo já aparece no
   cabeçalho; repetir o símbolo aqui, em tamanho de sangria, deixava o
   escudo maior que qualquer outro elemento da página e roubava o fecho.
   O nome sozinho sangra de margem a margem e fecha o rodapé como
   assinatura, que é o papel dele. */
.rodape__assinatura {
  margin-top: var(--e-96);
}
.rodape__assinatura img {
  width: 100%;
  height: auto;
  opacity: 0.9;
}

.rodape__base {
  margin-top: var(--e-48);
  padding-top: var(--e-24);
  border-top: 1px solid var(--sobre-preto-16);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-16);
}

@media (max-width: 1023px) {
  .rodape__coluna,
  .rodape__coluna--contato { grid-column: span 6; }
}
@media (max-width: 639px) {
  .rodape__coluna,
  .rodape__coluna--contato { grid-column: span 12; }
}


/* --------------------------------------------------------------------------
   Entrada dos blocos e estados de interação vivem em motion.css.
   -------------------------------------------------------------------------- */