/*
 * Encabezado de sección: overline + título a la izquierda, descripción a la derecha.
 * Patrón que se repite en casi todas las secciones del Figma.
 */
.xg-section-header {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--xg-space-8);
  padding-inline: var(--xg-inner-pad);
}

.xg-section-header__title {
  display: flex;
  flex-direction: column;
  gap: var(--xg-space-4);
}

.xg-section-header__overline {
  padding-inline: 2px;
}

.xg-section-header__description {
  padding-top: var(--xg-space-6);
}

.xg-section-header--center {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  gap: var(--xg-space-4);
}

.xg-section-header--center .xg-section-header__title {
  align-items: center;
  max-width: 1120px;
}

.xg-section-header--center .xg-section-header__description {
  padding-top: 0;
  max-width: 720px;
}

/* Variante apilada (columna lateral, p. ej. sección de proceso) */
/* Va dentro de una columna que ya tiene su padding: no se duplica */
.xg-section-header--stacked {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--xg-space-6);
  padding-inline: 0;
}

.xg-section-header--stacked .xg-section-header__description {
  padding-top: var(--xg-space-4);
}

/* Subrayado degradado que se dibuja al revelar el título */
.xg-title-accent {
  position: relative;
  display: inline;
  background-image: linear-gradient(90deg, var(--xg-primary), var(--xg-secondary));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 1.2s var(--xg-ease-out) 300ms;
}

.is-visible .xg-title-accent,
.xg-title-accent.is-visible {
  background-size: 100% 2px;
}

@media (max-width: 991px) {
  .xg-section-header {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--xg-space-5);
  }

  .xg-section-header__description {
    padding-top: 0;
  }
}

/* Los saltos de línea del Figma están pensados para 1440px; en móvil el texto fluye libre */
@media (max-width: 599px) {
  .xg-section-header br {
    display: none;
  }
}