/* Capa de movimiento de la V6. Va encima de estilos.css (la V2) y no cambia su aspecto en reposo.
   Todo lo que se oculta para animarlo depende de html.js: sin JavaScript la página se ve completa.
   Con "reducir movimiento" no hay desplazamientos ni telones, solo la página quieta. */

:root { --sale: cubic-bezier(.16, 1, .3, 1); --suave: cubic-bezier(.65, 0, .35, 1); }

/* Fundido al pasar de una página a otra (navegadores que lo admiten) */
@view-transition { navigation: auto; }

/* Lo que se agranda al entrar nunca debe hacer que la página se mueva de lado */
body { overflow-x: clip; }
.cabeza-pagina figure { overflow: hidden; }
@media (max-width: 860px) { .portada figure { overflow: hidden; } }

/* ---------- Pantalla de carga: el logo, una línea terracota y un telón que sube ---------- */
.cargador { display: none; }
.js .cargador.activo { display: grid; position: fixed; inset: 0; z-index: 50; place-items: center; background: var(--estuco); clip-path: inset(0 0 0 0); transition: clip-path 750ms var(--suave); }
.cargador div { display: grid; justify-items: center; gap: 18px; }
.cargador img { width: min(260px, 60vw); opacity: 0; transform: translateY(12px); animation: aparece 700ms var(--sale) 100ms forwards; }
.cargador i { display: block; width: min(200px, 46vw); height: 2px; background: var(--terracota); transform: scaleX(0); transform-origin: left; animation: traza 700ms var(--suave) 350ms forwards; }
.js .cargador.fuera { clip-path: inset(0 0 100% 0); }
@keyframes aparece { to { opacity: 1; transform: none; } }
@keyframes traza { to { transform: scaleX(1); } }

/* ---------- Entrada de la portada ---------- */
.js .portada h1, .js .cabeza-pagina h1 { clip-path: inset(0 0 0 0); }
.js .entra-portada .portada h1 > span, .js .entra-portada .cabeza-pagina h1 > span { display: inline-block; transform: translateY(105%); }
.js .entra-portada.listo .portada h1 > span, .js .entra-portada.listo .cabeza-pagina h1 > span { transform: none; transition: transform 900ms var(--sale) calc(var(--n, 0) * 90ms); }
.js .entra-portada [data-tras-titulo] { opacity: 0; transform: translateY(18px); }
.js .entra-portada.listo [data-tras-titulo] { opacity: 1; transform: none; transition: opacity 700ms ease calc(300ms + var(--n, 0) * 90ms), transform 900ms var(--sale) calc(300ms + var(--n, 0) * 90ms); }
.js .entra-portada .portada figure, .js .entra-portada .cabeza-pagina figure { clip-path: inset(100% 0 0 0); }
.js .entra-portada.listo .portada figure, .js .entra-portada.listo .cabeza-pagina figure { clip-path: inset(0 0 0 0); transition: clip-path 1200ms var(--suave) 150ms; }
/* La etiqueta de la foto de portada sobresale 22 px por la izquierda: la cortina la deja fuera del recorte */
.js .entra-portada .portada figure { clip-path: inset(100% 0 0 -40px); }
.js .entra-portada.listo .portada figure { clip-path: inset(0 0 0 -40px); }
.js .entra-portada .portada figure img, .js .entra-portada .cabeza-pagina figure img { transform: scale(1.14); }
.js .entra-portada.listo .portada figure img, .js .entra-portada.listo .cabeza-pagina figure img { transform: scale(1); transition: transform 1600ms var(--sale) 150ms; }
/* La etiqueta de la foto de portada llega la última */
.js .entra-portada .portada figcaption { opacity: 0; }
.js .entra-portada.listo .portada figcaption { opacity: 1; transition: opacity 600ms ease 1100ms; }

/* ---------- Al bajar: cada tipo de pieza entra a su manera, una sola vez ---------- */
.js [data-mov="texto"] { opacity: 0; transform: translateY(26px); transition: opacity 700ms ease, transform 900ms var(--sale); transition-delay: calc(var(--n, 0) * 80ms); }
/* La caja siempre cuenta como visible; lo que se destapa es la foto de dentro */
.js [data-mov="foto"] img { clip-path: inset(0 0 100% 0); transform: scale(1.12); transition: clip-path 1100ms var(--suave), transform 1500ms var(--sale); }
.js [data-mov="lista"] > * { opacity: 0; transform: translateY(22px); transition: opacity 600ms ease, transform 800ms var(--sale); }
.js [data-mov="lista"].dentro > * { opacity: 1; transform: none; }
.js [data-mov="lista"] > *:nth-child(2) { transition-delay: 90ms; } .js [data-mov="lista"] > *:nth-child(3) { transition-delay: 180ms; }
.js [data-mov="lista"] > *:nth-child(4) { transition-delay: 270ms; } .js [data-mov="lista"] > *:nth-child(5) { transition-delay: 360ms; }
.js [data-mov].dentro { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
.js [data-mov="foto"].dentro img { clip-path: inset(0 0 0 0); transform: scale(1.06); }

/* La caja de cada foto animada ocupa el sitio de la foto y recorta lo que sobresale */
.cortina { overflow: hidden; min-width: 0; }
.pack > .cortina { height: 100%; }
.servicio:nth-child(even) > .cortina { order: 2; }
@media (max-width: 760px) { .servicio:nth-child(even) > .cortina { order: 0; } }
.mesa > .cortina img, .quienes > .cortina img, .tienda > .cortina img { will-change: transform; }

/* ---------- Profundidad: la foto va un poco más lenta que la página ---------- */
.profundo { overflow: hidden; }
.profundo img { will-change: transform; }

/* ---------- Cinta de las del mes ---------- */
.cinta { overflow: hidden; margin-top: 56px; border-top: 1px solid #5C463E; border-bottom: 1px solid #5C463E; padding-block: 18px; }
.cinta div { display: flex; width: max-content; gap: 48px; font: 400 clamp(2.4rem, 5vw, 4.4rem)/1 var(--serif); color: var(--terracota); white-space: nowrap; }
.cinta span::after { content: "·"; margin-left: 48px; color: #8C6A5E; }
@media (prefers-reduced-motion: no-preference) {
  .cinta div { animation: cinta 38s linear infinite; }
  .cinta:hover div { animation-play-state: paused; }
}
@keyframes cinta { to { transform: translateX(-50%); } }

/* ---------- Galería "Desde el obrador": se mueve de lado al bajar ---------- */
.galeria { background: var(--papel); }
.galeria__escena { padding-block: 88px 64px; }
.galeria__pista { display: flex; gap: 24px; padding-inline: max(20px, calc((100vw - 1180px) / 2 + 20px)); }
.galeria figure { margin: 0; flex: none; width: clamp(260px, 30vw, 420px); }
.galeria figure:nth-child(even) { margin-top: 56px; }
.galeria img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.galeria figcaption { margin-top: 10px; font-size: .85rem; color: var(--tinta-suave); }
.galeria .seccion-cabeza { margin-bottom: 40px; }
/* Escritorio con movimiento: la sección se queda quieta y la pista avanza de lado con el scroll */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  .js .galeria { height: var(--alto-galeria, 260vh); }
  .js .galeria__escena { position: sticky; top: 64px; height: calc(100vh - 64px); display: flex; flex-direction: column; justify-content: safe center; overflow: hidden; padding-block: 0; }
  /* En pantallas bajas (portátiles, la vista previa) las fotos se ajustan al alto para que el titular no se corte */
  .js .galeria figure { width: min(clamp(260px, 30vw, 420px), calc((100vh - 360px) * .8)); min-width: 180px; }
  .js .galeria__pista { will-change: transform; }
}
/* Móvil o sin movimiento: se desliza con el dedo */
@media (max-width: 860px), (prefers-reduced-motion: reduce) {
  .galeria__pista { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
  .galeria figure { scroll-snap-align: start; width: 74vw; }
  .galeria figure:nth-child(even) { margin-top: 0; }
}

/* ---------- Respuesta al tocar ---------- */
.boton { position: relative; overflow: hidden; isolation: isolate; }
.boton::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--terracota-texto); transform: scaleY(0); transform-origin: bottom; transition: transform 380ms var(--sale); }
.boton:hover { background: var(--tinta); }
.mes .boton:hover { background: var(--terracota); }
.mes .boton::before { background: var(--papel); }
@media (hover: hover) { .boton:hover::before { transform: scaleY(1); } }
.boton:active { transform: scale(.97); transition: transform 120ms ease; }
.menu a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 350ms var(--sale), color 200ms ease; padding-bottom: 2px; }
.menu a:hover { background-size: 100% 1px; }
.tarta img, .pack img { transition: transform 700ms var(--sale); }
.tarta:hover img, .pack:hover img { transform: scale(1.04); }
.tarta { overflow: hidden; }
.menu-movil nav { transform-origin: top right; }
.menu-movil[open] nav { animation: despliega 260ms var(--sale); }
@keyframes despliega { from { opacity: 0; transform: translateY(-8px) scale(.98); } }

/* ---------- Reducir movimiento: todo quieto y visible ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .cargador.activo { display: none; }
  .js [data-mov], .js [data-mov] > *, .js [data-mov] img,
  .js .entra-portada h1 > span, .js .entra-portada [data-tras-titulo], .js .entra-portada figure, .js .entra-portada figure img, .js .entra-portada figcaption {
    opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important;
  }
  .boton::before, .menu-movil[open] nav { transition: none; animation: none; }
  @view-transition { navigation: none; }
}

/* ---------- Despiece: un vídeo que avanza al bajar, de los huevos a la caja de madera cerrada ---------- */
.despiece { background: var(--estuco); }
.despiece__escena { position: relative; }
.despiece__lienzo { position: relative; aspect-ratio: 16 / 9; max-height: 70vh; width: 100%; overflow: hidden; background: #EFE2D3; }
.despiece__lienzo img, .despiece__lienzo canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.despiece__capa { padding-block: 40px 64px; }
.despiece__textos { max-width: 30rem; }
.despiece h2 { font-size: clamp(2.1rem, 4vw, 3.2rem); margin-block: 12px 24px; }
.despiece__pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.despiece__pasos li { display: grid; gap: 6px; }
.despiece__pasos strong { font: 400 1.5rem/1.2 var(--serif); }
.despiece__pasos span { color: var(--tinta-suave); }
.despiece__pasos .boton { justify-self: start; margin-top: 10px; }
.despiece__avance { display: none; }
.despiece__nota { margin: 16px 0 0; font-size: .75rem; color: var(--tinta-suave); }
@media (prefers-reduced-motion: no-preference) {
  /* Con JavaScript: la escena se queda quieta en pantalla y el vídeo la llena; el texto va en una ficha encima */
  .js .despiece { height: 560vh; }
  .js .despiece__escena { position: sticky; top: 64px; height: calc(100vh - 64px); overflow: hidden; }
  .js .despiece__lienzo { position: absolute; inset: 0; aspect-ratio: auto; max-height: none; }
  .js .despiece__capa { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-block: 0 40px; pointer-events: none; }
  .js .despiece__textos { pointer-events: auto; background: color-mix(in srgb, var(--papel) 94%, transparent); padding: 28px 30px 24px; max-width: 26rem; }
  .js .despiece h2 { font-size: clamp(1.8rem, 2.6vw, 2.3rem); margin-block: 8px 18px; }
  .js .despiece__pasos { display: grid; }
  .js .despiece__pasos li { grid-area: 1 / 1; align-content: start; opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity 450ms ease, transform 600ms var(--sale), visibility 0s 450ms; }
  .js .despiece__pasos li.actual { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .js .despiece__avance { display: flex; gap: 6px; margin-top: 20px; }
  .js .despiece__avance i { flex: 1; height: 2px; background: var(--linea); position: relative; overflow: hidden; }
  .js .despiece__avance i::after { content: ""; position: absolute; inset: 0; background: var(--terracota); transform: scaleX(var(--lleno, 0)); transform-origin: left; }
  .js .despiece__nota { position: absolute; right: 20px; bottom: 16px; margin: 0; color: var(--tinta); background: color-mix(in srgb, var(--papel) 80%, transparent); padding: 2px 10px; border-radius: 999px; }
}
@media (max-width: 860px) {
  .despiece__pasos strong { font-size: 1.15rem; }
  .despiece__pasos span { font-size: .9rem; }
}
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  /* Móvil: el vídeo arriba (la mitad de la pantalla) y la ficha debajo, sin taparlo */
  .js .despiece__lienzo { bottom: auto; height: 56%; }
  .js .despiece__capa { justify-content: flex-start; padding-top: calc((100vh - 64px) * .56 + 12px); padding-bottom: 16px; }
  .js .despiece__textos { padding: 18px 20px 16px; max-width: none; background: var(--papel); }
  .js .despiece h2 { font-size: 1.6rem; margin-block: 6px 12px; }
  .js .despiece__nota { top: calc(56% - 34px); bottom: auto; right: 12px; font-size: .7rem; }
}