/* ============================================================
   LUNA3D — Sistema visual web (basado en Manual de Marca v1.0)
   ============================================================ */
:root{
  /* Azul Espacial */
  --navy-900:#070C20;
  --navy-850:#0A1130;
  --navy-800:#0B1437;
  --navy-700:#101B40;
  --navy-600:#16224C;
  --navy-500:#1E2C5C;

  /* Aurora Lunar */
  --magenta:#E81F9D;
  --magenta-bright:#F72FB8;
  --magenta-deep:#C4179E; /* rosado sólido más saturado: contraste AA con blanco en badges pequeños */
  --violet:#9B27E0;
  --violet-bright:#B12CD9;
  /* Aurora Lunar oficial (Manual v1.1): 2 paradas E81F9D -> 9B27E0 */
  --grad:linear-gradient(125deg,#E81F9D 0%,#9B27E0 100%);
  --grad-rev:linear-gradient(305deg,#E81F9D 0%,#9B27E0 100%);
  --grad-soft:linear-gradient(125deg,rgba(232,31,157,.16),rgba(155,39,224,.16));

  /* Neutros */
  --star:#F5F6FB;
  --silver:#C4C9DE;
  --muted:#8A93B6;
  --muted-2:#6A7299;
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);

  /* glass */
  --glass:rgba(255,255,255,.045);
  --glass-2:rgba(255,255,255,.07);
  --glass-line:rgba(255,255,255,.12);
  --blur:18px;

  --font-display:"Space Grotesk",sans-serif;
  --font-body:"Manrope",sans-serif;
  --font-mono:"Space Mono",monospace;

  --maxw:1400px;
  --nav-h:74px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-theme:cubic-bezier(.45,.05,.25,1); /* easing oficial de transición día/noche (manual de marca) */
  --ease-nav:cubic-bezier(.33,0,.22,1); /* slide del header al ocultar/mostrar: ease-in-out suave y natural */
  --footer-bg:linear-gradient(180deg,transparent,rgba(10,17,48,.6));
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:96px;}
body{
  font-family:var(--font-body);
  background:var(--navy-900);
  color:var(--silver);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}
::selection{background:var(--magenta);color:#fff;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;}
input,textarea,select{font-family:inherit;}

/* fixed cosmic backdrop */
#stars{position:fixed;inset:0;z-index:0;pointer-events:none;}
.bg-glow{position:fixed;border-radius:50%;z-index:0;pointer-events:none;filter:blur(40px);opacity:.55;}
.bg-glow.a{width:760px;height:760px;top:-260px;right:-200px;
  background:radial-gradient(circle,rgba(155,39,224,.30),transparent 62%);}
.bg-glow.b{width:680px;height:680px;bottom:-280px;left:-220px;
  background:radial-gradient(circle,rgba(232,31,157,.22),transparent 62%);}
.page{position:relative;z-index:1;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}

/* ---------- utility text ---------- */
.kicker{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:3px;text-transform:uppercase;
  color:var(--magenta-bright);
}
.kicker::before{content:"";width:26px;height:1px;background:var(--magenta);}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.section-title{
  font-family:var(--font-display);font-weight:700;color:var(--star);
  font-size:clamp(28px,3.6vw,44px);line-height:1.05;letter-spacing:-.6px;text-wrap:balance;
}
.muted{color:var(--muted);}

/* ============================================================
   NAVBAR
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:60;
  display:flex;align-items:center;
  transition:background .3s,backdrop-filter .3s,border-color .3s,transform .9s var(--ease-nav),opacity .7s var(--ease-nav);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(8,13,33,.72);backdrop-filter:blur(var(--blur));
  border-bottom:1px solid var(--line);
}
/* Al llegar al footer el header se retira hacia arriba: así el logo del header
   no convive con el del footer. Aplica en ambos modos (claro y oscuro). */
.nav.nav-hide{
  transform:translateY(-104%);
  opacity:0;
  pointer-events:none;
}
.nav .wrap{display:grid;grid-template-columns:auto 1fr auto;align-items:center;width:100%;gap:24px;}
.nav-left{display:flex;align-items:center;gap:12px;}
.nav-logo{display:flex;align-items:center;gap:10px;}
.nav-logo img{height:42px;width:auto;}
.nav-links{display:flex;align-items:center;gap:6px;}
.nav-links a{
  font-size:14px;font-weight:500;color:var(--silver);padding:8px 14px;border-radius:10px;
  transition:.18s;position:relative;
}
.nav-links a:hover{color:var(--star);background:rgba(255,255,255,.05);}
.nav-links a.active{color:var(--star);}
.nav-links a.active::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;
  background:var(--grad);border-radius:2px;}
.nav-actions{display:flex;align-items:center;gap:8px;}
.icon-btn{
  width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  color:var(--silver);transition:.18s;border:1px solid transparent;position:relative;
}
.icon-btn:hover{background:var(--glass);border-color:var(--glass-line);color:var(--star);}
.icon-btn svg{width:20px;height:20px;}
.nav-pop-wrap{position:relative;display:flex;}
.nav-popover{
  position:absolute;top:calc(100% + 12px);right:0;min-width:248px;z-index:75;
  background:rgba(12,20,52,.97);border:1px solid var(--glass-line);border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.42);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
  padding:14px;opacity:0;visibility:hidden;transform:translateY(8px) scale(.98);transform-origin:top right;
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;color:var(--silver);font-size:13.5px;
}
/* puente invisible: evita que el popover se cierre al cruzar el espacio hacia él */
.nav-popover::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px;}
.nav-pop-wrap:hover .nav-popover,.nav-pop-wrap:focus-within .nav-popover{opacity:1;visibility:visible;transform:none;}
.nav-popover b{display:block;color:var(--star);font-family:var(--font-display);font-size:15px;margin-bottom:8px;}
.nav-popover.compact{display:flex;flex-direction:column;gap:8px;min-width:190px;}
.nav-popover.compact button,.nav-popover.compact a{
  text-align:left;color:var(--silver);padding:9px 10px;border-radius:10px;transition:.16s;
}
.nav-popover.compact button:hover,.nav-popover.compact a:hover{background:var(--glass);color:var(--star);}
.fav-pop-item{display:flex;align-items:center;gap:10px;padding:9px 6px;border-bottom:1px solid var(--line-soft);
  border-radius:8px;transition:background .15s var(--ease);margin:0 -6px;}
.fav-pop-item:hover{background:rgba(255,255,255,.06);}
.fav-pop-thumb{width:38px;height:38px;border-radius:7px;object-fit:cover;flex-shrink:0;background:rgba(255,255,255,.06);}
.fav-pop-thumb--ph{display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.25);}
.fav-pop-thumb--ph svg{width:18px;height:18px;}
.fav-pop-info{display:flex;flex-direction:column;gap:2px;min-width:0;}
.fav-pop-info span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;}
.fav-pop-info b{color:var(--magenta-bright);font-family:var(--font-mono);font-size:11px;}
.fav-pop-all{display:flex;align-items:center;gap:8px;margin-top:10px;color:var(--star);font-weight:700;}
.fav-pop-all svg{width:15px;height:15px;}
.cart-count{
  position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--magenta-deep);color:#fff;font-family:var(--font-mono);font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1;border:2px solid var(--navy-900);
  transform:scale(0);transition:transform .25s var(--ease);
}
.cart-count.show{transform:scale(1);}
.burger{display:flex;flex-direction:column;gap:5px;padding:10px;border-radius:10px;z-index:101;cursor:pointer;}
.burger span{width:22px;height:2px;background:var(--silver);border-radius:2px;transition:.25s var(--ease);}
.burger.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  background: var(--star);
}
.burger.active span:nth-child(2) {
  opacity: 0;
}
.burger.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  background: var(--star);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  font-family:var(--font-display);font-weight:600;font-size:15px;
  padding:14px 26px;border-radius:13px;display:inline-flex;align-items:center;gap:10px;
  transition:.22s var(--ease);white-space:nowrap;
}
.btn svg{width:18px;height:18px;}
.btn.primary{background:var(--grad);color:#fff;box-shadow:0 10px 30px rgba(155,39,224,.35);}
.btn.primary:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 16px 40px rgba(155,39,224,.45);}
.btn.ghost{background:transparent;color:var(--star);border:1.5px solid rgba(255,255,255,.22);}
.btn.ghost:hover{border-color:var(--magenta);color:var(--magenta-bright);background:rgba(232,31,157,.06);}
.btn.glass{background:var(--glass);border:1px solid var(--glass-line);color:var(--star);backdrop-filter:blur(10px);}
.btn.glass:hover{background:var(--glass-2);transform:translateY(-2px);}
.btn.block{width:100%;justify-content:center;}

/* ============================================================
   GLASS CARD primitive
   ============================================================ */
.glass{
  background:var(--glass);border:1px solid var(--glass-line);border-radius:20px;
  backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;padding:calc(var(--nav-h) + 70px) 0 90px;overflow:hidden;}
.hero-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;}
.hero-badge{
  display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 10px;border-radius:999px;
  background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(10px);
  font-size:13px;color:var(--silver);margin-bottom:30px;
}
.hero-badge b{
  font-family:var(--font-mono);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;
  background:var(--grad);color:#fff;padding:4px 9px;border-radius:999px;font-weight:700;
}
.hero h1{
  font-family:var(--font-display);font-weight:700;color:var(--star);
  font-size:clamp(42px,7vw,92px);line-height:.98;letter-spacing:-2px;max-width:15ch;text-wrap:balance;
}
.hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero-sub{margin-top:26px;font-size:clamp(16px,1.5vw,20px);color:var(--silver);max-width:56ch;text-wrap:pretty;}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:40px;}
.hero-chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:46px;}
.hero-chips a{
  font-size:13.5px;font-weight:500;color:var(--silver);padding:9px 18px;border-radius:999px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);transition:.18s;
}
.hero-chips a:hover{border-color:var(--magenta);color:var(--star);background:rgba(232,31,157,.08);transform:translateY(-2px);}

/* orbital showcase (split + immersive heroes) */
.hero-orbit{position:relative;width:min(440px,90%);aspect-ratio:1;flex:0 0 auto;}
.orbit-ring{position:absolute;inset:0;border:1px solid var(--line);border-radius:50%;}
.orbit-ring.r2{inset:13%;border-color:rgba(232,31,157,.22);}
.orbit-ring.r3{inset:26%;border-color:var(--line-soft);}
.orbit-core{
  position:absolute;inset:30%;border-radius:50%;background:var(--grad);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 80px rgba(155,39,224,.5),inset 0 0 60px rgba(255,255,255,.18);
  animation:floaty 7s var(--ease) infinite;
}
.orbit-core img{width:62%;filter:drop-shadow(0 8px 20px rgba(0,0,0,.4));}
.orbit-chip{
  position:absolute;padding:11px 15px;border-radius:14px;
  background:var(--glass-2);border:1px solid var(--glass-line);backdrop-filter:blur(12px);
  display:flex;align-items:center;gap:10px;font-size:13px;color:var(--star);font-weight:600;
  box-shadow:0 12px 30px rgba(0,0,0,.35);animation:floaty 6s var(--ease) infinite;
}
.orbit-chip .dot{width:9px;height:9px;border-radius:50%;background:var(--grad);}
.orbit-chip.c1{top:6%;left:-6%;animation-delay:-1s;}
.orbit-chip.c2{bottom:14%;right:-8%;animation-delay:-3s;}
.orbit-chip.c3{bottom:-2%;left:18%;animation-delay:-2s;}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}

/* hero layout variants (driven by data-hero on .hero) */
.hero[data-hero="split"] .hero-inner{
  flex-direction:row;text-align:left;align-items:center;justify-content:space-between;gap:56px;
}
.hero[data-hero="split"] .hero-copy{max-width:600px;}
.hero[data-hero="split"] .hero-cta,
.hero[data-hero="split"] .hero-chips{justify-content:flex-start;}
.hero[data-hero="split"] h1{max-width:none;}
.hero[data-hero="centered"] .hero-orbit{display:none;}
.hero[data-hero="immersive"] .hero-inner{flex-direction:column;text-align:center;}
.hero[data-hero="immersive"] .hero-orbit{
  width:min(560px,92%);margin-top:54px;order:3;
}
.hero[data-hero="immersive"] .hero-chips{display:none;}
/* default = centered (orbit hidden) unless set */
.hero:not([data-hero]) .hero-orbit{display:none;}

/* ============================================================
   SECTION SHELL
   ============================================================ */
section.block{padding:80px 0;position:relative;}
.block-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px;flex-wrap:wrap;}
.block-head .bh-left{max-width:680px;}
.block-head .kicker{margin-bottom:16px;}
.block-head p.lead{color:var(--muted);font-size:16px;margin-top:14px;max-width:560px;text-wrap:pretty;}
.link-all{
  font-family:var(--font-display);font-weight:600;font-size:14.5px;color:var(--star);
  display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:11px;
  border:1px solid var(--line);transition:.18s;white-space:nowrap;
}
.link-all:hover{border-color:var(--magenta);color:var(--magenta-bright);gap:12px;}

/* ============================================================
   PRODUCT CARD
   ============================================================ */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.prod{
  background:var(--glass);border:1px solid var(--glass-line);border-radius:20px;overflow:hidden;
  backdrop-filter:blur(var(--blur));transition:transform .28s var(--ease),border-color .28s,box-shadow .28s;
  display:flex;flex-direction:column;position:relative;
}
.prod:hover{transform:translateY(-6px);border-color:rgba(232,31,157,.45);box-shadow:0 24px 50px rgba(0,0,0,.45);}
.prod .pimg{
  aspect-ratio:1/.92;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 30% 25%,rgba(155,39,224,.18),transparent 55%),
    repeating-linear-gradient(135deg,var(--navy-700) 0 13px,var(--navy-800) 13px 26px);
  display:flex;align-items:center;justify-content:center;
}
.prod .pimg .ph-label{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--muted-2);text-align:center;padding:8px 14px;border:1px dashed var(--line);border-radius:8px;
  background:rgba(7,12,32,.4);
}
.prod .pimg img{width:100%;height:100%;object-fit:cover;}
.prod .pbadge{
  position:absolute;top:14px;left:14px;background:var(--grad);color:#fff;
  font-family:var(--font-mono);font-size:10px;letter-spacing:1px;padding:5px 10px;border-radius:8px;
  text-transform:uppercase;font-weight:700;box-shadow:0 6px 16px rgba(155,39,224,.4);z-index:2;
}
.prod .pfav{
  position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:10px;z-index:2;
  background:rgba(7,12,32,.5);backdrop-filter:blur(6px);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--silver);
  opacity:0;transform:translateY(-4px);transition:.2s;
}
.prod:hover .pfav{opacity:1;transform:translateY(0);}
.prod .pfav:hover{color:var(--magenta-bright);border-color:var(--magenta);}
.prod .pfav.on{opacity:1;transform:none;color:var(--magenta-bright);border-color:var(--magenta);background:rgba(232,31,157,.12);}
.prod .pfav svg{width:16px;height:16px;}
.prod .pbody{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1;}
.prod .pcat{font-family:var(--font-mono);font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--magenta-bright);}
.prod .pname{font-family:var(--font-display);font-weight:600;color:var(--star);font-size:18px;margin:8px 0 0;line-height:1.2;}
.prod .pname a:hover{color:var(--magenta-bright);}
.prod .pfoot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:0;}
.prod .price{font-family:var(--font-display);font-weight:700;color:var(--star);font-size:20px;}
.prod .pcart{
  width:42px;height:42px;border-radius:12px;background:var(--grad);display:flex;align-items:center;justify-content:center;
  color:#fff;transition:.2s;box-shadow:0 8px 20px rgba(155,39,224,.32);
}
.prod .pcart:hover{transform:scale(1.08);filter:brightness(1.08);}
.prod .pcart svg{width:18px;height:18px;}
.prod .pcart.added{background:#2BB673;box-shadow:0 8px 20px rgba(43,182,115,.4);}

/* ============================================================
   CATEGORIES
   ============================================================ */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.cat-card{
  position:relative;overflow:hidden;border-radius:20px;min-height:180px;
  border:1px solid var(--glass-line);background:var(--glass);backdrop-filter:blur(var(--blur));
  padding:26px;display:flex;flex-direction:column;justify-content:space-between;
  transition:.26s var(--ease);
}
.cat-card::after{
  content:"";position:absolute;inset:0;background:var(--grad-soft);opacity:0;transition:.26s;
}
.cat-card:hover{transform:translateY(-5px);border-color:rgba(232,31,157,.4);}
.cat-card:hover::after{opacity:1;}
.cat-card > *{position:relative;z-index:2;}
.cat-ico{width:50px;height:50px;border-radius:14px;background:var(--grad-soft);border:1px solid var(--glass-line);
  display:flex;align-items:center;justify-content:center;color:var(--magenta-bright);}
.cat-ico svg{width:24px;height:24px;}
.cat-card h3{font-family:var(--font-display);font-weight:600;color:var(--star);font-size:21px;}
.cat-card .cat-meta{display:flex;align-items:center;justify-content:space-between;}
.cat-card .cat-meta span{font-family:var(--font-mono);font-size:11px;letter-spacing:1px;color:var(--muted);text-transform:uppercase;}
.cat-card .cat-arrow{color:var(--silver);transition:.2s;}
.cat-card:hover .cat-arrow{color:var(--magenta-bright);transform:translateX(4px);}

/* ============================================================
   FEATURE STRIP / STATS
   ============================================================ */
.feature-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;}
.feature-strip .fs{background:rgba(11,20,55,.6);backdrop-filter:blur(10px);padding:28px 26px;display:flex;flex-direction:column;gap:10px;}
.feature-strip .fs .fs-ico{width:38px;height:38px;border-radius:11px;background:var(--grad-soft);border:1px solid var(--glass-line);
  display:flex;align-items:center;justify-content:center;color:var(--magenta-bright);}
.feature-strip .fs .fs-ico svg{width:19px;height:19px;}
.feature-strip .fs b{font-family:var(--font-display);font-weight:600;color:var(--star);font-size:16px;}
.feature-strip .fs p{font-size:13.5px;color:var(--muted);line-height:1.5;}
/* Bloque Más Vendidos — doble ancho en el strip */
.feature-strip .fs.fs--wide{grid-column:span 2;}
/* ===== Photo Carousel dentro del bloque fs--wide ===== */
.mini-carousel-wrapper{margin-top:12px;overflow:hidden;border-radius:12px;position:relative;height:150px;border:1px solid var(--glass-line);}
.mini-carousel{position:relative;width:100%;height:100%;}
.mini-slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:11px;text-decoration:none;}
.mini-slide.active{opacity:1;}
.mini-slide img{width:100%;height:100%;object-fit:cover;display:block;}
.mini-slide-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;height:100%;color:rgba(255,255,255,.3);font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;}
.mini-slide-ph svg{width:30px;height:30px;opacity:.3;}
.mini-dots{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);display:flex;gap:5px;z-index:2;}
.mini-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.22);transition:background .35s,transform .35s;}
.mini-dot.active{background:rgba(255,255,255,.85);transform:scale(1.3);}

/* ============================================================
   HOME SHOWCASES / FAQ
   ============================================================ */
.product-showcases{padding-top:42px;}
.product-showcases .wrap{display:flex;flex-direction:column;gap:30px;}
.showcase-panel{
  border:1px solid var(--glass-line);border-radius:24px;padding:clamp(24px,4vw,42px);
  background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
  overflow:hidden;position:relative;
}
.showcase-panel::before{content:"";position:absolute;inset:auto -12% -42% 42%;height:260px;background:radial-gradient(circle,rgba(232,31,157,.18),transparent 65%);filter:blur(22px);}
.showcase-panel.new::before{inset:-38% 40% auto -12%;background:radial-gradient(circle,rgba(155,39,224,.18),transparent 65%);}
.showcase-panel > *{position:relative;z-index:1;}
.wide-carousel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,320px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;}
.wide-carousel::-webkit-scrollbar{height:8px;}
.wide-carousel::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px;}
/* ── Showcase split: banner izq + compact grid der ──────────────── */
.showcase-split{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:start;margin-top:18px;}
.showcase-promo-banner{display:flex;flex-direction:column;gap:12px;padding:24px 20px;
  background:linear-gradient(135deg,rgba(232,31,157,.10),rgba(155,39,224,.08));
  border:1px solid rgba(232,31,157,.22);border-radius:16px;}
.showcase-promo-banner .kicker{color:var(--magenta-bright);font-size:12px;}
.showcase-promo-banner h3{font-family:var(--font-display);font-size:16px;color:var(--star);line-height:1.35;margin:0;}
.showcase-promo-banner .btn{font-size:13px;padding:9px 18px;}
.showcase-compact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
/* Compact product card */
.compact-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;
  overflow:hidden;text-decoration:none;background:rgba(255,255,255,.03);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease);}
.compact-card:hover{border-color:var(--magenta);box-shadow:0 0 14px rgba(232,31,157,.14);transform:translateY(-2px);}
.cc-img{aspect-ratio:1;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.cc-img img{width:100%;height:100%;object-fit:cover;}
.cc-ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:rgba(255,255,255,.14);}
.cc-ph svg{width:28px;height:28px;}
.cc-info{padding:8px 10px;display:flex;flex-direction:column;gap:3px;}
.cc-name{font-size:12px;color:var(--star);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;}
.cc-price{font-family:var(--font-mono);font-size:11px;color:var(--magenta-bright);}
/* Gift finder — 3 cols para tarjetas compactas */
#gift-results-grid{grid-template-columns:repeat(3,1fr);gap:14px;}
.show-prod{
  scroll-snap-align:start;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:rgba(11,20,55,.52);min-height:390px;display:flex;flex-direction:column;
}
.show-img{
  position:relative;aspect-ratio:1.12;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 28%,rgba(232,31,157,.18),transparent 55%),
  repeating-linear-gradient(135deg,var(--navy-700) 0 14px,var(--navy-800) 14px 28px);
}
.show-body{padding:18px;display:flex;flex-direction:column;gap:8px;}
.show-body h3{font-family:var(--font-display);font-size:20px;color:var(--star);line-height:1.15;}
.show-price{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px;}
.show-price b{font-family:var(--font-display);font-size:24px;color:var(--star);}
.show-price span{color:var(--muted-2);text-decoration:line-through;font-size:14px;}
.show-price em{font-family:var(--font-mono);font-style:normal;font-size:11px;color:#fff;background:var(--grad);padding:4px 8px;border-radius:8px;}
.gift-band{
  display:grid;grid-template-columns:.9fr 1.25fr;gap:34px;align-items:center;
  border-radius:24px;border:1px solid var(--glass-line);padding:clamp(28px,5vw,54px);
  background:linear-gradient(125deg,rgba(232,31,157,.12),rgba(142,43,230,.08)),rgba(255,255,255,.035);
}
.gift-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.gift-card{padding:18px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.035);transition:.18s;}
.gift-card:hover{transform:translateY(-3px);border-color:rgba(232,31,157,.35);}
.gift-card span{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--grad-soft);color:var(--magenta-bright);margin-bottom:12px;}
.gift-card svg{width:19px;height:19px;}
.gift-card b{display:block;font-family:var(--font-display);color:var(--star);font-size:17px;}
.gift-card p{font-size:13.5px;color:var(--muted);line-height:1.45;margin-top:5px;}
.offer-strip{
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  border:1px solid var(--glass-line);border-radius:22px;padding:34px;
  background:linear-gradient(110deg,rgba(232,31,157,.16),rgba(11,20,55,.58) 52%,rgba(155,39,224,.12));
}
.offer-strip .lead{max-width:64ch;}
.faq-list{display:grid;gap:12px;max-width:900px;}
.faq-item{border:1px solid var(--line);border-radius:16px;background:var(--glass);overflow:hidden;}
.faq-item summary{
  list-style:none;cursor:pointer;padding:20px 22px;font-family:var(--font-display);font-weight:600;
  color:var(--star);display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary span{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--magenta-bright);background:var(--grad-soft);flex:0 0 auto;}
.faq-item summary svg{width:15px;height:15px;transition:.2s;}
.faq-item[open] summary svg{transform:rotate(45deg);}
.faq-item p{padding:0 22px 22px;color:var(--silver);max-width:70ch;}

/* ============================================================
   TESTIMONIALS (marquee)
   ============================================================ */
.tmarquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.tmarquee-track{display:flex;gap:20px;width:max-content;animation:marquee 48s linear infinite;}
.tmarquee:hover .tmarquee-track{animation-play-state:paused;}
@keyframes marquee{to{transform:translateX(-50%);}}
.tcard{
  width:360px;flex:0 0 360px;padding:26px 28px;border-radius:18px;
  background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(var(--blur));
  display:flex;flex-direction:column;gap:16px;
}
.tcard .tstars{display:flex;gap:3px;color:var(--magenta-bright);}
.tcard .tstars svg{width:15px;height:15px;}
.tcard p{font-size:15px;color:var(--silver);line-height:1.55;text-wrap:pretty;}
.tcard .twho{display:flex;align-items:center;gap:13px;margin-top:auto;}
.tcard .tav{width:42px;height:42px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;color:#fff;font-size:17px;flex:0 0 auto;}
.tcard .tmeta b{display:block;color:var(--star);font-family:var(--font-display);font-weight:600;font-size:14.5px;}
.tcard .tmeta span{font-size:12.5px;color:var(--muted);}

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner{
  position:relative;overflow:hidden;border-radius:28px;padding:64px 56px;
  background:linear-gradient(125deg,rgba(232,31,157,.16),rgba(142,43,230,.16)),var(--navy-800);
  border:1px solid var(--glass-line);text-align:center;
}
.cta-banner .glow-c{position:absolute;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,31,157,.35),transparent 60%);top:-180px;left:50%;transform:translateX(-50%);filter:blur(30px);}
.cta-banner > *{position:relative;z-index:2;}
.cta-banner h2{font-family:var(--font-display);font-weight:700;color:var(--star);font-size:clamp(28px,3.6vw,44px);letter-spacing:-1px;line-height:1.05;text-wrap:balance;}
.cta-banner p{color:var(--silver);font-size:17px;margin:18px auto 32px;max-width:50ch;}

/* ============================================================
   FOOTER
   ============================================================ */
/* ============================================================
   FOOTER - integracion handoff (universo + tarjetas RRSS + favicon)
   Tema del sitio: OSCURO por defecto; el modo claro (body.light-mode)
   resetea los fondos oscuros. Depende de las variables de marca.
   ============================================================ */
.footer{
  margin-top:96px;position:relative;isolation:isolate;overflow:hidden;
  border-top:1px solid rgba(255,255,255,.05);
  /* MODO OSCURO (por defecto): profundidad del universo, azul marino -> casi-negro */
  background:linear-gradient(180deg,
      rgba(7,12,32,0) 0%,
      #060A1E 18%,
      #050817 42%,
      #03060F 72%,
      #01030A 100%);
}
.footer .wrap{position:relative;z-index:2;}

/* hairline luminosa que separa el footer del resto */
.footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(155,39,224,.5) 28%,rgba(232,31,157,.55) 50%,rgba(155,39,224,.5) 72%,transparent);
  opacity:.7;
}
/* nebulosas: glows de color para que NO sea plano */
.footer-aura{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 88% 4%, rgba(155,39,224,.16), transparent 52%),
    radial-gradient(95% 80% at 8% 26%, rgba(232,31,157,.09), transparent 58%),
    radial-gradient(70% 120% at 50% 118%, rgba(30,44,92,.45), transparent 60%);
}
/* campo de estrellas tenue */
.footer-stars{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1.3px 1.3px at 26% 64%, rgba(213,206,255,.7), transparent 60%),
    radial-gradient(1.1px 1.1px at 41% 14%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.4px 1.4px at 58% 78%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1.1px 1.1px at 69% 30%, rgba(247,47,184,.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 82% 60%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.2px 1.2px at 92% 18%, rgba(213,206,255,.6), transparent 60%),
    radial-gradient(1px 1px at 35% 90%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.2px 1.2px at 76% 92%, rgba(177,44,217,.5), transparent 60%);
}
@media (prefers-reduced-motion: no-preference){
  .footer-stars{animation:l3dTwinkle 5.5s ease-in-out infinite;}
}
@keyframes l3dTwinkle{0%,100%{opacity:.42;}50%{opacity:.62;}}

/* ---------- GRILLA PRINCIPAL ---------- */
.footer-top{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:48px;padding:64px 0 40px;}
/* [2][3] Familia de marcas: Luna 3D | Solar 3D (próximamente) */
.footer-brands{display:flex;align-items:flex-start;gap:20px;margin-bottom:34px;flex-wrap:wrap;}
.footer-logo{height:41px;width:auto;display:block;}            /* +20% respecto a los 34px previos */
.fbrand{display:flex;align-items:center;}
.fbrand-sep{width:1px;height:41px;flex-shrink:0;align-self:flex-start;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.28),transparent);}
/* Solar 3D · marca hermana (próximamente): logo real + etiqueta centrada debajo */
.fbrand--solar{flex-direction:column;align-items:center;gap:8px;opacity:.92;transition:opacity .25s;}
.fbrand--solar:hover{opacity:1;}
.solar-logo{height:41px;width:auto;display:block;}
.solar-logo--day{display:none;}
.fbrand-soon{font-family:var(--font-mono);font-size:9px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--muted-2);border:1px solid var(--line);border-radius:999px;padding:2px 9px;}
.footer-brand p{font-size:14px;color:var(--muted);max-width:38ch;line-height:1.6;}
.footer-col h4{font-family:var(--font-mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--magenta-bright);margin-bottom:18px;}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px;}
.footer-col a,.footer-col li{font-size:14px;color:var(--silver);transition:.16s;}
.footer-col a{width:fit-content;}
.footer-col a:hover{color:var(--magenta-bright);}

/* ---------- DIVISOR ---------- */
.footer-divider{height:1px;margin:8px 0 36px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1) 12%,rgba(255,255,255,.1) 88%,transparent);}

/* ---------- SIGUENOS EN REDES ---------- */
.footer-social-section{display:flex;align-items:center;justify-content:space-between;gap:48px 40px;flex-wrap:wrap;padding-bottom:48px;}
.fss-head{max-width:30ch;}
.fss-head h4{font-family:var(--font-display);font-size:24px;font-weight:600;color:var(--star);margin-bottom:8px;letter-spacing:-.01em;}
.fss-head p{font-size:14px;color:var(--muted);}
.footer-social-cards{display:flex;gap:14px;flex-wrap:wrap;}

/* [3] tarjetas en gravedad 0: flota el recuadro, color por marca */
.fsc{--fsc:var(--magenta);
  display:flex;align-items:center;gap:12px;padding:11px 16px;border-radius:15px;
  border:1px solid var(--glass-line);background:var(--glass);
  transition:border-color .25s,background .25s,box-shadow .35s,transform .25s;
  transform:translateZ(0);}
/* color de realce por marca (borde + halo en hover) */
.fsc[data-net="instagram"]{--fsc:#E1306C;}
.fsc[data-net="facebook"]{--fsc:#1877F2;}
.fsc[data-net="tiktok"]{--fsc:#25F4EE;}
.fsc[data-net="youtube"]{--fsc:#FF0000;}
.fsc[data-net="whatsapp"]{--fsc:#25D366;}
/* [1] el tile del icono lleva el color OFICIAL de cada red; glifo blanco en reposo */
.fsc-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;
  background:var(--glass-2);color:#fff;transition:transform .25s,box-shadow .25s,filter .25s;}
.fsc[data-net="instagram"] .fsc-ico{background:radial-gradient(125% 125% at 28% 108%,#FED576 0%,#F47133 22%,#BC3081 52%,#4C63D2 90%);}
.fsc[data-net="facebook"]  .fsc-ico{background:#1877F2;}
.fsc[data-net="tiktok"]    .fsc-ico{background:#0E0E12;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);}
.fsc[data-net="youtube"]   .fsc-ico{background:#FF0000;}
.fsc[data-net="whatsapp"]  .fsc-ico{background:#25D366;}
.fsc-ico svg{width:24px;height:24px;}
.fsc-txt{display:flex;flex-direction:column;line-height:1.3;}
.fsc-txt b{font-family:var(--font-display);font-size:14.5px;font-weight:600;color:var(--star);}
.fsc-txt i{font-style:normal;font-family:var(--font-mono);font-size:11px;letter-spacing:.3px;color:var(--muted-2);transition:color .25s;}
.fsc:hover{border-color:var(--fsc);
  background:color-mix(in srgb,var(--fsc) 9%,transparent);
  box-shadow:0 14px 38px color-mix(in srgb,var(--fsc) 24%,transparent);}
.fsc:hover .fsc-ico{transform:scale(1.06);box-shadow:0 8px 18px color-mix(in srgb,var(--fsc) 45%,transparent);}
.fsc:hover .fsc-txt i{color:var(--fsc);}
@media (prefers-reduced-motion: no-preference){
  .fsc:hover{animation:l3dG0 6s ease-in-out infinite;}
}
@keyframes l3dG0{
  0%{transform:translate(0,0) rotate(0deg);}
  33%{transform:translate(2px,-7px) rotate(-.5deg);}
  66%{transform:translate(-2px,-4px) rotate(.4deg);}
  100%{transform:translate(0,0) rotate(0deg);}
}

/* ---------- [4] BARRA INFERIOR + FAVICON ---------- */
.footer-bottom{position:relative;border-top:1px solid var(--line-soft);padding:22px 0 44px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;}
.footer-bottom span{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.5px;color:var(--muted-2);}
.footer-bottom .fb-meta{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;}
.footer-bottom .fb-meta a{color:var(--muted-2);transition:color .16s;}
.footer-bottom .fb-meta a:hover{color:var(--magenta-bright);}
.fb-mark{height:22px;width:22px;display:inline-block;vertical-align:middle;opacity:.92;}
.footer-bottom::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;margin-left:-50vw;width:100vw;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.62));
}

/* ---------- MODO CLARO (reset de fondos oscuros) ---------- */
/* [5] En modo claro el footer se SEPARA del contenido: fondo propio + borde superior + sombra suave */
body.light-mode .footer{
  background:linear-gradient(180deg,#EEF2FB 0%,#E5EBF7 100%);
  border-top:1px solid rgba(11,20,55,.10);
  box-shadow:0 -1px 0 rgba(255,255,255,.65) inset, 0 -22px 46px -30px rgba(20,34,76,.32);}
body.light-mode .footer::before,
body.light-mode .footer-aura,
body.light-mode .footer-stars,
body.light-mode .footer-bottom::before{display:none;}
body.light-mode .footer-divider{background:linear-gradient(90deg,transparent,rgba(11,20,55,.12) 12%,rgba(11,20,55,.12) 88%,transparent);}
body.light-mode .footer-bottom{border-top-color:rgba(11,20,55,.10);}
body.light-mode .footer-brand p,
body.light-mode .fss-head p,
body.light-mode .footer-bottom span,
body.light-mode .footer-bottom .fb-meta a{color:#5C6B94;}
body.light-mode .footer-col a,body.light-mode .footer-col li{color:#42507E;}
body.light-mode .footer-col a:hover,
body.light-mode .footer-bottom .fb-meta a:hover{color:#7B4FC8;}
body.light-mode .fss-head h4{color:#0B1437;}
/* tarjetas sociales legibles en claro (el tile conserva su color oficial) */
body.light-mode .fsc{background:#FFFFFF;border-color:rgba(11,20,55,.10);box-shadow:0 4px 14px rgba(20,34,76,.06);}
body.light-mode .fsc-txt b{color:#0B1437;}
body.light-mode .fsc-txt i{color:#6A7299;}
/* marcas hermanas en claro */
body.light-mode .fbrand-sep{background:linear-gradient(180deg,transparent,rgba(11,20,55,.18),transparent);}
body.light-mode .fbrand-soon{color:#6A7299;border-color:rgba(11,20,55,.16);}
/* Swap del logo Solar según tema: noche por defecto, día en modo claro */
body.light-mode .solar-logo--night{display:none;}
body.light-mode .solar-logo--day{display:block;}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1080px){
  .footer-top{grid-template-columns:1.4fr 1fr 1fr;gap:32px;}
}
@media(max-width:760px){
  .footer-top{grid-template-columns:1fr 1fr;gap:30px 24px;padding:56px 0 36px;}
  .footer-brand{grid-column:1 / -1;}
  .footer-social-section{flex-direction:column;align-items:flex-start;gap:24px;}
  .footer-social-cards{width:100%;}
  .fsc{flex:1 1 auto;}
}
@media(max-width:560px){
  .footer{margin-top:72px;}
  .footer-top{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px;}
}


/* floating actions */
.float-actions{position:fixed;right:22px;bottom:22px;z-index:80;display:flex;flex-direction:column;gap:12px;align-items:flex-end;}
.float-btn{
  width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;background:var(--grad);box-shadow:0 14px 34px rgba(155,39,224,.34);
  border:1px solid rgba(255,255,255,.18);transition:.22s var(--ease);position:relative;
}
.float-btn:hover{transform:translateY(-3px) scale(1.02);filter:brightness(1.06);}
.float-btn svg{width:24px;height:24px;}
.whatsapp-float{background:#25D366;}
.float-tip{
  position:absolute;right:66px;top:50%;transform:translateY(-50%) translateX(8px);
  white-space:nowrap;background:rgba(10,17,48,.94);border:1px solid var(--glass-line);
  color:var(--star);font-size:13px;font-weight:700;padding:10px 13px;border-radius:12px;
  opacity:0;visibility:hidden;transition:.18s var(--ease);box-shadow:0 16px 40px rgba(0,0,0,.28);
}
.whatsapp-float:hover .float-tip{opacity:1;visibility:visible;transform:translateY(-50%);}
.scroll-top{opacity:0;visibility:hidden;transform:translateY(10px);background:var(--navy-800);}
.scroll-top.show{opacity:1;visibility:visible;transform:none;}

/* premium loader — pantalla de carga "universo Luna3D" */
.luna-loader{
  position:fixed;inset:0;z-index:200;background:var(--navy-900);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  transition:opacity .6s var(--ease),visibility .6s;
}
.luna-loader.hide{opacity:0;visibility:hidden;pointer-events:none;}
.loader-orbit{width:148px;height:148px;position:relative;display:flex;align-items:center;justify-content:center;}
.loader-orbit::before{content:"";position:absolute;width:124px;height:124px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,31,157,.30),rgba(142,43,230,.12) 46%,transparent 70%);
  filter:blur(6px);animation:loader-breathe 3.2s var(--ease) infinite;}
.loader-orbit::after{content:"";position:absolute;inset:-14px;border:1px dashed rgba(155,39,224,.24);
  border-radius:50%;animation:loader-orbit-rev 9s linear infinite;}
.loader-orbit img{width:84px;position:relative;z-index:1;filter:drop-shadow(0 10px 24px rgba(0,0,0,.4));animation:loader-float 3.2s var(--ease) infinite;}
.loader-ring{position:absolute;inset:0;border:1px solid rgba(232,31,157,.32);border-radius:50%;animation:loader-orbit 2.8s linear infinite;}
.loader-ring::after{content:"";position:absolute;top:10px;right:18px;width:10px;height:10px;border-radius:50%;background:var(--magenta-bright);box-shadow:0 0 24px rgba(232,31,157,.85);}
.loader-spark{position:absolute;inset:24px;border-radius:50%;border:1px solid var(--line);animation:loader-glow 2.8s var(--ease) infinite;}
.loader-tag{font-family:var(--font-mono);font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--muted);animation:loader-tag 1.9s var(--ease) infinite;}
@keyframes loader-orbit{to{transform:rotate(360deg);}}
@keyframes loader-orbit-rev{to{transform:rotate(-360deg);}}
@keyframes loader-glow{50%{box-shadow:0 0 44px rgba(155,39,224,.3);}}
@keyframes loader-breathe{0%,100%{opacity:.6;transform:scale(.96);}50%{opacity:1;transform:scale(1.05);}}
@keyframes loader-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
@keyframes loader-tag{0%,100%{opacity:.4;}50%{opacity:.9;}}

/* movimiento reducido: carga, reveal y micro-hovers sin animación */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important;transform:none !important;transition:none !important;}
  .loader-ring,.loader-spark,.loader-orbit::before,.loader-orbit::after,.loader-orbit img,.loader-tag{animation:none !important;}
  .soc:hover,.prod:hover,.btn:hover,.float-btn:hover{transform:none !important;}
}

/* ============================================================
   CART DRAWER
   ============================================================ */
.drawer-scrim{position:fixed;inset:0;z-index:90;background:rgba(4,7,18,.6);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:.3s;}
.drawer-scrim.open{opacity:1;visibility:visible;}
.drawer{
  position:fixed;top:0;right:0;height:100%;width:min(420px,100%);z-index:100;
  background:linear-gradient(180deg,var(--navy-850),var(--navy-900));border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .34s var(--ease);display:flex;flex-direction:column;
}
.drawer.open{transform:translateX(0);}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:24px 26px;border-bottom:1px solid var(--line);}
.drawer-head h3{font-family:var(--font-display);font-weight:700;color:var(--star);font-size:20px;}
.drawer-body{flex:1;overflow-y:auto;padding:18px 26px;display:flex;flex-direction:column;gap:14px;}
.drawer-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--muted);text-align:center;padding:40px;}
.drawer-empty .de-ico{width:64px;height:64px;border-radius:50%;background:var(--glass);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted-2);}
.drawer-empty .de-ico svg{width:28px;height:28px;}
.cart-item{display:flex;gap:14px;align-items:center;padding:14px;border-radius:14px;background:var(--glass);border:1px solid var(--line);}
.cart-item .ci-img{width:56px;height:56px;border-radius:11px;flex:0 0 auto;overflow:hidden;
  background:repeating-linear-gradient(135deg,var(--navy-700) 0 10px,var(--navy-800) 10px 20px);}
.cart-item .ci-img img{width:100%;height:100%;object-fit:cover;display:block;}
.cart-item .ci-info{flex:1;min-width:0;}
.cart-item .ci-info b{display:block;font-family:var(--font-display);font-weight:600;color:var(--star);font-size:14px;line-height:1.2;}
.cart-item .ci-info .ci-price{font-family:var(--font-mono);font-size:12.5px;color:var(--magenta-bright);margin-top:4px;}
.cart-item .ci-qty{display:flex;align-items:center;gap:8px;margin-top:8px;}
.cart-item .ci-qty button{width:24px;height:24px;border-radius:7px;border:1px solid var(--line);color:var(--silver);font-size:15px;display:flex;align-items:center;justify-content:center;transition:.15s;}
.cart-item .ci-qty button:hover{border-color:var(--magenta);color:var(--star);}
.cart-item .ci-qty span{font-family:var(--font-mono);font-size:13px;color:var(--star);min-width:20px;text-align:center;}
.cart-item .ci-remove{color:var(--muted-2);transition:.15s;}
.cart-item .ci-remove:hover{color:#FF7A7A;}
.cart-item .ci-remove svg{width:17px;height:17px;}
.drawer-foot{padding:22px 26px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:16px;}
.drawer-foot .dtotal{display:flex;justify-content:space-between;align-items:baseline;}
.drawer-foot .dtotal span{font-size:14px;color:var(--muted);}
.drawer-foot .dtotal b{font-family:var(--font-display);font-weight:700;color:var(--star);font-size:24px;}

/* toast */
.toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(80px);z-index:120;
  background:var(--navy-800);border:1px solid var(--glass-line);border-radius:14px;padding:14px 22px;
  display:flex;align-items:center;gap:12px;color:var(--star);font-weight:500;font-size:14.5px;
  box-shadow:0 18px 44px rgba(0,0,0,.5);opacity:0;transition:.3s var(--ease);backdrop-filter:blur(12px);
}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;}
.toast .t-ico{width:24px;height:24px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff;}
.toast .t-ico svg{width:14px;height:14px;}

/* ============================================================
   CATALOG
   ============================================================ */
.catalog-head{padding:calc(var(--nav-h) + 56px) 0 30px;}
.catalog-head h1{font-family:var(--font-display);font-weight:700;color:var(--star);font-size:clamp(34px,5vw,56px);letter-spacing:-1.4px;line-height:1.02;margin-top:16px;}
.catalog-head p{color:var(--muted);font-size:16px;margin-top:14px;max-width:54ch;}
.catalog-layout{padding-bottom:90px;}
.filterbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.filter-pop-wrap{position:relative;display:inline-flex;}
.filter-trigger{display:inline-flex;align-items:center;gap:8px;}
.filter-trigger .fbchev{color:var(--muted);transition:transform .16s;}
.filter-trigger[aria-expanded="true"] .fbchev{transform:rotate(180deg);}
.filter-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:var(--grad);color:#fff;font-family:var(--font-mono);font-size:11px;font-weight:700;}
.filter-count[hidden]{display:none;}
.filters{
  position:absolute;top:calc(100% + 10px);left:0;z-index:60;
  display:none;flex-direction:column;gap:22px;
  width:290px;
  background:var(--navy-800);border:1px solid var(--glass-line);border-radius:16px;
  padding:22px;box-shadow:0 24px 60px rgba(0,0,0,.45);backdrop-filter:blur(var(--blur));
}
.filters.open{display:flex;}
body.light-mode .filters{background:#fff;border-color:rgba(11,20,55,.12);box-shadow:0 24px 60px rgba(20,34,76,.14);}
.filters-backdrop{position:fixed;inset:0;background:rgba(7,12,32,.55);z-index:50;display:none;}
.filters-backdrop:not([hidden]){display:block;}
.filter-group h4{font-family:var(--font-mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted-2);margin-bottom:14px;}
.filter-chips{display:flex;flex-direction:column;gap:6px;}
.filter-chips button{
  text-align:left;padding:10px 14px;border-radius:11px;font-size:14px;color:var(--silver);font-weight:500;
  display:flex;align-items:center;justify-content:space-between;transition:.16s;border:1px solid transparent;
}
.filter-chips button:hover{background:var(--glass);color:var(--star);}
.filter-chips button.active{background:var(--grad-soft);border-color:rgba(232,31,157,.35);color:var(--star);}
.filter-chips button .cnt{font-family:var(--font-mono);font-size:11px;color:var(--muted-2);}
.filter-chips button.active .cnt{color:var(--magenta-bright);}
.catalog-main .cat-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:16px;}
.catalog-main .cat-toolbar .res{font-family:var(--font-mono);font-size:13px;color:var(--muted);}
.catalog-main .cat-toolbar .res b{color:var(--star);}
.sortsel{display:flex;align-items:center;gap:10px;}
.sortsel select{
  background:var(--navy-800);
  border:1px solid var(--line);
  border-radius:11px;
  color:var(--star);
  padding:10px 34px 10px 14px;
  font-size:14px;
  cursor:pointer;
  color-scheme:dark;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238A93B6' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
}
.sortsel select option{
  background:var(--navy-800);
  color:var(--star);
}
.sortsel select:focus{outline:none;border-color:var(--magenta);}
body.light-mode .sortsel select{background:#fff;color:var(--navy-800);color-scheme:light;}
body.light-mode .sortsel select option{background:#fff;color:var(--navy-800);}
.chiprow{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px;}
.chiprow button{padding:9px 16px;border-radius:999px;font-size:13.5px;font-weight:500;color:var(--silver);
  background:rgba(255,255,255,.03);border:1px solid var(--line);transition:.16s;}
.chiprow button:hover{border-color:var(--magenta);color:var(--star);}
.chiprow button.active{background:var(--grad);color:#fff;border-color:transparent;}
.price-custom{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}
.price-custom-label{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted-2);margin-bottom:10px;}
.price-custom-row{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.price-custom-row input{width:0;flex:1;background:var(--glass);border:1px solid var(--line);border-radius:10px;
  color:var(--star);padding:9px 10px;font-size:13.5px;font-family:inherit;}
.price-custom-row input:focus{outline:none;border-color:var(--magenta);}
.price-custom-sep{color:var(--muted-2);font-size:13px;}
.price-apply{width:100%;justify-content:center;padding:9px 14px;font-size:13.5px;}
body.light-mode .price-custom-row input{background:#fff;border-color:rgba(11,20,55,.18);color:var(--navy-800);}
.active-filters{display:none;flex-wrap:wrap;gap:8px;align-items:center;margin:18px 0 -4px;}
.active-filters.show{display:flex;}
.af-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 10px 7px 14px;border-radius:999px;
  background:var(--grad-soft);border:1px solid rgba(232,31,157,.3);color:var(--star);font-size:13px;font-weight:500;}
.af-chip .af-x{color:var(--magenta-bright);font-size:11px;}
.af-clear{color:var(--muted);font-size:13px;text-decoration:underline;padding:6px 4px;}
.af-clear:hover{color:var(--star);}
/* Grilla estable: el tamaño de la tarjeta NO cambia según cuántos productos
   haya. auto-fill reserva columnas aunque queden vacías, por lo que una sola
   pieza no se estira a todo el ancho; el nº de columnas depende del ancho
   disponible, no de la cantidad de items ni del largo del nombre. */
.catalog-main .prod-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));align-content:start;}
.empty-state{padding:80px 20px;text-align:center;color:var(--muted);min-height:340px;}
.catalog-load-more{display:flex;justify-content:center;padding:32px 0 8px;}
.catalog-load-more .load-more-count{font-size:12.5px;color:var(--muted);margin-left:6px;font-family:var(--font-mono);}


/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.pd-wrap{padding:calc(var(--nav-h) + 20px) 0 48px;}
.breadcrumb{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:12px;color:var(--muted-2);margin-bottom:18px;flex-wrap:wrap;}
.breadcrumb a:hover{color:var(--magenta-bright);}
.breadcrumb .sep{opacity:.5;}
.pd-grid{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:34px;align-items:start;max-width:1080px;margin:0 auto;}
.pd-gallery{position:sticky;top:calc(var(--nav-h) + 16px);display:flex;flex-direction:column;gap:10px;}
.pd-main-img{aspect-ratio:1;border-radius:18px;overflow:hidden;border:1px solid var(--glass-line);position:relative;
  background:radial-gradient(circle at 35% 28%,rgba(155,39,224,.2),transparent 55%),
  repeating-linear-gradient(135deg,var(--navy-700) 0 16px,var(--navy-800) 16px 32px);
  display:flex;align-items:center;justify-content:center;}
.pd-main-img .ph-label{font-family:var(--font-mono);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted-2);
  border:1px dashed var(--line);border-radius:10px;padding:12px 18px;background:rgba(7,12,32,.4);}
.pd-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.pd-thumb{aspect-ratio:1;border-radius:12px;overflow:hidden;border:1px solid var(--line);cursor:pointer;transition:.18s;
  background:repeating-linear-gradient(135deg,var(--navy-700) 0 11px,var(--navy-800) 11px 22px);}
.pd-thumb.active{border-color:var(--magenta);box-shadow:0 0 0 2px rgba(232,31,157,.25);}
.pd-thumb:hover{border-color:rgba(232,31,157,.5);}
.pd-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;}
.pd-title-col{min-width:0;}
.pd-fav{flex:none;width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:var(--glass);
  display:flex;align-items:center;justify-content:center;color:var(--silver);transition:.16s;margin-top:2px;}
.pd-fav:hover{color:var(--magenta-bright);border-color:var(--magenta);}
.pd-fav.on{color:var(--magenta-bright);border-color:var(--magenta);background:rgba(232,31,157,.12);}
.pd-fav svg{width:17px;height:17px;}
.pd-info .pd-cat{font-family:var(--font-mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--magenta-bright);}
.pd-info h1{font-family:var(--font-display);font-weight:700;color:var(--star);font-size:clamp(21px,2.2vw,28px);letter-spacing:-.6px;line-height:1.08;margin:8px 0 0;}
.pd-rating{display:flex;align-items:center;gap:12px;margin:12px 0;}
.pd-rating .stars{display:flex;gap:3px;color:var(--magenta-bright);}
.pd-rating .stars svg{width:15px;height:15px;}
.pd-rating span{font-size:12.5px;color:var(--muted);}
.pd-price{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;}
.pd-price .now{font-family:var(--font-display);font-weight:700;color:var(--star);font-size:26px;letter-spacing:-.6px;}
.pd-price .was{font-size:16px;color:var(--muted-2);text-decoration:line-through;}
.pd-price .off{font-family:var(--font-mono);font-size:10.5px;background:var(--grad);color:#fff;padding:4px 9px;border-radius:8px;letter-spacing:.5px;}
.pd-desc{font-size:14px;color:var(--silver);line-height:1.6;margin-bottom:18px;text-wrap:pretty;}
.pd-opt{margin-bottom:16px;}
.pd-opt .opt-label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:9px;display:block;}
.pd-colors{display:flex;gap:10px;}
.pd-colors button{width:34px;height:34px;border-radius:10px;border:2px solid transparent;transition:.16s;position:relative;}
.pd-colors button.active{border-color:var(--star);}
.pd-sizes{display:flex;gap:8px;flex-wrap:wrap;}
.pd-sizes button{padding:9px 16px;border-radius:10px;border:1px solid var(--line);color:var(--silver);font-weight:600;font-family:var(--font-display);font-size:13px;transition:.16s;}
.pd-sizes button:hover{border-color:var(--magenta);color:var(--star);}
.pd-sizes button.active{background:var(--grad-soft);border-color:rgba(232,31,157,.5);color:var(--star);}
.pd-buy{display:flex;gap:12px;align-items:stretch;margin:18px 0 14px;}
.qty-stepper{display:flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:12px;padding:3px;background:var(--glass);}
.qty-stepper button{width:36px;height:36px;border-radius:9px;color:var(--silver);font-size:18px;display:flex;align-items:center;justify-content:center;transition:.15s;}
.qty-stepper button:hover{background:var(--glass-2);color:var(--star);}
.qty-stepper span{font-family:var(--font-mono);font-size:14px;color:var(--star);min-width:26px;text-align:center;}
.pd-specs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:6px;}
.pd-specs .sp{background:rgba(11,20,55,.5);padding:13px 16px;}
.pd-specs .sp .spk{font-family:var(--font-mono);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--magenta-bright);}
.pd-specs .sp .spv{color:var(--star);font-family:var(--font-display);font-weight:600;font-size:13.5px;margin-top:5px;}
.pd-trust{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;}
.pd-trust .pt{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--silver);}
.pd-trust .pt .pt-ico{color:var(--magenta-bright);display:flex;}
.pd-trust .pt svg{width:16px;height:16px;}
.related-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.related-actions .icon-btn{border:1px solid var(--line);background:var(--glass);}
.related-carousel{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,260px);
  grid-template-columns:none;overflow-x:auto;gap:18px;scroll-snap-type:x mandatory;padding-bottom:10px;
}
.related-carousel .prod{scroll-snap-align:start;}

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

/* ============================================================
   HERO BANNER SLIDER
   ============================================================ */
.hero-banner {
  position: relative;
  /* alineado al mismo ancho de contenido que el resto del body (.wrap: 1400px máx, gutter 32px) */
  margin-top: calc(var(--nav-h) + 20px);
  width:min(1336px,calc(100% - 64px));
  margin-left:auto;
  margin-right:auto;
  border-radius:22px;
  border:1px solid var(--line);
  overflow: hidden;
  background: var(--navy-900);
  /* evita que el fondo blanco del tercero parpadee */
  background-color: #000;
}
.hero-slider {
  display: flex;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.hero-slide {
  min-width: 100%;
  position: relative;
}
.hero-slide a {
  display: block;
  width: 100%;
}
.hero-slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
/* Barra inferior de navegación */
.hero-nav-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px 24px;
  background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 100%);
  pointer-events: none;
}
.hero-dots {
  display: flex;
  gap: 8px;
  align-items: center;
  pointer-events: all;
}
.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.35s ease,
              box-shadow 0.35s ease;
}
.hero-dot.active {
  width: 28px;
  background: var(--magenta, #e81f9d);
  box-shadow: 0 0 10px rgba(232, 31, 157, 0.55);
}
.hero-dot:hover:not(.active) {
  background: rgba(255, 255, 255, 0.65);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1080px){
  .prod-grid{grid-template-columns:repeat(3,1fr);}
  .footer-top{grid-template-columns:1fr 1fr;gap:30px;}
  .theme-switch-toggle{width:68px;}
}
@media(max-width:900px){
  .wrap{padding:0 24px;}
  .nav-links{display:none;}
  .burger{display:flex;}
  #profile-btn,#orders-btn,#notif-btn{display:none;}
  #fav-btn{display:none;}
  .nav-search{max-width:none;margin:0;}
  .btn-catalog span{display:none;}
  .btn-catalog{padding:10px 12px;}
  .hero[data-hero="split"] .hero-inner{flex-direction:column;text-align:center;}
  .hero[data-hero="split"] .hero-cta,.hero[data-hero="split"] .hero-chips{justify-content:center;}
  .hero[data-hero="split"] .hero-orbit{margin-top:40px;}
  .cat-grid{grid-template-columns:1fr 1fr;}
  .feature-strip{grid-template-columns:1fr 1fr;}
  .feature-strip .fs.fs--wide{grid-column:span 1;}
  .showcase-split{grid-template-columns:1fr;}
  .showcase-compact-grid{grid-template-columns:repeat(2,1fr);}
  .filters{
    position:fixed;top:auto;bottom:0;left:0;right:0;
    width:auto;border-radius:20px 20px 0 0;
    max-height:78vh;overflow:auto;
    box-shadow:0 -20px 50px rgba(0,0,0,.5);
  }
  .filterbar{gap:8px;}
  .catalog-main .prod-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));}
  .pd-grid{grid-template-columns:1fr;gap:32px;}
  .pd-gallery{position:static;}
  .hero-banner{width:calc(100% - 48px);border-radius:18px;margin-top:calc(var(--nav-h) + 16px);}
  .gift-band{grid-template-columns:1fr;}
  .offer-strip{align-items:flex-start;}
}
@media(max-width:600px){
  .prod-grid{grid-template-columns:1fr 1fr;gap:14px;}
  .catalog-main .prod-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;}
  .cat-grid{grid-template-columns:1fr;}
  .feature-strip{grid-template-columns:1fr;}
  .showcase-split{grid-template-columns:1fr;}
  .showcase-compact-grid{grid-template-columns:repeat(2,1fr);}
  #gift-results-grid{grid-template-columns:repeat(2,1fr);}
  .footer-top{grid-template-columns:1fr;}
  .pd-specs{grid-template-columns:1fr;}
  .prod .pname{font-size:15px;}
  .cta-banner{padding:44px 26px;}
  .hero-banner{width:calc(100% - 48px);border-radius:16px;margin-top:calc(var(--nav-h) + 12px);}
  .product-showcases{padding-top:22px;}
  .showcase-panel{padding:22px 16px;border-radius:18px;}
  .wide-carousel{grid-auto-columns:minmax(230px,82vw);}
  .gift-grid{grid-template-columns:1fr;}
  .offer-strip{padding:24px;}
  .float-actions{right:14px;bottom:14px;}
  .float-btn{width:48px;height:48px;}
  .float-tip{display:none;}
  .nav-logo img{height:34px;}
  .nav .wrap{gap:8px;padding:0 12px;}
  .nav-search{height:38px;padding:0 12px;max-width:none;}
  .nav-search input{font-size:12.5px;}
  .nav-actions{gap:4px;}
  .icon-btn{width:38px;height:38px;border-radius:10px;}
}


/* ============================================================
   CATÁLOGO EN LA HOME + CUENTA (v3)
   ============================================================ */
#catalogo{scroll-margin-top:84px;}
#nosotros{scroll-margin-top:84px;}
#catalogo .catalog-head h1{font-family:var(--font-display);font-weight:700;color:var(--star);font-size:clamp(30px,4vw,46px);letter-spacing:-1px;line-height:1.04;margin-top:14px;}
#catalogo .catalog-head p{color:var(--muted);font-size:16px;margin-top:14px;max-width:60ch;}

/* botones de cuenta en el header */
.nav-auth{padding:9px 16px;font-size:13.5px;border-radius:11px;}
.btn.ghost.nav-auth{border-width:1.3px;}
@media(max-width:980px){ .nav-auth{display:none;} }

/* modal de cuenta */
.auth-scrim{position:fixed;inset:0;z-index:110;background:rgba(4,7,18,.62);backdrop-filter:blur(5px);opacity:0;visibility:hidden;transition:.28s;}
.auth-scrim.open{opacity:1;visibility:visible;}
.auth-modal{position:fixed;z-index:120;left:50%;top:50%;transform:translate(-50%,-46%) scale(.97);opacity:0;visibility:hidden;
  width:min(420px,92vw);padding:34px 32px 28px;border-radius:22px;
  background:linear-gradient(180deg,var(--navy-850),var(--navy-900));border:1px solid var(--glass-line);
  box-shadow:0 30px 80px rgba(0,0,0,.55);transition:.3s var(--ease);}
.auth-modal.open{transform:translate(-50%,-50%) scale(1);opacity:1;visibility:visible;}
.auth-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:10px;color:var(--silver);display:flex;align-items:center;justify-content:center;border:1px solid transparent;transition:.16s;}
.auth-close:hover{background:var(--glass);border-color:var(--glass-line);color:var(--star);}
.auth-close svg{width:18px;height:18px;}
.auth-brand{display:flex;justify-content:center;margin-bottom:18px;}
.auth-brand img{height:34px;}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--glass);border:1px solid var(--line);border-radius:13px;padding:5px;margin-bottom:22px;}
.auth-tabs button{padding:10px;border-radius:9px;font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--silver);transition:.16s;}
.auth-tabs button.active{background:var(--grad);color:#fff;box-shadow:0 6px 16px rgba(155,39,224,.32);}
.auth-form{display:flex;flex-direction:column;gap:14px;}
.auth-providers{display:grid;gap:10px;margin-bottom:16px;}
.auth-providers button{
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--star);
  background:var(--glass);font-weight:700;transition:.16s;
}
.auth-providers button:hover{border-color:var(--magenta);background:var(--grad-soft);}
.auth-form label{display:flex;flex-direction:column;gap:7px;}
.auth-form label span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);}
.auth-form input{background:var(--glass);border:1px solid var(--line);border-radius:11px;padding:12px 14px;color:var(--star);font-size:14.5px;transition:.16s;}
.auth-form input::placeholder{color:var(--muted-2);}
.auth-form input:focus{outline:none;border-color:var(--magenta);background:rgba(232,31,157,.06);}
.auth-form .btn{margin-top:6px;}
.auth-note{margin-top:16px;text-align:center;font-size:12.5px;color:var(--muted-2);line-height:1.5;}

/* ============================================================
   NUEVO HEADER Y COMPONENTES (v3 Redesign)
   ============================================================ */
.btn-catalog {
  /* Aire alrededor del logo: separa el grupo Catalogo+Favoritos del logotipo
     para darle mas protagonismo. El margen va por el lado del logo, asi que
     NO acerca los botones a la busqueda (esa distancia la fija el gap del grid).
     Fluido: ~22px en escritorio, baja a ~10px en movil. */
  margin-left: clamp(10px, 1.6vw, 22px);
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  padding: 10px 18px;
  color: var(--star);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  transition: all .25s var(--ease);
  position: relative;
  overflow: hidden;
}
/* Resplandor periódico — pasa cada ~8 s */
@keyframes catalog-shine {
  0%   { transform: translateX(-220%) skewX(-18deg); opacity: 0; }
  4%   { opacity: 1; }
  12%  { transform: translateX(380%) skewX(-18deg); opacity: 0; }
  100% { transform: translateX(380%) skewX(-18deg); opacity: 0; }
}
.btn-catalog::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 100%
  );
  transform: translateX(-220%) skewX(-18deg);
  animation: catalog-shine 8s ease-in-out infinite;
  pointer-events: none;
}
.btn-catalog svg {
  width: 18px;
  height: 18px;
  color: var(--silver);
  transition: color .2s;
}
.btn-catalog:hover, .btn-catalog.active {
  background: rgba(232, 31, 157, 0.06);
  border-color: var(--magenta);
  box-shadow: 0 0 16px rgba(232, 31, 157, 0.2);
  color: var(--star);
}
.btn-catalog:hover svg, .btn-catalog.active svg {
  color: var(--magenta-bright);
}
/* En página de catálogo: indica página activa; hover del megamenú sigue activo */
.btn-catalog.catalog-active {
  background: rgba(232, 31, 157, 0.06);
  border-color: var(--magenta);
  box-shadow: 0 0 16px rgba(232, 31, 157, 0.15);
}

/* Botón Favoritos — igual que Catálogo pero sin animación de brillo */
.btn-fav {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  padding: 10px 18px;
  color: var(--star);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  transition: all .25s var(--ease);
}
.btn-fav svg {
  width: 18px;
  height: 18px;
  color: var(--silver);
  flex-shrink: 0;
  transition: color .2s;
}
.btn-fav:hover {
  background: rgba(232, 31, 157, 0.06);
  border-color: var(--magenta);
  box-shadow: 0 0 16px rgba(232, 31, 157, 0.2);
  color: var(--star);
}
.btn-fav:hover svg {
  color: var(--magenta-bright);
}

.nav-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(7, 12, 32, 0.5);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 0 16px;
  height: 42px;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  justify-self: center;
  transition: border-color .2s, background-color .2s;
}
.nav-search:focus-within {
  border-color: var(--magenta);
  background: rgba(232, 31, 157, 0.04);
}
.nav-search svg {
  width: 18px;
  height: 18px;
  color: var(--muted);
  flex-shrink: 0;
}
.nav-search input {
  border: none;
  background: none;
  outline: none;
  width: 100%;
  color: var(--star);
  font-size: 14px;
}
.nav-search input::placeholder {
  color: var(--muted-2);
}

.action-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--magenta-bright);
  box-shadow: 0 0 8px var(--magenta-bright);
}

/* ============================================================
   MEGAMENU CATALOG PANEL
   ============================================================ */
.megamenu-panel {
  position: fixed;
  top: var(--nav-h);
  left: 50%;
  transform: translateX(-50%) translateY(-15px) scale(0.97);
  width: calc(100% - 64px);
  max-width: var(--maxw);
  background: rgba(8, 13, 33, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-line);
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(155, 39, 224, 0.15);
  padding: 32px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  z-index: 58;
}
.megamenu-panel.open {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0) scale(1);
}
.megamenu-content {
  display: grid;
  grid-template-columns: 240px 230px 1fr;
  gap: 32px;
  height: 440px;
}
.mega-col-cats, .mega-col-subs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  padding-right: 12px;
  border-right: 1px solid var(--line);
}
.mega-col-cats::-webkit-scrollbar, .mega-col-subs::-webkit-scrollbar, .mega-prods-grid::-webkit-scrollbar {
  width: 5px;
}
.mega-col-cats::-webkit-scrollbar-thumb, .mega-col-subs::-webkit-scrollbar-thumb, .mega-prods-grid::-webkit-scrollbar-thumb {
  background: var(--line-soft);
  border-radius: 99px;
}
.mega-cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  border-radius: 12px;
  color: var(--silver);
  font-weight: 500;
  font-size: 14.5px;
  cursor: pointer;
  transition: all .2s var(--ease);
  border: 1px solid transparent;
}
.mega-cat-item:hover, .mega-cat-item.active {
  background: rgba(232, 31, 157, 0.08);
  border-color: rgba(232, 31, 157, 0.3);
  color: var(--magenta-bright);
}
.mega-cat-item svg {
  width: 15px;
  height: 15px;
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity .2s, transform .2s;
}
.mega-cat-item:hover svg, .mega-cat-item.active svg {
  opacity: 1;
  transform: translateX(0);
}

.mega-sub-item {
  padding: 11px 16px;
  border-radius: 12px;
  color: var(--silver);
  font-weight: 500;
  font-size: 14.5px;
  cursor: pointer;
  transition: all .2s var(--ease);
  border: 1px solid transparent;
}
.mega-sub-item:hover, .mega-sub-item.active {
  color: var(--magenta-bright);
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--line-soft);
}

.mega-col-prods {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}
.mega-col-prods h3 {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--silver);
  font-weight: 500;
  margin-bottom: 4px;
}
.mega-col-prods h3 strong {
  color: var(--star);
  font-weight: 700;
}
.mega-col-prods h3 span {
  color: var(--magenta-bright);
}
.mega-sep {
  color: var(--muted);
  margin: 0 4px;
}
.mega-prods-grid {
  display: grid;
  /* Columnas acotadas: máx 130px → tarjetas siempre compactas sin importar
     cuántos productos haya. Auto-fill rellena columnas de izq. a der. y
     align-content:start evita que pocas filas se estiren en el área alta. */
  grid-template-columns: repeat(auto-fill, minmax(90px, 130px));
  align-content: start;
  justify-content: start;
  gap: 14px;
  overflow-y: auto;
  padding-right: 8px;
  flex: 1;
}
.mega-prod-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  aspect-ratio: 1.1;
  background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.05) 100%);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  transition: all .24s var(--ease);
  cursor: pointer;
}
.mega-prod-card:hover {
  transform: translateY(-4px);
  border-color: rgba(232, 31, 157, 0.4);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3), 0 0 20px rgba(155, 39, 224, 0.1);
  background: linear-gradient(135deg, rgba(232,31,157,0.04) 0%, rgba(142,43,230,0.04) 100%);
}
.mp-icon-box {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-2);
  transition: color .2s, transform .24s;
}
.mega-prod-card:hover .mp-icon-box {
  color: var(--magenta-bright);
  transform: scale(1.08);
}
.mp-icon-box svg {
  width: 32px;
  height: 32px;
}
.mp-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--star);
  text-align: center;
}
.mega-empty-state {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--muted);
  font-size: 14.5px;
}
.mega-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
}
.mega-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--magenta-bright);
  transition: gap .18s;
}
.mega-footer-link:hover { gap: 12px; }
.mega-footer-link svg { width: 16px; height: 16px; }

/* ============================================================
   SIDEBAR MENU (FLOATING CONTEXT MENU DESIGN)
   ============================================================ */
.sidebar-scrim {
  position: fixed;
  inset: 0;
  background: transparent; /* Completely transparent scrim for click-outside closing */
  z-index: 95;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s var(--ease);
}
.sidebar-scrim.open {
  opacity: 1;
  visibility: visible;
}
.sidebar-menu {
  position: fixed;
  top: calc(var(--nav-h) + 10px);
  right: 40px;
  width: 250px; /* Snug width to fit menu content beautifully */
  height: auto;
  background: rgba(8, 13, 33, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-line);
  border-radius: 20px;
  z-index: 100;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: calc(100vh - var(--nav-h) - 30px);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(-10px) scale(0.95);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 25px rgba(155, 39, 224, 0.08);
}
.sidebar-menu.open {
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
}
.sidebar-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 12px;
}
.sidebar-links a {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  color: var(--silver);
  padding: 9px 12px;
  border-radius: 10px;
  transition: all .2s var(--ease);
}
.sidebar-links a:hover {
  color: var(--star);
  background: rgba(255, 255, 255, 0.04);
}
.sidebar-links a svg {
  width: 17px;
  height: 17px;
  vertical-align: -3px;
  margin-right: 7px;
  opacity: .85;
}

/* Acciones de cuenta del sidebar — solo en tablet/celular (íconos del header ocultos) */
.sidebar-account {
  display: none;
  flex-direction: column;
  gap: 4px;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 12px;
}
.sb-account-item {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  color: var(--silver);
  padding: 9px 12px;
  border-radius: 10px;
  transition: all .2s var(--ease);
}
.sb-account-item:hover { color: var(--star); background: rgba(255,255,255,0.04); }
.sb-account-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.sb-account-item > span:first-of-type { flex: 1; }
.sb-account-item .sb-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--grad); color: #fff; font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; display: none; align-items: center; justify-content: center; line-height: 1;
}
.sb-account-item .sb-badge.show { display: flex; }
.sb-account-item .sb-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--magenta-bright);
  box-shadow: 0 0 8px var(--magenta-bright);
}
/* Mostrar el bloque de cuenta cuando los íconos del header se ocultan (≤900px) */
@media (max-width: 900px) { .sidebar-account { display: flex; } }
.sidebar-theme-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 16px;
}
.sidebar-section-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-left: 4px;
}
.theme-switcher {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px;
}
.theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--silver);
  border: 1px solid transparent;
  transition: all .25s var(--ease);
}
.theme-btn:hover {
  color: var(--star);
}
.theme-btn.active {
  background: var(--glass-2);
  border-color: var(--glass-line);
  color: var(--star);
}
.theme-btn svg {
  width: 15px;
  height: 15px;
}
/* iconos de identidad: sol amarillo, luna morada (estilo minimal) */
.theme-btn .ico-sun { color: #F0B429; }
.theme-btn .ico-moon { color: var(--violet-bright); }
/* animación al activar cada tema */
.theme-btn.active .ico-sun { animation: ico-sunrise .55s var(--ease); }
.theme-btn.active .ico-moon { animation: ico-moonrise .55s var(--ease); }
@keyframes ico-sunrise {
  0%   { transform: rotate(-90deg) scale(.3); }
  65%  { transform: rotate(14deg) scale(1.18); }
  100% { transform: rotate(0) scale(1); }
}
@keyframes ico-moonrise {
  0%   { transform: rotate(75deg) scale(.3); }
  65%  { transform: rotate(-16deg) scale(1.15); }
  100% { transform: rotate(0) scale(1); }
}
.sidebar-secondary {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sec-link {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 10px;
  transition: color .2s, background-color .2s;
}
.sec-link:hover {
  color: var(--star);
  background: rgba(255, 255, 255, 0.03);
}
.sec-link svg {
  width: 17px;
  height: 17px;
}

@media (max-width: 600px) {
  .sidebar-menu {
    right: 16px;
    width: calc(100% - 32px);
    max-width: 250px;
  }
}

/* ============================================================
   LIGHT MODE STYLING
   ============================================================ */
body.light-mode {
  --navy-900: #EAF2FA; /* Fondo base: Celeste Cielo suave / Gris diurno */
  --navy-850: #FFFFFF; /* Superficie / tarjetas */
  --navy-800: #CFE3F6; /* Banda hero / cielo */
  --navy-700: #9FBFE2; /* Azul Niebla */
  --navy-600: #D9E9F9; /* Pista del selector / bordes */
  --navy-500: #FFFDF4; /* Knob del selector */
  --star: #0B1437;     /* Tinta Lunar - Texto principal */
  --silver: #42507E;   /* Texto secundario */
  --muted: #5C6B94;    /* Texto de apoyo */
  --muted-2: #7A89B0;
  --line: rgba(11, 20, 55, 0.14);
  --line-soft: rgba(11, 20, 55, 0.08);
  --glass: rgba(11, 20, 55, 0.05);
  --glass-2: rgba(11, 20, 55, 0.10);
  --glass-line: rgba(11, 20, 55, 0.15);
  --shadow-day: 0 2px 12px rgba(11, 20, 55, 0.10), 0 1px 3px rgba(11, 20, 55, 0.07);
  --shadow-day-lg: 0 8px 32px rgba(11, 20, 55, 0.14), 0 2px 8px rgba(11, 20, 55, 0.09);
  --grad: linear-gradient(125deg, #E5A8CD 0%, #B79CE4 100%); /* Rosa Bruma → Lila Pastel */
  --grad-rev: linear-gradient(305deg, #E5A8CD 0%, #B79CE4 100%);
  --grad-soft: linear-gradient(125deg, rgba(229, 168, 205, .12), rgba(183, 156, 228, .12));
  --footer-bg: linear-gradient(180deg, transparent, rgba(207, 227, 246, 0.6));
}
/* ---------- CIELO DIURNO (modo día — sutil, pastel) ----------
   Coreografía de transición (manual §09): la noche se retira primero
   (estrellas ~0–300ms) y el día entra con leve retardo (~250–600ms).
   Easing oficial cubic-bezier(.45,.05,.25,1). */
body{transition:background-color 1.8s var(--ease-theme);}
body.light-mode{transition:background-color 2.6s var(--ease-theme);}
#stars{transition:opacity 1.4s var(--ease-theme),visibility 1.4s;}
body.light-mode #stars{opacity:0;visibility:hidden;transition:opacity 1.8s var(--ease-theme),visibility 1.8s;}
.bg-glow{transition:opacity 1.6s var(--ease-theme);}
body.light-mode .bg-glow{opacity:0;transition:opacity 2.0s var(--ease-theme);}

/* Transición global mientras se cambia de apariencia (clase temporal, la agrega/quita
   app.js solo durante el toggle) — evita que el resto de la página (tarjetas, nav,
   footer, textos) "salte" de color de golpe. No queda activa el resto del tiempo,
   para no afectar otras transiciones/hover del sitio. */
body.theme-transitioning,
body.theme-transitioning *,
body.theme-transitioning *::before,
body.theme-transitioning *::after{
  transition-property:background-color,border-color,color,box-shadow,fill,stroke !important;
  transition-duration:1s !important;
  transition-timing-function:var(--ease-theme) !important;
}

#daysky{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:linear-gradient(180deg, #CFE3F6 0%, #EAF2FA 50%, #FBFAF7 100%);
  opacity:0;visibility:hidden;
  transition:opacity 1.8s var(--ease-theme) .1s,visibility 1.8s .1s;
}
body.light-mode #daysky{
  opacity:1;
  visibility:visible;
  transition:opacity 2.6s var(--ease-theme) .3s,visibility 2.6s .3s;
}

/* resplandor de sol — esquina superior derecha */
.ds-sunglow{
  position:absolute;top:-160px;right:-140px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle, rgba(244, 212, 136, 0.4) 0%, rgba(244, 212, 136, 0.12) 50%, transparent 72%);
  filter:blur(18px);
}
/* luna diurna — tenue pero presente: la luna sigue al mando (manual, sección 09) */
.ds-moon{
  position:absolute;top:11%;left:7%;width:116px;height:116px;
  opacity:0.32; /* luna de día: discreta protagonista, no compite con el contenido */
  mix-blend-mode: soft-light; /* se funde con el cielo azul sin recortarse */
  filter: drop-shadow(0 0 26px rgba(255,255,255,.5));
  animation:ds-moonfloat 26s var(--ease) infinite;
}
@keyframes ds-moonfloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}

/* Custom Theme Switch Toggle */
.theme-switch-toggle {
  position: relative;
  width: 78px;
  height: 40px;
  border-radius: 99px;
  background: #101B40;
  border: 1.5px solid var(--line);
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  outline: none;
  transition: background-color 1.8s cubic-bezier(.45, .05, .25, 1), border-color 1.8s;
  box-sizing: border-box;
  flex-shrink: 0;
}
.theme-switch-toggle:focus-visible {
  box-shadow: 0 0 0 2px var(--star), 0 0 0 4px var(--magenta);
}
body.light-mode .theme-switch-toggle {
  background: #D9E9F9;
  border-color: rgba(11, 20, 55, 0.15);
  transition: background-color 2.6s cubic-bezier(.45, .05, .25, 1), border-color 2.6s;
}
.tst-knob {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #1E2C5C;
  display: flex;
  align-items: center;
  justify-content: center;
  --knob-x: 0px;
  transform: translateX(var(--knob-x));
  transition: transform 1.8s var(--ease-theme), background-color .35s ease, box-shadow .35s ease;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
}
body.light-mode .tst-knob {
  background: #FFFDF4;
  --knob-x: 38px;
  box-shadow: 0 3px 8px rgba(11, 20, 55, 0.15);
  transition: transform 2.6s var(--ease-theme), background-color .35s ease, box-shadow .35s ease;
}
/* Durante el toggle de tema, la regla global de abajo (.theme-transitioning *)
   fuerza transition-property con !important y NO incluye "transform" — sin
   esto el círculo se "teletransporta" en vez de deslizarse. Esta regla,
   por ser más específica, gana y deja pasar el deslizamiento a la misma
   velocidad (1s) que el resto de los colores de la página durante el toggle. */
body.theme-transitioning .tst-knob{
  /* Bloquea la animación de "peek" del hover mientras dura el cambio de
     tema — si no, al seguir con el mouse encima del botón (lo normal, hay
     que estar encima para hacer clic) el :hover vuelve a disparar la
     animación apenas se cancela la anterior, y esa animación nueva arranca
     directo en la posición final en vez de interpolar, viéndose igual de
     "teletransportada". Con animation:none la transición de abajo queda
     como única dueña del transform durante todo el cambio de tema. */
  animation: none !important;
  transition-property: transform, background-color, box-shadow !important;
  transition-duration: 1s !important;
  transition-timing-function: var(--ease-theme) !important;
}
.tst-icon {
  position: absolute;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 1.2s ease, transform 1.5s cubic-bezier(.45, .05, .25, 1), color .35s ease;
}
body.light-mode .tst-icon {
  transition: opacity 1.8s ease, transform 2.2s cubic-bezier(.45, .05, .25, 1), color .35s ease;
}
.tst-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.tst-icon-moon {
  color: #C9B4F0;
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
.tst-icon-sun {
  color: #DFA92E;
  opacity: 0;
  transform: rotate(-45deg) scale(0.6);
}
body.light-mode .tst-icon-moon {
  opacity: 0;
  transform: rotate(45deg) scale(0.6);
}
body.light-mode .tst-icon-sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* Header integration */
.nav-actions .theme-switch-toggle {
  margin-right: 8px;
}
@media (max-width: 600px) {
  .theme-switch-toggle {
    width: 64px;
    height: 32px;
    padding: 3px;
  }
  .tst-knob {
    width: 24px;
    height: 24px;
  }
  body.light-mode .tst-knob {
    --knob-x: 32px;
  }
  .tst-icon {
    width: 13px;
    height: 13px;
  }
}

/* nubes reales: video timelapse (assets/clouds.mp4) muy sutil bajo un lavado
   pálido — aprobadas 2026-07-14, no tocar */
.ds-clouds{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.2;filter:blur(1.6px) brightness(1.14) saturate(.55) contrast(.82);
  transform:scale(1.04);
}
.ds-wash{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(207,227,246,.5) 0%, rgba(234,242,250,.5) 48%, rgba(251,250,247,.6) 100%);
}

/* ---------- ESTRELLAS FUGACES (modo noche) — capa + estela ----------
   Restaurado 2026-07-13: el bloque base de estas reglas se había perdido de
   styles.css (quedaba solo la de prefers-reduced-motion), por eso las fugaces
   dejaron de verse aunque el generador de app.js seguía activo. */
#shooting-stars{
  position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden;
  transition:opacity 1.2s var(--ease-theme), visibility 1.2s;
}
body.light-mode #shooting-stars{ opacity:0; visibility:hidden; } /* sin fugaces de día */
.shooting-star{           /* sutil y fina, sin destello en la punta (2026-07-14) */
  position:absolute; top:0; left:0; border-radius:99px;
  background:linear-gradient(90deg,
      rgba(224,232,255,0)   0%,
      rgba(224,232,255,.13) 52%,
      rgba(230,238,255,.46) 100%);
  box-shadow:0 0 3px rgba(210,224,255,.2);
  will-change:transform, opacity;
}

/* ---------- PÁJAROS DIURNOS (modo día) — bandada real con chroma key ----------
   app.js muestrea assets/birds.mp4 (fondo verde) en un buffer, recorta el
   verde, tiñe al azul de la paleta y dibuja sprites pequeños en este canvas.
   Vive dentro de #daysky, así que aparece/desaparece con el cielo diurno. */
.ds-birdcanvas{
  position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;
  filter:blur(.35px);opacity:.55;
}
.src-video{position:absolute;width:2px;height:2px;opacity:0;pointer-events:none;left:-10px;top:-10px;}
@media (prefers-reduced-motion: reduce){ .ds-birdcanvas,.src-video{display:none;} }


@media (prefers-reduced-motion: reduce){
  .ds-moon{animation:none;}
  .ds-clouds{display:none;}   /* sin video de nubes: queda el degradado del cielo */
}
/* movimiento reducido: el cambio de tema es instantáneo y sin animaciones (manual §09) */
@media (prefers-reduced-motion: reduce){
  body,#stars,.bg-glow,#daysky{transition:none !important;}
  .shooting-star{animation:none;display:none;}
}

/* Gift finder: transición suave al filtrar (reconstrucción 2026-06-12) */
.gift-finder-results .prod-grid{transition:opacity .18s ease;}
.gift-finder-results .prod-grid.fade-out{opacity:0;}

/* ---------- Sesión 2: fotos reales + estados sin precio ---------- */
/* Cuando llegue la foto real (sesión 3), la imagen llena el contenedor. */
.show-img img,.pd-main-img img,.mini-slide img{width:100%;height:100%;object-fit:cover;display:block;}

/* Botón de añadir deshabilitado en productos placeholder (sin precio). */
.pcart.disabled,.pcart:disabled{opacity:.4;cursor:not-allowed;pointer-events:none;}
.btn[disabled],.btn.primary[disabled]{opacity:.5;cursor:not-allowed;}

/* ============================================================
   SESIÓN 1 — Overrides de componentes en Modo Claro
   Regla: header oscuro permanece; resto adapta a paleta día.
   ============================================================ */

/* --- NAV MODO CLARO: "atardecer" ---
   Inicio: transparente sobre daysky (igual que noche sobre cosmos).
   Elementos en magenta/violeta — cálidos y legibles sobre celeste.
   Scroll: panel de vidrio claro que nace del propio celeste, sin azul oscuro.
   ----------------------------------------------------------- */

/* NAV base — transparente (el cielo es el fondo) */
body.light-mode .nav{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom-color:transparent;
}

/* NAV scrolled — vidrio claro, mismo tono que el daysky */
body.light-mode .nav.scrolled{
  background:rgba(234,242,250,.88);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
  border-bottom-color:rgba(11,20,55,.10);
}

/* Nav links: violeta funcional (legible + cálido sobre celeste) */
body.light-mode .nav-links a{
  color:#7B4FC8;
}
body.light-mode .nav-links a:hover{
  color:#9B27E0;
  background:rgba(123,79,200,.10);
}
body.light-mode .nav-links a.active{
  color:#0B1437;
}

/* Nav links scrolled: tinta lunar sobre fondo claro */
body.light-mode .nav.scrolled .nav-links a{
  color:#42507E;
}
body.light-mode .nav.scrolled .nav-links a:hover{
  color:#0B1437;
  background:rgba(11,20,55,.06);
}
body.light-mode .nav.scrolled .nav-links a.active{
  color:#0B1437;
}

/* Icon buttons: magenta (rosado atardecer) */
body.light-mode .icon-btn{
  color:#E81F9D;
}
body.light-mode .icon-btn:hover{
  color:#9B27E0;
  background:rgba(232,31,157,.10);
  border-color:rgba(232,31,157,.25);
}

/* Icon buttons scrolled: violeta sobrio */
body.light-mode .nav.scrolled .icon-btn{
  color:#7B4FC8;
}
body.light-mode .nav.scrolled .icon-btn:hover{
  color:#E81F9D;
  background:rgba(123,79,200,.10);
  border-color:rgba(123,79,200,.20);
}

/* Logo */
body.light-mode .logo-text{color:#0B1437;}
body.light-mode .nav.scrolled .logo-text{color:#0B1437;}

/* Botón Catálogo — aurora sobre cielo */
body.light-mode .btn-catalog{
  color:#7B4FC8;
  border-color:rgba(232,31,157,.50);
  background:rgba(232,31,157,.06);
}
body.light-mode .btn-catalog:hover,
body.light-mode .btn-catalog.active,
body.light-mode .btn-catalog.catalog-active{
  color:#9B27E0;
  background:rgba(232,31,157,.14);
  border-color:rgba(232,31,157,.75);
}

/* Botón Catálogo scrolled */
body.light-mode .nav.scrolled .btn-catalog{
  color:#7B4FC8;
  border-color:rgba(123,79,200,.40);
  background:rgba(123,79,200,.06);
}
body.light-mode .nav.scrolled .btn-catalog:hover{
  color:#0B1437;
  background:rgba(123,79,200,.12);
  border-color:rgba(123,79,200,.65);
}

/* Botón Favoritos — modo claro (igual que catálogo) */
body.light-mode .btn-fav{
  color:#7B4FC8;
  border-color:rgba(232,31,157,.50);
  background:rgba(232,31,157,.06);
}
body.light-mode .btn-fav:hover{
  color:#9B27E0;
  background:rgba(232,31,157,.14);
  border-color:rgba(232,31,157,.75);
}
body.light-mode .btn-fav:hover svg{
  color:#E81F9D;
}
body.light-mode .nav.scrolled .btn-fav{
  color:#7B4FC8;
  border-color:rgba(123,79,200,.40);
  background:rgba(123,79,200,.06);
}
body.light-mode .nav.scrolled .btn-fav:hover{
  color:#0B1437;
  background:rgba(123,79,200,.12);
  border-color:rgba(123,79,200,.65);
}

/* Barra de búsqueda — sobre cielo (top) */
body.light-mode .nav-search{
  background:rgba(11,20,55,.07);
  border-color:rgba(11,20,55,.18);
}
body.light-mode .nav-search-input{
  color:#0B1437;
}
body.light-mode .nav-search-input::placeholder{color:rgba(11,20,55,.40);}
body.light-mode .nav-search-btn{color:#7B4FC8;}
body.light-mode .nav-search-btn:hover{color:#E81F9D;}

/* Barra de búsqueda scrolled */
body.light-mode .nav.scrolled .nav-search{
  background:rgba(11,20,55,.06);
  border-color:rgba(11,20,55,.14);
}
body.light-mode .nav.scrolled .nav-search-input{color:#0B1437;}
body.light-mode .nav.scrolled .nav-search-btn{color:#7B4FC8;}

/* --- MEGAMENÚ: versión clara --- */
body.light-mode .megamenu-panel{
  background:rgba(255,255,255,.96);
  border-color:rgba(11,20,55,.12);
  box-shadow:0 24px 64px rgba(11,20,55,.14),0 2px 8px rgba(11,20,55,.08);
}
body.light-mode .megamenu-cat-title{color:#0B1437;}
body.light-mode .megamenu-link{color:#42507E;}
body.light-mode .megamenu-link:hover{color:#7B4FC8;background:rgba(123,79,200,.07);}
body.light-mode .megamenu-divider{border-color:rgba(11,20,55,.10);}
body.light-mode .megamenu-featured-label{color:#5C6B94;}

/* --- FEATURE STRIP (accesos rápidos): versión clara --- */
body.light-mode .feature-strip .fs{
  background:#FFFFFF;
  border:1px solid rgba(11,20,55,.12);
  box-shadow:var(--shadow-day);
}
body.light-mode .feature-strip .fs:hover{
  box-shadow:var(--shadow-day-lg);
  border-color:rgba(123,79,200,.25);
}
body.light-mode .fs-title{color:#0B1437;}
body.light-mode .fs-sub{color:#5C6B94;}
body.light-mode .fs-icon{color:#7B4FC8;}
/* Compact card — modo claro */
body.light-mode .compact-card{background:rgba(255,255,255,.80);border-color:rgba(11,20,55,.10);}
body.light-mode .compact-card:hover{border-color:var(--magenta);box-shadow:0 2px 14px rgba(11,20,55,.10);}
body.light-mode .cc-name{color:var(--tinta,#0B1437);}
body.light-mode .cc-ph{color:rgba(11,20,55,.15);}
body.light-mode .showcase-promo-banner{background:linear-gradient(135deg,rgba(232,31,157,.07),rgba(155,39,224,.05));border-color:rgba(232,31,157,.18);}
body.light-mode .showcase-promo-banner h3{color:var(--tinta,#0B1437);}
body.light-mode .mini-slide{background:rgba(11,20,55,.05);}
body.light-mode .fav-pop-item:hover{background:rgba(11,20,55,.06);}

/* --- TARJETAS DE PRODUCTO: profundidad en claro --- */
body.light-mode .prod-card{
  background:#FFFFFF;
  border-color:rgba(11,20,55,.10);
  box-shadow:var(--shadow-day);
}
body.light-mode .prod-card:hover{
  box-shadow:var(--shadow-day-lg);
  border-color:rgba(123,79,200,.20);
}
body.light-mode .prod-name{color:#0B1437;}
body.light-mode .prod-price{color:#7B4FC8;}
body.light-mode .prod-cat{color:#5C6B94;}

/* --- MENÚ HAMBURGUESA: superficie clara coherente con el modo claro --- */
body.light-mode .sidebar-menu{
  background:rgba(255,255,255,.98);
  border-color:rgba(11,20,55,.12);
  box-shadow:0 20px 50px rgba(11,20,55,.16),0 2px 8px rgba(11,20,55,.08);
}
body.light-mode .sidebar-links a:hover,
body.light-mode .sb-account-item:hover{ background:rgba(11,20,55,.05); color:#0B1437; }

/* --- BOTÓN SCROLL-TOP: discreto oscuro en claro --- */
body.light-mode .scroll-top{
  background:rgba(11,20,55,.70);
  color:#F5F6FB;
  border-color:rgba(11,20,55,.25);
}
body.light-mode .scroll-top:hover{
  background:rgba(11,20,55,.88);
}

/* --- SECCIONES Y FONDOS GENERALES --- */
body.light-mode .section-title{color:#0B1437;}
body.light-mode .section-sub{color:#42507E;}

/* Hero banner: borde sutil en modo claro */
body.light-mode .hero-banner{
  border-color:rgba(11,20,55,.12);
  box-shadow:var(--shadow-day-lg);
}

/* Carrusel dots en claro */
body.light-mode .slider-dot{background:rgba(11,20,55,.25);}
body.light-mode .slider-dot.active{background:#7B4FC8;}

/* Gift Finder */
body.light-mode .gf-tag{
  background:#FFFFFF;
  border-color:rgba(11,20,55,.12);
  color:#0B1437;
}
body.light-mode .gf-tag:hover,
body.light-mode .gf-tag.active{
  background:#7B4FC8;
  border-color:#7B4FC8;
  color:#FFFFFF;
}

/* Footer en claro */
body.light-mode footer{
  border-top:1px solid rgba(11,20,55,.10);
}
body.light-mode .footer-link{color:#42507E;}
body.light-mode .footer-link:hover{color:#7B4FC8;}
body.light-mode .footer-copy{color:#5C6B94;}


/* ========================================================================
   S4 — Categorias "Encuentra tu producto"
   ======================================================================== */

.cat-hero {
  display: grid;
  grid-template-columns: 1fr 1.65fr;
  gap: 48px;
  align-items: center;
  padding: clamp(36px, 5vw, 56px);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  border: 1px solid var(--glass-line);
  position: relative;
  overflow: hidden;
}
.cat-hero::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -80px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(155,39,224,.15), transparent 65%);
  pointer-events: none;
  filter: blur(20px);
}
.cat-hero-left {
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  z-index: 1;
}
.cat-hero-left .section-title {
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1.05;
}
.cat-hero-left > p {
  color: var(--silver);
  font-size: 16px;
  line-height: 1.6;
  max-width: 32ch;
}
.cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  position: relative;
  z-index: 1;
}
.cat-tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 18px;
  border-radius: 18px;
  text-decoration: none;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  position: relative;
  overflow: hidden;
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.cat-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(60% 80% at 85% 115%, var(--cat-glow, #E81F9D), transparent 65%);
  opacity: .18;
  transition: opacity .25s var(--ease);
  pointer-events: none;
}
.cat-tile[data-cat="maceteros"]   { --cat-glow: #00C896; --cat-glow-sh: rgba(0,200,150,.22); }
.cat-tile[data-cat="decoracion"]  { --cat-glow: #E81F9D; --cat-glow-sh: rgba(232,31,157,.22); }
.cat-tile[data-cat="llaveros"]    { --cat-glow: #F0C050; --cat-glow-sh: rgba(240,192,80,.22); }
.cat-tile[data-cat="cultura-pop"] { --cat-glow: #9B27E0; --cat-glow-sh: rgba(155,39,224,.22); }
.cat-tile[data-cat="oficina"]     { --cat-glow: #60A5FA; --cat-glow-sh: rgba(96,165,250,.22); }
.cat-tile[data-cat="custom"]      { --cat-glow: #E81F9D; --cat-glow-sh: rgba(232,31,157,.22); }
.cat-tile:hover {
  transform: translateY(-4px);
  border-color: var(--cat-glow, var(--magenta));
  box-shadow: 0 16px 36px rgba(0,0,0,.28), 0 0 28px var(--cat-glow-sh, rgba(232,31,157,.2));
}
.cat-tile:hover::before { opacity: .30; }
.cat-tile-icon { font-size: 28px; line-height: 1; margin-bottom: 2px; }
.cat-tile-name { font-family: var(--font-display); font-weight: 700; color: var(--star); font-size: 15.5px; line-height: 1.2; }
.cat-tile-desc { font-size: 12px; color: var(--muted); line-height: 1.4; }

body.light-mode .cat-hero {
  background: #FFFFFF;
  border-color: rgba(11,20,55,.10);
  box-shadow: var(--shadow-day);
}
body.light-mode .cat-tile {
  background: #FFFFFF;
  border-color: rgba(11,20,55,.10);
}
body.light-mode .cat-tile:hover {
  box-shadow: 0 12px 28px rgba(11,20,55,.12), 0 0 24px var(--cat-glow-sh, rgba(232,31,157,.15));
}
body.light-mode .cat-tile-name { color: #0B1437; }
body.light-mode .cat-tile-desc { color: #5C6B94; }

@media (max-width: 900px) {
  .cat-hero { grid-template-columns: 1fr; }
  .cat-grid  { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .cat-grid  { grid-template-columns: repeat(2, 1fr); }
}


/* ========================================================================
   S5 — Oferta de la semana (banner integrado con countdown)
   ======================================================================== */

.offer-hero-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: clamp(28px, 4vw, 40px) clamp(28px, 4vw, 44px);
  border-radius: 22px;
  margin-bottom: 24px;
  background: linear-gradient(110deg, rgba(232,31,157,.20), rgba(11,20,55,.65) 52%, rgba(155,39,224,.16));
  border: 1px solid rgba(232,31,157,.28);
  position: relative;
  overflow: hidden;
}
.offer-hero-banner::before {
  content: "";
  position: absolute;
  right: -40px;
  top: -50px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(232,31,157,.28), transparent 65%);
  pointer-events: none;
  filter: blur(8px);
}
.offer-hero-text { flex: 1 1 280px; position: relative; }
.offer-hero-text .section-title { font-size: clamp(24px, 3.2vw, 38px); }
.offer-hero-text .lead { margin-top: 10px; font-size: 15px; max-width: 55ch; }
.offer-hero-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(232,31,157,.35);
  border-radius: 16px;
  padding: 18px 28px;
  flex-shrink: 0;
  position: relative;
}
.offer-hero-timer .timer-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--magenta-bright, #E81F9D);
}
.offer-hero-timer .timer-clock {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--star);
  font-size: clamp(20px, 3.5vw, 32px);
  letter-spacing: -0.5px;
  white-space: nowrap;
}

body.light-mode .offer-hero-banner {
  background: linear-gradient(110deg, rgba(232,31,157,.10), rgba(207,227,246,.75) 52%, rgba(155,39,224,.07));
  border-color: rgba(232,31,157,.20);
}
body.light-mode .offer-hero-timer {
  background: rgba(255,255,255,.75);
  border-color: rgba(232,31,157,.25);
}
body.light-mode .offer-hero-timer .timer-clock { color: #0B1437; }

@media (max-width: 600px) {
  .offer-hero-banner { flex-direction: column; align-items: flex-start; }
  .offer-hero-timer  { width: 100%; align-items: center; }
}


/* ========================================================================
   S5 — FAQ centrada y compacta
   ======================================================================== */

.faq-list { gap: 10px; max-width: 760px; margin: 0 auto; }


/* ========================================================================
   S5 — Newsletter footer mas discreta
   ======================================================================== */

.footer-newsletter { margin-top: 36px; padding: 22px 30px; border-radius: 18px; }
.fn-title { font-size: 20px; }
@media (max-width: 1024px) { .footer-newsletter { padding: 20px 24px; } }
@media (max-width: 768px)  { .footer-newsletter { flex-direction: column; align-items: flex-start; gap: 16px; padding: 18px 20px; } }

/* ============================================================
   SESIÓN 6 — Footer + Botones flotantes
   ============================================================ */

/* --- Footer inferior: ocultar logo pequeño del fb-left --- */
.footer-bottom .fb-left .brand-logo { display: none; }

/* Copyright alineado a la izquierda */
.footer-bottom { justify-content: space-between; }

/* --- Botones flotantes: WA comienza abajo, sube al aparecer scroll-top --- */
/* WA usa CSS var --wa-y para posición desplazada por defecto (scroll-top oculto
   no ocupa espacio en el DOM, por lo que WA naturalmente queda abajo;
   el translateY se usa solo para combinar hover sin conflicto) */
.whatsapp-float {
  --wa-y: 0px;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), filter .22s var(--ease);
}
/* Cuando scroll-top es visible: WA ya está en posición natural (flex lo empuja arriba);
   la transición suave la da el layout + la clase wa-up es señal para el hover */
.whatsapp-float.wa-up { --wa-y: 0px; }

/* Hover: mantener el efecto existente independiente del estado wa-up */
.float-btn.whatsapp-float:hover { transform: translateY(-3px) scale(1.02); }

/* scroll-top: animación de entrada más vistosa (scale + slide desde abajo) */
.scroll-top {
  transform: scale(.75) translateY(10px);
  transition: opacity .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1), visibility .01s;
}
.scroll-top.show {
  transform: scale(1) translateY(0);
}

/* --- S6 corrección: WA realmente comienza abajo (translateY ocupa la posición del scroll-top) --- */
/* Con visibility:hidden, scroll-top SIEMPRE ocupa espacio en el flex.
   translateY(66px) mueve WA abajo para coincidir visualmente con scroll-top oculto.
   Al aparecer scroll-top (.wa-up), WA hace slide up a su posición natural. */
.whatsapp-float {
  --wa-y: 66px; /* 54px btn + 12px gap = altura de scroll-top + gap */
  transform: translateY(var(--wa-y));
  /* transition ya definida en el bloque anterior */
}
.whatsapp-float.wa-up { --wa-y: 0px; }

/* Hover combinado: respeta la posición actual de WA */
.float-btn.whatsapp-float:hover {
  transform: translateY(calc(var(--wa-y) - 3px)) scale(1.02);
}

/* Mobile (≤560px): float-btn es 48px → offset = 48+12 = 60px */
@media (max-width: 560px) {
  .whatsapp-float { --wa-y: 60px; }
}

/* ============================================================
   GALERÍA HOME (nuevo body) — poster + 6 productos × 4 bloques
   Añadido 2026-06-18. Reusa tokens de marca. El alto del poster
   calza con el grid de 6 (align-items:stretch + sin min-height).
   ============================================================ */
.gallery-block{padding:46px 0;}
.gb-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:24px;align-items:stretch;}
.gb-split.reverse{grid-template-columns:1.15fr .85fr;}
.gb-split.reverse .gb-poster{order:2;}
.gb-split.reverse .gb-products{order:1;}

/* Poster = la "imagen llamativa". Para usar foto real:
   añadir background-image en la clase poster-* correspondiente. */
.gb-poster{position:relative;border-radius:22px;overflow:hidden;
  border:1px solid var(--glass-line);display:flex;flex-direction:column;
  justify-content:flex-end;padding:30px;text-decoration:none;
  background-size:cover;background-position:center;isolation:isolate;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);}
.gb-poster:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.4);}
.gb-poster::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(7,12,32,.05) 0%,rgba(7,12,32,.78) 100%);}
.p-kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:2px;
  text-transform:uppercase;color:#fff;background:rgba(232,31,157,.85);
  padding:6px 12px;border-radius:50px;align-self:flex-start;margin-bottom:14px;}
.gb-poster h3{font-family:var(--font-display);color:#fff;font-size:clamp(22px,2.4vw,30px);
  line-height:1.12;margin-bottom:8px;text-shadow:0 2px 18px rgba(0,0,0,.5);}
.gb-poster p{color:rgba(255,255,255,.82);max-width:30ch;margin-bottom:18px;font-size:14px;}

/* Fondos de poster (placeholders aurora; reemplazables por foto). */
.poster-nuevos{background-image:radial-gradient(circle at 70% 20%,rgba(155,39,224,.55),transparent 55%),linear-gradient(140deg,#1a0a2e,#2d1269);}
.poster-vendidos{background-image:radial-gradient(circle at 30% 25%,rgba(232,31,157,.5),transparent 55%),linear-gradient(140deg,#0a1628,#1a3a5c);}
.poster-regalos{background-image:radial-gradient(circle at 60% 30%,rgba(247,47,184,.5),transparent 55%),linear-gradient(140deg,#1e0a2e,#4a0060);}

/* Columna de productos */
.gb-products{display:flex;flex-direction:column;}
.gb-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:18px;flex-wrap:wrap;}
.gb-head .kicker{margin-bottom:10px;}
.gb-head .section-title{font-size:clamp(20px,2vw,26px);margin:0;}
.prod6{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;flex:1;}

/* Bloque 4: banner ancho + 6 abajo */
.gb-banner{position:relative;border-radius:22px;overflow:hidden;padding:30px 32px;
  border:1px solid var(--glass-line);margin-bottom:22px;display:flex;
  justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  background:radial-gradient(circle at 80% 0%,rgba(232,31,157,.4),transparent 55%),linear-gradient(120deg,#16021f,#1a2870);}
.gb-timer{font-family:var(--font-mono);color:#fff;background:rgba(0,0,0,.3);
  padding:10px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.18);font-size:15px;white-space:nowrap;}
.prod6.wide{grid-template-columns:repeat(6,1fr);}

/* Modo día */
body.light-mode .gb-poster::after{background:linear-gradient(180deg,rgba(11,20,55,.02) 0%,rgba(11,20,55,.55) 100%);}

/* Responsive */
@media(max-width:980px){
  .gb-split,.gb-split.reverse{grid-template-columns:1fr;}
  .gb-split.reverse .gb-poster{order:0;}
  .gb-split.reverse .gb-products{order:0;}
  .gb-poster{min-height:280px;}
  .prod6.wide{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:560px){
  .prod6,.prod6.wide{grid-template-columns:repeat(2,1fr);}
}

/* ---- Galería: tarjetas placeholder inventadas ("FOTO" rayado) + descuento ---- */
.prod6 .cc-img{position:relative;}
.cc-placeholder{cursor:default;}
.cc-placeholder:hover{transform:none;border-color:var(--line);box-shadow:none;}
/* Fondo rayado tipo "sin foto aún" */
.cc-ph-striped{
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 10px,rgba(255,255,255,.015) 10px 20px),
    linear-gradient(135deg,rgba(232,31,157,.10),rgba(155,39,224,.10));
}
.cc-foto{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  width:100%;height:100%;color:rgba(255,255,255,.32);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;}
.cc-foto svg{width:28px;height:28px;opacity:.5;}
/* Badge de descuento (esquina superior derecha) */
.cc-badge{position:absolute;top:8px;right:8px;z-index:2;
  font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.04em;
  color:#fff;background:var(--grad);padding:4px 9px;border-radius:50px;
  box-shadow:0 4px 12px rgba(232,31,157,.45);}
body.light-mode .cc-foto{color:rgba(11,20,55,.35);}
body.light-mode .cc-ph-striped{
  background:
    repeating-linear-gradient(45deg,rgba(11,20,55,.05) 0 10px,rgba(11,20,55,.02) 10px 20px),
    linear-gradient(135deg,rgba(232,31,157,.08),rgba(155,39,224,.06));
}

/* ============================================================
   AJUSTES 2026-06-18 (#2): galería -20% + FAQ centrada/animada
   ============================================================ */

/* 1) Galería ~20% más pequeña: se reduce proporcionalmente el ancho
      del contenedor (poster y tarjetas encogen juntos) + menos aire. */
.gallery-block{padding:34px 0;}
.gallery-block .wrap{max-width:1120px;}
.gb-split{gap:22px;}
.prod6{gap:14px;}

/* 2) FAQ — centrada, con animación de despliegue y más vida */
.faq-section .block-head{margin-bottom:26px;}
.faq-section .faq-list{max-width:720px;margin-left:auto;margin-right:auto;width:100%;}

.faq-item{
  border:1px solid var(--line);border-radius:16px;background:var(--glass);overflow:hidden;
  transition:border-color .22s var(--ease),background .22s var(--ease),
             box-shadow .22s var(--ease),transform .22s var(--ease);
}
.faq-item:hover{border-color:rgba(232,31,157,.45);background:var(--glass-2);transform:translateY(-1px);}

.faq-item summary{
  list-style:none;display:flex;align-items:center;gap:14px;cursor:pointer;
  padding:18px 22px;font-family:var(--font-display);font-weight:600;font-size:15px;
  color:var(--star);transition:color .2s var(--ease);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary span{
  width:30px;height:30px;border-radius:9px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  color:#fff;background:var(--grad);transition:transform .28s var(--ease);
}
.faq-item summary svg{width:15px;height:15px;}

/* Estado abierto: acento de marca + ícono que gira de + a × */
.faq-item[open]{border-color:transparent;background:var(--grad-soft);
  box-shadow:0 12px 32px rgba(232,31,157,.12);}
.faq-item[open] summary{color:var(--magenta-bright);}
.faq-item[open] summary span{transform:rotate(45deg);}
.faq-item[open] summary svg{transform:none;}

/* Respuesta: aparece con un slide + fade suave */
.faq-item p{
  margin:0;padding:0 22px 20px 66px;color:var(--silver);max-width:none;line-height:1.65;
  animation:faqReveal .3s var(--ease);
}
@keyframes faqReveal{
  from{opacity:0;transform:translateY(-8px);}
  to{opacity:1;transform:translateY(0);}
}

body.light-mode .faq-item[open]{box-shadow:0 8px 24px rgba(232,31,157,.14);}

/* Galería responsive: en pantallas chicas vuelve a ancho completo */
@media(max-width:1180px){ .gallery-block .wrap{max-width:100%;} }

/* ============================================================
   AJUSTES 2026-06-18 (#3)
   - Galería al MISMO ancho que las 3 imágenes de arriba (1280)
   - Bloques invertidos: el grid de 6 va al lado correcto
   - Poster un poco más ancho; encabezado arriba (proporciones iguales)
   - FAQ: pregunta centrada + apertura más lenta
   ============================================================ */

/* Ancho idéntico a .l3d-wrap (1280 / padding 24) */
.gallery-block .wrap{max-width:1280px;padding-left:24px;padding-right:24px;}
@media(max-width:1180px){ .gallery-block .wrap{max-width:100%;} }

/* Poster un poco más ancho; el alto sale del grid de 6 (iguales entre sí) */
.gb-split{grid-template-columns:1fr 1.3fr;gap:22px;align-items:stretch;}
.gb-split.reverse{grid-template-columns:1.3fr 1fr;}
.gb-split.reverse .gb-poster{order:2;}
.gb-split.reverse .prod6{order:1;}

/* ----- FAQ: texto centrado (el ícono +/× flota a la derecha) ----- */
.faq-item summary{
  justify-content:center;text-align:center;position:relative;
  gap:0;padding:18px 56px;
}
.faq-item summary span{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  transition:transform .3s var(--ease);
}
.faq-item[open] summary span{transform:translateY(-50%) rotate(45deg);}

/* Respuesta centrada y con apertura MÁS LENTA (slide + fade) */
.faq-item p{
  text-align:center;max-width:600px;margin:0 auto;
  padding:0 40px 22px;overflow:hidden;
  animation:faqReveal .55s var(--ease);
}
@keyframes faqReveal{
  0%{opacity:0;max-height:0;transform:translateY(-6px);}
  100%{opacity:1;max-height:600px;transform:translateY(0);}
}

/* ============================================================
   AJUSTES 2026-06-18 (#4)
   - Footer al mismo ancho que la galería (1280)
   - FAQ: oculta tras un botón "?"; cajas más angostas y centradas
   ============================================================ */

/* Footer al mismo ancho del contenido (1280 / padding 24) */
.footer .wrap{max-width:1280px;padding-left:24px;padding-right:24px;}

/* ----- FAQ: botón "?" que despliega las preguntas ----- */
.faq-cta-wrap{display:flex;justify-content:center;}
.faq-cta{
  display:inline-flex;align-items:center;gap:16px;cursor:pointer;
  padding:12px 24px 12px 12px;border-radius:60px;
  background:var(--glass);border:1px solid var(--glass-line);
  transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
}
.faq-cta:hover{transform:translateY(-2px);border-color:var(--magenta);
  background:var(--glass-2);box-shadow:0 16px 38px rgba(232,31,157,.22);}
.faq-cta-mark{
  width:48px;height:48px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:25px;line-height:1;color:#fff;
  background:var(--grad);box-shadow:0 0 0 6px rgba(232,31,157,.14);
  animation:faqPulse 2.6s var(--ease) infinite;
}
@keyframes faqPulse{
  0%,100%{box-shadow:0 0 0 6px rgba(232,31,157,.14);}
  50%{box-shadow:0 0 0 13px rgba(232,31,157,.03);}
}
.faq-cta-txt{display:flex;flex-direction:column;text-align:left;gap:2px;}
.faq-cta-txt b{font-family:var(--font-display);color:var(--star);font-size:16px;font-weight:600;}
.faq-cta-txt small{color:var(--muted);font-size:12.5px;}
.faq-cta-chev{margin-left:4px;color:var(--magenta-bright);display:flex;
  transition:transform .3s var(--ease);}
.faq-cta-chev svg{width:18px;height:18px;display:block;}
.faq-cta.active .faq-cta-chev{transform:rotate(180deg);}
.faq-cta.active .faq-cta-mark{animation:none;box-shadow:0 0 0 5px rgba(232,31,157,.20);}

/* Lista oculta por defecto; aparece al abrir, más angosta y centrada */
.faq-section .faq-list{display:none;max-width:560px;margin:24px auto 0;}
.faq-section.faq-open .faq-list{display:grid;animation:faqListIn .45s var(--ease);}
@keyframes faqListIn{
  from{opacity:0;transform:translateY(-10px);}
  to{opacity:1;transform:translateY(0);}
}
/* T14: Accesibilidad */
:focus-visible {
  outline: 2px solid var(--magenta-bright);
  outline-offset: 2px;
}
body.light-mode .btn.primary,
body.light-mode .prod .pcart {
  background: var(--navy-800);
  color: #fff;
}
body.light-mode .kicker,
body.light-mode .prod .pcat,
body.light-mode .prod .ci-price {
  color: var(--violet); 
}

/* Estilos para legal.html */
.legal-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 0;
}
.legal-notice {
  background: var(--glass);
  border: 1px solid var(--magenta);
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 32px;
  color: var(--silver);
  font-size: 14px;
}
.legal-index {
  margin-bottom: 40px;
  background: var(--glass);
  padding: 24px;
  border-radius: 16px;
  border: 1px solid var(--glass-line);
}
.legal-index ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.legal-index a {
  color: var(--magenta-bright);
  font-weight: 500;
}
.legal-index a:hover {
  text-decoration: underline;
}
.legal-section {
  margin-bottom: 40px;
  scroll-margin-top: 100px;
}
.legal-section h2 {
  font-family: var(--font-display);
  color: var(--star);
  font-size: 28px;
  margin-bottom: 20px;
}
.legal-section h3 {
  font-family: var(--font-display);
  color: var(--star);
  font-size: 20px;
  margin-top: 24px;
  margin-bottom: 12px;
}
.legal-section p, .legal-section ul {
  color: var(--silver);
  margin-bottom: 16px;
  line-height: 1.6;
}
.legal-section ul {
  padding-left: 24px;
}
.legal-divider {
  border: 0;
  border-top: 1px solid var(--glass-line);
  margin: 40px 0;
}
body.light-mode .legal-notice,
body.light-mode .legal-index {
  background: #fff;
  color: #42507E;
}
body.light-mode .legal-section h2,
body.light-mode .legal-section h3 {
  color: #0B1437;
}
body.light-mode .legal-section p,
body.light-mode .legal-section ul {
  color: #42507E;
}

/* ============================================================
   CUENTAS DE USUARIO (Sesión 6) — error del modal + página "Mi cuenta"
   Reutiliza tokens existentes; agrega --danger/--success tematizados.
   ============================================================ */
:root{ --danger:#FF6B81; --success:#2EC28A; }
body.light-mode{ --danger:#C81E4A; --success:#179467; }

.auth-error{ color:var(--danger); background:var(--glass-2); border:1px solid var(--danger);
  border-radius:12px; padding:10px 12px; margin:2px 0 4px; font-size:.9rem; font-weight:600; text-align:center; }
.auth-error[hidden]{ display:none; }

.account-wrap{ max-width:880px; margin:0 auto; }
.account-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:8px; }
.acct-hello{ display:block; color:var(--muted); font-family:var(--font-mono); font-size:.85rem; margin-top:4px; }
.account-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:18px; }
@media (max-width:760px){ .account-grid{ grid-template-columns:1fr; } }

.acct-card{ background:var(--glass); border:1px solid var(--line); border-radius:18px; padding:22px; }
.acct-card h2{ font-family:var(--font-display); font-size:1.15rem; color:var(--star); margin-bottom:14px; }

.acct-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.acct-field label{ font-size:.82rem; color:var(--muted); font-weight:600; }
.acct-field input{ width:100%; padding:11px 13px; border-radius:12px; background:var(--glass-2);
  border:1px solid var(--line); color:var(--star); font-family:var(--font-body); font-size:.95rem; }
.acct-field input:focus{ outline:none; border-color:var(--magenta); }
body.light-mode .acct-field input{ background:#fff; border-color:rgba(11,20,55,.2); color:#0B1437; }

.acct-msg{ font-size:.85rem; color:var(--muted); min-height:1.2em; margin-top:4px; }
.acct-msg.ok{ color:var(--success); }
.acct-msg.err{ color:var(--danger); }

.orders-list{ display:flex; flex-direction:column; gap:12px; }
.order-item{ border:1px solid var(--line); border-radius:14px; padding:14px 16px; background:var(--glass-2); }
.order-item .oi-top{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.order-item .oi-total{ font-weight:800; color:var(--star); }
.order-item .oi-date{ font-family:var(--font-mono); font-size:.8rem; color:var(--muted); }
.order-item .oi-items{ color:var(--silver); font-size:.9rem; margin-top:6px; }
.orders-empty{ color:var(--muted); padding:8px 0; line-height:1.5; }

.account-gate{ text-align:center; padding:48px 16px; }
.account-gate p{ color:var(--silver); margin:14px 0 18px; }


/* ============================================================
   HEADER v3.1 — AUDITORÍA UX (popovers, notificaciones, focus, contraste)
   ============================================================ */

/* --- Estados vacíos y "mini" de los popovers (favoritos, cuenta, compras) --- */
.pop-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;padding:18px 14px 8px;}
.pop-empty-ico,.notif-empty-ico{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--grad-soft);color:var(--magenta-bright);}
.pop-empty-ico svg,.notif-empty-ico svg{width:23px;height:23px;}
.pop-empty b{color:var(--star);font-family:var(--font-display);font-size:14.5px;}
.pop-empty p{color:var(--muted);font-size:12.6px;line-height:1.5;max-width:30ch;margin:0;}
.pop-cta{display:inline-flex;align-items:center;gap:7px;margin-top:8px;padding:9px 16px;border-radius:11px;
  background:var(--grad);color:#fff;font-family:var(--font-display);font-weight:600;font-size:13px;
  box-shadow:0 8px 20px rgba(155,39,224,.30);transition:transform .18s var(--ease),filter .18s var(--ease);}
.pop-cta:hover{filter:brightness(1.07);transform:translateY(-1px);}
.pop-cta svg{width:14px;height:14px;}
.nav-popover .pop-cta{display:flex;width:100%;justify-content:center;}
.pop-mini{display:flex;align-items:center;gap:11px;padding:2px 2px 10px;}
.pop-mini-ico{flex-shrink:0;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--grad-soft);color:var(--magenta-bright);}
.pop-mini-ico svg{width:19px;height:19px;}
.pop-mini-tx{display:flex;flex-direction:column;min-width:0;}
.pop-mini-tx b{color:var(--star);font-family:var(--font-display);font-size:14px;}
.pop-mini-tx span{font-size:12.4px;color:var(--muted);}

/* --- Badge numérico (notificaciones): reemplaza el punto --- */
.action-badge{position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--grad);color:#fff;font-family:var(--font-mono);font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1;border:2px solid var(--navy-900);
  transform:scale(0);transition:transform .25s var(--ease);pointer-events:none;}
.action-badge.show{transform:scale(1);}

/* --- Panel de notificaciones (clic para abrir) --- */
.notif-wrap{position:relative;display:flex;}
.notif-panel{right:0;min-width:340px;max-width:min(380px,92vw);padding:0;overflow:hidden;}
.notif-panel.open{opacity:1;visibility:visible;transform:none;}
.notif-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 11px;border-bottom:1px solid var(--line-soft);}
.notif-head b{display:block;margin:0;color:var(--star);font-family:var(--font-display);font-size:15px;}
.notif-readall{font-size:12px;color:var(--magenta-bright);font-weight:600;padding:5px 9px;border-radius:8px;transition:background .16s;white-space:nowrap;}
.notif-readall:hover{background:rgba(232,31,157,.12);}
.notif-list{max-height:min(62vh,430px);overflow-y:auto;overscroll-behavior:contain;padding:6px;}
.notif-list::-webkit-scrollbar{width:6px;}
.notif-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;}
.notif-item{display:flex;align-items:flex-start;gap:11px;padding:11px 32px 11px 10px;border-radius:12px;position:relative;color:var(--silver);transition:background .15s var(--ease);}
.notif-item+.notif-item{margin-top:2px;}
.notif-item:hover{background:rgba(255,255,255,.05);}
.notif-item.unread{background:rgba(232,31,157,.07);}
.notif-item.unread:hover{background:rgba(232,31,157,.12);}
.ni-ico{flex-shrink:0;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--grad-soft);color:var(--magenta-bright);}
.ni-ico svg{width:18px;height:18px;}
.ni-body{display:flex;flex-direction:column;gap:1px;min-width:0;}
.ni-body b{color:var(--star);font-family:var(--font-display);font-size:13.4px;font-weight:600;line-height:1.3;}
.ni-body>span{font-size:12.4px;color:var(--muted);line-height:1.4;}
.ni-body time{font-size:10.5px;color:var(--muted-2);font-family:var(--font-mono);margin-top:3px;}
.ni-dot{position:absolute;top:14px;right:12px;width:8px;height:8px;border-radius:50%;background:var(--magenta-bright);box-shadow:0 0 8px var(--magenta-bright);}
.notif-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:30px 24px;}
.notif-empty b{color:var(--star);font-family:var(--font-display);font-size:15px;}
.notif-empty p{color:var(--muted);font-size:12.6px;line-height:1.5;max-width:30ch;margin:0;}
@media(max-width:900px){ .notif-wrap{display:none;} }

/* --- Fila del selector de apariencia dentro del menú --- */
.sidebar-theme-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding:0 4px;}
#sidebar-theme-label{font-size:14px;font-weight:500;}

/* --- Focus visible accesible en todo el header --- */
.icon-btn:focus-visible,.btn-catalog:focus-visible,.btn-fav:focus-visible,.burger:focus-visible,
.nav-logo:focus-visible,.notif-readall:focus-visible,.sb-account-item:focus-visible,
.sidebar-links a:focus-visible,.pop-cta:focus-visible{
  outline:none;box-shadow:0 0 0 2px var(--navy-900),0 0 0 4px var(--magenta);
}
.notif-item:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--magenta);}

/* ============================================================
   MODO CLARO — popovers / notificaciones / badges legibles
   ============================================================ */
body.light-mode .nav-popover{
  background:rgba(255,255,255,.985);
  border-color:rgba(11,20,55,.12);
  box-shadow:0 24px 64px rgba(11,20,55,.16),0 2px 8px rgba(11,20,55,.08);
  color:#42507E;
}
body.light-mode .nav-popover b,
body.light-mode .pop-empty b,body.light-mode .pop-mini-tx b,
body.light-mode .ni-body b,body.light-mode .notif-empty b,body.light-mode .notif-head b{color:#0B1437;}
body.light-mode .pop-empty p,body.light-mode .pop-mini-tx span,
body.light-mode .ni-body>span,body.light-mode .notif-empty p{color:#5C6B94;}
body.light-mode .fav-pop-info b{color:#7B4FC8;}
body.light-mode .fav-pop-thumb{background:rgba(11,20,55,.06);}
body.light-mode .fav-pop-thumb--ph{color:rgba(11,20,55,.30);}
body.light-mode .fav-pop-all{color:#0B1437;}
body.light-mode .ni-ico,body.light-mode .pop-empty-ico,
body.light-mode .notif-empty-ico,body.light-mode .pop-mini-ico{color:#9B27E0;}
body.light-mode .notif-item{color:#42507E;}
body.light-mode .notif-item:hover{background:rgba(11,20,55,.05);}
body.light-mode .notif-item.unread{background:rgba(232,31,157,.09);}
body.light-mode .notif-item.unread:hover{background:rgba(232,31,157,.14);}
body.light-mode .notif-readall{color:#B81E86;}
body.light-mode .notif-readall:hover{background:rgba(232,31,157,.12);}
/* Badges y CTAs: degradado saturado (no pastel) para asegurar contraste sobre claro */
body.light-mode .pop-cta,
body.light-mode .action-badge,body.light-mode .sb-badge{
  background:linear-gradient(125deg,#E81F9D 0%,#9B27E0 100%);color:#fff;
}
body.light-mode .action-badge{border-color:#EAF2FA;}
body.light-mode .cart-count{background:var(--magenta-deep);border-color:#EAF2FA;}

/* ============================================================
   MICROINTERACCIONES PREMIUM — capa de pulido (2026-06-22)
   Aditiva y tokenizada. Rápida y discreta. Respeta prefers-reduced-motion
   (bloque al final de esta sección). No altera carrito/pagos/Supabase.
   ============================================================ */
:root{
  --ease-spring:cubic-bezier(.34,1.56,.64,1); /* leve overshoot para "pops" */
  --fx-lift:-2px;
}

/* --- Feedback al clic (press) en todos los botones --- */
.icon-btn,.btn,.btn-catalog,.btn-fav,.pop-cta,.notif-readall,.burger,.theme-switch-toggle{
  -webkit-tap-highlight-color:transparent;
}
.icon-btn:active,.btn-catalog:active,.btn-fav:active{transform:translateY(0) scale(.94);}
.burger:active{transform:scale(.92);}
.btn:active{transform:scale(.97);}
.pop-cta:active{transform:scale(.96);}
.notif-readall:active{transform:scale(.95);}

/* --- Elevación + reacción de íconos del header al mouse --- */
.icon-btn{transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);}
.icon-btn:hover{transform:translateY(var(--fx-lift));box-shadow:0 6px 18px rgba(0,0,0,.22);}
.icon-btn svg{transition:transform .22s var(--ease-spring),color .18s var(--ease);}
.icon-btn:hover svg{transform:scale(1.14);}
.nav-logo img{transition:transform .3s var(--ease-spring),filter .3s var(--ease);}
.nav-logo:hover img{transform:scale(1.05);}

/* --- CTAs del header: elevación suave --- */
.btn-catalog:hover,.btn-fav:hover{transform:translateY(var(--fx-lift));}
.btn-catalog:active,.btn-fav:active{transform:translateY(0) scale(.97);}

/* --- Buscador: glow y foco premium --- */
.nav-search{transition:border-color .2s var(--ease),background-color .2s var(--ease),box-shadow .25s var(--ease);}
.nav-search:focus-within{box-shadow:0 0 0 3px rgba(232,31,157,.14);}
.nav-search svg{transition:color .2s var(--ease);}
.nav-search:focus-within svg{color:var(--magenta-bright);}

/* --- Badge de notificaciones: pop al aparecer + ping breve (2 veces) --- */
.action-badge.show{animation:fx-badge-pop .42s var(--ease-spring) both;}
.action-badge.show::after{
  content:"";position:absolute;inset:-2px;border-radius:inherit;
  border:2px solid var(--magenta-bright);opacity:0;pointer-events:none;
  animation:fx-ping 1.5s var(--ease) .25s 2;
}
@keyframes fx-badge-pop{0%{transform:scale(0);}55%{transform:scale(1.22);}100%{transform:scale(1);}}
@keyframes fx-ping{0%{transform:scale(1);opacity:.5;}100%{transform:scale(1.9);opacity:0;}}

/* --- Aparición progresiva: items del panel de notificaciones --- */
.notif-panel.open .notif-item{animation:fx-rise .34s var(--ease) backwards;}
.notif-panel.open .notif-item:nth-child(1){animation-delay:.03s;}
.notif-panel.open .notif-item:nth-child(2){animation-delay:.07s;}
.notif-panel.open .notif-item:nth-child(3){animation-delay:.11s;}
.notif-panel.open .notif-item:nth-child(4){animation-delay:.15s;}
.notif-panel.open .notif-item:nth-child(5){animation-delay:.19s;}
/* --- Aparición progresiva: tarjetas del megamenú --- */
.megamenu-panel.open .mega-prod-card{animation:fx-rise .36s var(--ease) backwards;}
.megamenu-panel.open .mega-prod-card:nth-child(1){animation-delay:.04s;}
.megamenu-panel.open .mega-prod-card:nth-child(2){animation-delay:.08s;}
.megamenu-panel.open .mega-prod-card:nth-child(3){animation-delay:.12s;}
.megamenu-panel.open .mega-prod-card:nth-child(4){animation-delay:.16s;}
.megamenu-panel.open .mega-prod-card:nth-child(5){animation-delay:.20s;}
.megamenu-panel.open .mega-prod-card:nth-child(6){animation-delay:.24s;}
@keyframes fx-rise{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* --- Ripple táctil (superficies grandes; .btn-catalog ya es relative+overflow) --- */
.btn,.btn-fav,.pop-cta,.notif-readall{position:relative;overflow:hidden;}
.fx-ripple{
  position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(255,255,255,.42),rgba(255,255,255,0) 70%);
  transform:scale(0);opacity:.7;animation:fx-ripple-go .55s var(--ease) forwards;
}
@keyframes fx-ripple-go{to{transform:scale(1);opacity:0;}}

/* --- Tooltips en íconos clave (aparecen bajo el ícono) --- */
[data-tooltip]{position:relative;}
[data-tooltip]::after{
  content:attr(data-tooltip);position:absolute;top:calc(100% + 10px);left:50%;
  transform:translateX(-50%) translateY(-4px) scale(.96);transform-origin:top center;
  background:rgba(12,20,52,.97);color:var(--star);
  font-family:var(--font-body);font-size:11.5px;font-weight:600;letter-spacing:.2px;
  white-space:nowrap;padding:6px 10px;border-radius:9px;
  border:1px solid var(--glass-line);box-shadow:0 12px 28px rgba(0,0,0,.4);
  opacity:0;visibility:hidden;pointer-events:none;z-index:90;
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
}
[data-tooltip]::before{
  content:"";position:absolute;top:calc(100% + 5px);left:50%;
  transform:translateX(-50%);border:5px solid transparent;border-bottom-color:rgba(12,20,52,.97);
  opacity:0;visibility:hidden;pointer-events:none;z-index:90;transition:opacity .18s var(--ease),visibility .18s;
}
[data-tooltip]:hover::after,[data-tooltip]:focus-visible::after{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0) scale(1);transition-delay:.32s;
}
[data-tooltip]:hover::before,[data-tooltip]:focus-visible::before{opacity:1;visibility:visible;transition-delay:.32s;}
body.light-mode [data-tooltip]::after{background:#fff;color:#0B1437;border-color:rgba(11,20,55,.1);box-shadow:0 12px 28px rgba(11,20,55,.14);}
body.light-mode [data-tooltip]::before{border-bottom-color:#fff;}

/* --- Estado de carga reutilizable --- */
.pop-loading{gap:12px !important;padding:24px 14px !important;}
.pop-loading::before{
  content:"";width:24px;height:24px;border-radius:50%;
  border:2.5px solid var(--line);border-top-color:var(--magenta-bright);
  animation:fx-spin .7s linear infinite;
}
.is-loading{position:relative;color:transparent !important;pointer-events:none;}
.is-loading::after{
  content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border-radius:50%;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;
  animation:fx-spin .6s linear infinite;
}
@keyframes fx-spin{to{transform:rotate(360deg);}}

/* --- Favoritos: el corazón se rellena de color al pasar el mouse --- */
.btn-fav svg path{fill:currentColor;fill-opacity:0;transition:fill-opacity .3s var(--ease);}
.btn-fav:hover svg path{fill-opacity:1;}

/* --- Cambiar apariencia: al pasar el mouse el círculo se desliza un poco
   (de noche hacia la derecha, de día hacia la izquierda) y vuelve, siempre
   lento y suave; y el ícono luna/sol cambia a rosado --- */
.theme-switch-toggle:hover .tst-icon-moon,
.theme-switch-toggle:hover .tst-icon-sun{
  color:var(--magenta-bright);
}
@keyframes tst-knob-peek-right{
  0%{transform:translateX(var(--knob-x));}
  40%{transform:translateX(calc(var(--knob-x) + 6px));}
  100%{transform:translateX(var(--knob-x));}
}
@keyframes tst-knob-peek-left{
  0%{transform:translateX(var(--knob-x));}
  40%{transform:translateX(calc(var(--knob-x) - 6px));}
  100%{transform:translateX(var(--knob-x));}
}
/* :where() para que estas dos reglas tengan especificidad casi nula: así la
   regla body.theme-transitioning .tst-knob (más abajo) siempre puede
   desactivar esta animación durante el cambio de tema, sin importar el
   orden en el archivo. */
:where(.theme-switch-toggle:hover) .tst-knob{
  animation: tst-knob-peek-right .7s var(--ease-theme);
}
:where(body.light-mode .theme-switch-toggle:hover) .tst-knob{
  animation: tst-knob-peek-left .7s var(--ease-theme);
}
@media (prefers-reduced-motion: reduce){
  .theme-switch-toggle:hover .tst-knob{ animation:none; }
}

/* --- Hamburguesa: despliegue sutil de las 3 líneas hacia arriba/abajo + color rosado --- */
.burger:hover:not(.active) span{background:var(--magenta-bright);}
.burger:hover:not(.active) span:nth-child(1){transform:translateY(-3px);}
.burger:hover:not(.active) span:nth-child(3){transform:translateY(3px);}

/* --- Movimiento reducido: desactiva los efectos de esta capa --- */
@media (prefers-reduced-motion: reduce){
  .icon-btn:hover,.btn-catalog:hover,.btn-fav:hover,.mega-prod-card:hover{transform:none !important;}
  .icon-btn:hover svg,.nav-logo:hover img{transform:none !important;}
  .action-badge.show,.notif-panel.open .notif-item,.megamenu-panel.open .mega-prod-card{animation:none !important;}
  .action-badge.show::after{display:none !important;}
  .fx-ripple{display:none !important;}
  .pop-loading::before,.is-loading::after{animation:none !important;}
  [data-tooltip]::after,[data-tooltip]::before{transition:none !important;}
  .btn-fav:hover svg path{transition:none !important;}
  .burger:hover:not(.active) span{transform:none !important;}
}

/* ============================================================
   PROMO BAR — "Promociones de la semana" (rediseño 2026-06-22)
   Barra horizontal compacta: mensaje + perks + temporizador + captación
   de correo (newsletter integrado, antes vivía en el footer).
   ============================================================ */
.promo-bar{position:relative;overflow:hidden;border-radius:18px;border:1px solid var(--glass-line);
  background:var(--grad-soft);background-color:var(--navy-700);
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  padding:18px 24px;margin-bottom:26px;}
.promo-bar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad);}
.promo-bar .pb-text{flex:1 1 380px;min-width:260px;}
.promo-bar .pb-kicker{display:inline-flex;align-items:center;gap:7px;margin-bottom:6px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--magenta-bright);}
.promo-bar .pb-kicker svg{width:13px;height:13px;}
.promo-bar .pb-title{font-family:var(--font-display);font-weight:600;font-size:clamp(20px,2.2vw,24px);line-height:1.1;color:var(--star);margin:0 0 6px;}
.promo-bar .pb-lead{font-size:13.5px;line-height:1.5;color:var(--silver);max-width:60ch;margin:0;}
.promo-bar .pb-perks{margin-top:9px;display:flex;flex-wrap:wrap;gap:6px 14px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.4px;color:var(--muted);}
.promo-bar .pb-perks span{display:inline-flex;align-items:center;gap:6px;}
.promo-bar .pb-perks span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--magenta);}
.promo-bar .pb-action{flex:1 1 360px;min-width:280px;display:flex;flex-direction:column;gap:10px;}
.promo-bar .pb-timer-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.promo-bar .pb-timer-label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;
  color:var(--muted);display:inline-flex;align-items:center;gap:6px;}
.promo-bar .pb-timer-label svg{width:13px;height:13px;}
.promo-bar .pb-timer{font-family:var(--font-mono);font-weight:700;font-size:15px;letter-spacing:.5px;color:var(--star);
  background:rgba(0,0,0,.28);border:1px solid var(--glass-line);padding:7px 12px;border-radius:10px;white-space:nowrap;}
.promo-bar .newsletter-form{flex:initial;width:100%;min-width:0;}
.promo-bar .nf-field{display:flex;gap:10px;flex-wrap:nowrap;align-items:stretch;}
.promo-bar .nf-field input{
  flex:1 1 auto;min-width:0;width:100%;
  font-family:var(--font-body);font-size:14px;color:var(--star);
  background:rgba(0,0,0,.26);border:1px solid var(--glass-line);border-radius:12px;
  padding:12px 16px;transition:border-color .18s,background .18s,box-shadow .18s;}
.promo-bar .nf-field input::placeholder{color:var(--muted-2);}
.promo-bar .nf-field input:focus{outline:none;border-color:var(--magenta);
  background:rgba(232,31,157,.07);box-shadow:0 0 0 3px rgba(232,31,157,.14);}
.promo-bar .nf-field input.invalid{border-color:#FF5F7A;
  background:rgba(255,95,122,.07);box-shadow:0 0 0 3px rgba(255,95,122,.13);}
.promo-bar .nf-btn{flex:0 0 auto;padding:12px 20px;font-size:13.5px;border-radius:12px;}
.promo-bar .nf-msg{margin-top:8px;font-size:12.5px;color:var(--muted);}
.promo-bar .nf-msg.err{color:#FF8095;}
.promo-bar .nf-msg.ok{color:#56E0A0;}
/* Modo día */
body.light-mode .promo-bar{background:var(--grad-soft);background-color:#FFFFFF;border-color:rgba(11,20,55,.1);}
body.light-mode .promo-bar .pb-kicker{color:#7B4FC8;}
body.light-mode .promo-bar .pb-perks span::before{background:#7B4FC8;}
body.light-mode .promo-bar .pb-timer{background:rgba(255,255,255,.7);color:#0B1437;}
body.light-mode .promo-bar .nf-field input{background:#FFFFFF;border-color:rgba(11,20,55,.18);color:#0B1437;}
body.light-mode .promo-bar .nf-field input::placeholder{color:#7A89B0;}
body.light-mode .promo-bar .nf-field input:focus{border-color:#7B4FC8;background:#FFFFFF;box-shadow:0 0 0 3px rgba(123,79,200,.16);}
body.light-mode .promo-bar .nf-msg{color:#5C6B94;}
/* Responsive */
@media(max-width:720px){
  .promo-bar{flex-direction:column;align-items:stretch;gap:16px;padding:18px;}
}
@media(max-width:430px){
  .promo-bar .nf-field{flex-direction:column;}
  .promo-bar .nf-btn{width:100%;justify-content:center;}
}

/* ============================================================
   PROMO UNIFICADA — barra + carrusel de ofertas en UNA sola sección
   (rediseño 2026-06-22, iteración: unificación + carrusel)
   ============================================================ */
.promo-unified{position:relative;border:1px solid var(--glass-line);border-radius:20px;overflow:hidden;
  background:var(--navy-700);box-shadow:0 18px 50px rgba(0,0,0,.22);}
body.light-mode .promo-unified{background:#FFFFFF;border-color:rgba(11,20,55,.1);box-shadow:0 10px 30px rgba(66,80,126,.12);}
/* La barra pasa a ser el "encabezado" del panel: sin borde/radio/margen propios */
.promo-unified .promo-bar{border:none;border-radius:0;margin:0;border-bottom:1px solid var(--glass-line);}
body.light-mode .promo-unified .promo-bar{border-bottom-color:rgba(11,20,55,.1);}

/* Carrusel de ofertas (una fila deslizable) */
.po-carousel-wrap{position:relative;display:flex;align-items:center;gap:6px;padding:18px 14px 4px;}
.prod-carousel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;padding:2px 2px 10px;flex:1;}
.prod-carousel::-webkit-scrollbar{height:6px;}
.prod-carousel::-webkit-scrollbar-thumb{background:var(--glass-line);border-radius:8px;}
.prod-carousel::-webkit-scrollbar-track{background:transparent;}
.prod-carousel > *{flex:0 0 178px;scroll-snap-align:start;}
.prod-carousel .cc-img{position:relative;}
.prod-carousel .empty-state{flex:1 0 100%;text-align:center;}
.po-nav{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--glass-2);border:1px solid var(--glass-line);color:var(--star);
  transition:background .18s,transform .18s,opacity .18s;}
.po-nav:hover{background:var(--grad);color:#fff;transform:translateY(-1px);}
.po-nav svg{width:18px;height:18px;}
.po-nav[hidden]{display:none;}
.po-nav:disabled{opacity:.35;cursor:default;}
.po-nav:disabled:hover{background:var(--glass-2);color:var(--star);transform:none;}
body.light-mode .po-nav{color:#0B1437;}
.po-more{display:flex;justify-content:center;padding:6px 0 22px;}
.po-more .btn{padding:13px 30px;font-size:15px;text-decoration:none;}
@media(max-width:560px){
  .po-carousel-wrap{padding:14px 10px 2px;}
  .prod-carousel > *{flex:0 0 150px;}
  .po-nav{display:none;} /* en móvil se desliza con el dedo */
}

/* ============================================================
   PROMO — iteración 2 (2026-06-22): contraste día, timer arriba-derecha,
   carrusel centrado + indicador tipo hero, botón fuera del panel
   ============================================================ */
.promo-bar{align-items:flex-start;}
.pb-action{align-items:flex-end;}
.pb-action .newsletter-form{width:100%;}
.pb-timer-row{align-self:flex-end;}
/* contraste modo día */
body.light-mode .promo-bar .pb-lead{color:#313D63;}
body.light-mode .promo-bar .pb-perks{color:#44507A;}
body.light-mode .promo-bar .pb-timer-label{color:#44507A;}
/* carrusel: tarjetas más grandes; centradas si no hay overflow */
.po-carousel-wrap{padding:18px 18px 6px;}
.prod-carousel > *{flex:0 0 210px;}
.prod-carousel.is-centered{justify-content:center;}
/* indicador (puntos tipo hero: el activo se alarga como barrita) */
.po-dots{display:flex;justify-content:center;align-items:center;gap:8px;padding:2px 0 18px;}
.po-dot{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.35);border:none;cursor:pointer;padding:0;
  transition:width .35s cubic-bezier(.4,0,.2,1),background .35s ease,box-shadow .35s ease;}
.po-dot.active{width:28px;background:var(--magenta);box-shadow:0 0 10px rgba(232,31,157,.55);}
.po-dot:hover:not(.active){background:rgba(255,255,255,.65);}
body.light-mode .po-dot{background:rgba(11,20,55,.22);}
body.light-mode .po-dot:hover:not(.active){background:rgba(11,20,55,.42);}
/* botón "Ver más ofertas" fuera del recuadro */
.po-more{display:flex;justify-content:center;padding:0;margin-top:20px;}
@media(max-width:560px){
  .po-carousel-wrap{padding:14px 12px 4px;}
  .prod-carousel > *{flex:0 0 168px;}
}

/* ============================================================
   PÁGINAS INSTITUCIONALES — Sobre Nosotros (.about-page) y Contacto (.contact-page)
   Añadido 2026-06-22. Solo tokens de marca; dark-first con overrides de día.
   ============================================================ */

/* ---------- Placeholder de medios (mismo lenguaje visual que productos sin foto) ---------- */
.media-ph{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;padding:24px;border-radius:16px;
  border:1.5px dashed var(--glass-line);
  background:
    radial-gradient(circle at 30% 25%,rgba(155,39,224,.16),transparent 55%),
    repeating-linear-gradient(135deg,var(--navy-700) 0 13px,var(--navy-800) 13px 26px);
  color:var(--muted);
}
.media-ph-portrait{min-height:420px;height:100%;}
.media-ph-video{aspect-ratio:16/9;width:100%;}
.media-ph-step{min-height:150px;margin-top:16px;padding:16px;}
.media-ph-ico{color:var(--violet-bright);opacity:.9;}
.media-ph-ico svg{width:40px;height:40px;}
.media-ph-ico-lg svg{width:60px;height:60px;}
.media-ph-label{
  font-family:var(--font-mono);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--silver);padding:6px 14px;border:1px dashed var(--line);border-radius:8px;background:rgba(7,12,32,.4);
}
.media-ph-sub{font-size:13px;color:var(--muted-2);max-width:320px;}

/* ---------- HERO Sobre Nosotros ---------- */
.about-hero{display:grid;grid-template-columns:1fr 1.05fr;gap:44px;align-items:center;}
.about-hero-text .section-title{margin:10px 0 18px;}
.about-hero-text .lead{line-height:1.7;margin-bottom:14px;}
.about-hero-text .lead:last-of-type{margin-bottom:0;}
.about-cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;}
.slogan-highlight{color:var(--magenta-bright);font-weight:600;}

/* ---------- Historia + valores ---------- */
.about-story{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start;}
.about-story-text .section-title{margin:10px 0 18px;}
.about-story-text p{color:var(--silver);line-height:1.75;margin-bottom:16px;max-width:62ch;}
.about-values{display:flex;flex-direction:column;gap:16px;}
.value-card{
  background:var(--glass);border:1px solid var(--glass-line);border-radius:16px;padding:22px;
  transition:transform .2s var(--ease),border-color .2s var(--ease);
}
.value-card:hover{transform:translateY(-4px);border-color:rgba(232,31,157,.45);}
.value-ico{display:inline-flex;color:var(--magenta-bright);margin-bottom:10px;}
.value-ico svg{width:30px;height:30px;}
.value-card h3{font-family:var(--font-display);color:var(--star);font-size:18px;margin-bottom:6px;}
.value-card p{color:var(--muted);font-size:14.5px;line-height:1.6;}

/* ---------- Proceso de fabricación (7 pasos) ---------- */
.process-grid{
  list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;padding:0;
}
.process-step{
  background:var(--glass);border:1px solid var(--glass-line);border-radius:18px;padding:26px;
  display:flex;flex-direction:column;
  transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.process-step:hover{transform:translateY(-5px);border-color:rgba(232,31,157,.40);box-shadow:0 24px 50px rgba(0,0,0,.40);}
.ps-head{display:flex;align-items:center;gap:14px;margin-bottom:12px;}
.step-num{
  flex:0 0 auto;display:inline-grid;place-items:center;width:46px;height:46px;border-radius:12px;
  font-family:var(--font-display);font-weight:700;font-size:18px;color:#fff;background:var(--grad);
  box-shadow:0 8px 20px rgba(155,39,224,.4);
}
.process-step h3{font-family:var(--font-display);color:var(--star);font-size:19px;line-height:1.25;}
.process-step p{color:var(--muted);font-size:14.5px;line-height:1.65;flex:1;}

/* ---------- Banda CTA ---------- */
.cta-band{
  text-align:center;border-radius:22px;padding:48px 32px;
  background:var(--grad-soft);border:1px solid var(--glass-line);
}
.cta-band h2{font-family:var(--font-display);color:var(--star);font-size:30px;margin-bottom:10px;}
.cta-band p{color:var(--silver);margin-bottom:24px;}

/* ---------- CONTACTO ---------- */
.contact-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:36px;align-items:start;margin-top:40px;}
.contact-info{display:flex;flex-direction:column;gap:14px;}
.contact-card{
  display:flex;align-items:center;gap:16px;padding:20px;border-radius:16px;
  background:var(--glass);border:1px solid var(--glass-line);color:var(--silver);
  transition:transform .2s var(--ease),border-color .2s var(--ease);
}
a.contact-card:hover{transform:translateY(-3px);border-color:rgba(232,31,157,.45);}
.cc-ico{flex:0 0 auto;display:inline-grid;place-items:center;width:48px;height:48px;border-radius:12px;
  background:var(--grad-soft);color:var(--magenta-bright);border:1px solid var(--glass-line);}
.cc-ico svg{width:24px;height:24px;}
.cc-body{display:flex;flex-direction:column;gap:2px;min-width:0;}
.cc-label{font-family:var(--font-mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--magenta-bright);}
.cc-value{color:var(--star);font-weight:600;font-size:15.5px;word-break:break-word;}
.cc-sub{color:var(--muted);font-size:13px;}

.contact-form-wrap{background:var(--glass);border:1px solid var(--glass-line);border-radius:20px;padding:30px;}
.cf-title{font-family:var(--font-display);color:var(--star);font-size:22px;margin-bottom:6px;}
.cf-sub{color:var(--muted);font-size:14.5px;margin-bottom:24px;}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.cf-field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;}
.cf-field > span{font-size:13.5px;color:var(--silver);font-weight:600;}
.cf-field > span small{color:var(--muted-2);font-weight:400;}
.cf-field input,.cf-field select,.cf-field textarea{
  width:100%;background:var(--navy-800);border:1.5px solid var(--line);border-radius:12px;
  padding:13px 15px;color:var(--star);font-family:var(--font-body);font-size:15px;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.cf-field textarea{resize:vertical;min-height:120px;}
.cf-field input::placeholder,.cf-field textarea::placeholder{color:var(--muted-2);}
.cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{
  outline:none;border-color:var(--magenta);box-shadow:0 0 0 3px rgba(232,31,157,.18);
}
.cf-hp{position:absolute !important;left:-9999px;width:1px;height:1px;opacity:0;overflow:hidden;}


/* ============================================================
   SEGUIMIENTO DE PEDIDO (Sesión 7)
   ============================================================ */
.track-wrap{max-width:760px;margin:0 auto;}
.track-intro{color:var(--muted);margin:8px 0 22px;}
.track-form{display:flex;gap:10px;margin-bottom:22px;flex-wrap:wrap;}
.track-input{flex:1;min-width:200px;padding:14px 16px;border-radius:14px;border:1px solid var(--glass-line);
  background:var(--glass);color:var(--star);font-size:16px;letter-spacing:.04em;text-transform:uppercase;}
.track-input::placeholder{color:var(--muted-2);text-transform:none;letter-spacing:normal;}
.track-input:focus{outline:none;border-color:var(--magenta);box-shadow:0 0 0 3px rgba(232,31,157,.18);}
.track-form .btn{white-space:nowrap;}

.track-card{background:var(--glass);border:1px solid var(--line);border-radius:18px;padding:22px;backdrop-filter:blur(var(--blur));}
.track-state{text-align:center;padding:34px 22px;}
.track-state h3{font-family:var(--font-display);color:var(--star);margin-bottom:8px;}
.track-state p{color:var(--muted);}
.track-state--err{border-color:var(--danger);}
.track-spinner{display:inline-block;width:30px;height:30px;border-radius:50%;border:3px solid var(--glass-line);
  border-top-color:var(--magenta);animation:track-spin .8s linear infinite;margin-bottom:12px;}
@keyframes track-spin{to{transform:rotate(360deg);}}

.track-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:20px;flex-wrap:wrap;}
.track-code{display:block;font-family:var(--font-mono);font-size:20px;font-weight:700;color:var(--star);letter-spacing:.06em;}
.track-date{display:block;color:var(--muted);font-size:13px;margin-top:2px;}
.track-badge{display:inline-block;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:700;color:#fff;background:var(--grad);white-space:nowrap;}
.track-badge--pending{background:var(--glass-2);color:var(--silver);border:1px solid var(--glass-line);}
.track-badge--cancel{background:var(--danger);}

.stepper{list-style:none;margin:0;padding:0;}
.step{position:relative;display:flex;gap:16px;padding:0 0 26px 0;}
.step::before{content:"";position:absolute;left:17px;top:32px;bottom:-4px;width:2px;background:var(--line);}
.step:last-child{padding-bottom:0;}
.step:last-child::before{display:none;}
.step-dot{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  font-weight:700;font-size:14px;border:2px solid var(--glass-line);background:var(--navy-850);color:var(--muted-2);z-index:1;}
.step.done .step-dot{background:var(--grad);border-color:transparent;color:#fff;}
.step.done::before{background:var(--magenta);}
.step.active .step-dot{border-color:var(--magenta);color:var(--magenta);background:var(--navy-850);box-shadow:0 0 0 4px rgba(232,31,157,.16);}
.step-body{padding-top:6px;display:flex;flex-direction:column;gap:2px;}
.step-label{font-weight:600;color:var(--silver);}
.step.done .step-label,.step.active .step-label{color:var(--star);}
.step-when{font-size:12px;color:var(--muted);font-family:var(--font-mono);}

.track-items{margin-top:22px;border-top:1px solid var(--line);padding-top:18px;}
.track-items h3{font-family:var(--font-display);font-size:16px;color:var(--star);margin-bottom:12px;}
.track-items ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.track-items li{display:flex;justify-content:space-between;gap:12px;color:var(--silver);align-items:flex-start;}
.ti-name{display:flex;flex-direction:column;}
.ti-name small{font-family:var(--font-mono);font-size:11px;color:var(--muted-2);margin-top:2px;}
.ti-price{white-space:nowrap;color:var(--star);font-weight:600;}
.track-total{margin-top:14px;text-align:right;color:var(--silver);}
.track-total b{color:var(--star);font-size:18px;margin-left:6px;}
.track-cancel-msg{color:var(--muted);margin-top:8px;}

@media (max-width:560px){
  .track-code{font-size:17px;}
  .track-form .btn{width:100%;}
}

/* Historial de pedidos en "Mi cuenta": estado + código de seguimiento */
.oi-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px;}
.oi-estado{font-size:12px;font-weight:700;color:#fff;background:var(--grad);padding:3px 10px;border-radius:999px;}
.oi-code{font-family:var(--font-mono);font-size:12px;color:var(--magenta);}
/* ===== fin SEGUIMIENTO DE PEDIDO ===== */

/* ════════════════════════════════════════════════════════════
   AUDITORÍA RESPONSIVE — 2026-06-24  ·  Claude (Arquitecto) / Daniel Pardo
   Mejoras móvil + tablet. NO altera la vista de escritorio (≥901px).
   Cobertura probada: 320 · 375 · 768 · 1024 · 1440 · 1920 px.
   ════════════════════════════════════════════════════════════ */

/* (G1) Guarda anti scroll-horizontal por elementos fuera de lienzo
   (drawer del carrito, megamenú). overflow-x:clip NO crea contexto de
   scroll → preserva position:sticky (a diferencia de overflow:hidden). */
html,body{overflow-x:clip;}
@supports not (overflow:clip){ html,body{overflow-x:hidden;} }

/* ════════ TABLET Y MENOR (≤900px) ════════ */
@media (max-width:900px){
  /* (H3) Selector de apariencia: se retira del header y queda disponible
     dentro del menú hamburguesa (sección "Apariencia"), visible en este ancho. */
  #theme-switch-toggle{ display:none !important; }
  /* (B3) Formularios a una sola columna desde tablet (antes 2 columnas apretadas). */
  .contact-layout{ grid-template-columns:1fr; gap:26px; }
  .cf-row{ grid-template-columns:1fr; gap:0; }
  /* (B2b) Detalle de producto: el grid de 1 columna debe poder encoger
     bajo el ancho del contenido (galería + miniaturas) en pantallas <360px. */
  .pd-grid{ grid-template-columns:minmax(0,1fr); }
  .pd-gallery, .pd-info{ min-width:0; }
}

/* ════════ MÓVIL (≤600px) ════════ */
@media (max-width:600px){
  /* (H1·H2·H4·H5) HEADER en dos filas: fila 1 marca + acciones; fila 2 buscador
     a todo el ancho (siempre usable). Resuelve logo recortado, buscador exprimido
     a una lupa y la hamburguesa que se salía de pantalla a 320px. */
  :root{ --nav-h:118px; }
  .nav{ height:auto; }
  .nav .wrap{
    grid-template-columns:1fr auto;
    grid-template-areas:"brand actions" "search search";
    column-gap:8px; row-gap:10px;
    padding-top:10px; padding-bottom:12px;
    align-items:center;
  }
  .nav-left{ grid-area:brand; min-width:0; gap:8px; flex-wrap:nowrap; }
  .nav-actions{ grid-area:actions; gap:6px; }
  .nav-search{ grid-area:search; width:100%; max-width:none; height:44px; margin:0; justify-self:stretch; }
  .nav-logo{ flex:0 0 auto; }
  .nav-logo img{ height:30px; }
  .btn-catalog{ margin-left:2px; padding:9px 11px; }
  .btn-catalog::after{ display:none; }

  /* (B1) HERO banner a sangre completa (más presencia en pantalla estrecha). */
  .hero-banner{ width:100%; margin-left:0; margin-right:0; border-radius:0; border-left:0; border-right:0; margin-top:calc(var(--nav-h) + 10px); }

  /* (G2) Tap targets cómodos (≥42px) en el header */
  .icon-btn{ width:42px; height:42px; }
  .burger{ padding:11px; }

  /* (F1) FOOTER — adaptación móvil pulida */
  .footer-top{ gap:30px; padding:48px 0 28px; }
  .footer-brands{ gap:14px; }
  .footer-brand p{ max-width:none; }
  .footer-social-section{ gap:22px; padding-bottom:36px; }
  .footer-social-cards{ width:100%; }
  .footer-bottom{ padding:20px 0 40px; gap:10px; }
}

/* ════════ MÓVIL ESTRECHO (≤380px) ════════ */
@media (max-width:380px){
  .nav .wrap{ padding-left:10px; padding-right:10px; }
  .nav-logo img{ height:28px; }
  /* Catálogo se mantiene visible como icono compacto (hay espacio de sobra) */
  .btn-catalog{ padding:8px 9px; }
  .nav-actions{ gap:4px; }
}
/* ═══════════ fin AUDITORÍA RESPONSIVE 2026-06-24 ═══════════ */

/* ════════════════════════════════════════════════════════════
   SOBRE NOSOTROS — Reposicionamiento a tienda/catálogo (2026-06-25)
   Aire bajo header · bloque visual +10% (video) · pilares · banda de
   confianza · responsive del about (faltaba). Solo tokens de marca.
   ════════════════════════════════════════════════════════════ */

/* (1) Aire bajo el header: el primer bloque respeta el nav fijo,
   igual que home/catálogo/producto. Antes quedaba pegado (80px vs nav 74px). */
.about-page > .block:first-of-type{ padding-top:calc(var(--nav-h) + 48px); }

/* (2) Bloque visual del Hero en video (loop). object-fit para que llene la columna. */
.about-hero-media video{
  width:100%; height:100%; min-height:420px; object-fit:cover;
  display:block; border-radius:16px; border:1px solid var(--glass-line);
}

/* Cinta de atributos bajo el Hero (chips técnicos, Space Mono). */
.hero-attrs{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.hero-attrs span{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:1px;text-transform:uppercase;
  color:var(--silver);padding:7px 13px;border:1px solid var(--glass-line);border-radius:999px;
  background:var(--glass);
}

/* (3) Pilares "Qué encuentras en Luna 3D" (4 tarjetas, enlazables). */
.about-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px;}
.pillar-card{
  display:flex;flex-direction:column;gap:8px;color:inherit;text-decoration:none;
  background:var(--glass);border:1px solid var(--glass-line);border-radius:16px;padding:22px;
  transition:transform .2s var(--ease),border-color .2s var(--ease);
}
.pillar-card:hover{transform:translateY(-4px);border-color:rgba(232,31,157,.45);}
.pillar-ico{display:inline-flex;color:var(--magenta-bright);}
.pillar-ico svg{width:30px;height:30px;}
.pillar-card h3{font-family:var(--font-display);color:var(--star);font-size:17.5px;}
.pillar-card p{color:var(--muted);font-size:14px;line-height:1.6;}

/* (4) Banda "Compra con confianza" (4 ítems). */
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px;}
.trust-item{
  display:flex;flex-direction:column;gap:10px;align-items:flex-start;
  background:var(--glass);border:1px solid var(--glass-line);border-radius:16px;padding:22px;
}
.trust-ico{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:12px;
  background:var(--grad-soft);color:var(--magenta-bright);border:1px solid var(--glass-line);}
.trust-ico svg{width:24px;height:24px;}
.trust-item h3{font-family:var(--font-display);color:var(--star);font-size:16px;}
.trust-item p{color:var(--muted);font-size:13.5px;line-height:1.55;}

/* (5) RESPONSIVE del about (no existía): apila hero, pilares, confianza y proceso. */
@media (max-width:900px){
  .about-hero{grid-template-columns:1fr;gap:30px;}
  .about-pillars,.trust-grid{grid-template-columns:repeat(2,1fr);}
  .process-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .about-page > .block:first-of-type{ padding-top:calc(var(--nav-h) + 24px); }
  .about-pillars,.trust-grid,.process-grid{grid-template-columns:1fr;}
  .hero-attrs span{font-size:10.5px;padding:6px 11px;}
}
/* ═══════════ fin SOBRE NOSOTROS 2026-06-25 ═══════════ */