/**
 * REFORMAS YAMYLU — Sección Proceso / Cómo trabajamos
 * Timeline horizontal · 4 pasos · Línea dorada conectora · Watermarks per step
 * Fondo: Surface (#151F35) — alterna con Night del bloque anterior
 */

/* ═══════════════════════════════════════════
   SECCIÓN PRINCIPAL
═══════════════════════════════════════════ */

.proceso {
  position: relative;
  background-color: var(--color-warm-surface);
  padding: var(--space-3xl) 0;
  overflow: hidden;
}

/* Micro-calidez stone sobre el fondo oscuro cálido */
.proceso::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-stone-overlay);
  pointer-events: none;
  z-index: 0;
}

/* Línea divisoria superior — transición cálida desde Nosotros */
.proceso::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--color-stone-border) 25%,
    var(--color-stone-border) 75%,
    transparent 100%
  );
  z-index: 1;
}

/* Número de sección — marca de agua */
.proceso__section-num {
  position: absolute;
  top: var(--space-xl);
  right: 80px;
  font-family: var(--font-display);
  font-size: clamp(100px, 14vw, 200px);
  font-weight: 300;
  line-height: 1;
  color: rgba(201, 164, 74, 0.05);
  user-select: none;
  pointer-events: none;
  z-index: 0;
  letter-spacing: -0.04em;
}

/* ═══════════════════════════════════════════
   HEADER
═══════════════════════════════════════════ */

.proceso__header {
  position: relative;
  z-index: 1;
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 80px;
  margin-bottom: clamp(72px, 9vw, 128px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2xl);
}

.proceso__header-left {
  flex: 0 0 auto;
}

.proceso__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: clamp(20px, 2.5vw, 32px);
}

.proceso__eyebrow-line {
  display: block;
  width: 0;
  height: 1px;
  background: var(--color-gold-dim);
  flex-shrink: 0;
  transition: width 800ms var(--ease-premium) 200ms;
}

.proceso__eyebrow.revealed .proceso__eyebrow-line {
  width: 40px;
}

.proceso__eyebrow-text {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-silver);
}

.proceso__headline {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 72px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--color-white);
  margin: 0;
  max-width: 680px;
}

.proceso__headline em {
  font-style: italic;
  font-weight: 400;
  color: var(--color-gold);
}

/* Nota lateral — copywriting de apoyo, lado derecho */
.proceso__header-note {
  font-family: var(--font-body);
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 400;
  line-height: 1.78;
  color: rgba(138, 155, 181, 0.65);
  max-width: 260px;
  flex-shrink: 0;
  padding-bottom: 6px;
}

/* ═══════════════════════════════════════════
   TIMELINE — contenedor de los 4 pasos
═══════════════════════════════════════════ */

.proceso__timeline {
  position: relative;
  z-index: 1;
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 80px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
}

/* ═══════════════════════════════════════════
   STEP — Cada paso del proceso
═══════════════════════════════════════════ */

.proceso__step {
  position: relative;
  /* Sin padding horizontal — el track ocupa la anchura completa de la columna */
}

/* Número en marca de agua — Cormorant ghost detrás del contenido */
.proceso__step-bg-num {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-display);
  font-size: clamp(80px, 9vw, 130px);
  font-weight: 300;
  line-height: 0.88;
  color: rgba(201, 164, 74, 0.07);
  user-select: none;
  pointer-events: none;
  letter-spacing: -0.04em;
  z-index: 0;
}

/* Track — fila que contiene el punto dorado y la línea conectora */
.proceso__step-track {
  position: relative;
  display: flex;
  align-items: center;
  height: 28px;
  /* Empuja hacia abajo para que el watermark sea visible por encima */
  margin-top: clamp(80px, 9vw, 124px);
  margin-bottom: clamp(28px, 3.5vw, 44px);
  z-index: 2;
}

/* Punto dorado */
.proceso__step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-gold);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 0 4px rgba(201, 164, 74, 0.10);
  transition: box-shadow 500ms var(--ease-premium);
}

.proceso__step:hover .proceso__step-dot {
  box-shadow: 0 0 0 7px rgba(201, 164, 74, 0.16);
}

/* Línea conectora dorada hacia el siguiente punto
   Se extiende desde el borde derecho del dot hasta el borde derecho de la columna.
   Con gap:0, el borde derecho de esta columna = borde izquierdo de la siguiente,
   donde el siguiente dot está en left:0 → línea visualmente continua. */
.proceso__step:not(:last-child) .proceso__step-track::after {
  content: '';
  position: absolute;
  left: 10px;   /* inmediatamente a la derecha del dot */
  right: 0;     /* hasta el borde derecho de esta columna */
  height: 1px;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(
    to right,
    rgba(201, 164, 74, 0.38) 0%,
    rgba(201, 164, 74, 0.12) 100%
  );
  z-index: 1;
}

/* ─── Contenido del paso ─── */
.proceso__step-content {
  position: relative;
  z-index: 1;
  padding-right: clamp(20px, 3vw, 48px);
}

/* Etiqueta numérica — "Paso 01" en DM Sans dorado */
.proceso__step-num {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 14px;
}

/* Título del paso — Cormorant editorial */
.proceso__step-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 36px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--color-white);
  margin: 0 0 var(--space-sm);
}

.proceso__step-title em {
  font-style: italic;
  font-weight: 400;
  color: rgba(244, 239, 230, 0.60);
}

/* Descripción del paso — DM Sans plata */
.proceso__step-desc {
  font-family: var(--font-body);
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 400;
  line-height: 1.72;
  color: rgba(138, 155, 181, 0.78);
  margin: 0;
}

/* ═══════════════════════════════════════════
   REVEAL — Animaciones de entrada
═══════════════════════════════════════════ */

/* Dot aparece con scale cuando el paso se revela */
.proceso__step .proceso__step-dot {
  transform: scale(0.2);
  transition:
    transform 600ms var(--ease-premium) calc(var(--stagger, 0) * 120ms + 300ms),
    box-shadow 500ms var(--ease-premium);
}

.proceso__step.revealed .proceso__step-dot {
  transform: scale(1);
}

/* ═══════════════════════════════════════════
   RESPONSIVE — TABLET (2 columnas)
═══════════════════════════════════════════ */

@media (max-width: 1023px) {
  .proceso__section-num {
    display: none;
  }

  .proceso__header {
    padding: 0 48px;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
  }

  .proceso__header-note {
    max-width: 420px;
  }

  .proceso__timeline {
    padding: 0 48px;
    grid-template-columns: repeat(2, 1fr);
    row-gap: clamp(56px, 8vw, 96px);
  }

  /* En cuadrícula de 2 col, los pasos 2 y 4 están al final de su fila.
     Ocultar la línea conectora de los pasos pares (final de fila). */
  .proceso__step:nth-child(2n) .proceso__step-track::after {
    display: none;
  }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — MOBILE (1 columna, vertical)
═══════════════════════════════════════════ */

@media (max-width: 767px) {
  .proceso {
    padding: var(--space-xl) 0;
  }

  .proceso__header {
    padding: 0 24px;
    margin-bottom: var(--space-xl);
  }

  .proceso__timeline {
    padding: 0 24px;
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  /* Watermark grande — no cabe en mobile, se oculta */
  .proceso__step-bg-num {
    display: none;
  }

  /* Cada paso en mobile — display de dos columnas: dot | contenido */
  .proceso__step {
    display: grid;
    grid-template-columns: 28px 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 20px;
    padding-bottom: clamp(40px, 8vw, 64px);
  }

  .proceso__step:last-child {
    padding-bottom: 0;
  }

  /* Track en mobile — columna izquierda, abarca las dos filas del step */
  .proceso__step-track {
    grid-column: 1;
    grid-row: 1 / 3;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    margin-top: 2px; /* alineación visual con el número de paso */
    margin-bottom: 0;
  }

  /* Línea vertical — reemplaza la línea horizontal en mobile */
  .proceso__step:not(:last-child) .proceso__step-track::after {
    position: absolute;
    left: 50%;
    top: 10px;        /* debajo del dot */
    right: auto;
    bottom: calc(-1 * clamp(40px, 8vw, 64px)); /* llega al dot del siguiente paso */
    width: 1px;
    height: auto;
    transform: translateX(-50%);
    background: linear-gradient(
      to bottom,
      rgba(201, 164, 74, 0.30) 0%,
      rgba(201, 164, 74, 0.06) 100%
    );
  }

  /* Contenido a la derecha del dot */
  .proceso__step-content {
    grid-column: 2;
    grid-row: 1;
    padding-right: 0;
  }

  /* El ::after del track que normalmente era horizontal,
     ahora está sobreescrito para ser vertical — reset de transform */
  .proceso__step-track::after {
    transform: translateX(-50%) !important;
  }
}