/* =========================================================
   V&J Works Studio — sistema de botones (solo web corporativa)
   Alcance: body.vj-home, body.vj-page, body.vj-legal (portada, Servicios,
   Nosotros, Contacto, Proyectos, Privacidad). NO se carga en /designs/ ni en
   ninguna demo. Sin selectores globales `button {}`: solo clases de WordPress
   dentro de <main> y <footer>.

   Lenguaje V&J: bloques de tinta, esquinas vivas, relleno que barre y flecha
   que avanza. Las variantes de texto, compacto y los estados base
   (disabled/loading/success/error) están en vj-nav.css y se reutilizan.

   Contextos oscuros (cta-band, vp-ink, footer…) invierten los tokens.
   ========================================================= */

body:is(.vj-home, .vj-page, .vj-legal) {
	--vb-bg: var(--wp--preset--color--primary, #0a0a0a);
	--vb-fg: var(--wp--preset--color--background, #ffffff);
	--vb-sweep: 380ms;
	--vb-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
}
body:is(.vj-home, .vj-page, .vj-legal) :is(.cta-band, .hero-cover, .vp-ink, .footer-cta, footer) {
	--vb-bg: #ffffff;
	--vb-fg: #0a0a0a;
}

/* ---------- Primario (sólido): el relleno barre de izquierda a derecha ---------- */
body:is(.vj-home, .vj-page, .vj-legal) :is(main, footer)
.wp-block-button:not(.is-style-outline, .is-style-outline-footer, .is-style-text) .wp-element-button {
	background-color: var(--vb-bg);
	background-image: linear-gradient(var(--vb-fg), var(--vb-fg));
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0% 100%;
	color: var(--vb-fg);
	border-color: var(--vb-bg);
	box-shadow: none;
	transition: background-size var(--vb-sweep) var(--vb-ease),
		color 240ms ease,
		transform 160ms var(--vb-ease);
}

/* ---------- Secundario (contorno): el relleno sube desde abajo ---------- */
body:is(.vj-home, .vj-page, .vj-legal) :is(main, footer)
:is(.wp-block-button.is-style-outline, .wp-block-button.is-style-outline-footer) .wp-element-button,
body:is(.vj-home, .vj-page, .vj-legal) :is(main, footer)
.wp-block-button :is(.hero-outline, .vjt-secondary) .wp-element-button {
	background-color: transparent;
	background-image: linear-gradient(var(--vb-bg), var(--vb-bg));
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% 0%;
	color: var(--vb-bg);
	border-color: var(--vb-bg);
	box-shadow: none;
	transition: background-size var(--vb-sweep) var(--vb-ease),
		color 240ms ease,
		transform 160ms var(--vb-ease);
}

/* ---------- Flecha que avanza en los CTA principales ---------- */
body:is(.vj-home, .vj-page, .vj-legal) :is(main, footer)
:is(.cta-primary, .vp-primary, .explore, .hero-primary) .wp-element-button::after {
	content: "→";
	display: inline-block;
	margin-left: 0.7rem;
	transition: transform 260ms var(--vb-ease);
}

/* ---------- Hover (solo dispositivos con cursor) ---------- */
@media (hover: hover) and (pointer: fine) {
	body:is(.vj-home, .vj-page, .vj-legal) :is(main, footer)
	.wp-block-button:not(.is-style-outline, .is-style-outline-footer, .is-style-text) .wp-element-button:hover {
		background-size: 100% 100%;
		color: var(--vb-bg);
		transform: none;
		box-shadow: none;
	}
	body:is(.vj-home, .vj-page, .vj-legal) :is(main, footer)
	:is(.wp-block-button.is-style-outline, .wp-block-button.is-style-outline-footer) .wp-element-button:hover,
	body:is(.vj-home, .vj-page, .vj-legal) :is(main, footer)
	.wp-block-button :is(.hero-outline, .vjt-secondary) .wp-element-button:hover {
		background-color: transparent;
		background-size: 100% 100%;
		color: var(--vb-fg);
		transform: none;
		box-shadow: none;
	}
	body:is(.vj-home, .vj-page, .vj-legal) :is(main, footer)
	:is(.cta-primary, .vp-primary, .explore, .hero-primary) .wp-element-button:hover::after {
		transform: translateX(0.35rem);
	}
}

/* ---------- Pulsado: respuesta inmediata (también en táctil) ---------- */
body:is(.vj-home, .vj-page, .vj-legal) :is(main, footer) .wp-block-button .wp-element-button:active {
	transform: translateY(1px) scale(0.985);
}

/* ---------- Teclado: foco visible con anillo desplazado ---------- */
body:is(.vj-home, .vj-page, .vj-legal) :is(main, footer) .wp-block-button .wp-element-button:focus-visible {
	outline: 2px solid var(--vb-bg);
	outline-offset: 3px;
}
/* En fondo oscuro el anillo es claro y, además, hay un filete interior
   (el foco no depende solo del color). */
body:is(.vj-home, .vj-page, .vj-legal) :is(.cta-band, .vp-ink, footer) .wp-block-button .wp-element-button:focus-visible {
	outline-color: #ffffff;
}

/* ---------- Estados: refuerzos sobre vj-nav.css ---------- */
body:is(.vj-home, .vj-page, .vj-legal) :is(main, footer) .wp-element-button:is(:disabled, [disabled], .is-disabled) {
	background-size: 0% 100%;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}
body:is(.vj-home, .vj-page, .vj-legal) :is(main, footer) .wp-element-button.is-loading {
	background-size: 100% 100%;
	color: var(--vb-bg);
}

/* ---------- Formulario de contacto (Jetpack) ---------- */
body:is(.vj-page, .vj-legal) .contact-form :is(button[type="submit"], .pushbutton-wide, .wp-block-jetpack-button .wp-block-button__link) {
	background-color: var(--vb-bg);
	background-image: linear-gradient(var(--vb-fg), var(--vb-fg));
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0% 100%;
	color: var(--vb-fg);
	border: 1px solid var(--vb-bg);
	position: relative;
	transition: background-size var(--vb-sweep) var(--vb-ease), color 240ms ease, transform 160ms var(--vb-ease);
}
body:is(.vj-page, .vj-legal) .contact-form :is(button[type="submit"], .pushbutton-wide, .wp-block-jetpack-button .wp-block-button__link)::after {
	content: "→";
	display: inline-block;
	margin-left: 0.8rem;
	transition: transform 260ms var(--vb-ease);
}
@media (hover: hover) and (pointer: fine) {
	body:is(.vj-page, .vj-legal) .contact-form :is(button[type="submit"], .pushbutton-wide, .wp-block-jetpack-button .wp-block-button__link):hover {
		background-color: var(--vb-bg);
		background-size: 100% 100%;
		color: var(--vb-bg);
	}
	body:is(.vj-page, .vj-legal) .contact-form :is(button[type="submit"], .pushbutton-wide, .wp-block-jetpack-button .wp-block-button__link):hover::after {
		transform: translateX(0.4rem);
	}
}
body:is(.vj-page, .vj-legal) .contact-form :is(button[type="submit"], .pushbutton-wide, .wp-block-jetpack-button .wp-block-button__link):active {
	transform: scale(0.985);
}
body:is(.vj-page, .vj-legal) .contact-form :is(button[type="submit"], .pushbutton-wide):focus-visible {
	outline: 3px solid var(--vb-bg);
	outline-offset: 4px;
}
/* Cargando (lo activa vj-btn.js al enviar): barra de progreso + spinner. */
body:is(.vj-page, .vj-legal) .contact-form .is-loading {
	pointer-events: none;
	background-size: 100% 100%;
	color: var(--vb-bg);
}
body:is(.vj-page, .vj-legal) .contact-form .is-loading::after {
	content: "";
	width: 0.9em;
	height: 0.9em;
	margin-left: 0.8rem;
	border: 1.5px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: vj-btn-spin 0.6s linear infinite;
}
/* Error: solo cuando el formulario muestra un error real; marcador y borde,
   no solo color. */
body:is(.vj-page, .vj-legal) .contact-form:has([aria-invalid="true"], .contact-form__error.show-errors, .form-error) :is(button[type="submit"], .pushbutton-wide) {
	border-style: dashed;
	border-color: #b3261e;
}

/* ---------- Galería de la portada: CTA y controles ---------- */
body.vj-home .vjg-cta {
	background-image: linear-gradient(var(--vb-bg), var(--vb-bg));
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0% 100%;
	transition: background-size var(--vb-sweep) var(--vb-ease), color 240ms ease, transform 160ms var(--vb-ease);
}
body.vj-home .vjg-cta:active,
body.vj-home .vjg-tab:active,
body.vj-home .vjg-pause:active {
	transform: translateY(1px) scale(0.985);
}
body.vj-home .vjg-pause {
	background-image: linear-gradient(var(--vb-bg), var(--vb-bg));
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0% 100%;
	transition: background-size var(--vb-sweep) var(--vb-ease), color 240ms ease, transform 160ms var(--vb-ease);
}
body.vj-home .vjg-pause[aria-pressed="true"] {
	background-size: 100% 100%;
	color: var(--vb-fg);
}
@media (hover: hover) and (pointer: fine) {
	body.vj-home .vjg-cta:hover {
		background-color: transparent;
		background-size: 100% 100%;
		color: var(--vb-fg);
	}
	body.vj-home .vjg-pause:hover {
		background-size: 100% 100%;
		color: var(--vb-fg);
	}
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
	body:is(.vj-home, .vj-page, .vj-legal) :is(main, footer) .wp-element-button,
	body:is(.vj-home, .vj-page, .vj-legal) :is(main, footer) .wp-element-button::after,
	body:is(.vj-page, .vj-legal) .contact-form :is(button, .pushbutton-wide, .wp-block-button__link),
	body:is(.vj-page, .vj-legal) .contact-form :is(button, .pushbutton-wide)::after,
	body.vj-home .vjg-cta,
	body.vj-home .vjg-pause {
		transition: none !important;
	}
	body:is(.vj-page, .vj-legal) .contact-form .is-loading::after { animation: none; }
}