/* Camada 3: botoes.
 *
 * Componente compartilhado. Depende de `lv-tokens.css`.
 *
 * POR QUE SEPARADO DA HOME: `.lv-cta` e botao do sistema, nao da home. Hoje so
 * a home o usa, mas a faixa de fechamento ja o reaproveita, e a proxima pagina
 * vai querer o mesmo botao. Separar agora custa uma hora; separar depois custa
 * a migracao.
 *
 * A COR DO TEXTO MORA AQUI e nao em `style=`: estilo inline vence seletor de
 * classe, e foi assim que as duas versoes anteriores destes botoes ficaram com
 * o texto da mesma cor do preenchimento, parecendo vazios no hover.
 */

/* O BOTAO VAZADO QUE SE PREENCHE.
 *
 * 19px E NAO 16,5: `--lv-accent-strong` da 3,67:1 contra o branco, nos dois
 * sentidos. O piso da WCAG e 4,5:1 abaixo de 18,66px em negrito e cai para
 * 3,0:1 acima. E o tamanho que faz este par de cores passar nos dois estados
 * sem inventar cor nova fora da paleta. */
.lv-cta {
  position: relative; overflow: hidden; z-index: 0;
  /* `inline-flex` e nao `inline-block`: o rotulo do desenho e centrado nos dois
     eixos, e com `inline-block` a altura vinha da linha do texto. */
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 34px; border-radius: 999px;
  border: 3px solid var(--lv-accent-strong); background: transparent;
  color: var(--lv-accent-strong); text-decoration: none;
  font-family: var(--lv-font-display); font-weight: 800; font-size: 19px;
  text-transform: uppercase; letter-spacing: .045em;
  cursor: pointer;   /* `<a>` sem `href` visivel de fora nao mostra mao em
                        todo navegador; e o CTA ja foi `<button>` por um tempo */
  /* A sombra em repouso e do desenho: separa o botao do fundo claro do hero
     sem precisar de preenchimento. */
  box-shadow: 0 8px 28px rgba(220, 140, 219, .20);
  transition: color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.lv-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--lv-accent-strong);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .38s cubic-bezier(.2,.7,.3,1);
}
.lv-cta:hover::before { transform: scaleX(1); }
.lv-cta:hover {
  color: #fff; box-shadow: 0 12px 32px rgba(181,103,199,.42); transform: translateY(-3px);
}

/* NO CELULAR O ROTULO NAO CABE NUMA LINHA.
   "COMECE A SUA LISTA AGORA!" mede 307px em 19px com o `letter-spacing` de
   .045em. A 390px de tela sobram 326px para o botao inteiro, e 68 deles ja sao
   o `padding` e 6 a borda: o texto quebrava em duas linhas e o botao virava um
   retangulo alto.

   `clamp` e nao um tamanho fixo: entre 320px e 390px de tela a diferenca de
   largura util e de 70px, e um valor unico ou nao cabe no menor ou fica pequeno
   demais no maior. O teto de 19px mantem o desktop exatamente como estava --
   4.2vw so fica abaixo dele em telas de menos de 452px.

   O `letter-spacing` tambem cede: em 25 caracteres ele sozinho custa 21px, e
   o `padding` lateral cai de 34 para 20: com 24 o rotulo ainda quebrava a
   320px, por oito pixels. */
@media (max-width: 767px) {
  .lv-cta {
    font-size: clamp(13.5px, 4.2vw, 19px);
    letter-spacing: .02em;
    padding: 15px 20px;
  }
}

/* O MESMO BOTAO, SOBRE FUNDO CLARO DE DESTAQUE.
 *
 * Branco sobre --lv-ink da 17,06:1; no hover o preenchimento entra e o texto
 * vira escuro, 4,65:1 sobre #b567c7. */
.lv-cta-escuro {
  position: relative; overflow: hidden; z-index: 0;
  display: inline-block; background: var(--lv-ink); color: #fff;
  text-decoration: none; font-family: var(--lv-font-display); font-weight: 800;
  font-size: 17px; padding: 17px 46px; border-radius: 999px;
  /* `border: none` PARA O CASO DE ISTO VOLTAR A SER `<button>`. Hoje os dois
     CTA da home sao `<a>` -- a decisao ja foi invertida duas vezes --, e o
     `.lv-cta` acima declara a borda dele, por isso saia igual nos dois. Este
     nao declarava nenhuma, entao como botao herdava a de 2px do navegador.
     Medido lado a lado: 277x60 como `<a>`, 281x64 como `<button>`. */
  border: none;
  /* Botao nao vem com mao; como `<a href>` vinha do navegador. Aqui dentro, e
     nao numa regra agrupada no fim do arquivo: la ela ficaria depois do
     `@media` de 767px e a proxima propriedade acrescentada venceria o mobile
     em silencio, que e o caso que o CLAUDE.md descreve. */
  cursor: pointer;
  transition: color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.lv-cta-escuro::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--lv-accent-strong);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .38s cubic-bezier(.2,.7,.3,1);
}
.lv-cta-escuro:hover::before { transform: scaleX(1); }
.lv-cta-escuro:hover {
  color: var(--lv-ink); box-shadow: 0 12px 32px rgba(181,103,199,.42); transform: translateY(-3px);
}