/* ===== Runtime shared (preview + published) ===== */

/* Reset mínimo */
html, body { margin: 0; padding: 0; }

/* Scope del HTML generado */
.gen-scope{
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-synthesis-weight: none;
}

/* Published (y shared): crea stacking context SIN romper fixed */
.gen-scope{
  position: relative;
  isolation: isolate;
}

/* Asegura que el hero contenga sus negativos */
.gen-scope section#hero,
.gen-scope section[data-asset-role="hero"]{
  isolation: isolate;
}


.gen-scope :where(h1,h2,h3,h4,h5,h6){
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
}

/* ===== Hero stacking: bg visible + overlays arriba + contenido arriba ===== */
.gen-scope section#hero,
.gen-scope section[data-hero-variant],
.gen-scope section[data-asset-role="hero"]{
  isolation: isolate;
}

/* BG (normalmente el wrapper con -z-20) */
.gen-scope section#hero > .absolute.\-z-20,
.gen-scope section[data-hero-variant] > .absolute.\-z-20,
.gen-scope section[data-asset-role="hero"] > .absolute.\-z-20{
  z-index: 0 !important;
}

/* Overlays / glows (muchas veces -z-10) */
.gen-scope section#hero > .absolute.\-z-10,
.gen-scope section[data-hero-variant] > .absolute.\-z-10,
.gen-scope section[data-asset-role="hero"] > .absolute.\-z-10{
  z-index: 10 !important;
}

/* Contenido (todo lo que NO sea absolute dentro del hero) */
.gen-scope section#hero > :not(.absolute),
.gen-scope section[data-hero-variant] > :not(.absolute),
.gen-scope section[data-asset-role="hero"] > :not(.absolute){
  position: relative;
  z-index: 20 !important;
}

/* =========================
   Scroll FX (shared)
   ========================= */
:root{ --sfx-ease: cubic-bezier(.2,.9,.2,1); }

/* SOLO imágenes */
.sfx-img{
  --sfx-delay: 0ms;
  --sfx-dur: 650ms;
  --sfx-y: 12px;
  --sfx-scale: 1;
  --sfx-blur: 8px;

  /* Importante: NO tocamos opacity */
  transform: translate3d(0, var(--sfx-y), 0) scale(var(--sfx-scale));
  filter: blur(var(--sfx-blur));

  transition-property: transform, filter;
  transition-duration: var(--sfx-dur);
  transition-timing-function: var(--sfx-ease);
  transition-delay: var(--sfx-delay);

  will-change: transform, filter;
}

.sfx-img.sfx-in{
  --sfx-y: 0px;
  --sfx-scale: 1;
  --sfx-blur: 0px;
}

.sfx-img--fade{ --sfx-y: 10px; --sfx-blur: 7px; }
.sfx-img--lift{ --sfx-y: 16px; --sfx-scale: .99; --sfx-blur: 9px; }

@media (prefers-reduced-motion: reduce){
  .sfx-img{
    transform: none !important;
    filter: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}


/* Scroll FX base */
.sfx-img {
  opacity: 0.8;
  transform: translate3d(0, 10px, 0);
  filter: none;
  will-change: opacity, transform, filter;
  transition-property: opacity, transform, filter;
  transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.2, 0.9, 0.2, 1);
  transition-delay: var(--sfx-delay, 0ms);
}

.sfx-img.sfx-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: none;
}



/* 2) Blur in */
.sfx-img--blur {
  filter: blur(14px);
}

.sfx-img--blur.sfx-in {
  filter: blur(0);
}

/* 3) Scale up */
.sfx-img--scale {
  transform: translate3d(0, 10px, 0) scale(0.92);
}

.sfx-img--scale.sfx-in {
  transform: translate3d(0, 0, 0) scale(1);
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .sfx-img {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* Mosaic base grid: requerido por el packer JS */
#galeria-lugar .mosaicGrid{
  display: grid;
  grid-template-columns: repeat(var(--cols, 12), minmax(0, var(--cell, 72px)));
  grid-auto-rows: var(--cell, 72px);
  gap: var(--gap, 10px);
  align-items: stretch;
  grid-auto-flow: dense;
}
#galeria-lugar .mTile{ overflow: hidden; }
#galeria-lugar .mTile img{ width: 100%; height: 100%; display: block; object-fit: cover; }

/* Commerce runtime shared UI */
.gen-scope .cb-cart-drawer{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 360px;
  max-width: 90vw;
  background: var(--bg, hsl(36 20% 96%));
  z-index: 9999;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
  box-shadow: -4px 0 32px rgba(0, 0, 0, .12);
  display: flex;
  flex-direction: column;
}

.gen-scope .cb-cart-drawer.cb-open{
  transform: translateX(0);
}

.gen-scope .cb-cart-overlay{
  position: fixed;
  inset: 0;
  background: rgba(24, 18, 10, .45);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}

.gen-scope .cb-cart-overlay.cb-open{
  opacity: 1;
  pointer-events: auto;
}

.gen-scope .cb-hidden{
  display: none;
}

.gen-scope .cb-taller{
  position: relative;
  overflow: hidden;
}

.gen-scope .cb-taller .cb-ti{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
  opacity: 0;
  transition: opacity .35s cubic-bezier(.4, 0, .2, 1);
}

.gen-scope .cb-taller:hover .cb-ti{
  opacity: 1;
}

/* Catalog cart hotspot: keep the image clickable and make the cart CTA a real button-sized target */
.gen-scope .cb-prod-card{
  position: relative;
}

.gen-scope .cb-prod-card .cb-ci{
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(92, 60, 38, .38);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, background-color .2s ease;
}

.gen-scope .cb-prod-card:hover .cb-ci,
.gen-scope .cb-prod-card:focus-within .cb-ci{
  opacity: 1;
}

.gen-scope .cb-prod-card .cb-ci svg{
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  padding: 14px;
  box-sizing: content-box;
  pointer-events: auto;
  cursor: pointer;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .28));
  transition: transform .2s ease, opacity .2s ease;
}

.gen-scope .cb-prod-card .cb-ci svg:hover{
  transform: scale(1.15);
}

@media (hover: none), (pointer: coarse){
  .gen-scope .cb-prod-card .cb-ci{
    opacity: 1;
  }
}