/* effects.css — toda la complejidad nueva, misma paleta方形 */
#progress{
  position:fixed;top:0;left:0;height:2px;width:0%;
  background:var(--mint);z-index:60;
}
#particles{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.9;
}
/* Cursor custom */
#cursor-dot,#cursor-ring{
  position:fixed;top:0;left:0;pointer-events:none;z-index:100;
  display:none;
}
@media (pointer:fine){
  #cursor-dot{display:block;width:6px;height:6px;background:var(--mint)}
  #cursor-ring{display:block;width:34px;height:34px;border:1px solid var(--mint-dim);transition:width .25s,height .25s,border-color .25s,background .25s}
  #cursor-ring.is-hover{width:52px;height:52px;border-color:var(--mint);background:rgba(157,245,207,.08)}
}
/* Sticky nav */
.sticky-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.sticky-nav .wrap{
  display:flex;gap:10px;justify-content:flex-start;align-items:center;
  padding-top:8px;padding-bottom:8px;flex-wrap:nowrap;
  overflow-x:auto;scrollbar-width:thin;
}
.sticky-nav a{
  color:var(--mint-dim);text-decoration:none;white-space:nowrap;flex:0 0 auto;
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  padding:5px 8px;border:1px solid transparent;
}
.sticky-nav a.active,.sticky-nav a:hover{color:var(--mint);border-color:var(--mint-dim)}
/* Typewriter */
.type-line{color:var(--mint-dim);letter-spacing:.24em;text-transform:uppercase;font-size:.78rem;margin-bottom:26px;min-height:1.6em}
#typewriter{color:var(--mint);border-right:1px solid var(--mint);padding-right:6px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{border-color:transparent}}
/* Marquee */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:44px;white-space:nowrap}
.marquee-inner{display:inline-block;padding:12px 0;color:var(--mint-dim);letter-spacing:.4em;text-transform:uppercase;font-size:.72rem;animation:scroll 22s linear infinite}
@keyframes scroll{to{transform:translateX(-50%)}}
/* Reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
/* Toolbar filtros */
.toolbar{margin-top:40px;border:1px solid var(--line);padding:22px 18px;background:#020403;text-align:left}
.toolbar-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.toolbar-row:last-child{margin-bottom:0}
.toolbar-label{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--mint-dim);min-width:92px}
.chip{
  font-family:inherit;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  background:transparent;color:var(--mint-dim);border:1px solid var(--line);
  padding:8px 14px;cursor:pointer;transition:all .25s;
}
.chip:hover{color:var(--mint);border-color:var(--mint-dim)}
.chip[aria-pressed="true"]{background:var(--mint);color:#000;border-color:var(--mint)}
.toolbar-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.link-btn{background:none;border:none;color:var(--mint);font-family:inherit;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;border-bottom:1px solid var(--mint-dim);padding:2px 0}
.link-btn:hover{border-color:var(--mint)}
#filter-count{color:var(--mint-dim);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
/* Drag */
.track.dragging{opacity:.4;border-style:dashed}
.track.drop-before{box-shadow:0 -2px 0 var(--mint)}
.track.drop-after{box-shadow:0 2px 0 var(--mint)}
.track.is-hidden{display:none}
.track-tools{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;justify-content:center}
.tool-btn{
  font-family:inherit;background:transparent;border:1px solid var(--line);
  color:var(--mint-dim);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  padding:8px 12px;cursor:grab;transition:all .2s;
}
.tool-btn:hover{color:#000;background:var(--mint);border-color:var(--mint)}
.fav-btn{cursor:pointer}
.fav-btn[aria-pressed="true"]{background:var(--mint);color:#000;border-color:var(--mint)}
/* Visualizador decorativo */
.viz{display:flex;gap:3px;justify-content:center;align-items:flex-end;height:26px;margin:14px 0 4px;opacity:.55}
.viz span{width:4px;background:var(--mint-dim);height:20%;transition:height .3s}
.track:hover .viz span{animation:eq .7s ease-in-out infinite alternate}
.viz span:nth-child(2n){animation-delay:.1s}.viz span:nth-child(3n){animation-delay:.2s}
.viz span:nth-child(4n){animation-delay:.35s}.viz span:nth-child(5n){animation-delay:.5s}
@keyframes eq{from{height:12%}to{height:100%;background:var(--mint)}}
/* Buscador */
.search-box{margin-top:34px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.search-box input{
  font-family:inherit;background:#020403;border:1px solid var(--mint-dim);
  color:var(--mint);padding:12px 18px;min-width:min(320px,80vw);
  letter-spacing:.06em;font-size:.95rem;
}
.search-box input::placeholder{color:var(--mint-dim)}
/* FAQ */
.faq{margin-top:44px;text-align:left;display:flex;flex-direction:column;gap:12px}
.faq details{border:1px solid var(--line);background:#020403;padding:0}
.faq summary{cursor:pointer;list-style:none;padding:18px 22px;color:var(--mint);letter-spacing:.1em;text-transform:uppercase;font-size:.85rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+ ";color:var(--mint-dim)}
.faq details[open] summary::before{content:"— "}
.faq details p{padding:0 22px 20px;color:var(--txt)}
/* Modal */
dialog#track-modal{
  background:#020403;color:var(--txt);
  border:1px solid var(--mint-dim);
  max-width:640px;width:calc(100vw - 40px);
  padding:0;font-family:inherit;
}
dialog#track-modal::backdrop{background:rgba(0,0,0,.8);backdrop-filter:blur(4px)}
.modal-inner{padding:38px 32px;text-align:left}
.modal-inner h3{color:var(--mint);font-weight:400;text-transform:uppercase;letter-spacing:.06em;font-size:2rem;margin-bottom:8px}
.modal-inner .meta{margin-bottom:18px;display:block}
.modal-video{margin:22px 0;border:1px solid var(--line)}
.modal-video iframe{width:100%;aspect-ratio:16/9;display:block;border:0}
.modal-nav{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;align-items:center}
/* Toast */
#toast{
  position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);
  background:var(--mint);color:#000;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;
  padding:12px 24px;opacity:0;pointer-events:none;transition:all .3s;z-index:200;
}
#toast.show{opacity:1;transform:translate(-50%,0)}
/* Back to top */
#to-top{
  position:fixed;right:18px;bottom:18px;z-index:55;
  width:46px;height:46px;background:#020403;color:var(--mint);
  border:1px solid var(--mint-dim);cursor:pointer;font-size:1.1rem;
  opacity:0;pointer-events:none;transition:all .3s;font-family:inherit;
}
#to-top.show{opacity:1;pointer-events:auto}
#to-top:hover{background:var(--mint);color:#000}
/* Tilt */
.tilt{transition:transform .15s ease-out}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .reveal{opacity:1;transform:none}
  #particles{display:none}
  .marquee-inner{animation:none;white-space:normal}
}