/**
 * Vela Contacto — burbuja flotante y panel de canales.
 *
 * El botón sale del asset de la maqueta (`assets/elementos/boton-chat-flotante`),
 * medido sobre su lienzo de 336 px: anillo de 8 px sobre 334 de diámetro —un
 * 2,4%—, burbuja blanca que ocupa el 61,7% del botón y tres puntos calados de
 * 30 px separados 48,75. De ahí salen las proporciones de abajo.
 *
 * Las medidas del panel van en píxeles y no en cqi, al revés que las secciones
 * de contenido: esto no se mete en ninguna columna ni comparte eje con nada:
 * flota sobre la ventana y tiene que medir lo mismo en todas las páginas.
 *
 * Los colores salen de los tokens del tema, con reserva para poder usar el
 * plugin sin él.
 */

.contacto {
	--contacto-anillo: #76ff8d;
	--contacto-burbuja: #fff;
	--contacto-fondo: #0c3846;
	--contacto-opacidad: 1;
	--contacto-sello: #5eb0c8;
	--contacto-a: #997952;
	--contacto-b: #0c3846;

	--contacto-boton: 64px;
	--contacto-margen: clamp(16px, 3vw, 28px);

	/*
	 * Cuánto se monta el sello fuera del panel.
	 *
	 * No es un número fijo: el panel va centrado y pegado a los márgenes, así
	 * que lo que sobresale por la izquierda se sale de la pantalla en cuanto
	 * el margen es menor que el saliente. En un móvil el margen baja a 16 y un
	 * saliente de 22 dejaba el sello cortado por el borde. Atándolo al margen
	 * disponible, el sello se recoge solo donde no hay sitio.
	 */
	--contacto-salida: min(22px, calc(var(--contacto-margen) - 4px));
	--contacto-curva: var(--vela-curva, cubic-bezier(.22, .61, .36, 1));

	position: fixed;
	bottom: var(--contacto-margen);
	z-index: 9990;

	font-family: var(--vela-fuente, "Montserrat", system-ui, sans-serif);
}

.contacto--derecha {
	right: var(--contacto-margen);
}

.contacto--izquierda {
	left: var(--contacto-margen);
}

/* ================================================================== botón */

.contacto__burbuja {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--contacto-boton);
	height: var(--contacto-boton);
	padding: 0;
	border: 2px solid var(--contacto-anillo);
	border-radius: 50%;
	/*
	 * Relleno y no transparencia. El asset de la maqueta es transparente, y
	 * sobre el vídeo del hero funciona; pero en las secciones claras la burbuja
	 * blanca se confunde con el fondo y solo queda el anillo flotando. Con un
	 * color detrás se lee en cualquier sitio, y quien quiera la transparencia
	 * original tiene el ajuste de opacidad.
	 */
	background: color-mix(in srgb, var(--contacto-fondo) calc(var(--contacto-opacidad) * 100%), transparent);
	box-shadow: 0 6px 20px rgba(11, 56, 70, .22);
	color: var(--contacto-burbuja);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;

	/* La entrada: aparece un momento después de la carga, para no competir con
	   lo que el visitante ha venido a ver. El rebote va en la curva. */
	animation: contacto-entra .5s cubic-bezier(.34, 1.56, .64, 1) .7s both;

	transition:
		transform .3s var(--contacto-curva),
		border-color .3s ease,
		box-shadow .3s ease;
}

@keyframes contacto-entra {
	from {
		opacity: 0;
		transform: translateY(18px) scale(.4);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/*
 * El halo: un anillo que crece y se desvanece por detrás del botón. Late dos
 * veces al entrar para que se note que está ahí, y vuelve a latir en cada
 * pasada del ratón. Es un pseudoelemento para no meter marcado de adorno.
 */
.contacto__burbuja::before {
	content: "";
	position: absolute;
	inset: -2px;
	border: 2px solid var(--contacto-anillo);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	animation: contacto-halo 2.4s ease-out 1.1s 2;
}

@keyframes contacto-halo {
	0% {
		opacity: .7;
		transform: scale(1);
	}

	60%, 100% {
		opacity: 0;
		transform: scale(1.7);
	}
}

.contacto__burbuja:hover,
.contacto__burbuja:focus-visible {
	transform: scale(1.08);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}

.contacto__burbuja:hover::before,
.contacto__burbuja:focus-visible::before {
	animation: contacto-halo 1.4s ease-out infinite;
}

.contacto__burbuja:focus-visible {
	outline: 2px solid var(--contacto-anillo);
	outline-offset: 4px;
}

.contacto__burbuja:active {
	transform: scale(.96);
}

/* Los dos glifos se apilan en el mismo sitio y se turnan al abrir. */
.contacto__icono {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 59% del botón, como en la maqueta. El SVG mide 1em. */
	font-size: calc(var(--contacto-boton) * .59);
	line-height: 0;
	transition:
		opacity .25s ease,
		transform .35s var(--contacto-curva);
}

.contacto__icono--cerrar {
	font-size: calc(var(--contacto-boton) * .46);
	opacity: 0;
	transform: rotate(-90deg) scale(.5);
}

.contacto.is-abierto .contacto__icono--abrir {
	opacity: 0;
	transform: rotate(90deg) scale(.5);
}

.contacto.is-abierto .contacto__icono--cerrar {
	opacity: 1;
	transform: none;
}

.contacto__glifo {
	display: block;
	width: 1em;
	height: 1em;
}

/* ================================================================== panel */

/*
 * El telón. Desenfoca la página entera y recoge el clic de cerrar.
 *
 * Va en `position: fixed` aunque cuelgue de un elemento ya fijo: los dos se
 * miden contra la ventana, así que cubre la pantalla sin importar en qué
 * esquina esté el botón.
 */
.contacto__telon {
	position: fixed;
	inset: 0;
	z-index: -1;
	background: rgba(8, 40, 50, .34);
	-webkit-backdrop-filter: blur(9px);
	backdrop-filter: blur(9px);
	opacity: 0;
	visibility: hidden;
	/* La visibilidad espera a que termine el fundido para apagarse; si no,
	   desapareceria de golpe y se llevaria la transicion por delante. */
	transition:
		opacity .28s ease,
		visibility 0s linear .28s;
}

.contacto.is-abierto .contacto__telon {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s, 0s;
}

/*
 * El panel va centrado en la pantalla, no colgando del botón: es un modal.
 *
 * El centrado usa `left/top` más la propiedad `translate`, y la entrada usa
 * `transform`. Son dos propiedades distintas a propósito: si compartieran
 * `transform`, la animación de apertura tendría que repetir el -50% del
 * centrado en cada fotograma y cualquier retoque descuadraría la pieza.
 */
.contacto__panel {
	position: fixed;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	/* 410 y no 360: con el ancho anterior las descripciones mas largas se
	   partian en dos lineas y la fila crecia de alto, rompiendo el ritmo. */
	width: min(410px, calc(100vw - (2 * var(--contacto-margen))));
	max-height: calc(100vh - (2 * var(--contacto-margen)));
	padding: 30px 24px 24px;
	border-radius: 28px;
	background: #fff;
	box-shadow: 0 24px 60px rgba(11, 56, 70, .28);

	opacity: 0;
	transform: scale(.94);
	transition:
		opacity .26s ease,
		transform .26s var(--contacto-curva);
}

.contacto.is-abierto .contacto__panel {
	opacity: 1;
	transform: none;
}

.contacto__panel:focus {
	outline: none;
}

/* El sello de marca, montado sobre la esquina superior del panel. */
.contacto__sello {
	position: absolute;
	top: calc(var(--contacto-salida) * -1);
	left: calc(var(--contacto-salida) * -1);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: var(--contacto-sello);
	box-shadow: 0 6px 16px rgba(11, 56, 70, .22);
}

.contacto__sello img {
	width: 34px;
	height: auto;
}

.contacto__titulo {
	margin: 0;
	text-align: center;
	font-size: var(--vela-txt-lg, 17px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--vela-petroleo, #0c3846);
}

/*
 * El filete dorado va como borde del subtítulo y no como elemento aparte: así
 * mide lo que mide el texto y no hay que inventarle un ancho.
 */
.contacto__subtitulo {
	margin: 6px auto 18px;
	padding-bottom: 12px;
	/* `fit-content` y no un porcentaje: el filete es el borde de este párrafo,
	   así que la caja tiene que medir lo que mide el texto. Con un 86% fijo la
	   frase se partía en dos líneas aunque cupiera de sobra en el panel. */
	width: fit-content;
	max-width: 100%;
	border-bottom: 1px solid var(--contacto-a);
	text-align: center;
	font-size: var(--vela-txt-xs, 11px);
	font-weight: 400;
	line-height: 1.45;
	color: var(--vela-petroleo, #0c3846);
}

/* ================================================================ canales */

/*
 * El selector lleva `.contacto` delante a propósito, y no sobra.
 *
 * El tema trae un reinicio moderno con `ul[class], ol[class] { padding: 0;
 * margin: 0 }`, que entre una clase y un atributo suma más especificidad que
 * una clase sola. Sin el ancestro delante, el relleno de aquí abajo no llegaba
 * a aplicarse nunca y el recorte se comía el borde de la tarjeta.
 */
.contacto .contacto__canales {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: none;

	/* Si no caben, se desplaza la lista y no el panel: el sello vive fuera de
	   la caja del panel y cualquier recorte allí se lo llevaría por delante.
	   Los 150 px descontados son lo que ocupan título, frase y filete. */
	max-height: calc(100vh - (2 * var(--contacto-margen)) - 150px);
	overflow-y: auto;

	/*
	 * Y este es el precio de que la lista sea un contenedor con
	 * desplazamiento: en CSS no se puede recortar un eje y dejar el otro
	 * suelto. Al poner `overflow-y`, el horizontal pasa solo a `auto`, y los
	 * 14 px que se mueve una fila al pasar el ratón —3 de empujón y el resto
	 * de sombra— sacaban una barra de desplazamiento.
	 *
	 * El relleno les da ese sitio y el margen negativo lo devuelve, así que
	 * las filas siguen midiendo exactamente lo mismo que antes.
	 */
	padding: 14px;
	margin: -14px;
	overflow-x: hidden;
}

.contacto__item {
	margin: 0;
}

.contacto__canal {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	border-radius: 14px;
	background: var(--contacto-fila, var(--contacto-a));
	color: #fff;
	text-decoration: none;

	transition:
		transform .22s var(--contacto-curva),
		box-shadow .22s ease,
		filter .22s ease;
}

.contacto__canal:hover,
.contacto__canal:focus-visible {
	transform: translateX(3px);
	/* Ajustada al relleno de la lista: con un difuminado mayor, la cola se
	   recortaría contra el borde del contenedor de desplazamiento. */
	box-shadow: 0 4px 11px rgba(11, 56, 70, .26);
	filter: brightness(1.08);
	color: #fff;
}

.contacto__canal:focus-visible {
	outline: 2px solid var(--vela-petroleo, #0c3846);
	outline-offset: 2px;
}

.contacto__canal-icono {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	/* Un velo claro sobre el color de la fila: así el recuadro del icono
	   funciona igual sobre el dorado que sobre el petróleo, sin dos reglas. */
	background: rgba(255, 255, 255, .16);
	font-size: 21px;
	line-height: 0;
}

.contacto__svg {
	display: block;
	width: 1em;
	height: 1em;
}

.contacto__canal-texto {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.contacto__canal-titulo {
	font-size: var(--vela-txt-md, 15px);
	font-weight: 700;
	line-height: 1.2;
}

.contacto__canal-nota {
	font-size: var(--vela-txt-xs, 11px);
	font-weight: 300;
	line-height: 1.3;
	opacity: .92;
}

/* ============================================================== responsive */

@media ( max-width: 480px ) {
	.contacto {
		--contacto-boton: 58px;
	}

	.contacto__panel {
		padding: 26px 18px 20px;
	}

	.contacto__canal {
		padding: 11px 13px;
	}

	.contacto__canal-icono {
		width: 34px;
		height: 34px;
		font-size: 19px;
	}
}

/*
 * Menos movimiento: se va la entrada, el halo y los desplazamientos. El cambio
 * de estado sigue notándose —el panel aparece, el glifo cambia— porque sin eso
 * el botón dejaría de comunicar si está abierto o cerrado.
 */
@media ( prefers-reduced-motion: reduce ) {
	.contacto__burbuja,
	.contacto__burbuja::before {
		animation: none;
	}

	.contacto__burbuja:hover,
	.contacto__burbuja:focus-visible,
	.contacto__canal:hover,
	.contacto__canal:focus-visible {
		transform: none;
	}

	.contacto__panel,
	.contacto__icono,
	.contacto__canal,
	.contacto__burbuja {
		transition-duration: .01ms;
	}

	.contacto__icono--cerrar,
	.contacto.is-abierto .contacto__icono--abrir {
		transform: none;
	}
}