/**
 * 04-components.css — Botones, tarjetas, formularios, sociales, cursor.
 */

/* --- Botones ------------------------------------------------------------- */

.pjv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pjv-s2);
	padding: var(--pjv-s3) var(--pjv-s5);
	border: 1px solid transparent;
	border-radius: var(--pjv-r-pill);
	font-family: var(--pjv-font-text);
	font-size: var(--pjv-fs-sm);
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
	transition:
		background var(--pjv-t-fast) var(--pjv-ease),
		color var(--pjv-t-fast) var(--pjv-ease),
		border-color var(--pjv-t-fast) var(--pjv-ease),
		transform var(--pjv-t-fast) var(--pjv-ease);
}

.pjv-btn:hover {
	transform: translateY(-1px);
}

.pjv-btn:active {
	transform: translateY(0);
}

.pjv-btn--primary {
	background: var(--pjv-blue-800);
	color: var(--pjv-white);
}

.pjv-btn--primary:hover {
	background: var(--pjv-blue-600);
}

.pjv-btn--gold {
	background: var(--pjv-gold-500);
	color: var(--pjv-blue-900);
}

.pjv-btn--gold:hover {
	background: var(--pjv-gold-200);
}

/*
 * Botón "Hablemos" de la cabecera.
 * Reposo: blanco, texto azul corporativo, borde azul.
 * Hover:  dorado corporativo, texto azul, MISMO borde azul.
 */
.pjv-btn--cta {
	background: var(--pjv-white);
	color: var(--pjv-blue-800);
	border-color: var(--pjv-blue-800);
}

.pjv-btn--cta:hover {
	background: var(--pjv-gold-500);
	color: var(--pjv-blue-800);
	border-color: var(--pjv-blue-800);
}

.pjv-btn--ghost {
	border-color: currentcolor;
	color: inherit;
	background: transparent;
}

.pjv-btn--ghost:hover {
	background: color-mix(in srgb, currentcolor 8%, transparent);
}

.pjv-btn--lg {
	padding: var(--pjv-s4) var(--pjv-s6);
	font-size: var(--pjv-fs-base);
}

.pjv-btn--sm {
	padding: var(--pjv-s2) var(--pjv-s4);
	font-size: var(--pjv-fs-xs);
}

.pjv-btn--xs {
	padding: var(--pjv-s1) var(--pjv-s3);
	font-size: var(--pjv-fs-xs);
}

.pjv-btn--block {
	width: 100%;
}

.pjv-btn[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

/* --- Enlace con flecha --------------------------------------------------- */

.pjv-link {
	display: inline-flex;
	align-items: center;
	gap: var(--pjv-s2);
	font-weight: 600;
	color: var(--pjv-blue-800);
	border-bottom: 2px solid var(--pjv-gold-500);
	padding-bottom: 2px;
}

.pjv-link .pjv-icon {
	transition: transform var(--pjv-t-base) var(--pjv-ease);
}

.pjv-link:hover .pjv-icon {
	transform: translateX(4px);
}

/* --- Tarjetas ------------------------------------------------------------- */

.pjv-card {
	position: relative;
	display: grid;
	gap: var(--pjv-s3);
	padding: var(--pjv-card-pad);
	background: var(--pjv-white);
	border: 1px solid var(--pjv-line);
	border-radius: var(--pjv-r-lg);
	transition:
		border-color var(--pjv-t-base) var(--pjv-ease),
		box-shadow var(--pjv-t-base) var(--pjv-ease),
		transform var(--pjv-t-base) var(--pjv-ease);
}

.pjv-card:hover {
	border-color: var(--pjv-blue-100);
	box-shadow: var(--pjv-shadow-md);
	transform: translateY(-4px);
}

.pjv-card__num {
	font-family: var(--pjv-font-display);
	font-size: var(--pjv-fs-sm);
	font-weight: 700;
	color: var(--pjv-gold-600);
	letter-spacing: var(--pjv-track-wide);
}

.pjv-card__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: var(--pjv-r-md);
	background: var(--pjv-blue-100);
	color: var(--pjv-blue-800);
}

.pjv-card__title {
	font-size: var(--pjv-fs-card);
}

.pjv-card__text {
	color: var(--pjv-muted);
}

/* --- Redes sociales -------------------------------------------------------- */

.pjv-social {
	display: flex;
	gap: var(--pjv-s3);
}

.pjv-social a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid color-mix(in srgb, currentcolor 25%, transparent);
	border-radius: var(--pjv-r-pill);
	transition:
		background var(--pjv-t-fast) var(--pjv-ease),
		border-color var(--pjv-t-fast) var(--pjv-ease),
		transform var(--pjv-t-fast) var(--pjv-ease);
}

.pjv-social a:hover {
	background: var(--pjv-gold-500);
	border-color: var(--pjv-gold-500);
	color: var(--pjv-blue-900);
	transform: translateY(-2px);
}

/* --- Formulario ------------------------------------------------------------ */

.pjv-form {
	display: grid;
	gap: var(--pjv-s5);
	padding: var(--pjv-form-pad);
	background: var(--pjv-mist);
	border-radius: var(--pjv-r-lg);
}

.pjv-field {
	display: grid;
	gap: var(--pjv-s2);
}

.pjv-field__label {
	font-size: var(--pjv-fs-sm);
	font-weight: 600;
	color: var(--pjv-ink-70);
}

.pjv-field__input {
	width: 100%;
	padding: var(--pjv-s3) var(--pjv-s4);
	background: var(--pjv-white);
	border: 1px solid var(--pjv-line);
	border-radius: var(--pjv-r-md);
	font-size: var(--pjv-fs-base);
	transition:
		border-color var(--pjv-t-fast) var(--pjv-ease),
		box-shadow var(--pjv-t-fast) var(--pjv-ease),
		transform var(--pjv-t-fast) var(--pjv-ease);
}

/* El campo "flota" ligeramente al enfocarse: entrada menos plana. */
.pjv-field__input:focus {
	border-color: var(--pjv-blue-600);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--pjv-blue-600) 14%, transparent);
	outline: none;
	transform: translateY(-1px);
}

.pjv-field__input[aria-invalid='true'] {
	border-color: var(--pjv-error);
}

textarea.pjv-field__input {
	resize: vertical;
	min-height: 140px;
}

.pjv-field__error:empty {
	display: none;
}

.pjv-field__error {
	font-size: var(--pjv-fs-sm);
	color: var(--pjv-error);
}

.pjv-check {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--pjv-s3);
	align-items: start;
	font-size: var(--pjv-fs-sm);
	color: var(--pjv-muted);
	cursor: pointer;
}

.pjv-check input {
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--pjv-blue-800);
}

.pjv-check a {
	color: var(--pjv-blue-800);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Honeypot: fuera de pantalla, nunca display:none (algunos bots lo detectan). */
.pjv-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pjv-form__status:empty {
	display: none;
}

.pjv-form__status {
	padding: var(--pjv-s3) var(--pjv-s4);
	border-radius: var(--pjv-r-md);
	font-size: var(--pjv-fs-sm);
	font-weight: 500;
}

.pjv-form__status[data-tone='ok'] {
	background: color-mix(in srgb, var(--pjv-ok) 12%, transparent);
	color: var(--pjv-ok);
}

.pjv-form__status[data-tone='error'] {
	background: color-mix(in srgb, var(--pjv-error) 10%, transparent);
	color: var(--pjv-error);
}

/* ------------------------------------------------------------------------ *
 * Cursor personalizado (solo escritorio con puntero fino)
 * ------------------------------------------------------------------------ *
 * Dos capas: un punto que sigue al ratón al instante y un anillo que lo
 * persigue con inercia. En elementos interactivos el anillo crece y se tiñe
 * de dorado. cursor.js añade `pjv-has-cursor` a <html> SOLO si el dispositivo
 * tiene puntero fino y no se pide movimiento reducido; en táctil o con
 * movimiento reducido no se activa y el cursor nativo funciona con normalidad.
 * ------------------------------------------------------------------------ */

.pjv-cursor,
.pjv-cursor__ring {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	pointer-events: none;
	border-radius: 50%;
	transform: translate3d(-50%, -50%, 0);
	opacity: 0;
	transition: opacity 200ms linear;
}

.pjv-cursor {
	width: 7px;
	height: 7px;
	background: var(--pjv-blue-800);
}

.pjv-cursor__ring {
	width: 34px;
	height: 34px;
	border: 1.5px solid color-mix(in srgb, var(--pjv-blue-800) 45%, transparent);
	transition:
		width var(--pjv-t-base) var(--pjv-ease),
		height var(--pjv-t-base) var(--pjv-ease),
		background var(--pjv-t-base) linear,
		border-color var(--pjv-t-base) linear,
		opacity 200ms linear;
}

.pjv-has-cursor .pjv-cursor,
.pjv-has-cursor .pjv-cursor__ring {
	opacity: 1;
}

/* Sobre elementos interactivos: el anillo crece y se vuelve dorado. */
.pjv-cursor__ring.is-hover {
	width: 54px;
	height: 54px;
	border-color: var(--pjv-gold-500);
	background: color-mix(in srgb, var(--pjv-gold-500) 12%, transparent);
}

/* Al pulsar, el anillo se contrae un poco. */
.pjv-cursor__ring.is-down {
	width: 26px;
	height: 26px;
}

/* Oculta el cursor nativo cuando el personalizado está activo. */
.pjv-has-cursor,
.pjv-has-cursor * {
	cursor: none !important;
}

/* En táctil o con movimiento reducido no existe el cursor personalizado. */
@media (hover: none), (pointer: coarse) {
	.pjv-cursor,
	.pjv-cursor__ring {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pjv-cursor,
	.pjv-cursor__ring {
		display: none !important;
	}
}