/* Sistema de botones del sitio (22-sep-2026).
 *
 * QUÉ HAY AQUÍ
 *
 * Las tres variantes del artboard «Botones», aplicadas a los botones que ya
 * existían en las páginas interiores. No se ha renombrado ni una clase: esta
 * hoja engancha el sistema a los selectores que cada sección ya usaba, y por
 * eso se encola LA ÚLTIMA. Si se toca el orden en functions.php, esto deja de
 * mandar.
 *
 * LAS TRES VARIANTES
 *
 *   Principal  · caja pizarra, texto blanco, celda de flecha azul. Es la acción
 *                de la sección: una por pantalla.
 *   Secundario · caja ámbar, texto pizarra, celda de flecha pizarra. Alternativa
 *                a la principal, nunca dos juntas sin jerarquía.
 *   Terciario  · sin caja, texto en tinta y celda de 32px en gris nube. Salidas
 *                y acciones repetidas —una por tarjeta en un listado—.
 *
 * LA CELDA ES UN PSEUDOELEMENTO, no un <span>. Estos botones vienen de patterns
 * y de bloques de core que no se pueden envolver sin invalidar el marcado en el
 * editor, así que la celda se pinta con `::after`: el color lo da
 * `background-color` y la flecha va como `background-image`, un SVG en línea con
 * el trazo ya en el color que toca. Es la única forma de tener las dos capas en
 * un solo pseudoelemento; con `mask` habría que elegir entre el fondo y el icono.
 *
 * EL BOTÓN DE LOS FORMULARIOS NO LLEVA CELDA, salvo el de Contacto. Contact
 * Form 7 imprime un `<input type="submit">`, y un input no admite
 * pseudoelementos. En Contacto y en la ficha de promoción (28-sep-2026) la
 * celda y la flecha se pintan
 * como capas de fondo del propio input; ver el final de esta hoja.
 *
 * @package zaguan
 */

:root {
	--vis-btn-flecha-blanca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
}

/* --- Cuerpo común --------------------------------------------------------- */

.vis-promo__cta a,
.vis-promos__enlace a {
	position: relative;
	box-sizing: border-box;
	display: inline-flex;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0;
	width: auto;
	min-height: 52px;
	height: 52px;
	padding: 0 0 0 var(--wp--custom--space-5);
	font-size: var(--wp--preset--font-size--vis-mini);
	font-weight: var(--wp--custom--fw-semibold);
	letter-spacing: var(--wp--custom--tracking-nav);
	line-height: 52px;
	text-transform: uppercase;
	white-space: nowrap;
	text-decoration: none;
	border-radius: var(--wp--custom--radio);
	transition: background-color 520ms cubic-bezier(0.33, 1, 0.68, 1), color 520ms cubic-bezier(0.33, 1, 0.68, 1);
}

/* La celda: color de fondo propio y la flecha como imagen, ya en su color. */
.vis-promo__cta a::after,
.vis-promos__enlace a::after {
	content: "";
	align-self: stretch;
	flex: none;
	width: 52px;
	height: auto;
	margin-inline-start: var(--wp--custom--space-5);
	translate: none;
	background-color: var(--vis-btn-celda, var(--vis-acento, var(--wp--preset--color--vis-kit-azul-profundo)));
	background-image: var(--vis-btn-icono, var(--vis-btn-flecha-blanca));
	background-position: center;
	background-size: 18px 18px;
	background-repeat: no-repeat;
	transition: background-color 520ms cubic-bezier(0.33, 1, 0.68, 1);
}

/* --- Principal ------------------------------------------------------------ */

.vis-promo__cta a,
.vis-promos__enlace a {
	color: var(--wp--preset--color--vis-color-texto-inv);
	background-color: var(--wp--preset--color--vis-color-texto);
}

.vis-promo__cta a:hover,
.vis-promo__cta a:focus-visible,
.vis-promos__enlace a:hover,
.vis-promos__enlace a:focus-visible {
	color: var(--wp--preset--color--vis-color-texto-inv);
	background-color: var(--wp--preset--color--vis-kit-azul-profundo);
}

/* --- Secundario (26-oct-2026) ----------------------------------------------
   Caja ámbar, texto pizarra y celda pizarra con la flecha blanca, como manda
   la cabecera de esta hoja. Primer uso: «Contactar con Visocan» en la ficha
   de promoción, junto al envío del formulario, que es el principal. Al
   posarse entra la misma capa de acento que en el principal. */
html body .vis-promo__cta.vis-promo__cta--secundario a {
	--vis-btn-celda: var(--wp--preset--color--vis-color-texto);
	color: var(--wp--preset--color--vis-color-texto);
	background-color: var(--wp--preset--color--vis-vsc-amarillo);
}

/* --- Envío de los formularios --------------------------------------------- */

/* El principal oscuro. Gravity Forms imprime el envío como `<input type="submit">`
   hasta la 2.x y como `<button type="submit">` desde la 3.x (12-nov-2026, 3.2.2);
   el `:is()` cubre los dos con la misma especificidad. Su tema Orbital le da
   tipografía, ancho y sombra propios; el selector largo es para ganar a
   `.gform-theme--framework.gform-theme.gform_wrapper .button.gform_button`,
   que cuenta seis clases. Al posarse,
   el barrido del sistema rellena la caja desde la derecha (ver el final de
   esta hoja). */
html body .vis-contacto__formulario-hueco .gform_wrapper.gform-theme.gform-theme--framework .gform_footer :is(input[type="submit"], button[type="submit"]).gform_button {
	min-height: 52px;
	inline-size: auto;
	margin: 0;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--vis-mini);
	font-weight: var(--wp--custom--fw-semibold);
	letter-spacing: var(--wp--custom--tracking-nav);
	text-transform: uppercase;
	color: var(--wp--preset--color--vis-color-texto-inv);
	background-color: var(--wp--preset--color--vis-color-texto);
	border: 0;
	border-radius: var(--wp--custom--radio);
	box-shadow: none;
	cursor: pointer;
	transition: background-size 520ms cubic-bezier(0.33, 1, 0.68, 1);
}

@media (prefers-reduced-motion: reduce) {
	.vis-promo__cta a,
	.vis-promos__enlace a,
	html body .vis-contacto__formulario-hueco .gform_wrapper.gform-theme.gform-theme--framework .gform_footer :is(input[type="submit"], button[type="submit"]).gform_button {
		transition: none;
	}
}

/* --- Principal en blanco (23-sep-2026) -------------------------------------
   El mismo botón de «Cita previa» (vis-cta + vis-cta__boton, flecha morph en
   su celda azul) con la caja en blanco y el texto en pizarra. Es la versión
   para fondos de color o tinta, donde la caja pizarra se pierde: la columna
   roja de incidencias y la tarjeta del acuerdo de pago. Al posarse la caja
   pasa a pizarra con el texto en blanco. */
.vis-cta__boton--blanco .wp-block-button__link {
	color: var(--wp--preset--color--vis-color-texto);
	background-color: var(--wp--preset--color--vis-vsc-blanco);
}

.vis-cta__boton--blanco .wp-block-button__link:hover,
.vis-cta__boton--blanco .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--vis-color-texto-inv);
	background-color: var(--wp--preset--color--vis-color-texto);
}

/* --- Relleno deslizante y acento de página (23-sep-2026) --------------------
   Todos los botones del sitio llevan el gesto del principal de la portada:
   al posarse entra desde la derecha una capa del color de énfasis, con un
   desenfoque que se aclara durante el recorrido. En la portada esa capa es un
   <span> vacío (vis-boton__fondo); aquí no hay dónde ponerlo, porque son
   core/button y patterns que no admiten marcado extra sin invalidar el bloque,
   así que la capa es el `::before` del enlace, debajo del texto gracias a
   `isolation`. La celda de la flecha (`::after` o el SVG) queda por encima.

   El color de énfasis es el de cada página: `--vis-acento-texto`, que ya
   cambia por sección (rojo en Servicios y sus hijas, ámbar oscuro en
   Actualidad, petróleo en el resto). Se usa la variante «texto» y no
   `--vis-acento` porque el ámbar vivo de Actualidad no sostiene texto blanco.

   El prefijo `html body` iguala la especificidad de las reglas más largas de
   arriba (las del Portal del inquilino) para que el orden decida.

   Terciarios y formularios no tienen caja donde meter una capa: la celda de
   32px del terciario es un <span> o un SVG, y el envío de los formularios es
   un <input>, que no admite pseudoelementos. En los dos el relleno es un
   degradado de un solo color cuyo tamaño crece desde la derecha: el mismo
   recorrido, sin el desenfoque. */

/* Principal y secundario: la caja */
html body :is(
	.vis-cta .wp-block-button__link,
	.vis-promo__cta a,
	.vis-promos__enlace a,
	.vis-promos__mas-boton
) {
	--vis-btn-acento: var(--vis-acento-texto, var(--wp--preset--color--vis-kit-azul-profundo));
	--vis-btn-base: var(--wp--preset--color--vis-color-texto);
	--vis-btn-relleno: var(--vis-btn-acento);
	--vis-btn-celda: var(--vis-btn-acento);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	transition: color 520ms cubic-bezier(0.33, 1, 0.68, 1);
}

html body .vis-promos__mas-boton.vis-promos__mas-boton {
	--vis-btn-base: var(--wp--preset--color--vis-kit-tinta-calida, #24211F);
}

html body .vis-cta__boton--blanco .wp-block-button__link {
	--vis-btn-relleno: var(--wp--preset--color--vis-color-texto);
	--vis-btn-celda: var(--vis-btn-acento);
}

html body .vis-cta__boton--blanco .wp-block-button__link {
	--vis-btn-base: var(--wp--preset--color--vis-vsc-blanco);
}

html body :is(
	.vis-cta .wp-block-button__link,
	.vis-promo__cta a,
	.vis-promos__enlace a,
	.vis-promos__mas-boton
)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--vis-btn-relleno);
	transform: translateX(100%);
	filter: blur(6px);
	opacity: 0.85;
	pointer-events: none;
	transition: transform 520ms cubic-bezier(0.33, 1, 0.68, 1), filter 520ms cubic-bezier(0.33, 1, 0.68, 1), opacity 520ms cubic-bezier(0.33, 1, 0.68, 1);
}

/* Al posarse la caja NO cambia de color: lo que se ve es la capa entrando. */
html body :is(
	.vis-cta .wp-block-button__link,
	.vis-promo__cta a,
	.vis-promos__enlace a,
	.vis-promos__mas-boton
):is(:hover, :focus-visible) {
	color: var(--wp--preset--color--vis-color-texto-inv);
	background-color: var(--vis-btn-base);
}

html body :is(
	.vis-cta .wp-block-button__link,
	.vis-promo__cta a,
	.vis-promos__enlace a,
	.vis-promos__mas-boton
):is(:hover, :focus-visible)::before {
	transform: translateX(0);
	filter: blur(0);
	opacity: 1;
}

/* Celda de la flecha en el color de la página */
html body .vis-cta .vis-flecha {
	background-color: var(--vis-btn-celda);
}

html body :is(.vis-promo__cta a, .vis-promos__enlace a)::after {
	background-color: var(--vis-btn-celda);
}

/* Hero de la ficha de promoción (23-sep-2026, Feedbucket #995470): la celda
   de la flecha en el naranja teja, el de los cuadros y la etiqueta del hero. */
html body .vis-promo__cta.vis-promo__cta--hero a {
	--vis-btn-celda: var(--wp--preset--color--vis-vsc-naranja);
}

/* Actualidad (23-sep-2026, Feedbucket #995374): el acento de sección es el
   amarillo y su variante legible, el oro, vale para los textos pero no para la
   celda del botón de la cabecera, que salía ocre. El artboard «Noticia Video»
   la pinta en el rojo de acción, con la tinta en blanco. */
html body:is(.blog, .archive, .single-post) .vis-cta .wp-block-button__link {
	--vis-btn-acento: var(--wp--preset--color--vis-color-accion);
}

/* Principal de la portada: ya tiene su capa; solo toma el acento. */
.vis-boton:not(.vis-boton--secundario) :is(.vis-boton__fondo, .vis-boton__celda) {
	background-color: var(--vis-acento-texto, var(--wp--preset--color--vis-kit-azul-profundo));
}

/* Terciario: la celda se rellena desde la derecha */
html body .vis-terciario__celda {
	--vis-btn-acento: var(--vis-acento-texto, var(--wp--preset--color--vis-kit-azul-profundo));

	color: var(--vis-btn-acento);
	background-color: var(--wp--preset--color--vis-kit-gris-nube);
	background-image: linear-gradient(var(--vis-btn-acento), var(--vis-btn-acento));
	background-repeat: no-repeat;
	background-position: 100% 0;
	background-size: 0% 100%;
	transition: color 520ms cubic-bezier(0.33, 1, 0.68, 1), background-size 520ms cubic-bezier(0.33, 1, 0.68, 1);
}

html body :is(.vis-terciario:hover, .vis-terciario:focus-visible) .vis-terciario__celda {
	color: var(--wp--preset--color--vis-color-texto-inv);
	background-color: var(--wp--preset--color--vis-kit-gris-nube);
	background-size: 100% 100%;
}

html body :is(.vis-terciario:hover, .vis-terciario:focus-visible) {
	color: var(--vis-acento-texto, var(--wp--preset--color--vis-kit-azul-profundo));
}

@media (prefers-reduced-motion: reduce) {
	html body :is(
		.vis-cta .wp-block-button__link,
		.vis-promos__mas-boton
	)::before {
		filter: none;
		transition: none;
	}

	html body .vis-terciario__celda {
		transition: none;
	}
}
/* Acuerdo de pago del Portal (23-sep-2026): el botón blanco de la tarjeta
   oscura se rellena del acento de la página, no de pizarra. */
html body .vis-inquilino__acuerdo .vis-cta__boton--blanco .wp-block-button__link {
	--vis-btn-relleno: var(--vis-acento-texto);
}

/* Incidencias del Portal (23-sep-2026): sobre la columna roja, «Abrir
   formulario de incidencia» va con caja negra y la celda de la flecha en
   blanco; al posarse entra el blanco y el texto pasa a pizarra. Es el mismo
   tratamiento del botón de requisitos de Acceso. */
html body .vis-inquilino__incidencia-cuerpo .vis-cta__boton:not(.vis-cta__boton--blanco) .wp-block-button__link {
	--vis-btn-base: var(--wp--preset--color--vis-color-texto);
	--vis-btn-relleno: var(--wp--preset--color--vis-vsc-blanco);

	color: var(--wp--preset--color--vis-color-texto-inv);
	background-color: var(--wp--preset--color--vis-color-texto);
}

html body .vis-inquilino__incidencia-cuerpo .vis-cta__boton:not(.vis-cta__boton--blanco) .wp-block-button__link:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--vis-color-texto);
	background-color: var(--wp--preset--color--vis-color-texto);
}

html body .vis-inquilino__incidencia-cuerpo .vis-cta__boton:not(.vis-cta__boton--blanco) .vis-flecha {
	color: var(--vis-acento-texto);
	background-color: var(--wp--preset--color--vis-vsc-blanco);
}

/* Envío de los formularios (28-sep-2026): el principal completo, con la celda
   en azul y la flecha blanca. Como el input no admite ::after, la celda es una
   capa de fondo de 52 px a la derecha y la flecha otra encima; el relleno de la
   derecha deja sitio a las dos. Debajo sigue el barrido del sistema, que al
   posarse cubre la caja del mismo azul. Toda la superficie es el botón. */
html body .vis-contacto__formulario-hueco .gform_wrapper.gform-theme.gform-theme--framework .gform_footer :is(input[type="submit"], button[type="submit"]).gform_button {
	--vis-btn-acento: var(--wp--preset--color--vis-kit-azul-profundo);

	height: 52px;
	padding-block: 0;
	padding-inline: var(--wp--custom--space-5) calc(52px + var(--wp--custom--space-5));
	line-height: 52px;
	background-image:
		var(--vis-btn-flecha-blanca),
		linear-gradient(var(--vis-btn-acento), var(--vis-btn-acento)),
		linear-gradient(var(--vis-btn-acento), var(--vis-btn-acento));
	background-repeat: no-repeat;
	background-position: right 17px center, 100% 0, 100% 0;
	background-size: 18px 18px, 52px 100%, 0% 100%;
}

html body .vis-contacto__formulario-hueco .gform_wrapper.gform-theme.gform-theme--framework .gform_footer :is(input[type="submit"], button[type="submit"]).gform_button:is(:hover, :focus-visible) {
	background-size: 18px 18px, 52px 100%, 100% 100%;
}

/* --- Botones largos en el teléfono (9-nov-2026) ------------------------------
   `white-space: nowrap` y la altura fija de 52 px hacían que el rótulo largo
   fijara el ancho del botón: «Observatorio Canario de Vivienda» medía 386 px
   en una columna de 327 y la página de promociones se desplazaba de lado. En
   la ficha de promoción, «Solicitar información» marcaba el ancho mínimo de la
   rejilla del hero y a 320 px empujaba la foto 33 px fuera de la pantalla.

   En móvil el botón no pasa del ancho de su columna y el rótulo baja de línea
   si no cabe. La altura mínima sigue en 52 px y la celda de la flecha se
   estira con el botón, así que un botón de una línea se ve igual que antes. */
@media (max-width: 47.9375rem) {
	.vis-promo__cta a,
	.vis-promos__enlace a {
		max-inline-size: 100%;
		height: auto;
		align-items: center;
		line-height: 1.3;
		white-space: normal;
		text-align: start;
	}

	.vis-promo__cta a::after,
	.vis-promos__enlace a::after {
		align-self: stretch;
		min-height: 52px;
	}
}