/*
 * Acordeón de imágenes: franjas con foto que se abren al pasar el ratón.
 *
 * Réplica del widget "Image Accordion" de Unlimited Elements tal como estaba
 * configurado y retocado en la web (ajustes del widget, sus estilos propios y el
 * CSS adicional del personalizador). Cada regla dice de qué pieza del original sale.
 */

.cea,
.cea * {
	box-sizing: border-box;
}

/* ------------------------------------------------------------- la tira */

.cea .cea-franjas {
	display: flex;
	flex-wrap: wrap;       /* como el original (en la práctica nunca salta de línea) */
	gap: 4px;              /* ajuste "gap" */
	height: 600px;         /* ajuste "height": el original lo pone en la tira y en cada franja */
	transform: rotate(0deg);   /* como el original: no gira nada, pero crea su propia capa */
}

/* ------------------------------------------------------------ cada franja */

.cea .cea-franja {
	position: relative;
	display: block;
	flex: 1 1 0%;
	height: 600px;
	overflow: hidden;
	text-align: left;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	border-radius: 0;
	opacity: 0;                       /* invisible hasta la animación de entrada */
	transform: skew(0deg);            /* como el original */
	transition: all 400ms ease;       /* "transition: 400ms" del original */
}

.cea .cea-franja.cea-abierta {
	flex: var(--cea-crece, 4) 1 0%;   /* ajuste "size_of_open_item" */
}

/* Animación de entrada: cada franja aparece desenfocada y se aclara */
.cea .cea-franja.cea-entra {
	opacity: 1;
	animation: cea-entrada .6s cubic-bezier(.47, 0, .745, .715) both;
}

@keyframes cea-entrada {
	0% {
		filter: blur(10px);
		opacity: 0;
	}
	100% {
		filter: blur(0);
		opacity: 1;
	}
}

/* ------------------------------------------- capa de encima (degradado) */

.cea .cea-velo {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	padding: 32px;                    /* ajuste "overlay_padding" */
	background-color: transparent;
	background-image: linear-gradient(180deg,
		var(--cea-degradado-inicio, #0F214500) 21.99%,
		var(--cea-degradado-fin, #0F2145E6) 107.92%);
	transition: all 400ms ease;
}

.cea .cea-interior {
	z-index: 1;
	width: 100%;
	height: 100%;
	/*
	 * No gira nada, pero NO es decorativo: convierte esta capa en la referencia de la
	 * frase de abajo, que así mide lo mismo que la capa (sin el margen de la derecha).
	 * Sin esto la frase sale 32 px más ancha y puede partirse en líneas distintas.
	 */
	transform: skew(0deg) rotate(0deg);
}

/* ---------------------------------------------------------------- título */

.cea .cea-titulo-caja {
	height: 100%;
	margin-top: 0;
	opacity: 1;
	visibility: visible;
	transform: translate3d(0, 0, 0);
	transition: all 400ms ease;
}

.cea .cea-franja.cea-abierta .cea-titulo-caja {
	transform: translate3d(0, -50px, 0);
}

/* Título en vertical, girado: se lee de abajo arriba y queda abajo a la izquierda */
.cea .cea-titulo {
	height: 100%;
	margin: 0;
	padding: 0;
	writing-mode: vertical-lr;
	transform: scale(-1);
	color: #FFFFFF;
}

/* ------------------------------------------------- frase de descripción */

.cea .cea-contenido {
	position: absolute;
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, 60px, 0);
	/* sin transición al cerrar: el original la hace desaparecer de golpe */
}

.cea .cea-franja.cea-abierta .cea-contenido {
	opacity: 1;
	visibility: visible;
	transform: translate3d(0, -50px, 0);
	transition: all 400ms ease 400ms;   /* entra cuando la franja ya se ha abierto */
}

.cea .cea-texto {
	display: block;
	margin-top: 16px;      /* ajuste "subtitle_spacing" */
	padding-left: 10px;
	opacity: 0;
	color: #FFFFFF;
}

.cea .cea-franja.cea-abierta .cea-texto {
	padding-left: 0;
	opacity: 1;
}

/* ----------------------------------------------------------------- móvil */

@media only screen and (max-width: 767px) {
	.cea .cea-franjas {
		flex-direction: column;
		flex-wrap: nowrap;   /* el original, en móvil, la deja sin salto */
	}

	.cea .cea-interior,
	.cea .cea-titulo-caja,
	.cea .cea-titulo {
		height: auto;
	}

	.cea .cea-titulo {
		writing-mode: horizontal-tb;
		transform: none;
		padding-bottom: 20px;
	}

	.cea .cea-franja.cea-abierta .cea-titulo {
		padding-bottom: 0;
	}

	.cea .cea-franja.cea-abierta .cea-titulo-caja,
	.cea .cea-franja.cea-abierta .cea-contenido {
		transform: translate3d(0, -90px, 0);
	}

	.cea .cea-franja:first-child {
		border-radius: var(--cea-esquina, 20px) var(--cea-esquina, 20px) 0 0;
	}

	.cea .cea-franja:last-child {
		border-radius: 0 0 var(--cea-esquina, 20px) var(--cea-esquina, 20px);
	}
}

/* En el editor de Elementor se ve todo desde el principio, sin esperar a la entrada */
body.elementor-editor-active .cea .cea-franja {
	opacity: 1;
}