/* JH CASTROS — identidade do site (manual de marca v1.0)
   Paleta: preto cena, grafite, branco, bege (acento único), bege escuro, areia.
   Tipos: Big Shoulders Display (títulos, caixa-alta) + Outfit (texto). */

:root {
  --preto: #0A0A0A;
  --grafite: #17171A;
  --linha: #2A2A2E;
  --branco: #FFFFFF;
  --bege: #B6AEA4;
  --bege-escuro: #6B635A;
  --areia: #8A877F;

  --f-titulo: "Big Shoulders Display", "Oswald", "Arial Narrow", sans-serif;
  --f-texto: "Outfit", "Helvetica Neue", Arial, sans-serif;

  /* escala tipográfica: 13 / 16 / 18 / 24 / 36 / 56 / 96 */
  --t-xs: 13px; --t-s: 16px; --t-m: 18px; --t-l: 24px; --t-xl: 36px; --t-2xl: 56px;
  --t-3xl: clamp(56px, 9vw, 132px);

  /* espaço: 8 / 16 / 24 / 40 / 64 / 104 / 168 */
  --e1: 8px; --e2: 16px; --e3: 24px; --e4: 40px; --e5: 64px; --e6: 104px; --e7: 168px;

  --margem: clamp(16px, 4vw, 56px);
  --raio: 4px;
  --suave: cubic-bezier(0.22, 1, 0.36, 1);

  --fx-fundo: var(--preto);
  --fx-tinta: var(--branco);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
.fx-reduzido { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--preto);
  color: var(--branco);
  font: 400 var(--t-m)/1.6 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--bege); color: var(--preto); }

h1, h2, h3 {
  font-family: var(--f-titulo);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.92;
  margin: 0;
}
p { margin: 0 0 var(--e2); max-width: 62ch; }

.rotulo {
  font: 600 var(--t-xs)/1.2 var(--f-texto);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--areia);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.rotulo::before { content: ""; width: 5px; height: 1.3em; background: var(--bege); }
.sobre-claro { background: var(--branco); color: var(--preto); }
.cap-cases { background: var(--grafite); }
.sobre-claro .rotulo { color: var(--bege-escuro); }
.sobre-claro .rotulo::before { background: var(--bege-escuro); }

/* ---------- grão de película (página inteira, quase invisível) ---------- */
.grao {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  z-index: 90;
  opacity: 0.07;
  mix-blend-mode: overlay;
  animation: grao 0.9s steps(6) infinite;
}
@keyframes grao {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -4%); } 60% { transform: translate(-4%, -1%); }
  80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}
.fx-reduzido .grao { animation: none; }

/* ---------- cabeçalho (inverte sozinho sobre fundo claro) ---------- */
.topo {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--margem);
  mix-blend-mode: difference;
  color: #fff;
  pointer-events: none;
}
.topo > * { pointer-events: auto; }
.topo .marca img { width: 132px; height: auto; }
.topo nav { display: flex; gap: 28px; align-items: center; font: 400 14px/1 var(--f-texto); letter-spacing: 0.04em; }
.topo nav a { text-decoration: none; position: relative; padding: 6px 0; }
.topo nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--suave);
}
.topo nav a:hover::after, .topo nav a:focus-visible::after { transform: scaleX(1); }
.topo nav .orcar { font-weight: 600; }
.topo nav .orcar::after { transform: scaleX(1); }
@media (max-width: 720px) {
  .topo nav a:not(.orcar) { display: none; }
  .topo .marca img { width: 108px; }
}

/* ---------- grafismos da marca ---------- */
.visor { position: absolute; inset: 18px; pointer-events: none; }
.visor i { position: absolute; width: 22px; height: 22px; border: 0 solid currentColor; opacity: 0.85; }
.visor i:nth-child(1) { top: 0; left: 0; border-width: 2px 0 0 2px; }
.visor i:nth-child(2) { top: 0; right: 0; border-width: 2px 2px 0 0; }
.visor i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
.visor i:nth-child(4) { bottom: 0; right: 0; border-width: 0 2px 2px 0; }

.rec { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--f-texto); letter-spacing: 0.18em; }
.rec b { width: 9px; height: 9px; border-radius: 50%; background: var(--bege); }
.rec.pisca b { animation: pisca 1.2s steps(2, jump-none) infinite; }
@keyframes pisca { 50% { opacity: 0; } }
.fx-reduzido .rec.pisca b { animation: none; }

/* ======================================================================
   ABERTURA — o congelamento
   ====================================================================== */
#abertura { background: var(--preto); }
#abertura .fx-palco { display: block; }

.copia {
  position: absolute;
  left: 0; top: 0;
  will-change: transform;
  transform-origin: 50% 50%;
}
.copia .papel {
  position: absolute;
  background: #F7F5F0;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.8);
}
.copia canvas { position: absolute; background: #0b0a09; }
.copia .legenda {
  position: absolute;
  display: flex; justify-content: space-between; align-items: baseline;
  color: #2b2925;
  font: 400 12px/1 var(--f-texto);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 0.6s ease 0.25s;
}
.copia .legenda strong { font-family: var(--f-titulo); font-size: 18px; letter-spacing: 0.06em; color: var(--preto); }
.congelado .copia .legenda { opacity: 1; }

.hud { position: absolute; inset: 0; pointer-events: none; color: #fff; transition: opacity 0.5s ease; }
.hud .visor { inset: clamp(72px, 9vh, 96px) var(--margem) clamp(20px, 4vh, 40px); }
.hud .rec { position: absolute; top: calc(clamp(72px, 9vh, 96px) + 18px); left: calc(var(--margem) + 34px); text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.hud .tc {
  position: absolute; top: calc(clamp(72px, 9vh, 96px) + 16px); right: calc(var(--margem) + 34px);
  font: 600 13px/1 var(--f-texto); letter-spacing: 0.14em; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.hud .rec .still { display: none; }
.congelado .hud .rec .vivo { display: none; }
.congelado .hud .rec .still { display: inline; }
.congelado .hud .rec b { border-radius: 0; animation: none; }
.congelado .hud .visor { opacity: 0; transition: opacity 0.4s ease; }

.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.flash.disparo { animation: flash 0.55s ease-out; }
@keyframes flash { 0% { opacity: 0.85; } 100% { opacity: 0; } }

.abertura-texto {
  position: absolute;
  left: var(--margem);
  bottom: clamp(48px, 9vh, 96px);
  max-width: min(640px, 44vw);
  z-index: 3;
}
.abertura-texto h1 { font-size: clamp(54px, 7vw, 124px); }
.abertura-texto h1 span { display: block; }
.abertura-texto .t1 { text-shadow: 0 2px 30px rgba(0,0,0,.45); transition: color 0.6s ease; animation: entrar 1.2s var(--suave) both 0.2s; }
.abertura-texto .t2 {
  color: var(--bege);
  clip-path: inset(-0.35em 100% -0.15em -0.05em);
  transition: clip-path 1.1s var(--suave);
}
.congelado .abertura-texto .t1 { color: var(--areia); }
.congelado .abertura-texto .t2 { clip-path: inset(-0.35em -0.1em -0.15em -0.05em); }
.abertura-texto p {
  margin-top: var(--e3);
  font-size: var(--t-m);
  color: #E9E6E0;
  max-width: 40ch;
  text-shadow: 0 1px 14px rgba(0,0,0,.6);
  animation: entrar 1.2s var(--suave) both 0.5s;
}
@keyframes entrar { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.fx-reduzido .abertura-texto .t1, .fx-reduzido .abertura-texto p { animation: none; }
.fx-reduzido .abertura-texto .t2 { clip-path: none; }

@media (max-width: 899px) {
  .abertura-texto { max-width: none; right: var(--margem); bottom: 40px; }
  .abertura-texto h1 { font-size: clamp(46px, 13vw, 84px); }
  .abertura-texto p { font-size: var(--t-s); }
}

/* ======================================================================
   CAPÍTULO I — quem filma (claro, calmo)
   ====================================================================== */
.cap-sobre {
  color: var(--preto);
  padding: var(--e7) var(--margem) var(--e6);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 7vw, 120px);
  align-items: end;
}
.retrato { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: #A8805E; color: #fff; }
.retrato img { width: 100%; height: 118%; object-fit: cover; object-position: 50% 30%; margin-top: -9%; }
.retrato figcaption {
  position: absolute; left: 18px; bottom: 18px; right: 18px;
  font: 400 12px/1.3 var(--f-texto); letter-spacing: 0.12em; text-transform: uppercase;
  display: flex; justify-content: space-between;
}
.sobre-texto h2 { font-size: clamp(48px, 6.4vw, 104px); margin: var(--e3) 0 var(--e4); }
.sobre-texto h2 em { font-style: normal; color: var(--bege-escuro); }
.sobre-texto p { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.6; color: #2b2925; }
.sobre-texto p.abre { font-size: clamp(22px, 2vw, 28px); line-height: 1.35; color: var(--preto); max-width: 30ch; }
.assinatura { margin-top: var(--e4); display: flex; align-items: center; gap: 16px; font: 600 14px/1.3 var(--f-texto); letter-spacing: 0.06em; }
.assinatura span { color: var(--bege-escuro); font-weight: 400; }
.assinatura::before { content: ""; width: 48px; height: 1px; background: var(--preto); }
@media (max-width: 860px) {
  .cap-sobre { grid-template-columns: 1fr; padding-top: var(--e6); }
  .retrato { max-width: 440px; }
}

/* ======================================================================
   CAPÍTULO II — o plano (etapas)
   ====================================================================== */
.cap-plano .fx-palco { display: block; padding: 0 var(--margem); }
.plano-grade {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(32px, 6vw, 104px);
  padding: clamp(96px, 14vh, 140px) 0 clamp(28px, 5vh, 56px);
}
.plano-cabeca { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.plano-cabeca h2 { font-size: clamp(28px, 3vw, 44px); color: var(--areia); }
.plano-etapas { grid-column: 1 / -1; display: grid; align-items: center; }
.plano-etapas .fx-etapa {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: clamp(32px, 6vw, 104px);
  align-items: center;
  transform: translateY(28px);
  transition: opacity 0.5s ease, transform 0.8s var(--suave);
  pointer-events: none;
}
.cap-plano[data-etapa="1"] .fx-etapa:nth-of-type(1),
.cap-plano[data-etapa="2"] .fx-etapa:nth-of-type(2),
.cap-plano[data-etapa="3"] .fx-etapa:nth-of-type(3) { transform: none; pointer-events: auto; }
.objetivo .num { font: 800 clamp(120px, 17vw, 260px)/0.8 var(--f-titulo); color: transparent; -webkit-text-stroke: 1.5px var(--bege); display: block; }
.objetivo h3 { font-size: clamp(56px, 7vw, 116px); margin: 12px 0 16px; }
.objetivo p { color: var(--areia); font-size: var(--t-m); margin: 0; }
.produtos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
.produtos li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline;
  padding: clamp(16px, 2.6vh, 28px) 0;
  border-bottom: 1px solid var(--linha);
}
.produtos li strong { font: 700 clamp(28px, 2.8vw, 44px)/1 var(--f-titulo); text-transform: uppercase; letter-spacing: 0.02em; }
.produtos li em {
  font-style: italic; font-weight: 300; font-size: 15px; color: var(--bege);
  display: inline-flex; align-items: center; gap: 10px; text-align: right;
}
.produtos li em::before { content: ""; width: 34px; height: 1px; background: var(--bege); opacity: 0.6; }
.plano-trilha { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.plano-trilha span { font: 600 12px/1 var(--f-texto); letter-spacing: 0.16em; text-transform: uppercase; color: #55524B; padding-top: 14px; border-top: 2px solid var(--linha); transition: color .4s ease, border-color .4s ease; }
.cap-plano[data-etapa="1"] .plano-trilha span:nth-child(1),
.cap-plano[data-etapa="2"] .plano-trilha span:nth-child(-n+2),
.cap-plano[data-etapa="3"] .plano-trilha span { color: var(--branco); border-color: var(--bege); }
@media (max-width: 860px) {
  .plano-grade { grid-template-columns: 1fr; padding-top: 88px; }
  .plano-etapas .fx-etapa { grid-template-columns: 1fr; row-gap: 20px; }
  .objetivo .num { font-size: 96px; }
  .objetivo h3 { font-size: 52px; margin: 6px 0 8px; }
  .objetivo p { font-size: var(--t-s); }
  .produtos li { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
  .produtos li strong { font-size: 26px; }
  .produtos li em { text-align: left; font-size: 14px; }
  .plano-trilha span { font-size: 10px; letter-spacing: 0.1em; }
}
.fx-reduzido .cap-plano .fx-palco { height: auto; }
.fx-reduzido .plano-grade { height: auto; }
.fx-reduzido .plano-etapas .fx-etapa { transform: none; }

/* ======================================================================
   PICO — a cartela
   ====================================================================== */
.cartela .fx-palco { flex-direction: column; text-align: center; padding: 0 var(--margem); }
.cartela .camada { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 var(--margem); }
.cartela .enquanto { font-size: clamp(40px, 6.2vw, 112px); max-width: 15ch; line-height: 0.98; }
.cartela .enquanto span { display: inline-block; }
.cartela .nos { font: 600 clamp(14px, 1.4vw, 18px)/1 var(--f-texto); letter-spacing: 0.32em; text-transform: uppercase; color: var(--areia); margin-bottom: clamp(16px, 3vh, 32px); }
.cartela .eternizar {
  font-size: clamp(72px, 17.5vw, 330px);
  color: var(--bege);
  line-height: 0.82;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.cartela .eternizar span { display: inline-block; will-change: transform; }
.cartela .fecho { margin-top: clamp(28px, 6vh, 64px); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cartela .fecho p { font: 400 var(--t-m)/1.4 var(--f-texto); color: var(--branco); margin: 0; }
.cartela .regua { position: absolute; left: 50%; width: 1px; background: var(--linha); top: 0; height: 12vh; }
.fx-reduzido .cartela .camada { position: static; padding: var(--e5) var(--margem); }

/* ======================================================================
   CAPÍTULO III — a execução (trilho)
   ====================================================================== */
.cap-cases .fx-palco { flex-direction: column; align-items: stretch; justify-content: center; }
.cases-cabeca { padding: clamp(84px, 11vh, 120px) var(--margem) clamp(16px, 3vh, 32px); display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.cases-cabeca h2 { font-size: clamp(44px, 6vw, 96px); margin-top: 14px; }
.cases-cabeca p { color: var(--areia); max-width: 34ch; margin: 0; font-size: var(--t-s); }
.cap-cases [data-fx="trilho"] { gap: clamp(16px, 2.4vw, 32px); width: 100%;
  padding-left: calc((100vw - min(64vw, 900px)) / 2 + 20vw);
  padding-right: calc((100vw - min(42vw, 560px)) / 2); }
@media (max-width: 860px) { .cap-cases [data-fx="trilho"] { padding-left: 34vw; padding-right: 13vw; } }
.fx-reduzido .cap-cases [data-fx="trilho"] { padding: 0 var(--margem); }
.case { flex: 0 0 min(64vw, 900px); display: flex; flex-direction: column; gap: 18px; text-decoration: none; }
.case .midia {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #121214;
  max-height: 56vh;
}
.case .midia img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.2s var(--suave); }
.case:hover .midia img { transform: scale(1); }
.pendente {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(60% 70% at 70% 35%, rgba(182,174,164,.16), transparent 70%),
    linear-gradient(180deg, #1b1a1c, #0e0e10);
  color: var(--areia);
  font: 600 12px/1.4 var(--f-texto); letter-spacing: 0.18em; text-transform: uppercase; text-align: center;
}
.plano-sobre {
  position: absolute; inset: 0; color: var(--bege); pointer-events: none;
  will-change: opacity;
}
.plano-sobre svg { width: 100%; height: 100%; }
.plano-sobre .nota {
  position: absolute; font: italic 300 14px/1.3 var(--f-texto); color: var(--bege);
  text-shadow: 0 1px 10px rgba(0,0,0,.8);
}
.case .info { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: end; }
.case h3 { font-size: clamp(30px, 3vw, 52px); }
.case .meta { grid-column: 1; color: var(--areia); font-size: 15px; margin: 0; }
.case .ver { grid-column: 2; grid-row: 1 / span 2; font: 600 14px/1 var(--f-texto); letter-spacing: 0.08em; text-transform: uppercase; display: inline-flex; gap: 10px; align-items: center; border-bottom: 1px solid var(--bege); padding-bottom: 6px; color: var(--branco); }
.case .ver i { font-style: normal; transition: transform .5s var(--suave); }
.case:hover .ver i { transform: translateX(6px); }
.case-final { flex: 0 0 min(42vw, 560px); justify-content: center; padding: var(--e4); border: 1px solid var(--linha); }
.case-final h3 { font-size: clamp(40px, 4.4vw, 72px); }
.case-final h3 em { font-style: normal; color: var(--bege); }
@media (max-width: 860px) {
  .case { flex-basis: 84vw; }
  .case .midia { aspect-ratio: 4 / 5; max-height: 50vh; }
  .case-final { flex-basis: 74vw; }
  .cases-cabeca { flex-direction: column; align-items: flex-start; }
  .cases-cabeca p { display: none; }
  .plano-sobre .nota { font-size: 12px; }
}
.fx-reduzido .cap-cases [data-fx="trilho"] { gap: 48px; }
.fx-reduzido .case, .fx-reduzido .case-final { flex-basis: 100%; }
.fx-reduzido .plano-sobre { opacity: 0.5; }

/* ======================================================================
   QUEM CONFIA (claro)
   ====================================================================== */
.confia { color: var(--preto); padding: var(--e6) var(--margem); }
.confia-cabeca { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 104px); align-items: end; margin-bottom: var(--e5); }
.confia-cabeca h2 { font-size: clamp(40px, 4.6vw, 76px); margin-top: 18px; }
.confia-cabeca p { color: #55524B; margin: 0; }
.logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #D8D3C7; border-left: 1px solid #D8D3C7; }
.logos li {
  aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
  border-right: 1px solid #D8D3C7; border-bottom: 1px solid #D8D3C7;
  font: 600 12px/1 var(--f-texto); letter-spacing: 0.18em; text-transform: uppercase; color: #B3AEA4;
}
.logos li img { max-width: 62%; max-height: 46%; object-fit: contain; opacity: 0.6; transition: opacity .4s ease, transform .6s var(--suave); }
.logos li:hover img { transform: scale(1.04); }
.logos li:hover img { opacity: 1; }
@media (max-width: 860px) {
  .confia-cabeca { grid-template-columns: 1fr; gap: 16px; }
  .logos { grid-template-columns: repeat(2, 1fr); }
}

/* ======================================================================
   CAPÍTULO IV — como trabalhamos (linha do tempo de edição)
   ====================================================================== */
.cap-como .fx-palco { display: block; padding: 0 var(--margem); }
.como-grade { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: clamp(28px, 5vh, 56px); padding-top: 72px; }
.como-grade h2 { font-size: clamp(44px, 6vw, 100px); margin-top: 14px; }
.timeline { position: relative; padding-top: 30px; }
.regua-tc {
  position: absolute; top: 0; left: 0; right: 0; height: 18px;
  background: repeating-linear-gradient(90deg, #3a3a3f 0 1px, transparent 1px 2.5%);
  -webkit-mask: linear-gradient(#000, #000);
}
.regua-tc::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, #6a675f 0 1px, transparent 1px 25%);
}
.trilha-edicao { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; height: 64px; }
.clipe {
  background: var(--grafite); border-left: 4px solid #3a3a3f;
  display: flex; align-items: center; padding: 0 16px;
  font: 700 clamp(16px, 1.8vw, 24px)/1 var(--f-titulo); letter-spacing: 0.06em; text-transform: uppercase; color: #6a675f;
  transition: background .5s ease, color .5s ease, border-color .5s ease;
}
.clipe.ativo { background: #24221F; color: var(--branco); border-color: var(--bege); }
.cabeca-leitura {
  position: absolute; top: 0; bottom: -10px; left: 0; width: 2px; background: var(--bege);
  will-change: transform;
}
.cabeca-leitura::before { content: ""; position: absolute; top: -2px; left: -6px; border: 7px solid transparent; border-top: 10px solid var(--bege); }
.passos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.passos div { padding-right: 24px; opacity: 0.25; transition: opacity .5s ease; }
.passos div.ativo { opacity: 1; }
.passos b { display: block; font: 600 12px/1 var(--f-texto); letter-spacing: 0.16em; color: var(--bege); margin-bottom: 12px; }
.passos p { font-size: var(--t-s); color: #D9D6CF; margin: 0; }
.diferenciais { display: flex; flex-wrap: wrap; gap: 10px 36px; padding-top: 24px; border-top: 1px solid var(--linha); }
.diferenciais span { font: 400 15px/1.3 var(--f-texto); color: var(--areia); display: inline-flex; align-items: center; gap: 10px; }
.diferenciais span::before { content: ""; width: 7px; height: 7px; background: var(--bege); }
@media (max-width: 860px) {
  .trilha-edicao { height: 48px; }
  .clipe { padding: 0 8px; font-size: 13px; }
  .passos { grid-template-columns: 1fr; }
  .passos div { grid-area: 1 / 1; opacity: 0; padding: 0; }
  .passos div.ativo { opacity: 1; }
  .diferenciais { gap: 8px 20px; }
  .diferenciais span { font-size: 13px; }
}
.fx-reduzido .cap-como .fx-palco, .fx-reduzido .como-grade { height: auto; }
.fx-reduzido .passos div { opacity: 1; grid-area: auto; }
.fx-reduzido .clipe { color: var(--branco); }

/* ======================================================================
   CAPÍTULO V — o seu (orçamento)
   ====================================================================== */
.cap-fim { padding: var(--e7) var(--margem) var(--e5); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.fim-texto h2 { font-size: clamp(56px, 8vw, 140px); margin: 18px 0 28px; }
.fim-texto h2 em { font-style: normal; color: var(--bege); }
.fim-texto > p { color: var(--areia); }
.contatos { list-style: none; padding: 0; margin: var(--e5) 0 0; border-top: 1px solid var(--linha); }
.contatos li { border-bottom: 1px solid var(--linha); }
.contatos a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 0; text-decoration: none; }
.contatos a span:first-child { font: 600 12px/1 var(--f-texto); letter-spacing: 0.16em; text-transform: uppercase; color: var(--areia); }
.contatos a span:last-child { font: 700 clamp(20px, 2vw, 28px)/1 var(--f-titulo); letter-spacing: 0.04em; transition: color .3s ease; word-break: break-all; text-align: right; }
.contatos a:hover span:last-child { color: var(--bege); }

.form { background: var(--grafite); padding: clamp(24px, 3.4vw, 48px); position: relative; }
.form .rec { position: absolute; top: 22px; right: 24px; color: var(--areia); }
.form .rec b { opacity: 0.25; }
.form .rec.uma b { animation: pisca 0.9s steps(2, jump-none) 2; opacity: 1; }
.form h3 { font-size: var(--t-xl); margin-bottom: 28px; }
.campo { display: block; margin-bottom: 18px; }
.campo span { display: block; font: 600 12px/1 var(--f-texto); letter-spacing: 0.14em; text-transform: uppercase; color: var(--areia); margin-bottom: 8px; }
.campo input, .campo select, .campo textarea {
  width: 100%; background: transparent; color: var(--branco);
  border: 0; border-bottom: 1px solid #3a3a3f; border-radius: 0;
  font: 400 var(--t-m)/1.4 var(--f-texto); padding: 8px 0 10px;
  transition: border-color .3s ease;
}
.campo select { appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23B6AEA4' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 4px center; }
.campo select option { background: var(--grafite); color: var(--branco); }
.campo textarea { resize: vertical; min-height: 84px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--bege); }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%;
  margin-top: 10px; padding: 18px 24px; border: 0; border-radius: var(--raio);
  background: var(--bege); color: var(--preto);
  font: 600 var(--t-s)/1 var(--f-texto); letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; transition: background .3s ease, transform .3s var(--suave);
}
.botao:hover { background: #C8C1B8; }
.botao:active { transform: scale(0.985); }
.botao:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--bege); outline-offset: 3px; }
.form small { display: block; margin-top: 14px; color: var(--areia); font-size: 13px; }
@media (max-width: 960px) {
  .cap-fim { grid-template-columns: 1fr; padding-top: var(--e6); }
}
@media (max-width: 520px) { .dupla { grid-template-columns: 1fr; } }

.rodape { padding: var(--e5) var(--margem) var(--e4); border-top: 1px solid var(--linha); display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: end; }
.rodape img { width: 92px; height: auto; }
.rodape .slogan { font: 800 clamp(22px, 2.4vw, 34px)/1 var(--f-titulo); text-transform: uppercase; letter-spacing: 0.04em; }
.rodape small { color: #55524B; font-size: 13px; }
@media (max-width: 720px) { .rodape { grid-template-columns: 1fr; } }

/* ---------- páginas de case ---------- */
.pagina-case { padding: 160px var(--margem) var(--e6); }
.pagina-case .voltar { font: 600 13px/1 var(--f-texto); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--areia); }
.pagina-case h1 { font-size: clamp(64px, 11vw, 180px); margin: 32px 0 24px; }
.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; border-top: 1px solid var(--linha); padding-top: 24px; margin-bottom: var(--e5); }
.ficha div span { display: block; font: 600 12px/1 var(--f-texto); letter-spacing: 0.16em; text-transform: uppercase; color: var(--areia); margin-bottom: 10px; }
.ficha div p { font: 700 24px/1.1 var(--f-titulo); text-transform: uppercase; letter-spacing: .03em; margin: 0; }
.galeria { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.galeria figure { margin: 0; position: relative; aspect-ratio: 4 / 5; grid-column: span 2; }
.galeria figure.largo { grid-column: span 4; aspect-ratio: 16 / 10; }
.galeria figure.cheio { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.galeria img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 720px) { .galeria figure, .galeria figure.largo { grid-column: 1 / -1; } }
.texto-case { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 104px); margin: var(--e6) 0; }
.texto-case h2 { font-size: clamp(36px, 4vw, 64px); }
@media (max-width: 860px) { .texto-case { grid-template-columns: 1fr; } }

/* movimento reduzido: a abertura mantém a tela cheia, já congelada */
.fx-reduzido #abertura { height: 100vh !important; height: 100dvh !important; }
.fx-reduzido #abertura .fx-palco { position: relative; height: 100%; overflow: hidden; }

/* ---------- capa em tríptico (cases com material vertical) ---------- */
.case .midia .triptico { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.case .midia .triptico img { min-width: 0; }
@media (max-width: 860px) { .case .midia .triptico { grid-template-columns: repeat(2, 1fr); } .case .midia .triptico img:nth-child(3) { display: none; } }

/* ---------- página de case: vídeo vertical ---------- */
.tela { position: relative; aspect-ratio: 9 / 16; background: #121214; overflow: hidden; color: var(--branco); }
.tela video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tela .play {
  position: absolute; inset: 0; width: 100%; border: 0; cursor: pointer; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: linear-gradient(180deg, rgba(10,10,10,.05) 40%, rgba(10,10,10,.55));
  color: var(--branco); font: 600 13px/1 var(--f-texto); letter-spacing: .16em; text-transform: uppercase;
  transition: opacity .4s ease;
}
.tela .play b {
  width: 76px; height: 76px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.85);
  display: grid; place-items: center; transition: transform .5s var(--suave), background .4s;
}
.tela .play b::after { content: ""; margin-left: 5px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent currentColor; }
.tela .play:hover b, .tela .play:focus-visible b { transform: scale(1.08); background: rgba(182,174,164,.22); }
.tela .play span { text-shadow: 0 1px 10px rgba(0,0,0,.7); }
.tela.tocando .play, .tela.tocando .visor { opacity: 0; pointer-events: none; }
.tela .visor { transition: opacity .4s ease; }

.case-filme { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 104px); align-items: center; margin-bottom: var(--e6); }
.case-filme .tela { max-height: 86vh; width: 100%; max-width: 520px; justify-self: end; }
.case-filme-texto h2 { font-size: clamp(36px, 4vw, 64px); margin: 16px 0 28px; }
.case-filme-texto p { max-width: 54ch; color: #d8d6d2; }
@media (max-width: 860px) { .case-filme { grid-template-columns: 1fr; } .case-filme .tela { justify-self: center; max-height: 78vh; max-width: 440px; } }

.case-dias, .case-fotos { margin: var(--e6) 0; }
.case-dias-cabeca { display: flex; flex-direction: column; gap: 14px; margin-bottom: var(--e4); }
.case-dias-cabeca h2 { font-size: clamp(36px, 4vw, 64px); }
.dias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); }
.dia { margin: 0; }
.dia .tela .play b { width: 60px; height: 60px; }
.dia figcaption { display: flex; gap: 12px; align-items: baseline; margin-top: 14px; font: 800 26px/1 var(--f-titulo); text-transform: uppercase; letter-spacing: .02em; }
.dia figcaption span { font: 600 12px/1 var(--f-texto); letter-spacing: .16em; color: var(--bege); }
@media (max-width: 720px) {
  .dias { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72vw; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--margem)); padding: 0 var(--margem) 8px; scrollbar-width: none; }
  .dias::-webkit-scrollbar { display: none; }
  .dia { scroll-snap-align: start; }
}

.mosaico { columns: 3; column-gap: 12px; }
.mosaico figure { margin: 0 0 12px; break-inside: avoid; overflow: hidden; background: #121214; }
.mosaico img { display: block; width: 100%; height: auto; transition: transform 1.2s var(--suave); }
.mosaico figure:hover img { transform: scale(1.03); }
@media (max-width: 720px) { .mosaico { columns: 2; column-gap: 8px; } .mosaico figure { margin-bottom: 8px; } }
.case .midia .triptico img { transform: none; }
.case .midia .triptico { transform: scale(1.04); transition: transform 1.2s var(--suave); }
.case:hover .midia .triptico { transform: scale(1); }
.dias { max-width: 1120px; }
@media (max-width: 720px) { .dias { max-width: none; scroll-padding-inline: var(--margem); } }
.tela > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- foto larga e números (Fórum Imobi) ---------- */
.case-larga { position: relative; margin: 0 0 var(--e5); aspect-ratio: 16 / 9; max-height: 82vh; width: 100%; overflow: hidden; background: #121214; color: var(--branco); }
.case-larga img { width: 100%; height: 100%; object-fit: cover; display: block; }
.numeros { list-style: none; margin: 0 0 var(--e6); padding: var(--e4) 0 0; border-top: 1px solid var(--linha); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e4); }
.numeros b { display: block; font: 800 clamp(56px, 7vw, 120px)/0.9 var(--f-titulo); color: var(--branco); letter-spacing: -0.01em; }
.numeros li:last-child b { color: var(--bege); }
.numeros span { display: block; margin-top: 12px; font: 600 12px/1.4 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--areia); max-width: 22ch; }
@media (max-width: 860px) { .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.case-texto-solo { grid-template-columns: minmax(0, 1fr); }
.case-texto-solo .case-filme-texto { max-width: 760px; }

/* ---------- rodapé: contatos e avaliação ---------- */
.rodape-dir { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; text-align: right; }
.redes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.redes a { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; min-width: 44px; border: 1px solid var(--linha); border-radius: 999px; color: var(--branco); text-decoration: none; transition: border-color .3s, background .3s, color .3s; }
.redes a:hover, .redes a:focus-visible { border-color: var(--bege); background: rgba(182,174,164,.12); color: var(--bege); }
.redes svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.redes svg .cheio { fill: currentColor; stroke: none; }
.redes .avaliar { padding: 0 18px 0 14px; font: 600 12px/1 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; }
.redes .avaliar svg { width: 16px; height: 16px; color: var(--bege); }
@media (max-width: 720px) { .rodape-dir { align-items: flex-start; text-align: left; } .redes { justify-content: flex-start; } }