/* ==========================================================================
   Blue Noise — bluenoise.es
   Paleta y tipografía según docs/superpowers/specs/2026-08-13-web-bluenoise-design.md
   ========================================================================== */

:root {
  /* Color — los dos azules centrales salen del propio logotipo */
  --bg: #050912;
  --surface: #0B1631;
  --navy: #16295C;
  --sky: #35A3E8;
  --ice: #7FD4FF;

  --text: #C9D8EA;
  --text-strong: #FFFFFF;
  --text-mute: #7D93B5;
  --rule: rgba(125, 155, 200, .16);

  --font-sans: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Escala tipográfica fluida. No hay pasos por encima de --step-4. */
  --step--1: .78rem;
  --step-0: 1.0625rem;
  --step-1: clamp(1.15rem, 1rem + .6vw, 1.35rem);
  --step-2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --step-3: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);
  --step-4: clamp(2.4rem, 1.5rem + 4vw, 4.2rem);

  --measure: 60ch;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --shell: 1180px;
  --nav-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }

body {
  margin: 0;
  padding-top: var(--nav-h);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 400;   /* Schibsted Grotesk no tiene 300: su eje empieza en 400 */
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

/* Cifras tabulares SOLO donde hay números que alinear. Aplicado al body entero,
   el punto entra en el conjunto 'tnum' como separador decimal y sale con
   anchura de cifra: todos los puntos del texto corrido quedan despegados. */
.tabular { font-feature-settings: 'tnum' 1; }

h1, h2, h3 {
  color: var(--text-strong);
  font-weight: 600;
  letter-spacing: -.032em;
  line-height: 1.1;
  margin: 0;
}

a { color: var(--ice); }

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* --- Navegación --------------------------------------------------------- */

.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--nav-h);
  background: #fff;
  border-bottom: 1px solid rgba(22, 41, 92, .12);
}
.nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }

/* Sobre blanco el logotipo se lee solo: sin placa, sin filtros, sus colores. */
.nav__logo { display: inline-flex; }
.nav__logo img { display: block; height: 32px; width: auto; }

.nav__links { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.nav__links a {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  transition: color .2s;
}
.nav__links a:hover, .nav__links a:focus-visible { color: var(--sky); }

/* --- Portada ------------------------------------------------------------ */

.hero { position: relative; min-height: calc(100svh - var(--nav-h)); display: grid; align-items: end; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(5, 9, 18, .72) 0%,
    rgba(5, 9, 18, .35) 40%,
    rgba(5, 9, 18, .96) 100%);
}
.hero__inner { position: relative; z-index: 2; padding-block: clamp(3rem, 10vh, 7rem); }
.hero__title { font-size: var(--step-4); max-width: 15ch; }
.hero__title em { font-style: normal; color: var(--sky); }
.hero__sub { font-size: var(--step-1); color: var(--text); max-width: 56ch; margin: 1.25rem 0 0; }

/* El menú se oculta en móvil a propósito: cuatro anclas en una página de
   scroll no justifican un menú hamburguesa. */
@media (max-width: 640px) { .nav__links { display: none; } }

/* --- Secciones ---------------------------------------------------------- */

.section { padding-block: clamp(4rem, 11vh, 8rem); border-top: 1px solid var(--rule); }
.section__title { font-size: var(--step-3); max-width: 20ch; margin: .9rem 0 2.5rem; }
.section__title em { font-style: normal; color: var(--sky); }

/* --- Escala de dB ------------------------------------------------------- */

.scale { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.scale__row { display: grid; grid-template-columns: minmax(90px, 150px) 1fr 3.5rem; gap: 1rem; align-items: center; }
.scale__label { color: var(--text-mute); text-align: right; font-size: var(--step--1); }
.scale__track { height: 10px; border-radius: 5px; background: rgba(125, 155, 200, .13); overflow: hidden; }
.scale__track i {
  display: block; height: 100%; width: 0; border-radius: 5px;
  background: linear-gradient(90deg, var(--navy), var(--sky));
  transition: width 1.1s cubic-bezier(.2, .7, .2, 1);
}
.scale__row:first-child .scale__track i { background: linear-gradient(90deg, var(--navy), var(--ice)); }
.scale__row:first-child .scale__label,
.scale__row:first-child .scale__db { color: var(--ice); }
.scale__db { font-family: var(--font-mono); font-weight: 500; color: var(--text-strong); }
.scale__unit { margin-top: 1.6rem; font-size: var(--step--1); color: var(--text-mute); }

@media (max-width: 560px) {
  .scale__row { grid-template-columns: 1fr 3rem; grid-template-areas: "l d" "t t"; row-gap: .3rem; }
  .scale__label { grid-area: l; text-align: left; }
  .scale__db { grid-area: d; text-align: right; }
  .scale__track { grid-area: t; }
}

/* --- La carta ----------------------------------------------------------- */

.letter__top {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: .2em; text-transform: uppercase; color: var(--text-mute);
  border-bottom: 1px solid var(--rule); padding-bottom: .8rem; margin-bottom: 3rem;
}
.letter__lead { font-size: var(--step-3); max-width: 19ch; margin-bottom: 3rem; }
.letter__lead em { font-style: normal; color: var(--sky); }

.letter__grid { display: grid; grid-template-columns: 130px minmax(0, var(--measure)); gap: 2.2rem; }
.letter__margin {
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-mute);
  text-align: right; margin: .45rem 0 0; line-height: 1.7;
}
.letter__margin b { display: block; color: var(--sky); font-weight: 500; }
.letter__col p { margin: 0 0 .95rem; }
.letter__col p:last-child { margin-bottom: 0; }
.letter__short, .letter__col strong { color: var(--text-strong); font-weight: 500; }
.letter__hl { color: var(--ice); font-weight: 500; }
.letter__num { font-family: var(--font-mono); color: var(--ice); font-weight: 500; }

.letter__beat {
  font-size: var(--step-2); font-weight: 600; color: var(--text-strong);
  letter-spacing: -.028em; line-height: 1.16;
  margin: 3rem 0 2.2rem; padding-top: 1.7rem; border-top: 1px solid var(--rule);
}
.letter__beat em { font-style: normal; color: var(--sky); }

@media (max-width: 760px) {
  .letter__grid { grid-template-columns: 1fr; gap: .8rem; }
  .letter__margin { text-align: left; }
  .letter__margin b { display: inline; margin-right: .6rem; }
}

/* --- Territorios y método ------------------------------------------------ */

.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem; }
.tile h3 { font-size: var(--step-1); margin: 0 0 .55rem; letter-spacing: -.02em; }
.tile p { margin: 0; color: var(--text-mute); font-size: var(--step-0); }
.tile__n {
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--sky);
  letter-spacing: .16em; margin: 0 0 .7rem !important;
}
.method .tile { border-top: 1px solid var(--rule); padding-top: 1.4rem; }

/* --- Medios --------------------------------------------------------------- */

.tools { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.tools li {
  font-family: var(--font-mono); font-size: var(--step--1);
  padding: .45rem 1rem; border: 1px solid var(--rule); border-radius: 100px; color: var(--text);
}
.tools__note { margin-top: 1.6rem; color: var(--text-mute); max-width: var(--measure); }

/* --- Cierre --------------------------------------------------------------- */

.closing { text-align: center; }
.closing__title { font-size: var(--step-4); }
.closing__title em { font-style: normal; color: var(--sky); }
.closing__mail {
  display: inline-block; margin-top: 1.6rem;
  font-size: var(--step-2); font-weight: 600; color: var(--ice); text-decoration: none;
  border-bottom: 1px solid rgba(127, 212, 255, .35); padding-bottom: .15rem;
}
.closing__mail:hover { border-bottom-color: var(--ice); }
.closing__legal {
  margin-top: 3rem; font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-mute);
}

/* --- Accesibilidad -------------------------------------------------------- */

:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }

.skip {
  position: fixed; left: -9999px;
  background: var(--ice); color: #04121f; padding: .7rem 1.2rem; z-index: 100;
  font-weight: 500; text-decoration: none; border-radius: 6px;
}
.skip:focus { left: var(--gutter); top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Página "Escuchar" — registro editorial de lujo.
   Cada movimiento ocupa una pantalla. Poco texto, mucho aire, la imagen manda.
   ========================================================================== */

.mov {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
}

/* --- Movimiento con imagen a sangre --- */
.mov__media { position: absolute; inset: 0; }
.mov__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mov__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,9,18,.82) 0%, rgba(5,9,18,.45) 45%, rgba(5,9,18,.92) 100%);
}
.mov__inner { position: relative; z-index: 2; }

.mov__kicker {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 0 0 clamp(2.5rem, 7vh, 5rem);
}

.mov__line {
  font-size: clamp(1.35rem, 1rem + 1.6vw, 2.1rem);
  line-height: 1.4;
  font-weight: 400;
  color: var(--text-strong);
  max-width: 30ch;
  margin: 0 0 1.1rem;
  letter-spacing: -.018em;
}
.mov__line--hi { color: var(--sky); }

/* --- Movimiento de dato puro --- */
.mov--dato { text-align: center; }
.dato__n {
  font-size: clamp(5rem, 4rem + 12vw, 15rem);
  line-height: .88;
  font-weight: 600;
  letter-spacing: -.055em;
  color: var(--text-strong);
  margin: 0;
}
.dato__n span {
  font-size: .24em;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--sky);
  margin-left: .1em;
}
.dato__pie {
  margin: clamp(1.5rem, 4vh, 3rem) auto 0;
  max-width: 34ch;
  color: var(--text-mute);
  font-size: var(--step-1);
}

/* --- Movimiento de texto --- */
.mov--texto { background: var(--bg); }
.mov__col { max-width: 30rem; }
.mov__col p {
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  line-height: 1.5;
  font-weight: 400;
  margin: 0 0 clamp(1.6rem, 4vh, 2.6rem);
  letter-spacing: -.015em;
}
.mov__col .hi { color: var(--ice); font-weight: 500; }
.mov__pausa { color: var(--text-strong); }

/* --- Cierre --- */
.mov--cierre { text-align: center; border-top: 1px solid var(--rule); }
.cierre__dato {
  font-family: var(--font-mono);
  font-size: clamp(3.5rem, 2.5rem + 8vw, 9rem);
  font-weight: 500;
  color: var(--ice);
  letter-spacing: -.04em;
  margin: 0;
}
.cierre__pie {
  margin: clamp(1.2rem, 3vh, 2rem) auto 0;
  max-width: 32ch;
  font-size: var(--step-1);
  color: var(--text);
}
.cierre__nota {
  margin: clamp(3rem, 8vh, 6rem) auto 0;
  max-width: 40ch;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-mute);
  line-height: 1.9;
}

/* Enlace de la portada hacia "Escuchar". Discreto: subrayado fino que se
   enciende al pasar. No debe competir con el lema. */
.hero__link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(127, 212, 255, .38);
  padding-bottom: .08em;
  transition: color .2s, border-color .2s;
}
.hero__link:hover, .hero__link:focus-visible { color: var(--ice); border-bottom-color: var(--ice); }

/* --- Movimiento "par": imagen y texto en dos columnas, como una doble página --- */
.par {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}
.par__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.par__texto .mov__line { max-width: 24ch; }

/* Etiqueta de magnitud dentro de los movimientos de texto */
.mov__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1) !important;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: clamp(2rem, 5vh, 3.5rem) !important;
}

/* Procedencia del dato: discreta, en mono, bajo el pie */
.dato__fuente {
  margin: clamp(2rem, 5vh, 3.5rem) auto 0;
  max-width: 44ch;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-mute);
  line-height: 1.9;
}
.dato__n--frio { color: var(--ice); }

@media (max-width: 760px) {
  .par { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* --- Botón de escucha ------------------------------------------------------
   Sobrio, en mono, sin iconografía de reproductor al uso: un cuadrado que se
   convierte en dos barras. */

.oir__caja { margin-top: clamp(2rem, 5vh, 3.5rem); }

.oir {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  padding: .75rem 1.4rem;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.oir:hover, .oir:focus-visible { color: var(--ice); border-color: var(--ice); }

.oir__icono {
  width: 9px; height: 9px; flex: none;
  background: currentColor;
  transition: box-shadow .2s, width .2s;
}
/* Reproduciendo: el cuadrado pasa a dos barras */
.oir[aria-pressed="true"] .oir__icono {
  width: 3px;
  box-shadow: 6px 0 0 currentColor;
}

.oir__nota {
  margin: 1.1rem 0 0;
  max-width: 42ch;
  font-size: var(--step--1);
  color: var(--text-mute);
  line-height: 1.7;
}

/* --- Sonómetro ------------------------------------------------------------- */

.medir { margin-top: clamp(2.5rem, 6vh, 4rem); padding-top: clamp(2rem, 5vh, 3rem); border-top: 1px solid var(--rule); }
.medir__intro { margin: 0 0 1.4rem; max-width: var(--measure); color: var(--text); }
.medir__aviso, .medir__error {
  margin: 1.1rem 0 0; max-width: 52ch;
  font-family: var(--font-mono); font-size: var(--step--1);
  line-height: 1.75; color: var(--text-mute);
}
.medir__error:empty { display: none; }
.medir__error { color: var(--sky); }

.medir__remate {
  margin-top: clamp(2rem, 5vh, 3rem);
  padding-left: 1.4rem;
  border-left: 2px solid var(--sky);
  max-width: var(--measure);
}
.medir__remate p { margin: 0 0 .7rem; }
.medir__punto { color: var(--text-strong); font-weight: 500; margin-bottom: 0 !important; }

/* La fila viva dentro de la escala existente */
.scale__row--vivo .scale__label,
.scale__row--vivo .scale__db { color: var(--ice); }
.scale__row--vivo .scale__track i {
  background: linear-gradient(90deg, var(--sky), var(--ice));
  transition: width .12s linear;   /* rápida: es una lectura, no una animación */
}

@media (prefers-reduced-motion: reduce) {
  .scale__row--vivo .scale__track i { transition: none; }
}

/* --- Página 404 ------------------------------------------------------------ */

.perdido { min-height: calc(100svh - var(--nav-h)); display: grid; align-items: center; }
.perdido__titulo {
  font-size: var(--step-4);
  margin: .9rem 0 1.6rem;
  max-width: 16ch;
}
.perdido__titulo em { font-style: normal; color: var(--sky); }
.perdido__texto {
  max-width: 44ch;
  color: var(--text-mute);
  margin: 0 0 2.4rem;
}
/* El enlace reutiliza el botón .oir, pero es un <a>: hay que devolverle el aspecto */
a.oir { text-decoration: none; }

/* Conmutador de idioma: separado del menú por un filete, para que se lea como
   otra cosa y no como una sección más. */
.nav__idioma { position: relative; padding-left: 1.75rem; }
.nav__idioma::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 1px; height: 1em; transform: translateY(-50%);
  background: rgba(22, 41, 92, .22);
}

/* --- Aviso legal ----------------------------------------------------------- */

.legal { padding-block: clamp(3rem, 8vh, 6rem) clamp(4rem, 10vh, 8rem); }
.legal__titulo { font-size: var(--step-3); margin: .9rem 0 3rem; max-width: 18ch; }
.legal__titulo em { font-style: normal; color: var(--sky); }
.legal h2 {
  font-size: var(--step-1); margin: 3rem 0 1rem;
  padding-top: 1.5rem; border-top: 1px solid var(--rule);
}
.legal p { max-width: var(--measure); margin: 0 0 1rem; }
.legal__datos { list-style: none; margin: 0 0 1.4rem; padding: 0; max-width: var(--measure); }
.legal__datos li { margin-bottom: .8rem; }
.legal__datos span {
  display: block;
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-mute);
  margin-bottom: .15rem;
}
.legal__nota, .legal__fecha {
  font-family: var(--font-mono); font-size: var(--step--1);
  color: var(--text-mute); line-height: 1.8; max-width: var(--measure);
}
.legal__fecha { margin-top: 3rem; }
.closing__legal a { color: var(--text-mute); }
.closing__legal a:hover { color: var(--ice); }

/* --- "La parte difícil" -----------------------------------------------------
   Etiquetas en vez de números: numerar convertiría esto en un proceso, que es
   exactamente el formato del que huimos. */

.dificil .tile__n {
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--text-mute);
}
.dificil .tile {
  border-top: 1px solid var(--rule);
  padding-top: 1.4rem;
}
.dificil .tile h3 {
  font-size: var(--step-1);
  line-height: 1.28;
  color: var(--text-strong);
  margin-bottom: .8rem;
}

/* --- "Lo que está en juego" -------------------------------------------------
   Tipográfico y no en rejilla: una rejilla de tres columnas volvería a leerse
   como una lista de proceso, que es justo lo que se quiere evitar. */

.juego__titulo {
  font-size: var(--step-4);
  letter-spacing: -.038em;
  margin: .9rem 0 clamp(2.5rem, 6vh, 4rem);
  max-width: 14ch;
}
.juego__titulo em { font-style: normal; color: var(--sky); }

.juego { list-style: none; margin: 0; padding: 0; }
.juego li {
  font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem);
  line-height: 1.35;
  font-weight: 400;
  color: var(--text-strong);
  letter-spacing: -.02em;
  max-width: 26ch;
  padding-bottom: 1.1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule);
}
.juego li:last-child { border-bottom: 0; }

.juego__margen {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  max-width: 46ch;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .1em;
  line-height: 2;
  color: var(--text-mute);
}