/* ================================================================
   STOLZ V8 — progressive cinematic motion + safe visibility
   Base content is ALWAYS visible. Animations run only when JS calls
   Web Animations API; therefore a failed observer cannot blank sections.
   ================================================================ */

/* Critical fix: never leave content transparent/off-canvas waiting for JS. */
.st-reveal,
.st-reveal:not(.is-visible),
.st-room-card:not(.is-visible),
.st-room-card:not(.is-visible) .st-room-copy,
.st-room-card.is-reverse:not(.is-visible) .st-room-copy,
.st-timeline-item.st-reveal,
.st-timeline-item.st-reveal:not(.is-visible),
.st-intro-image.st-reveal,
.st-exp-card.st-reveal,
.st-guarda-collage figure.st-reveal{
  opacity:1!important;
  transform:none!important;
}
.st-intro-image,.st-history-photo,.st-gallery-item,.st-guarda-collage figure{
  clip-path:none!important;
  opacity:1!important;
}

/* Keep the original room covers; this only improves photographic presence. */
.st-room-image img,.st-detail-photo img,.st-detail-gallery-grid img,
.st-intro-image img,.st-exp-photo img,.st-history figure img,.st-guarda-collage img,.st-gallery-item img{
  filter:saturate(1.035) contrast(1.025);
}
.st-history figure img{filter:saturate(1.05) contrast(1.03)}

/* Stronger visual hierarchy without layout changes. */
.st-intro,.st-room-card,.st-section-head,.st-history,.st-guarda,.st-detail-gallery-section{isolation:isolate}
.st-intro-title h2,.st-section-head h2,.st-history h2,.st-guarda h2,.st-detail h1,.st-detail h2{position:relative}
.st-intro-title h2:after,.st-section-head h2:after,.st-history h2:after,.st-guarda h2:after,.st-detail-gallery-section h2:after{
  content:"";display:block;width:0;height:1px;background:currentColor;opacity:.28;margin-top:22px;
  transition:width 1.1s var(--ease)
}
.st-motion-complete h2:after,h2.st-motion-complete:after,.st-detail-gallery-section.st-motion-complete h2:after{width:min(150px,28%)}

/* Section tag draws a fine line after it appears. */
.st-section-tag{position:relative}
.st-section-tag:after{content:"";width:0;height:1px;background:currentColor;opacity:.35;transition:width .9s .18s var(--ease)}
.st-section-tag.st-motion-complete:after{width:58px}

/* Cards gain depth when their entry finishes; no permanent animation loop. */
.st-room-card{transition:box-shadow .65s var(--ease)}
.st-room-card.st-motion-complete .st-room-image{box-shadow:0 34px 90px rgba(38,28,22,.15)}
.st-room-image{transform-origin:center center}
.st-room-image:before{
  content:"";position:absolute;z-index:3;left:18px;top:18px;width:42px;height:42px;border-left:1px solid rgba(255,255,255,.85);border-top:1px solid rgba(255,255,255,.85);opacity:0;transform:translate(-10px,-10px);transition:.7s .45s var(--ease);pointer-events:none
}
.st-room-card.st-motion-complete .st-room-image:before{opacity:.82;transform:none}
.st-room-copy h3{position:relative}
.st-room-copy h3:after{content:"";display:block;width:0;height:1px;background:var(--clay);margin-top:18px;opacity:.75;transition:width .85s .5s var(--ease)}
.st-room-card.st-motion-complete .st-room-copy h3:after{width:72px}

/* Intro must never be blank. Add visible cinematic details after entry. */
.st-intro-image{box-shadow:0 38px 100px rgba(48,36,28,.11)}
.st-intro-image:before{content:"";position:absolute;z-index:3;left:0;top:0;width:0;height:5px;background:var(--clay);transition:width 1.15s .35s var(--ease);pointer-events:none}
.st-intro.st-motion-complete .st-intro-image:before{width:34%}
.st-intro-note{position:relative}
.st-intro-note:after{content:"";position:absolute;left:0;top:32px;width:0;height:1px;background:var(--clay);opacity:.55;transition:width .8s .55s var(--ease)}
.st-intro.st-motion-complete .st-intro-note:after{width:82px}

/* Experience cards: depth + caption line, not just a shine. */
.st-exp-card{transform-origin:center center}
.st-exp-card>div{position:relative}
.st-exp-card>div:before{content:"";display:block;width:0;height:1px;background:currentColor;opacity:.55;margin-bottom:12px;transition:width .8s .45s var(--ease)}
.st-exp-card.st-motion-complete>div:before{width:54px}

/* Timeline: line grows as each item enters. */
.st-timeline-item{position:relative}
.st-timeline-item:after{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--clay);transition:width .9s .2s var(--ease)}
.st-timeline-item.st-motion-complete:after{width:90px}

/* Detail gallery: show all images robustly, richer stagger and depth. */
.st-detail-gallery-grid{align-items:stretch}
.st-detail-gallery-grid button{position:relative;min-height:300px;box-shadow:0 16px 48px rgba(43,33,27,.08);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.st-detail-gallery-grid button:hover{transform:translateY(-7px);box-shadow:0 30px 70px rgba(43,33,27,.16)}
.st-detail-gallery-grid button:after{content:"+";position:absolute;right:16px;bottom:16px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.88);color:var(--ink);font-size:20px;transition:.35s var(--ease)}
.st-detail-gallery-grid button:hover:after{transform:rotate(90deg) scale(1.05);background:var(--ocean);color:#fff}
.st-detail-gallery-source{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:26px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:11px;line-height:1.5}
.st-detail-gallery-source a{color:var(--ink);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px;text-transform:uppercase;font-size:9px;letter-spacing:.12em}

/* Header/hero micro motion kept subtle and GPU-friendly. */
.st-brand strong{transition:letter-spacing .55s var(--ease)}
.st-header.is-scrolled .st-brand strong{letter-spacing:.18em}

@media(max-width:760px){
  .st-detail-gallery-grid button{min-height:70vw}
  .st-detail-gallery-source{align-items:flex-start;flex-direction:column}
  .st-room-image:before{width:32px;height:32px}
}
@media(prefers-reduced-motion:reduce){
  .st-intro-title h2:after,.st-section-head h2:after,.st-history h2:after,.st-guarda h2:after,.st-detail-gallery-section h2:after,
  .st-section-tag:after,.st-room-copy h3:after,.st-intro-image:before,.st-intro-note:after,.st-timeline-item:after{transition:none!important}
}

/* V9 — enquadramento das imagens fornecidas pelo cliente */
.st-hero-photo img{object-position:center 50%}
.st-final-bg img{object-position:center 58%}

/* ================================================================
   V16.1 — fidelidade de cor das fotografias
   Não aplicar tonalidade quente/marrom sobre fotos do cliente.
   Mantém somente sombreado NEUTRO onde há texto sobre a imagem.
   ================================================================ */
.st-hero-photo img,
.st-room-image img,
.st-detail-photo img,
.st-detail-gallery-grid img,
.st-intro-image img,
.st-exp-photo img,
.st-history figure img,
.st-guarda-collage img,
.st-gallery-item img,
.st-guard-immersive-sticky>img{
  filter:none!important;
}
.st-exp-photo:hover img,
.st-guarda-collage figure:hover img{
  filter:none!important;
}

/* Hero: substitui o antigo overlay marrom por preto neutro. */
.st-hero{background:#111!important}
.st-hero-shade{
  background:
    linear-gradient(90deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.32) 43%,rgba(0,0,0,.04) 74%),
    linear-gradient(0deg,rgba(0,0,0,.34),transparent 50%)!important;
}
.st-hero-stats{background:rgba(0,0,0,.58)!important}

/* Cards fotográficos: escurecimento neutro apenas para leitura do texto. */
.st-exp-photo:after{
  background:linear-gradient(0deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.20) 47%,rgba(0,0,0,.02) 76%)!important;
}
.st-exp-photo>b{background:rgba(0,0,0,.20)!important}

/* Imagem imersiva e colagem da Guarda: remove cast marrom. */
.st-guard-immersive{background:#111!important}
.st-guard-immersive-shade{
  background:
    linear-gradient(90deg,rgba(0,0,0,.52),rgba(0,0,0,.10) 58%,rgba(0,0,0,.24)),
    linear-gradient(0deg,rgba(0,0,0,.50),transparent 55%)!important;
}
.st-immersive-card-right{background:rgba(0,0,0,.62)!important}
.st-guarda-collage figure:after{
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.18))!important;
}


/* ================================================================
   V16.3 — HERO SEM DISTORÇÃO / SEM ZOOM EXCESSIVO
   Mantém a fotografia original, sem alterar cores.
   Desktop: foto inteira na altura da hero, alinhada à direita.
   Mobile: mantém cover para não criar faixas laterais excessivas.
   ================================================================ */
@media (min-width:761px){
  .st-hero-photo{
    background:#111!important;
    overflow:hidden;
  }
  .st-hero-photo img{
    position:absolute!important;
    top:0!important;
    right:0!important;
    left:auto!important;
    width:auto!important;
    height:100%!important;
    max-width:none!important;
    object-fit:contain!important;
    object-position:center center!important;
    animation:none!important;
    transform:none;
  }
  .st-hero-shade{
    background:linear-gradient(90deg,
      rgba(0,0,0,.78) 0%,
      rgba(0,0,0,.64) 27%,
      rgba(0,0,0,.40) 46%,
      rgba(0,0,0,.12) 68%,
      rgba(0,0,0,.02) 100%)!important;
  }
}
@media (max-width:760px){
  .st-hero-photo img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:58% center!important;
    animation:none!important;
  }
}

/* ================================================================
   V26 — HERO FULL-BLEED REAL EM TODOS OS DISPOSITIVOS
   Corrige a regra antiga V16.3 que deixava faixa preta no desktop.
   A fotografia passa a ocupar 100% da largura/altura da hero sem
   distorção, com cover e enquadramento responsivo por breakpoint.
   ================================================================ */
.st-hero{
  width:100%;
  min-height:100svh;
  background:transparent!important;
  overflow:hidden;
}
.st-hero-photo{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
  background:transparent!important;
}
.st-hero-photo img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center 48%!important;
  transform:none!important;
  animation:none!important;
}
.st-hero-shade{
  background:transparent!important;
}

@media (max-width:1100px){
  .st-hero-photo img{object-position:54% center!important}
}
@media (max-width:760px){
  .st-hero{
    min-height:100svh;
    width:100%;
  }
  .st-hero-photo img{
    object-fit:cover!important;
    object-position:59% center!important;
  }
}