/* ==========================================================================
   Roble con Historia — la experiencia (portada)
   --------------------------------------------------------------------------
   Esta hoja la carga SOLO index.html. El catálogo y la ficha siguen con
   estilo.css. Los tokens de color y tipo salen de estilo.css (marca/paleta
   v1.0.0): acá no se inventa un color, se usa el lado oscuro de la paleta.

   Idea: la portada arranca con la marca grande sobre la madera apilada y de
   ahi se recorre el galpon en horizontal. Nada depende de una animacion previa:
   el logo y el titular estan en el primer frame, en cualquier pantalla.
   ========================================================================== */

/* --------------------------------------------------------------- base ---- */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #16110D;
  color: var(--color-ink-on-dark);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { width: min(1200px, 100% - 2 * var(--space-6)); margin-inline: auto; }

.overline {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
  margin: 0 0 var(--space-3);
}
.overline--claro { color: var(--color-accent-on-dark); }

.lead { font-size: 18px; color: var(--color-ink-soft); max-width: 62ch; margin: 0 0 var(--space-5); }
.lead--claro { color: var(--color-ink-soft-on-dark); }

.titulo-seccion {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
}
.titulo-seccion--claro { color: var(--color-ink-on-dark); }

/* ------------------------------------------------------------- botones ---- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-5);
  font-family: var(--font-ui); font-size: 15px; font-weight: 500;
  letter-spacing: 0.01em; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}
.btn:active { transform: translateY(1px); }
.btn--claro { background: var(--color-ink-on-dark); color: #1B1611; }
.btn--claro:hover { background: #fff; }
.btn--metal { background: var(--color-accent-warm); color: #1B1611; }
.btn--metal:hover { background: var(--color-accent-on-dark); }
.btn--fantasma {
  background: transparent; color: var(--color-ink-on-dark);
  border-color: rgba(239, 230, 212, 0.34);
}
.btn--fantasma:hover { border-color: var(--color-ink-on-dark); background: rgba(239, 230, 212, 0.08); }
.btn--chico { min-height: 42px; padding: 0 var(--space-4); font-size: 14px; }

:focus-visible { outline: 2px solid var(--color-accent-on-dark); outline-offset: 3px; }


/* ------------------------------------------------- luz de galpón y polvo --- */
.luz {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 40%),
              rgba(208, 138, 94, 0.16), rgba(208, 138, 94, 0.05) 38%, transparent 62%);
  mix-blend-mode: screen;
}
.polvo { position: fixed; inset: 0; z-index: 41; pointer-events: none; }
.polvo span {
  position: absolute; bottom: -10px; width: 2px; height: 2px; border-radius: 50%;
  background: rgba(243, 235, 221, 0.55);
  animation: flotar linear infinite;
}
.polvo span:nth-child(1)  { left: 6%;  animation-duration: 26s; animation-delay: 0s; }
.polvo span:nth-child(2)  { left: 14%; animation-duration: 34s; animation-delay: -6s; }
.polvo span:nth-child(3)  { left: 23%; animation-duration: 22s; animation-delay: -12s; }
.polvo span:nth-child(4)  { left: 31%; animation-duration: 40s; animation-delay: -3s; }
.polvo span:nth-child(5)  { left: 39%; animation-duration: 29s; animation-delay: -18s; }
.polvo span:nth-child(6)  { left: 47%; animation-duration: 36s; animation-delay: -9s; }
.polvo span:nth-child(7)  { left: 56%; animation-duration: 24s; animation-delay: -21s; }
.polvo span:nth-child(8)  { left: 63%; animation-duration: 32s; animation-delay: -14s; }
.polvo span:nth-child(9)  { left: 71%; animation-duration: 27s; animation-delay: -5s; }
.polvo span:nth-child(10) { left: 79%; animation-duration: 38s; animation-delay: -25s; }
.polvo span:nth-child(11) { left: 87%; animation-duration: 21s; animation-delay: -11s; }
.polvo span:nth-child(12) { left: 94%; animation-duration: 31s; animation-delay: -16s; }

@keyframes flotar {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.5; }
  100% { transform: translate3d(28px, -105vh, 0); opacity: 0; }
}

/* ================================================================= barra ==== */
.barra {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: linear-gradient(180deg, rgba(12, 9, 6, 0.92), rgba(12, 9, 6, 0));
}
.barra__marca {
  display: block; line-height: 0; white-space: nowrap;
}
.barra__marca img { display: block; height: 40px; width: auto; }
.barra__nav { display: flex; align-items: center; gap: var(--space-5); }
.barra__nav a {
  font-family: var(--font-ui); font-size: 14px; letter-spacing: 0.03em;
  color: rgba(239, 230, 212, 0.82); text-decoration: none;
  padding-block: 6px; border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.barra__nav a:hover { color: #fff; border-color: var(--color-accent-on-dark); }
.barra__wa {
  border: 1px solid rgba(239, 230, 212, 0.3) !important; border-radius: 999px;
  padding: 8px 16px !important;
}
.barra__wa:hover { background: rgba(239, 230, 212, 0.1); }

/* ================================================================== hero ==== */
.hero {
  position: relative; min-height: 100svh;
  /* flex-start, no center: si el bloque no entra en la ventana (portatil de
     768 o telefono chico) centrado se desborda hacia arriba y el logo se mete
     debajo de la barra. Arrancando arriba el logo siempre queda a la vista. */
  display: flex; align-items: flex-start;
  padding: calc(72px + var(--space-5)) 0 var(--space-7);
  overflow: hidden;
}
/* En pantallas altas si hay lugar y el bloque se centra sin desbordar. */
@media (min-height: 1000px) {
  .hero { align-items: center; }
}
.hero__fondo { position: absolute; inset: 0; z-index: 0; }
.hero__fondo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.62) brightness(0.66) contrast(1.04);
  transform: scale(1.04);
  animation: respirar 26s ease-in-out infinite alternate;
}
@keyframes respirar { from { transform: scale(1.02); } to { transform: scale(1.09); } }
.hero__velo {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 90% at 15% 100%, rgba(12, 9, 6, 0.92) 0%, rgba(12, 9, 6, 0.55) 45%, rgba(12, 9, 6, 0.15) 100%),
    linear-gradient(180deg, rgba(12, 9, 6, 0.75) 0%, rgba(12, 9, 6, 0.1) 32%, rgba(12, 9, 6, 0.85) 100%);
}
.hero__texto { position: relative; z-index: 2; width: min(1200px, 100% - 2 * var(--space-6)); margin-inline: auto; }
/* El logo grande ya no vive en un porton: es lo primero que se ve, siempre,
   en cualquier pantalla y con cualquier preferencia de movimiento.
   El ancho se topa tambien por el alto de la ventana (32svh de logo = 51svh
   de ancho, porque el PNG es 590x367) para que en pantallas bajas no empuje el
   titulo fuera de la pantalla. */
.hero__marca {
  margin: 0 0 var(--space-7);
  width: min(clamp(180px, 25vw, 420px), calc(26svh * 1.608)); line-height: 0;
  filter: drop-shadow(0 2px 1px rgba(255, 240, 220, 0.08)) drop-shadow(0 18px 44px rgba(0, 0, 0, 0.62));
}
.hero__marca img { display: block; width: 100%; height: auto; }
.hero .overline { margin-bottom: var(--space-5); }
/* line-height 1.04 y no 0.98: con 0.98 las lineas se tocaban entre si en las
   pantallas donde el titular cae a tres lineas. */
.hero__titulo {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(32px, min(5.8vw, 7.4svh), 80px); line-height: 1.04; letter-spacing: -0.022em;
  margin: 0 0 var(--space-5); max-width: 22ch; color: #F6EFE2;
  text-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}
.hero__lead { font-size: clamp(16px, 1.5vw, 19px); color: rgba(233, 223, 205, 0.82); max-width: 58ch; margin: 0 0 var(--space-7); }
.hero__lead strong { color: #F6EFE2; font-weight: 600; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.hero__pista {
  position: absolute; right: var(--space-6); bottom: var(--space-6); z-index: 2;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(239, 230, 212, 0.5);
  display: flex; align-items: center; gap: var(--space-3);
}
.hero__pista span {
  display: block; width: 46px; height: 1px; background: rgba(239, 230, 212, 0.35);
  position: relative; overflow: hidden;
}
.hero__pista span::after {
  content: ""; position: absolute; inset: 0; background: var(--color-accent-on-dark);
  animation: correr 2.6s ease-in-out infinite;
}
@keyframes correr { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }

/* ============================================================== pasillo ===== */
.pasillo { position: relative; background: #0E0A08; }
.pasillo__sticky {
  position: sticky; top: 0; height: 100svh;
  overflow: hidden; display: flex; flex-direction: column; justify-content: center;
}
.pasillo__track { display: flex; height: 100%; will-change: transform; }

.panel {
  position: relative; flex: 0 0 100vw; height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
}
/* Las fotos se ven: antes iban a 0.62 de brillo y el velo les comia el resto,
   asi que el recorrido parecia negro. El velo ahora solo carga el sector del
   texto (abajo a la izquierda) y deja limpio el resto del cuadro. */
.panel__foto {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.78) brightness(0.84) contrast(1.03);
}
.panel--galpon .panel__foto { filter: saturate(0.92) brightness(0.95) contrast(1.02); object-position: 50% 42%; }
.panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(12, 9, 6, 0.95) 0%, rgba(12, 9, 6, 0.76) 24%, rgba(12, 9, 6, 0.2) 52%, rgba(12, 9, 6, 0.02) 78%),
    linear-gradient(to right, rgba(12, 9, 6, 0.62) 0%, rgba(12, 9, 6, 0.2) 42%, rgba(12, 9, 6, 0) 70%);
}
.panel__texto {
  position: relative; z-index: 2;
  width: min(760px, 100% - 2 * var(--space-8));
  margin: 0 0 var(--space-9) var(--space-8);
  padding-bottom: var(--space-5);
}
.panel__num {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--color-accent-on-dark); margin: 0 0 var(--space-4);
}
.panel__texto h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 5vw, 68px); line-height: 1; letter-spacing: -0.02em;
  margin: 0 0 var(--space-4); color: #F6EFE2;
}
.panel__texto p { font-size: 17px; color: rgba(233, 223, 205, 0.8); max-width: 48ch; margin: 0; }

/* paneles de pieza: el objeto colgado a la izquierda, el texto a la derecha */
.panel--pieza { align-items: center; justify-content: space-between; gap: var(--space-8); padding-inline: var(--space-8); }
.panel--pieza::after {
  background: radial-gradient(90% 70% at 30% 50%, rgba(37, 30, 23, 0.9), rgba(12, 9, 6, 0.96) 70%);
}
.panel__texto--pieza {
  width: min(460px, 100%); margin: 0; padding-bottom: 0; align-self: center;
}
.panel__precio {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-cal); margin: var(--space-4) 0 var(--space-5) !important;
}
.panel--cierre .panel__texto { margin-bottom: var(--space-8); }
.panel--cierre::after {
  background: linear-gradient(to top, rgba(12, 9, 6, 0.95) 0%, rgba(12, 9, 6, 0.66) 38%, rgba(12, 9, 6, 0.16) 72%);
}
.panel__texto--cierre { width: min(820px, 100% - 2 * var(--space-8)); margin-inline: auto; text-align: center; }
.panel__texto--cierre p { margin-inline: auto; }
.panel__acciones { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-6); }
.panel__acciones--izq { justify-content: flex-start; }

/* Panel 05: la mesa nueva, el producto final. La foto va enmarcada, no de fondo:
   asi se ve la mesa completa en vertical en vez de recortada por el viewport. */
.panel--producto {
  align-items: center; justify-content: space-between;
  gap: var(--space-8); padding-inline: var(--space-8);
}
.panel--producto::after {
  background: radial-gradient(85% 85% at 45% 50%, rgba(20, 15, 11, 0.25), rgba(12, 9, 6, 0.9) 78%);
}
.producto { margin: 0; width: min(46vw, 520px); }
.producto__marco {
  background: #EFE6D4; padding: 10px 10px 14px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6), 0 2px 0 rgba(0, 0, 0, 0.4);
}
.producto__foto {
  display: block; width: 100%; height: auto; max-height: 68svh;
  object-fit: cover; object-position: 50% 42%;
}
.producto__pie {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(239, 230, 212, 0.55); margin: var(--space-4) 0 0;
}
.panel__texto--producto { width: min(520px, 100%); margin: 0; padding-bottom: 0; align-self: center; }

.pasillo__progreso {
  position: absolute; left: var(--space-8); right: var(--space-8); bottom: var(--space-5);
  height: 1px; background: rgba(239, 230, 212, 0.16); z-index: 3;
}
.pasillo__progreso span {
  display: block; height: 100%; width: 0; background: var(--color-accent-on-dark);
  transition: width .12s linear;
}
.pasillo__cuenta {
  position: absolute; right: var(--space-8); bottom: calc(var(--space-5) + 14px);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  color: rgba(239, 230, 212, 0.55); margin: 0; z-index: 3;
}

/* --------------------------------------------------- la pieza colgada ---- */
.colgado { position: relative; padding-top: 42px; }
.colgado__hilo {
  position: absolute; top: 0; left: 50%; width: 1px; height: 42px;
  background: linear-gradient(180deg, rgba(207, 200, 182, 0.1), rgba(207, 200, 182, 0.65));
}
.colgado__hilo::before {
  content: ""; position: absolute; top: -5px; left: -3px; width: 7px; height: 7px;
  border-radius: 50%; background: #7E7768;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.7);
}
.colgado__marco {
  margin: 0; padding: 12px 12px 38px;
  background: #EFE6D4;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55), 0 2px 0 rgba(0, 0, 0, 0.4);
  transform-origin: top center;
  transform: rotate(var(--tilt, -1.4deg));
  transition: transform .65s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
  position: relative;
}
.colgado__marco::after {
  content: attr(data-codigo); position: absolute; left: 0; right: 0; bottom: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em;
  text-align: center; color: #6E6455;
}
.colgado__foto { display: block; width: 100%; height: auto; }
.colgado:hover .colgado__marco { transform: rotate(0deg); box-shadow: 0 34px 70px rgba(0, 0, 0, 0.6); }

.colgado--grande { width: min(46vw, 460px); padding-top: 56px; }
.colgado--grande .colgado__hilo { height: 56px; }
.colgado--grande .colgado__foto { max-height: 62svh; object-fit: cover; }

/* =============================================================== encargo ==== */
.encargo { position: relative; background: #191410; padding: var(--space-9) 0; }
.encargo__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-8); align-items: start; }
.encargo__titulo {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(32px, 4.2vw, 58px); line-height: 1.02; letter-spacing: -0.02em;
  margin: 0 0 var(--space-4); color: #F6EFE2;
}
.encargo__lista { list-style: none; counter-reset: linea; margin: var(--space-6) 0 0; padding: 0; }
.encargo__lista li {
  counter-increment: linea; position: relative;
  padding: var(--space-5) 0 var(--space-5) var(--space-8);
  border-top: 1px solid rgba(239, 230, 212, 0.14);
}
.encargo__lista li::before {
  content: "0" counter(linea);
  position: absolute; left: 0; top: var(--space-5);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em;
  color: var(--color-accent-on-dark);
}
.encargo__lista strong {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: 26px; line-height: 1.2; color: #F6EFE2; margin-bottom: 2px;
}
.encargo__lista span { font-size: 16px; color: rgba(233, 223, 205, 0.72); }
.encargo__acciones { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-6); flex-wrap: wrap; }
.encargo__firma { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(239, 230, 212, 0.5); }

/* el "sello" de lo que falta: hoja de taller, no tarjeta de web */
.sello {
  background: #E7DBC7; color: #221A13;
  padding: var(--space-6) var(--space-5) var(--space-5);
  transform: rotate(-1.3deg);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  border-top: 3px solid #8C4A2F;
  position: relative;
}
.sello__titulo {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: #8C4A2F; margin: 0 0 var(--space-4);
}
.sello__lista { margin: 0 0 var(--space-4); padding-left: 18px; }
.sello__lista li { font-size: 15px; line-height: 1.5; margin-bottom: var(--space-2); }
.sello__nota {
  font-size: 13px; line-height: 1.5; color: #58483A;
  border-top: 1px dashed #A8977D; padding-top: var(--space-3); margin: 0;
}
.sello__foto { margin: var(--space-5) -12px -12px; }
.sello__foto img { display: block; width: 100%; height: auto; filter: saturate(0.7) contrast(1.02); }

/* ============================================================= la cosecha ==== */
/* Dos cintas: arriba los muebles que ya salieron del taller, abajo la madera
   todavía en el galpón. Van en direcciones opuestas para que se lean como dos
   cintas transportadoras y no como un bloque.

   El loop es real: la pista lleva la lista duplicada y se desplaza exactamente
   50%, así el empalme no se percibe. El margen va en la ficha y no en `gap` del
   contenedor, porque si no el 50% no cae justo en el empalme.

   Velocidad constante y lenta (cinta transportadora): nunca acelera ni frena. */
.cosecha {
  position: relative; overflow: hidden;
  background: #100C09;
  padding: var(--space-9) 0 var(--space-8);
  border-top: 1px solid rgba(239, 230, 212, 0.1);
}
.cosecha .lead { margin-bottom: var(--space-7); }

.cosecha__cintas { display: grid; gap: var(--space-4); margin-bottom: var(--space-7); }

.cinta-pista { position: relative; overflow: hidden; }

.cinta {
  display: flex; align-items: stretch;
  margin: 0; padding: 0; list-style: none;
  width: max-content;
  height: clamp(210px, 26vw, 320px);
  animation: cinta-izq var(--dur, 90s) linear infinite;
  will-change: transform;
}
.cinta--der { animation-name: cinta-der; }
.cinta--baja { height: clamp(130px, 16vw, 190px); }

.cinta__ficha { flex: 0 0 auto; height: 100%; margin-right: var(--space-3); }
.cinta__ficha img {
  display: block; height: 100%; width: auto; max-width: none;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(239, 230, 212, 0.12);
  filter: saturate(0.92) contrast(1.02);
}

/* Se detiene al mirar. Hover solo con puntero fino: en táctil Chrome deja el
   :hover pegado después del toque y la cinta quedaría frenada para siempre. */
@media (hover: hover) and (pointer: fine) {
  .cinta-pista:hover .cinta { animation-play-state: paused; }
}

@keyframes cinta-izq {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
@keyframes cinta-der {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

/* Las fotos se desvanecen en el borde en vez de cortarse. */
.cinta-pista__velo {
  position: absolute; top: 0; bottom: 0; z-index: 2;
  width: clamp(40px, 7vw, 110px); pointer-events: none;
}
.cinta-pista__velo--izq { left: 0; background: linear-gradient(to right, #100C09, rgba(16, 12, 9, 0)); }
.cinta-pista__velo--der { right: 0; background: linear-gradient(to left, #100C09, rgba(16, 12, 9, 0)); }

.cosecha__pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); flex-wrap: wrap;
}
.cosecha__nota { margin: 0; font-size: 15px; color: rgba(233, 223, 205, 0.66); max-width: 46ch; }

@media (max-width: 900px) {
  .cosecha__pie { align-items: flex-start; flex-direction: column; }
}

/* ------------------------------------------------- recorrido sin empuje ---- */
/* Las mismas reglas que la pantalla chica, pero disparadas por clase en vez de
   por ancho: alcanzan a quien pide menos movimiento en un PC grande (el scroll
   no empuja el track) y a quien entra sin JS. Sin esto los paneles quedaban en
   fila de 100vw dentro de un sticky con overflow hidden: se veia el primero. */
html:not(.js) .pasillo,
html.sin-empuje .pasillo { height: auto !important; }
html:not(.js) .pasillo__sticky,
html.sin-empuje .pasillo__sticky { position: static; height: auto; display: block; }
html:not(.js) .pasillo__track,
html.sin-empuje .pasillo__track { display: block; transform: none !important; }
html:not(.js) .panel,
html.sin-empuje .panel {
  height: auto; min-height: 78svh; flex: none; width: 100%;
  align-items: flex-end;
}
html:not(.js) .panel__texto,
html.sin-empuje .panel__texto { margin: var(--space-8) var(--space-5) var(--space-7); width: auto; }
html:not(.js) .panel--pieza,
html.sin-empuje .panel--pieza {
  display: block; padding: var(--space-8) var(--space-5) var(--space-7); min-height: 0;
}
html:not(.js) .colgado--grande,
html.sin-empuje .colgado--grande { width: min(78vw, 340px); margin: 0 auto; }
html:not(.js) .panel__texto--pieza,
html.sin-empuje .panel__texto--pieza { width: auto; margin: var(--space-6) 0 0; }
html:not(.js) .panel--producto,
html.sin-empuje .panel--producto {
  display: block; padding: var(--space-8) var(--space-5) var(--space-7); min-height: 0;
}
html:not(.js) .panel--producto::after,
html.sin-empuje .panel--producto::after {
  background: linear-gradient(to top, rgba(12, 9, 6, 0.96) 0%, rgba(12, 9, 6, 0.7) 40%, rgba(12, 9, 6, 0.2) 75%);
}
html:not(.js) .producto,
html.sin-empuje .producto { width: min(80vw, 360px); margin: 0 auto; }
html:not(.js) .producto__foto,
html.sin-empuje .producto__foto { max-height: none; }
html:not(.js) .panel__texto--producto,
html.sin-empuje .panel__texto--producto { width: auto; margin: var(--space-6) 0 0; }
html:not(.js) .panel--cierre .panel__texto,
html.sin-empuje .panel--cierre .panel__texto { margin-bottom: var(--space-7); }
html:not(.js) .panel__texto--cierre,
html.sin-empuje .panel__texto--cierre { width: auto; margin: var(--space-8) var(--space-5); }
html:not(.js) .pasillo__progreso,
html:not(.js) .pasillo__cuenta,
html.sin-empuje .pasillo__progreso,
html.sin-empuje .pasillo__cuenta { display: none; }

/* ============================================================== llegadas ==== */
.llegadas { background: #0E0A08; padding: var(--space-9) 0; }
.llegadas .lead { margin-bottom: var(--space-7); }

.grilla-colgada {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-7) var(--space-6);
  padding-top: var(--space-4);
}
.grilla-colgada .colgado:nth-child(4n + 1) { --tilt: -1.8deg; }
.grilla-colgada .colgado:nth-child(4n + 2) { --tilt: 1.2deg; }
.grilla-colgada .colgado:nth-child(4n + 3) { --tilt: -0.8deg; }
.grilla-colgada .colgado:nth-child(4n + 4) { --tilt: 1.8deg; }
.grilla-colgada a.colgado { text-decoration: none; display: block; }
.grilla-colgada .colgado__titulo {
  font-family: var(--font-display); font-size: 20px; line-height: 1.2;
  color: #F6EFE2; margin: var(--space-4) 0 4px;
}
.grilla-colgada .colgado__estado {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(239, 230, 212, 0.55); margin: 0;
}
.acciones--centro { display: flex; justify-content: center; margin-top: var(--space-8); }

/* ================================================================ local ==== */
.local { background: #16110D; padding: var(--space-9) 0; }
.local__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.local__titulo {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(32px, 4.4vw, 58px); line-height: 1.02; letter-spacing: -0.02em;
  margin: 0 0 var(--space-4); color: #F6EFE2;
}
.local__texto { font-size: 17px; color: rgba(233, 223, 205, 0.78); max-width: 52ch; margin: 0 0 var(--space-6); }
.local__datos { margin: 0 0 var(--space-6); }
.local__datos div {
  display: grid; grid-template-columns: 120px 1fr; gap: var(--space-4);
  padding: var(--space-3) 0; border-top: 1px solid rgba(239, 230, 212, 0.14);
}
.local__datos dt {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--color-accent-on-dark); padding-top: 3px;
}
.local__datos dd { margin: 0; font-size: 15px; color: rgba(233, 223, 205, 0.85); }
.local__acciones { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.local__foto { margin: 0; }
.local__foto img { display: block; width: 100%; height: auto; filter: saturate(0.7) brightness(0.9); }
.local__foto figcaption {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  color: rgba(239, 230, 212, 0.5); margin-top: var(--space-3);
}

/* ================================================================== pie ==== */
.pie { background: #0B0806; padding: var(--space-8) 0 var(--space-6); border-top: 1px solid rgba(239, 230, 212, 0.1); }
.pie__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-7); align-items: start; }
.pie__grid img { width: 240px; height: auto; margin-bottom: var(--space-4); }
.pie__bajada { font-size: 14px; color: rgba(233, 223, 205, 0.6); max-width: 42ch; margin: 0; }
.pie__titulo {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--color-accent-on-dark); margin: 0 0 var(--space-3);
}
.pie__dir { font-style: normal; font-size: 14px; color: rgba(233, 223, 205, 0.7); }
.pie__lista { list-style: none; margin: 0; padding: 0; }
.pie__lista li { margin-bottom: var(--space-2); }
.pie__lista a { font-size: 14px; color: rgba(233, 223, 205, 0.8); text-decoration: none; }
.pie__lista a:hover { color: #fff; text-decoration: underline; }
.pie__legal {
  margin-top: var(--space-7); padding-top: var(--space-4);
  border-top: 1px solid rgba(239, 230, 212, 0.1);
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
}
.pie__legal p { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: rgba(239, 230, 212, 0.4); margin: 0; }

/* ============================================================== revelado ==== */
html.js [data-revela] {
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
}
html.js [data-revela].visible { opacity: 1; transform: none; }

/* Sin JS las cintas quedarian como dos franjas vacias. */
html:not(.js) .cosecha__cintas { display: none; }

/* ============================================================ responsive ==== */
@media (max-width: 1100px) {
  .grilla-colgada { grid-template-columns: repeat(3, 1fr); }
  .panel--pieza { gap: var(--space-6); padding-inline: var(--space-6); }
}

@media (max-width: 900px) {
  /* en pantalla chica el recorrido no se fuerza: los paneles se apilan */
  .pasillo { height: auto !important; }
  .pasillo__sticky { position: static; height: auto; display: block; }
  .pasillo__track { display: block; transform: none !important; }
  .panel {
    height: auto; min-height: 78svh; flex: none; width: 100%;
    align-items: flex-end;
  }
  .panel__texto { margin: var(--space-8) var(--space-5) var(--space-7); width: auto; }
  .panel--pieza {
    display: block; padding: var(--space-8) var(--space-5) var(--space-7);
    min-height: 0;
  }
  .colgado--grande { width: min(78vw, 340px); margin: 0 auto; }
  .panel__texto--pieza { width: auto; margin: var(--space-6) 0 0; }
  .panel--producto {
    display: block; padding: var(--space-8) var(--space-5) var(--space-7);
    min-height: 0;
  }
  .panel--producto::after {
    background: linear-gradient(to top, rgba(12, 9, 6, 0.96) 0%, rgba(12, 9, 6, 0.7) 40%, rgba(12, 9, 6, 0.2) 75%);
  }
  .producto { width: min(80vw, 360px); margin: 0 auto; }
  .producto__foto { max-height: none; }
  .panel__texto--producto { width: auto; margin: var(--space-6) 0 0; }
  .panel__texto--cierre { width: auto; margin: var(--space-8) var(--space-5); }
  .pasillo__progreso, .pasillo__cuenta { display: none; }

  .encargo__grid, .local__grid, .pie__grid { grid-template-columns: 1fr; }
  .sello { transform: none; }
  .grilla-colgada { grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-4); }
  .hero__titulo { max-width: none; }
  .hero__pista { display: none; }
  .barra__nav { gap: var(--space-3); }
  .barra__nav a[href="#el-local"] { display: none; }
  .local__datos div { grid-template-columns: 1fr; gap: 2px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .grilla-colgada { grid-template-columns: 1fr 1fr; }
  .colgado__marco { padding: 8px 8px 30px; }
  .hero__marca { width: min(76vw, calc(30svh * 1.608)); margin-bottom: var(--space-6); }
  .pie__grid { gap: var(--space-6); }
}

/* --------------------------------------------- quien pide menos movimiento */
/* Todo va bajo `html:not(.movimiento)` para que `?motion` pueda forzar la
   experiencia completa sin tener que tocar la preferencia de Windows. Lo pone
   el script del <head>, antes de pintar. Sin JS, html nunca lleva la clase y
   esto se comporta como siempre: respeta al sistema. */
@media (prefers-reduced-motion: reduce) {
  html:not(.movimiento) *,
  html:not(.movimiento) *::before,
  html:not(.movimiento) *::after { animation: none !important; }
  html:not(.movimiento) { scroll-behavior: auto; }
  html:not(.movimiento) .polvo,
  html:not(.movimiento) .luz { display: none; }
  /* La cinta se queda quieta y se recorre con el dedo: el movimiento no es el
     contenido, la foto si. Se esconde la copia del loop para no ver cada foto
     dos veces seguidas. */
  html:not(.movimiento) .cinta { animation: none !important; }
  html:not(.movimiento) .cinta-pista { overflow-x: auto; }
  html:not(.movimiento) .cinta__ficha[aria-hidden="true"] { display: none; }
  html:not(.movimiento) .hero__fondo img { animation: none; transform: none; }
  html:not(.movimiento) [data-revela] { opacity: 1; transform: none; transition: none; }
  html:not(.movimiento) .colgado__marco,
  html:not(.movimiento) .colgado:hover .colgado__marco { transform: none; }
  html:not(.movimiento) .sello { transform: none; }
}

/* ------------------------------------------------------------ diagnóstico -- */
/* Solo aparece con `?diagnostico`. Sirve para saber, sin adivinar, qué versión
   del sitio está sirviendo el servidor y qué preferencias está aplicando el
   navegador de quien mira. */
.diagnostico {
  position: fixed; z-index: 200; left: 12px; bottom: 12px;
  max-width: calc(100vw - 24px);
  padding: 10px 14px;
  background: #0B0806; color: #EFE6D4;
  border: 1px solid rgba(239, 230, 212, 0.28);
  font-family: var(--font-mono); font-size: 11px; line-height: 1.5;
  letter-spacing: 0.04em; white-space: pre-wrap;
}