/* ============================================================================
   K MUSIC DIGITAL RECORDS — CAPA VISUAL PREVIEW  ·  2026-09-22
   ============================================================================
   ESTO ES UNA CAPA. `site.css` NO SE TOCA.

   Todo lo de este fichero cuelga de `body.kmd-preview`. Quitar la clase del
   <body>, o quitar el <link> de esta hoja, devuelve el sitio exactamente al
   diseno que hoy esta en produccion. Esa es la via de rollback.

   Direccion artistica: UN ESCENARIO APAGADO CON UNA SOLA LUZ ENCENDIDA.
     NEGRO  = escenario / material base
     ORO    = luz principal
     MORADO = atmosfera / sombra
     ROJO   = senal de estado, nunca decoracion

   Sin fuentes externas. Sin peticiones externas. Sin data: URIs. La CSP de
   produccion sirve esta hoja sin modificar una sola directiva.
   ============================================================================ */

body.kmd-preview {
  /* Luz. Los valores viven aqui y no repartidos por las reglas, para que la
     intensidad de toda la escena se pueda subir o bajar desde un solo sitio. */
  --beam-gold:    rgba(212, 175, 55, 0.20);
  --beam-gold-hi: rgba(242, 201, 76, 0.30);
  --haze-purple:  rgba(124,  60, 255, 0.22);
  --haze-deep:    rgba( 75,  31, 184, 0.16);
  --hairline:     rgba(212, 175, 55, 0.16);
  --hairline-cool:rgba(124,  60, 255, 0.16);
  --glass:        rgba(16, 15, 22, 0.58);
  --glass-up:     rgba(24, 22, 32, 0.72);
  --silver:       #DAD7E0;

  /* Tipografia. Stack del sistema, sin descargar nada: en este Mac y en el
     iPhone resuelve a SF Pro, que es una tipografia editorial de verdad. */
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  background: var(--bg-deep);
}

/* ---------------------------------------------------------------------------
   1. TIPOGRAFIA
   Sin dependencia externa. La personalidad editorial se consigue con el eje
   optico: los titulares aprietan el tracking y suben de peso a medida que
   crecen; el cuerpo se queda ancho y legible. Los tamanos no cambian, asi que
   no se mueve ni una linea de la maqueta aprobada.
   --------------------------------------------------------------------------- */
body.kmd-preview h1,
body.kmd-preview h2 {
  font-family: var(--font-display);
  letter-spacing: -0.028em;
  text-wrap: balance;
}
body.kmd-preview h1 { font-weight: 800; }
body.kmd-preview h3 { font-family: var(--font-display); letter-spacing: -0.012em; }

body.kmd-preview .lede { text-wrap: pretty; }
body.kmd-preview .eyebrow { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   2. RITMO DE ESCENA
   No todas las secciones pueden tener la misma intensidad. `data-scene` marca
   los picos; lo que no lleva escena es descanso deliberado: negro, espacio y
   tipografia.
   --------------------------------------------------------------------------- */
body.kmd-preview section { border-top: 0; position: relative; }
body.kmd-preview section + section::before {
  /* El filete que separaba secciones se convierte en un hilo de luz que se
     apaga en los bordes. Separa igual y no dibuja una caja. */
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(100%, var(--maxw)); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07) 22%, rgba(255,255,255,0.07) 78%, transparent);
}
/* Donde empieza un pico de luz el hilo sobra: la propia escena separa. */
body.kmd-preview section[data-scene]::before,
body.kmd-preview section[data-scene] + section::before { display: none; }

/* Secciones de descanso: mas aire arriba y abajo. */
body.kmd-preview #proposito,
body.kmd-preview #soporte { padding-top: 104px; padding-bottom: 104px; }

/* ---------------------------------------------------------------------------
   3. ESCENA A — HERO
   Negro profundo, un haz dorado entrando desde arriba a la izquierda, la
   atmosfera morada por detras, vineta cinematografica y grano. El logo es el
   protagonista absoluto: nada se dibuja por encima de el.
   --------------------------------------------------------------------------- */
body.kmd-preview .hero {
  background: var(--bg-deep);
  padding-top: clamp(72px, 13vw, 140px);
  padding-bottom: clamp(64px, 10vw, 112px);
  isolation: isolate;
}
body.kmd-preview .hero > .wrap { position: relative; }

.stage-light {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  /* La luz no llega a la franja de la cabecera. Es direccion artistica —el
     escenario esta apagado arriba y el foco entra desde fuera de plano— y a la
     vez lo que mantiene en negro puro el fondo sobre el que se funde el logo:
     `mix-blend-mode: screen` necesita un backdrop OPACO para hacer desaparecer
     el negro del PNG. Sobre un fondo semitransparente devuelve una caja. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 72px, #000 200px);
          mask-image: linear-gradient(180deg, transparent 0, transparent 72px, #000 200px);
}

/* EL HAZ. Un cono de luz que entra desde fuera del encuadre, no un degradado
   centrado: por eso esta rotado y desbordado por arriba. */
.stage-light .beam {
  position: absolute; top: -34%; left: 8%; width: 30%; height: 142%;
  transform: rotate(15deg); transform-origin: 50% 0;
  background: linear-gradient(179deg,
    var(--beam-gold-hi) 0%,
    var(--beam-gold) 30%,
    rgba(212,175,55,0.08) 62%,
    transparent 82%);
  filter: blur(34px);
  opacity: 0.95;
  will-change: transform;
  animation: beam-drift 34s ease-in-out infinite alternate;
}
/* El nucleo. Sin una linea mas cerrada dentro del cono, el haz se lee como una
   mancha y no como una luz que viene de un sitio concreto. */
.stage-light .beam::before {
  content: ""; position: absolute; top: 0; bottom: 22%; left: 34%; width: 20%;
  background: linear-gradient(179deg, rgba(255,232,160,0.34), rgba(242,201,76,0.12) 46%, transparent 76%);
  filter: blur(16px);
}
/* El punto donde la luz toca el escenario. Sin esto el haz flota. */
.stage-light .beam::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: 8%; height: 26%;
  background: radial-gradient(60% 100% at 50% 100%, var(--beam-gold-hi), transparent 72%);
  filter: blur(34px); opacity: 0.6;
}

/* LA ATMOSFERA. Morado por detras del haz: es la sombra que la luz deja, no
   un segundo foco. */
.stage-light .haze {
  position: absolute; inset: 4% -8% auto -8%; height: 104%;
  /* La sombra que deja la luz, no un segundo foco: por eso vive en los
     laterales y por debajo del haz, nunca en el centro ni arriba. Abierta como
     estaba, convertia el negro profundo en un lavado lavanda. */
  background:
    radial-gradient(560px 380px at 88% 34%, var(--haze-purple), transparent 66%),
    radial-gradient(680px 420px at 10% 84%, var(--haze-deep),   transparent 68%);
  filter: blur(16px); opacity: 0.34;
  animation: haze-drift 46s ease-in-out infinite alternate;
}

/* LA VINETA. Cierra el encuadre. Va por encima de haz y atmosfera y por
   debajo del contenido. */
.stage-light .vignette {
  position: absolute; inset: 0;
  background:
    /* OSCURECIDO CENTRAL. Es lo que hace que el logo, NO LIMITS, "La musica nos
       conecta", la descripcion y los botones manden sobre la fotografia. Sin
       esto el hero seria un poster con texto encima. */
    radial-gradient(46% 66% at 50% 50%, rgba(5,5,8,0.95), rgba(5,5,8,0.80) 42%, rgba(5,5,8,0.38) 72%, transparent 92%),
    radial-gradient(124% 104% at 50% 46%, transparent 52%, rgba(0,0,0,0.62) 100%),
    linear-gradient(180deg, rgba(5,5,8,0.94), rgba(5,5,8,0.30) 16%, transparent 38%, transparent 72%, rgba(5,5,8,0.97));
}

/* EL GRANO. SVG en linea con un patron de 160 px que el navegador rasteriza
   una vez y repite. Peso: cero bytes de red. Se apaga en movil. */
.stage-light .grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.05; display: none; }
@media (min-width: 900px) { .stage-light .grain { display: block; } }

/* Las particulas las crea preview.js y solo en escritorio. */
.stage-light .motes { position: absolute; inset: 0; width: 100%; height: 100%; }

@keyframes beam-drift {
  from { transform: rotate(16deg)   translateX(0)     scaleY(1);    opacity: .92; }
  to   { transform: rotate(12.5deg) translateX(3.2%)  scaleY(1.05); opacity: 1;   }
}
@keyframes haze-drift {
  from { transform: translate3d(0, 0, 0)        scale(1);    }
  to   { transform: translate3d(-2.2%, 1.6%, 0) scale(1.06); }
}

/* El lockup recibe su propia luz de apoyo, por detras, para que el logo no
   quede apoyado sobre negro plano. */
body.kmd-preview .hero-lockup { position: relative; }
body.kmd-preview .hero-lockup::before {
  content: ""; position: absolute; z-index: -1;
  /* La caja baja hasta -52% para cubrir tambien NO LIMITS, que va justo debajo
     del lockup. Medido sobre la fotografia, el claim daba 4,34:1 con la parada
     mas oscura de su degradado dorado: por debajo del 4,5:1 de WCAG AA. Esta
     placa oscura lo devuelve a rango sin tocar el degradado aprobado. */
  inset: -20% -14% -52% -14%;
  background:
    radial-gradient(60% 70% at 50% 54%, rgba(5,5,8,0.95), rgba(5,5,8,0.70) 58%, transparent 86%),
    radial-gradient(48% 54% at 50% 46%, rgba(212,175,55,0.09), transparent 72%);
  filter: blur(26px);
}
/* "La musica nos conecta" manda sobre todo lo que tenga detras. */
body.kmd-preview .hero h1 {
  text-shadow: 0 2px 28px rgba(5,5,8,0.85), 0 1px 3px rgba(5,5,8,0.9);
}
body.kmd-preview .hero .lede { color: #C6C2CE; }

/* ---------------------------------------------------------------------------
   4. FLOATING CONSOLE HEADER
   Sobre el hero se aligera hasta casi desaparecer; en cuanto hay scroll se
   cierra en negro translucido y aparece el filete oro/morado.
   El panel movil se deja EXACTAMENTE como esta aprobado.
   --------------------------------------------------------------------------- */
body.kmd-preview .site-header {
  background: linear-gradient(180deg, rgba(5,5,8,0.72), rgba(5,5,8,0.30) 62%, rgba(5,5,8,0.06));
  backdrop-filter: saturate(120%) blur(6px);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  border-bottom: 1px solid transparent;
  transition: background .28s ease, border-color .28s ease, backdrop-filter .28s ease;
}
body.kmd-preview .site-header.is-scrolled {
  background: rgba(7, 7, 11, 0.72);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-bottom-color: transparent;
}
/* El filete inferior: oro en el centro, morado en los extremos. Un borde
   plano no lo conseguiria. */
body.kmd-preview .site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline-cool) 18%, var(--hairline) 50%, var(--hairline-cool) 82%, transparent);
  opacity: 0; transition: opacity .28s ease;
}
body.kmd-preview .site-header.is-scrolled::after { opacity: 1; }

/* Con el menu movil abierto la cabecera tiene que ser opaca: translucida
   dejaba ver el hero por detras del panel y parecia a medio abrir. */
body.kmd-preview.nav-open .site-header { background: var(--bg-deep); }

/* La consola: en escritorio los enlaces viven dentro de una placa translucida
   con filete, no sueltos sobre el fondo. */
@media (min-width: 900px) {
  body.kmd-preview .site-nav > ul {
    align-items: center; gap: 4px 6px; padding: 5px 7px;
    border: 1px solid rgba(255,255,255,0.07); border-radius: 999px;
    background: rgba(12, 11, 17, 0.42);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
  }
  body.kmd-preview .site-header.is-scrolled .site-nav > ul {
    background: rgba(18, 17, 24, 0.55); border-color: rgba(255,255,255,0.09);
  }
  body.kmd-preview .site-nav > ul > li > a,
  body.kmd-preview .site-nav .sub-toggle { padding: 9px 13px; border-radius: 999px; }
}

/* ESTADOS. Normal plata limpia; hover hacia blanco/oro con filete inferior;
   activo con un indicador pequeno. */
body.kmd-preview .site-nav a,
body.kmd-preview .site-nav .sub-toggle { color: var(--silver); position: relative; transition: color .18s ease; }
body.kmd-preview .site-nav > ul > li > a::after,
body.kmd-preview .site-nav .sub-toggle::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 5px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0); transform-origin: 50% 50%; opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
}
body.kmd-preview .site-nav > ul > li > a:hover,
body.kmd-preview .site-nav > ul > li > a:focus-visible,
body.kmd-preview .site-nav .sub-toggle:hover { color: #FFFDF6; }
body.kmd-preview .site-nav > ul > li > a:hover::after,
body.kmd-preview .site-nav > ul > li > a:focus-visible::after,
body.kmd-preview .site-nav .sub-toggle:hover::after,
body.kmd-preview .site-nav .sub-toggle[aria-expanded="true"]::after { transform: scaleX(1); opacity: 1; }

/* Activo: un punto, no un subrayado permanente. Y no depende solo del color,
   lleva ademas aria-current en el marcado. */
@media (min-width: 900px) {
  body.kmd-preview .site-nav a[aria-current="true"] { color: #FFFDF6; }
  body.kmd-preview .site-nav a[aria-current="true"]::before {
    content: ""; position: absolute; left: 50%; bottom: 2px; width: 3px; height: 3px;
    margin-left: -1.5px; border-radius: 50%; background: var(--gold-bright);
    box-shadow: 0 0 7px rgba(242,201,76,0.85);
  }
}

/* PARA ARTISTAS como CTA principal. Filete oro y fondo morado oscuro
   controlado. Sin exagerar: sigue siendo un enlace de menu. */
@media (min-width: 900px) {
  body.kmd-preview .site-nav .nav-cta > a {
    border: 1px solid var(--gold-deep);
    background: linear-gradient(180deg, rgba(75,31,184,0.34), rgba(40,16,98,0.30));
    color: #FFF6DA;
  }
  body.kmd-preview .site-nav .nav-cta > a::after { display: none; }
  body.kmd-preview .site-nav .nav-cta > a:hover,
  body.kmd-preview .site-nav .nav-cta > a:focus-visible {
    border-color: var(--gold); background: linear-gradient(180deg, rgba(92,38,222,0.44), rgba(48,20,118,0.38));
    color: #FFFDF6;
  }
}
/* En movil el CTA no se disfraza de boton dentro de la lista: solo se marca
   el texto en oro. Un boton ahi romperia el ritmo del panel. */
@media (max-width: 899px) {
  body.kmd-preview .site-nav .nav-cta > a { color: var(--gold); font-weight: 700; }
}

body.kmd-preview .nav-toggle { border-color: rgba(255,255,255,0.14); background: rgba(12,11,17,0.42); }
body.kmd-preview .nav-toggle:hover { border-color: var(--gold-deep); }

/* ---------------------------------------------------------------------------
   5. TARJETAS
   Menos caja repetida, mas profundidad. Glass oscuro controlado, una linea
   metalica arriba y luz localizada. Hover: elevacion pequena y cambio de
   borde. Nada mas.
   --------------------------------------------------------------------------- */
body.kmd-preview .card {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--glass-up), var(--glass));
  border-color: rgba(255,255,255,0.075);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 18px 40px -28px rgba(0,0,0,0.9);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
/* La linea metalica. Se enciende en oro al pasar por encima. */
body.kmd-preview .card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16) 30%, rgba(255,255,255,0.16) 70%, transparent);
  transition: background .24s ease;
}
body.kmd-preview .card:hover {
  transform: translateY(-3px);
  border-color: rgba(212,175,55,0.30);
  box-shadow: 0 1px 0 rgba(255,255,255,0.07) inset, 0 26px 54px -30px rgba(0,0,0,0.95);
}
body.kmd-preview .card:hover::before {
  background: linear-gradient(90deg, transparent, var(--gold) 34%, var(--gold-bright) 50%, var(--gold) 66%, transparent);
}
body.kmd-preview .card .num { background: rgba(212,175,55,0.14); box-shadow: 0 0 0 4px rgba(212,175,55,0.05); }

body.kmd-preview .triad .node {
  background: linear-gradient(180deg, var(--glass-up), var(--glass));
  border-color: rgba(255,255,255,0.07);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;
}

/* ---------------------------------------------------------------------------
   6. PROPOSITO — DESCANSO, Y KIKO EN PENUMBRA
   El texto ya dice "y en el centro de esa conexion esta Kiko". Aqui Kiko
   aparece de verdad, pero apenas: recortado por el borde, en penumbra, muy por
   detras del texto. Es un descubrimiento, no una ilustracion.
   --------------------------------------------------------------------------- */
body.kmd-preview #proposito { position: relative; overflow: hidden; }
body.kmd-preview #proposito > .wrap { position: relative; z-index: 2; }

.kiko-penumbra {
  position: absolute; z-index: 1; right: -4%; bottom: -8%;
  width: min(300px, 26vw); margin: 0; pointer-events: none;
  display: none;   /* solo escritorio: en movil se cruzaria con el texto */
}
.kiko-penumbra img {
  width: 100%; height: auto;
  /* Se baja hasta que la cara se INTUYE y no se lee. La orden pide silueta en
     penumbra; a 0,11 y 1,4 px de desenfoque Kiko todavia se reconocia de golpe
     y empezaba a tirar de la mirada. */
  opacity: 0.085; filter: blur(2.4px) grayscale(0.62) brightness(0.62);
  mask-image: linear-gradient(180deg, transparent, #000 34%, #000 74%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 34%, #000 74%, transparent);
}
.kiko-penumbra::after {
  content: ""; position: absolute; inset: 14% 6% 18%;
  background: radial-gradient(52% 48% at 44% 44%, rgba(124,60,255,0.16), transparent 72%);
  filter: blur(20px);
}
@media (min-width: 1100px) { .kiko-penumbra { display: block; } }

/* ---------------------------------------------------------------------------
   7. ARTISTAS — BACKSTAGE
   Luz lateral morada con acentos dorados. Y las tres tarjetas dejan de ser
   tres cajas: pasan a ser tres columnas abiertas separadas por un filete
   metalico. Menos interfaz, mas escenario.
   --------------------------------------------------------------------------- */
body.kmd-preview #artistas { position: relative; overflow: hidden; }
body.kmd-preview #artistas::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(520px 700px at -6% 42%, rgba(124,60,255,0.15), transparent 62%),
    radial-gradient(380px 520px at 104% 74%, rgba(212,175,55,0.07), transparent 64%);
}
body.kmd-preview #artistas > .wrap { position: relative; z-index: 1; }

@media (min-width: 720px) {
  body.kmd-preview .grid.cols { gap: 0; }
  body.kmd-preview .grid.cols .card {
    background: none; border: 0; border-radius: 0; box-shadow: none;
    padding: 6px 30px 8px; position: relative;
  }
  body.kmd-preview .grid.cols .card::before {
    /* El separador metalico sustituye al borde de la caja: una sola linea
       vertical que se apaga arriba y abajo. */
    top: 0; bottom: 0; left: 0; right: auto; width: 1px; height: auto;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,0.13) 18%, rgba(255,255,255,0.13) 82%, transparent);
  }
  body.kmd-preview .grid.cols .card:first-child { padding-left: 0; }
  body.kmd-preview .grid.cols .card:first-child::before { display: none; }
  body.kmd-preview .grid.cols .card:last-child { padding-right: 0; }
  body.kmd-preview .grid.cols .card:hover { transform: none; }
  body.kmd-preview .grid.cols .card:hover::before {
    background: linear-gradient(180deg, transparent, rgba(212,175,55,0.42) 22%, rgba(212,175,55,0.42) 78%, transparent);
  }
  body.kmd-preview .grid.cols .card h3 { color: #FFFDF6; }
}

/* ---------------------------------------------------------------------------
   8. MUSICA — PRODUCCION
   Luz desde abajo, como una consola encendida fuera de plano. Y la onda: una
   sola linea SVG, finisima, que progresa con el scroll. No es un ecualizador
   y no se mueve sola.
   --------------------------------------------------------------------------- */
body.kmd-preview #musica { position: relative; overflow: hidden; }
body.kmd-preview #musica::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -18%; height: 62%;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(70% 100% at 50% 100%, var(--haze-purple), transparent 70%),
    radial-gradient(38% 80% at 22% 100%, rgba(212,175,55,0.12), transparent 72%);
  filter: blur(8px);
}
body.kmd-preview #musica > .wrap { position: relative; z-index: 1; }

.wave { display: block; width: 100%; height: 64px; margin: 40px 0 6px; overflow: visible; }
.wave .track { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 1; }
.wave .lead {
  fill: none; stroke: url(#wave-gold); stroke-width: 1.35; stroke-linecap: round;
  /* JS pone la longitud real y mueve el offset con el scroll. Si JS no corre,
     estos valores dejan la onda dibujada entera: nunca se ve a medias. */
  stroke-dasharray: 1 0; stroke-dashoffset: 0;
}
.wave-caption {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--text-muted); margin: 0 0 30px;
}

/* ---------------------------------------------------------------------------
   9. UNIVERSO — CATALOGO EDITORIAL
   Numeracion 01–05 en mono y oro. La numeracion NO sustituye a los nombres:
   crea jerarquia y sensacion de catalogo de una compania creativa.
   --------------------------------------------------------------------------- */
body.kmd-preview .universe-map { gap: 0; margin-top: 38px; }
body.kmd-preview .universe-map a {
  align-items: center; gap: 0 18px; border: 0; border-radius: 0;
  background: none; padding: 20px 14px 20px 4px; position: relative;
  transition: background .2s ease, padding .2s ease;
}
body.kmd-preview .universe-map a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03) 70%, transparent);
}
body.kmd-preview .universe-map a:hover,
body.kmd-preview .universe-map a:focus-visible {
  background: linear-gradient(90deg, rgba(212,175,55,0.07), transparent 58%);
  padding-left: 12px;
}
body.kmd-preview .universe-map .idx {
  font-family: var(--font-mono); font-style: normal; font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; color: var(--gold-deep); flex: none; width: 2.4em;
  font-variant-numeric: tabular-nums; transition: color .2s ease;
}
body.kmd-preview .universe-map a:hover .idx { color: var(--gold-bright); }
body.kmd-preview .universe-map strong { font-family: var(--font-display); font-size: 17px; letter-spacing: 0.05em; }
body.kmd-preview .universe-map span { margin-left: auto; text-align: right; }
@media (max-width: 719px) {
  body.kmd-preview .universe-map span { margin-left: 2.4em; width: 100%; text-align: left; }
}
/* Una sola columna: es una lista de catalogo, no una rejilla de tarjetas. */
@media (min-width: 720px)  { body.kmd-preview .universe-map { grid-template-columns: 1fr; } }
@media (min-width: 1020px) { body.kmd-preview .universe-map { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   10. NEXO CUMBIA · KAY BLOKS
   Disenos CONGELADOS. Aqui no se cambia composicion, color ni tamano: solo se
   integra el fondo en el ritmo luminoso general para que no queden como dos
   islas con su propio degradado.
   --------------------------------------------------------------------------- */
body.kmd-preview .nexo, body.kmd-preview .kayb { position: relative; }
body.kmd-preview .kayb {
  background:
    radial-gradient(640px 400px at 50% 112%, rgba(124,60,255,0.13), transparent 66%),
    var(--bg);
}

/* ---------------------------------------------------------------------------
   11. K MUSIC LIVE — EL PICO
   Recinto. Un campo abstracto de luces desenfocadas que sugiere publico sin
   ensenar una sola fotografia. Todo son degradados: cero bytes de imagen.
   Despues de LIVE la intensidad vuelve a bajar.
   --------------------------------------------------------------------------- */
body.kmd-preview #live {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--bg-deep), #090610 42%, var(--bg-deep));
  padding-top: 112px; padding-bottom: 112px;
}
body.kmd-preview #live > .wrap { position: relative; z-index: 2; }

.live-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* Los focos del recinto, desde arriba. */
.live-field .rig {
  position: absolute; inset: -16% -10% auto -10%; height: 84%;
  background:
    radial-gradient(620px 420px at 13% -6%, rgba(124,60,255,0.46), transparent 64%),
    radial-gradient(560px 380px at 50% -10%, rgba(212,175,55,0.26), transparent 62%),
    radial-gradient(620px 420px at 87% -6%, rgba(124,60,255,0.40), transparent 64%);
  filter: blur(24px); opacity: 0.70;
  animation: rig-drift 40s ease-in-out infinite alternate;
}
/* Los haces del recinto. Dos conos que bajan desde los focos y se abren hacia
   el publico. Dos pseudo-elementos: ni un byte de imagen. */
.live-field::before, .live-field::after {
  content: ""; position: absolute; top: -8%; width: 24%; height: 96%;
  background: linear-gradient(178deg, rgba(124,60,255,0.30), rgba(124,60,255,0.07) 52%, transparent 80%);
  filter: blur(30px); pointer-events: none;
}
.live-field::before { left: 4%;  transform: rotate(13deg);  transform-origin: 50% 0; }
.live-field::after  { right: 4%; transform: rotate(-13deg); transform-origin: 50% 0;
  background: linear-gradient(178deg, rgba(212,175,55,0.24), rgba(212,175,55,0.06) 52%, transparent 80%); }
/* El publico. Puntos desenfocados, no personas. Un solo elemento con muchas
   paradas de degradado: mas barato que veinte divs. */
.live-field .crowd {
  /* Bokeh. Puntos grandes y desenfocados, de distintos tamanos y alturas: eso
     es lo que el ojo lee como "hay gente ahi delante". Con motas de 7 px solo
     parecia suciedad en el fondo. */
  position: absolute; left: -8%; right: -8%; bottom: -8%; height: 62%;
  background:
    radial-gradient(30px 30px at  5% 58%, rgba(242,201,76,0.46), transparent 64%),
    radial-gradient(18px 18px at 11% 78%, rgba(160, 32,240,0.52), transparent 66%),
    radial-gradient(38px 38px at 18% 44%, rgba(242,201,76,0.34), transparent 62%),
    radial-gradient(22px 22px at 25% 84%, rgba(255,255,255,0.26), transparent 66%),
    radial-gradient(26px 26px at 31% 62%, rgba(124, 60,255,0.50), transparent 64%),
    radial-gradient(16px 16px at 38% 90%, rgba(242,201,76,0.40), transparent 68%),
    radial-gradient(34px 34px at 45% 50%, rgba(160, 32,240,0.42), transparent 62%),
    radial-gradient(20px 20px at 52% 76%, rgba(242,201,76,0.44), transparent 66%),
    radial-gradient(28px 28px at 59% 58%, rgba(255,255,255,0.20), transparent 64%),
    radial-gradient(17px 17px at 66% 88%, rgba(124, 60,255,0.48), transparent 68%),
    radial-gradient(36px 36px at 73% 46%, rgba(242,201,76,0.32), transparent 62%),
    radial-gradient(21px 21px at 80% 72%, rgba(160, 32,240,0.46), transparent 66%),
    radial-gradient(25px 25px at 88% 56%, rgba(242,201,76,0.38), transparent 64%),
    radial-gradient(18px 18px at 95% 82%, rgba(124, 60,255,0.44), transparent 66%),
    /* El suelo. Solo los ultimos centimetros, para que el campo se apoye en
       algo y no flote. El degradado anterior se comia el campo entero. */
    linear-gradient(0deg, rgba(5,5,8,0.88) 0%, rgba(5,5,8,0.22) 26%, transparent 58%);
  filter: blur(12px);
  animation: crowd-breathe 26s ease-in-out infinite alternate;
}
@keyframes rig-drift {
  from { transform: translate3d(0,0,0)      scale(1);    opacity: .9; }
  to   { transform: translate3d(2.4%,1.2%,0) scale(1.05); opacity: 1;  }
}
@keyframes crowd-breathe {
  from { transform: translate3d(0,0,0)       scale(1);    opacity: .82; }
  to   { transform: translate3d(-1.6%,0,0)   scale(1.035); opacity: 1;   }
}

/* En LIVE las tarjetas se apoyan mas en el cristal: hay mucha luz detras. */
body.kmd-preview #live .card {
  background: linear-gradient(180deg, rgba(20,18,28,0.80), rgba(12,11,18,0.72));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* ---------------------------------------------------------------------------
   12. EL PUNTO ROJO
   Vocabulario de marca, no decoracion. En toda la pagina hay DOS: el estado
   "muy pronto" de la app, que ya existia, y el indicador de LIVE. Nada mas.
   --------------------------------------------------------------------------- */
body.kmd-preview .badge .pip { box-shadow: 0 0 0 3px rgba(226,59,46,0.14); }
.rec {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-muted);
  margin-left: 14px; vertical-align: middle;
}
.rec .dot {
  position: relative; flex: none;
  width: 7px; height: 7px; border-radius: 50%; background: var(--red);
  box-shadow: 0 0 0 3px rgba(226,59,46,0.14);
}
/* El punto NO se atenua: el rojo de marca da 4,75:1 sobre el fondo, y bajarle
   la opacidad al 42 % lo dejaba en 1,65:1, por debajo del 3:1 que WCAG 1.4.11
   pide a un indicador. Lo que late es el halo, en un pseudo-elemento aparte,
   y solo con transform y opacity. El punto se mantiene siempre al 100 %. */
.rec .dot::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  background: radial-gradient(circle, rgba(226,59,46,0.6), transparent 70%);
  animation: rec-halo 3.4s ease-in-out infinite;
}
@keyframes rec-halo {
  0%, 100% { transform: scale(0.7); opacity: 0.85; }
  50%      { transform: scale(1.4); opacity: 0.22; }
}

/* ---------------------------------------------------------------------------
   13. KIKO START
   Su seccion oficial y sus microinteracciones NO se tocan. Solo el fondo entra
   en el ritmo general, mas bajo: viene despues de LIVE y toca descansar.
   --------------------------------------------------------------------------- */
body.kmd-preview .kiko {
  background:
    radial-gradient(700px 380px at 16% 16%, rgba(124,60,255,0.15), transparent 62%),
    radial-gradient(420px 300px at 88% 88%, rgba(212,175,55,0.07), transparent 66%),
    var(--bg-deep);
}

/* ---------------------------------------------------------------------------
   14. PARA ARTISTAS · SOPORTE · PIE
   --------------------------------------------------------------------------- */
body.kmd-preview #para-artistas { position: relative; overflow: hidden; }
body.kmd-preview #para-artistas::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 58%;
  z-index: 0; pointer-events: none;
  background: radial-gradient(60% 100% at 78% 100%, rgba(212,175,55,0.10), transparent 68%);
}
body.kmd-preview #para-artistas > .wrap { position: relative; z-index: 1; }

body.kmd-preview .btn-gold {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 54%, var(--gold-deep));
  color: #0B0A05; box-shadow: 0 10px 30px -14px rgba(212,175,55,0.7);
  transition: box-shadow .2s ease, transform .2s ease;
}
body.kmd-preview .btn-gold:hover { transform: translateY(-1px); box-shadow: 0 16px 38px -14px rgba(212,175,55,0.85); }
body.kmd-preview .btn-ghost { transition: border-color .2s ease, color .2s ease, background .2s ease; }
body.kmd-preview .btn-ghost:hover { background: rgba(212,175,55,0.06); }

body.kmd-preview .site-footer {
  background: linear-gradient(180deg, var(--bg-deep), #06060A);
  border-top: 0; position: relative;
}
body.kmd-preview .site-footer::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(100%, var(--maxw)); height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline), transparent);
}

/* ---------------------------------------------------------------------------
   15. ENTRADA DE CONTENIDO
   Fade y un desplazamiento minimo. Solo transform y opacity. Sin JS, o con
   movimiento reducido, todo esta visible desde el primer momento.
   --------------------------------------------------------------------------- */
body.kmd-preview .reveal { opacity: 0; transform: translate3d(0, 14px, 0); }
body.kmd-preview .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------------------
   16. MOVIL
   Se apaga lo caro: grano, particulas, backdrop-filter de las tarjetas, y las
   derivas de luz se dejan quietas. La escena sigue estando, solo que estatica.
   --------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .stage-light .beam, .stage-light .haze,
  .live-field .rig, .live-field .crowd { animation: none; }
  .stage-light .beam { filter: blur(38px); }
  body.kmd-preview #live .card { backdrop-filter: none; -webkit-backdrop-filter: none; }
  body.kmd-preview #proposito, body.kmd-preview #soporte { padding-top: 76px; padding-bottom: 76px; }
  body.kmd-preview #live { padding-top: 86px; padding-bottom: 86px; }
}

/* ---------------------------------------------------------------------------
   17. MOVIMIENTO REDUCIDO
   site.css ya corta toda animacion y transicion. Aqui solo hay que asegurar
   que lo que entra por scroll queda VISIBLE, no escondido para siempre.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.kmd-preview .reveal { opacity: 1 !important; transform: none !important; }
  .rec .dot::after { animation: none; opacity: .5; }
}


/* ============================================================================
   18. VISUALES APROBADOS — DIRECCIONES #3 Y #10
   ============================================================================
   Decision del Fundador del 2026-09-22: quedan aprobadas la referencia #3
   (escenario, instrumentos, iluminacion morada y dorada) y la #10 (musica
   conectando al mundo: planeta y ondas moradas y doradas).

   Regla que gobierna todo este bloque: **son FONDOS, no contenido**. Van por
   detras de la iluminacion CSS que ya existia, no la sustituyen. Ninguna
   fotografia lleva texto dentro, todas son decorativas y van `aria-hidden`, y
   ninguna se pone debajo de la columna de texto sin oscurecer antes el area.

   Dos ficheros base dan las cuatro escenas. Cada una usa un ENCUADRE distinto
   del mismo original —`object-position` mas una mascara— para que no se repita
   la misma composicion, y de paso no se descarga dos veces lo mismo:

     stage-band     -> Artistas (banda inferior) y K MUSIC LIVE (a plena anchura)
     global-waves   -> Musica (izquierda: ondas) y Para Artistas (derecha: planeta)

   Todo self-hosted. AVIF primero, WebP de respaldo. Sin CDN, sin terceros, sin
   una sola peticion fuera del dominio: la CSP sigue igual y no se ha tocado.
   ============================================================================ */

.scene {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.scene-photo { display: block; }
.scene-photo img, .hero .scene-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- HERO: #3 + #10, la composicion aprobada ----------
   Capa mas profunda del escenario: el haz, la bruma, el grano y la vineta van
   por encima, en ese orden. `object-position` baja el encuadre respecto al
   centro geometrico porque abajo esta el suelo reflejado, y el suelo es lo que
   mete al visitante dentro del recinto. */
.hero .scene-photo { position: absolute; inset: 0; z-index: 0; }
.hero .scene-photo img {
  object-position: 50% 46%;
  opacity: 0.66;
  filter: saturate(0.98) brightness(0.9);
}

/* ============================================================================
   REGLA DE ENCUADRE — por que cada contenedor tiene la forma que tiene
   ----------------------------------------------------------------------------
   Los dos ficheros base son panoramicas muy apaisadas (5,6:1 y 5,4:1). Con
   `object-fit: cover`, la proporcion del CONTENEDOR decide cuanto se ve:

     contenedor casi igual de apaisado  -> se ve la panoramica ENTERA
     contenedor mas alto que la fuente  -> se recorta a los lados, y
                                           `object-position` elige QUE trozo

   De ahi salen las cuatro composiciones distintas a partir de dos ficheros. En
   la primera version los contenedores eran altos y a plena anchura: el recorte
   se comia los instrumentos y solo quedaba el humo del centro.
   ============================================================================ */

/* ---------- ARTISTAS: #3, esquina izquierda del escenario ----------
   Contenedor alto y a media anchura: recorta a la bateria, la guitarra y el pie
   de micro. Un primer plano del backstage, no el escenario entero. */
.scene-backstage {
  top: auto; right: auto; width: 54%; height: 56%;
}
.scene-backstage .scene-photo img {
  object-position: 7% 56%;
  opacity: 0.34;
  filter: saturate(0.94) brightness(0.94);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 54%),
                      linear-gradient(90deg, #000 40%, rgba(0,0,0,0.30) 76%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 54%),
                      linear-gradient(90deg, #000 40%, rgba(0,0,0,0.30) 76%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}

/* ---------- MUSICA: #10, solo las ondas ----------
   Contenedor mas alto que la fuente y anclado a la izquierda: entran las ondas,
   las notas y las barras, y el planeta se queda fuera. Se reserva para el
   cierre visual. */
.scene-waves {
  top: auto; right: auto; width: 80%; height: 48%;
}
.scene-waves .scene-photo img {
  object-position: 4% 52%;
  opacity: 0.34;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 50%, #000),
                      linear-gradient(90deg, #000 56%, rgba(0,0,0,0.28) 84%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 50%, #000),
                      linear-gradient(90deg, #000 56%, rgba(0,0,0,0.28) 84%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}

/* ---------- K MUSIC LIVE: #3 a plena anchura, el pico ----------
   Aqui SI interesa la panoramica entera, asi que el contenedor se acerca a la
   proporcion del fichero: una banda baja donde se ve el escenario completo, con
   los instrumentos en los dos extremos y el suelo reflejado. Por encima siguen
   los focos y el campo de luces: la foto pone el recinto, el CSS pone el
   publico. */
.scene-stage {
  top: auto; height: clamp(210px, 23vw, 360px);
}
.scene-stage .scene-photo img {
  object-position: 50% 62%;
  opacity: 0.46;
  filter: saturate(1.0);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 34%, #000);
          mask-image: linear-gradient(180deg, transparent, #000 34%, #000);
}

/* ---------- PARA ARTISTAS: #10, el planeta. Cierre visual ----------
   Contenedor casi cuadrado a la derecha: el recorte se cierra sobre el globo.
   El texto y los cuatro pasos se quedan a la izquierda, sin cruzarse. */
.scene-earth {
  left: auto; width: 56%;
}
.scene-earth .scene-photo img {
  object-position: 88% 50%;
  opacity: 0.40;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 44%, #000);
          mask-image: linear-gradient(90deg, transparent, #000 44%, #000);
}

/* ---------- MOVIL ----------
   En vertical el texto ocupa casi todo el ancho. Las escenas laterales pasan a
   bandas horizontales y bajan de intensidad: una foto al 40 % justo debajo de
   un parrafo, en una pantalla de 390 px, es ruido y no atmosfera. */
@media (max-width: 899px) {
  .hero .scene-photo img { object-position: 50% 42%; opacity: 0.58; }

  .scene-backstage { width: 100%; height: 40%; }
  .scene-backstage .scene-photo img {
    object-position: 14% 56%; opacity: 0.24;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 58%);
            mask-image: linear-gradient(180deg, transparent, #000 58%);
  }

  .scene-waves { width: 100%; height: 36%; }
  .scene-waves .scene-photo img {
    object-position: 8% 52%; opacity: 0.26;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 56%);
            mask-image: linear-gradient(180deg, transparent, #000 56%);
  }

  .scene-stage { height: clamp(150px, 42vw, 240px); }
  .scene-stage .scene-photo img { opacity: 0.36; }

  .scene-earth {
    left: 0; width: 100%; top: auto; height: 42%;
  }
  .scene-earth .scene-photo img {
    object-position: 84% 50%; opacity: 0.26;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 58%);
            mask-image: linear-gradient(180deg, transparent, #000 58%);
  }
}

/* ---------- CONTRASTE ----------
   Bajo cada bloque de texto que ahora tiene fotografia detras va un velo
   oscuro. No es decoracion: es lo que sostiene el contraste AA medido cuando
   por debajo pasa un foco dorado. Va DETRAS del texto y DELANTE de la foto. */
body.kmd-preview #artistas > .wrap,
body.kmd-preview #musica > .wrap,
body.kmd-preview #live > .wrap,
body.kmd-preview #para-artistas > .wrap { position: relative; z-index: 2; }

body.kmd-preview #artistas > .wrap::before,
body.kmd-preview #musica > .wrap::before,
body.kmd-preview #live > .wrap::before,
body.kmd-preview #para-artistas > .wrap::before {
  content: ""; position: absolute; z-index: -1;
  /* La caja se estira MUY por fuera del texto y el degradado se cierra en
     transparente antes de llegar a sus bordes. Ajustada al texto, el degradado
     se cortaba de golpe contra el borde y se veia el rectangulo del velo.
     La seccion lleva overflow:hidden, asi que este desborde no genera scroll. */
  inset: -90px -340px;
  background: radial-gradient(40% 46% at 50% 48%, rgba(5,5,8,0.78), rgba(5,5,8,0.40) 54%, transparent 78%);
}
body.kmd-preview #para-artistas > .wrap::before {
  background: radial-gradient(38% 50% at 40% 50%, rgba(5,5,8,0.82), rgba(5,5,8,0.42) 52%, transparent 76%);
}
@media (max-width: 899px) {
  body.kmd-preview #artistas > .wrap::before,
  body.kmd-preview #musica > .wrap::before,
  body.kmd-preview #live > .wrap::before,
  body.kmd-preview #para-artistas > .wrap::before {
    inset: -70px -160px;
    background: radial-gradient(52% 46% at 50% 48%, rgba(5,5,8,0.82), rgba(5,5,8,0.44) 56%, transparent 80%);
  }
}