/* ==========================================================
   Arquiteto em Itabira | Fernando Rodrigues
   Tipografia: títulos = Aminute (local) | texto = Montserrat
   Tamanhos de fonte: edite as variáveis --fs-* no :root
   (medidas tiradas do layout original de 1569px de largura;
   no mobile tudo é reduzido pela variável --k)
   Imagens: tags <img> no index.html (pasta assets/img)
   ========================================================== */
@font-face {
  font-family: 'Aminute';
  src: url('../assets/fonts/Aminute.ttf') format('truetype');
  font-display: swap;
}

:root {
    --fs-label:calc(12px*var(--k));
  --fs-h1:calc(40px*var(--k));
  --fs-hero-p:calc(18px*var(--k));
  --fs-btn:calc(12px*var(--k));
  --fs-h2:calc(28px*var(--k));
  --fs-lead:calc(24px*var(--k));
  --fs-p:calc(18px*var(--k));
  --fs-p-sm:calc(17px*var(--k));
  --fs-small:calc(15px*var(--k));
  --fs-h3:calc(26px*var(--k));
  --fs-note:calc(13px*var(--k));
  --fs-step-num:calc(46px*var(--k));
  --fs-step-h3:calc(22px*var(--k));
  --fs-step-p:calc(15px*var(--k));
  --fs-ph-p:calc(16px*var(--k));
  --fs-cap-h3:calc(24px*var(--k));
  --fs-cap-small:calc(11px*var(--k));
  --fs-faq-q:calc(24px*var(--k));
  --fs-faq-a:calc(14px*var(--k));
  --fs-cta-h2:calc(40px*var(--k));
  --fs-cta-p:calc(17px*var(--k));
  --bg:#06131b;
  --bg2:#0a1c27;
  --card:#0c2230;
  --line:rgba(201,169,106,.18);
  --gold:#cfb07a;
  --gold2:#a8864f;
  --txt:#c9d1d6;
  --white:#f4f1ea;
  --k:1;
  --display:'Aminute','Montserrat',sans-serif;
  --body:'Montserrat',Arial,sans-serif
}

* {
  box-sizing:border-box;
  margin:0;
  padding:0
}

html {
  scroll-behavior:smooth
}

body {
  background:var(--bg);
  color:var(--txt);
  font-family:var(--body);
  font-weight:300;
  line-height:1.65;
  font-size:15px
}

img {
  max-width:100%;
  display:block
}

.wrap {
  max-width:1180px;
  margin:0 auto;
  padding:0 24px
}

.about,.services,.process,.portfolio .wrap>* {
  max-width:1047px;
  margin-left:auto;
  margin-right:auto
}

.label {
  font-size:var(--fs-label);
  letter-spacing:.35em;
  text-transform:uppercase;
  color:var(--txt);
  opacity:.85;
  margin-bottom:10px
}

h1,h2,h3 {
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  line-height:1.15
}

.gold {
  color:var(--gold)
}

h2.title {
  font-size:var(--fs-h2);
  color:var(--gold);
  text-align:center;
  margin-bottom:40px
}

.btn {
  display:inline-block;
  padding:13px 26px;
  font-size:var(--fs-btn);
  letter-spacing:.2em;
  text-transform:uppercase;
  text-decoration:none;
  font-weight:500;
  border:1px solid var(--gold);
  transition:.25s
}

.btn-gold {
  background:linear-gradient(135deg,#d8bd8a,#a8864f);
  color:#0a1a24;
  border-color:transparent
}

.btn-gold:hover {
  filter:brightness(1.12);
  transform:translateY(-2px)
}

.btn-line {
  color:var(--white);
  border-color:rgba(255,255,255,.35)
}

.btn-line:hover {
  border-color:var(--gold);
  color:var(--gold)
}

/* hero */.hero {
  position:relative;
  min-height:767px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  padding:200px 24px 110px
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
  object-position: center top;
}

.hero:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(6,19,27,.4),var(--bg) 96%)
}

.hero .in {
  position:relative;
  z-index:1;
  max-width:760px
}

.hero h1 {
  font-size:var(--fs-h1);
  color:var(--white);
  letter-spacing:.03em;
  margin-bottom:22px
}

.hero p {
  max-width:560px;
  margin:0 auto 32px;
  color:#aab6bd;
  font-size:var(--fs-hero-p)
}

.hero .btns {
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap
}

/* proposta */.prop-track {
  height:calc(653px + 190vh);
  margin-bottom:110px;
  max-width:1178px;
  margin-left:auto;
  margin-right:auto
}

.prop {
  position:sticky;
  top:24px;
  background:var(--bg2);
  border:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 559px;
  gap:40px;
  padding:26px 26px 26px 70px;
  align-items:center;
  height:653px
}

.prop h2 {
  font-size:var(--fs-h2);
  color:var(--gold);
  margin-bottom:18px
}

.prop h3 {
  font-family:var(--body);
  text-transform:none;
  font-weight:500;
  font-size:var(--fs-lead);
  color:var(--white);
  margin-bottom:16px;
  line-height:1.35
}

.prop p {
  font-size:var(--fs-small);
  margin-bottom:14px
}

.prop .box {
  background:rgba(255,255,255,.06);
  padding:14px 18px;
  font-size:var(--fs-small);
  color:var(--white);
  margin-top:22px
}

.pimgs {
  position:relative;
  width:559px;
  height:600px;
  overflow:hidden
}

.pimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .9s ease, transform 1.4s ease;
}

.pimg.on {
  opacity:1;
  transform:scale(1)
}

.dots {
  position:absolute;
  left:0;
  right:0;
  bottom:16px;
  display:flex;
  gap:8px;
  justify-content:center;
  z-index:2
}

.dots i {
  width:22px;
  height:2px;
  background:rgba(255,255,255,.35);
  transition:.3s
}

.dots i.on {
  background:var(--gold);
  width:34px
}

/* sobre */.about {
  display:grid;
  grid-template-columns:485px 1fr;
  gap:46px;
  align-items:center;
  margin-bottom:110px
}

.about img {
  width:485px;
  height:662px;
  object-fit:cover
}

.about h2 {
  font-size:var(--fs-h2);
  color:var(--gold);
  margin-bottom:22px
}

.about p {
  font-size:var(--fs-p);
  margin-bottom:16px
}

.about .fin {
  font-size:var(--fs-lead);
  font-weight:500;
  color:var(--white);
  line-height:1.4;
  margin-top:26px
}

/* serviços */.services {
  margin-bottom:110px;
  text-align:center
}

.svc {
  position:sticky;
  top:calc(24px + var(--n)*34px);
  height:488px;
  text-align:left;
  margin-bottom:60px;
  border:1px solid var(--line);
  background-color:var(--card);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  box-shadow:0 -14px 30px rgba(0,0,0,.4)
}

.svc:last-child {
  margin-bottom:0
}

.svc:before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(6,19,27,.15) 0%,rgba(6,19,27,.35) 45%,rgba(6,19,27,.78) 100%)}

.svc .tx {
  position:relative;
  padding:34px 38px;
  max-width:640px
}

.svc h3 {
  font-size:var(--fs-h3);
  color:var(--gold);
  margin-bottom:12px
}

.svc p {
  font-size:var(--fs-p-sm);
  margin-bottom:12px;
  color:#d3d9dd
}

.svc strong {
  font-weight:600;
  color:var(--white);
  font-size:var(--fs-p-sm)
}

.svc .note {
  border-left:3px solid var(--gold);
  padding-left:12px;
  font-size:var(--fs-note);
  opacity:.85
}

/* processo */.process {
  margin-bottom:110px;
  text-align:center
}

.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}

.step {
  background:var(--bg2);
  border:1px solid var(--line);
  padding:38px 28px;
  min-height:326px
}

.step b {
  display:block;
  font-family:var(--display);
  font-weight:400;
  font-size:var(--fs-step-num);
  color:var(--gold);
  margin-bottom:8px
}

.step h3 {
  font-family:var(--display);
  font-weight:400;
  font-size:var(--fs-step-h3);
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--white);
  margin-bottom:10px
}

.step p {
  font-size:var(--fs-step-p);
  color:#a9b4bb
}

/* portfolio */.portfolio {
  background:var(--bg2);
  padding:80px 0;
  margin-bottom:100px
}

.ph {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:34px
}

.ph h2 {
  font-size:var(--fs-h2);
  color:var(--gold);
  margin-bottom:16px
}

.ph strong {
  display:block;
  color:var(--white);
  font-weight:600;
  font-size:var(--fs-p-sm);
  margin-bottom:8px
}

.ph p {
  font-size:var(--fs-ph-p)
}

.arrows {
  display:flex;
  gap:8px
}

.arrows span {
  width:26px;
  height:26px;
  border:1px solid var(--gold);
  color:var(--gold);
  display:grid;
  place-items:center;
  font-size:13px;
  cursor:pointer
}

.gal {
  overflow:hidden
}

.gtrack {
  display:flex;
  gap:16px;
  transition:transform .9s cubic-bezier(.65,0,.35,1)
}

.gal figure {
  position:relative;
  flex:0 0 calc(100% - 274px);
  height:457px;
  overflow:hidden
}

.gal figcaption {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:22px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  background:linear-gradient(transparent,rgba(6,19,27,.9))
}

.gal figcaption h3 {
  font-size:var(--fs-cap-h3);
  color:var(--gold)
}

.gal figcaption small {
  display:block;
  font-family:var(--body);
  font-size:var(--fs-cap-small);
  letter-spacing:.2em;
  color:var(--white);
  margin-top:4px
}

.gal .btn {
  padding:8px 16px;
  font-size:var(--fs-cap-small);
  color:var(--white);
  border-color:rgba(255,255,255,.4)
}

/* faq */.faq {
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:60px;
  margin-bottom:110px
}

.faq h2 {
  font-size:var(--fs-lead);
  color:var(--white);
  margin-top:6px
}

.faq h2 span {
  color:var(--gold)
}

details {
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:14px 0
}

summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  gap:16px;
  color:var(--white);
  font-size:var(--fs-faq-q);
  font-weight:400
}

summary::-webkit-details-marker {
  display:none
}

summary:after {
  content:"⌄";
  color:var(--txt);
  transition:.25s
}

details[open] summary:after {
  transform:rotate(180deg)
}

details p {
  font-size:var(--fs-faq-a);
  margin-top:10px;
  max-width:460px;
  color:#a9b4bb
}

/* cta */.cta {
  position:relative;
  padding:100px 0 90px
}

.cta:before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(6,19,27,.8),rgba(6,19,27,.4) 60%,rgba(6,19,27,.7))
}

.cta .wrap {
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:center
}

.cta h2 {
  font-size:var(--fs-cta-h2);
  color:var(--gold)
}

.cta p {
  font-size:var(--fs-cta-p);
  margin-bottom:12px
}

.cta strong {
  display:block;
  color:var(--white);
  font-weight:600;
  margin-bottom:18px
}

footer {
  height:18px;
  background:linear-gradient(90deg,#d9cbb0,#e8dfcc)
}

/* ==========================================================
   TÍTULOS E SUBTÍTULOS — espaçamentos e cores
   Títulos em branco; a palavra-chave em dourado usa
   <span class="gold">palavra</span> no HTML.
   ========================================================== */
:root {
  --space-label: 14px;          /* rótulo (SERVIÇOS, PROCESSO...) -> título */
  --space-title: 24px;          /* título à esquerda -> texto */
  --space-title-center: 56px;   /* título centralizado -> conteúdo */
  --space-sub: 18px;            /* subtítulo -> texto */
}
h1, h2, h3 { letter-spacing: .04em; text-wrap: balance; }
h1, h2 { line-height: 1.22; }
.label { margin-bottom: var(--space-label); line-height: 1.4; }
.hero h1 { line-height: 1.2; margin-bottom: 28px; }
.hero p { line-height: 1.7; }
h2.title { color: var(--white); margin-bottom: var(--space-title-center); }
.prop h2, .about h2, .ph h2, .cta h2 { color: var(--white); margin-bottom: var(--space-title); }
.prop h3 { margin-bottom: var(--space-sub); line-height: 1.35; }
.about .fin { margin-top: 32px; }
.svc h3 { margin-bottom: 16px; line-height: 1.25; }
.svc p { line-height: 1.65; margin-bottom: 14px; }
.step b { margin-bottom: 14px; line-height: 1; }
.step h3 { margin-bottom: 14px; line-height: 1.3; }
.ph strong { margin-bottom: 12px; }
.cta strong { margin-bottom: 24px; }

/* ---------- Imagens (tags <img> no index.html) ---------- */
.svc__img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.svc:before { z-index: 1; }
.svc .tx { z-index: 2; }

.gal figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gal figcaption { z-index: 1; }

.cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta:before { z-index: 1; }
.cta .wrap { z-index: 2; }

@media (max-width:820px) {
  :root {
    --k:.78;
    --space-title-center:36px;
    --space-title:18px
  }
  .wrap {
    padding:0 16px
  }
  .hero {
    min-height:560px;
    padding:150px 16px 80px
  }
  .prop-track,.about,.services,.process {
    margin-bottom:70px
  }
  .prop-track {
    height:calc(100vh + 190vh)
  }
  .prop {
    top:12px;
    height:calc(100vh - 24px);
    max-height:720px;
    grid-template-columns:1fr;
    grid-template-rows:1fr auto;
    gap:16px;
    padding:16px;
    overflow:hidden
  }
  .pimgs {
    order:-1;
    width:100%;
    height:100%;
    min-height:180px
  }
  .about,.faq,.cta .wrap {
    grid-template-columns:1fr;
    gap:24px
  }
  .about img {
    width:100%;
    height:auto;
    aspect-ratio:485/662
  }
  .steps {
    grid-template-columns:1fr 1fr
  }
  .step {
    min-height:0;
    padding:22px 18px
  }
  .svc {
    top:calc(12px + var(--n)*26px);
    height:400px
  }
  .svc .tx {
    padding:20px
  }
  .gal figure {
    flex-basis:86%;
    height:300px
  }
  .portfolio {
    padding:60px 0
  }
}

@media (max-width:520px) {
  .steps {
    grid-template-columns:1fr
  }
}


@media (max-width:820px) {
  .svc__img { object-position: 60% center; }
}