/* Animación de texto rotativo - Loading Card */
.card_loader {
  --bg-color: transparent;
  background-color: transparent;
  padding: clamp(0.5rem, 1vw, 1rem);
  border-radius: 0.25rem;
}

.loader {
  color: white;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: clamp(11px, 1.8vw, 17px);
  box-sizing: content-box;
  padding: clamp(3px, 0.4vw, 6px) clamp(4px, 0.8vw, 10px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 8px;
}

.words {
  overflow: hidden;
  position: relative;
  height: clamp(18px, 2vw, 26px);
}

.words::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    transparent 10%,
    transparent 30%,
    transparent 70%,
    transparent 90%
  );
  z-index: 20;
}

.word {
  display: block;
  height: 100%;
  padding-left: 6px;
  background: linear-gradient(135deg, #ffffff 0%, #ccfbf1 40%, #99f6e4 70%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 2px rgba(94, 234, 212, 0.5));
  animation: spin_4991 6s infinite ease-in-out;
}

@keyframes spin_4991 {
  0%, 83% {
    transform: translateY(0%);
  }
  90%, 96% {
    transform: translateY(-102%);
  }
  100% {
    transform: translateY(0%);
  }
}

/* ── Hero Image Slider ─────────────────────────────── */
.hero-slider-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 1.25rem;
}

@media (min-width: 768px) {
  .hero-slider-container {
    aspect-ratio: unset;
    height: 440px;
    border-radius: 1rem;
  }
}

.hero-slide-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 45%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

/* Dot indicators */
.hero-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
}

.hero-dot {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
}

.hero-dot-1 { animation: dot-1-anim 16s infinite; }
.hero-dot-2 { animation: dot-2-anim 16s infinite; }
.hero-dot-3 { animation: dot-3-anim 16s infinite; }
.hero-dot-4 { animation: dot-4-anim 16s infinite; }

@keyframes dot-1-anim {
  0%,  20% { width: 18px; background: white; }
  25%, 95% { width: 6px;  background: rgba(255, 255, 255, 0.35); }
  100%     { width: 18px; background: white; }
}
@keyframes dot-2-anim {
  0%,  20% { width: 6px;  background: rgba(255, 255, 255, 0.35); }
  25%, 45% { width: 18px; background: white; }
  50%, 100%{ width: 6px;  background: rgba(255, 255, 255, 0.35); }
}
@keyframes dot-3-anim {
  0%,  45% { width: 6px;  background: rgba(255, 255, 255, 0.35); }
  50%, 70% { width: 18px; background: white; }
  75%, 100%{ width: 6px;  background: rgba(255, 255, 255, 0.35); }
}
@keyframes dot-4-anim {
  0%,  70% { width: 6px;  background: rgba(255, 255, 255, 0.35); }
  75%, 95% { width: 18px; background: white; }
  100%     { width: 6px;  background: rgba(255, 255, 255, 0.35); }
}

.hero-slider-track {
  display: flex;
  width: 400%;
  height: 100%;
  animation: hero-slide 16s infinite;
  will-change: transform;
}

.hero-slide-item {
  width: 25%;
  height: 100%;
  flex-shrink: 0;
  overflow: hidden;
}

.hero-slide-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes hero-slide {
  0%, 20% {
    transform: translateX(0%);
  }
  25%, 45% {
    transform: translateX(-25%);
  }
  50%, 70% {
    transform: translateX(-50%);
  }
  75%, 95% {
    transform: translateX(-75%);
  }
  100% {
    transform: translateX(0%);
  }
}

/* ── Stats bar animated gradient ──────────────────── */
.stats-bar-animated {
  background: linear-gradient(270deg, #0f766e, #134e4a, #0f172a, #1e293b, #134e4a, #0f766e);
  background-size: 400% 400%;
  animation: stats-gradient 10s ease infinite;
}

@keyframes stats-gradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Scroll suave global */
html {
  scroll-behavior: smooth;
}

/* Alpine.js: ocultar antes de inicialización */
[x-cloak] { display: none !important; }

/* Utilidades globales */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}