/* =========================================================
   FUNICHELLO MÓVEIS PLANEJADOS — folha única do site
   Portada do modelo estático aprovado (modelo-estatico/).

   ⚠️ ESTE É O ÚNICO CSS DE LAYOUT DO SITE. O do Kadence é
   desenfileirado em inc/enqueue.php. Não existe segunda folha
   para "consertar" nada por cima.

   ⚠️ ALTERAÇÃO EM SELETOR GLOBAL (*, body, a, img, button)
   ALCANÇA PÁGINA QUE NINGUÉM ESTAVA OLHANDO. Print antes e
   depois, sempre.

   ORDEM DO ARQUIVO
     1  fontes
     2  variáveis
     3  reset
     4  menu
     5  botões e elementos comuns
     6  home
     7  galeria de projetos
     8  página do projeto
     9  páginas comuns, busca e 404
    10  rodapé
    11  movimento reduzido
   ========================================================= */

/* ============ 1. FONTES ============ */
/* Hospedadas no próprio tema. Ver o comentário em inc/enqueue.php:
   carregar do Google entregaria o IP de todo visitante antes de
   qualquer aceite de cookies. Só o subconjunto `latin` — o
   português inteiro cabe nele. */

@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;font-weight:300;font-display:swap;
  src:url('../fonts/cormorantgaramond-300.woff2') format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/cormorantgaramond-400.woff2') format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic;font-weight:300;font-display:swap;
  src:url('../fonts/cormorantgaramond-300italic.woff2') format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic;font-weight:400;font-display:swap;
  src:url('../fonts/cormorantgaramond-400italic.woff2') format('woff2');
}
@font-face{
  font-family:'Manrope';
  font-style:normal;font-weight:300;font-display:swap;
  src:url('../fonts/manrope-300.woff2') format('woff2');
}
@font-face{
  font-family:'Manrope';
  font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/manrope-400.woff2') format('woff2');
}
@font-face{
  font-family:'Manrope';
  font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/manrope-500.woff2') format('woff2');
}
@font-face{
  font-family:'Manrope';
  font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/manrope-600.woff2') format('woff2');
}
@font-face{
  font-family:'Manrope';
  font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/manrope-700.woff2') format('woff2');
}

/* ============ 2. VARIÁVEIS ============ */
/* Paleta extraída do logo: preto profundo + dourado champagne.
   ⚠️ Usar sempre o token, nunca o hexadecimal solto. */
:root{
  --ink: #0a0a0a;
  --ink-soft: #141414;
  --ink-line: #1f1f1f;
  --bone: #f6f3ee;
  --bone-soft: #efeae2;
  --paper: #ffffff;
  --gold: #d4b27a;
  --gold-deep: #b8945f;
  --gold-soft: #e4cba0;
  --muted: #8a8580;
  --muted-dark: #6b6661;
  --whatsapp: #25d366;

  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Manrope', system-ui, -apple-system, sans-serif;

  --max: 1440px;
  --gutter: clamp(20px, 4vw, 64px);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ============ 3. RESET ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  font-family:var(--sans);
  background:var(--ink);
  color:var(--bone);
  font-weight:300;
  line-height:1.5;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--gold);color:var(--ink)}

/* Foco visível. ⚠️ Nunca trocar por outline:none sem pôr algo no
   lugar — quem navega por teclado perde a noção de onde está. */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}

.pular-conteudo{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gold);color:var(--ink);
  padding:12px 20px;font-size:13px;font-weight:600;
}
.pular-conteudo:focus{left:12px;top:12px}

/* ============ 4. MENU ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:18px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;
  transition:background .5s var(--ease-out), backdrop-filter .5s var(--ease-out), border-color .5s var(--ease-out);
  border-bottom:1px solid transparent;
}
/* A barra do WordPress empurra a página 32px. Sem isto, o menu fixo
   fica atravessado por ela para quem está logado. */
body.admin-bar .nav{top:32px}
@media screen and (max-width:782px){body.admin-bar .nav{top:46px}}

.nav.rolou{
  background:rgba(10,10,10,.72);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border-bottom-color:rgba(212,178,122,.08);
}
.nav.no-claro{background:rgba(246,243,238,.82);border-bottom-color:rgba(10,10,10,.06)}
.nav.no-claro .nav-link,
.nav.no-claro .nav-logo-text{color:var(--ink)}
.nav.no-claro .nav-cta{border-color:rgba(10,10,10,.2);color:var(--ink)}
.nav.no-claro .nav-cta:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.nav.no-claro .nav-burger span{background:var(--ink)}

.nav-logo{display:flex;align-items:center;gap:12px}
/* Vale para os dois: o SVG desenhado pelo tema e o <img> enviado pelo painel.
   `object-fit:contain` impede que um arquivo fora do quadrado saia esticado —
   o campo pede quadrado, mas cliente envia o que tiver. */
.marca-simbolo{width:34px;height:34px;flex:none;object-fit:contain;transition:transform .6s var(--ease-out)}
.nav-logo:hover .marca-simbolo{transform:rotate(-8deg)}
.marca-nav{height:38px;width:auto;object-fit:contain}
/* As duas logos do menu: a escura por padrão, a clara só sobre seção creme.
   Ver o comentário em fmp_marca(), em inc/helpers.php. */
.marca-clara{display:none}
.nav.no-claro .marca-escuro{display:none}
.nav.no-claro .marca-clara{display:block}
/* A assinatura do Manifesto — logo pequena ao lado de "Funichello — Desde 2014". */
.marca-assinatura{height:30px;width:auto;object-fit:contain;flex:none}
.nav-logo-text{
  font-family:var(--sans);font-weight:600;letter-spacing:.18em;
  font-size:13px;text-transform:uppercase;color:var(--bone);
  transition:color .5s var(--ease-out);
}
.nav-links{display:flex;gap:36px;align-items:center}
.nav-link{
  font-size:13px;font-weight:400;letter-spacing:.04em;
  color:var(--bone);opacity:.78;
  transition:opacity .3s, color .5s var(--ease-out);
  position:relative;padding:6px 0;
}
.nav-link:hover{opacity:1}
.nav-link.active{opacity:1;color:var(--gold)}
.nav.no-claro .nav-link.active{color:var(--gold-deep)}
.nav-link::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--gold);transition:width .4s var(--ease-out);
}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.nav-cta{
  font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  padding:11px 22px;border:1px solid rgba(212,178,122,.4);border-radius:100px;
  color:var(--gold);transition:all .4s var(--ease-out);white-space:nowrap;
}
.nav-cta:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}

.nav-burger{display:none;flex-direction:column;gap:5px;padding:8px}
.nav-burger span{width:22px;height:1px;background:var(--bone);transition:.3s var(--ease-out)}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ⚠️ A REGRA `[hidden]` ABAIXO NÃO É REDUNDANTE.
   O navegador esconde `[hidden]` com `display:none`, mas o `display:flex`
   daqui GANHA dessa regra padrão — sem a linha explícita, o menu do celular
   nasceria aberto por cima da página inteira, e só em telas estreitas.
   Mesma armadilha vale para `.lightbox` e para os ícones do botão de som. */
.nav-mobile[hidden]{display:none}
.nav-mobile{
  position:fixed;inset:0;z-index:99;
  background:rgba(10,10,10,.97);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:28px;
  padding:100px var(--gutter) 60px;
}
.nav-mobile .nav-link{
  font-family:var(--serif);font-size:32px;font-weight:300;opacity:1;color:var(--bone);
}
.nav-mobile .nav-link::after{left:50%;transform:translateX(-50%)}
.nav-mobile-cta{margin-top:12px}

@media (max-width:880px){
  .nav-links{display:none}
  .nav-burger{display:flex}
}
@media (min-width:881px){
  .nav-mobile{display:none}
}

/* ============ 5. BOTÕES E COMUNS ============ */
.btn{
  font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  padding:16px 32px;border-radius:100px;
  display:inline-flex;align-items:center;gap:10px;
  transition:all .4s var(--ease-out);cursor:pointer;
  text-align:center;
}
.btn-primary{background:var(--gold);color:var(--ink);border:1px solid var(--gold)}
.btn-primary:hover{
  background:var(--gold-deep);border-color:var(--gold-deep);
  transform:translateY(-2px);box-shadow:0 12px 32px rgba(212,178,122,.25);
}
.btn-ghost{background:transparent;color:var(--bone);border:1px solid rgba(246,243,238,.25)}
.btn-ghost:hover{border-color:var(--bone);transform:translateY(-2px)}
/* Variante para fundo claro — o fantasma branco some no creme.
   É a armadilha que custou quatro rodadas no site da Construtora. */
.btn-ghost-claro{color:var(--ink);border-color:rgba(10,10,10,.25)}
.btn-ghost-claro:hover{border-color:var(--ink)}
.btn-dark{background:var(--ink);color:var(--bone);border:1px solid var(--ink)}
.btn-dark:hover{background:var(--gold-deep);border-color:var(--gold-deep);transform:translateY(-2px)}
.btn-whatsapp{background:var(--whatsapp);color:#fff;border:1px solid var(--whatsapp)}
.btn-whatsapp:hover{
  background:#1ebe5d;border-color:#1ebe5d;
  transform:translateY(-2px);box-shadow:0 12px 32px rgba(37,211,102,.25);
}
.btn-icone{width:14px;height:14px;flex:none;transition:transform .3s}
.btn:hover .btn-icone{transform:translateX(3px)}
.btn-whatsapp:hover .btn-icone{transform:none}

.section-tag{
  font-size:11px;font-weight:600;letter-spacing:.35em;text-transform:uppercase;
  color:var(--gold-deep);display:flex;align-items:center;gap:14px;
}
.section-tag::before{content:'';display:inline-block;width:36px;height:1px;background:var(--gold-deep)}
.section-tag.center{justify-content:center}
.section-tag.center::before{display:none}
.section-tag.center::after{content:'';display:inline-block;width:36px;height:1px;background:var(--gold-deep)}
.section-tag.on-dark{color:var(--gold)}
.section-tag.on-dark::before,.section-tag.on-dark.center::after{background:var(--gold)}

.wa-float{
  position:fixed;bottom:28px;right:28px;z-index:90;
  width:60px;height:60px;border-radius:50%;
  background:var(--whatsapp);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(37,211,102,.4);
  transition:transform .4s var(--ease-out);
  animation:pulso 2.4s ease-in-out infinite;
}
.wa-float:hover{transform:scale(1.08) translateY(-2px);animation-play-state:paused}
.wa-float svg{width:28px;height:28px}
@keyframes pulso{
  0%,100%{box-shadow:0 10px 30px rgba(37,211,102,.4), 0 0 0 0 rgba(37,211,102,.4)}
  50%{box-shadow:0 10px 30px rgba(37,211,102,.4), 0 0 0 18px rgba(37,211,102,0)}
}

.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease-out), transform 1s var(--ease-out)}
.reveal.dentro{opacity:1;transform:translateY(0)}
.reveal-stagger > *{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease-out), transform .8s var(--ease-out)}
.reveal-stagger.dentro > *{opacity:1;transform:translateY(0)}
.reveal-stagger.dentro > *:nth-child(1){transition-delay:0s}
.reveal-stagger.dentro > *:nth-child(2){transition-delay:.06s}
.reveal-stagger.dentro > *:nth-child(3){transition-delay:.12s}
.reveal-stagger.dentro > *:nth-child(4){transition-delay:.18s}
.reveal-stagger.dentro > *:nth-child(5){transition-delay:.24s}
.reveal-stagger.dentro > *:nth-child(6){transition-delay:.3s}

/* ============ 6. HOME ============ */

/* --- primeira tela --- */
.hero{
  min-height:100vh;position:relative;background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:120px var(--gutter) 80px;
}
.hero-foto{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  filter:brightness(.42) saturate(.9);
}
.hero-brilho{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 50% 40%, rgba(212,178,122,.08) 0%, transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(212,178,122,.04) 0%, transparent 60%);
}
.hero-grao{
  position:absolute;inset:0;opacity:.4;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}
.hero-inner{position:relative;z-index:2;text-align:center;max-width:1100px;margin:0 auto}
.hero-eyebrow{
  font-size:11px;font-weight:500;letter-spacing:.4em;text-transform:uppercase;
  color:var(--gold);margin-bottom:32px;
  opacity:0;animation:sobe 1.2s var(--ease-out) .2s forwards;
}
.hero-eyebrow::before,.hero-eyebrow::after{
  content:'';display:inline-block;width:24px;height:1px;background:var(--gold);
  vertical-align:middle;margin:0 16px;opacity:.5;
}
.hero-title{
  font-family:var(--serif);font-size:clamp(48px, 9vw, 132px);
  font-weight:300;line-height:.95;letter-spacing:-.02em;
  color:var(--bone);margin-bottom:36px;
  opacity:0;animation:sobe 1.4s var(--ease-out) .4s forwards;
}
.hero-title em{font-style:italic;font-weight:400;color:var(--gold)}
.hero-sub{
  max-width:560px;margin:0 auto 48px;
  font-size:clamp(15px, 1.4vw, 18px);color:rgba(246,243,238,.7);
  font-weight:300;line-height:1.6;
  opacity:0;animation:sobe 1.2s var(--ease-out) .9s forwards;
}
.hero-ctas{
  display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
  opacity:0;animation:sobe 1.2s var(--ease-out) 1.1s forwards;
}
.hero-scroll{
  position:absolute;bottom:36px;left:50%;transform:translateX(-50%);z-index:2;
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(246,243,238,.4);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  opacity:0;animation:sobe 1.2s var(--ease-out) 1.4s forwards;
}
.hero-scroll-linha{
  width:1px;height:40px;
  background:linear-gradient(to bottom, var(--gold), transparent);
  animation:linhaScroll 2.2s ease-in-out infinite;
}
@keyframes sobe{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes linhaScroll{
  0%,100%{transform:scaleY(.3);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
}

/* --- manifesto --- */
.manifesto{background:var(--bone);color:var(--ink);padding:clamp(100px, 16vh, 180px) var(--gutter);position:relative}
.manifesto-inner{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1fr 1.8fr;
  gap:clamp(40px, 8vw, 120px);align-items:start;
}
.manifesto-title{
  font-family:var(--serif);font-size:clamp(36px, 5.5vw, 76px);
  font-weight:300;line-height:1.05;letter-spacing:-.02em;margin-top:32px;
}
.manifesto-title em{font-style:italic;color:var(--gold-deep)}
.manifesto-body{
  font-size:clamp(16px, 1.3vw, 19px);line-height:1.7;
  color:var(--muted-dark);font-weight:300;padding-top:8px;
}
.manifesto-body p{margin-bottom:24px}
.manifesto-body p:first-child{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(20px,1.7vw,26px);line-height:1.4;
  color:var(--ink);font-weight:400;
}
.manifesto-assinatura{
  margin-top:40px;display:flex;align-items:center;gap:16px;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-dark);
}
.manifesto-assinatura .marca-simbolo{width:28px;height:28px}
@media (max-width:880px){.manifesto-inner{grid-template-columns:1fr;gap:24px}}

/* --- ambientes --- */
.ambientes{background:var(--ink);padding:clamp(100px, 14vh, 160px) var(--gutter)}
.amb-header{
  max-width:var(--max);margin:0 auto clamp(60px, 8vh, 100px);
  display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;
}
.amb-header h2{
  font-family:var(--serif);font-weight:300;font-size:clamp(36px, 5vw, 68px);
  line-height:1;letter-spacing:-.02em;margin-top:24px;
}
.amb-header h2 em{font-style:italic;color:var(--gold)}
.amb-header-right{display:flex;flex-direction:column;align-items:flex-end;gap:18px;max-width:380px}
.amb-header p{font-size:15px;color:rgba(246,243,238,.6);line-height:1.6;text-align:right}
@media (max-width:880px){.amb-header-right{align-items:flex-start}.amb-header p{text-align:left}}

.amb-grid{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(12, 1fr);gap:clamp(12px, 1.5vw, 20px);
}
.amb-card{
  position:relative;overflow:hidden;border-radius:6px;
  background:var(--ink-soft);aspect-ratio:1/1;
  transition:transform .8s var(--ease-out);display:block;color:inherit;
}
.amb-card:hover{transform:translateY(-6px)}
.amb-card-img{position:absolute;inset:0;overflow:hidden}
.amb-card-img > div{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform 1.4s var(--ease-out), filter .8s;
  filter:saturate(.9) contrast(1.05);
}
.amb-card:hover .amb-card-img > div{transform:scale(1.06);filter:saturate(1) contrast(1.05)}
.amb-card-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top, rgba(10,10,10,.85) 0%, rgba(10,10,10,.1) 50%, transparent 70%);
}
.amb-card-label{
  position:absolute;left:24px;bottom:22px;z-index:2;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone);font-weight:500;
}
.amb-card-label::before{
  content:'';display:inline-block;width:20px;height:1px;
  background:var(--gold);vertical-align:middle;margin-right:10px;
}
.amb-card.grande{grid-column:span 7;aspect-ratio:16/11}
.amb-card.media{grid-column:span 5;aspect-ratio:16/13}
.amb-card.metade{grid-column:span 6;aspect-ratio:4/3}
@media (max-width:880px){
  .amb-card.grande,.amb-card.media,.amb-card.metade{grid-column:span 12;aspect-ratio:4/3}
}

/* --- faixa larga --- */
.faixa{background:var(--ink);padding:clamp(60px, 10vh, 120px) var(--gutter);text-align:center}
.faixa-inner{
  max-width:1200px;margin:0 auto;position:relative;
  border-radius:14px;overflow:hidden;aspect-ratio:21/10;background:#1a1410;
}
.faixa-img{
  position:absolute;inset:0;background-size:cover;background-position:center;
  filter:brightness(.55) saturate(.95);
}
.faixa-content{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:clamp(30px,6vw,80px);
  background:linear-gradient(to bottom, rgba(10,10,10,.25) 0%, rgba(10,10,10,.55) 100%);
}
.faixa-eyebrow{
  font-size:11px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--gold);margin-bottom:20px;font-weight:500;
}
.faixa-title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(30px,5.5vw,82px);line-height:1;letter-spacing:-.02em;max-width:900px;
}
.faixa-title em{font-style:italic;color:var(--gold)}
.faixa-cta{
  margin-top:36px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--bone);display:inline-flex;align-items:center;gap:10px;
  padding-bottom:6px;border-bottom:1px solid var(--gold);transition:gap .3s;
}
.faixa-cta:hover{gap:16px}
.faixa-cta .btn-icone{width:14px;height:14px}
@media (max-width:880px){.faixa-inner{aspect-ratio:4/5}}

/* --- processo --- */
.processo{background:var(--bone);color:var(--ink);padding:clamp(100px,16vh,180px) var(--gutter)}
.proc-inner{max-width:var(--max);margin:0 auto}
.proc-header{text-align:center;margin:0 auto clamp(60px,10vh,120px);max-width:780px}
.proc-header h2{
  font-family:var(--serif);font-weight:300;font-size:clamp(36px,5vw,68px);
  line-height:1.05;letter-spacing:-.02em;margin-top:24px;
}
.proc-header h2 em{font-style:italic;color:var(--gold-deep)}
.proc-header p{margin-top:24px;color:var(--muted-dark);font-size:17px;line-height:1.6}
/* ⚠️ `auto-fit` E NÃO `repeat(5,1fr)`. O número de etapas vem do painel: hoje
   são cinco, mas o cliente pode acrescentar ou tirar uma. Com a contagem
   cravada no CSS, a sexta etapa cairia sozinha numa segunda linha e ninguém
   ligaria o defeito à edição feita semanas antes. Assim a seção se ajusta. */
.proc-steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:clamp(20px,3vw,40px);position:relative;
}
.proc-steps::before{
  content:'';position:absolute;top:30px;left:8%;right:8%;height:1px;
  background:linear-gradient(to right, transparent, var(--gold-deep) 20%, var(--gold-deep) 80%, transparent);
  opacity:.3;
}
.proc-step{position:relative;text-align:center}
.proc-num{
  display:flex;align-items:center;justify-content:center;
  width:60px;height:60px;border-radius:50%;
  background:var(--bone);border:1px solid var(--gold-deep);
  font-family:var(--serif);font-size:22px;font-weight:400;font-style:italic;
  color:var(--gold-deep);position:relative;z-index:2;margin:0 auto 28px;
  transition:all .4s var(--ease-out);
}
.proc-step:hover .proc-num{background:var(--ink);color:var(--gold);border-color:var(--ink);transform:translateY(-4px)}
.proc-step h3{font-family:var(--serif);font-size:24px;font-weight:400;margin-bottom:12px;letter-spacing:-.01em}
.proc-step p{font-size:14px;color:var(--muted-dark);line-height:1.6;max-width:240px;margin:0 auto}
/* Quebra em 1024 e não em 880: com cinco etapas, a faixa dos 900px daria
   cinco colunas de ~138px, estreitas demais para o texto respirar. */
@media (max-width:1024px){
  .proc-steps{grid-template-columns:1fr 1fr;gap:40px}
  .proc-steps::before{display:none}
}
@media (max-width:520px){.proc-steps{grid-template-columns:1fr}}

/* --- números --- */
.numeros{background:var(--ink);padding:clamp(100px,14vh,160px) var(--gutter);position:relative;overflow:hidden}
.numeros::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 70% 20%, rgba(212,178,122,.06), transparent 50%);
}
.numeros-inner{max-width:var(--max);margin:0 auto;position:relative}
.numeros-header{text-align:center;margin-bottom:clamp(60px,10vh,100px)}
.numeros-header h2{font-family:var(--serif);font-weight:300;font-size:clamp(36px,5vw,68px);line-height:1.05}
.numeros-header h2 em{font-style:italic;color:var(--gold)}
.numeros-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2vw,30px)}
.numero-card{
  padding:48px 36px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border:1px solid rgba(212,178,122,.12);border-radius:14px;
  transition:all .5s var(--ease-out);
}
.numero-card:hover{
  border-color:rgba(212,178,122,.3);transform:translateY(-6px);
  background:linear-gradient(180deg, rgba(212,178,122,.04), rgba(212,178,122,0));
}
.numero-icone{width:42px;height:42px;margin-bottom:28px;color:var(--gold)}
/* ⚠️ `flex-wrap` NÃO É DETALHE AQUI. O campo aceita palavra além de número —
   "Sem prazo" é um dos valores reais. Em 1440px ele ocupa 344px de 345px
   disponíveis, e por volta de 1200px passaria do card. Sem o wrap, o texto
   vazaria por cima da borda; com ele, o complemento cai para a linha de
   baixo e continua legível. */
.numero-valor{
  font-family:var(--serif);font-size:clamp(48px,5.5vw,72px);
  font-weight:300;line-height:1;letter-spacing:-.03em;color:var(--bone);
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
}
.numero-valor em{font-style:italic;color:var(--gold);font-size:.6em;font-weight:400}
.numero-card h3{font-size:14px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;margin-top:18px;color:var(--bone)}
.numero-card p{margin-top:14px;font-size:14px;line-height:1.6;color:rgba(246,243,238,.55);font-weight:300}
@media (max-width:880px){.numeros-grid{grid-template-columns:1fr}}

/* --- instagram --- */
.instagram{background:var(--ink);padding:clamp(80px,12vh,140px) var(--gutter);border-top:1px solid rgba(212,178,122,.08)}
.ig-header{
  max-width:var(--max);margin:0 auto clamp(40px,6vh,70px);
  display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;
}
.ig-header h2{
  font-family:var(--serif);font-weight:300;font-size:clamp(28px,3.6vw,48px);
  line-height:1.1;letter-spacing:-.02em;margin-top:20px;
}
.ig-header h2 em{font-style:italic;color:var(--gold)}
.ig-handle{
  font-size:13px;letter-spacing:.14em;color:rgba(246,243,238,.55);
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 22px;border:1px solid rgba(212,178,122,.3);border-radius:100px;
  transition:all .3s;white-space:nowrap;
}
.ig-handle:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.ig-handle svg{width:16px;height:16px}
.ig-feed{max-width:var(--max);margin:0 auto}
.ig-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.ig-cell{
  aspect-ratio:1/1;background:#1a1a1a;background-size:cover;background-position:center;
  position:relative;overflow:hidden;display:block;
  transition:transform .5s var(--ease-out);
}
.ig-cell:hover{transform:scale(1.04);z-index:2}
.ig-cell::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(212,178,122,0), rgba(10,10,10,.6));
  opacity:0;transition:opacity .4s;
}
.ig-cell:hover::after{opacity:1}
.ig-cell-icone{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.8);
  color:#fff;opacity:0;transition:all .4s;z-index:3;
}
.ig-cell:hover .ig-cell-icone{opacity:1;transform:translate(-50%,-50%) scale(1)}
.ig-cell-icone svg{width:28px;height:28px}
@media (max-width:880px){.ig-grid{grid-template-columns:repeat(3,1fr)}}

/* --- o espaço --- */
.espaco{background:var(--bone);color:var(--ink);display:grid;grid-template-columns:1fr 1fr;min-height:90vh}
.espaco.espaco-sem-foto{grid-template-columns:1fr}
.espaco-visual{background-size:cover;background-position:center;position:relative;min-height:60vh}
.espaco-visual::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg, rgba(10,10,10,.2), transparent)}
.espaco-content{
  padding:clamp(60px,8vw,120px) clamp(40px,6vw,90px);
  display:flex;flex-direction:column;justify-content:center;
}
.espaco.espaco-sem-foto .espaco-content{max-width:var(--max);margin:0 auto;width:100%}
.espaco-content h2{
  font-family:var(--serif);font-weight:300;font-size:clamp(36px,4.5vw,64px);
  line-height:1.05;letter-spacing:-.02em;margin-top:24px;
}
.espaco-content h2 em{font-style:italic;color:var(--gold-deep)}
.espaco-content p{font-size:17px;line-height:1.7;color:var(--muted-dark);margin-top:28px;max-width:480px}
.espaco-linhas{
  margin-top:48px;display:flex;flex-direction:column;gap:18px;
  padding-top:32px;border-top:1px solid rgba(10,10,10,.1);
}
.espaco-linha{display:flex;justify-content:space-between;gap:24px;font-size:14px}
.espaco-linha .k{color:var(--muted-dark);letter-spacing:.06em;text-transform:uppercase;font-size:11px;font-weight:600}
.espaco-linha .v{color:var(--ink);text-align:right;font-weight:400}
.espaco-content .btn{margin-top:48px;align-self:flex-start}
@media (max-width:880px){
  .espaco{grid-template-columns:1fr}
  .espaco-visual{aspect-ratio:4/3;min-height:0}
}

/* --- mapa --- */
.mapa{background:var(--ink);padding:clamp(80px,12vh,140px) var(--gutter);border-top:1px solid rgba(212,178,122,.08)}
.mapa-inner{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1fr 1.4fr;
  gap:clamp(40px,5vw,80px);align-items:stretch;
}
/* Sem coordenada não há desenho de mapa — o bloco de endereço ocupa
   a largura sozinho, em vez de deixar metade da seção vazia. */
.mapa-inner.mapa-sem-desenho{grid-template-columns:1fr;max-width:760px}
.mapa-info h2{
  font-family:var(--serif);font-weight:300;font-size:clamp(34px,4.5vw,60px);
  line-height:1.05;letter-spacing:-.02em;margin-top:24px;
}
.mapa-info h2 em{font-style:italic;color:var(--gold)}
.mapa-endereco{
  margin-top:32px;padding:24px 28px;
  background:rgba(212,178,122,.05);border:1px solid rgba(212,178,122,.15);border-radius:10px;
}
.mapa-endereco-label{font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:10px}
.mapa-endereco-rua{font-family:var(--serif);font-size:22px;line-height:1.3;color:var(--bone);font-weight:400}
.mapa-endereco-cep{margin-top:10px;font-size:13px;color:rgba(246,243,238,.55);letter-spacing:.04em}
.mapa-acoes{margin-top:32px;display:flex;flex-direction:column;gap:12px}
.mapa-acao{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 24px;border:1px solid rgba(212,178,122,.2);border-radius:100px;
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;
  transition:all .3s var(--ease-out);color:var(--bone);
}
.mapa-acao:hover{border-color:var(--gold);background:rgba(212,178,122,.06);transform:translateY(-2px)}
.mapa-acao-esq{display:flex;align-items:center;gap:14px}
.mapa-acao-esq svg{width:20px;height:20px;color:var(--gold);flex:none}
.mapa-acao-seta{width:14px;height:14px;color:rgba(246,243,238,.5);transition:transform .3s;flex:none}
.mapa-acao:hover .mapa-acao-seta{transform:translateX(4px);color:var(--gold)}
.mapa-frame{
  position:relative;border-radius:14px;overflow:hidden;
  border:1px solid rgba(212,178,122,.15);min-height:420px;background:#1a1a1a;
}
/* O mapa do Leaflet fica escuro para não brigar com a seção preta.
   ⚠️ O filtro é aplicado só nos ladrilhos: no painel inteiro ele
   inverteria também o pino e o texto de crédito. */
.mapa-frame .leaflet-tile-pane{filter:invert(.92) hue-rotate(180deg) saturate(.25) brightness(.95)}
.mapa-frame .leaflet-container{background:#1a1a1a;font-family:var(--sans)}
.mapa-frame .leaflet-control-attribution{background:rgba(10,10,10,.6);color:rgba(246,243,238,.5);font-size:10px}
.mapa-frame .leaflet-control-attribution a{color:var(--gold)}
.mapa-pino{
  width:18px;height:18px;border-radius:50%;
  background:var(--gold);border:3px solid var(--ink);
  box-shadow:0 0 0 4px rgba(212,178,122,.35);
}
@media (max-width:880px){
  .mapa-inner{grid-template-columns:1fr}
  .mapa-frame{min-height:340px}
}

/* --- depoimentos --- */
.depoimentos{background:var(--ink);padding:clamp(100px,14vh,160px) var(--gutter)}
.dep-inner{max-width:1100px;margin:0 auto;text-align:center;position:relative}
.dep-aspas{font-family:var(--serif);font-size:90px;line-height:1;color:var(--gold);opacity:.35;font-style:italic;margin-bottom:24px}
.dep-item{display:none}
.dep-item.ativo{display:block;animation:aparece .5s var(--ease-out)}
@keyframes aparece{from{opacity:0}to{opacity:1}}
.dep-texto{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(24px,3vw,40px);line-height:1.4;letter-spacing:-.01em;
  color:var(--bone);max-width:900px;margin:0 auto;font-style:italic;
}
.dep-autor{margin-top:40px;font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);font-weight:500}
.dep-autor span{
  display:block;color:rgba(246,243,238,.5);margin-top:6px;
  letter-spacing:.15em;font-size:11px;font-weight:400;
  text-transform:none;font-style:italic;font-family:var(--serif);
}
.dep-dots{display:flex;gap:8px;justify-content:center;margin-top:48px}
.dep-dot{width:6px;height:6px;border-radius:50%;background:rgba(246,243,238,.2);transition:all .3s;padding:0}
.dep-dot.ativo{background:var(--gold);width:28px;border-radius:3px}

/* --- chamada final --- */
.cta-final{
  background:var(--bone);color:var(--ink);
  padding:clamp(100px,16vh,180px) var(--gutter);
  text-align:center;position:relative;overflow:hidden;
}
.cta-final::before{
  content:'';position:absolute;top:-100px;left:50%;transform:translateX(-50%);
  width:600px;height:600px;pointer-events:none;
  background:radial-gradient(circle, rgba(212,178,122,.12), transparent 60%);
}
.cta-final-inner{max-width:900px;margin:0 auto;position:relative}
.cta-final h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(40px,6vw,86px);line-height:1.02;letter-spacing:-.02em;margin-top:24px;
}
.cta-final h2 em{font-style:italic;color:var(--gold-deep)}
.cta-final p{margin:32px auto 0;font-size:18px;line-height:1.6;color:var(--muted-dark);max-width:560px}
.cta-final-botoes{margin-top:48px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ============ 7. GALERIA DE PROJETOS ============ */
.gal-hero{background:var(--ink);padding:160px var(--gutter) 80px;text-align:center;position:relative;overflow:hidden}
.gal-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 50% at 50% 60%, rgba(212,178,122,.07), transparent 70%);
}
.gal-hero-inner{max-width:1100px;margin:0 auto;position:relative}
.gal-eyebrow{
  font-size:11px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--gold);font-weight:500;margin-bottom:32px;
  opacity:0;animation:sobe 1s var(--ease-out) .2s forwards;
}
.gal-eyebrow::before,.gal-eyebrow::after{
  content:'';display:inline-block;width:24px;height:1px;background:var(--gold);
  vertical-align:middle;margin:0 16px;opacity:.5;
}
.gal-title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(44px, 8vw, 108px);line-height:.98;letter-spacing:-.02em;margin-bottom:32px;
  opacity:0;animation:sobe 1.2s var(--ease-out) .4s forwards;
}
.gal-title em{font-style:italic;color:var(--gold)}
.gal-sub{
  max-width:620px;margin:0 auto;
  font-size:18px;line-height:1.6;color:rgba(246,243,238,.65);font-weight:300;
  opacity:0;animation:sobe 1.2s var(--ease-out) .6s forwards;
}
.gal-toolbar{background:var(--ink);padding:0 var(--gutter) 40px;border-bottom:1px solid rgba(212,178,122,.08)}
.gal-toolbar-inner{
  max-width:var(--max);margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;
}
.gal-count{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(246,243,238,.5);font-weight:500}
.gal-count em{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:20px;margin-right:6px;font-weight:400}
.gal-filtros{display:flex;gap:6px;flex-wrap:wrap}
.gal-filtro{
  font-size:12px;letter-spacing:.06em;font-weight:500;text-transform:uppercase;
  padding:10px 18px;border-radius:100px;
  border:1px solid rgba(212,178,122,.2);background:transparent;
  color:rgba(246,243,238,.6);transition:all .3s var(--ease-out);
}
.gal-filtro:hover{color:var(--bone);border-color:rgba(212,178,122,.5)}
.gal-filtro.ativo{background:var(--gold);color:var(--ink);border-color:var(--gold);font-weight:600}

.gal-grid-wrap{background:var(--ink);padding:60px var(--gutter) clamp(80px, 12vh, 140px)}
.gal-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(3, 1fr);gap:clamp(20px, 2.5vw, 36px)}
@media (max-width:1024px){.gal-grid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:600px){.gal-grid{grid-template-columns:1fr}}

.proj-card{display:block;color:inherit;position:relative}
.proj-card-img{position:relative;overflow:hidden;border-radius:8px;aspect-ratio:4/3;background:var(--ink-soft)}
.proj-card-img > div{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform 1.2s var(--ease-out), filter .8s;filter:saturate(.92) contrast(1.05);
}
.proj-card:hover .proj-card-img > div{transform:scale(1.06);filter:saturate(1) contrast(1.05)}
.proj-card-img::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, rgba(10,10,10,.7) 0%, transparent 50%);
  opacity:.7;transition:opacity .4s;
}
.proj-card:hover .proj-card-img::after{opacity:.4}
.proj-card-tag{
  position:absolute;top:18px;left:18px;z-index:2;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  padding:7px 14px;background:rgba(10,10,10,.7);backdrop-filter:blur(8px);
  border:1px solid rgba(212,178,122,.3);border-radius:100px;
  color:var(--gold);font-weight:500;
}
.proj-card-hint{
  position:absolute;bottom:18px;right:18px;z-index:2;
  width:44px;height:44px;border-radius:50%;
  background:var(--gold);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(8px) scale(.85);transition:all .4s var(--ease-out);
}
.proj-card:hover .proj-card-hint{opacity:1;transform:translateY(0) scale(1)}
.proj-card-hint svg{width:16px;height:16px}
.proj-card-body{padding:22px 4px 0}
.proj-card-title{
  font-family:var(--serif);font-size:24px;font-weight:400;
  color:var(--bone);letter-spacing:-.01em;line-height:1.2;transition:color .3s;
}
.proj-card:hover .proj-card-title{color:var(--gold)}
.proj-card-meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px;gap:16px}
.proj-card-onde{font-size:13px;color:rgba(246,243,238,.5);font-weight:300}
.proj-card-ano{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--gold);font-weight:400}
.proj-card-desc{
  margin-top:14px;font-size:14px;line-height:1.55;
  color:rgba(246,243,238,.6);font-weight:300;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

.gal-vazio{
  max-width:600px;margin:0 auto;text-align:center;padding:60px 20px;
  color:rgba(246,243,238,.6);font-size:16px;
}
.gal-vazio p{margin-bottom:28px}

.gal-paginacao{
  max-width:var(--max);margin:clamp(50px,7vh,80px) auto 0;
  display:flex;justify-content:center;gap:8px;flex-wrap:wrap;
}
.gal-paginacao .page-numbers{
  min-width:44px;height:44px;padding:0 14px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(212,178,122,.2);border-radius:100px;
  font-size:13px;color:rgba(246,243,238,.65);transition:all .3s var(--ease-out);
}
.gal-paginacao .page-numbers:hover{border-color:var(--gold);color:var(--bone)}
.gal-paginacao .page-numbers.current{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:600}
.gal-paginacao .dots{border-color:transparent}

.gal-cta{background:var(--bone);color:var(--ink);padding:clamp(80px,12vh,140px) var(--gutter);text-align:center;position:relative;overflow:hidden}
.gal-cta::before{
  content:'';position:absolute;top:-100px;left:50%;transform:translateX(-50%);
  width:500px;height:500px;pointer-events:none;
  background:radial-gradient(circle, rgba(212,178,122,.15), transparent 60%);
}
.gal-cta-inner{max-width:900px;margin:0 auto;position:relative}
.gal-cta h2{font-family:var(--serif);font-weight:300;font-size:clamp(36px,5vw,68px);line-height:1.05;letter-spacing:-.02em;margin-top:20px}
.gal-cta h2 em{font-style:italic;color:var(--gold-deep)}
.gal-cta p{margin:24px auto 0;font-size:17px;line-height:1.6;color:var(--muted-dark);max-width:560px}
.gal-cta-botoes{margin-top:40px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ============ 8. PÁGINA DO PROJETO ============ */
.proj-breadcrumb{background:var(--ink);padding:120px var(--gutter) 0}
body.admin-bar .proj-breadcrumb{padding-top:152px}
.proj-breadcrumb-inner{
  max-width:var(--max);margin:0 auto;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(246,243,238,.5);
}
.proj-breadcrumb a{color:rgba(246,243,238,.7);transition:color .3s}
.proj-breadcrumb a:hover{color:var(--gold)}
.proj-breadcrumb .sep{opacity:.4}
.proj-breadcrumb .atual{color:var(--gold)}

/* O título vem DEPOIS das fotos, como legenda delas. Respiro nos dois lados:
   acima separa do mosaico, abaixo separa do vídeo. */
.proj-hero{background:var(--ink);padding:clamp(44px,6vh,80px) var(--gutter) clamp(48px,7vh,90px)}
.proj-hero-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr;gap:36px}
.proj-meta{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  font-size:11px;letter-spacing:.25em;text-transform:uppercase;
  color:rgba(246,243,238,.55);font-weight:500;
}
.proj-meta .pill{padding:6px 16px;border:1px solid rgba(212,178,122,.25);border-radius:100px;color:var(--gold)}
.proj-meta .dot{display:inline-flex;align-items:center;gap:14px}
.proj-meta .dot::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:.6}
/* ⚠️ MENOR QUE O TÍTULO DA GALERIA, DE PROPÓSITO. Desde a v1.9.0 ele vem
   DEPOIS do mosaico, e ali não é mais a abertura da página: é a legenda do
   que a pessoa acabou de ver. Tamanho de hero num texto que legenda uma foto
   compete com a foto.

   O tamanho foi escolhido medindo: a 1440px cabem cerca de 44 caracteres numa
   linha só. "Quarto com 2 Camas de Solteiro" tem 30 e sobra espaço.

   ⚠️ O `max-width:1100px` SAIU. Era ele que quebrava título longo antes mesmo
   de a fonte apertar — a linha terminava em 1100px com 340px de sobra ao lado.

   `text-wrap:balance` cuida do resto: no título que ainda assim precisar de
   duas linhas, ele reparte o texto por igual em vez de deixar uma palavra
   órfã embaixo. Navegador que não conhece simplesmente ignora. */
.proj-title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(34px,4.4vw,72px);line-height:1.02;letter-spacing:-.02em;
  color:var(--bone);text-wrap:balance;
}
.proj-lead{
  max-width:680px;font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(20px,1.8vw,26px);line-height:1.45;color:rgba(246,243,238,.78);
}

/* --- vídeo --- */
.proj-video-wrap{background:var(--ink);padding:0 var(--gutter) clamp(60px,10vh,120px)}
.proj-video{
  max-width:var(--max);margin:0 auto;position:relative;
  border-radius:14px;overflow:hidden;background:#000;aspect-ratio:16/9;
  border:1px solid rgba(212,178,122,.12);
}
.proj-video video,.proj-video iframe{position:absolute;inset:0;width:100%;height:100%;display:block}
.proj-video video{object-fit:cover}
.proj-video iframe{border:0}
.proj-video-overlay{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  display:flex;flex-direction:column;justify-content:space-between;padding:24px;
}
.proj-video-badge{
  align-self:flex-start;display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px;background:rgba(10,10,10,.6);backdrop-filter:blur(10px);
  border:1px solid rgba(212,178,122,.3);border-radius:100px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:500;
}
.ponto-vivo{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:pisca 1.6s ease-in-out infinite}
@keyframes pisca{0%,100%{opacity:1}50%{opacity:.3}}
.proj-video-controles{align-self:flex-end;display:flex;gap:10px;pointer-events:auto}
.proj-video-btn{
  width:48px;height:48px;border-radius:50%;
  background:rgba(10,10,10,.7);backdrop-filter:blur(10px);
  border:1px solid rgba(212,178,122,.3);color:var(--bone);
  display:flex;align-items:center;justify-content:center;
  transition:all .3s var(--ease-out);
}
.proj-video-btn:hover{background:var(--gold);color:var(--ink);border-color:var(--gold);transform:scale(1.06)}
.proj-video-btn svg{width:20px;height:20px}
/* Os dois ícones do botão de som. Quem troca um pelo outro é o
   atributo `hidden` no projeto.js — mas <span> ignora `hidden` sem
   uma regra que o obedeça, e sem isto os dois apareceriam juntos. */
.icone-mudo,.icone-som{display:flex}
.icone-mudo[hidden],.icone-som[hidden]{display:none}
.proj-video-dica{
  position:absolute;bottom:24px;left:24px;z-index:2;pointer-events:none;
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 18px;background:rgba(10,10,10,.7);backdrop-filter:blur(10px);
  border:1px solid rgba(212,178,122,.3);border-radius:100px;
  font-size:12px;letter-spacing:.06em;color:var(--bone);font-weight:400;
  opacity:0;
  animation:dicaEntra 1s var(--ease-out) 1.5s forwards, dicaSai 1s var(--ease-out) 6s forwards;
}
.proj-video-dica svg{width:14px;height:14px;color:var(--gold)}
.proj-video-dica.escondida{display:none}
@keyframes dicaEntra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes dicaSai{from{opacity:1}to{opacity:0;transform:translateY(10px)}}
@media (max-width:600px){
  .proj-video-dica{display:none}
  .proj-video-overlay{padding:14px}
}

/* --- texto e ficha --- */
.proj-content{background:var(--bone);color:var(--ink);padding:clamp(80px,12vh,160px) var(--gutter)}
.proj-content-inner{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1.6fr 1fr;
  gap:clamp(40px,7vw,100px);align-items:start;
}
.proj-texto h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(28px,3.5vw,46px);line-height:1.1;letter-spacing:-.02em;margin-bottom:36px;
}
.proj-texto h2 em{font-style:italic;color:var(--gold-deep)}
.proj-texto p{font-size:17px;line-height:1.75;color:var(--muted-dark);font-weight:300;margin-bottom:24px}
.proj-texto p:first-of-type{font-family:var(--serif);font-size:22px;line-height:1.5;color:var(--ink);font-weight:400;font-style:italic}
.proj-texto p:first-of-type::first-letter{
  font-size:64px;font-weight:400;float:left;line-height:.85;
  margin:6px 12px 0 0;color:var(--gold-deep);font-style:normal;font-family:var(--serif);
}
.proj-texto h3{font-family:var(--serif);font-size:28px;font-weight:400;margin:36px 0 16px}
.proj-texto ul,.proj-texto ol{margin:0 0 24px 22px;color:var(--muted-dark);font-size:17px;line-height:1.75}
.proj-texto li{margin-bottom:8px}
.proj-texto strong{color:var(--ink);font-weight:600}

.proj-ficha{
  position:sticky;top:100px;padding:36px 32px;
  background:var(--paper);border:1px solid rgba(10,10,10,.08);
  border-radius:14px;box-shadow:0 20px 40px rgba(10,10,10,.04);
}
.proj-ficha-titulo{
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:600;
  padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid rgba(212,178,122,.2);
}
.proj-ficha-linha{padding:14px 0;border-bottom:1px solid rgba(10,10,10,.06)}
.proj-ficha-linha:last-of-type{border-bottom:0}
.proj-ficha-linha .k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dark);font-weight:600;margin-bottom:6px}
.proj-ficha-linha .v{font-family:var(--serif);font-size:18px;line-height:1.3;color:var(--ink);font-weight:400}
.proj-ficha-btn{margin-top:28px;width:100%;justify-content:center;font-size:12px;padding:14px 20px}
@media (max-width:880px){
  .proj-content-inner{grid-template-columns:1fr;gap:40px}
  .proj-ficha{position:static}
}

/* --- galeria do projeto --- */
/* Primeiro bloco depois das migalhas. Sem respiro embaixo — quem separa do
   título é o padding de cima do `.proj-hero`. */
.proj-galeria{background:var(--ink);padding:clamp(28px,3.5vh,44px) var(--gutter) 0}
.proj-galeria-header{max-width:var(--max);margin:0 auto clamp(40px,6vh,70px);text-align:center}
.proj-galeria-header h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(32px,4.5vw,60px);line-height:1.05;letter-spacing:-.02em;margin-top:20px;
}
.proj-galeria-header h2 em{font-style:italic;color:var(--gold)}
/* ---- a seção do projeto em 3D ----
   Fundo CLARO de propósito: além de manter a alternância do site, separa
   visualmente render de fotografia. Ninguém deve confundir o que foi
   desenhado com o que foi entregue — e a Isenção de Responsabilidade diz
   isso por escrito. */
.proj-3d{background:var(--bone);color:var(--ink);padding:clamp(70px,11vh,130px) var(--gutter)}
.proj-3d-header{max-width:760px;margin:0 auto clamp(40px,6vh,64px);text-align:center}
.proj-3d-header h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(30px,4vw,54px);line-height:1.05;letter-spacing:-.02em;margin-top:20px;
}
.proj-3d-header h2 em{font-style:italic;color:var(--gold-deep)}
.proj-3d-header p{margin-top:20px;font-size:15px;line-height:1.7;color:var(--muted-dark)}

/* ---- O MOSAICO — a mesma composição nas duas galerias ----

   Quatro imagens: uma grande ocupando a metade esquerda, e a metade
   direita repartida em duas em cima e uma maior embaixo.

   ⚠️ `data-qtd` NÃO É A CONTAGEM DE FOTOS: é qual das quatro composições
   usar, limitado a 4 pelo PHP. Com sete fotos ele vale 4, as três
   excedentes ficam escondidas aqui embaixo e continuam existindo no HTML
   para o carrossel navegar por elas. */
/* ---- a foto dentro do mosaico ----
   ⚠️ ESTAS SÃO AS REGRAS BASE, e elas fazem quatro coisas das quais tudo o
   resto depende:

     position:relative  é o que ancora o "+N" NA FOTO. Sem isso ele se
                        posiciona contra o mosaico inteiro e aparece
                        flutuando no meio do bloco.
     overflow:hidden    recorta a imagem na célula
     object-fit:cover   faz a foto preencher a célula sem distorcer
     background         evita clarão enquanto a imagem não carregou

   ⚠️ ELAS JÁ FORAM APAGADAS UMA VEZ, na v1.7.0, ao reescrever o bloco da
   galeria — e o site foi ao ar com as fotos fora de posição. O validador
   `classes` não pegou porque ele só confere se a classe tem ALGUMA regra, e
   `.proj-mosaico .gal-item` existia. Foi dali que nasceu o aviso "classe sem
   regra própria" no validar_tudo.py. */
.gal-item{
  position:relative;overflow:hidden;border-radius:6px;
  background:#1a1a1a;padding:0;display:block;width:100%;
  cursor:pointer;border:0;
}
.gal-item img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1s var(--ease-out), filter .6s;
  filter:saturate(.9) contrast(1.03);
}
.gal-item:hover img{transform:scale(1.04);filter:saturate(1) contrast(1.03)}
.gal-item::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg, transparent 60%, rgba(212,178,122,.1));
  opacity:0;transition:opacity .4s;
}
.gal-item:hover::after{opacity:1}

.proj-mosaico{
  max-width:var(--max);margin:0 auto;
  display:grid;
  /* Vão apertado de propósito: no mosaico as fotos precisam ler como uma
     peça só, não como cinco cartões soltos. */
  gap:clamp(6px,0.7vw,12px);
}
.proj-mosaico .gal-item{aspect-ratio:auto;height:100%;border-radius:6px}

/* uma foto — ocupa o bloco inteiro */
.proj-mosaico[data-qtd="1"]{grid-template-columns:1fr;aspect-ratio:16/9}

/* duas — lado a lado */
.proj-mosaico[data-qtd="2"]{grid-template-columns:1fr 1fr;aspect-ratio:16/9}

/* três — a grande à esquerda, duas empilhadas à direita */
.proj-mosaico[data-qtd="3"]{grid-template-columns:3fr 2fr;grid-template-rows:1fr 1fr;aspect-ratio:16/9}
.proj-mosaico[data-qtd="3"] .gal-item:nth-child(1){grid-column:1;grid-row:1 / span 2}

/* quatro — a grande, duas em cima e uma larga embaixo */
.proj-mosaico[data-qtd="4"]{grid-template-columns:3fr 1fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:16/9}
.proj-mosaico[data-qtd="4"] .gal-item:nth-child(1){grid-column:1;grid-row:1 / span 2}
.proj-mosaico[data-qtd="4"] .gal-item:nth-child(2){grid-column:2;grid-row:1}
.proj-mosaico[data-qtd="4"] .gal-item:nth-child(3){grid-column:3;grid-row:1}
.proj-mosaico[data-qtd="4"] .gal-item:nth-child(4){grid-column:2 / span 2;grid-row:2}

/* CINCO OU MAIS — a composição de referência.
   Esquerda com 3fr de 5 (60%), direita repartida num quadro de 2×2. */
.proj-mosaico[data-qtd="5"]{grid-template-columns:3fr 1fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:16/9}
.proj-mosaico[data-qtd="5"] .gal-item:nth-child(1){grid-column:1;grid-row:1 / span 2}
.proj-mosaico[data-qtd="5"] .gal-item:nth-child(2){grid-column:2;grid-row:1}
.proj-mosaico[data-qtd="5"] .gal-item:nth-child(3){grid-column:3;grid-row:1}
.proj-mosaico[data-qtd="5"] .gal-item:nth-child(4){grid-column:2;grid-row:2}
.proj-mosaico[data-qtd="5"] .gal-item:nth-child(5){grid-column:3;grid-row:2}
/* A partir da sexta, some da composição e vive só para o carrossel. */
.proj-mosaico[data-qtd="5"] .gal-item:nth-child(n+6){display:none}

/* o "+N" na última foto visível */
.gal-mais{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:rgba(10,10,10,.6);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  color:var(--bone);transition:background .4s var(--ease-out);
}
.gal-item:hover .gal-mais{background:rgba(10,10,10,.46)}
.gal-mais em{
  font-family:var(--serif);font-style:normal;font-weight:300;
  font-size:clamp(26px,2.4vw,38px);line-height:1;color:var(--gold);
}
.gal-mais span{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(246,243,238,.75);
}

/* No 3D o fundo é claro: a moldura da foto acompanha. */
.proj-3d .proj-mosaico .gal-item{
  background:#e5e0d8;
  border:1px solid rgba(10,10,10,.08);
}
.proj-3d .proj-mosaico .gal-item img,
.proj-3d .proj-mosaico .gal-item:hover img{filter:none}
.proj-3d .proj-mosaico .gal-item::after{
  background:linear-gradient(135deg, transparent 60%, rgba(184,148,95,.12));
}

/* No celular a composição não cabe: vira empilhamento de duas colunas.
   ⚠️ TODO SELETOR AQUI CARREGA `[data-qtd]` DE PROPÓSITO. As regras de
   composição acima têm quatro níveis de especificidade; um
   `.proj-mosaico .gal-item` aqui dentro tem dois, PERDE mesmo estando numa
   media query, e a composição de desktop continuava valendo no celular.
   Medido a 791px antes da correção. Media query não vence especificidade. */
@media (max-width:880px){
  .proj-mosaico[data-qtd]{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
    aspect-ratio:auto;
    gap:8px;
  }
  .proj-mosaico[data-qtd] .gal-item:nth-child(n){
    grid-column:auto;grid-row:auto;aspect-ratio:1/1;height:auto;
  }
  .proj-mosaico[data-qtd] .gal-item:nth-child(1){grid-column:span 2;aspect-ratio:16/10}
  /* Com duas fotos, a primeira em largura cheia deixaria a segunda sozinha
     ocupando metade da linha. Melhor as duas lado a lado. */
  .proj-mosaico[data-qtd="2"] .gal-item:nth-child(1){grid-column:auto;aspect-ratio:1/1}
  .proj-mosaico[data-qtd="4"] .gal-item:nth-child(4){grid-column:span 2;aspect-ratio:16/10}
  .proj-mosaico[data-qtd="1"] .gal-item:nth-child(1){aspect-ratio:16/9}
}

/* --- foto em tela cheia --- */
.lightbox{
  position:fixed;inset:0;z-index:1000;
  background:rgba(10,10,10,.95);backdrop-filter:blur(20px);
  display:flex;align-items:center;justify-content:center;
  padding:60px var(--gutter);
  animation:aparece .3s ease;
}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.lightbox-fechar{
  position:absolute;top:24px;right:24px;
  width:48px;height:48px;border-radius:50%;
  background:rgba(246,243,238,.1);border:1px solid rgba(212,178,122,.2);
  color:var(--bone);display:flex;align-items:center;justify-content:center;transition:all .3s;
}
.lightbox-fechar:hover{background:var(--gold);color:var(--ink);border-color:var(--gold);transform:rotate(90deg)}
.lightbox-fechar svg{width:20px;height:20px}
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:54px;height:54px;border-radius:50%;
  background:rgba(246,243,238,.1);border:1px solid rgba(212,178,122,.2);
  color:var(--bone);display:flex;align-items:center;justify-content:center;transition:all .3s;
}
.lightbox-nav:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.lightbox-nav.prev{left:24px}
.lightbox-nav.next{right:24px}
.lightbox-nav svg{width:22px;height:22px}
.lightbox-conta{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  font-size:12px;letter-spacing:.2em;color:rgba(246,243,238,.5);
  font-family:var(--serif);font-style:italic;
}
.lightbox-conta em{color:var(--gold);font-style:normal;font-weight:400}
@media (max-width:600px){
  .lightbox{padding:70px 12px}
  .lightbox-nav.prev{left:8px}
  .lightbox-nav.next{right:8px}
}

/* --- outros projetos --- */
.proj-relacionados{background:var(--bone);color:var(--ink);padding:clamp(80px,12vh,140px) var(--gutter)}
.proj-rel-header{
  max-width:var(--max);margin:0 auto clamp(40px,6vh,70px);
  display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;
}
.proj-rel-header h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(32px,4vw,56px);line-height:1.05;letter-spacing:-.02em;margin-top:20px;
}
.proj-rel-header h2 em{font-style:italic;color:var(--gold-deep)}
.proj-rel-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.5vw,36px)}
@media (max-width:880px){.proj-rel-grid{grid-template-columns:1fr}}
.rel-card{display:block;color:inherit}
.rel-card-img{position:relative;overflow:hidden;border-radius:8px;aspect-ratio:4/3;background:#e5e0d8}
.rel-card-img > div{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.2s var(--ease-out)}
.rel-card:hover .rel-card-img > div{transform:scale(1.05)}
.rel-card-img::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, rgba(10,10,10,.4), transparent 50%);
}
.rel-card-tag{
  position:absolute;top:14px;left:14px;z-index:2;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  padding:6px 12px;background:rgba(255,255,255,.9);border-radius:100px;color:var(--ink);font-weight:600;
}
.rel-card-body{padding:18px 4px 0}
.rel-card-title{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--ink);letter-spacing:-.01em;transition:color .3s}
.rel-card:hover .rel-card-title{color:var(--gold-deep)}
.rel-card-meta{margin-top:6px;font-size:13px;color:var(--muted-dark)}
.rel-card-meta em{color:var(--gold-deep);font-family:var(--serif);font-style:italic;margin-left:8px}

/* --- chamada da página do projeto --- */
.proj-cta{background:var(--ink);color:var(--bone);padding:clamp(80px,12vh,140px) var(--gutter);text-align:center;position:relative;overflow:hidden}
.proj-cta::before{
  content:'';position:absolute;top:-100px;left:50%;transform:translateX(-50%);
  width:500px;height:500px;pointer-events:none;
  background:radial-gradient(circle, rgba(212,178,122,.1), transparent 60%);
}
.proj-cta-inner{max-width:900px;margin:0 auto;position:relative}
.proj-cta h2{font-family:var(--serif);font-weight:300;font-size:clamp(36px,5vw,68px);line-height:1.05;letter-spacing:-.02em;margin-top:20px}
.proj-cta h2 em{font-style:italic;color:var(--gold)}
.proj-cta p{margin:24px auto 0;font-size:17px;line-height:1.6;color:rgba(246,243,238,.65);max-width:560px}
.proj-cta-botoes{margin-top:40px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ============ 9. PÁGINAS COMUNS, BUSCA E 404 ============ */
.pagina{background:var(--bone);color:var(--ink);padding:160px var(--gutter) clamp(80px,12vh,140px);min-height:70vh}
.pagina-header{max-width:760px;margin:0 auto clamp(36px,5vh,60px)}
.pagina-titulo{font-family:var(--serif);font-weight:300;font-size:clamp(36px,5vw,68px);line-height:1.05;letter-spacing:-.02em}
.pagina-conteudo{max-width:760px;margin:0 auto}
.pagina-acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:48px}

/* Coluna de leitura — política de privacidade, termos, textos longos. */
.prosa{font-size:17px;line-height:1.8;color:var(--muted-dark);font-weight:300}
.prosa p{margin-bottom:22px}
.prosa h2{font-family:var(--serif);font-size:clamp(26px,3vw,38px);font-weight:400;color:var(--ink);margin:48px 0 18px;line-height:1.2}
.prosa h3{font-family:var(--serif);font-size:24px;font-weight:400;color:var(--ink);margin:36px 0 14px}
.prosa ul,.prosa ol{margin:0 0 22px 22px}
.prosa li{margin-bottom:10px}
.prosa a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px}
.prosa a:hover{color:var(--ink)}
.prosa strong{color:var(--ink);font-weight:600}
.prosa img{border-radius:8px;margin:28px 0}
.prosa table{width:100%;border-collapse:collapse;margin-bottom:24px;font-size:15px}
.prosa th,.prosa td{padding:12px 14px;border-bottom:1px solid rgba(10,10,10,.1);text-align:left}
.prosa th{color:var(--ink);font-weight:600}
.lista-simples{list-style:none;margin:0}
.lista-simples li{padding:14px 0;border-bottom:1px solid rgba(10,10,10,.08)}
.lista-simples a{font-family:var(--serif);font-size:22px;color:var(--ink)}
.lista-simples a:hover{color:var(--gold-deep)}

.erro-404{
  background:var(--ink);min-height:90vh;
  display:flex;align-items:center;justify-content:center;
  padding:160px var(--gutter) 100px;text-align:center;position:relative;overflow:hidden;
}
.erro-404::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 50%, rgba(212,178,122,.07), transparent 70%);
}
.erro-404-inner{max-width:760px;margin:0 auto;position:relative}
.erro-404 h1{font-family:var(--serif);font-weight:300;font-size:clamp(38px,6vw,80px);line-height:1.02;letter-spacing:-.02em;margin-top:24px}
.erro-404 h1 em{font-style:italic;color:var(--gold)}
.erro-404 p{margin:28px auto 0;font-size:17px;line-height:1.6;color:rgba(246,243,238,.6);max-width:520px}
.erro-404-botoes{margin-top:44px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---- documentos legais (template-legal.php) ---- */
.doc-hero{
  background:var(--ink);
  padding:170px var(--gutter) clamp(50px,7vh,80px);
  position:relative;overflow:hidden;
}
.doc-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 30% 100%, rgba(212,178,122,.07), transparent 70%);
}
.doc-hero-inner{max-width:1100px;margin:0 auto;position:relative}
.doc-titulo{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(34px,5vw,64px);line-height:1.05;letter-spacing:-.02em;
  color:var(--bone);margin-top:24px;
}
.doc-data{
  margin-top:24px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(246,243,238,.45);
}
.doc-data time{color:var(--gold)}

.doc-corpo{background:var(--bone);color:var(--ink);padding:clamp(60px,9vh,110px) var(--gutter)}
.doc-inner{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:260px 1fr;gap:clamp(40px,6vw,80px);align-items:start;
}
.doc-inner-sem-indice{grid-template-columns:1fr;max-width:760px}

.doc-indice{position:sticky;top:110px}
.doc-indice-titulo{
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:600;
  padding-bottom:16px;margin-bottom:8px;border-bottom:1px solid rgba(212,178,122,.25);
}
.doc-indice a{
  display:block;padding:9px 0;font-size:14px;line-height:1.4;
  color:var(--muted-dark);border-bottom:1px solid rgba(10,10,10,.05);
  transition:color .25s,padding-left .25s;
}
.doc-indice a:last-child{border-bottom:0}
.doc-indice a:hover{color:var(--gold-deep);padding-left:6px}

.doc-texto{max-width:none}
/* ⚠️ `scroll-margin-top` NÃO É DETALHE: sem ele, clicar no índice leva o
   título para debaixo do menu fixo, e a pessoa acha que o link está quebrado. */
.doc-texto h2{scroll-margin-top:100px}
.doc-texto h2:first-child{margin-top:0}

.doc-rodape{background:var(--ink);padding:clamp(50px,8vh,90px) var(--gutter);border-top:1px solid rgba(212,178,122,.1)}
.doc-rodape-inner{
  max-width:1100px;margin:0 auto;
  display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;
}
.doc-rodape-contato p{margin-top:18px;font-size:16px;line-height:1.7;color:rgba(246,243,238,.6);max-width:420px}
.doc-rodape-contato a{color:var(--gold);border-bottom:1px solid rgba(212,178,122,.3)}
.doc-rodape-contato a:hover{border-bottom-color:var(--gold)}
.doc-outros-titulo{
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(246,243,238,.4);font-weight:600;margin-bottom:16px;
}
.doc-outros .nav-link{
  display:block;padding:7px 0;font-size:14px;
  color:rgba(246,243,238,.6);opacity:1;
}
.doc-outros .nav-link:hover{color:var(--gold)}
.doc-outros .nav-link::after{display:none}

@media (max-width:880px){
  .doc-inner{grid-template-columns:1fr}
  /* O índice vira um bloco no topo, não uma coluna grudada — em tela estreita
     `sticky` roubaria metade da altura útil da leitura. */
  .doc-indice{position:static;padding-bottom:28px;border-bottom:1px solid rgba(10,10,10,.1)}
}

/* ============ 10. RODAPÉ ============ */
.footer{
  background:var(--ink);color:rgba(246,243,238,.6);
  padding:80px var(--gutter) 32px;border-top:1px solid rgba(212,178,122,.1);
}
.footer-inner{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:60px;
}
.footer-brand .marca-simbolo{width:48px;height:48px;margin-bottom:24px}
.marca-footer{height:44px;width:auto;margin-bottom:24px}
.footer-brand p{font-size:14px;line-height:1.6;max-width:300px}
.footer-col h4{
  font-size:11px;letter-spacing:.25em;text-transform:uppercase;font-weight:600;
  color:var(--bone);margin-bottom:24px;
}
.footer-col a,.footer-col span{
  display:block;font-size:14px;margin-bottom:12px;
  color:rgba(246,243,238,.55);transition:color .3s;
}
.footer-col a:hover{color:var(--gold)}
.footer-email{word-break:break-word}
.footer-social{display:flex;gap:14px;margin-top:24px}
.footer-social a{
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(212,178,122,.2);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:0;color:var(--bone);transition:all .3s;
}
.footer-social a:hover{background:var(--gold);border-color:var(--gold);color:var(--ink);transform:translateY(-2px)}
.footer-social svg{width:16px;height:16px}
.footer-bottom{
  max-width:var(--max);margin:60px auto 0;
  padding-top:28px;border-top:1px solid rgba(246,243,238,.06);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;
  font-size:12px;color:rgba(246,243,238,.4);line-height:1.7;
}
.footer-bottom a{color:var(--gold)}
/* Linha das políticas. `width:100%` num container que já é flex com quebra
   força a linha própria, acima do aviso de direitos reservados. */
.footer-legal{
  width:100%;display:flex;gap:24px;flex-wrap:wrap;
  padding-bottom:20px;margin-bottom:8px;
  border-bottom:1px solid rgba(246,243,238,.06);
}
.footer-legal .nav-link{
  font-size:12px;color:rgba(246,243,238,.5);opacity:1;padding:0;
}
.footer-legal .nav-link:hover{color:var(--gold)}
.footer-legal .nav-link::after{display:none}
.so-celular{display:none}
@media (max-width:880px){
  .footer-inner{grid-template-columns:1fr 1fr;gap:40px}
  .so-celular{display:inline}
}
@media (max-width:520px){.footer-inner{grid-template-columns:1fr}}

/* ============ 11. MOVIMENTO REDUZIDO ============ */
/* Quem marcou "reduzir movimento" no sistema recebe o site inteiro,
   sem nenhuma animação. ⚠️ As classes `.reveal` PRECISAM aparecer
   visíveis aqui — sem isto, desligar a animação apagaria metade da
   página para essas pessoas. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal,.reveal-stagger > *{opacity:1 !important;transform:none !important}
  .hero-eyebrow,.hero-title,.hero-sub,.hero-ctas,.hero-scroll,
  .gal-eyebrow,.gal-title,.gal-sub{opacity:1 !important;animation:none !important}
  .proj-video-dica{opacity:1 !important;animation:none !important}
}