/*

NOMBRE TIENDA: VIASEK  (marca de Laboratorios Eurolab)
URL: https://tienda.viasek.com.ar

Fecha creacion:        25/08/2026
Última actualizacion:  09/09/2026   —  v6 rev.3, checkout, badges de pasarela y alertas

MANUAL DE REFERENCIA CSS NUBIXSTORE
https://cdn.nubixstore.ar/ns_css_manual.txt

PLANTILLA ASIGNADA: CARTZILLA
https://cartzilla.createx.studio/

Plataforma verificada: nubixstore v13.09.1
Se publica en la raíz del dominio y se enlaza como CUARTA hoja de estilos:
  /custom_viasek_cartzilla.css?v=13.09.1


------------------------------------------------------------------
DATOS MANUAL DE MARCA — "Guía rápida de Diseño E-Commerce"
------------------------------------------------------------------

Primario;   #eeb2ca  ( Rosa Viasek  — Pantone 203 C )
Secundario: #6e7c7c  ( Gris Viasek  — Pantone 444 C )

En uso desde la implementación, además de los del manual:
  Rosa detalle  #d48da1
  Rosa texto    #a85a72   ← NUEVO en la v5 (ver abajo)
  Oscuro        #2d353c
  Negro         #101820
  Fondo         #ebebeb
  Verde (UI)    #04a752


==================================================================
v5 — EL ROSA INSTITUCIONAL LLEGA A LOS ESTADOS (09/09/2026)
==================================================================

  "la marca nos está pidiendo que en muchos recursos de la página pasemos a
   su rosa institucional, para cumplir bien con la estética de la marca"

Cinco pedidos. TRES de ellos chocaban con la misma pared: pedían ROSA donde
el rosa, medido, no se lee.

  #d48da1 como texto sobre blanco ..............  2,58:1  ❌
  blanco sobre un velo #eeb2ca .................  1,90:1  ❌

⭐ LA NOVEDAD DE ESTA VERSIÓN: UN CUARTO ROSA, #a85a72

   Mismo tono que el rosa oscuro —H 341° contra 343°, la diferencia no se
   percibe— pero más profundo. Y sirve en los DOS sentidos:

     #a85a72 como texto sobre blanco ............  4,81:1  ✅
     blanco  sobre #a85a72 ......................  4,81:1  ✅

   Eso es lo que lo hace valioso: con un solo color se resuelven a la vez el
   menú, el link de marca, el descuento en efectivo y el texto blanco de las
   portadas de categoría. Ningún otro rosa de la marca puede hacer las dos.

   ⚠️ NO ES UNA SUPERFICIE. Las superficies siguen siendo #eeb2ca (1º) y
      #d48da1 (3º). #a85a72 es TINTA y VELO. Está anotado en la variable.

   Nota de contexto: en agosto la marca había pedido no sumar hexas nuevos, y
   se eliminaron #a85a72 y #7f3a52 de la v2. Se vuelve a incorporar #a85a72
   con una decisión explícita del 09/09 y con un rol distinto: entonces se
   proponía como FONDO para poder poner letra blanca; ahora entra como TEXTO,
   que es el hueco real que la paleta tenía.

LOS CINCO PEDIDOS

 1. SUCCESS E INFO EN ROSA — alertas, badges y la barra de progreso de envío
    gratis del carrito. Ver § ESTADOS DEL SISTEMA.
 2. EL MENÚ YA NO SE PONE ROJO al navegar un submenú. Era un selector de
    Cartzilla que la v4 no cubría: `.nav-item:hover .nav-link` engancha el
    hover del <li>, no el del <a>. Ver § INTERACCIÓN.
 3. PORTADAS DE CATEGORÍA CON TEXTO BLANCO — vuelve el blanco que la v4 había
    tenido que sacar. Ahora se puede porque el velo va en #a85a72.
 4. DESCUENTO EN EFECTIVO Y LINK DE MARCA, de rojo a rosa.
 5. EL "GRATIS" DE LA CALCULADORA DE ENVÍO, de verde a rosa.

⭐ DE PASO, EL HALLAZGO MÁS GRANDE DE ESTA RONDA
   Cartzilla trae `a { color:#fe696a }` — un rojo salmón — y hasta la v4 eso
   NUNCA se había pisado. Era el color real de TODOS los links que ninguna
   regla reclamaba, incluido el link de marca del pedido 4. O sea que el
   pedido 2 y el pedido 4 eran el mismo rojo apareciendo en dos lugares.
   La v5 pone el color base de link en rosa texto, con la especificidad más
   baja posible para no pisar nada que ya tenga color propio.

⚠️ LO QUE SE PIERDE
   · El descuento en efectivo ya no se distingue por urgencia: --ns-cupon-hot
     era el naranja "efusivo" del nivel 2 y ahora es casi igual al acento.
   · El verde de "cupón aplicado" (--ns-cupon-applied) NO se tocó: es un
     estado de éxito real. Si también tiene que salir, es una línea.


==================================================================
v6 — CHECKOUT EN ROSA Y AJUSTES DE LA MARCA (09/09/2026)
==================================================================

Cinco cambios pedidos por la tienda. La v6 CONTIENE TODO LO DE LA v5 —que no
llegó a publicarse—, así que se sube ésta y la v5 se descarta.

 1. PORTADAS DE CATEGORÍA — SIN FONDO, letra blanca.
      "está bien las letras en blanco, pero no quiero fondo alguno"
    ⚠️⚠️ TIENE UNA CONSECUENCIA GRAVE. Ver la nota larga en la propia regla:
         las seis portadas son ROSA CLARO LISO (se descargaron y se miraron),
         así que letra blanca sin velo da ≈1,8:1 contra un mínimo de 4,5.
         Se compensó con un contorno por sombra —que no es un fondo— pero
         NO cumple la norma. La alternativa que sí cumple es una sola línea
         y está escrita ahí mismo: la misma pieza sin fondo pero con letra
         oscura da 7,03:1.

 2. CHECKOUT EN ROSA — métodos de pago, barra de pasos 1 a 4, botón de pago y
    barra de confianza. El verde lo ponía el NIVEL 2, no el theme, y en el
    paso 3 con ID + !important: por eso ese paso resistía y los otros no.
    Ver § EL CHECKOUT PASA A ROSA.

 3. BANNER DE PIE DE PÁGINA — cambia el texto de "Atención al cliente".
    NO es CSS: se resolvió en la pieza,
    entregables/viasek/banners-footer/20260909-servicios-consulta-v3/

 4. SE OCULTA .ns-item-share-wa en toda ficha de producto.

 5. "ENVÍO RÁPIDO MAÑANA" (.ns-badge-pickup-store) — de verde a rosa.

DE PASO: la lupita del buscador dejaba de ser roja al abrirse. Era el último
rojo suelto del theme. Está en un bloque aparte, marcado como no pedido.


==================================================================
v4 — LOS CUATRO COLORES, CON ROL FIJO (02/09/2026)
==================================================================

La tienda mandó por mail los cuatro hexas que quiere ver en todo el sitio y el
ORDEN en que quiere verlos:

  "Queremos que los colores que más se utilicen sean el rosa claro y el gris
   claro como PRINCIPALES; el rosa oscuro en TERCER lugar y dejar el gris
   oscuro SOLO para pequeños detalles como los títulos de los productos."

⚠️ ESO NO SE PUEDE APLICAR LITERALMENTE, Y ACÁ ESTÁ POR QUÉ
   Medido con la fórmula WCAG 2.1 (mínimo 4,5:1 para texto normal):

     #6e7c7c gris claro sobre #eeb2ca rosa claro ....  2,45:1  ❌
     #6e7c7c gris claro sobre #d48da1 rosa oscuro ...  1,68:1  ❌
     #eeb2ca rosa claro sobre blanco ................  1,77:1  ❌
     #d48da1 rosa oscuro sobre blanco ...............  2,58:1  ❌
     #6e7c7c gris claro sobre blanco ................  4,34:1  ⚠️ corto

   Sobre el rosa claro —justo el color que tiene que dominar— la ÚNICA tinta
   legible es oscura. El gris claro encima da 2,45:1, casi la mitad del mínimo,
   y no lo arregla ni la negrita, ni el tamaño, ni una sombra.

⭐ CÓMO SE RESOLVIÓ — LA REGLA DE ESTA VERSIÓN

     EL GRIS OSCURO DEJA DE SER COLOR DE SUPERFICIE
     Y PASA A SER SÓLO TINTA.

   Se eliminaron TODOS los fondos grandes en #2d353c que tenía la v3:

     · los 3 banners horizontales       → pasan a rosa y gris claro
     · el velo de categorías destacadas → pasa a velo ROSA (lo pidieron)
     · la cucarda "extra off"           → pasa a rosa con borde rosa oscuro
     · el hover de .btn-primary         → pasa a rosa oscuro
     · el hover del CTA del menú        → pasa a rosa claro
     · el CTA del banner de video       → pasa a rosa oscuro

   El #2d353c sobrevive SÓLO donde hay que leer: títulos de producto y texto
   sobre rosa. Que es exactamente lo que pidió la tienda —"sólo para los
   títulos de los productos y otros pequeños detalles"— y además es lo único
   que se lee.

LOS CUATRO COLORES Y SU ROL  (tabla completa en brand-manual.md §3.3)

  #eeb2ca  rosa claro   1º  SUPERFICIE PRINCIPAL. Topbar, footer, banners,
                            cucardas, botones, medallones. Nunca texto.
  #6e7c7c  gris claro   2º  SEGUNDA SUPERFICIE + texto secundario.
                            Como TEXTO va la variante #687575 (4,78:1).
                            Como FONDO lleva letra blanca (4,78:1).
  #d48da1  rosa oscuro  3º  ACENTO. Bordes, subrayados, íconos, franja del
                            footer. Nunca texto sobre claro.
  #2d353c  gris oscuro  --  TINTA. Títulos de producto y texto sobre rosa.
                            Ya NO es color de fondo.

LAS COMBINACIONES QUE SE USAN, MEDIDAS

  #2d353c sobre #eeb2ca ......  7,03:1  ✅  LA combinación de marca
  #101820 sobre #eeb2ca ...... 10,10:1  ✅  títulos sobre rosa
  #101820 sobre #d48da1 ......  6,92:1  ✅  tinta sobre la franja del footer
  #2d353c sobre #d48da1 ......  4,82:1  ✅
  blanco  sobre #687575 ......  4,78:1  ✅  la única letra blanca que queda
  #687575 sobre blanco .......  4,78:1  ✅  texto secundario
  #2d353c sobre blanco ....... 12,46:1  ✅  títulos de producto


------------------------------------------------------------------
LO QUE CAMBIÓ RESPECTO DE LA v3, PUNTO POR PUNTO
------------------------------------------------------------------
 1. FOOTER — se fue el degradé. Cuerpo plano #eeb2ca (lo pidieron).
    La franja inferior sigue en #d48da1: decisión tomada, mantiene el rosa
    oscuro en su tercer lugar y el banner de servicios no cambia de tinta.
 2. CATEGORÍAS DESTACADAS — velo ROSA en vez de oscuro (lo pidieron).
    Consecuencia: el nombre deja de ser blanco y pasa a #101820.
    → En la v5 el velo pasa a #a85a72 y el nombre vuelve a ser BLANCO.
 3. CUCARDA "EXTRA OFF" y descuento por transferencia — a rosa y gris.
 4. BOTÓN AGREGAR / NEWSLETTER (.btn-primary) — el hover deja de ser oscuro.
 5. CTA DEL MENÚ — el hover deja de ser oscuro; aclara a rosa claro.
 6. MONTSERRAT AHORA ES GLOBAL — antes iba sólo en títulos. Se sumó el peso
    400 al @import porque ahora la tipografía la usa también el cuerpo.
 7. ENVÍO GRATIS — pasa de verde a rosa. El verde queda SÓLO para estados de
    éxito (cupón aplicado), que no son de marca.
 8. BADGES AZULES de la plataforma — a fondo rosa con borde rosa oscuro.
 9. VARIABLES DE CUPONES de nubixstore (--ns-cupon-*) — re-teñidas a la marca.
10. Se conserva el ocultamiento de .ns-footer-store-location que la tienda
    había agregado a mano sobre la v3 publicada.
    → La v5 conserva además #ns-contact-info, que la tienda sumó a esa misma
      regla en el backoffice después de publicar la v4. Están al final del
      archivo. Si se vuelve a editar a mano, avisar para no pisarlo.

⚠️ LO QUE SE PERDÍA EN LA v4  (leer la nota de la v5, abajo)
   · El nombre de las categorías destacadas ya NO es blanco (velo rosa).
     → ⭐ REVERTIDO EN LA v5: vuelve a ser blanco, sobre velo #a85a72.
   · La cucarda "extra off" ya NO es blanca sobre oscuro.
     → Sigue así: chip rosa claro con cifra oscura (7,03:1).
   Las dos eran letra blanca sobre fondo #2d353c. Al sacar el fondo oscuro,
   la letra blanca se va con él: sobre rosa claro da 1,77:1.

Tipografía: MONTSERRAT en TODA la tienda (bloque borrable al final).

*/


/* ⚠️ MONTSERRAT — PARTE 1 DE 2.
   Un @import tiene que ser la PRIMERA regla del archivo, así que vive acá
   arriba aunque el resto del bloque esté al final.
   v4: se sumó el peso 400 — ahora Montserrat también compone el CUERPO de
   texto, no sólo los títulos, así que hace falta el regular.
   PARA SACAR MONTSERRAT hay que borrar DOS cosas:
     (1) esta línea, y
     (2) el bloque "TIPOGRAFÍA — MONTSERRAT" del final del archivo. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');


/* ============================================================
   VARIABLES DE MARCA
   Cambiando estos valores se re-tiñe todo el sitio.
   No hay ningún color acá que la marca no use ya.
   ============================================================ */
:root {
    /* --- 1º SUPERFICIE PRINCIPAL --- */
    --vs-rosa:        #eeb2ca;   /* PRIMARIO del manual. Nunca como texto. */

    /* --- 2º SEGUNDA SUPERFICIE Y TEXTO SECUNDARIO --- */
    --vs-gris:        #6e7c7c;   /* SECUNDARIO del manual (Pantone 444 C) */
    --vs-gris-texto:  #687575;   /* variante legible: 4,78:1 como texto Y como fondo */

    /* --- 3º ACENTO --- */
    --vs-rosa-detalle:#d48da1;   /* bordes, subrayados, íconos, franja del footer */

    /* --- ⭐ v5 · ROSA TEXTO — el único rosa que se puede LEER --------------
       #a85a72 es el mismo tono que #d48da1 (H 341° contra 343°), sólo más
       profundo. Existe porque los otros dos rosas NO sirven de texto:

         #eeb2ca como texto sobre blanco ....  1,77:1  ❌
         #d48da1 como texto sobre blanco ....  2,58:1  ❌
         #a85a72 como texto sobre blanco ....  4,81:1  ✅
         blanco sobre #a85a72 ...............  4,81:1  ✅

       Sirve en los DOS sentidos, y por eso resuelve de una sola vez el link
       de marca, el menú abierto, el descuento en efectivo y el texto blanco
       de las portadas de categoría.

       ⚠️ DÓNDE **NO** VA: como superficie grande. Para eso están #eeb2ca
          (1º) y #d48da1 (3º). Éste es tinta y velo, nada más. */
    --vs-rosa-texto:  #a85a72;

    /* --- TINTA (ya no es superficie) --- */
    --vs-oscuro:      #2d353c;   /* títulos de producto y texto sobre rosa */
    --vs-negro:       #101820;   /* la tinta más fuerte: sobre rosa da 10,10:1 */

    /* --- Neutros de trabajo --- */
    --vs-fondo:       #ebebeb;   /* superficies claras */

    /* --- Funcional (no es de marca) --- */
    --vs-verde:       #04a752;   /* SÓLO estados de éxito. "Envío gratis" ya NO
                                    lo usa: la tienda lo pidió en rosa. */

    /* --- Tinta sobre rosa: la combinación de marca (7,03:1) --- */
    --vs-sobre-rosa:  #2d353c;
}


/* ============================================================
   PALETA DE LOS CUPONES INTELIGENTES DE NUBIXSTORE
   El nivel 2 (nubixstore.css) expone estas variables justamente para que cada
   tienda las pise. Antes de la v4 Viasek no las pisaba y el sistema de cupones
   se veía gris neutro + naranja, fuera de la marca.

   ⚠️ CUIDADO AL EDITAR: --ns-cupon-accent se usa como FONDO con `color:#fff`
      escrito a mano en el nivel 2. Por eso NO puede ser rosa (blanco sobre
      rosa = 1,77:1). Va el gris claro #687575, que con blanco da 4,78:1 ✅ y
      además es uno de los dos colores principales que pidió la tienda.

   --ns-cupon-applied (verde) NO se toca: es el estado "cupón aplicado", un
   estado funcional de éxito. Lo que sí se pasó a rosa es "envío gratis",
   que es lo que pidió la tienda. Ver § ENVÍO GRATIS Y CUCARDAS FUNCIONALES.
   ============================================================ */
:root {
    --ns-cupon-accent:      #687575;                  /* fondo con letra blanca: 4,78:1 ✅ */
    --ns-cupon-accent-dark: #2d353c;                  /* hover: 12,46:1 ✅ */
    --ns-cupon-ink:         #2d353c;                  /* texto del cupón */
    --ns-cupon-soft:        rgba(238, 178, 202, .20); /* fondo suave: el rosa translúcido */
    --ns-cupon-border:      #d48da1;                  /* troquel y borde: el acento */
    --ns-cupon-muted:       #687575;                  /* texto secundario: 4,78:1 ✅ */
    --ns-cupon-notch-bg:    #ffffff;                  /* fondo de la página */

    /* ⭐ v5 · EL DESCUENTO EN EFECTIVO DEJA DE SER ROJO.
       La tienda pidió: "En ficha de producto que muestra el descuento en
       efectivo en rojo, ponerlo en rosa oscuro".

       --ns-cupon-hot venía en el NARANJA #d9480f del nivel 2 — es lo que se
       ve rojo en "10% OFF ( Transferencia ) · $46.433" (.ns-fin-oneoff) y en
       la fila del desplegable (.ns-cuota-row-off).

       Va en ROSA TEXTO, y funciona porque el nivel 2 lo usa de las DOS formas:
         · como TEXTO   → #a85a72 sobre blanco ...... 4,81:1 ✅
         · como FONDO con letra blanca escrita a mano
           (.ns-cupon-card-benef.ns-cupon-benef-extra)
                        → blanco sobre #a85a72 ...... 4,81:1 ✅
       Con #d48da1 los dos casos fallaban (2,58:1).

       ⚠️ SE PIERDE LA SEÑAL DE URGENCIA. En el nivel 2 este color es el
          "efusivo" y ahora es casi igual al acento. Es lo que se pidió. */
    --ns-cupon-hot:         #a85a72;                  /* 4,81:1 en los dos sentidos ✅ */
}

/* La sombra del chip "extra" seguía calculada sobre el naranja viejo. */
.ns-cupon-card-benef.ns-cupon-benef-extra {
    box-shadow: 0 2px 6px rgba(168, 90, 114, .28) !important;
}


/* ============================================================
   INTERACCIÓN — HOVER DE LINKS (GLOBAL)
   Los rosas no sirven como color de texto, así que el hover oscurece la letra
   y la marca con un subrayado en rosa detalle: el rosa hace de adorno, que es
   el rol que le da el manual.

   El menú y los desplegables tienen su PROPIO indicador y quedan excluidos del
   subrayado: si no, salen dos rayas (una bajo el texto y otra bajo el botón).
   ============================================================ */
/* ⭐ v5 · EL COLOR BASE DE LOS LINKS
   Cartzilla trae `a { color:#fe696a }` — un rojo salmón que no es de la marca
   y que hasta la v4 nunca se había pisado. Era el color real de todos los
   links que ninguna regla reclamaba: el link de marca de la ficha, los links
   sueltos del contenido, los de las páginas de sección.

   Va en ROSA TEXTO (4,81:1 sobre blanco ✅).

   ⚠️ A PROPÓSITO SIN !important. Es la regla de menor especificidad posible
      (0,0,1), así que sólo pinta lo que nadie más reclama. Todo lo que ya
      tiene color propio lo conserva y NO hay que revisarlo:
        footer y topbar → tinta oscura sobre rosa (tienen !important)
        menú           → lo pinta .navbar-light .navbar-nav .nav-link
        títulos de producto, breadcrumb, filtros, slides y banners → propios */
a {
    color: var(--vs-rosa-texto);
}

a:not(.btn):hover,
a:not(.btn):focus {
    color: var(--vs-negro) !important;
    text-decoration: underline;
    text-decoration-color: var(--vs-rosa-detalle);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* ⭐ v5 · MENÚ PRINCIPAL — POR QUÉ LA CATEGORÍA SE PONÍA ROJA
   La tienda reportó que al navegar un submenú, el link de la categoría padre
   quedaba ROJO en vez de rosa. La v4 ya pisaba el rojo de Cartzilla, pero se
   le escapaba UN caso, y es el que más se ve.

   Cartzilla pinta el link padre con DOS familias de reglas (theme.min.css):

     línea 18743  .navbar-light .nav-item:hover .nav-link:not(.disabled)
     línea 18752  .navbar-light .nav-item.show .nav-link:not(.disabled)

   La primera engancha el hover del <li>, NO el del <a>. Cuando el mouse baja
   al desplegable sigue estando dentro del <li>, así que `.nav-item:hover` es
   verdadero mientras `.nav-link:hover` es falso. La v4 sólo cubría
   `.nav-link:hover` — por eso justo ahí volvía el rojo.

   Se cubren los dos casos y también los `> i` (los íconos del menú, que
   Cartzilla pinta por separado en las mismas reglas).

   COLOR: rosa texto #a85a72 — 4,81:1 sobre blanco y 4,55:1 sobre el #f6f9fc
   que el theme le pone al .nav-item. Los otros dos rosas no llegan (2,58 y
   1,77), así que acá el rosa texto no es una preferencia: es el único que se
   lee. Se conserva el filete inferior en rosa oscuro. */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link.active,
.navbar-nav .show > .nav-link,
.navbar-nav .nav-item:hover > .nav-link,
.navbar-nav .nav-item.show > .nav-link,
.navbar-nav .nav-item.active > .nav-link,
.navbar-nav .nav-item.dropdown > .nav-link:focus {
    color: var(--vs-rosa-texto) !important;        /* 4,81:1 ✅ — v4 lo dejaba en #2d353c */
    text-decoration: none !important;
    box-shadow: inset 0 -2px 0 0 var(--vs-rosa-detalle);
}

/* Los íconos dentro del link del menú: Cartzilla los pinta con su propio
   selector `… .nav-link:not(.disabled) > i`, así que hay que nombrarlos. */
.navbar-nav .nav-link:hover > i,
.navbar-nav .nav-item:hover > .nav-link > i,
.navbar-nav .nav-item.show > .nav-link > i,
.navbar-nav .nav-item.active > .nav-link > i {
    color: var(--vs-rosa-texto) !important;
}

/* Ítems de los menús desplegables: fondo rosa suave, sin subrayado. */
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
    color: var(--vs-oscuro) !important;
    text-decoration: none !important;
    background-color: rgba(238, 178, 202, .32);   /* rosa translúcido: sólo aclara */
}

/* Íconos dentro de un link (carrito, cuenta, redes, etc.) */
a:not(.btn):hover i,
a:not(.btn):focus i { color: var(--vs-negro) !important; }


/* ============================================================
   HEADER / TOPBAR
   Rosa de marca con texto OSCURO: 6,98:1 ✅
   ⚠️ La tienda había pedido letra blanca acá. Con #eeb2ca de fondo el blanco
      da 1,77:1 y no se lee, así que la franja queda con tinta oscura. Es la
      combinación que define el manual. Alternativa en el README §4.
   ============================================================ */
.topbar-dark,
.topbar-dark.bg-darker { background-color: var(--vs-rosa) !important; }

.topbar-dark,
.topbar-dark .topbar-text,
.topbar-dark .topbar-link,
.topbar-dark .topbar-text > i,
.topbar-dark .topbar-link > i,
.topbar-dark a { color: var(--vs-sobre-rosa) !important; }

/* Los mensajes rotativos y el link de seguimiento, explícitos: el rotador los
   emite como spans con animación propia y el link tiene ID. */
.topbar-dark .ns-topbar-rotator-item,
.topbar-dark .ns-topbar-rotator-item b,
.topbar-dark .ns-topbar-rotator-item strong,
#ns-order-search-link,
#ns-order-search-link i { color: var(--vs-sobre-rosa) !important; }

.topbar-dark a:hover,
.topbar-dark a:focus {
    color: var(--vs-negro) !important;             /* 10,1:1 sobre el rosa */
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.is-mobile .topbar-text { font-size: 10px; }
.ns-mobile-logo-store { width: 150px; padding: 0; margin: 0; }


/* ============================================================
   MENÚ — CTA "Conocenos"
   El nivel 2 de nubixstore lo pinta NARANJA #FF6D2D para todas las tiendas
   (nubixstore.css línea ~170) y Viasek nunca lo había pisado.

   Va en ROSA DETALLE con texto oscuro (4,82:1 ✅). Se eligió #d48da1 y no
   #eeb2ca porque es el más saturado de los dos: sobre la barra blanca del menú
   el relleno se recorta y el botón se lee como botón. Con #eeb2ca el contorno
   quedaría casi invisible (1,77:1 contra el blanco).
   ============================================================ */
#ns-nav-item-cta {
    background: var(--vs-rosa-detalle) !important;
    border-color: var(--vs-rosa-detalle) !important;
    color: var(--vs-negro) !important;             /* 6,92:1 ✅ — v4: era #2d353c (4,82:1) */
    font-weight: 700;
    letter-spacing: .01em;
}
/* v4 — LA TIENDA PIDIÓ SACARLE EL GRIS OSCURO AL CTA DEL MENÚ.
   El hover ya no OSCURECE: ACLARA. Pasa del rosa oscuro al rosa claro y la
   tinta se mantiene. Es el mismo gesto (el botón cambia) sin fondo oscuro.
     reposo: #101820 sobre #d48da1 ...  6,92:1 ✅
     hover : #101820 sobre #eeb2ca ... 10,10:1 ✅ (mejora al pasar el mouse) */
#ns-nav-item-cta:hover,
#ns-nav-item-cta:focus {
    background: var(--vs-rosa) !important;
    border-color: var(--vs-rosa-detalle) !important;
    color: var(--vs-negro) !important;
    text-decoration: none !important;
}


/* ============================================================
   CATEGORÍAS DESTACADAS  (#ns-featured-categories-nav)
   El nivel 2 lo emite como chapita gris translúcida a la izquierda, letra
   negra, filete negro a la derecha y blur. El mockup pide el nombre CENTRADO
   ABAJO y EN NEGRITA — y eso se conserva.

   HISTORIA DE ESTE BLOQUE, QUE EXPLICA POR QUÉ QUEDÓ ASÍ

   · v3 — velo OSCURO #2d353c con letra blanca. La tienda lo rechazó:
       "¿Se podrá ponerle una sombra rosa […]? Queda raro con sombra oscura"
   · v4 — velo ROSA CLARO #eeb2ca. Para que se leyera hubo que sacarle el
     blanco a la letra y ponerla en #101820 (el blanco sobre ese rosa da
     1,77:1). Quedó anotado como pendiente de confirmar.
   · v5 — la tienda contestó ese pendiente: QUIERE LA LETRA BLANCA.

   ⭐ v5 — VELO EN ROSA TEXTO #a85a72 CON LETRA BLANCA
     Es la única combinación que cumple las dos cosas a la vez —velo rosa Y
     letra blanca— porque es el único rosa de la marca sobre el que el blanco
     se lee:

       blanco sobre #eeb2ca (v4) ....  1,77:1  ❌
       blanco sobre #d48da1 .........  2,58:1  ❌
       blanco sobre #a85a72 .........  4,81:1  ✅

     Los detalles de opacidad del degradé están abajo, en la propia regla:
     el velo tiene que ser OPACO donde cae la letra, porque al ser translúcido
     sobre una portada clara el ratio se cae.

   → Para volver a la letra oscura de la v4: color #101820 y los rgba() a
     rgba(238,178,202,…) con .90 abajo.
   ============================================================ */
#ns-featured-categories-nav .ns-featured-categories-nav-item .ns-fcat-label {
    left: 0;
    right: 0;                       /* el nivel 2 lo deja en auto: la chapita se achica al texto */
    bottom: 0;                      /* pegado al borde inferior, no a 15px */
    width: auto;
    max-width: none;
    padding: 1.6rem .6rem .85rem;   /* el padding de arriba es el que deja correr el degradé */
    text-align: center;
    color: #fff !important;         /* v5: el BLANCO que pidió la tienda */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-right: 0;                /* saca el filete negro del nivel 2 */

    /* ⭐⭐ v6 — SIN FONDO. LO PIDIÓ LA TIENDA:
         "está bien las letras en blanco, pero no quiero fondo alguno"

       ⚠️⚠️ HAY QUE SABER ESTO ANTES DE PUBLICAR ⚠️⚠️

       Las seis portadas de categoría son FONDO ROSA CLARO LISO — se verificó
       descargando las imágenes el 2026-09-09. El rosa de las fotos es
       prácticamente el #eeb2ca de la marca.

       Letra blanca sobre ese rosa, sin ningún velo:

               ≈ 1,8:1        el mínimo es 4,5:1

       Es el ratio más bajo de todo el sitio. No es "poco contraste": es texto
       que prácticamente no se ve.

       QUÉ SE HIZO PARA SALVARLO
       Como no puede haber fondo, lo único que queda es trabajar sobre la
       LETRA misma: un contorno oscuro por sombra proyectada. No es un fondo
       —no hay ninguna caja ni velo— pero le devuelve borde a la tipografía y
       la hace legible sobre el rosa. Es la técnica estándar para texto sobre
       foto cuando no se puede velar la imagen.

       ⚠️ Aun así NO cumple WCAG: la norma mide letra contra fondo y no
          contempla la sombra. Queda como decisión estética de la marca,
          documentada.

       ⭐ LA ALTERNATIVA QUE SÍ CUMPLE, Y ES UNA SOLA LÍNEA
          Sin fondo, con letra OSCURA en vez de blanca:
              color: #2d353c  sobre el rosa de las portadas → 7,03:1 ✅
          O sea: el pedido "sin fondo alguno" se puede cumplir perfectamente;
          lo que no se puede es "sin fondo Y en blanco".
          Para cambiarlo: poner #2d353c en el color de arriba y borrar el
          text-shadow. Nada más. */
    background: none;               /* v6: se fue el velo #a85a72 de la v5 */
    text-shadow:
        0 1px 2px rgba(16, 24, 32, .55),
        0 0 6px rgba(16, 24, 32, .45),
        0 0 1px rgba(16, 24, 32, .90);
    /* EL VELO DE LA v5 QUEDA ACÁ COMENTADO, por si hay que volver.
       Era rosa texto opaco del 0 al 60 % y garantizaba 4,81:1 con cualquier
       portada. Se sacó en la v6 a pedido de la tienda.

       background: linear-gradient(to top,
                   rgba(168, 90, 114, 1) 0%,
                   rgba(168, 90, 114, 1) 60%,
                   rgba(168, 90, 114, .55) 82%,
                   rgba(168, 90, 114, 0) 100%); */
    -webkit-backdrop-filter: none;  /* el nivel 2 le pone blur; acá estorba */
    backdrop-filter: none;
}

/* El anillo de foco del nivel 2 es verde (#198754). Se pasa a la marca.
   Va en oscuro y no en rosa: un anillo de foco necesita 3:1 contra lo que
   tiene al lado, y el rosa contra una foto clara no lo garantiza. */
#ns-featured-categories-nav .ns-featured-categories-nav-item:focus-visible {
    box-shadow: 0 0 0 3px rgba(45, 53, 60, .55);
}


/* ============================================================
   BUSCADOR
   ============================================================ */
#ns-search-mobile-form,
#ns-search-form { width: inherit; }

#ns-search-mobile-form button,
#ns-search-form button { border: 0; background: none; }


/* ============================================================
   BOTONES
   El rosa es el relleno y el texto va oscuro: la combinación del manual.
   ============================================================ */

/* Botón principal — fondo rosa, texto oscuro: 7,03:1 ✅
   Es el botón "Agregar" de todo el listado y el de suscripción al newsletter.
   El borde en rosa detalle le da contorno: #eeb2ca contra el blanco de la
   página es 1,77:1 y el botón se desdibujaría.

   ⭐ v4 — LA TIENDA PIDIÓ SACARLE EL GRIS OSCURO AL BOTÓN "AGREGAR"
      Y AL DEL NEWSLETTER. El hover ya no rellena de #2d353c: pasa al rosa
      oscuro, que es el acento de la marca.
        reposo: #2d353c sobre #eeb2ca ... 7,03:1 ✅
        hover : #101820 sobre #d48da1 ... 6,92:1 ✅
      El botón se oscurece lo justo para que se note el hover, sin salir de
      los rosas. */
.btn-primary {
    background: var(--vs-rosa);
    border-color: var(--vs-rosa-detalle);
    color: var(--vs-sobre-rosa);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--vs-rosa-detalle) !important;
    border-color: var(--vs-rosa-detalle) !important;
    color: var(--vs-negro) !important;             /* 6,92:1 ✅ */
}

/* Botón secundario / outline */
.btn-outline-primary {
    color: var(--vs-oscuro);
    border-color: var(--vs-rosa-detalle);
    background-color: transparent;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: var(--vs-sobre-rosa) !important;
    background-color: var(--vs-rosa) !important;
    border-color: var(--vs-rosa-detalle) !important;
}

/* Cartzilla trae .btn-outline-* con el coral del theme escrito a mano. */
.btn-outline-accent {
    color: var(--vs-oscuro);
    border-color: var(--vs-rosa-detalle);
}
.btn-outline-accent:hover,
.btn-outline-accent:focus {
    color: var(--vs-sobre-rosa);
    background-color: var(--vs-rosa);
    border-color: var(--vs-rosa-detalle);
}

/* Botón de agregar al carrito de la ficha — mismo criterio que el primario */
#ns-add-to-cart-btn {
    background: var(--vs-rosa);
    border-color: var(--vs-rosa-detalle);
    color: var(--vs-sobre-rosa);
}
#ns-add-to-cart-btn:hover,
#ns-add-to-cart-btn:focus {
    background: var(--vs-rosa-detalle);            /* v4: era #2d353c */
    border-color: var(--vs-rosa-detalle);
    color: var(--vs-negro);                        /* 6,92:1 ✅ */
}

/* Foco visible por teclado — accesibilidad, no estética.
   Va en oscuro: los rosas no llegan al 3:1 que pide WCAG para un indicador. */
.btn:focus-visible,
a:focus-visible {
    outline: 2px solid var(--vs-oscuro);
    outline-offset: 2px;
}


/* ============================================================
   COLORES DE TEXTO Y ACENTOS
   ⚠️ Con los hexas de marca, esta marca NO TIENE un color de acento legible
      como texto: #eeb2ca da 1,77:1 y #d48da1 da 2,59:1 sobre blanco.
      Todo lo que hay que LEER va en #2d353c. El rosa aparece como fondo,
      borde, subrayado o ícono — que es donde sí rinde.
   ============================================================ */
.text-primary { color: var(--vs-oscuro) !important; }

/* Los links dentro de una diapositiva HTML los define la propia pieza:
   el nivel 4 no les impone color, porque cada slide tiene su fondo. */
.ns-slide-html a { color: inherit !important; }

.ns-price { color: var(--vs-negro); }
.ns-off-price { color: var(--vs-oscuro); }

/* ============================================================
   ⭐ v4 — DESCUENTO POR TRANSFERENCIA, EN ROSA Y GRIS
   Lo pidió la tienda, textual:
     "el descuento por transferencia (tanto la cajita como el precio que
      quede) este en rosa y gris (no se en qué tonalidades de cada uno
      quedará mejor)"

   Se resolvió así, que es lo que da mejor ratio con esos dos colores:
     · LA CAJITA (el chip del 10 %) → fondo ROSA CLARO con borde ROSA OSCURO.
       Es el "borde más intenso" que la tienda pidió para los badges.
       #2d353c sobre #eeb2ca = 7,03:1 ✅
     · EL TEXTO de alrededor    → GRIS CLARO #687575 sobre blanco = 4,78:1 ✅
     · EL PRECIO (el <b>)       → #2d353c, para que el número pese más que
       la palabra. 12,46:1 ✅

   ⚠️ La letra del chip DEJA DE SER BLANCA. En la v3 el chip era oscuro con
      letra blanca; sobre rosa el blanco da 1,77:1 y no se lee.
   ============================================================ */
.ns-one-pay-discount-info { color: var(--vs-gris-texto); }        /* 4,78:1 ✅ */
.ns-one-pay-discount-info b { color: var(--vs-oscuro); }          /* el precio pesa más */

.ns-one-pay-discount-info .ns-badge-one-pay-discount {
    background-color: var(--vs-rosa);
    border: 1px solid var(--vs-rosa-detalle);      /* el borde más intenso */
    color: var(--vs-sobre-rosa);                   /* 7,03:1 ✅ */
    font-weight: 700;
}

/* La línea de cuotas, en el mismo gris claro: es información secundaria. */
.ns-quotes-info { color: var(--vs-gris-texto); }                  /* 4,78:1 ✅ */
.ns-quotes-info b,
.ns-quotes-info strong { color: var(--vs-oscuro); }


/* ============================================================
   FONDOS
   ============================================================ */
.bg-dark   { background-color: var(--vs-oscuro) !important; }
.bg-darker { background-color: var(--vs-negro) !important; }

.bg-custom,
.bg-gray { background-color: var(--vs-fondo) !important; }


/* ============================================================
   FOOTER
   Los dos rosas de la marca, el de arriba más claro que el de abajo, y texto
   OSCURO encima — que es la única tinta que se lee sobre ellos.

     Cuerpo   #eeb2ca  con #2d353c  →  7,03:1  ✅
     Franja   #d48da1  con #2d353c  →  4,82:1  ✅
     Hover    #101820               → 10,10:1 y 6,92:1  ✅

   ⭐ v4 — SE FUE EL DEGRADÉ DE ENTRADA
   La v3 hacía entrar el footer con un degradé de blanco a rosa en los
   primeros 150 px (260 en desktop). La tienda lo rechazó, textual:

     "Ese degradé no nos agrada, preferiríamos que fuese rosa claro."

   El cuerpo del footer queda entonces en ROSA CLARO PLANO. Basta con borrar
   background-image / -repeat / -size / -position y el @media que ajustaba la
   altura del fade: el background-color ya era el rosa.

   LA FRANJA INFERIOR SIGUE EN ROSA OSCURO #d48da1 — decisión tomada con el
   proyecto. Mantiene el rosa oscuro en su tercer lugar, separa los legales
   del cuerpo, y el banner de servicios que vive ahí no cambia de tinta.
   ============================================================ */
#ns-footer {
    background-color: var(--vs-rosa) !important;
    background-image: none !important;             /* v4: se fue el degradé */
}

#ns-footer-bottom { background-color: var(--vs-rosa-detalle) !important; }

#ns-footer .widget-title,
#ns-footer .text-light,
#ns-footer p,
#ns-footer a,
#ns-footer .form-text { color: var(--vs-sobre-rosa) !important; }

#ns-footer a:hover,
#ns-footer a:focus {
    color: var(--vs-negro) !important;
    text-decoration: underline;
    text-decoration-color: var(--vs-negro);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* El theme deja los legales y la ayuda del newsletter en opacity:.5. Con tinta
   oscura sobre #d48da1 eso baja a 4,1:1, por debajo del mínimo. Van al 100%:
   son texto obligatorio y tienen que leerse. */
#ns-footer .opacity-50,
#ns-copyright-footer .opacity-50 { opacity: 1 !important; }

/* Los íconos sociales del footer son claros por defecto (bs-light) y sobre el
   rosa se pierden. Se pasan a oscuro. */
#ns-footer .btn-social.bs-light {
    color: var(--vs-sobre-rosa) !important;
    border-color: rgba(45, 53, 60, .35) !important;
}
/* v4: el hover ya no rellena de oscuro. Pasa al rosa oscuro, que sobre el
   rosa claro del footer se recorta igual y no mete un fondo oscuro más.
   #101820 sobre #d48da1 = 6,92:1 ✅ */
#ns-footer .btn-social.bs-light:hover {
    color: var(--vs-negro) !important;
    background-color: var(--vs-rosa-detalle) !important;
    border-color: var(--vs-rosa-detalle) !important;
}

/* Las líneas divisorias del footer son .hr-light (blancas): sobre el rosa
   desaparecen. Se oscurecen para que se vean. */
#ns-footer .hr-light { border-top-color: rgba(45, 53, 60, .28) !important; }


/* ============================================================
   BANNER DE PIE DE PÁGINA  (.nsb-vkr)
   La posición Footer imprime sólo el código del primer banner, sin envoltorio.
   El banner de la rutina de 3 pasos es TRANSPARENTE: hereda el fondo de acá.
   Como el fondo del footer lo decide este archivo, la tinta del banner también.
   Cae dentro de #ns-footer-bottom (#d48da1): tinta oscura #101820 = 6,92:1 ✅
   Pieza: entregables/viasek/banners-footer/20260825-rutina-3-pasos-v1/
   ============================================================ */
.nsb-vkr {
    --nsb-tinta:       #101820;                    /* 6,92:1 sobre #d48da1 ✅ */
    --nsb-tinta-suave: rgba(16,24,32,.78);
    --nsb-linea:       rgba(16,24,32,.18);
    --nsb-cta-bg:      #101820;
    --nsb-cta-tx:      #ffffff;                    /* 17,9:1 ✅ */
}


/* ============================================================
   CARRITO Y CHECKOUT
   ============================================================ */
#ns-cart .widget-product-title { font-weight: normal; }

/* Contador del carrito: chip rosa con la cifra oscura */
.navbar-tool-label {
    background: var(--vs-rosa) !important;
    color: var(--vs-sobre-rosa) !important;
    font-weight: 700;
}

.steps-dark .step-item.active .step-count,
.steps-dark .step-item.active .step-progress { background-color: var(--vs-rosa); }
.steps-dark .step-item.active .step-count { color: var(--vs-sobre-rosa); }

.ns-cart-select-txt-option { font-size: 11px; }


/* ============================================================
   SIDEBAR / FILTROS
   Acá el gris del manual cumple su rol: texto secundario.
   ============================================================ */
.widget .widget-filter-item a { color: var(--vs-gris-texto); }
.widget .widget-filter-item a.current {
    color: var(--vs-oscuro);
    font-weight: 700;
}


/* ============================================================
   BREADCRUMB + PAGE TITLE  (.is-store-item)
   ============================================================ */
.breadcrumb-item + .breadcrumb-item::before,
.breadcrumb-item a { color: var(--vs-gris-texto) !important; }

.page-title-overlap { background: none; }
.page-title-overlap h1 { color: var(--vs-negro); }


/* ============================================================
   HOME > CALESITA DE MARCAS
   ============================================================ */
.ns-brand-marquee .px-4 { padding: 0 !important; }
.ns-brand-marquee .border { border: 0 !important; }
.ns-brand-marquee a:hover img { border-color: var(--vs-rosa-detalle) !important; }


/* ============================================================
   REVIEWS
   ============================================================ */
#ns-reviews-carousel footer { line-height: 1em; }

#ns-reviews-carousel .card-body { min-height: 360px; }
.is-mobile #ns-reviews-carousel .card-body { min-height: 285px; }

#ns-reviews-carousel .card-body .btn-primary { position: absolute; bottom: 0; }
#ns-reviews-carousel img { border: 2px solid var(--vs-fondo); }


/* ============================================================
   CUCARDAS
   Fondo rosa con la cifra oscura: 7,03:1 ✅
   ============================================================ */
.ns-badge-off {
    font-weight: bold;
    background: var(--vs-rosa);
    color: var(--vs-sobre-rosa);
}


/* ============================================================
   ⭐ v4 — ENVÍO GRATIS: DE VERDE A ROSA
   Lo pidió la tienda, textual:
     "Todo lo referido a GRATIS / Envío gratis y el indicador de lo que falta
      para envío gratis también usar rosa."

   El verde #04a752 (nivel 4) y #25ba2d (nivel 3, basics.css) salen de todo lo
   que dice "envío gratis". Queda SÓLO para estados de éxito del sistema de
   cupones (--ns-cupon-applied), que no son de marca y donde el verde comunica
   "listo, se aplicó".

   ⚠️ EL TEXTO NO PUEDE SER ROSA. "Envío gratis" en rosa sobre blanco da
      1,77:1. Por eso la palabra se resuelve como PASTILLA rosa con tinta
      oscura, que es rosa de verdad y además se lee:
        #2d353c sobre #eeb2ca = 7,03:1 ✅

   ⏳ PENDIENTE DE VERIFICAR: el "indicador de lo que falta para envío gratis"
      no se pudo ver — el carrito de prueba está vacío y no lo renderiza. Se
      cubrieron todas las clases conocidas de la plataforma. Hay que revisarlo
      con un carrito con productos.
   ============================================================ */
.ns-badge-free-shipping,
.ns-free-shipping {
    background-color: var(--vs-rosa) !important;
    color: var(--vs-sobre-rosa) !important;        /* 7,03:1 ✅ */
    font-weight: 700;
}

/* El nivel 3 lo emite como TEXTO verde suelto. Como el rosa no puede ser
   letra, se lo convierte en pastilla: mismo color, forma legible. */
.ns-txt-free-shipping {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background-color: var(--vs-rosa);
    color: var(--vs-sobre-rosa) !important;        /* 7,03:1 ✅ */
    font-weight: 700;
}

/* Fila "envío gratis" del bloque de beneficios de la ficha. El nivel 2 la
   pinta con --ns-cupon-applied (verde) en el medallón y en el <b>. Se apunta
   directo y no por la variable, para no teñir de rosa el estado "cupón
   aplicado", que sigue siendo verde a propósito. */
.ns-beneficio-envio .ns-beneficio-ico {
    background: var(--vs-rosa) !important;
    color: var(--vs-sobre-rosa) !important;        /* 7,03:1 ✅ */
}
.ns-beneficio-envio b { color: var(--vs-oscuro) !important; }     /* 12,46:1 ✅ */


/* ============================================================
   ⭐ v4 — BADGES DE INFO: DE AZUL A ROSA
   Lo pidió la tienda, textual:
     "Todo lo que esta como badge de info en azul clarito pasarlo a borde rosa
      y fondo rosa (borde más intenso)."

   Fondo ROSA CLARO + borde ROSA OSCURO + tinta oscura: 7,03:1 ✅
   El "borde más intenso" es literal: #d48da1 sobre #eeb2ca se ve como un
   contorno sin salirse de los dos rosas.

   ⏳ NO SE PUDO IDENTIFICAR CUÁL ES EL BADGE QUE VE LA TIENDA: ninguna de las
      clases azules de la plataforma se renderiza hoy en home, listado, ficha
      ni carrito (verificado el 2026-09-02). Se re-tiñe TODA la familia azul
      de basics.css de forma defensiva. Si aparece otro, se suma acá.

      Los azules que se pisan:
        .ns-info · .ns-badge-combo · .ns-combo ....... #0C7FCC
        .ns-badge-pack · .ns-pack ................... #0C7FCC
        .ns-badge-promo · .ns-promo ................. #0C7FCC
        .ns-badge-brand-line ........................ #2596be
   ============================================================ */
.ns-info,
.ns-badge-combo, .ns-combo,
.ns-badge-pack,  .ns-pack,
.ns-badge-promo, .ns-promo,
.ns-badge-brand-line {
    background-color: var(--vs-rosa) !important;
    border: 1px solid var(--vs-rosa-detalle) !important;
    color: var(--vs-sobre-rosa) !important;        /* 7,03:1 ✅ */
}

/* .ns-badge-brand-line viene con border:0 y border-radius:0 del nivel 3. */
.ns-badge-brand-line { border-radius: 4px !important; }


/* ============================================================
   ⭐ v5 — ESTADOS DEL SISTEMA: SUCCESS E INFO PASAN A ROSA
   La tienda pidió:
     "Todo lo que son mensajes de exito o de info ( success, info ) utilice
      los rosas de Viasek. Lo mismo con el progreso de envio gratis en carrito."
     "La calculadora de envio también muestra el gratis en verde, ponerlo en rosa"

   De dónde salen los colores que se pisan (theme.min.css):
     .alert-success ... texto #3bc188 · fondo #ecfbf5 · borde #bdf1db
     .alert-info ...... texto #5fa1e5 · fondo #f0f7ff · borde #cbe4ff
     .text-success .... #42d697 !important
     .text-info ....... #69b3fe !important
     .bg-success / .bg-info ... vía --bs-success-rgb / --bs-info-rgb, !important
     .badge ........... color:#fff
     .progress ........ fondo #f3f5f9

   ⚠️ TODO ACÁ LLEVA !important, y no por costumbre: el theme escribe
      !important en .text-* y .bg-*, así que sin eso no se pisan.

   ⚠️ QUÉ VERDE **NO** SE TOCA
      El verde funcional sigue vivo en --ns-cupon-applied (el estado "cupón
      aplicado" del nivel 2). No se tocó en la v4 y tampoco acá: es un estado
      de éxito real y el verde comunica "listo, se aplicó". Si la tienda lo
      quiere afuera también, es una línea — está anotado en el README.
   ============================================================ */

/* --- 1 · ALERTAS Y CARTELES DE NOTIFICACIÓN --------------------------------
   Son el "Se han actualizado las cantidades correctamente." del carrito y el
   cartel que aparece un rato al borrar caché o hacer alguna acción
   (`<div id="alert0" class="my-1 alert alert-info ns-alert clearfix">`).

   ⚠️ CORRECCIÓN DE LA v5 — LA TRANSPARENCIA ERA UN ERROR PROPIO, NO DEL THEME.
      La v5 puso el fondo como `rgba(238,178,202,.20)`. Sobre una página blanca
      eso se ve pálido, y sobre cualquier contenido se transparenta: el cartel
      dejaba ver lo que tenía detrás. La tienda lo reportó como
      "el cartel está rosa, pero muy transparente".

      Se verificó que NO hay ninguna animación de opacidad involucrada: el
      theme sólo define `.fade{transition:opacity}` y el cartel no lleva esa
      clase, y el nivel 2 no toca `.alert`. Era el rgba y nada más.

      Ahora el fondo es ROSA SÓLIDO #eeb2ca. Opaco, y sin ambigüedad de color.
      La tinta oscura encima da 7,03:1 ✅

   → Si el rosa pleno resulta muy fuerte para un mensaje del sistema, la
     versión suave y OPACA es #fcf0f4 (el mismo tono que se veía antes sobre
     blanco, pero sólido). Es cambiar el hex de abajo y nada más.

   La tinta NO va en rosa texto: un mensaje del sistema tiene que leerse de un
   vistazo. El rosa lo ponen el fondo y el borde. */
   ⚠️ A PROPÓSITO NO SE TOCA `opacity`. Sería lo intuitivo para "sacar la
      transparencia", pero el fondo sólido ya la resuelve, y forzar
      `opacity:1 !important` bloquearía un eventual fadeOut de la plataforma
      —el cartel se va solo "después de un ratito"— dejándolo desaparecer de
      golpe. No hace falta y puede romper algo que hoy funciona.

   Se suma `.ns-alert`, que es el hook que usa nubixstore, para que la regla
   alcance al cartel aunque cambie de .alert-info a otra variante.
   `.ns-alert-error` NO entra: los errores siguen en rojo, que es correcto. */
.alert-success,
.alert-info,
.ns-alert {
    background-color: var(--vs-rosa) !important;   /* SÓLIDO, sin alfa */
    border-color: var(--vs-rosa-detalle) !important;
    color: var(--vs-sobre-rosa) !important;        /* 7,03:1 ✅ */
}
/* Los links de adentro de la alerta. Con el fondo sólido de la 3ª pasada el
   rosa texto YA NO SIRVE acá: #a85a72 sobre #eeb2ca da 2,71:1. Van en la
   tinta más fuerte, subrayados para que se lean como link: 10,10:1 ✅ */
.alert-success .alert-link,
.alert-info .alert-link,
.ns-alert a,
.alert-success a,
.alert-info a {
    color: var(--vs-negro) !important;             /* 10,10:1 sobre #eeb2ca ✅ */
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* --- 2 · TEXTO Y FONDOS DE ESTADO ----------------------------------------
   .text-success / .text-info son TEXTO: van en rosa texto, el único legible.
   .bg-success / .bg-info son SUPERFICIE: van en rosa claro con tinta oscura. */
.text-success,
.text-info {
    color: var(--vs-rosa-texto) !important;        /* 4,81:1 sobre blanco ✅ */
}

.bg-success,
.bg-info {
    background-color: var(--vs-rosa) !important;   /* rosa claro, es superficie */
}

/* El ícono azul de la nota de envío de la ficha ("El costo de envío y envío
   gratis está sujeto al peso…"). El theme se lo pinta con una clase de botón. */
.btn-outline-info,
i.btn-outline-info {
    color: var(--vs-rosa-texto) !important;
}

/* --- 3 · CUCARDAS "GRATIS" DE LA CALCULADORA DE ENVÍO ---------------------
   <span class="badge bg-success">GRATIS</span>
   .badge trae color:#fff del theme. Sobre rosa claro el blanco da 1,77:1, así
   que la cifra va en tinta oscura: 7,03:1 ✅
   Se nombra .badge junto a .bg-success para ganarle en especificidad al
   .bg-success{…!important} del theme. */
.badge.bg-success,
.badge.bg-info {
    background-color: var(--vs-rosa) !important;
    color: var(--vs-sobre-rosa) !important;        /* 7,03:1 ✅ */
    font-weight: 700;
}

/* --- 4 · BARRA DE PROGRESO DE ENVÍO GRATIS (CARRITO) ----------------------
   Markup de la plataforma:
     <div class="progress mb-1 position-relative">
       <span class="position-absolute … " style="…color:darkgreen…">ENVIO GRATIS…</span>
       <div class="progress-bar progress-bar-striped … bg-success" style="width:0%">
     </div>

   ⚠️ EL PROBLEMA QUE TIENE ESTA PIEZA, Y QUE NO SE VE LEYENDO EL CSS:
      la etiqueta está POSICIONADA ENCIMA de la barra, centrada. Según cuánto
      esté llena, esa misma etiqueta cae sobre la PISTA o sobre la BARRA. O
      sea que su color tiene que funcionar sobre los dos fondos a la vez.

      Por eso la tinta es #101820 y no algo más suave:
        #101820 sobre la pista rosa clara ... 15,21:1 ✅
        #101820 sobre la barra #d48da1 ......  6,92:1 ✅
      Se lee en todo el recorrido, del 0 % al 100 %.

      Las dos alternativas que NO sirven, medidas sobre esta misma pieza:
        letra blanca  → 1,18:1 sobre la pista   ❌ (desaparece al arrancar)
        rosa texto    → 1,86:1 sobre la barra   ❌ (desaparece al llenarse)

   ⚠️ EL color:darkgreen ESTÁ EN UN style="" INLINE. Un estilo inline le gana a
      cualquier selector, así que la única forma de pisarlo es !important.

   NOTA de accesibilidad: la barra #d48da1 contra la pista da 2,21:1, por
   debajo del 3:1 que WCAG pide para un elemento no textual. Se acepta porque
   el dato NO depende del color — la etiqueta dice el monto que falta con
   todas las letras ("Faltan $75.000"). La barra sólo lo refuerza. */
.progress {
    background-color: rgba(238, 178, 202, .30) !important;
}

.progress-bar,
.progress-bar.bg-success,
.progress-bar.bg-info {
    background-color: var(--vs-rosa-detalle) !important;
}

/* La etiqueta que va montada sobre la barra. El selector de hijo directo es
   para no alcanzar texto de adentro de la propia barra. */
.progress > span,
.progress > span b,
.progress > span small,
.progress > span strong {
    color: var(--vs-negro) !important;             /* pisa el style="color:darkgreen" */
    font-weight: 700;
}


/* ============================================================
   ⭐ v6 — EL CHECKOUT PASA A ROSA
   La tienda pidió:
     "En el paso 3 del Checkout, aparece en verde todas las opciones de método
      de pago, las quiero en rosa. Además la barra superior de
      class='steps steps-dark py-4' que respete el rosa que mantiene en el
      step 1 y 2. Obviamente llevar el rosa al step 4."

   ⭐ POR QUÉ EL PASO 3 SE RESISTÍA Y LOS PASOS 1 Y 2 NO
      El verde del checkout no lo pone el theme: lo pone el NIVEL 2 de
      nubixstore, y en el paso 3 lo hace con un selector mucho más fuerte.

        nubixstore.css:1248   .steps-dark .step-item.active .step-count
                              → #198754                    (0,4,0, sin !important)

        nubixstore.css:1513   #step-3.active .step-count
                              → #198754 !important         (1,2,0 CON !important)

      La regla que Viasek ya tenía desde la v4 empataba en especificidad con la
      primera y le ganaba por orden de carga —por eso los pasos 1 y 2 sí eran
      rosas—, pero contra la segunda no tenía nada que hacer: un ID más un
      !important no se pisan con clases.

      Acá se responde con la misma moneda: mismo ID y mismo !important. Y se
      cubren #step-1 a #step-4 de una, para que no vuelva a pasar cuando la
      plataforma agregue reglas por paso.
   ============================================================ */

/* --- 1 · LA BARRA DE PASOS --------------------------------------------------
   Fondo rosa claro con la cifra oscura: 7,03:1 ✅
   El theme pone `color:#fff` en el paso activo; sobre rosa el blanco da
   1,77:1, así que la cifra tiene que ir oscura. */
.steps-dark .step-item.active .step-count,
.steps-dark .step-item.active .step-progress,
#step-1.active .step-count, #step-1.active .step-progress,
#step-2.active .step-count, #step-2.active .step-progress,
#step-3.active .step-count, #step-3.active .step-progress,
#step-4.active .step-count, #step-4.active .step-progress {
    background-color: var(--vs-rosa) !important;
}

.steps-dark .step-item.active .step-count,
#step-1.active .step-count,
#step-2.active .step-count,
#step-3.active .step-count,
#step-4.active .step-count {
    color: var(--vs-sobre-rosa) !important;         /* 7,03:1 ✅ */
    font-weight: 700;
}

/* El paso donde estás parado, un poco más marcado que los ya completados. */
.steps-dark .step-item.active.current .step-count {
    background-color: var(--vs-rosa-detalle) !important;
    color: var(--vs-negro) !important;              /* 6,92:1 ✅ */
}


/* --- 2 · LAS OPCIONES DE MÉTODO DE PAGO -------------------------------------
   El nivel 2 las emite como .is-payment .btn-outline-primary y las pinta en
   verde #198754 (líneas 1253-1266).

     reposo       texto verde sobre blanco
     activo/hover fondo verde con letra blanca

   En rosa hay que separar los dos casos, porque no es el mismo color el que
   sirve de tinta y el que sirve de fondo:

     reposo       texto ROSA TEXTO #a85a72 sobre blanco ...... 4,81:1 ✅
                  (con #d48da1 sería 2,58:1 y no se leería)
     activo/hover fondo ROSA CLARO #eeb2ca con tinta oscura ... 7,03:1 ✅
                  (con letra blanca sobre rosa sería 1,77:1)

   Se nombra .is-payment para empatarle la especificidad al nivel 2 (0,2,0);
   como el nivel 4 carga después, gana por orden. */
.is-payment .btn-outline-primary {
    color: var(--vs-rosa-texto) !important;         /* 4,81:1 ✅ */
    border-color: var(--vs-rosa-detalle) !important;
    background-color: #fff !important;
}

.is-payment .btn-outline-primary.active,
.is-payment .btn-outline-primary:hover,
.is-payment .btn-outline-primary:focus {
    color: var(--vs-sobre-rosa) !important;         /* 7,03:1 ✅ — ya no es blanca */
    border-color: var(--vs-rosa-detalle) !important;
    background-color: var(--vs-rosa) !important;
}

/* --- 2.b · EL ACORDEÓN DEL PASO 3, COMPLETO -------------------------------
   Segunda pasada (09/09). La tienda marcó que seguían en verde el
   `.accordion-header`, el `.accordion-collapse.collapse.show` y "las líneas
   del cuadro general".

   Las líneas verdes salen de acá (nubixstore.css:1592-1600):

     #payment-method .accordion-item:has(.accordion-button:not(.collapsed)) {
         border-color: rgba(25,135,84,.6) !important;    ← el recuadro
         box-shadow:   0 0 0 2px rgba(25,135,84,.12);    ← el halo
     }
     #payment-method .accordion-button:not(.collapsed) {
         background-color: rgba(25,135,84,.05);          ← el lavado del header
     }

   El borde va con !important, así que hay que responder igual. El resto no,
   pero se deja !important en todo el bloque por consistencia: son reglas de
   un componente de terceros que puede cambiar de versión a versión.

   ⚠️ EL LAVADO DEL HEADER TIENE UN TECHO, Y NO ES ESTÉTICO.
      Adentro de esa cabecera cae el nombre del método de pago, que en reposo
      va en ROSA TEXTO #a85a72. Cuanto más se tiñe el fondo, menos contraste
      le queda a ese texto:

        lavado .12 → #a85a72 da 4,51:1  ✅  ← el máximo que aguanta
        lavado .14 → #a85a72 da 4,46:1  ❌
        lavado .20 → #a85a72 da 4,33:1  ❌

      Por eso va al 12 % y no más. No se pierde nada: el método seleccionado
      ya se distingue por otras TRES señales que pone este mismo bloque —el
      borde rosa oscuro, el halo de 2 px y el filete de acento de la
      izquierda—; el lavado es la más débil de las cuatro. Y el verde original
      era .05, o sea que el rosa al .12 se nota más de lo que se notaba antes. */

/* El recuadro y el halo del método seleccionado */
#payment-method .accordion-item:has(.accordion-button:not(.collapsed)) {
    border-color: var(--vs-rosa-detalle) !important;
    box-shadow: 0 0 0 2px rgba(238, 178, 202, .38) !important;
}

/* El filete de acento de la izquierda */
#payment-method .accordion-item:has(.accordion-button:not(.collapsed))::before {
    background-color: var(--vs-rosa-detalle) !important;
}

/* La cabecera del método abierto */
#payment-method .accordion-header,
#payment-method .accordion-button:not(.collapsed) {
    background-color: rgba(238, 178, 202, .12) !important;   /* ver el techo, arriba */
    color: var(--vs-oscuro) !important;             /* 11,70:1 ✅ */
}
/* La cabecera de los métodos CERRADOS queda limpia, si no el acordeón entero
   se ve seleccionado y se pierde cuál es el método elegido. */
#payment-method .accordion-button.collapsed {
    background-color: transparent !important;
}

/* El cuerpo desplegado va en BLANCO — lo pidió la tienda en la 3ª pasada.
   La rev.2 lo había dejado con un lavado rosa al 7 %; se saca. El método
   seleccionado se sigue distinguiendo por el borde, el halo, el filete de
   acento y el lavado de la cabecera, así que el cuerpo puede ser neutro.
   Además, en blanco el texto de adentro gana contraste en vez de perderlo. */
#payment-method .accordion-collapse.show,
#payment-method .accordion-collapse.collapse.show,
#payment-method .accordion-collapse.collapse.show .accordion-body {
    background-color: #fff !important;
    border-color: var(--vs-rosa-detalle) !important;
}

/* El tilde de "método activo" */
#payment-method .ns-pay-active-check {
    color: var(--vs-rosa-texto) !important;         /* 4,81:1 sobre blanco ✅ */
}

/* ⏳ CUCARDAS DE LAS PASARELAS DE PAGO — Talo y MercadoPago
   ⚠️ NO SE PUDIERON VERIFICAR. Ninguna de las dos clases existe en los tres
      niveles de CSS (se buscó en theme.min.css, nubixstore.css y basics.css),
      así que su color viene del HTML del checkout —un style inline o un
      <style> de la propia página— y el checkout no se abre sin una sesión
      con carrito.

   Se escriben reglas DEFENSIVAS que fijan fondo Y tinta a la vez: pase lo que
   pase, no pueden quedar ilegibles. Si el color venía en un style="" inline,
   el !important igual lo pisa.

   → Si después de publicar alguna sigue verde, mandar el HTML de esa cucarda
     (como se hizo con la barra de progreso y la calculadora de envío) y se
     apunta con el selector exacto. */
.ns-talo-badge,
.ns-mp-api-badge {
    background-color: var(--vs-rosa) !important;
    color: var(--vs-sobre-rosa) !important;         /* 7,03:1 ✅ */
    border-color: var(--vs-rosa-detalle) !important;
}
.ns-talo-badge i,   .ns-talo-badge b,   .ns-talo-badge small,   .ns-talo-badge strong,
.ns-mp-api-badge i, .ns-mp-api-badge b, .ns-mp-api-badge small, .ns-mp-api-badge strong {
    color: var(--vs-sobre-rosa) !important;
}


/* --- 3 · EL BOTÓN DE PAGO Y LA BARRA DE CONFIANZA ---------------------------
   ⚠️ ESTOS DOS NO SE PIDIERON. Se incluyen porque son los dos verdes que
      quedaban en el paso 3: dejarlos sería tener un checkout rosa con dos
      manchas verdes sueltas. Si la tienda los quiere como estaban, se borra
      este bloque y nada más.

   .btn-cta lo trae el nivel 2 en verde (#198754) con hover #157347 y active
   #0f5132, siempre con letra blanca. Acá sigue el mismo criterio que
   .btn-primary del resto de la tienda: rosa claro en reposo, rosa oscuro en
   hover, tinta oscura siempre —sobre rosa el blanco daría 1,77:1. */
.btn-cta {
    background-color: var(--vs-rosa) !important;
    border-color: var(--vs-rosa-detalle) !important;
    color: var(--vs-sobre-rosa) !important;         /* 7,03:1 ✅ */
    font-weight: 700;
}
.btn-cta:hover,
.btn-cta:focus {
    background-color: var(--vs-rosa-detalle) !important;
    border-color: var(--vs-rosa-detalle) !important;
    color: var(--vs-negro) !important;              /* 6,92:1 ✅ */
}

/* Barra fija de confianza del checkout. Se le fija también la tinta: el nivel
   2 sólo le daba fondo y tamaño, así que el texto heredaba lo que hubiera. */
.ns-checkout-trust-bar {
    background: var(--vs-rosa) !important;
    color: var(--vs-sobre-rosa) !important;         /* 7,03:1 ✅ */
    border-bottom: 1px solid var(--vs-rosa-detalle) !important;
}
.ns-checkout-trust-bar a,
.ns-checkout-trust-bar b,
.ns-checkout-trust-bar strong,
.ns-checkout-trust-bar i {
    color: var(--vs-sobre-rosa) !important;
}


/* ============================================================
   ⭐ v6 — "ENVÍO RÁPIDO MAÑANA" / RETIRO EN LOCAL, A ROSA
   La tienda pidió:
     "Todo lo relacionado a 'envio rapido mañana'
      class='ns-xxs-txt ns-badge-sm ns-badge-pickup-store' también debe estar rosa"

   El nivel 3 (basics.css:459-466) lo trae en verde:
     .ns-badge-pickup-store  → color #1B5E20 sobre fondo #E8F5E9
     .ns-txt-pickup-store    → color #1B5E20

   La cucarda es SUPERFICIE (rosa claro con tinta oscura) y el texto suelto es
   TINTA (rosa texto). Son dos roles distintos y por eso llevan hexas distintos.
   ============================================================ */
.ns-badge-pickup-store {
    background-color: var(--vs-rosa) !important;
    color: var(--vs-sobre-rosa) !important;         /* 7,03:1 ✅ */
    font-weight: 700;
}

.ns-txt-pickup-store {
    color: var(--vs-rosa-texto) !important;         /* 4,81:1 sobre blanco ✅ */
}


/* ============================================================
   ⭐ v6 — SE OCULTA EL BOTÓN DE COMPARTIR POR WHATSAPP
   La tienda pidió: "en toda ficha de producto, oculta class='ns-item-share-wa'"
   Verificado el 2026-09-09: existe en la ficha publicada.

   Nota: es sólo el botón de COMPARTIR el producto. El WhatsApp de atención al
   cliente del footer y del topbar no se toca.
   ============================================================ */
.ns-item-share-wa {
    display: none !important;
}


/* ============================================================
   v6 — LA LUPITA DEL BUSCADOR
   No se pidió, pero es el último rojo suelto que quedaba: el nivel 2 la pinta
   con var(--bs-primary), y --bs-primary es el #fe696a de Cartzilla
   (theme.min.css:26). O sea que al abrir el buscador el ícono se ponía rojo.

   Se apunta el selector puntual y NO se toca --bs-primary: esa variable la usa
   medio Bootstrap (.bg-primary, .border-primary, los focus rings) y cambiarla
   tendría efectos que no se pueden verificar de a uno.
   ============================================================ */
.ns-search-toggle[aria-expanded="true"] .navbar-tool-icon {
    color: var(--vs-rosa-texto) !important;         /* 4,81:1 ✅ */
}


/* ============================================================
   BANNERS
   ============================================================ */
.ns-banner { padding: 4px !important; margin: 0; }

.ns-banner-video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    margin-bottom: 5px;
}

.ns-banner-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ns-item-video-container iframe { height: 500px; }
.is-mobile .ns-item-video-container iframe { height: 300px; }


/* ============================================================
   ITEM LIST - LISTADO DE PRODUCTOS
   ============================================================ */
.product-card .fs-sm { font-size: 1rem !important; }

.ns-item-list-title { line-height: 1.2em; min-height: 2.4em; }
.ns-item-list-title a { color: var(--vs-oscuro); }

.ns-item-list-brand-name {
    color: var(--vs-gris-texto);
    text-align: left;
    font-size: small;
    font-weight: normal;
    text-transform: capitalize;
}

.ns-item-list .star-rating { margin: 0; padding: 0; }

/* Estrellas en rosa detalle: el manual lo habilita justamente para íconos
   decorativos. Nota: contra el blanco da 2,59:1, por debajo del 3:1 que pide
   WCAG para elementos no textuales — la puntuación en número sigue estando. */
.ci-star-filled,
.ci-star-half { color: var(--vs-rosa-detalle) !important; }

/* v4: el color de .ns-free-shipping ya NO se define acá — pasó a rosa en el
   bloque "ENVÍO GRATIS" de más arriba. Lo que queda es sólo la posición. */
.ns-item-list .ns-free-shipping {
    font-weight: bold;
    position: relative;
    float: right;
    margin-top: -25px !important;
    margin-bottom: 10px !important;
}


/* ============================================================
   ITEM VIEW - FICHA DE PRODUCTO
   El tratamiento de la DESCRIPCIÓN está en el módulo del final del archivo.
   ============================================================ */
.ns-item-title,
.ns-item-title *,
.is-store-item h1 { color: var(--vs-oscuro) !important; }

/* ⭐ v5 · EL LINK DE MARCA QUE VA ARRIBA DEL H1
   La tienda pidió: "El nombre de la marca que es un link a la marca y esta
   arriba del h1 también ponerlo en rosa oscuro".

   Ojo con el diagnóstico: NO estaba estilado en ningún nivel. Se veía rojo
   porque heredaba `a { color:#fe696a }` del theme — el mismo rojo del menú.
   La regla global de links de la v5 ya lo arregla; se deja explícito acá
   porque es un elemento que la tienda mira, y así queda documentado.

   #a85a72 sobre blanco = 4,81:1 ✅  (va en <small>, o sea texto chico:
   necesita 4,5 sí o sí, y por eso no puede ser #d48da1 con 2,58). */
.ns-item-brand-link,
.ns-item-brand-link small {
    color: var(--vs-rosa-texto) !important;
    font-weight: 600;
}
.ns-item-brand-link:hover,
.ns-item-brand-link:focus {
    color: var(--vs-negro) !important;
    text-decoration: underline;
    text-decoration-color: var(--vs-rosa-detalle);
}

.ns-item-link {
    color: var(--vs-oscuro);
    text-decoration: underline;
    text-decoration-color: var(--vs-rosa-detalle);
    text-underline-offset: 3px;
}


/* ============================================================
   ITEM VIEW - GALERÍA DE IMÁGENES VERTICAL
   ============================================================ */
.is-desktop .product-gallery-thumblist {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    direction: rtl;                       /* scroll a la izquierda */
    scrollbar-width: thin;
    scrollbar-color: #bbb transparent;
}

.product-gallery-thumblist-item { border: none; }

.is-desktop .product-gallery-thumblist::-webkit-scrollbar { width: 4px; }
.is-desktop .product-gallery-thumblist::-webkit-scrollbar-track { background: transparent; }
.is-desktop .product-gallery-thumblist::-webkit-scrollbar-thumb {
    background-color: #bbb;
    border-radius: 2px;
}
.is-desktop .product-gallery-thumblist::-webkit-scrollbar-thumb:hover { background-color: #999; }

/* Restaura dirección natural a los ítems */
.is-desktop .product-gallery-thumblist > * { direction: ltr; }


/* ============================================================
   ITEM VIEW - VIDEO GALLERY
   ============================================================ */
.ns-item-video-gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.ns-item-video-gallery iframe { min-height: 500px; }


/* ============================================================
   MENÚ DESKTOP
   ============================================================ */
.is-desktop .navbar-nav li:nth-child(1) .dropdown-menu { margin-left: -250px; } /* Escalada */


/* ============================================================
   ELEMENTOS OCULTOS
   ============================================================ */
.ns-cyber-badge,
#ns-brand-marquee-c2a-btn,
.accordion-button.leaf::after,
.ci-security-check { display: none !important; }

/* FOOTER */
#ns-footer-user-register { display: none !important; }
/* ############################################################################
   ###  TIPOGRAFÍA — MONTSERRAT  ·  BLOQUE BORRABLE                         ###
   ############################################################################

   ⭐ v4 — MONTSERRAT AHORA ES GLOBAL
   Hasta la v3 Montserrat iba SÓLO en títulos y elementos de display, y el
   cuerpo de texto quedaba con la tipografía del theme Cartzilla. La tienda
   pidió lo contrario, textual:

     "Corroborar que todo el font de la tienda este en Montserrat"

   Así que ahora se aplica a TODA la tienda. Dos cambios respecto de la v3:

     1. Se pisa la variable de Bootstrap --bs-font-sans-serif, que es de donde
        el theme saca la tipografía de casi todo. Con eso solo ya cae en
        cascada sobre el 90 % del sitio, sin repetir selectores.
     2. Se sumó el peso 400 al @import de la primera línea del archivo: antes
        alcanzaba con 500/600/700 porque sólo se componían títulos; ahora
        Montserrat también compone el cuerpo y necesita el regular.

   ⚠️ POR QUÉ ADEMÁS DE LA VARIABLE HAY UNA LISTA DE SELECTORES
      Cartzilla escribe la familia a mano en varios componentes en vez de
      heredarla, y ahí la variable no llega. Los `font-family: inherit` de
      abajo son para esos casos: botones, inputs y controles de formulario,
      que en todos los navegadores arrancan con la tipografía del sistema y
      NO heredan salvo que se les diga.

   ⚠️ NOTA DE VELOCIDAD: un @import bloquea el render un instante, y ahora
      además trae un peso más. Si nubixstore permite agregar un <link> en el
      <head>, conviene moverlo ahí con un preconnect a fonts.gstatic.com.

   PARA SACARLO hay que borrar DOS cosas:
     (1) el @import de la primera línea del archivo, y
     (2) todo este bloque, hasta el separador de abajo.
   ############################################################################ */

/* 1 — LA RAÍZ. Pisar la variable de Bootstrap es lo que hace el trabajo
       grueso: el theme la usa como familia por defecto del body. */
:root,
body {
    --bs-font-sans-serif: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-body-font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body {
    font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* 2 — LOS CONTROLES DE FORMULARIO NO HEREDAN.
       button, input, select, textarea y optgroup arrancan con la tipografía
       del sistema operativo en todos los navegadores. Si no se los fuerza,
       quedan los únicos elementos fuera de Montserrat — y son justamente el
       botón "Agregar", el buscador y el newsletter. */
button,
input,
select,
optgroup,
textarea,
.btn,
.form-control,
.form-select {
    font-family: inherit;
}

/* 3 — TÍTULOS Y DISPLAY. Heredan de body, pero se les fija el peso: sin esto
       los h1–h6 del theme tomarían el 400 y perderían jerarquía. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.ns-h1,
.page-title-overlap h1,
.is-store-item h1,
.ns-item-title,
.ns-item-title * {
    font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-weight: 700;
    letter-spacing: -.01em;
}

/* 4 — Títulos de widget y del footer */
.widget-title,
#ns-footer .widget-title {
    font-weight: 600;
    letter-spacing: 0;
}

/* 5 — Menú principal y CTA */
.navbar-nav .nav-link,
#ns-nav-item-cta {
    font-weight: 600;
}

/* 6 — Mensajes rotativos del topbar */
.topbar-dark .ns-topbar-rotator-item,
.topbar-dark .topbar-link {
    font-weight: 500;
}

/* 7 — Nombres de las categorías destacadas */
#ns-featured-categories-nav .ns-featured-categories-nav-item .ns-fcat-label {
    font-weight: 700;
}

/* 8 — Títulos de las tarjetas del listado.
       letter-spacing en 0: el -.01em de los títulos grandes aprieta demasiado
       un texto de 1rem en dos renglones. */
.ns-item-list-title,
.ns-item-list-title a {
    font-weight: 600;
    letter-spacing: 0;
}

/* 9 — Precios. Los números de Montserrat son más parejos que los del theme,
       y ahora que la familia es global conviene fijarles el peso. */
.ns-price,
.ns-off-price {
    font-weight: 700;
}

/* ############################################################################
   ###  FIN DEL BLOQUE MONTSERRAT                                           ###
   ############################################################################ */


/* ============================================================================
   ▼▼▼  DE ACÁ PARA ABAJO: MÓDULO DE FICHA DE PRODUCTO  ▼▼▼
   Se pega tal cual desde
   knowledge/general/nubixstore/cartzilla/modulo-ficha-producto.css
   Lo único editado son las variables de su bloque 0, con la paleta Viasek.

   ⚠️ --nsfp-acento tiene que dar ≥4,5:1 contra el blanco porque se usa como
      texto (links, viñetas) y como fondo de cabecera de tabla con letra
      blanca. Los dos rosas de la marca dan 1,77:1 y 2,59:1, así que va el
      oscuro #2d353c (12,4:1) y el rosa queda para los fondos suaves.

   Ordena las descripciones de TODO el catálogo de una sola vez.
   Verificar con entregables/viasek/css-custom/previsualizador-ficha.html
   ============================================================================ */

/* ============================================================================
   MÓDULO — FICHA DE PRODUCTO  ·  nsDesigner · NSFP v2
   ----------------------------------------------------------------------------
   QUÉ ES
     Un bloque de CSS para pegar en el **CSS nivel 4** de la tienda
     (`custom_<tienda>_<theme>.css`, el que se carga último desde el editor CSS
     de nubixstore). Se instala UNA VEZ y mejora **todas las fichas del
     catálogo** — las 10 o las 5.000, incluidas las que nadie va a reescribir.

   POR QUÉ ASÍ, Y NO CON CLASES EN CADA FICHA
     El editor de descripción del backend no permite escribir clases: sólo da
     negrita, cursiva, subrayado, tachado, cita, viñetas, numeración,
     alineación, link, imagen, tabla, línea y el desplegable "Formato" (que
     produce h1–h6). Por eso **este CSS estiliza etiquetas semánticas**, no
     clases. El administrador usa el editor como siempre y la ficha sale
     ordenada sola.

   LA RESTRICCIÓN QUE MANDA: MERCADOLIBRE
     Las descripciones se sincronizan a MercadoLibre, que las exige en **texto
     plano**. Por eso el markup se mantiene simple y la estética la pone este
     CSS — que ML nunca ve. Misma ficha, dos salidas: linda en la tienda,
     limpia en el sync. Detalle en `knowledge/general/guia-fichas-producto.md`.

   CÓMO SE INSTALA
     1. Copiar todo el bloque al final del `custom_<tienda>_<theme>.css`.
     2. Cambiar SÓLO las variables del bloque 0, con los colores del manual de
        marca de la tienda.
     3. Sacar del nivel 4 las reglas viejas de `.ns-item-description` que este
        módulo reemplaza (`width:90%`, `ul{margin-left:50px}` y similares).
     4. Subir y bumpear el `?v=` para invalidar caché.
     5. Verificar en 2 o 3 fichas reales, en celular y en desktop.

   NOVEDADES DE LA v2 (verificadas sobre fichas publicadas de O&P Plus)
     · El contenedor pasa a `display:block` — ver bloque 1. Resuelve de una vez
       el texto suelto sin `<p>`, que dentro del flex del `.row` quedaba
       desalineado y pegado a la lista de abajo.
     · Se neutralizan las tipografías y tamaños pegados desde Word o Google
       Translate (`<span style="font-family:Arial…">`) — bloque 3.
     · Las listas ganan margen superior, para que respiren después de un texto
       suelto — bloque 4.

   NO TOCAR el resto: está pensado para funcionar con cualquier paleta.
   ============================================================================ */


/* ═══ 0 · LO ÚNICO QUE SE EDITA POR TIENDA ═══════════════════════════════════ */

:root{
  --nsfp-acento:   #2d353c;   /* VIASEK: el oscuro. Los rosas dan 1,77:1 y 2,59:1 y acá se usa como texto */
  --nsfp-titulo:   #2d353c;   /* VIASEK: títulos dentro de la descripción (12,4:1) */
  --nsfp-texto:    #3a4450;   /* VIASEK: cuerpo de texto (9,9:1) */
  --nsfp-suave:    rgba(238,178,202,.18);  /* VIASEK: el rosa de marca translúcido — filas de tabla y citas */
  --nsfp-borde:    #ebebeb;   /* VIASEK: el neutro claro de la tienda — líneas y separadores */
  --nsfp-medida:   48rem;     /* medida de línea (~70 caracteres). Ver nota abajo */
}

/* Sobre --nsfp-medida: la ficha vive en un .container de 1230 px. Sin tope, un
   párrafo sale de ~160 caracteres por línea y es ilegible. 48rem da ~70, que es
   lo cómodo para leer. Subirlo sólo si la tienda lo pide expresamente.

   ⚠️ Sobre --nsfp-acento: se usa para texto (links) y como fondo de la cabecera
   de tabla con letra blanca. Tiene que dar al menos 4.5:1 de contraste contra
   el blanco. Si el primario de la tienda es claro, va acá el secundario oscuro
   y el claro queda para adornos. */


/* ═══ 1 · EL CONTENEDOR ══════════════════════════════════════════════════════
   La plataforma lo emite como `<div class="ns-item-description row
   align-items-center">`: un `.row` de Bootstrap, o sea `display:flex`.

   Con descripciones cargadas a mano eso trae tres problemas:

   a) El texto que el editor deja SUELTO (sin `<p>`) se convierte en un ítem
      flex anónimo. No lo alcanza el padding de `.row > *`, así que queda unos
      15 px corrido a la izquierda del resto, y como entre ítems flex no
      colapsan los márgenes, se pega a la lista que viene abajo.
   b) `align-items-center` no tiene nada que centrar en una sola columna, pero
      queda activo por si algún hijo mide distinto.
   c) Los gutters negativos del `.row` desalinean el texto respecto del resto
      de la ficha.

   Pasarlo a `display:block` resuelve los tres de una. Como el nivel 4 carga
   último, alcanza sin `!important`. */

.ns-item-description{
  display:block;
  margin-left:0;
  margin-right:0;
  max-width:var(--nsfp-medida);
  color:var(--nsfp-texto);
  font-size:1rem;
  line-height:1.7;
}
.ns-item-description > *{
  padding-left:0;
  padding-right:0;
}
.ns-item-description > *:first-child{ margin-top:0 }
.ns-item-description > *:last-child{  margin-bottom:0 }

@media (min-width:992px){
  .ns-item-description{ font-size:1.0625rem; line-height:1.75 }
}


/* ═══ 2 · TÍTULOS DENTRO DE LA DESCRIPCIÓN ═══════════════════════════════════
   El desplegable "Formato" del editor produce h1–h6 y el administrador elige
   cualquiera. Por eso h2, h3 y h4 se ven CASI IGUAL: sea cual sea el que
   elija, la ficha queda bien. h1 se baja a la misma escala porque el h1 real
   de la página es el título del producto y no puede haber dos. */

.ns-item-description h1,
.ns-item-description h2,
.ns-item-description h3,
.ns-item-description h4,
.ns-item-description h5,
.ns-item-description h6{
  margin:2em 0 .65em;
  font-size:1.15rem !important;
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.01em;
  color:var(--nsfp-titulo);
}
@media (min-width:992px){
  .ns-item-description h1,
  .ns-item-description h2,
  .ns-item-description h3,
  .ns-item-description h4,
  .ns-item-description h5,
  .ns-item-description h6{ font-size:1.3rem !important }
}


/* ═══ 3 · PÁRRAFOS Y TEXTO ═══════════════════════════════════════════════════ */

.ns-item-description p{ margin:0 0 1.15em }

.ns-item-description b,
.ns-item-description strong{
  font-weight:600;
  color:var(--nsfp-titulo);
}
.ns-item-description em,
.ns-item-description i{ font-style:italic }

/* Texto pegado desde Word, Google Docs o el traductor: viene envuelto en
   `<span style="font-family:Arial…">` o con tamaños en px. Es la causa número
   uno de que dos fichas del mismo catálogo se vean con tipografías distintas.
   El CSS no puede limpiar el markup, pero sí ignorarlo. */
.ns-item-description [style*="font-family"]{ font-family:inherit !important }
.ns-item-description [style*="font-size"]{   font-size:inherit   !important }
.ns-item-description font{ font-family:inherit !important; font-size:inherit !important }
/* Si además aparecen colores pegados (los grises de Word, que no son los de la
   tienda), descomentar:
   .ns-item-description [style*="color"]{ color:inherit !important } */

/* El subrayado se lee como link y confunde. Se convierte en un resaltado. */
.ns-item-description u{
  text-decoration:none;
  background:linear-gradient(transparent 62%, color-mix(in srgb, var(--nsfp-acento) 22%, transparent) 0);
}

/* Texto justificado: en columnas angostas abre ríos de espacio. Se desactiva
   en mobile sin tocar los centrados intencionales. */
@media (max-width:767px){
  .ns-item-description [style*="justify"]{ text-align:left !important }
}


/* ═══ 4 · LISTAS ═════════════════════════════════════════════════════════════
   Es la estructura que mejor sobrevive el pasaje a texto plano, así que es la
   que se fomenta. En la práctica la mayoría de las descripciones del catálogo
   son exactamente esto: un texto de apertura y una lista de viñetas.

   El margen va arriba Y abajo a propósito: si el texto de apertura quedó
   suelto (sin `<p>`), el margen superior de la lista es lo único que separa
   una cosa de la otra. Entre dos bloques con margen, colapsan: no se suman. */

.ns-item-description ul,
.ns-item-description ol{
  margin:1.15em 0;
  padding-left:1.35rem;
}
.ns-item-description li{
  margin-bottom:.4em;
  padding-left:.15rem;
}
.ns-item-description li::marker{
  color:var(--nsfp-acento);
  font-weight:700;
}
.ns-item-description li > ul,
.ns-item-description li > ol{ margin:.45em 0 0 }
.ns-item-description li:last-child{ margin-bottom:0 }


/* ═══ 5 · CITA / DESTACADO ═══════════════════════════════════════════════════
   El botón de cita del editor es el único "destacado" disponible. Se convierte
   en una caja de atención: sirve para advertencias, garantías, la aclaración
   de medidas o el dato que decide la compra. */

.ns-item-description blockquote{
  margin:1.5em 0;
  padding:.9rem 1.1rem;
  border:0;
  border-left:3px solid var(--nsfp-acento);
  border-radius:0 .35rem .35rem 0;
  background:var(--nsfp-suave);
  font-size:1em;
  font-style:normal;
  color:var(--nsfp-titulo);
}
.ns-item-description blockquote p:last-child{ margin-bottom:0 }


/* ═══ 6 · TABLAS ═════════════════════════════════════════════════════════════
   `basics.css` (nivel 3) ya les da filas cebra y hover. Acá se corrige lo que
   molesta y se le suma la marca.
   ⚠️ Las tablas NO sobreviven bien el pasaje a texto plano: usarlas sólo para
   especificaciones, con 2 columnas (atributo | valor), y nunca para datos que
   tengan que llegar a MercadoLibre. */

.ns-item-description table{
  width:100%;
  margin:1.5em 0;
  border-collapse:collapse;
  font-size:.95em;
}
.ns-item-description table th{
  padding:.6rem .7rem !important;
  background:var(--nsfp-acento);
  color:#fff;
  font-weight:600;
  text-align:left;
  vertical-align:top;
}
.ns-item-description table td{
  padding:.55rem .7rem !important;
  border-bottom:1px solid var(--nsfp-borde);
  vertical-align:top;
  word-break:break-word;
}
.ns-item-description table tr:nth-child(odd){ background:var(--nsfp-suave) }
.ns-item-description table tr:nth-child(even){ background:transparent }
/* basics.css le pone hover gris (#ccc) y cursor:pointer a toda fila. En una
   tabla de especificaciones no hay nada que clickear: da a entender que sí. */
.ns-item-description table tr:hover{
  background:var(--nsfp-suave);
  cursor:auto;
}
/* La primera columna se lee como etiqueta. */
.ns-item-description table td:first-child{
  font-weight:600;
  color:var(--nsfp-titulo);
  width:40%;
}


/* ═══ 7 · LINKS, IMÁGENES Y SEPARADORES ══════════════════════════════════════ */

.ns-item-description a{
  color:var(--nsfp-acento);
  text-decoration:underline;
  text-underline-offset:.15em;
}
.ns-item-description a:hover{ color:var(--nsfp-titulo) }

/* ⚠️ Lo que está sólo en una imagen NO llega a MercadoLibre: la imagen
   desaparece en el pasaje a texto plano. Nunca poner ahí datos que importen. */
.ns-item-description img{
  display:block;
  max-width:100%;
  height:auto;
  margin:1.5em 0;
  border-radius:.4rem;
}

.ns-item-description hr{
  margin:2em 0;
  border:0;
  border-top:1px solid var(--nsfp-borde);
  opacity:1;
}


/* ═══ 8 · TÍTULO DEL PRODUCTO Y DESCRIPCIÓN CORTA ════════════════════════════
   Si la tienda ya define el tamaño de `.ns-item-title` en otro bloque de su
   nivel 4, borrar esta regla al instalar: no se duplica. */

.ns-item-title{
  font-size:1.5rem;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--nsfp-titulo);
}
@media (min-width:992px){
  .ns-item-title{ font-size:2rem }
}

/* La descripción corta vive en el acordeón "Información de producto": es lo
   primero que se lee, así que va un punto más grande que el cuerpo. */
.ns-item-meta-description{
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--nsfp-texto);
}


/* ═══ 9 · AJUSTE POR PRODUCTO (opcional) ═════════════════════════════════════
   Cada ficha lleva un hook propio `.ns-item-wid{ID}` en su contenedor. Sirve
   para una excepción puntual sin tocar el resto del catálogo:

   .ns-item-wid1973 .ns-item-description{ max-width:60rem }

   Usarlo poco: si hace falta seguido, el estándar está mal calibrado. */

/* ═══ FIN NSFP v2 ═══════════════════════════════════════════════════════════ */

#ns-contact-info,
.ns-footer-store-location {
display: none!important
}