/* layout.css - 6.2.0 bancada navy */
.wrap{width:min(var(--wrap),calc(100% - 48px)); margin-inline:auto}
html{scroll-behavior:smooth}
#inicio,#catalogo,#atacado,#como-comprar,#contato{scroll-margin-top:88px}

/* cabecalho */
.header{position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:18px;
  min-height:var(--head); padding:10px max(24px,calc((100vw - var(--wrap))/2));
  background:var(--ink-900); -webkit-backdrop-filter:none; backdrop-filter:none; isolation:isolate;
  border-bottom:1px solid var(--line)}
.wordmark{display:inline-flex; align-items:center; gap:10px; color:var(--on-dark); font-weight:700; letter-spacing:-.01em; font-size:17px}
.wordmark:hover{text-decoration:none}
.wordmark b{color:var(--aqua); font-weight:700}
.desktop-nav{display:flex; gap:22px; margin-left:auto}
.desktop-nav a{color:var(--on-dark-mute); font-size:15px; font-weight:500}
.desktop-nav a:hover{color:var(--on-dark); text-decoration:none}
.header .order-button{margin-left:12px}
.header .mobile-menu{display:none}

/* hero */
.hero{display:block; padding:56px 0 48px}
.hero-grid{display:grid; grid-template-columns:minmax(0,56fr) minmax(0,44fr); gap:40px; align-items:center}
.hero-copy{display:grid; gap:18px; align-content:center}
.hero-copy h1 em{font-style:normal; color:var(--aqua)}
.hero-copy h1 b{font-weight:700; color:var(--blue-400)}
#hero-intro{font-size:clamp(16px,1.3vw,19px); color:var(--on-dark-mute); max-width:52ch}
.hero-facts{display:flex; flex-wrap:wrap; gap:8px 20px; font-size:14px; color:var(--on-dark-mute)}
.hero-facts span{display:inline-flex; align-items:center; gap:8px}
.hero-facts span::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--aqua)}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:4px}
.hero-selection{display:grid; gap:18px; margin-top:26px}
.selected-data{display:flex; flex-wrap:wrap; gap:20px 32px; align-items:flex-end; justify-content:space-between}
.selected-data .actions{display:flex; gap:10px; flex-wrap:wrap}

/* faixa de prova */
.proof{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; margin:8px 0 0}
.proof div{background:var(--ink-800); padding:16px 18px}
.proof dt{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-mute); font-weight:600}
.proof dd{margin:4px 0 0; font-size:15px; font-weight:600}

/* secoes */
.section{padding:64px 0}
.section-heading{display:grid; gap:10px; max-width:64ch; margin-bottom:30px}
.section-heading p:last-child{color:var(--on-dark-mute)}

/* catalogo */
.product-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:18px}
#catalog-app>p{color:var(--on-dark-mute)}

/* blocos de preco lado a lado */
.split{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:26px}
.split>div{background:var(--ink-800); border:1px solid var(--line); border-radius:var(--r-m); padding:22px}
.ladder{display:grid; gap:10px; margin-top:14px}
.ladder li{display:flex; justify-content:space-between; gap:16px; padding-bottom:10px; border-bottom:1px dashed var(--line)}
.ladder li:last-child{border-bottom:0; padding-bottom:0}
.ladder b{color:var(--aqua)}

/* atacado */
.wholesale{background:var(--ink-800); border-block:1px solid var(--line)}
.wholesale-layout{display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:start}

/* passos */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.steps li{background:var(--ink-800); border:1px solid var(--line); border-radius:var(--r-m); padding:22px; display:grid; gap:8px}
.steps li span{font-size:13px; font-weight:700; letter-spacing:.14em; color:var(--aqua)}
.steps li p{color:var(--on-dark-mute); font-size:15px}

/* bloco claro de envio */
.delivery{background:var(--bench); color:var(--ink-900); border-radius:var(--r-l); padding:34px; margin-block:8px}
.delivery h2{color:var(--ink-900)}
.specs{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:22px}
.specs dt{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#4a6076; font-weight:700}
.specs dd{margin:6px 0 0; font-size:15px; color:#16344f}

/* contato */
.contact{display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center}
.contact>div:last-child{background:var(--ink-800); border:1px solid var(--line); border-radius:var(--r-m); padding:24px; display:grid; gap:10px; justify-items:start}
#contact-phone{font-size:22px; font-weight:700; color:var(--on-dark)}

/* rodape */
.footer{display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; justify-content:space-between;
  padding:28px 0 46px; margin-top:26px; border-top:1px solid var(--line)}
.footer nav{display:flex; gap:20px}
.footer nav a{color:var(--on-dark-mute); font-size:14px}
.footer .small{color:var(--on-dark-mute); width:100%}

@media (max-width:1100px){
  .product-grid{grid-template-columns:repeat(3,1fr)}
  .hero-grid{grid-template-columns:1fr; gap:30px}
  .wholesale-layout,.contact,.split{grid-template-columns:1fr}
  .proof{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .wrap{width:calc(100% - 32px)}
  .header .desktop-nav{display:none}
  .header .mobile-menu{display:inline-flex; margin-left:auto}
  .header .order-button{margin-left:0}
  .hero{padding:34px 0 30px}
  .section{padding:46px 0}
  .product-grid{grid-template-columns:repeat(2,1fr); gap:14px}
  .steps,.specs{grid-template-columns:1fr}
  .delivery{padding:24px; border-radius:var(--r-m)}
}
@media (max-width:420px){
  .header{gap:10px}
  .wordmark span{font-size:15px}
  .wordmark img{width:20px; height:25px}
  .header .order-button{padding:10px 14px; font-size:13px}
  .product-grid{grid-template-columns:1fr}
  .proof{grid-template-columns:1fr}
  .selected-data{gap:14px}
}

/* Keep the existing navy layout within the viewport. */
.hero-grid>*,.wholesale-layout>*,.detail-layout>*,.product-grid>*,.cart-item>div{min-width:0}
body{--legal-height:0px;padding-bottom:calc(var(--legal-height) + 24px)}
.legal-nav{flex-wrap:wrap}
.wholesale-help{display:grid;gap:16px;padding:24px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--ink-700)}
@media(max-width:760px){
 body{--legal-height:0px;padding-bottom:calc(var(--legal-height) + 145px)}
 .header{display:grid;grid-template-columns:minmax(80px,1fr) auto 48px;gap:8px;padding:8px 12px;min-height:64px}
 .header .order-button{font-size:11px;padding:8px;max-width:135px;line-height:1.3}
 .header .mobile-menu{padding:8px;font-size:12px;min-width:44px;margin:0}
 .wordmark{gap:4px}.wordmark span{font-size:12px}.wordmark img{width:18px;height:24px}
 .hero-panel{padding:16px}
 .footer nav{gap:8px 18px;flex-wrap:wrap}
}