/* Tipografia da Lume: letras com espaço natural, um só estilo por título (sem romano + itálico misturados)
   e textos pequenos legíveis. Carregado depois do style.css. */

/* Títulos: serifa um pouco mais firme e sem espremer as letras */
h1, h2, h3,
.brand > span,
.manifesto p, .manifesto-track p,
.post-title, summary, .care-steps li, .social-copy h2 {
  font-weight: 500;
  letter-spacing: -0.01em;
}
h1, .hero h1 { letter-spacing: -0.018em; }
h2 { letter-spacing: -0.015em; }
h3 { letter-spacing: -0.008em; }
.brand > span { letter-spacing: -0.02em; font-size: 58px; }
.site-footer .brand > span { font-size: 46px; }
.hero h1 { font-size: clamp(58px, 7.4vw, 116px); line-height: 1.04; }
.contact-form > .button { letter-spacing: 0; }

/* Um só estilo por título: destaque só pela cor, sem itálico */
em, .hero-photo figcaption, .care-steps li span { font-style: normal; }
h1 em, h2 em, h3 em { color: #566650; font-weight: 500; }
.space-section h2 em { color: #dfe7d6; }
.hero-photo figcaption { font-weight: 500; font-size: 22px; letter-spacing: 0; }
.manifesto p em, .manifesto-track p em { color: #4f5f46; }

/* Faixa que rola: as palavras somem suavemente nas bordas e atrás do botão de pausa, sem letras cortadas ao meio */
.manifesto-window {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 150px), transparent calc(100% - 78px));
  mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 150px), transparent calc(100% - 78px));
}
@media (max-width: 600px) {
  .manifesto-window {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 96px), transparent calc(100% - 60px));
    mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 96px), transparent calc(100% - 60px));
  }
}

/* Texto corrido: sem espaçamento negativo, com mais contraste */
body { letter-spacing: 0; }
.hero-copy > p { letter-spacing: 0; color: #4b5546; line-height: 1.7; }
.section-description, .service > p, .contact-copy > p:not(.eyebrow), details > p, .space-description { letter-spacing: 0; }
.service > p, details > p { color: #4f5a4a; }

/* Nada abaixo de 12px, e textos pequenos sobre o verde bem claros */
.demo-bar { font-size: 12px; letter-spacing: 0.14em; }
.demo-bar button { font-size: 12px; }
.eyebrow { font-size: 12px; letter-spacing: 0.18em; }
.space-copy .eyebrow { color: #f8faf4; }
.brand > small { font-size: 11px; } /* parte do logotipo */
dialog .eyebrow { font-size: 12px; }
.service-note, .form-note, .demo-note p, .social-disclaimer, .dialog-copy .detail-note, dialog .detail-note { font-size: 12px; line-height: 1.7; }
.image-disclaimer { font-size: 12px; letter-spacing: 0.06em; color: #f8faf4; }
.site-footer > p, .site-footer > .text-link, .footer-socials .text-link { font-size: 12px; }
.photo-expand, .service-link, .text-link { font-size: 13px; }
label > span, .gallery-dialog > p, dialog .detail-note { font-size: 12px !important; }
.service-note, .form-note, .demo-note p { font-size: 12px; }

@media (max-width: 600px) {
  .brand > span { font-size: 46px; }
  .hero h1 { font-size: clamp(52px, 12vw, 72px); letter-spacing: -0.015em; line-height: 1.04; }
  .demo-bar { font-size: 12px; letter-spacing: 0.08em; }
  .demo-bar button { font-size: 12px; }
  .eyebrow { font-size: 12px; }
  .site-footer > p { font-size: 12px; }
}