/* ==========================================================
   IDENTIDADE VISUAL — Encontro Nacional de Empreendedoras Negras
   (guia "Diaspora Black | Visual ID", out/2026, págs. 14–23)
   Carregado DEPOIS de identidade.css e estrutura.css, só nas páginas
   do Encontro. Base marrom e creme da marca mãe; o roxo dá identidade
   própria; laranja, verde e amarelo trazem ritmo à trama.
   ========================================================== */

:root {
  --roxo: #834DFB;
  --laranja: #DD791B;
  --verde: #3B9D24;
  --amarelo: #F8CB00;

  --cor-secundaria: var(--roxo);   /* rótulos e palavra em destaque */
  --cor-ponto: var(--laranja);     /* ponto final dos títulos */
  --cor-acento: var(--amarelo);    /* painéis e linhas */
}

/* Logotipo: trama + nome em três linhas */
.logo-encontro { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--cor-texto); font-family: var(--fonte-titulo); text-transform: uppercase; font-size: 1.05rem; line-height: .95; }
.logo-encontro img { width: 40px; height: 40px; flex: none; }
.rodape .logo-encontro { color: var(--cor-texto-invertido); font-size: 1.3rem; }
.rodape .logo-encontro img { width: 56px; height: 56px; }

/* Títulos: o guia usa a frase inteira em roxo ou laranja */
.titulo-roxo { color: var(--roxo); }
.titulo-laranja { color: var(--laranja); }

/* Hero com a trama grande */
.hero-trama { width: 100%; max-width: 340px; justify-self: end; }
.hero-info span + span { background: var(--roxo); color: var(--creme); }

/* Ícones dos cards percorrem as cores da trama */
.card .card-icone { background: var(--roxo); color: var(--creme); }
.card:nth-child(4n+2) .card-icone { background: var(--laranja); color: var(--marrom); }
.card:nth-child(4n+3) .card-icone { background: var(--verde); color: var(--creme); }
.card:nth-child(4n+4) .card-icone { background: var(--amarelo); color: var(--marrom); }

/* Painel amarelo com título roxo (pág. 22 do guia) */
.painel-amarelo { background: var(--amarelo); color: var(--marrom); }
.painel-amarelo .rotulo { color: var(--marrom); }
.painel-amarelo h2, .painel-amarelo h3 { color: var(--roxo); }
.painel-amarelo .intro { color: var(--marrom); }
.painel-amarelo .subtitulo { color: var(--marrom); } /* roxo pequeno sobre amarelo tem pouco contraste */
.painel-amarelo .botao--contorno { border-color: var(--marrom); color: var(--marrom); }

.chamada-encontro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 72px); align-items: start; }
.bloco-acao { background: var(--creme); border-radius: var(--raio); padding: clamp(24px, 4vw, 36px); }
.bloco-acao + .bloco-acao { margin-top: 20px; }
.bloco-acao h3 { color: var(--roxo); margin-bottom: 8px; }
.bloco-acao .botoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.botao[type="button"] { font-family: inherit; font-size: inherit; cursor: pointer; }
.aviso-copiado { display: block; margin-top: 10px; font-size: .9rem; font-weight: 600; color: var(--verde); }
.info-pratica { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.info-pratica li { display: flex; gap: 10px; }
.info-pratica strong { min-width: 72px; }

/* Destaque e etiquetas da programação */
.agenda-item--destaque .agenda-hora { color: var(--amarelo); }
.agenda-tag { background: var(--roxo); }
.agenda-local::before { background: var(--laranja); }
.agenda-paralela { border-top-color: var(--roxo); }

/* Seleção nos formulários */
.opcao:has(input:checked) { border-color: var(--roxo); background: color-mix(in srgb, var(--roxo) 10%, #fff); }
.opcao input, .checagem input { accent-color: var(--roxo); }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--roxo); outline-color: color-mix(in srgb, var(--roxo) 35%, transparent); }

@media (max-width: 900px) {
  .chamada-encontro { grid-template-columns: 1fr; }
  .hero-trama { max-width: 120px; justify-self: start; order: -1; }
}