/* ============================================================================
   "Tu local, en blanco": el recorrido de Cómo trabajamos (BRIEF_METODO.md)

   Un solo archivo para los cuatro niveles:

   1. SIN JavaScript o con movimiento reducido: la página en columna. Portada
      con el póster de la maqueta, los seis tramos con su imagen, y listo.
   2. .metodo--cine (metodo.js): la sección mide lo que dice el guion (1000vh)
      y la etapa queda fija. Los tramos entran y salen por [data-activo].
   3. .metodo--3d: la etapa dibuja la maqueta en vivo; los rótulos y las
      marcas se pegan a puntos de la escena.
   4. Sin .metodo--3d (sin WebGL): las imágenes de cada paso hacen de escena.

   Todo lo que anima es transform, opacity y clip-path. Ningún color nuevo:
   todo sale de la paleta del manual (styles.css) con color-mix.
   ========================================================================= */

/* Sin la cinta de la promo en esta página (Axel, 2026-10-01): aquí no se muestran precios ni
   tiempos. La barra sigue siendo el mismo HTML en todo el sitio (el gate lo exige); solo esta
   hoja, que carga únicamente como-trabajamos.html, la oculta. */
.cinta { display: none !important; }

:root {
  --cinta-alto: 0px;
  --metodo-recorrido: 1000vh;
  --metodo-margen: clamp(1rem, 4vw, 4rem);
  --metodo-texto: min(32rem, 40vw);
  --metodo-velo: color-mix(in srgb, var(--negro) 88%, transparent);
  --metodo-linea: color-mix(in srgb, var(--off-white) 55%, transparent);
  --metodo-rotulo: color-mix(in srgb, var(--negro) 72%, transparent);
}

/* --- La base: la página en columna ------------------------------------- */

.metodo { position: relative; background: var(--negro); }

.metodo__etapa {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.metodo__poster,
.metodo__poster img,
.metodo__lienzo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.metodo__poster img { object-fit: cover; object-position: 60% 50%; }
.metodo__lienzo { display: none; }

/* El velo que hace legible el texto: solo del tamaño del bloque de texto. La oscuridad del
   lado izquierdo la hace la luz de la escena, no un degradado de pantalla completa. */
.metodo__sombra {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Una banda oscura de verdad en la columna del texto: con un velo chico, las letras blancas
     se perdían sobre el edificio blanco (Axel, 2026-10-01). */
  background: linear-gradient(to right, var(--metodo-velo) 0%, var(--metodo-velo) 30%, transparent 55%);
}

.metodo__portada {
  position: absolute;
  left: var(--metodo-margen);
  bottom: clamp(2rem, 7vh, 5rem);
  max-width: min(60rem, 92vw);
  z-index: 2;
}
/* En el recorrido el titular deja libre la columna de los mensajes, a la derecha. */
.metodo--cine .metodo__portada { max-width: min(60rem, 56vw); }
.metodo__titular {
  margin: 0 0 calc(var(--u) * 2);
  font: 700 clamp(2rem, 0.9rem + 3.1vw, 4.1rem)/1.02 var(--fuente-titulo);
  letter-spacing: -0.02em;
  color: var(--tinta);
  text-wrap: balance;
}
.metodo__bajada {
  margin: 0 0 calc(var(--u) * 3);
  max-width: 36rem;
  font-size: var(--t-cuerpo);
  line-height: 1.55;
  color: var(--tinta);
}
/* El botón de la portada: el mismo .tecla del sitio, a la escala del cuerpo y no de un cierre. */
.metodo__tecla { font-size: var(--t-cuerpo); }

.metodo__nota {
  margin: calc(var(--u) * 1.5) 0 0;
  max-width: 34rem;
  font-size: var(--t-menor);
  line-height: 1.5;
  color: var(--granito-claro);
}

/* Los mensajes de noche: arriba a la derecha, en el cielo negro. */
.mensajes {
  position: absolute;
  top: calc(var(--nav-alto) + clamp(1rem, 4vh, 3rem));
  left: var(--metodo-margen);
  z-index: 2;
  display: grid;
  gap: calc(var(--u) * 2);
  width: min(23rem, 40vw);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mensaje p { margin: 0; }
.mensaje__pregunta {
  font: 400 var(--t-menor)/1.45 var(--fuente-cuerpo);
  color: var(--granito-claro);
}
.mensaje__pregunta time {
  margin-left: 0.5em;
  font-size: var(--t-placa);
  color: var(--granito);
}
.mensaje__respuesta {
  margin-top: calc(var(--u) * 0.5) !important;
  padding-left: calc(var(--u) * 1.5);
  border-left: 1px solid var(--saffron);
  font: 400 var(--t-menor)/1.45 var(--fuente-cuerpo);
  color: var(--saffron);
}

/* Lo que solo vive en el recorrido. */
.rotulos, .trazos, .vitrinas, .ciudades, .notas, .metodo__riel, .metodo__capa-pista { display: none; }

/* Los tramos, en columna. */
.tramos {
  margin: 0;
  padding: var(--unidad) var(--metodo-margen);
  list-style: none;
  display: grid;
  gap: var(--unidad);
}
.tramo {
  display: grid;
  gap: calc(var(--u) * 3);
  align-items: center;
}
@media (min-width: 900px) {
  .tramo { grid-template-columns: 1.3fr 1fr; }
  .tramo:nth-child(even) .tramo__imagen { order: 2; }
}
.tramo__imagen {
  width: 100%;
  height: auto;
  border-radius: var(--radio);
  background: var(--negro);
}
.tramo__titulo {
  margin: 0 0 calc(var(--u) * 1.5);
  font: 700 var(--t-titulo)/1.06 var(--fuente-titulo);
  letter-spacing: -0.015em;
  color: var(--tinta);
  text-wrap: balance;
}
.tramo__num {
  display: block;
  margin-bottom: calc(var(--u) * 1);
  font: 700 var(--t-menor)/1 var(--fuente-titulo);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--saffron);
}
.tramo__texto > p {
  margin: 0;
  max-width: 34rem;
  font-size: var(--t-cuerpo);
  line-height: 1.55;
  color: var(--tinta);
}
.tramo__texto > p + p { margin-top: calc(var(--u) * 1.5); }
.tramo__nota { color: var(--granito-claro) !important; font-size: var(--t-menor) !important; }
.tramo__tecla { margin-top: calc(var(--u) * 3); font-size: var(--t-cuerpo); }
.tramo__lista {
  margin: calc(var(--u) * 2.5) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--u);
  font-size: var(--t-menor);
  color: var(--granito-claro);
}
.tramo__lista b { font-weight: 600; color: var(--tinta); }

.llamada { margin: 0; display: grid; gap: var(--u); max-width: 28rem; }
.llamada__cuadro { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radio); background: var(--negro); }

/* El marco del clip (Axel, 2026-10-01: "línea de puntos o algo lindo y elegante"): una línea de
   puntos saffron separada del video, como el paspartú de un cuadro, y cuatro esquinas sólidas
   que lo enmarcan. Las esquinas son dos degradados por esquina sobre el ::before. */
.llamada {
  position: relative;
  padding: 10px;
  border: 1px dotted color-mix(in srgb, var(--saffron) 70%, transparent);
  background: color-mix(in srgb, var(--negro) 85%, transparent);
}
.llamada::before {
  content: "";
  position: absolute;
  inset: -5px;
  pointer-events: none;
  --l: 18px;
  --g: 2px;
  background:
    linear-gradient(var(--saffron) 0 0) top left / var(--l) var(--g),
    linear-gradient(var(--saffron) 0 0) top left / var(--g) var(--l),
    linear-gradient(var(--saffron) 0 0) top right / var(--l) var(--g),
    linear-gradient(var(--saffron) 0 0) top right / var(--g) var(--l),
    linear-gradient(var(--saffron) 0 0) bottom left / var(--l) var(--g),
    linear-gradient(var(--saffron) 0 0) bottom left / var(--g) var(--l),
    linear-gradient(var(--saffron) 0 0) bottom right / var(--l) var(--g),
    linear-gradient(var(--saffron) 0 0) bottom right / var(--g) var(--l);
  background-repeat: no-repeat;
}
.llamada__dice { font-size: var(--t-menor); line-height: 1.45; color: var(--granito-claro); }

@media (max-width: 899px) {
  .mensajes { width: auto; left: var(--metodo-margen); top: calc(var(--nav-alto) + 1rem); gap: var(--u); }
  .mensaje:nth-child(3) { display: none; }
  .metodo__poster img { object-position: 50% 60%; }
  .metodo__sombra { background: linear-gradient(to top, var(--metodo-velo) 0%, transparent 58%), linear-gradient(to bottom, var(--metodo-velo) 0%, transparent 34%); }
}

/* --- El recorrido (.metodo--cine) ---------------------------------------- */

.metodo--cine { height: var(--metodo-recorrido); }
.metodo--cine .metodo__etapa {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
}
/* La capa de texto también queda fija: va encima de la etapa, del mismo alto. */
.metodo--cine .tramos {
  position: sticky;
  top: 0;
  height: 100svh;
  margin-top: -100svh;
  padding: 0;
  display: block;
  pointer-events: none;
  z-index: 3;
}
/* Los pasos inactivos se ocultan a la vista, no al lector de pantalla: con visibility: hidden
   alguien con lector solo oía el paso en el que estaba el scroll (crítica del 2026-09-30). */
.metodo--cine .tramo {
  position: absolute;
  inset: 0;
  display: block;
}
.metodo--cine .tramo__texto {
  position: absolute;
  left: var(--metodo-margen);
  bottom: clamp(2rem, 9vh, 6rem);
  width: var(--metodo-texto);
  pointer-events: auto;
  opacity: 0;
  transform: translate3d(0, 1.5rem, 0);
  transition: opacity var(--dur-media) var(--ease), transform var(--dur-lenta) var(--ease);
}
.metodo--cine .tramo:not([data-activo]) .tramo__texto { pointer-events: none; }
.metodo--cine .tramo[data-activo] .tramo__texto { opacity: 1; transform: none; }
.metodo--cine .tramo__titulo { font-size: clamp(1.8rem, 1.1rem + 2.4vw, 3.2rem); }

/* Las imágenes de cada paso: escena en el nivel plano, ocultas con 3D. */
.metodo--cine .tramo__imagen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  opacity: 0;
  transition: opacity var(--dur-lenta) var(--ease);
}
.metodo--cine .tramo[data-activo] .tramo__imagen { opacity: 1; }
.metodo--3d .tramo__imagen { display: none; }
.metodo--cine .tramo__texto { z-index: 2; }
.metodo--cine .tramo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right, var(--metodo-velo) 0%, var(--metodo-velo) 32%, transparent 56%);
  opacity: 0;
  transition: opacity var(--dur-media) var(--ease);
}
.metodo--cine .tramo[data-activo]::before { opacity: 1; }
/* Los velos de los pasos inactivos no se pintan: son seis capas de pantalla completa, y en
   opacidad 0 el navegador igual las componía (22 cuadros trabados en la HD 520). No tienen
   contenido, así que display: none no le quita nada al lector de pantalla. */
.metodo--cine .tramo:not([data-activo])::before { display: none; }

/* La portada y los mensajes salen cuando empieza el recorrido. */
.metodo--cine .metodo__portada,
.metodo--cine .mensajes { transition: opacity var(--dur-media) var(--ease), transform var(--dur-lenta) var(--ease); }
.metodo--cine[data-paso]:not([data-paso="portada"]) .metodo__portada { opacity: 0; transform: translate3d(0, -1rem, 0); pointer-events: none; }
.metodo--cine[data-paso]:not([data-paso="portada"]):not([data-paso="agente"]) .mensajes { opacity: 0; }
/* En el recorrido los mensajes van a la derecha, con su fondo: a la izquierda compartían columna
   con el título del paso, y en pantallas bajas se encimaban (Axel, 2026-10-01). */
.metodo--cine .mensajes {
  left: auto;
  right: calc(var(--metodo-margen) + 7rem);
  padding: calc(var(--u) * 2);
  transition: opacity var(--dur-media) var(--ease), background var(--dur-media) var(--ease);
}
/* Con fondo desde la portada: ahí los mensajes caen sobre el edificio y sin fondo no se leían.
   Las respuestas no ocupan lugar hasta que se escriben (si no, la caja quedaba con huecos). */
.metodo--cine .mensajes { background: color-mix(in srgb, var(--negro) 94%, transparent); border: 1px solid var(--hud-borde-suave); }
.metodo--cine[data-paso="portada"] .mensaje__respuesta { display: none; }
/* La respuesta se escribe: el JS mueve --r de 0 a 1. */
.metodo--cine .mensaje__respuesta { clip-path: inset(0 calc((1 - var(--r, 0)) * 100%) 0 0); }

/* El lienzo, cuando la maqueta está viva. El póster se va cuando hay cuadro. */
/* El final (vitrinas) en el nivel sin 3D: no tiene paso con texto, así que su imagen va en la
   etapa. Sin esto volvía a verse el póster, el local cerrado, justo antes del cierre. */
.metodo__final { display: none; }
.metodo--cine:not(.metodo--3d)[data-paso="vitrinas"] .metodo__final {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.metodo--3d .metodo__lienzo { display: block; }
/* Preparando: el lienzo se dibuja y se compone de verdad (si no, la primera vez que entra la
   costa cuesta 117 ms), pero debajo del póster, que lo tapa entero. */
.metodo--preparando .metodo__lienzo { display: block; z-index: -1; }
.metodo--3d .metodo__poster { opacity: 0; transition: opacity var(--dur-lenta) var(--ease); }

/* La pista de scroll (Axel, 2026-10-02: "como en Escena Global"): el texto y debajo un círculo con
   un chevron que cae y se desvanece. Arriba a la izquierda, en el negro libre sobre el texto del
   paso, durante todo el recorrido. Es la única animación que no depende del scroll. */
.metodo--cine .metodo__capa-pista {
  display: block;
  position: sticky;
  top: 0;
  height: 100svh;
  margin-top: -100svh;
  z-index: 5;
  pointer-events: none;
}
/* En los pasos: a la izquierda, en el negro libre entre la barra y el texto del paso. */
.metodo--cine .metodo__pista {
  position: absolute;
  left: var(--metodo-margen);
  top: var(--pista-y, calc(var(--nav-alto) + (100svh - var(--nav-alto)) * 0.2));
  display: grid;
  justify-items: start;
  transition: opacity var(--dur-media) var(--ease);
  gap: calc(var(--u) * 1);
  margin: 0;
  font: 400 var(--t-placa)/1 var(--fuente-cuerpo);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--granito-claro);
  pointer-events: none;
}
.metodo__chevron {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid color-mix(in srgb, var(--saffron) 50%, transparent);
  border-radius: 50%;
  overflow: hidden;
}
.metodo__chevron::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.15rem;
  border-right: 1.5px solid var(--saffron);
  border-bottom: 1.5px solid var(--saffron);
  transform: rotate(45deg);
  animation: metodo-chevron 1.9s var(--ease) infinite;
}
.metodo--cine .metodo__pista[data-sin-lugar] { opacity: 0; }
/* En la portada: abajo al centro, donde no hay texto. */
.metodo--cine[data-paso="portada"] .metodo__pista {
  top: auto;
  bottom: clamp(1rem, 3vh, 2rem);
  left: 50%;
  justify-items: center;
  transform: translateX(-50%);
}
@keyframes metodo-chevron {
  0%   { transform: translateY(-0.4rem) rotate(45deg); opacity: 0; }
  35%  { opacity: 1; }
  70%  { transform: translateY(0.35rem) rotate(45deg); opacity: 0; }
  100% { transform: translateY(0.35rem) rotate(45deg); opacity: 0; }
}

/* El riel de tramos, a la derecha: dice dónde estás y cuánto falta. */
.metodo--cine .metodo__riel {
  position: absolute;
  right: var(--metodo-margen);
  bottom: clamp(2rem, 9vh, 6rem);
  z-index: 4;
  display: grid;
  gap: calc(var(--u) * 1.25);
  margin: 0;
  padding: 0;
  list-style: none;
  font: 400 var(--t-placa)/1 var(--fuente-cuerpo);
  letter-spacing: 0.04em;
  color: var(--granito);
  text-align: right;
  opacity: 0;
  transition: opacity var(--dur-media) var(--ease);
}
.metodo--cine[data-paso]:not([data-paso="portada"]):not([data-paso="vitrinas"]) .metodo__riel { opacity: 1; }
.metodo__riel li { transition: color var(--dur-media) var(--ease); }
.metodo__riel li[data-activo] { color: var(--saffron); }

/* Los rótulos de plano (paso 3): pegados a la maqueta, con su línea guía. */
.metodo--3d .rotulos {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 3;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.rotulo {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  gap: 2px;
  width: max-content;
  max-width: 11rem;
  padding: calc(var(--u) * 0.75) var(--u);
  background: var(--negro);
  border-left: 2px solid var(--metodo-linea);
  font: 400 var(--t-placa)/1.35 var(--fuente-cuerpo);
  text-shadow: 0 1px 12px var(--negro), 0 0 2px var(--negro);
  will-change: transform;
  color: var(--granito-claro);
  opacity: 0;
  transform: translate3d(var(--x, 0), var(--y, 0), 0);
  transition: opacity var(--dur-media) var(--ease);
}
.rotulo b { font: 600 var(--t-menor)/1.3 var(--fuente-cuerpo); color: var(--tinta); }
.rotulo[data-visible] { opacity: 1; }

.rotulo--vivo[data-encendido] { border-left-color: var(--saffron); }
.rotulo--vivo[data-encendido] span { color: var(--saffron); }
.metodo--3d .tramo[data-paso="mentoria"] .tramo__lista {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Las marcas de plumón (paso 5). */
.metodo--3d .trazos {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.trazos .guia {
  stroke: var(--metodo-linea);
  stroke-width: 1;
  transition: opacity var(--dur-media) var(--ease), stroke var(--dur-media) var(--ease);
}
.trazos .guia[data-encendido] { stroke: var(--saffron); }
.trazos .punto { fill: var(--metodo-linea); stroke: none; transition: opacity var(--dur-media) var(--ease); }
.trazos .punto[data-encendido] { fill: var(--saffron); }
.trazos path {
  fill: none;
  stroke: var(--saffron);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Las notas de la garantía (paso 5): el comentario del cliente junto a su marca. */
.metodo--3d .notas { display: block; position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.nota {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  gap: 2px;
  max-width: 15rem;
  padding: calc(var(--u) * 0.75) var(--u);
  border-left: 2px solid var(--saffron);
  background: var(--metodo-rotulo);
  font: 400 var(--t-menor)/1.35 var(--fuente-cuerpo);
  color: var(--tinta);
  opacity: 0;
  transform: translate3d(var(--x, 0), var(--y, 0), 0);
  transition: opacity var(--dur-media) var(--ease);
}
.nota b { font-weight: 600; color: var(--saffron); }
.nota[data-visible] { opacity: 1; }
.nota__pide { transition: opacity var(--dur-media) var(--ease); }
.nota__listo { display: none; font-weight: 600; color: var(--saffron); }
.nota[data-listo] .nota__pide { text-decoration: line-through; text-decoration-color: var(--saffron); opacity: 0.6; }
.nota[data-listo] .nota__listo { display: block; }

/* Los nombres de las vitrinas (final del recorrido). */
.metodo--3d .vitrinas {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.vitrinas li {
  position: absolute;
  left: 0;
  top: 0;
  font: 700 var(--t-menor)/1 var(--fuente-titulo);
  letter-spacing: 0.01em;
  color: var(--tinta);
  white-space: nowrap;
  padding: calc(var(--u) * 0.75) var(--u);
  background: color-mix(in srgb, var(--negro) 92%, transparent);
  border-left: 2px solid var(--saffron);
  opacity: 0;
  transform: translate3d(var(--x, 0), var(--y, 0), 0) translate(-50%, -100%);
  transition: opacity var(--dur-media) var(--ease);
}
.vitrinas li[data-visible] { opacity: 1; }
/* Los nombres de las ciudades en la costa (paso 2): sin caja, texto sobre el mar negro. */
.metodo--3d .ciudades { display: block; position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.ciudades li {
  position: absolute;
  left: 0;
  top: 0;
  padding-left: calc(var(--u) * 1.5);
  border-left: 1px solid var(--saffron);
  font: 700 var(--t-menor)/1 var(--fuente-titulo);
  color: var(--tinta);
  white-space: nowrap;
  opacity: 0;
  transform: translate3d(var(--x, 0), var(--y, 0), 0);
  transition: opacity var(--dur-media) var(--ease);
}
.ciudades li[data-visible] { opacity: 1; }

/* La videollamada (paso 2): sale del punto de Cancún. */
.metodo--cine .llamada {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: clamp(14rem, 25vw, 22.5rem);
  pointer-events: auto;
  opacity: 0;
  transform: translate3d(var(--x, 70vw), var(--y, 30vh), 0) scale(0.92);
  transform-origin: 0 100%;
  transition: opacity var(--dur-media) var(--ease), transform var(--dur-media) var(--ease);
}
.metodo--cine .tramo[data-activo] .llamada[data-visible] { opacity: 1; transform: translate3d(var(--x, 70vw), var(--y, 30vh), 0); }
.metodo--cine .llamada__cuadro { background-color: var(--negro); }
.metodo--cine .llamada__dice { padding-top: var(--u); color: var(--tinta); text-shadow: 0 1px 12px var(--negro); }

@media (max-width: 899px) {
  .metodo--cine .tramo__texto { left: var(--metodo-margen); right: var(--metodo-margen); width: auto; bottom: calc(var(--u) * 3); }
  .metodo--cine .mensajes { left: var(--metodo-margen); right: var(--metodo-margen); }
  .metodo--cine .metodo__portada { max-width: none; }
  .metodo--cine .tramo__titulo { font-size: clamp(1.6rem, 1rem + 4vw, 2.2rem); }
  .metodo--cine .tramo__texto > p { font-size: var(--t-menor); }
  .metodo--cine .tramo::before { background: linear-gradient(to top, var(--metodo-velo) 0%, var(--metodo-velo) 30%, transparent 62%); }
  .metodo--cine .metodo__riel { display: none; }
  /* En el teléfono los seis puntos van arriba del edificio en cajitas, como en escritorio; la
     lista del paso queda solo para el lector de pantalla. */
  .rotulo { max-width: calc(50vw - 2.25rem); padding: calc(var(--u) * 0.5) calc(var(--u) * 0.75); }
  .rotulo b { font-size: var(--t-placa); }
  .rotulo span { font-size: 0.625rem; }
  .metodo--cine .tramo__lista { gap: 4px; font-size: var(--t-placa); }
  .metodo--cine .llamada { width: 62vw; }
  .metodo--3d .vitrinas { display: none; }
  /* En el teléfono: en la línea del "PASO N", a la derecha y en fila. En la portada no hay paso:
     va abajo a la derecha, junto al final del texto. */
  .metodo--cine .metodo__pista {
    left: auto;
    right: var(--metodo-margen);
    grid-auto-flow: column;
    align-items: center;
    gap: calc(var(--u) * 1);
    font-size: 0.625rem;
  }
  .metodo--cine .metodo__chevron { width: 1.6rem; height: 1.6rem; }
  .metodo--cine[data-paso="portada"] .metodo__pista { left: auto; right: var(--metodo-margen); transform: none; }
  .nota { max-width: 11rem; font-size: var(--t-placa); }
}

/* --- La prueba: tres obras --------------------------------------------- */

.obras-metodo { padding: var(--unidad) var(--metodo-margen); background: var(--negro); }
.obras-metodo__titulo {
  margin: 0 0 calc(var(--u) * 1.5);
  font: 700 var(--t-titulo)/1.06 var(--fuente-titulo);
  letter-spacing: -0.015em;
  color: var(--tinta);
}
.obras-metodo__bajada { margin: 0 0 calc(var(--u) * 5); font-size: var(--t-cuerpo); color: var(--granito-claro); }
.obras-metodo__lista {
  display: grid;
  gap: calc(var(--u) * 5) calc(var(--u) * 3);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 900px) { .obras-metodo__lista { grid-template-columns: repeat(3, 1fr); } }
.obra-m { display: grid; gap: var(--u); align-content: start; }
.obra-m__captura { width: 100%; height: auto; border-radius: var(--radio); margin-bottom: var(--u); }
.obra-m__tipo { margin: 0; font-size: var(--t-placa); color: var(--granito-claro); }
.obra-m__nombre { margin: 0; font: 700 var(--t-sub)/1.15 var(--fuente-titulo); color: var(--tinta); }
.obra-m__abrir { justify-self: start; color: var(--saffron); font-size: var(--t-menor); text-underline-offset: 0.2em; }
.obra-m__abrir:hover { color: var(--off-white); }
.obras-metodo__todas { margin: calc(var(--u) * 5) 0 0; }

.metodo__cierre .metodo__nota { margin-inline: auto; text-align: center; }

/* Movimiento reducido: nunca entra al recorrido (metodo.js no pone
   .metodo--cine), pero si algo lo dejó puesto, se vuelve a la columna. */
@media (prefers-reduced-motion: reduce) {
  .metodo--cine { height: auto; }
  .metodo--cine .metodo__etapa,
  .metodo--cine .tramos { position: relative; height: auto; margin-top: 0; }
  .metodo__portada, .mensajes, .tramo__texto, .tramo__imagen { transition: none !important; }
}