/* ==========================================================================
   PEDRO TAQUES — COMPONENTES BASE
   Depende de tokens/colors.css + tokens/typography.css (importar antes deste).
   Escopo: landing page (voudetaques.com.br) e site oficial (pedrotaques.com.br).
   ========================================================================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- BOTÕES ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primario {
  background: var(--color-cta-primario);
  color: var(--pt-branco);
}
.btn--primario:hover { background: var(--color-cta-primario-hover); }

.btn--secundario {
  background: var(--pt-azul-marinho);
  color: var(--pt-branco);
}
.btn--secundario:hover { background: #200F5C; }

.btn--outline {
  background: transparent;
  color: var(--pt-azul-marinho);
  border: 2px solid var(--pt-azul-marinho);
}
.btn--outline:hover { background: var(--pt-azul-marinho); color: var(--pt-branco); }

/* ---------- BADGES / SELOS ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.badge--mt {
  background: var(--pt-verde);
  color: var(--pt-amarelo);
  border: 2px solid var(--pt-amarelo);
}
.badge--alerta {
  background: var(--pt-vermelho);
  color: var(--pt-branco);
}
.badge--novidade {
  background: var(--pt-amarelo);
  color: var(--pt-azul-marinho);
}

/* ---------- SEÇÃO INSTITUCIONAL (bloco de cor cheio, "liturgia do Senado") ---------- */
.section--institucional {
  background: var(--pt-azul-marinho);
  color: var(--pt-branco);
  padding: 96px 0;
}
.section--institucional h2 { color: var(--pt-amarelo); }

.section--verde {
  background: var(--pt-verde);
  color: var(--pt-branco);
  padding: 96px 0;
}

/* ---------- CARD DE DENÚNCIA / FISCALIZAÇÃO ---------- */
.card-denuncia {
  background: var(--pt-branco);
  border: 1px solid var(--color-border);
  border-left: 6px solid var(--pt-vermelho);
  border-radius: 4px;
  padding: 24px 28px;
}
.card-denuncia .eyebrow { color: var(--pt-vermelho); }

/* ---------- BLOCO "PROVA TAPEADA" (documento/print como evidência) ----------
   Inspirado nos elementos de fita/washi-tape do guide (04_Tapes.eps).
   Usar para exibir prints, ofícios, capturas de tela como prova. */
.prova {
  position: relative;
  display: inline-block;
  background: var(--pt-branco);
  padding: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transform: rotate(-1.5deg);
}
.prova::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 90px;
  height: 28px;
  background: var(--pt-amarelo);
  opacity: .85;
}
.prova img { display: block; max-width: 100%; }
.prova figcaption {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--pt-cinza-600);
  margin-top: 8px;
  text-align: center;
}

/* ---------- CITAÇÃO / DEPOIMENTO (inspirado nos balões de fala + molduras) ---------- */
.citacao {
  position: relative;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--pt-azul-marinho);
  padding: 0 0 0 28px;
  border-left: 6px solid var(--pt-amarelo);
  text-transform: none;
}
.citacao cite {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--pt-cinza-600);
  margin-top: 12px;
}

/* ---------- FAIXA DECORATIVA LATERAL (assinatura visual do guide) ----------
   Réplica do "trilho" de cor que aparece em toda página do guide de vídeo:
   blocos sólidos + arco/rainbow + listras diagonais + grade de bolinhas + selo estrela. */
.faixa-marca {
  --w: 64px;
  width: var(--w);
  min-height: 480px;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
}
.faixa-marca > span { display: block; }
.faixa-marca .bloco-arco   { background: var(--pt-azul-marinho); position: relative; overflow: hidden; }
.faixa-marca .bloco-verde  { background: var(--pt-verde); }
.faixa-marca .bloco-listras{
  background: repeating-linear-gradient(45deg, var(--pt-verde) 0 10px, #fff 10px 20px);
}
.faixa-marca .bloco-selo   {
  background: var(--pt-azul-marinho);
  display: flex; align-items: center; justify-content: center;
}
.faixa-marca .bloco-selo::after {
  content: "★";
  color: var(--pt-amarelo);
  background: var(--pt-verde);
  border-radius: 50%;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.faixa-marca .bloco-pontos {
  background: var(--pt-roxo-azulado);
  background-image: radial-gradient(var(--pt-verde) 3px, transparent 3.5px);
  background-size: 16px 16px;
  background-position: 8px 8px;
}

/* ---------- DIVISOR DE SEÇÃO ---------- */
.divisor {
  height: 2px;
  width: 64px;
  background: var(--pt-amarelo);
  border: none;
  margin: 24px 0;
}

/* ---------- GRID RESPONSIVO ---------- */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) {
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .section--institucional, .section--verde { padding: 56px 0; }
}