/* Base de los mockups de la galería: reset, tokens, secciones comunes y movimiento.
   Cada mockup define en :root sus colores (--fondo, --tinta, --suave, --acento, --sobre-acento,
   --campo, --papel) y su letra (--fd, --ft y los ajustes del titular). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 17px/1.55 var(--ft); overflow-x: clip; }
img { display: block; max-width: 100%; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
a { color: inherit; }
h1, h2, h3, p, dl, dd, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

.d { font-family: var(--fd); font-weight: var(--fd-w, 400); letter-spacing: var(--fd-tr, -0.02em);
     line-height: var(--fd-lh, 1); text-transform: var(--fd-caja, none); font-style: var(--fd-est, normal); }
.foto { position: relative; overflow: hidden; background: var(--campo); }
.foto img { width: 100%; height: 100%; object-fit: cover; }

/* Navegación y botón */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 15px; }
.nav ul { display: flex; gap: 28px; }
.nav a { text-decoration: none; }
.nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.marca { font-family: var(--fd); font-weight: var(--fd-w, 400); text-transform: var(--fd-caja, none);
         letter-spacing: var(--fd-tr, -0.02em); font-size: 22px; line-height: 1; text-decoration: none; }
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
         background: var(--acento); color: var(--sobre-acento); font: 500 16px/1 var(--ft); text-decoration: none;
         border-radius: var(--radio, 0); transition: transform .25s cubic-bezier(.2,.7,.1,1), filter .25s; }
.boton:hover { filter: brightness(1.08); transform: translateY(-2px); }
.boton:active { transform: translateY(0) scale(.98); }
.boton.papel { background: var(--papel); color: #111; }
.menu-palabra { display: none; }

/* Secciones comunes */
.sec { padding: 160px 32px; }
.sec h2 { font-size: clamp(40px, 5.2vw, 84px); max-width: 16ch; }
.servicios { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; }
.servicios .lista { margin-top: 56px; display: grid; gap: 0; }
.servicios .item { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; padding: 22px 0; }
.servicios .item + .item { background: none; }
.servicios .item:nth-child(odd) { background: color-mix(in srgb, var(--campo) 55%, transparent); margin: 0 -20px; padding: 22px 20px; }
.servicios .nombre { font-size: 21px; font-weight: 500; }
.servicios .precio { font-size: 21px; font-variant-numeric: tabular-nums; text-align: right; }
.servicios .dura { color: var(--suave); font-size: 15px; grid-column: 1 / -1; }
.servicios .lado { position: sticky; top: 32px; height: min(78svh, 760px); }
.servicios .lado figcaption { margin-top: 12px; color: var(--suave); font-size: 15px; }

.lugar { padding-left: 0; padding-right: 0; background: var(--campo); }
.lugar .cabeza { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 0 32px; align-items: end; }
.lugar .cabeza p { font-size: 21px; max-width: 34ch; justify-self: end; }
.cinta { margin-top: 64px; overflow: hidden; }
.cinta-pista { display: flex; gap: 16px; width: max-content; padding: 0 32px; }
.cinta-pista .foto { flex: none; height: 460px; }
.cinta-pista .foto:nth-child(3n+1) { width: 360px; }
.cinta-pista .foto:nth-child(3n+2) { width: 620px; }
.cinta-pista .foto:nth-child(3n) { width: 440px; height: 380px; align-self: end; }

.visita { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; background: var(--acento); color: var(--sobre-acento); }
.visita .texto { padding: 140px 32px; display: grid; grid-template-columns: minmax(0, 1fr); align-content: space-between; gap: 64px; }
.visita h2 { font-size: clamp(48px, 6vw, 96px); }
.visita .horas { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.25; max-width: 22ch; }
.visita .datos { font-size: 18px; display: grid; gap: 6px; }
.visita .boton { background: var(--sobre-acento); color: var(--acento); justify-self: start; }
.visita .foto { min-height: 640px; }

.pie { padding: 96px 32px 32px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.pie .nombre-final { font-size: 10vw; line-height: .82; white-space: nowrap; }
.pie .linea-pie { display: flex; justify-content: space-between; gap: 24px; color: var(--suave); font-size: 15px; flex-wrap: wrap; }

/* Ajuste del nombre al ancho (lo hace mov.js); sin script queda en el tamaño del CSS */
[data-ajustar] { white-space: nowrap; display: inline-block; }
/* La caja de un titular ajustado no crece con el texto: si no, el ajuste se mide contra sí mismo */
h1, .titular, .nombre { min-width: 0; }

/* Movimiento. Sin script o con movimiento reducido, todo se ve quieto y completo. */
.js:not([data-mov="quieto"]) .ent { opacity: 0; transform: translateY(26px); }
.js:not([data-mov="quieto"]) .visto .ent, .js:not([data-mov="quieto"]) .ent.visto {
  opacity: 1; transform: none; transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.7,.1,1);
  transition-delay: var(--d, 0ms); }
/* La franja recorta sólo mientras la línea sube: cuando llega se abre (mov.js le pone .abierta), así no
   corta colas (j, g, p), acentos ni la última letra inclinada (pedido 10). El relleno, que el margen
   negativo devuelve, deja lugar a esas puntas mientras sube, para que no aparezcan de golpe al final */
.linea { display: block; padding: .25em .1em .3em; margin: -.25em -.1em -.3em; }
.js:not([data-mov="quieto"]) .linea:not(.abierta) { overflow: hidden; }
.linea > span { display: block; }
.js:not([data-mov="quieto"]) .linea > span { transform: translateY(calc(100% + .6em)); }
.js:not([data-mov="quieto"]) .visto .linea > span { transform: none; transition: transform 1.2s cubic-bezier(.2,.75,.1,1); transition-delay: var(--d, 0ms); }
/* Letra por letra (pedido 12, mov.js): en las páginas sin fotos el renglón del título no sube entero,
   suben sus letras una tras otra; en las láminas, cada renglón de lo grande va en su franja. Las letras
   son <span> en línea movidos con top, porque así conservan el kerning; las cifras ruedan en su columna */
.js .linea.por-letra > span { transform: none !important; }
.le { position: relative; top: 0; }
.letras:not(.llegan) .le { top: 1.35em; }
.llegan .le { transition: top 1s cubic-bezier(.16,1,.3,1) calc(var(--d, 0ms) + var(--k) * 34ms); }
.franja { display: block; padding: .25em .1em .3em; margin: -.25em -.1em -.3em; overflow: hidden; }
/* Entre dos franjas los márgenes negativos se funden en uno (el más negativo, -.3em) en vez de sumarse, y los renglones
   quedaban .25em más separados que en el texto: al volver el texto, la lámina saltaba (29 px en m14). Con -.55em el
   margen fundido es la suma */
.franja + .franja { margin-top: -.55em; }
.col { position: relative; display: inline-block; vertical-align: top; overflow: hidden; }
.col-mide { visibility: hidden; }
.tira { position: absolute; inset: 0 0 auto; display: flex; flex-direction: column; align-items: center; }
.tira > span { display: block; }
.llegan .tira { transform: translateY(calc(var(--n) * -5%)); transition: transform 1.5s cubic-bezier(.16,1,.3,1) calc(var(--d, 0ms) + var(--k) * 70ms); }

[data-mov="sutil"] .kb img, [data-mov="vivo"] .kb img { animation: kb 18s ease-in-out infinite alternate; }

/* Láminas: lo que va en el lugar de una foto cuando el negocio no tiene fotos (pedido 11, piezas/laminas.mjs).
   Llenan el marco como lo haría la foto. Lo grande se ajusta al marco con data-ajustar (mov.js), entero:
   nada se corta */
.lamina { position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  width: 100%; height: 100%; padding: 7%; overflow: hidden; container-type: size;
  background: var(--l-fondo); color: var(--l-tinta); }
.lamina::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
.lamina > * { position: relative; z-index: 1; }
.l-chico { font: 600 max(11px, 4.4cqw)/1.25 var(--ft); max-width: 86%; }
.l-grande { display: inline-block; white-space: nowrap; line-height: .95; }
/* La letra de la dirección inicial se llama l-letra: con l-inicial, como la dirección, su regla le sacaba el flex a
   la lámina entera y la inicial no se centraba (pedido 12) */
.l-letra { display: inline-block; margin: auto; line-height: .8; }
.l-forma { position: absolute; z-index: 0; background: var(--l-forma); }
.l-forma.arco { right: 9%; bottom: 0; width: 54cqw; height: 72cqh; border-radius: 27cqw 27cqw 0 0; }
.l-forma.circulo { left: 14%; top: 16%; width: 60cqmin; height: 60cqmin; border-radius: 50%; }
.l-forma.luna { left: 10%; top: 0; width: 80cqw; height: 40cqw; border-radius: 0 0 40cqw 40cqw; }
.l-nombre { margin-top: auto; font-size: min(10cqw, 9cqh); line-height: 1.02; }
/* En la inicial, el servicio va grande abajo y su precio arriba (pedido 12) */
.l-nombre[data-ajustar] { display: inline-block; white-space: nowrap; }
/* La raya de la ficha: una barra corta y gruesa, como la de una etiqueta, en vez de una línea fina */
.l-regla { width: 22cqw; height: max(3px, 1.3cqw); margin: 5cqh 0 4cqh; background: currentColor; transform-origin: 0 50%; }
/* Los armados con el título encima de la foto principal (película, cielo, dos tarjetas, ventana):
   ahí la lámina principal es sólo la forma, para no pelearle al título */
:is(.h-tp, .h-tc, .h-dt, .h-vs) .lamina.principal { background: var(--l-fondo-b); }
:is(.h-tp, .h-tc, .h-dt, .h-vs) .lamina.principal > :not(.l-forma) { display: none; }
:is(.h-tp, .h-tc, .h-dt, .h-vs) .lamina.principal > .l-forma { background: var(--l-forma-b); }
/* En la película las láminas se funden una en otra detrás del título: todas van como la principal, y
   cambia la forma, que entra otra vez cada vez que aparece (pedido 12) */
.h-tp .fondo .lamina { background: var(--l-fondo-b); }
.h-tp .fondo .lamina > :not(.l-forma) { display: none; }
.h-tp .fondo .lamina > .l-forma { display: block; background: var(--l-forma-b); }
/* Palabras y ficha: la forma sólo en la principal */
.l-palabras:not(.principal) > .l-forma, .l-ficha:not(.principal) > .l-forma { display: none; }
/* Los retratos que pasan llevan el título en el acento encima de todas: van claras, sólo con su forma */
.h-rp .lamina { background: var(--campo); }
.h-rp .lamina > :not(.l-forma) { display: none; }
.h-rp .lamina > .l-forma { display: block; background: color-mix(in srgb, var(--acento) 22%, var(--campo)); }
/* Donde el armado tapa una parte de la foto, lo de la lámina se corre: la barra de la carta, el borde de
   la pantalla en el afiche del celular y el nombre que cruza */
.h-cf .fija .lamina { padding-bottom: calc(7% + 64px); }
/* En el grito, de la lámina principal se ve sólo la franja de arriba, debajo del título: va la forma (y la
   inicial, que entra arriba), sin palabras */
.h-gf .lamina.principal:not(.l-inicial) > :not(.l-forma) { display: none; }
/* El titular se apoya sobre la foto que sube, y sobre una foto se lee; sobre una tarjeta de su mismo tono (blanco
   sobre lima en m05) la punta de las letras desaparecía y parecían cortadas. Con lámina, la tarjeta arranca debajo
   de la tinta (pedido 12) */
.h-gf .sube:has(> .lamina) { margin-top: 0; }
@media (max-width: 760px) { .h-gf .sube:has(> .lamina) { margin-top: 2vw; } }
.h-fn .lamina { justify-content: flex-start; gap: 4%; }
/* En el afiche el título pisa la punta del arco y la franja tapa el pie: lo de la lámina va al centro. El
   fondo de la página ya es el acento, así que la principal va en el oscuro, para que el arco se recorte */
.h-af .lamina { justify-content: center; gap: 3%; }
.h-af .lamina.principal { background: var(--l-fondo-o); color: var(--l-tinta-o); }
.h-af .lamina.principal > .l-forma { background: var(--l-forma-b); }
.h-af .lamina .l-nombre { margin-top: 0; }
.h-fn .lamina .l-nombre { margin-top: 0; }
@media (max-width: 760px) { .h-cf .fija .lamina { padding-bottom: calc(7% + 80px); } .h-af .arco .lamina { padding-right: calc(7% + 12vw); } }
@container (max-width: 200px) { .l-chico, .l-nombre, .l-regla { display: none; } }
@container (max-height: 240px) { .l-nombre, .l-regla { display: none; } }
[data-mov="vivo"] .lamina > .l-forma { animation: deriva 22s ease-in-out infinite alternate-reverse; }
/* La forma entra cuando entra la lámina (mov.js le pone .espera y después .vista): el arco crece desde su
   base, el círculo sube y la media luna se mece hasta quedar colgada; la barra de la ficha se estira */
.l-forma.arco { transform-origin: 50% 100%; }
.l-forma.luna { transform-origin: 50% 0; }
.js:not([data-mov="quieto"]) .lamina.espera > :is(.l-forma, .l-regla) { transition: scale 1.4s cubic-bezier(.16,1,.3,1), translate 1.4s cubic-bezier(.16,1,.3,1), rotate 1.6s cubic-bezier(.16,1,.3,1); }
.js:not([data-mov="quieto"]) .lamina.espera:not(.vista) > .l-forma.arco { scale: 1 .2; }
.js:not([data-mov="quieto"]) .lamina.espera:not(.vista) > .l-forma.circulo { translate: 0 40%; scale: .55; }
.js:not([data-mov="quieto"]) .lamina.espera:not(.vista) > .l-forma.luna { rotate: -38deg; }
.js:not([data-mov="quieto"]) .lamina.espera:not(.vista) > .l-regla { scale: 0 1; }
/* Lo grande de la lámina se corre un poco contra su forma mientras se baja la página, atado al scroll */
@supports (animation-timeline: view()) {
  [data-mov="sutil"] .lamina > .d, [data-mov="vivo"] .lamina > .d { animation: flota linear both; animation-timeline: view(); }
}
@keyframes flota { from { translate: 0 5%; } to { translate: 0 -5%; } }
@keyframes deriva { to { transform: translate(-2%, -3%); } }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.09) translate(-1%, -1%); } }

.fundido { position: relative; }
.fundido img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease; }
.fundido img.activa { opacity: 1; }
.fundido img:first-child { position: relative; }
.fundido .lamina { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease; }
.fundido .lamina.activa { opacity: 1; }
.fundido .lamina:first-child { position: relative; }
/* WC-32: sin JavaScript o con movimiento reducido (mov.js no llega a ponerle .activa a nadie) la primera foto se ve;
   antes la parte de arriba quedaba negra en la película y en la carta con foto fija */
.fundido > :first-child { opacity: 1; }
.js:not([data-mov="quieto"]) .fundido > :first-child:not(.activa) { opacity: 0; }

[data-mov="vivo"] .cinta-pista { animation: cinta 60s linear infinite; }
.cinta:hover .cinta-pista { animation-play-state: paused; }
@keyframes cinta { to { transform: translateX(-50%); } }

.foto.zoom img { transition: transform 1.2s cubic-bezier(.2,.7,.1,1); }
.foto.zoom:hover img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ent, .linea > span { opacity: 1 !important; transform: none !important; }
  .le { top: 0 !important; }
  .lamina > * { scale: none !important; translate: none !important; rotate: none !important; }
}

@media (max-width: 760px) {
  .sec { padding: 104px 16px; }
  .nav ul { display: none; }
  .menu-palabra { display: inline; }
  /* minmax(0, …): una palabra larga del título no ensancha la columna (pedido 10) */
  .servicios { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .servicios .lado { position: relative; top: 0; height: 120vw; }
  .servicios .item:nth-child(odd) { margin: 0 -12px; padding: 20px 12px; }
  .servicios .nombre, .servicios .precio { font-size: 18px; }
  .lugar .cabeza { grid-template-columns: minmax(0, 1fr); padding: 0 16px; }
  .lugar .cabeza p { justify-self: start; font-size: 18px; }
  .cinta-pista { padding: 0 16px; gap: 10px; }
  .cinta-pista .foto { height: 300px; }
  .cinta-pista .foto:nth-child(3n+1) { width: 240px; }
  .cinta-pista .foto:nth-child(3n+2) { width: 320px; }
  .cinta-pista .foto:nth-child(3n) { width: 260px; height: 250px; }
  .visita { grid-template-columns: minmax(0, 1fr); }
  .visita .texto { padding: 96px 16px; }
  .visita .foto { min-height: 420px; }
  .pie { padding: 72px 16px 24px; }
}