/* laminas.css — lâminas coloridas com recorte arredondado + tira em movimento.
   Aprovado em 09/09/2026. Ver design.md §18 e §19. */

/* ---------- A lâmina ---------- */

.lamina {
  position: relative;
  background: var(--fundo);
  color: var(--texto);
  border-radius: var(--lamina-raio);
  margin-inline: var(--lamina-recuo);
  overflow: hidden;
}

/* Lâminas escuras ganham contorno para o recorte arredondado aparecer
   sobre o fundo preto da página. As claras não precisam. */
.lamina--preta,
.lamina--grafite {
  border: 1px solid var(--borda-sutil);
}

.lamina--preta   { --fundo: var(--preto); }
.lamina--grafite { --fundo: var(--grafite); }

.lamina--branca {
  --fundo:       var(--branco-lamina);
  --texto-forte: var(--preto-texto);
  --texto:       var(--cinza-escuro);
  --texto-fraco: var(--cinza-medio);
  --acento:      var(--verde-escuro);  /* neon puro daria 1.06:1; este dá 5.11:1 */
  --borda:       rgba(0, 0, 0, 0.12);
  --borda-forte: rgba(0, 0, 0, 0.22);
}

.lamina--neon {
  --fundo:       var(--neon);
  --texto-forte: var(--preto-texto);
  --texto:       var(--neon-texto);
  --texto-fraco: var(--neon-fraco);
  --acento:      var(--preto-texto);
  --borda:       rgba(0, 0, 0, 0.18);
  --borda-forte: rgba(0, 0, 0, 0.3);
}

/* Cards, janelas de vídeo e comparadores são SEMPRE ilhas escuras, em qualquer
   lâmina. Mantém o vídeo protegido e dá o aninhamento da referência. */
.lamina .card,
.lamina .janela-video,
.lamina .comparador,
.lamina .card-oferta {
  --texto-forte: var(--branco);
  --texto:       var(--cinza-texto);
  --texto-fraco: var(--cinza-fraco);
  --acento:      var(--neon);
  --borda:       var(--borda-sutil);
  --borda-forte: var(--linha);
  color: var(--texto);
}

/* Na lâmina clara, o eyebrow vira pílula neon preenchida: é o único jeito de o
   neon aparecer sem quebrar contraste (neon sobre branco = 1.06:1). */
.lamina--branca .eyebrow {
  background: var(--neon);
  border-color: var(--preto-texto);
  color: var(--preto-texto);
}
/* Na lâmina neon, inverte: preto preenchido com texto neon. Neon sobre neon
   dependeria só do contorno para existir. */
.lamina--neon .eyebrow {
  background: var(--preto-texto);
  border-color: var(--preto-texto);
  color: var(--neon);
}

/* CTA dentro de lâmina neon precisa inverter: neon sobre neon some. */
.lamina--neon .btn--principal {
  background: var(--preto-texto);
  color: var(--neon);
}
/* ...mas dentro das ilhas escuras ele volta ao normal: um botão preto sobre
   card escuro quase desaparece. */
.lamina--neon .card .btn--principal,
.lamina--neon .card-oferta .btn--principal {
  background: var(--neon);
  color: var(--preto);
}
.lamina--neon .btn--principal:active { background: #000; }
.lamina--neon .btn--secundario {
  border-color: rgba(0, 0, 0, 0.35);
  color: var(--preto-texto);
}
.lamina--neon .btn--secundario:hover {
  border-color: var(--preto-texto);
  background: rgba(0, 0, 0, 0.06);
}

.lamina--branca .btn--secundario {
  border-color: rgba(0, 0, 0, 0.25);
  color: var(--preto-texto);
}
.lamina--branca .btn--secundario:hover {
  border-color: var(--preto-texto);
  background: rgba(0, 0, 0, 0.05);
}

/* Foco visível precisa funcionar nas lâminas claras também */
.lamina--branca :focus-visible,
.lamina--neon :focus-visible {
  outline-color: var(--preto-texto);
}

/* Placeholder [A DEFINIR] legível em qualquer lâmina */
.lamina--branca .a-definir,
.lamina--neon .a-definir {
  color: var(--preto-texto);
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.35);
}
/* ...mas dentro das ilhas escuras ele volta ao neon. Sem isto, um placeholder
   dentro de card escuro sobre lâmina clara fica preto no preto (1.1:1). */
.lamina .card .a-definir,
.lamina .janela-video .a-definir,
.lamina .comparador .a-definir,
.lamina .modulo .a-definir,
.lamina .card-oferta .a-definir {
  color: var(--neon);
  background: rgba(218, 253, 85, 0.06);
  border-color: var(--neon-40);
}

@media (max-width: 599px) {
  :root { --lamina-raio: 28px; --lamina-recuo: 8px; }
}

/* ---------- Tira em movimento ---------- */

.tira {
  position: relative;
  overflow: hidden;
  padding-block: var(--e-8);
  /* a rotação vaza lateralmente; o overflow acima segura a rolagem horizontal */
}

.tira__faixa {
  transform: rotate(var(--tira-angulo));
  width: 116%;
  margin-left: -8%;
  /* Grafite, não preto: sobre o fundo preto da página a faixa precisa ter
     corpo próprio, senão sobram só as pílulas soltas no ar. */
  background: var(--grafite);
  border-top: 1px solid var(--borda-sutil);
  border-bottom: 3px solid var(--neon);
  padding-block: var(--e-3);
  overflow: hidden;
}

.tira__trilho {
  display: flex;
  width: max-content;
  gap: var(--e-3);
  animation: correr 38s linear infinite;
}

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

.tira__item {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  flex-shrink: 0;
  padding: 8px 18px 8px 8px;
  border-radius: 999px;
  background: var(--branco-lamina);
  color: var(--preto-texto);
  font-family: var(--fonte-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Ritmo: um a cada três é neon, e dois tamanhos alternam — igual à referência,
   que varia o corpo das pílulas para a tira não ficar monótona. */
.tira__item:nth-child(3n) { background: var(--neon); }
.tira__item:nth-child(4n) { font-size: 13px; }

.tira__selo {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--preto-texto);
  color: var(--neon);
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}
.tira__item:nth-child(3n) .tira__selo {
  background: var(--preto-texto);
  color: var(--neon);
}

/* Acessibilidade: a exceção de movimento vale para o hover, não para quem
   pediu menos movimento (site.md §17). */
@media (prefers-reduced-motion: reduce) {
  .tira__trilho { animation: none; }
}

/* Respiro entre lâminas: o fundo preto da página aparece e o recorte
   arredondado fica legível. */
.lamina + .lamina { margin-top: var(--e-2); }