/* Home · la frase (7/9/26) — leer antes de tocar.

   La declaración que sigue al vídeo ("Ordenamos lo que tu marca quiere
   decir…") pasa de párrafo a titular: ocupa casi una pantalla entera, va de
   lado a lado y entra descifrándose de izquierda a derecha cuando el visitante
   llega a ella (assets/js/home-frase.js). Sustituye al tintado palabra a
   palabra de la v1.2 (.tz-t), que sigue en style.css por si se quiere volver.

   · El vídeo del hero no se toca: la frase va DESPUÉS, en su propia pantalla.
   · Peso: en el tema solo hay Neue Haas Display 45/55/65. Se usa el 65 Medium
     (--f-label) con un filete de .014em (text-stroke del mismo color) que lo
     acerca al 75 Bold. Cuando llegue el 75 Bold: @font-face y quitar el filete.
   · Cada palabra es una caja (.w) con el ancho de su texto final fijado por el
     JS: mientras las letras se revuelven, ninguna línea se recompone. Dentro,
     .d son las letras ya resueltas y .s las que aún se revuelven.
   · Las palabras en <b> van en naranja: son las que antes se encendían.
   · Sin JavaScript se lee tal cual. Con prefers-reduced-motion, sin animación. */

.frase{min-height:100svh;display:flex;align-items:center;padding:clamp(56px,9vh,110px) clamp(18px,3vw,48px)}
.frase-t{margin:0;width:100%;font-family:var(--f-label);font-weight:500;font-size:6.6vw;line-height:1;letter-spacing:-.03em;color:var(--bone);
  -webkit-text-stroke:.014em currentColor;text-wrap:pretty}
.frase-t b{font-weight:inherit;color:var(--orange)}
.frase-t .w{display:inline-block;white-space:nowrap;vertical-align:baseline}
.frase-t .w .s{opacity:.5}

@media (max-width:760px){
  .frase{min-height:auto;padding:clamp(64px,14vh,120px) 20px}
  .frase-t{font-size:11vw;line-height:1.02}
}
@media (prefers-reduced-motion:reduce){
  .frase-t .w .s{opacity:1}
}