/* ============================================================================= DS9 v2 — Sistema visual de Tienda de Bienestar sobre classic de PS9. v1 replicaba la identidad del tema viejo (Ecco Bella). v2 la moderniza: misma marca —los verdes y Montserrat salen de los 122 tokens reales del tema anterior— pero con lenguaje actual: profundidad suave, radios generosos, micro-interacciones, jerarquía tipográfica clara y aire. verde principal #5ca60d verde hover #6cc909 verde de marca #148d00 tinta #111827 gris texto #6b7280 bordes #e5e7eb rojo ofertas #e5484d fondo suave #f7f8f7 ========================================================================== */ @font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } :root { --ds-verde: #5ca60d; --ds-verde-hover: #6cc909; --ds-verde-marca: #148d00; --ds-verde-suave: #eef6e5; --ds-tinta: #111827; --ds-gris: #6b7280; --ds-borde: #e5e7eb; --ds-rojo: #e5484d; --ds-fondo-suave: #f7f8f7; --ds-radio: 10px; --ds-radio-chico: 8px; --ds-sombra-1: 0 1px 2px rgba(17,24,39,.06); --ds-sombra-2: 0 8px 24px rgba(17,24,39,.09); --ds-transicion: .18s cubic-bezier(.4,0,.2,1); } /* --- Base ------------------------------------------------------------------ */ body { font-family: 'Montserrat', -apple-system, sans-serif; font-size: 14.5px; line-height: 1.65; color: var(--ds-tinta); background: #fff; -webkit-font-smoothing: antialiased; } h1, h2 { font-weight: 700; color: var(--ds-tinta); letter-spacing: -.015em; } h3, h4, h5, h6 { font-weight: 600; color: var(--ds-tinta); } h1 { font-size: 30px; } h2 { font-size: 24px; } h3, h4 { font-size: 19px; } h5, h6 { font-size: 16px; } p { color: #374151; } a { color: var(--ds-verde); transition: color var(--ds-transicion); } a:hover { color: var(--ds-verde-marca); } /* Títulos de sección con acento de marca */ .featured-products > h2, .featured-products .h2 { position: relative; text-transform: uppercase; letter-spacing: .02em; padding-bottom: 14px; margin-bottom: 28px; } .featured-products > h2::after, .featured-products .h2::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 56px; height: 3px; border-radius: 2px; background: var(--ds-verde); } /* --- Franja superior -------------------------------------------------------- */ .ds9-topbar { background: linear-gradient(90deg, var(--ds-verde-marca), #17a002); color: #fff; font-size: 13px; padding: 7px 0; } .ds9-topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .ds9-topbar-msg { margin: 0; color: #fff; } .ds9-topbar-utils { display: flex; align-items: center; gap: 18px; } .ds9-topbar-dist { opacity: .92; } .ds9-topbar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .ds9-topbar a:hover { color: #eaffd8; } .ds9-topbar .ds9-topbar-sep { opacity: .45; } .ds9-topbar strong { font-weight: 700; } /* --- Cabecera ---------------------------------------------------------------- */ #header { background: #fff; box-shadow: var(--ds-sombra-1); } #header .header-nav { background: #fff; border-bottom: 1px solid var(--ds-borde); max-height: none; } #header a { color: var(--ds-tinta); } #header a:hover { color: var(--ds-verde); text-decoration: none; } #header .header-top { background: #fff; padding-bottom: .5rem; } /* Menú con subrayado animado */ #header .top-menu a[data-depth="0"] { position: relative; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ds-tinta); padding-bottom: 4px; } @media (min-width: 768px) { #header .top-menu a[data-depth="0"]::after { content: ''; position: absolute; left: .625rem; right: 100%; bottom: 0; height: 2px; background: var(--ds-verde); transition: right var(--ds-transicion); } #header .top-menu a[data-depth="0"]:hover::after { right: .625rem; } } /* Buscador tipo píldora */ #search_widget input[type="text"] { border: 1.5px solid var(--ds-borde); border-radius: 999px; padding: 10px 18px; background: var(--ds-fondo-suave); transition: border-color var(--ds-transicion), box-shadow var(--ds-transicion), background var(--ds-transicion); } #search_widget input[type="text"]:focus { border-color: var(--ds-verde); background: #fff; box-shadow: 0 0 0 4px rgba(92,166,13,.12); outline: none; } #search_widget button { right: 8px; } #search_widget button i { color: var(--ds-verde); } /* --- Migas ------------------------------------------------------------------- */ .breadcrumb { background: transparent; font-size: 13px; color: var(--ds-gris); } .breadcrumb a { color: var(--ds-gris); } .breadcrumb a:hover { color: var(--ds-verde); } /* --- Botones ----------------------------------------------------------------- */ .btn { transition: all var(--ds-transicion); } .btn-primary, .btn-primary:focus, .add-to-cart { background: var(--ds-verde); border: none; border-radius: var(--ds-radio-chico); color: #fff; font-weight: 600; letter-spacing: .02em; padding: 12px 26px; box-shadow: 0 2px 8px rgba(92,166,13,.35); } .btn-primary:hover, .btn-primary:active, .add-to-cart:hover { background: var(--ds-verde-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(92,166,13,.38); } .btn-primary:active { transform: translateY(0); } .btn-secondary, .btn-outline-secondary { border-radius: var(--ds-radio-chico); border: 1.5px solid var(--ds-borde); background: #fff; color: var(--ds-tinta); font-weight: 600; } .btn-secondary:hover, .btn-outline-secondary:hover { border-color: var(--ds-verde); color: var(--ds-verde); background: #fff; } /* --- Tarjetas de producto ----------------------------------------------------- */ .product-miniature { margin-bottom: 1.75rem; } .product-miniature .thumbnail-container { background: #fff; border: 1px solid var(--ds-borde); border-radius: var(--ds-radio); overflow: hidden; box-shadow: var(--ds-sombra-1); transition: box-shadow var(--ds-transicion), transform var(--ds-transicion), border-color var(--ds-transicion); } .product-miniature .thumbnail-container:hover { border-color: transparent; box-shadow: var(--ds-sombra-2); transform: translateY(-3px); } .product-miniature .thumbnail-container img { transition: transform .35s ease; } .product-miniature .thumbnail-container:hover img { transform: scale(1.04); } .product-miniature .product-title a { color: var(--ds-tinta); font-size: 14px; font-weight: 600; line-height: 1.4; } .product-miniature .product-title a:hover { color: var(--ds-verde); } .product-price, .current-price-value { color: var(--ds-tinta); font-weight: 700; } .regular-price { color: var(--ds-gris); text-decoration: line-through; font-weight: 400; } /* Banderas */ .product-flags .product-flag { border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; box-shadow: var(--ds-sombra-1); } .product-flags .product-flag.new, .product-flags .product-flag.pack { background: var(--ds-verde); color: #fff; } .product-flags .product-flag.discount, .product-flags .product-flag.on-sale, .product-flags .product-flag.out_of_stock { background: var(--ds-rojo); color: #fff; } .discount-percentage, .discount-product { background: var(--ds-rojo); color: #fff; border-radius: 6px; } /* --- CTA de precios ocultos (política Herbalife) ------------------------------ */ .ds9-price-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--ds-verde); color: #fff !important; border-radius: var(--ds-radio-chico); padding: 11px 20px; font-weight: 600; font-size: 13.5px; letter-spacing: .03em; text-transform: uppercase; text-decoration: none !important; box-shadow: 0 2px 8px rgba(92,166,13,.35); transition: all var(--ds-transicion); } .ds9-price-cta:hover { background: var(--ds-verde-hover); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(92,166,13,.38); } .ds9-price-cta--mini { padding: 6px 12px; font-size: 11px; border-radius: 7px; } .ds9-price-cta .material-icons { font-size: 17px; } /* --- Slider ------------------------------------------------------------------- */ #carousel, .carousel { max-height: none; margin-bottom: 2rem; } .carousel .carousel-inner { height: auto; } .carousel .carousel-item img { width: 100%; height: auto; } .carousel .carousel-item .caption { display: none; } /* --- Reassurance --------------------------------------------------------------- */ .blockreassurance, #block-reassurance { background: var(--ds-fondo-suave); border-radius: var(--ds-radio); padding: 1.25rem; } /* --- Blog ------------------------------------------------------------------------ */ .simpleblog-posts .post-item, .ph-post { border: 1px solid var(--ds-borde); border-radius: var(--ds-radio); overflow: hidden; box-shadow: var(--ds-sombra-1); transition: box-shadow var(--ds-transicion), transform var(--ds-transicion); } .simpleblog-posts .post-item:hover, .ph-post:hover { box-shadow: var(--ds-sombra-2); transform: translateY(-3px); } /* --- Formularios ----------------------------------------------------------------- */ .form-control { border: 1.5px solid var(--ds-borde); border-radius: var(--ds-radio-chico); padding: 10px 14px; transition: border-color var(--ds-transicion), box-shadow var(--ds-transicion); } .form-control:focus { border-color: var(--ds-verde); box-shadow: 0 0 0 4px rgba(92,166,13,.12); outline: none; } .form-group label, .form-control-label { font-weight: 600; font-size: 13px; } /* Login como tarjeta + botón de Facebook con aire */ #authentication .login-form { max-width: 460px; margin: 0 auto; } #authentication section.login-form, #authentication .register-form { background: #fff; border: 1px solid var(--ds-borde); border-radius: var(--ds-radio); box-shadow: var(--ds-sombra-1); padding: 1.75rem; } .fblogin-connect, #fblogin, [class*="fblogin"] { display: flex; justify-content: center; margin: 1rem 0; } /* --- Pie --------------------------------------------------------------------------- */ .footer-container { background: var(--ds-fondo-suave); border-top: 3px solid var(--ds-verde); padding-top: 2.5rem; margin-top: 3rem; box-shadow: none; } .footer-container .h3, .footer-container .footer__title { color: var(--ds-tinta); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .875rem; } .footer-container li { margin-bottom: .375rem; } .footer-container a { color: var(--ds-gris); font-size: 13.5px; } .footer-container a:hover { color: var(--ds-verde); } .footer-container .block-contact { color: var(--ds-gris); font-size: 13.5px; } .footer-container .copyright, .ds9-copyright { background: transparent; border-top: 1px solid var(--ds-borde); padding: 14px 0; margin-top: 2rem; font-size: 12.5px; color: var(--ds-gris); } /* Newsletter */ .block_newsletter { background: transparent; font-size: 14px; } .block_newsletter form input[type="email"] { border-radius: var(--ds-radio-chico) 0 0 var(--ds-radio-chico); border: 1.5px solid var(--ds-borde); } .block_newsletter form button { border-radius: 0 var(--ds-radio-chico) var(--ds-radio-chico) 0; background: var(--ds-verde); border: none; color: #fff; font-weight: 600; } .block_newsletter form button:hover { background: var(--ds-verde-hover); } /* --- Ficha de producto --------------------------------------------------------------- */ .product-information { font-size: 14.5px; } .product-actions .add-to-cart { font-size: 15px; padding: 13px 30px; text-transform: uppercase; } .product-quantity .qty input { border-radius: var(--ds-radio-chico); } .tabs { border: 1px solid var(--ds-borde); border-radius: var(--ds-radio); box-shadow: var(--ds-sombra-1); padding: 1.5rem; } .tabs .nav-tabs .nav-link { color: var(--ds-gris); font-weight: 600; border: none; } .tabs .nav-tabs .nav-link.active { color: var(--ds-verde); border-bottom: 3px solid var(--ds-verde); background: transparent; } .tabs .nav-tabs .nav-link:hover { color: var(--ds-verde); border: none; border-bottom: 3px solid var(--ds-verde-suave); } .product-cover { border: 1px solid var(--ds-borde); border-radius: var(--ds-radio); overflow: hidden; } .product-images .thumb { border-radius: var(--ds-radio-chico); border: 1.5px solid transparent; } .product-images .thumb.selected, .product-images .thumb:hover { border-color: var(--ds-verde); } /* --- Paginación / misc ----------------------------------------------------------------- */ .page-item .page-link { border-radius: var(--ds-radio-chico) !important; margin: 0 3px; border-color: var(--ds-borde); color: var(--ds-tinta); } .page-item.active .page-link { background: var(--ds-verde); border-color: var(--ds-verde); } .dropdown-item:hover, .dropdown-item:focus { color: var(--ds-verde); background: var(--ds-verde-suave); } .spinner { color: var(--ds-verde); } .ds-geo-banner { margin: 0; } :focus-visible { outline: 3px solid rgba(92,166,13,.4); outline-offset: 2px; } /* --- Mobile ------------------------------------------------------------------------------ */ @media (max-width: 767px) { .ds9-topbar { font-size: 11.5px; padding: 6px 8px; } .ds9-topbar .container { gap: 6px; } .ds9-topbar .ds9-topbar-extra { display: none; } .ds9-topbar .ds9-topbar-msg { text-align: center; } #header .header-top { padding-top: .25rem; } #header .logo { max-width: 150px; } #search_widget { margin: .3rem 0 .6rem; } h1 { font-size: 22px; } h2 { font-size: 19px; } .carousel { margin-bottom: 1.25rem; } .featured-products > h2, .featured-products .h2 { font-size: 18px; } .product-actions .add-to-cart { width: 100%; justify-content: center; } } /* --- Tabs de producto como chips ------------------------------------------- Con 5 pestañas de texto largo en la columna angosta, el subrayado clásico quebraba en filas desparejas. Como chips uniformes el quiebre de línea es parte del diseño: siempre se ve ordenado. */ .tabs .nav-tabs { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 0; margin-bottom: 1.25rem; } .tabs .nav-tabs .nav-item { margin: 0; } .tabs .nav-tabs .nav-link, .tabs .nav-tabs .nav-link:hover { border: 1.5px solid var(--ds-borde); border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--ds-gris); background: #fff; white-space: nowrap; transition: all var(--ds-transicion); } .tabs .nav-tabs .nav-link:hover { border-color: var(--ds-verde); color: var(--ds-verde); } .tabs .nav-tabs .nav-link.active { background: var(--ds-verde); border-color: var(--ds-verde); color: #fff; } .tabs .tab-content { font-size: 14px; } /* --- Dropdown del menú ------------------------------------------------------- classic deja el .sub-menu con visibility:hidden y lo abre por JS solo en ciertos casos; acá se abre por hover y se ve como panel: tarjeta blanca, sombra, columnas prolijas. */ @media (max-width: 767px) { /* En mobile el submenu es parte del acordeon: nada de hidden/absoluto */ #mobile_top_menu_wrapper .sub-menu { visibility: visible !important; opacity: 1 !important; position: static !important; transform: none !important; box-shadow: none; border: none; width: 100% !important; max-width: none !important; } } #_desktop_top_menu .top-menu .sub-menu { visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity var(--ds-transicion), transform var(--ds-transicion), visibility var(--ds-transicion); background: #fff; border: 1px solid var(--ds-borde); border-radius: var(--ds-radio); box-shadow: var(--ds-sombra-2); padding: 14px 6px; min-width: 260px; z-index: 60; } #_desktop_top_menu .top-menu li:hover > .sub-menu, #_desktop_top_menu .top-menu li.sfHover > .sub-menu { visibility: visible; opacity: 1; transform: translateY(0); } #_desktop_top_menu .top-menu .sub-menu a { display: block; padding: 7px 16px; font-size: 13.5px; font-weight: 500; color: var(--ds-tinta); border-radius: 6px; text-transform: none; letter-spacing: 0; } #header .top-menu .sub-menu a:hover { background: var(--ds-verde-suave); color: var(--ds-verde-marca); } #header .top-menu .sub-menu .category { padding: 0 8px; } /* --- Página de categoría ----------------------------------------------------- La imagen de cabecera venía estirada como una tira vertical: se contiene y, si es minúscula, no vale la pena mostrarla gigante. */ /* La miniatura de categoría (141x180 de origen) quedaba flotando como un sello perdido junto a la descripción: no aporta nada, fuera. */ #category .category-cover, .block-category .category-cover { display: none; } .block-category { min-height: 0; } /* 4 productos por fila en desktop, como definimos en el sitio actual. OJO: en classic la columna es el div .js-product; el article .product-miniature vive DENTRO de ella. Apuntar al article achica la tarjeta al 25% de su propia columna (tarjetas de 60px — ya nos pasó). */ @media (min-width: 1200px) { #js-product-list .products .js-product, .featured-products .products .js-product { flex: 0 0 25%; max-width: 25%; } } /* ============================================================================= Área de cliente, checkout, blog y CMS — la segunda mitad del sitio. ========================================================================== */ /* --- Mi cuenta: los accesos como tarjetas ------------------------------------ */ .page-my-account #content .links { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .page-my-account #content .links a { background: #fff; border: 1px solid var(--ds-borde); border-radius: var(--ds-radio); box-shadow: var(--ds-sombra-1); padding: 1.4rem 1rem; text-align: center; color: var(--ds-tinta); font-weight: 600; font-size: 13.5px; transition: box-shadow var(--ds-transicion), transform var(--ds-transicion), border-color var(--ds-transicion); } .page-my-account #content .links a:hover { border-color: var(--ds-verde); box-shadow: var(--ds-sombra-2); transform: translateY(-2px); color: var(--ds-verde-marca); } .page-my-account #content .links a i, .page-my-account #content .links a .material-icons { display: block; margin: 0 auto .5rem; font-size: 30px; color: var(--ds-verde); } /* --- Formularios de cuenta (login, registro, recuperar) ----------------------- */ #authentication #content, #password #content, #registration #content { max-width: 560px; margin: 0 auto; } .form-fields, #customer-form section { background: transparent; } #customer-form, .forgotten-password { background: #fff; border: 1px solid var(--ds-borde); border-radius: var(--ds-radio); box-shadow: var(--ds-sombra-1); padding: 1.75rem; } .no-account { text-align: center; margin-top: 1rem; } /* --- Checkout ------------------------------------------------------------------ */ .checkout-step { background: #fff; border: 1px solid var(--ds-borde); border-radius: var(--ds-radio); box-shadow: var(--ds-sombra-1); margin-bottom: 14px; padding: 1.1rem 1.4rem; } .checkout-step .step-title { font-weight: 700; font-size: 16px; } .checkout-step .step-number { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ds-verde); color: #fff; font-size: 14px; margin-right: 8px; } .checkout-step.-complete .step-number { background: var(--ds-verde-marca); } .checkout-step.-unreachable { opacity: .55; } .address-item { border: 1.5px solid var(--ds-borde); border-radius: var(--ds-radio-chico); } .address-item.selected { border-color: var(--ds-verde); background: var(--ds-verde-suave); } .delivery-option, .payment-option { border: 1.5px solid var(--ds-borde); border-radius: var(--ds-radio-chico); padding: 12px; margin-bottom: 10px; background: #fff; } .cart-summary, .cart-grid-right .card { border: 1px solid var(--ds-borde); border-radius: var(--ds-radio); box-shadow: var(--ds-sombra-1); } .cart-grid-body .card { border: 1px solid var(--ds-borde); border-radius: var(--ds-radio); } /* --- Post del blog: tipografía de lectura --------------------------------------- */ .simpleblog-post .post-content, .simpleblog__post .post-content, #module-ph_simpleblog-single .post-content { font-size: 15.5px; line-height: 1.8; max-width: 760px; margin: 0 auto; } #module-ph_simpleblog-single .post-content p { margin-bottom: 1.1rem; color: #2b3440; } #module-ph_simpleblog-single .post-content img { border-radius: var(--ds-radio); max-width: 100%; height: auto; } #module-ph_simpleblog-single h1 { font-size: 26px; line-height: 1.3; } /* --- Páginas CMS: lectura larga --------------------------------------------------- */ #cms #content { background: #fff; border: 1px solid var(--ds-borde); border-radius: var(--ds-radio); box-shadow: var(--ds-sombra-1); padding: 2rem 2.25rem; font-size: 15px; line-height: 1.75; } #cms #content h2 { margin-top: 1.75rem; font-size: 21px; } #cms #content h3 { margin-top: 1.4rem; font-size: 17px; } #cms #content ul { padding-left: 1.4rem; } #cms #content li { margin-bottom: .4rem; } #cms #content img { border-radius: var(--ds-radio); max-width: 100%; height: auto; } /* --- Contacto ---------------------------------------------------------------------- */ .contact-form { background: #fff; border: 1px solid var(--ds-borde); border-radius: var(--ds-radio); box-shadow: var(--ds-sombra-1); padding: 1.75rem; } .contact-rich { font-size: 14px; } /* --- Tablas (historial de pedidos, etc.) --------------------------------------------- */ .table { font-size: 13.5px; } .table thead th { background: var(--ds-fondo-suave); border-bottom: 2px solid var(--ds-borde); font-weight: 700; text-transform: uppercase; font-size: 11.5px; letter-spacing: .04em; } .table td, .table th { vertical-align: middle; } /* Inputs con fondo blanco (classic los pinta grises) */ .form-control { background: #fff; } .form-control:disabled, .form-control[readonly] { background: var(--ds-fondo-suave); } .input-group .btn { border-radius: 0 var(--ds-radio-chico) var(--ds-radio-chico) 0; } /* H1 SEO de la home: semántico pero discreto, como en el sitio actual */ .ds9-home-intro { margin: -0.5rem 0 1.5rem; } .ds9-home-intro h1 { font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--ds-gris); letter-spacing: 0; text-align: center; max-width: 900px; margin: 0 auto; } .ds9-servicio li { margin-bottom: .6rem; font-size: 13.5px; color: var(--ds-gris); } .ds9-servicio strong { color: var(--ds-tinta); display: block; } /* ============================================================================= v3 — header serio, flag de stock discreto, footer mejor compuesto. ========================================================================== */ /* --- Header v3 ---------------------------------------------------------------- La fila del teléfono flotaba en un mar blanco y el ícono del buscador pisaba el placeholder. Ahora: fila superior compacta sobre fondo suave, fila principal alineada, buscador con el ícono en su lugar, y el header pegajoso con sombra al scrollear. */ #header .header-nav { background: var(--ds-fondo-suave); border-bottom: 1px solid var(--ds-borde); font-size: 12.5px; padding: 2px 0; } #header .header-nav .ds9-phone { color: var(--ds-gris); } #header .header-nav a { color: var(--ds-gris); font-weight: 500; } #header .header-nav a:hover { color: var(--ds-verde); } #header .header-nav .user-info .account { display: inline-flex; align-items: center; gap: 4px; } /* v6: el layout del header lo maneja .ds9-header-main (flex propio); header-top vuelve a ser bloque normal apilado. */ #header .header-top { display: block; padding: 0; } #header .logo { max-width: 190px; } /* sticky */ #header { position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 10px rgba(17,24,39,.06); } /* Buscador (markup de ps_searchbar: un suelto + input, sin botón). El ícono vivía ENCIMA del texto; ahora vive a la izquierda dentro de la píldora y el input le hace lugar. */ #search_widget { min-width: 240px; } #search_widget form { position: relative; } #search_widget .material-icons.search { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--ds-gris); font-size: 19px; pointer-events: none; z-index: 2; } #search_widget input[type="text"] { padding-left: 44px; padding-right: 18px; width: 100%; } /* --- Flag de sin stock: chico y honesto, no un cartelón ------------------------ */ .product-flags .product-flag.out_of_stock { background: #6b7280; /* gris neutro: no es una oferta, no grita */ color: #fff; font-size: 10px; padding: 3px 8px; letter-spacing: .04em; } /* la tarjeta agotada baja la intensidad de la foto */ .product-miniature:has(.product-flag.out_of_stock) .thumbnail-container img { opacity: .55; filter: grayscale(35%); } /* --- Footer v2 ------------------------------------------------------------------ Newsletter como banda propia centrada; columnas alineadas arriba; sociales visibles; reassurance integrado; copyright respirando. */ .footer-container .row { align-items: flex-start; } .block_newsletter { text-align: center; padding: 6px 0 18px; } .block_newsletter p.h4, .block_newsletter .h4, .block_newsletter #block-newsletter-label { font-weight: 700; font-size: 17px; color: var(--ds-tinta); } .block_newsletter form { max-width: 480px; margin: 0 auto; } .block_newsletter form input[type="email"] { background: #fff; } .footer-container .links .h3, .footer-container .links p.h3 { margin-top: .25rem; } .footer-container .links ul { margin-bottom: 1.25rem; } /* Sociales: puntos con marca */ .block-social ul { display: flex; gap: 10px; justify-content: center; } .block-social li { background-color: var(--ds-verde); border-radius: 50%; width: 36px; height: 36px; transition: background-color var(--ds-transicion), transform var(--ds-transicion); } .block-social li:hover { background-color: var(--ds-verde-hover); transform: translateY(-2px); } /* Reassurance dentro del footer, como banda limpia */ .footer-container #block-reassurance, .footer-container .blockreassurance { background: #fff; border: 1px solid var(--ds-borde); margin-bottom: 1.75rem; } @media (max-width: 767px) { #header { position: static; } /* sticky en mobile roba pantalla */ #search_widget { min-width: 0; } .footer-container .links .h3 { margin-top: 1rem; } } /* ============================================================================= v4 — botones refinados, badges sutiles, header de una fila, subcategorías. ========================================================================== */ /* La fila nav de escritorio ya no existe en el template; que no deje resto */ @media (min-width: 768px) { #header .header-nav { display: none; } } /* Acciones (sesión / carrito) en la fila principal */ .ds9-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 18px; } .ds9-header-actions .user-info a, .ds9-header-actions .account { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ds-tinta); } .ds9-header-actions .blockcart { background: transparent; } .ds9-header-actions .blockcart a { color: var(--ds-tinta); } .ds9-header-actions .material-icons { font-size: 20px; color: var(--ds-verde); } /* --- Botones v2: sobrios ------------------------------------------------------ El glow verde y el salto en hover gritaban. Sombra mínima, tipografía sin mayúsculas forzadas en los CTA chicos, radios consistentes. */ .btn-primary, .btn-primary:focus, .add-to-cart { box-shadow: none; border-radius: 8px; font-weight: 600; letter-spacing: 0; padding: 11px 22px; } .btn-primary:hover, .btn-primary:active, .add-to-cart:hover { transform: none; box-shadow: 0 2px 10px rgba(92, 166, 13, .25); } .ds9-price-cta { box-shadow: none; text-transform: none; letter-spacing: 0; font-size: 13.5px; padding: 10px 18px; border-radius: 8px; } .ds9-price-cta:hover { transform: none; box-shadow: 0 2px 10px rgba(92, 166, 13, .25); } .ds9-price-cta--mini { font-size: 12px; padding: 7px 14px; border-radius: 7px; width: calc(100% - 20px); justify-content: center; margin: 2px 10px 12px; /* respiración pareja dentro de la tarjeta */ } /* La zona de precio de la miniatura con espaciado consistente */ .product-miniature .product-description, .product-miniature .product-price-and-shipping { margin-bottom: .25rem; } .product-miniature .product-title { margin: .5rem 0 .25rem; } /* --- Badges v2: chips suaves --------------------------------------------------- Relleno pleno gritaba. Fondo tintado + texto del color: moderno y discreto. */ .product-flags .product-flag { box-shadow: none; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; text-transform: none; padding: 3px 10px; border-radius: 999px; } .product-flags .product-flag.new, .product-flags .product-flag.pack { background: var(--ds-verde-suave); color: var(--ds-verde-marca); } .product-flags .product-flag.discount, .product-flags .product-flag.on-sale { background: #fdeaea; color: #b42323; } .product-flags .product-flag.out_of_stock { background: #f3f4f6; color: var(--ds-gris); } .discount-percentage, .discount-product { background: #fdeaea; color: #b42323; border-radius: 999px; font-weight: 600; } /* --- Subcategorías: título completo, tarjeta prolija --------------------------- */ #subcategories .subcategory-heading, #subcategories h5, .subcategory-name { white-space: normal !important; overflow: visible !important; text-overflow: unset !important; } #subcategories li, #subcategories .subcategory { border: 1px solid var(--ds-borde); border-radius: var(--ds-radio); padding: 12px; transition: box-shadow var(--ds-transicion), transform var(--ds-transicion); } #subcategories li:hover { box-shadow: var(--ds-sombra-2); transform: translateY(-2px); } #subcategories .subcategory-name, #subcategories h5 a { font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ds-tinta); line-height: 1.35; } #subcategories .subcategory-name:hover, #subcategories h5 a:hover { color: var(--ds-verde); } #subcategories img { border-radius: var(--ds-radio-chico); } /* --- Header v4.1: el menú en una sola línea ---------------------------------- 4 ítems + buscador no entraban en col-md-7: el menú quebraba en dos líneas. El menú toma el ancho a la derecha del logo y el buscador baja de tamaño y se alinea con las acciones. */ #header .header-top-right { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; } @media (min-width: 768px) { #_desktop_top_menu .top-menu { display: flex; flex-wrap: nowrap; } #_desktop_top_menu .top-menu a[data-depth="0"] { font-size: 12.5px; letter-spacing: .02em; padding: 0 .5rem .25rem; white-space: nowrap; } } #search_widget { min-width: 200px; max-width: 240px; float: none; margin: 0; } #search_widget input[type="text"] { padding-top: 8px; padding-bottom: 8px; font-size: 13px; } /* ============================================================================= v5 — muerte al celeste, dropdowns verticales, paginado, hero, secciones home. ========================================================================== */ /* --- Muerte al celeste (#24b9d7, el primario de classic) ----------------------- 53 reglas de classic lo usan; acá se pisan todas las visibles con la marca. */ a:hover, #header a:hover { color: var(--ds-verde-marca); } .btn-link { color: var(--ds-verde); } .btn-link:hover { color: var(--ds-verde-marca); } .btn-outline-primary { color: var(--ds-verde); border-color: var(--ds-verde); } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary.active, .btn-outline-primary:active { background: var(--ds-verde); border-color: var(--ds-verde); color: #fff; } .bg-primary, .card-primary { background-color: var(--ds-verde) !important; border-color: var(--ds-verde); } .custom-radio input[type="radio"]:checked + span { background-color: var(--ds-verde); } .custom-checkbox input[type="checkbox"]:checked + span .checkbox-checked { color: var(--ds-verde); } .dropdown-item.active, .dropdown-item.active:focus, .dropdown-item.active:hover { background: var(--ds-verde); color: #fff; } .list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover { background: var(--ds-verde); border-color: var(--ds-verde); } .form-control:focus, .input-group.focus, .search-widget form input[type="text"]:focus, .block_newsletter form input[type="email"]:focus { border-color: var(--ds-verde); box-shadow: 0 0 0 4px rgba(92,166,13,.12); outline: none; } .block-promo .promo-input + button, .block-promo .promo-code-button.cancel-promo { background: var(--ds-verde); border-color: var(--ds-verde); } #blockcart-modal .product-name { color: var(--ds-verde-marca); } #header .header-nav .blockcart a:hover, #header .header-nav .cart-preview.active { background: var(--ds-verde); } .facet-dropdown.open > .select-title, .facet-dropdown .select-list:hover { background: var(--ds-verde); color: #fff; } #subcategories ul li:hover .subcategory-image a { border-color: var(--ds-verde); } .product-images > li.thumb-container .thumb.selected, .product-images > li.thumb-container .thumb:hover { border-color: var(--ds-verde); } .product-miniature .highlighted-informations .quick-view:hover { color: var(--ds-verde); } .product-customization .product-message:focus { border-color: var(--ds-verde); } .product-price { color: var(--ds-tinta); } /* Los selectores de classic con más especificidad que a:hover ganaban la cascada y seguían pintando celeste: se replican uno a uno en verde. */ .account-list a:hover, .block_newsletter form button[type="submit"] .search:hover, .footer-container li a:hover { color: var(--ds-verde-marca); } #header .top-menu a[data-depth="0"]:hover { color: var(--ds-verde-marca); } .top-menu .sub-menu a:hover, .dropdown:hover .expand-more, .page-my-account #content .links a:hover i, .search-widget form button[type="submit"] .search:hover, .carousel .carousel-control .icon-prev:hover i, .carousel .carousel-control .icon-next:hover i { color: var(--ds-verde-marca); } .dropdown-item:focus, .dropdown-item:hover { color: var(--ds-verde-marca); } .block-categories .arrows .arrow-down:hover, .block-categories .arrows .arrow-right:hover, .block-categories .collapse-icons .add:hover, .block-categories .collapse-icons .remove:hover, .cart-grid-body a.label:hover { color: var(--ds-verde-marca); } .block-social ul li:hover { background-color: var(--ds-verde); } .brands-sort .select-list:hover, .products-sort-order .select-list:hover, .suppliers-sort .select-list:hover { background: var(--ds-verde); color: #fff; } .tabs .nav-tabs .nav-link.active, .tabs .nav-tabs .nav-link:hover { border-bottom-color: var(--ds-verde); } #product-modal .modal-content .modal-body .product-images img:hover { border-color: var(--ds-verde); } .nav-pills .nav-item.open .nav-link, .nav-pills .nav-item.open .nav-link:focus, .nav-pills .nav-item.open .nav-link:hover, .nav-pills .nav-link.active, .nav-pills .nav-link.active:focus, .nav-pills .nav-link.active:hover { background-color: var(--ds-verde); } .page-item.active .page-link, .page-item.active .page-link:focus, .page-item.active .page-link:hover { background-color: var(--ds-verde); border-color: var(--ds-verde); } .block_newsletter form input[type="text"]:focus + button .search, .btn-unstyle:focus .expand-more, .search-widget form input[type="text"]:focus + button .search { color: var(--ds-verde-marca); } .form-control:focus, .search-widget form input[type="text"]:focus, .block_newsletter form input[type="text"]:focus { outline-color: var(--ds-verde); } /* --- Paginado ------------------------------------------------------------------- */ .pagination { font-size: 13.5px; } .pagination .page-list { display: flex; gap: 6px; align-items: center; justify-content: center; box-shadow: none; background: transparent; padding: 0; } .pagination .page-list li a, .pagination .page-list li span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; border: 1.5px solid var(--ds-borde); border-radius: 8px; color: var(--ds-tinta); font-weight: 600; transition: all var(--ds-transicion); } .pagination .page-list li a:hover { border-color: var(--ds-verde); color: var(--ds-verde); } .pagination .current a, .pagination .page-list li.current a { background: var(--ds-verde); border-color: var(--ds-verde); color: #fff; } /* --- Hero: las esquinas redondeadas vienen HORNEADAS en la imagen --------------- (del diseño anterior, donde el slider era redondeado). En contenedor cuadrado se veían como pedazos blancos semitransparentes rotos. El contenedor adopta el mismo radio y todo cierra. */ .carousel .carousel-inner { border-radius: 14px; overflow: hidden; } #carousel, .carousel { margin-top: .25rem; } /* --- Dropdowns VERTICALES -------------------------------------------------------- classic los pinta como paneles horizontales de ancho completo que "se van de largo". Ahora: anclados a su ítem, columna vertical, ancho contenido. */ @media (min-width: 768px) { #_desktop_top_menu .top-menu > li { position: relative; } #_desktop_top_menu .top-menu .sub-menu { left: 0 !important; right: auto !important; top: 100% !important; /* classic lo clava en px y descolgaba el panel */ width: 300px; padding: 10px 8px; } #_desktop_top_menu .top-menu .sub-menu ul { display: block; width: 100%; } #_desktop_top_menu .top-menu .sub-menu li { display: block; float: none; width: 100%; } #_desktop_top_menu .top-menu .sub-menu .category { padding: 0; } /* el nowrap del nivel superior NO baja al panel: acá el texto quiebra */ #_desktop_top_menu .top-menu .sub-menu a { padding: 8px 14px; white-space: normal; overflow-wrap: break-word; display: block; line-height: 1.4; } } /* --- Secciones nuevas del home ---------------------------------------------------- */ .ds9-nosotros { background: var(--ds-fondo-suave); border-radius: var(--ds-radio); padding: 2.25rem 2rem; margin: 2.5rem 0; text-align: center; } .ds9-nosotros-inner { max-width: 780px; margin: 0 auto; } .ds9-nosotros h2 { margin-bottom: 1rem; } .ds9-nosotros p { font-size: 15px; line-height: 1.7; } .ds9-nosotros-firma { color: var(--ds-gris); font-size: 13.5px; font-style: italic; margin-top: .75rem; } .ds9-testimonios { margin: 2.5rem 0 1rem; text-align: center; } .ds9-testimonios h2 { margin-bottom: 1.75rem; } .ds9-testimonios h2 span { font-weight: 400; color: var(--ds-gris); font-size: .75em; } .ds9-testimonios-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; text-align: left; } .ds9-testimonios figure { background: #fff; border: 1px solid var(--ds-borde); border-radius: var(--ds-radio); box-shadow: var(--ds-sombra-1); padding: 1.25rem; margin: 0; } .ds9-testimonios blockquote { font-size: 13.5px; line-height: 1.6; color: #374151; margin: 0 0 .75rem; border: none; padding: 0; } .ds9-testimonios figcaption { font-size: 12.5px; color: var(--ds-gris); } .ds9-testimonios figcaption strong { color: var(--ds-verde-marca); } @media (max-width: 767px) { .ds9-testimonios-grid { grid-template-columns: 1fr; } .carousel .carousel-inner { border-radius: 10px; } } /* --- Recuadros de conversión en la ficha (medios de pago + envíos) ------------- */ .ds9-info-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 1.25rem 0 .5rem; } .ds9-info-box { border: 1px solid var(--ds-borde); border-radius: var(--ds-radio-chico); padding: 14px; background: var(--ds-fondo-suave); font-size: 13px; } .ds9-info-box-title { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ds-tinta); margin-bottom: 8px; } .ds9-info-box-title .material-icons { color: var(--ds-verde); font-size: 20px; } .ds9-card-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; } .ds9-card-chips li { background: #fff; border: 1px solid var(--ds-borde); border-radius: 6px; padding: 2px 8px; font-size: 11.5px; color: var(--ds-gris); list-style: none; } .ds9-info-box-text { margin-bottom: 8px; color: #374151; } .ds9-info-box-link { font-size: 12.5px; font-weight: 600; } @media (max-width: 991px) { .ds9-info-boxes { grid-template-columns: 1fr; } } /* --- Mobile: topbar de UNA linea y H1 mas contenido ----------------------------- */ @media (max-width: 767px) { .ds9-topbar .ds9-topbar-msg { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .ds9-home-intro h1 { font-size: 12.5px; line-height: 1.5; } .ds9-nosotros { padding: 1.5rem 1.25rem; } } /* --- Menú MOBILE: vertical, texto que quiebra --------------------------------- Las reglas de escritorio (flex nowrap, submenú absoluto) se filtraban al menú clonado del acordeón: quedaba horizontal y las palabras se iban de largo. Acá manda la columna. */ @media (max-width: 767px) { #mobile_top_menu_wrapper { background: #fff; padding: 10px 14px; } #mobile_top_menu_wrapper .top-menu, #mobile_top_menu_wrapper .top-menu ul { display: block; width: 100%; } #mobile_top_menu_wrapper .top-menu li { display: block; float: none; width: 100%; border-bottom: 1px solid var(--ds-borde); } #mobile_top_menu_wrapper .top-menu a { display: block; width: 100%; padding: 12px 6px; font-size: 14px; font-weight: 600; color: var(--ds-tinta); white-space: normal; /* el texto QUIEBRA, no se va de largo */ overflow-wrap: break-word; text-transform: none; letter-spacing: 0; } #mobile_top_menu_wrapper .top-menu .sub-menu a { font-weight: 500; font-size: 13.5px; color: var(--ds-gris); padding: 9px 6px 9px 18px; } #mobile_top_menu_wrapper .top-menu a[data-depth="0"]::after { display: none; } #mobile_top_menu_wrapper .float-xs-right, #mobile_top_menu_wrapper .navbar-toggler { float: right; } } /* Botones y chips: el texto largo quiebra en vez de desbordar (global) */ .btn, .ds9-price-cta, .product-flags .product-flag { white-space: normal; } .ds9-price-cta { text-align: center; } /* ============================================================================== v6 — header en dos filas, ficha rediseñada (tabs a ancho completo, boxes). ============================================================================== */ /* --- Header: fila principal (flex propio, sin cols de classic) ------------------- */ .ds9-header-main { display: flex; align-items: center; gap: 28px; padding: 14px 0 12px; } .ds9-h-logo { flex: 0 0 auto; } .ds9-h-logo img { max-height: 58px; width: auto; } .ds9-h-search { flex: 1 1 auto; min-width: 0; } .ds9-h-search #search_widget { width: 100%; max-width: 520px; margin: 0 auto; float: none; display: block; } .ds9-h-search #search_widget form { width: 100%; } .ds9-h-search #search_widget input[type="text"] { width: 100%; min-width: 0; } .ds9-h-actions { flex: 0 0 auto; margin-left: auto; display: flex; justify-content: flex-end; align-items: center; gap: 18px; white-space: nowrap; } .ds9-h-actions .user-info { margin-top: 0; text-align: right; } /* --- Header: barra de navegación propia ----------------------------------------- */ .ds9-mainnav { border-top: 1px solid var(--ds-borde); border-bottom: 1px solid var(--ds-borde); background: #fff; } .ds9-mainnav #_desktop_top_menu { margin: 0; float: none; width: 100%; } .ds9-mainnav #_desktop_top_menu > ul, .ds9-mainnav .top-menu[data-depth="0"] { display: flex; justify-content: flex-start; /* alineado al logo: centrado se leía torcido */ gap: 2px; margin: 0; padding: 0; float: none; } .ds9-mainnav .top-menu a[data-depth="0"] { padding: 13px 18px; display: block; } /* el header ya no necesita la fila vieja de dos alturas */ .ds9-header .header-top-right { padding: 0; } /* --- Ficha: boxes de conversión apilados y compactos ----------------------------- */ .ds9-info-boxes { grid-template-columns: 1fr; gap: 10px; } .ds9-info-box { padding: 12px 14px; } .ds9-info-box-title span { min-width: 0; } .ds9-info-box-title { flex-wrap: nowrap; } /* --- Ficha: reassurance duplicaba los boxes (pago/envío) — fuera de la ficha ----- */ #product .product-information .blockreassurance, #product .product-information .blockreassurance_product, #product .product-information #block-reassurance { display: none; } /* --- Ficha: pestañas a ancho completo -------------------------------------------- */ .ds9-tabs-full { margin: 2.75rem 0 2rem; padding-top: 1.75rem; border-top: 1px solid var(--ds-borde); } .ds9-tabs-full .nav-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; border-bottom: 0; margin-bottom: 1.5rem; } .ds9-tabs-full .tab-content { max-width: 860px; margin: 0 auto; font-size: 15px; line-height: 1.7; } /* ============================================================================== v7 — hallazgos de auditoría: selector de país, ayuda, CTA registro, nombres completos en miniaturas. ============================================================================== */ /* --- Topbar: dropdowns accesibles (hover Y teclado) ------------------------------ El disparador es un