/* ==========================================================================
   Invencibles — estilos compartidos (complementan Tailwind)
   ========================================================================== */

:root { color-scheme: dark; }

html { scroll-behavior: smooth; }
body { -webkit-tap-highlight-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Foco visible de alto contraste */
:focus-visible {
  outline: 3px solid #15e08a;
  outline-offset: 2px;
  border-radius: 10px;
}

/* Tipografía grande y apretada para títulos (estilo GoFundMe, look no-tradicional) */
.display {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

/* Degradado de marca reutilizable */
.text-gradient {
  background-image: linear-gradient(100deg, #5cf0b0, #15e08a 45%, #bef264);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bg-gradient-inv {
  background-image: linear-gradient(120deg, #15e08a, #0f9d63);
}

/* Malla decorativa suave del hero */
.hero-glow {
  background:
    radial-gradient(60% 55% at 15% 10%, rgba(21, 224, 138, 0.18), transparent 60%),
    radial-gradient(45% 45% at 90% 15%, rgba(190, 242, 100, 0.12), transparent 60%);
}

/* Barra de progreso animada */
.progress-track { background: rgba(255, 255, 255, 0.08); }
.progress-bar {
  background-image: linear-gradient(90deg, #15e08a, #bef264);
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Divisor curvo entre secciones (se usa como <div class="curve-divider">) */
.curve-divider {
  height: 60px;
  background: var(--curve-color, #121a18);
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
  margin-top: -30px;
  position: relative;
  z-index: 1;
}

/* Animaciones */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes slideUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.animate-fade-up { animation: fadeUp 0.5s ease-out both; }
.animate-slide { animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
.animate-fade { animation: fadeIn 0.2s ease-out both; }

/* Oculta scrollbar horizontal en las filas de chips */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }