/* ========================================================= LIMITAR ANCHO Y CENTRAR SECCIONES PRINCIPALES ========================================================= */ .expansiones-grid, .seccion-recientes { /* Evita que el contenido se estire demasiado en pantallas grandes */ max-width: 1350px; /* Centra horizontalmente el bloque dentro de la página */ margin-left: auto; margin-right: auto; } /* ========================================================= GRID RESPONSIVE PARA TARJETAS DE EXPANSIONES ========================================================= */ .expansiones-grid { /* Convierte el contenedor en un grid */ display: grid !important; /* auto-fit: Ajusta automáticamente el número de columnas según el espacio disponible minmax(260px, 1fr): - cada tarjeta mínimo 260px - puede crecer hasta ocupar una fracción disponible del grid */ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important; /* Hace que todas las tarjetas tengan la misma altura independientemente de su contenido */ align-items: stretch !important; /* Espacio entre tarjetas */ gap: 24px !important; } /* ========================================================= TARJETAS KADENCE INFOBOX DENTRO DEL GRID ========================================================= */ .expansiones-grid > .wp-block-kadence-infobox { /* Hace que cada tarjeta se estire para ocupar toda la altura disponible dentro de su celda del grid */ align-self: stretch !important; /* Permite controlar el layout interno con flex */ display: flex !important; } /* ========================================================= CONTENIDO INTERNO DE LA TARJETA ========================================================= */ .expansiones-grid > .wp-block-kadence-infobox > .info-box-link { /* Permite estructurar los elementos en columna */ display: flex !important; flex-direction: column !important; /* Permite que el contenido interno crezca para ocupar todo el espacio vertical disponible */ flex: 1 1 auto !important; /* Asegura que el enlace ocupa todo el ancho de la tarjeta */ width: 100% !important; } /* ========================================================= ELIMINAR LIMITES DE ANCHO DEL CONTENIDO ========================================================= */ .content-wrap, .entry-content-wrap, .entry-content.single-content { /* El tema Kadence limita el ancho del contenido. Esto lo elimina para que el layout pueda ocupar toda la pantalla. */ max-width: 100%; } /* ========================================================= CONTROLAR ESPACIADO ENTRE BLOQUES ========================================================= */ .entry-content.single-content > * + * { /* Elimina el margen automático entre bloques consecutivos que WordPress añade por defecto. */ margin-block-start: 0; } .entry-content.single-content > .wp-block-group { /* Evita márgenes extra en grupos de bloques para tener control total del espaciado */ margin-top: 0; margin-bottom: 0; } /* ========================================================= SECCIÓN DE PRODUCTOS RECIENTES ========================================================= */ .home-recientes { margin: 0; } .home-recientes > .wp-block-group__inner-container { /* Permite usar todo el ancho disponible pero manteniendo el contenido centrado */ max-width: 100%; margin: 0 auto; /* Sin padding interno extra */ padding: 0; /* Elimina separación automática entre bloques */ gap: 0; } /* ========================================================= AJUSTES ESPECÍFICOS PARA LA HOME ========================================================= */ body.home .content-wrap, body.home .entry, body.home .entry-content-wrap, body.home .entry-content.single-content { /* Kadence añade márgenes superiores al contenido. Esto los elimina para que el hero toque el header. */ margin-top: 0; padding-top: 0; /* Elimina padding lateral del layout del tema para permitir secciones full-width */ padding-left: 0; padding-right: 0; /* Elimina márgenes laterales */ margin-left: 0; margin-right: 0; /* Permite ancho completo */ max-width: 100%; } /* ========================================================= SWATCHES DE VARIANTES (BANDERAS DE IDIOMA) ========================================================= */ .cfvsw-swatches-option.cfvsw-image-option { /* Define el color de fondo del círculo exterior que rodea la bandera */ background: #1f2937 !important; /* Borde del swatch de variante (en este caso un gris oscuro) */ border: 0.5px solid #1f2937; } /* ========================================================= LIMPIAR ESTILOS INTERNOS DE LA IMAGEN DEL SWATCH ========================================================= */ .cfvsw-swatches-option.cfvsw-image-option .cfvsw-swatch-inner { /* Elimina cualquier borde que el plugin añada para evitar dobles anillos */ border: none !important; /* Elimina sombras que pueden crear un anillo visual adicional */ box-shadow: none !important; /* Elimina outline en estados focus/active */ outline: none !important; } /* PRODUCTOS DESTACADOS EN HOME Rediseño visual: la versión anterior usaba borde dorado de 2px, sombras muy pesadas y un botón pegado al borde de la tarjeta. Este bloque comparte ahora el mismo lenguaje que las tarjetas de producto del catálogo: blanco en reposo, borde neutro, radios de 16px y elevación solo al interactuar. */ .recommended-products { max-width: 1280px; margin: 0 auto; padding: 0; } .recommended-products .wc-block-product-template { gap: var(--rtcg-space-4); } .recommended-products .wc-block-product-template > .wc-block-product { align-self: stretch; } /* El shortcode nativo de WooCommerce se usa como fallback estable cuando Product Collection no puede renderizarse en un entorno. Conserva la misma interfaz que el bloque moderno, sin duplicar el componente. */ .recommended-products .products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rtcg-space-4); margin: 0; } .recommended-products .products > .product { display: flex; flex-direction: column; float: none !important; width: auto !important; min-width: 0; margin: 0 !important; overflow: hidden; background: var(--global-palette9); border: 1px solid var(--global-palette7) !important; border-radius: var(--rtcg-radius-lg) !important; box-shadow: none !important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .recommended-products .products .product a.woocommerce-LoopProduct-link { display: flex; flex: 1 1 auto; flex-direction: column; } .recommended-products .products .product .product-details { display: flex; flex: 1 1 auto; flex-direction: column; padding: 0 !important; background: transparent !important; } .recommended-products .products .product img { aspect-ratio: 1 / 1; width: 100%; height: auto; margin: 0 !important; padding: var(--rtcg-space-3); box-sizing: border-box; background: var(--global-palette8); object-fit: contain; } .recommended-products .products .product .woocommerce-loop-product__title, .recommended-products .products .product .price { padding-right: var(--rtcg-space-4); padding-left: var(--rtcg-space-4); text-align: left; } .recommended-products .products .product .woocommerce-loop-product__title { min-height: 48px; margin: var(--rtcg-space-3) 0 0; color: var(--global-palette4); font-size: 1rem; font-weight: 600; line-height: 1.35; } .recommended-products .products .product .price { margin: var(--rtcg-space-2) 0 var(--rtcg-space-3); color: var(--global-palette4); font-size: 1rem; font-weight: 700; } .recommended-products .products .product .button { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: calc(100% - (2 * var(--rtcg-space-4))) !important; min-height: 44px; margin: 0 var(--rtcg-space-4) var(--rtcg-space-4) !important; padding: 10px 16px; background: var(--global-palette-btn-bg, var(--global-palette14)) !important; border: 0 !important; border-radius: var(--rtcg-radius-md) !important; box-shadow: none !important; color: var(--global-palette-btn, var(--global-palette9)) !important; font-weight: 700; text-align: center; } .recommended-products .products .product .product-action-wrap { display: block; margin-top: auto; } /* La acción secundaria comparte exactamente el ancho útil del CTA primario. */ .recommended-products .products .product .product-action-wrap .sp-wishlist, .recommended-products .products .product .product-action-wrap .sp-wishlist-button { box-sizing: border-box; width: calc(100% - (2 * var(--rtcg-space-4))); } .recommended-products .products .product .product-action-wrap .sp-wishlist { margin: 0 var(--rtcg-space-4) var(--rtcg-space-2) !important; } /* Home > Productos Destacados: Kadence reemplaza el CTA clásico por un check al completar el AJAX. En este único componente mantenemos el botón y su geometría original; el carrito persistente de la cabecera ya cubre el acceso al carrito. */ .recommended-products .products .product .product-action-wrap .added_to_cart, .recommended-products .products .product .product-action-wrap .button.added::before, .recommended-products .products .product .product-action-wrap .button.added::after, .recommended-products .products .product .product-action-wrap .button .kadence-check-svg { display: none !important; content: none !important; } .recommended-products .products .product .product-action-wrap .button.added, .recommended-products .products .product .product-action-wrap .button.added:hover, .recommended-products .products .product .product-action-wrap .button.added:focus { display: flex !important; align-items: center; justify-content: center; min-height: 44px; height: auto !important; box-sizing: border-box; width: calc(100% - (2 * var(--rtcg-space-4))) !important; margin: 0 var(--rtcg-space-4) var(--rtcg-space-4) !important; padding: 10px 16px !important; background: var(--global-palette-btn-bg, var(--global-palette14)) !important; border: 0 !important; border-radius: var(--rtcg-radius-md) !important; box-shadow: none !important; color: var(--global-palette-btn, var(--global-palette9)) !important; overflow: visible !important; font-size: 1rem !important; font-weight: 700; line-height: 1.2; text-align: center; } /* Tienda: conservar el CTA nativo de Kadence tras el AJAX. */ body.woocommerce-shop .products .product .product-action-wrap .added_to_cart, body.woocommerce-shop .products .product .product-action-wrap .button.added::before, body.woocommerce-shop .products .product .product-action-wrap .button.added::after, body.woocommerce-shop .products .product .product-action-wrap .button .kadence-check-svg { display: none !important; content: none !important; } body.woocommerce-shop .products .product .product-action-wrap .button.added, body.woocommerce-shop .products .product .product-action-wrap .button.added:hover, body.woocommerce-shop .products .product .product-action-wrap .button.added:focus { display: block !important; width: 100% !important; height: auto !important; padding: 0.4em 1em !important; overflow: visible !important; font-size: 1.125rem !important; line-height: 1.6; } @media (hover: hover) { .recommended-products .products > .product:hover { border-color: var(--global-palette6) !important; box-shadow: var(--rtcg-shadow-card-hover) !important; transform: translateY(-2px); } } @media (max-width: 767px) { .recommended-products .products { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .recommended-products .wc-block-product { display: flex; flex-direction: column; height: 100%; overflow: hidden; padding: 0; background: var(--global-palette9); border: var(--rtcg-border-default); border-radius: var(--rtcg-radius-lg); box-shadow: none; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } /* * Compatibilidad con el CSS adicional antiguo del Customizer. * * El rediseño anterior de este bloque vivía también en "CSS adicional" * (custom_css_post_id=84) y ese CSS puede cargarse después de esta hoja. * La especificidad extra y !important son deliberados: mientras no se * limpie esa entrada histórica, el borde dorado y el radio cuadrado no * deben volver a imponerse sobre este componente. */ .recommended-products .wc-block-product-template > .wc-block-product { border: 1px solid var(--global-palette7) !important; border-radius: var(--rtcg-radius-lg) !important; box-shadow: none !important; } @media (hover: hover) { .recommended-products .wc-block-product:hover { border-color: var(--global-palette6); box-shadow: var(--rtcg-shadow-card-hover); transform: translateY(-2px); } .recommended-products .wc-block-product-template > .wc-block-product:hover { border-color: var(--global-palette6) !important; box-shadow: var(--rtcg-shadow-card-hover) !important; } } /* Imagen de producto: área neutra y proporción uniforme para que las tarjetas no salten cuando las fotos tienen formatos diferentes. */ .recommended-products .wc-block-components-product-image { position: relative; margin-bottom: 0; overflow: hidden; background: var(--global-palette8); border-radius: var(--rtcg-radius-lg) var(--rtcg-radius-lg) 0 0; } .recommended-products .wc-block-components-product-image a { display: block; aspect-ratio: 1 / 1; width: 100%; } .recommended-products .wc-block-components-product-image img { display: block; width: 100%; height: 100%; padding: var(--rtcg-space-3); box-sizing: border-box; object-fit: contain; } /* Oferta e idioma comparten la misma composición que las tarjetas del catálogo: idioma a la izquierda, oferta naranja a la derecha. */ .recommended-products .wc-block-components-product-sale-badge { position: absolute; top: var(--rtcg-space-2); right: var(--rtcg-space-2); z-index: 2; margin: 0; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; line-height: 1; } .recommended-products .wc-block-components-product-sale-badge__text, body.single-product.rtcg-product-page-enhancements .upsells .onsale, body.single-product.rtcg-product-page-enhancements .related .onsale { display: inline-flex; align-items: stretch; min-height: 28px; padding: 6px 10px; border: 0; border-radius: 999px; background: var(--global-palette14) !important; color: var(--global-palette9) !important; font-size: 0.72rem; font-weight: 750; line-height: 1; letter-spacing: 0.01em; } /* El badge se inyecta dentro del bloque de imagen moderno. Esta regla evita que el padding reservado para la foto del producto reduzca la bandera. */ .recommended-products .rtcg-product-language-badge__flag { margin: 0 !important; padding: 0 !important; background: transparent !important; object-fit: cover !important; } /* Contenido: alineación izquierda y jerarquía clara, en vez de centrar cada título como si fuera una tarjeta promocional independiente. */ .recommended-products .wc-block-woocommerce-product-price, .recommended-products .wp-block-post-title { padding-right: var(--rtcg-space-4); padding-left: var(--rtcg-space-4); } .recommended-products .wc-block-woocommerce-product-price { margin-top: var(--rtcg-space-4); margin-bottom: var(--rtcg-space-2); color: var(--global-palette4); font-size: 1rem; font-weight: 700; } .recommended-products .wp-block-post-title { display: flex; align-items: flex-start; justify-content: flex-start; min-height: 48px; margin-top: 0; margin-bottom: var(--rtcg-space-4); text-align: left; } .recommended-products .wp-block-post-title a { display: inline-block; color: var(--global-palette4); font-weight: 600; line-height: 1.35; } /* CTA separado del borde de la tarjeta: más aire y el mismo lenguaje que los botones del resto del sitio. */ .recommended-products .wc-block-components-product-button { width: auto; margin: auto var(--rtcg-space-4) var(--rtcg-space-4); } .recommended-products .wc-block-product-template .wc-block-components-product-button { margin: auto var(--rtcg-space-4) var(--rtcg-space-4) !important; } .recommended-products .wc-block-components-product-button .wp-block-button__link, .recommended-products .wc-block-components-product-button .wc-block-components-product-button__button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin-bottom: 0 !important; padding: 10px 16px; background: var(--global-palette-btn-bg, var(--global-palette14)); border: 0 !important; border-radius: var(--rtcg-radius-md) !important; box-shadow: none !important; color: var(--global-palette9); font-weight: 700; line-height: 1.2; transition: background-color 0.2s ease, transform 0.2s ease; } .recommended-products .wc-block-components-product-button .wp-block-button__link:hover, .recommended-products .wc-block-components-product-button .wc-block-components-product-button__button:hover { background: var(--global-palette-btn-hover-bg, var(--global-palette3)); color: var(--global-palette9); } /* Los CTAs de los tres módulos de descubrimiento usan el CTA naranja y la misma proporción; se limita a las cards, sin modificar botones globales. */ body.single-product.rtcg-product-page-enhancements .upsells .add_to_cart_button, body.single-product.rtcg-product-page-enhancements .related .product-action-wrap .button:not(.kb-button), .recommended-products .wc-block-components-product-button .wc-block-components-product-button__button { background: var(--global-palette-btn-bg, var(--global-palette14)) !important; color: var(--global-palette-btn, var(--global-palette9)) !important; border: 0 !important; border-radius: var(--rtcg-radius-md) !important; box-shadow: none !important; } body.single-product.rtcg-product-page-enhancements .upsells .add_to_cart_button:hover, body.single-product.rtcg-product-page-enhancements .upsells .add_to_cart_button:focus-visible, body.single-product.rtcg-product-page-enhancements .related .product-action-wrap .button:not(.kb-button):hover, body.single-product.rtcg-product-page-enhancements .related .product-action-wrap .button:not(.kb-button):focus-visible, .recommended-products .wc-block-components-product-button .wc-block-components-product-button__button:focus-visible { background: var(--global-palette-btn-bg-hover, var(--global-palette3)) !important; color: var(--global-palette-btn-hover, var(--global-palette9)) !important; } /* “También te recomendamos”: Kadence marca el CTA completado con un check. Conservamos el mismo CTA naranja sin ese estado visual; el carrito fijo de la cabecera ya comunica y permite revisar la compra. */ body.single-product.rtcg-product-page-enhancements .upsells .product-action-wrap .added_to_cart, body.single-product.rtcg-product-page-enhancements .upsells .product-action-wrap .add_to_cart_button.added::before, body.single-product.rtcg-product-page-enhancements .upsells .product-action-wrap .add_to_cart_button.added::after, body.single-product.rtcg-product-page-enhancements .upsells .product-action-wrap .add_to_cart_button .kadence-check-svg { display: none !important; content: none !important; } @media (max-width: 600px) { .recommended-products { margin-top: 0; padding-bottom: 0; } .recommended-products .wc-block-product-template { gap: var(--rtcg-space-3); } .recommended-products .wc-block-components-product-image img { padding: var(--rtcg-space-2); } } /* ---- Filtros de catálogo: tienda, categorías y atributos ---- */ #secondary .wc-block-product-filters.barra-lateral-1 { background: var(--global-palette9) !important; border: 1px solid var(--global-palette7); border-radius: 16px; color: var(--global-palette4); padding: 24px; } #secondary .wc-block-product-filters .wc-block-product-filters__overlay-dialog { background: var(--global-palette9) !important; color: var(--global-palette4); } #secondary .wc-block-product-filters .wc-block-product-filters__overlay-content { gap: 0; } #secondary .wc-block-product-filters .wc-block-product-filters__overlay-content > [data-block-name^="woocommerce/product-filter-"] { border-bottom: 1px solid var(--global-palette7); margin: 0 0 20px; padding: 0 0 20px; } #secondary .wc-block-product-filters .wc-block-product-filters__overlay-content > [data-block-name^="woocommerce/product-filter-"]:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } #secondary .wc-block-product-filters h3 { color: var(--global-palette3) !important; font-size: 1.1rem; letter-spacing: 0.02em; padding-left: 12px; position: relative; text-transform: uppercase; } #secondary .wc-block-product-filters h3::before { background: var(--global-palette14); border-radius: 999px; content: ''; height: 1.1em; left: 0; position: absolute; top: 0.15em; width: 3px; } #secondary .wc-block-product-filters .wc-block-product-filter-checkbox-list__label { color: var(--global-palette4) !important; cursor: pointer; font-size: 0.94rem; line-height: 1.45; margin-left: -6px; padding: 4px 6px; transition: background-color 160ms ease, color 160ms ease; } #secondary .wc-block-product-filters .wc-block-product-filter-checkbox-list__input-wrapper:before { display: none; } #secondary .wc-block-product-filters input[type="checkbox"].wc-block-product-filter-checkbox-list__input { background: transparent !important; border: 1px solid var(--global-palette6) !important; border-radius: 4px; transition: background-color 160ms ease, border-color 160ms ease; } #secondary .wc-block-product-filters input[type="checkbox"].wc-block-product-filter-checkbox-list__input:checked { background: var(--global-palette14) !important; border-color: var(--global-palette14) !important; } #secondary .wc-block-product-filters svg.wc-block-product-filter-checkbox-list__mark { color: var(--global-palette9) !important; } #secondary .wc-block-product-filters .wc-block-product-filter-checkbox-list__label:hover .wc-block-product-filter-checkbox-list__text, #secondary .wc-block-product-filters .wc-block-product-filter__show-more { color: var(--global-palette2); } #secondary .wc-block-product-filters .wc-block-product-filter-checkbox-list__label:hover { background: color-mix(in srgb, var(--global-palette1) 8%, transparent); } #secondary .wc-block-product-filters .wc-block-product-filter-checkbox-list__label:has(input:checked) { color: var(--global-palette14) !important; font-weight: 600; } #secondary .wc-block-product-filters .wc-block-product-filter-chips__item { background: var(--global-palette9); border-color: var(--global-palette6); border-radius: 6px; color: var(--global-palette4); transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease; } #secondary .wc-block-product-filters .wc-block-product-filter-chips__item:hover { background: color-mix(in srgb, var(--global-palette1) 8%, transparent); border-color: var(--global-palette2); color: var(--global-palette2); transform: translateY(-1px); } #secondary .wc-block-product-filters .wc-block-product-filter-chips__item[aria-checked="true"] { background: var(--global-palette14); border-color: var(--global-palette14); color: var(--global-palette9); } /* ========================================================= HOME · DANOS TU OPINIÓN El selector se limita al bloque Kadence existente de la home mediante su identificador único. No altera el contenido ni la visibilidad por usuario. ========================================================= */ body.home .entry-content.single-content > .wp-block-group.has-theme-palette-8-background-color.has-background:has(.kt-adv-heading17_fc1985-48) { position: relative; isolation: isolate; overflow: hidden; margin: 0 !important; padding: clamp(42px, 5vw, 70px) clamp(20px, 5vw, 48px) !important; background: radial-gradient(circle at 88% 10%, rgba(242, 122, 36, 0.19), transparent 28%), linear-gradient(118deg, #fffaf4 0%, #f8f1e8 100%) !important; border-top: 1px solid rgba(242, 122, 36, 0.18); border-bottom: 1px solid rgba(16, 42, 67, 0.08); } body.home .entry-content.single-content > .wp-block-group.has-theme-palette-8-background-color.has-background:has(.kt-adv-heading17_fc1985-48)::before { position: absolute; z-index: -1; top: -104px; right: clamp(18px, 10vw, 180px); display: grid; width: 210px; height: 210px; color: rgba(16, 42, 67, 0.055); content: '★'; font-size: 250px; line-height: 1; place-items: center; transform: rotate(12deg); } body.home .entry-content.single-content > .wp-block-group.has-theme-palette-8-background-color.has-background:has(.kt-adv-heading17_fc1985-48) > .wp-block-group__inner-container { display: grid; grid-template-columns: 62px minmax(0, 1fr); max-width: 920px; margin: 0 auto; column-gap: clamp(18px, 3vw, 30px); align-items: center; } body.home .entry-content.single-content > .wp-block-group.has-theme-palette-8-background-color.has-background:has(.kt-adv-heading17_fc1985-48) > .wp-block-group__inner-container::before { display: grid; grid-row: span 2; width: 62px; height: 62px; color: var(--global-palette14, #f27a24); content: '★'; background: #fff; border: 1px solid rgba(242, 122, 36, 0.3); border-radius: 50%; box-shadow: 0 10px 24px rgba(16, 42, 67, 0.1); font-size: 27px; line-height: 1; place-items: center; } body.home .entry-content.single-content > .wp-block-group.has-theme-palette-8-background-color.has-background:has(.kt-adv-heading17_fc1985-48) h2.wp-block-heading { grid-column: 2; margin: 0 !important; color: var(--global-palette3, #102a43) !important; font-size: clamp(24px, 3vw, 34px); font-weight: 800; line-height: 1.1; letter-spacing: -0.035em; } body.home .entry-content.single-content > .wp-block-group.has-theme-palette-8-background-color.has-background:has(.kt-adv-heading17_fc1985-48) .kt-adv-heading17_fc1985-48 { grid-column: 2; margin-top: 9px; color: var(--global-palette4, #31475e) !important; font-size: clamp(15px, 1.5vw, 17px); line-height: 1.6; } body.home .entry-content.single-content > .wp-block-group.has-theme-palette-8-background-color.has-background:has(.kt-adv-heading17_fc1985-48) > .wp-block-group__inner-container > p:empty { display: none; } body.home .entry-content.single-content > .wp-block-group.has-theme-palette-8-background-color.has-background:has(.kt-adv-heading17_fc1985-48) .kt-adv-heading17_fc1985-48 a { display: inline-flex; min-height: 38px; align-items: center; margin: 7px 0 0 3px; padding: 7px 14px; color: #fff !important; background: var(--global-palette14, #f27a24); border: 1px solid var(--global-palette14, #f27a24); border-radius: 999px; box-shadow: 0 7px 15px rgba(242, 122, 36, 0.2); font-size: 0.88rem; font-weight: 750; line-height: 1.2; text-decoration: none !important; transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; } body.home .entry-content.single-content > .wp-block-group.has-theme-palette-8-background-color.has-background:has(.kt-adv-heading17_fc1985-48) .kt-adv-heading17_fc1985-48 a:hover, body.home .entry-content.single-content > .wp-block-group.has-theme-palette-8-background-color.has-background:has(.kt-adv-heading17_fc1985-48) .kt-adv-heading17_fc1985-48 a:focus-visible { color: #fff !important; background: var(--global-palette3, #102a43); border-color: var(--global-palette3, #102a43); box-shadow: 0 9px 18px rgba(16, 42, 67, 0.18); transform: translateY(-1px); } @media (max-width: 640px) { body.home .entry-content.single-content > .wp-block-group.has-theme-palette-8-background-color.has-background:has(.kt-adv-heading17_fc1985-48) > .wp-block-group__inner-container { grid-template-columns: 48px minmax(0, 1fr); column-gap: 15px; } body.home .entry-content.single-content > .wp-block-group.has-theme-palette-8-background-color.has-background:has(.kt-adv-heading17_fc1985-48) > .wp-block-group__inner-container::before { width: 48px; height: 48px; font-size: 21px; } body.home .entry-content.single-content > .wp-block-group.has-theme-palette-8-background-color.has-background:has(.kt-adv-heading17_fc1985-48) .kt-adv-heading17_fc1985-48 a { margin-left: 0; } } @media (prefers-reduced-motion: reduce) { body.home .entry-content.single-content > .wp-block-group.has-theme-palette-8-background-color.has-background:has(.kt-adv-heading17_fc1985-48) .kt-adv-heading17_fc1985-48 a { transition: none; } } /* ========================================================= PÁGINAS LEGALES · MARCO EDITORIAL La clase se añade únicamente a los IDs configurados por la funcionalidad "Presentación de páginas legales". El contenido de las páginas permanece íntegramente editable desde WordPress. ========================================================= */ body.rtcg-legal-page .content-area { padding-top: clamp(28px, 4vw, 60px); padding-bottom: clamp(48px, 6vw, 88px); } body.rtcg-legal-page .content-wrap { max-width: 1140px !important; margin-right: auto !important; margin-left: auto !important; padding-right: 24px !important; padding-left: 24px !important; } body.rtcg-legal-page .entry { max-width: 920px; margin: 0 auto; } body.rtcg-legal-page .entry-header { position: relative; overflow: hidden; margin: 0; padding: clamp(30px, 5vw, 56px) clamp(26px, 6vw, 64px); background: linear-gradient(125deg, var(--global-palette3, #102a43), var(--global-palette4, #1d4368)); border: 1px solid color-mix(in srgb, var(--global-palette14, #f27a24) 36%, transparent); border-bottom: 0; border-radius: 22px 22px 0 0; box-shadow: 0 18px 40px rgba(10, 30, 57, 0.15); } body.rtcg-legal-page .entry-header::after { position: absolute; right: -48px; bottom: -88px; width: 220px; height: 220px; content: ''; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--global-palette14, #f27a24) 42%, transparent) 0, transparent 70%); } body.rtcg-legal-page .entry-title { position: relative; z-index: 1; max-width: 720px; margin: 0 !important; color: #fff !important; font-size: clamp(30px, 4vw, 48px); font-weight: 800; line-height: 1.1; letter-spacing: -0.035em; } body.rtcg-legal-page .entry-content-wrap, body.rtcg-legal-page .entry-content.single-content { max-width: none !important; margin: 0 !important; padding: clamp(30px, 5vw, 60px) clamp(24px, 6vw, 64px) !important; background: var(--global-palette9, #fff); border: 1px solid var(--global-palette7, #dce3ea); border-top: 0; border-radius: 0 0 22px 22px; box-shadow: 0 20px 42px rgba(10, 30, 57, 0.1); } body.rtcg-legal-page .entry-content.single-content { color: var(--global-palette4, #31475e); font-size: 16px; line-height: 1.78; } body.rtcg-legal-page .entry-content.single-content > * + * { margin-block-start: 1.15rem; } body.rtcg-legal-page .entry-content.single-content h2 { margin-top: clamp(38px, 5vw, 58px); margin-bottom: 16px; padding-bottom: 12px; color: var(--global-palette3, #102a43); font-size: clamp(22px, 2.4vw, 29px); font-weight: 750; line-height: 1.25; letter-spacing: -0.022em; border-bottom: 1px solid var(--global-palette7, #dce3ea); } body.rtcg-legal-page .entry-content.single-content > h2:first-child { margin-top: 0; } body.rtcg-legal-page .entry-content.single-content h3 { margin-top: 30px; margin-bottom: 10px; color: var(--global-palette3, #102a43); font-size: clamp(18px, 2vw, 22px); font-weight: 750; line-height: 1.32; } body.rtcg-legal-page .entry-content.single-content p, body.rtcg-legal-page .entry-content.single-content li { max-width: 76ch; } body.rtcg-legal-page .entry-content.single-content ul, body.rtcg-legal-page .entry-content.single-content ol { padding-left: 1.35em; } body.rtcg-legal-page .entry-content.single-content li + li { margin-top: 7px; } body.rtcg-legal-page .entry-content.single-content li::marker { color: var(--global-palette14, #f27a24); font-weight: 800; } body.rtcg-legal-page .entry-content.single-content a { color: var(--global-palette14, #f27a24); font-weight: 700; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-decoration-thickness: 1px; text-underline-offset: 3px; } body.rtcg-legal-page .entry-content.single-content a:hover, body.rtcg-legal-page .entry-content.single-content a:focus-visible { color: var(--global-palette3, #102a43); text-decoration-color: currentColor; } body.rtcg-legal-page .entry-content.single-content strong { color: var(--global-palette3, #102a43); } body.rtcg-legal-page .entry-content.single-content table { width: 100%; margin: 24px 0; overflow: hidden; border: 1px solid var(--global-palette7, #dce3ea); border-radius: 12px; border-collapse: separate; border-spacing: 0; font-size: 0.94em; } body.rtcg-legal-page .entry-content.single-content th { color: #fff; background: var(--global-palette3, #102a43); } body.rtcg-legal-page .entry-content.single-content th, body.rtcg-legal-page .entry-content.single-content td { padding: 13px 15px; border-right: 1px solid var(--global-palette7, #dce3ea); border-bottom: 1px solid var(--global-palette7, #dce3ea); text-align: left; vertical-align: top; } body.rtcg-legal-page .entry-content.single-content tr:last-child td { border-bottom: 0; } body.rtcg-legal-page .entry-content.single-content th:last-child, body.rtcg-legal-page .entry-content.single-content td:last-child { border-right: 0; } @media (max-width: 640px) { body.rtcg-legal-page .content-wrap { padding-right: 16px !important; padding-left: 16px !important; } body.rtcg-legal-page .entry-header { border-radius: 16px 16px 0 0; } body.rtcg-legal-page .entry-content-wrap, body.rtcg-legal-page .entry-content.single-content { border-radius: 0 0 16px 16px; } body.rtcg-legal-page .entry-content.single-content { font-size: 15px; line-height: 1.7; } body.rtcg-legal-page .entry-content.single-content table { display: block; overflow-x: auto; } } @media (prefers-reduced-motion: reduce) { #secondary .wc-block-product-filters *, #secondary .wc-block-product-filters *::before { transition: none !important; } } /* Aviso de reposición: el plugin conserva su comportamiento y estos estilos * solo armonizan su plantilla nativa con la card de compra de la ficha. */ body.single-product.rtcg-product-page-enhancements .summary .cwginstock-subscribe-form { margin: 14px 0 0; border: 1px solid var(--global-palette7); border-left: 4px solid var(--global-palette-btn-bg); border-radius: 12px; background: #f7fafc; overflow: hidden; } body.single-product.rtcg-product-page-enhancements .summary .cwginstock-panel-primary, body.single-product.rtcg-product-page-enhancements .summary .cwginstock-panel-heading, body.single-product.rtcg-product-page-enhancements .summary .cwginstock-panel-body { margin: 0; border: 0; background: transparent; box-shadow: none; } body.single-product.rtcg-product-page-enhancements .summary .cwginstock-panel-heading { padding: 14px 16px 0; } body.single-product.rtcg-product-page-enhancements .summary .cwginstock-panel-heading h4 { margin: 0; color: var(--global-palette3); font-size: 0.92rem; font-weight: 750; line-height: 1.35; } body.single-product.rtcg-product-page-enhancements .summary .cwginstock-panel-body { padding: 12px 16px 16px; } body.single-product.rtcg-product-page-enhancements .summary .cwginstock-panel-body .row, body.single-product.rtcg-product-page-enhancements .summary .cwginstock-panel-body [class*='col-md-'] { width: auto; margin: 0; padding: 0; } body.single-product.rtcg-product-page-enhancements .summary .cwginstock-subscribe-form input[type='text'], body.single-product.rtcg-product-page-enhancements .summary .cwginstock-subscribe-form input[type='email'] { min-height: 42px; margin: 0 0 8px; padding: 9px 11px; border: 1px solid var(--global-palette6); border-radius: 8px; background: #fff; color: var(--global-palette3); font: inherit; text-align: left !important; } body.single-product.rtcg-product-page-enhancements .summary .cwg_iagree_checkbox { margin: 2px 0 10px; color: var(--global-palette4); font-size: 0.75rem; line-height: 1.4; } body.single-product.rtcg-product-page-enhancements .summary .cwg_iagree_checkbox input { margin-right: 5px; } body.single-product.rtcg-product-page-enhancements .summary .cwg_iagree_checkbox a { color: var(--global-palette3); font-weight: 700; text-decoration-color: var(--global-palette-btn-bg); } body.single-product.rtcg-product-page-enhancements .summary .cwgstock_button { width: 100%; min-height: 42px; padding: 9px 14px; border: 0; border-radius: 8px; background: var(--global-palette-btn-bg); color: var(--global-palette-btn); font: inherit; font-size: 0.84rem; font-weight: 750; } body.single-product.rtcg-product-page-enhancements .summary .cwgstock_button:hover, body.single-product.rtcg-product-page-enhancements .summary .cwgstock_button:focus-visible { background: var(--global-palette-btn-bg-hover); color: var(--global-palette-btn-hover); } body.single-product.rtcg-product-page-enhancements .summary .cwgstock_output { margin-top: 9px; color: var(--global-palette3); font-size: 0.82rem; line-height: 1.4; } @media (min-width: 1025px) { /* El JS del catálogo calcula el borde inferior real de la cabecera sticky (incluidos banners que aparezcan o desaparezcan). Cuando alcanza ese punto, el panel se fija y solo esta lista desplaza. */ .has-sticky-sidebar #secondary .sidebar-inner-wrap:not(.rtcg-catalog-filters--fixed):not(.rtcg-catalog-filters--docked) { height: calc(100vh - 32px) !important; max-height: calc(100vh - 32px) !important; overflow: hidden; position: relative !important; top: auto !important; } .has-sticky-sidebar #secondary .sidebar-inner-wrap:not(.rtcg-catalog-filters--fixed):not(.rtcg-catalog-filters--docked) > .widget, .has-sticky-sidebar #secondary .sidebar-inner-wrap:not(.rtcg-catalog-filters--fixed):not(.rtcg-catalog-filters--docked) .wc-block-product-filters.barra-lateral-1, .has-sticky-sidebar #secondary .sidebar-inner-wrap:not(.rtcg-catalog-filters--fixed):not(.rtcg-catalog-filters--docked) .wc-block-product-filters__overlay, .has-sticky-sidebar #secondary .sidebar-inner-wrap:not(.rtcg-catalog-filters--fixed):not(.rtcg-catalog-filters--docked) .wc-block-product-filters__overlay-wrapper, .has-sticky-sidebar #secondary .sidebar-inner-wrap:not(.rtcg-catalog-filters--fixed):not(.rtcg-catalog-filters--docked) .wc-block-product-filters__overlay-dialog { display: flex; flex: 1 1 auto; height: 100%; min-height: 0; } .has-sticky-sidebar #secondary .sidebar-inner-wrap:not(.rtcg-catalog-filters--fixed):not(.rtcg-catalog-filters--docked) .wc-block-product-filters__overlay-content { min-height: 0; overflow-y: auto; padding-right: 8px; scrollbar-color: var(--global-palette6) transparent; scrollbar-width: thin; } #secondary { position: relative; } #secondary .sidebar-inner-wrap.rtcg-catalog-filters--fixed { height: calc(100vh - var(--rtcg-catalog-filters-top) - 20px) !important; max-height: calc(100vh - var(--rtcg-catalog-filters-top) - 20px) !important; overflow: hidden; position: fixed !important; top: var(--rtcg-catalog-filters-top) !important; width: var(--rtcg-catalog-filters-width); z-index: 20; } #secondary .sidebar-inner-wrap.rtcg-catalog-filters--docked { bottom: 0; height: calc(100vh - var(--rtcg-catalog-filters-top) - 20px) !important; max-height: calc(100vh - var(--rtcg-catalog-filters-top) - 20px) !important; overflow: hidden; position: absolute !important; top: auto !important; width: var(--rtcg-catalog-filters-width); z-index: 20; } #secondary .sidebar-inner-wrap.rtcg-catalog-filters--fixed > .widget, #secondary .sidebar-inner-wrap.rtcg-catalog-filters--docked > .widget { display: flex; height: 100%; margin-bottom: 0; min-height: 0; } #secondary .sidebar-inner-wrap.rtcg-catalog-filters--fixed .wc-block-product-filters.barra-lateral-1, #secondary .sidebar-inner-wrap.rtcg-catalog-filters--docked .wc-block-product-filters.barra-lateral-1, #secondary .sidebar-inner-wrap.rtcg-catalog-filters--fixed .wc-block-product-filters__overlay, #secondary .sidebar-inner-wrap.rtcg-catalog-filters--docked .wc-block-product-filters__overlay, #secondary .sidebar-inner-wrap.rtcg-catalog-filters--fixed .wc-block-product-filters__overlay-wrapper, #secondary .sidebar-inner-wrap.rtcg-catalog-filters--docked .wc-block-product-filters__overlay-wrapper, #secondary .sidebar-inner-wrap.rtcg-catalog-filters--fixed .wc-block-product-filters__overlay-dialog, #secondary .sidebar-inner-wrap.rtcg-catalog-filters--docked .wc-block-product-filters__overlay-dialog { display: flex; flex: 1 1 auto; height: 100%; min-height: 0; } #secondary .sidebar-inner-wrap.rtcg-catalog-filters--fixed .wc-block-product-filters.barra-lateral-1, #secondary .sidebar-inner-wrap.rtcg-catalog-filters--docked .wc-block-product-filters.barra-lateral-1 { box-sizing: border-box; height: 100% !important; max-height: 100%; overflow: hidden; } #secondary .sidebar-inner-wrap.rtcg-catalog-filters--fixed .wc-block-product-filters__overlay-content, #secondary .sidebar-inner-wrap.rtcg-catalog-filters--docked .wc-block-product-filters__overlay-content { min-height: 0; overflow-y: auto; padding-right: 8px; scrollbar-color: var(--global-palette6) transparent; scrollbar-width: thin; } } @media (max-width: 600px) { #secondary .wc-block-product-filters.barra-lateral-1 { background: transparent !important; border: 0; box-shadow: none; padding: 0; } #secondary .wc-block-product-filters .wc-block-product-filters__open-overlay { background: #101935; border-radius: 10px; color: var(--global-palette9); justify-content: center; padding: 12px 16px; width: 100%; } #secondary .wc-block-product-filters .wc-block-product-filters__apply { background: var(--global-palette14); border-radius: 10px; color: var(--global-palette9); padding: 12px 16px; } } /* ---- Cabecera cromática de los archivos de catálogo ---- */ .woocommerce.archive #primary .product-archive-title { background: #101935; border-radius: 14px 14px 0 0; margin-bottom: 0; padding: 20px 24px; } .woocommerce.archive #primary .product-archive-title .archive-title { color: var(--global-palette9); margin: 0; } .woocommerce.archive #primary .kadence-shop-top-row { align-items: center; background: var(--global-palette9); border: 1px solid var(--global-palette7); border-radius: 0 0 14px 14px; margin-bottom: 28px; padding: 14px 18px; } .woocommerce.archive #primary .woocommerce-result-count { color: var(--global-palette5); margin: 0; } .woocommerce.archive #primary .woocommerce-ordering .orderby { background: var(--global-palette8); border: 1px solid var(--global-palette7); border-radius: 8px; color: var(--global-palette4); padding: 9px 34px 9px 12px; } .woocommerce.archive #primary .kadence-toggle-shop-layout { background: var(--global-palette8); border: 1px solid var(--global-palette7); color: var(--global-palette5); } .woocommerce.archive #primary .kadence-toggle-shop-layout.toggle-active { background: var(--global-palette14); border-color: var(--global-palette14); color: var(--global-palette9); } .woocommerce.archive ul.products li.product .onsale { background: var(--global-palette14) !important; border-radius: 999px; color: var(--global-palette9) !important; padding: 6px 10px; } /* Producto preparado pero aún no disponible: misma escala visual que * «Oferta», manteniendo la semántica de stock de WooCommerce. */ .woocommerce .stock.rtcg-product-upcoming, .woocommerce .rtcg-product-upcoming.woo-custom-stock-status, .rtcg-product-upcoming--badge { display: inline-flex !important; align-items: center; justify-content: center; width: fit-content; min-height: 28px; margin: 0 !important; padding: 6px 10px !important; border: 0 !important; border-radius: 999px !important; background: var(--rtcg-upcoming-product-status-background, var(--global-palette14)) !important; color: var(--rtcg-upcoming-product-status-text, var(--global-palette9)) !important; font-size: 0.72rem; font-weight: 750; line-height: 1; letter-spacing: 0.01em; box-shadow: none; } /* En tarjetas, «Próximamente» se ancla por separado de Oferta. Estas reglas * no dependen de .woocommerce: la home usa Product Collection y otros bloques * que no añaden ese wrapper. */ ul.products li.product .woocommerce-loop-product__link > .rtcg-product-upcoming--badge, .wc-block-components-product-image .rtcg-product-upcoming--badge { position: absolute; top: auto; right: auto; bottom: var(--rtcg-space-2); left: var(--rtcg-space-2) !important; z-index: 3; min-height: 24px; padding: 4px 8px !important; font-size: 0.64rem; } ul.products li.product .woocommerce-loop-product__link > .rtcg-product-upcoming--badge--top-right, .wc-block-components-product-image .rtcg-product-upcoming--badge--top-right { top: var(--rtcg-space-2); right: var(--rtcg-space-2); bottom: auto; left: auto !important; } ul.products li.product .woocommerce-loop-product__link { position: relative; } .wc-block-components-product-image { position: relative; } /* Productos Premium: la tarjeta completa recibe el tratamiento dorado. El * marcador dentro de la imagen se conserva como ancla para Product Collection, * pero no dibuja un segundo borde sobre la fotografía. */ ul.products li.product .woocommerce-loop-product__link > .rtcg-product-premium-frame, .wc-block-components-product-image > .rtcg-product-premium-frame { display: none; } ul.products li.product.rtcg-product-premium-card, .wc-block-product:has(.rtcg-product-premium-frame), .recommended-products .wc-block-product-template > .wc-block-product:has(.rtcg-product-premium-frame) { box-sizing: border-box; border: 3px solid #c99b2a !important; border-radius: 16px; background: linear-gradient(145deg, #d9e6f3, #f2f6fb 43%, #cbdced); box-shadow: 0 0 0 1px rgba(158, 114, 18, 0.76), 0 14px 36px rgba(187, 137, 23, 0.46), 0 0 38px rgba(212, 175, 55, 0.58), 0 0 72px rgba(212, 175, 55, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important; transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; } /* Kadence coloca título, precio y CTA dentro de este panel blanco. Es el * elemento que debe recibir el fondo navy para que el tratamiento se perciba * en la tarjeta completa, no solo en el espacio que deja la imagen. */ ul.products li.product.rtcg-product-premium-card { overflow: hidden; } /* Los Product Collection del carrito no pasan por `ul.products`; el borde * dorado vive en la card, así que también hay que recortar su contenido para * que la imagen respete las esquinas redondeadas. */ .wc-block-product:has(.rtcg-product-premium-frame), .recommended-products .wc-block-product-template > .wc-block-product:has(.rtcg-product-premium-frame) { overflow: hidden; } ul.products li.product.rtcg-product-premium-card .product-details.content-bg { background: linear-gradient(145deg, #d9e6f3, #f2f6fb 43%, #cbdced) !important; } ul.products li.product.rtcg-product-premium-card:hover, .wc-block-product:has(.rtcg-product-premium-frame):hover, .recommended-products .wc-block-product-template > .wc-block-product:has(.rtcg-product-premium-frame):hover { border-color: #e2bd50 !important; box-shadow: 0 0 0 1px rgba(158, 114, 18, 0.9), 0 20px 44px rgba(187, 137, 23, 0.6), 0 0 52px rgba(226, 189, 80, 0.72), 0 0 96px rgba(212, 175, 55, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important; transform: translateY(-2px); } ul.products li.product.rtcg-product-premium-card .woocommerce-loop-product__title, ul.products li.product.rtcg-product-premium-card .woocommerce-loop-product__title a, .wc-block-product:has(.rtcg-product-premium-frame) .wc-block-components-product-title, .wc-block-product:has(.rtcg-product-premium-frame) .wc-block-components-product-title a { color: #d0a52d !important; font-weight: 800; letter-spacing: 0.01em; -webkit-text-stroke: 1.4px #101935; paint-order: stroke fill; text-shadow: 0 1px 1px rgba(9, 18, 38, 0.72); } ul.products li.product .onsale, .wc-block-components-product-sale-badge { z-index: 3; } /* El precio alternativo se muestra solo a quien todavía no puede canjearlo. * Quien sí tiene saldo suficiente recibe directamente el precio Premium de * WooCommerce, sin duplicar ni tachar el precio normal. */ .rtcg-product-premium-price { display: inline-flex; align-items: baseline; gap: 7px; width: fit-content; max-width: 100%; margin: 5px 0 0; padding: 5px 8px; border: 1px solid rgba(212, 175, 55, 0.48); border-radius: 8px; background: rgba(255, 248, 220, 0.65); color: #705712; font-size: 0.8rem; font-weight: 700; line-height: 1.2; } .rtcg-product-premium-price__label { font-size: 0.69rem; font-weight: 750; letter-spacing: 0.02em; text-transform: uppercase; } .rtcg-product-premium-price__amount { color: var(--global-palette3); font-size: 0.9rem; font-weight: 800; white-space: nowrap; } /* Ficha de Producto Premium: la galería y, sobre todo, el panel de compra * reutilizan el marco dorado, el navy suave y el halo de las tarjetas. */ body.single-product.rtcg-product-premium-pdp .woocommerce div.product .woocommerce-product-gallery { box-sizing: border-box; overflow: hidden; padding: 8px; border: 3px solid #c99b2a !important; border-radius: 18px; background: linear-gradient(145deg, #d9e6f3, #f2f6fb 43%, #cbdced); box-shadow: 0 0 0 1px rgba(158, 114, 18, 0.76), 0 16px 40px rgba(187, 137, 23, 0.44), 0 0 56px rgba(212, 175, 55, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.9); } body.single-product.rtcg-product-premium-pdp .woocommerce div.product .woocommerce-product-gallery__wrapper, body.single-product.rtcg-product-premium-pdp .woocommerce div.product .woocommerce-product-gallery__image img { border-radius: 10px; } body.single-product.rtcg-product-premium-pdp .woocommerce div.product .summary.entry-summary, body.single-product.rtcg-product-premium-pdp .woocommerce div.product .entry.entry-summary { position: relative; box-sizing: border-box; overflow: hidden; padding: clamp(20px, 2.4vw, 32px); border: 3px solid #c99b2a !important; border-radius: 18px; background: radial-gradient(circle at 100% 0, rgba(255, 232, 147, 0.48), transparent 32%), linear-gradient(145deg, #d9e6f3, #f2f6fb 47%, #cbdced); box-shadow: 0 0 0 1px rgba(158, 114, 18, 0.76), 0 16px 40px rgba(187, 137, 23, 0.44), 0 0 56px rgba(212, 175, 55, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.92); } body.single-product.rtcg-product-premium-pdp .summary.entry-summary .product_title, body.single-product.rtcg-product-premium-pdp .entry.entry-summary .product_title { position: relative; margin-top: 12px; color: #d0a52d; font-weight: 800; letter-spacing: 0.01em; -webkit-text-stroke: 1.4px #101935; paint-order: stroke fill; text-shadow: 0 2px 1px rgba(9, 18, 38, 0.68); } .rtcg-pdp-premium-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border: 1px solid rgba(158, 114, 18, 0.85); border-radius: 999px; background: #101f3a; box-shadow: 0 4px 12px rgba(143, 102, 16, 0.28); color: #ffe6a0; font-size: 0.73rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1.15; text-transform: uppercase; } body.single-product.rtcg-product-premium-pdp .summary.entry-summary > .price, body.single-product.rtcg-product-premium-pdp .entry.entry-summary > .price { margin: 16px 0 10px; color: #101935; } body.single-product.rtcg-product-premium-pdp .summary.entry-summary > .price .woocommerce-Price-amount, body.single-product.rtcg-product-premium-pdp .entry.entry-summary > .price .woocommerce-Price-amount { color: #101935; font-size: 1.34em; font-weight: 800; } .rtcg-pdp-premium-offer { margin: 14px 0 18px; padding: 14px 15px; border: 1px solid rgba(180, 132, 19, 0.8); border-radius: 12px; background: linear-gradient(130deg, #fff8dc, #e9f1fa); box-shadow: 0 7px 18px rgba(180, 132, 19, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.86); color: #18233c; } .rtcg-pdp-premium-offer__header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .rtcg-pdp-premium-offer__eyebrow { display: inline-flex; align-items: center; gap: 5px; color: #705712; font-size: 0.72rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; } .rtcg-pdp-premium-offer__price { color: #101935; font-size: 1.36rem; line-height: 1; white-space: nowrap; } .rtcg-pdp-premium-offer p { margin: 8px 0 3px; font-size: 0.9rem; } .rtcg-pdp-premium-offer__copy { display: block; color: #4c5870; font-size: 0.78rem; line-height: 1.35; } .rtcg-pdp-premium-offer--active { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-color: #c99b2a; background: linear-gradient(130deg, #fff3c8, #dceaf7); } .rtcg-pdp-premium-offer--active .rtcg-pdp-premium-offer__copy { max-width: 30rem; text-align: right; } body.single-product.rtcg-product-premium-pdp .summary.entry-summary .single_add_to_cart_button.button.alt, body.single-product.rtcg-product-premium-pdp .entry.entry-summary .single_add_to_cart_button.button.alt { border: 2px solid #b78617; background: linear-gradient(135deg, #101f3a, #1d416c); box-shadow: 0 7px 18px rgba(180, 132, 19, 0.36); color: #fff6d5; } body.single-product.rtcg-product-premium-pdp .summary.entry-summary .single_add_to_cart_button.button.alt:hover, body.single-product.rtcg-product-premium-pdp .entry.entry-summary .single_add_to_cart_button.button.alt:hover, body.single-product.rtcg-product-premium-pdp .summary.entry-summary .single_add_to_cart_button.button.alt:focus-visible, body.single-product.rtcg-product-premium-pdp .entry.entry-summary .single_add_to_cart_button.button.alt:focus-visible { border-color: #e2bd50; background: linear-gradient(135deg, #17335a, #25537f); box-shadow: 0 10px 25px rgba(180, 132, 19, 0.52), 0 0 24px rgba(212, 175, 55, 0.26); color: #fff; } @media (max-width: 767px) { body.single-product.rtcg-product-premium-pdp .woocommerce div.product .woocommerce-product-gallery { padding: 6px; border-width: 2px; border-radius: 14px; } body.single-product.rtcg-product-premium-pdp .woocommerce div.product .summary.entry-summary, body.single-product.rtcg-product-premium-pdp .woocommerce div.product .entry.entry-summary { padding: 20px; border-width: 3px !important; border-radius: 14px; } .rtcg-pdp-premium-offer--active, .rtcg-pdp-premium-offer__header { align-items: flex-start; flex-direction: column; gap: 7px; } .rtcg-pdp-premium-offer--active .rtcg-pdp-premium-offer__copy { text-align: left; } } /* Resumen de las ganancias y el canje del pedido actual. El mismo bloque se * renderiza en el mini-carrito, carrito, checkout y detalle del pedido para * que el descuento provisional no quede oculto en ningún punto del flujo. */ .rtcg-premium-token-summary { margin: 14px 0; padding: 12px 14px; border: 1px solid rgba(201, 155, 42, 0.72); border-radius: 10px; background: linear-gradient(135deg, #fff9e5, #edf3fb); color: #18233c; font-size: 0.86rem; line-height: 1.5; } .rtcg-premium-token-summary strong { display: block; margin-bottom: 3px; color: #705712; font-weight: 800; } .rtcg-premium-token-summary--mini { margin: 12px 0 10px; padding: 10px 12px; font-size: 0.78rem; } .rtcg-premium-token-summary--order h2 { margin: 0 0 5px; color: #705712; font-size: 1.05rem; } .rtcg-premium-token-summary--order p { margin: 0; } /* Panel del resumen en la página del carrito (bloque woocommerce/cart). Es * lo primero que se ve, con desglose visible en móvil y escritorio. */ .rtcg-premium-token-summary--cart { margin: 0 auto 18px; padding: 16px 18px; max-width: 1200px; } .rtcg-premium-token-summary--cart strong { font-size: 1.05rem; margin-bottom: 8px; } .rtcg-token-breakdown { list-style: none; margin: 0 0 10px; padding: 0; } .rtcg-token-breakdown li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(112, 87, 18, 0.16); } .rtcg-token-breakdown li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; } .rtcg-token-breakdown__earn span:last-child { color: #1f7a3d; } .rtcg-token-breakdown__redeem span:last-child { color: #a5442a; } .rtcg-token-breakdown__total { border-bottom: none; margin-top: 2px; font-weight: 800; color: #705712; } .rtcg-token-breakdown__total span:last-child { font-weight: 800; } .rtcg-token-breakdown__note { margin: 0; font-size: 0.82rem; opacity: 0.92; } /* El estado textual original se conserva en PDP, pero no debe duplicar el * badge superpuesto dentro de una tarjeta de producto. */ ul.products li.product .rtcg-product-upcoming:not(.rtcg-product-upcoming--badge), .wc-block-product .rtcg-product-upcoming:not(.rtcg-product-upcoming--badge) { display: none !important; } @media (max-width: 600px) { .woocommerce.archive #primary .product-archive-title { border-radius: 12px 12px 0 0; padding: 16px 18px; } .woocommerce.archive #primary .kadence-shop-top-row { align-items: stretch; border-radius: 0 0 12px 12px; gap: 12px; margin-bottom: 20px; padding: 14px; } } /* Caja general del aviso de envío gratuito */ .woocommerce-info .fs-free-shipping-notice-and-button-wrapper { width: 61%; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } /* Zona de texto + barra */ .woocommerce-info .fs-free-shipping-notice-text-and-progress-bar-wrapper { flex: 1 1 360px; min-width: 0; } .woocommerce-info .fs-free-shipping-notice-contents { width: 100%; } /* Texto principal */ .woocommerce-info .fs-free-shipping-notice-text { margin-bottom: 12px; font-size: 18px; line-height: 1.4; } /* Evita que el precio y el símbolo € se partan */ .woocommerce-info .fs-free-shipping-notice-text .woocommerce-Price-amount, .woocommerce-info .fs-free-shipping-notice-progress-bar-wrapper .woocommerce-Price-amount { white-space: nowrap; display: inline-flex; align-items: baseline; gap: 2px; } .woocommerce-info .woocommerce-Price-currencySymbol { display: inline !important; } /* Layout de valores + barra */ .woocommerce-info .fs-free-shipping-notice-progress-bar-wrapper { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; width: 100%; } /* Valores 0€ y 150€ */ .woocommerce-info .fs-free-shipping-notice-opening-value, .woocommerce-info .fs-free-shipping-notice-closing-value { font-size: 14px; white-space: nowrap; } /* Barra de fondo */ .woocommerce-info .fs-free-shipping-notice-progress-bar { position: relative; width: 100%; min-width: 120px; height: 12px; background: var(--global-palette7); border-radius: 999px; overflow: hidden; } /* ---- BP-008/UX-013: progreso alineado a la paleta de marca ya aprobada ---- El color hardcodeado #1f6f5b (verde-azulado, sin relacion con la paleta naranja/navy del sitio) se sustituye por var(--global-palette14), el mismo naranja de marca ya usado en CTAs/pildoras de estado en todo el sitio (nivel 2 de la prioridad ya acordada: config nativa no aplica aqui - el plugin no expone un color propio -, asi que se referencia el token ya existente en vez de hardcodear un hex nuevo). */ .woocommerce-info .fs-free-shipping-notice-progress-bar span { display: block; height: 100%; background: var(--global-palette14); border-radius: 999px; min-width: 3px; } @media (max-width: 768px) { body.woocommerce.archive .content-container.site-container, body.post-type-archive-product .content-container.site-container, body.tax-product_cat .content-container.site-container, body.tax-product_tag .content-container.site-container { display: flex; flex-direction: column; } body.woocommerce.archive #secondary, body.post-type-archive-product #secondary, body.tax-product_cat #secondary, body.tax-product_tag #secondary { order: -1; width: 100%; margin-bottom: 24px; } body.woocommerce.archive #primary, body.post-type-archive-product #primary, body.tax-product_cat #primary, body.tax-product_tag #primary { order: 1; width: 100%; } } @media (max-width: 768px) { .wc-block-product-filters__overlay-footer { display: none !important; } .wc-block-product-filters__overlay-content { padding-bottom: 90px !important; } } /** * REZA TCG — Ampliación del contenedor de los listados de WooCommerce * ========================================================================== * * OBJETIVO * -------- * El tema Kadence establece un ancho máximo sobre el contenedor principal: * *
* * Ese "max-width" limita el espacio horizontal disponible para: * * - La barra lateral de filtros. * - La cuadrícula de productos. * - Los controles de ordenación. * - La navegación y paginación del catálogo. * * Esta regla elimina ese límite de anchura exclusivamente en las páginas * destinadas a mostrar listados o archivos de productos de WooCommerce. * * * PÁGINAS EN LAS QUE SE APLICARÁ * ------------------------------ * * La regla cubrirá, entre otras: * * - La página principal de la tienda. * - Las categorías de producto. * - Las subcategorías de producto. * - Las etiquetas de producto. * - Los archivos de atributos globales de WooCommerce. * - Las páginas de expansión basadas en el atributo "pa_expansion". * - Otros atributos de producto que se creen en el futuro. * * Algunos ejemplos de clases de WordPress que quedarán cubiertas: * * body.woocommerce-shop * body.tax-product_cat * body.tax-product_tag * body.tax-pa_expansion * body.tax-pa_idioma * body.tax-pa_marca * * No es necesario escribir una regla individual para cada taxonomía porque * todas estas páginas comparten dos clases suficientemente específicas: * * .woocommerce * .archive * * * PÁGINAS EN LAS QUE NO SE APLICARÁ * --------------------------------- * * Al requerirse también la clase ".archive", la regla no debería afectar a: * * - Las fichas individuales de producto. * - El carrito. * - La página de finalizar compra. * - La página "Mi cuenta". * - Las páginas normales de WordPress. * - Las entradas del blog. * - La página de inicio. * * * EXPLICACIÓN DEL SELECTOR * ------------------------ * * body.woocommerce.archive * * Selecciona el elemento únicamente cuando contiene simultáneamente: * * - La clase "woocommerce". * - La clase "archive". * * No existe ningún espacio entre ".woocommerce" y ".archive" porque ambas * clases deben encontrarse en el mismo elemento . * * * .content-container.site-container * * Selecciona el elemento que contiene simultáneamente: * * - La clase "content-container". * - La clase "site-container". * * Tampoco existe un espacio entre las dos clases porque pertenecen al mismo * elemento HTML. * * * El selector completo significa: * * "Dentro de una página que sea un archivo de WooCommerce, selecciona el * elemento que tenga a la vez las clases content-container y site-container". */ body.woocommerce.archive .content-container.site-container { /** * Elimina el límite máximo de anchura definido por Kadence. * * La propiedad original no se borra físicamente de los archivos del tema. * En su lugar, se sobrescribe mediante "none", que indica que el elemento * no debe tener ningún ancho máximo. * * Se utiliza "!important" para asegurarnos de que esta personalización * prevalezca sobre: * * - Los estilos generales del tema Kadence. * - Los estilos generados desde el personalizador. * - Las variables CSS de anchura global del tema. * - Otras reglas con una especificidad similar. */ max-width: none !important; /** * Permite que el contenedor utilice todo el ancho disponible de su * elemento padre. * * Aunque "max-width: none" suele ser suficiente, Kadence podría mantener * una propiedad "width" o una anchura calculada. Esta declaración evita * que el contenedor continúe limitado por una anchura inferior. */ width: 100% !important; } /* ========================================================= JERARQUÍA VISUAL EN EL FILTRO DE CATEGORÍA (PLP) ========================================================= El bloque nativo de WooCommerce "Filtrar por categoría" (product-filter-taxonomy) SÍ calcula la profundidad de cada categoría respecto a su padre, pero en la version instalada ese dato solo se guarda como JSON en el atributo "data-wp-context" de cada fila (usado por la Interactivity API para logica de visibilidad), sin anadir ninguna clase CSS ni variable que permita aplicar sangria por selector normal. Como no existe un gancho de clase, se usa un selector de atributo que busca el propio JSON incrustado - fragil en apariencia pero estable en la practica, ya que WooCommerce genera ese JSON de forma determinista en cada carga. Esto NO cambia el orden ni la relacion padre/hijo, que ya viven en la base de datos. Se cubre hasta profundidad 10 porque WooCommerce mismo corta la recursion de categorias en ese nivel (limite fijo en flatten_terms_list() de ProductFilterTaxonomy.php, pensado para evitar problemas de memoria) - no tiene sentido cubrir mas niveles de los que WooCommerce llegaria a generar nunca. */ .wc-block-product-filter-checkbox-list__item[data-wp-context*='"depth":1,'] { padding-left: 20px; } .wc-block-product-filter-checkbox-list__item[data-wp-context*='"depth":2,'] { padding-left: 40px; } .wc-block-product-filter-checkbox-list__item[data-wp-context*='"depth":3,'] { padding-left: 60px; } .wc-block-product-filter-checkbox-list__item[data-wp-context*='"depth":4,'] { padding-left: 80px; } .wc-block-product-filter-checkbox-list__item[data-wp-context*='"depth":5,'] { padding-left: 100px; } .wc-block-product-filter-checkbox-list__item[data-wp-context*='"depth":6,'] { padding-left: 120px; } .wc-block-product-filter-checkbox-list__item[data-wp-context*='"depth":7,'] { padding-left: 140px; } .wc-block-product-filter-checkbox-list__item[data-wp-context*='"depth":8,'] { padding-left: 160px; } .wc-block-product-filter-checkbox-list__item[data-wp-context*='"depth":9,'] { padding-left: 180px; } .wc-block-product-filter-checkbox-list__item[data-wp-context*='"depth":10,'] { padding-left: 200px; } /* ========================================================= COLOR DE HOVER DE LOS CHIPS DE FILTRO (ej. "Expansión") ========================================================= El estado "seleccionado" usa el soporte de color nativo del bloque (atributos selectedChipBackground/selectedChipText del propio bloque, guardados en el contenido del widget apuntando a los slugs de la paleta del tema - palette14/palette9 - no requiere CSS aqui). El estado ":hover" en cambio no tiene ningun atributo/variable nativa equivalente en este bloque, asi que sigue siendo necesario fijarlo por CSS - pero SI referenciando las variables de paleta ya existentes (palette9/palette3) en vez de repetir sus valores en hex, para que un futuro cambio de paleta se propague aqui tambien sin tener que tocar este fichero: blanco, para no competir con el naranja de marca (reservado para la accion real, es decir, el estado seleccionado). El estado deshabilitado (combinacion de filtros no disponible) ya se muestra en rojo correctamente sin tocarlo aqui. */ .wc-block-product-filter-chips__item:not(:disabled):hover { background: var(--global-palette9); border-color: var(--global-palette9); color: var(--global-palette3); } /* ============================================================ SISTEMA DE DISEÑO VISUAL — TOKENS BASE (BP-011) ============================================================ Fuente: optimizer/design/visual-system/LATEST. Prefijo "rtcg-" para no chocar con las variables propias de Kadence (--global-paletteN) ni de WooCommerce Blocks (--wc-*). */ :root { --rtcg-radius-sm: 6px; --rtcg-radius-md: 8px; --rtcg-radius-lg: 16px; --rtcg-space-1: 4px; --rtcg-space-2: 8px; --rtcg-space-3: 16px; --rtcg-space-4: 24px; --rtcg-space-5: 32px; --rtcg-space-6: 48px; --rtcg-space-7: 64px; --rtcg-space-8: 96px; /* Sombra reservada a hover/capas flotantes, nunca en reposo (UX-017) */ --rtcg-shadow-xs: 0 1px 2px rgba(26, 32, 44, 0.05); --rtcg-shadow-sm: 0 1px 2px rgba(26, 32, 44, 0.06); --rtcg-shadow-card-hover: 0 8px 20px rgba(26, 32, 44, 0.10); --rtcg-border-default: 1px solid var(--global-palette7); --rtcg-divider: 1px solid rgba(113, 128, 150, 0.24); } /* BP-012: contraste WCAG del botón primario (naranja de marca). NOTA (2026-08-04): esto se corrigió originalmente sobreescribiendo por CSS solo el slot --global-palette-btn-bg, dejando el swatch bruto de palette14 sin tocar - eso causó que otros elementos que referencian palette14 directamente (bloque kadence/singlebtn "Explorar tienda", chip seleccionado del filtro "Expansión") siguieran mostrando el naranja original mientras los botones nativos ya mostraban el corregido - una inconsistencia real detectada por el dueño. Corregido de raíz: el swatch palette14 en `kadence_global_palette` (configuración del tema, no CSS) se actualizó de #F7630C a #C64F00 (4.65:1 con texto blanco, calculo real de luminancia WCAG). Todo lo que referencia palette14 - incluido --global-palette-btn-bg via el ajuste nativo del customizer "Buttons > Background Colors" - hereda el valor corregido automaticamente, sin necesitar ningun CSS aqui. */ /* ---- BP-011: tarjeta de producto (listado de categoría) ---- .entry/.loop-entry es la MISMA clase que BP-020 despoja de su sombra estática de Kadence (ver más abajo) - aquí se fija el borde/radio permanentes y la sombra únicamente al hover, según la filosofía "plano en reposo, se eleva al interactuar" (UX-017). */ .products li.product.entry { border: var(--rtcg-border-default); border-radius: var(--rtcg-radius-md); transition: transform 0.2s ease, box-shadow 0.2s ease; } .products li.product.entry:hover { box-shadow: var(--rtcg-shadow-card-hover) !important; transform: translateY(-2px); } /* ---- BP-011: foco visible sitewide (UX-021) ---- La inspección en vivo del sistema de diseño no encontró ningún estado de foco visible existente - posible vacío de accesibilidad real, no solo estético. Color distinto al de hover (azul de marca, no naranja) para que un usuario de teclado distinga foco de hover. */ button:focus-visible, .button:focus-visible, .wp-block-button__link:focus-visible, .wp-element-button:focus-visible, input[type="button"]:focus-visible, input[type="submit"]:focus-visible, a:focus-visible { outline: 2px solid var(--global-palette2); outline-offset: 2px; } /* ---- BP-011: píldora de estado reutilizable ---- Componente base para banners de expansión (disponible ahora/ preventa) y badges de idioma/preventa en tarjeta de producto (UX-009/UX-023) - un solo componente visual para ambos casos, no una implementación distinta por caso de uso. Aún sin consumidor real (fases de marketing/contenido todavía no ejecutadas) - queda lista para cuando esas fases produzcan contenido real. */ .rtcg-status-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 700; color: var(--global-palette9); line-height: 1.3; } .rtcg-status-pill--success { background: var(--global-palette11); } .rtcg-status-pill--info { background: var(--global-palette12); } .rtcg-status-pill--alert { background: var(--global-palette13); } /* ---- BP-013: contraste del gris secundario en metadatos/SKU ---- #718096 (palette6) sobre blanco es 4.02:1 (cálculo real) - no cumple el mínimo de 4.5:1 para texto. Se reserva palette6 para iconos/elementos no textuales (ahí sí cumple el umbral de 3:1 de WCAG 1.4.11) y se usa aquí el tono ya existente en la paleta (palette5, #4A5568, 7.53:1 sobre blanco) específicamente para el texto de metadatos/SKU - no se inventa un color nuevo, se reutiliza un slot de la paleta ya definida. */ .product_meta, .product_meta .sku_wrapper, .product_meta .posted_in, .sku_wrapper, .sku, .posted_in, .woocommerce-price-suffix { color: var(--global-palette5); } /* ---- BP-014: sombra de apoyo en paneles "boxed" flotantes ---- El borde por defecto (#EDF2F7) tiene un contraste casi nulo (1.03-1.13:1, cálculo real) frente al fondo de sitio y frente a la propia tarjeta blanca - insuficiente para que WCAG 1.4.11 considere perceptible el límite de un panel que flota solo, sin otro elemento de separación (dentro de un grid de tarjetas el espaciado ya ayuda, aquí no). Excepción puntual y funcional, no decorativa - no contradice la filosofía "sin sombra en reposo" de UX-017. Uso real hoy: el panel de filtros de categoría, que flota directamente sobre el fondo de sitio sin otro elemento de separación. */ .rtcg-panel-standalone, .barra-lateral-1 { box-shadow: var(--rtcg-shadow-xs); } /* ---- BP-020: eliminar sombra estática permanente de Kadence ---- Kadence aplica box-shadow:0px 15px 25px -10px rgba(0,0,0,.05) de forma fija en reposo a `.entry` (páginas/entradas/404 Y tarjetas de producto, que también llevan esta clase) - contradice "plano en reposo, se eleva al interactuar" (UX-017). La sombra de hover de la tarjeta de producto ya se define arriba de forma explícita; esta regla solo neutraliza el valor estático de Kadence en reposo. */ .entry { box-shadow: none !important; } /* La home termina directamente en el footer: Kadence añade por defecto margen al content-area y padding inferior al entry-content-wrap, que aquí se convierten en franjas vacías entre el último bloque y el footer. */ body.page-id-17 .content-area { margin-bottom: 0; } body.page-id-17 .entry-content-wrap { padding-bottom: 0; } /* ---- BP-003/BP-033: layout de la franja de confianza del home ---- El contenido se construyo con bloques core planos a proposito (sin kadence/iconlist ni markup copiado a mano, ver incidente de corrupcion de bloques ya resuelto) - por defecto core/list se ve como una lista vertical con vinetas, poco profesional para una franja de confianza. Esto NO cambia el contenido/HTML, solo el layout: fila horizontal centrada, sin vinetas, espaciado con la escala ya definida (BP-011), mismo patron visual que cualquier "trust bar" de e-commerce estandar. BP-033 (2026-08-04): reubicada justo antes del grid de producto (antes competia visualmente con el CTA del hero y el banner de expansion) y el parrafo-titulo se elimino del contenido (duplicaba el mensaje de envio gratuito que ya vive en la barra superior sticky, UX-039/BP-021) - la regla ".home-trust-strip p" ya no tiene contenido al que aplicar, se retira. Sin color de texto explicito: el fondo pasó de navy a #F7FAFC (palette8), por lo que el texto hereda el color oscuro por defecto del tema en vez de necesitar blanco forzado. */ .home-trust-strip-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--rtcg-space-2) var(--rtcg-space-5); list-style: none; margin: 0; padding: 0; } .home-trust-strip-list li { font-size: 0.95rem; font-weight: 600; white-space: nowrap; } /* ---- Franja de confianza del home como componente (feature Reza_TCG_Feature_Home_Trust_Strip, shortcode [rtcg_trust_strip]) ---- Sustituye a .home-trust-strip-list (bloques core con vineta "✓") por items con icono lineal propio por mensaje. La densidad (padding vertical), el tamaño de icono y el fondo llegan como custom properties inline desde PHP (ajustables en wp-admin) - aqui van solo los fallbacks. Se pensó mas delgada/minimalista que la anterior (10px de padding vertical por defecto, frente a los 24px del bloque core). */ .rtcg-trust-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--rtcg-space-2) var(--rtcg-space-5); margin: 0; padding: var(--rtcg-trust-py, 10px) 1rem; background: var(--rtcg-trust-bg, transparent); } .rtcg-trust-strip__item { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; font-weight: 600; line-height: 1; white-space: nowrap; } .rtcg-trust-strip__icon { display: inline-flex; flex-shrink: 0; width: var(--rtcg-trust-icon, 18px); height: var(--rtcg-trust-icon, 18px); color: var(--global-palette2); } .rtcg-trust-strip__icon svg { display: block; width: 100%; height: 100%; } /* ---- BP-024: sombra de elevación solo en cabecera fija (sticky) ---- header_sticky es un ajuste nativo del customizer (sin CSS) - lo único que falta es la sombra en el estado fijo, siguiendo la misma filosofía "plano en reposo, se eleva al interactuar/fijarse" de UX-017. La clase item-is-fixed la añade el JS ya empaquetado de Kadence (kadence-navigation), no JS nuevo. */ .site-header-wrap.item-is-fixed { box-shadow: var(--rtcg-shadow-sm); } /* ---- BP-025: contador de carrito como píldora de marca ---- header_cart_show_total es nativo (sin CSS) - esto solo aplica el componente .rtcg-status-pill (BP-011) ya definido, reutilizado en vez de crear un estilo de píldora distinto para este caso. */ .header-cart-total { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--global-palette14); color: var(--global-palette9); font-size: 11px; font-weight: 700; line-height: 1; } /* ---- BP-034: banners de marketing/info (CPT, multi-instancia) ---- Sin equivalente nativo en Kadence (a diferencia del resto de esta pasada de cabecera/pie) - CSS crudo es apropiado aqui (tier 3), no hay control de tema que gestione esto. position:sticky moderno, sin JS de scroll (esa tecnica solo la necesita el sticky header del tema por ser anterior a soporte amplio de position:sticky). Color/ grosor se fijan inline desde PHP (configurables por banner en wp-admin), por eso no aparecen aqui como valores fijos. Puede haber varios banners simultaneos (cada uno su propio elemento, se apilan solos en el orden del DOM) - si varios son "sticky" a la vez (o coinciden con la cabecera sticky de BP-024), el offset acumulado exacto entre ellos no se calcula dinamicamente en esta pasada (cada uno fija top:0 de forma independiente) - ver nota en el codigo PHP, posible refinamiento futuro si se usa esa combinacion en la practica. */ .reza-tcg-banner { position: relative; z-index: 999; display: flex; align-items: center; justify-content: center; gap: var(--rtcg-space-3); padding-left: var(--rtcg-space-5); padding-right: var(--rtcg-space-5); font-size: 0.9rem; text-align: center; } .reza-tcg-banner--sticky { position: sticky; top: 0; } .reza-tcg-banner__content { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--rtcg-space-2); } .reza-tcg-banner__link { text-decoration: underline; color: inherit; font-weight: 700; } .reza-tcg-banner__close { background: transparent; border: 0; color: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 var(--rtcg-space-1); } /* ---- letrero movil (ticker): recorrido continuo sin JS de scroll ---- El contenido se duplica dos veces en el PHP (mismo texto, uno con aria-hidden) para que la animacion, al desplazar el track un 50% de su ancho total, produzca un bucle visualmente continuo sin salto. */ .reza-tcg-banner--ticker .reza-tcg-banner__inner { overflow: hidden; width: 100%; } .reza-tcg-banner__ticker-track { display: inline-flex; white-space: nowrap; animation-name: reza-tcg-banner-ticker; animation-timing-function: linear; animation-iteration-count: infinite; } .reza-tcg-banner--ticker:hover .reza-tcg-banner__ticker-track { animation-play-state: paused; } .reza-tcg-banner__ticker-item { display: inline-flex; align-items: center; gap: var(--rtcg-space-2); padding-right: var(--rtcg-space-6); } @keyframes reza-tcg-banner-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---- BP-026: contraste de texto plano del footer sobre fondo navy ---- Kadence SI trae controles nativos de color para cada ENLACE del footer (footer_navigation_color, footer_social_color, footer_html_link_color, footer_top/middle/bottom_link_colors - ya fijados via theme_mods_kadence, sin CSS) pero NO trae ningun control de color para el texto PLANO sin enlace de los widgets (titulos de columna como "Categorías"/"Ayuda", los items de la franja de confianza del footer, el tagline) - ese texto seguia heredando el gris por defecto del tema (pensado para fondo claro), casi invisible sobre el navy nuevo. Sin control nativo equivalente, CSS es el nivel correcto aqui (nivel 3 de la prioridad ya acordada), acotado a #colophon para no afectar texto plano fuera del footer. */ #colophon { color: var(--global-palette9); } /* Kadence fija un color global por defecto para cada nivel de encabezado (ej. "h4{color:var(--global-palette4)}", un gris oscuro pensado para fondo claro) - una regla de herencia como la de arriba NUNCA gana contra una regla que aplica directamente al elemento (la herencia es siempre la prioridad mas baja en CSS, sin importar especificidad), asi que los titulos de columna del footer ("Categorías"/"Ayuda") seguian en gris pese al fix anterior. Aqui se sube la especificidad con el selector compuesto para ganarle a la regla global de encabezados, acotado a #colophon. */ #colophon h1, #colophon h2, #colophon h3, #colophon h4, #colophon h5, #colophon h6 { color: var(--global-palette9); } /* ---- Footer: listas sin estilo (viñetas dobles / puntos planos) ---- core/list (wp-block-list) siempre trae su viñeta nativa del navegador. La franja de confianza ya antepone su propio símbolo "✓" en el texto (mismo contenido que .home-trust-strip-list, ver arriba), asi que sin list-style:none se veian dos marcadores por linea. Categorías/Ayuda son listas de enlaces simples sin marcador propio, por lo que solo hacia falta quitar el punto por defecto - mismo enfoque de nivel 3 (CSS) que el resto de este bloque de footer, sin control nativo de Kadence para esto. */ .footer-trust-strip-list { display: flex; flex-wrap: wrap; gap: var(--rtcg-space-2) var(--rtcg-space-5); list-style: none; margin: 0; padding: 0; } .footer-trust-strip-list li { display: inline-flex; align-items: center; gap: var(--rtcg-space-1); font-size: 0.9rem; white-space: nowrap; } /* ---- UX-057: icono real en vez del caracter "check" en texto plano ---- Mismo icono (shield_check/kadence-checkbox-alt-svg) y tamano ya usados para "inline con etiquetas/badges" en visual-system seccion 5 (PDP, product_content_element_extras). Kadence lo sirve a 16x16 por defecto; aqui se sube a 22px via CSS, sin duplicar el SVG con otro tamano hardcodeado en el marcado. */ .footer-trust-strip-icon svg { width: 22px; height: 22px; flex-shrink: 0; } .footer-categories ul, .footer-help ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rtcg-space-2); } .footer-categories li, .footer-help li { font-size: 0.9rem; } /* ---- UX-058: etiqueta de columna, distinta del H4 de contenido real ---- Roboto (ya es la fuente de cuerpo del sitio, var(--global-body-font-family), no se hardcodea un nombre de fuente nuevo) en vez de Anton, 12-13px, mayusculas, blanco a ~75% opacidad - rol nuevo de "etiqueta de utilidad de chrome", deliberadamente distinto del H4 Anton de 22px que usa el resto del sitio para titulos de contenido real (brand-guide seccion 2). Incluye el titulo del widget de newsletter (mismo rol de columna, mismo wrapper h4.wp-block-heading que Categorias/Ayuda). */ .footer-categories h4, .footer-help h4, .reza-tcg-footer-newsletter h4 { font-family: var(--global-body-font-family); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(var(--global-palette9rgb), 0.75); } /* ---- UX-059: de-enfatizar copyright + menu legal (fila inferior) ---- 13px (frente a los 17px de cuerpo del resto del sitio) y blanco a ~70% opacidad - es el contenido de menor prioridad del footer (cumplimiento/copyright), nunca al mismo peso que Categorias o la franja de confianza. footer-html = copyright (bottom_1); footer1 = sidebar del menu legal (bottom_2). */ #colophon .footer-html, #colophon .site-footer-bottom-section-2 { font-size: 13px; } #colophon .footer-html, #colophon .footer-html a, #colophon .site-footer-bottom-section-2, #colophon .site-footer-bottom-section-2 a { color: rgba(var(--global-palette9rgb), 0.7); } /* ---- UX-060: padding vertical de filas + margen entre widgets apilados ---- Alineado con la escala ya aprobada (visual-system seccion 3): 24px en filas superior/inferior (eran 30px, fuera de escala), 32px en la fila media (deliberadamente algo mas generosa: tras UX-055/056 concentra el contenido de mayor peso - Categorias y newsletter). El margen entre widgets apilados (30px) baja a 16px - hoy solo aplica a logo+tagline en top_1, el apilamiento Ayuda+Newsletter desaparece por completo con UX-056. No se toca el grid-column-gap/grid-row-gap (30px): no forma parte de lo aprobado en esta pasada. */ .site-top-footer-inner-wrap, .site-bottom-footer-inner-wrap { padding-top: var(--rtcg-space-4); padding-bottom: var(--rtcg-space-4); } .site-middle-footer-inner-wrap { padding-top: var(--rtcg-space-5); padding-bottom: var(--rtcg-space-5); } .site-top-footer-inner-wrap .widget, .site-middle-footer-inner-wrap .widget, .site-bottom-footer-inner-wrap .widget { margin-bottom: var(--rtcg-space-3); } /* ---- BP-002/UX-002: etiqueta de estado sobre la tarjeta de expansion ---- .rtcg-expansion-card-wrap envuelve cada kadence/infobox ya existente (sin tocar su interior) para poder superponer la pildora de estado (.rtcg-status-pill, ya definida en BP-011) en la esquina superior, igual que "disponible ahora"/"preventa" en cualquier tienda online estandar. */ .rtcg-expansion-card-wrap { position: relative; } .rtcg-expansion-badge { position: absolute; top: var(--rtcg-space-3); left: var(--rtcg-space-3); z-index: 2; margin: 0; } .rtcg-expansion-badge-date { position: absolute; top: calc(var(--rtcg-space-3) + 32px); left: var(--rtcg-space-3); z-index: 2; margin: 0; font-size: 13px; font-weight: 600; color: var(--global-palette9); background: rgba(16, 25, 53, 0.85); padding: 2px 10px; border-radius: 999px; } /* ---- BP-006/UX-009: badge de idioma en la tarjeta de producto ---- */ .woocommerce ul.products li.product { position: relative; } .rtcg-product-language-badge { position: absolute; top: var(--rtcg-space-2); left: var(--rtcg-space-2); z-index: 2; font-size: 12px; padding: 3px 10px; } /* Variante con imagen de bandera (feature Product_Badges, display_mode flag/flag_text): chip claro con sombra-token en vez de la pildora de color del modo texto, para que la bandera se lea limpia. Reutiliza el posicionamiento absoluto de arriba. */ .rtcg-product-language-badge--flag, .rtcg-product-language-badge--flag-text { display: inline-flex; align-items: center; gap: 5px; background: var(--global-palette9); border: var(--rtcg-product-language-badge-border-width, 1px) solid var(--rtcg-product-language-badge-border-color, #CBD5E0); box-shadow: var(--rtcg-shadow-sm); } .rtcg-product-language-badge--flag { box-sizing: border-box; justify-content: center; width: var(--rtcg-product-language-badge-size, 28px); height: var(--rtcg-product-language-badge-size, 28px); min-width: var(--rtcg-product-language-badge-size, 28px); min-height: var(--rtcg-product-language-badge-size, 28px); padding: 0; overflow: hidden; border-radius: 50%; } .rtcg-product-language-badge--flag-text { box-sizing: border-box; padding: 3px; border-radius: 999px; } .rtcg-product-language-badge--flag .rtcg-product-language-badge__flag { display: block; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover; border-radius: 50%; } .rtcg-product-language-badge--flag-text .rtcg-product-language-badge__flag { display: block; width: 16px !important; height: 16px !important; flex: 0 0 16px; object-fit: cover; border-radius: 50%; } .rtcg-product-language-badge--flag-text .rtcg-product-language-badge__text { font-size: 12px; font-weight: 700; color: var(--global-palette4); padding-right: 4px; } /* ---- BP-009/UX-014: imagen de categoria en el desplegable de la cabecera ---- Kadence fija un ancho de 200px a los enlaces de submenu (.header-navigation ul ul li.menu-item>a{width:200px}, ver all.min.css) - con box-sizing:border-box y 1em de padding a cada lado, mas la miniatura (40px + margen), el texto real del nombre de categoria quedaba con muy poco espacio, apareciendo cortado/muy apretado en nombres largos ("Booster Boxes (Displays)", "Build and Battle Kits"). Se cambia a min-width para conservar el ancho minimo original pero permitir que crezca cuando el contenido (miniatura + texto) lo necesite. */ .header-navigation ul ul li.menu-item > a { width: auto; min-width: 200px; white-space: normal; } .rtcg-nav-category-thumb { display: inline-block; vertical-align: middle; margin-right: var(--rtcg-space-2); border-radius: var(--rtcg-radius-sm, 4px); object-fit: cover; flex-shrink: 0; } /* ---- CT-011/MK-011: enlace a condiciones de devolucion bajo la franja de confianza ---- */ .rtcg-trust-strip-link { text-align: center; margin-top: var(--rtcg-space-2); margin-bottom: 0; font-size: 13px; } .rtcg-trust-strip-link a { color: inherit; text-decoration: underline; } /* ---- Sidebar de filtros sticky tambien en movil/tablet ---- Kadence ya trae el mecanismo completo (sidebar_sticky, activado via theme_mods_kadence) - JS (initStickySidebar) y CSS nativos. El JS ya calcula el "top" correcto para cabecera movil/escritorio sin distincion de viewport (getTopOffset() internamente sí distingue), pero la regla CSS nativa de Kadence solo aplica position:sticky en @media (min-width: 1025px) - por debajo de eso solo queda el max-height sin sticky. Aqui se anade sticky tambien por debajo de 1024px, reutilizando el mismo selector y el "top"/"max-height" ya fijados por el JS existente (sin JS nuevo). */ .has-sticky-sidebar .sidebar-inner-wrap { position: sticky; overflow-y: auto; } /* ---- UX-065: grid de categorias destacadas en home ---- Patron "grid de tiles con imagen" (visual-system LATEST seccion 10.3): radius-lg, overlay de degradado con el nombre en texto real (nunca horneado en imagen), 2 columnas movil / 3 tablet / 4 escritorio. Reutiliza el mismo thumbnail_id de categoria ya usado en el mega-menu (BP-009) via Reza_TCG_Feature_Home_Category_Showcase. */ .rtcg-category-showcase-heading { text-align: center; margin-bottom: var(--rtcg-space-4); } .rtcg-category-showcase { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--rtcg-space-3); } @media (min-width: 600px) { .rtcg-category-showcase { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1025px) { .rtcg-category-showcase { grid-template-columns: repeat(4, 1fr); } } .rtcg-category-tile { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--rtcg-radius-lg); overflow: hidden; background: #101935; text-decoration: none; transition: box-shadow 0.2s ease, transform 0.2s ease; } .rtcg-category-tile:hover { box-shadow: var(--rtcg-shadow-card-hover); transform: translateY(-2px); } .rtcg-category-tile-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .rtcg-category-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(16, 25, 53, 0.92) 0%, rgba(16, 25, 53, 0.05) 55%); } .rtcg-category-tile--no-image::after { background: rgba(16, 25, 53, 0.35); } .rtcg-category-tile-label { position: absolute; left: var(--rtcg-space-3); right: var(--rtcg-space-3); bottom: var(--rtcg-space-3); z-index: 1; color: var(--global-palette9); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.02em; text-align: center; } /* ---- UX-066: banner de expansion asimetrico en home ---- Sustituye el grid uniforme de 5 tarjetas (BP-002/UX-002) por 1 banner protagonista (expansion vigente/proxima) + fila secundaria compacta para el resto, misma jerarquia visual que el mockup aprobado por el dueño. Reutiliza los mismos logos/enlaces/pildoras de estado ya existentes, sin ningun asset nuevo. NOTA (corregido 2026-08-06): los 3 selectores de esta seccion que necesitan ser contenedor flex/grid directo (.expansiones-asimetrico, .rtcg-expansion-featured, .rtcg-expansion-secondary) apuntan a "> .wp-block-group__inner-container", no al propio bloque - un grupo de Gutenberg con "layout":{"type":"constrained"} envuelve SIEMPRE su contenido real en ese div intermedio (para poder tener fondo full-width con contenido constrenido dentro), asi que el display:grid/flex puesto directamente en la clase del bloque no tenia ningun efecto (su unico hijo real era ese wrapper, no las columnas) - bug detectado por el dueño ("no se ve como en el mockup"), la maquetacion en si no habia cambiado. */ .expansiones-asimetrico > .wp-block-group__inner-container { display: grid; grid-template-columns: 1fr; gap: var(--rtcg-space-4); } @media (min-width: 900px) { .expansiones-asimetrico > .wp-block-group__inner-container { grid-template-columns: 2fr 1fr; /* CORREGIDO (2026-08-06): "stretch" (el valor por defecto de CSS grid) obligaba a las 2 columnas a tener la MISMA altura que la más alta de las 2, y como ambas columnas además usan height:100% + justify-content:space-between internamente, esto inflaba todo el bloque a una altura enorme llena de espacio vacío (bug real reportado por el dueño: "ocupa el 90% de la página, es todo espacio vacío"). "start" hace que cada columna ocupe solo la altura de su propio contenido. */ align-items: start; } } .rtcg-expansion-featured > .wp-block-group__inner-container { display: flex; flex-direction: column; align-items: center; text-align: center; } .rtcg-expansion-featured { border-radius: var(--rtcg-radius-lg); padding: var(--rtcg-space-5); } .rtcg-expansion-featured-badge, .rtcg-expansion-featured-date { align-self: flex-start; margin: 0 0 var(--rtcg-space-2); } .rtcg-expansion-featured-date { font-size: 13px; font-weight: 600; color: var(--global-palette9); } .rtcg-expansion-featured-logo { margin: var(--rtcg-space-3) 0; } .rtcg-expansion-featured-title { color: var(--global-palette9); margin-bottom: var(--rtcg-space-3); } .rtcg-expansion-featured-title a { color: inherit; text-decoration: none; } .rtcg-expansion-featured .kb-buttons-wrap { align-self: flex-start; } .rtcg-expansion-secondary > .wp-block-group__inner-container { display: flex; flex-direction: column; gap: var(--rtcg-space-3); } .rtcg-expansion-secondary-item { display: flex; align-items: center; gap: var(--rtcg-space-3); background: rgba(255, 255, 255, 0.04); border-radius: var(--rtcg-radius-md); padding: var(--rtcg-space-3); margin: 0; } .rtcg-expansion-secondary-item .rtcg-status-pill { flex-shrink: 0; font-size: 11px; padding: 3px 10px; } .rtcg-expansion-secondary-logo { max-height: 40px; width: auto; display: block; } /* ---- UX-067: bloque de iconos "Que incluye" en ficha de producto ---- Patron "bloque de iconos + etiqueta" (visual-system LATEST seccion 10.5): icono lineal 20-24px + etiqueta corta, fila horizontal en escritorio (24px entre items), apilado en movil (16px entre items), sin caja propia por item. Generado por el shortcode [rtcg_includes] (Reza_TCG_Feature_PDP_Includes_List). */ .rtcg-includes-list { display: flex; flex-wrap: wrap; gap: var(--rtcg-space-4); margin: var(--rtcg-space-4) 0; } @media (max-width: 599px) { .rtcg-includes-list { flex-direction: column; gap: var(--rtcg-space-3); } } .rtcg-includes-item { display: inline-flex; align-items: center; gap: var(--rtcg-space-2); } .rtcg-includes-icon { display: inline-flex; width: 24px; height: 24px; flex-shrink: 0; color: var(--global-palette2); } .rtcg-includes-icon svg { width: 100%; height: 100%; } .rtcg-includes-label { font-size: 14px; color: var(--global-palette4); } /* ---- UX-069: linea de tiempo del estado del pedido ---- 4 pasos (Confirmado/Preparando/Enviado/Entregado), horizontal con conector en escritorio/tablet, vertical en movil (<600px, filosofia "sin ocultar contenido por defecto" ya establecida). Generado por Reza_TCG_Feature_Order_Status_Timeline en 2 ubicaciones: pagina de confirmacion (variante "full") y columna de estado de "Mis pedidos" (variante "compact", etiquetas visualmente ocultas pero accesibles). */ .rtcg-order-timeline { --rtcg-order-timeline-icon-size: 28px; display: flex; align-items: flex-start; margin: var(--rtcg-space-3) 0; } @media (max-width: 599px) { .rtcg-order-timeline { flex-direction: column; gap: var(--rtcg-space-3); } } .rtcg-order-timeline__step { display: flex; flex: 1; flex-direction: column; align-items: center; gap: var(--rtcg-space-1); position: relative; text-align: center; } @media (max-width: 599px) { .rtcg-order-timeline__step { flex-direction: row; text-align: left; } } .rtcg-order-timeline__step:not(:last-child)::after { content: ""; position: absolute; z-index: 0; top: calc(var(--rtcg-order-timeline-icon-size) / 2); left: 50%; width: 100%; height: 2px; background: var(--global-palette7); } @media (max-width: 599px) { .rtcg-order-timeline__step:not(:last-child)::after { top: auto; bottom: -12px; left: 14px; width: 2px; height: 16px; } } .rtcg-order-timeline__step--complete:not(:last-child)::after { background: var(--global-palette11); } .rtcg-order-timeline__icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: var(--global-palette7); color: var(--global-palette6); position: relative; z-index: 1; } .rtcg-order-timeline__icon svg { width: 16px; height: 16px; } .rtcg-order-timeline__step--complete .rtcg-order-timeline__icon { background: var(--global-palette11); color: var(--global-palette9); } .rtcg-order-timeline__step--current .rtcg-order-timeline__icon { background: var(--global-palette12); color: var(--global-palette9); box-shadow: 0 0 0 4px rgba(17, 89, 175, 0.18); } .rtcg-order-timeline__label { font-size: 12px; color: var(--global-palette5); } .rtcg-order-timeline__step--current .rtcg-order-timeline__label { font-weight: 700; color: var(--global-palette4); } .rtcg-order-timeline--compact { max-width: 220px; margin: var(--rtcg-space-2) 0 0; } .rtcg-order-timeline--compact .rtcg-order-timeline__icon { --rtcg-order-timeline-icon-size: 20px; width: 20px; height: 20px; } /* La tabla de pedidos usa puntos compactos de 20px: el conector debe * cruzarlos a 10px, no heredar los 14px de la variante completa. */ body.woocommerce-account .rtcg-order-timeline--compact .rtcg-order-timeline__step:not(:last-child)::after { top: 10px; } .rtcg-order-timeline--compact .rtcg-order-timeline__icon svg { width: 12px; height: 12px; } .rtcg-order-timeline--compact .rtcg-order-timeline__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---- UX-070 (reformulado 2026-08-06, ampliado 2026-08-06): buscador dominante en cabecera ---- Un solo buscador en todo el sitio (no uno duplicado en home) - el campo de texto visible sustituye el icono+drawer nativo de Kadence en la propia cabecera, generado por Reza_TCG_Feature_Header_Search_Bar. Movido de la fila principal (compartida con logo/menú/carrito/botón, donde quedaba con ancho muy limitado) a la fila inferior de la cabecera (bottom_center, vacía hasta ahora y ya con layout full-width nativo) - le da sitio propio para un ancho más generoso. BUG REAL encontrado y corregido (2026-08-06, el dueño reportó que el buscador seguía viéndose igual de pequeño tras varios ajustes de contenedor): el ancho de contenedor NUNCA fue el problema. El `.site-header-item` que envuelve el formulario (generado por Kadence, `.site-header-section-center{justify-content:center}` sin `flex-grow`) no se estira dentro de su fila - un contenedor flex sin ancho propio (shrink-to-fit) no puede resolver un hijo con `width:100%` de forma significativa, así que el navegador ignora el porcentaje y el formulario colapsaba a su tamaño de contenido mínimo (~220px, el ancho por defecto de un sin más), sin llegar nunca a activar el `max-width:600px`. Se fuerza aquí a que el propio `.site-header-item` (identificable de forma estable por contener `.rtcg-header-search`, sin depender del nombre de clase de Kadence) ocupe todo el ancho disponible de su fila, para que el 100% del formulario tenga una base real contra la que calcularse. */ .site-header-bottom-section-center .site-header-item { flex-grow: 1; width: 100%; } .rtcg-header-search { display: flex; align-items: stretch; width: 100%; max-width: 600px; margin: 10px auto; border-radius: 999px; overflow: hidden; border: 2px solid var(--global-palette7); } /* CORRECCIÓN (2026-08-06, el dueño identificó que el borde seguía rompiéndose): el problema no era solo el "decorado" nativo de Chrome/WebKit (ya corregido abajo) - Kadence define en su CSS base una regla `input[type=search]{border:1px solid var(--global-gray-400); ...}` cuyo selector de atributo (`[type=search]`) tiene MÁS especificidad que una clase sola (`.rtcg-header-search__input`), así que ganaba pese a estar mi CSS cargado después en el DOM - el orden de carga solo desempata cuando la especificidad es igual. Se usa aquí el "id" del propio input (`#rtcg-header-search-input`, ya presente en el markup) en vez de la clase, que sí tiene especificidad suficiente para ganarle a un selector de atributo de forma fiable. */ #rtcg-header-search-input { flex: 1; min-width: 0; border: none; padding: 10px 18px; font-size: 15px; background: var(--global-palette9); color: var(--global-palette4); /* Chrome/WebKit aplica su propio "decorado" nativo a input[type="search"] (radio/sombra interna propios) que competia con el borde redondeado del contenedor .rtcg-header-search, produciendo un hueco blanco que rompia la continuidad del borde gris en la esquina izquierda. */ -webkit-appearance: none; appearance: none; } #rtcg-header-search-input::-webkit-search-decoration, #rtcg-header-search-input::-webkit-search-cancel-button, #rtcg-header-search-input::-webkit-search-results-button, #rtcg-header-search-input::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; } /* El foco NO se pinta sobre el input: un `outline` es siempre rectangular (ignora el `border-radius`), así que su esquina cuadrada choca contra la píldora redondeada del contenedor (.rtcg-header-search, border-radius:999px + overflow:hidden) y vuelve a romper el borde en el estado :focus - el mismo síntoma del borde partido, ahora al enfocar. En su lugar el anillo de foco se lleva al propio contenedor con :focus-within y box-shadow, que SÍ respeta el border-radius y por tanto dibuja un anillo con forma de píldora, continuo con el borde. El box-shadow no lo recorta el `overflow:hidden` del contenedor porque ese overflow solo afecta a los hijos, no a la sombra propia del elemento. */ #rtcg-header-search-input:focus { outline: none; } .rtcg-header-search:focus-within { border-color: var(--global-palette2); box-shadow: 0 0 0 2px var(--global-palette2); } .rtcg-header-search__button { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; border: none; background: var(--global-palette-btn-bg, var(--global-palette14)); color: var(--global-palette9); cursor: pointer; } .rtcg-header-search__button svg { width: 18px; height: 18px; } @media (max-width: 599px) { .rtcg-header-search { max-width: 100%; margin: 8px 16px; width: auto; } } /* ---- UX-066 (rediseñado 2026-08-06, 2ª vez): CTA "Ver toda la tienda" en la tarjeta protagonista del banner de expansión. El dueño pidió expresamente que este enlace tuviera MUCHA prioridad visual (antes era texto subrayado, casi invisible) - ahora es un botón real, mismo tamaño/forma que el CTA principal ("Ver colección"), en estilo outline (borde blanco) para no competir en dominancia con el botón sólido naranja, pero con el mismo peso visual de "botón". */ .rtcg-expansion-featured-shop-link { align-self: flex-start; margin-top: var(--rtcg-space-2); } .rtcg-expansion-featured-shop-link a { display: inline-block; padding: 0.7em 1.8em; border: 2px solid var(--global-palette9); border-radius: 999px; color: var(--global-palette9); text-decoration: none; font-weight: 700; font-size: 14px; transition: background-color 0.2s ease, color 0.2s ease; } .rtcg-expansion-featured-shop-link a:hover { background: var(--global-palette9); color: #101935; } /* ---- Ajuste de proporción de cabecera (2026-08-06, corregido a config nativa el mismo día) ---- El layout "standard" nativo de Kadence (fila principal/inferior) usa el ancho general del sitio (--global-content-width, 1500px) - sigue dejando mucho espacio muerto entre logo/nav y carrito/cuenta con solo 2 items de menú. Se acota aquí específicamente el contenido de la cabecera a un ancho menor, para que los elementos queden más juntos sin dejar de estar centrados. El valor de `--rtcg-header-content-width` YA NO se hardcodea aquí - lo inyecta `Reza_TCG_Feature_Header_Layout` vía un