/* ==========================================================================
   Gym Center - Hoja de Estilos Oficial (HTML/CSS/JS)
   Paleta: Evening Primrose (#c6d605), Jasmine Green (#87d108), 
           Stalactite (#fdfef8), Silver (#a5a5a5), Caviar (#202020)
   ========================================================================== */

:root {
  --color-primrose: #c6d605;
  --color-jasmine: #87d108;
  --color-stalactite: #fdfef8;
  --color-silver: #a5a5a5;
  --color-caviar: #202020;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  background-color: var(--color-caviar);
  color: var(--color-stalactite);
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
  background-color: #202020;
  color: #fdfef8;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Custom Selection */
::selection {
  background-color: #c6d605;
  color: #202020;
}

/* Typography Classes */
.font-poppins-black {
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
}

.font-bebas {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.05em;
}

.font-astron {
  font-family: 'Syne', sans-serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.font-body {
  font-family: 'Outfit', sans-serif;
}

/* Outline text styles from brand guide */
.text-outline {
  -webkit-text-stroke: 1.5px currentColor;
  color: transparent;
}

.text-outline-thin {
  -webkit-text-stroke: 1px currentColor;
  color: transparent;
}

/* Glow effects */
.glow-primrose {
  box-shadow: 0 0 30px rgba(198, 214, 5, 0.25);
}

.glow-primrose-sm {
  box-shadow: 0 0 15px rgba(198, 214, 5, 0.2);
}

/* Custom animations */
@keyframes pulse-subtle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(0.98); }
}

.animate-pulse-subtle {
  animation: pulse-subtle 3s ease-in-out infinite;
}

/* Smooth transitions */
.transition-standard {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Infinite Marquee Carousel */
@keyframes marquee-scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  display: flex;
  width: max-content;
  animation: marquee-scroll 28s linear infinite;
  will-change: transform;
}

.animate-marquee:hover {
  animation-play-state: paused;
}