/* PRIMER MAIN.CSS */ /*-------------------------------------------------------------- 0. Reseteo y Box-Sizing --------------------------------------------------------------*/ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } /*-------------------------------------------------------------- 1. Estilos Generales y Tipografía Base --------------------------------------------------------------*/ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } body { font-family: Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.6; color: #555555; background-color: #fff; margin: 0; word-wrap: break-word; -webkit-font-smoothing: antialiased; /* Para Chrome, Safari, Opera */ -moz-osx-font-smoothing: grayscale; /* Para Firefox en macOS */} body.woocommerce-page .minimal-wishlist-table .product-add-to-cart a.button { background-color: #38d4f2; } a { color: #2AB6D6; text-decoration: none; } a:visited, a:active { color: #2AB6D6; } a:hover { text-decoration: none; font-weight:600; } .entry-content { font-family: 'Roboto', sans-serif; font-weight: 400; word-break: break-all; word-wrap:break-word;} img { max-width: 100%; height: auto;display: block; } /*-------------------------------------------------------------- 2. Estructura del Header de ESCRITORIO --------------------------------------------------------------*/ .desktop-header { display: block; } .mobile-header, .mobile-search-container, .mobile-navigation, #page-overlay { display: none; } /* BARRA 1: TOP BAR */ .top-bar { background-color: #202428; color: #ffffff; padding: 8px 0; font-size: 12px; } .top-bar .container { display: flex; align-items: center; } .top-bar-left, .top-bar-right { display: flex; align-items: center; } .top-bar-right { margin-left: auto; } .top-bar-menu { margin: 0; padding: 0; list-style: none; display: flex; gap: 20px; } .top-bar a, .top-bar span { color: #ffffff; text-decoration: none; } .top-bar-menu a i { margin-right: 5px; } /* LOGO HEADER EN SVG */ .custom-logo { width: 150px; height: 46px; display: flex; align-items: center; } /* Para asegurar que el SVG respete proporciones y no se recorte */ .custom-logo svg { display: block; width: 100%; height: auto; } /* LOGO HEADER EN SVG */ /* LOGO MOBILE EN SVG */ .logomov { width: 85px; height: auto; display: inline-block; vertical-align: middle; } .logomov svg { display: block; width: 100%; height: auto; } /* LOGO MOBILE EN SVG */ /* BARRA 2: HEADER PRINCIPAL */ .site-header { background-color: #272B35; padding: 20px 0; border-bottom: 1px solid #444; } .site-header .container { display: flex; justify-content: space-between; align-items: center; } .site-branding { flex-shrink: 0; } .custom-logo-link img { max-height: 45px; width: auto; } .header-user-icons { display: flex; align-items: center; gap: 25px; flex-shrink: 0; } .user-icon { display: flex; align-items: center; gap: 8px; text-decoration: none; position: relative; } .user-icon, .user-icon i, .user-icon span { color: #fff; } .user-icon:hover, .user-icon:hover i, .user-icon:hover span { color: #2AB6D6; } .user-icon i { font-size: 22px; } .user-icon span { font-size: 13px; line-height: 1; font-weight: bold; } .icon-count { position: absolute; top: -5px; right: -10px; background-color: #2AB6D6; color: #fff; border-radius: 50%; font-size: 10px; font-weight: bold; width: 18px; height: 18px; display: flex; justify-content: center; align-items: center; } .icon-count:hover, .user-icon span:hover {color: white;} .cart-total { display: flex; align-items: center; gap: 8px; } .cart-total span { font-size: 13px; font-weight: bold; } /* BARRA 3: MENÚ DE NAVEGACIÓN PRINCIPAL */ .main-navigation { background-color: #272B35; width: 100%; border-top: 1px solid #444; } .main-navigation .container { display: flex; align-items: center; justify-content: center; } ul.primary-menu { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } ul.primary-menu a { display: flex; align-items: center; gap: 8px; padding: 10px 15px; color: #fff; text-decoration: none; font-size: 13px; border-radius: 5px; } ul.primary-menu a:hover { background-color: #404552; } ul.primary-menu li { position: relative; } /* Estilos para el menú desplegable de escritorio multi-nivel */ ul.primary-menu li { position: relative; } ul.primary-menu .sub-menu { display: none; position: absolute; z-index: 1000; list-style: none; margin: 0; padding: 10px 0; min-width: 230px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); border-radius: 0 0 5px 5px; } /* Posicionamiento y color del PRIMER nivel */ ul.primary-menu > li > .sub-menu { top: 100%; left: 0; background-color: #2C3E50; /* Color Nivel 1 */ } /* Posicionamiento y color del SEGUNDO nivel */ ul.primary-menu .sub-menu li > .sub-menu { top: -10px; /* Alinea con el padding del padre */ left: 100%; background-color: #34495E; /* Color Nivel 2 */ border-radius: 0 5px 5px 5px; } /* Posicionamiento y color del TERCER nivel (y subsiguientes) */ ul.primary-menu .sub-menu .sub-menu li > .sub-menu { background-color: #283747; /* Color Nivel 3 */ } /* Muestra los menús al pasar el cursor */ ul.primary-menu li:hover > .sub-menu { display: block; } /* Estilo para los enlaces dentro de los desplegables */ ul.primary-menu .sub-menu a { padding: 10px 20px; white-space: nowrap; /* Evita que el texto se rompa en varias líneas */ border-radius: 0; } /* ICONOS INDICADORES PARA MENÚ DESPLEGABLE DE ESCRITORIO */ /* Estilo base para todos los íconos del menú */ .main-navigation ul li.menu-item-has-children > a::after { font-family: 'Font Awesome 6 Free'; font-weight: 900; /* Necesario para que se vean los íconos */ font-size: 0.7em; /* Tamaño del ícono */ margin-left: 8px; position: relative; top: -1px; /* Ajuste vertical fino */ color: rgba(255, 255, 255, 0.7); /* Color sutil */ } /* Ícono "Flecha Abajo" para los elementos del menú principal */ .main-navigation > .container > ul > li.menu-item-has-children > a::after { content: '\f078'; /* Código de Font Awesome para flecha-abajo */ } /* Ícono "Flecha Derecha" para los elementos dentro de los submenús */ .main-navigation .sub-menu li.menu-item-has-children > a::after { content: '\f054'; /* Código de Font Awesome para flecha-derecha */ position: absolute; /* Lo posicionamos a la derecha del todo */ right: 15px; top: 50%; transform: translateY(-50%); margin-left: 0; } /* Añadimos espacio extra a la derecha en los enlaces que tienen sub-menú para que no se monte el texto */ .main-navigation .sub-menu li.menu-item-has-children > a { padding-right: 35px; } /*-------------------------------------------------------------- 3. Contenido Principal, Layout, Footer, etc. --------------------------------------------------------------*/ h1, .entry-title, .product_title { font-size: 1.618em; line-height: 1.250em; margin-bottom: 0.9375rem; font-family: 'Roboto', sans-serif; font-weight: normal; color: #333; letter-spacing: -1.1px; } h2 {font-size: 1.387em; line-height: 1.387em;} h3 {font-size: 1.2em} h4 {font-size: 1.1em} h5 {font-size: 1em;} h6 {font-size: 0.9em;} hr { background-color: #e7e7e7; border: 0; height: 1px; margin-bottom: 1.618em;} .container { max-width: 1400px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } .site-content { padding: 30px 0; } @media (max-width: 768px) { .site-content { padding: 0px 0; } } .site-content .container { display: flex; gap: 30px; } .content-area { flex: 1; min-width: 0; } .widget-area { width: 300px; flex-shrink: 0; } @media only screen and (min-width: 210px) and (max-width: 768px) { .product_title { margin-top: -10px !important; font-size: 1.4em; font-weight: 500; letter-spacing: -1.1px; } } /*-------------------------------------------------------------- 4. Estilos de WooCommerce --------------------------------------------------------------*/ .price { font-weight: 700; font-size: 1.8em !important; color: #FD2C56 !important; margin: 0.7em 0em 0.7em 0em; } .woocommerce-breadcrumb { font-size: 12px !important; padding: 8px 13px !important; background-color: #F9FAFF; border-radius: 5px; color: #555555 !important;} .woocommerce-breadcrumb a { color: #777; text-decoration: none; color: #555555 !important;} .woocommerce-breadcrumb a:hover { color: #555555 !important;} .woocommerce:where(body:not(.woocommerce-uses-block-theme)) .woocommerce-breadcrumb {padding: 6px !important;} .single-product .summary form.cart { padding: 0.5em; background: #ffffff; border-radius: 0.382em; background-clip: padding-box; margin-bottom: 2em; } .woocommerce div.product div.summary { margin-bottom: -0.5em; } /*-------------------------------------------------------------- 5. Pre-Footer y Footer --------------------------------------------------------------*/ .pre-footer { background-color: #272B35; padding: 25px 0; border-top: 2px solid #00c3ff; } .pre-footer-items { display: flex; justify-content: space-around; /* Distribuye los 4 ítems a lo ancho */ align-items: center; width: 100%; padding: 0; margin: 0; list-style: none; } /* Estilo de los enlaces (texto e ícono) */ .pre-footer-items a { display: flex; align-items: center; gap: 15px; color: #fff; text-decoration: none; font-size: 16px; /* Aumentamos el tamaño del texto */ font-weight: bold; /* Lo ponemos en negrita */ } .pre-footer-items a:hover { color: #ccc; } /* Estilo original de los íconos con círculo gris para desktop */ .pre-footer-items i { font-size: 30px; background-color: #3b414d; color: #fff; padding: 10px; border-radius: 50%; width: 45px; height: 45px; display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; } /* Reseteamos colores de marca para que en desktop sean blancos */ .pre-footer-items .fa-whatsapp, .pre-footer-items .fa-facebook-f, .pre-footer-items .fa-telegram-plane, .pre-footer-items .fa-youtube { color: #fff; } /* --- 2. ESTILOS PARA MÓVILES (PANTALLAS DE 768px O MENOS) --- */ @media (max-width: 768px) { /* Cambiamos a un layout de 2 columnas */ .pre-footer-items { display: grid; grid-template-columns: 1fr 1fr; /* Dos columnas */ gap: 20px 15px; padding: 0 20px; } /* Anulamos el estilo de círculo y aplicamos el nuevo */ .pre-footer-items i { background-color: transparent; /* SIN fondo */ padding: 0; width: auto; height: auto; font-size: 24px; border-radius: 0; } /* Aplicamos los colores de marca SOLO en móvil */ .pre-footer-items .fa-whatsapp { color: #25D366; } .pre-footer-items .fa-facebook-f { color: #1877F2; } .pre-footer-items .fa-telegram-plane { color: #2AABEE; } .pre-footer-items .fa-youtube { color: #FF0000; } } /* ============= PRE FOOTER ============= */ .site-footer { background-color: #2B303B; color: #a9b3c1; font-size: 14px; padding-top: 0; } .footer-widgets { padding: 40px 0; } .footer-widgets .container { display: flex; gap: 30px; } .footer-column { flex: 1; } .footer-widgets .widget-title { color: #fff; font-size: 16px; margin-top: 0; margin-bottom: 20px; text-transform: uppercase; } .footer-widgets ul { list-style: none; padding: 0; margin: 0; } .footer-widgets a { color: #a9b3c1; text-decoration: none; } .footer-widgets a:hover { color: #fff; } .site-info { padding: 20px 0; background-color: #1e2228; text-align: center; font-size: 13px; } /*-------------------------------------------------------------- 6. Responsividad y Estilos Móviles --------------------------------------------------------------*/ @media (max-width: 768px) { .desktop-header { display: none; } .mobile-header, .mobile-search-container { display: block; } .mobile-header { display: flex; justify-content: space-between; align-items: center; padding: 7px 15px; background-color: #272B35; color: #fff; position: fixed; z-index: 300000; width: 100%;} .mobile-menu-toggle { flex-grow: 0; } .mobile-logo-currency { flex-grow: 1; justify-content: flex-start; display: flex; align-items: center; gap: 14%; margin-left: 15px; } .mobile-account-icon { flex-grow: 0; } .mobile-logo { max-height: 35px; width: auto; } .mobile-currency-converter select { background: transparent; border: none; color: #fff; font-weight: bold; } .mobile-account-icon a { color: #fff; font-size: 21px; } .mobile-search-container { padding: 70px 15px 15px 15px; background-color: #fff; } .mobile-search-container .site-search { margin: 0; } .woocommerce-breadcrumb { font-size: 13px; } #page-overlay { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 998; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; } .mobile-menu-active #page-overlay { opacity: 1; visibility: visible; } .mobile-navigation { display: block; position: fixed; top: 0; left: 0; width: 280px; height: 100vh; background-color: #272B35; padding: 20px; z-index: 999; transform: translateX(-100%); transition: transform 0.3s ease-in-out; overflow-y: auto; } .mobile-menu-active .mobile-navigation { transform: translateX(0); } .mobile-menu-logo { max-width: 150px; height: auto; } ul.primary-menu-mobile { margin: 0; padding: 0; list-style: none; } /* Estilo base para todos los enlaces del menú móvil */ ul.primary-menu-mobile a { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; color: #fff; text-decoration: none; border-bottom: 1px dotted #444; } /* Títulos principales (Nivel 1): Negrita y Mayúsculas */ .mobile-navigation > ul.primary-menu-mobile > li > a { font-weight: bold; text-transform: uppercase; } /* Submenús (Nivel 2 y subsiguientes): Normal y Capitalizado */ .mobile-navigation .sub-menu a { font-weight: normal; text-transform: capitalize; padding-left: 10px; /* Añade una leve sangría */ } /* Opcional: Elimina la línea del último elemento de cada lista para un look más limpio */ .mobile-navigation ul li:last-child > a { border-bottom: none; } .submenu-toggle::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; } /* Estilo base para TODOS los sub-menús móviles (CORREGIDO) */ .mobile-navigation .sub-menu { list-style: none; padding: 0 0 0 15px; /* Padding vertical solo al abrir */ margin: 0; /* Eliminamos los márgenes que causaban el error */ max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; border-radius: 8px; } /* Al abrir, añadimos el espaciado interno */ .mobile-navigation li.open > .sub-menu { padding-top: 10px; padding-bottom: 10px; margin-top: 8px; margin-bottom: 8px; } /* Nivel 1 de sub-menú */ .mobile-navigation > ul > li > .sub-menu { background-color: #3B3F4C; /* Color Nivel 1 */ } /* Nivel 2 de sub-menú */ .mobile-navigation .sub-menu li > .sub-menu { background-color: #4A4F5C; /* Color Nivel 2 */ } /* Nivel 3 de sub-menú (y subsiguientes) */ .mobile-navigation .sub-menu .sub-menu li > .sub-menu { background-color: #2C2F3A; /* Color Nivel 3 */ } .mobile-navigation > ul.primary-menu-mobile > li > a .menu-icon { margin-right: 10px; font-size: 1.05em; } .mobile-navigation > ul.primary-menu-mobile > li > a { display: flex; align-items: center; justify-content: flex-start; /* texto a la izquierda */ gap: 10px; /* espacio entre icono y texto */ } .mobile-navigation > ul.primary-menu-mobile > li > a .submenu-toggle { margin-left: auto; /* empuja la flecha a la derecha */ } /*---------------------------- PRE FOOTER REDES DENTRO DE MENU MOVIL -------------------------------*/ /* Pre-footer cuando está dentro del menú móvil */ #mobile-navigation .pre-footer-items { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; padding: 16px 20px; border-top: 1px dashed rgba(255,255,255,.15); margin-top: 20px; } #mobile-navigation .pre-footer-items a { display: flex; align-items: center; gap: 10px; line-height: 1.2; } #mobile-navigation .pre-footer-items i { width: 20px; text-align: center; font-size: 1.05em; } /*---------------------------- PRE FOOTER REDES DENTRO DE MENU MOVIL -------------------------------*/ .site-content .container { flex-direction: column; } .widget-area { width: 100%; margin-top: 40px; } .footer-widgets .container { flex-direction: column; } } /*-------------------------------------------------------------- 7. Estilos para Formularios Globales --------------------------------------------------------------*/ input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], input[type="search"], textarea, select, .input-text { background-color: #fff; border: 1px solid #e0e0e0 !important; border-radius: 8px; padding: 10px 15px; font-size: 16px; color: #555; width: 100%; box-shadow: none; transition: border-color 0.3s ease; } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus, select:focus { outline: none; border-color: #2AB6D6; } button, input[type="submit"], .button { background-color: #ffb800; color: #333; border: none; border-radius: 8px; padding: 12px 25px; font-size: 16px; font-weight: bold; cursor: pointer; text-align: center; text-decoration: none; transition: background-color 0.3s ease; } button:hover, input[type="submit"]:hover, .button:hover { background-color: #e6a600; } .quantity { display: flex; align-items: center; border: 1px solid #e0e0e0; border-radius: 8px; } .quantity .qty { width: 50px; text-align: center; border: none; border-left: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; height: 40px; padding: 5px; } .quantity .minus, .quantity .plus { width: 35px; height: 40px; background-color: #f9f9f9; border: none; cursor: pointer; font-size: 20px; line-height: 40px; } .quantity .minus:hover, .quantity .plus:hover { background-color: #f1f1f1; } /*-------------------------------------------------------------- 8. Estilos para Productos en Bucle (Miniaturas) --------------------------------------------------------------*/ /* ===== ESTILOS UNIFICADOS PARA TARJETAS DE PRODUCTO (MINIATURAS) ===== */ .woocommerce ul.products li.product .button > .fas { margin-right: 8px; } .product-card { border: 1px solid #eee; border-radius: 8px; text-align: center; overflow: hidden; background-color: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); transition: box-shadow 0.3s ease; } .product-card:hover { box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); } .product-image-wrapper { position: relative; padding: 20px; } .woocommerce ul.products li.product .woocommerce-loop-product__link { display: block; margin: 0; } .woocommerce ul.products li.product a img { margin-bottom: 0; } .product-card span.onsale { position: absolute; top: 15px; left: 15px; background-color: #e44d4d; color: #fff; border-radius: 4px; padding: 3px 8px; font-size: 12px; font-weight: bold; z-index: 10; } .product-content-wrapper { padding: 20px; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 16px; font-weight: bold; color: #333; margin-bottom: 10px; } .woocommerce ul.products li.product .price { font-size: 18px; font-weight: bold; color: #008080; margin-bottom: 15px; display: block; } .woocommerce ul.products li.product .price del { font-size: 14px; color: #999; margin-right: 10px; } .woocommerce ul.products li.product .price ins { color: #d62828; font-weight: 700; } .woocommerce ul.products li.product .button { background-color: #1FBCEE; color: #fff; width: 100%; padding: 12px; font-size: 14px; margin-bottom: 15px; } .woocommerce ul.products li.product .button:hover { background-color: #1baad8; } .woocommerce ul.products li.product .stock { font-size: 12px; font-weight: bold; color: #28a745; } .woocommerce ul.products li.product:not(.sale) .price { text-align: left; margin-left: 0; } .woocommerce ul.products li.product.sale .price { text-align: center; } @media (max-width: 768px) { .product-card { top: 5px; right: 5px; } .woocommerce ul.products li.product:not(.sale) .price { text-align: left; font-size: 16px; } } /* ===== ESTILOS UNIFICADOS PARA TARJETAS DE PRODUCTO (MINIATURAS) ===== */ /*-------------------------------------------------------------- # 9. Estilos para Mini Carrito Desplegable (CORREGIDO) --------------------------------------------------------------*/ .header-cart-container { position: relative; } .mini-cart-dropdown { position: absolute; top: 100%; right: 0; width: 320px; background-color: #fff; border: 1px solid #eee; box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-radius: 8px; z-index: 1000; padding: 15px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; } .header-cart-container.mini-cart-open .mini-cart-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } /* Estilos internos del mini carrito de WooCommerce */ .mini-cart-dropdown .widget_shopping_cart_content { color: #333; font-size: 14px; } .mini-cart-dropdown .woocommerce-mini-cart { list-style: none; padding: 0; margin: 0 0 10px 0; } .mini-cart-dropdown .woocommerce-mini-cart-item { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f0f0f0; position: relative; } .mini-cart-dropdown .woocommerce-mini-cart-item:last-child { border-bottom: none; } .mini-cart-dropdown .woocommerce-mini-cart-item img { width: 50px; height: auto; border-radius: 4px; flex-shrink: 0; } .mini-cart-dropdown .woocommerce-mini-cart-item .mini_cart_item_content { flex: 1; } .mini-cart-dropdown .woocommerce-mini-cart-item a:not(.remove) { color: #333; font-weight: bold; font-size: 16px; text-decoration: none; display: block; margin-bottom: 5px; } .mini-cart-dropdown .woocommerce-mini-cart-item a:not(.remove):hover { color: #2AB6D6; } /* Botón de eliminar (X) */ .mini-cart-dropdown .woocommerce-mini-cart-item .remove { position: absolute; top: 0; right: 0; font-size: 18px; color: #999; text-decoration: none; line-height: 1; } .mini-cart-dropdown .woocommerce-mini-cart-item .remove:hover { color: #d62828; } /* Estilos para las variaciones */ .mini-cart-dropdown .woocommerce-mini-cart-item dl.variation { margin: 0; font-size: 12px; color: #777; line-height: 1.3; } .mini-cart-dropdown .woocommerce-mini-cart-item dl.variation dt { font-weight: normal; display: inline-block; margin-right: 5px; min-width: 100px; } .mini-cart-dropdown .woocommerce-mini-cart-item dl.variation dd { display: inline-block; margin: 0; } .mini-cart-dropdown .woocommerce-mini-cart-item dl.variation p { margin: 0; } /* ============================================= COMIENZA CSS ADICIONAL ============================================= */ /* ===== GALERÍA DE PRODUCTO CON 5 MINIATURAS (VERSIÓN FINAL) ===== */ /* 1. ESTRUCTURA DE DOS COLUMNAS (LA BASE DE LA SOLUCIÓN) */ .single-product div.product { display: flex; flex-wrap: wrap; gap: 4%; } /* 2. ESTILOS DE LA COLUMNA DE LA GALERÍA */ .single-product div.product .woocommerce-product-gallery { width: 48%; flex-shrink: 0; background-color: #fff; padding: 20px; box-sizing: border-box; } /* 3. ESTILOS DE LA COLUMNA DE INFORMACIÓN */ .single-product div.product .summary { width: 48%; flex-shrink: 0; } /* 4. ASEGURAR QUE LA IMAGEN PRINCIPAL SE AJUSTE */ .single-product .woocommerce-product-gallery__image img { display: block; width: 100%; height: auto; border-radius: 4px; } /* 5. ESTILOS PARA LAS MINIATURAS (VISTA DE ESCRITORIO) */ .single-product .flex-control-thumbs { display: flex !important; flex-wrap: wrap !important; list-style: none !important; padding: 0 !important; margin: 20px 0 0 0 !important; gap: 8px !important; } .single-product .flex-control-thumbs li { /* (100% de ancho - 4 gaps de 8px) dividido entre 5 miniaturas */ width: calc((100% - 32px) / 5) !important; margin: 0 !important; padding: 0 !important; } .single-product .flex-control-thumbs li img { border: 1px solid #ddd; border-radius: 4px; padding: 2px; cursor: pointer; transition: border-color 0.3s ease; width: 100% !important; box-sizing: border-box !important; } .single-product .flex-control-thumbs li img:hover, .single-product .flex-control-thumbs li img.flex-active { border-color: #0073e6 !important; } /* 6. AJUSTES PARA LA VISTA MÓVIL (5 MINIATURAS) */ @media (max-width: 768px) { .single-product div.product .woocommerce-product-gallery, .single-product div.product .summary { width: 100%; } .single-product div.product .woocommerce-product-gallery { margin-bottom: 25px; } /* -- CAMBIO -- Se ajusta el cálculo para que en móvil también se muestren 5 */ .single-product .flex-control-thumbs li { width: calc((100% - 32px) / 5) !important; } } /* ===== GALERÍA DE PRODUCTO CON 5 MINIATURAS (VERSIÓN FINAL) ===== */ /* ================================================================== CORRECCIÓN PARA TABLAS QUE SE DESBORDAN DEL CONTENIDO ================================================================== */ .entry-content table { max-width: 100%!important; /* Asegura que la tabla no sea más ancha que su contenedor */ width: 100%; /* Fuerza a la tabla a ocupar el ancho disponible */ table-layout: fixed!important; /* Ayuda al navegador a controlar mejor el ancho de las columnas */ } /* Aplica a las celdas y encabezados de la tabla */ .entry-content table td, .entry-content table th { word-wrap: break-word; /* Permite que el texto largo se divida en varias líneas */ overflow-wrap: break-word; /* Alternativa moderna para lo mismo */ } .entry-content img { max-width: 100%; } /* ================================================================== FORZAR ESTRUCTURA DE CONTENIDO + SIDEBAR (SOLUCIÓN AL DESBORDAMIENTO) ================================================================== */ /* Esta regla solo se aplica en pantallas de escritorio (más de 768px) */ @media (min-width: 769px) { /* Aseguramos que el contenedor sea flexbox */ .site-content .container { display: flex; gap: 30px; } /* Forzamos el ancho correcto de la columna de contenido principal */ .content-area { flex: 1; /* Ocupa el espacio restante */ min-width: 0; /* Previene que contenido ancho rompa el layout */ width: auto; } /* Forzamos el ancho correcto de la barra lateral */ .widget-area { width: 300px; flex-shrink: 0; /* Evita que la barra lateral se encoja */ } } /* ================================================================== REGLA CORREGIDA PARA CANTIDAD Y PRECIO ================================================================== */ .mini-cart-dropdown .woocommerce-mini-cart-item .quantity { /* Anulamos los estilos de formulario que vienen de custom.css */ border: none; padding: 0; background-color: transparent; border-radius: 0; display: block; /* Lo convertimos en bloque para que se posicione bien */ /* Estilos de texto */ font-size: 14px; font-weight: bold; color: #333; margin-top: 8px; } /* Subtotal */ .mini-cart-dropdown .woocommerce-mini-cart__total { margin-top: 10px; padding-top: 10px; border-top: 1px solid #ddd; text-align: right; font-size: 16px; font-weight: bold; color: #333; } /* Botones */ .mini-cart-dropdown .woocommerce-mini-cart__buttons { display: flex; gap: 10px; margin-top: 10px; } .mini-cart-dropdown .woocommerce-mini-cart__buttons .button { flex: 1; background-color: #f2a039; color: #333; border-radius: 8px; padding: 10px; font-size: 14px; font-weight: bold; text-align: center; text-decoration: none; transition: background-color 0.3s ease; } .mini-cart-dropdown .woocommerce-mini-cart__buttons .button:hover { background-color: #e3932f; } /* ================================================================== MENÚ DESPLEGABLE TIPO SELECT (MÓVIL) ================================================================== */ .mobile-dropdown-nav { position: relative; margin-bottom: 20px; margin-top: 40px; } .mobile-dropdown-nav .dropdown-toggle { background-color: #3B3F4C; /* Mismo color que el acordeón Nivel 1 */ color: #fff; padding: 12px 15px; font-size: 1em; font-weight: bold; border-radius: 5px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; text-transform: uppercase; } .mobile-dropdown-nav .dropdown-toggle::after { content: '\f078'; /* fa-chevron-down */ font-family: 'Font Awesome 6 Free'; font-weight: 900; transition: transform 0.3s ease; } .mobile-dropdown-nav.open .dropdown-toggle::after { transform: rotate(180deg); } .mobile-dropdown-nav ul { display: none; /* Oculto por defecto */ position: absolute; top: calc(100% + 5px); left: 0; right: 0; background-color: #4A4F5C; /* Color del acordeón Nivel 2 */ border-radius: 5px; list-style: none; margin: 0; padding: 5px 0; z-index: 1001; /* Debe estar por encima del resto */ max-height: 250px; overflow-y: auto; } .mobile-dropdown-nav.open ul { display: block; } .mobile-dropdown-nav ul li a { display: flex; align-items: center; gap: 10px; padding: 10px 15px; color: #fff; text-decoration: none; font-size: 0.9em; } .mobile-dropdown-nav ul li a:hover { background-color: #3B3F4C; } /* Responsividad */ @media (max-width: 768px) { .mini-cart-dropdown { width: 280px; padding: 10px; } .mini-cart-dropdown .woocommerce-mini-cart-item { flex-direction: column; align-items: flex-start; } .mini-cart-dropdown .woocommerce-mini-cart__buttons { flex-direction: column; gap: 5px; } .espaciador { width: auto; position: relative; height: 20px; } } /* ================================================================== NUEVO: ESTILOS PARA LOGO Y AJUSTE DE HEADER ================================================================== */ .desktop-header .site-branding .custom-logo { width: 150px; /* Ancho para escritorio */ height: 56px; max-height: none; /* Anula otras restricciones de altura */ vertical-align: middle; /* Alinea mejor la imagen */ } /* Ajuste para el buscador */ .desktop-header .site-search { width: 100%; margin: 0 50px; /* Aumentamos el margen para dar espacio al logo */ } /* ================================================================== NUEVO: ESTILOS PARA TOGGLE DESPLEGABLE ================================================================== */ .geekcel-toggle-wrapper { border: 1px solid #e0e0e0; border-radius: 5px; margin-bottom: 1em; overflow: hidden; /* Clave para el efecto de borde */ } .geekcel-toggle-trigger { background-color: #f9f9f9; padding: 10px 15px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; /* Evita seleccionar el texto al hacer doble clic */ } .geekcel-toggle-trigger .toggle-title-text { font-weight: bold; color: #555; } .geekcel-toggle-trigger .toggle-icon { width: 1em; height: 1em; border-right: 2px solid #555; border-bottom: 2px solid #555; transform: rotate(45deg); transition: transform 0.3s ease-out; } .geekcel-toggle-wrapper.active .geekcel-toggle-trigger .toggle-icon { transform: rotate(-135deg); } .geekcel-toggle-content { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.4s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out; } .geekcel-toggle-wrapper.active .geekcel-toggle-content { max-height: 1000px; /* Un valor alto para permitir cualquier contenido */ opacity: 1; transition: max-height 0.5s ease-in, opacity 0.4s ease-in; } .geekcel-toggle-content-inner { padding: 15px; border-top: 1px solid #e0e0e0; } /* CAJA COMENTARIOS VALORACIONES */ .gmxc-valorations-textarea {border-radius: 7px; height: 90px;} .gmxc-valorations-comment-list {font-size: 0.8em; border-radius: 8px;} .gmxc-valorations-seeMore { border-radius: 12px;height: 3px;color: #2B303B;font-family: Arial;width: 20%;font-size: 0.9em;padding: 21px;line-height: 0.3em;border: 1px solid #2B303B;text-decoration: none;display: inline-block;cursor: pointer;text-align: center;text-transform: uppercase; } .comment-form-comment-subscribe {font-size: 0.7em;} .woocommerce-Reviews [type=submit] {width: 180px; animation: salepulse 2s infinite;} .comment-form-author {width: 46%; float: left;} .comment-form-email {width: 46%; float: right;} .comment-form-cookies-consent {font-size: 0.7em;} .single-product #review_form #respond #commentform label {display: inline;} .comment-form-comment label { font-size: 1.387em; font-weight: bold; display: block; margin-bottom: 10px; } @media only screen and (min-width: 210px) and (max-width: 768px) { .gmxc-valorations-seeMore {font-size:0.6em; border-radius: 8px; padding: 10px;} } /* CAJA COMENTARIOS VALORACIONES */ /*---- STRIPE INFO-----*/ @media only screen and (min-width: 210px) and (max-width: 768px) { .stripeinfo { font-size: 11px; } .fa-check-circle { color: green; font-size: 15px; } } .fa-check-circle { color: green; font-size: 18px; } /*---- STRIPE INFO-----*/ /*---- BLOQUE CONTACTO FOOTER -----*/ .fa-volume-control-phone { font-size: 2.5em; margin-right: 15px; } .wphonenumer { font-size: 1.3em; margin-left: 45px; font-weight: bold; margin-top: 5px; border-bottom: 1px dotted white; padding-bottom: 30px; width: 220px; } .wmailfoicon { font-size: 2.5em; position: relative; top: 20px; margin-right: 10px; } .wmailfo { font-size: 1.3em; margin-left: 55px; font-weight: bold; margin-top: 5px; border-bottom: 1px dotted white; padding-bottom: 30px; } /*---- BLOQUE CONTACTO FOOTER -----*/ /* BARRA INFERIOR RATINGS VALORACIONES */ .woocommerce-review__published-date { color: #646667; font-size: 9px; } .downbarrating { padding: 10px; background: #F9FAFF; border-radius: 6px; margin-bottom: 10px; margin-top: 15px; } .gmx-pop-up-reviews.visible{ display:block; } .gmx-pop-up-reviews{ display:none; position:absolute; background-color:white; min-width:320px; padding:10px; box-sizing:border-box; border:1px solid #f1f1f1; z-index:999; border-radius:7px; box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; } .gmx-pop-up-reviews-count{ padding:10px 0; border-bottom:1px solid #ededed; margin-bottom:10px; } .gmx-pop-up-reviews-count span{ font-weight:bold; } .gmx-pop-up-reviews .gmx-rating-stars{ justify-content:space-around; } .gmx-rating-stars{ width:100%; display:flex; margin-bottom:10px; align-items:center; } .rating-count{ order:1; margin-right:10px; font-weight:bold; color:#2ab6d6; } .rating-stars{ order:2; margin-right:10px; } .rating-graph{ order:3; width:50%; min-width:100px; background-color:#B7C3C5; border-radius:20px; height:10px; } .rating-graph .percentage{ background-color:#2ab6d6; height:10px; border-radius:20px; } .gmx-rating-stars-average{ margin:10px 0 20px; max-width:430px; display:flex; } .gmx-rating-stars-average span { font-size:4em; font-weight:bold; color:#2ab6d6; } @media only screen and (min-width: 210px) and (max-width: 768px) { .gmx-rating-stars-average span { font-size:2em; } } .gmx-rating-stars-average .star-rating{ font-size:22px; margin-left:20px; } .gmx-rating-stars-average .star-rating span:before{ font-size:22px; } /* BARRA INFERIOR RATINGS VALORACIONES */ /* SLIDER MOBILE */ @media only screen and (min-width: 210px) and (max-width: 768px) { .eas-slider-slider {height: 200px; } } /* SLIDER MOBILE */ /* ICONO ANIMACION OFERTA */ .single-product .product span.onsale { top: 12em!important; left: 0.618em!important; -webkit-animation: salepulse 1s infinite; -moz-animation: salepulse 1s infinite; -o-animation: salepulse 1s infinite; animation: salepulse 1s infinite; } ul.products li.product span.onsale { position: absolute; top: 0.5em; right: 1em; left: unset!important; } @media only screen and (min-width: 210px) and (max-width: 768px) { ul.products li.product span.onsale { top:35%; } span.onsale { font-size: 0.5em; } } /* ICONO ANIMACION OFERTA */ /* ACCOUNT FUNDS - BOTON FONDOS DE CUENTA */ .fundsbtn { -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 25px; height: 14px; color: #FFFFFF; font-family: Arial; width: 80%; font-size: 1.225em; padding: 21px; line-height: 0.8em; border: solid #F3F3F3 0px; text-decoration: none; display: inline-block; cursor: pointer; background-image: -webkit-linear-gradient(left,#e9296d 50%,#6741dc 100%); background-image: -o-linear-gradient(left,#e9296d 50%,#6741dc 100%); background-image: linear-gradient(to right,#e9296d 50%,#6741dc 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9296d',endColorstr='#6741dc',GradientType=1); text-align: center; } .fundsbtn:hover { background-image: -webkit-linear-gradient(left,#6741dc 50%,#e9296d 100%); background-image: -o-linear-gradient(left,#6741dc 50%,#e9296d 100%); background-image: linear-gradient(to right,#6741dc 50%,#e9296d 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6741dc',endColorstr='#e9296d',GradientType=1); } /* ACCOUNT FUNDS - BOTON FONDOS DE CUENTA */ /* ACERCA DE NOSOTROS */ .divabout { text-align:left; } .abouttext { font-size:1.6em; font-weight:bold; color:#E4E4E6; font-family: "Helvetica Neue", Helvetica, sans-serif; margin-bottom:0.6em; margin-top: 0.6em; } /* ACERCA DE NOSOTROS */ /* BOTON PREGUNTANOS ALGO */ .contactbtn { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; min-height: 50px; /* Altura mínima para contener el texto y padding */ line-height: 50px; /* Alinea el texto verticalmente */ color: #FFFFFF !important; font-family: Arial, sans-serif; width: 90%; font-weight: bold; font-size: 1em; padding: 0 21px; /* Padding horizontal, ajustado verticalmente por line-height */ border: solid #F3F3F3 0px; text-decoration: none; display: inline-block; cursor: pointer; text-align: center; /* Centra el texto horizontalmente */ white-space: nowrap; /* Evita que el texto se divida en varias líneas */ border-radius: 15px; /* Gradiente optimizado */ background: linear-gradient(to right, #2cceca 0%, #1ebbf0 100%); -webkit-transition: background 0.3s ease; /* Transición suave al hover */ -moz-transition: background 0.3s ease; transition: background 0.3s ease; } .contactbtn:hover { background: linear-gradient(to right, #1ebbf0 0%, #2cceca 100%); width: 93%; font-weight: bold; font-size: 1.1em; } /* Media Query para tablets (hasta 1060px) */ @media only screen and (max-width: 1060px) { .contactbtn { -webkit-border-radius: 10px; -moz-border-radius: 10px; min-height: 40px; line-height: 40px; font-size: 1em; padding: 0 15px; } } /* Media Query para móviles (hasta 770px) */ @media only screen and (max-width: 770px) { .contactbtn { -webkit-border-radius: 10px; -moz-border-radius: 10px; min-height: 45px; line-height: 45px; font-size: 1.1em; padding: 0 18px; width: 90%; } } /* BOTON PREGUNTANOS ALGO */ /* BOTON POST */ .postbtn { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; height: 14px; color: #FFFFFF; font-family: Arial; width: 85%; font-size: 1.225em; padding: 21px; line-height: 2px; border: solid #F3F3F3 0px; text-decoration: none; display: inline-block; cursor: pointer; background-image: -webkit-linear-gradient(left,#e9296d 50%,#6741dc 100%); background-image: -o-linear-gradient(left,#e9296d 50%,#6741dc 100%); background-image: linear-gradient(to right,#e9296d 50%,#6741dc 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9296d',endColorstr='#6741dc',GradientType=1); } .postbtn:hover { background-image: -webkit-linear-gradient(left,#6741dc 50%,#e9296d 100%); background-image: -o-linear-gradient(left,#6741dc 50%,#e9296d 100%); background-image: linear-gradient(to right,#6741dc 50%,#e9296d 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6741dc',endColorstr='#e9296d',GradientType=1); } @media only screen and (max-width: 1060px) { .postbtn { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; height: 14px; font-size: 16px; padding-bottom: 20px; padding-top: 18px; width: 87%; } } @media only screen and (max-width: 480px) { .postbtn { -webkit-border-radius: 2px; -moz-border-radius: 5px; border-radius: 5px; height: 14px; font-size: 12px; padding-bottom: 20px; padding-top: 18px; width: 87%; } } /* BOTON POST */ /* WARANTIA WIDGET */ #warawesome { color:#0CF; content:"\f023"; font-size:10.0em; background: -webkit-gradient(linear, left top, left bottom, from(#1EBCEF), to(#2CCECA)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: initial; /* reset Font Awesome's display:inline-block */ } .wartext1 { font-size: 1.4em; margin-bottom:0px; text-decoration:none; color:#555555; font-family:"Helvetica Neue", Helvetica, sans-serif; font-weight:lighter; } .wartext2 { font-size:1.0em; text-decoration:none; color:#555555; font-family:"Helvetica Neue", Helvetica, sans-serif; font-weight:lighter; } /* WARANTIA WIDGET */ /* TAB GARANTIA */ .listcheck { list-style: none; } .titlewartab { font-size:2.063em; letter-spacing:-2px; font-family: "Helvetica Neue", Helvetica, sans-serif; margin: 2%; } /* TAB GARANTIA */ /* OCULTA CONVERSOR MONEDA EN CHECKOUT */ .currencycheckout { display:none; } /* OCULTA CONVERSOR MONEDA EN CHECKOUT */ /* BANNER ADVERTENCIA */ #banwar { margin-bottom:20px; } /* BANNER ADVERTENCIA */ /*---- LOAD 2 CHECKOUT -----*/ .woocommerce .blockUI.blockOverlay:before, .woocommerce .loader:before { display: none!important; content: ""!important; } .blockOverlay { position: fixed; left: 0; right: 0; top: 0; text-align: center; z-index: 999998; background-image: url("https://geekcel.com/images/load2.gif"); background-position: center 50%; background-repeat: no-repeat; opacity: 0.5; background-size: 200px; } /*---- LOAD 2 CHECKOUT -----*/ /* LISTA IPHONE POST MODELOS */ @media only screen and (max-width: 480px) { .listaiphone { font-size: 15px; } } /* LISTA IPHONE POST MODELOS */ /*---- CUSTOM 404 -----*/ .wpnofound { font-size: 3rem; line-height: 3rem; } .textnofound { font-size: 2rem; } /*---- CUSTOM 404 -----*/ /*---- ESTILO INFLADO -----*/ @keyframes inflate-pulse { 0% { transform: scale(1); /* Tamaño normal */ } 5% { transform: scale(1.1); /* Se infla un 10% */ } 10% { transform: scale(1); /* Vuelve al tamaño normal */ } 100% { transform: scale(1); /* Permanece normal hasta el siguiente ciclo */ } } /*---- ESTILO INFLADO -----*/ /* ===== VALORACIONES CON ESTRELLAS EN TARJETAS DE PRODUCTO ===== */ .product-loop-rating-wrapper { margin: -10px auto 10px auto; height: 1.5em; display: flex; justify-content: center; align-items: center; } .product-card .star-rating { font-size: 1em; } .product-card .star-rating::before { color: #e0e0e0; opacity: 1; } .product-card .star-rating span::before { color: #ffb800; transition: color 0.3s ease; } .product-card:hover .star-rating span::before { color: #e6a600; } .star-rating-placeholder { overflow: hidden; position: relative; height: 1.3em; line-height: 1.3; font-size: 1em; width: 5.4em; font-family: "star"; display: inline-block; vertical-align: middle; } .star-rating-placeholder::before { content: "sssss"; color: #d8d8d8; float: left; top: 0; left: 0; position: absolute; } /* ===== VALORACIONES CON ESTRELLAS EN TARJETAS DE PRODUCTO ===== */ /* SUMMARY VALORACIONES BAJO TITULO */ .single-product .summary .woocommerce-product-rating .star-rating {float: left; margin-right: 0.5em;} .gmx-on-title-ratings { margin-bottom:1rem;background: none;position:relative; top: -25px; left: -12px;} .woocommerce-product-rating {margin-bottom: -1.5em !important} .woocommerce-review-link {color: red;color: #B7C3C5; font-weight: normal;} /* SUMMARY VALORACIONES BAJO TITULO */ /* PRECIO PARA MOBILE*/ @media only screen and (max-width: 760px) { .ul.products li.product .img-wrap .price { font-size: 1em; } } @media only screen and (max-width: 760px) { .price { color: #E7296F; font-size: 1.6em !important;; line-height: 1.6em; margin-left: 0.4em !important;; margin-bottom: 0.3em; margin-top: 0.4em !important; font-weight: 600; width: 65%; } } /* PRECIO PARA MOBILE*/ /*BOTON PRINCIPAL COMPRAR Y CANTIDAD */ .single_add_to_cart_button { width: 80%; text-transform: uppercase; background: #f2a039 !important; height: 2.8125em; font-size: 1em !important; float: right; animation: inflate-pulse 8s infinite; color: #FFF !important; border-radius: 7px !important; } .single_add_to_cart_button:hover { background: #e3932f; } /*BOTON PRINCIPAL COMPRAR Y CANTIDAD */ /* DISEÑO DE WOOCOMMERCE PRODUCTS ADD-ONS */ .wc-pao-addon-heading { font-size: 1em; color: green; border: 1px solid green; border-radius: 8px; padding: 7px; width: auto; max-width: 300px; margin-bottom: 10px; } .form-row-wide { margin-bottom: 1.2em!important; } .wc-pao-addon .wc-pao-addon-wrap select { border-radius: 0.4em; width: 100%;!important; color: #555555;!important; background: none; border: 1.5px solid #d7d6d6; } .wc-pao-validation-notice { color: #FD2C56; } .wc-pao-col1 { display:none; } .wc-pao-col2 { display:none; } .wc-pao-addon-chars-remaining { color:#b9b9b9; text-transform: lowercase; } .wc-pao-addon .wc-pao-addon-name { font-size: 1em ; /* AGREGAMOS 1EM para nombres de encabezados mas pequeños y valores de margen */ margin-top: -1.2em; color: #555; } div.product-addon-totals ul li { display: inline flow-root list-item; /* AQUI CAMBIAMOS FLEX */ } .wc-pao-addon .wc-pao-addon-description { font-size: 0.8em; font-style: normal; margin-bottom: -1em; color:#5e5d5d; } .woocommerce .wc-pao-addon .wc-pao-addon-wrap label { font-size: 0.8em; } /* DESCRIPCION PRODUCT ADDONS MOBILE */ @media only screen and (max-width: 768px) { .wc-pao-addon .wc-pao-addon-description { font-size: 0.7em; } div.product-addon-totals { font-size: 0.7em; } } /* DESCRIPCION PRODUCT ADDONS MOBILE */ div.product-addon-totals { overflow: unset !important; border:none!important; } div.product-addon-totals .wc-pao-subtotal-line{ border:1px solid #dd305a; text-transform: uppercase; font-size: 0.7em; border-radius: 4px; padding: 0.3em; width: auto; color: #dd305a; margin-top: -0.5em; margin-bottom: -1em; float: right; white-space: nowrap; } /* DISEÑO DE WOOCOMMERCE PRODUCTS ADD-ONS */ /* AGREGA ICONO EN BOTON COMPRAR */ button.single_add_to_cart_button:before { display: inline-block; font-family: FontAwesome; content: "\f07a"; font-weight: 300; margin-right: 1em; } /* AGREGA ICONO EN BOTON COMPRAR */ /* MARGEN IZQUIERO Y PADDING SUSTITULOS */ .gmxWooModWrapperSubtitle { margin: -1rem 0rem 0rem -0.6rem; } /* MARGEN IZQUIERO Y PADDING SUSTITULOS */ /* ===== MOVER BREADCRUMBS EN MÓVIL ===== */ /* 1. Por defecto (escritorio), ocultamos el contenedor de breadcrumbs móvil. */ .breadcrumb-movil-contenedor { display: none; } /* 2. En pantallas móviles (igual o menor a 768px) */ @media (max-width: 768px) { /* Ocultamos el breadcrumb original de arriba */ .site-main > .woocommerce-breadcrumb { display: none; } /* Mostramos el nuevo contenedor de breadcrumbs de abajo */ .breadcrumb-movil-contenedor { display: block; margin-bottom: 30px; /* Espacio para separarlo del footer */ } } /* ===== MOVER BREADCRUMBS EN MÓVIL ===== */ /* ===== ESTILOS PERSONALIZADOS BOTÓN MENÚ MÓVIL ===== */ #mobile-menu-button { background-color: #272B35; color: #FFF; border: none; border-radius: 8px; font-size: 24px; font-weight: bold; cursor: pointer; margin: -8px -5px 0px -20px; width: 50px; height: 40px; padding: 10px 8px 0px 0px; display: flex; align-items: center; justify-content: right; } /* ===== ESTILOS PERSONALIZADOS BOTÓN MENÚ MÓVIL ===== */ /* ===== ESTILOS PARA BADGE DE DISPONIBILIDAD (IN STOCK) ===== */ /* Estilo general para el texto de disponibilidad */ .woocommerce div.product p.stock, .woocommerce ul.products li.product .stock { font-size: 0.9em; font-weight: bold; border-radius: 5px; display: inline-block; padding: 6px 12px; line-height: 1; margin-top: 10px; text-transform: uppercase; } /* Estilo específico para productos EN STOCK (Verde) */ .woocommerce div.product p.stock.in-stock, .woocommerce ul.products li.product .stock.in-stock { background-color: #e6f7e9; /* Verde claro de fondo */ color: #28a745; /* Verde oscuro para el texto */ } /* Estilo adicional para productos AGOTADOS (Rojo) */ .woocommerce div.product p.stock.out-of-stock, .woocommerce ul.products li.product .stock.out-of-stock { background-color: #fde8e8; /* Rojo claro de fondo */ color: #c02323; /* Rojo oscuro para el texto */ } /* ===== ESTILOS PARA BADGE DE DISPONIBILIDAD (IN STOCK) ===== */ .woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1 { width: 100%; } /* ===== ESTILOS PARA BADGE DE DISPONIBILIDAD (IN STOCK) ===== */ /* ===== OCULTAR SIDEBAR EN LA PÁGINA DE CHECKOUT ===== */ /* ================================================================== OCULTAR SIDEBAR EN LA PÁGINA DE CHECKOUT ================================================================== */ /* 1. Oculta la barra lateral (el elemento con ID #secondary) cuando el body tiene la clase de la página de checkout. */ .woocommerce-checkout #secondary { display: none; } /* 2. Opcional pero recomendado: Asegura que el contenido principal ocupe el 100% del ancho disponible al no haber sidebar. */ .woocommerce-checkout #primary { width: 100%; } /* ===== OCULTAR SIDEBAR EN LA PÁGINA DE CHECKOUT ===== */ /* CUPON HIDE CHECKOUT */ .woocommerce-form-coupon-toggle .woocommerce-info { padding: 0; margin: 0 0 1.5em; border: none; background: none; font-size: 0; } .woocommerce-form-coupon-toggle .woocommerce-info a { text-decoration: none; } .woocommerce-form-coupon-toggle .woocommerce-info a::before { content: '\f06b'; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 20px; color: #2AB6D6; cursor: pointer; display: inline-block; line-height: 1; transition: all 0.2s ease-in-out; } .woocommerce-form-coupon-toggle .woocommerce-info a:hover::before { color: #24a1bd; transform: scale(1.1); } .woocommerce-form-coupon-toggle .woocommerce-info::before { display: none; } .woocommerce-form-coupon { display: none; border: 1px solid #ddd; padding: 20px; margin-top: 1em; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); } /* CUPON HIDE CHECKOUT */ /* ===== BOTON PRINCIPAL REALIZAR PEDIDO EN CHECKOUT ===== */ .woocommerce-checkout #payment .place-order #place_order { background-color: #f2a039; color: #fff; font-weight: bold; border: 1px solid #f2a039; border-radius: 6px; padding: 15px 20px; width: 100% !important; display: block !important; margin: 20px auto 0 auto; text-align: center; font-size: 18px; transition: background 0.3s ease, transform 0.1s ease; position: relative; } .woocommerce-checkout #payment .place-order #place_order:hover { background-color: #e3932f; transform: scale(1.01); } .woocommerce-checkout #payment .place-order #place_order:before { content: "\f07a"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 10px; font-size: 18px; vertical-align: middle; } /* ===== BOTON PRINCIPAL REALIZAR PEDIDO EN CHECKOUT ===== */ /* ===== CODIGO PARA METODOS DE PAGO CHECKOUT ===== */ /* 1. Contenedor de CADA método de pago (el
  • ). Sigue siendo el organizador. */ .woocommerce-checkout #payment .payment_methods li { display: flex; align-items: center; flex-wrap: wrap; border-bottom: 1px dotted #ccc; padding-bottom: 10px; margin-bottom: 10px; } /* 2. El botón circular (radio button). */ .woocommerce-checkout #payment .payment_methods input.input-radio { margin-right: 15px; flex-shrink: 0; } /* 3. El label se mantiene como contenedor flexible. */ .woocommerce-checkout #payment .payment_methods label { display: flex; align-items: center; flex-grow: 1; font-weight: bold; text-transform: uppercase; } /* 4. REGLA PARA EL TEXTO DENTRO DEL LABEL (cuando está en un ) */ /* Esto es para los gateways personalizados. Le decimos que vaya primero. */ .woocommerce-checkout #payment .payment_methods li label span { order: 1; /* El texto va primero */ } /* 5. REGLA PARA LA IMAGEN DENTRO DEL LABEL */ /* Le decimos que vaya después del texto y se mueva a la derecha. */ .woocommerce-checkout #payment .payment_methods li label img { order: 2; /* La imagen va segunda */ margin-left: auto; /* Se empuja a la derecha */ } /* 6. REGLA UNIVERSAL PARA CUALQUIER IMAGEN (DENTRO O FUERA DEL LABEL) */ /* Esta regla asegura que TODAS las imágenes se alineen a la derecha. */ .woocommerce-checkout #payment .payment_methods li > img, .woocommerce-checkout #payment .payment_methods li label > img { margin-left: auto; padding-left: 15px; flex-shrink: 0; max-height: 28px; max-width: 120px; object-fit: contain; } /* --- SE MANTIENEN TUS OTROS ESTILOS --- */ .woocommerce-checkout #payment { background-color: #ffffff; padding: 20px; border-radius: 12px; border: 1px solid #ddd; } .woocommerce-checkout #payment .payment_box { background-color: #F9FAFF !important; border-radius: 12px !important; padding: 15px; margin-top: 10px; border: none; flex-basis: 100%; } .woocommerce-checkout #payment div.payment_box:before { border: 1em solid transparent; border-bottom-color: #F9FAFF; color: #F9FAFF !important; } .woocommerce-checkout #payment .payment_methods li:last-child { border-bottom: none; } .woocommerce-checkout #payment .place-order { width: 100%; } .woocommerce-checkout #payment .place-order #place_order { float: left; margin-top: 15px; display: inline-block; width: auto; } .woocommerce-checkout #payment .place-order:after { content: ""; display: block; clear: both; } .woocommerce-checkout #payment .wc-stripe-card-icons-container { margin-left: auto; padding-left: 15px; /* Añade un espacio para que no se pegue al texto */ } @media only screen and (min-width: 210px) and (max-width: 768px) { .payment_method_alg_custom_gateway_1 img, .payment_method_alg_custom_gateway_2 img, .payment_method_alg_custom_gateway_3 img, .payment_method_alg_custom_gateway_4 img, .payment_method_alg_custom_gateway_5 img, .payment_method_alg_custom_gateway_6 img, .payment_method_alg_custom_gateway_7 img, .payment_method_alg_custom_gateway_8 img, .payment_method_alg_custom_gateway_9 img, .payment_method_alg_custom_gateway_10 img, .payment_method_alg_custom_gateway_11 img, .payment_method_alg_custom_gateway_12 img, .payment_method_alg_custom_gateway_13 img, .payment_method_alg_custom_gateway_14 img, .payment_method_alg_custom_gateway_15 img, .payment_method_alg_custom_gateway_16 img, .payment_method_alg_custom_gateway_17 img, .payment_method_alg_custom_gateway_18 img, .payment_method_alg_custom_gateway_19 img, .payment_method_alg_custom_gateway_20 img, .payment_method_alg_custom_gateway_21 img, .payment_method_ppcp-card-button-gateway img, .wc-stripe-card-icons-container img, .payment_method_kpaymentoffline-binance img, .payment_method_openpay_cards img, .payment_method_stripe_upm img, .payment_method_stripe_cc img, .wc-stripe-card-icons-container img { width: 90px; } } /* ===== CODIGO PARA METODOS DE PAGO CHECKOUT ===== */ /* ===== ESTILO CSS PARA PLUGIN GMXC - VALORATIONS ===== */ /* Contenedor principal de la valoración bajo el título */ .gmx-on-title-ratings > div[style*="position:relative"] { display: flex; align-items: center; gap: 8px; margin-top: -15px; margin-bottom: 15px; } /* Cambia el color de las estrellas a un tono dorado */ .gmx-on-title-ratings .star-rating span::before { color: #FFD700; } /* Asegura que el texto del enlace de valoraciones no sea muy grande ni negrita */ .gmx-on-title-ratings .woocommerce-review-link { font-size: 1rem; font-weight: normal; color: #777; } /* --- B. Estilos para el botón/popup de valoraciones (extraído de gmx-valorations.php) --- */ /* Botón invisible que activa el popup de resumen de valoraciones */ #linkPreviewReviews { position: absolute; top: 0; /* Ajustado para mejor posicionamiento */ left: 0; width: 100%; /* Cubre toda la línea para facilitar el clic */ height: 100%; z-index: 9; border: 0; background-color: transparent; cursor: pointer; } /* --- C. Estilos para el formulario de valoraciones (extraído de single-product-reviews.php) --- */ /* Elimina el padding extra del contenedor del formulario de comentarios */ .gmxc-respond #respond { padding: 0; } .div2gmx-review { position: relative; margin-left: 15px; margin-top: 15px; } /* ===== ESTILO CSS PARA PLUGIN GMXC - VALORATIONS ===== */ /* ===== POPUP DE INFO-MONEDA (PLUGIN) ===== */ /* Contenedor del ícono */ .ver-moneda-ico, .ver-moneda-icoDos { position: relative; cursor: pointer; font-size: 16px; color: #b9b9b9; vertical-align: middle; margin-left: 8px; } /* Tooltip (Popup) */ .popuptext, .popuptextDos { font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; text-transform: none; line-height: 1.4; color: #fff; background-color: #555; text-align: center; text-shadow: none; position: absolute; display: none; /* Inicia oculto */ top: 50%; left: calc(100% + 12px); transform: translateY(-50%); width: auto; max-width: 220px; white-space: normal; padding: 10px 14px; border-radius: 6px; z-index: 100; } /* Flecha del popup */ .popuptext::after, .popuptextDos::after { content: ""; position: absolute; top: 50%; right: 100%; transform: translateY(-50%); border-width: 8px; border-style: solid; border-color: transparent #555 transparent transparent; } /* --- 2. REGLAS DE VISIBILIDAD (LA CORRECCIÓN PRINCIPAL) --- */ /* Clase para mostrar el popup (CORREGIDO) */ .show { display: block; /* USA DISPLAY, NO VISIBILITY */ -webkit-animation: fadeIn 0.4s; animation: fadeIn 0.4s; } /* Oculta AMBOS íconos en toda la web por defecto */ i.ver-moneda-ico, i.ver-moneda-icoDos { display: none; } /* Muestra el ícono del precio principal SOLAMENTE en la página de producto */ body.single-product div.product .summary .price i.ver-moneda-ico { display: inline-block; } /* Muestra el ícono del subtotal de addons SOLAMENTE cuando aparece esa línea */ .wc-pao-subtotal-line .price i.ver-moneda-icoDos { display: inline-block; } /* --- 3. ANIMACIÓN (SIN CAMBIOS) --- */ @-webkit-keyframes fadeIn { from { opacity: 0; transform: translateY(-50%) translateX(-10px); } to { opacity: 1; transform: translateY(-50%) translateX(0); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(-50%) translateX(-10px); } to { opacity: 1; transform: translateY(-50%) translateX(0); } } /* ===== POPUP DE INFO-MONEDA (PLUGIN)===== */ /* LINK ICONO BARRA TOP CARRITO SOLO EN MOBILE */ .cart-header-fdv { position: fixed; border-radius: 0 0 0 0.5em; /* Esquina inferior izquierda redondeada */ top: 47px; /* Distancia desde la parte superior */ right: 0; background: #FA1744; /* Color rojo como en tu captura */ z-index: 999; padding: 8px 15px; color: #FFF !important; font-size: 18px; /* Un poco más grande para mejor visibilidad */ display: none; /* Oculto por defecto en escritorio */ transition: all 0.3s ease-in; text-decoration: none; line-height: 1; } .cart-header-fdv:hover { color: #FFF; opacity: 0.9; } .cart-header-fdv .fas { vertical-align: middle; } .cart-header-fdv span { display: inline-block; vertical-align: middle; margin-left: 8px; font-weight: bold; background-color: rgba(0,0,0,0.1); border-radius: 10px; padding: 2px 6px; font-size: 14px; } /* Media query para mostrar el botón en móviles */ @media(max-width: 768px){ .cart-header-fdv { display: block; /* Muestra el botón */ } body.mobile-cart-active .mobile-search-container { padding-right: 90px; transition: padding-right 0.3s ease; } } /* LINK ICONO BARRA TOP CARRITO SOLO EN MOBILE */ /* VIDEOS YOUTUBE */ .youtube { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .entry-content iframe { max-width: 100%; max-height: 400px; } /* VIDEOS YOUTUBE */ /* ================================================================== ESTILOS PARA LA SECCIÓN DE RESEÑAS Y COMENTARIOS ================================================================== */ /* Estilo del avatar: Redondo y más grande */ #reviews #comments ol.commentlist li .avatar { width: 40px; height: 40px; border-radius: 50%; top: 13px; left: -4px; } /* Contenedor principal de la reseña */ #reviews #comments ol.commentlist li .comment-text { position: relative; background-color: #fff; /* Aseguramos el fondo blanco */ border: 1px solid #e9e9e9; padding: 20px; border-radius: 8px; margin-left: 85px; } /* La "flecha" - PARTE 1: El borde gris (triángulo de atrás) */ #reviews #comments ol.commentlist li .comment-text::before { content: ''; position: absolute; top: 24px; left: -11px; /* Posición del borde (1px más afuera que el relleno) */ width: 0; height: 0; border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-right: 11px solid #e9e9e9; /* Color del BORDE */ } /* La "flecha" - PARTE 2: El relleno blanco (triángulo de adelante) */ #reviews #comments ol.commentlist li .comment-text::after { content: ''; position: absolute; top: 25px; left: -10px; /* Posición del relleno */ width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #fff; /* Color del RELLENO */ } /* Estrellas de calificación en la lista de comentarios */ #reviews .commentlist .star-rating span::before { color: #ffb800; /* Color amarillo/dorado para las estrellas llenas */ } #reviews .commentlist .star-rating::before { color: #e0e0e0; /* Color gris para las estrellas vacías */ } #reviews #respond .form-submit .submit { background-color: #1FBCEE; /* Color azul solicitado */ color: #ffffff; /* Texto blanco */ padding: 12px 30px; /* Lo hacemos más grande */ font-size: 16px; font-weight: bold; text-transform: uppercase; width: auto; /* Ancho basado en el contenido */ float: left; /* Lo alineamos a la derecha del formulario */ transition: background-color 0.3s ease; } #reviews #respond .form-submit .submit:hover { background-color: #1baad8; /* Azul más oscuro al pasar el cursor */ color: #ffffff; } /* ==================== WIDGET CATEGORIAS & MAS DE NOSOTROS FOOTER ============================= */ /* --- Tabla del Footer --- */ .footer-table { width: 100%; border-collapse: collapse; margin: 1em 0; background: #282b34; /* tono gris oscuro como los bloques vecinos */ border-radius: 8px; overflow: hidden; } .footer-table td { padding: 1em; vertical-align: top; font-size: 1em; color: #d7e1ec; /* gris claro */ } /* --- Encabezados --- */ .footer-table tr:first-child td { font-size: 1.2em; font-weight: bold; text-transform: uppercase; color: white; padding: 1em; } /* --- Listas --- */ .footer-table ul { list-style: none; padding: 0; margin: 0; } .footer-table li { margin: 0.5em 0; } /* --- Links --- */ .footer-table a { text-decoration: none; color: #A9B3C1; font-weight: 500; transition: color 0.2s ease; } .footer-table a:hover { color: #00d4ff; font-weight: bold; } .footer-table ul li { position: relative; padding-left: 1.5em; /* espacio para el ícono */ margin: 0.6em 0; } /* Icono caret-right */ .footer-table ul li::before { content: "\f0da"; /* Unicode de fa-caret-right en Font Awesome 5 */ font-family: "Font Awesome 5 Free"; font-weight: 900; /* sólido */ position: absolute; left: 0; top: 0.1em; color: #00d4ff; /* azul celeste */ font-size: 0.9em; } /* ==================== WIDGET CATEGORIAS & MAS DE NOSOTROS FOOTER ============================= */ /* Para las tablas de IMEI */ .imeitable td, .imeitable th { border:1px solid #EAEAEA; padding:10px; } /* Para las tablas de IMEI */ /* ============================= ESTILOS PARA LA BARRA LATERAL (SIDEBAR) Y WIDGETS ============================= */ .widget-area .widget { /* Estilos copiados de .product-card para consistencia */ border: 1px solid #eee; border-radius: 8px; background-color: #fff; box-shadow: 0 4px 8px rgba(0,0,0,0.05); padding: 25px; margin-bottom: 25px; } .widget-area .widget:last-child { margin-bottom: 0; } /* Estilos para los títulos de los widgets */ .widget-area .widget .widget-title { margin-top: 0; padding-bottom: 15px; border-bottom: 1px solid #f0f0f0; margin-bottom: 15px; font-size: 1.2em; } /* ============================= ESTILOS PARA LA BARRA LATERAL (SIDEBAR) Y WIDGETS ============================= */ /* ============================= OCULTA HEADER EN CHECKOUT ============================= */ .site-header-checkout { padding: 2em 0; } .checkout-logo-container { max-width: 1400px; margin: 0 auto; padding: 0 130px; } .checkout-logo-container img { border: 1px solid #272B35; border-radius: 10px; } .checkout-logo-container a:hover { transform: scale(1.03); } .checkout-logo { max-width: 180px !important; height: 59 !important; display: block; position: relative; left: -100px; background: #272b35; } /* ============================= OCULTA HEADER EN CHECKOUT ============================= */ /* ============================= OCULTA CURRENCY CONVERTER WIDGET SIDEBAR EN MOVILES ============================= */ @media (max-width: 767px) { #woocommerce_currency_converter-8 {display: none;} } /* ============================= OCULTA CURRENCY CONVERTER WIDGET SIDEBAR EN MOVILES ============================= */ /* ============================= ESTILOS PARA TABS MOVILES & DESKTOP ============================= */ .geekcel-tab-content-delivery { display: flex; /* Usamos flexbox para alinear ícono y texto */ align-items: center; /* Centramos verticalmente */ background: #F6F7F9; padding: 1.5em; border-radius: 1em; } .delivery-icon { font-size: 5em; color: #dadada; margin-right: 20px; /* Espacio entre el ícono y el texto */ line-height: 1; } .delivery-text .delivery-time-text { display: block; /* Para que ocupe su propia línea */ color: #FA1744; font-weight: 300; font-size: 1.5em; font-family: "Helvetica Neue", Helvetica, sans-serif; margin-bottom: 0.5em; } .delivery-text p { margin: 0; font-size: 1em; color: #555; } /* ---- ESTILOS PARA LOS BOTONES DE LAS PESTAÑAS (TU CÓDIGO ORIGINAL) ---- */ /* Contenedor principal de las pestañas */ .woocommerce-tabs { margin-bottom: 40px; max-width: 100%; } /* La lista de pestañas