nativo del
template (ver functions.php: filtro woocommerce_product_description_heading
con prioridad 20, que gana sobre el __return_empty_string del tema padre;
estilos de color/tamaño/separador del viven ahí mismo, junto al
::after de la hoja, para mantener ambos juntos). Este pseudo-elemento
genérico queda retirado para no duplicar el heading. :first-child porque
algunos productos (ej. Frijol de Palo) traen su PROPIO real dentro
de la descripción (contenido real, no debe heredar este estilo). */
body .oz-single-product .woocommerce-tabs .woocommerce-Tabs-panel--description > h2:first-child {
font-size: 19px;
font-weight: 700;
line-height: 1.3;
}
/* [Fase 2.6, punto 2] Rótulo propio del producto (párrafo pegado a la
lista — dato real de post_content, confirmado con SQL: la mayoría de
productos con checklist traen literalmente "Especificaciones:" antes del
, ej. post 663). Redundante visualmente contra el nuevo heading
"Descripción y especificaciones" ya presente arriba. Se oculta SOLO en
single product vía CSS — el dato sigue en post_content sin tocar, por si
se necesita en otro contexto (feed, admin, etc.). No se borra contenido:
los - con los datos reales siguen intactos e inalterados debajo.
[Corrección — bug real encontrado] Esta regla ocultaba CUALQUIER
pegado a una
, sin distinguir un rótulo corto ("Especificaciones:")
de un párrafo con contenido real. Producto real afectado: Frijol
Canario Peruano en Saco de 25kg (post 358) trae
"![]()
Beneficios y Propiedades:
" pegado a su — la imagen entera desaparecía junto
con el rótulo. Se excluye explícitamente cualquier que contenga una
imagen alineada (:has(img.alignleft), :has(img.alignright)): esos SÍ
deben seguir visibles siempre, es contenido real, no un rótulo vacío. */
body .oz-single-product .woocommerce-tabs .woocommerce-Tabs-panel--description p:has(+ ul):not(:has(img.alignleft)):not(:has(img.alignright)) {
display: none;
}
/* [Fase 2.6, punto 2] Con el rótulo ahora oculto (arriba), la lista ya NO
debe perder su propia divisoria/espaciado — antes esta regla los ponía a
0 asumiendo que el rótulo visible ya aportaba el borde superior. Con el
rótulo display:none, "p + ul" seguía matcheando igual (display:none no
saca al elemento del DOM ni de los selectores de hermanos), así que sin
este ajuste la lista quedaba pegada al heading sin separación. Se deja
que el
use su borde/spacing propio (regla base de arriba) también
en este caso. */
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;
}
/* El padre separa ítems con li+li margin-top; aquí manda el row-gap */
body .oz-single-product .woocommerce-tabs .woocommerce-Tabs-panel--description ul li + li {
margin-top: 0;
}
/* [Fase 2, punto 11] Check minimalista: círculo blanco de 22px con borde y
tilde. Antes usaba var(--oz-brand-accent) = #9bca46 (confirmado en Fase
1.5, riesgo 5) — discrepancia real de 1 unidad por canal RGB contra el
verde que Home usa hardcodeado (#9CCB47) en sus cards/separadores. Se
fija el valor exacto de Home aquí (color LOCAL a esta sección, NO se
toca la variable --oz-brand-accent global ni :root). */
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 #9CCB47;
border-radius: 50%;
background: #ffffff;
color: #9CCB47;
font-size: 11px;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
/* 6. Responsive: tabs usables, beneficios a 1 columna, menos padding,
sin desbordes. */
@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;
}
}
/* =========================================================================
BOTÓN FLOTANTE DE WHATSAPP (Punto 7, sección 5-7 del brief) — implementación
propia, sin plugin externo, config independiente de perubean.local. Mismo
criterio visual que el sitio principal para mantener el mismo ecosistema
de marca. Esquina inferior derecha, no cubre contenido, sin animación
de rebote/pulso, sin auto-popup. No compite con .oz-cat-drawer (overlay
de pantalla completa, no un elemento fijo de esquina). */
.oz-wsp-float {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 9000;
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: #25D366;
color: #ffffff;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.oz-wsp-float:hover,
.oz-wsp-float:focus-visible {
color: #ffffff;
transform: scale(1.06);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
@media (max-width: 480px) {
.oz-wsp-float {
right: 14px;
bottom: 14px;
width: 50px;
height: 50px;
}
}
@media (prefers-reduced-motion: reduce) {
.oz-wsp-float {
transition: none;
}
}
/* =========================================================================
CATÁLOGO POR MARCA (shortcode oz_envasados_catalogo) — grid responsive de
tarjetas de producto real vía WooCommerce. Nunca muestra precio/carrito/
SKU, solo imagen + nombre + marca + presentación + CTA WhatsApp.
Corrección visual v2: tarjetas con más protagonismo (brief "Corrección
visual — no quedó como la referencia"). */
.oz-catalogo-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
max-width: 1300px;
margin: 30px auto 0;
}
.oz-catalogo-card {
display: flex;
flex-direction: column;
min-width: 0;
background: #ffffff;
border: 1px solid #ececec;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 3px 10px rgba(20, 30, 50, 0.05);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.oz-catalogo-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 28px rgba(20, 30, 50, 0.1);
}
.oz-catalogo-card__media {
position: relative;
height: 230px;
background: #f8f7f3;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 18px;
}
.oz-catalogo-card__media::after {
content: "";
position: absolute;
left: 50%;
bottom: 14px;
transform: translateX(-50%);
width: 58%;
height: 14px;
background: radial-gradient(ellipse at center, rgba(20,30,50,0.10), transparent 72%);
pointer-events: none;
}
.oz-catalogo-card__media img {
position: relative;
width: 100%;
height: 79%;
object-fit: contain;
display: block;
z-index: 1;
}
.oz-catalogo-card__body {
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
padding: 19px;
flex: 1;
}
.oz-catalogo-card__brand {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--oz-brand-accent, #9bca46);
}
.oz-catalogo-grid--supremo .oz-catalogo-card__brand {
color: #a3762c;
}
.oz-catalogo-grid--al-toque .oz-catalogo-card__brand {
color: #3f8a1f;
}
.oz-catalogo-grid--otras .oz-catalogo-card__brand {
color: #5b6672;
}
.oz-catalogo-card__title {
margin: 2px 0 0;
font-size: 19px;
font-weight: 700;
line-height: 1.28;
color: var(--oz-brand-primary, #1f589f);
}
.oz-catalogo-card__presentacion {
font-size: 13.5px;
color: #7a828d;
}
.oz-catalogo-card__desc {
margin: 2px 0 0;
font-size: 13px;
line-height: 1.45;
color: #7a828d;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.oz-catalogo-card__cta {
margin-top: auto;
}
.oz-catalogo-card__cta::before {
content: "";
display: block;
height: 1px;
background: #f0f0f0;
margin: 0 0 12px;
}
.oz-catalogo-card__cta {
display: flex;
align-items: center;
justify-content: center;
height: 43px;
background: #25D366;
color: #ffffff;
font-weight: 600;
font-size: 13.5px;
border-radius: 11px;
text-decoration: none;
text-align: center;
transition: background 0.15s ease;
box-sizing: border-box;
}
.oz-catalogo-card__cta svg {
flex: 0 0 auto;
margin-right: 8px;
}
.oz-catalogo-card__cta:hover,
.oz-catalogo-card__cta:focus-visible {
color: #ffffff;
background: #1fb457;
}
/* Fondo alterno por sección de marca — separa visualmente sin bloques
pesados (blanco / gris-verde extremadamente suave / blanco). Fila 7 =
sección Al Toque (índice de orden en new_rows: 0 hero, 1 beneficios,
2 calidad, 3 marcas-título, 4 marcas-grid, 5 catálogo-título, 6 Supremo,
7 Al Toque, 8 Otras Marcas — la clase .oz-pb-r-N la genera el builder por
posición en el array, no por el "id" numérico interno de la fila). */
.oz-pb-r-7 {
background: #fafaf8 !important;
}
/* Título de sección por marca — más presencia, con líneas decorativas
laterales suaves a cada lado del texto (referencia visual aprobada). */
.oz-catalogo-marca-titulo {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
color: var(--oz-brand-primary, #1f589f);
font-size: 20px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0 0 10px;
}
.oz-catalogo-marca-titulo::before,
.oz-catalogo-marca-titulo::after {
content: "";
flex: 1;
max-width: 120px;
height: 1px;
background: linear-gradient(90deg, transparent, currentColor, transparent);
opacity: 0.28;
}
/* Breakpoints alineados a la cascada oficial del Maquetador (schema v2,
includes/breakpoints.php): desktop >1366 / laptop ≤1366 / tablet-h ≤1024
/ tablet-v ≤768 / mobile ≤480. Se usan los mismos 4 umbrales aquí, en vez
de valores libres (767/991/390 etc.), para que coincida exactamente con
lo que el panel del Maquetador reporta al revisar cada vista. */
@media (max-width: 1366px) {
.oz-catalogo-grid {
max-width: 1120px;
gap: 20px;
}
}
@media (max-width: 1024px) {
.oz-catalogo-grid {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.oz-catalogo-card__cta {
padding-top: 0;
}
}
@media (max-width: 768px) {
.oz-catalogo-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.oz-catalogo-card__media {
height: 200px;
}
}
@media (max-width: 480px) {
/* En móvil el catálogo pasa de grid (todas las filas apiladas) a un
carrusel de scroll horizontal nativo: 1 sola fila por marca, el
usuario desliza con el dedo para ver el resto de productos en vez
de bajar la página. Sin JS — scroll-snap nativo del navegador. */
.oz-catalogo-grid {
display: flex;
grid-template-columns: none;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: 10px;
padding-bottom: 6px;
margin-left: -4vw;
margin-right: -4vw;
padding-left: 4vw;
padding-right: 4vw;
}
.oz-catalogo-card {
flex: 0 0 44vw;
max-width: 44vw;
scroll-snap-align: start;
}
.oz-catalogo-card__media {
height: 150px;
padding: 12px;
}
.oz-catalogo-card__body {
padding: 14px;
}
.oz-catalogo-card__title {
font-size: 15px;
}
.oz-catalogo-card__cta {
font-size: 12px;
min-height: 40px;
height: auto;
padding: 8px 6px;
line-height: 1.25;
text-align: left;
}
.oz-catalogo-card__cta svg {
margin-right: 6px;
}
}
/* Flechas del carrusel de catálogo — ocultas por defecto (base, sin media
query) y solo se muestran en móvil (regla dentro del @media abajo). El
orden importa: con la misma especificidad (0,1,0) en ambas reglas, la
que aparece DESPUÉS en el archivo gana — por eso la base (display:none)
va primero y el override (display:flex) va después, aunque esté dentro
de un @media; si se invierte el orden, "none" termina ganando siempre
sin importar el ancho de pantalla (bug ya visto antes en esta sesión
con .oz-pb-block vs .oz-proceso-img). */
.oz-catalogo-carousel {
position: relative;
}
.oz-catalogo-carousel__nav {
display: none;
position: absolute;
top: 90px;
z-index: 3;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 2px 8px rgba(20, 30, 50, 0.18);
color: #1f589f;
cursor: pointer;
}
.oz-catalogo-carousel__nav--prev { left: 2px; }
.oz-catalogo-carousel__nav--next { right: 2px; }
@media (max-width: 480px) {
.oz-catalogo-carousel__nav {
display: flex;
}
}
/* Botón CTA final de WhatsApp (shortcode oz_envasados_whatsapp_cta) —
cierre comercial: icono a la izquierda, texto grande, más presencia
(brief "último pulido visual"). */
a.oz-envasados-wsp-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
height: 52px;
min-width: 220px;
padding: 0 30px;
background: #25D366;
color: #ffffff;
font-weight: 700;
font-size: 15.5px;
border-radius: 11px;
text-decoration: none;
box-shadow: 0 6px 18px rgba(0,0,0,0.18);
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.oz-envasados-wsp-cta::before {
content: "";
flex: 0 0 auto;
width: 19px;
height: 19px;
background-color: #ffffff;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12c0 1.85.5 3.58 1.36 5.07L2 22l5.06-1.33A9.94 9.94 0 0 0 12 22c5.52 0 10-4.48 10-10S17.52 2 12 2Zm0 18c-1.62 0-3.13-.47-4.4-1.28l-.32-.19-3.01.79.8-2.93-.21-.3A7.94 7.94 0 0 1 4 12c0-4.41 3.59-8 8-8s8 3.59 8 8-3.59 8-8 8Zm4.38-5.86c-.24-.12-1.42-.7-1.64-.78-.22-.08-.38-.12-.54.12-.16.24-.62.78-.76.94-.14.16-.28.18-.52.06-.24-.12-1.01-.37-1.92-1.18-.71-.63-1.19-1.41-1.33-1.65-.14-.24-.01-.37.11-.49.11-.11.24-.28.36-.42.12-.14.16-.24.24-.4.08-.16.04-.3-.02-.42-.06-.12-.54-1.3-.74-1.78-.19-.47-.39-.4-.54-.41-.14-.01-.3-.01-.46-.01-.16 0-.42.06-.64.3-.22.24-.84.82-.84 2s.86 2.32.98 2.48c.12.16 1.7 2.6 4.12 3.64.58.25 1.03.4 1.38.51.58.18 1.11.16 1.53.1.47-.07 1.42-.58 1.62-1.14.2-.56.2-1.04.14-1.14-.06-.1-.22-.16-.46-.28Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12c0 1.85.5 3.58 1.36 5.07L2 22l5.06-1.33A9.94 9.94 0 0 0 12 22c5.52 0 10-4.48 10-10S17.52 2 12 2Zm0 18c-1.62 0-3.13-.47-4.4-1.28l-.32-.19-3.01.79.8-2.93-.21-.3A7.94 7.94 0 0 1 4 12c0-4.41 3.59-8 8-8s8 3.59 8 8-3.59 8-8 8Zm4.38-5.86c-.24-.12-1.42-.7-1.64-.78-.22-.08-.38-.12-.54.12-.16.24-.62.78-.76.94-.14.16-.28.18-.52.06-.24-.12-1.01-.37-1.92-1.18-.71-.63-1.19-1.41-1.33-1.65-.14-.24-.01-.37.11-.49.11-.11.24-.28.36-.42.12-.14.16-.24.24-.4.08-.16.04-.3-.02-.42-.06-.12-.54-1.3-.74-1.78-.19-.47-.39-.4-.54-.41-.14-.01-.3-.01-.46-.01-.16 0-.42.06-.64.3-.22.24-.84.82-.84 2s.86 2.32.98 2.48c.12.16 1.7 2.6 4.12 3.64.58.25 1.03.4 1.38.51.58.18 1.11.16 1.53.1.47-.07 1.42-.58 1.62-1.14.2-.56.2-1.04.14-1.14-.06-.1-.22-.16-.46-.28Z'/%3E%3C/svg%3E");
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-size: contain;
-webkit-mask-size: contain;
}
a.oz-envasados-wsp-cta:hover,
a.oz-envasados-wsp-cta:focus-visible {
color: #ffffff;
background: #1fb457;
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0,0,0,0.22);
}
.oz-cta-inner {
position: relative;
min-height: 160px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
padding: 30px 0;
/* Textura vegetal/granos MUY sutil, 100% CSS (sin imagen nueva). */
background-image:
radial-gradient(circle at 8px 8px, rgba(255,255,255,0.05) 1.4px, transparent 1.6px);
background-size: 26px 26px;
}
.oz-cta-inner__left {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 20px;
}
.oz-cta-inner__icon {
flex: 0 0 auto;
width: 60px;
height: 60px;
border-radius: 50%;
background: #25D366;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}
.oz-cta-inner__eyebrow {
display: block;
color: #9bca46;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0 0 6px;
}
.oz-cta-inner__title {
margin: 0 0 6px;
color: #ffffff;
font-size: 28px;
font-weight: 700;
}
.oz-cta-inner__subtitle {
margin: 0;
color: #dfe9f6;
font-size: 15px;
max-width: 440px;
}
.oz-cta-inner__right {
position: relative;
z-index: 1;
flex: 0 0 auto;
}
@media (max-width: 768px) {
.oz-cta-inner {
flex-direction: column;
text-align: center;
justify-content: center;
padding: 38px 0;
}
.oz-cta-inner__left {
flex-direction: column;
text-align: center;
}
.oz-cta-inner__subtitle {
max-width: 100%;
}
a.oz-envasados-wsp-cta {
width: 100%;
max-width: 300px;
}
}
/* ============================================================
HERO v2 — slider propio a base de fade (opacity), sin scroll
horizontal ni scroll-snap (mecanismo distinto al slider anterior de
OZ-Sliders, que mostraba una división de luz irreproducible aislada
hasta la capa de composición GPU del navegador).
============================================================ */
.oz-hero-fade {
position: relative;
width: 100%;
height: 600px;
overflow: hidden;
background: #0d2c5c;
}
.oz-hero-fade__slide {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.9s ease;
}
.oz-hero-fade__slide--active {
opacity: 1;
visibility: visible;
}
.oz-hero-fade__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.oz-hero-fade__overlay {
position: absolute;
inset: 0;
background: rgba(0,8,28,0.32);
}
.oz-hero-fade__content {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 0 8vw;
max-width: 640px;
}
.oz-hero-fade .oz-hero-fade__title,
h2.oz-hero-fade__title {
color: #ffffff !important;
font-size: 52px !important;
font-weight: 700;
line-height: 1.1;
margin: 0 0 18px;
text-shadow: 0 2px 14px rgba(0,0,0,0.35);
}
.oz-hero-fade .oz-hero-fade__subtitle {
color: #f0f3f8 !important;
font-size: 18px !important;
line-height: 1.55;
margin: 0 0 28px;
max-width: 520px;
text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}
.oz-hero-fade .oz-hero-fade__button {
display: inline-flex;
align-items: center;
justify-content: center;
background: #9bca46;
color: #16311b;
font-weight: 700;
font-size: 15px;
height: 49px;
padding: 0 30px;
border-radius: 8px;
text-decoration: none;
white-space: nowrap;
width: fit-content;
}
.oz-hero-fade .oz-hero-fade__button:hover {
color: #16311b;
text-decoration: none;
}
.oz-hero-fade__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 6;
width: 54px;
height: 54px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(12,10,8,0.72);
border: 1px solid rgba(229,180,92,0.75);
border-radius: 10px;
cursor: pointer;
transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.oz-hero-fade__nav:hover {
background: rgba(18,14,10,0.88);
border-color: rgba(245,193,96,1);
transform: translateY(-50%) scale(1.05);
}
.oz-hero-fade__nav--prev { left: 16px; }
.oz-hero-fade__nav--next { right: 16px; }
.oz-hero-fade__dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 5;
display: flex;
gap: 8px;
}
.oz-hero-fade__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255,255,255,0.4);
border: none;
padding: 0;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
}
.oz-hero-fade__dot--active {
background: #ffffff;
transform: scale(1.3);
}
/* Laptop (≤1366px): mismo layout, solo se acota el ancho del texto para
que nunca llegue a tocar las flechas de navegación (54px + 16px offset
a cada lado). */
@media (max-width: 1366px) {
.oz-hero-fade .oz-hero-fade__content {
padding: 0 7vw;
max-width: 580px;
}
.oz-hero-fade .oz-hero-fade__subtitle {
max-width: 460px;
}
}
/* Tablet horizontal (≤1024px): título/alto reducidos, mismo padding
lateral pensado para no chocar con las flechas. */
@media (max-width: 1024px) {
.oz-hero-fade {
height: 520px;
}
.oz-hero-fade .oz-hero-fade__content {
padding: 0 90px 0 6vw;
max-width: 460px;
}
.oz-hero-fade .oz-hero-fade__title {
font-size: 40px !important;
}
.oz-hero-fade .oz-hero-fade__subtitle {
font-size: 15.5px !important;
max-width: 380px;
}
}
@media (max-width: 768px) {
/* min-height (no height fijo): en pantallas de poca altura real
(teléfonos con barra de direcciones visible, extensiones de
simulación con viewport corto, etc.) el contenido puede necesitar
más de 480px — con min-height la fila crece en vez de comprimir el
texto contra las flechas ancladas abajo. padding-bottom reserva el
espacio real que ocupan flechas (40px) + dots (¬20px) para que el
botón nunca termine debajo de ellas aunque el texto sea largo. */
.oz-hero-fade {
height: auto;
min-height: 480px;
}
.oz-hero-fade .oz-hero-fade__content {
align-items: center;
text-align: center;
padding: 32px 6vw 76px;
max-width: 100%;
}
.oz-hero-fade .oz-hero-fade__title {
font-size: 34px !important;
}
.oz-hero-fade .oz-hero-fade__subtitle {
font-size: 15.5px !important;
max-width: 100%;
}
.oz-hero-fade__overlay {
background: rgba(0,8,28,0.5);
}
.oz-hero-fade__nav {
top: auto;
bottom: 14px;
transform: none;
width: 40px;
height: 40px;
}
.oz-hero-fade__nav:hover {
transform: scale(1.05);
}
.oz-hero-fade__nav--prev { left: 14px; }
.oz-hero-fade__nav--next { right: 14px; }
.oz-hero-fade__dots {
bottom: 24px;
}
}
/* ============================================================
HERO NATIVO (v3) — .oz-hero-native, componente real OZ-Sliders
(shortcode oz_slider_banner, preset "Slider Principal" editable desde
wp-admin). Reemplaza el fade hecho a mano (.oz-hero-fade, arriba, ya
sin uso) para que el cliente pueda editar el hero sin tocar código.
Fondo opaco explícito en toda la cadena del track: por defecto
.ozs/.ozs__viewport/.ozs__track/.ozs__media son transparentes en el
CSS del plugin, así que cualquier corte de 1px durante el scroll deja
ver el fondo claro de la página — se fuerza un tono oscuro (mismo que
el overlay) para que un corte, si ocurre, sea imperceptible sobre las
fotos en vez de una línea de luz. */
.oz-hero-native,
.oz-hero-native .ozs__viewport,
.oz-hero-native .ozs__track,
.oz-hero-native .ozs__media,
.oz-hero-native .ozs__slide {
background: #0d2c5c !important;
}
.oz-hero-native {
--ozs-gap: 0px !important;
}
.oz-hero-native .ozs__content {
align-items: flex-start;
text-align: left;
padding: 0 8vw;
max-width: 640px;
}
.oz-hero-native .oz-slide__title {
color: #ffffff !important;
font-size: 52px !important;
font-weight: 700;
line-height: 1.1;
margin: 0 0 18px;
text-shadow: 0 2px 14px rgba(0,0,0,0.35);
}
.oz-hero-native .oz-slide__subtitle {
color: #f0f3f8 !important;
font-size: 18px !important;
line-height: 1.55;
margin: 0 0 28px;
max-width: 520px;
text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}
.oz-hero-native .ozs__button.oz-slide__button {
display: inline-flex;
align-items: center;
justify-content: center;
background: #9bca46;
color: #16311b;
font-weight: 700;
font-size: 15px;
height: 49px;
padding: 0 30px;
border-radius: 8px;
text-decoration: none;
white-space: nowrap;
width: fit-content;
margin-top: 0;
}
.oz-hero-native .ozs__button.oz-slide__button:hover {
color: #16311b;
text-decoration: none;
}
html body .ozs.ozs--banner.oz-hero-native .ozs__nav-btn,
.oz-hero-native .ozs__nav-btn {
z-index: 6;
width: 54px;
height: 54px;
background: rgba(12,10,8,0.72);
border: 1px solid rgba(229,180,92,0.75);
border-radius: 10px;
transition: none !important;
animation: none !important;
}
.oz-hero-native .ozs__nav-btn:hover,
.oz-hero-native .ozs__nav-btn:focus-visible,
html body .ozs.ozs--banner.oz-hero-native .ozs__nav-btn:hover,
html body .ozs.ozs--banner.oz-hero-native .ozs__nav-btn:focus-visible {
background: rgba(18,14,10,0.88);
border-color: rgba(245,193,96,1);
transform: translateY(-50%) !important;
box-shadow: none !important;
}
.oz-hero-native .ozs__nav-btn::before {
border-top-color: #fff;
border-right-color: #fff;
width: 10px;
height: 10px;
transition: none !important;
}
.oz-hero-native .ozs__nav-btn--prev:hover::before,
.oz-hero-native .ozs__nav-btn--prev:focus-visible::before,
.oz-hero-native .ozs__nav-btn--next:hover::before,
.oz-hero-native .ozs__nav-btn--next:focus-visible::before,
html body .ozs.ozs--banner.oz-hero-native .ozs__nav-btn--prev:hover::before,
html body .ozs.ozs--banner.oz-hero-native .ozs__nav-btn--prev:focus-visible::before,
html body .ozs.ozs--banner.oz-hero-native .ozs__nav-btn--next:hover::before,
html body .ozs.ozs--banner.oz-hero-native .ozs__nav-btn--next:focus-visible::before {
transform: none !important;
}
.oz-hero-native .ozs__nav-btn--prev { left: 16px; }
.oz-hero-native .ozs__nav-btn--next { right: 16px; }
.oz-hero-native .ozs__dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 5;
}
.oz-hero-native .ozs__dot {
width: 8px;
height: 8px;
background: rgba(255,255,255,0.4);
}
.oz-hero-native .ozs__dot.is-active {
background: #ffffff;
transform: scale(1.3);
}
@media (max-width: 1366px) {
.oz-hero-native .ozs__content {
padding: 0 7vw;
max-width: 580px;
}
.oz-hero-native .oz-slide__subtitle {
max-width: 460px;
}
}
@media (max-width: 1024px) {
.oz-hero-native .ozs__content {
padding: 0 90px 0 90px;
max-width: 460px;
}
.oz-hero-native .oz-slide__title {
font-size: 40px !important;
}
.oz-hero-native .oz-slide__subtitle {
font-size: 15.5px !important;
max-width: 380px;
}
}
/* ≤768px (tablet_v y mobile): las imágenes "mobile" de cada slide ya
traen su propio título/bajada/badges impresos (generadas aparte para
este formato vertical) — mostrar ADEMÁS el título/subtítulo/botón del
componente duplicaba el mensaje. Se oculta todo el overlay de texto;
el clic para ir a la sección de marcas lo resuelve el campo nativo
"Enlace (URL)" de cada slide (link/target en banner-model-1.php), que
convierte la imagen entera en un — no un botón de texto aparte. */
@media (max-width: 768px) {
.oz-hero-native .ozs__content {
display: none;
}
.oz-hero-native .ozs__overlay {
display: none;
}
.oz-hero-native .ozs__nav-btn {
top: auto !important;
bottom: 14px;
transform: none !important;
width: 40px;
height: 40px;
}
.oz-hero-native .ozs__nav-btn:hover,
.oz-hero-native .ozs__nav-btn:focus-visible,
html body .ozs.ozs--banner.oz-hero-native .ozs__nav-btn:hover,
html body .ozs.ozs--banner.oz-hero-native .ozs__nav-btn:focus-visible {
transform: none !important;
}
.oz-hero-native .ozs__nav-btn--prev { left: 14px; }
.oz-hero-native .ozs__nav-btn--next { right: 14px; }
.oz-hero-native .ozs__dots {
bottom: 24px;
}
}
@media (max-width: 480px) {
.oz-hero-native .ozs__nav-btn,
html body .ozs.ozs--banner.oz-hero-native .ozs__nav-btn {
display: none !important;
}
}
/* Nuestras Marcas — las 2 cards (Supremo/Al Toque) no tenían NINGÚN ajuste
responsive propio (todo en estilos inline fijos: height:320px, imagen
57% + texto lado a lado siempre) — en pantallas angostas el texto
quedaba comprimido a 2-3 palabras por línea dentro de un ancho de
~140px. Se agregan clases para poder apilar imagen/texto en vez de
ponerlos lado a lado por debajo de tablet horizontal. */
.oz-marcas-row {
display: flex;
gap: 32px;
align-items: stretch;
flex-wrap: wrap;
}
.oz-marca-card {
flex: 1;
min-width: 0;
display: flex;
height: 320px;
}
.oz-marca-card__media {
flex: 0 0 57%;
height: 100%;
}
.oz-marca-card__body {
flex: 1;
}
@media (max-width: 1024px) {
.oz-marca-card {
height: 280px;
}
.oz-marca-card__body {
padding: 22px 20px !important;
}
.oz-marca-card__body h3 {
font-size: 21px !important;
}
}
@media (max-width: 768px) {
.oz-marcas-row {
flex-direction: column;
gap: 24px;
}
.oz-marca-card {
height: auto;
flex-direction: column;
flex: 1 1 auto;
}
.oz-marca-card__media {
flex: 0 0 auto;
height: 220px;
}
/* El centrado del contenido de la tarjeta (badge, título, texto y botón)
ya no es solo de móvil: vive en .ozx-marca (global-classes.css) y
aplica en todas las vistas, así que aquí no se repite. */
}
@media (max-width: 480px) {
.oz-marca-card__media {
height: 190px;
}
.oz-marca-card__body {
padding: 24px 20px !important;
}
}
/* Proceso y Calidad (fila oz-pb-r-9, columnas 35/65): al no ser un split
50/50 el Maquetador la marca "keep-mobile" (oz_pb_cols_are_balanced) y
NO la apila en tablet vertical — texto e imagen quedan lado a lado,
comprimiendo el collage a una tira casi ilegible. Se fuerza el apilado
a 2 filas (texto arriba, imagen abajo) solo para esta fila específica,
sin tocar el comportamiento general de columnas desiguales del resto
del sitio. */
@media (max-width: 768px) {
.oz-pb-r-9 .oz-pb-grid {
grid-template-columns: 1fr !important;
}
.oz-pb-r-9 .oz-pb-col {
grid-column: 1 / -1 !important;
margin-left: 0 !important;
}
}
/* Collage "Proceso y Calidad" — bloque tipo Imagen real del Maquetador
(antes era un bloque de Texto con un ![]()
suelto adentro; se cambió
para que el panel del editor muestre el componente correcto). El
border-radius/sombra que antes iban inline en el ![]()
ahora se
resuelven aquí, apuntando al wrapper real que genera el builder para
bloques tipo imagen (.oz-pb-block--image, figura .oz-pb-image). */
.oz-proceso-img .oz-pb-image {
border-radius: 18px;
overflow: hidden;
box-shadow: 0 14px 34px rgba(31, 88, 159, 0.14);
display: block;
}
.oz-proceso-img .oz-pb-image img {
width: 100%;
height: auto;
display: block;
}
@media (max-width: 768px) {
.oz-proceso-texto {
max-width: 100% !important;
text-align: center;
}
.oz-proceso-img.oz-pb-block {
margin-top: 32px !important;
}
}
/* En movil el collage (proporción muy panorámica, ~5.8:1) se ve como una
tira delgada con height:auto — se fuerza una altura real y
object-fit:cover para que ocupe más espacio vertical sin deformarse
(recorta un poco de los extremos, no estira la imagen). */
@media (max-width: 480px) {
.oz-proceso-img .oz-pb-image img {
height: 220px;
object-fit: cover;
object-position: center;
}
}
/* Banda de beneficios — reconstruida con 4 bloques reales "Icono + Texto"
del Maquetador (antes era HTML manual dentro de un bloque de Texto).
El translateY/sombra "flotante" no tiene campo propio en el panel de la
fila (el sanitizador aplica absint() a los márgenes, elimina negativos
— visto antes en esta sesión con el hero), así que se resuelve aquí vía
className igual que en el resto del sitio. */
html body .oz-pb-root .oz-pb-r-1.oz-beneficios-row.oz-pb-section--theme.oz-pb-spacing-scope,
html body .oz-pb-root .oz-pb-r-1.oz-beneficios-row.oz-pb-section--full.oz-pb-spacing-scope {
max-width: 1220px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.oz-beneficios-row {
position: relative;
z-index: 5;
box-shadow: 0 16px 36px rgba(15, 40, 80, 0.28);
transform: translateY(-46px);
margin-bottom: -46px;
}
.oz-beneficios-row .oz-pb-it__desc {
text-align: center;
text-align-last: center;
}
.oz-beneficios-row .oz-pb-it__icon img {
width: 26px;
height: 26px;
opacity: 0.95;
}
.oz-beneficios-row .oz-pb-icon-text {
gap: 6px;
}
.oz-beneficios-item--1,
.oz-beneficios-item--2,
.oz-beneficios-item--3 {
border-left: 1px solid rgba(255, 255, 255, 0.18);
}
/* Tablet vertical (768px): 2x2 en vez de 4 en fila (se ven muy angostas)
o 1 sola columna (comportamiento por defecto del Maquetador al no ser
un split 50/50 — mismo patrón "keep-mobile" ya visto con Proceso y
Calidad). Ancho contenido, no 100%, según lo pedido. */
@media (max-width: 768px) {
html body .oz-pb-root .oz-pb-r-1.oz-beneficios-row.oz-pb-section--theme.oz-pb-spacing-scope,
html body .oz-pb-root .oz-pb-r-1.oz-beneficios-row.oz-pb-section--full.oz-pb-spacing-scope {
max-width: 520px !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
@media (max-width: 480px) {
html body .oz-pb-root .oz-pb-r-1.oz-beneficios-row.oz-pb-section--theme.oz-pb-spacing-scope,
html body .oz-pb-root .oz-pb-r-1.oz-beneficios-row.oz-pb-section--full.oz-pb-spacing-scope {
max-width: calc(100vw - 32px) !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
@media (max-width: 768px) {
.oz-pb-r-1 .oz-pb-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
/* El CSS base del plugin fuerza grid-column:1/-1 !important en móvil
para columnas "balanceadas" (25-25-25-25 sí lo son, por eso no trae
la clase .oz-pb-grid--keep-mobile) — su selector es más específico
que uno simple, así que aquí se replica la MISMA cadena de
ancestros (html body .oz-pb-root ... .oz-pb-grid > .oz-pb-col) para
igualar la especificidad y ganar por ser la regla declarada después
en el archivo. */
html body .oz-pb-root .oz-pb-r-1.oz-pb-grid > .oz-pb-col,
html body .oz-pb-root .oz-pb-r-1 .oz-pb-grid > .oz-pb-col {
grid-column: auto !important;
}
.oz-beneficios-item--0,
.oz-beneficios-item--1,
.oz-beneficios-item--2,
.oz-beneficios-item--3 {
border-left: none;
padding: 16px 10px;
}
.oz-beneficios-item--1 {
border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.oz-beneficios-item--2,
.oz-beneficios-item--3 {
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.oz-beneficios-item--3 {
border-left: 1px solid rgba(255, 255, 255, 0.18);
}
}
real dentro
de la descripción (contenido real, no debe heredar este estilo). */
body .oz-single-product .woocommerce-tabs .woocommerce-Tabs-panel--description > h2:first-child {
font-size: 19px;
font-weight: 700;
line-height: 1.3;
}
/* [Fase 2.6, punto 2] Rótulo propio del producto (párrafo pegado a la
lista — dato real de post_content, confirmado con SQL: la mayoría de
productos con checklist traen literalmente "Especificaciones:" antes del
, ej. post 663). Redundante visualmente contra el nuevo heading
"Descripción y especificaciones" ya presente arriba. Se oculta SOLO en
single product vía CSS — el dato sigue en post_content sin tocar, por si
se necesita en otro contexto (feed, admin, etc.). No se borra contenido:
los - con los datos reales siguen intactos e inalterados debajo.
[Corrección — bug real encontrado] Esta regla ocultaba CUALQUIER
pegado a una
, sin distinguir un rótulo corto ("Especificaciones:")
de un párrafo con contenido real. Producto real afectado: Frijol
Canario Peruano en Saco de 25kg (post 358) trae
"![]()
Beneficios y Propiedades:
" pegado a su — la imagen entera desaparecía junto
con el rótulo. Se excluye explícitamente cualquier que contenga una
imagen alineada (:has(img.alignleft), :has(img.alignright)): esos SÍ
deben seguir visibles siempre, es contenido real, no un rótulo vacío. */
body .oz-single-product .woocommerce-tabs .woocommerce-Tabs-panel--description p:has(+ ul):not(:has(img.alignleft)):not(:has(img.alignright)) {
display: none;
}
/* [Fase 2.6, punto 2] Con el rótulo ahora oculto (arriba), la lista ya NO
debe perder su propia divisoria/espaciado — antes esta regla los ponía a
0 asumiendo que el rótulo visible ya aportaba el borde superior. Con el
rótulo display:none, "p + ul" seguía matcheando igual (display:none no
saca al elemento del DOM ni de los selectores de hermanos), así que sin
este ajuste la lista quedaba pegada al heading sin separación. Se deja
que el
use su borde/spacing propio (regla base de arriba) también
en este caso. */
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;
}
/* El padre separa ítems con li+li margin-top; aquí manda el row-gap */
body .oz-single-product .woocommerce-tabs .woocommerce-Tabs-panel--description ul li + li {
margin-top: 0;
}
/* [Fase 2, punto 11] Check minimalista: círculo blanco de 22px con borde y
tilde. Antes usaba var(--oz-brand-accent) = #9bca46 (confirmado en Fase
1.5, riesgo 5) — discrepancia real de 1 unidad por canal RGB contra el
verde que Home usa hardcodeado (#9CCB47) en sus cards/separadores. Se
fija el valor exacto de Home aquí (color LOCAL a esta sección, NO se
toca la variable --oz-brand-accent global ni :root). */
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 #9CCB47;
border-radius: 50%;
background: #ffffff;
color: #9CCB47;
font-size: 11px;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
/* 6. Responsive: tabs usables, beneficios a 1 columna, menos padding,
sin desbordes. */
@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;
}
}
/* =========================================================================
BOTÓN FLOTANTE DE WHATSAPP (Punto 7, sección 5-7 del brief) — implementación
propia, sin plugin externo, config independiente de perubean.local. Mismo
criterio visual que el sitio principal para mantener el mismo ecosistema
de marca. Esquina inferior derecha, no cubre contenido, sin animación
de rebote/pulso, sin auto-popup. No compite con .oz-cat-drawer (overlay
de pantalla completa, no un elemento fijo de esquina). */
.oz-wsp-float {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 9000;
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: #25D366;
color: #ffffff;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.oz-wsp-float:hover,
.oz-wsp-float:focus-visible {
color: #ffffff;
transform: scale(1.06);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
@media (max-width: 480px) {
.oz-wsp-float {
right: 14px;
bottom: 14px;
width: 50px;
height: 50px;
}
}
@media (prefers-reduced-motion: reduce) {
.oz-wsp-float {
transition: none;
}
}
/* =========================================================================
CATÁLOGO POR MARCA (shortcode oz_envasados_catalogo) — grid responsive de
tarjetas de producto real vía WooCommerce. Nunca muestra precio/carrito/
SKU, solo imagen + nombre + marca + presentación + CTA WhatsApp.
Corrección visual v2: tarjetas con más protagonismo (brief "Corrección
visual — no quedó como la referencia"). */
.oz-catalogo-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
max-width: 1300px;
margin: 30px auto 0;
}
.oz-catalogo-card {
display: flex;
flex-direction: column;
min-width: 0;
background: #ffffff;
border: 1px solid #ececec;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 3px 10px rgba(20, 30, 50, 0.05);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.oz-catalogo-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 28px rgba(20, 30, 50, 0.1);
}
.oz-catalogo-card__media {
position: relative;
height: 230px;
background: #f8f7f3;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 18px;
}
.oz-catalogo-card__media::after {
content: "";
position: absolute;
left: 50%;
bottom: 14px;
transform: translateX(-50%);
width: 58%;
height: 14px;
background: radial-gradient(ellipse at center, rgba(20,30,50,0.10), transparent 72%);
pointer-events: none;
}
.oz-catalogo-card__media img {
position: relative;
width: 100%;
height: 79%;
object-fit: contain;
display: block;
z-index: 1;
}
.oz-catalogo-card__body {
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
padding: 19px;
flex: 1;
}
.oz-catalogo-card__brand {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--oz-brand-accent, #9bca46);
}
.oz-catalogo-grid--supremo .oz-catalogo-card__brand {
color: #a3762c;
}
.oz-catalogo-grid--al-toque .oz-catalogo-card__brand {
color: #3f8a1f;
}
.oz-catalogo-grid--otras .oz-catalogo-card__brand {
color: #5b6672;
}
.oz-catalogo-card__title {
margin: 2px 0 0;
font-size: 19px;
font-weight: 700;
line-height: 1.28;
color: var(--oz-brand-primary, #1f589f);
}
.oz-catalogo-card__presentacion {
font-size: 13.5px;
color: #7a828d;
}
.oz-catalogo-card__desc {
margin: 2px 0 0;
font-size: 13px;
line-height: 1.45;
color: #7a828d;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.oz-catalogo-card__cta {
margin-top: auto;
}
.oz-catalogo-card__cta::before {
content: "";
display: block;
height: 1px;
background: #f0f0f0;
margin: 0 0 12px;
}
.oz-catalogo-card__cta {
display: flex;
align-items: center;
justify-content: center;
height: 43px;
background: #25D366;
color: #ffffff;
font-weight: 600;
font-size: 13.5px;
border-radius: 11px;
text-decoration: none;
text-align: center;
transition: background 0.15s ease;
box-sizing: border-box;
}
.oz-catalogo-card__cta svg {
flex: 0 0 auto;
margin-right: 8px;
}
.oz-catalogo-card__cta:hover,
.oz-catalogo-card__cta:focus-visible {
color: #ffffff;
background: #1fb457;
}
/* Fondo alterno por sección de marca — separa visualmente sin bloques
pesados (blanco / gris-verde extremadamente suave / blanco). Fila 7 =
sección Al Toque (índice de orden en new_rows: 0 hero, 1 beneficios,
2 calidad, 3 marcas-título, 4 marcas-grid, 5 catálogo-título, 6 Supremo,
7 Al Toque, 8 Otras Marcas — la clase .oz-pb-r-N la genera el builder por
posición en el array, no por el "id" numérico interno de la fila). */
.oz-pb-r-7 {
background: #fafaf8 !important;
}
/* Título de sección por marca — más presencia, con líneas decorativas
laterales suaves a cada lado del texto (referencia visual aprobada). */
.oz-catalogo-marca-titulo {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
color: var(--oz-brand-primary, #1f589f);
font-size: 20px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0 0 10px;
}
.oz-catalogo-marca-titulo::before,
.oz-catalogo-marca-titulo::after {
content: "";
flex: 1;
max-width: 120px;
height: 1px;
background: linear-gradient(90deg, transparent, currentColor, transparent);
opacity: 0.28;
}
/* Breakpoints alineados a la cascada oficial del Maquetador (schema v2,
includes/breakpoints.php): desktop >1366 / laptop ≤1366 / tablet-h ≤1024
/ tablet-v ≤768 / mobile ≤480. Se usan los mismos 4 umbrales aquí, en vez
de valores libres (767/991/390 etc.), para que coincida exactamente con
lo que el panel del Maquetador reporta al revisar cada vista. */
@media (max-width: 1366px) {
.oz-catalogo-grid {
max-width: 1120px;
gap: 20px;
}
}
@media (max-width: 1024px) {
.oz-catalogo-grid {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.oz-catalogo-card__cta {
padding-top: 0;
}
}
@media (max-width: 768px) {
.oz-catalogo-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.oz-catalogo-card__media {
height: 200px;
}
}
@media (max-width: 480px) {
/* En móvil el catálogo pasa de grid (todas las filas apiladas) a un
carrusel de scroll horizontal nativo: 1 sola fila por marca, el
usuario desliza con el dedo para ver el resto de productos en vez
de bajar la página. Sin JS — scroll-snap nativo del navegador. */
.oz-catalogo-grid {
display: flex;
grid-template-columns: none;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: 10px;
padding-bottom: 6px;
margin-left: -4vw;
margin-right: -4vw;
padding-left: 4vw;
padding-right: 4vw;
}
.oz-catalogo-card {
flex: 0 0 44vw;
max-width: 44vw;
scroll-snap-align: start;
}
.oz-catalogo-card__media {
height: 150px;
padding: 12px;
}
.oz-catalogo-card__body {
padding: 14px;
}
.oz-catalogo-card__title {
font-size: 15px;
}
.oz-catalogo-card__cta {
font-size: 12px;
min-height: 40px;
height: auto;
padding: 8px 6px;
line-height: 1.25;
text-align: left;
}
.oz-catalogo-card__cta svg {
margin-right: 6px;
}
}
/* Flechas del carrusel de catálogo — ocultas por defecto (base, sin media
query) y solo se muestran en móvil (regla dentro del @media abajo). El
orden importa: con la misma especificidad (0,1,0) en ambas reglas, la
que aparece DESPUÉS en el archivo gana — por eso la base (display:none)
va primero y el override (display:flex) va después, aunque esté dentro
de un @media; si se invierte el orden, "none" termina ganando siempre
sin importar el ancho de pantalla (bug ya visto antes en esta sesión
con .oz-pb-block vs .oz-proceso-img). */
.oz-catalogo-carousel {
position: relative;
}
.oz-catalogo-carousel__nav {
display: none;
position: absolute;
top: 90px;
z-index: 3;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 2px 8px rgba(20, 30, 50, 0.18);
color: #1f589f;
cursor: pointer;
}
.oz-catalogo-carousel__nav--prev { left: 2px; }
.oz-catalogo-carousel__nav--next { right: 2px; }
@media (max-width: 480px) {
.oz-catalogo-carousel__nav {
display: flex;
}
}
/* Botón CTA final de WhatsApp (shortcode oz_envasados_whatsapp_cta) —
cierre comercial: icono a la izquierda, texto grande, más presencia
(brief "último pulido visual"). */
a.oz-envasados-wsp-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
height: 52px;
min-width: 220px;
padding: 0 30px;
background: #25D366;
color: #ffffff;
font-weight: 700;
font-size: 15.5px;
border-radius: 11px;
text-decoration: none;
box-shadow: 0 6px 18px rgba(0,0,0,0.18);
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.oz-envasados-wsp-cta::before {
content: "";
flex: 0 0 auto;
width: 19px;
height: 19px;
background-color: #ffffff;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12c0 1.85.5 3.58 1.36 5.07L2 22l5.06-1.33A9.94 9.94 0 0 0 12 22c5.52 0 10-4.48 10-10S17.52 2 12 2Zm0 18c-1.62 0-3.13-.47-4.4-1.28l-.32-.19-3.01.79.8-2.93-.21-.3A7.94 7.94 0 0 1 4 12c0-4.41 3.59-8 8-8s8 3.59 8 8-3.59 8-8 8Zm4.38-5.86c-.24-.12-1.42-.7-1.64-.78-.22-.08-.38-.12-.54.12-.16.24-.62.78-.76.94-.14.16-.28.18-.52.06-.24-.12-1.01-.37-1.92-1.18-.71-.63-1.19-1.41-1.33-1.65-.14-.24-.01-.37.11-.49.11-.11.24-.28.36-.42.12-.14.16-.24.24-.4.08-.16.04-.3-.02-.42-.06-.12-.54-1.3-.74-1.78-.19-.47-.39-.4-.54-.41-.14-.01-.3-.01-.46-.01-.16 0-.42.06-.64.3-.22.24-.84.82-.84 2s.86 2.32.98 2.48c.12.16 1.7 2.6 4.12 3.64.58.25 1.03.4 1.38.51.58.18 1.11.16 1.53.1.47-.07 1.42-.58 1.62-1.14.2-.56.2-1.04.14-1.14-.06-.1-.22-.16-.46-.28Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12c0 1.85.5 3.58 1.36 5.07L2 22l5.06-1.33A9.94 9.94 0 0 0 12 22c5.52 0 10-4.48 10-10S17.52 2 12 2Zm0 18c-1.62 0-3.13-.47-4.4-1.28l-.32-.19-3.01.79.8-2.93-.21-.3A7.94 7.94 0 0 1 4 12c0-4.41 3.59-8 8-8s8 3.59 8 8-3.59 8-8 8Zm4.38-5.86c-.24-.12-1.42-.7-1.64-.78-.22-.08-.38-.12-.54.12-.16.24-.62.78-.76.94-.14.16-.28.18-.52.06-.24-.12-1.01-.37-1.92-1.18-.71-.63-1.19-1.41-1.33-1.65-.14-.24-.01-.37.11-.49.11-.11.24-.28.36-.42.12-.14.16-.24.24-.4.08-.16.04-.3-.02-.42-.06-.12-.54-1.3-.74-1.78-.19-.47-.39-.4-.54-.41-.14-.01-.3-.01-.46-.01-.16 0-.42.06-.64.3-.22.24-.84.82-.84 2s.86 2.32.98 2.48c.12.16 1.7 2.6 4.12 3.64.58.25 1.03.4 1.38.51.58.18 1.11.16 1.53.1.47-.07 1.42-.58 1.62-1.14.2-.56.2-1.04.14-1.14-.06-.1-.22-.16-.46-.28Z'/%3E%3C/svg%3E");
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-size: contain;
-webkit-mask-size: contain;
}
a.oz-envasados-wsp-cta:hover,
a.oz-envasados-wsp-cta:focus-visible {
color: #ffffff;
background: #1fb457;
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0,0,0,0.22);
}
.oz-cta-inner {
position: relative;
min-height: 160px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
padding: 30px 0;
/* Textura vegetal/granos MUY sutil, 100% CSS (sin imagen nueva). */
background-image:
radial-gradient(circle at 8px 8px, rgba(255,255,255,0.05) 1.4px, transparent 1.6px);
background-size: 26px 26px;
}
.oz-cta-inner__left {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 20px;
}
.oz-cta-inner__icon {
flex: 0 0 auto;
width: 60px;
height: 60px;
border-radius: 50%;
background: #25D366;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}
.oz-cta-inner__eyebrow {
display: block;
color: #9bca46;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0 0 6px;
}
.oz-cta-inner__title {
margin: 0 0 6px;
color: #ffffff;
font-size: 28px;
font-weight: 700;
}
.oz-cta-inner__subtitle {
margin: 0;
color: #dfe9f6;
font-size: 15px;
max-width: 440px;
}
.oz-cta-inner__right {
position: relative;
z-index: 1;
flex: 0 0 auto;
}
@media (max-width: 768px) {
.oz-cta-inner {
flex-direction: column;
text-align: center;
justify-content: center;
padding: 38px 0;
}
.oz-cta-inner__left {
flex-direction: column;
text-align: center;
}
.oz-cta-inner__subtitle {
max-width: 100%;
}
a.oz-envasados-wsp-cta {
width: 100%;
max-width: 300px;
}
}
/* ============================================================
HERO v2 — slider propio a base de fade (opacity), sin scroll
horizontal ni scroll-snap (mecanismo distinto al slider anterior de
OZ-Sliders, que mostraba una división de luz irreproducible aislada
hasta la capa de composición GPU del navegador).
============================================================ */
.oz-hero-fade {
position: relative;
width: 100%;
height: 600px;
overflow: hidden;
background: #0d2c5c;
}
.oz-hero-fade__slide {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.9s ease;
}
.oz-hero-fade__slide--active {
opacity: 1;
visibility: visible;
}
.oz-hero-fade__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.oz-hero-fade__overlay {
position: absolute;
inset: 0;
background: rgba(0,8,28,0.32);
}
.oz-hero-fade__content {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 0 8vw;
max-width: 640px;
}
.oz-hero-fade .oz-hero-fade__title,
h2.oz-hero-fade__title {
color: #ffffff !important;
font-size: 52px !important;
font-weight: 700;
line-height: 1.1;
margin: 0 0 18px;
text-shadow: 0 2px 14px rgba(0,0,0,0.35);
}
.oz-hero-fade .oz-hero-fade__subtitle {
color: #f0f3f8 !important;
font-size: 18px !important;
line-height: 1.55;
margin: 0 0 28px;
max-width: 520px;
text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}
.oz-hero-fade .oz-hero-fade__button {
display: inline-flex;
align-items: center;
justify-content: center;
background: #9bca46;
color: #16311b;
font-weight: 700;
font-size: 15px;
height: 49px;
padding: 0 30px;
border-radius: 8px;
text-decoration: none;
white-space: nowrap;
width: fit-content;
}
.oz-hero-fade .oz-hero-fade__button:hover {
color: #16311b;
text-decoration: none;
}
.oz-hero-fade__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 6;
width: 54px;
height: 54px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(12,10,8,0.72);
border: 1px solid rgba(229,180,92,0.75);
border-radius: 10px;
cursor: pointer;
transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.oz-hero-fade__nav:hover {
background: rgba(18,14,10,0.88);
border-color: rgba(245,193,96,1);
transform: translateY(-50%) scale(1.05);
}
.oz-hero-fade__nav--prev { left: 16px; }
.oz-hero-fade__nav--next { right: 16px; }
.oz-hero-fade__dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 5;
display: flex;
gap: 8px;
}
.oz-hero-fade__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255,255,255,0.4);
border: none;
padding: 0;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
}
.oz-hero-fade__dot--active {
background: #ffffff;
transform: scale(1.3);
}
/* Laptop (≤1366px): mismo layout, solo se acota el ancho del texto para
que nunca llegue a tocar las flechas de navegación (54px + 16px offset
a cada lado). */
@media (max-width: 1366px) {
.oz-hero-fade .oz-hero-fade__content {
padding: 0 7vw;
max-width: 580px;
}
.oz-hero-fade .oz-hero-fade__subtitle {
max-width: 460px;
}
}
/* Tablet horizontal (≤1024px): título/alto reducidos, mismo padding
lateral pensado para no chocar con las flechas. */
@media (max-width: 1024px) {
.oz-hero-fade {
height: 520px;
}
.oz-hero-fade .oz-hero-fade__content {
padding: 0 90px 0 6vw;
max-width: 460px;
}
.oz-hero-fade .oz-hero-fade__title {
font-size: 40px !important;
}
.oz-hero-fade .oz-hero-fade__subtitle {
font-size: 15.5px !important;
max-width: 380px;
}
}
@media (max-width: 768px) {
/* min-height (no height fijo): en pantallas de poca altura real
(teléfonos con barra de direcciones visible, extensiones de
simulación con viewport corto, etc.) el contenido puede necesitar
más de 480px — con min-height la fila crece en vez de comprimir el
texto contra las flechas ancladas abajo. padding-bottom reserva el
espacio real que ocupan flechas (40px) + dots (¬20px) para que el
botón nunca termine debajo de ellas aunque el texto sea largo. */
.oz-hero-fade {
height: auto;
min-height: 480px;
}
.oz-hero-fade .oz-hero-fade__content {
align-items: center;
text-align: center;
padding: 32px 6vw 76px;
max-width: 100%;
}
.oz-hero-fade .oz-hero-fade__title {
font-size: 34px !important;
}
.oz-hero-fade .oz-hero-fade__subtitle {
font-size: 15.5px !important;
max-width: 100%;
}
.oz-hero-fade__overlay {
background: rgba(0,8,28,0.5);
}
.oz-hero-fade__nav {
top: auto;
bottom: 14px;
transform: none;
width: 40px;
height: 40px;
}
.oz-hero-fade__nav:hover {
transform: scale(1.05);
}
.oz-hero-fade__nav--prev { left: 14px; }
.oz-hero-fade__nav--next { right: 14px; }
.oz-hero-fade__dots {
bottom: 24px;
}
}
/* ============================================================
HERO NATIVO (v3) — .oz-hero-native, componente real OZ-Sliders
(shortcode oz_slider_banner, preset "Slider Principal" editable desde
wp-admin). Reemplaza el fade hecho a mano (.oz-hero-fade, arriba, ya
sin uso) para que el cliente pueda editar el hero sin tocar código.
Fondo opaco explícito en toda la cadena del track: por defecto
.ozs/.ozs__viewport/.ozs__track/.ozs__media son transparentes en el
CSS del plugin, así que cualquier corte de 1px durante el scroll deja
ver el fondo claro de la página — se fuerza un tono oscuro (mismo que
el overlay) para que un corte, si ocurre, sea imperceptible sobre las
fotos en vez de una línea de luz. */
.oz-hero-native,
.oz-hero-native .ozs__viewport,
.oz-hero-native .ozs__track,
.oz-hero-native .ozs__media,
.oz-hero-native .ozs__slide {
background: #0d2c5c !important;
}
.oz-hero-native {
--ozs-gap: 0px !important;
}
.oz-hero-native .ozs__content {
align-items: flex-start;
text-align: left;
padding: 0 8vw;
max-width: 640px;
}
.oz-hero-native .oz-slide__title {
color: #ffffff !important;
font-size: 52px !important;
font-weight: 700;
line-height: 1.1;
margin: 0 0 18px;
text-shadow: 0 2px 14px rgba(0,0,0,0.35);
}
.oz-hero-native .oz-slide__subtitle {
color: #f0f3f8 !important;
font-size: 18px !important;
line-height: 1.55;
margin: 0 0 28px;
max-width: 520px;
text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}
.oz-hero-native .ozs__button.oz-slide__button {
display: inline-flex;
align-items: center;
justify-content: center;
background: #9bca46;
color: #16311b;
font-weight: 700;
font-size: 15px;
height: 49px;
padding: 0 30px;
border-radius: 8px;
text-decoration: none;
white-space: nowrap;
width: fit-content;
margin-top: 0;
}
.oz-hero-native .ozs__button.oz-slide__button:hover {
color: #16311b;
text-decoration: none;
}
html body .ozs.ozs--banner.oz-hero-native .ozs__nav-btn,
.oz-hero-native .ozs__nav-btn {
z-index: 6;
width: 54px;
height: 54px;
background: rgba(12,10,8,0.72);
border: 1px solid rgba(229,180,92,0.75);
border-radius: 10px;
transition: none !important;
animation: none !important;
}
.oz-hero-native .ozs__nav-btn:hover,
.oz-hero-native .ozs__nav-btn:focus-visible,
html body .ozs.ozs--banner.oz-hero-native .ozs__nav-btn:hover,
html body .ozs.ozs--banner.oz-hero-native .ozs__nav-btn:focus-visible {
background: rgba(18,14,10,0.88);
border-color: rgba(245,193,96,1);
transform: translateY(-50%) !important;
box-shadow: none !important;
}
.oz-hero-native .ozs__nav-btn::before {
border-top-color: #fff;
border-right-color: #fff;
width: 10px;
height: 10px;
transition: none !important;
}
.oz-hero-native .ozs__nav-btn--prev:hover::before,
.oz-hero-native .ozs__nav-btn--prev:focus-visible::before,
.oz-hero-native .ozs__nav-btn--next:hover::before,
.oz-hero-native .ozs__nav-btn--next:focus-visible::before,
html body .ozs.ozs--banner.oz-hero-native .ozs__nav-btn--prev:hover::before,
html body .ozs.ozs--banner.oz-hero-native .ozs__nav-btn--prev:focus-visible::before,
html body .ozs.ozs--banner.oz-hero-native .ozs__nav-btn--next:hover::before,
html body .ozs.ozs--banner.oz-hero-native .ozs__nav-btn--next:focus-visible::before {
transform: none !important;
}
.oz-hero-native .ozs__nav-btn--prev { left: 16px; }
.oz-hero-native .ozs__nav-btn--next { right: 16px; }
.oz-hero-native .ozs__dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 5;
}
.oz-hero-native .ozs__dot {
width: 8px;
height: 8px;
background: rgba(255,255,255,0.4);
}
.oz-hero-native .ozs__dot.is-active {
background: #ffffff;
transform: scale(1.3);
}
@media (max-width: 1366px) {
.oz-hero-native .ozs__content {
padding: 0 7vw;
max-width: 580px;
}
.oz-hero-native .oz-slide__subtitle {
max-width: 460px;
}
}
@media (max-width: 1024px) {
.oz-hero-native .ozs__content {
padding: 0 90px 0 90px;
max-width: 460px;
}
.oz-hero-native .oz-slide__title {
font-size: 40px !important;
}
.oz-hero-native .oz-slide__subtitle {
font-size: 15.5px !important;
max-width: 380px;
}
}
/* ≤768px (tablet_v y mobile): las imágenes "mobile" de cada slide ya
traen su propio título/bajada/badges impresos (generadas aparte para
este formato vertical) — mostrar ADEMÁS el título/subtítulo/botón del
componente duplicaba el mensaje. Se oculta todo el overlay de texto;
el clic para ir a la sección de marcas lo resuelve el campo nativo
"Enlace (URL)" de cada slide (link/target en banner-model-1.php), que
convierte la imagen entera en un — no un botón de texto aparte. */
@media (max-width: 768px) {
.oz-hero-native .ozs__content {
display: none;
}
.oz-hero-native .ozs__overlay {
display: none;
}
.oz-hero-native .ozs__nav-btn {
top: auto !important;
bottom: 14px;
transform: none !important;
width: 40px;
height: 40px;
}
.oz-hero-native .ozs__nav-btn:hover,
.oz-hero-native .ozs__nav-btn:focus-visible,
html body .ozs.ozs--banner.oz-hero-native .ozs__nav-btn:hover,
html body .ozs.ozs--banner.oz-hero-native .ozs__nav-btn:focus-visible {
transform: none !important;
}
.oz-hero-native .ozs__nav-btn--prev { left: 14px; }
.oz-hero-native .ozs__nav-btn--next { right: 14px; }
.oz-hero-native .ozs__dots {
bottom: 24px;
}
}
@media (max-width: 480px) {
.oz-hero-native .ozs__nav-btn,
html body .ozs.ozs--banner.oz-hero-native .ozs__nav-btn {
display: none !important;
}
}
/* Nuestras Marcas — las 2 cards (Supremo/Al Toque) no tenían NINGÚN ajuste
responsive propio (todo en estilos inline fijos: height:320px, imagen
57% + texto lado a lado siempre) — en pantallas angostas el texto
quedaba comprimido a 2-3 palabras por línea dentro de un ancho de
~140px. Se agregan clases para poder apilar imagen/texto en vez de
ponerlos lado a lado por debajo de tablet horizontal. */
.oz-marcas-row {
display: flex;
gap: 32px;
align-items: stretch;
flex-wrap: wrap;
}
.oz-marca-card {
flex: 1;
min-width: 0;
display: flex;
height: 320px;
}
.oz-marca-card__media {
flex: 0 0 57%;
height: 100%;
}
.oz-marca-card__body {
flex: 1;
}
@media (max-width: 1024px) {
.oz-marca-card {
height: 280px;
}
.oz-marca-card__body {
padding: 22px 20px !important;
}
.oz-marca-card__body h3 {
font-size: 21px !important;
}
}
@media (max-width: 768px) {
.oz-marcas-row {
flex-direction: column;
gap: 24px;
}
.oz-marca-card {
height: auto;
flex-direction: column;
flex: 1 1 auto;
}
.oz-marca-card__media {
flex: 0 0 auto;
height: 220px;
}
/* El centrado del contenido de la tarjeta (badge, título, texto y botón)
ya no es solo de móvil: vive en .ozx-marca (global-classes.css) y
aplica en todas las vistas, así que aquí no se repite. */
}
@media (max-width: 480px) {
.oz-marca-card__media {
height: 190px;
}
.oz-marca-card__body {
padding: 24px 20px !important;
}
}
/* Proceso y Calidad (fila oz-pb-r-9, columnas 35/65): al no ser un split
50/50 el Maquetador la marca "keep-mobile" (oz_pb_cols_are_balanced) y
NO la apila en tablet vertical — texto e imagen quedan lado a lado,
comprimiendo el collage a una tira casi ilegible. Se fuerza el apilado
a 2 filas (texto arriba, imagen abajo) solo para esta fila específica,
sin tocar el comportamiento general de columnas desiguales del resto
del sitio. */
@media (max-width: 768px) {
.oz-pb-r-9 .oz-pb-grid {
grid-template-columns: 1fr !important;
}
.oz-pb-r-9 .oz-pb-col {
grid-column: 1 / -1 !important;
margin-left: 0 !important;
}
}
/* Collage "Proceso y Calidad" — bloque tipo Imagen real del Maquetador
(antes era un bloque de Texto con un ![]()
suelto adentro; se cambió
para que el panel del editor muestre el componente correcto). El
border-radius/sombra que antes iban inline en el ![]()
ahora se
resuelven aquí, apuntando al wrapper real que genera el builder para
bloques tipo imagen (.oz-pb-block--image, figura .oz-pb-image). */
.oz-proceso-img .oz-pb-image {
border-radius: 18px;
overflow: hidden;
box-shadow: 0 14px 34px rgba(31, 88, 159, 0.14);
display: block;
}
.oz-proceso-img .oz-pb-image img {
width: 100%;
height: auto;
display: block;
}
@media (max-width: 768px) {
.oz-proceso-texto {
max-width: 100% !important;
text-align: center;
}
.oz-proceso-img.oz-pb-block {
margin-top: 32px !important;
}
}
/* En movil el collage (proporción muy panorámica, ~5.8:1) se ve como una
tira delgada con height:auto — se fuerza una altura real y
object-fit:cover para que ocupe más espacio vertical sin deformarse
(recorta un poco de los extremos, no estira la imagen). */
@media (max-width: 480px) {
.oz-proceso-img .oz-pb-image img {
height: 220px;
object-fit: cover;
object-position: center;
}
}
/* Banda de beneficios — reconstruida con 4 bloques reales "Icono + Texto"
del Maquetador (antes era HTML manual dentro de un bloque de Texto).
El translateY/sombra "flotante" no tiene campo propio en el panel de la
fila (el sanitizador aplica absint() a los márgenes, elimina negativos
— visto antes en esta sesión con el hero), así que se resuelve aquí vía
className igual que en el resto del sitio. */
html body .oz-pb-root .oz-pb-r-1.oz-beneficios-row.oz-pb-section--theme.oz-pb-spacing-scope,
html body .oz-pb-root .oz-pb-r-1.oz-beneficios-row.oz-pb-section--full.oz-pb-spacing-scope {
max-width: 1220px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.oz-beneficios-row {
position: relative;
z-index: 5;
box-shadow: 0 16px 36px rgba(15, 40, 80, 0.28);
transform: translateY(-46px);
margin-bottom: -46px;
}
.oz-beneficios-row .oz-pb-it__desc {
text-align: center;
text-align-last: center;
}
.oz-beneficios-row .oz-pb-it__icon img {
width: 26px;
height: 26px;
opacity: 0.95;
}
.oz-beneficios-row .oz-pb-icon-text {
gap: 6px;
}
.oz-beneficios-item--1,
.oz-beneficios-item--2,
.oz-beneficios-item--3 {
border-left: 1px solid rgba(255, 255, 255, 0.18);
}
/* Tablet vertical (768px): 2x2 en vez de 4 en fila (se ven muy angostas)
o 1 sola columna (comportamiento por defecto del Maquetador al no ser
un split 50/50 — mismo patrón "keep-mobile" ya visto con Proceso y
Calidad). Ancho contenido, no 100%, según lo pedido. */
@media (max-width: 768px) {
html body .oz-pb-root .oz-pb-r-1.oz-beneficios-row.oz-pb-section--theme.oz-pb-spacing-scope,
html body .oz-pb-root .oz-pb-r-1.oz-beneficios-row.oz-pb-section--full.oz-pb-spacing-scope {
max-width: 520px !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
@media (max-width: 480px) {
html body .oz-pb-root .oz-pb-r-1.oz-beneficios-row.oz-pb-section--theme.oz-pb-spacing-scope,
html body .oz-pb-root .oz-pb-r-1.oz-beneficios-row.oz-pb-section--full.oz-pb-spacing-scope {
max-width: calc(100vw - 32px) !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
@media (max-width: 768px) {
.oz-pb-r-1 .oz-pb-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
/* El CSS base del plugin fuerza grid-column:1/-1 !important en móvil
para columnas "balanceadas" (25-25-25-25 sí lo son, por eso no trae
la clase .oz-pb-grid--keep-mobile) — su selector es más específico
que uno simple, así que aquí se replica la MISMA cadena de
ancestros (html body .oz-pb-root ... .oz-pb-grid > .oz-pb-col) para
igualar la especificidad y ganar por ser la regla declarada después
en el archivo. */
html body .oz-pb-root .oz-pb-r-1.oz-pb-grid > .oz-pb-col,
html body .oz-pb-root .oz-pb-r-1 .oz-pb-grid > .oz-pb-col {
grid-column: auto !important;
}
.oz-beneficios-item--0,
.oz-beneficios-item--1,
.oz-beneficios-item--2,
.oz-beneficios-item--3 {
border-left: none;
padding: 16px 10px;
}
.oz-beneficios-item--1 {
border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.oz-beneficios-item--2,
.oz-beneficios-item--3 {
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.oz-beneficios-item--3 {
border-left: 1px solid rgba(255, 255, 255, 0.18);
}
}
pegado a una
- , sin distinguir un rótulo corto ("Especificaciones:")
de un párrafo con contenido real. Producto real afectado: Frijol
Canario Peruano en Saco de 25kg (post 358) trae
"
Beneficios y Propiedades:
- — la imagen entera desaparecía junto
con el rótulo. Se excluye explícitamente cualquier
que contenga una imagen alineada (:has(img.alignleft), :has(img.alignright)): esos SÍ deben seguir visibles siempre, es contenido real, no un rótulo vacío. */ body .oz-single-product .woocommerce-tabs .woocommerce-Tabs-panel--description p:has(+ ul):not(:has(img.alignleft)):not(:has(img.alignright)) { display: none; } /* [Fase 2.6, punto 2] Con el rótulo ahora oculto (arriba), la lista ya NO debe perder su propia divisoria/espaciado — antes esta regla los ponía a 0 asumiendo que el rótulo visible ya aportaba el borde superior. Con el rótulo display:none, "p + ul" seguía matcheando igual (display:none no saca al elemento del DOM ni de los selectores de hermanos), así que sin este ajuste la lista quedaba pegada al heading sin separación. Se deja que el
- use su borde/spacing propio (regla base de arriba) también
en este caso. */
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;
}
/* El padre separa ítems con li+li margin-top; aquí manda el row-gap */
body .oz-single-product .woocommerce-tabs .woocommerce-Tabs-panel--description ul li + li {
margin-top: 0;
}
/* [Fase 2, punto 11] Check minimalista: círculo blanco de 22px con borde y
tilde. Antes usaba var(--oz-brand-accent) = #9bca46 (confirmado en Fase
1.5, riesgo 5) — discrepancia real de 1 unidad por canal RGB contra el
verde que Home usa hardcodeado (#9CCB47) en sus cards/separadores. Se
fija el valor exacto de Home aquí (color LOCAL a esta sección, NO se
toca la variable --oz-brand-accent global ni :root). */
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 #9CCB47;
border-radius: 50%;
background: #ffffff;
color: #9CCB47;
font-size: 11px;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
/* 6. Responsive: tabs usables, beneficios a 1 columna, menos padding,
sin desbordes. */
@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;
}
}
/* =========================================================================
BOTÓN FLOTANTE DE WHATSAPP (Punto 7, sección 5-7 del brief) — implementación
propia, sin plugin externo, config independiente de perubean.local. Mismo
criterio visual que el sitio principal para mantener el mismo ecosistema
de marca. Esquina inferior derecha, no cubre contenido, sin animación
de rebote/pulso, sin auto-popup. No compite con .oz-cat-drawer (overlay
de pantalla completa, no un elemento fijo de esquina). */
.oz-wsp-float {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 9000;
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: #25D366;
color: #ffffff;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.oz-wsp-float:hover,
.oz-wsp-float:focus-visible {
color: #ffffff;
transform: scale(1.06);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
@media (max-width: 480px) {
.oz-wsp-float {
right: 14px;
bottom: 14px;
width: 50px;
height: 50px;
}
}
@media (prefers-reduced-motion: reduce) {
.oz-wsp-float {
transition: none;
}
}
/* =========================================================================
CATÁLOGO POR MARCA (shortcode oz_envasados_catalogo) — grid responsive de
tarjetas de producto real vía WooCommerce. Nunca muestra precio/carrito/
SKU, solo imagen + nombre + marca + presentación + CTA WhatsApp.
Corrección visual v2: tarjetas con más protagonismo (brief "Corrección
visual — no quedó como la referencia"). */
.oz-catalogo-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
max-width: 1300px;
margin: 30px auto 0;
}
.oz-catalogo-card {
display: flex;
flex-direction: column;
min-width: 0;
background: #ffffff;
border: 1px solid #ececec;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 3px 10px rgba(20, 30, 50, 0.05);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.oz-catalogo-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 28px rgba(20, 30, 50, 0.1);
}
.oz-catalogo-card__media {
position: relative;
height: 230px;
background: #f8f7f3;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 18px;
}
.oz-catalogo-card__media::after {
content: "";
position: absolute;
left: 50%;
bottom: 14px;
transform: translateX(-50%);
width: 58%;
height: 14px;
background: radial-gradient(ellipse at center, rgba(20,30,50,0.10), transparent 72%);
pointer-events: none;
}
.oz-catalogo-card__media img {
position: relative;
width: 100%;
height: 79%;
object-fit: contain;
display: block;
z-index: 1;
}
.oz-catalogo-card__body {
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
padding: 19px;
flex: 1;
}
.oz-catalogo-card__brand {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--oz-brand-accent, #9bca46);
}
.oz-catalogo-grid--supremo .oz-catalogo-card__brand {
color: #a3762c;
}
.oz-catalogo-grid--al-toque .oz-catalogo-card__brand {
color: #3f8a1f;
}
.oz-catalogo-grid--otras .oz-catalogo-card__brand {
color: #5b6672;
}
.oz-catalogo-card__title {
margin: 2px 0 0;
font-size: 19px;
font-weight: 700;
line-height: 1.28;
color: var(--oz-brand-primary, #1f589f);
}
.oz-catalogo-card__presentacion {
font-size: 13.5px;
color: #7a828d;
}
.oz-catalogo-card__desc {
margin: 2px 0 0;
font-size: 13px;
line-height: 1.45;
color: #7a828d;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.oz-catalogo-card__cta {
margin-top: auto;
}
.oz-catalogo-card__cta::before {
content: "";
display: block;
height: 1px;
background: #f0f0f0;
margin: 0 0 12px;
}
.oz-catalogo-card__cta {
display: flex;
align-items: center;
justify-content: center;
height: 43px;
background: #25D366;
color: #ffffff;
font-weight: 600;
font-size: 13.5px;
border-radius: 11px;
text-decoration: none;
text-align: center;
transition: background 0.15s ease;
box-sizing: border-box;
}
.oz-catalogo-card__cta svg {
flex: 0 0 auto;
margin-right: 8px;
}
.oz-catalogo-card__cta:hover,
.oz-catalogo-card__cta:focus-visible {
color: #ffffff;
background: #1fb457;
}
/* Fondo alterno por sección de marca — separa visualmente sin bloques
pesados (blanco / gris-verde extremadamente suave / blanco). Fila 7 =
sección Al Toque (índice de orden en new_rows: 0 hero, 1 beneficios,
2 calidad, 3 marcas-título, 4 marcas-grid, 5 catálogo-título, 6 Supremo,
7 Al Toque, 8 Otras Marcas — la clase .oz-pb-r-N la genera el builder por
posición en el array, no por el "id" numérico interno de la fila). */
.oz-pb-r-7 {
background: #fafaf8 !important;
}
/* Título de sección por marca — más presencia, con líneas decorativas
laterales suaves a cada lado del texto (referencia visual aprobada). */
.oz-catalogo-marca-titulo {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
color: var(--oz-brand-primary, #1f589f);
font-size: 20px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0 0 10px;
}
.oz-catalogo-marca-titulo::before,
.oz-catalogo-marca-titulo::after {
content: "";
flex: 1;
max-width: 120px;
height: 1px;
background: linear-gradient(90deg, transparent, currentColor, transparent);
opacity: 0.28;
}
/* Breakpoints alineados a la cascada oficial del Maquetador (schema v2,
includes/breakpoints.php): desktop >1366 / laptop ≤1366 / tablet-h ≤1024
/ tablet-v ≤768 / mobile ≤480. Se usan los mismos 4 umbrales aquí, en vez
de valores libres (767/991/390 etc.), para que coincida exactamente con
lo que el panel del Maquetador reporta al revisar cada vista. */
@media (max-width: 1366px) {
.oz-catalogo-grid {
max-width: 1120px;
gap: 20px;
}
}
@media (max-width: 1024px) {
.oz-catalogo-grid {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.oz-catalogo-card__cta {
padding-top: 0;
}
}
@media (max-width: 768px) {
.oz-catalogo-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.oz-catalogo-card__media {
height: 200px;
}
}
@media (max-width: 480px) {
/* En móvil el catálogo pasa de grid (todas las filas apiladas) a un
carrusel de scroll horizontal nativo: 1 sola fila por marca, el
usuario desliza con el dedo para ver el resto de productos en vez
de bajar la página. Sin JS — scroll-snap nativo del navegador. */
.oz-catalogo-grid {
display: flex;
grid-template-columns: none;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: 10px;
padding-bottom: 6px;
margin-left: -4vw;
margin-right: -4vw;
padding-left: 4vw;
padding-right: 4vw;
}
.oz-catalogo-card {
flex: 0 0 44vw;
max-width: 44vw;
scroll-snap-align: start;
}
.oz-catalogo-card__media {
height: 150px;
padding: 12px;
}
.oz-catalogo-card__body {
padding: 14px;
}
.oz-catalogo-card__title {
font-size: 15px;
}
.oz-catalogo-card__cta {
font-size: 12px;
min-height: 40px;
height: auto;
padding: 8px 6px;
line-height: 1.25;
text-align: left;
}
.oz-catalogo-card__cta svg {
margin-right: 6px;
}
}
/* Flechas del carrusel de catálogo — ocultas por defecto (base, sin media
query) y solo se muestran en móvil (regla dentro del @media abajo). El
orden importa: con la misma especificidad (0,1,0) en ambas reglas, la
que aparece DESPUÉS en el archivo gana — por eso la base (display:none)
va primero y el override (display:flex) va después, aunque esté dentro
de un @media; si se invierte el orden, "none" termina ganando siempre
sin importar el ancho de pantalla (bug ya visto antes en esta sesión
con .oz-pb-block vs .oz-proceso-img). */
.oz-catalogo-carousel {
position: relative;
}
.oz-catalogo-carousel__nav {
display: none;
position: absolute;
top: 90px;
z-index: 3;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 2px 8px rgba(20, 30, 50, 0.18);
color: #1f589f;
cursor: pointer;
}
.oz-catalogo-carousel__nav--prev { left: 2px; }
.oz-catalogo-carousel__nav--next { right: 2px; }
@media (max-width: 480px) {
.oz-catalogo-carousel__nav {
display: flex;
}
}
/* Botón CTA final de WhatsApp (shortcode oz_envasados_whatsapp_cta) —
cierre comercial: icono a la izquierda, texto grande, más presencia
(brief "último pulido visual"). */
a.oz-envasados-wsp-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
height: 52px;
min-width: 220px;
padding: 0 30px;
background: #25D366;
color: #ffffff;
font-weight: 700;
font-size: 15.5px;
border-radius: 11px;
text-decoration: none;
box-shadow: 0 6px 18px rgba(0,0,0,0.18);
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.oz-envasados-wsp-cta::before {
content: "";
flex: 0 0 auto;
width: 19px;
height: 19px;
background-color: #ffffff;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12c0 1.85.5 3.58 1.36 5.07L2 22l5.06-1.33A9.94 9.94 0 0 0 12 22c5.52 0 10-4.48 10-10S17.52 2 12 2Zm0 18c-1.62 0-3.13-.47-4.4-1.28l-.32-.19-3.01.79.8-2.93-.21-.3A7.94 7.94 0 0 1 4 12c0-4.41 3.59-8 8-8s8 3.59 8 8-3.59 8-8 8Zm4.38-5.86c-.24-.12-1.42-.7-1.64-.78-.22-.08-.38-.12-.54.12-.16.24-.62.78-.76.94-.14.16-.28.18-.52.06-.24-.12-1.01-.37-1.92-1.18-.71-.63-1.19-1.41-1.33-1.65-.14-.24-.01-.37.11-.49.11-.11.24-.28.36-.42.12-.14.16-.24.24-.4.08-.16.04-.3-.02-.42-.06-.12-.54-1.3-.74-1.78-.19-.47-.39-.4-.54-.41-.14-.01-.3-.01-.46-.01-.16 0-.42.06-.64.3-.22.24-.84.82-.84 2s.86 2.32.98 2.48c.12.16 1.7 2.6 4.12 3.64.58.25 1.03.4 1.38.51.58.18 1.11.16 1.53.1.47-.07 1.42-.58 1.62-1.14.2-.56.2-1.04.14-1.14-.06-.1-.22-.16-.46-.28Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12c0 1.85.5 3.58 1.36 5.07L2 22l5.06-1.33A9.94 9.94 0 0 0 12 22c5.52 0 10-4.48 10-10S17.52 2 12 2Zm0 18c-1.62 0-3.13-.47-4.4-1.28l-.32-.19-3.01.79.8-2.93-.21-.3A7.94 7.94 0 0 1 4 12c0-4.41 3.59-8 8-8s8 3.59 8 8-3.59 8-8 8Zm4.38-5.86c-.24-.12-1.42-.7-1.64-.78-.22-.08-.38-.12-.54.12-.16.24-.62.78-.76.94-.14.16-.28.18-.52.06-.24-.12-1.01-.37-1.92-1.18-.71-.63-1.19-1.41-1.33-1.65-.14-.24-.01-.37.11-.49.11-.11.24-.28.36-.42.12-.14.16-.24.24-.4.08-.16.04-.3-.02-.42-.06-.12-.54-1.3-.74-1.78-.19-.47-.39-.4-.54-.41-.14-.01-.3-.01-.46-.01-.16 0-.42.06-.64.3-.22.24-.84.82-.84 2s.86 2.32.98 2.48c.12.16 1.7 2.6 4.12 3.64.58.25 1.03.4 1.38.51.58.18 1.11.16 1.53.1.47-.07 1.42-.58 1.62-1.14.2-.56.2-1.04.14-1.14-.06-.1-.22-.16-.46-.28Z'/%3E%3C/svg%3E");
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-size: contain;
-webkit-mask-size: contain;
}
a.oz-envasados-wsp-cta:hover,
a.oz-envasados-wsp-cta:focus-visible {
color: #ffffff;
background: #1fb457;
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0,0,0,0.22);
}
.oz-cta-inner {
position: relative;
min-height: 160px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
padding: 30px 0;
/* Textura vegetal/granos MUY sutil, 100% CSS (sin imagen nueva). */
background-image:
radial-gradient(circle at 8px 8px, rgba(255,255,255,0.05) 1.4px, transparent 1.6px);
background-size: 26px 26px;
}
.oz-cta-inner__left {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 20px;
}
.oz-cta-inner__icon {
flex: 0 0 auto;
width: 60px;
height: 60px;
border-radius: 50%;
background: #25D366;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}
.oz-cta-inner__eyebrow {
display: block;
color: #9bca46;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0 0 6px;
}
.oz-cta-inner__title {
margin: 0 0 6px;
color: #ffffff;
font-size: 28px;
font-weight: 700;
}
.oz-cta-inner__subtitle {
margin: 0;
color: #dfe9f6;
font-size: 15px;
max-width: 440px;
}
.oz-cta-inner__right {
position: relative;
z-index: 1;
flex: 0 0 auto;
}
@media (max-width: 768px) {
.oz-cta-inner {
flex-direction: column;
text-align: center;
justify-content: center;
padding: 38px 0;
}
.oz-cta-inner__left {
flex-direction: column;
text-align: center;
}
.oz-cta-inner__subtitle {
max-width: 100%;
}
a.oz-envasados-wsp-cta {
width: 100%;
max-width: 300px;
}
}
/* ============================================================
HERO v2 — slider propio a base de fade (opacity), sin scroll
horizontal ni scroll-snap (mecanismo distinto al slider anterior de
OZ-Sliders, que mostraba una división de luz irreproducible aislada
hasta la capa de composición GPU del navegador).
============================================================ */
.oz-hero-fade {
position: relative;
width: 100%;
height: 600px;
overflow: hidden;
background: #0d2c5c;
}
.oz-hero-fade__slide {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.9s ease;
}
.oz-hero-fade__slide--active {
opacity: 1;
visibility: visible;
}
.oz-hero-fade__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.oz-hero-fade__overlay {
position: absolute;
inset: 0;
background: rgba(0,8,28,0.32);
}
.oz-hero-fade__content {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 0 8vw;
max-width: 640px;
}
.oz-hero-fade .oz-hero-fade__title,
h2.oz-hero-fade__title {
color: #ffffff !important;
font-size: 52px !important;
font-weight: 700;
line-height: 1.1;
margin: 0 0 18px;
text-shadow: 0 2px 14px rgba(0,0,0,0.35);
}
.oz-hero-fade .oz-hero-fade__subtitle {
color: #f0f3f8 !important;
font-size: 18px !important;
line-height: 1.55;
margin: 0 0 28px;
max-width: 520px;
text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}
.oz-hero-fade .oz-hero-fade__button {
display: inline-flex;
align-items: center;
justify-content: center;
background: #9bca46;
color: #16311b;
font-weight: 700;
font-size: 15px;
height: 49px;
padding: 0 30px;
border-radius: 8px;
text-decoration: none;
white-space: nowrap;
width: fit-content;
}
.oz-hero-fade .oz-hero-fade__button:hover {
color: #16311b;
text-decoration: none;
}
.oz-hero-fade__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 6;
width: 54px;
height: 54px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(12,10,8,0.72);
border: 1px solid rgba(229,180,92,0.75);
border-radius: 10px;
cursor: pointer;
transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.oz-hero-fade__nav:hover {
background: rgba(18,14,10,0.88);
border-color: rgba(245,193,96,1);
transform: translateY(-50%) scale(1.05);
}
.oz-hero-fade__nav--prev { left: 16px; }
.oz-hero-fade__nav--next { right: 16px; }
.oz-hero-fade__dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 5;
display: flex;
gap: 8px;
}
.oz-hero-fade__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255,255,255,0.4);
border: none;
padding: 0;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
}
.oz-hero-fade__dot--active {
background: #ffffff;
transform: scale(1.3);
}
/* Laptop (≤1366px): mismo layout, solo se acota el ancho del texto para
que nunca llegue a tocar las flechas de navegación (54px + 16px offset
a cada lado). */
@media (max-width: 1366px) {
.oz-hero-fade .oz-hero-fade__content {
padding: 0 7vw;
max-width: 580px;
}
.oz-hero-fade .oz-hero-fade__subtitle {
max-width: 460px;
}
}
/* Tablet horizontal (≤1024px): título/alto reducidos, mismo padding
lateral pensado para no chocar con las flechas. */
@media (max-width: 1024px) {
.oz-hero-fade {
height: 520px;
}
.oz-hero-fade .oz-hero-fade__content {
padding: 0 90px 0 6vw;
max-width: 460px;
}
.oz-hero-fade .oz-hero-fade__title {
font-size: 40px !important;
}
.oz-hero-fade .oz-hero-fade__subtitle {
font-size: 15.5px !important;
max-width: 380px;
}
}
@media (max-width: 768px) {
/* min-height (no height fijo): en pantallas de poca altura real
(teléfonos con barra de direcciones visible, extensiones de
simulación con viewport corto, etc.) el contenido puede necesitar
más de 480px — con min-height la fila crece en vez de comprimir el
texto contra las flechas ancladas abajo. padding-bottom reserva el
espacio real que ocupan flechas (40px) + dots (¬20px) para que el
botón nunca termine debajo de ellas aunque el texto sea largo. */
.oz-hero-fade {
height: auto;
min-height: 480px;
}
.oz-hero-fade .oz-hero-fade__content {
align-items: center;
text-align: center;
padding: 32px 6vw 76px;
max-width: 100%;
}
.oz-hero-fade .oz-hero-fade__title {
font-size: 34px !important;
}
.oz-hero-fade .oz-hero-fade__subtitle {
font-size: 15.5px !important;
max-width: 100%;
}
.oz-hero-fade__overlay {
background: rgba(0,8,28,0.5);
}
.oz-hero-fade__nav {
top: auto;
bottom: 14px;
transform: none;
width: 40px;
height: 40px;
}
.oz-hero-fade__nav:hover {
transform: scale(1.05);
}
.oz-hero-fade__nav--prev { left: 14px; }
.oz-hero-fade__nav--next { right: 14px; }
.oz-hero-fade__dots {
bottom: 24px;
}
}
/* ============================================================
HERO NATIVO (v3) — .oz-hero-native, componente real OZ-Sliders
(shortcode oz_slider_banner, preset "Slider Principal" editable desde
wp-admin). Reemplaza el fade hecho a mano (.oz-hero-fade, arriba, ya
sin uso) para que el cliente pueda editar el hero sin tocar código.
Fondo opaco explícito en toda la cadena del track: por defecto
.ozs/.ozs__viewport/.ozs__track/.ozs__media son transparentes en el
CSS del plugin, así que cualquier corte de 1px durante el scroll deja
ver el fondo claro de la página — se fuerza un tono oscuro (mismo que
el overlay) para que un corte, si ocurre, sea imperceptible sobre las
fotos en vez de una línea de luz. */
.oz-hero-native,
.oz-hero-native .ozs__viewport,
.oz-hero-native .ozs__track,
.oz-hero-native .ozs__media,
.oz-hero-native .ozs__slide {
background: #0d2c5c !important;
}
.oz-hero-native {
--ozs-gap: 0px !important;
}
.oz-hero-native .ozs__content {
align-items: flex-start;
text-align: left;
padding: 0 8vw;
max-width: 640px;
}
.oz-hero-native .oz-slide__title {
color: #ffffff !important;
font-size: 52px !important;
font-weight: 700;
line-height: 1.1;
margin: 0 0 18px;
text-shadow: 0 2px 14px rgba(0,0,0,0.35);
}
.oz-hero-native .oz-slide__subtitle {
color: #f0f3f8 !important;
font-size: 18px !important;
line-height: 1.55;
margin: 0 0 28px;
max-width: 520px;
text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}
.oz-hero-native .ozs__button.oz-slide__button {
display: inline-flex;
align-items: center;
justify-content: center;
background: #9bca46;
color: #16311b;
font-weight: 700;
font-size: 15px;
height: 49px;
padding: 0 30px;
border-radius: 8px;
text-decoration: none;
white-space: nowrap;
width: fit-content;
margin-top: 0;
}
.oz-hero-native .ozs__button.oz-slide__button:hover {
color: #16311b;
text-decoration: none;
}
html body .ozs.ozs--banner.oz-hero-native .ozs__nav-btn,
.oz-hero-native .ozs__nav-btn {
z-index: 6;
width: 54px;
height: 54px;
background: rgba(12,10,8,0.72);
border: 1px solid rgba(229,180,92,0.75);
border-radius: 10px;
transition: none !important;
animation: none !important;
}
.oz-hero-native .ozs__nav-btn:hover,
.oz-hero-native .ozs__nav-btn:focus-visible,
html body .ozs.ozs--banner.oz-hero-native .ozs__nav-btn:hover,
html body .ozs.ozs--banner.oz-hero-native .ozs__nav-btn:focus-visible {
background: rgba(18,14,10,0.88);
border-color: rgba(245,193,96,1);
transform: translateY(-50%) !important;
box-shadow: none !important;
}
.oz-hero-native .ozs__nav-btn::before {
border-top-color: #fff;
border-right-color: #fff;
width: 10px;
height: 10px;
transition: none !important;
}
.oz-hero-native .ozs__nav-btn--prev:hover::before,
.oz-hero-native .ozs__nav-btn--prev:focus-visible::before,
.oz-hero-native .ozs__nav-btn--next:hover::before,
.oz-hero-native .ozs__nav-btn--next:focus-visible::before,
html body .ozs.ozs--banner.oz-hero-native .ozs__nav-btn--prev:hover::before,
html body .ozs.ozs--banner.oz-hero-native .ozs__nav-btn--prev:focus-visible::before,
html body .ozs.ozs--banner.oz-hero-native .ozs__nav-btn--next:hover::before,
html body .ozs.ozs--banner.oz-hero-native .ozs__nav-btn--next:focus-visible::before {
transform: none !important;
}
.oz-hero-native .ozs__nav-btn--prev { left: 16px; }
.oz-hero-native .ozs__nav-btn--next { right: 16px; }
.oz-hero-native .ozs__dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 5;
}
.oz-hero-native .ozs__dot {
width: 8px;
height: 8px;
background: rgba(255,255,255,0.4);
}
.oz-hero-native .ozs__dot.is-active {
background: #ffffff;
transform: scale(1.3);
}
@media (max-width: 1366px) {
.oz-hero-native .ozs__content {
padding: 0 7vw;
max-width: 580px;
}
.oz-hero-native .oz-slide__subtitle {
max-width: 460px;
}
}
@media (max-width: 1024px) {
.oz-hero-native .ozs__content {
padding: 0 90px 0 90px;
max-width: 460px;
}
.oz-hero-native .oz-slide__title {
font-size: 40px !important;
}
.oz-hero-native .oz-slide__subtitle {
font-size: 15.5px !important;
max-width: 380px;
}
}
/* ≤768px (tablet_v y mobile): las imágenes "mobile" de cada slide ya
traen su propio título/bajada/badges impresos (generadas aparte para
este formato vertical) — mostrar ADEMÁS el título/subtítulo/botón del
componente duplicaba el mensaje. Se oculta todo el overlay de texto;
el clic para ir a la sección de marcas lo resuelve el campo nativo
"Enlace (URL)" de cada slide (link/target en banner-model-1.php), que
convierte la imagen entera en un — no un botón de texto aparte. */
@media (max-width: 768px) {
.oz-hero-native .ozs__content {
display: none;
}
.oz-hero-native .ozs__overlay {
display: none;
}
.oz-hero-native .ozs__nav-btn {
top: auto !important;
bottom: 14px;
transform: none !important;
width: 40px;
height: 40px;
}
.oz-hero-native .ozs__nav-btn:hover,
.oz-hero-native .ozs__nav-btn:focus-visible,
html body .ozs.ozs--banner.oz-hero-native .ozs__nav-btn:hover,
html body .ozs.ozs--banner.oz-hero-native .ozs__nav-btn:focus-visible {
transform: none !important;
}
.oz-hero-native .ozs__nav-btn--prev { left: 14px; }
.oz-hero-native .ozs__nav-btn--next { right: 14px; }
.oz-hero-native .ozs__dots {
bottom: 24px;
}
}
@media (max-width: 480px) {
.oz-hero-native .ozs__nav-btn,
html body .ozs.ozs--banner.oz-hero-native .ozs__nav-btn {
display: none !important;
}
}
/* Nuestras Marcas — las 2 cards (Supremo/Al Toque) no tenían NINGÚN ajuste
responsive propio (todo en estilos inline fijos: height:320px, imagen
57% + texto lado a lado siempre) — en pantallas angostas el texto
quedaba comprimido a 2-3 palabras por línea dentro de un ancho de
~140px. Se agregan clases para poder apilar imagen/texto en vez de
ponerlos lado a lado por debajo de tablet horizontal. */
.oz-marcas-row {
display: flex;
gap: 32px;
align-items: stretch;
flex-wrap: wrap;
}
.oz-marca-card {
flex: 1;
min-width: 0;
display: flex;
height: 320px;
}
.oz-marca-card__media {
flex: 0 0 57%;
height: 100%;
}
.oz-marca-card__body {
flex: 1;
}
@media (max-width: 1024px) {
.oz-marca-card {
height: 280px;
}
.oz-marca-card__body {
padding: 22px 20px !important;
}
.oz-marca-card__body h3 {
font-size: 21px !important;
}
}
@media (max-width: 768px) {
.oz-marcas-row {
flex-direction: column;
gap: 24px;
}
.oz-marca-card {
height: auto;
flex-direction: column;
flex: 1 1 auto;
}
.oz-marca-card__media {
flex: 0 0 auto;
height: 220px;
}
/* El centrado del contenido de la tarjeta (badge, título, texto y botón)
ya no es solo de móvil: vive en .ozx-marca (global-classes.css) y
aplica en todas las vistas, así que aquí no se repite. */
}
@media (max-width: 480px) {
.oz-marca-card__media {
height: 190px;
}
.oz-marca-card__body {
padding: 24px 20px !important;
}
}
/* Proceso y Calidad (fila oz-pb-r-9, columnas 35/65): al no ser un split
50/50 el Maquetador la marca "keep-mobile" (oz_pb_cols_are_balanced) y
NO la apila en tablet vertical — texto e imagen quedan lado a lado,
comprimiendo el collage a una tira casi ilegible. Se fuerza el apilado
a 2 filas (texto arriba, imagen abajo) solo para esta fila específica,
sin tocar el comportamiento general de columnas desiguales del resto
del sitio. */
@media (max-width: 768px) {
.oz-pb-r-9 .oz-pb-grid {
grid-template-columns: 1fr !important;
}
.oz-pb-r-9 .oz-pb-col {
grid-column: 1 / -1 !important;
margin-left: 0 !important;
}
}
/* Collage "Proceso y Calidad" — bloque tipo Imagen real del Maquetador
(antes era un bloque de Texto con un