/* =========================================================
   COMPONENTS — Section Headers Reutilizables
   =========================================================

   Componente reutilizable para los encabezados de cada sección
   del sitio (galería, blog, about, últimas entradas).

   Estructura:
   .section-header
     .section-label  ← Texto pequeño en mono rosa
     .section-title  ← Título grande en display serif
   ========================================================= */

.section-header {
	text-align: center;
	margin-bottom: 2.5rem;
}

/* Etiqueta pequeña encima del título (ej: "Especies del Herbario") */
.section-label {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-cosmos);
	margin-bottom: 0.4rem;
}

/* Título de la sección: serif italic grande, responsive */
.section-title {
	font-family: var(--font-display);
	font-weight: 500;
	font-style: italic;
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	line-height: 1.1;
	color: var(--color-ink);
	margin: 0;
}