/* ============================================================
   DR. FLAC — online-vrtl
   Tipografías (locales): Gridular (títulos) · RMNeue-SemiBold (bajadas) · RMMono (resto)
   ============================================================ */

/* 'block' y no 'swap' en la tipografía de titulares: con swap el navegador dibuja el
   texto con la de respaldo y lo cambia cuando llega Gridular, y eso se veía feo justo
   donde más se nota — el contador del loading arrancaba en otra letra y saltaba. Con
   block el texto no se dibuja hasta tener la tipografía correcta. */
@font-face{font-family:'Gridular';src:url('../fonts/Gridular-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:block;}
/* RMNeue viene en dos pesos. El 600 es el de siempre (bajadas); el 400 estaba en
   fonts/ pero sin declarar — lo usan las citas del menú. */
@font-face{font-family:'RMNeue';src:url('../fonts/RMNeue-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'RMNeue';src:url('../fonts/RMNeue-SemiBold.otf') format('opentype');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'RMMono';src:url('../fonts/RMMono-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap;}

:root{
  --seashell:#f1f1f1;--dark:#1e1e1e;--orange:#fd5530;--charcoal:#363636;--timberwolf:#d5d1ce;--white:#ffffff;
  --display:'Gridular',system-ui,sans-serif;
  --sub:'RMNeue',system-ui,sans-serif;
  --mono:'RMMono',ui-monospace,monospace;
  --fs-large:clamp(1.8rem, 9vw, 10rem);
  --fs-med:clamp(1.55rem, 5.4vw, 4.4rem);
  --fs-reg:clamp(1.15rem, 2.7vw, 2.3rem);
  --fs-p-med:clamp(1.02rem, 1.6vw, 1.5rem);
  --fs-eyebrow:clamp(.7rem, .8vw, .8rem);
  --fs-body:clamp(.9rem, 1.02vw, 1.02rem);
  /* la lista de temas es la MISMA en el loader y en el menú: un solo tamaño */
  --fs-track:clamp(.68rem, .9vw, .82rem);
  --pad:1.25rem;--ease-cut:cubic-bezier(0.16,1,0.3,1);--app-height:100vh;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;}
html.lenis{height:auto;}
html.lenis body{overflow:hidden;}
/* Con el loader arriba la página de atrás queda quieta (ver lockScroll en js/main.js).
   'touch-action:none' frena el arrastre del navegador, NO los eventos: el puntero, el
   gusano y el click de entrada siguen llegando igual. El !important le gana a la regla
   de arriba de lenis, que también toca el overflow del body. */
html.no-scroll,html.no-scroll body{overflow:hidden!important;overscroll-behavior:none;
  touch-action:none;}
body{margin:0;background:var(--seashell);color:var(--dark);font-family:var(--sub);
  font-size:var(--fs-body);line-height:1.5;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;overflow-x:hidden;}
body::-webkit-scrollbar{width:0;display:none;}
body{scrollbar-width:none;}
/* sin selección de texto en todo el sitio; -webkit-touch-callout mata además el menú
   de "guardar imagen" que sale al dejar el dedo apretado en mobile */
html{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
  -webkit-touch-callout:none;
  /* mata el recuadro celeste que Android/iOS pintan sobre lo que tocás */
  -webkit-tap-highlight-color:transparent;}
button,a,[role="button"]{-webkit-tap-highlight-color:transparent;}
button{background:none;border:0;color:inherit;font:inherit;}
:focus:not(:focus-visible){outline:none;}
/* las imágenes no se arrastran ni reciben el long-press: el gusano trabaja sobre la
   grilla que va encima, así que no necesitan eventos propios */
img{display:block;max-width:100%;-webkit-user-drag:none;pointer-events:none;
  -webkit-touch-callout:none;}
a{color:inherit;text-decoration:none;}

/* ---------- TIPOGRAFÍA ---------- */
/* EL 'min(...,9vw)' ES CONTRA EL TAMAÑO DE FUENTE DEL SISTEMA, y sin él el teléfono
   parte las palabras largas. Pasa así:
   --fs-large es clamp(1.8rem, 9vw, 10rem). El 9vw del medio es el que hace el trabajo
   en un teléfono y está calculado para que la palabra más larga —MANTENIMIENTO, 13
   letras— entre justa en el ancho. Pero el usuario puede subirle el cuerpo de letra al
   sistema, y ahí el rem crece mientras el vw no: con el tamaño en 125% el rem pasa de
   16 a 20 px, el piso de 1.8rem sube a 36 px y le GANA al 9vw de 33,75. La palabra
   crece un 7% sin que la pantalla crezca nada y se le cae la última letra al renglón
   de abajo. Medido: a 125% se parte MANTENIMIENTO, a 150% INSTRUMENTO cae en tres
   renglones.
   El min() le pone de techo el mismo 9vw, que es la medida que sí sabe cuánto entra.
   Con el sistema en 100% no cambia UN PÍXEL en ningún ancho —comprobado en 375, 1280,
   1920 y 2560— porque ahí el 9vw ya es el que manda o el tope de 10rem queda por
   debajo. Solo actúa cuando alguien agrandó la letra, que es cuando hace falta.
   Vale para los ocho títulos grandes y no solo para el hero: 'especializado' del CTA
   tenía el mismo problema. */
.h-display,.h-large{font-family:var(--display);font-weight:400;font-size:min(var(--fs-large),9vw);
  line-height:.94;letter-spacing:-.01em;text-transform:uppercase;margin:0;overflow-wrap:break-word;}
.h-med{font-family:var(--display);font-weight:400;font-size:var(--fs-med);
  line-height:1;letter-spacing:-.01em;margin:0;text-transform:uppercase;}
.p-med{font-family:var(--sub);font-weight:600;font-size:var(--fs-p-med);line-height:1.4;margin:0;}
.eyebrow{font-family:var(--mono);font-weight:400;font-size:var(--fs-eyebrow);line-height:1.1;
  letter-spacing:.14em;text-transform:uppercase;position:relative;margin:0;}
.eyebrow.greyed{opacity:.4;}
.text-highlight{font-family:var(--sub);font-weight:600;font-size:var(--fs-reg);line-height:1.25;margin:0;overflow-wrap:break-word;}
.is--alt{font-family:inherit;}
.is--orange{color:var(--orange);}
.is--mono{font-family:var(--mono)!important;font-weight:400!important;text-transform:none;letter-spacing:0;}

.menu-link,.footer-link,.main-btn{transition:color .3s var(--ease-cut);}
.menu-link:hover,.footer-link:hover,.main-btn:hover{color:var(--orange);}
.cta-big{transition:color .3s var(--ease-cut);}
.cta-big:hover{color:var(--white);}

/* ---------- LAYOUT ---------- */
.p-pad{padding-left:var(--pad);padding-right:var(--pad);}
.section{position:relative;z-index:1;}
.section.is--black{background:var(--dark);color:var(--seashell);}
/* padding simétrico arriba y abajo: el bloque queda realmente centrado en el naranja
   (antes solo había padding-bottom, y adentro un .v-space-med que lo empujaba hacia abajo) */
.section.is--cta{background:var(--orange);color:var(--dark);text-align:center;
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding-top:5rem;padding-bottom:5rem;}
.main-g{display:grid;grid-template-columns:repeat(12,1fr);column-gap:1.25rem;align-items:start;width:100%;}
.col-span-4{grid-column:span 4;}
.col-span-6{grid-column:span 6;}
.align-center{display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;}
.center-text{text-align:center;}
.flex-v{display:flex;flex-direction:column;}
.gap-m{gap:1.25rem;}
.v-space-small{height:clamp(3rem,8vw,8rem);}
.v-space-med{height:clamp(4.5rem,12vw,12rem);}
.v-space-large{height:clamp(6rem,16vw,16rem);}

/* ---------- CORTES CLIP-PATH ---------- */
[cut="2em"]{clip-path:polygon(0 2.2em,2.2em 0,calc(100% - 2.2em) 0,100% 2.2em,100% calc(100% - 2.2em),calc(100% - 2.2em) 100%,2.2em 100%,0 calc(100% - 2.2em));}
[cut="btn"]{clip-path:polygon(0 .9em,.9em 0,calc(100% - .9em) 0,100% .9em,100% calc(100% - .9em),calc(100% - .9em) 100%,.9em 100%,0 calc(100% - .9em));}

/* ============================================================
   IMÁGENES — máscara exterior animada + parallax + naranja + grilla
   ============================================================ */
.ep-visual{position:relative;}
/* La máscara que se abre y se cierra con el scroll es ESTA, la exterior: el mismo
   octógono de [cut="2em"] pero con un inset animado (--mi). Al recortar acá, la
   grilla del gusano queda recortada con la foto y no puede pintar sobre el fondo.
   --mi: 25% (cerrada) -> 0% (abierta) · --cc: tamaño del corte de esquina.
   isolation:isolate -> el grupo de fusión termina en la caja, igual que en vrtl. */
.boxed-img{position:relative;overflow:hidden;aspect-ratio:4/5;background:transparent;isolation:isolate;
  --mi:0%;--cc:2.2em;}
.boxed-img[cut]{clip-path:polygon(
  var(--mi)                            calc(var(--mi) + var(--cc)),
  calc(var(--mi) + var(--cc))          var(--mi),
  calc(100% - var(--mi) - var(--cc))   var(--mi),
  calc(100% - var(--mi))               calc(var(--mi) + var(--cc)),
  calc(100% - var(--mi))               calc(100% - var(--mi) - var(--cc)),
  calc(100% - var(--mi) - var(--cc))   calc(100% - var(--mi)),
  calc(var(--mi) + var(--cc))          calc(100% - var(--mi)),
  var(--mi)                            calc(100% - var(--mi) - var(--cc))
);}
.img-mask{position:absolute;inset:0;overflow:hidden;background:var(--dark);}
.img-mask .img-cover{position:absolute;left:0;top:0;width:100%;height:120%;object-fit:cover;}

/* ---------- CAPA NARANJA — misma receta que .overlay-screen de vrtl ----------
   naranja pleno #fd5530 con mix-blend-mode:screen. En vrtl está siempre encendida;
   acá la foto se ve limpia y el fx entra al pasar el mouse por encima. */
.overlay-screen{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--orange);mix-blend-mode:screen;}
.boxed-img .overlay-screen{opacity:0;transition:opacity .5s var(--ease-cut);}
/* .is-drawing es el equivalente táctil de :hover — lo pone el JS mientras el dedo
   está apoyado, y se va al soltar. */
.boxed-img.is-drawing .overlay-screen{opacity:1;}
/* El :hover va SOLO en dispositivos que de verdad tienen puntero: en táctil el
   navegador deja el :hover pegado en lo último que tocaste, así que el naranja
   quedaba encendido después de soltar en vez de volver a la foto cruda. */
@media (hover:hover) and (pointer:fine){
  .boxed-img:hover .overlay-screen{opacity:1;}
}

/* ---------- GRILLA 'GUSANO' — copia literal de .img-grid__w / .img-grid__item ----------
   El blend OVERLAY va en el CONTENEDOR y las celdas son BLANCAS (no naranjas con screen):
   overlay(fondo, blanco) duplica el fondo hasta quemarlo, que es el destello de vrtl.
   La grilla recibe eventos (sin pointer-events:none): cada celda se enciende con su
   propio mouseenter, como en el sitio original. */
.img-grid{position:absolute;inset:0;z-index:2;display:grid;mix-blend-mode:overlay;
  grid-auto-columns:1fr;justify-content:center;align-items:center;}
/* la grilla se apaga junto con el naranja: si no, la estela que quedó viva al salir
   destellaría en blanco sobre la foto ya limpia. Entra rápido, sale con el naranja. */
.boxed-img .img-grid{opacity:0;transition:opacity .5s var(--ease-cut);}
.boxed-img.is-drawing .img-grid{opacity:1;transition-duration:.12s;}
@media (hover:hover) and (pointer:fine){
  .boxed-img:hover .img-grid{opacity:1;transition-duration:.12s;}
}
.img-cell{background-color:#fff;opacity:0;width:100%;height:100%;
  transition:opacity .4s cubic-bezier(.645,.045,.355,1);}
.img-cell.active{opacity:1;}
/* ---------- INTERFAZ DEL FX (táctil) ----------
   Reposo: foto cruda, sin nada arriba ni abajo, y al centro el disco naranja con
   TAP / HOLD / MOVE. Con el dedo apoyado: se va el disco, entra el gusano y abajo
   aparecen nombre y parámetros. Al soltar, vuelve el reposo.
   Todo cuelga de .ep-visual y no de .boxed-img: el clip-path de la caja se anima con
   el scroll y recortaría cualquier cosa que estuviera adentro. Como son hermanos
   posteriores a .boxed-img, el selector ~ permite reaccionar a .is-drawing. */
.ep-visual{isolation:isolate;}   /* el grupo de fusión del disco termina acá */

/* Apoyo del disco: mismo círculo, misma medida, justo debajo y SIN blend. El disco
   lleva 'screen', que solo puede aclarar, así que contra una foto clara el cartel se
   perdía; este naranja al 50% sí tapa. Solo dentro del círculo — el resto de la foto
   queda cruda. Se va con el cartel: apenas el dedo dibuja, no queda nada encima. */
.fx-scrim{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:4;width:5.8rem;height:5.8rem;border-radius:50%;
  background:var(--orange);pointer-events:none;
  opacity:0;transition:opacity .35s var(--ease-cut);}
.fx-scrim.is-in{opacity:.5;}
.boxed-img.is-drawing ~ .fx-scrim{opacity:0;}

/* el disco lleva el mismo mix-blend-mode:screen que el cursor de desktop */
.fx-orb{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:5;width:5.8rem;height:5.8rem;border-radius:50%;
  background:var(--orange);mix-blend-mode:screen;pointer-events:none;
  opacity:0;transition:opacity .35s var(--ease-cut);}

/* El texto va en capa APARTE del disco: adentro, el 'screen' del disco lo empastaría.
   Blanco pasado por overlay, igual que la lectura del cursor en desktop — se funde
   con el naranja y queda amarillento en vez de blanco duro. */
.fx-orb-txt{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:7;display:flex;flex-direction:column;align-items:center;
  color:#fff;mix-blend-mode:overlay;font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;
  line-height:1.55;text-transform:uppercase;pointer-events:none;
  opacity:0;transition:opacity .35s var(--ease-cut);}

.fx-orb.is-in,.fx-orb-txt.is-in{opacity:1;}
.boxed-img.is-drawing ~ .fx-orb,
.boxed-img.is-drawing ~ .fx-orb-txt{opacity:0;}

/* lectura de abajo: existe SOLO mientras el dedo está apoyado.
   gap de 5ch = exactamente cinco caracteres de la mono. */
.fx-readout{position:absolute;left:0;right:0;bottom:1.5rem;z-index:7;
  display:flex;flex-wrap:wrap;justify-content:center;gap:.35em 5ch;padding:0 .8rem;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;mix-blend-mode:overlay;      /* mismo tratamiento que el texto del cursor */
  opacity:0;transition:opacity .3s var(--ease-cut);pointer-events:none;}
.boxed-img.is-drawing ~ .fx-readout{opacity:1;}

/* ---------- MÚSICA EN [ off ]: mismo visual, sin lectura ----------
   Sin sonido los números no informan nada — el gusano y el disco se quedan, el texto
   del efecto se va. Vale para el círculo de desktop y para la barra de táctil. */
body.sound-off .cursor-fx.is-on{display:none;}
body.sound-off .fx-readout{opacity:0!important;}

/* ============================================================
   ECHO DEL LOGO
   ============================================================ */
.lab-trail{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.lab-trail__img{position:absolute;top:0;left:0;width:clamp(140px,18vw,280px);height:auto;
  opacity:0;will-change:transform,opacity;filter:drop-shadow(0 20px 40px rgba(0,0,0,.4));}
.lab-inner{position:relative;z-index:2;}
/* Sobre CRITERIO el círculo naranja estorba: acá el mouse no es un puntero, es lo que
   arrastra el eco del logo. Se apaga la capa entera (disco + lectura del fx). */
.cursor-w.is-off,.cursor-fx-w.is-off{opacity:0;transition:opacity .35s var(--ease-cut);}

/* ============================================================
   BOTONES
   ============================================================ */
.main-btn{display:inline-flex;align-items:center;gap:.9rem;font-family:var(--mono);
  font-size:var(--fs-eyebrow);text-transform:uppercase;line-height:1;cursor:pointer;}
.main-btn__text{border-bottom:1px solid currentColor;padding-bottom:.3rem;line-height:1;}
.main-btn__arrow{width:1em;height:1em;flex:none;display:flex;align-items:center;justify-content:center;
  border:1px solid currentColor;border-radius:50%;padding:.5em;transition:background .3s,color .3s;}
.main-btn:hover .main-btn__arrow{background:currentColor;color:var(--dark);}
.main-btn__arrow svg{width:100%;height:100%;}
/* los tres botones repartidos en una fila y TODOS del mismo ancho (flex-basis 0), con
   el mismo tope de 22rem que tienen apilados en táctil */
.cta-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2.6rem;}
.cta-actions .cta-btn{flex:1 1 0;max-width:22rem;text-align:center;}
.btn{font-family:var(--mono);font-size:var(--fs-eyebrow);letter-spacing:.04em;text-transform:uppercase;
  padding:1.1em 1.8em;cursor:pointer;transition:transform .2s var(--ease-cut),background .25s,color .25s;}
/* CTA: los 3 arrancan como 'ghost' (borde) y al hover pasan a sólido oscuro */
.cta-btn{border:1px solid var(--dark);color:var(--dark);background:transparent;}
.cta-btn:hover{background:var(--dark);color:var(--seashell);}
/* al presionar queda en el mismo negro del hover, 2s, y recién ahí navega */
.cta-btn.is-active,.wip-btn.is-active{background:var(--dark)!important;color:var(--seashell)!important;border-color:var(--dark)!important;}

/* EN TÁCTIL LOS TRES BOTONES ARRANCAN SÓLIDOS. El fantasma —borde y letra oscuros
   sobre el naranja de la sección— vive de que el hover lo rellene: pasás el mouse por
   encima y recién ahí se lee fuerte. En un teléfono ese hover no existe nunca, así que
   el botón se queda en su estado más flojo para siempre y contra el naranja no se
   distingue. Se le da directamente el estado de llegada: negro con letra clara.
   Y como el negro pasó a ser el reposo, el aviso de 'te escuché' necesita ser otra
   cosa: al presionar se da vuelta al naranja de la sección, con borde y letra blancos.
   El movimiento es el mismo de antes —el botón cambia y recién después navega— pero al
   revés, que es la única forma de que se note cuando ya arrancaba oscuro.
   Va por (hover:none) y no por ancho: lo que rompe el diseño es no tener hover, no
   tener poca pantalla. Una tablet de 900 px tiene el mismo problema que un teléfono. */
@media (hover:none){
  .cta-btn{background:var(--dark);color:var(--seashell);}
  .cta-btn.is-active{background:var(--orange)!important;color:var(--white)!important;
    border-color:var(--white)!important;}
}

/* ============================================================
   LOADER
   ============================================================ */
.loader{position:fixed;inset:0;z-index:1000;background:var(--dark);color:var(--seashell);
  display:flex;flex-direction:column;justify-content:space-between;padding:var(--pad);
  overflow:hidden;clip-path:inset(0 0 0% 0);}

/* el loader no muestra la manito: el cursor es solo el círculo naranja */
.loader__top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;}
.loader__brand{font-family:var(--display);letter-spacing:.12em;text-transform:uppercase;font-size:1rem;}
.loader__brand b{color:var(--orange);}
.loader__tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--timberwolf);max-width:24ch;text-align:right;line-height:1.5;opacity:.65;}
.loader__center{position:absolute;inset:0;display:grid;place-items:center;}
/* mismo tamaño que tenía el cuadro naranja; el recorte de esquinas ahora lo pone
   .boxed-img, así que el marco rectangular de antes sobra */
.loader__imgwrap{width:min(38vw,320px);aspect-ratio:4/5;position:relative;isolation:isolate;}
/* La caja del loader es una .boxed-img común y corriente y se comporta EXACTAMENTE
   igual que las del sitio: cruda en reposo, naranja y gusano al pasar por encima. Lo
   único que se le toca es que ocupe todo el wrap.
   Antes había acá un '.loader .boxed-img .overlay-screen{opacity:1}' que dejaba el
   naranja clavado y le ganaba a las reglas de hover de arriba. Se fue: sin esa línea,
   el loader hereda el fx del sitio sin repetir una sola regla. */
.loader .boxed-img{position:absolute;inset:0;aspect-ratio:auto;max-width:none;margin:0;}
/* sin parallax en el loader: la foto no se desliza, así que no necesita el 120% de alto */
/* SIN TRANSICIÓN: el cambio es un corte seco. Antes había un fundido de 180 ms, y con
   la rotación en 200 ms eso significaba que casi todo el tiempo se estaban viendo dos
   fotos superpuestas en vez de una. Sin transición, cada cuadro se lee entero. */
.loader .img-mask .img-cover{height:100%;opacity:0;}
.loader .img-mask .img-cover.on{opacity:1;}

/* ---------- LISTA DE TEMAS — un solo formato para el loader y el menú ----------
   Cambia el color según el fondo (naranja de la foto / negro del menú), pero la
   tipografía, el tamaño y el espaciado salen de acá y valen en los dos lados. */
.track{font-family:var(--mono);font-weight:400;font-size:var(--fs-track);
  letter-spacing:.14em;text-transform:uppercase;line-height:1.5;width:fit-content;
  cursor:pointer;transition:color .3s var(--ease-cut);}

/* En el loader ya no hay lista: se entra con un click en cualquier lado y el tema es
   el primero de js/tracks.js. La elección de música vive solo en el menú, adentro. */

/* menú: misma lista, fondo negro.
   SIN cambio de color en hover, a propósito. El naranja marca UNA sola cosa —el tema
   que está sonando— y si el hover también pintara, pasar el mouse por la lista se
   leería como si el tema hubiera cambiado. Además el hover pisaba el naranja del
   activo: pasar por encima del tema que ya sonaba lo apagaba a gris. Lo que avisa que
   la lista se puede tocar es la manito del cursor, que sigue estando. */
.menu-tracks{display:flex;flex-direction:column;gap:.7rem;}
.menu-tracks__list{display:flex;flex-direction:column;gap:.15rem;}
.mtrack{color:var(--timberwolf);}
.mtrack.active{color:var(--orange);}

/* La puerta de entrada no es decorativa: es el gesto del usuario que el navegador
   exige para poder arrancar el AudioContext y entrar a pantalla completa. Ahora ese
   gesto es elegir un tema — clickear en cualquier otro lado no entra. */
/* LAS DOS LÍNEAS SE MUEVEN JUNTAS. --enter-bottom es la altura del par, y la segunda
   línea cuelga de la primera con un calc: así el espacio entre las dos es un valor FIJO
   en rem y no un segundo porcentaje. La diferencia importa — un porcentaje de alto de
   ventana vale el doble en una pantalla de 1080 que en una de 700, así que dos
   porcentajes distintos se despegarían solos en cuanto cambia la altura. Para subir o
   bajar el par entero se toca UN número. */
.loader{--enter-bottom:22%;}
.loader__enter{position:absolute;left:0;right:0;bottom:var(--enter-bottom);text-align:center;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--orange);opacity:0;pointer-events:none;transition:opacity .4s;}
.loader.ready .loader__enter{opacity:1;animation:pulse 1.5s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:.35;}50%{opacity:1;}}

/* Segunda línea del cartel de entrada: el aviso de volumen. Los corchetes son los del
   nav y van quietos, sin el latido de la línea de arriba: es un dato, no la puerta.
   EL COLOR CAMBIA SEGÚN EL DISPOSITIVO Y ES A PROPÓSITO. En escritorio va gris —el
   mismo gris del [ off ]: el color del fondo bajado al 40%, no un gris propio— porque
   arriba está el 'tocá para entrar' en naranja y dos naranjas juntos se pelean por el
   ojo. En táctil el 'tocá para entrar' se mudó al disco del centro y esta línea queda
   sola abajo: sin competencia, va en naranja (ver el bloque de (hover:none)).
   Como la opacidad hace de fundido de entrada, el 0.4 vive en la regla de .ready. */
.loader__vol{position:absolute;left:0;right:0;bottom:calc(var(--enter-bottom) - 1.5rem);text-align:center;
  font-family:var(--mono);font-size:var(--fs-eyebrow);letter-spacing:.1em;text-transform:uppercase;
  color:var(--seashell);opacity:0;pointer-events:none;transition:opacity .4s;}
.loader__vol::before{content:"[ ";}
.loader__vol::after{content:" ]";}
.loader.ready .loader__vol{opacity:.4;}

/* EL DISCO DE ENTRADA, SOLO EN TÁCTIL. Las clases son las del cartel de las fotos
   (.fx-scrim / .fx-orb / .fx-orb-txt), así que de allá hereda medida, blend y color y
   acá no se repite ni una. Lo único propio es cuándo se enciende: en el sitio lo
   enciende la zona activa vía JS, en el loader lo enciende el 100% de la carga.
   En escritorio el cursor ya es un disco naranja: un segundo disco fijo sobraría. */
.loader .fx-scrim,.loader .fx-orb,.loader .fx-orb-txt{display:none;}
@media (hover:none){
  .loader .fx-scrim,.loader .fx-orb{display:block;}
  .loader .fx-orb-txt{display:flex;}
  .loader.ready .fx-scrim{opacity:.5;}
  .loader.ready .fx-orb,.loader.ready .fx-orb-txt{opacity:1;}
  /* 'tocá para entrar' se mudó al disco, así que el aviso de volumen ocupa su lugar —y
     su naranja: acá abajo ya no hay con quién competir. Vuelve al bottom del par
     entero, sin el calc que lo colgaba de una línea que ya no está.
     Y el par va más abajo que en escritorio: acá la foto es bastante más alta
     (82vw contra 320px), así que con el 22% de allá esta línea le quedaba encima. */
  .loader{--enter-bottom:19%;}
  .loader__enter{display:none;}
  .loader__vol{bottom:var(--enter-bottom);color:var(--orange);}
  .loader.ready .loader__vol{opacity:1;}
}
.loader__bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;}
/* apagado hasta que el JS escribe el primer número: si no, se ve el '%' solo colgado
   al costado mientras el contador todavía no arrancó */
.loader__count{font-family:var(--display);line-height:.8;font-size:clamp(4rem,16vw,12rem);letter-spacing:-.02em;
  opacity:0;transition:opacity .25s var(--ease-cut);}
.loader.is-counting .loader__count{opacity:1;}
.loader__count sup{font-size:.28em;vertical-align:super;color:var(--orange);}
.loader__label{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--timberwolf);text-align:right;padding-bottom:.6em;opacity:.65;}
.loader.ready .loader__label{color:var(--orange);opacity:1;}
.loader__progress{position:absolute;left:0;bottom:0;height:2px;width:0%;
  background:var(--orange);box-shadow:0 0 12px rgba(253,85,48,.7);}

/* ============================================================
   CURSOR
   ============================================================ */
/* Copia de .cursor-w / .cursor-element de vrtl: el blend 'screen' va en la CAPA fija que
   cubre el viewport (transparente = neutro para screen), y adentro va un único círculo
   naranja centrado por flex, que el JS mueve con transform. El texto vive DENTRO del
   círculo y sube desde translateY(100%). Nada de will-change: crea capas compositadas
   debajo del blend y es justo lo que rompe el repintado en Chromium. */
.cursor-w{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:99999;
  pointer-events:none;mix-blend-mode:screen;
  display:flex;justify-content:center;align-items:center;}
.cursor-element{background-color:var(--orange);border-radius:100em;overflow:hidden;
  display:flex;justify-content:center;align-items:center;width:4.5em;height:4.5em;
  transition:width .5s cubic-bezier(.77,0,.175,1),height .5s cubic-bezier(.77,0,.175,1);}
.cursor-element.show-text{width:6rem;height:6rem;}
/* Sobre una foto el círculo NO se agranda: queda del mismo tamaño que afuera (apenas
   un pelo más, 5em contra 4.5em, para que el nombre respire). Adentro va solo el
   nombre del efecto; los dos parámetros cuelgan por debajo, ya fuera del disco. */
.cursor-element.show-fx{width:5em;height:5em;}
/* Capa propia por encima de .cursor-w. Adentro del círculo el texto pasaba por el
   'screen' del disco y se empastaba con lo que hubiera detrás; acá va aparte. */
.cursor-fx-w{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:100000;
  pointer-events:none;display:flex;justify-content:center;align-items:center;}
/* mismo cuadrado que el disco -> el nombre queda centrado en el círculo y las filas
   se cuelgan por debajo sin correr ese centro */
.cursor-fx{position:relative;width:5em;height:5em;display:none;
  align-items:center;justify-content:center;
  text-align:center;line-height:1.1;white-space:nowrap;}
.cursor-fx.is-on{display:flex;}
.cursor-element.show-fx .cursor-text__w{display:none;}
/* todo en RMMono-Regular y TODO al mismo tamaño: el nombre no se distingue por peso
   ni por cuerpo, se distingue por estar adentro del disco */
.cursor-fx__name{font-family:var(--mono);font-weight:400;font-size:.75rem;letter-spacing:.06em;}
.cursor-fx__rows{position:absolute;left:50%;top:calc(100% + .5em);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.35em;}
.cursor-fx__row{font-family:var(--mono);font-weight:400;font-size:.75rem;letter-spacing:.04em;}

/* ---------- LEGIBILIDAD DEL TEXTO DEL FX ----------
   Blanco pleno pasado por mix-blend-mode:overlay: el texto se funde con la foto y con
   el naranja de abajo, y queda amarillento en vez de duro. Va acá y no adentro del
   disco: el disco lleva 'screen', que solo puede aclarar y empastaría el texto. */
.cursor-fx-w{color:#fff;mix-blend-mode:overlay;}

.cursor-element.hover-btn{width:6em;height:6em;}
.cursor-element.hover-link{width:2em;height:2em;}
/* max-width: vrtl usa etiquetas de dos palabras ("learn more") y le alcanza el ancho del
   círculo; las nuestras son más largas, así que las dejamos envolver en vez de recortarse. */
.cursor-text__w{flex:none;position:relative;overflow:hidden;max-width:5rem;}
.cursor-text{color:#fff;text-transform:uppercase;font-family:var(--mono);
  font-size:.75rem;font-weight:400;line-height:1.07;text-align:center;
  transform:translateY(100%);transition:transform .5s cubic-bezier(.77,0,.175,1);}
.cursor-element.show-text .cursor-text{transform:translate(0%,0%);}
@media (hover:hover) and (pointer:fine){
  html,body,a,button,.menu-btn,.loader,.fs-toggle{cursor:none;}
  /* [ on ] / [ off ] y los temas funcionan como botones: ahí sí va la manito,
     además del círculo (que sobre ellos se achica, igual que en el índice del menú) */
  .fs-opt,.track{cursor:pointer;}
}
/* en táctil no hay ningún círculo: ni el cursor ni la lectura del fx.
   La información va en la barra sobreimpresa y el barrido deja solo el gusano. */
@media (hover:none){ .cursor-w,.cursor-fx-w{display:none;} }

/* ============================================================
   NAVBAR — color según fondo · bajado para no chocar con salir-de-fullscreen
   ============================================================ */
.nav-w{position:fixed;top:0;left:0;width:100%;z-index:800;color:#fff;}
.nav-w.on-light{color:var(--dark);}
.nav-w.on-dark{color:var(--seashell);}
.nav-w.on-orange{color:var(--seashell);}
body.menu-open #navW{color:var(--seashell);}   /* menú abierto (fondo oscuro) -> nav claro */
.navbar-c{display:flex;justify-content:space-between;align-items:center;padding-top:2.7rem;padding-bottom:1.4rem;}
.nav-toggles{display:flex;align-items:center;gap:1.8rem;}   /* full screen · sonido */
.fs-toggle{display:flex;align-items:center;cursor:pointer;pointer-events:auto;
  font-family:var(--mono);font-size:var(--fs-eyebrow);text-transform:uppercase;letter-spacing:.1em;color:inherit;}
.fs-label{margin-right:2ch;}   /* dos caracteres más de separación */
.fs-opts{display:flex;gap:.5rem;}
.fs-opt{opacity:.4;transition:opacity .25s,color .25s;pointer-events:auto;}
.fs-opt.active{opacity:1;color:var(--orange);}
/* sobre la sección naranja el naranja es invisible: la opción activa va en negro */
.nav-w.on-orange .fs-opt.active{color:var(--dark);}
.menu-btn{display:flex;align-items:center;gap:.6rem;cursor:pointer;pointer-events:auto;color:inherit;}
.menu-btn__label{font-family:var(--mono);font-size:var(--fs-eyebrow);text-transform:uppercase;letter-spacing:.14em;}
.menu-btn__lines{display:flex;flex-direction:column;gap:5px;width:24px;}
.menu-btn__line{height:2px;width:100%;flex:none;background:currentColor;
  transition:transform .4s var(--ease-cut),opacity .3s;}
.menu-open .menu-btn__line.is--1{transform:translateY(7px) rotate(45deg);}
.menu-open .menu-btn__line.is--2{opacity:0;}
.menu-open .menu-btn__line.is--3{transform:translateY(-7px) rotate(-45deg);}

/* menú overlay */
.menu-w{position:fixed;inset:0;z-index:790;background:var(--dark);color:var(--seashell);display:none;}
/* la columna de la cita lleva foto + texto, así que se le da más ancho que al índice */
.menu-inner{height:100%;display:grid;grid-template-columns:1.35fr 1fr;align-items:center;gap:2rem;padding:6rem var(--pad) 3rem;}
/* align-self:stretch solo para esta columna: así toma el alto del índice de la
   derecha sin tocar la otra. Dos filas: la cita queda CENTRADA en todo el espacio
   que sobra y la música se ancla abajo. */
.menu-col.is--left{display:grid;grid-template-rows:1fr auto;align-items:center;
  align-self:stretch;gap:2rem;}

/* ---------- CITAS SOBRE SINTETIZADORES ----------
   RMNeue-Regular (el 400 recién declarado arriba), gris claro.
   La foto del artista va al costado, contra el margen izquierdo. */
.menu-quote{display:flex;align-items:center;gap:1.6rem;}
.menu-quote__figure{flex:none;width:min(26vw,320px);aspect-ratio:4/5;position:relative;isolation:isolate;}
.menu-quote__figure .boxed-img{position:absolute;inset:0;aspect-ratio:auto;max-width:none;margin:0;}
/* sin parallax acá: la foto no se desliza, no necesita el 120% de alto */
.menu-quote__figure .img-mask .img-cover{height:100%;}
/* Al revés que en el sitio: acá la foto arranca NARANJA y se destapa al pasar por
   encima. Va después de la regla general para poder ganarle con la misma
   especificidad, y el :hover queda dentro del media de puntero fino — en táctil el
   navegador deja el :hover pegado en lo último que tocaste. */
.menu-quote .overlay-screen{opacity:1;}
@media (hover:hover) and (pointer:fine){
  .menu-quote .boxed-img:hover .overlay-screen{opacity:0;}
}
/* si la foto no está (o el nombre no coincide) el bloque se saca y la cita sigue sola */
.menu-quote.no-foto .menu-quote__figure{display:none;}
/* la medida de siempre: la cita corta en 32 caracteres y respira */
.menu-quote__body{min-width:0;max-width:32ch;}
.menu-quote__text{font-family:var(--sub);font-weight:400;
  font-size:clamp(.95rem,1.35vw,1.35rem);line-height:1.4;margin:0;color:var(--timberwolf);}
/* La firma va en naranja, y sin tocar opacity: esa propiedad la usa el JS para hacerla
   entrar al final del barrido, y si acá quedara fijada se pisarían. */
.menu-quote__author{font-family:var(--mono);font-size:var(--fs-eyebrow);letter-spacing:.14em;
  text-transform:uppercase;margin-top:1.1rem;color:var(--orange);}
.menu-item{padding:.85rem 0;border-top:1px solid rgba(241,241,241,.2);}
.menu-item__nr{opacity:.5;margin-bottom:.35rem;}
.menu-link{font-family:var(--mono);font-size:var(--fs-reg);text-transform:uppercase;cursor:pointer;}
.menu-overlay__w{position:fixed;inset:0;z-index:795;display:none;grid-template-columns:repeat(12,1fr);grid-auto-rows:1fr;pointer-events:none;}
.menu-overlay__item{background:var(--dark);}

/* ============================================================
   PROGRESO DE SCROLL
   ============================================================ */
.reactor{position:fixed;top:0;left:0;height:3px;width:100%;z-index:850;background:transparent;pointer-events:none;}
.reactor span{display:block;height:100%;width:0;background:var(--orange);}

/* ============================================================
   SECCIONES
   ============================================================ */
.hero{min-height:100svh;overflow:hidden;}
.hero-w{min-height:100svh;display:flex;flex-direction:column;justify-content:center;}
/* EL 'min()' ES PARA QUE LA LÍNEA ENTRE EN UN RENGLÓN EN EL TELÉFONO.
   '( reparación · mantenimiento · desarrollo )' pide 356 px y en una pantalla de 375
   hay 343, así que se partía y el paréntesis de cierre quedaba solo abajo. Feo, y por
   13 píxeles.
   Se achica la LÍNEA ENTERA y no la palabra larga sola: en una tipografía monoespaciada
   el renglón se lee como una grilla, y una palabra de otro cuerpo en el medio se nota
   al instante. Achicada entera no hay con qué comparar y no se ve.
   El min() se encarga solo y no hace falta un breakpoint: 2.8vw le gana al tamaño
   normal recién por debajo de los 400 px de ancho, que es exactamente donde la línea
   deja de entrar, y ahí achica lo justo. De 400 para arriba —tablet, escritorio— el
   valor de siempre gana y esta regla no hace nada.
   El 2.6 y no 2.8: acá también entra el tamaño de fuente del sistema (ver el min() de
   .h-display). No por el cuerpo de la letra —de eso ya se encarga el vw— sino por el
   MARGEN: --pad es 1rem, así que con la letra al 125% los márgenes laterales pasan de
   16 a 20 px cada uno y el renglón se queda con 40 px menos de cancha. Con 2.8 entraba
   por un pelo y con 2.6 entra con aire hasta el 175%.
   OJO: es el ancho de ESTA frase el que fija el 2.6. Si el texto cambia, se vuelve a
   medir (cuánto pide la línea contra cuánto hay) antes de dar por bueno el número. */
.hero-eyebrow{color:var(--orange);margin-bottom:2rem;font-size:min(var(--fs-eyebrow),2.6vw);}
.hero-h .h-display{display:block;}
.scrollcue{position:absolute;bottom:2.4rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.6rem;color:var(--charcoal);z-index:3;}
.scrollcue-bar{width:1px;height:34px;background:linear-gradient(var(--orange),transparent);
  animation:cue 1.8s var(--ease-cut) infinite;}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top;}45%{transform:scaleY(1);transform-origin:top;}
  55%{transform:scaleY(1);transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}

.strip-intro{max-width:60ch;margin:0 auto;}
.strip-intro .text-highlight{font-size:clamp(1.05rem,1.7vw,1.55rem);line-height:1.55;}

.ep{padding:clamp(3rem,7vw,7rem) 0;}
.ep-grid{align-items:center;row-gap:2.5rem;}
.ep-grid.reverse .ep-visual{order:2;}
.ep-grid.reverse .ep-copy{order:1;}
.ep-copy{display:flex;flex-direction:column;}
.ep-head{display:flex;flex-direction:column;gap:.4rem;align-items:flex-start;}
.ep-nr{color:var(--orange);}
.ep-label{opacity:.55;}
.ep-copy .h-large{margin:1.4rem 0 0;}
.ep-punch{margin-top:1.6rem;font-size:var(--fs-reg);line-height:1.25;max-width:20ch;}
.ep-support{margin-top:1.4rem;font-size:clamp(.98rem,1.25vw,1.2rem);line-height:1.55;max-width:44ch;opacity:.9;}

.reveal-grid{align-items:center;row-gap:3rem;}
.reveal-recap{max-width:38ch;}
.reveal-name{margin:2rem 0 0;}
.reveal-stats{display:flex;gap:2.4rem;flex-wrap:wrap;margin-top:2.4rem;}
.stat-n{font-family:var(--display);font-size:clamp(2rem,4vw,3.4rem);line-height:1;}
.stat-l{opacity:.55;margin-top:.6rem;}
.reveal-closer{margin-top:2.4rem;font-size:clamp(1rem,1.3vw,1.25rem);line-height:1.5;max-width:none;color:var(--charcoal);}

/* max-width:14ch -> entra "especializado" (13) pero no "servicio técnico" (16):
   el título cae en 3 renglones, uno por palabra. */
/* 'width' Y NO 'max-width', Y ESO ES LO QUE DEJA QUIETOS A LOS BOTONES.
   Con max-width la caja se achicaba al contenido: medía lo que midiera el renglón más
   largo. Y este título glitchea cada 5 segundos, o sea que cada 5 segundos sus letras
   se cambian por otras más finas —el '·' y la '/' del set de scramble son mucho más
   angostos que una letra— y la caja se encogía con ellas.
   El problema es que ese ancho no se quedaba acá. La sección CTA es un flex, así que
   su .p-pad no ocupa todo el ancho sino lo que ocupe su hijo más ancho, que es este
   título. Achicándose él se achicaba el .p-pad, y con él la fila de botones de abajo:
   medidos, iban de 341 a 278 px y volvían, tres veces por minuto. Los botones no
   tenían nada roto — estaban colgados del título.
   Con 'width' la caja mide 14ch pase lo que pase adentro. El corte del texto no cambia
   —es el mismo ancho de antes, que es justo el que deja entrar 'especializado' (13) y
   no 'servicio técnico' (16), así que siguen siendo tres renglones, uno por palabra—
   pero ahora nada de abajo se entera de que el título respira. */
.cta-big{display:inline-block;text-decoration:none;margin:0 auto;width:14ch;}
.cta-desc{max-width:50ch;margin:2.4rem auto 0;color:var(--white);
  font-size:clamp(1rem,1.4vw,1.4rem);line-height:1.4;}
.cta-legal{max-width:none;margin:2.6rem auto 0;color:var(--dark);opacity:.7;
  font-size:clamp(.6rem,.75vw,.78rem)!important;line-height:1.6;}

.footer-brand{display:flex;flex-direction:column;}
.footer-brand .h-large{line-height:.9;}
.footer-cols{row-gap:2rem;}
.footer-col{display:flex;flex-direction:column;gap:.6rem;}
.footer-link{font-family:var(--mono);font-size:var(--fs-eyebrow);text-transform:uppercase;cursor:pointer;width:fit-content;}
.footer-link.is--underline{text-decoration:underline;}
/* sin cursor:default — reactivaba la flecha del sistema justo sobre este texto,
   mientras el resto del sitio la tiene oculta */
.footer-loc{font-family:var(--mono);font-size:var(--fs-eyebrow);text-transform:uppercase;
  color:var(--seashell);width:fit-content;}
.footer-btm{display:flex;gap:2rem;flex-wrap:wrap;justify-content:space-between;
  border-top:1px solid rgba(241,241,241,.2);padding-top:1.2rem;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media screen and (max-width:991px){
  :root{--pad:1.1rem;}
  .main-g{grid-template-columns:repeat(6,1fr);}
  .col-span-4,.col-span-6{grid-column:span 6;}
  /* En una sola columna el menú puede no entrar en pantalla: se deja scrollear en vez
     de recortar. El padding de arriba baja el bloque para que la cita no quede pisando
     el selector de MÚSICA [ on ] [ off ] de la barra. */
  .menu-w{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
  .menu-inner{grid-template-columns:1fr;align-content:start;gap:3rem;
    height:auto;min-height:100%;padding-top:9.5rem;}
  /* flex-direction explícito: la regla de escritorio es grid y no lo declara, así que
     sin esto la cita y la música quedaban una al lado de la otra */
  .menu-col.is--left{display:flex;flex-direction:column;align-items:flex-start;
    align-self:auto;justify-content:flex-start;gap:2.4rem;}
  /* la foto del artista pasa ARRIBA del texto, todo alineado a la izquierda */
  .menu-quote{flex-direction:column;align-items:flex-start;gap:1.4rem;}
  .menu-quote__figure{width:min(62vw,300px);}
  .footer-col{grid-column:span 3;}
}
@media screen and (max-width:767px){
  .ep-grid,.reveal-grid{grid-template-columns:1fr;}
  .ep-grid .ep-visual,.ep-grid .ep-copy,
  .reveal-grid .reveal-visual,.reveal-grid .reveal-copy{grid-column:1/-1;order:0!important;}
  .boxed-img{aspect-ratio:3/4;max-width:520px;margin-inline:auto;width:100%;}
  .ep-punch,.ep-support,.reveal-recap{max-width:none;}
  .footer-cols{grid-template-columns:1fr;}
  .footer-btm{flex-direction:column;gap:.6rem;}
  /* los tres botones de contacto, uno abajo del otro y del mismo ancho, centrados
     como el resto del bloque */
  .cta-actions{flex-direction:column;align-items:center;gap:.8rem;}
  .cta-actions .cta-btn{flex:none;width:min(100%,22rem);}
  .hero-w{padding-top:20vh;padding-bottom:14vh;justify-content:flex-start;}
  .scrollcue{bottom:4vh;}
  .navbar-c{padding-top:2rem;}
  .fs-toggle:not(.snd-toggle){display:none;}   /* sin full screen en mobile; el sonido queda */
  .loader__imgwrap{width:min(82vw,420px);}   /* ventana más grande (textos y márgenes iguales) */
}
/* sin full screen ni 'click para entrar' en táctiles — el toggle de sonido sí va */
@media (hover:none){ .fs-toggle:not(.snd-toggle){display:none;} }
@media screen and (max-width:479px){
  :root{--pad:1rem;}
  .reveal-stats{gap:1.6rem;}
  .loader__tag,.loader__label{display:none;}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;}
  .cursor-w{display:none;}
  .overlay-screen{opacity:0;}
  .scrollcue-bar{animation:none;}
  .boxed-img{--mi:0%!important;}   /* máscara exterior siempre abierta */
  .fx-orb{transition:opacity .01s;}
  .img-mask .img-cover{transform:none!important;}
}