/* ---------------------------------------------------------------
   Hero da LP do Viraliza. A referência de layout é o hero da Arcads:
   fundo claro, os vídeos espalhados em volta e o texto no centro.
   O que muda: os vídeos aqui são gerações reais dos nossos usuários,
   servidos direto do serverrk, e eles se revezam sozinhos.
   --------------------------------------------------------------- */

:root {
  --tinta: #101010;
  --tinta-fraca: #55534e;
  --papel: #eeece7;
  --papel-alto: #f6f4f0;
  --borda: rgba(16, 16, 16, .08);
  --centro: 640px;   /* largura da coluna do texto */
  --cartao: 142px;   /* largura de um vídeo */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: Inter, ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

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

.topo {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(18px, 4vw, 56px);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -.02em;
}

.marca-icone {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--tinta);
  color: var(--papel-alto);
  font-size: 14px;
  font-weight: 700;
}

.botao-topo {
  background: var(--tinta);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 11px 20px;
  border-radius: 999px;
  transition: transform .18s ease, opacity .18s ease;
}

.botao-topo:hover { transform: translateY(-1px); opacity: .88; }

/* ---------------------------- palco ----------------------------- */

.palco {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr min(var(--centro), 100%) 1fr;
  align-items: center;
  padding: 108px 0 64px;
  overflow: hidden;
}

/* manchas de cor bem apagadas, só pra tirar o branco chapado do fundo */
.brilho {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  pointer-events: none;
}

.brilho-a {
  width: 420px; height: 420px;
  left: 4%; top: 38%;
  background: rgba(255, 138, 76, .28);
}

.brilho-b {
  width: 380px; height: 380px;
  right: 8%; top: 30%;
  background: rgba(120, 160, 255, .22);
}

/* --------------------------- colunas ---------------------------- */

.coluna {
  position: relative;
  align-self: stretch;
  pointer-events: none;
}

.cartao {
  position: absolute;
  margin: 0;
  width: var(--cartao);
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  background: #ddd9d2;
  box-shadow: 0 18px 40px rgba(16, 16, 16, .16), 0 2px 6px rgba(16, 16, 16, .08);
  animation: flutuar 9s ease-in-out infinite;
}

/* os vídeos ficam empilhados dentro do cartão: na troca o novo entra por
   cima com opacidade zero e sobe, aí o antigo sai. Sem piscar. */
.cartao video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1;
  transition: opacity .7s ease;
}

.cartao video.entrando { opacity: 0; }

/* c1 a c3 na fileira de fora, c4 e c5 na fileira de dentro, escalonados
   pra nunca se encostarem nem escaparem para o meio da tela */
.esquerda .c1 { left: 3%;  top: 1%;  transform: rotate(-7deg); animation-delay: -.4s; }
.esquerda .c2 { left: 5%;  top: 35%; transform: rotate(2deg);  animation-delay: -3.1s; }
.esquerda .c3 { left: 3%;  top: 69%; transform: rotate(-4deg); animation-delay: -6.2s; }
.esquerda .c4 { left: 38%; top: 15%; transform: rotate(4deg);  animation-delay: -1.7s; }
.esquerda .c5 { left: 38%; top: 52%; transform: rotate(-3deg); animation-delay: -4.9s; }

.direita .c1 { right: 3%;  top: 3%;  transform: rotate(7deg);  animation-delay: -1.8s; }
.direita .c2 { right: 5%;  top: 37%; transform: rotate(-3deg); animation-delay: -4.6s; }
.direita .c3 { right: 3%;  top: 71%; transform: rotate(5deg);  animation-delay: -7.4s; }
.direita .c4 { right: 38%; top: 17%; transform: rotate(-4deg); animation-delay: -2.6s; }
.direita .c5 { right: 38%; top: 54%; transform: rotate(3deg);  animation-delay: -5.8s; }

@keyframes flutuar {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}

@media (prefers-reduced-motion: reduce) {
  .cartao { animation: none; }
}

/* ---------------------------- centro ---------------------------- */

.centro {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 0 20px;
}

.selo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: var(--tinta-fraca);
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--borda);
  padding: 7px 16px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  transition: background .2s ease;
}

.selo:hover { background: #fff; }

.selo-titulo {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: 17px;
  color: var(--tinta);
}

h1 {
  margin: 26px 0 0;
  font-size: clamp(38px, 5.6vw, 68px);
  line-height: 1.04;
  letter-spacing: -.035em;
  font-weight: 700;
  text-wrap: balance;
}

h1 em {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
}

.linha-fina {
  margin: 20px auto 0;
  max-width: 470px;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.5;
  color: var(--tinta-fraca);
}

/* marca-texto no que a pessoa precisa levar da frase */
.destaque {
  font-weight: 600;
  color: var(--tinta);
  padding: 0 3px;
  background: linear-gradient(transparent 58%, rgba(255, 138, 76, .48) 58%);
}

.acoes {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.cta, .cta-claro {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 52px;
  padding: 0 26px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  transition: transform .18s ease, box-shadow .18s ease;
}

.cta {
  background: var(--tinta);
  color: #fff;
  box-shadow: 0 10px 26px rgba(16, 16, 16, .22);
}

.cta svg {
  width: 18px;
  height: 18px;
  fill: #ffd27a;
}

.cta:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(16, 16, 16, .26); }

.cta-claro {
  background: #fff;
  border: 1px solid var(--borda);
  color: var(--tinta);
}

.cta-claro .g { width: 18px; height: 18px; }

.cta-claro:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(16, 16, 16, .1); }

/* ---------------------------- telas ----------------------------- */

/* a fileira de dentro só cabe quando o gutter é largo */
@media (max-width: 1280px) {
  :root { --cartao: 130px; }
  .esquerda .c4, .esquerda .c5,
  .direita .c4, .direita .c5 { display: none; }
}

@media (max-width: 1040px) {
  :root { --cartao: 112px; --centro: 560px; }
  .cartao { opacity: .92; }
  .esquerda .c2, .direita .c2 { display: none; }
  .esquerda .c3 { top: 58%; }
  .direita .c3 { top: 60%; }
}

/* -------------------------- no celular --------------------------
   As colunas não somem: elas viram duas fileiras deitadas, uma acima e
   outra abaixo do texto. Os cartões continuam se revezando, então a tela
   do celular também fica viva em vez de virar um vazio.
   ---------------------------------------------------------------- */

@media (max-width: 820px) {
  .palco {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 26px;
    padding: 92px 0 42px;
  }

  .coluna {
    display: flex;
    align-self: auto;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    padding: 0 14px;
  }

  .esquerda { order: 1; }
  .centro   { order: 2; }
  .direita  { order: 3; }

  /* de cinco cartões só três cabem lado a lado numa tela de celular */
  .coluna .c4, .coluna .c5 { display: none; }

  /* os três dividem a largura que existe, sem estourar a tela. Antes eles
     tinham largura fixa mais inclinação, e num celular estreito a soma
     passava dos 100%: as quinas giradas subiam uma por cima da outra. */
  .cartao {
    position: static;
    flex: 1 1 0;
    width: auto;
    max-width: 124px;
    transform: none;
    opacity: 1;
  }

  .coluna .c2 { display: block; }

  /* o do meio desce um pouco: dá ritmo à fileira sem ninguém se encostar */
  .coluna .c2 { margin-top: 16px; }

  h1 { font-size: clamp(34px, 9vw, 46px); }
  .acoes { margin-top: 24px; }
  .cta, .cta-claro { height: 50px; }
}

/* =================================================================
   Da dobra pra baixo. Mesma régua do hero: fundo claro, uma ideia por
   bloco e o itálico serifado carregando a parte que interessa.
   ================================================================= */

.dentro {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 40px);
}

.chapeu {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #a8703f;
}

.conta {
  padding: clamp(66px, 8vw, 106px) 0;
  border-top: 1px solid var(--borda);
}

.conta h2, .influ h2, .tudo h2 {
  margin: 14px 0 0;
  font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.06;
  letter-spacing: -.035em;
  font-weight: 700;
}

.conta h2 em, .influ h2 em, .tudo h2 em {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

.apoio {
  margin: 18px 0 0;
  max-width: 560px;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.55;
  color: var(--tinta-fraca);
}

/* ------------------------- a dor do pack -------------------------
   Única faixa escura da página. O contraste é proposital: essa é a
   parte ruim da história, e a seção das influencers volta pro claro
   como quem vira a página.
   ----------------------------------------------------------------- */

.dor {
  padding: clamp(70px, 9vw, 118px) 0;
  background: #141312;
  color: #f2efe9;
}

.dor .chapeu { color: #e08a4d; }

.dor h2 {
  margin: 14px 0 0;
  font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.06;
  letter-spacing: -.035em;
  font-weight: 700;
}

.dor h2 em {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: #cfc7ba;
}

.dor .apoio { color: #a9a49b; }

.dores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 30px);
  margin-top: 50px;
}

.item {
  border-top: 1px solid rgba(242, 239, 233, .16);
  padding-top: 20px;
}

.xis {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(224, 138, 77, .16);
  color: #e08a4d;
  font-size: 13px;
}

.item h3 {
  margin: 16px 0 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.02em;
}

.item p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: #a9a49b;
}

.ponte {
  margin: 54px 0 0;
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.35;
  letter-spacing: -.02em;
  font-weight: 600;
}

.ponte em {
  display: block;
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: #e08a4d;
}

/* -------------------- os influenciadores de IA -------------------- */

.influ {
  padding: clamp(70px, 9vw, 120px) 0;
  background: var(--papel-alto);
  border-top: 1px solid var(--borda);
}

.galeria {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: 44px;
}

.rosto {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #ddd9d2;
  aspect-ratio: 9 / 16;
  box-shadow: 0 20px 44px rgba(16, 16, 16, .14);
  transition: transform .4s ease, box-shadow .4s ease;
}

.rosto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rosto:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 56px rgba(16, 16, 16, .2);
}

.miudo {
  margin: 22px 0 0;
  font-size: 14px;
  color: var(--tinta-fraca);
}

.miudo strong {
  color: var(--tinta);
  font-weight: 600;
}

/* ---------------------- tudo na plataforma ---------------------- */

.tudo {
  padding: clamp(70px, 9vw, 120px) 0 clamp(80px, 10vw, 130px);
  border-top: 1px solid var(--borda);
}

/* a tela de cada exemplo é vertical, igual ao resto da página: o vídeo é 9:16
   e cortar ele num quadro deitado destruía a imagem */
.tela {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 20px;
  overflow: hidden;
  background: #e3dfd8;
  border: 1px solid var(--borda);
  box-shadow: 0 20px 44px rgba(16, 16, 16, .13);
}

.tela video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* -------------------------- estilos de cena --------------------------
   Os mesmos vídeos de exemplo que a pessoa vê dentro do Lab, puxados do
   serverrk (media/lab/estilos). Trocar um exemplo lá troca aqui também.
   --------------------------------------------------------------------- */

.estilos {
  margin-top: clamp(64px, 8vw, 100px);
  padding-top: 44px;
  border-top: 1px solid var(--borda);
}

/* quando ela abre a seção, não precisa da linha nem do respiro de cima */
.estilos.abre {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* a fileira das ferramentas de fora, a conta que o curso não conta */
.cobram {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 26px;
}

.fora {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--tinta);
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 11px;
  padding: 8px 13px 8px 9px;
}

.fora img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 5px;
  display: block;
}

.fora i {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #b4551f;
  background: rgba(224, 138, 77, .14);
  border-radius: 5px;
  padding: 2px 6px;
}

.reticencia {
  font-size: 14px;
  color: #8d8880;
}

.selado {
  margin: 34px 0 0;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.5;
  font-weight: 500;
}

.selado b {
  font-weight: 600;
  border-bottom: 2px solid rgba(16, 16, 16, .18);
}

/* as três frases de alívio que abrem a seção, antes da prova visual */
.tres {
  list-style: none;
  margin: 38px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.6vw, 34px);
}

.tres li {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--tinta-fraca);
  padding-top: 18px;
  border-top: 2px solid rgba(224, 138, 77, .35);
}

.tres b {
  display: block;
  color: var(--tinta);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: 3px;
}

.quadro {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 26px);
  margin-top: 42px;
}

.estilo h3 {
  margin: 18px 0 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.02em;
}

.estilo p {
  margin: 7px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--tinta-fraca);
}

.chip {
  display: inline-block;
  margin-top: 12px;
  font-size: 12.5px;
  color: #8a5a2e;
  background: rgba(224, 138, 77, .12);
  border-radius: 999px;
  padding: 5px 12px;
}

/* ------------------------ e ainda vem junto ------------------------
   Uma lista corrida, não seis caixinhas: o peso da página tem que ficar
   nos estilos de cena, e o resto é só mostrar que a caixa vem cheia.
   ------------------------------------------------------------------- */

.junto {
  margin-top: clamp(58px, 7vw, 86px);
  padding-top: 34px;
  border-top: 1px solid var(--borda);
}

.fichas {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 34px;
}

.fichas li {
  font-size: 16px;
  line-height: 1.5;
  color: var(--tinta-fraca);
  padding: 12px 0;
  border-bottom: 1px solid var(--borda);
}

.fichas b {
  color: var(--tinta);
  font-weight: 600;
}

.ficha.forte b { color: #b4551f; }

.fichas .vem { color: #8d8880; }

/* ------------------------ Editor automático ------------------------
   A única peça deitada da página, então ela ganha moldura de janela pra
   ficar claro que aquilo é a tela do produto, não mais um vídeo.
   ------------------------------------------------------------------- */

.editor {
  padding: clamp(70px, 9vw, 116px) 0;
  border-top: 1px solid var(--borda);
}

.editor .chapeu { color: #2f7d4f; }

.editor h2 {
  margin: 14px 0 0;
  font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.06;
  letter-spacing: -.035em;
  font-weight: 700;
}

.editor h2 em {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

.janela {
  margin-top: 44px;
  border-radius: 16px;
  overflow: hidden;
  background: #0e1310;
  border: 1px solid rgba(16, 16, 16, .14);
  box-shadow: 0 30px 70px rgba(16, 16, 16, .22);
}

.barra {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: #171d19;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.barra span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
}

.barra p {
  margin: 0 auto 0 14px;
  font-size: 12px;
  color: rgba(255, 255, 255, .45);
}

.janela video {
  width: 100%;
  display: block;
}

/* -------------------------- Marca em lote --------------------------
   Mesma moldura de janela do editor, com a prévia do posicionamento
   encostada no canto. A prévia é vertical de propósito: é ela que
   mostra onde o carimbo cai dentro do vídeo.
   ------------------------------------------------------------------- */

.lote {
  padding: clamp(70px, 9vw, 116px) 0;
  background: var(--papel-alto);
  border-top: 1px solid var(--borda);
}

.lote .chapeu { color: #2f7d4f; }

.lote h2 {
  margin: 14px 0 0;
  font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.06;
  letter-spacing: -.035em;
  font-weight: 700;
}

.lote h2 em {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

.palco-marca {
  position: relative;
  margin-top: 44px;
  padding-right: 148px; /* o espaço que o inserto ocupa do lado */
}

.inserto {
  position: absolute;
  right: 0;
  bottom: -22px;
  width: 250px;
  border-radius: 14px;
  border: 1px solid rgba(16, 16, 16, .12);
  box-shadow: 0 26px 54px rgba(16, 16, 16, .26);
  display: block;
}

/* -------------------------- Viral Boost --------------------------
   A fita das historinhas roda sozinha da direita pra esquerda. Os seis
   cartões aparecem duas vezes no HTML: a animação anda exatamente meia
   fita, então quando ela reinicia a imagem é a mesma e ninguém vê o
   corte.
   ----------------------------------------------------------------- */

.boost {
  padding: clamp(70px, 9vw, 116px) 0 clamp(64px, 8vw, 100px);
  background: var(--papel-alto);
  border-top: 1px solid var(--borda);
  overflow: hidden;
}

.boost .chapeu { color: #b4551f; }

.boost h2 {
  margin: 14px 0 0;
  font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.06;
  letter-spacing: -.035em;
  font-weight: 700;
}

.boost h2 em {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

.breve {
  display: inline-block;
  margin: 22px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: #b4551f;
  background: rgba(224, 138, 77, .14);
  border-radius: 999px;
  padding: 8px 16px;
}

.trilho {
  margin-top: 44px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.fita {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: rodar 52s linear infinite;
}

.trilho:hover .fita { animation-play-state: paused; }

@keyframes rodar {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 8px)); } /* metade da fita mais meio gap */
}

@media (prefers-reduced-motion: reduce) {
  .fita { animation: none; }
  .trilho { overflow-x: auto; }
}

.conto {
  margin: 0;
  flex: 0 0 auto;
  width: 172px;
}

.conto video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
  border-radius: 16px;
  background: #ddd9d2;
  box-shadow: 0 16px 34px rgba(16, 16, 16, .14);
}

.conto figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--tinta-fraca);
  text-align: center;
}

/* ------------------------ Acervo de cortes ------------------------
   As capas são as MESMAS que a pessoa vê no painel, com o nome da
   categoria já dentro da arte. Por isso o cartão não repete o título:
   embaixo vai só a contagem.
   ------------------------------------------------------------------ */

.acervo {
  padding: clamp(70px, 9vw, 116px) 0 clamp(80px, 10vw, 130px);
  border-top: 1px solid var(--borda);
}

.acervo .chapeu { color: #6b5bd6; }

.acervo h2 {
  margin: 14px 0 0;
  font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.06;
  letter-spacing: -.035em;
  font-weight: 700;
}

.acervo h2 em {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

.prateleira {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: 44px;
}

.capa {
  margin: 0;
  transition: transform .3s ease;
}

.capa img {
  width: 100%;
  aspect-ratio: 11 / 6;
  object-fit: cover;
  display: block;
  border-radius: 14px;
  background: #ddd9d2;
  box-shadow: 0 14px 30px rgba(16, 16, 16, .14);
}

.capa figcaption {
  margin-top: 9px;
  font-size: 13px;
  color: var(--tinta-fraca);
}

.capa:hover { transform: translateY(-4px); }

/* ---------------------- Provas: os resultados ----------------------
   Nada de card bonitinho reescrevendo o depoimento: os prints entram do
   jeito que chegaram, porque é a bagunça deles que prova que são reais.
   ------------------------------------------------------------------- */

.provas {
  padding: clamp(70px, 9vw, 116px) 0 clamp(80px, 10vw, 130px);
  background: var(--papel-alto);
  border-top: 1px solid var(--borda);
}

.provas .chapeu { color: #1f7a4d; }

.provas h2 {
  margin: 14px 0 0;
  font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.06;
  letter-spacing: -.035em;
  font-weight: 700;
}

.provas h2 em {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

.numeros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.6vw, 34px);
  margin-top: 44px;
}

.numero {
  border-top: 2px solid rgba(31, 122, 77, .3);
  padding-top: 18px;
}

.numero b {
  display: block;
  font-size: clamp(28px, 3.4vw, 38px);
  letter-spacing: -.03em;
  font-weight: 700;
  line-height: 1.05;
}

.numero span {
  display: block;
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--tinta-fraca);
}

/* o mural usa colunas de texto: cada print entra com a altura que tem e a
   coluna vai enchendo, sem buraco e sem cortar imagem */
.mural {
  margin-top: 46px;
  column-count: 4;
  column-gap: 14px;
}

.mural img {
  width: 100%;
  display: block;
  margin-bottom: 14px;
  border-radius: 14px;
  border: 1px solid var(--borda);
  box-shadow: 0 12px 28px rgba(16, 16, 16, .12);
  break-inside: avoid;
}

/* --------------------------- Instagram --------------------------- */

.insta {
  margin-top: clamp(56px, 7vw, 84px);
  padding-top: 36px;
  border-top: 1px solid var(--borda);
}

.insta h3 {
  margin: 12px 0 0;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -.03em;
  font-weight: 600;
}

.comentarios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 28px 0 26px;
}

.comentarios img {
  width: 100%;
  display: block;
  border-radius: 14px;
  border: 1px solid var(--borda);
  box-shadow: 0 12px 28px rgba(16, 16, 16, .12);
}

.insta .ig { width: 18px; height: 18px; fill: #c13584; }

/* ---------------------------- A oferta ----------------------------
   Duas colunas: o preço e as garantias de um lado, o que entra na caixa
   do outro. A tabela de créditos fica junto do preço de propósito, é a
   conta que a pessoa quer fazer antes de decidir.
   ------------------------------------------------------------------- */

.oferta {
  padding: clamp(70px, 9vw, 116px) 0;
  border-top: 1px solid var(--borda);
}

.oferta .chapeu { color: #b4551f; }

.oferta h2, .faq h2 {
  margin: 14px 0 0;
  font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.06;
  letter-spacing: -.035em;
  font-weight: 700;
}

.oferta h2 em, .faq h2 em {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

.caixa {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(20px, 3vw, 40px);
  margin-top: 46px;
  align-items: start;
}

.preco {
  background: var(--tinta);
  color: #f2efe9;
  border-radius: 22px;
  padding: 34px 30px;
  box-shadow: 0 26px 60px rgba(16, 16, 16, .26);
}

.relogio {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  font-size: 13.5px;
  color: rgba(242, 239, 233, .72);
  background: rgba(224, 138, 77, .16);
  border: 1px solid rgba(224, 138, 77, .32);
  border-radius: 999px;
  padding: 7px 15px;
}

.relogio b {
  color: #f0c9a4;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.pisca {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e08a4d;
  animation: bater 1.6s ease-in-out infinite;
}

@keyframes bater {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}

@media (prefers-reduced-motion: reduce) {
  .pisca { animation: none; }
}

.de {
  margin: 0;
  font-size: 14.5px;
  color: rgba(242, 239, 233, .6);
  text-decoration: line-through;
  text-decoration-color: rgba(224, 138, 77, .8);
}

.por {
  margin: 6px 0 0;
  font-size: clamp(46px, 6vw, 64px);
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 700;
}

.por span {
  font-size: .45em;
  font-weight: 600;
  margin-right: 6px;
  vertical-align: super;
  color: rgba(242, 239, 233, .7);
}

.uma-vez {
  margin: 10px 0 0;
  font-size: 14px;
  color: rgba(242, 239, 233, .62);
}

.preco .cta {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  width: 100%;
  background: #e08a4d;
  color: #16110c;
  box-shadow: 0 12px 28px rgba(224, 138, 77, .3);
}

.preco .cta svg { fill: #16110c; }

.selos {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}

.selos li {
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(242, 239, 233, .68);
  padding: 11px 0;
  border-top: 1px solid rgba(242, 239, 233, .12);
}

.selos b { color: #f2efe9; font-weight: 600; }

.titulo-inclui {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.creditos-titulo { margin-top: 34px; }

.lista {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.lista li {
  position: relative;
  padding: 9px 0 9px 26px;
  font-size: 15.5px;
  line-height: 1.5;
  border-bottom: 1px solid var(--borda);
}

.lista li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 9px;
  color: #1f7a4d;
  font-weight: 700;
}

.linha-creditos {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta-fraca);
}

.linha-creditos b { color: var(--tinta); font-weight: 600; }

.tabela {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}

.tabela th,
.tabela td {
  text-align: left;
  font-size: 15px;
  font-weight: 400;
  padding: 9px 0;
  border-bottom: 1px solid var(--borda);
}

.tabela td {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pacotes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.pacote {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-size: 14px;
  color: var(--tinta-fraca);
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 9px 13px;
}

.pacote b {
  color: var(--tinta);
  font-size: 15.5px;
  font-weight: 600;
}

.destaque-pacote {
  border-color: rgba(224, 138, 77, .5);
  background: rgba(224, 138, 77, .08);
}

/* o crédito de graça é o argumento que tira o medo de "vai acabar e vou ter
   que pagar de novo", então ele ganha caixa própria */
.gratis {
  margin: 20px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta-fraca);
  background: rgba(31, 122, 77, .08);
  border: 1px solid rgba(31, 122, 77, .18);
  border-radius: 14px;
  padding: 16px 18px;
}

.gratis b { color: var(--tinta); font-weight: 600; }

/* ----------------------------- o FAQ ----------------------------- */

.faq {
  padding: clamp(70px, 9vw, 116px) 0 clamp(80px, 10vw, 130px);
  background: var(--papel-alto);
  border-top: 1px solid var(--borda);
}

.faq .chapeu { color: #6b5bd6; }

.perguntas {
  margin-top: 42px;
  border-top: 1px solid var(--borda);
}

.perguntas details {
  border-bottom: 1px solid var(--borda);
}

.perguntas summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 40px 20px 0;
  position: relative;
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -.015em;
}

.perguntas summary::-webkit-details-marker { display: none; }

.perguntas summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  translate: 0 -50%;
  font-size: 24px;
  font-weight: 400;
  color: var(--tinta-fraca);
  transition: rotate .2s ease;
}

.perguntas details[open] summary::after { content: "−"; }

.perguntas p {
  margin: 0;
  padding: 0 40px 22px 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tinta-fraca);
  max-width: 720px;
}

/* --------------------------- WhatsApp ---------------------------
   Dois pontos de contato: um no fim do FAQ, onde a dúvida que sobrou
   aparece, e o flutuante, que segue a pessoa a página inteira.
   ---------------------------------------------------------------- */

.ficou {
  margin-top: 44px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: 18px;
  padding: 22px 24px;
}

.ficou p {
  margin: 0;
  font-size: 16.5px;
  font-weight: 500;
}

.cta-zap {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 48px;
  padding: 0 22px;
  border-radius: 13px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: #1fa855;
  box-shadow: 0 10px 24px rgba(31, 168, 85, .28);
  transition: transform .18s ease;
}

.cta-zap svg { width: 20px; height: 20px; fill: #fff; }
.cta-zap:hover { transform: translateY(-2px); }

.zap-flutua {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 20px;
  border-radius: 999px;
  color: #fff;
  background: #1fa855;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 14px 34px rgba(16, 16, 16, .28);
  transition: transform .2s ease;
}

.zap-flutua svg { width: 24px; height: 24px; fill: #fff; }
.zap-flutua:hover { transform: translateY(-2px); }

/* no celular ele vira só o ícone, pra não tampar o conteúdo */
@media (max-width: 620px) {
  .zap-flutua {
    right: 16px;
    bottom: 16px;
    height: 54px;
    width: 54px;
    padding: 0;
    justify-content: center;
  }
  .zap-flutua span { display: none; }
}

/* ---------------------------- o rodapé ----------------------------
   É onde a pessoa vai procurar quando bater a dúvida de "isso aqui é
   sério?": contato de gente, política, garantia e quem processa o
   pagamento. Por isso ele é informativo e não decorativo.
   ------------------------------------------------------------------ */

.rodape {
  background: #141312;
  color: #a9a49b;
  padding: clamp(52px, 6vw, 76px) 0 44px;
}

.rodape-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(242, 239, 233, .12);
}

.rodape .marca { color: #f2efe9; }

.rodape .marca-icone {
  background: #f2efe9;
  color: #141312;
}

.rodape-frase {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  max-width: 420px;
}

.rodape-grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding: 32px 0 34px;
}

.rodape-titulo {
  margin: 0 0 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #f2efe9;
}

.rodape-grade a,
.rodape-nota {
  display: block;
  font-size: 14.5px;
  line-height: 1.5;
  margin-bottom: 10px;
}

.rodape-grade a {
  color: #cfc7ba;
  transition: color .18s ease;
}

.rodape-grade a:hover { color: #f2efe9; }

.rodape-nota { color: #8a857d; }

.rodape-fim {
  margin: 0;
  padding-top: 26px;
  border-top: 1px solid rgba(242, 239, 233, .12);
  font-size: 13px;
  line-height: 1.6;
  color: #7d7871;
}

.rodape-fim span {
  display: block;
  margin-top: 8px;
  max-width: 760px;
}

/* ------------------------ aviso de cookies ------------------------ */

.cookies {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  margin: 0 auto;
  max-width: 660px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: #1b1917;
  color: #cfc7ba;
  border: 1px solid rgba(242, 239, 233, .14);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 20px 50px rgba(16, 16, 16, .4);
  opacity: 0;
  translate: 0 14px;
  transition: opacity .3s ease, translate .3s ease;
}

.cookies.aparece { opacity: 1; translate: 0 0; }

.cookies p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  flex: 1 1 260px;
}

.cookies a {
  color: #f0c9a4;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookies-botoes {
  display: flex;
  gap: 8px;
}

.cookies button {
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 10px;
  padding: 10px 16px;
  border: 1px solid transparent;
  transition: opacity .18s ease;
}

.cookies .recusar {
  background: transparent;
  border-color: rgba(242, 239, 233, .2);
  color: #cfc7ba;
}

.cookies .aceitar {
  background: #f2efe9;
  color: #141312;
}

.cookies button:hover { opacity: .85; }

/* o aviso fica na frente do botão do WhatsApp enquanto estiver aberto */
@media (max-width: 620px) {
  .cookies { left: 12px; right: 12px; bottom: 12px; padding: 14px; }
  .cookies-botoes { width: 100%; }
  .cookies-botoes button { flex: 1; }
}

/* --------------------------- o fecho --------------------------- */

.fecho {
  margin-top: 62px;
  text-align: center;
}

.fecho p {
  margin: 0 0 20px;
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -.01em;
}

/* --------------------------- as telas --------------------------- */

@media (max-width: 940px) {
  .dores { grid-template-columns: 1fr; gap: 6px; }
  .prateleira { grid-template-columns: repeat(2, 1fr); }
  .rodape-grade { grid-template-columns: repeat(2, 1fr); }
  .numeros { grid-template-columns: 1fr; gap: 0; }
  .numero { border-top: 0; border-bottom: 1px solid var(--borda); padding: 16px 0; }
  .mural { column-count: 2; }
  .comentarios { grid-template-columns: 1fr; max-width: 420px; }
  .caixa { grid-template-columns: 1fr; max-width: 520px; }

  /* sem espaço pro inserto do lado: ele desce e fica embaixo, centralizado */
  .palco-marca { padding-right: 0; }
  .inserto {
    position: static;
    width: 200px;
    margin: 22px auto 0;
  }
  .tres { grid-template-columns: 1fr; gap: 0; }
  .tres li { border-top: 0; border-bottom: 1px solid var(--borda); padding: 16px 0; }
  .quadro { grid-template-columns: repeat(2, 1fr); }
  .fichas { grid-template-columns: 1fr; gap: 0; }
}

/* no celular tudo sobe de tamanho: a página é lida de perto e no braço,
   texto de 15px vira formiguinha */
@media (max-width: 620px) {
  .galeria { grid-template-columns: repeat(2, 1fr); }

  .apoio { font-size: 17px; line-height: 1.6; }
  .miudo { font-size: 15px; line-height: 1.55; }

  .chapeu { font-size: 12.5px; }

  .conta h2, .influ h2, .tudo h2, .dor h2,
  .boost h2, .editor h2, .acervo h2, .lote h2,
  .provas h2, .oferta h2, .faq h2 { font-size: clamp(31px, 8.4vw, 40px); }

  .numero span { font-size: 15.5px; }
  .preco { padding: 28px 22px; }
  .lista li, .linha-creditos, .tabela th, .tabela td, .gratis { font-size: 16px; }
  .pacote { font-size: 15px; }
  .ficou { padding: 20px; }
  .ficou p { font-size: 16px; }
  .rodape-grade { grid-template-columns: 1fr; gap: 26px; }
  .selos li { font-size: 15.5px; }
  .perguntas summary { font-size: 17px; padding-right: 34px; }
  .perguntas p { font-size: 16.5px; padding-right: 0; }

  .capa figcaption { font-size: 13.5px; }

  .janela { border-radius: 12px; margin-top: 32px; }
  .barra { padding: 9px 11px; }

  .conto { width: 142px; }
  .conto figcaption { font-size: 13px; }
  .breve { font-size: 14.5px; }

  .item h3 { font-size: 21px; }
  .item p { font-size: 16.5px; line-height: 1.6; }

  .tres li { font-size: 16.5px; line-height: 1.6; }
  .tres b { font-size: 18px; }
  .fora { font-size: 15px; }
  .selado { font-size: 18px; }

  .quadro { grid-template-columns: 1fr; max-width: 380px; gap: 30px; }
  .estilo h3 { font-size: 21px; }
  .estilo p { font-size: 16.5px; line-height: 1.6; }
  .chip { font-size: 13.5px; }

  .fichas li { font-size: 16.5px; padding: 14px 0; }

  .ponte { font-size: 25px; }
  .fecho p { font-size: 27px; }

  .linha-fina { font-size: 16.5px; line-height: 1.6; }
  .selo { font-size: 13.5px; }
  .selo-titulo { font-size: 16px; }
}