/* AvanzaVOS — estilos custom (complementan a Tailwind CDN) */

html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; color: #1f2937; -webkit-font-smoothing: antialiased; }

/* Marca VOS */
.vos {
  background: linear-gradient(135deg, #e879f9 0%, #a855f7 50%, #c084fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 24px rgba(192, 38, 211, 0.5));
  font-style: italic;
  display: inline-block;
  padding-right: 0.14em;
}

/* Fondos con degradado */
.gradient-hero {
  background:
    radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(145deg, #130a2e 0%, #2a0f5e 50%, #5b1fa8 100%);
}
.gradient-inst { background: linear-gradient(145deg, #1a0e3b 0%, #4a1283 100%); }
.hero-dots {
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}
.bg-section-a { background-color: #faf9ff; }
.bg-section-c { background-color: #f5f3ff; }

/* Navbar al hacer scroll */
#navbar { transition: all 0.3s; }
#navbar.nav-scrolled { background: rgba(10,22,40,0.97); backdrop-filter: blur(16px); box-shadow: 0 4px 24px rgba(0,0,0,0.3); }

/* Tarjetas con hover */
.card-hover { transition: all 0.2s ease-out; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(124,58,237,0.12); }

/* Pill de barrio */
.barrio-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: #f5f3ff; color: #6d28d9; font-weight: 600;
  border: 1px solid #ede9fe; border-radius: 9999px;
  font-size: 11px; padding: 3px 8px;
}

/* Badges de estado */
.estado-recibido     { background: #fef9c3; color: #854d0e; }
.estado-analisis     { background: #dbeafe; color: #1e40af; }
.estado-visibilizado { background: #ffedd5; color: #9a3412; }
.estado-gestionado   { background: #ede9fe; color: #5b21b6; }
.estado-resuelto     { background: #dcfce7; color: #166534; }

/* Inputs del formulario */
.form-input {
  width: 100%; border: 1px solid #e5e7eb; border-radius: 0.75rem;
  padding: 0.75rem 1rem; color: #1f2937; font-size: 0.875rem;
  transition: all 0.15s; background: #fff;
}
.form-input::placeholder { color: #9ca3af; }
.form-input:focus { outline: none; border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,0.12); }

/* Animaciones */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes fadeUp { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes bounce-soft { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-25%); } }
.animate-fadeUp { animation: fadeUp 0.5s ease forwards; }
.animate-marquee { animation: marquee 30s linear infinite; }
.animate-bounce-soft { animation: bounce-soft 1.4s infinite; }

/* Utilidad line-clamp (por si el CDN no la trae) */
.line-clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}