/* ============================================================================
   Flash Back / AFLAB — ajustes sobre o template Brivon.
   Carregado DEPOIS de styles.css. Só o que muda: marca, logo e detalhes.
   ============================================================================ */

/* ---------- Marca no cabeçalho e no rodapé ---------- */
.brand-logo {
  display: block;
  height: 54px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}
.brand {
  gap: 12px;
}
.footer-brand .brand-logo { height: 84px; max-width: 240px; }

/* A marca quadrada de tira do template sai de cena. */
.brand-mark { display: none !important; }

/* ---------- Grade de edições (a .work-grid do template é 12 colunas) ---------- */
.edicoes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-5);
}
@media (min-width: 1100px) {
  .edicoes-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Logo grande (herói e faixas) ---------- */
.logo-bloco {
  display: block;
  width: min(520px, 78vw);
  height: auto;
  margin: 0 0 var(--space-6);
}
.logo-bloco--centro { margin-inline: auto; }

/* ---------- Cartão de edição (grade de eventos) ---------- */
.edicao-card {
  display: block;
  text-decoration: none;
  border: 1px solid var(--rule);
  background: var(--bg-card);
  overflow: hidden;
  transition: border-color .25s, transform .25s;
}
.edicao-card:hover {
  border-color: var(--rule-lime);
  transform: translateY(-2px);
}
.edicao-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.edicao-info { padding: var(--space-4) var(--space-5) var(--space-5); }
.edicao-info h3 {
  font-size: var(--text-xl);
  letter-spacing: -.02em;
  margin-bottom: var(--space-2);
}
.edicao-info .ano {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary);
}
.edicao-info p { color: var(--fg-soft); font-size: var(--text-sm); }

/* ---------- Galeria por edição ---------- */
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}
.galeria a {
  display: block;
  overflow: hidden;
  border: 1px solid var(--rule);
}
.galeria img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .4s ease;
}
.galeria a:hover img { transform: scale(1.04); }

/* Foto larga de destaque dentro de uma edição. */
.foto-larga {
  display: block;
  width: 100%;
  border: 1px solid var(--rule);
  margin-bottom: var(--space-6);
}

/* ---------- Depoimentos ---------- */
.depoimentos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
}
.depoimento {
  border: 1px solid var(--rule);
  border-inline-start: 3px solid var(--primary);
  background: var(--bg-card);
  padding: var(--space-5);
}
.depoimento p {
  font-size: var(--text-base);
  color: var(--fg);
  margin-bottom: var(--space-4);
}
.depoimento cite {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-mute);
  font-style: normal;
}

/* ---------- Ícones de missão / visão / valores ---------- */
.trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
}
.trio-item {
  border: 1px solid var(--rule);
  background: var(--bg-card);
  padding: var(--space-5);
}
.trio-item img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  margin-bottom: var(--space-3);
  /* os ícones vieram escuros sobre branco; inverte para o fundo escuro */
  filter: invert(1) brightness(1.6);
}
.trio-item h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.trio-item p { color: var(--fg-soft); font-size: var(--text-sm); }

/* ---------- Ficha de contato ---------- */
.ficha-contato {
  display: grid;
  gap: var(--space-4);
}
.ficha-contato dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 2px;
}
.ficha-contato dd { color: var(--fg); font-size: var(--text-base); }

/* ---------- Formulário ---------- */
.form-campo { display: grid; gap: 6px; margin-bottom: var(--space-4); }
.form-campo label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.form-campo input,
.form-campo select,
.form-campo textarea {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--rule-strong);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: 13px 14px;
}
.form-campo input:focus,
.form-campo select:focus,
.form-campo textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
}
.form-campo textarea { min-height: 140px; resize: vertical; }

/* ---------- Faixa de aviso de dados ---------- */
.nota-dados {
  border: 1px solid var(--rule);
  border-inline-start: 3px solid var(--cobalt);
  background: var(--bg-card);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  color: var(--fg-soft);
}
.nota-dados b { color: var(--fg); }

/* ---------- Perguntas frequentes ---------- */
.faq-item {
  border-top: 1px solid var(--rule-strong);
  padding: var(--space-5) 0;
}
.faq-item:first-of-type { border-top: 0; padding-top: 0; }
.faq-item h3 {
  font-size: var(--text-xl);
  letter-spacing: -.02em;
  margin-bottom: var(--space-2);
}
.faq-item p { color: var(--fg-soft); font-size: var(--text-base); }
.faq-item a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Bloco do formulário ---------- */
.form-contato { max-width: 560px; }

/* ---------- Ajuste fino no herói ---------- */
.hero-logo-linha {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

@media (max-width: 720px) {
  .brand-logo { height: 36px; max-width: 150px; }
  .footer-brand .brand-logo { height: 60px; }
  .logo-bloco { width: min(360px, 84vw); }
}