/* ============================================
   TIPOGRAFIA DE TOT EL WEB (2-11-2026)
   L'estil que es va provar a Estètica Avançada No Invasiva el 30-10-2026, estès a totes les pàgines a
   petició de l'usuari: títols amb Manrope (té ciríl·lic), mides més contingudes i fotos del mig del text
   més petites. Es carrega just després de styles.css i només hi sobreescriu això.
   ============================================ */

:root {
  --font-heading: 'Manrope', 'Inter', 'Segoe UI', sans-serif;
}

/* --- Títols --- */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.15; }
h2 { font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.25; }
h3 { font-size: clamp(1.1rem, 1.4vw, 1.2rem); line-height: 1.35; font-weight: 600; }
h4 { font-size: clamp(1rem, 1.2vw, 1.1rem); }

/* Les frases decoratives en cursiva (no són títols) es queden amb la serif: Manrope no té cursiva */
body .hero-subtitle,
body .hv2-subtitle {
  font-family: 'Playfair Display', Georgia, serif;
}

/* --- Capçaleres de pàgina --- */
.page-hero h1,
.blog-hero h1 {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

.page-hero p {
  font-size: 1.05rem;
  max-width: 640px;
}

.article-hero h1 {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 900px;
}

.page-hero .breadcrumb,
.article-hero .breadcrumb {
  flex-wrap: wrap;
  row-gap: 0.25rem;
}

.page-hero .breadcrumb > *,
.article-hero .breadcrumb > * {
  white-space: nowrap;
}

/* --- Títols del contingut --- */
.specialty-main h2 {
  margin-top: 2.75rem;
  margin-bottom: 0.75rem;
}

.specialty-main .section-header h2 {
  margin-top: 0;
}

.specialty-main h3 {
  color: var(--primary-blue);
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

.article-body h2 {
  font-size: clamp(1.35rem, 1.9vw, 1.6rem);
  line-height: 1.25;
}

.article-body h3 {
  font-size: clamp(1.1rem, 1.4vw, 1.2rem);
}

.section-header {
  margin-bottom: 2rem;
}

.section-header .section-label {
  letter-spacing: 2px;
}

/* --- Fotos del mig del text: com a molt 520 px, com la foto principal dels articles --- */
.article-body img:not(.article-featured-img) {
  display: block;
  max-width: 520px;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 600px) {
  .article-body img:not(.article-featured-img) {
    max-width: 100%;
  }

  .section-header .section-label::before,
  .section-header .section-label::after {
    display: none;
  }
}