/* Theme Name: Divi Child - Zara Edition Theme URI: https://videojuegosz.duckdns.org/ Description: Sistema de diseño editorial, minimalista y limpio inspirado en Zara para videojuegos retro en WooCommerce y Divi 5. Author: Senior Frontend Developer Template: Divi Version: 1.2.3 */ /* -------------------------------------------------------------------------- * 1. VARIABLES CSS GLOBALES DEL SISTEMA DE DISEÑO * -------------------------------------------------------------------------- */ :root { --zara-black: #000000; --zara-white: #FFFFFF; --zara-gray-bg: #F5F5F5; --zara-gray-text: #757575; --zara-border-dark: #000000; --zara-border-light: #E5E5E5; --zara-font-serif: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --zara-font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --zara-font-sans: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; --zara-ui-size: 11px; --zara-ui-tracking: 0.08em; --zara-ui-weight: 400; /* Anulación radical de variables de contención de Divi 5 para ancho completo (96%) */ --content-width: 100% !important; --content-max-width: 100% !important; --row-gutter-horizontal: 16px !important; } /* -------------------------------------------------------------------------- * 2. RESETEO GEOMÉTRICO Y ANCHO COMPLETO 100% REAL (ESTILO ZARA) * -------------------------------------------------------------------------- */ /* Cero bordes redondeados y cero sombras en toda la web */ *, *::before, *::after { border-radius: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; box-sizing: border-box !important; } html, body { overflow-x: hidden !important; width: 100% !important; max-width: 100% !important; } html, body { overflow-x: hidden !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background-color: var(--zara-white) !important; color: var(--zara-black) !important; font-family: var(--zara-font-sans) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #page-container { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; padding-top: 70px !important; background-color: var(--zara-white) !important; } body.admin-bar #page-container { padding-top: 102px !important; } @media screen and (max-width: 782px) { body.admin-bar #page-container { padding-top: 116px !important; } } #main-content, #footer-bottom { background-color: var(--zara-white) !important; color: var(--zara-black) !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* Enforce 100% Ancho Completo Real en todos los contenedores y filas de Divi 5 y WooCommerce */ body .container, body #main-content .container, body #page-container .container, body #footer-bottom .container, body .et_pb_section, body .et_flex_section, body .et_block_section, body .et_pb_row, body .et_flex_row, body .et_block_row, body .et_pb_row_inner, body .et_pb_row:not([class*=et_flex_column]), body .et_pb_section > .et_pb_row, body .et_flex_section > .et_pb_row, body .et_block_section > .et_pb_row, body.home .et_pb_row, body.woocommerce-page .container, body.woocommerce-page #content-area, body.woocommerce-page #left-area, body.woocommerce-page .et_pb_row, body.archive .container, body.archive #content-area, body.archive #left-area, .woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { width: 100% !important; max-width: 100% !important; padding-left: 32px !important; padding-right: 32px !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* Forzar expansión completa 100% en columnas y módulos de Divi 5 */ body .et_pb_column_4_4, body .et_flex_column_4_4, body .et_block_column_4_4, body .et_pb_row > .et_pb_column_4_4, body .et_flex_row > .et_pb_column_4_4, body .et_block_row > .et_pb_column_4_4 { width: 100% !important; flex: 1 1 100% !important; max-width: 100% !important; box-sizing: border-box !important; } body .et_pb_module, body .et_pb_text, body .et_pb_text_inner, body .hero-container, body .value-props-grid, body .categories-grid, body .woocommerce, body .woocommerce ul.products { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Expansión del hero en cuadrícula editorial armónica (evita vacíos en ultrawide) */ .hero-container { width: 100% !important; max-width: 100% !important; display: grid !important; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) !important; gap: 48px !important; align-items: center !important; padding: 40px 0 !important; box-sizing: border-box !important; } .hero-container > div:first-child { width: 100% !important; max-width: 100% !important; } .hero-container > div:first-child p { max-width: 100% !important; } body .hero-container > div:last-child, .hero-container > div:last-child { width: 100% !important; max-width: 100% !important; display: flex !important; justify-content: center !important; align-items: center !important; margin: 0 !important; background-color: #ffffff !important; background: #ffffff !important; padding: 0 !important; box-sizing: border-box !important; } body .hero-container > div:last-child img, body .hero-container img, .hero-container > div:last-child img, .hero-container img { width: 100% !important; max-width: 100% !important; height: auto !important; max-height: 480px !important; object-fit: contain !important; display: block !important; margin: 0 auto !important; border-radius: 24px !important; overflow: hidden !important; } @media (max-width: 980px) { .hero-container { grid-template-columns: 1fr !important; gap: 32px !important; padding: 20px 0 !important; } } /* Cuadrícula de Categorías Editorial (PlayStation 1 y PlayStation 2) */ .categories-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px !important; width: 100% !important; box-sizing: border-box !important; margin-top: 24px !important; } .categories-grid > p, .categories-grid p:empty { display: none !important; margin: 0 !important; padding: 0 !important; width: 0 !important; height: 0 !important; } .category-card { background: var(--zara-white, #ffffff) !important; border: 1px solid var(--zara-border, #e5e5e5) !important; border-radius: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; text-decoration: none !important; transition: transform 0.25s ease, border-color 0.25s ease !important; box-sizing: border-box !important; overflow: hidden !important; } .category-card:hover { border-color: #000000 !important; transform: translateY(-2px) !important; } .category-card-image-wrap { width: 100% !important; background-color: var(--zara-gray-bg, #f5f5f5) !important; display: flex !important; justify-content: center !important; align-items: center !important; padding: 32px 20px !important; box-sizing: border-box !important; } .category-card-image-wrap img { width: 100% !important; max-width: 320px !important; height: 260px !important; object-fit: contain !important; display: block !important; margin: 0 auto !important; transition: transform 0.4s ease !important; } .category-card:hover .category-card-image-wrap img { transform: scale(1.03) !important; } .category-card-body { padding: 24px 24px 30px 24px !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; } .category-card-tag { font-family: var(--zara-font-sans, 'Inter', sans-serif) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.15em !important; color: #888888 !important; margin-bottom: 6px !important; } .category-card-title { font-family: var(--zara-font-serif, 'Plus Jakarta Sans', sans-serif) !important; font-size: 24px !important; font-weight: 400 !important; text-transform: uppercase !important; letter-spacing: -0.01em !important; color: #000000 !important; margin: 0 0 8px 0 !important; } .category-card-desc { font-family: var(--zara-font-sans, 'Inter', sans-serif) !important; font-size: 13px !important; color: #666666 !important; margin: 0 0 20px 0 !important; line-height: 1.5 !important; max-width: 380px !important; } .category-card-btn { display: inline-block !important; font-family: var(--zara-font-sans, 'Inter', sans-serif) !important; font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; color: #000000 !important; text-decoration: none !important; border-bottom: 1px solid #000000 !important; padding-bottom: 4px !important; transition: padding-bottom 0.2s ease !important; } .category-card:hover .category-card-btn { padding-bottom: 6px !important; } @media (max-width: 768px) { .categories-grid { grid-template-columns: 1fr !important; gap: 24px !important; } } .et_pb_section, .et_flex_section, .et_block_section { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* Reseteo Absoluto de Ancho Completo en Left-Area y Eliminación de Sidebar de Divi */ body.single-product #left-area, body.woocommerce-page #left-area, .et_right_sidebar #left-area, .et_left_sidebar #left-area, #left-area { width: 100% !important; max-width: 100% !important; float: none !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; } body.single-product #content-area, body.woocommerce-page #content-area, #content-area { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; } body.single-product #sidebar, body.woocommerce-page #sidebar, .et_right_sidebar #sidebar, .et_left_sidebar #sidebar, #sidebar, #main-content .container:before { display: none !important; width: 0 !important; padding: 0 !important; margin: 0 !important; } /* -------------------------------------------------------------------------- * 3. CABECERA FIJA Y NAVEGACIÓN MINIMALISTA ZARA (SOLAPAMIENTO RESUELTO) * -------------------------------------------------------------------------- */ #main-header { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 70px !important; background-color: var(--zara-white) !important; border-bottom: 1px solid var(--zara-border-light) !important; box-shadow: none !important; transition: background-color 0.3s ease, border-color 0.3s ease !important; z-index: 99999 !important; } body.admin-bar #main-header { top: 32px !important; } @media screen and (max-width: 782px) { body.admin-bar #main-header { top: 46px !important; } } /* El contenedor de la cabecera ocupa el 96% exacto de la pantalla */ #main-header .container, .et_fullwidth_nav #main-header .container { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; max-width: 100% !important; height: 70px !important; padding: 0 32px !important; margin: 0 !important; position: relative !important; box-sizing: border-box !important; } /* Forzar que el contenedor del logo sea relativo y en el flujo flex (elimina position: absolute de Divi) */ .et_header_style_left .logo_container, .logo_container { position: relative !important; top: auto !important; left: auto !important; width: auto !important; height: 100% !important; display: flex !important; align-items: center !important; flex-shrink: 0 !important; margin: 0 36px 0 0 !important; padding: 0 !important; z-index: 10 !important; float: none !important; } .logo_helper { display: none !important; } .logo_container a { display: flex !important; align-items: center !important; height: 100% !important; text-decoration: none !important; } #logo { max-height: 42px !important; width: auto !important; display: block !important; filter: grayscale(100%) contrast(200%) !important; margin: 0 !important; } /* Contenedor de navegación y acciones de cabecera en flex expansivo */ .et_header_style_left #et-top-navigation, #et-top-navigation { position: relative !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important; display: flex !important; align-items: center !important; justify-content: space-between !important; flex-grow: 1 !important; height: 100% !important; padding: 0 !important; margin: 0 !important; float: none !important; } /* Menú de categorías principales */ #top-menu-nav { display: flex !important; align-items: center !important; height: 100% !important; margin: 0 !important; padding: 0 !important; } #top-menu-nav #top-menu { display: flex !important; align-items: center !important; gap: 4px !important; margin: 0 !important; padding: 0 !important; height: 100% !important; list-style: none !important; } #top-menu-nav #top-menu > li { padding: 0 !important; height: 100% !important; display: flex !important; align-items: center !important; margin: 0 !important; } #top-menu-nav #top-menu > li > a { font-family: var(--zara-font-sans) !important; font-size: var(--zara-ui-size) !important; font-weight: var(--zara-ui-weight) !important; text-transform: uppercase !important; letter-spacing: var(--zara-ui-tracking) !important; color: var(--zara-black) !important; padding: 0 10px !important; line-height: 70px !important; display: inline-block !important; text-decoration: none !important; white-space: nowrap !important; transition: opacity 0.2s ease !important; } #top-menu-nav #top-menu > li > a:hover { opacity: 0.55 !important; } /* Submenús Dropdown Planos */ #top-menu li ul { background: var(--zara-white) !important; border: 1px solid var(--zara-border-dark) !important; padding: 12px 0 !important; box-shadow: none !important; border-radius: 0 !important; top: 70px !important; } #top-menu li ul li { display: block !important; height: auto !important; } #top-menu li ul li a { font-size: 10px !important; padding: 8px 18px !important; letter-spacing: 0.06em !important; line-height: 1.4 !important; color: var(--zara-black) !important; } #top-menu li ul li a:hover { background-color: var(--zara-gray-bg) !important; } /* Buscador Estilo Zara: Línea inferior con texto BUSCAR 100% visible sin recorte */ #et_top_search { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 65px !important; height: 22px !important; border-bottom: 1px solid var(--zara-black) !important; padding: 2px 8px !important; margin-left: 16px !important; margin-right: 20px !important; /* Separación de seguridad del borde derecho y scrollbar */ cursor: pointer !important; line-height: 1 !important; position: relative !important; float: none !important; overflow: visible !important; box-sizing: border-box !important; } #et_top_search::after { content: 'BUSCAR' !important; font-family: var(--zara-font-sans) !important; font-size: var(--zara-ui-size) !important; letter-spacing: var(--zara-ui-tracking) !important; font-weight: var(--zara-ui-weight) !important; color: var(--zara-black) !important; white-space: nowrap !important; display: inline-block !important; } #et_search_icon { display: none !important; /* Oculta la lupa tradicional */ } /* Enlace a la Cesta en Texto Plano (Empujado a la derecha con margin-left: auto) */ .et-cart-info, a.zara-header-cart { background: transparent !important; color: var(--zara-black) !important; font-family: var(--zara-font-sans) !important; font-size: var(--zara-ui-size) !important; letter-spacing: var(--zara-ui-tracking) !important; text-transform: uppercase !important; border: none !important; padding: 0 10px !important; display: inline-flex !important; align-items: center !important; text-decoration: none !important; font-weight: var(--zara-ui-weight) !important; margin-left: auto !important; line-height: 70px !important; } .et-cart-info::before, .et-cart-info span::before, .et-cart-info span:before { display: none !important; content: none !important; } .et-cart-info::after { content: 'CESTA' !important; font-family: var(--zara-font-sans) !important; font-size: var(--zara-ui-size) !important; letter-spacing: var(--zara-ui-tracking) !important; font-weight: var(--zara-ui-weight) !important; color: var(--zara-black) !important; margin-right: 4px !important; } .et-cart-info span:empty::after { content: '[0]' !important; font-family: var(--zara-font-sans) !important; font-size: var(--zara-ui-size) !important; color: var(--zara-black) !important; } /* -------------------------------------------------------------------------- * 4. CATÁLOGO Y GRID DE PRODUCTOS (SHOP & CATEGORÍAS) * -------------------------------------------------------------------------- */ /* Eliminar pseudoelementos clearfix que se convierten en celdas fantasma en CSS Grid */ .woocommerce ul.products::before, .woocommerce ul.products::after, ul.products::before, ul.products::after { display: none !important; content: none !important; } .woocommerce ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 48px 18px !important; width: 100% !important; max-width: 100% !important; margin: 40px 0 !important; padding: 0 !important; list-style: none !important; } .woocommerce ul.products li.product { width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important; position: relative !important; background: transparent !important; border: none !important; display: flex !important; flex-direction: column !important; } /* Título de Categoría Editorial */ .woocommerce-products-header__title.page-title { font-family: var(--zara-font-serif) !important; font-size: 32px !important; font-weight: 400 !important; letter-spacing: -0.03em !important; text-transform: uppercase !important; margin: 30px 0 10px 0 !important; } /* Contenedor Editorial de Carátulas (Aspect Ratio 3:4 con Fondo Gris Estudio) */ .zara-thumb-container { position: relative !important; width: 100% !important; aspect-ratio: 3 / 4 !important; background-color: var(--zara-gray-bg) !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; } .zara-thumb-link { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; text-decoration: none !important; background: transparent !important; } .et_shop_image { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; background: transparent !important; } .et_overlay { display: none !important; } /* Carátula flotante en la vitrina de estudio */ .zara-thumb-container img, .woocommerce ul.products li.product a img { max-width: 82% !important; max-height: 82% !important; width: auto !important; height: auto !important; object-fit: contain !important; display: block !important; margin: auto !important; background: transparent !important; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.08)) !important; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; box-sizing: border-box !important; } li.product:hover .zara-thumb-container img, li.product:hover a img { transform: scale(1.05) !important; } /* Botón '+' Minimalista al hacer Hover */ /* Ocultar botones de anadir al carrito en tarjetas y catalogos */ .zara-plus-btn, .woocommerce ul.products li.product .button, .woocommerce ul.products li.product a.button, .woocommerce ul.products li.product .add_to_cart_button, ul.products li.product .button, ul.products li.product a.button, ul.products li.product .add_to_cart_button, .et_pb_shop .button, .et_pb_shop .add_to_cart_button { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Ocultar elementos residuales */ .star-rating, .woocommerce-star-rating, .woocommerce-result-count, .woocommerce-ordering, .woocommerce-breadcrumb { display: none !important; } /* Etiqueta de Oferta Plana */ .zara-sale-tag, .woocommerce span.onsale { position: absolute !important; top: 10px !important; left: 10px !important; background: transparent !important; color: var(--zara-black) !important; font-family: var(--zara-font-sans) !important; font-size: 10px !important; font-weight: 500 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; padding: 0 !important; min-height: auto !important; min-width: auto !important; line-height: 1 !important; z-index: 5 !important; border: none !important; } /* Metadatos del Producto: Título a la izquierda, Precio a la derecha */ .zara-product-meta { display: flex !important; justify-content: space-between !important; align-items: baseline !important; margin-top: 12px !important; padding: 0 2px !important; width: 100% !important; } .zara-title-link { text-decoration: none !important; max-width: 65% !important; overflow: hidden !important; } .zara-product-meta .woocommerce-loop-product__title, .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--zara-font-sans, 'Inter', sans-serif) !important; font-size: 13px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: var(--zara-black, #000000) !important; margin: 0 !important; padding: 0 !important; line-height: 1.35 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: break-word !important; } .zara-product-meta .price, .woocommerce ul.products li.product .price { font-family: var(--zara-font-sans) !important; font-size: var(--zara-ui-size) !important; font-weight: var(--zara-ui-weight) !important; color: var(--zara-black) !important; margin: 0 !important; white-space: nowrap !important; letter-spacing: 0.04em !important; } .woocommerce ul.products li.product .price del { color: var(--zara-gray-text) !important; font-size: 10px !important; margin-right: 4px !important; } .woocommerce ul.products li.product .price ins { text-decoration: none !important; } /* -------------------------------------------------------------------------- * 5. FICHA DE PRODUCTO ASIMÉTRICA EN 3 COLUMNAS Y CASCADA DE IMÁGENES * -------------------------------------------------------------------------- */ /* Reglas Globales de la Galería de Imágenes en Cascada */ .single-product .woocommerce-product-gallery { position: relative !important; float: none !important; overflow: visible !important; width: 100% !important; } .single-product .woocommerce-product-gallery__wrapper { display: flex !important; flex-direction: column !important; gap: 20px !important; width: 100% !important; transform: none !important; margin: 0 !important; padding: 0 !important; } /* Todas las imágenes al 100% de ancho en fondo de estudio gris #F5F5F5 */ .single-product .woocommerce-product-gallery__image, .single-product .woocommerce-product-gallery__image:nth-child(n+2) { width: 100% !important; max-width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; background-color: var(--zara-gray-bg) !important; margin: 0 !important; padding: 24px !important; box-sizing: border-box !important; float: none !important; opacity: 1 !important; position: relative !important; } .single-product .woocommerce-product-gallery__image a { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; text-decoration: none !important; outline: none !important; background: transparent !important; cursor: zoom-in !important; } .single-product .woocommerce-product-gallery__image img { width: auto !important; max-width: 100% !important; height: auto !important; max-height: 85vh !important; object-fit: contain !important; display: block !important; margin: 0 auto !important; background: transparent !important; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.08)) !important; transition: transform 0.35s ease !important; } .single-product .woocommerce-product-gallery__image:hover img { transform: scale(1.02) !important; } .single-product .flex-control-thumbs, .single-product .flex-direction-nav, .single-product .woocommerce-product-gallery__trigger { display: none !important; } /* Ocultar título h2 redundante en el panel de descripción */ .single-product .woocommerce-Tabs-panel > h2:first-child { display: none !important; } /* Sección de Productos Relacionados (Fuera de div.product a 100% Ancho Completo Real) */ .single-product section.related.products { width: 100% !important; max-width: 100% !important; clear: both !important; float: none !important; margin: 80px 0 60px 0 !important; border-top: 1px solid var(--zara-border-dark) !important; padding-top: 48px !important; padding-bottom: 40px !important; background-color: var(--zara-white) !important; position: relative !important; box-sizing: border-box !important; } .single-product section.related.products > h2 { font-family: var(--zara-font-serif) !important; font-size: 24px !important; font-weight: 400 !important; text-transform: uppercase !important; letter-spacing: -0.01em !important; color: var(--zara-black) !important; margin-bottom: 32px !important; padding-left: 2px !important; text-align: left !important; } .single-product section.related.products ul.products { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; gap: 40px 20px !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } /* Distribución Asimétrica en Escritorio (Desktop) */ @media (min-width: 981px) { .single-product #left-area > div[id^="product-"] { display: grid !important; grid-template-columns: minmax(0, 24fr) minmax(0, 48fr) minmax(0, 28fr) !important; column-gap: 32px !important; align-items: start !important; width: 100% !important; max-width: 100% !important; margin: 30px 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Desplegar div.clearfix para que sus hijos sean celdas del grid */ .single-product #left-area > div[id^="product-"] > div.clearfix { display: contents !important; } /* Columna 1: Información Adicional / Ficha Técnica Editorial (Izquierda) */ .single-product .woocommerce-tabs { grid-column: 1 !important; grid-row: 1 !important; position: static !important; width: 100% !important; border-top: 1px solid var(--zara-border-dark) !important; padding-top: 18px !important; margin: 0 !important; box-sizing: border-box !important; float: none !important; clear: none !important; } /* Columna 2: Cascada Vertical de Imágenes (Centro) */ .single-product .woocommerce-product-gallery { grid-column: 2 !important; grid-row: 1 !important; width: 100% !important; margin: 0 !important; } /* Columna 3: Buy Box Fijo (Derecha) */ .single-product .summary.entry-summary { grid-column: 3 !important; grid-row: 1 !important; position: sticky !important; top: 105px !important; width: 100% !important; padding-left: 16px !important; margin: 0 !important; float: none !important; box-sizing: border-box !important; background-color: var(--zara-white) !important; z-index: 10 !important; } /* Offset seguro para usuarios conectados (con barra de administración de WordPress de 32px) */ .admin-bar.single-product .summary.entry-summary { top: 138px !important; /* 32px wpadminbar + 70px header + 36px de separación de seguridad */ } /* Offset seguro para visitantes normales (sin barra de administración) */ body:not(.admin-bar).single-product .summary.entry-summary { top: 105px !important; /* 70px header + 35px de separación de seguridad */ } } /* Estilos de la Ficha y Caja de Compra */ .single-product .product_title { font-family: var(--zara-font-serif) !important; font-size: 26px !important; font-weight: 400 !important; text-transform: uppercase !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; margin: 0 0 12px 0 !important; padding: 0 !important; } .single-product .price { font-family: var(--zara-font-sans) !important; font-size: 14px !important; letter-spacing: 0.05em !important; margin-bottom: 20px !important; border-bottom: 1px solid var(--zara-border-dark) !important; padding-bottom: 16px !important; } .single-product button.single_add_to_cart_button { width: 100% !important; height: 44px !important; background-color: var(--zara-black) !important; color: var(--zara-white) !important; font-family: var(--zara-font-sans) !important; font-size: var(--zara-ui-size) !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: var(--zara-ui-tracking) !important; border: 1px solid var(--zara-black) !important; cursor: pointer !important; transition: background-color 0.2s ease !important; } .single-product button.single_add_to_cart_button:hover { background-color: #222222 !important; } /* Ficha Técnica y Pestañas Editoriales */ .single-product .woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--zara-border-dark) !important; padding: 0 !important; margin: 0 0 16px 0 !important; display: flex !important; gap: 16px !important; } .single-product .woocommerce-tabs ul.tabs li { background: transparent !important; border: none !important; padding: 0 0 8px 0 !important; margin: 0 !important; } .single-product .woocommerce-tabs ul.tabs li a { font-family: var(--zara-font-sans) !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: var(--zara-black) !important; } .single-product .woocommerce-tabs ul.tabs li.active { border-bottom: 2px solid var(--zara-black) !important; } .single-product .woocommerce-Tabs-panel table { width: 100% !important; border-collapse: collapse !important; font-size: 11px !important; } .single-product .woocommerce-Tabs-panel table th, .single-product .woocommerce-Tabs-panel table td { padding: 8px 10px !important; border-bottom: 1px solid var(--zara-border-light) !important; } /* -------------------------------------------------------------------------- * 6. RESETEO DE FORMULARIOS, CARRITO Y CHECKOUT * -------------------------------------------------------------------------- */ input[type="text"], input[type="email"], input[type="password"], input[type="tel"], textarea, select { border: 1px solid var(--zara-border-dark) !important; background-color: var(--zara-white) !important; font-family: var(--zara-font-sans) !important; font-size: var(--zara-ui-size) !important; padding: 10px 12px !important; border-radius: 0 !important; } table.shop_table { border-collapse: collapse !important; border: 1px solid var(--zara-border-dark) !important; border-radius: 0 !important; } table.shop_table th { font-family: var(--zara-font-sans) !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; background-color: var(--zara-gray-bg) !important; border-bottom: 1px solid var(--zara-border-dark) !important; padding: 12px !important; } table.shop_table td { border-bottom: 1px solid var(--zara-border-light) !important; padding: 12px !important; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button, .woocommerce-checkout #place_order { background-color: var(--zara-black) !important; color: var(--zara-white) !important; font-family: var(--zara-font-sans) !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; height: 44px !important; line-height: 44px !important; padding: 0 24px !important; border: 1px solid var(--zara-black) !important; } /* -------------------------------------------------------------------------- * 7. RESPONSIVIDAD (MÓVIL Y TABLET) * -------------------------------------------------------------------------- */ @media (min-width: 981px) and (max-width: 1280px) { #top-menu-nav #top-menu > li > a { font-size: 10px !important; padding: 0 6px !important; letter-spacing: 0.05em !important; } .et_header_style_left .logo_container, .logo_container { margin-right: 20px !important; } } @media (max-width: 980px) { #top-menu-nav { display: none !important; /* Ocultar menú de escritorio en móvil */ } .et_header_style_left .logo_container, .logo_container { margin-right: 16px !important; } .et_mobile_nav_menu { display: flex !important; align-items: center !important; } .mobile_menu_bar { display: block !important; position: relative !important; cursor: pointer !important; } .mobile_menu_bar:before { content: "≡" !important; font-size: 26px !important; font-family: var(--zara-font-sans) !important; color: var(--zara-black) !important; line-height: 1 !important; } #mobile_menu { background-color: var(--zara-white) !important; border-bottom: 1px solid var(--zara-border-dark) !important; padding: 16px 20px !important; list-style: none !important; box-shadow: none !important; } #mobile_menu li a { font-family: var(--zara-font-sans) !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: var(--zara-black) !important; padding: 10px 0 !important; display: block !important; border-bottom: 1px solid var(--zara-border-light) !important; } #main-header .container { height: 56px !important; } #page-container { padding-top: 56px !important; } .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 24px 8px !important; width: 100% !important; margin: 20px 0 !important; } .single-product #left-area > div[id^="product-"] { display: flex !important; flex-direction: column !important; } .single-product .summary.entry-summary, .single-product .woocommerce-tabs { position: static !important; width: 100% !important; } } /* ========================================================================== * 7. PIE DE PÁGINA EDITORIAL COMPLETO (FOOTER ESTILO ZARA) * ========================================================================== */ #main-footer.zara-editorial-footer, .zara-editorial-footer, #main-footer { background-color: var(--zara-white, #ffffff) !important; color: var(--zara-black, #000000) !important; border-top: none !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 0 !important; margin: 60px 0 0 0 !important; } .zara-footer-top { width: 100% !important; padding: 60px 0 50px 0 !important; border-bottom: 1px solid var(--zara-border-light, #e5e5e5) !important; box-sizing: border-box !important; background-color: var(--zara-white, #ffffff) !important; } .zara-footer-container { width: 100% !important; max-width: 100% !important; padding-left: 32px !important; padding-right: 32px !important; box-sizing: border-box !important; margin: 0 auto !important; } .zara-footer-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 48px !important; width: 100% !important; box-sizing: border-box !important; } .zara-footer-col { display: flex !important; flex-direction: column !important; box-sizing: border-box !important; } .zara-footer-heading { font-family: var(--zara-font-sans, 'Inter', sans-serif) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; color: #000000 !important; margin: 0 0 20px 0 !important; line-height: 1.2 !important; } .zara-footer-links { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 10px !important; } .zara-footer-links li { padding: 0 !important; margin: 0 !important; } .zara-footer-links a { font-family: var(--zara-font-sans, 'Inter', sans-serif) !important; font-size: 12px !important; color: #666666 !important; text-decoration: none !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; transition: color 0.2s ease !important; display: inline-block !important; } .zara-footer-links a:hover { color: #000000 !important; text-decoration: underline !important; } .zara-footer-desc { font-family: var(--zara-font-sans, 'Inter', sans-serif) !important; font-size: 12px !important; line-height: 1.6 !important; color: #666666 !important; margin: 0 0 16px 0 !important; } .zara-footer-newsletter-form { margin: 0 0 12px 0 !important; width: 100% !important; } .zara-newsletter-input-wrap { display: flex !important; width: 100% !important; border: 1px solid #000000 !important; box-sizing: border-box !important; background: #ffffff !important; } .zara-newsletter-input { flex: 1 1 auto !important; border: none !important; outline: none !important; padding: 12px 14px !important; font-family: var(--zara-font-sans, 'Inter', sans-serif) !important; font-size: 11px !important; color: #000000 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; } .zara-newsletter-btn { background: #000000 !important; color: #ffffff !important; border: none !important; border-radius: 0 !important; padding: 12px 18px !important; font-family: var(--zara-font-sans, 'Inter', sans-serif) !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; cursor: pointer !important; transition: background 0.2s ease !important; white-space: nowrap !important; } .zara-newsletter-btn:hover { background: #333333 !important; } .zara-footer-subtext { font-family: var(--zara-font-sans, 'Inter', sans-serif) !important; font-size: 10px !important; color: #999999 !important; margin: 0 !important; line-height: 1.4 !important; } /* Barra inferior del Footer */ .zara-footer-bottom, #footer-bottom.zara-footer-bottom, #footer-bottom { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; max-width: 100% !important; background: #ffffff !important; background-color: #ffffff !important; padding: 40px 0 64px 0 !important; box-sizing: border-box !important; border-top: 1px solid #e5e5e5 !important; clear: both !important; } .zara-footer-bottom-container { width: 100% !important; max-width: 100% !important; padding-left: 64px !important; padding-right: 64px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 20px !important; } .zara-footer-bottom-brand { display: flex !important; flex-direction: column !important; gap: 3px !important; } .zara-footer-brand-title { font-family: var(--zara-font-serif, 'Plus Jakarta Sans', sans-serif) !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: 0.05em !important; color: #000000 !important; } .zara-footer-brand-subtitle { font-family: var(--zara-font-sans, 'Inter', sans-serif) !important; font-size: 10px !important; color: #888888 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; } .zara-footer-social { display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; } .zara-footer-social a { font-family: var(--zara-font-sans, 'Inter', sans-serif) !important; font-size: 11px !important; font-weight: 600 !important; color: #000000 !important; text-decoration: none !important; letter-spacing: 0.08em !important; transition: opacity 0.2s ease !important; } .zara-footer-social a:hover { opacity: 0.6 !important; } .zara-footer-sep { color: #cccccc !important; font-size: 11px !important; } .zara-footer-copy p { font-family: var(--zara-font-sans, 'Inter', sans-serif) !important; font-size: 11px !important; color: #888888 !important; margin: 0 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; } @media (max-width: 1024px) { .zara-footer-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 36px !important; } .zara-footer-container, .zara-footer-bottom-container { padding-left: 24px !important; padding-right: 24px !important; } } @media (max-width: 640px) { .zara-footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; } .zara-footer-bottom-container { flex-direction: column !important; align-items: flex-start !important; } } /* ========================================================================== * 8. OFERTAS DE TEMPORADA Y COMPRAR POR CATEGORIA AL 100% ANCHO REAL * ========================================================================== */ .et_flex_row > .et_pb_column:only-child, .et_pb_row > .et_pb_column:only-child, .et_block_row > .et_pb_column:only-child, .et_pb_column_single, .et_pb_column.et-last-child:first-child, .et_pb_row_0 .et_pb_column, .et_pb_row_1 .et_pb_column, .et_pb_row_2 .et_pb_column, .et_pb_row_3 .et_pb_column, .et_pb_row_4 .et_pb_column, .et_pb_row_5 .et_pb_column, .et_pb_column_2, .et_pb_column_4 { flex: 1 1 100% !important; flex-grow: 1 !important; flex-basis: 100% !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .et_pb_column:only-child > .et_pb_module, .et_pb_column:only-child > .et_pb_module > .et_pb_text_inner, .et_pb_column_single > .et_pb_module, .et_pb_column_single > .et_pb_module > .et_pb_text_inner, .et_pb_column_2 .et_pb_text, .et_pb_column_2 .et_pb_text_inner, .et_pb_column_4 .et_pb_text, .et_pb_column_4 .et_pb_text_inner, #ofertas, .categories-grid { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; flex-grow: 1 !important; box-sizing: border-box !important; } #ofertas { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } #ofertas > div:first-child { max-width: none !important; flex: 1 1 auto !important; } .categories-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .category-card { width: 100% !important; box-sizing: border-box !important; } .category-card-image-wrap { width: 100% !important; height: 380px !important; display: flex !important; justify-content: center !important; align-items: center !important; padding: 32px 20px !important; box-sizing: border-box !important; } .category-card-image-wrap img { width: 100% !important; max-width: 480px !important; height: 320px !important; object-fit: contain !important; } /* Tienda: 4 columnas para catalogo boutique sin huecos */ body.woocommerce-shop ul.products, body.post-type-archive-product ul.products, body.archive.woocommerce ul.products, body.tax-product_cat ul.products { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 36px 22px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } @media (max-width: 1024px) { body.woocommerce-shop ul.products, body.post-type-archive-product ul.products, body.archive.woocommerce ul.products, body.tax-product_cat ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 36px 18px !important; } } @media (max-width: 640px) { body.woocommerce-shop ul.products, body.post-type-archive-product ul.products, body.archive.woocommerce ul.products, body.tax-product_cat ul.products { grid-template-columns: 1fr !important; gap: 28px !important; } } /* ========================================================================== * 10. OPTIMIZACION COMPLETA PARA MOVILES Y TABLETS (RESPONSIVE TOTAL ZARA) * ========================================================================== */ @media (max-width: 980px) { /* Cabecera Móvil Limpia, Sólida y Proporcional */ #main-header { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 60px !important; background-color: #ffffff !important; border-bottom: 1px solid #e5e5e5 !important; box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important; z-index: 99998 !important; } body.admin-bar #main-header { top: 46px !important; } #page-container { padding-top: 60px !important; } #main-header .container, .et_fullwidth_nav #main-header .container { height: 60px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 16px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; position: static !important; } /* Logo compacto en móvil */ .logo_container { flex: 0 0 auto !important; max-width: 130px !important; height: 60px !important; margin: 0 !important; display: flex !important; align-items: center !important; } #logo { max-height: 32px !important; width: auto !important; display: block !important; } /* Contenedor derecho: Carrito y Menú Hamburguesa */ #et-top-navigation { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 12px !important; flex: 0 0 auto !important; position: static !important; margin: 0 !important; padding: 0 !important; height: 60px !important; } /* Menú horizontal oculto en móvil */ #top-menu-nav { display: none !important; } /* Desactivar totalmente el contenedor de búsqueda flotante en móviles */ .et_search_outer, .et_search_form_container, .et-search-form, .et-search-field, #et_top_search, .et_search_outer * { display: none !important; visibility: hidden !important; pointer-events: none !important; width: 0 !important; height: 0 !important; opacity: 0 !important; position: absolute !important; left: -9999px !important; top: -9999px !important; z-index: -9999 !important; } /* Carrito compacto elegante */ .et-cart-info { margin: 0 !important; height: 32px !important; line-height: 32px !important; padding: 0 10px !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.08em !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid #000000 !important; background: transparent !important; color: #000000 !important; text-decoration: none !important; box-sizing: border-box !important; } /* Menú Hamburguesa Móvil */ #et_mobile_nav_menu { display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; position: relative !important; width: 44px !important; height: 44px !important; flex: 0 0 44px !important; z-index: 999999 !important; pointer-events: auto !important; } .mobile_nav { display: flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; position: relative !important; z-index: 999999 !important; pointer-events: auto !important; } .select_page { display: none !important; } .mobile_menu_bar { display: flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; cursor: pointer !important; position: relative !important; margin: 0 !important; padding: 0 !important; z-index: 999999 !important; pointer-events: auto !important; -webkit-tap-highlight-color: transparent !important; user-select: none !important; } .mobile_menu_bar:before { content: "☰" !important; font-family: var(--zara-font-sans, 'Inter', sans-serif) !important; font-size: 26px !important; font-weight: 400 !important; line-height: 1 !important; color: #000000 !important; display: block !important; } .mobile_nav.opened .mobile_menu_bar:before { content: "✕" !important; font-size: 24px !important; font-weight: 300 !important; } /* Menú Desplegable Móvil a Ancho Completo (100vw) */ #mobile_menu { position: fixed !important; top: 60px !important; left: 0 !important; right: 0 !important; width: 100vw !important; max-width: 100vw !important; height: calc(100vh - 60px) !important; max-height: calc(100vh - 60px) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; background: #ffffff !important; border-top: 1px solid #000000 !important; padding: 24px 20px 60px 20px !important; box-sizing: border-box !important; list-style: none !important; box-shadow: 0 20px 40px rgba(0,0,0,0.15) !important; z-index: 999999 !important; } body.admin-bar #mobile_menu { top: 106px !important; height: calc(100vh - 106px) !important; } #mobile_menu li { list-style: none !important; padding: 0 !important; margin: 0 !important; } #mobile_menu li a { font-family: var(--zara-font-sans, 'Inter', sans-serif) !important; font-size: 13px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; color: #000000 !important; padding: 14px 0 !important; display: block !important; border-bottom: 1px solid #e5e5e5 !important; text-decoration: none !important; } #mobile_menu li.current-menu-item a { font-weight: 700 !important; } #mobile_menu .sub-menu { padding-left: 16px !important; background: #fafafa !important; list-style: none !important; } #mobile_menu .sub-menu li a { font-size: 11px !important; font-weight: 500 !important; color: #666666 !important; padding: 10px 0 !important; } } @media (min-width: 769px) and (max-width: 980px) { body #page-container .et_pb_row_3 ul.products, body.home .et_pb_row_3 ul.products, body.woocommerce-shop ul.products, body.post-type-archive-product ul.products, body.archive.woocommerce ul.products, body.tax-product_cat ul.products, .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px 20px !important; } } @media (max-width: 768px) { /* Evitar cualquier scroll horizontal indeseado */ html, body { overflow-x: hidden !important; width: 100% !important; max-width: 100% !important; } /* Hero Section Móvil */ .hero-container { display: flex !important; flex-direction: column !important; align-items: flex-start !important; padding: 24px 16px 32px 16px !important; gap: 24px !important; width: 100% !important; box-sizing: border-box !important; } .hero-container > div:first-child, .hero-container > div:last-child { flex: 1 1 100% !important; min-width: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .hero-container h1, h1.hero-title, .hero-title { font-size: 28px !important; line-height: 1.15 !important; letter-spacing: -0.01em !important; word-break: break-word !important; margin: 0 0 14px 0 !important; } .hero-container p { font-size: 14px !important; line-height: 1.5 !important; max-width: 100% !important; word-break: break-word !important; } .hero-container a.btn, .hero-container .et_pb_button, .hero-container a[href*="tienda"] { display: block !important; width: 100% !important; text-align: center !important; box-sizing: border-box !important; padding: 14px 20px !important; } .hero-container img { width: 100% !important; max-width: 280px !important; height: auto !important; object-fit: contain !important; margin: 0 auto !important; border-radius: 24px !important; overflow: hidden !important; } /* Propuestas de Valor: 1 columna en móvil */ .value-props-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; padding: 16px 16px !important; width: 100% !important; box-sizing: border-box !important; } /* Comprar por Categoría: 1 columna por tarjeta */ .categories-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 24px !important; padding: 0 16px !important; width: 100% !important; box-sizing: border-box !important; } .category-card { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .category-card-image-wrap { height: 240px !important; padding: 16px !important; } .category-card-image-wrap img { max-height: 200px !important; width: auto !important; object-fit: contain !important; } /* Ofertas de Temporada en móvil */ #ofertas { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; padding: 28px 20px !important; width: 100% !important; box-sizing: border-box !important; } #ofertas > div:first-child { width: 100% !important; } #ofertas a, #ofertas .et_pb_button { width: 100% !important; text-align: center !important; display: block !important; box-sizing: border-box !important; } /* ========================================================================= * FIX TOTAL: SECCIÓN "LO MÁS DESTACADO" Y PRODUCTOS EN MÓVIL * Cero recorte lateral: 1 columna con minmax(0, 1fr) y márgenes simétricos * ========================================================================= */ body #page-container .et_pb_section_2, body.home .et_pb_section_2, body .et_pb_section:has(.et_pb_row_3) { padding: 36px 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } body #page-container .et_pb_row_3, body.home .et_pb_row.et_pb_row_3, body #page-container .et_pb_row_3 .et_pb_column_3, body #page-container .et_pb_row_3 .et_pb_text_3, body #page-container .et_pb_row_3 .et_pb_text_inner { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* Encabezado editorial de Lo Más Destacado apilado verticalmente */ body #page-container .et_pb_row_3 .et_pb_text_inner > div:first-child, body.home .et_pb_row_3 .et_pb_text_inner > div:first-child { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; padding: 0 16px 20px 16px !important; width: 100% !important; box-sizing: border-box !important; } body #page-container .et_pb_row_3 .et_pb_text_inner > div:first-child h2 { font-size: 24px !important; line-height: 1.15 !important; letter-spacing: -0.01em !important; margin: 0 !important; } body #page-container .et_pb_row_3 .et_pb_text_inner > div:first-child p { font-size: 14px !important; line-height: 1.4 !important; margin: 0 !important; color: #666666 !important; } body #page-container .et_pb_row_3 .et_pb_text_inner > div:first-child a { font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; margin-top: 4px !important; display: inline-block !important; color: #000000 !important; text-decoration: underline !important; } body #page-container .et_pb_row_3 .woocommerce, body.home .et_pb_row_3 .woocommerce { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Cuadrícula de Productos: minmax(0, 1fr) garantiza que nunca desborde */ body #page-container .et_pb_row_3 ul.products, body.home .et_pb_row_3 ul.products, body.woocommerce-shop ul.products, body.post-type-archive-product ul.products, body.archive.woocommerce ul.products, body.tax-product_cat ul.products, .woocommerce ul.products { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 36px 0 !important; width: 100% !important; max-width: 100% !important; padding: 0 16px !important; margin: 0 !important; box-sizing: border-box !important; } body #page-container .et_pb_row_3 ul.products li.product, body.home .et_pb_row_3 ul.products li.product, body.woocommerce-shop ul.products li.product, body.post-type-archive-product ul.products li.product, body.archive.woocommerce ul.products li.product, body.tax-product_cat ul.products li.product, .woocommerce ul.products li.product { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; float: none !important; display: flex !important; flex-direction: column !important; box-sizing: border-box !important; } /* Tarjeta de producto 3:4 */ body #page-container .et_pb_row_3 .zara-thumb-container, body.home .et_pb_row_3 .zara-thumb-container, .woocommerce ul.products li.product .zara-thumb-container { width: 100% !important; max-width: 100% !important; min-width: 0 !important; aspect-ratio: 3 / 4 !important; height: auto !important; background-color: #f4f4f4 !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; position: relative !important; box-sizing: border-box !important; } body #page-container .et_pb_row_3 .zara-thumb-link, body #page-container .et_pb_row_3 .et_shop_image, .woocommerce ul.products li.product .zara-thumb-link, .woocommerce ul.products li.product .et_shop_image { width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Portadas de juegos completamente contenidas al 82% */ body #page-container .et_pb_row_3 .zara-thumb-container img, body #page-container .et_pb_row_3 .et_shop_image img, .woocommerce ul.products li.product .zara-thumb-container img, .woocommerce ul.products li.product .et_shop_image img { max-width: 82% !important; max-height: 82% !important; width: auto !important; height: auto !important; object-fit: contain !important; margin: auto !important; display: block !important; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.08)) !important; box-sizing: border-box !important; } /* Metadatos de producto: Título multilínea y precio sin recorte */ body #page-container .et_pb_row_3 .zara-product-meta, .woocommerce ul.products li.product .zara-product-meta { width: 100% !important; padding: 14px 0 0 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; box-sizing: border-box !important; } body #page-container .et_pb_row_3 .woocommerce-loop-product__title, .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.05em !important; line-height: 1.35 !important; margin: 0 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: break-word !important; width: 100% !important; } body #page-container .et_pb_row_3 .price, .woocommerce ul.products li.product .price { font-size: 14px !important; font-weight: 700 !important; margin: 0 !important; white-space: nowrap !important; color: #000000 !important; } /* ========================================================================= * FIX TOTAL: PIE DE PÁGINA Y NEWSLETTER EN MÓVIL * Cero recorte lateral: 16px simétricos y formulario adaptable a cualquier ancho * ========================================================================= */ .zara-footer-top { padding: 40px 0 30px 0 !important; width: 100% !important; box-sizing: border-box !important; } body #main-footer .container, body #main-footer .zara-footer-container, body #main-footer .zara-footer-bottom-container, .zara-footer-container, .zara-footer-bottom-container { width: 100% !important; max-width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } .zara-footer-grid { display: flex !important; flex-direction: column !important; gap: 32px !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; } .zara-footer-col { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; } .zara-footer-col-newsletter { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .zara-footer-newsletter-form { width: 100% !important; max-width: 100% !important; margin: 0 0 12px 0 !important; box-sizing: border-box !important; } /* Formulario Newsletter: input con flex: 1 1 0 y min-width: 0 para que JAMÁS empuje al botón */ .zara-newsletter-input-wrap { display: flex !important; flex-direction: row !important; width: 100% !important; max-width: 100% !important; border: 1px solid #000000 !important; box-sizing: border-box !important; background: #ffffff !important; overflow: hidden !important; } .zara-newsletter-input { flex: 1 1 0% !important; width: 0 !important; min-width: 0 !important; max-width: 100% !important; border: none !important; outline: none !important; padding: 12px 10px !important; font-size: 11px !important; box-sizing: border-box !important; } .zara-newsletter-btn { flex: 0 0 auto !important; border: none !important; padding: 12px 14px !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.08em !important; white-space: nowrap !important; box-sizing: border-box !important; background: #000000 !important; color: #ffffff !important; cursor: pointer !important; } .zara-footer-bottom, #footer-bottom { padding: 24px 0 36px 0 !important; width: 100% !important; box-sizing: border-box !important; } .zara-footer-bottom-container { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; padding-left: 16px !important; padding-right: 16px !important; } } @media (max-width: 380px) { /* En pantallas muy estrechas, apilar input y botón para máxima comodidad y estética */ .zara-newsletter-input-wrap { flex-direction: column !important; border: none !important; gap: 8px !important; } .zara-newsletter-input { width: 100% !important; flex: none !important; border: 1px solid #000000 !important; padding: 12px 14px !important; } .zara-newsletter-btn { width: 100% !important; flex: none !important; padding: 12px 14px !important; text-align: center !important; } } /* ========================================================================== * SISTEMA BOUTIQUE CATÁLOGO (TASTESKILL) * ========================================================================== */ header#main-header, #main-header { border-bottom: none !important; box-shadow: none !important; } footer#main-footer, #main-footer.zara-editorial-footer, .zara-editorial-footer, .zara-footer-top, #footer-bottom.zara-footer-bottom { border: none !important; box-shadow: none !important; } .zara-footer-bottom { background-color: #fafaf8 !important; padding: 32px 0 !important; } .zara-footer-heading { font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.02em !important; color: #111111 !important; margin-bottom: 16px !important; text-transform: none !important; } .zara-footer-links a, .zara-footer-desc, .zara-footer-subtext, .zara-footer-copy p { font-size: 14px !important; color: #444444 !important; line-height: 1.6 !important; } .zara-footer-bottom-brand .zara-footer-brand-title { font-size: 16px !important; font-weight: 600 !important; color: #111111 !important; } .zara-footer-bottom-brand .zara-footer-brand-subtitle { font-size: 13px !important; color: #555555 !important; } /* Cabecera Editorial */ .vz-catalog-hero { width: 100% !important; max-width: 100% !important; padding: 24px 0 36px 0 !important; margin: 0 0 28px 0 !important; box-sizing: border-box !important; } .vz-catalog-meta-row { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 12px !important; } .vz-catalog-count { font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; color: #111111 !important; text-transform: uppercase !important; } .vz-catalog-dot { color: #888888 !important; font-size: 13px !important; } .vz-catalog-tagline { font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0.04em !important; color: #4a4a4a !important; text-transform: uppercase !important; } .vz-catalog-heading { font-family: 'Plus Jakarta Sans', sans-serif, -apple-system !important; font-size: clamp(28px, 3.2vw, 48px) !important; font-weight: 500 !important; letter-spacing: -0.02em !important; line-height: 1.1 !important; margin: 0 0 12px 0 !important; color: #111111 !important; text-transform: uppercase !important; } .vz-catalog-desc { font-family: 'Inter', sans-serif !important; font-size: 16px !important; line-height: 1.55 !important; color: #444444 !important; max-width: 68ch !important; margin: 0 0 22px 0 !important; } .vz-catalog-nav { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 18px !important; } .vz-cat-pill { display: inline-flex !important; align-items: center !important; height: 38px !important; padding: 0 18px !important; border-radius: 9999px !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0.04em !important; text-decoration: none !important; background-color: #f2f2f0 !important; color: #222222 !important; transition: all 0.2s ease !important; } .vz-cat-pill:hover { background-color: #e5e5e2 !important; color: #000000 !important; } .vz-cat-pill.is-active { background-color: #000000 !important; color: #ffffff !important; } /* Vitrina de Producto */ .woocommerce ul.products li.product .zara-thumb-container { width: 100% !important; max-width: 100% !important; aspect-ratio: 4 / 5 !important; height: auto !important; background-color: #f7f7f5 !important; border-radius: 4px !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; position: relative !important; padding: 24px !important; box-sizing: border-box !important; } .woocommerce ul.products li.product .zara-thumb-link { width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; } .woocommerce ul.products li.product .zara-thumb-container img { max-width: 86% !important; max-height: 86% !important; width: auto !important; height: auto !important; object-fit: contain !important; margin: auto !important; display: block !important; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.12)) !important; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; } .woocommerce ul.products li.product:hover .zara-thumb-container img { transform: scale(1.035) !important; } .vz-vitrine-tag { position: absolute !important; top: 14px !important; right: 14px !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.05em !important; padding: 4px 8px !important; border-radius: 2px !important; z-index: 2 !important; pointer-events: none !important; text-transform: uppercase !important; } .vz-tag-sealed { background-color: #111111 !important; color: #ffffff !important; } .vz-tag-mint { background-color: #ffffff !important; color: #222222 !important; box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important; } .vz-meta-taxonomy { font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.04em !important; color: #555555 !important; text-transform: uppercase !important; margin-bottom: 4px !important; display: block !important; line-height: 1.3 !important; } .woocommerce ul.products li.product .zara-product-meta { width: 100% !important; padding: 14px 0 0 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; box-sizing: border-box !important; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 16px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; line-height: 1.35 !important; margin: 0 !important; color: #111111 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; word-break: break-word !important; } .woocommerce ul.products li.product .price { font-size: 17px !important; font-weight: 600 !important; color: #111111 !important; font-variant-numeric: tabular-nums !important; margin-top: 4px !important; } /* Ancho 100% REAL de pantalla completa para el catálogo y archivos en Divi */ body.woocommerce-shop #page-container, body.post-type-archive-product #page-container, body.archive.woocommerce #page-container, body.tax-product_cat #page-container { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; } body.woocommerce-shop #main-content, body.post-type-archive-product #main-content, body.archive.woocommerce #main-content, body.tax-product_cat #main-content { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } body.woocommerce-shop #main-content .container, body.post-type-archive-product #main-content .container, body.archive.woocommerce #main-content .container, body.tax-product_cat #main-content .container { width: 100% !important; max-width: 100% !important; padding-left: 40px !important; padding-right: 40px !important; margin: 0 !important; box-sizing: border-box !important; } @media (max-width: 980px) { body.woocommerce-shop #main-content .container, body.post-type-archive-product #main-content .container, body.archive.woocommerce #main-content .container, body.tax-product_cat #main-content .container, .vz-catalog-hero { padding-left: 20px !important; padding-right: 20px !important; } } /* ========================================================================== TIPOGRAFÍA MODERNA Y ROTUNDA: PLUS JAKARTA SANS PARA TITULARES ========================================================================== */ h1, h2, h3, .hero-content h1, .category-card-title, .category-card h3, .vz-catalog-heading, .woocommerce-products-header__title, .et_pb_text h1, .et_pb_text h2, .et_pb_text h3 { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; } /* Hero H1 */ h1[style*="font-family"], .hero-container h1, .hero-content h1 { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-weight: 800 !important; letter-spacing: -0.02em !important; } /* Categorías y Secciones */ h2[style*="font-family"], .et_pb_text h2, #comprar-por-categoria h2 { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-weight: 800 !important; letter-spacing: -0.015em !important; } .category-card-title, h3.category-card-title, h3[style*="font-family"] { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-weight: 700 !important; letter-spacing: -0.01em !important; }