/* ===== 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.3;
  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;
}

/* 1) Fade in (default) */
.sfx-img--fade {
  /* usa la base */
}

/* 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;
  }
}