/* Linaje Joyería · tema claro (blanco+dorado) y oscuro (negro+dorado). Las líneas sobrescriben --accent/--bg desde la BD. */
:root{--accent:#C6A04F;--accent2:#FFD700;--cream:#FFF9E3;--bg-light:#fff;--bg-dark:#000;--serif:'Cinzel',Georgia,serif;--sans:'Jost','Futura',system-ui,sans-serif}
html{--bg:var(--bg-light);--fg:#1b1608;--muted:#7d7258;--card:#fff;--soft:#faf6ea;scroll-behavior:smooth}
html[data-theme=dark]{--bg:var(--bg-dark);--fg:var(--cream);--muted:#b5a780;--card:#0c0c0c;--soft:#111}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-weight:300;line-height:1.55;transition:background .4s,color .4s}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
h1,h2,h3,.brand b{font-family:var(--serif);font-weight:500;letter-spacing:.04em}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.btn{display:inline-block;padding:.85rem 1.9rem;background:var(--accent);color:#000;font-weight:500;letter-spacing:.16em;text-transform:uppercase;font-size:.78rem;border:1px solid var(--accent);transition:.3s;text-align:center}
.btn:hover{background:var(--accent2);border-color:var(--accent2)}.btn.sm{padding:.65rem 1.6rem;font-size:.72rem}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--accent)}.btn.ghost:hover{background:var(--accent);color:#000}
.btn.gold{background:linear-gradient(120deg,var(--accent),var(--accent2),var(--accent));background-size:200%;animation:shine 4s linear infinite}
@keyframes shine{to{background-position:-200% 0}}
.ph{display:grid;place-items:center;background:var(--soft);width:100%;height:100%}.ph img{width:38%;opacity:.4}

/* NAV */
.nav{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2rem;padding:.7rem 2rem;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.brand{display:flex;align-items:center;gap:.8rem}.brand img{width:46px;height:46px;object-fit:contain}
.brand-text{display:flex;flex-direction:column;line-height:1}.brand b{font-size:1.5rem;letter-spacing:.14em}.brand small{font-size:.58rem;letter-spacing:.7em;margin-top:.3rem;color:var(--accent)}
.menu{display:flex;gap:1.6rem;justify-content:center;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
.menu-item{position:relative}.menu-item>a{padding:.6rem 0;display:block}.menu a:hover,.menu a.hl{color:var(--accent)}
.menu a.hl{border:1px solid var(--accent);padding:.5rem 1rem}
.sub{position:absolute;top:100%;left:-1rem;min-width:200px;background:var(--bg);border:1px solid var(--accent);padding:.6rem 0;opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s}
.sub a{display:block;padding:.5rem 1.2rem}.has-sub:hover .sub{opacity:1;visibility:visible;transform:none}
.tools{display:flex;gap:.3rem}.icon-btn{position:relative;padding:.5rem;border-radius:50%;transition:.2s}.icon-btn:hover{color:var(--accent)}
.badge{position:absolute;top:0;right:-2px;background:var(--accent);color:#000;font:500 .62rem var(--sans);min-width:16px;height:16px;border-radius:8px;display:none;place-items:center;font-style:normal}
.badge.on{display:grid}.burger,.close-menu{display:none}

/* HERO */
.hero{position:relative;height:78vh;min-height:420px;overflow:hidden;background:#000}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s;display:flex;align-items:center}
.slide.on{opacity:1}.slide::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.65),transparent 70%)}
.slide-in{position:relative;color:#FFF9E3;padding:0 8vw;max-width:760px;transform:translateY(20px);opacity:0;transition:1s .4s}.slide.on .slide-in{transform:none;opacity:1}
.slide-in span{letter-spacing:.3em;text-transform:uppercase;font-size:.8rem;color:var(--accent2)}.slide-in h2{font-size:clamp(2rem,5vw,4.2rem);line-height:1.1;margin:.8rem 0 1.8rem}
.slide .btn.ghost{color:#FFF9E3}
.arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:44px;height:44px;font-size:1.8rem;display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 70%,transparent);border:1px solid var(--accent);color:var(--fg);transition:.2s}
.arrow:hover{background:var(--accent);color:#000}.arrow.l{left:1.2rem}.arrow.r{right:1.2rem}
.dots{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);display:flex;gap:.6rem}.dots i{width:28px;height:2px;background:rgba(255,255,255,.4);transition:.3s}.dots i.on{background:var(--accent2);width:44px}

/* SECCIONES */
.sec{max-width:1400px;margin:0 auto;padding:5rem 2rem 1rem}.sec.tight{padding-top:1rem}
.sec-h{text-align:center;margin-bottom:2.6rem}.sec-h h2{font-size:clamp(1.5rem,3vw,2.2rem);text-transform:uppercase}
.sec-h p{letter-spacing:.2em;text-transform:uppercase;font-size:.82rem;color:var(--accent);margin-top:.5rem}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.cat{position:relative;aspect-ratio:3/4;overflow:hidden;display:block}.cat img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.cat:hover img{transform:scale(1.06)}.cat .ph img{width:30%;height:auto}.cat span{position:absolute;top:12%;width:100%;text-align:center;font-size:1.5rem;letter-spacing:.2em;text-transform:uppercase;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.4);font-weight:300}
.cat::after{content:"";position:absolute;inset:0;border:1px solid transparent;transition:.4s}.cat:hover::after{border-color:var(--accent2);inset:10px}
.line-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem}
.line-tile{text-align:center;padding:2.2rem 1rem;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);display:flex;flex-direction:column;align-items:center;gap:.5rem;transition:.35s;background:var(--card)}
.line-tile img{width:90px;height:90px;object-fit:contain}.line-tile b{font-family:var(--serif);letter-spacing:.1em;font-weight:500;color:var(--accent)}.line-tile small{color:var(--muted)}
.line-tile:hover{transform:translateY(-6px);border-color:var(--accent2);box-shadow:0 14px 40px -16px var(--accent)}

/* TARJETAS */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2rem 1.4rem}
.rail-wrap{position:relative}.rail{display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 3rem}.rail::-webkit-scrollbar{display:none}
.rail .card{flex:0 0 min(270px,70%);scroll-snap-align:start}
.card{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.4rem}
.card-img{display:block;width:100%;aspect-ratio:4/5;overflow:hidden;background:var(--soft);position:relative}.card-img>img{width:100%;height:100%;object-fit:cover;transition:transform .7s}.card:hover .card-img>img{transform:scale(1.05)}
.tag{position:absolute;top:.7rem;left:.7rem;background:var(--accent);color:#000;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;padding:.2rem .6rem}
.fav{position:absolute;top:.5rem;right:.5rem;width:36px;height:36px;display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 75%,transparent);border-radius:50%;z-index:2;transition:.2s}.fav.on svg{fill:var(--accent);stroke:var(--accent)}
.card-name{font-family:var(--sans);font-weight:500;font-size:.95rem;letter-spacing:.01em;margin-top:.7rem;min-height:3.8em}.card-specs{font-size:.82rem;color:var(--muted)}
.price{font-size:1.35rem;color:var(--accent);font-weight:400}.price s{font-size:.9rem;color:var(--muted);margin-left:.4rem}.price.big{font-size:1.8rem}

/* CATALOGO */
.cat-head{text-align:center;padding:3.2rem 1rem 1rem}.cat-head img{width:84px;margin:0 auto 1rem}.cat-head h1{font-size:2.2rem;text-transform:uppercase}.cat-head p{color:var(--accent);letter-spacing:.2em;text-transform:uppercase;font-size:.82rem}
.toolbar{max-width:1400px;margin:1.5rem auto 0;padding:0 2rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center}
.chips{display:flex;gap:.5rem;flex-wrap:wrap}.chip{padding:.4rem 1rem;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}.chip.on,.chip:hover{background:var(--accent);color:#000}
.filters{display:flex;gap:.6rem}select,input,textarea{font:inherit;background:var(--card);color:var(--fg);border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);padding:.55rem .8rem}
.count{color:var(--muted);margin-bottom:1.2rem;font-size:.85rem}.empty{text-align:center;padding:4rem;color:var(--muted)}
.pager{display:flex;justify-content:center;gap:.4rem;margin:3rem 0 2rem}.pager a,.pager span{min-width:40px;height:40px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}.pager a:hover,.pager a.on{background:var(--accent);color:#000}

/* PRODUCTO */
.pdp{max-width:1200px;margin:0 auto;padding:3rem 2rem;display:grid;grid-template-columns:1.1fr 1fr;gap:3.5rem}
.gal-main{aspect-ratio:1;background:var(--soft);overflow:hidden}.gal-main img{width:100%;height:100%;object-fit:cover}
.thumbs{display:flex;gap:.6rem;margin-top:.7rem}.thumbs img{width:76px;height:76px;object-fit:cover;cursor:pointer;opacity:.6;border:1px solid transparent}.thumbs img:hover{opacity:1;border-color:var(--accent)}
.info h1{font-size:1.8rem;margin:.4rem 0}.crumb,.note,.sku{font-size:.8rem;color:var(--muted)}.desc{margin:1.4rem 0;white-space:normal}.actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}

/* FOOTER */
.foot{margin-top:6rem;border-top:1px solid color-mix(in srgb,var(--accent) 40%,transparent);background:var(--soft)}.foot-in{max-width:1200px;margin:0 auto;padding:3rem 2rem;display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem}
.foot h4{font-family:var(--serif);color:var(--accent);margin-bottom:.8rem;letter-spacing:.12em}.foot a,.foot span{display:block;color:var(--muted);font-size:.9rem;padding:.15rem 0}.foot a:hover{color:var(--accent)}
.foot-brand{font-family:var(--serif);font-size:1.4rem;letter-spacing:.2em}.foot p{color:var(--muted);margin-top:.6rem}.copy{text-align:center;padding:1.2rem;font-size:.75rem;color:var(--muted);border-top:1px solid color-mix(in srgb,var(--accent) 20%,transparent)}

/* DRAWERS / BUSCADOR */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:.3s;z-index:90}.scrim.on{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,100%);background:var(--bg);border-left:1px solid var(--accent);z-index:100;transform:translateX(100%);transition:.4s;display:flex;flex-direction:column}.drawer.on{transform:none}
.drawer-h{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 1.4rem;border-bottom:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}.drawer-b{flex:1;overflow:auto;padding:1rem 1.4rem}
.drawer-f{padding:1.2rem 1.4rem;border-top:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}.total{display:flex;justify-content:space-between;margin-bottom:1rem;font-size:1.1rem}.total b{color:var(--accent)}.drawer-f .btn{display:block}
.row{display:grid;grid-template-columns:64px 1fr auto;gap:.8rem;align-items:center;padding:.7rem 0;border-bottom:1px solid color-mix(in srgb,var(--accent) 15%,transparent);font-size:.88rem}
.row img,.row .ph{width:64px;height:64px;object-fit:cover}.row b{display:block;font-weight:500}.row .qty{display:flex;gap:.4rem;align-items:center;margin-top:.3rem}.row .qty button{width:24px;height:24px;border:1px solid var(--accent)}.row .rm{color:var(--muted)}
.overlay{position:fixed;inset:0;background:color-mix(in srgb,var(--bg) 96%,transparent);z-index:120;display:none;align-items:center;justify-content:center;gap:1rem}.overlay.on{display:flex}
.overlay form{display:flex;width:min(640px,80%)}.overlay input{flex:1;font-size:1.3rem;padding:1rem}.overlay form button{padding:0 1.5rem;background:var(--accent);color:#000}

/* BIENVENIDA */
.welcome-body{overflow:hidden;height:100vh;background:#000;color:var(--cream)}
.loader{position:fixed;inset:0;background:#000;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;transition:opacity .9s}.loader.out{opacity:0;pointer-events:none}
.loader-emblem{width:130px;animation:emb 1.6s ease-out both}
@keyframes emb{from{opacity:0;transform:scale(.6) rotate(-25deg);filter:blur(14px);clip-path:circle(0)}to{opacity:1;transform:none;filter:none;clip-path:circle(75%)}}
.loader-word{display:flex;gap:.35rem;font-family:var(--serif);font-size:3rem;letter-spacing:.1em}.loader-word span{opacity:0;transform:translateY(24px);animation:up .8s calc(1.2s + var(--i)*.14s) forwards}
.loader-sub{letter-spacing:.8em;font-size:.7rem;color:var(--accent);opacity:0;animation:up .8s 2.5s forwards}
@keyframes up{to{opacity:1;transform:none}}
.welcome{position:fixed;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.4s;display:grid;place-items:center;text-align:center}.welcome.show{opacity:1}
.welcome-shade{position:absolute;inset:0;background:radial-gradient(circle,rgba(0,0,0,.2),rgba(0,0,0,.75))}
.welcome-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:1rem}.welcome-logo{width:110px}.welcome h1{font-size:clamp(2.4rem,7vw,4.6rem);letter-spacing:.2em}.welcome p{letter-spacing:.35em;text-transform:uppercase;font-size:.85rem;color:var(--accent2);margin-bottom:1.4rem}

@media(max-width:900px){
 .nav{grid-template-columns:auto 1fr auto;gap:.5rem;padding:.6rem 1rem}.burger{display:block}.brand{justify-self:center}.brand b{font-size:1.15rem}.brand img{width:38px;height:38px}
 .menu{position:fixed;top:0;left:0;height:100%;width:min(320px,85%);background:var(--bg);flex-direction:column;justify-content:flex-start;gap:0;padding:4rem 1.4rem;transform:translateX(-100%);transition:.4s;z-index:100;border-right:1px solid var(--accent);overflow:auto}.menu.on{transform:none}
 .close-menu{display:block;position:absolute;top:1rem;right:1rem}.sub{position:static;opacity:1;visibility:visible;transform:none;border:0;padding:0 0 .5rem 1rem}
 .cat-grid{grid-template-columns:repeat(2,1fr)}.pdp{grid-template-columns:1fr;gap:1.5rem}.foot-in{grid-template-columns:1fr}.hero{height:60vh}.rail{padding:0 1rem}.rail-wrap .arrow{display:none}.sec{padding:3rem 1rem 1rem}
 .loader-word{font-size:2rem}
}

/* NAV minimalista: solo nombre + hamburguesa a la izquierda; opciones en panel lateral (todas las pantallas) */
.nav{grid-template-columns:1fr auto 1fr;gap:.5rem;padding:.7rem 1.4rem}
.burger{display:block;justify-self:start}.brand{justify-self:center}.tools{justify-self:end}
.brand img{display:none}.brand b{font-size:1.6rem}
.menu{position:fixed;top:0;left:0;height:100%;width:min(360px,88%);background:var(--bg);flex-direction:column;justify-content:flex-start;align-items:stretch;gap:0;padding:5rem 2rem 2rem;transform:translateX(-100%);transition:transform .45s cubic-bezier(.2,.8,.2,1);z-index:100;border-right:1px solid var(--accent);overflow:auto;font-size:.95rem}
.menu.on{transform:none}
.menu-item>a{padding:.9rem 0;border-bottom:1px solid color-mix(in srgb,var(--accent) 20%,transparent)}
.menu a.hl{border:1px solid var(--accent);padding:.8rem 1rem;margin-top:1rem;text-align:center}
.close-menu{display:block;position:absolute;top:1rem;right:1rem}
.sub{position:static;opacity:1;visibility:visible;transform:none;border:0;padding:.2rem 0 .6rem 1rem;min-width:0}
.sub a{padding:.4rem 0;color:var(--muted)}.sub a:hover{color:var(--accent)}
/* Logo visible (emblema + nombre) y panel a pantalla completa */
.brand img{display:block;width:46px;height:46px;object-fit:contain}
.nav{backdrop-filter:none;background:var(--bg)}