/* ============================================================
   JD POLISH — capa de diseño propia sobre el tema Shofy
   ------------------------------------------------------------
   Se carga DESPUÉS del CSS del tema (ver layouts/base.blade.php),
   por eso puede sobrescribirlo sin usar !important en casi nada.

   Reglas de la casa:
   · CSS plano, sin compilar: se sube por FTP y ya.
   · No se toca el HTML del tema, así una actualización de Shofy
     no borra este trabajo.
   · Para desactivarlo todo: quitar el <link> de base.blade.php.
     La tienda vuelve exactamente a como estaba.
   ============================================================ */

:root {
    /* Radios: un solo sistema para todo el sitio. */
    --jd-radius-sm: 10px;
    --jd-radius: 14px;
    --jd-radius-lg: 22px;

    /* Sombras suaves y de tinta fría — nunca negro puro, que se ve sucio. */
    --jd-shadow-sm: 0 2px 10px -6px rgba(16, 18, 40, .28);
    --jd-shadow: 0 14px 30px -20px rgba(16, 18, 40, .5);
    --jd-shadow-lg: 0 26px 52px -28px rgba(16, 18, 40, .55);

    /* Curva de animación: arranca rápido y frena suave (sensación "app"). */
    --jd-ease: cubic-bezier(.2, .7, .3, 1);
}

/* ------------------------------------------------------------
   1. BASE
   ------------------------------------------------------------ */

html {
    scroll-behavior: smooth;
}

::selection {
    background: rgba(var(--primary-color-rgb), .18);
}

/* Foco visible para quien navega con teclado. Solo :focus-visible,
   así el clic con mouse no deja el anillo pegado. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ------------------------------------------------------------
   2. BOTONES
   Shofy usa la familia .tp-btn*. Se les da profundidad y
   respuesta al toque, sin cambiar sus colores.
   ------------------------------------------------------------ */

.tp-btn,
.tp-btn-2,
.tp-btn-blue,
.tp-btn-green,
.tp-btn-white,
.tp-btn-border,
.tp-btn-border-sm,
.tp-btn-border-white,
.btn {
    border-radius: var(--jd-radius-sm);
    transition: transform .18s var(--jd-ease),
                box-shadow .18s var(--jd-ease),
                background-color .18s var(--jd-ease),
                color .18s var(--jd-ease);
    will-change: transform;
}

.tp-btn:hover,
.tp-btn-2:hover,
.tp-btn-blue:hover,
.tp-btn-green:hover,
.tp-btn-white:hover {
    transform: translateY(-2px);
    box-shadow: var(--jd-shadow);
}

/* El "click" físico: se hunde. Es el detalle que más se siente en móvil. */
.tp-btn:active,
.tp-btn-2:active,
.tp-btn-blue:active,
.tp-btn-green:active,
.tp-btn-white:active,
.tp-btn-border:active,
.btn:active {
    transform: translateY(0) scale(.985);
    box-shadow: var(--jd-shadow-sm);
}

.tp-btn-border:hover,
.tp-btn-border-sm:hover,
.tp-btn-border-white:hover {
    transform: translateY(-1px);
}

/* ------------------------------------------------------------
   3. TARJETA DE PRODUCTO
   Estructura real del tema:
     .tp-product-item > .tp-product-thumb + .tp-product-content
   ------------------------------------------------------------ */

.tp-product-item {
    background: #fff;
    border-radius: var(--jd-radius);
    padding: 10px 10px 16px;
    border: 1px solid rgba(16, 18, 40, .06);
    transition: transform .3s var(--jd-ease), box-shadow .3s var(--jd-ease);
}

.tp-product-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--jd-shadow-lg);
    border-color: rgba(var(--primary-color-rgb), .22);
}

.tp-product-thumb {
    border-radius: var(--jd-radius-sm);
    overflow: hidden;
    background: #f7f8fb;
}

.tp-product-thumb img {
    transition: transform .55s var(--jd-ease);
}

/* Zoom suave de la foto al pasar por encima. */
.tp-product-item:hover .tp-product-thumb img {
    transform: scale(1.06);
}

.tp-product-content {
    padding-top: 14px;
}

.tp-product-title a {
    transition: color .18s var(--jd-ease);
}

.tp-product-title a:hover {
    color: var(--primary-color);
}

/* El precio manda: se le da peso visual. */
.tp-product-price,
.tp-product-price-wrapper .tp-product-price {
    font-weight: 700;
    letter-spacing: -.01em;
}

/* Etiquetas (descuento, nuevo, agotado) tipo píldora. */
.tp-product-badge span,
.product-badge span {
    border-radius: 999px;
    padding: 4px 11px;
    font-weight: 600;
    letter-spacing: .01em;
    box-shadow: var(--jd-shadow-sm);
}

/* ------------------------------------------------------------
   4. FORMULARIOS
   Campos con foco claro: el cliente siempre sabe dónde escribe.
   ------------------------------------------------------------ */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
select,
textarea,
.form-control,
.form-select {
    border-radius: var(--jd-radius-sm);
    transition: border-color .18s var(--jd-ease), box-shadow .18s var(--jd-ease);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), .12);
    outline: none;
}

::placeholder {
    color: #b6b8c6;
    opacity: 1;
}

/* ------------------------------------------------------------
   5. TARJETAS Y PANELES GENÉRICOS
   Cubre carrito, checkout, cuenta y cualquier bloque con .card.
   ------------------------------------------------------------ */

.card {
    border-radius: var(--jd-radius);
    border-color: rgba(16, 18, 40, .07);
    box-shadow: var(--jd-shadow-sm);
}

.modal-content,
.offcanvas {
    border-radius: var(--jd-radius-lg);
    border: 0;
    box-shadow: var(--jd-shadow-lg);
}

/* En móvil el offcanvas va pegado a un borde: no se le redondean los cuatro. */
@media (max-width: 767px) {
    .offcanvas { border-radius: 0; }
}

.alert {
    border-radius: var(--jd-radius);
    border-width: 1px;
}

/* Imágenes de contenido con la misma curvatura que el resto. */
.tp-product-details-thumb img,
.tp-cart-img img,
.tp-order-info-list img {
    border-radius: var(--jd-radius-sm);
}

/* ============================================================
   6. FICHA DE PRODUCTO
   La página que convierte. Clases reales tomadas del DOM en vivo.
   ============================================================ */

/* --- Foto principal: marco propio, no una imagen suelta --- */
.tp-product-details-thumb-wrapper .nav-link,
.tp-product-details-thumb-wrapper .tab-pane img {
    border-radius: var(--jd-radius-lg);
}

.tp-product-details-thumb-wrapper img {
    border-radius: var(--jd-radius-lg);
    background: #f7f8fb;
}

/* La etiqueta de descuento (-96%) como píldora con peso. */
.tp-product-details-thumb-wrapper .tp-product-badge span,
.tp-product-details-thumb-wrapper [class*="badge"] span {
    border-radius: 999px;
    padding: 6px 14px;
    font-weight: 700;
    letter-spacing: .01em;
    box-shadow: var(--jd-shadow);
}

/* --- Título --- */
.tp-product-details-title {
    letter-spacing: -.02em;
    line-height: 1.22;
}

/* --- El precio manda en la página --- */
.tp-product-details-price-wrapper {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}

.tp-product-details-price.new-price {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--primary-color);
    line-height: 1.1;
}

.tp-product-details-price.old-price {
    font-size: 1.05rem;
    color: #a4a6b5;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    font-weight: 500;
}

/* --- Selector de cantidad tipo control de app --- */
.tp-product-details-quantity .tp-product-quantity,
.tp-product-details-quantity .tp-cart-plus-minus {
    border-radius: 999px;
    background: #f4f5fa;
    border: 1px solid #e7e9f2;
    overflow: hidden;
}

.tp-product-details-quantity input {
    background: transparent;
    border: 0;
    font-weight: 700;
}

/* --- Botones de compra: el punto más importante de la página --- */
.tp-product-details-add-to-cart-btn,
.tp-product-details-buy-now-btn {
    position: relative;
    overflow: hidden;
    border-radius: var(--jd-radius);
    padding-top: 15px;
    padding-bottom: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    transition: transform .18s var(--jd-ease), box-shadow .18s var(--jd-ease);
}

.tp-product-details-add-to-cart-btn:hover,
.tp-product-details-buy-now-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--jd-shadow);
}

.tp-product-details-add-to-cart-btn:active,
.tp-product-details-buy-now-btn:active {
    transform: translateY(0) scale(.99);
}

/* Destello lento sobre el botón principal: lo vuelve el foco de la
   página sin gritar. Solo en el de comprar, nunca en los dos. */
.tp-product-details-buy-now-btn::after,
.jd-express-pay::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 42%;
    height: 200%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .3), transparent);
    transform: rotate(16deg);
    animation: jdSheen 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes jdSheen {
    0%, 64% { left: -60%; }
    100% { left: 130%; }
}

/* --- Acciones secundarias (favoritos, comparar) como círculos --- */
.tp-product-details-action-sm-btn {
    border-radius: 999px;
    transition: background-color .18s var(--jd-ease), color .18s var(--jd-ease), transform .18s var(--jd-ease);
}

.tp-product-details-action-sm-btn:hover {
    transform: translateY(-1px);
    color: var(--primary-color);
}

/* --- Escasez real y promesa de entrega (ficha de producto) --- */
.jd-scarcity {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 4px;
    padding: 12px 15px;
    background: #fff5f2;
    border: 1px solid #ffd9cc;
    border-radius: var(--jd-radius);
    font-size: .88rem;
    color: #8c2f12;
}

.jd-scarcity strong { color: #c2410c; }

/* Punto que late: urgencia sin gritar. */
.jd-scarcity-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #f97316;
    flex: 0 0 9px;
    animation: jdBeat 1.6s ease-in-out infinite;
}

@keyframes jdBeat {
    0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, .45); }
    50% { box-shadow: 0 0 0 6px rgba(249, 115, 22, 0); }
}

/* Barra de lo que queda: mientras menos stock, más corta. */
.jd-scarcity-bar {
    flex: 1 1 100%;
    height: 5px;
    border-radius: 999px;
    background: #ffe4d9;
    overflow: hidden;
}

.jd-scarcity-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #f97316, #ef4444);
}

.jd-instant {
    margin: 14px 0 4px;
    padding: 11px 15px;
    background: #f0fdf6;
    border: 1px solid #c8f0da;
    border-radius: var(--jd-radius);
    font-size: .88rem;
    color: #14532d;
}

/* [JD] La caja del plugin de entrega estimada se OCULTA (no se apaga):
   sigue calculando el tiempo según el modo de entrega y la píldora
   verde (#jdDeliveryPill) espeja su valor en vivo. Una sola etiqueta
   visible, con el cerebro del plugin detrás. */
.delivery-estimate-box { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .jd-scarcity-dot { animation: none; }
}

/* --- Mensajes de entrega / confianza --- */
.tp-product-details-msg {
    background: #f7f8fc;
    border: 1px solid #eef0f7;
    border-radius: var(--jd-radius);
    padding: 14px 16px;
}

.tp-product-details-msg ul { margin-bottom: 0; }

/* --- Barra de compra flotante (aparece al bajar) --- */
.tp-product-details-sticky-actions {
    border-radius: var(--jd-radius-lg) var(--jd-radius-lg) 0 0;
    box-shadow: 0 -12px 34px -22px rgba(16, 18, 40, .6);
    /* [JD] Antes cristal esmerilado (backdrop-filter). RETIRADO: el
       backdrop-filter en una barra FIJA sobre una ficha de producto es un
       causante documentado de PÁGINAS EN BLANCO intermitentes en Chrome (la
       capa de composición a veces no repinta y muestra blanco hasta refrescar).
       Fondo casi opaco en su lugar: se ve prácticamente igual, sin el glitch. */
    background: rgba(255, 255, 255, .97);
    border-top: 1px solid rgba(16, 18, 40, .06);
    /* Respeta la barra de gestos del iPhone. */
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

/* --- Pestañas (Descripción / Reseñas / Vendedor) --- */
.tp-product-details-tab-nav .nav-link {
    border-radius: 999px;
    padding: 9px 18px;
    font-weight: 600;
    transition: background-color .18s var(--jd-ease), color .18s var(--jd-ease);
}

.tp-product-details-tab-nav .nav-link:hover {
    background: rgba(var(--primary-color-rgb), .07);
}

.tp-product-details-tab-nav .nav-link.active {
    background: rgba(var(--primary-color-rgb), .1);
    color: var(--primary-color);
}

/* --- Ficha de datos (SKU, categoría, etiquetas) --- */
.tp-product-details-query-item {
    padding: 7px 0;
    border-bottom: 1px solid #f1f2f8;
}

.tp-product-details-query-item:last-child { border-bottom: 0; }

/* ============================================================
   7. CABECERA
   Está en todas las páginas: es lo que dice si la tienda es seria.
   ============================================================ */

/* Barra pegajosa en cristal esmerilado, no un bloque blanco plano. */
.tp-header-sticky.header-sticky,
.tp-header-sticky.sticky,
.tp-header-sticky.is-sticky {
    /* [JD] backdrop-filter RETIRADO por el mismo motivo que la barra de compra:
       en la cabecera fija causa páginas en blanco intermitentes en Chrome.
       Fondo casi opaco: mismo aspecto sin el glitch de composición. */
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 8px 28px -20px rgba(16, 18, 40, .55);
    border-bottom: 1px solid rgba(16, 18, 40, .05);
}

/* --- Buscador: el elemento más usado de la cabecera --- */
.tp-header-search-box,
.tp-header-search-wrapper {
    border-radius: var(--jd-radius);
    transition: box-shadow .2s var(--jd-ease), border-color .2s var(--jd-ease);
}

.tp-header-search-wrapper:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), .1);
}

.tp-header-search-btn {
    border-radius: var(--jd-radius-sm);
    transition: transform .18s var(--jd-ease);
}

.tp-header-search-btn:active { transform: scale(.95); }

/* --- Iconos de acción (cesta, favoritos, comparar) --- */
.tp-header-action-btn {
    border-radius: 999px;
    transition: background-color .18s var(--jd-ease), transform .18s var(--jd-ease);
}

.tp-header-action-btn:hover {
    background: rgba(var(--primary-color-rgb), .08);
    transform: translateY(-2px);
}

.tp-header-action-btn:active { transform: translateY(0) scale(.94); }

/* El contador de la cesta: píldora nítida con sombra propia. */
.tp-header-action-badge {
    border-radius: 999px;
    font-weight: 700;
    box-shadow: 0 4px 10px -4px rgba(var(--primary-color-rgb), .8);
}

/* --- Menús desplegables (idioma, moneda) --- */
.tp-header-lang-list,
.tp-header-currency-list,
.dropdown-menu {
    border-radius: var(--jd-radius);
    border: 1px solid rgba(16, 18, 40, .07);
    box-shadow: var(--jd-shadow-lg);
    overflow: hidden;
}

/* --- Menú de categorías ---
   AQUÍ NO SE PONE `overflow` EN NINGÚN SITIO. Ni en el <nav>, ni en la
   <ul>. Este menú tiene dos niveles y cada uno se sale de su contenedor,
   así que cualquier recorte lo hace desaparecer. Ya rompió el menú dos
   veces; queda escrito para no repetirlo una tercera.

   Nivel 1 — el <nav>. Mide 2px de alto (solo sus bordes), porque la <ul>
   de dentro es `position: absolute` y no ocupa sitio. Y el tema le deja
   SIEMPRE un `transform` puesto (`scaleZ(0)` cerrado, `scaleX(1)`
   abierto): un elemento con transform es bloque contenedor de sus
   descendientes absolutos aunque sea `position: static`, y entonces sí
   los recorta. Con `overflow: hidden` la lista entera quedaba reducida a
   una raya de 2px — se abría de verdad, con su fondo blanco y en su
   sitio, pero no se veía y el ratón la atravesaba hasta el carrusel.

   Nivel 2 — la <ul>. Los submenús (`ul.tp-submenu`) salen HACIA LA
   DERECHA, empezando ~24px más allá del borde derecho de la lista madre:
   quedan por completo fuera de su caja. Un `overflow: hidden` en la <ul>
   no los recorta a medias, los borra enteros.

   El redondeado se consigue sin recortar: el radio va también en el
   primer y último elemento, que es lo único que podría asomar por las
   esquinas. */
.tp-category-menu nav ul {
    border-radius: var(--jd-radius);
    border: 1px solid rgba(16, 18, 40, .07);
    box-shadow: var(--jd-shadow-lg);
}

.tp-category-menu nav ul > li:first-child,
.tp-category-menu nav ul > li:first-child > a {
    border-top-left-radius: var(--jd-radius);
    border-top-right-radius: var(--jd-radius);
}

.tp-category-menu nav ul > li:last-child,
.tp-category-menu nav ul > li:last-child > a {
    border-bottom-left-radius: var(--jd-radius);
    border-bottom-right-radius: var(--jd-radius);
}

.tp-header-lang-list li a,
.tp-header-currency-list li a,
.dropdown-menu .dropdown-item {
    transition: background-color .15s var(--jd-ease), padding-left .15s var(--jd-ease);
}

/* Al pasar por encima el ítem se desplaza un pelo: se siente táctil. */
.tp-header-lang-list li a:hover,
.tp-header-currency-list li a:hover,
.dropdown-menu .dropdown-item:hover {
    background: rgba(var(--primary-color-rgb), .07);
    padding-left: 22px;
}

/* --- El logo: HUMO + la rueda del control girando ---
   · El logo es UN PNG plano: no se puede girar "una parte" de una
     imagen. Truco: una COPIA del logo recortada en circulo exacto
     sobre la rueda (clip-path) rota alrededor del centro del
     recorte; como el disco de la rueda cubre el circulo, solo se ve
     girar la rueda.
   · CALIBRACION: los 3 numeros de abajo (centro X/Y y radio). Si el
     recorte no cae clavado en la rueda, se ajustan aqui y listo.
   · Humo: particulas difuminadas que suben desde el control; al
     tocar el logo aparecen las particulas EXTRA (mas humo).
   · El clic NO navega (anulado en el parcial del logo). */

.logo a {
    position: relative;
    display: inline-block;
    line-height: 0;   /* el ancla abraza exacto a la imagen */
    font-size: 0;
    cursor: pointer;  /* vuelve a llevar a la portada */
}

/* [JD] EFECTOS DEL LOGO (LEDs de colores + barrido de luz): RETIRADOS
   POR COMPLETO el 29/07/2026, codigo y marcado.
   Los LEDs se colocaban por PORCENTAJE sobre los puntos del mando del
   logo antiguo; al cambiar el logo, los puntos del PNG se movieron y
   las luces no, asi que se quedaron brillando en cualquier parte. Un
   efecto calibrado a las coordenadas de una imagen concreta muere con
   esa imagen: no se reajusta, se retira.
   Ya no queda marcado .jd-logo-leds ni .jd-logo-shine en el tema
   (cabecera, ficha de producto y pie), asi que aqui tampoco hacen
   falta reglas para ocultarlos. */

/* ============================================================
   8. TÍTULOS DE SECCIÓN Y CARRUSEL
   ============================================================ */

.tp-section-title {
    letter-spacing: -.025em;
}

/* El antetítulo ("Ofertas", "Novedades") como píldora de color. */
.tp-section-title-pre {
    display: inline-block;
    background: rgba(var(--primary-color-rgb), .1);
    color: var(--primary-color);
    border-radius: 999px;
    padding: 5px 14px;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .02em;
}

/* Flechas del carrusel: botones circulares. */
.tp-slider-button-prev,
.tp-slider-button-next,
.tp-swiper-arrow button {
    border-radius: 999px;
    /* [JD] backdrop-filter retirado (mismo motivo: glitch de repintado en
       Chrome). Fondo casi opaco, se ve igual. */
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--jd-shadow);
    transition: transform .2s var(--jd-ease), background-color .2s var(--jd-ease);
}

.tp-slider-button-prev:hover,
.tp-slider-button-next:hover {
    transform: scale(1.08);
    background: #fff;
}

/* Puntos: el activo se estira en píldora. Detalle pequeño, se nota. */
.tp-slider-dot button,
.tp-swiper-dot button,
.owl-dots .owl-dot span {
    border-radius: 999px;
    transition: width .3s var(--jd-ease), background-color .3s var(--jd-ease);
}

.owl-dots .owl-dot.active span {
    width: 26px;
    background: var(--primary-color);
}

/* ============================================================
   9. PIE DE PÁGINA — «premium claro» (rediseño 26/07/2026)
   Ligero y siempre claro, con ADN gamer sutil: barra superior con
   los colores del mando, halos de profundidad, títulos con barrita,
   enlaces que responden, chips de contacto, categorías en píldoras
   y copyright con gamepad. Todo con los colores del tema.
   ============================================================ */

/* Lienzo: gradiente claro + profundidad con dos halos suaves. */
.tp-footer-area {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #f3f6fb 100%);
    overflow: hidden;
}

/* La firma: barra de 3px con los colores del MANDO (△○✕□ / leds),
   terminando en el azul del tema. */
.tp-footer-area::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #e2314b 0%, #f5a623 30%, #23a559 58%, var(--primary-color) 100%);
}

/* Halo azul arriba-izquierda: da profundidad sin ensuciar. */
.tp-footer-area::after {
    content: "";
    position: absolute;
    top: -160px; left: -140px;
    width: 460px; height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--primary-color) 0%, transparent 68%);
    opacity: .06;
    pointer-events: none;
}

/* Halo cálido abajo-derecha (el segundo plano del cuadro). */
.tp-footer-top {
    position: relative;
}

.tp-footer-top::after {
    content: "";
    position: absolute;
    bottom: -180px; right: -160px;
    width: 480px; height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, #f5a623 0%, transparent 68%);
    opacity: .05;
    pointer-events: none;
}

.tp-footer-widget-title {
    letter-spacing: -.01em;
    font-weight: 800;
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 16px;
}

/* Barrita de energía bajo cada título de columna. */
.tp-footer-widget-title::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 42px; height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--primary-color) 0%, rgba(var(--primary-color-rgb), .15) 100%);
}

.tp-footer-desc {
    color: #5a6572;
    line-height: 1.75;
}

/* Redes sociales: fichas blancas que se llenan con el color REAL de
   cada red al pasar (Facebook, TikTok, Telegram — en ese orden). */
.tp-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fff;
    border: 1.5px solid #dde5ee;
    color: #38424f;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .08);
    transition: transform .22s var(--jd-ease), background-color .22s var(--jd-ease), color .22s var(--jd-ease), border-color .22s var(--jd-ease), box-shadow .22s var(--jd-ease);
}

.tp-footer-social a svg {
    width: 21px;
    height: 21px;
}

/* Cada red con SU color visible desde el reposo (antes eran grises
   fantasma que no se notaban); al pasar, el chip se llena de ese color. */
.tp-footer-social a:nth-of-type(1) { color: #1877f2; border-color: rgba(24, 119, 242, .35); }
.tp-footer-social a:nth-of-type(2) { color: #121212; border-color: rgba(18, 18, 18, .30); }
.tp-footer-social a:nth-of-type(3) { color: #229ed9; border-color: rgba(34, 158, 217, .35); }

.tp-footer-social a:hover {
    transform: translateY(-3px);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .16);
    background: var(--primary-color);
}

.tp-footer-social a:nth-of-type(1):hover { background: #1877f2; }
.tp-footer-social a:nth-of-type(2):hover { background: #121212; }
.tp-footer-social a:nth-of-type(3):hover { background: #229ed9; }

/* «Habla con nosotros»: el teléfono es el héroe de la columna. */
.tp-footer-talk span { color: #6b7583; }

.tp-footer-talk h4 a {
    font-weight: 800;
    background-image: linear-gradient(90deg, var(--primary-color), var(--primary-color));
    background-repeat: no-repeat;
    background-size: 0% 2px;
    background-position: 0 100%;
    transition: color .2s var(--jd-ease), background-size .3s var(--jd-ease);
}

.tp-footer-talk h4 a:hover {
    color: var(--primary-color);
    background-size: 100% 2px;
}

/* Iconos de contacto: chips cuadraditos que se encienden. */
.tp-footer-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(var(--primary-color-rgb), .08);
    border: 1px solid rgba(var(--primary-color-rgb), .16);
    color: var(--primary-color);
    margin-right: 12px;
    transition: background-color .22s var(--jd-ease), color .22s var(--jd-ease), transform .22s var(--jd-ease);
}

.tp-footer-contact-item:hover .tp-footer-contact-icon {
    background: var(--primary-color);
    color: #fff;
    transform: translateY(-2px);
}

.tp-footer-contact-item + .tp-footer-contact-item { margin-top: 12px; }

/* Enlaces de columnas: guioncito que se dibuja + corrimiento. */
.tp-footer-widget-content ul li a {
    position: relative;
    color: #55606e;
    transition: color .2s var(--jd-ease), padding-left .2s var(--jd-ease);
}

.tp-footer-widget-content ul li a::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 9px; height: 2px;
    border-radius: 2px;
    background: var(--primary-color);
    transform: translateY(-50%) scaleX(0);
    transform-origin: left center;
    transition: transform .22s var(--jd-ease);
}

.tp-footer-widget-content ul li a:hover {
    color: var(--primary-color);
    padding-left: 15px;
}

.tp-footer-widget-content ul li a:hover::before {
    transform: translateY(-50%) scaleX(1);
}

/* Categorías: de texto con barras a PÍLDORAS elegantes. */
.tp-widget-product-categories {
    border-top: 1px solid #e8edf4;
    padding-top: 22px;
    margin-top: 6px;
}

.tp-widget-product-categories-title {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #8a94a3;
    margin: 0 0 14px;
}

.tp-widget-product-categories-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tp-widget-product-categories-list a {
    display: inline-block;
    padding: 8px 15px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e3e9f1;
    color: #55606e;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: all .2s var(--jd-ease);
}

.tp-widget-product-categories-list a::before,
.tp-widget-product-categories-list a::after { display: none; }

.tp-widget-product-categories-list a:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(15, 23, 42, .15);
}

/* Barra final: gamepad del color del tema + marca con peso. */
.tp-footer-bottom-wrapper {
    border-top: 1px solid #e5ebf3;
    padding-top: 20px;
    padding-bottom: 4px;
}

.tp-footer-copyright div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #68727f;
    font-size: 14px;
    font-weight: 500;
}

.tp-footer-copyright div::before {
    content: "";
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
    background-color: var(--primary-color);
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 5h12a4 4 0 0 1 4 4v6a4 4 0 0 1-4 4 5 5 0 0 1-4-2 3.5 3.5 0 0 0-2.8-1.4h-2.4A3.5 3.5 0 0 0 6 17a5 5 0 0 1-4-2 4 4 0 0 1-2-3.5V9a4 4 0 0 1 4-4z" transform="translate(1 0) scale(.92)"/><path d="M8 10v4M6 12h4M15 11h.01M18 13h.01"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 5h12a4 4 0 0 1 4 4v6a4 4 0 0 1-4 4 5 5 0 0 1-4-2 3.5 3.5 0 0 0-2.8-1.4h-2.4A3.5 3.5 0 0 0 6 17a5 5 0 0 1-4-2 4 4 0 0 1-2-3.5V9a4 4 0 0 1 4-4z" transform="translate(1 0) scale(.92)"/><path d="M8 10v4M6 12h4M15 11h.01M18 13h.01"/></svg>') center / contain no-repeat;
}

/* Medios de pago: en gris hasta que pasas por encima (se conserva).
   OJO: sin max-height — se probó con 40px y quedaban muy pequeños. */
.tp-footer-payment img {
    filter: grayscale(1);
    opacity: .65;
    transition: filter .25s var(--jd-ease), opacity .25s var(--jd-ease);
}

.tp-footer-payment:hover img {
    filter: grayscale(0);
    opacity: 1;
}

/* Móvil: aire entre columnas y barra final centrada. */
@media (max-width: 767px) {
    .tp-footer-widget { margin-bottom: 34px; }

    .tp-footer-copyright div { justify-content: center; text-align: center; }

    .tp-footer-payment { text-align: center !important; margin-top: 12px; }

    /* Medios de pago con tamaño GARANTIZADO en el teléfono (se veían
       pequeños): todo el ancho disponible hasta 360px. */
    .tp-footer-payment img { width: 100%; max-width: 360px; height: auto; }

    .tp-widget-product-categories-list { gap: 7px; }

    .tp-widget-product-categories-list a { padding: 7px 13px; }
}

/* ============================================================
   9-BIS. PIE DE PÁGINA — FASE 2 «ADN gamer» (26/07/2026)
   La energía sube un nivel: rejilla de campo de juego, barra de
   energía VIVA, símbolos del mando bajo los títulos, categorías
   como TECLAS que se pulsan y copyright estilo consola retro.
   ============================================================ */

/* Rejilla sutilísima de "campo de juego" sobre el gradiente claro. */
.tp-footer-area {
    background:
        repeating-linear-gradient(90deg, rgba(var(--primary-color-rgb), .026) 0 1px, transparent 1px 26px),
        repeating-linear-gradient(0deg, rgba(var(--primary-color-rgb), .026) 0 1px, transparent 1px 26px),
        linear-gradient(180deg, #ffffff 0%, #f3f6fb 100%);
}

/* La barra superior ahora está VIVA: la energía recorre los colores
   del mando en bucle continuo (lenta, hipnótica, nada estridente). */
.tp-footer-area::before {
    background: linear-gradient(90deg, #e2314b, #f5a623, #23a559, var(--primary-color), #e2314b);
    background-size: 220% 100%;
    animation: jdFootEnergia 9s linear infinite;
}

@keyframes jdFootEnergia {
    0% { background-position: 0% 0; }
    100% { background-position: 220% 0; }
}

/* Bajo cada título, la firma del mando: △ ○ ✕ □ en trazo fino del
   color del tema (reemplaza la barrita lisa de la fase 1). */
.tp-footer-widget-title::after {
    width: 58px;
    height: 12px;
    border-radius: 0;
    background-color: var(--primary-color);
    background-image: none;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 12" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M8 1.5 L13.5 10.5 L2.5 10.5 Z"/><circle cx="26" cy="6" r="4.6"/><path d="M38.5 1.8 L45.5 10.2 M45.5 1.8 L38.5 10.2"/><rect x="54" y="1.8" width="8.4" height="8.4" rx="1.2"/></svg>') left center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 12" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M8 1.5 L13.5 10.5 L2.5 10.5 Z"/><circle cx="26" cy="6" r="4.6"/><path d="M38.5 1.8 L45.5 10.2 M45.5 1.8 L38.5 10.2"/><rect x="54" y="1.8" width="8.4" height="8.4" rx="1.2"/></svg>') left center / contain no-repeat;
    opacity: .85;
}

/* Categorías: de píldoras a TECLAS de teclado gamer — con canto
   inferior 3D que se HUNDE al hacer clic, como pulsar una tecla. */
.tp-widget-product-categories-list a {
    border-radius: 10px;
    border-bottom: 3px solid #d7dfe9;
}

.tp-widget-product-categories-list a:hover {
    border-bottom-color: rgba(0, 0, 0, .28);
}

.tp-widget-product-categories-list a:active {
    transform: translateY(1px);
    border-bottom-width: 1px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}

/* Redes y chips de contacto: sensación de BOTÓN de mando al pulsar. */
.tp-footer-social a:active { transform: translateY(-1px) scale(.93); }

.tp-footer-contact-item:hover .tp-footer-contact-icon {
    transform: translateY(-2px) rotate(-6deg);
}

/* Copyright estilo consola: el gamepad hace un gesto de vez en
   cuando y un cursor retro parpadea al final de la línea. */
.tp-footer-copyright div::before {
    animation: jdPadGesto 7s ease-in-out infinite;
    transform-origin: center;
}

@keyframes jdPadGesto {
    0%, 87%, 100% { transform: rotate(0); }
    90% { transform: rotate(-12deg); }
    94% { transform: rotate(8deg); }
    97% { transform: rotate(-3deg); }
}

.tp-footer-copyright div::after {
    content: "_";
    margin-left: 1px;
    color: var(--primary-color);
    font-weight: 800;
    animation: jdCursorRetro 1.15s steps(1) infinite;
}

@keyframes jdCursorRetro {
    50% { opacity: 0; }
}

/* Los medios de pago quedan en gris POR DEFECTO (decisión del dueño):
   brillan al pasar el mouse (hover, escritorio) y también al TOCARLOS
   en el teléfono (active refuerza el toque en táctil). */
.tp-footer-payment:active img {
    filter: grayscale(0);
    opacity: 1;
}

/* Móvil, fase 2:
   - El botón flotante de WhatsApp tapaba los logos de pago: el pie
     termina con un colchón para que el botón flote sobre espacio vacío.
   - Copyright en vertical: gamepad centrado ARRIBA del texto (antes
     quedaba huérfano pegado al borde izquierdo). */
@media (max-width: 767px) {
    .tp-footer-bottom { padding-bottom: 96px; }

    .tp-footer-copyright div {
        flex-direction: column;
        gap: 7px;
    }
}

/* ── Fase 3: la descripción de la marca como mini-fichas de
   plataforma (las pinta el script del pie; cada una con su icono
   SVG en el color del tema). Mini-teclas a juego con las categorías. */
.jd-foot-plat {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 2px;
}

.jd-plat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    background: #fff;
    border: 1px solid #e3e9f1;
    border-bottom: 2.5px solid #dbe3ec;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 600;
    color: #55606e;
    line-height: 1;
    transition: transform .2s var(--jd-ease), color .2s var(--jd-ease), border-color .2s var(--jd-ease), box-shadow .2s var(--jd-ease);
}

.jd-plat-chip svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    color: var(--primary-color);
}

.jd-plat-chip i { font-style: normal; }

.jd-plat-chip:hover {
    transform: translateY(-2px);
    color: var(--primary-color);
    border-color: rgba(var(--primary-color-rgb), .45);
    box-shadow: 0 5px 12px rgba(15, 23, 42, .10);
}

/* ── Fase 3b: iconos en las teclas de categorías. Azul del tema en
   reposo; blancos cuando la tecla se llena al pasar. */
.tp-widget-product-categories-list a.jd-key-ico {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.tp-widget-product-categories-list a.jd-key-ico svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    color: var(--primary-color);
    transition: color .2s var(--jd-ease);
}

.tp-widget-product-categories-list a.jd-key-ico:hover svg { color: #fff; }

/* ── Fase 3b: iconos en los enlaces de las columnas. Grises en
   reposo (no compiten con el texto); al pasar, azul y crecen un
   pelo. El guioncito de la fase 1 se retira en estos (el icono es
   ahora el acento). */
.tp-footer-widget-content ul li a.jd-has-ico {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
}

.tp-footer-widget-content ul li a.jd-has-ico::before { display: none; }

.tp-footer-widget-content ul li a.jd-has-ico svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    margin-top: 3px;
    color: #9aa4b1;
    transition: color .2s var(--jd-ease), transform .2s var(--jd-ease);
}

.tp-footer-widget-content ul li a.jd-has-ico:hover { padding-left: 5px; }

.tp-footer-widget-content ul li a.jd-has-ico:hover svg {
    color: var(--primary-color);
    transform: scale(1.15);
}

/* ── Fase 3b: el glifo REAL de WhatsApp (verde de marca, como los
   colores reales de las redes) junto al número. */
.tp-footer-talk h4 a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tp-footer-talk h4 a::before {
    content: "";
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    background-color: #25d366;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 2a10 10 0 0 0-8.6 15L2 22l5.2-1.4A10 10 0 1 0 12 2zm5 14.2c-.2.6-1.2 1.2-1.7 1.2-.4.1-1 .1-1.6-.1-.4-.1-.9-.3-1.5-.6-2.6-1.1-4.3-3.8-4.4-4-.1-.2-1-1.4-1-2.6s.6-1.8.9-2c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 2c.1.2.1.4 0 .6l-.4.6-.2.3c-.1.1-.2.3 0 .5.1.3.6 1 1.3 1.6.9.8 1.6 1 1.9 1.2.2.1.4.1.5-.1l.8-.9c.2-.2.3-.2.6-.1l1.9.9c.3.1.5.2.5.3.1.1.1.7-.2 1.4z"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 2a10 10 0 0 0-8.6 15L2 22l5.2-1.4A10 10 0 1 0 12 2zm5 14.2c-.2.6-1.2 1.2-1.7 1.2-.4.1-1 .1-1.6-.1-.4-.1-.9-.3-1.5-.6-2.6-1.1-4.3-3.8-4.4-4-.1-.2-1-1.4-1-2.6s.6-1.8.9-2c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 2c.1.2.1.4 0 .6l-.4.6-.2.3c-.1.1-.2.3 0 .5.1.3.6 1 1.3 1.6.9.8 1.6 1 1.9 1.2.2.1.4.1.5-.1l.8-.9c.2-.2.3-.2.6-.1l1.9.9c.3.1.5.2.5.3.1.1.1.7-.2 1.4z"/></svg>') center / contain no-repeat;
}

/* ============================================================
   9-TER. BOLETÍN (banner azul) — fases 1+2+3 (26/07/2026)
   El mismo lenguaje del pie llevado al azul de marca: campo de
   juego, chip de oferta con etiqueta, título con cursor retro,
   formulario en píldora con iconos y botón que "despega".
   ============================================================ */

/* Fase 1-2: rejilla de campo de juego + luz diagonal sobre el azul. */
.tp-subscribe-area {
    background-image:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 26px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 26px),
        linear-gradient(135deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 45%, rgba(2, 8, 20, .12) 100%);
}

/* El avión de papel planea suave (vida sin escándalo). */
.tp-subscribe-plane-shape {
    animation: jdPlaneo 4.5s ease-in-out infinite;
}

@keyframes jdPlaneo {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-7px) rotate(-4deg); }
}

/* Fase 3: la oferta como CHIP de vidrio con etiqueta de descuento. */
.tp-subscribe-content > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .25);
    padding: 6px 13px;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: .4px;
    backdrop-filter: blur(4px);
}

.tp-subscribe-content > span::before {
    content: "";
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    background: #fff;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2H5a2 2 0 0 0-2 2v7l9.3 9.3a2 2 0 0 0 2.8 0l7-7a2 2 0 0 0 0-2.8z"/><circle cx="7.5" cy="7.5" r="1.5"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2H5a2 2 0 0 0-2 2v7l9.3 9.3a2 2 0 0 0 2.8 0l7-7a2 2 0 0 0 0-2.8z"/><circle cx="7.5" cy="7.5" r="1.5"/></svg>') center / contain no-repeat;
}

/* Fase 2: título con cursor retro (hermano del copyright). */
.tp-subscribe-title::after {
    content: "_";
    margin-left: 3px;
    opacity: .9;
    animation: jdCursorRetro 1.15s steps(1) infinite;
}

/* Fase 1: el formulario, una píldora honda con sombra de verdad. */
.tp-subscribe-input {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(2, 8, 20, .25);
}

/* Fase 3: icono de sobre dentro del campo. */
.tp-subscribe-input::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    z-index: 2;
    pointer-events: none;
    background: #98a2b3;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>') center / contain no-repeat;
}

.tp-subscribe-input input.form-control {
    padding-left: 44px !important;
}

/* El botón: peso de CTA, avioncito que DESPEGA al pasar y pulsación
   física al hacer clic (familia de las teclas del pie). */
.tp-subscribe-input button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    letter-spacing: .3px;
    transition: background-color .2s var(--jd-ease), transform .12s var(--jd-ease);
}

.tp-subscribe-input button::after {
    content: "";
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    background: #fff;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 14 21 3"/><path d="M21 3 14.5 21a.5.5 0 0 1-.9 0L10 14l-7-3.6a.5.5 0 0 1 0-.9z"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 14 21 3"/><path d="M21 3 14.5 21a.5.5 0 0 1-.9 0L10 14l-7-3.6a.5.5 0 0 1 0-.9z"/></svg>') center / contain no-repeat;
    transition: transform .25s var(--jd-ease);
}

.tp-subscribe-input button:hover::after {
    transform: translate(3px, -3px) rotate(-8deg);
}

.tp-subscribe-input button:active {
    transform: translateY(1px);
}

/* Fase 1: el aviso de protección pasa de caja gris a VIDRIO sobre el
   azul, con escudo verde (los inline styles se doman con !important). */
.honeypot-disclaimer {
    position: relative;
    background: rgba(255, 255, 255, .12) !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    border-radius: 12px !important;
    padding: 10px 14px 10px 40px !important;
    margin-bottom: 12px !important;
    color: #eaf1fb !important;
    font-size: 12.5px;
    line-height: 1.5;
    backdrop-filter: blur(4px);
}

.honeypot-disclaimer::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: #7fe3a8;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z"/><path d="M9.5 11.5l2 2 3.5-3.5"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z"/><path d="M9.5 11.5l2 2 3.5-3.5"/></svg>') center / contain no-repeat;
}

/* El reCAPTCHA, al menos bien sentado: esquinas y sombra acordes. */
.tp-subscribe-form .g-recaptcha {
    width: 304px;
    max-width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(2, 8, 20, .22);
}

/* ── Fase 4 (remate móvil): con el campo y el botón APILADOS, la
   píldora única no aplica — cada pieza brilla por su cuenta.
   MISMO corte que el tema (575px, donde el botón deja de ser
   absoluto). Se anula el top:15px del tema — ese empujón visual
   era el que montaba el botón sobre el aviso de Honeypot. */
@media (max-width: 575px) {
    .tp-subscribe-input {
        border-radius: 0;
        overflow: visible;
        box-shadow: none;
    }

    /* El sobre, anclado al CAMPO (el input mide 60px → centro en 30). */
    .tp-subscribe-input::before {
        top: 30px;
    }

    .tp-subscribe-input input.form-control {
        border-radius: 14px !important;
        box-shadow: 0 12px 28px rgba(2, 8, 20, .22);
    }

    .tp-subscribe-input button {
        position: relative;
        top: 0;
        width: 100%;
        justify-content: center;
        margin-top: 12px;
        border-radius: 12px !important;
        padding-top: 14px;
        padding-bottom: 14px;
        box-shadow: 0 12px 28px rgba(2, 8, 20, .22);
    }

    /* Aire real entre el formulario y el aviso de protección. */
    .tp-subscribe-input { margin-bottom: 14px; }
}

/* ============================================================
   9-QUATER. MENÚS DEL ENCABEZADO — fases 1-4 (26/07/2026)
   Los desplegables del menú principal y el panel de categorías
   hablan el mismo idioma: tarjetas flotantes redondeadas con
   sombra honda, filas que se tiñen del tema al pasar, e iconos
   con significado (los pinta el script del pie de página).
   ============================================================ */

/* Panel desplegable: tarjeta flotante, adiós separadores duros. */
.tp-main-menu-content .tp-submenu {
    border-radius: 14px !important;
    border: 1px solid #e7ecf3 !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .14) !important;
    padding: 10px !important;
    overflow: hidden;
}

.tp-main-menu-content .tp-submenu li,
.tp-main-menu-content .tp-submenu li a {
    border-bottom: 0 !important;
}

.tp-main-menu-content .tp-submenu li a {
    padding: 9px 12px !important;
    border-radius: 9px;
    transition: background-color .18s var(--jd-ease), color .18s var(--jd-ease), transform .18s var(--jd-ease);
}

.tp-main-menu-content .tp-submenu li a:hover {
    background: rgba(var(--primary-color-rgb), .07);
    color: var(--primary-color);
    transform: translateX(3px);
}

/* Entrada suave del desplegable al abrirse. */
.tp-main-menu-content .has-dropdown:hover > .tp-submenu {
    animation: jdMenuIn .22s var(--jd-ease);
}

@keyframes jdMenuIn {
    from { opacity: .35; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Panel de categorías (llega por AJAX): mismas maneras. */
.tp-category-menu-content li a {
    transition: background-color .18s var(--jd-ease), color .18s var(--jd-ease);
}

.tp-category-menu-content li a:hover {
    background: rgba(var(--primary-color-rgb), .06);
    color: var(--primary-color);
}

/* El flyout de subcategorías dentro del panel. */
.tp-category-menu-content li ul {
    border-radius: 14px !important;
    border: 1px solid #e7ecf3 !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .14) !important;
    padding: 10px !important;
}

.tp-category-menu-content li ul li,
.tp-category-menu-content li ul li a {
    border-bottom: 0 !important;
}

.tp-category-menu-content li ul li a {
    padding: 9px 12px !important;
    border-radius: 9px;
}

/* Iconos con significado en los menús (clase jd-mi del script):
   grises discretos; azules y un pelo más grandes al pasar. */
a.jd-mi {
    display: flex !important;
    align-items: center;
    gap: 9px;
}

a.jd-mi > svg:first-child {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: #9aa4b1;
    transition: color .18s var(--jd-ease), transform .18s var(--jd-ease);
}

a.jd-mi:hover > svg:first-child {
    color: var(--primary-color);
    transform: scale(1.12);
}

/* ============================================================
   9-QUINQUE. HEADER (cuenta + WhatsApp) y CATEGORÍAS DE PORTADA
   (26/07/2026) — mismo idioma: chips que se encienden, WhatsApp
   con su glifo y verde REAL, y las categorías con anillo de
   energía giratorio al pasar.
   ============================================================ */

/* Cuenta: chip del tema que se llena al pasar; jerarquía de textos. */
.tp-header-login-icon span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(var(--primary-color-rgb), .08);
    border: 1px solid rgba(var(--primary-color-rgb), .18);
    color: var(--primary-color);
    transition: background-color .22s var(--jd-ease), color .22s var(--jd-ease), transform .22s var(--jd-ease);
}

.tp-header-login:hover .tp-header-login-icon span {
    background: var(--primary-color);
    color: #fff;
    transform: translateY(-2px);
}

.tp-header-login-title {
    color: #8a94a3;
    font-size: 12px;
}

.tp-header-login-content a {
    transition: color .18s var(--jd-ease);
}

.tp-header-login-content a:hover {
    color: var(--primary-color);
}

/* WhatsApp: el glifo REAL en su verde de marca (el teléfono genérico
   azul se retira); chip verde que se llena al pasar. */
.tp-header-contact-icon span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(37, 211, 102, .12);
    border: 1px solid rgba(37, 211, 102, .32);
    color: #1daf53;
    transition: background-color .22s var(--jd-ease), color .22s var(--jd-ease), transform .22s var(--jd-ease);
}

.tp-header-contact-icon span svg { display: none; }

.tp-header-contact-icon span::before {
    content: "";
    width: 22px;
    height: 22px;
    background: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 2a10 10 0 0 0-8.6 15L2 22l5.2-1.4A10 10 0 1 0 12 2zm5 14.2c-.2.6-1.2 1.2-1.7 1.2-.4.1-1 .1-1.6-.1-.4-.1-.9-.3-1.5-.6-2.6-1.1-4.3-3.8-4.4-4-.1-.2-1-1.4-1-2.6s.6-1.8.9-2c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 2c.1.2.1.4 0 .6l-.4.6-.2.3c-.1.1-.2.3 0 .5.1.3.6 1 1.3 1.6.9.8 1.6 1 1.9 1.2.2.1.4.1.5-.1l.8-.9c.2-.2.3-.2.6-.1l1.9.9c.3.1.5.2.5.3.1.1.1.7-.2 1.4z"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 2a10 10 0 0 0-8.6 15L2 22l5.2-1.4A10 10 0 1 0 12 2zm5 14.2c-.2.6-1.2 1.2-1.7 1.2-.4.1-1 .1-1.6-.1-.4-.1-.9-.3-1.5-.6-2.6-1.1-4.3-3.8-4.4-4-.1-.2-1-1.4-1-2.6s.6-1.8.9-2c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 2c.1.2.1.4 0 .6l-.4.6-.2.3c-.1.1-.2.3 0 .5.1.3.6 1 1.3 1.6.9.8 1.6 1 1.9 1.2.2.1.4.1.5-.1l.8-.9c.2-.2.3-.2.6-.1l1.9.9c.3.1.5.2.5.3.1.1.1.7-.2 1.4z"/></svg>') center / contain no-repeat;
}

.tp-header-contact:hover .tp-header-contact-icon span {
    background: #25d366;
    color: #fff;
    transform: translateY(-2px);
}

.tp-header-contact-content span { color: #8a94a3; }

.tp-header-contact-content a {
    font-weight: 700;
    transition: color .18s var(--jd-ease);
}

.tp-header-contact-content a:hover { color: #1daf53; }

/* Categorías de la portada: círculo que levita con ANILLO de energía
   giratorio (los colores del mando) al pasar. */
.tp-product-category-thumb.fix {
    position: relative;
    overflow: visible !important;
    border-radius: 0;
}

.tp-product-category-thumb.fix img {
    border-radius: 50%;
    transition: transform .28s var(--jd-ease);
}

/* Anillo FINO del color del tema que aparece suave al pasar (sin
   colores ajenos ni rotaciones — línea gráfica del dueño). */
.tp-product-category-thumb.fix::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2.5px solid rgba(var(--primary-color-rgb), .55);
    opacity: 0;
    transform: scale(.93);
    transition: opacity .22s var(--jd-ease), transform .22s var(--jd-ease);
    pointer-events: none;
}

.tp-product-category-item:hover .tp-product-category-thumb.fix::after {
    opacity: 1;
    transform: scale(1);
}

.tp-product-category-item:hover .tp-product-category-thumb.fix img {
    transform: translateY(-5px) scale(1.03);
    filter: drop-shadow(0 12px 20px rgba(var(--primary-color-rgb), .22));
}

.tp-product-category-title a {
    transition: color .18s var(--jd-ease);
}

.tp-product-category-title a:hover { color: var(--primary-color); }

.tp-product-category-content span {
    color: #93a0af;
    font-size: 12.5px;
}

/* En TÁCTIL los tooltips de hover de las tarjetas (Añadir para
   comparar, Vista rápida...) no aportan: aparecen al tocar, tapan y
   se recortan contra el borde. Fuera — el title/aria sigue ahí. */
@media (hover: none) {
    .tp-product-tooltip { display: none !important; }
}

/* En ESCRITORIO el tooltip de una línea era más ancho que la tarjeta
   y el borde lo decapitaba («...dir para comparar»). Ahora es una
   pastilla compacta que ENVUELVE en dos líneas y siempre cabe. */
.tp-product-tooltip {
    white-space: normal !important;
    max-width: 118px;
    text-align: center;
    line-height: 1.3;
    font-size: 11px !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
}

/* Cinturón de seguridad: la imagen de la tarjeta JAMÁS más ancha que
   su tarjeta. */
.tp-product-item .tp-product-thumb img,
.tp-product-list-item .tp-product-list-thumb img {
    max-width: 100%;
    height: auto;
}

/* Accesibilidad: con "reducir movimiento", todo quieto. */
@media (prefers-reduced-motion: reduce) {
    .tp-footer-area::before,
    .tp-footer-copyright div::before,
    .tp-footer-copyright div::after,
    .tp-subscribe-plane-shape,
    .tp-subscribe-title::after { animation: none; }

    .tp-main-menu-content .has-dropdown:hover > .tp-submenu { animation: none; }
}

/* ============================================================
   10. DETALLES DE OFICIO
   Cosas pequeñas que nadie nombra pero que se sienten.
   ============================================================ */

/* Botón de volver arriba. */
.back-to-top-wrapper .back-to-top-btn,
.tp-backtotop {
    border-radius: 999px;
    box-shadow: var(--jd-shadow);
    transition: transform .2s var(--jd-ease);
}

.back-to-top-wrapper .back-to-top-btn:hover,
.tp-backtotop:hover { transform: translateY(-3px); }

/* Barra de desplazamiento discreta (solo escritorio). */
@media (min-width: 992px) {
    ::-webkit-scrollbar { width: 11px; height: 11px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
        background: rgba(16, 18, 40, .18);
        border-radius: 999px;
        border: 3px solid #fff;
    }
    ::-webkit-scrollbar-thumb:hover { background: rgba(16, 18, 40, .32); }
}

/* [JD] RETIRADO — aparición al hacer scroll (animation-timeline: view()).
   Era un adorno (fundido hacia arriba al entrar en pantalla), pero causaba
   PÁGINAS EN BLANCO intermitentes: con `animation-fill-mode: both` los
   elementos arrancan en opacidad 0, y cuando Chrome no resuelve la línea de
   tiempo de scroll al cargar —bug conocido— se quedaban invisibles hasta
   refrescar. Un fundido no vale una ficha de producto en blanco. Sin esto, el
   contenido se ve siempre al instante. NO reintroducir animaciones de
   aparición basadas en scroll con opacidad 0 de inicio. */

/* ============================================================
   11. MONEDERO DEL CLIENTE
   La tarjeta de saldo con el mismo ADN que las pantallas de pago:
   oscura, con halo del color del tema y brillo que la recorre.
   ============================================================ */

/* Los !important son NECESARIOS: el CSS del área de clientes carga después
   de esta capa y pinta .bb-customer-card de blanco — el saldo quedaba
   BLANCO SOBRE BLANCO (tarjeta "vacía"). Aquí no se negocia la cascada. */
.bb-customer-card.jd-wallet {
    position: relative;
    overflow: hidden;
    /* Azul del tema del negocio (#0989ff), en tres tonos. */
    background: linear-gradient(135deg, #2797ff 0%, #0873d6 58%, #0658a3 100%) !important;
    border: 0 !important;
    border-radius: var(--jd-radius-lg) !important;
    padding: 26px 24px 24px !important;
    color: #fff !important;
    box-shadow: 0 22px 44px -20px rgba(6, 96, 179, .6), inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}

.bb-customer-card.jd-wallet::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Halo ACLARADO: el primario puro se camuflaría con el fondo azul. */
    background: radial-gradient(340px 240px at 88% -30%, #90caff, transparent 68%);
    opacity: .5;
    pointer-events: none;
}

/* El mismo brillo que recorre las pantallas de pago. */
.bb-customer-card.jd-wallet::after {
    content: "";
    position: absolute;
    top: -60%;
    left: -60%;
    width: 55%;
    height: 220%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .13), transparent);
    transform: rotate(14deg);
    animation: jdSheen 6s ease-in-out infinite;
    pointer-events: none;
}

.bb-customer-card.jd-wallet > * { position: relative; z-index: 1; }

.jd-wallet-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.jd-wallet-brand {
    display: inline-flex;
    align-items: center;
    font-size: .82rem;
    font-weight: 600;
    opacity: .85;
}

.jd-wallet-site {
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .5;
}

.jd-wallet-label {
    margin-top: 22px;
    font-size: .78rem;
    opacity: .58;
}

.jd-wallet-amount {
    color: #fff !important;
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
    margin-top: 2px;
    color: #fff;
}

.jd-wallet-amount.is-negative { color: #ff9d8f !important; }

/* Acciones como fichas sobre la tarjeta. */
.jd-wallet-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.jd-wallet-btn {
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .18s var(--jd-ease), transform .18s var(--jd-ease);
}

.jd-wallet-btn:hover {
    background: rgba(255, 255, 255, .2);
    color: #fff;
    transform: translateY(-2px);
}

.jd-wallet-btn:active { transform: scale(.97); }

/* La recarga es la acción que importa: llena, con el color del tema. */
.jd-wallet-btn-primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 10px 24px -10px var(--primary-color);
}

.jd-wallet-btn-primary:hover {
    background: var(--primary-color);
    filter: brightness(1.1);
}

/* --- Recargas pendientes: aviso ámbar tocable --- */
.pending-topup-card {
    border-radius: var(--jd-radius);
    border: 1px solid #ffe3ae;
    background: #fffaf0;
    box-shadow: var(--jd-shadow-sm);
    transition: transform .18s var(--jd-ease), box-shadow .18s var(--jd-ease);
}

.pending-topup-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--jd-shadow);
}

/* --- Historial de movimientos como actividad de app --- */
.transaction-cards .transaction-item {
    padding: 16px 18px;
    border-bottom: 1px solid #f1f2f8;
    transition: background-color .15s var(--jd-ease);
}

.transaction-cards .transaction-item:last-child { border-bottom: 0; }

.transaction-cards .transaction-item:hover { background: #fafbfe; }

.transaction-cards .transaction-amount {
    font-weight: 800;
    letter-spacing: -.01em;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .92rem;
    white-space: nowrap;
}

.transaction-cards .transaction-amount.credit {
    color: #14602f;
    background: #e7f9ee;
}

.transaction-cards .transaction-amount.debit {
    color: #a32016;
    background: #ffeceb;
}

.transaction-cards .transaction-date {
    font-size: .76rem;
    color: #9a9aad;
}

.transaction-cards .transaction-description {
    font-size: .88rem;
    color: #56566a;
}

/* Los metadatos (saldo después, estado) en panel plegado y tenue. */
.transaction-cards .transaction-meta {
    background: #f7f8fc;
    border-radius: var(--jd-radius-sm);
    padding: 10px 14px;
}

@media (prefers-reduced-motion: reduce) {
    .bb-customer-card.jd-wallet::after { animation: none; }
    .jd-wallet-btn:hover, .pending-topup-card:hover { transform: none; }
}

/* ============================================================
   11.5 ÁREA DE CUENTA DEL CLIENTE
   Sidebar, menú móvil "Menú de cuenta", tarjetas y encabezados.
   Efectos sobrios: aquí el cliente viene a gestionar, no a pasear.
   ============================================================ */

/* --- Menú (el mismo en sidebar de escritorio y offcanvas móvil) --- */
.bb-customer-page .nav-pills .nav-link {
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 500;
    color: #4a4a60;
    transition: background-color .18s var(--jd-ease),
                color .18s var(--jd-ease),
                padding-left .18s var(--jd-ease);
}

.bb-customer-page .nav-pills .nav-link .nav-icon {
    opacity: .55;
    transition: opacity .18s var(--jd-ease), transform .18s var(--jd-ease);
}

/* Al pasar: tinte del color del tema y el ítem se corre un pelo. */
.bb-customer-page .nav-pills .nav-link:hover {
    background: rgba(var(--primary-color-rgb), .07);
    color: var(--primary-color);
    padding-left: 18px;
}

.bb-customer-page .nav-pills .nav-link:hover .nav-icon {
    opacity: 1;
    transform: scale(1.08);
}

/* El activo: degradado del color del tema con sombra propia. */
.bb-customer-page .nav-pills .nav-link.active {
    background: linear-gradient(120deg, var(--primary-color), rgba(var(--primary-color-rgb), .82));
    box-shadow: 0 8px 20px -10px var(--primary-color);
    color: #fff;
    font-weight: 600;
}

.bb-customer-page .nav-pills .nav-link.active .nav-icon { opacity: 1; }

/* Etiquetas de sección del menú. */
.bb-customer-page .nav-section {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9a9aad;
}

/* "Cerrar sesión" en rojo suave al pasar: acción distinta, color distinto. */
.bb-customer-page .nav-pills .nav-link[href*="logout"]:hover {
    background: #ffeceb;
    color: #c02418;
}

/* --- Cabecera con avatar (offcanvas móvil y sidebar) --- */
.bb-customer-sidebar-wrapper > .d-flex.align-items-center.gap-3.p-4,
.bb-customer-page .offcanvas .d-flex.align-items-center.gap-3.p-4 {
    background:
        radial-gradient(240px 130px at 90% -20%, rgba(var(--primary-color-rgb), .16), transparent 70%),
        #f7f8fc;
    border-bottom: 1px solid #eef0f7;
}

.bb-customer-page .wrapper-image img,
.bb-customer-page .avatar-view img {
    border-radius: 999px;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(var(--primary-color-rgb), .35);
}

/* --- Sidebar como tarjeta flotante (solo escritorio) --- */
@media (min-width: 992px) {
    .bb-customer-sidebar {
        background: #fff;
        border-radius: var(--jd-radius-lg);
        border: 1px solid rgba(16, 18, 40, .06);
        box-shadow: var(--jd-shadow-sm);
        overflow: hidden;
    }
}

/* --- Título de la página ("Mi billetera", "Pedidos"...) --- */
.bb-profile-header-title {
    letter-spacing: -.025em;
    font-weight: 800;
}

/* --- Tarjetas del área --- */
.bb-customer-card {
    border-radius: var(--jd-radius-lg);
    border: 1px solid rgba(16, 18, 40, .06);
    box-shadow: var(--jd-shadow-sm);
}

.bb-customer-card-title { letter-spacing: -.01em; }

/* --- Pares etiqueta/valor --- */
.bb-customer-page .info-item .label {
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #9a9aad;
}

.bb-customer-page .info-item .value { font-weight: 600; }

/* --- Estados vacíos: suaves, no tristes --- */
.bb-empty { padding: 40px 20px; }

.bb-empty-img {
    opacity: .35;
    font-size: 2rem;
    margin-bottom: 10px;
}

/* --- Sección de tarjeta de regalo del monedero --- */
.gift-card-section {
    background:
        radial-gradient(260px 140px at 8% -30%, rgba(var(--primary-color-rgb), .1), transparent 70%),
        #fff;
}

/* Los botones dentro no deben montarse sobre el texto en pantallas chicas. */
.gift-card-section .d-flex.justify-content-between { row-gap: 12px; }

@media (prefers-reduced-motion: reduce) {
    .bb-customer-page .nav-pills .nav-link,
    .bb-customer-page .nav-pills .nav-link .nav-icon {
        transition: none;
    }
}

/* ============================================================
   13. TIENDA (listado de productos)
   Barra superior, filtros, chips, paginación.
   ============================================================ */

/* --- Barra superior: "mostrando X", orden y vista --- */
.tp-shop-top {
    background: #fff;
    border: 1px solid rgba(16, 18, 40, .06);
    border-radius: var(--jd-radius);
    box-shadow: var(--jd-shadow-sm);
    padding: 10px 16px;
}

.tp-shop-top-result { color: #8a8a9c; font-size: .86rem; }

/* Selector de orden (nice-select del tema) como píldora. */
.tp-shop-top-select .nice-select,
.tp-shop-top-select select {
    border-radius: 999px;
    border-color: #e7e9f2;
    transition: border-color .18s var(--jd-ease), box-shadow .18s var(--jd-ease);
}

.tp-shop-top-select .nice-select:hover,
.tp-shop-top-select .nice-select.open {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), .08);
}

.tp-shop-top-select .nice-select .list {
    border-radius: var(--jd-radius);
    border: 1px solid rgba(16, 18, 40, .07);
    box-shadow: var(--jd-shadow-lg);
}

/* Botones de vista (cuadrícula/lista) y de filtros. */
.tp-shop-top-tab .nav-link,
.tp-filter-btn {
    border-radius: 10px;
    transition: background-color .18s var(--jd-ease), color .18s var(--jd-ease), transform .18s var(--jd-ease);
}

.tp-shop-top-tab .nav-link:hover,
.tp-filter-btn:hover { transform: translateY(-1px); }

.tp-shop-top-tab .nav-link.active {
    background: rgba(var(--primary-color-rgb), .1);
    color: var(--primary-color);
}

/* --- Widgets del sidebar de filtros --- */
.tp-shop-widget {
    background: #fff;
    border: 1px solid rgba(16, 18, 40, .06);
    border-radius: var(--jd-radius);
    box-shadow: var(--jd-shadow-sm);
    padding: 18px;
}

/* Checkboxes y radios de TODO el sitio en el color del tema:
   una línea, y cada filtro marcado deja de verse gris de fábrica. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--primary-color);
}

/* Chips de filtros activos: píldoras con su ✕. */
.bb-product-filter-clear,
.bb-product-filter-clear-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 5px 13px;
    font-size: .8rem;
    font-weight: 600;
    background: rgba(var(--primary-color-rgb), .09);
    color: var(--primary-color);
    transition: background-color .18s var(--jd-ease), color .18s var(--jd-ease);
}

.bb-product-filter-clear:hover,
.bb-product-filter-clear-all:hover {
    background: #ffeceb;
    color: #c02418;
}

/* Slider de precio (ion range slider). */
.irs--flat .irs-bar,
.irs--round .irs-bar,
.irs-bar {
    background: var(--primary-color);
}

.irs--flat .irs-handle > i:first-child,
.irs--round .irs-handle {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.irs--flat .irs-from, .irs--flat .irs-to, .irs--flat .irs-single,
.irs--round .irs-from, .irs--round .irs-to, .irs--round .irs-single {
    background: var(--primary-color);
    border-radius: 999px;
}

/* Cajón de filtros en móvil: tarjeta lateral con sombra profunda. */
.bb-filter-offcanvas-wrapper {
    border-radius: 0 var(--jd-radius-lg) var(--jd-radius-lg) 0;
    box-shadow: var(--jd-shadow-lg);
}

.bb-filter-offcanvas-close-btn {
    border-radius: 999px;
    transition: background-color .18s var(--jd-ease);
}

.bb-filter-offcanvas-close-btn:hover { background: #f1f2f8; }

/* --- Paginación: pastillas circulares --- */
.tp-pagination ul li a,
.tp-pagination ul li span,
.pagination .page-link {
    border-radius: 999px !important;
    transition: background-color .18s var(--jd-ease), color .18s var(--jd-ease),
                transform .18s var(--jd-ease), box-shadow .18s var(--jd-ease);
}

.tp-pagination ul li a:hover,
.pagination .page-link:hover {
    transform: translateY(-2px);
    background: rgba(var(--primary-color-rgb), .1);
    color: var(--primary-color);
}

.tp-pagination ul li a.current,
.tp-pagination ul li span.current,
.pagination .page-item.active .page-link {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 8px 18px -8px var(--primary-color);
}

/* ============================================================
   14. FICHA DE PRODUCTO — reseñas, relacionados y extras
   ============================================================ */

/* --- Estrellas siempre en dorado (no gris tímido) --- */
.tp-product-details-rating i,
.tp-product-details-rating svg,
.tp-product-rating i {
    color: #f59e0b;
}

.tp-product-details-reviews a {
    transition: color .18s var(--jd-ease);
}

.tp-product-details-reviews a:hover { color: var(--primary-color); }

/* --- Nombre de la tienda vendedora --- */
.tp-store-name a { transition: color .18s var(--jd-ease); }
.tp-store-name a:hover { color: var(--primary-color); }

/* --- Compartir en redes: círculos que se llenan --- */
.tp-product-details-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: #f4f5fa;
    transition: transform .2s var(--jd-ease), background-color .2s var(--jd-ease), color .2s var(--jd-ease);
}

.tp-product-details-social a:hover {
    transform: translateY(-3px);
    background: var(--primary-color);
    color: #fff;
    box-shadow: var(--jd-shadow);
}

/* --- Cuenta regresiva de oferta flash: fichas tipo marcador --- */
.tp-product-details-countdown {
    background: #fff5f2;
    border: 1px solid #ffd9cc;
    border-radius: var(--jd-radius);
    padding: 14px 16px;
}

.tp-product-details-countdown-title { color: #c2410c; }

.tp-product-details-countdown-time ul li {
    background: #17161c;
    color: #fff;
    border-radius: 10px;
    min-width: 46px;
    padding: 7px 8px;
    font-weight: 700;
    text-align: center;
    box-shadow: var(--jd-shadow-sm);
}

/* --- Bloque de reseñas --- */
.product-review-container {
    border-radius: var(--jd-radius-lg);
}

/* La nota media, protagonista. */
.product-review-summary-value {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
}

/* Barras de 5★..1★: redondas, finas, en degradado dorado. */
.product-review-progress .progress,
.product-review-container .progress {
    height: 8px;
    border-radius: 999px;
    background: #f1f2f8;
    overflow: hidden;
}

.product-review-progress .progress-bar,
.product-review-container .progress-bar {
    border-radius: 999px;
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

/* Botones de control (escribir reseña, filtrar) como píldoras. */
.review-control-btn,
.review-clear-btn {
    border-radius: 999px !important;
}

/* Fotos que suben los clientes en las reseñas. */
.review-images img,
.review-images-container img {
    border-radius: var(--jd-radius-sm);
    transition: transform .2s var(--jd-ease);
}

.review-images img:hover { transform: scale(1.05); }

.review-list > * {
    border-radius: var(--jd-radius);
    transition: background-color .15s var(--jd-ease);
}

/* --- Productos relacionados --- */
.tp-related-title { letter-spacing: -.025em; }

.tp-related-subtitle {
    display: inline-block;
    background: rgba(var(--primary-color-rgb), .1);
    color: var(--primary-color);
    border-radius: 999px;
    padding: 5px 14px;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .02em;
}

/* --- Descripción del producto: lectura cómoda --- */
.tp-product-details-desc-wrapper {
    line-height: 1.75;
}

.tp-product-details-desc-wrapper img {
    border-radius: var(--jd-radius);
    max-width: 100%;
}

/* --- Cantidad: los +/− responden --- */
.tp-product-details-quantity .tp-cart-plus:hover,
.tp-product-details-quantity .tp-cart-minus:hover {
    color: var(--primary-color);
}

@media (prefers-reduced-motion: reduce) {
    .tp-product-details-social a:hover,
    .tp-pagination ul li a:hover,
    .pagination .page-link:hover,
    .review-images img:hover {
        transform: none;
    }
}

/* ============================================================
   11.7 COMPRA EXPRESS — logos de métodos parejos
   Misma regla del checkout: todos a una altura (28px aquí, las
   filas del modal son más compactas), ancho proporcional.
   ============================================================ */

/* Caja máxima (28 alto × 64 ancho, el ancho nativo de la columna del
   logo): la altura FIJA de antes obligaba a los wordmarks a ensancharse. */
.jd-express-method-logo img {
    max-height: 28px !important;
    max-width: 64px !important;
    height: auto !important;
    width: auto !important;
    object-fit: contain;
}

/* ============================================================
   11.8 COMPARADOR — productos protagonistas, aire para los
   botones flotantes y el Asesor de compra con IA
   ============================================================ */

/* Aire al final de la página: los botones flotantes de WhatsApp y
   Tawk.to tapaban las últimas filas de la tabla de comparación. */
.compare-area { padding-bottom: 170px !important; }

/* Productos más GRANDES: la vista ya pide el corte 'medium' (600px),
   aquí se le da el espacio para lucirse. */
.compare-thumb img {
    width: 100%;
    max-width: 200px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: 12px;
}
.compare-col-product { min-width: 230px; }
.compare-product-title { font-size: 1.02rem; font-weight: 700; }

/* Tarjeta del Asesor IA: la familia de la casa (azul del tema en tres
   tonos + halo aclarado + destello), como Wava y el ticket de entrega. */
.jdCmp {
    position: relative; overflow: hidden; border-radius: 18px;
    background: linear-gradient(135deg, #2797ff 0%, #0873d6 58%, #0658a3 100%);
    color: #fff; padding: 16px 18px;
    box-shadow: 0 18px 38px -20px rgba(6, 96, 179, .6), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.jdCmp::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(300px 200px at 90% -25%, #90caff, transparent 68%);
    opacity: .5;
}
.jdCmp::after {
    content: ""; position: absolute; top: -60%; left: -60%; width: 45%; height: 220%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .18), transparent);
    transform: rotate(14deg); pointer-events: none;
    animation: jdCmpSheen 6s ease-in-out infinite;
}
@keyframes jdCmpSheen { 0%, 62% { left: -60%; } 100% { left: 140%; } }

.jdCmp-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.jdCmp-bot {
    flex: 0 0 44px; height: 44px; border-radius: 50%;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .16);
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.jdCmp-copy { flex: 1; min-width: 200px; }
.jdCmp-copy b { display: block; font-size: .95rem; }
.jdCmp-copy p { margin: 2px 0 0; font-size: .82rem; color: rgba(255, 255, 255, .72); }
.jdCmp-btn {
    position: relative; z-index: 1; border: 0; border-radius: 999px;
    padding: 10px 20px; font-weight: 700; font-size: .88rem;
    background: #fff; color: #0658a3; cursor: pointer;
    transition: transform .15s ease;
}
.jdCmp-btn:hover { transform: translateY(-1px); }
.jdCmp-btn:disabled { opacity: .7; cursor: wait; }
.jdCmp-out {
    position: relative; z-index: 1; margin-top: 12px;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 13px; padding: 12px 14px;
    font-size: .88rem; line-height: 1.55;
}
.jdCmp-out p { margin: 0 0 6px; color: #fff; }
.jdCmp-out p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   12. ACCESIBILIDAD / RENDIMIENTO
   Si el visitante pidió menos movimiento en su sistema, se apaga
   todo lo decorativo. En iPhone es un ajuste común.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .tp-product-item,
    .tp-product-item:hover,
    .tp-product-thumb img,
    .tp-product-item:hover .tp-product-thumb img,
    .tp-btn:hover,
    .tp-btn-2:hover,
    .tp-btn-blue:hover,
    .tp-product-details-add-to-cart-btn:hover,
    .tp-product-details-buy-now-btn:hover {
        transform: none;
        transition: none;
    }

    .tp-product-details-buy-now-btn::after,
    .jd-express-pay::after,
    .jdCmp::after {
        animation: none;
        display: none;
    }

    .tp-footer-social a:hover,
    .tp-header-action-btn:hover,
    .tp-slider-button-prev:hover,
    .tp-slider-button-next:hover,
    .tp-backtotop:hover {
        transform: none;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   [JD] SECCIÓN 10 — Tarjeta de producto: reseñas y precio que se partían.
   En tarjetas estrechas «(1 Reseñas)» caía en dos líneas y el precio viejo
   se iba debajo del nuevo, partiendo además el símbolo de la moneda de sus
   cifras. Ambos son lo mismo: texto al que hay que prohibirle romperse.
   ───────────────────────────────────────────────────────────────────────── */

/* Reseñas: la fila entera en línea, y el contador sin partirse nunca. */
.tp-product-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.tp-product-rating-icon {
    flex: 0 0 auto;
    line-height: 1;
    white-space: nowrap;
}

.tp-product-rating-text {
    flex: 0 1 auto;
    min-width: 0;
}

.tp-product-rating-text a,
.tp-product-rating-text span {
    white-space: nowrap;
    font-size: 12px;
}

/* Precio: nuevo y anterior en la misma línea, cada uno entero.
   Si de verdad no caben, salta el ANTERIOR abajo (no el actual). */
.tp-product-price-wrapper {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.tp-product-price-wrapper .tp-product-price,
.tp-product-price-wrapper .old-price,
.tp-product-price-wrapper .new-price {
    white-space: nowrap;
}

/* En pantallas muy estrechas, el precio manda: se encoge un punto antes de
   partirse, que es lo que hacía que «$ 220.000» y «330.000» se separaran. */
@media (max-width: 400px) {
    .tp-product-price-wrapper .old-price {
        font-size: 13px;
    }

    .tp-product-rating-text span {
        font-size: 11px;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   [JD] SECCIÓN 11 — DEJAR DE PARECER SHOFY DE FÁBRICA
   Franja de ventajas + cabecera de sección con pestañas. Shofy lo compra
   cualquiera: estas dos piezas salen idénticas en cientos de tiendas. Aquí
   se les mete la firma de la casa —tecla, rejilla, barra de energía y los
   símbolos del mando— sin salirse del claro ni de los colores del tema.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── FASE 1 · Estructura: que sean tarjetas de verdad ────────────────────
   El original son cuatro bloques sueltos con altura distinta según cuánto
   texto tenga cada uno. Aquí todas miden igual y el texto respira. */
.tp-feature-area .tp-feature-item {
    position: relative;
    overflow: hidden;
    height: 100%;
    padding: 20px 18px;
    border-radius: 14px;
    background: linear-gradient(180deg, #fbfcff 0%, #fff 70%);
    border: 1px solid #eef1f5;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.tp-feature-area .tp-feature-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.2px;
    margin-bottom: 4px;
    color: #0f172a;
}

.tp-feature-area .tp-feature-content p {
    font-size: 12.5px;
    line-height: 1.5;
    color: #64748b;
    margin-bottom: 0;
    text-wrap: balance;
}

/* ── FASE 2 · ADN gamer: tecla, rejilla, energía y símbolos ──────────────
   El icono deja de flotar suelto y pasa a ser una TECLA con canto inferior
   que se hunde al tocarla, igual que los botones del sitio. */
.tp-feature-area .tp-feature-icon {
    flex: 0 0 auto;
}

.tp-feature-area .tp-feature-icon > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--tp-theme-primary, #0989ff) 9%, #fff);
    border: 1px solid color-mix(in srgb, var(--tp-theme-primary, #0989ff) 20%, #fff);
    box-shadow: 0 3px 0 color-mix(in srgb, var(--tp-theme-primary, #0989ff) 18%, #fff);
    color: var(--tp-theme-primary, #0989ff);
    transition: transform .15s ease, box-shadow .15s ease;
}

.tp-feature-area .tp-feature-item:hover .tp-feature-icon > span {
    transform: translateY(1px);
    box-shadow: 0 2px 0 color-mix(in srgb, var(--tp-theme-primary, #0989ff) 26%, #fff);
}

.tp-feature-area .tp-feature-icon svg,
.tp-feature-area .tp-feature-icon i {
    width: 21px;
    height: 21px;
    font-size: 20px;
}

/* Rejilla de «campo de juego», apenas visible y difuminada hacia abajo. */
.tp-feature-area .tp-feature-item::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .45;
    background-image:
        linear-gradient(rgba(15, 23, 42, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, .045) 1px, transparent 1px);
    background-size: 20px 20px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%);
            mask-image: linear-gradient(180deg, #000, transparent 75%);
}

.tp-feature-area .tp-feature-item > * {
    position: relative;
    z-index: 1;
}

/* Barra de energía: aparece al pasar por encima, con los colores del mando.
   Es la firma que ya llevan el pie, el boletín y las suscripciones. */
.tp-feature-area .tp-feature-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 2;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
    background: linear-gradient(90deg, #e2314b, #f5a623, #23a559, var(--tp-theme-primary, #0989ff));
}

.tp-feature-area .tp-feature-item:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--tp-theme-primary, #0989ff) 28%, #fff);
    box-shadow: 0 14px 30px -18px rgba(15, 23, 42, .35);
}

.tp-feature-area .tp-feature-item:hover::before {
    transform: scaleX(1);
}

/* Los símbolos del mando, uno por tarjeta, como marca de agua. Es el detalle
   que nadie más tiene: dice «esto es una tienda de juegos» sin gritarlo. */
.tp-feature-area .tp-feature-content {
    position: relative;
}

.tp-feature-area .tp-feature-content::after {
    position: absolute;
    right: -4px;
    bottom: -14px;
    font-size: 40px;
    line-height: 1;
    color: color-mix(in srgb, var(--tp-theme-primary, #0989ff) 10%, transparent);
    pointer-events: none;
    transition: transform .3s ease, color .3s ease;
}

.tp-feature-area [class*="col-"]:nth-child(1) .tp-feature-content::after { content: "\25B3"; }
.tp-feature-area [class*="col-"]:nth-child(2) .tp-feature-content::after { content: "\25CB"; }
.tp-feature-area [class*="col-"]:nth-child(3) .tp-feature-content::after { content: "\2715"; }
.tp-feature-area [class*="col-"]:nth-child(4) .tp-feature-content::after { content: "\25A1"; }

.tp-feature-area .tp-feature-item:hover .tp-feature-content::after {
    transform: translateY(-3px) rotate(-8deg);
    color: color-mix(in srgb, var(--tp-theme-primary, #0989ff) 18%, transparent);
}

/* ── FASE 3 · Cabecera de sección y pestañas ────────────────────────────
   La etiqueta pasa a ser una TECLA, el título lleva el cursor retro y las
   pestañas dejan de ser texto suelto para ser un selector de verdad. */
.tp-section-title-pre {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--tp-theme-primary, #0989ff) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--tp-theme-primary, #0989ff) 22%, #fff);
    box-shadow: 0 3px 0 color-mix(in srgb, var(--tp-theme-primary, #0989ff) 20%, #fff);
    color: var(--tp-theme-primary, #0989ff);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Cursor retro parpadeante detrás del título de sección. */
.tp-section-title-wrapper .tp-section-title::after {
    content: "_";
    margin-left: 4px;
    color: var(--tp-theme-primary, #0989ff);
    animation: jdCursorSeccion 1.1s steps(2, start) infinite;
}

@keyframes jdCursorSeccion {
    to { opacity: 0; }
}

/* Pestañas como selector: pastilla contenedora y la activa encendida. */
.tp-product-tab .nav-tabs {
    gap: 4px;
    border: 0;
    padding: 4px;
    border-radius: 999px;
    background: #f4f6fa;
}

.tp-product-tab .nav-tabs .nav-link {
    border: 0;
    border-radius: 999px;
    padding: 7px 15px;
    font-size: 13.5px;
    font-weight: 700;
    color: #64748b;
    transition: color .15s ease, background .15s ease, box-shadow .15s ease;
}

.tp-product-tab .nav-tabs .nav-link:hover {
    color: var(--tp-theme-primary, #0989ff);
}

.tp-product-tab .nav-tabs .nav-link.active {
    color: #fff;
    background: var(--tp-theme-primary, #0989ff);
    box-shadow: 0 3px 0 color-mix(in srgb, var(--tp-theme-primary, #0989ff) 55%, #000),
                0 10px 20px -12px var(--tp-theme-primary, #0989ff);
}

.tp-product-tab .nav-tabs .nav-link.active:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--tp-theme-primary, #0989ff) 55%, #000);
}

/* La rayita del tema sobra: el selector ya marca cuál está activa. */
.tp-product-tab .tp-product-tab-line {
    display: none;
}

/* ── FASE 4 · Detalle fino y móvil ──────────────────────────────────────
   En el teléfono las ventajas se compactan y las pestañas se deslizan de
   lado en vez de amontonarse en varias filas. */
@media (max-width: 767px) {
    .tp-feature-area .tp-feature-item {
        padding: 15px 13px;
    }

    .tp-feature-area .tp-feature-icon > span {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .tp-feature-area .tp-feature-title {
        font-size: 13.5px;
    }

    .tp-feature-area .tp-feature-content p {
        font-size: 11.5px;
    }

    .tp-feature-area .tp-feature-content::after {
        font-size: 30px;
        bottom: -10px;
    }

    .tp-product-tab .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        max-width: 100%;
    }

    .tp-product-tab .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .tp-product-tab .nav-tabs .nav-link {
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tp-feature-area .tp-feature-item,
    .tp-feature-area .tp-feature-item::before,
    .tp-feature-area .tp-feature-icon > span,
    .tp-feature-area .tp-feature-content::after {
        transition: none;
    }

    .tp-feature-area .tp-feature-item:hover {
        transform: none;
    }

    .tp-section-title-wrapper .tp-section-title::after {
        animation: none;
    }
}

/* ── FASE 5 · Subir el volumen ───────────────────────────────────────────
   La fase anterior dejó la estructura bien pero todo en tono agua: el icono
   casi transparente y los símbolos invisibles. Aquí se sube el contraste sin
   salirse del claro — el color del tema pasa a ser PROTAGONISTA (sólido en
   la tecla) y la paleta del mando sigue de acento fino, solo en la barra. */

/* La tecla del icono, ahora sólida: es lo primero que ve el ojo. */
.tp-feature-area .tp-feature-icon > span {
    width: 48px;
    height: 48px;
    color: #fff;
    border: 0;
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--tp-theme-primary, #0989ff) 88%, #fff),
        var(--tp-theme-primary, #0989ff));
    box-shadow:
        0 3px 0 color-mix(in srgb, var(--tp-theme-primary, #0989ff) 55%, #000),
        0 10px 22px -12px var(--tp-theme-primary, #0989ff);
}

.tp-feature-area .tp-feature-item:hover .tp-feature-icon > span {
    transform: translateY(2px);
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--tp-theme-primary, #0989ff) 55%, #000),
        0 6px 14px -10px var(--tp-theme-primary, #0989ff);
}

.tp-feature-area .tp-feature-icon svg,
.tp-feature-area .tp-feature-icon i {
    width: 23px;
    height: 23px;
    font-size: 22px;
    color: #fff;
}

/* Resplandor propio de cada tarjeta: da profundidad sin ensuciar el blanco. */
.tp-feature-area .tp-feature-item {
    background:
        radial-gradient(120% 90% at 0% 0%,
            color-mix(in srgb, var(--tp-theme-primary, #0989ff) 9%, transparent) 0%,
            transparent 55%),
        linear-gradient(180deg, #fbfcff 0%, #fff 70%);
    border-color: #e6ebf2;
}

.tp-feature-area .tp-feature-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px -20px rgba(15, 23, 42, .45);
}

/* Los símbolos del mando: más grandes, en la esquina, y ya bien visibles.
   Cada uno con su color de la paleta — acento fino, nunca el protagonista. */
.tp-feature-area .tp-feature-content::after {
    right: -8px;
    bottom: -20px;
    font-size: 58px;
    opacity: .16;
    transition: transform .35s ease, opacity .35s ease;
}

.tp-feature-area [class*="col-"]:nth-child(1) .tp-feature-content::after { color: #e2314b; }
.tp-feature-area [class*="col-"]:nth-child(2) .tp-feature-content::after { color: #23a559; }
.tp-feature-area [class*="col-"]:nth-child(3) .tp-feature-content::after { color: #f5a623; }
.tp-feature-area [class*="col-"]:nth-child(4) .tp-feature-content::after { color: var(--tp-theme-primary, #0989ff); }

.tp-feature-area .tp-feature-item:hover .tp-feature-content::after {
    transform: translateY(-4px) rotate(-10deg) scale(1.06);
    opacity: .3;
}

/* Cada tarjeta enciende su barra con SU color: cuatro luces distintas al
   recorrer la fila, que es lo que le da vida a la franja entera. */
.tp-feature-area [class*="col-"]:nth-child(1) .tp-feature-item::before { background: linear-gradient(90deg, #e2314b, color-mix(in srgb, #e2314b 40%, #fff)); }
.tp-feature-area [class*="col-"]:nth-child(2) .tp-feature-item::before { background: linear-gradient(90deg, #23a559, color-mix(in srgb, #23a559 40%, #fff)); }
.tp-feature-area [class*="col-"]:nth-child(3) .tp-feature-item::before { background: linear-gradient(90deg, #f5a623, color-mix(in srgb, #f5a623 40%, #fff)); }
.tp-feature-area [class*="col-"]:nth-child(4) .tp-feature-item::before { background: linear-gradient(90deg, var(--tp-theme-primary, #0989ff), color-mix(in srgb, var(--tp-theme-primary, #0989ff) 40%, #fff)); }

.tp-feature-area .tp-feature-title {
    font-size: 15.5px;
}

.tp-feature-area .tp-feature-content p {
    color: #5b6b7f;
}

/* ── FASE 6 · Cabecera: cursor de terminal y línea viva ──────────────────
   El guion bajo quedaba descolgado bajo el texto. Se cambia por un cursor de
   terminal de verdad: un bloque a la altura de las letras. */
.tp-section-title-wrapper .tp-section-title::after {
    content: "";
    display: inline-block;
    width: .1em;
    height: .78em;
    margin-left: .12em;
    vertical-align: baseline;
    background: var(--tp-theme-primary, #0989ff);
    border-radius: 1px;
    animation: jdCursorSeccion 1.05s steps(2, start) infinite;
}

/* La raya que separa el título de las pestañas: deja de ser gris muerta. */
.tp-product-tab-border,
.tp-section-title-wrapper + .tp-product-tab-border {
    position: relative;
}

.tp-product-tab .nav-tabs {
    background: #eef2f7;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .06);
}

.tp-product-tab .nav-tabs .nav-link {
    color: #475569;
}

.tp-product-tab .nav-tabs .nav-link.active {
    box-shadow:
        0 3px 0 color-mix(in srgb, var(--tp-theme-primary, #0989ff) 55%, #000),
        0 12px 24px -12px var(--tp-theme-primary, #0989ff);
}

/* La etiqueta de sección, con el mismo peso que la tecla del icono. */
.tp-section-title-pre {
    background: color-mix(in srgb, var(--tp-theme-primary, #0989ff) 13%, #fff);
    border-color: color-mix(in srgb, var(--tp-theme-primary, #0989ff) 30%, #fff);
    box-shadow: 0 3px 0 color-mix(in srgb, var(--tp-theme-primary, #0989ff) 28%, #fff);
}

@media (max-width: 767px) {
    .tp-feature-area .tp-feature-icon > span {
        width: 42px;
        height: 42px;
    }

    .tp-feature-area .tp-feature-content::after {
        font-size: 44px;
        bottom: -16px;
    }
}

/* ── FASE 7 · El selector, versión TECLA ─────────────────────────────────
   La pastilla gris con el botón azul dentro era correcta pero anónima: la
   lleva medio internet. Aquí cada pestaña es una TECLA de verdad —canto
   inferior, se hunde al pulsarla— y la activa queda encendida con su franja
   de energía encima. Es la misma firma de los botones del sitio, así que la
   sección deja de parecer una plantilla comprada. */

/* Fuera la pastilla de fondo: las teclas se sostienen solas. */
.tp-product-tab .nav-tabs {
    gap: 8px;
    padding: 0;
    background: none;
    box-shadow: none;
    border: 0;
    align-items: flex-end;
}

.tp-product-tab .nav-tabs .nav-link {
    position: relative;
    overflow: hidden;
    padding: 9px 16px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 700;
    color: #475569;
    background: linear-gradient(180deg, #fff, #f7f9fc);
    border: 1px solid #e3e9f0;
    box-shadow: 0 3px 0 #dfe6ee;
    transition: transform .13s ease, box-shadow .13s ease,
                background .18s ease, color .18s ease, border-color .18s ease;
}

/* Al pasar por encima, la tecla se levanta un pelo. */
.tp-product-tab .nav-tabs .nav-link:hover {
    transform: translateY(-1px);
    color: var(--tp-theme-primary, #0989ff);
    border-color: color-mix(in srgb, var(--tp-theme-primary, #0989ff) 35%, #fff);
    box-shadow: 0 4px 0 color-mix(in srgb, var(--tp-theme-primary, #0989ff) 22%, #fff);
}

/* Al pulsarla, se hunde de verdad. */
.tp-product-tab .nav-tabs .nav-link:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 #dfe6ee;
}

/* La activa: tecla pulsada y encendida, con su franja de energía arriba. */
.tp-product-tab .nav-tabs .nav-link.active {
    transform: translateY(2px);
    color: #fff;
    border-color: transparent;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--tp-theme-primary, #0989ff) 88%, #fff),
        var(--tp-theme-primary, #0989ff));
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--tp-theme-primary, #0989ff) 55%, #000),
        0 10px 20px -12px var(--tp-theme-primary, #0989ff);
}

.tp-product-tab .nav-tabs .nav-link.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #e2314b, #f5a623, #23a559, #fff);
    background-size: 200% 100%;
    animation: jdTabEnergia 4.5s linear infinite;
}

@keyframes jdTabEnergia {
    to { background-position: -200% 0; }
}

/* Brillo que barre la tecla activa una vez cada tanto: la mira el ojo sin
   que moleste, como el indicador de un menú de consola. */
.tp-product-tab .nav-tabs .nav-link.active::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
    transform: translateX(-120%);
    animation: jdTabBrillo 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes jdTabBrillo {
    0%, 60% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}

@media (max-width: 767px) {
    .tp-product-tab .nav-tabs {
        gap: 6px;
        padding-bottom: 4px;
    }

    .tp-product-tab .nav-tabs .nav-link {
        padding: 8px 13px;
        font-size: 12.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tp-product-tab .nav-tabs .nav-link,
    .tp-product-tab .nav-tabs .nav-link.active::before,
    .tp-product-tab .nav-tabs .nav-link.active::after {
        transition: none;
        animation: none;
    }

    .tp-product-tab .nav-tabs .nav-link:hover {
        transform: none;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   [JD] SECCIÓN 12 — EL CARRITO LATERAL
   Es la última pantalla antes de pagar: la que decide si la compra sigue o
   se abandona. Venía con el subtotal pegado a su etiqueta, sin jerarquía
   entre subtotal y total, y con el mismo blanco de plantilla.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── FASE 1 · Que se lea: etiqueta a un lado, importe al otro ────────────
   El tema los dejaba pegados y en orden invertido («$16.000Subtotal:»).
   Con flex cada uno ocupa su extremo y no hay forma de que se junten. */
.cartmini__checkout-title > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.cartmini__checkout-title .cartmini__checkout-label {
    float: none;
    order: -1;                          /* la etiqueta SIEMPRE primero */
    font-size: 13.5px;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
}

.cartmini__checkout-title > div > span:last-child {
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
}

/* El TOTAL manda: más grande y con el color del tema. Antes pesaba igual
   que el subtotal y el ojo no sabía dónde mirar. */
.cartmini__checkout-title > div:last-child .cartmini__checkout-label {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
}

.cartmini__checkout-title > div:last-child > span:last-child {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.3px;
    color: var(--tp-theme-primary, #0989ff);
}

/* ── FASE 2 · El bloque de totales como un ticket ────────────────────────*/
.cartmini__checkout {
    padding: 16px 18px 18px;
    border-top: 1px solid #eef1f5;
    background: linear-gradient(180deg, #fbfcff, #fff);
}

.cartmini__checkout-title {
    padding: 14px 15px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e9eef4;
    box-shadow: 0 6px 18px -14px rgba(15, 23, 42, .5);
}

/* ── FASE 3 · ADN de la casa: energía, teclas y rejilla ──────────────────*/
.cartmini__area .cartmini__wrapper,
.cartmini__wrapper {
    position: relative;
}

/* Barra de energía arriba del panel: la firma del sitio. */
.cartmini__wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 5;
    background: linear-gradient(90deg, #e2314b, #f5a623, #23a559, var(--tp-theme-primary, #0989ff), #e2314b);
    background-size: 300% 100%;
    animation: jdCartEnergia 7s linear infinite;
}

@keyframes jdCartEnergia {
    to { background-position: -300% 0; }
}

/* Cabecera con más presencia. */
.cartmini__top-title-text,
.cartmini__top-title h4 {
    font-weight: 800;
    letter-spacing: -.2px;
    color: #0f172a;
}

/* Cada producto, en su tarjeta. Antes eran filas sueltas separadas por una
   línea, que a dos productos ya se veía desordenado. */
.cartmini__widget-item {
    position: relative;
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 12px;
    border: 1px solid #eef1f5;
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.cartmini__widget-item:hover {
    border-color: color-mix(in srgb, var(--tp-theme-primary, #0989ff) 30%, #fff);
    box-shadow: 0 10px 22px -18px rgba(15, 23, 42, .5);
}

.cartmini__thumb img {
    border-radius: 8px;
    background: #f4f6fa;
}

.cartmini__title a {
    font-weight: 700;
    color: #0f172a;
}

.cartmini__price-wrapper .amount,
.cartmini__price-wrapper .tp-product-price {
    font-weight: 800;
    color: var(--tp-theme-primary, #0989ff);
}

/* La equis de quitar: discreta hasta que la buscas, y roja al tocarla. */
.cartmini__del {
    color: #cbd5e1;
    transition: color .15s ease, transform .15s ease;
}

.cartmini__del:hover {
    color: #e2314b;
    transform: scale(1.15);
}

/* Botones como teclas, igual que el resto del sitio. */
.cartmini__checkout-btn .tp-btn {
    border-radius: 12px;
    font-weight: 800;
    box-shadow: 0 3px 0 color-mix(in srgb, var(--tp-theme-primary, #0989ff) 55%, #000),
                0 12px 24px -14px var(--tp-theme-primary, #0989ff);
    transition: transform .12s ease, box-shadow .12s ease, filter .15s ease;
}

.cartmini__checkout-btn .tp-btn:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 color-mix(in srgb, var(--tp-theme-primary, #0989ff) 55%, #000);
}

.cartmini__checkout-btn .tp-btn-border {
    box-shadow: 0 3px 0 #e3e9f0;
}

.cartmini__checkout-btn .tp-btn-border:active {
    box-shadow: 0 0 0 #e3e9f0;
}

/* ── FASE 4 · Remates ───────────────────────────────────────────────── */

/* Carrito vacío: que no sea un hueco en blanco. */
.cartmini__empty img {
    opacity: .75;
    max-width: 130px;
}

.cartmini__empty p {
    color: #64748b;
}

@media (max-width: 575px) {
    .cartmini__checkout {
        padding: 14px 14px 16px;
    }

    .cartmini__checkout-title > div:last-child > span:last-child {
        font-size: 19px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cartmini__wrapper::before {
        animation: none;
    }

    .cartmini__widget-item,
    .cartmini__del,
    .cartmini__checkout-btn .tp-btn {
        transition: none;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   [JD] SECCIÓN 13 — AVISO DE «SIN DEVOLUCIONES»
   El del plugin es una caja celeste de plantilla que además solo aparece en
   la ficha. Este es el mismo aviso con la línea de la casa, y ahora también
   sale en el checkout y en el express — que es donde de verdad importa.
   ═════════════════════════════════════════════════════════════════════════ */

.jd-noref {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 16px 0;
    padding: 13px 15px;
    border-radius: 12px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--tp-theme-primary, #0989ff) 7%, #fff), #fff);
    border: 1px solid color-mix(in srgb, var(--tp-theme-primary, #0989ff) 20%, #fff);
    font-size: 12.5px;
    line-height: 1.5;
    color: #5b6b7f;
}

.jd-noref-ic {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--tp-theme-primary, #0989ff) 88%, #fff),
        var(--tp-theme-primary, #0989ff));
    box-shadow: 0 2px 0 color-mix(in srgb, var(--tp-theme-primary, #0989ff) 55%, #000);
}

.jd-noref-ic svg {
    width: 17px;
    height: 17px;
}

.jd-noref-txt strong {
    display: block;
    color: #0f172a;
    font-weight: 800;
    font-size: 13px;
    margin-bottom: 1px;
}

/* Versión compacta para el modal del express, donde el espacio es oro. */
.jd-noref-mini {
    margin: 10px 0 0;
    padding: 10px 12px;
    font-size: 11.5px;
}

.jd-noref-mini .jd-noref-ic {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 8px;
}

.jd-noref-mini .jd-noref-ic svg {
    width: 14px;
    height: 14px;
}

.jd-noref-mini .jd-noref-txt strong {
    font-size: 12px;
}

/* La caja original del plugin, en la ficha del producto: se le quita el
   celeste de plantilla y se le pone la línea de la casa sin tocar su código
   (lleva los estilos incrustados, así que hay que ganarle con !important). */
.not-refundable-notice {
    background-color: color-mix(in srgb, var(--tp-theme-primary, #0989ff) 6%, #fff) !important;
    border-color: color-mix(in srgb, var(--tp-theme-primary, #0989ff) 20%, #fff) !important;
    border-radius: 12px !important;
    padding: 13px 15px !important;
    gap: 11px !important;
}

.not-refundable-notice svg {
    stroke: var(--tp-theme-primary, #0989ff) !important;
}

.not-refundable-notice span {
    color: #5b6b7f !important;
    font-size: 12.5px !important;
    font-weight: 600;
}

/* ═════════════════════════════════════════════════════════════════════════
   [JD] SECCIÓN 14 — EL ENCABEZADO
   Es lo primero que se ve y lo que más se usa. Venía correcto pero neutro:
   buscador de plantilla, iconos planos y selectores sin peso. Aquí entra el
   ADN de la casa —energía, teclas y color del tema— sin robarle sitio a lo
   que importa, que es buscar y llegar al carrito.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── FASE 1 · La firma arriba del todo ───────────────────────────────────
   Una línea de energía cruzando la parte superior de la página. Es lo
   primero que carga y ya dice de qué tienda se trata. */
.tp-header-area {
    position: relative;
}

.tp-header-area::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 20;
    background: linear-gradient(90deg, #e2314b, #f5a623, #23a559, var(--tp-theme-primary, #0989ff), #e2314b);
    background-size: 300% 100%;
    animation: jdHeadEnergia 8s linear infinite;
}

@keyframes jdHeadEnergia {
    to { background-position: -300% 0; }
}

/* Idioma y moneda: pasan de texto suelto a fichas con relieve. */
.tp-header-setting-toggle,
.tp-header-currency-toggle {
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .07);
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
}

.tp-header-setting-toggle:hover,
.tp-header-currency-toggle:hover {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .3);
    transform: translateY(-1px);
}

/* ── FASE 2 · El buscador, que es lo más usado ───────────────────────────*/
.tp-header-search-wrapper,
.tp-header-search-box {
    transition: box-shadow .18s ease, border-color .18s ease;
}

.tp-header-search-wrapper:focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tp-theme-primary, #0989ff) 18%, transparent);
    border-radius: 10px;
}

.tp-header-search-box input,
.tp-header-search input[type="text"],
.tp-header-search input[type="search"] {
    font-weight: 500;
}

.tp-header-search-box input::placeholder {
    color: #9aa7b8;
}

/* El botón de lupa, como una tecla del sitio. */
.tp-header-search-btn,
.tp-header-search button[type="submit"] {
    box-shadow: 0 3px 0 color-mix(in srgb, var(--tp-theme-primary, #0989ff) 55%, #000);
    transition: transform .12s ease, box-shadow .12s ease, filter .15s ease;
}

.tp-header-search-btn:hover,
.tp-header-search button[type="submit"]:hover {
    filter: brightness(.94);
}

.tp-header-search-btn:active,
.tp-header-search button[type="submit"]:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 color-mix(in srgb, var(--tp-theme-primary, #0989ff) 55%, #000);
}

/* ── FASE 3 · Iconos y contadores ────────────────────────────────────────
   Los iconos de comparar, favoritos y carrito eran trazos sueltos. Ahora
   viven en su tecla y el contador se enciende con el color del tema. */
.tp-header-action-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: #f6f8fb;
    border: 1px solid #e8edf3;
    transition: transform .13s ease, background .15s ease, border-color .15s ease, box-shadow .13s ease;
}

.tp-header-action-btn:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--tp-theme-primary, #0989ff) 8%, #fff);
    border-color: color-mix(in srgb, var(--tp-theme-primary, #0989ff) 30%, #fff);
    box-shadow: 0 8px 16px -12px var(--tp-theme-primary, #0989ff);
}

.tp-header-action-btn:active {
    transform: translateY(0);
}

.tp-header-action-badge,
.tp-header-action-badge-5 {
    background: var(--tp-theme-primary, #0989ff);
    color: #fff;
    font-weight: 800;
    font-size: 10.5px;
    box-shadow: 0 0 0 2px #fff;
}

/* Cuando hay algo dentro, el contador late una vez para que se note. */
.tp-header-action-item .tp-header-action-badge:not(:empty) {
    animation: jdBadgePop .5s ease-out 1;
}

@keyframes jdBadgePop {
    0% { transform: scale(.6); }
    60% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

/* ── FASE 4 · Barra de navegación ────────────────────────────────────────*/
.tp-category-menu-btn {
    border-radius: 10px 10px 0 0;
    font-weight: 800;
    letter-spacing: .2px;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18);
    transition: filter .15s ease;
}

.tp-category-menu-btn:hover {
    filter: brightness(1.06);
}

/* Los enlaces del menú, con subrayado que se enciende de izquierda a
   derecha en vez de aparecer de golpe. */
.tp-main-menu-content > ul > li > a,
.tp-header-bottom .tp-main-menu-content ul > li > a {
    position: relative;
}

.tp-main-menu-content > ul > li > a::after,
.tp-header-bottom .tp-main-menu-content ul > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    height: 2px;
    border-radius: 2px;
    background: var(--tp-theme-primary, #0989ff);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s ease;
}

.tp-main-menu-content > ul > li:hover > a::after,
.tp-header-bottom .tp-main-menu-content ul > li:hover > a::after {
    transform: scaleX(1);
}

@media (max-width: 991px) {
    .tp-header-action-btn {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tp-header-area::before {
        animation: none;
    }

    .tp-header-action-item .tp-header-action-badge:not(:empty) {
        animation: none;
    }

    .tp-header-action-btn,
    .tp-header-setting-toggle,
    .tp-header-currency-toggle {
        transition: none;
    }

    .tp-header-action-btn:hover,
    .tp-header-setting-toggle:hover,
    .tp-header-currency-toggle:hover {
        transform: none;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   [JD] SECCIÓN 15 — LA BARRA SUPERIOR (anuncios)
   Es la primera línea de la página y estaba plana: texto suelto, flechas de
   navegación sin peso y ningún indicio de la casa. Se le mete textura y
   relieve sin robarle protagonismo a lo que viene debajo.
   ═════════════════════════════════════════════════════════════════════════ */

/* OJO: NADA de overflow:hidden aquí — los desplegables de idioma y moneda
   se abren hacia abajo y quedarían recortados por el borde de la barra.
   La rejilla ya se contiene sola con inset:0 y su máscara. */
.tp-header-top,
.tp-header-top-2 {
    position: relative;
}

/* Rejilla de «campo de juego» sobre el negro: no se ve, se intuye. Es lo que
   quita esa sensación de bloque de color plano. */
.tp-header-top::after,
.tp-header-top-2::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .5;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 85%);
            mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 85%);
}

.tp-header-top > *,
.tp-header-top-2 > * {
    position: relative;
    z-index: 1;
}

/* El mensaje: el título con más cuerpo y el enlace de acción diferenciado,
   para que se lea «esto es la noticia» y «esto es lo que puedes hacer». */
.ae-anno-announcement__items strong,
.ae-anno-announcement__items b {
    font-weight: 800;
    letter-spacing: .1px;
}

.ae-anno-announcement__items a {
    position: relative;
    font-weight: 600;
    opacity: .85;
    transition: opacity .15s ease;
}

.ae-anno-announcement__items a:hover {
    opacity: 1;
}

/* Subrayado que se enciende al pasar por encima, igual que el menú. */
.ae-anno-announcement__items a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s ease;
}

.ae-anno-announcement__items a:hover::after {
    transform: scaleX(1);
}

/* Las flechas de pasar anuncio: teclas pequeñas en vez de símbolos sueltos. */
.ae-anno-announcement-wrapper button,
.ae-anno-announcement-wrapper [role="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .07);
    opacity: .8;
    transition: background .15s ease, border-color .15s ease, opacity .15s ease, transform .12s ease;
}

.ae-anno-announcement-wrapper button:hover,
.ae-anno-announcement-wrapper [role="button"]:hover {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .32);
    opacity: 1;
}

.ae-anno-announcement-wrapper button:active,
.ae-anno-announcement-wrapper [role="button"]:active {
    transform: translateY(1px);
}

/* La estrella (u otro icono del anuncio) en ámbar de la paleta del mando:
   acento fino, el único punto de color de toda la barra. */
.ae-anno-announcement__items svg:first-child,
.ae-anno-announcement__items i:first-child {
    color: #f5a623;
}

@media (max-width: 767px) {
    .tp-header-top::after,
    .tp-header-top-2::after {
        background-size: 20px 20px;
    }

    .ae-anno-announcement-wrapper button,
    .ae-anno-announcement-wrapper [role="button"] {
        width: 22px;
        height: 22px;
        border-radius: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ae-anno-announcement__items a::after,
    .ae-anno-announcement-wrapper button,
    .ae-anno-announcement-wrapper [role="button"] {
        transition: none;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   [JD] SECCIÓN 16 — BARRA DE NAVEGACIÓN · ADN de la casa + guiño PS5
   Tres cosas de la consola, traducidas a un tema CLARO (que es tu línea):
     · el BRILLO de panel — ese filo blanco superior de las carcasas;
     · la LUZ LED azul que respira bajo el elemento activo;
     · los SÍMBOLOS del mando, que aparecen al acercarse.
   Nada de fondos oscuros ni cromados: el guiño se nota, no se disfraza.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── El botón de categorías: carcasa con filo brillante y luz debajo ─────*/
.tp-category-menu-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Filo brillante superior: el reflejo de las carcasas blancas de la PS5. */
.tp-category-menu-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
    z-index: 2;
}

/* Luz LED que respira, como la del lateral de la consola. */
.tp-category-menu-btn::after {
    content: "";
    position: absolute;
    left: 14%;
    right: 14%;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: #7dd3fc;
    box-shadow: 0 0 10px 1px rgba(125, 211, 252, .9);
    opacity: .55;
    animation: jdPsLed 3.4s ease-in-out infinite;
    z-index: 2;
}

@keyframes jdPsLed {
    0%, 100% { opacity: .35; }
    50% { opacity: .95; }
}

.tp-category-menu-btn:hover::after {
    opacity: 1;
}

/* ── Los enlaces del menú: símbolo del mando al acercarse ────────────────
   Cada enlace tiene el suyo. No es decoración: es la señal de que estás
   sobre un elemento seleccionable, igual que el cursor de un menú de
   consola. Aparece deslizándose desde la izquierda. */
.tp-header-bottom .tp-main-menu-content ul > li,
.tp-main-menu-content > ul > li {
    position: relative;
}

.tp-header-bottom .tp-main-menu-content > ul > li > a::before,
.tp-main-menu-content > ul > li > a::before {
    content: "\25B3";
    display: inline-block;
    width: 0;
    margin-right: 0;
    overflow: hidden;
    opacity: 0;
    font-size: .72em;
    line-height: 1;
    color: var(--tp-theme-primary, #0989ff);
    transform: translateX(-4px);
    transition: opacity .2s ease, width .2s ease, margin .2s ease, transform .2s ease;
}

.tp-header-bottom .tp-main-menu-content > ul > li:nth-child(2) > a::before,
.tp-main-menu-content > ul > li:nth-child(2) > a::before { content: "\25CB"; }

.tp-header-bottom .tp-main-menu-content > ul > li:nth-child(3) > a::before,
.tp-main-menu-content > ul > li:nth-child(3) > a::before { content: "\2715"; }

.tp-header-bottom .tp-main-menu-content > ul > li:nth-child(4) > a::before,
.tp-main-menu-content > ul > li:nth-child(4) > a::before { content: "\25A1"; }

.tp-header-bottom .tp-main-menu-content > ul > li:hover > a::before,
.tp-main-menu-content > ul > li:hover > a::before {
    opacity: 1;
    width: 1em;
    margin-right: 5px;
    transform: translateX(0);
}

/* El subrayado de la sección 14 sube de categoría: ahora es una luz LED. */
.tp-main-menu-content > ul > li > a::after,
.tp-header-bottom .tp-main-menu-content ul > li > a::after {
    box-shadow: 0 0 8px color-mix(in srgb, var(--tp-theme-primary, #0989ff) 70%, transparent);
}

/* ── La barra, con su filo de luz al fondo ───────────────────────────────*/
.tp-header-bottom {
    position: relative;
}

.tp-header-bottom::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--tp-theme-primary, #0989ff) 35%, transparent) 25%,
        color-mix(in srgb, var(--tp-theme-primary, #0989ff) 35%, transparent) 75%,
        transparent);
    pointer-events: none;
}

@media (max-width: 991px) {
    /* En móvil el menú va en el panel lateral: los símbolos sobran ahí. */
    .tp-header-bottom .tp-main-menu-content > ul > li > a::before,
    .tp-main-menu-content > ul > li > a::before {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tp-category-menu-btn::after {
        animation: none;
        opacity: .6;
    }

    .tp-header-bottom .tp-main-menu-content > ul > li > a::before,
    .tp-main-menu-content > ul > li > a::before {
        transition: none;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   [JD] SECCIÓN 17 — LEGIBILIDAD DE LOS MENÚS
   El tema pinta los enlaces en un gris muy claro. Se ve elegante en una
   captura de la plantilla, pero en una pantalla normal —y más con luz de
   día o en un portátil barato— cuesta leerlo. Un menú es para leerlo
   rápido, no para admirarlo.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── FASE 1 · El menú principal ──────────────────────────────────────────*/
.tp-main-menu-content > ul > li > a,
.tp-header-bottom .tp-main-menu-content > ul > li > a,
.main-menu nav > ul > li > a {
    color: #1f2937 !important;
    font-weight: 700;
}

.tp-main-menu-content > ul > li:hover > a,
.tp-header-bottom .tp-main-menu-content > ul > li:hover > a,
.main-menu nav > ul > li:hover > a,
.main-menu nav > ul > li.active > a {
    color: var(--tp-theme-primary, #0989ff) !important;
}

/* La flechita de «tiene submenú», que estaba casi invisible. */
.main-menu nav > ul > li > a svg,
.tp-main-menu-content > ul > li > a svg,
.main-menu nav > ul > li > a i {
    opacity: .75;
}

/* ── FASE 2 · Los submenús desplegados ───────────────────────────────────*/
.tp-submenu li > a,
.tp-submenu a,
.tp-mega-menu li > a {
    color: #334155 !important;
    font-weight: 600;
}

.tp-submenu li > a:hover,
.tp-submenu a:hover,
.tp-mega-menu li > a:hover {
    color: var(--tp-theme-primary, #0989ff) !important;
}

/* El punto de cada entrada: era casi blanco. */
.tp-submenu li > a::before,
.tp-submenu li::marker {
    color: color-mix(in srgb, var(--tp-theme-primary, #0989ff) 60%, #fff) !important;
    opacity: 1;
}

/* ── FASE 3 · El panel de categorías ─────────────────────────────────────*/
.tp-category-menu-content ul li a,
.tp-category-menu-content a {
    color: #1f2937 !important;
    font-weight: 600;
}

.tp-category-menu-content ul li a:hover,
.tp-category-menu-content a:hover {
    color: var(--tp-theme-primary, #0989ff) !important;
}

/* Sus iconos, en el color del tema y sin transparencias que los apaguen. */
.tp-category-menu-content a svg,
.tp-category-menu-content a img,
.tp-category-menu-content .jd-mi {
    opacity: 1 !important;
    color: var(--tp-theme-primary, #0989ff);
}

/* El elemento sobre el que estás, marcado de verdad y no solo por el texto. */
.tp-category-menu-content ul li:hover > a {
    background: color-mix(in srgb, var(--tp-theme-primary, #0989ff) 8%, #fff);
    border-radius: 8px;
}

/* ── FASE 4 · El submenú de categorías (la columna de la derecha) ────────
   Era el peor caso: gris claro sobre blanco y con puntos casi invisibles. */
.tp-category-menu-content .tp-submenu li > a,
.tp-category-menu-content .tp-submenu a {
    color: #374151 !important;
    font-weight: 600;
}

.tp-category-menu-content .tp-submenu li > a:hover,
.tp-category-menu-content .tp-submenu a:hover {
    color: var(--tp-theme-primary, #0989ff) !important;
}

/* Cabeceras de grupo dentro de los mega-menús: que se distingan de sus
   hijos por peso y color, no solo por posición. */
.tp-mega-menu > li > a,
.tp-submenu.tp-mega-menu > li > a {
    color: #0f172a !important;
    font-weight: 800;
}

/* ═════════════════════════════════════════════════════════════════════════
   [JD] SECCIÓN 18 — FASE 5 del menú principal
   Ya se lee bien y ya tiene el símbolo del mando. Lo que le faltaba es que
   se SIENTA pulsable: ahora cada entrada es una tecla, el símbolo entra sin
   mover el texto, la flecha gira al abrir y la página en la que estás queda
   marcada de forma permanente.
   ═════════════════════════════════════════════════════════════════════════ */

/* El hueco del símbolo se reserva SIEMPRE, aunque esté invisible. Si no, al
   aparecer empujaba el texto y el menú entero temblaba al pasar el ratón. */
.tp-header-bottom .tp-main-menu-content > ul > li > a::before,
.tp-main-menu-content > ul > li > a::before,
.main-menu nav > ul > li > a::before {
    width: 1em;
    margin-right: 4px;
    transform: none;
    transition: opacity .18s ease, color .18s ease;
}

.tp-header-bottom .tp-main-menu-content > ul > li:hover > a::before,
.tp-main-menu-content > ul > li:hover > a::before,
.main-menu nav > ul > li:hover > a::before {
    width: 1em;
    margin-right: 4px;
    transform: none;
}

/* Cada entrada, una tecla: fondo suave y elevación al acercarse. */
.main-menu nav > ul > li > a,
.tp-main-menu-content > ul > li > a,
.tp-header-bottom .tp-main-menu-content > ul > li > a {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 7px 12px;
    border-radius: 10px;
    transition: background .16s ease, color .16s ease, transform .12s ease, box-shadow .16s ease;
}

.main-menu nav > ul > li:hover > a,
.tp-main-menu-content > ul > li:hover > a,
.tp-header-bottom .tp-main-menu-content > ul > li:hover > a {
    background: color-mix(in srgb, var(--tp-theme-primary, #0989ff) 8%, #fff);
    transform: translateY(-1px);
    box-shadow: 0 3px 0 color-mix(in srgb, var(--tp-theme-primary, #0989ff) 16%, #fff);
}

/* Y al pulsar, se hunde. Es el gesto de toda la casa. */
.main-menu nav > ul > li > a:active,
.tp-main-menu-content > ul > li > a:active,
.tp-header-bottom .tp-main-menu-content > ul > li > a:active {
    transform: translateY(1px);
    box-shadow: 0 0 0 color-mix(in srgb, var(--tp-theme-primary, #0989ff) 16%, #fff);
}

/* El icono del tema (casa, tienda, páginas) crece un punto al acercarse. */
.main-menu nav > ul > li > a .jd-mi,
.main-menu nav > ul > li > a > svg:first-of-type,
.tp-main-menu-content > ul > li > a .jd-mi {
    transition: transform .18s ease;
}

.main-menu nav > ul > li:hover > a .jd-mi,
.main-menu nav > ul > li:hover > a > svg:first-of-type,
.tp-main-menu-content > ul > li:hover > a .jd-mi {
    transform: scale(1.12);
}

/* La flecha gira cuando el submenú está abierto: dice «esto se desplegó»
   sin necesidad de mirar hacia abajo. */
.main-menu nav > ul > li > a > svg:last-child,
.tp-main-menu-content > ul > li > a > svg:last-child {
    transition: transform .22s ease;
}

.main-menu nav > ul > li:hover > a > svg:last-child,
.tp-main-menu-content > ul > li:hover > a > svg:last-child {
    transform: rotate(180deg);
}

/* La página en la que estás, marcada de forma PERMANENTE: su símbolo
   encendido y su luz debajo, no solo cuando pasas por encima. */
.main-menu nav > ul > li.active > a::before,
.tp-main-menu-content > ul > li.active > a::before,
.main-menu nav > ul > li.current-menu-item > a::before {
    opacity: 1;
}

.main-menu nav > ul > li.active > a::after,
.tp-main-menu-content > ul > li.active > a::after,
.main-menu nav > ul > li.current-menu-item > a::after {
    transform: scaleX(1);
}

.main-menu nav > ul > li.active > a,
.tp-main-menu-content > ul > li.active > a,
.main-menu nav > ul > li.current-menu-item > a {
    color: var(--tp-theme-primary, #0989ff) !important;
}

/* El subrayado LED se ajusta al nuevo relleno de la tecla. */
.tp-main-menu-content > ul > li > a::after,
.tp-header-bottom .tp-main-menu-content ul > li > a::after {
    left: 12px;
    right: 12px;
    bottom: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .main-menu nav > ul > li > a,
    .main-menu nav > ul > li > a .jd-mi,
    .main-menu nav > ul > li > a > svg:last-child {
        transition: none;
    }

    .main-menu nav > ul > li:hover > a {
        transform: none;
    }

    .main-menu nav > ul > li:hover > a > svg:last-child {
        transform: none;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   [JD] SECCIÓN 19 — TARJETA DE PRODUCTO: verificado y descuento
   Dos arreglos con criterio distinto: uno de colocación (la insignia caía
   debajo del nombre) y uno de jerarquía (el −60% tapaba el producto, que es
   lo que de verdad vende).
   ═════════════════════════════════════════════════════════════════════════ */

/* ── El verificado, AL LADO del nombre ───────────────────────────────────
   El contenedor apilaba enlace e insignia en dos líneas. Con flex quedan en
   la misma, alineados por el centro y sin que el nombre largo los separe. */
/* Tres intentos hasta dar con el equilibrio:
     · flex + recorte  → en móvil cortaba el nombre («Juego Digital Sto…»);
     · flujo normal    → en tarjetas estrechas el nombre parte en dos líneas
                         y el check se iba abajo con la última palabra;
     · ESTE            → una sola línea SIEMPRE, letra un punto menor para
                         que quepa, y si aun así no cabe se recorta el
                         NOMBRE, nunca el check, que va fuera del recorte.
   El nombre completo queda en el title, al alcance del ratón. */
.tp-store-name,
.tp-product-category.tp-store-name {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    font-size: 12px;
    line-height: 1.35;
}

.tp-store-name > a {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-store-name .store-verified-badge {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    line-height: 0;
}

.tp-store-name .store-verified-badge svg {
    width: 14px;
    height: 14px;
    display: block;
}

/* En rejillas muy apretadas (5-6 por fila) se encoge otro punto antes de
   recurrir al recorte. */
@media (min-width: 1200px) {
    .tp-store-name,
    .tp-product-category.tp-store-name {
        font-size: 11.5px;
    }
}

.tp-store-name .store-verified-badge svg {
    width: 15px;
    height: 15px;
    display: block;
}

/* ── El descuento: que informe sin tapar el producto ─────────────────────
   Antes era un bloque sólido en mitad de la imagen. Ahora es una pastilla
   de CRISTAL —translúcida y desenfocada, como los paneles de la interfaz de
   consola— pegada a la esquina. Se lee perfectamente y deja ver la portada,
   que es lo que hace clic al cliente. */
.tp-product-badge {
    top: 10px;
    right: 10px;
    left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    z-index: 3;
}

.tp-product-badge span,
.tp-product-badge .product-sale,
.tp-product-badge .product-out-stock {
    position: relative;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .2px;
    line-height: 1.1;
    color: #fff;
    /* Cristal: fondo translúcido + desenfoque de lo que hay detrás. */
    background: rgba(9, 12, 20, .55);
    -webkit-backdrop-filter: blur(8px) saturate(1.3);
            backdrop-filter: blur(8px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .6);
}

/* El borde superior con los colores del mando: el guiño de consola en una
   pieza de 2px, sin robarle protagonismo a la portada. */
.tp-product-badge .product-sale::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #e2314b, #f5a623, #23a559, #7dd3fc);
    opacity: .9;
}

/* Agotado: el único que sí debe pesar, porque cambia la decisión. */
.tp-product-badge .product-out-stock {
    background: rgba(9, 12, 20, .82);
    border-color: rgba(255, 255, 255, .3);
}

/* Al pasar por la tarjeta, la pastilla se aclara un punto: acompaña el
   gesto sin llamar la atención por su cuenta. */
.tp-product-item:hover .tp-product-badge span {
    background: rgba(9, 12, 20, .68);
    border-color: rgba(255, 255, 255, .34);
}

/* Navegadores sin desenfoque (algunos Android antiguos): se compensa con
   más opacidad para que el texto siga leyéndose sobre cualquier portada. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .tp-product-badge span {
        background: rgba(9, 12, 20, .8);
    }
}

@media (max-width: 575px) {
    .tp-product-badge {
        top: 8px;
        right: 8px;
    }

    .tp-product-badge span {
        padding: 4px 9px;
        font-size: 11px;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   [JD] SECCIÓN 20 — BARRA INFERIOR DEL MÓVIL (fases 5, 6 y 7)
   Es el mando a distancia del sitio en el teléfono: cinco botones que se
   usan más que cualquier menú. Estaba correcta pero anónima, con el activo
   como único punto de color.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── FASE 5 · La barra: cristal y filo de luz ────────────────────────────*/
#tp-bottom-menu-sticky.tp-mobile-menu {
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
            backdrop-filter: blur(14px) saturate(1.4);
    border-top: 0;
    box-shadow: 0 -10px 30px -18px rgba(15, 23, 42, .5);
    /* Respeta la franja del gesto de inicio en los iPhone sin botón. */
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Filo de energía en el borde superior: la firma de la casa, aquí como una
   línea finísima que separa la barra del contenido. */
#tp-bottom-menu-sticky.tp-mobile-menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #e2314b, #f5a623, #23a559, var(--tp-theme-primary, #0989ff), #e2314b);
    background-size: 300% 100%;
    opacity: .85;
    animation: jdBotEnergia 9s linear infinite;
}

@keyframes jdBotEnergia {
    to { background-position: -300% 0; }
}

/* ── FASE 6 · Los botones como teclas de mando ───────────────────────────*/
.tp-mobile-item .tp-mobile-item-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    padding: 9px 4px 8px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #64748b;
    transition: color .16s ease, background .16s ease, transform .12s ease;
}

.tp-mobile-item .tp-mobile-item-btn svg,
.tp-mobile-item .tp-mobile-item-btn i {
    transition: transform .18s ease;
}

/* Al pulsar se hunde, como el resto de teclas del sitio. */
.tp-mobile-item .tp-mobile-item-btn:active {
    transform: translateY(2px);
}

.tp-mobile-item .tp-mobile-item-btn:active svg {
    transform: scale(.92);
}

/* El activo: tecla encendida con el color del tema y su luz debajo. */
.tp-mobile-item .tp-mobile-item-btn.jd-active,
.tp-mobile-item .tp-mobile-item-btn.active {
    color: #fff;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--tp-theme-primary, #0989ff) 88%, #fff),
        var(--tp-theme-primary, #0989ff));
    box-shadow:
        0 2px 0 color-mix(in srgb, var(--tp-theme-primary, #0989ff) 55%, #000),
        0 10px 20px -12px var(--tp-theme-primary, #0989ff);
}

/* La luz LED de la consola bajo el botón activo. */
.tp-mobile-item .tp-mobile-item-btn.jd-active::after,
.tp-mobile-item .tp-mobile-item-btn.active::after {
    content: "";
    position: absolute;
    left: 26%;
    right: 26%;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: #bae6fd;
    box-shadow: 0 0 8px 1px rgba(186, 230, 253, .9);
    opacity: .9;
    animation: jdBotLed 3.2s ease-in-out infinite;
}

@keyframes jdBotLed {
    0%, 100% { opacity: .45; }
    50% { opacity: 1; }
}

.tp-mobile-item .tp-mobile-item-btn span {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: -.1px;
}

/* ── FASE 7 · Detalle: el que no está activo también responde ────────────*/
@media (hover: hover) {
    .tp-mobile-item .tp-mobile-item-btn:not(.jd-active):not(.active):hover {
        color: var(--tp-theme-primary, #0989ff);
        background: color-mix(in srgb, var(--tp-theme-primary, #0989ff) 8%, #fff);
    }
}

@media (prefers-reduced-motion: reduce) {
    #tp-bottom-menu-sticky.tp-mobile-menu::before,
    .tp-mobile-item .tp-mobile-item-btn.jd-active::after,
    .tp-mobile-item .tp-mobile-item-btn.active::after {
        animation: none;
    }

    .tp-mobile-item .tp-mobile-item-btn,
    .tp-mobile-item .tp-mobile-item-btn svg {
        transition: none;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   [JD] SECCIÓN 21 — MONEDA E IDIOMA DEL MENÚ MÓVIL
   Las dos tarjetas del pie eran blancas planas mientras el resto del panel
   ya usa el lenguaje de la casa (teclas, color del tema, relieve). Se
   armonizan: mismo redondeo, mismo canto inferior y misma reacción al tocar
   que las filas de categorías y las pestañas de arriba.
   ═════════════════════════════════════════════════════════════════════════ */

.jd-currency-cards .offcanvas__currency-selected-currency,
.jd-lang-cards .offcanvas__lang-selected-lang {
    border: 1px solid #e3e9f0 !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, #fff, #f8fafc) !important;
    color: #1f2937 !important;
    font-weight: 700 !important;
    /* Canto inferior: la firma de tecla del resto del panel. */
    box-shadow: 0 3px 0 #e6ebf2 !important;
    transition: transform .12s ease, box-shadow .12s ease,
                border-color .16s ease, background .16s ease;
}

.jd-currency-cards .offcanvas__currency-selected-currency:active,
.jd-lang-cards .offcanvas__lang-selected-lang:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 #e6ebf2 !important;
}

/* Abierta: se enciende con el color del tema, igual que la pestaña activa. */
.jd-currency-cards.active .offcanvas__currency-selected-currency,
.jd-lang-cards.active .offcanvas__lang-selected-lang,
.jd-currency-cards .offcanvas__currency-selected-currency[aria-expanded="true"],
.jd-lang-cards .offcanvas__lang-selected-lang[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--tp-theme-primary, #0989ff) 35%, #fff) !important;
    background: color-mix(in srgb, var(--tp-theme-primary, #0989ff) 8%, #fff) !important;
    color: var(--tp-theme-primary, #0989ff) !important;
    box-shadow: 0 3px 0 color-mix(in srgb, var(--tp-theme-primary, #0989ff) 22%, #fff) !important;
}

/* La banderita, con el mismo redondeo que el resto de piezas del panel. */
.jd-currency-cards .jd-currency-flag svg,
.jd-currency-cards .jd-currency-flag img,
.jd-lang-cards .jd-lang-flag svg,
.jd-lang-cards .jd-lang-flag img {
    border-radius: 3px !important;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .08);
}

/* Las listas que se despliegan, con el aire del panel: tarjeta redondeada,
   sombra suave y la opción marcada en el color del tema. */
.jd-currency-cards .offcanvas__currency-list,
.jd-lang-cards .offcanvas__lang-list {
    border-radius: 12px !important;
    border: 1px solid #e6ebf2 !important;
    box-shadow: 0 16px 34px -20px rgba(15, 23, 42, .5) !important;
    overflow: hidden;
}

.jd-currency-cards .offcanvas__currency-list li a:hover,
.jd-lang-cards .offcanvas__lang-list li a:hover {
    background: color-mix(in srgb, var(--tp-theme-primary, #0989ff) 8%, #fff);
    color: var(--tp-theme-primary, #0989ff);
}

/* ═════════════════════════════════════════════════════════════════════════
   [JD] SECCIÓN 22 — TARJETAS DE PRODUCTO MÁS ANCHAS
   El listado venía a 6 por fila en pantallas grandes. Con ese ancho la
   portada se ve pequeña, el nombre del producto se corta y hasta el nombre
   de la tienda no cabía en una línea. Menos productos por fila y cada uno
   respira: la portada es lo que vende, y aquí gana tamaño.
   ═════════════════════════════════════════════════════════════════════════ */

/* El ancho de las tarjetas NO se toca desde aquí: lo manda la opción
   «Number of products per row» del tema (Apariencia → Opciones del
   tema → Ecommerce). Forzarlo por CSS pelearía con ese ajuste y con
   las rejillas que el tema arma por AJAX. */

/* Con más ancho disponible, el texto vuelve a su tamaño cómodo: ya no hace
   falta encogerlo para que quepa. */
.tp-store-name,
.tp-product-category.tp-store-name {
    font-size: 12.5px;
}

@media (min-width: 1200px) {
    .tp-store-name,
    .tp-product-category.tp-store-name {
        font-size: 12.5px;
    }
}

/* La portada aprovecha el ancho nuevo sin deformarse. */
.tp-product-item .tp-product-thumb img {
    width: 100%;
    height: auto;
}

/* Y el nombre del producto puede permitirse dos líneas holgadas. */
.tp-product-item .tp-product-title {
    font-size: 15px;
    line-height: 1.35;
}

/* ═════════════════════════════════════════════════════════════════════════
   [JD] SECCIÓN 23 — LA TIENDA OFICIAL, DISTINTA DE LOS REVENDEDORES
   Con el panel de revendedores abierto, varias tiendas tendrán su check de
   verificado. El check dice «esta tienda es real»; esto dice «esta es LA
   tienda». Son dos mensajes distintos y deben verse distintos.
   ═════════════════════════════════════════════════════════════════════════ */

[data-jd-oficial="1"] {
    position: relative;
    font-weight: 800;
    /* Texto con degradado en movimiento: el recurso más caro de imitar y el
       que de un vistazo dice «esta no es una tienda cualquiera». */
    background: linear-gradient(100deg,
        var(--tp-theme-primary, #0989ff) 0%,
        #7dd3fc 25%,
        var(--tp-theme-primary, #0989ff) 50%,
        #a78bfa 75%,
        var(--tp-theme-primary, #0989ff) 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: jdOficialBrillo 6s linear infinite;
}

@keyframes jdOficialBrillo {
    to { background-position: -300% 0; }
}

/* El check de la oficial: más grande, con halo y un latido lento. Los de
   revendedor se quedan planos, que es justo la diferencia buscada. */
.jd-store-oficial .store-verified-badge svg {
    width: 16px !important;
    height: 16px !important;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--tp-theme-primary, #0989ff) 70%, transparent));
    animation: jdOficialLatido 3.2s ease-in-out infinite;
}

@keyframes jdOficialLatido {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

/* ── La cabecera de tienda del RESUMEN DEL PEDIDO ────────────────────────
   Nombre y check en la misma línea, sin que el check herede el degradado
   (va fuera del span marcado, pero por si acaso se le fija el relleno). */
.jd-store-head {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    vertical-align: middle;
}

.jd-store-head-check,
.jd-store-head .store-verified-badge {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    line-height: 0;
    -webkit-text-fill-color: initial;
}

/* ── El nombre de la tienda en la FICHA de producto ──────────────────────
   Ahí el tema reutiliza la píldora de existencias: fondo azul claro y
   relleno. Detrás del nombre en degradado eso se leía como una franja
   pegada, y peor: al ser inline-block, en móvil el check saltaba a la
   línea siguiente. Aquí se le quita el fondo y se arma en fila que NO
   parte, con el mismo criterio de siempre — si algo se recorta es el
   nombre, nunca el check. */
.jd-store-row {
    margin-right: 12px;
}

.jd-store-row > span {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 0;
    background-color: transparent;
    line-height: 1.35;
}

.jd-store-row > span > a {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jd-store-row .store-verified-badge {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    line-height: 0;
    margin-inline-start: 0;
}

.jd-store-row .store-verified-badge svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* SIN sello «OFICIAL»: se quitó a propósito. La distinción la lleva el
   nombre en degradado y el check; una etiqueta extra colgando del texto
   rompía el renglón allí donde el hueco es justo (resumen del pedido,
   listados) y repetía un mensaje que el degradado ya da.
   Se deja este ::after neutralizado por si alguna regla heredada lo
   reactivara. */
[data-jd-oficial="1"]::after {
    content: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-jd-oficial="1"],
    .jd-store-oficial .store-verified-badge svg {
        animation: none;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   [JD] SECCIÓN 24 — SVG SIN DIMENSIONES (los iconos gigantes del checkout)
   Un <svg> con viewBox pero SIN width/height se estira hasta llenar a su
   padre. Si el CSS que lo controlaba no llega —o llega tarde— el icono
   ocupa la pantalla entera. Pasó en el checkout con el aviso de producto
   digital y con el de «sin devoluciones».
   Esto es una RED DE SEGURIDAD: acota cualquier icono suelto aunque su
   estilo específico falle.
   ═════════════════════════════════════════════════════════════════════════ */

.digital-product-notice svg:not([width]),
.jdDx svg:not([width]),
.jd-noref svg:not([width]) {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

/* Tope general para iconos en línea del contenido: ninguno debería pasar de
   64px, y si lo hace es que perdió sus dimensiones por el camino. */
.tp-checkout-place svg:not([width]):not([class*="icon"]),
.checkout-area svg:not([width]):not([class*="icon"]) {
    max-width: 64px;
    max-height: 64px;
}

/* ── El verificado de la tienda oficial vuelve a ser el de siempre ───────
   Pedido del dueño: el efecto va SOLO en el nombre. El check queda igual
   que el de cualquier tienda verificada — que además es lo correcto: ese
   icono significa «verificada», no «oficial», y no debe variar. */
.jd-store-oficial .store-verified-badge svg {
    width: 14px !important;
    height: 14px !important;
    filter: none !important;
    animation: none !important;
    transform: none !important;
}

/* ═════════════════════════════════════════════════════════════════════════
   [JD] SECCIÓN 25 — PÁGINAS LEGALES Y PQR

   Dos cosas distintas viven aquí:

   1) El ARREGLO de las páginas legales. Al pegar los documentos en el
      editor, este les incrustó estilos propios —incluido Times New Roman—
      dentro de cada párrafo. El resultado: las páginas más serias del sitio
      escritas con la tipografía de un procesador de textos de 1995. Se
      neutralizan sin tocar el contenido.

   2) El DISEÑO de la página de PQR, que se arma con clases desde el
      contenido de la página. Va en la hoja del tema y no en un <style>
      dentro del contenido porque el editor filtra las etiquetas de estilo,
      pero respeta las clases.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Las páginas legales, con la tipografía de la casa ─────────────────── */
.ck-content [style*="Times New Roman"],
.ck-content [style*="times new roman"] {
    font-family: inherit !important;
    color: inherit !important;
    font-size: inherit !important;
    word-spacing: normal !important;
}

.ck-content h2 { font-size: 26px; font-weight: 800; letter-spacing: -.3px; margin: 0 0 14px; }
.ck-content h3 { font-size: 19px; font-weight: 800; margin: 30px 0 10px; color: #0f172a; }
.ck-content h4 { font-size: 15.5px; font-weight: 800; margin: 20px 0 8px; color: #0f172a; }
.ck-content p, .ck-content li { font-size: 14.5px; line-height: 1.7; color: #47576b; }
.ck-content strong { color: #0f172a; }
.ck-content a { color: var(--primary-color, #0989ff); font-weight: 600; text-underline-offset: 3px; }

/* Las tablas de las páginas legales: legibles y que no se salgan en móvil. */
.ck-content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 16px 0;
    font-size: 13.5px;
    border: 1px solid #eef1f5;
    border-radius: 14px;
    overflow: hidden;
}

.ck-content table th {
    background: #f7f9fc;
    font-weight: 800;
    color: #0f172a;
    text-align: start;
}

.ck-content table th,
.ck-content table td {
    padding: 11px 13px;
    border-bottom: 1px solid #eef1f5;
    vertical-align: top;
}

.ck-content table tr:last-child td { border-bottom: 0; }

@media (max-width: 767px) {
    .ck-content table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ═════════ La página de PQR ═════════ */

/* El contenido de una página del gestor se pinta SIN contenedor, así que la
   maqueta llegaba pegada a los bordes. Se le da el mismo ancho que usa el
   formulario de abajo (1170) para que las dos piezas queden alineadas al
   píxel y se lean como una sola página. */
.jdPqr {
    --jdp: var(--primary-color, #0989ff);
    max-width: 1170px;
    margin: 0 auto;
    padding: 6px 15px 0;
}

/* ── Portada ─────────────────────────────────────────────────────────── */
.jdPqr-hero {
    position: relative;
    overflow: hidden;
    padding: 30px;
    margin-bottom: 26px;
    border-radius: 18px;
    border: 1px solid #eef1f5;
    background:
        radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--jdp) 10%, transparent) 0%, transparent 55%),
        linear-gradient(180deg, #fbfcff, #fff 70%);
}

.jdPqr-hero::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #e2314b, #f5a623, #23a559, var(--jdp), #e2314b);
    background-size: 300% 100%;
    animation: jdPqrEnergia 8s linear infinite;
}

@keyframes jdPqrEnergia { to { background-position: -300% 0; } }

.jdPqr-kicker {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--jdp) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--jdp) 22%, #fff);
    box-shadow: 0 3px 0 color-mix(in srgb, var(--jdp) 20%, #fff);
    color: var(--jdp);
    font-size: 11.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
}

.jdPqr h1.jdPqr-titulo {
    margin: 12px 0 8px;
    font-size: 32px; font-weight: 800; color: #0f172a; letter-spacing: -.6px;
}

.jdPqr-intro { color: #5b6b7f; font-size: 14.5px; line-height: 1.65; margin: 0; max-width: 640px; }

/* ── Los tres compromisos, en tarjetas ───────────────────────────────── */
.jdPqr-chips { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 20px; }

.jdPqr-chip {
    padding: 14px 16px;
    border-radius: 13px;
    background: #fff;
    border: 1px solid #eef1f5;
    box-shadow: 0 8px 20px -16px rgba(15,23,42,.6);
}

.jdPqr-chip strong { display: block; font-size: 20px; font-weight: 800; color: var(--jdp); line-height: 1.15; }
.jdPqr-chip span { font-size: 12px; color: #94a3b8; font-weight: 600; }

/* ── Rejillas de tarjetas ────────────────────────────────────────────── */
.jdPqr h2.jdPqr-h2 {
    font-size: 21px; font-weight: 800; color: #0f172a; margin: 34px 0 14px; letter-spacing: -.3px;
}

.jdPqr-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.jdPqr-card {
    padding: 18px;
    border-radius: 14px;
    border: 1px solid #eef1f5;
    background: linear-gradient(180deg, #fbfcff, #fff 70%);
    transition: border-color .18s ease, transform .18s ease;
}

.jdPqr-card:hover { border-color: color-mix(in srgb, var(--jdp) 28%, #fff); transform: translateY(-2px); }

.jdPqr-card strong { display: block; font-size: 14.5px; font-weight: 800; color: #0f172a; margin-bottom: 4px; }
.jdPqr-card p { margin: 0; font-size: 12.5px; color: #64748b; line-height: 1.55; }

/* El icono va dibujado desde aquí: el editor del panel borra los SVG que se
   peguen dentro del contenido, pero respeta las clases. */
.jdPqr-ico {
    display: inline-flex;
    width: 38px; height: 38px;
    margin-bottom: 10px;
    border-radius: 11px;
    background-color: color-mix(in srgb, var(--jdp) 9%, #fff);
    border: 1px solid color-mix(in srgb, var(--jdp) 18%, #fff);
    box-shadow: 0 3px 0 color-mix(in srgb, var(--jdp) 14%, #fff);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}

.jdPqr-ico--peticion  { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230989ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M9.1 9a3 3 0 0 1 5.8 1c0 2-3 2.5-3 4'/><path d='M12 17.5v.01'/></svg>"); }
.jdPqr-ico--queja     { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230989ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H8l-4 4V6a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2z'/><path d='M12 8v4'/><path d='M12 15v.01'/></svg>"); }
.jdPqr-ico--reclamo   { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230989ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l9 16H3z'/><path d='M12 9v4'/><path d='M12 16v.01'/></svg>"); }
.jdPqr-ico--idea      { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230989ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18h6'/><path d='M10 21h4'/><path d='M12 3a6 6 0 0 0-3.5 10.9c.5.4.8 1 .8 1.6h5.4c0-.6.3-1.2.8-1.6A6 6 0 0 0 12 3z'/></svg>"); }
.jdPqr-ico--datos     { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230989ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='10' width='16' height='11' rx='2'/><path d='M8 10V7a4 4 0 0 1 8 0v3'/></svg>"); }
.jdPqr-ico--correo    { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230989ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='m3 7 9 6 9-6'/></svg>"); }
.jdPqr-ico--whatsapp  { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230989ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.4 8.4 0 0 1-12.6 7.3L3 21l2.3-5.2A8.4 8.4 0 1 1 21 11.5z'/><path d='M8.5 9.5c0 3 2 5 5 5'/></svg>"); }
.jdPqr-ico--form      { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230989ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3v4a1 1 0 0 0 1 1h4'/><path d='M19 8v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7z'/><path d='M9 13h6'/><path d='M9 17h4'/></svg>"); }

/* ── Pasos numerados ─────────────────────────────────────────────────── */
.jdPqr-pasos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: jdpqr; }

.jdPqr-paso {
    position: relative;
    padding: 18px;
    border-radius: 14px;
    border: 1px solid #eef1f5;
    background: linear-gradient(180deg, #fbfcff, #fff 70%);
}

.jdPqr-paso::before {
    counter-increment: jdpqr;
    content: counter(jdpqr);
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; margin-bottom: 9px;
    border-radius: 9px;
    background: var(--jdp);
    color: #fff; font-weight: 800; font-size: 14px;
    box-shadow: 0 2px 0 color-mix(in srgb, var(--jdp) 55%, #000);
}

.jdPqr-paso strong { display: block; font-size: 14.5px; font-weight: 800; color: #0f172a; margin-bottom: 3px; }
.jdPqr-paso p { margin: 0; font-size: 12.5px; color: #64748b; line-height: 1.55; }

/* ── Plazos ──────────────────────────────────────────────────────────── */
.jdPqr-plazos { display: grid; gap: 10px; }

.jdPqr-plazo {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 15px 18px;
    border-radius: 14px;
    border: 1px solid #eef1f5;
    background: #fff;
}

.jdPqr-plazo-txt { flex: 1 1 240px; min-width: 0; }
.jdPqr-plazo-txt strong { display: block; font-size: 14px; font-weight: 800; color: #0f172a; }
.jdPqr-plazo-txt span { font-size: 12px; color: #94a3b8; font-weight: 600; }

.jdPqr-plazo-val {
    flex: 0 0 auto;
    padding: 8px 14px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--jdp) 9%, #fff);
    border: 1px solid color-mix(in srgb, var(--jdp) 20%, #fff);
    color: var(--jdp);
    font-size: 13.5px; font-weight: 800; white-space: nowrap;
}

.jdPqr-plazo--rapido .jdPqr-plazo-val {
    background: color-mix(in srgb, #23a559 10%, #fff);
    border-color: color-mix(in srgb, #23a559 24%, #fff);
    color: #1a7f45;
}

/* ── Aviso y cierre ──────────────────────────────────────────────────── */
.jdPqr-nota {
    margin-top: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px dashed color-mix(in srgb, var(--jdp) 30%, #fff);
    background: color-mix(in srgb, var(--jdp) 5%, #fff);
    font-size: 13.5px; line-height: 1.6; color: #47576b;
}

.jdPqr-nota strong { color: #0f172a; }

.jdPqr-sic {
    margin-top: 14px;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid #eef1f5;
    background: linear-gradient(180deg, #fbfcff, #fff 70%);
}

.jdPqr-sic strong { display: block; font-size: 16px; font-weight: 800; color: #0f172a; margin-bottom: 4px; }
.jdPqr-sic p { margin: 0 0 6px; font-size: 13.5px; color: #64748b; line-height: 1.6; }

.jdPqr-sep {
    height: 1px;
    margin: 34px 0 6px;
    background: linear-gradient(90deg, transparent, #e3e9f0, transparent);
}

/* ── El formulario, integrado en la página ────────────────────────────
   El formulario de contacto es una sección aparte que vive DEBAJO del
   contenido, con su propio espaciado. Suelto, se leía como otra página
   pegada al final. Aquí se le da el mismo lenguaje que a las tarjetas de
   arriba y se pega al bloque anterior, para que radicar sea el paso
   siguiente y no un destino distinto.

   Se acota con `body:has(.jdPqr)` para que esto SOLO afecte a la página de
   PQR: el formulario de contacto de cualquier otra página queda intacto. */
body:has(.jdPqr) .tp-contact-area {
    padding-top: 0 !important;
    padding-bottom: 64px !important;
}

body:has(.jdPqr) .tp-contact-area .container {
    max-width: 1170px;
}

body:has(.jdPqr) .tp-contact-inner {
    position: relative;
    overflow: hidden;
    padding: 26px;
    border-radius: 18px;
    border: 1px solid #eef1f5;
    background: linear-gradient(180deg, #fbfcff, #fff 70%);
}

body:has(.jdPqr) .tp-contact-inner::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #e2314b, #f5a623, #23a559, var(--primary-color, #0989ff), #e2314b);
    background-size: 300% 100%;
    animation: jdPqrEnergia 8s linear infinite;
}

body:has(.jdPqr) .tp-contact-title {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -.2px;
    margin-bottom: 18px;
}

/* Los campos: mismo canto y mismo redondeo que el resto de la casa. */
body:has(.jdPqr) .tp-contact-form input:not([type="checkbox"]):not([type="radio"]),
body:has(.jdPqr) .tp-contact-form textarea,
body:has(.jdPqr) .tp-contact-form select {
    border-radius: 12px !important;
    border: 1px solid #e3e9f0 !important;
    background: #fff !important;
    box-shadow: 0 2px 0 #f1f4f8;
    transition: border-color .16s ease, box-shadow .16s ease;
}

body:has(.jdPqr) .tp-contact-form input:focus,
body:has(.jdPqr) .tp-contact-form textarea:focus,
body:has(.jdPqr) .tp-contact-form select:focus {
    border-color: color-mix(in srgb, var(--primary-color, #0989ff) 45%, #fff) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color, #0989ff) 12%, transparent) !important;
    outline: 0;
}

/* El botón de enviar, como tecla. */
body:has(.jdPqr) .tp-contact-form button[type="submit"],
body:has(.jdPqr) .tp-contact-form .tp-contact-btn button {
    border-radius: 12px !important;
    font-weight: 800 !important;
    box-shadow:
        0 3px 0 color-mix(in srgb, var(--primary-color, #0989ff) 55%, #000),
        0 14px 26px -16px var(--primary-color, #0989ff);
    transition: transform .12s ease, box-shadow .12s ease, filter .15s ease;
}

body:has(.jdPqr) .tp-contact-form button[type="submit"]:active,
body:has(.jdPqr) .tp-contact-form .tp-contact-btn button:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 color-mix(in srgb, var(--primary-color, #0989ff) 55%, #000);
}

/* La columna de datos, en tarjetas como las de arriba. */
body:has(.jdPqr) .tp-contact-info-item {
    padding: 15px;
    border-radius: 14px;
    border: 1px solid #eef1f5;
    background: #fff;
    margin-bottom: 10px;
}

body:has(.jdPqr) .tp-contact-info-icon img {
    max-width: 34px !important;
    max-height: 34px !important;
}

/* El aviso de «protegido por Honeypot y Cloudflare» venía en gris clarísimo
   sobre gris claro: prácticamente ilegible. Es un mensaje de confianza —de los
   pocos que conviene que SÍ se lean— y además así no cumple el contraste
   mínimo de accesibilidad. Se le sube el contraste y se le da el aire de una
   nota, no de un error del maquetador. */
.honeypot-disclaimer,
.captcha-disclaimer {
    color: #5b6b7f !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    background-color: #f4f6f9 !important;
    border: 1px solid #e6ebf2;
    border-radius: 10px !important;
    padding: 11px 14px !important;
}

.honeypot-disclaimer svg,
.captcha-disclaimer svg {
    opacity: .75;
    vertical-align: -2px;
}

/* Aviso de que el formulario es el mismo canal, justo encima de él. */
.jdPqr-formIntro {
    margin: 6px 0 0;
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.6;
}

.jdPqr-formIntro strong { color: #0f172a; }

@media (max-width: 575px) {
    .jdPqr-hero { padding: 22px 18px; }
    .jdPqr h1.jdPqr-titulo { font-size: 25px; }
    .jdPqr-plazo-val { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .jdPqr-hero::before { animation: none; }
    .jdPqr-card:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   13. BARRA DE COMPRA FIJA EN MÓVIL — arreglada 29/07/2026
   ═══════════════════════════════════════════════════════════════
   Medido en la página real (375px), no deducido:

   · La fila de la barra es flex y mide 351px. Los dos botones
     ("Añadir a la Cesta" + "Comprar Ahora") ocupaban los 351
     enteros, así que a la ficha del producto le tocaban CERO —
     pero sus hijos (miniatura, título y los dos precios) seguían
     pintándose igual, encima de los botones. De ahí el amasijo
     de texto sobre texto.
     En 375px no caben las dos cosas: la ficha sobra. El cliente
     está mirando el producto, ya sabe cuál es.

   · El botón flotante de WhatsApp vive en bottom:85px con 61px
     de alto (85→146 desde abajo) y la barra ocupa 78→161: el
     botón caía DENTRO de la barra y tapaba "Comprar Ahora", que
     es justo el que da dinero.
     Se sube por encima de la barra. El :has() lo limita a las
     páginas con barra de compra; donde no la hay, el botón se
     queda donde estaba. Si el navegador no soporta :has(), no
     aplica nada y queda como antes: se degrada sin romperse. */

@media (max-width: 991.98px) {
    .tp-product-details-sticky-actions .sticky-actions-info {
        display: none !important;
    }

    .tp-product-details-sticky-actions .sticky-actions-button {
        width: 100%;
    }

    body:has(.tp-product-details-sticky-actions) .jd-wa {
        bottom: 172px !important;
    }
}

/* ==========================================================================
   [JD] AJUSTES RECUPERADOS TRAS LA ACTUALIZACION A BOTBLE 1.4.10 (31/07/2026)
   --------------------------------------------------------------------------
   Estos dos ajustes estaban editados a mano DENTRO de theme.css, y la
   actualizacion los borro al reemplazar ese archivo con la version nueva.
   Se reponen aqui, en jd-polish.css, que es archivo propio y carga DESPUES
   de theme.css: asi ganan por orden de cascada y ninguna actualizacion
   futura vuelve a llevarselos.
   REGLA: cualquier retoque al tema va SIEMPRE en este archivo, nunca
   editando theme.css.
   ========================================================================== */

/* Imagenes de las categorias en la portada: el update las dejo al 80% y la
   imagen ya no llenaba el circulo. Vuelven a ocupar el espacio completo. */
.tp-product-category-thumb a img {
    max-width: 100%;
    max-height: 100%;
}

/* Logos de medios de pago del pie: el update les puso un tope de 70px de alto
   y se veian diminutos. Se recupera el encuadre original. */
.tp-footer-payment img {
    max-width: 80%;
    max-height: 100%;
}