:root{
  --blue:#155EEF; --blue-dark:#0E4FD1; --ink:#101828; --ink-soft:#344054;
  --muted:#667085; --lime:#C7F36B; --cloud:#F5F7FA; --white:#fff;
  --line:#E4E7EC; --radius:18px; --shadow:0 10px 30px rgba(16,24,40,.08);
  --font-head:'Sora',system-ui,sans-serif; --font-ui:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-ui); background:var(--cloud); color:var(--ink); -webkit-font-smoothing:antialiased}
img{display:block; max-width:100%}
a{color:inherit}
button{font-family:inherit}

/* ── Topbar ─────────────────────────────── */
.topbar{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.topbar-inner{max-width:1200px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand-logo{height:40px; width:auto; object-fit:contain; background:var(--ink); border-radius:10px; padding:6px 10px}
.brand-text{display:flex; flex-direction:column; line-height:1.25; min-width:0}
.brand-text strong{font-family:var(--font-head); font-size:17px; letter-spacing:.2px}
.brand-text span{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cart-fab{position:relative; border:1px solid var(--line); background:var(--white); border-radius:999px; width:46px; height:46px; display:grid; place-items:center; cursor:pointer; color:var(--ink); transition:.2s}
.cart-fab:hover{border-color:var(--blue); color:var(--blue)}
.cart-count{position:absolute; top:-6px; right:-6px; background:var(--blue); color:#fff; font-size:11px; font-weight:700; min-width:22px; height:22px; border-radius:999px; display:grid; place-items:center; padding:0 5px; border:2px solid #fff}
.promo-strip{background:var(--ink); color:#fff; font-size:12.5px; padding:8px 16px; display:flex; align-items:center; justify-content:center; gap:8px; text-align:center}
.promo-dot{width:8px; height:8px; border-radius:50%; background:var(--lime); flex:none; animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ── Hero ───────────────────────────────── */
.hero{background:linear-gradient(135deg,#0B2A6B 0%,var(--blue) 55%,#2E7CF6 100%); color:#fff; overflow:hidden; position:relative}
.hero::after{content:""; position:absolute; right:-80px; top:-80px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle,rgba(199,243,107,.35),transparent 65%)}
.hero-inner{max-width:1200px; margin:0 auto; padding:44px 16px 40px; position:relative; z-index:1}
.hero-eyebrow{display:inline-block; font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); padding:6px 12px; border-radius:999px; margin-bottom:14px}
.hero h1{font-family:var(--font-head); font-size:clamp(30px,6vw,52px); font-weight:800; line-height:1.08; letter-spacing:-.5px}
.hero-sub{margin-top:12px; max-width:520px; font-size:15.5px; line-height:1.55; color:rgba(255,255,255,.88)}
.hero-cta{margin-top:20px; display:flex; gap:10px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; cursor:pointer; font-weight:700; font-size:15px; padding:13px 22px; border-radius:14px; transition:.18s; text-decoration:none}
.btn-primary{background:var(--lime); color:var(--ink)}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(199,243,107,.35)}
.btn-ghost{background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.3)}
.btn-ghost:hover{background:rgba(255,255,255,.2)}
.btn-sm{font-size:13.5px; padding:10px 16px}
.btn-whatsapp{background:#25D366; color:#fff; width:100%; font-size:16px}
.btn-whatsapp:hover{filter:brightness(.95)}

/* ── Filters ────────────────────────────── */
.filters{position:sticky; top:var(--sticky-top,104px); z-index:40; background:rgba(245,247,250,.94); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); scroll-margin-top:120px}
.filters-inner{max-width:1200px; margin:0 auto; padding:12px 16px}
.search-row{display:flex; gap:10px}
.search-box{flex:1; display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:0 14px; color:var(--muted)}
.search-box input{flex:1; border:none; outline:none; font-size:15px; padding:12px 0; background:transparent; color:var(--ink); font-family:inherit}
.search-box:focus-within{border-color:var(--blue); box-shadow:0 0 0 3px rgba(21,94,239,.12)}
#sortSelect{border:1px solid var(--line); border-radius:14px; background:#fff; font-size:14px; font-weight:600; padding:0 12px; color:var(--ink-soft); font-family:inherit; cursor:pointer}
.segments{display:flex; gap:8px; overflow-x:auto; padding:12px 2px 4px; scrollbar-width:none}
.segments::-webkit-scrollbar{display:none}
.seg{flex:none; border:1px solid var(--line); background:#fff; border-radius:999px; padding:9px 16px; font-size:13.5px; font-weight:600; color:var(--ink-soft); cursor:pointer; transition:.15s; white-space:nowrap}
.seg small{color:var(--muted); font-weight:500; margin-left:4px}
.seg:hover{border-color:var(--blue); color:var(--blue)}
.seg.active{background:var(--ink); border-color:var(--ink); color:#fff}
.seg.active small{color:rgba(255,255,255,.65)}

/* ── Catalog grid ───────────────────────── */
.catalog{max-width:1200px; margin:0 auto; padding:18px 16px 40px}
.results-line{font-size:13px; color:var(--muted); margin-bottom:12px}
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
@media(min-width:700px){.grid{grid-template-columns:repeat(3,1fr); gap:18px}}
@media(min-width:1024px){.grid{grid-template-columns:repeat(4,1fr)}}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:.18s; cursor:pointer}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:#cfd6e4}
.card-img{position:relative; aspect-ratio:1/1; background:#eef1f6; overflow:hidden}
.card-img img{width:100%; height:100%; object-fit:cover; transition:.3s}
.card:hover .card-img img{transform:scale(1.04)}
.badge-w{position:absolute; top:10px; left:10px; background:var(--ink); color:#fff; font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:999px; letter-spacing:.3px}
.card-body{padding:14px 14px 16px; display:flex; flex-direction:column; gap:6px; flex:1}
.card-name{font-family:var(--font-head); font-size:16px; font-weight:700; letter-spacing:.2px; line-height:1.25}
.card-code{font-size:11.5px; color:var(--muted); font-family:ui-monospace,monospace}
.card-meta{font-size:12.5px; color:var(--muted); line-height:1.45}
.card-foot{margin-top:auto; padding-top:8px; display:flex; align-items:center; justify-content:space-between; gap:8px}
.price{font-family:var(--font-head); font-size:20px; font-weight:800; color:var(--blue)}
.price small{font-size:12px; font-weight:600; color:var(--muted)}
.add-btn{border:none; background:var(--blue); color:#fff; font-weight:700; font-size:13.5px; padding:10px 16px; border-radius:12px; cursor:pointer; transition:.15s}
.add-btn:hover{background:var(--blue-dark)}
.add-btn.in-cart{background:var(--ink)}
.empty{text-align:center; padding:60px 20px; color:var(--muted)}
.empty-title{font-family:var(--font-head); font-size:20px; font-weight:700; color:var(--ink); margin-bottom:8px}
.empty .btn{margin-top:16px; color:var(--blue); border-color:var(--blue)}

/* ── How ────────────────────────────────── */
.how{background:#fff; border-top:1px solid var(--line)}
.how-inner{max-width:1200px; margin:0 auto; padding:44px 16px}
.how h2{font-family:var(--font-head); font-size:24px; margin-bottom:18px}
.how ol{list-style:none; display:grid; gap:14px}
@media(min-width:700px){.how ol{grid-template-columns:repeat(3,1fr)}}
.how li{background:var(--cloud); border:1px solid var(--line); border-radius:16px; padding:18px; font-size:14.5px; line-height:1.55; color:var(--ink-soft); counter-increment:step}
.how li::before{content:counter(step); counter-increment:step; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--lime); font-family:var(--font-head); font-weight:800; margin-bottom:10px; color:var(--ink)}
.how ol{counter-reset:step}

/* ── Footer ─────────────────────────────── */
.footer{background:var(--ink); color:#fff; text-align:center; padding:36px 16px 44px}
.footer-brand{font-family:var(--font-head); font-weight:700; font-size:16px}
.footer-note{font-size:13px; color:rgba(255,255,255,.65); margin-top:8px}
.footer-powered{font-size:12.5px; color:rgba(255,255,255,.5); margin-top:14px}
.footer-powered strong{color:var(--lime)}

/* ── Modal ──────────────────────────────── */
.modal-backdrop,.drawer-backdrop{position:fixed; inset:0; background:rgba(16,24,40,.55); backdrop-filter:blur(3px); z-index:100; display:flex; align-items:flex-end; justify-content:center}
@media(min-width:700px){.modal-backdrop{align-items:center; padding:24px}}
.modal{background:#fff; border-radius:22px 22px 0 0; width:100%; max-width:640px; max-height:92dvh; overflow:auto; position:relative; animation:slideUp .25s ease}
@media(min-width:700px){.modal{border-radius:22px}}
@keyframes slideUp{from{transform:translateY(40px); opacity:.6}to{transform:none; opacity:1}}
.modal-close{position:absolute; top:12px; right:12px; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:#fff; font-size:16px; cursor:pointer; z-index:2; color:var(--ink)}
.modal-img{width:100%; aspect-ratio:4/3; object-fit:cover; background:#eef1f6}
.modal-body-inner{padding:20px 20px 26px}
.modal-name{font-family:var(--font-head); font-size:24px; font-weight:800}
.modal-code{font-size:12.5px; color:var(--muted); font-family:ui-monospace,monospace; margin-top:4px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0}
.chip{font-size:12px; font-weight:600; background:var(--cloud); border:1px solid var(--line); border-radius:999px; padding:6px 12px; color:var(--ink-soft)}
.chip.hl{background:var(--lime); border-color:var(--lime); color:var(--ink)}
.specs{width:100%; border-collapse:collapse; font-size:13.5px; margin:6px 0 16px}
.specs td{padding:9px 4px; border-bottom:1px solid var(--line); vertical-align:top}
.specs td:first-child{color:var(--muted); font-weight:600; width:38%}
.modal-buy{display:flex; align-items:center; justify-content:space-between; gap:12px; position:sticky; bottom:0; background:#fff; padding-top:12px; border-top:1px solid var(--line)}
.modal-price{font-family:var(--font-head); font-size:26px; font-weight:800; color:var(--blue)}
.qty{display:flex; align-items:center; gap:10px}
.qty button{width:38px; height:38px; border-radius:12px; border:1px solid var(--line); background:#fff; font-size:18px; cursor:pointer; font-weight:700}
.qty b{font-size:16px; min-width:24px; text-align:center}

/* ── Drawer ─────────────────────────────── */
.drawer-backdrop{justify-content:flex-end; align-items:stretch}
.drawer{background:#fff; width:min(420px,100%); height:100dvh; display:flex; flex-direction:column; animation:slideIn .25s ease; position:relative}
@keyframes slideIn{from{transform:translateX(60px); opacity:.6}to{transform:none; opacity:1}}
.drawer-head{display:flex; align-items:center; justify-content:space-between; padding:18px 18px 12px; border-bottom:1px solid var(--line); position:relative}
.drawer-head h2{font-family:var(--font-head); font-size:19px}
.drawer-head .modal-close{position:static}
.drawer-lines{flex:1; overflow:auto; padding:12px 18px; display:flex; flex-direction:column; gap:12px}
.line{display:flex; gap:12px; align-items:center; background:var(--cloud); border-radius:14px; padding:10px}
.line img{width:64px; height:64px; object-fit:cover; border-radius:10px; background:#e5e9f0; flex:none}
.line-info{flex:1; min-width:0}
.line-info strong{font-size:13.5px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.line-info span{font-size:12px; color:var(--muted)}
.line-qty{display:flex; align-items:center; gap:8px}
.line-qty button{width:30px; height:30px; border-radius:9px; border:1px solid var(--line); background:#fff; cursor:pointer; font-weight:700}
.line-qty b{font-size:14px; min-width:20px; text-align:center}
.line-total{font-size:13.5px; font-weight:700; color:var(--blue); white-space:nowrap}
.drawer-empty{text-align:center; color:var(--muted); padding:50px 10px; font-size:14.5px}
.drawer-foot{padding:16px 18px calc(18px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px}
.drawer-total{display:flex; justify-content:space-between; align-items:center; font-size:14px; color:var(--muted)}
.drawer-total strong{font-family:var(--font-head); font-size:22px; color:var(--ink)}
.drawer-note{font-size:12px; color:var(--muted); text-align:center}
[hidden]{display:none !important}