/* ================================================================
   TRADECRYPX — HOJA DE ESTILOS PRINCIPAL
   Archivo: css/styles.css

   ÍNDICE:
   1.  Reset & Base + Splash screen
   2.  Fuente personalizada (Makira)
   3.  Variables globales (colores, radios)
   4.  Utilidades (gradiente de texto)
   5.  Botones
   6.  Elementos comunes de sección
   7.  Navegación
   8.  Hero (pantalla principal)
   9.  Sección "¿Qué es?"
   10. Sección Beneficios
   11. Sección Módulos
   12. Sección Resultados (métricas + carrusel capturas)
   13. Sección Videos de alumnos
   14. CTA Final
   15. Footer
   16. Sección Fundador
   17. Responsive (mobile)

   Paleta oficial: #bf00ff (púrpura neon) — definida en :root
================================================================ */


/* ================================================================
   1. RESET & BASE
   Elimina márgenes/paddings por defecto del navegador y
   establece box-sizing: border-box en todos los elementos.
================================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* ================================================================
   SPLASH SCREEN — Pantalla de bienvenida
   Cubre toda la pantalla al cargar. main.js la elimina con fade-out
   después de que el logo termina su animación de respiración.

   TIEMPOS:
   · 0s       → splash aparece (opacidad 1)
   · 0–2.4s   → logo respira (escala pulsante en bucle)
   · 2.4s     → JS agrega clase .splash--out → fade-out en 0.6s
   · 3s total → splash removido del DOM, página visible

   PERSONALIZAR:
   · Cambiar --splash-dur para ajustar duración total
   · Cambiar animation-duration del logo para ritmo de respiración
================================================================ */

/* Overlay fullscreen que cubre todo mientras carga */
#splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Asegura que el splash esté encima de absolutamente todo */
  pointer-events: all;
}

/* Contenedor del logo — centramos y limitamos ancho */
.splash__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Logo con efecto de respiración: blanco neon pulsante */
.splash__logo {
  width: min(320px, 60vw);
  height: auto;
  animation: splash-breathe 1.2s ease-in-out infinite;
  filter: brightness(0) invert(1) drop-shadow(0 0 24px rgba(191, 0, 255, 0.7));
}

/* Respiración = escala suave de 1 → 1.08 → 1 con glow que late */
@keyframes splash-breathe {
  0%, 100% {
    transform: scale(1);
    filter: brightness(0) invert(1) drop-shadow(0 0 18px rgba(191, 0, 255, 0.6));
  }
  50% {
    transform: scale(1.08);
    filter: brightness(0) invert(1) drop-shadow(0 0 40px rgba(191, 0, 255, 1));
  }
}

/* Clase que agrega JS para iniciar el fade-out hacia la landing */
#splash.splash--out {
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none; /* La página debajo ya es interactiva durante el fade */
}


/* ================================================================
   FUENTE PERSONALIZADA — MAKIRA
   Tipografía de los títulos de sección definida por el cliente.
   Makira no está en Google Fonts — requiere archivo local.

   CÓMO ACTIVARLA:
   1. Conseguir los archivos de Makira (.woff2 y/o .woff)
   2. Copiarlos en: assets/fuentes/
   3. Descomentar el bloque @font-face de abajo
   4. El CSS ya aplica 'Makira' en .section-title — funcionará automáticamente

   Mientras tanto se usa 'Space Grotesk' como fuente de respaldo.
================================================================ */
@font-face {
  font-family: 'Makira';
  src: url('../assets/fuentes/makira-black.otf') format('opentype');
  font-weight: 900;
  font-style:  normal;
  font-display: swap;
}
@font-face {
  font-family: 'Makira';
  src: url('../assets/fuentes/makira-semibold.otf') format('opentype');
  font-weight: 600;
  font-style:  normal;
  font-display: swap;
}


/* ================================================================
   2. VARIABLES GLOBALES
   Modificar aquí para cambiar toda la paleta del sitio de una sola vez.

   --purple / --purple-light / --purple-dark : colores oficiales de la marca Tradecrypx
   --bg / --bg-2 / --bg-3                   : niveles de fondo oscuro
   --bg-card                                : fondo de las tarjetas
   --border                                 : color del borde sutil de las cards
   --text / --text-muted                    : colores de texto principal y secundario
   --green                                  : color del punto de estado activo
   --radius / --radius-sm                   : bordes redondeados
================================================================ */
:root {
  /* Paleta oficial Tradecrypx — +15% brillo neon sobre los valores originales */
  --purple:       #bf00ff;   /* original #aa05fe → neon saturado puro */
  --purple-light: #d966ff;   /* original #c94dff → neon claro vibrante  */
  --purple-dark:  #9200e0;   /* original #7800c1 → más luminoso         */

  --bg:      #080A0F;
  --bg-2:    #0D1017;
  --bg-3:    #12161F;
  --bg-card: #141820;

  --border:     rgba(255, 255, 255, 0.07);
  --text:       #E8EAF0;
  --text-muted: #7A8099;
  --green:      #22C55E;

  --radius:    16px;
  --radius-sm: 10px;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden; /* Necesario junto al body para contener overflow en móvil */
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

/* Contenedor centrado con ancho máximo — usado en la mayoría de las secciones */
.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}


/* ================================================================
   3. UTILIDADES
================================================================ */

/* Texto con degradado púrpura — colores oficiales de la marca */
.gradient-text {
  background: linear-gradient(135deg, var(--purple-dark) 0%, var(--purple) 50%, var(--purple-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ================================================================
   4. BOTONES
   Sistema de variantes:
   .btn--primary  → degradado púrpura neon (acción principal)
   .btn--secondary → transparente con borde, hover púrpura (acción secundaria)
   .btn--nav      → versión compacta para la barra de navegación
   .btn--large    → versión grande para el CTA final
================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
}

/* Botón principal — fondo púrpura neon, texto blanco */
.btn--primary {
  background: linear-gradient(135deg, var(--purple), var(--purple-dark));
  color: #fff;
  box-shadow: 0 4px 28px rgba(191, 0, 255, 0.5), 0 0 12px rgba(191, 0, 255, 0.25);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(191, 0, 255, 0.7), 0 0 20px rgba(191, 0, 255, 0.35);
}

/* Botón secundario — borde sutil, hover en púrpura neon */
.btn--secondary {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--border);
}
.btn--secondary:hover {
  border-color: var(--purple);
  color: var(--purple);
  transform: translateY(-2px);
}

/* Botón de la navbar — fondo violeta, texto blanco puro */
.btn--nav {
  background: linear-gradient(135deg, var(--purple), var(--purple-dark));
  color: #ffffff !important;  /* fuerza blanco sobre cualquier herencia */
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 700;
}
.btn--nav:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(191, 0, 255, 0.4);
}

/* Variante grande para el CTA final */
.btn--large {
  padding: 18px 40px;
  font-size: 17px;
}


/* ================================================================
   5. ELEMENTOS COMUNES DE SECCIÓN
   Reutilizados en todas las secciones para mantener consistencia visual.
================================================================ */

/* Etiqueta pequeña sobre el título (ej: "¿Qué incluye?") */
.section-tag {
  display: inline-block;
  background: rgba(191, 0, 255, 0.1);
  border: 1px solid rgba(191, 0, 255, 0.3);
  color: var(--purple);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 50px;
  margin-bottom: 20px;
}

/* Título principal de cada sección — tamaño responsivo con clamp() */
.section-title {
  font-family: 'Makira', 'Space Grotesk', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 20px;
}

/* Párrafo descriptivo debajo del título de sección */
.section-subtitle {
  font-size: 17px;
  color: var(--text-muted);
  max-width: 600px;
  margin-bottom: 48px;
}
.section-subtitle strong {
  color: var(--text); /* Palabras clave en blanco dentro del subtítulo */
}


/* ================================================================
   6. BARRA DE NAVEGACIÓN
   Posición fija. Comienza transparente y gana fondo al hacer scroll
   (la clase .scrolled la agrega main.js).
================================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 20px 0;
  transition: all 0.3s ease;
}

/* Estado al hacer scroll: fondo oscuro translúcido con desenfoque */
.nav.scrolled {
  background: rgba(8, 10, 15, 0.92);
  backdrop-filter: blur(20px);
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.nav__container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo — usa Chakra Petch, la tipografía oficial del branding de Tradecrypx */
.nav__logo {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
}
/* Logo SVG en la nav — blanco con glow neon blanco
   brightness(0) invert(1) convierte cualquier color a blanco puro
   drop-shadow agrega el halo neon blanco alrededor                */
.nav__logo-img {
  height: 72px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}
.nav__logo:hover .nav__logo-img {
  filter: brightness(0) invert(1)
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 22px rgba(255, 255, 255, 0.6));
}

/* Lista de links horizontales en desktop */
.nav__links {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
}
.nav__links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s;
}
.nav__links a:hover { color: var(--text); }

/* Botón hamburguesa — solo visible en móvil (display:none por defecto) */
.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.3s;
}


/* ================================================================
   7. HERO (PANTALLA PRINCIPAL)
   Ocupa el 100% de la altura del viewport.
   Tiene tres capas de fondo: grid de líneas + dos brillos de color.
================================================================ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 140px 24px 80px; /* Padding superior compensa la nav fija */
}

/* Contenedor de los elementos de fondo decorativos */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0; /* Detrás del contenido */
}

/* Grid de líneas finas con degradado radial para difuminarse en los bordes */
.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(191, 0, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191, 0, 255, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  /* mask-image hace que el grid desaparezca en los bordes */
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent);
}

/* Brillos de color difuminados (tipo "aura") */
.hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.15;
}
.hero__glow--1 {
  /* Glow neon principal — esquina superior derecha */
  width: 700px; height: 700px;
  background: var(--purple);
  top: -250px; right: -120px;
  opacity: 0.22; /* subido de 0.15 para más presencia neon */
}
.hero__glow--2 {
  /* Glow neon secundario — esquina inferior izquierda */
  width: 500px; height: 500px;
  background: var(--purple-dark);
  bottom: -150px; left: -120px;
  opacity: 0.18; /* subido de 0.12 */
}

/* Contenido del hero — por encima de los fondos decorativos */
.hero__container {
  max-width: 1160px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Badge de estado "Comunidad activa" */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.25);
  color: var(--green);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 50px;
  margin-bottom: 28px;
}

/* Punto verde que parpadea dentro del badge */
.badge__dot {
  width: 8px; height: 8px;
  background: var(--green);
  border-radius: 50%;
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}

/* Título H1 del hero — el más grande de la página */
.hero__title {
  font-family: 'Makira', 'Space Grotesk', sans-serif;
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 24px;
  letter-spacing: -1px;
}

/* Párrafo descriptivo del hero */
.hero__subtitle {
  font-size: 18px;
  color: var(--text-muted);
  max-width: 560px;
  margin-bottom: 40px;
  line-height: 1.7;
}

/* Contenedor de los dos botones CTA */
.hero__ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 64px;
}

/* Bloque de estadísticas con divisores verticales */
.hero__stats {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.stat { text-align: left; }
.stat__num {
  display: block;
  font-family: 'Makira', 'Space Grotesk', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--purple);
  line-height: 1;
  margin-bottom: 4px;
}
.stat__label {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 120px;
  line-height: 1.3;
}
.stat__divider {
  width: 1px;
  height: 48px;
  background: var(--border);
}

/* Indicador animado de "hacer scroll" al pie del hero */
.hero__scroll {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
}
.hero__scroll span {
  display: block;
  width: 24px; height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  position: relative;
}
/* Punto que se desplaza dentro del indicador de scroll */
.hero__scroll span::after {
  content: '';
  position: absolute;
  width: 4px; height: 8px;
  background: var(--purple);
  border-radius: 2px;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  animation: scroll-anim 2s infinite;
}
@keyframes scroll-anim {
  0%   { top: 6px;  opacity: 1; }
  100% { top: 22px; opacity: 0; }
}


/* ================================================================
   8. SECCIÓN "¿QUÉ ES TRADECRYPX?"
   Grid de 3 tarjetas sobre fondo --bg-2 (ligeramente más claro que el hero).
================================================================ */
.about {
  padding: 100px 0;
  background: var(--bg-2);
}
.about .container     { text-align: center; }
.about .section-subtitle { margin: 0 auto 48px; } /* Centrado horizontal */

/* Grid de 3 columnas para las cards explicativas */
.about__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: left;
}

.about__card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  transition: all 0.3s ease;
}
.about__card:hover {
  border-color: rgba(191, 0, 255, 0.5);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3), 0 0 20px rgba(191, 0, 255, 0.15);
}

.about__icon {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 12px rgba(191, 0, 255, 0.4));
}
.about__card h3 {
  font-family: 'Makira', 'Space Grotesk', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.about__card p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}


/* ================================================================
   9. SECCIÓN BENEFICIOS
   Grid de 2 columnas. Cada item tiene ícono + texto a la derecha.
   Para agregar un beneficio: copiar un .beneficio__item en el HTML.
================================================================ */
.beneficios {
  padding: 100px 0;
  background: var(--bg);
}

.beneficios__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.beneficio__item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  transition: all 0.3s ease;
}
.beneficio__item:hover {
  border-color: rgba(191, 0, 255, 0.25);
  transform: translateY(-2px);
}

/* Contenedor cuadrado del ícono (imagen) */
.beneficio__icon {
  flex-shrink: 0;
  width: 64px; height: 64px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.beneficio__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.beneficio__content h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}
.beneficio__content p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}


/* ================================================================
   10. SECCIÓN MÓDULOS
   Dos tarjetas grandes apiladas con un conector visual entre ellas.
   El sufijo --gold se conserva como nombre histórico de la variante
   del módulo avanzado, pero el acento visual hoy es púrpura.
================================================================ */
.modulos {
  padding: 100px 0;
  background: var(--bg-2);
}

.modulos__timeline {
  display: flex;
  flex-direction: column;
  /* Sin max-width: ocupa todo el container, alineado con beneficios y título */
}

.modulo__card {
  position: relative;             /* Para posicionar el número absoluto */
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
  transition: all 0.3s ease;
}
.modulo__card:hover {
  border-color: rgba(191, 0, 255, 0.3);
  transform: translateX(4px);
}

/* Módulo avanzado: fondo con leve tinte púrpura para diferenciarlo */
.modulo__card--gold {
  border-color: rgba(191, 0, 255, 0.2);
  background: linear-gradient(135deg, var(--bg-card), rgba(191, 0, 255, 0.04));
}

/* Línea de degradado que conecta los dos módulos (alineado con el centro del poster) */
.modulo__connector {
  width: 2px;
  height: 40px;
  background: linear-gradient(to bottom, var(--purple), transparent);
  margin-left: 139px; /* Centro de la card del poster (280px / 2 - 1) */
}

/* Número grande decorativo (01 / 02) — esquina superior derecha */
.modulo__num {
  position: absolute;
  top: 24px;
  right: 32px;
  font-family: 'Makira', 'Space Grotesk', sans-serif;
  font-size: 3rem;
  font-weight: 800;
  color: rgba(191, 0, 255, 0.25);
  line-height: 1;
  min-width: 70px;
  flex-shrink: 0;
}

/* ================================================================
   Fila del módulo: poster (card aparte) + card del módulo
================================================================ */
.modulo__row {
  display: flex;
  gap: 24px;
  align-items: stretch;
}
.modulo__row > .modulo__card { flex: 1; }

/* ================================================================
   Poster del módulo — card independiente con imagen branded TradeCrypx
================================================================ */
.modulo__poster {
  position: relative;
  flex-shrink: 0;
  width: 280px;
  aspect-ratio: 1 / 1;            /* Cuadrado para que entren las imágenes 1080x1080 */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.modulo__poster:hover {
  border-color: rgba(191, 0, 255, 0.45);
  box-shadow: 0 0 28px rgba(191, 0, 255, 0.25), 0 12px 32px rgba(0, 0, 0, 0.45);
  transform: translateY(-2px);
}
.modulo__poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Variante --gold del poster (Nivel 2 Avanzado): único acento amarillo
   del sitio — se mantiene a propósito para diferenciar al hacer hover */
.modulo__poster--gold:hover {
  border-color: rgba(255, 200, 0, 0.45);
  box-shadow: 0 0 28px rgba(255, 200, 0, 0.2), 0 12px 32px rgba(0, 0, 0, 0.45);
}

/* Etiqueta de nivel dentro de la card del módulo */
.modulo__badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 50px;
  margin-bottom: 10px;
}
/* Variante destacada del badge para el módulo avanzado (púrpura) */
.modulo__badge--gold {
  background: rgba(191, 0, 255, 0.1);
  color: var(--purple);
  border: 1px solid rgba(191, 0, 255, 0.25);
}

.modulo__content h3 {
  font-family: 'Makira', 'Space Grotesk', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.modulo__content p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 20px;
}

/* Lista de contenidos del módulo en 2 columnas */
.modulo__list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.modulo__list li {
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Punto púrpura neon como viñeta de la lista */
.modulo__list li::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--purple);
  border-radius: 50%;
  flex-shrink: 0;
}


/* ================================================================
   11. SECCIÓN RESULTADOS
   Tres métricas grandes centradas + carrusel infinito de capturas
   de ganancias debajo (ocupa full width, fuera del .container).
================================================================ */
.resultados {
  padding: 100px 0;
  background: var(--bg);
  text-align: center;
}
.resultados .section-subtitle { margin: 0 auto 48px; }

.resultados__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

.resultado__card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
}
.resultado__card:hover {
  border-color: rgba(191, 0, 255, 0.5);
  transform: translateY(-4px);
  box-shadow: 0 0 28px rgba(191, 0, 255, 0.18);
}

.resultado__num {
  font-family: 'Makira', 'Space Grotesk', sans-serif;
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
}
.resultado__label {
  font-size: 14px;
  color: var(--text-muted);
  text-align: center;
  max-width: 160px;
}

/* Aviso legal visible hasta tener datos reales */
.resultados__disclaimer {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.25);
}



/* ================================================================
   12. CARRUSEL DE CAPTURAS DE GANANCIAS
   Loop infinito controlado por JS (initMarquee en main.js).
   El HTML duplica las cards al final del track para que el ojo
   no vea el punto de reset.
   VELOCIDAD: ajustar el parámetro `speed` de initMarquee en main.js.
================================================================ */

/* Wrapper full-width del carrusel de capturas */
.capturas__carousel-wrapper {
  position: relative;
  width: 100%;
  overflow: clip; /* clip no crea scroll container — evita zoom-out en móvil */
  margin-top: 48px;
}

/* Track del carrusel de capturas — el movimiento lo maneja JS (initMarquee) */
.capturas__track {
  display: flex;
  gap: 20px;
  width: max-content;  /* Se expande tanto como sus hijos */
  padding: 12px 0;
  will-change: transform; /* Hint al navegador para optimizar la animación */
}

/* Tarjeta de captura — dimensiones 2:1 (apaisado) para imágenes branded TradeCrypx.
   Trazo violeta con glow sutil para darle presencia sobre el fondo oscuro. */
.captura__card {
  width: 390px;
  height: 200px;
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(191, 0, 255, 0.45);
  box-shadow:
    0 0 0 1px rgba(191, 0, 255, 0.15),
    0 0 18px rgba(191, 0, 255, 0.18),
    0 8px 24px rgba(0, 0, 0, 0.35);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.captura__card:hover {
  border-color: rgba(217, 102, 255, 0.85);
  box-shadow:
    0 0 0 1px rgba(191, 0, 255, 0.3),
    0 0 32px rgba(191, 0, 255, 0.45),
    0 12px 32px rgba(0, 0, 0, 0.5);
  transform: scale(1.03);
}

/* Imagen real de captura — ocupa toda la card */
.captura__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fades laterales del carrusel de capturas */
.capturas__fade {
  position: absolute;
  top: 0; bottom: 0;
  width: 100px;
  pointer-events: none;
  z-index: 2;
}
.capturas__fade--left  { left:  0; background: linear-gradient(to right, var(--bg), transparent); }
.capturas__fade--right { right: 0; background: linear-gradient(to left,  var(--bg), transparent); }


/* ================================================================
   13. SECCIÓN VIDEOS DE ALUMNOS
   Tres cards fijas en fila (sin flechas, sin carrusel auto).
   Cada card es un <video> con preload="none" + poster propio para
   que la miniatura sea siempre la imagen de portada.
================================================================ */
.videos {
  padding: 100px 0 60px;
  background: var(--bg-2);
}
.videos .section-subtitle { max-width: 500px; }

/* Wrapper del carrusel de videos — dentro del container, alineado con el título */
.videos__carousel-wrapper {
  position: relative;
  overflow: clip;
  margin-top: 48px;
  padding: 0; /* el container ya provee el padding lateral */
}

/* Track: fila de 3 cards que llenan el container */
.videos__track {
  display: flex;
  gap: 24px;
}

/* Card de video individual — 1/3 del container exacto */
.video__card {
  flex: 1;
  min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.video__card:hover {
  border-color: rgba(191, 0, 255, 0.35);
  transform: translateY(-4px);
}

/* Indicador "Deslizá →" — oculto en desktop, visible solo en mobile */
.videos__swipe-hint { display: none; }

/* Contenedor del video — relación de aspecto 9:16 (vertical, estilo reel) */
.video__player-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #000;
  max-height: 480px;
}

/* El elemento <video> ocupa toda la card */
.video__player-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Info debajo del video: badge, nombre, descripción */
.video__info {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.video__badge {
  display: inline-block;
  background: rgba(191, 0, 255, 0.1);
  border: 1px solid rgba(191, 0, 255, 0.25);
  color: var(--purple-light);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 50px;
  width: fit-content;
}

.video__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.video__desc {
  font-size: 13px;
  color: var(--text-muted);
}

/* Responsive: cards más angostas en móvil */
@media (max-width: 768px) {
  .video__card    { min-width: 300px; }
  .videos__carousel-wrapper { padding: 0 48px; }
  .captura__card  { width: 320px; height: 164px; }
}


/* ================================================================
   14. CTA FINAL
   Sección de cierre con llamada a la acción principal (WhatsApp).
   Reutiliza el glow decorativo del hero (hero__glow--1).
================================================================ */
.cta-final {
  padding: 120px 0;
  background: var(--bg);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Fondo con brillo decorativo reutilizado del hero */
.cta-final__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* El contenido queda por encima del brillo de fondo */
.cta-final .container { position: relative; z-index: 1; }
.cta-final .section-subtitle { margin: 0 auto 40px; }
.cta-final .section-title { margin-bottom: 16px; }
.cta-final__content .section-tag,
.cta-final__content .section-title,
.cta-final__content .section-subtitle { display: block; }


/* ================================================================
   15. FOOTER
   Tres columnas en la parte superior: marca, navegación, redes.
   Pie con copyright y disclaimer legal de trading.
================================================================ */
.footer {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  padding: 60px 0 32px;
}

/* Grid de 3 columnas para el contenido superior del footer */
.footer__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr;
  gap: 48px;
  margin-bottom: 48px;
}

.footer__brand p {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 12px;
  max-width: 260px;
}

/* Logo en footer — un poco más pequeño que en la nav */
.footer__brand .nav__logo-img {
  height: 40px;
}

/* Cabeceras de columna en el footer */
.footer__links h4,
.footer__social h4 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.footer__links ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer__links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}
.footer__links a:hover { color: var(--purple); }

/* Links de redes sociales con ícono SVG + texto */
.social__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.social__link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}
.social__link:hover { color: var(--purple); }

/* Barra inferior del footer: copyright + disclaimer */
.footer__bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.footer__bottom p     { font-size: 13px; color: var(--text-muted); }
.footer__disclaimer   { font-size: 11px !important; opacity: 0.5; }


/* ================================================================
   16. SECCIÓN FUNDADOR — "Detrás de TradeCrypx"
   Fondo negro con números binarios decorativos y glow lateral.
   Layout 2 columnas: texto izquierda, foto + cita derecha.
   (Definida al final del archivo por orden histórico, pero aparece
   visualmente entre el Hero y "¿Qué es?" en el HTML.)
================================================================ */
.fundador {
  position: relative;
  padding: 100px 0;
  background: #000;
  overflow: hidden;
}

.fundador__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.fundador__binary {
  display: none;
}

.fundador__glow {
  position: absolute;
  right: -100px;
  top: 50%;
  transform: translateY(-50%);
  width: 600px;
  height: 700px;
  background: radial-gradient(ellipse, rgba(100, 60, 255, 0.25) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(60px);
}

.fundador__container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.fundador__tags {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.fundador__tag {
  background: linear-gradient(135deg, #8839ff, #6518d9);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 7px 18px;
  border-radius: 6px;
}

.fundador__title {
  font-family: 'Makira', 'Space Grotesk', sans-serif;
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 28px;
  color: #fff;
}

.fundador__text {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.75;
  margin-bottom: 16px;
}
.fundador__text strong { color: var(--purple); }

.fundador__highlight {
  color: var(--purple);
  font-weight: 600;
}

/* Degradado del título — mismo concepto que los tags (#8839ff → #6518d9) */
.fundador__gradient-text {
  background: linear-gradient(135deg, #8839ff, #6518d9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.fundador__visual {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Contenedor del recorte de Uriel — limpio, sin efectos */
.fundador__photo-wrap {
  position: relative;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.fundador__photo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
}

.fundador__quote {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid var(--purple);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.fundador__quote-icon {
  flex-shrink: 0;
  margin-top: 4px;
  opacity: 0.5;
}
.fundador__quote p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  font-style: italic;
}


/* ================================================================
   17. RESPONSIVE — MOBILE (≤ 768px y ≤ 480px)
   Todos los grids pasan a 1 columna.
   La nav colapsa en menú hamburguesa (toggled por main.js).
================================================================ */
@media (max-width: 768px) {

  /* Nav móvil: el menú se despliega en pantalla completa */
  .nav__links {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(8, 10, 15, 0.98);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
    z-index: 999;
  }
  .nav__links.open { display: flex; }
  .nav__links a    { font-size: 20px; }
  .nav__burger     { display: flex; z-index: 1001; }

  /* Hero */
  .hero__title  { font-size: 2.4rem; }
  .hero__ctas   { flex-direction: column; }
  .hero__stats  { gap: 24px; }
  .stat__divider { display: none; }

  /* Glows del hero y CTA: reducir tamaño para que no desborden en móvil */
  .hero__glow--1 { width: 320px; right: -80px; }
  .hero__glow--2 { width: 260px; left: -60px; }
  .hero    { overflow: hidden; }
  .cta-final { overflow: hidden; }

  /* Fundador → 1 columna en móvil */
  .fundador__container  { grid-template-columns: 1fr; gap: 40px; }
  .fundador__photo-wrap { aspect-ratio: 4 / 3; }

  /* Grids → 1 columna */
  .about__cards      { grid-template-columns: 1fr; }
  .beneficios__grid  { grid-template-columns: 1fr; }
  .resultados__grid  { grid-template-columns: 1fr; }

  /* Módulos: número y contenido apilados verticalmente */
  .modulo__card { flex-direction: column; gap: 16px; }
  .modulo__num  { font-size: 2rem; min-width: auto; }
  .modulo__list { grid-template-columns: 1fr; }

  /* Fila del módulo en mobile: poster arriba, card abajo */
  .modulo__row { flex-direction: column; gap: 16px; }
  .modulo__poster { width: 100%; max-width: 360px; align-self: center; }

  /* Videos en mobile: scroll táctil horizontal con el dedo */
  .videos__carousel-wrapper {
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 24px;
    scrollbar-width: none; /* oculta la scrollbar en Firefox */
  }
  .videos__carousel-wrapper::-webkit-scrollbar { display: none; } /* oculta en Chrome/Safari */
  .video__card {
    min-width: calc(100vw - 64px);
    scroll-snap-align: start;
  }

  /* Indicador de deslizamiento — aparece debajo del carrusel en mobile */
  .videos__swipe-hint {
    display: block;
    text-align: center;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.05em;
    margin-top: 16px;
    transition: opacity 0.6s ease;
  }
  /* Clase agregada por JS después del primer deslizamiento */
  .videos__swipe-hint--hidden {
    opacity: 0;
    pointer-events: none;
  }

  /* Carrusel de capturas: contener el track dentro del wrapper */
  .capturas__carousel-wrapper { overflow: hidden; max-width: 100vw; }
  .captura__card  { width: 320px; height: 164px; }

  /* Footer → 1 columna */
  .footer__top    { grid-template-columns: 1fr; gap: 32px; }
  .footer__bottom { flex-direction: column; text-align: center; }

}

@media (max-width: 480px) {
  .hero          { padding: 120px 24px 60px; }
  .section-title { font-size: 1.8rem; }
}