:root { --ink:#101723; --ink-2:#1e2939; --paper:#faf7f1; --cream:#efe6d8; --line:#ded7cd; --orange:#ed6842; --gold:#e9be61; --green:#89bb45; --muted:#5c6677; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; padding-bottom:84px; color:var(--ink); background:var(--paper); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color:inherit; text-decoration:none; }
.wrap { width:min(100% - 64px, 1240px); margin:auto; }
.site-header { position:sticky; z-index:10; top:0; border-bottom:1px solid rgba(16,23,35,.13); background:rgba(250,247,241,.94); backdrop-filter:blur(18px); }
.nav { display:flex; min-height:82px; align-items:center; gap:28px; }
.brand { display:flex; min-width:315px; align-items:center; gap:12px; }
.brand img { width:48px; height:48px; padding:5px; border:1px solid var(--line); border-radius:7px; background:white; object-fit:contain; }
.brand strong { display:block; font-size:14px; letter-spacing:0; }
.brand span span { display:block; margin-top:2px; color:var(--muted); font-size:11px; }
.nav-main { display:flex; margin-left:auto; align-items:center; gap:27px; }
.nav-main>a,.products-toggle summary { color:#414c60; font-size:13px; font-weight:800; cursor:pointer; list-style:none; }
.products-toggle summary::-webkit-details-marker { display:none; }
.products-toggle summary:before { display:inline-block; margin-right:6px; color:var(--orange); content:"+"; }
.products-toggle { position:relative; }
.products-menu { position:absolute; top:28px; right:-150px; display:grid; grid-template-columns:repeat(3,190px); gap:20px; width:620px; padding:22px; border:1px solid var(--line); background:white; box-shadow:0 20px 48px rgba(11,17,28,.16); }
.products-menu b { display:block; margin-bottom:9px; color:var(--orange); font-size:10px; letter-spacing:1px; text-transform:uppercase; }
.products-menu a { display:block; padding:5px 0; color:#3f4b60; font-size:12px; font-weight:700; }
.products-menu a:hover { color:var(--orange); }
.button { display:inline-flex; min-height:42px; align-items:center; justify-content:center; padding:11px 17px; border:1px solid transparent; border-radius:2px; font-size:12px; font-weight:900; letter-spacing:.1px; }
.button-dark { color:white; background:var(--ink); }
.button-gold { color:var(--ink); background:var(--gold); }
.nav-main>a.button-gold { color:#101723; }
.quote-float { position:fixed; z-index:40; right:20px; bottom:18px; display:inline-flex; min-height:50px; align-items:center; justify-content:center; gap:10px; padding:12px 17px; border:1px solid rgba(16,23,35,.2); border-radius:999px; background:var(--gold); box-shadow:0 12px 28px rgba(16,23,35,.24); color:var(--ink); font-size:14px; font-weight:900; letter-spacing:0; transition:transform .2s ease, box-shadow .2s ease; }
.quote-float:after { display:grid; width:21px; height:21px; place-items:center; border-radius:50%; background:rgba(16,23,35,.12); content:"+"; font-size:16px; font-weight:700; line-height:1; }
.quote-float:hover { transform:translateY(-3px); box-shadow:0 17px 32px rgba(16,23,35,.3); }
.whatsapp-float { position:fixed; z-index:40; right:20px; bottom:82px; display:grid; width:50px; height:50px; place-items:center; border:1px solid rgba(9,78,45,.34); border-radius:50%; background:#25d366; box-shadow:0 12px 28px rgba(11,77,46,.24); color:#fff; font-size:12px; font-weight:900; letter-spacing:0; transition:transform .2s ease, box-shadow .2s ease; }
.whatsapp-float:hover { transform:translateY(-3px); box-shadow:0 17px 32px rgba(11,77,46,.32); }
.whatsapp-float:after { position:absolute; right:60px; display:none; width:max-content; padding:8px 10px; border-radius:3px; background:var(--ink); box-shadow:0 8px 22px rgba(16,23,35,.18); color:#fff; content:"WhatsApp +86 13825722581"; font-size:11px; font-weight:800; white-space:nowrap; }
.whatsapp-float:hover:after,.whatsapp-float:focus-visible:after { display:block; }
.catalog-hero { position:relative; overflow:hidden; padding:76px 0 61px; color:white; background:var(--ink); }
.catalog-hero:before { position:absolute; inset:0; opacity:.35; background:linear-gradient(116deg, rgba(0,0,0,.1), rgba(83,105,135,.6)), repeating-linear-gradient(115deg, transparent 0 56px, rgba(255,255,255,.06) 56px 57px); content:""; }
.catalog-hero .wrap { position:relative; }
.crumb { margin:0 0 24px; color:#c9d0dc; font-size:12px; font-weight:700; }
.crumb a { color:var(--gold); }
.eyebrow { margin:0 0 14px; color:var(--orange); font-size:11px; font-weight:900; letter-spacing:1.45px; text-transform:uppercase; }
h1 { max-width:820px; margin:0; font-size:clamp(45px,6vw,84px); line-height:.95; letter-spacing:0; }
.hero-copy { max-width:620px; margin:25px 0 0; color:#d2d9e5; font-size:17px; line-height:1.6; }
.hero-meta { display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; }
.hero-meta span { padding:8px 10px; border:1px solid rgba(255,255,255,.28); color:#e5e9f0; font-size:11px; font-weight:800; }
.catalog-main { padding:50px 0 100px; }
.catalog-top { display:flex; gap:34px; align-items:end; justify-content:space-between; padding-bottom:24px; border-bottom:1px solid var(--line); }
.catalog-top h2 { max-width:570px; margin:0; font-size:28px; letter-spacing:0; }
.catalog-count { flex:0 0 auto; color:var(--muted); font-size:12px; font-weight:800; }
.product-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; margin-top:32px; }
.product-card { display:flex; min-width:0; min-height:100%; flex-direction:column; overflow:hidden; border:1px solid var(--line); background:white; transition:transform .22s ease, box-shadow .22s ease; }
.product-card:hover { transform:translateY(-5px); box-shadow:0 18px 38px rgba(16,23,35,.13); }
.product-image { display:flex; height:318px; align-items:center; justify-content:center; padding:18px; border-bottom:1px solid var(--line); background:#f2ece2; }
.product-image img { width:100%; height:100%; object-fit:contain; object-position:center; }
.product-copy { display:flex; flex:1; flex-direction:column; padding:21px 21px 23px; }
.product-kicker { display:block; margin-bottom:9px; color:var(--orange); font-size:10px; font-weight:900; letter-spacing:1px; text-transform:uppercase; }
.product-card h3 { display:-webkit-box; min-height:65px; margin:0; overflow:hidden; font-size:18px; line-height:1.22; letter-spacing:0; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.product-card p { margin:15px 0 0; color:var(--muted); font-size:13px; font-weight:650; line-height:1.5; }
.product-card .view { display:inline-flex; margin-top:auto; padding-top:18px; color:var(--orange); font-size:13px; font-weight:900; }
.buying-guide,.catalog-plan { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr); gap:48px; margin-top:58px; padding:42px; border:1px solid var(--line); background:#efe6d8; }
.buying-guide h2,.catalog-plan h2,.category-faq h2 { margin:0; font-size:clamp(28px,3.4vw,44px); line-height:1.06; }
.buying-guide p,.catalog-plan li { color:var(--muted); font-size:15px; font-weight:650; line-height:1.65; }
.buying-guide h3 { margin:0 0 14px; font-size:16px; }
.buying-guide ul { margin:0 0 25px; padding-left:19px; color:#485368; }
.buying-guide li { margin:9px 0; font-size:13px; font-weight:700; line-height:1.45; }
.catalog-plan { align-items:end; background:white; }
.catalog-plan ol { margin:0; padding-left:20px; }
.catalog-plan li { margin:9px 0; }
.category-faq { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:50px; margin-top:64px; padding-top:48px; border-top:1px solid var(--line); }
.category-faq details { border-bottom:1px solid var(--line); }
.category-faq summary { position:relative; padding:18px 28px 18px 0; cursor:pointer; color:#273246; font-size:15px; font-weight:850; line-height:1.45; list-style:none; }
.category-faq summary::-webkit-details-marker { display:none; }
.category-faq summary:after { position:absolute; top:15px; right:1px; color:var(--orange); content:"+"; font-size:22px; font-weight:500; }
.category-faq details[open] summary:after { content:"−"; }
.category-faq details p { margin:0 0 20px; color:var(--muted); font-size:14px; font-weight:600; line-height:1.65; }
.empty { display:grid; min-height:355px; place-items:center; margin-top:32px; padding:30px; border:1px solid var(--line); background:white; text-align:center; }
.empty h2 { margin:0; font-size:27px; }
.empty p { max-width:540px; color:var(--muted); font-size:14px; line-height:1.65; }
.detail-main { padding:44px 0 100px; }
.detail-grid { display:grid; grid-template-columns:minmax(0,1.06fr) minmax(340px,.94fr); gap:55px; align-items:start; }
.detail-image { position:sticky; top:110px; display:flex; min-height:620px; align-items:center; justify-content:center; padding:42px; border:1px solid var(--line); background:#eee6da; }
.detail-image img { width:100%; height:530px; object-fit:contain; }
.back { display:inline-flex; margin-bottom:35px; color:var(--orange); font-size:12px; font-weight:900; }
.detail-copy h1 { font-size:clamp(36px,4.1vw,63px); }
.detail-copy h1.product-title { max-width:720px; font-size:clamp(31px,3.25vw,48px); line-height:1.06; }
.detail-copy .description { margin:25px 0 34px; color:var(--muted); font-size:16px; line-height:1.65; }
.spec-title { padding-top:25px; border-top:1px solid var(--line); font-size:15px; }
.spec-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:18px; background:var(--line); }
.spec-grid div { min-height:103px; padding:16px; background:white; }
.spec-grid b { display:block; margin-bottom:10px; color:var(--orange); font-size:10px; letter-spacing:1px; text-transform:uppercase; }
.spec-grid span { color:#485368; font-size:12px; font-weight:700; line-height:1.45; }
.detail-contact { margin-top:34px; padding:23px; background:var(--ink-2); color:white; }
.detail-contact b { display:block; color:var(--gold); font-size:11px; letter-spacing:1px; text-transform:uppercase; }
.detail-contact p { margin:10px 0 18px; color:#d4d9e1; font-size:13px; line-height:1.55; }
.detail-next { margin-top:30px; padding:23px; border:1px solid var(--line); background:#f5f0e8; }
.detail-next h2 { margin:0; font-size:18px; }
.detail-next p { margin:11px 0 0; color:var(--muted); font-size:14px; font-weight:600; line-height:1.6; }
.contact-main { padding:66px 0 100px; }
.contact-layout { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:58px; align-items:start; }
.contact-intro { padding:8px 0; }
.contact-intro h1 { font-size:clamp(42px,5vw,70px); }
.contact-intro>p:not(.eyebrow) { max-width:540px; color:var(--muted); font-size:17px; font-weight:600; line-height:1.65; }
.contact-facts { margin-top:35px; border-top:1px solid var(--line); }
.contact-facts div { display:grid; gap:6px; padding:17px 0; border-bottom:1px solid var(--line); }
.contact-facts b { color:var(--orange); font-size:10px; letter-spacing:1px; text-transform:uppercase; }
.contact-facts a,.contact-facts span { color:#485368; font-size:14px; font-weight:700; line-height:1.5; }
.contact-facts a:hover { color:var(--orange); }
.inquiry-form { padding:30px; border:1px solid var(--line); background:white; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; margin-bottom:22px; }
.form-grid label { display:grid; gap:8px; color:#3f4b60; font-size:11px; font-weight:850; }
.form-grid .full { grid-column:1 / -1; }
.form-grid input,.form-grid select,.form-grid textarea { width:100%; min-height:45px; padding:11px 12px; border:1px solid #d9d2c8; border-radius:2px; background:#faf7f1; color:var(--ink); font:inherit; font-size:13px; }
.form-grid textarea { min-height:108px; resize:vertical; }
.form-grid input[type="file"] { padding:10px; background:white; }
.form-note { margin:14px 0 0; color:var(--muted); font-size:12px; line-height:1.55; }
.honeypot { position:absolute; left:-9999px; opacity:0; pointer-events:none; }
.site-footer { padding:27px 0; background:#070a0f; color:#c4cbd6; font-size:11px; }
.site-footer .wrap { display:flex; justify-content:space-between; gap:20px; }
.draft { color:var(--gold); font-weight:800; }
@media (max-width:960px) { .brand { min-width:0; } .nav-main { gap:15px; } .products-menu { right:-110px; grid-template-columns:repeat(2,180px); width:400px; } .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .detail-grid,.contact-layout,.buying-guide,.catalog-plan,.category-faq { grid-template-columns:1fr; gap:30px; } .detail-image { position:static; min-height:440px; } .detail-image img { height:390px; } }
@media (max-width:650px) { body { padding-bottom:70px; } .wrap { width:min(100% - 28px,1240px); } .nav { min-height:68px; gap:12px; } .brand img { width:40px; height:40px; } .brand strong { font-size:11px; } .brand span span { display:none; } .nav-main>a:not(.button) { display:none; } .products-menu { right:-50px; grid-template-columns:1fr 1fr; width:min(405px,calc(100vw - 28px)); gap:12px; } .products-menu a { font-size:11px; } .button { min-height:38px; padding:9px 10px; font-size:10px; } .quote-float { right:12px; bottom:12px; min-height:44px; padding:10px 13px; font-size:12px; } .quote-float:after { width:18px; height:18px; font-size:14px; } .whatsapp-float { right:12px; bottom:68px; width:44px; height:44px; font-size:11px; } .catalog-hero { padding:58px 0 48px; } .hero-copy { font-size:15px; } .catalog-top { display:block; } .catalog-top h2 { font-size:23px; } .catalog-count { display:block; margin-top:16px; } .product-grid { grid-template-columns:1fr; gap:15px; } .product-image { height:290px; } .buying-guide,.catalog-plan { margin-top:40px; padding:25px; } .category-faq { margin-top:48px; padding-top:35px; } .detail-main,.contact-main { padding-top:30px; } .detail-image { min-height:330px; padding:20px; } .detail-image img { height:290px; } .spec-grid,.form-grid { grid-template-columns:1fr; } .form-grid .full { grid-column:auto; } .inquiry-form { padding:20px; } .site-footer .wrap { display:block; line-height:1.7; } }