/* Triângulo reto (referência: cateto vertical à esquerda, linhas crescendo para baixo)
   Slots: s1 após "Especialista" · s2 após "de" · s3 após "leads"
          s4 após "qualificados" · s5 após "empresas" · s6 após "atendem"  */
@media (min-width:900px){
  html[data-al^="tr"] .hero-title{
    max-width:none !important;text-wrap:normal !important;
    text-align:left !important;justify-self:start !important;line-height:1.08;
  }
  html[data-al^="tr"] .hero-title .tb{display:inline;}

  /* TR1 — 3 linhas: 12 → 32 → 37 caracteres */
  html[data-al="tr1"] .hero-title .s1,
  html[data-al="tr1"] .hero-title .s4{display:block;}

  /* TR2 — 4 linhas, degraus mais suaves: 12 → 19 → 26 → 23 */
  html[data-al="tr2"] .hero-title .s1,
  html[data-al="tr2"] .hero-title .s3,
  html[data-al="tr2"] .hero-title .s5{display:block;}

  /* TR3 — 4 linhas com base longa: 12 → 13 → 18 → 37 */
  html[data-al="tr3"] .hero-title .s1,
  html[data-al="tr3"] .hero-title .s2,
  html[data-al="tr3"] .hero-title .s4{display:block;}

  /* TR4 — TR1 com tipografia maior e entrelinha justa */
  html[data-al="tr4"] .hero-title{font-size:clamp(46px,4.4vw,60px);line-height:1.02;letter-spacing:-.03em;}
  html[data-al="tr4"] .hero-title .s1,
  html[data-al="tr4"] .hero-title .s4{display:block;}
}
@media (min-width:1280px){
  html[data-al="tr4"] .hero-title{font-size:64px;}
}