/* El Umbral — sitio oficial v2 · oscuro cinematográfico con el emblema 1999 */
:root{
  --negro:#0a0a0a;
  --negro2:#111;
  --blanco:#ededea;
  --rojo:#e8332a;
  --gris:#777;
  --linea:#222;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--negro);
  color:var(--blanco);
  font-family:'Inter',sans-serif;
  font-weight:300;
  overflow-x:hidden;
}
::selection{background:var(--rojo);color:#fff}
img{max-width:100%}

/* ====== sello de fondo: el logo girando lentísimo ====== */
.sello-fondo{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  display:grid;place-items:center;overflow:hidden;
}
.sello-fondo img{
  width:min(120vmin,1100px);opacity:.035;
  animation:gira 240s linear infinite;
}
@keyframes gira{to{transform:rotate(360deg)}}

/* ====== nav ====== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 5vw;
  background:transparent;
  transform:translateY(-110%);
  transition:transform .45s cubic-bezier(.16,1,.3,1), background .3s;
}
.nav.visible{transform:none;background:rgba(10,10,10,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.nav-logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--blanco)}
.nav-logo img{width:38px;height:38px;filter:drop-shadow(0 0 6px rgba(232,51,42,.35))}
.nav-logo span{font-family:'Anton';text-transform:uppercase;letter-spacing:.12em;font-size:1.05rem}
.nav-links{display:flex;gap:2rem;list-style:none}
.nav-links a{
  color:var(--gris);text-decoration:none;text-transform:uppercase;
  font-size:.72rem;letter-spacing:.25em;transition:color .25s;
}
.nav-links a:hover{color:var(--rojo)}
.nav-toggle{display:none;background:none;border:none;color:var(--blanco);font-size:1.5rem;cursor:pointer}

/* ====== hero ====== */
.hero{
  height:100svh;min-height:640px;
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;text-align:center;
}
#grano{position:absolute;inset:0;width:100%;height:100%;transition:opacity .8s}
body.tv-on #grano{opacity:.16}   /* con la TV encendida, el grano queda como textura sutil */

/* ====== la TV gigante del hero ====== */
.tv{
  position:absolute;inset:0;overflow:hidden;
  opacity:0;visibility:hidden;transition:opacity 1s;
}
body.tv-on .tv{opacity:1;visibility:visible}
.tv iframe, #tv-player{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  /* cubrir el hero manteniendo 16:9 */
  width:max(100vw,177.78svh);height:max(100svh,56.25vw);
  pointer-events:none;border:0;
}
.tv-veil{
  position:absolute;inset:0;background:rgba(5,5,5,.52);
  opacity:0;visibility:hidden;transition:opacity 1s;
}
body.tv-on .tv-veil{opacity:1;visibility:visible}

/* flash de tubo catódico al encender/apagar */
.crt-flash{
  position:absolute;inset:0;background:#fff;z-index:3;
  opacity:0;pointer-events:none;
}
.crt-flash.encendido{animation:crt-on .55s ease-out}
.crt-flash.apagado{animation:crt-off .45s ease-in}
@keyframes crt-on{
  0%{opacity:1;transform:scaleY(.004)}
  55%{opacity:1;transform:scaleY(1)}
  100%{opacity:0;transform:scaleY(1)}
}
@keyframes crt-off{
  0%{opacity:.9;transform:scaleY(1)}
  60%{opacity:1;transform:scaleY(.004)}
  100%{opacity:0;transform:scaleY(.002)}
}

/* la perilla de TV vieja */
.tv-switch{
  position:absolute;top:1.4rem;right:1.4rem;z-index:4;
  width:62px;height:62px;padding:0;
  background:none;border:none;cursor:pointer;
}
.tv-switch::after{                 /* el LED de encendido */
  content:'';position:absolute;left:50%;bottom:-13px;
  width:7px;height:7px;margin-left:-3.5px;border-radius:50%;
  background:#3a0e0e;border:1px solid #000;
  transition:all .4s;
}
.tv-switch.prendido::after{background:var(--rojo);box-shadow:0 0 10px var(--rojo)}
.perilla{
  display:block;width:100%;height:100%;border-radius:50%;position:relative;
  /* borde moleteado de perilla vieja */
  background:repeating-conic-gradient(#141416 0deg 7deg, #34343a 7deg 14deg);
  box-shadow:
    inset 0 0 0 8px #0c0c0e,
    inset 0 0 0 10px #3b3b41,
    inset 0 0 0 26px #19191c,
    inset 0 2px 4px rgba(255,255,255,.08),
    0 5px 14px rgba(0,0,0,.7);
  border:2px solid #000;
  transform:rotate(-48deg);
  transition:transform .55s cubic-bezier(.34,1.6,.64,1);   /* giro con resorte */
}
.tv-switch:not(.prendido) .perilla{animation:perilla-invita 3s ease-in-out infinite}
@keyframes perilla-invita{50%{box-shadow:
  inset 0 0 0 8px #0c0c0e, inset 0 0 0 10px #3b3b41, inset 0 0 0 26px #19191c,
  inset 0 2px 4px rgba(255,255,255,.08), 0 5px 14px rgba(0,0,0,.7), 0 0 18px rgba(232,51,42,.5)}}
.perilla-marca{                     /* la rayita indicadora */
  position:absolute;top:6px;left:50%;
  width:4px;height:15px;margin-left:-2px;border-radius:2px;
  background:#cfcfc9;box-shadow:0 0 3px rgba(0,0,0,.8);
}
.tv-switch.prendido .perilla{transform:rotate(48deg)}
.tv-switch.prendido .perilla-marca{background:var(--rojo);box-shadow:0 0 8px var(--rojo)}
.tv-switch:hover .perilla{box-shadow:
  inset 0 0 0 8px #0c0c0e, inset 0 0 0 10px #3b3b41, inset 0 0 0 26px #19191c,
  inset 0 2px 4px rgba(255,255,255,.08), 0 5px 14px rgba(0,0,0,.7), 0 0 14px rgba(232,51,42,.7)}
@keyframes invita{50%{text-shadow:0 0 14px var(--rojo);transform:scale(1.12)}}

/* mini-interruptor en la nav (visible solo con la TV encendida) */
.tv-nav{
  background:none;border:1px solid var(--rojo);color:var(--rojo);
  font:600 .68rem 'Inter';letter-spacing:.2em;text-transform:uppercase;
  padding:.35rem .8rem;border-radius:99px;cursor:pointer;
  animation:invita 2.6s ease-in-out infinite;
}
.tv-nav:hover{background:var(--rojo);color:#fff}
.hero-contenido{position:relative;z-index:2;padding:0 4vw}
.hero-logo{
  width:clamp(150px,26vmin,250px);
  margin-bottom:1.4rem;
  opacity:0;transform:scale(1.5);
  animation:emblema 1.6s cubic-bezier(.16,1,.3,1) .2s forwards,
            latido 5s ease-in-out 2s infinite;
}
@keyframes emblema{to{opacity:1;transform:scale(1)}}
@keyframes latido{
  0%,100%{filter:drop-shadow(0 0 12px rgba(232,51,42,.25))}
  50%{filter:drop-shadow(0 0 32px rgba(232,51,42,.55))}
}
.hero h1{
  font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:clamp(3rem,12vw,9.5rem);
  letter-spacing:.04em;line-height:1;
}
.hero h1 .letra{
  display:inline-block;opacity:0;transform:translateY(60px);
  animation:entra .9s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes entra{to{opacity:1;transform:translateY(0)}}
.hero .linea{
  width:0;height:3px;background:var(--rojo);margin:1.5rem auto;
  animation:linea 1.2s 1.9s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes linea{to{width:min(420px,70vw)}}
.hero .sub{
  text-transform:uppercase;letter-spacing:.5em;
  font-size:clamp(.65rem,2vw,.95rem);color:var(--gris);
  opacity:0;animation:fade 1s 2.3s forwards;
}
.hero-cta{
  display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2.6rem;
  opacity:0;animation:fade 1s 2.7s forwards;
}
@keyframes fade{to{opacity:1}}
.scroll-hint{
  position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);z-index:2;
  color:var(--gris);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;
  animation:flota 2.2s ease-in-out infinite;
}
@keyframes flota{50%{transform:translateX(-50%) translateY(10px)}}

/* ====== secciones ====== */
main{position:relative;z-index:1}
section{padding:7.5rem 6vw;max-width:1100px;margin:0 auto}
.reveal{opacity:0;transform:translateY(50px);transition:all 1s cubic-bezier(.16,1,.3,1)}
.reveal.visible{opacity:1;transform:none}
.titulo-seccion{
  font-family:'Anton';text-transform:uppercase;
  font-size:clamp(1.8rem,5vw,3.2rem);letter-spacing:.05em;
  margin-bottom:2.6rem;position:relative;display:inline-block;
}
.titulo-seccion::after{
  content:'';position:absolute;left:0;bottom:-10px;
  width:56px;height:3px;background:var(--rojo);
}

/* números gigantes */
.numeros{display:flex;gap:4rem 5rem;flex-wrap:wrap;justify-content:center;text-align:center}
.num b{
  font-family:'Anton';font-size:clamp(4rem,10vw,8rem);
  color:var(--rojo);display:block;line-height:1;
}
.num span{text-transform:uppercase;letter-spacing:.3em;font-size:.78rem;color:var(--gris)}

/* tipografía cinética */
.frase{
  font-family:'Anton';text-transform:uppercase;
  font-size:clamp(2.2rem,7vw,5.5rem);line-height:1.05;max-width:900px;
}
.frase-media{font-size:clamp(1.7rem,4.5vw,3.4rem);margin-bottom:2rem}
.frase em{font-style:normal;color:var(--rojo)}
.frase .chica{
  display:block;font-family:'Inter';font-weight:300;text-transform:none;
  font-size:clamp(1rem,2.5vw,1.3rem);color:var(--gris);
  letter-spacing:0;margin-top:2rem;max-width:60ch;line-height:1.7;
}

/* timeline */
.tl{position:relative;padding-left:3rem;border-left:2px solid var(--linea)}
.hito{margin-bottom:4rem;position:relative}
.hito:last-child{margin-bottom:0}
.hito::before{
  content:'';position:absolute;left:calc(-3rem - 7px);top:.6rem;
  width:12px;height:12px;background:var(--rojo);border-radius:50%;
  box-shadow:0 0 18px var(--rojo);
}
.hito .anio{font-family:'Anton';font-size:clamp(2.2rem,6vw,3.6rem);line-height:1}
.hito p{color:var(--gris);margin-top:.6rem;max-width:55ch;line-height:1.7}
.hito em{color:var(--blanco);font-style:italic}

/* bio */
.bio p{color:#aaa;line-height:1.8;max-width:68ch;margin-bottom:1.1rem}
.bio strong{color:var(--blanco);font-weight:600}
.afines{letter-spacing:.04em;color:var(--gris)}

/* discografía */
.discos{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;margin-bottom:3rem}
.discos li{
  border:1px solid var(--linea);background:rgba(17,17,17,.7);
  padding:1.3rem 1.4rem;position:relative;overflow:hidden;
  transition:border-color .3s, transform .3s;
}
.discos li:hover{border-color:var(--rojo);transform:translateY(-4px)}
.discos li::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:2px;
  background:var(--rojo);transition:width .35s;
}
.discos li:hover::after{width:100%}
.discos b{font-family:'Anton';font-size:1.9rem;color:var(--rojo);display:block;line-height:1}
.discos div{font-weight:600;margin:.5rem 0 .25rem;line-height:1.3}
.discos span{font-size:.74rem;text-transform:uppercase;letter-spacing:.2em;color:var(--gris)}

/* ====== La Ruta: timeline horizontal viajable ====== */
.seccion-ruta{
  max-width:none;               /* full-bleed: la ruta se sale del molde */
  padding-left:0;padding-right:0;
}
.ruta-head{max-width:1100px;margin:0 auto;padding:0 6vw}
.ruta-sub{color:var(--gris);margin-top:.4rem;letter-spacing:.04em}
.ruta-sub b{color:var(--rojo);font-family:'Anton';font-size:1.25em;letter-spacing:.05em}

/* riel de años clickeable */
.ruta-rail{
  display:flex;gap:2px;align-items:flex-end;
  max-width:1100px;margin:2rem auto .8rem;padding:0 6vw;
  overflow-x:auto;scrollbar-width:none;
}
.ruta-rail::-webkit-scrollbar{display:none}
.ruta-rail button{
  flex:1;min-width:24px;background:none;border:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  color:var(--gris);font:600 10px 'Inter';padding:4px 0;
}
.ruta-rail button i{
  width:100%;background:#2a2a2a;border-radius:1px;
  height:calc(6px + var(--peso) * 2.2px);   /* barra ∝ cantidad de fechas */
  transition:background .2s;
}
.ruta-rail button:hover i{background:var(--gris)}
.ruta-rail button.activo{color:var(--blanco)}
.ruta-rail button.activo i{background:var(--rojo);box-shadow:0 0 10px var(--rojo)}
.ruta-rail button span{transform:rotate(-55deg);transform-origin:center;height:26px;display:grid;place-items:end}

/* pista horizontal con vagones por año */
.ruta-viaje{position:relative}
.ruta-pista{
  display:flex;gap:0;
  overflow-x:auto;scroll-snap-type:x mandatory;
  cursor:grab;scrollbar-width:none;
  padding:1.5rem 0 2rem;
  /* la línea roja de la ruta */
  background:linear-gradient(to bottom, transparent 86px, var(--rojo) 86px, var(--rojo) 88px, transparent 88px);
}
.ruta-pista::-webkit-scrollbar{display:none}
.ruta-pista.arrastrando{cursor:grabbing;scroll-snap-type:none}
.ruta-anio{
  flex:0 0 min(86vw,460px);
  scroll-snap-align:center;
  padding:0 2.2rem;position:relative;
}
.ruta-anio::before{       /* la parada en la ruta */
  content:'';position:absolute;top:64px;left:50%;transform:translateX(-50%);
  width:14px;height:14px;border-radius:50%;
  background:var(--rojo);box-shadow:0 0 18px var(--rojo);
}
.ruta-anio .num-anio{
  font-family:'Anton';font-size:clamp(2.4rem,6vw,3.6rem);
  text-align:center;line-height:1;margin-bottom:2.2rem;
  color:var(--blanco);
}
.ruta-anio .cuantas{
  text-align:center;color:var(--gris);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.3em;margin-bottom:1.3rem;
}
.ruta-shows{display:grid;gap:.6rem;max-height:380px;overflow-y:auto;padding-right:4px}
.ruta-shows::-webkit-scrollbar{width:4px}
.ruta-shows::-webkit-scrollbar-thumb{background:#333;border-radius:2px}
.ruta-show{
  border:1px solid var(--linea);background:rgba(17,17,17,.85);
  border-left:3px solid var(--rojo);
  padding:.7rem .9rem;font-size:.84rem;line-height:1.45;
}
.ruta-show .con{
  display:flex;flex-wrap:wrap;gap:4px;margin-top:.45rem;
}
.ruta-show .con i{
  font-style:normal;font-size:.66rem;color:var(--gris);
  border:1px solid var(--linea);border-radius:99px;padding:1px 8px;
  text-transform:uppercase;letter-spacing:.05em;
}
.ruta-flecha{
  position:absolute;top:46%;z-index:5;
  width:46px;height:46px;border-radius:50%;
  background:rgba(10,10,10,.85);border:1px solid var(--linea);color:var(--blanco);
  font-size:1.5rem;cursor:pointer;transition:all .2s;
}
.ruta-flecha:hover{border-color:var(--rojo);color:var(--rojo)}
#ruta-prev{left:max(1vw,8px)}
#ruta-next{right:max(1vw,8px)}
@media (max-width:760px){.ruta-flecha{display:none}}  /* en mobile se viaja con el dedo */

/* ====== tienda ====== */
.tienda-sub{color:var(--gris);margin-bottom:2rem;max-width:60ch;line-height:1.6}
.tienda-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.2rem}
.tienda-item{
  border:1px solid var(--linea);background:rgba(17,17,17,.85);
  display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .3s, transform .3s;
}
.tienda-item:hover{border-color:var(--rojo);transform:translateY(-4px)}
.tienda-foto{
  aspect-ratio:1;background:var(--negro2);display:grid;place-items:center;
  overflow:hidden;border-bottom:1px solid var(--linea);position:relative;
}
.tienda-foto img{width:100%;height:100%;object-fit:cover}
.tienda-foto .sin-foto{font-size:3rem;opacity:.25}
.tienda-agotado{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(5,5,5,.72);
}
.tienda-agotado span{
  font-family:'Anton';text-transform:uppercase;letter-spacing:.3em;
  color:var(--rojo);border:2px solid var(--rojo);padding:.4rem 1.2rem;
  transform:rotate(-8deg);
}
.tienda-info{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.tienda-info h3{font-family:'Anton';font-size:1.05rem;letter-spacing:.04em;text-transform:uppercase}
.tienda-info .desc{color:var(--gris);font-size:.82rem;line-height:1.5;flex:1}
.tienda-precios{display:flex;gap:1rem;font-family:'Anton';font-size:1.05rem}
.tienda-precios span small{color:var(--gris);font-family:'Inter';font-weight:300;font-size:.68rem;display:block;letter-spacing:.15em;text-transform:uppercase}
.tienda-botones{display:grid;gap:.45rem;margin-top:.4rem}
.tienda-botones a{
  text-align:center;text-decoration:none;font:600 .7rem 'Inter';
  text-transform:uppercase;letter-spacing:.18em;padding:.65rem;
  border:1px solid var(--blanco);color:var(--blanco);transition:all .25s;
}
.tienda-botones a:hover{background:var(--rojo);border-color:var(--rojo)}
.tienda-botones a.btn-mp{border-color:#19b5e3;color:#19b5e3}
.tienda-botones a.btn-mp:hover{background:#19b5e3;color:#06222d}

/* discos clickeables + modal con player de Bandcamp */
.pista-discos{color:var(--gris);font-size:.85rem;letter-spacing:.04em;margin-bottom:1.2rem}
.discos li[data-bc]{cursor:pointer;border-left:3px solid var(--rojo)}
.discos li[data-bc] div::after{content:' ▶';color:var(--rojo);font-size:.8em}
.modal-disco{
  position:fixed;inset:0;z-index:200;
  background:rgba(5,5,5,.88);backdrop-filter:blur(6px);
  display:grid;place-items:center;padding:4vh 4vw;
  animation:fade .25s;
}
.modal-disco[hidden]{display:none}
.modal-disco-caja{
  position:relative;background:var(--negro2);border:1px solid var(--linea);
  width:min(420px,94vw);max-height:90vh;overflow-y:auto;
  padding:1.2rem;text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.8), 0 0 40px rgba(232,51,42,.12);
}
.modal-disco-caja h3{
  font-family:'Anton';text-transform:uppercase;letter-spacing:.05em;
  font-size:1.15rem;margin:0 2rem .9rem;
}
.modal-cerrar{
  position:absolute;top:.6rem;right:.6rem;
  background:none;border:1px solid var(--linea);color:var(--blanco);
  width:34px;height:34px;cursor:pointer;font-size:1rem;transition:all .2s;
}
.modal-cerrar:hover{background:var(--rojo);border-color:var(--rojo)}
#modal-player iframe{width:100%;height:64vh;min-height:430px;border:0;display:block}
#modal-bc-link{margin-top:1rem;padding:.7rem 1.6rem;font-size:.68rem}

/* embeds */
.embed{border:1px solid var(--linea);background:var(--negro2);padding:.6rem}
.embed iframe{width:100%;border:0;display:block}
.video-marco{aspect-ratio:16/9}
.video-marco iframe{width:100%;height:100%}
.plataformas{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.6rem}
.link-mas{margin-top:1.4rem}
.link-mas a,#contacto a{color:var(--blanco);text-decoration:none;border-bottom:1px solid var(--rojo);padding-bottom:2px;transition:color .25s}
.link-mas a:hover,#contacto a:hover{color:var(--rojo)}

/* fechas */
.fechas{list-style:none}
.fechas li{
  display:flex;align-items:center;gap:2rem;flex-wrap:wrap;
  border-bottom:1px solid var(--linea);padding:1.4rem 0;
}
.fechas .fecha{font-family:'Anton';font-size:1.6rem;color:var(--rojo);min-width:110px}
.fechas .lugar{flex:1;font-weight:600}
.sin-fechas{color:var(--gris);font-style:italic}

/* contacto */
.contacto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:3rem}
.contacto-grid h3{
  font-family:'Anton';text-transform:uppercase;letter-spacing:.08em;
  font-size:1.1rem;margin-bottom:1rem;color:var(--blanco);
}
.contacto-grid p{margin-bottom:.8rem;color:var(--gris)}
.mail{font-size:1.15rem;font-weight:600}
.redes{display:flex;gap:1.4rem;flex-wrap:wrap}

/* botones */
.btn-fantasma{
  display:inline-block;padding:.95rem 2.4rem;
  border:1px solid var(--blanco);color:var(--blanco);
  text-decoration:none;text-transform:uppercase;letter-spacing:.25em;font-size:.74rem;
  transition:all .3s;background:transparent;
}
.btn-fantasma:hover{background:var(--rojo);border-color:var(--rojo);color:#fff}
.btn-fantasma.lleno{background:var(--rojo);border-color:var(--rojo)}
.btn-fantasma.lleno:hover{background:transparent;color:var(--blanco);border-color:var(--blanco)}
center{margin-top:1rem}

/* footer */
.footer{
  position:relative;z-index:1;text-align:center;
  padding:5rem 6vw 3.5rem;border-top:1px solid var(--linea);
}
.footer-logo{
  width:92px;opacity:.85;margin-bottom:1.6rem;
  filter:drop-shadow(0 0 14px rgba(232,51,42,.3));
}
.footer .marca{font-family:'Anton';text-transform:uppercase;letter-spacing:.15em;margin-bottom:.5rem}
.footer .auto{color:var(--gris);font-size:.85rem}

/* ====== responsive ====== */
@media (max-width:760px){
  .nav-toggle{display:block}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;background:rgba(10,10,10,.97);
    border-bottom:1px solid var(--linea);
  }
  .nav-links.abierto{display:flex}
  .nav-links a{display:block;padding:1.1rem 5vw}
  section{padding:5.5rem 6vw}
  .tl{padding-left:2rem}
  .hito::before{left:calc(-2rem - 7px)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .hero-logo,.hero .sub,.hero-cta{opacity:1;transform:none}
  .hero .linea{width:min(420px,70vw)}
}