/* La página estática: todo a la vista en una pantalla; cada parte se abre desde su baldosa. */

body { overflow-x: hidden; }
.entrada { min-height: 100svh; display: grid; grid-template-rows: auto 1fr; gap: 18px; padding: 22px var(--pad) 24px; }
.entrada__cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
/* el nombre tiene interlineado muy cerrado: el aire de abajo es para que la «j» de Ovejero no toque lo que sigue */
.entrada__nombre { font-size: clamp(60px, 7.4vw, 124px); padding-bottom: .14em; }
.entrada__nombre em { color: var(--ocre); }
.entrada__nombre span { display: inline-block; }
.entrada__frase { max-width: 32ch; margin: 0 0 8px; color: var(--crema-2); font-size: 17px; line-height: 1.4; }
.entrada__frase .mano { display: block; font-size: 26px; color: var(--ocre); }
.nota--entrada { margin: 0 0 6px; max-width: 34ch; font-size: 19px; align-self: center; }

/* ---------- el mosaico ---------- */
.mosaico { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr; grid-template-rows: repeat(var(--filas, 3), minmax(150px, 1fr)); gap: 12px; min-height: 0; }
.baldosa { grid-column: span var(--w, 1); grid-row: span var(--h, 1); }
.baldosa { position: relative; overflow: hidden; border-radius: 6px; padding: 18px 20px; display: flex; align-items: flex-end; isolation: isolate;
  transition: transform .35s var(--suave), box-shadow .35s; opacity: 0; transform: translateY(18px); animation: llegar .55s var(--suave) forwards; }
.baldosa:nth-child(2) { animation-delay: .05s; } .baldosa:nth-child(3) { animation-delay: .1s; } .baldosa:nth-child(4) { animation-delay: .15s; }
.baldosa:nth-child(5) { animation-delay: .2s; } .baldosa:nth-child(6) { animation-delay: .25s; } .baldosa:nth-child(n+7) { animation-delay: .3s; }
.baldosa:hover { transform: translateY(-4px); }
.baldosa__texto { position: relative; z-index: 2; display: grid; gap: 2px; }
.baldosa__texto b { font-family: var(--titulo); font-weight: 400; font-size: clamp(26px, 2.3vw, 40px); line-height: 1; letter-spacing: -.02em; font-variation-settings: "SOFT" 100; }
.baldosa__texto span { font-size: 14.5px; opacity: .8; }
.baldosa__num { position: absolute; z-index: 2; top: 10px; left: 18px; font-size: 34px; line-height: 1; opacity: .85; }
.baldosa__entrar { position: absolute; z-index: 2; right: 20px; bottom: 20px; font-weight: 600; font-size: 15px; transition: transform .25s var(--suave); }
.baldosa:hover .baldosa__entrar { transform: translateX(4px); }
.baldosa__pieza { position: absolute; z-index: 1; transition: transform .5s var(--suave); }
.baldosa:hover .baldosa__pieza { transform: scale(1.05) rotate(-1.5deg); }

.baldosa--ultima { background: radial-gradient(ellipse 70% 60% at 62% 40%, rgba(176, 74, 40, .5), transparent 70%), var(--noche-3); box-shadow: inset 0 0 0 1px var(--linea); }
/* la obra va arriba y entera (alto fijo, sin tapar el texto); abajo, una sombra para que el título se lea sobre cualquier foto */
.baldosa--ultima .baldosa__pieza { width: auto; height: 66%; max-width: 70%; object-fit: contain; right: 7%; top: 7%; filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .55)); }
.baldosa--ultima::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 52%; z-index: 1; pointer-events: none; background: linear-gradient(rgba(42, 32, 24, 0), rgba(30, 22, 16, .82) 55%, rgba(26, 19, 14, .94)); }
.baldosa--ultima .baldosa__texto b { font-size: clamp(36px, 3.6vw, 62px); }
.baldosa--ultima .baldosa__texto span { opacity: .92; }
.baldosa__topo { position: absolute; z-index: 0; right: -8%; top: -12%; width: 90%; }
.baldosa__topo path { fill: none; stroke: var(--ocre); stroke-width: 1.4; opacity: .4; }
.baldosa--todas { background: var(--arcilla); }
.baldosa--todas::before, .baldosa--murales::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--ocre); opacity: .14; -webkit-mask: url(../img/curvas.svg) center / cover; mask: url(../img/curvas.svg) center / cover; }
.baldosa--todas .baldosa__pieza { height: 92%; right: 30%; bottom: -4%; }
.baldosa--todas .baldosa__pieza--2 { height: 84%; right: 3%; bottom: 4%; }
.baldosa--disponibles { background: var(--noche-2); box-shadow: inset 0 0 0 1.5px rgba(224, 164, 104, .45); }
.baldosa--disponibles .baldosa__pieza { width: 76%; left: 12%; top: 16%; }
.baldosa--murales { background: var(--ocre-2); color: var(--noche); }
.baldosa__brocha { position: absolute; left: 12%; right: -10%; top: 30%; height: 26%; z-index: 1; background: var(--rojo); border-radius: 40% 60% 55% 45% / 60% 40% 60% 40%; transform: rotate(-8deg); opacity: .9; }
.baldosa--taller { background: var(--noche-3); box-shadow: inset 0 0 0 1px var(--linea); }
.baldosa--sobre { background: #efe2c8; color: var(--noche); }
.baldosa__polaroid { position: absolute; z-index: 1; right: 14px; top: 12px; width: 38%; padding: 6px 6px 16px; background: #f6ecd9; transform: rotate(5deg); box-shadow: 0 14px 22px -10px rgba(0, 0, 0, .7); transition: transform .4s var(--suave); }
.baldosa__polaroid img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.baldosa__polaroid--der { transform: rotate(-4deg); }
.baldosa:hover .baldosa__polaroid { transform: rotate(0) scale(1.05); }
.baldosa--escribime { background: #b33c27; color: #fff; }
.baldosa--escribime .baldosa__texto span { opacity: 1; }
.baldosa__sello { position: absolute; right: 18px; top: 50%; width: 120px; height: 120px; margin-top: -60px; z-index: 1; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 244, 234, .5); }
.baldosa__sello svg { width: 100%; height: 100%; animation: girar 22s linear infinite; }
.baldosa__sello text { font-family: var(--texto); font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; fill: currentColor; }

@media (min-width: 901px) and (min-height: 640px) { .entrada { height: 100svh; } }
@media (max-width: 900px) {
  .entrada__cabeza { flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 6px; }
  .mosaico { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .baldosa { grid-column: span var(--wc, 1); grid-row: span var(--hc, 1); }
  .mosaico { grid-auto-rows: 196px; }
  .baldosa { padding: 14px 16px; }
  .baldosa__texto b { font-size: 25px; }
  .baldosa__texto span { font-size: 13.5px; }
  .baldosa__entrar { display: none; }
  /* en el celu, las fotos van arriba y el texto abajo, sin pisarse */
  .baldosa--ultima .baldosa__pieza { height: 64%; max-width: 78%; right: 50%; transform: translateX(50%); top: 8%; }
  .baldosa--ultima:hover .baldosa__pieza { transform: translateX(50%) scale(1.04); }
  .baldosa--todas .baldosa__pieza { height: 62%; right: 36%; top: 6%; bottom: auto; }
  .baldosa--todas .baldosa__pieza--2 { height: 58%; right: 6%; top: 8%; bottom: auto; }
  .baldosa--disponibles .baldosa__pieza { width: 70%; left: 22%; top: 9%; }
  .baldosa__brocha { top: 22%; }
  .baldosa__polaroid { width: 40%; top: 10px; right: 10px; }
  .baldosa--taller .baldosa__texto, .baldosa--sobre .baldosa__texto { max-width: 100%; }
  .baldosa__sello { width: 92px; height: 92px; margin-top: -46px; right: 12px; }
  .nota--entrada { align-self: flex-start; }
  .entrada { padding-bottom: 80px; }
}

/* ---------- la sala: la parte, ya armada, crece desde su baldosa (el recorte lo anima web.js) ---------- */
.sala { position: fixed; inset: 0; z-index: 40; overflow-y: auto; overscroll-behavior: contain; background: var(--noche); will-change: clip-path; }
/* lo de adentro llega un instante después del fondo, subiendo apenas; al cerrar o pasar de parte, se va rápido */
.sala__barra, .sala__contenido, .sala__pie { opacity: 0; transform: translateY(16px); transition: opacity .2s, transform .2s; }
.sala.lista .sala__barra, .sala.lista .sala__contenido, .sala.lista .sala__pie { opacity: 1; transform: none; transition: opacity .32s .04s, transform .62s var(--suave); }
.sala.lista.pasando .sala__contenido, .sala.lista.pasando .sala__pie { opacity: 0; transform: translateY(10px); transition: opacity .18s, transform .18s; }
@media (prefers-reduced-motion: reduce) { .sala__barra, .sala__contenido, .sala__pie { transform: none !important; } }
.sala::before { content: ""; position: fixed; inset: 0; z-index: -1; background: url(../img/fondo-estrato.webp) center / cover; opacity: .25; pointer-events: none; }
/* la barra es opaca: lo que pasa por debajo al bajar no se lee a través */
.sala__barra { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px var(--pad); background: var(--noche); box-shadow: 0 1px 0 var(--linea), 0 10px 20px -14px rgba(0, 0, 0, .8); }
.sala__volver { font-weight: 600; font-size: 15px; }
.sala__donde { font-size: 26px; color: var(--ocre); opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .3s var(--suave); }
.sala.bajo .sala__donde { opacity: 1; transform: none; }
/* la copia de la baldosa que se desvanece mientras la parte crece */
.baldosa--copia { position: fixed; z-index: 42; margin: 0; pointer-events: none; animation: none; opacity: 1; transform: none; transition: opacity .3s .06s; }
.baldosa--copia.se-va { opacity: 0; }
.sala__ir { position: relative; }
.sala__ir summary { list-style: none; cursor: pointer; font-weight: 600; font-size: 15px; padding: 6px 0; }
.sala__ir summary::-webkit-details-marker { display: none; }
.sala__ir summary::after { content: " ↓"; }
.sala__ir div { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; display: grid; padding: 8px; border-radius: 6px; background: var(--noche-2); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .8), inset 0 0 0 1px var(--linea); }
.sala__ir button { text-align: left; padding: 10px 12px; border-radius: 4px; font-family: var(--titulo); font-size: 20px; font-variation-settings: "SOFT" 100; }
.sala__ir button:hover { background: var(--noche-3); color: var(--ocre); }
.sala__contenido { position: relative; padding: clamp(40px, 6vw, 80px) var(--pad) 40px; }
.sala--ultima, .sala--taller { background-color: var(--noche-3); }
.sala--todas, .sala--escribime { background-color: var(--arcilla-2); }
.sala--disponibles, .sala--sobre { background-color: var(--noche-2); }
.sala--murales { background-color: var(--arcilla); }
.sala--murales .t2 em, .sala--murales .antetitulo { color: #ffd2a6; }
.sala--escribime { background: var(--arcilla-2); }
/* al pie: «lo que sigue», como una tarjeta con su flecha en un círculo (en la última parte, volver al inicio) */
.sala__pie { padding: 20px var(--pad) calc(40px + env(safe-area-inset-bottom)); }
.sala__seguir { position: relative; display: grid; grid-template-columns: 1fr auto; column-gap: 18px; align-items: center; width: 100%; max-width: 760px; text-align: left;
  padding: 18px 20px 20px; border-radius: 6px; background: rgba(20, 15, 11, .35); box-shadow: inset 0 0 0 1px var(--linea); transition: box-shadow .25s, background .25s; }
.sala__seguir .mano { grid-column: 1; font-size: 22px; line-height: 1; color: var(--ocre); }
.sala__seguir b { grid-column: 1; margin-top: 4px; font-family: var(--titulo); font-weight: 400; font-size: clamp(30px, 4vw, 48px); line-height: 1.02; letter-spacing: -.015em; font-variation-settings: "SOFT" 100; }
.sala__seguir small { grid-column: 1; margin-top: 4px; font-size: 14.5px; color: var(--crema-3); }
.sala__seguir i { grid-column: 2; grid-row: 1 / span 3; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font-style: normal; font-size: 22px; box-shadow: inset 0 0 0 1.5px rgba(241, 230, 212, .35); transition: transform .3s var(--suave), box-shadow .25s, color .25s; }
.sala__seguir:hover { background: rgba(20, 15, 11, .5); box-shadow: inset 0 0 0 1px rgba(224, 164, 104, .45); }
.sala__seguir:hover i { transform: translateX(4px); box-shadow: inset 0 0 0 1.5px var(--ocre); color: var(--ocre); }

/* ---------- las partes nuevas que agrega Mer: un color de su paleta y la primera foto como polaroid ---------- */
.baldosa--noche { background: var(--noche-3); box-shadow: inset 0 0 0 1px var(--linea); }
.baldosa--arcilla { background: var(--arcilla); }
.baldosa--ocre { background: var(--ocre-2); color: var(--noche); }
.baldosa--crema { background: #efe2c8; color: var(--noche); }
.sala--noche { background-color: var(--noche-3); }
.sala--arcilla { background-color: var(--arcilla); }
.sala--ocre { background-color: var(--arcilla-2); }
.sala--crema { background-color: var(--noche-2); }
/* una obra que no es recorte, en la baldosa: como copia en papel */
.baldosa__pieza--entera { padding: 6px; background: #efe6d6; border-radius: 3px; box-shadow: 0 14px 22px -10px rgba(0, 0, 0, .7); max-height: 78%; width: auto !important; }

/* las fotos de murales: grandes, como en una pared */
.mural--foto { padding: 0; border: 0; overflow: hidden; position: relative; aspect-ratio: 4 / 3; }
.mural--foto img { width: 100%; height: 100%; object-fit: cover; }
.mural--foto figcaption { position: absolute; left: 12px; bottom: 8px; font-size: 24px; color: var(--crema); text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
.mural--ancho.mural--foto { aspect-ratio: 16 / 7; }
.pared { margin-bottom: 10px; }

/* escribime: avisame de la próxima muestra (por WhatsApp) */
.avisame p { margin: 0 0 16px; font-size: 18px; }

/* vista previa desde el panel */
.aviso-previa { display: none; }
.vista-previa .aviso-previa { display: block; position: fixed; left: 50%; top: 10px; z-index: 90; transform: translateX(-50%); margin: 0; padding: 8px 14px; border-radius: 4px; background: #f3e2b3; color: #3a2a17; font-family: var(--mano); font-size: 21px; line-height: 1; white-space: nowrap; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .7); }
/* el sello que gira, legible */
.baldosa__sello text { font-size: 17px; letter-spacing: .06em; }
@media (max-width: 900px) { .baldosa__sello { width: 108px; height: 108px; margin-top: -54px; } .entrada { padding-bottom: 36px; } }
/* murales: el dibujo de la brocha, del mismo trazo que los pasos, en vez de la mancha */
.baldosa__dibujo { position: absolute; z-index: 1; right: 16px; top: 14px; width: 42%; max-width: 120px; color: var(--noche); opacity: .85; }
.baldosa__dibujo svg { width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* la barra nunca parte sus botones en dos líneas; en el celu el nombre de la parte no entra al lado, y ya está en el título */
.sala__volver, .sala__ir summary { white-space: nowrap; }
@media (max-width: 600px) { .sala__donde { display: none; } }
/* el cruce entre la baldosa y la parte: la copia se va rápido y lo de adentro llega un toque después, sin que se mezclen las letras */
.baldosa--copia { transition: opacity .18s; }
.sala.lista .sala__contenido, .sala.lista .sala__pie { transition: opacity .3s .16s, transform .62s .06s var(--suave); }