/* ============================================================ */ /* PETFOODCARTAGENA - CSS PERSONALIZADO */ /* Última actualización: 05-ago-2026 (v6.3) */ /* Estructura ordenada por secciones numeradas */ /* */ /* CAMBIOS v6: */ /* · Sección 1 depurada: se quitó lo que la 13 ya pisaba */ /* · Sección 3: reacción al mouse (levanta + sombra + zoom) */ /* · Sección 4: botón y etiqueta oferta con colores de marca */ /* · Sección 15 nueva: foco de teclado y movimiento reducido */ /* · Sección 16 nueva: latido del botón CTA del muro */ /* CAMBIOS v6.1: */ /* · Sección 6: botón flotante de Astra oculto siempre */ /* (con el rojo de la sec. 4 se volvía una barra roja) */ /* CAMBIOS v6.2: */ /* · Sección 13: carrito en una línea, ya no se parte */ /* CAMBIOS v6.3: */ /* · Sección 17 nueva: fix de contraste en bloques pfc-* */ /* (corrige los avisos de PageSpeed de accesibilidad) */ /* ============================================================ */ /* ============================================================ */ /* 1. ENCABEZADO - CARRITO */ /* NOTA: los colores del menú viven en la sección 13. */ /* Antes había reglas de menú acá, pero la 13 las pisaba por */ /* ir después. Se eliminaron para no confundir. */ /* ============================================================ */ /* Carrito legible sobre la franja roja */ .ast-theme-transparent-header .ast-site-header-cart .ast-cart-menu-wrap, .ast-theme-transparent-header .ast-cart-menu-wrap .count { color: #FFFFFF !important; } /* ============================================================ */ /* 2. TIPOGRAFÍA - QUITAR CAPITALIZE FORZADO */ /* ============================================================ */ /* Todos los headings de Elementor (cubre también icon-box) */ .elementor h1, .elementor h2, .elementor h3, .elementor h4, .elementor h5, .elementor h6, .elementor .elementor-heading-title, .elementor-widget-heading h1, .elementor-widget-heading h2, .elementor-widget-heading h3, .elementor-widget-heading h4, .elementor-widget-heading h5, .elementor-widget-heading h6, .elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-title a { text-transform: none !important; } /* Títulos de productos individuales WooCommerce */ .woocommerce h1.product_title, .product_title, .entry-title, .single-product .entry-title, .single-product h1, .single-product .product_title, body.single-product h1, body.single-product .entry-title, body.single-product .product_title { text-transform: none !important; } /* Precios y descripciones */ .woocommerce-Price-amount, .woocommerce-product-details__short-description, .short-description, .summary p { text-transform: none !important; } /* Headings dentro de descripción y tabs de producto */ .woocommerce-product-details__short-description h1, .woocommerce-product-details__short-description h2, .woocommerce-product-details__short-description h3, .woocommerce-product-details__short-description h4, .woocommerce-product-details__short-description h5, .woocommerce-product-details__short-description h6, .woocommerce-Tabs-panel h1, .woocommerce-Tabs-panel h2, .woocommerce-Tabs-panel h3, .woocommerce-Tabs-panel h4, .woocommerce-Tabs-panel h5, .woocommerce-Tabs-panel h6 { text-transform: none !important; } /* ============================================================ */ /* 3. TIENDA WOOCOMMERCE - CONTENEDOR DE PRODUCTO */ /* (catálogo /tienda/ y categorías) */ /* ============================================================ */ /* Tarjeta del producto: flex column + altura automática */ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; padding: 15px !important; background-color: #ffffff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); margin-bottom: 20px !important; /* v6: base para el hover */ position: relative !important; /* ancla la etiqueta OFERTA a la tarjeta */ overflow: hidden !important; /* el zoom de la foto no se sale del radio */ border: 1px solid #ECE3DA; transition: transform .22s cubic-bezier(.23,1,.32,1), box-shadow .22s cubic-bezier(.23,1,.32,1), border-color .22s ease; } /* Imagen del producto: altura fija + contain */ .woocommerce ul.products li.product .woocommerce-loop-product__link img, .woocommerce-page ul.products li.product img { width: 100% !important; height: 200px !important; object-fit: contain !important; background-color: #ffffff !important; margin-bottom: 12px !important; /* v6: zoom suave */ transition: transform .5s cubic-bezier(.23,1,.32,1) !important; } /* Link del producto: ocupa el espacio disponible */ .woocommerce ul.products li.product .woocommerce-loop-product__link { flex-grow: 1 !important; display: flex !important; flex-direction: column !important; text-decoration: none !important; } /* v6: reacción al mouse (solo escritorio con puntero real) */ @media (hover: hover) and (pointer: fine) { .woocommerce ul.products li.product:hover, .woocommerce-page ul.products li.product:hover { transform: translateY(-5px); border-color: #CC0000; box-shadow: 0 2px 4px rgba(43,74,126,.08), 0 18px 38px rgba(43,74,126,.16); } .woocommerce ul.products li.product:hover .woocommerce-loop-product__link img, .woocommerce-page ul.products li.product:hover img { transform: scale(1.05) !important; } } /* ============================================================ */ /* 4. TIENDA WOOCOMMERCE - TÍTULOS, PRECIOS, BOTONES */ /* (SOLO afecta a productos, NO a subcategorías) */ /* ============================================================ */ /* Título del PRODUCTO: 1 línea con puntos suspensivos */ .woocommerce ul.products li.product .woocommerce-loop-product__title { display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; min-height: unset !important; max-height: unset !important; height: auto !important; text-align: center !important; font-size: 14px !important; line-height: 1.3 !important; margin: 8px 0 !important; padding: 0 5px !important; cursor: pointer !important; } /* ALTERNATIVA a 2 líneas (ver nota en el chat). Si la quieres, borra el bloque de arriba y descomenta este. .woocommerce ul.products li.product .woocommerce-loop-product__title { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; white-space: normal !important; overflow: hidden !important; min-height: 2.6em !important; text-align: center !important; font-size: 14px !important; line-height: 1.3 !important; margin: 8px 0 !important; padding: 0 5px !important; cursor: pointer !important; } */ /* Precios: alineación centrada + altura fija */ .woocommerce ul.products li.product .price { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 40px !important; max-height: 40px !important; text-align: center !important; margin: 5px 0 !important; flex-wrap: wrap !important; } /* Botón "Añadir al carrito": siempre al fondo */ .woocommerce ul.products li.product .button, .woocommerce ul.products li.product a.add_to_cart_button { margin-top: auto !important; width: 100% !important; text-align: center !important; display: block !important; /* v6: colores de marca */ background-color: #CC0000 !important; color: #FFFFFF !important; border-radius: 12px !important; font-weight: 700 !important; transition: background-color .18s ease, transform .14s ease !important; } .woocommerce ul.products li.product .button:hover, .woocommerce ul.products li.product a.add_to_cart_button:hover { background-color: #A30000 !important; color: #FFFFFF !important; } .woocommerce ul.products li.product .button:active, .woocommerce ul.products li.product a.add_to_cart_button:active { transform: scale(.97) !important; } /* Etiqueta OFERTA: esquina superior derecha */ .woocommerce ul.products li.product .onsale { position: absolute !important; top: 10px !important; right: 10px !important; z-index: 10 !important; /* v6: pastilla con el rojo de marca */ background-color: #CC0000 !important; color: #FFFFFF !important; border-radius: 999px !important; font-weight: 800 !important; padding: 6px 12px !important; min-height: 0 !important; min-width: 0 !important; line-height: 1.3 !important; } /* Ocultar marca y categoría sobre la tarjeta (look limpio) */ .woocommerce ul.products li.product .product-brand, .woocommerce ul.products li.product .wc-brand, .woocommerce ul.products li.product .brand, .woocommerce ul.products li.product .woocommerce-product-brand, .woocommerce ul.products li.product .product-category, .woocommerce ul.products li.product .posted_in, .woocommerce ul.products li.product .product_meta, .woocommerce ul.products li.product .cat-links, .woocommerce ul.products li.product .product-categories { display: none !important; } /* ============================================================ */ /* 5. PÁGINA /OFERTAS/ (bloques Gutenberg) */ /* ============================================================ */ /* Truncar títulos a 1 línea en bloques wp-block-post-title */ .wp-block-post-title, .wp-block-post-title a, .wp-block-query .wp-block-post-title, .wp-block-query .wp-block-post-title a { display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; width: 100% !important; max-width: 100% !important; line-height: 1.3 !important; cursor: pointer !important; } /* Contenedor del título respeta el ancho */ .wp-block-query .wp-block-post-template li, .wp-block-query .wp-block-post-template article { overflow: hidden !important; } /* ============================================================ */ /* 6. ASTRA - OCULTAR BOTONES FLOTANTES DEL THUMBNAIL */ /* ============================================================ */ /* Ocultar siempre, no solo al pasar el mouse por la miniatura. Si no, el estilo rojo de la sección 4 lo convierte en una barra roja sobre la foto al hacer hover. */ .woocommerce ul.products li.product .ast-on-card-button:not(.ast-onsale-card), .astra-shop-thumbnail-wrap .ast-on-card-button:not(.ast-onsale-card), .woocommerce ul.products li.product .ast-on-card-button .button { display: none !important; } span.ast-on-card-button.ast-onsale-card { display: none !important; } /* ============================================================ */ /* 7. ASTRA + PWB - OCULTAR MARCA Y CATEGORÍA EN TIENDA */ /* ============================================================ */ /* Ocultar marca PWB (pwb-brands-in-loop) en la grilla de productos */ .woocommerce ul.products li.product .pwb-brands-in-loop, .pwb-brands-in-loop { display: none !important; } /* Ocultar categoría dentro de astra-shop-summary-wrap */ .astra-shop-summary-wrap .ast-woo-product-category, .astra-shop-summary-wrap .product-category, .astra-shop-summary-wrap .posted_in { display: none !important; } /* ============================================================ */ /* 8. SUBCATEGORÍAS - NOMBRE COMPLETO EN /perros/ Y /gatos/ */ /* ============================================================ */ /* Permitir nombre completo en títulos de subcategoría */ .woocommerce ul.products li.product-category h2.woocommerce-loop-category__title, .woocommerce ul.products li.product-category .woocommerce-loop-category__title, h2.woocommerce-loop-category__title, .woocommerce-loop-category__title, .woocommerce-loop-category__title a { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.3 !important; cursor: pointer !important; max-height: none !important; min-height: unset !important; height: auto !important; text-align: center !important; } /* ============================================================ */ /* 9. FOOTER PROFESIONAL 4 COLUMNAS */ /* ============================================================ */ .pfc-footer { max-width: 1200px; margin: 0 auto; padding: 40px 20px 20px; color: #FFFFFF; } .pfc-footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-bottom: 30px; } /* v6.3: se agregó h3 al selector para cuando bajes la jerarquía de los títulos de columna (ver nota de accesibilidad). Mientras sigan siendo h4, el estilo funciona igual. */ .pfc-footer-col h3, .pfc-footer-col h4 { color: #FFFFFF !important; font-size: 16px; font-weight: 700; margin-bottom: 15px; text-transform: none !important; border-bottom: 2px solid rgba(255,255,255,0.2); padding-bottom: 8px; } .pfc-footer-col p { color: #FFFFFF; font-size: 14px; line-height: 1.6; margin: 5px 0; } .pfc-footer-col a { color: #FFFFFF !important; text-decoration: none; transition: color 0.3s; } .pfc-footer-col a:hover { color: #A8D46A !important; text-decoration: underline; } .pfc-tagline { font-style: italic; opacity: 0.9; margin-bottom: 10px !important; } .pfc-mini { font-size: 13px !important; opacity: 0.9; } .pfc-store-name { font-size: 14px; margin-top: 10px !important; } .pfc-social { display: flex; flex-direction: column; gap: 8px; margin-top: 15px; } .pfc-social a { display: inline-block; padding: 5px 0; } .pfc-footer-menu { list-style: none; padding: 0; margin: 0; } .pfc-footer-menu li { margin: 6px 0; font-size: 14px; } .pfc-footer-menu li a { color: #FFFFFF !important; } .pfc-payments { text-align: center; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.2); color: #FFFFFF; font-size: 14px; } .pfc-payments p { margin: 0; color: #FFFFFF; } /* ============================================================ */ /* 10. RESPONSIVE - MEDIA QUERIES (footer) */ /* ============================================================ */ /* Tablet: footer en 2 columnas */ @media (max-width: 1024px) { .pfc-footer-grid { grid-template-columns: repeat(2, 1fr); } } /* Mobile: footer en 1 columna */ @media (max-width: 600px) { .pfc-footer-grid { grid-template-columns: 1fr; gap: 20px; } .pfc-footer { padding: 30px 15px 15px; } } /* ============================================================ */ /* 11. FIX - ESPACIO PARA NOMBRES LARGOS EN SUBCATEGORÍAS */ /* ============================================================ */ /* Reducir altura de imagen de subcategoría para dar espacio al título */ .woocommerce ul.products li.product-category img, .woocommerce ul.products li.product-category a img { height: 150px !important; max-height: 150px !important; margin-bottom: 20px !important; } /* Asegurar espacio entre imagen y título */ .woocommerce ul.products li.product-category .woocommerce-loop-category__title { margin-top: 10px !important; margin-bottom: 8px !important; padding: 0 8px !important; font-size: 14px !important; position: relative !important; z-index: 5 !important; background: transparent !important; } /* Contenedor de subcategoría con espacio extra abajo */ .woocommerce ul.products li.product-category { padding-bottom: 25px !important; } /* ============================================================ */ /* 12. FIX - ESPACIO SUPERIOR EN PÁGINAS DE CONTENIDO */ /* (Preguntas Frecuentes, Blog y entradas con header trans.) */ /* ============================================================ */ /* Empuja el contenido hacia abajo para que no se meta bajo el menú */ .ast-theme-transparent-header.page .site-content .ast-container, .ast-theme-transparent-header.single .site-content .ast-container, .ast-theme-transparent-header.archive .site-content .ast-container, .ast-theme-transparent-header.blog .site-content .ast-container { padding-top: 120px !important; } /* En celulares, un poco menos de espacio */ @media (max-width: 768px) { .ast-theme-transparent-header.page .site-content .ast-container, .ast-theme-transparent-header.single .site-content .ast-container, .ast-theme-transparent-header.archive .site-content .ast-container, .ast-theme-transparent-header.blog .site-content .ast-container { padding-top: 90px !important; } } /* ============================================================ */ /* 13. FONDO ROJO EN LA BARRA DEL MENÚ (escritorio) */ /* ============================================================ */ /* Franja roja sólida en el encabezado (incluso transparente) */ .ast-theme-transparent-header .ast-primary-header-bar, .ast-theme-transparent-header .main-header-bar, .site-header .ast-primary-header-bar, .site-header .main-header-bar { background-color: #CC0000 !important; } /* Letras del menú en blanco sobre el rojo */ .main-header-menu .menu-link, .main-header-menu > .menu-item > a, .ast-theme-transparent-header .main-header-menu .menu-link, .ast-theme-transparent-header .main-header-menu > .menu-item > a { color: #FFFFFF !important; text-shadow: none !important; } /* Hover y página activa en verde lima */ .main-header-menu .menu-link:hover, .main-header-menu > .menu-item > a:hover, .main-header-menu .current-menu-item > a, .ast-theme-transparent-header .main-header-menu .menu-link:hover, .ast-theme-transparent-header .main-header-menu .current-menu-item > a { color: #A8D46A !important; } /* Carrito en una sola línea: sin esto "Carrito/$0" se parte en tres */ .ast-site-header-cart .ast-cart-menu-wrap, .ast-site-header-cart .ast-woo-header-cart-info-wrap, .ast-header-break-point .ast-site-header-cart .ast-cart-menu-wrap { white-space: nowrap !important; display: inline-flex !important; align-items: center !important; gap: 6px; } /* ============================================================ */ /* 14. FIX MENÚ MÓVIL - TEXTO OSCURO LEGIBLE */ /* ============================================================ */ /* Forzar texto oscuro en TODAS las opciones del menú móvil */ .ast-header-break-point .main-header-menu .menu-link, .ast-header-break-point .main-header-menu .menu-item a, #ast-mobile-popup .menu-link, #ast-mobile-popup .menu-item a, .ast-mobile-popup-drawer .menu-link, .ast-mobile-popup-drawer .menu-item a { color: #2B4A7E !important; text-shadow: none !important; } /* Solo la opción activa va en rojo */ .ast-header-break-point .main-header-menu .current-menu-item > a, #ast-mobile-popup .current-menu-item > a, .ast-mobile-popup-drawer .current-menu-item > a { color: #CC0000 !important; } /* ============================================================ */ /* 15. ACCESIBILIDAD Y MOVIMIENTO */ /* ============================================================ */ /* Foco visible para quien navega con teclado */ .woocommerce ul.products li.product a:focus-visible, .pfc-footer-col a:focus-visible, .main-header-menu a:focus-visible { outline: 3px solid rgba(43,74,126,.45) !important; outline-offset: 2px !important; } /* Respetar a quien pidió menos movimiento en su sistema */ @media (prefers-reduced-motion: reduce) { .woocommerce ul.products li.product, .woocommerce ul.products li.product img, .woocommerce ul.products li.product .button { transition: none !important; } .woocommerce ul.products li.product:hover { transform: none !important; } .woocommerce ul.products li.product:hover img { transform: none !important; } .pfc-cta-muro .elementor-button { animation: none !important; } } /* ============================================================ */ /* 16. BOTÓN CTA DEL MURO DE ADOPCIONES (latido suave) */ /* Requiere la clase "pfc-cta-muro" en Avanzado del botón */ /* ============================================================ */ .pfc-cta-muro .elementor-button { animation: pfcLatido 3.4s ease-in-out infinite; } .pfc-cta-muro .elementor-button:hover { animation-play-state: paused; } @keyframes pfcLatido { 0%, 88%, 100% { transform: scale(1); box-shadow: 0 8px 24px rgba(204,0,0,.35); } 92% { transform: scale(1.04); box-shadow: 0 14px 34px rgba(204,0,0,.45); } 96% { transform: scale(1.01); } } /* ============================================================ */ /* 17. FIX CONTRASTE - BLOQUES HTML PROPIOS (pfc-*) */ /* Corrige los avisos de PageSpeed de contraste insuficiente. */ /* */ /* Lleva !important porque los estilos originales viven en un */ /*