/*
 * Conqr Liquid Statement (widget). Port exacto de site.css: .screen, .about, .abwrap, #abh, .ww, #abtext,
 * #abtext .w, .btns, .btn, .btn.solid, .liquid, .liquid i, .abclone (y sus hijos), .hint, .meta,
 * .hide-bead y sus @media. El clon (.cq-abclone) lo crea liquid.js, como syncClone() del original.
 */

.cq-liquid {
	height: 100vh;
	height: 100svh;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--cq-m);
	text-align: center;
	cursor: none;
}

.cq-abwrap {
	position: relative;
	z-index: 1;
	max-width: 1180px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(26px, 4.5vh, 44px);
	perspective: 900px;
}
.cq-liquid .cq-abh {
	transform-style: preserve-3d;
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: clamp(46px, 7vw, 124px);
	font-weight: 700;
	letter-spacing: -.055em;
	line-height: .94;
	text-transform: lowercase;
	color: inherit;
}
.cq-abh .cq-ww {
	display: inline-block;
	/* el original pide también filter; Safari no repinta filter + will-change dentro de preserve-3d */
	will-change: transform, opacity;
}
.cq-liquid .cq-abtext {
	margin: 0;
	padding: 0;
	max-width: 46ch;
	font-size: clamp(18px, 1.55vw, 23px);
	line-height: 1.5;
}
/* .w de site.css (inline-block) con el override de #abtext .w */
.cq-lw {
	display: inline-block;
	opacity: .14;
	filter: none;
	transform: none;
}
/* WP: final del pin (liquid.js → .is-lit) */
.cq-liquid.is-lit .cq-abwrap .cq-lw {
	opacity: 1 !important;
}
.cq-liquid.is-lit .cq-btns {
	opacity: 1 !important;
	transform: none !important;
}

.cq-btns {
	display: flex;
	justify-content: center;
	opacity: 0;
	transform: translateY(16px);
}
.cq-btn {
	display: inline-flex;
	align-items: center;
	height: 56px;
	padding: 0 34px;
	border-radius: 999px;
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
	line-height: normal;
	transition: background .35s, color .35s;
	will-change: transform;
	cursor: pointer;
}
.cq-btn--solid,
.cq-btn--solid:active {
	background: var(--cq-paper);
	color: var(--cq-ink);
}
.cq-btn--solid:hover {
	background: var(--cq-blue);
	color: var(--cq-paper);
}

/* .liquid: un <svg> a toda la sección; las bolas son <circle> y el goo va en su <g> (ver widget). */
.cq-liquid__drop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	z-index: 2;
	pointer-events: none;
	mix-blend-mode: difference;
}
.cq-liquid__drop circle {
	fill: #fff;
}

.cq-abclone {
	position: absolute;
	z-index: 1;
	margin: 0;
	pointer-events: none;
	color: #fff;
	clip-path: circle(0 at 0 0);
}
.cq-abclone .cq-ww,
.cq-abclone .cq-lw,
.cq-abclone .cq-abh,
.cq-abclone h2,
.cq-abclone p {
	opacity: 1 !important;
	filter: none !important;
	transform: none !important;
	color: #fff !important;
}
.cq-abclone .cq-btns {
	visibility: hidden !important;
}

.cq-hint {
	position: absolute;
	left: 50%;
	bottom: calc(env(safe-area-inset-bottom, 0px) + 34px);
	transform: translateX(-50%);
	z-index: 3;
	/* .meta */
	font-size: 12px;
	color: var(--cq-dim);
	display: flex;
	gap: 14px;
	align-items: center;
}

@media (hover: none), (pointer: coarse) {
	.cq-liquid { cursor: auto; }
	.cq-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.cq-lw,
	.cq-btns {
		opacity: 1 !important;
		filter: none !important;
		transform: none !important;
	}
}

/* Editor de Elementor: sin escena, el último estado (texto encendido y botón visible). */
.elementor-editor-active .cq-lw,
.elementor-editor-active .cq-btns {
	opacity: 1;
	transform: none;
}

/* WP · teléfono en horizontal (no está en el original): a 844×390 el titular quedaba bajo el logo del
   header y el botón casi fuera de la pantalla. Misma composición, más compacta. */
@media (orientation: landscape) and (max-height: 500px) {
	.cq-liquid {
		padding-top: 64px;
	}
	.cq-abwrap {
		gap: 14px;
	}
	.cq-liquid .cq-abh {
		font-size: min(clamp(46px, 7vw, 124px), 12vh);
	}
	.cq-liquid .cq-abtext {
		max-width: 70ch;
		font-size: 14px;
	}
}

/* About · AI (#view #ai del original): el mismo escenario negro que el about de la Home */
.cq-liquid--stage {
	background: #000;
	z-index: 3;
}
@media (min-width: 821px) {
	.cq-liquid--stage .cq-abh,
	.cq-liquid--stage .cq-abclone .cq-abh {
		white-space: nowrap;
	}
}