/* ═══════════════════════════════════════════════════════════════════════════
   MOVIMENTO — camada de animação, scrollytelling e refinos de UI/UX.
   Carrega depois de style.css, então vence nos conflitos.

   Regra da camada: usa SÓ os tokens de :root que style.css já define
   (--laranja, --laranja-texto, --dourado, --fundo, --borda…) e as três fontes
   já carregadas. Nenhuma cor, fonte ou raio novo — a identidade não muda.

   `html.mv-js` é posto por um script inline no <head>: as regras que dependem
   de um elemento criado por JS ficam atrás dessa classe, senão quem estiver
   sem JS veria, por exemplo, o chip de filtro ativo perder o fundo laranja.
   `html.mv-anime` só entra quando o anime.js carregou E o navegador está
   entregando frames (ver js/movimento.js).

   CUIDADO ao acrescentar coisa aqui: style.css tem seletores de elemento nu
   (`nav`, `section`, `footer`). Qualquer elemento novo criado por JS deve ser
   div/span/aside — um <nav> novo herda a barra fixa do topo, e um <section>
   novo herda `padding: 100px 0`.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --mv-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─────────────────────────── 1 · HERO: ENQUADRAMENTO ───────────────────────
   `section { padding: 100px 0 }` valia pro hero também, e o
   `max-height: 980px` original escondia isso cortando o conteúdo. Em janela
   baixa os números do CRECI ficavam partidos no meio, com faixa morta abaixo.
   Sem o cap, a altura segue o conteúdo — e o respiro vem do .hero-left. */
.hero {
  max-height: none;
  min-height: min(92vh, 940px);
}
@media (min-width: 1025px) {
  .hero { padding-block: 0; }
}

/* entre 1025 e 1340px a coluna de texto ficava com ~430px: o subtítulo
   quebrava em 5 linhas e os botões empilhavam. */
@media (min-width: 1025px) and (max-width: 1340px) {
  .hero { grid-template-columns: 1.12fr 0.88fr; }
  .hero-left { padding-left: 48px; padding-right: 40px; }
}

/* telas baixas: menos respiro, senão a chamada some abaixo da dobra */
@media (max-height: 780px) and (min-width: 1025px) {
  .hero { min-height: 0; }
  .hero-left { padding-top: 96px; padding-bottom: 52px; }
  .hero-title { font-size: clamp(40px, 4.6vw, 62px); margin-bottom: 20px; }
  .hero-sub { margin-bottom: 30px; }
  .hero-btns { gap: 12px; }
  .google-nota--hero { margin-top: 20px; }
  .hero-stats { margin-top: 34px; padding-top: 26px; }
}

/* o selo tem 480px de lado + anéis em -28px: numa coluna de 554px ele
   encostava na borda (que tem overflow hidden). o lado passa a ser limitado
   também pela altura da janela. */
.hero-circular-logo {
  width: min(480px, 84%, 58vh);
  height: min(480px, 84%, 58vh);
}

/* a grade decorativa faz parallax: sem folga, a borda dela aparecia */
.hero-grid-bg { inset: -14% 0; }

/* camada só pro parallax de mouse. o selo já tem floatLogo no transform, e
   dois escritores no mesmo transform se sobrescrevem — a flutuação morre. */
.mv-selo-parallax {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  will-change: transform;
}

/* ─────────────────────────── 2 · PROGRESSO DE LEITURA ────────────────────── */
.mv-progresso {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 130; pointer-events: none;
  background: linear-gradient(90deg, var(--laranja), var(--dourado));
  box-shadow: 0 0 12px rgba(232, 133, 10, .55);
  transform: scaleX(0); transform-origin: 0 50%;
}

/* ─────────────────────────── 3 · NAV ─────────────────────────────────────── */
nav { transition: padding .35s var(--mv-ease), box-shadow .35s ease; }
nav.mv-compacto { box-shadow: 0 10px 30px rgba(43, 33, 24, .08); }
.nav-logo { transition: transform .35s var(--mv-ease); transform-origin: left center; }
nav.mv-compacto .nav-logo { transform: scale(.9); }

/* a barrinha do link ativo passa a viajar entre os links */
.nav-links { position: relative; }
html.mv-js .nav-links a.ativo:not(.nav-cta)::after { opacity: 0; }
.mv-nav-ind {
  position: absolute; left: 0; bottom: -7px; width: 100px; height: 2px;
  background: var(--laranja); border-radius: 1px;
  transform: translateX(0) scaleX(0); transform-origin: 0 50%;
  transition: transform .5s var(--mv-ease), opacity .25s;
  opacity: 0; pointer-events: none;
}

/* ─────────────────────────── 4 · REVEAL ──────────────────────────────────── */
/* o observer do site dispara a 10% de interseção com rootMargin -60px, e a
   transição é de 0,7s: rolando rápido dava pra ver a seção ainda vazia.
   O JS marca .visible um quarto de tela antes; aqui a transição encurta. */
.reveal { transition-duration: .45s; }
.reveal-delay-1 { transition-delay: .06s; }
.reveal-delay-2 { transition-delay: .12s; }
.reveal-delay-3 { transition-delay: .18s; }
.reveal-delay-4 { transition-delay: .24s; }

/* ─────────────────────────── 5 · TÍTULOS ─────────────────────────────────── */
/* o fadeSlideUp do h1 sai só quando o splitText vai de fato rodar */
html.mv-anime .hero-title { animation: none; }

/* varredura de brilho na palavra em itálico do hero, a cada 7s.
   O gradiente vai no span que o splitText cria, NÃO no <em>: com
   `background-clip: text` no pai e o texto dentro de um span filho, o Chrome
   não recorta nada — o texto herda `color: transparent` e a palavra
   simplesmente desaparece. Foi o que aconteceu com "decisão.".
   Sem anime/splitText, o <em> continua laranja sólido como sempre foi. */
html.mv-anime .hero-title em [data-word] {
  background: linear-gradient(100deg,
    var(--laranja-texto) 0%, var(--laranja-texto) 38%,
    #f3b45f 50%, var(--laranja-texto) 62%, var(--laranja-texto) 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: mvVarreTitulo 7s ease-in-out 2s infinite;
}
@keyframes mvVarreTitulo {
  0%   { background-position: 150% 0 }
  35%  { background-position: -150% 0 }
  100% { background-position: -150% 0 }
}

/* ─────────────────────────── 6 · FEIXES E AURA ───────────────────────────── */
.mv-feixes {
  position: absolute; inset: 0; overflow: hidden; z-index: 0;
  pointer-events: none;
}
.mv-feixe {
  position: absolute; top: -30%; height: 160%; width: 42vw;
  background: linear-gradient(100deg, transparent 0%, rgba(232, 133, 10, .16) 45%,
              rgba(201, 168, 76, .10) 55%, transparent 100%);
  filter: blur(16px);
  transform: translateX(-70vw) rotate(14deg);
  animation: mvFeixe 17s linear infinite;
}
.mv-feixe:nth-child(2) { animation-duration: 23s; animation-delay: -7s; opacity: .7; }
.mv-feixes.mv-fora .mv-feixe { animation-play-state: paused; }
@keyframes mvFeixe {
  from { transform: translateX(-70vw) rotate(14deg) }
  to   { transform: translateX(130vw) rotate(14deg) }
}

.mv-aura {
  position: absolute; inset: 8%; border-radius: 50%; z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(232, 133, 10, .20) 0%,
              rgba(201, 168, 76, .10) 45%, transparent 70%);
  filter: blur(14px);
  animation: mvRespira 9s ease-in-out infinite;
}
@keyframes mvRespira {
  0%, 100% { transform: scale(.94);  opacity: .55 }
  50%      { transform: scale(1.16); opacity: 1 }
}

/* ─────────────────────────── 7 · BOTÕES ─────────────────────────────────── */
.btn-primary, .btn-ver-mais, .modal-cta-btn { position: relative; overflow: hidden; }
.btn-primary::after, .btn-ver-mais::after, .modal-cta-btn::after {
  content: ''; position: absolute; inset: -1px; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .75) 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform .75s var(--mv-ease);
}
.btn-primary:hover::after, .btn-ver-mais:hover::after,
.modal-cta-btn:hover::after { transform: translateX(130%); }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--laranja);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ─────────────────────────── 8 · CARD DE IMÓVEL ───────────────────────────
   Sem tilt: o card só levanta, e quem faz isso é o `:hover` do style.css
   (translateY(-4px) + sombra). Nada aqui pode escrever no transform do card,
   senão o levantar morre — foi o que acontecia com o tilt em JS. */
.imovel-card { position: relative; contain: paint; }

/* holofote seguindo o cursor */
.imovel-card::after {
  content: ''; position: absolute; inset: 0; z-index: 6;
  pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(340px circle at var(--mv-mx, 50%) var(--mv-my, 0%),
              rgba(232, 133, 10, .20) 0%, rgba(201, 168, 76, .08) 45%, transparent 75%);
}
.imovel-card:hover::after, .imovel-card:focus-within::after { opacity: 1; }

/* borda que brilha girando */
.imovel-card::before {
  content: ''; position: absolute; inset: 0; z-index: 7; pointer-events: none;
  border-radius: 4px; padding: 1px;
  background: linear-gradient(135deg, transparent 20%, rgba(232, 133, 10, .55) 50%, transparent 80%);
  background-size: 220% 220%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s ease;
}
.imovel-card:hover::before { opacity: 1; animation: mvBordaGira 2.6s linear infinite; }
@keyframes mvBordaGira {
  0%   { background-position: 0% 50% }
  100% { background-position: 200% 50% }
}

/* zoom na foto. will-change só sob o cursor: 9 carrosséis promovidos a
   camada de GPU o tempo todo não pagava o custo. */
.carousel-slide { overflow: hidden; }
.carousel-slide img { transition: transform .7s var(--mv-ease); will-change: auto; }
.imovel-card:hover .carousel-slide img { transform: scale(1.08); will-change: transform; }
.imovel-card:hover .carousel-slide img.foto-aerea { transform: none; }

/* entrada escalonada ao filtrar */
.imovel-card.mv-entrando {
  animation: mvEntra .5s var(--mv-ease) both;
  animation-delay: calc(var(--i) * 45ms);
}
@keyframes mvEntra {
  from { opacity: 0; transform: translateY(14px) scale(.985) }
  to   { opacity: 1; transform: none }
}

/* ─── card em destaque: o primeiro imóvel visível ocupa a linha inteira ─── */
@media (min-width: 900px) {
  .imovel-card.mv-destaque {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.18fr 0.82fr;
    align-items: stretch;
  }
  .imovel-card.mv-destaque .carousel-wrap { height: 100%; }
  .imovel-card.mv-destaque .carousel-slide { aspect-ratio: auto; height: 100%; min-height: 340px; }
  .imovel-card.mv-destaque .imovel-info {
    display: flex; flex-direction: column; justify-content: center;
    padding: 34px 34px 30px;
  }
  .imovel-card.mv-destaque .imovel-nome { font-size: 26px; }
  .imovel-card.mv-destaque .imovel-preco { font-size: 27px; }
  .imovel-card.mv-destaque .carousel-dots { position: absolute; bottom: 12px; left: 0; right: 0; }
}
.mv-etiqueta-destaque {
  position: absolute; z-index: 7; top: 14px; left: 50%; transform: translateX(-50%);
  font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  background: var(--preto); color: var(--fundo-card);
  padding: 5px 13px; border-radius: 2px; white-space: nowrap; display: none;
}
.imovel-card.mv-destaque .mv-etiqueta-destaque { display: block; }

/* ─────────────────────────── 9 · PREÇO ──────────────────────────────────── */
/* mesma cor e mesma fonte; ganha caixa pra ser âncora da varredura visual */
.imovel-preco {
  display: inline-block;
  background: rgba(232, 133, 10, .09);
  border: 1px solid var(--borda);
  padding: 6px 13px; border-radius: 3px;
  transform-origin: left center;
}
.imovel-preco > span { margin-left: 6px; }

/* o número sobe atrás de uma máscara. inline-flex no envelope: com o filho em
   display:block dentro de inline-block a largura colapsa e corta o glifo. */
.mv-num {
  display: inline-flex; overflow: hidden; vertical-align: baseline;
  padding-bottom: .12em; margin-bottom: -.12em; line-height: 1;
}
.mv-num i {
  display: inline-block; font-style: normal; white-space: nowrap; line-height: 1;
  transform: translateY(110%);
  transition: transform .75s var(--mv-ease);
}
.mv-num i.mv-subiu { transform: translateY(0); }

/* ─────────────────────────── 10 · CARROSSEL ─────────────────────────────── */
.mv-car-prog {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: rgba(43, 33, 24, .10); z-index: 6;
}
.mv-car-prog i {
  display: block; height: 100%; width: 100%;
  background: var(--laranja); transform-origin: 0 50%;
  transform: scaleX(0); transition: transform .45s var(--mv-ease);
}

/* 44px é o mínimo de alvo de ponteiro do WCAG 2.5.8 */
.carousel-btn { width: 44px; height: 44px; }
.carousel-dot { width: 8px; height: 8px; }

/* ─────────────────────────── 11 · FILTRO ───────────────────────────────── */
.imoveis-filtros { position: relative; }
.filtro-chip { position: relative; z-index: 1; min-height: 44px; }
html.mv-js .filtro-chip { background: transparent; }
html.mv-js .filtro-chip.ativo { background: transparent; border-color: var(--laranja); }
.mv-chip-ind {
  position: absolute; top: 0; left: 0; z-index: 0;
  width: 100px; height: 40px; border-radius: 2px;
  background: var(--laranja); transform-origin: 0 0;
  transition: transform .45s var(--mv-ease), opacity .2s;
  opacity: 0; pointer-events: none;
}

/* a grade tem 8 anúncios e uns 8.000px: no meio dela, trocar de categoria
   obrigava a subir tudo de novo. fundo sólido de propósito — desfoque sobre
   uma grade de fotos rolando é um dos custos de composição mais altos. */
@media (min-width: 900px) {
  html.mv-js .imoveis-filtros {
    position: sticky; top: 78px; z-index: 30;
    margin: -28px -12px 40px; padding: 12px;
    background: var(--fundo);
    box-shadow: 0 8px 20px -12px rgba(43, 33, 24, .25);
    border-bottom: 1px solid var(--borda-sutil);
  }
}
/* no celular, onde a grade é mais longa, vira tira de uma linha com rolagem
   horizontal em vez de quebrar em duas e comer 100px de tela */
@media (max-width: 899px) {
  html.mv-js .imoveis-filtros {
    position: sticky; top: 58px; z-index: 30;
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: -20px -20px 28px; padding: 10px 20px;
    background: var(--fundo);
    box-shadow: 0 8px 18px -14px rgba(43, 33, 24, .4);
    border-bottom: 1px solid var(--borda-sutil);
  }
  html.mv-js .imoveis-filtros::-webkit-scrollbar { display: none; }
  html.mv-js .filtro-chip { flex: 0 0 auto; }
}

/* ─────────────────────────── 12 · DEPOIMENTOS ──────────────────────────── */
/* 11 avaliações 5,0 é o ativo mais forte do site e pedia scroll pra ser
   visto. Na faixa os curtos passam sozinhos; os longos ficam na grade. */
.mv-faixa { margin: 0 0 30px; }
.mv-marquee {
  position: relative;
  /* overflow hidden e não só a máscara: a máscara esconde, mas o trilho de
     5.000px continuaria estourando a largura do documento */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.mv-marquee-drag { display: block; cursor: grab; }
.mv-marquee-drag:active { cursor: grabbing; }
.mv-marquee-track {
  display: flex; gap: 24px; width: max-content;
  animation: mvRolar 42s linear infinite;
}
.mv-marquee:hover .mv-marquee-track,
.mv-marquee:focus-within .mv-marquee-track,
.mv-marquee.mv-pausado .mv-marquee-track,
.mv-marquee.mv-fora .mv-marquee-track { animation-play-state: paused; }
@keyframes mvRolar {
  from { transform: translateX(0) }
  to   { transform: translateX(-50%) }
}
.mv-marquee .depoimento-card { width: 360px; flex: 0 0 360px; padding: 28px; }
.mv-marquee .depoimento-texto { margin-bottom: 16px; }
.depoimento-card.mv-naFaixa { display: none; }

.mv-faixa-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mv-arraste {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--texto-muted);
  opacity: 0; transition: opacity .4s ease;
}
.mv-faixa:hover .mv-arraste { opacity: 1; }
.mv-pausar {
  font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--fundo-card); border: 1px solid var(--borda-sutil);
  color: var(--texto-body); padding: 8px 14px; border-radius: 2px; cursor: pointer;
  min-height: 44px; transition: border-color .2s, color .2s;
}
.mv-pausar:hover { border-color: var(--laranja); color: var(--laranja-texto); }

/* estrelas do Google com brilho: duas voltas e para */
.google-nota.mv-brilho .google-nota-estrelas {
  background: linear-gradient(100deg, var(--laranja-texto) 0%, var(--laranja) 42%,
              #f0c98a 50%, var(--laranja) 58%, var(--laranja-texto) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: mvBrilho 2.6s ease-in-out .4s 2;
}
@keyframes mvBrilho {
  from { background-position: 130% 0 }
  to   { background-position: -130% 0 }
}

/* ─────────────────────────── 13 · SERVIÇOS E DIFERENCIAIS ──────────────── */
/* a barra laranja de cada serviço se desenha ao entrar, não no hover */
.servico-item::before { transition: transform .55s var(--mv-ease); }
.servico-item.mv-dentro::before { transform: scaleY(1); }
.servico-item.mv-dentro { padding-left: 16px; transition: padding-left .55s var(--mv-ease); }
.servico-num { transition: opacity .3s, transform .3s var(--mv-ease); }
.servico-item:hover .servico-num { transform: translateY(-2px) scale(1.12); }

.diferencial-card { overflow: hidden; }
.diferencial-card .mv-luz {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(232, 133, 10, .22) 50%, transparent 62%);
  transform: translateX(-120%); transition: transform .9s var(--mv-ease);
}
.diferencial-card:hover .mv-luz { transform: translateX(120%); }

/* manchete fixa à esquerda, cards passando à direita */
@media (min-width: 1100px) {
  #diferenciais .container {
    display: grid; grid-template-columns: minmax(300px, 0.85fr) 1.6fr;
    gap: 56px; align-items: start;
  }
  .diferenciais-header { position: sticky; top: 130px; margin-bottom: 0; text-align: left; }
  .diferenciais-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─────────────────────────── 14 · PÚBLICOS ─────────────────────────────── */
.publico-card { transition: transform .6s var(--mv-ease), border-color .3s, box-shadow .3s; }
@media (min-width: 900px) {
  html.mv-js .publicos-grid.mv-dentro .publico-card { transform: none; }
  html.mv-js .publicos-grid:not(.mv-dentro) .publico-card:nth-child(1) { transform: translate(28px, 26px) rotate(-1.4deg); }
  html.mv-js .publicos-grid:not(.mv-dentro) .publico-card:nth-child(2) { transform: translateY(34px); }
  html.mv-js .publicos-grid:not(.mv-dentro) .publico-card:nth-child(3) { transform: translate(-28px, 26px) rotate(1.4deg); }
}

/* ─────────────────────────── 15 · RETRATO ──────────────────────────────── */
/* chanfro tirado da geometria hexagonal do monograma. em retrato, chanfro e
   não hexágono cheio: hexágono come o rosto. */
.sobre-foto-inner {
  clip-path: polygon(0 5%, 5% 0, 95% 0, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0 95%);
  transition: clip-path .9s var(--mv-ease);
}

/* ─────────────────────────── 16 · WHATSAPP ─────────────────────────────── */
.wa-float::after {
  content: ''; position: absolute; inset: -5px; border-radius: 999px;
  border: 2.5px solid rgba(37, 211, 102, .7); pointer-events: none;
  animation: mvAnel 2.2s ease-out infinite;
}
@keyframes mvAnel {
  0%   { transform: scale(.98); opacity: .8 }
  70%  { transform: scale(1.22); opacity: 0 }
  100% { transform: scale(1.22); opacity: 0 }
}
.wa-float.mv-chama { animation: mvChama .9s ease-in-out; }
@keyframes mvChama {
  0%, 100% { transform: none }
  15% { transform: rotate(-4deg) scale(1.05) }
  35% { transform: rotate(3deg)  scale(1.05) }
  55% { transform: rotate(-2deg) scale(1.03) }
  75% { transform: rotate(1deg)  scale(1.01) }
}

.cta-opcao-arrow { opacity: .45; transition: opacity .25s, transform .35s var(--mv-ease); }
.cta-opcao:hover .cta-opcao-arrow { opacity: 1; transform: translateX(7px); }

/* partículas de confirmação (padrão do particle-button do KokonutUI, MIT) */
.mv-particula {
  position: fixed; width: 5px; height: 5px; border-radius: 50%;
  background: var(--laranja); z-index: 1100; pointer-events: none;
  will-change: transform, opacity;
}

/* ─────────────────────────── 17 · TRILHA DE CAPÍTULOS ─────────────────────
   O narrador da página: hexágonos (a forma vem do monograma) marcando os 7
   capítulos, com o selo da marca descendo e girando conforme a leitura.
   É um <div role="navigation">, NÃO um <nav>: style.css estiliza o elemento
   nu e um <nav> novo herda a barra fixa do topo — vira uma faixa de largura
   total com desfoque atravessando a tela. As linhas de blindagem abaixo
   existem pra que isso não volte a acontecer se alguém mudar a tag. */
.mv-trilha {
  display: flex; flex-direction: column; align-items: flex-end;
  position: fixed; top: 50%; right: 26px; left: auto;
  transform: translateY(-50%);
  z-index: 95;
  background: none; border: 0; padding: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.mv-trilha-linha {
  position: absolute; right: 10px; top: 6px; bottom: 6px; width: 1px;
  background: rgba(43, 33, 24, .14);
}
.mv-trilha-linha i {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background: linear-gradient(180deg, var(--laranja), var(--dourado));
  transform: scaleY(0); transform-origin: 50% 0;
  transition: transform .25s linear;
}
.mv-cap {
  position: relative; display: flex; align-items: center; gap: 10px;
  height: 34px; min-width: 44px; justify-content: flex-end;
  padding-right: 22px; text-decoration: none;
}
.mv-cap-rotulo {
  font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--texto-muted);
  white-space: nowrap; opacity: 0; transform: translateX(8px);
  background: var(--fundo-card); padding: 3px 9px; border-radius: 2px;
  transition: opacity .3s var(--mv-ease), transform .3s var(--mv-ease), color .3s;
}
.mv-cap:hover .mv-cap-rotulo,
.mv-cap:focus-visible .mv-cap-rotulo,
.mv-cap.mv-ativo .mv-cap-rotulo { opacity: 1; transform: none; }
.mv-cap.mv-ativo .mv-cap-rotulo { color: var(--laranja-texto); }
.mv-cap-ponto {
  position: absolute; right: 6px; width: 9px; height: 9px;
  border: 1.5px solid rgba(43, 33, 24, .28); background: var(--fundo);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  transition: transform .3s var(--mv-ease), background .3s, border-color .3s;
}
.mv-cap.mv-ativo .mv-cap-ponto,
.mv-cap.mv-visto .mv-cap-ponto { background: var(--laranja); border-color: var(--laranja); }
.mv-cap.mv-ativo .mv-cap-ponto { transform: scale(1.5); }
.mv-selo {
  position: absolute; right: 0; width: 22px; height: 22px;
  opacity: 0; pointer-events: none; will-change: transform;
  transition: transform .45s var(--mv-ease), opacity .3s;
}
.mv-selo img { width: 100%; height: 100%; display: block; }

@media (max-width: 1100px) { .mv-trilha { display: none; } }

/* no celular o mesmo estado vira uma fita fina no topo */
.mv-fita { display: none; }
@media (max-width: 1100px) {
  .mv-fita {
    display: flex; align-items: center; gap: 8px;
    position: fixed; left: 0; right: 0; top: 0; z-index: 96;
    padding: 4px 14px;
    font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase; color: var(--laranja-texto);
    background: linear-gradient(180deg, rgba(253, 249, 242, .96), rgba(253, 249, 242, 0));
    opacity: 0; transition: opacity .3s; pointer-events: none;
  }
  .mv-fita b { color: var(--texto); font-weight: 700; }
}

/* cabeçalho de capítulo: número em Cormorant e régua que se desenha */
.mv-cap-cabeca { display: flex; align-items: baseline; gap: 16px; margin-bottom: 10px; }
.mv-cap-cabeca-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(40px, 5vw, 68px); font-weight: 600; line-height: .8;
  letter-spacing: -.02em; color: var(--laranja); opacity: .22;
}
.mv-cap-cabeca-regua {
  flex: 1; height: 1px; background: var(--borda-quente);
  position: relative; top: -10px;
}
.mv-cap-cabeca-regua i {
  position: absolute; inset: 0; background: var(--laranja);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1.1s var(--mv-ease);
}
.mv-dentro .mv-cap-cabeca-regua i { transform: scaleX(1); }

/* ─────────────────────────── 18 · MOVIMENTO REDUZIDO ────────────────────── */
/* desliga o movimento, nunca a informação */
@media (prefers-reduced-motion: reduce) {
  .mv-feixe,
  .mv-aura,
  .wa-float::after,
  .wa-float.mv-chama,
  .mv-marquee-track,
  .google-nota.mv-brilho .google-nota-estrelas,
  .imovel-card:hover::before { animation: none !important; }

  html.mv-anime .hero-title em [data-word] {
    animation: none !important;
    background: none !important;
    color: var(--laranja-texto) !important;
    -webkit-text-fill-color: currentColor;
  }
  .mv-marquee { overflow-x: auto; }
  .mv-marquee-track { width: auto; }
  .mv-num i { transform: none !important; transition: none !important; }
  .mv-cap-cabeca-regua i { transform: scaleX(1) !important; }
  .servico-item.mv-dentro::before { transform: scaleY(1) !important; }
  html.mv-js .publicos-grid:not(.mv-dentro) .publico-card { transform: none !important; }
  .mv-selo, .mv-progresso { transition: none !important; }
  .sobre-foto-inner { transition: none !important; }
}
