/* ============================================================
   LUXARA · Iluminación decorativa
   Hoja de estilos principal
   Paleta: negro (#0a0806) + dorado (#e0a84a)
   Tipografías: Cormorant Garamond (serif) + Outfit (sans)
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --bg:#0a0806;
  --bg-2:#0c0a07;
  --bg-3:#08070a;
  --bg-4:#060504;
  --card-top:#0e0c0a;
  --accent:#e0a84a;
  --accent-2:#f0b25a;
  --ink:#f4efe6;
  --ink-strong:#f5f0e7;
  --on-gold:#15100a;
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --maxw:1180px;
  --pad:clamp(20px,5vw,64px);
  --line:rgba(244,239,230,.1);
  --line-2:rgba(244,239,230,.18);
  --shadow:0 14px 44px rgba(0,0,0,.45);
}

/* ---------- Reset / base ---------- */
*{box-sizing:border-box}
/* El atributo [hidden] debe ganar a las clases con display:flex/grid */
[hidden]{display:none!important}
html,body{margin:0;padding:0;background:var(--bg);overflow-x:hidden}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--ink);line-height:1.5;min-height:100vh;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit}
::selection{background:rgba(224,168,74,.3);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.lx-root{position:relative;width:100%;background:var(--bg)}

/* Salto de accesibilidad */
.lx-skip{position:absolute;left:-999px;top:0;z-index:1000;background:var(--accent);color:var(--on-gold);
  padding:10px 16px;border-radius:0 0 6px 0;font-size:.85rem;font-weight:600}
.lx-skip:focus{left:0}

/* ---------- Utilidades ---------- */
.lx-container{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

.lx-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.lx-eyebrow--center{justify-content:center}
.lx-eyebrow__rule{width:30px;height:1px;background:var(--accent);flex:0 0 auto}
.lx-eyebrow__text{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);font-weight:500}

.lx-h2{margin:0 0 clamp(26px,4vh,38px);font-family:var(--serif);font-weight:600;
  font-size:clamp(1.9rem,5vw,3rem);line-height:1.04;color:var(--ink);letter-spacing:-.01em}

/* Botones */
.lx-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-size:.92rem;letter-spacing:.04em;text-decoration:none;border:none;cursor:pointer;
  border-radius:2px;padding:15px 28px;white-space:nowrap;
  transition:transform .35s cubic-bezier(.19,.86,.22,1),box-shadow .35s,background .3s,border-color .3s,color .3s}
.lx-btn--gold{background:var(--accent);color:var(--on-gold);font-weight:600;box-shadow:var(--shadow)}
.lx-btn--gold:hover{transform:translateY(-3px);box-shadow:0 20px 54px rgba(224,168,74,.28)}
.lx-btn--ghost{background:transparent;color:var(--ink);font-weight:400;border:1px solid rgba(244,239,230,.26)}
.lx-btn--ghost:hover{border-color:rgba(244,239,230,.6);background:rgba(244,239,230,.05)}
.lx-btn--sm{padding:12px 20px;font-size:.84rem}
.lx-btn--block{width:100%}
.lx-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}

/* Revelado al hacer scroll (estado base; se define temprano para que los
   componentes con transición propia, p.ej. .lx-product, la conserven) */
[data-animate]{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
[data-animate].is-shown{opacity:1;transform:none}

/* ============================================================
   HEADER
   ============================================================ */
.lx-header{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:16px var(--pad);background:transparent;
  border-bottom:1px solid transparent;
  transition:background .45s ease,border-color .45s ease,padding .45s ease,backdrop-filter .45s ease}
.lx-header.is-scrolled{background:rgba(9,7,5,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:rgba(224,168,74,.16);padding-top:11px;padding-bottom:11px}

.lx-logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.lx-logo__dot{width:9px;height:9px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 12px 2px rgba(224,168,74,.7)}
.lx-logo__word{font-weight:600;letter-spacing:.4em;font-size:1.05rem;color:var(--ink)}

.lx-nav{display:flex;align-items:center;gap:32px}
.lx-nav__link{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(244,239,230,.62);text-decoration:none;transition:color .3s}
.lx-nav__link:hover{color:var(--ink)}
.lx-nav__wa{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-gold);
  background:var(--accent);text-decoration:none;padding:10px 20px;border-radius:2px;font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.4);transition:transform .3s,box-shadow .3s}
.lx-nav__wa:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(224,168,74,.28)}

.lx-header__actions{display:flex;align-items:center;gap:12px}

/* Botón carrito */
.lx-cart-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;background:rgba(244,239,230,.06);
  border:1px solid rgba(244,239,230,.16);color:var(--ink);cursor:pointer;transition:.3s}
.lx-cart-toggle:hover{border-color:var(--accent);color:var(--accent)}
.lx-cart-badge{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;padding:0 5px;
  display:flex;align-items:center;justify-content:center;background:var(--accent);color:var(--on-gold);
  font-size:.66rem;font-weight:700;border-radius:10px;box-shadow:0 0 0 2px var(--bg)}
.lx-cart-toggle.is-bump{animation:lx-bump .4s ease}
@keyframes lx-bump{0%,100%{transform:scale(1)}40%{transform:scale(1.18)}}

/* Hamburguesa */
.lx-burger{display:none;flex-direction:column;gap:5px;width:42px;height:42px;align-items:center;
  justify-content:center;background:rgba(244,239,230,.06);border:1px solid rgba(244,239,230,.16);
  border-radius:3px;cursor:pointer}
.lx-burger span{width:18px;height:1.5px;background:var(--ink);display:block;transition:.3s}

/* ---------- Menú móvil ---------- */
.lx-menu{position:fixed;inset:0;z-index:300;background:rgba(8,6,4,.97);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);display:flex;flex-direction:column;
  padding:24px clamp(22px,7vw,40px);font-family:var(--sans)}
.lx-menu[hidden]{display:none}
.lx-menu__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:48px}
.lx-menu__close{width:42px;height:42px;background:rgba(244,239,230,.06);border:1px solid rgba(244,239,230,.16);
  border-radius:3px;color:var(--ink);font-size:1.6rem;line-height:1;cursor:pointer}
.lx-menu__link{font-family:var(--serif);font-size:2rem;color:var(--ink);text-decoration:none;
  padding:14px 0;border-bottom:1px solid rgba(244,239,230,.08)}
.lx-menu__cta{margin-top:auto;text-align:center;background:var(--accent);color:var(--on-gold);
  font-weight:600;letter-spacing:.06em;padding:18px;border-radius:3px;text-decoration:none}

/* ============================================================
   HERO
   ============================================================ */
.lx-hero__track{position:relative;width:100%;height:100vh;background:var(--bg)}
.lx-hero__stage{position:relative;height:100vh;width:100%;overflow:hidden;background:var(--bg)}

.lx-hero__bg{position:absolute;inset:0;background-image:url("../img/hero-bg.jpg");
  background-size:cover;background-position:54% 42%;transform:scale(1.1);transform-origin:55% 45%;
  will-change:transform,filter}

.lx-hero__glow{position:absolute;inset:0;mix-blend-mode:screen;opacity:.8;pointer-events:none;will-change:transform}
.lx-hero__glow-inner{position:absolute;inset:0;
  background:radial-gradient(38% 30% at 53% 30%,rgba(255,182,92,.55),rgba(255,150,60,.18) 45%,rgba(0,0,0,0) 72%),
             radial-gradient(34% 26% at 51% 62%,rgba(255,176,86,.45),rgba(255,140,55,.12) 48%,rgba(0,0,0,0) 74%);
  animation:lx-breathe 6.5s ease-in-out infinite}
.lx-hero__warm{position:absolute;inset:0;mix-blend-mode:screen;opacity:.9;pointer-events:none;
  background:radial-gradient(120% 95% at 53% 44%,rgba(255,170,70,.20),rgba(120,60,15,.08) 50%,rgba(10,7,5,0) 78%)}
.lx-hero__cool{position:absolute;inset:0;mix-blend-mode:screen;opacity:0;pointer-events:none;
  background:radial-gradient(125% 100% at 50% 40%,rgba(132,176,235,.30),rgba(58,96,160,.14) 52%,rgba(8,12,22,0) 80%),
             linear-gradient(180deg,rgba(120,150,210,.10),rgba(150,180,225,.05) 60%,rgba(120,150,210,.12))}

.lx-hero__particles{position:absolute;inset:0;pointer-events:none}
.lx-particle{position:absolute;border-radius:50%;background:rgba(255,240,214,.85);
  box-shadow:0 0 6px 1px rgba(255,222,168,.55);opacity:0}

.lx-hero__grain{position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-size:150px 150px;animation:lx-grain 6s steps(5) infinite;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22150%22%20height=%22150%22%3E%3Cfilter%20id=%22n%22%3E%3CfeTurbulence%20type=%22fractalNoise%22%20baseFrequency=%220.85%22%20numOctaves=%222%22%20stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect%20width=%22100%25%22%20height=%22100%25%22%20filter=%22url(%23n)%22/%3E%3C/svg%3E")}
.lx-hero__vignette{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,5,4,.82),rgba(6,5,4,.34) 40%,rgba(6,5,4,0) 64%),
             linear-gradient(0deg,rgba(6,5,4,.62),rgba(6,5,4,0) 42%),
             radial-gradient(125% 125% at 52% 46%,rgba(0,0,0,0) 38%,rgba(0,0,0,.6) 100%)}

.lx-hero__content-wrap{position:absolute;inset:0;z-index:15;display:flex;flex-direction:column;
  justify-content:center;padding:clamp(96px,16vh,150px) clamp(22px,7vw,110px);pointer-events:none}
.lx-hero__content{max-width:min(640px,90vw);will-change:transform}
.lx-hero__eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:clamp(18px,3vh,28px);
  opacity:0;transform:translateY(18px);
  transition:opacity .9s cubic-bezier(.19,.86,.22,1),transform .9s cubic-bezier(.19,.86,.22,1)}
.lx-hero__rule{width:clamp(28px,4vw,52px);height:1px;background:var(--accent);display:block}
.lx-hero__eyebrow span:last-child{font-size:.74rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--accent);font-weight:500}
.lx-hero__title{margin:0;font-family:var(--serif);font-weight:600;
  font-size:clamp(2.6rem,7vw,6.2rem);line-height:.98;letter-spacing:-.015em;color:var(--ink-strong)}
.lx-hero__line{display:block;overflow:hidden;padding-bottom:.04em}
.lx-hero__line-in{display:block;transform:translateY(115%);opacity:0;
  transition:transform 1.05s cubic-bezier(.19,.86,.22,1),opacity 1.05s ease}
.lx-hero__title em{font-style:italic;color:var(--accent)}
.lx-hero__sub{margin:clamp(20px,3.2vh,30px) 0 0;max-width:42ch;font-weight:300;
  font-size:clamp(.98rem,1.35vw,1.18rem);line-height:1.65;color:rgba(244,239,230,.74);
  opacity:0;transform:translateY(18px);
  transition:opacity .9s cubic-bezier(.19,.86,.22,1),transform .9s cubic-bezier(.19,.86,.22,1)}
.lx-hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,4.5vh,42px);pointer-events:auto;
  opacity:0;transform:translateY(18px);
  transition:opacity .9s cubic-bezier(.19,.86,.22,1),transform .9s cubic-bezier(.19,.86,.22,1)}

/* estado revelado */
[data-reveal].is-shown,.lx-hero__eyebrow.is-shown,.lx-hero__sub.is-shown,.lx-hero__cta.is-shown{opacity:1;transform:translateY(0)}
.lx-hero__line-in.is-shown{opacity:1;transform:translateY(0)}

.lx-hero__cue{position:absolute;bottom:clamp(20px,4vh,38px);left:50%;transform:translateX(-50%);z-index:18;
  display:flex;flex-direction:column;align-items:center;gap:11px;pointer-events:none}
.lx-hero__cue span:first-child{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(244,239,230,.5)}
.lx-hero__cue-line{width:1px;height:42px;background:linear-gradient(rgba(244,239,230,.7),rgba(244,239,230,0));
  animation:lx-cue 2.4s ease-in-out infinite}

@keyframes lx-breathe{0%,100%{opacity:.55}50%{opacity:.9}}
@keyframes lx-float{0%{transform:translateY(10px) scale(.7);opacity:0}18%{opacity:.55}
  50%{transform:translateY(-16px) scale(1);opacity:.85}82%{opacity:.4}100%{transform:translateY(-34px) scale(.6);opacity:0}}
@keyframes lx-grain{0%{background-position:0 0}25%{background-position:-32px 14px}50%{background-position:18px -26px}
  75%{background-position:-14px 20px}100%{background-position:0 0}}
@keyframes lx-cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============================================================
   MARQUEE
   ============================================================ */
.lx-marquee{position:relative;z-index:2;background:var(--bg);border-top:1px solid rgba(224,168,74,.18);
  border-bottom:1px solid rgba(224,168,74,.18);overflow:hidden;padding:18px 0}
.lx-marquee__row{display:flex;width:max-content;animation:lx-marquee 28s linear infinite}
.lx-marquee__group{display:flex;align-items:center;gap:38px;padding-right:38px;
  font-family:var(--serif);font-style:italic;font-size:1.5rem;color:rgba(244,239,230,.85);white-space:nowrap}
.lx-marquee__star{color:var(--accent)}
@keyframes lx-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   FEATURES
   ============================================================ */
.lx-features{position:relative;z-index:2;background:var(--bg);
  padding:clamp(40px,7vh,64px) 0 clamp(34px,5vh,52px)}
.lx-features .lx-eyebrow{margin-bottom:22px}
/* En pantallas anchas las tarjetas caben: se centran (en móvil se desplazan en scroll) */
@media (min-width:960px){
  .lx-features__scroll{justify-content:center}
  .lx-features .lx-eyebrow{justify-content:center}
}
.lx-features__scroll{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 var(--pad);-webkit-overflow-scrolling:touch}
.lx-feature{scroll-snap-align:start;flex:0 0 auto;width:160px;
  background:linear-gradient(160deg,rgba(224,168,74,.07),rgba(255,255,255,.015));
  border:1px solid rgba(224,168,74,.16);border-radius:6px;padding:20px 18px;transition:border-color .35s}
.lx-feature:hover{border-color:rgba(224,168,74,.45)}
.lx-feature svg{width:26px;height:26px}
.lx-feature h3{margin:16px 0 5px;font-size:.92rem;font-weight:500;color:var(--ink);line-height:1.3}
.lx-feature p{margin:0;font-size:.74rem;color:rgba(244,239,230,.52);line-height:1.45}

/* ============================================================
   CATEGORÍAS
   ============================================================ */
.lx-categories{position:relative;z-index:2;background:var(--bg-2);padding:clamp(54px,9vh,90px) 0;overflow:hidden}
.lx-categories__halo{position:absolute;top:-10%;left:50%;transform:translateX(-50%);width:120%;height:60%;
  background:radial-gradient(50% 60% at 50% 0%,rgba(224,168,74,.10),rgba(0,0,0,0) 70%);pointer-events:none}
.lx-categories .lx-container{position:relative}
.lx-cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.lx-cat{text-decoration:none;display:flex;flex-direction:column;gap:14px;padding:20px 18px;min-height:130px;
  justify-content:space-between;background:linear-gradient(165deg,rgba(255,255,255,.025),rgba(255,255,255,0));
  border:1px solid var(--line);border-radius:7px;
  transition:border-color .35s,background .35s,transform .35s}
.lx-cat:hover{border-color:rgba(224,168,74,.5);background:rgba(224,168,74,.06);transform:translateY(-3px)}
.lx-cat svg{width:30px;height:30px}
.lx-cat__name{display:block;font-size:.96rem;color:var(--ink);font-weight:500}
.lx-cat__sub{display:block;font-size:.72rem;color:rgba(244,239,230,.45);margin-top:3px}

/* ============================================================
   CATÁLOGO (productos)
   ============================================================ */
.lx-catalog{position:relative;z-index:2;background:var(--bg-3);padding:clamp(54px,9vh,90px) 0;overflow:hidden}
.lx-catalog__halo{position:absolute;inset:0;
  background:radial-gradient(60% 50% at 50% 30%,rgba(120,150,210,.06),rgba(0,0,0,0) 70%);pointer-events:none}
.lx-catalog .lx-container{position:relative}
.lx-catalog__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-bottom:clamp(22px,3.5vh,30px);flex-wrap:wrap}
.lx-catalog__head .lx-h2{margin:0}
.lx-catalog__lead{margin:0;max-width:34ch;font-size:.9rem;line-height:1.6;color:rgba(244,239,230,.55)}

/* Filtros */
.lx-filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:clamp(26px,4vh,38px)}
.lx-filter{font-family:var(--sans);font-size:.78rem;letter-spacing:.04em;color:rgba(244,239,230,.62);
  background:rgba(244,239,230,.04);border:1px solid rgba(244,239,230,.14);border-radius:40px;
  padding:9px 18px;cursor:pointer;transition:.3s;white-space:nowrap}
.lx-filter:hover{border-color:rgba(224,168,74,.45);color:var(--ink)}
.lx-filter.is-active{background:rgba(224,168,74,.14);border-color:var(--accent);color:var(--ink)}

/* Grid de productos (mejorado: más grande y legible) */
.lx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:clamp(16px,2.2vw,24px)}
.lx-product{display:flex;flex-direction:column;
  background:linear-gradient(170deg,rgba(255,255,255,.04),rgba(255,255,255,.008));
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  transition:opacity .6s ease,transform .45s cubic-bezier(.19,.86,.22,1),border-color .4s,box-shadow .4s}
.lx-product:hover{border-color:rgba(224,168,74,.4);transform:translateY(-5px);box-shadow:0 22px 50px rgba(0,0,0,.45)}
.lx-product.is-hidden{display:none}
.lx-product__media{position:relative;height:clamp(240px,30vw,300px);display:flex;align-items:center;justify-content:center;
  background:radial-gradient(60% 55% at 50% 45%,rgba(224,168,74,.16),rgba(0,0,0,0) 72%),
             linear-gradient(180deg,var(--card-top),#0a0908)}
.lx-product__img{max-width:82%;max-height:86%;object-fit:contain;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.6));transition:transform .5s cubic-bezier(.19,.86,.22,1)}
.lx-product:hover .lx-product__img{transform:scale(1.05)}
.lx-product__cat{position:absolute;top:14px;left:14px;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);background:rgba(10,8,6,.6);border:1px solid rgba(224,168,74,.3);
  padding:5px 10px;border-radius:30px;backdrop-filter:blur(4px)}
.lx-product__body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.lx-product__name{margin:0 0 8px;font-family:var(--serif);font-size:1.55rem;font-weight:600;color:var(--ink);line-height:1.12}
.lx-product__desc{margin:0 0 18px;font-size:.86rem;line-height:1.55;color:rgba(244,239,230,.58);flex:1}
.lx-product__price{font-size:1.1rem;font-weight:600;color:var(--accent);margin:0 0 14px}
.lx-product__actions{display:flex;gap:10px;flex-wrap:wrap}
.lx-product__actions .lx-btn{flex:1 1 auto;padding:13px 16px;font-size:.82rem}
.lx-add{position:relative;overflow:hidden}
.lx-add.is-added{background:#2e7d52;color:#fff}

.lx-grid__empty{text-align:center;color:rgba(244,239,230,.55);font-size:.95rem;margin-top:30px}
.lx-grid__empty a{color:var(--accent);text-decoration:none}

/* ============================================================
   EXPERIENCIA DE LUZ (tonos)
   ============================================================ */
.lx-tones{position:relative;z-index:2;background:var(--bg);padding:clamp(54px,9vh,90px) 0;overflow:hidden}
.lx-tones__head{text-align:center;max-width:560px;margin:0 auto clamp(30px,5vh,44px)}
.lx-tones__head .lx-h2{margin:0}
.lx-tones__panel{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:26px;align-items:center;background:linear-gradient(170deg,rgba(255,255,255,.03),rgba(255,255,255,0));
  border:1px solid var(--line);border-radius:14px;padding:clamp(22px,4vw,40px);overflow:hidden}
.lx-tones__visual{position:relative;height:clamp(240px,40vh,330px);display:flex;align-items:center;justify-content:center}
.lx-tones__glow{position:absolute;inset:0;pointer-events:none;transition:background .7s ease;
  background:radial-gradient(circle at 50% 42%,rgba(255,176,86,.55),rgba(255,176,86,.12) 45%,rgba(0,0,0,0) 72%)}
.lx-tones__img{position:relative;max-height:100%;max-width:74%;object-fit:contain;transition:filter .7s ease;
  filter:drop-shadow(0 0 60px rgba(255,176,86,.5))}
.lx-tones__tabs{display:flex;gap:8px;margin-bottom:22px}
.lx-tone-tab{flex:1;padding:13px 8px;border-radius:4px;background:rgba(244,239,230,.04);
  border:1px solid rgba(244,239,230,.14);color:rgba(244,239,230,.6);font-size:.78rem;letter-spacing:.04em;
  cursor:pointer;transition:.3s}
.lx-tone-tab.is-active{background:rgba(240,178,90,.14);border-color:var(--accent);color:var(--ink)}
.lx-tones__readout{display:flex;align-items:baseline;gap:12px}
.lx-tones__temp{font-family:var(--serif);font-size:2.4rem;font-weight:600;color:var(--accent);line-height:1}
.lx-tones__k{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,239,230,.5)}
.lx-tones__desc{margin:14px 0 22px;font-size:.92rem;line-height:1.6;color:rgba(244,239,230,.68);max-width:34ch}
.lx-tones__note{display:flex;align-items:center;gap:12px;padding:14px 16px;background:rgba(224,168,74,.06);
  border:1px solid rgba(224,168,74,.18);border-radius:6px}
.lx-tones__note svg{flex:0 0 auto}
.lx-tones__note span{font-size:.8rem;color:rgba(244,239,230,.7);line-height:1.4}

/* ============================================================
   SHOWROOM
   ============================================================ */
.lx-showroom{position:relative;z-index:2;background:var(--bg-2);padding:clamp(54px,9vh,90px) 0;overflow:hidden}
.lx-showroom__halo{position:absolute;top:0;left:50%;transform:translateX(-50%);width:120%;height:50%;
  background:radial-gradient(50% 60% at 50% 0%,rgba(224,168,74,.08),rgba(0,0,0,0) 70%);pointer-events:none}
.lx-showroom .lx-container{position:relative}
.lx-showroom__head{margin-bottom:clamp(24px,4vh,34px)}
.lx-showroom__head .lx-h2{margin:0}
.lx-showroom__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px}

.lx-brandcard{background:linear-gradient(165deg,rgba(255,255,255,.03),rgba(255,255,255,0));
  border:1px solid var(--line);border-radius:14px;padding:clamp(24px,4vw,38px);display:flex;flex-direction:column}
.lx-brandcard__logo{width:150px;max-width:60%;height:auto;margin-bottom:20px;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.5))}
.lx-brandcard__text{margin:0 0 22px;font-size:.92rem;line-height:1.65;color:rgba(244,239,230,.66);max-width:38ch}
.lx-brandcard__links{display:flex;gap:12px;margin-top:auto;flex-wrap:wrap}

/* Tarjeta de mapa */
.lx-mapcard{background:linear-gradient(165deg,rgba(255,255,255,.03),rgba(255,255,255,0));
  border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.lx-mapcard__map{position:relative;height:220px;background-color:#0a0806;
  background-image:linear-gradient(135deg,rgba(224,168,74,.12) 0 2px,rgba(0,0,0,0) 2px 14px);background-size:20px 20px}
/* Placeholder elegante: visible si el mapa aún no carga o está bloqueado */
.lx-mapcard__placeholder{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;text-align:center}
.lx-mapcard__placeholder svg{width:34px;height:34px}
.lx-mapcard__placeholder span{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,239,230,.5)}
.lx-mapcard__map iframe{position:relative;z-index:1;width:100%;height:100%;border:0;display:block;filter:grayscale(.25) contrast(1.05)}
.lx-mapcard__map::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 -40px 60px -30px rgba(10,8,6,.9);border-bottom:1px solid rgba(224,168,74,.18)}
.lx-mapcard__body{padding:24px clamp(22px,3.5vw,32px);display:flex;flex-direction:column;gap:18px;flex:1}
.lx-mapcard__label{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.lx-mapcard__addr{font-size:1.05rem;color:var(--ink);line-height:1.4}
.lx-mapcard__city{font-size:.86rem;color:rgba(244,239,230,.55);margin-top:2px}
.lx-mapcard__actions{display:flex;gap:10px;margin-top:auto;flex-wrap:wrap}
.lx-mapcard__actions .lx-btn{flex:1 1 auto}

/* ============================================================
   FOOTER
   ============================================================ */
.lx-footer{position:relative;z-index:2;background:var(--bg-4);border-top:1px solid rgba(224,168,74,.14);
  padding:clamp(34px,6vh,52px) 0 28px}
.lx-footer__top{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.lx-footer__nav{display:flex;gap:24px;flex-wrap:wrap}
.lx-footer__nav a{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(244,239,230,.55);text-decoration:none;transition:.3s}
.lx-footer__nav a:hover{color:var(--accent)}
.lx-footer__bottom{margin-top:24px;padding-top:18px;border-top:1px solid rgba(244,239,230,.07);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}
.lx-footer__bottom span{font-size:.72rem;color:rgba(244,239,230,.4);letter-spacing:.04em}

/* ============================================================
   CARRITO (drawer)
   ============================================================ */
.lx-cart-overlay{position:fixed;inset:0;z-index:400;background:rgba(6,5,4,.6);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .35s}
.lx-cart-overlay.is-open{opacity:1}
.lx-cart-overlay[hidden]{display:none}

.lx-cart{position:fixed;top:0;right:0;z-index:410;height:100%;height:100dvh;width:min(420px,100vw);
  background:#0b0907;border-left:1px solid rgba(224,168,74,.16);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .4s cubic-bezier(.19,.86,.22,1);
  box-shadow:-20px 0 60px rgba(0,0,0,.5)}
.lx-cart.is-open{transform:translateX(0)}
.lx-cart__head{display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(20px,4vw,26px);border-bottom:1px solid var(--line)}
.lx-cart__title{display:block;font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--ink)}
.lx-cart__count{display:block;font-size:.74rem;letter-spacing:.06em;color:rgba(244,239,230,.5);margin-top:2px}
.lx-cart__close{width:40px;height:40px;background:rgba(244,239,230,.06);border:1px solid rgba(244,239,230,.16);
  border-radius:50%;color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer;transition:.3s}
.lx-cart__close:hover{border-color:var(--accent);color:var(--accent)}

.lx-cart__body{flex:1;overflow-y:auto;padding:8px clamp(20px,4vw,26px)}
.lx-cart-item{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.lx-cart-item__img{flex:0 0 auto;width:72px;height:72px;border-radius:8px;
  background:radial-gradient(60% 55% at 50% 45%,rgba(224,168,74,.16),rgba(0,0,0,0) 72%),var(--card-top);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.lx-cart-item__img img{max-width:80%;max-height:80%;object-fit:contain}
.lx-cart-item__info{flex:1;min-width:0}
.lx-cart-item__cat{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.lx-cart-item__name{font-family:var(--serif);font-size:1.12rem;font-weight:600;color:var(--ink);
  line-height:1.2;margin:2px 0 4px}
.lx-cart-item__price{font-size:.82rem;color:rgba(244,239,230,.6)}
.lx-cart-item__row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:10px}
.lx-qty{display:inline-flex;align-items:center;border:1px solid rgba(244,239,230,.16);border-radius:30px;overflow:hidden}
.lx-qty button{width:30px;height:30px;background:transparent;border:none;color:var(--ink);font-size:1rem;
  cursor:pointer;transition:.2s;line-height:1}
.lx-qty button:hover{background:rgba(224,168,74,.14);color:var(--accent)}
.lx-qty span{min-width:28px;text-align:center;font-size:.86rem;font-variant-numeric:tabular-nums}
.lx-cart-item__remove{background:none;border:none;color:rgba(244,239,230,.4);font-size:.74rem;
  cursor:pointer;letter-spacing:.04em;transition:.2s;padding:4px}
.lx-cart-item__remove:hover{color:#e88}

.lx-cart__empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:8px;padding:30px}
.lx-cart__empty svg{width:54px;height:54px;opacity:.7;margin-bottom:6px}
.lx-cart__empty p{margin:0;font-family:var(--serif);font-size:1.3rem;color:var(--ink)}
.lx-cart__empty span{font-size:.85rem;color:rgba(244,239,230,.5);max-width:24ch}
.lx-cart__empty .lx-btn{margin-top:12px}

.lx-cart__foot{padding:18px clamp(20px,4vw,26px) clamp(20px,4vw,26px);border-top:1px solid var(--line);
  background:rgba(224,168,74,.03)}
.lx-cart__total{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;
  font-size:.95rem;color:var(--ink)}
.lx-cart__total span:last-child{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--accent)}
.lx-cart__clear{display:block;width:100%;margin-top:10px;background:none;border:none;
  color:rgba(244,239,230,.4);font-size:.78rem;cursor:pointer;letter-spacing:.04em;transition:.2s}
.lx-cart__clear:hover{color:#e88}

/* ============================================================
   CHECKOUT (modal)
   ============================================================ */
.lx-modal{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;padding:18px}
.lx-modal[hidden]{display:none}
.lx-modal__overlay{position:absolute;inset:0;background:rgba(6,5,4,.72);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.lx-modal__panel{position:relative;width:min(520px,100%);max-height:92vh;max-height:92dvh;overflow-y:auto;
  background:#0b0907;border:1px solid rgba(224,168,74,.2);border-radius:16px;
  padding:clamp(24px,4vw,38px);box-shadow:0 30px 80px rgba(0,0,0,.6);
  animation:lx-modal-in .4s cubic-bezier(.19,.86,.22,1)}
@keyframes lx-modal-in{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}
.lx-modal__close{position:absolute;top:16px;right:16px;width:38px;height:38px;
  background:rgba(244,239,230,.06);border:1px solid rgba(244,239,230,.16);border-radius:50%;
  color:var(--ink);font-size:1.4rem;line-height:1;cursor:pointer;transition:.3s;z-index:2}
.lx-modal__close:hover{border-color:var(--accent);color:var(--accent)}
.lx-modal__title{margin:0 0 6px;font-family:var(--serif);font-size:1.9rem;font-weight:600;color:var(--ink)}
.lx-modal__sub{margin:0 0 22px;font-size:.88rem;line-height:1.55;color:rgba(244,239,230,.6)}

.lx-field{margin-bottom:16px}
.lx-field label{display:block;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(244,239,230,.6);margin-bottom:7px}
.lx-field input,.lx-field textarea{width:100%;background:rgba(244,239,230,.04);
  border:1px solid rgba(244,239,230,.16);border-radius:8px;padding:13px 15px;
  color:var(--ink);font-family:var(--sans);font-size:.95rem;transition:.25s;resize:vertical}
.lx-field input::placeholder,.lx-field textarea::placeholder{color:rgba(244,239,230,.3)}
.lx-field input:focus,.lx-field textarea:focus{outline:none;border-color:var(--accent);
  background:rgba(224,168,74,.06)}
.lx-field.is-invalid input,.lx-field.is-invalid textarea{border-color:#d9534f;background:rgba(217,83,79,.06)}
.lx-field__err{display:block;color:#e8908d;font-size:.74rem;margin-top:5px;min-height:0}

.lx-checkout__summary{margin:22px 0;padding:18px;background:rgba(244,239,230,.03);
  border:1px solid var(--line);border-radius:10px}
.lx-checkout__summary-head{display:flex;justify-content:space-between;align-items:center;
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,239,230,.55);
  margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.lx-checkout__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.lx-checkout__list li{display:flex;justify-content:space-between;gap:12px;font-size:.88rem;color:rgba(244,239,230,.8)}
.lx-checkout__list .lx-co-qty{color:var(--accent);font-variant-numeric:tabular-nums}
.lx-checkout__list .lx-co-name{flex:1;min-width:0}
.lx-checkout__total{display:flex;justify-content:space-between;align-items:center;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--line);font-size:.95rem;color:var(--ink)}
.lx-checkout__total strong{font-family:var(--serif);font-size:1.4rem;color:var(--accent)}
.lx-checkout__hint{margin:10px 0 0;text-align:center;font-size:.76rem;color:rgba(244,239,230,.45)}
.lx-checkout__error{margin:10px 0 0;text-align:center;font-size:.82rem;color:#e8908d}

.lx-checkout-done{text-align:center;padding:14px 0}
.lx-checkout-done__icon{width:72px;height:72px;margin:0 auto 18px;color:var(--accent)}
.lx-checkout-done__icon svg{width:100%;height:100%}
.lx-checkout-done h3{margin:0 0 10px;font-family:var(--serif);font-size:1.8rem;font-weight:600;color:var(--ink)}
.lx-checkout-done p{margin:0 0 22px;font-size:.9rem;line-height:1.55;color:rgba(244,239,230,.62);max-width:34ch;margin-inline:auto}
.lx-checkout-done .lx-btn{margin:6px auto 0;display:flex;max-width:280px}

/* ============================================================
   TOASTS
   ============================================================ */
.lx-toasts{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:600;
  display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none;width:max-content;max-width:90vw}
.lx-toast{display:flex;align-items:center;gap:11px;background:#15110c;border:1px solid rgba(224,168,74,.35);
  border-radius:40px;padding:12px 22px;color:var(--ink);font-size:.86rem;box-shadow:0 14px 40px rgba(0,0,0,.5);
  opacity:0;transform:translateY(14px);transition:opacity .3s,transform .3s;pointer-events:auto}
.lx-toast.is-show{opacity:1;transform:none}
.lx-toast svg{flex:0 0 auto;color:var(--accent)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:880px){
  .lx-nav{display:none}
  .lx-burger{display:flex}
  .lx-catalog__head{align-items:flex-start}
  .lx-catalog__lead{max-width:none}
}
@media (max-width:560px){
  .lx-grid{grid-template-columns:1fr;gap:16px}
  .lx-product__media{height:clamp(260px,62vw,320px)}
  .lx-footer__top{flex-direction:column;align-items:flex-start;gap:18px}
  .lx-tones__panel{padding:22px 18px}
}

/* Filtros: permitir scroll horizontal sin barra en móvil estrecho */
@media (max-width:480px){
  .lx-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1);padding-left:var(--pad);padding-right:var(--pad)}
  .lx-filters::-webkit-scrollbar{display:none}
}

/* Ocultar barras de scroll en carruseles horizontales */
[data-hscroll]{scrollbar-width:none;-ms-overflow-style:none}
[data-hscroll]::-webkit-scrollbar{display:none}

/* Bloquear scroll del fondo cuando hay overlay abierto */
body.lx-no-scroll{overflow:hidden}

/* ---------- Movimiento reducido (respetado) ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}