/* ==========================================================================
   SPA AKSHAYA · prévia da primeira dobra
   Tokens do DNA (dna/DNA.md, seção 2). Canto até 2px, zero sombra, um acento.
   ========================================================================== */

@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond-var.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("../fonts/Cinzel-var.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }

:root {
  --fundo: #171310;
  --superficie: #241C16;
  --texto: #F4EDE4;
  --ambar: #D89050;
  --dourado: #C8992E;
  --madeira: #8A5A3B;
  --legenda: #A99383;
  --linha: rgba(244, 237, 228, 0.14);

  --display: "Cormorant Garamond", Georgia, serif;
  --corpo: "Inter", "Segoe UI", system-ui, sans-serif;

  /* respiração: sai devagar, assenta sem pressa */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-saida: cubic-bezier(0, 0, 0.2, 1);
  --margem: clamp(20px, 3.4vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--fundo); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--corpo);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--ambar); color: var(--fundo); }
:focus-visible { outline: 1px solid var(--ambar); outline-offset: 4px; }

.pular {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  padding: 10px 14px; background: var(--texto); color: var(--fundo);
  border-radius: 2px; text-decoration: none; font-size: 14px;
}
.pular:focus { top: 16px; }

.rotulo {
  margin: 0;
  font-family: var(--corpo);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--legenda);
}

/* =============================== 01 · DOBRA =============================== */
/* a dobra fica presa em toda tela, inclusive no celular (ver "tela em pé") */
#hero-wrapper { position: relative; background: #0d0a08; min-height: 300vh; }

#hero {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

/* grão de filme, quase invisível: é o que tira o ar de render */
.ruido {
  position: absolute; inset: -50%; z-index: 6; pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* a cortina: a casa acende devagar na abertura. Só existe enquanto o JS
   anima; sem JS ela fica em opacity 0 e não cobre nada. */
.cortina {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: #0d0a08; opacity: 0;
}
.pre-motion .cortina { opacity: 1; }

/* a luz de vela: um halo âmbar baixo que respira em 7s, nunca pisca */
.vela {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    radial-gradient(ellipse 40% 46% at 14% 88%, rgba(216, 144, 80, 0.20), rgba(216, 144, 80, 0) 70%),
    radial-gradient(ellipse 60% 60% at 50% 120%, rgba(138, 90, 59, 0.22), rgba(138, 90, 59, 0) 70%);
  mix-blend-mode: screen;
  opacity: 0.7;
}
@media (prefers-reduced-motion: no-preference) {
  .vela { animation: respira 7s ease-in-out infinite alternate; }
}
@keyframes respira {
  0%   { opacity: 0.55; }
  45%  { opacity: 0.85; }
  60%  { opacity: 0.72; }
  100% { opacity: 0.95; }
}

/* o palco que escala de 1 para 0.5 */
.hero__palco {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  transform-origin: 50% 50%;
}

.hero__ladrilho {
  position: absolute; inset: 0;
  background: #0d0a08;
  clip-path: inset(0px);
  overflow: hidden;
}
.hero__ladrilho img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* mesmo registro para todas: a toalha branca não pode gritar ao lado das velas */
  filter: brightness(0.7) saturate(0.85) sepia(0.12);
  opacity: 0.55;
  transform: scale(1.25);
}
.hero__ladrilho[data-pos="cima-esq"]  { transform: translate(-100%, -100%); }
.hero__ladrilho[data-pos="cima"]      { transform: translate(0, -100%); }
.hero__ladrilho[data-pos="cima-dir"]  { transform: translate(100%, -100%); }
.hero__ladrilho[data-pos="esq"]       { transform: translate(-100%, 0); }
.hero__ladrilho[data-pos="dir"]       { transform: translate(100%, 0); }
.hero__ladrilho[data-pos="baixo-esq"] { transform: translate(-100%, 100%); }
.hero__ladrilho[data-pos="baixo"]     { transform: translate(0, 100%); }
.hero__ladrilho[data-pos="baixo-dir"] { transform: translate(100%, 100%); }

.hero__centro {
  position: relative;
  width: 100vw; height: 100svh;
  clip-path: inset(0px);
  overflow: hidden;
}

.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1600ms var(--ease-saida);
}
.hero__slide.esta-ativo { opacity: 1; z-index: 1; }
.hero__slide img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform-origin: 60% 55%;
}
/* a foto da Simone é 2,35:1; numa tela 16:10 o corte central cortaria o rosto
   dela pela esquerda, então o enquadramento puxa para as mãos e o rosto */
.hero__slide--simone img { object-position: 38% 40%; transform-origin: 38% 45%; }


/* aproximação lenta, só no slide que está na tela */
@media (prefers-reduced-motion: no-preference) {
  .hero__slide.esta-ativo img { animation: aproxima 9s linear both; }
}
@keyframes aproxima { from { transform: scale(1.08); } to { transform: scale(1); } }

/* véu: base escura para o texto da direita e para o logo da esquerda */
.hero__veu {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(13, 10, 8, 0.55) 0%, rgba(13, 10, 8, 0.05) 30%, rgba(13, 10, 8, 0.15) 55%, rgba(13, 10, 8, 0.9) 100%),
    radial-gradient(ellipse 62% 78% at 92% 72%, rgba(13, 10, 8, 0.88), rgba(13, 10, 8, 0.55) 45%, rgba(13, 10, 8, 0) 78%);
}

/* --- FASE 1: a promessa ---------------------------------------------------- */
.hero__promessa {
  position: absolute; z-index: 5;
  right: var(--margem);
  bottom: calc(var(--margem) + 56px);
  width: min(760px, 56vw);
  text-align: right;
  transform-origin: 100% 100%;
}
.hero__promessa .rotulo { color: var(--ambar); margin-bottom: 22px; }
.hero__promessa h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(36px, 4.2vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.hero__promessa h1 span { display: block; }
.hero__promessa h1 em { display: block; font-style: normal; color: var(--ambar); }
.hero__apoio {
  margin: 22px 0 0 auto;
  max-width: 68ch;
  text-wrap: balance;
  font-size: 16px;
  color: rgba(244, 237, 228, 0.82);
}
.hero__cta { display: flex; justify-content: flex-end; gap: 10px; margin-top: 30px; flex-wrap: wrap; }

.botao {
  display: inline-flex; align-items: center; gap: 14px;
  height: 52px; padding: 0 22px;
  border-radius: 2px;
  font-size: 14px; font-weight: 500; letter-spacing: 0.01em;
  text-decoration: none;
  pointer-events: auto;
  transition: background-color 400ms var(--ease), color 400ms var(--ease), border-color 400ms var(--ease);
}
.botao__seta { display: inline-flex; transition: transform 400ms var(--ease); }
.botao:hover .botao__seta { transform: translateX(4px); }
.botao--vazado:hover .botao__seta { transform: translateY(3px); }
.botao--ambar { background: var(--ambar); color: var(--fundo); }
.botao--ambar:hover { background: #E6A066; }
.botao--vazado { border: 1px solid rgba(244, 237, 228, 0.32); color: var(--texto); background: rgba(13, 10, 8, 0.25); }
.botao--vazado:hover { border-color: var(--texto); }

.hero__tracos { display: flex; justify-content: flex-end; gap: 6px; margin-top: 30px; }
.hero__traco {
  appearance: none; border: 0; background: none; cursor: pointer;
  padding: 10px 0; pointer-events: auto;
}
.hero__traco span {
  display: block; width: 34px; height: 2px;
  background: rgba(244, 237, 228, 0.32);
  transition: width 500ms var(--ease), background-color 500ms var(--ease);
}
.hero__traco.esta-ativo span { width: 56px; background: var(--ambar); }

/* --- FASE 2: o convite ----------------------------------------------------- */
.hero__convite {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center;
  pointer-events: none;
}
.hero__convite-caixa {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 48px 56px;
  visibility: hidden; opacity: 0;
}
.hero__convite-caixa::before {
  content: ""; position: absolute; inset: -30% -20%; z-index: -1;
  background: radial-gradient(closest-side, rgba(13, 10, 8, 0.78), rgba(13, 10, 8, 0));
}
.hero__convite-titulo {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 3.6vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.01em;
}
.hero__convite-titulo em { font-style: normal; color: var(--ambar); }
.hero__convite-sub { margin-top: 26px; color: rgba(244, 237, 228, 0.7); }
.hero__convite-linha {
  position: relative; display: block;
  width: 1px; height: 64px; margin-top: 18px;
  background: rgba(244, 237, 228, 0.22);
  overflow: hidden;
}
.hero__convite-linha i {
  position: absolute; left: 0; top: -40%;
  width: 1px; height: 40%;
  background: var(--ambar);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__convite-linha i { animation: desce 2.4s var(--ease) infinite; }
}
@keyframes desce { from { top: -40%; } to { top: 100%; } }

/* --- HUD ------------------------------------------------------------------- */
.hud {
  position: fixed; z-index: 19; left: 0; right: 0; bottom: 0;
  padding: 56px var(--margem) 22px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  pointer-events: none;
  /* degradê em degraus (não linear): linear faz uma faixa visível no meio */
  background: linear-gradient(0deg,
    rgba(13, 10, 8, 0.86) 0%, rgba(13, 10, 8, 0.62) 38%,
    rgba(13, 10, 8, 0.26) 70%, rgba(13, 10, 8, 0) 100%);
}
.hud .rotulo { color: rgba(244, 237, 228, 0.6); }
.hud__meio { text-align: center; }
.hud__status { justify-self: end; display: inline-flex; align-items: center; gap: 8px; }
.hud__status i { width: 6px; height: 6px; border-radius: 50%; background: var(--legenda); }
.hud__status.esta-aberto i { background: var(--ambar); }
.hud__status b { font-weight: 500; }

/* --- o logo que encolhe ------------------------------------------------------ */
#marca-wrapper {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  height: 100svh;
  pointer-events: none;
}
/* depois que o logo assenta, um degradê escuro no topo, espelho da barra de
   baixo: sem ele o logo fixo passava por cima dos títulos das seções */
#marca-wrapper::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 132px;
  background: linear-gradient(180deg,
    rgba(13, 10, 8, 0.88) 0%, rgba(13, 10, 8, 0.6) 40%,
    rgba(13, 10, 8, 0.22) 72%, rgba(13, 10, 8, 0) 100%);
  opacity: 0; transition: opacity 0.5s var(--ease);
}
#marca-wrapper.marca-parada::before { opacity: 1; }
.marca-trilho {
  position: relative;
  display: flex; flex-direction: column;
  height: 100%;
  padding: 28px var(--margem) calc(var(--margem) + 40px);
}
#marca-crescedor { flex-grow: 1; }
#marca-container { width: min(30vw, 420px); }
#marca-container a { display: block; pointer-events: auto; }

/* --- o logo em 15 peças ---------------------------------------------------- */
.logo-pecas { position: relative; display: block; width: 100%; aspect-ratio: 706 / 411; }
.logo-peca {
  position: absolute; display: block;
  /* a máscara é o que faz a peça NASCER de dentro do nada, e não só acender */
  overflow: hidden;
}
.logo-peca > i {
  display: block; width: 100%; height: 100%;
  background: no-repeat center / 100% 100%;
  will-change: transform;
}
/* até o JS assumir, o que vai entrar fica escondido (rede de 2,5s no <head>) */
.pre-motion .logo-peca > i,
.pre-motion .hero__promessa > *,
.pre-motion .hud,
.pre-motion .menu-topo { opacity: 0; }
#marca-wrapper.esta-oculto { opacity: 0; }

/* --- o menu (contrato do Ponto Certo) --------------------------------------- */
:root {
  --menu-dur: 0.5s;                                  /* cortina, sinal, rolo */
  --menu-dur-conteudo: 0.3s;                         /* o texto */
  --menu-ease-cortina: cubic-bezier(0.4, 0, 0.2, 1);
  --menu-ease-conteudo: cubic-bezier(0, 0, 0.2, 1);
  --menu-ease-rolo: cubic-bezier(0.66, 0, 0.34, 1);
}
.menu-topo {
  position: fixed; z-index: 31; top: 28px; right: var(--margem);
  display: inline-flex; align-items: center; justify-content: space-between; gap: 2.2rem;
  min-width: 8.75rem; padding: 0.62rem 0.9rem;
  /* Menu/Fechar na Cormorant da headline, a pedido do Thiago em 12/11 */
  font-family: var(--display); font-size: 1.2rem; font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--texto);
  background: rgba(13, 10, 8, 0.45);
  border: 1px solid rgba(244, 237, 228, 0.36);
  border-radius: 2px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: border-color 0.3s ease, background 0.3s ease;
}
.menu-topo:hover { border-color: var(--ambar); }
.menu-topo__rotulo { display: block; overflow: hidden; height: 1.1em; line-height: 1.1; }
.menu-topo__rolo { display: block; transition: transform var(--menu-dur) var(--menu-ease-rolo); }
.menu-topo__rolo > span { display: block; height: 1.1em; line-height: 1.1; }
[aria-expanded="true"] .menu-topo__rolo { transform: translateY(-1.1em); }
.menu-topo__sinal { position: relative; width: 12px; height: 12px; flex: none; transition: transform var(--menu-dur) var(--menu-ease-conteudo); }
.menu-topo__sinal::before, .menu-topo__sinal::after {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 100%; height: 1px; background: currentColor;
  transform: translateY(-50%);
}
.menu-topo__sinal::after { transform: translateY(-50%) rotate(90deg); }
[aria-expanded="true"] .menu-topo__sinal { transform: rotate(135deg); }

/* O painel, no contrato medido do Ponto Certo (base.css de lá):
   - a caixa nasce em METADE do tamanho e cresce do centro-topo, junto com a
     cortina de clip-path: as duas camadas, 0,5s, mesma curva
   - um véu escurece a página atrás, subindo junto com a cortina
   - os itens correm em camada própria, 0,3s, degrau de 40ms só ao abrir
   - o painel só recebe ponteiro aberto, senão vira parede invisível */
.menu-painel {
  position: fixed; z-index: 30; top: 0; left: 0; right: 0;
  padding: 86px var(--margem) 0;
  pointer-events: none;
}
.menu-painel[hidden] { display: none; }
.menu-painel::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: rgba(6, 4, 3, 0.62);
  opacity: 0;
  transition: opacity var(--menu-dur) var(--menu-ease-cortina);
}
.menu-aberto .menu-painel { pointer-events: auto; }
.menu-aberto .menu-painel::before { opacity: 1; }
.menu-painel__caixa {
  padding: clamp(22px, 3vw, 34px) clamp(20px, 3vw, 36px) clamp(22px, 3vw, 30px);
  /* superfície escura com texto creme (o âmbar foi testado em 12/11 e saiu) */
  --linha-escura: var(--linha);
  background: var(--superficie);
  border: 1px solid var(--linha);
  color: var(--texto);
  border-radius: 2px;
  transform-origin: top center;
  transform: scale(0.5);
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--menu-dur) var(--menu-ease-cortina),
              transform var(--menu-dur) var(--menu-ease-cortina);
}
.menu-aberto .menu-painel__caixa { clip-path: inset(0 0 0% 0); transform: scale(1); }
/* cada coluna do tamanho do próprio texto: com 1fr, "Agendar pelo WhatsApp" quebrava */
.menu-painel__grade { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: clamp(28px, 5vw, 72px); }
.menu-painel__item {
  display: flex; flex-direction: row; align-items: center; gap: 14px;
  font-family: var(--display); font-size: clamp(28px, 2.6vw, 42px); line-height: 1.05;
  text-decoration: none; color: var(--texto);
  opacity: 0; transform: translateY(-50%);
  transition: color 0.25s ease,
              opacity var(--menu-dur-conteudo) var(--menu-ease-conteudo),
              transform var(--menu-dur-conteudo) var(--menu-ease-conteudo);
  transition-delay: 0s;
}
.menu-painel__icone { flex: none; width: 0.8em; height: 0.8em; color: var(--ambar); }
.menu-painel__item { white-space: nowrap; }
.menu-painel__item:hover { color: var(--ambar); }
.menu-aberto .menu-painel__item { opacity: 1; transform: none; }
.menu-aberto .menu-painel__item:nth-child(1) { transition-delay: 0s, .06s, .06s; }
.menu-aberto .menu-painel__item:nth-child(2) { transition-delay: 0s, .10s, .10s; }
.menu-aberto .menu-painel__item:nth-child(3) { transition-delay: 0s, .14s, .14s; }
.menu-painel__pe {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--linha-escura);
  color: var(--legenda);
  opacity: 0; transition: opacity var(--menu-dur-conteudo) var(--menu-ease-conteudo);
}
.menu-aberto .menu-painel__pe { opacity: 1; transition-delay: .18s; }

/* o logo SAI DE CENA com o menu aberto, em qualquer tela. visibility não
   interpola: ela espera o fade terminar para esconder, e volta na hora. */
#marca-wrapper { transition: opacity 0.32s var(--menu-ease-conteudo), visibility 0s linear 0s; }
.menu-aberto #marca-wrapper {
  opacity: 0; visibility: hidden;
  transition: opacity 0.32s var(--menu-ease-conteudo), visibility 0s linear 0.32s;
}

@media (max-width: 767px) {
  .menu-painel { padding-top: 76px; }
  .menu-painel__grade { grid-template-columns: 1fr; gap: 0; }
  .menu-painel__item { white-space: normal; }
  .menu-painel__item { gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--linha-escura); }
  .menu-painel__pe { border-top: 0; padding-top: 0; margin-top: 18px; line-height: 1.8; }
}
/* menos movimento: aparece e some, sem percurso. O clip fechado NÃO entra
   aqui, senão o menu nunca apareceria. */
@media (prefers-reduced-motion: reduce) {
  .menu-painel::before, .menu-painel__caixa, .menu-painel__item, .menu-painel__pe,
  .menu-topo__rolo, .menu-topo__sinal, #marca-wrapper { transition: none !important; }
}


/* ============================== 02 · A CASA =============================== */
.casa {
  position: relative; z-index: 2;
  background: var(--fundo);
  padding: clamp(96px, 16vh, 180px) var(--margem) 96px;
}
.casa__cabeca { max-width: 1100px; }
.casa__titulo {
  margin: 20px 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.casa__titulo em { font-style: normal; color: var(--legenda); }

.servicos {
  list-style: none; margin: clamp(64px, 10vh, 120px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--linha);
}
.servico { padding: 28px 28px 40px 0; border-right: 1px solid var(--linha); }
.servico + .servico { padding-left: 28px; }
.servico:last-child { border-right: 0; }
.servico__n { font-size: 11px; letter-spacing: 0.16em; color: var(--ambar); font-variant-numeric: tabular-nums; }
.servico__nome { margin: 48px 0 10px; font-family: var(--display); font-weight: 500; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.1; }
.servico__triade { margin: 0; color: var(--legenda); font-size: 14px; }
.casa__nota { margin-top: 72px; color: rgba(169, 147, 131, 0.7); }

.rodape {
  padding-bottom: 72px !important;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 28px var(--margem);
  border-top: 1px solid var(--linha);
  background: var(--fundo);
}
.assinatura {
  font-family: "Cinzel", serif; font-weight: 400; font-size: 13px; letter-spacing: 0.08em;
  color: var(--texto); text-decoration: none;
}
.assinatura b { font-weight: 900; }

/* estado inicial de quem surge, só quando o JS está vivo */
.tem-motion [data-surge] { opacity: 0; transform: translateY(12px); }

/* =========================== tela em pé ===========================
   Celular e tablet em pé. A dobra continua presa e com as duas fases; o que
   muda é a composição: logo grande centralizado no alto, promessa embaixo,
   e o palco encolhe como tira de filme (dobra.js, mosaico). */
@media (max-aspect-ratio: 0.8499) {
  #hero-wrapper { min-height: 280vh; }
  #marca-crescedor { display: none; }
  /* nasce centralizado por MARGEM, e não por align-items: margem é número,
     então o GSAP leva até 0 e o logo assenta no canto esquerdo, longe do
     botão Agendar (pedido do Thiago em 12/11) */
  .marca-trilho { align-items: flex-start; padding-top: 76px; }
  #marca-container { width: min(52vw, 340px); margin-left: calc((100% - min(52vw, 340px)) / 2); }
  .menu-topo { top: 22px; }
  .hero__promessa {
    left: var(--margem); right: var(--margem); bottom: 64px;
    width: auto; text-align: left; transform-origin: 50% 100%;
  }
  .hero__promessa h1 { font-size: clamp(32px, 9vw, 60px); }
  .hero__apoio { margin-left: 0; }
  .hero__cta, .hero__tracos { justify-content: flex-start; }
  .botao { flex: 1 1 100%; justify-content: space-between; }
  .hero__veu {
    background: linear-gradient(180deg, rgba(13, 10, 8, 0.7) 0%, rgba(13, 10, 8, 0.15) 30%, rgba(13, 10, 8, 0.55) 52%, rgba(13, 10, 8, 0.95) 100%);
  }
  /* em pé só sobra uma fresta da borda de cada coluna lateral: a foto
     montada no quarto visível tem que cair nela */
  .hero__ladrilho[data-pos$="esq"] img { object-position: 100% 50%; }
  .hero__ladrilho[data-pos$="dir"] img { object-position: 0% 50%; }
  .hero__convite-caixa { padding: 32px 20px; }
  .hero__convite-caixa::before { inset: -20% -10%; }
  .hero__convite-titulo { font-size: clamp(30px, 8vw, 52px); }
  .vela { background: radial-gradient(ellipse 80% 40% at 50% 100%, rgba(216, 144, 80, 0.2), rgba(216, 144, 80, 0) 70%); }
}

/* ============================== celular ============================== */
@media (max-width: 767px) {
  .hud { grid-template-columns: 1fr auto; padding: 44px var(--margem) 18px; }
  .hud__meio { display: none; }
  .servicos { grid-template-columns: 1fr; }
  .servico, .servico + .servico { padding: 24px 0 32px; border-right: 0; border-bottom: 1px solid var(--linha); }
  .servico__nome { margin-top: 20px; }
}

/* ============================ movimento reduzido ===========================
   Sem scrub o logo nunca encolheria e cobriria a página. Aqui ele já nasce
   pequeno no topo e a dobra vira uma tela só, sem rolagem presa. */
@media (prefers-reduced-motion: reduce) {
  #hero-wrapper { min-height: 100svh; }
  #hero { position: relative; }
  .hero__ladrilho, .hero__convite { display: none; }
  #marca-wrapper { position: absolute; }
  #marca-crescedor { display: none; }
  #marca-container { width: 132px !important; margin-left: 0 !important; }
  .cortina { display: none; }
  .hero__slide { transition: none; }
}