/* ==========================================================================
   PROPOSTA INTERATIVA PRO — página de vendas curta, mobile-first

   A base deste arquivo é o celular (375px). As media queries só CRESCEM
   (min-width), nunca corrigem o mobile depois. Usa os tokens do sistema.

   Decisões vindas da pesquisa de concorrentes (out/2026):
   · selos de objeção logo abaixo da headline  (Luan Montenegro)
   · ancoragem de preço item a item            (DesignerKit)
   · parcelamento sempre com o total à vista   (erro em 3 dos 6 concorrentes)
   · regras abertas antes do botão             (nenhum concorrente faz)
   · demonstração pública do produto           (nenhum concorrente faz)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
  /* espaço para a barra fixa de compra não cobrir o fim da página */
  padding-bottom: 0;
}

.wrap {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 20px;
  /* o quanto um filho precisa recuar para sangrar até a borda da tela */
  --sangria: 20px;
}

.secao { padding-block: 56px; }

.secao--escura {
  background: var(--charcoal);
  color: var(--cream);
  --cor-destaque: var(--mint);
}
.secao--clara { background: var(--cream-deep); }

/* Tipografia da página curta — escala menor que a da página longa,
   porque aqui o texto é lido no celular, de perto. */

.olho {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 12px;
}
.secao--escura .olho,
.capa .olho { color: var(--mint); }

.h2 {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.lead {
  margin-top: 14px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gray);
}
.secao--escura .lead { color: var(--gray-on-dark); }

.micro {
  margin-top: 12px;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--gray);
}
.secao--escura .micro { color: var(--gray-on-dark); }

.tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--mint) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--mint) 40%, transparent);
  color: var(--mint);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   Botões — alvo de toque mínimo de 52px
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.btn--brand {
  background: var(--grad-brand);
  color: var(--cream);
  box-shadow: var(--sh-pill);
}
.btn--brand:active { transform: scale(0.98); }

.btn--vazado {
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  color: var(--mint);
}
.btn--vazado:active { transform: scale(0.98); }

.btn--bloco { display: flex; width: 100%; }

/* pulso intermitente */
.btn--pulse { position: relative; isolation: isolate; }
.btn--pulse::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  animation: pulso 3s var(--ease) infinite;
}
@keyframes pulso {
  0%        { box-shadow: 0 0 0 0   color-mix(in srgb, var(--teal) 50%, transparent); }
  18%       { box-shadow: 0 0 0 14px color-mix(in srgb, var(--teal) 0%, transparent); }
  19%, 100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--teal) 0%, transparent); }
}


/* --------------------------------------------------------------------------
   01 — Capa
   -------------------------------------------------------------------------- */

/* A capa saiu do "Hero da pagina.pdf", desenhado pelo Maykson. O que era
   pintura virou três camadas aqui: o preto e o brilho verde são CSS (para
   acompanharem o tamanho da tela), o celular com os balões é uma imagem
   recortada do próprio PDF, e o texto é texto de verdade. */

.capa {
  position: relative;
  overflow: hidden;
  padding: 26px 0 14px;
  /* o preto do desenho, não o charcoal da marca: na capa o verde precisa
     brilhar, e sobre o charcoal ele fica leitoso */
  background: #050707;
  color: var(--cream);
  --cor-destaque: var(--mint);
  /* no celular tudo é centrado; o alinhamento à esquerda do desenho só
     entra quando a capa vira duas colunas, a partir de 900px */
  text-align: center;
}

/* --- O brilho verde -------------------------------------------------------
   No desenho é uma pintura só. Aqui são três borrões: o grande atrás do
   celular, um mais claro em cima e um que escorre para o canto de baixo.
   Em CSS eles acompanham a tela, em vez de ficarem presos a 1440px. */

.capa__brilho {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 46% at 97% 46%, color-mix(in srgb, var(--mint) 60%, transparent) 0%, transparent 68%),
    radial-gradient(56% 64% at 104% 52%, color-mix(in srgb, var(--teal) 92%, transparent) 0%, transparent 72%),
    radial-gradient(26% 30% at 84% 10%, color-mix(in srgb, var(--mint) 24%, transparent) 0%, transparent 74%),
    radial-gradient(34% 38% at 106% 94%, color-mix(in srgb, var(--teal) 58%, transparent) 0%, transparent 70%);
  filter: blur(26px);
}
.js .capa__brilho { animation: brilho-respira 17s ease-in-out infinite alternate; }

@keyframes brilho-respira {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.88; }
  to   { transform: translate3d(-2.5%, 1.5%, 0) scale(1.08); opacity: 1; }
}

/* --- A cortina de luz -----------------------------------------------------
   Os raios verticais do canto de cima à direita. Três camadas, cada uma com
   um período diferente (97px, 61px, 149px) e uma velocidade diferente. Como
   os períodos não são múltiplos entre si, o desenho leva minutos para se
   repetir igual — é o que faz a cortina parecer viva e não um padrão.

   A máscara concentra tudo no alto à direita: do lado do texto não sobra
   nada, e a leitura nunca disputa com a luz. */

.capa__aurora {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.42;
  -webkit-mask-image: radial-gradient(46% 56% at 99% 0%, #000 0%, transparent 74%);
          mask-image: radial-gradient(46% 56% at 99% 0%, #000 0%, transparent 74%);
}

.aurora__camada {
  position: absolute;
  inset: -12% -60%;
}

.aurora__camada:nth-child(1) {
  --passo: 97px;
  opacity: 0.5;
  background: repeating-linear-gradient(90deg,
    transparent 0 42px,
    color-mix(in srgb, var(--mint) 70%, transparent) 42px 49px,
    transparent 49px 97px);
  filter: blur(17px);
}
.aurora__camada:nth-child(2) {
  --passo: 61px;
  opacity: 0.34;
  background: repeating-linear-gradient(90deg,
    transparent 0 26px,
    color-mix(in srgb, var(--cream) 42%, transparent) 26px 30px,
    transparent 30px 61px);
  filter: blur(9px);
}
.aurora__camada:nth-child(3) {
  --passo: 149px;
  opacity: 0.4;
  background: repeating-linear-gradient(90deg,
    transparent 0 72px,
    color-mix(in srgb, var(--mint) 80%, transparent) 72px 84px,
    transparent 84px 149px);
  filter: blur(30px);
}

/* Cada camada anda exatamente um período, então a volta é invisível. */
.js .aurora__camada:nth-child(1) { animation: raios 31s linear infinite; }
.js .aurora__camada:nth-child(2) { animation: raios 19s linear infinite reverse; }
.js .aurora__camada:nth-child(3) { animation: raios 53s linear infinite; }

@keyframes raios {
  to { transform: translate3d(var(--passo), 0, 0); }
}


/* --- O texto --------------------------------------------------------------- */

.capa__grade {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  /* o quanto a arte precisa andar para a direita até encostar na borda da
     tela: a sobra do wrap centrado mais o respiro lateral */
  --fuga: calc(max(0px, (100vw - 1080px) / 2) + var(--sangria));
}

.capa__logo {
  display: block;
  height: 46px;
  width: auto;
  margin: 0 auto 26px;
}

/* A tarja da turma fundadora. Não está no desenho do PDF, mas é a
   escassez da oferta e precisa aparecer antes da manchete. */
.capa__texto .tag { margin-bottom: 16px; }

/* O título é a frase inteira do anúncio. No desenho ele ocupa a coluna
   toda, então quem dá a medida aqui é a coluna, não um max-width. */
.capa__h1 {
  font-size: 1.62rem;
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: -0.03em;
  /* centrado, o título pede linhas de tamanho parecido */
  text-wrap: balance;
}

.capa__sub {
  margin: 18px auto 0;
  font-size: 0.98rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--cream) 86%, transparent);
}

/* --- O botão --------------------------------------------------------------
   Duas animações, as duas de fôlego longo para não virar pisca-pisca:
   um halo que respira na própria sombra do botão e um lustro que atravessa
   a pílula de tempos em tempos. O lustro é um ::after com o mesmo raio de
   borda, então ele se recorta sozinho. */

.capa__cta {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 420px;
  margin: 28px auto 0;
  min-height: 58px;
  padding: 16px 28px;
  overflow: hidden;
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  /* o degradê do desenho corre do mint para o teal, da esquerda para a direita */
  background: linear-gradient(90deg, var(--mint) 0%, var(--teal) 100%);
  color: var(--cream);
  /* a sombra parada: é dela que a animação parte, e é ela que fica quando
     o visitante pede menos movimento ou o JS não roda */
  box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--teal) 80%, transparent);
}
.capa__cta > span { position: relative; z-index: 1; }

.capa__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: linear-gradient(104deg,
    transparent 34%,
    color-mix(in srgb, var(--cream) 62%, transparent) 50%,
    transparent 66%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  background-position: 170% 0;
}

.js .capa__cta { animation: cta-halo 3.4s var(--ease) infinite; }
.js .capa__cta::after { animation: cta-lustro 5.2s var(--ease) infinite; }

@keyframes cta-halo {
  0%, 100% {
    box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--teal) 80%, transparent),
                0 0 0 0 color-mix(in srgb, var(--mint) 42%, transparent);
  }
  55% {
    box-shadow: 0 16px 34px -14px color-mix(in srgb, var(--teal) 95%, transparent),
                0 0 0 13px color-mix(in srgb, var(--mint) 0%, transparent);
  }
}
@keyframes cta-lustro {
  0%, 66% { background-position: 170% 0; }
  100%    { background-position: -80% 0; }
}

.capa__cta:hover { transform: translateY(-2px); }
.capa__cta:active { transform: scale(0.99); }


/* Selos: as objeções resolvidas antes da primeira rolagem */
.selos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
  /* no celular eles sobem para logo depois do botão; a arte fica por último */
  order: 2;
}
.selos li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  /* no desenho as pílulas são bem mais claras que o resto do escuro — é o
     que faz elas lerem como selo, e não como mais uma linha de texto */
  background: color-mix(in srgb, var(--cream) 42%, transparent);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--cream);
}
.selos li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cream);
}


/* --- A arte ----------------------------------------------------------------
   O celular com a proposta aberta e as perguntas do cliente em volta, do
   jeito que foi desenhado. No celular ela sangra para a direita, porque é
   assim que o balão cortado na borda continua fazendo sentido. */

.capa__arte {
  position: relative;
  order: 3;
  margin: 30px calc(var(--sangria) * -1) 0;
}
.capa__arte img {
  display: block;
  width: 122%;
  max-width: none;
  height: auto;
  /* O celular não fica no meio do recorte: ele está a 43,6% da largura da
     arte. Esta margem é o que põe O CELULAR no centro da tela, não a
     imagem — a imagem sangra dos dois lados. */
  margin-left: -3.2%;
}


/* --------------------------------------------------------------------------
   02 — As duas cenas

   Cada cena é um telefone com uma conversa que se monta sozinha. A linha do
   tempo mora no HTML (data-t, em milissegundos) e quem a toca é o curta.js.

   Tudo dentro do aparelho é dimensionado em em, a partir de um único
   font-size no .fone__tela que acompanha a largura do telefone. Mexer
   naquele número redimensiona a cena inteira.

   Sem JS nada disso esconde conteúdo: a conversa aparece inteira e parada,
   a tela do app fica fora de quadro e a dobra continua de pé.
   -------------------------------------------------------------------------- */

.cenas {
  display: grid;
  gap: 28px;
  margin-top: 32px;
}

.cena {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 18px;
  justify-items: center;
}

/* --- o aparelho ----------------------------------------------------------- */

.fone {
  width: min(248px, 88%);
  padding: 7px;
  border-radius: 34px;
  background: #15161A;
  box-shadow: var(--sh-card);
  container-type: inline-size;
}

.fone__tela {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  aspect-ratio: 9 / 19;
  border-radius: 28px;
  background: #0B141A;
  color: #E9EDEF;
  font-size: 9.2px;
  line-height: 1.35;
}
@supports (font-size: 1cqw) {
  .fone__tela { font-size: 3.95cqw; }
}

/* --- cabeçalho da conversa ------------------------------------------------ */

.zap__topo {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.85em 0.9em;
  background: #1F2C34;
}
.zap__voltar {
  width: 0.5em;
  height: 0.5em;
  flex: none;
  border-left: 1.4px solid #AEBAC1;
  border-bottom: 1.4px solid #AEBAC1;
  transform: rotate(45deg);
}
.zap__avatar {
  display: grid;
  place-items: center;
  width: 2.4em;
  height: 2.4em;
  flex: none;
  border-radius: 50%;
  background: var(--grad-brand);
  color: #0B141A;
  font-size: 0.95em;
  font-weight: 800;
}
.zap__quem { display: grid; line-height: 1.25; min-width: 0; }
.zap__quem b { font-size: 1.02em; font-weight: 600; }
.zap__quem i { font-style: normal; font-size: 0.8em; color: #8696A0; }

/* --- as mensagens --------------------------------------------------------- */

.zap {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* a conversa cresce de baixo para cima */
  gap: 0.45em;
  margin: 0;
  padding: 0.9em 0.7em 1.3em;
  overflow: hidden;
  list-style: none;
  transition: opacity 0.45s var(--ease);
}
.zap.is-saindo { opacity: 0; }

.bolha {
  max-width: 84%;
  padding: 0.55em 0.7em 0.45em;
  border-radius: 0.75em;
}
.bolha time {
  display: block;
  margin-top: 0.25em;
  text-align: right;
  font-size: 0.74em;
  color: #8696A0;
}
.bolha--ela {
  align-self: flex-start;
  background: #1F2C34;
  border-top-left-radius: 0.2em;
}
.bolha--eu {
  align-self: flex-end;
  background: #005C4B;
  border-top-right-radius: 0.2em;
}
.bolha--anexo,
.bolha--link { max-width: 88%; }

/* Os tiquinhos: cinza quando a mensagem sai, azul no instante em que ela
   abre a proposta. É o único momento da cena em que os dois lados mudam
   de cor ao mesmo tempo. */
.ticks {
  display: inline-block;
  width: 1.05em;
  height: 0.62em;
  margin-left: 0.35em;
  vertical-align: -0.03em;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 11' fill='none' stroke='%238696A0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6.1l3.1 3.1L10.4 2'/%3E%3Cpath d='M7.3 6.1l3.1 3.1L16.7 2'/%3E%3C/svg%3E");
  transition: opacity 0.2s linear;
}
.bolha--eu.is-lido .ticks {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 11' fill='none' stroke='%2353BDEB' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6.1l3.1 3.1L10.4 2'/%3E%3Cpath d='M7.3 6.1l3.1 3.1L16.7 2'/%3E%3C/svg%3E");
}

/* O balãozinho de "digitando" — o curta.js o cria e o empurra para a frente
   da mensagem que está por vir. */
.digitando {
  display: none;
  align-self: flex-start;
  gap: 0.28em;
  padding: 0.8em 0.75em;
  border-radius: 0.75em;
  border-top-left-radius: 0.2em;
  background: #1F2C34;
}
.digitando.is-in { display: flex; animation: entra 0.26s var(--ease) both; }
.digitando span {
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: #8696A0;
  animation: pontinho 1.25s ease-in-out infinite;
}
.digitando span:nth-child(2) { animation-delay: 0.18s; }
.digitando span:nth-child(3) { animation-delay: 0.36s; }
@keyframes pontinho {
  0%, 62%, 100% { opacity: 0.35; transform: none; }
  30% { opacity: 1; transform: translateY(-0.2em); }
}

/* Antes da sua vez a bolha não ocupa lugar nenhum — é isso que faz a
   conversa subir sozinha. A animação dispara no instante em que ela passa
   a existir na tela. */
.js .bolha { display: none; }
.js .bolha.is-in { display: block; animation: entra 0.32s var(--ease) both; }
@keyframes entra {
  from { opacity: 0; transform: translateY(0.9em) scale(0.97); }
}

/* o anexo em PDF */
.anexo {
  display: grid;
  grid-template-columns: 2.5em 1fr 1em;
  align-items: center;
  gap: 0.55em;
  padding: 0.45em;
  border-radius: 0.45em;
  background: rgba(0, 0, 0, 0.22);
}
.anexo__capa {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.2em;
}
.anexo__dados { display: grid; gap: 0.1em; min-width: 0; }
.anexo__dados b {
  font-size: 0.84em;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.anexo__dados i { font-style: normal; font-size: 0.76em; color: #8696A0; }
.anexo__baixar {
  position: relative;
  width: 1em;
  height: 1em;
  border: 1.2px solid #8696A0;
  border-radius: 50%;
}
.anexo__baixar::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.28em;
  height: 0.28em;
  border-right: 1.2px solid #8696A0;
  border-bottom: 1.2px solid #8696A0;
  transform: translateY(-0.05em) rotate(45deg);
}

/* os 2,3 MB descendo no 4G — é esse tempo que a cena cobra */
.anexo__barra {
  display: block;
  height: 2px;
  margin-top: 0.45em;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
.anexo__barra i { display: block; width: 100%; height: 100%; background: var(--mint); }
.js .bolha--anexo .anexo__barra i { width: 0; }
.js .bolha--anexo.is-in .anexo__barra i { animation: baixando 2000ms linear forwards; }
@keyframes baixando { to { width: 100%; } }

/* a prévia do link */
.previa {
  display: block;
  border-radius: 0.45em;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.22);
}
.previa__img { display: block; width: 100%; height: auto; }
.previa__dados { display: grid; gap: 0.1em; padding: 0.45em 0.55em 0.5em; }
.previa__dados b { font-size: 0.84em; font-weight: 600; }
.previa__dados i { font-style: normal; font-size: 0.76em; color: #8696A0; }
.previa__url {
  display: block;
  margin-top: 0.4em;
  font-size: 0.88em;
  color: #53BDEB;
  word-break: break-all;
}

/* --- a tela que sobe por cima da conversa --------------------------------- */

.fone__app {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-rows: auto 1fr;
  background: #0B141A;
  transform: translateY(101%);
  transition: transform 0.42s var(--ease);
}
.fone__app.is-aberto { transform: none; }

/* leitor de PDF */
.fone__app--pdf { background: #D6D3D1; }
.visor__topo {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.7em 0.8em;
  background: #1F2C34;
  color: #E9EDEF;
}
.visor__x {
  position: relative;
  width: 0.8em;
  height: 0.8em;
  flex: none;
}
.visor__x::before,
.visor__x::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 1.4px;
  background: #AEBAC1;
}
.visor__x::before { transform: rotate(45deg); }
.visor__x::after { transform: rotate(-45deg); }
.visor__nome {
  flex: 1;
  min-width: 0;
  font-size: 0.8em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.visor__conta { flex: none; font-size: 0.76em; color: #8696A0; }

.visor__corpo { overflow: hidden; }
.visor__corpo img { display: block; width: 100%; height: auto; }

/* A tira tem quatro páginas e aparece com pouco mais de metade da altura do
   visor. Rolar 50% dela chega ao fim — e a proporção não muda com o tamanho
   do telefone, porque tudo aqui escala junto. */
.js .fone__app--pdf.is-aberto .visor__corpo img {
  animation: folhear 6000ms linear forwards;
}
@keyframes folhear { to { transform: translateY(-50%); } }

/* navegador com a proposta */
.fone__app--web {
  grid-template-rows: 1fr;
  background: #000;
}
.fone__app--web video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* --- a leitura embaixo de cada aparelho ----------------------------------- */

.cena__legenda {
  width: 100%;
  align-self: stretch;
  padding: 22px 20px;
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--charcoal) 12%, transparent);
  background: var(--cream);
}
.cena__legenda h3 {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.cena__legenda ul { display: grid; gap: 10px; }
.cena__legenda li {
  position: relative;
  padding-left: 28px;
  font-size: 0.9rem;
  line-height: 1.45;
}
.cena__legenda li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
}

.cena--pdf .cena__legenda li { color: var(--gray); }
.cena--pdf .cena__legenda li::before {
  background-color: color-mix(in srgb, var(--gray) 16%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23666563' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 2l8 8M10 2l-8 8'/%3E%3C/svg%3E");
}

.cena--link .cena__legenda {
  border-color: color-mix(in srgb, var(--teal) 38%, transparent);
  box-shadow: var(--sh-card);
}
.cena--link .cena__legenda li::before {
  background-color: color-mix(in srgb, var(--teal) 14%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23019A88' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.4 2.4L9.5 4'/%3E%3C/svg%3E");
}

.amador__nota { margin-top: 28px; }


/* --------------------------------------------------------------------------
   03 — Demonstração
   -------------------------------------------------------------------------- */

.demo .btn { margin-top: 24px; }

.demo__grade { display: grid; gap: 32px; }

/* O cartão que ocupa o lugar do mockup: em vez de mostrar a proposta de
   longe, lista o que o cliente encontra quando abre. Cada item é uma
   pergunta que ele faria — e o botão ao lado é a resposta. */

.prova {
  padding: 26px 22px;
  border-radius: var(--r-lg);
  background: var(--charcoal-soft);
  border: 1px solid color-mix(in srgb, var(--mint) 22%, transparent);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9);
}

.prova__olho {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mint);
}

.prova__lista {
  display: grid;
  gap: 18px;
  margin-top: 20px;
}
.prova__lista li {
  position: relative;
  display: grid;
  gap: 3px;
  padding-left: 26px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--gray-on-dark);
}
.prova__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mint) 16%, transparent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2389D0C7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.4 2.4L9.5 4'/%3E%3C/svg%3E")
    no-repeat center / 10px;
}
.prova__lista b {
  color: var(--cream);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.prova__nota {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--gray-on-dark);
}
.prova__nota b { color: var(--mint); font-weight: 700; }


/* --------------------------------------------------------------------------
   04 — Pra quem é

   Seis cartões escuros sobre o fundo claro da seção: o número grande em
   cima, o ofício, e o que aquele ofício escreve dentro da proposta. Duas
   colunas já no celular, três no desktop — e como a grade estica as linhas,
   os cartões de uma mesma fileira ficam da mesma altura sem ajuste nenhum.

   No celular cada cartão tem uns 160px: o respiro e a tipografia caem junto,
   senão a descrição vira uma coluna de duas palavras por linha.
   -------------------------------------------------------------------------- */

.areas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 28px;
}

.area {
  padding: 16px 15px;
  border-radius: var(--r-md);
  background: var(--charcoal);
  color: var(--cream);
}

.area__n {
  display: block;
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.035em;
  /* dessaturado de propósito: numera sem competir com o nome do ofício */
  color: color-mix(in srgb, var(--mint) 42%, transparent);
}

.area h3 {
  margin-top: 10px;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.area p {
  margin-top: 7px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--gray-on-dark);
  hyphens: auto;
}

.serve .faixa { margin-top: 26px; }


/* --------------------------------------------------------------------------
   05 — O que você recebe + ancoragem
   -------------------------------------------------------------------------- */

.itens {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 20px;
  border-radius: var(--r-md);
  background: var(--cream-deep);
  border: 1px solid color-mix(in srgb, var(--charcoal) 10%, transparent);
}

.item__txt h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.item__txt p {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--gray);
}

/* o valor de cada item — é ele que constrói a âncora */
.item__val {
  flex: none;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--teal);
  white-space: nowrap;
}

.soma {
  margin-top: 16px;
  padding: 14px 20px;
  border-radius: var(--r-md);
  background: var(--charcoal);
  color: var(--gray-on-dark);
  font-size: 0.95rem;
  text-align: center;
}
.soma strong {
  color: var(--mint);
  font-size: 1.15rem;
  font-weight: 800;
}

/* faixa do contra-argumento contra assinatura */
.faixa {
  margin-top: 24px;
  padding: 20px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--teal) 8%, transparent);
  border-left: 3px solid var(--teal);
}
.faixa p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--gray);
}
.faixa strong { color: var(--charcoal); }


/* --------------------------------------------------------------------------
   06 — Regras
   -------------------------------------------------------------------------- */

.regras__grade {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.regra {
  padding: 20px;
  border-radius: var(--r-md);
  background: var(--cream);
  border: 1px solid color-mix(in srgb, var(--charcoal) 11%, transparent);
}

.regra h3 {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

.regra ul { display: grid; gap: 8px; }

/* O marcador fica posicionado, não em coluna de grade. Com grade, um
   <strong> no meio da frase virava um item separado e o resto do texto
   caía numa coluna implícita sem largura — uma palavra por linha. */
.regra li {
  position: relative;
  padding-left: 14px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--gray);
}
.regra li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
}

.regra p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--gray);
}
.regra p + p,
.regra ul + p { margin-top: 10px; }
.regra strong { color: var(--charcoal); font-weight: 700; }

.aviso,
.ok {
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border-left: 3px solid;
}
.aviso {
  background: color-mix(in srgb, var(--gray) 10%, transparent);
  border-left-color: var(--gray);
}
.ok {
  background: color-mix(in srgb, var(--teal) 10%, transparent);
  border-left-color: var(--teal);
}

/* bloco "não compre se" */
.naoe {
  margin-top: 20px;
  padding: 20px;
  border-radius: var(--r-md);
  background: var(--charcoal);
  color: var(--cream);
}
.naoe h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--mint);
  margin-bottom: 12px;
}
.naoe ul { display: grid; gap: 9px; }
.naoe li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--gray-on-dark);
}
.naoe li::before {
  content: "✕";
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cream) 12%, transparent);
  font-size: 0.6rem;
  font-weight: 700;
}

.linha-doc {
  margin-top: 20px;
  text-align: center;
  font-size: 0.88rem;
}
.linha-doc a {
  color: var(--teal);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* --------------------------------------------------------------------------
   07 — Oferta
   -------------------------------------------------------------------------- */

.cartao {
  margin-top: 28px;
  padding: 26px 20px;
  border-radius: var(--r-lg);
  border: 2px solid transparent;
  /* fundo cream na caixa de padding, gradiente só na borda */
  background:
    linear-gradient(var(--cream), var(--cream)) padding-box,
    var(--grad-brand) border-box;
  color: var(--charcoal);
  box-shadow: var(--sh-card);
}

.cartao__tag {
  display: block;
  width: fit-content;
  margin-inline: auto;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  background: var(--grad-brand);
  color: var(--cream);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cartao__itens {
  display: grid;
  gap: 10px;
  margin: 22px 0 26px;
  padding-top: 22px;
  border-top: 1px solid color-mix(in srgb, var(--charcoal) 12%, transparent);
}
.cartao__itens li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 0.88rem;
  line-height: 1.5;
}
.cartao__itens li::before {
  content: "";
  width: 17px;
  height: 17px;
  margin-top: 1px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--teal) 14%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23019A88' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.4 2.4L9.5 4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 9px;
}

/* --- O preço, como está no "pagina de investimento.pdf" -------------------
   A parcela virou a manchete e o à vista virou a segunda linha. Quem
   manda no tamanho de tudo é um número só: o font-size do .preco__parcela.
   Os filhos estão em `em`, então mexer nele move o conjunto inteiro. */

.preco {
  text-align: center;
}

/* Não é um preço riscado: é a conta dos itens vendidos à parte. */
.preco__de {
  display: block;
  width: fit-content;
  margin-inline: auto;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--cream-deep);
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--gray);
}

.preco__parcela {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.07em;
  margin-top: 14px;
  font-size: clamp(3.6rem, 1rem + 13vw, 6.4rem);
  line-height: 0.92;
  color: var(--teal);
}
.preco__vezes {
  font-size: 0.5em;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.preco__parcela strong {
  font-size: 1em;
  font-weight: 900;
  letter-spacing: -0.045em;
}

.preco__avista {
  margin-top: 6px;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--charcoal);
}

.preco__total {
  margin-top: 8px;
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--gray) 85%, transparent);
}

/* O botão do desenho é retangular de cantos macios, não pílula, e o
   degradê corre do mint para o teal como o da capa. */
.cartao__cta {
  border-radius: var(--r-md);
  min-height: 62px;
  font-size: 1.3rem;
  font-weight: 800;
  background: linear-gradient(90deg, var(--mint) 0%, var(--teal) 100%);
}

.cartao .btn { margin-top: 24px; }

.cartao__nota {
  margin-top: 14px;
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--gray);
}

.duvida {
  margin-top: 24px;
  text-align: center;
  font-size: 0.88rem;
  color: var(--gray);
}
.secao--escura .duvida { color: var(--gray-on-dark); }
.duvida a {
  color: var(--teal);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.secao--escura .duvida a { color: var(--mint); }


/* --------------------------------------------------------------------------
   08 — FAQ
   -------------------------------------------------------------------------- */

.faq { padding-bottom: 0; }

.acordeao {
  margin-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--charcoal) 14%, transparent);
}
.acordeao__item {
  border-bottom: 1px solid color-mix(in srgb, var(--charcoal) 14%, transparent);
}

.acordeao__topo {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  min-height: 56px;
  padding: 16px 0;
  text-align: left;
}
.acordeao__titulo {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.acordeao__cruz {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--teal) 12%, transparent);
  transition: rotate 0.4s var(--ease);
}
.acordeao__cruz::before,
.acordeao__cruz::after {
  content: "";
  position: absolute;
  inset: 50% 26%;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: var(--teal);
  transition: opacity 0.3s var(--ease);
}
.acordeao__cruz::after { rotate: 90deg; }
.acordeao__topo[aria-expanded="true"] .acordeao__cruz { rotate: 180deg; }
.acordeao__topo[aria-expanded="true"] .acordeao__cruz::after { opacity: 0; }

.acordeao__corpo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}
.acordeao__item.is-aberto .acordeao__corpo { grid-template-rows: 1fr; }
.acordeao__corpo > * { overflow: hidden; }
.acordeao__corpo p {
  padding-bottom: 18px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--gray);
  opacity: 0;
  transition: opacity 0.3s var(--ease) 0.1s;
}
.acordeao__item.is-aberto .acordeao__corpo p { opacity: 1; }


/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */

.rodape {
  margin-top: 48px;
  padding-block: 36px;
  background: var(--cream-deep);
  border-top: 1px solid color-mix(in srgb, var(--charcoal) 12%, transparent);
}
.rodape img { height: 24px; width: auto; }

.rodape__eu {
  margin-top: 14px;
  max-width: 46ch;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--gray);
}

.rodape__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 20px;
  font-size: 0.85rem;
  font-weight: 600;
}
.rodape__links a { color: var(--teal); }

.rodape__legal {
  margin-top: 20px;
  font-size: 0.75rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--gray) 85%, transparent);
}


/* --------------------------------------------------------------------------
   Dobra 07 — o vídeo

   Capa clicável. Enquanto ninguém clicar, isto é uma imagem dentro de um
   botão; no clique, o JS troca o botão por um <iframe> do YouTube. Os dois
   dividem a mesma caixa 16:9 — por isso a proporção mora aqui, nas duas
   classes juntas, e não no player.
   -------------------------------------------------------------------------- */

.video__quadro {
  position: relative;
  margin: 24px 0 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-card);
}

.video__play,
.video__frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.video__play {
  position: relative;
  padding: 0;
  /* o fundo aparece no instante entre o clique e o player carregar */
  background: var(--charcoal);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* A imagem é absoluta porque o botão tira a altura do aspect-ratio, e
   altura em porcentagem não resolve contra uma altura implícita. */
.video__play img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.video__play:hover img { transform: scale(1.03); }

/* A seta: um triângulo em clip-path dentro de um disco. Sem SVG e sem
   fonte de ícone — esta página não carrega nenhuma das duas coisas. */
.video__seta {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--grad-brand-r);
  box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--teal) 85%, transparent);
  transition: transform 0.35s var(--ease);
}
.video__seta::after {
  content: "";
  position: absolute;
  top: 50%;
  /* 54% e não 50%: o centro visual de um triângulo fica à esquerda do
     centro da caixa, e a seta parece torta quando se usa 50% */
  left: 54%;
  translate: -50% -50%;
  width: 22px;
  height: 24px;
  background: var(--cream);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.video__play:hover .video__seta { transform: scale(1.08); }
.video__play:active .video__seta { transform: scale(0.96); }

/* A duração fica na capa, não só no texto: quem está decidindo se assiste
   quer saber quanto custa antes de dar o play. */
.video__rotulo {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--charcoal) 82%, transparent);
  backdrop-filter: blur(6px);
  color: var(--cream);
  font-size: 0.74rem;
  font-weight: 700;
}

.video__nota { margin-top: 12px; }


/* --------------------------------------------------------------------------
   Barra fixa de compra — o CTA que acompanha a rolagem no celular
   -------------------------------------------------------------------------- */

.barra-fixa {
  position: fixed;
  inset: auto 0 0;
  z-index: 70;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--charcoal) 94%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid color-mix(in srgb, var(--cream) 12%, transparent);
  translate: 0 110%;
  transition: translate 0.35s var(--ease);
}
.barra-fixa.is-visivel { translate: 0 0; }
.barra-fixa[hidden] { display: none; }

.barra-fixa__in {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1080px;
  margin-inline: auto;
}

.barra-fixa__preco {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  color: var(--cream);
}
.barra-fixa__preco strong { font-size: 1.15rem; font-weight: 800; }
.barra-fixa__preco span {
  font-size: 0.7rem;
  color: var(--mint);
}

.barra-fixa .btn {
  flex: 1;
  min-height: 48px;
  padding-block: 12px;
  font-size: 0.9rem;
}

/* quando a barra está visível, o fim da página ganha folga */
body.tem-barra { padding-bottom: 76px; }


/* ==========================================================================
   A PARTIR DAQUI: telas maiores. Nada aqui conserta o celular.
   ========================================================================== */

@media (min-width: 600px) {
  .wrap { padding-inline: 32px; --sangria: 32px; }
  .secao { padding-block: 72px; }

  .h2 { font-size: 2.1rem; }
  .capa__logo { height: 54px; }
  .capa__h1 { font-size: 1.95rem; }
  .capa__sub { font-size: 1.06rem; max-width: 52ch; }
  .capa__cta { max-width: 460px; min-height: 62px; font-size: 1.35rem; }
  .lead { font-size: 1.05rem; max-width: 60ch; }

  .cenas { grid-template-columns: 1fr 1fr; gap: 20px; }
  .regras__grade { grid-template-columns: 1fr 1fr; }
  .areas { gap: 14px; }
  .area { padding: 24px 22px; }
  .area__n { font-size: 2.4rem; }
  .area h3 { margin-top: 14px; font-size: 1.1rem; }
  .area p { margin-top: 10px; font-size: 0.89rem; line-height: 1.55; }

  .video__seta { width: 80px; height: 80px; }
  .video__seta::after { width: 26px; height: 28px; }

  .cartao { max-width: 560px; margin-inline: auto; padding: 40px 36px; }
  .cartao__cta { min-height: 68px; font-size: 1.45rem; }
  .preco__avista { font-size: 1.5rem; }
}

/* --- Capa em telas maiores: as duas colunas do desenho ----------------- */
@media (min-width: 900px) {
  /* das duas colunas para cima vale o desenho: tudo à esquerda */
  .capa { padding: 48px 0; text-align: left; }
  .capa__logo { margin-left: 0; }
  .capa__sub { margin-inline: 0; }
  .capa__cta { margin-inline: 0; }
  .selos { justify-content: flex-start; }
  /* à esquerda, o balanceamento encurta a primeira linha e o desenho
     quebra "Se você envia orçamentos" inteiro */
  .capa__h1 { text-wrap: pretty; }

  .capa__grade {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 20px 20px;
    min-height: min(86vh, 740px);
  }
  .capa__texto { grid-column: 1; grid-row: 1; }
  .capa__arte  { grid-column: 2; grid-row: 1; }
  .selos       { grid-column: 1 / -1; grid-row: 2; margin-top: 8px; }

  /* A manchete ocupa a coluna inteira, como no desenho: quem dá a medida
     é a coluna, não um max-width. */
  .capa__h1 { font-size: 2rem; line-height: 1.12; }
  .capa__sub { max-width: 46ch; font-size: 1.04rem; }

  /* A arte sangra até a borda da tela — é o que faz o balão cortado na
     direita continuar fazendo sentido. */
  .capa__arte {
    margin: 0 calc(var(--fuga) * -1) 0 0;
    width: calc(100% + var(--fuga));
  }
  .capa__arte img { width: 100%; margin-left: 0; }
}

@media (min-width: 1024px) {
  .secao { padding-block: 96px; }

  .capa__logo { height: 68px; margin-bottom: 30px; }
  .capa__h1 { font-size: 2.3rem; }
  .capa__cta { max-width: 480px; min-height: 70px; font-size: 1.6rem; }
  .h2 { font-size: 2.5rem; max-width: 22ch; }

  /* As seções de coluna única centralizam o texto. A capa e a dobra 03 são
     de duas colunas e ficam de fora. */
  .secao:not(.demo) .olho,
  .secao:not(.demo) .h2,
  .secao:not(.demo) .lead { margin-inline: auto; text-align: center; }
  .secao:not(.demo) .h2 { text-align: center; }

  /* dobra 03 — texto e celular lado a lado */
  .demo__grade {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: 56px;
  }
  .demo__texto .lead { max-width: 48ch; }
  .prova { padding: 32px 28px; }

  .areas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .area { padding: 28px 24px; }
  .area__n { font-size: 2.8rem; }

  .fone { width: min(272px, 88%); }
  /* sem o limite, as duas cenas ficam longe demais uma da outra para
     a comparação acontecer de um olhar só */
  .cenas { gap: 28px; max-width: 880px; margin-inline: auto; }
  .amador__nota { max-width: 68ch; margin-inline: auto; text-align: center; }


  .itens { grid-template-columns: 1fr 1fr; }
  .soma { max-width: 560px; margin-inline: auto; }
  .faixa { max-width: 760px; margin-inline: auto; }
  .naoe { max-width: 760px; margin-inline: auto; }
  .acordeao { max-width: 760px; margin-inline: auto; }

  .rodape__eu { margin-inline: auto; text-align: center; }
  .rodape .wrap { text-align: center; }
  .rodape img { margin-inline: auto; }
  .rodape__links { justify-content: center; }

  /* no desktop a barra fixa não aparece: o cartão de oferta já é grande */
  .barra-fixa { display: none; }
  body.tem-barra { padding-bottom: 0; }
}


/* --------------------------------------------------------------------------
   Animação de entrada (mesma mecânica do sistema)
   -------------------------------------------------------------------------- */

/* O estado escondido depende da classe .js, posta por um script inline no
   <head>. Sem JS — ou se ele quebrar antes de rodar — nada fica invisível. */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

[data-palavras] .pal {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}
.js [data-palavras] .pal__i {
  display: inline-block;
  opacity: 0;
  transform: translateY(115%);
  transition: transform 0.7s var(--ease), opacity 0.7s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-palavras].is-in .pal__i { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-palavras] .pal__i { opacity: 1 !important; transform: none !important; }
  .btn--pulse::before { animation: none; }
  .barra-fixa { transition: none; }

  /* a capa para: a cortina de luz, o brilho e as duas animações do botão */
  .js .aurora__camada,
  .js .capa__brilho,
  .js .capa__cta,
  .js .capa__cta::after { animation: none; }

  .video__play img,
  .video__seta { transition: none; }

  /* as cenas ficam paradas: conversa inteira, tela do app fora de quadro */
  .js .bolha.is-in,
  .js .fone__app--pdf.is-aberto .visor__corpo img { animation: none; }
  .js .bolha--anexo .anexo__barra i { width: 100%; animation: none; }
  .fone__app { transition: none; }
  .zap { transition: none; }
  .digitando { display: none !important; }
}