/*
Theme Name: OZ Thema 4.0 — Marca cliente
Description: Tema hijo de OZ-Thema-4.0. Aquí vive la personalización de marca de cada instalación (colores, tipografías y overrides visuales). El tema padre queda neutro y reutilizable; este hijo le pone la identidad del cliente.
Author: Ozado
Template: OZ-Thema-4.0
Version: 1.0.0
Requires PHP: 8.0
Text Domain: oz-tema-4-child
*/
/* =========================================================================
MARCA DEL CLIENTE
El tema padre expone estas dos variables NEUTRAS. Ponles los colores
reales del cliente para remarcar header, footer, botón "Categorías",
títulos del pie y el banner de asesor de una sola vez.
Alternativa sin código: Personalizar → «Diseño OZ» → «Header y Footer»
→ «Color de marca». (Si defines aquí abajo, esto gana sobre el Customizer.)
========================================================================= */
:root {
/* --oz-brand-primary: #0c1555; */ /* Fondo de header y footer */
/* --oz-brand-accent: #fd6500; */ /* Acento: botones, títulos, banner asesor */
}
/* =========================================================================
OVERRIDES ADICIONALES DEL CLIENTE
Añade aquí cualquier ajuste visual específico de esta instalación.
Esta hoja se carga DESPUÉS del CSS del padre, así que gana sin !important.
========================================================================= */
/* Mapa en el footer (reemplaza el texto "Acerca de"). Responsive. */
.site-footer-new__map {
width: 100%;
max-width: 420px;
border-radius: 12px;
overflow: hidden;
line-height: 0;
}
.site-footer-new__map iframe {
display: block;
width: 100%;
height: 220px;
border: 0;
}
/* ===== Drawer lateral de Categorías ===== */
body.oz-cat-lock { overflow: hidden; }
.oz-cat-drawer {
position: fixed;
inset: 0;
z-index: 100000;
visibility: hidden;
pointer-events: none;
}
.oz-cat-drawer.is-open { visibility: visible; pointer-events: auto; }
.oz-cat-drawer__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity .25s ease;
}
.oz-cat-drawer.is-open .oz-cat-drawer__overlay { opacity: 1; }
.oz-cat-drawer__panel {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: min(340px, 86vw);
background: #ffffff;
box-shadow: 2px 0 24px rgba(0, 0, 0, .18);
display: flex;
flex-direction: column;
transform: translateX(-100%);
transition: transform .28s ease;
overflow-y: auto;
}
.oz-cat-drawer.is-open .oz-cat-drawer__panel { transform: translateX(0); }
.oz-cat-drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 18px;
background: var(--oz-footer-orange, var(--oz-brand-accent, #5b6672));
color: #fff;
position: sticky;
top: 0;
}
.oz-cat-drawer__title { font-size: 17px; font-weight: 700; }
.oz-cat-drawer__close {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; padding: 0;
background: transparent; border: 0; color: #fff; cursor: pointer; border-radius: 8px;
}
.oz-cat-drawer__close:hover { background: rgba(255, 255, 255, .18); }
.oz-cat-drawer__list { list-style: none; margin: 0; padding: 6px 0; }
.oz-cat-item { border-bottom: 1px solid #eee; }
.oz-cat-item__row { display: flex; align-items: stretch; }
.oz-cat-item__link {
flex: 1 1 auto;
display: block;
padding: 13px 18px;
color: #1f2937;
text-decoration: none;
font-size: 15px;
line-height: 1.3;
}
.oz-cat-item__link:hover { background: #f6f7f8; color: var(--oz-footer-orange, var(--oz-brand-accent, #5b6672)); }
.oz-cat-item__toggle {
flex: 0 0 46px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: 0; border-left: 1px solid #eee; color: #6b7280; cursor: pointer;
}
.oz-cat-item__toggle svg { transition: transform .2s ease; }
.oz-cat-item.is-expanded > .oz-cat-item__row .oz-cat-item__toggle svg { transform: rotate(180deg); }
.oz-cat-item__sub { list-style: none; margin: 0; padding: 0; background: #fafbfc; }
.oz-cat-item__sub a {
display: block;
padding: 10px 18px 10px 34px;
color: #4b5563;
text-decoration: none;
font-size: 14px;
}
.oz-cat-item__sub a:hover { background: #eef1f4; color: var(--oz-footer-orange, var(--oz-brand-accent, #5b6672)); }
/* ===== Sidecart (cajón lateral) del cotizador con los colores de la marca =====
El plugin trae paleta de otra marca (rojo #bc0811 + azul #001E50).
Acento (rojo) → naranja la marca; estructura (azul) → oscuro la marca. */
body .ozc-sidecart {
--ozc-sc-accent: var(--oz-brand-accent, #5b6672);
--ozc-sc-accent-dark: color-mix(in srgb, var(--oz-brand-accent, #5b6672) 82%, #000);
--ozc-sc-line: var(--oz-brand-accent, #5b6672);
--ozc-sc-yellow: var(--oz-brand-accent, #5b6672);
--ozc-sc-yellow-dark: color-mix(in srgb, var(--oz-brand-accent, #5b6672) 82%, #000);
--ozc-sc-wa: var(--oz-brand-accent, #5b6672);
--ozc-sc-wa-dark: color-mix(in srgb, var(--oz-brand-accent, #5b6672) 82%, #000);
}
.ozc-sidecart .ozc-sidecart__header { background: #111111; }
.ozc-sidecart .ozc-sidecart__btn--cart {
background: #111111;
border-color: #111111;
box-shadow: 0 2px 8px rgba(17, 17, 17, .35);
}
.ozc-sidecart .ozc-sidecart__btn--cart:hover { background: #262626; border-color: #262626; }
.ozc-sidecart .ozc-sidecart__btn--continue { border-color: #111111; color: #111111; }
.ozc-sidecart .ozc-sidecart__btn--continue:hover { border-color: #111111; color: #111111; }
.ozc-sidecart .ozc-sidecart-item__remove { background-color: #111111; }
.ozc-sidecart .ozc-sidecart__btn--quote { box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
/* ===== Carrito Cotizador (página /cart/) con los colores de la marca =====
quote-cart.css trae paleta de otra marca (azul #004674 + amarillo #f7d022)
definida como variables en .ozc-quote-cart. Re-mapeo la marca:
amarillo (CTA principal) → naranja de marca; azul (estructura: botón correo,
steppers, bordes) → negro la marca. El verde de WhatsApp se conserva. */
body .ozc-quote-cart {
--ozc-bg: #f6f6f6; /* fondo neutro, sin tinte azul */
--ozc-border: rgba(17, 17, 17, 0.13);
--ozc-border-soft: rgba(17, 17, 17, 0.07);
--ozc-accent: #141414;
--ozc-accent-dark: #000000;
--ozc-accent-line: var(--oz-brand-accent, #5b6672);
--ozc-yellow: var(--oz-brand-accent, #5b6672); /* CTA (badges de paso, botón WhatsApp) */
--ozc-yellow-dark: color-mix(in srgb, var(--oz-brand-accent, #5b6672) 82%, #000);
--ozc-shadow: 0 1px 4px rgba(0, 0, 0, 0.07), 0 6px 20px rgba(0, 0, 0, 0.04);
}
/* Los badges de paso (1·2·3) y el CTA sobre naranja necesitan texto blanco */
body .ozc-quote-cart .ozc-step { color: #ffffff; }
body .ozc-quote-cart .ozc-quote-cart__btn--primary,
body .ozc-quote-cart .ozc-quote-cart__btn--primary:hover { color: #ffffff !important; }
/* ===== Cards Misión/Visión/Valores (Nosotros) — .oz-hover-info-card =====
Componente Icono+Texto del maquetador (clases reales: .oz-pb-icon-text,
.oz-pb-it__icon, .oz-pb-it__title, .oz-pb-it__desc). Aplica solo a los
componentes con la clase "oz-hover-info-card" + modificador de color:
--negro | --naranja | --claro
ARQUITECTURA (móvil primero):
· BASE (todos los dispositivos): todo visible y en flujo — icono, título
y descripción. Ningún hover. Es el comportamiento de móvil/táctil.
· @media (hover:hover) and (pointer:fine) → SOLO con mouse real (desktop
y laptop): sistema de 2 estados. Normal = icono+título; hover = SOLO la
descripción (capa absoluta centrada). En táctil este bloque nunca corre,
así que un tap/deslizar no puede activar estados raros.
· Los media por ancho (1440/1024/767) solo ajustan TAMAÑOS. */
.oz-hover-info-card { --hic-bg: #141414; --hic-text: #ffffff; }
.oz-hover-info-card--naranja { --hic-bg: var(--oz-brand-accent, #5b6672); }
.oz-hover-info-card--claro { --hic-bg: color-mix(in srgb, var(--oz-brand-accent, #5b6672) 70%, #fff); }
/* Fila: columnas pegadas (gap 0 SOLO en este grid) y estiradas → mismas alturas */
.oz-pb-grid:has(.oz-hover-info-card) {
gap: 0 !important;
column-gap: 0 !important;
align-items: stretch;
}
.oz-hover-info-card { height: 100%; }
/* ── BASE: card rectangular, contenido centrado y EN FLUJO (móvil/táctil) ── */
.oz-hover-info-card .oz-pb-icon-text {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
min-height: 340px;
width: 100%;
max-width: 100%;
padding: 35px 24px;
background: var(--hic-bg);
border-radius: 0;
text-align: center;
box-sizing: border-box;
}
.oz-hover-info-card .oz-pb-it__icon {
width: 112px;
height: 112px;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
border-radius: 50%;
margin: 0 0 18px !important;
}
.oz-hover-info-card .oz-pb-it__icon img,
.oz-hover-info-card .oz-pb-it__icon svg {
width: 54px !important;
height: 54px !important;
object-fit: contain;
}
.oz-hover-info-card .oz-pb-it__text { width: 100%; max-width: 100%; }
.oz-hover-info-card .oz-pb-it__title {
margin: 0;
color: var(--hic-text) !important;
font-weight: 600;
text-align: center !important;
}
/* Descripción base: visible, en flujo, centrada, sin anchos fijos de desktop */
.oz-hover-info-card .oz-pb-it__desc,
.oz-hover-info-card .oz-pb-it__desc p {
text-align: center !important; /* nunca justificado */
text-justify: none;
overflow-wrap: break-word;
word-break: normal;
}
.oz-hover-info-card .oz-pb-it__desc {
position: static;
width: 100%;
max-width: 340px;
margin: 20px auto 0;
padding: 0;
box-sizing: border-box;
color: var(--hic-text);
font-size: 14px !important; /* el panel pone 15px con más especificidad */
font-weight: 400;
line-height: 1.6 !important;
opacity: 1;
visibility: visible;
transform: none;
}
.oz-hover-info-card .oz-pb-it__desc p { margin: 0; }
/* ── DOS ESTADOS: SOLO dispositivos con mouse real (desktop + laptop).
En táctil (hover:none / pointer:coarse) nada de esto existe. ── */
@media (hover: hover) and (pointer: fine) {
.oz-hover-info-card .oz-pb-icon-text { overflow: hidden; }
/* Capa 1: icono + título (visibles en reposo, se desvanecen en hover) */
.oz-hover-info-card .oz-pb-it__icon,
.oz-hover-info-card .oz-pb-it__title {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity .35s ease, transform .35s ease, visibility 0s;
}
.oz-hover-info-card:hover .oz-pb-it__icon,
.oz-hover-info-card:hover .oz-pb-it__title {
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
/* Capa 2: descripción como capa absoluta que ocupa TODA la card,
centrada vertical y horizontalmente. Oculta en reposo.
El ancho del texto se limita con padding lateral (mín. 24px,
y crece para dejar el texto a máx. ~320px) — sin left/translateX. */
.oz-hover-info-card .oz-pb-it__desc {
position: absolute;
inset: 0;
width: auto;
max-width: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
padding-left: max(24px, calc((100% - 320px) / 2));
padding-right: max(24px, calc((100% - 320px) / 2));
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
.oz-hover-info-card:hover .oz-pb-it__desc {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity .35s ease, transform .35s ease, visibility 0s;
}
}
/* ── LAPTOP (1025–1440px): solo tamaños; el sistema de 2 estados de arriba
sigue activo porque la laptop tiene mouse (hover:hover + pointer:fine). ── */
@media (min-width: 1025px) and (max-width: 1440px) {
.oz-hover-info-card .oz-pb-icon-text { min-height: 320px; padding: 25px 35px; }
.oz-hover-info-card .oz-pb-it__icon { width: 90px; height: 90px; margin-bottom: 18px !important; }
.oz-hover-info-card .oz-pb-it__icon img,
.oz-hover-info-card .oz-pb-it__icon svg { width: 44px !important; height: 44px !important; }
.oz-hover-info-card .oz-pb-it__title { font-size: 18px !important; }
.oz-hover-info-card .oz-pb-it__desc { font-size: 13px !important; line-height: 1.5 !important; }
}
/* ── TABLET (768–1024px): solo tamaños. En tablet táctil el bloque de hover
no corre → todo visible en flujo y la card crece con su contenido. ── */
@media (min-width: 768px) and (max-width: 1024px) {
.oz-hover-info-card .oz-pb-icon-text { min-height: 300px; height: auto; padding: 30px 24px; }
.oz-hover-info-card .oz-pb-it__icon { width: 84px; height: 84px; }
.oz-hover-info-card .oz-pb-it__title { font-size: 17px !important; }
}
/* ── MÓVIL (≤767px): 1 card por fila (el maquetador apila), SIN hover.
Todo visible: icono + título + descripción. La card crece con el
contenido (min-height como piso) y nada se corta ni se desplaza. ── */
@media (max-width: 767px) {
.oz-hover-info-card .oz-pb-icon-text {
height: auto;
min-height: 300px;
padding: 38px 24px;
overflow: visible;
}
.oz-hover-info-card .oz-pb-it__icon { width: 80px; height: 80px; margin-bottom: 18px !important; }
.oz-hover-info-card .oz-pb-it__icon img,
.oz-hover-info-card .oz-pb-it__icon svg { width: 40px !important; height: 40px !important; }
.oz-hover-info-card .oz-pb-it__title { font-size: 16px !important; }
.oz-hover-info-card .oz-pb-it__desc {
position: static !important;
width: 100% !important;
max-width: 100% !important;
margin: 18px auto 0 !important;
padding: 0 !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
font-size: 14px !important;
line-height: 1.55 !important;
}
/* Blindaje: aunque algo dispare :hover en un táctil, no pasa nada */
.oz-hover-info-card:hover .oz-pb-it__icon,
.oz-hover-info-card:hover .oz-pb-it__title,
.oz-hover-info-card:hover .oz-pb-it__desc {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
}
/* ===== Breadcrumb del maquetador (.oz-breadcrumbs): enlace en naranja de marca ===== */
.oz-breadcrumbs a { color: var(--oz-brand-accent, #5b6672); text-decoration: none; }
.oz-breadcrumbs a:hover { color: color-mix(in srgb, var(--oz-brand-accent, #5b6672) 82%, #000); }
/* ===== Título de sección con barra naranja (.oz-heading) — reutilizable ===== */
.oz-heading { border-left: 4px solid var(--oz-brand-accent, #5b6672); padding-left: 16px; }
.oz-heading h1, .oz-heading h2, .oz-heading h3 { margin: 0 0 6px; color: #1f2937; line-height: 1.2; }
.oz-heading p { margin: 0; color: #6b7280; font-size: 15px; line-height: 1.5; }
/* ===== Slider de categorías (OZ-Sliders) — diseño la marca: tarjeta horizontal gris + botón =====
La 3.6.11 dejó la tarjeta vertical/blanca sin botón; aquí la volvemos al look de la
imagen: imagen a la izquierda, nombre + botón "Ver categoria" a la derecha, fondo gris. */
body .ozs--wc-categories .ozs-wc-cat {
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 22px;
min-height: 190px;
padding: 22px 26px;
background: #f2f2f2;
border: 0;
border-radius: 4px;
text-align: left;
color: #2f2f2f;
}
/* Columna de imagen (izquierda) */
body .ozs--wc-categories .ozs-wc-cat__icon-wrap {
flex: 0 0 40%;
width: 40%;
height: auto;
align-self: center;
}
body .ozs--wc-categories .ozs-wc-cat__icon {
width: auto;
max-width: 100%;
height: auto;
max-height: 150px;
}
body .ozs--wc-categories .ozs-wc-cat__img {
width: auto;
max-width: 100%;
height: auto;
max-height: 150px;
object-fit: contain;
}
/* Columna de texto: nombre (arriba) + botón (abajo), alineado a la izquierda */
body .ozs--wc-categories .ozs-wc-cat__name {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
flex: 1 1 auto;
min-height: 0;
overflow: visible;
-webkit-line-clamp: unset;
text-align: left;
text-wrap: initial;
font-size: clamp(1.15rem, 2.2vw, 1.5rem);
font-weight: 700;
line-height: 1.15;
color: #2f2f2f;
}
/* Botón "Ver categoria" (lo añade el CSS; la tarjeta entera ya es un enlace) */
body .ozs--wc-categories .ozs-wc-cat__name::after {
content: "Ver categoria";
padding: 9px 18px;
background: var(--oz-brand-accent, #5b6672);
color: #ffffff;
font-size: 0.78rem;
font-weight: 700;
line-height: 1;
border-radius: 4px;
white-space: nowrap;
}
/* Todas las tarjetas iguales (gris): sin hover, sin oscurecer, sin silueta naranja */
body .ozs--wc-categories .ozs-wc-cat:hover,
body .ozs--wc-categories .ozs-wc-cat:focus-visible,
body .ozs--wc-categories .ozs-wc-cat.is-current {
background: #f2f2f2;
color: #2f2f2f;
transform: none;
box-shadow: none;
}
body .ozs--wc-categories .ozs-wc-cat:hover .ozs-wc-cat__img,
body .ozs--wc-categories .ozs-wc-cat:focus-visible .ozs-wc-cat__img,
body .ozs--wc-categories .ozs-wc-cat.is-current .ozs-wc-cat__img {
transform: none;
filter: none;
}
/* ===== Encabezado de los SLIDERS DE PRODUCTOS (OZ-Sliders wc-products) =====
Estiliza el header que ya genera cada carrusel (título dinámico del panel +
flechas prev/next existentes). No toca JS, consultas ni el carrusel. */
.ozs--wc-products { position: relative; }
/* 1. Fila del título (título izquierda; las flechas van absolutas a la derecha) */
.ozs--wc-products .ozs__header {
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
margin: 0 0 32px; /* 5. separación con las cards */
padding: 0 0 12px; /* deja sitio para la línea inferior */
}
/* 2. Título dinámico (valor del panel, no hardcodeado) */
html body .ozs--wc-products .ozs__title {
font-family: "Roboto", -apple-system, "Segoe UI", sans-serif !important;
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
color: #292929 !important;
margin: 0 !important;
}
.ozs--wc-products .ozs__title::after { display: none; } /* quita el subrayado corto por defecto */
/* 3. Línea inferior continua: naranja 88px + gris, mismo grosor, full width */
.ozs--wc-products .ozs__header::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: linear-gradient(to right, var(--oz-brand-accent, #5b6672) 0, var(--oz-brand-accent, #5b6672) 88px, #e8e8e8 88px, #e8e8e8 100%);
}
/* 4. Flechas: mismas prev/next del slider, movidas al top-right del header */
html body .ozs.ozs--wc-products .ozs__nav {
position: absolute !important;
top: 0 !important;
right: 0 !important;
left: auto !important;
width: auto !important;
height: auto !important;
display: flex !important;
align-items: center;
gap: 4px;
pointer-events: none;
z-index: 5;
}
html body .ozs.ozs--wc-products:not(.ozs--banner) .ozs__nav-btn {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
transform: none !important;
width: 26px !important;
height: 26px !important;
min-width: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 5px !important;
color: #777 !important;
box-shadow: none !important;
pointer-events: auto;
/* El plugin fuerza background-color verde con !important (la transición lo "pega").
Lo cubrimos con background-image, que se pinta ENCIMA del color. */
background-color: #f5f5f5 !important;
background-image: linear-gradient(#f5f5f5, #f5f5f5) !important;
}
html body .ozs.ozs--wc-products:not(.ozs--banner) .ozs__nav-btn:hover,
html body .ozs.ozs--wc-products:not(.ozs--banner) .ozs__nav-btn:focus-visible {
background-image: linear-gradient(#e8e8e8, #e8e8e8) !important;
}
html body .ozs.ozs--wc-products:not(.ozs--banner) .ozs__nav-btn::before { border-color: #777 !important; }
/* ============================================================
BANNER DE LA TIENDA (la marca): imagen de fondo + texto blanco.
Ruta RELATIVA a propósito: los reescritores de staging solo tocan URLs
absolutas con dominio → así el archivo se sirve del LOCAL y no se reescribe
a producción (donde no existe). Scrim oscuro encima para legibilidad del
texto blanco. Prefijo html body para ganar al shop-archive.css sin depender
del orden de carga. Aplica a tienda y a archivos de categoría/etiqueta.
============================================================ */
html body .oz-shop-page-banner {
background-color: #1a1a1a !important; /* base neutra; añade aquí la imagen de banner del cliente */
background-image:
linear-gradient(rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.34)) !important;
/* Imagen de banner del cliente (opcional), ruta RELATIVA para no reescribir a staging:
background-image:
linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.34)),
url('/wp-content/uploads/xxxx/xx/banner-tienda.webp') !important; */
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
/* Texto en blanco (título + migas) */
html body .oz-shop-page-banner__title,
html body .oz-shop-page-banner__crumbs,
html body .oz-shop-page-banner__crumbs a,
html body .oz-shop-page-banner__crumbs span,
html body .oz-shop-page-banner .woocommerce-breadcrumb,
html body .oz-shop-page-banner .woocommerce-breadcrumb a {
color: #ffffff !important;
}
html body .oz-shop-page-banner__crumb-sep {
color: rgba(255, 255, 255, 0.6) !important;
}
html body .oz-shop-page-banner__crumbs a:hover,
html body .oz-shop-page-banner .woocommerce-breadcrumb a:hover {
color: var(--oz-brand-accent, #5b6672) !important; /* hover naranja de marca */
}
/* Alto del banner: 230px en desktop (≥1440px), escala fluida hacia abajo
(16vw) con piso de 140px en móvil. El alto vive en el __inner (box-sizing
border-box, ya centra su contenido con flex), así que min-height = alto
total de la franja. */
html body .oz-shop-page-banner__inner {
min-height: clamp(140px, 16vw, 230px) !important;
}
/* Ficha de producto: el padre (single-product.css) capa el banner a 1440px;
lo soltamos para que sea la MISMA franja full-width que en la tienda. */
html body .site-main--woo-single .oz-shop-page-banner {
width: 100% !important;
max-width: none !important;
}
/* ===== Página de Marcas: grilla estática sobre el módulo wc-brands =====
Uso: [oz_wc_brands class="brands-cards brands-grid" ...] en un bloque Texto
del maquetador. "brands-cards" (skin del plugin) pone cada logo en tarjeta
blanca; "brands-grid" (esto) convierte el carrusel en grilla que envuelve:
el ancho por columna lo sigue dictando --ozs-cols (cols_desktop/laptop/
tablet/mobile del shortcode), así que 4 columnas × 12 marcas = 3 filas,
y en tablet/móvil re-fluye solo (3 col → 4 filas, 2 col → 6 filas). */
.ozs--wc-brands.brands-grid .ozs__track {
flex-wrap: wrap;
overflow-x: visible;
scroll-snap-type: none;
}
.ozs--wc-brands.brands-grid .ozs__slide {
scroll-snap-align: none;
}
/* Sin controles de carrusel: es una grilla fija */
.ozs--wc-brands.brands-grid .ozs__nav,
.ozs--wc-brands.brands-grid .ozs__dots {
display: none !important;
}
/* oz-sliders.js (readConfig) tiene loop:true hardcodeado e ignora data-loop,
así que SIEMPRE inyecta slides clonadas para el loop infinito. En una
grilla estática esas clonadas duplican marcas: fuera. */
.ozs--wc-brands.brands-grid .ozs__slide--clone {
display: none !important;
}
/* =========================================================================
FICHA DE PRODUCTO — sección Descripción / Información adicional
BLOQUE DESACTIVADO (líneas ~627-935 originalmente): diseño de tabs
ANTERIOR (naranja, subrayado, checks circulares "✓", grid de 2 columnas
con :has()), reemplazado por el diseño vigente (franja carbón/fucsia,
una columna, bullets nativos) en
OZ-Thema-4.0-child/assets/css/single-product.css. Este archivo style.css
lo carga WordPress SIEMPRE al final (después de assets/css/*.css), así
que estas reglas legacy le ganaban en cascada a las vigentes sin usar
!important — causa real de la tarjeta blanca redondeada, los checks
circulares y el grid de 2 columnas que reaparecían pese a haberlos
quitado del otro archivo. Todo el bloque de abajo (tabs .oz-single-tabs
naranja) queda sin efecto: cada selector fue reescrito para no aplicar
ninguna propiedad visual (solo comentarios de referencia histórica).
========================================================================= */
/* =========================================================================
FICHA DE PRODUCTO — controles de compra (cantidad, Presupuestar, WhatsApp)
Solo re-estilizado de los elementos existentes: .quantity con los botones
.ozc-qty-btn que inyecta oz-cotizador (loops.js), el submit nativo
.single_add_to_cart_button y el botón .ozc-product-card__wa-btn. La altura
de la fila ya la unifica el plugin con --ozc-pdp-action-h (52px). Los
iconos son SVG inline vía mask (currentColor), sin librerías nuevas.
========================================================================= */
/* 1. Selector de cantidad: compacto (158px), borde naranja fino, las tres
zonas equilibradas sin espacio vacío de más. */
body.single-product .oz-single-product .ozc-single-product__cta form.cart .quantity {
width: 158px !important;
flex: 0 0 158px !important;
flex-shrink: 0 !important;
justify-content: space-between !important;
background: #ffffff !important;
border: 1px solid var(--oz-brand-accent, #5b6672) !important;
border-radius: 9px !important;
}
body.single-product .oz-single-product .ozc-single-product__cta .ozc-qty-btn {
color: var(--oz-brand-accent, #5b6672) !important;
background: transparent !important;
border: 0 !important;
font-size: 20px;
font-weight: 600 !important;
}
body.single-product .oz-single-product .ozc-single-product__cta form.cart .quantity input.qty {
background: #ffffff !important;
color: #16225a;
font-size: 16px;
font-weight: 600;
}
/* 2. Presupuestar: CTA principal navy, radio 9px, icono de documento a la
izquierda. El navy y su hover (#1b2a6b → #16225a) ya vienen del padre. */
body.single-product .oz-single-product form.cart .single_add_to_cart_button,
body.single-product .oz-single-product form.cart .button.alt {
border-radius: 9px !important;
font-size: 15.5px;
font-weight: 600;
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}
body.single-product .oz-single-product form.cart .single_add_to_cart_button::before {
content: "";
width: 17px;
height: 17px;
margin-right: 12px;
flex: 0 0 auto;
background-color: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
body.single-product .oz-single-product form.cart .single_add_to_cart_button:hover,
body.single-product .oz-single-product form.cart .button.alt:hover {
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(27, 42, 107, 0.18);
}
/* 4. WhatsApp: blanco con borde y texto naranja, icono de WhatsApp naranja.
Hover: naranja muy suave, sin cambiar de color. */
body.single-product .oz-single-product .ozc-single-product__wa .ozc-product-card__wa-btn {
min-height: 45px;
padding: 0 1rem;
background: #ffffff;
border: 1px solid var(--oz-brand-accent, #5b6672);
border-radius: 9px;
color: var(--oz-brand-accent, #5b6672);
font-size: 14px;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: background-color 0.2s ease;
}
/* Secundario: más fino que Presupuestar. Espaciados: 10px con la fila de
arriba, 16px con la nota informativa de abajo. */
body.single-product .oz-single-product .ozc-single-product__summary .ozc-single-product__wa {
margin-top: 10px;
}
body.single-product .oz-single-product .ozc-single-product__summary .ozc-single-product__note {
margin-top: 16px;
}
body.single-product .oz-single-product .ozc-single-product__wa .ozc-product-card__wa-btn::before {
content: "";
width: 18px;
height: 18px;
flex: 0 0 auto;
background-color: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
body.single-product .oz-single-product .ozc-single-product__wa .ozc-product-card__wa-btn:hover {
background: #fff4ec;
border-color: var(--oz-brand-accent, #5b6672);
color: var(--oz-brand-accent, #5b6672);
}
/* Tablet (481–991px): oz-cotizador (loops.css) apila cantidad y Presupuestar
en columna desde 991px hacia abajo; aquí los devolvemos a la misma fila
(cantidad compacta + botón con el resto). El apilado queda solo en móvil. */
@media screen and (min-width: 481px) and (max-width: 991px) {
body.single-product .ozc-single-product__cta form.cart:not(.variations_form):not(.grouped_form),
body.single-product .ozc-single-product__cta form.cart.variations_form .woocommerce-variation-add-to-cart,
body.single-product .ozc-single-product__cta form.cart:not(.variations_form):not(.grouped_form) > div:has(.quantity):has(.single_add_to_cart_button),
body.single-product .ozc-single-product__cta form.cart:not(.variations_form):not(.grouped_form) > div:has(.quantity):has(button[type='submit'].single_add_to_cart_button) {
flex-direction: row !important;
align-items: center !important;
}
body.single-product .ozc-single-product__cta form.cart:not(.variations_form):not(.grouped_form) .quantity,
body.single-product .ozc-single-product__cta form.cart.variations_form .woocommerce-variation-add-to-cart .quantity {
flex: 0 0 158px !important;
align-self: center !important;
}
body.single-product .ozc-single-product__cta form.cart:not(.variations_form):not(.grouped_form) .single_add_to_cart_button,
body.single-product .ozc-single-product__cta form.cart:not(.variations_form):not(.grouped_form) button[type='submit'].single_add_to_cart_button,
body.single-product .ozc-single-product__cta form.cart.variations_form .woocommerce-variation-add-to-cart .single_add_to_cart_button,
body.single-product .ozc-single-product__cta form.cart.variations_form .woocommerce-variation-add-to-cart button[type='submit'].single_add_to_cart_button {
width: auto !important;
flex: 1 1 auto !important;
}
}
/* 0. Galería: sin el fondo gris azulado del padre (#eef2f7); en su lugar,
borde fino como el del resto de las cards. */
body .oz-single-product .woocommerce-product-gallery {
background: #ffffff;
border: 1px solid #e8e8e8;
}
/* BLOQUE COMPLETO DESACTIVADO — diseño de tabs anterior (naranja,
subrayado, checks circulares "✓", grid de 2 columnas). Comentado en
bloque (no borrado) para no perder el historial ni arriesgar romper
otra referencia. El diseño vigente vive en
OZ-Thema-4.0-child/assets/css/single-product.css.
body .oz-single-product .woocommerce-tabs {
margin: 2.5rem 0 1rem;
background: #ffffff;
border: 1px solid #e8e8e8;
border-radius: 12px;
box-shadow: none;
padding: 28px 32px 32px;
box-sizing: border-box;
max-width: 100%;
}
body .oz-single-product div.product .woocommerce-tabs ul.tabs {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 0 2rem;
margin: 0;
padding: 0;
list-style: none;
overflow: visible;
border: 0;
border-bottom: 1px solid #e3e3e3;
}
body .oz-single-product div.product .woocommerce-tabs ul.tabs li {
margin: 0;
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
display: inline-block;
}
body .oz-single-product div.product .woocommerce-tabs ul.tabs li::before,
body .oz-single-product div.product .woocommerce-tabs ul.tabs li::after {
content: none;
display: none;
}
body .oz-single-product div.product .woocommerce-tabs ul.tabs li a {
display: inline-block;
padding: 0.25rem 0.1rem 0.85rem;
font-size: 0.92rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #262626;
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
border-radius: 0;
margin-bottom: -1px;
text-decoration: none;
transition: color 0.2s ease, border-color 0.2s ease;
}
body .oz-single-product div.product .woocommerce-tabs ul.tabs li a:hover,
body .oz-single-product div.product .woocommerce-tabs ul.tabs li a:focus-visible {
color: var(--oz-brand-accent, #5b6672);
border-bottom-color: transparent;
}
body .oz-single-product div.product .woocommerce-tabs ul.tabs li.active a {
color: var(--oz-brand-accent, #5b6672);
border-bottom-color: var(--oz-brand-accent, #5b6672);
}
body .oz-single-product .woocommerce-tabs .woocommerce-Tabs-panel {
margin: 1.5rem 0 0;
padding: 0;
background: transparent;
border-radius: 0;
box-shadow: none;
color: #606060;
font-size: 14px;
line-height: 1.75;
}
body .oz-single-product .woocommerce-tabs .woocommerce-Tabs-panel > h2 {
margin: 0 0 12px;
font-size: 19px;
font-weight: 700;
line-height: 1.3;
color: #171717;
}
body .oz-single-product .woocommerce-tabs .woocommerce-Tabs-panel p {
margin: 0 0 14px;
}
body .oz-single-product .woocommerce-tabs .woocommerce-Tabs-panel--description ul {
list-style: none;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 50px;
row-gap: 18px;
margin: 24px 0 20px;
padding: 22px 0 0;
border-top: 1px solid #eeeeee;
}
body .oz-single-product .woocommerce-tabs .woocommerce-Tabs-panel--description ul::before {
content: "Beneficios principales";
grid-column: 1 / -1;
font-size: 19px;
font-weight: 700;
line-height: 1.3;
color: #171717;
margin-bottom: 2px;
}
body .oz-single-product .woocommerce-tabs .woocommerce-Tabs-panel--description p:has(+ ul) {
margin: 24px 0 14px;
padding: 22px 0 0;
border-top: 1px solid #eeeeee;
font-size: 19px;
font-weight: 700;
line-height: 1.3;
color: #171717;
}
body .oz-single-product .woocommerce-tabs .woocommerce-Tabs-panel--description p:has(+ ul) strong {
color: inherit;
font-weight: inherit;
}
body .oz-single-product .woocommerce-tabs .woocommerce-Tabs-panel--description p + ul {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
body .oz-single-product .woocommerce-tabs .woocommerce-Tabs-panel--description p + ul::before {
content: none;
}
body .oz-single-product .woocommerce-tabs .woocommerce-Tabs-panel--description ul li {
position: relative;
margin: 0;
padding-left: 34px;
}
body .oz-single-product .woocommerce-tabs .woocommerce-Tabs-panel--description ul li + li {
margin-top: 0;
}
body .oz-single-product .woocommerce-tabs .woocommerce-Tabs-panel--description ul li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
width: 22px;
height: 22px;
box-sizing: border-box;
border: 1.5px solid var(--oz-brand-accent, #5b6672);
border-radius: 50%;
background: #ffffff;
color: var(--oz-brand-accent, #5b6672);
font-size: 11px;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 767px) {
body .oz-single-product .woocommerce-tabs {
padding: 18px 16px 22px;
border-radius: 10px;
}
body .oz-single-product .woocommerce-tabs ul.tabs {
gap: 0 1.25rem;
}
body .oz-single-product .woocommerce-tabs .woocommerce-Tabs-panel--description ul {
grid-template-columns: 1fr;
column-gap: 0;
row-gap: 14px;
}
}
FIN DEL BLOQUE DESACTIVADO */