/* noche/coche — sistema visual: pixel retro nocturno, sin sombras, sin
   border-radius, sin degradados salvo los del propio pixel art. */

:root {
  --noche: #0A1030;
  --mar: #16295E;
  --coche: #B3252E;
  --luna: #E9D27B;
  --faro: #F2EFE6;
  --muted: #8891b8;
  --muted-2: #54608f;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--noche);
  color: var(--faro);
  font-family: 'VT323', monospace;
  font-size: 20px;
  overflow: hidden;
}

a { color: var(--luna); text-decoration: none; }
a:hover { color: var(--coche); }
::selection { background: var(--coche); color: var(--faro); }

.display { font-family: 'Silkscreen', monospace; }

/* ---------------------------------------------------------------- nav */

.nc-nav {
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  z-index: 50;
  display: flex;
  gap: 26px;
  align-items: center;
  justify-content: flex-end;
  padding: 20px 30px;
  font-family: 'Silkscreen', monospace;
  font-size: 12px;
  letter-spacing: 1px;
}
.nc-nav .sep { opacity: 0.3; }
.nc-nav a {
  color: var(--faro);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  text-shadow: 0 2px 10px rgba(10,16,48,0.9);
}
.nc-nav a:hover { color: var(--faro); border-bottom-color: var(--faro); }
.nc-nav a.active { border-bottom-color: var(--faro); }

/* ---------------------------------------------------------------- home / modelo */

/* .nc-scene ocupa toda la pantalla; la ilustración vive en su propia capa
   de fondo detrás de los dos paneles, para que se vea a sangre completa y
   el panel derecho quede semitransparente sobre ella. */
.nc-scene {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.nc-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
/* Base + capa de luces. Ambas comparten dimensiones y posición para
   que los píxeles de la capa de luces caigan exactamente sobre los
   píxeles correspondientes de la foto original.
   aspect-ratio: preserva la proporción real de la foto (1536x1024 = 1.5).
   Con width en % del contenedor se estiraba horizontalmente. */
.nc-bg-img {
  position: absolute;
  height: 130%;
  aspect-ratio: 1536 / 1024;
  width: auto;
  bottom: 0;
  left: 60%;
  transform: translateX(-60%);
  pointer-events: none;
  display: block;
}

/* Capas de luces: dos PNGs con transparencia (preparados a mano) sobre
   la base. Cada uno tiene su propio ritmo:
   - faros: cadencia rápida (1s) para los faros y traseras del coche.
   - resto: cadencia lenta (3s) para farola, ventanas, ciudad y luna.
   Usan plus-lighter para sumar color a la base — los píxeles semi-
   transparentes (bordes suaves de la selección) contribuyen más que con
   screen. El filter empuja el color hacia el blanco para exagerar la
   suma y hacer los brillos más notorios. */
.nc-bg-img--lights {
  mix-blend-mode: plus-lighter;
  filter: brightness(1.7) saturate(1.4);
}
.nc-bg-img--faros { animation: nc-lights-pulse 1s ease-in-out infinite; }
.nc-bg-img--resto { animation: nc-lights-pulse 3s ease-in-out infinite; }

/* Pulso suave: no llega a apagarse, oscila entre 100% y 55%. */
@keyframes nc-lights-pulse {
  0%, 100% { opacity: 1; }
  40%      { opacity: 0.55; }
  60%      { opacity: 0.65; }
}

/* Reduce-motion: dejamos las luces encendidas pero sin animación. */
@media (prefers-reduced-motion: reduce) {
  .nc-bg-img--lights { animation: none; opacity: 0.9; }
}

.nc-split {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 60% 40%;
  height: 100%;
}

.nc-illustration {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.nc-illustration .veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,16,48,0.18) 0%, rgba(10,16,48,0) 42%, rgba(10,16,48,0.72) 100%);
}
.nc-illustration.has-model .veil {
  background: linear-gradient(180deg, rgba(10,16,48,0.78) 0%, rgba(10,16,48,0.88) 100%);
}

.nc-title {
  position: absolute;
  left: 44px;
  top: 26%;
  transform: translateY(-50%);
  z-index: 4;
  font-family: 'Silkscreen', monospace;
  font-weight: 700;
  color: var(--faro);
  font-size: clamp(26px, 3.9vw, 64px);
  line-height: 1;
  text-shadow: 0 4px 24px rgba(10,16,48,0.85);
  white-space: nowrap;
}
.nc-title .slash { color: var(--coche); }
.nc-title:hover { color: var(--faro); opacity: 0.8; }
.nc-illustration.has-model .nc-title {
  left: 30px;
  top: 52px;
  transform: none;
  font-size: 22px;
}

.nc-back {
  position: absolute;
  top: 22px;
  left: 30px;
  z-index: 3;
  font-family: 'Silkscreen', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--faro);
}
.nc-back:hover { color: var(--coche); }

/* cabecera reutilizable (volver + noche/coche) para ¿por qué? y BSO */
/* posición absoluta idéntica a la del "volver" + logo en la ficha de
   modelo (.nc-back / .nc-title.has-model), para que las tres cabeceras
   (modelo, ¿por qué?, BSO) queden a la misma altura. */
.nc-crumb { position: absolute; top: 22px; left: 30px; z-index: 5; }
.nc-crumb-back {
  display: block;
  font-family: 'Silkscreen', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--faro);
  margin-bottom: 10px;
}
.nc-crumb-back:hover { opacity: 0.75; }
.nc-crumb-brand {
  display: block;
  font-family: 'Silkscreen', monospace;
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: var(--faro);
}
.nc-crumb-brand .slash { color: var(--coche); }
.nc-crumb-brand:hover { color: var(--faro); opacity: 0.85; }
/* sobre el panel rojo de ¿por qué? la barra en --coche se funde con el
   fondo; ahí usamos el acento amarillo, ya establecido en esa página. */
.nc-porque-side .nc-crumb-brand .slash { color: var(--luna); }

.nc-intro {
  position: absolute;
  top: 32.5%;
  left: 44px;
  right: auto;
  z-index: 3;
  max-width: 400px;
  font-size: 20px;
  line-height: 1.4;
  color: var(--faro);
  text-shadow: 0 2px 14px rgba(10,16,48,0.95);
}
.nc-intro .luna { color: var(--luna); }
.nc-intro .coche { color: var(--coche); }

.nc-footer-credit {
  position: absolute;
  left: 44px;
  bottom: 28px;
  z-index: 3;
  font-size: 15px;
  line-height: 1.3;
  color: #c3cbe6;
  text-shadow: 0 1px 8px rgba(10,16,48,0.95);
}

.nc-lyrics-wrap {
  position: absolute;
  top: 108px;
  left: 44px;
  right: 40px;
  bottom: 26px;
  overflow-y: auto;
  z-index: 3;
  animation: nc-fadeup 420ms ease-out both;
}
.nc-lyrics-wrap .familia {
  font-family: 'Silkscreen', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--luna);
  margin-bottom: 6px;
}
.nc-lyrics-wrap h2 {
  font-family: 'Silkscreen', monospace;
  font-size: clamp(20px, 2.2vw, 32px);
  line-height: 1.2;
  margin: 0 0 6px 0;
  color: var(--faro);
}
.nc-lyrics-wrap .meta {
  font-family: monospace;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 22px;
}
.nc-lyrics-wrap .meta p {
  line-height: 1.6;
}
.nc-lyrics-wrap .label {
  font-family: 'Silkscreen', monospace;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--coche);
  margin-bottom: 10px;
}
.nc-lyrics-wrap p.text {
  white-space: pre-line;
  margin: 0 0 30px 0;
  font-size: clamp(19px, 1.8vw, 25px);
  line-height: 1.5;
  color: var(--faro);
}
.nc-lyrics-wrap .estribillo { color: var(--luna); }
.nc-lyrics-wrap .text .md-heading {
  display: inline-block;
  font-family: 'Silkscreen', monospace;
  font-size: 0.6em;
  letter-spacing: 1px;
  color: var(--luna);
  opacity: 0.8;
}

.nc-unavailable, .nc-error {
  border: 1px solid var(--coche);
  padding: 20px;
  margin-top: 10px;
  font-size: 18px;
  line-height: 1.5;
}
.nc-unavailable .tag, .nc-error .tag {
  display: inline-block;
  font-family: 'Silkscreen', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--coche);
  margin-bottom: 10px;
}

.nc-samples {
  display: flex;
  gap: 10px;
  margin: 18px 0 26px 0;
}
.nc-samples a {
  font-family: 'Silkscreen', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 6px 10px;
  border: 1px solid rgba(242,239,230,0.3);
  color: var(--faro);
}
.nc-samples a:hover { border-color: var(--faro); }
.nc-samples a.active {
  background: var(--coche);
  border-color: var(--coche);
  color: var(--faro);
}

/* ------------------------------------------------------------ repositorio (lista) */

.nc-repo-topbar {
  /* Mismo tono que .nc-repo, para que la franja bajo el nav se vea
     igual de tintada que el resto de la columna (si no, se ve la
     ilustración de fondo sin oscurecer justo ahí). 40% = ancho de la
     columna derecha en .nc-split. */
  position: fixed;
  top: 0;
  right: 0;
  width: 40%;
  height: 70px;
  background: rgba(10,16,48,0.62);
  z-index: 40;
  pointer-events: none;
}
.nc-repo {
  position: relative;
  height: 100%;
  background: rgba(10,16,48,0.62);
  border-left: 1px solid rgba(22,41,94,0.85);
  overflow-y: auto;
  padding: 96px 44px 60px 44px;
  /* El nav superior es fixed y no tiene fondo propio: sin este recorte,
     las filas de la lista siguen visibles por detrás al hacer scroll en
     vez de desaparecer antes de llegar ahí. */
  clip-path: inset(70px 0 0 0);
}
.nc-repo .kicker {
  font-family: 'Silkscreen', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--luna);
  margin-bottom: 8px;
}
.nc-repo .subtitle {
  font-size: 20px;
  color: var(--muted);
  margin-bottom: 24px;
}
.nc-model-list { display: flex; flex-direction: column; }
/* Oculta todo .nc-repo hasta que muestras.js fija el scroll sobre la fila
   seleccionada — kicker, subtitle y lista son hermanos dentro del mismo
   contenedor con scroll, así que ocultar solo la lista no bastaba: kicker/
   subtitle seguían visibles mientras el contenedor entero saltaba de
   posición. El <noscript> junto a .nc-repo la revela si JS está
   desactivado. */
.nc-repo[data-pending-scroll] { visibility: hidden; }
.nc-model-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 11px 16px;
  margin: 0 -16px;
  border-bottom: 1px solid rgba(22,41,94,0.6);
  transition: background 140ms ease;
  color: var(--faro);
  /* Al entrar en la ficha de un modelo, muestras.js hace scrollIntoView
     de la fila .selected — sin esto quedaría detrás de la franja que
     tapa el nav (mismo motivo que .nc-song-row). */
  scroll-margin-top: 70px;
}
.nc-model-row:hover { background: rgba(242,239,230,0.08); }
.nc-model-row.selected { color: var(--coche); }
.nc-model-row.disabled {
  color: var(--muted-2);
  cursor: not-allowed;
}
.nc-model-row.disabled:hover { background: none; }
.nc-model-row.disabled .status-flag { color: var(--muted-2); opacity: 0.9; }
.nc-model-row .provider {
  font-family: 'Silkscreen', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  opacity: 0.5;
  width: 90px;
  flex-shrink: 0;
}
.nc-model-row .year {
  font-family: 'Silkscreen', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  opacity: 0.4;
  width: 44px;
  flex-shrink: 0;
}
.nc-model-row .name { font-size: 30px; line-height: 1.1; }
.nc-model-row .status-flag {
  font-family: 'Silkscreen', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--coche);
  opacity: 0.8;
  margin-left: auto;
}

/* ---------------------------------------------------------------- por qué */

.nc-porque {
  display: grid;
  grid-template-columns: 38% 62%;
  min-height: 100vh;
}
.nc-porque-side {
  position: relative;
  height: 100%;
  background: var(--coche);
  color: var(--faro);
  padding: 96px 48px 60px 48px;
  display: flex;
  flex-direction: column;
}
.nc-porque-side .kicker {
  font-family: 'Silkscreen', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  opacity: 0.75;
  margin-bottom: 20px;
}
.nc-porque-side h1 {
  font-family: 'Silkscreen', monospace;
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1.15;
  margin: 0;
}
.nc-porque-side .pull-quote {
  font-size: 22px;
  line-height: 1.4;
  margin: 40px 0 0 0;
  max-width: 340px;
}
.nc-porque-side .pull-quote em { color: var(--luna); font-style: normal; }

.nc-article {
  height: 100%;
  background: var(--noche);
  padding: 96px 8vw 60px 8vw;
}
.nc-article-inner { max-width: 66ch; font-size: 22px; line-height: 1.55; }
.nc-article h3 {
  font-family: 'Silkscreen', monospace;
  font-size: 15px;
  color: var(--luna);
  letter-spacing: 1px;
  margin: 0 0 14px 0;
}
.nc-article p { margin: 0 0 34px 0; }
.nc-article strong { color: var(--faro); }
.nc-article a { text-decoration: underline; }

/* ---------------------------------------------------------------- BSO */

.nc-bso {
  display: grid;
  grid-template-columns: 42% 58%;
  height: 100vh;
}
.nc-player {
  position: relative;
  height: 100%;
  overflow-y: auto;
  background: var(--mar);
  padding: 96px 48px 40px 48px;
  display: flex;
  flex-direction: column;
}
.nc-player .kicker {
  font-family: 'Silkscreen', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--luna);
  margin-bottom: 6px;
}
.nc-player .intro { font-size: 20px; color: #aeb8de; margin-bottom: 36px; max-width: 360px; }

.nc-cover {
  width: min(320px, 60%);
  aspect-ratio: 1;
  background: var(--noche);
  border: 2px solid var(--noche);
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  margin-bottom: 24px;
  image-rendering: pixelated;
}
.nc-cover .art {
  grid-column: 1 / 9;
  grid-row: 1 / 6;
  position: relative;
  overflow: hidden;
  background: var(--noche);
}
.nc-cover .art .img {
  position: absolute;
  inset: 0;
  background-image: url('/noche-coche/coche.jpg');
  background-size: cover;
  background-position: center 30%;
  image-rendering: pixelated;
  filter: contrast(1.1);
}
.nc-cover .strip { grid-column: 1 / 9; grid-row: 6 / 9; background: var(--coche); }

.nc-video {
  width: min(380px, 100%);
  aspect-ratio: 16 / 9;
  background: var(--noche);
  border: 2px solid var(--noche);
  margin-bottom: 24px;
}
.nc-video iframe { width: 100%; height: 100%; border: 0; display: block; }

.nc-now-title { font-size: 32px; line-height: 1.1; color: var(--faro); margin-bottom: 2px; }
.nc-now-artist { font-size: 20px; color: #aeb8de; margin-bottom: 20px; }

.nc-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.nc-progress .nc-time {
  font-family: 'Silkscreen', monospace;
  font-size: 16px;
  color: #aeb8de;
  min-width: 44px;
}
.nc-progress .nc-time:last-child { text-align: right; }
.nc-progress-track {
  flex: 1;
  height: 6px;
  background: var(--noche);
  cursor: pointer;
  overflow: hidden;
  outline: none;
}
.nc-progress-track:focus-visible { box-shadow: 0 0 0 2px var(--luna); }
.nc-progress-fill {
  height: 100%;
  width: 0;
  background: var(--coche);
}

.nc-controls-row {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 20px;
}

/* botonera estilo consola: una sola tira sin huecos, teclas separadas por
   divisores internos en vez de bordes propios — como una fila de botones
   de hardware. */
.nc-controls {
  display: flex;
  align-items: stretch;
  width: fit-content;
  background: var(--noche);
  border: 1px solid rgba(242,239,230,0.25);
}
.nc-controls a, .nc-controls button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--faro);
  background: none;
  border: 0;
  border-right: 1px solid rgba(242,239,230,0.2);
  padding: 10px 18px;
  font-family: inherit;
  cursor: pointer;
  line-height: 1;
}
.nc-controls a:last-child, .nc-controls button:last-child { border-right: 0; }
.nc-controls .icon { font-size: 22px; line-height: 1; }
.nc-controls .lbl { font-family: 'Silkscreen', monospace; font-size: 9px; letter-spacing: 1px; opacity: 0.55; }
.nc-controls .nc-nav-btn {
  transition: color 140ms ease, background 140ms ease;
}
.nc-controls .nc-nav-btn:hover { color: var(--coche); background: rgba(242,239,230,0.06); }
.nc-controls .nc-nav-btn:active { background: rgba(242,239,230,0.12); }
.nc-controls .nc-play-big {
  /* Ancho fijo para que no cambie al alternar entre PLAY y PAUSE (los
     textos tienen distinto largo). */
  width: 100px;
  padding: 10px 0;
  background: var(--coche);
  color: var(--faro);
  transition: filter 140ms ease;
}
.nc-play-big .lbl { opacity: 0.85; }

/* Botón mute: alterna entre el SVG "sonando" y el SVG "silenciado"
   según el atributo aria-pressed. Cuando está pulsado (muted) mostramos
   el altavoz cerrado y coloreamos el botón en rojo coche para dejar
   claro el estado. */
#nc-mute-btn .icon { display: inline-flex; align-items: center; justify-content: center; height: 22px; }
#nc-mute-btn .nc-mute-off { display: none; }
#nc-mute-btn[aria-pressed="true"] .nc-mute-on { display: none; }
#nc-mute-btn[aria-pressed="true"] .nc-mute-off { display: inline-block; }
#nc-mute-btn[aria-pressed="true"] { color: var(--coche); }
#nc-mute-btn[aria-pressed="true"] .lbl { opacity: 1; }
.nc-play-big:hover { filter: brightness(1.15); }
.nc-play-big:active { filter: brightness(0.85); }
.nc-play-big[hidden] { display: none; }
.nc-controls a:focus-visible, .nc-controls button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--luna);
}

.nc-eq {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 34px;
}
.nc-eq span {
  width: 4px;
  height: 100%;
  background: var(--luna);
  transform-origin: bottom;
  transform: scaleY(0.28);
  /* Las alturas mientras suena las marca bso-player.js (valores
     pseudoaleatorios por barra, no hay forma de leer el espectro real
     del audio de un iframe de YouTube por la política de origen cruzado
     del navegador) — la transición es solo para que el cambio entre
     valores se vea fluido en vez de un salto brusco. */
  transition: transform 120ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .nc-eq.playing span { transform: scaleY(0.6); transition: none; }
}

.nc-player-credit { margin-top: auto; padding-top: 26px; font-size: 16px; color: #7d88b5; }

.nc-song-list-topbar {
  /* Mismo tono que .nc-song-list, para que la franja bajo el nav se vea
     igual que el resto de la columna. 58% = ancho de la columna derecha
     en .nc-bso. */
  position: fixed;
  top: 0;
  right: 0;
  width: 58%;
  height: 70px;
  background: var(--noche);
  z-index: 40;
  pointer-events: none;
}
.nc-song-list {
  height: 100%;
  background: var(--noche);
  overflow-y: auto;
  padding: 96px 48px 40px 48px;
  /* El nav superior es fixed y no tiene fondo propio: sin este recorte,
     las filas de la lista siguen visibles por detrás al hacer scroll en
     vez de desaparecer antes de llegar ahí (mismo motivo que .nc-repo). */
  clip-path: inset(70px 0 0 0);
}
.nc-song-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--mar);
  color: var(--faro);
  cursor: pointer;
  /* Sin esto, el scrollIntoView('start') de bso-player.js alinea la fila
     justo en el borde superior del contenedor — la misma franja de 70px
     que tapa el nav — y la fila activa queda oculta detrás. */
  scroll-margin-top: 70px;
}
.nc-song-row:hover .titulo { color: var(--coche); }
.nc-song-row.playing { color: var(--coche); }
.nc-song-row .num { font-family: 'Silkscreen', monospace; font-size: 11px; color: var(--muted-2); width: 30px; flex-shrink: 0; }
.nc-song-row .info { flex: 1; }
.nc-song-row .titulo { font-size: 30px; line-height: 1.05; color: inherit; }
.nc-song-row .artista { font-size: 17px; color: var(--muted); margin-top: 2px; }
.nc-song-row .now-flag {
  font-family: 'Silkscreen', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--coche);
  opacity: 0;
  flex-shrink: 0;
}
.nc-song-row.playing .now-flag { opacity: 1; }
.nc-song-row .play-link { flex-shrink: 0; font-size: 22px; }

/* ---------------------------------------------------------------- 404 */

.nc-404 {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
}
.nc-404 h1 { font-family: 'Silkscreen', monospace; font-size: 40px; color: var(--coche); }

/* ---------------------------------------------------------------- itinerario */

/* Contenedor "driver" — su altura genera el scroll disponible. Cada parada
   ocupa ~40vh de scroll: suficiente para que el coche se mueva con
   sensación de recorrido sin obligar a scroll interminable. */
.nc-itin {
  position: relative;
  height: calc(var(--stops, 6) * 40vh + 20vh);
  background: var(--noche);
}

/* Escena sticky que se queda fija en pantalla mientras el usuario scrollea
   por el driver. Orden vertical: crumb / header / carretera / caption / hint. */
.nc-itin-scene {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  /* 4 filas en desktop: aquí .nc-itin-arrows no se usa (display:none, ver
     más abajo), así que no le reservamos fila — si la tuviera, sería una
     fila vacía que igualmente "cobra" sus dos gaps alrededor sin mostrar
     nada. En el @media de móvil, donde las flechas sí se ven, se vuelve a
     una plantilla de 5 filas con grid-row explícito en cada hijo. */
  grid-template-rows: auto auto 1fr auto;
  gap: 16px;
  padding: 20px 48px 40px 48px;
  overflow: hidden;
}

.nc-itin-header { grid-row: 1; max-width: 720px; margin-top: 72px; }
.nc-itin-header .kicker {
  font-family: 'Silkscreen', monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--luna);
  margin-bottom: 14px;
}
.nc-itin-header .title {
  font-family: 'Silkscreen', monospace;
  font-size: clamp(30px, 3.5vw, 52px);
  line-height: 1.15;
  margin: 0 0 16px 0;
  color: var(--faro);
}
.nc-itin-header .intro {
  margin: 0;
  font-size: 20px;
  color: var(--muted);
  max-width: 480px;
}

/* Panel central: nombre + año arriba, provider debajo, texto grande. Su
   contenido se reemplaza vía JS conforme el coche va cambiando de parada.
   Ocupa la fila 1fr del grid, el espacio que sobra entre la carretera y
   el hint. align-self: start (en vez de center) para que el bloque quede
   anclado arriba — con center, el nombre del modelo subía y bajaba según
   lo largo que fuera el texto de cada parada.
   max-width amplio (900px) para que en portátiles con ~1440px el texto
   quepa cómodo. overflow-y auto por si el texto no cabe: dentro del
   propio caption se scrollea. min-height 0 fuerza al item de grid a
   respetar el max-height (sin esto crecería empujando el hint). */
.nc-itin-caption {
  grid-row: 3;
  align-self: start;
  max-width: 900px;
  min-height: 0;
  margin: 0 auto;
  text-align: center;
  padding: 0 20px;
  overflow-y: auto;
  max-height: 100%;
}
.nc-itin-caption .head {
  margin-bottom: 4px;
}
.nc-itin-caption .head .name {
  font-family: 'Silkscreen', monospace;
  font-size: clamp(24px, 2.4vw, 38px);
  color: var(--faro);
}
/* Provider · año en la misma línea, año en amarillo (luna) para
   diferenciarlo del provider — ahora el año va junto al fabricante,
   no junto al nombre del modelo. */
.nc-itin-caption .familia {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: baseline;
  font-family: 'Silkscreen', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  margin-bottom: 22px;
}
.nc-itin-caption .familia .provider { color: var(--muted-2); }
.nc-itin-caption .familia .year { color: var(--luna); }
.nc-itin-caption .familia .dot { color: var(--muted-2); opacity: 0.6; }
.nc-itin-caption .texto {
  margin: 0;
  font-size: clamp(20px, 1.8vw, 20px);
  line-height: 1.4;
  color: var(--faro);
}

/* Carretera: línea horizontal fina; markers puntuales; coche absolute
   con left: X% que el JS actualiza continuamente. */
.nc-itin-road {
  grid-row: 2;
  position: relative;
  height: 170px;
  /* Margen amplio a los lados para que el coche (translateX(-50%)) tenga
     espacio en las paradas extremas y no rebase el borde de la escena. */
  margin: 0 60px;
}
/* Línea horizontal al centro del contenedor: encima cabe el coche + labels
   por defecto; debajo queda hueco para lanzar etiquetas cuando dos se
   solaparían horizontalmente (repackLabels en itinerario.js). */
.nc-itin-road .line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 65px;
  height: 2px;
  background: var(--mar);
}
.nc-itin-road .stops { position: absolute; inset: 0; }
.nc-itin-road .stop {
  position: absolute;
  bottom: 65px;
  transform: translateX(-50%);
  width: 1px;
  /* Reset del <button>: sin caja propia, actúa como un ancla puntual sobre
     la carretera. El hitbox real de click/hover lo dan sus hijos absolutos
     (marker + label), que como descendientes propagan :hover al botón. */
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.nc-itin-road .stop .marker {
  width: 12px;
  height: 12px;
  background: var(--mar);
  border: 2px solid var(--noche);
  border-radius: 50%;
  position: absolute;
  left: -6px;
  top: -6px;
  transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.nc-itin-road .stop:hover .marker { background: var(--luna); transform: scale(1.2); }
.nc-itin-road .stop:focus-visible { outline: none; }
.nc-itin-road .stop:focus-visible .marker { box-shadow: 0 0 0 3px var(--luna); }
.nc-itin-road .stop.active .marker { background: var(--coche); transform: scale(1.35); }
.nc-itin-road .stop.active:hover .marker { background: var(--coche); transform: scale(1.4); }
.nc-itin-road .stop .label {
  position: absolute;
  bottom: 50px; /* despeja el alto del coche (SVG de 32px sobre la línea) */
  left: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: 'Silkscreen', monospace;
  text-align: center;
  color: var(--muted-2);
  transition: color 200ms ease, opacity 200ms ease;
  opacity: 0.55;
  pointer-events: none; /* el hit-detect lo hace el botón entero, no cada línea */
}
/* Label lanzado al carril inferior cuando choca horizontalmente con el
   anterior. Se posiciona por debajo de la línea, respetando el mismo
   comportamiento de hover/active. */
.nc-itin-road .stop .label.below {
  bottom: auto;
  top: 25px;
}
.nc-itin-road .stop:hover .label { color: var(--faro); opacity: 1; }
.nc-itin-road .stop.active .label { color: var(--faro); opacity: 1; }
.nc-itin-road .stop .label .name { font-size: 12px; letter-spacing: 1px; }
.nc-itin-road .stop .label .year { font-size: 10px; opacity: 0.7; margin-top: 3px; }

/* left ya no lleva transition CSS: el propio JS interpola (lerp) la
   posición frame a frame, porque ese mismo bucle también tiene que servir
   al arrastre con el puntero (que necesita responder sin el retraso de una
   transition). Ancho/alto siguen la proporción real del sprite (1119×289
   tras recortar el PNG a su contenido) — un descapotable bajo, no la caja
   2:1 del SVG anterior. */
.nc-itin-car {
  position: absolute;
  bottom: 56px; /* borde inferior del sprite justo sobre la línea (línea a bottom:65) */
  width: 110px;
  aspect-ratio: 1119 / 289;
  transform: translateX(-50%);
  cursor: grab;
  touch-action: none; /* el arrastre lo gestiona JS, no el scroll táctil nativo */
}
.nc-itin-car.dragging { cursor: grabbing; }
.nc-itin-car-body { position: relative; width: 100%; height: 100%; }
.nc-itin-car-sprite { width: 100%; height: 100%; display: block; }

/* Ruedas: sprite aparte del cuerpo, montado sobre el hueco correspondiente
   (posiciones medidas a mano sobre el PNG del cuerpo). El wrapper
   .wheel-mount centra y posiciona; el giro (puesto por itinerario.js) va
   en la propia <img>, para no pelear con el translate del wrapper. */
.wheel-mount {
  position: absolute;
  width: 15.5%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.wheel-mount-left { left: 16.4%; top: 73.9%; }
.wheel-mount-right { left: 73.5%; top: 72.5%; }
.nc-itin-car .wheel { width: 100%; height: 100%; display: block; }

/* Bache: pequeño salto al cruzar una parada. Va en un wrapper aparte
   (.nc-itin-car-body) para no pelear con el translateX(-50%) que centra
   el coche sobre su `left`. */
@keyframes nc-itin-bump {
  0% { transform: translateY(0); }
  35% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}
.nc-itin-car-body.bump { animation: nc-itin-bump 240ms ease-out; }

.nc-itin-hint {
  grid-row: 4;
  text-align: center;
  font-family: 'Silkscreen', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--muted-2);
  padding-bottom: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .nc-itin-road .stop .marker { transition: none; }
  .nc-itin-car-body.bump { animation: none; }
}

/* ---------------------------------------------------------------- animations */

@keyframes nc-fadeup { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .nc-lyrics-wrap { animation: none !important; }
}

/* -------- Desplegable de modelos + botón de cierre (solo activos en móvil) */

/* En desktop nunca deben verse; se muestran vía CSS en el @media de abajo. */
.nc-model-picker-btn { display: none; }
.nc-model-picker-close { display: none; }
/* La botonera tiene un selector .nc-controls button { display: flex }
   más específico que .nc-song-list-toggle por sí solo. Sin este selector
   ganador, el botón LISTA se colaba en la botonera desktop cuando la
   lista ya está visible al lado. En móvil se vuelve a mostrar (regla
   dentro del @media). */
.nc-controls .nc-song-list-toggle { display: none; }
.nc-song-list-close { display: none; }
.nc-itin-arrows { grid-row: 3; display: none; }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  /* En móvil el split pasa a apilado vertical con scroll natural de toda
     la página, en vez del scroll interno por panel del escritorio. */
  html, body { height: auto; overflow: visible; }
  .nc-scene { height: auto; min-height: 100vh; padding-top: 48px; }
  .nc-porque, .nc-bso { grid-template-columns: 1fr; height: auto; }
  .nc-repo, .nc-article, .nc-song-list, .nc-porque-side, .nc-player {
    height: auto;
    overflow-y: visible;
    padding: 40px 24px;
  }
  .nc-title { white-space: normal; }
  /* En móvil el lyrics-wrap sale del position:absolute para fluir en el
     flex apilado. Se coloca en order:2 (entre título y picker). */
  .nc-lyrics-wrap {
    position: static;
    left: auto; right: auto; top: auto; bottom: auto;
    animation: none;
    order: 2;
  }

  /* .nc-bg en móvil: fixed a la ventana → no scrollea con el resto del
     contenido, el coche queda siempre visible al fondo. Cubre el 100vh
     completo. */
  .nc-bg {
    position: fixed;
    top: 0; bottom: 0; left: 0; right: 0;
    height: 100vh;
  }
  /* Overlay oscuro fuerte en móvil (0.78) para que la foto quede muy
     apagada y todo el texto se lea claramente encima. Se coloca entre
     la base y las capas de luces (z-index 1) para no matar el titileo. */
  .nc-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10, 16, 48, 0.78);
    pointer-events: none;
    z-index: 1;
  }
  .nc-bg-img--lights { z-index: 2; }
  /* El overlay oscuro de arriba deja las luces como único elemento visible
     sobre negro, así que la misma oscilación de desktop (hasta 0.55) se lee
     como un parpadeo mucho más agresivo. Reducimos el rango a 0.1. */
  @keyframes nc-lights-pulse {
    0%, 100% { opacity: 0.1; }
    40%      { opacity: 0.0; }
    60%      { opacity: 0.0; }
  }
  /* La imagen queda centrada en el coche: el punto (40%, 60%) de la foto
     alineado con el centro del viewport. Así el coche queda a media altura
     de la pantalla, con cielo arriba y carretera abajo. */
  .nc-bg-img {
    height: 100%;
    left: 50%;
    top: 50%;
    bottom: auto;
    transform: translate(-40%, -50%);
  }

  /* Layout apilado home (sin modelo): título → intro → dropdown → pie,
     distribuidos para ocupar toda la altura disponible. Convierto la
     ilustración en display:contents para que sus hijos (título, intro,
     credit) sean hermanos directos del picker y pueda ordenarlos con
     CSS order. Cuando hay modelo (has-model) sigue funcionando como
     modal fullscreen. */
  .nc-split {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 48px);
    padding: 32px 24px 24px;
    gap: 20px;
  }
  /* La ilustración se disuelve en el layout apilado para ambos casos
     (home y ficha de modelo). Sus hijos (title, intro, lyrics-wrap...)
     pasan a ser hermanos del picker button y se ordenan con `order`. */
  .nc-illustration { display: contents; }
  .nc-illustration .veil { display: none; }

  /* Reset de posicionamiento absoluto → flow normal en móvil, con order
     para el apilado deseado. */
  .nc-title, .nc-intro, .nc-footer-credit, .nc-model-picker-btn {
    position: static;
    left: auto; right: auto; top: auto; bottom: auto;
    transform: none;
    margin: 0;
    max-width: none;
  }
  .nc-title { order: 1; text-align: left; font-size: clamp(36px, 9vw, 52px); }
  /* Intro con flex-grow para aprovechar todo el alto disponible entre
     el título y el picker: el recuadro se estira y el scroll interno
     aparece si el texto no cabe. */
  .nc-intro {
    order: 2;
    background: rgba(10, 16, 48, 0.72);
    padding: 14px 16px;
    text-shadow: none;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
  .nc-model-picker-btn { order: 3; width: 100%; }

  /* En la ficha de modelo el picker se fija al fondo del viewport para
     que el usuario pueda saltar a otro modelo sin scrollear hasta el
     final de la letra (que puede ser larga). Usa el selector sibling
     porque la .nc-illustration tiene display:contents y su hijo has-model
     sigue siendo hermano DOM del picker button. */
  .nc-illustration.has-model ~ .nc-model-picker-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    z-index: 40;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0));
    background: rgba(10, 16, 48, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 0;
    border-top: 1px solid var(--mar);
  }
  /* Padding-bottom en el split para que la última línea de contenido no
     se esconda bajo el picker fijo. */
  .nc-split:has(.nc-illustration.has-model) { padding-bottom: 88px; }
  /* margin-top: auto empuja el pie al final del flex container para que
     use toda la altura sobrante entre el dropdown y el pie. */
  .nc-footer-credit {
    order: 5;
    margin-top: auto;
    background: rgba(10, 16, 48, 0.72);
    padding: 8px 12px;
    text-shadow: none;
  }

  /* Nav sticky con franja semitransparente para que se lea sobre cualquier
     fondo. Ocupa todo el ancho arriba en lugar del top-right absoluto. */
  .nc-nav {
    top: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    justify-content: center;
    gap: 14px;
    font-size: 10px;
    background: rgba(10, 16, 48, 0.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--mar);
  }
  .nc-nav a { text-shadow: none; }

  /* Botón que abre el modal con la lista completa. Diseñado con el
     mismo lenguaje visual que las filas de .nc-model-row del desktop:
     Silkscreen, borde tenue, hover a --coche. No usa <select> nativo
     para poder controlar la estética también cuando está abierto. */
  .nc-model-picker-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: calc(100% - 48px);
    margin: 20px 24px;
    padding: 16px 18px;
    background: rgba(10, 16, 48, 0.85);
    color: var(--faro);
    border: 1px solid var(--mar);
    font-family: 'Silkscreen', monospace;
    font-size: 13px;
    letter-spacing: 1px;
    cursor: pointer;
    position: relative;
    z-index: 5;
  }
  .nc-model-picker-btn:hover { color: var(--coche); border-color: var(--coche); }
  .nc-model-picker-btn .chev { color: var(--luna); font-size: 12px; }

  /* .nc-repo se convierte en modal a pantalla completa al abrir el
     picker (body.picker-open). Reutiliza las filas .nc-model-row pero
     con tipografía más pequeña que en desktop para que caben ~15 modelos
     de un vistazo sin scroll. */
  .nc-repo {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 55;
    padding: 60px 16px 40px;
    background: var(--noche);
    overflow-y: auto;
  }
  body.picker-open { overflow: hidden; }
  body.picker-open .nc-repo { display: block; }

  /* Kicker del modal ("LOS MODELOS") más compacto. */
  .nc-repo .kicker { font-size: 10px; margin-bottom: 8px; }
  .nc-repo .subtitle { display: none; }

  /* Filas más finas: name reducido de 30px a 15px, padding compacto,
     provider/year más comprimidos. Con esto todos los modelos caben
     con menos scroll. */
  .nc-model-row {
    gap: 10px;
    padding: 8px 12px;
    margin: 0 -12px;
  }
  .nc-model-row .name { font-size: 15px; line-height: 1.15; }
  .nc-model-row .provider { font-size: 8px; width: 68px; }
  .nc-model-row .year { font-size: 8px; width: 34px; }
  /* La columna "retirado" no aporta en el modal móvil — los deshabilitados
     ya se reconocen visualmente por el color más apagado. */
  .nc-model-row .status-flag { display: none; }

  /* Botón X para cerrar el modal del picker de modelos. */
  .nc-model-picker-close { display: none; }
  body.picker-open .nc-model-picker-close {
    display: flex;
    position: fixed;
    top: 12px;
    right: 14px;
    z-index: 60;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    color: var(--faro);
    font-size: 28px;
    line-height: 1;
    text-decoration: none;
    background: var(--coche);
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(10, 16, 48, 0.5);
  }

  /* La X flotante de "cerrar modelo" quedó retirada: la vuelta a la
     home ya se hace desde el link "noche/coche" del nav sticky. */
  .nc-illustration.has-model .nc-back { display: none; }

  /* Botones RESPUESTA 1/2/3 en móvil: cada uno ocupa un tercio equitativo
     del ancho, centrados, sin partirse a dos líneas. En viewports muy
     estrechos la fuente sigue siendo legible (11px) y el padding ajusta. */
  .nc-samples {
    gap: 8px;
    margin: 14px 0 22px 0;
  }
  .nc-samples a {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    padding: 8px 4px;
    white-space: nowrap;
  }

  /* -------- BSO en móvil -------- */

  /* El player ocupa el flujo normal; arriba dejamos espacio para el crumb
     (nav 48px + 22px del crumb + ~40px de contenido). Sin este padding-top
     el título grande "noche/coche" se pisaba con la intro. */
  .nc-player {
    padding: 96px 24px 40px;
    overflow-y: visible;
    min-width: 0;
  }
  .nc-player .kicker { margin-top: 8px; }
  .nc-cover { width: min(280px, 55%); margin-inline: auto; }
  .nc-video { width: 100%; aspect-ratio: 16/9; }

  /* Los mandos pasan al flujo normal, justo debajo de la barra de
     posición (orden natural del DOM: progreso → mandos → crédito de la
     fuente). Se mantiene el centrado horizontal (justify-content) que ya
     tenían fijos.
     min-width:0 evita que, ahora que la botonera cuenta para el ancho de
     la página (antes, fija, quedaba fuera de ese cálculo), un móvil muy
     estrecho fuerce un ensanchamiento de toda la página en vez de
     limitarse a la propia fila. */
  .nc-controls-row {
    justify-content: center;
    gap: 18px;
    min-width: 0;
  }
  /* En móvil el ecualizador ocupa espacio útil y no aporta tanto — lo
     ocultamos para que los botones respiren mejor. */
  .nc-eq { display: none; }
  /* Los 5 botones (ANT/PLAY/SIG/MUTE/LISTA) con su padding de escritorio
     no caben en el ancho disponible de un móvil (ya no están fijos a
     pantalla completa) — recortamos el padding horizontal y el ancho fijo
     de PLAY para que quepan sin desbordar ni ensanchar la página. */
  .nc-controls a, .nc-controls button { padding: 10px 14px; }
  .nc-controls .nc-play-big { width: 92px; }

  /* El botón LISTA está integrado en la botonera principal (.nc-controls)
     con la misma estética que ANT/PLAY/SIG/MUTE. En móvil se hace
     visible; en desktop se oculta porque la lista ya está a la derecha.
     Selector con .nc-controls para ganar especificidad al display:none
     que dejamos por defecto. */
  .nc-controls .nc-song-list-toggle { display: flex; }

  /* La lista de canciones se convierte en modal a pantalla completa.
     Oculta por defecto; se muestra cuando body tiene la clase .list-open. */
  .nc-song-list {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 55;
    padding: 68px 20px 40px;
    clip-path: none;
    overflow-y: auto;
    background: var(--noche);
  }
  body.list-open { overflow: hidden; }
  body.list-open .nc-song-list { display: block; }

  /* Botón X para cerrar el modal de canciones. */
  body.list-open .nc-song-list-close {
    display: flex;
    position: fixed;
    top: 12px;
    right: 14px;
    z-index: 60;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    color: var(--faro);
    font-size: 28px;
    line-height: 1;
    text-decoration: none;
    background: var(--coche);
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(10, 16, 48, 0.5);
  }

  /* Ocultamos la tapa desktop del listado — ya no aplica. */
  .nc-song-list-topbar { display: none; }

  /* En el modal a pantalla completa hay menos ancho por fila que en la
     columna lateral de desktop, así que reducimos la tipografía para que
     título y artista no se corten ni se apelotonen. */
  .nc-song-row { gap: 12px; padding: 14px 0; }
  .nc-song-row .titulo { font-size: 18px; }
  .nc-song-row .artista { font-size: 13px; }
  .nc-song-row .num { font-size: 10px; width: 24px; }

  /* Itinerario en móvil: reducimos padding y ocultamos las etiquetas
     bajo cada parada — quedaría todo pisado en pantallas estrechas. La
     parada activa se sigue leyendo en el caption central.
     .nc-itin sigue siendo el mismo carril alto que en desktop: aunque en
     móvil ya no reaccione al scroll orgánico del usuario (itinerario.js),
     ese alto sigue haciendo falta porque scrollToStop/scrollYForPos (las
     flechas, el tap en una parada) codifican la posición de cada parada
     como una posición de scroll dentro de ese carril — sin él, todas las
     paradas mapearían al mismo sitio. Como la escena es sticky, el
     usuario no lo nota: la ve fija en pantalla durante todo ese scroll. */
  /* Aquí las flechas sí se ven (display:flex más abajo), así que la
     plantilla vuelve a tener sus 5 filas — la versión de 4 filas de
     desktop es solo para cuando esa fila no tiene nada que mostrar. */
  .nc-itin-scene { grid-template-rows: auto auto auto 1fr auto; padding: 16px 20px 32px 20px; gap: 16px; }
  .nc-itin-header { margin-top: 20px; }
  /* Márgenes laterales anchos (44px) para que el coche (76px con
     translateX(-50%) = 38px de cada lado) no se pegue al borde ni siquiera
     en la primera parada (GPT-1, en left:0%). */
  .nc-itin-road { margin: 0 44px; height: 90px; }
  .nc-itin-road .line { bottom: 24px; }
  .nc-itin-road .stop { bottom: 24px; }
  .nc-itin-road .stop .label { display: none; }
  .nc-itin-car { bottom: 16px; width: 76px; }

  /* Flechas de navegación entre paradas (solo móvil). Los triangulitos
     usan color luna cuando pueden viajar en esa dirección y quedan muy
     apagados cuando ya están en el extremo (disabled). */
  .nc-itin-arrows {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 48px;
    margin-top: 4px;
  }
  .nc-itin-arrow {
    background: none;
    border: 0;
    padding: 8px 14px;
    font-size: 20px;
    line-height: 1;
    color: var(--luna);
    cursor: pointer;
    transition: color 140ms ease, opacity 140ms ease;
  }
  .nc-itin-arrow:hover { color: var(--faro); }
  .nc-itin-arrow:disabled {
    color: var(--muted-2);
    opacity: 0.4;
    cursor: not-allowed;
  }

  /* Caption con scroll interno en móvil: cuando el texto es largo, se
     lee dentro del propio recuadro sin desbordar la pantalla ni empujar
     el hint del final. min-height reserva sitio para textos cortos. */
  .nc-itin-caption {
    grid-row: 4;
    max-height: 42vh;
    min-height: 120px;
    overflow-y: auto;
    padding: 4px 16px;
  }
  .nc-itin-caption .texto { font-size: 18px; }
  .nc-itin-hint { grid-row: 5; }
}

/* Entre 575px y el breakpoint móvil (900px) ya hay hueco suficiente junto
   a los mandos para que quepa también el ecualizador — por debajo de
   575px se queda oculto (regla dentro del @media de arriba). */
@media (min-width: 575px) and (max-width: 900px) {
  .nc-eq { display: flex; }
}