/* ==========================================================================
   CABECERA DE PÁGINA — migas de pan compartidas por las subpáginas
   ========================================================================== */

.page-head {
  padding-top: clamp(1.25rem, 0.6rem + 2.4vw, 2.5rem);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--space-4);
  font: 500 var(--text-2xs) / 1 var(--font-ui);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.crumbs a {
  transition: color var(--duration-fast) var(--ease-out);
}

.crumbs a:hover {
  color: var(--color-steel);
}

.crumbs li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--color-gold);
}

/* Entrada del título de página (lo usan sobremi, servicios y proyectos) */
@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(0.6rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* --- Encabezado de subpágina: título, lema y frase lateral (proyectos, material) --- */

.page-hero {
  display: grid;
  gap: var(--space-5);
  padding-bottom: var(--space-6);
}

.page-hero__title {
  /* Mismo estilo que el título de sobremi.html (.page-head__title) */
  font: 500 clamp(2.5rem, 1.1rem + 6.6vw, 6.4rem) / 0.98 var(--font-display);
  letter-spacing: -0.014em;
  color: var(--color-steel);
  animation: page-in 1s var(--ease-out) both;
}

.page-hero__sub {
  margin-top: var(--space-3);
  font: 700 clamp(1.5rem, 0.9rem + 2.1vw, 2.35rem) / 1.08 var(--font-display);
  letter-spacing: -0.03em;
  color: var(--color-navy);
  text-wrap: balance;
}

.page-hero__lead {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-ink);
  max-width: 24em;
}

/* --- Título de página: el punto final en bronce (material, redes) ----------------------------
   #8a6420 es el latón oscurecido que ya usa la numeración sobre fondo claro (.company--light);
   el latón normal (#c39a4e) no llega a 3:1 sobre el papel. */

.page-hero__dot {
  color: #8a6420;
}

@media (min-width: 64rem) {
  .page-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    align-items: center;
    gap: var(--space-7);
  }

  .page-hero__lead {
    padding-left: var(--space-5);
    border-left: 1px solid var(--line-strong);
  }
}