/* ═══════════════════════════════════════════════════════════════
   HARUS — REFINAMENTO TIPOGRÁFICO GLOBAL
   Baseado no Manual da Marca (seção Tipográfico, pág. 20):
   fonte institucional Myriad Pro; para web, o manual autoriza
   fonte a critério do designer — usamos Source Sans 3 (sucessora
   open-source da Myriad, pela Adobe) no texto e mantemos a
   Playfair Display como assinatura editorial dos títulos.

   Este arquivo é carregado por último e SÓ ajusta tipografia e
   diagramação — nenhuma cor é alterada aqui.
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. BASE ────────────────────────────────────────────────
   Sobe a base de 16 → 17px: todos os tamanhos em rem crescem
   ~6% de uma vez, mantendo as proporções da hierarquia. */
html { font-size: 17px; }

/* ─── 2. MICRO-RÓTULOS (eyebrows, tags, selos) ──────────────
   Eram 0.56–0.65rem (≈9–10px). Piso novo: 0.72rem (≈12px),
   preservando o tracking largo que dá o ar editorial. */
.section-tag,
.cat-eyebrow,
.eyebrow-label,
.hero-eyebrow,
.hero-page-eyebrow,
.press-hero .eyebrow-label,
.article-tag,
.brand-origin,
.brand-hero-origin,
.product-card-tag,
.press-outlet,
.intro .tag,
.presenca-inner .tag,
.page-hero .tag,
.timeline-year,
.stat-label,
.grid-count,
.distribuidoras h4,
.ci-label,
.form-group label,
.footer-social a,
.eyebrow {
  font-size: 0.72rem;
}

.sust-seal figcaption { font-size: 0.66rem; }
.bg-status,
.canvas-hint { font-size: 0.8rem; }

/* ─── 3. NAVEGAÇÃO ──────────────────────────────────────────── */
.nav-links a { font-size: 0.82rem; }
.nav-cta { font-size: 0.78rem !important; }
.nav-dropdown-menu a { font-size: 0.76rem; }
.nav-drawer a { font-size: 1.05rem; }

/* ─── 4. AÇÕES: botões, links de seta, chips ────────────────
   Eram 0.65–0.75rem. Novo piso: 0.78–0.82rem. */
.cat-cta,
.article-link,
.release-link,
.link-arrow,
.article-back,
.brand-back,
.map-cta,
.press-link {
  font-size: 0.78rem;
}

.btn-primary,
.btn-ghost,
.btn-gold,
.btn-outline-dark,
.btn-experiencia,
.wa-btn,
.drawer-cta,
.product-customize-btn,
.ctrl-btn {
  font-size: 0.8rem;
}

.cat-line,
.cidade-tag,
.dist-tag,
.marquee-item span {
  font-size: 0.8rem;
}

.hero-scroll span,
.hero-scroll-hint span,
#scroll span { font-size: 0.68rem; }

#sound-toggle { font-size: 0.68rem; }

/* ─── 5. CORPO DE TEXTO ─────────────────────────────────────
   Descrições e parágrafos sobem de 0.82–0.9rem para 0.95–1rem. */
.cat-desc,
.line-card p,
.why-item p,
.mvv-text,
.map-stat-label,
.press-contact,
.sust-content p,
.presenca p,
.page-intro p,
.brand-about-text p,
.footer-desc,
.timeline-text,
.depo-card p,
.form-group input,
.form-group select,
.form-group textarea,
.ci-value {
  font-size: 0.95rem;
}

.intro-text p,
.intro-body p,
.hero-sub,
.subtitle,
.brand-hero-tagline,
.press-hero p,
.brand-cta p,
.cta-section p,
.map-info > p,
.contato-info p,
.mvv-header p {
  font-size: 1rem;
}

.footer-col a { font-size: 0.9rem; }
.footer-bottom { font-size: 0.78rem; }

/* Artigos: conforto de leitura longa */
.article-body p,
.article-body li { font-size: 1.05rem; line-height: 1.9; }

/* ─── 6. TÍTULOS ────────────────────────────────────────────
   Mínimos dos clamps sobem para o título nunca ficar tímido
   no espaço disponível — nem no desktop, nem no mobile. */
.cat-title { font-size: clamp(2.4rem, 3.6vw, 3.6rem); }

.intro h2,
.intro-text h2 { font-size: clamp(2.2rem, 3.5vw, 3.1rem); }

.presenca h2,
.brand-lines-header h2,
.brand-why h2,
.brand-cta h2,
.brand-about-text h2,
.mvv-header h2,
.map-info h2,
.cta-section h2,
.marcas-header h2,
.timeline-header h2,
.depoimentos-header h2,
.page-intro h2,
.sust-content h2,
.contato-info h2 {
  font-size: clamp(2.1rem, 3.1vw, 2.9rem);
}

.press-hero h1 { font-size: clamp(2.6rem, 5vw, 4.2rem); }
.article-hero h1 { font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.28; }
.hero-page-content h1 { font-size: clamp(3rem, 6vw, 5.8rem); }

.line-card h3 { font-size: 1.3rem; }
.article-card h2 { font-size: 1.35rem; }
.release-item h2 { font-size: 1.25rem; }
.why-item h4 { font-size: 1.1rem; }
.mvv-title { font-size: 1.45rem; }
.timeline-title { font-size: 1.2rem; }
.footer-col h4 { font-size: 0.72rem; }
.modal-controls h2 { font-size: 1.4rem; }
.modal-controls .vol { font-size: 0.82rem; }
.product-info h3 { font-size: 0.88rem; }
.product-info span { font-size: 0.78rem; }
.how-step h3 { font-size: 0.95rem; }
.how-step p { font-size: 0.88rem; }
.grid-header h2 { font-size: 1.8rem; }

/* ─── 7. DIAGRAMAÇÃO / RESPIRO DE LEITURA ───────────────────── */
.cat-desc { line-height: 1.85; }
.article-body { max-width: 740px; }
.page-intro p,
.presenca p { max-width: 460px; }

/* Containers de título acompanham a escala nova */
.hero-content { max-width: 920px; }
.hero-sub { max-width: 560px; }

/* ─── 8. MOBILE (≤ 900px) ───────────────────────────────────── */
@media (max-width: 900px) {
  html { font-size: 16.5px; }

  /* Títulos de página nunca menores que isso no celular */
  .press-hero h1 { font-size: clamp(2.3rem, 9vw, 3rem); }
  .cat-title { font-size: clamp(2.1rem, 8.5vw, 2.8rem); }
  .hero-page-content h1 { font-size: clamp(2.6rem, 11vw, 3.6rem); }
  .article-hero h1 { font-size: clamp(1.8rem, 7.5vw, 2.4rem); }

  /* Corpo confortável no polegar */
  .article-body p,
  .article-body li { font-size: 1.02rem; }

  /* Respiro lateral consistente */
  .cat-content { padding-left: 26px; padding-right: 26px; }
  .article-body { padding-left: 22px; padding-right: 22px; }

  /* A dica de scroll colide com o título do hero em telas estreitas */
  .hero-scroll-hint { display: none; }
}