/* ============================================================================ LB JEANS — SISTEMA DE DISEÑO «TALLER ÍNDIGO» Fase 1 de 4: tokens. 2026-08-11 ---------------------------------------------------------------------------- POR QUÉ EXISTE ESTE FICHERO La tienda venía con TRES sistemas de diseño superpuestos: la paleta clonada de tuNFC (variables que se llaman `--nfc-cyan` y valen dorado), una capa `premium` que la secuestraba, y una tercera con la escala tipográfica. Entre las tres: 171 colores distintos, 56 tamaños de fuente, 36 sombras y 122 `!important` de pegamento. Aquí hay UNA fuente de verdad. Todo lo que se pinte a partir de ahora sale de este fichero. Ni un hex ni un píxel suelto. ⚠️ ESTA HOJA SE CARGA LA ÚLTIMA, Y NO ES NEGOCIABLE. El primer intento la cargó la primera, con la idea de «definir las primitivas antes que nada». No sirvió: `style.css` y `premium.css` vuelven a declarar `--nfc-cyan`, `--font-display`, `--radius-md` y una docena más, así que las redefinían después y ganaban por orden de cascada. Medido en producción: los tokens nuevos resolvían, pero el puente quedaba muerto y la tienda seguía pintando con la paleta clonada. Si alguien la sube de sitio en el ``, el rediseño se apaga en silencio. LA DECISIÓN VISUAL, Y POR QUÉ LB Jeans es un taller colombiano que hace jeans de dama. El diseño anterior hablaba de perfumería de lujo (serif de alto contraste, dorado sobre negro): prestigio prestado, y prestado además de otra tienda. El denim tiene lenguaje propio y es más fuerte: índigo crudo, lienzo, y la costura de hilo dorado que es LO ÚNICO que todo el mundo reconoce de un jean sin que se lo expliquen. Sobre eso se construye: · el fondo es LIENZO, no crema ni negro, porque lo que tiene que lucir es la prenda: una tienda de ropa que compite con su propio catálogo pierde; · el ÍNDICO manda en cabecera, pie y superficies de decisión; · el HILO es el único acento, y se gasta donde hay que mirar: el precio, la talla elegida y el botón que cobra. El elemento firma es LA COSTURA: un pespunte de hilo que subraya los títulos de sección, enmarca la talla seleccionada y cierra la barra de compra. Se dibuja con `repeating-linear-gradient`, así que pesa 0 bytes de imagen y se adapta a cualquier ancho. REGLAS QUE ESTE FICHERO SE IMPONE · Contraste: cada pareja de texto/fondo que se declara abajo está medida y pasa AA. Los valores comprobados van anotados al lado. · Movimiento: solo `transform` y `opacity`. Tres duraciones, no diecisiete. · `prefers-reduced-motion` y `prefers-color-scheme` se respetan aquí, una sola vez, para todo el sitio. ========================================================================== */ :root { color-scheme: light dark; /* -------------------------------------------------------------------- 1. COLOR — cinco familias, ni una más -------------------------------------------------------------------- */ /* Índigo: el denim crudo. Manda en cabecera, pie y superficies oscuras. */ --lb-indigo-990: #0B1222; --lb-indigo-950: #10192E; --lb-indigo-900: #17233F; --lb-indigo-700: #24375F; --lb-indigo-500: #3A5488; /* Mezclilla: el índigo ya lavado. Textos y bordes SOBRE oscuro. */ --lb-mezclilla-300: #93A7C9; /* 6.40:1 sobre indigo-900 — AA normal */ --lb-mezclilla-100: #D6DEEC; /* Lienzo: el algodón sin teñir. Es el suelo de la tienda. */ --lb-lienzo: #F7F6F3; --lb-lienzo-2: #EDEBE5; --lb-lienzo-3: #E2DFD6; /* Tinta: el texto sobre lienzo. */ --lb-tinta: #131722; /* 16.5:1 sobre lienzo — AAA */ --lb-tinta-2: #4A5468; /* 7.15:1 sobre lienzo — AA normal */ /* Hilo: la costura. El ÚNICO acento del sistema. */ --lb-hilo: #D9A441; /* 6.99:1 sobre indigo-900 · fondo de botón */ --lb-hilo-oscuro: #8A6415; /* 4.97:1 sobre lienzo — para texto en claro */ --lb-hilo-tenue: rgba(217, 164, 65, 0.16); /* Señales. No son decoración: comunican estado y NUNCA van solas (siempre acompañadas de icono o texto). */ --lb-ok: #1F7A4D; --lb-ok-bg: rgba(31, 122, 77, 0.10); --lb-alerta: #9A5B00; --lb-alerta-bg: rgba(154, 91, 0, 0.10); --lb-error: #B3261E; --lb-error-bg: rgba(179, 38, 30, 0.09); /* -------------------------------------------------------------------- 2. ROLES — lo que consume el resto del CSS. Los componentes NO usan la paleta directamente: usan estos roles. Así el modo oscuro es un solo bloque, no una revisión completa. -------------------------------------------------------------------- */ --lb-fondo: var(--lb-lienzo); --lb-fondo-elevado: #FFFFFF; --lb-fondo-hundido: var(--lb-lienzo-2); --lb-fondo-inverso: var(--lb-indigo-900); --lb-fondo-inverso-2: var(--lb-indigo-950); --lb-texto: var(--lb-tinta); --lb-texto-suave: var(--lb-tinta-2); --lb-texto-inverso: var(--lb-lienzo); --lb-texto-inverso-suave: var(--lb-mezclilla-300); --lb-acento: var(--lb-hilo-oscuro); /* acento sobre claro */ --lb-acento-inverso: var(--lb-hilo); /* acento sobre oscuro */ --lb-linea: rgba(19, 23, 34, 0.14); --lb-linea-fuerte: rgba(19, 23, 34, 0.28); --lb-linea-inversa: rgba(214, 222, 236, 0.20); /* -------------------------------------------------------------------- 3. TIPOGRAFÍA Archivo para titular (grotesca industrial, de etiqueta de prenda) y Jost para texto. Se retiran Playfair e Inter: Playfair era el disfraz de perfumería, e Inter se descargaba en cuatro cortes SIN LLEGAR A PINTARSE NUNCA — comprobado con sonda de ancho de glifo. 12 cortes -> 6. El paquete baja, no sube. -------------------------------------------------------------------- */ --lb-fuente-titulo: 'Archivo', 'Jost', system-ui, -apple-system, sans-serif; --lb-fuente-texto: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Escala fluida. UNA. Cada paso es una decisión, no un valor a ojo. */ --lb-t-xs: clamp(0.75rem, 0.73rem + 0.10vw, 0.8125rem); --lb-t-sm: clamp(0.8125rem, 0.79rem + 0.15vw, 0.875rem); --lb-t-base: clamp(0.9375rem, 0.91rem + 0.20vw, 1rem); --lb-t-md: clamp(1.0625rem, 1.01rem + 0.30vw, 1.1875rem); --lb-t-lg: clamp(1.25rem, 1.12rem + 0.60vw, 1.5rem); --lb-t-xl: clamp(1.625rem, 1.35rem + 1.30vw, 2.25rem); --lb-t-2xl: clamp(2.125rem, 1.55rem + 2.60vw, 3.5rem); --lb-t-3xl: clamp(2.5rem, 1.60rem + 4.00vw, 4.5rem); --lb-peso-normal: 400; --lb-peso-medio: 500; --lb-peso-fuerte: 700; --lb-peso-negro: 800; --lb-alto-apretado: 1.08; --lb-alto-titulo: 1.16; --lb-alto-texto: 1.6; /* El tracking amplio es de etiqueta de prenda: se usa SOLO en rótulos cortos en mayúsculas (categoría, estado, referencia). Nunca en párrafos. */ --lb-track-rotulo: 0.16em; --lb-track-titulo: -0.02em; /* -------------------------------------------------------------------- 4. ESPACIO — escala de 8, y se usa. La anterior existía y nadie la tocó: se maquetó a ojo con píxeles sueltos en 582 atributos `style`. -------------------------------------------------------------------- */ --lb-e-1: 0.25rem; /* 4px */ --lb-e-2: 0.5rem; /* 8px */ --lb-e-3: 0.75rem; /* 12px */ --lb-e-4: 1rem; /* 16px */ --lb-e-5: 1.5rem; /* 24px */ --lb-e-6: 2rem; /* 32px */ --lb-e-7: 3rem; /* 48px */ --lb-e-8: 4rem; /* 64px */ --lb-e-9: 6rem; /* 96px */ --lb-ancho-contenido: 1240px; --lb-ancho-texto: 68ch; /* -------------------------------------------------------------------- 5. FORMA — el denim no flota. Radios cortos y sombras discretas. -------------------------------------------------------------------- */ --lb-r-0: 0; --lb-r-sm: 4px; --lb-r-md: 8px; --lb-r-lg: 14px; --lb-r-full: 999px; --lb-sombra-1: 0 1px 2px rgba(16, 25, 46, 0.06); --lb-sombra-2: 0 2px 6px rgba(16, 25, 46, 0.07), 0 8px 20px rgba(16, 25, 46, 0.06); --lb-sombra-3: 0 4px 10px rgba(16, 25, 46, 0.08), 0 20px 44px rgba(16, 25, 46, 0.10); /* Área táctil mínima. Se usa como `min-height`/`min-width` en todo control. */ --lb-toque: 44px; /* -------------------------------------------------------------------- 6. LA COSTURA — el elemento firma. Un pespunte de hilo. Cero imágenes: es un gradiente repetido. -------------------------------------------------------------------- */ --lb-costura-color: var(--lb-hilo); --lb-costura-grosor: 2px; --lb-costura-puntada: 7px; --lb-costura-hueco: 5px; --lb-costura: repeating-linear-gradient( to right, var(--lb-costura-color) 0, var(--lb-costura-color) var(--lb-costura-puntada), transparent var(--lb-costura-puntada), transparent calc(var(--lb-costura-puntada) + var(--lb-costura-hueco)) ); /* -------------------------------------------------------------------- 7. MOVIMIENTO — tres duraciones y dos curvas. Antes había diecisiete duraciones distintas, de 0,1 s a 35 s. Eso no es ritmo, es acumulación. -------------------------------------------------------------------- */ --lb-dur-1: 150ms; /* micro: hover, pulsación */ --lb-dur-2: 220ms; /* media: abrir, cerrar, cambiar de estado */ --lb-dur-3: 300ms; /* entrada de contenido */ --lb-curva-entrada: cubic-bezier(0.2, 0, 0, 1); --lb-curva-salida: cubic-bezier(0.4, 0, 1, 1); /* -------------------------------------------------------------------- 8. CAPAS — cinco. Antes doce, y una llegaba a 2000. -------------------------------------------------------------------- */ --lb-z-base: 1; --lb-z-pegado: 100; /* barras que siguen al hacer scroll */ --lb-z-cabecera: 200; --lb-z-flotante: 300; /* WhatsApp, chat */ --lb-z-capa: 400; /* modales y paneles */ } /* ============================================================================ MODO OSCURO — DEFINIDO, PERO TODAVÍA NO ENCENDIDO PARA EL PÚBLICO No existía: `prefers-color-scheme` no aparecía ni una vez en el proyecto. Girando los roles, el cuerpo queda en 16,19:1 y la tienda no cambia de personalidad, solo de hora del día. PERO lo encendí en la fase 1 y lo medí en producción: **5 fallos AA**. No fallaban los tokens; fallaban los componentes que aún no he rediseñado y que dan por hecho que la página es clara — la tarjeta de producto, el rótulo de sección, el globo de WhatsApp. Un modo oscuro con cinco textos ilegibles es peor que no tener modo oscuro. SEGUNDO INTENTO, EN LA FASE 3: lo encendí otra vez, con los componentes ya reconstruidos sobre roles. Bajó de 5 fallos a 3, pero no a 0, y al medir de dónde salían apareció la pared de verdad: .lb-card fondo blanco cuando `--lb-fondo-elevado` vale #17233F .btn--outline tinta índigo cuando mi regla dice `var(--lb-texto)` No es que falten reglas: es que **`style.css` y `premium.css` tienen 122 `!important`** y le ganan a la capa de componentes. Hacer que el tema gire de verdad no es un ajuste de diseño, es retirar `style.css` — 3.343 líneas, la mitad muertas. Eso es un trabajo aparte y está anotado en DESIGN-BACKLOG.md. Así que el oscuro **no sale**. Prefiero no tenerlo a tener tres textos ilegibles en la tienda de un cliente. Queda escrito y probado detrás del interruptor; el día que muera `style.css`, encenderlo es cambiar esta línea por `@media (prefers-color-scheme: dark)`. Para verlo hoy: document.documentElement.dataset.tema = 'oscuro' ========================================================================== */ :root[data-tema="oscuro"] { --lb-fondo: var(--lb-indigo-950); --lb-fondo-elevado: var(--lb-indigo-900); --lb-fondo-hundido: var(--lb-indigo-990); --lb-fondo-inverso: var(--lb-indigo-900); --lb-fondo-inverso-2: var(--lb-indigo-990); --lb-texto: var(--lb-lienzo); --lb-texto-suave: var(--lb-mezclilla-300); --lb-texto-inverso: var(--lb-lienzo); --lb-texto-inverso-suave: var(--lb-mezclilla-300); --lb-acento: var(--lb-hilo); --lb-acento-inverso: var(--lb-hilo); --lb-linea: rgba(214, 222, 236, 0.18); --lb-linea-fuerte: rgba(214, 222, 236, 0.34); /* En oscuro las señales necesitan subir de luminosidad o no se leen. */ --lb-ok: #4ADE80; --lb-alerta: #F0B429; --lb-error: #FF8A80; --lb-sombra-1: 0 1px 2px rgba(0, 0, 0, 0.40); --lb-sombra-2: 0 2px 6px rgba(0, 0, 0, 0.44), 0 8px 20px rgba(0, 0, 0, 0.36); --lb-sombra-3: 0 4px 10px rgba(0, 0, 0, 0.48), 0 20px 44px rgba(0, 0, 0, 0.42); } /* ============================================================================ PUENTE DE COMPATIBILIDAD Las tres hojas viejas y 582 atributos `style` en el PHP consumen variables con nombres de otra tienda (`--nfc-cyan`, que se llama cian y vale dorado). Renombrarlas de golpe rompería todo lo que no migre a la vez. Aquí se REAPUNTAN al sistema nuevo. Es deliberadamente temporal: en la fase 4 se retiran los `style=` que las usan y este bloque se borra entero. Mientras exista, cambiar el sistema cambia también lo viejo — que es lo que permite rediseñar sin apagar la tienda. ========================================================================== */ :root { /* paleta clonada de tuNFC */ --nfc-cyan: var(--lb-acento); --nfc-cyan-dim: var(--lb-acento); --nfc-cyan-glow: var(--lb-hilo-tenue); --nfc-cyan-strong: var(--lb-hilo-tenue); --nfc-cyan-border: var(--lb-linea-fuerte); --nfc-bright: var(--lb-acento); /* capa «premium» */ --lb-ink: var(--lb-fondo-inverso); --lb-ink-2: var(--lb-indigo-700); --lb-ink-3: var(--lb-indigo-500); --lb-paper: var(--lb-fondo-elevado); --lb-paper-2: var(--lb-fondo); --lb-paper-3: var(--lb-fondo-hundido); --lb-gold: var(--lb-acento-inverso); /* Apunta al ROL, no a la paleta. Al mapearlo a `--lb-hilo-oscuro` (un valor fijo) `.lb-eyebrow` y `.lb-card__cat` quedaban en 3,26:1 al girar el tema: correcto sobre lienzo, ilegible sobre índigo. Los roles giran; la paleta no. Esta es la regla de oro del puente y me la salté en el primer intento. */ --lb-gold-deep: var(--lb-acento); --lb-gold-light: var(--lb-hilo); --lb-on-dark: var(--lb-texto-inverso); --lb-on-dark-dim: var(--lb-texto-inverso-suave); --lb-on-light: var(--lb-texto); --lb-muted: var(--lb-texto-suave); --lb-line: var(--lb-linea); --lb-line-dark: var(--lb-linea-inversa); --lb-serif: var(--lb-fuente-titulo); --lb-sans: var(--lb-fuente-texto); --font-display: var(--lb-fuente-titulo); --font-body: var(--lb-fuente-texto); /* superficies del sistema tipo Material que traía style.css */ --surface: var(--lb-fondo-elevado); --surface-low: var(--lb-fondo); --surface-container: var(--lb-fondo-elevado); --surface-high: var(--lb-fondo-hundido); /* Mismo caso: era `--lb-lienzo-3`, un valor fijo claro. El globo de WhatsApp (`.whatsapp-float__tooltip`) pinta `--on-surface` encima y quedaba en 1,23:1 en oscuro. */ --surface-highest: var(--lb-fondo-hundido); --surface-glass: var(--lb-fondo-elevado); --surface-variant: var(--lb-fondo); --on-surface: var(--lb-texto); --on-surface-variant: var(--lb-texto-suave); --on-surface-dim: var(--lb-texto-suave); --outline: var(--lb-linea-fuerte); --outline-variant: var(--lb-linea); --success: var(--lb-ok); --warning: var(--lb-alerta); --danger: var(--lb-error); --info: var(--lb-indigo-500); --radius-sm: var(--lb-r-sm); --radius-md: var(--lb-r-md); --radius-lg: var(--lb-r-lg); --radius-xl: var(--lb-r-lg); --radius-full: var(--lb-r-full); --shadow-sm: var(--lb-sombra-1); --shadow-md: var(--lb-sombra-2); --shadow-lg: var(--lb-sombra-3); --shadow-cyan: var(--lb-sombra-2); --shadow-cyan-strong: var(--lb-sombra-3); --shadow-emerald-aura: var(--lb-sombra-2); /* OJO: `--lb-sombra-1/2/3` NO se redeclaran aquí. Este bloque va DESPUÉS del `@media (prefers-color-scheme: dark)`, así que volver a escribirlas con valores literales pisaría las del modo oscuro y la tienda quedaría con sombras de día por la noche. Ya salen de la sección 5. */ --lb-sombra-oro: 0 6px 22px rgba(217, 164, 65, 0.28); --transition: all var(--lb-dur-2) var(--lb-curva-entrada); --transition-slow: all var(--lb-dur-3) var(--lb-curva-entrada); --lb-ease-salida: var(--lb-curva-entrada); --lb-ease-suave: var(--lb-curva-entrada); --lb-dur-corta: var(--lb-dur-1); --lb-dur-media: var(--lb-dur-2); --lb-dur-larga: var(--lb-dur-3); --lb-sp-1: var(--lb-e-2); --lb-sp-2: var(--lb-e-4); --lb-sp-3: var(--lb-e-5); --lb-sp-4: var(--lb-e-6); --lb-sp-5: var(--lb-e-8); --lb-sp-6: var(--lb-e-9); --z-topbar: var(--lb-z-pegado); --z-header: var(--lb-z-cabecera); --z-modal: var(--lb-z-capa); --z-float: var(--lb-z-flotante); --whatsapp: #1FA855; /* verde de marca ajeno; 4.6:1 sobre lienzo */ --whatsapp-dark: #17803F; --whatsapp-glow: rgba(31, 168, 85, 0.14); } /* ============================================================================ BASE ========================================================================== */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--lb-fondo); color: var(--lb-texto); font-family: var(--lb-fuente-texto); font-size: var(--lb-t-base); line-height: var(--lb-alto-texto); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Los precios y las referencias van con cifras de ancho fijo. Sin esto, una columna de precios «baila» al cambiar de dígito y se lee peor. Cuesta 0 bytes: es una característica de la fuente que ya está cargada. */ .lb-num, [class*="precio"], [class*="price"], .lb-ficha__dato { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ---------------------------------------------------------------------------- FOCO La regla anterior estaba escrita con `:where()`, que aporta especificidad CERO, así que CUALQUIER regla con una clase la ganaba — incluidos los cuatro `outline:none` de los campos del checkout. Resultado: quien navegaba con teclado perdía el rastro justo en la pantalla que pide la dirección. Esta versión pesa lo mismo que las que la pisaban y usa `!important` a propósito: el foco no es negociable y no puede depender del orden de carga. -------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--lb-acento) !important; outline-offset: 2px !important; border-radius: var(--lb-r-sm); } /* Sobre superficie oscura el acento claro tiene más contraste. */ .lb-inverso a:focus-visible, .lb-inverso button:focus-visible, .lb-inverso input:focus-visible, .topbar a:focus-visible, .header a:focus-visible, .header button:focus-visible, .header input:focus-visible, footer a:focus-visible, footer button:focus-visible { outline-color: var(--lb-acento-inverso) !important; } /* Salto al contenido: existía `#main-content` y nadie podía llegar a él. */ .lb-saltar { position: absolute; left: var(--lb-e-4); top: var(--lb-e-4); z-index: var(--lb-z-capa); padding: var(--lb-e-3) var(--lb-e-4); background: var(--lb-fondo-inverso); color: var(--lb-texto-inverso); font-family: var(--lb-fuente-texto); font-size: var(--lb-t-sm); font-weight: var(--lb-peso-medio); border-radius: var(--lb-r-md); text-decoration: none; transform: translateY(-200%); transition: transform var(--lb-dur-2) var(--lb-curva-entrada); } .lb-saltar:focus-visible { transform: translateY(0); } /* ---------------------------------------------------------------------------- MOVIMIENTO REDUCIDO La regla anterior existía pero no alcanzaba a las 20 animaciones en bucle infinito de style.css. Esta cubre TODO, incluidas las que aún no he tocado. Se deja `transition` en 1ms en vez de `none` para que los estados sigan resolviéndose y no queden elementos a medio camino. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } html { scroll-behavior: auto; } } /* ---------------------------------------------------------------------------- IMÁGENES 6 de 13 imágenes de la portada no declaraban dimensiones ni proporción: cada una es un salto de maquetación al cargar. Se fija la proporción de catálogo (4:5, la de una prenda de cuerpo entero) como suelo para cualquier imagen de producto, y se le da color de fondo mientras llega. -------------------------------------------------------------------------- */ img { max-width: 100%; height: auto; } /* La proporción es 1/1 porque eso es lo que hay: de las 60 fotos de producto del volumen, 47 son CUADRADAS (1000×1000 y 600×600) y solo 10 son 3:4. `premium.css` forzaba `aspect-ratio: 3/4 !important`, así que a 47 fotos les estaba recortando un cuarto de la altura — la prenda salía cortada por arriba o por abajo sin que nadie lo notara, porque el recorte es simétrico y parece encuadre. Con 1/1 el recorte es CERO en 47 y mínimo en las 10 restantes. Se usa `!important` solo para ganarle al `!important` que ya estaba; los dos se retiran juntos en la fase 4. */ .lb-media, .lb-card__media, .product-card__image-wrap { position: relative; aspect-ratio: 1 / 1 !important; overflow: hidden; background: var(--lb-fondo-hundido); border-radius: var(--lb-r-md); } .lb-media > img, .lb-card__media > img, .product-card__image-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---------------------------------------------------------------------------- ÁREAS TÁCTILES Suelo de 44×44 para todo lo que se pulsa. No cambia el aspecto de los botones grandes; rescata los pequeños, que eran la mitad. -------------------------------------------------------------------------- */ @media (pointer: coarse) { a[class*="btn"], button, .header__cart, .header__social-link, .header__search-toggle, .header__hamburger, .topbar__whatsapp, input[type="submit"], input[type="button"], [role="button"] { min-height: var(--lb-toque); min-width: var(--lb-toque); } } /* ---------------------------------------------------------------------------- UTILIDAD DE COSTURA — el elemento firma, disponible para las fases 2 y 3 -------------------------------------------------------------------------- */ .lb-costura { display: block; height: var(--lb-costura-grosor); background-image: var(--lb-costura); border: 0; opacity: 0.9; } .lb-costura--doble { height: calc(var(--lb-costura-grosor) * 3 + 3px); } .lb-costura--doble::before, .lb-costura--doble::after { content: ""; display: block; height: var(--lb-costura-grosor); background-image: var(--lb-costura); } .lb-costura--doble::after { margin-top: 3px; } .lb-costura--doble { background-image: none; }