/**
 * Home Builder — estilos del FRONT (bloques renderizados en la homepage).
 * Cargados solo en la home cuando hay config. Acotados bajo .wa-hb.
 */

.wa-hb {
	width: 100%;
}

/* ---------- Ancho por bloque (caja / completo) ---------- */
/* Cada bloque va envuelto en .wa-hb-block-w; el espaciado entre bloques vive
   ahora en el wrapper (antes en .wa-hb > section). */
.wa-hb-block-w {
	margin-bottom: 28px;
}

/* Caja: ancho normal dentro del contenedor del contenido (.container 90%). */
.wa-hb-block-w--boxed {
	width: 100%;
}

/* Ancho completo: de borde a borde del viewport (full-bleed), aunque el
   bloque viva dentro del .container. La técnica centra un elemento de 100vw
   respecto de su contenedor sin importar el ancho de éste. */
.wa-hb-block-w--full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Para que el full-bleed NO sea recortado: ningún contenedor del contenido
   debe tener overflow:hidden (el .container del tema lo tiene como clearfix).
   Este CSS sólo carga en la home, así que NO afecta otras páginas; y apuntamos
   a la cadena del CONTENIDO, no a los .container de header/footer. */
#content.site-content,
#content.site-content > .container,
#primary.content-area,
.site-main {
	overflow: visible;
}

/* ---------- Banner ---------- */
.wa-hb-banner {
	display: grid;
	width: 100%;
}

.wa-hb-banner.wa-hb-cols-1 { grid-template-columns: 1fr; }
.wa-hb-banner.wa-hb-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wa-hb-banner.wa-hb-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wa-hb-banner.wa-hb-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.wa-hb-banner.wa-hb-gap-none   { gap: 0; }
.wa-hb-banner.wa-hb-gap-small  { gap: 8px; }
.wa-hb-banner.wa-hb-gap-normal { gap: 16px; }
.wa-hb-banner.wa-hb-gap-large  { gap: 24px; }

.wa-hb-banner__item {
	overflow: hidden;
	border-radius: 8px;
	background: #f1f3f5;
}

/* aspect-ratio por cantidad de columnas → todas las imágenes de la fila
   quedan con la MISMA altura y proporción, aunque las originales tengan
   tamaños distintos (se recortan con object-fit:cover, centradas). */
.wa-hb-banner.wa-hb-cols-1 .wa-hb-banner__item { aspect-ratio: 16 / 5; }   /* hero ancho */
.wa-hb-banner.wa-hb-cols-2 .wa-hb-banner__item { aspect-ratio: 2 / 1; }
.wa-hb-banner.wa-hb-cols-3 .wa-hb-banner__item { aspect-ratio: 4 / 3; }
.wa-hb-banner.wa-hb-cols-4 .wa-hb-banner__item { aspect-ratio: 1 / 1; }

/* El <a> (cuando hay link) debe llenar el item para que la img ocupe todo. */
.wa-hb-banner__item a {
	display: block;
	width: 100%;
	height: 100%;
}

.wa-hb-banner__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}

.wa-hb-banner__item a:hover img {
	transform: scale(1.04);
}

/* Responsive: en móvil TODO se apila en 1 columna (más legible).
   Usamos una proporción ancha para que cada imagen apilada no quede tan alta. */
@media (max-width: 768px) {
	.wa-hb-banner.wa-hb-cols-2,
	.wa-hb-banner.wa-hb-cols-3,
	.wa-hb-banner.wa-hb-cols-4 {
		grid-template-columns: 1fr;
	}
	.wa-hb-banner .wa-hb-banner__item {
		aspect-ratio: 16 / 7;
	}
}

/* ---------- Secciones de productos ----------
   Reusamos las clases del tema (.products-section, .products-grid.cols-N,
   .section-header, .section-title) cuyo CSS ya carga en la home. No las
   redefinimos para no pisar el estilo del tema.

   Lo de abajo es SOLO un fallback de grid por si el tema activo NO es
   tikitopro (no tiene .products-grid en su CSS). */
.wa-hb-products .products-grid {
	display: grid;
	gap: 16px;
	/* Columnas por variable (la setea el render por dispositivo). Así no
	   dependemos de clases .cols-N y el responsive no pelea por especificidad. */
	grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
}

/* Columnas responsive con herencia (tablet ≤1024; móvil ≤767). El render
   siempre emite --cols-t / --cols-m con un default sensato (cap 3 / 2). */
@media (max-width: 1024px) {
	.wa-hb-products .products-grid {
		grid-template-columns: repeat(var(--cols-t, var(--cols, 3)), minmax(0, 1fr));
	}
}
@media (max-width: 767px) {
	.wa-hb-products .products-grid {
		grid-template-columns: repeat(var(--cols-m, var(--cols, 2)), minmax(0, 1fr));
	}
}

/* Fallback card (solo se usa si no existe tikitopro_render_product_card) */
.wa-hb-fallback-card { text-align: center; }
.wa-hb-fallback-card img { width: 100%; height: auto; border-radius: 8px; }
.wa-hb-fallback-card h3 { font-size: 14px; margin: 8px 0 4px; }

/* ---------- Heading / texto ---------- */
.wa-hb-heading {
	margin: 0 0 16px;
}

/* ---------- Slider de imágenes (Swiper) ---------- */
.wa-hb-slider {
	position: relative;
}
.wa-hb-slider__swiper {
	width: 100%;
	height: var(--wa-hb-slider-h, 420px);
	border-radius: 10px;
	overflow: hidden;
}
/* Alto responsive con herencia (tablet hereda escritorio; móvil hereda
   tablet y, si no, escritorio). Igual que Elementor. */
@media (max-width: 1024px) {
	.wa-hb-slider__swiper {
		height: var(--wa-hb-slider-h-t, var(--wa-hb-slider-h, 420px));
	}
}
@media (max-width: 767px) {
	.wa-hb-slider__swiper {
		height: var(--wa-hb-slider-h-m, var(--wa-hb-slider-h-t, var(--wa-hb-slider-h, 420px)));
	}
}
.wa-hb-slider__slide,
.wa-hb-slider__slide > a {
	display: block;
	width: 100%;
	height: 100%;
}
.wa-hb-slider__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Flechas / puntos (sobre los estilos por defecto de Swiper) */
.wa-hb-slider .swiper-button-prev,
.wa-hb-slider .swiper-button-next {
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.wa-hb-slider .swiper-pagination-bullet {
	background: #fff;
	opacity: 0.6;
}
.wa-hb-slider .swiper-pagination-bullet-active {
	opacity: 1;
}
/* En ancho completo, sin esquinas redondeadas (queda raro de borde a borde). */
.wa-hb-block-w--full .wa-hb-slider__swiper {
	border-radius: 0;
}

/* Overlay (hero): título + subtítulo + botón sobre la imagen. */
.wa-hb-slider__slide {
	position: relative;
}
.wa-hb-slider__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 24px;
	background: linear-gradient( to top, rgba(0,0,0,0.45), rgba(0,0,0,0.12) 55%, rgba(0,0,0,0) );
	color: #fff;
	pointer-events: none; /* sólo el botón es clickeable */
}
.wa-hb-slider__overlay-inner {
	max-width: 760px;
}
.wa-hb-slider__title {
	margin: 0 0 8px;
	font-size: clamp( 22px, 4vw, 44px );
	line-height: 1.15;
	color: #fff;
	text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.wa-hb-slider__sub {
	margin: 0 0 16px;
	font-size: clamp( 14px, 2vw, 20px );
	color: #fff;
	text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.wa-hb-slider__btn {
	display: inline-block;
	pointer-events: auto;
	background: #fff;
	color: #111;
	font-weight: 600;
	padding: 10px 22px;
	border-radius: 999px;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}
.wa-hb-slider__btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

/* Encabezado de sección de productos + enlace "Ver todos". */
.wa-hb-products .section-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.wa-hb-view-all {
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.wa-hb-view-all:hover {
	text-decoration: underline;
}