/* ═══════════════════════════════════════════════════════════════════
   WAREX 3D ANIMATION STUDIO — styles.css
   Hoja de estilos GLOBAL compartida por todas las páginas
   ═══════════════════════════════════════════════════════════════════

   ÍNDICE
   ──────────────────────────────────────────────────────────────────
   01. VARIABLES CSS (tokens de diseño)
   02. RESET & BASE
   03. FONDO ATMOSFÉRICO GLOBAL
   04. SCROLLBAR PERSONALIZADA
   05. TIPOGRAFÍA GLOBAL
   06. BOTONES WAREX
   07. GLASS CARD (componente base reutilizable)
   08. NAVBAR PREMIUM (compartido)
   09. PAGE HEADER (cabecera interior de páginas)
   10. FOOTER (compartido)
   11. ANIMACIONES Y SCROLL REVEAL
   12. CURSOR PERSONALIZADO
   13. UTILIDADES GLOBALES
   14. RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────
   01. VARIABLES CSS — Design Tokens
   ────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700;900&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* ── Paleta cromática ── */
  --color-void: #000000;
  --color-abyss: #050808;
  --color-emerald-deep: #0a2523;
  --color-emerald-mid: #0d3330;
  --color-emerald-glow: #00d4aa;
  --color-emerald-vivid: #10b981;
  --color-emerald-dim: #065f46;
  --color-cyan-border: rgba(0, 212, 170, 0.18);
  --color-cyan-glow-bg: rgba(0, 212, 170, 0.06);

  /* ── Texto ── */
  --color-text-primary: #ffffff;
  --color-text-silver: #f3f4f6;
  --color-text-muted: #e5e7eb;
  --color-text-dim: #9ca3af;

  /* ── Glassmorphism ── */
  --glass-bg: rgba(10, 15, 15, 0.78);
  --glass-bg-lite: rgba(10, 25, 22, 0.55);
  --glass-border: var(--color-cyan-border);
  --glass-blur: blur(14px);
  --glass-blur-heavy: blur(22px);
  --glass-blur-subtle: blur(8px);

  /* ── Sombras & Brillos ── */
  --glow-em: 0 0 28px rgba(0, 212, 170, 0.14), 0 0 60px rgba(0, 212, 170, 0.05);
  --glow-em-strong: 0 0 40px rgba(0, 212, 170, 0.28), 0 0 80px rgba(0, 212, 170, 0.10);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-navbar: 0 4px 30px rgba(0, 0, 0, 0.70);

  /* ── Espaciado de sección ── */
  --section-py: 6rem 0;
  --section-py-sm: 3.5rem 0;

  /* ── Transiciones ── */
  --t-base: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: all 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  --t-spring: all 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fade: opacity 0.4s ease, transform 0.4s ease;

  /* ── Z-index stack ── */
  --z-navbar: 1000;
  --z-cursor: 9999;
  --z-modal: 9000;
  --z-overlay: 100;
}

/* ──────────────────────────────────────────────────────────────────
   02. RESET & BASE
   ────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--color-void);
  color: var(--color-text-silver);
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--color-emerald-glow);
}

img,
video {
  display: block;
  max-width: 100%;
}

/* ──────────────────────────────────────────────────────────────────
   03. FONDO ATMOSFÉRICO GLOBAL
   Gradientes radiales en negro/esmeralda que emulan iluminación
   volumétrica de render VFX en todas las páginas
   ────────────────────────────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 75% 55% at 10% 90%, rgba(10, 37, 35, 0.72) 0%, transparent 58%),
    radial-gradient(ellipse 55% 45% at 92% 8%, rgba(10, 37, 35, 0.58) 0%, transparent 55%),
    radial-gradient(ellipse 38% 32% at 55% 48%, rgba(6, 95, 70, 0.11) 0%, transparent 68%),
    var(--color-void);
  pointer-events: none;
}

/* Marca de agua isotipo — sutil, posición derecha */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url('assets/images/isotipo.png');
  background-repeat: no-repeat;
  background-position: 108% 58%;
  background-size: 52vw auto;
  opacity: 0.024;
  filter: brightness(0) invert(1);
  pointer-events: none;
}

/* ──────────────────────────────────────────────────────────────────
   04. SCROLLBAR PERSONALIZADA
   ────────────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.95);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--color-emerald-glow), var(--color-emerald-dim));
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-emerald-glow);
}

/* ──────────────────────────────────────────────────────────────────
   05. TIPOGRAFÍA GLOBAL
   ────────────────────────────────────────────────────────────────── */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* Encabezado display hero (muy grande) */
.display-heading {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: clamp(3.4rem, 9vw, 7.8rem);
  letter-spacing: -0.04em;
  line-height: 0.94;
}

/* Etiqueta de sección (pequeña, verde, todo caps) */
.section-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-emerald-glow);
  display: inline-block;
  margin-bottom: 0.9rem;
}

/* Título de sección estándar */
.section-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3.4rem);
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
  margin-bottom: 1.2rem;
}

/* Texto de lectura destacado */
.lead-text {
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--color-text-muted);
  line-height: 1.85;
}

/* Degradado de texto blanco → esmeralda */
.text-gradient {
  background: linear-gradient(135deg, #ffffff 0%, var(--color-emerald-glow) 55%, var(--color-emerald-vivid) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Separador decorativo */
.warex-divider {
  width: 50px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-emerald-glow), transparent);
  margin: 1.4rem 0;
}

.warex-divider.center {
  margin-inline: auto;
}

/* ──────────────────────────────────────────────────────────────────
   06. BOTONES WAREX
   ────────────────────────────────────────────────────────────────── */

/* Botones primarios y secundarios unificados — borde esmeralda con fill en hover */
.btn-warex,
.btn-warex-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.82rem 2.1rem;
  background: transparent;
  border: 1.5px solid var(--color-emerald-glow);
  color: var(--color-emerald-glow);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--t-base);
  z-index: 1;
}

/* ──────────────────────────────────────────────────────────────────
   06b. PESTAÑAS Y BOTONES DE MULTIMEDIA (TABS)
   ────────────────────────────────────────────────────────────────── */
.media-tabs {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.media-tab-btn, .filter-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-text-muted);
  padding: 0.6rem 1.4rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  border-radius: 30px;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.media-tab-btn::before, .filter-btn::before {
  content: '';
  display: inline-block;
  width: 0px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-emerald-glow);
  opacity: 0;
  margin-right: 0;
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 0 8px var(--color-emerald-glow);
}
.media-tab-btn.active::before, .filter-btn.active::before {
  width: 6px;
  opacity: 1;
  margin-right: 0.4rem;
}
.media-tab-btn:hover::before, .filter-btn:hover::before {
  width: 6px;
  opacity: 0.6;
  margin-right: 0.4rem;
}
.media-tab-btn.active, .filter-btn.active,
.media-tab-btn:hover, .filter-btn:hover {
  background: rgba(0, 212, 170, 0.1);
  border-color: var(--color-emerald-glow);
  color: var(--color-text-primary);
  box-shadow: 0 0 12px rgba(0, 212, 170, 0.15);
}
.media-tab-btn.active, .filter-btn.active {
  animation: tab-glow-pulse 2s infinite ease-in-out;
}
.media-tab-btn:active, .filter-btn:active {
  transform: scale(0.96) !important;
}

@keyframes tab-glow-pulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(0, 212, 170, 0.15);
  }
  50% {
    box-shadow: 0 0 16px rgba(0, 212, 170, 0.35);
  }
}

.reveal-content {
  animation: revealUp 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes revealUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.btn-warex::before,
.btn-warex-ghost::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-emerald-vivid), var(--color-emerald-glow));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.btn-warex:hover,
.btn-warex-ghost:hover {
  color: var(--color-void);
  border-color: var(--color-emerald-glow);
  box-shadow: var(--glow-em-strong);
  transform: translateY(-2px);
}

.btn-warex:hover::before,
.btn-warex-ghost:hover::before {
  transform: scaleX(1);
}

/* Botón Play circular con anillos de pulso */
.btn-play-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(0, 212, 170, 0.09);
  border: 1.5px solid var(--color-emerald-glow);
  color: var(--color-emerald-glow);
  font-size: 1.35rem;
  transition: var(--t-spring);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}

.btn-play-circle::before,
.btn-play-circle::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0, 212, 170, 0.25);
  animation: pulse-ring 2.2s ease-out infinite;
}

.btn-play-circle::before {
  inset: -9px;
}

.btn-play-circle::after {
  inset: -19px;
  animation-delay: 0.65s;
  border-color: rgba(0, 212, 170, 0.10);
}

.btn-play-circle:hover {
  background: rgba(0, 212, 170, 0.18);
  transform: scale(1.1);
  box-shadow: var(--glow-em-strong);
}

@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

/* ──────────────────────────────────────────────────────────────────
   07. GLASS CARD — Componente base reutilizable en todas las páginas
   ────────────────────────────────────────────────────────────────── */
.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-card);
  transition: var(--t-base);
}

.glass-card:hover {
  border-color: rgba(0, 212, 170, 0.32);
  box-shadow: var(--glow-em), var(--shadow-card);
  transform: translateY(-4px);
}

/* ──────────────────────────────────────────────────────────────────
   08. NAVBAR PREMIUM — Idéntico en todas las páginas
   ────────────────────────────────────────────────────────────────── */
#warexNavbar {
  position: sticky;
  top: 0;
  z-index: var(--z-navbar);
  background: rgba(0, 5, 5, 0.80);
  backdrop-filter: var(--glass-blur-heavy);
  -webkit-backdrop-filter: var(--glass-blur-heavy);
  border-bottom: 1px solid var(--glass-border);
  padding: 0.9rem 0;
  transition: var(--t-base);
}

#warexNavbar.scrolled {
  padding: 0.55rem 0;
  background: rgba(0, 5, 5, 0.97);
  border-bottom-color: rgba(0, 212, 170, 0.22);
  box-shadow: var(--shadow-navbar);
}

/* Brand — isotipo + wordmark */
.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}

.brand-isotipo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
  /* Anillo de energía giratoria + pulso de glow esmeralda */
  filter:
    drop-shadow(0 0 6px rgba(0, 212, 170, 0.70)) drop-shadow(0 0 14px rgba(0, 212, 170, 0.35));
  animation: isotipoGlow 3s ease-in-out infinite;
  transition: filter 0.4s ease, transform 0.4s ease;
}

@keyframes isotipoGlow {

  0%,
  100% {
    filter:
      drop-shadow(0 0 5px rgba(0, 212, 170, 0.55)) drop-shadow(0 0 12px rgba(0, 212, 170, 0.25));
  }

  50% {
    filter:
      drop-shadow(0 0 10px rgba(0, 212, 170, 0.95)) drop-shadow(0 0 24px rgba(0, 212, 170, 0.50)) drop-shadow(0 0 40px rgba(0, 212, 170, 0.20));
  }
}

.navbar-brand:hover .brand-isotipo {
  filter:
    drop-shadow(0 0 12px rgba(0, 212, 170, 1)) drop-shadow(0 0 28px rgba(0, 212, 170, 0.65)) drop-shadow(0 0 50px rgba(0, 212, 170, 0.30));
  transform: scale(1.08) rotate(5deg);
}

/* Isotipo en el footer — estático, sin animación */
.footer-brand-isotipo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 0 5px rgba(0, 212, 170, 0.35));
  transition: filter 0.3s ease;
}

.footer-brand-isotipo:hover {
  filter: drop-shadow(0 0 8px rgba(0, 212, 170, 0.65));
}

.brand-wordmark {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 0.2em;
  color: var(--color-text-primary);
  text-transform: uppercase;
  line-height: 1;
}

.brand-wordmark small {
  display: block;
  font-size: 0.57rem;
  font-weight: 400;
  letter-spacing: 0.38em;
  color: var(--color-emerald-glow);
  margin-top: 3px;
}

/* Links de navegación */
.navbar-nav .nav-link {
  font-family: 'Inter', sans-serif;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-text-muted) !important;
  padding: 0.45rem 1rem !important;
  position: relative;
  transition: var(--t-base);
  border: 1px solid transparent;
  border-radius: 2px;
}

/* Efecto hover unificado (como el de Contacto) */
.navbar-nav .nav-link:hover {
  color: var(--color-text-primary) !important;
  background: rgba(0, 212, 170, 0.08) !important;
  border-color: var(--color-emerald-glow) !important;
  box-shadow: 0 0 16px rgba(0, 212, 170, 0.18) !important;
}

/* Estado activo para enlaces normales: solo cambia de color sin recuadro de hover */
.navbar-nav .nav-link.active {
  color: var(--color-emerald-glow) !important;
}

/* CTA "Contacto" — mantiene tipografía diferente y estilo de botón outline */
.nav-link-cta {
  color: var(--color-emerald-glow) !important;
  margin-left: 0.4rem;
  font-weight: 700 !important;
  font-family: 'Outfit', sans-serif !important;
}

.nav-link-cta:hover {
  color: var(--color-emerald-glow) !important;
}

/* El CTA activo mantiene el recuadro como un botón */
.nav-link-cta.active {
  color: var(--color-emerald-glow) !important;
  background: rgba(0, 212, 170, 0.10) !important;
  border-color: rgba(0, 212, 170, 0.55) !important;
  box-shadow: 0 0 12px rgba(0, 212, 170, 0.12) !important;
}

/* Toggler hamburguesa */
.navbar-toggler {
  border: 1px solid var(--glass-border);
  border-radius: 2px;
  padding: 0.4rem 0.65rem;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 2px rgba(0, 212, 170, 0.28);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,212,170,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* ──────────────────────────────────────────────────────────────────
   09. PAGE HEADER — Cabecera interior de páginas (NO hero)
   ────────────────────────────────────────────────────────────────── */
.page-header {
  padding: 5rem 0 3.5rem;
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-cyan-border), transparent);
}

/* Línea decorativa izquierda */
.page-header::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, var(--color-emerald-glow), transparent);
  opacity: 0.4;
}

.page-header-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-emerald-glow);
  display: block;
  margin-bottom: 1rem;
}

.page-header-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: clamp(2.6rem, 6vw, 5.5rem);
  letter-spacing: -0.04em;
  line-height: 0.96;
  color: var(--color-text-primary);
  margin-bottom: 1.2rem;
}

.page-header-sub {
  font-size: 1rem;
  font-weight: 300;
  color: var(--color-text-muted);
  max-width: 600px;
  line-height: 1.8;
}

/* Número decorativo de fondo */
.page-header-num {
  position: absolute;
  right: -1rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 22vw;
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.015);
  pointer-events: none;
  user-select: none;
  line-height: 1;
}

/* ──────────────────────────────────────────────────────────────────
   10. FOOTER — Idéntico en todas las páginas
   ────────────────────────────────────────────────────────────────── */
#warexFooter {
  border-top: 1px solid var(--glass-border);
  padding: 3.5rem 0 2rem;
  margin-top: 6.5rem;
}

/* Brand footer */
.footer-brand-isotipo {
  width: 34px;
  filter: brightness(0) invert(1);
  opacity: 0.55;
}

.footer-brand-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 0.92rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.footer-tagline {
  font-size: 0.78rem;
  color: var(--color-text-dim);
  line-height: 1.6;
  margin-top: 0.7rem;
  max-width: 200px;
}

/* Encabezados de columnas */
.footer-col-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 1.1rem;
}

/* Links del footer */
.footer-links {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: 0.6rem;
}

.footer-links a {
  font-size: 0.84rem;
  color: var(--color-text-dim);
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: var(--color-emerald-glow);
}

/* Redes sociales */
.social-links {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.social-link {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 3px;
  color: var(--color-text-dim);
  font-size: 0.92rem;
  transition: var(--t-base);
}

.social-link:hover {
  border-color: var(--color-emerald-glow);
  color: var(--color-emerald-glow);
  background: rgba(0, 212, 170, 0.06);
  transform: translateY(-2px);
}

/* Barra inferior */
.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.footer-copy {
  font-size: 0.73rem;
  color: var(--color-text-dim);
}

.footer-legal {
  display: flex;
  gap: 1.4rem;
}

.footer-legal a {
  font-size: 0.73rem;
  color: var(--color-text-dim);
  transition: color 0.3s;
}

.footer-legal a:hover {
  color: var(--color-emerald-glow);
}

/* ──────────────────────────────────────────────────────────────────
   11. ANIMACIONES Y SCROLL REVEAL
   ────────────────────────────────────────────────────────────────── */

/* reveal: elemento oculto que anima al entrar en viewport */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.72s ease, transform 0.72s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Retardos escalonados */
.reveal-d1 {
  transition-delay: 0.08s;
}

.reveal-d2 {
  transition-delay: 0.18s;
}

.reveal-d3 {
  transition-delay: 0.30s;
}

.reveal-d4 {
  transition-delay: 0.44s;
}

.reveal-d5 {
  transition-delay: 0.60s;
}

.reveal-d6 {
  transition-delay: 0.78s;
}

/* Entrada desde izquierda */
.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.72s ease, transform 0.72s ease;
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Entrada desde derecha */
.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.72s ease, transform 0.72s ease;
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Keyframes globales */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% center;
  }

  100% {
    background-position: 200% center;
  }
}

/* ──────────────────────────────────────────────────────────────────
   12. CURSOR PERSONALIZADO
   ────────────────────────────────────────────────────────────────── */
.cursor-dot {
  position: fixed;
  width: 6px;
  height: 6px;
  background: var(--color-emerald-glow);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  will-change: transform;
  transition: opacity 0.3s;
}

.cursor-ring {
  position: fixed;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(0, 212, 170, 0.45);
  border-radius: 50%;
  pointer-events: none;
  z-index: calc(var(--z-cursor) - 1);
  transform: translate(-50%, -50%);
  will-change: transform;
  transition: width 0.3s, height 0.3s, opacity 0.3s, border-color 0.3s;
}

.cursor-ring.is-hover {
  width: 54px;
  height: 54px;
  border-color: var(--color-emerald-glow);
  background: rgba(0, 212, 170, 0.035);
}

.cursor-ring.is-tab-hover {
  width: 60px;
  height: 60px;
  border-color: var(--color-emerald-glow);
  background: rgba(0, 212, 170, 0.08);
}

.cursor-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--color-emerald-glow);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.25s, transform 0.25s;
}

.cursor-ring.is-tab-hover::after {
  content: 'VER';
  opacity: 1;
  transform: scale(1);
}

/* ──────────────────────────────────────────────────────────────────
   13. UTILIDADES GLOBALES
   ────────────────────────────────────────────────────────────────── */

/* Separador de sección */
.section-sep {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-cyan-border), transparent);
  margin: 0;
}

/* Tags de tecnología */
.tech-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-emerald-glow);
  border: 1px solid rgba(0, 212, 170, 0.20);
  border-radius: 2px;
  padding: 0.28rem 0.7rem;
  transition: var(--t-base);
}

.tech-tag:hover {
  background: rgba(0, 212, 170, 0.07);
  border-color: var(--color-emerald-glow);
}

/* Badge de categoría (sobre imágenes) */
.cat-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-void);
  background: var(--color-emerald-glow);
  padding: 0.22rem 0.6rem;
  border-radius: 2px;
}

/* Número estadístico */
.stat-num {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 3rem;
  letter-spacing: -0.05em;
  color: var(--color-emerald-glow);
  line-height: 1;
}

.stat-label {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Formulario de contacto — campos oscuros */
.form-field {
  width: 100%;
  background: rgba(5, 10, 10, 0.80);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 3px;
  color: var(--color-text-silver);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  padding: 0.82rem 1.05rem;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
  -webkit-appearance: none;
}

.form-field::placeholder {
  color: rgba(255, 255, 255, 0.14);
  font-size: 0.84rem;
}

.form-field:focus {
  border-color: var(--color-emerald-glow);
  box-shadow: 0 0 0 3px rgba(0, 212, 170, 0.11), 0 0 22px rgba(0, 212, 170, 0.07);
  background: rgba(0, 212, 170, 0.025);
}

textarea.form-field {
  resize: vertical;
  min-height: 130px;
}

.form-select-warex {
  width: 100%;
  background: rgba(5, 10, 10, 0.80) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba(0,212,170,0.7)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right 1rem center / 13px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 3px;
  color: var(--color-text-silver);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  padding: 0.82rem 2.4rem 0.82rem 1.05rem;
  outline: none;
  -webkit-appearance: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.form-select-warex:focus {
  border-color: var(--color-emerald-glow);
  box-shadow: 0 0 0 3px rgba(0, 212, 170, 0.11);
}

.form-select-warex option {
  background: #0a1a18;
}

.form-label-warex {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.45rem;
}

/* ──────────────────────────────────────────────────────────────────
   14. RESPONSIVE BREAKPOINTS
   ────────────────────────────────────────────────────────────────── */

/* NAVBAR COLLAPSE — Safety-net para móvil                          */
/* Garantiza que .show funcione independientemente de Bootstrap JS  */
@media (max-width: 991.98px) {
  #navMenuCollapse {
    display: none;
    overflow: hidden;
  }

  #navMenuCollapse.show {
    display: block !important;
  }
}

@media (max-width: 991.98px) {
  :root {
    --section-py: 4.5rem 0;
  }

  .page-header-num {
    display: none;
  }

  /* Estilo visual del panel desplegado */
  #navMenuCollapse.show {
    background: rgba(0, 5, 5, 0.97);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    margin-top: 0.6rem;
    padding: 1rem;
  }
}

@media (max-width: 767.98px) {
  :root {
    --section-py: 3.5rem 0;
  }

  .display-heading {
    font-size: clamp(2.8rem, 12vw, 4.5rem);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .cursor-dot,
  .cursor-ring {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .page-header {
    padding: 3.5rem 0 2.5rem;
  }
}

/* ──────────────────────────────────────────────────────────────────
   15. CLIENT LOGOS MARQUEE (CARRUSEL EN LOOP)
   ────────────────────────────────────────────────────────────────── */
.client-marquee-container {
  width: 100%;
  border-bottom: 1px solid rgba(0, 212, 170, 0.15);
  padding: 3.8rem 0;
  overflow: hidden;
  position: relative;
  background: rgba(5, 15, 14, 0.45);
  backdrop-filter: var(--glass-blur-subtle);
  -webkit-backdrop-filter: var(--glass-blur-subtle);
  margin-bottom: 5.5rem; /* Separación amplia de las columnas del footer */
}

.client-marquee-container::before,
.client-marquee-container::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 140px;
  z-index: 5;
  pointer-events: none;
}

.client-marquee-container::before {
  left: 0;
  background: linear-gradient(to right, var(--color-void) 0%, transparent 100%);
}

.client-marquee-container::after {
  right: 0;
  background: linear-gradient(to left, var(--color-void) 0%, transparent 100%);
}

.client-marquee-title {
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(0.95rem, 2.5vw, 1.35rem);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #a7f3d0 0%, var(--color-emerald-glow) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 2.8rem;
  text-shadow: 0 0 40px rgba(0, 212, 170, 0.15);
}

.client-marquee-track {
  display: flex;
  width: max-content;
  gap: 5rem;
  align-items: center;
  animation: infinite-scroll 48s linear infinite;
}

.client-marquee-container:hover .client-marquee-track {
  animation-play-state: paused;
}

.client-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.02);
  border: 1.5px solid rgba(0, 212, 170, 0.28);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  transition: border-color 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
  cursor: pointer;
  flex-shrink: 0;
  animation: logo-float 4s infinite ease-in-out;
}

.client-logo-item:nth-child(even) {
  animation-delay: 2s;
}

.client-logo-item img {
  height: 80%;
  width: 80%;
  object-fit: contain;
  opacity: 0.8;
  filter: grayscale(1) brightness(1.8);
  transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s ease;
}

.client-logo-item:hover {
  border-color: var(--color-emerald-glow);
  background: rgba(0, 212, 170, 0.14);
  box-shadow: 0 0 35px rgba(0, 212, 170, 0.65);
  transform: translateY(-8px) scale(1.1) !important;
  animation-play-state: paused;
}

.client-logo-item:hover img {
  opacity: 1;
  filter: grayscale(0) brightness(1);
  transform: scale(1.05);
}

@keyframes logo-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes infinite-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ──────────────────────────────────────────────────────────────────
   16. SERVICIOS IMAGES LAYOUT & GALERÍA LA HERENCIA
   ────────────────────────────────────────────────────────────────── */
.service-card {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
}

.service-card-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  border-bottom: 1px solid var(--glass-border);
  background: rgba(0, 0, 0, 0.3);
}

.service-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.5) brightness(0.8);
  transition: var(--t-slow);
}

.service-card:hover .service-card-img {
  transform: scale(1.05);
  filter: saturate(0.85) brightness(0.95);
}

.service-card-content {
  padding: 2.2rem 1.8rem 2rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  position: relative;
  z-index: 2;
}

/* Galería de Frames de La Herencia */
.herencia-gallery-section {
  padding: 5.5rem 0 6rem;
  position: relative;
  border-top: 1px solid var(--glass-border);
  background: rgba(5, 12, 12, 0.6);
}

.herencia-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.8rem;
  margin-top: 2rem;
}

.herencia-thumb {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(0, 212, 170, 0.1);
  cursor: pointer;
  background: var(--color-void);
  transition: var(--t-base);
}

.herencia-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.55) brightness(0.72);
  transition: var(--t-slow);
}

.herencia-thumb:hover {
  border-color: var(--color-emerald-glow);
  box-shadow: 0 0 15px rgba(0, 212, 170, 0.28);
  transform: translateY(-2px);
}

.herencia-thumb:hover img {
  transform: scale(1.06);
  filter: saturate(0.9) brightness(0.95);
}

@media (max-width: 1199.98px) {
  .herencia-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 767.98px) {
  .herencia-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 479.98px) {
  .herencia-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ──────────────────────────────────────────────────────────────────
   17. CALL TO ACTION (CTA) UNIFICADOS
   ────────────────────────────────────────────────────────────────── */
.cta-banner {
  padding: 6.5rem 5rem !important; /* Más aire interno */
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--glass-border) !important;
  background: radial-gradient(circle at 50% 120%, rgba(0, 212, 170, 0.1) 0%, rgba(0, 0, 0, 0.4) 60%), var(--glass-bg) !important;
  backdrop-filter: blur(12px) !important;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  border-radius: 6px !important;
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 170, 0.15), transparent);
  transform: translateX(-100%);
  transition: transform 0.8s ease;
  pointer-events: none;
}

.cta-banner:hover {
  border-color: var(--color-emerald-glow) !important;
  box-shadow: 0 20px 50px rgba(0, 212, 170, 0.15), inset 0 0 30px rgba(0, 212, 170, 0.05) !important;
  transform: translateY(-5px) !important;
}

.cta-banner:hover::before {
  transform: translateX(100%);
}

.cta-banner-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 4.5vw, 3.2rem) !important;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin-bottom: 1.5rem !important;
}

.cta-banner-sub {
  color: var(--color-text-muted) !important;
  font-size: 1.05rem !important;
  max-width: 780px;
  margin: 0 auto 2.8rem !important; /* Más separación antes de los botones */
  line-height: 1.85;
  font-weight: 300;
}

/* Padding vertical de la sección externa del CTA */
#services-cta,
#about-cta,
section[aria-label="Contacto CTA"] {
  padding: 8rem 0 !important; /* Más aire externo alrededor del banner */
}

@media (max-width: 767.98px) {
  .cta-banner {
    padding: 4rem 2rem !important;
  }
  #services-cta,
  #about-cta,
  section[aria-label="Contacto CTA"] {
    padding: 5rem 0 !important;
  }
}

/* ── CUSTOM PLAYER CONTROLS GLOBAL ───────────────── */
.showcase-img-wrap {
  position: relative;
}
.youtube-preview-link:hover .youtube-preview-img {
  transform: scale(1.04);
  filter: brightness(0.48) saturate(1.1) !important;
}
.youtube-preview-link:hover .youtube-play-btn {
  background: var(--color-emerald-glow) !important;
  color: var(--color-void) !important;
  box-shadow: 0 0 35px rgba(0, 212, 170, 0.8) !important;
  transform: scale(1.15);
}
.showcase-img-wrap:hover .player-controls-bar,
.project-item:hover .player-controls-bar,
#showreelPlayerContainer:hover .player-controls-bar,
#customPlayerContainer:hover .player-controls-bar {
  opacity: 1 !important;
}
.player-controls-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.95));
  padding: 25px 20px 15px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
  pointer-events: auto;
}
.progress-container {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
}
.progress-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--color-emerald-glow);
  border-radius: 3px;
  position: absolute;
  left: 0;
  top: 0;
  box-shadow: 0 0 10px rgba(0,212,170,0.6);
  transition: width 0.1s linear;
}
.sound-control-btn {
  background: rgba(0, 212, 170, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--color-emerald-glow);
  color: var(--color-text-primary);
  border-radius: 30px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: 'Outfit', sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: var(--t-base);
}
.sound-control-btn:hover {
  background: var(--color-emerald-glow);
  color: var(--color-bg-primary);
  box-shadow: 0 0 15px rgba(0, 212, 170, 0.4);
}

/* Fullscreen mode support */
:-webkit-full-screen {
  background-color: #000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
:-moz-full-screen {
  background-color: #000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
:-ms-fullscreen {
  background-color: #000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
:fullscreen {
  background-color: #000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

:fullscreen video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
:fullscreen .player-controls-bar {
  opacity: 1 !important;
  bottom: 10px !important;
}

/* ──────────────────────────────────────────────────────────────────
   06c. CUSTOM PREMIUM LIGHTBOX OVERLAY
   ────────────────────────────────────────────────────────────────── */
.custom-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.custom-lightbox.active {
  opacity: 1;
  pointer-events: auto;
}
.custom-lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}
.custom-lightbox-img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.8), 0 0 30px rgba(0,212,170,0.2);
  border: 1px solid rgba(255,255,255,0.1);
  transform: scale(0.95);
  transition: transform 0.3s ease;
}
.custom-lightbox.active .custom-lightbox-img {
  transform: scale(1);
}
.custom-lightbox-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.custom-lightbox-close:hover {
  background: rgba(0, 212, 170, 0.2);
  color: var(--color-emerald-glow);
}
.custom-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 2rem;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  z-index: 10000;
}
.custom-lightbox-nav:hover {
  background: rgba(0, 212, 170, 0.2);
  border-color: var(--color-emerald-glow);
  color: var(--color-emerald-glow);
}
.custom-lightbox-nav.prev {
  left: 30px;
}
.custom-lightbox-nav.next {
  right: 30px;
}

@media (max-width: 768px) {
  .custom-lightbox-nav {
    width: 45px;
    height: 45px;
    font-size: 1.3rem;
  }
  .custom-lightbox-nav.prev {
    left: 10px;
  }
  .custom-lightbox-nav.next {
    right: 10px;
  }
  .custom-lightbox-close {
    top: -45px;
  }
}

/* ──────────────────────────────────────────────────────────────────
   06d. GLOBAL INTERACTIVE GALLERY GRID
   ────────────────────────────────────────────────────────────────── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.gallery-item {
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  background: rgba(0,0,0,0.3);
  position: relative;
  transition: all 0.3s ease;
}
.gallery-item video, .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}
.gallery-item:hover {
  border-color: var(--color-emerald-glow);
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 212, 170, 0.25);
}
.gallery-item:hover video, .gallery-item:hover img {
  transform: scale(1.05);
}
.gallery-item-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.2rem;
  pointer-events: none;
  z-index: 2;
}
.gallery-item:hover .gallery-item-overlay {
  opacity: 1;
}
.gallery-item-title {
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
.gallery-item-cat {
  color: var(--color-emerald-glow);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.2rem;
  font-weight: 500;
}
.gallery-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background: rgba(0, 212, 170, 0.85);
  color: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  opacity: 0.8;
  transition: all 0.3s ease;
  z-index: 3;
  box-shadow: 0 0 15px rgba(0, 212, 170, 0.4);
}
.gallery-item:hover .gallery-play-icon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
  background: var(--color-emerald-glow);
}

/* Futuristic Name Effects (About Page) */
.futuristic-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: linear-gradient(90deg, #a7f3d0, var(--color-emerald-glow), #54ffd2, #a7f3d0);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: futuristic-shine 6s linear infinite, futuristic-pulse 3s infinite ease-in-out;
  display: inline-block;
}

@keyframes futuristic-shine {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 300% 50%;
  }
}

@keyframes futuristic-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 2px rgba(0, 212, 170, 0.25)) brightness(1);
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(0, 212, 170, 0.75)) brightness(1.15);
  }
}