/* ==========================================================================
   Construtora Calaça — réplica estática
   Tokens e layout reconstruídos a partir do site original
   ========================================================================== */

:root {
  --gold: #ac997c;
  --gold-dark: #96836a;
  /* Usados pela galeria e por outros blocos; estavam referenciados sem
     definição, o que deixava `var(--bronze)`inválido (fundo transparente). */
  --bronze: #8c7657;
  --bronze-deep: #6f5b3f;
  --ink: #000;
  --gray: #7f7f7f;
  --line: #e6e6e6;
  --max: 1170px;
  --font-head: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 20px;
  color: var(--gray);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; border: 0; }

a { color: #000; text-decoration: underline; transition: color 200ms ease-in-out; }
a:hover { color: var(--gold); }

h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-head); color: #000; }

h1 { font-size: 68px; line-height: 80px; font-weight: 700; }
h2 { font-size: 46px; line-height: 56px; font-weight: 600; }
h4 { font-size: 24px; line-height: 32px; font-weight: 600; }
h5 { font-size: 20px; line-height: 30px; font-weight: 600; }
h6 { color: var(--gold); font-size: 20px; line-height: 20px; font-weight: 600; text-transform: uppercase; }

p { color: var(--gray); line-height: 26px; margin: 0 0 10px; }

/* ------------------------------ header ------------------------------ */
.navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 999;
  background: #fff;
  box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, .19);
  font-weight: 600;
}

.nav-block {
  display: flex;
  height: 80px;
  max-width: var(--max);
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
}

.brand { display: flex; width: 20%; align-items: center; text-decoration: none; }
.brand img { width: 100%; max-width: 210px; }

.nav-menu { display: flex; margin-left: auto; }
.menu-block { display: flex; margin-left: 25px; }

.nav-link {
  padding: 10px;
  color: #424242;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  transition: color 200ms ease-in-out;
}
.nav-link:hover, .nav-link.is-current { color: var(--gold); }
.nav-link.is-current { color: #000; }

.left-line, .right-line {
  width: 1px;
  height: 12px;
  background: var(--gold);
  opacity: 0;
  transition: opacity 250ms ease-in-out;
}
.menu-block .right-line { margin-top: auto; }
.menu-block:hover .left-line,
.menu-block:hover .right-line { opacity: 1; }

.menu-button {
  display: none;
  border: 0;
  background: transparent;
  padding: 11px 12px;
  cursor: pointer;
}
.menu-button span {
  display: block;
  width: 26px;
  height: 2px;
  margin: 5px 0;
  background: #000;
  transition: transform 250ms ease, opacity 250ms ease;
}
.menu-button.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-button.is-open span:nth-child(2) { opacity: 0; }
.menu-button.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* rail social vertical */
.social-media-vertical {
  position: fixed;
  left: 2%;
  top: 15%;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 5px 5px;
}
.vertical-line {
  width: 1px;
  height: 90px;
  background: rgba(0, 0, 0, .4);
}
.social-media-link { margin-top: 30px; opacity: .4; transition: opacity 200ms ease-in-out; }
.social-media-link:hover { opacity: 1; }
.social-media-link img { width: 46px; }

/* ------------------------------ sections ------------------------------ */
.section { position: relative; display: flex; align-items: center; justify-content: center; }

.block-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: var(--max);
  margin: 0 35px 40px;
}
.block-content.bottom-margin { margin-bottom: 130px; }

.subtitle { color: var(--gold); margin: 0; }

.line-title { display: flex; align-items: center; }

.section-title {
  display: block;
  color: #000;
  font-size: 46px;
  line-height: 56px;
  text-align: center;
  font-weight: 600;
}

/* Título da seção de serviços — duas linhas centralizadas.

   A frase é dividida em duas linhas fixas (`.sh-line`), com a quebra depois
   de "onde". A linha mais longa — "grandes visões se transformam em projetos
   extraordinários." — mede 20,78em nessa fonte (medido no navegador, já com os
   itálicos); em 4,35vw ela ocupa ~90% da largura em 1280px, com folga.

   Espaçamento simétrico: o `padding-top` da seção é igual à margem inferior do
   título, então o bloco fica opticamente no meio entre a seção anterior e o
   vídeo, em vez de colado em um dos lados. */
.section.services {
  flex-direction: column;
  padding: clamp(56px, 5.6vw, 88px) 0 0;
}

.service-heading {
  width: 100%;
  max-width: 100%;
  margin: 0 0 clamp(56px, 5.6vw, 88px);
  padding: 0 20px;
  font-family: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  font-size: clamp(1.7rem, 4.35vw, 3.35rem);
  line-height: 1.16;
  font-weight: 300;
  letter-spacing: -.01em;
  color: #16130f;
  text-align: center;
  white-space: nowrap;
}

/* O `padding-bottom` dá espaço à descendente do "g" itálico, que passa do
   line-box da serifada. Sem isso a letra fica cortada pela máscara. */
.sh-line { display: block; padding-bottom: .08em; }

.service-heading em {
  font-style: italic;
  font-weight: 400;
  color: var(--bronze-deep);
}

/* Efeito metálico apenas onde há suporte a texto recortado —
   sem isso a palavra ficaria invisível. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .service-heading em {
    background-image: linear-gradient(
      100deg,
      #6f5b3f 0%,
      #a2896a 22%,
      #d9c7a6 46%,
      #ac997c 60%,
      #6f5b3f 100%
    );
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: metalSheen 9s ease-in-out infinite;
  }
}

@keyframes metalSheen {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Entrada: cada linha é revelada por máscara, de baixo para cima.
   A folga de -32% em cima e embaixo é intencional: com 1.16 de line-height os
   ascendentes e as descendentes da serifada itálica passam do line-box, e uma
   máscara justa cortaria o "g" de "grandes". */
.service-heading.reveal .sh-line {
  clip-path: inset(-32% -6% 100% -6%);
  transform: translateY(.14em);
  transition:
    clip-path 1000ms cubic-bezier(.16, 1, .3, 1),
    transform 1000ms cubic-bezier(.16, 1, .3, 1);
}
.service-heading.reveal.is-visible .sh-line:nth-child(2) { transition-delay: 120ms; }
.service-heading.reveal.is-visible .sh-line {
  clip-path: inset(-32% -6% -32% -6%);
  transform: none;
}


/* ==========================================================================
   Cabeçalho institucional (página única)
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, .07);
  transition: background-color 300ms ease, box-shadow 300ms ease;
}

.site-header.is-scrolled {
  background: #fff;
  box-shadow: 0 1px 26px rgba(0, 0, 0, .09);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1320px;
  height: 76px;
  margin: 0 auto;
  padding: 0 32px;
}

.site-header .brand {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  width: auto;
  text-decoration: none;
}
.site-header .brand img {
  width: auto;
  max-width: none;
  height: 30px;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
}

.nav-item {
  position: relative;
  padding: 6px 0;
  color: #1d1d1d;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .03em;
  text-decoration: none;
  transition: color 220ms ease;
}
.nav-item::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms ease;
}
.nav-item:hover,
.nav-item:focus-visible { color: #000; }
.nav-item:hover::after,
.nav-item:focus-visible::after { transform: scaleX(1); }

.nav-cta {
  padding: 13px 22px;
  border: 1px solid var(--gold);
  color: #141414;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .11em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}
.nav-cta:hover,
.nav-cta:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

/* ==========================================================================
   Primeira tela — carrossel dos empreendimentos
   ========================================================================== */
:root {
  --bronze: #8c7657;
  --bronze-deep: #6f5b3f;
}

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  overflow: hidden;
  background: #0a0a0a;
}

.hero-slides { position: absolute; inset: 0; }

.hero-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  /* Crossfade longo e com curva suave: a troca é percebida como
     dissolução gradual, nunca como corte seco. */
  transition: opacity 1800ms cubic-bezier(.4, 0, .2, 1);
  will-change: opacity;
}

/* Vídeo de fundo: ocupa a moldura inteira, sem barras. `object-position`
   puxada para a direita mantém o assunto em quadro quando o vídeo é cortado
   na vertical do celular. */
.hero-slide video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

.hero-slide.is-active { opacity: 1; }

.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 6, 6, .82) 0%, rgba(6, 6, 6, .58) 36%, rgba(6, 6, 6, .20) 68%, rgba(6, 6, 6, .06) 100%),
    linear-gradient(180deg, rgba(6, 6, 6, .38) 0%, rgba(6, 6, 6, 0) 32%, rgba(6, 6, 6, .46) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 168px 32px 150px;
}

.hero-title {
  max-width: 20ch;
  margin: 0 0 26px;
  color: #fff;
  font-size: clamp(2.05rem, 4.4vw, 3.95rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.07;
  text-shadow: 0 2px 26px rgba(0, 0, 0, .38);
}

.hero-lead {
  max-width: 46ch;
  margin: 0 0 40px;
  color: rgba(255, 255, 255, .88);
  font-size: clamp(1rem, 1.1vw, 1.14rem);
  line-height: 1.75;
  text-shadow: 0 1px 18px rgba(0, 0, 0, .45);
}

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

/* Botões — pastilha arredondada, bronze acetinado e brilho contido.
   O refinamento vem da proporção, do raio total e do filete superior
   de 1px (efeito de metal polido), sem sombras coloridas. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 19px 34px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .17em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  transition:
    background-color 420ms cubic-bezier(.4, 0, .2, 1),
    color 420ms cubic-bezier(.4, 0, .2, 1),
    border-color 420ms cubic-bezier(.4, 0, .2, 1),
    box-shadow 420ms cubic-bezier(.4, 0, .2, 1),
    transform 420ms cubic-bezier(.4, 0, .2, 1);
}

.btn::after {
  content: "\2192";
  font-size: 13px;
  letter-spacing: 0;
  line-height: 1;
  transition: transform 260ms ease;
}

.btn:hover::after,
.btn:focus-visible::after { transform: translateX(4px); }

/* Principal: bronze acetinado, com filete claro no topo (metal polido). */
.btn-primary {
  background-color: var(--bronze);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(135deg, #a2896a 0%, #8c7657 52%, #75603f 100%);
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 12px 28px -16px rgba(0, 0, 0, .75);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(135deg, #b1977a 0%, #9a8261 52%, #7f6947 100%);
  border-color: rgba(255, 255, 255, .32);
  color: #fff;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    0 18px 36px -18px rgba(0, 0, 0, .8);
}

/* Secundário: vidro fumê com contorno fino, mesmo raio e altura. */
.btn-ghost {
  background: rgba(14, 14, 14, .32);
  border-color: rgba(255, 255, 255, .44);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: rgba(255, 255, 255, .97);
  border-color: rgba(255, 255, 255, .97);
  color: #141414;
  transform: translateY(-1px);
  box-shadow: 0 18px 36px -20px rgba(0, 0, 0, .7);
}

.btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .9);
  outline-offset: 4px;
}

/* ---------------------- controles do carrossel ---------------------- */
.hero-controls {
  position: absolute;
  right: 0;
  bottom: 26px;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
}

.hero-dots { display: flex; align-items: center; gap: 10px; }

.hero-dot {
  width: 26px;
  height: 2px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, .34);
  cursor: pointer;
  transition: background-color 260ms ease, width 260ms ease;
}
.hero-dot:hover { background: rgba(255, 255, 255, .65); }
.hero-dot.is-active { width: 46px; background: #fff; }
.hero-dot:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .9);
  outline-offset: 4px;
}

/* área de toque confortável no mobile sem engordar o traço visual */
@media (hover: none) {
  .hero-dot { height: 14px; background-clip: content-box; padding: 6px 0; box-sizing: content-box; }
}

/* entrada suave dos textos da primeira tela */
.hero-content > * {
  opacity: 0;
  transform: translateY(20px);
  animation: heroIn 900ms cubic-bezier(.22, .61, .36, 1) forwards;
}
.hero-content > *:nth-child(1) { animation-delay: 120ms; }
.hero-content > *:nth-child(2) { animation-delay: 240ms; }
.hero-content > *:nth-child(3) { animation-delay: 380ms; }
.hero-content > *:nth-child(4) { animation-delay: 520ms; }

@keyframes heroIn {
  to { opacity: 1; transform: none; }
}

/* âncoras não ficam escondidas atrás do cabeçalho fixo */
section[id] { scroll-margin-top: 92px; }

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: opacity 200ms linear; }
  .hero-slide.is-active img { animation: none; transform: none; }
  .hero-content > * { animation: none; opacity: 1; transform: none; }
  .btn::after { transition: none; }
  .nav-item::after { transition: none; }
}

/* ------------------------------ serviços ------------------------------ */
.video-block {
  width: 100%;
  margin: 40px 0 0;
  background: #000;
}

/* Moldura do vídeo: mesma largura total ocupada pelo vídeo anterior,
   agora em proporção 16:9 exata para o player não gerar tarjas pretas.
   (Sem limite de altura: um max-height menor que a proporção faria o
   YouTube "pillarboxar" o vídeo, com faixas pretas nas laterais.) */
.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  overflow: hidden;
  background: #000;
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-caption {
  background: #0e0e0e;
  padding: 22px 34px 24px;
  font-family: "Nunito Sans", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .76);
  text-align: center;
}

.video-caption::before {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  margin: 0 auto 16px;
  background: var(--gold);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 30px;
  margin-top: 40px;
  width: 100%;
}

.service-title { margin-bottom: 30px; }
.number { color: #000; font-size: 24px; line-height: 24px; opacity: .2; margin: 0; }

.service-image {
  width: 100%;
  min-height: 300px;
  max-height: 300px;
  object-fit: cover;
  object-position: 65% 50%;
}
.service-image.pos-left { object-position: 0% 50%; }
.service-image.pos-mid { object-position: 15% 50%; }

.service-paragraph { margin-top: 30px; padding-right: 30px; }
.service-info { line-height: 26px; margin-bottom: 30px; }

.button-wrap { display: flex; width: 100%; margin-top: 20px; justify-content: center; }
.button {
  color: var(--gold);
  font-size: 30px;
  line-height: 30px;
  font-weight: 400;
  text-decoration: none;
}
.button:hover { color: var(--gold-dark); }

/* ------------------------------ galeria de obra ------------------------------
   Reproduz o efeito da referência enviada pelo cliente:
   - fundo CLARO com grade técnica discreta;
   - cenário: a MESMA foto do slide ativo, inteira e escurecida, atrás dos painéis;
   - painel central retrato (~5:6) com RECORTE focado no trabalhador daquela foto;
   - vizinhos menores em largura e altura, centrados na vertical e cortados pela
     borda do palco;
   - legenda em BARRA ESCURA SÓLIDA na base do painel (não é degradê);
   - setas retangulares nas laterais.
   Só fotos do acervo da Calaça, enviadas pelo cliente. */
.showcase {
  position: relative;
  /* A galeria É a dobra: ocupa a altura inteira da tela, como na referência.
     Sem moldura clara em volta — a foto pega a tela toda. */
  min-height: 100svh;
  height: 100svh;
  display: block;
  padding: 0;
  background-color: #151413;
  overflow: hidden;
}

/* Custom properties REGISTRADAS como <number>: por serem tipadas, elas
   interpolam. É o que permite animar a geometria do painel e, junto com ela,
   o deslocamento da imagem — mantendo o painel alinhado ao cenário em TODOS os
   quadros da transição, e não só no início e no fim. */
@property --pw { syntax: '<number>'; inherits: true; initial-value: 36; }
@property --ph { syntax: '<number>'; inherits: true; initial-value: 84; }
@property --px { syntax: '<number>'; inherits: true; initial-value: 32; }
@property --py { syntax: '<number>'; inherits: true; initial-value: 8; }

/* Geometria em PORCENTAGEM do palco, guardada no palco (e não nos painéis) para
   que uma media query possa redefinir o conjunto inteiro num só lugar.
   Cinco estados: ativo (a*), anterior (s*), próximo (n*), e os dois distantes
   (f*), que esperam fora do palco para entrarem deslizando. */
.showcase-stage {
  /* ativo: grande, dominando a dobra */
  --apw: 46; --aph: 84; --apx: 27; --apy: 12;
  /* anterior */
  --spw: 26; --sph: 60; --spx: 1.2; --spy: 24;
  /* próximo */
  --npw: 26; --nph: 60; --npx: 72.8; --npy: 24;
  /* distantes: fora do palco, clipados pelo overflow */
  --fpw: 26; --fph: 60; --fpx: -26; --fpy: 24;
  --fnpw: 26; --fnph: 60; --fnpx: 101; --fnpy: 24;
  /* margem das setas */
  --sw-nav: 4.4%;

  /* `container-type: size` habilita cqw/cqh: dentro do palco, 100cqw é
     exatamente a largura dele. É a unidade que DESACOPLA a imagem do tamanho
     do painel — sem isso a imagem saltaria no começo de cada transição. */
  container-type: size;

  position: relative;
  z-index: 3;
  width: 100%;
  /* Altura cheia: o palco é a tela inteira, sem faixas em cima nem embaixo. */
  height: 100svh;
  margin: 0 auto;
  overflow: hidden;
  background: #151413;
}

/* ------------------------------ cenário de fundo ------------------------------
   Atrás de tudo vai a foto inteira, preenchendo o palco (escurecida pelo véu).
   Cada painel mostra a MESMA foto, dimensionada ao PALCO (e não ao painel) e
   deslocada pelo oposto da posição do painel. Isso produz duas coisas ao mesmo
   tempo, que é o efeito pedido:
     1) em repouso, o conteúdo do painel coincide pixel a pixel com o cenário —
        o desenho atravessa a borda sem degrau, as duas imagens se conectam;
     2) durante a troca, a imagem anda JUNTO com o painel (não é uma janela
        parada por onde se espia), então a transição lê como cartão deslizando.
   O painel se distingue do fundo por estar mais claro (o véu cobre só o
   cenário) e pela barra do rótulo. */
.showcase-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #151413;
}

.showcase-bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  /* Curta de propósito: mais curta que a morfose do painel (750 ms). O cenário
     já está no lugar quando o painel chega ao centro, então a conexão entre os
     dois se sustenta também DURANTE a troca, não só no repouso. */
  transition: opacity 320ms cubic-bezier(.4, 0, .2, 1);
}
.showcase-bg.is-active { opacity: 1; }

/* Véu: apenas um leve rebaixamento de luz no cenário. Era 46% — escuro demais,
   o fundo virava um campo preto e cada painel passava a ler como um cartão
   solto em cima dele. Com 14% a foto continua legível como UMA só imagem, e o
   painel se distingue por um brilho muito discreto, não por um degrau. */
.showcase-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 9, .14);
}

.showcase-track { position: absolute; inset: 0; z-index: 3; }

/* Painel: posição e tamanho saem dos quatro números do estado, medidos em cqw/
   cqh (unidades do PALCO). Como os números interpolam, a caixa cresce, encolhe
   e desliza de forma contínua. */
.showcase-slide {
  --pw: var(--apw);
  --ph: var(--aph);
  --px: var(--apx);
  --py: var(--apy);

  position: absolute;
  left: calc(var(--px) * 1cqw);
  top: calc(var(--py) * 1cqh);
  width: calc(var(--pw) * 1cqw);
  height: calc(var(--ph) * 1cqh);
  z-index: 2;
  margin: 0;
  overflow: hidden;
  background: #1a1918;
  transition:
    --pw 750ms cubic-bezier(.4, 0, .2, 1),
    --ph 750ms cubic-bezier(.4, 0, .2, 1),
    --px 750ms cubic-bezier(.4, 0, .2, 1),
    --py 750ms cubic-bezier(.4, 0, .2, 1);
}

/* A imagem tem SEMPRE o tamanho do palco (100cqw × 100cqh) e é deslocada pelo
   oposto da posição do painel. Consequência: o que se vê dentro do painel é
   exatamente o pedaço correspondente do cenário — o desenho atravessa a borda
   sem degrau, as duas imagens se conectam. Como o deslocamento é derivado dos
   mesmos números animados da caixa, a conexão se mantém durante a transição. */
.showcase-slide img {
  position: absolute;
  display: block;
  width: 100cqw;
  height: 100cqh;
  left: calc(var(--px) * -1cqw);
  top: calc(var(--py) * -1cqh);
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* Estados: só trocam os números. O painel ativo ganha uma sombra MUITO suave
   (não um contorno) apenas para dar profundidade — o conteúdo continua igual ao
   do cenário, então não aparece linha nenhuma na borda. */
.showcase-slide.is-active {
  z-index: 4;
  box-shadow: 0 40px 90px -34px rgba(0, 0, 0, .7);
}

.showcase-slide.is-prev {
  --pw: var(--spw); --ph: var(--sph); --px: var(--spx); --py: var(--spy);
  z-index: 2;
}

.showcase-slide.is-next {
  --pw: var(--npw); --ph: var(--nph); --px: var(--npx); --py: var(--npy);
  z-index: 2;
}

.showcase-slide.is-far-prev {
  --pw: var(--fpw); --ph: var(--fph); --px: var(--fpx); --py: var(--fpy);
  z-index: 1;
}

.showcase-slide.is-far-next {
  --pw: var(--fnpw); --ph: var(--fnph); --px: var(--fnpx); --py: var(--fnpy);
  z-index: 1;
}

/* Rótulo solto no canto inferior esquerdo, direto sobre a foto — como na
   referência. Antes havia uma barra escura sólida de ponta a ponta, e era ela
   que fazia o painel parecer um cartão colado no fundo. Só o texto, sem botão,
   agora com um filete preto fino sob a palavra. */
.showcase-caption {
  position: absolute;
  inset: auto auto 0 0;
  display: flex;
  align-items: center;
  padding: clamp(10px, 1.25vw, 20px);
  background: none;
  pointer-events: none;
}

.showcase-kicker {
  margin: 0;
  padding-bottom: .5em;
  font-family: var(--font-body);
  font-size: clamp(9px, .8vw, 12px);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  /* Filete preto na base, do comprimento exato do texto. `box-shadow` (e não
     border) para a linha não somar à altura da caixa e deslocar o alinhamento
     com o canto do painel. */
  box-shadow: 0 1px 0 0 #000;
  /* Sombra curta: garante leitura sobre foto clara sem precisar de tarja. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 0 14px rgba(0, 0, 0, .35);
}

/* Setas retangulares nas laterais, na borda externa da janela vizinha. */
.showcase-nav {
  position: absolute;
  top: 50%;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 52px;
  margin-top: -26px;
  padding: 0;
  border: 0;
  background: var(--bronze);
  color: #fff;
  cursor: pointer;
  transition: background-color 220ms ease;
}
.showcase-nav:hover,
.showcase-nav:focus-visible { background: var(--bronze-deep); }
.showcase-nav svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.showcase-nav--prev { left: var(--sw-nav); }
.showcase-nav--next { right: var(--sw-nav); }

/* O texto "Nosso compromisso / Pedro Calaça" foi removido a pedido do cliente:
   abaixo do carrossel agora não há nada. */

/* ------------------------------ projetos ------------------------------ */
/* Quatro empreendimentos em 2x2. O bloco, a altura da imagem (600px), o
   cartão branco sobreposto e o efeito preto-e-branco → cor no hover são os
   mesmos de antes; só o conteúdo passou de "Imóveis/Obras" para os quatro
   empreendimentos. */
.projects-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 89px 60px;
  margin-top: 60px;
  width: 100%;
}

.project-block { position: relative; display: block; text-decoration: none; }

/* Só a grade de empreendimentos empilha em coluna; as galerias das páginas
   internas (.obras-grid) continuam com o layout que já tinham. */
.projects-grid .project-block {
  display: flex;
  flex-direction: column;
}

/* As quatro imagens ocupam exatamente o mesmo espaço, para os blocos ficarem
   idênticos (o quarto bloco era um campo reservado enquanto o Dom Pedro não
   tinha foto; agora os quatro têm imagem oficial). */
.projects-grid .project-image {
  width: 100%;
  height: 600px;
  flex: 0 0 600px;
}

.project-image {
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter 400ms ease;
}
.project-block:hover .project-image { filter: grayscale(0%); }

/* Os quatro cartões brancos têm os mesmos limites, mesmo com textos de
   tamanhos diferentes: a grade estica os blocos e o cartão fica com
   `height: 100%`, então os rodapés também se alinham. */
.projects-grid .project-info { flex: 1 1 auto; }

.project-info {
  position: relative;
  width: 480px;
  max-width: 92%;
  margin: -90px auto 0;
  padding: 30px;
  background: #fff;
  box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .1);
}
.project-title { font-size: 24px; line-height: 32px; color: #000; margin: 0; }
.project-text { margin-top: 10px; color: var(--gray); font-size: 16px; line-height: 24px; }

/* ------------------------------ sobre ------------------------------ */
/* Faixa cinza-claro que separa a seção do resto da página branca.
   O fundo vai de ponta a ponta (`background` na <section>), enquanto o
   conteúdo continua limitado a `--max` — assim a divisão aparece como uma
   faixa inteira, e não como um cartão solto no meio do branco. */
.section--tinted {
  background: #f4f3f1;
  padding: clamp(56px, 6vw, 96px) 0;
}

/* Duas colunas reais: texto à esquerda, carrossel à direita.

   Historicamente o bloco de texto era `position: absolute` por cima de uma
   foto de 78% de largura; como o texto é mais curto que a imagem, sobrava um
   pedaço da foto aparecendo por baixo do cartão branco. Com grid não existe
   sobreposição: o texto fica na coluna esquerda e o carrossel na direita. */
.about-wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
  gap: clamp(32px, 5vw, 84px);
  align-items: center;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
}

.white-bg {
  width: auto;
  max-width: none;
  padding: 0;
  background: transparent;
}
.title-block { display: flex; flex-direction: column; align-items: flex-start; margin: 0 0 22px; }
.about-paragraph { margin: 0; }

/* ---------------------- carrossel da equipe (Sobre nós) ----------------------
   As três fotos têm exatamente a mesma proporção (819×1024 = 4:5), então a
   moldura usa `aspect-ratio: 4/5` e `object-fit: cover` apenas para garantir
   o mesmo tamanho em qualquer tela — como a proporção da caixa é IGUAL à do
   arquivo, nenhuma imagem é cortada nem deformada.
   A troca é um crossfade (as fotos ficam empilhadas em `position: absolute`),
   que evita o "salto" de layout de um carrossel que desliza. */
.about-gallery {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 430px;
}

.about-slides {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #e7e4df;
  box-shadow: 0 24px 60px -34px rgba(20, 16, 12, .42);
}

.about-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(.4, 0, .2, 1);
  will-change: opacity;
}
.about-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
.about-slide.is-active { opacity: 1; }

/* setas discretas: sóbrias, de vidro, aparecem no hover/foco do bloco */
.about-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  background: rgba(18, 16, 14, .28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color 240ms ease, border-color 240ms ease, opacity 240ms ease;
}
.about-nav svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.about-nav:hover { background: rgba(18, 16, 14, .55); border-color: #fff; }
.about-nav:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.about-nav--prev { left: 14px; }
.about-nav--next { right: 14px; }

/* barra inferior: traços à esquerda, contador à direita */
.about-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
}

.about-dots { display: flex; align-items: center; gap: 9px; }

.about-dot {
  width: 22px;
  height: 2px;
  padding: 0;
  border: 0;
  background: rgba(20, 16, 12, .24);
  cursor: pointer;
  transition: background-color 260ms ease, width 260ms ease;
}
.about-dot:hover { background: rgba(20, 16, 12, .45); }
.about-dot.is-active { width: 40px; background: var(--bronze); }
.about-dot:focus-visible { outline: 2px solid var(--bronze-deep); outline-offset: 4px; }

/* área de toque confortável no mobile sem engordar o traço visual */
@media (hover: none) {
  .about-dot { height: 14px; padding: 6px 0; background-clip: content-box; box-sizing: content-box; }
}

.about-counter {
  margin: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .17em;
  color: rgba(20, 16, 12, .45);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .about-slide { transition: none; }
}

/* ------------------------------ contato ------------------------------ */
.contact-form { width: 100%; margin-top: 52px; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px 24px;
  color: var(--gray);
}

.field { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.field--full { grid-column: 1 / -1; }

.field-label {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: #6f6f6f;
}

.text-field {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid #e2e0dc;
  border-radius: 0;
  background: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  color: #333;
  outline: none;
  transition: border-color 220ms ease, box-shadow 220ms ease;
}
.text-field::placeholder { color: #a8a8a8; }
.text-field:focus {
  border-color: var(--bronze);
  box-shadow: 0 0 0 3px rgba(140, 118, 87, .12);
}
.text-field.textarea { min-height: 170px; max-height: 320px; resize: vertical; }

.form-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 20px 26px;
  flex-wrap: wrap;
}

.submit-button {
  min-width: 220px;
  height: 52px;
  padding: 0 34px;
  border: 1px solid transparent;
  border-radius: 999px;
  background-color: var(--bronze);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(135deg, #a2896a 0%, #8c7657 52%, #75603f 100%);
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 12px 28px -16px rgba(0, 0, 0, .75);
  transition: transform 260ms ease, box-shadow 260ms ease, filter 260ms ease;
}
.submit-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 18px 32px -18px rgba(0, 0, 0, .8);
}
.submit-button:active { transform: translateY(0); }

.form-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #9b9b9b;
}
.form-note.is-error { color: #e1033d; }
.form-note.is-ok { color: #1f7a45; }

/* ------------------------------ footer legado ------------------------------
   Mantido para as páginas internas (quem-somos, obras-concluidas, obras-em-andamento),
   que ainda usam .footer-block / .footer-grid / .footer-photo. */
.footer { margin: 0 35px; }
.footer-block { max-width: 75%; margin: 80px auto 40px; padding-bottom: 40px; }

/* ------------------------------ rodapé institucional ------------------------------
   Só o index.html usa .footer--site. Sem a foto da sede e sem o crédito
   "Desenvolvido por Imonov", com mapa do Google e a lista de redes atualizada. */
.footer--site {
  margin: 0;
  padding: clamp(56px, 6vw, 84px) 0 0;
  background: #0e0e0e;
  color: rgba(255, 255, 255, .62);
}

.footer-main {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Logo branca do rodapé.
   `images/calaca-branca.png` tem fundo transparente, porém com muito espaço
   vazio ao redor do desenho: num arquivo de 1024×375 o desenho ocupa apenas a
   faixa x 133..890 / y 116..258 — isto é, 758×143 px (proporção 5,30:1), com
   ~31% de padding no topo e apenas ~0,3% na base.
   Se apenas `height` fosse definido, a marca ficaria minúscula e baixa dentro
   da caixa. Então a caixa assume a proporção do DESENHO (758/143) e a imagem é
   ampliada e deslocada para exibir exatamente o bounding box.
   Percentuais de `left`/`top` em elemento absoluto resolvem contra a
   largura/altura da caixa — por isso este método é usado aqui, e não
   `margin` com %, que resolveria sempre contra a LARGURA. */
.footer-logo {
  display: block;
  position: relative;
  width: 160px;
  aspect-ratio: 758 / 143;
  overflow: hidden;
  text-decoration: none;
}
.footer-logo img {
  position: absolute;
  top: -81.12%;
  left: -17.55%;
  width: 135.09%;
  height: auto;
  max-width: none;
}

.footer-tagline {
  max-width: 34ch;
  margin: 22px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .52);
}

.footer-social {
  display: flex;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  transition: border-color 240ms ease, background-color 240ms ease, transform 240ms ease;
}
.footer-social a:hover {
  background: rgba(172, 153, 124, .16);
  border-color: var(--gold);
  transform: translateY(-2px);
}
.footer-social img {
  width: 17px;
  height: 17px;
  display: block;
  filter: invert(1);
  opacity: .78;
}

.footer-title {
  margin: 0 0 20px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}

.footer-list { margin: 0; padding: 0; list-style: none; }
.footer-list li { margin-bottom: 18px; }
.footer-list li:last-child { margin-bottom: 0; }

.footer-label {
  display: block;
  margin-bottom: 5px;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .34);
}

.footer-list a {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  transition: color 200ms ease;
}
.footer-list a:hover { color: var(--gold); }

.footer-map {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, .12);
}
.footer-map iframe { display: block; width: 100%; height: 100%; border: 0; }

.footer-map-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  padding-bottom: 2px;
  transition: color 200ms ease, border-color 200ms ease;
}
.footer-map-link:hover { color: var(--gold); border-color: var(--gold); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 30px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  padding: 22px 32px;
  border-top: 1px solid rgba(255, 255, 255, .10);
}
.footer-bottom p {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .38);
}

.footer-grid {
  display: grid;
  grid-template-columns: .5fr 1fr;
  gap: 0;
  align-items: start;
}
.block-footer { padding-top: 130px; }

.link-block { display: block; width: 30%; text-decoration: none; }
.link-block img { width: 100%; }

.div-block-82 { display: flex; flex-direction: column; align-items: flex-start; margin-top: 50px; }
.link { font-size: 17px; text-decoration: none; }
.link.email { margin: 25px 0; }
.link strong { font-weight: 700; }

.social-media-horizontal { display: flex; margin-top: 40px; align-items: center; }
.footer-social-media { display: block; margin-right: 10px; text-decoration: none; opacity: .55; transition: opacity 200ms ease-in-out; }
.footer-social-media:hover { opacity: 1; }
.footer-social-media img { width: 39px; }

.powered { margin-top: 40px; font-size: 15px; }
.powered a { color: #000; }

.footer-photo { width: 100%; align-self: end; padding-top: 130px; }
.footer-photo img { width: 100%; object-fit: cover; }

/* ------------------------------ páginas internas ------------------------------ */
.body { padding-top: 80px; }

.page-head { display: block; width: 100%; max-width: 72%; margin: 50px auto 0; }
.page-head .section-title { text-align: left; }

.intro-text {
  width: 65%;
  max-width: 900px;
  margin: 50px auto;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 26px;
  color: var(--gray);
  text-align: justify;
}
.intro-text p { margin-bottom: 18px; }

/* galeria de obras */
.obras-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 55px 30px;
  max-width: 72%;
  margin: 30px auto 100px;
}

.obras-grid .project-block { text-decoration: none; }

.project-image.obas {
  display: block;
  height: 350px;
  margin: 0 auto;
  filter: none;
  object-fit: cover;
}

.obras-grid .project-info {
  width: 100%;
  max-width: 420px;
  margin: -60px auto 0;
  padding: 25px 30px;
  text-align: center;
}
.obras-grid .project-title { font-size: 18px; line-height: 26px; text-transform: uppercase; }

/* animação de entrada */
.reveal { opacity: 0; transform: translateY(50px); transition: opacity 700ms ease, transform 700ms ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ------------------------------ responsivo ------------------------------ */
@media screen and (max-width: 991px) {
  .social-media-vertical { display: none; }

  .nav-block { height: 8vw; min-height: 62px; max-width: 90%; }

  .menu-button { display: block; margin-left: 20px; }

  .nav-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    flex-direction: column;
    margin: 0;
    padding: 15px 10px 15px 20px;
    background: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .12);
  }
  .nav-menu.is-open { display: flex; }
  .menu-block { margin-left: 0; }
  .nav-link { display: block; width: 100%; margin: 0; padding: 15px 0; color: #3c3d3f; }
  .left-line, .right-line { display: none; }

  .brand { width: 25vw; }

  .body { padding-top: 8vw; }

  .hero-block { max-width: 90%; margin: 80px 35px 40px; }
  .hero-heading { font-size: 44px; line-height: 52px; }

  .block-content { max-width: 90%; margin: 0 auto 40px; }

  .service-grid { grid-template-columns: 1fr 1fr; gap: 40px 30px; }
  .projects-grid { gap: 90px 30px; margin-top: 40px; }
  .project-info { width: auto; max-width: 100%; }
  /* Precisa da mesma especificidade da regra base (`.projects-grid .project-image`),
     senão a altura de 600px venceria e os blocos ficariam gigantes no tablet. */
  .projects-grid .project-image { height: 400px; flex-basis: 400px; }

  .quote-text { width: auto; font-size: 40px; line-height: 50px; }
  .red-block { display: none; }

  /* Empilha: texto em cima, carrossel embaixo. O carrossel é limitado por
     `max-width` (nunca `max-height`), para a moldura 4:5 continuar igual à
     proporção das fotos e nenhuma imagem ser cortada ou deformada. */
  .about-wrap {
    grid-template-columns: 1fr;
    gap: 32px;
    margin: 0 auto;
    max-width: 100%;
  }
  .about-gallery { justify-self: center; max-width: 380px; }
  .title-block { margin: 0 0 18px; }

  .form-grid { grid-template-columns: 1fr 1fr; gap: 15px; }
  .text-field.textarea, .submit-button, .form-note { grid-column: span 2; }

  .footer { margin: 0 35px; }
  .footer-block { max-width: 100%; margin: 40px auto 35px; }
  .block-footer { padding-top: 0; }
  .footer-grid { grid-template-columns: .75fr .75fr; gap: 0 30px; }
  .footer-photo { padding-top: 40px; }

  .page-head { max-width: 90%; }
  .intro-text { width: 90%; }
  .obras-grid { max-width: 90%; gap: 45px 25px; }
  .project-image.obas { height: 300px; }
}

@media screen and (max-width: 767px) {
  .nav-block { height: 10vw; min-height: 66px; }
  .brand { width: 35vw; }

  .section-title { font-size: 36px; line-height: 46px; }
  .hero-heading { font-size: 38px; line-height: 46px; }
  .hero-block { margin: 80px 16px 30px; max-width: 94%; }

  .block-content { margin: 0 16px 30px; max-width: 94%; }
  .block-content.bottom-margin { margin-bottom: 30px; }

  .quote-text { font-size: 30px; line-height: 40px; }
  .block-quote { padding: 70px 16px; }
  .black-background { margin: 40px 0; min-height: 0; }

  .projects-grid { grid-template-columns: 1fr; gap: 40px; }
  .projects-grid .project-image { height: 300px; flex-basis: 300px; }
  .project-info { margin-top: -50px; padding: 20px; }

  .black-background { margin: 30px 0; }

  .form-grid { grid-template-columns: 1fr; gap: 15px; }
  .text-field.textarea, .submit-button, .form-note { grid-column: span 1; }

  .footer { margin: 0 16px; }
  .footer-grid { grid-template-columns: 1fr; gap: 20px; }
  .footer-photo { padding-top: 0; }

  .page-head { max-width: 94%; }
  .intro-text { width: 94%; }
  .obras-grid { grid-template-columns: 1fr; max-width: 94%; gap: 40px; margin-bottom: 60px; }
  .project-image.obas { height: 260px; }
  .obras-grid .project-info { margin-top: -40px; max-width: 100%; }
}

@media screen and (max-width: 479px) {
  .hero-heading { font-size: 30px; line-height: 40px; }
  .section-title { font-size: 27px; line-height: 34px; }
  .quote-text { font-size: 25px; line-height: 34px; }
  .service-grid { grid-template-columns: 1fr; }
  .brand { width: 50%; }
  .subtitle { font-size: 18px; line-height: 18px; }
  .button { font-size: 24px; }
}

/* ==========================================================================
   Responsivo — cabeçalho institucional e primeira tela
   ========================================================================== */
@media screen and (max-width: 991px) {
  .header-inner { height: 68px; padding: 0 20px; }
  .site-header .brand img { height: 26px; }

  .menu-button { display: block; margin-left: 16px; }

  .primary-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 6px 20px 22px;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 18px 30px rgba(0, 0, 0, .10);
  }
  .primary-nav.is-open { display: flex; }

  .nav-item {
    padding: 15px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    font-size: 14px;
  }
  .nav-item::after { display: none; }

  .nav-cta { margin-top: 16px; text-align: center; }

  .hero { min-height: 88svh; align-items: flex-end; }
  .hero-content { padding: 104px 20px 118px; }
  .hero-title { max-width: 24ch; }
  .hero-slide video { object-position: 62% 55%; }

  /* No mobile o texto ocupa toda a largura sobre áreas claras da foto:
     o degradê vertical garante contraste em todas as linhas. */
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(6, 6, 6, .62) 0%, rgba(6, 6, 6, .44) 30%, rgba(6, 6, 6, .66) 62%, rgba(6, 6, 6, .92) 100%);
  }

  .hero-controls { bottom: 20px; padding: 0 20px; }
}

@media screen and (max-width: 767px) {
  .hero { min-height: 86svh; }
  .hero-content { padding: 92px 20px 108px; }
  .hero-title { margin-bottom: 20px; font-size: clamp(1.72rem, 7.2vw, 2.5rem); }
  .hero-lead { margin-bottom: 30px; font-size: 15px; line-height: 1.7; }

  .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .btn { width: 100%; justify-content: space-between; padding: 16px 18px; font-size: 11px; }

  /* indicadores alinhados à direita, sem legenda */
  .hero-controls { align-items: center; }
  .hero-dots { gap: 8px; }
  .hero-dot { width: 22px; }
  .hero-dot.is-active { width: 38px; }
}

@media screen and (max-width: 479px) {
  .header-inner { height: 62px; padding: 0 16px; }
  .site-header .brand img { height: 24px; }
  .hero { min-height: 84svh; }
  .hero-content { padding: 84px 16px 100px; }
  .hero-title { line-height: 1.12; }
  .hero-controls { padding: 0 16px; }
}

/* Vídeo "Como fazemos?" — ajustes de tela pequena */
@media screen and (max-width: 767px) {
  .video-block { margin-top: 28px; }
  .video-caption { padding: 18px 20px 20px; font-size: 13px; line-height: 1.65; }
  .video-caption::before { margin-bottom: 13px; }
}

@media screen and (max-width: 479px) {
  .video-caption { padding: 16px 16px 18px; font-size: 12.5px; }
}

/* Telas pequenas: em 390px de largura a frase de 34,9em caberia em uma linha
   com ~9px de corpo — ilegível. Até 640px ela quebra em linhas curtas,
   centralizadas e com corpo confortável (a linha única vale acima disso). */
@media screen and (max-width: 640px) {
  .service-heading {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    font-size: 1.9rem;
    line-height: 1.2;
    white-space: normal;
    text-wrap: balance;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-heading em { animation: none; }
  .service-heading.reveal .sh-line,
  .service-heading.reveal.is-visible .sh-line {
    clip-path: none;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Responsivo — galeria de obra
   Cada faixa redefine o CONJUNTO de números da janela no palco. Como a imagem
   dentro do painel preenche o palco inteiro (e não o painel), basta mudar os
   recortes: o alinhamento com o cenário continua perfeito em qualquer tela.
   ========================================================================== */
@media screen and (max-width: 1100px) {
  .showcase-stage {
    --apw: 42; --aph: 82; --apx: 29; --apy: 9;
    --spw: 24; --sph: 58; --spx: 2.5; --spy: 21;
    --npw: 24; --nph: 58; --npx: 73.5; --npy: 21;
    --sw-nav: 2.5%;
    height: 92svh;
  }
  .showcase-nav { width: 34px; height: 46px; margin-top: -23px; }

  /* Rodapé e formulário: regras que vivem nas mesmas faixas da galeria. */
  .footer--site { margin: 0; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col--map { grid-column: 1 / -1; }
  .footer-map { max-width: 480px; }
}

@media screen and (max-width: 767px) {
  /* No celular o painel ativo ocupa a maior parte da largura e os vizinhos
     ficam como faixas nas bordas, cortados pelo palco. Os distantes esperam
     FORA (x negativo ou >100) para entrarem deslizando. */
  .showcase-stage {
    --apw: 62; --aph: 76; --apx: 19; --apy: 12;
    --spw: 16; --sph: 46; --spx: 1; --spy: 27;
    --npw: 16; --nph: 46; --npx: 83; --npy: 27;
    --fpw: 16; --fph: 46; --fpx: -18; --fpy: 27;
    --fnpw: 16; --fnph: 46; --fnpx: 101; --fnpy: 27;
    --sw-nav: 1%;
    height: 88svh;
  }

  .showcase-nav { width: 30px; height: 40px; margin-top: -20px; }
  .showcase-nav svg { width: 13px; height: 13px; }
  .showcase-kicker { font-size: 9px; letter-spacing: .16em; }

  .form-grid { grid-template-columns: 1fr; }
  .form-actions { flex-direction: column; align-items: stretch; }
  .submit-button { width: 100%; min-width: 0; }

  .footer-main { grid-template-columns: 1fr; padding: 0 20px; }
  .footer--site { margin: 0; }
  .footer-bottom { padding: 20px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer-map { max-width: none; }
}

@media screen and (max-width: 479px) {
  .showcase-stage {
    --apw: 74; --aph: 72; --apx: 13; --apy: 14;
    --spw: 12; --sph: 40; --spx: 0; --spy: 30;
    --npw: 12; --nph: 40; --npx: 87; --npy: 30;
    --fpw: 12; --fph: 40; --fpx: -13; --fpy: 30;
    --fnpw: 12; --fnph: 40; --fnpx: 101; --fnpy: 30;
    --sw-nav: 0;
    height: 86svh;
  }
  .showcase-caption { padding: 8px 10px; }
  .showcase-kicker { font-size: 8.5px; letter-spacing: .14em; }
  .footer-social a { width: 36px; height: 36px; }
}