/* Fallback simples caso a CDN do Tailwind não carregue */
:root{
  --accent:#10b981; /* emerald */
  --bg:#0b1020; /* escuro */
  --card:#121a2f;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --danger:#ef4444;
  --warning:#f59e0b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial}
a{color:#93c5fd}
.container{max-width:1100px;margin:0 auto;padding:24px}
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:24px}
.btn{display:inline-flex;gap:8px;align-items:center;background:var(--accent);color:#062e26;border:none;padding:12px 18px;border-radius:12px;font-weight:700;cursor:pointer;transition:all 0.2s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(16,185,129,0.3)}
.btn:active{transform:translateY(1px)}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hero{padding:48px 0}
.progress{width:100%;height:14px;background:#1f2937;border-radius:999px;overflow:hidden}
.progress>span{display:block;height:100%;background:linear-gradient(90deg,#22c55e,#06b6d4);width:0%;transition:width 0.5s ease}
.muted{color:var(--muted)}
.title{font-size:clamp(28px,4vw,40px);line-height:1.1;margin:0 0 8px;font-weight:800}
.subtitle{font-size:18px;margin:0 0 18px;color:#cbd5e1}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#0ea5e9;color:white;font-weight:700;font-size:12px}
.pill{padding:8px 12px;border-radius:999px;background:#0b1328;color:#a5b4fc;border:1px solid rgba(99,102,241,.2);cursor:pointer;transition:all 0.2s ease}
.pill:hover{background:#1e293b;border-color:rgba(99,102,241,.4)}
.pill.ring-2{box-shadow:0 0 0 3px rgba(99,102,241,.6)}
.footer{padding:24px 0;color:#9ca3af}

/* Estilos específicos para a campanha */
.glass{background:rgba(18,26,47,.75);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.06)}
.ring-2{box-shadow:0 0 0 3px rgba(99,102,241,.6)}

/* Animações */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.7); }
  50% { box-shadow: 0 0 0 10px rgba(16,185,129,0); }
}

.pulse-glow {
  animation: pulse-glow 2s infinite;
}

/* Estilos para cards especiais */
.card.urgent {
  background: linear-gradient(135deg, rgba(239,68,68,0.1), rgba(245,158,11,0.1));
  border-color: rgba(239,68,68,0.3);
}

.card.success {
  background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(6,182,212,0.1));
  border-color: rgba(16,185,129,0.3);
}

/* Estilos para imagens da galeria */
.gallery-image {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-image:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

/* Estilos para progresso */
.progress-container {
  position: relative;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #06b6d4);
  border-radius: 999px;
  transition: width 0.5s ease;
}

/* Estilos para badges de status */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.status-badge.urgent {
  background: rgba(239,68,68,0.2);
  color: #fca5a5;
  border: 1px solid rgba(239,68,68,0.3);
}

.status-badge.stable {
  background: rgba(16,185,129,0.2);
  color: #86efac;
  border: 1px solid rgba(16,185,129,0.3);
}

.status-badge.warning {
  background: rgba(245,158,11,0.2);
  color: #fcd34d;
  border: 1px solid rgba(245,158,11,0.3);
}

/* Responsividade melhorada */
@media (max-width: 768px) {
  .container { padding: 16px; }
  .card { padding: 16px; }
  .title { font-size: 24px; }
  .subtitle { font-size: 16px; }
  .grid { gap: 12px; }
}

/* Estilos para texto destacado */
.highlight {
  background: linear-gradient(90deg, #10b981, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

/* Estilos para call-to-action */
.cta-section {
  background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(6,182,212,0.1));
  border: 1px solid rgba(16,185,129,0.2);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
}

.cta-section .btn {
  font-size: 18px;
  padding: 16px 32px;
  margin-top: 16px;
}