/* ==========================================================================
   CONFORT ARQUITETURA & URBANISMO
   Design system
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Jost:wght@300;400;500;600&display=swap');

:root{
  /* Paleta */
  --pedra:            #555554;
  --pedra-escura:      #3a3a39;
  --pedra-profunda:    #242423;
  --marfim:            #f1eee8;
  --marfim-escuro:     #e6e2d8;
  --branco:            #ffffff;
  --bronze:            #a9814f;
  --bronze-claro:      #cbab7c;
  --texto-suave:       #8a8985;

  /* Tipografia */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-ui: 'Jost', 'Helvetica Neue', sans-serif;

  /* Layout */
  --container: 1280px;
  --gutter: 40px;

  /* Movimento */
  --ease: cubic-bezier(.19,1,.22,1);
}

/* ---------- Reset básico ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: auto; scroll-padding-top: 90px; }
body{
  margin:0;
  background: var(--marfim);
  color: var(--pedra-profunda);
  font-family: var(--font-ui);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ margin:0; font-family: var(--font-display); font-weight:400; }
p{ margin:0; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:14px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 22px;
}
.eyebrow::before{
  content:'';
  width: 34px;
  height:1px;
  background: var(--bronze);
  display:block;
}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration:none;
  padding: 17px 32px;
  border: 1px solid currentColor;
  border-radius: 1px;
  background: transparent;
  cursor:pointer;
  transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
  white-space: nowrap;
}
.btn--claro{ color:#fff; }
.btn--claro:hover{ background:#fff; color: var(--pedra-profunda); }

.btn--bronze{
  background: var(--bronze);
  border-color: var(--bronze);
  color:#fff;
}
.btn--bronze:hover{
  background: transparent;
  color: var(--bronze);
}

.btn--escuro{ color: var(--pedra-escura); }
.btn--escuro:hover{ background: var(--pedra-escura); color:#fff; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position: fixed;
  top:0; left:0; width:100%;
  z-index: 1000;
  padding: 30px 0;
  background: transparent;
  transition: background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
}
.site-header.is-scrolled{
  background: rgba(58,58,57,0.96);
  padding: 16px 0;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

.header-inner{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 24px;
}

.logo-link{ display:block; flex-shrink:0; }
.logo-link img{ height: 41px; width:auto; transition: height .5s var(--ease); }
.site-header.is-scrolled .logo-link img{ height: 35px; }

.nav-desktop{ flex-shrink:0; }
.nav-desktop ul{
  display:flex;
  align-items:center;
  gap: 26px;
}
.nav-desktop a{
  position:relative;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration:none;
  color:#fff;
  padding-bottom: 6px;
  white-space: nowrap;
}
.nav-desktop a::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:0; height:1px;
  background: var(--bronze-claro);
  transition: width .4s var(--ease);
}
.nav-desktop a:hover::after{ width:100%; }

.header-cta{
  flex-shrink:0;
  font-size: 11px;
  padding: 13px 22px;
  letter-spacing: .09em;
}

.menu-toggle{
  display:none;
  flex-direction: column;
  justify-content:center;
  gap:6px;
  width: 34px; height: 34px;
  background:none; border:none; cursor:pointer;
  padding:0;
  flex-shrink:0;
}
.menu-toggle span{
  display:block; width:100%; height:1px; background:#fff;
  transition: transform .4s var(--ease), opacity .4s var(--ease);
}

/* ---------- Menu mobile ---------- */
.nav-mobile{
  position: fixed; inset:0;
  background: var(--pedra-profunda);
  z-index: 1100;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 34px;
  opacity:0;
  visibility:hidden;
  transform: translateY(-12px);
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
}
.nav-mobile.is-open{
  opacity:1; visibility:visible; transform: translateY(0);
}
.nav-mobile a{
  font-family: var(--font-display);
  font-size: 30px;
  color:#fff;
  text-decoration:none;
  letter-spacing:.01em;
}
.nav-mobile .btn{
  margin-top: 10px;
  max-width: 82vw;
  white-space: normal;
  text-align: center;
  font-size: 11px;
}
.nav-mobile-close{
  position:absolute; top:30px; right:var(--gutter);
  width:34px;height:34px;background:none;border:none;cursor:pointer;
}
.nav-mobile-close span{
  position:absolute; top:50%; left:50%; width:26px; height:1px; background:#fff;
}
.nav-mobile-close span:first-child{ transform: translate(-50%,-50%) rotate(45deg); }
.nav-mobile-close span:last-child{ transform: translate(-50%,-50%) rotate(-45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height: 72vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  padding: 160px 0 90px;
  background: var(--pedra-profunda);
}

/* ---------- Slides ---------- */
.hero-slides{ position:absolute; inset:0; }
.hero-slide{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.6s var(--ease), transform 7s linear;
}
.hero-slide.is-active{
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}

.hero-overlay{
  position:absolute; inset:0;
  z-index: 1;
  background:
    linear-gradient(0deg, rgba(36,36,35,.92) 0%, rgba(36,36,35,.55) 42%, rgba(36,36,35,.4) 100%),
    linear-gradient(100deg, rgba(36,36,35,.6) 0%, rgba(36,36,35,.15) 45%, rgba(36,36,35,.5) 100%);
}

.hero-texture{
  position:absolute; inset:0;
  z-index: 1;
  opacity:.05;
  background-image:
    linear-gradient(90deg, #fff 1px, transparent 1px),
    linear-gradient(#fff 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, transparent, #000 40%, #000 100%);
}

.hero-inner{
  position:relative; z-index:2;
  max-width: var(--container);
  margin:0 auto;
  padding: 0 var(--gutter);
  width:100%;
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:end;
  gap: 60px;
}

/* ---------- Setas ---------- */
.hero-arrow{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  z-index:3;
  width:48px; height:48px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(36,36,35,.25);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  backdrop-filter: blur(2px);
  transition: border-color .35s ease, background .35s ease, color .35s ease;
}
.hero-arrow:hover{ border-color: var(--bronze-claro); color: var(--bronze-claro); background: rgba(36,36,35,.5); }
.hero-arrow--prev{ left: var(--gutter); }
.hero-arrow--next{ right: var(--gutter); }

.hero-count{
  position:absolute;
  right: calc(var(--gutter) + 76px);
  bottom: 38px;
  z-index:3;
  color: rgba(255,255,255,.6);
  font-size: 12px;
  letter-spacing:.14em;
  font-family: var(--font-ui);
}
.hero-count-current{ color:#fff; }

.hero-title{
  color:#fff;
  font-weight: 400;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1.08;
  letter-spacing: -.01em;
  max-width: 15ch;
}
.hero-title em{
  font-style: italic;
  font-weight: 400;
  color: var(--bronze-claro);
}

.hero-scroll{
  position:absolute;
  left: var(--gutter); bottom: 36px;
  z-index:3;
  display:flex;
  align-items:center;
  gap: 14px;
  color: rgba(255,255,255,.55);
  font-size: 11px;
  letter-spacing:.2em;
  text-transform: uppercase;
}
.hero-scroll::after{
  content:'';
  width:1px; height: 40px;
  background: linear-gradient(#fff, transparent);
}

/* ==========================================================================
   SOBRE
   ========================================================================== */
.sobre{
  position:relative;
  background: var(--marfim);
  padding: 150px 0 150px;
}

.sobre-grid{
  display:grid;
  grid-template-columns: .82fr 1fr;
  gap: 100px;
  align-items:center;
}

.sobre-imagem{
  position:relative;
  padding: 22px 22px 0 0;
}
.sobre-imagem::before,
.sobre-imagem::after{
  content:'';
  position:absolute;
  width: 60px; height: 60px;
  border-top: 1px solid var(--bronze);
  border-right: 1px solid var(--bronze);
  top:0; right:0;
}
.sobre-imagem::after{
  top:auto; right:auto; bottom:0; left:0;
  border-top:none; border-right:none;
  border-bottom: 1px solid var(--bronze);
  border-left: 1px solid var(--bronze);
}
.sobre-imagem-frame{
  position:relative;
  overflow:hidden;
}
.sobre-imagem-frame img{
  width:100%;
  height:100%;
  object-fit: cover;
  filter: grayscale(12%) contrast(1.03);
  transform: scale(1.01);
  transition: transform 1.2s var(--ease), filter 1.2s var(--ease);
}
.sobre-imagem:hover .sobre-imagem-frame img{
  transform: scale(1.06);
  filter: grayscale(0%) contrast(1.03);
}

.sobre-conteudo h2{
  font-size: clamp(28px, 3.4vw, 42px);
  color: var(--pedra-profunda);
  line-height:1.25;
  margin-bottom: 34px;
  max-width: 24ch;
}
.sobre-conteudo h2 em{ font-style: italic; color: var(--bronze); }

.sobre-texto p{
  color: var(--pedra-escura);
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 22px;
}
.sobre-texto p:first-child{
  font-size: 19px;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.6;
  color: var(--pedra-profunda);
}
.sobre-texto p:last-child{ margin-bottom:0; }

/* ---------- Reveal on scroll ---------- */
.reveal{
  opacity:0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-visible{ opacity:1; transform: translateY(0); }

/* ==========================================================================
   PROCESSO
   ========================================================================== */
.processo{
  background: var(--pedra-profunda);
  padding: 150px 0;
  overflow:hidden;
}

.processo-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 60px;
  margin-bottom: 110px;
}
.processo-head h2{
  font-size: clamp(30px, 3.6vw, 46px);
  line-height:1.25;
  color:#fff;
  max-width: 15ch;
}
.processo-head h2 em{ font-style: italic; color: var(--bronze-claro); }
.processo-head-sub{
  max-width: 260px;
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(255,255,255,.5);
  padding-bottom: 6px;
  flex-shrink:0;
}

.processo-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
}
.processo-item{
  position:relative;
  padding: 0 32px 0 0;
  margin-right: 32px;
  border-left: 1px solid rgba(255,255,255,.14);
  padding-left: 32px;
  transition: transform .5s var(--ease);
}
.processo-item:first-child{ border-left:none; padding-left:0; margin-left:0; }

.processo-num{
  display:block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 46px;
  line-height:1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.22);
  margin-bottom: 34px;
  transition: -webkit-text-stroke-color .5s var(--ease), color .5s var(--ease);
}
.processo-icone{
  width: 34px; height:34px;
  color: var(--bronze-claro);
  margin-bottom: 22px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.processo-item h3{
  font-family: var(--font-ui);
  font-weight:500;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:#fff;
  margin-bottom: 16px;
}
.processo-item p{
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255,255,255,.55);
  max-width: 26ch;
}

.processo-item:hover{ transform: translateY(-8px); }
.processo-item:hover .processo-num{
  -webkit-text-stroke-color: transparent;
  color: var(--bronze);
}
.processo-item:hover .processo-icone{ opacity:1; transform: translateY(0); }

/* ==========================================================================
   NÚMEROS
   ========================================================================== */
.numeros{
  background: var(--pedra-escura);
  padding: 110px 0;
}
.numeros-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 70px;
}
.numero-item{ position:relative; }
.numero-item:not(:last-child)::after{
  content:'';
  position:absolute;
  top:0; bottom:0;
  right:-35px;
  width:1px;
  background: rgba(255,255,255,.14);
}
.numero-icone{
  width: 38px; height:38px;
  color: var(--bronze-claro);
  margin-bottom: 28px;
  display:block;
}
.numero-valor{
  font-family: var(--font-display);
  font-size: clamp(42px, 4.6vw, 62px);
  line-height:1;
  color:#fff;
  margin-bottom: 16px;
}
.numero-label{
  font-family: var(--font-ui);
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bronze-claro);
  margin-bottom: 18px;
}
.numero-texto{
  color: rgba(255,255,255,.62);
  font-size: 15px;
  line-height: 1.75;
  max-width: 30ch;
}

/* ==========================================================================
   PROJETOS
   ========================================================================== */
.projetos{
  background: var(--marfim);
  padding: 130px 0 150px;
  overflow: hidden;
}

.projetos-gallery-wrap{ margin-bottom: 90px; }

.projetos-gallery{
  overflow: hidden;
  padding-bottom: 6px;
  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}

.projetos-track{
  display:flex;
  gap: 20px;
  width: max-content;
  animation: projetos-scroll 46s linear infinite;
}
.projetos-gallery:hover .projetos-track{ animation-play-state: paused; }

@keyframes projetos-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

.projetos-item{
  position:relative;
  flex: 0 0 auto;
  width: 300px;
  height: 300px;
  border-radius: 6px;
  overflow: hidden;
  cursor: zoom-in;
}
.projetos-item img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  display:block;
  filter: grayscale(8%) contrast(1.02);
  transition: transform .5s var(--ease), filter .5s var(--ease);
}
.projetos-item:hover img{ transform: scale(1.06); filter: grayscale(0%) contrast(1.05) brightness(1.04); }

.projetos-intro{
  display:grid;
  grid-template-columns: .78fr 1.3fr;
  gap: 90px;
  align-items:end;
}
.projetos-intro-left{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: 36px;
}
.projetos-cta{ display:inline-flex; align-items:center; gap:12px; }
.projetos-heading{
  font-size: clamp(26px, 2.9vw, 38px);
  line-height: 1.4;
  color: var(--pedra-profunda);
}
.projetos-heading em{ font-style: italic; color: var(--bronze); font-weight:500; }

/* ==========================================================================
   DEPOIMENTOS
   ========================================================================== */
.depoimentos{
  background: var(--marfim-escuro);
  padding: 140px 0;
}

.depoimentos-inner{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 90px;
  align-items:center;
}

.depoimentos-head{
  display:flex;
  align-items:flex-start;
  gap: 30px;
  margin-bottom: 70px;
}
.depoimentos-spark{
  color: var(--bronze);
  flex-shrink:0;
  margin-top: 4px;
}
.depoimentos-head h2{
  font-size: clamp(28px, 3.4vw, 42px);
  color: var(--pedra-profunda);
  line-height:1.25;
}
.depoimentos-head h2 em{ font-style: italic; color: var(--bronze); }

.depoimentos-slider{
  margin-left: 64px;
}

.depoimentos-track{ position:relative; min-height: 220px; }

.depoimento-slide{
  margin:0;
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), visibility .6s;
}
.depoimento-slide.is-active{
  position:relative;
  opacity:1;
  visibility:visible;
  transform: translateY(0);
}
.depoimento-slide p{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.55;
  color: var(--pedra-profunda);
  margin-bottom: 30px;
}
.depoimento-slide footer{
  display:flex;
  flex-direction: column;
  gap: 4px;
}
.depoimento-nome{
  font-family: var(--font-ui);
  font-weight:500;
  font-size: 14px;
  letter-spacing:.03em;
  color: var(--pedra-profunda);
}
.depoimento-cargo{
  font-family: var(--font-ui);
  font-size: 12.5px;
  letter-spacing:.1em;
  text-transform: uppercase;
  color: var(--bronze);
}

.depoimentos-nav{
  display:flex;
  gap: 14px;
  margin-top: 50px;
}
.depoimentos-arrow{
  width:48px; height:48px;
  border-radius:50%;
  border: 1px solid rgba(36,36,35,.2);
  background: transparent;
  color: var(--pedra-profunda);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: border-color .35s ease, background .35s ease, color .35s ease;
}
.depoimentos-arrow:hover{ border-color: var(--bronze); background: var(--bronze); color:#fff; }

/* ---------- Vídeo de depoimento ---------- */
.depoimentos-video-frame{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio: 3 / 4;
  border: none;
  padding:0;
  border-radius: 200px 24px 200px 24px;
  overflow:hidden;
  cursor: pointer;
  background: var(--pedra-escura);
  box-shadow: 0 30px 60px rgba(36,36,35,.18);
  transition: border-radius .6s var(--ease), transform .5s var(--ease);
}
.depoimentos-video-frame:hover{ transform: translateY(-6px); }

.depoimentos-video-preview{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
}
.depoimentos-video-overlay{
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(36,36,35,.55) 0%, rgba(36,36,35,.05) 45%, rgba(36,36,35,.25) 100%);
  transition: background .4s ease;
}
.depoimentos-video-frame:hover .depoimentos-video-overlay{ background: rgba(36,36,35,.35); }

.depoimentos-video-play{
  position:absolute;
  top:50%; left:50%;
  transform: translate(-50%,-50%);
  width: 78px; height:78px;
  border-radius:50%;
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  transition: background .35s ease, transform .35s var(--ease), border-color .35s ease;
}
.depoimentos-video-play svg{ margin-left:4px; }
.depoimentos-video-frame:hover .depoimentos-video-play{
  background: var(--bronze);
  border-color: var(--bronze);
  transform: translate(-50%,-50%) scale(1.08);
}

/* ==========================================================================
   VÍDEO EM DESTAQUE (sem texto, abaixo dos Depoimentos)
   ========================================================================== */
.video-destaque{
  background: var(--marfim-escuro);
  padding: 0 0 150px;
}
.video-destaque-frame{
  position:relative;
  display:block;
  width: 100%;
  height: min(74vh, 680px);
  min-height: 360px;
  border: none;
  padding:0;
  overflow:hidden;
  cursor: pointer;
  background: var(--pedra-escura);
}

.video-destaque-preview{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
}
.video-destaque-overlay{
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(36,36,35,.5) 0%, rgba(36,36,35,.02) 45%, rgba(36,36,35,.2) 100%);
  transition: background .4s ease;
}
.video-destaque-frame:hover .video-destaque-overlay{ background: rgba(36,36,35,.32); }

.video-destaque-play{
  position:absolute;
  top:50%; left:50%;
  transform: translate(-50%,-50%);
  width: 84px; height:84px;
  border-radius:50%;
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  transition: background .35s ease, transform .35s var(--ease), border-color .35s ease;
}
.video-destaque-play svg{ margin-left:4px; }
.video-destaque-frame:hover .video-destaque-play{
  background: var(--bronze);
  border-color: var(--bronze);
  transform: translate(-50%,-50%) scale(1.08);
}

/* ---------- Modal de vídeo ampliado ---------- */
.video-lightbox{
  position: fixed;
  inset:0;
  z-index: 2100;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(20,20,19,.96);
  opacity:0;
  visibility:hidden;
  transition: opacity .45s var(--ease), visibility .45s;
}
.video-lightbox.is-open{ opacity:1; visibility:visible; }

.video-lightbox-frame{
  width: min(920px, 88vw);
  transform: scale(.96);
  opacity:0;
  transition: transform .45s var(--ease), opacity .45s var(--ease);
}
.video-lightbox.is-open .video-lightbox-frame{ transform: scale(1); opacity:1; }

.video-lightbox-frame video{
  width:100%;
  max-height: 82vh;
  display:block;
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  background:#000;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{
  background: var(--marfim);
  padding: 140px 0;
}
.faq-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 46px;
  align-items: stretch;
}

.faq-card{
  background: var(--branco);
  border: 1px solid var(--marfim-escuro);
  border-radius: 4px;
  padding: 64px 60px;
}
.faq-card h2{
  font-size: clamp(28px, 3vw, 38px);
  color: var(--pedra-profunda);
  margin-bottom: 40px;
}
.faq-card h2 em{ font-style: italic; color: var(--bronze); }

.faq-list{ display:flex; flex-direction:column; gap: 14px; }

.faq-item{
  border: 1px solid var(--marfim-escuro);
  border-radius: 40px;
  overflow:hidden;
  transition: border-color .35s ease, background .35s ease;
}
.faq-item.is-open{ border-color: var(--bronze); background: var(--marfim); }

.faq-question{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 20px;
  background:none;
  border:none;
  cursor:pointer;
  text-align:left;
  padding: 20px 28px;
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--pedra-profunda);
}

.faq-icon{
  position:relative;
  flex-shrink:0;
  width: 20px; height:20px;
}
.faq-icon::before,
.faq-icon::after{
  content:'';
  position:absolute;
  top:50%; left:50%;
  background: var(--bronze);
  transform: translate(-50%,-50%);
  transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.faq-icon::before{ width:14px; height:1px; }
.faq-icon::after{ width:1px; height:14px; }
.faq-item.is-open .faq-icon::after{ transform: translate(-50%,-50%) rotate(90deg); opacity:0; }

.faq-answer{
  display:grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease);
}
.faq-answer p{
  overflow:hidden;
  min-height:0;
  padding: 0 28px;
  color: var(--pedra-escura);
  font-size: 14.5px;
  line-height: 1.8;
}
.faq-item.is-open .faq-answer{ grid-template-rows: 1fr; }
.faq-item.is-open .faq-answer p{ padding: 0 28px 24px; }

.faq-imagem-frame{
  position:relative;
  height:100%;
  min-height: 420px;
  overflow:hidden;
  border-radius: 4px;
}
.faq-imagem-frame img{
  width:100%; height:100%;
  object-fit: cover;
  object-position: center 18%;
  filter: grayscale(8%) contrast(1.02);
  transform: scale(1.01);
  transition: transform 1.2s var(--ease), filter 1.2s var(--ease);
}
.faq-imagem:hover .faq-imagem-frame img{
  transform: scale(1.05);
  filter: grayscale(0%) contrast(1.02);
}

/* ==========================================================================
   RODAPÉ
   ========================================================================== */
.footer{
  background: var(--pedra-profunda);
  color:#fff;
  padding-top: 130px;
}

.footer-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap: wrap;
  gap: 50px;
  padding-bottom: 90px;
}
.footer-cta{ max-width: 640px; }
.footer-heading{
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 1.18;
  color:#fff;
  margin-bottom: 40px;
}
.footer-heading em{ font-style: italic; font-weight:400; color: var(--bronze-claro); }

.footer-social{
  display:flex;
  align-items:center;
  gap: 16px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.footer-social-icon{
  width: 44px; height:44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  transition: border-color .35s ease, color .35s ease, background .35s ease;
}
.footer-social-icon:hover{ border-color: var(--bronze-claro); color: var(--pedra-profunda); background: var(--bronze-claro); }

.footer-divider{ height:1px; background: rgba(255,255,255,.14); }

.footer-contact{
  display:flex;
  flex-wrap: wrap;
  gap: 30px 56px;
  padding: 48px 0;
}
.footer-contact-item{
  display:flex;
  align-items:center;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: 14.5px;
  color: rgba(255,255,255,.82);
  text-decoration:none;
  transition: color .3s ease;
}
a.footer-contact-item:hover{ color: var(--bronze-claro); }
.footer-contact-item svg{ width:18px; height:18px; color: var(--bronze-claro); flex-shrink:0; }

.footer-bottom{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap: wrap;
  gap: 26px;
  padding: 54px 0;
}
.footer-logo{ height: 34px; width:auto; }

.footer-bottom-bar{
  padding: 24px 0 34px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer-bottom-bar p{
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: .03em;
  color: rgba(255,255,255,.38);
}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.projetos-item{ cursor: zoom-in; }

.lightbox{
  position: fixed;
  inset:0;
  z-index: 2000;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(20,20,19,.96);
  opacity:0;
  visibility:hidden;
  transition: opacity .45s var(--ease), visibility .45s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }

.lightbox-figure{
  margin:0;
  max-width: 88vw;
  max-height: 86vh;
  transform: scale(.96);
  opacity:0;
  transition: transform .45s var(--ease), opacity .45s var(--ease);
}
.lightbox.is-open .lightbox-figure{ transform: scale(1); opacity:1; }

.lightbox-figure img{
  max-width: 88vw;
  max-height: 86vh;
  width:auto;
  height:auto;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}

.lightbox-counter{
  position:absolute;
  bottom: 30px;
  left:50%;
  transform: translateX(-50%);
  padding: 9px 20px;
  border-radius: 30px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.85);
  font-family: var(--font-ui);
  font-size: 12.5px;
  letter-spacing:.08em;
}

.lightbox-close{
  position:absolute;
  top: 26px; right: var(--gutter);
  width: 44px; height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.05);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: border-color .3s ease, background .3s ease, color .3s ease, transform .3s ease;
}
.lightbox-close:hover{ border-color: var(--bronze-claro); color: var(--bronze-claro); transform: rotate(90deg); }

.lightbox-arrow{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width: 52px; height:52px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.04);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: border-color .3s ease, background .3s ease, color .3s ease;
}
.lightbox-arrow:hover{ border-color: var(--bronze-claro); color: var(--bronze-claro); background: rgba(255,255,255,.08); }
.lightbox-arrow--prev{ left: var(--gutter); }
.lightbox-arrow--next{ right: var(--gutter); }

@media (max-width: 640px){
  .lightbox-close{ top:18px; right:18px; width:38px; height:38px; }
  .lightbox-arrow{ width:42px; height:42px; }
  .lightbox-arrow--prev{ left:12px; }
  .lightbox-arrow--next{ right:12px; }
  .lightbox-figure, .lightbox-figure img{ max-width:94vw; max-height:78vh; }
}

/* ==========================================================================
   BOTÃO FLUTUANTE — WHATSAPP
   ========================================================================== */
.whatsapp-float{
  position: fixed;
  right: 28px; bottom: 28px;
  z-index: 500;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--bronze-claro);
  color: var(--pedra-profunda);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 30px rgba(36,36,35,.28);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s ease;
}
.whatsapp-float:hover{ background: var(--bronze); transform: scale(1.08); box-shadow: 0 14px 36px rgba(36,36,35,.35); }
.whatsapp-float svg{ width: 29px; height: 29px; position:relative; z-index:1; }

.whatsapp-float-ping{
  position:absolute; inset:0;
  border-radius:50%;
  background: var(--bronze-claro);
  opacity:.55;
  animation: whatsapp-pulse 2.4s ease-out infinite;
}
@keyframes whatsapp-pulse{
  0%{ transform:scale(1); opacity:.5; }
  100%{ transform:scale(1.8); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
  .hero-slide{ transition: opacity 1.6s var(--ease); transform:none !important; }
  .whatsapp-float-ping{ display:none; }
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 1140px){
  .nav-desktop, .header-cta{ display:none; }
  .menu-toggle{ display:flex; }

  .hero-inner{ grid-template-columns: 1fr; }
  .hero-arrow{ width:40px; height:40px; }

  .sobre-grid{ grid-template-columns: 1fr; gap:60px; }
  .sobre-imagem{ max-width: 420px; margin: 0 auto; padding: 18px 18px 0 0; }

  .processo-head{ flex-direction:column; align-items:flex-start; gap:26px; }
  .processo-grid{ grid-template-columns: repeat(2, 1fr); row-gap: 56px; }
  .processo-item{ border-left:1px solid rgba(255,255,255,.14); padding-left:28px; margin-right:0; }
  .processo-item:nth-child(odd){ border-left:none; padding-left:0; }

  .projetos-intro{ grid-template-columns: 1fr; gap:44px; align-items:start; }
  .projetos-item{ width: 220px; height: 220px; }

  .depoimentos-inner{ grid-template-columns: 1fr; gap: 60px; }
  .depoimentos-video{ order:-1; }
  .depoimentos-video-frame{ max-width: 380px; margin:0 auto; aspect-ratio: 4/3; border-radius: 100px 20px 100px 20px; }
  .depoimentos-slider{ margin-left:0; max-width:none; }

  .video-destaque{ padding: 0 0 110px; }
  .video-destaque-frame{ height: min(60vh, 480px); min-height: 300px; }

  .faq-grid{ grid-template-columns: 1fr; }
  .faq-card{ padding: 48px 32px; order:2; }
  .faq-imagem-frame{ min-height: 320px; }
}

@media (max-width: 780px){
  .numeros-grid{ grid-template-columns: 1fr; gap: 56px; }
  .numero-item:not(:last-child)::after{
    right:auto; left:0; bottom:-28px; top:auto;
    width:40px; height:1px;
  }
}

@media (max-width: 640px){
  :root{ --gutter: 24px; }
  .hero{ padding-top: 130px; }
  .hero-title{ font-size: clamp(34px, 10vw, 52px); }
  .hero-arrow{ display:none; }
  .hero-count{ bottom: 28px; }
  .hero-scroll{ display:none; }
  .sobre{ padding: 100px 0; }
  .sobre-texto p:first-child{ font-size:17px; }

  .processo{ padding: 90px 0; }
  .processo-grid{ grid-template-columns: 1fr; row-gap: 44px; }
  .processo-item{ border-left:none !important; padding-left:0 !important; }

  .numeros{ padding: 90px 0; }
  .projetos{ padding: 100px 0 110px; }
  .projetos-item{ width: 160px; height: 160px; }
  .projetos-track{ gap:14px; }

  .depoimentos{ padding: 100px 0; }
  .depoimentos-head{ gap:18px; margin-bottom:46px; }
  .depoimento-slide p{ font-size: 20px; }
  .depoimentos-video-frame{ max-width: 280px; aspect-ratio: 3/4; border-radius: 80px 18px 80px 18px; }
  .depoimentos-video-play{ width:60px; height:60px; }

  .video-destaque{ padding: 0 0 90px; }
  .video-destaque-frame{ height: min(46vh, 340px); min-height: 240px; }
  .video-destaque-play{ width:60px; height:60px; }

  .faq{ padding: 100px 0; }
  .faq-card{ padding: 36px 22px; }
  .faq-question{ padding: 16px 20px; font-size:14px; }

  .footer{ padding-top: 90px; }
  .footer-top{ padding-bottom: 60px; }
  .footer-social{ order: -1; }
  .footer-bottom{ padding: 40px 0; }
  .whatsapp-float{ right:18px; bottom:18px; width:54px; height:54px; }
  .whatsapp-float svg{ width:25px; height:25px; }
}
