/* Theme Name: Hello Elementor Child Theme URI: https://github.com/elementor/hello-theme-child/ Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team Author: Elementor Team Author URI: https://elementor.com/ Template: hello-elementor Version: 2.0.0 Text Domain: hello-elementor-child License: GNU General Public License v3 or later. License URI: https://www.gnu.org/licenses/gpl-3.0.html Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready */ /* Add your custom styles here */ /*BODY BACKGROUND*/ html { margin-top: 0!important; } #wpadminbar { position: absolute!important; } /* ------------------------------------------------------------- 1. BODY LIMPIO: Solo el color base (Rendimiento 100%) ------------------------------------------------------------- */ html { margin-top: 0 !important; } #wpadminbar { position: absolute !important; } body { background-color: #4e2201; /* Color base de tu Figma */ margin: 0; padding: 0; min-height: 100vh; } /* ------------------------------------------------------------- 2. EL FOCO DE LUZ: Capa independiente fija (Scroll ultra fluido) ------------------------------------------------------------- */ body::after { content: ""; position: fixed; /* 🟢 El truco maestro: fijamos la capa entera, cero tirones al hacer scroll */ top: 0; left: 0; width: 100vw; height: 100vh; /* Tu gradiente intacto */ background-image: radial-gradient(circle at 90% 95%, rgba(211, 140, 76, 0.45) 0%, rgba(183, 104, 45, 0.15) 45%, transparent 85%); background-blend-mode: screen; /* Lo mandamos al fondo del todo, por detrás de la web */ z-index: -1; pointer-events: none; /* Evita que esta capa bloquee los clics en los botones reales */ } /*--*/ /*--*/ /*--*/ /*--*/ /*MENU HOVER LINKS*/ /* 1. Preparar el contenedor del enlace */ .hfe-nav-menu nav > ul > li > a { position: relative!important; text-decoration: none!important; padding-bottom: 8px!important; padding-top: 8px!important; display: flex !important; } /* 2. La línea animada (Hover + Active) */ .hfe-nav-menu nav > ul > li > a::after { content: ''!important; position: absolute!important; bottom: 0!important; left: 0!important; width: 0; height: 1px!important; background-color: #fbfbfb!important; /* FORZAMOS EL BLANCO ROTO */ transition: width 0.3s ease-in-out!important; } /* 3. Activar línea en HOVER */ .hfe-nav-menu nav > ul > li > a:hover::after { width: 100%!important; } /* 4. Activar línea en PÁGINA ACTUAL (ACTIVE) */ .hfe-nav-menu nav > ul > li.current-menu-item > a::after, .hfe-nav-menu nav > ul > li.current_page_item > a::after { width: 100%!important; } /* 5. FIX COLOR DEL TEXTO (Por si también sale naranja) */ .hfe-nav-menu nav > ul > li > a { color: #fbfbfb!important; } /*--*/ /*--*/ /*--*/ /*--*/ /*--*/ /*--*/ /*SOCIALS ICONOS CSS*/ .elementor-social-icon { background-color: rgba(255, 255, 255, 0.08)!important; /* Relleno blanco muy sutil */ border: 1px solid rgba(255, 255, 255, 0.15)!important; /* El borde fino de tu Figma */ backdrop-filter: blur(12px); /* El "Glass" que deja ver el fondo ámbar */ -webkit-backdrop-filter: blur(12px); /* Fix para Safari */ border-radius: 50%!important; /* Fuerza la forma circular */ width: 55px!important; /* Ajusta según el tamaño de tu frame */ height: 55px!important; display: inline-flex!important; align-items: center; justify-content: center; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1)!important; } /* 2. Estilo del icono (Facebook, TikTok, Instagram) */ .elementor-social-icon i, .elementor-social-icon svg { color: #fbfbfb!important; /* El blanco roto que elegimos para el menú */ fill: #fbfbfb!important; font-size: 24px!important; /* Tamaño del logo dentro del círculo */ } /* 3. Efecto Hover (Interacción Premium) */ .elementor-social-icon:hover { background-color: rgba(255, 255, 255, 0.18)!important; /* Se ilumina un poco más */ border-color: rgba(255, 255, 255, 0.4)!important; transform: translateY(-5px) scale(1.05); /* Sube y crece sutilmente */ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Sombra suave para dar profundidad */ } /*--*/ /*--*/ /*--*/ /*--*/ /*--*/ /* ============================================================= FIX ENLACES MORADOS (Respetando los colores personalizados) ============================================================= */ /*a:visited { color: inherit !important; }*/ /*--*/ /*--*/ /*--*/ /* ------------------------------------------------------------- BANNER Y BOTONES: Fake Glass (100% Rendimiento, 0 Bugs) ------------------------------------------------------------- */ .GlassNegro { /* 1. Fondo negro al 20% (La clave de la transparencia limpia que viste en Figma) */ background-color: rgba(0, 0, 0, 0.15) !important; /* 2. Sombreado interno para darle ese toque 3D de "cristal grueso" */ box-shadow: inset 6px 6px 15px rgba(0, 0, 0, 0.25) !important; /* 3. Borde fino para definir la forma */ border: 1px solid rgba(255, 255, 255, 0.06) !important; /* 4. Aristas vivas */ border-radius: 0px !important; /* 5. Limpieza total: FUERA filtros y FUERA transforms problemáticos */ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transform: none !important; position: relative; overflow: hidden; } /*--*/ /*--*/ /*--*/ /*--*/ /*--* /*--*/ /*--*/ /*--*/ /*--*/ .GlassBlanco { /* 1. Fondo: Blanco roto (#FBFBFB) al 5% de opacidad */ background: rgba(251, 251, 251, 0.05)!important; /* 2. Filtro: Blur de fondo de 4px (Background blur: 4) */ /* Para ver el efecto, el fondo del elemento debe ser traslúcido [2] */ backdrop-filter: blur(4px)!important; -webkit-backdrop-filter: blur(4px)!important; /* Soporte para Safari */ /* 3. Borde: Blanco puro (#FFFFFF) al 30% con grosor de 0.5px */ /* Elementor usa 'border-box' por defecto, lo que simula el trazo 'Inside' de Figma */ border: 1px solid rgba(255, 255, 255, 0.3)!important; /* 4. Esquinas: Radio de 1px según el panel de Appearance */ border-radius: 1px!important; /* 5. Optimización: Forzar renderizado por GPU para evitar banding [3] */ transform: translateZ(0); position: relative; } /*--*/ /*--* /*--*/ /*--*/ /*--*/ /* TARJETA DE PRODUCTO */ /* 1. Reset de la estructura para colapsar el Grid del plugin */ .elementor-element-3b08a65.filter-content-row { display: flex!important; grid-template-columns: none!important; justify-content: flex-start!important; padding: 0!important; } /* 2. LA TARJETA: Color sólido + Medidas exactas + Clip-path */ .tarjetaPortada .shopengine-single-product-item { width: 335px!important; /* AJUSTA EL ANCHO AQUÍ */ height: 408px!important; /* AJUSTA EL ALTO AQUÍ */ background-color: #F39125!important; /* Naranja base sólido */ background-image: none!important; /* MATA LAS RAYAS VERTICALES DEFINITIVAMENTE */ /* El recorte simétrico de esquinas superiores al 18% */ clip-path: polygon(18% 0%, 82% 0%, 100% 15%, 100% 100%, 0% 100%, 0% 15%)!important; display: flex!important; flex-direction: column!important; align-items: center!important; padding: 42px 0 0 0!important; /* 0 abajo para que el botón naranja pegue */ border: none!important; box-shadow: none!important; position: relative; overflow: hidden; } /*OPCION TRANSPARENTE*/ .shopengine-single-product-item { width: 335px!important; height: 408px!important; z-index: 10!important; /* El recorte simétrico de esquinas superiores al 18% */ clip-path: polygon(18% 0%, 82% 0%, 100% 15%, 100% 100%, 0% 100%, 0% 15%)!important; display: flex!important; flex-direction: column!important; align-items: center!important; padding: 42px 0 0 0!important; /* 🔴 ELIMINAMOS EL BORDE CLÁSICO PORQUE SE CORTA CON EL CLIP-PATH */ border: none!important; box-shadow: none!important; position: relative; overflow: hidden; /* 🟢 MAGIA SVG RESPONSIVE (1px blindado contra recortes): */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='18,0.5 82,0.5 99.5,15 99.5,99.5 0.5,99.5 0.5,15' fill='none' stroke='rgba(255,255,255,0.3)' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")!important; /* 1. Fondo Glass: Blanco roto (#FBFBFB) al 5% de opacidad */ background-color: rgba(251, 251, 251, 0.05)!important; background-size: 100% 100%!important; background-position: center!important; background-repeat: no-repeat!important; /* 2. Filtro: Blur de fondo de 4px */ backdrop-filter: blur(4px)!important; -webkit-backdrop-filter: blur(4px)!important; /* 4. Esquinas: Radio de 1px */ border-radius: 1px!important; /* 5. Optimización GPU */ /*transform: translateZ(0);*/ } /* 3. MATAR EL OJO, EL CÍRCULO AZUL Y CATEGORÍAS (Limpieza total) */ .shopengine-quickview-trigger, .product-tag-sale-badge, .product-category, .product-rating, .loop-product--btns { display: none!important; } /* 4. IMAGEN DEL PRODUCTO (Ajuste del tarro) */ .product-thumb { margin-top: 20px!important; } .product-thumb img { width: 100%!important; max-width: 200px!important; /* Mantenemos tu límite original */ aspect-ratio: 1 / 1!important; /* Forzamos a que sea siempre un cuadrado perfecto */ object-fit: contain!important; /* Se adapta sin deformarse ni recortarse */ object-position: center!important; /* Centrado absoluto */ } /* 5. TEXTOS Y PRECIO (Blanco roto #fbfbfb) */ .product-title a { color: #fbfbfb!important; font-family: 'Playfair Display', serif!important; font-weight: 500!important; font-style: normal!important; font-size: 20px!important; text-decoration: none!important; } .product-price.price, .product-price.price bdi { color: #fbfbfb!important; font-family: 'DM Sans', sans-serif!important; font-weight: 900!important; font-size: 30px!important; } /* 6. BOTÓN "AÑADIR AL CARRITO": Bloque sólido al fondo */ .add-to-cart-bt { margin-top: auto!important; /* Empuja el botón al final de la tarjeta */ width: 100%!important; } .add-to-cart-bt a { font-size: 18px !important; } .add_to_cart_button { background-color: #F17D00!important; /* Naranja más intenso para el botón */ color: #fbfbfb!important; width: 100%!important; padding: 22px 0!important; border-radius: 0!important; text-transform: none!important; font-family: 'DM Sans', sans-serif!important; font-weight: 400!important; border: none!important; display: block!important; text-align: center!important; justify-self: center !important; } /* FIX: ELIMINAR MARGEN NARANJA DE TODAS LAS TARJETAS SHOPENGINE */ div.elementor-widget.elementor-widget-shopengine-filterable-product-list { margin: 0px !important; } /*--*/ /*--*/ /*--*/ /*--*/ /*--* /*--*/ /*--*/ /*--*/ /*--*/ /* PROTOCOLO FIDELIDAD: Eliminar enlace 'Ver carrito' residual */ .added_to_cart.wc-forward { display: none!important; } /*--*/ /*--*/ /*--*/ /*--*/ /*--*/ /*--*/ /*--*/ /*--*/ /* CÓDIGO ADICIONAL: Alineación Horizontal Título + Precio */ .tarjetaPortada .shopengine-single-product-item, .shopengine-single-product-item{ display: grid!important; /* Creamos 2 columnas: una flexible para el texto y una que se ajusta al precio */ grid-template-columns: 1fr auto!important; column-gap: 15px!important; row-gap: 5px!important; align-items: center!important; /* Ajustamos padding lateral para que el texto no toque el borde del cristal */ padding-left: 25px!important; padding-right: 25px!important; } /* 1. Forzamos al Tarro de miel a ocupar las dos columnas arriba */ .product-thumb { grid-column: 1 / 3!important; grid-row: 1!important; } .product-thumb { /* 1. Alineación dentro del Grid */ justify-self: center!important; /* Centra la caja horizontalmente */ align-self: center!important; /* Centra la caja verticalmente en su fila */ /* 2. Fuerza al contenido interno (el link y la img) a centrarse */ display: flex!important; justify-content: center!important; width: 100%!important; } .product-thumb a, .product-thumb img { display: block!important; margin: 0 auto!important; /* Doble seguridad de centrado */ width: 100%!important; } /* 2. El Título se queda en la columna 1 (izquierda) */ .product-title { grid-column: 1!important; grid-row: 2!important; text-align: left!important; margin: 0!important; } /* 3. El Precio se mueve a la columna 2 (derecha) en la misma fila */ .product-price { grid-column: 2!important; grid-row: 2!important; text-align: right!important; margin: 0!important; color: #fbfbfb !important; } .product-price p span { color: #fbfbfb !important; font-weight: 400 !important; } /* 4. El subtexto (Clásica) lo ponemos debajo del título */ .product-category { grid-column: 1!important; grid-row: 3!important; text-align: left!important; margin-top: -25px!important; /* Lo pegamos un poco al título */ display: block!important; } /* 5. El bloque del Botón ocupa todo el ancho abajo del todo */ .add-to-cart-bt { grid-column: 1 / 3!important; grid-row: 4!important; width: calc(100% + 50px)!important; /* Compensa el padding lateral de la tarjeta */ margin-left: -25px!important; } /* HIDE: Quitamos las estrellas de valoración que ensucian el diseño */ .product-rating { display: none!important; } .product-category ul li a { color: #fbfbfb!important; font-family: 'DM Sans', sans-serif!important; font-weight: 300!important; font-size: 15px!important; } /*--*/ /*--*/ /*--*/ /*--*/ /*--*/ /*--*/ /*--*/ /*--*/ /* TARJETA DECORATIVA GEOMÉTRICA (Color sólido + Imagen de Elementor) */ .tarjetaDecorativa { width: 335px !important; /* Misma anchura que tus productos */ height: 408px !important; /* Misma altura que tus productos */ position: relative; overflow: hidden; min-width: 335px !important; max-width: 335px !important; min-height: 408px !important; flex-shrink: 0 !important; /* Evita que Elementor lo encoja al añadir elementos al lado */ /* La forma geométrica exacta */ clip-path: polygon(18% 0%, 82% 0%, 100% 15%, 100% 100%, 0% 100%, 0% 15%) !important; /* El color de fondo base (se verá detrás de los PNG transparentes que subas) */ background-color: #FFC754 !important; /* Limpieza para evitar que herede sombras o bordes no deseados */ border: none !important; box-shadow: none !important; } /*--*/ /*--*/ /*--*/ /*--*/ /*--*/ /*--*/ /*--*/ /*--*/ /* ------------------------------------------------------------- FIX: Ocultar la barra de filtros vacía de ShopEngine ------------------------------------------------------------- */ .shopengine-filterable-product-wrap .filter-nav { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; } /*--*/ /*--*/ /*--*/ /*--*/ /*--*/ /*--*/ /*--*/ /*--*/ /* ------------------------------------------------------------- FIX GLOBAL: ESTRUCTURA SHOPENGINE (TAMAÑO 335x408, MÁRGENES Y HOVER) (Controla la caja de Elementor, estira los wrappers y evita cortes) ------------------------------------------------------------- */ /* 1. Atacamos al widget base de Elementor (Fuerza el tamaño exacto) */ .elementor-widget-shopengine-filterable-product-list.tarjetaPortada, .elementor-widget-shopengine-filterable-product-list { width: 335px !important; height: 408px !important; flex: 0 0 335px !important; /* Inquebrantable en Flexbox */ max-width: 335px !important; margin: 0 auto !important; /* Centrado automático si sobra espacio */ padding: 0 !important; position: relative !important; z-index: 10 !important; overflow: visible !important; /* 🟢 Impide que el Hover 3D se corte */ } /* 2. Divs fantasma internos: Heredan el 100% del tamaño, sin márgenes ni recortes */ .tarjetaPortada .shopengine-widget, .tarjetaPortada .shopengine-shopengine-filterable-product-list, .tarjetaPortada .shopengine-filterable-product-wrap, .tarjetaPortada .filter-content, .tarjetaPortada .filter-content-row, .elementor-widget-shopengine-filterable-product-list .elementor-widget-container, .elementor-widget-shopengine-filterable-product-list .shopengine-widget, .elementor-widget-shopengine-filterable-product-list .shopengine-shopengine-filterable-product-list, .elementor-widget-shopengine-filterable-product-list .shopengine-filterable-product-wrap, .elementor-widget-shopengine-filterable-product-list .filter-content, .elementor-widget-shopengine-filterable-product-list .filter-content-row { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; display: flex !important; justify-content: center !important; align-items: center !important; border: none !important; overflow: visible !important; /* 🟢 Libertad total para el zoom */ } /* 3. La propia tarjeta: Aseguramos que no se desplace de su caja */ .tarjetaPortada .shopengine-single-product-item, .shopengine-single-product-item { margin: 0 !important; } /*--*/ /*--*/ /*--*/ /*--*/ /*--*/ /*--*/ /*--*/ /*--*/ /* ------------------------------------------------------------- FIX: Fila de Texto + Tarjetas (Miel Cruda) el texto de los cojones que empuja las tarjetas ------------------------------------------------------------- */ /* 1. Blindar el widget de ShopEngine para que sea EXACTAMENTE de 395px */ /* (La tarjeta decorativa ya está blindada con su propia clase) */ .elementor-element-48e680f { width: 335px !important; min-width: 335px !important; max-width: 335px !important; flex: 0 0 335px !important; /* flex-grow: 0, flex-shrink: 0, flex-basis: 395px */ } /* 2. Forzar al texto a ocupar el espacio restante y ajustarse */ .elementor-element-9be9151 { flex: 1 1 0% !important; /* Crece todo lo que puedas, encoje si es necesario, base 0 */ min-width: 0 !important; /* CRUCIAL: Evita que el texto empuje hacia afuera si es muy largo */ } /* 3. Asegurar que el texto dentro del widget salte de línea correctamente */ .elementor-element-9be9151 .elementor-heading-title { width: 100% !important; max-width: 100% !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: break-word !important; } /* ------------------------------------------------------------- EFECTO HOVER 3D (TILT): Tarjetas de Producto ------------------------------------------------------------- */ /* 1. Preparamos las variables y la transición elástica */ .tarjetaPortada .shopengine-single-product-item, .shopengine-single-product-item { /* Creamos variables vacías que el JS llenará */ --rotacion-x: 0deg; --rotacion-y: 0deg; /* Una transición suave y un poco elástica para que el movimiento no sea brusco */ transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease-in-out !important; -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; will-change: transform !important; transform: perspective(1000px) translateZ(0) scale(1) !important; } /* 2. El crecimiento y la inclinación en Hover */ .tarjetaPortada .shopengine-single-product-item:hover, .shopengine-single-product-item:hover { /* Aquí ocurre la magia: Aplicamos perspectiva, el zoom del 3% y las variables del JS */ transform: perspective(1000px) scale(1.03) rotateX(var(--rotacion-x)) rotateY(var(--rotacion-y)) translateZ(0) !important; z-index: 20 !important; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important; /* Sombra un pelín más fuerte para el 3D */ } /*--*/ /*--*/ /*--*/ /*--*/ /*--*/ /*--*/ /*--*/ /*--*/ /* ------------------------------------------------------------- FIX: Icono Usuario (Alineación y Tamaño Perfecto 56x56) ------------------------------------------------------------- */ /* 1. Matamos el espacio fantasma de las letras */ .elementor-element-3fd90ea .elementor-icon-wrapper { margin: 0 !important; line-height: 0 !important; } /* 2. Forzamos el círculo a 56x56 para que iguale al carrito */ .elementor-element-3fd90ea .elementor-icon { display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; /* 🟢 Aquí estaba el padding a 0 que nos jodía. Lo cambiamos por medidas exactas: */ padding: 0 !important; width: 56px !important; height: 56px !important; border-radius: 50% !important; } /* 3. Controlamos el tamaño del muñequito blanco de dentro */ .elementor-element-3fd90ea .elementor-icon svg { display: block !important; width: 28px !important; /* Si el muñeco se ve muy grande/pequeño, cambia este número */ height: auto !important; } /* 3. El golpe final: Le decimos al SVG que es un bloque, no texto */ .elementor-element-3fd90ea .elementor-icon svg, .elementor-element-82ce681 .elementor-icon svg { display: block !important; } /*--*/ /*--*/ /*--*/ /*--*/ /*--*/ /*--*/ /*--*/ /*--*/ /* ------------------------------------------------------------- FIX DEFINITIVO: Sobrescribir FunnelKit usando su propio ID ------------------------------------------------------------- */ /* 1. Atacamos al ID directo para forzar el círculo naranja */ #fkcart-mini-toggler { width: 56px !important; height: 56px !important; background-color: #F17D00 !important; /* Tu naranja */ border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; border: none !important; box-shadow: none !important; transition: transform 0.3s ease-in-out !important; } /* Hover */ #fkcart-mini-toggler:hover { transform: scale(1.05) !important; } /* 2. Fulminamos el SVG original de FunnelKit */ #fkcart-mini-toggler svg.fkcart-icon-checkout { display: none !important; } /* 3. Inyectamos el SVG sólido usando el contenedor interno (TAMAÑO CORREGIDO) */ #fkcart-mini-toggler .fkcart-shortcode-icon-wrap { width: 100% !important; height: 100% !important; display: block !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 56 56' fill='none'%3E%3Cpath d='M36.9219 31.467L38.9737 22.4392C39.1218 21.7874 38.6263 21.1667 37.9579 21.1667H20.9101L20.5122 19.2218C20.4131 18.737 19.9865 18.3889 19.4917 18.3889H15.0417C14.4664 18.3889 14 18.8552 14 19.4306V20.125C14 20.7003 14.4664 21.1667 15.0417 21.1667H18.0748L21.1237 36.0727C20.3943 36.4922 19.9028 37.2787 19.9028 38.1806C19.9028 39.5229 20.991 40.6111 22.3333 40.6111C23.6757 40.6111 24.7639 39.5229 24.7639 38.1806C24.7639 37.5003 24.4841 36.8856 24.0337 36.4444H33.1329C32.6826 36.8856 32.4028 37.5003 32.4028 38.1806C32.4028 39.5229 33.491 40.6111 34.8333 40.6111C36.1757 40.6111 37.2639 39.5229 37.2639 38.1806C37.2639 37.2182 36.7045 36.3866 35.8933 35.9928L36.1327 34.9392C36.2809 34.2874 35.7854 33.6667 35.117 33.6667H23.4669L23.1828 32.2778H35.9061C36.3925 32.2778 36.8141 31.9412 36.9219 31.467Z' fill='%23FBFBFB'/%3E%3C/svg%3E") !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; position: relative !important; } /* 4. Estilo y posición del globo rojo con el número */ #fkcart-mini-toggler .fkcart-item-count { position: absolute !important; top: 0px !important; /* 🟢 Lo bajamos para que muerda el círculo */ right: 0px !important; /* 🟢 Lo empujamos a la izquierda para que no flote */ background-color: #D32F2F !important; color: #FBFBFB !important; border-radius: 50% !important; font-size: 13px !important; font-weight: bold !important; line-height: 1 !important; width: 22px !important; height: 22px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; } /*--*/ /*--*/ /*--*/ /*--*/ /* ============================================================= FUNNELKIT CART MODAL: Rediseño Premium Miel del Olmo ============================================================= */ /* 1. Fondo general del cajón (Marrón corporativo + Foco de luz) */ .fkcart-preview-ui { background-color: #4e2201 !important; /* Tu marrón original */ /* El mismo gradiente de luz de tu web, enfocado abajo a la derecha del carrito */ background-image: radial-gradient(circle at 90% 95%, rgba(211, 140, 76, 0.45) 0%, rgba(183, 104, 45, 0.15) 45%, transparent 85%) !important; background-blend-mode: screen !important; /* Ilumina el marrón */ border-left: 1px solid rgba(255, 255, 255, 0.08) !important; /* Línea separadora sutil */ } /* Forzamos los paneles internos a ser transparentes para ver la luz del fondo */ .fkcart-panel, .fkcart-slider-header, .fkcart-slider-footer, .fkcart-order-summary { background-color: transparent !important; border: none !important; } /* 2. Tipografías y Colores Base */ /* Texto blanco roto y líneas tenues */ .fkcart-preview-ui * { color: #FBFBFB !important; border-color: rgba(255, 255, 255, 0.1) !important; } /* Títulos con Playfair Display (Elegancia) */ .fkcart-title, .fkcart-zero-state-title, .fkcart-drawer-header-heading { font-family: 'Playfair Display', serif !important; font-weight: 500 !important; letter-spacing: 0.5px !important; } .fkcart-title { font-size: 24px !important; } .fkcart-item-title{ font-family: 'Playfair Display', serif !important; font-size: 18px !important; font-weight: 300 !important; } /* Precios, cantidades y textos con DM Sans (Legibilidad) */ .woocommerce-Price-amount, .fkcart-quantity__input, .fkcart-summary-text, .fkcart-checkout--text, .fkcart-coupon-title, .fkcart-shipping-tax-calculation-text, .fkcart-zero-state-text { font-family: 'DM Sans', sans-serif !important; font-size: 18px !important; } .woocommerce-Price-amount { font-weight: normal !important; color: #F17D00 !important; /* Toque naranja para que destaquen los precios */ } /* 3. Botón Principal (Finalizar Compra) */ #fkcart-checkout-button, .fkcart-shop-button { background-color: #F17D00 !important; /* Tu Naranja */ border-radius: 0 !important; /* Aristas vivas como en la web */ justify-content: center !important; padding: 18px !important; text-transform: none !important; font-weight: 500 !important; transition: all 0.3s ease !important; } #fkcart-checkout-button:hover, .fkcart-shop-button:hover { background-color: #d16b00 !important; /* Naranja oscurecido al pasar el ratón */ } /* 4. Estilos de los Productos en la Lista */ .fkcart--item { border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; padding-bottom: 15px !important; margin-bottom: 15px !important; } .fkcart-image-wrapper img { border-radius: 0 !important; /* Quitamos bordes redondeados */ background-color: rgba(255, 255, 255, 0.05) !important; /* Cuadrado tenue detrás de la miel */ } /* 5. Selector de Cantidad (Minimalista) */ .fkcart-quantity-selector { background-color: rgba(0, 0, 0, 0.2) !important; /* Fondo oscurito para los botones de + y - */ } .fkcart-quantity-button { background: transparent !important; } .fkcart-quantity-button:hover { background-color: #F17D00 !important; /* Naranja al interactuar */ } .fkcart-quantity__input { background: transparent !important; border: none !important; font-weight: bold !important; } /* 6. Iconos de Cerrar y Borrar (Cruces) */ .fkcart-icon-close, .fkcart-remove-item svg { color: #FBFBFB !important; transition: color 0.3s ease !important; } .fkcart-modal-close:hover .fkcart-icon-close, .fkcart-remove-item:hover svg { color: #F17D00 !important; /* Se ponen naranjas al pasar el ratón */ } /* 7. Zona de Cupones */ .fkcart-coupon-area { border-top: 1px solid rgba(255, 255, 255, 0.08) !important; padding-top: 15px !important; } #fkcart-coupon__input { background-color: rgba(0, 0, 0, 0.2) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; color: #FBFBFB !important; border-radius: 0 !important; } .fkcart-coupon-button { background-color: rgba(255, 255, 255, 0.1) !important; color: #FBFBFB !important; border-radius: 0 !important; } .fkcart-coupon-button:hover { background-color: #F17D00 !important; } /* 8. Sombra del fondo cuando se abre el carrito */ .fkcart-modal-backdrop { background-color: rgba(0, 0, 0, 0.6) !important; backdrop-filter: blur(2px) !important; /* Desenfoque sutil a la web de fondo */ } /*Ajuste texto de impuestos*/ .fkcart-summary-text.fkcart-shipping-tax-calculation-text{ font-weight: 200 !important; } /*Eliminar X en productos*/ .fkcart-remove-item{ display:none !important; } /*--*/ /*--*/ /*--*/ /*--*/ /* ============================================================= FUNNELKIT CHECKOUT: MODO PREMIUM DEFINITIVO (Clase .miel-field) ============================================================= */ /* 1. LIMPIEZA TOTAL DE SOMBRAS Y FONDOS DE ELEMENTOR */ .elementor-element-47ff09c5, .elementor-element-47ff09c5 > .elementor-element-populated, .elementor-widget-wfacp_form, .wfacp-template-container { background: transparent !important; background-color: transparent !important; box-shadow: none !important; -webkit-box-shadow: none !important; } /* 2. EL CONTENEDOR GLASSBLANCO */ .wfacp-form { background: rgba(251, 251, 251, 0.05) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; border-radius: 0px !important; padding: 35px !important; } /* 3. TEXTOS GENERALES Y TÍTULOS */ html body #wfacp-e-form h2.wfacp_section_heading { font-family: 'Playfair Display', serif !important; color: #FBFBFB !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; padding-bottom: 10px !important; } html body #wfacp-e-form p, html body #wfacp-e-form span, html body #wfacp-e-form td, html body #wfacp-e-form th { color: #FBFBFB !important; font-family: 'DM Sans', sans-serif !important; } html body #wfacp-e-form label{ color: #F17D00 !important; } /* ============================================================= COLOR BLANCO PARA ETIQUETAS ESPECÍFICAS ============================================================= */ /* Label: Usar una dirección de facturación diferente */ html body #wfacp-e-form #billing_same_as_shipping_field label { color: #FBFBFB !important; } /* Label: Tarjeta de Crédito / Débito */ html body #wfacp-e-form label[for="payment_method_fkwcs_stripe"] { color: #FBFBFB !important; } /* 4. ATACANDO A LOS CAMPOS CON NUESTRA CLASE .miel-field */ /* Inputs y Textareas */ html body .miel-field input:not([type="checkbox"]):not([type="radio"]), html body .miel-field textarea { background-color: rgba(0, 0, 0, 0.2) !important; color: #FBFBFB !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 0px !important; font-family: 'DM Sans', sans-serif !important; padding: 12px 15px !important; } /* Placeholders (Gris claro y DM Sans) */ html body .miel-field input::placeholder { color: rgba(251, 251, 251, 0.5) !important; font-family: 'DM Sans', sans-serif !important; } /* 🟢 EL FOCUS: Borde blanco 1px al seleccionar, sin sombra negra */ html body .miel-field input:focus, html body .miel-field textarea:focus { border: 1px solid #FBFBFB !important; box-shadow: none !important; outline: none !important; } /* 5. PARCHE FINAL PARA LOS SELECTORES (PAÍS/PROVINCIA) */ /* La caja cerrada */ html body .miel-field .select2-container--default .select2-selection--single { background-color: rgba(0, 0, 0, 0.3) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 0px !important; height: 48px !important; display: flex; align-items: center; } /* El texto dentro del selector */ html body .miel-field .select2-selection__rendered { color: #FBFBFB !important; font-family: 'DM Sans', sans-serif !important; } /* Dropdown (La lista que se abre, la forzamos por ID de página para seguridad) */ .elementor-904 .select2-dropdown { background-color: #3b1e06 !important; border: 1px solid #F17D00 !important; color: #FBFBFB !important; font-family: 'DM Sans', sans-serif !important; } /* 6. BOTÓN "REALIZAR PEDIDO" */ html body #wfacp-e-form button#place_order, html body #wfacp-e-form button[type="submit"].alt { background-color: #F17D00 !important; /* Naranja */ color: #FBFBFB !important; border: none !important; border-radius: 1px !important; font-family: 'DM Sans', sans-serif !important; font-weight: bold !important; font-size: 18px !important; padding: 20px !important; transition: all 0.3s ease !important; } /* Hover Verde Éxito */ html body #wfacp-e-form button#place_order:hover, html body #wfacp-e-form button[type="submit"].alt:hover { background-color: #28a745 !important; } /* 7. ENLACES (Apartamento, Cupón y Política) -> Naranja */ html body #wfacp-e-form a.wfacp_collapsible, html body #wfacp-e-form a.wfacp_showcoupon, html body #wfacp-e-form .woocommerce-privacy-policy-text a { color: #F17D00 !important; font-family: 'DM Sans', sans-serif !important; text-decoration: none !important; } html body #wfacp-e-form a:hover { text-decoration: underline !important; } /* 8. CHECKBOX (Usar accent-color para evitar líos de ticks) */ html body #wfacp-e-form input[type="checkbox"] { accent-color: #F17D00 !important; width: 18px; height: 18px; cursor: pointer; } /* 9. PRECIOS EN BLANCO */ html body #wfacp-e-form .woocommerce-Price-amount, html body #wfacp-e-form .woocommerce-Price-amount bdi { color: #FBFBFB !important; font-weight: bold !important; } /*Ajustes */ .payment_box.payment_method_fkwcs_stripe{ background-color: transparent !important; } .p-CardNumberInput-input{ background: transparent !important; } .input-radio{ background: transparent !important; } .payment_box.payment_method_fkwcs_stripe_google_pay{ background:transparent !important; } .Label{ color:white !important; } /* ============================================================= FIX: CAMPO PAÍS (ESPAÑA) BLOQUEADO Y TRADUCCIÓN ============================================================= */ /* 1. TRADUCIR "COUNTRY" A "PAÍS" (Sin romper el asterisco rojo) */ html body #wfacp-e-form #billing_country_field label { font-size: 0 !important; /* Oculta la palabra "Country " */ } html body #wfacp-e-form #billing_country_field label::before { content: "País "; /* Inyectamos la palabra en español */ font-size: 15px !important; /* Recuperamos el tamaño del texto */ color: #FBFBFB !important; } html body #wfacp-e-form #billing_country_field label .required { font-size: 15px !important; /* Recuperamos el tamaño del asterisco */ color: #F17D00 !important; /* Le forzamos el Naranja Corporativo por si acaso */ } /* 2. DISEÑO DEL CAMPO FUERTE (El que contiene "España") */ html body #wfacp-e-form #billing_country_field .woocommerce-input-wrapper strong { background-color: rgba(0, 0, 0, 0.2) !important; color: #FBFBFB !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 0px !important; font-family: 'DM Sans', sans-serif !important; padding-top: 3px !important; /* Tus 3px exactos de top */ /* 🟢 AÑADIDO MÍO para que parezca una caja de verdad y no texto suelto: */ display: flex !important; align-items: center !important; /* Centra el texto verticalmente */ height: 48px !important; /* Iguala la altura del resto de campos de tu form */ padding-left: 15px !important; /* Separación de la izquierda igual que los inputs */ font-weight: 400 !important; /* Le quito la negrita extrema por defecto del */ } #billing_country_field>.wfacp-form-control-label{ display: none !important; } /* ============================================================= FIX: CHECKOUT STRIPE (Labels y Checkbox Guardar Tarjeta) ============================================================= */ /* 2. TRADUCCIÓN DEL TEXTO DEL CHECKBOX */ /* Ocultamos el texto original "Save payment information..." */ html body #fkwcs-save-cc-fieldset .fkwcs-save-cards label { color: transparent !important; font-size: 0 !important; display: flex !important; align-items: center !important; position: relative; } /* Y le inyectamos la traducción en español */ html body #fkwcs-save-cc-fieldset .fkwcs-save-cards label::after { content: "Guardar la información de pago de forma segura para futuras compras."; color: #FBFBFB !important; font-size: 16px !important; font-family: 'DM Sans', sans-serif !important; margin-left: 10px !important; display: block !important; } /* 3. REDISEÑO DEL CHECKBOX (Cuadrado transparente + Tick blanco/Naranja) */ /* Matamos el estilo por defecto del navegador */ html body #fkwcs-save-cc-fieldset .fkwcs-save-cards input[type="checkbox"] { -webkit-appearance: none !important; appearance: none !important; width: 20px !important; height: 20px !important; min-width: 20px !important; background-color: transparent !important; /* Fondo transparente por defecto */ border: 1px solid rgba(255, 255, 255, 0.4) !important; /* Borde blanco sutil */ border-radius: 3px !important; /* Pequeña curva o 0px si prefieres totalmente cuadrado */ outline: none !important; cursor: pointer !important; position: relative !important; margin: 0 !important; display: inline-block !important; transition: all 0.2s ease-in-out !important; } /* Estado Checked (Marcado): Fondo Naranja y Tick SVG Blanco */ html body #fkwcs-save-cc-fieldset .fkwcs-save-cards input[type="checkbox"]:checked { background-color: #F17D00 !important; /* Naranja corporativo */ border-color: #F17D00 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBFBFB' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important; background-size: 14px 14px !important; /* Tamaño del tick */ background-position: center !important; background-repeat: no-repeat !important; } /* ============================================================= FIX: OCULTAR GOOGLE PAY Y APPLE PAY DE LA LISTA INFERIOR (Manteniendo intacto el Express Checkout de arriba) ============================================================= */ html body #wfacp-e-form ul.wc_payment_methods li.payment_method_fkwcs_stripe_google_pay, html body #wfacp-e-form ul.wc_payment_methods li.payment_method_fkwcs_stripe_apple_pay { display: none !important; } /* ============================================================= FIX: QUITAR EL RADIO BUTTON (CIRCULITO) DE LA TARJETA ============================================================= */ /* 1. Ocultar el input original (el circulito) */ html body #wfacp-e-form ul.wc_payment_methods li.payment_method_fkwcs_stripe input[type="radio"] { display: none !important; } /* 2. Quitar los circulitos falsos (pseudo-elementos) que mete FunnelKit/WooCommerce */ html body #wfacp-e-form ul.wc_payment_methods li.payment_method_fkwcs_stripe > label::before, html body #wfacp-e-form ul.wc_payment_methods li.payment_method_fkwcs_stripe > label::after { display: none !important; } /* 3. Pegar el texto a la izquierda (quitar el hueco que deja el círculo) y quitar la "mano" del ratón */ html body #wfacp-e-form ul.wc_payment_methods li.payment_method_fkwcs_stripe > label { padding-left: 0 !important; cursor: default !important; border-bottom: none !important; /* Por si Funnelkit mete una línea separadora */ } /* ============================================================= REMATES FINALES: SELECTOR 100% INTEGRADO (Estilo Web) ============================================================= */ /* 1. ESPACIADO DE CAMPOS (Evita que se tapen las letras) */ html body #wfacp-e-form .form-row { margin-bottom: 25px !important; } /* 2. SELECTOR CERRADO (Fix Castellón y transparencia) */ html body .select2-container--default .select2-selection--single { background-color: rgba(0, 0, 0, 0.3) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 0px !important; height: 45px !important; display: flex !important; align-items: center !important; } html body .select2-selection__rendered { background: none !important; background-color: transparent !important; color: #FBFBFB !important; padding-left: 15px !important; line-height: 1 !important; } /* 3. EL DROPDOWN (Con tu gradiente de luz y borde blanco 20%) */ html body .select2-dropdown { background-color: #4e2201 !important; /* Tu marrón original */ background-image: radial-gradient(circle at 90% 95%, rgba(211, 140, 76, 0.45) 0%, rgba(183, 104, 45, 0.15) 45%, transparent 85%) !important; background-blend-mode: screen !important; /* Ilumina el marrón */ border: 1px solid rgba(255, 255, 255, 0.2) !important; /* Blanco al 20% */ box-shadow: 0px 15px 40px rgba(0,0,0,0.8) !important; z-index: 999999 !important; } /* 4. LIMPIEZA DE FONDOS INTERNOS (Para que brille el gradiente) */ html body .select2-results, html body .select2-results__options, html body .select2-results__option { background-color: transparent !important; background: none !important; color: #FBFBFB !important; } /* Hover Naranja */ html body .select2-container--default .select2-results__option--highlighted[aria-selected], html body .select2-results__option:hover { background-color: #F17D00 !important; color: #ffffff !important; } /* 5. SCROLLER PERSONALIZADO NARANJA */ .select2-results__options::-webkit-scrollbar { width: 6px !important; } .select2-results__options::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.3) !important; } .select2-results__options::-webkit-scrollbar-thumb { background: #F17D00 !important; border-radius: 10px !important; } /* 6. BUSCADOR INTERNO DEL DESPLEGABLE */ html body .select2-search--dropdown { background: rgba(0,0,0,0.2) !important; padding: 10px !important; } html body .select2-search--dropdown .select2-search__field { background: rgba(0,0,0,0.2) !important; color: #FBFBFB !important; border: 1px solid rgba(255,255,255,0.1) !important; font-family: 'DM Sans', sans-serif !important; } /* 7. CHECKBOX FIX (Alineación) */ html body #wfacp-e-form .wfacp_checkbox_field label { display: flex !important; align-items: center !important; gap: 10px !important; border: none !important; } /* 8. LINKS Y BOTONES (Hover Verde Éxito) */ html body #wfacp-e-form .woocommerce-privacy-policy-text a { color: #F17D00 !important; } html body #wfacp-e-form button#place_order:hover { background-color: #28a745 !important; border-radius: 1px !important; } /*Arreglos bordes*/ #wfacp-e-form table.shop_table.woocommerce-checkout-review-order-table tr.cart_item .product-image img { border: 1px solid rgb(255,255,255,0.2) !important; } body #wfacp-e-form .wfacp-qty-count, body .wfacp-qty-count{ background-color: rgb(0,0,0,0.5) !important } body .elementor-904 .elementor-element.elementor-element-1645e2b3 #wfacp-e-form .wfacp_main_form.woocommerce p.woocommerce-invalid-required-field .wfacp-form-control { border-color: #E15334 !important; box-shadow: none !important; } body .elementor-904 .elementor-element.elementor-element-1645e2b3 #wfacp-e-form p.form-row:not(.woocommerce-invalid-email) .wfacp-form-control:not(.input-checkbox):focus { border-color: #fbfbfb !important; box-shadow: none !important; } body .elementor-904 .elementor-element.elementor-element-1645e2b3 #wfacp-e-form .wfacp_main_form.woocommerce p.form-row:not(.woocommerce-invalid-email) .wfacp-form-control:not(.wfacp_coupon_code):focus { border-color: #fbfbfb !important; box-shadow: none !important; } /*--*/ /*--*/ /*--*/ /*--*/ /*TIENDA CSS*/ .imagenTienda { /* 1 / 1 = Cuadrado perfecto. Si lo quieres un poco más alto que ancho, prueba 4 / 5. Si lo quieres apaisado, prueba 4 / 3 */ aspect-ratio: 1 / 1 !important; /* Anulamos cualquier altura residual de Elementor */ height: auto !important; min-height: 0 !important; } .elementor-element.bordeNaranja { border: 1px solid #F39125!important; } .botonTienda a.elementor-button { padding: 7px 12px !important; } /*EL SACO FANTASMA (Mantiene el layout de 3 columnas directas)*/ @media (min-width: 1025px) { /* Le decimos al saco y a su envoltorio interno que desaparezcan del layout en PC */ .saco-fantasma, .saco-fantasma > .e-con-inner { display: contents !important; } } /*--*/ /*--*/ /*--*/ /*--*/ /* ============================================================= */ /* HEADER Y MENÚ GLOBAL */ /* ============================================================= */ /* 1. Estado normal (Arriba del todo) */ .sticky-header { background-color: transparent !important; z-index: 99999 !important; width: 100% !important; /* Aseguramos que no haga cosas raras con el flexbox de Elementor */ left: 0 !important; } /* 2. Estado al hacer Scroll (Fijo, con color y animación) */ .sticky-header.header-scrolled { position: fixed !important; top: 0 !important; /* 🟢 El color sólido corregido (Sin el punto y coma asesino) */ background-color: #4e2201 !important; /* 🟢 El gradiente y el blend-mode blindados con !important */ background-image: radial-gradient(circle at 90% 95%, rgba(211, 140, 76, 0.45) 0%, rgba(183, 104, 45, 0.15) 45%, transparent 85%) !important; background-blend-mode: screen !important; box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important; /* Animación para que entre deslizando suavemente y no de golpe */ animation: bajarSuave 0.4s ease-out forwards; } @keyframes bajarSuave { from { transform: translateY(-100%); } to { transform: translateY(0); } } /*--*/ /*--*/ /*--*/ /*--*/ /* ========================================================================== FIX: FORZAR RENDERIZADO DEL DIVISOR DEL FOOTER (ALTURA Y BORDE) ========================================================================== */ .elementor-element-06d2f01 .elementor-divider-separator { display: block !important; width: 100% !important; height: 1px !important; /* 🟢 Forzamos altura física para que no colapse a 0 */ border-top: 1px solid #B1B1B1; } /*--*/ /*--*/ /*--*/ /*--*/ /*CSS ENTRADAS POSTS*/ /* ========================================= FORZAR FORMATO VERTICAL (SHORTS/TIKTOK) ========================================= */ /* 1. La caja contenedora: Le damos forma de móvil (9:16) */ .video-responsive { position: relative; width: 100%; max-width: 350px; /* 🟢 Evita que en PC sea gigantesco, ajusta este valor si lo quieres más ancho */ margin: 0 auto 30px auto; /* Lo centra en la pantalla */ aspect-ratio: 9 / 16; /* 🟢 LA MAGIA: Fuerza la proporción vertical exacta */ overflow: hidden; /* Corta las esquinas feas del iframe */ box-shadow: 0 10px 30px rgba(0,0,0,0.3); /* Sombra elegante para que flote sobre el fondo marrón */ } /* 2. El reproductor: Le obligamos a estirarse para rellenar nuestra caja perfecta */ .video-responsive iframe, .video-responsive object, .video-responsive embed { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; border: none; } .titulo-apicultor{ font-family:'Playfair Display'; font-weight:600; font-style:italic; font-size: 40px !important; } .texto-apicultor{ font-family: "DM Sans", Sans-serif; font-size: 18px; font-weight: 200; color: #FBFBFB; } @media (max-width: 1024px){ .centrado{ align-items: center !important; } .titulo-apicultor{ font-size: 30px !important; } } @media (max-width: 767px){ .titulo-apicultor{ font-size: 20px !important; font-weight: 400 !important; } } /* ========================================= AJUSTE DE CAJA PARA VÍDEO VERTICAL ========================================= */ /* 1. Forzamos al contenedor a tener el ancho del vídeo */ .ajusteVideo { width: 350px !important; /* El mismo ancho que le dimos al vídeo en el CSS anterior */ min-width: 350px !important; flex: 0 0 350px !important; /* Le decimos a Flexbox: ni te estires ni te encojas, mide 350px */ padding: 0 !important; margin: 0 !important; } /* 2. Aseguramos que el shortcode de dentro no meta márgenes raros */ .ajusteVideo .elementor-widget-shortcode, .ajusteVideo .elementor-widget-container { width: 100% !important; margin: 0 !important; } /* 3. Ajuste para móvil (para que no se rompa si la pantalla es pequeña) */ @media (max-width: 767px) { .ajusteVideo { width: 100% !important; min-width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; } } /*--*/ /*--*/ /*--*/ /*--*//* ========================================= AJUSTE DE CAJA PARA VÍDEO NATIVO (FIX ORIENTACIÓN) ========================================= */ /* 1. Forzamos el ancho pero dejamos la altura libre para que no se corte */ .ajusteVideoPredefinido { width: 350px !important; min-width: 350px !important; max-width: 350px !important; /* 🟢 CAMBIO CLAVE: "auto" para que en vertical no use 350px como altura */ flex: 0 0 auto !important; height: auto !important; padding: 0 !important; margin: 0 !important; } /* 2. El resto se queda igual, que es lo que calcula la altura real */ .ajusteVideoPredefinido .elementor-wrapper { position: relative !important; width: 100% !important; padding-bottom: 177.77% !important; /* Mantiene la proporción 9:16 */ height: 0 !important; } .ajusteVideoPredefinido .elementor-wrapper iframe { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; border: none !important; } /* 3. Responsive para móviles */ @media (max-width: 767px) { .ajusteVideoPredefinido { width: 100% !important; min-width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; } } /*--*/ /*--*/ /*--*/ /*--*/ /*AJUSTES INICIO IMAGENES DE LAS CAJAS DE TEXTO*/ .imagenTexto{ width: 100% !important; height: 800px !important; } .ajustesTexto{ box-shadow: 0 15px 30px rgba(0,0,0,0.2) !important; } .sombrita{ box-shadow: 0 15px 30px rgba(0,0,0,0.2) !important; } .bordecito{ border: 1px solid rgba(255, 255, 255, 0.3)!important; } .bordecitoTop{ border-top: 1px solid rgba(255, 255, 255, 0.3)!important; }/* ========================================= ESTILOS PARA H2 (RESTAURACIÓN EXACTA DE LA CAPTURA) ========================================= */ h2.titulo-con-borde, h1.titulo-con-borde { border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important; /* La raya ABAJO */ padding-bottom: 15px !important; /* Espacio entre el texto y la raya */ margin-bottom: 15px !important; /* Espacio entre la raya y el span de abajo */ margin-top: 0 !important; font-size: 30px !important; line-height: 1.1 !important; display: block !important; /* Deja que el texto salte de línea de forma natural */ } h1.titulo-con-borde, h2.titulo-con-borde{ font-size: 40px !important; } /* Forzamos que el span de abajo (Escoge el sabor...) también se alinee a la derecha */ h2.titulo-con-borde + span, h1.titulo-con-borde + span { display: block !important; } @media (max-width: 1280px) { h2.titulo-con-borde, h2.titulo-con-borde span, h1.titulo-con-borde, h1.titulo-con-borde span { font-size: 24px !important; } } @media (max-width: 767px) { h2.titulo-con-borde, h2.titulo-con-borde span, h1.titulo-con-borde, h1.titulo-con-borde span{ font-size: 20px !important; line-height: 1.2 !important; } } @media(max-width: 1024px){ .ajustesTexto{ width: 90% !important; max-width: 90% !important; } } @media(max-width: 768px){ .imagenTexto{ width: 100% !important; height: 500px !important; } } /*--*/ /*--*/ /*--*/ /*--*/ /*RESPONSIVES-----------------------------------------------------------------------------------------------------------------------------------*/ /* ============================================================= RESPONSIVE: PORTÁTILES (Max 1366px) - MDPI / Chromebooks / MacBooks Escala matemática exacta (83.5%) - SIN DEFORMAR EL GRID ============================================================= */ @media (max-width: 1366px) { /* 1. Reducimos el Widget (La caja invisible de Elementor) */ .elementor-widget-shopengine-filterable-product-list.tarjetaPortada, .elementor-widget-shopengine-filterable-product-list { width: 280px !important; height: 341px !important; flex: 0 0 280px !important; max-width: 280px !important; } /* 2. Reducimos la Tarjeta y ajustamos el Grid Interno a escala */ .tarjetaPortada .shopengine-single-product-item, .shopengine-single-product-item { width: 280px !important; height: 341px !important; /* Ajustamos paddings exactos (Original 42px top, 25px laterales) */ padding-top: 35px !important; padding-left: 21px !important; padding-right: 21px !important; column-gap: 12px !important; /* Original: 15px */ } .tarjetaDecorativa { width: 280px !important; height: 341px !important; min-width: 280px !important; max-width: 280px !important; min-height: 341px !important; /* Aseguramos que el clip-path se mantenga perfecto en el nuevo tamaño */ clip-path: polygon(18% 0%, 82% 0%, 100% 15%, 100% 100%, 0% 100%, 0% 15%) !important; } /* ------------------------------------------------------------------- FIX: Envoltorio rebelde de la tarjeta Test 1 (Atacando ID de Elementor) ------------------------------------------------------------------- */ /* 1. Obligamos al widget blindado a reducirse a 280px */ .elementor-element-48e680f { width: 280px !important; min-width: 280px !important; max-width: 280px !important; flex: 0 0 280px !important; } /* 2. Forzamos a la fila dinámica interna a no dejar huecos morados */ .elementor-element-48e680f .filter-content-row { width: 280px !important; min-width: 280px !important; max-width: 280px !important; flex: 0 0 280px !important; margin: 0 auto !important; } /* 3. El tarro de Miel (Centrado absoluto forzando las columnas) */ .product-thumb { grid-column: 1 / -1 !important; /* Fuerza a ocupar toda la fila de lado a lado */ width: 100% !important; margin-top: 15px !important; display: flex !important; justify-content: center !important; } .product-thumb img { max-width: 165px !important; /* Original: 200px */ margin: 0 auto !important; } /* 4. Tipografías a escala para que el precio no toque el borde */ .product-title a { font-size: 17px !important; } .product-price.price, .product-price.price bdi { font-size: 24px !important; /* Bajamos a 24px para evitar el desbordamiento */ } .product-category ul li a { font-size: 13px !important; } /* 5. Ajustes de subtexto */ .product-category { margin-top: -21px !important; } /* 6. EL BOTÓN (El fix real: bloque sólido sin colapsos de flexbox) */ .add-to-cart-bt { grid-column: 1 / -1 !important; /* Ocupa todo el ancho del grid */ display: block !important; /* FUERA FLEXBOX AQUI */ /* Matemáticas puras: 100% del interior + 21px izq + 21px der */ width: calc(100% + 42px) !important; margin-left: -21px !important; margin-top: auto !important; } /* 🔴 EL MAZO DEFINITIVO: Especificidad nivel Dios (html + body + tarjeta + contenedor + enlace + clase) */ html body .shopengine-single-product-item .add-to-cart-bt a.add_to_cart_button { display: block !important; width: 100% !important; text-align: center !important; border-radius: 0 !important; /* Reducimos el tamaño en proporción */ padding: 16px 0 !important; font-size: 14px !important; } } /*--*/ /*--*/ /*--*/ @media (max-width: 1024px) { /* 1. Reducimos el círculo principal naranja */ #fkcart-mini-toggler { width: 40px !important; height: 40px !important; } /* 2. Reducimos el globo rojo y su tipografía */ #fkcart-mini-toggler .fkcart-item-count { width: 16px !important; height: 16px !important; font-size: 10px !important; } /* 3. Reducimos el círculo del icono de usuario a 40px */ .elementor-element-3fd90ea .elementor-icon { width: 40px !important; height: 40px !important; } /* 4. Reducimos el muñeco interior en proporción */ .elementor-element-3fd90ea .elementor-icon svg { width: 20px !important; } /* REORDEN DE CABECERA: [Menú] -- [Logo] -- [Iconos] ------------------------------------------------------------*/ /* 1. Forzamos a la cabecera padre a mantener el tipo en una fila */ .sticky-header { display: flex !important; /* 🟢 CAMBIADO */ flex-direction: row !important; /* 🟢 CAMBIADO */ flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; padding-left: 20px !important; padding-right: 20px !important; background-color: #4e2201 !important; background-image: radial-gradient(circle at 90% 95%, rgba(211, 140, 76, 0.45) 0%, rgba(183, 104, 45, 0.15) 45%, transparent 85%) !important; background-blend-mode: screen !important; } /* 2. El Menú Hamburguesa se va a la izquierda del todo */ .sticky-header > .elementor-element-9b32fe4 { order: 1 !important; width: 40px !important; /* 🟢 CAMBIADO */ flex: 0 0 40px !important; /* 🟢 CAMBIADO */ overflow: visible !important; /* 🟢 CAMBIADO */ } /* 3. El Logo se queda en el centro */ .sticky-header > .elementor-element-a7871ea { order: 2 !important; /* 🟢 CAMBIADO */ width: auto !important; /* 🟢 CAMBIADO */ flex: 1 1 auto !important; /* 🟢 CAMBIADO */ margin: 0 10px !important; /* 🟢 CAMBIADO: Margen de seguridad */ display: flex !important; /* 🟢 CAMBIADO */ justify-content: center !important; /* 🟢 CAMBIADO */ } /* 4. Los Iconos (Usuario + Carrito) se van a la derecha */ .sticky-header > .elementor-element-2d6d32e { order: 3 !important; width: auto !important; display: flex !important; /* 🟢 CAMBIADO */ align-items: center !important; /* 🟢 CAMBIADO */ gap: 12px !important; /* 🟢 CAMBIADO */ } /* FIX: MENÚ HAMBURGUESA Y DESPLEGABLE (UAE) --------------------------------------------------------------------*/ /* 1. EL LOGO: Más pequeño y centrado a la fuerza */ .sticky-header .elementor-heading-title a { font-size: 22px !important; text-align: center !important; display: block !important; white-space: normal !important; /* 🟢 CAMBIADO: Permite salto de línea */ } /* 2. ICONO HAMBURGUESA Y CRUZ: Matamos paddings y forzamos color */ .sticky-header .hfe-nav-menu__toggle { padding: 0 !important; margin: 0 !important; background: transparent !important; width: 40px !important; height: 40px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; border: none !important; } .sticky-header .hfe-nav-menu-icon { padding: 0 !important; margin: 0 !important; width: 24px !important; height: auto !important; display: flex !important; } /* Forzamos el FBFBFB tanto en la hamburguesa como en la cruz */ .sticky-header .hfe-nav-menu-icon svg { fill: #FBFBFB !important; color: #FBFBFB !important; width: 100% !important; height: 100% !important; } /* 3. EL DESPLEGABLE: Adiós fondo blanco, hola marrón corporativo */ .sticky-header .hfe-dropdown { background-color: #4e2201 !important; background-image: radial-gradient(circle at 90% 95%, rgba(211, 140, 76, 0.45) 0%, rgba(183, 104, 45, 0.15) 45%, transparent 85%) !important; background-blend-mode: screen !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important; padding: 0 !important; } /*---------------------------------------------------------------------------------------------------------------------------------------------*/ /* 🟢 FIX: El desplegable nace exactamente al final del header marrón */ /* 1. Anulamos el posicionamiento de los contenedores internos para que el dropdown se guíe por el header */ .sticky-header .elementor-element-9b32fe4, .sticky-header .elementor-widget-navigation-menu, .sticky-header .elementor-widget-container { position: static !important; } /* 2. Forzamos el dropdown al 100% del alto real del header */ .sticky-header .hfe-dropdown { top: 100% !important; left: 0 !important; width: 100% !important; /* O 100vw si prefieres ancho de pantalla total */ } .sticky-header .hfe-dropdown ul { background: transparent !important; /* 🟢 CAMBIADO: Limpia el fondo basura interno */ } /*-----------------------------------------------------------------------------------------------------------------------------------*/ /* 4. LOS LINKS DEL DESPLEGABLE: Blancos y limpios */ .sticky-header .hfe-dropdown .hfe-menu-item { color: #FBFBFB !important; background-color: transparent !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; padding: 15px 20px !important; text-align: center !important; } .menu-item.menu-item-type-custom.menu-item-object-custom.parent.hfe-creative-menu { border: none !important; } /* Hover de los links del menú en móvil */ .sticky-header .hfe-dropdown .hfe-menu-item:hover { background-color: rgba(255,255,255, 0.05) !important; color: #F17D00 !important; } .elementor-element.elementor-element-17c23cc.e-con-full.e-flex.e-con.e-child{ width: 100% !important; } } @media (max-width: 765px) { /* 🟢 CAMBIADO: Círculo principal naranja a 30px */ #fkcart-mini-toggler { width: 30px !important; height: 30px !important; } /* 🟢 CAMBIADO: Globo rojo ajustado en proporción */ #fkcart-mini-toggler .fkcart-item-count { width: 14px !important; height: 14px !important; font-size: 9px !important; } /* 🟢 CAMBIADO: Círculo del icono de usuario a 30px */ .elementor-element-3fd90ea .elementor-icon { width: 30px !important; height: 30px !important; } /* 🟢 CAMBIADO: Muñeco interior ajustado en proporción */ .elementor-element-3fd90ea .elementor-icon svg { width: 15px !important; } /* 🟢 CAMBIADO: Contenedor de la hamburguesa a 30px para mantener simetría */ .sticky-header > .elementor-element-9b32fe4 { width: 30px !important; flex: 0 0 30px !important; } /* 🟢 CAMBIADO: Caja clicable de la hamburguesa a 30px */ .sticky-header .hfe-nav-menu__toggle { width: 30px !important; height: 30px !important; } /* 🟢 CAMBIADO: Icono interior de la hamburguesa ajustado en proporción */ .sticky-header .hfe-nav-menu-icon { width: 18px !important; } .textoMovil, .elementor-element.elementor-element-f7d2a74.textoMovil{ max-width: 280px !important; } } /* ============================================================= FIX SOCIAL ICONS (Evitar el triángulo de Elementor) ============================================================= */ /* 1. De PC (Mayor de 1440px) */ .elementor-element-e3cde40 .elementor-social-icons-wrapper { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; /* 🟢 Esto es lo que prohíbe el triángulo */ gap: 15px !important; /* Ajusta la separación a tu gusto */ } /* Matamos los anchos por defecto del grid de Elementor */ .elementor-element-e3cde40 .elementor-grid-item { width: auto !important; max-width: none !important; flex: 0 0 auto !important; /* 🟢 Blindaje extra para que no encojan */ margin: 0 !important; } /* 2. De 1440px hasta 1025px: Apilados en vertical */ @media (min-width: 1025px) and (max-width: 1440px) { .elementor-element-e3cde40 .elementor-social-icons-wrapper { display: flex !important; flex-direction: column !important; /* 🟢 Los pone en modo torre */ align-items: center !important; /* Los centra perfectamente */ gap: 15px !important; } .elementor-element-e3cde40 .elementor-grid-item { width: auto !important; margin: 0 !important; } } /* 3. De 1024px para abajo: Horizontal por mis narices y centrado absoluto */ @media (max-width: 1024px) { /* 🟢 AÑADIDO: Forzamos al contenedor padre a ocupar el 100% y centrar contenido */ .elementor-element-29e0576 { width: 100% !important; align-items: center !important; } /* 🟢 AÑADIDO: Centramos el título "Síguenos" para que no quede desplazado */ .elementor-element-7b7dc9d { width: 100% !important; text-align: center !important; margin-bottom: 15px !important; } /* 1. Liberamos el widget principal */ .elementor-element-e3cde40 { width: 100% !important; align-self: center !important; } /* 2. Reventamos la rejilla de Elementor y forzamos la fila */ .elementor-element-e3cde40 .elementor-social-icons-wrapper { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; /* 🟢 LA CLAVE: Prohibido hacer salto de línea (adiós triángulo) */ justify-content: center !important; /* 🟢 Centrado absoluto en el medio */ align-items: center !important; width: 100% !important; gap: 20px !important; /* Espacio entre los iconos, súbelo o bájalo si quieres */ } /* 3. Liberamos a cada icono de su "celda" individual para que no se asfixie */ .elementor-element-e3cde40 .elementor-grid-item { display: block !important; width: auto !important; max-width: none !important; flex: 0 0 auto !important; /* Ni creces ni encoges, te quedas con tu tamaño */ margin: 0 !important; } } /*--*/ /*--*/ /*--*/ /*--*/ /*--*/ /* ========================================= CARRUSEL VERTICAL (9:16) - SOLO IMAGEN ========================================= */ /* 1. Contenedor principal */ .hfe-posts-grid { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; gap: 30px !important; -webkit-overflow-scrolling: touch; padding-bottom: 40px !important; /* El espacio que dejaste para la barra y la sombra */ margin-top: 50px !important; /* 🔴 LA MAGIA PARA ROMPER EL MARGEN DERECHO */ /* Le decimos: mide el 100% de tu caja + la mitad del espacio vacío que sobra en la pantalla */ width: calc(100% + (100vw - 100%) / 2) !important; max-width: none !important; /* Anulamos cualquier límite que ponga Elementor */ padding-right: 30px !important; /* Para que cuando llegues a la última tarjeta, no se quede pegada al borde del monitor */ } /* ========================================= EL ESPACIO IZQUIERDO EN MÓVIL (Alineación perfecta) ========================================= */ @media (max-width: 767px) { /* Le metemos el margen SOLO al primer vídeo de la fila */ .hfe-posts-grid .hfe-post-card:first-child { /* Por defecto Elementor suele dejar 20px, pero si tu texto tiene 15px, cámbialo aquí */ margin-left: 20px !important; } .hfe-posts-grid{ margin-top: 30px !important; } } /* 2. Ocultamos TODA la basura de textos, fechas y botones */ .hfe-post-card .hfe-post-content { display: none !important; } /* 3. La tarjeta: forzamos el formato 9:16 exacto */ .hfe-post-card { /* Anchura: 300px en PC, 60% de la pantalla en móvil */ flex: 0 0 clamp(200px, 60vw, 300px) !important; aspect-ratio: 9 / 16 !important; /* Formato vertical tipo Reel/TikTok */ margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; } /* 4. La imagen destacada a pantalla completa */ .hfe-post-card .hfe-post-image, .hfe-post-card .hfe-post-image a, .hfe-post-card .hfe-post-image img { width: 100% !important; height: 100% !important; display: block !important; margin: 0 !important; } .hfe-post-card .hfe-post-image img { object-fit: cover !important; border-radius: 1px; box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important; border: 1px solid rgba(255, 255, 255, 0.3)!important; } /* ========================================= BARRA DE SCROLL (COMPORTAMIENTO RESPONSIVE) ========================================= */ /* En MÓVIL y TABLET: Ocultamos la barra (se desliza con el dedo) */ @media (max-width: 1024px) { .hfe-posts-grid { scrollbar-width: none; } .hfe-posts-grid::-webkit-scrollbar { display: none; } } /* En PC: Mostramos una barra personalizada */ /* En PC: Mostramos una barra personalizada */ /* En PC: Mostramos una barra personalizada */ @media (min-width: 1025px) { /* Grosor de la barra */ .hfe-posts-grid::-webkit-scrollbar { height: 12px; } /* El "carril" de fondo (La barra blanquecina) */ .hfe-posts-grid::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1) !important; border-radius: 10px !important; /* 🔴 Como por la derecha la caja choca con el monitor, la empujamos exactamente un 15% de la pantalla hacia adentro */ margin-right: 15vw !important; /* 🔴 Por la izquierda, como la caja ya empieza desplazada (donde tu texto), con darle un poco más suele cuadrar al centro. Si la ves muy a la izquierda, sube este 2vw a 5vw. Si la ves muy a la derecha, bájalo a 0. */ margin-left: 2vw !important; } /* El "pulgar" (lo que pinchas y arrastras) */ .hfe-posts-grid::-webkit-scrollbar-thumb { background: #F17D00; border-radius: 10px; } /* Color al pasar el ratón por encima del pulgar */ .hfe-posts-grid::-webkit-scrollbar-thumb:hover { background: #cc6a00; } } /* ========================================= BOTÓN DE PLAY SUPERPUESTO (ESTILO REELS/SHORTS) ========================================= */ /* 1. Nos aseguramos de que la imagen sea la referencia para centrar el botón */ .hfe-post-card .hfe-post-image a { position: relative !important; } /* 2. Creamos el botón de Play de la nada */ .hfe-post-card .hfe-post-image a::after { content: "\25B6"; /* Código Unicode para el triángulo de Play (▶) */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* Centrado matemático perfecto */ /* Diseño del círculo */ width: 60px; height: 60px; background-color: rgba(241, 125, 0, 0.85); /* Tu naranja con un toque de transparencia */ border-radius: 50%; /* Círculo perfecto */ /* Diseño del icono */ color: white; font-size: 24px; /* Centramos el triángulo dentro del círculo */ display: flex; align-items: center; justify-content: center; padding-left: 5px; /* Truco visual: compensa el peso del triángulo para que no parezca descentrado */ /* Toques finales */ z-index: 10; pointer-events: none; /* SÚPER IMPORTANTE: Deja que el clic lo reciba la imagen, no el dibujo */ transition: all 0.3s ease; /* Transición suave */ box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* Sombrita elegante para que destaque */ } /* 3. Efecto al pasar el ratón (Hover) */ .hfe-post-card .hfe-post-image a:hover::after { background-color: #F17D00; /* Naranja sólido */ transform: translate(-50%, -50%) scale(1.15); /* Pega un pequeño latido creciendo un 15% */ } /*--*/ /*--*/ /*--*/ /* 1. Forzamos el 70% SOLO en pantallas de escritorio (de 1025px para arriba) */ @media (min-width: 1025px) { .elementor-element-17698ce, .estirarTablet{ --width: 70% !important; width: 70% !important; } } /* 2. Forzamos el 100% en Tablet y Móvil (de 1024px para abajo) */ @media (max-width: 1024px) { .elementor-element-17698ce, .estirarTablet { --width: 100% !important; width: 100% !important; } } /* ============================================================= BREAK POINT PERSONALIZADO (895px) - WRAP NATURAL (2 TARJETAS) ============================================================= */ @media (max-width: 895px) { /* 1. Mantenemos la fila (row) pero permitimos el salto (wrap) */ .breakTablet, .breakTablet.e-con, .breakTablet.e-con-inner { --flex-direction: row !important; flex-direction: row !important; flex-wrap: wrap !important; /* 🟢 LA MAGIA: Salto natural, no forzado */ align-items: flex-start !important; justify-content: center !important; /* Centra el bloque entero de tarjetas */ gap: 20px !important; /* Espacio entre los tarros */ display: flex !important; } /* 2. Liberamos a las tarjetas para que usen su ancho real (y quepan dos) */ .breakTablet > .elementor-widget { max-width: 100% !important; margin: 0 !important; /* Quitamos márgenes forzados para que el gap haga su trabajo */ flex: 0 0 auto !important; } } /* ============================================================= CARRUSEL 16/9: CONTROLES EXTERNOS Y ESTÉTICA PREMIUM (FINAL V2) ============================================================= */ /* 1. ESPACIO PARA CONTROLES (Escritorio por defecto) */ [data-id="370a001"] { padding: 0 60px 50px 60px !important; } /* 2. ESTRUCTURA 16/9 */ [data-id="370a001"] .elementor-image-carousel-wrapper, [data-id="370a001"] .swiper-slide { aspect-ratio: 21 / 9 !important; height: auto !important; } /* 3. IMAGEN: Ajuste y BORDE NARANJA */ [data-id="370a001"] .swiper-slide-image { width: 100% !important; height: 100% !important; object-fit: cover !important; border: 1px solid #F17D00 !important; border-radius: 2px !important; } /* 4. FLECHAS: Glass oscuro en reposo */ [data-id="370a001"] .elementor-swiper-button { background: rgba(0, 0, 0, 0.35) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: none !important; width: 45px !important; height: 45px !important; border-radius: 50% !important; top: 50% !important; transform: translateY(-50%) !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.3s ease !important; z-index: 10 !important; } [data-id="370a001"] .elementor-swiper-button-prev { left: 5px !important; } [data-id="370a001"] .elementor-swiper-button-next { right: 5px !important; } /* Centrado visual de los iconos */ [data-id="370a001"] .elementor-swiper-button-prev svg { margin-right: 2px !important; } [data-id="370a001"] .elementor-swiper-button-next svg { margin-left: 2px !important; } /* 🟢 HOVER FLECHAS: Glass Blanco Premium (Adiós naranja feo) */ [data-id="370a001"] .elementor-swiper-button:hover { background: rgba(251, 251, 251, 0.15) !important; /* Blanco muy translúcido */ border: 1px solid rgba(255, 255, 255, 0.4) !important; /* Le devuelvo un micro-borde solo en hover para remarcar el cristal */ transform: translateY(-50%) !important; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2) !important; /* Sombra oscura para dar contraste al botón blanco */ } [data-id="370a001"] .elementor-swiper-button svg { width: 18px !important; height: 18px !important; fill: #fbfbfb !important; } /* 5. PUNTOS (PAGINACIÓN) */ [data-id="370a001"] .swiper-pagination { bottom: 5px !important; z-index: 15 !important; pointer-events: auto !important; } [data-id="370a001"] .swiper-pagination-bullet { background: rgba(255, 255, 255, 0.5) !important; opacity: 1 !important; width: 8px !important; height: 8px !important; margin: 0 6px !important; transition: all 0.3s ease !important; display: inline-block !important; cursor: pointer !important; } [data-id="370a001"] .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #F17D00 !important; width: 25px !important; border-radius: 10px !important; } /* ============================================================= 6. COMPORTAMIENTO RESPONSIVE (TAMAÑOS Y CONTROLES) ============================================================= */ /* DE PC PARA ARRIBA: 80% de ancho y centrado absoluto */ @media (min-width: 1025px) { [data-id="370a001"] { width: 60% !important; margin: 0 auto !important; } } /* DE IPAD PRO PARA ABAJO (1024px): Fuera flechas y ajuste de márgenes */ @media (max-width: 1024px) { /* Nos cargamos las flechas, solo slide táctil */ [data-id="370a001"] .elementor-swiper-button { display: none !important; } /* Quitamos el carril invisible lateral de las flechas para aprovechar toda la pantalla */ [data-id="370a001"] { padding: 0 0 50px 0 !important; /* Mantenemos solo el bajo para los puntos */ width: 100% !important; } } /* ============================================================= FLUENT FORMS: ESTÉTICA PREMIUM "MIEL DEL OLMO" (GLASS BLANCO) ============================================================= */ /* 1. ETIQUETAS DE LOS CAMPOS (Labels) */ .fluentform .ff-el-input--label label { color: #FBFBFB !important; font-family: 'DM Sans', sans-serif !important; font-size: 16px !important; font-weight: 300 !important; margin-bottom: 8px !important; } /* El asterisco rojo de "obligatorio" lo pasamos a tu naranja */ .fluentform .ff-el-is-required.asterisk-right label::after { color: #F17D00 !important; } /* 2. LOS CAMPOS (Inputs, Textareas y Selects) -> Efecto GlassBlanco */ .fluentform .ff-el-form-control { background: rgba(251, 251, 251, 0.05) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; color: #FBFBFB !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; /* Borde sutil */ border-radius: 0px !important; /* Aristas vivas, 0 curvas */ font-family: 'DM Sans', sans-serif !important; padding: 15px !important; height: auto !important; transition: all 0.3s ease !important; } /* 3. PLACEHOLDERS (Los textos de ejemplo dentro del campo) */ .fluentform .ff-el-form-control::placeholder { color: rgba(251, 251, 251, 0.5) !important; /* Blanco al 50% */ font-family: 'DM Sans', sans-serif !important; font-weight: 300 !important; } /* 4. HOVER & FOCUS (Cuando pinchas para escribir) */ .fluentform .ff-el-form-control:hover { border-color: rgba(255, 255, 255, 0.4) !important; } .fluentform .ff-el-form-control:focus { border-color: #FBFBFB !important; /* Se ilumina en blanco puro */ box-shadow: none !important; /* Matamos el resplandor azul feo por defecto */ outline: none !important; background: rgba(251, 251, 251, 0.08) !important; /* Un micro-brillo extra al fondo */ } /* 5. FIX PARA EL DESPLEGABLE (Select) */ /* Para que las opciones no salgan blancas con texto blanco si el navegador se pone tonto */ .fluentform select.ff-el-form-control option { background-color: #4e2201 !important; /* El fondo marrón de tu web */ color: #FBFBFB !important; } /* 6. BOTÓN DE ENVIAR (Solid Orange Premium) */ .fluentform .ff-btn-submit { background-color: #F39125 !important; color: #FBFBFB !important; border: none !important; border-radius: 0px !important; font-family: 'DM Sans', sans-serif !important; font-weight: bold !important; font-size: 18px !important; padding: 16px 30px !important; width: 100% !important; /* Estiramos el botón de lado a lado */ transition: all 0.3s ease !important; text-transform: none !important; } /*hover*/ html body .fluentform .ff-btn-submit:hover, html body .elementor-element-abcdb65 .fluentform-widget-wrapper .ff-el-group .ff-btn-submit:hover { background-color: #F17D00 !important; /* Forzamos el mismo naranja base */ box-shadow: none !important; /* Matamos la iluminación / resplandor */ transform: translateY(-2px) !important; /* Mantenemos solo el saltito hacia arriba */ opacity: 1 !important; } /* 7. ESPACIADO ENTRE CAMPOS */ .fluentform .ff-el-group { margin-bottom: 25px !important; } /* ========================================= BLOQUEO ABSOLUTO DE SCROLL HORIZONTAL (Bugs de 100vw) ========================================= */ html, body { max-width: 100% !important; overflow-x: hidden !important; } /*--*/ /*--*/ /*--*/ /* ========================================= COOKIES ========================================= */ .mgbutton.moove-gdpr-infobar-allow-all, .mgbutton.moove-gdpr-infobar-reject-btn { background-color: #F39124 !important; } /* ============================================================= FIX DEFINITIVO: HEADER STICKY Y MENÚ QUE WRAPEA (ESCRITORIO) ============================================================= */ @media (min-width: 1025px) { /* 1. Bloqueamos el contenedor padre para que NUNCA salte de línea */ .sticky-header { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; /* 🟢 LA CAMISA DE FUERZA */ justify-content: space-between !important; align-items: center !important; } /* 2. Forzamos a que Logo e Iconos mantengan su tamaño original sin aplastarse */ .sticky-header > .elementor-element-a7871ea, .sticky-header > .elementor-element-2d6d32e { flex: 0 0 auto !important; width: auto !important; max-width: max-content !important; } /* 3. El contenedor del menú toma el espacio central, pero sin desbordar */ .sticky-header > .elementor-element-9b32fe4 { flex: 1 1 auto !important; min-width: 0 !important; /* 🟢 CLAVE: Evita que el menú empuje a los otros flex */ display: flex !important; justify-content: center !important; /* Centra el menú en la pantalla */ } /* 4. BLINDAJE DE LAS PALABRAS: Prohibido partir los textos de los enlaces */ .sticky-header .hfe-nav-menu__layout-horizontal .hfe-nav-menu { display: flex !important; flex-wrap: nowrap !important; width: auto !important; } .sticky-header .hfe-nav-menu nav > ul > li, .sticky-header .hfe-nav-menu nav > ul > li > a { white-space: nowrap !important; /* 🟢 IMPIDE que "Sobre la miel" pase a 2 líneas */ flex-shrink: 0 !important; /* Impide que las palabras se encojan */ } } /* ============================================================= AJUSTE HEADER COMPLETO: PORTÁTILES PEQUEÑOS (1025px - 1279px) (Reduce enlaces 3px, título 3px e iconos 20%) ============================================================= */ @media (min-width: 1025px) and (max-width: 1279px) { /* --- 1. LOS 4 ENLACES DEL NAV: Reducir 3px --- */ /* (Mismo valor que te pasé antes, asegúrate de poner tu tamaño base menos 3) */ .sticky-header .hfe-nav-menu nav > ul > li > a.hfe-menu-item, .hfe-nav-menu nav > ul > li > a.hfe-menu-item { font-size: 15px !important; } /* --- 2. TÍTULO "MIEL DEL OLMO": Reducir 3px --- */ /* Selector para el título del logo */ .sticky-header .elementor-heading-title a { /* 🟢 EJEMPLO: Si en PC tienes 30px, pon aquí 27px. Calcula y ajusta. */ font-size: 15px !important; } /* --- 3. AMBOS ICONOS (USUARIO + CARRITO): Reducir 20% --- */ /* Base original: 56px. Nuevo tamaño (56px * 0.8): 44.8px -> Usamos 45px */ /* Contenedor Icono Usuario */ .elementor-element-3fd90ea .elementor-icon { width: 45px !important; height: 45px !important; } /* Micro-muñeco interior (Base 28px * 0.8 = 22.4px -> Usamos 22px) */ .elementor-element-3fd90ea .elementor-icon svg { width: 22px !important; } /* Contenedor Icono Carrito (ID FunnelKit) */ #fkcart-mini-toggler { width: 45px !important; height: 45px !important; } } /* ============================================================= FUNNELKIT: THANK YOU PAGE (CONFIRMACIÓN DE PEDIDO) PREMIUM ============================================================= */ /* 1. FONDO DE LA PÁGINA (Solo se aplica si está en modo Canvas/Aislado) */ body.wffn_ty-template { background-color: #4e2201 !important; /* Tu marrón corporativo */ background-image: radial-gradient(circle at 90% 95%, rgba(211, 140, 76, 0.45) 0%, rgba(183, 104, 45, 0.15) 45%, transparent 85%) !important; background-blend-mode: screen !important; color: #FBFBFB !important; } /* 2. TEXTOS GENERALES Y TITULARES SUPERIORES (¡Gracias John! etc) */ .wffn_ty-template .elementor-widget-text-editor p, .wffn_ty-template .elementor-widget-text-editor span { color: #FBFBFB !important; font-family: 'DM Sans', sans-serif !important; } /* Hacemos que el "¡Gracias!" parezca un título de verdad */ .wffn_ty-template .elementor-element-988d873 p, .wffn_ty-template .elementor-element-55f27b45 p { font-family: 'Playfair Display', serif !important; font-size: 32px !important; color: #F17D00 !important; /* En naranja para que destaque */ margin-bottom: 5px !important; } /* 3. ICONO DE CHECK (Verificado) */ .wffn_ty-template .elementor-icon svg { fill: #F17D00 !important; /* Lo pasamos a Naranja Corporativo */ width: 60px !important; height: 60px !important; } /* 4. CAJAS DE INFORMACIÓN (Efecto GlassBlanco) */ .wffn_ty-template .wfty_box { background: rgba(251, 251, 251, 0.05) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; border-radius: 0px !important; /* Aristas vivas */ padding: 35px !important; margin-bottom: 30px !important; box-shadow: 0 15px 40px rgba(0,0,0,0.15) !important; } /* Títulos de las cajas ("Detalles", "Pedido") */ .wffn_ty-template .wfty_title { color: #F17D00 !important; /* Naranja */ font-family: 'Playfair Display', serif !important; font-size: 24px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important; padding-bottom: 15px !important; margin-bottom: 20px !important; text-transform: none !important; } /* 5. DATOS DEL CLIENTE */ .wffn_ty-template .wfty_text_bold strong { color: rgba(251, 251, 251, 0.6) !important; /* Un gris/blanco sutil para las etiquetas */ font-family: 'DM Sans', sans-serif !important; font-weight: 400 !important; text-transform: uppercase; font-size: 13px !important; letter-spacing: 1px; } .wffn_ty-template .wfty_view { color: #FBFBFB !important; font-family: 'DM Sans', sans-serif !important; font-size: 16px !important; line-height: 1.6 !important; margin-top: 5px !important; } /* 6. LISTA DE PRODUCTOS (El carrito) */ .wffn_ty-template .wfty_pro_list { border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; padding-bottom: 20px !important; margin-bottom: 20px !important; } /* Título del producto */ .wffn_ty-template .wfty_t { font-family: 'Playfair Display', serif !important; font-size: 20px !important; color: #FBFBFB !important; } /* Imagen del tarrito de miel */ .wffn_ty-template .wfty_p_img img { border: 1px solid rgba(255, 255, 255, 0.2) !important; border-radius: 0px !important; background-color: rgba(255, 255, 255, 0.05) !important; /* Fondito tenue por si hay transparencias */ } /* Multiplicador de cantidad (Ej: x 2) */ .wffn_ty-template .wfty_quantity_value_box { background: rgba(241, 125, 0, 0.2) !important; /* Fondo naranjita tenue */ color: #F17D00 !important; /* Texto naranja */ border-radius: 4px !important; padding: 3px 8px !important; font-weight: bold !important; font-size: 14px !important; margin-left: 10px !important; } /* Precios */ .wffn_ty-template .woocommerce-Price-amount { color: #FBFBFB !important; font-family: 'DM Sans', sans-serif !important; font-weight: bold !important; font-size: 18px !important; } /* 7. TABLA DE TOTALES (Subtotal, Envío, Total) */ .wffn_ty-template .wfty_pro_list_cont table tfoot th { color: rgba(251, 251, 251, 0.7) !important; font-family: 'DM Sans', sans-serif !important; font-weight: 400 !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; padding-top: 15px !important; } .wffn_ty-template .wfty_pro_list_cont table tfoot td { border-top: 1px solid rgba(255, 255, 255, 0.1) !important; padding-top: 15px !important; } /* Fila del TOTAL FINAL */ .wffn_ty-template .wfty_pro_list_cont table tfoot tr:last-child th, .wffn_ty-template .wfty_pro_list_cont table tfoot tr:last-child td { border-top: 1px solid #F17D00 !important; /* Raya naranja para separar el total */ padding-top: 20px !important; } .wffn_ty-template .wfty_pro_list_cont table tfoot tr:last-child .woocommerce-Price-amount { color: #F17D00 !important; /* Precio final en Naranja */ font-size: 24px !important; } /* 8. BOTONES INFERIORES ("Mira cómo se hace", "Volver a la tienda") */ .wffn_ty-template .elementor-widget-button a.elementor-button { background-color: #F17D00 !important; color: #FBFBFB !important; border-radius: 0px !important; font-family: 'DM Sans', sans-serif !important; font-weight: bold !important; text-transform: none !important; padding: 16px 30px !important; transition: all 0.3s ease !important; border: none !important; } .wffn_ty-template .elementor-widget-button a.elementor-button:hover { background-color: #d16b00 !important; transform: translateY(-2px) !important; box-shadow: 0 5px 20px rgba(241, 125, 0, 0.4) !important; } /* ============================================================= FIX: FORZAR DISPLAY Y REDISEÑAR LOS RADIOS DE TARJETAS GUARDADAS ============================================================= */ /* 1. Rescatarlos del "display: none" anterior y aplicar estilo base */ html body #wfacp-e-form ul.wc_payment_methods li.payment_method_fkwcs_stripe .fkwcs-saved-payment-methods input[type="radio"].woocommerce-SavedPaymentMethods-tokenInput { display: inline-block !important; /* 🟢 FIX: Forzamos a que aparezcan */ -webkit-appearance: none !important; appearance: none !important; width: 20px !important; height: 20px !important; min-width: 20px !important; background-color: transparent !important; /* Fondo transparente */ border: 1px solid rgba(255, 255, 255, 0.4) !important; /* Borde blanco sutil */ border-radius: 3px !important; /* Cuadrado con curva suave */ outline: none !important; cursor: pointer !important; position: relative !important; margin: 0 !important; margin-right: 10px !important; /* Separación con el texto */ transition: all 0.2s ease-in-out !important; } /* 2. Estado Checked: Fondo Naranja y Tick SVG Blanco */ html body #wfacp-e-form ul.wc_payment_methods li.payment_method_fkwcs_stripe .fkwcs-saved-payment-methods input[type="radio"].woocommerce-SavedPaymentMethods-tokenInput:checked { background-color: #F17D00 !important; /* Tu naranja */ border-color: #F17D00 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBFBFB' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important; background-size: 14px 14px !important; background-position: center !important; background-repeat: no-repeat !important; } /* 3. Alineación para que no se descuadren con el texto */ html body #wfacp-e-form ul.wc_payment_methods li.payment_method_fkwcs_stripe .fkwcs-saved-payment-methods li { display: flex !important; align-items: center !important; margin-bottom: 12px !important; } html body #wfacp-e-form ul.wc_payment_methods li.payment_method_fkwcs_stripe .fkwcs-saved-payment-methods label { cursor: pointer !important; margin: 0 !important; color: #FBFBFB !important; } html body #wfacp-e-form ul.wc_payment_methods li.payment_method_fkwcs_stripe .payment_box { display: block !important; } /* ============================================================= Miel Del Olmo - Color de Enlaces en Páginas de Sistema (Naranja en contenido / Blanco en Header y Footer) ============================================================= */ /* 1. COLOR BASE PARA ESTAS PÁGINAS: Naranja Corporativo */ body.woocommerce-account a, body.woocommerce-checkout a, body.page-template-default:not(.elementor-page) a, body.archive:not(.elementor-page) a, .woocommerce-PasswordLost a { color: #F17D00 !important; text-decoration: none !important; transition: color 0.2s ease-in-out !important; } /* 2. EXCEPCIÓN: Forzar Blanco en Header y Footer dentro de estas páginas */ body.woocommerce-account header#masthead a, body.woocommerce-account footer#colophon a, body.woocommerce-checkout header#masthead a, body.woocommerce-checkout footer#colophon a, body.page-template-default:not(.elementor-page) header#masthead a, body.page-template-default:not(.elementor-page) footer#colophon a, body.archive:not(.elementor-page) header#masthead a, body.archive:not(.elementor-page) footer#colophon a { color: #FBFBFB !important; } /* 3. COLOR HOVER GLOBAL (En estas páginas): Amarillo Claro (#ffc754) */ body.woocommerce-account a:hover, body.woocommerce-checkout a:hover, body.page-template-default:not(.elementor-page) a:hover, body.archive:not(.elementor-page) a:hover, .woocommerce-PasswordLost a:hover { color: #ffc754 !important; } /* 4. FIX EXTRA: Textos de "Recuérdame" y etiquetas (Mantenemos blanco para lectura) */ body.woocommerce-account .woocommerce-form-login__rememberme span, body.woocommerce-account label[for="rememberme"] { color: #FBFBFB !important; } /* ============================================================= 5. FIX: FORZAR FOOTER ABAJO EN PÁGINAS CORTAS (Flexbox) ============================================================= */ /* Hacemos que el contenedor principal de la página mida al menos el 100% de la pantalla */ body.woocommerce-account #page, body.woocommerce-checkout #page, body.page-template-default:not(.elementor-page) #page, body.archive:not(.elementor-page) #page { display: flex !important; flex-direction: column !important; min-height: 100vh !important; } /* Obligamos al área de contenido a estirarse y empujar el footer hacia abajo */ body.woocommerce-account #content, body.woocommerce-checkout #content, body.page-template-default:not(.elementor-page) #content, body.archive:not(.elementor-page) #content { flex-grow: 1 !important; } /* ============================================================= 6. ESTILOS DE PÁGINAS "MI CUENTA" (Formularios y Menú) ============================================================= */ /* --- A. MENÚ LATERAL DE MI CUENTA (Adiós a los puntos feos) --- */ body.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none !important; /* Quitamos los puntos */ padding: 0 !important; margin: 0 !important; } body.woocommerce-account .woocommerce-MyAccount-navigation li { margin-bottom: 5px !important; } body.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block !important; padding: 12px 15px !important; background-color: rgba(0, 0, 0, 0.15) !important; /* Fondo semi-transparente */ border-radius: 4px !important; color: #FBFBFB !important; /* Texto blanco por defecto */ border-left: 3px solid transparent !important; /* Borde invisible preparado para el hover */ transition: all 0.3s ease !important; } /* Hover y Estado Activo del Menú Lateral */ body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a, body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background-color: rgba(0, 0, 0, 0.4) !important; /* Se oscurece al pasar el ratón */ border-left: 3px solid #F17D00 !important; /* Raya naranja a la izquierda */ color: #ffc754 !important; /* Texto amarillo */ } /* --- B. CAMPOS DE RELLENO (Estilo Glass oscuro) --- */ body.woocommerce-account .woocommerce form input[type="text"], body.woocommerce-account .woocommerce form input[type="email"], body.woocommerce-account .woocommerce form input[type="password"], body.woocommerce-account .woocommerce form input[type="tel"], body.woocommerce-account .woocommerce form select, body.woocommerce-account .woocommerce form textarea { background-color: rgba(0, 0, 0, 0.2) !important; /* Fondo cristal */ color: #FBFBFB !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 3px !important; height: 48px !important; padding: 0 15px !important; font-family: 'DM Sans', sans-serif !important; width: 100% !important; box-sizing: border-box !important; transition: border-color 0.3s ease, background-color 0.3s ease !important; } /* Textarea un poco más alto */ body.woocommerce-account .woocommerce form textarea { height: auto !important; padding: 15px !important; } /* Foco de los campos (cuando pinchas para escribir) */ body.woocommerce-account .woocommerce form input:focus, body.woocommerce-account .woocommerce form textarea:focus { border-color: #F17D00 !important; /* Borde naranja */ outline: none !important; background-color: rgba(0, 0, 0, 0.3) !important; /* Un poco más oscuro */ } /* --- C. BOTONES (Naranja Corporativo) --- */ body.woocommerce-account .woocommerce form button[type="submit"], body.woocommerce-account .woocommerce .button { background-color: #F17D00 !important; color: #FBFBFB !important; border: none !important; border-radius: 3px !important; padding: 12px 24px !important; font-family: 'DM Sans', sans-serif !important; font-size: 16px !important; font-weight: 500 !important; cursor: pointer !important; transition: background-color 0.2s ease, transform 0.1s ease !important; } body.woocommerce-account .woocommerce form button[type="submit"]:hover, body.woocommerce-account .woocommerce .button:hover { background-color: #ffc754 !important; /* Fondo amarillo en hover */ color: #1B1C1D !important; /* Texto oscuro para que contraste con el amarillo */ } body.woocommerce-account .woocommerce form button[type="submit"]:active, body.woocommerce-account .woocommerce .button:active { transform: scale(0.98) !important; /* Efecto de "hundirse" al clicar */ } /* --- D. CAJAS Y ETIQUETAS (Fieldsets como el de la contraseña) --- */ body.woocommerce-account .woocommerce form fieldset { border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 5px !important; padding: 20px !important; margin-top: 20px !important; background: transparent !important; } body.woocommerce-account .woocommerce form fieldset legend { color: #F17D00 !important; font-size: 16px !important; font-weight: bold !important; padding: 0 10px !important; } body.woocommerce-account .woocommerce form label { color: #FBFBFB !important; margin-bottom: 8px !important; display: inline-block !important; } /* ============================================================= 7. REDISEÑO TOTAL Y EXACTO: PÁGINA DE PRODUCTO INDIVIDUAL ============================================================= */ /* --- A. LIMPIEZA: Ocultar Google Pay, Categorías y Lupa --- */ body.single-product #fkwcs_stripe_smart_button_wrapper, body.single-product .fkwcs_google_pay_wrapper, body.single-product .product_meta, body.single-product .woocommerce-product-gallery__trigger { display: none !important; } /* --- B. FIX ENLACES: Header y Footer en blanco, resto Naranja --- */ body.single-product header#masthead a, body.single-product footer#colophon a { color: #FBFBFB !important; } body.single-product header#masthead a:hover, body.single-product footer#colophon a:hover { color: #ffc754 !important; } body.single-product header#masthead .elementor-icon svg { fill: #FBFBFB !important; transition: fill 0.2s ease-in-out !important; } body.single-product header#masthead .elementor-icon:hover svg { fill: #ffc754 !important; } /* --- C. FIX IMAGEN 5: Cajas GlassNegro Independientes (Para no invadir abajo) --- */ /* Matamos cualquier fondo general del contenedor padre */ body.single-product #main > div.product { background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 !important; display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; margin-bottom: 40px !important; } /* Aplicamos el GlassNegro a cada mitad (Foto y Texto) por separado */ body.single-product #main > div.product .woocommerce-product-gallery, body.single-product #main > div.product .summary { background-color: rgba(0, 0, 0, 0.15) !important; box-shadow: inset 6px 6px 15px rgba(0, 0, 0, 0.25) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 0px !important; padding: 40px !important; box-sizing: border-box !important; } @media(max-width:1280px){ body.single-product #main > div.product .woocommerce-product-gallery, body.single-product #main > div.product .summary { padding: 20px !important; } } body.single-product #main > div.product .woocommerce-product-gallery { width: 35% !important; /* Imagen un 15% más pequeña como pediste */ margin: 0 !important; } body.single-product #main > div.product .summary { width: 60% !important; margin: 0 !important; display: flex !important; flex-direction: column !important; /* Nos permite reordenar el contenido */ } /* --- D. FIX IMAGEN 3: Quitar fondo blanco en Hover de la imagen --- */ body.single-product .woocommerce-product-gallery__image, body.single-product .woocommerce-product-gallery__image a, body.single-product .woocommerce-product-gallery__image img, body.single-product .zoomImg { background-color: transparent !important; background: transparent !important; } /* --- E. FIX IMAGEN 2: Orden (Descripción arriba, Precio abajo) y Tipografías --- */ body.single-product h1.product_title { order: 1 !important; font-family: 'Playfair Display', serif !important; font-size: 25px !important; color: #FBFBFB !important; border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important; padding-bottom: 15px !important; margin-bottom: 20px !important; margin-top: 0 !important; } body.single-product .woocommerce-product-details__short-description { order: 2 !important; /* Descripción en 2º lugar */ margin-bottom: 0px !important; } body.single-product .woocommerce-product-details__short-description p { color: #FBFBFB !important; font-family: 'DM Sans', sans-serif !important; font-size: 18px !important; font-weight: 200 !important; } body.single-product .price { order: 3 !important; /* Precio en 3º lugar */ margin-bottom: 20px !important; } body.single-product .price .woocommerce-Price-amount { color: #F17D00 !important; font-family: 'DM Sans', sans-serif !important; font-weight: 300 !important; /* Fuente más fina */ font-size: 20px !important; } body.single-product .price .woocommerce-Price-currencySymbol { color: #FBFBFB !important; /* Símbolo del Euro en blanco */ } body.single-product form.cart { order: 4 !important; } /* --- F. FIX IMAGEN 1: Cantidad en GlassBlanco y Flechas Siempre Visibles --- */ /* --- F. FIX IMAGEN 1: Cantidad en GlassBlanco y Flechas Siempre Visibles --- */ body.single-product form.cart { display: flex !important; align-items: center !important; margin-top: 10px !important; } body.single-product .quantity { background: rgba(251, 251, 251, 0.05) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; border-radius: 1px !important; height: 48px !important; display: flex !important; } body.single-product .quantity input.qty { background: transparent !important; color: #FBFBFB !important; border: none !important; height: 100% !important; width: 70px !important; font-size: 18px !important; text-align: center !important; font-family: 'DM Sans', sans-serif !important; -moz-appearance: number-input !important; -webkit-appearance: auto !important; appearance: auto !important; } /* Forzar que las flechitas del input number se vean SIEMPRE (No solo en hover) */ body.single-product .quantity input[type=number]::-webkit-inner-spin-button, body.single-product .quantity input[type=number]::-webkit-outer-spin-button { opacity: 1 !important; display: block !important; -webkit-appearance: inner-spin-button !important; appearance: inner-spin-button !important; height: 100% !important; cursor: pointer !important; filter: invert(1) brightness(200%) !important; } /* Botón Añadir al carrito a la misma altura */ body.single-product button.single_add_to_cart_button { height: 48px !important; background-color: #F17D00 !important; color: #FBFBFB !important; border: none !important; border-radius: 0px !important; padding: 0 30px !important; font-family: 'DM Sans', sans-serif !important; font-size: 18px !important; font-weight: 500 !important; transition: background-color 0.2s ease, transform 0.1s ease !important; margin: 0 !important; } body.single-product button.single_add_to_cart_button:hover { background-color: #d16b00 !important; } /* --- G. FIX IMAGEN 4: Pestañas y Valoraciones --- */ /* Las cejillas superiores */ body.single-product .woocommerce-tabs { width: 100% !important; } body.single-product .woocommerce-tabs ul.tabs { padding: 0 !important; margin: 0 0 15px 0 !important; border: none !important; display: flex !important; gap: 10px !important; } body.single-product .woocommerce-tabs ul.tabs li { background: rgba(251, 251, 251, 0.05) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; border-radius: 0px !important; padding: 0 !important; margin: 0 !important; } body.single-product .woocommerce-tabs ul.tabs li a { color: #FBFBFB !important; font-family: 'DM Sans', sans-serif !important; font-weight: bold !important; padding: 10px 20px !important; display: block !important; } body.single-product .woocommerce-tabs ul.tabs li.active { background: rgba(255, 255, 255, 0.15) !important; } body.single-product .woocommerce-tabs ul.tabs li.active a { color: #F17D00 !important; } /* El contenido (GlassNegro) */ body.single-product .woocommerce-Tabs-panel { background-color: rgba(0, 0, 0, 0.15) !important; box-shadow: inset 6px 6px 15px rgba(0, 0, 0, 0.25) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 0px !important; padding: 30px !important; color: #FBFBFB !important; } body.single-product .woocommerce-Tabs-panel h2 { display: none !important; /* Fulmina el título redundante "Descripción" */ } body.single-product .woocommerce-Tabs-panel p { font-family: 'DM Sans', sans-serif !important; font-size: 18px !important; font-weight: 200 !important; color: #FBFBFB !important; } /* Valoraciones */ body.single-product .stars a { color: #F17D00 !important; /* Estrellas naranjas */ } body.single-product #review_form textarea, body.single-product #review_form input[type="text"], body.single-product #review_form input[type="email"] { background: rgba(251, 251, 251, 0.05) !important; /* GlassBlanco */ backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; color: #FBFBFB !important; border-radius: 1px !important; padding: 15px !important; font-family: 'DM Sans', sans-serif !important; } body.single-product #review_form textarea:focus { border-color: #FBFBFB !important; outline: none !important; } body.single-product #review_form .submit { background-color: #F17D00 !important; color: #FBFBFB !important; border: none !important; border-radius: 0 !important; padding: 12px 30px !important; font-family: 'DM Sans', sans-serif !important; font-size: 18px !important; font-weight: bold !important; transition: all 0.3s ease !important; } body.single-product #review_form .submit:hover { background-color: #d16b00 !important; transform: translateY(-2px) !important; } /* --- H. FIX IMAGEN 6 Y 7: Tarjetas de Productos Relacionados 100% Calco --- */ body.single-product .related.products { width: 100% !important; } body.single-product .related.products > h2 { font-family: 'Playfair Display', serif !important; font-size: 25px !important; color: #FBFBFB !important; border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important; padding-bottom: 15px !important; margin-bottom: 30px !important; margin-top: 20px !important; } body.single-product .related.products ul.products { display: flex !important; gap: 20px !important; justify-content: center !important; flex-wrap: wrap !important; } @media(max-width: 767px){ body.single-product .related.products ul.products { display: flex !important; gap: 20px 0 !important; justify-content: center !important; flex-wrap: wrap !important; } } /* 1. Base idéntica de la tarjeta */ body.single-product .related.products ul.products li.product { width: 335px !important; height: 408px !important; clip-path: polygon(18% 0%, 82% 0%, 100% 15%, 100% 100%, 0% 100%, 0% 15%) !important; display: flex !important; flex-direction: column !important; align-items: center !important; padding: 42px 0 0 0 !important; /* Top padding original */ border: none !important; box-shadow: none !important; position: relative; overflow: hidden; background-color: rgba(251, 251, 251, 0.05) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; border-radius: 1px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='18,0.5 82,0.5 99.5,15 99.5,99.5 0.5,99.5 0.5,15' fill='none' stroke='rgba(255,255,255,0.3)' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") !important; background-size: 100% 100% !important; margin: 0 !important; transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease-in-out !important; transform: perspective(1000px) translateZ(0) scale(1) !important; } /* Hover 3D */ body.single-product .related.products ul.products li.product:hover { transform: perspective(1000px) scale(1.03) translateZ(0) !important; z-index: 20 !important; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important; } /* 2. Reestructurando WooCommerce usando Grid sobre el enlace interno */ body.single-product .related.products ul.products li.product > a.woocommerce-LoopProduct-link { display: grid !important; grid-template-columns: 1fr auto !important; /* Columna flex y columna ceñida */ column-gap: 15px !important; row-gap: 5px !important; align-items: center !important; padding-left: 25px !important; padding-right: 25px !important; width: 100% !important; box-sizing: border-box !important; flex-grow: 1 !important; /* Empuja el botón "Añadir" hacia abajo */ text-decoration: none !important; } /* El Tarro */ body.single-product .related.products ul.products li.product > a.woocommerce-LoopProduct-link img { grid-column: 1 / 3 !important; grid-row: 1 !important; justify-self: center !important; align-self: center !important; width: 100% !important; max-width: 200px !important; aspect-ratio: 1 / 1 !important; object-fit: contain !important; margin: 0 auto 15px auto !important; /* Empuja el texto hacia abajo */ } /* Título (Izquierda) */ body.single-product .related.products ul.products li.product .woocommerce-loop-product__title { grid-column: 1 !important; grid-row: 2 !important; text-align: left !important; margin: 0 !important; color: #fbfbfb !important; font-family: 'Playfair Display', serif !important; font-weight: 500 !important; font-size: 20px !important; } /* Precio (Derecha) */ body.single-product .related.products ul.products li.product .price { grid-column: 2 !important; grid-row: 2 !important; text-align: right !important; margin: 0 !important; color: #fbfbfb !important; font-family: 'DM Sans', sans-serif !important; font-weight: 900 !important; font-size: 30px !important; } body.single-product .related.products ul.products li.product .price span { color: #fbfbfb !important; font-weight: 400 !important; } /* Botón Sólido Inferior */ body.single-product .related.products ul.products li.product .add_to_cart_button { margin-top: auto !important; background-color: #F17D00 !important; color: #fbfbfb !important; width: 100% !important; padding: 22px 0 !important; /* Espacio simétrico arriba y abajo */ border-radius: 0 !important; font-family: 'DM Sans', sans-serif !important; font-weight: 400 !important; font-size: 18px !important; border: none !important; text-align: center !important; display: block !important; text-transform: none !important; } /* 3. RESPONSIVE EXACTO (1366px) PARA RELACIONADOS */ @media (max-width: 1366px) { body.single-product .related.products ul.products li.product { width: 280px !important; height: 341px !important; padding-top: 35px !important; } body.single-product .related.products ul.products li.product > a.woocommerce-LoopProduct-link { padding-left: 21px !important; padding-right: 21px !important; column-gap: 12px !important; } body.single-product .related.products ul.products li.product > a.woocommerce-LoopProduct-link img { max-width: 165px !important; } body.single-product .related.products ul.products li.product .woocommerce-loop-product__title { font-size: 17px !important; } body.single-product .related.products ul.products li.product .price { font-size: 24px !important; } body.single-product .related.products ul.products li.product .add_to_cart_button { padding: 16px 0 !important; font-size: 14px !important; } } .woocommerce-tabs.wc-tabs-wrapper{ margin-top:20px !important; } .woocommerce div.product form.cart { margin-bottom: 0px !important; } body.single-product .product.type-product{ margin-top: 10px !important; } .woocommerce-product-gallery__wrapper{ display: flex !important; justify-content: center !important; align-items: center !important; } /* --- I. RESPONSIVE MÓVILES PARA PRODUCTO PRINCIPAL --- */ @media (max-width: 1024px) { body.single-product #main > div.product { flex-direction: column !important; } body.single-product #main > div.product .woocommerce-product-gallery, body.single-product #main > div.product .summary { width: 100% !important; } body.single-product #main > div.product .woocommerce-product-gallery { margin-bottom: 20px !important; } } /*FLECHAS DE CANTIDAD */ /* 1. para Chrome, Safari, Edge y Opera */ body.single-product .quantity input[type="number"]::-webkit-inner-spin-button, body.single-product .quantity input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: auto !important; /* LA CLAVE: Forzar apariencia nativa */ appearance: auto !important; display: block !important; opacity: 1 !important; width: 20px !important; /* Ancho físico para que no se colapsen */ height: 100% !important; cursor: pointer !important; filter: invert(1) brightness(2) !important; /* Flechas blancas */ } /* 2. para Firefox (Usa un sistema totalmente distinto) */ body.single-product .quantity input[type="number"] { -moz-appearance: number-input !important; appearance: auto !important; } /* 3. Asegurar que la caja no tape las flechas */ body.single-product .quantity { overflow: visible !important; } /* 🟢 CORRECCIÓN GALERÍA DE PRODUCTO Y THUMBNAILS */ /* 1. Devolvemos el control al script nativo (fuera flexbox de los wrappers) */ body.single-product #main > div.product .woocommerce-product-gallery { display: block !important; } body.single-product .woocommerce-product-gallery__wrapper { display: block !important; /* Permite que el carrusel se mueva horizontalmente */ } /* 2. Imagen principal */ body.single-product .woocommerce-product-gallery__image img.wp-post-image { width: 100% !important; height: auto !important; object-fit: contain !important; margin: 0 auto !important; display: block !important; } /* 3. Matamos el zoom roto (Mantiene el icono de la lupa para abrir en pantalla completa) */ body.single-product .zoomImg { display: none !important; } /* 4. Maquetación Premium de la fila de miniaturas (Thumbnails) */ body.single-product .flex-control-thumbs { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; padding: 0 !important; margin: 20px 0 0 0 !important; /* Separación con la foto principal */ list-style: none !important; } body.single-product .flex-control-thumbs li { width: calc(25% - 7.5px) !important; /* 4 miniaturas exactas por fila */ margin: 0 !important; border-radius: 2px !important; overflow: hidden !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; background: rgba(255, 255, 255, 0.05) !important; cursor: pointer !important; transition: border-color 0.3s ease !important; } body.single-product .flex-control-thumbs li img { width: 100% !important; height: auto !important; display: block !important; opacity: 0.4 !important; /* Apagadas por defecto */ transition: opacity 0.3s ease !important; border: none !important; box-shadow: none !important; } /* Efecto Hover y Activo en la miniatura (Se ilumina y borde naranja) */ body.single-product .flex-control-thumbs li:hover, body.single-product .flex-control-thumbs li img.flex-active { border-color: #F17D00 !important; } body.single-product .flex-control-thumbs li:hover img, body.single-product .flex-control-thumbs li img.flex-active { opacity: 1 !important; } /* ============================================================= FIX: AMPLIAR MAX-WIDTH DE 1140px a 1440px EN PRODUCTOS (Sobrescribir Tema) ============================================================= */ @media (min-width: 1500px) { /* Combinamos tu clase de producto con el selector exacto del tema para ganar la batalla de CSS */ body.single-product:not([class*="elementor-page-"]) .site-main, body.single-product .site-main { max-width: 1440px !important; margin: 0 auto !important; /* Asegura que siga perfectamente centrado */ } } /* ============================================================= FIX: ENLACES MORADOS EN HEADER/FOOTER (PÁGINAS SINGLE-POST) ============================================================= */ /* 1. Forzar blanco roto en los enlaces del Header y el Footer */ body.single-post header#masthead a, body.single-post footer#colophon a { color: #FBFBFB !important; text-decoration: none !important; transition: color 0.3s ease-in-out !important; } /* 2. Hover en el amarillo/naranja global para mantener cohesión */ body.single-post header#masthead a:hover, body.single-post footer#colophon a:hover { color: #ffc754 !important; } /* 3. Blindaje para los iconos SVG (Lupa, carrito, usuario, redes) */ body.single-post header#masthead .elementor-icon svg, body.single-post footer#colophon .elementor-icon svg { fill: #FBFBFB !important; transition: fill 0.3s ease-in-out !important; } body.single-post header#masthead .elementor-icon:hover svg, body.single-post footer#colophon .elementor-icon:hover svg { fill: #ffc754 !important; } @media (max-width: 768px) { .fkwcs_express_smart_button_wrapper { display: flex !important; width: 100% !important; } .fkwcs_express_smart_button_wrapper iframe { opacity: 1 !important; visibility: visible !important; } /* Convertimos el formulario en un contenedor flex que permite saltos de línea */ form.cart { display: flex !important; flex-wrap: wrap !important; align-items: center; gap: 15px; /* Espacio entre el selector de cantidad y el botón de añadir */ } /* Aseguramos que la cantidad y el botón clásico mantengan su tamaño y queden en línea */ form.cart .quantity, form.cart .single_add_to_cart_button { flex: 0 0 auto !important; margin: 0 !important; /* Reseteamos márgenes por si el tema los descoloca */ } /* Obligamos al contenedor de Stripe a ocupar toda la fila de abajo */ form.cart .fkwcs_stripe_smart_button_wrapper { justify-content: center !important; width: 100% !important; flex-basis: 100% !important; margin-top: 10px !important; /* Separación vertical con los botones de arriba */ } } /* Convierte el formulario en un contenedor flex */ form.cart { display: flex !important; flex-wrap: wrap !important; align-items: center; gap: 15px; } /* Mantiene la cantidad y el carrito juntos a la izquierda con su tamaño original */ form.cart .quantity, form.cart .single_add_to_cart_button { flex: 0 0 auto !important; margin: 0 !important; } /* En PC: Empuja el botón de pago inteligente a la derecha */ form.cart .fkwcs_stripe_smart_button_wrapper { margin-left: auto !important; flex: 0 1 auto !important; min-width: 200px; /* Asegura que el botón no se encoja de más */ } /* En Móvil: Fuerza el botón de pago a saltar de línea y ocupar el 100% */ @media (max-width: 768px) { form.cart .fkwcs_stripe_smart_button_wrapper { margin-left: 0 !important; margin-top: 10px !important; flex-basis: 100% !important; width: 100% !important; } } /* 1. Forzamos el contenedor padre con máxima prioridad para pegar al top en PC */ .woocommerce div.product form.cart { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; gap: 15px !important; } /* 2. El media query va por separado y contiene la clase dentro */ @media (max-width: 768px) { .woocommerce div.product form.cart { justify-content: center !important; width: 100% !important; /* Vital para que el contenedor ocupe todo el ancho y tenga espacio donde centrar */ } } /* 2. Reseteo estricto para que los botones no tengan márgenes ocultos */ .woocommerce div.product form.cart .quantity, .woocommerce div.product form.cart .single_add_to_cart_button, .woocommerce div.product form.cart .fkwcs_stripe_smart_button_wrapper { margin-top: 0 !important; flex: 0 0 auto !important; } /* Reiniciamos el contenedor del separador para usar Flexbox real */ #fkwcs-payment-request-separator { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; margin: 0px 0 10px 0 !important; border: none !important; /* Quita el borde/línea nativa que tacha todo */ background: transparent !important; } /* Creamos dos líneas independientes y anulamos la posición absoluta de FunnelKit */ #fkwcs-payment-request-separator::before, #fkwcs-payment-request-separator::after { content: "" !important; position: static !important; /* VITAL: Evita que la línea flote y cruce la pantalla */ flex: 1 !important; /* Hace que se estiren ocupando el hueco libre */ height: 1px !important; background-color: rgba(255, 255, 255, 0.4) !important; border: none !important; width: auto !important; transform: none !important; left: auto !important; right: auto !important; top: auto !important; } /* Ajustes del texto central */ #fkwcs-payment-request-separator label { position: static !important; /* VITAL: Anula el absolute nativo */ flex: 0 0 auto !important; margin: 0 15px !important; /* Separa el texto de las líneas */ padding: 0 !important; background: transparent !important; /* Permite ver tu fondo degradado */ color: #ffffff !important; transform: none !important; } form.cart .fkwcs_stripe_smart_button_wrapper{ margin-left: inherit !important; } /* 4. Móvil: Lo mandamos abajo del todo */ @media (max-width: 768px) { .woocommerce div.product form.cart .fkwcs_stripe_smart_button_wrapper { flex-basis: 100% !important; width: 100% !important; } } @media (max-width: 768px) { /* Forzamos el ancho completo para que flexbox tenga espacio donde centrar */ .woocommerce div.product form.cart { width: 100% !important; justify-content: center !important; } /* Anulamos márgenes laterales que puedan desviar el grupo hacia un lado */ .woocommerce div.product form.cart .quantity, .woocommerce div.product form.cart .single_add_to_cart_button { margin-left: 0 !important; margin-right: 0 !important; } } .woocommerce div.product form.cart::after, .woocommerce div.product form.cart::before{ display: none !important; } /* ============================================================= FIX DEFINITIVO FINAL V5: GALERÍA MÓVIL/TABLET, LIGHTBOX Y PC ============================================================= */ /* --- 1. FULMINAR EL ZOOM ROTO (6224px) Y FLECHAS FANTASMA --- */ /* Esto arregla de golpe que las fotos se desplacen en móvil y desbloquea el clic del Lightbox */ html body.single-product .woocommerce-product-gallery img.zoomImg, html body.single-product .zoomImg { display: none !important; width: 0 !important; height: 0 !important; pointer-events: none !important; visibility: hidden !important; position: absolute !important; } html body.single-product .woocommerce-product-gallery ul.flex-direction-nav, html body.single-product ul.flex-direction-nav, html body.single-product .flex-direction-nav li { display: none !important; } /* --- 2. RECUPERAR EL LIGHTBOX (CLIC EN LA IMAGEN PARA PANTALLA COMPLETA) --- */ /* Convertimos el disparador nativo de PhotoSwipe en una capa clicable transparente sobre la foto principal */ html body.single-product .woocommerce-product-gallery { position: relative !important; } html body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__trigger { display: block !important; position: absolute !important; top: 12px !important; left: 12px !important; right: 12px !important; bottom: 68px !important; /* Deja libres las miniaturas de abajo para poder cambiar de foto */ width: auto !important; height: auto !important; background: transparent !important; border: none !important; box-shadow: none !important; z-index: 99 !important; opacity: 0 !important; /* 100% invisible, pero al tocar cualquier parte del tarro abre el Lightbox */ cursor: zoom-in !important; } html body.single-product .woocommerce-product-gallery__image a { pointer-events: auto !important; cursor: zoom-in !important; } /* --- 3. RESETEO ESTRICTO DEL CARRUSEL FLEXSLIDER (PARA QUE NO SE CORTE EN TABLET/MÓVIL) --- */ html body.single-product #main > div.product div.woocommerce-product-gallery { padding: 12px !important; margin: 0 !important; box-sizing: border-box !important; } html body.single-product .woocommerce-product-gallery .flex-viewport { width: 100% !important; margin: 0 !important; overflow: hidden !important; display: block !important; } /* Matamos el display:flex de tu línea 1244 que descentraba la tira de 800% */ html body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper { display: block !important; justify-content: unset !important; align-items: unset !important; margin: 0 !important; padding: 0 !important; } /* Respetamos el ancho en px que inyecta el JS de WooCommerce en cada slide */ html body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image { display: block !important; float: left !important; margin: 0 !important; position: relative !important; } /* Miniaturas chiquititas abajo */ html body.single-product ol.flex-control-nav.flex-control-thumbs { display: flex !important; justify-content: center !important; gap: 8px !important; margin: 10px auto 0 auto !important; padding: 0 !important; max-width: 100% !important; flex-shrink: 0 !important; position: relative !important; z-index: 100 !important; } html body.single-product ol.flex-control-nav.flex-control-thumbs li { width: 46px !important; max-width: 46px !important; height: 46px !important; flex: 0 0 46px !important; margin: 0 !important; } html body.single-product ol.flex-control-nav.flex-control-thumbs li img { width: 100% !important; height: 100% !important; object-fit: contain !important; padding: 2px !important; box-sizing: border-box !important; } /* --- 4. ESCRITORIO (> 1024px): CERO HUECO EN MEDIO Y ALTURA CLAVADA --- */ @media (min-width: 1025px) { html body.single-product #main > div.product { display: grid !important; grid-template-columns: 34% 1fr !important; column-gap: 25px !important; row-gap: 35px !important; align-items: stretch !important; } html body.single-product #main > div.product div.summary.entry-summary { width: 100% !important; max-width: 100% !important; margin: 0 !important; height: auto !important; box-sizing: border-box !important; } html body.single-product #main > div.product .woocommerce-tabs, html body.single-product #main > div.product .related.products { grid-column: 1 / -1 !important; margin-top: 0 !important; } html body.single-product #main > div.product div.woocommerce-product-gallery { width: 100% !important; max-width: 100% !important; height: 0 !important; min-height: 100% !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; overflow: hidden !important; } html body.single-product .woocommerce-product-gallery .flex-viewport { flex: 1 1 auto !important; height: calc(100% - 56px) !important; min-height: 0 !important; } html body.single-product .woocommerce-product-gallery__wrapper, html body.single-product .woocommerce-product-gallery__image, html body.single-product .woocommerce-product-gallery__image a { height: 100% !important; display: block !important; } /* OJO: Atacamos SOLO a la foto dentro del , nunca a zoomImg */ html body.single-product .woocommerce-product-gallery__image > a > img { width: 100% !important; height: 100% !important; max-height: 100% !important; object-fit: contain !important; margin: 0 auto !important; display: block !important; } } /* --- 5. TABLET Y MÓVIL (<= 1024px): Carrusel centrado al 100%, compacto y botones arriba --- */ @media (max-width: 1024px) { html body.single-product #main > div.product { display: flex !important; flex-direction: column !important; } html body.single-product #main > div.product div.woocommerce-product-gallery { width: 100% !important; max-width: 100% !important; height: auto !important; padding: 10px !important; margin-bottom: 15px !important; display: block !important; } html body.single-product #main > div.product div.summary.entry-summary { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 20px !important; } /* Fijamos solo la altura del visor y de la foto real (> a > img), sin tocar el ancho de los slides */ html body.single-product .woocommerce-product-gallery .flex-viewport { height: 220px !important; max-height: 220px !important; } html body.single-product .woocommerce-product-gallery__image { height: 220px !important; } html body.single-product .woocommerce-product-gallery__image > a { height: 220px !important; display: block !important; } html body.single-product .woocommerce-product-gallery__image > a > img { width: auto !important; max-width: 100% !important; height: 220px !important; max-height: 220px !important; object-fit: contain !important; margin: 0 auto !important; display: block !important; } /* Orden: 1º Título -> 2º Precio -> 3º Botones Compra -> 4º Descripción */ html body.single-product #main > div.product .summary h1.product_title { order: 1 !important; font-size: 22px !important; margin-bottom: 10px !important; padding-bottom: 10px !important; } html body.single-product #main > div.product .summary .price { order: 2 !important; margin-bottom: 12px !important; } html body.single-product #main > div.product .summary form.cart { order: 3 !important; margin-top: 0 !important; margin-bottom: 16px !important; padding-bottom: 16px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important; } html body.single-product #main > div.product .summary .woocommerce-product-details__short-description { order: 4 !important; margin-bottom: 0 !important; } html body.single-product .woocommerce-product-details__short-description p, html body.single-product .woocommerce-Tabs-panel p { font-size: 16px !important; line-height: 1.5 !important; } } /* --- 6. IPAD AIR (820px), IPAD MINI (768px) Y MÓVILES (<= 850px): Centrado de botones --- */ @media (max-width: 850px) { html body.single-product .woocommerce div.product form.cart, html body.single-product form.cart { width: 100% !important; justify-content: center !important; } html body.single-product form.cart .quantity, html body.single-product form.cart .single_add_to_cart_button { margin-left: 0 !important; margin-right: 0 !important; } html body.single-product form.cart .fkwcs_stripe_smart_button_wrapper { margin-left: 0 !important; margin-top: 10px !important; flex-basis: 100% !important; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; } } /* --- 7. MÓVIL (<= 767px): Más compacto --- */ @media (max-width: 767px) { html body.single-product #main > div.product div.woocommerce-product-gallery { padding: 8px !important; } html body.single-product .woocommerce-product-gallery .flex-viewport, html body.single-product .woocommerce-product-gallery__image, html body.single-product .woocommerce-product-gallery__image > a, html body.single-product .woocommerce-product-gallery__image > a > img { height: 180px !important; max-height: 180px !important; } html body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__trigger { bottom: 58px !important; } html body.single-product ol.flex-control-nav.flex-control-thumbs li { width: 40px !important; max-width: 40px !important; height: 40px !important; flex: 0 0 40px !important; } html body.single-product #main > div.product .summary h1.product_title { font-size: 20px !important; } html body.single-product .woocommerce-product-details__short-description p, html body.single-product .woocommerce-Tabs-panel p { font-size: 15px !important; line-height: 1.45 !important; } } /* --- 8. TARROS DE PRODUCTOS RELACIONADOS --- */ html body.single-product .related.products ul.products li.product > a.woocommerce-LoopProduct-link img { width: 100% !important; max-width: 200px !important; height: auto !important; max-height: 200px !important; aspect-ratio: 1 / 1 !important; object-fit: contain !important; object-position: center !important; margin: 20px auto 0 auto !important; } @media (max-width: 1366px) { html body.single-product .related.products ul.products li.product > a.woocommerce-LoopProduct-link img { max-width: 165px !important; max-height: 165px !important; margin: 15px auto 0 auto !important; } } /* ========================================================================== 1. FIX SUBMENÚ ESCRITORIO (Solo PC) ========================================================================== */ @media (min-width: 1025px) { /* 🟢 Aislado en PC: Fuerza al contenedor del submenú a centrarse verticalmente */ .elementor-element-6518419 .hfe-has-submenu-container { display: flex !important; align-items: center !important; height: 100% !important; } /* 🟢 Aislado en PC: Asegura que texto y flecha queden en la misma línea base */ .elementor-element-6518419 .hfe-has-submenu-container a.hfe-menu-item { display: flex !important; align-items: center !important; } /* El contenedor principal del submenú */ .sticky-header .sub-menu { background-color: #4e2201 !important; background-image: radial-gradient(circle at 90% 95%, rgba(101, 54, 20, 0.45) 0%, rgba(130, 78, 38, 0.15) 100%) !important; background-blend-mode: screen !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important; } /* Los enlaces dentro del submenú en PC */ .sticky-header .sub-menu a.hfe-sub-menu-item { color: #FBFBFB !important; background-color: transparent !important; padding: 15px 20px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; } /* Quitar borde al último enlace para que no se doble con el borde de la caja */ .sticky-header .sub-menu li:last-child a.hfe-sub-menu-item { border-bottom: none !important; } /* Hover en PC */ .sticky-header .sub-menu a.hfe-sub-menu-item:hover { background-color: rgba(255, 255, 255, 0.05) !important; color: #F17D00 !important; } } /* ========================================================================== 2. FIX MENÚ MÓVIL Y TABLET (Solo en pantallas menores de 1025px) ========================================================================== */ @media (max-width: 1024px) { /* 1. Limpiar fondos y márgenes en todos los niveles del desplegable */ .sticky-header .hfe-dropdown ul, .sticky-header .hfe-dropdown li, .sticky-header .hfe-dropdown .sub-menu { padding: 0 !important; margin: 0 !important; width: 100% !important; background-color: transparent !important; border: none !important; box-shadow: none !important; } /* 2. Todos los enlaces (principales y sub-enlaces): forzamos el centrado */ .sticky-header .hfe-dropdown a.hfe-menu-item, .sticky-header .hfe-dropdown a.hfe-sub-menu-item { display: block !important; width: 100% !important; box-sizing: border-box !important; background-color: transparent !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; color: #FBFBFB !important; text-align: center !important; padding: 15px 20px !important; outline: none !important; } /* 3. Arreglo definitivo para el ítem con flecha ("Trabaja con nosotros") */ .sticky-header .hfe-dropdown .hfe-has-submenu-container { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; width: 100% !important; background-color: transparent !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; outline: none !important; padding: 0 !important; } .sticky-header .hfe-dropdown .hfe-has-submenu-container a.hfe-menu-item { border-bottom: none !important; width: auto !important; padding-right: 10px !important; } .sticky-header .hfe-dropdown .hfe-has-submenu-container .hfe-menu-toggle { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; border: none !important; outline: none !important; } /* 4. Matar fondos blancos/naranjas al hacer clic */ .sticky-header .hfe-dropdown .sub-menu, .sticky-header .hfe-dropdown .sub-menu a.hfe-sub-menu-item, .sticky-header .hfe-dropdown *:focus, .sticky-header .hfe-dropdown *:active, .sticky-header .hfe-dropdown .hfe-has-submenu-container.hfe-active, .sticky-header .hfe-dropdown .menu-item.hfe-active, .sticky-header .hfe-dropdown .menu-item-has-children.hfe-active > .hfe-has-submenu-container { background-color: transparent !important; background: none !important; outline: none !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent !important; } /* 5. Solucionar el solapamiento empujando el contenido hacia abajo */ .sticky-header .hfe-dropdown li.menu-item-has-children { height: auto !important; max-height: none !important; position: relative !important; display: block !important; } .sticky-header .hfe-dropdown ul.sub-menu.sub-menu-open { position: static !important; height: auto !important; display: block !important; } a.hfe-menu-item{ background:none !important; font-weight: 500 !important; } } /* ============================================================= FIX DEFINITIVO: PARPADEO AJAX, RADIO BUTTONS E ICONOS MÓVIL ============================================================= */ /* 1. ELIMINAR EL PARPADEO BLANCO (SHIMMER) AL ACTUALIZAR CARRITO/ENVÍO */ /* Matamos los bloques blancos/grises que FunnelKit pone encima mientras recalcula */ html body.wfacp_anim_active #wfacp-e-form *:after, html body.wfacp_anim_active #wfacp-e-form *:before { animation: none !important; } /* Quitamos específicamente el fondo blanco de carga pero respetamos tus traducciones CSS */ html body.wfacp_anim_active .amount:after, html body.wfacp_anim_active .shipping_total_fee span:after, html body.wfacp_anim_active .wfacp_shipping_table li label:after, html body.wfacp_anim_active .wfacp_shipping_table .wfacp_shipping_price span:after, html body.wfacp_anim_active .wfacp_order_summary_container *:after, html body.wfacp_anim_active .wfacp_mb_mini_cart_wrap *:after, html body.wfacp_anim_active tbody tr.cart_item *:after, html body.wfacp_anim_active .wfacp_shipping_radio:after { display: none !important; background: transparent !important; content: none !important; } /* En vez del fogonazo blanco, hacemos una transición suave de opacidad mientras calcula */ html body.wfacp_anim_active .wfacp_order_summary_container, html body.wfacp_anim_active .wfacp_shipping_options { opacity: 0.6 !important; transition: opacity 0.2s ease !important; } /* 2. ARREGLAR LOS CIRCULITOS (RADIO BUTTONS) DE ENVÍO Y TARJETAS GUARDADAS */ /* Reseteamos los radios (excepto el principal de Stripe que ya tienes oculto) */ html body #wfacp-e-form input[type="radio"]:not(#payment_method_fkwcs_stripe) { -webkit-appearance: none !important; appearance: none !important; width: 18px !important; height: 18px !important; min-width: 18px !important; border: 2px solid rgba(251, 251, 251, 0.6) !important; /* Aro exterior blanco suave */ border-radius: 50% !important; background-color: rgba(0, 0, 0, 0.2) !important; cursor: pointer !important; position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 10px 0 0 !important; padding: 0 !important; vertical-align: middle !important; transition: all 0.2s ease-in-out !important; } /* Estado MARCADO: Borde blanco puro (o pon #F17D00 si lo prefieres naranja) */ html body #wfacp-e-form input[type="radio"]:not(#payment_method_fkwcs_stripe):checked { border-color: #FBFBFB !important; border-width: 2px !important; /* Sobrescribe los 5px transparentes de FunnelKit */ background-color: transparent !important; } /* El puntito interior al estar marcado */ html body #wfacp-e-form input[type="radio"]:not(#payment_method_fkwcs_stripe):checked::before { content: "" !important; display: block !important; /* Sobrescribe el display:none de FunnelKit */ width: 10px !important; height: 10px !important; border-radius: 50% !important; background-color: #F17D00 !important; /* Puntito Naranja Corporativo (o #FBFBFB para blanco) */ position: static !important; margin: 0 !important; transform: none !important; } /* 3. ICONOS EN BLANCO PARA EL RESUMEN DEL PEDIDO EN MÓVIL */ /* El icono del carrito es un SVG inline: le forzamos el relleno blanco */ html body #wfacp-e-form .wfacp_show_icon_wrap svg, html body #wfacp-e-form .wfacp_show_icon_wrap svg path { fill: #FBFBFB !important; color: #FBFBFB !important; } /* La flechita es un externo en negro: usamos filter para invertirla a blanco puro */ html body #wfacp-e-form .wfacp_summary_link img { filter: brightness(0) invert(1) !important; -webkit-filter: brightness(0) invert(1) !important; } /* Extra: Los botones +/- del selector de cantidad en móvil para que también se vean bien */ html body #wfacp-e-form .wfacp_quantity_selector .value-button { color: #FBFBFB !important; background-color: rgba(0, 0, 0, 0.3) !important; border-color: rgba(255, 255, 255, 0.2) !important; } /* ============================================================= LAYOUT GRID 2 COLUMNAS EN ESCRITORIO (PC) PARA FUNNELKIT ============================================================= */ @media (min-width: 992px) { html body #wfacp_checkout_form .wfacp-left-panel { display: grid !important; grid-template-columns: 1.2fr 1fr !important; gap: 0px 40px !important; align-items: start !important; } html body #wfacp_checkout_form .wfacp_smart_buttons { grid-column: 1 / -1 !important; grid-row: 1 / 2 !important; margin-bottom: 20px !important; } html body #wfacp_checkout_form .step_0 { grid-column: 1 / 2 !important; grid-row: 2 / 4 !important; margin-bottom: 10px !important; /* Margen reducido */ } html body #wfacp_checkout_form .step_2 { grid-column: 2 / 3 !important; grid-row: 2 / 3 !important; margin-top: 0 !important; margin-bottom: 0px !important; /* Margen eliminado para pegar el resumen al método de envío */ position: static !important; } html body #wfacp_checkout_form .step_1 { grid-column: 2 / 3 !important; grid-row: 3 / 4 !important; margin-bottom: 10px !important; /* Margen reducido para subir la caja de Pago */ } html body #wfacp_checkout_form .wfacp_payment { grid-column: 1 / -1 !important; grid-row: 4 / 5 !important; margin-top: 0 !important; } } /* ============================================================= ESTILO CAJAS MÉTODO DE ENVÍO (Mismo estilo que los inputs) ============================================================= */ /* Aplicamos el fondo semitransparente y el borde sutil a los items de la lista de envío */ html body #wfacp_checkout_form .wfacp_shipping_options ul#shipping_method li.wfacp_single_shipping_method { background-color: rgba(0, 0, 0, 0.2) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 0px !important; margin-bottom: 10px !important; /* Separación entre el de 24h y 48h */ padding: 0 !important; } /* Matamos el diseño nativo de la caja interior de FunnelKit */ html body #wfacp_checkout_form .wfacp_shipping_options .wfacp_single_shipping { border: none !important; background: transparent !important; padding: 12px 15px !important; /* Mismo padding que tus inputs */ } /* Aseguramos que el texto de dentro se lea perfectamente en blanco */ html body #wfacp_checkout_form .wfacp_shipping_options .wfacp_single_shipping label, html body #wfacp_checkout_form .wfacp_shipping_options .wfacp_single_shipping .wfacp_shipping_price .amount { color: #FBFBFB !important; } /* ============================================================= RETOQUES FINALES: BORDES DE ENVÍO, ALINEACIÓN Y PAGO RÁPIDO ============================================================= */ /* 1. QUITAR BORDE EXTERIOR DE MÉTODOS DE ENVÍO */ /* FunnelKit mete una caja global llamada .wfacp_border, la hacemos invisible */ html body #wfacp_checkout_form .wfacp_shipping_options .wfacp_border { border: none !important; background: transparent !important; padding: 0 !important; } html body #wfacp_checkout_form .wfacp_shipping_options table.wfacp_shipping_table { border: none !important; } /* 2. ALINEAR CIRCULITO Y TEXTO DE ENVÍO EN LA MISMA LÍNEA */ /* Convertimos la caja interior en Flex para alinear verticalmente al centro */ html body #wfacp_checkout_form .wfacp_single_shipping { display: flex !important; align-items: center !important; justify-content: space-between !important; } /* Agrupamos el input (circulito) y la etiqueta (texto) */ html body #wfacp_checkout_form .wfacp_shipping_radio { display: flex !important; align-items: center !important; gap: 12px !important; /* Separación perfecta entre círculo y texto */ margin: 0 !important; } /* Forzamos a la etiqueta a no saltar a la línea de abajo */ html body #wfacp_checkout_form .wfacp_shipping_radio label { margin: 0 !important; padding: 0 !important; line-height: 1 !important; display: inline-block !important; } /* 3. CARGARSE EL SEGUNDO "PAGO RÁPIDO" INNECESARIO */ /* Ocultamos el separador "O" que coge tu traducción de "Pago rápido" */ html body #wfacp_checkout_form .wfacp_smart_button_or_text_placeholder { display: none !important; } #shipping_method{ border: none !important; } .payment_box.payment_method_fkwcs_stripe{ background-color: rgba(0, 0, 0, 0.2) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 0px !important; } /* ============================================================= AJUSTES DE TIPOGRAFÍA EN MÓVIL: PÁGINA DE PRODUCTO INDIVIDUAL ============================================================= */ @media (max-width: 1024px) { /* 1. Reducir los títulos H3 dentro de las descripciones y pestañas */ body.single-product .woocommerce-Tabs-panel h3, body.single-product .summary h3 { font-size: 20px !important; /* Un tamaño más recatado para móvil */ line-height: 1.3 !important; margin-bottom: 10px !important; } /* 2. Aumentar el tamaño del texto normal (Párrafos) para leer mejor con el dedo */ html body.single-product .woocommerce-product-details__short-description p, html body.single-product .woocommerce-Tabs-panel p { font-size: 17px !important; /* Texto más grande y legible[cite: 6] */ line-height: 1.6 !important; /* Más aire entre líneas[cite: 6] */ } } /* Bajar z-index a la galería de producto para que no pise el menú móvil */ .woocommerce-product-gallery, .woocommerce-product-gallery .woocommerce-product-gallery__trigger, .woocommerce-product-gallery .zoomImg { z-index: 98 !important; }