/**
 * movimiento.css — La capa que hace que la página se sienta viva.
 *
 * Tres reglas que no se rompen:
 *
 *  1. Nada se mueve hacia atrás. Un bloque que ya entró se queda. Animar al
 *     subir es lo que marea y lo que hace que una página se sienta barata.
 *
 *  2. Nada tapa contenido ni retrasa la lectura. El movimiento acompaña a lo
 *     que ya está, no lo esconde esperando su turno. Sin JavaScript, todo se
 *     ve completo desde el primer momento.
 *
 *  3. Quien pidió menos movimiento no ve ninguno. No es una cortesía: para
 *     bastante gente el movimiento en pantalla produce mareo de verdad.
 */

/* ---------------------------------------------- entrada por líneas ----- */
/*
 * El titular no aparece: se descubre. Cada línea sube desde detrás de un
 * borde invisible, una después de otra. Es el gesto que separa una página
 * cuidada de una plantilla, y cuesta dos reglas.
 */
.lineas { display: block; }
.linea {
  display: block;
  overflow: hidden;
  /* El padding evita que las colas de la «g» y la «j» se recorten. */
  padding-bottom: .08em;
  margin-bottom: -.08em;
}
.linea > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1100ms var(--curva-salida);
  transition-delay: var(--retraso, 0ms);
}
.entrada .linea > span,
.sin-js .linea > span { transform: none; }

/* ---------------------------------------------- fotos que se abren ----- */
/*
 * base.css ya trae el acercamiento que se relaja. Aquí se le añade el gesto
 * que le faltaba: la foto se descubre de abajo hacia arriba mientras la
 * imagen vuelve de la escala. Los dos a la vez dan profundidad; por separado
 * se ven como un efecto pegado encima.
 *
 * No se toca `.revelar`: el sistema de revelado sigue siendo uno solo, con un
 * observador y una clase. Tener dos sería tener dos cosas que arreglar cada
 * vez.
 */
/*
 * El recorte SÓLO se aplica cuando landing.js ya avisó que va a encargarse de
 * quitarlo. Sin esa condición, un día en que ese archivo no cargue —falló la
 * red a media descarga, un bloqueador se pasó de listo— y esta hoja sí,
 * TODAS las fotos de la carta quedarían invisibles: una página en blanco por
 * un adorno. La escala de base.css se podía permitir el lujo de fallar así
 * porque una foto un 8 % más grande se sigue viendo; un recorte al 100 % no.
 */
html.revelado .revelar-imagen {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1100ms var(--curva-salida);
  transition-delay: var(--retraso, 0ms);
}
html.revelado .revelar-imagen.visible { clip-path: inset(0 0 0 0); }

/* Un platillo sin fotografía no lleva marco vacío: se lee como una carta
   impresa, con su línea de puntos hasta el precio. Una caja beige de doscientos
   píxeles sin nada dentro se lee como algo descompuesto. */
.platillo--sinfoto { padding-top: var(--e-2, .75rem); }

/* ---------------------------------------------- avance de lectura ------ */
/*
 * Una línea finísima arriba que dice cuánto falta. En una carta larga
 * responde la pregunta «¿cuánto más hay?» sin que nadie tenga que rascar.
 */
.avance {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 120;
  background: var(--c-acento);
  transform: scaleX(var(--avance, 0)); transform-origin: left;
  /* Sin transición: sigue al dedo. Una barra de avance con retardo se siente
     descompuesta, no suave. */
  pointer-events: none;
}

/* ---------------------------------------------- profundidad al bajar --- */
/*
 * El fondo de la portada se mueve más despacio que el texto. Es el efecto
 * más viejo del oficio y sigue siendo el que más profundidad da por lo poco
 * que cuesta. Lo mueve JavaScript escribiendo --deriva.
 */
.portada__fondo, .portada__video {
  will-change: transform;
  transform: translate3d(0, var(--deriva, 0px), 0) scale(var(--acerca, 1));
}

/* ---------------------------------------------- tarjetas de platillo --- */
@media (hover: hover) {
  .platillo {
    transition: transform 500ms var(--curva-salida), box-shadow 500ms var(--curva);
  }
  .platillo:hover { transform: translateY(-6px); }
  .platillo:hover .platillo__foto { box-shadow: var(--sombra-3); }
}

/* En pantalla táctil no hay «hover», pero sí hay dedo: que responda al
   tocarla es lo que hace que se sienta un botón de verdad y no una imagen. */
.platillo:active { transform: scale(.985); }
.platillo { transition: transform 220ms var(--curva); }

/* ---------------------------------------------- botones ---------------- */
.btn, .boton, .portada__acciones a {
  transition: transform 220ms var(--curva), background-color var(--ms-rapido) var(--curva),
              color var(--ms-rapido) var(--curva), border-color var(--ms-rapido) var(--curva);
}
.btn:active, .boton:active, .portada__acciones a:active { transform: scale(.97); }

/* ---------------------------------------------- barra fija en móvil ---- */
/*
 * Lo que alguien quiere hacer desde el teléfono: ver qué hay, preguntar, o
 * llegar. Las tres a un pulgar de distancia, siempre.
 *
 * Aparece al salir de la portada, no antes: encima de la portada estorbaría
 * justo en el momento en que la página debe verse entera.
 */
.acciones-fijas {
  position: fixed; z-index: 95;
  left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: color-mix(in srgb, var(--c-tinta) 92%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid rgba(247, 244, 239, .12);
  /* La franja del gesto de inicio del iPhone se come el último centímetro. */
  padding-bottom: env(safe-area-inset-bottom, 0);
  transform: translateY(105%);
  transition: transform 460ms var(--curva-salida);
}
.acciones-fijas.visible { transform: none; }
.acciones-fijas a {
  display: grid; justify-items: center; align-content: center; gap: .3rem;
  min-height: var(--toque-comodo); padding: .7rem .4rem;
  color: var(--c-hueso); text-decoration: none;
  font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase;
}
.acciones-fijas a + a { border-left: 1px solid rgba(247, 244, 239, .12); }
.acciones-fijas svg { width: 1.15rem; height: 1.15rem; }
.acciones-fijas a:active { background: rgba(247, 244, 239, .08); }
.acciones-fijas .destacada { color: var(--c-acento-claro); }

/* Sólo en teléfono. En escritorio ya está la navegación completa arriba y el
   botón de WhatsApp abajo a la derecha. */
@media (min-width: 48rem) { .acciones-fijas { display: none; } }

/* Y el botón redondo de WhatsApp sobra donde ya está la barra: dos accesos a
   lo mismo, uno encima del otro. */
@media (max-width: 47.99rem) {
  .wasap { display: none; }
  /* Que la barra no tape el final del pie. */
  body { padding-bottom: calc(var(--toque-comodo) + env(safe-area-inset-bottom, 0px)); }
}

/* ---------------------------------------------- tiempos: indicador ----- */
/*
 * El subrayado que marca en qué tiempo de la carta va uno. Se desliza de un
 * nombre al siguiente en vez de saltar: el ojo sigue el movimiento y entiende
 * que es la misma marca cambiando de sitio, no dos marcas parpadeando.
 *
 * Vive DENTRO de la lista, que es la que se desplaza a lo ancho en un
 * teléfono; colgado del contenedor de fuera se quedaría atrás al arrastrar.
 */
.menu__tiemposLista { position: relative; }
.menu__tiemposMarca {
  position: absolute; z-index: 0;
  top: var(--marca-y, 0); left: var(--marca-x, 0);
  width: var(--marca-ancho, 0); height: 2px;
  background: var(--c-acento);
  transition: left 420ms var(--curva-salida), width 420ms var(--curva-salida),
              top 420ms var(--curva-salida), opacity var(--ms-rapido);
  opacity: 0; pointer-events: none; list-style: none;
}
.menu__tiemposMarca.puesta { opacity: 1; }
/* Con el subrayado deslizante puesto, el borde de cada botón sobra: serían
   dos rayas para lo mismo, y al cambiar de tiempo se verían las dos. */
.menu__tiemposLista:has(.menu__tiemposMarca.puesta) .menu__tiempo { border-bottom-color: transparent; }

/* ---------------------------------------------- galería ---------------- */
.galeria__pieza { cursor: zoom-in; overflow: hidden; }
@media (hover: hover) {
  .galeria__pieza img { transition: transform 1200ms var(--curva-salida); }
  .galeria__pieza:hover img { transform: scale(1.06); }
}

.visor {
  border: 0; padding: 0; max-width: none; max-height: none;
  width: 100vw; height: 100dvh; background: transparent;
  display: grid; place-items: center;
}
.visor::backdrop { background: rgba(14, 13, 10, .94); }
.visor img {
  max-width: min(94vw, 78rem); max-height: 86dvh;
  width: auto; height: auto; object-fit: contain;
  border-radius: var(--radio-2);
}
.visor[open] img { animation: visorEntra 460ms var(--curva-salida); }
@keyframes visorEntra { from { opacity: 0; transform: scale(.94); } }
.visor__cerrar, .visor__paso {
  position: absolute; min-width: var(--toque-comodo); min-height: var(--toque-comodo);
  border: 0; border-radius: var(--radio-redondo); cursor: pointer;
  background: rgba(247, 244, 239, .12); color: var(--c-hueso);
  font-size: 1.4rem; line-height: 1;
  transition: background var(--ms-rapido) var(--curva);
}
.visor__cerrar:hover, .visor__paso:hover { background: rgba(247, 244, 239, .24); }
.visor__cerrar { top: max(1rem, env(safe-area-inset-top, 0px)); right: 1rem; }
.visor__paso--antes { left: 1rem; top: 50%; translate: 0 -50%; }
.visor__paso--luego { right: 1rem; top: 50%; translate: 0 -50%; }
.visor__pie {
  position: absolute; bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
  left: 50%; translate: -50% 0;
  color: color-mix(in srgb, var(--c-hueso) 80%, transparent);
  font-size: var(--t-micro); letter-spacing: .08em;
}

/* ---------------------------------------------- cierre ----------------- */
/*
 * Todo lo de arriba, apagado. Cada propiedad que anima queda en su estado
 * final, no en el inicial: quien pidió menos movimiento tiene que ver la
 * página completa, no una página vacía y quieta.
 */
@media (prefers-reduced-motion: reduce) {
  .linea > span,
  .revelar-imagen,
  .platillo,
  .acciones-fijas,
  .tiempos-barra__marca,
  .galeria__pieza img,
  .visor[open] img {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    clip-path: none !important;
  }
  .acciones-fijas.visible { transform: none !important; }
  .portada__fondo, .portada__video { transform: none !important; }
  .avance { display: none; }
}