/* ==========================================================
   PRUEBA "Del croquis a la obra"
   Una imagen que pasa de croquis a taller a terminada con una barra.
   Para quitarla: ver el comentario "INICIO PRUEBA" en index.html.
   ========================================================== */

.proceso .seccion-intro { color: #d4d4d4; }

/* Imagen y controles en una columna de ancho medio, para que la barra se vea junto con la foto */
.proceso-visor,
.proceso-control { max-width: 52rem; }
.proceso-visor { margin: 2.5rem 0 0; }

.proceso-marco {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radio-grande);
  background: #f1efea; /* color papel, mientras carga el croquis */
}

.proceso-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cada etapa se descubre de izquierda a derecha sobre la anterior.
   --v (0 a 1) la pone js/proceso.js; sin JS se ve la foto terminada. */
.proceso-foto[data-etapa="1"],
.proceso-foto[data-etapa="2"] {
  clip-path: inset(0 calc((1 - var(--v, 1)) * 100%) 0 0);
}

/* Borde blanco que marca el corte entre una etapa y la siguiente */
.proceso-borde {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--borde, 100%);
  width: 3px;
  translate: -50% 0;
  background: var(--blanco);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.45);
  opacity: var(--borde-visible, 0);
  pointer-events: none;
}

.proceso-pie {
  margin-top: 0.9rem;
  font-family: var(--fuente-sistema);
  color: #d4d4d4;
}

/* Controles: solo se muestran si el JS cargó */
.proceso-control { display: none; margin-top: 1.5rem; }
.proceso.listo .proceso-control { display: block; }

.proceso-barra {
  --llenado: 0%;
  width: 100%;
  height: 2.5rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.proceso-barra::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--rojo) var(--llenado), rgba(255, 255, 255, 0.2) var(--llenado));
}
.proceso-barra::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--rojo) var(--llenado), rgba(255, 255, 255, 0.2) var(--llenado));
}
.proceso-barra::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: calc(3px - 0.875rem);
  border: 4px solid var(--rojo);
  border-radius: 50%;
  background: var(--blanco);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.proceso-barra::-moz-range-thumb {
  width: 1.75rem;
  height: 1.75rem;
  box-sizing: border-box;
  border: 4px solid var(--rojo);
  border-radius: 50%;
  background: var(--blanco);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.proceso-etapas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 0.25rem;
}
.proceso-etapas button {
  padding: 0.4rem 0;
  border: 0;
  background: none;
  color: #b9b9bf;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.proceso-etapas button:nth-child(1) { justify-self: start; }
.proceso-etapas button:nth-child(2) { justify-self: center; }
.proceso-etapas button:nth-child(3) { justify-self: end; }
.proceso-etapas button:hover,
.proceso-etapas button[aria-pressed="true"] { color: var(--blanco); }
.proceso-etapas button[aria-pressed="true"] { text-decoration: underline 3px var(--rojo); text-underline-offset: 0.45em; }

.proceso-pedir { margin-top: 2rem; }