/* ===== Huella Hídrica – Stepper ===== */
.hh-steps {
  --hh-si: #6abf5a;
  --hh-no: #e36461;
  --hh-azul: #02558b;
  --hh-gray: #9a9a9a;
  --node: 36px;
  --line: 4px;
  --gap: 16px;
  position: relative;
  max-width: 960px;
  margin-inline: auto;
}

.hh-steps__viewport {
  position: relative;
  overflow: visible;
}

.hh-steps__track {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--node) / 2);
  height: var(--line);
  background: var(--hh-gray);
  transform: translateY(-50%);
  border-radius: 999px;
}

.hh-steps__progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: var(--hh-si);
  border-radius: 999px;
}

/* Lista e items */
.hh-steps__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: var(--gap);
  position: relative;
}

.hh-step {
  flex: 1 1 0;
  min-width: calc(var(--node) + 40px);
  text-align: center;
  position: relative;
}

.hh-step__node {
  width: var(--node);
  height: var(--node);
  margin: 0 auto;
  border-radius: 50%;
  border: 2px solid var(--hh-gray);
  background: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: var(--hh-azul);
}

.hh-step__label {
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--hh-azul);
}

/* Estados */
.hh-step.is-complete .hh-step__node {
  background: var(--hh-si);
  border-color: var(--hh-si);
  color: #fff;
}

.hh-step.is-current .hh-step__node {
  border-color: var(--hh-azul);
  box-shadow: 0 0 0 4px rgba(2, 85, 139, 0.12);
}

/* ========= MODO CARRUSEL (scrollable hasta 1200px) ========= */
/* ESTO SE MODIFICA */
@media (max-width: 1199.98px) {
  .hh-steps {
    --node: 28px;
    --gap: 12px;
    max-width: 100%;
  }

  .hh-steps__viewport {
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }

  .hh-steps__list {
    justify-content: flex-start;
    gap: var(--gap);
    width: max-content;
    padding: 0 12px;
    position: relative;
  }

  /* Ocultamos las barras fijas de desktop */
  .hh-steps__track,
  .hh-steps__progress {
    display: none;
  }

  /* ===== Fondo gris y barra de progreso ===== */
  .hh-steps__list::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(var(--node) / 2);
    width: 100%; /* usar ancho completo del contenido */
    height: var(--line);
    background: var(--hh-gray);
    transform: translateY(-50%);
    border-radius: 999px;
    z-index: 0; /* detrás de los nodos */
  }

  .hh-steps__list::after {
    content: "";
    position: absolute;
    left: 0;
    top: calc(var(--node) / 2);
    width: var(--progress, 0%);
    height: var(--line);
    background: var(--hh-si);
    transform: translateY(-50%);
    border-radius: 999px;
    z-index: 0;
  }

  .hh-step {
    flex: 0 0 auto;
    min-width: calc(var(--node) + 40px);
    text-align: center;
    z-index: 1; /* los nodos por encima de la barra */
  }

  .hh-step__label {
    font-size: 0.85rem;
  }

  /* Oculta la barra de scroll */
  .hh-steps__viewport {
    scrollbar-width: none; /* Firefox */
  }

  .hh-steps__viewport::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
  }
}

/* ===== MOBILE FIX (redundante, pero por compatibilidad) ===== */
@media (max-width: 767.98px) {
  .hh-steps {
    --node: 28px;
    --gap: 12px;
  }

  .hh-steps__viewport {
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }

  .hh-steps__list {
    justify-content: flex-start;
    gap: var(--gap);
    width: max-content;
    padding: 0 12px;
    position: relative;
  }

  .hh-steps__track,
  .hh-steps__progress {
    display: none;
  }

  .hh-steps__list::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(var(--node) / 2);
    width: 100%;
    height: var(--line);
    background: var(--hh-gray);
    transform: translateY(-50%);
    border-radius: 999px;
    z-index: 0;
  }

  .hh-steps__list::after {
    content: "";
    position: absolute;
    left: 0;
    top: calc(var(--node) / 2);
    width: var(--progress, 0%);
    height: var(--line);
    background: var(--hh-si);
    transform: translateY(-50%);
    border-radius: 999px;
    z-index: 0;
  }

  .hh-step {
    flex: 0 0 auto;
    min-width: calc(var(--node) + 40px);
    z-index: 1;
  }

  .hh-step__label {
    font-size: 0.85rem;
  }

  .hh-steps__viewport {
    scrollbar-width: none;
  }

  .hh-steps__viewport::-webkit-scrollbar {
    display: none;
  }
}