/* ==========================================================================
   tipografia-base.css  ·  Estúdio Araújo / MazyOS
   Garantia tipográfica pra QUALQUER site ou HTML (o que o motor de carrossel
   faz pro carrossel, este arquivo faz pro resto). Importar cedo, antes do CSS
   do projeto, pra o projeto poder sobrescrever quando precisar.

   O que resolve, sem depender de ninguém lembrar:
   - título não quebra mais no meio de expressão ("placa / certa")
   - corpo não deixa palavra órfã sozinha na última linha
   - nada de palavra partida com hífen feio
   - medida de linha controlada (leitura fluida no celular)

   Regra nº0 do sistema continua valendo: nada de travessão, nada de emoji em
   peça de cliente. Isto aqui é só a camada de quebra/medida.
   ========================================================================== */

/* Títulos e subtítulos: equilibra as linhas, mata a órfã do título. */
h1, h2, h3, h4,
.title, .headline, .subtitle, .eyebrow, .hero-title, .section-title {
  text-wrap: balance;          /* Chrome/Edge/Safari recentes; degrada sem quebrar */
}

/* Corpo de texto: tira a palavra sozinha na última linha. */
p, li, blockquote, .body, .lead, .desc {
  text-wrap: pretty;           /* Chrome 117+; onde não tiver, cai pro normal */
}

/* Nada de hifenização automática (quebra palavra no meio e fica feio). */
* {
  -webkit-hyphens: none;
  hyphens: none;
}

/* Medida de linha: o que mais causa quebra ruim.
   Corpo entre ~50 e 75 caracteres (66 ideal). Use a classe onde fizer sentido;
   não é global pra não brigar com grids e colunas do projeto. */
.medida,
.prose p, .prose li,
article p, .rich-text p {
  max-width: 66ch;             /* desktop confortável */
}

/* Alinhamento: corpo à esquerda, nunca justificado na web (abre rios/buracos). */
.prose, article, .rich-text {
  text-align: left;
  text-wrap: pretty;
}

/* Pares que não podem separar: use a classe .nao-quebra ou   direto.
   Ex.: <span class="nao-quebra">R$ 6.997</span>, <span class="nao-quebra">Zona Sul</span> */
.nao-quebra {
  white-space: nowrap;
}

/* Respeita quem pediu menos movimento, sem quebrar layout (só um lembrete:
   reduced-motion reduz MOVIMENTO, nunca funcionalidade). */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}