/* ═══════════════════════════════════════════════════════════════════
   GRÄNDRØ — carton.css — Micrositio CARTØN
   Brutalismo Orgánico: estructura fría (monospace, líneas puras)
   conteniendo la fuerza visceral del factor humano.
   ═══════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --c:#00C8E8;--c2:#00E8B4;--gold:#E8981E;--violet:#7B4FFF;
  --bg:#07060A;--bg2:#0D0B08;--card:#15110C;
  --cardboard:#9A6B3C;--cardboard-d:#5C3F22;--cardboard-line:#2B1F12;
  --w:#FFF;--l1:#D8CFC0;--l2:#8A7F6E;--l3:#3A322A;
  --fh:'Unbounded',sans-serif;        /* marca — títulos grandes */
  --fb:'Space Grotesk',sans-serif;    /* storytelling, cuerpo de texto */
  --fm:'DM Mono',monospace;           /* consola — BPM, comandos, numeración */
  --bpm-speed:0.48s;
}
/* ── GPU-DRIVEN KICK ANIMATION — compartido con grandro.css (spec §2.1) ──
   .lg-l vive también en el nav del micrositio CARTØN, mismo tratamiento GPU. */
.lg-l{
  transform:scale(var(--gr-kick-scale,1));
  opacity:calc(0.7 + var(--gr-kick-opacity,0) * 0.3);
  will-change:transform,opacity}

html,body{background:var(--bg);color:var(--l1);font-family:var(--fb);
  overflow:hidden;height:100%;width:100%}
/* Rocola de pantalla completa — cada track es una "slide" fija con fundido, sin scroll real */
body{font-size:16px;line-height:1.6}
.cx-slide{position:fixed;top:0;left:0;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .6s cubic-bezier(.2,.7,.2,1),filter .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);
  transform:scale(1.045);filter:blur(6px);z-index:1}
.cx-slide.active{opacity:1;visibility:visible;pointer-events:auto;transform:scale(1);filter:blur(0);z-index:2}
@media (prefers-reduced-motion:reduce){.cx-slide{transition:opacity .25s;transform:none !important;filter:none !important}}

/* ── Revelado en cascada del contenido — entra escalonado cuando la slide se activa ── */
.tk-col-left .tk-eyebrow,.tk-col-left .tk-title,.tk-col-left .tk-story,
.tk-col-right .tk-visual,.tk-col-right .tk-cta-row,.tk-col-right .tk-embeds,.tk-col-right .tk-share-row{
  opacity:0;transform:translateY(22px);transition:opacity .55s cubic-bezier(.2,.8,.2,1),transform .55s cubic-bezier(.2,.8,.2,1)}
.cx-slide.active .tk-col-left .tk-eyebrow{transition-delay:.12s}
.cx-slide.active .tk-col-left .tk-title{transition-delay:.2s}
.cx-slide.active .tk-col-left .tk-story{transition-delay:.28s}
.cx-slide.active .tk-col-right .tk-visual{transition-delay:.1s}
.cx-slide.active .tk-col-right .tk-cta-row{transition-delay:.32s}
.cx-slide.active .tk-col-right .tk-embeds{transition-delay:.38s}
.cx-slide.active .tk-col-right .tk-share-row{transition-delay:.44s}
.cx-slide.active .tk-col-left .tk-eyebrow,.cx-slide.active .tk-col-left .tk-title,.cx-slide.active .tk-col-left .tk-story,
.cx-slide.active .tk-col-right .tk-visual,.cx-slide.active .tk-col-right .tk-cta-row,.cx-slide.active .tk-col-right .tk-embeds,.cx-slide.active .tk-col-right .tk-share-row{
  opacity:1;transform:translateY(0)}
.cx-slide.active .tk-col-right .tk-visual{transform:scale(1)}

/* ── Cierre (footer) — misma cascada de entrada, más un pequeño respiro extra
   en el título para que se sienta como el gran final del recorrido ── */
#cx-footer .ft-eyebrow,#cx-footer .cx-stream-section > h2,
#cx-footer .cx-stream-section > p,#cx-footer .ft-stream-btns,
#cx-footer .cx-stream-section > p:last-child{
  opacity:0;transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
#cx-footer.active .ft-eyebrow{transition-delay:.1s}
#cx-footer.active .cx-stream-section > h2{transition-delay:.2s;transform:translateY(18px) scale(.94)}
#cx-footer.active .cx-stream-section > p{transition-delay:.3s}
#cx-footer.active .ft-stream-btns{transition-delay:.4s}
#cx-footer.active .cx-stream-section > p:last-child{transition-delay:.6s}
#cx-footer.active .ft-eyebrow,#cx-footer.active .cx-stream-section > h2,
#cx-footer.active .cx-stream-section > p,#cx-footer.active .ft-stream-btns,
#cx-footer.active .cx-stream-section > p:last-child{
  opacity:1;transform:translateY(0)}
#cx-footer.active .cx-stream-section > h2{transform:translateY(0) scale(1)}
/* El título CÄRTØN late suave todo el tiempo, como cierre de todo el viaje */
#cx-footer.active .cx-stream-section > h2{animation:ftTitleGlow 3.6s ease-in-out .9s infinite}
@keyframes ftTitleGlow{
  0%,100%{text-shadow:0 0 0 transparent}
  50%{text-shadow:0 0 26px rgba(0,200,232,.5)}
}
@media(prefers-reduced-motion:reduce){
  #cx-footer .ft-eyebrow,#cx-footer .cx-stream-section > h2,#cx-footer .cx-stream-section > p,#cx-footer .ft-stream-btns{
    transition:opacity .25s;transform:none !important;animation:none !important}
}
body.safe-mode #cx-footer .cx-stream-section > h2{animation:none !important}
.tk-col-right .tk-visual{transform:translateY(22px) scale(.94)}
@media (prefers-reduced-motion:reduce){
  .tk-col-left .tk-eyebrow,.tk-col-left .tk-title,.tk-col-left .tk-story,
  .tk-col-right .tk-visual,.tk-col-right .tk-cta-row,.tk-col-right .tk-embeds,.tk-col-right .tk-share-row{
    opacity:1 !important;transform:none !important;transition:none !important}
}
#cx-bg-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  pointer-events:none;opacity:.28;filter:brightness(.5) saturate(.7)}
.tk-bg-shared{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  pointer-events:none;opacity:0;filter:saturate(1.15) brightness(.62);
  transition:opacity 1.1s ease-in-out}
.tk-bg-shared.on{opacity:.5}
body.safe-mode .tk-bg-shared{transition:none}
#cx-ambient{position:fixed;inset:0;z-index:0;pointer-events:none;transition:background .6s ease-out}
#cx-flash{position:fixed;inset:0;z-index:450;pointer-events:none;opacity:0}
#cx-swipe-hint{position:fixed;left:50%;bottom:calc(126px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%) translateY(8px);background:rgba(10,9,12,.94);color:var(--w);
  font-family:var(--fm);font-size:11px;font-weight:600;letter-spacing:.02em;white-space:nowrap;
  padding:10px 16px;border-radius:20px;border:1px solid rgba(0,200,232,.3);z-index:1200;
  opacity:0;pointer-events:none;transition:opacity .4s,transform .4s;
  box-shadow:0 8px 24px rgba(0,0,0,.5)}
#cx-swipe-hint.on{opacity:1;transform:translateX(-50%) translateY(0)}
#cx-swipe-hint span{display:inline-block;color:var(--c);animation:swipeHintArrow 1.4s ease-in-out infinite}
#cx-swipe-hint span:last-child{animation-delay:.2s}
@keyframes swipeHintArrow{0%,100%{transform:translateX(0)}50%{transform:translateX(-3px)}}
#cx-swipe-hint span:last-child{animation-name:swipeHintArrowR}
@keyframes swipeHintArrowR{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){#cx-swipe-hint,#cx-swipe-hint span{transition:opacity .2s;animation:none}}
#cx-flash.on{animation:cxFlashBurst .7s cubic-bezier(.2,.8,.2,1)}
@keyframes cxFlashBurst{0%{opacity:0;transform:scale(.85)}25%{opacity:1;transform:scale(1.05)}100%{opacity:0;transform:scale(1.3)}}
@media (prefers-reduced-motion:reduce){#cx-flash.on{animation:none !important;opacity:0 !important}}
@media (prefers-reduced-motion:reduce){#cx-ambient{transition:none}}
img{max-width:100%;display:block}
a{color:inherit}
.mono{font-family:var(--fm)}



/* ── NAV mínima — vuelve al sitio principal ── */
#cx-nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:500;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
  padding:0 22px;background:rgba(6,6,13,.94);backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,.045)}
.nav-left{display:flex;align-items:center;justify-self:start;min-width:0}
.nav-right{display:flex;align-items:center;gap:10px;justify-self:end;min-width:0}
.a11y-panel{position:relative;flex-shrink:0}

/* ════════════════════════════════════════════════════════════════
   HERO — el manifiesto visual
   ════════════════════════════════════════════════════════════════ */
#cx-hero{height:100vh;min-height:560px;overflow:hidden;background:#000;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transition:clip-path .5s ease-out}
#cx-hero video,#cx-hero .ph-bg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
#cx-hero video{filter:saturate(1.25) contrast(1.06) brightness(1.04)}
#cx-hero .ph-bg{background:linear-gradient(160deg,#1a1410,#07060a 70%)}
#cx-hero::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;
  background:linear-gradient(180deg,rgba(7,6,10,.04) 0%,rgba(7,6,10,.16) 55%,rgba(7,6,10,.4) 100%);
  z-index:1;animation:heroOverlayBreathe 9s ease-in-out infinite}
@keyframes heroOverlayBreathe{
  0%,100%{opacity:.8}
  50%{opacity:1}
}
@media(prefers-reduced-motion:reduce){#cx-hero::after{animation:none}}
body.safe-mode #cx-hero::after{animation:none}
/* Patrón sutil en movimiento permanente — franjas diagonales muy tenues que
   se deslizan despacio, sumando textura sin tapar el color del video */
#cx-hero::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(0,200,232,.05) 0px,rgba(0,200,232,.05) 2px,transparent 2px,transparent 34px);
  background-size:200% 200%;animation:heroPatternDrift 22s linear infinite;mix-blend-mode:screen}
@keyframes heroPatternDrift{
  0%{background-position:0% 0%}
  100%{background-position:200% 0%}
}
@media(prefers-reduced-motion:reduce){#cx-hero::before{animation:none;opacity:.4}}
body.safe-mode #cx-hero::before{animation:none;opacity:.4}
.hero-ph-note{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:8px;z-index:1;color:var(--l3);text-align:center;padding:20px}
.hero-ph-note b{color:var(--l2);font-family:var(--fm);font-size:12px;letter-spacing:.1em}
.hero-content{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:20px}
.hero-tag{font-family:var(--fm);font-size:12px;font-weight:500;letter-spacing:.32em;
  color:var(--cardboard);margin-bottom:18px;text-transform:uppercase}
.hero-title{font-family:var(--fh);font-weight:800;font-size:clamp(42px,8vw,110px);
  color:var(--w);letter-spacing:-.03em;line-height:.92;text-shadow:0 4px 40px rgba(0,0,0,.9),0 2px 10px rgba(0,0,0,.9)}
.hero-title .slash{color:var(--cardboard);margin:0 14px;font-weight:300}
.hero-title .o-acc{color:var(--c)}
.hero-sub{margin-top:20px;font-family:var(--fb);font-size:clamp(13px,1.6vw,17px);
  color:var(--l1);font-weight:300;max-width:560px;text-shadow:0 2px 12px rgba(0,0,0,.95)}
.hero-scroll-cue{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:2;
  font-family:var(--fm);font-size:10px;color:var(--l2);letter-spacing:.2em;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:6px;animation:scrollBob 2.2s ease-in-out infinite;
  background:none;border:none;transition:color .2s}
.hero-scroll-cue:hover{color:var(--w)}
.hero-scroll-cue .ln{width:1px;height:24px;background:linear-gradient(var(--cardboard),transparent)}
@keyframes scrollBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}

/* ════════════════════════════════════════════════════════════════
   PARALLAX — capas de cartón simulando profundidad
   ════════════════════════════════════════════════════════════════ */
.px-wrap{position:relative;overflow:hidden}
.px-layer{position:absolute;pointer-events:none;will-change:transform;z-index:0}
.px-far{opacity:.5;filter:blur(.4px) brightness(.55) saturate(.7)}
.px-mid{opacity:.65;filter:brightness(.7) saturate(.8)}
.px-near{opacity:.9;filter:brightness(.85) saturate(.9)}
.px-strip-top{top:0;left:0;width:100%;height:160px;background-size:cover;background-repeat:no-repeat}
.px-strip-bottom{bottom:0;left:0;width:100%;height:160px;background-size:cover;background-repeat:no-repeat}
.px-liana-l{top:-60px;left:-30px;width:160px;height:calc(100% + 120px);background-size:cover}
.px-liana-r{top:-60px;right:-30px;width:160px;height:calc(100% + 120px);background-size:cover;transform:scaleX(-1)}
@media (prefers-reduced-motion:reduce){.px-layer{transition:none !important}}

/* ════════════════════════════════════════════════════════════════
   SECCIONES TEMÁTICAS — numeradas, monospace
   ════════════════════════════════════════════════════════════════ */
.cx-section{position:relative;padding:90px 0 40px;z-index:1}
.cx-sec-head{max-width:900px;margin:0 auto 50px;padding:0 24px;text-align:center}
.cx-sec-num{font-family:var(--fm);font-size:12px;color:var(--cardboard);letter-spacing:.3em;margin-bottom:10px}
.cx-sec-title{font-family:var(--fh);font-weight:800;font-size:clamp(26px,3.8vw,46px);color:var(--w);letter-spacing:-.02em}
.cx-sec-rule{width:60px;height:2px;background:var(--cardboard);margin:18px auto 0}

/* ════════════════════════════════════════════════════════════════
   TRACK — componente híbrido IA ←→ Humano
   ════════════════════════════════════════════════════════════════ */
.tk{width:100%;height:100%;padding:0;z-index:1;display:flex;align-items:stretch}

/* ── MOSAICO AMBIENTE — fragmentos del propio arte del track, a pantalla completa ── */
.tk-mosaic{position:absolute;top:0;bottom:0;left:0;width:100%;
  z-index:0;overflow:hidden;pointer-events:none;opacity:.16}
.tk-mosaic .tile{position:absolute;background-size:340% 340%;filter:saturate(1.3) contrast(1.05) blur(.3px);
  border-radius:3px;will-change:transform;transition:opacity .4s;transform:rotate(var(--tile-rot,0deg))}
@keyframes tileDrift{
  0%{transform:rotate(var(--tile-rot,0deg)) translate(0,0)}
  100%{transform:rotate(var(--tile-rot,0deg)) translate(var(--tile-dist,12px), calc(var(--tile-dist,12px) * -0.6))}
}
.cx-slide.active .tk-mosaic{opacity:.22}
@media (prefers-reduced-motion:reduce){.tk-mosaic .tile{animation:none !important;transition:none}}
@media(max-width:860px){.tk-mosaic{opacity:.1}.cx-slide.active .tk-mosaic{opacity:.14}}

/* ── SPLIT 50/50 — izquierda: descripción. derecha: arte + todo lo social/compartir ── */
.tk-split{width:100%;display:grid;grid-template-columns:1fr 1fr;position:relative;z-index:2}
.tk-split::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 75% 50%,rgba(0,200,232,.1),transparent 70%);
  background:radial-gradient(ellipse 60% 50% at 75% 50%,color-mix(in srgb,var(--tk-color,#00C8E8) 12%,transparent),transparent 70%);
  animation:tkBgBreathe 8s ease-in-out infinite}
@keyframes tkBgBreathe{0%,100%{opacity:.5}50%{opacity:1}}
body.safe-mode .tk-split::before{animation:none !important;opacity:.6}
.tk-col{padding:88px 5vw 40px;display:flex;flex-direction:column;justify-content:flex-start;min-height:100%;box-sizing:border-box}
.tk-col-left{align-items:flex-start;position:relative;overflow:hidden}
.tk-col-left .tk-inner{max-width:560px;width:100%;position:relative;z-index:2}
/* Watermark del animal — llena el espacio vacío que queda debajo del texto
   cuando la historia es corta, sin agregar contenido de más, solo identidad */
.tk-col-left::before{content:attr(data-animal);position:absolute;z-index:1;
  right:-2vw;bottom:-8%;font-size:min(38vw,420px);line-height:1;
  opacity:.05;pointer-events:none;filter:grayscale(1) contrast(1.3);
  transform:rotate(-6deg)}
.tk:nth-of-type(even) .tk-col-left::before{right:auto;left:-2vw}
@media(max-width:768px){.tk-col-left::before{display:none}}
.tk-col-right{align-items:center;justify-content:center;border-left:1px solid rgba(255,255,255,.07);
  background:linear-gradient(90deg,rgba(255,255,255,.015),transparent)}
.tk-col-right .tk-inner{max-width:460px;width:100%}
.tk:nth-of-type(even) .tk-col-left{order:2;border-left:1px solid rgba(255,255,255,.07);border-right:none;
  background:linear-gradient(270deg,rgba(255,255,255,.015),transparent)}
.tk:nth-of-type(even) .tk-col-right{order:1;border-left:none}

.tk-visual{position:relative;aspect-ratio:1;width:100%;border-radius:6px;overflow:hidden;cursor:pointer;
  border:1px solid var(--tk-color,rgba(255,255,255,.1));background:#000;
  box-shadow:0 20px 50px rgba(0,0,0,.4),0 0 0 0 var(--tk-color,transparent);
  animation:tkFrameGlow 5.5s ease-in-out infinite;transition:box-shadow .3s,border-color .3s}
.tk-visual:hover{box-shadow:0 20px 50px rgba(0,0,0,.4),0 0 30px 2px var(--tk-color,#00C8E8)}
@keyframes tkFrameGlow{
  0%,100%{box-shadow:0 20px 50px rgba(0,0,0,.4),0 0 0 0 transparent}
  50%{box-shadow:0 20px 50px rgba(0,0,0,.4),0 0 22px -2px var(--tk-color,#00C8E8)}
}
body.safe-mode .tk-visual{animation:none !important}
@supports not (aspect-ratio:1){.tk-visual{height:340px}}
.tk-layer{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s cubic-bezier(.4,0,.2,1),filter .5s}
.tk-layer.ia{z-index:2;opacity:.87;
  animation:tkKenBurns calc(60s / var(--tk-bpm,124) * 45) ease-in-out infinite alternate,
            tkCrossfadeIdle calc(60s / var(--tk-bpm,124) * 22) ease-in-out infinite}
.tk-layer.alt{z-index:1;animation:tkKenBurnsAlt calc(60s / var(--tk-bpm,124) * 54) ease-in-out infinite alternate}
.tk-reels{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;opacity:.55;overflow:hidden}
.tk-reels img,.tk-reels video{position:absolute;width:52%;height:52%;object-fit:cover;
  animation:reelFlicker calc(60s / var(--tk-bpm,124) * 10) ease-in-out infinite,
            reelDrift calc(60s / var(--tk-bpm,124) * 37) ease-in-out infinite}
.tk-reels img:nth-child(1),.tk-reels video:nth-child(1){top:-6%;left:-4%;animation-delay:0s,0s}
.tk-reels img:nth-child(2),.tk-reels video:nth-child(2){bottom:-8%;right:-5%;animation-delay:.8s,3s}
.tk-reels img:nth-child(3),.tk-reels video:nth-child(3){top:24%;left:28%;animation-delay:1.6s,6s}
/* Cruce lento y continuo entre las dos imágenes del track — vivo sin necesitar hover */
@keyframes tkCrossfadeIdle{
  0%,38%{opacity:.87}
  50%,86%{opacity:.22}
  100%{opacity:.87}
}
.tk:nth-of-type(1) .tk-layer.ia{animation-delay:0s,0s}
.tk:nth-of-type(2) .tk-layer.ia{animation-delay:1s,1.4s}
.tk:nth-of-type(3) .tk-layer.ia{animation-delay:2s,2.8s}
.tk:nth-of-type(4) .tk-layer.ia{animation-delay:3s,4.2s}
.tk:nth-of-type(5) .tk-layer.ia{animation-delay:4s,5.6s}
.tk:nth-of-type(6) .tk-layer.ia{animation-delay:.5s,7s}
.tk:nth-of-type(7) .tk-layer.ia{animation-delay:1.5s,8.4s}
.tk:nth-of-type(8) .tk-layer.ia{animation-delay:2.5s,9.8s}
.tk:nth-of-type(9) .tk-layer.ia{animation-delay:3.5s,1s}
.tk:nth-of-type(10) .tk-layer.ia{animation-delay:.2s,2.4s}
@keyframes reelDrift{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(2.5%,-2%) scale(1.06)}
  100%{transform:translate(-1.5%,2%) scale(1.02)}
}
@keyframes tkKenBurns{
  0%{transform:scale(1) translate(0,0)}
  100%{transform:scale(1.07) translate(-1%,1%)}
}
@keyframes tkKenBurnsAlt{
  0%{transform:scale(1.05) translate(1%,-1%)}
  100%{transform:scale(1) translate(0,0)}
}
/* Al pasar el mouse o tocar, se corta el cruce automático y se fuerza la
   revelación completa de la segunda imagen, con más intención */
.tk-visual:hover .tk-layer.ia,.tk-visual.revealed .tk-layer.ia{opacity:0;animation-play-state:paused}
body.safe-mode .tk-layer.ia,body.safe-mode .tk-layer.alt{animation:none !important;opacity:.7}
.tk-reels >*:nth-child(1){top:0;left:0}
.tk-reels >*:nth-child(2){top:0;right:0}
.tk-reels >*:nth-child(3){bottom:0;left:26%}
.tk-reels >*:nth-child(2){animation-delay:.7s}.tk-reels >*:nth-child(3){animation-delay:1.4s}
@keyframes reelFlicker{0%,100%{opacity:.5}45%{opacity:.5}50%{opacity:.85}55%{opacity:.5}}
.tk-visual:hover .tk-layer.ia,.tk-visual.revealed .tk-layer.ia{opacity:0}
.tk-glitch{position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;opacity:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(90deg,transparent,var(--tk-color,#00C8E8) 45%,transparent 55%,transparent)}
.tk-visual:hover .tk-glitch{opacity:1;animation:glitchJump .25s steps(2) 2}
.tk-visual.auto-glitch .tk-glitch{opacity:.7;animation:glitchJump .3s steps(3) 1}
.tk-hint{position:absolute;bottom:10px;right:10px;z-index:4;font-family:var(--fm);font-size:9px;
  background:repeating-linear-gradient(0deg,rgba(0,200,232,.08) 0px,transparent 2px,transparent 4px);
  transition:opacity .15s}
.tk-visual:hover .tk-glitch{opacity:1;animation:glitchJump .25s steps(2) 2}
@keyframes glitchJump{0%{transform:translateX(0)}50%{transform:translateX(-4px)}100%{transform:translateX(2px)}}
.tk-hint{position:absolute;bottom:10px;right:10px;z-index:4;font-family:var(--fm);font-size:9px;
  color:rgba(255,255,255,.55);letter-spacing:.08em;background:rgba(0,0,0,.4);padding:4px 8px;border-radius:3px}
.tk-num-badge{position:absolute;top:10px;left:10px;z-index:4;font-family:var(--fm);font-size:11px;font-weight:600;
  color:var(--w);background:rgba(0,0,0,.55);padding:5px 9px;border-radius:3px;letter-spacing:.05em;
  border:1px solid var(--tk-color,#00C8E8);animation:tkBadgePulse 3.4s ease-in-out infinite}
@keyframes tkBadgePulse{
  0%,100%{box-shadow:0 0 0 0 var(--tk-color,#00C8E8);opacity:.85}
  50%{box-shadow:0 0 10px 1px var(--tk-color,#00C8E8);opacity:1}
}
body.safe-mode .tk-num-badge{animation:none !important}

.tk-text{padding-top:4px}
.tk-eyebrow{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;margin-bottom:10px;font-family:var(--fm);
  font-size:clamp(9px,2.6vw,11px);letter-spacing:.08em;color:var(--l2)}
.tk-eyebrow .animal{font-size:clamp(15px,4vw,18px)}
.tk-eyebrow .bpm{color:var(--c);font-weight:600;white-space:nowrap}
.tk-title{font-family:var(--fh);font-weight:800;font-size:clamp(30px,9vw,40px);color:var(--w);
  letter-spacing:-.01em;margin-bottom:16px;line-height:1;
  animation:tkTitleBreathe 6s ease-in-out infinite}
@keyframes tkTitleBreathe{
  0%,100%{text-shadow:0 0 0 transparent}
  50%{text-shadow:0 0 26px var(--tk-color,#00C8E8),0 0 4px var(--tk-color,#00C8E8)}
}
body.safe-mode .tk-title{animation:none !important}
.tk-story{font-family:var(--fb);font-size:15px;line-height:1.75;color:var(--l1);font-weight:300;margin-bottom:22px}
.tk-cta-row{display:flex;gap:10px;flex-wrap:wrap}
.tk-cta{font-family:var(--fm);font-size:11px;font-weight:600;letter-spacing:.06em;padding:11px 18px;
  border-radius:3px;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:8px;border:none}
.tk-cta.run{background:var(--c);color:#000}
.tk-cta.run:hover{background:var(--c2)}
.tk-cta.cine{background:transparent;color:var(--l1);border:1px solid rgba(255,255,255,.18)}
.tk-cta.cine:hover{border-color:var(--w);color:var(--w)}
.tk-cta .br{opacity:.6}

/* Fila de compartir — Spotify/SoundCloud directo + compartir el track */
.tk-share-row{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;position:relative;z-index:10;pointer-events:auto}
.tk-share-btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--fm);font-size:10px;
  font-weight:600;letter-spacing:.04em;padding:9px 13px;border-radius:4px;text-decoration:none;
  color:var(--l1);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);
  transition:all .2s;cursor:pointer}
.tk-share-btn:hover{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:var(--w)}
.tk-share-btn.spotify:hover{border-color:#1DB954;color:#1DB954}
.tk-share-btn.soundcloud:hover{border-color:#FF5500;color:#FF5500}
/* Placeholder state — not yet linked, shown as coming soon */
.tk-share-btn.disabled{opacity:.38;cursor:not-allowed;pointer-events:none}
.tk-share-btn.disabled::after{content:' (próximamente)';font-size:8px;opacity:.6}
.tk-share-btn .ic{font-size:12px}
.tk-share-toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(10px);
  background:var(--cardboard);color:#000;font-family:var(--fm);font-size:11px;font-weight:700;
  padding:9px 16px;border-radius:20px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:3000}
.tk-share-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* Espacio propio para el reproductor embebido — separado de la portada/arte */
.tk-embeds{margin-top:18px;border:1px solid rgba(255,255,255,.08);border-radius:6px;overflow:hidden;background:rgba(0,0,0,.25)}
.tk-edit-label{font-family:var(--fm),monospace;font-size:8px;letter-spacing:.14em;
  color:rgba(255,255,255,.4);text-transform:uppercase;margin-bottom:5px}
.tk-edit-toggle{display:flex;gap:6px;margin-bottom:10px;padding:4px;
  background:rgba(0,200,232,.05);border:1.5px solid rgba(0,200,232,.35);
  border-radius:22px;width:max-content;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.tk-edit-btn{background:none;border:none;padding:8px 16px;border-radius:18px;
  font-family:var(--fh),sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  color:rgba(255,255,255,.65);cursor:pointer;transition:all .2s;white-space:nowrap}
.tk-edit-btn.active{background:var(--c);color:#000;box-shadow:0 2px 10px rgba(0,200,232,.4)}
.tk-edit-btn:hover:not(.active){color:#fff;background:rgba(255,255,255,.08)}
.tk-embed-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.07)}
.tk-embed-tab{flex:1;background:none;border:none;padding:9px 10px;font-size:10.5px;font-weight:600;
  letter-spacing:.04em;color:var(--l2);cursor:pointer;transition:all .2s;border-bottom:2px solid transparent}
.tk-embed-tab:hover{color:var(--l1)}
.tk-embed-tab.active{color:var(--w);border-bottom-color:var(--c);background:rgba(0,200,232,.06)}
.tk-embed-box{position:relative;width:100%;aspect-ratio:16/9;background:#000;transition:aspect-ratio .2s}
.tk-embed-frame-wrap{position:relative;width:100%;height:100%}
.tk-embed-frame-wrap iframe{width:100%;height:100%;border:0;display:block}
/* Mientras no se haya activado, el iframe no capta el scroll/wheel — así no
   "atrapa" el gesto de scrollear a la siguiente canción. Un solo click lo
   activa (y de paso confirma la intención real de interactuar con el video). */
.tk-embed-frame-wrap:not(.active) iframe{pointer-events:none}
.tk-embed-overlay{position:absolute;inset:0;cursor:pointer;
  background:rgba(0,0,0,0);display:flex;align-items:center;justify-content:center}
.tk-embed-overlay::after{content:'▶ Tocá para interactuar';
  font-family:var(--fm),monospace;font-size:9px;letter-spacing:.08em;
  color:rgba(255,255,255,.55);background:rgba(0,0,0,.5);
  padding:6px 12px;border-radius:20px;opacity:0;transition:opacity .2s}
.tk-embed-frame-wrap:hover .tk-embed-overlay::after{opacity:1}
.tk-embed-box.sc-mode{aspect-ratio:auto;height:166px}
.tk-embed-box iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}
.tk-embed-ph{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;
  justify-content:center;text-align:center;padding:14px;font-size:10.5px;color:var(--l3);line-height:1.6}
.tk-embed-ph b{color:var(--cardboard);font-weight:600}
@supports not (aspect-ratio:16/9){.tk-embed-box{height:200px}}
@media(max-width:860px){.tk-embed-box{aspect-ratio:16/10}}

/* Mood-reactive neon border per track energy */
.tk-visual.mood-fluid{box-shadow:0 0 0 1px rgba(0,200,232,.15)}
.tk-visual.mood-strobe{box-shadow:0 0 0 1px rgba(232,152,30,.2)}
.tk-visual.kick-on{box-shadow:0 0 24px 2px var(--kick-color,rgba(0,200,232,.5))}

/* ════════════════════════════════════════════════════════════════
   ZÓCALOS — separadores de video entre secciones
   ════════════════════════════════════════════════════════════════ */
.cx-zocalo{position:relative;height:260px;overflow:hidden;margin:30px 0;z-index:1}
.cx-zocalo video,.cx-zocalo .zoc-ph{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;filter:brightness(.5) saturate(.8)}
.cx-zocalo .zoc-ph{background:linear-gradient(135deg,var(--cardboard-d),#0a0806)}
.cx-zocalo::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,rgba(7,6,10,.85),transparent 40%,transparent 60%,rgba(7,6,10,.85))}
.cx-zocalo .zoc-txt{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:2;
  font-family:var(--fm);font-size:clamp(13px,2vw,18px);color:var(--l1);letter-spacing:.15em;text-align:center;padding:0 20px}
.cx-zocalo .zoc-txt b{color:var(--cardboard);font-weight:600}

/* ════════════════════════════════════════════════════════════════
   FOOTER — conversión colectiva
   ════════════════════════════════════════════════════════════════ */
#cx-footer{min-height:560px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:80px 24px;text-align:center}
#cx-footer video,#cx-footer .ft-ph{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
#cx-footer video{filter:blur(1.5px) saturate(1.2) brightness(1.02);pointer-events:none}
#cx-footer .ft-ph{background:radial-gradient(ellipse at center,#1a1410,#07060a 75%)}
#cx-footer .ft-inner{text-shadow:0 2px 14px rgba(0,0,0,.9)}
#cx-footer::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;
  background:linear-gradient(180deg,rgba(7,6,10,.15) 0%,rgba(7,6,10,.4) 100%);
  animation:heroOverlayBreathe 9s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){#cx-footer::after{animation:none}}
body.safe-mode #cx-footer::after{animation:none}
.ft-inner{position:relative;z-index:2;max-width:760px;width:100%;margin:0 auto;box-sizing:border-box}
@media(max-width:768px){
  .ft-inner{padding:0 16px}
  #cx-footer{padding:40px 0;min-height:auto}
}
.ft-manifesto{font-family:var(--fh);font-weight:800;font-size:clamp(22px,3.4vw,40px);color:var(--w);
  line-height:1.25;letter-spacing:-.01em;margin-bottom:40px}
.ft-manifesto .accent{color:var(--cardboard)}
.ft-links{display:flex;flex-direction:column;gap:12px;max-width:440px;margin:0 auto}
.ft-link{font-family:var(--fm);font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--l1);
  border:1px solid rgba(255,255,255,.16);padding:16px 22px;border-radius:3px;text-decoration:none;
  display:flex;align-items:center;justify-content:space-between;transition:all .25s;position:relative;overflow:hidden}
.ft-link::before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:var(--c);transform:scaleX(0);transform-origin:left;
  transition:transform .35s ease;z-index:0;opacity:.12}
.ft-link:hover::before{transform:scaleX(1)}
.ft-link span{position:relative;z-index:1}
.ft-link .arrow{position:relative;z-index:1;transition:transform .25s}
.ft-link:hover .arrow{transform:translateX(4px)}
.ft-link:hover{border-color:var(--c);color:var(--w)}

/* ════════════════════════════════════════════════════════════════
   LIGHTBOX — video oficial
   ════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════
   JUKEBOX — botonera flotante para saltar a cualquier canción
   ════════════════════════════════════════════════════════════════ */
#cx-jukebox{position:fixed;top:50%;right:14px;transform:translateY(-50%);z-index:900;
  display:flex;flex-direction:column;gap:6px;background:rgba(10,9,12,.7);
  border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:10px 7px;
  backdrop-filter:blur(10px)}
.jb-btn{width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);color:var(--l2);font-size:13px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .25s;flex-shrink:0;
  position:relative;--tcolor:#00C8E8}
.jb-btn::after{content:attr(data-tooltip);position:absolute;right:calc(100% + 14px);top:50%;
  transform-origin:right center;transform:translateY(-50%) translateX(8px) scale(.7);
  background:linear-gradient(135deg,rgba(16,14,12,.97),rgba(10,9,12,.97));color:var(--w);
  font-family:var(--fm);font-size:11.5px;font-weight:700;letter-spacing:.04em;white-space:nowrap;
  padding:7px 14px;border-radius:7px;border:1.5px solid var(--tcolor);
  opacity:0;pointer-events:none;transition:opacity .3s cubic-bezier(.3,1.6,.4,1),transform .3s cubic-bezier(.3,1.6,.4,1);
  box-shadow:0 8px 22px rgba(0,0,0,.5),0 0 16px -2px var(--tcolor)}
.jb-btn::before{content:'';position:absolute;right:calc(100% + 5px);top:50%;width:9px;height:9px;
  background:var(--tcolor);transform:translateY(-50%) rotate(45deg) scale(0);
  opacity:0;transition:transform .25s cubic-bezier(.3,1.6,.4,1) .05s,opacity .25s .05s;
  border-radius:2px;box-shadow:0 0 10px -1px var(--tcolor)}
.jb-btn:hover::after{opacity:1;transform:translateY(-50%) translateX(0) scale(1)}
.jb-btn:hover::before{opacity:1;transform:translateY(-50%) rotate(45deg) scale(1)}
.jb-btn:hover{border-color:var(--tcolor);background:rgba(255,255,255,.1);color:var(--w);
  box-shadow:0 0 12px -2px var(--tcolor)}
.jb-btn.active{border-color:var(--cardboard);background:rgba(154,107,60,.25);
  color:var(--w);transform:scale(1.18);box-shadow:0 0 14px rgba(154,107,60,.4)}
.jb-btn.active:not(.jb-hero):not(.jb-footer){
  border-color:var(--tcolor);background:rgba(255,255,255,.12);
  background:color-mix(in srgb,var(--tcolor) 22%,transparent);
  box-shadow:0 0 14px -2px var(--tcolor);
  animation:jbActivePulse 1.8s ease-in-out infinite}
@keyframes jbActivePulse{
  0%,100%{box-shadow:0 0 10px -2px var(--tcolor)}
  50%{box-shadow:0 0 20px 1px var(--tcolor)}
}
body.safe-mode .jb-btn.active{animation:none !important}
@media (prefers-reduced-motion:reduce){
  .jb-btn::after,.jb-btn::before{transition:opacity .15s !important;transform:translateY(-50%) !important}
  .jb-btn:hover::before{transform:translateY(-50%) rotate(45deg) !important}
}
.jb-btn.jb-hero,.jb-btn.jb-footer{font-size:11px;color:var(--cardboard)}
@media(max-width:768px){
  #cx-jukebox{top:auto;left:0;right:0;bottom:calc(108px + env(safe-area-inset-bottom,0px));
    transform:none;flex-direction:row;flex-wrap:nowrap;width:100%;max-width:100%;
    border-radius:0;border-left:none;border-right:none;padding:6px 10px;
    justify-content:flex-start;background:rgba(10,9,12,.92);gap:8px;
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;scrollbar-width:none}
  #cx-jukebox::-webkit-scrollbar{display:none}
  /* Tamaño fijo y cómodo — el jukebox scrollea en vez de achicar los botones
     hasta que alguno quede afuera */
  .jb-btn{flex:0 0 auto;width:34px;height:34px;font-size:14px;border-radius:8px;margin:0;
    min-width:34px;max-width:none;scroll-snap-align:center}
  /* Ocultar los botones Hero y Footer que no son canciones */
  .jb-btn.jb-hero,.jb-btn.jb-footer{display:none}
  .jb-btn::after{right:auto;left:50%;top:auto;bottom:calc(100% + 10px);
    transform-origin:center bottom;transform:translateX(-50%) translateY(8px) scale(.7)}
  .jb-btn::before{right:auto;left:50%;top:auto;bottom:calc(100% + 3px);
    transform:translateX(-50%) rotate(45deg) scale(0)}
  .jb-btn:hover::after{transform:translateX(-50%) translateY(0) scale(1)}
  .jb-btn:hover::before{transform:translateX(-50%) rotate(45deg) scale(1)}
}
@media (prefers-reduced-motion:reduce){.jb-btn{transition:none}.jb-btn.active{transform:none;animation:none !important}}

#cx-lightbox{position:fixed;top:0;right:0;bottom:0;left:0;z-index:5000;background:rgba(4,3,5,.96);display:none;
  align-items:center;justify-content:center;padding:30px}
#cx-lightbox.on{display:flex}
#cx-lightbox .lb-inner{width:min(960px,100%);aspect-ratio:16/9;position:relative;background:#000}
#cx-lightbox iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}
#cx-lightbox .lb-close{position:absolute;top:-44px;right:0;font-family:var(--fm);font-size:12px;
  color:var(--l1);background:none;border:1px solid rgba(255,255,255,.2);padding:8px 14px;border-radius:3px;cursor:pointer}
#cx-lightbox .lb-close:hover{color:var(--w);border-color:var(--w)}

/* ════════════════════════════════════════════════════════════════
   SAFE MODE — desactiva estroboscopia / parpadeos
   ════════════════════════════════════════════════════════════════ */
body.safe-mode .tk-reels img,body.safe-mode .tk-reels video{animation:none !important;opacity:.5 !important}
body.safe-mode .tk-layer.ia{animation:none !important}
body.safe-mode .tk-glitch{display:none !important}
body.safe-mode .tk-visual.kick-on{box-shadow:0 0 14px 1px rgba(0,200,232,.25) !important}
body.safe-mode .hero-tag,body.safe-mode .cx-sec-num{animation:none !important}

@media (prefers-reduced-motion:reduce){
  html,body{scroll-behavior:auto}
  .tk-reels img,.tk-reels video{animation:none !important}
  .tk-glitch{display:none !important}
  .hero-scroll-cue{animation:none}
  .px-layer{transform:none !important}
}

/* ════════════════════════════════════════════════════════════════
   MOBILE — versión simplificada, sin diagonales ni hover
   ════════════════════════════════════════════════════════════════ */
@media(max-width:860px){
  .tk{display:block}
  .tk-split{grid-template-columns:1fr;height:auto;min-height:100%;display:block}
  /* ── TK-COL MOBILE FIX (spec §1.2) ──────────────────────────────────────
     padding vertical generoso + padding-bottom sumando --dock-h (altura del
     reproductor fijo) para que el texto no quede tapado por los controles.
     height:auto permite crecimiento libre; overflow-y:visible evita clipping. */
  .tk-col,.tk:nth-of-type(even) .tk-col-left,.tk:nth-of-type(even) .tk-col-right{
    order:initial;border:none;background:none;
    padding:32px 6vw calc(var(--dock-h,60px) + 45px) 6vw !important;
    min-height:0;height:auto;overflow-y:visible;
    justify-content:flex-start;display:block}
  /* Siempre primero: el eyebrow debe quedar visible por encima del nav fijo */
  .tk-col-left,.tk:nth-of-type(even) .tk-col-left{padding-top:calc(var(--nav-h,46px) + 8px) !important}
  .tk-eyebrow{margin-top:0 !important;margin-bottom:8px}
  /* El padding-bottom con --dock-h ya cubre la col-right; solo reseteamos el top */
  .tk-col-right{padding-top:8px !important}
  .tk-visual{aspect-ratio:16/10}
  @supports not (aspect-ratio:1){.tk-visual{height:240px;min-height:0}}
  .px-liana-l,.px-liana-r{display:none}
  .px-strip-top,.px-strip-bottom{height:90px}
  .cx-zocalo{height:160px}
  .cx-menu a:not(.cx-menu-cta){display:none}
  .hero-title{font-size:clamp(34px,11vw,58px)}
  .hero-title .slash{margin:0 6px}
}


/* ── Punto 6: Partículas mosaico — drift atmosférico ────────────────────────── */
@keyframes backgroundParticlesDrift{
  0%{background-position:0px 0px}
  100%{background-position:24px 48px}}
.tk-mosaic,[id^="tk-mosaic-"]{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:24px 24px;
  animation:backgroundParticlesDrift 20s linear infinite;
  will-change:background-position}
.safe-mode .tk-mosaic,
.safe-mode [id^="tk-mosaic-"]{animation:none}

/* ══════════════════════════════════════════════════════════════════════════════
   REPRODUCTOR ULTRA MINIMALISTA — PUNTO 2
   ══════════════════════════════════════════════════════════════════════════════ */

/* Ocultar los botones de estilo antiguo (por si quedan residuos) */
.tk-cta.run,.tk-cta.cine{display:none}

/* Contenedor principal */
.tk-player-minimal{
  margin-top:24px;width:100%;
  display:flex;flex-direction:column;gap:10px}

/* Nombre del track limpio arriba */
.tk-player-trackname{
  font-size:11px;letter-spacing:.15em;
  color:var(--l2);text-transform:uppercase}

/* Fila de controles */
.tk-player-controls{display:flex;gap:8px;width:100%}

/* ── DALE PLAY animado ────────────────────────────────────────────────────── */
.tk-play-btn{
  flex:1;
  font-family:var(--fm);font-size:12px;font-weight:700;letter-spacing:.08em;
  padding:14px 20px;
  background:var(--c);color:#000;
  border:none;border-radius:4px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .25s cubic-bezier(.2,.8,.2,1);
  animation:playPulse calc(var(--bpm-speed,.48s) * 2) infinite ease-in-out}
.tk-play-btn:hover{background:rgba(0,200,232,.85)}
.tk-play-btn.playing{background:rgba(0,200,232,.2);color:var(--c);border:1px solid var(--c)}
.tk-play-btn .play-icon{font-size:10px}

/* Botón cinemática compacto */
.tk-cine-btn-min{
  width:48px;flex-shrink:0;
  background:transparent;color:var(--l1);
  border:1px solid rgba(255,255,255,.15);border-radius:4px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s ease}
.tk-cine-btn-min:hover{
  border-color:var(--w);color:var(--w);
  background:rgba(255,255,255,.03)}

/* Keyframes del pulso rítmico */
@keyframes playPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0px rgba(0,200,232,0)}
  50%{transform:scale(1.015);box-shadow:0 0 14px rgba(0,200,232,.3)}}

/* Embeds box compacto */
.tk-embeds-compact{margin-top:8px}
.tk-embed-box{border-radius:4px;overflow:hidden}

@media(prefers-reduced-motion:reduce){.tk-play-btn{animation:none}.tk-title,.tk-num-badge,.tk-visual,.tk-split::before,.tk-layer.ia,.tk-layer.alt{animation:none !important}}
@media(max-width:860px){
  .tk-player-minimal{margin-top:16px}
  .tk-play-btn{padding:12px 16px;font-size:11px}
}


/* ── gr-brand-container en contexto CARTØN: Ä/Ø en verde --c2 ── */
.cx-slide .gr-brand-container .letter-c,
.cx-slide .gr-brand-container .lg-a,
.cx-slide .gr-brand-container .lg-o{color:var(--c2) !important}

/* ══════════════════════════════════════════════════════════════════════════════
   TASK 3 — ANIMACIONES DINÁMICAS CARTØN
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. GLITCH en títulos de tracks al hover ────────────────────────────── */
@keyframes tkGlitch {
  0%  { clip-path:inset(0 0 95% 0); transform:translate(-2px,0) skewX(-1deg) }
  15% { clip-path:inset(30% 0 60% 0); transform:translate(2px,0) skewX(1deg) }
  30% { clip-path:inset(60% 0 30% 0); transform:translate(-1px,0) }
  50% { clip-path:inset(0 0 0 0);    transform:translate(0,0) }
  100%{ clip-path:inset(0 0 0 0);    transform:translate(0,0) }
}

.tk-title{position:relative;cursor:default}
.tk-title::after{
  content:attr(data-text);
  position:absolute;left:0;top:0;
  color:var(--c);
  clip-path:inset(0 0 100% 0);
  opacity:0;
  transition:opacity .1s}
.cx-slide.active .tk-title::after{
  opacity:.5;
  animation:tkGlitch 3.5s cubic-bezier(.25,1,.5,1) infinite}

/* ── 2. PARTÍCULAS flotantes en el hero de CARTØN ──────────────────────── */
@keyframes ctParticleFloat{
  0%  { transform:translate3d(var(--px,0px),  0,0) rotate(0deg); opacity:0 }
  10% { opacity:var(--po,.5) }
  90% { opacity:var(--po,.5) }
  100%{ transform:translate3d(var(--px,20px),var(--py,-140px),0) rotate(var(--pr,45deg)); opacity:0 }
}
.ct-particle{
  position:absolute;width:2px;height:2px;
  border-radius:50%;
  background:var(--c);
  pointer-events:none;
  animation:ctParticleFloat var(--pd,8s) ease-in-out infinite;
  animation-delay:var(--pdelay,0s);
  box-shadow:0 0 4px var(--c)}
.safe-mode .ct-particle{display:none}

/* ── 3. SCANLINE overlay sobre tk-visual para efecto CRT/VHS ───────────── */
@keyframes scanlines{
  0%  { background-position:0 0 }
  100%{ background-position:0 100% }
}
.tk-visual::after{
  content:'';
  position:absolute;inset:0;
  background:repeating-linear-gradient(
    0deg,
    transparent,transparent 2px,
    rgba(0,0,0,.07) 2px,rgba(0,0,0,.07) 4px);
  background-size:100% 4px;
  pointer-events:none;
  z-index:5;
  animation:scanlines 4s linear infinite;
  mix-blend-mode:multiply}
.safe-mode .tk-visual::after{animation:none}

/* ── 4. PULSO de color en el borde de cada slide según el track ─────────── */
@keyframes borderPulse{
  0%,100%{ box-shadow:inset 0 0 0 1px rgba(0,200,232,.0) }
  50%     { box-shadow:inset 0 0 0 1px rgba(0,200,232,.25) }
}
.cx-slide.active{
  animation:borderPulse calc(var(--bpm-speed,.96s) * 2) ease-in-out infinite}

/* ── 5. AURORA en el hero — glow de colores que se mueve lentamente ─────── */
@keyframes heroAurora{
  0%  { background-position:0% 50% }
  50% { background-position:100% 50% }
  100%{ background-position:0% 50% }
}
#cx-slide-0 .cx-hero-inner::before{
  content:'';
  position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 40% at 20% 60%, rgba(0,200,232,.08), transparent),
             radial-gradient(ellipse 60% 50% at 80% 30%, rgba(127,255,0,.06), transparent),
             radial-gradient(ellipse 70% 60% at 50% 80%, rgba(0,229,180,.05), transparent);
  background-size:200% 200%;
  animation:heroAurora 12s ease infinite;
  pointer-events:none;z-index:0}
.safe-mode #cx-slide-0 .cx-hero-inner::before{animation:none}

/* ── 6. WAVEFORM pulsante en el footer de CARTØN ───────────────────────── */
@keyframes waveBar{
  0%,100%{ transform:scaleY(.2) }
  50%     { transform:scaleY(1) }
}
.cx-footer-wave{
  display:flex;align-items:flex-end;gap:3px;height:40px;
  justify-content:center;margin:20px 0}
.cx-footer-wave span{
  width:3px;border-radius:3px;
  background:var(--c);opacity:.6;
  transform-origin:bottom;
  animation:waveBar calc(var(--bpm-speed,.96s)) ease-in-out infinite alternate;
  animation-delay:var(--wb-delay,0s)}
.safe-mode .cx-footer-wave span{animation:none;transform:scaleY(.3)}

/* ══════════════════════════════════════════════════════════════════════════════
   PUNTO 3 — FULL-BLEED 100×100 NO-SCROLL DESKTOP
   Cada cx-slide es exactamente 100vh × 100vw en desktop.
   El jukebox navega por slides programáticamente — cero scroll nativo.
   En mobile se restablece a flujo vertical libre.
   ══════════════════════════════════════════════════════════════════════════════ */

@media(min-width:869px){
  html,body{height:100vh;overflow:hidden}
  /* #cx-jukebox es position:fixed con top:50%+translateY(-50%) — NO debe tener height fija
     o el cálculo se rompe y la botonera sube al techo (top = 50vh - 50vh = 0) */
  .cx-slide{
    height:100vh !important;max-height:100vh !important;
    width:100vw !important;overflow:hidden}
  /* Texto de historia: columna interna con scroll estético aislado */
  .tk-col-left .tk-story-wrap,
  .tk-col-left{
    overflow-y:auto !important;
    max-height:calc(100vh - var(--nav-h,46px) - 120px) !important;
    scrollbar-width:thin;
    scrollbar-color:rgba(0,200,232,.3) transparent}
  .tk-col-left::-webkit-scrollbar{width:3px}
  .tk-col-left::-webkit-scrollbar-thumb{background:rgba(0,200,232,.3);border-radius:3px}
}

/* Mobile: flujo vertical libre, override del no-scroll */
@media(max-width:868px){
  html,body{height:auto !important;overflow-y:auto !important;overflow-x:hidden}
  .cx-slide{height:auto !important;max-height:none !important;overflow:visible !important}
  /* Bug: el slide activo seguía siendo position:fixed, así que aunque su
     contenido era más alto que la pantalla, el body no tenía forma de
     scrollear hasta el final (los elementos fixed no aportan altura de
     documento). Pasándolo a relative entra en el flujo normal y el scroll
     funciona como en Artista. */
  .cx-slide.active{
    position:relative !important;
    top:auto !important;left:auto !important;
    width:100% !important;min-height:100vh !important}
}

/* ══════════════════════════════════════════════════════════════════════════════
   CARTON.HTML — MÁS PROFUNDIDAD DE ANIMACIONES
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── BPM badge flotante — muestra el tempo del track activo ──────────────── */
#cx-bpm-badge{
  position:fixed;bottom:calc(var(--dock-h,60px) + 75px);right:18px;
  z-index:9998;
  font-family:'DM Mono',var(--fm),monospace;
  font-size:10px;letter-spacing:.12em;color:var(--c);
  background:rgba(0,0,0,.75);
  border:1px solid rgba(0,200,232,.25);border-radius:6px;
  padding:5px 10px;
  pointer-events:none;
  opacity:0;transition:opacity .4s}
#cx-bpm-badge.visible{opacity:1}
/* El punto que pulsa al ritmo del BPM */
#cx-bpm-badge::before{
  content:'';display:inline-block;
  width:5px;height:5px;border-radius:50%;
  background:var(--c);margin-right:6px;vertical-align:middle;
  animation:bpmDot calc(var(--bpm-speed,.49s)) ease-in-out infinite alternate}
@keyframes bpmDot{
  0%{transform:scale(.6);opacity:.4;box-shadow:0 0 0 rgba(0,200,232,0)}
  100%{transform:scale(1.2);opacity:1;box-shadow:0 0 6px var(--c)}}
.safe-mode #cx-bpm-badge::before{animation:none}

/* ── Slide activo: aura de color del track ────────────────────────────────── */
.cx-slide.active .tk-visual{
  box-shadow:0 0 40px rgba(0,200,232,.12),inset 0 0 60px rgba(0,0,0,.4)}
.cx-slide.active .tk-play-btn{
  animation:playPulse calc(var(--bpm-speed,.49s) * 2) infinite ease-in-out}

/* ── Líneas de frecuencia pulsantes en el hero de CARTØN ─────────────────── */
@keyframes freqBar{
  0%  {height:4px;opacity:.2}
  50% {height:var(--fh-max,28px);opacity:.8}
  100%{height:4px;opacity:.2}}
.cx-freq-bars{
  position:absolute;bottom:0;left:0;right:0;
  display:flex;align-items:flex-end;justify-content:center;
  gap:3px;height:40px;pointer-events:none;overflow:hidden;z-index:0}
.cx-freq-bar{
  width:3px;border-radius:3px 3px 0 0;
  background:var(--c);opacity:.3;height:4px;
  animation:freqBar calc(var(--bpm-speed,.49s) * var(--fb-mult,1)) ease-in-out infinite;
  animation-delay:var(--fb-delay,0s)}
.safe-mode .cx-freq-bar{animation:none;height:4px}

/* ── Track title: número de orden visible en el slide activo ─────────────── */
.cx-slide.active .tk-eyebrow::before{
  content:attr(data-order) ' ';
  font-family:'DM Mono',var(--fm),monospace;
  color:var(--c);font-size:.85em;letter-spacing:.08em}

/* ── Glitch mejorado en título cuando entra el slide ─────────────────────── */
@keyframes glitchIn{
  0%  {clip-path:inset(0 0 100% 0);transform:translateX(-4px)}
  25% {clip-path:inset(0 0 60% 0); transform:translateX(2px)}
  50% {clip-path:inset(0 0 30% 0); transform:translateX(-1px)}
  75% {clip-path:inset(0 0 10% 0); transform:translateX(0)}
  100%{clip-path:inset(0 0 0 0);   transform:translateX(0)}}
.cx-slide.active .tk-title{
  animation:glitchIn .5s cubic-bezier(.25,1,.5,1) both}

/* ── Vignette de profundidad en slides ────────────────────────────────────── */
.cx-slide::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.6) 100%);
  pointer-events:none;z-index:1}

/* ── Animal nav: hover glow con color del track ──────────────────────────── */
.jb-btn:hover{
  box-shadow:0 0 14px rgba(0,200,232,.45) !important;
  transform:scale(1.08) !important}

/* ── Footer waveform más dramático ───────────────────────────────────────── */
.cx-footer-wave span{
  background:var(--c);opacity:.5;
  box-shadow:0 0 4px var(--c)}

/* ══════════════════════════════════════════════════════════════════════════════
   CARTØN — Efecto BPM en el borde inferior, cambia de color según la canción
   activa (usa la misma variable --ct-track-color que actualiza carton.js
   en cada cambio de slide). CSS puro para el latido, JS solo cambia el color.
   ══════════════════════════════════════════════════════════════════════════════ */
:root{--ct-track-color:#00C8E8}
.ct-bpm-edge{
  position:fixed;left:0;right:0;bottom:0;
  height:34px;z-index:850;pointer-events:none;
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:2px;padding:0 2px;
  background:linear-gradient(0deg,rgba(0,0,0,.4) 0%,transparent 100%)}
.ct-bpm-edge span{
  flex:1 1 0;min-width:1px;height:14%;border-radius:1px 1px 0 0;
  background:linear-gradient(0deg,var(--ct-track-color) 0%,transparent 100%);
  opacity:.75;
  transition:background .5s ease;
  animation:ctBpmEdgePulse calc(60s / var(--ct-bpm,124) * 2) ease-in-out infinite alternate}
@keyframes ctBpmEdgePulse{
  0%{height:10%;opacity:.5}
  50%{height:65%;opacity:.85}
  100%{height:26%;opacity:.6}
}
@media(prefers-reduced-motion:reduce){
  .ct-bpm-edge span{animation:none;height:22%;opacity:.55}
}
@media(max-width:768px){
  .ct-bpm-edge{height:20px}
}

/* Flechas laterales de navegación — en carton.html el mobile ya tiene abajo
   el jukebox + dock + mini-player, así que acá van centradas en altura
   en vez de abajo, para no pisarse con nada de eso. */
@media(max-width:768px){
  #ct-nav-prev,#ct-nav-next{top:44% !important;bottom:auto !important;transform:translateY(-50%) !important}
}

/* ══════════════════════════════════════════════════════════════════════════════
   HERO CARTØN — CTA proactivo. Antes la única invitación era un link chico
   ("EMPEZAR"), casi invisible. Ahora hay un botón real que no se puede pasar por alto.
   ══════════════════════════════════════════════════════════════════════════════ */
.hero-cta-row{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  margin-top:clamp(20px,4vw,32px);animation:fup .8s .9s both}
.hero-cta-btn{
  padding:15px 32px;border-radius:40px;
  font-family:var(--fh);font-size:13px;font-weight:800;letter-spacing:.06em;
  cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);
  background:var(--c);color:#000;border:none;
  box-shadow:0 8px 28px rgba(0,200,232,.35)}
.hero-cta-btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 12px 36px rgba(0,200,232,.5)}
.hero-cta-btn.hero-cta-sec{
  background:transparent;color:rgba(255,255,255,.85);
  border:1.5px solid rgba(255,255,255,.25);box-shadow:none}
.hero-cta-btn.hero-cta-sec:hover{border-color:var(--c);color:var(--c);background:rgba(0,200,232,.08)}
@media(max-width:600px){
  .hero-cta-btn{padding:13px 24px;font-size:11.5px;width:100%;max-width:320px}
  .hero-cta-row{flex-direction:column;align-items:center}
}