/* ================================================
   LUMINARIS — Estilos principales
   Versión: 1.0  |  Autor: JMP Studio
   ------------------------------------------------
   ÍNDICE:
   1.  Variables y reset global
   2.  Partículas de fondo
   3.  Botón flotante WhatsApp
   4.  Navbar / Header
   5.  Menú mobile (hamburguesa)
   6.  Sección Hero
   7.  Sección Colección
   8.  Cards de criaturas
   9.  Sección Universo
   10. Sección Cómo Pedir
   11. Sección Contacto
   12. Footer
   13. Lightbox
   14. Ficha modal de criatura
   15. Animaciones y reveals al scroll
   16. Botones y elementos reutilizables
   17. Responsive — Mobile First
   ================================================ */


/* ================================================
   1. VARIABLES Y RESET GLOBAL
   ================================================ */

:root {
  /* Paleta neón sobre negro */
  --bg:        #000000;
  --bg2:       #080808;
  --bg3:       #0f0f0f;
  --card-bg:   rgba(255,255,255,0.025);
  --border:    rgba(255,255,255,0.07);
  --border2:   rgba(255,255,255,0.12);

  /* Colores neón */
  --cyan:      #00E5FF;
  --purple:    #BF5FFF;
  --pink:      #FF6EC7;
  --green:     #39FF14;
  --gold:      #FFD700;

  /* Texto */
  --white:     #FFFFFF;
  --gray:      #888888;
  --gray2:     #444444;

  /* Tipografía */
  --font-display: 'Cinzel', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* Layout */
  --max-width: 1140px;
  --r:  10px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* Transición estándar */
  --tr: all 0.3s ease;

  /* Secciones */
  --section-pad: 100px 0;
}

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

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

body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: var(--font-body);
  cursor: pointer;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--cyan); border-radius: 2px; }

/* Contenedor global */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
}


/* ================================================
   2. PARTÍCULAS DE FONDO
   Generadas por JS — efecto ambiental animado
   ================================================ */

#particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: particle-float linear infinite;
}

@keyframes particle-float {
  0%   { transform: translateY(100vh) scale(0); opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.4; }
  100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}


/* ================================================
   3. BOTÓN FLOTANTE DE WHATSAPP
   Siempre visible — principal CTA de conversión
   ================================================ */

.wa-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #25D366;
  color: #fff;
  padding: 13px 20px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  transition: var(--tr);
  /* Animación de entrada suave */
  animation: wa-bounce 3s ease-in-out infinite;
}

.wa-float:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 8px 30px rgba(37, 211, 102, 0.5);
}

@keyframes wa-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}


/* ================================================
   4. NAVBAR / HEADER
   Sticky con blur al hacer scroll (clase .scrolled)
   ================================================ */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  transition: background 0.4s ease, border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}

/* Clase agregada por JS al hacer scroll */
.navbar.scrolled {
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: var(--border);
}

.nav-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.nav-logo-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(0, 229, 255, 0.3);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.2);
}

.nav-logo-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2px;
  display: block;
  /* Gradiente de texto */
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-logo-sub {
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--gray);
  display: block;
  text-transform: uppercase;
}

/* Links de navegación desktop */
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gray);
  transition: color 0.2s;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--cyan);
  transition: width 0.3s ease;
}

.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after { width: 100%; }

/* CTA de navbar */
.nav-cta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cyan);
  border: 1px solid rgba(0, 229, 255, 0.4);
  padding: 9px 20px;
  border-radius: var(--r);
  transition: var(--tr);
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-cta:hover {
  background: rgba(0, 229, 255, 0.08);
  border-color: var(--cyan);
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.15);
}


/* ================================================
   5. MENÚ MOBILE (HAMBURGUESA)
   ================================================ */

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: none;
  padding: 8px;
  cursor: pointer;
  z-index: 600;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--white);
  border-radius: 2px;
  transition: var(--tr);
  transform-origin: center;
}

/* Animación X al estar activo */
.hamburger.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Menú desplegable mobile */
.mobile-menu {
  display: none;
  flex-direction: column;
  padding: 20px 32px 32px;
  background: rgba(0, 0, 0, 0.97);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  /* Animación de entrada */
  animation: slideDown 0.3s ease;
}

.mobile-menu.open { display: flex; }

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 24px;
}

.mobile-menu nav a {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gray);
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  transition: color 0.2s;
}

.mobile-menu nav a:hover { color: var(--white); }

.mobile-cta {
  display: block;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--cyan);
  color: #000;
  padding: 14px;
  border-radius: var(--r);
  margin-top: 8px;
  transition: var(--tr);
}

.mobile-cta:hover { background: var(--purple); color: var(--white); }


/* ================================================
   6. SECCIÓN HERO
   Primera impresión — texto centrado sobre negro
   ================================================ */

.hero {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 32px 80px;
  /* Gradiente radial sutil de profundidad */
  background: radial-gradient(
    ellipse at 50% 60%,
    rgba(0, 229, 255, 0.04) 0%,
    transparent 70%
  );
}

.hero-eyebrow {
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 20px;
  opacity: 0.8;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(42px, 8vw, 90px);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 24px;
  /* Texto en blanco puro degradando */
  background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.65) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-title em {
  font-style: italic;
  background: linear-gradient(90deg, var(--cyan), var(--purple), var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  display: block;
}

.hero-desc {
  font-size: clamp(15px, 2vw, 17px);
  color: var(--gray);
  max-width: 520px;
  margin: 0 auto 40px;
  line-height: 1.8;
  font-weight: 300;
}

.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Indicador de scroll */
.scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 6px;
}

.scroll-dot {
  width: 4px;
  height: 8px;
  background: var(--cyan);
  border-radius: 2px;
  animation: scroll-anim 2s ease-in-out infinite;
}

@keyframes scroll-anim {
  0%, 100% { transform: translateY(0); opacity: 1; }
  80%       { transform: translateY(12px); opacity: 0; }
}


/* ================================================
   7. SECCIÓN COLECCIÓN
   ================================================ */

.coleccion {
  position: relative;
  z-index: 5;
  padding: var(--section-pad);
  background: linear-gradient(180deg, transparent, var(--bg2) 20%, var(--bg2) 80%, transparent);
}

/* Encabezado de sección — reutilizable */
.section-header {
  text-align: center;
  margin-bottom: 48px;
}

.section-eyebrow {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 12px;
  opacity: 0.8;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 16px;
  color: var(--white);
}

.section-title em {
  font-style: italic;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-desc {
  font-size: 15px;
  color: var(--gray);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Filtros de categoría */
.filters {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.filter {
  padding: 8px 22px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 1px solid var(--border2);
  border-radius: 30px;
  background: transparent;
  color: var(--gray);
  transition: var(--tr);
}

.filter:hover {
  border-color: rgba(0, 229, 255, 0.4);
  color: var(--cyan);
}

.filter.active {
  background: rgba(0, 229, 255, 0.1);
  border-color: var(--cyan);
  color: var(--cyan);
}


/* ================================================
   8. CARDS DE CRIATURAS
   ================================================ */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

/* Card individual */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  /* Animación de entrada al scroll */
  opacity: 0;
  transform: translateY(24px);
}

.card.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 229, 255, 0.25);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.6),
    0 0 0 1px rgba(0,229,255,0.08),
    0 0 40px rgba(0,229,255,0.06);
}

/* Área de imagen */
.card-img {
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
}

.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.card:hover .card-img img { transform: scale(1.06); }

/* Overlay gradiente inferior */
.card-img::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0,0,0,0.92), transparent);
  pointer-events: none;
}

/* Glow animado al hover */
.card-glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  border-radius: 0;
}

.card:hover .card-glow { opacity: 1; animation: card-pulse 2.5s ease-in-out infinite; }

@keyframes card-pulse {
  0%, 100% { box-shadow: inset 0 0 40px rgba(0,229,255,0.1); }
  50%       { box-shadow: inset 0 0 60px rgba(0,229,255,0.22); }
}

/* Badge de elemento */
.card-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
  backdrop-filter: blur(8px);
  border: 1px solid;
}

/* Nombre sobre la imagen */
.card-name-over {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
  padding: 0 16px;
}

.card-name-over h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* Cuerpo de la card */
.card-body { padding: 18px 20px; }

.card-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
}

.card-meta-item { display: flex; flex-direction: column; gap: 2px; }

.card-meta-label {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gray);
}

.card-meta-value { font-size: 13px; font-weight: 500; }

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-price {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
}

.card-btn {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: var(--r);
  border: 1px solid;
  background: transparent;
  transition: var(--tr);
  min-height: 44px;
  display: flex;
  align-items: center;
}

.card-btn:hover { transform: scale(1.05); }

/* Estado vacío (sin resultados en filtro) */
.grid-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--gray);
}


/* ================================================
   9. SECCIÓN UNIVERSO
   ================================================ */

.universo {
  position: relative;
  z-index: 5;
  padding: var(--section-pad);
}

.universo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.universo-desc {
  font-size: 15px;
  color: var(--gray);
  line-height: 1.85;
  margin-bottom: 16px;
}

/* Logo showcase con glow */
.logo-showcase {
  position: relative;
  width: 320px;
  height: 320px;
  margin: 0 auto 32px;
}

.logo-big {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgba(0, 229, 255, 0.2);
  position: relative;
  z-index: 2;
  /* Parallax sutil con hover */
  transition: transform 0.1s ease;
}

.logo-showcase:hover .logo-big { transform: scale(1.03); }

.logo-glow {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,229,255,0.12) 0%, transparent 70%);
  animation: logo-pulse 4s ease-in-out infinite;
  z-index: 1;
}

@keyframes logo-pulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50%       { transform: scale(1.08); opacity: 1; }
}

/* Stats del universo */
.universe-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.u-stat {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
  text-align: center;
}

.u-stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--cyan);
  line-height: 1;
  margin-bottom: 6px;
}

.u-stat-label {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gray);
}


/* ================================================
   10. SECCIÓN CÓMO PEDIR
   ================================================ */

.como-pedir {
  position: relative;
  z-index: 5;
  padding: var(--section-pad);
  background: linear-gradient(180deg, transparent, var(--bg2) 20%, var(--bg2) 80%, transparent);
}

.pasos {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 56px;
  flex-wrap: wrap;
  justify-content: center;
}

.paso {
  flex: 1;
  min-width: 220px;
  max-width: 300px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  text-align: center;
  transition: var(--tr);
}

.paso:hover {
  border-color: rgba(0, 229, 255, 0.2);
  transform: translateY(-4px);
}

.paso-num {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 900;
  color: rgba(0, 229, 255, 0.15);
  line-height: 1;
  margin-bottom: 16px;
  letter-spacing: -2px;
}

.paso-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 10px;
  letter-spacing: 1px;
}

.paso-desc {
  font-size: 13px;
  color: var(--gray);
  line-height: 1.7;
}

.paso-arrow {
  font-size: 24px;
  color: var(--gray2);
  flex-shrink: 0;
}

.como-cta {
  text-align: center;
}

.como-nota {
  font-size: 12px;
  color: var(--gray);
  margin-top: 14px;
  letter-spacing: 0.5px;
}


/* ================================================
   11. SECCIÓN CONTACTO
   ================================================ */

.contacto {
  position: relative;
  z-index: 5;
  padding: var(--section-pad);
}

.contacto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.contacto-desc {
  font-size: 15px;
  color: var(--gray);
  line-height: 1.8;
  margin-bottom: 28px;
}

.contacto-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: rgba(255,255,255,0.75);
}

.info-icon { font-size: 18px; }

/* Card de formulario */
.contacto-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 36px;
}

.form-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 6px;
  letter-spacing: 1px;
}

.form-sub {
  font-size: 13px;
  color: var(--gray);
  margin-bottom: 28px;
}

/* Grupos de campos */
.field-group { margin-bottom: 16px; }

.field-group label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 7px;
}

.field-group input,
.field-group select {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  padding: 13px 16px;
  font-size: 14px;
  color: var(--white);
  font-family: var(--font-body);
  outline: none;
  transition: var(--tr);
  min-height: 48px; /* Touch-friendly */
  appearance: none;
}

.field-group input:focus,
.field-group select:focus {
  border-color: rgba(0, 229, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.08);
  background: rgba(255,255,255,0.06);
}

.field-group input::placeholder { color: var(--gray2); }

.field-group select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.field-group select option { background: #111; color: var(--white); }

.form-nota {
  font-size: 11px;
  color: var(--gray2);
  text-align: center;
  margin-top: 12px;
  letter-spacing: 0.3px;
}


/* ================================================
   12. FOOTER
   ================================================ */

.footer {
  position: relative;
  z-index: 5;
  padding: 48px 0 32px;
  border-top: 1px solid var(--border);
  background: var(--bg2);
}

.footer-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(0,229,255,0.2);
}

.footer-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.footer-tagline {
  font-size: 11px;
  color: var(--gray);
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.footer-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-links a {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gray);
  transition: color 0.2s;
}

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

.footer-copy {
  font-size: 12px;
  color: var(--gray2);
  text-align: right;
  line-height: 1.8;
}


/* ================================================
   13. LIGHTBOX
   Ver imagen en pantalla completa
   ================================================ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(0,0,0,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lightbox.open {
  opacity: 1;
  pointer-events: all;
}

.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--r);
  animation: zoom-in 0.3s ease;
}

@keyframes zoom-in {
  from { transform: scale(0.9); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  color: var(--white);
  font-size: 18px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--tr);
}

.lightbox-close:hover { background: rgba(255,255,255,0.15); }


/* ================================================
   14. FICHA MODAL DE CRIATURA
   Showcase con parallax + partículas + lore
   ================================================ */

.ficha-overlay {
  position: fixed;
  inset: 0;
  z-index: 700;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.ficha-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.ficha {
  background: #060606;
  border: 1px solid var(--border2);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 860px;
  max-height: 90vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  animation: ficha-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ficha-in {
  from { transform: scale(0.94) translateY(20px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

/* Imagen de la ficha */
.ficha-img-wrap {
  position: relative;
  min-height: 440px;
  overflow: hidden;
}

.ficha-img-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.1s linear;
  will-change: transform;
}

.ficha-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.15), rgba(0,0,0,0.5));
}

/* Partículas flotantes dentro de ficha */
.ficha-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.fp {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  animation: fp-float ease-in-out infinite;
}

@keyframes fp-float {
  0%,100% { transform: translateY(0) scale(1); opacity: 0.5; }
  50%      { transform: translateY(-22px) scale(1.6); opacity: 1; }
}

/* Botones sobre la imagen */
.ficha-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--r);
  color: var(--white);
  width: 36px;
  height: 36px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--tr);
}

.ficha-close:hover { background: rgba(255,255,255,0.15); }

.ficha-lightbox-btn {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 10;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--r);
  color: var(--white);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--tr);
}

.ficha-lightbox-btn:hover { background: rgba(255,255,255,0.15); }

/* Cuerpo de la ficha */
.ficha-body {
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}

.ficha-body::-webkit-scrollbar { width: 3px; }
.ficha-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); }

.ficha-eyebrow {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gray);
}

.ficha-title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.1;
  /* Color se asigna dinámicamente via JS */
}

.ficha-lore {
  font-size: 13px;
  color: var(--gray);
  line-height: 1.85;
}

/* Grid de stats dentro de la ficha */
.ficha-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ficha-stat {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 13px;
}

.ficha-stat-label {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 5px;
  display: block;
}

.ficha-stat-value {
  font-size: 14px;
  font-weight: 500;
  display: block;
}

.ficha-divider {
  border: none;
  border-top: 1px solid var(--border);
}

.ficha-precio {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
}

.ficha-btns { display: flex; flex-direction: column; gap: 10px; }

.ficha-btn-comprar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.ficha-nota {
  font-size: 11px;
  color: var(--gray2);
  text-align: center;
  letter-spacing: 0.3px;
}


/* ================================================
   15. ANIMACIONES Y REVEAL AL SCROLL
   ================================================ */

/* Clase base — elementos ocultos esperando scroll */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/* Clase agregada por JS con IntersectionObserver */
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delay escalonado para hijos */
.reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal:nth-child(3) { transition-delay: 0.2s; }
.reveal:nth-child(4) { transition-delay: 0.3s; }


/* ================================================
   16. BOTONES REUTILIZABLES
   ================================================ */

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cyan);
  color: #000;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: var(--r);
  border: none;
  cursor: pointer;
  transition: var(--tr);
  min-height: 48px;
  text-decoration: none;
  font-family: var(--font-body);
}

.btn-primary:hover {
  background: var(--purple);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(191, 95, 255, 0.3);
}

.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 13px 28px;
  border-radius: var(--r);
  border: 1px solid var(--border2);
  cursor: pointer;
  transition: var(--tr);
  min-height: 48px;
  text-decoration: none;
  font-family: var(--font-body);
}

.btn-secondary:hover {
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.05);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--gray);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 12px;
  border-radius: var(--r);
  cursor: pointer;
  transition: var(--tr);
  min-height: 44px;
  font-family: var(--font-body);
}

.btn-ghost:hover { border-color: rgba(255,255,255,0.25); color: var(--white); }

.btn-large { padding: 16px 40px; font-size: 13px; }


/* ================================================
   17. RESPONSIVE — MOBILE FIRST
   ================================================ */

@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .hamburger { display: flex; }
  .hero { padding: 100px 20px 50px; }
  .hero-title { font-size: clamp(28px, 9vw, 52px); }
  .hero-desc { font-size: 14px; }
  :root { --section-pad: 60px 0; }
  .grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .universo-grid { grid-template-columns: 1fr; gap: 32px; }
  .logo-showcase { width: 200px; height: 200px; }
  .paso-arrow { display: none; }
  .pasos { flex-direction: column; align-items: stretch; }
  .paso { max-width: 100%; padding: 24px 20px; }
  .contacto-grid { grid-template-columns: 1fr; gap: 32px; }
  .ficha {
    grid-template-columns: 1fr;
    max-height: 92vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ficha-img-wrap { min-height: 240px; max-height: 42vh; }
  .ficha-body { padding: 20px 18px 32px; max-height: none; overflow: visible; }
  .footer-content { flex-direction: column; text-align: center; }
  .footer-copy { text-align: center; }
  .footer-links { justify-content: center; }
}

/* ================================================
   MÓVIL — Diseño nivel app premium
   Rediseño completo para pantallas pequeñas
   ================================================ */
@media (max-width: 560px) {

  /* Base — tipografía ligeramente reducida */
  html { font-size: 14.5px; }

  /* Contenedor con más aire */
  .container { padding: 0 18px; }

  /* ---- NAVBAR MÓVIL ---- */
  .nav-container {
    padding: 0 18px;
    height: 62px;
  }
  .nav-logo-img {
    width: 34px;
    height: 34px;
  }
  .nav-logo-name { font-size: 16px; letter-spacing: 1.5px; }
  .nav-logo-sub { display: none; }
  .hamburger { padding: 6px; }

  /* ---- MENÚ MÓVIL ---- */
  .mobile-menu { padding: 16px 18px 28px; }
  .mobile-menu nav a {
    font-size: 15px;
    padding: 14px 0;
    letter-spacing: 1px;
  }
  .mobile-cta { font-size: 14px; padding: 15px; }

  /* ---- HERO MÓVIL ---- */
  .hero {
    padding: 100px 18px 52px;
    min-height: 100svh; /* Safe viewport height */
    background: radial-gradient(
      ellipse at 50% 70%,
      rgba(0, 229, 255, 0.06) 0%,
      transparent 65%
    );
  }
  .hero-eyebrow {
    font-size: 9px;
    letter-spacing: 2.5px;
    margin-bottom: 14px;
  }
  .hero-title {
    font-size: clamp(32px, 9vw, 46px);
    margin-bottom: 18px;
    letter-spacing: -0.5px;
  }
  .hero-desc {
    font-size: 13.5px;
    line-height: 1.75;
    margin-bottom: 32px;
    max-width: 100%;
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary {
    width: 100%;
    justify-content: center;
    padding: 16px;
    font-size: 12px;
    letter-spacing: 1.5px;
  }
  .scroll-indicator { bottom: 24px; }

  /* ---- SECCIONES ---- */
  :root { --section-pad: 52px 0; }

  /* ---- ENCABEZADOS DE SECCIÓN ---- */
  .section-eyebrow { font-size: 10px; letter-spacing: 2.5px; }
  .section-title {
    font-size: clamp(24px, 7vw, 34px);
    line-height: 1.1;
  }
  .section-desc { font-size: 13px; }
  .section-header { margin-bottom: 28px; }

  /* ---- FILTROS ---- */
  .filters {
    gap: 8px;
    margin-bottom: 24px;
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filters::-webkit-scrollbar { display: none; }
  .filter {
    padding: 7px 18px;
    font-size: 10px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ---- GRID DE CRIATURAS ---- */
  /* 2 columnas compactas en móvil */
  .grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  /* Cards más limpias */
  .card { border-radius: 14px; }
  .card-img { aspect-ratio: 1; }
  .card-body { padding: 11px 12px 14px; }
  .card-cat { font-size: 9px; letter-spacing: 1px; margin-bottom: 3px; }
  .card-name { font-size: 13px; margin-bottom: 10px; }
  .card-price { font-size: 15px; }
  .card-btn {
    font-size: 9px;
    padding: 7px 12px;
    letter-spacing: 0.8px;
    min-height: 36px;
  }
  .card-badge { font-size: 8px; padding: 3px 8px; top: 10px; left: 10px; }
  .card-name-over h3 { font-size: 13px; letter-spacing: 1.5px; }

  /* ---- SECCIÓN UNIVERSO ---- */
  .universo { }
  .universo-grid { gap: 28px; }
  .universo-content .section-title { font-size: clamp(22px, 7vw, 30px); }
  .universo-desc { font-size: 13px; line-height: 1.8; }
  .logo-showcase { width: 180px; height: 180px; margin-bottom: 24px; }
  .universe-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .u-stat { padding: 12px 8px; }
  .u-stat-num { font-size: 20px; }
  .u-stat-label { font-size: 8px; letter-spacing: 0.5px; }

  /* ---- PASOS CÓMO PEDIR ---- */
  .paso { padding: 20px 16px; border-radius: 14px; }
  .paso-num { font-size: 36px; margin-bottom: 10px; }
  .paso-title { font-size: 15px; margin-bottom: 8px; }
  .paso-desc { font-size: 13px; }
  .como-cta { padding: 0 0 8px; }
  .como-nota { font-size: 11px; }
  .btn-large { padding: 15px 28px; font-size: 12px; width: 100%; justify-content: center; }

  /* ---- CONTACTO ---- */
  .contacto-grid { gap: 28px; }
  .contacto-desc { font-size: 13px; }
  .info-item { font-size: 13px; gap: 10px; }
  .contacto-card { padding: 20px 16px; border-radius: 16px; }
  .form-title { font-size: 18px; }
  .form-sub { font-size: 12px; margin-bottom: 20px; }
  .field-group label { font-size: 10px; }
  .field-group input,
  .field-group select { padding: 12px 14px; font-size: 14px; }

  /* ---- FICHA MODAL MÓVIL ---- */
  .ficha-overlay { padding: 0; align-items: flex-end; }
  .ficha {
    border-radius: 24px 24px 0 0; /* Bottom sheet style */
    max-height: 94svh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }
  /* Handle bar arriba del modal */
  .ficha::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
    margin: 14px auto 0;
    flex-shrink: 0;
  }
  .ficha-img-wrap {
    min-height: 220px;
    max-height: 35svh;
    border-radius: 0;
  }
  .ficha-body {
    padding: 16px 18px 40px;
    gap: 12px;
    max-height: none;
    overflow: visible;
  }
  .ficha-close { top: 10px; right: 10px; width: 32px; height: 32px; font-size: 14px; }
  .ficha-lightbox-btn { bottom: 10px; right: 10px; width: 32px; height: 32px; }
  .ficha-eyebrow { font-size: 9px; letter-spacing: 2px; }
  .ficha-title { font-size: 22px; letter-spacing: 1.5px; }
  .ficha-lore { font-size: 12.5px; line-height: 1.75; }
  .ficha-stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ficha-stat { padding: 10px 12px; border-radius: 8px; }
  .ficha-stat-label { font-size: 8px; letter-spacing: 1.5px; }
  .ficha-stat-value { font-size: 12px; }
  .ficha-precio { font-size: 26px; }
  .ficha-btns { gap: 10px; }
  .ficha-btn-comprar { padding: 15px; font-size: 12px; letter-spacing: 1.5px; }
  .btn-ghost { padding: 13px; font-size: 11px; }
  .ficha-nota { font-size: 10px; }

  /* ---- LIGHTBOX ---- */
  .lightbox-close { top: 12px; right: 12px; }

  /* ---- FOOTER ---- */
  .footer { padding: 32px 0 28px; }
  .footer-content { gap: 20px; }
  .footer-name { font-size: 14px; }
  .footer-tagline { font-size: 10px; }
  .footer-links { gap: 16px; flex-wrap: wrap; justify-content: center; }
  .footer-links a { font-size: 11px; }
  .footer-copy { font-size: 11px; }

  /* ---- BOTONES FLOTANTES ---- */
  .wa-float {
    bottom: 18px;
    right: 18px;
    padding: 13px;
    border-radius: 50%;
    width: 52px;
    height: 52px;
    justify-content: center;
  }
  .wa-float span { display: none; }
  .wa-float svg { width: 24px; height: 24px; }
}

/* ---- Extra pequeño (iPhone SE, etc) ---- */
@media (max-width: 380px) {
  .hero-title { font-size: 28px; }
  .grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .card-body { padding: 10px; }
  .card-name { font-size: 12px; }
  .card-price { font-size: 14px; }
  .card-btn { font-size: 9px; padding: 6px 10px; }
  .universe-stats { grid-template-columns: 1fr; gap: 8px; }
  .ficha-stats-grid { grid-template-columns: 1fr; }
}

/* ================================================
   BOTÓN DE MÚSICA AMBIENTAL
   Flotante en esquina inferior izquierda
   ================================================ */

.music-btn {
  position: fixed;
  bottom: 28px;
  left: 28px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(191, 95, 255, 0.35);
  border-radius: 50px;
  color: rgba(255,255,255,0.7);
  padding: 10px 16px;
  font-size: 13px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: var(--tr);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.music-btn:hover {
  border-color: var(--purple);
  color: var(--white);
  box-shadow: 0 0 16px rgba(191, 95, 255, 0.2);
}

.music-btn.playing {
  border-color: var(--purple);
  color: var(--purple);
  box-shadow: 0 0 16px rgba(191, 95, 255, 0.15);
}

.music-icon {
  font-size: 16px;
  display: inline-block;
}

.music-btn.playing .music-icon {
  animation: music-pulse 1.5s ease-in-out infinite;
}

@keyframes music-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.2); opacity: 0.7; }
}

.music-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}

@media (max-width: 560px) {
  .music-btn { bottom: 14px; left: 14px; padding: 10px 14px; }
  .music-label { display: none; }
  .music-btn { border-radius: 50%; width: 44px; height: 44px; justify-content: center; padding: 0; }
}

/* ================================================
   MI COLECCIÓN — Criaturas bloqueadas / desbloqueadas
   ================================================ */

.coleccion-counter {
  margin-bottom: 32px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px 20px;
}

.counter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.counter-label {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gray);
}

.counter-num {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--cyan);
}

.counter-track {
  height: 3px;
  background: rgba(255,255,255,.06);
  border-radius: 2px;
  overflow: hidden;
}

.counter-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  border-radius: 2px;
  transition: width 1s ease;
}

/* Card bloqueada — Dormant */
.card.bloqueada {
  position: relative;
  cursor: default;
}

.card.bloqueada:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border);
}

.card.bloqueada .card-img img {
  filter: brightness(0.15) saturate(0);
  transform: none !important;
}

.card.bloqueada .card-img::after {
  background: linear-gradient(to top, rgba(0,0,0,.95), rgba(0,0,0,.6));
}

.dormant-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 3;
  gap: 8px;
}

.dormant-icon {
  font-size: 28px;
  opacity: 0.4;
}

.dormant-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 4px 12px;
  border-radius: 20px;
}

/* Card desbloqueada — Activa */
.card.desbloqueada .activa-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(0,229,255,.15);
  border: 1px solid rgba(0,229,255,.4);
  color: var(--cyan);
  display: flex;
  align-items: center;
  gap: 5px;
}

.activa-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  animation: dp 1.5s ease-in-out infinite;
}


/* ================================================
   SECCIÓN PRÓXIMAMENTE
   Efecto: foto casi sin color con toque sutil
   del color original de la criatura
   ================================================ */

.proximamente {
  position: relative;
  z-index: 5;
  padding: var(--section-pad);
  background: linear-gradient(180deg, transparent, var(--bg2) 20%, var(--bg2) 80%, transparent);
}

.prox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

/* Card próximamente */
.prox-card {
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--border);
  animation: fadeUp 0.4s ease both;
}

.prox-card:hover .prox-img {
  filter: grayscale(60%) brightness(0.55);
  transform: scale(1.04);
}

/* Imagen con efecto difuminado — casi sin color */
.prox-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Casi sin color pero con toque sutil del original */
  filter: grayscale(85%) brightness(0.45);
  transition: filter 0.4s ease, transform 0.4s ease;
}

/* Overlay con glow sutil del color de la criatura */
.prox-color-hint {
  position: absolute;
  inset: 0;
  /* El color se aplica dinámicamente via JS */
  opacity: 0.08;
  mix-blend-mode: screen;
  transition: opacity 0.4s ease;
}

.prox-card:hover .prox-color-hint {
  opacity: 0.15;
}

/* Overlay oscuro general */
.prox-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.3) 50%,
    transparent 100%
  );
}

/* Badge próximamente */
.prox-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.4);
  backdrop-filter: blur(8px);
}

/* Signo de interrogación central */
.prox-unknown {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  color: rgba(255,255,255,0.08);
  user-select: none;
}

/* Glow en borde inferior */
.prox-glow-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  /* Color dinámico via JS */
  opacity: 0.4;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  transition: opacity 0.4s ease;
}

.prox-card:hover .prox-glow-bottom {
  opacity: 0.8;
}

@media (max-width: 560px) {
  .prox-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .prox-unknown { font-size: 36px; }
}


/* ================================================
   OVERLAY MI COLECCIÓN
   Se desliza desde arriba como pantalla completa
   tipo "Estados" de WhatsApp
   ================================================ */

.mi-col-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: #000;
  display: flex;
  flex-direction: column;
  /* Animación — empieza fuera de pantalla arriba */
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.34, 1.1, 0.64, 1), opacity 0.3s ease;
}

.mi-col-overlay.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}

/* Header del overlay */
.mi-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(20px);
  flex-shrink: 0;
}

.mi-col-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mi-col-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mi-col-counter {
  font-size: 12px;
  font-weight: 600;
  color: var(--cyan);
  background: rgba(0,229,255,0.1);
  border: 1px solid rgba(0,229,255,0.25);
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: 0.5px;
}

.mi-col-close {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border2);
  border-radius: 10px;
  color: var(--white);
  font-size: 18px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}

.mi-col-close:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.2);
}

/* Barra de progreso */
.mi-col-bar-wrap {
  padding: 0 24px 14px;
  background: rgba(0,0,0,0.8);
  flex-shrink: 0;
}

.mi-col-track {
  height: 2px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}

.mi-col-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  border-radius: 2px;
  transition: width 1s ease;
}

/* Contenido scrolleable */
.mi-col-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  -webkit-overflow-scrolling: touch;
}

.mi-col-content::-webkit-scrollbar { width: 3px; }
.mi-col-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); }

/* Social links en footer */
.social-link {
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 560px) {
  .mi-col-header { padding: 16px 18px 12px; }
  .mi-col-title { font-size: 18px; }
  .mi-col-content { padding: 16px; }
  .mi-col-bar-wrap { padding: 0 18px 12px; }
}

/* Grid dentro del overlay de Mi Colección */
.mi-col-content .card {
  background: rgba(255,255,255,0.03);
}

.mi-col-content .card.bloqueada .card-img img {
  filter: brightness(0.15) saturate(0);
}