/* ==========================================================================
   KILOMBO RP — Sistema de marca "Noche Neón"
   Paleta muestreada pixel a pixel del logo oficial (noche_icono_512.png).
   Este archivo es la ÚNICA fuente de verdad del color. Cambiar un token acá
   se propaga a todo el sitio: landing, tienda, mercado, hub, panel y reventas.
   Cargar SIEMPRE antes que cualquier otra hoja de estilo del sitio.
   ========================================================================== */

:root {
  /* ---- Rampa cruda del logo -------------------------------------------- */
  /* Fondos: el violeta casi negro sobre el que flota el logo */
  --k-void:        #07030C;   /* esquina del logo, el punto más profundo */
  --k-night:       #0B0512;   /* fondo base de la app */
  --k-abyss:       #120920;   /* superficie 0 */
  --k-deep:        #1A0C2B;   /* superficie 1 — cards */
  --k-plum:        #2D112B;   /* superficie 2 — pierna baja de la K */
  --k-wine:        #421A39;   /* borde profundo */
  --k-grape:       #5E1A6B;   /* borde acentuado */

  /* Neones: el trazo del logo, de violeta (corona) a durazno (relleno bajo) */
  --k-violet:      #AA17E8;   /* corona */
  --k-violet-lt:   #CA1BEE;   /* brillo de la corona */
  --k-magenta:     #BC1EBC;   /* cuerpo de la K — el color dominante */
  --k-fuchsia:     #DA31EB;   /* brazo superior */
  --k-pink:        #E035D3;   /* centro de la K — acento principal */
  --k-hot:         #FC54E4;   /* rosa neón, el punto más brillante */
  --k-blush:       #FD8ABE;   /* pierna inferior izquierda */
  --k-petal:       #FBA1E8;   /* halo rosa claro */
  --k-peach:       #FC9C90;   /* durazno cálido del relleno */

  /* Componentes RGB — para rgba() con opacidad variable */
  --k-pink-rgb:    224, 53, 211;
  --k-violet-rgb:  170, 23, 232;
  --k-magenta-rgb: 188, 30, 188;
  --k-hot-rgb:     252, 84, 228;
  --k-blush-rgb:   253, 138, 190;
  --k-petal-rgb:   251, 161, 232;
  --k-peach-rgb:   252, 156, 144;
  --k-night-rgb:   11, 5, 18;
  --k-deep-rgb:    26, 12, 43;
  --k-white-rgb:   255, 255, 255;

  /* ---- Tokens semánticos ----------------------------------------------- */
  --k-bg:            var(--k-night);
  --k-bg-deep:       var(--k-void);
  --k-surface:       rgba(var(--k-deep-rgb), .72);
  --k-surface-2:     rgba(var(--k-deep-rgb), .88);
  --k-surface-hover: rgba(45, 20, 66, .92);
  --k-surface-solid: #150A22;

  --k-border:        rgba(var(--k-pink-rgb), .18);
  --k-border-soft:   rgba(var(--k-white-rgb), .07);
  --k-border-strong: rgba(var(--k-pink-rgb), .45);

  --k-text:          #EDE4F5;   /* 15.9:1 sobre --k-bg */
  --k-text-muted:    #B9A8C9;   /*  9.0:1 */
  --k-text-dim:      #8B7B9E;   /*  5.2:1 — mínimo para texto chico */
  --k-text-invert:   #0B0512;

  --k-accent:        var(--k-pink);      /* 5.4:1 — ok para texto normal */
  --k-accent-2:      var(--k-violet);    /* 3.8:1 — solo relleno / texto grande */
  --k-accent-3:      var(--k-peach);     /* 9.8:1 — el cálido del logo */
  --k-accent-text:   var(--k-hot);       /* 7.2:1 — links y texto de acento */
  --k-accent-rgb:    var(--k-pink-rgb);

  /* Semáforo de estado, armonizado con la marca (no son colores del logo,
     pero se corrieron hacia el violeta para que no desentonen) */
  --k-success:       #34D9A0;
  --k-success-rgb:   52, 217, 160;
  --k-warning:       var(--k-peach);
  --k-warning-rgb:   var(--k-peach-rgb);
  --k-danger:        #FF4D6D;
  --k-danger-rgb:    255, 77, 109;
  --k-info:          var(--k-violet-lt);
  --k-info-rgb:      202, 27, 238;

  /* ---- Escalera de rangos VIP de la tienda -----------------------------
     Los tiers necesitan distinguirse entre si, asi que no van todos al
     magenta. Se conservan como escalera pero corridos al violeta para que
     convivan con la marca: el cian puro que habia antes era lo unico que
     chocaba de frente con el rosa del logo. */
  --k-tier-basico:     #CD945C;   /* bronce */
  --k-tier-basico-rgb: 205, 148, 92;
  --k-tier-ejecutivo:     #FFC24D;   /* oro */
  --k-tier-ejecutivo-rgb: 255, 194, 77;
  --k-tier-kilombo:     #EDE4F5;   /* perla */
  --k-tier-kilombo-rgb: 237, 228, 245;
  --k-tier-ruby:     #FF4D6D;   /* rubi */
  --k-tier-ruby-rgb: 255, 77, 109;
  --k-tier-platinum:     #C6B4FF;   /* violeta hielo (era cian #00ffff) */
  --k-tier-platinum-rgb: 198, 180, 255;

  /* ---- Gradientes ------------------------------------------------------ */
  /* El recorrido real del trazo del logo: violeta → magenta → rosa → durazno */
  --k-grad-brand:  linear-gradient(135deg, var(--k-violet) 0%, var(--k-magenta) 45%, var(--k-hot) 100%);
  --k-grad-logo:   linear-gradient(180deg, var(--k-violet-lt) 0%, var(--k-fuchsia) 30%, var(--k-magenta) 60%, var(--k-blush) 85%, var(--k-peach) 100%);
  --k-grad-text:   linear-gradient(120deg, #FFFFFF 0%, var(--k-hot) 45%, var(--k-peach) 100%);
  --k-grad-warm:   linear-gradient(135deg, var(--k-hot) 0%, var(--k-blush) 55%, var(--k-peach) 100%);
  --k-grad-card:   linear-gradient(150deg, rgba(var(--k-deep-rgb), .80) 0%, rgba(var(--k-night-rgb), .55) 100%);
  --k-grad-line:   linear-gradient(90deg, transparent, var(--k-accent), transparent);

  /* ---- Glows ----------------------------------------------------------- */
  --k-glow-xs: 0 0 8px rgba(var(--k-pink-rgb), .35);
  --k-glow-sm: 0 0 14px rgba(var(--k-pink-rgb), .30);
  --k-glow-md: 0 4px 22px rgba(var(--k-pink-rgb), .32);
  --k-glow-lg: 0 8px 44px rgba(var(--k-pink-rgb), .38);
  --k-glow-violet: 0 0 28px rgba(var(--k-violet-rgb), .40);
  --k-shadow-sm: 0 2px 10px rgba(0, 0, 0, .35);
  --k-shadow-md: 0 12px 32px rgba(0, 0, 0, .45);
  --k-shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);

  /* ---- Forma y ritmo ---------------------------------------------------- */
  --k-radius-xs: 8px;
  --k-radius-sm: 12px;
  --k-radius-md: 16px;
  --k-radius-lg: 22px;
  --k-radius-pill: 999px;
  --k-ease: cubic-bezier(.4, 0, .2, 1);
  --k-transition: .3s var(--k-ease);
  --k-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* ======================================================================
     ALIAS DE COMPATIBILIDAD
     El sitio venía con tres vocabularios de variables distintos. En vez de
     reescribir cada regla, los tres apuntan ahora a los tokens de arriba.
     ====================================================================== */

  /* -- Vocabulario legacy `--current-*` (nav, footer, landing, server/*) -- */
  --white: #fff;
  --black: #000;
  --font-main: var(--k-font);

  --bg-color-dark:              var(--k-bg);
  --text-color-dark:            var(--k-text);
  --gray-900-dark:              var(--k-abyss);
  --gray-800-dark:              var(--k-deep);
  --blue-arg-dark:              var(--k-accent);
  --blue-accent-dark:           var(--k-accent-2);
  --card-bg-dark:               var(--k-grad-card);
  --card-border-dark:           var(--k-border);
  --header-bg-dark:             rgba(var(--k-night-rgb), .45);
  --header-scrolled-bg-dark:    rgba(var(--k-night-rgb), .92);
  --mobile-menu-bg-dark:        rgba(var(--k-night-rgb), .97);
  --btn-bg-dark:                var(--k-grad-brand);
  --btn-text-dark:              #fff;
  --btn-border-dark:            transparent;
  --footer-bg-dark:             linear-gradient(180deg, rgba(var(--k-night-rgb), .82) 0%, rgba(7, 3, 12, .96) 100%);
  --logo-filter-dark:           drop-shadow(0 0 10px rgba(var(--k-pink-rgb), .45));
  --modal-bg-dark:              rgba(18, 9, 32, .97);
  --hero-text-gradient-start-dark: #fff;
  --hero-text-gradient-mid-dark:   var(--k-hot);
  --hero-text-gradient-end-dark:   var(--k-peach);

  --current-bg:                 var(--k-bg);
  --current-text-color:         var(--k-text);
  --current-gray-900:           var(--k-abyss);
  --current-gray-800:           var(--k-deep);
  --current-blue-arg:           var(--k-accent);
  --current-blue-accent:        var(--k-accent-2);
  --current-card-bg:            var(--k-grad-card);
  --current-card-border:        var(--k-border);
  --current-header-bg:          rgba(var(--k-night-rgb), .45);
  --current-header-scrolled-bg: rgba(var(--k-night-rgb), .92);
  --current-mobile-menu-bg:     rgba(var(--k-night-rgb), .97);
  --current-btn-bg:             var(--k-grad-brand);
  --current-btn-text:           #fff;
  --current-btn-border:         transparent;
  --current-footer-bg:          linear-gradient(180deg, rgba(var(--k-night-rgb), .82) 0%, rgba(7, 3, 12, .96) 100%);
  --current-logo-filter:        drop-shadow(0 0 10px rgba(var(--k-pink-rgb), .45));
  --current-modal-bg:           rgba(18, 9, 32, .97);
  --current-hero-text-gradient-start: #fff;
  --current-hero-text-gradient-mid:   var(--k-hot);
  --current-hero-text-gradient-end:   var(--k-peach);

  /* -- Vocabulario `--kilombo-*` (indexdev.css) — era amarillo, ahora neón -- */
  --kilombo-yellow:       var(--k-accent);
  --kilombo-yellow-hover: var(--k-hot);
  --kilombo-yellow-glow:  rgba(var(--k-pink-rgb), .22);
  --kilombo-bg:           var(--k-bg);
  --kilombo-black:        var(--k-void);
  --kilombo-card-bg:      var(--k-surface);
  --kilombo-card-bg-hover: var(--k-surface-hover);
  --kilombo-border:       var(--k-border);
  --kilombo-border-hover: var(--k-border-strong);
  --kilombo-white:        #fff;
  --text-primary:         var(--k-text);
  --text-secondary:       var(--k-text-muted);
  --star-color:           rgba(var(--k-petal-rgb), .55);
  --card-bg:              var(--k-surface);
  --card-bg-hover:        var(--k-surface-hover);
  --card-border-hover:    var(--k-border-strong);
  --radius-sm:            var(--k-radius-xs);
  --radius-md:            var(--k-radius-md);
  --radius-lg:            var(--k-radius-lg);
  --transition:           var(--k-transition);
}

/* ==========================================================================
   MODO CLARO — el sitio ya soportaba body.light-mode. Se mantiene, pero
   reinterpretado: papel lavanda pálido con el mismo neón como acento.
   ========================================================================== */
body.light-mode {
  --k-bg:            #F7F2FB;
  --k-bg-deep:       #EFE6F6;
  --k-surface:       rgba(255, 255, 255, .82);
  --k-surface-2:     rgba(255, 255, 255, .95);
  --k-surface-hover: #FFFFFF;
  --k-surface-solid: #FFFFFF;

  --k-border:        rgba(150, 22, 150, .20);
  --k-border-soft:   rgba(45, 17, 43, .10);
  --k-border-strong: rgba(150, 22, 150, .45);

  --k-text:          #24102C;
  --k-text-muted:    #58405F;
  --k-text-dim:      #7A6382;
  --k-text-invert:   #FFFFFF;

  /* En claro el neón puro no contrasta: se baja a un magenta profundo */
  --k-accent:        #A8129F;   /* 6.2:1 sobre #F7F2FB */
  --k-accent-2:      #7A15B8;
  --k-accent-3:      #B4501F;
  --k-accent-text:   #91108A;
  --k-accent-rgb:    168, 18, 159;

  --k-grad-text:     linear-gradient(120deg, #3A0F45 0%, #A8129F 55%, #B4501F 100%);
  --k-grad-card:     linear-gradient(150deg, rgba(255, 255, 255, .92) 0%, rgba(247, 242, 251, .70) 100%);
  --k-glow-xs: 0 0 8px rgba(168, 18, 159, .22);
  --k-glow-sm: 0 0 14px rgba(168, 18, 159, .18);
  --k-glow-md: 0 4px 22px rgba(168, 18, 159, .20);
  --k-glow-lg: 0 8px 44px rgba(168, 18, 159, .24);
  --k-shadow-sm: 0 2px 10px rgba(36, 16, 44, .10);
  --k-shadow-md: 0 12px 32px rgba(36, 16, 44, .14);
  --k-shadow-lg: 0 24px 60px rgba(36, 16, 44, .18);

  --current-header-bg:          rgba(255, 255, 255, .70);
  --current-header-scrolled-bg: rgba(255, 255, 255, .93);
  --current-mobile-menu-bg:     rgba(255, 255, 255, .98);
  --current-footer-bg:          linear-gradient(180deg, rgba(255, 255, 255, .85) 0%, rgba(239, 230, 246, .96) 100%);
  --current-modal-bg:           rgba(255, 255, 255, .98);
  --current-logo-filter:        none;
  --current-btn-text:           #fff;
  --kilombo-black:              #FFFFFF;
  --kilombo-white:              #24102C;
  --star-color:                 rgba(168, 18, 159, .30);
}

/* ==========================================================================
   BASE
   ========================================================================== */
body {
  background-color: var(--k-bg);
  color: var(--k-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: rgba(var(--k-pink-rgb), .35);
  color: #fff;
}

/* Enlaces dentro de texto corrido. Sin esto el navegador los pinta de azul
   (#0000EE), que era lo que pasaba en FAQ, TOS y Normativas. */
a:not([class]),
.k-prose a,
.faq-answer a,
.tos-content a,
.normativa-content a,
.info-bubble-text a,
.noticia-cuerpo a {
  color: var(--k-accent-text);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--k-accent-rgb), .35);
  transition: color var(--k-transition), border-color var(--k-transition);
}
a:not([class]):hover,
.k-prose a:hover,
.faq-answer a:hover,
.tos-content a:hover,
.normativa-content a:hover,
.info-bubble-text a:hover,
.noticia-cuerpo a:hover {
  color: var(--k-peach);
  border-bottom-color: var(--k-peach);
}

:focus-visible {
  outline: 2px solid var(--k-accent-text);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Scrollbar en la paleta del logo */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--k-pink-rgb), .45) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(var(--k-night-rgb), .55); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--k-violet), var(--k-magenta));
  border-radius: var(--k-radius-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--k-fuchsia), var(--k-hot));
  background-clip: content-box;
}

/* ==========================================================================
   UTILIDADES DE MARCA
   ========================================================================== */

/* Texto con el degradé del logo */
.k-gradient-text,
.k-text-brand {
  background: var(--k-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* El degradé exacto del trazo de la K, para títulos grandes */
.k-text-logo {
  background: var(--k-grad-logo);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.k-glow-text { text-shadow: 0 0 18px rgba(var(--k-pink-rgb), .55); }

/* Card estándar del sistema */
.k-card {
  background: var(--k-grad-card);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-md);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--k-shadow-md);
  transition: transform var(--k-transition), border-color var(--k-transition), box-shadow var(--k-transition);
}
.k-card:hover {
  transform: translateY(-4px);
  border-color: var(--k-border-strong);
  box-shadow: var(--k-shadow-lg), var(--k-glow-md);
}

/* Botón primario */
.k-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--k-radius-pill);
  font-family: var(--k-font);
  font-weight: 700;
  font-size: .92rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--k-transition), box-shadow var(--k-transition), background var(--k-transition);
}
.k-btn--primary {
  background: var(--k-grad-brand);
  color: #fff;
  box-shadow: var(--k-glow-md);
}
.k-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--k-glow-lg);
  color: #fff;
}
.k-btn--ghost {
  background: rgba(var(--k-pink-rgb), .08);
  border-color: var(--k-border-strong);
  color: var(--k-text);
}
.k-btn--ghost:hover {
  background: rgba(var(--k-pink-rgb), .16);
  transform: translateY(-2px);
  color: var(--k-text);
}

/* Separador con el filo neón del logo */
.k-divider {
  height: 1px;
  border: 0;
  background: var(--k-grad-line);
  opacity: .55;
}

/* Chip / badge */
.k-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .75rem;
  border-radius: var(--k-radius-pill);
  background: rgba(var(--k-pink-rgb), .12);
  border: 1px solid var(--k-border);
  color: var(--k-accent-text);
  font-size: .75rem;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}