/* Layout auxiliar: encabezados de página interior, utilidades de grilla y flex */

.page-header {
  position: relative;
  padding-top: clamp(7rem, 16vh, 10rem);
  padding-bottom: var(--space-2xl);
  background: linear-gradient(160deg, #fff3e6 0%, var(--color-bg) 60%);
  overflow: hidden;
  isolation: isolate;
}

.page-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 50vw;
  height: 50vw;
  max-width: 640px;
  max-height: 640px;
  border-radius: 50%;
  top: -22%;
  right: -14%;
  background: radial-gradient(circle, #ffe3c2, transparent 70%);
  filter: blur(40px);
}

.page-header h1 {
  max-width: 20ch;
}

.page-header p {
  max-width: 60ch;
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
}

/* Cuando el encabezado va centrado hay que centrar también la CAJA, no solo el
   texto: con max-width pero sin margin-inline, el texto se centra dentro de un
   bloque que sigue pegado a la izquierda. En móvil no se nota porque 20ch/60ch
   son más anchos que la pantalla; en tablet y escritorio el título quedaba
   corrido a la izquierda mientras el eyebrow (sin max-width) sí se centraba. */
.page-header .text-center h1,
.page-header .text-center p,
.page-header .text-center .brand-name {
  margin-inline: auto;
}

/* Igual que en el hero: ".page-header p" pintaba gris el nombre de la fundación. */
.page-header .brand-name {
  margin-top: 0;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-orange);
}

/* Flex helpers */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-sm {
  gap: var(--space-sm);
}

.gap-md {
  gap: var(--space-md);
}

/* Columna de imagen + texto reutilizable (Nosotros, Apadrinamiento, Voluntariado) */
.split {
  display: grid;
  /* Columna explícita también en móvil: la implícita (auto) crece con el contenido
     y en 320 px desbordaba la pantalla por menos de un píxel. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .split--reverse .split__media {
    order: 2;
  }
}

.split__media img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  border-left: 3px solid var(--color-border);
  padding-left: var(--space-lg);
}

.timeline li {
  position: relative;
}

.timeline li::before {
  content: "";
  position: absolute;
  left: calc(var(--space-lg) * -1 - 8px);
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-orange);
  border: 3px solid var(--color-bg);
}

.steps-list {
  display: grid;
  gap: var(--space-lg);
  counter-reset: step;
}

@media (min-width: 720px) {
  .steps-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Variante vertical: un paso por fila con el número a la izquierda. Se usa en
     procesos de 4 o 5 pasos, donde la grilla de 3 columnas dejaría filas
     incompletas (3+1, 3+2) y cada paso demasiado estrecho para su texto. */
  .steps-list--vertical {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    max-width: 70ch;
    margin-inline: auto;
  }
}

.steps-list li {
  counter-increment: step;
  position: relative;
  /* El círculo del número mide 44px y va en top:0. El padding tiene que
     superarlo, si no el fondo naranja se pega al texto (antes era 2.5rem = 40px
     y el círculo invadía 4px de la primera línea). */
  padding-top: calc(44px + var(--space-sm));
}

.steps-list--vertical li {
  padding-top: 0;
  padding-left: calc(44px + var(--space-md));
  min-height: 44px;
}

.steps-list li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--color-white);
  background: var(--color-orange);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media print {
  .site-header,
  .back-to-top,
  .mobile-menu,
  .site-footer nav {
    display: none !important;
  }
}