@font-face {
  font-family: "Harmonique";
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Harmonique-Medium.otf") format("opentype");
}

@font-face {
  font-family: "Harmonique";
  font-weight: 900;
  font-display: swap;
  src: url("fonts/Harmonique-Heavy.otf") format("opentype");
}

@font-face {
  font-family: "Harmonique Heavy Italic";
  font-weight: 900;
  font-style: italic;
  font-display: swap;
  src: url("fonts/Harmonique-HeavyItalic.otf") format("opentype");
}

/* =========================================================
   PANEL DE CONTROL: AJUSTES DE TEXTO EN TARJETAS
   Abre este archivo y modifica los valores numéricos (px) 
   o palabras clave aquí para ver el cambio inmediato.
========================================================= */
:root {
  /* 1. Alineación general de la tarjeta: 'center' (centro), 'left' (izquierda) o 'right' (derecha) */
  --txt-alineacion: center;

  /* 2. Empujar TODO el bloque de texto hacia ABAJO (ej. 15px, 50px) */
  --txt-espacio-arriba: 8px;

  /* 3. Empujar los textos desde los bordes laterales (ej. 12px, 30px) */
  --txt-espacio-lados: 12px;

  /* 4. Distancia de separación entre las líneas de texto (título, descripción) */
  --txt-separacion-lineas: 1px;

  /* 5. Separación extra entre la descripción y el bloque de Precio/Botón */
  --txt-espacio-hasta-boton: 12px;

  /* 6. Distancia de separación entre el Precio ($) y el Botón (Ver Detalles) */
  --txt-distancia-precio-boton: 15px;

  /* 7. Mover específicamente el subtítulo pequeño superior ("Licencia completa") */
  --txt-ajuste-subtitulo-y: -215px; /* Hacia arriba o abajo */
  --txt-ajuste-subtitulo-x: 60px;  /* Hacia la izquierda o derecha */

  /* 8. Empujar el título (JDLauncher...), la descripción y el precio juntos */
  --txt-ajuste-bloque-principal: -50px; /* Usa números negativos para subir (-20px) o positivos para bajar */

  /* 8b. Mover SOLO el texto (título y descripción) sin afectar los botones */
  --txt-solo-texto-y: 35px;
  --txt-solo-texto-x: 2px;

  /* 9. Altura de las descripciones (Sube esto para alinear todos los botones por igual) */
  --txt-altura-descripcion: 65px;

  /* =========================================================
     PANEL DE CONTROL: BARRA DE NAVEGACIÓN
  ========================================================= */
  --nav-txt-size: 13px;
  --nav-txt-color: #ffceae;
  
  /* Posicionamiento independiente de cada texto. 
     Puedes usar porcentajes (ej: 48%) o píxeles (ej: 25px). 
     Y = Arriba/Abajo, X = Izquierda/Derecha */
  --nav-inicio-y: calc(50% + 4px);
  --nav-inicio-x: calc(50% + 37px);

  --nav-sobremi-y: calc(50% + 4px);
  --nav-sobremi-x: calc(50% - 4px);

  --nav-jdlauncher-y: calc(50% + 4px);
  --nav-jdlauncher-x: calc(50% - 3px);

  --nav-templates-y: calc(50% + 4px);
  --nav-templates-x: calc(50% - 14.5px);

  --nav-modulos-y: calc(50% + 4px);
  --nav-modulos-x: calc(50% + 2px);

  --nav-psddesign-y: calc(50% + 4px);
  --nav-psddesign-x: calc(50% + 6px);

  --nav-zonafree-y: calc(50% + 4px);
  --nav-zonafree-x: calc(50% - 19px);

  /* =========================================================
     PANEL DE CONTROL: TARJETAS DE CATEGORÍAS (MODALINFO)
  ========================================================= */
  --cat-txt-alineacion: center; /* center, left, right */
  
  /* Posicionamiento y márgenes del bloque de texto */
  --cat-padding-vertical: 0px; 
  --cat-padding-horizontal: 30px;
  
  /* Si necesitas subir o bajar todo el bloque de texto en conjunto */
  --cat-ajuste-y: 0px; 
  --cat-ajuste-x: 0px; 

  /* Mover las 4 tarjetas en conjunto sin afectar al footer ni a otros elementos */
  --cat-caja-y: 40px;

  /* Separación entre el título y la descripción */
  --cat-separacion-textos: 4px;

  /* =========================================================
     PANEL DE CONTROL: BOTON DE PRODUCTOS (buttom-product)
  ========================================================= */
  --btn-producto-escala: 44%;
  --btn-producto-x: 102px;
  --btn-producto-y: 22px;

  /* Ajuste milimétrico del TEXTO dentro de la imagen del botón */
  --btn-texto-x: -98px;
  --btn-texto-y: 0px;

  /* =========================================================
     PANEL DE CONTROL: FOOTER BANNER ESTRELLA
  ========================================================= */
  /* Ajuste vertical para acercar o alejar el footer del contenido superior. */
  --footer-y: 0px;
  
  /* Altura máxima visible del footer. */
  --footer-altura: 120px;

  /* Encuadre de la imagen: 'top' (arriba), 'center' (centro), 'bottom' (abajo) 
     Matemáticamente 40% enfoca exactamente el borde brillante luminoso dentro de los 120px. */
  --footer-posicion: 50% 40%;

  /* =========================================================
     PANEL DE CONTROL: LOGO PRINCIPAL (VIDEO)
  ========================================================= */
  /* Superposición/Fusión. Opciones: screen, color-dodge, overlay, lighten, plus-lighter */
  --logo-fusion: screen; 
  /* Filtros extra. Ej: brightness(1.2) contrast(1.1) drop-shadow(0 0 10px #ffb64d) */
  --logo-filtro: none;

  /* =========================================================
     PANEL DE CONTROL: TARJETAS DE PRODUCTOS (product-frame)
  ========================================================= */
  /* Si el marco se ve achatado, aumenta este valor para estirarlo hacia abajo */
  --card-padding-bottom: 30px; 

  /* =========================================================
     PANEL DE CONTROL: SECCIÓN SOBRE MÍ
  ========================================================= */
  /* Ancho máximo de los textos (940px es casi todo el ancho, 750px es más de bloque) */
  --sobremi-ancho-texto: 940px;
  
  /* Alineación de todos los textos (center, left, right) */
  --sobremi-alineacion: center;
  
  /* Tamaño del título principal ("No vendo diseños...") */
  --sobremi-titulo-tamano: 28px;
  
  /* Separación entre el título principal y el primer párrafo */
  --sobremi-titulo-espacio: 25px;
  
  /* Tamaño de la fuente de los párrafos normales */
  --sobremi-parrafo-tamano: 15px;
  
  /* Tamaño de la fuente dorada de la frase destacada ("Cada producto...") */
  --sobremi-frase-tamano: 17px;
  
  /* Altura del banner fotográfico de abajo (ej. 150px, 250px, 400px) */
  --sobremi-banner-altura: 250px;
  
  /* Distancia de separación entre los textos/botones y el banner inferior */
  --sobremi-banner-separacion: 40px;

  /* Ancho de la zona invisible de la imagen */
  --sobremi-imagen-ancho: 720px;

  /* Tamaño REAL del personaje (1.0 = normal, 1.1 = 10% más grande, 1.2 = 20% más grande) */
  --sobremi-personaje-escala: 1.1;

  /* Mover al personaje hacia arriba (negativo) o hacia abajo (positivo) en píxeles */
  --sobremi-personaje-y: 35px;
}
/* ========================================================= */

:root {
  --bg: #050201;
  --ink: #100604;
  --panel: #170906;
  --panel-strong: #2d1009;
  --line: #824319;
  --line-soft: #372614;
  --text: #fff1df;
  --muted: #cfaa8d;
  --gold: #ffb64d;
  --ember: #ff562e;
  --ember-dark: #7f1d11;
  --green: #28e891;
  --blue: #4db8ff;
  --shadow: 0 28px 90px rgba(0, 0, 0, 0.66);
  --page-bg-image: linear-gradient(transparent, transparent);
  --frame-bg-image: linear-gradient(transparent, transparent);
}

* {
  box-sizing: border-box;
}

html:active, body:active, *:active {
  cursor: url("assets/mu-link.cur"), pointer !important;
}

html {
  min-width: 320px;
  background: var(--bg);
}

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  color: var(--text);
  font-family: "Harmonique", Inter, "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
  background:
    var(--page-bg-image),
    linear-gradient(110deg, #080302 0%, #1a0905 38%, #060201 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, #070302, transparent 22%, transparent 78%, #070302),
    repeating-linear-gradient(90deg, #1a120b 0 1px, transparent 1px 92px),
    repeating-linear-gradient(0deg, #0f0a06 0 1px, transparent 1px 92px);
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: auto -10% 0;
  z-index: -1;
  height: 42vh;
  background:
    radial-gradient(ellipse at 50% 100%, #5c1e10, transparent 56%),
    linear-gradient(180deg, transparent, #050100);
  pointer-events: none;
}

.fire-overlay {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  width: 200px;
  height: auto;
  mix-blend-mode: screen;
  transform: translateX(-50%);
}

#fire1 { top: 215px; left: calc(15% - 120px); width: 125px; transform: translateX(-50%) rotate(15deg); }
#fire2 { top: 220px; left: calc(85% + 130px); width: 125px; transform: translateX(-50%) rotate(-15deg); }
#fire3 { top: 380px; left: calc(25% - 60px); width: 70px; transform: translateX(-50%) rotate(11deg); }
#fire4 { top: 380px; left: calc(75% + 50px); width: 70px; transform: translateX(-50%) rotate(-11deg); }

.fx-overlay {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  width: 100vw;
  height: auto;
  object-fit: cover;
  mix-blend-mode: screen;
  transform: translateX(-50%) scaleX(1.1);
}

#fog { left: 50%; bottom: 0; }
#ashes { left: 50%; top: 0; }

button,
input {
  font: inherit;
}

button {
  cursor: url("assets/mu-link.cur"), pointer !important;
}

.site-stage {
  width: min(1440px, 100%);
  min-height: auto;
  flex: 1;
  margin: 0 auto;
  padding: 58px 28px;
}

.brand-header {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  align-items: center;
  gap: 28px;
  width: min(1060px, 100%);
  margin: 0 auto 12px;
}

.side-copy {
  max-width: 340px;
  margin: 0;
  color: #d9c4b3;
  font-family: "Harmonique";
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
}

.side-copy-right {
  justify-self: end;
  text-align: right;
}

.brand-logo {
  width: 150px;
  height: 150px;
  object-fit: contain;
  mix-blend-mode: var(--logo-fusion, screen);
  filter: var(--logo-filtro, none);
  justify-self: center;
  margin-top: -55px;
}

.nav-art {
  position: relative;
  z-index: 10;
  width: 1250px;
  max-width: 100%;
  margin: 0 auto -18px;
  line-height: 0;
}

/* Logo independiente sobre el navbar */
.float-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 2px; /* Bajó 2px como ajuste fino final */
  margin-left: -10px; /* Movido 10px a la izquierda */
  width: 58px; /* Reducido un 10% más (antes 65px) */
  height: auto;
  z-index: 10; /* Por encima de los botones del navbar */
  pointer-events: none; /* Para que los clicks pasen a través si toca un botón */
  mix-blend-mode: screen; /* Superposición pura que hace brillar los colores claros */
  filter: brightness(1.3); /* Solo aumenta el brillo interno de la imagen */
}

.nav-bg {
  display: block;
  width: 100%;
  height: auto;
}

.nav-btn {
  position: absolute;
  top: 0;
  height: 100%;
  border: none;
  background: none;
  padding: 0;
  cursor: url("assets/mu-link.cur"), pointer !important;
}

.nav-effect-img {
  position: absolute;
  top: calc(50% - 17px);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  max-width: none;
  z-index: 3; /* Por encima de .nav-text que tiene z-index: 2 */
  mix-blend-mode: screen; /* Fusión aditiva para que la luz ilumine el texto sin taparlo con bordes oscuros */
}

.nav-btn:hover .nav-effect-img,
.nav-btn.is-active .nav-effect-img {
  opacity: 1;
}

.nav-all     { left: 0%; width: 14.55%; }
.nav-about   { left: 14.55%; width: 9.24%; }
.nav-psd     { left: 23.79%; width: 11.03%; }
.nav-code    { left: 34.82%; width: 14.6%; }
.nav-license { left: 49.42%; width: 16.86%; transform: translateX(20px); }
.nav-exclusive { left: 66.28%; width: 15.74%; }
.nav-free    { left: 82.02%; width: 17.98%; }

.nav-all .nav-effect-img     { left: 72.03%; }
.nav-about .nav-effect-img   { left: 48.05%; }
.nav-psd .nav-effect-img     { left: 49.50%; }
.nav-code .nav-effect-img    { left: 43.15%; }
.nav-license .nav-effect-img { left: 51.07%; }
.nav-exclusive .nav-effect-img { left: 55.15%; }
.nav-free .nav-effect-img    { left: 40.82%; }

/* ================== POSICION INDEPENDIENTE DE TEXTOS ================== */
.nav-all .nav-text       { top: var(--nav-inicio-y); left: var(--nav-inicio-x); }
.nav-about .nav-text     { top: var(--nav-sobremi-y); left: var(--nav-sobremi-x); }
.nav-psd .nav-text       { top: var(--nav-jdlauncher-y); left: var(--nav-jdlauncher-x); }
.nav-code .nav-text      { top: var(--nav-templates-y); left: var(--nav-templates-x); }
.nav-license .nav-text   { top: var(--nav-modulos-y); left: var(--nav-modulos-x); }
.nav-exclusive .nav-text { top: var(--nav-psddesign-y); left: var(--nav-psddesign-x); }
.nav-free .nav-text      { top: var(--nav-zonafree-y); left: var(--nav-zonafree-x); }
/* ====================================================================== */

.nav-text {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: "Harmonique", sans-serif;
  font-weight: 900;
  font-size: var(--nav-txt-size);
  color: var(--nav-txt-color);
  text-shadow: 1px 1px 3px rgba(0,0,0,0.9), 0px 0px 8px rgba(0,0,0,0.8);
  z-index: 2;
  white-space: nowrap;
  pointer-events: none; /* Evita que bloquee el hover de la imagen detrás */
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.market-frame {
  position: relative;
  width: min(1020px, 100%);
  margin: 0 auto;
  padding: 78px 34px 34px;
  border: 1px solid #c9731f;
  border-radius: 8px;
  background:
    linear-gradient(180deg, #0a0302, #080302),
    var(--frame-bg-image),
    radial-gradient(ellipse at 50% 20%, #7a2e16, transparent 45%),
    linear-gradient(115deg, #31130b, #060201);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.market-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #080302, transparent 22%, transparent 78%, #080302),
    radial-gradient(ellipse at 0% 18%, #8a4d18, transparent 32%),
    radial-gradient(ellipse at 100% 20%, #8a4d18, transparent 32%);
  pointer-events: none;
}

.market-frame::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 190px;
  background:
    radial-gradient(ellipse at 50% 100%, #5c1e10, transparent 58%),
    linear-gradient(180deg, transparent, #080302);
  pointer-events: none;
}

.market-intro,
.market-layout,
.graphic-piece {
  position: relative;
  z-index: 1;
}

.market-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  margin-top: 50px; /* Restaurado a su valor original para no afectar al Home */
  margin-bottom: 30px;
}

/* Regla para bajar el contenido y dar espacio al personaje en JDLauncher e INICIO */
body[data-active-category="jdlauncher"] .market-intro,
body[data-active-category="all"] .market-intro {
  margin-top: 150px;
}

.market-intro > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

.eyebrow,
.product-type {
  margin: 0 0 var(--txt-separacion-lineas);
  color: var(--gold);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.product-type {
  transform: translate(var(--txt-ajuste-subtitulo-x), var(--txt-ajuste-subtitulo-y));
  text-align: left; /* Aisla la alineación a la izquierda solo para este elemento */
}

.market-intro h1 {
  max-width: 100%;
  margin: 0;
  font-size: clamp(24px, 3.8vw, 47px);
  line-height: 1.02;
  text-transform: uppercase;
  white-space: nowrap;
}



.market-tools {
  display: none; /* Oculto por defecto para evitar FOUC */
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 420px;
}

.search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 14px;
  border: 2px solid #5a3d28;
  border-radius: 6px;
  background: #2b1812;
  flex: 1;
}

.search-field .search-icon {
  color: #5c473a;
}

.search-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: #e3d3c8;
  background: transparent;
  font-size: 13px;
}

.search-field input::placeholder {
  color: #5c473a;
}

.filter-button {
  min-height: 38px;
  padding: 0 18px;
  border: 2px solid #8a2512;
  border-radius: 6px;
  color: #fff1df;
  background: linear-gradient(180deg, #6e1c0c, #3d0e05);
  font-size: 12px;
  font-family: "Harmonique", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  transition: all 0.2s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.filter-button:hover {
  background: linear-gradient(180deg, #8a2512, #4d1207);
  color: #ffffff;
  border-color: #a6311a;
}

.market-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}

.product-grid {
  display: none; /* Oculto por defecto para evitar FOUC (lo enciende JS) */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: 65px;
  column-gap: 16px;
}

.product-card {
  position: relative;
  min-width: 0;
  background: none;
  border: none;
  box-shadow: none;
  padding-bottom: var(--card-padding-bottom);
}

.product-card.minimalist {
  aspect-ratio: 1 / 1; /* Forzamos a que sea un cuadrado perfecto para que encaje tu frame */
  cursor: url("assets/mu-link.cur"), pointer !important;
  overflow: visible;
  transition: transform 0.3s ease, filter 0.3s ease;
  padding-bottom: 0;
}

/* 
 * CLASE INDEPENDIENTE PARA LOS MARCOS HORIZONTALES (products-frame.webp)
 * Al estar aislada, no rompe la tarjeta 'Sobre mi' ni los marcos cuadrados.
 */
.product-card.card-horizontal {
  aspect-ratio: 1024 / 761;
}

/* AISLAMIENTO ABSOLUTO: Centrado exclusivo para JDLauncher, Templates, Modules y PSD */
.product-grid[data-active-category="jdlauncher"],
.product-grid[data-active-category="templates"],
.product-grid[data-active-category="modules"],
.product-grid[data-active-category="psd"] {
  display: flex !important; /* Forza flexbox ignorando el grid global */
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 65px;
  column-gap: 16px;
}

.product-grid[data-active-category="jdlauncher"] .card-horizontal,
.product-grid[data-active-category="templates"] .card-horizontal,
.product-grid[data-active-category="modules"] .card-horizontal,
.product-grid[data-active-category="psd"] .card-horizontal {
  width: calc(33.333% - 16px); /* Tamaño exacto para que quepan 3 por línea y sean idénticos en ambas secciones */
  min-width: 320px;
  max-width: 500px;
}

.product-card.minimalist:hover {
  /* Se eliminó el transform y el drop-shadow a petición para que el marco no tenga efecto hover (zoom/movimiento) */
}

.product-card.is-hidden {
  display: none;
}

/* Título Premium en 3D debajo de cada tarjeta minimalista */
.product-card.minimalist::after {
  content: attr(data-title);
  position: absolute;
  top: calc(100% - 20px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 90vw;
  text-align: center;
  font-family: "Harmonique", sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  line-height: 1.3;
  
  /* Degradado vertical amarillo brillante a amarillo claro y dorado */
  background: linear-gradient(180deg, #ffff00 0%, #fffacd 40%, #d4af37 100%);
  -webkit-background-clip: text;
  color: transparent;
  background-clip: text;
  
  /* Profundidad y sombra oscura posterior (sin resplandor exterior) */
  filter: 
    drop-shadow(0px 1.5px 0px #883300)
    drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.9));
    
  pointer-events: none;
  z-index: 10;
}

.card-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Para asegurar que el marco no se deforme */
  z-index: 2; /* El marco va por encima del arte */
  pointer-events: none;
}

.product-art-minimal {
  position: absolute;
  inset: 15% 5%; /* Reducido el margen para que el video crezca un 20% aprox. */
  transform: translate(-10px, -10px); /* Mueve 10px a la izquierda y sube 10px */
  z-index: 1; /* Por debajo del marco */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface); /* Fondo oscuro por defecto */
}

/* Corrección de alineación para que los logos y launchers de PSD no se desplacen a la izquierda */
.psd-item .product-art-minimal {
  transform: translate(0, -10px) !important;
}

.product-art-minimal img,
.product-art-minimal video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.5s ease;
}

.product-card:hover .product-art-minimal img {
  /* Se eliminó el transform: scale(1.1) por solicitud del usuario */
}

.product-price-tag {
  position: absolute;
  bottom: 8%; /* Posicionado justo encima de la placa roja del marco */
  left: 0;
  width: 100%;
  z-index: 3;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.product-price-tag span {
  color: #fff;
  font-family: 'Harmonique', sans-serif;
  font-weight: bold;
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.minimal-btn-container {
  position: absolute;
  bottom: 60px; /* Bajado 5px desde su posición anterior de 65px */
  left: 0;
  width: 100%;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  transition: transform 0.3s ease, filter 0.3s ease; /* Transición suave para todo el contenedor */
}

.minimal-btn-container::after {
  content: attr(data-title);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Harmonique", sans-serif;
  font-weight: 900;
  font-size: 12px; /* Aumentado un 3% desde la reducción (antes 11.7px) */
  color: #ffb64d;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 
    1px 1px 3px rgba(0,0,0,0.9),
    0px 0px 8px rgba(0,0,0,0.7);
  pointer-events: none;
  z-index: 2; /* Debajo de la luz */
}

/* EFECTO DE BARRIDO DE LUZ (SWEEP) */
.minimal-btn-container::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 156.4px;
  height: 35.2px; /* Mismo height que la imagen */
  -webkit-mask-image: url("data:image/webp;base64,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");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url("data:image/webp;base64,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");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  z-index: 10; /* Encima del texto */
  pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.7) 50%, transparent 70%);
  background-size: 300% 100%;
  background-position: 200% 0;
  animation: btnSweep 2.5s infinite linear;
}

.minimal-btn-container img {
  width: auto;
  height: 35.2px; /* Aumentado un 3% desde la reducción (antes 34.2px) */
  object-fit: contain;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.product-card:hover .minimal-btn-container {
  transform: translateY(-2px); /* Mueve imagen y texto juntos */
  filter: brightness(1.25); /* Ilumina imagen y texto juntos */
}

/* Animación infinita manejada en el elemento base */

@keyframes btnSweep {
  0% { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}

.product-card.about-card {
  grid-column: 1 / -1;
  background: transparent;
  padding: 40px 0;
  min-width: 0;
  width: auto;
  text-align: var(--sobremi-alineacion);
}

.about-card.is-hidden {
  display: none;
}

.about-layout {
  position: relative; /* Punto de anclaje para la imagen absoluta */
  display: flex;
  justify-content: flex-start; /* Texto a la izquierda */
  max-width: 1000px;
  margin: 0 auto;
}

.about-content {
  position: relative;
  z-index: 2; /* Textos siempre por encima de la imagen */
  width: calc(60% + 30px); /* El texto ocupa un ancho un poco menor (aprox 20-30px menos) + 30px ampliados */
  text-align: left;
  transform: translateX(40px);
}

.about-portrait-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0; /* Al tocar top y bottom, asume automáticamente la misma altura exacta del texto */
  width: var(--sobremi-imagen-ancho);
  z-index: 1; /* Imagen por debajo del texto */
  pointer-events: none; /* Permite hacer clic en los textos aunque la imagen se superponga */
}

.about-portrait {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom; /* Ancla al personaje abajo y a la derecha */
  transform: scale(var(--sobremi-personaje-escala, 1.1)) translateY(var(--sobremi-personaje-y, 20px)); /* Escala real y movimiento vertical */
  transform-origin: bottom right; /* Crece hacia arriba y a la izquierda sin despegar los pies */
  display: block;
}

@media (max-width: 900px) {
  .about-layout {
    flex-direction: column;
  }
  .about-portrait-container {
    width: 100%;
    max-width: 400px;
  }
}

.about-title {
  width: 100%;
  margin: 0 0 var(--sobremi-titulo-espacio) 0;
  color: var(--gold);
  font-size: var(--sobremi-titulo-tamano);
  font-family: "Harmonique", sans-serif;
  line-height: 1.2;
}

.about-quote {
  color: var(--gold);
  font-size: var(--sobremi-frase-tamano);
  font-weight: bold;
  font-family: 'Harmonique', sans-serif;
  text-transform: uppercase;
  margin: 30px 0 20px 0; /* Margen inferior reducido a 20px (antes 30px) para subir el texto de abajo 10px */
  line-height: 1.5; /* Agregado para darle más espacio entre líneas */
}

.about-tag {
  margin: 0 0 14px 0;
  color: var(--ember);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.about-body p:not(.about-tag):not(.about-quote) {
  width: 100%;
  margin: 0 0 20px 0;
  color: var(--muted);
  font-size: var(--sobremi-parrafo-tamano);
  line-height: 1.6;
}

.about-features {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: nowrap; /* Forzar en una sola línea */
  margin-top: 30px;
}

.about-features span {
  padding: 6px 16px;
  border: 1px solid #c9731f;
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap; /* Evita que el texto se rompa */
}

.product-art {
  position: relative;
  z-index: 1;
  aspect-ratio: 16 / 10;
  min-height: 134px;
  margin: 8px 8px 0;
  overflow: hidden;
}

.slot-image {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateY(10px) scale(0.80); /* Bajado 10px y reducido al 20% (agrandado 5% respecto al paso anterior) */
}

.product-art.has-image .slot-image {
  display: block;
}

.product-art span {
  display: none;
}

.product-art.has-image span {
  display: none;
}

.product-body {
  position: relative;
  z-index: 3;
  padding: var(--txt-espacio-arriba) var(--txt-espacio-lados) var(--txt-espacio-hasta-boton);
  text-align: var(--txt-alineacion);
  transform: translateY(-12px); /* Empuja visualmente todo el bloque hacia arriba */
}

.product-body h2 {
  margin: var(--txt-ajuste-bloque-principal) 0 0 0;
  color: #fff7ee;
  font-size: 16px;
  line-height: 1.15;
  text-transform: uppercase;
  transform: translate(var(--txt-solo-texto-x, 0px), var(--txt-solo-texto-y, 0px));
}

.product-body p:not(.product-type) {
  min-height: var(--txt-altura-descripcion);
  margin: var(--txt-separacion-lineas) 0 var(--txt-espacio-hasta-boton);
  padding-top: 3px; /* Separa la descripción del título bajándola 3px */
  color: var(--muted);
  font-size: 12px;
  line-height: 1.1; /* Reducido desde 1.4 para juntar más las líneas */
  transform: translate(var(--txt-solo-texto-x, 0px), var(--txt-solo-texto-y, 0px));
}

.product-meta {
  display: flex;
  align-items: center;
  justify-content: var(--txt-alineacion);
  gap: var(--txt-distancia-precio-boton);
}

.product-meta strong {
  color: var(--gold);
  font-size: 14px;
}

.product-meta button {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #c9731f;
  color: white;
  background: linear-gradient(180deg, #8f2b10, #451106);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.product-meta button.img-btn-action {
  background: none;
  border: none;
  padding: 0;
  min-height: auto;
  cursor: url("assets/mu-link.cur"), pointer !important;
  transition: transform 0.3s ease, filter 0.3s ease;
  position: relative;
}

.product-meta button.img-btn-action::after {
  content: attr(data-title);
  position: absolute;
  top: 50%;
  left: 50%;
  /* Centramos el texto en el botón y aplicamos el mismo desplazamiento que la imagen para que calcen perfecto */
  transform: translate(calc(-50% + var(--btn-producto-x) + var(--btn-texto-x, 0px)), calc(-50% + var(--btn-producto-y) + var(--btn-texto-y, 0px)));
  font-family: "Harmonique", sans-serif;
  font-weight: 900;
  font-size: 14px; /* Un poco ajustado para que quepa en el botón, el original era 17px */
  color: #ffb64d;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 
    1px 1px 3px rgba(0,0,0,0.9),
    0px 0px 8px rgba(0,0,0,0.7);
  pointer-events: none; /* Para no bloquear los clics en la imagen */
  z-index: 2; /* Debajo de la luz */
}

/* EFECTO DE BARRIDO DE LUZ (SWEEP) PARA BOTONES GRANDES */
.product-meta button.img-btn-action::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--btn-producto-escala);
  height: 100%;
  transform: translate(var(--btn-producto-x), var(--btn-producto-y));
  -webkit-mask-image: url("data:image/webp;base64,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");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url("data:image/webp;base64,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");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  z-index: 10; /* Encima del texto */
  pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.7) 50%, transparent 70%);
  background-size: 300% 100%;
  background-position: 200% 0;
  animation: btnSweep 2.5s infinite linear;
}

@keyframes btnSweep {
  0% { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}

.product-meta button.img-btn-action img {
  display: block;
  width: var(--btn-producto-escala);
  height: auto;
  transform: translate(var(--btn-producto-x), var(--btn-producto-y));
}

.product-meta button.img-btn-action:hover {
  transform: translateY(-2px);
  filter: brightness(1.25);
}

.graphic-piece {
  display: block;
  margin-top: var(--footer-y, 0px); /* Tira del footer hacia arriba físicamente */
  margin-bottom: 0;
  padding: 0;
  line-height: 0;
  z-index: 1; /* Detrás del main (z-index: 2) para no bloquear clicks */
  position: relative;
  pointer-events: none; /* Previene que la transparencia bloquee nada */
}

/* =========================================================
   CONTENIDO FLOTANTE SOBRE EL FOOTER
========================================================= */
.footer-overlay {
  position: absolute;
  bottom: 25px; /* Distancia desde el borde inferior de la web */
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 50px;
  box-sizing: border-box;
  font-family: "Harmonique", sans-serif;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  font-variant-numeric: lining-nums; /* Fuerza a que los números tengan la altura de las mayúsculas */
  color: var(--muted);
  pointer-events: auto; /* Reactiva los clicks para los enlaces */
  z-index: 5;
}

/* Forzar que cada columna ocupe un 33.3% exacto para un centrado geométrico perfecto */
.footer-col {
  flex: 1;
}
.footer-col-left {
  text-align: left;
}
.footer-col-center {
  text-align: center;
}
.footer-col-right {
  text-align: right;
}

.footer-overlay a {
  color: var(--text);
  text-decoration: none;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.footer-overlay a:hover {
  color: var(--gold);
  text-shadow: 0 0 8px rgba(255, 182, 77, 0.5);
}

.footer-overlay .sep {
  margin: 0 10px;
  color: var(--line);
}

.discord-link {
  font-weight: 900;
  color: var(--gold) !important;
}

.banner-img {
  width: 100%;
  height: var(--footer-altura);
  object-fit: cover;
  object-position: var(--footer-posicion, center);
  display: block;
  transition: filter 0.3s ease, transform 0.3s ease;
  cursor: url("assets/mu-link.cur"), pointer !important;
}

.banner-img:hover {
  filter: brightness(1.25);
  transform: translateY(-2px);
}

.lobby-view {
  display: flex;
  flex-direction: column;
  gap: 40px; /* Separación entre bloques */
}

.lobby-categories {
  order: 2; /* Mueve las tarjetas abajo */
  transform: translateY(var(--cat-caja-y, 0px));
}

.lobby-featured {
  order: 1; /* Mueve los productos arriba */
  margin-bottom: 0;
}

.lobby-heading-wrapper {
  text-align: center;
  margin: 0 0 24px;
}

.lobby-heading {
  display: inline-block;
  margin: 0;
  padding: 8px 24px; /* Relleno interno para darle forma de caja */
  border: 1px solid #c9731f; /* El borde naranja estilo etiqueta */
  background: rgba(85, 10, 10, 0.85); /* Fondo rojo oscuro poco transparente */
  font-family: "Harmonique", sans-serif;
  font-weight: 900;
  font-size: 15px; /* Un poco más chico para que parezca una etiqueta (antes 17px) */
  color: #fff; /* Texto en blanco como en tu imagen de referencia */
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 
    1px 1px 3px rgba(0,0,0,0.9),
    0px 0px 8px rgba(0,0,0,0.7);
}

.category-grid {
  display: flex;
  justify-content: center;
  gap: 24px; /* Mayor espacio entre cada card */
  margin-bottom: 36px;
}
.category-grid > * {
  flex: 0 1 18%; /* Menos anchos según petición del usuario */
}

.cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* Alineación del flex, usar centrado por defecto */
  text-align: var(--cat-txt-alineacion);
  padding: var(--cat-padding-vertical) var(--cat-padding-horizontal);
  border: 1px solid transparent;
  background: url("assets/modalinfo.webp") center / 100% 100% no-repeat;
  aspect-ratio: 16 / 9;
  cursor: url("assets/mu-link.cur"), pointer !important;
  transition: filter 0.3s ease, transform 0.3s ease;
}

.cat-card:hover {
  filter: brightness(1.35);
  transform: translateY(-2px);
}

.cat-title {
  display: block;
  font-family: "Harmonique", sans-serif;
  font-weight: 900;
  font-size: 17px;
  color: #ffb64d;
  white-space: nowrap;
  margin-bottom: var(--cat-separacion-textos);
  transform: translate(var(--cat-ajuste-x), var(--cat-ajuste-y));
  /* Sombreado estándar sin bisel */
  text-shadow: 
    1px 1px 3px rgba(0,0,0,0.9),             /* Sombra base */
    0px 0px 8px rgba(0,0,0,0.7);             /* Sombra difuminada oscura */
}

.cat-desc {
  display: block;
  color: #ffd7b7;
  font-size: 11px;
  line-height: 1.35;
  font-family: "Harmonique", sans-serif;
  transform: translate(var(--cat-ajuste-x), var(--cat-ajuste-y));
  text-shadow: 1px 1px 2px rgba(0,0,0,0.9), 0 0 5px rgba(0,0,0,0.5);
}

/* .lobby-featured ya modificado arriba */

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

.featured-grid .product-card {
  background: none;
}

@media (max-width: 960px) {
  .category-grid > * {
    flex: 0 1 calc(50% - 24px);
  }
}

@media (max-width: 640px) {
  .category-grid {
    flex-wrap: wrap;
    gap: 24px;
  }
  .category-grid > * {
    flex: 0 1 100%;
  }

  .featured-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1080px) {
  .brand-header {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .side-copy,
  .side-copy-right {
    justify-self: center;
    text-align: center;
  }

  .market-intro,
  .graphic-piece {
    grid-template-columns: 1fr;
  }

  .market-intro {
    display: grid;
  }

  .market-layout {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 820px) {
  .site-stage {
    padding: 34px 14px;
  }

  .brand-logo {
    width: 110px;
    height: 110px;
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .graphic-piece {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .graphic-mockup {
    min-height: 230px;
  }
}

@media (max-width: 560px) {
  .site-stage {
    padding-top: 24px;
  }

  .brand-header {
    gap: 16px;
  }

  .side-copy {
    font-size: 10px;
  }

  .nav-art {
    margin-bottom: -12px;
  }

  .market-tools {
    min-width: 0;
  }

  .product-grid {
    grid-template-columns: 1fr;
  }

  .graphic-mockup {
    min-height: 260px;
  }

  .layer-web,
  .layer-launcher {
    left: 18px;
    right: 18px;
    width: auto;
  }

  .layer-web {
    top: 38px;
  }

  .layer-launcher {
    top: 112px;
  }

  .license-seal {
    top: 18px;
    right: 18px;
    width: 66px;
  }
}

/* ========================================================= */
/*                   PRODUCT MODAL (GLASS)                   */
/* ========================================================= */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  /* backdrop-filter: blur(8px); */
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  padding: 40px;
}

.modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  position: relative;
  width: 100%;
  max-width: 1100px;
  height: auto;
  max-height: 90vh;
  background: rgba(15, 17, 21, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  display: block; /* Removed flex */
  overflow-y: auto;
  overflow-x: hidden;
  transform: translateY(30px) scale(0.95);
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.modal-overlay.is-open .modal-content {
  transform: translateY(0) scale(1);
}

.modal-close {
  position: absolute;
  top: 15px;
  right: 20px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 32px;
  cursor: url("assets/mu-link.cur"), pointer !important;
  z-index: 20;
  transition: color 0.3s ease;
}

.modal-close:hover {
  color: var(--ember);
}

.modal-left {
  width: calc(100% - 400px);
  position: relative;
  background: rgba(10, 11, 14, 0.9);
  display: flex;
  flex-direction: column;
  padding: 30px;
  overflow: hidden;
}

.modal-left img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.modal-right {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 400px;
  padding: 30px 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: linear-gradient(135deg, rgba(20, 22, 28, 0.9) 0%, rgba(10, 11, 14, 0.95) 100%);
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  overflow-y: auto;
}

.modal-right h2 {
  font-family: var(--font-primary);
  font-size: 28px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  line-height: 1.2;
}

.modal-price {
  font-family: 'Harmonique', sans-serif;
  font-size: 24px;
  color: #fff;
  font-weight: bold;
  margin-bottom: 25px;
  letter-spacing: 0.05em;
  padding-bottom: 25px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-right p, .modal-right li {
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.modal-btn {
  display: inline-block;
  text-align: center;
  padding: 15px 30px;
  background: linear-gradient(to right, #C9731F, #E2933C);
  color: #fff;
  font-family: 'Harmonique', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  border-radius: 4px;
  transition: filter 0.3s ease, transform 0.3s ease;
  box-shadow: 0 10px 20px rgba(201, 115, 31, 0.3);
}

.modal-btn:hover {
  filter: brightness(1.2);
  transform: translateY(-2px);
}

/* ========================================================= */
/*                   CHECKOUT MODAL PANEL                    */
/* ========================================================= */

.checkout-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.btn-back {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: url("assets/mu-link.cur"), pointer !important;
  font-family: var(--font-primary);
  font-size: 14px;
  margin-bottom: 10px;
  padding: 0;
  transition: color 0.3s;
}

.btn-back:hover {
  color: #fff;
}

.checkout-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.checkout-tab {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  padding: 10px 0;
  border-radius: 6px;
  cursor: url("assets/mu-link.cur"), pointer !important;
  font-weight: bold;
  transition: all 0.3s;
}

.checkout-tab:hover {
  background: rgba(255, 255, 255, 0.1);
}

.checkout-tab.active {
  background: rgba(255, 204, 102, 0.1);
  border-color: var(--gold);
  color: var(--gold);
}

.checkout-qr {
  width: 100%;
  max-width: 250px;
  display: block;
  margin: 0 auto 20px;
  border: 2px solid var(--gold);
  border-radius: 8px;
  padding: 5px;
  background: #fff;
}

.checkout-data-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.checkout-data {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 12px 15px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.checkout-data-header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.checkout-data span {
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  color: var(--text-secondary);
  font-size: 13px;
}

.checkout-data strong {
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  color: var(--gold);
  font-size: 15px;
  word-break: break-all;
  width: 100%;
}

.btn-copy {
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  background: var(--gold);
  color: #000;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  cursor: url("assets/mu-link.cur"), pointer !important;
  transition: transform 0.2s;
}

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

.paypal-warning {
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  background: rgba(255, 60, 60, 0.1);
  border: 1px solid rgba(255, 60, 60, 0.3);
  color: #ffbaba;
  padding: 15px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 20px;
}

.cat-desc {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.4;
  margin-top: 1px;
}

.checkout-disclaimer {
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 15px;
}

.checkout-disclaimer strong {
  color: #fff;
}

@media (max-width: 820px) {
  .modal-content {
    height: auto;
    max-height: 90vh;
    overflow-y: auto;
  }
  .modal-left {
    width: 100%;
    height: auto;
    flex: none;
    padding: 15px;
  }
  .modal-right {
    position: static;
    width: 100%;
    padding: 20px 15px;
  }
}

/* ========================================================= */
/*               JDLAUNCHER TEMPLATE STYLES                  */
/* ========================================================= */

.tech-specs {
  color: var(--text-secondary);
  font-size: 14px;
}

.spec-title {
  color: var(--gold);
  font-family: 'Harmonique', sans-serif;
  margin: 15px 0 10px;
  font-size: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 5px;
}

.spec-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 15px;
}

.spec-list li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 8px;
  line-height: 1.4;
}

.spec-list li::before {
  content: '▪';
  color: var(--ember);
  position: absolute;
  left: 0;
}

.price-breakdown {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 15px;
}

.breakdown-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
}

.bd-icon {
  margin-right: 10px;
  font-size: 16px;
}

.bd-label {
  flex: 1;
  color: var(--text-secondary);
}

.bd-price {
  color: #fff;
  font-family: 'Harmonique', sans-serif;
}

.breakdown-total {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 10px;
  padding-top: 10px;
  font-size: 18px;
  font-family: 'Harmonique', sans-serif;
  font-weight: bold;
  color: var(--gold);
}

.modal-gallery-nav {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 10;
}

.gallery-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  cursor: url("assets/mu-link.cur"), pointer !important;
  transition: all 0.3s ease;
}

.gallery-dot.active, .gallery-dot:hover {
  background: var(--gold);
  border-color: var(--gold);
  transform: scale(1.2);
}

.modal-large {
  max-width: 1200px !important;
}

/* COMPRA DUAL */
.purchase-dual-container {
  display: flex;
  flex-direction: row;
  gap: 15px;
  margin-top: 15px;
  flex-shrink: 0;
}

.btn-purchase {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  transition: all 0.3s ease;
  font-family: var(--font-primary); /* Respeta fuente corporativa */
}

.btn-purchase-direct {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-purchase-direct:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

.btn-purchase-vip {
  background: linear-gradient(135deg, #FFB347, #FF7B00);
  color: #fff;
  border: 1px solid #FFD700;
  box-shadow: 0 4px 15px rgba(255, 123, 0, 0.3);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.btn-purchase-vip:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 123, 0, 0.5);
  filter: brightness(1.1);
}

.btn-purchase-psd {
  background: linear-gradient(90deg, #FF0000, #FF6A00);
  color: #fff;
  border: 1px solid #FF2200;
  box-shadow: 0 4px 15px rgba(255, 34, 0, 0.4);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.btn-purchase-psd:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 34, 0, 0.6);
  filter: brightness(1.1);
}

/* GALERIA MODAL (SLIDER) */
.modal-gallery-slider::-webkit-scrollbar {
  height: 6px;
}
.modal-gallery-slider::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
}
.modal-gallery-slider::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 4px;
}

/* ========================================================= */
/*                   BUNDLE NAV & MODAL                      */
/* ========================================================= */
.btn-bundle-nav {
  padding: 8px 16px;
  background: linear-gradient(90deg, #ff9900, #ff5500);
  border: 1px solid #ffcc00;
  border-radius: 20px;
  color: #fff;
  font-family: var(--font-primary);
  font-weight: bold;
  font-size: 0.85rem;
  cursor: url("assets/mu-link.cur"), pointer !important;
  box-shadow: 0 0 10px rgba(255, 153, 0, 0.4);
  animation: pulse-bundle-nav 2s infinite;
  transition: transform 0.3s ease, filter 0.3s ease;
  text-transform: uppercase;
}

.btn-bundle-nav.vip {
  background: linear-gradient(90deg, #d4af37, #b8860b);
  border: 1px solid #ffd700;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}

.btn-bundle-nav:hover {
  transform: translateY(-2px);
  filter: brightness(1.2);
  animation: none;
}

/* SUB-FILTERS PSD */
.psd-subfilters {
  position: fixed;
  top: 150px;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 15px;
  z-index: 9999;
  width: 254px;
  height: 318px;
  box-sizing: border-box;
  background: url("assets/PSD Design Templates/panel-filtros.webp") center / 100% 100% no-repeat;
  padding: 20px 20px 20px 14px;
  animation: slideInLeft 0.5s ease;
}

@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.psd-sub-btn {
  background: transparent;
  color: #fff;
  border: 1px solid #444;
  padding: 10px 20px;
  border-radius: 8px;
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
  transform: scale(0.95);
  transform-origin: left center;
}

.psd-sub-btn:hover {
  background: rgba(255, 123, 0, 0.2);
  border-color: var(--gold);
}

.psd-sub-btn.active {
  background: linear-gradient(90deg, #360f00, #ff7b00);
  border-color: #fff;
  box-shadow: 0 0 10px rgba(255, 123, 0, 0.8);
}

/* SLIDESHOW MULTI DESIGN */
.slideshow-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: multiSlideFade 15s infinite;
}

.slide-1 { animation-delay: 0s; }
.slide-2 { animation-delay: 3s; }
.slide-3 { animation-delay: 6s; }
.slide-4 { animation-delay: 9s; }
.slide-5 { animation-delay: 12s; }

@keyframes multiSlideFade {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  20%  { opacity: 1; }
  25%  { opacity: 0; }
  100% { opacity: 0; }
}

/* MODAL THUMBNAILS */
#modal-thumbnails {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  justify-content: center;
  flex-wrap: wrap;
  z-index: 10;
  position: relative;
}

.modal-thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0.6;
}

.modal-thumb:hover {
  opacity: 1;
  transform: scale(1.05);
}

.modal-thumb.active {
  opacity: 1;
  border-color: var(--gold);
  box-shadow: 0 0 8px rgba(255, 182, 77, 0.6);
}

/* OCULTAR TEXTOS Y ELIMINAR SU ESPACIO EN SECCIONES SECUNDARIAS PARA SUBIR PRODUCTOS */
body[data-active-category="jdlauncher"] .market-intro-text,
body[data-active-category="templates"] .market-intro-text,
body[data-active-category="modules"] .market-intro-text,
body[data-active-category="psd"] .market-intro-text {
  display: none !important;
}

/* JANODESIGN HERO FLOTANTE */
.janodesign-hero {
  position: absolute;
  top: -230px; /* Subido otros 30px según petición */
  left: 50%;
  transform: translateX(-50%);
  width: 1352px; /* 30% más grande */
  max-width: 100vw;
  z-index: 1;
  pointer-events: none;
  animation: floatHero 6s ease-in-out infinite;
}

@keyframes floatHero {
  0% { transform: translateX(-50%) translateY(0px); }
  50% { transform: translateX(-50%) translateY(-15px); }
  100% { transform: translateX(-50%) translateY(0px); }
}

/* EFECTO DE LUZ SOBRE EL RETRATO DE JANODESIGN (SOBRE MI) */
@keyframes fadeLight {
  0% { opacity: 0.2; }
  100% { opacity: 1; }
}

.about-lighteffect {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: -185px;
  margin-left: 88px;
  width: 51.7%;
  height: 51.7%;
  object-fit: contain;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 2;
  animation: spinLight 15s linear infinite, fadeLight 2s ease-in-out infinite alternate; /* Gira y parpadea */
}

@keyframes spinLight {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* F.A.Q. SECTION */
.faq-card {
  grid-column: 1 / -1;
  background: transparent;
  min-width: 0;
  width: 100%;
}

.faq-body {
  padding: 3rem;
  background-color: rgba(20, 20, 20, 0.6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
}

.faq-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem; /* Menos espacio entre el texto y el bloque del personaje */
  margin-bottom: 3rem; /* Menos espacio vertical entre los dos grandes bloques zigzag */
}
.faq-layout:last-child {
  margin-bottom: 0;
}

.faq-content {
  flex: 1.2; /* Reducido de 1.8 a 1.2 para dar más espacio a la imagen */
}

.faq-title {
  color: var(--gold);
  font-family: var(--font-heading);
  font-size: 1.8rem;
  text-transform: uppercase;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 10px;
}

.faq-item {
  background: rgba(25, 25, 25, 0.5);
  border: 1px solid rgba(255, 182, 77, 0.1);
  padding: 1rem 1.2rem; /* Más compacto verticalmente */
  border-radius: 10px;
  margin-bottom: 1rem; /* Menos espacio entre items */
  transition: all 0.3s ease;
  /* backdrop-filter: blur(5px); */
  position: relative;
  overflow: hidden;
}

.faq-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background: var(--gold);
  opacity: 0.2;
  transition: all 0.3s ease;
}

.faq-item:hover {
  transform: translateX(5px) translateY(-2px);
  border-color: rgba(255, 182, 77, 0.3);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 182, 77, 0.05);
  background: rgba(35, 35, 35, 0.8);
}

.faq-item:hover::before {
  opacity: 1;
  box-shadow: 0 0 10px var(--gold);
}

.faq-question {
  color: var(--gold);
  font-family: var(--font-heading);
  font-size: 1rem; /* Reducido (antes 1.1rem) */
  margin-bottom: 0.4rem;
  font-weight: bold;
  letter-spacing: 0.03em;
}

.faq-answer {
  color: var(--muted);
  font-size: 0.88rem; /* Reducido (antes 0.95rem) */
  line-height: 1.4;
}

.faq-image-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 675px;
}

.faq-image {
  max-width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(0,0,0,0.5));
}

@media (max-width: 900px) {
  .faq-layout {
    flex-direction: column !important;
  }
}

/* INFO DESCRIPTIVA JDLAUNCHER */
.jdlauncher-info {
  grid-column: 1 / -1;
  background: transparent;
  margin-top: 180px; /* Compensa el relative top:150px de las tarjetas superiores */
  width: 100%;
}

.jdinfo-body {
  background: rgba(15, 15, 15, 0.7);
  border: 1px solid rgba(255, 182, 77, 0.1);
  border-radius: var(--radius-lg);
  padding: 3rem;
  text-align: center;
  /* backdrop-filter: blur(10px); */
}

.jdinfo-title {
  color: var(--gold);
  font-family: var(--font-heading);
  font-size: 1.8rem;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.jdinfo-text {
  color: var(--muted);
  font-size: 1.1rem;
  max-width: 900px;
  margin: 0 auto 3rem auto;
  line-height: 1.6;
}

.jdinfo-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  text-align: left;
}


.jdinfo-feature {
  background: rgba(45, 10, 10, 0.7); /* Rojo oscuro / vino */
  border: 1px solid rgba(255, 182, 77, 0.1);
  padding: 1.5rem;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.jdinfo-feature:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 60, 60, 0.5); /* Borde un poco más rojo en hover */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(200, 20, 20, 0.2); /* Sombra rojiza */
  background: rgba(60, 15, 15, 0.85); /* Rojo oscuro más intenso en hover */
}

/* COMPACTAR LISTAS EN FEATURE-BOX DEL MODAL */
.feature-box ul {
  margin: 5px 0 0 0;
  padding-left: 20px;
}

.feature-box li {
  margin-bottom: 6px !important;
  line-height: 1.3 !important;
}

.feature-box h4 {
  margin-bottom: 8px !important;
}

.jdinfo-feature h4 {
  color: var(--gold);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  margin-bottom: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center; /* Títulos centrados como pidió el usuario */
}

.jdinfo-feature p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .jdinfo-features {
    grid-template-columns: 1fr;
  }
}

/* STAT CARDS (Reemplazo del antiguo Cat-Card) */
.stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 25px 15px; 
  background: url('assets/modalinfo.webp') center / 100% 100% no-repeat;
  transition: all 0.3s ease;
  min-height: 160px;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.stat-highlight {
  display: block;
  font-family: var(--font-heading, "Harmonique");
  font-size: 35px; /* 20% más pequeño */
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
  margin-top: 8px;
  margin-bottom: 0px;
  text-shadow: none;
}

/* ============================================================
   LANG SWITCHER - PREMIUM LANGUAGE SELECTOR
   ============================================================ */
.lang-switcher {
  position: absolute;
  top: 50%;
  right: -135px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 10001;
}

@keyframes pulseLangGlow {
  0% { box-shadow: 0 0 10px rgba(255,182,77,0.3); border-color: rgba(255,182,77,0.5); }
  50% { box-shadow: 0 0 25px rgba(255,182,77,0.7); border-color: rgba(255,182,77,1); }
  100% { box-shadow: 0 0 10px rgba(255,182,77,0.3); border-color: rgba(255,182,77,0.5); }
}

.lang-btn {
  background: rgba(20, 14, 10, 0.9);
  border: 1px solid rgba(255, 182, 77, 0.35);
  /* backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); */
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-heading, 'Cinzel', serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: url("assets/mu-link.cur"), pointer !important;
  padding: 8px 10px;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 44px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.7);
}

.lang-flag {
  width: 22px;
  height: 16px;
  object-fit: cover;
  border-radius: 2px;
  opacity: 0.7;
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

.lang-btn:hover {
  color: #fff;
  background: rgba(45, 25, 10, 0.95);
  border-color: rgba(255, 182, 77, 0.8);
  transform: translateX(-5px) scale(1.05);
  box-shadow: 0 4px 20px rgba(255,182,77,0.3), inset 0 0 10px rgba(255,182,77,0.1);
}

.lang-btn:hover .lang-flag {
  opacity: 1;
  transform: scale(1.15);
}

.lang-btn.active {
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 182, 77, 1);
  background: linear-gradient(135deg, rgba(80,40,10,0.95) 0%, rgba(20,14,10,0.95) 100%);
  border-color: rgba(255, 182, 77, 1);
  animation: pulseLangGlow 2.5s infinite;
}

.lang-btn.active .lang-flag {
  opacity: 1;
}

.lang-switcher-wrapper {
  position: relative;
  z-index: 10001;
  width: 1250px;
  max-width: 100%;
  margin: 0 auto;
  pointer-events: none;
}
.lang-switcher-wrapper .lang-switcher {
  pointer-events: auto;
  position: fixed;
  top: 20px;
  right: 20px;
  transform: none;
}


/* LEGAL MODAL */
.legal-modal-content {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 0;
  background: var(--bg-dark);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.legal-sidebar {
  width: 250px;
  background: rgba(0, 0, 0, 0.3);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}

.legal-tab {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 15px 25px;
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  border-left: 3px solid transparent;
  font-family: 'Inter', sans-serif;
}

.legal-tab:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.02);
}

.legal-tab.active {
  color: var(--gold);
  border-left-color: var(--gold);
  background: rgba(255, 186, 8, 0.05);
}

.legal-body-scroll {
  flex: 1;
  padding: 40px;
  overflow-y: auto;
  max-height: 80vh;
}

.legal-section {
  display: none;
}

.legal-section.active {
  display: block;
  animation: fadeIn 0.4s ease;
}

.legal-section h2 {
  color: var(--gold);
  font-size: 28px;
  font-family: 'Harmonique', sans-serif;
  margin-top: 0;
  margin-bottom: 25px;
  border-bottom: 1px solid rgba(255, 186, 8, 0.2);
  padding-bottom: 10px;
}

.legal-text-content {
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.7;
}

.legal-text-content p {
  margin-bottom: 15px;
}

.legal-text-content h3 {
  color: white;
  font-size: 18px;
  margin-top: 30px;
  margin-bottom: 15px;
}

.legal-text-content ul {
  margin-left: 20px;
  margin-bottom: 20px;
}

.legal-text-content li {
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  .legal-modal-content {
    flex-direction: column;
  }
  .legal-sidebar {
    width: 100%;
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    overflow-x: auto;
    padding: 10px 0;
  }
  .legal-tab {
    padding: 10px 15px;
    border-left: none;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
  }
  .legal-tab.active {
    border-left-color: transparent;
    border-bottom-color: var(--gold);
  }
  .legal-body-scroll {
    padding: 20px;
  }
}


.footer-socials {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: flex-end;
}
.social-icon {
  color: var(--text-secondary);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.social-icon:hover {
  color: var(--gold);
  transform: translateY(-2px);
}

.btn-demo-flotante {
  position: absolute;
  top: -10px;
  left: calc(50% - 110px);
  transform: translateX(-50%) scale(0.85);
  z-index: 50;
  background: linear-gradient(90deg, #ff3300, #ff7b00);
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid #ff7b00;
  color: white;
  font-family: var(--font-heading);
  font-size: 11px;
  text-decoration: none;
  font-weight: bold;
  letter-spacing: 1px;
  box-shadow: 0 0 10px rgba(255, 78, 0, 0.5);
  transition: all 0.3s ease;
  white-space: nowrap;
  pointer-events: auto;
}

.btn-demo-flotante:hover {
  transform: translateX(-50%) scale(0.92);
  box-shadow: 0 0 15px rgba(255, 123, 0, 0.8);
  filter: brightness(1.2);
}

/* =========================================
   TEXTO DE INICIO SOBRE EL NAVBAR
   ========================================= */
.home-only-top-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: -20px;
  margin-bottom: 5px;
  position: relative;
  z-index: 10;
}

.home-only-top-text h1 {
  max-width: 100%;
  margin: 0;
  font-size: clamp(24px, 3.8vw, 47px);
  line-height: 1.02;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Solo mostrar el texto superior en Inicio (all) */
body:not([data-active-category="all"]) .home-only-top-text {
  display: none !important;
}

/* Ocultar el texto inferior original en Inicio (all) */
body[data-active-category="all"] .hide-on-home {
  display: none !important;
}

/* Dar espacio extra en INICIO para revelar ms el personaje */
body[data-active-category="all"] .lobby-view {
  margin-top: 120px;
}