/* Site Cinematográfico · © 2026 Labrego IA · LBG-SC-2026-v1 */

/* ── Tokens: Antevi · branco, preto e bronze ────────────────────────────── */
:root {
  --fundo: #ffffff;          /* MESMA cor usada nos prompts das imagens */
  --fundo-2: #f5f4f1;
  --texto: #111111;
  --texto-suave: #5f5b55;
  --acento: #111111;         /* botões: preto, como nas maisons */
  --acento-texto: #ffffff;
  --detalhe: #8c6a4a;        /* bronze: rótulos e números */
  --escuro: #111111;
  --linha: rgb(17 17 17 / 0.12);
  --painel: rgb(255 255 255 / 0.74);
  --mistura: multiply;       /* tema claro */

  --fonte-titulo: "Jost", "Futura", system-ui, sans-serif;
  --fonte-texto: "Geist", system-ui, sans-serif;

  --raio: 4px;
  --gutter: clamp(16px, 4vw, 64px);
  --largura: 1280px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 300 clamp(15px, 1vw, 17px)/1.7 var(--fonte-texto);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
/* Grão de filme bem leve: tira o aspecto "liso de IA" sem sujar o branco */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .035;
  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");
  animation: grao 1s steps(4) infinite;
}
@keyframes grao { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }

img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 300; line-height: 1.08; margin: 0 0 .55em; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: clamp(36px, 4.6vw, 74px); }
h2 { font-size: clamp(32px, 3.9vw, 60px); }
h3 { font-size: clamp(20px, 1.6vw, 24px); font-weight: 400; letter-spacing: 0; }
p { margin: 0 0 1em; color: var(--texto-suave); text-wrap: pretty; }
strong { font-weight: 500; color: var(--texto); }

/* ── Topo ──────────────────────────────────────────────────────────────── */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 20px var(--gutter);
  transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s;
}
.topo:not(.rolou) { color: #fff; }
.topo:not(.rolou) .marca-logo { filter: invert(1) brightness(2); }
.topo:not(.rolou) .marca-apoio { color: rgb(255 255 255 / .8); border-left-color: rgb(255 255 255 / .3); }
.topo:not(.rolou) .menu-cta { background: #fff; color: #111; }
.topo.rolou { background: rgb(255 255 255 / .82); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); padding-block: 14px; box-shadow: 0 1px 0 var(--linha); }
.marca { text-decoration: none; display: flex; align-items: center; gap: 16px; min-width: 0; }
.marca-logo { height: 18px; width: auto; }
.marca-apoio { font-size: 11px; letter-spacing: .08em; color: var(--texto-suave); max-width: 190px; line-height: 1.35; padding-left: 16px; border-left: 1px solid var(--linha); }
.menu { display: flex; gap: 34px; align-items: center; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.menu a { text-decoration: none; opacity: .75; transition: opacity .3s; }
.menu a:hover { opacity: 1; }
.topo-acoes { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.icone { width: 34px; height: 34px; display: grid; place-items: center; opacity: .75; transition: opacity .3s; }
.icone:hover { opacity: 1; }
.icone svg { width: 19px; height: 19px; }
.menu-cta {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  background: var(--acento); color: var(--acento-texto); padding: 11px 20px; border-radius: 999px; margin-left: 6px;
  transition: background .3s;
}
.menu-cta:hover { background: #333; }
@media (max-width: 1100px) { .marca-apoio { display: none; } }
@media (max-width: 860px) {
  .topo { grid-template-columns: 1fr auto; }
  .menu { display: none; }
  .icone { display: none; }
}

/* ── Abertura cinematográfica ──────────────────────────────────────────── */
.cine { position: relative; height: var(--altura, 400vh); background: var(--fundo); }
.cine-palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.cine-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cine-vinheta {
  position: absolute; inset: 0; pointer-events: none;
  /* véu escuro à esquerda, como no hero da BS: o texto branco lê sobre o vídeo */
  background:
    linear-gradient(to bottom, transparent 84%, var(--fundo) 100%),
    linear-gradient(to bottom, rgb(12 12 12 / .35), transparent 26%),
    linear-gradient(90deg, rgb(12 12 12 / .72) 0%, rgb(12 12 12 / .5) 34%, rgb(12 12 12 / .18) 64%, rgb(12 12 12 / .06) 100%);
  transition: opacity 1s var(--ease);
}
/* no último momento o véu se concentra no centro, atrás do texto e dos botões */
.cine-vinheta::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease);
  background: radial-gradient(70% 60% at 50% 50%, rgb(12 12 12 / .7), rgb(12 12 12 / .4) 55%, rgb(12 12 12 / .12) 100%); }
.cine.final .cine-vinheta { background: linear-gradient(to bottom, transparent 84%, var(--fundo) 100%), linear-gradient(to bottom, rgb(12 12 12 / .35), transparent 26%); }
.cine.final .cine-vinheta::after { opacity: 1; }
.momento--fim { text-align: center; text-shadow: 0 2px 24px rgb(0 0 0 / .35); }
.momento--fim .momento-logo { height: clamp(40px, 4.2vw, 62px); margin: 0 auto 20px; filter: drop-shadow(0 2px 18px rgb(0 0 0 / .45)) drop-shadow(0 0 1px rgb(255 255 255 / .9)); }
.momento--fim .slogan { color: #fbf1e4; margin-bottom: 30px; font-size: clamp(13px, 1.15vw, 17px); font-weight: 500; letter-spacing: .3em; text-shadow: 0 1px 3px rgb(0 0 0 / .55), 0 0 24px rgb(0 0 0 / .55); }
.momento--fim .destaque { color: #fff; font-weight: 400; font-size: clamp(28px, 3.2vw, 50px); line-height: 1.15; margin-bottom: 34px; }
.momento--fim .botao--claro { background: #fff; color: #111; border-color: #fff; box-shadow: 0 12px 40px rgb(0 0 0 / .25); }
.momento--fim .botao--claro:hover { background: #f1ede6; }
.momento--fim .botao--contorno { background: rgb(255 255 255 / .08); color: #fff; border-color: rgb(255 255 255 / .7); backdrop-filter: blur(6px); text-shadow: none; }
.momento--fim .botao--contorno:hover { background: rgb(255 255 255 / .18); border-color: #fff; }
.momento--livre { max-width: 720px; color: #fff; text-shadow: 0 2px 24px rgb(0 0 0 / .25); }
.momento--livre .rotulo { color: #d2b08e; font-size: 12px; margin-bottom: 26px; }
.momento--livre h1, .momento--livre .destaque { color: #fff; font-weight: 400; }
.momento--livre .destaque { font-size: clamp(30px, 3.6vw, 56px); line-height: 1.12; margin-bottom: .55em; }
.momento--livre .apoio { color: rgb(255 255 255 / .86); font-size: clamp(16px, 1.3vw, 20px); max-width: 560px; line-height: 1.6; }
.cine .cine-dica { color: #fff; }
.cine .cine-dica span { background: linear-gradient(#fff, transparent); }
.momento {
  position: absolute; inset: auto var(--gutter) 11vh; max-width: 620px;
  opacity: 0; transform: translateY(24px); filter: blur(6px);
  transition: opacity .7s var(--ease), transform .9s var(--ease), filter .7s var(--ease);
  pointer-events: none;
}
.momento.ativo { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.momento--direita { left: auto; right: var(--gutter); }
.momento--centro { left: 50%; right: auto; transform: translate(-50%, 24px); text-align: center; width: min(640px, calc(100% - 2 * var(--gutter))); }
.momento--centro.ativo { transform: translate(-50%, 0); }
.titulo-abertura { margin-bottom: 0; }
.apoio { font-size: clamp(15px, 1.15vw, 18px); margin: 0; }
.destaque { font-family: var(--fonte-titulo); font-weight: 300; font-size: clamp(23px, 2.4vw, 36px); line-height: 1.22; color: var(--texto); margin: 0 0 .6em; }
.destaque:last-child { margin: 0; }
.momento-logo { height: 22px; width: auto; margin: 4px auto 12px; }
.slogan { font-family: var(--fonte-titulo); font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--detalhe); margin: 0 0 22px; }
.acoes { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; justify-content: center; }
.cine-dica {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 8px; font-size: 10px; letter-spacing: .32em; text-transform: uppercase; opacity: .55;
  transition: opacity .5s;
}
.cine-dica span { width: 1px; height: 38px; background: linear-gradient(var(--texto), transparent); animation: dica 2s var(--ease) infinite; }
@keyframes dica { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.cine.andou .cine-dica { opacity: 0; }

/* ── Painéis (todo texto mora num painel) ──────────────────────────────── */
.painel {
  position: relative;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: clamp(26px, 3.4vw, 54px);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
}
.painel--vidro { background: rgb(255 255 255 / .62); border-color: rgb(255 255 255 / .7); box-shadow: 0 20px 60px rgb(17 17 17 / .08); }
.painel > :last-child { margin-bottom: 0; }
.rotulo { display: block; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--detalhe); margin-bottom: 20px; font-weight: 400; }

/* ── Seções ────────────────────────────────────────────────────────────── */
.secao {
  position: relative; isolation: isolate; overflow: clip;
  min-height: 100vh; padding: 18vh var(--gutter);
  display: grid; align-content: center;
}
.secao--tom { background: var(--fundo-2); }
.secao-grade { width: 100%; max-width: var(--largura); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 580px) 1fr; }
.secao-grade--direita { grid-template-columns: 1fr minmax(0, 580px); }
.secao-grade--direita > .painel { grid-column: 2; }
.secao--larga { gap: 24px; justify-items: center; }
.painel--cabecalho { width: 100%; max-width: var(--largura); }
.painel--cabecalho h2 { margin-bottom: .3em; }

.publicos { margin: 8px 0 0; display: grid; gap: 0; }
.publicos div { padding: 16px 0; border-top: 1px solid var(--linha); display: grid; gap: 2px; }
.publicos div:last-child { border-bottom: 1px solid var(--linha); }
.publicos dt { font-weight: 500; color: var(--texto); }
.publicos dd { margin: 0; color: var(--texto-suave); }

.passos { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: p; display: grid; gap: 22px; }
.passos li { counter-increment: p; display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; }
.passos li::before { content: counter(p, decimal-leading-zero); grid-row: span 2; font-family: var(--fonte-titulo); color: var(--detalhe); font-size: 20px; line-height: 1.4; }
.passos strong { font-weight: 500; }
.passos span { color: var(--texto-suave); }


/* ── Faixa escura: da planta ao vídeo ──────────────────────────────────── */
.faixa-escura { background: var(--escuro); color: #f4f2ee; padding: 16vh var(--gutter); }
.faixa-escura h2 { color: #fff; }
.faixa-escura p { color: rgb(244 242 238 / .66); }
.faixa-escura .rotulo { color: #b89a7c; }
.demo { max-width: var(--largura); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.demo-etapas { list-style: none; margin: 30px 0 26px; padding: 0; display: grid; }
.demo-etapas button {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; gap: 18px; align-items: baseline;
  padding: 16px 0; border-top: 1px solid rgb(255 255 255 / .14); color: rgb(244 242 238 / .5);
  font: 300 clamp(17px, 1.4vw, 21px)/1.3 var(--fonte-titulo); transition: color .4s;
}
.demo-etapas li:last-child button { border-bottom: 1px solid rgb(255 255 255 / .14); }
.demo-etapas button span { font-size: 12px; letter-spacing: .2em; color: #b89a7c; }
.demo-etapas button[aria-selected="true"], .demo-etapas button:hover { color: #fff; }
.demo-etapas button:focus-visible { outline: 1px solid #b89a7c; outline-offset: 4px; }
.nota { font-size: 12px; margin: 0; }
.demo-palco { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #1a1a1a; }
.arte--palco { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: 0; }
.arte--palco.anterior { opacity: 1; z-index: 1; }
.arte--palco.ativa { opacity: 1; z-index: 2; animation: varre 1.5s var(--ease) both; }
@keyframes varre { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.demo-progresso { z-index: 3; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgb(255 255 255 / .15); }
.demo-progresso span { display: block; height: 100%; width: 0; background: #fff; }
@media (max-width: 860px) { .demo { grid-template-columns: 1fr; } }

/* ── Arte: imagens fundidas ao fundo (nunca retângulo com borda) ───────── */
.arte {
  position: absolute; z-index: -1; pointer-events: none;
  object-fit: cover; mix-blend-mode: var(--mistura);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.arte--direita, .arte--esquerda { top: 0; bottom: 0; width: 62vw; height: 100%; }
.arte--direita {
  right: 0;
  -webkit-mask-image: linear-gradient(to left, #000 40%, transparent 96%), linear-gradient(to bottom, transparent, #000 16%, #000 82%, transparent);
          mask-image: linear-gradient(to left, #000 40%, transparent 96%), linear-gradient(to bottom, transparent, #000 16%, #000 82%, transparent);
}
.arte--esquerda {
  left: 0;
  -webkit-mask-image: linear-gradient(to right, #000 40%, transparent 96%), linear-gradient(to bottom, transparent, #000 16%, #000 82%, transparent);
          mask-image: linear-gradient(to right, #000 40%, transparent 96%), linear-gradient(to bottom, transparent, #000 16%, #000 82%, transparent);
}
.arte--fundo {
  inset: 0; width: 100%; height: 100%; opacity: .55;
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent 100%), linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
          mask-image: radial-gradient(closest-side, #000 35%, transparent 100%), linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}
.arte--suave { opacity: .4; }
/* Obras do portfólio: foto inteira, base dissolvendo na legenda */
.arte.arte--obra {
  position: static; z-index: auto; width: 100%; aspect-ratio: 4 / 3; mix-blend-mode: normal;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
          mask-image: linear-gradient(to bottom, #000 82%, transparent);
  transition: transform 1.2s var(--ease);
}
/* No palco da demonstração a imagem é o próprio produto: sem máscara nem mistura */
.arte.arte--palco { z-index: auto; mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none; }

/* ── Contato: formulário em etapas ─────────────────────────────────────── */
.secao--contato { background: var(--fundo-2); }
.contato-grade { width: 100%; max-width: var(--largura); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px; align-items: start; }
.previa { color: var(--texto); }
.canais { list-style: none; margin: 28px 0 0; padding: 0; display: grid; }
.canais li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--linha); font-size: 14px; }
.canais li span { color: var(--texto-suave); letter-spacing: .06em; }
.canais a { text-decoration: none; }
.canais a:hover { text-decoration: underline; }
.painel--form { background: rgb(255 255 255 / .9); }
.form-cabeca { display: grid; gap: 12px; margin-bottom: 28px; }
.form-etapa { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--detalhe); }
.form-barra { height: 2px; background: var(--linha); }
.form-barra span { display: block; height: 100%; width: 25%; background: var(--texto); transition: width .6s var(--ease); }
.etapa { border: 0; margin: 0; padding: 0; display: none; }
.etapa.ativa { display: grid; gap: 26px; animation: entra .6s var(--ease); }
@keyframes entra { from { opacity: 0; transform: translateY(12px); } }
.etapa legend { font-family: var(--fonte-titulo); font-size: clamp(24px, 2vw, 30px); padding: 0; margin-bottom: 4px; float: left; width: 100%; }
.pergunta { margin: 0 0 12px; color: var(--texto); font-size: 15px; }
.grupo.erro .pergunta { color: #b4473a; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span {
  display: inline-block; padding: 10px 18px; border: 1px solid var(--linha); border-radius: 999px; font-size: 14px;
  transition: background .3s, color .3s, border-color .3s;
}
.chips label:hover span { border-color: var(--texto); }
.chips input:checked + span { background: var(--texto); color: #fff; border-color: var(--texto); }
.chips input:focus-visible + span { outline: 2px solid var(--detalhe); outline-offset: 2px; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.campo { display: grid; gap: 6px; }
.campo--inteiro { grid-column: 1 / -1; }
.campo label { font-size: 12px; letter-spacing: .08em; color: var(--texto-suave); }
.opcional { opacity: .7; }
.campo input, .campo textarea {
  width: 100%; font: inherit; color: var(--texto);
  background: transparent; border: 0; border-bottom: 1px solid rgb(17 17 17 / .25); border-radius: 0;
  padding: 10px 0; transition: border-color .3s; resize: vertical;
}
.campo input:focus, .campo textarea:focus { outline: none; border-bottom-color: var(--texto); }
.campo.erro input { border-bottom-color: #b4473a; }
.dica-planta { font-size: 13px; margin: 0; }
.pote { position: absolute; left: -9999px; }
.form-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px; }
.form-nav [hidden] { display: none; }
.form-status { min-height: 1.4em; margin: 16px 0 0; font-size: 14px; }
.form-status.ok { color: var(--texto); }
.form-status.falha { color: #b4473a; }
@media (max-width: 960px) { .contato-grade { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .campos { grid-template-columns: 1fr; } }

/* ── Botões e links ────────────────────────────────────────────────────── */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 400 12px/1 var(--fonte-texto); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  color: var(--acento-texto); background: var(--acento); border: 1px solid var(--acento); border-radius: 999px;
  padding: 18px 30px; transition: background .3s, color .3s, transform .4s var(--ease);
}
.botao:hover { background: #2b2b2b; }
.botao--linha { background: transparent; color: var(--texto); border-color: rgb(17 17 17 / .3); }
.botao--linha:hover { background: transparent; border-color: var(--texto); }
.botao[disabled] { opacity: .55; cursor: progress; }
.link-seta { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; display: inline-flex; gap: 8px; }
.link-seta span { transition: transform .4s var(--ease); }
.link-seta:hover span { transform: translateX(4px); }

/* ── WhatsApp flutuante ────────────────────────────────────────────────── */
.whats {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 60;
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: #111; color: #fff; box-shadow: 0 10px 30px rgb(0 0 0 / .2);
  transform: scale(0); transition: transform .5s var(--ease);
}
.whats[hidden] { display: none; }
.whats.visivel { transform: scale(1); }
.whats:hover { transform: scale(1.07); }
.whats svg { width: 28px; height: 28px; }

/* ── Rodapé ────────────────────────────────────────────────────────────── */
.rodape { padding: 0 var(--gutter) 40px; background: var(--fundo-2); }
.rodape-painel { max-width: var(--largura); margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 28px 40px; align-items: center; font-size: 14px; color: var(--texto-suave); padding: 40px; }
.rodape-marca { display: grid; gap: 10px; }
.rodape-logo { height: 20px; width: auto; }
.rodape--escuro .rodape-logo { height: clamp(30px, 3vw, 40px); }
.rodape--escuro .rodape-marca { gap: 14px; }
.rodape-marca span { font-size: 12px; letter-spacing: .06em; }
.rodape-marca .slogan { margin: 2px 0 0; font-size: 11px; }
.rodape-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.rodape-links a { text-decoration: none; }
.rodape-links a:hover { color: var(--texto); }
.aviso { font-size: 12px; margin: 0; }
.rodape-base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 24px; font-size: 12px; padding-top: 22px; border-top: 1px solid var(--linha); }
@media (max-width: 760px) { .rodape-painel { grid-template-columns: 1fr; padding: 28px 22px; } }

/* ── Revelar ao rolar ──────────────────────────────────────────────────── */
.revelar { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.revelar.visto { opacity: 1; transform: none; }

/* ── Celular ───────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .secao { padding: 14vh var(--gutter); min-height: auto; }
  .secao-grade, .secao-grade--direita { grid-template-columns: 1fr; }
  .secao-grade--direita > .painel { grid-column: 1; }
  .arte--direita, .arte--esquerda { left: 0; right: 0; width: 100%; height: 60%; opacity: .6;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 55%, transparent);
            mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 55%, transparent); }
  .momento, .momento--direita { left: var(--gutter); right: var(--gutter); bottom: 9vh; }
  .cine-vinheta { background:
    linear-gradient(to bottom, transparent 92%, var(--fundo) 100%),
    linear-gradient(to bottom, rgb(12 12 12 / .4), transparent 22%),
    linear-gradient(to top, rgb(12 12 12 / .78) 0%, rgb(12 12 12 / .5) 42%, rgb(12 12 12 / .12) 75%); }
  .momento--centro { width: auto; transform: translateY(24px); }
  .momento--centro.ativo { transform: none; }
  .faixa-escura { padding: 12vh var(--gutter); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .revelar, .momento--abre { opacity: 1; transform: none; filter: none; }
  .cine { height: 100svh; }
  .momento:not(.momento--abre), .cine-dica { display: none; }
}


/* ══ Novas seções ══════════════════════════════════════════════════════ */

/* Seções com foto ocupando tudo (Para quem vende, Processo) */
.secao--foto { min-height: 110vh; }
.arte.arte--cheia {
  inset: 0; width: 100%; height: 100%; mix-blend-mode: normal; object-position: center;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
}
.painel--claro { background: rgb(255 255 255 / .8); border-color: rgb(255 255 255 / .6); box-shadow: 0 30px 80px rgb(17 17 17 / .12); }
#para-quem .arte--cheia { object-position: 70% 50%; }
#processo .arte--cheia { object-position: 65% 50%; }
#abordagem .arte--cheia { object-position: 30% 50%; }

/* Faixas escuras: variações */
.faixa-escura h3 { color: #fff; }
.faixa-escura--solucoes, .faixa-escura--filme, .faixa-escura--parceiros { padding: 16vh var(--gutter); }
.solucoes-cabeca, .filme-cabeca, .parceiros-cabeca { max-width: var(--largura); margin: 0 auto 56px; }
.solucoes-cabeca h2, .filme-cabeca h2 { max-width: 760px; }
.solucoes-cabeca p, .filme-cabeca p { max-width: 560px; }

/* Soluções: cartões verticais com imagem que se abrem ao passar o mouse */
.cartoes-solucao { list-style: none; margin: 0 auto; padding: 0; max-width: var(--largura); display: flex; gap: 14px; height: min(78vh, 720px); }
.cartao-solucao { position: relative; flex: 1 1 0; overflow: hidden; isolation: isolate; cursor: default; transition: flex-grow .9s var(--ease); outline: none; }
.cartao-solucao:hover, .cartao-solucao:focus-visible { flex-grow: 2.2; }
/* só a base escurece, para o título continuar legível */
.cartao-solucao::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(0 0 0 / .62), rgb(0 0 0 / .18) 34%, transparent 52%); transition: opacity .9s; }
.cartao-solucao h3, .cartao-solucao .frase { text-shadow: 0 1px 12px rgb(0 0 0 / .45); }
.cartao-solucao-texto { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 30px; text-align: center; display: grid; justify-items: center; }
.cartao-solucao h3 { margin: 0 0 6px; font-size: clamp(15px, 1.2vw, 20px); line-height: 1.2; text-transform: uppercase; letter-spacing: .04em; font-weight: 300; }
.cartao-solucao .frase { margin: 0; font-size: 10px; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .75); }
.cartao-solucao .detalhe { margin: 0; max-height: 0; opacity: 0; overflow: hidden; color: rgb(255 255 255 / .85); font-size: 14px; max-width: 320px; transition: max-height .8s var(--ease), opacity .6s, margin .6s; }
.cartao-solucao:hover .detalhe, .cartao-solucao:focus-visible .detalhe { max-height: 120px; opacity: 1; margin-top: 14px; }
.seta { margin-top: 16px; width: 14px; height: 14px; border-left: 2px solid #b89a7c; border-top: 2px solid #b89a7c; transform: rotate(45deg); transition: transform .6s var(--ease); }
.cartao-solucao:hover .seta { transform: rotate(225deg) translate(4px, 4px); }

/* Cartões animados: cada forma se mostra sozinha assim que a seção entra na tela */
.anim { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #1a1917; filter: brightness(.9) saturate(1.05); transition: filter .9s var(--ease); }
.cartao-solucao:hover .anim, .cartao-solucao:focus-visible .anim { filter: none; }
.anim img, .anim video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Imagens realistas e plantas: troca suave com aproximação lenta */
.anim--slides > img, .anim--slides > .slide { opacity: 0; transform: scale(1.1); transition: opacity 1.3s ease, transform 0s linear 1.3s; }
.anim--slides > img.ativa, .anim--slides > .slide.ativa { opacity: 1; transform: scale(1); transition: opacity 1.3s ease, transform 7s cubic-bezier(.25, .1, .25, 1); z-index: 1; }
.anim--plantas { background: #f3f1ec; }
.slide { position: absolute; inset: 0; }
.slide--par .sobre { clip-path: inset(0 100% 0 0); transition: clip-path 0s linear 1.4s; }
.slide--par.ativa .sobre { clip-path: inset(0 0 0 0); transition: clip-path 2.8s cubic-bezier(.65, 0, .35, 1) .7s; }
.slide--par .linha { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: #c9a77f; box-shadow: 0 0 16px rgb(201 167 127 / .8); opacity: 0; transition: left 0s linear 1.4s, opacity .3s; }
.slide--par.ativa .linha { left: 100%; opacity: 1; transition: left 2.8s cubic-bezier(.65, 0, .35, 1) .7s, opacity .4s .7s; }

/* Vídeo: barra de progresso e selo de gravação */
.anim-rec { position: absolute; top: 16px; left: 16px; z-index: 2; display: flex; align-items: center; gap: 6px; font: 500 10px/1 var(--fonte-titulo); letter-spacing: .2em; color: #fff; text-shadow: 0 1px 6px rgb(0 0 0 / .5); }
.anim-rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #e0453a; animation: piscar 1.4s steps(2, jump-none) infinite; }
@keyframes piscar { 50% { opacity: .15; } }
.anim-barra { position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2; background: rgb(255 255 255 / .18); }
.anim-barra i { display: block; height: 100%; width: 0; background: #c9a77f; }

/* Tour 360°: a câmera olha em volta como se alguém navegasse */
.anim-tour-vista { position: absolute; inset: 0; opacity: 0; transition: opacity 1s; pointer-events: none; }
.anim-tour-vista.pronto { opacity: 1; }
.anim--tour .pnlm-ui, .anim--tour .pnlm-load-box, .anim--tour .pnlm-about-msg { display: none !important; }
.anim--tour .pnlm-container { background: transparent; }
.anim-selo { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 2; padding: 6px 12px; border: 1px solid rgb(255 255 255 / .55); border-radius: 99px; font: 400 11px/1 var(--fonte-titulo); letter-spacing: .18em; color: #fff; background: rgb(0 0 0 / .18); backdrop-filter: blur(6px); }
.anim-mao { position: absolute; top: 40%; left: 50%; z-index: 2; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .9); background: rgb(255 255 255 / .22); box-shadow: 0 2px 14px rgb(0 0 0 / .3); opacity: 0; }
.anim-mao.arrastando { animation: arrastar 2.6s var(--ease) both; }
@keyframes arrastar { 0% { opacity: 0; transform: translateX(28px) scale(1.2); } 15% { opacity: 1; transform: translateX(28px) scale(.9); } 80% { opacity: 1; transform: translateX(-28px) scale(.9); } 100% { opacity: 0; transform: translateX(-28px) scale(1.2); } }

/* Site de lançamento: celular rolando uma página */
.anim--site { container-type: size; }
.anim--site .anim-fundo { filter: blur(14px) brightness(.55); transform: scale(1.15); }
.celular { position: absolute; left: 50%; top: 7%; transform: translateX(-50%); height: min(70cqh, 470px, 80cqw * 19 / 9); aspect-ratio: 9 / 19; padding: 6px; border-radius: 26px; background: #0d0d0d; box-shadow: 0 0 0 1px rgb(255 255 255 / .16), 0 24px 50px rgb(0 0 0 / .5); }
.tela { position: relative; height: 100%; overflow: hidden; border-radius: 20px; background: #fbfaf7; container-type: inline-size; }
.pagina { color: #1d1b18; font-family: var(--fonte-texto); }
.cartao-solucao.anima .pagina { animation: rolar-site 16s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes rolar-site {
  0%, 9% { transform: translateY(0); }
  21%, 31% { transform: translateY(-150cqw); }
  43%, 53% { transform: translateY(-300cqw); }
  65%, 75% { transform: translateY(-445cqw); }
  87%, 100% { transform: translateY(0); }
}
.anim .pagina img { position: static; display: block; }
.ms-topo { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; height: 18cqw; padding: 0 7cqw; background: #fbfaf7; }
.ms-marca { font: 500 4.6cqw/1 var(--fonte-titulo); letter-spacing: .22em; }
.ms-menu { width: 7cqw; height: 4cqw; border-top: 1px solid #1d1b18; border-bottom: 1px solid #1d1b18; }
.ms-hero { position: relative; height: 150cqw; }
.ms-hero img { width: 100%; height: 100%; object-fit: cover; }
.ms-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .6), transparent 55%); }
.ms-hero-texto { position: absolute; left: 7cqw; right: 7cqw; bottom: 9cqw; z-index: 1; display: grid; gap: 3cqw; color: #fff; }
.ms-hero-texto span { font-size: 3.6cqw; letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
.ms-hero-texto b { font: 300 10cqw/1.05 var(--fonte-titulo); }
.ms-hero-texto i, .ms-form i { justify-self: start; font-style: normal; font-size: 3.8cqw; letter-spacing: .12em; text-transform: uppercase; padding: 3.4cqw 6cqw; border-radius: 99px; background: #fff; color: #1d1b18; }
.ms-dados { display: grid; grid-template-columns: repeat(3, 1fr); padding: 8cqw 5cqw; text-align: center; border-bottom: 1px solid #e6e1d8; }
.ms-dados span { display: grid; font-size: 3.4cqw; letter-spacing: .1em; text-transform: uppercase; color: #6d665c; }
.ms-dados b { font: 300 9cqw/1.1 var(--fonte-titulo); color: #1d1b18; }
.ms-titulo { margin: 0; padding: 8cqw 7cqw 4cqw; font: 400 6.4cqw/1 var(--fonte-titulo); }
.ms-galeria { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; padding: 0 5cqw; }
.ms-galeria img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2cqw; }
.ms-planta { margin: 0 5cqw; padding: 3cqw; background: #fff; border-radius: 2cqw; }
.ms-planta img, .ms-lazer img { width: 100%; height: auto; border-radius: 2cqw; }
.ms-lazer { padding: 0 5cqw; }
.ms-form { display: grid; gap: 3cqw; margin: 8cqw 0 0; padding: 0 7cqw 12cqw; background: #f1ede6; }
.ms-form .ms-titulo { padding: 8cqw 0 2cqw; }
.ms-form span { padding: 3.4cqw 4cqw; font-size: 3.6cqw; color: #8b8378; background: #fff; border: 1px solid #e0d9cd; border-radius: 1.6cqw; }
.ms-form i { justify-self: stretch; text-align: center; background: #1d1b18; color: #fff; }
.anim-toque { position: absolute; left: 50%; top: 52%; z-index: 2; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: rgb(255 255 255 / .5); border: 2px solid #fff; box-shadow: 0 2px 10px rgb(0 0 0 / .3); opacity: 0; }
.cartao-solucao.anima .anim-toque { animation: deslizar 16s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes deslizar {
  0%, 7% { opacity: 0; transform: translateY(40px); }
  9% { opacity: 1; transform: translateY(40px); }
  21% { opacity: 1; transform: translateY(-50px); }
  23%, 29% { opacity: 0; transform: translateY(40px); }
  31% { opacity: 1; transform: translateY(40px); }
  43% { opacity: 1; transform: translateY(-50px); }
  45%, 51% { opacity: 0; transform: translateY(40px); }
  53% { opacity: 1; transform: translateY(40px); }
  65% { opacity: 1; transform: translateY(-50px); }
  67%, 100% { opacity: 0; transform: translateY(-50px); }
}
@media (prefers-reduced-motion: reduce) {
  .cartao-solucao.anima .pagina, .cartao-solucao.anima .anim-toque { animation: none; }
}
@media (max-width: 860px) {
  .cartoes-solucao { height: auto; flex-direction: column; }
  .cartao-solucao { height: 380px; flex: none; }
  .celular { top: 5%; height: min(44cqh, 80cqw * 19 / 9); }
  .cartao-solucao .detalhe { max-height: 120px; opacity: 1; margin-top: 12px; }
}

/* Filme: da planta crua ao lar */
.filme-tela { position: relative; max-width: var(--largura); margin: 0 auto; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.filme-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.filme-play { position: absolute; right: 20px; bottom: 20px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .5); background: rgb(0 0 0 / .3); backdrop-filter: blur(8px); cursor: pointer; display: grid; place-items: center; }
.filme-play span { width: 12px; height: 14px; border-left: 3px solid #fff; border-right: 3px solid #fff; }
.filme-play.pausado span { width: 0; height: 0; border: 0; border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; }

/* Portfólio com filtros */
.secao--portfolio { min-height: auto; padding: 16vh var(--gutter); display: block; }
.portfolio-cabeca { max-width: var(--largura); margin: 0 auto 40px; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 40px; }
.portfolio-cabeca .rotulo { width: 100%; margin-bottom: 0; }
.portfolio-cabeca h2 { margin: 0; }
.filtros { display: flex; flex-wrap: wrap; gap: 10px; }
.filtros button {
  font: 400 12px/1 var(--fonte-texto); letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  padding: 13px 20px; border-radius: 999px; border: 1px solid rgb(17 17 17 / .2); background: transparent; color: var(--texto);
  transition: background .3s, color .3s, border-color .3s;
}
.filtros button:hover { border-color: var(--texto); }
.filtros button[aria-selected="true"] { background: var(--texto); color: #fff; border-color: var(--texto); }
.galeria { max-width: var(--largura); margin: 0 auto; }
.galeria[hidden] { display: none; }
.galeria.ativa { animation: entra .8s var(--ease); }
.galeria[data-grupo="imagens"] { columns: 3 320px; column-gap: 12px; }
.peca, .peca-filme { position: relative; margin: 0 0 12px; break-inside: avoid; overflow: hidden; cursor: zoom-in; }
.peca .arte--obra, .peca-filme .arte--obra, .antes-depois .arte--obra { aspect-ratio: auto; height: auto; -webkit-mask-image: none; mask-image: none; }
.peca--alta .arte--obra { aspect-ratio: 3 / 4; object-fit: cover; }
.peca figcaption, .peca-filme figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; color: #fff; display: grid; gap: 2px; font-size: 12px; letter-spacing: .06em;
  background: linear-gradient(to top, rgb(0 0 0 / .6), transparent); opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .6s var(--ease);
}
.peca figcaption strong, .peca-filme figcaption strong { color: #fff; font-family: var(--fonte-titulo); font-weight: 300; font-size: 18px; letter-spacing: 0; }
.peca:hover figcaption, .peca-filme:hover figcaption, .peca-filme figcaption { opacity: 1; transform: none; }
.peca .arte--obra { transition: transform 1.2s var(--ease); }
.peca:hover .arte--obra { transform: scale(1.03); }
.galeria--filmes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.peca-filme { cursor: pointer; margin: 0; }
.peca-filme .arte--obra { aspect-ratio: 16 / 9; object-fit: cover; }
.play { position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgb(255 255 255 / .9); transition: transform .5s var(--ease); }
.play::after { content: ""; position: absolute; left: 26px; top: 21px; border-left: 16px solid #111; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.peca-filme:hover .play { transform: scale(1.1); }

/* Antes e depois das plantas */
.galeria--plantas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 24px; }
.antes-depois { position: relative; margin: 0; background: #fff; overflow: hidden; }
.antes-depois .arte--obra { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #fff; }
.antes-depois .antes { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--corte)) 0 0); }
.antes-depois::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--corte); width: 1px; background: #111; z-index: 2; pointer-events: none; aspect-ratio: auto; height: calc(100% - 64px); }
.antes-depois input[type=range] { position: absolute; inset: 0 0 64px 0; width: 100%; height: calc(100% - 64px); margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; }
.antes-depois::after { content: "‹ ›"; position: absolute; top: calc((100% - 64px) / 2); left: var(--corte); transform: translate(-50%, -50%); z-index: 2; pointer-events: none; width: 44px; height: 44px; border-radius: 50%; background: #111; color: #fff; display: grid; place-items: center; font-size: 16px; letter-spacing: 2px; }
.ad-rotulo { position: absolute; top: 14px; z-index: 2; font-size: 10px; letter-spacing: .26em; text-transform: uppercase; background: rgb(255 255 255 / .85); padding: 6px 10px; }
.ad-rotulo--antes { left: 14px; } .ad-rotulo--depois { right: 14px; }
.antes-depois figcaption { display: grid; gap: 2px; padding: 14px 4px 0; height: 64px; font-size: 13px; color: var(--texto-suave); background: var(--fundo-2); }
.antes-depois figcaption strong { font-family: var(--fonte-titulo); font-weight: 400; font-size: 18px; }

/* Tour 360° */
.tour { width: 100%; aspect-ratio: 16 / 8; min-height: 360px; background: #e9e6e0; }
.tour-dica { text-align: center; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin: 16px 0 0; }
/* site de lançamento: o vídeo da navegação dentro de uma janela de navegador */
.galeria--sites { max-width: 1100px; margin: 0 auto; }
.navegador { margin: 0; border-radius: 12px; overflow: hidden; background: #0b0e13; box-shadow: 0 30px 80px rgb(17 17 17 / .18); }
.navegador-barra { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #1b1e24; }
.navegador-barra i { width: 10px; height: 10px; border-radius: 50%; background: rgb(255 255 255 / .22); }
.navegador-barra span { margin: 0 auto; padding: 4px 18px; border-radius: 20px; background: rgb(255 255 255 / .07); color: rgb(255 255 255 / .6); font-size: 11px; letter-spacing: .06em; }
.navegador video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #0b0e13; }
.site-legenda { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 20px; }
.site-legenda strong { display: block; font-family: var(--fonte-titulo); font-weight: 400; font-size: 20px; }
.site-legenda span { font-size: 13px; color: var(--texto-suave); }
.site-acoes { display: flex; flex-wrap: wrap; gap: 10px; }

/* Parceiros e números */
.logos { list-style: none; margin: 0 auto 80px; padding: 0; max-width: var(--largura); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 40px 64px; }
.logos[hidden] { display: none; }
.logos img { height: 36px; width: auto; filter: grayscale(1) brightness(2); opacity: .7; transition: opacity .3s; }
.logos img:hover { opacity: 1; }
.numeros { max-width: var(--largura); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; text-align: center; }
.numeros dt { font-family: var(--fonte-titulo); font-weight: 300; font-size: clamp(48px, 6vw, 92px); color: #b89a7c; line-height: 1; }
.numeros dt::before { content: "+"; margin-right: .1em; }
.numeros dd { margin: 14px 0 0; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: rgb(244 242 238 / .75); }
@media (max-width: 640px) { .numeros { grid-template-columns: 1fr; gap: 48px; } }

/* Rodapé escuro */
.rodape--escuro { background: var(--escuro); padding-top: 40px; }
.rodape--escuro .rodape-painel { background: transparent; border-color: rgb(255 255 255 / .14); color: #fff; backdrop-filter: none; }
.rodape--escuro .rodape-links a { color: #fff; }
.rodape--escuro .rodape-links a:hover { opacity: .75; }
.rodape--escuro .aviso, .rodape--escuro p { color: rgb(255 255 255 / .88); }
.rodape--escuro .rodape-base { border-color: rgb(255 255 255 / .14); }
.rodape-redes { display: flex; gap: 14px; align-items: center; }
.rodape-icone { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / .3); border-radius: 50%; transition: background .3s, border-color .3s; }
.rodape-icone:hover { background: rgb(255 255 255 / .1); border-color: #fff; }
.rodape-icone svg { width: 18px; height: 18px; }
.rodape-links { align-items: center; }
.rodape--escuro .slogan { color: #b89a7c; }

/* Caixa de vídeo do portfólio */
.caixa-video { padding: 0; border: 0; background: #000; width: min(1200px, 94vw); max-height: 90vh; }
.caixa-video::backdrop { background: rgb(0 0 0 / .85); }
.caixa-video video { display: block; width: 100%; max-height: 90vh; }
.caixa-fechar { position: absolute; top: 8px; right: 12px; z-index: 2; background: none; border: 0; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; }

/* Etapa 4 da demonstração: sala, quarto e jantar em sequência */
.demo-cenas { background: #000; }
.demo-cenas .cena { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s var(--ease); }
.demo-cenas .cena.ativa { opacity: 1; }
.cena-rotulo { position: absolute; left: 16px; top: 14px; z-index: 2; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: #fff; background: rgb(0 0 0 / .35); backdrop-filter: blur(6px); padding: 6px 10px; }
@media (min-width: 861px) {
  .momento--livre { top: 30vh; bottom: auto; left: max(var(--gutter), 6vw); }
  .momento--fim { top: 34vh; bottom: auto; }
}

/* Contato sobre a casa à noite: fundo escuro, caixas brancas em destaque */
.secao--noite { background: var(--escuro); }
.secao--noite .arte--cheia { object-position: 50% 60%; -webkit-mask-image: none; mask-image: none; }
.secao--noite::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgb(10 10 10 / .45), rgb(10 10 10 / .25) 40%, rgb(10 10 10 / .55)); }
.secao--noite .painel { background: rgb(255 255 255 / .95); border-color: rgb(255 255 255 / .9); box-shadow: 0 30px 90px rgb(0 0 0 / .45); }