/* Movimiento de la web (11/11). Solo transform, opacity y clip-path.
   Los estados ocultos solo existen con JS (.mov) y sin «reducir movimiento» (.quieto). */
:root { --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); }

/* ---------- Entradas al hacer scroll ---------- */
.mov:not(.quieto) .aparece {
  opacity: 0; transform: translate3d(0, 22px, 0);
  transition: opacity .6s var(--ease), transform .7s var(--ease);
  transition-delay: var(--retardo, 0ms);
}
.mov:not(.quieto) .aparece.visto { opacity: 1; transform: none; }

/* Fotos y huecos de foto: se destapan de abajo arriba */
.mov:not(.quieto) .hueco-foto.aparece, .mov:not(.quieto) .comparar.aparece {
  opacity: 1; transform: none; clip-path: inset(100% 0 0 0);
  transition: clip-path .9s var(--ease);
}
.mov:not(.quieto) .hueco-foto.aparece.visto, .mov:not(.quieto) .comparar.aparece.visto { clip-path: inset(0 0 0 0); }

/* Titulares palabra a palabra */
.pal { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.pal > span { display: inline-block; }
.mov:not(.quieto) [data-partir] .pal > span { transform: translate3d(0, 105%, 0); transition: transform .8s var(--ease); }
.mov:not(.quieto) [data-partir].visto .pal > span { transform: none; }

/* ---------- Portada: la foto se aleja al cargar y se queda atrás al bajar ---------- */
.mov:not(.quieto) .foto-fondo { scale: 1.12; animation: alejar 1.8s var(--ease) forwards; will-change: transform; }
@keyframes alejar { to { scale: 1; } }

/* ---------- Tres generaciones: la línea se dibuja tramo a tramo ---------- */
.mov:not(.quieto) .generaciones .anio { border-bottom-color: transparent; position: relative; }
.mov:not(.quieto) .generaciones .anio::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--tinta);
  transform: scaleX(0); transform-origin: left center; transition: transform .9s var(--ease-in-out);
}
.mov:not(.quieto) .generaciones li.activo .anio::after { transform: scaleX(1); }
.mov:not(.quieto) .generaciones b::before { transform: scale(.4); opacity: 0; transition: transform .4s var(--ease) .5s, opacity .3s var(--ease) .5s; }
.mov:not(.quieto) .generaciones li.activo b::before { transform: none; opacity: 1; }

/* ---------- El oficio: escena fijada con el saco que se llena ---------- */
.ensacado { background: var(--tinta); color: var(--harina); }
.ensacado :focus-visible { outline-color: var(--maiz); }
.ensacado-pin { padding: clamp(64px, 10vw, 120px) 0; }
.mov:not(.quieto) .ensacado { height: 320svh; }
.mov:not(.quieto) .ensacado-pin { position: sticky; top: var(--cab); height: calc(100svh - var(--cab)); display: flex; align-items: center; padding: 0; overflow: hidden; }
.ensacado-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 24px clamp(24px, 6vw, 96px); align-items: center; }
.ensacado .antetitulo { color: var(--maiz); }
.ensacado h2 { font-size: clamp(2.4rem, 6vw, 5rem); max-width: 10ch; }
.pasos-v { list-style: none; padding: 0; margin: clamp(24px, 4vh, 44px) 0 14px; }
.pasos-v li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid rgba(236, 232, 223, .2); }
.pasos-v .num { font-size: 2rem; font-weight: 900; letter-spacing: -.04em; color: var(--maiz); font-variant-numeric: tabular-nums; line-height: 1; }
.pasos-v b { font-size: clamp(1.4rem, 2.6vw, 2.1rem); letter-spacing: -.03em; display: block; line-height: 1.05; }
.pasos-v p { margin-top: 6px; color: rgba(236, 232, 223, .82); }
.mov:not(.quieto) .pasos-v li > * { transition: opacity .35s var(--ease); }
.mov:not(.quieto) .pasos-v li:not(.activo) > * { opacity: .34; }
.ensacado .pend-nota { color: rgba(236, 232, 223, .7); }

.ensacado-escena { position: relative; display: flex; flex-direction: column; align-items: center; }
.saco-svg { width: auto; height: min(62svh, 540px); max-width: 100%; overflow: visible; }
.relleno { transform: translateY(0); }
.mov:not(.quieto) .relleno { transform: translateY(300px); }
.saco-cuerpo { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .6s var(--ease-in-out); }
.ensacado-escena.cerrado .saco-cuerpo { transform: rotate(-3deg) translateX(6px); }
.cosido { transform-box: fill-box; transform-origin: 0 50%; }
.mov:not(.quieto) .cosido { transform: scaleX(0); transition: transform .6s var(--ease); }
.mov:not(.quieto) .ensacado-escena.cerrado .cosido { transform: none; }
.caen circle { opacity: 0; }
.ensacado-escena.cae .caen circle { animation: caer .7s linear infinite; }
.ensacado-escena.cae .caen circle:nth-child(2) { animation-delay: .14s; }
.ensacado-escena.cae .caen circle:nth-child(3) { animation-delay: .28s; }
.ensacado-escena.cae .caen circle:nth-child(4) { animation-delay: .42s; }
.ensacado-escena.cae .caen circle:nth-child(5) { animation-delay: .56s; }
@keyframes caer { 0% { transform: translateY(-6px); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(60px); opacity: 0; } }
.lectura { margin-top: 10px; text-align: center; }
.lectura output { display: block; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 900; letter-spacing: -.04em; color: var(--maiz); font-variant-numeric: tabular-nums; line-height: 1; }
.lectura small { color: rgba(236, 232, 223, .75); }
@media (max-width: 820px) {
  .ensacado-grid { grid-template-columns: 1fr; }
  .ensacado-escena { order: -1; }
  .saco-svg { height: 30svh; }
  .lectura output { font-size: 1.75rem; }
  .ensacado h2 { font-size: clamp(2rem, 9vw, 3rem); }
  .pasos-v { margin-top: 14px; }
  .pasos-v li { padding: 8px 0; grid-template-columns: 44px minmax(0, 1fr); }
  .pasos-v .num { font-size: 1.4rem; }
  .pasos-v p { font-size: .9375rem; margin-top: 2px; }
}
/* Pantallas bajas: el saco no se fija, todo en su sitio y visible */
@media (max-height: 700px), (max-width: 820px) and (max-height: 760px) {
  .mov:not(.quieto) .ensacado { height: auto; }
  .mov:not(.quieto) .ensacado-pin { position: static; height: auto; display: block; padding: clamp(56px, 10vw, 96px) 0; overflow: visible; }
}

/* ---------- Productos: la fila responde al pasar el ratón ---------- */
@media (hover: hover) and (pointer: fine) {
  .animales .mini-sacos img { transition: transform .35s var(--ease); }
  .animales a:hover .mini-sacos img { transform: translateY(-6px) rotate(-2deg); }
  .animales a:hover .mini-sacos img:nth-child(2) { transition-delay: 30ms; }
  .animales a:hover .mini-sacos img:nth-child(3) { transition-delay: 60ms; }
  .animales a:hover .mini-sacos img:nth-child(4) { transition-delay: 90ms; }
  .catalogo .foto-saco { transition: transform .35s var(--ease); }
  .catalogo li:hover .foto-saco { transform: translateY(-4px) rotate(-1.5deg); }
}

/* ---------- Pedido: el grano que vuela y el botón que lo recibe ---------- */
.grano-vuela { position: fixed; z-index: 80; width: 16px; height: 16px; border-radius: 50%; background: var(--maiz); box-shadow: 0 0 0 3px rgba(226, 166, 42, .3); pointer-events: none; }
.top-pedido { transition: transform .16s var(--ease); }
.top-pedido.golpe { transform: scale(1.08); }

/* ---------- Desplegable y panel del pedido ---------- */
.desplegable[open] .desp-lista { animation: abrir-desp .2s var(--ease); transform-origin: 16px 0; }
@keyframes abrir-desp { from { opacity: 0; transform: translateY(-4px) scale(.97); } }
.menu-movil[open] nav { animation: abrir-desp .2s var(--ease); transform-origin: 100% 0; }
dialog.pedido[open] { animation: abrir-panel .24s var(--ease); }
dialog.pedido[open]::backdrop { animation: fundido .24s var(--ease); }
@keyframes abrir-panel { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes fundido { from { opacity: 0; } }

/* ---------- Paso de una página a otra ---------- */
@view-transition { navigation: auto; }
.top { view-transition-name: cabecera; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }

/* ---------- Reducir movimiento: mismo contenido, sin desplazamientos ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .foto-fondo { animation: none; scale: 1; }
  .ensacado-escena.cae .caen circle { animation: none; }
  .ensacado-escena.cerrado .saco-cuerpo, .top-pedido.golpe { transform: none; }
  .desplegable[open] .desp-lista, .menu-movil[open] nav, dialog.pedido[open] { animation: fundido .15s ease; }
}