/* layout: bright e-commerce system inspired by real hardware-store references. vivid saturated green on white, clean Inter sans throughout, rounded friendly cards, circular add-to-cart buttons. sticky white nav -> contained rounded photo hero -> catalog -> footer. */
:root{
  --bg:#f6f7f5;
  --surface:#ffffff;
  --ink:#14170f;
  --ink-soft:#666b5d;
  --line:#e6e8e1;
  --accent:#1EA83C;
  --accent-deep:#157A2C;
  --accent-ink:#ffffff;
  --gold:#f5a623;
  --gold-ink:#2a1700;
  --steel:#14170f;
  --steel-line:#2a2e23;
  --ok:#1EA83C;
  --chip:#eef1ea;
  --glass-bg:var(--surface);
  --glass-bg-strong:var(--surface);
  --glass-border:var(--line);
  --glass-dark-bg:var(--steel);
  --glass-dark-border:var(--steel-line);
  --shadow-elev:0 2px 14px -6px rgba(20,23,15,.1);
  --shadow-pop:0 10px 28px -10px rgba(20,23,15,.22);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f110c; --surface:#171a11; --ink:#f3f1e6; --ink-soft:#a7aa9c;
    --line:#282b20; --accent:#3cc85c; --accent-deep:#2aa047; --accent-ink:#06220c;
    --gold:#f5b94a; --gold-ink:#1a1304;
    --steel:#0a0c07; --steel-line:#1f221a; --ok:#3cc85c; --chip:#1c1f15;
    --glass-bg:var(--surface); --glass-bg-strong:var(--surface); --glass-border:var(--line);
    --glass-dark-bg:var(--steel); --glass-dark-border:var(--steel-line);
    --shadow-elev:0 2px 14px -6px rgba(0,0,0,.4);
    --shadow-pop:0 10px 28px -10px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0f110c; --surface:#171a11; --ink:#f3f1e6; --ink-soft:#a7aa9c;
  --line:#282b20; --accent:#3cc85c; --accent-deep:#2aa047; --accent-ink:#06220c;
  --gold:#f5b94a; --gold-ink:#1a1304;
  --steel:#0a0c07; --steel-line:#1f221a; --ok:#3cc85c; --chip:#1c1f15;
  --glass-bg:var(--surface); --glass-bg-strong:var(--surface); --glass-border:var(--line);
  --glass-dark-bg:var(--steel); --glass-dark-border:var(--steel-line);
  --shadow-elev:0 2px 14px -6px rgba(0,0,0,.4);
  --shadow-pop:0 10px 28px -10px rgba(0,0,0,.5);
  color-scheme:dark;
}

/* no blur gimmicks */
*{backdrop-filter:none !important; -webkit-backdrop-filter:none !important}

*{box-sizing:border-box}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important} }
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:'Inter', Arial, sans-serif; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Inter', Arial, sans-serif; text-wrap:balance; margin:0; letter-spacing:-.02em; font-weight:800}
h2{position:relative}
.label{font-family:'Inter'; font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent)}
.wrap{max-width:1180px; margin:0 auto; padding-inline:24px}
button{font-family:inherit}
a{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ---- reveal-on-scroll (content stays visible at rest; only a subtle rise animates) ---- */
.reveal{opacity:1; transform:translateY(10px); transition:transform .5s ease}
.reveal.in{transform:translateY(0)}
.reveal-stagger > *{opacity:1; transform:translateY(10px); transition:transform .45s ease}
.reveal-stagger.in > *{transform:translateY(0)}
.reveal-stagger.in > *:nth-child(1){transition-delay:.02s}
.reveal-stagger.in > *:nth-child(2){transition-delay:.07s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.12s}
.reveal-stagger.in > *:nth-child(4){transition-delay:.17s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.22s}
.reveal-stagger.in > *:nth-child(6){transition-delay:.27s}

/* ---- header: utility strip + main nav ---- */
.topbar{background:#1a1c17; color:#9c998b; font-size:.72rem}
.topbar-inner{max-width:1180px; margin:0 auto; padding:7px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.topbar-links{display:flex; align-items:center; gap:18px; min-width:0}
.topbar-links a{color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; transition:color .15s}
.topbar-links a:hover{color:var(--gold)}
.topbar-tag{display:inline-flex; align-items:center; gap:6px; color:var(--gold); font-weight:700; letter-spacing:.04em}
.topbar-tag .dot{width:6px; height:6px; border-radius:50%; background:var(--gold); animation:pulse 2s ease-in-out infinite; flex:none}
@media(max-width:700px){.topbar-inner{padding:6px 16px}
  .topbar-links a span.full{display:none}}
@media(max-width:560px){.topbar-links a:not(.topbar-tag){display:none}}

.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:var(--surface); border-bottom:1px solid var(--line); box-shadow:0 2px 12px -8px rgba(20,23,15,.1)}
.nav-inner{max-width:1180px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); min-width:0}
.brand-badge{flex:none; width:40px; height:40px; display:flex; align-items:center; justify-content:center; transition:transform .25s}
.brand:hover .brand-badge{transform:rotate(-6deg) scale(1.06)}
.brand-badge img{height:38px; width:auto; display:block}
.brand-text{display:flex; flex-direction:column; line-height:1.15; min-width:0}
.brand-mark{font-family:'Inter'; font-weight:800; font-size:1.35rem; letter-spacing:-.02em; color:var(--ink)}
.brand-sub{font-size:.62rem; color:var(--ink-soft); letter-spacing:.09em; text-transform:uppercase; display:none}
@media(min-width:560px){.brand-sub{display:inline}}

.nav-links{display:flex; gap:2px; font-size:.84rem}
.nav-links a{position:relative; color:var(--ink-soft); text-decoration:none; padding:9px 14px; border-radius:20px; white-space:nowrap; transition:color .15s, background .15s; font-weight:600}
.nav-links a:hover{color:var(--ink); background:var(--chip)}
.nav-links a::after{content:""; position:absolute; left:14px; right:14px; bottom:3px; height:2px; background:var(--accent); transform:scaleX(0); transition:transform .2s; transform-origin:left}
.nav-links a:hover::after{transform:scaleX(1)}

.nav-actions{display:flex; align-items:center; gap:10px}
.cart-btn{position:relative; display:flex; align-items:center; gap:7px; background:var(--chip); border:1px solid var(--line); height:42px; padding:0 14px 0 12px; border-radius:21px; cursor:pointer; color:var(--ink); font-size:.82rem; font-weight:600; transition:border-color .15s, background .15s}
.cart-btn:hover{border-color:var(--accent); background:var(--surface)}
.cart-btn .cart-label{display:none}
@media(min-width:480px){.cart-btn .cart-label{display:inline}}
.cart-count{background:var(--accent); color:var(--accent-ink); font-size:.68rem; font-weight:800; min-width:19px; height:19px; border-radius:10px; display:flex; align-items:center; justify-content:center; padding:0 5px; transform:scale(0); transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.cart-count.show{transform:scale(1)}
.cart-count.bump{animation:bump .35s ease}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.nav-cta{position:relative; overflow:hidden; background:var(--accent); color:var(--accent-ink); font-weight:700; font-size:.85rem; height:42px; padding:0 24px; border-radius:21px; text-decoration:none; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; border:none; transition:background .2s, transform .15s; box-shadow:var(--shadow-elev)}
.nav-cta:hover{background:var(--accent-deep)}
@media(max-width:900px){.nav-links{display:none}}
@media(max-width:480px){.brand-badge{width:34px; height:34px} .brand-badge img{height:30px}}

/* ---- hero (contained rounded photo banner, like reference sites) ---- */
.hero{position:relative; overflow:hidden; min-height:min(78vh, 640px); display:flex; align-items:flex-end; color:#fff; border-radius:20px; max-width:1180px; margin:14px auto 0; width:calc(100% - 28px)}
.hero-media{position:absolute; inset:0; z-index:0}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:center 35%; transform:scale(1.06); animation:heroZoom 18s ease-in-out infinite alternate}
@keyframes heroZoom{from{transform:scale(1.06)} to{transform:scale(1.14)}}
.hero-media::after{content:""; position:absolute; inset:0; background:
    linear-gradient(0deg, rgba(8,20,6,.92) 0%, rgba(10,22,8,.6) 38%, rgba(10,22,8,.25) 62%, rgba(10,22,8,.45) 100%),
    linear-gradient(100deg, rgba(10,80,30,.55) 0%, rgba(10,60,20,.1) 50%, transparent 72%)}
.hero::before{display:none}
.hero-content{position:relative; z-index:1; max-width:860px; margin:0; padding:70px 44px 56px; width:100%}
@media(max-width:620px){.hero{border-radius:16px; margin:10px auto 0; width:calc(100% - 20px)} .hero-content{padding:48px 24px 40px}}
.hero-eyebrow{color:var(--gold); font-weight:700; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; display:flex; align-items:center; gap:8px}
.hero-eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--gold); animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.4; transform:scale(.7)}}
.hero h1{font-size:clamp(2.2rem, 5.6vw, 4rem); font-weight:800; line-height:1.02; max-width:16ch; color:#fff; margin-top:12px; text-shadow:0 2px 18px rgba(0,0,0,.35)}
.hero p{max-width:50ch; color:#e4e0d2; font-size:1.05rem; line-height:1.6; margin-top:16px}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-top:26px}
.btn-primary{background:var(--accent); color:var(--accent-ink); font-weight:700; font-size:.95rem; padding:15px 30px; border-radius:30px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer; transition:background .2s, transform .15s; letter-spacing:.01em}
.btn-primary{position:relative; overflow:hidden}
.btn-primary:hover{background:var(--accent-deep)}
.btn-primary:active{transform:translateY(0) scale(.98)}
.btn-ghost{border:1px solid rgba(255,255,255,.5); color:#fff; font-weight:600; font-size:.95rem; padding:15px 28px; border-radius:30px; text-decoration:none; transition:background .15s, border-color .15s; background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.14); border-color:#fff}
.hero-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:38px; max-width:640px}
.hero-stat{background:rgba(255,255,255,.08); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:16px 14px; transition:transform .2s, background .2s}
.hero-stat:hover{transform:translateY(-3px); background:rgba(255,255,255,.13)}
.hero-stat b{display:block; font-family:'Inter'; font-size:1.8rem; color:#fff; font-weight:600; font-variant-numeric:tabular-nums}
.hero-stat span{font-size:.68rem; color:#d8d4c6; letter-spacing:.04em}
.hero-scroll{position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:1; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.4); color:#fff; display:flex; align-items:center; justify-content:center; text-decoration:none; animation:bob 2.2s ease-in-out infinite; font-size:1rem}
@keyframes bob{0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,6px)}}
@media(max-width:620px){.hero-content{padding:92px 20px 56px} .hero-scroll{display:none}}

/* ---- marquee ---- */
.marquee-wrap{border-bottom:1px solid var(--line); background:var(--surface); overflow:hidden; padding:16px 0}
.marquee-track{display:flex; gap:40px; white-space:nowrap; animation:scroll 34s linear infinite; font-family:'Inter'; font-weight:700; font-size:1.05rem; color:var(--ink-soft); letter-spacing:.04em; width:max-content}
.marquee-track span{opacity:.85; transition:opacity .15s, color .15s}
.marquee-track span:hover{opacity:1; color:var(--accent)}
@keyframes scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ---- section heading ---- */
.section{padding:60px 24px}
.section-head{max-width:680px; margin-bottom:34px}
.section-head h2{font-size:clamp(1.6rem,3.2vw,2.3rem); font-weight:800; margin-top:8px}
.section-head p{color:var(--ink-soft); margin-top:10px; line-height:1.55}

/* ---- about ---- */
.about{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.about-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:start}
@media(max-width:760px){.about-grid{grid-template-columns:1fr}}
.about p{color:var(--ink-soft); line-height:1.7; margin:0 0 16px}
.about p:first-of-type{color:var(--ink); font-size:1.06rem}
.timeline{display:grid; gap:0; margin-top:22px; border-left:2px solid var(--line); padding-left:18px}
.timeline-item{position:relative; padding-bottom:18px}
.timeline-item::before{content:""; position:absolute; left:-23px; top:3px; width:9px; height:9px; border-radius:50%; background:var(--accent)}
.timeline-item b{display:block; font-family:'Inter'; font-weight:600; font-size:1rem; color:var(--ink)}
.timeline-item span{color:var(--ink-soft); font-size:.88rem}
.mvv{display:grid; gap:16px}
.mvv-card{border:1px solid var(--glass-border); border-left:3px solid var(--accent); padding:22px 22px; border-radius:14px; background:var(--glass-bg); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); box-shadow:var(--shadow-elev); transition:transform .25s, box-shadow .25s}
.mvv-card:hover{transform:translateX(4px); box-shadow:-4px 4px 0 0 color-mix(in srgb, var(--accent) 18%, transparent)}
.mvv-card h3{font-size:1.15rem; font-weight:700; margin-bottom:6px}
.mvv-card p{color:var(--ink-soft); font-size:.92rem; line-height:1.55; margin:0}

/* ---- benefits ---- */
.benefits-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:760px){.benefits-grid{grid-template-columns:1fr}}
.benefit{background:var(--glass-bg); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); border:1px solid var(--glass-border); border-radius:14px; padding:28px 26px; min-width:0; box-shadow:var(--shadow-elev); transition:transform .25s, box-shadow .25s, border-color .25s}
.benefit:hover{transform:translateY(-3px); box-shadow:0 14px 28px -18px rgba(0,0,0,.35); border-color:color-mix(in srgb, var(--accent) 35%, var(--line))}
.benefit .num{font-family:'Inter'; font-weight:600; font-size:1.7rem; color:var(--accent)}
.benefit:nth-child(2) .num{color:var(--gold)}
.benefit h3{font-size:1.1rem; font-weight:700; margin:10px 0 8px}
.benefit p{color:var(--ink-soft); line-height:1.55; font-size:.9rem; margin:0}

/* ---- credit/delivery split ---- */
.split{background:var(--bg)}
.split-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media(max-width:760px){.split-grid{grid-template-columns:1fr}}
.split-item{background:var(--surface); border:1px solid var(--line); border-top:4px solid var(--accent); border-radius:14px; padding:30px 28px; box-shadow:var(--shadow-elev); transition:transform .2s, box-shadow .2s}
.split-item:nth-child(2){border-top-color:var(--gold)}
.split-item:hover{transform:translateY(-3px); box-shadow:var(--shadow-pop)}
.split-item h3{color:var(--ink); font-size:1.2rem; font-weight:800; margin-bottom:10px}
.split-item p{color:var(--ink-soft); line-height:1.6; font-size:.92rem; margin:0}
.split-item .label{color:var(--accent)}
.split-item:nth-child(2) .label{color:var(--gold)}

/* ---- catalog ---- */
/* ---- how to buy ---- */
.howto{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.howto-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
@media(max-width:900px){.howto-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.howto-grid{grid-template-columns:1fr}}
.howto-step{position:relative; padding:24px 20px 20px; border:1px solid var(--glass-border); border-radius:14px; background:var(--glass-bg); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); box-shadow:var(--shadow-elev); transition:transform .25s, border-color .25s}
.howto-step:hover{transform:translateY(-4px); border-color:var(--accent)}
.hs-num{display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-family:'Inter'; font-weight:600; font-size:1.1rem; margin-bottom:12px}
.hs-num.gold{background:var(--gold); color:var(--gold-ink)}
.howto-step h3{font-size:1.05rem; font-weight:700; margin-bottom:6px}
.howto-step p{color:var(--ink-soft); font-size:.86rem; line-height:1.5; margin:0}
.howto-step::after{content:"→"; position:absolute; right:-24px; top:34px; color:var(--line); font-size:1.1rem; font-weight:800}
.howto-step:last-child::after{display:none}
@media(max-width:900px){.howto-step::after{display:none}}

.catalog{background:var(--bg)}
.catalog-toolbar{display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:24px}
.filters{display:flex; gap:8px; flex-wrap:wrap}
.chip{background:transparent; border:1px solid var(--line); color:var(--ink-soft); font-weight:500; font-size:.82rem; padding:9px 16px; border-radius:10px; cursor:pointer; transition:background .15s, color .15s, border-color .15s}
.chip:hover{border-color:var(--accent)}
.chip.active{background:var(--accent); color:var(--accent-ink)}
.search{position:relative; min-width:200px; flex:1; max-width:280px}
.search input{width:100%; padding:10px 14px 10px 36px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:.86rem}
.search input:focus{border-color:var(--accent)}
.search::before{content:"⌕"; position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--ink-soft); font-size:1rem}
.catalog-meta{color:var(--ink-soft); font-size:.84rem; margin-bottom:18px}
.product-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:16px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; min-width:0; box-shadow:0 2px 10px -6px rgba(0,0,0,.12); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.card:hover{transform:translateY(-5px); box-shadow:0 24px 40px -20px rgba(0,0,0,.35); border-color:color-mix(in srgb, var(--accent) 45%, var(--line))}
.card-media{aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; font-family:'Inter'; font-weight:600; font-size:1.6rem; color:#fff; position:relative; overflow:hidden; background:var(--chip)}
.card-media.has-photo{background:#fff}
.card-media.has-photo img{width:100%; height:100%; object-fit:contain; padding:10px; transition:transform .3s ease}
.card:hover .card-media.has-photo img{transform:scale(1.05)}
.card-media .photo-tag{position:absolute; left:8px; bottom:8px; background:color-mix(in srgb, var(--accent) 85%, black); color:#fff; font-size:.6rem; font-weight:800; letter-spacing:.03em; padding:3px 8px; border-radius:10px; text-transform:uppercase}
.card-media .ref{position:absolute; top:8px; left:8px; background:rgba(0,0,0,.28); color:#fff; font-size:.68rem; font-weight:700; padding:3px 8px; border-radius:10px; letter-spacing:.04em}
.card-media .stock{position:absolute; top:8px; right:8px; background:rgba(0,0,0,.28); color:#fff; font-size:.62rem; font-weight:700; padding:3px 8px; border-radius:10px}
.card-media .stock.low{background:var(--accent)}
.card-body{padding:14px 14px 16px; display:flex; flex-direction:column; gap:8px; flex:1; min-width:0}
.card-body h4{font-size:.92rem; font-weight:700; line-height:1.3; margin:0; font-family:'Inter'}
.card-code{color:var(--ink-soft); font-size:.74rem}
.card-price-row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto}
.card-price-wrap{display:flex; align-items:baseline; gap:6px; flex-wrap:wrap}
.price{font-family:'Inter'; font-weight:800; font-size:1.2rem; color:var(--ink); font-variant-numeric:tabular-nums}
.price-old{font-size:.78rem; color:var(--ink-soft); text-decoration:line-through; font-variant-numeric:tabular-nums}
.price-na{font-size:.84rem; font-weight:700; color:var(--accent)}
.card-unit{font-size:.7rem; color:var(--ink-soft)}
.add-fab{flex:none; width:40px; height:40px; border-radius:50%; background:var(--accent); color:#fff; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 16px -4px color-mix(in srgb, var(--accent) 60%, transparent); transition:background .15s, transform .15s}
.add-fab svg{width:19px; height:19px}
.add-fab:hover{background:var(--accent-deep); transform:scale(1.07)}
.add-fab:active{transform:scale(.94)}
.add-fab.added{background:#17923a}
.in-cart-tag{font-size:.72rem; font-weight:700; color:var(--accent); margin-top:-2px}
.empty-state{padding:50px 20px; text-align:center; color:var(--ink-soft)}

/* ---- cart drawer ---- */
.overlay{position:fixed; inset:0; background:rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:opacity .25s; z-index:40}
.overlay.open{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; height:100%; width:min(400px, 92vw); background:var(--glass-bg-strong); backdrop-filter:blur(22px) saturate(1.3); -webkit-backdrop-filter:blur(22px) saturate(1.3); border-left:1px solid var(--glass-border); z-index:41; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .3s cubic-bezier(.16,1,.3,1); padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); box-shadow:-30px 0 60px -20px rgba(0,0,0,.35)}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line)}
.drawer-head h3{font-size:1.1rem; font-weight:700}
.drawer-close{background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--ink-soft); width:32px; height:32px; border-radius:8px}
.drawer-close:hover{background:var(--chip); color:var(--ink)}
.drawer-items{flex:1; overflow-y:auto; padding:10px 20px; display:flex; flex-direction:column; gap:12px}
.drawer-item{display:flex; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line)}
.di-swatch{width:44px; height:44px; border-radius:8px; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; font-family:'Inter'; font-weight:600; font-size:.8rem; overflow:hidden}
.di-swatch.has-photo{background:#fff}
.di-swatch.has-photo img{width:100%; height:100%; object-fit:contain; padding:3px}
.di-info{flex:1; min-width:0}
.di-info b{display:block; font-size:.86rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.di-info span{font-size:.76rem; color:var(--ink-soft)}
.di-qty{display:flex; align-items:center; gap:6px}
.di-remove{background:none; border:none; color:var(--ink-soft); cursor:pointer; font-size:.95rem; padding:4px}
.di-remove:hover{color:var(--accent)}
.drawer-empty{padding:40px 20px; text-align:center; color:var(--ink-soft); font-size:.9rem}
.drawer-foot{padding:16px 20px; border-top:1px solid var(--line); display:grid; gap:10px}
.drawer-total{display:flex; justify-content:space-between; font-family:'Inter'; font-weight:600; font-size:1.15rem}
.drawer-note{font-size:.74rem; color:var(--ink-soft); line-height:1.4}

/* ---- FAQ ---- */
.faq{display:grid; gap:12px; max-width:820px}
.faq-item{background:var(--glass-bg); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); border:1px solid var(--glass-border); border-radius:14px; overflow:hidden; transition:border-color .2s}
.faq-item:hover{border-color:color-mix(in srgb, var(--accent) 40%, var(--glass-border))}
.faq-item summary{cursor:pointer; list-style:none; padding:18px 22px; font-weight:700; font-size:.98rem; display:flex; justify-content:space-between; align-items:center; gap:12px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+"; color:var(--accent); font-size:1.3rem; font-weight:400; flex:none; transition:transform .2s}
.faq-item[open] summary::after{content:"+"; transform:rotate(45deg)}
.faq-item .a{padding:0 22px 20px; color:var(--ink-soft); line-height:1.6; font-size:.94rem; max-width:65ch}

/* ---- contact ---- */
.contact{background:var(--surface); border-top:1px solid var(--line)}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr}}
.contact-copy p{color:var(--ink-soft); line-height:1.65; max-width:46ch}
.contact-panel{background:var(--surface); color:var(--ink); border-radius:16px; padding:28px; display:grid; gap:18px; border:1px solid var(--line); box-shadow:var(--shadow-elev); min-width:0}
.contact-row{display:flex; gap:14px; align-items:flex-start}
.contact-row .ic{width:34px; height:34px; border-radius:10px; background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:800; flex:none; font-size:.85rem}
.contact-row div b{display:block; font-size:.72rem; color:var(--ink-soft); letter-spacing:.06em; text-transform:uppercase; margin-bottom:3px}
.contact-row div span, .contact-row div a{color:var(--ink); font-size:.95rem; text-decoration:none; word-break:break-word}
.copy-btn{background:none; border:1px solid var(--line); color:var(--ink-soft); font-size:.74rem; padding:5px 10px; border-radius:20px; cursor:pointer; margin-top:4px; transition:border-color .15s, color .15s}
.copy-btn:hover{border-color:var(--accent); color:var(--accent)}
.contact-panel .btn-primary{justify-content:center; margin-top:4px}

footer{padding:26px 24px; text-align:center; color:var(--ink-soft); font-size:.78rem; border-top:1px solid var(--line)}

/* ---- toast ---- */
.toast{position:fixed; left:50%; bottom:24px; transform:translate(-50%, 20px); background:var(--ink); color:var(--bg); padding:12px 20px; border-radius:14px; font-size:.86rem; font-weight:600; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:50; display:flex; align-items:center; gap:8px}
.toast.show{opacity:1; transform:translate(-50%, 0)}

/* ---- sticky mobile CTA ---- */
.mobile-cta{position:fixed; left:0; right:0; bottom:0; padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px)); background:var(--surface); border-top:1px solid var(--line); z-index:25; display:none; gap:10px}
@media(max-width:620px){.mobile-cta{display:flex}}
.mobile-cta a, .mobile-cta button{flex:1; text-align:center; font-size:.85rem; padding:12px}

/* ---- active nav link ---- */
.nav-links a.active{color:var(--accent); background:var(--chip)}
.nav-links a.active::after{transform:scaleX(1)}

/* ---- featured products (inicio) ---- */
.featured{background:var(--bg)}
.featured-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:16px}
.featured-card{position:relative}
.best-badge{position:absolute; bottom:8px; right:8px; background:var(--gold); color:var(--gold-ink); font-size:.62rem; font-weight:800; letter-spacing:.03em; padding:3px 9px; border-radius:10px; text-transform:uppercase}
.featured-cta{text-align:center; margin-top:32px}

/* ---- page hero (nosotros / servicios / catalogo / contacto) — contained rounded banner ---- */
.page-hero{position:relative; overflow:hidden; background:linear-gradient(135deg, var(--accent-deep), var(--steel) 85%); color:#fff; padding:40px 36px 36px; border-radius:20px; max-width:1180px; margin:14px auto 0; width:calc(100% - 28px)}
.page-hero::before{display:none}
.page-hero-inner{max-width:1180px; margin:0 auto}
.page-hero .crumb{color:var(--gold); font-weight:700; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase}
.page-hero h1{font-size:clamp(2rem,4vw,2.6rem); font-weight:800; color:#fff; margin-top:10px; max-width:22ch}
.page-hero p{color:rgba(255,255,255,.82); font-size:1rem; max-width:56ch; margin-top:10px; line-height:1.55}
@media(max-width:620px){.page-hero{border-radius:16px; margin:10px auto 0; width:calc(100% - 20px); padding:32px 22px 28px}}

/* ---- contact form ---- */
.cform{display:grid; gap:14px}
.cform label{display:block; font-size:.78rem; font-weight:700; color:var(--ink-soft); margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em}
.cform input, .cform textarea{width:100%; padding:12px 14px; border-radius:14px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-family:inherit; font-size:.92rem}
.cform input:focus, .cform textarea:focus{border-color:var(--accent); outline:none}
.cform textarea{resize:vertical; min-height:110px}
.cform .btn-primary{border:none; width:100%; justify-content:center}

/* ---- info grid (nosotros stats) ---- */
.stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:28px}
@media(max-width:620px){.stat-grid{grid-template-columns:1fr}}
.stat-tile{background:var(--glass-bg); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); border:1px solid var(--glass-border); border-radius:14px; padding:26px 20px; text-align:center; box-shadow:var(--shadow-elev); transition:transform .25s}
.stat-tile:hover{transform:translateY(-3px)}
.stat-tile b{display:block; font-family:'Inter'; font-size:2.1rem; font-weight:600; color:var(--accent)}
.stat-tile span{font-size:.76rem; color:var(--ink-soft); letter-spacing:.04em; text-transform:uppercase}

/* ---- map card ---- */
.map-card{border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--surface)}
.map-card-visual{aspect-ratio:16/9; background:linear-gradient(135deg, var(--steel), #1a1b1f); display:flex; align-items:center; justify-content:center; position:relative}
.map-card-visual::before{content:"📍"; font-size:2.4rem}
.map-card-body{padding:16px}

/* ---- per-product WhatsApp quick quote ---- */
.wa-btn{display:inline-flex; align-items:center; gap:5px; margin-top:2px; color:var(--ink-soft); font-size:.74rem; font-weight:600; text-decoration:none; transition:color .15s}
.wa-btn:hover{color:var(--accent)}
.wa-btn::before{content:"💬"; font-size:.78rem}

/* ---- brand filter row ---- */
.brand-filters{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.chip-ghost{background:transparent; border:1px solid var(--line); color:var(--ink-soft)}
.chip-ghost.active{background:var(--ink); color:var(--bg); border-color:var(--ink)}

/* ---- photo hero (page-hero with background image) ---- */
.page-hero.has-photo{background-image:linear-gradient(135deg, rgba(10,60,20,.72), rgba(10,15,8,.88)), var(--hero-img); background-size:cover; background-position:center; padding:52px 36px 46px}
@media(max-width:620px){.page-hero.has-photo{padding:40px 22px 36px}}

/* ---- contact redesign ---- */
.contact-split{display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:stretch}
@media(max-width:860px){.contact-split{grid-template-columns:1fr}}
.contact-form-card{background:var(--glass-bg); backdrop-filter:blur(18px) saturate(1.25); -webkit-backdrop-filter:blur(18px) saturate(1.25); border:1px solid var(--glass-border); border-radius:14px; padding:34px; box-shadow:var(--shadow-elev)}
.contact-visual{position:relative; border-radius:16px; overflow:hidden; min-height:320px; background-size:cover; background-position:center; display:flex; align-items:flex-end}
.contact-visual::before{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(10,11,9,.92), rgba(10,11,9,.15) 55%)}
.contact-visual-body{position:relative; padding:26px; color:#f3f1ec; display:grid; gap:14px; width:100%}
.contact-visual-body .label{color:var(--gold)}
.cv-row{display:flex; gap:12px; align-items:flex-start}
.cv-row .ic{width:32px; height:32px; border-radius:8px; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; flex:none; font-size:.82rem}
.cv-row b{display:block; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:#cfc9ba; margin-bottom:2px}
.cv-row span, .cv-row a{color:#f3f1ec; font-size:.92rem; text-decoration:none}

.info-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:36px}
@media(max-width:760px){.info-strip{grid-template-columns:repeat(2,1fr)}}
.info-tile{background:var(--glass-bg); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); border:1px solid var(--glass-border); border-radius:14px; padding:22px; text-align:center; box-shadow:var(--shadow-elev); transition:transform .25s}
.info-tile:hover{transform:translateY(-3px)}
.info-tile .ic{font-size:1.4rem; margin-bottom:8px}
.info-tile b{display:block; font-size:.86rem; margin-bottom:4px}
.info-tile span{font-size:.78rem; color:var(--ink-soft)}

/* ---- mobile hamburger + slide-in menu ---- */
.hamburger{display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:42px; height:42px; border-radius:10px; border:1px solid var(--line); background:var(--chip); cursor:pointer}
.hamburger span{display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s, opacity .2s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:900px){.hamburger{display:flex}}

.mobile-menu-overlay{position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .25s; z-index:48}
.mobile-menu-overlay.open{opacity:1; pointer-events:auto}
.mobile-menu{position:fixed; top:0; right:0; height:100%; width:min(340px,86vw); background:var(--surface); border-left:1px solid var(--line); z-index:49; transform:translateX(100%); transition:transform .3s cubic-bezier(.16,1,.3,1); display:flex; flex-direction:column; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); box-shadow:-30px 0 60px -20px rgba(0,0,0,.18)}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu-head{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line)}
.mobile-menu-head .brand-mark{color:var(--ink)}
.mobile-menu-head .drawer-close{color:var(--ink-soft)}
.mobile-menu-head .drawer-close:hover{background:var(--chip); color:var(--ink)}
.mobile-menu-links{display:flex; flex-direction:column; padding:10px 14px; gap:2px}
.mobile-menu-links a{color:var(--ink); text-decoration:none; font-family:'Inter'; font-weight:700; font-size:1.3rem; padding:14px 12px; border-radius:10px; transition:background .15s, color .15s; border-bottom:1px solid var(--line)}
.mobile-menu-links a:hover, .mobile-menu-links a.active{background:var(--chip); color:var(--accent)}
.mobile-menu-foot{margin-top:auto; padding:20px; display:grid; gap:10px; border-top:1px solid var(--line)}
.mobile-menu-foot span{color:var(--ink-soft); font-size:.84rem; text-align:center}

/* ---- SVG icon badges ---- */
.icon-badge{width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); flex:none; transition:transform .25s, background .25s}
.icon-badge svg{width:24px; height:24px}
.icon-badge.gold{background:color-mix(in srgb, var(--gold) 16%, transparent); color:var(--gold)}
.icon-badge.on-dark{background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent)}
.icon-badge.sm{width:36px; height:36px; border-radius:10px}
.icon-badge.sm svg{width:18px; height:18px}
.benefit:hover .icon-badge{transform:scale(1.08) rotate(-4deg)}
.howto-step:hover .icon-badge{transform:scale(1.1) rotate(4deg)}

/* ---- values grid (nosotros) ---- */
.values-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:28px}
@media(max-width:900px){.values-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.values-grid{grid-template-columns:repeat(2,1fr)}}
.value-tile{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:22px 14px; border:1px solid var(--glass-border); border-radius:14px; background:var(--glass-bg); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); box-shadow:var(--shadow-elev); transition:transform .25s, border-color .25s}
.value-tile:hover{transform:translateY(-4px); border-color:var(--accent)}
.value-tile span{font-size:.8rem; font-weight:700; color:var(--ink)}

/* ---- enhanced timeline with icons ---- */
.timeline2{position:relative; margin-top:26px; padding-left:50px}
.timeline2::before{content:""; position:absolute; left:19px; top:6px; bottom:6px; width:2px; background:linear-gradient(180deg, var(--accent), var(--gold))}
.t2-item{position:relative; padding-bottom:30px}
.t2-item:last-child{padding-bottom:0}
.t2-icon{position:absolute; left:-50px; top:0; width:40px; height:40px; border-radius:50%; background:var(--surface); border:2px solid var(--accent); color:var(--accent); display:flex; align-items:center; justify-content:center; z-index:1}
.t2-icon svg{width:20px; height:20px}
.t2-item b{display:block; font-family:'Inter'; font-weight:600; font-size:1.1rem; color:var(--ink)}
.t2-item span{color:var(--ink-soft); font-size:.9rem}

/* ---- mvv with icons ---- */
.mvv-card{display:flex; flex-direction:column; gap:10px}
.mvv-card .icon-badge{margin-bottom:2px}

/* ---- stat tile icons ---- */
.stat-tile{display:flex; flex-direction:column; align-items:center; gap:8px}
.stat-tile .icon-badge{margin-bottom:4px}

/* ---- guarantee badge with draw-in check ---- */
.guarantee{display:flex; align-items:center; gap:18px; background:color-mix(in srgb, var(--accent) 8%, var(--surface)); color:var(--ink); border:1px solid var(--line); border-radius:16px; padding:26px 28px; margin-top:30px}
.guarantee svg{width:54px; height:54px; flex:none; color:var(--accent)}
.guarantee .check-path{stroke-dasharray:40; stroke-dashoffset:40; transition:stroke-dashoffset 1s ease .2s}
.guarantee.in .check-path{stroke-dashoffset:0}
.guarantee h3{font-size:1.1rem; font-weight:700; color:var(--ink); margin-bottom:4px}
.guarantee p{font-size:.88rem; color:var(--ink-soft); margin:0}

/* ---- floating WhatsApp button ---- */
.fab-whatsapp{position:fixed; right:18px; bottom:18px; z-index:35; width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px -8px rgba(0,0,0,.5); text-decoration:none; transition:transform .2s}
.fab-whatsapp svg{width:30px; height:30px}
.fab-whatsapp::before{content:""; position:absolute; inset:0; border-radius:50%; background:#25D366; opacity:.55; animation:fabPulse 2.4s ease-out infinite; z-index:-1}
.fab-whatsapp:hover{transform:scale(1.08)}
@keyframes fabPulse{0%{transform:scale(1); opacity:.55} 100%{transform:scale(1.9); opacity:0}}
@media(max-width:620px){.fab-whatsapp{right:14px; bottom:84px; width:52px; height:52px}
  .fab-whatsapp svg{width:26px; height:26px}}

/* ---- real map embed ---- */
.map-embed{position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); aspect-ratio:16/8}
.map-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0; filter:saturate(.9)}
@media(prefers-color-scheme: dark){.map-embed iframe{filter:saturate(.85) invert(.92) hue-rotate(180deg) contrast(.9)}}
:root[data-theme="dark"] .map-embed iframe{filter:saturate(.85) invert(.92) hue-rotate(180deg) contrast(.9)}

/* ---- developer credit ---- */
.dev-credit{text-align:center; padding:12px 24px; font-size:.72rem; color:var(--ink-soft); border-top:1px solid var(--line); background:var(--bg)}
.dev-credit a{color:var(--ink-soft); text-decoration:none; font-weight:700; transition:color .15s}
.dev-credit a:hover{color:var(--accent)}

/* ---- howto step label ---- */
.step-label{display:block; font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px}
.hs-num svg{display:block}