/* ==========================================================================
   COMPONENTE · PASOS CON ISOTIPO  [equilatera_pasos]
   timeline: tarjeta con el isotipo fija a la izquierda y pasos con línea.
   sticky:   la sección se queda fija y el contenido cambia con el scroll.
   ========================================================================== */

.eq-steps {
  --px: calc(100vw / 1440);
  --eq-radius: 16px;
  --eq-line: #e2d8c7;
  --eq-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --eq-top: calc(var(--header-nav-height, 80px) + 24px);
  position: relative;
}

.eq-steps,
.eq-steps *,
.eq-steps *::before,
.eq-steps *::after {
  box-sizing: border-box;
}

.eq-steps__grid {
  display: grid;
  grid-template-columns: minmax(0, 571fr) minmax(0, 869fr);
  align-items: start;
}

/* ---------- Tarjeta con el isotipo ---------- */
.eq-steps__visual {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 571 / 582;
  border-radius: var(--eq-radius);
  overflow: hidden;
  background-color: var(--accent);
}

.eq-steps--timeline .eq-steps__visual-col {
  position: sticky;
  top: var(--eq-top);
}

.eq-iso {
  display: block;
  width: 58%;
  height: auto;
  overflow: visible;
}

.eq-iso__piece {
  fill: transparent;
  stroke: var(--light);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  transform: translate(var(--dx), var(--dy));
  transform-box: fill-box;
  transition:
    transform 0.9s var(--eq-ease),
    fill 0.6s ease 0.2s,
    stroke 0.6s ease 0.2s;
}

.eq-iso__piece.is-on {
  fill: var(--light);
  transform: none;
}

/* Sin JS: isotipo completo */
.eq-steps:not(.is-ready) .eq-iso__piece {
  fill: var(--light);
  transform: none;
}

/* ---------- Marcadores (comunes) ---------- */
.eq-steps__marker {
  flex: none;
  display: grid;
  place-items: center;
  width: max(36px, calc(48 * var(--px)));
  height: max(36px, calc(48 * var(--px)));
  border: 1.5px solid var(--dark-cream);
  border-radius: 50%;
  background-color: var(--light);
  font-family: var(--secondary-font);
  font-weight: 400;
  font-size: max(15px, calc(20 * var(--px)));
  line-height: 1;
  color: var(--dark-cream);
  transition:
    background-color 0.5s var(--eq-ease),
    border-color 0.5s var(--eq-ease),
    color 0.5s var(--eq-ease);
}

.eq-steps .eq-steps__title {
  margin: 0;
  padding: 0;
  font-family: var(--primary-font) !important;
  font-weight: 600;
  font-size: max(20px, calc(24 * var(--px)));
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--accent);
}

.eq-steps .eq-steps__text {
  max-width: calc(450 * var(--px));
  margin: calc(18 * var(--px)) 0 0;
  padding: 0;
  font-family: var(--secondary-font);
  font-weight: 400;
  font-size: max(15px, calc(18 * var(--px)));
  line-height: 1.55;
  color: var(--dark);
}

/* ==========================================================================
   TIMELINE
   ========================================================================== */
.eq-steps__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(150 * var(--px));
  padding: calc(95 * var(--px)) 0 calc(95 * var(--px)) calc(216 * var(--px));
}

.eq-steps__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: calc(70 * var(--px));
}

.eq-steps__item .eq-steps__marker {
  position: relative;
  z-index: 1;
}

.eq-steps__item.is-active .eq-steps__marker {
  border-color: var(--accent);
  background-color: var(--accent);
  color: var(--light);
}

.eq-steps__item .eq-steps__content {
  padding-top: calc(4 * var(--px));
  opacity: 0.45;
  transition: opacity 0.5s ease;
}

.eq-steps__item.is-active .eq-steps__content {
  opacity: 0.7;
}

.eq-steps__item.is-current .eq-steps__content {
  opacity: 1;
}

/* Línea (posición y alto los mide pasos.js) */
.eq-steps__line {
  position: absolute;
  top: 0;
  left: calc(216 * var(--px) + max(36px, calc(48 * var(--px))) / 2 - 0.75px);
  width: 1.5px;
  height: 0;
  background-color: var(--eq-line);
  pointer-events: none;
}

.eq-steps__fill {
  position: absolute;
  inset: 0;
  background-color: var(--accent);
  transform: scaleY(0);
  transform-origin: 50% 0;
}

/* ==========================================================================
   STICKY
   ========================================================================== */
.eq-steps__scroll {
  position: relative;
  height: calc(100vh + (var(--eq-steps) - 1) * 70vh);
}

.eq-steps__pin {
  position: sticky;
  top: var(--header-nav-height, 80px);
  display: flex;
  align-items: center;
  height: calc(100vh - var(--header-nav-height, 80px));
}

.eq-steps--sticky .eq-steps__grid {
  align-items: center;
  width: 100%;
}

.eq-steps--sticky .eq-steps__visual {
  max-height: calc(100vh - var(--header-nav-height, 80px) - 80px);
  aspect-ratio: 571 / 582;
}

.eq-steps__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background-color: rgba(246, 243, 236, 0.15);
}

.eq-steps__progress-bar {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--light);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.eq-steps__panels {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: center;
  padding-left: calc(216 * var(--px));
}

.eq-steps__panel {
  grid-area: 2 / 1;
  align-self: center;
  visibility: hidden;
  transition: visibility 0s linear 0.45s;
}

.eq-steps__panel > * {
  opacity: 0;
  transform: translateY(-24px);
  transition:
    opacity 0.35s ease,
    transform 0.45s var(--eq-ease);
}

.eq-steps__panel.is-current {
  visibility: visible;
  transition-delay: 0s;
}

.eq-steps__panel.is-current > * {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.6s ease,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.eq-steps__panel.is-current > :nth-child(1) { transition-delay: 0.15s; }
.eq-steps__panel.is-current > :nth-child(2) { transition-delay: 0.25s; }
.eq-steps__panel.is-current > :nth-child(3) { transition-delay: 0.35s; }

/* Paneles que entran desde abajo (al bajar) */
.eq-steps__panel:not(.is-current).is-next > * {
  transform: translateY(24px);
}

/* Contador que rueda (sticky) */
.eq-steps__count {
  grid-area: 1 / 1;
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  margin-bottom: calc(28 * var(--px));
  font-family: var(--secondary-font);
  color: var(--accent);
}

.eq-steps__digits {
  display: flex;
  height: 1em;
  overflow: hidden;
  font-size: max(40px, calc(56 * var(--px)));
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.eq-steps__digit-col {
  display: flex;
  flex-direction: column;
  transition: transform 0.8s cubic-bezier(0.22, 0.9, 0.24, 1);
  will-change: transform;
}

.eq-steps__digit-col > span {
  display: block;
  height: 1em;
}

.eq-steps__count .eq-steps__of {
  font-size: max(14px, calc(16 * var(--px)));
  color: var(--dark-cream);
}

.eq-steps__tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: calc(28 * var(--px));
  font-family: var(--secondary-font);
  font-size: max(14px, calc(16 * var(--px)));
  color: var(--dark-cream);
}

.eq-steps__tag .eq-steps__marker {
  border-color: var(--accent);
  background-color: var(--accent);
  color: var(--light);
}

.eq-steps--sticky .eq-steps .eq-steps__title,
.eq-steps--sticky .eq-steps__title {
  font-size: max(26px, calc(40 * var(--px)));
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.eq-steps--sticky .eq-steps__text {
  margin-top: calc(24 * var(--px));
}

/* ==========================================================================
   MÓVIL
   ========================================================================== */
@media (max-width: 999px) {
  .eq-steps {
    --px: calc(100vw / 390);
    --eq-top: calc(var(--header-nav-height, 60px) + 12px);
  }

  .eq-steps__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* La tarjeta se queda arriba (más baja) mientras pasan los pasos */
  .eq-steps--timeline .eq-steps__visual-col {
    z-index: 2;
  }

  .eq-steps--timeline .eq-steps__visual {
    aspect-ratio: auto;
    height: calc(170 * var(--px));
  }

  .eq-steps--timeline .eq-iso {
    width: auto;
    height: calc(118 * var(--px));
  }

  .eq-steps__list {
    gap: calc(56 * var(--px));
    padding: calc(48 * var(--px)) 0 calc(24 * var(--px));
  }

  .eq-steps__item {
    gap: calc(18 * var(--px));
  }

  .eq-steps__line {
    left: calc(max(36px, calc(48 * var(--px))) / 2 - 0.75px);
  }

  .eq-steps .eq-steps__text {
    max-width: none;
    margin-top: calc(10 * var(--px));
  }

  /* Sticky en móvil: isotipo arriba, texto debajo */
  .eq-steps--sticky .eq-steps__grid {
    gap: calc(28 * var(--px));
    align-content: center;
  }

  .eq-steps--sticky .eq-steps__visual {
    aspect-ratio: auto;
    height: min(38vh, calc(300 * var(--px)));
  }

  .eq-steps--sticky .eq-iso {
    width: auto;
    height: min(25vh, calc(200 * var(--px)));
  }

  .eq-steps__panels {
    padding-left: 0;
    min-height: calc(230 * var(--px));
    align-items: start;
  }

  .eq-steps__panel {
    align-self: start;
  }

  .eq-steps__tag,
  .eq-steps__count {
    margin-bottom: calc(16 * var(--px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .eq-steps *,
  .eq-steps *::before,
  .eq-steps *::after {
    transition-duration: 0.01s !important;
    transition-delay: 0s !important;
  }
}

.eq-steps .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}