/* ==========================================================================
   Kaza Home Design — folha de estilo única
   Organização: 1. Tokens  2. Base  3. Header  4. Seções  5. Rodapé  6. Utilidades
   Escrito mobile-first: o padrão vale para celular, os @media ampliam.
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
  --ink:    #292c27;
  --sand:   #e8e3dc;
  --paper:  #f8f7f4;
  --moss:   #697060;
  --line:   #d8d4cc;
  --gold:   #d9b86a;
  --forest: #30342e;
  --night:  #2d302b;

  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --pad-x: 7vw;          /* respiro lateral no celular */
  --header-h: 100px;       /* sobre o hero, transparente */
  --header-h-rolado: 92px; /* depois que ganha fundo */
}

@media (min-width: 751px) {
  :root { --pad-x: 8vw; --header-h: clamp(114px, 9.5vw, 140px); --header-h-rolado: clamp(104px, 8.2vw, 120px); }
}

/* 2. BASE ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Âncoras não ficam escondidas atrás do header fixo */
  scroll-padding-top: calc(var(--header-h-rolado) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  /* Trava contra rolagem horizontal. `clip` corta sem criar contexto de
     rolagem — ao contrário de `hidden`, não ameaça o header sticky.
     A primeira linha é reserva para navegadores sem suporte a `clip`. */
  overflow-x: hidden;
  overflow-x: clip;
}

img, video, iframe { max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; }
h1, h2 { line-height: 1.03; letter-spacing: -.04em; }

/* Foco visível apenas para quem navega por teclado */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--forest);
  color: #fff;
  padding: 12px 18px;
  font-size: 13px;
}
.skip-link:focus { left: 8px; top: 8px; }

.eyebrow {
  margin: 0 0 18px;
  color: var(--moss);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border: 0;
  padding: 17px 22px;
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.button b { font-size: 20px; font-weight: 400; line-height: 1; }
.button.light { background: var(--gold); color: #fff; }
.button.light:hover { background: #ead08c; }
.button.dark { background: var(--forest); color: #fff; }
.button.dark:hover { background: #3d4339; }

.text-link {
  display: inline-block;
  width: max-content;
  border-bottom: 1px solid;
  padding-bottom: 7px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.text-link b { font-size: 18px; font-weight: 400; }

.section { padding: 80px var(--pad-x); }
@media (min-width: 751px) { .section { padding: 92px var(--pad-x); } }

/* 3. HEADER ---------------------------------------------------------------- */
/* Fixo e transparente sobre o hero; ganha fundo branco ao rolar.
   `fixed` em vez de `sticky` para que o hero comece no topo da tela e a foto
   apareça inteira por trás do cabeçalho. */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  height: var(--header-h);
  padding: 0 var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  transition: height .3s ease, background .3s ease, box-shadow .3s ease;
}

/* Rolou, ou o menu do celular está aberto: precisa de fundo para o texto ler */
.nav.rolou,
.nav.menu-aberto {
  height: var(--header-h-rolado);
  background: #fff;
  box-shadow: 0 1px 20px rgba(28, 33, 27, .08);
}

.brand-header {
  position: relative;
  display: block;
  width: 215px;
  line-height: 0;
  flex-shrink: 0;
}

.brand-header img {
  display: block;
  width: 100%;
  transition: opacity .3s ease;
}
/* A escura fica sobreposta à clara; a troca é só de opacidade */
.brand-header .logo-escura {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.nav.rolou .logo-clara,
.nav.menu-aberto .logo-clara { opacity: 0; }
.nav.rolou .logo-escura,
.nav.menu-aberto .logo-escura { opacity: 1; }

/* Telas muito estreitas (iPhone SE e similares): a logo ampliada deixava
   apenas 16px até o hambúrguer. */
@media (max-width: 359px) {
  .brand-header { width: 185px; }
}

/* Botão hambúrguer — só existe no celular */
.nav-toggle {
  width: 44px;               /* 44px = alvo de toque confortável */
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;                 /* sobre o hero, que é escuro */
  transition: transform .25s ease, opacity .2s ease, background .3s ease;
}
.nav.rolou .nav-toggle-bars,
.nav.rolou .nav-toggle-bars::before,
.nav.rolou .nav-toggle-bars::after,
.nav.menu-aberto .nav-toggle-bars,
.nav.menu-aberto .nav-toggle-bars::before,
.nav.menu-aberto .nav-toggle-bars::after { background: var(--ink); }
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before { position: absolute; top: -7px; }
.nav-toggle-bars::after  { position: absolute; top: 7px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-bars,
.nav.menu-aberto .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { top: 0; transform: rotate(-45deg); }

/* Menu no celular: painel que desce, fechado por padrão */
.nav-menu {
  position: fixed;
  top: var(--header-h-rolado);   /* o cabeçalho já encolheu quando o menu abre */
  left: 0;
  right: 0;
  display: grid;
  gap: 4px;
  padding: 8px var(--pad-x) 22px;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 18px 30px rgba(30, 34, 28, .09);

  /* Animação de abertura sem tirar o menu do fluxo de leitura */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.nav-menu.is-open { visibility: visible; opacity: 1; transform: translateY(0); }

.nav-menu a {
  padding: 13px 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #575a55;
  border-bottom: 1px solid #eeece7;
}
.nav-menu .nav-cta {
  margin-top: 12px;
  border: 0;
  background: var(--forest);
  color: #fff;
  text-align: center;
  padding: 15px 18px;
}

/* Desktop: menu volta a ser uma linha horizontal, sem hambúrguer.
   Só a partir de 1060px: com a logo ampliada para 235px, em 1000px sobravam
   apenas 15px entre ela e o menu. O gap acompanha a largura para nunca
   espremer os itens. */
@media (min-width: 1060px) {
  .nav-toggle { display: none; }
  /* A pedido do cliente, a logo mantém o mesmo tamanho depois da rolagem —
     quem encolhe é só o cabeçalho em volta dela. O teto de 290px é o que cabe
     no cabeçalho já reduzido sem encostar nas bordas (290 ÷ 3 = 97px de altura). */
  .brand-header { width: clamp(230px, 20vw, 290px); }

  .nav-menu {
    position: static;
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.5vw, 32px);
    padding: 0;
    margin-left: auto;
    background: none;
    border: 0;
    box-shadow: none;
    visibility: visible;
    opacity: 1;
    transform: none;
  }
  .nav-menu a {
    padding: 0;
    border: 0;
    font-size: 13px;
    white-space: nowrap;
    color: #f2f1ec;                  /* sobre o hero */
    transition: color .3s ease, border-color .3s ease;
  }
  .nav-menu a:not(.nav-cta):hover { color: #fff; }
  .nav-menu .nav-cta {
    margin: 0 0 0 8px;
    padding: 0 0 5px;
    background: none;
    color: #fff;
    border-bottom: 1px solid #fff;
    font-size: 12px;
  }

  /* Depois que o cabeçalho ganha fundo branco, o texto volta ao tom escuro */
  .nav.rolou .nav-menu a { color: #575a55; }
  .nav.rolou .nav-menu a:not(.nav-cta):hover { color: var(--ink); }
  .nav.rolou .nav-menu .nav-cta { color: var(--ink); border-bottom-color: var(--ink); }
}

/* 4. SEÇÕES ---------------------------------------------------------------- */

/* --- Hero --- */
.hero {
  position: relative;
  min-height: 600px;
  /* Espaço para o cabeçalho fixo, que fica por cima */
  padding: calc(var(--header-h) + 24px) var(--pad-x) 70px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 40px;
  color: #fff;
  background: #171a16;
  overflow: hidden;
}

/* --- Fundo rotativo do hero ---
   Três camadas em crossfade contínuo, feito só com CSS: animação de composição,
   que roda no compositor do navegador e não depende de JavaScript. */
.hero-slides { position: absolute; inset: 0; z-index: 0; }

.hero-slide {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  /* 21s de ciclo: cada ambiente fica ~5s no ar e leva ~2s para trocar */
  animation: heroTroca 21s infinite;
}
.hero-slide:nth-child(1) { background-image: url('assets/hero.webp'); animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: 7s; }
.hero-slide:nth-child(3) { animation-delay: 14s; }

/* A 2ª e a 3ª foto só entram na fila depois que a página termina de carregar:
   elas só aparecem aos 7s e aos 14s, então não têm por que disputar banda com
   o primeiro carregamento. A classe é posta pelo script.js. */
.hero-slides.pronto .hero-slide:nth-child(2) { background-image: url('assets/hero-2.webp'); }
.hero-slides.pronto .hero-slide:nth-child(3) { background-image: url('assets/hero-3.webp'); }

/* A primeira já nasce visível: sem isso o hero pisca preto no carregamento */
.hero-slide.is-first { opacity: 1; }

@keyframes heroTroca {
  0%      { opacity: 0; }
  4%      { opacity: 1; }
  33%     { opacity: 1; }
  38%     { opacity: 0; }
  100%    { opacity: 0; }
}

/* O véu escuro fica acima das fotos e abaixo do texto */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;                 /* acima das fotos, abaixo do texto */
  background: linear-gradient(90deg, rgba(23, 26, 22, .74), rgba(23, 26, 22, .2));
  pointer-events: none;
}
.hero-copy, .hero-note { position: relative; z-index: 2; }
.hero .eyebrow { color: #efede8; }
.hero h1 { font-size: clamp(44px, 11vw, 90px); }
.hero h1 em { color: var(--gold); font-style: normal; }
.hero .lead {
  max-width: 450px;
  margin: 26px 0;
  font-size: 16px;
  line-height: 1.6;
}
.hero-copy { max-width: 650px; }

.hero-note { display: flex; gap: 14px; align-items: center; }
.hero-note span {
  font: 600 49px/1 var(--sans);
  letter-spacing: -.06em;
}
.hero-note p { margin: 0; font-size: 13px; line-height: 1.45; }

@media (min-width: 751px) {
  .hero {
    min-height: 690px;
    padding: calc(var(--header-h) + 40px) var(--pad-x) 88px;
    display: block;
    position: relative;
  }
  .hero h1 { font-size: clamp(49px, 6vw, 90px); }
  .hero-note { position: absolute; right: var(--pad-x); bottom: 80px; }
}

/* --- Faixa de credenciais ---
   Marquee contínuo entre o hero e o institucional. Animação de transform:
   roda no compositor do navegador, sem JavaScript. */
.faixa {
  background: var(--night);
  color: #e9e7e0;
  overflow: hidden;
  padding: 16px 0;
  /* Isola a pintura desta área: o navegador não pode desenhar nada da faixa
     fora dela, o que impede a linha de emenda que aparecia ao rolar. */
  contain: paint;
}

.faixa-trilho {
  display: flex;
  align-items: center;
  width: max-content;
  animation: faixaCorre 42s linear infinite;
  /* Mantém a camada de composição estável durante a rolagem: sem isto o
     navegador recria a camada ao rolar e desenha uma linha de emenda sobre o
     texto. Não adianta declarar `transform` aqui — a animação o sobrescreve;
     o empurrão para a placa de vídeo é dado pelos keyframes, em translate3d. */
  will-change: transform;
  backface-visibility: hidden;
}
.faixa:hover .faixa-trilho { animation-play-state: paused; }

.faixa-grupo { display: flex; align-items: center; flex-shrink: 0; }

.faixa-grupo span {
  display: flex;
  align-items: center;
  padding: 0 clamp(22px, 3vw, 40px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Losango como separador: some discreto, não é emoji nem bolinha */
.faixa-grupo span::after {
  content: '';
  width: 5px;
  height: 5px;
  flex: 0 0 5px;      /* item flex: sem isto pode ser espremido e virar um risco */
  margin-left: clamp(22px, 3vw, 40px);
  background: var(--gold);
  transform: rotate(45deg);
  opacity: .8;
}

@keyframes faixaCorre {
  /* translate3d, e não translateX: obriga o navegador a compor na placa de
     vídeo do começo ao fim, sem alternar entre desenhar e compor no meio da
     animação — que é quando a emenda aparecia. */
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }   /* meio caminho = um grupo inteiro */
}

/* --- Institucional --- */
.intro { display: grid; gap: 35px; background: #fff; }

.intro-visual {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: flex-end;
  padding: 26px;
  overflow: hidden;
}
.intro-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.intro-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(25, 28, 24, .58), rgba(25, 28, 24, .04) 58%);
}
.intro-visual-caption {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 7px;
  max-width: 290px;
  color: #fff;
}
.intro-visual-caption span {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.intro-visual-caption strong { font: 500 21px/1.18 var(--serif); }

.intro-copy h2 { font-size: clamp(36px, 4.5vw, 66px); }
.intro-copy h2 em { font-style: normal; }
.intro-copy > p:not(.eyebrow) {
  max-width: 500px;
  margin: 24px 0 28px;
  font-size: 16px;
  line-height: 1.8;
}

/* Duas colunas só a partir de 900px: em tablet retrato (768px) o par
   300px + 420px + gap estourava a tela e criava rolagem horizontal.
   minmax(0, …) deixa as colunas encolherem em vez de forçar a largura. */
@media (min-width: 900px) {
  .intro {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr);
    gap: 7vw;
    align-items: stretch;
  }
  .intro-visual { min-height: 500px; }
  .intro-copy { align-self: center; }
  .intro-copy > p:not(.eyebrow) { margin: 26px 0 30px; }
}

/* --- Galeria de projetos --- */
.projects .section-head { margin-bottom: 28px; }
.projects .projects-intro { max-width: 790px; }
.projects .projects-intro h2 { font-size: clamp(36px, 4.5vw, 66px); }
.projects .projects-intro h2 em { font-style: normal; }
.projects .projects-intro > p:not(.eyebrow) {
  max-width: 760px;
  margin: 13px 0 0;
  color: #62655e;
  font-size: 14px;
  line-height: 1.65;
}

.gallery-controls { display: flex; gap: 8px; margin-top: 24px; }
.gallery-controls button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.gallery-controls button:hover { background: var(--forest); color: #fff; border-color: var(--forest); }
.gallery-controls button[disabled] { opacity: .35; cursor: default; }
.gallery-controls button[disabled]:hover { background: #fff; color: var(--ink); border-color: var(--line); }

/* Rolagem contínua: sem scroll-snap, que puxaria os cards de volta ao
   alinhamento e travaria o movimento automático. */
.project-grid {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  padding-bottom: 11px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.project-grid::-webkit-scrollbar { display: none; }

.project {
  position: relative;
  flex: 0 0 84vw;
  height: 440px;
  display: flex;
  align-items: flex-end;
  padding: 24px;
  overflow: hidden;
  color: #fff;
}
.project img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A foto avança devagar sob a legenda quando o card recebe atenção */
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}
.project:hover img,
.project:focus-within img { transform: scale(1.06); }
.project::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 45%, rgba(20, 23, 20, .72));
}
.project-copy { position: relative; z-index: 1; }
.project-copy p {
  margin: 0 0 7px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.project-copy h3 { font-size: 26px; margin: 0 0 12px; }
.project-copy a {
  display: inline-block;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, .7);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.gallery-hint {
  margin-top: 15px;
  color: #777970;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (min-width: 751px) {
  .projects .section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
  }
  .gallery-controls { margin-top: 0; flex-shrink: 0; }
  .project { flex-basis: min(390px, 78vw); height: 500px; }
  .project-copy h3 { font-size: 28px; }
}

/* --- Marcenaria tecnológica (vídeo CNC) --- */
.digital { display: grid; background: var(--sand); }

.digital-image {
  min-height: 320px;
  height: 320px;
  background: #1d201c;
  overflow: hidden;
}
.digital-image video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.digital-copy { padding: 70px var(--pad-x); }
.digital-copy h2 { font-size: clamp(36px, 4.5vw, 66px); }
.digital-copy h2 em { font-style: normal; }
.digital-copy > p:not(.eyebrow) {
  max-width: 440px;
  margin: 26px 0 40px;
  line-height: 1.8;
}

.numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 45px;
  border-top: 1px solid #bbb8af;
  padding-top: 24px;
}
.numbers div { display: flex; gap: 11px; align-items: center; }
.numbers strong { font: 500 37px var(--serif); }
.numbers span {
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (min-width: 900px) {
  .digital { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; }
  /* O vídeo acompanha a altura do texto ao lado, mas para de crescer em 620px
     e fica centrado — sem isso ele estica com a tela e engole o bloco de texto. */
  .digital-image {
    min-height: 0;
    height: 100%;
    max-height: min(620px, 72vh);   /* em notebook baixo, não toma a tela toda */
    align-self: center;
  }
  .digital-copy { padding: clamp(56px, 5vw, 80px) 7vw; align-self: center; }
}

/* Moldura do vídeo: um filete dourado deslocado por trás, como o passe-partout
   de um quadro. Só no desktop — no celular o vídeo ocupa a largura toda e a
   moldura deslocada sairia da tela. */
@media (min-width: 900px) {
  .digital-image { overflow: visible; }

  .digital-image::before {
    content: '';
    position: absolute;
    inset: 26px -26px -26px 26px;
    /* Dourado escurecido: o tom claro da marca dava 1,19:1 contra o fundo areia
       e o filete simplesmente não aparecia. Este fica em 3,75:1. */
    border: 1px solid #8a6f2a;
    pointer-events: none;
    transition: inset .55s cubic-bezier(.22, .61, .36, 1);
  }
  /* Ao aproximar o cursor, a moldura se fecha sobre o vídeo */
  .digital-image:hover::before { inset: 15px -15px -15px 15px; }

  .digital-image video {
    position: relative;   /* fica acima do filete, que só aparece nas bordas */
    box-shadow: 0 26px 60px rgba(26, 31, 25, .24);
    transition: box-shadow .55s ease;
  }
  .digital-image:hover video { box-shadow: 0 34px 72px rgba(26, 31, 25, .3); }
}

/* Acima de ~1560px o par vídeo + texto para de esticar e fica centrado.
   O padding lateral segura o conteúdo sem cortar o fundo da seção. */
@media (min-width: 1560px) {
  .digital { padding-inline: calc((100% - 1480px) / 2); }
}

/* --- Formulário --- */
.contact {
  padding: 80px var(--pad-x);
  display: grid;
  gap: 35px;
  background: #fff;
}
.contact-copy h2 { font-size: clamp(34px, 4vw, 58px); line-height: 1.08; letter-spacing: -.035em; }
.contact-copy > p:not(.eyebrow) {
  max-width: 400px;
  margin-top: 24px;
  font-size: 15px;
  line-height: 1.75;
}

.contact form { display: grid; gap: 20px; align-content: start; }
.contact .field { display: grid; }
.contact label {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #565952;      /* 6,4:1 sobre branco */
}
.contact input,
.contact textarea,
.contact select {
  width: 100%;
  margin-top: 9px;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 11px 0;
  background: transparent;
  color: var(--ink);
  /* 16px evita o zoom automático do iOS ao focar o campo */
  font: 16px var(--sans);
  outline: none;
  resize: vertical;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.contact select {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23697060' stroke-width='1.5' d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 2px center / 12px;
  padding-right: 24px;
}
.contact input:focus,
.contact textarea:focus,
.contact select:focus { border-bottom-color: var(--gold); }

.contact input::placeholder,
.contact textarea::placeholder { color: #a9a9a2; }

.field-error {
  margin-top: 7px;
  color: #a8442f;
  font-size: 12px;
}
.field.has-error input,
.field.has-error textarea,
.field.has-error select { border-bottom-color: #a8442f; }

.contact .button { width: 100%; }
.form-note {
  margin: 0;
  color: #6e716a;      /* 4,8:1 sobre branco */
  font-size: 13px;
  line-height: 1.55;
}

.success {
  padding: 44px 0;
  font: 20px var(--serif);
}
.success p { font: 14px var(--sans); color: #62655e; margin: 10px 0 0; line-height: 1.6; }
.success a { color: var(--ink); border-bottom: 1px solid var(--line); }

@media (min-width: 900px) {
  .contact { grid-template-columns: 1fr 1fr; gap: 11vw; padding: 110px var(--pad-x); }
}

/* --- Avaliações + localização --- */
.visit { padding: 80px var(--pad-x); background: var(--sand); }

.reviews-heading { display: grid; gap: 24px; }
.reviews-heading h2 { font-size: clamp(34px, 4vw, 58px); }
.reviews-heading h2 em { font-style: normal; }

.rating { display: flex; gap: 12px; align-items: center; }
.rating strong { font: 500 42px var(--serif); }
.rating span { display: grid; }
.rating b { color: #f4bd2d; letter-spacing: 2px; font-size: 16px; font-weight: 400; }
.rating small { margin-top: 3px; color: #5c6058; font-size: 11px; }

.review-grid { display: grid; gap: 10px; margin: 26px 0 25px; }
.review-grid article {
  background: #f9f8f5;
  padding: 15px 17px;
  border-left: 2px solid #758166;
}
.review-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 10px;
  color: #777970;
}
.review-top b { color: #f4bd2d; letter-spacing: 1px; font-weight: 400; }
.review-grid p { margin: 10px 0 0; font: 15px/1.45 var(--serif); }

/* Avaliações e localização viraram seções independentes: a prova social passou
   para antes do formulário, que é onde ela pesa na decisão. */
.location-area {
  display: grid;
  gap: 24px;
}
.location-area h2 { font-size: clamp(34px, 4vw, 58px); }

.map-card {
  position: relative;
  width: 100%;
  height: 260px;
  overflow: hidden;
  background: #30342e;
  transition: transform .2s ease;
}
.map-card:hover { transform: translateY(-3px); }
.map-card iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(.9) brightness(1.08);
}
.map-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
  background: linear-gradient(0deg, rgba(25, 29, 24, .5), rgba(25, 29, 24, 0) 64%);
  color: #fff;
}
.map-overlay span { display: grid; gap: 6px; }
.map-overlay small { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #f2f2ee; }
.map-overlay strong { font: 500 20px/1.15 var(--serif); }
.map-overlay > b { font-size: 26px; font-weight: 400; }

@media (min-width: 751px) {
  .visit { padding: 110px var(--pad-x); }
}

@media (min-width: 900px) {
  .reviews-heading {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 35px;
  }
  .review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 30px 0 25px; }
  .location-area {
    grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
    gap: 70px;
    align-items: center;
  }
  .location-area .map-card { height: 310px; }
}

/* 5. RODAPÉ ---------------------------------------------------------------- */
footer {
  display: grid;
  gap: 26px;
  padding: 45px var(--pad-x);
  background: var(--night);
  color: #f4f2ed;
  font-size: 14px;
}
.footer-brand { display: grid; gap: 14px; max-width: 340px; }
.brand-footer { display: block; width: 250px; line-height: 0; }
.brand-footer img { display: block; width: 100%; }
.footer-brand p { margin: 0; color: #c6c5bd; font-size: 14px; line-height: 1.6; }

.address { display: grid; gap: 10px; justify-items: start; }
.address p { margin: 0; color: #c6c5bd; line-height: 1.75; }
.maps-link {
  border-bottom: 1px solid #b7b8af;
  padding-bottom: 3px;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.socials { display: flex; gap: 20px; }
.socials a { display: inline-flex; align-items: center; gap: 8px; }
.socials svg { width: 19px; height: 19px; flex-shrink: 0; }
.socials a:hover { color: #fff; }

@media (min-width: 900px) {
  footer {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 25px;
  }
  .brand-footer { width: 285px; }
  .address { justify-self: center; }
}

/* 6. BOTÃO FLUTUANTE DO WHATSAPP ------------------------------------------- */
.whatsapp {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 30;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 8px 24px rgba(24, 143, 69, .32);
  transition: transform .2s ease;
}
.whatsapp:hover { transform: scale(1.06); }
.whatsapp svg { width: 27px; height: 27px; display: block; }

@media (min-width: 751px) {
  .whatsapp { right: 25px; bottom: 25px; }
}

/* --- Telas ultralargas ---
   Acima de 1700px o conteúdo para de acompanhar a largura da tela e fica
   centrado: sem isso, os campos do formulário esticam para quase mil pixels e
   as linhas de texto ficam largas demais para acompanhar a leitura.
   O fundo de cada seção continua sangrando de ponta a ponta. */
@media (min-width: 1700px) {
  .section,
  .contact,
  .visit,
  .hero { padding-inline: calc((100% - 1560px) / 2); }
}

/* 7. MOVIMENTO -------------------------------------------------------------
   Micro-interações discretas. A régua é a marcenaria: nada salta, tudo desliza.
   Todas são desligadas no bloco `prefers-reduced-motion` do fim do arquivo. */

/* Entrada das seções ao rolar. A classe `revelar` só é aplicada pelo JS quando
   o navegador sabe animar — sem script, o conteúdo nasce visível. */
/* A transição vive no estado REVELADO, não no escondido: a classe é aplicada
   por JS depois da renderização, e animar a ida para opacity 0 faria o conteúdo
   piscar antes de entrar. Assim ele apenas some e depois desliza para dentro. */
.revelar {
  opacity: 0;
  transform: translateY(20px);
}
.revelar.visivel {
  opacity: 1;
  transform: none;
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
              transform .7s cubic-bezier(.22, .61, .36, 1);
}

/* Header ganha profundidade assim que a página sai do topo */
.nav {
  transition: box-shadow .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.nav.rolou {
  box-shadow: 0 1px 20px rgba(28, 33, 27, .07);
  border-bottom-color: var(--line);
}

/* A seta dos botões avança quando o cursor chega */
.button b,
.text-link b,
.project-copy a span { transition: transform .28s cubic-bezier(.22, .61, .36, 1); }
.button:hover b,
.text-link:hover b { transform: translateX(5px); }
.project-copy a:hover span { transform: translateX(4px); }

.button {
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.button:hover { transform: translateY(-2px); }

/* Sublinhado que cresce da esquerda, em vez de simplesmente existir */
.text-link {
  position: relative;
  border-bottom-color: rgba(105, 112, 96, .35);
}
.text-link::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}
.text-link:hover::before { transform: scaleX(1); }

/* Itens do menu no desktop */
@media (min-width: 1000px) {
  .nav-menu a:not(.nav-cta) { position: relative; }
  .nav-menu a:not(.nav-cta)::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .32s cubic-bezier(.22, .61, .36, 1);
  }
  .nav-menu a:not(.nav-cta):hover::after { transform: scaleX(1); }
}

/* Card de projeto: a legenda sobe e o véu escurece junto com o zoom da foto */
.project::after { opacity: .9; transition: opacity .5s ease; }
.project:hover::after,
.project:focus-within::after { opacity: 1; }
.project-copy { transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.project:hover .project-copy,
.project:focus-within .project-copy { transform: translateY(-6px); }

/* Foto institucional acompanha o mesmo gesto dos cards */
.intro-visual img { transition: transform .9s cubic-bezier(.22, .61, .36, 1); }
.intro-visual:hover img { transform: scale(1.05); }

/* Depoimentos: elevação mínima, só para indicar que são blocos distintos */
.review-grid article {
  transition: transform .3s ease, box-shadow .3s ease, border-left-color .3s ease;
}
.review-grid article:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(40, 46, 38, .09);
  border-left-color: var(--gold);
}

/* Números da seção de tecnologia */
.numbers div { transition: transform .3s ease; }
.numbers div:hover { transform: translateY(-3px); }
.numbers strong { transition: color .3s ease; }
.numbers div:hover strong { color: #8a6f2a; }

/* Campos do formulário: a linha inferior engrossa ao receber o cursor */
.contact input,
.contact textarea,
.contact select { transition: border-color .25s ease, box-shadow .25s ease; }
.contact input:focus,
.contact textarea:focus,
.contact select:focus { box-shadow: 0 1px 0 0 var(--gold); }

/* Botão do WhatsApp: um anel que pulsa devagar, para puxar o olho sem gritar */
.whatsapp::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #25d366;
  animation: pulso 2.8s ease-out infinite;
}
@keyframes pulso {
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* 8. ÁREA DE TOQUE --------------------------------------------------------- */
/* Links de texto são visualmente finos (18–33px). No celular isso é difícil de
   acertar com o dedo. O ::after amplia a área clicável para ~44px sem mexer
   em uma vírgula do visual. */
@media (hover: none) and (pointer: coarse) {
  .text-link,
  .project-copy a,
  .maps-link,
  .socials a,
  .nav-menu a {
    position: relative;
  }
  .text-link::after,
  .project-copy a::after,
  .maps-link::after,
  .socials a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
}

/* 9. PREFERÊNCIA POR MENOS MOVIMENTO ---------------------------------------
   Quem configurou o sistema para reduzir animação recebe a página inteira,
   parada. O conteúdo revelado precisa continuar visível. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .revelar { opacity: 1 !important; transform: none !important; }
  .whatsapp::after { display: none; }
  /* Hero para de girar e fica na primeira imagem */
  .hero-slide { animation: none; opacity: 0; }
  .hero-slide.is-first { opacity: 1; }
  /* A faixa para, mas continua legível */
  .faixa-trilho { animation: none; }
}