:root{
  --bg:#0a0a0a;
  --bg-2:#141414;
  --bg-3:#050505;
  --ink:#ffffff;
  --red:#e10600;
  --red-hot:#ff1a12;
  --red-deep:#9c0400;
  --mute:rgba(255,255,255,0.62);
  --line:rgba(255,255,255,0.14);
  --glass:rgba(255,255,255,.05);
  --glass-strong:rgba(255,255,255,.09);
  --glass-border:rgba(255,255,255,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:100px}
html,body{background:var(--bg);color:var(--ink);font-family:"Inter",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%;height:auto}
::selection{background:var(--red);color:#fff}

/* ============ TOPBAR TRUST ============ */
.topbar{
  position:relative;z-index:60;background:#000;
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:9px 40px;
  display:flex;align-items:center;justify-content:center;gap:36px;
  font-family:"Barlow Condensed",sans-serif;font-weight:500;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.62);
  overflow:hidden;
}
.topbar i{font-style:normal;color:var(--red);margin-right:8px;font-weight:700}
.topbar .sep{width:3px;height:3px;background:rgba(255,255,255,.2);border-radius:50%}

/* ============ NAV ============ */
.nav{
  position:sticky;top:0;z-index:50;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:20px 40px;
  transition:background .35s ease, backdrop-filter .35s ease, border-color .35s ease, padding .35s ease;
  border-bottom:1px solid transparent;
  background:rgba(10,10,10,0);
}
.nav.scrolled{
  background:rgba(10,10,10,.85);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom-color:var(--line);
  padding:14px 40px;
}
.wordmark{
  font-family:"Anton",sans-serif;
  font-size:22px;letter-spacing:.14em;text-transform:uppercase;
  display:flex;align-items:center;gap:2px;
}
.wordmark .m{color:var(--red);margin-right:1px}
.wordmark .dot{width:6px;height:6px;background:var(--red);border-radius:50%;display:inline-block;margin:0 10px 2px;transform:translateY(-2px);animation:dot-pulse 2.4s infinite}
.wordmark .city{font-family:"Barlow Condensed",sans-serif;font-weight:500;letter-spacing:.32em;font-size:11px;color:var(--mute)}
@keyframes dot-pulse{0%,100%{box-shadow:0 0 0 0 rgba(225,6,0,.5)}50%{box-shadow:0 0 0 6px rgba(225,6,0,0)}}

.menu{display:flex;gap:30px;align-items:center}
.menu a{
  font-family:"Barlow Condensed",sans-serif;
  font-weight:600;font-size:13px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(255,255,255,.9);
  position:relative;padding:6px 0;
}
.menu a::after{content:"";position:absolute;left:50%;right:50%;bottom:0;height:2px;background:var(--red);transition:left .25s ease,right .25s ease}
.menu a:hover::after{left:0;right:0}

.nav-right{display:flex;justify-content:flex-end;align-items:center;gap:10px}
.btn-icon{
  display:inline-flex;align-items:center;gap:9px;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  padding:11px 16px;border-radius:2px;
  background:var(--glass);border:1px solid var(--glass-border);
  color:#fff;backdrop-filter:blur(12px) saturate(160%);
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-icon:hover{background:var(--glass-strong);border-color:#fff;transform:translateY(-1px)}
.btn-icon svg{width:14px;height:14px;flex:0 0 auto}
.pill{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--red);color:#fff;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  padding:12px 18px 11px;border-radius:2px;
  transition:background .2s ease, transform .2s ease;
}
.pill:hover{background:var(--red-hot);transform:translateY(-1px)}
.pill .arrow{width:14px;height:10px;position:relative}
.pill .arrow::before,.pill .arrow::after{content:"";position:absolute;background:#fff}
.pill .arrow::before{left:0;right:0;top:50%;height:2px;transform:translateY(-50%)}
.pill .arrow::after{right:0;top:50%;width:8px;height:8px;border-right:2px solid #fff;border-top:2px solid #fff;transform:translate(0,-50%) rotate(45deg);background:none}

.burger{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:2px;align-items:center;justify-content:center}
.burger span{display:block;width:18px;height:2px;background:#fff;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:#fff}
.burger span::before{top:-6px}.burger span::after{top:6px}

/* ============ HERO (íntegro v1) ============ */
.hero{position:relative;height:100vh;min-height:640px;width:100%;overflow:hidden;isolation:isolate}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.hero .fallback{
  position:absolute;inset:0;z-index:0;overflow:hidden;
  background:
    radial-gradient(120% 80% at 75% 55%, rgba(225,6,0,.18) 0%, rgba(225,6,0,0) 55%),
    radial-gradient(80% 60% at 20% 40%, rgba(60,60,60,.45) 0%, rgba(10,10,10,0) 60%),
    linear-gradient(135deg, #141414 0%, #0a0a0a 60%, #050505 100%);
}
.hero .fallback::before{
  content:"";position:absolute;inset:-20%;
  background:conic-gradient(from 210deg at 70% 50%, rgba(255,255,255,0) 0deg, rgba(255,255,255,.06) 20deg, rgba(255,255,255,0) 40deg);
  animation:sweep 9s ease-in-out infinite;
}
.hero .fallback::after{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 1px, transparent 1px 60px);
  mix-blend-mode:overlay;
}
@keyframes sweep{0%,100%{opacity:.3;transform:translateX(-4%)}50%{opacity:1;transform:translateX(4%)}}

/* motion streaks */
.streaks{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55}
.streaks i{position:absolute;height:1px;background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.5), rgba(225,6,0,.4), rgba(255,255,255,0));animation:streak 2.8s linear infinite}
.streaks i:nth-child(1){top:22%;left:-30%;width:40%;animation-delay:.0s}
.streaks i:nth-child(2){top:38%;left:-30%;width:55%;animation-delay:.6s;opacity:.7}
.streaks i:nth-child(3){top:58%;left:-30%;width:30%;animation-delay:1.2s;opacity:.4}
.streaks i:nth-child(4){top:71%;left:-30%;width:48%;animation-delay:1.8s;opacity:.6}
.streaks i:nth-child(5){top:84%;left:-30%;width:35%;animation-delay:2.2s;opacity:.5}
@keyframes streak{0%{transform:translateX(0)}100%{transform:translateX(260%)}}

.hero .grade{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 35%, rgba(0,0,0,.15) 65%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 70%, rgba(0,0,0,.55) 100%);
}
.hero .noise{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.08;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.9'/></svg>");
}

.edge{position:absolute;z-index:3;color:var(--mute);font-family:"Barlow Condensed",sans-serif;font-weight:500;font-size:11px;letter-spacing:.3em;text-transform:uppercase}
.edge.tl{top:calc(var(--navH,78px) + 24px);left:40px}
.edge.tr{top:calc(var(--navH,78px) + 24px);right:40px;text-align:right}
.edge.tr b{color:#fff;font-weight:600}
.edge .red{color:var(--red);animation:dot-pulse 1.6s infinite;display:inline-block;border-radius:50%}

.content{position:absolute;z-index:4;left:0;right:0;bottom:0;padding:0 40px 92px}
.eyebrow{display:flex;align-items:center;gap:14px;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--red);margin-bottom:28px}
.eyebrow .bar{width:42px;height:2px;background:var(--red)}
.eyebrow span{color:var(--red)}
.eyebrow em{font-style:normal;color:rgba(255,255,255,.55);margin:0 2px}

.headline{
  font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(64px, 14vw, 220px);line-height:.86;letter-spacing:-.015em;color:#fff;max-width:12ch;
}
.headline .l2{display:block;position:relative}
.headline .l2 .period{color:var(--red)}
.headline .l2::before{content:"";position:absolute;left:0;top:-.18em;width:.22em;height:3px;background:var(--red)}

.sub{margin-top:28px;max-width:54ch;font-size:17px;line-height:1.55;color:rgba(255,255,255,.86);font-weight:300}

.ctas{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:14px;letter-spacing:.24em;text-transform:uppercase;
  padding:18px 26px;border-radius:2px;
  transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn.primary{background:var(--red);color:#fff}
.btn.primary:hover{background:var(--red-hot);transform:translateY(-1px)}
.btn.ghost{border:1px solid rgba(255,255,255,.5);color:#fff}
.btn.ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn.glass{background:var(--glass);border:1px solid var(--glass-border);color:#fff;backdrop-filter:blur(14px) saturate(160%)}
.btn.glass:hover{background:var(--glass-strong);border-color:#fff;transform:translateY(-1px)}
.btn .arr{display:inline-block;transform:translateY(-1px)}
.btn svg{width:16px;height:16px;flex:0 0 auto}

.scroll{
  position:absolute;z-index:4;right:40px;bottom:92px;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:"Barlow Condensed",sans-serif;font-weight:600;
  font-size:11px;letter-spacing:.36em;text-transform:uppercase;color:rgba(255,255,255,.7);
  display:flex;align-items:center;gap:16px;
}
.scroll::after{content:"";width:2px;height:54px;background:linear-gradient(180deg,#fff,rgba(255,255,255,0));animation:drip 1.8s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}

.marquee{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,.55) 100%);
  overflow:hidden;height:44px;display:flex;align-items:center;
}
.marquee .label{
  flex:0 0 auto;padding:0 18px;height:100%;display:flex;align-items:center;
  background:var(--red);color:#fff;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;
}
.marquee .track{flex:1 1 auto;display:flex;gap:0;white-space:nowrap;overflow:hidden;mask-image:linear-gradient(90deg,transparent 0,#000 60px,#000 calc(100% - 60px),transparent 100%)}
.marquee .row{display:flex;gap:0;animation:slide 46s linear infinite}
.marquee .row span{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;
  font-size:14px;letter-spacing:.36em;text-transform:uppercase;color:rgba(255,255,255,.55);
  padding:0 28px;display:inline-flex;align-items:center;gap:28px;
}
.marquee .row span::after{content:"";width:5px;height:5px;background:var(--red);border-radius:50%;display:inline-block}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ TRUST STRIP ============ */
.trust-strip{
  background:#0a0a0a;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:34px 40px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:36px;
  max-width:none;
}
.trust-strip .ts{display:flex;align-items:center;gap:18px}
.trust-strip .ic{
  width:48px;height:48px;flex:0 0 auto;
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  color:var(--red);background:rgba(225,6,0,.06);
}
.trust-strip .ic svg{width:22px;height:22px}
.trust-strip .body .k{
  font-family:"Anton",sans-serif;font-size:22px;letter-spacing:.04em;text-transform:uppercase;color:#fff;line-height:1;
}
.trust-strip .body .k em{color:var(--red);font-style:normal}
.trust-strip .body .v{
  font-family:"Barlow Condensed",sans-serif;font-weight:500;
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--mute);margin-top:6px;
}

/* ============ CATEGORIES ============ */
.cats{padding:140px 40px 120px;background:#0a0a0a;position:relative}
.cats::before{content:"";position:absolute;left:40px;top:0;width:42px;height:3px;background:var(--red)}
.cats-head{display:grid;grid-template-columns:1.3fr 1fr;gap:80px;align-items:end;margin-bottom:64px}
.cats-head .left{min-width:0}
.cats-head .eyebrow{display:flex;align-items:center;gap:14px;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:var(--red);margin-bottom:28px}
.cats-head .eyebrow .bar{width:42px;height:2px;background:var(--red)}
.cats-head .index{margin-left:auto;color:rgba(255,255,255,.4);letter-spacing:.3em}
.cats-title{font-family:"Anton",sans-serif;text-transform:uppercase;font-weight:400;line-height:.86;letter-spacing:-.01em;font-size:clamp(56px, 8.4vw, 140px);color:#fff}
.cats-title .l2{display:block;color:rgba(255,255,255,.55)}
.cats-title .slash{color:var(--red);margin:0 .1em}
.cats-sub{text-align:right;max-width:42ch;justify-self:end;font-size:16px;line-height:1.6;color:rgba(255,255,255,.68);font-weight:300}
.cats-sub strong{color:#fff;font-weight:500}

.bento{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr;gap:1px;height:720px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
.card{
  position:relative;overflow:hidden;background:#0a0a0a;
  padding:40px;display:flex;flex-direction:column;justify-content:space-between;
  transition:background .3s ease;isolation:isolate;
}
.card::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60% 60% at 100% 100%, rgba(225,6,0,.22) 0%, rgba(225,6,0,0) 70%);transition:opacity .4s ease, filter .4s ease;opacity:.9}
.card::after{content:"";position:absolute;inset:8px;border:1px solid rgba(255,255,255,0);transition:border-color .3s ease;pointer-events:none;z-index:1}
.card > *{position:relative;z-index:2}
.card:hover::before{opacity:1;filter:saturate(1.4) brightness(1.3)}
.card:hover::after{border-color:rgba(255,255,255,.14)}
.card.rim-br::before{background:radial-gradient(60% 70% at 100% 100%, rgba(225,6,0,.28) 0%, rgba(225,6,0,0) 70%)}
.card.rim-t::before {background:radial-gradient(80% 50% at 50% 0%,    rgba(225,6,0,.26) 0%, rgba(225,6,0,0) 70%)}
.card.rim-b::before {background:radial-gradient(80% 50% at 50% 100%,  rgba(225,6,0,.26) 0%, rgba(225,6,0,0) 70%)}
.card.rim-l::before {background:radial-gradient(50% 80% at 0% 50%,    rgba(225,6,0,.26) 0%, rgba(225,6,0,0) 70%)}
.card.rim-r::before {background:radial-gradient(50% 80% at 100% 50%,  rgba(225,6,0,.26) 0%, rgba(225,6,0,0) 70%)}
.card .scan{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 1px, transparent 1px 54px);mix-blend-mode:overlay}
.card .img{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;opacity:.32;filter:grayscale(.4) contrast(1.1);transition:opacity .4s ease, transform .8s ease}
.card:hover .img{opacity:.5;transform:scale(1.04)}
.card .count{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:12px}
.card .count em{font-style:normal;color:var(--red);font-weight:700}
.card .num{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:12px;letter-spacing:.3em;color:rgba(255,255,255,.35)}
.card .cat{font-family:"Anton",sans-serif;text-transform:uppercase;font-weight:400;color:#fff;line-height:.88;letter-spacing:-.005em;margin-top:20px}
.card .cat .period{color:var(--red)}
.card.lead{grid-row:1 / span 1}
.card.lead .cat{font-size:clamp(72px, 9vw, 140px)}
.card.lead .tag{font-family:"Barlow Condensed",sans-serif;font-weight:500;font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:20px;max-width:40ch;line-height:1.6}
.card.lead .tag b{color:#fff;font-weight:600}
.card.lead .bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta-arrow{display:inline-flex;align-items:center;gap:14px;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:14px;letter-spacing:.26em;text-transform:uppercase;color:var(--red);padding:16px 0;border-bottom:1px solid rgba(225,6,0,.4);transition:color .2s ease, border-color .2s ease, gap .2s ease}
.cta-arrow:hover{color:#fff;border-color:#fff;gap:20px}
.cta-arrow .arr{transition:transform .2s ease}
.cta-arrow:hover .arr{transform:translateX(4px)}
.card.lead .meta{display:flex;gap:32px;font-family:"Barlow Condensed",sans-serif;font-weight:500;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.card.lead .meta span b{color:rgba(255,255,255,.85);font-weight:600;display:block;margin-top:4px;font-size:13px;letter-spacing:.24em}
.grid4{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1px;background:rgba(255,255,255,.08)}
.grid4 .card{padding:28px}
.grid4 .cat{font-size:clamp(28px, 2.2vw, 38px)}
.grid4 .bottom{margin-top:auto}
.grid4 .mini-cta{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.5);display:inline-flex;align-items:center;gap:8px;margin-top:18px;transition:color .2s ease, gap .2s ease}
.card:hover .mini-cta{color:var(--red);gap:12px}

/* ============ TOP SELLERS ============ */
.sellers{padding:120px 40px;background:#0a0a0a;border-top:1px solid var(--line)}
.sellers-head{display:grid;grid-template-columns:1.3fr 1fr;gap:80px;align-items:end;margin-bottom:60px;max-width:1600px;margin-left:auto;margin-right:auto}
.sellers-head .eyebrow{margin-bottom:28px}
.sellers-head h2{font-family:"Anton",sans-serif;text-transform:uppercase;font-weight:400;line-height:.86;letter-spacing:-.01em;font-size:clamp(56px,8vw,128px);color:#fff}
.sellers-head h2 .l2{display:block;color:rgba(255,255,255,.55)}
.sellers-head h2 .period{color:var(--red)}
.sellers-head .sub{text-align:right;max-width:42ch;justify-self:end;font-size:16px;line-height:1.6;color:rgba(255,255,255,.68);font-weight:300}
.sellers-grid{
  max-width:1600px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.product{
  position:relative;background:#0a0a0a;border:1px solid var(--line);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .35s ease, border-color .35s ease;
}
.product:hover{transform:translateY(-4px);border-color:rgba(225,6,0,.5)}
.product .ph{
  position:relative;aspect-ratio:4/3;background:#141414;overflow:hidden;
}
.product .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease;filter:grayscale(.2) contrast(1.05)}
.product:hover .ph img{transform:scale(1.06)}
.product .ph::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.65) 100%)}
.product .badge{
  position:absolute;top:14px;left:14px;z-index:2;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#fff;
  background:var(--red);padding:6px 10px;
}
.product .ph .num{position:absolute;bottom:14px;right:16px;z-index:2;font-family:"Barlow Condensed",sans-serif;font-size:11px;letter-spacing:.3em;color:rgba(255,255,255,.7)}
.product .meta{padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px}
.product .brand{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--red)}
.product .name{font-family:"Anton",sans-serif;font-size:24px;letter-spacing:.02em;text-transform:uppercase;color:#fff;line-height:1.05}
.product .row{display:flex;justify-content:space-between;align-items:flex-end;margin-top:14px;gap:12px}
.product .price{font-family:"Anton",sans-serif;font-size:26px;color:#fff}
.product .price em{color:var(--red);font-style:normal;font-size:18px;text-decoration:line-through;margin-right:8px;color:rgba(255,255,255,.4)}
.product .stock{font-family:"Barlow Condensed",sans-serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#9bd76b;display:inline-flex;align-items:center;gap:6px}
.product .stock::before{content:"";width:6px;height:6px;background:#9bd76b;border-radius:50%;animation:dot-pulse 2s infinite}

/* ============ FLAGSHIP (íntegro v1) ============ */
.flagship{display:grid;grid-template-columns:1fr 1fr;min-height:600px;background:#0a0a0a;overflow:hidden}
.flagship .media{position:relative;background:#0a0a0a;overflow:hidden}
.flagship .media .img{
  position:absolute;inset:0;background-size:cover;background-position:center;
  filter:grayscale(.4) contrast(1.1) brightness(.7);
}
.flagship .media::before{content:"";position:absolute;inset:0;opacity:.4;background:repeating-linear-gradient(45deg,  rgba(255,255,255,.035) 0 2px, transparent 2px 6px),repeating-linear-gradient(-45deg, rgba(255,255,255,.02)  0 2px, transparent 2px 6px),radial-gradient(60% 80% at 30% 40%, rgba(40,40,40,.5) 0%, #050505 80%)}
.flagship .media::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg, rgba(225,6,0,0) 30%, rgba(225,6,0,.14) 55%, rgba(225,6,0,0) 75%);mix-blend-mode:screen}
.flagship .divider{position:absolute;top:30%;right:0;width:2px;height:40%;background:var(--red);z-index:3}
.flagship .media .tag{position:absolute;left:40px;bottom:32px;z-index:4;font-family:"Barlow Condensed",sans-serif;font-weight:500;font-size:11px;letter-spacing:.36em;text-transform:uppercase;color:rgba(255,255,255,.85);display:flex;align-items:center;gap:14px}
.flagship .media .tag::before{content:"";width:28px;height:1px;background:rgba(255,255,255,.4)}
.flagship .media .code{position:absolute;top:40px;left:40px;z-index:4;font-family:"Barlow Condensed",sans-serif;font-weight:500;font-size:11px;letter-spacing:.36em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.flagship .media .code b{color:#fff;font-weight:600}
.flagship .copy{padding:80px;display:flex;flex-direction:column;justify-content:center;gap:28px;position:relative}
.flagship .copy .eyebrow{display:flex;align-items:center;gap:14px;margin:0;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:var(--red)}
.flagship .copy .eyebrow .bar{width:42px;height:2px;background:var(--red)}
.flagship .copy .sweep{position:relative;height:1px;background:rgba(225,6,0,.2);overflow:hidden;max-width:420px}
.flagship .copy .sweep::after{content:"";position:absolute;inset:0;width:40%;background:var(--red);animation:sweep-line 3.2s ease-in-out infinite}
@keyframes sweep-line{0%{transform:translateX(-100%)}55%,100%{transform:translateX(260%)}}
.flagship .copy .head{font-family:"Anton",sans-serif;text-transform:uppercase;font-weight:400;font-size:clamp(56px, 6.6vw, 104px);line-height:.9;letter-spacing:-.015em;color:#fff}
.flagship .copy .head .l2{display:block;color:rgba(255,255,255,.6)}
.flagship .copy .head .period{color:var(--red)}
.flagship .copy .head sup{font-family:"Inter",sans-serif;font-weight:400;font-size:.3em;letter-spacing:0;color:var(--red);vertical-align:super;margin-left:.05em}
.flagship .copy p{max-width:460px;font-size:17px;line-height:1.55;color:rgba(255,255,255,.7);font-weight:300}
.flagship .stats{display:flex;align-items:stretch;gap:0;margin-top:4px}
.flagship .stats .s{padding:0 28px;display:flex;flex-direction:column;gap:6px;border-left:1px solid rgba(255,255,255,.14)}
.flagship .stats .s:first-child{padding-left:0;border-left:0}
.flagship .stats .k{font-family:"Anton",sans-serif;text-transform:uppercase;font-weight:400;font-size:28px;color:#fff;letter-spacing:.01em;line-height:1}
.flagship .stats .k em{font-style:normal;color:var(--red)}
.flagship .stats .v{font-family:"Barlow Condensed",sans-serif;font-weight:500;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.flagship .copy .ctas{display:flex;gap:12px;flex-wrap:wrap;align-self:flex-start;margin-top:8px}

/* ============ GALLERY ============ */
.gallery{padding:120px 40px;background:#050505}
.gallery-head{display:grid;grid-template-columns:1.3fr 1fr;gap:80px;align-items:end;margin-bottom:60px;max-width:1600px;margin-left:auto;margin-right:auto}
.gallery-head .eyebrow{margin-bottom:28px}
.gallery-head h2{font-family:"Anton",sans-serif;text-transform:uppercase;font-weight:400;line-height:.86;letter-spacing:-.01em;font-size:clamp(48px,7vw,108px);color:#fff}
.gallery-head h2 .l2{display:block;color:rgba(255,255,255,.55)}
.gallery-head h2 .period{color:var(--red)}
.gallery-head .sub{text-align:right;max-width:42ch;justify-self:end;font-size:16px;line-height:1.6;color:rgba(255,255,255,.68);font-weight:300}
.gallery-grid{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:12px}
.gallery-grid .g{position:relative;overflow:hidden;background:#0a0a0a;border:1px solid var(--line)}
.gallery-grid .g img{width:100%;height:100%;object-fit:cover;transition:transform .9s ease;filter:grayscale(.3) contrast(1.05)}
.gallery-grid .g:hover img{transform:scale(1.06)}
.gallery-grid .g::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.5));pointer-events:none}
.gallery-grid .g .label{position:absolute;left:14px;bottom:12px;z-index:2;font-family:"Barlow Condensed",sans-serif;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:#fff;font-weight:600}
.gallery-grid .big{grid-column:span 2;grid-row:span 2}
.gallery-grid .tall{grid-row:span 2}
.gallery-grid .wide{grid-column:span 2}

/* ============ BRANDS ============ */
.brands{padding:120px 40px;background:#0a0a0a}
.brands-head{display:grid;grid-template-columns:1.3fr 1fr;gap:80px;align-items:end;margin-bottom:72px;max-width:1600px;margin-left:auto;margin-right:auto}
.brands-head .eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:28px;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:var(--red)}
.brands-head .eyebrow .bar{width:42px;height:2px;background:var(--red)}
.brands-head h2{font-family:"Anton",sans-serif;text-transform:uppercase;font-weight:400;font-size:clamp(56px, 8.4vw, 140px);line-height:.86;letter-spacing:-.01em;color:#fff}
.brands-head h2 .l2{display:block;color:rgba(255,255,255,.55)}
.brands-head h2 .period{color:var(--red)}
.brands-head .sub{max-width:40ch;justify-self:end;text-align:right;font-size:16px;line-height:1.6;color:rgba(255,255,255,.68);font-weight:300}
.brands-head .sub strong{color:#fff;font-weight:500}
.brand-grid{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:repeat(6, 1fr);border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.08);gap:1px}
.brand-cell{height:140px;background:#0a0a0a;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;transition:background .25s ease;cursor:pointer}
.brand-cell .name{position:relative;z-index:2;font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(18px, 1.5vw, 24px);letter-spacing:.06em;color:rgba(255,255,255,.8);transition:color .25s ease, transform .25s ease;text-align:center;padding:0 12px}
.brand-cell .num{position:absolute;top:12px;left:14px;z-index:2;font-family:"Barlow Condensed",sans-serif;font-weight:500;font-size:10px;letter-spacing:.3em;color:rgba(255,255,255,.28);transition:color .25s ease}
.brand-cell::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 60px rgba(255,255,255,0);transition:box-shadow .3s ease}
.brand-cell:hover{background:var(--red)}
.brand-cell:hover .name{color:#fff;transform:translateY(-1px)}
.brand-cell:hover .num{color:rgba(255,255,255,.6)}
.brand-cell:hover::before{box-shadow:inset 0 0 80px rgba(255,255,255,.18)}
.brands-caption{text-align:center;margin-top:44px;font-family:"Barlow Condensed",sans-serif;font-weight:500;font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.brands-caption em{font-style:normal;color:var(--red);font-weight:700;margin-right:8px}

/* ============ WHY VS ONLINE ============ */
.why{padding:120px 40px;background:#0a0a0a;border-top:1px solid var(--line)}
.why-head{max-width:1600px;margin:0 auto 60px;display:grid;grid-template-columns:1.3fr 1fr;gap:80px;align-items:end}
.why-head .eyebrow{margin-bottom:28px}
.why-head h2{font-family:"Anton",sans-serif;text-transform:uppercase;font-weight:400;line-height:.86;letter-spacing:-.01em;font-size:clamp(48px,7vw,108px);color:#fff}
.why-head h2 .l2{display:block;color:rgba(255,255,255,.55)}
.why-head h2 .period{color:var(--red)}
.why-head .sub{text-align:right;max-width:42ch;justify-self:end;font-size:16px;line-height:1.6;color:rgba(255,255,255,.68);font-weight:300}
.compare{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);background:var(--line);gap:1px}
.compare .col{background:#050505;padding:48px 44px;display:flex;flex-direction:column;gap:22px}
.compare .col.win{background:#0a0a0a;position:relative}
.compare .col.win::before{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:var(--red)}
.compare .col h3{font-family:"Anton",sans-serif;font-weight:400;font-size:32px;letter-spacing:.04em;text-transform:uppercase}
.compare .col.win h3{color:#fff}
.compare .col.lose h3{color:rgba(255,255,255,.4)}
.compare .col h3 em{font-style:normal;color:var(--red)}
.compare .col ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.compare .col li{display:flex;align-items:flex-start;gap:14px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.86);font-weight:300}
.compare .col.lose li{color:rgba(255,255,255,.42);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.18)}
.compare .col li::before{content:"";flex:0 0 auto;width:18px;height:18px;border:1px solid var(--red);display:inline-block;margin-top:2px;position:relative}
.compare .col.win li::before{background:var(--red)}
.compare .col.win li::after{content:"";width:6px;height:10px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);position:absolute;margin-left:6px;margin-top:2px}
.compare .col.lose li::before{border-color:rgba(255,255,255,.2)}

/* ============ TESTIMONIALS (íntegro v1) ============ */
.testim{padding:120px 40px;background:#141414}
.testim-head{display:grid;grid-template-columns:1.5fr 1fr;gap:80px;align-items:end;margin-bottom:64px;max-width:1600px;margin-left:auto;margin-right:auto}
.testim-head .eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:28px;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:var(--red)}
.testim-head .eyebrow .bar{width:42px;height:2px;background:var(--red)}
.testim-head h2{font-family:"Anton",sans-serif;text-transform:uppercase;font-weight:400;font-size:clamp(56px, 8vw, 130px);line-height:.86;letter-spacing:-.01em;color:#fff}
.testim-head h2 .num{color:#fff}
.testim-head h2 .star{color:var(--red);font-family:"Inter",sans-serif;font-size:.85em;vertical-align:.05em;margin:0 .04em}
.testim-head h2 .l2{display:block;color:rgba(255,255,255,.55)}
.testim-head h2 .period{color:var(--red)}
.testim-stat{justify-self:end;position:relative;padding-left:24px;max-width:320px}
.testim-stat::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;background:var(--red)}
.testim-stat .big{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:44px;line-height:1;color:#fff;letter-spacing:.01em}
.testim-stat .big em{font-style:normal;color:var(--red)}
.testim-stat p{margin-top:10px;font-size:14px;line-height:1.55;color:rgba(255,255,255,.62);font-weight:300}
.testim-grid{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.t-card{background:#0a0a0a;border:1px solid rgba(255,255,255,.08);padding:40px;position:relative;display:flex;flex-direction:column;gap:24px;transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease}
.t-card:hover{transform:translateY(-4px);border-color:rgba(225,6,0,.35);box-shadow:inset 0 0 0 1px rgba(225,6,0,.25), 0 20px 40px -20px rgba(0,0,0,.6)}
.t-stars{color:var(--red);font-size:20px;letter-spacing:.12em;line-height:1;display:flex;align-items:center;gap:10px}
.t-stars .src{font-family:"Barlow Condensed",sans-serif;font-size:11px;letter-spacing:.3em;color:rgba(255,255,255,.45);text-transform:uppercase;margin-left:4px}
.t-quote{font-size:18px;line-height:1.6;color:rgba(255,255,255,.9);font-weight:300;letter-spacing:-.005em}
.t-quote::before{content:"\201C";color:var(--red);margin-right:2px;font-size:1.1em;line-height:0;vertical-align:-.15em}
.t-quote::after{content:"\201D";color:var(--red);margin-left:2px;font-size:1.1em;line-height:0;vertical-align:-.15em}
.t-foot{margin-top:auto;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:16px}
.t-avatar{width:44px;height:44px;border-radius:50%;flex:0 0 auto;background:radial-gradient(circle at 30% 30%, #ff2e27 0%, #9c0400 55%, #0a0a0a 100%);display:flex;align-items:center;justify-content:center;font-family:"Anton",sans-serif;font-size:14px;letter-spacing:.08em;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.t-who{display:flex;flex-direction:column;gap:4px;min-width:0}
.t-who .name{color:#fff;font-weight:600;font-size:14px;letter-spacing:.02em}
.t-who .role{font-family:"Barlow Condensed",sans-serif;font-weight:500;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.5)}

/* ============ FAQ ============ */
.faq{padding:120px 40px;background:#0a0a0a;border-top:1px solid var(--line)}
.faq-head{max-width:1200px;margin:0 auto 60px;display:grid;grid-template-columns:1.3fr 1fr;gap:80px;align-items:end}
.faq-head .eyebrow{margin-bottom:28px}
.faq-head h2{font-family:"Anton",sans-serif;text-transform:uppercase;font-weight:400;line-height:.86;letter-spacing:-.01em;font-size:clamp(48px,7vw,108px);color:#fff}
.faq-head h2 .l2{display:block;color:rgba(255,255,255,.55)}
.faq-head h2 .period{color:var(--red)}
.faq-head .sub{text-align:right;max-width:36ch;justify-self:end;font-size:16px;line-height:1.6;color:rgba(255,255,255,.68);font-weight:300}
.faq-list{max-width:1200px;margin:0 auto;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line);padding:28px 0;cursor:pointer}
.faq-item summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;font-family:"Anton",sans-serif;font-size:clamp(20px,2.4vw,28px);letter-spacing:.02em;text-transform:uppercase;color:#fff;line-height:1.2}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item .plus{flex:0 0 auto;width:28px;height:28px;position:relative;color:var(--red);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.faq-item .plus::before,.faq-item .plus::after{content:"";position:absolute;background:currentColor;border-radius:1px}
.faq-item .plus::before{left:13px;top:0;width:2px;height:28px;transition:opacity .25s ease}
.faq-item .plus::after{top:13px;left:0;width:28px;height:2px}
.faq-item[open] .plus{transform:rotate(180deg)}
.faq-item[open] .plus::before{opacity:0}
.faq-item .ans{padding:18px 60px 6px 0;font-size:15px;line-height:1.65;color:var(--mute);font-weight:300}
.faq-item .ans b{color:#fff;font-weight:500}

/* ============ MAP / CONTACT ============ */
.contact-map{padding:120px 40px;background:#050505;border-top:1px solid var(--line)}
.cm-grid{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.cm-info{background:#0a0a0a;padding:64px 56px;display:flex;flex-direction:column;gap:28px}
.cm-info .eyebrow{margin-bottom:8px}
.cm-info h3{font-family:"Anton",sans-serif;text-transform:uppercase;font-weight:400;font-size:clamp(40px,5vw,72px);line-height:.92;letter-spacing:-.01em;color:#fff}
.cm-info h3 .period{color:var(--red)}
.cm-info .blocks{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.cm-info .blk{padding:22px 20px;border:1px solid var(--line);background:rgba(255,255,255,.025)}
.cm-info .blk h4{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--red);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.cm-info .blk h4 .ic{display:inline-flex;width:14px;height:14px}
.cm-info .blk p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.85);font-weight:400}
.cm-info .blk small{display:block;margin-top:6px;font-family:"Barlow Condensed",sans-serif;font-size:11px;letter-spacing:.24em;color:var(--mute);text-transform:uppercase}
.cm-info .ctas{margin-top:8px}
.cm-map{background:#000;position:relative;min-height:420px;overflow:hidden}
.cm-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:invert(.92) hue-rotate(180deg) contrast(.95) saturate(.6)}
.cm-map::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,10,10,.45) 0%, rgba(10,10,10,0) 30%, rgba(10,10,10,0) 70%, rgba(10,10,10,.6) 100%);z-index:2}
.cm-map .pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);z-index:3;color:var(--red);pointer-events:none;animation:pin-bob 2.4s ease-in-out infinite}
.cm-map .pin svg{width:42px;height:42px;filter:drop-shadow(0 6px 12px rgba(225,6,0,.45))}
@keyframes pin-bob{0%,100%{transform:translate(-50%,-100%)}50%{transform:translate(-50%,calc(-100% - 8px))}}

/* ============ FINAL CTA (íntegro v1) ============ */
.final{position:relative;min-height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:120px 40px;isolation:isolate;background:#0a0a0a}
.final video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.final .fallback{position:absolute;inset:0;z-index:0;background:radial-gradient(70% 60% at 50% 50%, rgba(225,6,0,.22) 0%, rgba(225,6,0,0) 60%),linear-gradient(135deg,#141414 0%, #0a0a0a 60%, #050505 100%)}
.final .overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg, rgba(10,10,10,.85) 0%, rgba(10,10,10,.7) 50%, rgba(10,10,10,.95) 100%)}
.final .inner{position:relative;z-index:2;max-width:900px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:28px}
.final .eyebrow{display:inline-flex;align-items:center;gap:14px;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:13px;letter-spacing:.36em;text-transform:uppercase;color:var(--red)}
.final .eyebrow .bar{width:42px;height:2px;background:var(--red)}
.final h2{font-family:"Anton",sans-serif;text-transform:uppercase;font-weight:400;font-size:clamp(64px, 9vw, 150px);line-height:.86;letter-spacing:-.015em;color:#fff}
.final h2 .l2{display:block;color:rgba(255,255,255,.65)}
.final h2 .period{color:var(--red)}
.final p{max-width:540px;font-size:20px;line-height:1.55;color:rgba(255,255,255,.8);font-weight:300}
.final .ctas{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.final .info{display:flex;gap:40px;flex-wrap:wrap;justify-content:center;margin-top:24px;font-family:"Barlow Condensed",sans-serif;font-weight:500;font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.final .info span{display:inline-flex;align-items:center;gap:10px}
.final .info .ic{color:var(--red);font-size:14px}

/* ============ FOOTER (íntegro v1) ============ */
.foot{background:#000;padding:80px 40px 32px;position:relative;overflow:hidden;min-height:460px}
.foot-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;position:relative;z-index:2;max-width:1600px;margin:0 auto}
.foot-brand .wm{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:32px;letter-spacing:.14em;color:#fff;display:inline-flex;align-items:center}
.foot-brand .wm .m{color:var(--red)}
.foot-brand p{margin-top:20px;max-width:38ch;font-size:14px;line-height:1.6;color:rgba(255,255,255,.55);font-weight:300}
.foot-col h4{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--red);margin-bottom:20px}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot-col a{font-size:14px;color:rgba(255,255,255,.7);transition:color .2s ease}
.foot-col a:hover{color:#fff}
.foot-huge{position:absolute;left:0;right:0;bottom:80px;z-index:0;margin:0;pointer-events:none;font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(100px, 18vw, 260px);line-height:.86;letter-spacing:-.015em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.08);white-space:nowrap;overflow:hidden;text-align:center;display:none}
.foot-mask{
  position:absolute;left:0;right:0;bottom:40px;z-index:0;
  height:clamp(160px, 18vw, 260px);pointer-events:none;overflow:hidden;
  --mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 260' preserveAspectRatio='xMidYMid meet'><rect width='1600' height='260' fill='black'/><text x='800' y='200' text-anchor='middle' font-family='Anton, Impact, sans-serif' font-weight='400' font-size='260' letter-spacing='-4' fill='white'>MOTOBIKE</text></svg>");
}
.foot-mask video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-mask-image:var(--mask);mask-image:var(--mask);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:100% 100%;mask-size:100% 100%;filter:contrast(1.05) saturate(1.1)}
.foot-mask .stroke{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.foot-mask .stroke svg{width:100%;height:100%}
.foot-mask .stroke text{font-family:"Anton",sans-serif;font-weight:400;fill:transparent;stroke:rgba(255,255,255,.06);stroke-width:1;paint-order:stroke fill}
.foot-bar{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.08);padding-top:32px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;font-family:"Barlow Condensed",sans-serif;font-weight:500;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.4);max-width:1600px;margin:60px auto 0}
.foot-bar a{color:inherit;margin:0 4px}
.foot-bar a:hover{color:#fff}
.foot-bar .powered{display:inline-flex;align-items:center;gap:10px}
.foot-bar .powered .sq{width:14px;height:14px;background:linear-gradient(135deg, var(--red), #ff8a00 55%, #fff);display:inline-block}

/* ============ STICKY WHATSAPP ============ */
.sticky-wa{
  position:fixed;right:24px;bottom:24px;z-index:60;
  width:60px;height:60px;border-radius:50%;
  background:#0a0a0a;border:1px solid var(--glass-border);
  display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 14px 40px -12px rgba(0,0,0,.7), 0 0 0 0 rgba(225,6,0,.5);
  transition:transform .25s ease, box-shadow .35s ease, background .25s ease;
  animation:sticky-pulse 3s ease-in-out infinite;
}
.sticky-wa:hover{background:var(--red);transform:scale(1.06);box-shadow:0 14px 40px -10px var(--red)}
.sticky-wa svg{width:26px;height:26px}
.sticky-wa .badge{position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:9px;letter-spacing:.18em;padding:3px 6px;border-radius:99px;text-transform:uppercase}
@keyframes sticky-pulse{0%,100%{box-shadow:0 14px 40px -12px rgba(0,0,0,.7),0 0 0 0 rgba(37,211,102,.4)}50%{box-shadow:0 14px 40px -12px rgba(0,0,0,.7),0 0 0 14px rgba(37,211,102,0)}}

/* ============ CUSTOM CURSOR (v1) — desactivado a favor del cursor nativo ============ */
@media (hover: hover) and (min-width: 1024px){
  .cursor{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;will-change:transform;mix-blend-mode:difference;display:none}
  .cursor-dot{width:12px;height:12px;border-radius:50%;background:#e10600;transform:translate3d(var(--x,0), var(--y,0), 0) translate(-50%,-50%) scale(1);transition:transform .25s cubic-bezier(.16,1,.3,1), background .25s ease}
  .cursor-ring{width:36px;height:36px;border-radius:50%;border:1px solid rgba(225,6,0,.5);background:transparent;transform:translate3d(var(--x,0), var(--y,0), 0) translate(-50%,-50%) scale(1);transition:transform .25s cubic-bezier(.16,1,.3,1), background .25s ease, border-color .25s ease}
  body.is-hovering .cursor-dot{transform:translate3d(var(--x,0), var(--y,0), 0) translate(-50%,-50%) scale(1.6)}
  body.is-hovering .cursor-ring{transform:translate3d(var(--x,0), var(--y,0), 0) translate(-50%,-50%) scale(2.2);background:rgba(225,6,0,.2);border-color:rgba(225,6,0,.7)}
  body.is-pressing .cursor-dot{transform:translate3d(var(--x,0), var(--y,0), 0) translate(-50%,-50%) scale(.6)}
  body.is-text .cursor{opacity:0}
}
@media (hover: none), (max-width: 1023px){.cursor{display:none !important}}

/* ============ SPLIT-TEXT REVEAL (v1 íntegro) ============ */
.split{display:inline}
.split .word{display:inline-block;vertical-align:bottom;clip-path:inset(-15% -.25em 0 -.05em);-webkit-clip-path:inset(-15% -.25em 0 -.05em)}
.split .word > i{display:inline-block;font-style:inherit;transform:translateY(110%);opacity:0;transition:transform 900ms cubic-bezier(.16,1,.3,1), opacity 900ms cubic-bezier(.16,1,.3,1);will-change:transform,opacity}
.split.is-revealed .word > i{transform:translateY(0);opacity:1}
@media (prefers-reduced-motion: reduce){.split .word > i{transform:none;opacity:1;transition:none}}

/* ============ RESPONSIVE ============ */
@media (max-width: 960px){
  .topbar{padding:8px 14px;gap:14px;font-size:9px;letter-spacing:.18em;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap}
  .topbar .sep{display:none}
  .nav{padding:14px 18px;grid-template-columns:1fr auto}
  .menu{display:none}
  .nav-right{display:none}
  .burger{display:flex}
  .edge.tl,.edge.tr{display:none}
  .content{padding:0 18px 76px}
  .scroll{display:none}
  .headline{font-size:clamp(56px,18vw,96px)}
  .sub{font-size:15px}
  .eyebrow{font-size:11px;gap:10px}
  .eyebrow .bar{width:24px}
  .marquee .label{padding:0 12px;font-size:10px}
  .trust-strip{grid-template-columns:1fr 1fr;gap:18px;padding:24px 18px}
  .trust-strip .ts{gap:12px}
  .trust-strip .ic{width:38px;height:38px}
  .trust-strip .body .k{font-size:18px}
  .trust-strip .body .v{font-size:9px;letter-spacing:.22em}
  .cats{padding:80px 18px}
  .cats-head{grid-template-columns:1fr;gap:24px;align-items:start}
  .cats-sub{text-align:left;justify-self:start}
  .bento{grid-template-columns:1fr;height:auto}
  .card.lead{padding:32px;min-height:440px}
  .card.lead .cat{font-size:64px}
  .grid4{grid-template-rows:repeat(4, 220px);grid-template-columns:1fr}
  .grid4 .cat{font-size:36px}
  .sellers{padding:80px 18px}
  .sellers-head{grid-template-columns:1fr;gap:24px;align-items:start}
  .sellers-head .sub{text-align:left;justify-self:start}
  .sellers-grid{grid-template-columns:1fr;gap:14px}
  .flagship{grid-template-columns:1fr}
  .flagship .media{min-height:300px;height:300px}
  .flagship .divider{top:auto;bottom:0;right:auto;left:30%;width:40%;height:2px}
  .flagship .copy{padding:60px 18px}
  .flagship .stats{flex-wrap:wrap;gap:16px 0}
  .gallery{padding:80px 18px}
  .gallery-head{grid-template-columns:1fr;gap:24px;align-items:start}
  .gallery-head .sub{text-align:left;justify-self:start}
  .gallery-grid{grid-template-columns:1fr 1fr;grid-auto-rows:140px;gap:8px}
  .gallery-grid .big,.gallery-grid .tall,.gallery-grid .wide{grid-column:auto;grid-row:auto}
  .brands{padding:80px 18px}
  .brands-head{grid-template-columns:1fr;gap:24px;align-items:start}
  .brands-head .sub{text-align:left;justify-self:start}
  .brand-grid{grid-template-columns:repeat(3, 1fr)}
  .brand-cell{height:100px}
  .why{padding:80px 18px}
  .why-head{grid-template-columns:1fr;gap:24px;align-items:start}
  .why-head .sub{text-align:left;justify-self:start}
  .compare{grid-template-columns:1fr}
  .compare .col{padding:32px 22px}
  .testim{padding:80px 18px}
  .testim-head{grid-template-columns:1fr;gap:24px;align-items:start}
  .testim-stat{justify-self:start}
  .testim-grid{grid-template-columns:1fr;gap:14px}
  .t-card{padding:28px}
  .faq{padding:80px 18px}
  .faq-head{grid-template-columns:1fr;gap:18px}
  .faq-head .sub{text-align:left;justify-self:start}
  .faq-item .ans{padding-right:0}
  .contact-map{padding:60px 18px}
  .cm-grid{grid-template-columns:1fr}
  .cm-info{padding:36px 22px}
  .cm-info .blocks{grid-template-columns:1fr}
  .cm-map{min-height:300px}
  .final{padding:80px 18px;min-height:auto}
  .final p{font-size:17px}
  .final .info{gap:18px;font-size:11px}
  .foot{padding:60px 18px 28px}
  .foot-top{grid-template-columns:1fr 1fr;gap:32px}
  .foot-brand{grid-column:1/-1}
  .foot-huge{display:block;position:relative;bottom:auto;margin:32px 0}
  .foot-mask{display:none}
  .foot-bar{flex-direction:column;align-items:flex-start;gap:14px}
  .sticky-wa{right:14px;bottom:14px;width:54px;height:54px}
}
@media (max-width: 430px){
  .ctas .btn{flex:1 1 100%;justify-content:center}
  .grid4{grid-template-rows:repeat(4,180px)}
  .gallery-grid{grid-template-columns:1fr;grid-auto-rows:200px}
  .brand-grid{grid-template-columns:repeat(2, 1fr)}
}

/* ============ LOGO IMG ============ */
.logo-img{
  display:block;height:46px;width:auto;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));
  transition:height .35s ease;
}
.nav.scrolled .logo-img{height:38px}
@media (max-width:960px){
  .logo-img{height:38px}
  .nav.scrolled .logo-img{height:32px}
}

/* ============ CATEGORY HERO (sub-landings) ============ */
.cat-hero{
  position:relative;height:62vh;min-height:480px;width:100%;overflow:hidden;isolation:isolate;
  background:#0a0a0a;
}
.cat-hero .ph{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;filter:grayscale(.35) contrast(1.1) brightness(.5)}
.cat-hero .grade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.25) 75%, rgba(0,0,0,0) 100%),linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(10,10,10,.85) 100%)}
.cat-hero .noise{position:absolute;inset:0;z-index:2;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.9'/></svg>")}
.cat-hero .content{position:absolute;z-index:4;left:0;right:0;bottom:0;padding:0 40px 60px;max-width:1600px;margin:0 auto}
.cat-hero .crumbs{display:flex;gap:14px;align-items:center;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:20px}
.cat-hero .crumbs a{color:rgba(255,255,255,.6);transition:color .2s ease}
.cat-hero .crumbs a:hover{color:var(--red)}
.cat-hero .crumbs .sep{color:rgba(255,255,255,.25)}
.cat-hero .crumbs .cur{color:var(--red)}
.cat-hero h1{
  font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(64px,11vw,180px);line-height:.86;letter-spacing:-.015em;color:#fff;
}
.cat-hero h1 .period{color:var(--red)}
.cat-hero .lead{margin-top:22px;max-width:54ch;font-size:17px;line-height:1.55;color:rgba(255,255,255,.86);font-weight:300}
.cat-hero .meta{margin-top:24px;display:flex;gap:32px;flex-wrap:wrap;font-family:"Barlow Condensed",sans-serif;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--mute)}
.cat-hero .meta b{color:#fff;display:block;font-weight:700;font-size:15px;margin-top:4px;letter-spacing:.06em}
.cat-hero .meta em{color:var(--red);font-style:normal}

/* ============ FILTERS ============ */
.filters{
  background:#0a0a0a;border-bottom:1px solid var(--line);
  padding:24px 40px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  position:sticky;top:0;z-index:30;backdrop-filter:blur(14px);
}
.filters .label{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute);margin-right:8px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  padding:9px 14px;border-radius:99px;border:1px solid var(--line);background:rgba(255,255,255,.025);color:rgba(255,255,255,.78);cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.chip:hover{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.3)}
.chip.is-active{background:var(--red);border-color:var(--red);color:#fff}
.chip .ct{font-size:10px;color:rgba(255,255,255,.55);margin-left:4px}
.chip.is-active .ct{color:rgba(255,255,255,.85)}

/* ============ CATEGORY PRODUCT GRID ============ */
.cat-grid{padding:80px 40px 100px;background:#0a0a0a}
.cat-grid-inner{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1280px){.cat-grid-inner{grid-template-columns:repeat(3,1fr)}}
@media (max-width:960px){
  .cat-grid{padding:40px 18px 60px}
  .cat-grid-inner{grid-template-columns:1fr 1fr;gap:12px}
  .filters{padding:14px 18px;gap:8px;overflow-x:auto;flex-wrap:nowrap}
  .cat-hero{height:54vh;min-height:420px}
  .cat-hero .content{padding:0 18px 40px}
  .cat-hero .meta{gap:18px}
}
@media (max-width:430px){.cat-grid-inner{grid-template-columns:1fr}}

/* ============ CATEGORY DESC + FAQ ============ */
.cat-desc{padding:100px 40px;background:#050505;border-top:1px solid var(--line)}
.cat-desc-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.cat-desc h2{font-family:"Anton",sans-serif;text-transform:uppercase;font-weight:400;font-size:clamp(40px,5vw,72px);line-height:.92;letter-spacing:-.01em;color:#fff;margin-bottom:24px}
.cat-desc h2 .period{color:var(--red)}
.cat-desc p{font-size:16px;line-height:1.7;color:var(--mute);margin-bottom:18px;font-weight:300}
.cat-desc p strong{color:#fff;font-weight:500}
.cat-desc .checks{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:18px}
.cat-desc .checks li{display:flex;align-items:flex-start;gap:14px;font-size:15px;line-height:1.5;color:#fff;font-weight:400}
.cat-desc .checks li::before{content:"";flex:0 0 auto;width:18px;height:18px;background:var(--red);position:relative;margin-top:2px}
.cat-desc .checks li::after{content:"";width:6px;height:10px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);position:absolute;margin-left:6px;margin-top:2px}
@media (max-width:960px){.cat-desc{padding:60px 18px}.cat-desc-inner{grid-template-columns:1fr;gap:32px}}


/* ============ BRAND SVG LOGOS ============ */
.brand-cell .logo{
  position:relative;z-index:2;width:80%;max-width:170px;height:50px;
  display:flex;align-items:center;justify-content:center;
  filter:grayscale(1) brightness(.85);
  transition:filter .25s ease, transform .25s ease;
}
.brand-cell .logo svg{width:100%;height:100%;display:block}
.brand-cell:hover .logo{filter:grayscale(0) brightness(1.1);transform:translateY(-1px)}
.brand-cell:hover .logo svg text{fill:#fff !important}

/* Wordmark fallback (if logo.png missing) */
.wordmark-fallback .m{color:var(--red);margin-right:1px;font-family:"Anton",sans-serif;font-size:22px;letter-spacing:.14em;text-transform:uppercase}
.wordmark-fallback{font-family:"Anton",sans-serif;font-size:22px;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.wordmark-fallback .dot{width:6px;height:6px;background:var(--red);border-radius:50%;display:inline-block;margin:0 10px 2px;transform:translateY(-2px);animation:dot-pulse 2.4s infinite}
.wordmark-fallback .city{font-family:"Barlow Condensed",sans-serif;font-weight:500;letter-spacing:.32em;font-size:11px;color:var(--mute)}

/* ============ PRODUCT IMAGE FILTERS (visual diversity) ============ */
.product:nth-child(6n+1) .ph img{filter:grayscale(.15) contrast(1.05)}
.product:nth-child(6n+2) .ph img{filter:grayscale(.45) contrast(1.1) hue-rotate(-10deg)}
.product:nth-child(6n+3) .ph img{filter:grayscale(.25) contrast(1.08) brightness(.95)}
.product:nth-child(6n+4) .ph img{filter:grayscale(.55) contrast(1.12) brightness(1.05) sepia(.1)}
.product:nth-child(6n+5) .ph img{filter:grayscale(.3) contrast(1.05) hue-rotate(8deg)}
.product:nth-child(6n+6) .ph img{filter:grayscale(.4) contrast(1.1) brightness(.9)}
.gallery-grid .g:nth-child(2n) img{filter:grayscale(.5) contrast(1.1)}
.gallery-grid .g:nth-child(3n) img{filter:grayscale(.2) contrast(1.05) hue-rotate(-8deg)}
.cats .card .img{will-change:transform,opacity}

/* Poster for hero video (in case mp4 fails) */
.hero video{background:#0a0a0a url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'><defs><radialGradient id='g' cx='75%25' cy='55%25' r='80%25'><stop offset='0%25' stop-color='%23e10600' stop-opacity='.18'/><stop offset='60%25' stop-color='%23000' stop-opacity='0'/></radialGradient></defs><rect width='100%25' height='100%25' fill='%23050505'/><rect width='100%25' height='100%25' fill='url(%23g)'/></svg>") center/cover no-repeat}


/* ============ NAV STICKY (fixed proper) ============ */
body{padding-top:0}
.topbar{position:relative;z-index:55}
.nav{position:sticky;top:0;z-index:60}

/* ============ LOGO IMG REFINED ============ */
.wordmark{display:flex;align-items:center;gap:14px;line-height:0}
.logo-img{display:block;height:54px;width:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));transition:height .35s ease,filter .35s ease}
.nav.scrolled .logo-img{height:42px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
@media (max-width:960px){
  .logo-img{height:42px}
  .nav.scrolled .logo-img{height:36px}
}

/* ============ BRAND CARD FLIP 3D ============ */
.brand-grid{perspective:1200px}
.brand-cell{position:relative;height:160px;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.8,.2,1);cursor:pointer}
.brand-cell:hover{transform:rotateY(180deg)}
.brand-cell .face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#0a0a0a;overflow:hidden}
.brand-cell .face.back{transform:rotateY(180deg);background:linear-gradient(135deg,#1a0000 0%,#0a0a0a 60%,#050505 100%);border-left:3px solid var(--red)}
.brand-cell .face.back::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 50% 50%,rgba(225,6,0,.18),transparent 70%)}
.brand-cell .face.back .logo{position:relative;z-index:2;width:78%;max-width:200px;height:60%;display:flex;align-items:center;justify-content:center;filter:none}
.brand-cell .face.back .logo svg{width:100%;height:100%}
/* Back: fondo rojizo oscuro → texto del nombre SIEMPRE blanco para legibilidad
   (no heredar el color rojo del front, que se perdería sobre el gradient) */
.brand-cell .face.back .logo svg text{fill:#fff !important}
.brand-cell .face.front .name{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:22px;letter-spacing:.06em;color:rgba(255,255,255,.8);text-align:center;padding:0 12px}
.brand-cell .face.front .num{position:absolute;top:12px;left:14px;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:11px;letter-spacing:.3em;color:rgba(255,255,255,.32)}
.brand-cell .face.front .hint{position:absolute;bottom:14px;right:14px;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--red);opacity:.7}
.brand-cell .face.front .hint::after{content:" \2192"}
@media (hover:none){
  .brand-cell{transform:none !important}
  .brand-cell .face.back{display:none}
  .brand-cell .face.front .hint{display:none}
}

/* ============ FLAGSHIP VIDEO BG ============ */
.flagship .media .video-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45;filter:grayscale(.4) contrast(1.1) brightness(.6);z-index:0}

/* ============ SECTION GLOW ============ */
.sellers{position:relative;overflow:hidden}
.sellers::before{content:"";position:absolute;top:-100px;right:-200px;width:700px;height:700px;z-index:0;pointer-events:none;background:radial-gradient(circle,rgba(225,6,0,.10),transparent 70%);animation:slow-pulse 8s ease-in-out infinite}
@keyframes slow-pulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.15);opacity:1}}
.sellers > *{position:relative;z-index:1}


/* ============ MEGA MENU ============ */
.menu{position:relative}
.menu > a{position:relative;padding:24px 0}
.megamenu{
  position:absolute;left:0;right:0;top:100%;
  background:rgba(10,10,10,.96);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border-bottom:1px solid var(--line);
  border-top:1px solid rgba(225,6,0,.3);
  padding:36px 40px 40px;
  display:none;z-index:55;
  box-shadow:0 30px 50px -20px rgba(0,0,0,.7);
}
.megamenu.is-open{display:block}
.megamenu-grid{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
.megamenu .col h5{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--red);
  margin-bottom:14px;display:flex;align-items:center;gap:10px;
}
.megamenu .col h5::before{content:"";width:18px;height:1px;background:var(--red)}
.megamenu .col ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.megamenu .col a{
  font-family:"Inter",sans-serif;font-weight:400;font-size:14px;letter-spacing:0;text-transform:none;
  color:rgba(255,255,255,.8);padding:4px 0;transition:color .2s ease, padding-left .2s ease;display:inline-flex;align-items:center;gap:8px;
}
.megamenu .col a::after{display:none}
.megamenu .col a:hover{color:var(--red);padding-left:6px}
.megamenu .col.feat{padding:20px;background:rgba(225,6,0,.06);border:1px solid rgba(225,6,0,.2)}
.megamenu .col.feat h5{color:#fff}
.megamenu .col.feat p{font-size:13px;line-height:1.5;color:var(--mute);margin:8px 0 16px}
.megamenu .col.feat .cta{
  display:inline-flex;align-items:center;gap:8px;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#fff;
  padding:11px 16px;background:var(--red);
}
.megamenu .col.feat .cta:hover{background:var(--red-hot)}
@media (max-width:960px){.megamenu{display:none !important}}

/* ============ BRAND CARD UPGRADE ============ */
.brand-cell{
  height:180px;
  transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.8,.2,1);
  cursor:pointer;
}
.brand-cell:hover{transform:rotateY(180deg)}
.brand-cell .face.back{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(135deg,#1a0000 0%,#0a0a0a 60%,#050505 100%);
  border-left:3px solid var(--red);padding:18px;text-align:center;
}
.brand-cell .face.back .logo-real{
  display:block;width:78%;max-width:170px;height:60px;object-fit:contain;
  filter:brightness(0) invert(1);
}
.brand-cell .face.back .logo-real + .logo{display:none}
.brand-cell .face.back .logo{flex:0 0 auto}

/* === Logo en cara FRONT (visible sin hover) === */
.brand-cell .face.front{flex-direction:column;gap:10px;padding:18px}
/* PNG logos: blanco/silueta para contraste sobre fondo negro */
.brand-cell .face.front .logo-real-front{
  width:75%;max-width:150px;height:60px;object-fit:contain;
  filter:brightness(0) invert(1);
  transition:transform .35s ease, filter .25s ease;
}
.brand-cell:hover .face.front .logo-real-front{
  transform:scale(1.06);
  filter:brightness(0) invert(1) drop-shadow(0 0 12px rgba(255,255,255,.4));
}
/* SVG wordmark: forzar fill blanco también */
.brand-cell .face.front .logo-front{
  width:78%;max-width:170px;height:50px;display:flex;align-items:center;justify-content:center;
}
.brand-cell .face.front .logo-front svg{width:100%;height:100%;display:block}
/* Color del wordmark = el que define BRAND_STYLES_JS (alternancia rojo/blanco
   para distinguir marcas adyacentes). No se fuerza fill aquí. */
.brand-cell .face.back .cta{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--red);
  display:inline-flex;align-items:center;gap:8px;
  margin-top:6px;
}
.brand-cell .face.back .cta::before{content:"\27A4";color:var(--red)}
.brand-cell .face.back .desc{
  font-size:11px;line-height:1.4;color:rgba(255,255,255,.6);margin:4px 0 0;
}

/* ============ STICKY WA — slimmer ============ */
.sticky-wa{box-shadow:0 14px 40px -12px rgba(0,0,0,.7),0 0 0 0 rgba(225,6,0,.4)}
.sticky-wa:hover{background:var(--red);box-shadow:0 14px 40px -10px var(--red)}


/* ============ MEGA-MENU STICKY GROUP ============ */
.nav-wrapper{position:sticky;top:0;z-index:60;background:rgba(10,10,10,.85);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid var(--line);transition:background .3s ease}
.nav-wrapper .nav{position:relative !important;background:transparent !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;border-bottom:0 !important}
.nav-wrapper .megamenu{position:absolute;top:100%;left:0;right:0}

/* When user not scrolled, keep nav transparent against hero */
body:not(.scrolled) .nav-wrapper{background:linear-gradient(180deg,rgba(10,10,10,.6),rgba(10,10,10,0));border-bottom-color:transparent}

/* Force visible products */
.product .ph img{display:block;width:100%;height:100%;object-fit:cover}
.product .ph{aspect-ratio:4/3;background:#0a0a0a}


/* ============ HERO SLIDER ============ */
.hero{position:relative;height:100vh;min-height:640px;width:100%;overflow:hidden;isolation:isolate;background:#000}
.slides{position:absolute;inset:0;z-index:1}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s cubic-bezier(.4,0,.2,1);will-change:opacity}
.slide.is-active{opacity:1;z-index:2}
.slide video,.slide .img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.slide .img{background-size:cover;background-position:center;filter:grayscale(.15) contrast(1.05) brightness(.85)}
.slide .grade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 35%, rgba(0,0,0,.15) 65%, rgba(0,0,0,0) 100%),linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 70%, rgba(0,0,0,.55) 100%)}
.slide .noise{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.08;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.9'/></svg>")}
.slide .content{position:absolute;z-index:4;left:0;right:0;bottom:0;padding:0 40px 110px;max-width:1600px;margin:0 auto}

.slider-nav{position:absolute;z-index:5;right:40px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px}
.slider-nav button{width:42px;height:2px;background:rgba(255,255,255,.25);border:0;cursor:pointer;transition:all .3s ease;padding:0;position:relative;display:block}
.slider-nav button.is-active{background:var(--red);width:60px}
.slider-nav button:hover{background:rgba(255,255,255,.6)}

.slider-counter{position:absolute;z-index:5;left:40px;bottom:120px;display:flex;align-items:center;gap:14px;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.slider-counter b{color:var(--red);font-weight:700}
.slider-counter .bar{width:60px;height:1px;background:rgba(255,255,255,.2);overflow:hidden}
.slider-counter .bar::after{content:"";display:block;height:100%;background:var(--red);width:33%;transition:width .3s ease}

@media (max-width:960px){
  .slider-nav{right:14px;gap:8px}
  .slider-nav button{width:24px}
  .slider-counter{left:18px;bottom:100px;font-size:9px;letter-spacing:.18em}
  .slide .content{padding:0 18px 100px}
}

/* ============ FOOTER FLAT — no mask ============ */
.foot-mask{display:none !important}
.foot-huge{display:block !important;position:relative !important;bottom:auto !important;margin:30px 0 0 !important;color:transparent !important;-webkit-text-stroke:1px rgba(255,255,255,.10) !important;font-size:clamp(80px,15vw,200px) !important;text-align:center;line-height:.86;letter-spacing:-.015em;pointer-events:none}
.foot{padding:80px 40px 32px;background:#000;position:relative;overflow:hidden;min-height:auto}
.foot-bar{margin-top:50px}


/* ============ BRAND GRID — bigger cells ============ */
.brand-grid{grid-template-columns:repeat(4,1fr) !important}
@media (max-width:960px){.brand-grid{grid-template-columns:repeat(2,1fr) !important}}
.brand-cell{height:200px}
.brand-cell .face.back .logo{display:flex}

/* Variante 3 columnas (marcas.html: 9 celdas = 3x3 cuadrado perfecto) */
.brand-grid--3{grid-template-columns:repeat(3,1fr) !important}
@media (max-width:960px){.brand-grid--3{grid-template-columns:repeat(2,1fr) !important}}
@media (max-width:430px){.brand-grid--3{grid-template-columns:repeat(1,1fr) !important}}

/* ============ BRAND CELL — MOTOBIKE (CTA Visítanos) ============ */
.brand-cell--moto .face.front{
  background:linear-gradient(135deg,#1a0000 0%,#0a0a0a 60%,#050505 100%);
  border:1px solid rgba(225,6,0,.35);
}
.brand-cell--moto .face.front::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 100% at 50% 50%,rgba(225,6,0,.20),transparent 70%);
}
.brand-cell--moto .face.back{
  background:linear-gradient(135deg,var(--red) 0%,#7a0300 70%,#3a0000 100%);
  border-left:0;
}
.brand-cell--moto .face.back::before{background:none}
.brand-cell--moto .face.back .desc{color:rgba(255,255,255,.92)}
.brand-cell--moto .face.back .cta{color:#fff;font-weight:800}
.brand-cell--moto .face.back .cta::before{color:#fff}
.brand-cell--moto .face.front .num{color:rgba(255,255,255,.5)}
.brand-cell--moto .face.front .hint{color:#fff;opacity:1;font-weight:700}

/* Logo real PNG via mask-image: el PNG actúa como silueta, el color sale de
   currentColor (rojo o blanco según BRAND_STYLES_JS). Sin cuadrado posible.
   Va en la cara FRONT para que sea visible siempre (también en mobile). */
.brand-cell .face.front .logo-real-mask{
  width:75%;max-width:150px;height:70px;display:block;
  -webkit-mask:var(--brand-logo) no-repeat center/contain;
          mask:var(--brand-logo) no-repeat center/contain;
  background-color:currentColor;
  transition:transform .35s ease;
}
.brand-cell:hover .face.front .logo-real-mask{transform:scale(1.06)}
.brand-cell .face.back .logo-back-big{width:80%;max-width:200px;height:50px;margin-bottom:6px}

/* Wordmark Motobike (sin SVG, texto bold con M en rojo) */
.motobike-mark{
  font-family:"Anton",sans-serif;text-transform:uppercase;
  font-size:30px;letter-spacing:.06em;color:#fff;
  display:flex;align-items:center;justify-content:center;
  width:auto;max-width:none;height:auto;
}
.motobike-mark .mb-m{color:var(--red);margin-right:1px}
.brand-cell--moto:hover .motobike-mark .mb-m{color:#fff}
/* Back tiene fondo rojo: la M en rojo no se vería, fuerzo blanco */
.brand-cell--moto .face.back .motobike-mark,
.brand-cell--moto .face.back .motobike-mark .mb-m{color:#fff}


/* ============ SLIDE TITLE FADE ============ */
.slide .content{opacity:0;transform:translateY(20px);transition:opacity .8s ease, transform .8s ease}
.slide.is-active .content{opacity:1;transform:translateY(0);animation:slideTitleCycle 7s ease-in-out forwards}
.slide.is-active .grade{animation:gradeCycle 7s ease-in-out forwards}
@keyframes slideTitleCycle{
  0%{opacity:0;transform:translateY(40px)}
  10%{opacity:1;transform:translateY(0)}
  55%{opacity:1;transform:translateY(0)}
  75%{opacity:0;transform:translateY(-30px)}
  100%{opacity:0;transform:translateY(-30px)}
}
@keyframes gradeCycle{
  0%{background:linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.6) 35%, rgba(0,0,0,.2) 65%, rgba(0,0,0,0) 100%),linear-gradient(180deg, rgba(0,0,0,.4), transparent 30%, transparent 70%, rgba(0,0,0,.6))}
  60%{background:linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.6) 35%, rgba(0,0,0,.2) 65%, rgba(0,0,0,0) 100%),linear-gradient(180deg, rgba(0,0,0,.4), transparent 30%, transparent 70%, rgba(0,0,0,.6))}
  100%{background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.45) 100%)}
}