/* Cómo funciona: mapa claro con paneles flotantes oscuros */
.como {
  margin-top: clamp(3rem, min(8vw, 10vh), 7rem);
}

.como__titulo {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  font-family: var(--letra-titulo);
  font-size: var(--t-medio);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.mapa {
  position: relative;
  border-radius: var(--radio-l);
  background: #efebe3;
  overflow: hidden;
}

.mapa__dibujo {
  width: 100%;
  height: clamp(20rem, min(46vw, 58vh), 36rem);
}

.mapa__suelo { fill: #efebe3; }
.mapa__lote { fill: #e3ddd1; }
.mapa__verde { fill: #e6e3d3; }

.mapa__rio,
.mapa__via,
.mapa__via-borde,
.mapa__corredor,
.mapa__pulso {
  fill: none;
  stroke-linecap: round;
}

.mapa__rio {
  stroke: #d9d1c1;
  stroke-width: 26;
}

.mapa__via-borde {
  stroke: #d6cfc1;
  stroke-width: 16;
}

.mapa__via {
  stroke: #fff;
  stroke-width: 11;
}

.mapa__corredor {
  stroke: var(--tinta);
  stroke-width: 9;
}

.mapa__pulso {
  stroke: #fff;
  stroke-width: 3;
  stroke-dasharray: 2 26;
  animation: pulso-via 2.4s linear infinite;
}

@keyframes pulso-via {
  to {
    stroke-dashoffset: -28;
  }
}

.mapa__nodo {
  fill: #fff;
  stroke: var(--tinta);
  stroke-width: 7;
}

.mapa__critico {
  fill: var(--naranja);
  stroke: #fff;
  stroke-width: 4;
}

.mapa__halo {
  fill: rgba(255, 107, 26, 0.22);
}

.mapa__nombre {
  font-family: var(--letra-titulo);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  fill: var(--tinta);
}

/* Panel flotante de leyenda */
.mapa__panel {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.5rem);
  left: clamp(0.75rem, 2vw, 1.5rem);
  max-width: 15.5rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radio-s);
  background: var(--tinta);
  color: #fff;
  box-shadow: 0 18px 40px -18px rgba(23, 22, 15, 0.55);
}

.mapa__panel strong {
  display: block;
  font-family: var(--letra-titulo);
  font-size: 1.125rem;
  line-height: 1.15;
}

.mapa__panel span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
}

.mapa__panel span::before {
  content: "";
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--naranja);
}

/* Pasos */
.pasos {
  position: relative;
  display: grid;
  gap: 0.625rem;
  margin: -3.5rem clamp(0.75rem, 2vw, 1.5rem) 0;
}

.paso {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.25rem 1.4rem 1.5rem;
  border-radius: var(--radio-m);
  background: var(--tinta);
  color: #fff;
  border: 1px solid rgba(255, 150, 80, 0.32);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.8);
}

.paso__num {
  font-family: var(--letra-codigo);
  font-size: var(--t-chico);
  color: var(--naranja-claro);
}

.paso h4 {
  font-family: var(--letra-titulo);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.paso p {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: #c9c6be;
}

.como__nota {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--gris);
}

@media (min-width: 620px) {
  .pasos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1040px) {
  .pasos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: -6rem;
  }

  .paso:nth-child(even) {
    transform: translateY(1.5rem);
  }

  .como__nota {
    margin-top: 2.5rem;
  }
}