/* =============================================================
   CONTACTO FX — Tarjetas de contacto (teléfono · correo ·
   ubicación) sobre fondo CELESTE suave, con ÍCONOS en círculos
   de gradiente y ondas animadas azul · blanco · verde abajo.
   ============================================================= */

.address_fx {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #eaf6fe 0%, #dcecfb 100%);
}

.address_fx > .container {
	position: relative;
	z-index: 2;
}

/* ---- Tarjetas ---- */
.address_fx .addr-card {
	height: 100%;
	background: #ffffff;
	border-radius: 20px;
	padding: 40px 28px;
	box-shadow: 0 16px 38px rgba(12, 28, 48, .08);
	transition: transform .32s cubic-bezier(.22, .61, .36, 1), box-shadow .32s ease;
}

.address_fx .addr-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 26px 52px rgba(12, 28, 48, .15);
}

/* Ícono en círculo con gradiente (varía por tarjeta) */
.address_fx .addr-card__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin-bottom: 20px;
	border-radius: 50%;
	color: #fff;
	font-size: 28px;
	background: linear-gradient(135deg, #2A7FC1, #34d6c8);
	box-shadow: 0 12px 24px rgba(52, 214, 200, .35);
	transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

.address_fx .addr-card__ico i {
	font-size: 28px;
	color: #fff;
	line-height: 1;
}

.address_fx .addr-card:hover .addr-card__ico {
	transform: translateY(-4px) scale(1.06);
}

/* Variación de color por tarjeta: azul → turquesa → verde */
.address_fx .row > div:nth-child(1) .addr-card__ico {
	background: linear-gradient(135deg, #2A7FC1, #34d6c8);
	box-shadow: 0 12px 24px rgba(42, 127, 193, .35);
}

.address_fx .row > div:nth-child(2) .addr-card__ico {
	background: linear-gradient(135deg, #34d6c8, #57AB52);
	box-shadow: 0 12px 24px rgba(52, 214, 200, .35);
}

.address_fx .row > div:nth-child(3) .addr-card__ico {
	background: linear-gradient(135deg, #57AB52, #34d6c8);
	box-shadow: 0 12px 24px rgba(87, 171, 82, .35);
}

.address_fx .addr-card h4 {
	margin: 0 0 8px;
	color: #0e2d4a;
	font-weight: 700;
	font-size: 20px;
}

.address_fx .addr-card p {
	margin: 0;
	color: #51637a;
	font-size: 15px;
	line-height: 1.6;
	word-break: break-word;
}

/* ---- Móvil: que las tarjetas NO salgan pegadas entre sí ni a los bordes ---- */
@media (max-width: 767px) {
	/* Aire a los lados para que no toquen el borde de la pantalla */
	.address_fx > .container {
		padding-left: 20px;
		padding-right: 20px;
	}
	/* Separación clara entre tarjetas apiladas */
	.address_fx .row > [class*="col-"] {
		margin-bottom: 22px;
	}
	.address_fx .row > [class*="col-"]:last-child {
		margin-bottom: 0;
	}
	/* Un poco más de respiro interno */
	.address_fx .addr-card {
		padding: 34px 26px;
	}
}

/* ---- Ondas animadas azul · blanco · verde ---- */
.address_fx__waves {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 120px;
	z-index: 1;
	line-height: 0;
	pointer-events: none;
}

.address_fx__waves svg {
	width: 100%;
	height: 100%;
}

.address_fx__parallax > use {
	animation: addrWaveMove 14s cubic-bezier(.55, .5, .45, .5) infinite;
}

.address_fx__parallax > use:nth-child(1) { animation-delay: -2s;  animation-duration: 9s; }
.address_fx__parallax > use:nth-child(2) { animation-delay: -3s;  animation-duration: 13s; }
.address_fx__parallax > use:nth-child(3) { animation-delay: -4s;  animation-duration: 16s; }
.address_fx__parallax > use:nth-child(4) { animation-delay: -5s;  animation-duration: 20s; }

@keyframes addrWaveMove {
	0%   { transform: translate3d(-90px, 0, 0); }
	100% { transform: translate3d(85px, 0, 0); }
}

@media (max-width: 767px) {
	.address_fx {
		padding-bottom: 110px;
	}

	.address_fx__waves {
		height: 80px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.address_fx__parallax > use {
		animation: none;
	}
}