/** * Single Product Logotipos-Clientes (cat172) — CSS critical (above-the-fold) * * Carga: render-blocking en . Buy box (galería + título/precio/add-to-cart * variable+WAPO) + trust chips + tipografías. Scope: body.single-product-logo-cliente * (añadido en astra-overrides.php bloque 10-quinquies). * * @since 2026-06-23 (dev_task #86) */ /* ── Tokens locales ─────────────────────────────────────────────────────────── */ body.single-product-logo-cliente { --lc-bg-dark: #161616; --lc-bg-light: #FFFFFF; --lc-bg-soft: #F4F4F4; --lc-text: #161616; --lc-text-inv: #FFFFFF; --lc-yellow: #FFED00; --lc-pink: #FF008C; --lc-magenta: #E6007E; --lc-line: rgba(22,22,22,0.10); --lc-shadow: 0 6px 30px rgba(0,0,0,0.08); --lc-font-h: 'Raleway', system-ui, sans-serif; --lc-font-b: 'Nunito', system-ui, sans-serif; } /* ── Reset Astra container (patrón letras-neon-landing-critical.css:25) ────── .ast-container es display:flex en Astra → main.lc-main como flex-item se encoge a max-content y queda pinned-left en viewports anchos. Bloque + 100%. (it1 07-jul: mismo fix que alquiler/rótulo; acompaña al dequeue de astra-theme-css en 10-quinquies-e como cinturón+tirantes.) */ body.single-product-logo-cliente .ast-container { display: block; max-width: 100%; padding-left: 0; padding-right: 0; } body.single-product-logo-cliente #content { padding: 0; margin: 0; } body.single-product-logo-cliente .lc-main { width: 100%; } /* ── Reset mínimo del scope ─────────────────────────────────────────────────── */ body.single-product-logo-cliente .lc-main { margin: 0; padding: 0; font-family: var(--lc-font-b); color: var(--lc-text); line-height: 1.55; overflow-x: hidden; } body.single-product-logo-cliente .lc-main *, body.single-product-logo-cliente .lc-main *::before, body.single-product-logo-cliente .lc-main *::after { box-sizing: border-box; } /* ── Container 1600px ───────────────────────────────────────────────────────── */ body.single-product-logo-cliente .lc-main .lc-c { width: min(1600px, 100% - 2rem); margin-inline: auto; } body.single-product-logo-cliente .lc-section { padding: clamp(2.5rem, 5vw, 4.5rem) 0; } body.single-product-logo-cliente .lc-h2 { font-family: var(--lc-font-h); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.15; margin: 0 0 .5rem; color: var(--lc-text); } body.single-product-logo-cliente .lc-section__head { text-align: center; max-width: 60ch; margin: 0 auto clamp(1.5rem, 3vw, 2.5rem); } body.single-product-logo-cliente .lc-section__sub { font-size: 1.05rem; color: #555; margin: 0; } /* ── 1. BUY BOX (oscuro) ────────────────────────────────────────────────────── */ body.single-product-logo-cliente .lc-buybox { background: var(--lc-bg-dark); color: var(--lc-text-inv); } body.single-product-logo-cliente .lc-buybox__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; } /* Galería */ body.single-product-logo-cliente .lc-gallery { min-width: 0; max-width: 100%; } body.single-product-logo-cliente .lc-buy { min-width: 0; max-width: 100%; } body.single-product-logo-cliente .lc-gallery__main { --lc-gallery-ratio: 1 / 1; --lc-zoom-x: 50%; --lc-zoom-y: 50%; position: relative; margin: 0; width: 100%; max-width: 100%; aspect-ratio: var(--lc-gallery-ratio); border-radius: 18px; overflow: hidden; background: #0d0d0d; box-shadow: 0 18px 60px rgba(0,0,0,0.45); } body.single-product-logo-cliente .lc-gallery__img { display: block; width: 100%; height: 100%; max-width: 100%; /* DevTask #120: conserva completo el asset, tanto 16:9 como 1:1. */ object-fit: contain; object-position: center; transform-origin: var(--lc-zoom-x) var(--lc-zoom-y); transition: transform .16s ease; } body.single-product-logo-cliente .lc-gallery__zoom-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: center; transform: scale(2.25); transform-origin: var(--lc-zoom-x) var(--lc-zoom-y); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .16s ease, visibility .16s ease; } body.single-product-logo-cliente .lc-gallery__main.is-zoom-active .lc-gallery__zoom-img { opacity: 1; visibility: visible; } body.single-product-logo-cliente .lc-gallery__main.is-small-zoom .lc-gallery__img { transform: scale(2.25); } body.single-product-logo-cliente .lc-gallery__thumbs { display: flex; gap: .6rem; margin-top: .8rem; flex-wrap: wrap; } body.single-product-logo-cliente .lc-gallery__thumb { border: 2px solid transparent; border-radius: 10px; padding: 0; background: #0d0d0d; cursor: pointer; overflow: hidden; width: 74px; height: 74px; transition: border-color .18s ease; } body.single-product-logo-cliente .lc-gallery__thumb.is-active, body.single-product-logo-cliente .lc-gallery__thumb:hover { border-color: var(--lc-yellow); } body.single-product-logo-cliente .lc-gallery__thumb:focus-visible, body.single-product-logo-cliente .lc-gallery__download:focus-visible { outline: 3px solid var(--lc-yellow); outline-offset: 3px; } body.single-product-logo-cliente .lc-gallery__thumb-img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; } body.single-product-logo-cliente .lc-gallery__download { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: .9rem; padding: .7rem 1rem; border: 1px solid rgba(255,255,255,.34); border-radius: 10px; color: #fff; background: rgba(255,255,255,.06); font-weight: 800; line-height: 1.25; text-align: center; text-decoration: none; transition: border-color .16s ease, background-color .16s ease, color .16s ease; } body.single-product-logo-cliente .lc-gallery__download:hover { border-color: var(--lc-yellow); background: rgba(255,237,0,.12); color: var(--lc-yellow); } @media (hover: hover) and (pointer: fine) { body.single-product-logo-cliente .lc-gallery__main { cursor: zoom-in; } } @media (hover: none), (pointer: coarse) { body.single-product-logo-cliente .lc-gallery__zoom-img { display: none; } body.single-product-logo-cliente .lc-gallery__main.is-small-zoom .lc-gallery__img { transform: none; } } @media (prefers-reduced-motion: reduce) { body.single-product-logo-cliente .lc-gallery__img, body.single-product-logo-cliente .lc-gallery__zoom-img, body.single-product-logo-cliente .lc-gallery__thumb, body.single-product-logo-cliente .lc-gallery__download { transition: none; } } /* Buy column */ body.single-product-logo-cliente .lc-buy__title { font-family: var(--lc-font-h); font-weight: 800; font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.1; margin: 0 0 .9rem; color: #fff; } body.single-product-logo-cliente .lc-buy__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem .8rem; font-size: 1.9rem; font-weight: 800; color: #fff; margin: 0 0 1.1rem; } body.single-product-logo-cliente .lc-buy__price .woocommerce-Price-amount { font-size: 1.9rem; color: var(--lc-yellow); } body.single-product-logo-cliente .lc-buy__price .woocommerce-price-suffix { font-size: .9rem; font-weight: 600; color: rgba(255,255,255,0.7); } /* it5: "IVA incluido" INLINE a la derecha del precio (baseline del flex) */ body.single-product-logo-cliente .lc-buy__price-tax { color: rgba(255,255,255,.5); font-size: .85rem; font-weight: 600; } /* it4: precio duplicado de la variación OCULTO — el hero #lc-price-main es el único precio (sincronizado en vivo con variación + add-ons WAPO) */ body.single-product-logo-cliente .lc-buy__form .woocommerce-variation-price { display: none !important; } body.single-product-logo-cliente .lc-buy__excerpt { font-size: 1rem; color: rgba(255,255,255,0.85); margin: 0 0 1.4rem; } body.single-product-logo-cliente .lc-buy__excerpt p { margin: 0 0 .7rem; } /* Add-to-cart wrapper — VARIABLE (variation form) + WAPO grid debe usar fr no % (ERR-009) */ body.single-product-logo-cliente .lc-buy__form { margin: 0 0 1.4rem; /* Tokens WAPO: neutraliza las cajas blancas nativas (patrón alquiler it1) */ --yith-wapo-price-box-colors-background: #FFF0; --yith-wapo-block-background-color: #FFF0; } /* ── Variations (pa_tamano) — dark theme (re-scope single-product.css §5). it4: layout APILADO (label arriba, select ancho completo debajo) — el tabular th/td dejaba el select descolgado a la derecha. ─────────────────── */ body.single-product-logo-cliente .lc-buy__form .variations, body.single-product-logo-cliente .lc-buy__form table.variations, body.single-product-logo-cliente .lc-buy__form .variations tbody, body.single-product-logo-cliente .lc-buy__form .variations tr, body.single-product-logo-cliente .lc-buy__form .variations th, body.single-product-logo-cliente .lc-buy__form .variations td { display: block; width: 100%; margin: 0; border: none !important; border-collapse: collapse; } body.single-product-logo-cliente .lc-buy__form .variations { margin: 0 0 .4rem; } body.single-product-logo-cliente .lc-buy__form .variations td, body.single-product-logo-cliente .lc-buy__form .variations th { border: none !important; padding: 0 !important; background: transparent !important; } body.single-product-logo-cliente .lc-buy__form .variations th.label { padding: 0 0 .55rem !important; } body.single-product-logo-cliente .lc-buy__form .variations td.value { position: relative; } body.single-product-logo-cliente .lc-buy__form .variations label, body.single-product-logo-cliente .lc-buy__form .variations th { font-family: var(--lc-font-b); font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #FFF !important; } /* it2: chip numerado UNIFORME (círculo magenta) — variación "1 Tamaño" y todos los títulos WAPO "2..5" comparten el mismo .step-number */ body.single-product-logo-cliente .lc-buy__form .step-number { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: 0 0 24px; margin-right: 10px; border-radius: 50%; background: var(--lc-magenta); color: #FFF !important; font-size: 13px; font-weight: 800; letter-spacing: 0; line-height: 1; } body.single-product-logo-cliente .lc-buy__form .variations label { display: inline-flex; align-items: center; } body.single-product-logo-cliente .lc-buy__form .variations select, body.single-product-logo-cliente .lc-buy__form select { width: 100% !important; padding: 12px 44px 12px 16px !important; border-radius: 12px !important; border: 1.5px solid rgba(255,255,255,.12) !important; background: rgba(255,255,255,.04) !important; color: #FFF !important; font-family: var(--lc-font-b) !important; font-size: 14px !important; cursor: pointer; /* it4: chevron propio — que SE VEA que es un desplegable */ appearance: none !important; -webkit-appearance: none !important; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23E6007E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; } /* "Limpiar" — discreto bajo el select, alineado derecha */ body.single-product-logo-cliente .lc-buy__form .reset_variations { display: inline-block; float: right; margin: .35rem 2px 0 0; } /* Descripción de la variación ("Ancho x alto…") — nota gris bajo el select */ body.single-product-logo-cliente .lc-buy__form .woocommerce-variation-description, body.single-product-logo-cliente .lc-buy__form .woocommerce-variation-description p { font-size: .88rem; margin: 0; } body.single-product-logo-cliente .lc-buy__form .single_variation_wrap { min-height: 0; } body.single-product-logo-cliente .lc-buy__form .variations select:focus, body.single-product-logo-cliente .lc-buy__form select:focus { border-color: rgba(230,0,126,.5) !important; outline: none !important; } body.single-product-logo-cliente .lc-buy__form .variations select option { background: #222 !important; color: #FFF !important; } body.single-product-logo-cliente .lc-buy__form .woocommerce-variation-description, body.single-product-logo-cliente .lc-buy__form .woocommerce-variation-description p, body.single-product-logo-cliente .lc-buy__form .woocommerce-variation-price .price, body.single-product-logo-cliente .lc-buy__form .woocommerce-variation-price .price *, body.single-product-logo-cliente .lc-buy__form .woocommerce-variation-availability p { color: rgba(255,255,255,.6) !important; } body.single-product-logo-cliente .lc-buy__form .reset_variations { color: rgba(255,255,255,.4) !important; font-size: 12px !important; } /* it2: cantidad oculta (1 logo por pedido) — el selector solo mete ruido. !important: WC/functions.php re-fuerzan display en .quantity de variaciones. */ body.single-product-logo-cliente .lc-buy__form .quantity { display: none !important; } body.single-product-logo-cliente .lc-buy__form .single_add_to_cart_button { background: var(--lc-yellow) !important; color: #161616 !important; font-family: var(--lc-font-h); font-weight: 800 !important; border: 0 !important; border-radius: 999px !important; width: 100%; /* ancho completo de la columna (patrón alquiler it3) */ padding: 16px 24px !important; font-size: 1.05rem !important; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; } body.single-product-logo-cliente .lc-buy__form .single_add_to_cart_button:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(255,237,0,0.3); } /* ── YITH WAPO dark fields — re-scope de single-product.css §5 (prod v2 online). Los addons de esta familia son tipo "label" (Tipo de Sujeción · Extras · Material de base · Envío): opción-cards oscuras, título uppercase con línea, precios en verde neón. Igual look que letras-neon/producto v2. ─────────────── */ /* Catch-all: TODO dentro de WAPO en blanco sobre el buy box oscuro */ body.single-product-logo-cliente .lc-buy__form .yith-wapo-container, body.single-product-logo-cliente .lc-buy__form .yith-wapo-container *, body.single-product-logo-cliente .lc-buy__form .yith-wapo-block, body.single-product-logo-cliente .lc-buy__form .yith-wapo-block * { color: #FFF; } body.single-product-logo-cliente .lc-buy__form .yith-wapo-container { display: flex; flex-direction: column; gap: .5rem; } /* Addon wrapper — reset borders/bg/padding (adiós cajas blancas) */ body.single-product-logo-cliente .lc-buy__form .yith-wapo-addon { border: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; } /* Separadores entre addons — secciones bien diferenciadas (it2) */ body.single-product-logo-cliente .lc-buy__form .yith-wapo-addon + .yith-wapo-addon, body.single-product-logo-cliente .lc-buy__form .yith-wapo-block + .yith-wapo-block { border-top: 1px solid rgba(255,255,255,.08) !important; padding-top: 1.1rem !important; margin-top: 1.1rem !important; } /* Espacio entre el bloque de variación (Tamaño) y el primer addon */ body.single-product-logo-cliente .lc-buy__form .yith-wapo-container { margin-top: .9rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.08); } /* Título de addon — grande, claro, con chip numerado + línea decorativa (it2) */ body.single-product-logo-cliente .lc-buy__form .wapo-addon-title, body.single-product-logo-cliente .lc-buy__form .addon-header h4 { font-family: var(--lc-font-b) !important; font-size: 15px !important; font-weight: 800 !important; color: #FFF !important; text-transform: uppercase !important; letter-spacing: .06em !important; padding: 0 !important; margin: 0 0 .75rem !important; background: transparent !important; border: none !important; } body.single-product-logo-cliente .lc-buy__form .wapo-addon-title { display: flex !important; align-items: center !important; gap: 0 !important; } body.single-product-logo-cliente .lc-buy__form .wapo-addon-title > span:not(.step-number):not(.required):not(.multiselect-hint) { color: #FFF !important; font-size: 15px !important; font-weight: 800 !important; } body.single-product-logo-cliente .lc-buy__form .wapo-addon-title .required { margin-left: 4px; } /* Hint "(1 o más)" — discreto en gris, sin gritar */ body.single-product-logo-cliente .lc-buy__form .wapo-addon-title .multiselect-hint { font-size: 11px !important; font-weight: 600 !important; letter-spacing: .02em !important; text-transform: none !important; color: rgba(255,255,255,.45) !important; margin-left: 8px; white-space: nowrap; } body.single-product-logo-cliente .lc-buy__form .wapo-addon-title::after { content: '' !important; flex: 1 !important; height: 1px !important; background: linear-gradient(to right, rgba(230,0,126,.5), transparent) !important; margin-left: 12px !important; } /* Asterisco requerido en rosa de marca */ body.single-product-logo-cliente .lc-buy__form .required { color: #E6007E !important; } /* Options container visible sin plegado */ body.single-product-logo-cliente .lc-buy__form .yith-wapo-addon .options-container { padding: 0 !important; } /* Grid de opciones (ERR-009: fr, nunca %) */ body.single-product-logo-cliente .lc-buy__form .yith-wapo-addon .options.grid { display: grid !important; gap: 6px !important; } body.single-product-logo-cliente .lc-buy__form .yith-wapo-addon .options.per-row-2.grid { grid-template-columns: repeat(2, 1fr) !important; } body.single-product-logo-cliente .lc-buy__form .yith-wapo-addon .options.per-row-3.grid { grid-template-columns: repeat(3, 1fr) !important; } body.single-product-logo-cliente .lc-buy__form .yith-wapo-addon .options.per-row-4.grid { grid-template-columns: repeat(4, 1fr) !important; } body.single-product-logo-cliente .lc-buy__form .yith-wapo-addon .options.per-row-5.grid { grid-template-columns: repeat(5, 1fr) !important; } body.single-product-logo-cliente .lc-buy__form .yith-wapo-addon .options.per-row-6.grid { grid-template-columns: repeat(6, 1fr) !important; } /* Fallback grids legacy */ body.single-product-logo-cliente .lc-buy__form .yith-wapo-group .yith-wapo-addon-image-selector, body.single-product-logo-cliente .lc-buy__form .yith-wapo-addon-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; } /* Opción-card oscura */ body.single-product-logo-cliente .lc-buy__form .yith-wapo-option { border: 1.5px solid rgba(255,255,255,.08) !important; border-radius: 12px !important; padding: 0 !important; margin: 0 !important; background: rgba(255,255,255,.02) !important; cursor: pointer; transition: all .3s ease; overflow: visible !important; position: relative; } body.single-product-logo-cliente .lc-buy__form .yith-wapo-option.selected { background: rgba(230,0,126,.08) !important; border-color: rgba(230,0,126,.5) !important; box-shadow: 0 0 16px rgba(230,0,126,.12); } body.single-product-logo-cliente .lc-buy__form .yith-wapo-option:hover:not(.selected) { border-color: rgba(255,255,255,.2) !important; background: rgba(255,255,255,.04) !important; } body.single-product-logo-cliente .lc-buy__form .yith-wapo-option .label_container, body.single-product-logo-cliente .lc-buy__form .yith-wapo-option .label { padding: 0 !important; margin: 0 !important; } body.single-product-logo-cliente .lc-buy__form .yith-wapo-option .label-container-display { padding: 10px 12px !important; } body.single-product-logo-cliente .lc-buy__form .yith-wapo-option .label_price label, body.single-product-logo-cliente .lc-buy__form .yith-wapo-option .label label { color: #FFF !important; font-family: var(--lc-font-b) !important; font-size: 14px !important; font-weight: 700 !important; cursor: pointer !important; } /* Precios de opciones en verde neón (patrón v2) */ body.single-product-logo-cliente .lc-buy__form .yith-wapo-option .label_price .price, body.single-product-logo-cliente .lc-buy__form .yith-wapo-option .price, body.single-product-logo-cliente .lc-buy__form .yith-wapo-option .woocommerce-Price-amount { color: #00FF79 !important; font-weight: 600 !important; font-size: 13px !important; } /* Tooltip (i) — gris discreto (it2 QA Kevin: el magenta llamaba demasiado) */ body.single-product-logo-cliente .lc-buy__form .wapo-i { background: rgba(255,255,255,.14) !important; border: 1.5px solid transparent !important; color: rgba(255,255,255,.6) !important; } /* Inputs sueltos WAPO (text/textarea) — dark */ body.single-product-logo-cliente .lc-buy__form .yith-wapo-container input[type="text"], body.single-product-logo-cliente .lc-buy__form .yith-wapo-container textarea { width: 100%; padding: 12px 16px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #FFF; font: inherit; } body.single-product-logo-cliente .lc-buy__form .yith-wapo-container input[type="text"]:focus, body.single-product-logo-cliente .lc-buy__form .yith-wapo-container textarea:focus { border-color: rgba(230,0,126,.5); outline: none; } /* it2 QA Kevin: tabla "Total del pedido" OCULTA — el precio ya se ve arriba y en las propias opciones (+X €). Patrón R9 del producto v2. */ body.single-product-logo-cliente .lc-buy__form table.only_final, body.single-product-logo-cliente .lc-buy__form .wapo-total-options, body.single-product-logo-cliente .lc-buy__form .wapo-total-order { display: none !important; } body.single-product-logo-cliente .lc-buy__form .min-error-message { color: #FFED00; } /* ── Delivery notices + trust badges + payments — re-scope producto v2 (single-product.css §6) — it2 QA Kevin ─────────────────────────────────── */ body.single-product-logo-cliente .sp__delivery-notices { display: flex; flex-direction: column; gap: 6px; margin: 1rem 0 0; } body.single-product-logo-cliente .sp__delivery-notice { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; font-size: 13px; } body.single-product-logo-cliente .sp__delivery-notice p { margin: 0; } body.single-product-logo-cliente .sp__delivery-notice svg { flex-shrink: 0; } body.single-product-logo-cliente .sp__delivery-notice--standard { background: rgba(0,255,121,.04); border: 1px solid rgba(0,255,121,.12); } body.single-product-logo-cliente .sp__delivery-notice--standard svg { color: #00FF79 !important; } body.single-product-logo-cliente .sp__delivery-notice--standard p { color: rgba(255,255,255,.5) !important; } body.single-product-logo-cliente .sp__delivery-notice--standard strong { color: #00FF79 !important; } body.single-product-logo-cliente .sp__delivery-notice--express { background: rgba(255,237,0,.04); border: 1px solid rgba(255,237,0,.12); } body.single-product-logo-cliente .sp__delivery-notice--express svg { color: #FFED00 !important; } body.single-product-logo-cliente .sp__delivery-notice--express p { color: rgba(255,255,255,.5) !important; } body.single-product-logo-cliente .sp__delivery-notice--express strong { color: #FFED00 !important; } body.single-product-logo-cliente .sp__trust-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .8rem 0 0; } @media (max-width: 640px) { body.single-product-logo-cliente .sp__trust-badges { grid-template-columns: 1fr; } } body.single-product-logo-cliente .sp__trust-badge { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.6) !important; } body.single-product-logo-cliente .sp__trust-badge--mg { background: rgba(230,0,126,.03); border: 1px solid rgba(230,0,126,.1); } body.single-product-logo-cliente .sp__trust-badge--mg svg { color: #E6007E !important; filter: drop-shadow(0 0 4px rgba(230,0,126,.6)); } body.single-product-logo-cliente .sp__trust-badge--vn { background: rgba(0,255,121,.03); border: 1px solid rgba(0,255,121,.1); } body.single-product-logo-cliente .sp__trust-badge--vn svg { color: #00FF79 !important; filter: drop-shadow(0 0 4px rgba(0,255,121,.6)); } body.single-product-logo-cliente .sp__trust-badge--am { background: rgba(255,237,0,.03); border: 1px solid rgba(255,237,0,.1); } body.single-product-logo-cliente .sp__trust-badge--am svg { color: #FFED00 !important; filter: drop-shadow(0 0 4px rgba(255,237,0,.6)); } body.single-product-logo-cliente .sp__payments { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 1rem 0 0; } body.single-product-logo-cliente .sp__payments-secure { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.3) !important; font-size: 11px; } body.single-product-logo-cliente .sp__payments-icons { display: flex; align-items: center; gap: 8px; } body.single-product-logo-cliente .sp__pay-icon { font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 6px; transition: all .3s ease; } body.single-product-logo-cliente .sp__pay-icon:hover { transform: scale(1.05); } /* it3 QA Kevin: Visa en blanco — el azul corporativo no se lee sobre dark */ body.single-product-logo-cliente .sp__pay-icon--visa { color: #FFF !important; background: rgba(26,31,113,.25); border: 1px solid rgba(255,255,255,.25); } body.single-product-logo-cliente .sp__pay-icon--mc { color: #FF5F00 !important; background: rgba(255,95,0,.08); border: 1px solid rgba(255,95,0,.2); } body.single-product-logo-cliente .sp__pay-icon--paypal { color: #00CFFF !important; background: rgba(0,207,255,.08); border: 1px solid rgba(0,207,255,.2); } body.single-product-logo-cliente .sp__pay-icon--bizum { color: #00FF79 !important; background: rgba(0,255,121,.08); border: 1px solid rgba(0,255,121,.2); } @media (max-width: 820px) { body.single-product-logo-cliente .lc-buybox__inner { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 767px) { body.single-product-logo-cliente .lc-buy__form .yith-wapo-addon .options.grid { grid-template-columns: repeat(2, 1fr) !important; } }