/* Kit de motion para site de hotel · ROIH (origem: Uanama Maresias, out/2026)
   Sem .motion no <html> tudo aparece empilhado e legível. Layout preso só debaixo de .motion.
   As cores vêm das variáveis abaixo: redefina no :root do site em vez de editar o kit. */
:root{
  --hm-escuro:#16110D;     /* fundo de noite */
  --hm-claro:#EBDDC7;      /* texto sobre o escuro */
  --hm-claro-2:#BFAF97;    /* texto secundário */
  --hm-destaque:#E0973A;   /* cor de destaque da marca */
  --hm-header:76px;        /* altura do cabeçalho fixo */
  --hm-pad:clamp(16px,4vw,48px);
}
.hm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 1. hero com luz que acende [data-luz] ---------- */
[data-luz]{position:relative;overflow:hidden;isolation:isolate}
.luz-foto{position:absolute;inset:-3% 0 0;width:100%;height:103%;object-fit:cover}
.luz-sombra{position:absolute;inset:0;background:var(--luz-sombra,rgba(14,10,7,.52))}
.luz-sombra::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(to top,var(--hm-escuro),transparent);opacity:.9}
.luz-brilho{position:absolute;inset:0;pointer-events:none;opacity:.9;background:radial-gradient(60% 50% at 50% 62%,var(--luz-cor,rgba(224,151,58,.22)),transparent 70%)}
.luz-conteudo{position:relative;z-index:1}

/* grão fino por cima da foto: disfarça a compressão de foto de celular e de WhatsApp.
   Não resolve foto pequena esticada; para isso só o arquivo original. */
.grao{position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}

/* ---------- números que contam ---------- */
[data-conta]{font-variant-numeric:tabular-nums}

/* ---------- foto com paralaxe: a caixa corta, a foto sobra 10% em cima e embaixo ---------- */
.paralaxe-caixa{position:relative;overflow:hidden}
.paralaxe-caixa > [data-paralaxe]{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover}

/* ---------- zoom lento no hover do cartão (só onde existe hover) ---------- */
.zoom-hover{overflow:hidden}
.zoom-hover img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){a:hover .zoom-hover img,button:hover .zoom-hover img,.zoom-hover:hover img{transform:scale(1.05)}}

/* ---------- 2. jornada [data-jornada] ----------
   Estático: passos empilhados e só a ÚLTIMA foto aparece (escolha a melhor para ela).
   Com motion: o palco fica preso e a rolagem troca foto, texto e cor. */
[data-jornada]{--j-fundo:var(--hm-escuro);--j-texto:var(--hm-claro);--j-texto2:var(--hm-claro-2);--j-destaque:var(--hm-destaque);position:relative;background:var(--j-fundo);color:var(--j-texto)}
.jornada-palco{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:clamp(24px,5vw,72px);padding:clamp(72px,9vw,104px) var(--hm-pad);max-width:1360px;margin:0 auto}
.jornada-texto{display:flex;flex-direction:column;gap:20px}
[data-jornada] .jornada-rotulo{color:var(--j-destaque)}   /* mais específico que o .rotulo do site */
.jornada-titulo span{display:block}
.jornada-passos{display:flex;flex-direction:column;gap:18px}
.jornada-passo{color:var(--j-texto2);max-width:440px;margin:0}
.jornada-passo strong{display:block;font-weight:400;color:var(--j-texto);margin-bottom:6px}
.jornada-quadro{position:relative;aspect-ratio:3/2;overflow:hidden;background:#000}
.jornada-quadro img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.jornada-quadro img:not(:last-child){display:none}
.jornada-hora,.jornada-barra{display:none}
.motion [data-jornada]{height:calc(var(--passos,3) * 100vh)}
.motion .jornada-palco{position:sticky;top:0;height:100vh;height:100svh;padding:calc(var(--hm-header) + 12px) var(--hm-pad) 32px}
.motion .jornada-passos{position:relative;display:block;min-height:var(--jornada-altura,9.5em)}
.motion .jornada-passo{position:absolute;inset:0 0 auto}
.motion .jornada-quadro img:not(:last-child){display:block}
.motion .jornada-hora{display:flex;justify-content:space-between;margin-top:42px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--j-texto2)}
.jornada-hora b{font-weight:400}
.motion .jornada-barra{display:block;position:relative;height:1px;background:rgba(127,110,90,.35);margin-top:10px}
.jornada-barra i{position:absolute;inset:0;background:var(--j-destaque);transform-origin:left;transform:scaleX(0)}
@media (max-width:760px){
  .jornada-palco{display:flex;flex-direction:column;gap:22px}
  .jornada-quadro{order:-1;aspect-ratio:4/3;width:100%}
  .motion [data-jornada]{height:calc(var(--passos,3) * 87vh)}
  .motion .jornada-palco{justify-content:center;gap:16px;padding-top:calc(var(--hm-header) + 4px);padding-bottom:16px}
  .motion .jornada-quadro{aspect-ratio:auto;height:34vh;height:34svh;flex:none}
  .motion .jornada-texto{gap:12px}
  .motion .jornada-passos{min-height:var(--jornada-altura-celular,8.6em);font-size:16px}
  .motion .jornada-hora{margin-top:0}
}

/* ---------- 3. faixa horizontal [data-faixa] ----------
   Padrão: faixa que se arrasta com o dedo. Com motion em tela larga: anda com a rolagem. */
[data-faixa]{position:relative}
.faixa-palco{display:flex;flex-direction:column;justify-content:center;gap:32px;padding:clamp(72px,9vw,104px) 0;overflow:hidden}
.faixa-trilho{display:flex;gap:16px;padding:0 var(--hm-pad);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.faixa-trilho::-webkit-scrollbar{display:none}
.faixa-trilho > *{flex:none;scroll-snap-align:start;scroll-margin-left:var(--hm-pad)}
.faixa-item{margin:0;display:flex;flex-direction:column;gap:12px}
.faixa-item img{height:min(62vw,420px);width:auto;object-fit:cover}
.faixa-item figcaption{max-width:34ch}
@media (min-width:761px){
  .faixa-item img{height:min(56vh,560px)}
  .motion .faixa-palco{position:sticky;top:0;height:100vh;height:100svh;padding:var(--hm-header) 0 0}
  .motion .faixa-trilho{overflow:visible;width:max-content;gap:28px;will-change:transform;scroll-snap-type:none}
}

/* ---------- cabeçalho e botão flutuante ---------- */
[data-topo]{transition:background .35s,border-color .35s,transform .35s}
[data-topo].some{transform:translateY(-100%)}
[data-flutuante]{transition:transform .35s,opacity .35s}
[data-flutuante].escondido{transform:translateY(140%);opacity:0;pointer-events:none}

/* ---------- galeria em tela cheia (o JS monta o .hm-lb) ---------- */
[data-galeria] [data-grande]{cursor:zoom-in}
.hm-lb{position:fixed;inset:0;z-index:80;background:rgba(10,7,5,.96);display:none;align-items:center;justify-content:center}
.hm-lb.aberta{display:flex}
.hm-lb img{max-width:min(94vw,1400px);max-height:86vh;width:auto;height:auto;object-fit:contain}
.hm-lb button{position:absolute;background:none;border:1px solid rgba(235,221,199,.3);color:var(--hm-claro);width:48px;height:48px;font-size:24px;line-height:1;cursor:pointer}
.hm-lb .hm-lb-fechar{top:16px;right:16px}
.hm-lb .hm-lb-ant{left:16px;top:50%;transform:translateY(-50%)}
.hm-lb .hm-lb-prox{right:16px;top:50%;transform:translateY(-50%)}
.hm-lb-conta{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-size:13px;letter-spacing:.2em;color:var(--hm-claro-2)}

@media (prefers-reduced-motion:reduce){
  .zoom-hover img,[data-topo],[data-flutuante]{transition:none!important}
}