/*
=======================================================
ELETECH — CSS Personalizado para Odoo
Pegar en: Sitio Web → Configuración → CSS Personalizado
(o en el editor de temas de Odoo)
=======================================================
*/
/* ── FUENTES ── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,300;0,500;0,700;1,300;1,500&family=Plus+Jakarta+Sans:wght@300;400;500;600&display=swap');
/* ── VARIABLES ── */
:root {
--pink: #F2A7C3;
--pink-lt: #FCE8F1;
--pink-dk: #C96A90;
--yellow: #F5D87A;
--yellow-lt: #FEFAE8;
--blue-lt: #EAF3FD;
--mint-lt: #E6F7F1;
--lav-lt: #EEE8FD;
--cream: #FDF8F2;
--ink: #1E1A2E;
--ink-mid: #4A4360;
--ink-soft: #8B82A0;
--border: rgba(200,160,190,0.2);
}
/* =============================================
BASE
============================================= */
body {
font-family: 'Plus Jakarta Sans', sans-serif !important;
background-color: var(--cream) !important;
color: var(--ink) !important;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Fraunces', serif !important;
font-weight: 300 !important;
color: var(--ink) !important;
}
p, li, span, a {
font-family: 'Plus Jakarta Sans', sans-serif !important;
}
/* =============================================
TIRA SUPERIOR (Top Bar / Announcement)
============================================= */
#top_bar,
.o_top_bar,
.o_header_additional {
background: var(--ink) !important;
color: var(--yellow) !important;
font-size: 0.7rem !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.14em !important;
padding: 0.5rem 1rem !important;
text-align: center !important;
}
/* =============================================
NAVEGACIÓN
============================================= */
header#top,
.o_header_standard,
nav.navbar {
background: rgba(253, 248, 242, 0.95) !important;
backdrop-filter: blur(14px) !important;
border-bottom: 1px solid var(--border) !important;
padding: 0 3rem !important;
min-height: 64px !important;
box-shadow: none !important;
}
/* Logo */
.navbar-brand,
#top .navbar-brand {
font-family: 'Fraunces', serif !important;
font-size: 1.6rem !important;
font-weight: 700 !important;
color: var(--ink) !important;
}
/* Links de navegación */
.nav-link,
.navbar-nav .nav-link,
#top_menu .nav-link {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 0.78rem !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
color: var(--ink-soft) !important;
transition: color 0.2s !important;
padding: 0.4rem 0.75rem !important;
}
.nav-link:hover,
.navbar-nav .nav-link:hover {
color: var(--pink-dk) !important;
}
/* Botón del carrito */
.o_wsale_my_cart,
a[href="/shop/cart"] {
background: transparent !important;
border: 1.5px solid var(--border) !important;
border-radius: 50px !important;
padding: 0.4rem 0.9rem !important;
font-size: 0.75rem !important;
font-weight: 600 !important;
color: var(--ink) !important;
transition: border-color 0.2s, background 0.2s !important;
}
.o_wsale_my_cart:hover,
a[href="/shop/cart"]:hover {
background: var(--pink-lt) !important;
border-color: var(--pink) !important;
}
/* Botón WhatsApp en nav */
a[href*="wa.me"] {
background: var(--yellow) !important;
color: var(--ink) !important;
border-radius: 50px !important;
padding: 0.45rem 1rem !important;
font-size: 0.75rem !important;
font-weight: 600 !important;
text-decoration: none !important;
transition: background 0.2s !important;
}
a[href*="wa.me"]:hover {
background: var(--pink-lt) !important;
}
/* =============================================
HERO / BANNER PRINCIPAL (Carrusel)
============================================= */
.o_carousel,
#o_carousel_homepage,
.s_banner,
.carousel {
border-radius: 0 !important;
overflow: hidden !important;
}
.carousel-item,
.s_banner .carousel-item {
min-height: 80vh !important;
}
.carousel-item img,
.s_banner img {
object-fit: cover !important;
width: 100% !important;
height: 100% !important;
opacity: 0.88 !important;
}
/* Texto dentro del hero */
.carousel-caption h1,
.s_banner h1,
.o_we_bg_filter + .container h1 {
font-family: 'Fraunces', serif !important;
font-size: clamp(2.5rem, 5vw, 5rem) !important;
font-weight: 300 !important;
line-height: 1.05 !important;
color: #fff !important;
text-shadow: 0 2px 20px rgba(30,26,46,0.3) !important;
}
.carousel-caption p,
.s_banner p {
font-size: 1rem !important;
line-height: 1.8 !important;
color: rgba(255,255,255,0.85) !important;
}
/* Flechas del carrusel */
.carousel-control-prev-icon,
.carousel-control-next-icon {
background-color: rgba(30,26,46,0.5) !important;
border-radius: 50% !important;
padding: 1.5rem !important;
background-size: 50% !important;
}
/* Indicadores del carrusel */
.carousel-indicators button {
background-color: var(--pink) !important;
width: 8px !important;
height: 8px !important;
border-radius: 50% !important;
border: none !important;
opacity: 0.4 !important;
}
.carousel-indicators button.active {
opacity: 1 !important;
transform: scale(1.2) !important;
}
/* =============================================
BARRA DE CARACTERÍSTICAS (Features / Iconos)
============================================= */
.s_features,
.o_we_website_features,
section.s_three_columns {
background: #fff !important;
border-top: 1px solid var(--border) !important;
border-bottom: 1px solid var(--border) !important;
padding: 1.5rem 2rem !important;
}
.s_features .col,
.s_features .col-md-3 {
border-right: 1px solid var(--border) !important;
padding: 1rem 1.5rem !important;
transition: background 0.2s !important;
}
.s_features .col:last-child,
.s_features .col-md-3:last-child {
border-right: none !important;
}
.s_features .col:hover,
.s_features .col-md-3:hover {
background: var(--cream) !important;
}
.s_features h5,
.s_features .h5 {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 0.78rem !important;
font-weight: 600 !important;
color: var(--ink) !important;
margin-bottom: 0.25rem !important;
}
.s_features p {
font-size: 0.7rem !important;
color: var(--ink-soft) !important;
}
/* =============================================
GRILLA DE PRODUCTOS (Tienda / Shop)
============================================= */
.oe_website_sale .o_wsale_products_grid_table,
#products_grid,
.o_wsale_products_grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 20px !important;
padding: 0 !important;
}
/* Tarjeta de producto */
.o_wsale_product_item,
.oe_product_cart,
.product_price.css_editable_mode_hidden {
border-radius: 16px !important;
overflow: hidden !important;
background: var(--cream) !important;
border: 1px solid var(--border) !important;
transition: transform 0.3s, box-shadow 0.3s !important;
box-shadow: none !important;
}
.o_wsale_product_item:hover,
.oe_product_cart:hover {
transform: translateY(-6px) !important;
box-shadow: 0 16px 40px rgba(200,107,144,0.15) !important;
}
/* Imagen del producto */
.o_wsale_product_item .o_product_image_block img,
.oe_product_cart img {
border-radius: 0 !important;
transition: transform 0.5s !important;
object-fit: cover !important;
aspect-ratio: 1 !important;
width: 100% !important;
opacity: 0.92 !important;
}
.o_wsale_product_item:hover img,
.oe_product_cart:hover img {
transform: scale(1.06) !important;
opacity: 1 !important;
}
/* Nombre del producto */
.o_wsale_product_item .o_ribbon_left,
.oe_product_cart .product_name,
.o_wsale_product_item h5,
.o_wsale_product_item .h5 {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 0.82rem !important;
font-weight: 600 !important;
color: var(--ink) !important;
line-height: 1.35 !important;
padding: 0.9rem 1rem 0.25rem !important;
}
/* Precio del producto */
.o_wsale_product_item .monetary_field,
.oe_product_cart .monetary_field,
.oe_product_price {
font-family: 'Fraunces', serif !important;
font-size: 1.1rem !important;
font-weight: 500 !important;
color: var(--pink-dk) !important;
padding: 0 1rem 1rem !important;
}
/* Botón agregar al carrito */
.o_wsale_product_item .btn-primary,
.oe_product_cart .btn-primary,
a.btn.btn-primary {
background: var(--ink) !important;
border: none !important;
border-radius: 50px !important;
font-size: 0.72rem !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
padding: 0.55rem 1.25rem !important;
transition: background 0.2s !important;
color: var(--cream) !important;
width: calc(100% - 2rem) !important;
margin: 0 1rem 1rem !important;
display: block !important;
}
.o_wsale_product_item .btn-primary:hover,
a.btn.btn-primary:hover {
background: var(--pink-dk) !important;
}
/* Ribbon / badge "Nuevo" */
.o_ribbon_left,
.o_ribbon {
background: var(--pink) !important;
color: #fff !important;
font-size: 0.6rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
border-radius: 50px !important;
padding: 0.25rem 0.65rem !important;
}
/* =============================================
SECCIONES DE CATEGORÍAS
============================================= */
.s_dynamic_snippet_products,
.o_wsale_product_list,
section[data-snippet="s_product_list"] {
padding: 4rem 5rem !important;
background: var(--cream) !important;
}
/* Título de sección */
section h2,
section .h2,
.o_header_standard + section h2 {
font-family: 'Fraunces', serif !important;
font-size: clamp(1.6rem, 2.5vw, 2.4rem) !important;
font-weight: 300 !important;
color: var(--ink) !important;
line-height: 1.15 !important;
margin-bottom: 0.5rem !important;
}
section h2 em,
section .h2 em {
font-style: italic !important;
color: var(--pink-dk) !important;
}
/* =============================================
TARJETAS DE CATEGORÍA (Cover / Covers)
============================================= */
.s_cover,
.o_we_bg_filter {
border-radius: 16px !important;
overflow: hidden !important;
transition: transform 0.3s !important;
}
.s_cover:hover {
transform: translateY(-6px) !important;
}
.s_cover img {
transition: transform 0.5s !important;
}
.s_cover:hover img {
transform: scale(1.06) !important;
}
/* =============================================
BOTONES GENERALES
============================================= */
.btn-primary,
.o_btn_primary {
background: var(--ink) !important;
border-color: var(--ink) !important;
border-radius: 50px !important;
font-size: 0.78rem !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
padding: 0.75rem 1.6rem !important;
transition: background 0.2s, transform 0.15s !important;
color: var(--cream) !important;
}
.btn-primary:hover {
background: var(--pink-dk) !important;
border-color: var(--pink-dk) !important;
transform: translateY(-2px) !important;
}
.btn-secondary,
.o_btn_secondary {
background: transparent !important;
border: 1.5px solid var(--border) !important;
border-radius: 50px !important;
font-size: 0.78rem !important;
font-weight: 500 !important;
color: var(--ink-mid) !important;
transition: border-color 0.2s, color 0.2s !important;
}
.btn-secondary:hover {
border-color: var(--pink) !important;
color: var(--pink-dk) !important;
}
/* =============================================
FORMULARIO DE CONTACTO
============================================= */
.s_website_form .form-control,
input.form-control,
textarea.form-control,
select.form-control {
border: 1.5px solid var(--border) !important;
border-radius: 10px !important;
background: var(--cream) !important;
color: var(--ink) !important;
font-size: 0.88rem !important;
padding: 0.75rem 1rem !important;
transition: border-color 0.2s !important;
}
.form-control:focus {
border-color: var(--pink) !important;
box-shadow: 0 0 0 3px rgba(242,167,195,0.2) !important;
outline: none !important;
}
/* =============================================
SECCIÓN DE UBICACIONES / MAPA
============================================= */
.s_map iframe,
.o_website_google_map iframe {
border-radius: 20px !important;
border: none !important;
}
/* =============================================
REDES SOCIALES
============================================= */
.s_social_media .s_social_media_icon,
.o_footer_social a {
width: 36px !important;
height: 36px !important;
border-radius: 10px !important;
background: rgba(30,26,46,0.06) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 0.25rem !important;
transition: background 0.2s !important;
color: var(--ink-mid) !important;
}
.s_social_media .s_social_media_icon:hover,
.o_footer_social a:hover {
background: var(--pink) !important;
color: #fff !important;
}
/* =============================================
PIE DE PÁGINA
============================================= */
footer,
#footer,
.o_footer {
background: var(--ink) !important;
color: rgba(255,255,255,0.6) !important;
padding: 3rem 5rem 1.5rem !important;
}
footer h4,
#footer h4,
.o_footer h4,
footer .h4 {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.12em !important;
color: #fff !important;
margin-bottom: 1rem !important;
}
footer a,
#footer a,
.o_footer a {
font-size: 0.8rem !important;
color: rgba(255,255,255,0.5) !important;
text-decoration: none !important;
transition: color 0.2s !important;
line-height: 2 !important;
}
footer a:hover,
#footer a:hover {
color: var(--pink) !important;
}
footer p,
#footer p {
font-size: 0.8rem !important;
color: rgba(255,255,255,0.5) !important;
line-height: 1.8 !important;
}
footer .o_footer_copyright,
#footer .copyright {
border-top: 1px solid rgba(255,255,255,0.08) !important;
padding-top: 1.25rem !important;
font-size: 0.72rem !important;
color: rgba(255,255,255,0.3) !important;
}
/* Nombre de la marca en el footer */
footer .navbar-brand,
#footer .navbar-brand {
font-family: 'Fraunces', serif !important;
font-size: 1.6rem !important;
font-weight: 700 !important;
color: #fff !important;
}
/* =============================================
SEPARADORES
============================================= */
hr {
border-color: var(--border) !important;
opacity: 1 !important;
}
/* =============================================
PÁGINA DE PRODUCTO INDIVIDUAL
============================================= */
.o_wsale_product_main_col h1,
#product_detail h1 {
font-family: 'Fraunces', serif !important;
font-size: 2.2rem !important;
font-weight: 300 !important;
color: var(--ink) !important;
margin-bottom: 0.75rem !important;
}
#product_detail .text-muted,
.o_wsale_product_main_col .text-muted {
color: var(--ink-soft) !important;
font-size: 0.85rem !important;
}
/* Precio en página de producto */
#product_detail .oe_price,
.css_editable_mode_hidden .oe_price,
#product_price {
font-family: 'Fraunces', serif !important;
font-size: 2rem !important;
font-weight: 500 !important;
color: var(--pink-dk) !important;
}
/* Miniaturas de imagen del producto */
#o-carousel-product .carousel-indicators,
.o_carousel_product_thumbnails button {
border-radius: 8px !important;
overflow: hidden !important;
border: 2px solid transparent !important;
transition: border-color 0.2s !important;
}
.o_carousel_product_thumbnails button.active {
border-color: var(--pink) !important;
}
/* =============================================
CARRITO
============================================= */
.o_cart_summary,
#cart_total {
background: var(--cream) !important;
border-radius: 16px !important;
border: 1px solid var(--border) !important;
padding: 1.5rem !important;
}
.o_cart_summary h2,
#cart_total h2 {
font-size: 1.2rem !important;
color: var(--ink) !important;
}
#cart_total .btn-primary,
.o_cart_confirm .btn-primary {
width: 100% !important;
border-radius: 50px !important;
padding: 0.9rem !important;
font-size: 0.82rem !important;
}
/* =============================================
RESPONSIVE
============================================= */
@media (max-width: 768px) {
header#top,
nav.navbar {
padding: 0 1.25rem !important;
}
.o_wsale_products_grid_table,
#products_grid {
grid-template-columns: repeat(2, 1fr) !important;
}
footer,
#footer {
padding: 2.5rem 1.5rem 1.5rem !important;
}
section h2 {
font-size: 1.6rem !important;
}
}
@media (max-width: 480px) {
.o_wsale_products_grid_table,
#products_grid {
grid-template-columns: 1fr !important;
}
header#top {
padding: 0 1rem !important;
}
}
Ir al contenido
Libreta con Brillos de Caramelo
https://eletech.bmya.cloud/shop/ee25-676-libreta-con-brillos-de-caramelo-4337
https://eletech.bmya.cloud/web/image/product.template/4337/image_1920?unique=c0313b7
🌟🍭
Libreta con Brillos de Caramelo ¡Anota tus ideas más brillantes en esta libreta llena de encanto! Su portada con brillos efecto caramelo hará que tus apuntes se vean tan lindos como tú. Perfecta para clases, diario personal o para regalar a alguien especial.
📏 Medidas: 14.5 × 20 cm
📄 80 hojas rayadas de papel de 70g de alta calidad
✨ Portada brillante estilo caramelo , llamativa y muy kawaii
🎨 3 colores surtidos , ¡todos irresistiblemente tiernos!
📦 Embalaje: 1 unidad por bolsa OPP
Ideal para quienes aman la papelería con estilo brillante y único. ¡No te quedes sin la tuya! 💖🍬
Términos y condiciones
Garantía de devolución de 30 días
Envío: 2-3 días hábiles