/* mosaic.css — Ruztiko bundle page "Mosaico" header layout (secondary variant).
   Only loaded on /paquetes/<slug> when hero_layout = 'mosaic'. Reuses bundle.css
   design tokens (--bg, --ink, --line, --accent, --serif, …) so it inherits the
   palette/type. Ported from the Claude Design demo "Mosaico adaptable (E)";
   classes namespaced `rm-` so they never clash with the atelier layout. */

.rm{margin:22px 0 0}

/* ---------- Masthead seal (Mosaico stamps the seal here, not on a photo) ---------- */
.mast--mosaic{position:relative}
.mast--mosaic .kicker{padding-right:150px}
.mast-seal{position:absolute;top:16px;right:0;width:clamp(104px,11vw,130px);height:auto;
  transform:rotate(6deg);filter:drop-shadow(0 7px 16px rgba(20,14,8,.28));z-index:3;pointer-events:none}
.mast-seal svg{width:100%;height:auto;display:block}
@media(max-width:600px){
  /* reserve a right gutter for every masthead line so no title/subtitle length
     can run under the stamp (the seal lives in that gutter, top-right) */
  .mast--mosaic .kicker,.mast--mosaic h1,.mast--mosaic .sub{padding-right:86px}
  .mast-seal{width:74px;top:8px}
}
@media(max-width:380px){
  .mast--mosaic .kicker,.mast--mosaic h1,.mast--mosaic .sub{padding-right:76px}
  .mast-seal{width:64px}
}

/* ---------- Desktop: adaptive justified rows (JS sets row height + tile widths) ---------- */
.rm-rows{display:flex;flex-direction:column;gap:10px}
.rm-row{display:flex;gap:10px}
.rm-tile{position:relative;margin:0;border-radius:4px;overflow:hidden;background:var(--line);flex:0 0 auto;cursor:zoom-in}
.rm-tile img{width:100%;height:100%;object-fit:cover;display:block}
.rm-cap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:16px 13px 10px;font-size:13px;color:#fff;
  background:linear-gradient(transparent,rgba(18,14,8,.62));opacity:0;transition:opacity .15s;pointer-events:none}
.rm-tile:hover .rm-cap{opacity:1}
.rm-row.rm-lead .rm-cap{opacity:1;font-family:var(--serif,Georgia,serif);font-style:italic;font-size:15.5px}

/* ---------- Mobile A: guide photo + 2-column masonry ---------- */
.rm-mgrid{display:flex;flex-direction:column;gap:8px}
.rm-mhero{position:relative;margin:0;border-radius:4px;overflow:hidden;aspect-ratio:4/5;background:var(--line);cursor:zoom-in}
.rm-mhero img{width:100%;height:100%;object-fit:cover;display:block}
.rm-mhero .rm-cap{opacity:1;font-family:var(--serif,Georgia,serif);font-style:italic;font-size:14px}
.rm-mcols{columns:2;column-gap:8px}
.rm-mtile{margin:0 0 8px;border-radius:4px;overflow:hidden;background:var(--line);break-inside:avoid;cursor:zoom-in}
.rm-mtile img{width:100%;display:block}

/* ---------- Mobile B: Instagram-style carousel (frame height tracks the photo) ---------- */
.rm-ig{position:relative}
.rm-frame{position:relative;width:100%;background:#efeae0;border-radius:4px;overflow:hidden;
  transition:height .34s cubic-bezier(.22,1,.36,1);touch-action:pan-y;user-select:none;cursor:grab}
.rm-track{display:flex;height:100%;transition:transform .34s cubic-bezier(.22,1,.36,1)}
.rm-slide{min-width:100%;height:100%}
.rm-slide img{width:100%;height:100%;object-fit:cover;display:block}
.rm-count{position:absolute;top:10px;right:10px;background:rgba(18,14,8,.6);color:#fff;font-size:12px;
  font-weight:600;padding:3px 9px;border-radius:100px;font-variant-numeric:tabular-nums}
.rm-nav{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:none;
  background:rgba(255,255,255,.82);color:var(--ink);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}
.rm-nav[hidden]{display:none}
.rm-nav.prev{left:8px}.rm-nav.next{right:8px}
.rm-dots{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:11px}
.rm-dot{width:6px;height:6px;border-radius:50%;border:none;background:var(--line2,#d8d0c0);padding:0;cursor:pointer;transition:transform .15s,background .15s}
.rm-dot.on{background:var(--accent);transform:scale(1.35)}
.rm-ig-cap{text-align:center;font-family:var(--serif,Georgia,serif);font-style:italic;font-size:14px;color:var(--muted);margin-top:9px;min-height:1.2em}

/* Loading shim so the layout doesn't jump before image dims are measured. */
.rm-loading{min-height:300px;border-radius:4px;background:
  linear-gradient(100deg,var(--line) 30%,#efe9dc 50%,var(--line) 70%) 0/200% 100%;
  animation:rmShim 1.2s linear infinite}
@keyframes rmShim{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.rm-loading{animation:none}.rm-frame,.rm-track{transition:none}}