/* =====================================================================
   Explika · componentes visuais (dependem de tokens.css)
   Mobile first: tudo é desenhado para 375 px e cresce a partir daí.
   ===================================================================== */

/* ---------- base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  background: var(--fundo);
  color: var(--texto);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: var(--texto-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  color: var(--texto);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  font-weight: 700;
}

p { margin: 0; }
a { color: var(--primaria); }
::selection { background: var(--primaria); color: var(--primaria-texto); }

:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--primaria) 55%, transparent);
  outline-offset: 2px;
  border-radius: var(--raio-sm);
}

.container {
  width: 100%;
  max-width: var(--largura-pagina);
  margin: 0 auto;
  padding: 0 var(--e-4);
}
@media (min-width: 640px) { .container { padding: 0 var(--e-6); } }

/* ---------- marca-texto: a palavra que importa ---------- */
.marca-texto {
  background: linear-gradient(transparent 12%, var(--marca-texto) 12%, var(--marca-texto) 92%, transparent 92%);
  padding: 0 0.12em;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* gradiente de título, herdado do site */
.texto-gradiente {
  background: linear-gradient(135deg, var(--azul-600) 0%, var(--roxo-600) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- etiqueta mono (rótulos, horários, fonte do ato) ---------- */
.etiqueta {
  font-family: var(--fonte-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* faixa de etiqueta (selo estilo carimbo) */
.faixa {
  display: inline-block;
  font-family: var(--fonte-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--marca-tinta);
  padding: 6px 10px;
  border-radius: 3px;
  transform: rotate(-1.2deg);
}

/* ---------- selos (badges) ---------- */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--raio-pilula);
  font-size: var(--texto-xs);
  font-weight: 600;
  border: 1px solid var(--borda);
  background: var(--fundo-suave);
  color: var(--texto-medio);
  white-space: nowrap;
}
.selo-azul { background: var(--azul-50); border-color: var(--azul-100); color: var(--azul-700); }
.selo-prazo { background: var(--prazo-fundo); border-color: color-mix(in oklab, var(--prazo) 25%, transparent); color: var(--prazo); }
.selo-ok { background: var(--sucesso-fundo); border-color: color-mix(in oklab, var(--sucesso) 25%, transparent); color: var(--sucesso); }
.selo-alerta { background: var(--alerta-fundo); border-color: color-mix(in oklab, var(--alerta) 25%, transparent); color: var(--alerta); }
.ponto-vivo { width: 6px; height: 6px; border-radius: 50%; background: var(--sucesso); animation: pulsar 1.8s ease-in-out infinite; }
@keyframes pulsar { 50% { opacity: 0.35; } }

/* ---------- botões ---------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 44px;                       /* alvo de toque */
  padding: 0 var(--e-5);
  border-radius: var(--raio);
  border: 1px solid transparent;
  font: inherit;
  font-size: var(--texto-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duracao) var(--curva), transform var(--duracao) var(--curva), box-shadow var(--duracao) var(--curva), border-color var(--duracao);
  white-space: nowrap;
}
.botao-primario { background: var(--primaria); color: var(--primaria-texto); box-shadow: var(--sombra-primaria); }
.botao-primario:hover { background: var(--primaria-hover); transform: translateY(-1px); }
.botao-secundario { background: var(--cartao); color: var(--texto); border-color: var(--borda); }
.botao-secundario:hover { border-color: var(--borda-forte); }
.botao-fantasma { background: transparent; color: var(--texto-medio); }
.botao-fantasma:hover { color: var(--texto); }
.botao:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ---------- campo e formulário de inscrição ---------- */
.campo {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--e-3);
  border-radius: var(--raio);
  border: 1px solid var(--borda-forte);
  background: var(--cartao);
  color: var(--texto);
  font: inherit;
  font-size: var(--texto-base);           /* 16 px: evita zoom no iPhone */
}
.campo:focus { border-color: var(--primaria); outline: 3px solid color-mix(in oklab, var(--primaria) 25%, transparent); }
.campo::placeholder { color: var(--texto-suave); }

.inscricao {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-2);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-lg);
  background: var(--cartao);
  box-shadow: var(--sombra-cartao);
  max-width: 30rem;
}
.inscricao .campo { border: 0; outline: none; background: transparent; }
@media (min-width: 480px) { .inscricao { flex-direction: row; align-items: center; } }
.inscricao-nota { font-size: var(--texto-xs); color: var(--texto-suave); margin-top: var(--e-2); }

/* ---------- aurora (fundo do topo) ---------- */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.aurora::before,
.aurora::after { content: ""; position: absolute; border-radius: 50%; filter: blur(80px); }
.aurora::before { width: 520px; height: 520px; top: -20%; left: -10%; background: var(--aurora-1); animation: deriva-1 16s ease-in-out infinite alternate; }
.aurora::after { width: 440px; height: 440px; top: 10%; right: -15%; background: var(--aurora-2); animation: deriva-2 22s ease-in-out infinite alternate; }
@keyframes deriva-1 { to { transform: translate(60px, 80px) scale(1.1); } }
@keyframes deriva-2 { to { transform: translate(-80px, 40px) scale(0.95); } }

/* ---------- mural de ruído (o Diário Oficial inteiro) ---------- */
.mural {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--e-2);
  max-height: 22rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.mural-item {
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--cartao);
  font-size: var(--texto-xs);
  color: var(--texto-medio);
  line-height: 1.35;
}
.mural-item .etiqueta { display: block; margin-bottom: 2px; font-size: 0.625rem; }
.mural-item.ruido { opacity: 0.45; text-decoration: line-through; text-decoration-color: var(--borda-forte); }
.mural-item.relevante { border-color: var(--marca-verde); box-shadow: 0 0 0 2px var(--marca-texto); color: var(--texto); }

/* ---------- cartão do ato (o produto) ---------- */
.ato {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio-xl);
  box-shadow: var(--sombra-cartao);
  padding: var(--e-5);
  display: grid;
  gap: var(--e-4);
}
.ato-topo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.ato-titulo { font-size: var(--texto-lg); line-height: 1.3; letter-spacing: -0.01em; }
.ato-campos { display: grid; gap: var(--e-3); margin: 0; }
.ato-campo { display: grid; gap: 2px; }
.ato-campo dt { font-family: var(--fonte-mono); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-suave); }
.ato-campo dd { margin: 0; color: var(--texto); font-size: var(--texto-sm); }
.ato-campo.prazo dd { font-weight: 700; color: var(--prazo); }
.ato-rodape { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--e-2); padding-top: var(--e-3); border-top: 1px dashed var(--borda); font-size: var(--texto-xs); color: var(--texto-suave); }
.ato-rodape a { font-weight: 600; text-decoration: none; }
.ato-rodape a:hover { text-decoration: underline; }
@media (min-width: 640px) {
  .ato-campos { grid-template-columns: 1fr 1fr; }
}

/* ---------- aviso ---------- */
.aviso {
  padding: var(--e-3) var(--e-4);
  border-radius: var(--raio);
  border: 1px solid var(--borda);
  background: var(--fundo-suave);
  font-size: var(--texto-sm);
  color: var(--texto-medio);
}
.aviso-alerta { background: var(--alerta-fundo); border-color: color-mix(in oklab, var(--alerta) 25%, transparent); color: var(--alerta); }

@media (prefers-reduced-motion: reduce) {
  .aurora::before, .aurora::after, .ponto-vivo { animation: none; }
  html { scroll-behavior: auto; }
  .botao { transition: none; }
}

/* ferramentas gratuitas do site principal (cross-link) */
.ferramentas { display: grid; gap: var(--e-3); }
@media (min-width: 700px) { .ferramentas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ferramentas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ferramenta { display: grid; gap: var(--e-1); background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio-xl); padding: var(--e-4) var(--e-5); text-decoration: none; color: inherit; transition: border-color var(--duracao), transform var(--duracao); min-width: 0; }
.ferramenta:hover { border-color: var(--borda-forte); transform: translateY(-2px); }
.ferramenta b { color: var(--texto); }
.ferramenta span { color: var(--texto-medio); font-size: var(--texto-sm); }