/* ============================================================
   TIENDAS JD — hoja de estilos compartida
   ============================================================ */

:root{
  --black:#000000;
  --black-soft:#0d0d0d;
  --black-card:#141414;
  --line:#242424;
  --white:#f5f5f5;
  --muted:#8f8f8f;
  --muted-2:#6a6a6a;
  --silver-1:#f0f0f0;
  --silver-2:#a8a8a8;
  --silver-3:#5a5a5a;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--black);
  color:var(--white);
  font-family:'Inter',sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.display{
  font-family:'Anton',sans-serif;
  font-weight:400;
  letter-spacing:0.5px;
  text-transform:uppercase;
}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
button{font-family:inherit; cursor:pointer;}
.wrap{max-width:1240px; margin:0 auto; padding:0 32px;}
.chrome-text{
  background:linear-gradient(180deg, var(--silver-1) 0%, var(--silver-3) 55%, var(--silver-1) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- HEADER ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:22px 0;
  transition:background .3s ease, padding .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
header.scrolled{
  background:rgba(0,0,0,0.92);
  backdrop-filter:blur(10px);
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1240px; margin:0 auto; padding:0 32px;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{width:34px; height:34px; object-fit:contain;}
.brand-name{font-family:'Anton',sans-serif; font-size:18px; letter-spacing:1.5px;}

.nav-links{display:flex; align-items:center; gap:30px;}
.nav-links a{
  position:relative; font-size:12px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--muted); font-weight:600; padding:4px 0;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background:var(--white); transition:width .25s ease;
}
.nav-links a:hover{color:var(--white);}
.nav-links a:hover::after{width:100%;}

.header-icons{display:flex; align-items:center; gap:18px;}
.icon-btn{background:none; border:none; color:var(--white); font-size:19px; display:flex;}
.menu-toggle{display:none; background:none; border:none; color:var(--white); font-size:22px;}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  height:100vh; min-height:600px;
  display:flex; align-items:flex-end;
  background:linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.85) 100%), var(--black-soft);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero-photo-slot{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted-2); font-size:13px; letter-spacing:1px;
  border:1px dashed var(--line);
}
.hero-content{position:relative; z-index:2; padding:0 32px 80px; max-width:1240px; margin:0 auto; width:100%;}
.hero .eyebrow{color:var(--silver-2); font-size:13px; letter-spacing:4px; font-weight:700; margin-bottom:18px;}
.hero h1{font-size:clamp(44px, 8vw, 96px); line-height:0.92; margin-bottom:26px; max-width:800px;}
.hero p{max-width:460px; color:var(--muted); font-size:16px; margin-bottom:32px;}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 34px; border-radius:100px;
  font-weight:800; font-size:13px; letter-spacing:1px; text-transform:uppercase;
  border:1px solid transparent; transition:transform .2s ease, background .2s ease, color .2s ease;
}
.btn-primary{background:var(--white); color:var(--black);}
.btn-primary:hover{transform:scale(1.04);}
.btn-outline{background:transparent; color:var(--white); border-color:var(--white);}
.btn-outline:hover{background:var(--white); color:var(--black);}

/* ---------- PROMO BAR ---------- */
.promo-bar{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--line);
  background:var(--black-soft);
}
.promo-item{
  text-align:center; padding:26px 10px;
  border-right:1px solid var(--line);
}
.promo-item:last-child{border-right:none;}
.promo-item .num{font-family:'Anton'; font-size:clamp(22px,4vw,32px);}
.promo-item .label{color:var(--muted); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; margin-top:6px;}
.promo-note{text-align:center; color:var(--muted-2); font-size:12px; padding:14px 0; letter-spacing:0.3px; border-bottom:1px solid var(--line);}

/* ---------- SECTION HEADINGS ---------- */
.section{padding:90px 0;}
.section-title{
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:40px; gap:20px; flex-wrap:wrap;
}
.section-title h2{font-size:clamp(28px,4vw,42px);}
.section-title p{color:var(--muted); font-size:14px; max-width:420px;}

/* ---------- CATEGORIES ---------- */
.categories-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.cat-card{
  position:relative; aspect-ratio:3/4; border-radius:14px; overflow:hidden;
  background:var(--black-card); border:1px solid var(--line);
  display:flex; align-items:flex-end; padding:22px;
  transition:transform .3s ease, border-color .3s ease;
}
.cat-card:hover{transform:translateY(-6px); border-color:#444;}
.cat-card .photo-slot{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--muted-2); font-size:12px; border:1px dashed var(--line);
}
.cat-card .cat-overlay{
  position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.9) 100%);
}
.cat-card .cat-label{position:relative; z-index:2; font-family:'Anton'; font-size:20px; letter-spacing:0.5px;}
.cat-card .cat-sub{position:relative; z-index:2; color:var(--muted); font-size:11px; letter-spacing:1px; text-transform:uppercase; margin-top:4px;}

/* ---------- FILTER TABS ---------- */
.filter-tabs{display:flex; gap:10px; margin-bottom:34px; flex-wrap:wrap;}
.filter-tab{
  background:transparent; border:1px solid var(--line); color:var(--muted);
  padding:9px 20px; border-radius:100px; font-size:12px; letter-spacing:0.8px;
  text-transform:uppercase; font-weight:700; transition:all .2s ease;
}
.filter-tab:hover{border-color:#555; color:var(--white);}
.filter-tab.active{background:var(--white); color:var(--black); border-color:var(--white);}

/* ---------- PRODUCT GRID ---------- */
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.card{
  background:var(--black-card); border:1px solid var(--line); border-radius:14px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .25s ease, border-color .25s ease;
}
.card:hover{transform:translateY(-4px); border-color:#3a3a3a;}
.card-media{
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  background:var(--black-soft); padding:24px; overflow:hidden;
}
.card-media svg, .card-media img{width:100%; height:100%; object-fit:contain; transition:transform .4s ease;}
.card:hover .card-media svg, .card:hover .card-media img{transform:scale(1.08);}
.card-body{padding:18px; display:flex; flex-direction:column; gap:4px;}
.card-body h3{font-size:15px; font-weight:600; font-family:'Inter'; text-transform:none; letter-spacing:0;}
.card-body .tag{color:var(--muted); font-size:12px;}
.card-body .price{font-family:'Anton'; font-size:18px; margin-top:8px;}
.empty-state{
  grid-column:1/-1; text-align:center; padding:70px 20px; color:var(--muted);
  border:1px dashed var(--line); border-radius:14px; font-size:14px;
}

/* ---------- WIDE BANNERS ---------- */
.wide-banner{
  position:relative; border-radius:18px; overflow:hidden;
  min-height:340px; display:flex; align-items:center;
  background:var(--black-card); border:1px solid var(--line);
  margin-bottom:24px; padding:50px;
}
.wide-banner .photo-slot{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--muted-2); font-size:13px; border:1px dashed var(--line);
}
.wide-banner .banner-overlay{position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,0.85) 20%, rgba(0,0,0,0.1) 90%);}
.wide-banner .banner-content{position:relative; z-index:2; max-width:420px;}
.wide-banner h3{font-size:clamp(26px,4vw,40px); margin-bottom:14px;}
.wide-banner p{color:var(--muted); font-size:14px; margin-bottom:24px;}

/* ---------- TEASER CARDS ---------- */
.teaser-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.teaser-card{
  border:1px solid var(--line); border-radius:14px; padding:36px;
  background:var(--black-card);
}
.teaser-card h3{font-size:20px; margin-bottom:10px;}
.teaser-card p{color:var(--muted); font-size:14px; margin-bottom:20px;}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line); padding:60px 0 30px; background:var(--black-soft);}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
  margin-bottom:40px;
}
.footer-brand{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.footer-brand img{width:28px;}
.footer-col h4{font-size:12px; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); margin-bottom:16px;}
.footer-col a, .footer-col p{display:block; color:var(--muted); font-size:13px; margin-bottom:10px;}
.footer-col a:hover{color:var(--white);}
.footer-bottom{
  border-top:1px solid var(--line); padding-top:24px;
  display:flex; justify-content:space-between; color:var(--muted-2); font-size:12px; flex-wrap:wrap; gap:10px;
}

.wa-float{
  position:fixed; bottom:24px; left:24px; z-index:90;
  background:#25D366; color:#fff; border-radius:100px;
  padding:13px 20px; font-weight:700; font-size:13px;
  display:flex; align-items:center; gap:9px;
}

/* ---------- SIZE GUIDE MODAL ---------- */
.overlay{position:fixed; inset:0; background:rgba(0,0,0,0.75); display:none; z-index:200; align-items:center; justify-content:center; padding:20px;}
.overlay.open{display:flex;}
.modal{
  background:var(--black-card); border:1px solid var(--line); border-radius:16px;
  max-width:560px; width:100%; padding:34px; max-height:85vh; overflow-y:auto;
}
.modal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:22px;}
.modal-head h3{font-size:20px;}
.modal-close{background:none; border:none; color:var(--white); font-size:24px;}
.size-table{width:100%; border-collapse:collapse; font-size:13px;}
.size-table th, .size-table td{padding:10px 8px; border-bottom:1px solid var(--line); text-align:center;}
.size-table th{color:var(--muted); font-weight:600; letter-spacing:0.5px; text-transform:uppercase; font-size:11px;}
.size-table td:first-child, .size-table th:first-child{text-align:left; color:var(--white); font-weight:600;}

@media (max-width:1000px){
  .categories-grid{grid-template-columns:repeat(2,1fr);}
  .grid{grid-template-columns:repeat(3,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  .nav-links{display:none;}
  .menu-toggle{display:block;}
  .grid{grid-template-columns:repeat(2,1fr);}
  .teaser-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:24px;}
}