:root{--gold:#c7a45b;--black:#070707;--soft:#151515}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:#f5f1e8;font-family:Arial,sans-serif}
a{color:inherit;text-decoration:none}

header{position:sticky;top:0;z-index:10;background:#050505ee;border-bottom:1px solid #2a2418;display:flex;align-items:center;gap:24px;padding:10px 5vw}
.logo{width:165px;display:block}
nav{display:flex;gap:20px;font-size:13px}
nav a:hover{color:var(--gold)}

.tools{margin-left:auto;display:flex;align-items:center;gap:10px}
.tools input{width:230px;background:#111;border:1px solid #383024;color:white;border-radius:20px;padding:10px 14px}
.tools button,.wa{border:1px solid var(--gold);background:transparent;color:var(--gold);padding:9px 12px;border-radius:4px}
.menu{display:none;background:none;color:var(--gold);border:0;font-size:24px}

.hero{min-height:570px;position:relative;overflow:hidden;display:flex;align-items:center;padding:7vw}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.65}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000 10%,transparent 70%)}
.hero div{position:relative;z-index:1;max-width:620px}

.eyebrow{letter-spacing:.28em;color:var(--gold);font-size:11px}

.hero h1,.products h2,.coming h2,.categories h2,.promos h2{
font-family:Georgia,'Times New Roman',serif;
font-weight:400
}

.hero h1{font-size:54px;line-height:1.05;margin:14px 0}
.hero em,.categories em,.promos em{color:var(--gold);font-style:italic}

.gold{display:inline-block;background:var(--gold);color:#090909;padding:13px 22px;font-weight:700;margin-top:12px}

.categories,.promos{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
padding:30px 5vw
}

.categories article,.promos article{
min-height:260px;
background-size:cover;
background-position:center;
position:relative;
padding:34px;
display:flex;
flex-direction:column;
justify-content:flex-end
}

.categories article:after,.promos article:after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(0deg,#000b,transparent)
}

.categories h2,.categories button,.promos h2,.promos a{z-index:1;margin:0}
.categories h2,.promos h2{font-size:34px}

.categories button{
align-self:flex-start;
margin-top:12px;
background:none;
border:0;
color:#fff;
border-bottom:1px solid var(--gold);
padding:8px 0
}

.benefits{
display:grid;
grid-template-columns:repeat(4,1fr);
padding:28px 5vw;
border-block:1px solid #292318
}

.benefits div{display:grid;text-align:center;gap:6px;color:var(--gold)}
.benefits b{color:#eee}
.benefits span{font-size:11px;color:#888}

.products{text-align:center;padding:55px 5vw}
.products h2,.coming h2{font-size:38px;margin:8px}

.grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-top:35px
}

.card{
text-align:left;
background:#0d0d0d;
border:1px solid #222;
padding-bottom:16px;
overflow:hidden
}

/* CORRECCIÓN DE LAS FOTOS DE LOS RELOJES */
.card img{
width:100%;
aspect-ratio:1/1;
object-fit:contain;
object-position:center;
background:#0d0d0d;
padding:18px;
display:block
}

.card h3{
font-family:Georgia,serif;
font-weight:400;
margin:14px 14px 5px
}

.card p{margin:0 14px;color:#999;font-size:12px}
.card .actions{display:flex;gap:8px;margin:14px}

.card button{
flex:1;
padding:10px;
background:transparent;
border:1px solid var(--gold);
color:var(--gold)
}

.brands{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:50px;
padding:35px 5vw;
border-block:1px solid #282216;
color:#d8d8d8;
font-weight:700;
letter-spacing:.08em
}

.promos article{min-height:330px}

.coming{
text-align:center;
padding:80px 20px;
border-bottom:1px solid #282216
}

.coming p:last-child{color:#999}

footer{
display:grid;
grid-template-columns:1.2fr 1fr 1fr;
gap:35px;
padding:45px 5vw;
background:#030303
}

footer img{width:220px}
footer b{color:var(--gold);font-family:Georgia,serif}
footer p{color:#999;font-size:13px}
footer a:hover{color:var(--gold)}

.modal{
display:none;
position:fixed;
z-index:30;
inset:0;
background:#000c;
padding:4vw;
overflow:auto
}

.modal.show{display:block}

.modalbox{
max-width:1000px;
margin:auto;
background:#0d0d0d;
border:1px solid #4a3c20;
padding:25px;
position:relative
}

.close{
position:absolute;
right:15px;
top:10px;
font-size:28px;
background:none;
border:0;
color:white
}

.detail{
display:grid;
grid-template-columns:1.1fr 1fr;
gap:30px
}

.gallery-main{
width:100%;
aspect-ratio:1/1;
object-fit:cover
}

.thumbs{
display:flex;
gap:8px;
margin-top:8px
}

.thumbs img{
width:75px;
height:75px;
object-fit:cover;
border:1px solid #444
}

.detail h2{
font-family:Georgia,serif;
font-size:34px
}

.detail li{margin:8px 0;color:#bbb}

.cart{
position:fixed;
z-index:40;
right:-420px;
top:0;
width:min(390px,92vw);
height:100%;
background:#0b0b0b;
border-left:1px solid var(--gold);
padding:25px;
transition:.3s
}

.cart.open{right:0}

.cart>button{
float:right;
background:none;
border:0;
color:#fff;
font-size:24px
}

.cart h2{font-family:Georgia,serif}

.cart-item{
border-bottom:1px solid #292318;
padding:12px 0
}

.cart-item small{color:#999}
.cart-item button{background:none;color:#c7a45b;border:0}

.cart .gold{
width:100%;
text-align:center;
margin-top:20px
}

.empty{color:#888}
.hide{display:none!important}

/* ICONOS Y BUSCADOR */
.search-wrap{
position:relative;
display:flex;
align-items:center;
flex:1
}

.search-wrap input{padding-right:42px}

.search-icon{
position:absolute;
right:3px;
width:36px;
height:34px;
border:0!important;
padding:7px!important;
display:grid;
place-items:center
}

.search-icon svg,.cart-icon svg{
width:22px;
height:22px;
fill:none;
stroke:var(--gold);
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round
}

.wa-icon,.cart-icon{
width:42px;
height:42px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid var(--gold);
background:transparent;
border-radius:4px;
overflow:hidden;
flex:0 0 42px
}

.wa-icon img{
width:32px;
height:32px;
object-fit:cover;
border-radius:50%
}

.cart-icon{
position:relative;
padding:0!important
}

.cart-icon b{
position:absolute;
right:-5px;
top:-7px;
background:var(--gold);
color:#090909;
border-radius:10px;
min-width:18px;
height:18px;
padding:0 4px;
display:flex;
align-items:center;
justify-content:center;
font-size:11px!important
}

.benefit-img{
width:44px;
height:44px;
object-fit:cover;
margin:0 auto 4px;
border-radius:6px
}

.benefit-link{
display:grid;
text-align:center;
gap:6px
}

.benefit-link b{color:#eee}
.benefit-link span{font-size:11px;color:#888}

/* TABLET Y CELULAR */
@media(max-width:850px){
header{flex-wrap:wrap}
.menu{display:block;margin-left:auto}
nav{display:none;order:3;width:100%;flex-direction:column;padding:12px 0}
nav.open{display:flex}
.tools{order:4;width:100%;margin:0}
.tools input{flex:1;width:auto}
.wa{display:none}
.hero{min-height:520px;padding:30px}
.hero h1{font-size:39px}
.categories,.promos{grid-template-columns:1fr;padding:14px}
.benefits{grid-template-columns:1fr 1fr;gap:25px}
.grid{grid-template-columns:1fr 1fr;gap:12px}
.detail{grid-template-columns:1fr}
footer{grid-template-columns:1fr}
.brands{gap:25px}
.logo{width:145px}
.search-wrap{min-width:0}
.search-wrap input{width:100%}
.wa-icon{display:flex}
}

@media(max-width:520px){
.grid{grid-template-columns:1fr}
.hero h1{font-size:34px}
.tools button{font-size:0}
.tools button b{font-size:12px}
.categories h2,.promos h2{font-size:29px}
.search-icon{font-size:initial!important}
.cart-icon{font-size:initial!important}
}