/* ============================================
   ITI RESIDENCE — style.css
   Paleta: navy #102f48 / azul #1f71b8 / preto / branco
   ============================================ */

:root{
  --navy: #102f48;
  --navy-soft: #16405f;
  --blue: #1f71b8;
  --blue-soft: #e7f0f8;
  --black: #0b0d10;
  --white: #ffffff;
  --bg: #f6f5f2;
  --ink: #1a2229;
  --ink-soft: #5b6672;
  --line: #e3e0d8;
  --radius: 14px;
  --font-display: "Dela Gothic One", "Poppins", sans-serif;
  --font-body: "Poppins", sans-serif;
  --shadow: 0 20px 45px -25px rgba(16,47,72,.35);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ font-family:var(--font-display); line-height:1.15; margin:0 0 .5em; color:var(--navy); }
p{ margin:0 0 1em; color:var(--ink-soft); line-height:1.65; }

.container{ width:100%; max-width:1200px; margin:0 auto; padding:0 24px; box-sizing:border-box; }

/* Grid/flex items default to min-width:auto and can force their track wider
   than the viewport when content (long words, badges) doesn't want to shrink.
   Force them to respect their track so nothing overflows horizontally. */
.sobre-grid > *, .loc-grid > *, .header-inner > *,
.dif-showcase > *, .dif-list > *, .plantas-grid > *, .stat-row > *, .footer-grid > *, .obra-fases > *{
  min-width:0;
}
.section{ padding:96px 0; }
.section-tag{
  display:inline-block; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  font-size:.78rem; color:var(--blue); margin-bottom:14px;
}
.section-tag.light{ color:#9fc4e6; }
h2.light{ color:var(--white); }
.lead-text{ max-width:640px; font-size:1.05rem; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  padding:14px 26px; border-radius:999px; font-weight:600; font-size:.95rem;
  border:2px solid transparent; cursor:pointer; transition:transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--blue); color:var(--white); box-shadow:0 12px 28px -12px rgba(31,113,184,.6); }
.btn-primary:hover{ transform:translateY(-2px); background:#1a5f9c; }
.btn-outline{ border-color:var(--navy); color:var(--navy); }
.btn-outline:hover{ background:var(--navy); color:#fff; transform:translateY(-2px); }
.btn-whatsapp{ background:#25D366; color:#06210f; }
.btn-whatsapp:hover{ transform:translateY(-2px); background:#1ebb59; }
.btn-instagram{ background:transparent; border-color:rgba(255,255,255,.5); color:#fff; }
.btn-instagram:hover{ transform:translateY(-2px); background:#fff; color:var(--navy); border-color:#fff; }
.ico-ig{ width:20px; height:20px; }
.btn-block{ width:100%; }
.btn-lg{ padding:18px 36px; font-size:1.05rem; }
.ico-wa{ width:20px; height:20px; }

/* ---------- Header ---------- */
/* Escondido por completo até o usuário começar a rolar a página */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:var(--navy); padding:14px 0;
  opacity:0; visibility:hidden; transform:translateY(-14px); pointer-events:none;
  transition:opacity .35s ease, transform .35s ease, visibility .35s ease;
}
.site-header.scrolled{
  opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
  box-shadow:0 10px 30px -18px rgba(0,0,0,.5);
}
/* Garante o cabecalho visivel e clicavel enquanto o menu mobile esta aberto,
   mesmo que o usuario ainda nao tenha rolado a pagina (JS controla esta classe). */
.site-header.nav-is-open{
  opacity:1; visibility:visible; pointer-events:auto;
  /* transform:none (em vez de so translateY(0)) e essencial aqui: qualquer transform
     no cabecalho vira o "containing block" dos elementos position:fixed dentro dele,
     entao o menu mobile (que e position:fixed; inset:0) ficava preso a altura do
     cabecalho em vez de cobrir a tela inteira. */
  transform:none;
  /* O cabecalho normalmente leva .35s pra aparecer (efeito de revelar ao rolar).
     Isso deixava a abertura do menu mobile lenta — abria "quase invisivel" e so
     depois de ~350ms ficava visivel de verdade. Aqui a gente acelera bem essa
     transicao soh para o momento de abrir o menu, pra ficar quase instantaneo. */
  transition:opacity .1s ease, visibility .1s ease, transform .1s ease;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand-logo{ height:42px; width:auto; aspect-ratio:720/162; flex-shrink:0; }
.main-nav{ display:flex; gap:22px; flex:1; justify-content:flex-end; margin-right:32px; }
.main-nav a{ color:#fff; font-size:.92rem; font-weight:500; opacity:.9; }
.main-nav a:hover{ opacity:1; }
.header-inner .btn-whatsapp,
.header-inner .btn-instagram{ padding:10px 20px; font-size:.85rem; }
.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px;
  position:relative; z-index:1001;
}
.nav-toggle span{ width:24px; height:2px; background:#fff; border-radius:2px; transition:transform .25s ease, opacity .25s ease; }

/* ---------- Hero ---------- */
/* Só a foto do prédio, a logo e a chamada — nada mais */
.hero{
  position:relative; min-height:100vh; width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background-size:cover; background-position:center; text-align:center; padding:40px 24px;
}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,13,16,.5) 0%, rgba(16,47,72,.35) 55%, rgba(11,13,16,.75) 100%);
}
.hero-center{
  position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:30px;
}
.hero-logo{ width:min(320px, 62vw); height:auto; }
.hero h1{
  color:#fff; font-family:var(--font-body); font-weight:700;
  font-size:clamp(1.5rem, 3.6vw, 2.5rem); max-width:720px; margin:0; letter-spacing:.01em;
}
.scroll-cue{
  position:absolute; left:50%; bottom:34px; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:#fff; opacity:.85; font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  animation:scrollCue 2.2s ease-in-out infinite;
}
.scroll-cue svg{ width:20px; height:20px; }
@keyframes scrollCue{
  0%,100%{ transform:translate(-50%,0); }
  50%{ transform:translate(-50%,8px); }
}


/* ---------- Sobre ---------- */
.sobre-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; }
.sobre-img img{ border-radius:var(--radius); box-shadow:var(--shadow); }
.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:34px; }
.stat{ border-left:3px solid var(--blue); padding-left:14px; }
.stat-num{ display:block; font-family:var(--font-display); font-size:2rem; color:var(--navy); }
.stat-label{ font-size:.82rem; color:var(--ink-soft); }

/* Ficha rápida — infos de primeiro contato (endereço, metragens, entrega) */
.quick-facts{ margin-top:30px; border-top:1px solid var(--line); }
.quick-facts li{
  display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.quick-facts strong{
  flex:0 0 150px; font-family:var(--font-body); font-weight:700; font-size:.85rem;
  color:var(--navy); text-transform:uppercase; letter-spacing:.04em;
}
.quick-facts span{ flex:1 1 220px; font-size:.94rem; color:var(--ink-soft); }

/* Slideshow de fotos reais na seção Sobre */
.sobre-slideshow{ position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/5; }
.sobre-slideshow .slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  border-radius:0; box-shadow:none; opacity:0; transition:opacity 1.2s ease;
}
.sobre-slideshow .slide.active{ opacity:1; position:relative; }

.slide-nav{
  position:absolute; top:50%; z-index:2; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:rgba(11,13,16,.45); color:#fff; display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, transform .2s ease;
}
.slide-nav:hover{ background:rgba(11,13,16,.72); }
.slide-nav svg{ width:18px; height:18px; }
.slide-nav.prev{ left:12px; }
.slide-nav.next{ right:12px; }

.slide-dots{
  position:absolute; left:50%; bottom:14px; z-index:2; transform:translateX(-50%);
  display:flex; gap:8px;
}
.slide-dot{
  width:7px; height:7px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.55); transition:background .2s ease, transform .2s ease;
}
.slide-dot.active{ background:#fff; transform:scale(1.3); }

picture{ display:contents; }
/* O <picture> nao deve interferir no layout — ele so existe pra escolher entre
   webp/jpg; com display:contents o <img> continua se comportando exatamente
   como se fosse filho direto do container (flex, position:absolute etc). */

/* ---------- Diferenciais ---------- */
.diferenciais{ background:var(--navy); }

.dif-showcase{ display:grid; grid-template-columns:1fr 1.15fr; gap:50px; align-items:start; margin-top:40px; }

.dif-list{ display:flex; flex-direction:column; gap:14px; }
.dif-item{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius); box-shadow:0 14px 30px -22px rgba(0,0,0,.55);
  padding:20px 22px; cursor:pointer;
  transition:padding .35s ease, background .25s ease, border-color .25s ease, box-shadow .3s ease, transform .3s ease;
}
.dif-item-head{ display:flex; align-items:center; gap:14px; }
.dif-item-head h3{
  margin:0; color:#c3d3e0; font-size:1.05rem; font-family:var(--font-body); font-weight:600;
  transition:color .25s ease, transform .25s ease;
}
.dif-item-desc{
  max-height:0; opacity:0; overflow:hidden; margin:0; color:#9fb4c6; font-size:.92rem;
  transition:max-height .4s ease, opacity .3s ease, margin-top .4s ease;
}
.dif-item.active{
  padding:26px 22px; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.22);
  box-shadow:0 20px 40px -20px rgba(0,0,0,.65); transform:translateY(-2px);
}
.dif-item.active .dif-item-head h3{ color:#fff; transform:translateX(4px); }
.dif-item.active .dif-item-desc{ max-height:120px; opacity:1; margin-top:10px; }

.dif-image{
  position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:none;
  aspect-ratio:4/3; opacity:0; transition:opacity .4s ease, box-shadow .4s ease;
}
.dif-image.showing{ opacity:1; box-shadow:var(--shadow); }
.dif-image-slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .5s ease;
}
.dif-image-slide.active{ opacity:1; position:relative; }

/* ---------- Imagens — faixas full-bleed com rolagem automática ---------- */
.imagens-moderna{ padding:96px 0; overflow:hidden; }
.imgs-head{ margin-bottom:44px; }

.img-row{
  position:relative; width:100vw; margin-left:calc(50% - 50vw);
  overflow:hidden; margin-bottom:16px;
}
.img-row:last-child{ margin-bottom:0; }

.img-row-label{
  position:absolute; top:22px; left:clamp(16px, 4vw, 56px); z-index:2;
  color:rgba(255,255,255,.75); font-family:var(--font-display);
  font-size:clamp(1.4rem, 3.2vw, 2.4rem); text-transform:uppercase; letter-spacing:.06em;
  text-shadow:0 3px 16px rgba(0,0,0,.5); pointer-events:none; mix-blend-mode:overlay;
}

.img-track{
  overflow-x:auto; overflow-y:hidden; cursor:grab;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none;
}
.img-track::-webkit-scrollbar{ display:none; }
.img-track.dragging{ cursor:grabbing; scroll-behavior:auto; }

.img-track-inner{ display:flex; gap:8px; width:max-content; }

.img-track-inner img{
  height:41vh; width:auto; max-width:none; flex:0 0 auto;
  border-radius:12px; object-fit:cover; box-shadow:var(--shadow);
  -webkit-user-drag:none; user-select:none;
}

/* ---------- Plantas ---------- */
.plantas-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:22px; margin-top:40px; }
.planta-card{ flex:0 1 calc((100% - 44px)/3); }
.planta-card{
  background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  transition:transform .25s ease;
}
.planta-card:hover{ transform:translateY(-6px); }
.planta-card img{ width:100%; aspect-ratio:3/4; object-fit:contain; background:#fff; padding:16px; box-sizing:border-box; }
.planta-info{ padding:20px; }
.planta-info h3{ font-size:1rem; margin-bottom:4px; }
.planta-m2{ color:var(--blue); font-weight:700; font-size:1.15rem; margin-bottom:14px; }
.planta-stats{
  display:flex; flex-wrap:wrap; gap:8px 18px; padding-top:12px; margin-bottom:10px;
  border-top:1px solid var(--line);
}
.planta-stat{ font-size:.82rem; color:var(--ink-soft); }
.planta-stat strong{ color:var(--navy); font-weight:700; }
.planta-desc{ font-size:.82rem; color:var(--ink-soft); margin:0; }
.center-cta{ text-align:center; margin-top:44px; }

/* ---------- Status da obra ---------- */
.obra-bar{ height:4px; background:var(--line); border-radius:999px; overflow:hidden; }
.obra-bar-fill{ height:100%; background:var(--navy); border-radius:999px; }

.obra-geral{ margin-top:40px; text-align:center; }
.obra-geral-head{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-bottom:16px; }
.obra-geral-head h3{ font-family:var(--font-body); font-size:1.35rem; font-weight:700; color:var(--ink); margin:0; }
.obra-geral-head .obra-percent{ font-size:1.35rem; font-weight:700; color:var(--blue); }
.obra-geral .obra-bar{ height:8px; }
.obra-geral .obra-bar-fill{ background:var(--blue); }

.obra-fases{ display:flex; flex-wrap:wrap; justify-content:center; gap:40px 60px; margin-top:56px; }
.obra-fase{ flex:0 1 calc((100% - 120px)/3); text-align:center; }
.obra-fase h3{ font-family:var(--font-body); font-size:.95rem; font-weight:700; color:var(--ink); margin:0 0 6px; }
.obra-fase .obra-percent{ display:block; font-size:.82rem; color:var(--ink-soft); margin-bottom:16px; }

/* ---------- Localização ---------- */
.loc-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:50px; align-items:center; }
.loc-map{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.loc-map iframe{ width:100%; height:380px; border:0; display:block; }
.loc-nearby{
  margin-top:40px; padding-top:28px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:10px 18px; text-align:center;
}
.loc-nearby-item{ font-size:.95rem; color:var(--ink-soft); white-space:nowrap; }
.loc-nearby-item b{ color:var(--navy); font-weight:700; }
.loc-nearby-sep{ color:var(--line); font-weight:300; }

/* ---------- FAQ ---------- */
.faq-list{ max-width:760px; margin-top:36px; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; text-align:left; background:none; border:0; padding:20px 0; cursor:pointer;
  font-family:var(--font-body); font-weight:600; font-size:1rem; color:var(--navy);
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-caret{ width:20px; height:20px; flex-shrink:0; color:var(--blue); transition:transform .25s ease; }
.faq-item.open .faq-caret{ transform:rotate(180deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-item.open .faq-a{ max-height:600px; }
.faq-a p{ padding-bottom:20px; margin:0; }

/* ---------- CTA final (liquid glass, tom azulado) ---------- */
.cta-final{
  position:relative; overflow:hidden; text-align:center;
  background-color:var(--navy); background-size:cover; background-position:center;
  min-height:620px; display:flex; align-items:center;
}
.cta-final-overlay{
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(16,47,72,.93) 0%, rgba(31,113,184,.55) 45%, rgba(11,13,16,.92) 100%);
}
.cta-blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; pointer-events:none; }
.cta-blob-a{ width:420px; height:420px; background:var(--blue); top:-160px; left:-120px; }
.cta-blob-b{ width:360px; height:360px; background:#6fc3ff; bottom:-170px; right:-90px; }
.cta-final .container{ position:relative; z-index:1; width:100%; }
.cta-glass{
  max-width:640px; margin:0 auto; padding:56px 44px; border-radius:28px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.25);
}
.cta-glass-minimal{
  max-width:600px; padding:48px 56px;
  display:flex; flex-direction:column; align-items:center; gap:26px;
}
.cta-phrase{ font-size:1.15rem; margin:0; }
.cta-phrase-line{ display:block; }
@media (min-width:520px){ .cta-phrase{ font-size:1.4rem; } }
@media (min-width:760px){ .cta-phrase{ font-size:1.6rem; } }
.cta-final .btn-primary{ background:#2f8fe0; box-shadow:0 16px 34px -14px rgba(47,143,224,.85); }
.cta-final .btn-primary:hover{ background:#ffffff; color:var(--navy); box-shadow:0 16px 34px -14px rgba(255,255,255,.5); }
@media (max-width: 760px){
  .cta-final{ min-height:420px; }
  .cta-glass{ padding:40px 26px; }
  .cta-glass-minimal{ padding:32px 26px; }
}

/* ---------- Footer ---------- */
.site-footer{ background:var(--black); color:#c8ccd0; padding:70px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:36px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-brand{ display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; }
.footer-logo{ height:45px; width:auto; max-width:100%; aspect-ratio:720/162; margin-bottom:14px; }
.footer-logo-miura{ display:block; height:45px; width:auto; max-width:100%; aspect-ratio:450/93; margin-top:14px; opacity:.9; }
.footer-grid h4{ color:#fff; font-family:var(--font-body); font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:12px; }
.footer-grid p{ color:#a9aeb4; font-size:.9rem; }
.footer-grid a{ display:block; color:#a9aeb4; font-size:.9rem; margin-bottom:8px; }
.footer-grid a:hover{ color:#fff; }
.footer-bottom{ padding:16px 24px 24px; text-align:center; }
.footer-bottom p{ color:#767b81; font-size:.8rem; margin:0; }
.footer-bottom-line{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 8px; }
.footer-credit{ display:inline-flex; align-items:center; gap:8px; color:#767b81; font-size:.8rem; }
.footer-credit a{ display:inline-flex; align-items:center; }
.footer-credit img{ height:26px; width:auto; aspect-ratio:480/159; opacity:.92; vertical-align:middle; transition:opacity .2s; }
.footer-credit a:hover img{ opacity:1; }

.footer-registry-row{ padding:22px 24px 0; text-align:center; }
.footer-registry{ color:#9fc4e6; font-size:.98rem; font-weight:700; margin:0; }

/* ---------- WhatsApp float ---------- */
.whatsapp-float{
  position:fixed; right:22px; bottom:22px; z-index:999;
  width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 12px 28px -10px rgba(0,0,0,.45);
  transition:transform .2s ease, opacity .3s ease, visibility .3s ease;
}
.whatsapp-float:hover{ transform:scale(1.08); }
.whatsapp-float.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.whatsapp-float svg{ width:30px; height:30px; }

/* ---------- Reveal animation base (JS toggles .is-visible) ---------- */
[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
[data-reveal].is-visible{ opacity:1; transform:none; }

/* ============ Responsive ============ */
@media (max-width: 980px){
  .sobre-grid{ grid-template-columns:1fr; }
  .loc-grid{ grid-template-columns:1fr; }
  .loc-nearby{ gap:8px 14px; }
  .loc-nearby-item{ font-size:.88rem; }
  .dif-showcase{ grid-template-columns:1fr; gap:0; }
  .dif-image{
    order:-1; aspect-ratio:16/10; max-height:0; margin-bottom:0;
    transition:opacity .4s ease, max-height .45s ease, margin-bottom .45s ease;
  }
  .dif-image.showing{ max-height:400px; margin-bottom:24px; }
  /* Nos 3 primeiros itens a foto abre em cima da lista (padrao, order:-1 acima);
     nos 3 ultimos, abre embaixo — fica mais perto de onde a pessoa tocou. */
  .dif-image.below-list{ order:1; }
  .dif-image.below-list.showing{ margin-bottom:0; margin-top:24px; }
  .planta-card{ flex-basis:calc((100% - 22px)/2); }
  .obra-fase{ flex-basis:calc((100% - 60px)/2); }
  .stat-row{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .img-track-inner img{ height:38vh; }
}

@media (max-width: 760px){
  .main-nav{
    display:flex; position:fixed; inset:0; top:0; z-index:999;
    background:var(--navy); flex-direction:column; align-items:center; justify-content:center; gap:28px;
    margin:0; width:100%;
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-10px);
    /* Antes o menu aparecia via display:none -> display:flex, um "pulo" instantaneo
       sem transicao nenhuma (display nao anima). Trocando pra opacity/visibility/transform
       o painel abre e fecha com um fade + leve deslize, ficando bem mais suave. */
    transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
  }
  .main-nav.nav-open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
  .main-nav a{ font-size:1.3rem; }
  .nav-toggle{ display:flex; }
  .header-inner .btn-whatsapp span,
  .header-inner .btn-instagram span{ display:none; }
  .section{ padding:64px 0; }
  .planta-card{ flex-basis:100%; }
  .obra-fase{ flex-basis:100%; }
  .stat-row{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .quick-facts li{ flex-direction:column; gap:2px; }
  .quick-facts strong{ flex-basis:auto; }
  .quick-facts span{ flex-basis:auto; flex-grow:0; }
  .sobre-slideshow{ aspect-ratio:4/3; }
  .imagens-moderna{ padding:64px 0; }
  .img-track-inner img{ height:34vh; border-radius:10px; }
  .img-row{ margin-bottom:10px; }
  .img-track-inner{ gap:8px; }
  .img-row-label{ top:10px; font-size:.85rem; }
}

/* Estado do X do botao hamburguer quando o menu esta aberto. As regras de
   abrir/fechar o painel do menu em si agora ficam dentro do @media
   (max-width:760px) acima, usando opacity/visibility/transform (com transicao)
   em vez de display:none <-> display:flex (que nao tem como animar). */
.nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }