/**
 * [gd_flotantes] - Tarjetas de vidrio que flotan.
 *
 * Paleta y medidas tomadas del diseño (cardflotantes.png): tarjeta de
 * 224x178 con radio 12, separacion 16 y un zigzag de 60px entre pares e
 * impares.
 *
 * Dos transforms apilados en elementos distintos para que no compitan: el
 * escalon del zigzag vive en .gd-fl__item y el vaiven en .gd-fl__tarjeta.
 */

.gd-fl {
	/* Vidrio, medido pixel a pixel sobre el PNG del diseño. */
	--gd-fl-tarjeta: rgba(255, 255, 255, 0.3);
	--gd-fl-borde: rgba(128, 166, 255, 0.65);
	--gd-fl-desenfoque: blur(14px) saturate(150%);
	--gd-fl-brillo: rgba(255, 255, 255, 0.55);

	--gd-fl-icono-fondo: rgba(190, 195, 201, 0.37);
	--gd-fl-icono: #2d3d5d;
	--gd-fl-titulo: #0072bc;
	--gd-fl-texto: #2e3d4d;

	--gd-fl-radio: 12px;
	--gd-fl-hueco: 16px;
	--gd-fl-alto-min: 178px;
	--gd-fl-relleno: 24px;
	--gd-fl-icono-tamano: 40px;

	/* Los sobreescribe el shortcode con un style inline. */
	--gd-fl-columnas: 4;
	--gd-fl-escalon: 60px;
	--gd-fl-amplitud: 10px;
	--gd-fl-duracion: 6s;

	/*
	 * El vaiven se enciende y se apaga cambiando --gd-fl-animacion, no
	 * repitiendo la declaracion: apagarlo en un breakpoint es una linea, y
	 * volver a encenderlo tambien.
	 */
	--gd-fl-vaiven: gd-fl-flotar var(--gd-fl-duracion) ease-in-out infinite alternate;
	--gd-fl-animacion: var(--gd-fl-vaiven);

	--gd-fl-fuente-titulo: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;
	--gd-fl-fuente-texto: "Inter", system-ui, -apple-system, sans-serif;

	box-sizing: border-box;
	width: 100%;
}

/*
 * La grilla va en un hijo, no en .gd-fl. Un @container no puede aplicar
 * estilos al propio elemento que declara container-type, asi que si las
 * columnas vivieran en .gd-fl las consultas de abajo no podrian apilarlas.
 */
.gd-fl__grilla {
	display: grid;
	grid-template-columns: repeat(var(--gd-fl-columnas), minmax(0, 1fr));
	gap: var(--gd-fl-hueco);
	width: 100%;
	/*
	 * El aire que necesitan el escalon y el vaiven. Sin esto la tarjeta mas
	 * baja se corta cuando la seccion de Elementor recorta el desbordamiento.
	 */
	padding-top: var(--gd-fl-amplitud);
	padding-bottom: calc(var(--gd-fl-escalon) + var(--gd-fl-amplitud));
}

@supports (container-type: inline-size) {
	.gd-fl {
		container-type: inline-size;
		container-name: gdfl;
	}
}

.gd-fl *,
.gd-fl *::before,
.gd-fl *::after {
	box-sizing: border-box;
}

.gd-fl.gd-fl--oscuro {
	--gd-fl-tarjeta: rgba(255, 255, 255, 0.08);
	--gd-fl-borde: rgba(128, 166, 255, 0.4);
	--gd-fl-brillo: rgba(178, 234, 255, 0.3);
	--gd-fl-icono-fondo: rgba(255, 255, 255, 0.12);
	--gd-fl-icono: #dbe6ff;
	--gd-fl-titulo: #56c2f0;
	--gd-fl-texto: rgba(255, 255, 255, 0.78);
}


/* --- Escalon del zigzag ---------------------------------------------------
 * Las impares bajan, las pares se quedan arriba. Con escalon="0" quedan
 * todas alineadas sin tocar nada mas.
 * ---------------------------------------------------------------------- */

.gd-fl__item {
	display: flex;
	min-width: 0;
	transform: translateY(var(--gd-fl-y, 0px));
}

.gd-fl__item:nth-child(odd) {
	--gd-fl-y: var(--gd-fl-escalon);
}


/* --- Tarjeta -------------------------------------------------------------
 * Reset explicito: article y a los estilan los kits de Elementor.
 * ---------------------------------------------------------------------- */

.gd-fl .gd-fl__tarjeta {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: var(--gd-fl-alto-min);
	margin: 0;
	padding: var(--gd-fl-relleno);
	border: 1px solid var(--gd-fl-borde);
	border-radius: var(--gd-fl-radio);
	background-color: var(--gd-fl-tarjeta);
	background-image: linear-gradient(
		158deg,
		rgba(255, 255, 255, 0.2),
		rgba(255, 255, 255, 0) 60%
	);
	-webkit-backdrop-filter: var(--gd-fl-desenfoque);
	backdrop-filter: var(--gd-fl-desenfoque);
	box-shadow: inset 0 1px 0 var(--gd-fl-brillo);
	text-decoration: none;
	animation: var(--gd-fl-animacion);
	/*
	 * Desfase por posicion: cada tarjeta arranca un poco mas adelante en el
	 * ciclo, asi el conjunto ondula en vez de subir y bajar en bloque.
	 */
	animation-delay: calc(var(--gd-fl-duracion) * -0.28 * var(--gd-fl-i, 0));
	transition: border-color 0.3s ease, background-color 0.3s ease,
		box-shadow 0.3s ease;
}

@keyframes gd-fl-flotar {
	from {
		transform: translateY(calc(var(--gd-fl-amplitud) * -1));
	}
	to {
		transform: translateY(var(--gd-fl-amplitud));
	}
}

/* Con flotar="no" o amplitud="0" se queda quieta. */
.gd-fl.gd-fl--quieto {
	--gd-fl-animacion: none;
}

.gd-fl.gd-fl--quieto .gd-fl__tarjeta {
	transform: none;
}

/*
 * Solo las tarjetas que son enlace reaccionan al cursor; las informativas
 * no fingen ser clicables.
 */
.gd-fl a.gd-fl__tarjeta {
	cursor: pointer;
}

.gd-fl a.gd-fl__tarjeta:hover,
.gd-fl a.gd-fl__tarjeta:focus-visible {
	border-color: rgba(0, 114, 188, 0.75);
	background-color: rgba(255, 255, 255, 0.45);
	box-shadow: 0 18px 40px -22px rgba(14, 51, 124, 0.45),
		inset 0 1px 0 var(--gd-fl-brillo);
	/* El vaiven se congela mientras se lee la tarjeta. */
	animation-play-state: paused;
}

.gd-fl.gd-fl--oscuro a.gd-fl__tarjeta:hover,
.gd-fl.gd-fl--oscuro a.gd-fl__tarjeta:focus-visible {
	background-color: rgba(255, 255, 255, 0.14);
	box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.6),
		inset 0 1px 0 var(--gd-fl-brillo);
}

.gd-fl a.gd-fl__tarjeta:focus-visible {
	outline: 2px solid var(--gd-fl-titulo);
	outline-offset: 3px;
}


/* --- Contenido ----------------------------------------------------------- */

.gd-fl .gd-fl__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--gd-fl-icono-tamano);
	height: var(--gd-fl-icono-tamano);
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--gd-fl-icono-fondo);
	color: var(--gd-fl-icono);
}

.gd-fl .gd-fl__icono svg,
.gd-fl .gd-fl__icono img {
	display: block;
	width: 50%;
	height: 50%;
}

.gd-fl .gd-fl__titulo {
	margin: 20px 0 0;
	color: var(--gd-fl-titulo);
	font-family: var(--gd-fl-fuente-titulo);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
}

.gd-fl .gd-fl__texto {
	margin: 8px 0 0;
	color: var(--gd-fl-texto);
	font-family: var(--gd-fl-fuente-texto);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
}


/* --- Estrecho ------------------------------------------------------------
 * Se mide el CONTENEDOR; la @media es el fallback para navegadores sin
 * container queries.
 *
 * Dos columnas conservan el zigzag y el vaiven. En una sola columna se
 * apagan los dos: apiladas, el escalon solo abre un hueco raro y el vaiven
 * hace bailar la pagina mientras se hace scroll.
 * ---------------------------------------------------------------------- */

@media (max-width: 900px) {
	.gd-fl__grilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.gd-fl__grilla {
		--gd-fl-animacion: none;

		grid-template-columns: minmax(0, 1fr);
		padding-top: 0;
		padding-bottom: 0;
	}

	.gd-fl__item:nth-child(odd) {
		--gd-fl-y: 0px;
	}

	.gd-fl .gd-fl__tarjeta {
		min-height: 0;
		transform: none;
	}
}

@supports (container-type: inline-size) {
	/* Manda el ancho del contenedor: se anulan las @media de arriba. */
	@media (max-width: 900px) {
		.gd-fl__grilla {
			grid-template-columns: repeat(var(--gd-fl-columnas), minmax(0, 1fr));
		}
	}

	@media (max-width: 620px) {
		.gd-fl__grilla {
			--gd-fl-animacion: var(--gd-fl-vaiven);

			grid-template-columns: repeat(var(--gd-fl-columnas), minmax(0, 1fr));
			padding-top: var(--gd-fl-amplitud);
			padding-bottom: calc(var(--gd-fl-escalon) + var(--gd-fl-amplitud));
		}

		.gd-fl__item:nth-child(odd) {
			--gd-fl-y: var(--gd-fl-escalon);
		}

		.gd-fl .gd-fl__tarjeta {
			min-height: var(--gd-fl-alto-min);
		}
	}

	@container gdfl (max-width: 900px) {
		.gd-fl__grilla {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@container gdfl (max-width: 620px) {
		.gd-fl__grilla {
			--gd-fl-animacion: none;

			grid-template-columns: minmax(0, 1fr);
			padding-top: 0;
			padding-bottom: 0;
		}

		.gd-fl__item:nth-child(odd) {
			--gd-fl-y: 0px;
		}

		.gd-fl .gd-fl__tarjeta {
			/*
			 * Apiladas ya no hay que igualar alturas entre vecinas, asi que
			 * cada tarjeta ocupa solo lo que pide su texto.
			 */
			min-height: 0;
			transform: none;
		}
	}
}


/* --- Preferencias de movimiento ------------------------------------------
 * Se quita el vaiven, no el escalon: la composicion del diseño se mantiene.
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.gd-fl .gd-fl__tarjeta {
		animation: none;
		transform: none;
		transition: none;
	}
}