/* ══════════════════════════════════════════════════════════════════════════
   AuraxCol · tema claro para la zona de compra
   Se carga solo cuando la marca lo pide (body.lujo.claro).
   Regla del tema: la capa de marca (barra de anuncios, cabecera y pie) sigue
   en negro; la zona de trabajo (catalogo, ficha, pago) pasa a crema para que
   leer precios y comparar referencias canse menos la vista.
   Las formas no cambian: siguen las curvas del diseno original.
   ══════════════════════════════════════════════════════════════════════════ */

html body.lujo.claro{
  /* mismos nombres de variable que el tema oscuro, con valores claros */
  --dk:#F7F3EA;          /* fondo de pagina */
  --dk-2:#FFFFFF;        /* tarjetas y paneles */
  --dk-3:#F0EADD;        /* superficie alterna */
  --iv:#1A1511;          /* texto principal */
  --iv-2:rgba(26,21,17,.68);
  --iv-3:rgba(26,21,17,.46);
  --ln:rgba(26,21,17,.14);
  --au:#8F6A1E;          /* oro legible sobre crema */
  background:#F7F3EA !important;
  color:#1A1511 !important;
}

/* ── Capa de marca: se queda negra ─────────────────────────────────────── */
html body.lujo.claro .topbar{background:#000 !important;color:rgba(243,238,228,.72) !important}
html body.lujo.claro .topbar b{color:#C9A25A !important}
html body.lujo.claro .hdr,
html:not(.ee-claro) body.lujo.claro .hdr,
html:not(.ee-claro) body.lujo.claro .hdr.ee-scrolled{background:#000 !important;border-bottom:none !important}
html body.lujo.claro .hdr-icon,
html body.lujo.claro .hdr-cart{color:#F3EEE4 !important}
html body.lujo.claro .hdr-icon:hover,
html body.lujo.claro .hdr-cart:hover{color:#C9A25A !important}
html body.lujo.claro .burger span{background:#F3EEE4 !important}
html body.lujo.claro .hdr-cart-n{background:#C9A25A !important;color:#000 !important;box-shadow:0 0 0 2px #000 !important}
html body.lujo.claro footer{background:#000 !important;color:rgba(243,238,228,.68) !important;border-top:none !important}
html body.lujo.claro footer a,
html body.lujo.claro footer p,
html body.lujo.claro footer li,
html body.lujo.claro footer small{color:rgba(243,238,228,.68) !important}
html body.lujo.claro footer b,
html body.lujo.claro footer strong,
html body.lujo.claro footer h3,
html body.lujo.claro footer h4{color:#F3EEE4 !important}
html body.lujo.claro footer a:hover{color:#C9A25A !important}

/* ── Titulares y texto ─────────────────────────────────────────────────── */
html body.lujo.claro h1,
html body.lujo.claro h2,
html body.lujo.claro h3,
html body.lujo.claro .sec-t b,
html body.lujo.claro .pyr-t{color:#1A1511 !important}
html body.lujo.claro .kick,
html body.lujo.claro .sec-k,
html body.lujo.claro .sum-t{color:#8F6A1E !important}
html body.lujo.claro .sub,
html body.lujo.claro .sec-sub,
html body.lujo.claro p{color:rgba(26,21,17,.68)}

/* ── Tarjetas de producto ──────────────────────────────────────────────── */
html body.lujo.claro .card,
html body.lujo.claro .rc{background:#FFFFFF !important;border:1px solid rgba(26,21,17,.10) !important;
  box-shadow:0 18px 38px -30px rgba(26,21,17,.45) !important}
html body.lujo.claro .card:hover,
html body.lujo.claro .rc:hover{border-color:rgba(143,106,30,.42) !important;
  box-shadow:0 24px 46px -26px rgba(26,21,17,.5) !important}
/* Panel de foto en blanco: las fotos de catalogo vienen sobre blanco y asi
   no se ve un recuadro dentro de la tarjeta */
html body.lujo.claro .card-img,
html body.lujo.claro .rc-img{background:#FFFFFF !important}
html body.lujo.claro .card-img .card-photo{background:#FFFFFF !important}
html body.lujo.claro .card-casa,
html body.lujo.claro .rc-casa{color:rgba(26,21,17,.5) !important}
html body.lujo.claro .card-n,
html body.lujo.claro .rc-n{color:#1A1511 !important}
html body.lujo.claro .card-notas{color:rgba(26,21,17,.6) !important}
/* el precio manda: es el argumento de venta en mayorista */
html body.lujo.claro .card-p,
html body.lujo.claro .rc-p,
html body.lujo.claro .pyr-precio{color:#1A1511 !important;font-weight:800 !important}
html body.lujo.claro .card-p::after,
html body.lujo.claro .rc-p::after{color:rgba(26,21,17,.46) !important}

/* ── Botones: el blanco del tema oscuro pasa a espresso ────────────────── */
html body.lujo.claro .card-ver,
html body.lujo.claro .card-buy,
html body.lujo.claro .rc-ver,
html body.lujo.claro .dr-go,
html body.lujo.claro .dr-empty-cta,
html body.lujo.claro .add,
html body.lujo.claro .go,
html body.lujo.claro .lx-btn,
html body.lujo.claro .more-btn,
html body.lujo.claro .cat-dl,
html body.lujo.claro .btn,
html body.lujo.claro .btn2{background:#1A1511 !important;border-color:#1A1511 !important;color:#F7F3EA !important}
html body.lujo.claro .card-ver:hover,
html body.lujo.claro .card-buy:hover,
html body.lujo.claro .rc-ver:hover,
html body.lujo.claro .dr-go:hover,
html body.lujo.claro .dr-empty-cta:hover,
html body.lujo.claro .add:hover,
html body.lujo.claro .go:hover,
html body.lujo.claro .lx-btn:hover,
html body.lujo.claro .more-btn:hover,
html body.lujo.claro .cat-dl:hover,
html body.lujo.claro .btn:hover,
html body.lujo.claro .btn2:hover{background:#8F6A1E !important;border-color:#8F6A1E !important;color:#FFFFFF !important}
html body.lujo.claro .card-ver svg,
html body.lujo.claro .go svg,
html body.lujo.claro .add svg{stroke:currentColor !important}

/* ── Filtros y buscador ────────────────────────────────────────────────
   Las categorias mandan: texto limpio y una pastilla solida en la activa.
   Las familias son secundarias: fondo suave, sin borde, para que no compitan.
   ─────────────────────────────────────────────────────────────────────── */
html body.lujo.claro .cat-chip{background:transparent !important;border:none !important;
  color:rgba(26,21,17,.58) !important;font-weight:700 !important;letter-spacing:.12em !important;
  padding:11px 20px !important}
html body.lujo.claro .cat-chip:hover{background:rgba(26,21,17,.05) !important;color:#1A1511 !important}
html body.lujo.claro .cat-chip.on{background:#1A1511 !important;color:#F7F3EA !important;
  box-shadow:0 10px 22px -14px rgba(26,21,17,.8) !important}
/* buscador: una linea sobria, no una caja mas */
html body.lujo.claro .cat-srch,
html body.lujo.claro .cat-q-wrap{background:#FFFFFF !important;border:1px solid rgba(26,21,17,.12) !important;
  box-shadow:0 8px 20px -18px rgba(26,21,17,.5) !important}
html body.lujo.claro .cat-q,
html body.lujo.claro .cat-srch input,
html body.lujo.claro input[type=text],
html body.lujo.claro input[type=search],
html body.lujo.claro input[type=tel],
html body.lujo.claro input[type=email],
html body.lujo.claro select,
html body.lujo.claro textarea{background:#FFFFFF !important;border:1px solid rgba(26,21,17,.12) !important;
  color:#1A1511 !important}
html body.lujo.claro input::placeholder,
html body.lujo.claro textarea::placeholder{color:rgba(26,21,17,.56) !important;opacity:1 !important}
html body.lujo.claro input:focus,
html body.lujo.claro select:focus,
html body.lujo.claro textarea:focus{border-color:#1A1511 !important;box-shadow:0 0 0 3px rgba(26,21,17,.06) !important}
html body.lujo.claro .cat-srch svg{stroke:rgba(26,21,17,.38) !important}
/* familias: etiquetas suaves, sin marco */
html body.lujo.claro .fam-chip{background:rgba(26,21,17,.055) !important;border:none !important;
  color:rgba(26,21,17,.62) !important;font-weight:600 !important;padding:8px 15px !important;
  font-size:10.5px !important;letter-spacing:.1em !important}
html body.lujo.claro .fam-chip:hover{background:rgba(26,21,17,.1) !important;color:#1A1511 !important}
html body.lujo.claro .fam-chip.on{background:#8F6A1E !important;color:#FFFFFF !important}

/* ── Ficha de producto ─────────────────────────────────────────────────── */
html body.lujo.claro .gal-main,
html body.lujo.claro .gal-th{background:#FFFFFF !important;border:1px solid rgba(26,21,17,.10) !important}
html body.lujo.claro .note-chip{color:rgba(26,21,17,.72) !important}
html body.lujo.claro .note-chip::after{color:#8F6A1E !important}
html body.lujo.claro .panel,
html body.lujo.claro .sum-card,
html body.lujo.claro .deliv{background:#FFFFFF !important;border:1px solid rgba(26,21,17,.12) !important;box-shadow:none !important}
html body.lujo.claro .qty,
html body.lujo.claro .dr-qty{background:#FFFFFF !important;border:1px solid rgba(26,21,17,.16) !important;color:#1A1511 !important}

/* ── Carrito lateral ───────────────────────────────────────────────────── */
html body.lujo.claro .drawer{background:#FFFFFF !important;border-left:1px solid rgba(26,21,17,.12) !important;
  box-shadow:-30px 0 70px -40px rgba(26,21,17,.5) !important}
html body.lujo.claro #cart-ov{background:rgba(26,21,17,.42) !important}
html body.lujo.claro .dr-head,
html body.lujo.claro .dr-foot{border-color:rgba(26,21,17,.12) !important;background:#FFFFFF !important}
html body.lujo.claro .dr-n,
html body.lujo.claro .dr-tot b{color:#1A1511 !important}
html body.lujo.claro .dr-casa,
html body.lujo.claro .dr-tot span{color:rgba(26,21,17,.55) !important}
html body.lujo.claro .dr-x{color:#1A1511 !important}
html body.lujo.claro .dr-sw{background-color:#FFFFFF !important;border:none !important;box-shadow:none !important}

/* ── Pago ──────────────────────────────────────────────────────────────── */
html body.lujo.claro .sm-opt,
html body.lujo.claro .pay-opt,
html body.lujo.claro .dd-btn,
html body.lujo.claro .dd-menu{background:#FFFFFF !important;border:1px solid rgba(26,21,17,.14) !important;color:#1A1511 !important}
html body.lujo.claro .sm-opt.on,
html body.lujo.claro .pay-opt.sel{border-color:#8F6A1E !important;background:#FBF8F1 !important}
html body.lujo.claro .pay-check{border-color:rgba(26,21,17,.25) !important}
html body.lujo.claro .pay-opt.sel .pay-check{background:#8F6A1E !important;border-color:#8F6A1E !important}
html body.lujo.claro .steps{color:rgba(26,21,17,.45) !important}
html body.lujo.claro .steps .on{color:#1A1511 !important}
html body.lujo.claro .legal{color:rgba(26,21,17,.5) !important}

/* ── Separadores y detalles ────────────────────────────────────────────── */
html body.lujo.claro .sec-head,
html body.lujo.claro .it,
html body.lujo.claro .row,
html body.lujo.claro .sum-it{border-color:rgba(26,21,17,.12) !important}
html body.lujo.claro .card-badge.badge-new{background:#1A1511 !important;color:#F7F3EA !important}
html body.lujo.claro .card-off{background:#8F6A1E !important;color:#FFFFFF !important}
html body.lujo.claro .count,
html body.lujo.claro .mostrando{color:rgba(26,21,17,.5) !important}

/* El precio en espresso y con peso: es lo primero que compara un mayorista */
html body.lujo.claro .card-price .now,
html body.lujo.claro .rc-p .now,
html body.lujo.claro .pyr-precio .now,
html body.lujo.claro .now{color:#1A1511 !important;font-weight:800 !important}
html body.lujo.claro .card-price .before,
html body.lujo.claro .before{color:rgba(26,21,17,.42) !important}

/* Las barras de acordes traen su color en linea: el tema no las toca */
html body.lujo.claro .accord{background:inherit;border:none !important}
html body.lujo.claro .scent-lbl{color:rgba(26,21,17,.5) !important}
html body.lujo.claro .faq details,
html body.lujo.claro .faq summary{background:#FFFFFF !important;border-color:rgba(26,21,17,.12) !important;color:#1A1511 !important}
html body.lujo.claro .pyr-col b,
html body.lujo.claro .pyr-col strong{color:#1A1511 !important}

/* Cabecera de pago y seguimiento: la barra sigue negra, su texto va en marfil */
html body.lujo.claro .hdr .logo-t b,
html body.lujo.claro .brand b,
html body.lujo.claro .brand-t b{color:#F3EEE4 !important}
html body.lujo.claro .hdr .logo-t i,
html body.lujo.claro .brand small,
html body.lujo.claro .brand-t small{color:#C9A25A !important}
html body.lujo.claro .hdr-sec{color:rgba(243,238,228,.62) !important;border-color:rgba(243,238,228,.18) !important}
html body.lujo.claro .hdr-sec svg{stroke:#C9A25A !important}
/* Gracias y seguimiento: la barra superior va negra de lado a lado, como en
   el resto del circuito; el logotipo va suelto sobre ella */
html body.lujo.claro header{background:#000 !important;border-bottom:none !important}
html body.lujo.claro header .w{background:transparent !important}
html body.lujo.claro .brand{background:transparent !important;border-bottom:none !important}
html body.lujo.claro .tienda,
html body.lujo.claro .volver{color:rgba(243,238,228,.62) !important}
html body.lujo.claro .tienda:hover,
html body.lujo.claro .volver:hover{color:#C9A25A !important}
/* WhatsApp en verde de verdad, no en blanco sobre blanco */
html body.lujo.claro .wa,
html body.lujo.claro .mm-wa{background:#25D366 !important;border-color:#25D366 !important;color:#FFFFFF !important}
html body.lujo.claro .wa:hover,
html body.lujo.claro .mm-wa:hover{background:#1EBE5A !important;border-color:#1EBE5A !important;color:#FFFFFF !important}
html body.lujo.claro .wa svg{fill:currentColor !important;stroke:none !important}

/* ── Menu lateral: solido y legible sobre crema ────────────────────────── */
html body.lujo.claro #mobmenu{background:#FFFFFF !important;-webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;border-right:1px solid rgba(26,21,17,.12) !important;
  box-shadow:30px 0 70px -40px rgba(26,21,17,.5) !important}
html body.lujo.claro .mm-brand,
html body.lujo.claro .mm-brand span{color:#1A1511 !important}
/* El logotipo es crema, pensado para fondo negro: sobre el cajon claro
   se borra. En este tema entra la version en tinta. */
html body.lujo.claro #mobmenu .mm-brand .mm-logo-claro{display:none !important}
html body.lujo.claro #mobmenu .mm-brand .mm-logo-oscuro{display:block !important}
html body.lujo.claro .mm-close{color:#1A1511 !important}
html body.lujo.claro .mm-k,
html body.lujo.claro .mm-sec{color:rgba(26,21,17,.45) !important}
html body.lujo.claro .mm-a{border-color:rgba(26,21,17,.10) !important}
html body.lujo.claro .mm-a b,
html body.lujo.claro .mm-a strong{color:#1A1511 !important}
html body.lujo.claro .mm-a small,
html body.lujo.claro .mm-a span{color:rgba(26,21,17,.55) !important}
html body.lujo.claro .mm-n{color:#8F6A1E !important}
html body.lujo.claro .mm-pie,
html body.lujo.claro .mm-pie li{color:rgba(26,21,17,.55) !important}
html body.lujo.claro .mm-pie b{color:rgba(26,21,17,.45) !important}
html body.lujo.claro #mm-back{background:rgba(26,21,17,.42) !important}

/* Cabecera del menu lateral: el nombre venia en marfil y desaparecia */
/* glass.css oculta el emblema del menu con un selector de id: se respeta.
   El nombre si hay que recuperarlo, venia en marfil sobre el panel blanco. */
html body.lujo.claro #mobmenu .mm-brand span,
html body.lujo.claro #mobmenu .mm-brand b,
html body.lujo.claro .mm-brand span,
html body.lujo.claro .mm-brand b{color:#1A1511 !important}

/* ── Bloque de cierre: sigue siendo una banda oscura, su texto va en marfil ── */
html body.lujo.claro .slogan{background:#0B0B0B !important}
html body.lujo.claro .slogan h2,
html body.lujo.claro .slogan b,
html body.lujo.claro .slogan strong{color:#F3EEE4 !important}
html body.lujo.claro .slogan p,
html body.lujo.claro .slogan li,
html body.lujo.claro .slogan span{color:rgba(243,238,228,.7) !important}
html body.lujo.claro .slogan .kick,
html body.lujo.claro .slogan small{color:#C9A25A !important}
html body.lujo.claro .slogan .btn,
html body.lujo.claro .slogan .btn-gold{background:transparent !important;border:1px solid rgba(243,238,228,.55) !important;color:#F3EEE4 !important}
html body.lujo.claro .slogan .btn:hover,
html body.lujo.claro .slogan .btn-gold:hover{background:#C9A25A !important;border-color:#C9A25A !important;color:#0B0B0B !important}

/* Buscador con mas presencia: se tiene que ver que es un campo */
/* El marco lo pone la caja, no el campo: antes se veian dos bordes */
html body.lujo.claro .cat-q,
html body.lujo.claro .cat-srch input{background:transparent !important;border:none !important;
  box-shadow:none !important;color:#1A1511 !important;font-size:13.5px !important}
html body.lujo.claro .cat-q:focus,
html body.lujo.claro .cat-srch input:focus{border:none !important;box-shadow:none !important}
html body.lujo.claro .cat-srch,
html body.lujo.claro .cat-q-wrap{border:1px solid rgba(26,21,17,.2) !important}
html body.lujo.claro .cat-srch:focus-within,
html body.lujo.claro .cat-q-wrap:focus-within{border-color:#1A1511 !important;
  box-shadow:0 0 0 3px rgba(26,21,17,.06) !important}
html body.lujo.claro .cat-srch svg,
html body.lujo.claro .cat-q + svg{stroke:rgba(26,21,17,.55) !important}

/* Franja de medios de pago en la ficha */
html body.lujo.claro .paystrip,
html body.lujo.claro .paystrip span{color:rgba(26,21,17,.55) !important}

/* Resumen plegable del pago: venia en blanco sobre blanco */
html body.lujo.claro .sb-l,
html body.lujo.claro .sb-bar,
html body.lujo.claro .sb-bar span{color:rgba(26,21,17,.62) !important}
html body.lujo.claro .sb-bar b,
html body.lujo.claro .sb-tot,
html body.lujo.claro .sb-bar .tot{color:#1A1511 !important;font-weight:800 !important}
html body.lujo.claro .sb-bar svg{stroke:rgba(26,21,17,.5) !important}

/* ── Resumen del pedido: todo su texto venia en marfil sobre tarjeta blanca ── */
html body.lujo.claro .sum-card,
html body.lujo.claro .sum-card *{color:rgba(26,21,17,.68)}
html body.lujo.claro .sum-card b,
html body.lujo.claro .sum-n,
html body.lujo.claro .sum-p,
html body.lujo.claro .sum-tot b,
html body.lujo.claro .sum-tot strong{color:#1A1511 !important;font-weight:700}
html body.lujo.claro .sum-tot b,
html body.lujo.claro .sum-tot strong{font-weight:800 !important}
html body.lujo.claro .sum-h,
html body.lujo.claro .sum-li,
html body.lujo.claro .sum-ship,
html body.lujo.claro .sum-casa,
html body.lujo.claro .sum-tot span,
html body.lujo.claro .sum-tr,
html body.lujo.claro .sum-tr li,
html body.lujo.claro .sum-tr span{color:rgba(26,21,17,.62) !important}
html body.lujo.claro .sum-t{color:#8F6A1E !important}
html body.lujo.claro .sum-tr svg{stroke:#8F6A1E !important}
html body.lujo.claro .sum-it{border-color:rgba(26,21,17,.12) !important}
html body.lujo.claro .sum-q,
html body.lujo.claro .sum-badge{background:#8F6A1E !important;color:#FFFFFF !important}
/* cupon */
html body.lujo.claro .ee-cup-abrir,
html body.lujo.claro .cup-t{color:rgba(26,21,17,.62) !important}
html body.lujo.claro .cup-in input{background:#FFFFFF !important;border:1px solid rgba(26,21,17,.18) !important;color:#1A1511 !important}
html body.lujo.claro .cup-in button{background:#1A1511 !important;border-color:#1A1511 !important;color:#F7F3EA !important}
html body.lujo.claro .cup-in button:hover{background:#8F6A1E !important;border-color:#8F6A1E !important}
/* logotipo en pago, gracias y seguimiento: la imagen, sin marco */
html body.lujo .brand-img{display:block;height:clamp(42px,4.6vw,54px);width:auto;object-fit:contain;
  border:none !important;border-radius:0 !important;box-shadow:none !important}
html body.lujo.claro .brand{padding:0 !important}

/* ── Portada: el hero es una tarjeta ──────────────────────────────────
   Como en Esencia: un panel oscuro con esquinas redondeadas, separado
   de los bordes, y el crema alrededor. Texto a la izquierda, logotipo a
   la derecha. La tira de casas sale de la tarjeta y va sobre el crema.
   ─────────────────────────────────────────────────────────────────── */
html body.lujo.claro .lx-hero{
  background:radial-gradient(120% 120% at 78% 0%,#1E160C 0%,#0E0C0A 55%,#0A0A0A 100%) !important;
  color:#F3EEE4 !important;
  max-width:min(1240px,calc(100% - clamp(16px,4vw,48px)));
  margin:clamp(14px,2.2vw,26px) auto clamp(18px,3vw,34px);
  border-radius:clamp(20px,2.4vw,30px);
  overflow:hidden;
  box-shadow:0 44px 90px -50px rgba(26,21,17,.55)}
html body.lujo.claro .lx-hero .lx-grid{min-height:min(62vh,560px)}
html body.lujo.claro .lx-hero .c{padding-left:clamp(22px,3.4vw,52px);padding-right:clamp(22px,3.4vw,52px)}
html body.lujo.claro .lx-hero h1,
html body.lujo.claro .lx-hero h2,
html body.lujo.claro .lx-hero b,
html body.lujo.claro .lx-hero strong{color:#F3EEE4 !important}
html body.lujo.claro .lx-hero p,
html body.lujo.claro .lx-hero .lx-sub{color:rgba(243,238,228,.66) !important}
html body.lujo.claro .lx-hero .kick,
html body.lujo.claro .lx-hero .lx-eye,
html body.lujo.claro .lx-hero em,
html body.lujo.claro .lx-hero i{color:#C9A25A !important}
html body.lujo.claro .lx-hero .lx-btn{background:#F7F3EA !important;border-color:#F7F3EA !important;color:#1A1511 !important}
html body.lujo.claro .lx-hero .lx-btn:hover{background:#C9A25A !important;border-color:#C9A25A !important;color:#0B0B0B !important}
html body.lujo.claro .lx-hero a{color:#F3EEE4}
html body.lujo.claro .lx-hero a:hover{color:#C9A25A}
html body.lujo.claro .lx-hero .lx-float.lx-logo{background:none;border:none;box-shadow:none;border-radius:0}
html body.lujo.claro .lx-hero .lx-float.lx-logo img{mix-blend-mode:screen !important}
/* La tira de casas es un banner: fondo negro, letras claras, en marcha */
html body.lujo.claro .lx-houses{background:#000 !important;border:none !important}
html body.lujo.claro .lx-houses span,
html body.lujo.claro .lx-houses a,
html body.lujo.claro .lx-houses li{color:rgba(243,238,228,.78) !important}
html body.lujo.claro .lx-houses .lx-tira span:nth-child(even){color:#C9A25A !important}


/* ── La navegacion pertenece al bloque negro de arriba ─────────────────
   Antes quedaba en crema justo debajo de la cabecera negra y partia el
   encabezado en dos piezas que no casaban. Ahora barra de anuncios,
   cabecera y navegacion son un solo bloque, y el crema empieza en el hero.
   ─────────────────────────────────────────────────────────────────── */
html body.lujo.claro .nav{background:#000 !important;border-top:1px solid rgba(243,238,228,.08) !important;
  border-bottom:none !important}
html body.lujo.claro .nav a{color:rgba(243,238,228,.7) !important}
html body.lujo.claro .nav a:hover{color:#C9A25A !important}
html body.lujo.claro .nav a.hot{color:#C9A25A !important}
html body.lujo.claro .nav .nav-drop-btn{color:rgba(243,238,228,.7) !important}

/* ── La tarjeta del hero, a escala en escritorio ───────────────────────
   En monitores anchos el titular se partia en cinco lineas y la tarjeta
   crecia sin control. Se acota la altura, se reparte mejor la rejilla y
   el titular baja de tamano para caer en dos o tres lineas.
   ─────────────────────────────────────────────────────────────────── */
@media(min-width:901px){
  html body.lujo.claro .lx-hero{max-width:min(1160px,calc(100% - clamp(32px,5vw,72px)))}
  html body.lujo.claro .lx-hero .lx-grid{min-height:0;grid-template-columns:1.12fr .88fr;
    align-items:center}
  html body.lujo.claro .lx-hero-t{padding:clamp(40px,4.4vw,64px) clamp(24px,3vw,44px)
    clamp(40px,4.4vw,64px) 0}
  html body.lujo.claro .lx-hero h1{font-size:clamp(38px,3.6vw,58px) !important;line-height:1.0;
    margin-bottom:20px}
  html body.lujo.claro .lx-hero p{font-size:15px;margin-bottom:28px;max-width:40ch}
  html body.lujo.claro .lx-hero-v{padding:clamp(24px,3vw,44px) 0}
  html body.lujo.claro .lx-hero-v .lx-float{width:min(82%,330px)}
}

/* ── Categorias: un solo panel oscuro partido en dos ───────────────────
   Sin fotos, dos cajas blancas sobre crema se leian como huecos vacios.
   Ahora son una sola pieza negra con un filo que la divide, del mismo
   lenguaje que la tarjeta del hero y la tira de casas.
   ─────────────────────────────────────────────────────────────────── */
html body.lujo.claro .lx-cats{background:#0B0B0B !important;border:none !important;
  border-radius:clamp(16px,2vw,24px);overflow:hidden;gap:1px !important;
  box-shadow:0 34px 66px -48px rgba(26,21,17,.55) !important}
html body.lujo.claro .lx-cat{background:#0B0B0B !important;border:none !important;
  box-shadow:inset 0 0 0 0 transparent !important;transition:background .25s ease}
html body.lujo.claro .lx-cat + .lx-cat{box-shadow:inset 1px 0 0 rgba(243,238,228,.13) !important}
html body.lujo.claro .lx-cat:hover{background:#17120D !important;border:none !important}
html body.lujo.claro .lx-cat-t{padding:clamp(24px,3vw,38px) clamp(20px,2.6vw,34px) !important}
html body.lujo.claro .lx-cat-t .lx-eye{color:#C9A25A !important}
html body.lujo.claro .lx-cat-t b{color:#F3EEE4 !important}
html body.lujo.claro .lx-cat-t i{color:rgba(243,238,228,.58) !important}
html body.lujo.claro .lx-cat-t .lx-link{color:#F3EEE4 !important;
  border-bottom:1px solid rgba(243,238,228,.3) !important;padding-bottom:5px}
html body.lujo.claro .lx-cat:hover .lx-cat-t .lx-link{color:#C9A25A !important;
  border-bottom-color:#C9A25A !important}

/* Las mismas tarjetas en claro: el enlace en espresso, no en marfil */
html body.lujo.claro .card-price::after{color:rgba(26,21,17,.46) !important}
html body.lujo.claro .card:hover .card-n{color:#8F6A1E !important}
/* Boton de compra en claro: espresso sobre la tarjeta blanca */
html body.lujo.claro .card-buy{background:#1A1511 !important;color:#F7F3EA !important;border:none !important}
html body.lujo.claro .card-buy:hover{background:#8F6A1E !important;color:#FFFFFF !important}
html body.lujo.claro .card-img{border-bottom:1px solid rgba(26,21,17,.10) !important}

/* ── Garantias: mismo panel oscuro que las categorias ─────────────────
   Una sola pieza negra partida en tres por un filo, para que la pagina
   tenga un solo lenguaje: negro la estructura, blanco lo que se compra.
   ─────────────────────────────────────────────────────────────────── */
html body.lujo.claro .lx-ben{background:#0B0B0B !important;border:none !important;
  border-radius:clamp(16px,2vw,24px);overflow:hidden;gap:1px !important;
  box-shadow:0 34px 66px -48px rgba(26,21,17,.55) !important}
html body.lujo.claro .lx-ben div{background:#0B0B0B !important;border:none !important;
  box-shadow:none !important;border-radius:0 !important;
  padding:clamp(24px,3vw,34px) clamp(20px,2.6vw,30px) !important}
html body.lujo.claro .lx-ben div + div{box-shadow:inset 1px 0 0 rgba(243,238,228,.13) !important}
html body.lujo.claro .lx-ben em{color:#C9A25A !important}
html body.lujo.claro .lx-ben b{color:#F3EEE4 !important}
html body.lujo.claro .lx-ben span{color:rgba(243,238,228,.58) !important}
@media(max-width:860px){
  html body.lujo.claro .lx-ben div + div{box-shadow:inset 0 1px 0 rgba(243,238,228,.13) !important}
}

/* La caja del buscador se llama .cat-srch: es ella quien lleva el marco */
html body.lujo.claro .cat-srch{background:#FFFFFF !important;border:1px solid rgba(26,21,17,.2) !important;
  box-shadow:0 8px 20px -18px rgba(26,21,17,.5) !important}
html body.lujo.claro .cat-srch:focus-within{border-color:#1A1511 !important;
  box-shadow:0 0 0 3px rgba(26,21,17,.06) !important}
html body.lujo.claro .cat-srch input,
html body.lujo.claro #cat-q{background:transparent !important;border:none !important;
  box-shadow:none !important;color:#1A1511 !important}
html body.lujo.claro .cat-srch input:focus,
html body.lujo.claro #cat-q:focus{border:none !important;box-shadow:none !important;outline:none}
html body.lujo.claro .cat-srch svg{stroke:rgba(26,21,17,.5) !important}

/* ── Buscador emergente ───────────────────────────────────────────────
   El campo heredaba el marco de todos los inputs y el texto de ayuda
   quedaba casi blanco sobre blanco.
   ─────────────────────────────────────────────────────────────────── */
html body.lujo.claro .sm-panel{background:#FFFFFF !important;border:1px solid rgba(26,21,17,.14) !important;
  box-shadow:0 40px 90px -40px rgba(26,21,17,.5) !important}
html body.lujo.claro .sm-bar{border-bottom:1px solid rgba(26,21,17,.1) !important}
html body.lujo.claro .sm-bar svg{stroke:rgba(26,21,17,.5) !important}
html body.lujo.claro #q-search{background:transparent !important;border:none !important;
  box-shadow:none !important;color:#1A1511 !important;font-size:15px !important}
html body.lujo.claro #q-search:focus{border:none !important;box-shadow:none !important;outline:none}
html body.lujo.claro #q-search::placeholder{color:rgba(26,21,17,.45) !important;opacity:1 !important}
html body.lujo.claro .sm-close{background:rgba(26,21,17,.06) !important;border:none !important;
  color:#1A1511 !important}
html body.lujo.claro .sm-close:hover{background:rgba(26,21,17,.12) !important}
html body.lujo.claro .search-res{background:#FFFFFF !important}
html body.lujo.claro .sr-hint{color:rgba(26,21,17,.55) !important}
html body.lujo.claro .sr-it{border-color:rgba(26,21,17,.08) !important;color:#1A1511 !important}
html body.lujo.claro .sr-it:hover{background:rgba(26,21,17,.05) !important}
html body.lujo.claro .sr-n{color:#1A1511 !important}
html body.lujo.claro .sr-h,
html body.lujo.claro .sr-casa{color:rgba(26,21,17,.55) !important}
html body.lujo.claro .sr-p{color:#1A1511 !important;font-weight:800 !important}

/* ── Preguntas frecuentes ─────────────────────────────────────────────
   Eran cajas blancas sueltas con una equis dorada. Pasan a lista: cada
   pregunta separada por un filo, con una flecha fina que gira al abrir.
   ─────────────────────────────────────────────────────────────────── */
html body.lujo.claro .faq h2{color:#1A1511 !important}
html body.lujo.claro .faq details{background:transparent !important;border:none !important;
  border-bottom:1px solid rgba(26,21,17,.12) !important;border-radius:0 !important;
  box-shadow:none !important;padding:0 !important;margin:0 !important}
html body.lujo.claro .faq details:first-of-type{border-top:1px solid rgba(26,21,17,.12) !important}
html body.lujo.claro .faq summary{color:#1A1511 !important;padding:18px 34px 18px 0 !important;
  position:relative;font-size:15px !important}
html body.lujo.claro .faq summary:hover{color:#8F6A1E !important}
html body.lujo.claro .faq summary::after{content:'' !important;position:absolute;right:6px;top:50%;
  width:9px;height:9px;margin-top:-6px;border-right:1.5px solid rgba(26,21,17,.45);
  border-bottom:1.5px solid rgba(26,21,17,.45);transform:rotate(45deg);
  transition:transform .22s ease,border-color .2s}
html body.lujo.claro .faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px;
  border-color:#8F6A1E}
html body.lujo.claro .faq p{color:rgba(26,21,17,.68) !important;margin:0 0 20px !important;
  padding-right:34px;max-width:70ch}

/* Boton de agregar desde el listado */
html body.lujo.claro .card-add{background:#1A1511 !important;color:#F7F3EA !important;border:none !important}
html body.lujo.claro .card-add:hover{background:#8F6A1E !important;color:#FFFFFF !important}

/* Cantidad rapida de la tarjeta en tema claro */
html body.lujo.claro .card-qty{border-color:rgba(26,21,17,.18) !important}
html body.lujo.claro .card-qty b{color:#1A1511 !important}
html body.lujo.claro .card-qty .cq{color:#1A1511 !important}
html body.lujo.claro .card-qty .cq:hover{background:rgba(26,21,17,.08) !important}

/* El titulo de cada pregunta venia con fondo blanco propio */
html body.lujo.claro .faq summary{background:transparent !important}
html body.lujo.claro .faq details[open]{background:transparent !important}
/* Flecha: hacia abajo cerrada, hacia arriba abierta */
html body.lujo.claro .faq summary::after{transform:rotate(45deg) !important}
html body.lujo.claro .faq details[open] summary::after{transform:rotate(225deg) !important}

/* Tarjeta: cantidad arriba y boton abajo, a todo el ancho.
   En dos lineas no hay forma de pulsar uno creyendo pulsar el otro. */
html body.lujo .card-buy-row{flex-direction:column !important;align-items:stretch !important;gap:8px !important}
html body.lujo .card-qty{justify-content:center;width:100%;height:40px}
html body.lujo .card-ver.card-add{width:100% !important}

/* Relacionadas en tema claro */
html body.lujo.claro .rc-qty{border-color:rgba(26,21,17,.18) !important}
html body.lujo.claro .rc-qty b,
html body.lujo.claro .rc-qty .rq{color:#1A1511 !important}
html body.lujo.claro .rc-qty .rq:hover{background:rgba(26,21,17,.08) !important}
html body.lujo.claro .rc-ver.rc-add{background:#1A1511 !important;color:#F7F3EA !important}
html body.lujo.claro .rc-ver.rc-add:hover{background:#8F6A1E !important;color:#FFFFFF !important}
html body.lujo.claro .rc-img{border-bottom:1px solid rgba(26,21,17,.10) !important}

/* ── Resumen del pedido ───────────────────────────────────────────────
   Todo alineado a una sola rejilla: miniatura fija, texto que crece y
   precio pegado a la derecha con cifras de ancho fijo, para que las
   columnas de importes queden a plomo.
   ─────────────────────────────────────────────────────────────────── */
html body.lujo.claro .sum-card{background:#FFFFFF !important;border:1px solid rgba(26,21,17,.12) !important;
  border-radius:16px !important}
html body.lujo.claro .sum-t{letter-spacing:.22em !important;font-size:9.5px !important;
  color:rgba(26,21,17,.45) !important;margin-bottom:6px !important}

/* linea de producto */
html body.lujo.claro .sum-it{display:grid !important;grid-template-columns:48px 1fr auto !important;
  align-items:center !important;gap:12px !important;padding:11px 0 !important;
  border-bottom:1px solid rgba(26,21,17,.08) !important}
html body.lujo.claro .sum-it:last-of-type{border-bottom:none !important}
html body.lujo.claro .sum-sw{width:48px !important;height:48px !important;border-radius:10px !important;
  background-color:#F6F2EA !important;background-size:contain !important;
  border:1px solid rgba(26,21,17,.10) !important;position:relative}
html body.lujo.claro .sum-qty{top:-6px !important;right:-6px !important;bottom:auto !important;
  min-width:18px !important;height:18px !important;background:#1A1511 !important;color:#F7F3EA !important;
  font-size:10px !important;box-shadow:0 0 0 2px #FFFFFF !important}
html body.lujo.claro .sum-i{min-width:0}
html body.lujo.claro .sum-n{font-size:13.5px !important;font-weight:700 !important;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body.lujo.claro .sum-h{font-size:9.5px !important;letter-spacing:.16em !important;margin-top:2px}
html body.lujo.claro .sum-p{font-weight:700 !important;font-size:13.5px !important;white-space:nowrap;
  text-align:right;font-variant-numeric:tabular-nums}

/* subtotal, descuento, envio */
html body.lujo.claro .sum-li{display:flex !important;justify-content:space-between !important;
  align-items:baseline !important;gap:14px !important;padding:6px 0 !important;font-size:13px !important;
  font-variant-numeric:tabular-nums}
html body.lujo.claro .sum-li > *:last-child{text-align:right;white-space:nowrap}
html body.lujo.claro .sum-tot{display:flex !important;justify-content:space-between !important;
  align-items:baseline !important;border-top:1px solid rgba(26,21,17,.12) !important;
  padding-top:14px !important;margin-top:12px !important}
html body.lujo.claro .sum-tot b{font-variant-numeric:tabular-nums}

/* cupon: una sola linea, con el boton a la misma altura del campo */
html body.lujo.claro .ee-cup-abrir{padding:12px 0 !important;border-top:1px solid rgba(26,21,17,.1) !important;
  margin-top:12px !important;color:rgba(26,21,17,.62) !important}
html body.lujo.claro .ee-cup-abrir .cup-ic{background:rgba(26,21,17,.06) !important}
html body.lujo.claro .ee-cup-abrir svg{stroke:rgba(26,21,17,.5) !important}
html body.lujo.claro .ee-cup-box{gap:8px !important;margin-top:0 !important;margin-bottom:12px !important}
html body.lujo.claro .ee-cup-box input{height:42px !important;padding:0 16px !important;
  border-radius:100px !important;border:1px solid rgba(26,21,17,.18) !important;background:#fff !important}
html body.lujo.claro .ee-cup-box button{height:42px !important;border-radius:100px !important;
  background:#1A1511 !important;color:#F7F3EA !important;padding:0 20px !important}
html body.lujo.claro .ee-cup-box button:hover{background:#8F6A1E !important}
html body.lujo.claro .ee-cup-box button:disabled{background:rgba(26,21,17,.18) !important;
  color:rgba(26,21,17,.5) !important}

/* nota de envio y promesas */
html body.lujo.claro .sum-ship{font-size:12px !important;color:rgba(26,21,17,.6) !important;
  margin-top:10px !important}
html body.lujo.claro .sum-note{display:flex;flex-direction:column;gap:8px !important;
  padding-top:14px !important;border-top:1px solid rgba(26,21,17,.1) !important;margin-top:14px !important}
html body.lujo.claro .sum-note span{display:flex;align-items:center;gap:8px;
  color:rgba(26,21,17,.62) !important;font-size:12px !important}
html body.lujo.claro .sum-note svg{width:14px;height:14px;flex:0 0 auto;stroke:#8F6A1E !important}

/* Cantidad rapida de la tarjeta en tema claro */
html body.lujo.claro .card-qty{border-color:rgba(26,21,17,.18) !important}
html body.lujo.claro .card-qty b{color:#1A1511 !important}
html body.lujo.claro .card-qty .cq{color:#1A1511 !important}
html body.lujo.claro .card-qty .cq:hover{background:rgba(26,21,17,.08) !important}

/* El titulo de cada pregunta venia con fondo blanco propio */
html body.lujo.claro .faq summary{background:transparent !important}
html body.lujo.claro .faq details[open]{background:transparent !important}
/* Flecha: hacia abajo cerrada, hacia arriba abierta */
html body.lujo.claro .faq summary::after{transform:rotate(45deg) !important}
html body.lujo.claro .faq details[open] summary::after{transform:rotate(225deg) !important}

/* Tarjeta: cantidad arriba y boton abajo, a todo el ancho.
   En dos lineas no hay forma de pulsar uno creyendo pulsar el otro. */
html body.lujo .card-buy-row{flex-direction:column !important;align-items:stretch !important;gap:8px !important}
html body.lujo .card-qty{justify-content:center;width:100%;height:40px}
html body.lujo .card-ver.card-add{width:100% !important}

/* Relacionadas en tema claro */
html body.lujo.claro .rc-qty{border-color:rgba(26,21,17,.18) !important}
html body.lujo.claro .rc-qty b,
html body.lujo.claro .rc-qty .rq{color:#1A1511 !important}
html body.lujo.claro .rc-qty .rq:hover{background:rgba(26,21,17,.08) !important}
html body.lujo.claro .rc-ver.rc-add{background:#1A1511 !important;color:#F7F3EA !important}
html body.lujo.claro .rc-ver.rc-add:hover{background:#8F6A1E !important;color:#FFFFFF !important}
html body.lujo.claro .rc-img{border-bottom:1px solid rgba(26,21,17,.10) !important}

/* ── Resumen del pedido ───────────────────────────────────────────────
   Estaba suelto: la miniatura con el globo encima, el cupon como una
   caja enorme y demasiado aire entre lineas. Se aprieta y se ordena.
   ─────────────────────────────────────────────────────────────────── */
html body.lujo.claro .sum-card{background:#FFFFFF !important;border:1px solid rgba(26,21,17,.12) !important;
  border-radius:16px !important;overflow:hidden}
html body.lujo.claro .sum-it{padding:12px 0 !important;gap:12px !important;
  border-bottom:1px solid rgba(26,21,17,.08) !important}
/* la miniatura, con marco propio y la cifra dentro, no encima */
html body.lujo.claro .sum-sw{width:52px !important;height:52px !important;border-radius:10px !important;
  background-color:#F6F2EA !important;background-size:contain !important;
  border:1px solid rgba(26,21,17,.10) !important;position:relative}
html body.lujo.claro .sum-qty{top:auto !important;right:-6px !important;bottom:-6px !important;
  min-width:19px !important;height:19px !important;background:#1A1511 !important;color:#F7F3EA !important;
  font-size:10px !important;box-shadow:0 0 0 2px #FFFFFF !important}
html body.lujo.claro .sum-n{font-size:13.5px !important;font-weight:700 !important}
html body.lujo.claro .sum-h{font-size:10px !important;letter-spacing:.16em !important}
html body.lujo.claro .sum-p{font-weight:700 !important;font-size:13.5px !important;white-space:nowrap}
/* las lineas de totales, mas juntas */
html body.lujo.claro .sum-li{padding:5px 0 !important;font-size:13px !important}
html body.lujo.claro .sum-tot{border-top:1px solid rgba(26,21,17,.12) !important;
  padding-top:14px !important;margin-top:10px !important}
/* el cupon deja de parecer un formulario aparte */
html body.lujo.claro .cup-in{gap:6px !important}
html body.lujo.claro .cup-in input{height:42px !important;border-radius:100px !important;
  padding:0 16px !important;font-size:13px !important}
html body.lujo.claro .cup-in button{height:42px !important;border-radius:100px !important;
  padding:0 18px !important;font-size:10px !important}
html body.lujo.claro .cup-in button:disabled{opacity:.45;cursor:default}
/* promesas del pie, en una linea cada una y discretas */
html body.lujo.claro .sum-note{gap:8px !important;padding-top:14px !important;
  border-top:1px solid rgba(26,21,17,.1) !important;margin-top:14px !important}
html body.lujo.claro .sum-note span{color:rgba(26,21,17,.62) !important;font-size:12px !important}
html body.lujo.claro .sum-note svg{stroke:#8F6A1E !important}

/* El cupon como un solo control: campo y boton dentro del mismo marco */
html body.lujo.claro .ee-cup-box{display:flex !important;align-items:center !important;gap:0 !important;
  border:1px solid rgba(26,21,17,.18) !important;border-radius:100px !important;background:#fff !important;
  overflow:hidden;padding:0 4px 0 0 !important;height:44px}
html body.lujo.claro .ee-cup-box input{height:100% !important;border:none !important;border-radius:0 !important;
  background:transparent !important;box-shadow:none !important;padding:0 6px 0 18px !important}
html body.lujo.claro .ee-cup-box input:focus{border:none !important;box-shadow:none !important;outline:none}
html body.lujo.claro .ee-cup-box:focus-within{border-color:#1A1511 !important;
  box-shadow:0 0 0 3px rgba(26,21,17,.06) !important}
html body.lujo.claro .ee-cup-box button{height:36px !important;border-radius:100px !important;
  padding:0 18px !important;background:#1A1511 !important;color:#F7F3EA !important;flex:0 0 auto}
html body.lujo.claro .ee-cup-box button:hover{background:#8F6A1E !important}
html body.lujo.claro .ee-cup-box button:disabled{background:transparent !important;
  color:rgba(26,21,17,.38) !important}

/* Cantidad: el menos a la izquierda, el mas a la derecha y la cifra al medio */
html body.lujo .card-qty,
html body.lujo .rc-qty,
html body.lujo.claro .card-qty,
html body.lujo.claro .rc-qty{justify-content:space-between !important;padding:0 6px !important;gap:0 !important}
html body.lujo .card-qty b,
html body.lujo .rc-qty b{flex:1 1 auto;text-align:center}
html body.lujo .card-qty .cq,
html body.lujo .rc-qty .rq{flex:0 0 auto}

/* Aviso de precios de referencia */
html body.lujo.claro .precio-aviso{color:rgba(26,21,17,.5) !important}

/* Confirmacion en verde: gana a la regla base del boton en tema claro */
html body.lujo.claro .card-add.puesto,
html body.lujo.claro .rc-add.puesto,
html body.lujo.claro .card-ver.card-add.puesto,
html body.lujo.claro .rc-ver.rc-add.puesto{background:#22C55E !important;border-color:#22C55E !important;
  color:#FFFFFF !important;box-shadow:0 10px 24px -14px rgba(34,197,94,.9) !important}