/* =========================================================
   ENGESCAV — Engenharia e Construções Ltda.
   Opção 2 · layout em preto, branco e cinza · fotos coloridas
   ========================================================= */

:root {
  --black: #0b0b0b;
  --g900: #1d1d1d;
  --g800: #2e2e2e;
  --g600: #5c5c5c;
  --g500: #777777;
  --g400: #9a9a9a;
  --g300: #c9c9c9;
  --g200: #e2e2e2;
  --g100: #efefef;
  --g50: #f7f7f7;
  --white: #ffffff;

  --head: "Sora", "Segoe UI", sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1240px;
  --header: 84px;
  --radius: 4px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0; font-family: var(--body); font-size: 17px; line-height: 1.75;
  color: var(--g800); background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
::selection { background: var(--black); color: var(--white); }
.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }

h1, h2, h3 { font-family: var(--head); color: var(--black); margin: 0; letter-spacing: -.035em; line-height: 1.02; font-weight: 700; }
.dark h1, .dark h2, .dark h3 { color: var(--white); }

section { padding: clamp(80px, 10vw, 150px) 0; position: relative; }
.dark { background: var(--black); color: var(--g300); }
.soft { background: var(--g50); }

/* título de seção com fio */
.heading { display: flex; align-items: center; gap: 22px; margin-bottom: clamp(40px, 5vw, 70px); }
.heading h2 { font-size: clamp(38px, 5.4vw, 76px); }
.heading::after { content: ""; flex: 1; height: 1px; background: var(--g200); transform-origin: left; transform: scaleX(0); transition: transform 1.4s var(--ease) .2s; }
.dark .heading::after { background: var(--g800); }
.heading.on::after { transform: scaleX(1); }
.heading.center { justify-content: center; text-align: center; }
.heading.center::after { display: none; }

/* =========================================================
   CABEÇALHO
   ========================================================= */
.header {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header);
  display: flex; align-items: center; background: var(--white);
  border-bottom: 1px solid var(--g200);
  transition: height .35s var(--ease), box-shadow .35s;
}
.header.scrolled { height: 68px; box-shadow: 0 8px 30px rgba(0,0,0,.06); }
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo img { height: 36px; width: auto; filter: grayscale(1) contrast(1.2); mix-blend-mode: multiply; }
.menu { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; align-items: center; }
.menu > li { position: relative; }
.menu a {
  display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px;
  font-size: 14.5px; font-weight: 500; color: var(--g600); transition: color .2s, background .2s;
}
.menu a:hover { color: var(--black); background: var(--g100); }
.menu a.active { color: var(--white); background: var(--black); }
.menu .caret { width: 10px; height: 10px; transition: transform .3s; }
.has-sub:hover .caret, .has-sub:focus-within .caret { transform: rotate(180deg); }
.sub {
  position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0; min-width: 230px;
  list-style: none; margin: 0; padding: 8px; background: var(--white); border: 1px solid var(--g200); border-radius: 10px;
  box-shadow: 0 20px 40px rgba(0,0,0,.08);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: .3s var(--ease);
}
.sub::before { content: ""; position: absolute; inset: -12px 0 auto; height: 12px; }
.has-sub:hover .sub, .has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: none; }
.sub a { border-radius: 6px; }
.burger { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--g300); background: var(--white); cursor: pointer; align-items: center; justify-content: center; }
.burger span, .burger span::before, .burger span::after { display: block; width: 18px; height: 1.5px; background: var(--black); position: relative; transition: .3s; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.nav-open .burger span { background: transparent; }
.nav-open .burger span::before { top: 0; transform: rotate(45deg); }
.nav-open .burger span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1000px) {
  .burger { display: inline-flex; }
  .nav {
    position: fixed; top: var(--header); left: 0; right: 0; bottom: 0; background: var(--white);
    padding: 24px 16px 40px; overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-10px); transition: .35s var(--ease);
  }
  .header.scrolled .nav { top: 68px; }
  .nav-open .nav { opacity: 1; visibility: visible; transform: none; }
  .menu { flex-direction: column; align-items: stretch; gap: 0; }
  .menu a { font-family: var(--head); font-size: 22px; font-weight: 600; color: var(--black); padding: 16px 8px; border-radius: 0; border-bottom: 1px solid var(--g100); }
  .menu a.active { background: none; color: var(--black); }
  .menu .caret { display: none; }
  .sub { position: static; translate: none; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; padding: 0 0 0 16px; }
  .sub a { font-size: 17px; color: var(--g600); }
  body.nav-open { overflow: hidden; }
}

/* =========================================================
   ABERTURA COM SLIDES
   ========================================================= */
.hero { padding: var(--header) 0 0; background: var(--g50); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: calc(100svh - var(--header)); }
.hero-text {
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: clamp(40px, 6vw, 90px) clamp(16px, 4vw, 64px) clamp(32px, 4vw, 56px) max(16px, calc((100vw - var(--wrap)) / 2));
}
.hero-name { font-size: clamp(52px, 7.4vw, 118px); line-height: .9; letter-spacing: -.055em; }
.hero-name span { display: block; overflow: hidden; }
.hero-name span i { display: block; font-style: normal; transform: translateY(100%); animation: up 1.1s var(--ease) forwards; }
.hero-name span:nth-child(2) i { animation-delay: .12s; }
.hero-sub { margin-top: 26px; font-size: 14px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--g500); opacity: 0; animation: fade 1s .5s forwards; }
@keyframes up { to { transform: none; } }
@keyframes fade { to { opacity: 1; } }

.slide-ctrl { display: flex; align-items: center; gap: 22px; opacity: 0; animation: fade 1s .7s forwards; }
.slide-btn {
  width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--g300); background: var(--white); color: var(--black);
  display: grid; place-items: center; cursor: pointer; transition: background .25s, color .25s, border-color .25s;
}
.slide-btn:hover { background: var(--black); color: var(--white); border-color: var(--black); }
.slide-btn svg { width: 20px; height: 20px; }
.bars { display: flex; gap: 6px; flex: 1; max-width: 260px; }
.bars button { flex: 1; height: 3px; padding: 0; border: 0; background: var(--g300); cursor: pointer; position: relative; overflow: hidden; }
.bars button::after { content: ""; position: absolute; inset: 0; background: var(--black); transform: scaleX(0); transform-origin: left; }
.bars button.done::after { transform: scaleX(1); }
.bars button.now::after { animation: bar var(--dur, 5.5s) linear forwards; }
@keyframes bar { to { transform: scaleX(1); } }

.slides { position: relative; overflow: hidden; background: var(--g200); }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease); }
.slide.now { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.slide.now img { animation: zoom 7s linear forwards; }
@keyframes zoom { from { transform: scale(1.12); } to { transform: scale(1.02); } }
.scroll-down {
  position: absolute; left: 0; bottom: 0; z-index: 2; width: 84px; height: 84px; background: var(--black); color: var(--white);
  display: grid; place-items: center;
}
.scroll-down svg { width: 22px; height: 22px; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(5px); } }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-text { padding: 48px 16px 32px; }
  .slides { height: 64vw; min-height: 300px; }
  .scroll-down { width: 64px; height: 64px; }
}

/* =========================================================
   QUEM SOMOS
   ========================================================= */
.intro { max-width: 900px; margin: 0 auto; text-align: center; }
.intro p { font-family: var(--head); font-size: clamp(21px, 2.3vw, 30px); line-height: 1.45; color: var(--black); letter-spacing: -.02em; font-weight: 400; }
.trio { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: 16px; margin: clamp(56px, 7vw, 96px) 0; }
.trio figure { margin: 0; overflow: hidden; border-radius: var(--radius); height: clamp(220px, 30vw, 420px); }
.trio figure:nth-child(2) { margin-top: clamp(30px, 5vw, 70px); }
.trio img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.trio figure:hover img { transform: scale(1.05); }
.cols { columns: 2; column-gap: 64px; max-width: 1080px; margin: 0 auto; color: var(--g600); }
.cols p { break-inside: avoid; }
@media (max-width: 760px) {
  .trio { grid-template-columns: 1fr 1fr; }
  .trio figure:nth-child(2) { margin-top: 0; }
  .trio figure:nth-child(3) { grid-column: span 2; }
  .cols { columns: 1; }
}

/* =========================================================
   SUSTENTABILIDADE
   ========================================================= */
.lead-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; margin-bottom: clamp(48px, 6vw, 80px); }
.lead-row .big { font-family: var(--head); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.4; color: var(--black); letter-spacing: -.02em; margin: 0; }
.lead-row .ph { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 11; }
.lead-row .ph img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .lead-row { grid-template-columns: minmax(0, 1fr); } }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card {
  background: var(--white); border: 1px solid var(--g200); border-radius: var(--radius);
  padding: 34px 30px; font-size: 16px; color: var(--g600); position: relative;
  transition: transform .5s var(--ease), box-shadow .5s, border-color .3s;
}
.card::before { content: ""; display: block; width: 32px; height: 3px; background: var(--black); margin-bottom: 24px; transition: width .5s var(--ease); }
.card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(0,0,0,.08); border-color: var(--g300); }
.card:hover::before { width: 64px; }
@media (max-width: 960px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .cards { grid-template-columns: 1fr; } }

.quote {
  margin: clamp(56px, 7vw, 100px) auto 0; max-width: 980px; text-align: center;
  font-family: var(--head); font-weight: 700; font-size: clamp(28px, 3.8vw, 52px); line-height: 1.12; letter-spacing: -.04em; color: var(--black);
}

/* =========================================================
   QUALIDADE
   ========================================================= */
.q-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); }
.q-grid .txt { color: var(--g400); }
.q-grid .txt p:first-child { color: var(--white); font-size: 19px; }
@media (max-width: 860px) { .q-grid { grid-template-columns: minmax(0, 1fr); } }

.tabs { position: sticky; top: 100px; align-self: start; }
.tablist { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.tab {
  padding: 11px 18px; border-radius: 999px; border: 1px solid var(--g800); background: transparent; color: var(--g400);
  font: 600 12.5px var(--body); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: .25s;
}
.tab:hover { color: var(--white); border-color: var(--g600); }
.tab[aria-selected="true"] { background: var(--white); color: var(--black); border-color: var(--white); }
.panel {
  border: 1px solid var(--g800); border-radius: var(--radius); padding: clamp(30px, 4vw, 54px);
  min-height: 300px; display: flex; align-items: center;
}
.panel[hidden] { display: none; }
.panel p {
  font-family: var(--head); color: var(--white); font-size: clamp(22px, 2.4vw, 34px); line-height: 1.3; letter-spacing: -.025em; margin: 0;
  animation: fade .6s var(--ease);
}
@media (max-width: 860px) { .tabs { position: static; } }

/* =========================================================
   CONTATO
   ========================================================= */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.form-box { background: var(--white); border: 1px solid var(--g200); border-radius: var(--radius); padding: clamp(28px, 4vw, 52px); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 600; color: var(--black); letter-spacing: .02em; }
.field input, .field textarea {
  width: 100%; font: 400 16px var(--body); color: var(--black); background: var(--g50);
  border: 1px solid var(--g200); border-radius: var(--radius); padding: 15px 16px; outline: none; transition: border-color .2s, background .2s, box-shadow .2s;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus { background: var(--white); border-color: var(--black); box-shadow: 0 0 0 4px rgba(0,0,0,.06); }
.form-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; margin-top: 6px; }
.send {
  display: inline-flex; align-items: center; gap: 14px; padding: 17px 30px; border-radius: 999px; border: 0;
  background: var(--black); color: var(--white); font: 600 15px var(--body); cursor: pointer; transition: background .25s, transform .25s;
}
.send svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.send:hover { background: var(--g800); transform: translateY(-2px); }
.send:hover svg { transform: translateX(4px); }
.send:disabled { opacity: .5; cursor: wait; }
.form-state { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--g300); display: none; place-items: center; color: var(--black); }
.form-state svg { width: 20px; height: 20px; }
.form-state.show { display: grid; }
.map { border-radius: var(--radius); overflow: hidden; min-height: 420px; filter: grayscale(1); border: 1px solid var(--g200); }
.map iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }
@media (max-width: 900px) { .contact { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .form { grid-template-columns: 1fr; } }

/* =========================================================
   RODAPÉ
   ========================================================= */
.footer { background: var(--black); color: var(--g400); padding: 64px 0 40px; }
.footer .wrap { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; }
.footer .logo img { filter: invert(1) grayscale(1) contrast(1.6); mix-blend-mode: screen; height: 32px; }
.footer-menu { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 28px; list-style: none; margin: 0; padding: 0; font-size: 14px; }
.footer-menu a:hover { color: var(--white); }
.top { width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--g800); color: var(--white); display: grid; place-items: center; transition: .25s; }
.top:hover { background: var(--white); color: var(--black); }
.top svg { width: 18px; height: 18px; }
@media (max-width: 800px) { .footer .wrap { grid-template-columns: 1fr auto; } .footer-menu { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; } }

/* =========================================================
   PÁGINAS DE OBRAS
   ========================================================= */
.page-head { padding: calc(var(--header) + clamp(60px, 8vw, 120px)) 0 clamp(40px, 5vw, 70px); background: var(--g50); border-bottom: 1px solid var(--g200); }
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; font-size: 14px; color: var(--g500); margin-bottom: 22px; }
.crumbs a:hover { color: var(--black); }
.crumbs span { color: var(--g300); }
.page-head h1 { font-size: clamp(44px, 7vw, 104px); letter-spacing: -.05em; }

.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.choice { display: block; border: 1px solid var(--g200); border-radius: var(--radius); overflow: hidden; background: var(--white); transition: box-shadow .5s, transform .5s var(--ease); }
.choice:hover { transform: translateY(-6px); box-shadow: 0 28px 60px rgba(0,0,0,.1); }
.choice .ph { aspect-ratio: 16 / 11; overflow: hidden; }
.choice img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.choice:hover img { transform: scale(1.06); }
.choice .row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 26px 28px; }
.choice h2 { font-size: clamp(22px, 2.4vw, 32px); }
.choice .arrow { width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--g300); display: grid; place-items: center; transition: .3s; }
.choice .arrow svg { width: 20px; height: 20px; }
.choice:hover .arrow { background: var(--black); color: var(--white); border-color: var(--black); }
@media (max-width: 720px) { .choices { grid-template-columns: 1fr; } }

.masonry { columns: 3; column-gap: 16px; }
.shot { display: block; width: 100%; margin: 0 0 16px; padding: 0; border: 0; background: var(--g100); border-radius: var(--radius); overflow: hidden; cursor: zoom-in; position: relative; break-inside: avoid; }
.shot img { width: 100%; height: auto; transition: transform 1s var(--ease); }
.shot:hover img { transform: scale(1.04); }
.shot .plus { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; background: var(--white); color: var(--black); display: grid; place-items: center; opacity: 0; transform: scale(.8); transition: .35s var(--ease); }
.shot .plus svg { width: 18px; height: 18px; }
.shot:hover .plus, .shot:focus-visible .plus { opacity: 1; transform: none; }
.shot:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
@media (max-width: 900px) { .masonry { columns: 2; } }
@media (max-width: 520px) { .masonry { columns: 1; } }

.empty { height: clamp(220px, 28vw, 360px); border-radius: var(--radius); background: repeating-linear-gradient(-45deg, var(--g50) 0 18px, var(--white) 18px 36px); border: 1px solid var(--g200); }

/* =========================================================
   AMPLIAÇÃO DE FOTOS
   ========================================================= */
.viewer { position: fixed; inset: 0; z-index: 300; background: rgba(11,11,11,.95); display: grid; place-items: center; padding: 80px 16px; opacity: 0; visibility: hidden; transition: .35s; }
.viewer.open { opacity: 1; visibility: visible; }
.viewer img { max-height: 80vh; width: auto; border-radius: var(--radius); transform: scale(.97); transition: transform .5s var(--ease); }
.viewer.open img { transform: none; }
.viewer button { position: absolute; width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--g600); background: transparent; color: var(--white); display: grid; place-items: center; cursor: pointer; transition: .25s; }
.viewer button:hover { background: var(--white); color: var(--black); }
.viewer button svg { width: 20px; height: 20px; }
.v-close { top: 18px; right: 18px; }
.v-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.v-next { right: 18px; top: 50%; transform: translateY(-50%); }
.v-count { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); color: var(--g400); font-size: 14px; letter-spacing: .14em; }
@media (max-width: 600px) { .v-prev, .v-next { top: auto; bottom: 16px; transform: none; } .v-count { bottom: 34px; } }

/* =========================================================
   ANIMAÇÕES
   ========================================================= */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.on { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .1s; }
.reveal.d2 { transition-delay: .2s; }
.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .hero-name span i, .hero-sub, .slide-ctrl { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}