/* =========================================================================
   GastroView · Bloque 3 · De tu carta al menú digital (proceso)
   Vuelve al marfil después del Bloque 2 «Tostado» (la ola de salida ya entrega marfil).
   Se diferencia por composición: encabezado editorial a la izquierda, tres pasos
   unidos por un hilo terracota fino. Un mismo producto (Cappuccino · $5.800) recorre
   carta impresa → panel real → menú real en el celular.
   ========================================================================= */

.proceso {
  --terracota-texto: #A4522F;
  --papel: #FFFDF8;
  --tinta: #3E2E26;
  --hilo: rgb(198 106 69 / 0.55);
  --escena-radio: 28px;

  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--marfil);
  padding: clamp(72px, 9vw, 136px) 0 clamp(88px, 10vw, 152px);
}
.proceso h2, .proceso h3 { margin: 0; font-weight: 500; }

/* Retícula técnica (la misma del Hero y del Bloque 2), solo arriba a la derecha */
.proceso__fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.proceso__reticula {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgb(var(--espresso-rgb) / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--espresso-rgb) / 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 48% 42% at 88% 8%, #000 0%, transparent 100%);
  mask-image: radial-gradient(ellipse 48% 42% at 88% 8%, #000 0%, transparent 100%);
}

.proceso__contenedor {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--margen);
}

/* ---------- Encabezado editorial ---------- */
.proceso .etiqueta {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--terracota-texto);
}
.proceso__cabecera {
  display: grid;
  justify-items: center;
  gap: clamp(14px, 1.6vw, 22px);
  text-align: center;
  margin-bottom: clamp(52px, 6vw, 88px);
}
.proceso__titulo {
  font-family: var(--f-titulos);
  font-size: clamp(2rem, 1.2rem + 2.9vw, 3.6rem);
  font-variation-settings: "opsz" 144;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--espresso);
  text-wrap: balance;
}
.proceso__bajada {
  max-width: 34em;
  font-size: clamp(1.125rem, 1rem + 0.55vw, 1.5rem);
  font-weight: 500;
  line-height: 1.5;
  color: rgb(var(--espresso-rgb) / 0.86);
  text-wrap: balance;
}
.proceso__bajada::before {              /* filete terracota corto: separa sin encerrar */
  content: "";
  display: block;
  width: 44px; height: 1.5px;
  margin: 0 auto clamp(14px, 1.6vw, 20px);
  border-radius: 2px;
  background: var(--terracota);
}
/* Escritorio: el título ocupa el ancho en UNA línea */
@media (min-width: 1024px) {
  .proceso__titulo { font-size: min(4.6rem, 4.05vw); white-space: nowrap; }
}

/* ---------- Pasos ---------- */
.pasos {
  --gap: clamp(24px, 3vw, 48px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.paso {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* Escritorio: número + hilo → escena → título → texto */
.paso__marca   { order: 1; }
.paso__escena  { order: 2; }
.paso__titulo  { order: 3; }
.paso__texto   { order: 4; }

.paso__marca {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: clamp(20px, 2vw, 28px);
}
.paso__num {
  flex: none;
  font-family: var(--f-titulos);
  font-size: clamp(3rem, 2rem + 2.4vw, 4.75rem);
  font-weight: 400;
  font-variation-settings: "opsz" 144;
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums;
  color: var(--terracota);
}
/* Hilo: arranca con un nodo y se estira hasta el paso siguiente (cruza el espacio entre columnas) */
.paso__linea {
  position: relative;
  flex: 1;
  height: 1px;
  margin-right: calc(var(--gap) * -1);
  background: var(--hilo);
  transform-origin: left center;
}
.paso__linea::before {
  content: "";
  position: absolute; left: -4px; top: -3.5px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--marfil);
  box-shadow: inset 0 0 0 1.5px var(--terracota);
}
.paso--3 .paso__linea { margin-right: 0; }
.paso--3 .paso__linea::after {         /* llegada: nodo lleno */
  content: "";
  position: absolute; right: -4px; top: -3.5px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--terracota);
}

.paso__titulo {
  margin-top: clamp(22px, 2.2vw, 30px);
  font-family: var(--f-titulos);
  font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
  font-variation-settings: "opsz" 72;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--espresso);
}
.paso__texto {
  max-width: 24em;
  margin-top: 8px;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  color: var(--taupe-texto);
  text-wrap: pretty;
}

/* ---------- Escenas: plano crema del sistema (como el escenario del Hero) ---------- */
.paso__escena {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1.02;
  max-width: 100%;
  border-radius: var(--escena-radio);
  background:
    radial-gradient(90% 70% at 50% 100%, rgb(198 106 69 / 0.07), transparent 70%),
    linear-gradient(170deg, #F1E6D6, var(--crema));
  box-shadow: inset 0 0 0 1px rgb(var(--espresso-rgb) / 0.06);
  container-type: inline-size;
  overflow: hidden;
}

/* 01 · Carta impresa + foto suelta */
.papel {
  position: absolute;
  left: 13cqw; top: 11cqw;
  width: 62cqw;
  padding: 7cqw 6.5cqw 8cqw;
  background: var(--papel);
  border-radius: 1.2cqw;
  box-shadow: 0 1px 0 rgb(var(--espresso-rgb) / 0.05), 0 18px 36px -24px rgb(var(--espresso-rgb) / 0.45);
  transform: rotate(-3.5deg);
  color: var(--tinta);
}
.papel__seccion {
  font-family: var(--f-titulos);
  font-size: 5.6cqw;
  font-variation-settings: "opsz" 72;
  line-height: 1.1;
}
.papel__seccion + .papel__lista { margin-top: 2.6cqw; }
.papel__lista + .papel__seccion { margin-top: 6cqw; }
.papel__lista li {
  display: flex;
  align-items: baseline;
  gap: 1.6cqw;
  padding: 1.25cqw 0;
  font-size: 3.35cqw;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}
.papel__lista i {
  flex: 1;
  min-width: 2cqw;
  border-bottom: 0.3cqw dotted rgb(var(--espresso-rgb) / 0.35);
  transform: translateY(-0.6cqw);
}
.papel__lista li span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.papel__elegido { position: relative; }
.papel__elegido::after {               /* el producto que recorre los 3 pasos */
  content: "";
  position: absolute; left: -2cqw; right: -2cqw; top: 0.2cqw; bottom: 0.2cqw;
  border-radius: 1.4cqw;
  box-shadow: inset 0 0 0 0.35cqw rgb(198 106 69 / 0.7);
  background: rgb(198 106 69 / 0.07);
  transform-origin: left center;
}
.foto-suelta {
  position: absolute;
  right: 9cqw; bottom: 9cqw;
  width: 34cqw;
  padding: 1.8cqw 1.8cqw 6cqw;
  background: var(--papel);
  border-radius: 1cqw;
  box-shadow: 0 18px 30px -20px rgb(var(--espresso-rgb) / 0.5);
  transform: rotate(5deg);
}
.foto-suelta img { width: 100%; height: auto; aspect-ratio: 4 / 4.2; object-fit: cover; border-radius: 0.6cqw; }

/* 02 · Notebook con el panel real (entera dentro de la escena) + detalle ampliado de la fila */
.notebook {
  position: absolute;
  left: 11cqw; right: 11cqw; top: 13cqw;
}
.notebook__pantalla {
  position: relative;
  padding: 1.3cqw 1.3cqw 1.9cqw;
  border-radius: 2.6cqw 2.6cqw 0 0;
  background: linear-gradient(180deg, #2A201B, #1A1310);
  box-shadow: inset 0 0 0 0.25cqw #3D2F27, 0 0 0 0.2cqw #B9AB9C;   /* bisel + canto de aluminio */
}
.notebook__pantalla::before {           /* cámara */
  content: ""; position: absolute; left: 50%; top: 0.45cqw;
  width: 0.7cqw; height: 0.7cqw; margin-left: -0.35cqw; border-radius: 50%;
  background: #3A2E28;
}
.notebook__pantalla img {
  width: 100%;
  height: auto;
  aspect-ratio: 1180 / 738;
  border-radius: 0.5cqw;
  object-fit: cover;
}
.notebook__base {                        /* bisagra + teclado visto de frente, con canto delantero */
  position: relative;
  height: 3.4cqw;
  margin: 0 -8cqw;
  border-radius: 0.4cqw 0.4cqw 3.4cqw 3.4cqw / 0.4cqw 0.4cqw 2.4cqw 2.4cqw;
  background:
    linear-gradient(180deg, #8F8174 0 0.45cqw, #E4D9CC 0.45cqw, #D2C4B5 55%, #B3A392 100%);
  box-shadow: 0 1.6cqw 2.4cqw -1.4cqw rgb(var(--espresso-rgb) / 0.55);
}
.notebook__base::before {
  content: ""; position: absolute; left: 50%; top: 0.45cqw;
  width: 15cqw; height: 1cqw; transform: translateX(-50%);
  border-radius: 0 0 1.2cqw 1.2cqw; background: #BFB09F;
}
.panel-detalle {
  position: absolute;
  left: 6cqw; right: 6cqw; bottom: 8cqw;
  padding: 1.2cqw;
  border-radius: 2.4cqw;
  background: #FFFDF9;
  box-shadow: inset 0 0 0 0.3cqw rgb(198 106 69 / 0.55), 0 1.8cqw 3.6cqw -1.8cqw rgb(var(--espresso-rgb) / 0.5);
}
.panel-detalle img { width: 100%; height: auto; border-radius: 1.4cqw; }
.panel-detalle__precio {                 /* subrayado muy sutil bajo el precio: "se guardó" */
  position: absolute;
  left: calc(1.2cqw + (100% - 2.4cqw) * 0.614);
  width: calc((100% - 2.4cqw) * 0.06);
  bottom: 3.1cqw;
  height: 0.35cqw;
  border-radius: 1px;
  background: var(--terracota);
  transform-origin: left center;
}
/* Posiciones relativas a la imagen (medidas en la captura 1180×738) */
.notebook__fila, .notebook__precio { display: none;
  position: absolute;
  pointer-events: none;
  --x0: 1.6cqw; --w0: calc(100% - 3.2cqw);   /* área de la imagen dentro del marco */
}
.notebook__fila {
  left: calc(1.6cqw + (100% - 3.2cqw) * 0.2376);
  width: calc((100% - 3.2cqw) * 0.7315);
  top: calc(1.6cqw + (100% - 3.8cqw) * 0.52);
  height: calc((100% - 3.8cqw) * 0.0989);
  border-radius: 0.8cqw;
  box-shadow: inset 0 0 0 0.35cqw rgb(198 106 69 / 0.75);
  background: rgb(198 106 69 / 0.05);
}
.notebook__precio {
  left: calc(1.6cqw + (100% - 3.2cqw) * 0.6776);
  width: calc((100% - 3.2cqw) * 0.0607);
  top: calc(1.6cqw + (100% - 3.8cqw) * 0.5444 + (100% - 3.8cqw) * 0.0515 - 0.2cqw);
  height: 0.35cqw;
  border-radius: 1px;
  background: var(--terracota);
  transform-origin: left center;
}

/* 03 · Celular con el menú real + QR de mesa */
.movil {
  position: absolute;
  left: 50%; top: 8cqw;
  width: 43cqw;
  padding: 1.5cqw;
  border-radius: 7.5cqw;
  background: #231914;
  box-shadow: inset 0 0 0 0.3cqw #3A2B23, 0 30px 40px -28px rgb(var(--espresso-rgb) / 0.6);
  transform: translateX(-26%);
}
.movil__pantalla {
  position: relative;
  aspect-ratio: 390 / 797;
  overflow: hidden;
  border-radius: 6.2cqw;
  background: #F6F0E7;
}
.movil__pantalla picture { position: absolute; inset: 0; }
.movil__vista { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.movil__vista--ficha { opacity: 0; }
.movil__isla {
  position: absolute; left: 50%; top: 2cqw;
  width: 13cqw; height: 3.6cqw; transform: translateX(-50%);
  border-radius: 99px; background: #140E0B;
}
.qr-mesa {
  position: absolute;
  left: 7cqw; bottom: 8cqw;
  display: grid;
  justify-items: center;
  gap: 1.6cqw;
  width: 27cqw;
  padding: 3cqw 3cqw 3.4cqw;
  border-radius: 2.6cqw;
  background: var(--papel);
  box-shadow: inset 0 0 0 1px rgb(var(--espresso-rgb) / 0.08), 0 18px 28px -20px rgb(var(--espresso-rgb) / 0.55);
}
.qr-mesa__logo { width: 8cqw; height: auto; }
.qr-mesa .qr { width: 100%; height: auto; fill: var(--espresso); }

/* =========================================================================
   Animación: 01 → 02 → 03. Lenta, sin rebotes. Solo si hay JS y movimiento permitido.
   Sin JS (o con movimiento reducido) todo se ve en su estado final.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .js-proceso .paso__marca .paso__num,
  .js-proceso .paso__escena,
  .js-proceso .paso__titulo,
  .js-proceso .paso__texto {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 900ms var(--ease), transform 900ms var(--ease);
  }
  .js-proceso .paso__linea { transform: scaleX(0); transition: transform 1100ms cubic-bezier(.45, 0, .2, 1); }
  .js-proceso .papel__elegido::after { transform: scaleX(0); opacity: 0; transition: transform 800ms var(--ease), opacity 800ms var(--ease); }
  .js-proceso .notebook__fila { opacity: 0; transition: opacity 900ms var(--ease); }
  .js-proceso .panel-detalle { opacity: 0; transform: translateY(2cqw); transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
  .js-proceso .panel-detalle__precio { transform: scaleX(0); transition: transform 700ms var(--ease); }
  .js-proceso .movil__vista--ficha { transition: opacity 1200ms var(--ease); }

  .js-proceso .paso.is-visible .paso__num,
  .js-proceso .paso.is-visible .paso__escena,
  .js-proceso .paso.is-visible .paso__titulo,
  .js-proceso .paso.is-visible .paso__texto { opacity: 1; transform: none; }
  .js-proceso .paso.is-visible .paso__linea { transform: none; }
  .js-proceso .paso.is-visible .papel__elegido::after { transform: none; opacity: 1; }
  .js-proceso .paso.is-visible .notebook__fila { opacity: 1; }
  .js-proceso .paso.is-visible .panel-detalle { opacity: 1; transform: none; }
  .js-proceso .paso.is-visible .panel-detalle__precio { transform: none; }
  .js-proceso .paso.is-ficha .movil__vista--ficha { opacity: 1; }

  /* Escalonado: cada paso entra ~0,7 s después del anterior; el hilo lleva al siguiente */
  .paso--1 { --d: 0ms; }
  .paso--2 { --d: 700ms; }
  .paso--3 { --d: 1400ms; }
  .js-proceso .paso .paso__num { transition-delay: var(--d); }
  .js-proceso .paso .paso__linea { transition-delay: calc(var(--d) + 250ms); }
  .js-proceso .paso .paso__escena { transition-delay: calc(var(--d) + 150ms); }
  .js-proceso .paso .paso__titulo { transition-delay: calc(var(--d) + 300ms); }
  .js-proceso .paso .paso__texto { transition-delay: calc(var(--d) + 400ms); }
  .js-proceso .papel__elegido::after { transition-delay: calc(var(--d) + 1100ms); }
  .js-proceso .notebook__fila { transition-delay: calc(var(--d) + 1200ms); }
  .js-proceso .panel-detalle { transition-delay: calc(var(--d) + 1000ms); }
  .js-proceso .panel-detalle__precio { transition-delay: calc(var(--d) + 1900ms); }

  /* Movimiento mínimo del celular, solo mientras el bloque está en pantalla */
  .js-proceso .movil { animation: proceso-flotar 7s ease-in-out infinite alternate; animation-play-state: paused; }
  .js-proceso .pasos.is-en-pantalla .movil { animation-play-state: running; }
}
@keyframes proceso-flotar {
  from { transform: translateX(-26%) translateY(0); }
  to { transform: translateX(-26%) translateY(-1.6cqw); }
}
/* Movimiento reducido: el celular muestra directamente la ficha del producto */
@media (prefers-reduced-motion: reduce) {
  .movil__vista--ficha { opacity: 1; }
}

/* =========================================================================
   Responsive
   ========================================================================= */

/* Notebooks angostas: encabezado apilado */
@media (max-width: 1199px) {
  .proceso__cabecera { grid-template-columns: minmax(0, 1fr); }
  .proceso__bajada { max-width: 30em; }
}

/* Tablet y celular: 01 / 02 / 03 uno debajo del otro con un riel vertical a la izquierda */
@media (max-width: 1023px) {
  .pasos {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    max-width: 44rem;
  }
  .paso {
    display: grid;
    grid-template-columns: clamp(56px, 12vw, 84px) minmax(0, 1fr);
    grid-template-areas:
      "marca titulo"
      "marca texto"
      "marca escena";
    column-gap: clamp(14px, 3vw, 28px);
    padding-bottom: clamp(48px, 9vw, 72px);
  }
  .paso:last-child { padding-bottom: 0; }
  .paso__marca {
    grid-area: marca;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin: 0;
    height: 100%;
  }
  .paso__num { font-size: clamp(2.5rem, 1.9rem + 2.6vw, 3.5rem); }
  .paso__linea {
    flex: 1;
    width: 1px;
    height: auto;
    margin: 0 0 calc(clamp(48px, 9vw, 72px) * -1) 0.55em;
    font-size: clamp(2.5rem, 1.9rem + 2.6vw, 3.5rem);   /* alinea el riel con el centro del número */
    transform-origin: center top;
  }
  .paso--3 .paso__linea { margin-bottom: 0; }
  .paso__linea::before { left: -3.5px; top: -4px; }
  .paso--3 .paso__linea::after { right: auto; left: -3.5px; top: auto; bottom: -4px; }
  .paso__titulo { grid-area: titulo; margin-top: 0.35em; }
  .paso__texto { grid-area: texto; }
  .paso__escena { grid-area: escena; margin-top: clamp(20px, 3vw, 28px); width: min(100%, 420px); }

  @media (prefers-reduced-motion: no-preference) {
    .js-proceso .paso__linea { transform: scaleY(0); }
    .js-proceso .paso.is-visible .paso__linea { transform: none; }
  }
}

/* Tablet: dentro de cada paso, texto a la izquierda e imagen a la derecha (no se comprime ni queda vacío) */
@media (min-width: 640px) and (max-width: 1023px) {
  .pasos { max-width: none; }
  .paso {
    grid-template-columns: clamp(56px, 9vw, 84px) minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "marca titulo escena"
      "marca texto  escena";
  }
  .paso__escena { margin-top: 0; width: 100%; }
  .paso__texto { align-self: start; }
}

@media (max-width: 599px) {
  .proceso { --escena-radio: 22px; }
  .paso { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; }
  .paso__num { font-size: 2.25rem; }
  .paso__linea { font-size: 2.25rem; }
}

@media (max-width: 359px) {
  .proceso__contenedor { padding-inline: 16px; }
  .paso { grid-template-columns: 38px minmax(0, 1fr); column-gap: 12px; }
  .paso__num { font-size: 2rem; }
  .paso__linea { font-size: 2rem; }
}