:root{
  --ink:#221F1F;
  --paper:#FFFFFF;
  --paper-2:#F2F0EC;
  --red:#E2323C;
  --red-deep:#B81E27;
  --slate:#5B5B5B;
  --line:rgba(34,31,31,0.14);
  --shadow:rgba(34,31,31,0.16);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#F5F3EF;
    --paper:#141212;
    --paper-2:#211C1C;
    --red:#FF4B54;
    --red-deep:#FF7A80;
    --slate:#B7B2AC;
    --line:rgba(245,243,239,0.16);
    --shadow:rgba(0,0,0,0.5);
  }
}
:root[data-theme="dark"]{
  --ink:#F5F3EF;
  --paper:#141212;
  --paper-2:#211C1C;
  --red:#FF4B54;
  --red-deep:#FF7A80;
  --slate:#B7B2AC;
  --line:rgba(245,243,239,0.16);
  --shadow:rgba(0,0,0,0.5);
}

*{box-sizing:border-box;}
[hidden]{display:none!important;}
html{color-scheme:light;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Work Sans", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:"Big Shoulders Display", "Arial Narrow", sans-serif;
  text-transform:uppercase;
  line-height:0.92;
  margin:0;
  text-wrap:balance;
  letter-spacing:0.01em;
}
.mono{
  font-family:"JetBrains Mono", ui-monospace, "SF Mono", monospace;
}
a{color:inherit;}
.eyebrow{
  font-family:"JetBrains Mono", monospace;
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--red);
}
img{max-width:100%;}

/* ---------- scroll runner progress ---------- */
#track{
  position:fixed; top:0; left:0; width:100%; height:4px;
  background:var(--line); z-index:200;
}
#fill{
  position:absolute; top:0; left:0; height:100%; width:0%;
  background:var(--red);
}
@media (prefers-reduced-motion: no-preference){
  #fill{ transition: width .12s linear; }
}

/* ---------- utility bar ---------- */
.utility-bar{
  background:#221F1F; color:#F5F3EF;
  font-family:"JetBrains Mono",monospace; font-size:.7rem; letter-spacing:.03em;
  text-align:center; padding:.5rem 1rem;
}
.utility-bar .sep{color:var(--red); margin:0 .7rem;}

/* ---------- nav ---------- */
nav{
  position:sticky; top:4px; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem clamp(1.25rem,4vw,3rem);
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  gap:1rem; flex-wrap:wrap;
}
.logo{display:flex; align-items:center;}
.navsearch{
  display:flex; align-items:center; gap:.55rem;
  background:var(--paper-2); border:1px solid var(--line); border-radius:999px;
  padding:.55rem 1rem; flex:1; min-width:11rem; max-width:24rem;
}
.navsearch svg{width:16px;height:16px;color:var(--slate); flex-shrink:0;}
.navsearch input{
  border:none; background:transparent; outline:none; width:100%;
  font-family:"Work Sans",sans-serif; font-size:.85rem; color:var(--ink);
}
.navsearch input::placeholder{color:var(--slate);}
.logo-badge{
  background:#fff; border-radius:8px; padding:.3rem .55rem;
  display:inline-flex; align-items:center; line-height:0; cursor:pointer;
}
.logo-img{height:26px; width:auto; display:block;}
.navlinks{display:flex; gap:1.75rem; font-size:.92rem; font-weight:500; list-style:none; margin:0; padding:0;}
.navlinks a{text-decoration:none; border-bottom:2px solid transparent; padding-bottom:2px;}
.navlinks a:hover, .navlinks a:focus-visible{border-color:var(--red);}
.navcta{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--ink); color:var(--paper);
  padding:.6rem 1.1rem; border-radius:999px;
  font-size:.85rem; font-weight:600; text-decoration:none; white-space:nowrap;
}
.navcta:hover{background:var(--red); color:#fff;}
a:focus-visible, button:focus-visible{outline:2px solid var(--red); outline-offset:2px;}
.nav-drawer{display:contents;}
.nav-toggle{
  display:none; background:none; border:none; padding:.4rem; cursor:pointer;
  color:var(--ink); align-items:center; justify-content:center; border-radius:8px;
}
.nav-toggle:hover{color:var(--red);}
.theme-toggle{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex-shrink:0;
  background:var(--paper-2); border:1px solid var(--line); border-radius:999px;
  color:var(--ink); cursor:pointer;
}
.theme-toggle:hover{color:var(--red); border-color:var(--red);}
.theme-toggle svg.ttico{
  position:absolute; top:50%; left:50%; width:18px; height:18px;
  transform:translate(-50%,-50%) scale(.4) rotate(-90deg);
  opacity:0;
}
.theme-toggle svg.ttico.active{
  opacity:1;
  transform:translate(-50%,-50%) scale(1) rotate(0deg);
}
@media (prefers-reduced-motion: no-preference){
  .theme-toggle svg.ttico{
    transition:opacity .2s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
  }
}
@media (max-width:860px){
  .nav-toggle{display:inline-flex;}
  .nav-drawer{
    display:none; flex-direction:column; gap:.25rem;
    position:absolute; left:0; right:0; top:100%;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:.5rem clamp(1.25rem,4vw,3rem) 1.25rem;
    box-shadow:0 16px 28px var(--shadow);
  }
  nav.nav-open .nav-drawer{display:flex;}
  .nav-drawer .navlinks{flex-direction:column; gap:0; width:100%;}
  .nav-drawer .navlinks a{display:block; padding:.9rem 0; border-bottom:1px solid var(--line); width:100%;}
  .nav-drawer .navsearch{max-width:none; margin-top:.75rem;}
}

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(3rem,8vw,6rem) clamp(1.25rem,4vw,3rem) clamp(4rem,9vw,7rem);
  background:var(--paper);
}
.hero-grid{
  display:grid; grid-template-columns:1.15fr 1fr; gap:2.5rem; align-items:center;
  max-width:72rem; margin:0 auto; position:relative; z-index:2;
}
@media (max-width:880px){.hero-grid{grid-template-columns:1fr;}}
.hero-media{position:relative;}
.hero-media img, .hero-media video{
  width:100%; height:auto; display:block; border-radius:20px;
  box-shadow:0 24px 48px var(--shadow);
}
.hero-video-controls{
  position:absolute; right:1rem; bottom:1rem; z-index:3;
  display:flex; gap:.5rem;
}
.hero-video-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; flex-shrink:0;
  background:rgba(20,20,20,.55); backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.35); border-radius:999px;
  color:#fff; cursor:pointer;
}
.hero-video-btn:hover{background:rgba(20,20,20,.75); border-color:#fff;}
.hero h1{font-size:clamp(3rem,9vw,6.4rem); font-weight:800;}
.hero p.lede{
  max-width:34rem; margin-top:1.4rem; font-size:1.15rem; color:var(--slate);
}
.hero-ctas{display:flex; gap:.9rem; margin-top:2.2rem; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 1.5rem; border-radius:999px; text-decoration:none;
  font-weight:600; font-size:.95rem; border:1px solid transparent;
}
.btn-primary{background:var(--red); color:#fff;}
.btn-primary:hover{background:var(--red-deep);}
.btn-outline{border-color:var(--ink); color:var(--ink);}
.btn-outline:hover{border-color:var(--red); color:var(--red);}

/* ---------- brands strip ---------- */
.brands-strip{
  text-align:center;
  margin-top:clamp(2.5rem,6vw,3.5rem);
  padding-top:clamp(2.5rem,6vw,3.5rem);
  border-top:1px solid var(--line);
}
.brands-label{
  font-family:"JetBrains Mono",monospace; font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--slate);
  margin:0 0 1.1rem;
}
.brands-row{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
  gap:1rem 2.5rem; max-width:60rem; margin:0 auto;
}
.brand-name{
  font-family:"Big Shoulders Display","Arial Narrow",sans-serif;
  font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  font-size:clamp(1.25rem,3vw,1.9rem); color:var(--ink); opacity:.55;
  text-decoration:none; cursor:pointer;
}
@media (prefers-reduced-motion: no-preference){
  .brand-name{transition:opacity .15s ease, color .15s ease;}
}
.brand-name:hover{opacity:1; color:var(--red);}

/* ---------- quick links ---------- */
.quicklinks{
  display:flex; gap:.75rem; overflow-x:auto;
  padding:1.75rem clamp(1.25rem,4vw,3rem) 0;
  max-width:72rem; margin:0 auto;
  scrollbar-width:none;
}
.quicklinks::-webkit-scrollbar{display:none;}
.qpill{
  display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap; flex-shrink:0;
  background:var(--paper-2); border:1px solid var(--line); border-radius:999px;
  padding:.55rem 1.15rem; font-size:.85rem; font-weight:600; text-decoration:none; color:var(--ink);
}
.qpill svg{width:16px;height:16px;color:var(--red);}
.qpill:hover{border-color:var(--red); color:var(--red);}

/* ---------- section shell ---------- */
section{padding:clamp(3.5rem,8vw,6rem) clamp(1.25rem,4vw,3rem);}
.divider{
  height:64px; background:var(--paper-2);
  clip-path:polygon(0 100%, 100% 0, 100% 100%);
  margin-top:-1px;
}
.divider.alt{clip-path:polygon(0 0, 100% 100%, 0 100%);}
.section-head{max-width:40rem; margin:0 auto 2.5rem;}
.section-head h2{font-size:clamp(2rem,4.5vw,3rem); font-weight:700; margin-top:.5rem;}

/* ---------- categories / carousel ---------- */
.categories{background:var(--paper-2);}
.carousel-wrap{max-width:60rem; margin:0 auto;}
.carousel{
  position:relative; overflow:hidden; border-radius:18px;
}
.carousel-track{
  display:flex;
}
@media (prefers-reduced-motion: no-preference){
  .carousel-track{transition:transform .5s ease;}
}
.carousel-slide{
  flex:0 0 100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1rem; padding:1.5rem 2rem; min-height:380px;
}
.carousel-slide img{
  max-height:340px; width:auto; object-fit:contain;
}
.carousel-link{
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  text-decoration:none; color:inherit;
}
.carousel-video-trigger{
  position:relative; display:inline-flex; padding:0; border:none; background:none; cursor:pointer;
}
.carousel-video-trigger img{max-height:340px; width:auto; object-fit:contain;}
.play-badge{
  position:absolute; inset:0; margin:auto; width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:rgba(20,20,20,.55); border:1px solid rgba(255,255,255,.35);
}
@media (prefers-reduced-motion: no-preference){
  .play-badge{transition:transform .15s ease, background .15s ease;}
}
.carousel-video-trigger:hover .play-badge{transform:scale(1.08); background:rgba(20,20,20,.75);}

/* ---------- video modal ---------- */
.video-modal{position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center; padding:1.5rem;}
.video-modal[hidden]{display:none;}
.video-modal-backdrop{position:absolute; inset:0; background:rgba(8,8,8,.82);}
.video-modal-panel{
  position:relative; z-index:1; width:100%; max-width:400px; max-height:100%;
  background:var(--paper); border-radius:18px; padding:1rem;
  box-shadow:0 30px 60px rgba(0,0,0,.5);
  overflow-y:auto;
}
.video-modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.75rem;
  position:sticky; top:0; background:var(--paper); padding-top:.1rem; z-index:2;
}
.video-modal-title{
  font-family:"Big Shoulders Display","Arial Narrow",sans-serif; text-transform:uppercase;
  font-weight:700; font-size:1.15rem; margin:0; letter-spacing:.01em;
}
.video-modal-close{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:32px; height:32px; border-radius:50%;
  background:var(--paper-2); border:1px solid var(--line); color:var(--ink); cursor:pointer;
}
.video-modal-close:hover{color:var(--red); border-color:var(--red);}
.video-modal-panel video, .video-modal-panel .video-modal-image{
  width:100%; max-height:70vh; border-radius:12px; display:block; background:#000; object-fit:contain;
}
.video-modal-controls{display:flex; justify-content:center; gap:.75rem; margin-top:1rem;}
.video-modal-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex-shrink:0;
  background:var(--paper-2); border:1px solid var(--line); border-radius:999px;
  color:var(--ink); cursor:pointer;
}
.video-modal-btn:hover{color:var(--red); border-color:var(--red);}
.carousel-cap{
  font-family:"Big Shoulders Display","Arial Narrow",sans-serif; text-transform:uppercase;
  font-size:1.5rem; font-weight:700; margin:0; letter-spacing:.01em;
}
.carousel-btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:42px; height:42px; border-radius:50%;
  background:var(--paper); border:1px solid var(--line); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; line-height:1; cursor:pointer;
}
.carousel-btn:hover{border-color:var(--red); color:var(--red);}
.carousel-btn.prev{left:1rem;}
.carousel-btn.next{right:1rem;}
@media (max-width:520px){
  .carousel-btn{width:34px; height:34px; font-size:1.2rem;}
  .carousel-btn.prev{left:.5rem;}
  .carousel-btn.next{right:.5rem;}
}
.carousel-dots{
  display:flex; justify-content:center; gap:.5rem; margin-top:1.25rem;
}
.carousel-dot{
  width:9px; height:9px; border-radius:50%; background:var(--line);
  border:none; padding:0; cursor:pointer;
}
@media (prefers-reduced-motion: no-preference){
  .carousel-dot{transition:width .2s ease, background .2s ease;}
}
.carousel-dot.active{width:22px; border-radius:999px; background:var(--red);}

.quicklinks{max-width:60rem; margin:3rem auto 0; text-align:center;}
.quicklinks-label{
  font-family:"JetBrains Mono",monospace; text-transform:uppercase; letter-spacing:.08em;
  font-size:.78rem; color:var(--slate); margin:0 0 1.25rem;
}
.quicklinks-grid{
  display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem 1.25rem;
}
.quicklink{
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  width:104px; text-decoration:none; color:var(--ink);
}
.quicklink img{
  width:88px; height:88px; object-fit:contain; border-radius:50%;
  background:var(--paper); box-shadow:0 8px 20px var(--shadow);
}
@media (prefers-reduced-motion: no-preference){
  .quicklink img{transition:transform .2s ease, box-shadow .2s ease;}
}
.quicklink:hover img{transform:translateY(-3px); box-shadow:0 12px 26px var(--shadow);}
.quicklink span{
  font-family:"Big Shoulders Display","Arial Narrow",sans-serif; text-transform:uppercase;
  font-size:.92rem; font-weight:700; letter-spacing:.01em;
}

/* ---------- product grid ---------- */
.grid-head{display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; max-width:72rem; margin:0 auto 2.5rem; flex-wrap:wrap;}
.ml-rep{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; margin-top:.85rem;}
.ml-rep-badge{
  display:inline-flex; align-items:center; gap:.35rem;
  background:#FFE600; color:#1a1a1a; font-weight:700; font-size:.76rem;
  padding:.32rem .7rem; border-radius:999px;
}
.ml-rep-badge svg{color:#1a1a1a;}
.ml-rep-item{font-size:.8rem; color:var(--slate); font-family:"JetBrains Mono",monospace;}
.products{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem;
  max-width:72rem; margin:0 auto;
}
@media (max-width:980px){.products{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.products{grid-template-columns:1fr;}}
.card{
  background:var(--paper-2); border:1px solid var(--line); border-radius:14px;
  padding:1.1rem; position:relative;
}
.card-photo{
  width:100%; height:150px; object-fit:cover; border-radius:10px; display:block;
}
.tag{
  display:block; text-align:center; background:var(--red); color:#fff;
  font-family:"JetBrains Mono",monospace; font-size:.7rem; font-weight:700;
  padding:.4rem 0; border-radius:8px; letter-spacing:.05em; margin-top:.85rem;
}
.card h4{font-weight:600; font-size:1rem; margin:.9rem 0 .2rem;}
.sizes{font-size:.7rem; color:var(--slate); margin-bottom:.6rem;}
.price-stack{display:flex; flex-direction:column; gap:.15rem;}
.price-old{font-size:.8rem; color:var(--slate); text-decoration:line-through;}
.price-pix{
  display:flex; align-items:baseline; gap:.4rem;
  font-family:"JetBrains Mono",monospace; font-weight:700; font-size:1.2rem; color:var(--red);
}
.price-pix .pix-label{
  font-family:"Work Sans",sans-serif; font-weight:600; font-size:.68rem;
  color:var(--ink); text-transform:uppercase; letter-spacing:.04em;
}
.price-parcel{font-size:.76rem; color:var(--slate);}

/* ---------- Mercado Livre showcase ---------- */
.ml-section{background:var(--paper-2);}
a.ml-card{
  text-decoration:none; color:inherit; cursor:pointer;
}
@media (prefers-reduced-motion: no-preference){
  a.ml-card{transition:transform .15s ease, box-shadow .15s ease;}
  a.ml-card:hover{transform:translateY(-4px); box-shadow:0 14px 28px var(--shadow);}
}
.ml-tag{
  display:inline-block; background:#FFE600; color:#1a1a1a;
  font-family:"JetBrains Mono",monospace; font-size:.62rem; font-weight:700;
  letter-spacing:.04em; padding:.28rem .55rem; border-radius:6px; margin-bottom:.7rem;
}
.ml-cta{
  display:block; margin-top:.85rem; font-size:.78rem; font-weight:600; color:#3483FA;
}
a.ml-card:hover .ml-cta{text-decoration:underline;}
.ml-disclaimer{
  max-width:72rem; margin:2rem auto 0; text-align:center;
  font-size:.72rem; color:var(--slate);
}

/* ---------- location ---------- */
.location{background:var(--paper-2);}
.loc-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:center;
  max-width:72rem; margin:0 auto;
}
@media (max-width:820px){.loc-grid{grid-template-columns:1fr;}}
.label-card{
  background:var(--paper); border:2px dashed var(--line); border-radius:16px;
  padding:2rem;
}
.label-card .mono{font-size:.85rem; color:var(--slate); line-height:1.7;}
.label-card h3{font-size:1.7rem; margin-bottom:.75rem;}
.loc-ctas{display:flex; gap:.75rem; margin-top:1.5rem; flex-wrap:wrap;}
.map-art{
  background:var(--paper); border:1px solid var(--line); border-radius:16px;
  aspect-ratio:4/3; position:relative; overflow:hidden;
}
.map-art iframe{display:block;}

/* ---------- pre-footer: benefits + vip ---------- */
.prefooter{background:var(--paper-2);}
.prefooter-grid{
  display:grid; grid-template-columns:1.1fr 1fr; gap:2.5rem;
  max-width:72rem; margin:0 auto; align-items:stretch;
}
@media (max-width:820px){.prefooter-grid{grid-template-columns:1fr;}}
.benefits{display:grid; grid-template-columns:1fr 1fr; gap:1.75rem 1.5rem;}
@media (max-width:480px){.benefits{grid-template-columns:1fr;}}
.benefit{display:flex; gap:.9rem; align-items:flex-start;}
.benefit svg{width:26px; height:26px; color:var(--red); flex-shrink:0; margin-top:.1rem;}
.benefit h4{font-size:.95rem; font-weight:600; margin:0 0 .25rem;}
.benefit p{font-size:.82rem; color:var(--slate); margin:0; line-height:1.4;}
.vip-card{
  background:var(--red); color:#fff; border-radius:18px; padding:2.2rem;
  display:flex; flex-direction:column; justify-content:center; gap:.9rem;
}
.vip-card .eyebrow{color:#fff; opacity:.85;}
.vip-card h3{font-size:1.9rem; color:#fff;}
.vip-card p{color:rgba(255,255,255,.9); font-size:.92rem; margin:0; max-width:26rem;}
.vip-card .btn-primary{background:#fff; color:var(--red-deep); align-self:flex-start;}
.vip-card .btn-primary:hover{background:#F5F3EF;}

/* ---------- footer ---------- */
footer{
  background:#221F1F; color:#F5F3EF;
  padding:clamp(3rem,7vw,4.5rem) clamp(1.25rem,4vw,3rem) 2rem;
}
.foot-top{
  display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap;
  max-width:72rem; margin:0 auto; padding-bottom:2.5rem;
  border-bottom:1px solid rgba(239,233,221,0.18);
}
.foot-brand .logo-img{height:32px;}
.foot-brand p{color:#C8C2B2; max-width:22rem; margin-top:.8rem; font-size:.92rem;}
.foot-social{display:flex; gap:.9rem; margin-top:1.2rem;}
.foot-social a{
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(239,233,221,0.3);
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  color:#F5F3EF;
}
.foot-social a:hover{background:var(--red); border-color:var(--red); color:#221F1F;}
.foot-social svg{width:19px;height:19px;}
.foot-cols{display:flex; gap:4rem; flex-wrap:wrap;}
.foot-cols h5{
  font-family:"JetBrains Mono",monospace; font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--red); margin:0 0 .8rem;
}
.foot-cols ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; font-size:.9rem;}
.foot-cols a{text-decoration:none; color:#DAD5C6;}
.foot-cols a:hover{color:#F5F3EF;}
.foot-bottom{
  max-width:72rem; margin:1.5rem auto 0; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:.5rem; font-size:.78rem; color:#9A9384;
}