.ruido {
  --r-fondo:   var(--p-noche);
  --r-tinta:   var(--p-paper);
  --r-tinta-2: var(--p-paper-soft);
  --r-nivel-2: var(--p-rumor);
  --r-nivel-3: var(--p-murmullo);
}
.ruido[data-fondo="claro"] {

  --r-fondo:   var(--p-papel-secciones);
  --r-tinta:   var(--p-ink);
  --r-tinta-2: var(--p-ink-soft);
  --r-nivel-2: var(--p-rumor-claro);
  --r-nivel-3: var(--p-murmullo-claro);
}

section[data-fondo].ruido.ruido { padding-top: 0 }

.ruido {
  position: relative;

  height: 120svh;
  background: var(--r-fondo);
}

.ruido-escena {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  color: var(--r-tinta);
}

.ruido-escena {
  --r-ancla:  clamp(26px, min(6.3svh, 4.6vw), 56px);
  --r-n1:     clamp(21px, min(4.7svh, 3.4vw), 42px);
  --r-n1-sub: clamp(12px, min(1.8svh, 1.3vw), 16px);
  --r-n2:     clamp(14px, min(2.7svh, 1.95vw), 24px);
  --r-n3:     clamp(11px, min(1.7svh, 1.25vw), 15px);
}

.ruido-ancla {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 8%;
  text-align: center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 460ms var(--p-ease-suave),
              transform 560ms var(--p-ease-tela);
  will-change: opacity, transform;
  font-size: var(--r-ancla);

  font-weight: var(--p-peso-fino);
  line-height: 1.14;
  letter-spacing: -.015em;
  color: var(--r-tinta);
}
.ruido-dentro .ruido-ancla {
  opacity: 1;
  transform: none;
}

.ruido-frase {
  position: absolute;
  left: var(--x);
  top: var(--y);

  --r-paso: 46ms;
  --r-dura: 380ms;
  --r-arranque: 240ms;

  opacity: 0;
  filter: blur(9px);
  transform: translateX(-50%) translateY(10px) scale(.96) rotate(var(--giro, 0deg));
  transition:
    opacity   var(--r-dura) var(--p-ease-suave) calc(var(--r-arranque) + var(--i) * var(--r-paso)),
    filter    var(--r-dura) var(--p-ease-suave) calc(var(--r-arranque) + var(--i) * var(--r-paso)),
    transform var(--r-dura) var(--p-ease-tela)  calc(var(--r-arranque) + var(--i) * var(--r-paso));

  will-change: opacity, transform, filter, scale, translate;
}

.ruido-dentro .ruido-frase {
  opacity: 1;
  filter: blur(0);
  transform: translateX(-50%) translateY(0) scale(1) rotate(var(--giro, 0deg));
}

.ruido-n1 {
  max-width: min(46ch, calc(2 * min(var(--x) - 4%, 96% - var(--x))));
  font-size: var(--r-n1);
  font-weight: var(--p-peso-claro);
  line-height: 1.16;
  letter-spacing: -.012em;

  color: var(--r-tinta-2);
}
.ruido-n1 small {
  display: block;
  margin-top: .55em;
  font-size: var(--r-n1-sub);
  font-weight: var(--p-peso-claro);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--r-nivel-2);
}

.ruido-n2 {
  max-width: min(42ch, calc(2 * min(var(--x) - 4%, 96% - var(--x))));
  font-size: var(--r-n2);
  font-weight: var(--p-peso-claro);
  line-height: 1.3;
  color: var(--r-nivel-2);
}

.ruido-n3 {
  font-size: var(--r-n3);
  font-weight: var(--p-peso-fino);
  font-style: italic;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--r-nivel-3);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ruido-n1 { --r-crece: 1.10; --r-base: var(--r-tinta-2) }
  .ruido-n2 { --r-crece: 1.18; --r-base: var(--r-nivel-2) }
  .ruido-n3 { --r-crece: 1.35; --r-base: var(--r-nivel-3) }
  .ruido-dentro .ruido-frase {
    --r-s: calc(1 + (var(--r-crece) - 1) * var(--cerca, 0));
    scale: var(--r-s);
    translate: calc((var(--r-s) - 1) * 50%) 0;
    color: color-mix(in oklab, var(--r-tinta) calc(var(--cerca, 0) * 100%), var(--r-base));
  }
  .ruido-dentro .ruido-n1 small {
    color: color-mix(in oklab, var(--r-tinta-2) calc(var(--cerca, 0) * 100%), var(--r-nivel-2));
  }
}

@media (max-width: 767px) {
  .ruido { height: 112svh }
  .ruido-escena {
    --r-ancla:  30px;
    --r-n1:     clamp(19px, 5.6vw, 23px);
    --r-n1-sub: 12.5px;
    --r-n2:     15px;
    --r-n3:     12px;
  }
  .ruido-ancla { left: 8%; right: 8%; top: 9% }

  .ruido-frase { left: var(--xm, var(--x)); top: var(--ym, var(--y)) }

  .ruido-n1 { width: max-content; max-width: 86vw; text-align: center }
  .ruido-n2 { width: max-content; max-width: 80vw; text-align: center }

  .ruido-frase:nth-child(2)  { --xm: 22%; --ym: 22% }
  .ruido-frase:nth-child(3)  { --xm: 26%; --ym: 44% }
  .ruido-frase:nth-child(4)  { --xm: 72%; --ym: 64% }
  .ruido-frase:nth-child(5)  { --xm: 70%; --ym: 91% }
  .ruido-frase:nth-child(6),
  .ruido-frase:nth-child(7)  { display: none }

  .ruido-frase:nth-child(8),
  .ruido-frase:nth-child(10),
  .ruido-frase:nth-child(12),
  .ruido-frase:nth-child(13) { display: none }
  .ruido-frase:nth-child(9)  { --xm: 58%; --ym: 39% }
  .ruido-frase:nth-child(11) { --xm: 40%; --ym: 69% }

  .ruido-frase:nth-child(14) { --xm: 50%; --ym: 30% }
  .ruido-frase:nth-child(15) { --xm: 50%; --ym: 54% }
  .ruido-frase:nth-child(16) { --xm: 50%; --ym: 80% }
}

@media (prefers-reduced-motion: reduce) {
  .ruido { height: auto }
  .ruido-escena {
    position: relative; height: auto; overflow: visible;
    padding: var(--p-s-seccion) var(--p-margen);
  }

  .ruido-ancla {
    position: static;
    opacity: 1; transform: none; transition: none;
    margin-bottom: var(--p-s-12);
  }
  .ruido-frase {
    position: static; max-width: none;
    opacity: 1; transform: none; filter: none; transition: none;
    margin-bottom: var(--p-s-8);
  }
  .ruido-n3 { display: none }
}