/**
 * Enfoque Hover Card Accordion — estilos.
 *
 * Variables CSS (--ei-hca-*) escritas por los controles de Elementor
 * (globales, en {{WRAPPER}} .ei-hover-card-accordion) y por PHP inline
 * por tarjeta (--ei-hca-item-*, con fallback a la variable global
 * correspondiente). Apertura via transicion de `height` controlada por
 * clase `.is-active` (JS), sin requestAnimationFrame. Todo el CSS esta
 * encapsulado bajo `.ei-hover-card-accordion`: no se usan selectores
 * globales (h1, p, div, section, body, *) fuera de este scope.
 */

.ei-hover-card-accordion {
	position: relative;
	width: var( --ei-hca-set-width, 100% );
	max-width: 100%;
	box-sizing: border-box;
}

.ei-hover-card-accordion * {
	box-sizing: border-box;
}

.ei-hover-card-accordion__list {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.ei-hover-card-accordion--orientation-row_vertical .ei-hover-card-accordion__list {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
}

/* ===== TARJETA ===== */
.ei-hover-card-accordion__item {
	position: relative;
	z-index: var( --ei-hca-item-zindex, var( --ei-hca-zindex-base, 1 ) );
	width: 100%;
	height: var( --ei-hca-closed-height, 150px );
	margin-top: var( --ei-hca-overlap-closed, 0px );
	background: var( --ei-hca-item-bg, var( --ei-hca-card-bg, #F5F3EE ) );
	border: var( --ei-hca-item-border, 0 solid transparent );
	border-radius: var( --ei-hca-item-radius, 24px );
	overflow: hidden;
	transition:
		height var( --ei-hca-duration, 600ms ) var( --ei-hca-easing, ease-in-out ),
		margin-top var( --ei-hca-duration, 600ms ) var( --ei-hca-easing, ease-in-out ),
		margin-bottom var( --ei-hca-duration, 600ms ) var( --ei-hca-easing, ease-in-out ),
		background-color var( --ei-hca-duration, 600ms ) var( --ei-hca-easing, ease-in-out ),
		box-shadow var( --ei-hca-duration, 600ms ) var( --ei-hca-easing, ease-in-out );
	will-change: height;
}

.ei-hover-card-accordion__item:first-child {
	margin-top: 0;
}

.ei-hover-card-accordion--overlap-off .ei-hover-card-accordion__item {
	margin-top: 0;
}

.ei-hover-card-accordion--between-shadow .ei-hover-card-accordion__item:not( :first-child ) {
	box-shadow: 0 -6px 14px rgba( 0, 0, 0, var( --ei-hca-between-shadow-alpha, 0.18 ) );
}

.ei-hover-card-accordion__item.is-active {
	/* Por defecto (altura automatica) la tarjeta activa NO usa una
	 * altura fija: crece hasta el tamano real de su contenido (ver
	 * .panel/.panel-inner mas abajo, que animan la altura real via
	 * grid-template-rows). El modificador --fixed-open-height (abajo)
	 * restaura la altura fija manual solo si el usuario desactiva
	 * explicitamente 'Altura abierta automatica'. */
	height: auto;
	z-index: var( --ei-hca-item-zindex-active, var( --ei-hca-zindex-active, 20 ) );
	margin-top: var( --ei-hca-open-gap, var( --ei-hca-overlap-closed, 0px ) );
	/* Espacio real reservado en el flujo normal (flex), no solo visual:
	 * empuja de verdad a la tarjeta siguiente hacia abajo. */
	margin-bottom: var( --ei-hca-active-bottom-gap, 24px );
	background: var( --ei-hca-item-bg-active, var( --ei-hca-card-bg-active, var( --ei-hca-item-bg, var( --ei-hca-card-bg, #F5F3EE ) ) ) );
}

/* La tarjeta INMEDIATAMENTE POSTERIOR a la activa nunca debe conservar el
 * solape negativo de estado cerrado: si lo hiciera, se meteria debajo de
 * la tarjeta abierta a pesar de la separacion inferior de arriba. Se
 * anula con el combinador de hermano adyacente (siempre coincide con la
 * tarjeta justo despues de la que tiene `.is-active`, sin necesidad de
 * clases extra en JS). */
.ei-hover-card-accordion__item.is-active + .ei-hover-card-accordion__item {
	margin-top: 0;
}

.ei-hover-card-accordion--fixed-open-height .ei-hover-card-accordion__item.is-active {
	height: var( --ei-hca-open-height, 360px );
}

/* ===== ENCABEZADO / TRIGGER ===== */
.ei-hover-card-accordion__header {
	margin: 0;
	display: block;
}

.ei-hover-card-accordion__trigger {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	width: 100%;
	height: var( --ei-hca-closed-height, 150px );
	max-height: 100%;
	padding: 24px 32px;
	margin-bottom: var( --ei-hca-header-margin-bottom, 8px );
	cursor: pointer;
	color: var( --ei-hca-item-header-color, var( --ei-hca-header-color, #111111 ) );
	transition: color var( --ei-hca-header-color-transition, 200ms ) ease;
}

.ei-hover-card-accordion__item.is-active .ei-hover-card-accordion__trigger {
	color: var(
		--ei-hca-item-header-color-active,
		var( --ei-hca-header-color-active, var( --ei-hca-item-header-color, var( --ei-hca-header-color, #111111 ) ) )
	);
}

.ei-hover-card-accordion__trigger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -6px;
}

.ei-hover-card-accordion__trigger-text {
	display: block;
	width: 100%;
}

/* ===== PANEL / CONTENIDO ===== */
.ei-hover-card-accordion__panel {
	/* Altura animada por JS (medida real via scrollHeight, con doble
	 * requestAnimationFrame para garantizar que el navegador reconozca
	 * el punto de partida antes de animar hacia el destino): a
	 * diferencia de grid-template-rows con fr, un `height` en pixeles
	 * SIEMPRE interpola de forma fiable y reordena a la vez, en el
	 * mismo frame, a las tarjetas siguientes (evita el 'teletransporte'
	 * al no depender de que el padre con height:auto recalculo en
	 * sincronia con una pista de grid). En modo de altura fija
	 * (--fixed-open-height) esta regla queda anulada mas abajo: ahi el
	 * propio .item ya anima entre dos alturas numericas y el panel solo
	 * necesita mostrarse sin recortar nada por si mismo. */
	height: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateY( var( --ei-hca-content-anim-offset-y, 16px ) );
	transition:
		height var( --ei-hca-duration, 600ms ) var( --ei-hca-easing, ease-in-out ),
		opacity var( --ei-hca-content-anim-duration, 350ms ) ease,
		transform var( --ei-hca-content-anim-duration, 350ms ) ease;
	pointer-events: none;
	padding: 0 32px 24px;
}

.ei-hover-card-accordion__item.is-active .ei-hover-card-accordion__panel {
	opacity: 1;
	transform: translateY( 0 );
	pointer-events: auto;
	/* El retardo de entrada (--ei-hca-content-anim-delay) solo se aplica
	 * al ABRIR: asi el texto aparece un instante despues de que la
	 * tarjeta ya ha empezado a crecer, nunca antes. Al cerrar (regla de
	 * arriba, sin delay) el texto se desvanece de inmediato para no
	 * quedar visible mientras la tarjeta ya se esta encogiendo. */
	/* Orden posicional debe coincidir con la lista `transition` de la
	 * regla base (.panel): height, opacity, transform. */
	transition-delay: 0ms, var( --ei-hca-content-anim-delay, 0ms ), var( --ei-hca-content-anim-delay, 0ms );
}

/* Wrapper interno neutro (se mantiene en el marcado por compatibilidad;
 * ya no necesita reglas propias porque la altura se anima directamente
 * en .panel). */
.ei-hover-card-accordion__panel-inner {
	overflow: visible;
}

/* Modo de altura fija (switch 'Altura abierta automatica' desactivado):
 * el panel no se recorta ni anima por si mismo, se apoya en que .item
 * ya transiciona entre dos alturas numericas (cerrada/abierta) con su
 * propio overflow:hidden. */
.ei-hover-card-accordion--fixed-open-height .ei-hover-card-accordion__panel {
	height: auto;
	overflow: visible;
	transition:
		opacity var( --ei-hca-content-anim-duration, 350ms ) ease var( --ei-hca-content-anim-delay, 0ms ),
		transform var( --ei-hca-content-anim-duration, 350ms ) ease var( --ei-hca-content-anim-delay, 0ms );
}

.ei-hover-card-accordion--content-anim-none .ei-hover-card-accordion__panel,
.ei-hover-card-accordion--content-anim-fade .ei-hover-card-accordion__panel {
	transform: none;
}

.ei-hover-card-accordion--content-anim-reveal .ei-hover-card-accordion__panel {
	transform: none;
	max-height: 0;
	overflow: hidden;
	transition:
		opacity var( --ei-hca-content-anim-duration, 350ms ) ease var( --ei-hca-content-anim-delay, 0ms ),
		max-height var( --ei-hca-content-anim-duration, 350ms ) ease var( --ei-hca-content-anim-delay, 0ms );
}

.ei-hover-card-accordion--content-anim-reveal .ei-hover-card-accordion__item.is-active .ei-hover-card-accordion__panel {
	max-height: 1000px;
}

.ei-hover-card-accordion--content-anim-none .ei-hover-card-accordion__panel {
	transition: none;
	opacity: 0;
}

.ei-hover-card-accordion--content-anim-none .ei-hover-card-accordion__item.is-active .ei-hover-card-accordion__panel {
	opacity: 1;
}

.ei-hover-card-accordion__content {
	color: var( --ei-hca-item-content-color, var( --ei-hca-content-color, #222222 ) );
}

.ei-hover-card-accordion__item.is-active .ei-hover-card-accordion__content {
	color: var(
		--ei-hca-item-content-color-active,
		var( --ei-hca-content-color-active, var( --ei-hca-item-content-color, var( --ei-hca-content-color, #222222 ) ) )
	);
}

.ei-hover-card-accordion__content p:last-child {
	margin-bottom: 0;
}

/* ===== POSICION DEL CONTENIDO ===== */
.ei-hover-card-accordion--content-pos-right_of_header .ei-hover-card-accordion__item {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

.ei-hover-card-accordion--content-pos-right_of_header .ei-hover-card-accordion__header,
.ei-hover-card-accordion--content-pos-right_of_header .ei-hover-card-accordion__panel {
	flex: 1 1 50%;
}

.ei-hover-card-accordion--content-pos-centered .ei-hover-card-accordion__panel {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 100%;
}

/* ===== RESPONSIVE: nunca scroll horizontal, nunca hover en movil ===== */
@media ( max-width: 767px ) {
	.ei-hover-card-accordion__list {
		flex-direction: column;
	}
}

/* ===== REDUCED MOTION ===== */
@media ( prefers-reduced-motion: reduce ) {
	.ei-hover-card-accordion__item,
	.ei-hover-card-accordion__trigger,
	.ei-hover-card-accordion__panel {
		transition: none !important;
	}
}

/* ===== MODO EDITOR DE ELEMENTOR: seguridad visual sin depender de JS ===== */
body.elementor-editor-active .ei-hover-card-accordion__item {
	transition:
		height 150ms ease,
		margin-top 150ms ease,
		background-color 150ms ease;
}