.elementor-128 .elementor-element.elementor-element-89c8344{--display:flex;}.elementor-128 .elementor-element.elementor-element-f22cad1{--display:flex;--justify-content:center;}.elementor-128 .elementor-element.elementor-element-bc837e8.elementor-wc-products ul.products li.product{text-align:center;--button-align-display:flex;--button-align-direction:column;--button-align-justify:space-between;}.elementor-128 .elementor-element.elementor-element-bc837e8.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-128 .elementor-element.elementor-element-bc837e8.elementor-wc-products ul.products li.product span.onsale{display:block;}.elementor-128 .elementor-element.elementor-element-866c9f7{text-align:center;}.elementor-128 .elementor-element.elementor-element-866c9f7 .elementor-heading-title{font-size:14px;font-weight:600;letter-spacing:0.6px;color:#B97D24;}.elementor-128 .elementor-element.elementor-element-893e3fc{margin:10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;}.elementor-128 .elementor-element.elementor-element-893e3fc .elementor-heading-title{font-family:"Noto Sans Mende Kikakui", Sans-serif;font-size:40px;font-weight:500;text-transform:uppercase;font-style:italic;}.elementor-128 .elementor-element.elementor-element-e97d023{margin:10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;font-size:16px;line-height:32px;color:#484848;}.elementor-128 .elementor-element.elementor-element-2444037{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-128 .elementor-element.elementor-element-0fc3d0c{--display:flex;--border-radius:15px 15px 15px 15px;box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.12);--padding-top:25px;--padding-bottom:25px;--padding-left:25px;--padding-right:25px;}.elementor-128 .elementor-element.elementor-element-0fc3d0c:not(.elementor-motion-effects-element-type-background), .elementor-128 .elementor-element.elementor-element-0fc3d0c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-128 .elementor-element.elementor-element-660ccb0{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-128 .elementor-element.elementor-element-3e9675d{margin:10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-128 .elementor-element.elementor-element-3e9675d .elementor-heading-title{font-size:28px;font-weight:600;text-transform:none;color:#BE9973;}.elementor-128 .elementor-element.elementor-element-03a508f{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:flex-start;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-128 .elementor-element.elementor-element-fbc241c{margin:10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-128 .elementor-element.elementor-element-fbc241c .elementor-heading-title{font-family:"Noto Sans", Sans-serif;font-size:20px;font-weight:600;text-transform:none;color:#221A12;}.elementor-128 .elementor-element.elementor-element-98ea34b{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;font-size:16px;line-height:32px;color:#221A12;}.elementor-128 .elementor-element.elementor-element-7dfd93c{--display:flex;--border-radius:15px 15px 15px 15px;box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.12);--padding-top:25px;--padding-bottom:25px;--padding-left:25px;--padding-right:25px;}.elementor-128 .elementor-element.elementor-element-7dfd93c:not(.elementor-motion-effects-element-type-background), .elementor-128 .elementor-element.elementor-element-7dfd93c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-128 .elementor-element.elementor-element-0320926{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-128 .elementor-element.elementor-element-25cf542{margin:10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-128 .elementor-element.elementor-element-25cf542 .elementor-heading-title{font-size:28px;font-weight:600;text-transform:none;color:#BE9973;}.elementor-128 .elementor-element.elementor-element-551632f{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:flex-start;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-128 .elementor-element.elementor-element-475f5c1{margin:10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-128 .elementor-element.elementor-element-475f5c1 .elementor-heading-title{font-family:"Noto Sans", Sans-serif;font-size:20px;font-weight:600;text-transform:none;color:#221A12;}.elementor-128 .elementor-element.elementor-element-9aa911d{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;font-size:16px;line-height:32px;color:#221A12;}.elementor-128 .elementor-element.elementor-element-f16384e{--display:flex;--border-radius:15px 15px 15px 15px;box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.12);--padding-top:25px;--padding-bottom:25px;--padding-left:25px;--padding-right:25px;}.elementor-128 .elementor-element.elementor-element-f16384e:not(.elementor-motion-effects-element-type-background), .elementor-128 .elementor-element.elementor-element-f16384e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-128 .elementor-element.elementor-element-484bcde{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-128 .elementor-element.elementor-element-4bd575e{margin:10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-128 .elementor-element.elementor-element-4bd575e .elementor-heading-title{font-size:28px;font-weight:600;text-transform:none;color:#BE9973;}.elementor-128 .elementor-element.elementor-element-59f8ac5{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:flex-start;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-128 .elementor-element.elementor-element-34f6346{margin:10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-128 .elementor-element.elementor-element-34f6346 .elementor-heading-title{font-family:"Noto Sans", Sans-serif;font-size:20px;font-weight:600;text-transform:none;color:#221A12;}.elementor-128 .elementor-element.elementor-element-e9fb67d{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;font-size:16px;line-height:32px;color:#221A12;}.elementor-128 .elementor-element.elementor-element-0f2840b{--display:flex;}@media(max-width:1024px){.elementor-128 .elementor-element.elementor-element-bc837e8.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(max-width:767px){.elementor-128 .elementor-element.elementor-element-bc837e8.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}}/* Start custom CSS for woocommerce-products, class: .elementor-element-bc837e8 *//* ================================================================
SENSIA EXPERIENCIA — Estilo WooCommerce para sección "Regala"
----------------------------------------------------------------
Widget: Elementor "Products" (WooCommerce) — ID CSS: productos
Aplica sobre el grid de 6 productos: 3 cajas regalo (1/2/3 meses)
+ 3 tarjetas regalo (1/2/3 meses)
DÓNDE PEGAR ESTE CSS:
Apariencia > Personalizar > CSS adicional
— o —
Editar el widget "Products" en Elementor > Avanzado >
Custom CSS (Elementor Pro), usando ".elementor-128 .elementor-element.elementor-element-bc837e8" en vez de "#productos"
FUENTES USADAS EN LA WEB (coherencia con el resto del sitio):
Display: 'Noto Sans Mende Kikakui' → fallback 'Noto Serif'
Cuerpo: 'Noto Sans'
Si aún no están cargadas en el tema, añadir en
Elementor > Configuración del sitio > Tipografía o vía
en el head (Insert Headers and Footers).
================================================================ */
/* ──────────────────────────────────────────────────────────────
1. CONTENEDOR DEL GRID
WooCommerce pinta dentro del
widget. Forzamos grid limpio de 3 columnas y separación generosa.
────────────────────────────────────────────────────────────── */
#productos ul.products {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 32px 28px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* Anula el float/clear heredado de WooCommerce por defecto */
#productos ul.products::before,
#productos ul.products::after {
content: none !important;
}
/* ──────────────────────────────────────────────────────────────
2. CARD INDIVIDUAL (- )
────────────────────────────────────────────────────────────── */
#productos ul.products li.product {
background: #ffffff;
border: 1px solid rgba(26, 21, 16, 0.08);
padding: 0 !important;
margin: 0 !important;
display: flex;
flex-direction: column;
text-align: center;
position: relative;
overflow: hidden;
transition: box-shadow .25s ease, transform .25s ease;
}
#productos ul.products li.product:hover {
box-shadow: 0 18px 40px rgba(26, 21, 16, 0.10);
transform: translateY(-3px);
}
/* ──────────────────────────────────────────────────────────────
3. IMAGEN / ICONO DEL PRODUCTO
En tu staging las cajas regalo usan foto y las tarjetas regalo
usan icono ilustrado — ambos casos quedan dentro de
![]()
────────────────────────────────────────────────────────────── */
#productos ul.products li.product a.woocommerce-LoopProduct-link {
display: block;
text-decoration: none;
}
#productos ul.products li.product img {
width: 100% !important;
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;
background: #F2EDE3; /* fondo crema mientras carga */
transition: transform .6s ease;
}
#productos ul.products li.product:hover img {
transform: scale(1.04);
}
/* Las tarjetas-regalo (iconos SVG/PNG sobre fondo transparente)
necesitan más aire para no pegarse a los bordes */
#productos ul.products li.product.product-type-variable img,
#productos ul.products li.product img[src*="tarjeta"] {
object-fit: contain;
padding: 36px;
background: #18140F; /* fondo oscuro para iconos línea */
}
/* ──────────────────────────────────────────────────────────────
4. TÍTULO DEL PRODUCTO
────────────────────────────────────────────────────────────── */
#productos ul.products li.product h2.woocommerce-loop-product__title,
#productos ul.products li.product h3.woocommerce-loop-product__title {
font-family: 'Noto Sans Mende Kikakui', 'Noto Serif', Georgia, serif !important;
font-size: 15px !important;
font-weight: 600 !important;
letter-spacing: 0.02em;
color: #18140F !important;
text-transform: none !important; /* quita el UPPERCASE forzado actual */
line-height: 1.4;
margin: 22px 22px 6px !important;
}
/* ──────────────────────────────────────────────────────────────
5. PRECIO
────────────────────────────────────────────────────────────── */
#productos ul.products li.product .price {
font-family: 'Noto Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 700 !important;
color: #18140F !important;
margin: 0 22px 18px !important;
display: block;
}
#productos ul.products li.product .price del {
color: #9A8F82 !important;
font-weight: 400 !important;
opacity: .7;
margin-right: 6px;
}
#productos ul.products li.product .price ins {
text-decoration: none;
color: #C9A56A !important;
}
/* ──────────────────────────────────────────────────────────────
6. BOTÓN "AÑADIR AL CARRITO"
────────────────────────────────────────────────────────────── */
#productos ul.products li.product a.button,
#productos ul.products li.product a.add_to_cart_button {
display: block !important;
background: transparent !important;
color: #18140F !important;
border: 1px solid #18140F !important;
border-radius: 0 !important;
font-family: 'Noto Sans', sans-serif !important;
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
padding: 13px 18px !important;
margin: 0 22px 22px !important;
width: calc(100% - 44px) !important;
text-align: center;
transition: background .2s, color .2s;
}
#productos ul.products li.product a.button:hover,
#productos ul.products li.product a.add_to_cart_button:hover {
background: #18140F !important;
color: #F2ECE0 !important;
}
/* Botón "Seleccionar opciones" (productos variables) — mismo estilo */
#productos ul.products li.product a.product_type_variable {
background: transparent !important;
border: 1px solid #18140F !important;
color: #18140F !important;
}
/* ──────────────────────────────────────────────────────────────
7. ETIQUETA "OFERTA" / SALE (si se usa)
────────────────────────────────────────────────────────────── */
#productos ul.products li.product .onsale {
position: absolute !important;
top: 14px !important;
left: 14px !important;
right: auto !important;
background: #C9A56A !important;
color: #18140F !important;
font-family: 'Noto Sans', sans-serif !important;
font-size: 9px !important;
font-weight: 700 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
padding: 5px 10px !important;
border-radius: 0 !important;
min-height: 0 !important;
line-height: 1 !important;
width: auto !important;
height: auto !important;
}
/* ──────────────────────────────────────────────────────────────
8. RESPONSIVE
────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
#productos ul.products {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 600px) {
#productos ul.products {
grid-template-columns: 1fr !important;
gap: 22px !important;
}
#productos ul.products li.product h2.woocommerce-loop-product__title,
#productos ul.products li.product h3.woocommerce-loop-product__title {
font-size: 14px !important;
}
}
/* ──────────────────────────────────────────────────────────────
NOTAS DE IMPLEMENTACIÓN
──────────────────────────────────────────────────────────────
1. Los .elementor-128 .elementor-element.elementor-element-bc837e8es de WooCommerce ("ul.products", "li.product",
".woocommerce-loop-product__title", ".price", ".button")
son las clases estándar que genera el plugin — deberían
coincidir tal cual con tu HTML renderizado. Si Elementor Pro
envuelve el widget con una clase distinta, comprobar con el
inspector y anteponerla a "#productos" si hiciera falta.
2. El !important es necesario porque WooCommerce y el tema
cargan su propio CSS con bastante especificidad — sin él,
varias reglas no se aplicarían.
3. Para diferenciar visualmente cajas-regalo (foto real) de
tarjetas-regalo (icono línea), el .elementor-128 .elementor-element.elementor-element-bc837e8
img[src*="tarjeta"] detecta por el nombre de archivo de la
imagen subida. Si renombras las imágenes, ajustar ese
.elementor-128 .elementor-element.elementor-element-bc837e8 o añadir una clase manual al producto en WooCommerce.
4. Si quieres quitar el guión "|" del título
("REGALA SENSIA EXPERIENCIA | 1 MES" → más limpio), es más
sencillo editarlo directamente en el nombre del producto en
WooCommerce que vía CSS.
================================================================ *//* End custom CSS */