/* ==========================================================================
   Los siete estilos de título y los cinco de carrusel/tarjeta.

   Por qué un archivo aparte y no dentro de card.css o carousel.css: Happy
   Store carga ESTE mismo archivo para pintar la tienda de WooCommerce con
   los mismos estilos. Es la única copia; si estas reglas vivieran en el
   plugin del carrusel y se repitieran allá, a la tercera vez que alguien
   toque un estilo las dos versiones ya no se parecerían.

   Por eso cada regla nombra los dos marcados que existen:
     .lpc-card   → la tarjeta del carrusel (este plugin)
     li.product  → la tarjeta de la tienda (WooCommerce, pintada por Happy Store)

   El acento sale de --lpc-btn-bg, que es el color de marca que el cliente
   ya eligió una vez en Happy Plus > Product Carousel.

   IMPORTANTE: "linea" y "clasico" son los de siempre y **no declaran nada**.
   Son el aspecto que ya tienen los sitios, y tienen que seguir igual.
   ========================================================================== */


/* ==========================================================================
   TÍTULOS
   ========================================================================== */

/* --- 1. Línea al costado (clásico) ----------------------------------------
   El de siempre: texto a la izquierda y una línea que ocupa el resto del
   ancho. Vive en carousel.css y no se toca desde acá. */


/* --- 2. Centrado con subrayado -------------------------------------------- */
.lpc-heading.lpc-t-centrado {
	display: block;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: calc(var(--lpc-heading-size, 1.4em) * .8);
	font-weight: 600;
}

.lpc-heading.lpc-t-centrado::after {
	display: block;
	width: 56px;
	height: 3px;
	margin: 12px auto 0;
	background: var(--lpc-btn-bg, #e8722c);
	flex: none;
}


/* --- 6. Línea debajo con "Ver más" -----------------------------------------
   Título a la izquierda, "Ver más" a la derecha y una línea fina del color
   de marca cruzando todo el ancho por debajo de los dos. A diferencia del
   clásico, la línea NO va entre el texto y el borde: va abajo, así que hay
   que apagar el ::after que la dibuja al costado. */
.lpc-heading.lpc-t-subrayado {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 10px;
	border-bottom: var(--lpc-subrayado-ancho, 2px) solid
		var(--lpc-subrayado-color, var(--lpc-btn-bg, #e8722c));
	font-weight: 400;
}

.lpc-heading.lpc-t-subrayado::after {
	display: none;
}

.lpc-heading.lpc-t-subrayado .lpc-heading-mas {
	flex: none;
	font-size: .62em;
	font-weight: 400;
	color: var(--lpc-mas-color, inherit);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.lpc-heading.lpc-t-subrayado .lpc-heading-mas:hover,
.lpc-heading.lpc-t-subrayado .lpc-heading-mas:focus-visible {
	color: var(--lpc-mas-color-hover, var(--lpc-btn-bg, #e8722c));
}

/* En pantallas angostas el título se come el ancho y "Ver más" queda
   apretado contra el borde; con dos renglones se lee mejor que con el
   título partido en cuatro. */
@media (max-width: 480px) {
	.lpc-heading.lpc-t-subrayado {
		flex-wrap: wrap;
		gap: 4px 16px;
	}
}


/* --- 3. Barra lateral ------------------------------------------------------ */
.lpc-heading.lpc-t-barra {
	gap: 12px;
	padding-left: 14px;
	border-left: 5px solid var(--lpc-btn-bg, #e8722c);
	font-weight: 800;
	letter-spacing: -.01em;
}

/* Sin la línea horizontal: la barra ya es el separador. */
.lpc-heading.lpc-t-barra::after {
	display: none;
}


/* --- 4. Bloque de color ---------------------------------------------------- */
.lpc-heading.lpc-t-bloque {
	display: inline-flex;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--lpc-btn-bg, #e8722c);
	color: var(--lpc-btn-color, #fff);
	font-size: calc(var(--lpc-heading-size, 1.4em) * .85);
	font-weight: 700;
}

.lpc-heading.lpc-t-bloque::after {
	display: none;
}


/* --- 5. Mínimo ------------------------------------------------------------- */
.lpc-heading.lpc-t-minimo {
	text-transform: uppercase;
	letter-spacing: .22em;
	font-size: calc(var(--lpc-heading-size, 1.4em) * .62);
	font-weight: 500;
	opacity: .75;
}

.lpc-heading.lpc-t-minimo::after {
	display: none;
}


/* --- 7. Recuadro -----------------------------------------------------------
   El título adentro de un marco de ancho completo, con el texto centrado y
   espaciado. Pensado para que el encabezado se lea como una pieza más de la
   fila: toma el MISMO borde y el MISMO radio que las tarjetas de abajo
   (--lpc-border-*, --lpc-card-radius), así que si el cliente redondea las
   tarjetas o les cambia el color del borde, el título lo sigue solo.

   Se dibuja con `display: block` porque .lpc-heading es flex y acá el texto
   tiene que poder centrarse en todo el ancho; por eso además hay que apagar
   el ::after, que en flex era la línea al costado y adentro de un bloque
   quedaría como una raya suelta debajo del texto.

   Sin mayúsculas a propósito: el nombre de la sección lo escribe el cliente
   ("Compresores en oferta") y forzarlo a mayúsculas le pisa la decisión. El
   espaciado entre letras ya le da el aire que hace que se lea como título. */
.lpc-heading.lpc-t-recuadro {
	display: block;
	/* El espaciado entre letras le agrega un hueco DESPUÉS de la última,
	   que descentra el texto hacia la izquierda; ese .14em de más a la
	   izquierda lo compensa. */
	padding: 14px 20px 14px calc(20px + .14em);
	/* El COLOR es propio (--lpc-recuadro-borde) para poder enmarcar el
	   título sin pintar también el borde de las tarjetas. Sin un color
	   elegido, esa variable ya viene resuelta con el de la tarjeta, así que
	   los dos siguen combinando solos.

	   El grosor y el radio sí se comparten con la tarjeta: lo que molestaba
	   era el color. */
	border: var(--lpc-border-width, 1px) solid
		var(--lpc-recuadro-borde, var(--lpc-border-color, #eee));
	border-radius: var(--lpc-card-radius, 10px);
	text-align: center;
	letter-spacing: .14em;
	font-size: calc(var(--lpc-heading-size, 1.4em) * .78);
	font-weight: 500;
	line-height: 1.3;
}

.lpc-heading.lpc-t-recuadro::after {
	display: none;
}


/* ==========================================================================
   CARRUSEL Y TARJETAS
   ========================================================================== */

/* --- 1. Clásico ------------------------------------------------------------
   El de siempre: borde fino, esquinas suaves, flechas circulares. Vive en
   card.css y carousel.css; acá no se declara nada. */


/* --- 2. Tarjeta elevada ---------------------------------------------------- */
.lpc-c-elevado .lpc-card,
ul.products.lpc-c-elevado li.product {
	border: 0 !important;
	border-radius: 14px !important;
	background: var(--lpc-card-bg, #fff);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 16px rgba(0, 0, 0, .06);
	transition: box-shadow .2s ease, transform .2s ease;
}

.lpc-c-elevado .lpc-card:hover,
ul.products.lpc-c-elevado li.product:hover {
	box-shadow: 0 2px 6px rgba(0, 0, 0, .10), 0 14px 32px rgba(0, 0, 0, .12);
	transform: translateY(-3px);
}

.lpc-c-elevado .lpc-arrow {
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .14);
}


/* --- 3. Limpio -------------------------------------------------------------
   Sin caja: solo imagen y texto. La foto crece apenas al pasar el mouse,
   que es todo el efecto que necesita. */
.lpc-c-limpio .lpc-card,
ul.products.lpc-c-limpio li.product {
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.lpc-c-limpio .lpc-thumb,
ul.products.lpc-c-limpio li.product a img {
	overflow: hidden;
	border-radius: 6px;
}

.lpc-c-limpio .lpc-thumb img,
ul.products.lpc-c-limpio li.product a img {
	transition: transform .35s ease;
}

.lpc-c-limpio .lpc-card:hover .lpc-thumb img,
ul.products.lpc-c-limpio li.product:hover a img {
	transform: scale(1.05);
}

.lpc-c-limpio .lpc-body {
	padding-left: 0;
	padding-right: 0;
}

.lpc-c-limpio .lpc-arrow {
	border: 0;
	background: transparent;
	box-shadow: none;
}


/* --- 4. Contorno marcado --------------------------------------------------- */
.lpc-c-contorno .lpc-card,
ul.products.lpc-c-contorno li.product {
	border: 2px solid var(--lpc-btn-bg, #e8722c) !important;
	border-radius: 0 !important;
	background: var(--lpc-card-bg, #fff);
	box-shadow: none !important;
	transition: transform .18s ease, box-shadow .18s ease;
}

.lpc-c-contorno .lpc-card:hover,
ul.products.lpc-c-contorno li.product:hover {
	transform: translate(-3px, -3px);
	box-shadow: 6px 6px 0 var(--lpc-btn-bg, #e8722c);
}

.lpc-c-contorno .lpc-arrow {
	border: 2px solid var(--lpc-btn-bg, #e8722c);
	border-radius: 0;
	background: var(--lpc-card-bg, #fff);
}


/* --- 5. Compacto -----------------------------------------------------------
   Tarjetas pegadas, separadas por una línea fina. Para catálogos largos,
   donde entran más productos por pantalla. */
.lpc-c-compacto .lpc-card,
ul.products.lpc-c-compacto li.product {
	border: 0 !important;
	border-radius: 0 !important;
	border-right: 1px solid var(--lpc-border-color, rgba(0, 0, 0, .10)) !important;
	background: transparent !important;
	box-shadow: none !important;
	padding-right: 10px;
}

.lpc-c-compacto .lpc-body {
	padding: 8px 0 0;
}

.lpc-c-compacto .lpc-title {
	font-size: calc(var(--lpc-title-size, 15px) * .92);
}

.lpc-c-compacto .lpc-arrow {
	width: 30px;
	height: 30px;
	border-radius: 4px;
}