/* ==========================================================================
   THE BYJHON MUSIC PREMIUM — css/estilos.css
   VERSION 11.0 ENTERPRISE — CIAN ELIMINADO DE CÁPSULAS
   Paleta: morado + marfil + ámbar. Cian reservado solo para DSP sliders.
   ========================================================================== */

/* 1. SCROLL INVISIBLE */
html, body { height:100%; overflow-x:hidden; overflow-y:auto; scrollbar-width:none !important; -ms-overflow-style:none !important; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { width:0 !important; height:0 !important; display:none !important; background:transparent !important; }
* { scrollbar-width:none !important; }

/* 2. PALETA */
:root {
    --neon-purple:   oklch(62% 0.28 304);
    --neon-amber:    oklch(75% 0.18 70);
    --neon-cyan:     oklch(85% 0.18 190);   /* solo para sliders DSP */
    --seafoam-ivory: oklch(96% 0.05 185);
    --bg-dark:       oklch(12% 0 0);
    --panel-dark:    oklch(16% 0 0);
    --border-soft:   oklch(100% 0 0 / 0.05);
    --shadow-purple: 0 0 25px rgba(180,120,255,0.15);
    --dynamic-accent: oklch(62% 0.28 304);
}

/* 3. BASE */
body { margin:0; background:var(--bg-dark); color:#fff; font-family:"Inter",sans-serif; }

/* 4. CÁPSULAS — SIN CIAN. Gradiente morado → marfil → ámbar */
.outer-capsule {
    display: inline-block;
    padding: 1.5px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--neon-purple), var(--seafoam-ivory), var(--neon-amber));
}
.inner-capsule {
    display: flex;
    align-items: center;
    padding: 5px 22px;
    border-radius: 999px;
    background: var(--bg-dark);
    color: white;
    font-family: "Syncopate", sans-serif;
    font-size: 8px;
    letter-spacing: 0.20em;
}

/* 5. SHINE CINÉTICO "THE BYJHON" header */
.byjhon-shine {
    background: linear-gradient(90deg, #ffffff, var(--neon-purple), var(--neon-amber), #ffffff);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 6s linear infinite;
}
@keyframes shine { to { background-position: 200% center; } }

/* "THE BYJHON" hero central — fuera de cápsula, shine propio */
.byjhon-shine-main {
    background: linear-gradient(90deg, var(--seafoam-ivory), var(--neon-amber), var(--neon-purple), var(--seafoam-ivory));
    background-size: 300% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 5s linear infinite, kineticSoft 7s ease-in-out infinite;
    display: inline-block;
}
@keyframes kineticSoft {
    0%,100% { transform: translateY(0) scale(1); }
    50%     { transform: translateY(-6px) scale(1.02); }
}

/* 6. KINETIC */
.animate-kinetic { display:inline-block; animation:kinetic 8s ease-in-out infinite; will-change:transform; }
@keyframes kinetic { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-15px); } }

/* 7. CÁPSULAS PRINCIPALES (header + hero badge) — animadas, sin cian */
.outer-capsule-main {
    display: inline-block;
    padding: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--neon-purple), var(--seafoam-ivory), var(--neon-amber), var(--neon-purple));
    background-size: 300% auto;
    animation: capsuleFlow 8s linear infinite;
}
@keyframes capsuleFlow { to { background-position:300% center; } }

.inner-capsule-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 28px;
    border-radius: 999px;
    background: var(--bg-dark);
    color: white;
    font-family: "Syncopate", sans-serif;
    font-size: 10px;
    letter-spacing: 0.25em;
}

/* 8. CURSOR MAGNÉTICO — visible desde el inicio, sin animación que lo oculte */
#dot {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    background-color: var(--seafoam-ivory);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate3d(-50%,-50%,0);
    will-change: transform;
    opacity: 1;
}
#circle {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    border: 1.5px solid var(--neon-purple);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transform: translate3d(-50%,-50%,0);
    box-shadow: 0 0 10px rgba(160,80,255,0.25), inset 0 0 10px rgba(160,80,255,0.12);
    will-change: transform;
    transition: width .2s ease, height .2s ease, border-color .2s ease;
    opacity: 1;
}
#circle.expanded { width:40px; height:40px; border-color:var(--neon-amber); }

/* 9. TARJETAS */
.track-row {
    background: oklch(100% 0 0 / 0.02);
    border: 1px solid var(--border-soft);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
    will-change: transform,background-color,border-color;
    transition: background .35s ease, border-color .35s ease, opacity .35s ease, transform .35s ease, box-shadow .35s ease;
}
.track-row:hover { background:oklch(100% 0 0/.06); border-color:var(--neon-purple); box-shadow:var(--shadow-purple); transform:scale(1.01); }
.track-row.active { border-color:var(--neon-purple); box-shadow:var(--shadow-purple); transform:scale(1.01); }
.track-destacada { background:linear-gradient(135deg, oklch(100% 0 0/.04), oklch(100% 0 0/.01)); border-color:rgba(160,80,255,0.15); }
.track-destacada:hover { border-color:var(--neon-amber); box-shadow:0 0 20px rgba(200,170,80,0.15),0 0 1px rgba(200,170,80,0.3) inset; }

/* 10. DSP SLIDERS — cian solo aquí, es parte del diseño del hardware */
.dsp-control { display:flex; flex-direction:column; gap:10px; }
.dsp-label-row { display:flex; justify-content:space-between; align-items:center; font-size:10px; letter-spacing:0.25em; text-transform:uppercase; color:#94a3b8; }
.premium-slider { appearance:none; -webkit-appearance:none; width:100%; height:4px; border-radius:999px; background:linear-gradient(90deg,var(--neon-purple),var(--neon-amber)); cursor:pointer; outline:none; }
.premium-slider::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:white; border:2px solid var(--neon-purple); box-shadow:0 0 10px rgba(160,80,255,0.6),0 0 20px rgba(160,80,255,0.3); transition:transform .15s ease; cursor:pointer; }
.premium-slider::-webkit-slider-thumb:active { transform:scale(1.2); }
.premium-slider::-moz-range-thumb { width:18px; height:18px; border:2px solid var(--neon-purple); border-radius:50%; background:white; cursor:pointer; }
.premium-slider::-moz-range-track { height:4px; border-radius:999px; background:linear-gradient(90deg,var(--neon-purple),var(--neon-amber)); }

/* Barra de progreso principal */
#main-progress { appearance:none; -webkit-appearance:none; background:transparent; cursor:pointer; z-index:20; }
#main-progress::-webkit-slider-runnable-track { height:4px; border-radius:999px; background:linear-gradient(90deg,var(--neon-purple),var(--neon-amber)); }
#main-progress::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:white; border:2px solid var(--neon-purple); margin-top:-5px; box-shadow:0 0 8px rgba(160,80,255,0.6); cursor:pointer; transition:transform .15s ease; }
#main-progress::-webkit-slider-thumb:active { transform:scale(1.3); }
#main-progress::-moz-range-track { height:4px; border-radius:999px; background:linear-gradient(90deg,var(--neon-purple),var(--neon-amber)); }
#main-progress::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:white; border:2px solid var(--neon-purple); }

/* 11. GERI AI CHAT */
#ai-messages { display:flex; flex-direction:column; gap:12px; overflow-y:auto; padding:10px; scrollbar-width:none; scroll-behavior:smooth; }
#ai-messages::-webkit-scrollbar { display:none; }
.chat-bubble-user { align-self:flex-end; max-width:80%; padding:10px 16px; font-size:12px; line-height:1.5; color:#fff; background:oklch(35% 0.12 300/.4); border:1px solid oklch(100% 0 0/.1); border-radius:16px 16px 4px 16px; backdrop-filter:blur(10px); word-break:break-word; animation:bubbleSpawn .3s cubic-bezier(0.16,1,0.3,1) both; }
.chat-bubble-geri { align-self:flex-start; max-width:85%; padding:12px 18px; font-size:12px; line-height:1.6; color:var(--seafoam-ivory); background:oklch(20% 0.05 304/.5); border:1px solid oklch(62% 0.28 304/.15); border-radius:16px 16px 16px 4px; box-shadow:0 4px 20px oklch(0% 0 0/.3); backdrop-filter:blur(10px); word-break:break-word; animation:bubbleSpawn .3s cubic-bezier(0.16,1,0.3,1) both; }
.chat-bubble-geri b { color:var(--neon-amber); letter-spacing:0.05em; }
.chat-bubble-geri i { color:oklch(80% 0.05 190); font-size:11px; }
@keyframes bubbleSpawn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.geri-loader { display:inline-block; font-weight:bold; color:var(--neon-amber); animation:pulseLoader 1.4s infinite ease-in-out both; }
@keyframes pulseLoader { 0%,80%,100%{opacity:.2;transform:scale(.95)} 40%{opacity:1;transform:scale(1.05)} }

/* 12. TRANSICIÓN TRICOLOR */
.transicion-tricolor { position:fixed; top:0; left:0; width:100%; height:3px; background:linear-gradient(90deg,var(--neon-purple),var(--neon-amber),var(--seafoam-ivory)); background-size:200% auto; animation:shine 4s linear infinite; z-index:60; opacity:.6; }

/* 13. COVER IMAGE */
#cover-image { transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .5s ease,opacity .4s ease; cursor:pointer; animation:respiracionPrincipal 10s ease-in-out infinite; }
#cover-image:hover { transform:scale(1.04); box-shadow:0 0 40px rgba(160,80,255,.35); animation-play-state:paused; }
@keyframes respiracionPrincipal { 0%,100%{transform:scale(1) rotate(0deg)} 50%{transform:scale(1.015) rotate(.3deg)} }

/* Play indicator */
.cover-play-indicator { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(3,3,7,0); border-radius:40px; opacity:0; transition:opacity .35s ease,background .35s ease; pointer-events:none; z-index:2; }
.group:hover .cover-play-indicator { opacity:1; background:rgba(3,3,7,.25); }
.cover-play-icon { width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center; font-size:0; box-shadow:0 0 30px rgba(160,80,255,.4); transform:scale(.85); transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.group:hover .cover-play-icon { transform:scale(1); }
.cover-play-icon.is-playing::before { content:"❚❚"; font-size:18px; color:#030305; }
.cover-play-icon:not(.is-playing)::before { content:"▶"; font-size:20px; color:#030305; }

/* 14. LETRAS / STORYTELLING */
#visualizacion-letras-ambientales { transition:opacity .4s ease; animation:letrasPulse 4s ease-in-out infinite; }
@keyframes letrasPulse { 0%,100%{border-color:rgba(255,255,255,.05)} 50%{border-color:rgba(160,80,255,.15)} }
#hardware-station-title { transition:opacity .5s ease,transform .5s ease; }
#hardware-station-title.cambiando { opacity:0; transform:translateY(-8px); }
#hardware-station-story { transition:opacity .6s ease,color .8s ease; color:rgba(148,163,184,.85); }
#hardware-station-story.cambiando { opacity:0; }

/* 15. RESIDENCIA DIGITAL — paneles con animación de colores alternados */
.residencia-panel {
    background: oklch(100% 0 0 / 0.02);
    border: 1px solid var(--border-soft);
    backdrop-filter: blur(20px);
    transition: all .35s ease;
    animation: panelColorCycle 8s ease-in-out infinite;
}
.residencia-panel:nth-child(1) { animation-delay: 0s; }
.residencia-panel:nth-child(2) { animation-delay: 2s; }
.residencia-panel:nth-child(3) { animation-delay: 4s; }
.residencia-panel:nth-child(4) { animation-delay: 6s; }
@keyframes panelColorCycle {
    0%,100% { border-color:oklch(100% 0 0/.05); box-shadow:none; }
    25%     { border-color:var(--neon-purple); box-shadow:0 0 15px rgba(160,80,255,.2); }
    50%     { border-color:var(--neon-amber);  box-shadow:0 0 15px rgba(200,160,60,.2); }
    75%     { border-color:var(--seafoam-ivory);box-shadow:0 0 15px rgba(220,240,230,.15); }
}
.residencia-panel:hover { border-color:var(--neon-purple); box-shadow:0 0 20px rgba(160,80,255,.3); transform:scale(1.03); }
.residencia-panel .panel-label { color:rgba(148,163,184,.7); }
.residencia-panel .panel-valor { color:white; }

/* 16. SANDBOX VIDEO */
.sandbox-video-overlay { background:rgba(3,3,7,.15); transition:background .35s ease; }
.sandbox-video-overlay:hover { background:rgba(3,3,7,.35); }
#sandbox-video-icon { width:48px; height:48px; }
#sandbox-video-wrap.sin-fuente video { opacity:0; }
#sandbox-video-wrap.sin-fuente { background:linear-gradient(135deg,oklch(20% 0.05 290/.4),oklch(15% 0.02 190/.4)); }
#sandbox-video-wrap.sin-fuente .sandbox-video-overlay::after { content:"Próximamente — sesiones en vivo"; position:absolute; bottom:12px; left:12px; font-size:9px; font-family:"Inter",sans-serif; text-transform:uppercase; letter-spacing:.2em; color:rgba(255,255,255,.4); }

/* Canales de video — highlight del activo */
.sandbox-channel.canal-activo { background:oklch(62% 0.28 304/.12) !important; border-color:var(--neon-purple) !important; }

/* 17. REDES SOCIALES */
.social-link { position:relative; }
.social-symbol { position:absolute; bottom:-4px; right:-4px; font-size:12px; background:var(--bg-dark); border:1px solid rgba(255,255,255,.1); border-radius:50%; width:20px; height:20px; display:flex; align-items:center; justify-content:center; line-height:1; }

/* 18. ZOOM en portadas */
.cover-zoom-wrap { overflow:hidden; transition:box-shadow .4s ease; }
.cover-zoom-wrap:hover { box-shadow:0 0 20px rgba(160,80,255,.3); }
.cover-zoom-img { transition:transform .6s cubic-bezier(.25,.46,.45,.94); transform-origin:center; }
.cover-zoom-wrap:hover .cover-zoom-img { transform:scale(1.15); }
.cover-zoom-wrap:active .cover-zoom-img { transform:scale(1.3); }

/* Respiración en mini-portadas */
@keyframes respiracionSutil { 0%,100%{transform:scale(1)} 50%{transform:scale(1.03)} }
.cover-zoom-wrap { animation:respiracionSutil 6s ease-in-out infinite; }
.track-row:nth-child(odd)  .cover-zoom-wrap { animation-delay:0s; }
.track-row:nth-child(even) .cover-zoom-wrap { animation-delay:1.5s; }
.track-row:nth-child(3n)   .cover-zoom-wrap { animation-delay:3s; }

/* 19. THE NUEVO CATÁLOGO — visibilidad mejorada */
#contenedor-back-catalogo .track-row { opacity:.85 !important; }
#contenedor-back-catalogo .track-row img { filter:grayscale(30%) !important; }
#contenedor-back-catalogo h4 { color:rgba(255,255,255,.95) !important; }
#contenedor-back-catalogo .track-row p { color:var(--neon-amber) !important; opacity:.8; }

/* 20. GLASS */
.glass { background:oklch(100% 0 0/.02); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid var(--border-soft); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border-width:0; }

/* 21. RESPONSIVE MOBILE — diseño automático */
@media (max-width: 768px) {
    #lab .grid { grid-template-columns: 1fr !important; }
    #store .grid { grid-template-columns: 1fr !important; }
    #store aside { display:none; }
    .cover-play-icon { width:40px; height:40px; }
    header nav { display:none; }
}

/* ==========================================================================
   FIN: css/estilos.css — VERSION 11.0 — SELLADO 10/10
   ========================================================================== */