/* Levapan Elements — Carrusel de categorías */

.lv-category-carousel-wrap {
	--lv-cat-circle-size: 180px;
	--lv-cat-card-gap: 8px;
	--lv-cat-title: #141414;
	--lv-cat-all-bg: #cf1d1d;
	--lv-cat-all-icon-color: #ffffff;
	--lv-cat-all-icon-size: 61px;
	--lv-cat-focus: #cf1d1d;
	--lv-cat-arrow-size: 44px;
	--lv-cat-arrow-icon-size: 18px;
	--lv-cat-arrow-color: #ffffff;
	--lv-cat-arrow-bg: #cf1d1d;
	--lv-cat-arrow-offset: 0px;
	--lv-cat-dot: #d9d9d9;
	--lv-cat-dot-active: #cf1d1d;
	--lv-cat-dot-size: 10px;
	--lv-cat-dot-gap: 6px;

	/* Estados sin valor propio: heredan el normal para no alterar el aspecto
	   por defecto al exponer estos controles. El activo sí trae el suyo: es el
	   término cuyo archivo se está viendo y debe distinguirse sin configurar
	   nada. */
	--lv-cat-title-hover: var(--lv-cat-title);
	--lv-cat-title-active: #cf1d1d;
	--lv-cat-arrow-color-hover: var(--lv-cat-arrow-color);
	--lv-cat-arrow-bg-hover: var(--lv-cat-arrow-bg);
	--lv-cat-arrow-opacity-disabled: 0.35;
	--lv-cat-dot-hover: var(--lv-cat-dot);

	/* Aire para que la sombra del slide fijo no se recorte (la roja de «Todas»
	   desborda el círculo). */
	--lv-cat-air-inline: 6px;

	/* Canal lateral para las flechas en modo «fuera»; 0 en modo «sobre». El
	   valor por breakpoint lo escribe el control «Posición» desde el CSS del
	   post (selectors_dictionary), que pesa más que este default. */
	--lv-cat-arrow-gutter: 0px;

	position: relative;
	/* El aire lateral se talla DENTRO del wrap: las tarjetas ceden ese espacio
	   y nada sobresale del widget (en móvil, con el widget a todo el ancho, un
	   desborde sería scroll horizontal en la página). El canal de las flechas
	   sigue la misma lógica: se resta a los slides, no desborda el container. */
	padding-inline: calc(var(--lv-cat-air-inline) + var(--lv-cat-arrow-gutter));
}

/* Swiper pone `overflow: hidden` en `.swiper` y eso recorta la sombra de las
   tarjetas. Se recorta solo en horizontal: `clip` admite que el eje Y sea
   `visible` (mismo razonamiento, más largo, en widget-thumb-slider.css). El
   aire lateral va por padding porque el recorte ocurre en el borde del
   padding, no en el del contenido. Nada de `overflow-clip-margin`: los
   navegadores lo ignoran salvo que los DOS ejes sean `clip`. */
.lv-category-carousel.swiper {
	overflow: hidden; /* Fallback Safari < 16: el aire lateral funciona igual */
	overflow: clip visible;
	width: calc(100% + 2 * var(--lv-cat-air-inline));
	margin-inline: calc(-1 * var(--lv-cat-air-inline));
	padding-inline: var(--lv-cat-air-inline);
}

/* `overflow: visible`: elementor-pro (widget-carousel-module-base.css) pone
   `.swiper-slide { overflow: hidden }` con alcance global y recortaría la
   sombra. Dos clases para ganarle. */
.lv-category-carousel .swiper-slide {
	height: auto;
	overflow: visible;
}

/* --- Tarjeta --- */

/* El centrado no cuelga solo de `align-items`: si algo pisa el flex de la
   tarjeta (pasa en el editor), `text-align` + `margin-inline: auto` del
   círculo mantienen todo centrado igualmente. */
.lv-category-carousel__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--lv-cat-card-gap);
	width: 100%;
	text-align: center;
	text-decoration: none;
}

/* Doble clase: `.elementor img { max-width: 100% }` (0,1,1) le ganaría el
   tope del diámetro a una sola clase. */
.lv-category-carousel__card .lv-category-carousel__circle {
	display: block;
	width: 100%;
	margin-inline: auto;
	/* Tope, no tamaño fijo: en un slide más estrecho que el diámetro (viewport
	   intermedios) el círculo fluye al ancho disponible y no desborda. */
	max-width: var(--lv-cat-circle-size);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	transition: box-shadow 0.3s ease;
}

/* El `height: auto` de `.elementor img` no estorba aquí: con aspect-ratio el
   alto sale del ancho, y `object-fit` recorta la foto al círculo. */
.lv-category-carousel__card img.lv-category-carousel__circle {
	object-fit: cover;
	height: auto;
}

/* El círculo del slide fijo y el de un término sin imagen son <span> flex. */
.lv-category-carousel__card span.lv-category-carousel__circle {
	display: flex;
	align-items: center;
	justify-content: center;
}

.lv-category-carousel__circle--all {
	background-color: var(--lv-cat-all-bg);
	color: var(--lv-cat-all-icon-color);
	/* La sombra del diseño; el control de sombra del widget la sobrescribe
	   desde el CSS del post, que pesa más que esta hoja. */
	box-shadow: 0 2px 4px rgba(207, 29, 29, 0.62);
}

.lv-category-carousel__circle--all svg,
.lv-category-carousel__circle--all i {
	width: var(--lv-cat-all-icon-size);
	max-width: 60%;
	height: auto;
	font-size: var(--lv-cat-all-icon-size);
	fill: currentColor;
}

/* Término sin imagen ACF: círculo gris con la inicial, para que el hueco no
   desaparezca y el editor vea qué término está sin foto. */
.lv-category-carousel__circle--empty {
	background-color: #e5e5e5;
	color: #939393;
	font-size: calc(var(--lv-cat-circle-size) / 3);
	font-weight: 700;
}

.lv-category-carousel__title {
	display: block;
	width: 100%;
	color: var(--lv-cat-title);
	font-family: Poppins, sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 27px;
	text-align: center;
	transition: color 0.2s ease;
}

.lv-category-carousel__card:hover .lv-category-carousel__title {
	color: var(--lv-cat-title-hover);
}

.lv-category-carousel__card--active .lv-category-carousel__title {
	color: var(--lv-cat-title-active);
}

/* Anillo de foco propio sobre el círculo, en lugar del aro del user-agent
   alrededor de la tarjeta entera. `outline` sigue el border-radius. */
.lv-category-carousel__card:focus-visible {
	outline: none;
}

.lv-category-carousel__card:focus-visible .lv-category-carousel__circle {
	outline: 3px solid var(--lv-cat-focus);
	outline-offset: 2px;
}

/* --- Flechas --- */

.lv-category-carousel-wrap .lv-slider-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--lv-cat-arrow-size);
	height: var(--lv-cat-arrow-size);
	border-radius: 50%;
	background-color: var(--lv-cat-arrow-bg);
	color: var(--lv-cat-arrow-color);
	font-size: var(--lv-cat-arrow-icon-size);
	line-height: 1;
	cursor: pointer;
	transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* `:not(.swiper-button-disabled)`: en los extremos sin bucle la flecha no reacciona. */
.lv-category-carousel-wrap .lv-slider-arrow:hover:not(.swiper-button-disabled),
.lv-category-carousel-wrap .lv-slider-arrow:focus-visible:not(.swiper-button-disabled) {
	background-color: var(--lv-cat-arrow-bg-hover);
	color: var(--lv-cat-arrow-color-hover);
}

.lv-category-carousel-wrap .lv-slider-arrow svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.lv-category-carousel-wrap .lv-slider-arrow i {
	font-size: inherit;
}

/* Tres clases para ganarle a `.elementor-element .swiper ~ .elementor-swiper-button-*`
   de e-swiper.min.css, que fija los 10px de Swiper y un `top: 50%` sobre el
   wrap entero (círculo + título + paginación) que hundía las flechas. El
   `top` propio las centra en el círculo; el translateY(-50%) de e-swiper se
   conserva. En modo «fuera» el offset parte del canal (el `inset` se mide
   desde el padding box del wrap), así que 0 ya deja la flecha sin tapar nada. */
.elementor-element .lv-category-carousel-wrap .lv-slider-arrow--prev {
	top: calc(var(--lv-cat-circle-size) / 2);
	inset-inline-start: var(--lv-cat-arrow-offset);
	inset-inline-end: auto;
}

.elementor-element .lv-category-carousel-wrap .lv-slider-arrow--next {
	top: calc(var(--lv-cat-circle-size) / 2);
	inset-inline-end: var(--lv-cat-arrow-offset);
	inset-inline-start: auto;
}

.lv-category-carousel-wrap .lv-slider-arrow.swiper-button-disabled {
	opacity: var(--lv-cat-arrow-opacity-disabled);
	cursor: default;
}

/* --- Paginación --- */

.lv-category-carousel-wrap .swiper-pagination {
	position: static;
	margin-block-start: 16px;
}

.lv-category-carousel-wrap .swiper-pagination-bullet {
	width: var(--lv-cat-dot-size);
	height: var(--lv-cat-dot-size);
	background-color: var(--lv-cat-dot);
	opacity: 1;
	transition: background-color 0.2s ease;
}

/* Tres clases para ganarle al margin fijo que Swiper pone a los bullets. */
.elementor-element .lv-category-carousel-wrap .swiper-pagination-bullet {
	margin-inline: calc(var(--lv-cat-dot-gap) / 2);
}

.lv-category-carousel-wrap .swiper-pagination-bullet:hover:not(.swiper-pagination-bullet-active) {
	background-color: var(--lv-cat-dot-hover);
}

.lv-category-carousel-wrap .swiper-pagination-bullet-active {
	background-color: var(--lv-cat-dot-active);
}