/* ==========================================================================
   LS Elementor Widgets — Tarjeta Hover
   Una sola cara. Los controles del widget fijan variables CSS; el JS solo
   escribe la posición del ratón (--lsew-hc-mx / --lsew-hc-my, de -1 a 1).

   Estado "activo" (cursor encima, foco de teclado, .is-hover desde el JS en
   táctiles o la vista previa del editor):
   :is(.lsew-hc:hover, .lsew-hc:has(:focus-visible), .lsew-hc.is-hover,
       .elementor-editor-active .lsew-hc-preview-yes .lsew-hc)
   ========================================================================== */

.lsew-hc {
	--lsew-hc-dur: 500ms;
	--lsew-hc-ease: cubic-bezier(0.22, 0.7, 0.18, 1);
	--lsew-hc-text: #ffffff;
	--lsew-hc-iz0: 1;
	--lsew-hc-iz1: var(--lsew-hc-za, 1.08);
	--lsew-hc-ir: 0deg;
	--lsew-hc-f0: none;
	--lsew-hc-f1: none;
	--lsew-hc-idepth: 0px;
	--lsew-hc-idir: -1;

	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	isolation: isolate;
	color: var(--lsew-hc-text);
	box-sizing: border-box;
	translate: 0 0;
	transition:
		translate var(--lsew-hc-dur) var(--lsew-hc-ease),
		box-shadow var(--lsew-hc-dur) var(--lsew-hc-ease);
}

.lsew-hc *,
.lsew-hc *::before,
.lsew-hc *::after {
	box-sizing: border-box;
}

:is(.lsew-hc:hover, .lsew-hc:has(:focus-visible), .lsew-hc.is-hover, .elementor-editor-active .lsew-hc-preview-yes .lsew-hc) {
	translate: 0 calc(var(--lsew-hc-lift, 0px) * -1);
}

/* ---------- Inclinación 3D (la posición del ratón la pone el JS) ---------- */

.lsew-hc-tilt-yes .lsew-hc {
	transform:
		perspective(var(--lsew-hc-persp, 1000px))
		rotateX(calc(var(--lsew-hc-my, 0) * var(--lsew-hc-tilt, 8deg)))
		rotateY(calc(var(--lsew-hc-mx, 0) * var(--lsew-hc-tilt, 8deg) * -1));
	will-change: transform;
}

/* ---------- Imagen: capa de paralaje > Ken Burns > fondo con zoom/filtro ---------- */

.lsew-hc-imouse-against .lsew-hc,
.lsew-hc-imouse-follow .lsew-hc {
	--lsew-hc-idepth: var(--lsew-hc-idepth-v, 20px);
}

.lsew-hc-imouse-follow .lsew-hc {
	--lsew-hc-idir: 1;
}

.lsew-hc .lsew-hc__media {
	position: absolute;
	inset: calc(var(--lsew-hc-idepth) * -1);
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	transform: translate3d(
		calc(var(--lsew-hc-mx, 0) * var(--lsew-hc-idir) * var(--lsew-hc-idepth)),
		calc(var(--lsew-hc-my, 0) * var(--lsew-hc-idir) * var(--lsew-hc-idepth)),
		0
	);
}

.lsew-hc .lsew-hc__kb {
	position: absolute;
	inset: 0;
}

.lsew-hc-kb-yes .lsew-hc .lsew-hc__kb {
	animation: lsew-hc-kb var(--lsew-hc-kb-dur, 14s) ease-in-out infinite alternate;
}

@keyframes lsew-hc-kb {
	from {
		transform: scale(1) translate3d(0, 0, 0);
	}
	to {
		transform: scale(var(--lsew-hc-kb-scale, 1.15)) translate3d(-2%, -1.5%, 0);
	}
}

.lsew-hc .lsew-hc__bg {
	position: absolute;
	inset: 0;
	background-color: #2a1747;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	transform-origin: center;
	transform: scale(var(--lsew-hc-iz0)) rotate(0deg);
	filter: var(--lsew-hc-f0);
	transition:
		transform calc(var(--lsew-hc-dur) * 1.6) var(--lsew-hc-ease),
		filter var(--lsew-hc-dur) var(--lsew-hc-ease);
}

:is(.lsew-hc:hover, .lsew-hc:has(:focus-visible), .lsew-hc.is-hover, .elementor-editor-active .lsew-hc-preview-yes .lsew-hc) .lsew-hc__bg {
	transform: scale(var(--lsew-hc-iz1)) rotate(var(--lsew-hc-ir));
	filter: var(--lsew-hc-f1);
}

/* ---------- Capa de color, reflejo y enlace de toda la tarjeta ---------- */

.lsew-hc .lsew-hc__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: var(--lsew-hc-ov0, 1);
	transition: opacity var(--lsew-hc-dur) var(--lsew-hc-ease);
}

:is(.lsew-hc:hover, .lsew-hc:has(:focus-visible), .lsew-hc.is-hover, .elementor-editor-active .lsew-hc-preview-yes .lsew-hc) .lsew-hc__overlay {
	opacity: var(--lsew-hc-ov1, var(--lsew-hc-ov0, 1));
}

.lsew-hc .lsew-hc__glare {
	display: none;
}

.lsew-hc-glare-yes .lsew-hc .lsew-hc__glare {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(
		circle at calc(50% + var(--lsew-hc-mx, 0) * 50%) calc(50% + var(--lsew-hc-my, 0) * 50%),
		var(--lsew-hc-glare, rgba(255, 255, 255, 0.28)) 0%,
		transparent 60%
	);
	transition: opacity var(--lsew-hc-dur) var(--lsew-hc-ease);
}

.lsew-hc-glare-yes :is(.lsew-hc:hover, .lsew-hc:has(:focus-visible), .lsew-hc.is-hover, .elementor-editor-active .lsew-hc-preview-yes .lsew-hc) .lsew-hc__glare {
	opacity: 1;
}

.lsew-hc .lsew-hc__cover {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	text-decoration: none;
	box-shadow: none;
	outline: none;
}

/* ---------- Contenido y posición ---------- */

.lsew-hc .lsew-hc__content {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	align-items: flex-start;
	padding: 2.25rem 2rem;
	text-align: left;
	pointer-events: none;
	--lsew-hc-jc: flex-start;
	--lsew-hc-ai: flex-start;
	--lsew-hc-ta-h: left;
	--lsew-hc-to: left center;
}

/* La etiqueta y el título no se justifican (quedarían con huecos) */
.lsew-hc .lsew-hc__eyebrow,
.lsew-hc .lsew-hc__title-wrap {
	text-align: var(--lsew-hc-ta-h, left);
}

.lsew-hc .lsew-hc__inner {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
	justify-content: var(--lsew-hc-v, flex-end);
	width: var(--lsew-hc-cw, 100%);
	max-width: 100%;
}

.lsew-hc .lsew-hc__content a,
.lsew-hc .lsew-hc__content button {
	pointer-events: auto;
}

/* Capas que se mueven con el ratón: cada una con su profundidad */
.lsew-hc .lsew-hc__layer {
	display: flex;
	flex-direction: column;
	align-items: var(--lsew-hc-ai, flex-start);
	transform: translate3d(
		calc(var(--lsew-hc-mx, 0) * var(--lsew-hc-depth, 0px)),
		calc(var(--lsew-hc-my, 0) * var(--lsew-hc-depth, 0px)),
		0
	);
}

/* Efecto de cada texto al activar la tarjeta */
.lsew-hc .lsew-hc__fx {
	display: block;
	opacity: var(--lsew-hc-o0, 1);
	transform-origin: var(--lsew-hc-to, left center);
	transition:
		transform var(--lsew-hc-dur) var(--lsew-hc-ease),
		opacity var(--lsew-hc-dur) var(--lsew-hc-ease);
}

:is(.lsew-hc:hover, .lsew-hc:has(:focus-visible), .lsew-hc.is-hover, .elementor-editor-active .lsew-hc-preview-yes .lsew-hc) .lsew-hc__fx {
	opacity: 1;
	transform:
		translate3d(var(--lsew-hc-hx, 0px), var(--lsew-hc-hy, 0px), 0)
		scale(var(--lsew-hc-hs, 1))
		rotate(var(--lsew-hc-hr, 0deg));
	transition-delay: var(--lsew-hc-delay, 0ms);
}

/* ---------- Textos ---------- */

.lsew-hc .lsew-hc__eyebrow {
	margin: 0;
	color: var(--lsew-hc-eyebrow-c, inherit);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition-property: transform, opacity, color;
}

.lsew-hc .lsew-hc__layer--eyebrow {
	margin-bottom: 1.25rem;
}

/* Tipografía con especificidad 0: si el título es H2–H6 manda la del kit */
:where(.lsew-hc .lsew-hc__title) {
	font-size: clamp(1.375rem, 1rem + 1.1vw, 2.125rem);
	font-weight: 600;
	line-height: 1.18;
}

.lsew-hc .lsew-hc__title {
	margin: 0;
	padding: 0;
	color: var(--lsew-hc-title-c, var(--lsew-hc-text));
	text-wrap: balance;
	transition: color var(--lsew-hc-dur) var(--lsew-hc-ease);
}

.lsew-hc .lsew-hc__title a,
.lsew-hc .lsew-hc__title a:hover,
.lsew-hc .lsew-hc__title a:focus,
.lsew-hc .lsew-hc__title a:visited {
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-decoration: none;
	box-shadow: none;
	outline: none;
}

.lsew-hc .lsew-hc__title a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.lsew-hc .lsew-hc__layer--desc {
	margin-top: 1rem;
}

:where(.lsew-hc .lsew-hc__desc) {
	line-height: 1.5;
}

.lsew-hc .lsew-hc__desc {
	color: var(--lsew-hc-desc-c, inherit);
	transition-property: transform, opacity, color;
}

.lsew-hc .lsew-hc__desc p {
	margin: 0 0 0.6em;
	color: inherit;
}

.lsew-hc .lsew-hc__desc > :last-child {
	margin-bottom: 0;
}

:is(.lsew-hc:hover, .lsew-hc:has(:focus-visible), .lsew-hc.is-hover, .elementor-editor-active .lsew-hc-preview-yes .lsew-hc) .lsew-hc__eyebrow {
	color: var(--lsew-hc-eyebrow-ch, var(--lsew-hc-eyebrow-c, inherit));
}

:is(.lsew-hc:hover, .lsew-hc:has(:focus-visible), .lsew-hc.is-hover, .elementor-editor-active .lsew-hc-preview-yes .lsew-hc) .lsew-hc__title {
	color: var(--lsew-hc-title-ch, var(--lsew-hc-title-c, var(--lsew-hc-text)));
}

:is(.lsew-hc:hover, .lsew-hc:has(:focus-visible), .lsew-hc.is-hover, .elementor-editor-active .lsew-hc-preview-yes .lsew-hc) .lsew-hc__desc {
	color: var(--lsew-hc-desc-ch, var(--lsew-hc-desc-c, inherit));
}

/* Icono o imagen junto al título */
.lsew-hc .lsew-hc__title-row {
	display: flex;
	align-items: var(--lsew-hc-tm-align, center);
	justify-content: var(--lsew-hc-jc, flex-start);
	gap: var(--lsew-hc-tm-gap, 0.5em);
}

.lsew-hc .lsew-hc__title-row > .lsew-hc__title {
	flex: 0 1 auto;
	min-width: 0;
}

.lsew-hc .lsew-hc__title-row--right > .lsew-hc__title-media {
	order: 2;
}

.lsew-hc .lsew-hc__title-media {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.lsew-hc .lsew-hc__title-media--icon {
	color: var(--lsew-hc-tm-color, var(--lsew-hc-title-c, var(--lsew-hc-text)));
	font-size: var(--lsew-hc-tm-size, 1.6em);
}

.lsew-hc .lsew-hc__title-media--icon i {
	font-size: inherit;
	line-height: 1;
}

.lsew-hc .lsew-hc__title-media--icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.lsew-hc .lsew-hc__title-media--image img {
	display: block;
	width: var(--lsew-hc-tm-size, 2.5em);
	max-width: none;
	height: auto;
	border-radius: var(--lsew-hc-tm-radius, 0px);
}

/* ---------- Botón ---------- */

.lsew-hc .lsew-hc__footer {
	display: grid;
	grid-template-rows: 1fr;
}

.lsew-hc .lsew-hc__footer-in {
	min-height: 0;
}

.lsew-hc .lsew-hc__layer--button {
	padding-top: var(--lsew-hc-btn-gap, 1.5rem);
}

.lsew-hc .lsew-hc__btn-wrap {
	display: flex;
	justify-content: var(--lsew-hc-jc, flex-start);
}

/* Aparece al activar la tarjeta */
.lsew-hc-btn-hover .lsew-hc {
	--lsew-hc-btn-from: translate3d(0, var(--lsew-hc-btn-dist, 24px), 0);
}

.lsew-hc-btn-hover.lsew-hc-btnfx-fade .lsew-hc { --lsew-hc-btn-from: none; }
.lsew-hc-btn-hover.lsew-hc-btnfx-down .lsew-hc { --lsew-hc-btn-from: translate3d(0, calc(var(--lsew-hc-btn-dist, 24px) * -1), 0); }
.lsew-hc-btn-hover.lsew-hc-btnfx-left .lsew-hc { --lsew-hc-btn-from: translate3d(var(--lsew-hc-btn-dist, 24px), 0, 0); }
.lsew-hc-btn-hover.lsew-hc-btnfx-right .lsew-hc { --lsew-hc-btn-from: translate3d(calc(var(--lsew-hc-btn-dist, 24px) * -1), 0, 0); }
.lsew-hc-btn-hover.lsew-hc-btnfx-zoom-in .lsew-hc { --lsew-hc-btn-from: scale(0.6); }
.lsew-hc-btn-hover.lsew-hc-btnfx-zoom-out .lsew-hc { --lsew-hc-btn-from: scale(1.35); }
.lsew-hc-btn-hover.lsew-hc-btnfx-flip .lsew-hc { --lsew-hc-btn-from: perspective(600px) rotateX(90deg); }

.lsew-hc-btn-hover .lsew-hc .lsew-hc__btn-wrap {
	opacity: 0;
	transform: var(--lsew-hc-btn-from);
	transform-origin: var(--lsew-hc-to, left center);
	transition:
		opacity var(--lsew-hc-dur) var(--lsew-hc-ease),
		transform var(--lsew-hc-dur) var(--lsew-hc-ease);
}

.lsew-hc-btn-hover.lsew-hc-btnfx-flip .lsew-hc .lsew-hc__btn-wrap {
	transform-origin: center bottom;
}

.lsew-hc-btn-hover .lsew-hc .lsew-hc__btn-wrap a {
	pointer-events: none;
}

.lsew-hc-btn-hover :is(.lsew-hc:hover, .lsew-hc:has(:focus-visible), .lsew-hc.is-hover, .elementor-editor-active .lsew-hc-preview-yes .lsew-hc) .lsew-hc__btn-wrap {
	opacity: 1;
	transform: none;
	transition-delay: var(--lsew-hc-btn-delay, 80ms);
}

.lsew-hc-btn-hover :is(.lsew-hc:hover, .lsew-hc:has(:focus-visible), .lsew-hc.is-hover, .elementor-editor-active .lsew-hc-preview-yes .lsew-hc) .lsew-hc__btn-wrap a {
	pointer-events: auto;
}

/* Sin hueco en reposo: la fila del botón crece y los textos se apartan */
.lsew-hc-btn-hover.lsew-hc-btnspace-collapse .lsew-hc .lsew-hc__footer {
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--lsew-hc-dur) var(--lsew-hc-ease);
}

.lsew-hc-btn-hover.lsew-hc-btnspace-collapse .lsew-hc .lsew-hc__footer-in {
	overflow: hidden;
	/* margen para que no se recorte el foco ni la sombra del botón */
	margin: 0 -8px -8px;
}

.lsew-hc-btn-hover.lsew-hc-btnspace-collapse .lsew-hc .lsew-hc__layer--button {
	padding-right: 8px;
	padding-bottom: 8px;
	padding-left: 8px;
}

.lsew-hc-btn-hover.lsew-hc-btnspace-collapse :is(.lsew-hc:hover, .lsew-hc:has(:focus-visible), .lsew-hc.is-hover, .elementor-editor-active .lsew-hc-preview-yes .lsew-hc) .lsew-hc__footer {
	grid-template-rows: 1fr;
}

/* En táctiles (salvo "activar al verse") y con teclado el botón se ve siempre */
@media (hover: none) {
	.lsew-hc-btn-hover:not(.lsew-hc-touch-inview) .lsew-hc .lsew-hc__btn-wrap {
		opacity: 1;
		transform: none;
	}

	.lsew-hc-btn-hover:not(.lsew-hc-touch-inview) .lsew-hc .lsew-hc__btn-wrap a {
		pointer-events: auto;
	}

	.lsew-hc-btn-hover.lsew-hc-btnspace-collapse:not(.lsew-hc-touch-inview) .lsew-hc .lsew-hc__footer {
		grid-template-rows: 1fr;
	}

	/* Los textos ocultos en reposo se muestran: en táctil no hay "pasar el cursor" */
	.elementor-widget-ls-hover-card:not(.lsew-hc-touch-inview) .lsew-hc .lsew-hc__fx {
		opacity: 1;
	}
}

.lsew-hc .lsew-hc__button {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	text-decoration: none;
}

:where(.lsew-hc .lsew-hc__button.elementor-button) {
	padding: 12px 24px;
	font-size: 15px;
	line-height: 1;
	transition: all 0.3s;
}

.lsew-hc a.lsew-hc__button:not(.elementor-button),
.lsew-hc span.lsew-hc__button:not(.elementor-button) {
	padding: 0.8em 1.4em;
	color: var(--lsew-hc-btn-color, #14101c);
	background-color: var(--lsew-hc-btn-bg, #ffffff);
	border: var(--lsew-hc-btn-border-width, 1px) solid var(--lsew-hc-btn-border, var(--lsew-hc-btn-bg, #ffffff));
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition:
		color 200ms ease,
		background-color 200ms ease,
		border-color 200ms ease;
}

.lsew-hc a.lsew-hc__button:not(.elementor-button):hover,
.lsew-hc a.lsew-hc__button:not(.elementor-button):focus-visible {
	color: var(--lsew-hc-btn-color-h, #ffffff);
	background-color: var(--lsew-hc-btn-bg-h, transparent);
	border-color: var(--lsew-hc-btn-border-h, #ffffff);
	text-decoration: none;
}

.lsew-hc a.lsew-hc__button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.lsew-hc .lsew-hc__button-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--lsew-hc-btn-icon-size, 1em);
	line-height: 0;
}

.lsew-hc .lsew-hc__button-icon i {
	font-size: inherit;
	line-height: 1;
}

.lsew-hc .lsew-hc__button-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.lsew-hc .lsew-hc__button-icon svg.lsew-icon-arrow {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: square;
	stroke-linejoin: miter;
}

.lsew-hc a.lsew-hc__button.lsew-hc__button--icon,
.lsew-hc span.lsew-hc__button.lsew-hc__button--icon {
	justify-content: center;
	width: var(--lsew-hc-btn-square, 3rem);
	height: var(--lsew-hc-btn-square, 3rem);
	padding: 0;
	gap: 0;
	font-size: 1.25rem;
}

/* ---------- Utilidades ---------- */

.lsew-hc .lsew-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
	.lsew-hc,
	.lsew-hc .lsew-hc__bg,
	.lsew-hc .lsew-hc__fx,
	.lsew-hc .lsew-hc__btn-wrap,
	.lsew-hc .lsew-hc__footer {
		transition-duration: 1ms !important;
		transition-delay: 0s !important;
	}

	.lsew-hc .lsew-hc__kb {
		animation: none !important;
	}

	.lsew-hc,
	.lsew-hc .lsew-hc__media,
	.lsew-hc .lsew-hc__layer,
	.lsew-hc .lsew-hc__bg,
	.lsew-hc .lsew-hc__fx,
	.lsew-hc .lsew-hc__btn-wrap {
		transform: none !important;
		translate: none !important;
	}
}
