:root{--ink:#0c0e11;--graph:#15181d;--line:#2a2f37;--mute:#9aa1ab;--paper:#f2f0eb;--paper2:#e7e4dd;--txt:#16181b;--red:#e30613;--red2:#c10510;--w:#fff;--max:1240px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{font-family:Archivo,system-ui,sans-serif;font-weight:400;color:var(--txt);background:var(--paper);-webkit-font-smoothing:antialiased;line-height:1.5}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer;color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
h1,h2,h3{font-weight:500;font-stretch:115%;letter-spacing:-.02em;line-height:1.08}
h2{font-size:clamp(26px,3vw,40px)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--red)}
.eyebrow:before{content:"";width:22px;height:2px;background:var(--red)}
.lead{font-size:clamp(16px,1.3vw,18px);color:#4a4f57;max-width:58ch}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border:0;font-size:15px;font-weight:500;text-decoration:none;background:var(--red);color:#fff;transition:background .2s}
.btn:hover{background:var(--red2)}
.btn.dark{background:var(--ink)}
.btn.line{background:transparent;color:var(--txt);box-shadow:inset 0 0 0 1px #c9c5bc}
.btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.btn svg{width:18px;height:18px}

/* topo */
header{position:sticky;top:0;z-index:50;background:rgba(12,14,17,.96);backdrop-filter:blur(10px)}
.nav{display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px}
.nav img{height:32px;width:auto}
.nav .r{display:flex;align-items:center;gap:20px}
.nav .r a.back{color:#cfd3d9;text-decoration:none;font-size:14px}
.nav .btn{padding:9px 14px;font-size:14px}
.catnav{border-top:1px solid #1f2329;border-bottom:1px solid #1f2329}
.catnav .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.catnav .wrap::-webkit-scrollbar{display:none}
.catnav a{flex:none;color:#9aa1ab;text-decoration:none;font-size:14px;padding:12px 14px;border-bottom:2px solid transparent}
.catnav a[aria-current]{color:#fff;border-color:var(--red)}

/* abertura */
.hero{background:linear-gradient(180deg,#fbfaf8 0%,#efede8 100%)}
.hero .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center;min-height:min(calc(100svh - 106px),620px);padding-top:32px;padding-bottom:32px}
.hero h1{font-size:clamp(34px,4vw,56px);margin:16px 0 18px;max-width:16ch}
.hero .ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.hero figure{position:relative}
.hero figure img{width:100%;height:auto;max-height:min(62svh,520px);object-fit:contain}
.hero figure.dark{background:var(--ink)}
.hero figcaption{font-size:12px;color:#7a7f86;margin-top:8px}

section{padding:clamp(48px,7svh,88px) 0}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:24px}
.head h2{margin-top:12px;max-width:22ch}
.head .lead{max-width:46ch;font-size:15px}

/* produtos */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.card{background:#fff;border:1px solid #e0dcd3;text-align:left;padding:0;display:flex;flex-direction:column}
.card .ph{background:#fff;height:210px;display:flex;align-items:flex-end;justify-content:center;padding:18px 14px 10px}
.card .ph img{max-height:100%;width:auto;object-fit:contain}
.card .meta{padding:14px 16px 16px;border-top:1px solid #ece9e2;display:flex;flex-direction:column;gap:9px;flex:1}
.card h3{font-size:17px;font-stretch:105%;letter-spacing:-.01em;line-height:1.2}
.card p{font-size:13.5px;color:#5a5f67;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .more{font-size:13px;color:var(--red2);margin-top:auto}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:12px;padding:3px 8px;background:#f2f0eb;color:#4a4f57}
.chip.v{background:var(--ink);color:#fff}
.chip.s{background:#fff;box-shadow:inset 0 0 0 1px #d6d2c9}
.chip.e{background:#fde8e9;color:var(--red2)}

/* tabela */
.specs{background:#fff}
.tbl{width:100%;overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
th,td{text-align:left;padding:13px 14px;border-bottom:1px solid #e6e2da;vertical-align:top}
th{font-weight:500;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:#6b7078;background:#f7f6f3}
td:first-child{font-weight:500;white-space:nowrap}
.note{font-size:13px;color:#6b7078;margin-top:14px}

/* blocos de texto */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:#e3dfd6;border:1px solid #e3dfd6}
.cols>div{background:#fff;padding:22px}
.cols h3{font-size:18px;margin-bottom:8px}
.cols p,.cols li{font-size:14.5px;color:#4a4f57}
.cols ul{padding-left:18px;display:grid;gap:6px}

/* chamada */
.cta{background:var(--graph);color:#fff}
.cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cta p{color:#b8bec7;max-width:52ch;margin-top:10px}
.cta .acts{display:flex;gap:10px;flex-wrap:wrap}

/* dialog */
dialog{border:0;padding:0;max-width:880px;width:calc(100% - 32px);margin:auto;background:#fff;color:var(--txt)}
dialog::backdrop{background:rgba(8,9,11,.72)}
.dlg{display:grid;grid-template-columns:280px 1fr;max-height:min(86svh,640px)}
.dlg .ph{background:#fff;border-right:1px solid #eee;display:flex;align-items:center;justify-content:center;padding:28px}
.dlg .ph img{max-height:360px;width:auto}
.dlg .body{padding:32px 32px 28px;overflow:auto;display:flex;flex-direction:column;gap:14px}
.dlg h3{font-size:26px;padding-right:36px}
.dlg p{color:#4a4f57;font-size:15px;white-space:pre-line}
.dlg .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.dlg .acts .btn{padding:12px 16px;font-size:14px}
.x{position:absolute;top:10px;right:10px;width:40px;height:40px;border:0;background:#f2f0eb;font-size:22px;line-height:1;z-index:1}

footer{background:#08090b;color:#9aa1ab;padding:48px 0 32px;font-size:14px}
footer .top{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid #1d2026}
footer .brand{display:flex;align-items:center;gap:20px}
footer .brand img{height:30px;width:auto}
footer .brand .dx{height:40px;opacity:.85}
footer nav{display:flex;gap:24px;flex-wrap:wrap}
footer a{text-decoration:none;color:#cfd3d9}
footer .bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;font-size:13px}
footer .aion{color:#9aa1ab}
footer .aion b{color:#fff;font-weight:500}

@media (max-width:1000px){
 .hero .wrap{grid-template-columns:1fr;min-height:0;gap:24px}
 .dlg{grid-template-columns:1fr}
 .dlg .ph{padding:20px;height:220px;border-right:0;border-bottom:1px solid #eee}.dlg .ph img{max-height:180px}
 .dlg .body{padding:22px 20px}
}
@media (max-width:760px){
 .wrap{padding:0 16px}
 .nav .r a.back{display:none}
 .catnav a{padding:11px 10px;font-size:13.5px}
 .hero .wrap{padding-top:24px;padding-bottom:24px}
 .hero h1{font-size:32px;margin:12px 0 12px}
 .hero .lead{font-size:15px}
 .hero .ctas{margin-top:18px}
 .hero .ctas .btn{padding:12px 16px;font-size:14px}
 .hero figure img{max-height:240px}
 section{padding:40px 0}
 .grid{grid-template-columns:1fr 1fr;gap:10px}
 .card .ph{height:150px;padding:12px 8px 6px}
 .card .meta{padding:10px 10px 12px;gap:7px}
 .card h3{font-size:14.5px}
 .card p{display:none}
 .chip{font-size:11px;padding:2px 6px}
 .cols>div{padding:16px}
 table{min-width:0;font-size:14px}thead{display:none}table,tbody,tr,td{display:block}tr{padding:12px 0;border-bottom:1px solid #e6e2da}td{border:0;padding:2px 0;display:grid;grid-template-columns:110px 1fr;gap:8px}td:first-child{display:block;font-size:15px;padding-bottom:4px}td[data-l]:before{content:attr(data-l);color:#7a7f86;font-size:12.5px}
 .dlg{max-height:90svh;overflow:auto}
 .dlg .acts{position:sticky;bottom:-22px;background:#fff;padding:12px 0 22px;margin-bottom:-22px}
 .dlg h3{font-size:22px}
 .dlg p{font-size:14.5px}
}
.grp{font-size:20px;margin:36px 0 14px;display:flex;align-items:baseline;gap:12px}
.grp:first-child{margin-top:0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.split img{width:100%;height:auto}
@media (max-width:760px){.grp{font-size:18px;margin:28px 0 10px}.split{grid-template-columns:1fr;gap:20px}}