/**
 * Portada: selección de productos y bloque "Armá tu combo indoor".
 */

/* El título "Inicio" ya no se imprime (ver `hbg_sin_titulo_en_portada`); esto
   es la red de seguridad por si el filtro de Astra cambiara de nombre. */
.hbg-portada .entry-header {
	display: none;
}

/* =========================================================================
   BOTÓN DE MARCA

   Mismo patrón que el resto del sitio: blanco en reposo, verde con texto
   blanco al pasar el mouse.
   ========================================================================= */

.hbg-boton-marca {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding-inline: var(--hbg-e6);
	background: #ffffff;
	border: 1px solid #ffffff;
	border-radius: 0;
	color: var(--hbg-negro);
	font-family: var(--hbg-fuente-titulo);
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color var(--hbg-transicion),
	            border-color var(--hbg-transicion),
	            color var(--hbg-transicion);
}

.hbg-boton-marca:hover,
.hbg-boton-marca:focus-visible {
	background: var(--hbg-neon);
	border-color: var(--hbg-neon);
	color: #ffffff;
}

/* =========================================================================
   NUESTROS PRODUCTOS
   ========================================================================= */

.hbg-portada-productos {
	/*
	 * `width: 100%` y `min-width: 0` no son de adorno: `div.site` es un flex en
	 * columna, o sea que esta sección es un ítem flex, y un ítem flex arranca con
	 * `min-width: auto` — nunca se achica por debajo de su contenido mínimo. El
	 * contenido mínimo acá es la fila del carrusel, cuyas tarjetas tienen
	 * `flex-shrink: 0` y suman 1370 px. Resultado: entre 1281 y 1440 px de
	 * ventana la portada entera se iba 89 px para el costado y aparecía el scroll
	 * horizontal. Con la grilla anterior no pasaba porque las columnas sí se
	 * achicaban.
	 */
	width: 100%;
	min-width: 0;
	max-width: var(--hbg-ancho-max);
	margin-inline: auto;
	padding-block: var(--hbg-e7) var(--hbg-e6);
	/* Y aire a los lados, para que en el celular las tarjetas no queden pegadas
	   al borde de la pantalla como estaban. */
	padding-inline: var(--hbg-e5);
}

.hbg-portada-productos__cabecera {
	margin-bottom: var(--hbg-e6);
	text-align: center;
}

.hbg-portada-productos__titulo {
	margin: 0 0 var(--hbg-e2);
	font-family: var(--hbg-fuente-titulo);
	font-size: clamp(1.7rem, 4vw, 2.4rem);
	font-weight: 800;
	color: var(--hbg-texto);
	text-shadow: 0 0 24px rgba(57, 255, 20, 0.2);
}

.hbg-portada-productos__bajada {
	margin: 0;
	color: var(--hbg-texto-tenue);
	font-size: 0.95rem;
}

.hbg-portada-productos__pie {
	margin: var(--hbg-e6) 0 0;
	text-align: center;
}

/* =========================================================================
   CARRUSEL DE UNA FILA

   Cuántas tarjetas entran en el ancho lo decide una sola variable por
   breakpoint; el ancho de cada una sale de ahí por cuenta. Así no hay que
   tocar medidas en px cuando cambia el número de visibles.
   ========================================================================= */

.hbg-carrusel {
	--hbg-carr-visibles: 2;
	--hbg-carr-hueco: var(--hbg-e3);

	position: relative;
}

/* La fila es más ancha que el cuadro: esto es lo que la recorta. Va acá y no
   en `.hbg-carrusel` para que las flechas, que son hermanas del cuadro, no
   queden recortadas ellas también. */
.hbg-carrusel__cuadro {
	overflow: hidden;
	/* Aire para el resplandor del borde de la tarjeta al pasar el mouse, que
	   si no lo come el recorte. */
	padding-block: var(--hbg-e1);
}

@media (min-width: 640px) {
	.hbg-carrusel { --hbg-carr-visibles: 3; }
}

@media (min-width: 1024px) {
	.hbg-carrusel { --hbg-carr-visibles: 4; }
}

@media (min-width: 1280px) {
	.hbg-carrusel {
		--hbg-carr-visibles: 6;
		--hbg-carr-hueco: var(--hbg-e4);
	}
}

/* ------------------------------- la fila ------------------------------- */

.hbg-carrusel ul.products {
	/* Pisa el `display: grid` del catálogo: acá es una fila y punto. */
	display: flex;
	grid-template-columns: none;
	gap: var(--hbg-carr-hueco);
	/* El 100% es la referencia del ancho de tarjeta de más abajo; las tarjetas
	   desbordan a la derecha y el cuadro las recorta. */
	width: 100%;
	/* El JS la corre desde acá. Sin `transition`: el movimiento va cuadro a
	   cuadro y una transición encima lo volvería elástico. */
	transform: translate3d(0, 0, 0);
	will-change: transform;
}

/*
 * El clearfix que WooCommerce le cuelga a `ul.products` son dos pseudos con
 * `content: ""`, y en un contenedor flex eso NO es decoración: son dos ítems
 * más de la fila. Ya había pasado en la grilla de Mi Cuenta.
 */
.hbg-carrusel ul.products::before,
.hbg-carrusel ul.products::after {
	display: none;
}

.hbg-carrusel ul.products li.product {
	/* Los dos, y con `!important`, porque el catálogo le mete
	   `width: 100% !important` a la tarjeta para domar los floats de Astra. */
	flex: 0 0 var(--hbg-carr-ancho) !important;
	width: var(--hbg-carr-ancho) !important;

	--hbg-carr-ancho: calc(
		(100% - (var(--hbg-carr-visibles) - 1) * var(--hbg-carr-hueco))
		/ var(--hbg-carr-visibles)
	);
}

/* --------------------------- tarjeta compacta --------------------------- */

/* Con 6 en el ancho de 4 que había, la tarjeta queda en dos tercios. El texto
   se achica menos que la caja para que el nombre y el precio sigan legibles. */

.hbg-carrusel ul.products li.product .woocommerce-loop-product__title {
	padding: var(--hbg-e2) var(--hbg-e2) 0;
	font-size: 0.85rem;
	line-height: 1.3;
}

.hbg-carrusel ul.products li.product .price {
	padding: var(--hbg-e1) var(--hbg-e2) 0;
	font-size: 0.95rem;
}

.hbg-carrusel .hbg-fav-fila {
	padding: 0 var(--hbg-e2);
	margin-top: var(--hbg-e1);
	padding-bottom: var(--hbg-e2);
}

.hbg-carrusel ul.products li.product .hbg-fav,
.hbg-carrusel ul.products li.product .hbg-tarjeta-carrito {
	width: 28px;
	height: 28px;
	min-height: 28px;
}

.hbg-carrusel ul.products li.product .onsale {
	top: var(--hbg-e2);
	inset-inline-start: var(--hbg-e2);
	padding: 2px 8px;
	font-size: 0.68rem;
}

/*
 * La tarjeta se levanta 4px al pasar el mouse. Dentro del cuadro recortado eso
 * le corta el borde de arriba, así que acá el hover sólo cambia color.
 */
.hbg-carrusel ul.products li.product:hover {
	transform: none;
}

/* -------------------------------- flechas ------------------------------- */

.hbg-carrusel__flecha {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	transform: translateY(-50%);
	background: rgba(13, 13, 13, 0.72);
	border: 1px solid var(--hbg-borde-fuerte);
	border-radius: 50%;
	color: var(--hbg-texto);
	cursor: pointer;
	/* Sutiles, como se pidió: se despiertan al acercarse al carrusel. */
	opacity: 0;
	transition: opacity var(--hbg-transicion),
	            color var(--hbg-transicion),
	            border-color var(--hbg-transicion),
	            background-color var(--hbg-transicion);
}

.hbg-carrusel__flecha--antes   { inset-inline-start: var(--hbg-e2); }
.hbg-carrusel__flecha--despues { inset-inline-end: var(--hbg-e2); }

.hbg-carrusel:hover .hbg-carrusel__flecha,
.hbg-carrusel:focus-within .hbg-carrusel__flecha {
	opacity: 1;
}

.hbg-carrusel__flecha:hover,
.hbg-carrusel__flecha:focus-visible {
	background: var(--hbg-negro);
	border-color: var(--hbg-neon);
	color: var(--hbg-neon);
}

/* Con el foco puesto tienen que verse sí o sí, no sólo al pasar el mouse. */
.hbg-carrusel__flecha:focus-visible {
	opacity: 1;
}

/*
 * En pantallas táctiles no hay hover que las despierte: quedan visibles.
 * `hover: none` es la consulta correcta, no un ancho: un notebook angosto tiene
 * mouse y una tablet grande no.
 */
@media (hover: none) {
	.hbg-carrusel__flecha {
		opacity: 1;
		width: 38px;
		height: 38px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hbg-carrusel__flecha {
		opacity: 1;
	}
}

/* =========================================================================
   ARMÁ TU COMBO INDOOR
   ========================================================================= */

.hbg-combo {
	/* Bloque propio: se despega del negro del resto de la portada con un
	   degradé sutil y una línea verde arriba y abajo. */
	margin-block: var(--hbg-e7);
	padding-block: var(--hbg-e8);
	padding-inline: var(--hbg-e5);
	background:
		radial-gradient(ellipse at 15% 20%, rgba(57, 255, 20, 0.10), transparent 55%),
		linear-gradient(160deg, #14251a 0%, #101812 45%, var(--hbg-superficie-1) 100%);
	border-block: 1px solid var(--hbg-borde);
	/* Evita que las mitades desplazadas generen scroll lateral mientras entran. */
	overflow: hidden;
}

.hbg-combo__inner {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: var(--hbg-e6);
	max-width: var(--hbg-ancho-max);
	margin-inline: auto;
}

@media (min-width: 860px) {
	.hbg-combo__inner {
		/* Dos mitades. La imagen es vertical, así que se le da algo menos de
		   ancho que al texto para que no domine el bloque. */
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
		gap: var(--hbg-e8);
	}
}

/* ------------------------------ la imagen ------------------------------ */

.hbg-combo__placeholder {
	display: grid;
	place-items: center;
	/* Vertical, 3:4, como se pidió. */
	aspect-ratio: 3 / 4;
	max-width: 420px;
	margin-inline: auto;
	background:
		repeating-linear-gradient(
			45deg,
			rgba(57, 255, 20, 0.035) 0 12px,
			transparent 12px 24px
		),
		var(--hbg-superficie-1);
	border: 1px dashed var(--hbg-borde-fuerte);
}

@media (min-width: 860px) {
	.hbg-combo__placeholder {
		margin-inline: 0;
	}
}

.hbg-combo__placeholder-texto {
	padding: var(--hbg-e3) var(--hbg-e4);
	color: var(--hbg-texto-tenue);
	font-family: var(--hbg-fuente-titulo);
	font-size: 0.95rem;
	letter-spacing: 0.04em;
}

/* ------------------------------- el texto ------------------------------ */

.hbg-combo__ante {
	margin: 0 0 var(--hbg-e2);
	color: var(--hbg-neon);
	font-family: var(--hbg-fuente-titulo);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.hbg-combo__titulo {
	margin: 0 0 var(--hbg-e4);
	font-family: var(--hbg-fuente-titulo);
	font-size: clamp(2rem, 6vw, 3.4rem);
	font-weight: 800;
	line-height: 1.05;
}

.hbg-combo__titulo a {
	color: var(--hbg-texto);
	text-decoration: none;
	transition: color var(--hbg-transicion), text-shadow var(--hbg-transicion);
}

.hbg-combo__titulo a:hover,
.hbg-combo__titulo a:focus-visible {
	color: var(--hbg-neon);
	text-shadow: 0 0 26px rgba(57, 255, 20, 0.45);
}

.hbg-combo__bajada {
	margin: 0 0 var(--hbg-e5);
	max-width: 46ch;
	color: var(--hbg-texto-suave);
	font-size: 1rem;
	line-height: 1.6;
}

/* =========================================================================
   ANIMACIÓN DE ENTRADA

   Estado inicial acá y no en JS: si el script no corre, la regla de respaldo
   de más abajo deja todo visible igual. Nunca se pierde contenido por una
   animación que no llegó a dispararse.
   ========================================================================= */

.hbg-combo__media,
.hbg-combo__texto {
	opacity: 0;
	transition: opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
	            transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: opacity, transform;
}

.hbg-combo__media  { transform: translateX(-56px); }
.hbg-combo__texto  { transform: translateX(56px); }

/* Llegan las dos a la vez, desde lados opuestos. */
.hbg-combo[data-visible="true"] .hbg-combo__media,
.hbg-combo[data-visible="true"] .hbg-combo__texto {
	opacity: 1;
	transform: none;
}

/* Con JavaScript deshabilitado en el navegador, el bloque se muestra sin
   animación en vez de quedar invisible para siempre. */
@media (scripting: none) {
	.hbg-combo__media,
	.hbg-combo__texto {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hbg-combo__media,
	.hbg-combo__texto {
		opacity: 1;
		transform: none;
		transition: none;
	}
}