/* Todo queda dentro de la sección: utiliza los tokens de la web si existen. */
.proceso {
  background: var(--papel, #f4ecdd);
  color: var(--tinta, #2a140e);
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  position: relative;
  isolation: isolate;
}

.proceso *, .proceso *::before, .proceso *::after { box-sizing: border-box; }
.proceso :where(h2, h3, p, figure, ol) { margin: 0; }
.proceso__marco {
  max-width: 1600px;
  margin-inline: auto;
  padding: clamp(24px, 4vw, 64px);
}
.proceso__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--linea, #d9ccb6);
}
.proceso__etiqueta, .proceso__pie, .proceso__numero, .proceso__pie-ilustracion {
  font-size: 11px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.proceso__etiqueta { color: var(--suave, #6f6152); }
.proceso h2, .proceso h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.proceso h2 { font-size: clamp(30px, 3.7vw, 58px); line-height: 1; }
.proceso__composicion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  padding-block: 24px;
  min-height: 0;
}
.proceso__ilustracion { min-width: 0; min-height: 0; text-align: center; }
.proceso__dibujo { display: block; width: 100%; height: auto; max-height: 62svh; }
.proceso__porcelana { fill: var(--lino, #fbf6ea); stroke: currentColor; stroke-width: 1.25; }
.proceso__dibujo :is(path, circle) { vector-effect: non-scaling-stroke; }
.proceso__porcelana .proceso__linea-suave { stroke: var(--linea, #d9ccb6); }
.proceso__porcelana circle.proceso__linea-suave { fill: none; }
.proceso__pie-ilustracion { color: var(--suave, #6f6152); font-size: 10px; margin-top: 12px; }
.proceso__polvo, .proceso__granos, .proceso__chorro { opacity: 0; }
.proceso__vapor { opacity: 0.55; }
.proceso__sello { fill: none; stroke: var(--azafran, #c07a35); stroke-width: 1; }
.proceso__sello text { fill: var(--azafran, #c07a35); stroke: none; text-anchor: middle; }
.proceso__sello-meta { font-size: 8px; letter-spacing: 0.15em; }
.proceso__sello-listo { font: italic 300 31px 'Cormorant Garamond', Georgia, serif; }
.proceso__relato { min-width: 0; }
.proceso__pasos { padding: 0; list-style: none; }
.proceso__paso { padding-block: 20px; border-bottom: 1px solid var(--linea, #d9ccb6); }
.proceso__numero { display: block; color: var(--azafran, #c07a35); margin-bottom: 12px; }
.proceso__numero span { color: var(--suave, #6f6152); margin-left: 9px; }
.proceso h3 { font-size: clamp(28px, 3.3vw, 52px); line-height: 1.05; }
.proceso__paso p { margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--suave, #6f6152); }
.proceso__pie { display: none; }
.proceso__fin { height: 0; }
.proceso__saltar { position: absolute; left: 24px; top: 12px; padding: 10px; z-index: 2;
  background: var(--lino, #fbf6ea); color: inherit; font-size: 14px; transform: translateY(-200%); opacity: 0; }
.proceso__saltar:focus-visible { transform: none; opacity: 1; outline: 1px solid currentColor; }

/* El pin no anima su contenedor. Solamente cambian sus elementos interiores. */
.proceso--animado .proceso__marco {
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding-block: 90px clamp(22px, 4vh, 48px);
}
.proceso--animado .proceso__saltar { top: 76px; }
.proceso--animado .proceso__composicion { height: 100%; }
.proceso--animado .proceso__ilustracion { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.proceso--animado .proceso__dibujo { height: 100%; max-height: none; }
.proceso--animado .proceso__pasos { display: grid; }
.proceso--animado .proceso__paso { grid-area: 1 / 1; align-self: center; padding: 0; border: 0; }
.proceso--animado h3 { font-size: clamp(36px, 5.1vw, 80px); }
.proceso--animado .proceso__numero { margin-bottom: 26px; }
.proceso--animado .proceso__polvo, .proceso--animado .proceso__granos,
.proceso--animado .proceso__chorro, .proceso--animado .proceso__vapor { opacity: 1; }
.proceso--animado .proceso__pie { display: flex; justify-content: space-between; align-items: center; gap: 32px;
  border-top: 1px solid var(--linea, #d9ccb6); padding-top: 18px; color: var(--suave, #6f6152); }
.proceso__guia span { margin-left: 14px; color: var(--tinta, #2a140e); }
.proceso__progreso { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; width: 40%; max-width: 360px; }
.proceso__marca { display: flex; align-items: center; gap: 9px; font-size: 10px; }
.proceso__pista { height: 1px; flex: 1; background: var(--linea, #d9ccb6); }
.proceso__avance { display: block; height: 100%; background: var(--azafran, #c07a35); }

@media (max-width: 899px) {
  .proceso__marco { padding: 24px; }
  .proceso__cabecera { display: block; padding-bottom: 18px; }
  .proceso__etiqueta { margin-bottom: 12px; font-size: 10px; }
  .proceso h2 { font-size: clamp(32px, 6.8vw, 52px); }
  .proceso__composicion { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .proceso__dibujo { max-height: 430px; }
  .proceso--animado .proceso__composicion { grid-template-rows: minmax(0, 1fr) auto; gap: 12px; padding-block: 10px 24px; }
  .proceso--animado .proceso__dibujo { max-height: 460px; }
  .proceso--animado .proceso__pie-ilustracion { display: none; }
  .proceso--animado .proceso__ilustracion { grid-template-rows: minmax(0, 1fr); }
  .proceso--animado .proceso__numero { margin-bottom: 12px; }
  .proceso--animado h3 { font-size: clamp(28px, 8.3vw, 66px); }
  .proceso__paso p { margin-top: 10px; font-size: 13px; }
  .proceso--animado .proceso__pie { gap: 20px; padding-top: 14px; }
  .proceso__guia { font-size: 9px; letter-spacing: 0.04em; }
  .proceso__guia span { margin-left: 3px; }
  .proceso__progreso { width: 42%; gap: 8px; }
  .proceso__marca { gap: 5px; font-size: 9px; }
}

/* Sin movimiento ni fijación: ilustración final y los cuatro pasos legibles. */
@media (prefers-reduced-motion: reduce), (max-height: 559px) {
  .proceso__saltar { display: none; }
  .proceso__composicion { padding-block: 32px; }
  .proceso__dibujo { max-height: 520px; }
}

@media print {
  .proceso__saltar, .proceso__pie { display: none !important; }
}