/* ==========================================================================
   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

   Todos los adornos —la barra lateral, la rayita de abajo, el subrayado
   con "Ver más", el fondo del bloque y el marco del recuadro al pasar el
   mouse— toman el MISMO color: --lpc-heading-acento. Antes cada uno
   apuntaba a --lpc-btn-bg por su cuenta, así que el adorno del título
   quedaba atado al color del botón "Añadir al carrito" y no se podía
   separar. El respaldo sigue siendo ese botón, para que un sitio que no
   elija nada se vea exactamente como antes.
   ========================================================================== */

/* --- 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-heading-acento, 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-heading-acento, 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-heading-acento, 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-heading-acento, 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-heading-acento, 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;
}

/* El recuadro como enlace a su categoría.
   -----------------------------------------------------------------------
   Lo pone PHP, y solo cuando el carrusel muestra una categoría o una marca
   (ver LPC_Render::enlace_del_grupo): con una lista de IDs o de SKUs no
   existe una página que liste exactamente esos productos, así que ahí el
   título sigue siendo texto.

   El enlace se estira sobre todo el marco con un ::after absoluto en vez de
   agrandar el <a>: el padding vive en el recuadro, así que un <a> normal
   dejaría los 14px de arriba y de abajo sin clic, justo donde la gente
   apunta cuando el botón es una caja. Así además no cambia una sola medida
   del diseño que ya está en los sitios.

   El aviso de que se puede tocar es el marco y no un subrayado: el texto va
   espaciado y centrado, y subrayarlo le rompe el aire que lo hace parecer
   un título. :focus-within lo repite para quien navega con el teclado. */
.lpc-heading .lpc-heading-enlace {
	color: inherit;
	text-decoration: none;
}

.lpc-heading.lpc-t-recuadro.lpc-heading-clicable {
	position: relative;
	transition: border-color .18s ease, color .18s ease;
}

.lpc-heading.lpc-t-recuadro .lpc-heading-enlace::after {
	content: "";
	position: absolute;
	inset: 0;
}

.lpc-heading.lpc-t-recuadro.lpc-heading-clicable:hover,
.lpc-heading.lpc-t-recuadro.lpc-heading-clicable:focus-within {
	border-color: var(--lpc-heading-acento, var(--lpc-btn-bg, var(--lpc-recuadro-borde, #212e42)));
	color: var(--lpc-heading-acento, var(--lpc-btn-bg, inherit));
}


/* ==========================================================================
   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;
}