/**
 * Landing «Agentes Opus 3» — above the fold.
 *
 * Dos mitades: la izquierda se deja limpia y la derecha es un comparador de
 * arrastre — capa izquierda la réplica del chat de la app PAU (misma
 * tipografía, mismos colores, mismas burbujas y mismo compositor que
 * src/index.html de vibecode) y capa derecha el lienzo con la jerarquía de
 * agentes. Las DOS capas se recortan (nunca se tapan entre sí) para que el
 * degradado de la página siga corriendo por debajo sin costura. El fondo es el
 * degradado nocturno de pau.me (--pau-night #1f2230 → --pau-night-soft #2a2d3c,
 * 160deg), que resulta ser el mismo par de colores que usa la app (--bg /
 * --surface), así que las dos mitades comparten exactamente el mismo fondo.
 *
 * Esta hoja es EXCLUSIVA de /proyecto/agentes-opus3/.
 *
 * @package Pau_Ninja
 */

/* El tema NO tiene box-sizing global (sólo lo aplica en sitios sueltos), así que
   los rellenos se sumaban al ancho y el chat se salía del panel. La app sí lo
   tiene global; aquí se limita a esta landing. */
.agx,
.agx *,
.agx *::before,
.agx *::after {
	box-sizing: border-box;
}

.agx {
	/* Paleta literal de la app PAU (src/index.html, :root). */
	--agx-bg: #1f2230;
	--agx-surface: #2a2d3c;
	--agx-accent: #f8d886;
	--agx-chat-text: #e8e8e8;
	--agx-chat-font: "Ubuntu Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--agx-ui-font: "ABeeZee", -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif;
	--agx-chat-size: 16px;
	--agx-chat-leading: 1.5;

	background: #1f2230 linear-gradient(160deg, #1f2230 0%, #2a2d3c 100%);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	color: #e6f2ff;
}

/* Altura FIJA (no mínima) en escritorio: si la fila del grid pudiera crecer con
   su contenido, la conversación empujaría el panel hacia abajo y nunca se
   retiraría un turno viejo. */
.agx-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(0, 1fr);
	align-items: stretch;
	height: calc(100vh - var(--pn-topbar-h, 64px));
	height: calc(100svh - var(--pn-topbar-h, 64px));
}

.agx-hero__col {
	position: relative;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}

/* ─── Texto de portada (mitad izquierda, calcado de pau.me) ─────────────── */

/* Valores medidos en vivo sobre https://pau.me (1600 px): píldora 14/500 con
   borde #535862 y radio 50px, titular Inter 500 con letter-spacing -0.05em y
   degradado recortado al texto (#fff 17.81% → #535353 131.33%, opacidad .9),
   párrafo 18/1.35 en #a4a7ae, botón sólido #181d27 con halo degradado
   desenfocado 9px, y los avales con el tic verde #12b76a. Aquí el titular se
   escala con el ancho porque esta columna es la mitad de la pantalla. */
.agx-hero__col--lede {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px 40px;
	overflow-y: auto;
}

.agx-lede {
	width: 100%;
	max-width: 620px;
	text-align: center;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	letter-spacing: -0.02em;
}

/* Logo de PAU sobre la píldora: mismo SVG a color que el tirador del
   slider de la derecha, a 60px de ancho y centrado. */
.agx-lede__logo {
	display: block;
	width: 60px;
	height: auto;
	margin: 0 auto 16px;
}

.agx-lede__eyebrow {
	display: inline-block;
	margin: 0 0 14px;
	padding: 7px 16px;
	border: 1px solid #535862;
	border-radius: 50px;
	/* Mismo gris y mismo cuerpo que los avales de abajo (.agx-lede__checks
	   small), en negrita; el <small> interior la deja un punto más pequeña. */
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.02em;
	color: #c6cbd6;
}

.agx-lede__eyebrow small {
	font-size: 0.85em;
}

.agx-lede__title {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: clamp(30px, 3.4vw, 60px);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.05em;
	background-image: linear-gradient(90deg, #fff 17.81%, #535353 131.33%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	opacity: 0.9;
}

.agx-lede__title b {
	font-weight: 700;
}

.agx-lede__text {
	margin: 22px auto 0;
	max-width: 490px;
	font-size: clamp(15px, 1.15vw, 18px);
	line-height: 1.35;
	letter-spacing: -0.02em;
	color: #a4a7ae;
}

.agx-lede__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 22px;
	margin-top: 30px;
}

.agx-btn-wrap {
	position: relative;
	display: inline-block;
}

/* El halo del botón: el mismo degradado, desenfocado por detrás. */
.agx-btn-glow {
	position: absolute;
	inset: 0;
	border-radius: 12px;
	background: linear-gradient(90deg, #ec8cf9 0%, #a789ed 27%, #66ddcb 52%, #4fe3fc 76%, #0478ce 100%);
	filter: blur(9px);
}

.agx-btn {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 20px;
	font-size: 16px;
	line-height: 1.35;
	letter-spacing: -0.02em;
	color: #fff;
	text-decoration: none;
	overflow: hidden;
}

.agx-btn:hover,
.agx-btn:focus {
	color: #fff;
	text-decoration: none;
}

.agx-btn__icon {
	display: flex;
	margin-left: 9px;
}

.agx-btn--solid {
	background: #181d27;
	border-radius: 12px;
	/* Mismo cambio de fondo al pasar el ratón que el botón de pau.me. */
	transition: background-color 0.3s linear;
}

.agx-btn--solid:hover,
.agx-btn--solid:focus {
	background-color: #1f2230;
}

/* Destello «glossy» de pau.me (.btn-glossy): en reposo está fuera del botón. */
.agx-btn--solid::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -200%;
	width: 200%;
	transform: skewX(-20deg);
	background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.35), transparent);
	z-index: 1;
}

/* …y sólo lo recorre al pasar el ratón, igual que en pau.me. */
.agx-btn--solid:hover::before {
	animation: agx-btn-shine 1.8s ease 0.1s;
}

@keyframes agx-btn-shine {
	100% {
		left: 200%;
	}
}

.agx-btn--ghost {
	background: transparent;
	border-radius: 8px;
}

.agx-lede__checks {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 24px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.agx-lede__checks li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: #c6cbd6;
}

.agx-lede__checks small {
	font-size: 13.5px;
	line-height: 1.35;
	letter-spacing: -0.02em;
}

@media (prefers-reduced-motion: reduce) {

	.agx-btn--solid:hover::before {
		animation: none;
	}
}

/* ─── Comparador de arrastre (mitad derecha) ────────────────────────────── */

.agx-ba {
	position: absolute;
	inset: 0;
	overflow: hidden;
	user-select: none;
	-webkit-user-select: none;
	/* Sin esto el navegador se queda el gesto para hacer scroll y el tirador no
	   sigue al dedo. */
	touch-action: none;
}

/* Las dos capas ocupan TODO el comparador y se recortan la una a la otra por la
   misma línea: ninguna pinta fondo propio, así el degradado de la página corre
   por debajo sin escalón en la línea de corte. */
.agx-stage,
.agx-ba__layer {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/* La jerarquía ocupa la parte DERECHA de la línea (50% por defecto). Lleva el
   mismo relleno que la capa del chat pero en espejo: aquí el borde exterior del
   panel es el derecho. */
.agx-stage {
	display: flex;
	padding: 26px 30px 26px 22px;
	clip-path: inset(0 0 0 50%);
}

/* El panel de la jerarquía: el MISMO marco degradado que el del chat (ver
   .agx-chat::before más abajo, regla compartida). Sin fondo propio, para que el
   degradado de la página siga corriendo por debajo del lienzo. */
.agx-stage__panel {
	position: relative;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	border-radius: 14px;
}

/* El chat, la IZQUIERDA (50% por defecto). El borde exterior del panel es el
   izquierdo, por eso lleva más relleno por ese lado. */
.agx-ba__layer {
	display: flex;
	padding: 26px 22px 26px 30px;
	clip-path: inset(0 50% 0 0);
}

.agx-ba__divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	transform: translateX(-1px);
	background: #fff;
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
	pointer-events: none;
	z-index: 3;
}

.agx-ba__knob {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
	pointer-events: none;
	z-index: 4;
}

/* El tirador lleva el logo PAU arriba y, justo debajo, la flecha bidireccional.
   El PNG de la flecha trae mucho margen transparente arriba y abajo (la tinta
   solo ocupa la banda central), así que se recorta con margen negativo para que
   las dos piezas queden juntas y quepan dentro del círculo. */
.agx-ba__knob-logo {
	display: block;
	width: 19px;
	height: auto;
	margin-top: -1px;
}

.agx-ba__knob-arrow {
	display: block;
	width: 20px;
	height: auto;
	margin-top: -3px;
	margin-bottom: -4px;
}

/* El control real es un range invisible a pantalla completa: arrastre con ratón
   y con dedo, y además flechas del teclado. */
.agx-ba__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	z-index: 5;
}

.agx-ba__tag {
	position: absolute;
	top: 12px;
	z-index: 3;
	font-family: var(--agx-ui-font);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 5px 10px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.5);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: #e6f2ff;
	pointer-events: none;
}

.agx-ba__tag--l {
	left: 14px;
}

.agx-ba__tag--r {
	right: 14px;
}

.agx-canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* ─── Réplica del chat de PAU ───────────────────────────────────────────── */

/* El panel: fondo --bg y el borde degradado que rodea al chat activo
   (.panel.active::before de la app: mismos colores, 300% 300%, 4s lineal). */
.agx-chat {
	position: relative;
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 14px;
	background: var(--agx-bg);
	font-family: var(--agx-ui-font);
	font-size: var(--agx-chat-size);
	line-height: var(--agx-chat-leading);
	color: #eee;
}

.agx-chat::before,
.agx-stage__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 2px;
	border-radius: 14px;
	background: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #4fcf70);
	background-size: 300% 300%;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	z-index: 2;
	animation: agx-panel-flow 4s linear infinite;
}

@keyframes agx-panel-flow {

	0% {
		background-position: 0% 50%;
	}

	100% {
		background-position: 300% 50%;
	}
}

.agx-chat__msgs {
	flex: 1;
	/* Sin esto la zona de mensajes crece con su contenido (min-height: auto),
	   empuja al compositor fuera del panel y la limpieza nunca se dispara. */
	min-height: 0;
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	overflow: hidden;
	padding: 18px 24px 20px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 18px;
	font-family: var(--agx-chat-font);
	/* El turno más viejo se corta arriba, como en un chat con scroll: se le da
	   un desvanecido para que el corte no se vea seco. */
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 42px);
	mask-image: linear-gradient(to bottom, transparent 0, #000 42px);
}

/* Cada intercambio (pregunta + respuesta) va junto: así se retira entero
   cuando la conversación deja de caber. */
.agx-turn {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.agx-msg {
	line-height: var(--agx-chat-leading);
	font-size: var(--agx-chat-size);
	word-wrap: break-word;
	animation: agx-msg-in 0.28s ease-out both;
}

@keyframes agx-msg-in {

	from {
		opacity: 0;
		transform: translateY(6px);
	}

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

.agx-msg--user {
	align-self: flex-end;
	max-width: 80%;
	background: var(--agx-surface);
	padding: 12px 16px;
	border-radius: 16px 16px 4px 16px;
}

.agx-msg--assistant {
	align-self: flex-start;
	max-width: 100%;
	color: var(--agx-chat-text);
	position: relative;
	padding-left: 22px;
}

/* El logo de PAU con el degradado del botón de enviar, recortado por máscara. */
.agx-msg--assistant::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	background: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b);
	-webkit-mask: url("../assets/img/pau-logo.svg") center / contain no-repeat;
	mask: url("../assets/img/pau-logo.svg") center / contain no-repeat;
	position: absolute;
	left: -4px;
	top: calc(0.12em - 1px);
}

.agx-msg p {
	margin: 0 0 12px;
}

.agx-msg p:last-child {
	margin-bottom: 0;
}

.agx-msg strong {
	font-weight: 800;
	color: #fff;
}

.agx-note {
	color: #8a90a0;
	font-size: calc(var(--agx-chat-size) - 3px);
	line-height: 1.35;
	margin: 6px 0 2px;
	font-style: italic;
}

.agx-meta {
	font-size: calc(var(--agx-chat-size) - 4px);
	color: #6f7488;
	line-height: 1.35;
	font-weight: 400;
}

.agx-ts {
	font-size: calc(var(--agx-chat-size) - 4px);
	color: #6f7488;
	line-height: 1.35;
	text-align: right;
	margin-top: 4px;
}

/* Resumen verde de lo que el agente hizo de verdad (.tool-actions). */
.agx-done {
	margin-top: 5px;
	font-size: calc(var(--agx-chat-size) - 2px);
	color: #4fcf70;
	opacity: 0.92;
	line-height: 1.35;
}

/* «Pensando…»: texto con el degradado de marca en movimiento. */
.agx-thinking {
	background-image: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #4fcf70);
	background-size: 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: agx-brand-flow 3s linear infinite;
	font-weight: 700;
	font-size: var(--agx-chat-size);
	font-family: var(--agx-chat-font);
}

@keyframes agx-brand-flow {

	0% {
		background-position: 0% 50%;
	}

	100% {
		background-position: 300% 50%;
	}
}

.agx-dots::after {
	content: ".";
	animation: agx-ellip 1.2s steps(1, end) infinite;
}

@keyframes agx-ellip {

	0% {
		content: ".";
	}

	33% {
		content: "..";
	}

	66% {
		content: "...";
	}

	100% {
		content: ".";
	}
}

.agx-status {
	align-self: flex-start;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

/* Cursor de escritura mientras el mensaje se va escribiendo. */
.agx-caret::after {
	content: "▍";
	color: #8a90a0;
	animation: agx-blink 1s ease-in-out infinite;
}

@keyframes agx-blink {

	0%,
	100% {
		opacity: 0.25;
	}

	50% {
		opacity: 1;
	}
}

/* ─── Compositor ────────────────────────────────────────────────────────── */

.agx-composer {
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	padding: 0 10px 10px;
}

.agx-composer__inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--agx-surface);
	border: 1px solid #ffffff1f;
	border-radius: 14px;
	padding: 10px 12px;
}

.agx-composer__text {
	flex: 1;
	min-width: 0;
	color: #eee;
	font-size: var(--agx-chat-size);
	font-family: var(--agx-chat-font);
	line-height: var(--agx-chat-leading);
	white-space: pre-wrap;
	word-wrap: break-word;
	min-height: calc(var(--agx-chat-size) * var(--agx-chat-leading));
}

.agx-composer__text.is-empty {
	color: #6f7488;
}

/* Botón de enviar: mismo borde degradado que .sendBtn de la app. */
.agx-send {
	display: inline-block;
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	padding: 2px;
	isolation: isolate;
	flex-shrink: 0;
}

.agx-send::before {
	content: "";
	position: absolute;
	inset: 0;
	width: 400%;
	height: 100%;
	background: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b);
	background-size: 25% 100%;
	translate: -5% 0%;
}

.agx-send.is-firing::before {
	animation: agx-send-flow 0.75s linear infinite;
	translate: 0% 0%;
}

@keyframes agx-send-flow {

	0% {
		translate: 0% 0%;
	}

	100% {
		translate: -25% 0%;
	}
}

.agx-send span {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: #000;
	border-radius: 6px;
	color: #fff;
	font-size: 16px;
}

/* Sin animación para quien la ha desactivado en el sistema. */
@media (prefers-reduced-motion: reduce) {

	.agx-chat::before,
	.agx-stage__panel::before,
	.agx-thinking,
	.agx-dots::after,
	.agx-caret::after,
	.agx-send.is-firing::before,
	.agx-msg {
		animation: none;
	}
}

/* En móvil no caben dos columnas: el texto va arriba y el comparador debajo,
   con altura propia (la fila ya no puede ser una fracción de la pantalla). */
@media (max-width: 860px) {

	.agx-hero {
		grid-template-columns: 1fr;
		grid-template-rows: auto minmax(0, 1fr);
		height: auto;
	}

	.agx-hero__col--lede {
		padding: 34px 20px 26px;
	}

	/* En móvil el titular va un 50% más grande que el tamaño base (30px -> 45px).
	   El 10.5vw evita que se salga de pantalla en móviles muy estrechos. */
	.agx-lede__title {
		font-size: clamp(30px, 10.5vw, 45px);
	}

	.agx-hero__col--stage {
		height: 74svh;
		min-height: 420px;
	}

	.agx-ba__layer,
	.agx-stage {
		padding: 18px 14px;
	}

	.agx-chat__msgs {
		padding: 14px 14px 16px;
	}
}