.elementor-195 .elementor-element.elementor-element-87cf03a > .elementor-element-populated{margin:-15px 0px -15px 0px;}.elementor-195 .elementor-element.elementor-element-a2fa0d1 .jet-carousel__content{text-align:center;}.elementor-195 .elementor-element.elementor-element-a2fa0d1 .jet-carousel__content .jet-carousel__item-title, .elementor-195 .elementor-element.elementor-element-a2fa0d1 .jet-carousel__content .jet-carousel__item-title a, .elementor-195 .elementor-element.elementor-element-a2fa0d1 .jet-banner__title{font-family:"Helvetica", Sans-serif;font-weight:400;}.elementor-195 .elementor-element.elementor-element-a2fa0d1 .jet-carousel__content .jet-carousel__item-text{color:var( --e-global-color-52a2d84 );}.elementor-195 .elementor-element.elementor-element-a2fa0d1 .jet-banner__text{color:var( --e-global-color-52a2d84 );}.elementor-195 .elementor-element.elementor-element-a2fa0d1 .jet-carousel__content .jet-carousel__item-text, .elementor-195 .elementor-element.elementor-element-a2fa0d1 .jet-banner__text{font-family:"Helvetica", Sans-serif;font-size:14px;font-weight:600;}.elementor-195 .elementor-element.elementor-element-a2fa0d1 .jet-carousel .jet-arrow{background-color:var( --e-global-color-52a2d84 );color:var( --e-global-color-242471d );font-size:21px;width:30px;height:30px;}.elementor-195 .elementor-element.elementor-element-a2fa0d1 .jet-carousel .jet-arrow svg{fill:var( --e-global-color-242471d );}.elementor-195 .elementor-element.elementor-element-a2fa0d1 .jet-carousel .jet-arrow:before{font-size:21px;}.elementor-195 .elementor-element.elementor-element-a2fa0d1 .jet-carousel .jet-arrow.prev-arrow{left:-43px;right:auto;}.elementor-195 .elementor-element.elementor-element-a2fa0d1 .jet-carousel .jet-arrow.next-arrow{right:-43px;left:auto;}.elementor-195 .elementor-element.elementor-element-a2fa0d1 .jet-carousel .jet-slick-dots{justify-content:center;}.elementor-195 .elementor-element.elementor-element-a2fa0d1 .jet-carousel .jet-slick-dots li{padding-left:5px;padding-right:5px;}.elementor-195 .elementor-element.elementor-element-be1e2c7:not(.elementor-motion-effects-element-type-background), .elementor-195 .elementor-element.elementor-element-be1e2c7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-242471d );}.elementor-195 .elementor-element.elementor-element-be1e2c7{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-195 .elementor-element.elementor-element-be1e2c7 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-195 .elementor-element.elementor-element-ed122fb > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-195 .elementor-element.elementor-element-ed122fb > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-195 .elementor-element.elementor-element-a663aef > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-195 .elementor-element.elementor-element-29b2d09 img{width:50%;}.elementor-195 .elementor-element.elementor-element-f810a2c .elementor-heading-title{color:#FFFFFF;font-family:"Helvetica", Sans-serif;font-weight:500;text-decoration:underline;}body:not(.rtl) .elementor-195 .elementor-element.elementor-element-f810a2c{left:0px;}body.rtl .elementor-195 .elementor-element.elementor-element-f810a2c{right:0px;}.elementor-195 .elementor-element.elementor-element-f810a2c{top:0px;}.elementor-bc-flex-widget .elementor-195 .elementor-element.elementor-element-71a805b.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-195 .elementor-element.elementor-element-71a805b.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-195 .elementor-element.elementor-element-71a805b.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-195 .elementor-element.elementor-element-0ce2f32 > .elementor-widget-container{margin:0px 0px 6px 0px;}.elementor-195 .elementor-element.elementor-element-170807f > .elementor-element-populated{margin:0px 0px 0px 0px;}.elementor-195 .elementor-element.elementor-element-ffaa9dc.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-195 .elementor-element.elementor-element-ffaa9dc.elementor-view-framed .elementor-icon, .elementor-195 .elementor-element.elementor-element-ffaa9dc.elementor-view-default .elementor-icon{fill:#FFFFFF;color:#FFFFFF;border-color:#FFFFFF;}.elementor-195 .elementor-element.elementor-element-ffaa9dc.elementor-position-right .elementor-icon-box-icon{margin-left:5px;}.elementor-195 .elementor-element.elementor-element-ffaa9dc.elementor-position-left .elementor-icon-box-icon{margin-right:5px;}.elementor-195 .elementor-element.elementor-element-ffaa9dc.elementor-position-top .elementor-icon-box-icon{margin-bottom:5px;}.elementor-195 .elementor-element.elementor-element-ffaa9dc .elementor-icon{font-size:27px;}.elementor-195 .elementor-element.elementor-element-ffaa9dc .elementor-icon i{transform:rotate(0deg);}.elementor-195 .elementor-element.elementor-element-ffaa9dc .elementor-icon-box-wrapper{text-align:right;}.elementor-195 .elementor-element.elementor-element-ffaa9dc .elementor-icon-box-title{margin-bottom:8px;color:#FFFFFF;}.elementor-195 .elementor-element.elementor-element-ffaa9dc .elementor-icon-box-title, .elementor-195 .elementor-element.elementor-element-ffaa9dc .elementor-icon-box-title a{font-family:"Helvetica", Sans-serif;font-size:15px;font-weight:500;}.elementor-195 .elementor-element.elementor-element-ffaa9dc .elementor-icon-box-description{color:#FFFFFF;font-family:"Montserrat", Sans-serif;font-size:16px;font-weight:400;}.elementor-195 .elementor-element.elementor-element-ffaa9dc > .elementor-widget-container{margin:-12px 0px 0px 0px;}.elementor-195 .elementor-element.elementor-element-b8adea3.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-195 .elementor-element.elementor-element-5208a64 > .elementor-widget-container{margin:-15px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-195 .elementor-element.elementor-element-0badf00:not(.elementor-motion-effects-element-type-background), .elementor-195 .elementor-element.elementor-element-0badf00 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-52a2d84 );}.elementor-195 .elementor-element.elementor-element-0badf00{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0px;margin-bottom:-12px;}.elementor-195 .elementor-element.elementor-element-0badf00 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-195 .elementor-element.elementor-element-65d0802 > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin:0px 0px 24px 0px;}.elementor-195 .elementor-element.elementor-element-65d0802 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-195 .elementor-element.elementor-element-ef24658 .jet-menu{justify-content:flex-start !important;}.jet-desktop-menu-active .elementor-195 .elementor-element.elementor-element-ef24658 .jet-menu > .jet-menu-item{flex-grow:0;}.elementor-195 .elementor-element.elementor-element-ef24658 .jet-menu .jet-menu-item .top-level-link{font-family:"Helvetica", Sans-serif;font-weight:500;text-transform:uppercase;color:var( --e-global-color-52a2d84 );}.elementor-195 .elementor-element.elementor-element-ef24658 .jet-menu .jet-menu-item:hover > .top-level-link{color:#FFFFFF;}.elementor-195 .elementor-element.elementor-element-ef24658 .jet-menu .jet-menu-item.jet-current-menu-item .top-level-link{color:#FFFFFF;}.elementor-195 .elementor-element.elementor-element-ef24658 .jet-menu ul.jet-sub-menu{background-color:var( --e-global-color-242471d );}.elementor-195 .elementor-element.elementor-element-ef24658 .jet-menu li.jet-sub-menu-item .sub-level-link{font-family:"Helvetica", Sans-serif;color:var( --e-global-color-52a2d84 );}.elementor-195 .elementor-element.elementor-element-ef24658 .jet-menu li.jet-sub-menu-item:hover > .sub-level-link{color:#FFFFFF;}.elementor-195 .elementor-element.elementor-element-ef24658 .jet-mobile-menu__toggle .jet-mobile-menu__toggle-icon{color:#FFFFFF;}.elementor-195 .elementor-element.elementor-element-ef24658 .jet-mobile-menu__container .jet-mobile-menu__back i{color:#FFFFFF;}.elementor-195 .elementor-element.elementor-element-ef24658 .jet-mobile-menu__container .jet-mobile-menu__back svg{color:#FFFFFF;}.elementor-195 .elementor-element.elementor-element-ef24658 .jet-mobile-menu__breadcrumbs .breadcrumb-label{color:#FFFFFF;}.elementor-195 .elementor-element.elementor-element-ef24658 .jet-mobile-menu__breadcrumbs .breadcrumb-divider{color:#FFFFFF;}.elementor-195 .elementor-element.elementor-element-ef24658 .jet-mobile-menu__container .jet-mobile-menu__container-inner{background-color:var( --e-global-color-242471d );}.elementor-195 .elementor-element.elementor-element-ef24658 .jet-mobile-menu__container{z-index:999;}.elementor-195 .elementor-element.elementor-element-ef24658 .jet-mobile-menu-widget .jet-mobile-menu-cover{z-index:calc(999-1);}.elementor-195 .elementor-element.elementor-element-ef24658 .jet-mobile-menu__item .jet-menu-icon{align-self:center;justify-content:center;}.elementor-195 .elementor-element.elementor-element-ef24658 .jet-mobile-menu__item .jet-menu-label{font-family:"Helvetica", Sans-serif;font-weight:500;color:var( --e-global-color-52a2d84 );}.elementor-195 .elementor-element.elementor-element-ef24658 .jet-mobile-menu__item .jet-menu-badge__inner{font-family:"Helvetica", Sans-serif;font-weight:500;}.elementor-195 .elementor-element.elementor-element-ef24658 .jet-mobile-menu__item .jet-menu-badge{align-self:flex-start;}.elementor-195 .elementor-element.elementor-element-ef24658 > .elementor-widget-container{margin:0px 0px 0px 50px;padding:0px 0px 0px 0px;}.elementor-195 .elementor-element.elementor-element-ef24658{z-index:9999;top:0px;}body:not(.rtl) .elementor-195 .elementor-element.elementor-element-ef24658{left:0px;}body.rtl .elementor-195 .elementor-element.elementor-element-ef24658{right:0px;}.elementor-195 .elementor-element.elementor-element-cc67289:not(.elementor-motion-effects-element-type-background), .elementor-195 .elementor-element.elementor-element-cc67289 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-242471d );}.elementor-195 .elementor-element.elementor-element-cc67289 > .elementor-background-overlay{opacity:0.5;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-195 .elementor-element.elementor-element-cc67289{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0px;margin-bottom:0px;}@media(min-width:768px){.elementor-195 .elementor-element.elementor-element-ed122fb{width:100%;}.elementor-195 .elementor-element.elementor-element-27ad5e6{width:18%;}.elementor-195 .elementor-element.elementor-element-71a805b{width:56.704%;}.elementor-195 .elementor-element.elementor-element-170807f{width:13.9%;}.elementor-195 .elementor-element.elementor-element-b8adea3{width:11.376%;}.elementor-195 .elementor-element.elementor-element-65d0802{width:100%;}}@media(max-width:767px){.elementor-195 .elementor-element.elementor-element-a2fa0d1 .jet-carousel__content .jet-carousel__item-text, .elementor-195 .elementor-element.elementor-element-a2fa0d1 .jet-banner__text{font-size:11px;}.elementor-195 .elementor-element.elementor-element-29b2d09 img{max-width:35%;}.elementor-195 .elementor-element.elementor-element-f810a2c{text-align:right;top:96px;}.elementor-195 .elementor-element.elementor-element-f810a2c .elementor-heading-title{font-size:14px;}body:not(.rtl) .elementor-195 .elementor-element.elementor-element-f810a2c{left:-12px;}body.rtl .elementor-195 .elementor-element.elementor-element-f810a2c{right:-12px;}.elementor-195 .elementor-element.elementor-element-ffaa9dc .elementor-icon-box-icon{margin-bottom:5px;}.elementor-195 .elementor-element.elementor-element-0badf00{padding:0px 0px 0px 0px;}.elementor-195 .elementor-element.elementor-element-ef24658 .jet-mobile-menu__toggle .jet-mobile-menu__toggle-icon i{font-size:30px;}.elementor-195 .elementor-element.elementor-element-ef24658 .jet-mobile-menu__toggle .jet-mobile-menu__toggle-icon svg{width:30px;}.elementor-195 .elementor-element.elementor-element-ef24658 .jet-mobile-menu__container .jet-mobile-menu__back i{font-size:30px;}.elementor-195 .elementor-element.elementor-element-ef24658 .jet-mobile-menu__breadcrumbs .breadcrumb-divider i{font-size:8px;}.elementor-195 .elementor-element.elementor-element-ef24658 .jet-mobile-menu__breadcrumbs .breadcrumb-divider svg{width:8px;}.elementor-195 .elementor-element.elementor-element-ef24658 .jet-mobile-menu__container{width:250px;z-index:9999;}.elementor-195 .elementor-element.elementor-element-ef24658 .jet-mobile-menu-widget .jet-mobile-menu-cover{z-index:calc(9999-1);}.elementor-195 .elementor-element.elementor-element-ef24658{z-index:9999;top:-196px;}body:not(.rtl) .elementor-195 .elementor-element.elementor-element-ef24658{left:-350px;}body.rtl .elementor-195 .elementor-element.elementor-element-ef24658{right:-350px;}}/* Start custom CSS for html, class: .elementor-element-5208a64 */.custom-cart-icon-wrapper { position: relative; display: inline-block; cursor: pointer; padding: 8px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .custom-cart-icon { width: 32px; height: 32px; transition: transform 0.2s ease, filter 0.3s ease; display: block; } .custom-cart-count { position: absolute; top: -5px; right: -5px; background-color: #ffc107; color: #000000; font-size: 12px; font-weight: bold; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 10; transition: all 0.3s ease; } /* Responsive - CARRITO FLOTANTE MEJORADO en móvil */ @media (max-width: 768px) { .custom-cart-icon-wrapper { padding: 12px; position: fixed; top: 65px; right: 20px; /* Cambiado de left: 90% a right para mejor posicionamiento */ transform: none; /* Removido transform para simplicidad */ z-index: 9999; /* MEJORAS VISUALES PRINCIPALES */ background: #14213d; border-radius: 50%; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* Animación suave */ animation: floatPulse 3s ease-in-out infinite; } /* Estado hover/active en móvil */ .custom-cart-icon-wrapper:active { transform: scale(0.95); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.15); } .custom-cart-icon { width: 28px; height: 28px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)); } .custom-cart-count { font-size: 10px; font-weight: 600; width: 20px; height: 20px; padding: 0; top: -8px; right: -8px; background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%); border: 2px solid #ffffff; box-shadow: 0 2px 8px rgba(255, 193, 7, 0.4); } /* ESTADOS DINÁMICOS PARA MEJOR UX */ /* Cuando hay scroll - más compacto y con mejor contraste */ .custom-cart-icon-wrapper.scrolled { padding: 10px; background: linear-gradient(135deg, #ffffff 0%, #f1f3f4 100%); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2), 0 3px 12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.08); } /* Variante alternativa con fondo oscuro para mejor contraste */ .custom-cart-icon-wrapper.dark-mode { background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); border: 1px solid rgba(255, 255, 255, 0.1); } .custom-cart-icon-wrapper.dark-mode .custom-cart-icon { filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); } } /* ANIMACIONES SUTILES */ @keyframes floatPulse { 0%, 100% { transform: translateY(0px) scale(1); } 50% { transform: translateY(-2px) scale(1.02); } } /* Animación cuando se añade item */ @keyframes bounceCount { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } .custom-cart-count.updated { animation: bounceCount 0.4s ease-out; } /* MEJORAS ADICIONALES PARA UX */ /* Estado cuando el carrito está vacío */ .custom-cart-icon-wrapper.empty { opacity: 0.7; } .custom-cart-icon-wrapper.empty:hover { opacity: 1; } /* Indicador visual cuando hay muchos items */ .custom-cart-count.many-items { background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); color: #ffffff; animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4); } 50% { box-shadow: 0 2px 16px rgba(231, 76, 60, 0.6); } 100% { box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4); } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-5208a64 */.custom-cart-icon-wrapper { position: relative; display: inline-block; cursor: pointer; padding: 8px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .custom-cart-icon { width: 32px; height: 32px; transition: transform 0.2s ease, filter 0.3s ease; display: block; } .custom-cart-count { position: absolute; top: -5px; right: -5px; background-color: #ffc107; color: #000000; font-size: 12px; font-weight: bold; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 10; transition: all 0.3s ease; } /* Responsive - CARRITO FLOTANTE MEJORADO en móvil */ @media (max-width: 768px) { .custom-cart-icon-wrapper { padding: 12px; position: fixed; top: 65px; right: 20px; /* Cambiado de left: 90% a right para mejor posicionamiento */ transform: none; /* Removido transform para simplicidad */ z-index: 9999; /* MEJORAS VISUALES PRINCIPALES */ background: #14213d; border-radius: 50%; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* Animación suave */ animation: floatPulse 3s ease-in-out infinite; } /* Estado hover/active en móvil */ .custom-cart-icon-wrapper:active { transform: scale(0.95); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.15); } .custom-cart-icon { width: 28px; height: 28px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)); } .custom-cart-count { font-size: 10px; font-weight: 600; width: 20px; height: 20px; padding: 0; top: -8px; right: -8px; background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%); border: 2px solid #ffffff; box-shadow: 0 2px 8px rgba(255, 193, 7, 0.4); } /* ESTADOS DINÁMICOS PARA MEJOR UX */ /* Cuando hay scroll - más compacto y con mejor contraste */ .custom-cart-icon-wrapper.scrolled { padding: 10px; background: linear-gradient(135deg, #ffffff 0%, #f1f3f4 100%); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2), 0 3px 12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.08); } /* Variante alternativa con fondo oscuro para mejor contraste */ .custom-cart-icon-wrapper.dark-mode { background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); border: 1px solid rgba(255, 255, 255, 0.1); } .custom-cart-icon-wrapper.dark-mode .custom-cart-icon { filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); } } /* ANIMACIONES SUTILES */ @keyframes floatPulse { 0%, 100% { transform: translateY(0px) scale(1); } 50% { transform: translateY(-2px) scale(1.02); } } /* Animación cuando se añade item */ @keyframes bounceCount { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } .custom-cart-count.updated { animation: bounceCount 0.4s ease-out; } /* MEJORAS ADICIONALES PARA UX */ /* Estado cuando el carrito está vacío */ .custom-cart-icon-wrapper.empty { opacity: 0.7; } .custom-cart-icon-wrapper.empty:hover { opacity: 1; } /* Indicador visual cuando hay muchos items */ .custom-cart-count.many-items { background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); color: #ffffff; animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4); } 50% { box-shadow: 0 2px 16px rgba(231, 76, 60, 0.6); } 100% { box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4); } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-5208a64 */.custom-cart-icon-wrapper { position: relative; display: inline-block; cursor: pointer; padding: 8px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .custom-cart-icon { width: 32px; height: 32px; transition: transform 0.2s ease, filter 0.3s ease; display: block; } .custom-cart-count { position: absolute; top: -5px; right: -5px; background-color: #ffc107; color: #000000; font-size: 12px; font-weight: bold; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 10; transition: all 0.3s ease; } /* Responsive - CARRITO FLOTANTE MEJORADO en móvil */ @media (max-width: 768px) { .custom-cart-icon-wrapper { padding: 12px; position: fixed; top: 65px; right: 20px; /* Cambiado de left: 90% a right para mejor posicionamiento */ transform: none; /* Removido transform para simplicidad */ z-index: 9999; /* MEJORAS VISUALES PRINCIPALES */ background: #14213d; border-radius: 50%; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* Animación suave */ animation: floatPulse 3s ease-in-out infinite; } /* Estado hover/active en móvil */ .custom-cart-icon-wrapper:active { transform: scale(0.95); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.15); } .custom-cart-icon { width: 28px; height: 28px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)); } .custom-cart-count { font-size: 10px; font-weight: 600; width: 20px; height: 20px; padding: 0; top: -8px; right: -8px; background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%); border: 2px solid #ffffff; box-shadow: 0 2px 8px rgba(255, 193, 7, 0.4); } /* ESTADOS DINÁMICOS PARA MEJOR UX */ /* Cuando hay scroll - más compacto y con mejor contraste */ .custom-cart-icon-wrapper.scrolled { padding: 10px; background: linear-gradient(135deg, #ffffff 0%, #f1f3f4 100%); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2), 0 3px 12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.08); } /* Variante alternativa con fondo oscuro para mejor contraste */ .custom-cart-icon-wrapper.dark-mode { background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); border: 1px solid rgba(255, 255, 255, 0.1); } .custom-cart-icon-wrapper.dark-mode .custom-cart-icon { filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); } } /* ANIMACIONES SUTILES */ @keyframes floatPulse { 0%, 100% { transform: translateY(0px) scale(1); } 50% { transform: translateY(-2px) scale(1.02); } } /* Animación cuando se añade item */ @keyframes bounceCount { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } .custom-cart-count.updated { animation: bounceCount 0.4s ease-out; } /* MEJORAS ADICIONALES PARA UX */ /* Estado cuando el carrito está vacío */ .custom-cart-icon-wrapper.empty { opacity: 0.7; } .custom-cart-icon-wrapper.empty:hover { opacity: 1; } /* Indicador visual cuando hay muchos items */ .custom-cart-count.many-items { background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); color: #ffffff; animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4); } 50% { box-shadow: 0 2px 16px rgba(231, 76, 60, 0.6); } 100% { box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4); } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-5208a64 */.custom-cart-icon-wrapper { position: relative; display: inline-block; cursor: pointer; padding: 8px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .custom-cart-icon { width: 32px; height: 32px; transition: transform 0.2s ease, filter 0.3s ease; display: block; } .custom-cart-count { position: absolute; top: -5px; right: -5px; background-color: #ffc107; color: #000000; font-size: 12px; font-weight: bold; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 10; transition: all 0.3s ease; } /* Responsive - CARRITO FLOTANTE MEJORADO en móvil */ @media (max-width: 768px) { .custom-cart-icon-wrapper { padding: 12px; position: fixed; top: 65px; right: 20px; /* Cambiado de left: 90% a right para mejor posicionamiento */ transform: none; /* Removido transform para simplicidad */ z-index: 9999; /* MEJORAS VISUALES PRINCIPALES */ background: #14213d; border-radius: 50%; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* Animación suave */ animation: floatPulse 3s ease-in-out infinite; } /* Estado hover/active en móvil */ .custom-cart-icon-wrapper:active { transform: scale(0.95); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.15); } .custom-cart-icon { width: 28px; height: 28px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)); } .custom-cart-count { font-size: 10px; font-weight: 600; width: 20px; height: 20px; padding: 0; top: -8px; right: -8px; background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%); border: 2px solid #ffffff; box-shadow: 0 2px 8px rgba(255, 193, 7, 0.4); } /* ESTADOS DINÁMICOS PARA MEJOR UX */ /* Cuando hay scroll - más compacto y con mejor contraste */ .custom-cart-icon-wrapper.scrolled { padding: 10px; background: linear-gradient(135deg, #ffffff 0%, #f1f3f4 100%); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2), 0 3px 12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.08); } /* Variante alternativa con fondo oscuro para mejor contraste */ .custom-cart-icon-wrapper.dark-mode { background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); border: 1px solid rgba(255, 255, 255, 0.1); } .custom-cart-icon-wrapper.dark-mode .custom-cart-icon { filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); } } /* ANIMACIONES SUTILES */ @keyframes floatPulse { 0%, 100% { transform: translateY(0px) scale(1); } 50% { transform: translateY(-2px) scale(1.02); } } /* Animación cuando se añade item */ @keyframes bounceCount { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } .custom-cart-count.updated { animation: bounceCount 0.4s ease-out; } /* MEJORAS ADICIONALES PARA UX */ /* Estado cuando el carrito está vacío */ .custom-cart-icon-wrapper.empty { opacity: 0.7; } .custom-cart-icon-wrapper.empty:hover { opacity: 1; } /* Indicador visual cuando hay muchos items */ .custom-cart-count.many-items { background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); color: #ffffff; animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4); } 50% { box-shadow: 0 2px 16px rgba(231, 76, 60, 0.6); } 100% { box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4); } }/* End custom CSS */