/* Mosaico: la escena cambia baldosa por baldosa al hacer scroll (sección sticky). */
.mosaic{position:relative;height:calc(var(--scenes,7) * 95svh);background:var(--cream);color:#F1E8DD}
.mosaic-stage{position:sticky;top:0;height:100svh;overflow:hidden;padding:calc(var(--head,0px) + 8px) 8px 8px}
.mosaic-grid{position:relative;isolation:isolate;z-index:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:3px;height:100%}
.mosaic-tile{position:relative;overflow:hidden;background:#d9cfc3;border-radius:2px}
.mosaic-layer{position:absolute;inset:0;overflow:hidden;will-change:transform;backface-visibility:hidden}
.mosaic-layer[hidden]{display:none}
.mosaic-full{position:absolute;max-width:none}
.mosaic-full img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.mosaic-piece{display:grid;place-items:center;height:100%;background:var(--tone,#ECE3D7);color:#33311E}
/* Posición absoluta: en una celda de grid el alto en % no se respeta y la pieza se cortaba. */
.mosaic-piece{position:relative}
.mosaic-piece img{position:absolute;left:8%;right:8%;top:10%;bottom:20%;width:84%;height:70%;max-width:none;object-fit:contain;filter:drop-shadow(0 18px 16px #0000002a)}
.mosaic-piece.photo img{inset:0;width:100%;height:100%;object-fit:cover;filter:none}
.mosaic-piece.photo:after{content:'';position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(0deg,#1c181166,transparent)}
.mosaic-piece small{z-index:1}
.mosaic-piece small{position:absolute;left:0;right:0;bottom:12px;text-align:center;font:500 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.mosaic-piece.photo small{color:#F1E8DD;opacity:.9}
.mosaic-piece.text{place-items:end start;padding:clamp(18px,3vw,40px);background:#33311E;color:#E5DCD1}
.mosaic-piece.text p{font:300 clamp(26px,3.2vw,52px)/1.02 var(--display);letter-spacing:-.03em}
.mosaic-piece.text .eyebrow{font-size:9px;letter-spacing:.17em;opacity:.65;margin-bottom:14px}

.mosaic-shade{position:absolute;z-index:1;inset:calc(var(--head,0px) + 8px) 8px 8px;pointer-events:none;background:linear-gradient(90deg,#1c181199,#1c181140 45%,transparent 70%),linear-gradient(0deg,#1c181166,transparent 40%);transition:opacity .6s}
.mosaic.is-right .mosaic-shade{background:linear-gradient(270deg,#1c1811a6,#1c181140 45%,transparent 70%),linear-gradient(0deg,#1c181155,transparent 40%)}
.mosaic.is-light .mosaic-shade{opacity:0}
.mosaic-caption{position:absolute;z-index:2;left:var(--gutter);bottom:clamp(60px,10vh,110px);max-width:min(1100px,88vw);pointer-events:none;opacity:0;transform:translateY(28px);transition:opacity .6s,transform .8s cubic-bezier(.2,.8,.2,1)}
.mosaic-caption.right{left:auto;right:var(--gutter);bottom:auto;top:50%;transform:translateY(calc(-50% + 28px));text-align:right}
.mosaic-caption.on{opacity:1;transform:none}.mosaic-caption.right.on{transform:translateY(-50%)}
.mosaic-caption .eyebrow{font-size:9px;letter-spacing:.17em;display:flex;align-items:center;gap:14px}
.mosaic-caption .eyebrow:before{content:'';width:28px;height:1px;background:currentColor;opacity:.7}
.mosaic-caption.right .eyebrow{justify-content:flex-end}
.mosaic-caption h2{font-size:clamp(60px,8.2vw,136px);text-transform:none;margin-top:20px;line-height:.98;letter-spacing:-.04em;font-weight:300;text-shadow:0 2px 30px #1c181133}
.mosaic-caption h2 em{color:#E9D8C6}
.mosaic-caption.compact h2{font-size:clamp(46px,5.4vw,92px)}

.mosaic-meta{position:absolute;z-index:2;right:var(--gutter);bottom:30px;display:flex;align-items:center;gap:14px;font:500 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.1em;color:#F1E8DD;mix-blend-mode:difference}
.mosaic-bar{width:90px;height:1px;background:#f1e8dd55;position:relative;overflow:hidden}.mosaic-bar i{position:absolute;inset:0;background:#F1E8DD;transform-origin:left;transform:scaleX(var(--p,0))}

@media(max-width:700px){
 .mosaic{height:calc(var(--scenes,7) * 85svh)}
 .mosaic-stage{padding:calc(var(--head,0px) + 5px) 5px 5px}.mosaic-grid{gap:2px}.mosaic-shade{inset:calc(var(--head,0px) + 5px) 5px 5px}
 .mosaic-caption,.mosaic-caption.right{left:22px;right:22px;top:auto;bottom:70px;text-align:left;transform:translateY(28px)}
 .mosaic-caption.right.on{transform:none}.mosaic-caption.right .eyebrow{justify-content:flex-start}
 .mosaic-caption h2{font-size:15vw}
 .mosaic-piece small{font-size:8px;bottom:6px}.mosaic-piece.text p{font-size:6.2vw}
}
@media(prefers-reduced-motion:reduce){.mosaic-caption{transition:opacity .3s}}