:root{
  --ink:#071522;
  --panel:#0b1c2b;
  --panel2:#102638;
  --amber:#d6a23a;
  --amber2:#f0b643;
  --mist:#d9e2e8;
  --text:#e8eef2;
  --muted:#b8c5ce;
  --line:rgba(217,226,232,.11);
  --white:#fff;
  --max:1180px;
  --reading:780px;
  --shadow:0 22px 64px rgba(0,0,0,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
.container-site{width:min(var(--max),calc(100% - 40px));margin-inline:auto}
.content-narrow{width:min(var(--reading),calc(100% - 40px));margin-inline:auto}

/* Header — mesma lógica visual dos módulos já aprovados */
.site-header{
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:rgba(7,21,34,.96);
  backdrop-filter:blur(12px)
}
.site-header .container-site{
  height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:62px;height:44px;object-fit:contain;object-position:left center}
.brand span{font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:rgba(255,255,255,.66)}
.mainnav{display:flex;gap:24px;align-items:center;font-size:14px;color:rgba(255,255,255,.74)}
.mainnav a{text-decoration:none}
.mainnav a:hover,.mainnav a.active{color:var(--amber)}
.menu-btn{display:none;border:1px solid rgba(255,255,255,.15);background:transparent;color:#fff;border-radius:9px;padding:8px 11px}
.mobile-menu{display:none;border-top:1px solid rgba(255,255,255,.08)}
.mobile-menu.open{display:block}
.mobile-menu .container-site{height:auto;padding:14px 0;display:grid;gap:11px}
.mobile-menu a{text-decoration:none;color:rgba(255,255,255,.8);font-size:14px}

/* Hero — fotografia limpa + H1/lead em HTML */
.page-hero{position:relative;overflow:hidden;min-height:950px;display:flex;align-items:center}
.page-hero.compact{min-height:410px}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(7,21,34,.80) 0%,rgba(7,21,34,.35) 52%,rgba(7,21,34,.10) 100%)
}
.hero-inner{position:relative;z-index:2;width:min(var(--max),calc(100% - 40px));margin:auto;padding:72px 0}
.hero-breadcrumbs{font-size:12px;color:rgba(255,255,255,.58);margin-bottom:20px}
.eyebrow{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.18em;color:var(--amber)}
.page-hero h1{
  max-width:820px;margin:10px 0 18px;
  font-size:clamp(42px,5.5vw,68px);line-height:1.02;letter-spacing:-.035em;color:#fff
}
.page-hero.compact h1{font-size:clamp(38px,5vw,60px)}
.lead{max-width:780px;margin:0;font-size:clamp(17px,1.8vw,21px);line-height:1.55;color:rgba(255,255,255,.82)}

/* Sections */
.section{padding:72px 0}
.section-soft{background:rgba(16,38,56,.40);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section h2{
  margin:8px 0 18px;color:#fff;
  font-size:clamp(29px,4vw,44px);line-height:1.13;letter-spacing:-.025em
}
.section h3{color:#fff;margin:0 0 10px;font-size:21px;line-height:1.25}
.section p{color:var(--muted);font-size:17px;margin:0 0 18px}
.section strong{color:#fff}
.pullquote{
  margin:28px 0;padding:4px 0 4px 20px;border-left:2px solid var(--amber);
  color:#fff;font-size:20px;line-height:1.55
}
.section-grid{
  width:min(var(--max),calc(100% - 40px));margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:46px;align-items:center
}
.section-grid.reverse .copy{order:2}
.section-grid.reverse .figure{order:1}

/* Figures */
.figure,.figure-wide{
  margin:0;overflow:hidden;border-radius:18px;border:1px solid var(--line);
  background:var(--panel);box-shadow:var(--shadow)
}
.figure img,.figure-wide img{width:100%;height:auto}
.figure figcaption,.figure-wide figcaption{
  padding:12px 16px 14px;color:rgba(255,255,255,.56);font-size:13px;line-height:1.5
}
.figure-wide{width:min(1040px,calc(100% - 40px));margin:34px auto 0}

/* Hub cards — mesma lógica do hub Airbnb */
.cards{
  width:min(var(--max),calc(100% - 40px));margin:30px auto 0;
  display:grid;gap:16px
}
.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{
  display:block;text-decoration:none;padding:24px;border-radius:16px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(16,38,56,.94),rgba(11,28,43,.94));
  box-shadow:0 10px 30px rgba(0,0,0,.10);
  transition:transform .18s ease,border-color .18s ease
}
.card:hover{transform:translateY(-2px);border-color:rgba(214,162,58,.42)}
.card-index{display:block;margin-bottom:14px;color:var(--amber);font-size:12px;font-weight:850;letter-spacing:.16em}
.card p{font-size:15px;line-height:1.6;margin:8px 0 18px}
.card-link{color:var(--amber);font-size:14px;font-weight:800}

/* Quick-grid / table */
.check-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px
}
.check-item{
  padding:18px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03)
}
.check-item strong{display:block;color:#fff;margin-bottom:4px}
.check-item span{display:block;color:var(--muted);font-size:14px;line-height:1.5}
.table-scroll{overflow-x:auto;margin-top:22px}
table{width:100%;border-collapse:collapse;min-width:640px}
th,td{text-align:left;padding:14px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:#fff;background:rgba(255,255,255,.04);font-size:14px}
td{color:var(--muted);font-size:14px}

/* Subpage navigation */
.subnav{
  border-bottom:1px solid var(--line);background:rgba(11,28,43,.94)
}
.subnav .container-site{display:flex;gap:8px;padding:12px 0;overflow-x:auto;scrollbar-width:none}
.subnav .container-site::-webkit-scrollbar{display:none}
.subnav a{
  white-space:nowrap;text-decoration:none;padding:8px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.10);font-size:13px;color:rgba(255,255,255,.72)
}
.subnav a:hover,.subnav a.active{color:var(--amber);border-color:rgba(214,162,58,.45)}

/* Related links / CTA */
.related-links{display:grid;gap:10px;margin-top:20px}
.related-links a{color:var(--amber);font-weight:750;text-decoration:none}
.cta-panel{
  width:min(var(--max),calc(100% - 40px));margin:auto;
  display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;
  padding:34px;border-radius:24px;border:1px solid rgba(214,162,58,.26);
  background:linear-gradient(135deg,var(--panel2),var(--panel))
}
.cta-panel p{margin-bottom:0}
.cta-actions{display:flex;gap:10px;flex-wrap:wrap}
.btn-primary,.btn-secondary{
  display:inline-flex;text-decoration:none;padding:12px 16px;border-radius:10px;font-weight:800;font-size:14px
}
.btn-primary{background:var(--amber);color:var(--ink)}
.btn-secondary{border:1px solid rgba(255,255,255,.16);color:#fff}

/* Referências */
.references{font-size:14px;color:var(--muted)}
.references li+li{margin-top:8px}
.references a{color:var(--amber)}

/* Footer — replicando o padrão final de Steel Framing x Alvenaria */
.site-footer{
  border-top:1px solid rgba(255,255,255,.10);
  background:#05101a;padding:30px 0
}
.footer-top{
  display:flex;flex-direction:row;gap:24px;align-items:center;justify-content:space-between;
  font-size:14px;color:rgba(255,255,255,.56)
}
.footer-top p{margin:0}
.footer-top .sun{color:var(--amber);margin-right:7px}
.footer-bottom{
  margin-top:16px;font-size:12px;color:rgba(255,255,255,.42)
}
.footer-bottom strong{color:var(--amber);font-weight:800}

/* Mobile */
@media(max-width:900px){
  .mainnav{display:none}.menu-btn{display:block}
  .section-grid{grid-template-columns:1fr;gap:26px}
  .section-grid.reverse .copy,.section-grid.reverse .figure{order:initial}
  .cards-3,.cards-4{grid-template-columns:1fr 1fr}
  .check-grid{grid-template-columns:1fr 1fr}
  .cta-panel{grid-template-columns:1fr}
}
@media(max-width:620px){
  .container-site,.content-narrow,.section-grid{width:calc(100% - 32px)}
  .brand span{display:none}
  .page-hero{min-height:950px}.page-hero.compact{min-height:420px}
  .hero-overlay{background:linear-gradient(115deg,rgba(7,21,34,.80) 0%,rgba(7,21,34,.35) 52%,rgba(7,21,34,.10) 100%)}
  .hero-inner{align-self:end;padding:180px 0 38px;width:calc(100% - 32px)}
  .page-hero h1,.page-hero.compact h1{font-size:40px}
  .section{padding:54px 0}
  .cards-3,.cards-4,.check-grid{grid-template-columns:1fr}
  .figure-wide{width:100%;border-left:0;border-right:0;border-radius:0}
  .figure-wide figcaption{padding-inline:16px}
  .footer-top{align-items:flex-start;flex-direction:column}
}

/* ==========================================================
   LEGIBILIDADE DAS ARTES TÉCNICAS
   Infográficos densos: texto acima + arte ampla abaixo.
   ========================================================== */

.section-grid,
.section-grid.reverse{
  grid-template-columns:1fr !important;
  gap:28px !important;
  align-items:start !important;
}

.section-grid .copy,
.section-grid.reverse .copy{
  order:1 !important;
  width:min(780px,100%);
}

.section-grid .figure,
.section-grid.reverse .figure{
  order:2 !important;
  width:100% !important;
  max-width:1180px !important;
}

.figure,
.figure-wide{
  width:100%;
  max-width:1180px;
  margin-inline:auto;
}

.figure-button{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  cursor:zoom-in;
  text-align:left;
}

.figure-button img{
  width:100%;
  height:auto;
}

.figure-zoom-label{
  position:absolute;
  right:14px;
  bottom:14px;
  z-index:2;
  padding:8px 11px;
  border-radius:999px;
  background:rgba(5,16,26,.92);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  font-size:12px;
  font-weight:800;
  pointer-events:none;
}

.figure-open-original{
  display:inline-flex;
  margin-top:10px;
  color:var(--amber);
  font-size:12px;
  font-weight:800;
  text-decoration:none;
}

/* Lightbox em resolução nativa */
.image-lightbox{
  width:96vw;
  height:94vh;
  max-width:none;
  max-height:none;
  margin:auto;
  padding:0;
  border:0;
  border-radius:14px;
  background:#06111d;
  overflow:hidden;
  box-shadow:0 30px 100px rgba(0,0,0,.55);
}

.image-lightbox::backdrop{
  background:rgba(0,0,0,.88);
}

.lightbox-shell{
  display:grid;
  grid-template-rows:auto 1fr;
  width:100%;
  height:100%;
}

.lightbox-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:#06111d;
  color:#fff;
}

.lightbox-toolbar span{
  font-size:13px;
  color:rgba(255,255,255,.72);
}

.lightbox-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.lightbox-original,
.lightbox-close{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:#fff;
  border-radius:9px;
  padding:8px 10px;
  font-size:12px;
  font-weight:750;
  text-decoration:none;
  cursor:pointer;
}

.lightbox-original:hover,
.lightbox-close:hover{
  border-color:var(--amber);
  color:var(--amber);
}

.lightbox-stage{
  overflow:auto;
  padding:18px;
  background:#0a1520;
  text-align:center;
}

.lightbox-stage img{
  display:inline-block;
  max-width:none;
  width:auto;
  height:auto;
}

@media(max-width:620px){
  .figure-zoom-label{
    right:10px;
    bottom:10px;
    padding:7px 9px;
    font-size:11px;
  }
  .image-lightbox{
    width:100vw;
    height:100dvh;
    border-radius:0;
  }
  .lightbox-stage{
    padding:10px;
    text-align:left;
  }
}