@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/geist-mono.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root { color-scheme: dark; }
html { scroll-behavior: smooth; }
body { font-family: 'Geist', system-ui, sans-serif; }
section[id] { scroll-margin-top: 5rem; }

/* glass-effect reference */
.glass-effect { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.gradient-text { background-clip: text; -webkit-background-clip: text; color: transparent; }
.card-divider {
  height: 1px;
  background-image: linear-gradient(90deg, transparent, rgba(255,255,255,.3) 20%, rgba(255,255,255,.5) 50%, rgba(255,255,255,.3) 80%, transparent);
}
.card-vertical-divider {
  width: 1px;
  background-image: linear-gradient(180deg, transparent, rgba(255,255,255,.3) 20%, rgba(255,255,255,.5) 50%, rgba(255,255,255,.3) 80%, transparent);
}
.stat-value { font-size: 1.4rem; font-weight: 600; line-height: 1.1; }
.stat-value--lg { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.stat-label { font-size: .7rem; opacity: .8; text-transform: uppercase; letter-spacing: .05em; }
.glow { box-shadow: 0 0 15px rgba(0, 255, 236, .6); }
.icon-circle {
  height: 2rem; width: 2rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
}

/* instagram-slides reference */
[style*="--border-gradient"] { position: relative; }
[style*="--border-gradient"]::before {
  content: ""; position: absolute; inset: 0; padding: 1px;
  border-radius: var(--border-radius-before, inherit);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  background: var(--border-gradient); pointer-events: none;
}
@keyframes animationIn {
  0% { opacity: 0; transform: translateY(30px); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.animate-on-scroll { animation-play-state: paused !important; }
.animate-on-scroll.animate { animation-play-state: running !important; }
.bg-grid-pattern {
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.1) 1px, transparent 0);
  background-size: 24px 24px;
}
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.slide-container { aspect-ratio: 3 / 4; min-width: 0; }
.metodo-track { padding-inline: calc(50% - 40vw); }
@media (min-width: 640px) { .metodo-track { padding-inline: calc(50% - 210px); } }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.animate-marquee { animation: marquee 30s linear infinite; }
@keyframes beam { 0% { left: -100%; } 100% { left: 100%; } }
.animate-beam { animation: beam 2.4s cubic-bezier(.4, 0, .2, 1) infinite; }

.range-accent { width: 100%; accent-color: #00FFEC; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .animate-on-scroll, .animate-marquee, .animate-beam, .animate-pulse {
    animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important;
  }
}

/* animation-clean reference: rotating light around a pill/button */
:has(> .beam-btn__beam) { isolation: isolate; background: rgba(0, 255, 236, 0.18); }
.beam-btn__beam {
  position: absolute; inset: -150%; z-index: -1; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(0, 255, 236, 0.95) 50deg, transparent 110deg);
  animation: beam-rotate 3s linear infinite;
}
@keyframes beam-rotate { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .beam-btn__beam { animation: none; } }

/* animation-clean reference: flashlight cards */
.flashlight-card { position: relative; isolation: isolate; }
.flashlight-card::before,
.flashlight-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  opacity: 0; transition: opacity 0.5s; pointer-events: none;
}
.flashlight-card::before {
  z-index: 1;
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0, 255, 236, 0.08), transparent 40%);
}
.flashlight-card::after {
  z-index: 2; padding: 1px;
  background: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0, 255, 236, 0.6), transparent 40%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.flashlight-card:hover::before,
.flashlight-card:hover::after { opacity: 1; }

/* animation-clean reference: background clip columns */
.hero-column { clip-path: inset(100% 0 0 0); transition: clip-path 1.5s cubic-bezier(0.65, 0, 0.35, 1); }
.hero-column.is-active { clip-path: inset(0 0 0 0); }

/* animations-gemini reference: shimmer sweep */
.shimmer { position: relative; overflow: hidden; }
.shimmer::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 236, 0.25), transparent);
  transform: translateX(-100%) skewX(-15deg);
  animation: shimmer-sweep 3.5s ease-in-out infinite;
}
@keyframes shimmer-sweep {
  0% { transform: translateX(-100%) skewX(-15deg); }
  60%, 100% { transform: translateX(200%) skewX(-15deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-column { transition: none; }
  .shimmer::after { animation: none; opacity: 0; }
}