/* =========================================================================
   UF0 — sistema visual v9

   Qué cambia respecto a todo lo anterior:
     · No hay barra superior. No hay rejilla de portadas. No hay panel que
       sube desde abajo.
     · El sistema (marca + tres planetas) SE APARTA y el contenido ocupa el
       hueco que deja. En vertical se aparta hacia arriba.
     · La discografía es una TIRA HORIZONTAL que se arrastra, no una malla.
     · La tipografía deja de ser microtipografía en mayúsculas: ahora es
       grande y en minúscula. Es lo que más cambia el tono.
     · Cada apartado tiñe el fondo de un tono distinto, muy sordo.

   Los planetas de navegación están CLAVADOS: no viajan con el campo.
   ========================================================================= */

@font-face{font-family:'Anybody';font-style:normal;font-weight:100 900;
  font-stretch:50% 150%;font-display:swap;
  src:url('../assets/fonts/anybody-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Anybody';font-style:normal;font-weight:100 900;
  font-stretch:50% 150%;font-display:swap;
  src:url('../assets/fonts/anybody-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  --ink:#05060a;
  --bone:#dcd9d2;
  --dim:#6a665f;
  --faint:#20211f;
  --r:#ff2f3d;
  --c:#22e3ff;
  --tint:transparent;                 /* lo tiñe cada apartado */
  --f:'Anybody',ui-sans-serif,system-ui,sans-serif;
  --gut:clamp(20px,4.5vw,72px);
  --e:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
html{background:var(--ink)}
body{background:var(--ink);color:var(--dim);font-family:var(--f);
  font-size:15px;line-height:1.55;font-stretch:100%;
  -webkit-font-smoothing:antialiased;overscroll-behavior:none}
a{color:inherit;text-decoration:none}
button{font:inherit;font-family:var(--f);color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
[hidden]{display:none !important}
::selection{background:var(--c);color:#000}
:focus-visible{outline:1px solid var(--bone);outline-offset:5px}

/* el tinte de cada apartado, casi imperceptible */
body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:var(--tint);opacity:0;transition:opacity 1.1s ease,background 1.1s ease}
html.open body::after{opacity:1}
html.sec-discography{--tint:radial-gradient(90% 70% at 20% 100%,#0a1420 0%,transparent 70%)}
html.sec-dates      {--tint:radial-gradient(90% 70% at 20% 100%,#1a1208 0%,transparent 70%)}
html.sec-contact    {--tint:radial-gradient(90% 70% at 20% 100%,#0b1a12 0%,transparent 70%)}

/* =========================================================================
   CAMPO
   ========================================================================= */
#field{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.fallback{position:fixed;inset:0;display:none;place-items:center;z-index:0}
.fallback svg{width:min(44vw,340px);color:var(--bone);opacity:.5}
.no-webgl .fallback{display:grid}

/* marca de palabra: abajo del todo, discreta */
.wordmark{position:fixed;left:var(--gut);bottom:clamp(18px,3.4vh,30px);z-index:40;
  width:36px;opacity:.5;transition:opacity .4s}
.wordmark svg{width:100%;height:auto;color:var(--bone);display:block}
.wordmark:hover{opacity:1}

/* =========================================================================
   PLANETAS — clavados sobre los cuerpos del campo
   ========================================================================= */
.orbits{position:fixed;inset:0;z-index:30;pointer-events:none}
.orbits a{position:absolute;left:0;top:0;display:grid;place-items:center;
  pointer-events:auto;opacity:0;transform:translate(-50%,-50%);
  transition:opacity .6s var(--e);color:var(--bone);
  -webkit-tap-highlight-color:transparent}
.orbits a.on{opacity:1}
.orbits a i{display:block;border-radius:50%;border:1px solid transparent;
  transition:border-color .4s var(--e),transform .4s var(--e)}
.orbits a b{position:absolute;top:calc(50% + var(--r,34px) + 16px);white-space:nowrap;
  font-weight:500;font-stretch:105%;font-size:clamp(15px,1.5vw,19px);letter-spacing:-.01em;
  transition:color .3s var(--e),transform .4s var(--e)}
.orbits a:hover i,.orbits a:focus-visible i{border-color:var(--c);transform:scale(1.16)}
.orbits a:hover b{transform:translateY(3px);text-shadow:-1.5px 0 var(--r),1.5px 0 var(--c)}
/* el elegido se queda; los otros dos se apagan pero siguen pulsables */
html.open .orbits a{opacity:.22}
html.open .orbits a.cur{opacity:1}
html.open .orbits a b{font-size:clamp(12px,1.1vw,14px)}

/* respaldo de texto: solo si no hay planetas */
.plain{position:fixed;left:var(--gut);bottom:clamp(58px,9vh,84px);z-index:40;
  display:flex;flex-direction:column;gap:4px}
.plain a{font-size:16px;font-stretch:105%;color:var(--dim);transition:color .3s}
.plain a:hover{color:var(--bone)}
html.orbs-ok .plain{display:none}

/* =========================================================================
   EL HUECO QUE DEJA EL SISTEMA
   ========================================================================= */
.stage{position:fixed;z-index:20;
  left:52%;right:0;top:0;bottom:0;                 /* horizontal: mitad derecha */
  display:flex;flex-direction:column;
  padding:clamp(26px,5vh,60px) var(--gut) clamp(20px,4vh,40px) 0;
  opacity:0;pointer-events:none;transform:translateX(28px);
  transition:opacity .5s var(--e),transform .6s var(--e)}
html.open .stage{opacity:1;pointer-events:auto;transform:none}
@media(max-width:820px){
  .stage{left:0;top:53%;padding:0 var(--gut) clamp(18px,3vh,30px)}
}

.back{align-self:flex-start;flex:none;font-size:14px;font-stretch:105%;color:var(--dim);
  margin-bottom:clamp(14px,2.4vh,26px);transition:color .3s}
.back:hover{color:var(--bone)}

.sec{display:none;flex:1;min-height:0;flex-direction:column}
.sec.on{display:flex}
.sechead{flex:none;margin-bottom:clamp(14px,2.4vh,26px)}
.sechead h2{font-size:clamp(30px,4.6vw,58px);font-weight:700;font-stretch:118%;
  letter-spacing:-.035em;line-height:1;color:var(--bone);margin-bottom:12px}

.filters{display:flex;flex-wrap:wrap;gap:0 clamp(12px,1.6vw,22px)}
.filters button{font-size:14px;font-stretch:100%;color:var(--faint);transition:color .3s}
.filters button:hover,.filters button[aria-pressed="true"]{color:var(--bone)}

/* =========================================================================
   LA TIRA — se arrastra en horizontal
   ========================================================================= */
.strip{flex:1;min-height:0;display:flex;gap:clamp(12px,1.6vw,22px);align-items:center;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none;cursor:grab;
  padding-bottom:6px}
.strip::-webkit-scrollbar{display:none}
.strip.drag{cursor:grabbing;scroll-snap-type:none}
.disc{flex:none;width:clamp(128px,32vw,230px);scroll-snap-align:start;
  display:flex;flex-direction:column;gap:9px;-webkit-tap-highlight-color:transparent}
.disc .art{position:relative;width:100%;aspect-ratio:1;overflow:hidden;background:#0c0d11}
.disc .art img{width:100%;height:100%;object-fit:cover;opacity:0;
  filter:grayscale(1) brightness(.8);
  transition:opacity .6s ease,filter .4s var(--e),transform .7s var(--e)}
.disc .art img.on{opacity:1}
.disc:hover .art img,.disc:focus-visible .art img{filter:none;transform:scale(1.04)}
.disc .t{font-size:15px;font-weight:600;font-stretch:105%;line-height:1.2;color:var(--bone);
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.disc .y{font-size:13px;color:var(--dim)}

/* =========================================================================
   FECHAS / CONTACTO
   ========================================================================= */
.dates,.sec .links,.mail,.credit{flex:none}
.dates{overflow-y:auto;min-height:0;flex:1;padding-right:6px}
.gig{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:14px 0;
  border-top:1px solid var(--faint);color:var(--dim)}
@media(min-width:560px){.gig{grid-template-columns:11ch minmax(0,1fr);gap:20px;align-items:baseline}}
.gig .d{font-size:13px}
.gig .n{font-size:19px;font-weight:600;font-stretch:105%;color:var(--bone)}
.gig .w{font-size:13px;color:var(--faint)}
.gig.past{opacity:.42}
.head{font-size:13px;color:var(--faint);margin:24px 0 2px}
.none{font-size:19px;color:var(--dim)}

.mail{display:inline-block;font-size:clamp(19px,2.6vw,34px);font-weight:700;font-stretch:112%;
  letter-spacing:-.02em;color:var(--bone);word-break:break-word;margin-bottom:clamp(20px,4vh,36px)}
.links{list-style:none;display:flex;flex-wrap:wrap;gap:6px clamp(14px,2vw,26px);
  margin-bottom:clamp(20px,4vh,34px)}
.links a{font-size:15px;color:var(--dim);transition:color .3s}
.links a:hover{color:var(--bone);text-shadow:-1.5px 0 var(--r),1.5px 0 var(--c)}
.credit{font-size:12px;color:var(--faint)}

/* =========================================================================
   UNA REFERENCIA
   ========================================================================= */
.rel{position:fixed;inset:0;z-index:90;background:rgba(5,6,10,.97);backdrop-filter:blur(14px);
  overflow-y:auto;overscroll-behavior:contain;opacity:0;transition:opacity .45s var(--e)}
.rel.up{opacity:1}
.relin{display:grid;gap:clamp(20px,3.5vw,52px);grid-template-columns:minmax(0,1fr);
  padding:clamp(56px,9vh,96px) var(--gut) 100px;max-width:1180px;margin:0 auto}
@media(min-width:820px){.relin{grid-template-columns:minmax(0,380px) minmax(0,1fr);align-items:start}}
.rcover img{width:100%;height:auto}
.rdesig{font-size:13px;color:var(--c);margin-bottom:10px}
.rtitle{font-size:clamp(26px,4vw,46px);font-weight:700;font-stretch:118%;letter-spacing:-.035em;
  line-height:1.02;color:var(--bone);margin-bottom:6px;word-break:break-word}
.rcred{font-size:14px;color:var(--faint);margin-bottom:24px}
.rmeta{list-style:none;margin-bottom:24px;border-top:1px solid var(--faint)}
.rmeta li{display:grid;grid-template-columns:9ch minmax(0,1fr);gap:14px;padding:8px 0;
  border-bottom:1px solid var(--faint);font-size:14px}
.rmeta .k{color:var(--faint)}
.rstyles{font-size:14px;color:var(--faint);margin-bottom:24px}
.rtracks{list-style:none;margin-bottom:26px}
.rtracks li{display:grid;grid-template-columns:3.5ch minmax(0,1fr) auto;gap:12px;padding:7px 0;
  border-bottom:1px solid var(--faint);font-size:14px;color:var(--dim)}
.rtracks li.mine{color:var(--bone)}
.rtracks li .p,.rtracks li .d{font-size:12px;color:var(--faint)}
.routs{display:flex;flex-wrap:wrap;gap:0 clamp(16px,2.4vw,28px)}
.routs a{font-size:15px;color:var(--dim);transition:color .3s}
.routs a:hover{color:var(--bone);text-shadow:-1.5px 0 var(--r),1.5px 0 var(--c)}
.relnav{position:fixed;top:clamp(16px,3vh,26px);right:var(--gut);z-index:3;
  display:flex;gap:clamp(14px,2vw,26px)}
.relnav button{font-size:14px;color:var(--dim);transition:color .3s}
.relnav button:hover{color:var(--bone);text-shadow:-1.5px 0 var(--r),1.5px 0 var(--c)}

/* =========================================================================
   MOVIMIENTO REDUCIDO
   ========================================================================= */
@media(prefers-reduced-motion:reduce){ *{transition-duration:.01ms !important} }

/* en pantallas bajas el sistema y el contenido van muy justos */
@media(max-width:820px) and (max-height:700px){
  .stage{top:50%}
  .sechead h2{font-size:26px;margin-bottom:8px}
  .back{margin-bottom:10px;font-size:13px}
  .disc{width:clamp(112px,30vw,150px)}
  .disc .t{font-size:13px}
}