/* escala de fonte do site inteiro: 1 no celular/tablet, maior no PC
   (ver media query logo abaixo). Toda font-size do arquivo multiplica por
   uma dessas duas — textos corridos/pequenos (até 20px) crescem mais que
   títulos grandes, que já são bem visíveis e estourariam o layout. */
:root{ --fs-text:1; --fs-title:1; }
@media (min-width:1024px){
  :root{ --fs-text:1.3; --fs-title:1.12; }
}

/* ===========================================================
   TOTUS MATRIMÔNIO — estilos base + motor fullpage
   Cada <section class="fp-section"> ocupa 100% da tela (sem
   scroll interno) e a rolagem troca a seção inteira.
   =========================================================== */

/* Bison: licenca "Personal Use" no arquivo enviado pelo Valter — confirmar
   licenca comercial antes de publicar o site de verdade. */
@font-face{
  font-family:'Bison';
  src:url('../assets/fonts/bison/Bison-Bold-PersonalUse.ttf') format('truetype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Manrope';
  src:url('../assets/fonts/manrope/static/Manrope-Regular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Manrope';
  src:url('../assets/fonts/manrope/static/Manrope-Medium.ttf') format('truetype');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Manrope';
  src:url('../assets/fonts/manrope/static/Manrope-SemiBold.ttf') format('truetype');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Manrope';
  src:url('../assets/fonts/manrope/static/Manrope-Bold.ttf') format('truetype');
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  --color-bg:        #0b0b0c;
  --color-white:     #f7f5f0;
  --color-white-dim: rgba(247,245,240,.72);
  --color-gold:      #c9a24b;
  --font-display:    'Bison', 'Times New Roman', serif;
  --font-body:        'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --ease:            cubic-bezier(.645,.045,.355,1);
  --dur:             .9s;
}

*{ box-sizing: border-box; }
html,body{
  margin:0; padding:0; height:100%;
  background:var(--color-bg); color:var(--color-white);
  font-family:var(--font-body);
  overflow:hidden; /* rolagem controlada via JS, nunca scroll nativo */
  overscroll-behavior:none;
}
img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* ---------- motor fullpage ---------- */
.fp-wrapper{
  width:100%;
  will-change: transform;
  transition: transform var(--dur) var(--ease); /* slide suave entre seções */
}
/* moldura "voadora" do vídeo da hero, usada só durante a transição
   seção 1 → 2, pra encolher (com moldura de polaroid crescendo junto)
   até virar o polaroid de destino (ver js/main.js) */
.hero-fly-frame{
  position:fixed;
  box-sizing:border-box;
  background:#fffdf9;
  z-index:1; /* atrás do texto/logo da hero (z-index:2) enquanto eles somem;
                js/main.js sobe pra frente só quando o encolhimento começa */
  pointer-events:none;
  overflow:hidden;
}
.hero-fly-frame video{
  background:#111;
}

/* texto/logo/scroll-cue da hero somem devagar primeiro; só depois o
   vídeo começa a encolher (delay em js/main.js, TEXT_FADE_MS) */
.hero.is-morph-source .hero-content,
.hero.is-morph-source .hero-logo,
.hero.is-morph-source .scroll-cue{
  transition:opacity .65s ease;
  opacity:0;
}
/* .hero-content (título/texto/botões) e .scroll-cue ("role") têm animação
   de entrada própria com fill-mode:forwards (content-reveal / cue-reveal) —
   ela continua "segurando" opacity:1 pra sempre depois de terminar, e
   animação sempre ganha de transition no mesmo elemento. Sem isso, a
   transição de opacity acima nunca teria efeito visível nelas (só a logo,
   que não tem animação de opacidade no próprio container, já sumia). */
.hero.is-morph-source .hero-content,
.hero.is-morph-source .scroll-cue{
  animation:none;
}

.fp-section{
  position:relative;
  width:100%;
  height:100dvh; /* fallback antes do JS medir a viewport de verdade */
  height:var(--app-vh, 100dvh);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:scale(1);
  opacity:1;
  filter:blur(0px) brightness(1);
  transition:
    transform var(--dur-section, var(--dur)) var(--ease),
    opacity var(--dur-section, var(--dur)) var(--ease),
    filter var(--dur-section, var(--dur)) var(--ease);
}
/* a seção que chega nasce desfocada/clara-demais e "foca" ao assentar;
   a que sai desfoca/escurece e encolhe enquanto é empurrada pra fora —
   motion blur sincronizado com o slide do wrapper */
.fp-section.is-entering{
  transform:scale(1.1);
  opacity:.5;
  filter:blur(10px) brightness(1.25);
}
.fp-section.is-leaving{
  transform:scale(.9);
  opacity:.35;
  filter:blur(10px) brightness(.65);
}
/* passo a passo da seção 1 (morph desativado, ver HERO_MORPH_ENABLED em
   js/main.js): saindo da hero, sobrescreve o blur/scale/opacity genérico
   acima — vídeo e escurecimento (.hero-overlay) continuam exatamente como
   estavam, só o texto some (.hero.is-morph-source, mais abaixo) */
.hero.is-leaving{
  transform:none;
  opacity:1;
  filter:none;
}
/* ---------- dots de navegação ---------- */
.fp-dots{
  position:fixed;
  right:clamp(14px, 3vw, 34px);
  top:50%;
  transform:translateY(-50%);
  z-index:50;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.fp-dot{
  width:9px; height:9px; border-radius:50%;
  background:transparent;
  border:1px solid var(--color-white-dim);
  cursor:pointer;
  padding:0;
  transition:background .3s, border-color .3s, transform .3s;
}
.fp-dot:hover{ transform:scale(1.2); }
/* fundo claro (ver LIGHT_STEPS no JS): borda dourada nas não selecionadas */
.fp-dots.is-on-light .fp-dot:not(.is-active){ border-color:var(--color-gold); }
.fp-dot.is-active{
  background:var(--color-gold);
  border-color:var(--color-gold);
}
/* ida direta pra uma bolinha (ver goToStep no JS): cortina escura
   cobrindo a tela enquanto a página passa, instantânea, pelas etapas do
   caminho — tudo sem transição nem animação (html.is-instant) */
.fp-veil{
  position:fixed; inset:0;
  z-index:49; /* abaixo só das bolinhas (50) */
  background:var(--color-bg);
  opacity:0;
  pointer-events:none;
  transition:opacity .38s ease;
}
.fp-veil.is-visible{ opacity:1; pointer-events:auto; }
html.is-instant *,
html.is-instant *::before,
html.is-instant *::after{
  transition-duration:0s !important;
  transition-delay:0s !important;
  animation-duration:0s !important;
  animation-delay:0s !important;
}
html.is-instant .fp-veil{ transition:none !important; }

/* tag da bolinha: fitinha de cetim creme com o nome da etapa, ponta
   apontando pra bolinha e rabo de fita recortado do outro lado — estilo
   convite de casamento; texto na Manrope do site, em maiúsculas
   espaçadas (como os eyebrows). Aparece no hover e, sozinha por alguns
   segundos, ao entrar numa etapa (.is-tag-visible, ver JS) */
.fp-dot{ position:relative; }
.fp-dot-tag{
  position:absolute;
  right:calc(100% + 18px);
  top:50%;
  transform:translate(10px, -50%);
  opacity:0;
  pointer-events:none;
  white-space:nowrap;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));
  transition:opacity .45s ease, transform .55s var(--ease);
}
/* fiozinho dourado ligando a fita à bolinha */
.fp-dot-tag::after{
  content:"";
  position:absolute;
  left:100%; top:50%;
  width:14px; height:1px;
  background:linear-gradient(90deg, var(--color-gold), rgba(201,162,75,0));
}
.fp-dot-tag-body{
  display:block;
  padding:8px 26px 8px 24px;
  background:linear-gradient(180deg, #fffaf1 0%, #f3eadb 100%);
  color:#8a6a2e;
  font-family:'Manrope', sans-serif;
  font-size:11px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.2em;
  text-transform:uppercase;
  /* rabo de fita recortado à esquerda, ponta à direita */
  clip-path:polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%, 11px 50%);
  /* costura dourada fininha em cima e embaixo */
  box-shadow:inset 0 2px 0 -1px rgba(201,162,75,.55), inset 0 -2px 0 -1px rgba(201,162,75,.55);
}
.fp-dot:hover .fp-dot-tag,
.fp-dot:focus-visible .fp-dot-tag,
.fp-dot.is-tag-visible .fp-dot-tag{
  opacity:1;
  transform:translate(0, -50%);
}
/* o hover não aumenta mais a bolinha (escalaria a fita junto) — ganha
   um aro dourado */
.fp-dot:hover{ transform:none; box-shadow:0 0 0 3px rgba(201,162,75,.25); }

.fp-dot.is-placeholder{
  border-color:var(--color-white-dim);
  opacity:.35;
  cursor:default;
}
.fp-dot.is-placeholder:hover{ transform:none; }
@media (max-width:640px){
  .fp-dots{ display:none; }
}

/* =============== HERO =============== */
.hero{ color:var(--color-white); text-align:center; }

.hero-media{
  position:absolute; inset:0;
  width:100%; height:100%;
  overflow:hidden;
  z-index:0;
}
.hero-video{
  /* técnica clássica de "cover" pra vídeo de fundo: centraliza e garante
     mínimo de 100%/100%, em vez de depender só de object-fit (mais robusto
     entre navegadores quando a altura do pai vem de dvh/JS). */
  position:absolute;
  top:50%; left:50%;
  min-width:100%; min-height:100%;
  width:auto; height:auto;
  transform:translate(-50%, -50%);
  object-fit:cover;
  background:#111 center/cover no-repeat;
  /* sem filter/blur aqui: aplicar CSS filter direto num <video> causa
     flicker em Chrome com decodificação por hardware — o blur/escurecido
     é feito via backdrop-filter no overlay logo abaixo, que produz o
     mesmo efeito visual sem tocar no vídeo diretamente. */
}
.hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.5) 32%, rgba(0,0,0,.6) 68%, rgba(0,0,0,.85) 100%);
  -webkit-backdrop-filter: blur(1.5px) brightness(.58);
  backdrop-filter: blur(1.5px) brightness(.58);
  transition:opacity .9s ease;
}
/* passo seguinte do passo a passo da seção 1: depois que o vídeo já
   pausou/congelou (freezeHeroVideo), o escurecimento some e, ao mesmo
   tempo/ritmo, nasce a moldura de polaroid — já centralizada e na
   proporção final do cartão (não cheia a tela: a largura do hero sobra
   demais em telas de PC pra proporção 4/5 da foto, então a moldura já
   nasce do tamanho/proporção que ela realmente tem, com folga/"margenzinha"
   nas quatro bordas — laterais bem largas no desktop, topo/bottom mais
   discretas). Mesma proporção de borda/sombra do .polaroid-inner real, só
   escalada. Antecipa visualmente o polaroid em que o vídeo vai virar
   (ver .hero.is-framed em js/main.js) */
.hero-polaroid-frame,
.hero-polaroid-photo{
  position:absolute; inset:0;
  z-index:12; /* acima do .hero-manifesto-reveal (10) — continua visível
                por cima do painel depois que ele surge */
  margin:auto;
  width:auto;
  height:min(72vh, 640px);
  aspect-ratio:4 / 5;
  transform-origin:50% 50%;
}
@media (max-width:640px){
  .hero-polaroid-frame,
  .hero-polaroid-photo{ height:min(58vh, 460px); }
}
.hero-polaroid-frame{
  pointer-events:none;
  opacity:0;
  transition:opacity .9s ease, transform 1.6s ease, box-shadow 1.6s ease; /* transform/box-shadow no mesmo ritmo do fundo ficando branco (HERO_BG_FADE_MS) */
  /* TODAS as bordas (laterais/topo E a de baixo) são ~3.85× (1 / .26, o
     scale final do card — ver .hero.is-bg-white abaixo) o padding do
     .polaroid-inner real: o transform:scale() encolhe elas JUNTO com o
     card, então quando pousada fica com a mesma moldura das outras
     polaroids — e desde o início já tem a mesma proporção/estilo delas. */
  box-shadow:
    inset 0 0 0 clamp(23px, 3.46vw, 38px) #fffdf9,
    inset 0 calc(-1 * clamp(69px, 9.2vw, 100px)) 0 0 #fffdf9,
    0 40px 70px -14px rgba(0,0,0,.55),
    0 16px 32px -10px rgba(0,0,0,.4),
    0 4px 12px rgba(0,0,0,.25);
}
.hero.is-framed .hero-overlay{ opacity:0; }
.hero.is-framed .hero-polaroid-frame{ opacity:1; }

/* mesma foto congelada (ver freezeHeroVideo em js/main.js), só que já
   recortada bem na janela da moldura — nasce junto com ela (mesma
   posição/proporção exatas, CSS compartilhado acima) e fica por cima do
   fundo branco a seguir, então quando ele for surgindo, só a área FORA da
   moldura vira branco; a foto que ficou dentro continua ali, intacta.
   Em vez de <img>+object-fit (que recortaria com um crop PRÓPRIO, na
   proporção da janela pequena — diferente do vídeo cheio por trás), é uma
   div com background-image: o JS mede o retângulo real do vídeo (mesmo
   truque de "cover" que ele usa) e aplica o MESMO tamanho/escala aqui via
   background-size/position, só que reenquadrado pra essa janela — assim a
   foto por dentro é um recorte exato da mesma imagem, na mesma proporção
   de zoom que continua por trás. */
.hero-polaroid-photo{
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity .9s ease, transform 1.6s ease;
}
.hero.is-framed .hero-polaroid-photo{ opacity:1; }

/* passo seguinte: já com a moldura no lugar, o fundo (tudo que fica atrás
   do cartão — o vídeo que ainda espia em volta dele) vira branco aos
   poucos, bem devagar (ver .hero.is-bg-white em js/main.js). Junto, no
   mesmo ritmo, a moldura + a foto (sempre juntas, mesmo transform — ver
   transform-origin/tamanho compartilhados acima) encolhem e deslizam pro
   centro inferior da tela — como o transform é só visual (não muda a
   largura/altura reais da caixa), o crop da foto calculado em px pelo JS
   continua batendo certinho mesmo menor. */
.hero-bg-fade{
  position:absolute; inset:0;
  background:#fffdf9;
  opacity:0;
  transition:opacity 1.6s ease;
}
.hero.is-bg-white .hero-bg-fade{ opacity:1; }
.hero.is-bg-white .hero-polaroid-frame,
.hero.is-bg-white .hero-polaroid-photo{
  transform:translateY(35vh) scale(.26);
  /* balanço contínuo igual as outras polaroids, uma vez pousada — usa a
     propriedade `rotate` separada (não `transform`), porque o `transform`
     acima já está ocupado com a posição/escala; `rotate` soma em cima sem
     brigar com ele (ver @keyframes hero-polaroid-sway mais abaixo) */
  animation:hero-polaroid-sway 4.1s ease-in-out infinite;
  animation-delay:.1s;
}
@keyframes hero-polaroid-sway{
  0%,100%{ rotate:-3deg; }
  50%{ rotate:3deg; }
}
/* já pousada e pequena (scale .26): a sombra externa passa a ser a MESMA
   do .polaroid-inner real (mesma cor/proporção), só que ~3.85× maior antes
   do scale — assim, depois de encolhida, sai do tamanho certo e fica
   igual às outras polaroids da grade (bordas: ver regra base acima). */
.hero.is-bg-white .hero-polaroid-frame{
  box-shadow:
    inset 0 0 0 clamp(23px, 3.46vw, 38px) #fffdf9,
    inset 0 calc(-1 * clamp(69px, 9.2vw, 100px)) 0 0 #fffdf9,
    0 54px 108px -31px rgba(20,15,5,.28),
    0 12px 31px rgba(20,15,5,.12);
}

/* mesmo escurecimento, só que na moldura voadora — desaparece assim que
   o vídeo começa a encolher rumo ao polaroid (ver js/main.js) */
.hero-fly-tint{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.5) 32%, rgba(0,0,0,.6) 68%, rgba(0,0,0,.85) 100%);
  -webkit-backdrop-filter: blur(1.5px) brightness(.58);
  backdrop-filter: blur(1.5px) brightness(.58);
  opacity:1;
  transition:opacity .5s ease;
}
.hero-fly-tint.is-gone{ opacity:0; }

/* 5 pontinhos girando até a fonte E o vídeo estarem prontos (ver js/main.js) */
.hero-loader{
  position:absolute;
  inset:0;
  z-index:6;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(8px, 1.4vw, 12px);
  opacity:1;
  transition:opacity .45s ease;
}
.hero-loader.is-hidden{
  opacity:0;
  pointer-events:none;
}
.hero-loader .dot{
  width:clamp(7px, .9vw, 10px);
  height:clamp(7px, .9vw, 10px);
  border-radius:50%;
  background:var(--color-white);
  opacity:0;
  animation:hero-dot-pulse 1.1s ease-out infinite;
}
.hero-loader .dot:nth-child(1){ animation-delay:0s; }
.hero-loader .dot:nth-child(2){ animation-delay:.18s; }
.hero-loader .dot:nth-child(3){ animation-delay:.36s; }
.hero-loader .dot:nth-child(4){ animation-delay:.54s; }
.hero-loader .dot:nth-child(5){ animation-delay:.72s; }
/* mesmo efeito das letras do TOTUS (fade + leve subida), só que em loop */
@keyframes hero-dot-pulse{
  0%, 100%{ opacity:0; transform:translateY(6px); }
  50%{ opacity:1; transform:translateY(0); }
}

.hero-logo{
  --logo-rise-y: 31vh; /* offset "nascendo no centro" até a posição final (top abaixo) */
  position:absolute;
  top:15%;
  left:0; right:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:1;
}
@media (max-width:640px){
  .hero-logo{ --logo-rise-y: 38vh; top:9vh; }
}

/* ---- intro: TOTUS letra a letra, MATRIMÔNIO inteiro, aí sobe e revela o resto ----
   Fica tudo parado no estado inicial até a fonte Bison/Manrope carregar de
   verdade (JS adiciona .fonts-ready no <body> — ver js/main.js). Isso evita
   o "flash" do nome aparecendo primeiro numa fonte de fallback. */
@media (prefers-reduced-motion: no-preference){

  /* estado inicial — sempre assim até .fonts-ready entrar em cena */
  .hero-logo{ transform:translateY(var(--logo-rise-y)) scale(1.3); }
  .hero-logo-main .tl{ display:inline-block; opacity:0; transform:translateY(6px); }
  .hero-logo-sub{ opacity:0; transform:translateY(4px); }
  .hero-content{ opacity:0; transform:translateY(18px); }
  .scroll-cue{ opacity:0; }

  /* 1. "TOTUS" letra a letra, ainda centralizado na tela */
  body.fonts-ready .hero-logo{
    animation: logo-rise 1.2s cubic-bezier(.645,.045,.355,1) 2.5s forwards;
  }
  @keyframes logo-rise{
    0%   { transform:translateY(var(--logo-rise-y)) scale(1.3); }
    100% { transform:translateY(0) scale(1); }
  }
  body.fonts-ready .hero-logo-main .tl{
    animation: letter-in .6s ease-out forwards;
  }
  @keyframes letter-in{
    from{ opacity:0; transform:translateY(6px); }
    to{ opacity:1; transform:translateY(0); }
  }

  /* 2. "MATRIMÔNIO" surge completo, depois das letras */
  body.fonts-ready .hero-logo-sub{
    animation: sub-in .6s ease-out forwards;
    animation-delay: 1.5s;
  }
  @keyframes sub-in{
    from{ opacity:0; transform:translateY(4px); }
    to{ opacity:1; transform:translateY(0); }
  }

  /* 3. tudo sobe (logo-rise acima) e então o resto é revelado */
  body.fonts-ready .hero-content{
    animation: content-reveal .9s ease-out forwards;
    animation-delay: 3.6s;
  }
  @keyframes content-reveal{
    from{ opacity:0; transform:translateY(18px); }
    to{ opacity:1; transform:translateY(0); }
  }

  body.fonts-ready .scroll-cue{
    animation-name: cue-reveal, cue-bob;
    animation-duration: .8s, 2.4s;
    animation-timing-function: ease-out, ease-in-out;
    animation-delay: 4.2s, 5s;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: forwards, none;
  }
  @keyframes cue-reveal{
    from{ opacity:0; }
    to{ opacity:1; }
  }
}
.hero-logo-main{
  font-family:var(--font-display);
  font-size:calc(clamp(17px, 2.4vw, 22px) * var(--fs-title, 1));
  letter-spacing:.42em;
  font-weight:500;
}
.hero-logo-sub{
  margin-top:6px;
  font-family:var(--font-body);
  font-size:calc(clamp(8.5px, 1vw, 10px) * var(--fs-text, 1));
  letter-spacing:.38em;
  color:var(--color-white-dim);
}
/* no PC a logo fica bem maior (no celular mantém o tamanho original) */
@media (min-width:641px){
  .hero-logo-main{ font-size:calc(clamp(26px, 3.6vw, 44px) * var(--fs-title, 1)); }
  .hero-logo-sub{ font-size:calc(clamp(11px, 1.3vw, 15px) * var(--fs-text, 1)); margin-top:10px; }
}

.hero-content{
  position:relative;
  z-index:2;
  max-width:min(780px, 84vw);
  padding:0 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(14px, 2.6vh, 26px);
}

.hero-title{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:calc(clamp(26px, 5.2vw, 54px) * var(--fs-title, 1));
  line-height:1.14;
  letter-spacing:.01em;
}
.hero-title em{
  font-style:italic;
  color:var(--color-gold);
  font-weight:400;
}

.hero-text{
  margin:0;
  max-width:56ch;
  font-size:calc(clamp(13px, 1.35vw, 16px) * var(--fs-text, 1));
  line-height:1.65;
  color:var(--color-white-dim);
  font-weight:400;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(10px, 1.6vw, 16px);
  margin-top:clamp(4px, 1vh, 10px);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:clamp(11px, 1.5vh, 15px) clamp(22px, 2.6vw, 34px);
  font-size:calc(clamp(11px, .95vw, 12.5px) * var(--fs-text, 1));
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  border-radius:2px;
  border:1px solid var(--color-white);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  white-space:nowrap;
}
.btn-primary{
  background:var(--color-white);
  color:#111;
}
.btn-primary:hover{
  background:var(--color-gold);
  border-color:var(--color-gold);
  color:#111;
}
.btn-outline{
  background:transparent;
  color:var(--color-white);
}
.btn-outline:hover{
  background:var(--color-white);
  color:#111;
}

.scroll-cue{
  position:absolute;
  bottom:clamp(16px, 4vh, 34px);
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.scroll-cue-line{
  width:1px; height:32px;
  background:linear-gradient(180deg, var(--color-white) 0%, transparent 100%);
}
.scroll-cue-label{
  font-size:calc(9.5px * var(--fs-text, 1));
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--color-white-dim);
}
@keyframes cue-bob{
  0%,100%{ transform:translate(-50%,0); }
  50%{ transform:translate(-50%,8px); }
}

/* rótulo pequeno reutilizável acima dos títulos de seção */
.eyebrow{
  display:block;
  font-family:var(--font-body);
  font-size:calc(clamp(10px, 1vw, 11.5px) * var(--fs-text, 1));
  font-weight:600;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--color-gold);
}

/* =============== MANIFESTO / PROPÓSITO =============== */
/* "Manifesto" não é mais uma seção própria — é este painel que surge por
   cima da própria Hero, como último passo da sequência de scroll (texto
   some → vídeo pausa/vira moldura → fundo fica branco → moldura encolhe
   pro canto → ESTE painel, ver .hero.is-manifesto-revealed em js/main.js).
   Mesmo esquema do .sobre-diferencial-reveal (ver mais abaixo), só que
   com fundo sólido (o fundo já tá quase branco/creme nesse ponto, então a
   transição é bem sutil) em vez de transparente sobre uma imagem. */
.hero-manifesto-reveal{
  position:absolute; inset:0;
  z-index:10; /* acima do vídeo/loader/logo da hero; a moldura que pousou
                 (agora fora de .hero-media, ver HTML) tem z-index maior
                 ainda, pra continuar visível por cima deste painel */
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:#faf8f4;
  color:#161513;
  text-align:center;
  flex-direction:column;
  gap:clamp(20px, 4.5vh, 52px);
  padding:clamp(16px, 4vh, 40px) clamp(16px, 5vw, 40px);
  opacity:0;
  pointer-events:none;
  transition:opacity .7s ease, background-color 1.6s var(--ease);
}
.hero.is-manifesto-revealed .hero-manifesto-reveal{
  opacity:1;
  pointer-events:auto;
}
/* quando o resto do conteúdo some (foto do centro virando painel, ver
   .is-center-polaroid-panel em js/main.js), o fundo creme vira preto
   junto — antecipa o fundo escuro da próxima seção (Sobre) */
.hero.is-manifesto-revealed.is-center-polaroid-panel .hero-manifesto-reveal{
  background-color:#0b0b0c;
}
/* passo do Diferencial: antes da foto de fundo (ainda ocupando a tela
   toda) encolher até o card, o fundo POR TRÁS dela já vira branco/creme
   (mesmo tom do hero-criacoes-preview) — como a foto ainda cobre tudo
   nesse instante, a troca de cor fica invisível até o encolhimento
   começar a revelar as bordas, que já nascem brancas em vez de pretas.
   Transição mais rápida que a de volta pro preto acima (.5s em vez de
   1.6s) — pra já estar pronta a tempo (ver HERO_BG_WHITE_MS/
   playHeroDiferencialTextHide no JS). Uma classe a mais que a regra
   acima já garante a especificidade extra pra vencer ela. */
.hero.is-manifesto-revealed.is-center-polaroid-panel.is-diferencial-bg-white .hero-manifesto-reveal{
  background-color:#faf8f4;
  transition:background-color .5s ease;
}
/* passo seguinte, já depois do carrossel de Criações: a foto (que
   ocupava a tela toda) encolhe pra metade de baixo (ver
   playExperienciaPhotoDock no JS, que mexe direto no top/height inline
   do .criacoes-bg-grow) — a metade de cima que ela deixa de cobrir
   precisa voltar a escurecer (não continuar creme), daí essa regra: uma
   classe a mais que a do creme acima garante a especificidade pra vencer
   ela de novo. Transição mais lenta (1s) que a ida pro creme (.5s) — não
   tem pressa aqui, a foto encolhendo já é o "evento principal". */
.hero.is-manifesto-revealed.is-center-polaroid-panel.is-diferencial-bg-white.is-experiencia-photo-docked .hero-manifesto-reveal{
  background-color:#0b0b0c;
  transition:background-color 1s ease;
}

.manifesto-content{
  max-width:min(720px, 84vw);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(10px, 1.8vh, 18px);
}

.manifesto-title{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:calc(clamp(22px, 4.4vw, 44px) * var(--fs-title, 1));
  line-height:1.18;
  color:#141310;
}

.manifesto-text{
  margin:0;
  max-width:58ch;
  font-size:calc(clamp(13px, 1.3vw, 16.5px) * var(--fs-text, 1));
  line-height:1.7;
  color:#5c5850;
}

/* -------- molduras estilo foto instantânea, espalhadas pela tela -------- */
.polaroid-scatter{
  position:absolute;
  inset:0;
  z-index:0;
  --pw:clamp(64px, 10.5vw, 140px); /* largura da moldura (.polaroid-inner) */
}
.manifesto-content{ position:relative; z-index:2; }

/* .polaroid = âncora posicionada + rotação/escala base (estática).
   .polaroid-inner = moldura visual + balanço contínuo (animado).
   Separar os dois evita que a animação de balanço "brigue" com a
   posição espalhada de cada foto. */
.polaroid{
  position:absolute;
  margin:0;
}
.polaroid-inner{
  background:#fffdf9;
  padding:clamp(6px, .9vw, 10px) clamp(6px, .9vw, 10px) clamp(18px, 2.4vw, 26px);
  width:var(--pw);
  box-shadow:0 14px 28px -8px rgba(20,15,5,.28), 0 3px 8px rgba(20,15,5,.12);
  transform-origin:50% 6%;
  animation:polaroid-sway var(--sway-dur, 4.4s) ease-in-out infinite;
  animation-delay:var(--sway-delay, 0s);
}
.polaroid img, .polaroid video{
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  background:#111;
}
@keyframes polaroid-sway{
  0%,100%{ transform:rotate(calc(var(--sway-amp, 3deg) * -1)); }
  50%{ transform:rotate(var(--sway-amp, 3deg)); }
}

/* entrada: texto primeiro, depois as fotos uma a uma (ordem embaralhada) */
.manifesto-content{ opacity:0; transform:translateY(16px); }
.hero.is-manifesto-revealed .manifesto-content{
  animation:manifesto-text-in .7s ease-out forwards;
}
@keyframes manifesto-text-in{ to{ opacity:1; transform:translateY(0); } }

.polaroid{ opacity:.1; }
.hero.is-manifesto-revealed .polaroid{
  animation:polaroid-in .5s ease-out forwards;
}
@keyframes polaroid-in{ from{ opacity:.1; } to{ opacity:1; } }
.hero.is-manifesto-revealed .polaroid.p4{ animation-delay:.55s; }
.hero.is-manifesto-revealed .polaroid.p6{ animation-delay:.68s; }
.hero.is-manifesto-revealed .polaroid.p2{ animation-delay:.81s; }
.hero.is-manifesto-revealed .polaroid.p5{ animation-delay:.94s; }
.hero.is-manifesto-revealed .polaroid.p3{ animation-delay:1.07s; }
.hero.is-manifesto-revealed .polaroid.p7{ animation-delay:.62s; }
.hero.is-manifesto-revealed .polaroid.p8{ animation-delay:1.2s; }

/* passo seguinte, ainda dentro do Manifesto: só a MOLDURA (fundo branco +
   sombra do .polaroid-inner) da foto do centro/topo (a mesma que depois
   vira o painel da Sobre, ver isMobile em playManifestoToSobreMorph) some
   sozinha e devagar antes da troca de seção de verdade — a <img> dentro
   dela é filha, não é afetada por essa regra, então continua visível (ver
   playHeroCenterPolaroidHide/Show no JS). Aplica na .polaroid-inner (não
   na .polaroid, que é quem tem a animação de entrada com fill forwards —
   aqui nem precisa de animation:none nem de disputa de especificidade). */
/* transições SEMPRE presentes nessas duas fotos específicas (p2/p7 — as
   que também viram o painel da Sobre, ver isMobile em
   playManifestoToSobreMorph), fora do estado is-fading-out/is-becoming-
   panel: se a transition só existisse dentro do estado "ligado", a IDA
   animaria mas a VOLTA (classe removida) voltaria instantânea, sem
   transição nenhuma declarada. Ficam só nessas duas fotos (não em
   .polaroid geral) pra não fazer as outras "animarem" à toa num resize. */
.polaroid.p2, .polaroid.p7{
  transition:top 1.6s var(--ease), left 1.6s var(--ease), width 1.6s var(--ease), height 1.6s var(--ease), transform 1.6s var(--ease), opacity 1.2s ease;
}
.polaroid.p2 .polaroid-inner, .polaroid.p7 .polaroid-inner{
  transition:width 1.6s var(--ease), height 1.6s var(--ease), padding 1.6s var(--ease), background-color 1.6s var(--ease), box-shadow 1.6s var(--ease);
}

/* etapa 1 da passagem 2→3 (ver playHeroCenterPolaroidHide no JS): todo o
   resto some e a foto do centro/topo fica sozinha — e, nesse meio tempo,
   para de balançar e se endireita (sem rotação, escala 1) sem pressa.
   Assim, na etapa 2 (.is-becoming-panel), ela já parte reta, do tamanho
   real, e só cresce/desliza pra direita — sem "pulo" de rotação/escala.
   Vem ANTES da regra .is-becoming-panel abaixo (mesma especificidade),
   pra que o transform:none dela continue valendo. */
.hero-manifesto-reveal .polaroid.is-focused{
  transform:translate(-50%,-50%);
  transition:top 1.6s var(--ease), left 1.6s var(--ease), width 1.6s var(--ease), height 1.6s var(--ease), transform .9s var(--ease), opacity 1.2s ease;
}
.hero-manifesto-reveal .polaroid.is-focused .polaroid-inner{
  animation:none;
}

.polaroid-inner.is-fading-out{
  background-color:transparent;
  box-shadow:0 0 0 transparent;
}

/* junto com a moldura sumindo acima, a própria foto cresce e se
   posiciona na direita da tela, ocupando toda a altura — do jeito que ela
   vai ficar quando virar o painel da Sobre de verdade (.sobre-media, mesma
   largura de 44%), só que já acontecendo aqui, ainda dentro do Manifesto.
   Usa left+width (nunca right) pra garantir a borda direita encostada —
   left:56% + width:44% = 100% = encostado na borda, e assim dá pra
   transicionar o "left" suavemente (ida e volta) em vez de trocar de
   propriedade (left→right não anima, "auto" não interpola). Precisa de
   mais especificidade que ".polaroid.p2"/".p7" (inclusive a variante do
   media query do desktop) pra vencer o top/left deles — por isso o
   seletor com ".hero-manifesto-reveal" na frente. */
.hero-manifesto-reveal .polaroid.is-becoming-panel{
  top:0; left:56%;
  width:44%;
  height:100%;
  transform:none; /* solta do rotate/scale/translate(-50%,-50%) do estado espalhado */
  z-index:5; /* acima do resto do conteúdo do painel (manifesto-content:2,
                polaroid-scatter:0) — ver .is-center-polaroid-panel abaixo,
                que faz esse resto sumir junto de qualquer forma */
}
.hero-manifesto-reveal .polaroid.is-becoming-panel .polaroid-inner{
  width:100%;
  height:100%;
  padding:0;
  animation:none; /* para o balanço — um painel grande não fica balançando */
}
.hero-manifesto-reveal .polaroid.is-becoming-panel .polaroid-inner img{
  width:100%;
  height:100%;
  aspect-ratio:auto; /* solta do 4/5 fixo — o object-fit:cover cuida do resto */
}
@media (max-width:640px){
  /* celular: em vez de virar um painel lateral (fica fino demais numa
     tela estreita), ocupa a LARGURA toda e se posiciona no TOPO — do
     jeito que o .sobre-media real também se comporta no mobile (ali ele
     não é mais absoluto/lateral, vira só o primeiro item da coluna,
     largura cheia, ~38% da altura, ver .sobre-media/.sobre no CSS) */
  .hero-manifesto-reveal .polaroid.is-becoming-panel{
    top:0; left:0;
    width:100%;
    height:38%;
  }
}

/* degradê entre a foto e o texto — mesma ideia do .sobre-media-overlay
   real (escurece só a borda mais perto do texto, some indo pra dentro da
   foto). Existe sempre em TODO .polaroid (opacity:0 por padrão, inofensivo
   nos outros 6) e só aparece quando esse vira painel. */
.polaroid::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.6s ease;
}
.polaroid.is-becoming-panel::after{
  opacity:1;
}
@media (min-width:641px){
  /* painel à direita, texto à esquerda — escurece a borda ESQUERDA da foto */
  .polaroid.is-becoming-panel::after{
    background:linear-gradient(90deg, rgba(11,11,12,.65) 0%, rgba(11,11,12,0) 30%);
  }
}
@media (max-width:640px){
  /* painel em cima, texto embaixo — escurece a borda DE BAIXO da foto.
     Parte escura maior/mais forte que no PC: no celular a moldura é bem
     mais baixa (38% da altura), então precisa de mais contraste pro texto
     embaixo continuar legível. */
  .polaroid.is-becoming-panel::after{
    background:linear-gradient(180deg, rgba(11,11,12,0) 30%, rgba(11,11,12,.8) 100%);
  }
}

/* enquanto a foto cresce, todo o RESTO do conteúdo (texto do manifesto,
   os outros polaroids e a moldura/foto do vídeo que já pousou) vai
   sumindo junto — ver .hero.is-center-polaroid-panel em js/main.js.
   animation:none nas duas primeiras é essencial (mesmo motivo do
   .polaroid-inner.is-fading-out lá em cima): sem isso, a animação de
   entrada com fill:forwards continua segurando opacity:1 por cima de
   qualquer opacity:0 estático. E precisam de mais especificidade que as
   próprias regras de entrada (.hero.is-manifesto-revealed ..., 3 classes)
   pra vencer — por isso as duas classes juntas no .hero. */
.hero.is-manifesto-revealed.is-center-polaroid-focus .manifesto-content{
  animation:none;
  opacity:0;
  transition:opacity .8s ease;
}
.hero.is-manifesto-revealed.is-center-polaroid-focus .polaroid:not(.is-focused){
  animation:none;
  opacity:0;
  transition:opacity .8s ease;
}
.hero.is-manifesto-revealed.is-center-polaroid-focus .hero-polaroid-frame,
.hero.is-manifesto-revealed.is-center-polaroid-focus .hero-polaroid-photo{
  opacity:0;
}

/* texto da Sobre (mesmo conteúdo de #section-sobre — eyebrow/título/texto/
   destaques, classes reaproveitadas de lá) aparecendo na área que não tem
   a foto: esquerda no PC (56%, mesma largura complementar ao painel de
   44%), embaixo no celular (62%, complementar aos 38% do painel). Só
   entra DEPOIS que o fundo já terminou de ficar preto — daí o delay igual
   à duração de .is-center-polaroid-panel (mesmo esquema do
   .diferencial-content, que também tem delay pra só entrar depois do
   painel já ter assentado). */
.hero-sobre-preview{
  position:absolute; inset:0;
  z-index:3; /* acima do manifesto-content/polaroid-scatter (2/0), abaixo
                da foto que virou painel (5) */
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(10px, 1.6vh, 16px);
  color:var(--color-white);
  text-align:left;
  padding:clamp(18px, 4vh, 28px) clamp(20px, 6vw, 36px);
  opacity:0;
  pointer-events:none;
  transition:opacity 1s ease 1.6s, transform 1.6s ease;
}
.hero.is-manifesto-revealed.is-center-polaroid-panel .hero-sobre-preview{
  opacity:1;
  pointer-events:auto;
}
@media (min-width:641px){
  .hero-sobre-preview{
    align-items:flex-start;
    inset:auto;
    top:0; left:0;
    width:56%;
    height:100%;
    padding:0 clamp(40px, 6vw, 90px) 0 clamp(100px, 13vw, 200px);
  }
}
@media (max-width:640px){
  .hero-sobre-preview{
    inset:auto;
    bottom:0; left:0;
    width:100%;
    height:62%;
  }
}

/* passo seguinte, mesmo esquema "3 pra 4" que a seção Sobre de verdade já
   tem (ver playSobreImageExpand/Collapse mais abaixo no JS): a foto (que
   já tinha virado painel) toma a tela toda — empurrando o texto da Sobre
   pra fora — e vira P&B, enquanto o texto do Diferencial revela por cima.
   Durações no ritmo desta sequência (1,6s), ver HERO_SOBRE_EXPAND_MS/
   HERO_SOBRE_BW_MS no JS. */
.hero.is-sobre-preview-expanded .polaroid.is-becoming-panel{
  left:0;
  width:100%;
}
@media (max-width:640px){
  .hero.is-sobre-preview-expanded .polaroid.is-becoming-panel{ height:100%; }
}
.hero.is-manifesto-revealed.is-center-polaroid-panel.is-sobre-preview-expanded .hero-sobre-preview{
  opacity:0;
  pointer-events:none;
}
/* empurra de vez pra fora da tela, no mesmo ritmo (1,6s) que a foto
   cresce — celular pra baixo, PC pra esquerda */
@media (min-width:641px){
  .hero.is-manifesto-revealed.is-center-polaroid-panel.is-sobre-preview-expanded .hero-sobre-preview{
    transform:translateX(-120%);
  }
}
@media (max-width:640px){
  .hero.is-manifesto-revealed.is-center-polaroid-panel.is-sobre-preview-expanded .hero-sobre-preview{
    transform:translateY(120%);
  }
}
.hero-manifesto-reveal .polaroid.is-becoming-panel .polaroid-inner img{
  transition:filter .5s ease;
}
.hero.is-sobre-preview-bw .polaroid.is-becoming-panel .polaroid-inner img{
  filter:grayscale(1);
}

/* mesmo texto/painel do Diferencial (#section-sobre), reaproveitando as
   classes .diferencial-* — só o "invólucro" (posição/fundo/overflow) é
   novo, escopado pro contexto da Hero */
.hero-diferencial-preview{
  position:absolute; inset:0;
  z-index:20; /* acima de tudo dentro do painel do Manifesto */
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  text-align:left;
  color:var(--color-white);
  background:linear-gradient(0deg, rgba(11,11,12,.8) 0%, rgba(11,11,12,.4) 45%, rgba(11,11,12,0) 80%);
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity .6s ease, transform .6s ease-in;
}
.hero.is-sobre-preview-diferencial-revealed .hero-diferencial-preview{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.hero.is-sobre-preview-diferencial-revealed .diferencial-content{
  opacity:1;
  transform:translateY(0);
}
/* só nessa cópia (pré-visualização dentro da Hero): "Direção: Valter" no
   canto superior ESQUERDO, não direito como na .diferencial-credit real */
.hero-diferencial-preview .diferencial-credit{
  right:auto;
  left:clamp(20px, 5vw, 56px);
}

/* passo seguinte: com o Diferencial já revelado, rolar de novo só faz o
   texto sumir — saindo por baixo da tela (não só um fade parado) — a foto
   em P&B fica sozinha ocupando a tela toda (ver playHeroDiferencialTextHide/
   Show no JS). Mais específico que a regra de reveal acima (3 classes)
   pra vencer mesmo com a mesma especificidade. */
.hero.is-sobre-preview-diferencial-revealed.is-diferencial-text-hidden .hero-diferencial-preview{
  opacity:0;
  pointer-events:none;
  transform:translateY(100%);
}

/* último passo: assim que o texto do Diferencial termina de sumir, revela também
   o conteúdo planejado pra próxima seção (Criações — mesmo conteúdo/
   classes de #section-criacoes) por cima de tudo, num carrossel próprio
   (ver .criacoes-carousel-slot mais abaixo). Ver playHeroDiferencialTextHide no JS. */
.hero-criacoes-preview{
  position:absolute; inset:0;
  z-index:24; /* acima do .hero-diferencial-preview (20) */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(14px, 2.6vh, 30px);
  padding:clamp(16px, 3.5vh, 34px) clamp(16px, 4vw, 40px);
  background:#faf8f4;
  color:#161513;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:opacity 1.6s ease; /* devagar — a P&B por baixo "demora" a sumir de vista enquanto esse painel cobre a tela */
}
.hero.is-criacoes-preview-revealed .hero-criacoes-preview{
  opacity:1;
  pointer-events:auto;
}

/* carrossel de 1 card por vez (4 em cima, 3 embaixo) — cada slot é uma
   janela de tamanho fixo, os cards dela ficam sobrepostos
   (position:absolute). Avança no SCROLL: o JS (criacoesStep/
   renderCriacoesCarousel, chamado a partir do goTo) troca as classes
   is-before/is-active/is-after de acordo com o data-step de cada card
   comparado ao passo atual — a transition cuida do cross-fade entre um
   estado e outro. Cards menores que a versão de grade real
   (.criacoes-grid), com fonte e respiro reduzidos junto (ver overrides
   abaixo). Trajeto em elipse: como se cada card estivesse preso a uma
   roda-gigante cujo eixo fica FORA da tela — em cima (acima do topo) pro
   slide de cima, embaixo (abaixo da base) pro de baixo. Por isso um card
   ainda não alcançado (is-after) ou já passado (is-before) fica deslocado
   (translateY) PRA LONGE do centro da tela (rumo ao eixo) e rotacionado
   (como se estivesse preso tangente à roda), e só o is-active fica reto
   (translateY:0, sem rotação, escala cheia), de frente pra câmera — como
   se tivesse acabado de passar pelo ápice do arco. */
.criacoes-carousel-slot{
  position:relative;
  width:min(230px, 60vw);
  height:clamp(185px, 26vh, 235px); /* um pouco mais alto — sobra pra descrição vem daqui, não de encolher a imagem */
}
/* SEM padding no card (diferente da grade real): a versão real usa uma
   sangria por margem negativa pra imagem "furar" o padding e chegar na
   borda — aqui, com o card bem menor, qualquer arredondamento entre o
   padding e a margem negativa (clamp com vw/vh, cada um arredondando
   diferente conforme o viewport) deixava uma frestinha e a imagem não
   batia 100% na borda. Mais simples e à prova disso: card sem padding
   nenhum, a <img> em width:100% direto (sem sangria, sem cálculo pra
   acertar) — e quem ganha padding próprio é só o nome (h3), senão ele
   ficaria colado na borda do card. */
.criacoes-carousel-slot .criacoes-card{
  position:absolute; inset:0;
  display:flex;
  flex-direction:column;
  padding:0;
}
.criacoes-carousel-slot .criacoes-card-img{
  /* diferente da versão da grade real (flex:none + aspect-ratio:4/3 fixo):
     aqui o card é baixo, então uma altura fixa por proporção facilmente
     estourava a altura do card (empurrando o nome pra fora, visível). Em
     vez disso, a imagem cresce (flex:1) até preencher toda a altura que
     sobrar depois do nome — min-height:0 é o que permite ela encolher
     menos que sua altura "natural" dentro do flex, e aspect-ratio:auto
     solta da proporção herdada; o object-fit:cover cuida do recorte. */
  flex:1 1 auto;
  min-height:0;
  aspect-ratio:auto;
  width:100%;
  margin:0;
}
.criacoes-carousel-slot .criacoes-card h3{
  flex:none; /* nunca encolhe — é ele (+ a descrição abaixo) quem sobra abaixo da imagem */
  margin:0;
  padding:clamp(6px, 1vh, 9px) clamp(8px, 1.2vw, 12px) 0;
  font-size:calc(clamp(10.5px, .95vw, 12.5px) * var(--fs-text, 1));
}
/* descrição breve, cortada em 2 linhas (line-clamp) — card pequeno demais
   pra caber o texto corrido inteiro; a versão completa continua em
   #section-criacoes, na grade de verdade */
.criacoes-carousel-slot .criacoes-card p{
  flex:none;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  margin:2px 0 0;
  padding:0 clamp(8px, 1.2vw, 12px) clamp(6px, 1vh, 9px);
  font-size:calc(clamp(8.5px, .7vw, 10px) * var(--fs-text, 1));
  line-height:1.35;
}

.criacoes-carousel-slot .criacoes-card{
  opacity:0;
  pointer-events:none;
  transition:opacity .6s ease, transform .6s ease;
}
.criacoes-carousel-slot .criacoes-card.is-active{
  opacity:1;
  pointer-events:auto;
  transform:translate(0, 0) rotate(0deg) scale(1);
}
/* de cima: eixo da roda fora da tela, EM CIMA — quem ainda não chegou
   (is-after) espera deslocado pra cima e pra DIREITA (entra vindo de lá);
   quem já passou (is-before) fica deslocado pra cima e pra ESQUERDA (é
   pra lá que teria saído) */
.criacoes-carousel-top .criacoes-card.is-after{  transform:translate(90px, -46px) rotate(12deg) scale(.78); }
.criacoes-carousel-top .criacoes-card.is-before{ transform:translate(-90px, -46px) rotate(-12deg) scale(.78); }
/* de baixo: eixo da roda fora da tela, EMBAIXO — espelhado (deslocado pra
   baixo, não pra cima) e com os lados invertidos (entra pela esquerda) */
.criacoes-carousel-bottom .criacoes-card.is-after{  transform:translate(-90px, 46px) rotate(-12deg) scale(.78); }
.criacoes-carousel-bottom .criacoes-card.is-before{ transform:translate(90px, 46px) rotate(12deg) scale(.78); }

/* no PC: em vez de em cima/embaixo do título, um carrossel à ESQUERDA e
   outro à DIREITA dele (sobra largura, falta altura). A ordem no HTML
   (top → título → bottom) já vira esquerda → título → direita com o
   flex em linha. A "roda-gigante" gira junto: o eixo de cada uma passa a
   ficar fora da tela na LATERAL (esquerda pro slot da esquerda, direita
   pro da direita) — mesmos deslocamentos/rotações de cima, só girados
   90° (o que era "pra cima/baixo" vira "pra esquerda/direita"). */
@media (min-width:641px){
  .hero-criacoes-preview{
    --slot-w:clamp(250px, 23vw, 400px);   /* card ativo (centro do arco) */
    --slot-h:clamp(280px, 42vh, 410px);
    --title-w:min(400px, 26vw);
    --row-gap:clamp(28px, 4vw, 72px);
    --side-scale:.58;                     /* cards de cima/baixo */
    flex-direction:row;
    gap:var(--row-gap);
  }
  .hero-criacoes-preview .criacoes-content{
    flex:none;
    width:var(--title-w);
    max-width:none;
  }
  .criacoes-carousel-slot{
    flex:none;
    width:var(--slot-w);
    height:var(--slot-h);
  }
  /* fontes maiores no PC — no tamanho de celular elas ficavam pequenas
     demais pra ler num card desse tamanho */
  .criacoes-carousel-slot .criacoes-card h3{
    padding:clamp(10px, 1.4vh, 14px) clamp(12px, 1.2vw, 18px) 0;
    font-size:calc(clamp(14px, 1.15vw, 19px) * var(--fs-text, 1));
  }
  .criacoes-carousel-slot .criacoes-card p{
    margin-top:4px;
    padding:0 clamp(12px, 1.2vw, 18px) clamp(10px, 1.4vh, 14px);
    font-size:calc(clamp(12px, .85vw, 15px) * var(--fs-text, 1));
    line-height:1.4;
  }
  /* todos os cards de cada lado visíveis ao mesmo tempo, num arco de
     elipse cujo centro fica fora da tela, na lateral: o ativo (grande,
     opaco) no ponto do arco mais perto do título; o anterior (is-before)
     em cima e o próximo (is-after) embaixo, menores e transparentes,
     recuados pra borda da tela; o 4º (is-far) "atrás da roda", escondido
     no ponto mais distante. A cada passo a roda gira (cards sobem) e dá a
     volta (distância circular, ver applyCriacoesCarouselStep no JS). */
  .hero-criacoes-preview{
    /* recuo horizontal rumo à borda: o máximo que ainda deixa o card
       lateral inteiro na tela (16px de folga) — calculado a partir do
       centro do slot (metade da tela − título/2 − gap − card/2) menos
       meia largura do card lateral (side-scale/2 ≈ .29) */
    --arc-x:max(60px, calc(50vw - var(--title-w) / 2 - var(--row-gap) - var(--slot-w) * .79 - 16px));
    /* afastamento vertical: o suficiente pros cards de cima/baixo nunca
       encostarem no ativo — (1 + side-scale) / 2 da altura + folga */
    --arc-y:calc(var(--slot-h) * .79 + 14px);
  }
  .criacoes-carousel-slot .criacoes-card{
    transition:opacity .7s var(--ease), transform .7s var(--ease);
  }
  .criacoes-carousel-slot .criacoes-card.is-before,
  .criacoes-carousel-slot .criacoes-card.is-after{ opacity:.35; }
  .criacoes-carousel-slot .criacoes-card.is-far{ opacity:0; }

  .criacoes-carousel-top .criacoes-card.is-before{ transform:translate(calc(-1 * var(--arc-x)), calc(-1 * var(--arc-y))) scale(var(--side-scale)); }
  .criacoes-carousel-top .criacoes-card.is-after{  transform:translate(calc(-1 * var(--arc-x)), var(--arc-y)) scale(var(--side-scale)); }
  .criacoes-carousel-top .criacoes-card.is-far{    transform:translate(calc(-2 * var(--arc-x)), 0) scale(.4); }

  .criacoes-carousel-bottom .criacoes-card.is-before{ transform:translate(var(--arc-x), calc(-1 * var(--arc-y))) scale(var(--side-scale)); }
  .criacoes-carousel-bottom .criacoes-card.is-after{  transform:translate(var(--arc-x), var(--arc-y)) scale(var(--side-scale)); }
  .criacoes-carousel-bottom .criacoes-card.is-far{    transform:translate(calc(2 * var(--arc-x)), 0) scale(.4); }
}

/* clone flutuante da foto do último card (Pré-Wedding) virando o novo
   fundo da página — ver playCriacoesCardsHide/Show no JS. position:fixed
   (coordenadas de viewport, não precisa de conta nenhuma pra casar com o
   getBoundingClientRect do card de origem) + transition faz o
   crescimento/encolhimento; some do DOM assim que chega no tamanho final
   (ou de volta). É um DIV com a <img> dentro (não a <img> direto) só pra
   caber o degradê do ::after abaixo — <img> não aceita conteúdo gerado. */
.criacoes-bg-grow{
  position:fixed;
  z-index:26; /* acima do .hero-criacoes-preview (24), que some por baixo */
  overflow:hidden;
  pointer-events:none;
  transition:top 1.6s ease, left 1.6s ease, width 1.6s ease, height 1.6s ease;
}
.criacoes-bg-grow img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
/* degradê forte que só aparece quando a foto encolhe pra metade de baixo
   (ver playExperienciaPhotoDock no JS) — mescla o topo dela com o preto
   do fundo que fica exposto acima, em vez de um corte seco entre os dois */
.criacoes-bg-grow::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, #0b0b0c 0%, rgba(11,11,12,.85) 16%, rgba(11,11,12,0) 45%);
  opacity:0;
  transition:opacity 1s ease;
}
.hero.is-experiencia-photo-docked .criacoes-bg-grow::after{
  opacity:1;
}
/* PC: nas cenas de "Quem está por trás da história" o fundo é sempre
   preto e branco — o do Valter (a foto que docka embaixo) vira P&B junto
   com o docking; os do Wagner/Kaique (.hero-experiencia-bg-static) já
   nascem P&B */
@media (min-width:641px){
  .criacoes-bg-grow img{ transition:filter 1s ease; }
  .hero.is-experiencia-photo-docked .criacoes-bg-grow img,
  .hero-experiencia-bg-static img{ filter:grayscale(1); }
}

/* figura decorativa (PNG sem fundo) — ancorada no CHÃO da tela (maior,
   pisando na foto docada embaixo), não mais centralizada no meio do
   viewport. Some por padrão, só revela DEPOIS que a foto termina de
   pousar embaixo — não junto com o fundo escurecendo
   (is-experiencia-photo-docked), classe própria
   (is-experiencia-portrait-revealed) acionada com atraso no JS. */
.hero-experiencia-portrait{
  position:absolute;
  left:50%;
  bottom:0;
  z-index:29; /* acima de tudo nesse trecho: hero-experiencia-reveal(28), clone(26) */
  height:58vh;
  max-width:85vw;
  /* já nasce no tamanho final (sem scale) — só aparece com fade, em vez
     de surgir pequena e ir crescendo */
  transform:translateX(-50%);
  opacity:0;
  pointer-events:none;
  transition:opacity 1.2s ease;
}
/* PC: figura bem maior, ocupando quase a altura toda a partir do chão */
@media (min-width:641px){
  /* o mais alto possível sem encostar no crédito/bio lá em cima (~310px) */
  .hero-experiencia-portrait{ height:clamp(58vh, calc(100vh - 310px), 70vh); }
}
.hero-experiencia-portrait img{
  display:block;
  height:100%;
  width:auto;
  max-width:100%;
  object-fit:contain;
  /* blur bem sutil (sub-pixel) suaviza qualquer serrilhado que sobre do
     recorte, sem borrar o rosto de verdade; o drop-shadow disfarça o que
     sobrar, dando profundidade também */
  filter:blur(.5px) drop-shadow(0 10px 26px rgba(0,0,0,.5));
}
.hero.is-experiencia-portrait-revealed .hero-experiencia-portrait{
  opacity:1;
}
/* celular: ancorada no CHÃO da tela (bottom:0), crescendo pra cima — bem
   mais alta que no PC, e agora é a ALTURA que manda no tamanho (não mais
   a largura livre): se a proporção da foto pedir mais largura do que os
   100% disponíveis, corta as laterais (object-fit:cover) em vez de
   encolher a foto inteira pra caber. */
@media (max-width:640px){
  .hero-experiencia-portrait{
    left:0;
    top:auto;
    bottom:0;
    width:100%;
    max-width:100%;
    height:75vh;
    transform:none;
  }
  .hero.is-experiencia-portrait-revealed .hero-experiencia-portrait{
    transform:none;
  }
  .hero-experiencia-portrait img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top; /* prioriza a cabeça — corta de baixo, não de cima */
  }
}

/* crédito do Valter — surge junto com a figura (mesma classe
   is-experiencia-portrait-revealed), encostado no topo da seção (não
   centralizado como a figura) pra não brigar de espaço com ela. */
.hero-experiencia-credit{
  position:absolute;
  top:0; left:0; right:0;
  z-index:29; /* mesma camada da figura — não se sobrepõem (topo vs. centro) */
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(4px, 1vh, 8px);
  padding:clamp(20px, 5vh, 40px) clamp(20px, 6vw, 64px) 0;
  color:var(--color-white);
  text-align:center;
  opacity:0;
  transform:translateY(-16px);
  pointer-events:none;
  transition:opacity 1.2s ease, transform 1.2s var(--ease);
}
.hero.is-experiencia-portrait-revealed .hero-experiencia-credit{
  opacity:1;
  transform:translateY(0);
}
.experiencia-credit-name{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:calc(clamp(28px, 5vw, 46px) * var(--fs-title, 1));
  line-height:1;
}
.experiencia-credit-role{
  margin:0;
  font-size:calc(clamp(11px, 1vw, 13px) * var(--fs-text, 1));
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--color-gold);
  font-weight:600;
}
.experiencia-credit-tagline{
  margin:0;
  font-size:calc(clamp(12px, 1.05vw, 14px) * var(--fs-text, 1));
  color:var(--color-white-dim);
  max-width:46ch;
}
.experiencia-credit-bio{
  margin:0;
  font-size:calc(clamp(11.5px, 1vw, 13.5px) * var(--fs-text, 1));
  line-height:1.6;
  color:var(--color-white-dim);
  max-width:52ch;
}
/* celular: a figura já é enorme (75vh, ancorada no chão) — sobra pouco
   espaço em cima, então corta pro essencial (nome + função), sem
   tagline/bio */
@media (max-width:640px){
  .hero-experiencia-credit{
    gap:2px;
    /* mais respiro no topo que no PC — encostado bem na borda ficava
       apertado perto do entalhe/câmera de alguns celulares */
    padding:clamp(48px, 12vh, 84px) clamp(16px, 5vw, 28px) 0;
  }
  .experiencia-credit-name{ font-size:calc(clamp(22px, 7vw, 30px) * var(--fs-title, 1)); }
  .experiencia-credit-tagline,
  .experiencia-credit-bio{ display:none; }
}

/* "cena" Valter/Wagner/Kaique: um wrapper de tela cheia por pessoa, cada
   um com a própria figura+crédito dentro (e, no caso do Valter, o fundo
   docado também — ver reparenting em playCriacoesCardsHide no JS).
   transform: translateX(0) (não "none") é proposital: só assim esse
   wrapper vira o "containing block" do fundo do Valter (position:fixed,
   mas dentro de um ancestral com transform sempre ligado — mesmo motivo
   do .fp-section, ver comentário lá em cima) e o carrega junto quando
   desliza. z-index 27 — acima do .hero-criacoes-preview (24, que ainda
   pode estar esmaecendo quando o fundo do Valter nasce aqui dentro), mas
   ABAIXO do .hero-experiencia-reveal (28): esse painel (título + 5
   passos) ainda precisa aparecer por cima da foto crescendo/cheia de
   tela, bem antes de qualquer pessoa entrar em cena — z-index maior que
   28 aqui tampava ele por engano.

   Troca entre pessoas: efeito "empurrão" de carrossel — cada cena tem uma
   posição --i própria (0=Valter, 1=Wagner, 2=Kaique, ver classes
   abaixo); --experiencia-active (setada no JS via
   sections[0].style.setProperty, ver setExperienciaPersonIndex) é a
   pessoa atual. A posição de cada cena é (--i - --experiencia-active) ×
   100% — quem está "depois" da atual fica parada à direita, fora da
   tela, esperando; quem já passou fica parada à esquerda; a atual fica em
   0. Mudar --experiencia-active anima TODAS de uma vez, na mesma direção,
   como se a próxima empurrasse a anterior pra fora. Generaliza pra
   quantas pessoas quiser sem precisar de uma classe nova por transição. */
.hero-experiencia-person{
  position:absolute; inset:0;
  z-index:27;
  pointer-events:none; /* nenhuma dessas cenas tem conteúdo clicável */
  --d:calc(var(--i) - var(--experiencia-active, 0)); /* distância até a pessoa atual */
  /* mesma lista de funções do modo "cards" abaixo (perspective/translate/
     rotate/scale), só que neutra — assim a troca entre os dois interpola
     função a função, em vez de cair numa interpolação de matriz torta */
  transform:perspective(2400px) translateX(calc(var(--d) * 100%)) translateZ(0px) rotateY(0deg) scale(1);
  transition:transform .8s var(--ease), border-radius .8s var(--ease), box-shadow .8s var(--ease);
}
/* troca de pessoa (ver playExperienciaPersonNext/Prev no JS), em 3
   tempos: 1) com essa classe, cada cena (fundo + figura + crédito)
   encolhe e vira um card de uma fileira CURVA em 3D, tipo carrossel
   cilíndrico visto por dentro — o card do centro de frente, os vizinhos
   mais perto da câmera e girados pra dentro; 2) troca a pessoa ativa e a
   fileira rola pela curva; 3) tira a classe e o card do centro cresce de
   volta pra tela cheia. Fundo preto próprio só aqui: em tela cheia quem
   pinta o preto de cima é o painel por trás. */
.hero.is-experiencia-cards .hero-experiencia-person{
  background:#0b0b0c;
  overflow:hidden;
  border-radius:22px;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 50px 110px -20px rgba(0,0,0,.8);
  /* encolhe só um pouco (78%) — o suficiente pra virar card e mostrar
     a beirada dos vizinhos na curva, sem ficar pequeno demais */
  transform:
    perspective(2400px)
    translateX(calc(var(--d) * 84%))
    translateZ(calc(var(--d) * var(--d) * 120px))
    rotateY(calc(var(--d) * -24deg))
    scale(.78);
}
@media (max-width:640px){
  .hero.is-experiencia-cards .hero-experiencia-person{
    transform:
      perspective(1600px)
      translateX(calc(var(--d) * 88%))
      translateZ(calc(var(--d) * var(--d) * 80px))
      rotateY(calc(var(--d) * -24deg))
      scale(.82);
  }
}
.hero-experiencia-person-valter{ --i:0; }
.hero-experiencia-person-wagner{ --i:1; }
.hero-experiencia-person-kaique{ --i:2; }

/* fundo do Wagner/Kaique: estático (sem FLIP/JS — já nasce docado, só
   desliza junto com o resto da cena, carregado pelo transform do wrapper
   acima). Mesma posição "docada" que o fundo do Valter (.criacoes-bg-grow)
   ganha em playExperienciaPhotoDock — 50% no PC, 60% no celular. Cada um
   com a própria foto (a do Kaique é diferente da do Wagner). */
.hero-experiencia-bg-static{
  position:absolute;
  left:0; right:0; bottom:0;
  top:50%;
  overflow:hidden;
}
.hero-experiencia-bg-static img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
/* mesmo degradê forte do fundo do Valter (.criacoes-bg-grow::after) —
   mescla o topo da foto com o preto que sobra acima dela, em vez de um
   corte seco entre os dois. Sempre ligado (sem depender de classe): essa
   foto já nasce docada, não precisa esperar nenhum passo pra escurecer. */
.hero-experiencia-bg-static::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, #0b0b0c 0%, rgba(11,11,12,.85) 16%, rgba(11,11,12,0) 45%);
}
@media (max-width:640px){
  .hero-experiencia-bg-static{ top:40%; }
}

/* a figura/crédito do Wagner e do Kaique (mesmas classes do Valter,
   reaproveitadas) NÃO seguem o fade genérico de
   is-experiencia-portrait-revealed — quem controla a entrada/saída da
   cena inteira de cada um é o wrapper acima (translateX), então aqui
   elas ficam sempre "prontas" (opacity:1, já no lugar final) por baixo do
   pano; enquanto o wrapper está fora da tela, isso fica invisível de
   qualquer jeito. */
.hero-experiencia-person-wagner .hero-experiencia-portrait,
.hero-experiencia-person-kaique .hero-experiencia-portrait{
  opacity:1;
  transform:translateX(-50%);
}
.hero-experiencia-person-wagner .hero-experiencia-credit,
.hero-experiencia-person-kaique .hero-experiencia-credit{
  opacity:1;
  transform:translateY(0);
}
@media (max-width:640px){
  .hero-experiencia-person-wagner .hero-experiencia-portrait,
  .hero-experiencia-person-kaique .hero-experiencia-portrait{
    transform:none;
  }
}

/* último passo na cena do Kaique (ver playKaiquePortraitHide no JS):
   rolar de novo com ele já em cena não troca de pessoa (é a última) —
   em vez disso só a FIGURA dele some, deixando o fundo (bokeh) sozinho
   ocupando a cena. Só a figura tem transition própria aqui (opacity:1
   acima não tinha nenhuma, por nascer sempre "pronta" - ver comentário);
   crédito e fundo ficam como estão. */
.hero-experiencia-person-kaique .hero-experiencia-portrait{
  transition:opacity .6s var(--ease);
}
.hero.is-experiencia-kaique-portrait-hidden .hero-experiencia-person-kaique .hero-experiencia-portrait{
  opacity:0;
}

/* ================= PACOTES E EXPERIÊNCIAS (dentro da Hero) =================
   depois do Kaique (figura já sumida), mesmo esquema das outras etapas:
   1) a foto de fundo dele, que estava "docada" na metade de baixo, cresce
      até a tela cheia e o crédito dele some (.is-pacotes-bg-full);
   2) o painel com os 4 pacotes + adicionais revela por cima
      (.is-pacotes-revealed), com os cards entrando um a um.
   Ver playPacotesReveal/Hide no JS. */
.hero-experiencia-person-kaique .hero-experiencia-bg-static{
  transition:top 1.2s var(--ease);
}
.hero-experiencia-person-kaique .hero-experiencia-bg-static::after{
  transition:opacity 1.2s var(--ease);
}
.hero.is-pacotes-bg-full .hero-experiencia-person-kaique .hero-experiencia-bg-static{ top:0; }
.hero.is-pacotes-bg-full .hero-experiencia-person-kaique .hero-experiencia-bg-static::after{ opacity:0; }
.hero-experiencia-person-kaique .hero-experiencia-credit{
  transition:opacity .6s ease;
}
.hero.is-pacotes-bg-full .hero-experiencia-person-kaique .hero-experiencia-credit{ opacity:0; }

.hero-pacotes-reveal{
  position:absolute; inset:0;
  z-index:30; /* acima das cenas das pessoas (27) e do painel da Experiência (28) */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(14px, 2.6vh, 28px);
  padding:clamp(24px, 5vh, 56px) clamp(16px, 4vw, 64px);
  /* escurece a foto (P&B) por trás o bastante pra leitura, mais forte
     em cima/embaixo, onde ficam título e adicionais */
  background:linear-gradient(180deg, rgba(11,11,12,.88) 0%, rgba(11,11,12,.52) 45%, rgba(11,11,12,.9) 100%);
  color:var(--color-white);
  opacity:0;
  pointer-events:none;
  transition:opacity .9s ease;
}
.hero.is-pacotes-revealed .hero-pacotes-reveal{
  opacity:1;
  pointer-events:auto;
}

.pacotes-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  max-width:min(900px, 92vw);
  text-align:center;
}
.pacotes-title{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:calc(clamp(20px, 2.4vw, 36px) * var(--fs-title, 1));
  line-height:1.15;
}

.pacotes-track{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(10px, 1.2vw, 20px);
  width:100%;
  max-width:1500px;
}
.pacote-card{
  --pad:clamp(14px, 1.6vw, 24px);
  display:flex;
  flex-direction:column;
  gap:clamp(6px, 1vh, 10px);
  padding:var(--pad);
  overflow:hidden; /* capa encosta nas bordas arredondadas do card */
  text-align:left;
  background:rgba(247,245,240,.05);
  border:1px solid rgba(247,245,240,.14);
  border-radius:14px;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
/* capa: sangra até as bordas do card (margens negativas = padding) */
.pacote-cover{
  display:block;
  width:calc(100% + 2 * var(--pad));
  max-width:none; /* senão a regra global de img (max-width:100%) corta a sangria da direita */
  height:clamp(110px, 19vh, 210px);
  margin:calc(-1 * var(--pad)) calc(-1 * var(--pad)) 4px;
  object-fit:cover;
  object-position:center 30%;
}
.pacote-num{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:calc(clamp(18px, 1.6vw, 26px) * var(--fs-title, 1));
  line-height:1;
  color:var(--color-gold);
}
.pacote-desc{
  margin:0;
  font-size:calc(clamp(11px, .85vw, 13.5px) * var(--fs-text, 1));
  line-height:1.45;
}
.pacote-label{
  margin-top:2px;
  font-size:calc(clamp(9px, .65vw, 10.5px) * var(--fs-text, 1));
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--color-gold);
}
/* "Tudo do Pacote 0X +": mesmo rótulo do "Inclui", um pouco mais forte */
.pacote-label-plus{
  color:var(--color-white);
}
.pacote-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.pacote-list,
.pacote-bonus{
  font-size:calc(clamp(10.5px, .78vw, 12.5px) * var(--fs-text, 1));
  line-height:1.4;
  color:var(--color-white-dim);
}
.pacote-list li{
  position:relative;
  padding-left:1.55em;
}
/* marcador: ícone de câmera (SVG inline como máscara, pintado com o
   dourado do site via background) no lugar do tracinho — acompanha o
   tamanho da fonte (em), então escala junto no PC/celular */
.pacote-list li::before{
  content:"";
  position:absolute;
  left:0; top:.22em;
  width:1.05em; height:1.05em;
  background:var(--color-gold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pacote-bonus{ margin:4px 0 0; }
.pacote-bonus span{
  margin-right:4px;
  font-size:.85em;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--color-gold);
}
.pacote-extra{
  margin:0 0 6px;
  font-size:calc(clamp(10px, .72vw, 11.5px) * var(--fs-text, 1));
  font-style:italic;
  color:rgba(247,245,240,.55);
}
.pacote-btn{
  margin-top:auto; /* botões alinhados na base, mesmo com listas de tamanhos diferentes */
  padding:clamp(9px, 1.2vh, 12px) 14px;
  letter-spacing:.1em;
}

.pacotes-adicionais{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px 18px;
}
.pacotes-adicionais-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}
.pacotes-adicionais-list li{
  padding:6px 13px;
  border:1px solid rgba(201,162,75,.5);
  border-radius:999px;
  font-size:calc(clamp(10.5px, .78vw, 12.5px) * var(--fs-text, 1));
}
.pacotes-note{
  margin:0;
  font-size:calc(clamp(10px, .72vw, 11.5px) * var(--fs-text, 1));
  color:rgba(247,245,240,.5);
}

/* entrada: título, depois os cards um a um, depois os adicionais */
.pacotes-header,
.pacote-card,
.pacotes-adicionais,
.pacotes-note{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease, transform .7s var(--ease);
}
.hero.is-pacotes-revealed .pacotes-header,
.hero.is-pacotes-revealed .pacote-card,
.hero.is-pacotes-revealed .pacotes-adicionais,
.hero.is-pacotes-revealed .pacotes-note{
  opacity:1;
  transform:translateY(0);
}
.hero.is-pacotes-revealed .pacotes-header{ transition-delay:.2s; }
.hero.is-pacotes-revealed .pacote-card:nth-child(1){ transition-delay:.35s; }
.hero.is-pacotes-revealed .pacote-card:nth-child(2){ transition-delay:.45s; }
.hero.is-pacotes-revealed .pacote-card:nth-child(3){ transition-delay:.55s; }
.hero.is-pacotes-revealed .pacote-card:nth-child(4){ transition-delay:.65s; }
.hero.is-pacotes-revealed .pacotes-adicionais,
.hero.is-pacotes-revealed .pacotes-note{ transition-delay:.8s; }

/* tablet/notebook estreito: 2 × 2 */
@media (min-width:641px) and (max-width:1100px){
  .pacotes-track{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .pacote-desc{ display:none; }
}
/* celular: os 4 cards numa faixa que rola pro lado (arrasta com o dedo,
   um card por vez — ver exceção no touchmove do JS), sem espremer */
@media (max-width:640px){
  .hero-pacotes-reveal{ justify-content:flex-start; padding-top:clamp(40px, 9vh, 72px); }
  .pacotes-track{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin:0 -16px;
    padding:0 16px 4px;
    width:calc(100% + 32px);
  }
  .pacotes-track::-webkit-scrollbar{ display:none; }
  .pacote-card{
    flex:0 0 82%;
    scroll-snap-align:center;
  }
  .pacotes-adicionais{ gap:8px; }
  .pacotes-adicionais-list li{ padding:5px 10px; }
}

/* ================= SEQUÊNCIA FINAL (Álbuns → CTA, dentro da Hero) =================
   cada passagem tem um movimento próprio (ver comentário no HTML e
   playAlbunsReveal… no JS). Convenção das classes no .hero, por etapa:
   · is-X-stage    → painel da etapa visível (o fundo dela);
   · is-X-revealed → conteúdo da etapa entrando/visível;
   · is-X-landed   → a foto voadora já pousou: mostra a foto de verdade.
   Ao avançar, a etapa anterior perde só o "revealed" (o conteúdo some)
   e mantém o "stage" (o fundo continua lá por baixo) — assim nunca
   aparece foto velha de etapas anteriores por trás das transições.
   Empilhamento (todos dentro de .hero-manifesto-reveal): Pacotes 30 →
   Álbuns 32 → Portfólio 34 → Áudio 38 (faixa de cinema 37 por baixo) →
   Feedbacks 39 → FAQ 44 (painel da foto 43 por baixo) → CTA 46. As fotos
   voadoras (.flow-clone) recebem o z-index certo de cada passagem no JS. */

/* foto voadora genérica — posição/tamanho em px ou vw/vh, animados */
.flow-clone{
  position:fixed;
  overflow:hidden;
  pointer-events:none;
  transition:top 1.6s var(--ease), left 1.6s var(--ease), width 1.6s var(--ease), height 1.6s var(--ease), border-radius 1.6s var(--ease), opacity .5s ease;
}
.flow-clone img{
  position:absolute;
  top:0; left:0;
  display:block;
  width:100%; height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center 30%;
  /* os pedaços da faixa (Áudio → Feedbacks) animam o recorte junto */
  transition:left 1.6s var(--ease), width 1.6s var(--ease);
}

/* ---------- ÁLBUNS E MEMÓRIAS: texto à esquerda, foto à direita ---------- */
.hero-albuns-reveal{
  position:absolute; inset:0;
  z-index:32;
  display:grid;
  grid-template-columns:56% 44%;
  background:var(--color-bg);
  color:var(--color-white);
  opacity:0;
  pointer-events:none;
  transition:opacity .6s ease;
}
.hero.is-albuns-stage .hero-albuns-reveal{ opacity:1; }
.hero.is-albuns-revealed .hero-albuns-reveal{ pointer-events:auto; }
.albuns-content{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:clamp(8px, 1.6vh, 14px);
  padding:clamp(24px, 6vh, 64px) clamp(28px, 5vw, 96px) clamp(24px, 6vh, 64px) clamp(20px, 7vw, 120px);
  text-align:left;
}
.albuns-title{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:calc(clamp(24px, 3.6vw, 52px) * var(--fs-title, 1));
  line-height:1.08;
}
.albuns-text{
  margin:0;
  max-width:560px;
  font-size:calc(clamp(13px, 1.1vw, 16px) * var(--fs-text, 1));
  line-height:1.6;
  color:var(--color-white-dim);
}
.albuns-list{
  list-style:none;
  margin:clamp(6px, 1.4vh, 14px) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(10px, 1.6vh, 16px) clamp(16px, 2vw, 28px);
  width:100%;
  max-width:620px;
}
.albuns-list li{
  padding-top:clamp(8px, 1.2vh, 12px);
  border-top:1px solid rgba(201,162,75,.6);
  font-size:calc(clamp(12px, .95vw, 14.5px) * var(--fs-text, 1));
  font-weight:600;
  letter-spacing:.04em;
  line-height:1.4;
}
.albuns-content > *{
  opacity:0;
  transform:translateX(-24px);
  transition:opacity .7s ease, transform .7s var(--ease);
}
.hero.is-albuns-revealed .albuns-content > *{ opacity:1; transform:translateX(0); }
.hero.is-albuns-revealed .albuns-content > :nth-child(1){ transition-delay:.1s; }
.hero.is-albuns-revealed .albuns-content > :nth-child(2){ transition-delay:.2s; }
.hero.is-albuns-revealed .albuns-content > :nth-child(3){ transition-delay:.32s; }
.hero.is-albuns-revealed .albuns-content > :nth-child(4){ transition-delay:.46s; }

/* ---------- PORTFÓLIO: quadros entram deslizando da direita ---------- */
.hero-portfolio-reveal{
  position:absolute; inset:0;
  z-index:34;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:clamp(12px, 2.4vh, 26px);
  padding:clamp(24px, 5vh, 56px) clamp(16px, 5vw, 80px);
  background:var(--color-bg);
  color:var(--color-white);
  opacity:0;
  pointer-events:none;
  transition:opacity .6s ease;
}
.hero.is-portfolio-stage .hero-portfolio-reveal{ opacity:1; }
.hero.is-portfolio-revealed .hero-portfolio-reveal{ pointer-events:auto; }
.portfolio-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
}
.portfolio-title{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:calc(clamp(22px, 2.8vw, 42px) * var(--fs-title, 1));
  line-height:1.1;
}
.portfolio-group{
  display:flex;
  flex-direction:column;
  gap:clamp(6px, 1vh, 10px);
  width:100%;
  max-width:1400px;
}
.portfolio-group-label{
  font-size:calc(clamp(10px, .75vw, 12px) * var(--fs-text, 1));
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--color-gold);
}
.portfolio-grid{ display:grid; gap:clamp(8px, 1vw, 16px); }
.portfolio-group-filmes .portfolio-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.portfolio-group-fotos  .portfolio-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.portfolio-tile{
  position:relative;
  margin:0;
  height:clamp(110px, 25vh, 260px);
  overflow:hidden;
  border-radius:10px;
  background:#161513;
}
.portfolio-tile img{
  display:block;
  width:100%; height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center 30%;
  transition:transform .8s var(--ease);
}
.portfolio-tile:hover img{ transform:scale(1.05); }
.portfolio-tile::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(11,11,12,.85) 0%, rgba(11,11,12,0) 55%);
  pointer-events:none;
}
.portfolio-tile figcaption{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:1;
  padding:clamp(10px, 1.4vh, 16px) clamp(12px, 1.2vw, 18px);
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:calc(clamp(13px, 1.1vw, 18px) * var(--fs-title, 1));
  line-height:1.15;
}
.portfolio-tile.is-film::before{
  content:"";
  position:absolute;
  left:50%; top:45%;
  z-index:1;
  width:clamp(38px, 3.4vw, 56px);
  height:clamp(38px, 3.4vw, 56px);
  transform:translate(-50%, -50%);
  border:1px solid rgba(247,245,240,.75);
  border-radius:50%;
  background:
    rgba(11,11,12,.35)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='%23f7f5f0'/%3E%3C/svg%3E")
    center / 55% no-repeat;
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}
/* entrada: título sobe; quadros chegam deslizando da direita, um a um,
   como cartas sendo distribuídas. O quadro-alvo (onde a foto dos Álbuns
   pousa) não se mexe — o JS mede o lugar final dele — e só aparece
   quando a foto pousa (.is-portfolio-landed, troca instantânea) */
.portfolio-header,
.portfolio-group-label,
.portfolio-tile:not([data-portfolio-target]){
  opacity:0;
  transition:opacity .7s ease, transform .8s var(--ease);
}
.portfolio-header,
.portfolio-group-label{ transform:translateY(14px); }
.portfolio-tile:not([data-portfolio-target]){ transform:translateX(90px); }
.portfolio-tile[data-portfolio-target]{ opacity:0; }
.hero.is-portfolio-landed .portfolio-tile[data-portfolio-target]{ opacity:1; }
.hero.is-portfolio-revealed .portfolio-header,
.hero.is-portfolio-revealed .portfolio-group-label,
.hero.is-portfolio-revealed .portfolio-tile:not([data-portfolio-target]){
  opacity:1;
  transform:translate(0, 0);
}
.hero.is-portfolio-revealed .portfolio-header{ transition-delay:.4s; }
.hero.is-portfolio-revealed .portfolio-group-filmes .portfolio-group-label{ transition-delay:.55s; }
.hero.is-portfolio-revealed .portfolio-group-filmes .portfolio-tile:nth-child(1){ transition-delay:.6s; }
.hero.is-portfolio-revealed .portfolio-group-filmes .portfolio-tile:nth-child(2){ transition-delay:.72s; }
.hero.is-portfolio-revealed .portfolio-group-filmes .portfolio-tile:nth-child(3){ transition-delay:.84s; }
.hero.is-portfolio-revealed .portfolio-group-fotos .portfolio-group-label{ transition-delay:.9s; }
.hero.is-portfolio-revealed .portfolio-group-fotos .portfolio-tile:nth-child(2){ transition-delay:1s; }
.hero.is-portfolio-revealed .portfolio-group-fotos .portfolio-tile:nth-child(3){ transition-delay:1.12s; }
.hero.is-portfolio-revealed .portfolio-group-fotos .portfolio-tile:nth-child(4){ transition-delay:1.24s; }

/* ---------- O PODER DO ÁUDIO: faixa de cinema no meio ---------- */
/* painel TRANSPARENTE: o preto vem do Portfólio por baixo (stage
   mantido), e a faixa (.flow-clone, z 37) aparece no buraco do meio */
.hero-audio-reveal{
  --band-h:clamp(180px, 36vh, 380px);
  position:absolute; inset:0;
  z-index:38;
  display:grid;
  grid-template-rows:1fr var(--band-h) 1fr;
  color:var(--color-white);
  text-align:center;
  pointer-events:none;
}
.hero.is-audio-revealed .hero-audio-reveal{ pointer-events:auto; }
.audio-top,
.audio-bottom{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(8px, 1.6vh, 16px);
  padding:clamp(14px, 3vh, 32px) clamp(20px, 8vw, 140px);
}
.audio-top{ justify-content:flex-end; }
.audio-bottom{ justify-content:flex-start; }
.audio-title{
  margin:0;
  max-width:min(980px, 90vw);
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:calc(clamp(24px, 3.2vw, 48px) * var(--fs-title, 1));
  line-height:1.08;
}
/* a faixa em si: só escurece um pouco a foto que pousa embaixo, pra onda
   aparecer, e segura a onda no centro */
.audio-band{
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(90deg, rgba(11,11,12,.55) 0%, rgba(11,11,12,.25) 50%, rgba(11,11,12,.55) 100%);
  opacity:0;
  transition:opacity .8s ease;
}
.hero.is-audio-revealed .audio-band{ opacity:1; }
.audio-text{
  margin:0;
  max-width:min(660px, 88vw);
  font-size:calc(clamp(13px, 1.02vw, 16px) * var(--fs-text, 1));
  line-height:1.6;
  color:var(--color-white-dim);
}
.audio-wave{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(3px, .35vw, 6px);
  height:55%;
  width:min(620px, 86vw);
}
.audio-wave span{
  flex:1 1 0;
  max-width:5px;
  height:calc(var(--h, .5) * 100%);
  border-radius:3px;
  background:var(--color-gold);
  transform-origin:center;
  animation:audio-wave-pulse 1.4s ease-in-out infinite;
  animation-delay:var(--dl, 0s);
  animation-play-state:paused; /* só toca com a etapa na tela */
}
.hero.is-audio-revealed .audio-wave span{ animation-play-state:running; }
@keyframes audio-wave-pulse{
  0%, 100%{ transform:scaleY(.35); }
  50%{ transform:scaleY(1); }
}
.audio-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px clamp(10px, 1.4vw, 18px);
  max-width:min(900px, 92vw);
}
.audio-list li{
  padding:7px 16px;
  border:1px solid rgba(201,162,75,.55);
  border-radius:999px;
  font-size:calc(clamp(12px, .95vw, 14.5px) * var(--fs-text, 1));
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
}
/* entrada: título desce do topo, texto/itens sobem de baixo — como se
   abrissem a partir da faixa */
.audio-top > *,
.audio-bottom > *{
  opacity:0;
  transition:opacity .7s ease, transform .7s var(--ease);
}
.audio-top > *{ transform:translateY(-18px); }
.audio-bottom > *{ transform:translateY(18px); }
.hero.is-audio-revealed .audio-top > *,
.hero.is-audio-revealed .audio-bottom > *{ opacity:1; transform:translateY(0); }
.hero.is-audio-revealed .audio-top > :nth-child(1){ transition-delay:.25s; }
.hero.is-audio-revealed .audio-top > :nth-child(2){ transition-delay:.15s; }
.hero.is-audio-revealed .audio-bottom > :nth-child(1){ transition-delay:.3s; }
.hero.is-audio-revealed .audio-bottom > :nth-child(2){ transition-delay:.45s; }

/* ---------- FEEDBACKS ---------- */
.hero-feedbacks-reveal{
  position:absolute; inset:0;
  z-index:39;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:clamp(16px, 3.4vh, 36px);
  padding:clamp(24px, 5vh, 56px) clamp(16px, 5vw, 80px);
  background:var(--color-bg);
  color:var(--color-white);
  opacity:0;
  pointer-events:none;
  transition:opacity .5s ease;
}
.hero.is-feedbacks-stage .hero-feedbacks-reveal{ opacity:1; }
.hero.is-feedbacks-revealed .hero-feedbacks-reveal{ pointer-events:auto; }
.feedbacks-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
}
.feedbacks-title{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:calc(clamp(24px, 3.2vw, 48px) * var(--fs-title, 1));
  line-height:1.08;
}
.feedbacks-track{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(12px, 1.6vw, 28px);
  width:100%;
  max-width:1300px;
}
.feedback-card{
  display:flex;
  flex-direction:column;
  gap:clamp(8px, 1.4vh, 14px);
  margin:0;
  text-align:left;
}
.feedback-photo{
  display:block;
  width:100%;
  height:clamp(140px, 30vh, 300px);
  max-width:none;
  object-fit:cover;
  object-position:center 30%;
  border-radius:10px;
  /* as fotos de verdade só aparecem quando os pedaços da faixa pousam
     (.is-feedbacks-landed) — cruzam com eles e assumem o lugar */
  opacity:0;
  transition:opacity .5s ease;
}
.hero.is-feedbacks-landed .feedback-photo{ opacity:1; }
.feedback-quote{
  position:relative;
  margin:0;
  padding-top:clamp(18px, 2.4vh, 26px);
  font-size:calc(clamp(13px, 1.02vw, 16px) * var(--fs-text, 1));
  line-height:1.6;
  color:var(--color-white-dim);
  font-style:italic;
}
.feedback-quote::before{
  content:"\201C";
  position:absolute;
  left:-2px; top:-.32em;
  font-family:var(--font-display);
  font-style:normal;
  font-size:3.2em;
  line-height:1;
  color:var(--color-gold);
}
.feedback-name{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:calc(clamp(14px, 1.2vw, 19px) * var(--fs-title, 1));
  letter-spacing:.02em;
}
.feedbacks-header,
.feedback-quote,
.feedback-name{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s ease, transform .7s var(--ease);
}
.hero.is-feedbacks-revealed .feedbacks-header,
.hero.is-feedbacks-revealed .feedback-quote,
.hero.is-feedbacks-revealed .feedback-name{ opacity:1; transform:translateY(0); }
.hero.is-feedbacks-revealed .feedbacks-header{ transition-delay:.3s; }
.hero.is-feedbacks-revealed .feedback-card:nth-child(1) > *{ transition-delay:1.1s; }
.hero.is-feedbacks-revealed .feedback-card:nth-child(2) > *{ transition-delay:1.22s; }
.hero.is-feedbacks-revealed .feedback-card:nth-child(3) > *{ transition-delay:1.34s; }
.hero.is-feedbacks-revealed .feedback-card > .feedback-photo{ transition-delay:0s; }

/* virada de página de álbum (Áudio → Feedbacks, ver albumTurn no JS):
   a dobra fica no MEIO da foto, como a lombada de um álbum aberto. A
   metade direita da foto antiga é uma folha que vira por cima da metade
   esquerda; o verso dela já é a metade esquerda da foto nova, e por baixo
   (à direita) já está a foto do depoimento — ao deitar, a foto nova está
   inteira. Na volta (playFeedbacksHide) a mesma animação roda ao
   contrário (.is-reverse). */
.album-turn{
  position:fixed;
  z-index:41;
  pointer-events:none;
  perspective:2200px;
}
.album-left,
.album-page{
  position:absolute;
  top:0; bottom:0;
  width:50%;
}
.album-left{
  left:0;
  overflow:hidden;
  border-radius:10px 0 0 10px;
}
.album-page{
  left:50%;
  transform-origin:left center;
  transform-style:preserve-3d;
  animation:album-spread-turn 1.2s var(--ease) both;
}
.album-face{
  position:absolute; inset:0;
  overflow:hidden;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
.album-face-front{ border-radius:0 10px 10px 0; }
.album-face-back{ transform:rotateY(180deg); border-radius:10px 0 0 10px; }
.album-turn img{
  position:absolute;
  top:0;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center 30%;
}
/* sombra da folha levantando: escurece a frente até ficar de lado (90°)
   e o verso vai clareando enquanto deita */
.album-face::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
}
.album-face-front::after{
  background:linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 100%);
  animation:album-shade-in 1.2s var(--ease) both;
}
.album-face-back::after{
  background:linear-gradient(270deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 100%);
  animation:album-shade-out 1.2s var(--ease) both;
}
/* sombra da lombada na metade de baixo, enquanto a folha está no ar */
.album-left::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(270deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 35%);
  animation:album-spine 1.2s var(--ease) both;
}
.album-turn.is-reverse .album-page,
.album-turn.is-reverse .album-face::after,
.album-turn.is-reverse .album-left::after{ animation-direction:reverse; }
@keyframes album-spread-turn{
  from{ transform:rotateY(0deg); }
  to  { transform:rotateY(-180deg); }
}
@keyframes album-shade-in{
  0%{ opacity:0; } 50%, 100%{ opacity:1; }
}
@keyframes album-shade-out{
  0%, 50%{ opacity:1; } 100%{ opacity:0; }
}
@keyframes album-spine{
  0%, 100%{ opacity:0; } 50%{ opacity:1; }
}

/* ---------- PERGUNTAS FREQUENTES ---------- */
/* coluna da esquerda transparente: ali fica a foto (.flow-clone, z 43)
   por baixo, com o título por cima; coluna da direita = acordeão */
.hero-faq-reveal{
  position:absolute; inset:0;
  z-index:44;
  display:grid;
  grid-template-columns:42% 1fr; /* 42% = largura do painel da foto (ver faqPanelRect no JS) */
  color:var(--color-white);
  opacity:0;
  pointer-events:none;
  transition:opacity .6s ease;
}
.hero.is-faq-stage .hero-faq-reveal{ opacity:1; }
.hero.is-faq-revealed .hero-faq-reveal{ pointer-events:auto; }
.faq-intro{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  gap:clamp(8px, 1.4vh, 14px);
  padding:clamp(24px, 7vh, 72px) clamp(20px, 4vw, 64px);
  background:linear-gradient(0deg, rgba(11,11,12,.9) 0%, rgba(11,11,12,.45) 45%, rgba(11,11,12,0) 75%);
  text-align:left;
  opacity:0;
  transition:opacity .6s ease;
}
.hero.is-faq-revealed .faq-intro{ opacity:1; }
.faq-title{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:calc(clamp(26px, 3.4vw, 52px) * var(--fs-title, 1));
  line-height:1.05;
}
.faq-intro-text{
  margin:0;
  font-size:calc(clamp(13px, 1vw, 15.5px) * var(--fs-text, 1));
  color:var(--color-white-dim);
}
.faq-intro .btn{ margin-top:6px; }
.faq-list{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(24px, 5vh, 56px) clamp(24px, 5vw, 96px);
  background:var(--color-bg);
  text-align:left;
  transition:transform 1.2s var(--ease);
}
/* FAQ → CTA: as perguntas saem pela direita (a foto sai pela esquerda) */
.hero.is-cta-leaving .faq-list{ transform:translateX(100%); }
.faq-item{ border-bottom:1px solid rgba(247,245,240,.14); }
.faq-item:first-child{ border-top:1px solid rgba(247,245,240,.14); }
.faq-question{
  position:relative;
  display:block;
  width:100%;
  padding:clamp(11px, 1.8vh, 18px) 36px clamp(11px, 1.8vh, 18px) 0;
  border:0;
  background:none;
  color:var(--color-white);
  font:inherit;
  font-size:calc(clamp(13px, 1vw, 16px) * var(--fs-text, 1));
  font-weight:600;
  text-align:left;
  cursor:pointer;
  transition:color .3s ease;
}
.faq-question:hover,
.faq-question[aria-expanded="true"]{ color:var(--color-gold); }
.faq-question:focus-visible{ outline:1px solid var(--color-gold); outline-offset:4px; }
.faq-question::before,
.faq-question::after{
  content:"";
  position:absolute;
  right:6px; top:50%;
  width:14px; height:1.5px;
  background:var(--color-gold);
  transition:transform .4s var(--ease);
}
.faq-question::after{ transform:rotate(90deg); }
.faq-question[aria-expanded="true"]::after{ transform:rotate(0deg); }
.faq-answer{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .45s var(--ease);
}
.faq-answer > div{ overflow:hidden; }
.faq-item.is-open .faq-answer{ grid-template-rows:1fr; }
.faq-answer p{
  margin:0;
  padding:0 36px clamp(12px, 1.8vh, 18px) 0;
  font-size:calc(clamp(12px, .92vw, 14.5px) * var(--fs-text, 1));
  line-height:1.6;
  color:var(--color-white-dim);
}
/* perguntas entram em cascata vindas da direita */
.faq-item{
  opacity:0;
  transform:translateX(30px);
  transition:opacity .6s ease, transform .6s var(--ease);
}
.hero.is-faq-revealed .faq-item{ opacity:1; transform:translateX(0); }
.hero.is-faq-revealed .faq-item:nth-child(1){ transition-delay:.1s; }
.hero.is-faq-revealed .faq-item:nth-child(2){ transition-delay:.16s; }
.hero.is-faq-revealed .faq-item:nth-child(3){ transition-delay:.22s; }
.hero.is-faq-revealed .faq-item:nth-child(4){ transition-delay:.28s; }
.hero.is-faq-revealed .faq-item:nth-child(5){ transition-delay:.34s; }
.hero.is-faq-revealed .faq-item:nth-child(6){ transition-delay:.4s; }
.hero.is-faq-revealed .faq-item:nth-child(7){ transition-delay:.46s; }
.hero.is-faq-revealed .faq-item:nth-child(8){ transition-delay:.52s; }
.hero.is-faq-revealed .faq-item:nth-child(9){ transition-delay:.58s; }

/* ---------- CTA FINAL: abre num círculo a partir do centro ---------- */
.hero-cta-reveal{
  position:absolute; inset:0;
  z-index:46;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:clamp(12px, 2.4vh, 24px);
  padding:clamp(24px, 6vh, 64px) clamp(20px, 8vw, 140px);
  overflow:hidden;
  background:var(--color-bg);
  color:var(--color-white);
  text-align:center;
  clip-path:circle(0% at 50% 50%);
  pointer-events:none;
  transition:clip-path 1.4s var(--ease);
}
.hero.is-cta-stage .hero-cta-reveal{ clip-path:circle(75% at 50% 50%); }
.hero.is-cta-revealed .hero-cta-reveal{ pointer-events:auto; }
/* foto própria de fundo, escurecida, com um leve zoom saindo enquanto o
   círculo abre */
.cta-bg{
  position:absolute; inset:0;
  z-index:-1;
  width:100%; height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center 35%;
  filter:brightness(.38);
  transform:scale(1.15);
  transition:transform 2.4s var(--ease);
}
.hero.is-cta-stage .cta-bg{ transform:scale(1); }
.hero-cta-reveal{ isolation:isolate; } /* o z-index:-1 da foto fica dentro do painel */
.cta-title{
  margin:0;
  max-width:min(980px, 92vw);
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:calc(clamp(28px, 4.4vw, 68px) * var(--fs-title, 1));
  line-height:1.02;
}
.cta-text{
  margin:0;
  max-width:min(660px, 88vw);
  font-size:calc(clamp(13px, 1.05vw, 16.5px) * var(--fs-text, 1));
  line-height:1.65;
  color:var(--color-white-dim);
}
.cta-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px 16px;
  margin-top:clamp(4px, 1vh, 10px);
}
.cta-signature{
  margin:clamp(10px, 3vh, 32px) 0 0;
  font-size:calc(clamp(10px, .75vw, 12px) * var(--fs-text, 1));
  letter-spacing:.3em;
  text-transform:uppercase;
  color:rgba(247,245,240,.5);
}
.cta-signature span{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:.35em;
  color:var(--color-white);
}
.hero-cta-reveal > :not(.cta-bg){
  opacity:0;
  transform:translateY(16px);
  transition:opacity .7s ease, transform .7s var(--ease);
}
.hero.is-cta-revealed .hero-cta-reveal > :not(.cta-bg){ opacity:1; transform:translateY(0); }
.hero.is-cta-revealed .hero-cta-reveal > :nth-child(2){ transition-delay:.05s; }
.hero.is-cta-revealed .hero-cta-reveal > :nth-child(3){ transition-delay:.17s; }
.hero.is-cta-revealed .hero-cta-reveal > :nth-child(4){ transition-delay:.32s; }
.hero.is-cta-revealed .hero-cta-reveal > :nth-child(5){ transition-delay:.48s; }
.hero.is-cta-revealed .hero-cta-reveal > :nth-child(6){ transition-delay:.65s; }

/* ---------- celular ---------- */
@media (max-width:640px){
  /* Álbuns: foto em cima (42vh, ver albunsSlot no JS), texto embaixo */
  .hero-albuns-reveal{
    grid-template-columns:1fr;
    grid-template-rows:42vh 1fr;
  }
  .albuns-photo-slot{ grid-row:1; }
  .albuns-content{
    grid-row:2;
    justify-content:flex-start;
    padding:20px 20px 32px;
  }

  .hero-portfolio-reveal{ gap:12px; padding-top:clamp(36px, 8vh, 64px); }
  .portfolio-group-fotos .portfolio-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .portfolio-group-filmes .portfolio-tile{ height:clamp(96px, 15vh, 140px); }
  .portfolio-group-fotos .portfolio-tile{ height:clamp(100px, 16vh, 150px); }
  .portfolio-tile figcaption{ padding:8px 9px; font-size:12px; }
  .portfolio-tile.is-film::before{ width:32px; height:32px; top:40%; }
  .portfolio-tile:not([data-portfolio-target]){ transform:translateX(50px); }

  .hero-audio-reveal{ --band-h:26vh; }
  .audio-top, .audio-bottom{ padding-left:20px; padding-right:20px; }
  .audio-list li{ padding:6px 12px; }

  .feedbacks-track{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin:0 -16px;
    padding:0 16px 4px;
    width:calc(100% + 32px);
  }
  .feedbacks-track::-webkit-scrollbar{ display:none; }
  .feedback-card{ flex:0 0 84%; scroll-snap-align:center; }
  .feedback-photo{ height:clamp(160px, 30vh, 240px); }

  .hero-faq-reveal{
    grid-template-columns:1fr;
    grid-template-rows:28vh 1fr;
  }
  .faq-intro{ padding:16px 20px; gap:4px; }
  .faq-intro-text,
  .faq-intro .btn{ display:none; }
  .faq-list{ justify-content:flex-start; padding:12px 20px 24px; }
  .faq-question{ padding:11px 30px 11px 0; font-size:13.5px; }
  .faq-answer p{ padding-right:10px; font-size:13px; }

  .cta-actions{ flex-direction:column; align-items:stretch; width:100%; max-width:340px; }
}

/* 7 molduras (a 8ª, p1, agora é o vídeo da hero que já pousou encolhido —
   ver .hero-polaroid-frame/.hero-polaroid-photo), 4 em cima e 3 embaixo. */
.polaroid.p2{ --y:9%; --x:38%; transform:translate(-50%,-50%) rotate(6deg) scale(.85); --sway-amp:3.4deg; --sway-dur:3.7s; --sway-delay:.6s; }
.polaroid.p7{ --y:11%; --x:64%; transform:translate(-50%,-50%) rotate(-5deg) scale(.9); --sway-amp:3.1deg; --sway-dur:4.3s; --sway-delay:.35s; }
.polaroid.p6{ --y:14%; --x:88%; transform:translate(-50%,-50%) rotate(7deg) scale(.95); --sway-amp:2.8deg; --sway-dur:4.8s; --sway-delay:.2s; }

.polaroid.p3{ --y:89%; --x:14%; transform:translate(-50%,-50%) rotate(-4deg) scale(.92); --sway-amp:2.4deg; --sway-dur:5s; --sway-delay:.3s; }
.polaroid.p4{ --y:80%; --x:38%; transform:translate(-50%,-50%) rotate(5deg) scale(.88); --sway-amp:3deg; --sway-dur:4.6s; --sway-delay:0s; }
.polaroid.p5{ --y:83%; --x:63%; transform:translate(-50%,-50%) rotate(8deg) scale(.8); --sway-amp:3.6deg; --sway-dur:3.9s; --sway-delay:.45s; }
.polaroid.p8{ --y:87%; --x:87%; transform:translate(-50%,-50%) rotate(-6deg) scale(.98); --sway-amp:2.9deg; --sway-dur:4.4s; --sway-delay:.55s; }

/* --x/--y = posição "desejada" do centro; o clamp segura a polaroid
   inteira dentro da tela (altura ~1.32× a largura, + folga pra rotação e
   balanço), com uma margem de 14px das bordas — sem isso, em telas mais
   baixas/estreitas as das bordas saíam cortadas pra fora. */
.polaroid-scatter .polaroid{
  top:clamp(calc(var(--pw) * .75 + 14px), var(--y), calc(100% - var(--pw) * .75 - 14px));
  left:clamp(calc(var(--pw) * .65 + 14px), var(--x), calc(100% - var(--pw) * .65 - 14px));
}

/* no PC: 3 molduras em cima, 3 embaixo, 1 de cada lado */
@media (min-width:641px){
  .polaroid-scatter{ --pw:clamp(70px, 10.5vw, 150px); }

  .polaroid.p4{ --y:10%; --x:22%; }
  .polaroid.p2{ --y:8%; --x:50%; }
  .polaroid.p6{ --y:11%; --x:78%; }

  .polaroid.p3{ --y:88%; --x:24%; }
  .polaroid.p8{ --y:89%; --x:76%; }

  .polaroid.p7{ --y:50%; --x:6%;  }
  .polaroid.p5{ --y:50%; --x:94%; }
}

/* =============== SOBRE A TOTUS =============== */
.sobre{
  background:var(--color-bg);
  color:var(--color-white);
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  text-align:left;
}

.sobre-media{
  position:relative;
  flex:0 0 38%;
  overflow:hidden;
  transition:flex-basis .6s var(--ease);
}
.sobre-media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:filter .5s ease;
}
.sobre-media-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,11,12,0) 55%, rgba(11,11,12,.55) 100%);
}

.sobre-content{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(10px, 1.6vh, 16px);
  padding:clamp(18px, 4vh, 28px) clamp(20px, 6vw, 36px);
  transition:opacity .5s ease, transform .5s var(--ease);
}

/* --- ao rolar "pra frente" na seção Sobre, a imagem cresce até preencher
   a tela inteira, empurrando o texto pra fora (ver js/main.js,
   playSobreImageExpand/Collapse, disparado no lugar do antigo reveal do
   painel "diferencial") --- */
.sobre.is-img-expanded .sobre-media{
  flex-basis:100%;
}
.sobre.is-img-expanded .sobre-content{
  opacity:0;
  transform:translateY(40px);
  pointer-events:none;
}
/* só entra depois que a imagem já terminou de preencher a tela (ver o
   setTimeout em playSobreImageExpand) */
.sobre.is-img-bw .sobre-media img{
  filter:grayscale(1);
}

.sobre-title{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:calc(clamp(21px, 4vw, 34px) * var(--fs-title, 1));
  line-height:1.2;
  max-width:26ch;
}

.sobre-text{
  margin:0;
  max-width:52ch;
  font-size:calc(clamp(12.5px, 1.15vw, 15px) * var(--fs-text, 1));
  line-height:1.65;
  color:var(--color-white-dim);
}

.sobre-highlights{
  list-style:none;
  margin:clamp(2px, .6vh, 6px) 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:clamp(8px, 1.4vw, 14px);
}
.sobre-highlights li{
  font-family:var(--font-body);
  font-size:calc(clamp(9.5px, .85vw, 11px) * var(--fs-text, 1));
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--color-gold);
  padding:clamp(6px, .9vh, 9px) clamp(12px, 1.6vw, 18px);
  border:1px solid rgba(201,162,75,.45);
  border-radius:999px;
}

/* no PC: imagem fixada na borda direita, texto ocupa o resto à esquerda */
@media (min-width:641px){
  .sobre{ flex-direction:row; align-items:stretch; }
  .sobre-media{
    position:absolute;
    top:0; right:0;
    width:44%;
    height:100%;
    transition:width .6s var(--ease);
  }
  .sobre-media-overlay{
    background:linear-gradient(90deg, rgba(11,11,12,.65) 0%, rgba(11,11,12,0) 30%);
  }
  .sobre-content{
    flex:none;
    width:62%;
    padding:0 clamp(40px, 6vw, 90px) 0 clamp(100px, 13vw, 200px);
    max-width:720px;
  }
  .sobre.is-img-expanded .sobre-media{
    width:100%;
  }
  .sobre.is-img-expanded .sobre-content{
    transform:translateX(-120%);
  }
}

/* =============== O DIFERENCIAL TOTUS (não é mais seção própria: painel
   escuro que aparece por cima da seção Sobre — agora como ÚLTIMO passo da
   sequência de scroll .is-img-expanded → .is-img-bw → .is-diferencial-
   revealed, ver playSobreImageExpand/Collapse no js/main.js) =============== */
.sobre-diferencial-reveal{
  position:absolute; inset:0;
  z-index:20;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  text-align:left;
  color:var(--color-white);
  /* transparente de propósito: o texto aparece POR CIMA da imagem em tela
     cheia (já preto e branco), não cobrindo ela — só um degradê embaixo
     pra garantir leitura do texto */
  background:linear-gradient(0deg, rgba(11,11,12,.8) 0%, rgba(11,11,12,.4) 45%, rgba(11,11,12,0) 80%);
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  /* mesma duração do filter grayscale da imagem (.sobre-media img) —
     entra junto, gradualmente, sem "pop" de tamanho */
  transition:opacity .5s ease;
}
.sobre.is-diferencial-revealed .sobre-diferencial-reveal{
  opacity:1;
  pointer-events:auto;
}

.diferencial-content{
  position:relative;
  z-index:2;
  max-width:min(680px, 88vw);
  padding:clamp(20px, 5vh, 56px) clamp(20px, 6vw, 64px);
  display:flex;
  flex-direction:column;
  gap:clamp(10px, 1.6vh, 16px);
  opacity:0;
  transform:translateY(18px);
  transition:opacity .5s ease .5s, transform .5s ease .5s; /* só depois que o painel já expandiu */
}
.sobre.is-diferencial-revealed .diferencial-content{
  opacity:1;
  transform:translateY(0);
}

.diferencial-title{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:calc(clamp(24px, 5vw, 48px) * var(--fs-title, 1));
  line-height:1.14;
}

.diferencial-text{
  margin:0;
  max-width:56ch;
  font-size:calc(clamp(15px, 1.5vw, 19px) * var(--fs-text, 1));
  line-height:1.65;
  color:var(--color-white-dim);
}

.diferencial-highlights{
  list-style:none;
  margin:clamp(2px, .6vh, 6px) 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:clamp(8px, 1.2vw, 12px);
}
.diferencial-highlights li{
  font-family:var(--font-body);
  font-size:calc(clamp(9px, .8vw, 10.5px) * var(--fs-text, 1));
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--color-gold);
  padding:clamp(5px, .8vh, 8px) clamp(10px, 1.4vw, 15px);
  border:1px solid rgba(201,162,75,.45);
  border-radius:999px;
}

/* canto superior direito da seção (irmão de .diferencial-content, não
   filho — senão o position:absolute fica preso na caixa do texto lá
   embaixo à esquerda, em vez de usar a seção inteira como referência) */
.diferencial-credit{
  position:absolute;
  top:clamp(20px, 4vh, 40px);
  right:clamp(20px, 5vw, 56px);
  z-index:3;
  margin:0;
  display:flex;
  align-items:center;
  gap:clamp(6px, .8vw, 10px);
  font-size:calc(clamp(9.5px, .85vw, 11.5px) * var(--fs-text, 1));
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--color-white-dim);
}
.diferencial-instagram{
  display:inline-flex;
  align-items:center;
  gap:clamp(5px, .6vw, 7px);
  color:var(--color-white);
  font-family:var(--font-body);
  font-weight:600;
  font-size:calc(clamp(10.5px, .9vw, 12.5px) * var(--fs-text, 1));
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:clamp(6px, 1vh, 9px) clamp(13px, 1.6vw, 18px);
  border:1px solid rgba(247,245,240,.4);
  border-radius:999px;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
  /* pulso contínuo pra chamar atenção pro link — para no hover, quando a
     atenção já foi conquistada */
  animation:diferencial-instagram-pulse 2.2s ease-in-out infinite;
}
.diferencial-instagram-icon{
  flex:none;
  display:block;
}
.diferencial-instagram:hover{
  background:var(--color-white);
  color:#111;
  border-color:var(--color-white);
  animation-play-state:paused;
  box-shadow:none;
}
@keyframes diferencial-instagram-pulse{
  0%, 100%{ box-shadow:0 0 0 0 rgba(247,245,240,.55); }
  50%{ box-shadow:0 0 0 7px rgba(247,245,240,0); }
}
@media (prefers-reduced-motion: reduce){
  .diferencial-instagram{ animation:none; }
}

/* =============== O QUE PODEMOS CRIAR =============== */
.criacoes{
  background:#faf8f4;
  color:#161513;
  flex-direction:column;
  gap:clamp(14px, 2.6vh, 30px);
  padding:clamp(16px, 3.5vh, 34px) clamp(16px, 4vw, 40px);
}

.criacoes-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
  max-width:min(680px, 84vw);
}
.criacoes-title{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:calc(clamp(18px, 3vw, 32px) * var(--fs-title, 1));
  line-height:1.2;
  color:#141310;
}

.criacoes-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(8px, 1.6vh, 16px) clamp(8px, 1.6vw, 16px);
  width:100%;
  max-width:1100px;
}

.criacoes-card{
  background:#fffdf9;
  border:1px solid rgba(20,19,16,.08);
  border-radius:10px;
  padding:clamp(10px, 1.6vh, 16px) clamp(12px, 1.8vw, 18px);
  box-shadow:0 8px 20px -10px rgba(20,15,5,.15);
  opacity:0;
}
/* imagem sangrando até a borda do card (compensa o padding dele com
   margens negativas), cantos de cima arredondados junto com o card */
.criacoes-card-img{
  display:block;
  width:calc(100% + clamp(24px, 3.6vw, 36px));
  margin:calc(-1 * clamp(10px, 1.6vh, 16px)) calc(-1 * clamp(12px, 1.8vw, 18px)) clamp(8px, 1.4vh, 12px);
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:10px 10px 0 0;
  background:#111;
}
.criacoes-card h3{
  margin:0 0 4px;
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:calc(clamp(12.5px, 1.15vw, 15px) * var(--fs-text, 1));
  color:#141310;
}
.criacoes-card p{
  margin:0;
  font-size:calc(clamp(10.5px, .85vw, 12.5px) * var(--fs-text, 1));
  line-height:1.45;
  color:#6b665d;
}

/* entrada: direita sobe em arco (elipse), esquerda desce em arco */
@keyframes criacoes-in-right{
  0%   { opacity:0; transform:translate(46px, 56px) scale(.85); }
  55%  { opacity:.8; transform:translate(18px, -14px) scale(.96); }
  100% { opacity:1; transform:translate(0,0) scale(1); }
}
@keyframes criacoes-in-left{
  0%   { opacity:0; transform:translate(-46px, -56px) scale(.85); }
  55%  { opacity:.8; transform:translate(-18px, 14px) scale(.96); }
  100% { opacity:1; transform:translate(0,0) scale(1); }
}
.criacoes.is-revealed .criacoes-card.side-right{
  animation:criacoes-in-right .8s cubic-bezier(.22,.68,.36,1) forwards;
  animation-delay:calc(.15s + var(--i) * .13s);
}
.criacoes.is-revealed .criacoes-card.side-left{
  animation:criacoes-in-left .8s cubic-bezier(.22,.68,.36,1) forwards;
  animation-delay:calc(.15s + var(--i) * .13s);
}

/* no PC: 4 colunas — metade esquerda desce, metade direita sobe */
@media (min-width:641px){
  .criacoes-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .criacoes-card p{ display:block; }
}

/* =============== A EXPERIÊNCIA TOTUS =============== */
/* não é seção própria — revela por cima da própria Hero, como último
   passo da sequência de Criações: depois que a foto do último card
   (Pré-Wedding) termina de virar o fundo da tela (ver playCriacoesCardsHide
   no JS, que já dispara isso sozinho — sem precisar de mais um scroll),
   este painel aparece por cima dela. Mesmo esquema das outras "preview"
   dentro de .hero-manifesto-reveal (Sobre/Diferencial/Criações), mesma
   ideia de degradê do .hero-diferencial-preview: escurece só a parte de
   trás do texto (a foto por baixo continua sendo o fundo, só ganha um
   escurecido ali — sem isso o texto branco ficava difícil de ler em cima
   da foto clara). Alinhado à esquerda — a foto de fundo (retrato, mais
   cheia à direita) sobra visível e sem escurecer do lado direito. */
.hero-experiencia-reveal{
  position:absolute; inset:0;
  z-index:28; /* acima do clone da foto crescendo (.criacoes-bg-grow, 26) */
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(4px, 1vh, 8px);
  width:100%;
  max-width:600px;
  padding:clamp(20px, 5vh, 40px) clamp(20px, 6vw, 64px);
  background:linear-gradient(100deg, rgba(11,11,12,.95) 0%, rgba(11,11,12,.72) 45%, rgba(11,11,12,0) 82%);
  color:var(--color-white);
  text-align:left;
  opacity:0;
  transform:translateY(24px);
  pointer-events:none;
  transition:opacity .9s ease, transform .9s var(--ease);
}
/* PC: fonte maior (ver --fs-text no topo) pede coluna mais larga, senão
   cada passo quebra em várias linhas */
@media (min-width:1024px){
  .hero-experiencia-reveal{ max-width:min(780px, 50vw); }
}
.hero.is-experiencia-revealed .hero-experiencia-reveal{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.experiencia-title{
  margin:0 0 clamp(16px, 3.4vh, 30px);
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:calc(clamp(20px, 3.6vw, 32px) * var(--fs-title, 1));
  line-height:1.2;
  max-width:20ch;
}

.experiencia-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:clamp(12px, 2.2vh, 20px);
}
.experiencia-step{
  display:flex;
  align-items:baseline;
  gap:clamp(12px, 2.4vw, 22px);
}
.experiencia-step-num{
  flex:none;
  font-family:var(--font-display);
  font-weight:700;
  font-size:calc(clamp(16px, 2vw, 22px) * var(--fs-title, 1));
  color:var(--color-gold);
  line-height:1;
}
.experiencia-step-body h3{
  margin:0 0 3px;
  font-family:var(--font-body);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:calc(clamp(12.5px, 1.15vw, 14.5px) * var(--fs-text, 1));
  color:var(--color-white);
}
.experiencia-step-body p{
  margin:0;
  font-size:calc(clamp(11.5px, 1vw, 13px) * var(--fs-text, 1));
  line-height:1.55;
  color:var(--color-white-dim);
  max-width:46ch;
}
/* telas curtas (paisagem/celular deitado): reduz respiros */
@media (max-height:480px){
  .hero-logo{ display:none; }
  .hero-content{ gap:10px; }
  .hero-title{ font-size:calc(clamp(20px, 4.4vw, 34px) * var(--fs-title, 1)); }
  .hero-text{ display:none; }
  .scroll-cue{ display:none; }

  .hero-manifesto-reveal{ gap:14px; }
  .manifesto-content{ gap:8px; }
  .manifesto-title{ font-size:calc(clamp(18px, 4vw, 30px) * var(--fs-title, 1)); }
  .manifesto-text{ display:none; }
  .polaroid-scatter{ --pw:clamp(52px, 9vw, 88px); }
  .polaroid-inner{ padding:4px 4px 12px; }
  .polaroid.p5, .polaroid.p8{ display:none; }

  .sobre{ flex-direction:row; }
  .sobre-media{ flex:0 0 34%; }
  .sobre-content{ gap:6px; padding:10px clamp(16px, 3vw, 28px); }
  .sobre-title{ font-size:calc(clamp(15px, 3vw, 20px) * var(--fs-text, 1)); }
  .sobre-text{ display:none; }
  .sobre-highlights li{ padding:4px 10px; }

  .diferencial-content{ gap:6px; padding:14px clamp(16px, 3vw, 28px); }
  .diferencial-title{ font-size:calc(clamp(16px, 3.2vw, 22px) * var(--fs-title, 1)); }
  .diferencial-text{ display:none; }
  .diferencial-highlights li{ padding:4px 9px; }

  .criacoes{ gap:8px; }
  .criacoes-title{ font-size:calc(clamp(14px, 2.6vw, 20px) * var(--fs-text, 1)); }
  .criacoes-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .criacoes-card{ padding:6px 8px; }
  .criacoes-card-img{ display:none; }
  .criacoes-card h3{ font-size:calc(9px * var(--fs-text, 1)); margin:0; }
  .criacoes-card p{ display:none; }

  .experiencia-title{ margin-bottom:10px; font-size:calc(clamp(16px, 3vw, 22px) * var(--fs-title, 1)); }
  .experiencia-steps{ gap:8px; }
  .experiencia-step-body p{ display:none; }
}

/* celular em pé: as mesmas 7 molduras (a 8ª, p1, agora é o vídeo da hero
   já pousado), um pouco maiores, 4 em cima / 3 embaixo */
@media (max-width:640px){
  .polaroid-scatter{ --pw:clamp(76px, 20vw, 108px); }

  /* banda de cima — com folga segura das bordas */
  .polaroid.p4{ --y:10%; --x:27%; transform:translate(-50%,-50%) rotate(-11deg) scale(.95); }
  .polaroid.p2{ --y:18%; --x:76%; transform:translate(-50%,-50%) rotate(9deg) scale(.85); }
  .polaroid.p7{ --y:9%; --x:52%; transform:translate(-50%,-50%) rotate(2deg) scale(.85); }
  .polaroid.p6{ --y:26%; --x:14%; transform:translate(-50%,-50%) rotate(-7deg) scale(.88); }

  /* banda de baixo — as 3 na mesma altura, mais ou menos (77–91%, parecido
     com o espalhamento da banda de cima), só variando o "left" pra
     parecer aleatório — e sempre com folga do centro (top:~85%, left:50%),
     onde a moldura/foto do vídeo da Hero pousa encolhida (ver
     .hero.is-bg-white no CSS) e do texto do manifesto, que fica no meio */
  .polaroid.p3{ --y:77%; --x:12%;  transform:translate(-50%,-50%) rotate(5deg) scale(.85); }
  .polaroid.p8{ --y:91%; --x:25%;  transform:translate(-50%,-50%) rotate(4deg) scale(.86); }
  .polaroid.p5{ --y:83%; --x:85%;  transform:translate(-50%,-50%) rotate(-8deg) scale(.82); }
}