/* 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. Flechas y puntos sin valor propio heredan el normal para no
	   alterar el aspecto por defecto al exponer sus controles. La tarjeta sí
	   trae hover y activo propios (título rojo + sombra en el círculo): el
	   activo es el término cuyo archivo se está viendo y debe distinguirse sin
	   configurar nada, y el hover tiene que responder al ratón.
	   Las sombras (--lv-cat-circle-shadow, -hover, -active y --lv-cat-all-shadow)
	   NO se declaran aquí: las escriben los controles del panel, y mientras no
	   existan cada tarjeta usa su propio fallback (ver .lv-category-carousel__card),
	   distinto para los términos y para «Todas». */
	--lv-cat-title-hover: #cf1d1d;
	--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 {
	/* Sombra del círculo por estado como variables locales: la tarjeta de
	   término y «Todas» comparten las reglas de estado de más abajo y solo
	   cambian estos fallbacks (tinte neutro aquí, rojo en «Todas»). El control
	   del panel escribe --lv-cat-circle-shadow* en el wrap y manda sobre las
	   dos. La sombra por defecto es casi vertical a propósito: el swiper
	   recorta en horizontal y el aire lateral (--lv-cat-air-inline) es de 6px,
	   así que no debe sobresalir más de eso a los lados (blur − |spread|). */
	--_shadow: var(--lv-cat-circle-shadow, none);
	--_shadow-hover: var(--lv-cat-circle-shadow-hover, 0 6px 10px -4px rgba(20, 20, 20, 0.35));
	--_shadow-active: var(--lv-cat-circle-shadow-active, var(--_shadow-hover));

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--lv-cat-card-gap);
	width: 100%;
	text-align: center;
	text-decoration: none;
}

/* «Todas» parte de la sombra roja del diseño y en hover la intensifica en su
   mismo tinte. El activo hereda el hover, como en los términos. */
.lv-category-carousel__card--all {
	--_shadow: var(--lv-cat-all-shadow, 0 2px 4px rgba(207, 29, 29, 0.62));
	--_shadow-hover: var(--lv-cat-circle-shadow-hover, 0 6px 10px -4px rgba(207, 29, 29, 0.6));
}

/* 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%;
	box-shadow: var(--_shadow);
	transition: box-shadow 0.3s ease;
}

/* El kit de Elementor subraya todo enlace en hover (`.elementor-kit-N a:hover`,
   0,2,1) y le gana al `text-decoration: none` de la tarjeta sola: dos clases
   más el estado para quitárselo. */
.lv-category-carousel-wrap .lv-category-carousel__card:hover,
.lv-category-carousel-wrap .lv-category-carousel__card:focus,
.lv-category-carousel-wrap .lv-category-carousel__card:focus-visible {
	text-decoration: none;
}

/* El hover excluye la tarjeta activa para que esta no pierda su estilo al
   pasar por encima (mismo criterio que en widget-timeline.css). `:focus-visible`
   va junto al hover por paridad con teclado; el anillo de foco de más abajo se
   suma, no lo sustituye. */
.lv-category-carousel__card:hover:not(.lv-category-carousel__card--active) .lv-category-carousel__circle,
.lv-category-carousel__card:focus-visible:not(.lv-category-carousel__card--active) .lv-category-carousel__circle {
	box-shadow: var(--_shadow-hover);
}

.lv-category-carousel__card--active .lv-category-carousel__circle {
	box-shadow: var(--_shadow-active);
}

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

/* La sombra viene por `--_shadow` (ver .lv-category-carousel__card--all). */
.lv-category-carousel__circle--all {
	background-color: var(--lv-cat-all-bg);
	color: var(--lv-cat-all-icon-color);
}

.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:not(.lv-category-carousel__card--active) .lv-category-carousel__title,
.lv-category-carousel__card:focus-visible:not(.lv-category-carousel__card--active) .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);
}