/* ==========================================================================
   LANDING.CSS — a animação do vídeo, comandada pela rolagem
   --------------------------------------------------------------------------
   O canvas desenha o quadro do vídeo que corresponde à posição da rolagem.
   Tudo o mais (janelas de portfólio, colunas de texto) é HTML posicionado
   por cima, em coordenadas do próprio quadro — por isso acompanha o
   enquadramento em qualquer tamanho de tela.
   ========================================================================== */

:root {
  --papel:          #F7F3EC;
  --painel:         #F0F0F0;   /* amostrado do próprio vídeo */
  --tinta:          #1C1611;
  --dourado:        #C9963F;
  --dourado-escuro: #8A6520;
  --linha:          rgba(28, 22, 17, .14);
  --display: "Cormorant Garamond", Georgia, serif;
  --corpo:   "Jost", "Helvetica Neue", Arial, sans-serif;
  --ease:    cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #000;
  color: var(--tinta);
  font-family: var(--corpo);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, video, canvas { display: block; max-width: 100%; }
h1, h2, p, ul { margin: 0; }
a { color: inherit; text-decoration: none; }

/* --- Barra de carregamento dos quadros --- */
.carga {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 50;
  background: rgba(255,255,255,.12);
  transition: opacity .6s;
}
.carga i { display: block; height: 100%; width: 0; background: var(--dourado); }
.carga.is-pronto { opacity: 0; }

/* ==========================================================================
   A CENA
   ========================================================================== */
.cena { height: 700svh; position: relative; }

/* O filme em pé tem 89 quadros contra 150 do deitado. Com a mesma altura
   de cena, cada quadro segurava 57px de rolagem contra 29 — e o
   movimento saía em degraus. Menos altura devolve o mesmo passo.

   Os svh a mais são o trecho do estúdio, que corre mais devagar (ver
   RITMO no landing.js). O resto do filme mantém a velocidade que já
   tinha. */
.em-pe .cena { height: 448svh; }

.palco {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: #000;
}
.tela { width: 100%; height: 100%; display: block; }

/* A névoa branca que toma a tela quando o filme em pé acaba. A opacidade
   vem do JS, pela rolagem. Fica acima do canvas e abaixo de tudo o mais:
   a bolha e as janelas continuam por cima enquanto ainda existem. */
.nevoa-branca {
  position: absolute;
  inset: -2%;
  background: var(--painel);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

/* ==========================================================================
   JANELAS DE PORTFÓLIO
   Posição e tamanho vêm do JS, em coordenadas do quadro do vídeo.
   ========================================================================== */
/* ==========================================================================
   JANELAS DE PORTFÓLIO
   Esta é a nossa janela, desenhada aqui — não uma tentativa de encaixar
   dentro da que está queimada no vídeo. Ela é um pouco MAIOR e cobre a
   outra por inteiro, então não existe emenda para errar por 3px.
   O cromo segue a linguagem da página: branco quente, fio dourado, e o
   @ da marca no lugar da barra de endereço.
   ========================================================================== */
.janela {
  position: absolute;
  /* "visible" para o bloco de sombra abaixo poder passar das bordas */
  overflow: visible;
  isolation: isolate;
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  border-radius: 7px;
  background: var(--papel);
  border: 1px solid rgba(28, 22, 17, .1);
}

/* No filme em pé o trecho com as janelas do vídeo foi cortado fora, então
   não há resto a cobrir — e o bloco preto viraria um retângulo solto
   acima de cada janela. Vira sombra normal. */
.em-pe .janela::before {
  top: -2%;
  bottom: -4%;
  left: -2%;
  right: -2%;
  background: rgba(20, 16, 12, .28);
  filter: blur(10px);
}

/* Bloco preto atrás da janela, esticado para cima.
   A janela do vídeo continua subindo depois que a nossa para de segui-la,
   e sobrava um pedaço dela aparecendo acima. Este bloco cobre esse resto
   e lê como sombra dura da janela de verdade. */
.janela::before {
  content: "";
  position: absolute;
  left: -3%;
  right: -3%;
  top: -85%;
  bottom: -10%;
  background: #14100C;
  border-radius: 8px;
  z-index: -1;
}

.janela__barra {
  flex: none;
  height: 15%;
  min-height: 20px;
  display: flex;
  align-items: center;
  gap: 3.5%;
  padding: 0 3.5%;
  background: var(--papel);
  border-bottom: 1px solid rgba(201, 150, 63, .35);
}
.janela__barra i {
  width: 1.9%;
  min-width: 5px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(28, 22, 17, .18);
  flex: none;
}
.janela__barra i:first-child { background: var(--dourado); }

.janela__url {
  margin-left: 3%;
  flex: 1;
  height: 58%;
  display: flex;
  align-items: center;
  padding: 0 3%;
  border-radius: 100px;
  background: rgba(28, 22, 17, .05);
  font-size: clamp(7px, 1.5cqw, 12px);
  letter-spacing: .06em;
  color: rgba(28, 22, 17, .5);
  white-space: nowrap;
  overflow: hidden;
}

.janela__tela {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #E7E4DF;
  border-radius: 0 0 6px 6px;   /* mantém o canto arredondado sem clipar a sombra */
}
/* "cover" de volta: é o enquadramento que ficou melhor */
.janela__tela video { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   COLUNAS DE CONTEÚDO
   Cobrem os painéis laterais da animação. A cor de fundo é a mesma
   amostrada do vídeo, então a emenda não aparece.
   ========================================================================== */
.coluna {
  position: absolute;
  background: var(--painel);
  opacity: 0;
  pointer-events: none;
  display: grid;
  align-content: center;
  overflow: hidden;
}
.coluna.is-vivo { pointer-events: auto; }
.coluna__dentro {
  display: grid;
  gap: .7rem;
  padding: 1.6rem clamp(1rem, 2.2vw, 2rem);
}

/* A coluna da esquerda encosta no topo em vez de ficar centralizada:
   a etiqueta e o título sobem para o alto e sobra altura para o gancho,
   o botão, a lista e o "Ver planos" caberem sem apertar. */
.coluna--esq { align-content: start; }
/* Espaçamento mais apertado só nesta coluna: com o gancho, o botão novo e
   o sexto produto, o conteúdo passou a pedir 674px numa coluna de 609px.
   As fontes ficam como estão; o que encolhe é o respiro entre os blocos. */
/* Com a etiqueta fora daqui sobrou altura, então o respiro volta um pouco */
.coluna--esq .coluna__dentro { padding: 1.3rem clamp(1rem, 2.2vw, 2rem); gap: .62rem; }
.coluna--esq .planos li { padding: .32rem 0; }
.coluna--esq .planos { gap: 0; }

/* O botão da direita fica centralizado com o texto dela */
.coluna--dir .botao { justify-self: center; }

.etiqueta {
  font-size: .625rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--tinta);
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--tinta);
  justify-self: start;
}

.titulo {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.8vw, 2.7rem);
  line-height: 1.06;
  letter-spacing: -.015em;
}
.titulo--menor { font-size: clamp(1.6rem, 2.5vw, 2.4rem); }
.titulo em { font-style: italic; color: var(--dourado-escuro); }

.corpo {
  font-size: clamp(.9rem, 1.25vw, 1.05rem);
  line-height: 1.6;
  color: rgba(28, 22, 17, .8);
}

/* Frase de gancho, logo acima do botão do site animado */
.gancho {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1.28;
  color: var(--tinta);
}

/* --- Tabela de produtos avulsos --- */
.planos { list-style: none; padding: 0; display: grid; gap: .2rem; }
.planos li {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-size: clamp(.85rem, 1.15vw, 1rem);
  padding: .38rem 0;
  border-bottom: 1px solid var(--linha);
}
.planos span { flex: 1; color: rgba(28, 22, 17, .82); }
.planos b {
  font-weight: 400;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}

.prazo {
  font-size: clamp(.85rem, 1.15vw, 1rem);
  color: rgba(28, 22, 17, .78);
}
.prazo strong { font-weight: 400; color: var(--dourado-escuro); }

/* --- Botões --- */
.botao {
  justify-self: start;
  background: var(--dourado);
  color: #17120C;
  padding: .95em 2.2em;
  border-radius: 100px;          /* sem cantos retos */
  font-size: clamp(.72rem, .95vw, .84rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.botao:hover { background: var(--dourado-escuro); color: #fff; transform: translateY(-2px); }
.botao--escuro { background: var(--tinta); color: var(--papel); }
.botao--escuro:hover { background: var(--dourado-escuro); }

/* Cada elemento entra em cascata, comandado pelo scroll */
.coluna [data-ent] { opacity: 0; transform: translateY(16px); }

/* ==========================================================================
   LEGENDAS DA BOLSA
   Ficam nos dois lados da bolsa enquanto ela gira. Posição e tamanho vêm
   do JS, em coordenadas do quadro, para acompanharem o enquadramento.
   ========================================================================== */
.bolsa-legendas { position: absolute; inset: 0; pointer-events: none; }

.bolsa-legenda {
  position: absolute;
  display: grid;
  gap: .8rem;
  align-content: center;
  opacity: 0;
}
.bolsa-legenda__titulo {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.6rem, 2.6vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--tinta);
}
.bolsa-legenda__titulo em { font-style: italic; color: var(--dourado-escuro); }
.bolsa-legenda__texto {
  font-size: clamp(1.02rem, 1.4vw, 1.25rem);
  line-height: 1.6;
  color: rgba(28, 22, 17, .86);
}
/* O fundo da cena da bolsa é claro, mas varia — o halo garante a leitura */
.bolsa-legenda__titulo,
.bolsa-legenda__texto {
  text-shadow: 0 1px 12px rgba(247,243,236,.95), 0 0 30px rgba(247,243,236,.85);
}
.bolsa-legenda[data-lado="dir"] { text-align: right; }

/* ==========================================================================
   CARTÃO FINAL
   ========================================================================== */
.fim {
  position: absolute;
  inset: 0;
  background: var(--papel);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.6rem;
  text-align: center;
  padding: 2rem;
  opacity: 0;
  pointer-events: none;
}
.fim.is-vivo { pointer-events: auto; }
.fim img { width: min(340px, 60vw); }
.fim p {
  font-family: var(--display);
  font-size: clamp(.95rem, 1.5vw, 1.25rem);
  font-style: italic;
  line-height: 1.5;
  color: rgba(28, 22, 17, .72);
  max-width: 30rem;
}

/* ==========================================================================
   BOLHA E AVISO DE ROLAGEM
   ========================================================================== */
/* Posição e tamanho vêm do JS, em coordenadas do quadro: a bolha precisa
   cair exatamente em cima do botão falso que está queimado no vídeo.
   Assim não existem dois botões — existe um, e ele funciona. */
.bolha {
  position: absolute;
  border-radius: 50%;
  background: var(--dourado);
  display: grid; place-items: center;
  box-shadow: 0 10px 26px -10px rgba(0,0,0,.45);
  opacity: 0;
  z-index: 8;
  pointer-events: none;
  transition: background .3s var(--ease);
}
.bolha.is-vivo { pointer-events: auto; }
.bolha:hover { background: var(--dourado-escuro); }
.bolha svg { width: 44%; height: 44%; fill: #17120C; }

.role {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: .7rem;
  font-size: .58rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  pointer-events: none;
}
.role i {
  width: 1px; height: 36px;
  background: linear-gradient(rgba(255,255,255,.5), transparent);
}

/* ==========================================================================
   CONTEÚDO NO CELULAR
   Recebe as mesmas caixas de texto que no computador ficam por cima
   do vídeo. Aqui elas viram blocos empilhados, com espaço para respirar.
   ========================================================================== */
.conteudo-movel {
  position: relative;
  z-index: 2;
  background: var(--painel);
  padding: clamp(2.5rem, 8vh, 4rem) clamp(1.25rem, 6vw, 2rem);
  display: grid;
  gap: clamp(2.5rem, 7vh, 3.5rem);
}
/* No filme em pé esta seção sobe POR CIMA do palco, que ainda está preso.
   A modelo já saiu de foco e a névoa branca já tomou a tela, então o
   bloco de produtos se forma sobre ela em vez de esperar o filme sair de
   cena. O z-index: 2 acima é o que o deixa passar na frente. */
.em-pe .conteudo-movel { margin-top: -60svh; }

/* A borda de cima chega como um esfumado, não como uma linha reta: é o
   mesmo branco do fundo, apenas dissolvido para cima. */
.em-pe .conteudo-movel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 30svh;
  background: linear-gradient(to top, var(--painel), rgba(240, 240, 240, 0));
  pointer-events: none;
}

.conteudo-movel .coluna__dentro { padding: 0; gap: .9rem; }

/* Empilhado, o cartão final deixa de ser uma camada sobre o filme e passa
   a ocupar o seu lugar na leitura, entre os produtos e o texto da agência.
   O !important vence o opacity que o JS escreve no estilo do elemento
   enquanto ele ainda vive no palco. */
.conteudo-movel .fim {
  position: static;
  inset: auto;
  pointer-events: auto;
  padding: clamp(1.5rem, 5vh, 2.5rem) 0;
  gap: 1.2rem;
  background: none;
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}
.conteudo-movel .fim img { width: min(260px, 62vw); }
/* Neste modo o texto não é animado pelo scroll do filme */
.conteudo-movel [data-ent] { opacity: 1 !important; transform: none !important; }
.conteudo-movel .titulo { font-size: clamp(1.7rem, 7vw, 2.2rem); }
.conteudo-movel .corpo  { font-size: 1rem; }
.conteudo-movel .planos li { font-size: .95rem; padding: .45rem 0; }
.conteudo-movel .prazo { font-size: .95rem; }
.conteudo-movel .botao { font-size: .78rem; padding: .95em 2.2em; }

/* ==========================================================================
   SEÇÃO DE PLANOS
   Vem depois da cena. É para onde o botão "Ver planos" leva.
   ========================================================================== */
/* A emenda com o filme precisa ser invisível: o topo desta seção começa
   na cor da tarja do palco e derrete para o papel. Sem isso fica uma
   linha marcando onde uma "página" acaba e a outra começa. */
.planos-secao {
  position: relative;
  z-index: 2;
  background:
    linear-gradient(to bottom, var(--painel) 0, var(--papel) clamp(5rem, 14vh, 9rem)),
    var(--papel);
  padding: clamp(4rem, 12vh, 8rem) clamp(1.25rem, 5vw, 4rem);
  scroll-margin-top: 0;
}

.planos-secao__topo {
  max-width: 42rem;
  margin: 0 auto clamp(2.5rem, 6vh, 4rem);
  text-align: center;
  display: grid;
  gap: 1rem;
  justify-items: center;
}
.planos-secao__etiqueta {
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--dourado-escuro);
}
.planos-secao__titulo {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4rem);
  line-height: 1.06;
  letter-spacing: -.02em;
}
.planos-secao__linha {
  font-size: clamp(1rem, .95rem + .35vw, 1.15rem);
  color: rgba(28, 22, 17, .78);
  max-width: 32rem;
}

.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1rem, 2.4vw, 1.8rem);
  max-width: 62rem;
  margin-inline: auto;
  align-items: stretch;
}

.cartao {
  position: relative;
  border: 1px solid var(--linha);
  border-radius: 4px;
  background: var(--painel);
  padding: clamp(1.8rem, 3.2vw, 2.6rem) clamp(1.4rem, 2.4vw, 2rem);
  display: grid;
  gap: 1.1rem;
  align-content: start;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.cartao:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(28,22,17,.4); }

.cartao--destaque {
  border-color: var(--dourado);
  background: linear-gradient(170deg, rgba(201,150,63,.1), var(--painel) 62%);
}
.cartao__selo {
  position: absolute;
  top: -.7rem; left: 50%;
  transform: translateX(-50%);
  background: var(--dourado);
  color: #17120C;
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .35em 1em;
  border-radius: 100px;
  white-space: nowrap;
}

.cartao__nome {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
  line-height: 1.2;
}
.cartao__preco {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(3rem, 2rem + 3vw, 4.2rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--dourado-escuro);
  font-variant-numeric: tabular-nums;
}
.cartao__preco span {
  font-size: .34em;
  letter-spacing: .06em;
  margin-right: .18em;
  vertical-align: .55em;
  color: rgba(28, 22, 17, .55);
}
.cartao__ritmo {
  font-size: clamp(.9rem, 1.15vw, 1rem);
  line-height: 1.55;
  color: rgba(28, 22, 17, .76);
}

.cartao__bt {
  margin-top: .4rem;
  justify-self: stretch;
  text-align: center;
  background: var(--tinta);
  color: var(--papel);
  border-radius: 100px;
  padding: 1em 1.4em;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s var(--ease);
}
.cartao__bt:hover { background: var(--dourado-escuro); }
.cartao--destaque .cartao__bt { background: var(--dourado); color: #17120C; }
.cartao--destaque .cartao__bt:hover { background: var(--dourado-escuro); color: #fff; }

.planos-secao__pe {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  text-align: center;
  font-size: .95rem;
  color: rgba(28, 22, 17, .6);
}

/* ==========================================================================
   LEGENDAS QUE SURGEM AO ROLAR
   Tudo com a classe "surge" começa apagado e sobe quando entra na tela.
   ========================================================================== */
.surge {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s var(--ease), transform 1.1s var(--ease);
}
.surge.is-in { opacity: 1; transform: none; }

/* Variante que entra saindo do desfoque, para os blocos empilhados do
   celular: o filme se desfaz em névoa e o texto se forma a partir dela. */
.surge--nevoa {
  filter: blur(14px);
  transition: opacity 1s var(--ease), transform 1.2s var(--ease),
              filter 1.1s var(--ease);
}
.surge--nevoa.is-in { filter: blur(0); }
.surge[data-atraso="1"] { transition-delay: .1s; }
.surge[data-atraso="2"] { transition-delay: .2s; }
.surge[data-atraso="3"] { transition-delay: .3s; }

/* ==========================================================================
   SEÇÕES DE APOIO — como funciona, sobre, rodapé
   ========================================================================== */
.secao__topo {
  max-width: 42rem;
  margin: 0 auto clamp(2.5rem, 6vh, 4rem);
  text-align: center;
  display: grid;
  gap: 1rem;
  justify-items: center;
}
.secao__etiqueta {
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--dourado-escuro);
}
.secao__titulo {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.02em;
}
.secao__titulo em { font-style: italic; color: var(--dourado-escuro); }

/* --- Como funciona --- */
.passos-secao {
  position: relative;
  z-index: 2;
  background: var(--papel);
  padding: clamp(3.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
}
.passos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  max-width: 62rem;
  margin-inline: auto;
}
.passo { display: grid; gap: .85rem; align-content: start; }
.passo__numero {
  font-family: var(--display);
  font-size: 1.2rem;
  letter-spacing: .2em;
  color: var(--dourado-escuro);
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--linha);
}
.passo__titulo {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.1vw, 1.9rem);
  line-height: 1.2;
}
.passo__texto {
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.7;
  color: rgba(28, 22, 17, .82);
}

/* --- Sobre --- */
.sobre-secao {
  position: relative;
  z-index: 2;
  background: var(--painel);
  padding: clamp(3.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
}
.sobre-secao__dentro {
  max-width: 44rem;
  margin-inline: auto;
  display: grid;
  gap: 1.2rem;
  justify-items: start;
}
.sobre-secao__dentro .secao__titulo { text-align: left; }
.sobre-secao__corpo { display: grid; gap: 1.1rem; }
.sobre-secao__corpo p {
  font-size: clamp(.98rem, 1.15vw, 1.1rem);
  line-height: 1.7;
  color: rgba(28, 22, 17, .8);
}
.sobre-secao__assina {
  margin-top: 1rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linha);
  width: 100%;
}
.sobre-secao__assina strong {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--dourado-escuro);
}
.sobre-secao__assina span {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(28, 22, 17, .55);
}

/* --- Rodapé --- */
.rodape {
  position: relative;
  z-index: 2;
  background: var(--papel);
  border-top: 1px solid var(--linha);
  padding: clamp(3.5rem, 9vh, 6rem) clamp(1.25rem, 5vw, 4rem);
  display: grid;
  justify-items: center;
  gap: 1.4rem;
  text-align: center;
}
.rodape__logo { width: min(300px, 62vw); }
.rodape__frase {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  color: var(--dourado-escuro);
}
.rodape__acoes { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.rodape__acoes .botao { justify-self: center; }

/* Instagram e e-mail, embaixo dos dois de WhatsApp. No computador ficam
   lado a lado; numa tela estreita o e-mail desce para baixo do Instagram,
   porque os dois juntos não cabem numa linha legível. */
.rodape__contatos {
  margin-top: -.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  justify-content: center;
}
@media (max-width: 860px) {
  .rodape__contatos { flex-direction: column; align-items: center; }
}
/* Mesma regra para a tela em pé, que é o outro jeito de o site entrar no
   modo celular — uma janela alta e larga cairia fora do @media acima. */
.em-pe .rodape__contatos { flex-direction: column; align-items: center; }

.rodape__insta {
  padding: .8em 2em;
  border: 1px solid var(--linha);
  border-radius: 100px;
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(28, 22, 17, .72);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.rodape__insta:hover { border-color: var(--dourado); color: var(--dourado-escuro); }
.rodape__creditos {
  margin-top: 1.4rem;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(28, 22, 17, .5);
}

/* Névoa de pólen que sai do botão */
.polen-canvas {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}

/* ==========================================================================
   CELULAR
   O quadro é 16:9 e a tela é alta: sobra faixa em cima e embaixo.
   As colunas viram cartões dentro dessa faixa livre.
   ========================================================================== */
@media (max-width: 860px) {
  .coluna__dentro { padding: .9rem; gap: .45rem; }
  .planos li { font-size: .8rem; padding: .26rem 0; }
  .titulo { font-size: 1.45rem; }
  .corpo { font-size: .82rem; }
  .prazo { font-size: .8rem; }
  .botao { padding: .8em 1.6em; font-size: .68rem; }
  .role { bottom: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .botao, .redes a { transition: none; }
}