/*
 * encabezado-seccion.css — eyebrow + guion + título bicolor (plan-segmentacion.md §2.5).
 * 3 variantes de layout del guion confirmadas — nunca asumir que son la misma:
 *   .gyo-encabezado--centrado       → guion a ambos lados del eyebrow, texto centrado
 *   .gyo-encabezado--izquierda      → guion a la derecha del eyebrow, alineado a la izquierda
 *   (una 4ª variante, guion-subrayado debajo del eyebrow alineado a la izquierda, ya vive en
 *   inicio.css — `ultimos-proyectos`/`sobre-gyo` — no se migró acá todavía)
 * El título en dos tonos también tiene 2 formas: dos líneas completas de color distinto, o un
 * <span> de color dentro de la misma línea. Ambas conviven, el CSS no fuerza ninguna.
 */

.gyo-encabezado {
  --gyo-encabezado-color-eyebrow: var(--color-cafe-claro);
}

.gyo-encabezado__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--gyo-space-3); /* 16px, aprox. al gap medido entre texto y guion (10–16px) */
  font-size: var(--gyo-font-size-eyebrow); /* 24→16, Fase 3 */
  color: var(--gyo-encabezado-color-eyebrow);
  /* medido: variante centrada 55px hasta el título (nuestra-historia, procesos); variante
     izquierda 30px (por-que-elegirnos) — corregido 2026-08-17, un solo valor de 24px sin medir
     desalineaba el título en las 3 secciones que usan este componente. */
  margin: 0 0 55px 0;
}

.gyo-encabezado--izquierda .gyo-encabezado__eyebrow {
  margin-bottom: 30px;
}

.gyo-encabezado__eyebrow::before,
.gyo-encabezado__eyebrow::after {
  content: '';
  display: block;
  width: 48px; /* medido, constante en las 3 variantes */
  height: 1px;
  background-color: var(--gyo-encabezado-color-eyebrow);
}

/* Variante izquierda: solo guion a la derecha (sin ::before) */
.gyo-encabezado--izquierda .gyo-encabezado__eyebrow::before {
  display: none;
}

/* Variante centrada: los dos guiones, texto centrado */
.gyo-encabezado--centrado {
  text-align: center;
}

.gyo-encabezado--centrado .gyo-encabezado__eyebrow {
  justify-content: center;
}

.gyo-encabezado__titulo {
  font-size: var(--gyo-font-size-h2); /* 48→28, Fase 3 */
  margin: 0;
  color: var(--color-negro-texto);
  line-height: 1.17; /* medido: ~94px de leading para 80px, proporción consistente aplicada a 48px —
    ya es un múltiplo (no px fijo), escala sola con el font-size fluido, sin cambios acá */
}

.gyo-encabezado__titulo span,
.gyo-encabezado__titulo--cafe {
  color: var(--color-cafe-claro);
}