/* ==========================================================================
   História Cantada — landing page
   ========================================================================== */

/* Ícones inline: dois tamanhos, e só dois. 20px é o padrão ao lado de texto
   de corpo; 16px é o par de texto de apoio (faixa superior, estrelas, selos,
   itens de lista). Chegaram a existir seis medidas diferentes — 14, 16, 18,
   20, 22 e 30 — enquanto este comentário afirmava haver uma só, que é
   exatamente como uma interface passa a parecer descuidada.

   Os dois números que sobram fora desta escala não são ícones inline e sim
   proporção de botão circular: 22px dentro do player de 52px e 30px dentro
   do flutuante de 56px, ambos em components.css. */
.ico { width: 20px; height: 20px; flex: 0 0 auto; }
.ico-sm { width: 16px; height: 16px; }

.container-estreito { max-width: 720px; }

/* ==========================================================================
   HEADER
   ========================================================================== */

/* Fundo sólido, sem desfoque. O blur de 10px custava uma camada de
   composição do GPU sob um fundo de alpha .94, ou seja, para 6% do conteúdo
   que efetivamente atravessava: vidro como enfeite, não como efeito. */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(251, 246, 237, .96);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 64px;
}

/* min-height de 44px porque a altura vinha do maior filho e parava em 36px:
   era o alvo de toque mais alto da dobra e o único abaixo do piso. */
.logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 0;
  text-decoration: none;
  color: var(--ink);
}

.logo-img {
  display: block;
  width: min(176px, 46vw);
  height: auto;
  max-height: 44px;
  object-fit: contain;
}

.logo-mark {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 12px;
  background: var(--green);
  color: var(--gold-soft);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
}

.logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
}

/* A porta de quem já criou e voltou para ouvir, no lugar do hambúrguer.

   Contorno, e não dourado: ela divide a barra com "Criar minha canção", e
   duas ênfases iguais a dois centímetros uma da outra não são duas portas,
   são uma dúvida. Quem chega para comprar precisa continuar vendo um único
   botão que brilha. */
.header-ouvir {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 0 0 auto;
  min-height: 38px;
  padding-inline: var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-field);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.header-ouvir:hover { background: var(--bg); }

.header-ouvir-chamada {
  font-size: 12px;
  color: var(--ink-muted);
}

.header-ouvir-acao {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
}
.header-ouvir-acao .ico { color: var(--green); }

/* A barra tem uns 170px livres num aparelho de 360px, e o botão inteiro mede
   uns 144px. A folga acaba antes dos 350px, e aí a pergunta sai e fica só a
   ação: um botão que vaza empurrando a logo é pior do que um botão sem a
   pergunta. */
@media (max-width: 349px) {
  .header-ouvir-chamada { display: none; }
}

/* Abaixo de 900px estas duas âncoras não aparecem, e isso é a decisão de
   22/09/2026 que tirou o hambúrguer.

   O que o painel guardava eram "Avaliações" e "Para quem criar", duas
   âncoras para seções da MESMA página, que o dedo alcança rolando e que o
   rodapé repete inteiras. O "Acompanhar pedido", que era o único link ali
   sem substituto, saiu do <nav> e virou o botão visível ao lado. Ou seja: a
   barra trocou um atalho duplicado por uma porta que não existia. */
.site-nav { display: none; }

.nav-link {
  padding: var(--sp-3);
  border-radius: var(--radius-field);
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.nav-link:hover { background: var(--green-soft); }

.header-acoes {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 0 0 auto;
}

.nav-cta {
  min-height: 44px;
  padding-inline: var(--sp-4);
  font-size: var(--text-sm);
  white-space: nowrap;
}

@media (max-width: 899px) {
  .header-inner {
    gap: var(--sp-2);
    min-height: 52px;
  }
  .logo { min-height: 38px; }
  .logo-img {
    width: min(150px, 42vw);
    max-height: 34px;
  }
  .logo-mark {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }
  .logo-text { font-size: .98rem; }
  /* O CTA sai e a porta de ouvir fica. No celular a barra não comporta os
     dois, e o "Criar minha canção" tem a dobra inteira logo abaixo dele,
     mais o botão fixo do rodapé. A porta de ouvir não tem segunda chance
     nenhuma nesta tela. */
  .nav-cta { display: none; }
}

@media (min-width: 900px) {
  .site-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-2);
  }
  .nav-cta { padding-inline: var(--sp-5); font-size: var(--text-base); }
}

/* ==========================================================================
   HERO
   ========================================================================== */

/* ==========================================================================
   A DOBRA

   Escura, e essa e a decisao que carrega todas as outras.

   Sobre o creme, o dourado da marca faz 2,4:1 e some, o branco nao existe, e
   a unica cor que se enxergava era o verde do botao. A dobra inteira ficava
   lavada. Sobre este fundo o creme faz 13,7:1 e o dourado 5,70:1, que passa
   ate em texto pequeno. Fundo escuro nao e enfeite aqui, e o que devolve a
   paleta inteira para uso.

   E a unica secao clara que vira escura: a de exemplos ja era, e as duas
   agora conversam.
   ========================================================================== */

.hero-grid { display: grid; }

/* Sem estas duas a dobra desmonta: a headline encosta na esquerda e, no
   desktop, o botao e o "Ver exemplos reais" caem lado a lado. */
.hero-copy {
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
  min-width: 0;
}

.hero {
  position: relative;
  /* Tres camadas, de cima para baixo no CSS e de frente para tras na tela:

     1. O veu. Quente de proposito, marrom e nao verde: veu verde sobre foto
        ambar mata o ambar, e o calor e justamente o que a foto veio trazer.
        Comeca em 58% no topo, onde a foto pode respirar, e fecha em 96% na
        base, onde ficam botao e prova e nada pode disputar leitura.

     2. A foto. Ela nao foi escolhida por ser bonita, foi escolhida por ser a
        unica que cumpre as tres regras de imagem da marca ao mesmo tempo:
        mulher de costas e sem rosto, a Biblia como unico objeto de fe, e a
        luz com origem declarada na janela. As outras cinco capas cumprem
        tambem, mas nenhuma tem a luz dourada desta.

        A imagem e quadrada e a dobra do celular e alta e estreita, entao
        o cover escolhe uma fatia vertical do meio. A mulher esta a direita
        do quadrado e a Biblia embaixo: com a moldura centralizada as duas
        ficavam fora e sobrava ceu e parede. 68% 42% traz as duas para
        dentro, que e o unico motivo de haver foto aqui.

     3. O verde profundo por baixo, que e o que se ve enquanto a foto carrega
        e o que garante contraste se ela nunca chegar. */
  background:
    linear-gradient(180deg,
      rgba(28, 18, 12, .58) 0%,
      rgba(24, 32, 30, .88) 42%,
      rgba(24, 44, 43, .96) 78%,
      var(--wine-deep) 100%),
    url("../assets/capas/testemunho.jpg") 68% 42% / cover no-repeat,
    var(--wine-deep);
  color: var(--ink-on-wine);
  overflow: hidden;

  /* A dobra passa a OCUPAR a tela, em vez de acabar cedo e deixar a secao
     seguinte espiar. Era o que fazia ela parecer curta ao lado do
     concorrente, cuja prova social encosta na borda de baixo.

     svh e nao vh: no celular o vh conta a barra do navegador como se ela
     nunca existisse, e a dobra ficava alta demais e cortada. O vh fica de
     reserva para quem nao entende svh. */
  min-height: calc(100vh - 60px);
  min-height: calc(100svh - 60px);
  display: grid;
  align-content: center;
  padding: 28px 0 32px;
}

/* O selo e uma pilha, e nao uma linha de texto pequeno. Sem a borda ele le
   como legenda do que vem embaixo; com ela le como carimbo. */
.hero-selo {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  margin: 0 auto;
  padding: 6px 14px;
  border: 1px solid rgba(201, 154, 62, .45);
  border-radius: 999px;
  background: rgba(201, 154, 62, .10);
  color: var(--gold-strong);
  font-family: var(--font-body);
  font-size: clamp(10.5px, 3.15vw, 13px);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  letter-spacing: .01em;
}

.hero h1 {
  /* 15ch, e nao 22ch: com a headline em quatro linhas curtas a caixa larga
     nao serve para nada e so atrapalha o equilibrio. */
  max-width: 15ch;
  margin: 18px auto 0;
  color: var(--ink-on-wine);
  /* 40px, contra os 33,5px de antes. A conta e a mesma de sempre, so que a
     copy mudou de forma: quebrada em quatro linhas a maior tem 13
     caracteres, e 13 cabem com folga ate em 46px. O que limitava o tamanho
     nunca foi a fonte, era eu insistir em duas linhas longas. */
  font-size: clamp(38px, 12.8vw, 54px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
}

/* Italico de verdade: o <link> do Google Fonts carrega o eixo `ital`. Sem
   ele o navegador inclinava a Fraunces por conta propria e a serifa ficava
   torta. O dourado forte, e nao o --gold-titulo: sobre escuro o problema se
   inverte, e quem precisa clarear e a cor, nao escurecer. */
.hero h1 em {
  font-style: italic;
  color: var(--gold-strong);
}

/* 30ch, e nao 34ch. O paragrafo passou de 37 para 103 caracteres em
   27/08/2026, entao ele deixou de ser uma linha e virou tres. Com 34ch a
   terceira linha ficava com duas palavras soltas; 30ch reparte as tres de
   forma parecida. Medida larga demais so parece generosa: ela produz a
   ultima linha curta que denuncia que ninguem olhou. */
.hero-linha {
  margin: 14px auto 0;
  max-width: 30ch;
  color: var(--ink-on-wine);
  opacity: .86;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.45;
}

/* 2x2. Quatro linhas empilhadas custavam ~60px de altura que a headline e o
   botao usam melhor. */
.hero-bullets {
  width: min(100%, 22rem);
  margin: 18px auto 0;
  display: grid;
  /* auto auto, e nao 1fr 1fr.

     Com colunas iguais a segunda comeca no meio exato da caixa e o texto
     dela acaba antes da borda: sobrava um vao de uns 38px so do lado
     direito. A caixa ficava simetrica e a TINTA nao, e e a tinta que se
     enxerga. Com auto as colunas encolhem ate o conteudo e o
     justify-content centra o par inteiro.

     As linhas continuam alinhadas entre si porque a largura de cada coluna
     e a da celula mais larga dela, e nao a de cada celula. */
  /* 2x2, a pedido do usuario, e com uma consequencia que nao tem como
     evitar: "Pronta em até 2h e enviada no seu WhatsApp" tem 43 caracteres
     e meia tela de um aparelho de 390px da ~160px. Em duas colunas esse
     bullet QUEBRA, e o que da para escolher e em quantas linhas.

     Por isso 12px, medido e nao estimado: a 13,5 e a 12,5 ele partia em
     TRES linhas. A 12 cabem ~25 caracteres por linha e ele fecha em duas.

     align-items: start alinha os quatro pelo topo. Sem isso, o bullet de
     duas linhas centralizava na altura dele e empurrava o vizinho de uma
     linha para o meio, desalinhando a fileira que a grade existe para
     manter. */
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 10px 12px;
  padding: 0;
  list-style: none;
  text-align: left;
}

.hero-bullets li {
  display: grid;
  grid-template-columns: 1.15em 1fr;
  gap: .35em;
  /* start, e nao center: no bullet que quebra em duas linhas o icone
     centralizava contra o bloco inteiro e descolava da primeira linha, que e
     onde o olho o procura. */
  align-items: start;
  color: var(--ink-on-wine);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}

.hero-bullet-icone {
  font-size: 1.05em;
  text-align: center;
}

.hero-cta {
  width: 100%;
  margin-top: 20px;
  /* Cor solida, e nao degrade: navegador nao interpola degrade de forma
     confiavel, e a piscada precisa trocar a cor do fundo. O brilho de vidro
     que o botao tem vem do .btn::before, que continua por cima. */
  background-color: var(--gold-strong);
  color: var(--ink);
  border-color: rgba(0, 0, 0, .18);
  /* 22px: medido. O texto ocupava 47% da largura util do botao, e a
     conta para chegar a 85% deu 22,4px. */
  /* Medido: o texto ocupava 47% da largura util do botao, e a conta para
     chegar a 90% deu 22px, e a 22px o usuario achou grande demais: 19px
     poe o texto em ~78% do util, cheio sem ficar apertado. O clamp amarra a
     largura da tela porque num
     aparelho de 360px o rotulo dobrava em duas linhas: encolher e melhor
     que quebrar, num botao que existe para ser lido de relance. */
  font-size: clamp(16.5px, 4.9vw, 19.5px);
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    0 12px 26px rgba(0, 0, 0, .34);
  animation: cta-pisca 1.7s var(--ease-enter) infinite;
}

.hero-cta:hover {
  background-color: var(--gold-pico);
  color: var(--ink);
}

/* A piscada, de volta a pedido do usuario.

   Duas coisas juntas: o dourado clareia e um anel sai da borda e se
   dissolve. O anel sozinho e discreto demais para quem pediu "piscar"; o
   clareamento sozinho le como a tela mudando de brilho.

   Nao e liga-desliga de opacidade. Num botao aquilo le como defeito e apaga
   o texto meio segundo a cada volta.

   1,7s por volta, e nao mais rapido: acima de tres piscadas por segundo a
   WCAG 2.3.1 trata como risco de convulsao. Aqui e uma a cada 1,7s.

   A tinta nunca muda, e o fundo so vai de --gold-strong a --gold-pico, que
   fazem 7,60:1 e 9,14:1 com ela. Clarear melhora a leitura, entao nao
   existe quadro em que o texto fique pior. */
@keyframes cta-pisca {
  0%, 100% {
    background-color: var(--gold-strong);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .38),
      0 12px 26px rgba(0, 0, 0, .34),
      0 0 0 0 rgba(231, 192, 109, .55);
  }
  50% {
    background-color: var(--gold-pico);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .46),
      0 12px 26px rgba(0, 0, 0, .34),
      0 0 0 16px rgba(231, 192, 109, 0);
  }
}

/* Quem pediu menos movimento no sistema recebe o botao parado, no dourado
   de repouso. Ele continua dourado, continua grande, continua obvio. */
@media (prefers-reduced-motion: reduce) {
  .hero-cta { animation: none; }
}

.hero-exemplos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  margin: 14px auto 0;
  color: var(--ink-on-wine);
  opacity: .8;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  text-underline-offset: .28em;
}

.hero-exemplos:hover { opacity: 1; text-decoration: underline; }

/* A prova social ganhou rostos em 27/08/2026, a pedido do usuario e no
   modelo do concorrente. Os quatro sao os mesmos dos depoimentos.

   Fica registrado, porque o PRODUCT.md registra: sao pessoas que nao
   existem, e la esta escrito que sairiam antes de operar. Quando entrarem
   rostos de clientes de verdade, so os arquivos mudam. */
.hero-proofs {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-body);
  color: var(--ink-on-wine);
}

/* A sobreposicao e o que faz quatro retratos lerem como "um grupo" em vez
   de "quatro fotos". O anel claro e o que os separa: encostados sem anel
   viram uma mancha so sobre fundo escuro. */
.hero-avatares {
  display: inline-flex;
  flex: none;
}

.hero-avatares img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(250, 247, 241, .92);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .40);
}

.hero-avatares img + img { margin-left: -12px; }

/* Texto a esquerda dentro do bloco, e nao centralizado: sao duas linhas de
   comprimento diferente, e centradas elas ficariam com as duas bordas
   serrilhadas ao lado de uma fileira de circulos, que e reta. */
.hero-proofs-texto {
  display: grid;
  gap: 1px;
  text-align: left;
  min-width: 0;
}

/* nowrap nas duas linhas: sobrando pouca largura ao lado dos retratos, o
   navegador quebrava "pessoas emocionadas" para baixo e o bloco virava
   quatro linhas tortas do lado de uma fileira reta de circulos. */
.hero-proofs-contagem {
  font-size: clamp(12px, 3.5vw, 14px);
  font-weight: 500;
  white-space: nowrap;
}

.hero-proofs-contagem strong { font-weight: 800; }

.hero-proofs-nota {
  font-size: clamp(11px, 3.1vw, 12.5px);
  font-weight: 500;
  opacity: .82;
  white-space: nowrap;
}

/* Herda o creme do .hero-proofs. Existe um ".proof-rating strong, .proof-line
   strong { color: var(--ink) }" mais abaixo, e sem esta linha algo escurece o
   strong e o numero some sobre o fundo escuro. Ja aconteceu uma vez hoje. */
.hero-proofs strong { color: inherit; }

.hero-proofs .proof-stars {
  color: var(--gold-strong);
  letter-spacing: .08em;
  opacity: 1;
}

@media (min-width: 600px) {
  .hero {
    min-height: 0;
    padding-block: var(--sp-16);
    /* A foto tem 600px e aqui ela estica para mais do que o dobro, entao
       fica macia. Escurecer mais faz isso ler como atmosfera em vez de
       imagem de baixa resolucao. Trocar por um arquivo maior custaria
       bytes numa pagina cujo FCP ja e o problema. */
    background:
      linear-gradient(180deg,
        rgba(28, 18, 12, .70) 0%,
        rgba(24, 32, 30, .92) 45%,
        rgba(24, 44, 43, .97) 80%,
        var(--wine-deep) 100%),
      url("../assets/capas/testemunho.jpg") center 38% / cover no-repeat,
      var(--wine-deep);
  }
  .hero-selo   { font-size: 14px; }
  .hero h1     { max-width: 18ch; font-size: clamp(52px, 6.4vw, 74px); }
  .hero-linha  { font-size: 20px; }
  .hero-bullets { width: min(100%, 30rem); }
  .hero-bullets li { font-size: 15px; }
  .hero-cta    { width: auto; min-width: 22rem; font-size: 21px; }
  .hero-exemplos { font-size: 15px; }
  .hero-proofs { font-size: 14px; }
}

/* break-word, não anywhere: anywhere parte a palavra no meio da letra mesmo
   havendo espaço adiante, e em 320px isso fatiava "personalizadas". */
.hero h1,
.hero .lead,
.section-head h2,
.section-head .lead { overflow-wrap: break-word; }

.hero-clara-preview.exemplo {
  width: min(100%, 440px);
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px 12px;
  margin: var(--sp-4) auto var(--sp-5);
  padding: 14px;
  border: 1px solid rgba(201, 154, 62, .42);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 253, 248, .96), rgba(255, 253, 248, .76)),
    var(--surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .72),
    0 14px 30px rgba(36, 59, 58, .11);
  overflow: hidden;
  text-align: left;
}

.hero-clara-preview .player-btn {
  width: 44px;
  height: 44px;
  margin-top: 2px;
  background: linear-gradient(180deg, var(--gold-strong), var(--gold));
  color: var(--green);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    0 8px 16px rgba(36, 59, 58, .14);
}

.hero-clara-preview .player-btn:hover {
  background: linear-gradient(180deg, #E6C06D, var(--gold-strong));
}

.hero-clara-texto {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.hero-clara-label {
  color: var(--gold-ink);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.1;
  text-transform: uppercase;
}

.hero-clara-texto strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.05;
}

.hero-clara-cta {
  color: var(--ink-muted);
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.25;
}

.hero-clara-tempo {
  color: var(--ink-muted);
  align-self: center;
  font-size: .82rem;
  white-space: nowrap;
}

.hero-clara-caption {
  grid-column: 1 / -1;
  overflow: hidden;
  padding-top: var(--sp-2);
  border-top: 1px solid rgba(227, 216, 199, .72);
  color: var(--ink-muted);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.hero-clara-caption span {
  display: inline-block;
  min-width: max-content;
  transform: translateX(0);
}

.hero-clara-preview.is-playing .hero-clara-caption span {
  animation: clara-caption-scroll 15s linear infinite;
}

@keyframes clara-caption-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-clara-preview.is-playing .hero-clara-caption span { animation: none; }
}

.hero-media {
  width: min(100%, 520px);
  margin: 0 auto var(--sp-4);
}

@media (max-width: 599px) {
  .hero { padding: 14px 0 20px; }

  .hero .lead {
    max-width: 32ch;
    margin-inline: auto;
    font-size: 1rem;
    line-height: 1.48;
  }

  .hero-clara-preview.exemplo {
    grid-template-columns: 40px minmax(0, 1fr);
    width: 100%;
    max-width: min(318px, calc(100vw - 32px));
    margin: 10px auto 14px;
    padding: 11px 12px;
    border-radius: 16px;
  }

  .hero-clara-preview .player-btn {
    width: 40px;
    height: 40px;
    margin-top: 1px;
  }

  .hero-clara-label { font-size: .64rem; }

  .hero-clara-texto strong {
    font-size: 1rem;
    line-height: 1;
  }

  .hero-clara-cta {
    font-size: .8rem;
    line-height: 1.16;
  }

  .hero-clara-tempo {
    grid-column: 2;
    justify-self: start;
    max-width: 100%;
    margin-top: -2px;
    overflow: hidden;
    font-size: .8rem;
  }

  .hero-clara-caption { display: none; }

  .hero-clara-preview.is-playing .hero-clara-caption { display: block; }

  /* Este bloco e do hero antigo e vem DEPOIS da regra principal do botao,
     entao ele vencia por ordem. O  daqui segurava o
     botao em 12,48px enquanto a regra la em cima pedia 20px: cada aumento
     que eu escrevi hoje morreu aqui, sem erro nenhum.

     Sobra so a altura minima. Tamanho e respiro do texto sao decididos na
     regra principal, num lugar so. */
  .hero-cta { min-height: 54px; }

  .hero-cta,
  .hero-media {
    max-width: calc(100vw - (var(--sp-4) * 2));
    margin-inline: auto;
  }

  .hero-media {
    max-width: min(350px, calc(100vw - (var(--sp-4) * 2)));
    margin-bottom: 16px;
  }

  .hero-destaque-verso {
    font-size: clamp(.84rem, 3.65vw, .94rem);
  }
}

.proof-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin: 0;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 253, 248, .52);
}

/* Mesma linha de prova, usada sob o título da seção de depoimentos. Estava
   como .eyebrow acima do h2, e com as estrelas escritas em ★ — um glifo fora
   do unicode-range das duas fontes carregadas, desenhado pelo sistema. */
.proof-rating-centro {
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--sp-3);
}

.stars {
  display: inline-flex;
  gap: var(--sp-1);
  color: var(--gold-ink);
}

.proof-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin: 0;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 253, 248, .52);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.proof-emoji {
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1;
}

.proof-stars {
  flex: 0 0 auto;
  font-size: 0.92rem;
  letter-spacing: .08em;
  line-height: 1;
}

@media (max-width: 480px) {
  .hero-proofs {
    max-width: calc(100vw - (var(--sp-4) * 2));
    margin-top: 13px;
    gap: 8px;
  }

  .proof-rating,
  .proof-line {
    max-width: 100%;
    padding: 2px 7px;
    font-size: .82rem;
    line-height: 1.25;
  }

  /* As duas linhas longas ficam em uma linha só e encolhem com a tela em vez
     de quebrar. Frase de prova partida no meio perde a força. */
  .proof-people,
  .proof-prazo {
    width: 100%;
    flex-wrap: nowrap;
    white-space: nowrap;
    font-size: clamp(.68rem, 3.12vw, .78rem);
    gap: 4px;
  }

  .proof-stars { font-size: .78rem; }
}

.proof-rating strong,
.proof-line strong,
.section-head h2,
.diferencial h3,
.depoimento strong,
.plano-titulo,
.plano-preco,
.risco-titulo,
.footer-nome { color: var(--ink); }

/* --- destaque da dobra ----------------------------------------------------
   O que ocupava esta coluna era um placeholder tracejado escrito "substituir
   por mídia real", com cerca de 470x352px, servido a tráfego pago. Foto não
   existe e o PRODUCT.md proíbe rosto inventado — mas o produto é som, e há
   seis canções reais em assets/audio/ cuja primeira aparição ficava a duas
   seções de rolagem daqui.

   Então a dobra toca. Um verso, grande, em Fraunces de peso leve sobre
   vinho, com o player logo abaixo: a prova chega antes do pedido. */
/* Descendente de .hero-media de propósito: o card leva também a classe
   .exemplo, para que o JS de reprodução o alcance sem tratamento especial, e
   .exemplo é declarado mais abaixo no arquivo. Com especificidade igual ele
   venceria o fundo daqui. */
.hero-media .hero-destaque {
  width: 100%;
  max-width: 100%;
  background:
    linear-gradient(145deg, rgba(255, 253, 248, .07), rgba(255, 253, 248, 0) 44%),
    radial-gradient(circle at 12% 0%, rgba(201, 154, 62, .18), transparent 34%),
    var(--green);
  border: 1px solid rgba(255, 253, 248, .65);
  border-radius: 18px;
  padding: 16px;
  color: var(--ink-on-wine);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 18px 42px rgba(36, 59, 58, .18);
  overflow: hidden;
}

.hero-destaque-rotulo {
  display: block;
  margin: 0 0 var(--sp-3);
  padding: 0 0 var(--sp-2);
  border-bottom: 1px solid rgba(232, 214, 170, .32);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-soft);
  text-wrap: balance;
}

.hero-destaque-verso {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  line-height: 1.2;
  margin: 0 0 var(--sp-4);
  color: rgba(255, 253, 248, .88);
  text-wrap: balance;
}

.hero-destaque-verso strong { color: inherit; }

.hero-destaque .player {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: var(--sp-2);
  align-items: center;
}

.hero-destaque .player-btn {
  width: 40px;
  height: 40px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 10px 20px rgba(0, 0, 0, .14);
}

.hero-destaque .player-track-rail { background: rgba(255, 253, 248, .22); }
.hero-destaque .player-track-fill { background: var(--gold); }
.hero-destaque .player-time {
  color: var(--ink-on-wine-muted);
  font-size: var(--text-sm);
}

.hero-destaque .hero-pulse {
  position: relative;
  height: 28px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  gap: 3px;
}

.hero-destaque .hero-pulse > span:not(.player-track-rail) {
  height: 3px;
  border-radius: var(--radius-pill);
  background: rgba(232, 214, 170, .62);
  transform-origin: center;
}

.hero-destaque .hero-pulse .player-track-rail {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}

.hero-destaque.is-playing .hero-pulse > span:not(.player-track-rail) {
  animation: heroPulse 900ms ease-in-out infinite;
}

.hero-destaque.is-playing .hero-pulse > span:nth-child(2) { animation-delay: 80ms; }
.hero-destaque.is-playing .hero-pulse > span:nth-child(3) { animation-delay: 160ms; }
.hero-destaque.is-playing .hero-pulse > span:nth-child(4) { animation-delay: 240ms; }
.hero-destaque.is-playing .hero-pulse > span:nth-child(5) { animation-delay: 120ms; }
.hero-destaque.is-playing .hero-pulse > span:nth-child(6) { animation-delay: 40ms; }
.hero-destaque.is-playing .hero-pulse > span:nth-child(7) { animation-delay: 200ms; }
.hero-destaque.is-playing .hero-pulse > span:nth-child(8) { animation-delay: 280ms; }
.hero-destaque.is-playing .hero-pulse > span:nth-child(9) { animation-delay: 160ms; }
.hero-destaque.is-playing .hero-pulse > span:nth-child(10) { animation-delay: 60ms; }
.hero-destaque.is-playing .hero-pulse > span:nth-child(11) { animation-delay: 220ms; }
.hero-destaque.is-playing .hero-pulse > span:nth-child(12) { animation-delay: 300ms; }

@keyframes heroPulse {
  0%, 100% { height: 3px; opacity: .56; }
  35% { height: 20px; opacity: 1; }
  62% { height: 8px; opacity: .82; }
}

@media (max-width: 480px) {
  .hero-media .hero-destaque {
    border-radius: 15px;
    padding: 8px 10px;
  }
  .hero-destaque-rotulo {
    margin-bottom: 6px;
    padding-bottom: 5px;
    font-size: .5rem;
    line-height: 1.18;
  }
  .hero-destaque-verso {
    max-width: 32ch;
    margin: 0 auto 6px;
    line-height: 1.12;
  }
  .hero-destaque .player {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 8px;
  }
  .hero-destaque .player-btn {
    width: 32px;
    height: 32px;
  }
  .hero-destaque .hero-pulse {
    height: 22px;
    gap: 2px;
  }
  .hero-destaque .player-time {
    grid-column: auto;
    justify-self: end;
    margin-top: 0;
    font-size: .76rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-destaque.is-playing .hero-pulse > span:not(.player-track-rail) {
    animation: none;
    height: 6px;
  }
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: minmax(0, 760px);
    align-items: center;
    justify-content: center;
    gap: var(--sp-12);
  }
  .hero-copy { justify-items: center; text-align: center; }
  .hero-copy > * { margin-inline: auto; }
  .hero-selo {
    margin-inline: auto;
    text-align: center;
  }
  .hero-cta { width: auto; }
  .hero-media .hero-destaque { padding: var(--sp-8); }
}

/* ==========================================================================
   CABEÇALHO DE SEÇÃO
   ========================================================================== */

.section-head { margin-bottom: var(--sp-8); }
.section-head h2 { margin-bottom: var(--sp-3); }
.section-head .lead { margin-inline: auto; }

/* ==========================================================================
   PARA QUEM VOCÊ QUER CRIAR
   ========================================================================== */

.para-quem-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}

/* Duas colunas em qualquer largura, inclusive no celular estreito. Numa coluna
   só, escolher "para quem" virava seis telas de rolagem até a última opção.

   Lado a lado num aparelho de 320px, cada card fica com cerca de 140px. O
   respiro e o botão foram dimensionados para uma coluna e comiam esse espaço:
   o play de 48px ocupava quase metade da capa. Encolhem só aqui. */
@media (max-width: 480px) {
  .para-quem-grid { gap: var(--sp-2); }
  .para-quem-card { padding: var(--sp-2); gap: var(--sp-2); }
  .para-quem-card .pq-play { width: 40px; height: 40px; }
}

@media (min-width: 700px) {
  .para-quem-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
}

.para-quem-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 16px 36px rgba(36, 59, 58, .10);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-enter),
              background   var(--dur-fast) var(--ease-enter);
}
.para-quem-card:hover { border-color: var(--wine); }

/* Tocando, não escolhido. Este card usava borda verde de 2px sobre
   --green-soft, que é exatamente a receita de .choice[aria-checked="true"]
   no formulário: o mesmo verde dizia "você selecionou" e "está tocando", e
   quem tocava num card achava ter escolhido um caminho. O vinho é a cor que
   os tokens já reservavam para música. */
.para-quem-card[aria-pressed="true"] {
  border-color: var(--wine);
  border-width: 2px;
  background: var(--wine-soft);
}

.pq-thumb {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}

.pq-capa {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* O botão de tocar fica sobre a foto. Vinho sobre capa clara se sustenta
   sozinho; a sombra escura só assenta o círculo sem escurecer a imagem. */
.pq-thumb .pq-play {
  box-shadow: 0 10px 24px rgba(36, 59, 58, .20);
}

.pq-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--green);
  box-shadow: var(--shadow-card);
}

.pq-nome { font-weight: 600; font-size: var(--text-base); }

.para-quem-card[aria-pressed="true"] .pq-play {
  background: var(--green);
  color: var(--ink-invert);
}

/* ==========================================================================
   EXEMPLOS REAIS
   ========================================================================== */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  margin-bottom: var(--sp-6);
}

/* Esta é a seção que carrega o vinho.

   O --wine estava declarado nos tokens como a cor de emoção e música e vivia
   em quatro lugares: a faixa de cima, o quadradinho do logo, a barra do
   player e o rodapé. Era um par de suportes de livro, e todo o miolo da
   página — seis cards, seis exemplos, três diferenciais, quatro depoimentos,
   dois planos, oito perguntas — era creme sobre creme com verde de ação.

   Ela é a candidata certa porque é a única prova real que o produto tem:
   seis canções que o sistema gerou de verdade. Dar a ela a única superfície
   escura da página é dar o pico visual ao que sustenta a venda. */
.sobre-vinho {
  background:
    radial-gradient(circle at 50% 0%, rgba(201, 154, 62, .16), transparent 34%),
    var(--green);
  color: var(--ink-on-wine);
}
.sobre-vinho h2 { color: var(--ink-on-wine); }
.sobre-vinho .lead { color: var(--ink-on-wine-muted); }
.sobre-vinho strong { color: var(--ink-on-wine); }

.filtro {
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-enter);
}
.filtro:hover { border-color: var(--green); }
.filtro.is-active {
  background: var(--green);
  border-color: var(--green);
  color: var(--ink-invert);
}

/* Sobre o vinho o dourado assume: 7.90:1 de borda e 7.93:1 do texto escuro
   sobre o preenchimento do estado ativo. */
.sobre-vinho .filtro {
  background: transparent;
  border-color: var(--gold);
  color: var(--ink-on-wine);
}
.sobre-vinho .filtro:hover { background: rgba(255, 253, 248, .08); }
.sobre-vinho .filtro.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

.exemplos { display: grid; gap: var(--sp-3); }

@media (min-width: 800px) {
  .exemplos { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
}

/* Cards sobre vinho não se separam por superfície: --wine contra
   --wine-deep dá 1.27:1. Quem delimita é a borda dourada. */
.exemplo {
  min-width: 0;
  background: rgba(255, 253, 248, .08);
  border: 1px solid rgba(255, 253, 248, .14);
  border-radius: 18px;
  padding: 18px;
  box-shadow: none;
}

.exemplo-topo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
}

.exemplo-cat {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
}

.exemplo-para { font-size: var(--text-sm); color: var(--ink-on-wine-muted); }

/* Fraunces em peso 400, declarado. Herdando do body ele caía em 400 também,
   mas a fonte era carregada só na faixa 600..800 e o navegador prendia tudo
   em semibold: todo verso da página saía com peso de título. */
.exemplo-trecho {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.45;
  margin-bottom: var(--sp-4);
  color: var(--ink-on-wine);
  text-wrap: pretty;
}

.exemplos-vazio { text-align: center; color: var(--ink-on-wine-muted); }

/* ==========================================================================
   DIFERENCIAIS
   ========================================================================== */

.diferenciais {
  display: grid;
  gap: var(--sp-3);
  max-width: 880px;
  margin-inline: auto;
}
.diferencial {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--sp-3);
  align-items: start;
  min-width: 0;
  padding: 18px;
  text-align: left;
}

/* São três. A grade era de quatro colunas de quando havia quatro cards, e
   com três sobrava uma coluna vazia à direita. */
@media (min-width: 800px) {
  .diferenciais {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }

  .diferencial {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
    text-align: center;
  }
}

/* Os três ícones desta fileira eram dois emoji de 28px desenhados pelo
   sistema operacional ao lado de um SVG de 40px, o que dava três pesos
   ópticos diferentes na mesma linha — e emoji na interface é justamente o
   que o comentário no topo do index.html proíbe. Agora são três SVG do
   mesmo conjunto, no mesmo traço e na mesma caixa. */
.dif-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--gold-ink);
}
.dif-icone > svg { width: 24px; height: 24px; }

@media (min-width: 800px) {
  .dif-icone { margin-inline: auto; }
}

/* A bandeira mora na mesma caixa de 32px que os outros dois. Ela era o único
   elemento saturado em três telas de rolagem e vinha 8px mais alta que os
   vizinhos, o que puxava o olho para o item do meio da fileira sem razão. */
.brasil-flag { border-radius: 3px; }
.diferencial h3 { margin: 0 0 var(--sp-1); }
.diferencial .text-muted {
  grid-column: 2;
  margin: 0;
}

@media (min-width: 800px) {
  .diferencial .text-muted { grid-column: auto; }
}

/* ==========================================================================
   DEPOIMENTOS
   ========================================================================== */

.depoimentos { display: grid; gap: var(--sp-4); }

@media (min-width: 700px) { .depoimentos { grid-template-columns: repeat(2, 1fr); } }

.depoimento { display: flex; flex-direction: column; gap: var(--sp-3); }

/* Peso 400 declarado: sem isto a Fraunces herda 400 do body, cai fora da
   faixa carregada e o navegador prende em 600. */
.depoimento blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.45;
}

.dep-autor {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}

.dep-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  object-fit: cover;
}

.dep-verificado {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-sm);
  color: var(--green);
}

/* ==========================================================================
   PREÇOS
   ========================================================================== */

.planos { display: grid; gap: var(--sp-4); }

@media (min-width: 800px) {
  .planos {
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
    max-width: 860px;
    margin-inline: auto;
  }
}

.plano {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  overflow: hidden;
}

.plano.card-featured {
  border-color: rgba(201, 154, 62, .7);
  background:
    linear-gradient(145deg, rgba(255, 253, 248, .42), rgba(255, 253, 248, 0) 28%),
    radial-gradient(circle at 50% 0%, rgba(201, 154, 62, .18), transparent 38%),
    var(--surface);
}

.plano.card-featured::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
  pointer-events: none;
}

.plano-badge { align-self: flex-start; }

.plano-titulo { font-size: var(--text-xl); }

.plano-subtitulo {
  margin: calc(var(--sp-2) * -1) 0 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

/* --text-2xl e não --text-3xl. Em 48px o preço era o maior tipo do
   documento, acima de qualquer h2 e empatado com o h1: a página se
   apresentava pelo preço numa oferta cujo princípio é ouvir antes de pagar.
   Continua sendo o elemento dominante do card, que é o seu lugar. */
.plano-preco {
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  margin: 0;
}

.card-featured .plano-preco {
  color: var(--green);
  font-size: clamp(2.1rem, 8vw, 2.75rem);
}

.plano-nota { margin: 0; font-size: var(--text-sm); color: var(--ink-muted); }

/* "Tudo da outra oferta, mais:" é a única linha do card sem tique verde ao
   lado, porque ela não é um item da lista: é o que introduz a lista. A
   serifada marca essa diferença antes de a frase ser lida. */
.plano-heranca {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-base);
  color: var(--ink-muted);
}

.plano-itens { display: grid; gap: var(--sp-2); margin-block: var(--sp-2); }

.plano-itens li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--text-base);
}
.plano-itens .ico { color: var(--green); margin-top: var(--sp-1); }

.plano-rodape {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-muted);
  text-align: center;
}

.risco {
  max-width: 620px;
  margin: var(--sp-8) auto 0;
  padding: var(--sp-6);
  background: var(--green-soft);
  border: 1px solid var(--green);
  border-radius: 18px;
  text-align: center;
}

.risco-titulo {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
}

.risco-texto { margin: 0; color: var(--ink); }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq {
  display: grid;
  gap: var(--sp-2);
}

/* --radius-card, não --radius-field: isto é um contêiner e não um campo, e
   era o único card da página com o raio de 10px dos inputs. A borda usa
   --border-strong porque o item inteiro envolve um <button>. */
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
}

.faq-pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  min-height: 56px;
  padding: var(--sp-4);
  background: none;
  border: none;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.faq-seta {
  color: var(--gold-ink);
  transition: transform var(--dur-base) var(--ease-enter);
}
.faq-pergunta[aria-expanded="true"] .faq-seta { transform: rotate(180deg); }

.faq-resposta {
  display: none;
  padding: 0 var(--sp-4) var(--sp-4);
  color: var(--ink-muted);
}
.faq-resposta.is-open { display: block; }

/* ==========================================================================
   CTA FINAL
   ========================================================================== */

/* O fechamento da página é a segunda superfície de vinho, e ele precisa
   disso: era a única seção sem teto de largura e sem fundo próprio, então o
   rodapé logo abaixo tinha mais presença visual que o momento em que a
   decisão é cobrada.

   O `max-width: none` que estava aqui tinha especificidade (0,2,0) e vencia
   tanto os 720px do container estreito quanto os 1120px do container: com
   `width: 100%` no botão, a pílula media 1.376px num monitor de 1440 e
   1.856px num de 1920. Uma pílula de mil pixels não se lê como botão. */
.cta-final {
  background:
    radial-gradient(circle at 50% 0%, rgba(201, 154, 62, .16), transparent 34%),
    var(--green);
  color: var(--ink-on-wine);
}
.cta-final h2 {
  max-width: 24ch;
  margin-inline: auto;
  color: var(--ink-on-wine);
}
.cta-final h2 strong,
.cta-final h2 em { color: var(--ink-on-wine); }
.cta-final-lead {
  margin: var(--sp-4) auto var(--sp-6);
  color: var(--ink-on-wine-muted);
}
.cta-final .btn {
  display: inline-flex;
  width: auto;
  min-width: 280px;
  max-width: 100%;
}

/* Sobre o vinho o verde some (1.81:1). O dourado preenche a 6.20:1 e leva
   texto escuro a 7.93:1 — o mesmo par já validado na faixa superior. */
.cta-final .btn-primary { color: var(--green); }

/* O flutuante do WhatsApp ocupa os mesmos 16px da direita que este botão.
   O rodapé já reservava espaço para ele; esta seção não reservava nada. */
@media (max-width: 599px) {
  .cta-final { padding-bottom: calc(var(--sp-12) + 88px); }
}

/* ==========================================================================
   CTA FIXO MOBILE
   ========================================================================== */

.landing-mobile-cta { display: none; }

@media (max-width: 699px) {
  .landing-mobile-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--z-float) - 1);
    display: block;
    padding: 10px var(--sp-4) calc(10px + env(safe-area-inset-bottom));
    background: rgba(250, 247, 241, .92);
    border-top: 1px solid rgba(227, 216, 199, .86);
    box-shadow: 0 -14px 34px rgba(36, 59, 58, .12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(100%);
    transition:
      opacity var(--dur-base) var(--ease-enter),
      transform var(--dur-base) var(--ease-enter),
      visibility var(--dur-base) var(--ease-enter);
  }

  .landing-mobile-cta.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .landing-mobile-cta .btn {
    max-width: 430px;
    margin-inline: auto;
  }

  body:has(#tela-landing.is-active .landing-mobile-cta.is-visible) .whatsapp-float {
    bottom: calc(88px + env(safe-area-inset-bottom));
  }

  /* Mesma regra para a barra da prévia, que também é fixa: sem isso o botão
     do WhatsApp pousa em cima do card da letra. */
  body:has(#previa-rodape:not(.hidden)) .whatsapp-float {
    bottom: calc(88px + env(safe-area-inset-bottom));
  }

}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
  background: var(--green);
  color: var(--ink-on-wine);
  padding-block: var(--sp-12);
  /* espaço para o botão flutuante do WhatsApp não cobrir os links */
  padding-bottom: calc(var(--sp-12) + 56px);
}

@media (max-width: 699px) {
  .site-footer { padding-bottom: calc(var(--sp-12) + 88px); }
}

.footer-inner { display: grid; gap: var(--sp-6); }

.footer-nome {
  margin: 0 0 var(--sp-1);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gold-soft);
}
.site-footer strong,
.footer-nome strong { color: inherit; }

.site-footer .text-muted { color: var(--ink-on-wine-muted); }

.footer-links,
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-4);
}

.footer-links a,
.footer-legal a {
  color: var(--ink-on-wine);
  text-decoration: none;
  font-size: var(--text-sm);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.footer-links a:hover,
.footer-legal a:hover { color: var(--gold); text-decoration: underline; }

.footer-legal a { color: var(--ink-on-wine-muted); }

.footer-copy { margin: 0; font-size: var(--text-sm); }

/* ==========================================================================
   PROVA DA DOBRA — o que ela escreveu, e o que aquilo virou

   Dois cards lado a lado. Ler os dois de uma vez é o argumento da página:
   qualquer gerador mostra um verso bonito, nenhum mostra de onde ele saiu.

   Compacto de propósito. A dobra precisa caber sem rolagem, então este bloco
   tem altura parecida com a do card único que ele substituiu.
   ========================================================================== */

.hero-media .hero-prova {
  width: 100%;
  max-width: 100%;
  display: grid;
  /* A historia ocupa mais largura que o player: ela tem paragrafo, o outro
     lado tem um anel e um relogio. Meio a meio faria o texto virar coluna
     estreita e crescer em altura, que e o que a dobra nao tem para dar. */
  grid-template-columns: 1.55fr 1fr;
  align-items: stretch;
  gap: 10px;
  background:
    linear-gradient(145deg, rgba(255, 253, 248, .07), rgba(255, 253, 248, 0) 44%),
    radial-gradient(circle at 12% 0%, rgba(201, 154, 62, .18), transparent 34%),
    var(--green);
  border: 1px solid rgba(255, 253, 248, .65);
  border-radius: 18px;
  padding: 12px;
  color: var(--ink-on-wine);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 18px 42px rgba(36, 59, 58, .18);
}

.hero-prova-lado {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 6px;
  text-align: left;
}

/* O traço entre os dois é o que faz a leitura ser "isto virou aquilo" em vez
   de dois cartões soltos. */
.hero-prova-cancao {
  padding-left: 10px;
  border-left: 1px solid rgba(232, 214, 170, .28);
  justify-items: center;
  align-content: center;
  text-align: center;
}

.hero-prova-rotulo {
  margin: 0;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

/* Fonte de paragrafo, nao de citacao em destaque: agora sao quatro frases e
   nao meia linha. Fraunces em corpo pequeno perde legibilidade. */
.hero-prova-historia {
  margin: 0;
  font-size: clamp(.72rem, 2.9vw, .82rem);
  line-height: 1.4;
  color: rgba(255, 253, 248, .9);
}

.hero-prova-play {
  position: relative;
  width: 46px;
  height: 46px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 10px 20px rgba(0, 0, 0, .14);
}

/* O anel é o mesmo objeto das telas de geração e prévia, reduzido: progresso
   desenhado por --pct, que js/landing.js atualiza junto com a barra. Um
   relógio só, nada para sincronizar. */
.hero-anel {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: conic-gradient(
    var(--gold) calc(var(--pct, 0) * 1%),
    rgba(255, 253, 248, .22) 0
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  pointer-events: none;
}

.hero-prova .player-time {
  color: var(--ink-on-wine-muted);
  font-size: .72rem;
}

/* Abaixo de 360px cada coluna ficaria com menos de 160px, e a história vira
   uma palavra por linha. Empilhar é mais honesto que espremer. */
@media (max-width: 359px) {
  .hero-media .hero-prova { grid-template-columns: 1fr; }
  .hero-prova-cancao {
    padding-left: 0;
    padding-top: 10px;
    border-left: 0;
    border-top: 1px solid rgba(232, 214, 170, .28);
  }
}