/* =====================================================================
   08-conteudo.css
   Publico, galeria, duvidas, aviso e chamada final
   Carregado pelo index.html na ordem dos arquivos — a ordem importa
   para a cascata, entao nao troque os <link> de lugar.
   ===================================================================== */

/* ---------------------------------------------------------------
   12. Público-alvo
   --------------------------------------------------------------- */
.publico {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
  list-style: none;
  margin: 0; padding: 0;
}
.publico li {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.35rem;
  border-radius: var(--raio-full);
  background: var(--branco);
  border: 1.5px solid var(--azul-100);
  color: var(--azul-800);
  font-weight: 700;
  font-size: .95rem;
  box-shadow: var(--sombra-sm);
  transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.publico li:hover { transform: translateY(-4px); border-color: var(--azul-400); box-shadow: var(--sombra); }
.publico svg { width: 18px; height: 18px; color: var(--azul-500); }

/* ---------------------------------------------------------------
   12b. Galeria do público
   --------------------------------------------------------------- */
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.galeria__item {
  position: relative;
  margin: 0;
  border-radius: var(--raio-lg) var(--raio-lg) var(--raio-lg) 3rem;
  overflow: hidden;
  box-shadow: var(--sombra);
  aspect-ratio: 4 / 5;
  isolation: isolate;
}
.galeria__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  transition: transform .9s cubic-bezier(.22,.61,.36,1);
}
.galeria__item:hover img { transform: scale(1.07); }
.galeria__item::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background: linear-gradient(to top, rgba(26,30,53,.88), transparent);
  pointer-events: none;
}
.galeria__item figcaption {
  position: absolute;
  left: 1.1rem; right: 1.1rem; bottom: 1.1rem;
  z-index: 1;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.galeria__nota {
  text-align: center;
  font-size: .88rem;
  color: var(--cinza-700);
  margin-top: .9rem;
}

/* ---------------------------------------------------------------
   13. FAQ
   --------------------------------------------------------------- */
.faq { max-width: 700px; margin-inline: auto; display: grid; gap: .85rem; }
.faq__item {
  border: 1.5px solid var(--cinza-200);
  border-radius: var(--raio);
  background: var(--branco);
  overflow: hidden;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.faq__item[open] { border-color: var(--azul-400); box-shadow: var(--sombra); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  font-weight: 700;
  color: var(--cinza-900);
  cursor: pointer;
  list-style: none;
  transition: color var(--transicao);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--azul-600); }
.faq__item summary::after {
  content: '';
  width: 11px; height: 11px;
  flex: none;
  border-right: 2.5px solid var(--azul-600);
  border-bottom: 2.5px solid var(--azul-600);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transicao);
}
.faq__item[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq__corpo { padding: 0 1.4rem 1.3rem; margin: 0; color: var(--cinza-700); }
.faq__item[open] .faq__corpo { animation: abre .3s ease; }
@keyframes abre {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------
   14. Aviso antifraude
   --------------------------------------------------------------- */
.alerta {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  max-width: 700px;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding: 1.35rem 1.5rem;
  border-radius: var(--raio);
  background: #fff8e6;
  border: 1.5px solid #ffd98a;
  color: #6b4b00;
}
.alerta svg { width: 26px; height: 26px; flex: none; color: #e8a300; }
.alerta p { margin: 0; font-size: 1.05rem; }
.alerta strong { color: #4d3600; }

/* ---------------------------------------------------------------
   15. CTA final
   --------------------------------------------------------------- */
.cta-final {
  position: relative;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(109,132,245,.45), transparent 65%),
    linear-gradient(140deg, var(--azul-900), var(--azul-700));
  overflow: hidden;
}
.cta-final h2 { color: #fff; }
.cta-final p { color: rgba(255,255,255,.85); max-width: 620px; margin-inline: auto; }
.cta-final__acoes { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-top: 2rem; }