/* ============================================
   NOVALUX FINDS — MASTER STYLESHEET
   ============================================ */

:root{
  --gold:#C9A227; --gold-lt:#E8D48B; --gold-dp:#8C6D1F;
  --ink:#0B0F1A; --ink-2:#10172A; --ink-3:#161E36;
  --cloud:#F4F1EA; 
  /* Contrastes elevados para cumplir WCAG AA sobre fondos oscuros */
  --mist:#B4C2DC; --smoke:#8A99B5; 
  --white:#FFFFFF; --danger:#ef4444; --success:#10b981;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
::selection{background:var(--gold);color:var(--ink)}
body{font-family:var(--sans);background:var(--ink);color:var(--cloud);overflow-x:hidden;font-weight:300;line-height:1.7;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--ink-3)}
::-webkit-scrollbar-thumb:hover{background:var(--gold-dp)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

*:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.gold-shimmer{
  background:linear-gradient(110deg,var(--gold-dp) 25%,var(--gold-lt) 45%,#FFF6DC 50%,var(--gold-lt) 55%,var(--gold-dp) 75%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:liquidGold 7s ease-in-out infinite;
}
@keyframes liquidGold{ 0%{background-position:200% 0} 50%{background-position:0% 0} 100%{background-position:-200% 0} }

/* ============ PRELOADER ============ */
#preloader{position:fixed;inset:0;z-index:10000;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity 1s ease,visibility 1s}
#preloader.gone{opacity:0;visibility:hidden}
.pre-mark{font-family:var(--serif);font-size:clamp(40px,9vw,90px);font-weight:600;letter-spacing:.15em;color:var(--cloud);overflow:hidden}
.pre-mark span{display:inline-block;opacity:0;transform:translateY(110%);animation:preUp .9s cubic-bezier(.16,1,.3,1) forwards,liquidGold 7s ease-in-out infinite;background:linear-gradient(110deg,var(--gold-dp) 25%,var(--gold-lt) 45%,#FFF6DC 50%,var(--gold-lt) 55%,var(--gold-dp) 75%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes preUp{to{opacity:1;transform:translateY(0)}}
.pre-line{width:0;height:1px;background:var(--gold);margin-top:18px;animation:preLine 1.2s ease 1s forwards}
@keyframes preLine{to{width:180px}}
.pre-sub{margin-top:16px;font-size:11px;letter-spacing:.5em;text-transform:uppercase;color:var(--gold);opacity:0;animation:fadeIn 1s ease 1.4s forwards}
@keyframes fadeIn{to{opacity:1}}

/* ============ NAVEGACIÓN ============ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:10000; display:flex; justify-content:space-between; align-items:center; 
  padding:22px 5vw; transition:all .4s ease;
  background: linear-gradient(to bottom, rgba(11,15,26,0.9) 0%, transparent 100%);
}
nav.solid {
  background: rgba(11,15,26,.85); backdrop-filter: blur(20px); 
  padding: 16px 5vw; border-bottom: 1px solid rgba(201,162,39,.12);
}
.nav-logo{font-family:var(--serif);font-size:23px;font-weight:600;letter-spacing:.18em;transition:transform 0.3s ease;}
.nav-logo.gold-shimmer{display:inline-block}
.nav-logo:hover{transform: scale(1.05);}
.nav-links{display:flex;gap:38px;align-items:center}
.nav-links a{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#fff;position:relative;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width .4s ease}
.nav-links a:hover::after{width:100%}
.nav-cart{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12px;letter-spacing:.15em;text-transform:uppercase; transition: color 0.3s;}
.nav-cart:hover{color: var(--gold);}
.nav-cart-count{background:var(--gold);color:var(--ink);width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.nav-cart:hover .nav-cart-count{transform: scale(1.15);}
.nav-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer}
.nav-toggle span{width:26px;height:2px;background:#fff;transition:all 0.3s ease;}

/* ============ HERO ============ */
.hero{height:100vh;min-height:680px;position:relative;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background-attachment:fixed;}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 40%,rgba(201,162,39,.14),transparent 70%),linear-gradient(180deg,var(--ink-2),var(--ink) 70%)}
.hero-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;animation:float 14s ease-in-out infinite}
.orb-1{width:380px;height:380px;background:radial-gradient(circle,rgba(201,162,39,.35),transparent 70%);top:8%;left:12%}
.orb-2{width:300px;height:300px;background:radial-gradient(circle,rgba(140,109,31,.4),transparent 70%);bottom:12%;right:14%;animation-delay:-7s}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-40px)}}
.hero-content{position:relative;z-index:2;padding:0 24px;max-width:1000px}
.hero-eyebrow{font-size:12px;letter-spacing:.55em;text-transform:uppercase;color:var(--gold);margin-bottom:30px;opacity:0;animation:rise 1s ease .3s forwards}
.hero-title{font-family:var(--serif);font-size:clamp(48px,11vw,150px);font-weight:500;line-height:.95;letter-spacing:-.01em}
.hero-title .ln{display:block;overflow:hidden}
.hero-title .ln i{display:inline-block;font-style:normal;transform:translateY(110%);animation:rise 1.1s cubic-bezier(.16,1,.3,1) forwards;text-shadow:0 15px 40px rgba(0,0,0,0.9);}
.hero-title .ln:nth-child(1) i{animation-delay:.5s}
.hero-title .ln:nth-child(2) i{animation-delay:.7s;font-style:italic;color:var(--gold);font-weight:400}
@keyframes rise{to{transform:translateY(0);opacity:1}}
.hero-sub{font-family:var(--serif);font-style:italic;font-size:clamp(17px,2.4vw,23px);color:var(--mist);max-width:540px;margin:34px auto 0;opacity:0;animation:rise 1s ease 1s forwards}
.hero-cta{display:inline-flex;align-items:center;gap:14px;padding:18px 44px;border:1px solid var(--gold);color:var(--gold);font-size:12px;letter-spacing:.25em;text-transform:uppercase;position:relative;overflow:hidden;transition:color .5s;opacity:0;animation:rise 1s ease 1.2s forwards;z-index:1}
.hero-cta span{position:relative;z-index:2}
.hero-cta::before{content:"";position:absolute;inset:0;background:var(--gold);transform:translateY(101%);transition:transform .5s cubic-bezier(.16,1,.3,1);z-index:1}
.hero-cta:hover{color:var(--ink)}
.hero-cta:hover::before{transform:translateY(0)}
.scroll-hint{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2;font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--smoke);opacity:0;animation:fadeIn 1s ease 1.6s forwards}
.scroll-hint::after{content:"";display:block;width:1px;height:40px;background:linear-gradient(var(--gold),transparent);margin:12px auto 0;animation:scrollPulse 2s ease infinite}
@keyframes scrollPulse{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ============ MARQUEE ============ */
.marquee{ padding:26px 0;border-top:1px solid rgba(201,162,39,.12);border-bottom:1px solid rgba(201,162,39,.12); overflow:hidden;white-space:nowrap;background:var(--ink-2); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{display:inline-block;animation:scroll-x 15s linear infinite}
.marquee-track span{font-family:var(--serif);font-style:italic;font-size:26px;color:var(--smoke);margin:0 40px}
.marquee-track span b{color:var(--gold);font-style:normal;font-weight:400}
@keyframes scroll-x{to{transform:translateX(-50%)}}

/* ============ SECTIONS ============ */
.philosophy-clean{text-align:center;padding:130px 6vw;max-width:820px;margin:0 auto}
.philosophy-clean h2{font-family:var(--serif);font-size:clamp(34px,6vw,60px);font-weight:500;line-height:1.15;margin-bottom:30px}
.philosophy-clean h2 em{font-style:italic;color:var(--gold)}
.phil-text{color:var(--mist);font-size:17px;max-width:600px;margin:0 auto 50px;line-height:1.8}
.phil-stats{display:flex;justify-content:center;align-items:center;gap:40px;flex-wrap:wrap}
.phil-stat .num{font-family:var(--serif);font-size:54px;color:var(--gold);line-height:1}
.phil-stat .lbl{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--smoke);margin-top:10px; font-weight: 500;}
.phil-divider{width:1px;height:50px;background:rgba(201,162,39,.3)}

.collection-section{padding:130px 5vw;max-width:1600px;margin:0 auto}
.col-head{text-align:center;margin-bottom:60px}
.col-head h2{font-family:var(--serif);font-size:clamp(34px,5vw,58px);font-weight:500}
.col-head h2 em{font-style:italic;color:var(--gold)}
.col-controls{display:flex;gap:18px;align-items:center;margin-bottom:55px;flex-wrap:wrap;justify-content:center}
.col-search{flex:1;min-width:240px;max-width:340px;padding:14px 22px;background:var(--ink-2);border:1px solid rgba(201,162,39,.15);color:var(--cloud);border-radius:40px;outline:none;font-family:var(--sans);font-size:14px; transition: border-color 0.3s;}
.col-search:focus{border-color:var(--gold)}
.col-filters{display:flex;gap:8px}
.cf{background:none;border:1px solid rgba(255,255,255,.12);color:var(--mist);padding:11px 22px;border-radius:40px;cursor:pointer;font-size:11px;letter-spacing:.15em;text-transform:uppercase;font-family:var(--sans);transition:.3s; font-weight: 500;}
.cf.active,.cf:hover{border-color:var(--gold);color:var(--gold);background:rgba(201,162,39,.06)}
.col-sort{background:var(--ink-2);color:var(--cloud);border:1px solid rgba(201,162,39,.15);padding:13px 18px;border-radius:40px;font-family:var(--sans);font-size:13px;cursor:pointer;outline:none; transition: border-color 0.3s;}
.col-sort:focus{border-color:var(--gold);}

.intro-label{font-size:12px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-bottom:24px;display:block;}

/* ============ PRODUCT GRID ============ */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:30px}
.p-card{
    background:linear-gradient(165deg,rgba(22,30,54,0.8),rgba(16,23,42,0.9));
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.04);
    border-radius:6px;
    overflow:hidden;
    position:relative;
    cursor:pointer;
    transition:transform .6s cubic-bezier(.16,1,.3,1),border-color .5s;
    opacity:0;
    transform:translateY(40px);
    transform-style:preserve-3d;
    will-change:transform;
}
.p-card.in{opacity:1;transform:translateY(0)}
.p-card:hover{border-color:rgba(201,162,39,.4)}
.p-card::after{ content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(201,162,39,0); transition:box-shadow 0.6s cubic-bezier(0.16,1,0.3,1); pointer-events:none; border-radius:6px; }
.p-card:hover::after{ box-shadow:inset 0 0 0 1px rgba(201,162,39,0.4),0 0 35px rgba(201,162,39,0.25); }

.p-media{ height:260px; padding:25px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; background:radial-gradient(circle at 50% 40%,rgba(201,162,39,.06),transparent 70%),rgba(255,255,255,.01); border-bottom:1px solid rgba(255,255,255,.02); }
.p-media::after{ content:''; position:absolute; top:0; left:-75%; width:50%; height:100%; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.14) 50%,transparent 70%); transform:skewX(-18deg); transition:left 1.1s cubic-bezier(.16,1,.3,1); pointer-events:none; z-index:1; }
.p-card:hover .p-media::after{ left:125%; }
.p-media img{ width:100%; height:100%; object-fit:contain; transition:transform .8s cubic-bezier(.16,1,.3,1); filter:drop-shadow(0 20px 30px rgba(0,0,0,.6)); }
.p-card:hover .p-media img{transform:scale(1.08) translateY(-6px)}

.btn-wishlist { position: absolute; top: 16px; right: 16px; background: rgba(11, 15, 26, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--smoke); width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; transition: all 0.3s ease; z-index: 5; }
.btn-wishlist:hover { color: var(--cloud); border-color: rgba(255,255,255,0.3); transform: scale(1.1); }
.btn-wishlist.active { color: var(--gold); border-color: var(--gold); background: rgba(201,162,39,0.1); }

@keyframes pulseAlert { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } 70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
.p-badge{position:absolute;top:16px;left:16px;padding:6px 13px;font-size:9px;letter-spacing:.15em;text-transform:uppercase;border-radius:40px;z-index:2;font-weight:600; border: 1px solid transparent;}
.p-badge.low{background:var(--danger);color:#fff; animation: pulseAlert 2s infinite; border-color: rgba(255,255,255,0.2);}
.p-badge.out{background:#2a3247;color:var(--cloud); border-color: rgba(255,255,255,0.05);}
.p-badge.bestseller{background:linear-gradient(135deg,#C9A227,#8C6D1F);color:#0B0F1A; border-color: rgba(232,212,139,0.4); box-shadow:0 2px 12px rgba(201,162,39,0.3);}
.p-badge.new{background:rgba(16,23,42,0.9);color:#C9A227; border-color: rgba(201,162,39,0.5);}
.p-badge.selling{background:rgba(201,162,39,0.12);color:#E8D48B; border-color: rgba(201,162,39,0.3);}

.p-info{padding:26px 24px 28px}
.p-sku{font-size:10px;letter-spacing:.2em;color:var(--smoke);text-transform:uppercase;display:block;margin-bottom:6px; font-weight: 500;}
.p-name{font-family:var(--serif);font-size:25px;font-weight:500;margin:0 0 4px}
.p-foot{display:flex;justify-content:space-between;align-items:center}
.p-price{font-family:var(--serif);font-size:28px;color:var(--gold)}

.p-add{ background:transparent; border:1px solid var(--gold); color:var(--gold); padding:11px 22px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; border-radius:40px; cursor:pointer; transition:.4s; font-family:var(--sans); position:relative; overflow:hidden; z-index:1; font-weight: 600;}
.p-add::before{ content:''; position:absolute; top:0; left:0; width:0%; height:100%; background:var(--gold); transition:width 0.4s cubic-bezier(0.16,1,0.3,1); z-index:-1; }
.p-add:hover{color:var(--ink);}
.p-add:hover::before{width:100%;}
.p-qty{display:flex;align-items:center;gap:14px;border:1px solid var(--gold);border-radius:40px;padding:6px 14px}
.p-qty button{background:none;border:none;color:var(--gold);font-size:16px;cursor:pointer; transition: transform 0.2s;}
.p-qty button:hover{transform: scale(1.3);}
.p-qty span{color:var(--cloud);font-size:14px; font-weight:500;}
.p-sold{border:1px solid rgba(255,255,255,.1);color:var(--smoke);padding:11px 22px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;border-radius:40px;cursor:not-allowed}

/* Skeletons */
.skel-card{background:var(--ink-2);border-radius:16px;padding:22px}
.skel{background:linear-gradient(100deg,rgba(255,255,255,.04) 30%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.04) 70%);background-size:200% 100%;animation:skelShine 1.4s infinite;border-radius:8px}
@keyframes skelShine{to{background-position:-200% 0}}
.skel-img{width:100%;height:200px;margin-bottom:16px}
.skel-line{height:14px;margin-bottom:10px}
.skel-line.sm{width:40%;height:10px}
.skel-line.md{width:70%}
.skel-btn{height:42px;border-radius:30px;margin-top:14px}

/* Scroll Reveal */
.reveal{opacity:0;transform:translateY(50px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-hidden{opacity:0;transform:translateY(40px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.reveal-show{opacity:1;transform:translateY(0)}
.reveal.d1{transition-delay:.12s} .reveal.d2{transition-delay:.24s} .reveal.d3{transition-delay:.36s}

/* COMPONENTES */
@keyframes letterIn{to{opacity:1;transform:translateY(0) rotateX(0)}}
@keyframes toastIn{from{opacity:0;transform:translateX(120%)}to{opacity:1;transform:translateX(0)}}
.lux-toast{position:fixed;bottom:24px;right:24px;background:rgba(17,34,64,.95);border:1px solid rgba(212,175,55,.4);border-left:3px solid #D4AF37;color:#E6F1FF;padding:16px 22px;border-radius:12px;font-family:'Jost',Arial,sans-serif;font-size:14px;z-index:99999;backdrop-filter:blur(10px);box-shadow:0 12px 35px rgba(0,0,0,.5);animation:toastIn .4s cubic-bezier(.18,.89,.32,1.28);max-width:300px;display:flex;align-items:center;gap:12px}
.lux-toast .ti{font-size:20px}
.lux-ship{margin:14px 0 18px;padding:14px;background:var(--ink-3);border-radius:12px;border:1px solid rgba(201,162,39,.12)}
.lux-ship-txt{font-size:12px;color:var(--mist);margin-bottom:9px;display:flex;align-items:center;gap:6px}
.lux-ship-bar{height:6px;background:rgba(255,255,255,.06);border-radius:10px;overflow:hidden}
.lux-ship-fill{height:100%;width:0;background:linear-gradient(90deg,var(--gold-dp),var(--gold),var(--gold-lt));border-radius:10px;transition:width .6s cubic-bezier(.22,1,.36,1);box-shadow:0 0 12px rgba(201,162,39,.5)}
.lux-ship-done{color:var(--success)!important;font-weight:600}
@keyframes bagPop{0%{transform:scale(1)}40%{transform:scale(1.5) rotate(-12deg)}100%{transform:scale(1)}}
.bag-fly{position:fixed;z-index:99999;font-size:22px;pointer-events:none;transition:all .8s cubic-bezier(.5,-0.3,.7,1)}

/* MODALES */
.vault-modal{position:fixed;inset:0;background:rgba(11,15,26,.92);backdrop-filter:blur(16px);z-index:50000;display:none;justify-content:center;align-items:center;padding:24px 16px;overflow:hidden}
.vm-body{background:rgba(17,34,64,.92)!important;backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border:1px solid rgba(201,162,39,.18)!important;border-radius:14px;max-width:440px;width:100%;max-height:90vh;overflow-y:auto;padding:36px;position:relative;margin:0;animation:modalUp .5s cubic-bezier(.16,1,.3,1); box-shadow: 0 30px 60px rgba(0,0,0,0.6);}
#product-modal .vm-body{max-width:880px}
.vm-grid{display:grid;grid-template-columns:0.85fr 1fr;gap:30px;align-items:start}
.vm-col-img{position:sticky;top:0}
@media(max-width:600px){ #product-modal .vm-body{max-width:440px} .vm-grid{grid-template-columns:1fr;gap:20px} .vm-col-img{position:static} }
@keyframes modalUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.vm-close{position:sticky;top:0;left:100%;margin-bottom:-38px;transform:translateX(-4px);background:rgba(11,15,26,.7);border:1px solid rgba(255,255,255,.12);border-radius:50%;width:38px;height:38px;min-width:38px;color:var(--cloud);font-size:22px;cursor:pointer;z-index:10; transition: color 0.3s; display:flex; align-items:center; justify-content:center;}
.vm-close:hover{color:var(--gold); border-color:var(--gold);}
.vm-title{font-family:var(--serif);font-size:30px;font-weight:500;color:var(--gold);margin-bottom:24px}

.vm-empty { text-align: center; color: var(--smoke); padding: 50px 0; display:flex; flex-direction:column; align-items:center; gap: 15px; }
.vm-empty::before { content: '⬡'; font-size: 44px; color: rgba(201,162,39,0.3); line-height: 1; }

.vm-sub{display:flex;justify-content:space-between;font-size:16px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);margin-top:10px}
.vm-sub span:last-child{color:var(--gold); font-weight: 500;}
.ship-note{font-size:12px;color:var(--smoke);margin:14px 0 18px}
.vm-checkout{width:100%;padding:16px;background:var(--gold);color:var(--ink);border:none;border-radius:40px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;font-weight:600; transition: transform 0.3s, box-shadow 0.3s;}
.vm-checkout:hover:not(:disabled){transform: translateY(-2px); box-shadow: 0 8px 20px rgba(201,162,39,0.3);}
.vm-checkout:disabled{cursor: not-allowed;}
.vm-back{width:100%;background:none;border:none;color:var(--mist);margin-top:18px;cursor:pointer;font-size:13px;text-decoration:underline; transition: color 0.3s;}
.vm-back:hover{color: var(--cloud);}
.cart-row{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.cart-row-name{font-family:var(--serif);font-size:17px;color:var(--white);}
.cart-row-price{color:var(--gold);font-size:13px}
.cart-qc{display:flex;align-items:center;gap:12px}
.cart-qc button{background:var(--ink-3);border:none;color:var(--gold);width:26px;height:26px;border-radius:50%;cursor:pointer; transition: transform 0.2s;}
.cart-qc button:hover{transform: scale(1.15);}
.cart-rm{background:none;border:none;color:var(--danger);font-size:18px;cursor:pointer;margin-left:8px; transition: transform 0.3s;}
.cart-rm:hover{transform: scale(1.3);}

/* ============ FOOTER & CTA ============ */
.vault-cta{padding:140px 5vw;text-align:center;background:linear-gradient(180deg,var(--ink),var(--ink-2))}
.vault-cta-inner h2{font-family:var(--serif);font-size:clamp(36px,6vw,68px);font-weight:500;margin:14px 0 18px}
.vault-cta-inner h2 em{font-style:italic;color:var(--gold)}
.vault-cta-inner p{color:var(--mist);max-width:480px;margin:0 auto 36px}
.vault-form{display:flex;max-width:480px;margin:0 auto;gap:12px}
.vault-form input{flex:1;padding:16px 24px;background:var(--ink-3);border:1px solid rgba(201,162,39,.2);color:var(--cloud);border-radius:40px;outline:none;font-family:var(--sans); transition: border-color 0.3s;}
.vault-form input:focus{border-color: var(--gold);}
.vault-form button{padding:16px 32px;background:var(--gold);color:var(--ink);border:none;border-radius:40px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;font-weight:600;font-family:var(--sans); transition: transform 0.3s, box-shadow 0.3s;}
.vault-form button:hover{transform: translateY(-2px); box-shadow: 0 8px 20px rgba(201,162,39,0.3);}
.foot{background:var(--ink-2);padding:90px 5vw 30px;border-top:1px solid rgba(201,162,39,.12)}
.foot-grid{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:60px}
.foot-logo{font-family:var(--serif);font-size:24px;letter-spacing:.15em;margin-bottom:18px;display:inline-block}
.foot-col p{color:var(--smoke);font-size:14px;margin-bottom:10px}
.foot-col h4{font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:20px;color:var(--cloud); font-weight:600;}
.foot-col a{color:var(--gold);font-size:15px; transition: color 0.3s;}
.foot-col a:hover{color: var(--cloud);}
.foot-community{margin-top:20px;font-size:13px;color:var(--smoke)}
.foot-community b{color:var(--gold)}
.foot-secure{margin-top:18px;font-size:12px;color:var(--smoke)}

/* ============ RESPONSIVE ============ */
@media(max-width:1024px){
  .nav-toggle{display:flex}
  .nav-links{
    display:flex !important; flex-direction:column; position:fixed;
    top:0; right:-100%; width:auto; min-width:240px; max-width:78vw; height:100vh; height:100dvh;
    background:#10172A !important;
    border-left:1px solid rgba(201,162,39,0.25);
    padding:110px 36px 40px 36px; align-items:flex-start; gap:4px;
    transition:right 0.42s cubic-bezier(0.16,1,0.3,1); z-index:10001;
    margin:0; box-shadow:-30px 0 80px rgba(0,0,0,0.7);
  }
  .nav-links.open{right:0 !important;}
  .nav-links a{ font-size:15px !important; letter-spacing:0.2em !important; padding:18px 0 !important; width:100%; color:#F4F1EA !important; opacity:1 !important; visibility:visible !important; animation:none !important; transform:none !important; border-bottom:1px solid rgba(255,255,255,0.04); }
  .nav-links a:last-child{ border-bottom:none; }
  .nav-links a.active{ color:var(--gold) !important; }
  .nav-toggle{z-index:10002;position:relative;}
  
  .foot-grid{grid-template-columns:1fr;gap:40px}
  .product-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .p-media{height:180px; padding:15px;}
  .p-name{font-size:18px} .p-price{font-size:20px}
  .p-info{padding:18px 16px}
  .p-add,.p-sold{padding:9px 14px;font-size:9px}
  .vault-form{flex-direction:column}
}
@media(max-width:600px){
  .philosophy-clean{padding:70px 20px}
  .phil-divider{display:none} .phil-stats{gap:26px}
  .phil-stat .num{font-size:38px}
}

/* ============================================
   COMPARADOR Y CROSS-SELLING
   ============================================ */
.compare-bar { position: fixed; bottom: -100px; left: 50%; transform: translateX(-50%); background: rgba(17,34,64,0.95); backdrop-filter: blur(15px); border: 1px solid rgba(201,162,39,0.5); padding: 12px 26px; border-radius: 40px; display: flex; align-items: center; gap: 20px; z-index: 4000; transition: bottom 0.4s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 10px 40px rgba(0,0,0,0.6); }
.compare-bar.show { bottom: 24px; }
#compare-count { font-size: 13px; font-weight: 600; color: var(--cloud); }
.btn-compare-action { background: var(--gold); color: var(--ink); border: none; padding: 8px 18px; border-radius: 20px; font-weight: 600; cursor: pointer; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; transition: 0.2s; }
.btn-compare-action:hover { transform: scale(1.05); }

.compare-grid { display: grid; grid-template-columns: 120px repeat(auto-fit, minmax(160px, 1fr)); gap: 15px; overflow-x: auto; padding-bottom: 10px; }
.comp-col { display: flex; flex-direction: column; gap: 8px; }
.comp-cell { background: rgba(255,255,255,0.03); padding: 14px 10px; border-radius: 8px; font-size: 13px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 65px; border: 1px solid rgba(255,255,255,0.02); }
.comp-header { font-weight: 600; color: var(--gold); text-transform: uppercase; font-size: 10px; letter-spacing: 1.5px; background: transparent; border: none; text-align: right; justify-content: flex-end; align-items: flex-end; padding-right: 0; }

.rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; margin-top: 15px; }
.rec-card { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 8px; padding: 12px; text-align: center; cursor: pointer; transition: 0.3s; }
.rec-card:hover { border-color: var(--gold); background: rgba(201,162,39,0.06); transform: translateY(-3px); }
.rec-img { width: 100%; height: 75px; object-fit: contain; margin-bottom: 10px; filter: drop-shadow(0 10px 10px rgba(0,0,0,0.4)); }
.rec-name { font-size: 11px; font-weight: 600; color: var(--white); margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rec-price { font-size: 11px; color: var(--gold); font-family: var(--serif); font-weight: 600; }

/* ============================================
   FRONTEND VIEWS (TABS)
   ============================================ */
.front-view { 
    display: none; 
    animation: fadeView 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
}
.front-view.active { 
    display: block; 
}
@keyframes fadeView { 
    from { opacity: 0; transform: translateY(15px); } 
    to { opacity: 1; transform: translateY(0); } 
}
.nav-links a.active { color: var(--gold); }
.nav-links a.active::after { width: 100%; }

/* ============================================
   AI CONCIERGE & MATCHMAKER STYLES
   ============================================ */
.ai-fab {
    position: fixed; bottom: 30px; left: 30px; z-index: 2000;
    background: rgba(16, 23, 42, 0.75); backdrop-filter: blur(15px);
    border: 1px solid rgba(201,162,39,0.3); color: var(--gold);
    padding: 12px 22px; border-radius: 40px; cursor: pointer;
    display: flex; align-items: center; gap: 10px; font-size: 12px;
    font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); transition: all 0.4s ease;
}
.ai-fab:hover {
    border-color: var(--gold); background: var(--gold); color: var(--ink);
    transform: translateY(-3px) scale(1.03); box-shadow: 0 15px 35px rgba(201,162,39,0.25);
}
.ai-fab svg { animation: spin 20s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.ai-step { display: none; }
.ai-step.active { display: block; animation: fadeIn 0.4s ease forwards; }

.ai-progress-bar { width: 100%; height: 3px; background: rgba(255,255,255,0.05); border-radius: 10px; margin-bottom: 30px; overflow: hidden; }
.ai-progress-fill { height: 100%; background: var(--gold); transition: width 0.4s ease; }

.ai-options-grid { display: flex; flex-direction: column; gap: 12px; }
.ai-opt-btn {
    background: rgba(11, 15, 26, 0.4); border: 1px solid rgba(255,255,255,0.05);
    padding: 18px 20px; border-radius: 8px; text-align: left; cursor: pointer;
    display: flex; flex-direction: column; gap: 4px; transition: all 0.3s ease;
}
.ai-opt-btn:hover {
    border-color: var(--gold); background: rgba(201,162,39,0.04); transform: translateX(4px);
}
.ai-opt-btn strong { color: var(--white); font-size: 15px; font-weight: 500; }
.ai-opt-btn span { color: var(--mist); font-size: 12px; line-height: 1.4; }

@media (max-width: 1024px) {
    .ai-fab { bottom: 20px; top: auto; left: 16px; padding: 10px 16px; font-size: 10px; }
    .ai-fab span { display: none; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* PIRÁMIDE OLFATIVA */
.olfactory-pyramid { display:flex; flex-direction:column; gap:8px; align-items:center; }
.op-layer { width:100%; position:relative; display:flex; align-items:center; justify-content:center; }
.op-tier { height:54px; border-radius:8px; position:absolute; left:50%; transform:translateX(-50%); opacity:0; animation:pyramidGrow .6s cubic-bezier(.22,1,.36,1) forwards; }
.op-top .op-tier { background:linear-gradient(135deg, rgba(232,212,139,0.25), rgba(201,162,39,0.12)); border:1px solid rgba(232,212,139,0.35); animation-delay:.1s; }
.op-heart .op-tier { background:linear-gradient(135deg, rgba(201,162,39,0.2), rgba(201,162,39,0.08)); border:1px solid rgba(201,162,39,0.3); animation-delay:.25s; }
.op-base .op-tier { background:linear-gradient(135deg, rgba(140,109,31,0.2), rgba(140,109,31,0.08)); border:1px solid rgba(201,162,39,0.25); animation-delay:.4s; }
.op-content { position:relative; z-index:2; text-align:center; padding:6px; }
.op-label { font-size:9px; color:#C9A227; text-transform:uppercase; letter-spacing:.2em; margin-bottom:2px; }
.op-notes { font-size:13px; color:#F4F1EA; }
@keyframes pyramidGrow { from { opacity:0; transform:translateX(-50%) scaleX(.3); } to { opacity:1; transform:translateX(-50%) scaleX(1); } }

/* ============================================================
   MAGIA VISUAL
   ============================================================ */

/* NIEBLA DORADA DE FONDO */
#gold-fog {
    position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
#gold-fog span {
    position: absolute; border-radius: 50%;
    background: radial-gradient(circle, rgba(201,162,39,0.05), transparent 70%);
    filter: blur(60px);
}
#gold-fog span:nth-child(1) { width: 500px; height: 500px; top: 10%; left: -10%; animation: fogDrift1 28s ease-in-out infinite; }
#gold-fog span:nth-child(2) { width: 400px; height: 400px; top: 50%; right: -8%; animation: fogDrift2 34s ease-in-out infinite; }
#gold-fog span:nth-child(3) { width: 350px; height: 350px; bottom: 5%; left: 40%; animation: fogDrift3 24s ease-in-out infinite; }
@keyframes fogDrift1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(120px,80px); } }
@keyframes fogDrift2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-100px,-60px); } }
@keyframes fogDrift3 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(60px,-90px); } }

/* CONTADORES — realce */
[data-count] { font-variant-numeric: tabular-nums; }

/* LÍNEAS DORADAS QUE SE DIBUJAN AL HACER SCROLL */
.gold-divider {
    height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent);
    transform: scaleX(0); transition: transform 1.2s cubic-bezier(.22,1,.36,1);
    margin: 40px auto; max-width: 200px;
}
.gold-divider.in { transform: scaleX(1); }

/* LETRA CAPITULAR para Our Story */
.drop-cap::first-letter {
    font-family: var(--serif); font-size: 64px; line-height: 0.8;
    float: left; margin: 8px 12px 0 0; color: var(--gold); font-weight: 600;
}

/* COMILLAS DECORATIVAS */
.lux-quote { position: relative; padding-top: 30px; }
.lux-quote::before {
    content: '\201C'; position: absolute; top: -20px; left: -10px;
    font-family: var(--serif); font-size: 100px; color: rgba(201,162,39,0.2); line-height: 1;
}

/* Asegurar que el contenido quede sobre la niebla */
main, footer, .trust-banner { position: relative; z-index: 1; }

/* ============================================================
   MEJORAS MÓVIL — Experiencia táctil refinada
   ============================================================ */
@media (max-width: 600px) {
    /* Modales: pegados abajo tipo "bottom sheet", más natural en móvil */
    .vault-modal { padding: 0; align-items: flex-end; }
    .vm-body {
        max-width: 100%; border-radius: 20px 20px 0 0 !important;
        padding: 28px 20px 32px; max-height: 92vh; overflow-y: auto;
        animation: sheetUp .4s cubic-bezier(.16,1,.3,1);
    }
    @keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
    /* Indicador visual de "deslizar" arriba del modal */
    .vm-body::before {
        content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
        width: 40px; height: 4px; background: rgba(255,255,255,.2); border-radius: 4px;
    }

    /* Botón cerrar más grande y fácil de tocar */
    .vm-close { width: 42px !important; height: 42px !important; min-width: 42px !important; font-size: 24px !important; }

    /* Targets táctiles mínimo 44px (estándar Apple) */
    .p-add, .p-sold, .p-qty button, .filter-btn, .nav-cart, .btn-wishlist { min-height: 44px; }
    .btn-wishlist { width: 40px; height: 40px; }

    /* Productos: 2 columnas compactas en móvil para ver más de un vistazo */
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .p-media { height: 150px; padding: 12px; }
    .p-info { padding: 14px 12px 16px; }
    .p-name { font-size: 16px; line-height: 1.2; }
    .p-price { font-size: 18px; }
    .p-sku { font-size: 9px; margin-bottom: 4px; }
    .p-add, .p-sold { padding: 8px 12px; font-size: 9px; }
    .p-badge { font-size: 8px; padding: 4px 9px; top: 10px; left: 10px; }
    .btn-wishlist { width: 32px; height: 32px; font-size: 13px; top: 10px; right: 10px; }
    .p-foot { flex-direction: column; align-items: stretch; gap: 10px; }
    .p-foot .p-add, .p-foot .p-sold { width: 100%; text-align: center; }
    .p-qty { width: 100%; justify-content: center; }

    /* Tipografía del hero más equilibrada */
    .hero-title { font-size: clamp(48px, 16vw, 80px) !important; }
    .hero-sub { font-size: 15px !important; }

    /* Toasts y notificaciones no tapan el contenido */
    .lux-toast { left: 16px !important; right: 16px !important; bottom: 80px !important; max-width: none !important; }

    /* Prueba social oculta en móvil (ya estaba, reforzamos) */
    /* La barra de comparar más compacta */
    .compare-bar { left: 16px; right: 16px; transform: none; width: auto; justify-content: space-between; padding: 12px 18px; }
    .compare-bar.show { bottom: 16px; }

    /* Inputs más cómodos: evita el zoom automático de iOS al enfocar (font-size >= 16px) */
    input, select, textarea { font-size: 16px !important; }

    /* Pirámide olfativa: notas más legibles */
    .op-notes { font-size: 12px; }
    .op-tier { height: 50px; }
}

/* Mejora de scroll en todos los modales */
.vault-modal, .vm-body, .modal-content { -webkit-overflow-scrolling: touch; }

/* Quitar el highlight azul feo al tocar en móvil */
* { -webkit-tap-highlight-color: rgba(201,162,39,0.15); }
button, a, .p-card, .nav-cart { -webkit-tap-highlight-color: transparent; }