/* ═══════════════════════════════════════════════════════════════════════
   TEMAS DE LA WEB — capa común (Evolución Pulida + Retail Claro)
   ═══════════════════════════════════════════════════════════════════════
   El admin elige el tema en el panel (webTheme → config/public_settings) y
   theme-boot.js lo refleja como <html data-web-theme="clasico|pulida|retail">.

   REGLA DE ORO DE ESTE ARCHIVO: nada aquí debe afectar al tema CLÁSICO.
   Todo selector empieza por el tema activo, salvo el bloque "Visibilidad",
   que solo OCULTA lo que no existe en el clásico.

   · Tokens: cada tema los define en pulida.css / retail.css (--td-*).
   · Alcance: las reasignaciones de utilidades Tailwind alcanzan toda la
     página, panel admin incluido. Solo queda fuera el visor de imágenes
     (#lightbox-modal), con el guardián :where(:not(#lightbox-modal, #lightbox-modal *))
     pegado a la clase. OJO: no usar "body > * .clase": no alcanza a los
     hijos directos de <body> (pie, aviso de cookies…), que se quedaban con su
     fondo oscuro y el texto ya reasignado a oscuro (1.4:1). :where() deja la
     especificidad en cero para que las reglas de componente de abajo ganen.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Visibilidad por tema ─── */
html:not([data-web-theme="pulida"]) [data-theme-only="pulida"],
html:not([data-web-theme="retail"]) [data-theme-only="retail"],
html:not([data-web-theme="pulida"]):not([data-web-theme="retail"]) [data-theme-only="both"],
html:not([data-web-theme="pulida"]):not([data-web-theme="retail"]) .card-quick-add {
    display: none !important;
}

/* ─── Base ─── */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) body {
    background: var(--td-bg);
    background-image: var(--td-bg-image, none);
    color: var(--td-text);
    font-family: var(--td-font);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.font-heading, h1, h2, h3, h4):where(:not(#lightbox-modal, #lightbox-modal *)) {
    font-family: var(--td-font-head);
    letter-spacing: -0.02em;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) ::selection {
    background: var(--td-primary);
    color: var(--td-on-primary);
}

/* Fuera efectos "neón": partículas, blobs, brillos animados e itálicas. */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(#page-particles, .hero-particles, #hero > .absolute, #about .blur-xl, .bg-banner-purple-gradient > .absolute) {
    display: none !important;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.glow-text-purple-strong, .glow-text-purple-soft) {
    text-shadow: none !important;
    filter: none !important;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .hero-shimmer {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--td-primary-text);
    animation: none;
    filter: none;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #hero h1 {
    font-style: normal;
    letter-spacing: -0.035em;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .counter-number {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--td-primary-text);
}

/* ─── Reasignación de utilidades Tailwind (solo tienda) ─── */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.text-white, .text-gray-100, .text-gray-200):where(:not(#lightbox-modal, #lightbox-modal *)) { color: var(--td-text); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.text-gray-300, .text-white\/80, .text-white\/90):where(:not(#lightbox-modal, #lightbox-modal *)) { color: var(--td-text-2); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.text-gray-400, .text-white\/60, .text-white\/70):where(:not(#lightbox-modal, #lightbox-modal *)) { color: var(--td-muted); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.text-gray-500, .text-gray-600, .text-white\/40, .text-white\/50):where(:not(#lightbox-modal, #lightbox-modal *)) { color: var(--td-faint); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.hover\:text-white:hover, .hover\:text-brand:hover):where(:not(#lightbox-modal, #lightbox-modal *)) { color: var(--td-primary-text); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.text-brand, .text-brand-light, .text-purple-300):where(:not(#lightbox-modal, #lightbox-modal *)) { color: var(--td-primary-text); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.bg-brand, .bg-brand\/80):where(:not(#lightbox-modal, #lightbox-modal *)) { background-color: var(--td-primary); color: var(--td-on-primary); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.hover\:bg-brand-dark:hover, .hover\:bg-brand:hover, .hover\:bg-brand-light:hover):where(:not(#lightbox-modal, #lightbox-modal *)) { background-color: var(--td-primary-600); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.bg-brand\/10, .bg-brand\/15, .bg-brand\/20):where(:not(#lightbox-modal, #lightbox-modal *)) { background-color: var(--td-primary-soft); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.border-brand\/20, .border-brand\/30, .border-brand\/40, .border-brand\/50):where(:not(#lightbox-modal, #lightbox-modal *)) { border-color: var(--td-primary-line); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.bg-white\/5, .bg-white\/10, .bg-white\/15, .bg-dark-card\/60, .bg-dark-surface\/40):where(:not(#lightbox-modal, #lightbox-modal *)) { background-color: var(--td-surface-3); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.hover\:bg-white\/5:hover, .hover\:bg-white\/10:hover):where(:not(#lightbox-modal, #lightbox-modal *)) { background-color: var(--td-hover); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.border-white\/5, .border-white\/10, .border-white\/15, .border-white\/20, .border-white\/25):where(:not(#lightbox-modal, #lightbox-modal *)) { border-color: var(--td-line); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.bg-\[\#1a1638\], .bg-\[\#1a1638\]\/95, .bg-\[\#181238\], .bg-dark-card):where(:not(#lightbox-modal, #lightbox-modal *)) { background-color: var(--td-surface-2); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.bg-\[\#130f2e\], .bg-\[\#0f0c29\], .bg-\[\#0f0c29\]\/95, .bg-\[\#0a0815\], .bg-dark-bg\/60):where(:not(#lightbox-modal, #lightbox-modal *)) { background-color: var(--td-bg-2); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.bg-\[\#0b0921\]):where(:not(#lightbox-modal, #lightbox-modal *)) { background-color: var(--td-footer); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.bg-\[\#111111\], .bg-black\/20, .bg-black\/30):where(:not(#lightbox-modal, #lightbox-modal *)) { background-color: var(--td-input); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.placeholder-gray-500, .placeholder-gray-600):where(:not(#lightbox-modal, #lightbox-modal *))::placeholder { color: var(--td-faint); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.focus\:border-brand:focus, .hover\:border-brand\/50:hover, .hover\:border-brand\/60:hover):where(:not(#lightbox-modal, #lightbox-modal *)) { border-color: var(--td-primary); }
/* Gradientes decorativos del clásico → color sólido de marca del tema. */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .bg-gradient-to-r.from-brand:not(.bg-clip-text):where(:not(#lightbox-modal, #lightbox-modal *)) {
    background-image: none;
    background-color: var(--td-primary);
    color: var(--td-on-primary);
}
/* Texto con degradado (bg-clip-text) → texto sólido del color de marca. */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .bg-clip-text.from-brand:where(:not(#lightbox-modal, #lightbox-modal *)) {
    background-image: none;
    color: var(--td-primary-text);
    -webkit-text-fill-color: currentColor;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .from-purple-600\/20:where(:not(#lightbox-modal, #lightbox-modal *)) {
    background-image: none;
    background-color: var(--td-primary-soft);
    border-color: transparent;
}
/* Sombras "glow" de color → sombras neutras. */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is([class*="shadow-[0_0"], .shadow-2xl, .shadow-xl):where(:not(#lightbox-modal, #lightbox-modal *)) {
    box-shadow: var(--td-shadow);
}

/* ═══ CABECERA ═══
   Mismo marcado que el clásico, reorganizado con grid:
   fila 1 → logo · buscador · asistente · modo de vista · admin
   fila 2 → secciones a la izquierda, pedidos y carrito a la derecha */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .glass-nav {
    background: var(--td-nav-bg);
    backdrop-filter: saturate(160%) blur(16px);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    border-bottom: 1px solid var(--td-line);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .glass-nav.scrolled {
    background: var(--td-nav-bg-solid);
    box-shadow: var(--td-shadow);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #main-nav > .max-w-7xl {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
    grid-template-areas:
        "logo search actions orders cart admin"
        "links links links links vm mode";
    column-gap: 12px;
    align-items: center;
    max-width: var(--td-maxw);
    padding-inline: var(--td-gutter);
}
/* Las tres filas del nav clásico se disuelven para poder colocar cada pieza. */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #main-nav .nav-inner,
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #main-nav .nav-inner + div,
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #main-nav .nav-inner + div + div {
    display: contents;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .nav-sections {
    grid-area: links;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 8px 0 10px;
    border-top: 1px solid var(--td-line);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .nav-sections::-webkit-scrollbar { display: none; }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .td-header-actions { grid-area: actions; }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #btn-orders { grid-area: orders; margin: 0; }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #btn-cart-wrapper { grid-area: cart; }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .td-catnav { grid-area: links; padding: 6px 0 10px; border-top: 1px solid var(--td-line); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .td-mode-link { grid-area: mode; justify-self: end; }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #main-nav .nav-inner + div + div > div:first-child { display: none; }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #main-nav .nav-inner > div:first-child { grid-area: vm; width: auto; justify-self: end; }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #logo-home { grid-area: logo; margin: 0; padding: 14px 0; }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #main-nav .nav-inner > div:last-child { grid-area: admin; margin: 0; }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #catalog-search { grid-area: search; justify-self: center; max-width: 560px; width: 100%; }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .nav-logo,
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .glass-nav.scrolled .nav-logo {
    height: 30px !important;
    margin: 0;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #btn-admin img {
    width: 38px;
    height: 38px;
    box-shadow: none;
    border: 1px solid var(--td-line);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #btn-view-mode {
    width: 40px;
    height: 40px;
    background: transparent;
    border-color: var(--td-line);
    box-shadow: none;
    animation: none;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #btn-view-mode.active {
    background: var(--td-primary-soft);
    border-color: var(--td-primary-line);
    box-shadow: none;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #btn-view-mode i { color: var(--td-muted); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #btn-open-chatbot {
    width: 42px;
    height: 42px;
    box-shadow: none;
    border-color: var(--td-line-2);
}
/* Fila 2: secciones + pedidos + carrito */

/* main.css fuerza color con !important y un brillo rosa: aquí se neutraliza. */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .nav-link {
    font-size: 0.875rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-weight: 500;
    color: var(--td-muted) !important;
    text-shadow: none !important;
    transform: none !important;
    padding: 6px 12px;
    border-radius: 8px;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .nav-link::after { display: none; }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .nav-link:hover,
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .nav-link.active,
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) body.tab-mode .nav-link-active {
    color: var(--td-text) !important;
    background: var(--td-hover);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) body.tab-mode .nav-link-active::after { display: none; }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #btn-cart-wrapper {
    order: 10;
    gap: 8px;
    color: var(--td-text);
    background: var(--td-surface-3);
    border: 1px solid var(--td-line);
    padding: 6px 14px;
    font-weight: 600;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #btn-cart-wrapper::before {
    content: '\f290';
    font: var(--fa-font-solid);
    color: var(--td-primary-text);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #cart-count {
    position: static;
    width: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--td-accent);
    box-shadow: none;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #cart-count.scale-0 { display: none; }

/* Buscador */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .catalog-search {
    height: 46px;
    background: var(--td-input);
    border: 1px solid var(--td-line-2);
    border-radius: 12px;
    box-shadow: none;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .catalog-search:focus-within {
    border-color: var(--td-primary);
    background: var(--td-surface-2);
    box-shadow: 0 0 0 4px var(--td-primary-soft);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .catalog-search-icon { color: var(--td-faint); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .catalog-search-input { color: var(--td-text); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .catalog-search-input::placeholder { color: var(--td-faint); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .catalog-search-clear { background: var(--td-surface-3); color: var(--td-muted); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .search-autocomplete {
    background: var(--td-surface-2);
    border: 1px solid var(--td-line-2);
    box-shadow: var(--td-shadow-lg);
    border-radius: 14px;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .search-ac-item:hover,
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .search-ac-item.active { background: var(--td-hover); color: inherit; margin-bottom: 0; }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .search-ac-item-title { color: var(--td-text); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .search-ac-item-title mark { background: var(--td-primary-soft); color: var(--td-primary-text); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .search-ac-item-price { color: var(--td-text); font-weight: 700; }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.search-ac-item-category, .search-ac-empty) { color: var(--td-faint); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .search-ac-item-img { background: var(--td-img-bg); }

/* Tooltip del asistente */
/* Debajo del botón (a la izquierda caería encima del buscador). */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #chatbot-tooltip {
    top: calc(100% + 10px);
    right: 0;
    left: auto;
    bottom: auto;
    margin: 0;
    transform: translateY(-8px);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #chatbot-tooltip.active { transform: translateY(0); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #chatbot-tooltip .tooltip-arrow {
    top: 0;
    right: 14px;
    left: auto;
    transform: translateY(-50%) rotate(45deg);
    border: 0;
    border-top: 1px solid var(--td-line-2);
    border-left: 1px solid var(--td-line-2);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #chatbot-tooltip > div {
    background: var(--td-surface-2);
    color: var(--td-text-2);
    border-color: var(--td-line-2);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #chatbot-tooltip .tooltip-arrow {
    background: var(--td-surface-2);
    border-color: var(--td-line-2);
}

/* ═══ HERO ═══ */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #hero {
    min-height: auto;
    padding-bottom: 56px;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #hero h1 { font-weight: 800; }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .hero-cta-btn {
    background: var(--td-primary);
    border-radius: 12px;
    box-shadow: var(--td-cta-shadow);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .hero-cta-btn:hover {
    background: var(--td-primary-600);
    box-shadow: var(--td-cta-shadow);
    transform: translateY(-1px);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #hero a.rounded-2xl { border-radius: 12px; }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .hero-carousel-track {
    background: var(--td-img-bg);
    border: 1px solid var(--td-line);
    border-radius: 20px;
    box-shadow: var(--td-shadow-lg);
}
/* El título "Productos más vendidos" se montaba (margen negativo) sobre la tarjeta. */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #hero-carousel > div:first-child { margin: 0 0 14px !important; }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .hero-dot { border-color: var(--td-line-2); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .hero-dot.active { background: var(--td-primary); border-color: var(--td-primary); box-shadow: none; }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .hero-carousel-arrow,
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .product-carousel-arrow {
    background: var(--td-surface-2);
    border: 1px solid var(--td-line-2);
    color: var(--td-text);
    box-shadow: var(--td-shadow);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .product-carousel-arrow:hover {
    background: var(--td-primary);
    border-color: var(--td-primary);
    color: var(--td-on-primary);
    box-shadow: var(--td-shadow);
}

/* Banner promocional */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .bg-banner-purple-gradient {
    background: var(--td-promo);
    border: 1px solid var(--td-primary-line);
    box-shadow: none;
}

/* ═══ CATÁLOGO ═══ */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #products { max-width: var(--td-maxw); padding-inline: var(--td-gutter); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #products .w-20.h-1,
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) section .w-20.h-1 { display: none; }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .category-chip {
    background: transparent;
    border: 1px solid var(--td-line-2);
    color: var(--td-muted);
    font-size: 0.875rem;
    padding: 9px 16px;
    box-shadow: none;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .category-chip:hover {
    background: var(--td-hover);
    border-color: var(--td-line-2);
    color: var(--td-text);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .category-chip.active {
    background: var(--td-chip-active-bg);
    border-color: var(--td-chip-active-bg);
    color: var(--td-chip-active-text);
    box-shadow: none;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #view-mode-toggle { background: var(--td-surface); border-color: var(--td-line); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .view-mode-btn { color: var(--td-faint); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .view-mode-btn:hover { color: var(--td-text); background: var(--td-hover); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .view-mode-btn.active { color: var(--td-chip-active-text); background: var(--td-chip-active-bg); box-shadow: none; }

/* Tarjeta de producto */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.product-card, .product-list-item, .skeleton-card) {
    background: var(--td-surface);
    border: 1px solid var(--td-line);
    border-radius: var(--td-radius-card);
    backdrop-filter: none;
    box-shadow: var(--td-card-shadow, none);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .product-card::before { display: none; }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.product-card, .product-list-item):hover {
    transform: translateY(-3px);
    border-color: var(--td-line-2);
    box-shadow: var(--td-shadow-lg);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .product-card > .relative,
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .product-list-item .list-img-wrap {
    background: var(--td-img-bg);
}
/* El panel "Ver Detalles" al pasar el mouse sobra: la tarjeta entera abre el detalle. */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .product-card .bg-brand\/60 { display: none; }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .product-card h3,
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .product-list-item h3 {
    font-family: var(--td-font);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.005em;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.product-card, .product-list-item) .text-xl.text-brand-light {
    color: var(--td-text);
    font-family: var(--td-font-head);
    font-weight: 800;
    letter-spacing: -0.02em;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .card-quick-add {
    margin-top: 12px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.8125rem;
    font-weight: 700;
    position: relative;
    z-index: 25;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .card-quick-add:disabled {
    background: transparent;
    border: 1px solid var(--td-line);
    color: var(--td-faint);
    cursor: not-allowed;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .product-list-item .card-quick-add {
    margin: 0 0 0 auto;
    padding: 0 16px;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .skeleton-shimmer {
    background: linear-gradient(90deg, var(--td-surface-3) 0%, var(--td-hover) 50%, var(--td-surface-3) 100%);
    background-size: 200% 100%;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #infinite-scroll-spinner { background: var(--td-surface); border-color: var(--td-line); }

/* ═══ SECCIONES ═══ */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.faq-item, .trust-card, .pillar-card) {
    background: var(--td-surface);
    border: 1px solid var(--td-line);
    backdrop-filter: none;
    box-shadow: var(--td-card-shadow, none);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.trust-card, .pillar-card):hover {
    transform: translateY(-3px);
    border-color: var(--td-line-2);
    background: var(--td-surface);
    box-shadow: var(--td-shadow);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .faq-item:hover { border-color: var(--td-line-2); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .faq-item.open {
    background: var(--td-surface);
    border-color: var(--td-primary-line);
    box-shadow: none;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .faq-question { color: var(--td-text); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .faq-question:hover { background: var(--td-hover); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .faq-question i { color: var(--td-faint); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .faq-item.open .faq-question,
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .faq-item.open .faq-question i { color: var(--td-primary-text); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #about {
    background: var(--td-band);
    border-color: var(--td-line);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #about-image { border-color: var(--td-line); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #business-card-img { border-color: var(--td-line); }

/* Footer */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #footer { border-color: var(--td-line); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .newsletter-input {
    background: var(--td-input);
    border: 1px solid var(--td-line-2);
    color: var(--td-text);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .newsletter-input:focus {
    border-color: var(--td-primary);
    box-shadow: 0 0 0 4px var(--td-primary-soft);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .footer-social-icon {
    background: var(--td-surface-3);
    border: 1px solid var(--td-line);
    color: var(--td-muted);
    box-shadow: none;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .footer-social-icon:hover {
    background: var(--td-primary);
    border-color: var(--td-primary);
    color: var(--td-on-primary);
    box-shadow: none;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .payment-icon {
    background: transparent;
    border: 1px solid var(--td-line);
    color: var(--td-muted);
}

/* ═══ MODALES ═══ */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(#product-detail-backdrop, #orders-tracking-backdrop, #cart-overlay),
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #checkout-modal {
    background-color: var(--td-overlay);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #product-detail-modal > .relative,
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #orders-tracking-modal > .relative,
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #checkout-modal > div {
    background: var(--td-surface-2);
    border: 1px solid var(--td-line-2);
    border-radius: 24px;
    box-shadow: var(--td-shadow-lg);
}
/* Columna de imagen del detalle: fondo claro como las fotos del catálogo. */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #product-detail-modal > .relative > div.w-full:first-of-type { background: var(--td-img-bg); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #detail-thumbnails img { background: #fff; }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #detail-title { font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); letter-spacing: -0.025em; }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #detail-price {
    color: var(--td-text);
    font-family: var(--td-font-head);
    font-weight: 800;
    letter-spacing: -0.02em;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #detail-desc-fade { background: linear-gradient(to top, var(--td-surface-2), transparent); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #detail-add-cart {
    background: var(--td-primary);
    color: var(--td-on-primary);
    border-radius: 12px;
    box-shadow: var(--td-cta-shadow);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #detail-add-cart:hover { background: var(--td-primary-600); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #btn-share-product {
    background: var(--td-surface-2);
    color: var(--td-text);
    border: 1px solid var(--td-line-2);
    box-shadow: var(--td-shadow);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #sticky-add-cart-bar {
    background: var(--td-surface-2);
    border-color: var(--td-line-2);
    box-shadow: var(--td-shadow-lg);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .markdown-body { color: var(--td-muted); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .markdown-body :is(h1, h2, h3, h4, h5, h6, strong) { color: var(--td-text); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .markdown-body :is(em, blockquote) { color: var(--td-text-2); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .markdown-body blockquote { border-left-color: var(--td-primary); background: var(--td-primary-soft); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .markdown-body a { color: var(--td-primary-text); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .markdown-body :is(th, td) { border-color: var(--td-line); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .markdown-body th { background: var(--td-surface-3); color: var(--td-text); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #orders-tracking-modal .input-pro {
    background: var(--td-input);
    border-color: var(--td-line-2);
    color: var(--td-text);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #orders-tracking-modal .input-pro:focus { border-color: var(--td-primary); }
/* La tarjeta de presentación ampliada es un visor oscuro: conserva su contraste. */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #business-card-lightbox :is(.text-white, button) { color: #fff; }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #business-card-lightbox .bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }

/* ═══ CARRITO: panel fijo a la derecha ═══
   cart.js lo centra y lo hace arrastrable con estilos inline; aquí se ancla
   con !important y cart.js ya no arranca el arrastre en estos temas.
   `display` lo sigue controlando cart.js (abre/cierra y detecta el estado). */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #cart-drawer {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    transform: none !important;
    width: min(420px, 100vw) !important;
    height: 100vh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    border: 0;
    border-left: 1px solid var(--td-line-2);
    background: var(--td-surface-2);
    box-shadow: var(--td-shadow-lg);
    animation: td-drawer-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 215 !important; /* por encima de los flotantes de redes (z-200) */
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #cart-overlay { z-index: 210 !important; }
@keyframes td-drawer-in {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #cart-drag-handle {
    cursor: default;
    border-radius: 0;
    background: var(--td-surface-2);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #cart-drawer > div:last-child {
    border-radius: 0;
    background: var(--td-bg-2);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #cart-total { color: var(--td-text); font-family: var(--td-font-head); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #btn-checkout {
    background: var(--td-primary);
    color: var(--td-on-primary);
    border-radius: 12px;
    box-shadow: var(--td-cta-shadow);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #btn-checkout:hover { background: var(--td-primary-600); }

/* ═══ CHECKOUT ═══ */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #checkout-form :is(input, select, textarea):not([type="checkbox"]) {
    background: var(--td-input);
    border-color: var(--td-line-2);
    color: var(--td-text);
    border-radius: 12px;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #checkout-form :is(input, select, textarea):focus {
    border-color: var(--td-primary);
    box-shadow: 0 0 0 4px var(--td-primary-soft);
    --tw-ring-color: transparent;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #checkout-form label.block { color: var(--td-text-2); font-weight: 600; }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #checkout-total { color: var(--td-text); font-family: var(--td-font-head); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(#btn-pay-whatsapp, #btn-pay-wompi) { border-radius: 12px; }

/* ═══ ASISTENTE ═══ */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #chatbot-window {
    background: var(--td-surface-2);
    border: 1px solid var(--td-line-2);
    border-radius: 20px;
    box-shadow: var(--td-shadow-lg);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #chatbot-drag-handle {
    background: var(--td-chat-head);
    cursor: default;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #chat-messages { background: var(--td-bg-2); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .chat-bot {
    background: var(--td-surface);
    color: var(--td-text);
    border: 1px solid var(--td-line);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .chat-user { background: var(--td-primary); color: var(--td-on-primary); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #chat-input {
    background: var(--td-input);
    border-color: var(--td-line-2);
    color: var(--td-text);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #chat-submit { background: var(--td-primary); color: var(--td-on-primary); }

/* ═══ FLOTANTES ═══ */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .social-float-btn {
    animation: none;
    box-shadow: var(--td-shadow);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .scroll-to-top {
    background: var(--td-surface-2);
    border: 1px solid var(--td-line-2);
    color: var(--td-muted);
    box-shadow: var(--td-shadow);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .scroll-to-top:hover {
    background: var(--td-primary);
    color: var(--td-on-primary);
    box-shadow: var(--td-shadow);
}

/* ═══ SELECTOR TIENDA / SERVICIOS Y PRELOADER ═══ */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #mode-overlay { background: var(--td-overlay-solid); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(#mode-store, #mode-services) {
    background: var(--td-surface);
    border-color: var(--td-line-2);
    border-radius: 20px;
    box-shadow: var(--td-shadow);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(#mode-store, #mode-services):hover {
    border-color: var(--td-primary);
    transform: translateY(-3px);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .preloader { background: var(--td-bg); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .preloader-spinner {
    border-color: var(--td-primary-soft);
    border-top-color: var(--td-primary);
}

/* ═══ CHECKOUT POR PASOS (lo activa checkout-steps.js solo en Retail) ═══ */
.chk-step-hidden { display: none !important; }
html[data-web-theme="retail"] .chk-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--td-faint);
}
html[data-web-theme="retail"] .chk-stepper li {
    display: flex;
    align-items: center;
    gap: 8px;
}
html[data-web-theme="retail"] .chk-stepper li + li::before {
    content: '';
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--td-line-2);
}
html[data-web-theme="retail"] .chk-stepper li span {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 2px solid var(--td-line-2);
}
html[data-web-theme="retail"] .chk-stepper li.is-active { color: var(--td-text); }
html[data-web-theme="retail"] .chk-stepper li.is-active span {
    background: var(--td-primary);
    border-color: var(--td-primary);
    color: var(--td-on-primary);
}
html[data-web-theme="retail"] .chk-stepper li.is-done { color: var(--td-primary-text); }
html[data-web-theme="retail"] .chk-stepper li.is-done span { border-color: var(--td-primary); background: var(--td-primary-soft); }
html[data-web-theme="retail"] .chk-stepper li.is-done + li::before,
html[data-web-theme="retail"] .chk-stepper li.is-active + li::before { background: var(--td-line-2); }
html[data-web-theme="retail"] .chk-stepper li.is-done + li::before { background: var(--td-primary); }
html[data-web-theme="retail"] .chk-step-nav {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-top: 8px;
}
html[data-web-theme="retail"] .chk-step-nav button {
    height: 46px;
    padding: 0 18px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.9375rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
html[data-web-theme="retail"] .chk-step-nav button[hidden] { display: none; }
html[data-web-theme="retail"] .chk-prev { color: var(--td-muted); }
html[data-web-theme="retail"] .chk-prev:hover { color: var(--td-text); }
html[data-web-theme="retail"] .chk-next {
    margin-left: auto;
    background: var(--td-primary);
    color: var(--td-on-primary);
}
html[data-web-theme="retail"] .chk-next:hover { background: var(--td-primary-600); }

/* ═══ SERVICIOS Y LEGAL ═══ */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .hero-glow { background: var(--td-hero-glow, none); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .prose h2 { color: var(--td-text); border-color: var(--td-line); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .prose h3 { color: var(--td-primary-text); }
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.prose p, .prose ul) { color: var(--td-muted); }

/* ═══ MÓVIL ═══ */
@media (max-width: 767px) {
    html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #main-nav > .max-w-7xl {
        grid-template-columns: auto minmax(0, 1fr) auto auto auto;
        grid-template-areas:
            "logo . chat mode admin"
            "search search search search search"
            "links links links links links";
        column-gap: 8px;
        padding-inline: 16px;
    }
    html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #logo-home { padding: 10px 0; }
    html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .nav-logo,
    html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .glass-nav.scrolled .nav-logo { height: 24px !important; }
    html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #catalog-search { max-width: none; margin-bottom: 8px; height: 42px; }
    html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #btn-view-mode,
    html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #btn-open-chatbot { width: 36px; height: 36px; }
    html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #btn-admin img { width: 34px; height: 34px; }
    html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .nav-link { padding: 5px 10px; font-size: 0.8125rem !important; }
    html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #hero { padding-bottom: 32px; }
    html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .card-quick-add { width: 100%; }
    /* Con overflow, justify-center recorta el primer chip: se alinea al inicio. */
    html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .categories-scroll { justify-content: flex-start; }
    html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .product-card .border-t.flex {
        flex-wrap: wrap;
        gap: 6px;
    }
    html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .product-list-item .card-quick-add { width: auto; }
    html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #product-detail-modal > .relative,
    html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #checkout-modal > div { border-radius: 20px; }
}

/* Barras propias de los temas (anuncios, utilitaria, inferior móvil) */
.theme-announce,
.theme-utility {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    min-height: 34px;
    padding: 0 16px;
    font-size: 0.8125rem;
}
@media (max-width: 640px) {
    .theme-hide-sm { display: none !important; }
    .theme-announce, .theme-utility { font-size: 0.75rem; gap: 14px; }
}

/* Barra de desplazamiento de la PÁGINA. Las reglas de retail.css usan
   `html[...] ::-webkit-scrollbar-thumb`, con combinador descendente, así que
   no alcanzan a la del propio <html>: seguía saliendo el magenta de main.css,
   muy llamativo sobre el fondo claro de Retail. */
html:is([data-web-theme="pulida"], [data-web-theme="retail"])::-webkit-scrollbar-thumb {
    background: var(--td-line-2);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"])::-webkit-scrollbar-thumb:hover {
    background: var(--td-primary);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"])::-webkit-scrollbar-track {
    background: var(--td-bg-2);
}

/* ─── Contraste (WCAG AA, medido el 2026-09-22) ─── */
/* Placeholders: la base de Tailwind los pinta #9ca3af en todos los campos, que
   sobre el blanco de Retail da 2.54:1. Se atan al gris legible de cada tema. */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(input, textarea)::placeholder {
    color: var(--td-faint);
    opacity: 1;
}
/* Cabecera del chat en Retail claro: su fondo es el violeta de acción, pero
   .text-white se reasigna a texto oscuro (2.31:1). Aquí el texto va en blanco. */
html[data-web-theme="retail"]:not([data-retail-mode="dark"]) #chatbot-drag-handle :is(h4, p) {
    color: var(--td-on-primary);
}

/* Cerrar el seguimiento de pedidos: botón negro al 50 % con el icono reasignado
   a gris oscuro (1.64:1). Se pinta como un botón más del tema. */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #btn-close-tracking {
    background: var(--td-surface-3);
    color: var(--td-text);
}
/* Iconos de la cabecera del chat (vaciar, cerrar) en Retail claro: gris sobre
   el violeta de la cabecera (1.2:1). */
html[data-web-theme="retail"]:not([data-retail-mode="dark"]) #chatbot-drag-handle :is(button, i) {
    color: var(--td-on-primary);
}

/* Flechas de la galería de la ficha: negro al 50 % y opacidad 70 % sobre el
   fondo claro de las fotos (2.76:1). Pastilla oscura opaca e icono blanco. */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(#prev-img-btn, #next-img-btn) {
    background-color: rgba(15, 14, 21, 0.72);
    color: #ffffff;
}
@media (max-width: 767px) {
    html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(#prev-img-btn, #next-img-btn) {
        opacity: 1;
    }
}

/* Brillo de carga de las imágenes sobre los fondos de Pulida y Retail
   (en Retail claro el gris del clásico no se vería). */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) img.td-img-loading {
    background-color: var(--td-surface-3);
    background-image: linear-gradient(90deg, var(--td-surface-3) 0%, var(--td-hover) 50%, var(--td-surface-3) 100%);
    background-size: 200% 100%;
}