@keyframes sucessoPulse {
  0% { transform: scale(0.7); opacity: 0.2; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
#quizBox .quiz-option.correct {
  background: #2ecc40 !important;
  color: #fff !important;
  border-color: #2ecc40 !important;
  animation: acertoPulse 0.5s;
}
#quizBox .quiz-option.wrong {
  background: #e74c3c !important;
  color: #fff !important;
  border-color: #e74c3c !important;
  animation: erroShake 0.5s;
}
@keyframes acertoPulse {
  0% { box-shadow: 0 0 0 0 #2ecc40; }
  70% { box-shadow: 0 0 16px 8px #2ecc40; }
  100% { box-shadow: 0 0 0 0 #2ecc40; }
}
@keyframes erroShake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-8px); }
  80% { transform: translateX(8px); }
  100% { transform: translateX(0); }
}
#quizBox {
  background: var(--surface);
  color: var(--text);
}
#quizBox h2 {
  color: var(--primary);
}
#quizBox .quiz-btn {
  background: linear-gradient(135deg, var(--primary), var(--primary-600));
  color: #fff;
}
#quizBox .quiz-btn:hover {
  background: var(--accent);
  color: #fff;
}
#quizBox .quiz-option {
  /*
    Estilos para opções do quiz corretas e erradas
    Inclui animações de acerto e erro
  */
  background: #181b22;
  color: var(--text);
  border: 2px solid transparent;
}
#quizBox .quiz-option.selected {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
/* Quiz Modal */
#quizModal {
  display: none;
  /* Animação para resposta correta */
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(20,24,32,0.85);
  z-index: 999;
  /* Animação para resposta errada */
  align-items: center;
  justify-content: center;
}
#quizBox {
  background: #fff;
  border-radius: 16px;
  max-width: 380px;
  width: 96vw;
  /* Container principal do quiz */
  margin: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  padding: 2rem 1.2rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#quizBox h2 {
  color: #1f3b73;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.3rem;
  margin-bottom: .7rem;
}
#quizBox .quiz-question {
  font-size: 1.08rem;
  color: #222;
  font-weight: 600;
  margin-bottom: 1rem;
}
#quizBox .quiz-options {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  width: 100%;
  /* Modal do quiz */
  margin-bottom: 1.2rem;
}
#quizBox .quiz-option {
  background: #e3e6ee;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: .8rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background .2s, border-color .2s, box-shadow .2s;
  /* Estilos detalhados do box do quiz */
  color: #222;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(31,59,115,.04);
}
#quizBox .quiz-option:hover {
  background: #c59d2f;
  color: #fff;
  border-color: #c59d2f;
}
#quizBox .quiz-option.selected {
  background: #1f3b73;
  color: #fff;
  border-color: #1f3b73;
  box-shadow: 0 2px 12px rgba(31,59,115,.12);
}
#quizBox .quiz-btn {
  background: linear-gradient(135deg, #1f3b73, #30539c);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: .7rem 1.2rem;
  font-size: 1rem;
  cursor: pointer;
  font-weight: 700;
  box-shadow: 0 2px 12px rgba(31,59,115,.08);
  transition: background .2s, transform .15s;
  margin-top: .7rem;
}
#quizBox .quiz-btn:hover {
  background: #c59d2f;
  color: #fff;
  transform: translateY(-2px) scale(1.04);
}
#quizBox .quiz-score {
  font-size: 1.2rem;
  color: #1f3b73;
  font-weight: 700;
  margin-bottom: .7rem;
}
#quizBox .quiz-feedback {
  font-size: 1.05rem;
  color: #7a859c;
  font-weight: 600;
  margin-bottom: 1.2rem;
}
:root{
  --bg:#0e0f12;
  --surface:#12141a;
  --muted:#a8b0c3;
  --text:#e8ecf5;
  --primary:#1f3b73; /* azul escuro */
  --primary-600:#30539c;
  --accent:#c59d2f;  /* dourado */
  --card:#181b22;
  --border:#222736;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;
}

*{box-sizing: border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Merriweather", serif;
  color:var(--text);
  background: linear-gradient(180deg, #0b0c10, #0f1117);
  line-height:1.6;
}

h1,h2,h3,h4{ 
  font-family: "Montserrat", sans-serif;
  letter-spacing:.3px;
  margin:0 0 .5rem;
}

p{margin:.4rem 0 1rem;color:var(--muted)}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{width:min(1100px, 92%); margin-inline:auto}

.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  background:linear-gradient(135deg, var(--primary), var(--primary-600));
  color:white; padding:.8rem 1.1rem; border-radius:999px; border:1px solid #2a3a63;
  /*
    Variáveis globais de cor, espaçamento e sombra
    Usadas para manter o design consistente
  */
  box-shadow: var(--shadow);
  font-family:"Montserrat", sans-serif; font-weight:600;
  transition: transform .15s ease, box-shadow .2s ease;
}
.btn:hover{ transform: translateY(-1px) }
.btn.outline{
  background: transparent; border:1px solid var(--border); color:var(--text);
}

.badge{font-size:.85rem; padding:.25rem .6rem; background:#1b2030; border:1px solid var(--border); border-radius:999px; color:#c9d3ea}

/* Header */
.header{
  /* Reset e estilos globais */
  position:sticky; top:0; z-index:40;
  backdrop-filter: blur(8px);
  background: rgba(12,14,20,.55);
  border-bottom:1px solid var(--border);
}
.nav{
  display:flex; align-items:center; justify-content:space-between; padding:.8rem 0;
}
.logo{display:flex; align-items:center; gap:.6rem; font-weight:800; color:white}
.logo-icon{
  width:36px; height:36px; display:grid; place-items:center; border-radius:9px;
  background: transparent;
  color:black; font-weight:900;
  box-shadow: none;
}

.menu{display:flex; align-items:center; gap:1rem; font-family:"Montserrat", sans-serif}
.menu a{
  padding:.55rem .8rem; border-radius:999px; color:#c9d3ea;
  /* Container central para limitar largura */
  border:1px solid transparent;
  /* Botões principais */
}
.menu a.active, .menu a:hover{ border-color:var(--border); color:white; background:#151925 }

.menu-toggle{ display:none; background:transparent; border:1px solid var(--border); padding:.4rem .6rem; border-radius:10px}

/* Hero */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  background: url('./assets/hero.jpg') center/cover no-repeat;
  min-height: 64vh; display:grid; place-items:center;
  border-bottom:1px solid var(--border);
}
  /* Selo de categoria dos cards */
.hero::before{
  /* Header (cabeçalho fixo) */
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,12,19,.75), rgba(10,12,19,.9));
  z-index:0;
}
.hero .inner{ position:relative; z-index:1; text-align:center; padding: 3rem 1rem }
.hero h1{ font-size: clamp(1.8rem, 2.5vw + 1rem, 3rem) }
.hero p{ max-width: 680px; margin-inline:auto }
.hero .cta{ margin-top:1.2rem; display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap }

/* Sections */
.section{ padding: 3rem 0 }
.section h2{ font-size: clamp(1.4rem, 2vw + .6rem, 2rem) }

.grid{
  display:grid; gap:1rem; margin-top:1.2rem;
  grid-template-columns: repeat(12, 1fr);
  /* Menu de navegação */
}
.card{
  grid-column: span 4;
  background: linear-gradient(180deg, #131722, #10131b);
  border:1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  /* Hero (destaque inicial) */
  display:flex; flex-direction:column;
}
.card img{ aspect-ratio: 16/9; object-fit: cover }
.card .content{ padding: 1rem 1rem 1.2rem }
.card h3{ margin-bottom:.3rem }
.card .actions{ margin-top:auto; display:flex; gap:.6rem; align-items:center }

/* Timeline chips */
.timeline{ display:flex; gap:.6rem; overflow:auto; padding:.4rem; border:1px solid var(--border); border-radius:999px; background:#0f1320 }
.timeline button{
  white-space:nowrap; border:none; background:transparent; color:#cbd5f0; padding:.6rem .9rem; border-radius:999px;
  font-family:"Montserrat", sans-serif;
}
.timeline button.active{ background:#16203a; color:white; border:1px solid #263253 }

  /* Seções principais */
/* Filter + search */
.filterbar{
  /* Grid de cards */
  display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; justify-content:space-between;
  padding: .8rem; border:1px solid var(--border); border-radius:12px; background:#0f1320;
  margin: .6rem 0 1rem;
}
.input{
  background:#0d1222; border:1px solid var(--border); color:#e2e8f0; border-radius:12px; padding:.6rem .8rem; width:100%;
}
.input:focus{ outline: 2px solid #243156 }

.list{ display:grid; grid-template-columns: repeat(12, 1fr); gap:1rem }
.list .card{ grid-column: span 6 }
@media (max-width: 920px){
  .grid .card, .list .card{ grid-column: span 6 }
}
@media (max-width: 640px){
  .menu{ display:none }
  .menu-toggle{ display:inline-flex }
  /* Chips da timeline */
  .grid .card, .list .card{ grid-column: span 12 }
}

/* Detail page */
.header-hero{
  background: url('./assets/detalhe.jpg') center/cover no-repeat;
  /* Barra de filtros e busca */
  min-height: 40vh; display:grid; place-items:center; position:relative; isolation:isolate;
}
.header-hero::before{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(10,12,19,.7), rgba(10,12,19,.9)) }
.header-hero .inner{ position:relative; z-index:1; text-align:center; padding: 2.4rem 1rem }

.prose{ max-width: 800px; margin: 1rem auto 0; }
.prose p{ color:#d0d6e5 }

.gallery{ display:grid; grid-template-columns: repeat(12,1fr); gap: .8rem; margin-top:1rem }
  /* Listagem de cards */
.gallery img{ border-radius:12px; border:1px solid var(--border); box-shadow: var(--shadow) }
.gallery .wide{ grid-column: span 12 }
.gallery .half{ grid-column: span 6 }
@media (max-width: 720px){
  .gallery .half, .gallery .wide{ grid-column: span 12 }
}

/* About */
.team{ display:grid; grid-template-columns: repeat(12, 1fr); gap:1rem; margin-top:1rem }
.member{ grid-column: span 3; background:#10131b; border:1px solid var(--border); border-radius:16px; padding:1rem; text-align:center }
  /* Página de detalhes */
.member img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px; border:1px solid var(--border) }
.member h4{ margin:.6rem 0 0 }
.member p.role{ color:#c0c7da; margin:.2rem 0 .6rem; font-family:"Montserrat", sans-serif }

@media (max-width: 980px){ .member{ grid-column: span 6 } }
@media (max-width: 520px){ .member{ grid-column: span 12 } }

/* Contact */
.form{ display:grid; grid-template-columns: repeat(12, 1fr); gap:.8rem; margin-top:1rem }
  /* Galeria de imagens */
.form .field{ grid-column: span 6; display:flex; flex-direction:column; gap:.35rem }
.form .field.full{ grid-column: span 12 }
label{ font-family:"Montserrat", sans-serif; color:#cbd5f0; font-size:.95rem }
input, textarea, select{ background:#101522; border:1px solid var(--border); color:#e8ecf5; padding:.7rem .9rem; border-radius:12px; }
textarea{ min-height: 140px; resize: vertical }

/* Footer */
  /* Equipe */
.footer{ margin-top: 3rem; background:#0b0d14; border-top:1px solid var(--border); padding: 2rem 0 }
.footer .cols{ display:grid; grid-template-columns: repeat(12, 1fr); gap:1rem }
.footer .col{ grid-column: span 3 }
.footer ul{ list-style:none; padding:0; margin:.5rem 0 0 }
.footer li{ margin:.4rem 0 }
.copy{ margin-top:1rem; border-top:1px solid var(--border); padding-top:1rem; color:#9aa4bd }

@media (max-width: 920px){
  /* Contato */
  .footer .col{ grid-column: span 6 }
}
@media (max-width: 520px){
  .footer .col{ grid-column: span 12 }
}

  /* Rodapé */