/* =====================================================================
   ilia-tarjetas  (prefijo .ilct)
   Escritorio 3 col · Tablet 3 col compactas · Móvil 1 col
   ===================================================================== */
.ilct {
	--ilct-cols: 3;
	--ilct-gap: 24px;
	--ilct-h: 320px;
	--ilct-pad: 32px;
	--ilct-radius: 14px;
	--ilct-bw: 1px;
	--ilct-tl: 2;
	--ilct-dur: .45s;

	--ilct-bg: rgba(255, 255, 255, 0);
	--ilct-border: #470f67;
	--ilct-title: #470f67;
	--ilct-text: #470f67;
	--ilct-rule: #470f67;

	--ilct-bg-h: #f9ecea;
	--ilct-border-h: #f9ecea;
	--ilct-title-h: #470f67;
	--ilct-text-h: #470f67;
	--ilct-rule-h: #470f67;

	display: grid;
	grid-template-columns: repeat(var(--ilct-cols), minmax(0, 1fr));
	gap: var(--ilct-gap);
	align-items: stretch;
	width: 100%;
	box-sizing: border-box;
}
.ilct *, .ilct *::before, .ilct *::after { box-sizing: border-box; }

.ilct .ilct__card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: var(--ilct-pad);
	background: var(--ilct-bg);
	border: var(--ilct-bw) solid var(--ilct-border);
	border-radius: var(--ilct-radius);
	color: var(--ilct-text);
	text-decoration: none;
	cursor: default;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	transition: border-color var(--ilct-dur) ease, transform var(--ilct-dur) ease, box-shadow var(--ilct-dur) ease;
	-webkit-tap-highlight-color: transparent;
}
.ilct a.ilct__card { cursor: pointer; }
/* especificidad baja: el alto propio de cada bloque (Elementor) siempre gana */
:where(.ilct) .ilct__card { min-height: var(--ilct-h); }

.ilct .ilct__title {
	margin: 0;
	padding: 0;
	color: var(--ilct-title);
	font-size: clamp(1.4rem, 1.9vw, 2.1rem);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -.005em;
	min-height: calc(var(--ilct-tl) * 1.12em);
	transition: color var(--ilct-dur) ease;
	overflow-wrap: break-word;
}

.ilct .ilct__rule {
	display: block;
	flex: none;
	width: 100%;
	height: 1px;
	margin: clamp(18px, 2vw, 28px) 0;
	background: var(--ilct-rule);
	transition: background-color var(--ilct-dur) ease;
}

.ilct .ilct__text {
	margin: 0;
	padding: 0;
	color: var(--ilct-text);
	font-size: clamp(.95rem, 1.05vw, 1.15rem);
	font-weight: 400;
	line-height: 1.4;
	transition: color var(--ilct-dur) ease;
}

/* ----- Capa de relleno (hover) ----- */
.ilct .ilct__card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--ilct-bg-h);
	pointer-events: none;
	transition: opacity var(--ilct-dur) ease, transform var(--ilct-dur) cubic-bezier(.2, .7, .2, 1), clip-path var(--ilct-dur) cubic-bezier(.2, .7, .2, 1);
}
/* 1 · fundido */
.ilct--h-fade .ilct__card::before { opacity: 0; }
/* 2 · desde abajo */
.ilct--h-rise .ilct__card::before { transform: translateY(101%); }
/* 3 · desde la izquierda */
.ilct--h-wipe .ilct__card::before { transform: translateX(-101%); }
/* 4 · círculo desde el centro */
.ilct--h-circle .ilct__card::before { clip-path: circle(0% at 50% 50%); }
/* 5 · elevación + fundido */
.ilct--h-lift .ilct__card::before { opacity: 0; }

.ilct .ilct__card:hover::before,
.ilct .ilct__card:focus-visible::before,
.ilct .ilct__card.is-active::before { opacity: 1; transform: none; clip-path: circle(150% at 50% 50%); }
.ilct--h-lift .ilct__card:hover,
.ilct--h-lift .ilct__card:focus-visible { transform: translateY(-8px); box-shadow: 0 16px 32px -14px rgba(71, 15, 103, .35); }

/* ----- Colores en hover ----- */
.ilct .ilct__card:hover,
.ilct .ilct__card:focus-visible,
.ilct .ilct__card.is-active { border-color: var(--ilct-border-h); }
.ilct .ilct__card:hover .ilct__title,
.ilct .ilct__card:focus-visible .ilct__title,
.ilct .ilct__card.is-active .ilct__title { color: var(--ilct-title-h); }
.ilct .ilct__card:hover .ilct__text,
.ilct .ilct__card:focus-visible .ilct__text,
.ilct .ilct__card.is-active .ilct__text { color: var(--ilct-text-h); }
.ilct .ilct__card:hover .ilct__rule,
.ilct .ilct__card:focus-visible .ilct__rule,
.ilct .ilct__card.is-active .ilct__rule { background: var(--ilct-rule-h); }

.ilct a.ilct__card:focus-visible {
	outline: 2px solid var(--ilct-title);
	outline-offset: 3px;
}
.ilct a.ilct__card:active { transform: scale(.992); }

/* ----- Entrada ----- */
html:not(.elementor-editor-active) .ilct--anim .ilct__card {
	animation: ilct-in .8s cubic-bezier(.2, .7, .2, 1) both;
	animation-delay: calc(var(--ilct-i, 0) * .12s);
}
@keyframes ilct-in {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: none; }
}

/* ----- Tablet ----- */
@media (max-width: 1024px) {
	.ilct { --ilct-gap: 16px; --ilct-pad: 24px; --ilct-h: 300px; --ilct-tl: 3; }
	.ilct .ilct__title { font-size: clamp(1.15rem, 2.4vw, 1.6rem); }
	.ilct .ilct__text  { font-size: clamp(.85rem, 1.5vw, 1rem); }
}

/* ----- Móvil ----- */
@media (max-width: 767px) {
	.ilct { --ilct-cols: 1; --ilct-gap: 16px; --ilct-pad: 22px; --ilct-h: 0px; --ilct-tl: 1; }
	.ilct .ilct__title { font-size: clamp(1.35rem, 6vw, 1.8rem); }
	.ilct .ilct__text  { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.ilct .ilct__card, .ilct .ilct__card::before, .ilct .ilct__title, .ilct .ilct__text, .ilct .ilct__rule { transition: none; }
	.ilct--h-lift .ilct__card:hover { transform: none; }
	.ilct--anim .ilct__card { animation: none !important; }
}
