/* ==========================================================================
  TÍTULOS */

:root {
  --ttl-lime: var(--color-lime);
  --ttl-cream: var(--color-cream);
  --ttl-peach: var(--color-peach);
  --ttl-ink: var(--color-ink);
  --ttl-size: var(--fs-h2);
  --ttl-weight: 300;
  --ttl-tracking: 3px;
}

/* 1. Título de sección (nivel 1) ------------------------------------------ */
@media (min-width: 768px) {
  .ttl {
    font-size: var(--ttl-size) !important;
    letter-spacing: var(--ttl-tracking) !important;
    line-height: 1.1 !important;
  }
}
.ttl {
  font-weight: var(--ttl-weight) !important;
  font-style: normal;
  text-transform: uppercase !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .18);
}
.ttl em { font-style: normal; }

/* Colores intercalados (la línea .rule que acompaña toma el mismo color) */
.ttl-lime  { color: var(--ttl-lime)  !important; }
.ttl-cream { color: var(--ttl-cream) !important; }
.ttl-peach { color: var(--ttl-peach) !important; }
.ttl-ink   { color: var(--ttl-ink)   !important; text-shadow: none; }

.ttl-lime  + .rule { background: var(--ttl-lime)  !important; }
.ttl-cream + .rule { background: var(--ttl-cream) !important; }
.ttl-peach + .rule { background: var(--ttl-peach) !important; }
.ttl-ink   + .rule { background: var(--ttl-ink)   !important; }

/* Los rubros de casas culturales dibujan su línea con ::after */
.ttl.rubro::after, .ttl.cc-rubro::after { background: currentColor !important; opacity: .55; }

/* 2. «Descripción del proyecto» (etiqueta) y nombre del proyecto ----------- */
@media (min-width: 768px) {
  .ttl-eyebrow {
    font-size: var(--fs-h3) !important;
    letter-spacing: 2px !important;
    line-height: 1.2 !important;
  }
  .ttl-project {
    font-size: var(--fs-lead) !important;
    letter-spacing: .5px !important;
    line-height: 1.25 !important;
  }
}
.ttl-eyebrow {
  font-weight: 400 !important;
  text-transform: uppercase !important;
  color: var(--ttl-lime) !important;
}
.ttl-project {
  font-weight: 300 !important;
  text-transform: none !important;
  color: var(--ttl-cream) !important;
}

/* 3. Móvil: mismo tamaño para todos (mobile.css fija 24px en main h2) ------- */
@media (max-width: 767px) {
  main h2.ttl { font-size: 24px !important; line-height: 1.25 !important; }
}