/* Marca de Deiviator: lo que el marcado de bloques no puede expresar.

   Sin hex ni tamaños de fuente escritos a mano: todo sale de los tokens que publica
   deiviator-marca.php. Va detrás de la hoja del tema, y los empates se rompen por orden. */

:root {
	/* La cascada de motion.js entre tarjetas de una rejilla: 120 ms por defecto se hacía lento con ocho (David, 7-11-2026). */
	--deiviator-anim-stagger: 70ms;
	--deiviator-texto-control: 0.8125rem;
	--deiviator-texto-lectura: 1.0625rem;
	--deiviator-t-pulsar: 0.1s;
	--deiviator-t-rapida: 0.2s;
	--deiviator-t-media: 0.35s;
	--deiviator-t-lenta: 0.6s;
	--deiviator-radio-xs: 0.3125rem;
	--deiviator-radio-m: 0.75rem;
	--deiviator-radio-l: 1rem;
	--deiviator-radio-xl: 1.5rem;
	--deiviator-sombra-hover: 0 14px 30px rgb(0 0 0 / 0.12);
	--deiviator-sombra-foto: 0 24px 48px rgb(0 0 0 / 0.16);
	--deiviator-foco: var(--wp--preset--color--primary);
	--deiviator-radio-tarjeta: 2rem;
	/* Un icono con fondo, en círculo, como en la aplicación (David, 7-11-2026). */
	--deiviator-radio-plato: 50%;
	/* Bordes concéntricos: lo que va dentro de una tarjeta, cerca de su borde, tiene el radio de la tarjeta menos el margen que los separa. */
	--deiviator-margen-dentro: var(--wp--preset--spacing--10);
	--deiviator-radio-dentro: calc(var(--deiviator-radio-tarjeta) - var(--deiviator-margen-dentro));
	--deiviator-radio-dentro-xl: calc(var(--deiviator-radio-xl) - var(--deiviator-margen-dentro));
	/* Las tarjetas del formulario: el radio de su icono redondo más su margen. */
	--deiviator-radio-opcion: calc(1.125rem + 0.75rem);
	--deiviator-plato: 3.25rem;
	/* Las superficies oscuras (tarjetas, esquemas, teselas, la demo): un solo gris, el del panel de la demo, sin brillo coral. El degradado
	   de negro a coral desentonaba con él (David, 7-11-2026). */
	--deiviator-fondo-oscuro: color-mix(in srgb, var(--wp--preset--color--sobre-carbon) 11%, var(--wp--preset--color--carbon));
	/* El escenario de un producto dentro de una tarjeta oscura (el Booking Terminal, el móvil del Call Center): un punto más hondo y con
	   una luz blanca arriba, la misma en todos. */
	/* El coral como texto sobre ese gris: con un 20 % de blanco llega a 5,3:1 también en oscuro, donde el gris es más claro (el coral
	   puro se quedaba en 4,4:1). */
	--deiviator-coral-sobre-oscuro: color-mix(in srgb, #fff 20%, var(--wp--preset--color--coral));
	--deiviator-escenario: radial-gradient(70% 90% at 72% 0%, rgb(255 255 255 / 0.08), transparent 70%), color-mix(in srgb, #000 30%, var(--deiviator-fondo-oscuro));
}

/* 1. Logotipo ------------------------------------------------------------- */

.deiviator-logo {
	display: inline-flex;
	vertical-align: middle;
}

.deiviator-logo svg {
	display: block;
	height: 2.25rem;
	width: auto;
}

.wp-block-site-title a {
	text-decoration: none;
}

/* Enlace destacado de la cabecera: el botón principal, con su texto blanco (ver «Botones»). */
.wp-block-navigation .is-style-cta > .wp-block-navigation-item__content,
.wp-block-navigation .is-style-cta > .wp-block-navigation-item__content:hover,
.wp-block-navigation .is-style-cta > .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--sobre-cta);
}

/* 1b. Cabecera, cristal y megamenú -----------------------------------------
   Rescatados de la web anterior (referencia en assets/material-origen/menu/). Arriba del todo la
   cabecera es transparente y a todo el ancho. Al bajar se convierte en una barra flotante de cristal.
   La refracción real solo la pinta Chromium (ver cabecera.js); los demás se quedan con el desenfoque.

   1100px es deiviator_menu_breakpoint (contenido/ajustes.php): una consulta de medios no admite una
   propiedad personalizada. Si cambia allí, cambia aquí y en cabecera.js. */

:root {
	--deiviator-cabecera: 6.25rem;
	--deiviator-curva-barra-in: cubic-bezier(0.6, 0, 0.15, 1);
	--deiviator-curva-barra-out: cubic-bezier(0.8, 0, 0.14, 1);
	--deiviator-curva-mega: cubic-bezier(0.52, -0.01, 0, 1);
	--deiviator-cristal-brillo: 1.4;
	--deiviator-cristal-contraste: 0.8;
	--deiviator-cristal-brillo-svg: 1.2;
	--deiviator-cristal-contraste-svg: 1.05;
	--deiviator-cristal-tinte: var(--wp--preset--color--secondary-container);
}

:root[data-theme="dark"] {
	--deiviator-cristal-brillo: 0.8;
	--deiviator-cristal-contraste: 0.9;
	--deiviator-cristal-brillo-svg: 0.85;
	--deiviator-cristal-contraste-svg: 1;
	--deiviator-cristal-tinte: var(--wp--preset--color--surface);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--deiviator-cristal-brillo: 0.8;
		--deiviator-cristal-contraste: 0.9;
		--deiviator-cristal-brillo-svg: 0.85;
		--deiviator-cristal-contraste-svg: 1;
		--deiviator-cristal-tinte: var(--wp--preset--color--surface);
	}
}

/* El tema pinta la cabecera fija leyendo estas dos propiedades: aquí no pinta nada, lo hace la barra. */
body.wp-theme-deiviator,
body.deiviator-header-frosted {
	--deiviator-header-bg: transparent;
	--deiviator-header-filter: none;
}

.deiviator-header-bar {
	border: 3px solid transparent;
	border-radius: 0;
	box-sizing: border-box;
	height: var(--deiviator-cabecera);
	/* El marcado del tema trae su relleno en línea, y aquí la altura tiene que ser exacta: es lo que sube
	   la página por debajo. */
	padding-block: 0 !important;
	padding-inline: var(--wp--preset--spacing--30);
	position: relative;
	top: 0;
	transition:
		top 0.6s var(--deiviator-curva-barra-out),
		margin 0.6s var(--deiviator-curva-barra-out),
		border-radius 0.6s var(--deiviator-curva-barra-out),
		border-color 0.6s var(--deiviator-curva-barra-out),
		box-shadow 0.6s var(--deiviator-curva-barra-out),
		background 0.6s var(--deiviator-curva-barra-out);
}

.deiviator-header-bar > .wp-block-group {
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	height: 100%;
	max-width: none;
}

/* Sobre un hero, la página sube por debajo de la cabecera. */
.deiviator-sobre-hero main {
	margin-top: calc(-1 * var(--deiviator-cabecera));
}

@media (min-width: 1100px) {
	html.deiviator-scrolled:not(.deiviator-menu-open) .deiviator-header-bar {
		background: linear-gradient(
			color-mix(in srgb, var(--wp--preset--color--surface) 30%, transparent) 0%,
			color-mix(in srgb, var(--wp--preset--color--surface) 50%, transparent) 8%,
			color-mix(in srgb, var(--deiviator-cristal-tinte) 50%, transparent) 92%,
			color-mix(in srgb, var(--deiviator-cristal-tinte) 30%, transparent) 100%
		);
		-webkit-backdrop-filter: brightness(var(--deiviator-cristal-brillo)) contrast(var(--deiviator-cristal-contraste)) blur(8px);
		backdrop-filter: brightness(var(--deiviator-cristal-brillo)) contrast(var(--deiviator-cristal-contraste)) blur(8px);
		border: 2px solid color-mix(in srgb, var(--wp--preset--color--surface) 75%, transparent);
		border-radius: 20px;
		box-shadow:
			0 15px 30px color-mix(in srgb, #000 15%, transparent),
			inset 0 0 20px color-mix(in srgb, var(--wp--preset--color--surface-container-high) 60%, transparent);
		margin-inline: 15px;
		top: 15px;
		transition-duration: 0.4s;
		transition-timing-function: var(--deiviator-curva-barra-in);
	}

	html.deiviator-cristal-svg.deiviator-scrolled:not(.deiviator-menu-open) .deiviator-header-bar {
		backdrop-filter: url(#deiviator-refraccion) brightness(var(--deiviator-cristal-brillo-svg)) contrast(var(--deiviator-cristal-contraste-svg)) blur(3px);
	}

	/* Los rótulos en el centro, y Acceso y Demo a la derecha. */
	.deiviator-header-bar .wp-block-navigation {
		flex: 1;
		min-width: 0;
	}

	.deiviator-header-bar .wp-block-navigation__container {
		align-items: center;
		gap: var(--wp--preset--spacing--30);
		justify-content: flex-start;
		width: 100%;
	}

	.deiviator-header-bar .wp-block-navigation__container > li:first-child {
		margin-inline-start: auto;
	}

	.deiviator-header-bar .wp-block-navigation__container > .deiviator-acceso {
		margin-inline-start: auto;
	}

	/* Dos botones juntos van a 5 px, no a la separación de los rótulos. */
	.deiviator-header-bar .wp-block-navigation__container > .is-style-cta {
		margin-inline-start: calc(0.3125rem - var(--wp--preset--spacing--30));
	}
}

@media (max-width: 1099.98px) {
	html.deiviator-scrolled:not(.deiviator-menu-open) .deiviator-header-bar {
		background: color-mix(in srgb, var(--wp--preset--color--surface) 80%, transparent);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}
}

.deiviator-menu-icono {
	color: var(--wp--preset--color--coral);
	display: inline-flex;
	font-size: 1.25em;
}

/* Botón «Demo» y botón «Acceso». */
.is-style-cta .deiviator-menu-icono {
	color: inherit;
}

.wp-block-navigation .is-style-cta > .wp-block-navigation-item__content {
	align-items: center;
	border-radius: var(--deiviator-boton-radio);
	display: inline-flex;
	gap: 0.375rem;
}

/* En la cabecera, el tamaño lg del producto: 40 px. El fondo, el anillo y el texto son los del secundario (ver «Botones»): la cabecera
   ya es vidrio, así que va opaco. */
.deiviator-header-bar .wp-block-navigation .is-style-cta > .wp-block-navigation-item__content,
.deiviator-header-bar .deiviator-acceso > .wp-block-navigation-item__content {
	align-items: center;
	border-radius: var(--deiviator-boton-radio);
	box-sizing: border-box;
	display: inline-flex;
	gap: 0.375rem;
	line-height: 1.25rem;
	min-height: 2.5rem;
	padding: 0.625rem 0.875rem;
}

.deiviator-header-bar .deiviator-acceso > .wp-block-navigation-item__content::after {
	display: none;
}

.deiviator-acceso .deiviator-menu-icono {
	/* El icono del secundario, gris 500, como en el panel. */
	color: var(--wp--preset--color--outline);
	order: 1;
}

/* El megamenú: es el desplegable del core, y su estado sigue siendo del core. Aquí se le da cuerpo:
   tarjeta centrada en la barra, con una zona blanca y otra gris, y la caída en 3D de la web anterior.
   Los selectores llevan .deiviator-header-bar: el panel del menú móvil es una copia que no se toca. */

.deiviator-header-bar .wp-block-navigation,
.deiviator-header-bar .wp-block-navigation__container,
.deiviator-header-bar .wp-block-navigation .has-child {
	position: static;
}

.deiviator-header-bar .wp-block-navigation:not(.deiviator-menu__nav *) .has-child .wp-block-navigation__submenu-container {
	--deiviator-mega-ancho: min(65rem, calc(100vw - 4rem));
	--deiviator-mega-corte: 56%;
	background: linear-gradient(
		to right,
		var(--wp--preset--color--surface) var(--deiviator-mega-corte),
		var(--wp--preset--color--surface-container) var(--deiviator-mega-corte)
	);
	border: 0;
	border-radius: 20px;
	box-shadow: 0 15px 30px color-mix(in srgb, #000 15%, transparent);
	display: grid;
	filter: blur(4px) brightness(70%);
	grid-auto-flow: row dense;
	grid-template-columns: var(--deiviator-mega-corte) calc(100% - var(--deiviator-mega-corte));
	height: auto;
	left: 50%;
	margin-inline-start: calc(var(--deiviator-mega-ancho) / -2);
	margin-top: 0;
	opacity: 0;
	overflow: visible;
	padding: var(--wp--preset--spacing--30) 0;
	right: auto;
	row-gap: var(--wp--preset--spacing--10);
	top: calc(100% + 0.25rem);
	transform: perspective(1200px) scale(0.7) translateY(-20%) rotateX(-20deg);
	transform-origin: top center;
	transition:
		transform 0.4s var(--deiviator-curva-mega),
		filter 0.4s var(--deiviator-curva-mega),
		opacity 0.2s ease-out,
		visibility 0s linear 0.4s;
	visibility: hidden;
	width: var(--deiviator-mega-ancho);
}

.deiviator-header-bar .wp-block-navigation:not(.deiviator-menu__nav *) .deiviator-mega--estrecho.has-child .wp-block-navigation__submenu-container {
	--deiviator-mega-ancho: min(40rem, calc(100vw - 4rem));
}

.deiviator-header-bar .wp-block-navigation:not(.deiviator-menu__nav *) .deiviator-mega--triple.has-child .wp-block-navigation__submenu-container {
	--deiviator-mega-ancho: min(74rem, calc(100vw - 4rem));
	--deiviator-mega-corte: 68%;
	grid-template-columns: 34% 34% 32%;
}

/* Se abre al pasar por encima o cuando el core lo marca abierto (clic, teclado). El foco dentro solo cuenta sin JS: con él, el core ya lleva la
   cuenta, y el foco que se quedaba en la flecha tras un clic lo dejaba abierto mientras se pasaba a otro enlace. */
.deiviator-header-bar .wp-block-navigation:not(.deiviator-menu__nav *) .has-child:hover > .wp-block-navigation__submenu-container,
html:not(.deiviator-js) .deiviator-header-bar .wp-block-navigation:not(.deiviator-menu__nav *) .has-child:focus-within > .wp-block-navigation__submenu-container,
.deiviator-header-bar .wp-block-navigation:not(.deiviator-menu__nav *) .has-child > [aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	filter: blur(0) brightness(100%);
	opacity: 1;
	transform: perspective(1200px) scale(1) translateY(0) rotateX(0deg);
	transition:
		transform 0.4s var(--deiviator-curva-mega),
		filter 0.4s var(--deiviator-curva-mega),
		opacity 0.2s ease-out,
		visibility 0s;
	visibility: visible;
}

/* Los enlaces de la barra, por encima de los paneles. El panel cae desde arriba y durante su animación tapaba los enlaces vecinos: el puntero
   sobre «Funcionalidades» estaba en realidad sobre el panel de Recursos, que no se cerraba. */
.deiviator-header-bar .wp-block-navigation:not(.deiviator-menu__nav *) .wp-block-navigation__container > li > .wp-block-navigation-item__content,
.deiviator-header-bar .wp-block-navigation:not(.deiviator-menu__nav *) .wp-block-navigation__container > li > .wp-block-navigation-submenu__toggle {
	position: relative;
	z-index: 3;
}

/* Puente sobre el hueco hasta el panel: el core cierra al salir del <li>, y sin esto se cerraría al cruzarlo. Solo del ancho del enlace y su flecha,
   y solo mientras está encima: el de antes ocupaba todo el ancho del panel y se montaba sobre los vecinos. Lo mide cabecera.js; sin JS, 2,5 rem. */
.deiviator-header-bar .wp-block-navigation:not(.deiviator-menu__nav *) .wp-block-navigation__container > .has-child:hover > .wp-block-navigation-item__content::before {
	content: "";
	height: var(--deiviator-puente-alto, 2.5rem);
	inset-inline: 0 calc(-1 * var(--deiviator-puente-fin, 1rem));
	position: absolute;
	top: 100%;
}

/* El puente del tema, sobre el panel y de todo su ancho: aquí ya lo hace el del enlace, y este también se montaba sobre la barra. */
.deiviator-header-bar .wp-block-navigation:not(.deiviator-menu__nav *) .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container::before {
	content: none;
}

/* Uno solo a la vez: con el puntero sobre un enlace de la barra, los demás paneles se van ya, sin esperar a su animación de cierre. Y el que se ha
   cerrado con Esc sigue cerrado aunque el puntero esté encima, hasta que salga (cabecera.js). */
.deiviator-header-bar .wp-block-navigation:not(.deiviator-menu__nav *) .wp-block-navigation__container:has(> li:hover) > .has-child:not(:hover) > .wp-block-navigation__submenu-container,
.deiviator-header-bar .wp-block-navigation:not(.deiviator-menu__nav *) .wp-block-navigation__container > .has-child.deiviator-mega-quieto > .wp-block-navigation__submenu-container {
	filter: blur(4px) brightness(70%);
	opacity: 0;
	pointer-events: none;
	transform: perspective(1200px) scale(0.7) translateY(-20%) rotateX(-20deg);
	transition: none;
	visibility: hidden;
}

/* Al pasar de un desplegable abierto a otro, el nuevo no vuelve a caer en 3D: aparece en su sitio. La caída es para abrir el menú, no para
   cambiar de pestaña. */
.deiviator-header-bar .wp-block-navigation:not(.deiviator-menu__nav *) .wp-block-navigation__container[data-mega-cambio] > .has-child:hover > .wp-block-navigation__submenu-container {
	filter: none;
	transform: perspective(1200px) scale(1) translateY(0) rotateX(0deg);
	transition: opacity var(--deiviator-t-rapida) var(--deiviator-ease-effect), visibility 0s;
}

.deiviator-header-bar .deiviator-mega--triple > .wp-block-navigation__submenu-container {
	--deiviator-mega-corte: 68%;
	--deiviator-mega-ancho: min(74rem, calc(100vw - 4rem));
	grid-template-columns: 34% 34% 32%;
}

.deiviator-header-bar .deiviator-mega--triple > .wp-block-navigation__submenu-container > li:nth-child(even) {
	grid-column: 2;
}

.deiviator-header-bar .deiviator-mega--triple > .wp-block-navigation__submenu-container > li.deiviator-mega__lateral {
	grid-column: 3;
}

.deiviator-header-bar .wp-block-navigation__submenu-container > li {
	grid-column: 1;
	padding-inline: var(--wp--preset--spacing--20);
}

.deiviator-header-bar .wp-block-navigation__submenu-container > .deiviator-mega__lateral {
	grid-column: 2;
}

.deiviator-header-bar .wp-block-navigation:not(.deiviator-menu__nav *) .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	align-items: center;
	border-radius: 0.75rem;
	column-gap: var(--wp--preset--spacing--20);
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr);
	padding: var(--wp--preset--spacing--20);
	white-space: normal;
	width: 100%;
}

.deiviator-header-bar .wp-block-navigation__submenu-container .deiviator-menu-icono {
	font-size: var(--wp--preset--font-size--x-large);
	grid-row: span 2;
}

.deiviator-header-bar .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	grid-column: 2;
	line-height: 1.2;
}

.deiviator-header-bar .wp-block-navigation__submenu-container .wp-block-navigation-item__description {
	color: var(--wp--preset--color--on-surface-variant);
	display: block;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	grid-column: 2;
	line-height: 1.35;
	margin-top: 0.15rem;
}

.deiviator-header-bar .deiviator-mega--estrecho .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
	font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
	.deiviator-header-bar .wp-block-navigation:not(.deiviator-menu__nav *) .has-child .wp-block-navigation__submenu-container {
		filter: none;
		transform: none;
	}

	.deiviator-header-bar {
		transition: none;
	}
}

/* En el panel móvil, la descripción sobra: es una lista corta. */
.deiviator-menu__nav .wp-block-navigation-item__description {
	display: none;
}

.deiviator-menu__nav .deiviator-menu-icono {
	margin-inline-end: 0.5em;
	vertical-align: middle;
}

.deiviator-menu__nav .deiviator-acceso .deiviator-menu-icono {
	display: none;
}

/* En el panel, «Demo» sigue siendo el botón principal: coral, con icono y a la medida del dedo. Heredaba el fondo de
   botón sin su relleno, y se quedaba en 17 px de alto. */
.deiviator-menu__nav .is-style-cta .deiviator-menu-icono {
	margin-inline-end: 0;
}

.deiviator-menu__nav .wp-block-navigation .is-style-cta {
	margin-top: var(--wp--preset--spacing--20);
}

.deiviator-menu__nav .wp-block-navigation .is-style-cta > .wp-block-navigation-item__content {
	align-items: center;
	box-sizing: border-box;
	display: inline-flex;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.75rem 1rem;
}

/* Selector de idioma. */
.deiviator-idioma {
	position: relative;
}

.deiviator-idioma__boton {
	align-items: center;
	background: none;
	border: 0;
	color: var(--wp--preset--color--on-surface);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	gap: 0.4em;
	padding: 0.5rem;
}

.deiviator-idioma__bandera {
	border-radius: 2px;
	display: block;
	height: 0.75rem;
	width: 1rem;
}

/* En móvil, el selector va en el pie del panel: en la barra no cabe y sobra. */
@media (max-width: 1099.98px) {
	.deiviator-header-bar .deiviator-idioma {
		display: none;
	}
}

.deiviator-idioma__panel p {
	color: var(--wp--preset--color--on-surface-variant);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	margin: 0;
	padding: 0.35rem 0.75rem 0.25rem;
}

.deiviator-idioma ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.deiviator-idioma__panel {
	background: var(--wp--preset--color--surface);
	border-radius: 0.75rem;
	box-shadow: 0 10px 24px color-mix(in srgb, #000 15%, transparent);
	margin: 0;
	min-width: 15rem;
	opacity: 0;
	padding: 0.35rem;
	position: absolute;
	right: 0;
	top: 100%;
	white-space: nowrap;
	z-index: 5;
	transform: perspective(600px) scale(0.85) translateY(-10%) rotateX(-20deg);
	transform-origin: top center;
	transition: transform 0.3s var(--deiviator-curva-mega), opacity 0.15s ease-out, visibility 0s linear 0.3s;
	visibility: hidden;
}

.deiviator-idioma:hover .deiviator-idioma__panel,
.deiviator-idioma:focus-within .deiviator-idioma__panel,
.deiviator-idioma[data-abierto] .deiviator-idioma__panel {
	opacity: 1;
	transform: none;
	transition-delay: 0s;
	visibility: visible;
}

.deiviator-idioma a {
	align-items: center;
	border-radius: 0.5rem;
	color: var(--wp--preset--color--on-surface);
	display: inline-flex;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	gap: 0.4em;
	padding: 0.5rem 0.75rem;
	text-decoration: none;
}

.deiviator-idioma a:hover,
.deiviator-idioma a:focus-visible {
	background: var(--wp--preset--color--surface-container);
}

.deiviator-menu .deiviator-idioma__panel {
	bottom: 100%;
	left: 0;
	right: auto;
	top: auto;
}

/* 2. Antetítulo ----------------------------------------------------------- */

.deiviator-antetitulo {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	margin-bottom: var(--wp--preset--spacing--20);
}

/* 3. Hero de página -------------------------------------------------------- */

.deiviator-hero {
	padding-top: calc(var(--deiviator-cabecera) + var(--wp--preset--spacing--60)) !important;
	background: radial-gradient(90% 75% at 50% 0%, color-mix(in srgb, var(--wp--preset--color--coral) 24%, transparent), transparent 75%);
}

.deiviator-hero {
	padding-bottom: var(--wp--preset--spacing--50);
}

.deiviator-hero h1 {
	max-width: 18ch;
}

.deiviator-hero__texto {
	color: var(--wp--preset--color--on-surface-variant);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	max-width: 44ch;
}

/* 4. Esquema de uso --------------------------------------------------------
   Una tarjeta oscura con el recorrido de un sector: quién hace qué, en orden y con qué pieza.
   Son columnas del core con texto de verdad, así que se traduce y se recoloca. Hasta 960 px se
   lee en fila, con una línea coral de plato a plato; por debajo, en vertical. */

.deiviator-esquema {
	background: var(--deiviator-fondo-oscuro);
	border-radius: var(--deiviator-radio-tarjeta);
	color: var(--wp--preset--color--sobre-carbon);
	padding: var(--wp--preset--spacing--50);
}

.deiviator-esquema .deiviator-antetitulo,
.deiviator-esquema__quien {
	color: var(--deiviator-coral-sobre-oscuro);
}

.deiviator-esquema h2 {
	color: var(--wp--preset--color--sobre-carbon);
	max-width: 20ch;
}

.deiviator-esquema__intro {
	color: var(--wp--preset--color--sobre-carbon-2);
	/* La entradilla de sección, como fuera del esquema. */
	font-size: var(--wp--preset--font-size--large);
	margin-top: var(--wp--preset--spacing--20);
	max-width: 56ch;
}

.wp-block-columns.deiviator-esquema__pasos {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: var(--wp--preset--spacing--50);
}

.wp-block-column.deiviator-esquema__paso {
	display: flex;
	flex-direction: column;
	min-width: 0;
	position: relative;
}

.deiviator-esquema__icono {
	align-items: center;
	background: color-mix(in srgb, var(--wp--preset--color--coral) 14%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--coral) 40%, transparent);
	border-radius: var(--deiviator-radio-plato);
	color: var(--wp--preset--color--coral);
	display: flex;
	font-size: var(--wp--preset--font-size--x-large);
	height: var(--deiviator-plato);
	justify-content: center;
	position: relative;
	width: var(--deiviator-plato);
	z-index: 1;
}

svg.deiviator-icono {
	display: block;
	height: 1em;
	width: 1em;
}

/* La línea que une un plato con el siguiente. */
.deiviator-esquema__paso:not(:last-child)::after {
	background: linear-gradient(to right, var(--wp--preset--color--coral), color-mix(in srgb, var(--wp--preset--color--coral) 25%, transparent));
	content: "";
	height: 2px;
	left: var(--deiviator-plato);
	position: absolute;
	right: calc(-1 * var(--wp--preset--spacing--40));
	top: calc(var(--deiviator-plato) / 2 - 1px);
}

.deiviator-esquema__quien {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	margin: var(--wp--preset--spacing--30) 0 0;
}

.deiviator-esquema__paso h3 {
	color: var(--wp--preset--color--sobre-carbon);
	font-size: var(--wp--preset--font-size--large);
	margin: var(--wp--preset--spacing--10) 0 0;
}

.deiviator-esquema__paso ul {
	color: var(--wp--preset--color--sobre-carbon-2);
	flex: 1;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	list-style: none;
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: 0;
}

.deiviator-esquema__paso li + li {
	margin-top: var(--wp--preset--spacing--10);
}

.deiviator-esquema__pieza {
	align-self: flex-start;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--sobre-carbon) 25%, transparent);
	border-radius: 999px;
	color: var(--wp--preset--color--sobre-carbon);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0.35em 0.9em;
}

@media (max-width: 960px) {
	.deiviator-esquema {
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	}

	.wp-block-columns.deiviator-esquema__pasos {
		gap: var(--wp--preset--spacing--40);
		grid-template-columns: minmax(0, 1fr);
	}

	.wp-block-column.deiviator-esquema__paso {
		padding-left: calc(var(--deiviator-plato) + var(--wp--preset--spacing--30));
	}

	.deiviator-esquema__icono {
		left: 0;
		position: absolute;
		top: 0;
	}

	.deiviator-esquema__quien {
		margin-top: 0;
	}

	.deiviator-esquema__paso:not(:last-child)::after {
		background: linear-gradient(to bottom, var(--wp--preset--color--coral), color-mix(in srgb, var(--wp--preset--color--coral) 25%, transparent));
		bottom: calc(-1 * var(--wp--preset--spacing--40));
		height: auto;
		left: calc(var(--deiviator-plato) / 2 - 1px);
		right: auto;
		top: var(--deiviator-plato);
		width: 2px;
	}
}

/* 5. Secciones, rejillas y tarjetas ---------------------------------------- */

.deiviator-seccion {
	padding-block: var(--wp--preset--spacing--60);
}

.deiviator-seccion__interior > h2 {
	max-width: 22ch;
}

.deiviator-seccion__intro {
	color: var(--wp--preset--color--on-surface-variant);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
	margin-top: var(--wp--preset--spacing--20);
	max-width: 48ch;
}

.deiviator-hero--centrado {
	text-align: center;
}

.deiviator-hero--centrado .deiviator-hero__interior {
	align-items: center;
	display: flex;
	flex-direction: column;
}

.deiviator-hero--centrado h1 {
	max-width: none;
}

.deiviator-hero--centrado .wp-block-buttons {
	justify-content: center;
}

.deiviator-hero--documento {
	padding-block: calc(var(--deiviator-cabecera) + var(--wp--preset--spacing--50)) var(--wp--preset--spacing--40);
}

.deiviator-hero--documento .wp-block-post-title {
	text-wrap: balance;
}

.deiviator-documento {
	overflow-wrap: anywhere;
	padding-bottom: var(--wp--preset--spacing--60);
}

.deiviator-documento .wp-block-table {
	overflow-x: auto;
}

.deiviator-documento .wp-block-table table {
	font-size: var(--wp--preset--font-size--small);
	min-width: 32rem;
}

.deiviator-documento .wp-block-table td,
.deiviator-documento .wp-block-table th {
	overflow-wrap: normal;
	vertical-align: top;
}

.deiviator-rejilla > * {
	margin-block: 0;
}

.deiviator-rejilla {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	grid-template-columns: repeat(var(--deiviator-rejilla-columnas, 3), minmax(0, 1fr));
	margin-top: var(--wp--preset--spacing--40);
}

.deiviator-rejilla--2 {
	--deiviator-rejilla-columnas: 2;
}

.deiviator-rejilla--4 {
	--deiviator-rejilla-columnas: 4;
}

@media (max-width: 960px) {
	.deiviator-rejilla {
		--deiviator-rejilla-columnas: 2;
	}
}

@media (max-width: 620px) {
	.deiviator-rejilla {
		--deiviator-rejilla-columnas: 1;
	}
}

/* Lo que queda suelto al final de una rejilla ocupa el hueco. Solo donde la rejilla tiene esas columnas:
   con menos, «span 2» crearía una columna de más y la página se desbordaría. */
@media (min-width: 961px) {
	.deiviator-rejilla--2 > :last-child:nth-child(odd),
	.deiviator-rejilla:not(.deiviator-rejilla--1, .deiviator-rejilla--2, .deiviator-rejilla--4, .deiviator-rejilla--7-5) > :last-child:nth-child(3n + 1) {
		grid-column: 1 / -1;
	}

	.deiviator-rejilla:not(.deiviator-rejilla--1, .deiviator-rejilla--2, .deiviator-rejilla--4, .deiviator-rejilla--7-5) > :last-child:nth-child(3n + 2) {
		grid-column: span 2;
	}
}

.deiviator-tarjeta {
	background: var(--wp--preset--color--surface-container-low);
	border-radius: var(--deiviator-radio-xl);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	min-width: 0;
	padding: var(--wp--preset--spacing--40);
}

.deiviator-tarjeta > * {
	margin-block: 0;
}

.deiviator-tarjeta h2,
.deiviator-tarjeta h3 {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.15;
}

.deiviator-tarjeta p {
	color: var(--wp--preset--color--on-surface-variant);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.deiviator-tarjeta--oscura {
	background: var(--deiviator-fondo-oscuro);
	color: var(--wp--preset--color--sobre-carbon);
}

.deiviator-tarjeta--oscura h2,
.deiviator-tarjeta--oscura h3 {
	/* El tamaño, el de cualquier tarjeta (large): una sola medida para el título de tarjeta (David, 8-11-2026). */
	color: var(--wp--preset--color--sobre-carbon);
}

.deiviator-tarjeta--oscura p {
	color: var(--wp--preset--color--sobre-carbon-2);
}

.deiviator-tarjeta__icono {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--x-large);
	margin-bottom: var(--wp--preset--spacing--10);
}

.deiviator-tarjeta--oscura .deiviator-tarjeta__icono {
	color: var(--wp--preset--color--coral);
}

.deiviator-tarjeta__flujo {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--20);
}

.deiviator-tarjeta--oscura p.deiviator-tarjeta__flujo {
	color: var(--wp--preset--color--coral);
	font-weight: 500;
}

a.deiviator-enlace-flecha,
p.deiviator-enlace-flecha a {
	font-weight: 600;
}

.deiviator-tarjeta--oscura a {
	color: var(--wp--preset--color--sobre-carbon);
}

a.deiviator-enlace-flecha::after,
p.deiviator-enlace-flecha a::after {
	content: " →";
}

/* Preguntas frecuentes. */
.deiviator-faq {
	display: grid;
	gap: var(--wp--preset--spacing--10);
	margin-top: var(--wp--preset--spacing--30);
}

.deiviator-faq .wp-block-details {
	background: var(--wp--preset--color--surface-container-low);
	border-radius: var(--deiviator-radio-l);
	/* La separación la da el «gap» de la rejilla: el margen del flujo la duplicaba. */
	margin-block: 0;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

.deiviator-faq summary {
	cursor: pointer;
	font-weight: 600;
}

.deiviator-faq .wp-block-details p {
	color: var(--wp--preset--color--on-surface-variant);
	margin-top: var(--wp--preset--spacing--10);
}

.deiviator-faq-seccion {
	scroll-margin-top: calc(var(--deiviator-cabecera) + 2rem);
}

/* Bloque de sector en Producto: el ancla baja por debajo de la barra. */
[id] {
	scroll-margin-top: calc(var(--deiviator-cabecera) + 1.5rem);
}

/* Tablas de precios. */
.deiviator-plan {
	gap: var(--wp--preset--spacing--20);
}

.deiviator-plan__precio {
	color: var(--wp--preset--color--on-surface);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 600;
	line-height: 1;
}

.deiviator-tarjeta p.deiviator-plan__precio {
	color: var(--wp--preset--color--on-surface);
	font-size: var(--wp--preset--font-size--xx-large);
}

.deiviator-plan__precio small {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}

.deiviator-plan__borroso {
	display: inline-block;
	filter: blur(0.18em);
	user-select: none;
}

.deiviator-plan__precio s {
	color: var(--wp--preset--color--on-surface-variant);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	margin-top: 0.5rem;
}

.deiviator-tarjeta.deiviator-plan ul {
	color: var(--wp--preset--color--on-surface-variant);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	list-style: none;
	margin: 0;
	padding: 0;
}

.deiviator-plan li + li {
	margin-top: 0.35rem;
}

.deiviator-plan li.deiviator-plan__extra {
	border-top: 1px solid var(--wp--preset--color--outline-variant);
	margin-top: var(--wp--preset--spacing--20);
	padding-top: var(--wp--preset--spacing--20);
}

/* Calculadora. */
.deiviator-calculadora {
	align-items: stretch;
	background: var(--wp--preset--color--surface-container-low);
	border-radius: var(--deiviator-radio-xl);
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	margin-top: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
}

.deiviator-calculadora[hidden] {
	display: none;
}

.deiviator-calculadora__campos {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.deiviator-calculadora__resultado {
	background: var(--deiviator-fondo-oscuro);
	border-radius: var(--deiviator-radio-l);
	color: var(--wp--preset--color--sobre-carbon);
	padding: var(--wp--preset--spacing--30);
}

.deiviator-calculadora__resultado .deiviator-antetitulo {
	color: var(--deiviator-coral-sobre-oscuro);
}

.deiviator-calculadora__plan {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	margin: 0;
}

.deiviator-calculadora__total {
	font-size: var(--wp--preset--font-size--xxx-large);
	font-weight: 600;
	line-height: 1.1;
	margin: var(--wp--preset--spacing--10) 0 0;
}

.deiviator-calculadora .deiviator-calculadora__total small {
	color: var(--wp--preset--color--sobre-carbon-2);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
}

@media (max-width: 781px) {
	.deiviator-calculadora {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* 6. Formularios ------------------------------------------------------------ */

.deiviator-hueco-demo {
	margin-block: 0;
}

.deiviator-form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.deiviator-form p {
	margin: 0;
}

.deiviator-form__trampa {
	height: 0;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 0;
}

.deiviator-form__aviso {
	background: color-mix(in srgb, var(--wp--preset--color--coral) 18%, transparent);
	border-radius: var(--deiviator-radio-m);
	padding: var(--wp--preset--spacing--20);
}

.deiviator-campo label {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	margin-bottom: 0.35rem;
}

.deiviator-campo input:not([type="checkbox"]) {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: var(--deiviator-boton-radio);
	box-sizing: border-box;
	color: var(--wp--preset--color--on-surface);
	font: inherit;
	padding: 0.75rem 0.9rem;
	width: 100%;
}

.deiviator-campo--check label {
	font-weight: 400;
}

.deiviator-form .wp-element-button {
	border: 0;
	border-radius: var(--deiviator-boton-radio);
	cursor: pointer;
	font: inherit;
	font-weight: 500;
}

/* 7. Pie -------------------------------------------------------------------- */

.deiviator-pie-columna h2 {
	color: var(--wp--preset--color--on-surface);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	margin: 0 0 var(--wp--preset--spacing--20);
}

.deiviator-pie-columna ul {
	color: var(--wp--preset--color--on-surface-variant);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	list-style: none;
	margin: 0;
	padding: 0;
}

.deiviator-pie-columna li + li {
	margin-top: 0.5rem;
}

.deiviator-pie-columna a,
.deiviator-pie-legal a {
	color: inherit;
	text-decoration: none;
}

.deiviator-pie-columna a:hover,
.deiviator-pie-legal a:hover {
	text-decoration: underline;
}

.deiviator-pie-lema {
	color: var(--wp--preset--color--on-surface-variant);
	font-size: var(--wp--preset--font-size--small);
	max-width: 36ch;
}

.deiviator-pie-legal {
	color: var(--wp--preset--color--on-surface-variant);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--x-small);
	gap: 0.25rem 1rem;
	margin: 0;
}

/* El tema empuja las herramientas a la derecha con un margen que pierde contra el core. */
.deiviator-footer-bar {
	gap: var(--wp--preset--spacing--30);
	justify-content: space-between;
}

.deiviator-footer-bar > .deiviator-footer-tools {
	margin-inline-start: auto;
}

/* 8. La banda oscura de las páginas del tema -----------------------------------
   Blog, categorías y entradas. El tema la pinta con inverse-surface, que en oscuro se vuelve claro:
   la banda sale clara y la foto lavada. Aquí va en carbón en los dos esquemas. */

.deiviator-page-header,
.deiviator-page-header .wp-block-cover {
	background-color: var(--wp--preset--color--carbon) !important;
	color: var(--wp--preset--color--sobre-carbon) !important;
}

.deiviator-page-header .wp-block-cover__background {
	background-color: var(--wp--preset--color--carbon) !important;
}

.deiviator-page-header a:not(.deiviator-chip a) {
	color: var(--wp--preset--color--sobre-carbon) !important;
}

/* 9. Las piezas en móvil --------------------------------------------------------- */

@media (max-width: 781px) {
	.deiviator-esquema,
	.deiviator-tarjeta,
	.deiviator-calculadora {
		padding: var(--wp--preset--spacing--30);
	}

	.deiviator-calculadora__campos {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* 10. Lo nuevo de la segunda pasada: foto, mosaico, bento, rotador, vídeo -------- */

.deiviator-hero--foto .deiviator-hero__rejilla {
	align-items: center;
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.deiviator-hero--foto .deiviator-hero__rejilla > * {
	margin-block: 0;
}

.deiviator-hero__foto {
	margin: 0;
}

.deiviator-hero__foto--dcha img {
	object-position: right center;
}

.deiviator-hero__foto img {
	aspect-ratio: 1;
	border-radius: var(--deiviator-radio-tarjeta);
	box-shadow: var(--deiviator-sombra-foto);
	display: block;
	object-fit: cover;
	width: 100%;
}

.deiviator-fichas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: var(--wp--preset--spacing--30);
}

.deiviator-ficha {
	background: color-mix(in srgb, var(--wp--preset--color--surface) 75%, transparent);
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: var(--deiviator-radio-m);
	display: inline-flex;
	flex-direction: column;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.2;
	padding: 0.5rem 0.85rem;
}

.deiviator-ficha small {
	color: var(--wp--preset--color--on-surface-variant);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
}

.deiviator-mosaico {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-block: var(--wp--preset--spacing--30);
}

.deiviator-mosaico > * {
	margin: 0;
}

.deiviator-mosaico img {
	aspect-ratio: 4 / 3;
	border-radius: var(--deiviator-radio-xl);
	display: block;
	object-fit: cover;
	width: 100%;
}

/* Hacen caja con el contenedor general, como las demás secciones. */
.wp-block-group.alignwide.deiviator-esquema,
.wp-block-group.alignwide.deiviator-mosaico,
.wp-block-group.alignwide.deiviator-bento-marco {
	margin-inline: auto;
	max-width: var(--wp--style--global--content-size);
}

.deiviator-video {
	margin: 0;
}

.deiviator-video video {
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--carbon);
	border-radius: var(--deiviator-radio-xl);
	display: block;
	width: 100%;
}

/* Con los dos nombres: la regla general va más abajo y, con uno solo, empataría y ganaría ella. */
.deiviator-declaracion.deiviator-declaracion--larga {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	line-height: 1.5;
	max-width: 62ch;
}

.deiviator-nota {
	color: var(--wp--preset--color--on-surface-variant);
	font-size: var(--wp--preset--font-size--small);
	max-width: 62ch;
}

.deiviator-banda-marco {
	margin-block: var(--wp--preset--spacing--40);
}

.wp-block-group.alignwide.deiviator-banda-marco {
	margin-inline: auto;
	max-width: var(--wp--style--global--content-size);
}

.deiviator-banda {
	border-radius: var(--deiviator-radio-tarjeta);
	overflow: hidden;
	padding: var(--wp--preset--spacing--50);
}

.deiviator-banda h2 {
	color: #fff;
	max-width: 22ch;
}

.deiviator-declaracion strong {
	color: var(--wp--preset--color--primary);
	font-weight: inherit;
}

.deiviator-rejilla--7-5 {
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

/* Una tarjeta grande sola: foto a un lado y texto al otro. */
.deiviator-rejilla--1 .deiviator-tarjeta--con-foto {
	align-items: center;
	display: grid;
	column-gap: var(--wp--preset--spacing--40);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) 0;
}

.deiviator-rejilla--1 .deiviator-tarjeta--con-foto > * {
	grid-column: 2;
}

.deiviator-rejilla--1 .deiviator-tarjeta--con-foto > .deiviator-tarjeta__foto {
	align-self: stretch;
	grid-column: 1;
	grid-row: 1 / span 6;
	margin: calc(-1 * var(--wp--preset--spacing--40)) 0;
	min-height: 22rem;
	position: relative;
}

.deiviator-rejilla--1 .deiviator-tarjeta--con-foto .deiviator-tarjeta__foto img {
	aspect-ratio: auto;
	height: 100%;
	inset: 0;
	position: absolute;
}

.deiviator-declaracion {
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 600;
	line-height: 1.15;
	max-width: 30ch;
}

/* Titular que rota, como en la web anterior. Solo CSS: las palabras están en el HTML y se leen enteras. */
.deiviator-rotador {
	color: var(--wp--preset--color--primary);
	display: grid;
	justify-items: center;
}

@media (min-width: 782px) {
	.deiviator-rotador > span {
		white-space: nowrap;
	}
}

.deiviator-rotador > span {
	animation: deiviator-rota 12s infinite;
	grid-area: 1 / 1;
	opacity: 0;
}

.deiviator-rotador > span:nth-child(2) { animation-delay: 3s; }
.deiviator-rotador > span:nth-child(3) { animation-delay: 6s; }
.deiviator-rotador > span:nth-child(4) { animation-delay: 9s; }

@keyframes deiviator-rota {
	0% { opacity: 0; transform: translateY(0.35em); }
	4%, 22% { opacity: 1; transform: none; }
	26%, 100% { opacity: 0; transform: translateY(-0.35em); }
}

@media (prefers-reduced-motion: reduce) {
	.deiviator-rotador > span {
		animation: none;
	}

	.deiviator-rotador > span:first-child {
		opacity: 1;
	}
}

/* Bento de la portada. */
.deiviator-bento {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	grid-auto-rows: minmax(22rem, auto);
	grid-template-columns: repeat(12, minmax(0, 1fr));
}

.deiviator-bento > * {
	margin: 0;
}

.deiviator-tesela {
	background: var(--wp--preset--color--surface-container-low);
	border-radius: var(--deiviator-radio-tarjeta);
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	padding: var(--wp--preset--spacing--40);
	position: relative;
}

.deiviator-tesela > * {
	margin-block: 0;
}

.deiviator-tesela p {
	color: var(--wp--preset--color--on-surface-variant);
	/* El texto de tarjeta, como en el resto (David, 8-11-2026): las teselas del bento iban a 16. */
	font-size: var(--wp--preset--font-size--small);
	margin-top: var(--wp--preset--spacing--20);
}

.deiviator-tesela--4 { grid-column: span 4; }
.deiviator-tesela--8 { grid-column: span 8; }
.deiviator-tesela--12 { grid-column: span 12; }

.deiviator-tesela--oscura {
	background: var(--deiviator-fondo-oscuro);
	color: var(--wp--preset--color--sobre-carbon);
}

.deiviator-tesela--oscura h3 {
	color: var(--wp--preset--color--sobre-carbon);
}

.deiviator-tesela--oscura p {
	color: var(--wp--preset--color--sobre-carbon-2);
}

.deiviator-tesela--oscura a {
	color: var(--wp--preset--color--sobre-carbon);
}

/* La gráfica: el doughnut de la web anterior, 40 sobre 100, con un hueco de la mitad del radio. El dibujo final es el de la
   hoja: bento.js solo le pone el estado inicial, así que sin él se ve entera. */
.deiviator-tesela--grafica {
	align-items: center;
	text-align: center;
}

.deiviator-grafica {
	display: grid;
	margin-inline: auto;
	max-width: 14rem;
	place-items: center;
	width: 100%;
}

.deiviator-grafica > * {
	grid-area: 1 / 1;
}

.deiviator-grafica svg {
	display: block;
	height: auto;
	transform: rotate(-90deg);
	width: 100%;
}

.deiviator-grafica circle {
	fill: none;
	stroke-width: 28;
}

.deiviator-grafica__fondo {
	stroke: rgb(255 255 255 / 0.08);
}

.deiviator-grafica__valor {
	stroke: var(--wp--preset--color--coral);
	stroke-dasharray: 40 100;
}

.deiviator-tesela p.deiviator-grafica__dato {
	color: var(--wp--preset--color--sobre-carbon);
	display: flex;
	flex-direction: column;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: 1;
	margin: 0;
}

.deiviator-grafica__dato small {
	color: var(--wp--preset--color--sobre-carbon-2);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	margin-bottom: 0.125rem;
}

/* Las teselas con foto: el fondo es más grande que la tesela para tener de dónde desplazarse. */
.deiviator-tesela--fondo {
	background: var(--wp--preset--color--carbon);
	isolation: isolate;
}

.deiviator-tesela--fondo::before {
	content: "";
	inset: 0;
	position: absolute;
	z-index: -1;
}

.deiviator-tesela__fondo {
	inset: 0;
	margin: 0;
	position: absolute;
	transform: translate3d(0, calc(var(--deiviator-parallax, 0) * 5%), 0) scale(1.12);
	will-change: transform;
	z-index: -2;
}

.deiviator-tesela__fondo img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.deiviator-tesela--fondo h3,
.deiviator-tesela--fondo p,
.deiviator-tesela--fondo li {
	color: #fff;
}

.deiviator-tesela__contenido {
	position: relative;
}

.deiviator-tesela__contenido > * {
	margin-block: 0;
}

/* La reunión: el texto a la izquierda, sobre un degradado que no llega a quien presenta. */
.deiviator-tesela--reunion .deiviator-tesela__fondo img {
	object-position: 0 50%;
}

.deiviator-tesela--reunion::before {
	background: linear-gradient(90deg, rgb(0 0 0 / 0.86) 8%, rgb(0 0 0 / 0.72) 30%, rgb(0 0 0 / 0.38) 50%, rgb(0 0 0 / 0.1) 68%, transparent 80%);
}

.deiviator-tesela--reunion .deiviator-tesela__contenido {
	max-width: 19rem;
}

/* Las apps: dos filas de alto, el texto arriba y el teléfono abajo, sin pisarse. */
.deiviator-tesela--apps {
	background: #282729;
	grid-row: span 2;
	justify-content: flex-start;
}

.deiviator-tesela--apps .deiviator-tesela__fondo {
	inset: 22% 0 0;
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%);
	mask-image: linear-gradient(to bottom, transparent, #000 16%);
	transform-origin: 50% 100%;
}

.deiviator-tesela--apps .deiviator-tesela__fondo img {
	object-position: 62% 100%;
}

.deiviator-checklist.deiviator-checklist {
	display: grid;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	gap: 0.5rem;
	list-style: none;
	margin-top: var(--wp--preset--spacing--20);
	padding: 0;
}

.deiviator-checklist li {
	/* Arriba y no al centro: en un check de varias líneas, el icono va con la primera. */
	align-items: flex-start;
	display: flex;
	gap: 0.625rem;
}

.deiviator-checklist li::before {
	background: #22c55e;
	content: "";
	flex: none;
	height: 1.125rem;
	-webkit-mask: url("iconos/check.svg") center / contain no-repeat;
	margin-top: 0.1em;
	mask: url("iconos/check.svg") center / contain no-repeat;
	width: 1.125rem;
}

/* Las notificaciones: vidrio líquido en CSS. Quietas forman una pila arriba, con el coche a la vista; al pasar por encima se
   despliegan en persiana hacia abajo hasta cubrir la tesela, con su padding. Cada una está en su fila de la rejilla, que es su
   sitio desplegada: apiladas solo se les aplica un transform, así que el despliegue no recalcula nada. */
.deiviator-tesela--aviso::before {
	background: linear-gradient(180deg, transparent 45%, rgb(0 0 0 / 0.34) 100%);
}

.deiviator-tesela--aviso::after {
	background: rgb(0 0 0 / 0.12);
	content: "";
	inset: 0;
	opacity: 0;
	position: absolute;
	z-index: -1;
}

.deiviator-notificaciones {
	--deiviator-n: 3;
	--deiviator-cara: 3rem;
	--deiviator-hueco: 0.5rem;
	display: grid;
	flex: 1;
	gap: var(--deiviator-hueco);
	grid-template-rows: repeat(var(--deiviator-n), minmax(0, 1fr));
	list-style: none;
	margin: 0;
	min-height: 0;
	padding: 0;
	width: 100%;
}

.deiviator-notificaciones:focus-visible {
	border-radius: var(--deiviator-radio-xl);
	outline: 2px solid #fff;
	outline-offset: 4px;
}

.deiviator-notificacion {
	--d: var(--i);
	/* Vidrio: lo de detrás se oscurece en el propio filtro en vez de taparlo con un tinte. Así las rayas y el coche siguen ahí, con
	   todo su contraste, y el texto se lee igual. El fondo es solo el brillo de la superficie. */
	background: linear-gradient(135deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.02) 40%, rgb(255 255 255 / 0.08)), rgb(14 14 16 / 0.16);
	-webkit-backdrop-filter: blur(9px) saturate(180%) brightness(0.56);
	backdrop-filter: blur(9px) saturate(180%) brightness(0.56);
	border-radius: var(--deiviator-radio-xl);
	/* El grosor: un canto claro arriba, oscuro abajo, y la luz que se queda dentro de los bordes. */
	box-shadow:
		0 14px 30px rgb(0 0 0 / 0.36),
		0 3px 8px rgb(0 0 0 / 0.24),
		inset 0 1px 1px rgb(255 255 255 / 0.42),
		inset 0 -1px 1px rgb(255 255 255 / 0.18),
		inset 0 10px 18px -12px rgb(255 255 255 / 0.4),
		inset 0 -12px 20px -14px rgb(0 0 0 / 0.5),
		inset 0 0 22px rgb(255 255 255 / 0.07);
	color: #fff;
	container-type: size;
	min-height: 0;
	position: relative;
	transform: translateY(calc(var(--i) * -1 * (100% + var(--deiviator-hueco)) + var(--d) * 0.65rem + var(--deiviator-entrada, 0rem))) scale(calc(var(--deiviator-escala, 1) - var(--d) * 0.05));
	transform-origin: 50% 100%;
	z-index: calc(var(--deiviator-n) - var(--i));
}

/* El filete: la luz entra por una esquina y sale por la contraria, como en un canto de vidrio. */
.deiviator-notificacion::before {
	background: linear-gradient(140deg, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0.14) 30%, rgb(255 255 255 / 0.04) 58%, rgb(255 255 255 / 0.5));
	border-radius: inherit;
	content: "";
	inset: 0;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	padding: 1px;
	pointer-events: none;
	position: absolute;
}

/* El reflejo, que sigue al puntero. */
.deiviator-notificacion::after {
	background: radial-gradient(70% 130% at var(--deiviator-luz-x, 18%) var(--deiviator-luz-y, -10%), rgb(255 255 255 / 0.2), transparent 62%);
	border-radius: inherit;
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

/* Como una notificación de iOS: la cara centrada y el mismo margen en los cuatro lados. La altura la pone la fila, así que el margen
   lateral se calcula de ella (100cqh es el alto de la notificación): lo que le sobra a la cara, a partes iguales. Las de detrás solo
   asoman: su texto no debe verse a través de la de delante. */
.deiviator-notificacion__contenido {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	gap: 0.75rem;
	height: 100%;
	opacity: clamp(0, calc(1 - var(--d)), 1);
	padding-inline: 1.25rem;
	padding-inline: clamp(0.75rem, calc((100cqh - var(--deiviator-cara)) / 2), 1.5rem);
	position: relative;
	text-shadow: 0 1px 2px rgb(0 0 0 / 0.42);
	z-index: 1;
}

.deiviator-notificacion__cara {
	flex: none;
	height: var(--deiviator-cara);
	position: relative;
	width: var(--deiviator-cara);
}

.deiviator-notificacion__cara img {
	border-radius: 50%;
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.deiviator-notificacion__insignia {
	background: var(--wp--preset--color--coral);
	border-radius: var(--deiviator-radio-xs);
	bottom: -0.125rem;
	box-shadow: 0 1px 3px rgb(0 0 0 / 0.4);
	height: 1.25rem;
	position: absolute;
	right: -0.125rem;
	width: 1.25rem;
}

.deiviator-notificacion__insignia::after {
	background: #fff;
	content: "";
	inset: 0;
	-webkit-mask: url("img/isotipo.svg") center / 74% no-repeat;
	mask: url("img/isotipo.svg") center / 74% no-repeat;
	position: absolute;
}

.deiviator-notificacion__textos {
	display: grid;
	flex: 1;
	gap: 0.0625rem;
	min-width: 0;
}

.deiviator-notificacion__cabeza {
	align-items: baseline;
	display: flex;
	font-size: var(--wp--preset--font-size--small);
	gap: 0.5rem;
	justify-content: space-between;
	line-height: 1.25;
}

.deiviator-notificacion__cabeza b {
	font-weight: 600;
}

.deiviator-notificacion__cabeza span {
	color: rgb(255 255 255 / 0.8);
	flex: none;
	font-size: var(--wp--preset--font-size--x-small);
}

.deiviator-notificacion__texto {
	color: rgb(255 255 255 / 0.95);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.3;
}

/* Tarjeta estrecha: si no, el cuerpo se va a tres líneas y el margen vertical deja de ser el lateral. */
@container (max-width: 17.5rem) {
	.deiviator-notificacion__contenido {
		--deiviator-cara: 2.5rem;
		gap: 0.5rem;
		padding-inline: 0.875rem;
	}
}

/* Refracción real: el mapa lo calcula bento.js para el tamaño exacto de la tarjeta. Solo existe en Chromium. */
.con-refraccion .deiviator-notificacion {
	-webkit-backdrop-filter: url(#deiviator-vidrio) saturate(180%) brightness(0.66);
	backdrop-filter: url(#deiviator-vidrio) saturate(180%) brightness(0.66);
}

/* Desplegadas: cada una en su fila, de arriba abajo. */
.deiviator-tesela--aviso:hover .deiviator-notificaciones .deiviator-notificacion,
.deiviator-tesela--aviso:focus-within .deiviator-notificaciones .deiviator-notificacion {
	opacity: 1;
	transform: none;
}

.deiviator-tesela--aviso:hover .deiviator-notificacion__contenido,
.deiviator-tesela--aviso:focus-within .deiviator-notificacion__contenido {
	opacity: 1;
}

.deiviator-tesela--aviso:hover::after,
.deiviator-tesela--aviso:focus-within::after {
	opacity: 1;
}

/* Las que aún no han llegado. Lo pone bento.js: sin él, la pila está completa desde el principio. */
.deiviator-notificacion.por-llegar {
	--deiviator-entrada: -1.25rem;
	--deiviator-escala: 1.04;
	opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.deiviator-notificacion {
		/* La de arriba se queda y las demás bajan tras ella: es lo que hace que parezca una persiana. */
		transition: opacity var(--deiviator-t-media) var(--deiviator-ease-effect), transform var(--deiviator-t-lenta) var(--deiviator-spring) calc(var(--i) * 40ms);
	}

	.deiviator-notificacion__contenido {
		transition: opacity var(--deiviator-t-rapida) var(--deiviator-ease-effect);
	}

	.deiviator-tesela--aviso::after {
		transition: opacity var(--deiviator-t-media) var(--deiviator-ease-effect);
	}
}

/* El equipo: las caras montadas, el texto y el enlace. */
.deiviator-tesela--equipo {
	gap: var(--wp--preset--spacing--20);
	justify-content: flex-end;
}

.deiviator-tesela--equipo p {
	margin-top: 0;
}

.deiviator-avatares.deiviator-avatares {
	display: flex;
}

.deiviator-avatares > * {
	margin: 0;
}

.deiviator-avatares > * + * {
	margin-inline-start: -0.625rem;
}

.deiviator-avatares img {
	border: 2px solid var(--wp--preset--color--carbon);
	border-radius: 50%;
	display: block;
	height: 3rem;
	object-fit: cover;
	width: 3rem;
}

/* El párrafo que aparece palabra a palabra. */
.deiviator-palabras.se-anima span {
	opacity: 0.16;
}

.deiviator-palabras.se-anima.esta-vista span {
	opacity: 1;
	transition: opacity var(--deiviator-t-media) var(--deiviator-ease-effect) calc(var(--i) * 28ms);
}

.deiviator-grafica.se-anima .deiviator-grafica__valor {
	stroke-dashoffset: 40;
}

.deiviator-grafica.se-anima.esta-vista .deiviator-grafica__valor {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1.4s cubic-bezier(0.2, 0, 0, 1);
}

@media (max-width: 960px) {
	/* En una columna, las teselas de texto miden lo que su texto, sin el mínimo de 22 rem de la rejilla, que con la letra de tarjeta
	   dejaba media tesela vacía (8-11-2026). Las de foto conservan su altura. */
	.deiviator-bento {
		grid-auto-rows: auto;
	}

	.deiviator-tesela--aviso {
		min-height: 22rem;
	}

	.deiviator-tesela--apps {
		grid-row: auto;
		min-height: 40rem;
	}

	.deiviator-tesela--reunion {
		min-height: 24rem;
	}

	.deiviator-tesela--reunion::before {
		background: linear-gradient(90deg, rgb(0 0 0 / 0.84), rgb(0 0 0 / 0.62) 60%, rgb(0 0 0 / 0.32));
	}

	.deiviator-tesela--aviso {
		min-height: 22rem;
	}
}

/* Tarjeta con foto y pastilla de «a consultar». */
.deiviator-tarjeta--con-foto {
	overflow: hidden;
	padding-top: 0;
}

.deiviator-tarjeta__foto {
	margin: 0 calc(-1 * var(--wp--preset--spacing--40)) var(--wp--preset--spacing--20);
}

.deiviator-tarjeta--oscura .deiviator-tarjeta__foto {
	background: var(--deiviator-escenario);
}

.deiviator-tarjeta__foto img {
	aspect-ratio: 16 / 10;
	display: block;
	object-fit: cover;
	width: 100%;
}

.deiviator-rejilla--1 {
	--deiviator-rejilla-columnas: 1;
}

.deiviator-tarjeta .deiviator-aviso,
.deiviator-aviso {
	align-self: flex-start;
	background: color-mix(in srgb, var(--wp--preset--color--coral) 22%, transparent);
	border-radius: 999px;
	color: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	padding: 0.25em 0.8em;
	width: fit-content;
}

.deiviator-tarjeta--oscura .deiviator-aviso {
	color: var(--wp--preset--color--sobre-carbon);
}

.deiviator-tarjeta ul {
	color: var(--wp--preset--color--on-surface-variant);
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
	padding-inline-start: 1.1em;
}

.deiviator-tarjeta--oscura ul {
	color: var(--wp--preset--color--sobre-carbon-2);
}

/* Rejilla de soluciones: cuatro columnas caben con foto. */
@media (max-width: 1200px) {
	.deiviator-rejilla--4 {
		--deiviator-rejilla-columnas: 2;
	}
}

@media (max-width: 620px) {
	.deiviator-rejilla--4 {
		--deiviator-rejilla-columnas: 1;
	}
}

.deiviator-calculadora small {
	color: var(--wp--preset--color--on-surface-variant);
	display: block;
	font-size: var(--wp--preset--font-size--x-small);
	margin-top: 0.25rem;
}

.deiviator-calculadora__titulo,
.deiviator-calculadora .deiviator-campo--check {
	grid-column: 1 / -1;
	margin: 0;
}

.deiviator-calculadora__resultado h2 {
	color: var(--wp--preset--color--sobre-carbon);
	margin: 0 0 var(--wp--preset--spacing--20);
}

.deiviator-calculadora__resultado p:not(.deiviator-antetitulo) {
	color: var(--wp--preset--color--sobre-carbon);
}

.deiviator-documento + *,
.login-submit input {
	font: inherit;
}

@media (max-width: 960px) {
	.deiviator-hero--foto .deiviator-hero__rejilla {
		grid-template-columns: minmax(0, 1fr);
	}

	.deiviator-tesela--4,
	.deiviator-tesela--8,
	.deiviator-tesela--12 {
		grid-column: span 12;
	}

}

@media (max-width: 781px) {
	.deiviator-rejilla--7-5 {
		grid-template-columns: minmax(0, 1fr);
	}

	.deiviator-rejilla--1 .deiviator-tarjeta--con-foto {
		display: flex;
		padding: 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
	}

	.deiviator-rejilla--1 .deiviator-tarjeta--con-foto > .deiviator-tarjeta__foto {
		margin: 0 calc(-1 * var(--wp--preset--spacing--30)) var(--wp--preset--spacing--20);
	}

	.deiviator-rejilla--1 .deiviator-tarjeta--con-foto > .deiviator-tarjeta__foto {
		margin-top: 0;
		min-height: 0;
	}

	.deiviator-rejilla--1 .deiviator-tarjeta--con-foto .deiviator-tarjeta__foto img {
		aspect-ratio: 16 / 10;
		height: auto;
		position: static;
	}
}

@media (max-width: 620px) {
	.deiviator-mosaico {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Carrusel de soluciones. La fila llega hasta los bordes de la ventana, y la primera tarjeta sigue alineada con el
   texto: «--deiviator-sangre» es lo que hay entre el contenido y el borde. Sin JavaScript se queda la barra de
   desplazamiento; con él, las flechas. */
.deiviator-seccion--carrusel {
	overflow-x: clip;
}

.deiviator-seccion--carrusel .deiviator-seccion__interior {
	column-gap: var(--wp--preset--spacing--30);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
}

.deiviator-seccion--carrusel .deiviator-seccion__interior > * {
	grid-column: 1;
}

.deiviator-seccion--carrusel .deiviator-seccion__interior > .deiviator-carrusel {
	grid-column: 1 / -1;
}

.deiviator-seccion--carrusel .deiviator-seccion__interior > .deiviator-carrusel__controles {
	align-self: end;
	grid-column: 2;
	grid-row: 2;
}

.deiviator-carrusel {
	container-type: inline-size;
	margin-top: var(--wp--preset--spacing--40);
	min-width: 0;
}

.deiviator-carrusel__pista {
	--deiviator-sangre: calc(50vw - 50cqi);
	display: flex;
	gap: var(--wp--preset--spacing--20);
	margin-inline: calc(-1 * var(--deiviator-sangre));
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding-inline: var(--deiviator-sangre);
	scroll-padding-inline: var(--deiviator-sangre);
	scroll-snap-type: x mandatory;
}

.deiviator-carrusel__pista > * {
	/* Un 150 % de la anterior (21rem), sin pasarse de la pantalla en móvil. */
	flex: 0 0 min(31.5rem, 86vw);
	margin-block: 0;
	scroll-snap-align: start;
}

.deiviator-js .deiviator-carrusel__pista {
	scrollbar-width: none;
}

.deiviator-js .deiviator-carrusel__pista::-webkit-scrollbar {
	display: none;
}

.deiviator-carrusel__controles {
	display: flex;
	gap: var(--wp--preset--spacing--10);
}

.deiviator-carrusel__controles[hidden] {
	display: none;
}

.deiviator-carrusel__boton {
	align-items: center;
	background: transparent;
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: 50%;
	color: var(--wp--preset--color--on-surface);
	cursor: pointer;
	display: inline-flex;
	height: 3rem;
	justify-content: center;
	padding: 0;
	width: 3rem;
}

.deiviator-carrusel__boton svg {
	height: 1.25rem;
	width: 1.25rem;
}

.deiviator-carrusel__boton:hover:not([aria-disabled="true"]) {
	background: var(--wp--preset--color--coral);
	border-color: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--carbon);
}

.deiviator-carrusel__boton[aria-disabled="true"] {
	cursor: default;
	opacity: 0.35;
}

@media (max-width: 620px) {
	.deiviator-seccion--carrusel .deiviator-seccion__interior > .deiviator-carrusel__controles {
		grid-column: 1 / -1;
		grid-row: 4;
		justify-self: end;
		margin-top: var(--wp--preset--spacing--20);
	}
}

/* El botón «Ver vídeo» y su ventana. */
.deiviator-modal-video {
	background: var(--wp--preset--color--carbon);
	border: 0;
	border-radius: var(--deiviator-radio-tarjeta);
	max-height: none;
	max-width: none;
	overflow: hidden;
	padding: 0;
	width: min(92vw, 70rem, calc(88vh * 16 / 9));
}

.deiviator-modal-video::backdrop {
	background: color-mix(in srgb, var(--wp--preset--color--carbon) 82%, transparent);
}

.deiviator-modal-video video {
	aspect-ratio: 16 / 9;
	display: block;
	width: 100%;
}

.deiviator-modal-video__cerrar {
	align-items: center;
	background: var(--wp--preset--color--carbon);
	border: 1px solid var(--wp--preset--color--sobre-carbon-2);
	border-radius: 50%;
	color: var(--wp--preset--color--sobre-carbon);
	cursor: pointer;
	display: inline-flex;
	height: 2.75rem;
	inset-block-start: var(--wp--preset--spacing--10);
	inset-inline-end: var(--wp--preset--spacing--10);
	justify-content: center;
	padding: 0;
	position: absolute;
	width: 2.75rem;
	z-index: 1;
}

.deiviator-modal-video__cerrar svg {
	height: 1.25rem;
	width: 1.25rem;
}

html:has(.deiviator-modal-video[open]) {
	overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
	.deiviator-carrusel__boton {
		transition: background-color var(--deiviator-t-rapida) var(--deiviator-ease-effect), border-color var(--deiviator-t-rapida) var(--deiviator-ease-effect), color var(--deiviator-t-rapida) var(--deiviator-ease-effect);
	}

	.deiviator-modal-video[open] {
		animation: deiviator-modal-entra 0.4s var(--deiviator-spring);
	}

	.deiviator-modal-video[open]::backdrop {
		animation: deiviator-modal-velo 0.25s var(--deiviator-ease-effect);
	}
}

@keyframes deiviator-modal-entra {
	from {
		opacity: 0;
		transform: scale(0.96);
	}
}

@keyframes deiviator-modal-velo {
	from {
		opacity: 0;
	}
}

/* Hero de la portada: a todo el ancho. La ciudad llena el fondo y el texto va encima, en bandera, con un degradado y un
   desenfoque progresivo que se funden por debajo de él. Esto de aquí es la versión quieta (sin JavaScript, con movimiento
   reducido o sin WebGL). El recorrido solo existe en el @media de más abajo, y ciudad.js solo escribe --salida. */
.deiviator-hero.deiviator-hero--ciudad {
	/* El margen del contenedor general, a cualquier ancho: el mismo cálculo que hace el tema con las secciones. */
	--deiviator-margen: max(var(--wp--style--root--padding-left), calc((100vw - var(--wp--style--global--content-size)) / 2));
	/* Donde acaba el titular, que es lo más ancho del texto y crece con la ventana. El degradado y el desenfoque van referidos
	   a esto y no a porcentajes: con porcentajes, las palabras largas quedaban sobre mapa nítido y bajaban de 3:1. */
	--deiviator-ciudad-borde: calc(var(--deiviator-margen) + min(46rem, 56vw));
	background: none;
	/* El aviso y la salida en 3D no deben ensanchar la página. «clip» no rompe el sticky; «hidden» sí. */
	overflow-x: clip;
	/* Solo en vertical: la rejilla es «alignfull» y resta el relleno lateral de la sección. Sin él, se pasa de ancho. */
	padding-block: 0 !important;
}

.deiviator-ciudad-rejilla {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.deiviator-ciudad-rejilla > * {
	grid-area: 1 / 1;
	margin-block: 0;
	min-width: 0;
}

.deiviator-hero--ciudad .deiviator-hero__interior {
	align-self: center;
	box-sizing: border-box;
	padding: calc(var(--deiviator-cabecera) + var(--wp--preset--spacing--40)) 0 var(--wp--preset--spacing--50) var(--deiviator-margen);
	position: relative;
	/* Más ancho que el párrafo, que se queda como está: así las palabras que cambian del titular no se parten. */
	width: min(100%, calc(var(--deiviator-margen) + 46rem));
	z-index: 1;
}

.deiviator-hero--ciudad h1 {
	max-width: none;
}

/* Las palabras largas ocupan dos líneas y las cortas una: centradas en su hueco, el titular queda equilibrado. */
.deiviator-hero--ciudad .deiviator-rotador {
	align-items: center;
	justify-items: start;
	/* Cada palabra entra y sale dentro de su línea, sin pisar las de arriba y abajo. El margen es para los rabos (p, g). */
	margin-block: -0.12em;
	overflow: clip;
	padding-block: 0.12em;
}

/* El párrafo se queda en su ancho; lo que crece es el titular. */
.deiviator-hero--ciudad .deiviator-hero__texto {
	max-width: 36rem;
}

.deiviator-hero--ciudad .deiviator-rotador > span {
	white-space: normal;
}

.deiviator-ciudad {
	min-width: 0;
}

.deiviator-ciudad__escena {
	height: min(100vh, 54rem);
}

.deiviator-ciudad__marco {
	/* El resplandor se apaga antes de llegar al antetítulo: con él debajo, el rojo de marca bajaba de 4,5:1. */
	background: radial-gradient(70% 36% at 25% 0%, color-mix(in srgb, var(--wp--preset--color--coral) 22%, transparent), transparent 75%);
	height: 100%;
	position: relative;
}

/* El mapa llena el fondo: nunca desaparece del todo por debajo del texto. Los valores siguen una curva suave y no una
   recta, que es lo que hace que no se vea dónde empieza el degradado. */
.deiviator-ciudad__mapa {
	--deiviator-ciudad-lados: linear-gradient(to right, rgb(0 0 0 / 0.08) 0%, rgb(0 0 0 / 0.09) calc(var(--deiviator-ciudad-borde) * 0.2), rgb(0 0 0 / 0.12) calc(var(--deiviator-ciudad-borde) * 0.4), rgb(0 0 0 / 0.19) calc(var(--deiviator-ciudad-borde) * 0.6), rgb(0 0 0 / 0.32) calc(var(--deiviator-ciudad-borde) * 0.8), rgb(0 0 0 / 0.46) calc(var(--deiviator-ciudad-borde) * 1), rgb(0 0 0 / 0.62) calc(var(--deiviator-ciudad-borde) * 1.08), rgb(0 0 0 / 0.78) calc(var(--deiviator-ciudad-borde) * 1.16), rgb(0 0 0 / 0.9) calc(var(--deiviator-ciudad-borde) * 1.24), rgb(0 0 0 / 0.97) calc(var(--deiviator-ciudad-borde) * 1.32), #000 calc(var(--deiviator-ciudad-borde) * 1.4));
	--deiviator-ciudad-derecha: linear-gradient(#000, #000);
	--deiviator-ciudad-fundido: linear-gradient(to bottom, #000 78%, rgb(0 0 0 / 0.72) 86%, rgb(0 0 0 / 0.3) 94%, transparent 100%);
	inset: 0;
	-webkit-mask-composite: source-in;
	-webkit-mask-image: var(--deiviator-ciudad-lados), var(--deiviator-ciudad-fundido), var(--deiviator-ciudad-derecha);
	mask-composite: intersect;
	mask-image: var(--deiviator-ciudad-lados), var(--deiviator-ciudad-fundido), var(--deiviator-ciudad-derecha);
	position: absolute;
}

.deiviator-ciudad__poster,
.deiviator-ciudad__lienzo {
	display: block;
	height: 100%;
	inset: 0;
	object-fit: cover;
	object-position: 80% 50%;
	position: absolute;
	width: 100%;
}

.deiviator-ciudad__lienzo {
	opacity: 0;
}

.deiviator-ciudad.esta-lista .deiviator-ciudad__lienzo {
	opacity: 1;
}

/* El desenfoque progresivo: capas de más a menos, cada una hasta un poco antes que la anterior. Con una sola capa se ve el
   corte; con varias, el mapa se va deshaciendo hacia el texto. */
.deiviator-ciudad__desenfoque {
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.deiviator-ciudad__desenfoque i {
	-webkit-backdrop-filter: blur(var(--deiviator-ciudad-b));
	backdrop-filter: blur(var(--deiviator-ciudad-b));
	inset: 0;
	-webkit-mask-image: linear-gradient(to right, #000 calc(var(--deiviator-ciudad-borde) * var(--deiviator-ciudad-d)), transparent calc(var(--deiviator-ciudad-borde) * var(--deiviator-ciudad-h)));
	mask-image: linear-gradient(to right, #000 calc(var(--deiviator-ciudad-borde) * var(--deiviator-ciudad-d)), transparent calc(var(--deiviator-ciudad-borde) * var(--deiviator-ciudad-h)));
	position: absolute;
}

/* Las dos más suaves se apagan antes del coche, que en reposo queda a 1,26–1,32 veces el borde según el ancho (David, 7-11-2026): con 1,24 se veía
   desenfocado. Las fuertes, que son las que dan contraste bajo el titular, no cambian. */
.deiviator-ciudad__desenfoque i:nth-child(1) { --deiviator-ciudad-b: 1px; --deiviator-ciudad-d: 0.98; --deiviator-ciudad-h: 1.16; }
.deiviator-ciudad__desenfoque i:nth-child(2) { --deiviator-ciudad-b: 2px; --deiviator-ciudad-d: 0.92; --deiviator-ciudad-h: 1.08; }
.deiviator-ciudad__desenfoque i:nth-child(3) { --deiviator-ciudad-b: 4px; --deiviator-ciudad-d: 0.84; --deiviator-ciudad-h: 1.04; }
.deiviator-ciudad__desenfoque i:nth-child(4) { --deiviator-ciudad-b: 8px; --deiviator-ciudad-d: 0.64; --deiviator-ciudad-h: 0.94; }
.deiviator-ciudad__desenfoque i:nth-child(5) { --deiviator-ciudad-b: 16px; --deiviator-ciudad-d: 0.38; --deiviator-ciudad-h: 0.76; }

/* En oscuro, la imagen fija es clara: se apaga para que no deslumbre mientras llega la escena. */
:root[data-theme="dark"] .deiviator-ciudad__poster {
	opacity: 0.2;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .deiviator-ciudad__poster {
		opacity: 0.2;
	}
}

/* El aviso sobre el coche. ciudad.js lo lleva a su sitio; sin él, se queda sobre el coche de la imagen fija. */
.deiviator-ciudad__aviso {
	left: min(80%, calc(100% - 8rem));
	position: absolute;
	top: 52%;
	/* Sin ancho: la tarjeta se centra sola, y la caja no empuja el ancho de la página. */
	width: 0;
	z-index: 1;
}

.deiviator-ciudad.esta-lista .deiviator-ciudad__aviso {
	left: 0;
	top: 0;
}

.deiviator-ciudad__tarjeta {
	/* Los colores de estado del producto, como en el vídeo: en camino en azul, completado en verde. */
	--deiviator-ciudad-tono: var(--wp--preset--color--coral);
	align-items: center;
	background: #fff;
	border-radius: var(--deiviator-radio-xl);
	box-shadow: 0 0 0 2px color-mix(in oklab, var(--deiviator-ciudad-tono) 30%, transparent), 0 14px 34px color-mix(in srgb, #000 14%, transparent);
	color: var(--wp--preset--color--carbon);
	display: flex;
	gap: 0.625rem;
	padding: 0.5rem 1rem 0.5rem 0.5rem;
	position: relative;
	transform: translate(-50%, calc(-100% - 0.75rem));
	white-space: nowrap;
	width: max-content;
}

.deiviator-ciudad__aviso[data-estado="1"] .deiviator-ciudad__tarjeta,
.deiviator-ciudad__aviso[data-estado="2"] .deiviator-ciudad__tarjeta,
.deiviator-ciudad__aviso[data-estado="3"] .deiviator-ciudad__tarjeta {
	--deiviator-ciudad-tono: #3b82f6;
}

.deiviator-ciudad__aviso[data-estado="4"] .deiviator-ciudad__tarjeta {
	--deiviator-ciudad-tono: #22c55e;
}

.deiviator-ciudad__tarjeta::after {
	background: inherit;
	border-radius: 0 0 0.25rem 0;
	bottom: -0.4rem;
	content: "";
	height: 0.875rem;
	left: 50%;
	position: absolute;
	transform: translateX(-50%) rotate(45deg);
	width: 0.875rem;
}

.deiviator-ciudad__icono {
	background: color-mix(in oklab, var(--deiviator-ciudad-tono) 16%, #fff);
	border-radius: 50%;
	color: var(--deiviator-ciudad-tono);
	flex: none;
	height: 2.5rem;
	position: relative;
	width: 2.5rem;
}

.deiviator-ciudad__icono svg {
	height: 1.5rem;
	left: 50%;
	opacity: 0;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 1.5rem;
}

.deiviator-ciudad__icono svg.on {
	opacity: 1;
}

.deiviator-ciudad__textos {
	display: grid;
}

.deiviator-ciudad__fila {
	display: grid;
	grid-area: 1 / 1;
	opacity: 0;
}

.deiviator-ciudad__fila.on {
	opacity: 1;
}

.deiviator-ciudad__fila b {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.25;
}

.deiviator-ciudad__fila small {
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.25;
	opacity: 0.8;
}

.deiviator-ciudad__credito {
	background: color-mix(in srgb, var(--wp--preset--color--surface) 78%, transparent);
	border-radius: var(--deiviator-radio-xs);
	bottom: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--on-surface-variant);
	font-size: var(--wp--preset--font-size--x-small);
	inset-inline-end: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0.125rem 0.5rem;
	position: absolute;
}

/* Móvil, versión quieta: primero el texto y debajo la ciudad. */
@media (max-width: 960px) {
	.deiviator-ciudad-rejilla {
		display: block;
	}

	.deiviator-hero--ciudad .deiviator-hero__interior {
		padding: calc(var(--deiviator-cabecera) + var(--wp--preset--spacing--20)) var(--deiviator-margen) 0;
		width: auto;
	}

	.deiviator-ciudad__escena {
		height: 70vh;
	}

	.deiviator-ciudad__mapa {
		--deiviator-ciudad-lados: linear-gradient(to bottom, transparent, rgb(0 0 0 / 0.2) 8%, rgb(0 0 0 / 0.6) 16%, rgb(0 0 0 / 0.9) 24%, #000 32%);
	}

	.deiviator-ciudad__desenfoque {
		display: none;
	}
}

/* La versión que se mueve: sticky durante todo el recorrido y, al final, hacia el fondo y desvaneciéndose. El bloque
   siguiente sube por encima mientras tanto. */
@media (prefers-reduced-motion: no-preference) {
	.deiviator-js .deiviator-hero--ciudad:not(.es-estatica) {
		--deiviator-ciudad-recorrido: 240vh;
	}

	.deiviator-js .deiviator-hero--ciudad:not(.es-estatica) .deiviator-hero__interior {
		align-self: start;
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 100svh;
		opacity: calc(1 - var(--salida, 0) * 1.4);
		padding-block: var(--deiviator-cabecera) 0;
		position: sticky;
		top: 0;
		transform: translateY(calc(var(--salida, 0) * -2.5rem));
	}

	.deiviator-js .deiviator-hero--ciudad:not(.es-estatica) .deiviator-ciudad {
		height: calc(100svh + var(--deiviator-ciudad-recorrido));
	}

	.deiviator-js .deiviator-hero--ciudad:not(.es-estatica) .deiviator-ciudad__escena {
		height: 100svh;
		position: sticky;
		top: 0;
	}

	/* Quieta llena la pantalla; al alejarse se le verían los bordes rectos, así que se difuminan a medida que se hunde. */
	.deiviator-js .deiviator-hero--ciudad:not(.es-estatica) .deiviator-ciudad__mapa {
		--deiviator-ciudad-derecha: linear-gradient(to left, transparent, #000 calc(var(--salida, 0) * 22%));
		--deiviator-ciudad-fundido: linear-gradient(to bottom, transparent, #000 calc(var(--salida, 0) * 22%), #000 calc(100% - var(--salida, 0) * 22%), transparent);
	}

	.deiviator-js .deiviator-hero--ciudad:not(.es-estatica) .deiviator-ciudad__marco {
		opacity: calc(1 - var(--salida, 0));
		transform: perspective(1200px) translate3d(0, calc(var(--salida, 0) * -4%), calc(var(--salida, 0) * -900px)) rotateX(calc(var(--salida, 0) * 22deg));
		transform-origin: 62% 35%;
		will-change: opacity, transform;
	}

	.deiviator-js .deiviator-hero--ciudad.esta-fuera .deiviator-hero__interior,
	.deiviator-js .deiviator-hero--ciudad.esta-fuera .deiviator-ciudad__escena {
		visibility: hidden;
	}

	/* Lo que venga detrás sube por encima mientras el hero se va: así algo aparece mientras aún se desvanece. Antes nombraba
	   al bento, y al poner «presenta» en medio (5-11-2026) dejó de cumplirse sin avisar: quedaban 700 px en blanco (David, 7-11-2026).
	   Todos los que siguen, por encima de las capas fijas del hero, que mientras se apagan siguen pintándose. */
	.deiviator-js .deiviator-hero--ciudad:not(.es-estatica) + * {
		margin-top: -60vh;
	}

	.deiviator-js .deiviator-hero--ciudad:not(.es-estatica) ~ * {
		position: relative;
		z-index: 1;
	}

	.deiviator-ciudad__lienzo {
		transition: opacity var(--deiviator-t-media) var(--deiviator-ease-effect);
	}

	.deiviator-ciudad__fila {
		transform: translateY(0.375rem);
		transition: opacity var(--deiviator-t-rapida) var(--deiviator-ease-effect), transform var(--deiviator-t-rapida) var(--deiviator-ease-effect);
	}

	.deiviator-ciudad__fila.on {
		transform: none;
	}

	.deiviator-ciudad__icono svg {
		transition: opacity var(--deiviator-t-rapida) var(--deiviator-ease-effect);
	}

	.deiviator-ciudad__tarjeta {
		transition: box-shadow var(--deiviator-t-media) var(--deiviator-ease-effect);
	}

	.deiviator-ciudad__tarjeta.late {
		animation: deiviator-aviso-late 0.3s var(--deiviator-ease-effect);
	}

	/* Móvil: la ciudad también va de fondo, pegada desde el principio. El texto sube por encima con su propio degradado y
	   su desenfoque, que se van con él: al irse, descubre el mapa. */
	@media (max-width: 960px) {
		.deiviator-js .deiviator-hero--ciudad:not(.es-estatica) .deiviator-ciudad-rejilla {
			display: grid;
		}

		.deiviator-js .deiviator-hero--ciudad:not(.es-estatica) .deiviator-ciudad__mapa {
			--deiviator-ciudad-lados: linear-gradient(to right, transparent, #000 calc(var(--salida, 0) * 22%));
		}

		.deiviator-js .deiviator-hero--ciudad:not(.es-estatica) .deiviator-hero__interior {
			justify-content: flex-start;
			min-height: 0;
			opacity: 1;
			padding: calc(var(--deiviator-cabecera) + var(--wp--preset--spacing--20)) var(--deiviator-margen) 34vh;
			position: relative;
			transform: none;
		}

		.deiviator-js .deiviator-hero--ciudad:not(.es-estatica) .deiviator-hero__interior::before,
		.deiviator-js .deiviator-hero--ciudad:not(.es-estatica) .deiviator-hero__interior::after {
			content: "";
			inset: 0;
			pointer-events: none;
			position: absolute;
			z-index: -1;
		}

		.deiviator-js .deiviator-hero--ciudad:not(.es-estatica) .deiviator-hero__interior::before {
			background:
				radial-gradient(90% 12% at 50% 0%, color-mix(in srgb, var(--wp--preset--color--coral) 22%, transparent), transparent 75%),
				linear-gradient(to bottom, var(--wp--preset--color--surface) 66%, color-mix(in srgb, var(--wp--preset--color--surface) 88%, transparent) 74%, color-mix(in srgb, var(--wp--preset--color--surface) 58%, transparent) 83%, color-mix(in srgb, var(--wp--preset--color--surface) 22%, transparent) 92%, transparent 100%);
		}

		.deiviator-js .deiviator-hero--ciudad:not(.es-estatica) .deiviator-hero__interior::after {
			-webkit-backdrop-filter: blur(12px);
			backdrop-filter: blur(12px);
			-webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
			mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
		}

		.deiviator-js .deiviator-hero--ciudad.esta-fuera .deiviator-hero__interior {
			visibility: visible;
		}
	}
}

@keyframes deiviator-aviso-late {
	50% {
		scale: 1.05;
	}
}

/* Botones: los del producto (David, 8-11-2026), para que la web y el panel sean el mismo botón al pasar de una pantalla a otra.
   Son los de Filament 4 dentro del panel, medidos en staging, con los colores de App\Support\BrandPalette: el coral de marca (#FE7568,
   tono 500) oscurecido lo justo para llevar texto blanco (#CE4940, tono 600) y un paso más al pasar (#B9352E, tono 700). Radio de 8 px,
   14/20 en peso 500, icono de 20 px a 6 px del texto, sin sombra ni filete. El color cambia en 120 ms y, al pulsar, el botón se encoge al
   97 %. Tamaños de la escala del producto: xl (44 px) en el contenido y lg (40 px) en la cabecera.
   El secundario es el gris del producto: blanco con un anillo de 1 px (gris 950 al 10 %) y gris 50 al pasar; en oscuro, blanco al 5 %
   con anillo blanco al 20 %. Sobre una foto, un vídeo o un mapa va de vidrio (.deiviator-vidrio): el mismo anillo, sobre un fondo
   translúcido y desenfocado. Sobre un color liso o sobre algo que ya es vidrio, como la cabecera, opaco.
   Una diferencia a propósito: el texto del principal es blanco, no el tono 50 del producto (#FFF4F2), que sobre el 600 se queda en
   4,19:1 y no llega a AA. El blanco da 4,51:1.
   Antes (4-11-2026): coral con texto en carbón, filete de 2 px y sombra, de la web original. Dos botones juntos van siempre a 5 px. */
:root {
	--deiviator-boton-radio: 0.5rem;
	--deiviator-curva-boton: cubic-bezier(0, 0, 0.2, 1);
	--deiviator-sec-fondo: var(--wp--preset--color--surface);
	--deiviator-sec-encima: var(--wp--preset--color--boton-gris-encima);
	--deiviator-sec-texto: var(--wp--preset--color--boton-gris);
	--deiviator-sec-anillo: color-mix(in oklab, var(--wp--preset--color--boton-gris) 10%, transparent);
	--deiviator-vidrio-fondo: rgb(255 255 255 / 0.62);
	--deiviator-vidrio-encima: rgb(255 255 255 / 0.78);
}

:root[data-theme="dark"] {
	--deiviator-sec-fondo: rgb(255 255 255 / 0.05);
	--deiviator-sec-encima: rgb(255 255 255 / 0.1);
	--deiviator-sec-anillo: rgb(255 255 255 / 0.2);
	--deiviator-vidrio-fondo: rgb(255 255 255 / 0.08);
	--deiviator-vidrio-encima: rgb(255 255 255 / 0.14);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--deiviator-sec-fondo: rgb(255 255 255 / 0.05);
		--deiviator-sec-encima: rgb(255 255 255 / 0.1);
		--deiviator-sec-anillo: rgb(255 255 255 / 0.2);
		--deiviator-vidrio-fondo: rgb(255 255 255 / 0.08);
		--deiviator-vidrio-encima: rgb(255 255 255 / 0.14);
	}
}

.wp-block-buttons.wp-block-buttons {
	align-items: center;
	gap: 0.3125rem;
}

.wp-block-button .wp-block-button__link,
.wp-block-navigation .is-style-cta > .wp-block-navigation-item__content,
.deiviator-form .wp-element-button,
.login-submit input {
	background: var(--wp--preset--color--cta);
	border: 0;
	border-radius: var(--deiviator-boton-radio);
	box-shadow: none;
	color: var(--wp--preset--color--sobre-cta);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: normal;
	line-height: 1.25rem;
}

/* xl, el tamaño grande del producto: 44 px, con icono o sin él. */
.wp-block-button .wp-block-button__link,
.deiviator-form .wp-element-button {
	align-items: center;
	box-sizing: border-box;
	display: inline-flex;
	gap: 0.375rem;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.75rem 1rem;
}

.login-submit input {
	cursor: pointer;
	padding: 0.75rem 1rem;
}

.wp-block-button .wp-block-button__link svg,
.deiviator-form .wp-element-button svg {
	flex: none;
	height: 1.25rem;
	width: 1.25rem;
}

.wp-block-button .wp-block-button__link:hover,
.wp-block-navigation .is-style-cta > .wp-block-navigation-item__content:hover,
.deiviator-form .wp-element-button:hover,
.login-submit input:hover {
	background: var(--wp--preset--color--cta-encima);
	box-shadow: none;
	color: var(--wp--preset--color--sobre-cta);
}

.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link,
.deiviator-boton-secundario,
.deiviator-header-bar .deiviator-acceso > .wp-block-navigation-item__content {
	background: var(--deiviator-sec-fondo);
	border: 0;
	border-radius: var(--deiviator-boton-radio);
	box-shadow: 0 0 0 1px var(--deiviator-sec-anillo);
	color: var(--deiviator-sec-texto);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: normal;
	line-height: 1.25rem;
}

.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link,
.deiviator-boton-secundario {
	padding: 0.75rem 1rem;
}

.deiviator-boton-secundario {
	align-items: center;
	box-sizing: border-box;
	cursor: pointer;
	display: inline-flex;
	gap: 0.375rem;
	justify-content: center;
	min-height: 2.75rem;
	text-decoration: none;
}

.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.deiviator-boton-secundario:hover,
.deiviator-header-bar .deiviator-acceso > .wp-block-navigation-item__content:hover {
	background: var(--deiviator-sec-encima);
	box-shadow: 0 0 0 1px var(--deiviator-sec-anillo);
	color: var(--deiviator-sec-texto);
}

/* De vidrio, sobre una foto, un vídeo o un mapa: el mismo anillo sobre un fondo translúcido. Solo donde el navegador desenfoca lo
   de detrás, y no para quien pide menos transparencia o más contraste: ahí se queda opaco, que es el mismo botón. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.wp-block-buttons .wp-block-button.is-style-outline.deiviator-vidrio > .wp-block-button__link,
	.deiviator-boton-secundario.deiviator-vidrio {
		background: var(--deiviator-vidrio-fondo);
		-webkit-backdrop-filter: blur(12px) saturate(160%);
		backdrop-filter: blur(12px) saturate(160%);
	}

	.wp-block-buttons .wp-block-button.is-style-outline.deiviator-vidrio > .wp-block-button__link:hover,
	.deiviator-boton-secundario.deiviator-vidrio:hover {
		background: var(--deiviator-vidrio-encima);
	}
}

/* Cada una en su consulta: Safari no conoce prefers-reduced-transparency, y metida con la otra en un «not (… or …)» anulaba el vidrio
   para todos. */
@media (prefers-reduced-transparency: reduce) {
	.wp-block-buttons .wp-block-button.is-style-outline.deiviator-vidrio > .wp-block-button__link,
	.deiviator-boton-secundario.deiviator-vidrio {
		background: var(--deiviator-sec-fondo);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

@media (prefers-contrast: more) {
	.wp-block-buttons .wp-block-button.is-style-outline.deiviator-vidrio > .wp-block-button__link,
	.deiviator-boton-secundario.deiviator-vidrio {
		background: var(--deiviator-sec-fondo);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* «Ver vídeo»: un enlace pequeño en su propia línea, subrayado, con el icono en un círculo. */
.deiviator-boton-video {
	font-size: var(--wp--preset--font-size--small);
	margin-top: var(--wp--preset--spacing--20);
}

.deiviator-boton-video a {
	align-items: center;
	color: var(--wp--preset--color--on-surface);
	display: inline-flex;
	font-weight: 600;
	gap: 0.625rem;
	text-decoration: none;
}

.deiviator-boton-video__texto {
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.deiviator-boton-video a:hover .deiviator-boton-video__texto {
	text-decoration-color: var(--wp--preset--color--coral);
	text-decoration-thickness: 2px;
}

.deiviator-boton-video__circulo {
	align-items: center;
	background: var(--wp--preset--color--coral);
	border-radius: 50%;
	box-shadow: 0 3px 6px rgb(0 0 0 / 0.14);
	color: var(--wp--preset--color--carbon);
	display: inline-flex;
	flex: none;
	height: 2rem;
	justify-content: center;
	position: relative;
	width: 2rem;
}

.deiviator-boton-video__circulo svg {
	height: 0.875rem;
	/* Centrado óptico: un triángulo centrado por su caja parece caído a la izquierda. */
	transform: translateX(4%);
	width: 0.875rem;
}

/* Las tarjetas de Soluciones: la foto a toda la tarjeta y, por debajo del texto, un degradado hasta el 60 % de negro. El
   desenfoque progresivo va dentro de la imagen (contenido/extender-fotos.py). */
.deiviator-solucion {
	aspect-ratio: 504 / 600;
	background: var(--wp--preset--color--carbon);
	border-radius: var(--deiviator-radio-tarjeta);
	display: flex;
	flex-direction: column;
	isolation: isolate;
	justify-content: flex-end;
	min-height: 30rem;
	overflow: hidden;
	position: relative;
}

.deiviator-solucion::before {
	background: linear-gradient(to bottom, transparent 50%, rgb(0 0 0 / 0.05) 54%, rgb(0 0 0 / 0.16) 58%, rgb(0 0 0 / 0.31) 62%, rgb(0 0 0 / 0.46) 66%, rgb(0 0 0 / 0.56) 70%, rgb(0 0 0 / 0.6) 75%);
	content: "";
	inset: 0;
	position: absolute;
	z-index: -1;
}

.deiviator-solucion__foto {
	inset: 0;
	margin: 0;
	position: absolute;
	z-index: -2;
}

.deiviator-solucion__foto img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: 50% 0;
	width: 100%;
}

.deiviator-solucion__texto {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	padding: var(--wp--preset--spacing--30);
}

.deiviator-solucion__texto > * {
	margin-block: 0;
}

.deiviator-solucion h3 {
	color: #fff;
	/* El título de tarjeta de toda la web (David, 8-11-2026). Antes, 16 px: a 14 se distinguía poco del texto (5-11-2026). */
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.25;
}

.deiviator-solucion p {
	color: rgb(255 255 255 / 0.88);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.deiviator-solucion p.deiviator-tarjeta__flujo {
	color: #ffcdc8;
	font-weight: 500;
	margin-top: 0;
	padding-top: 0.25rem;
}

.deiviator-solucion a {
	color: #fff;
}

/* La tarjeta entera es el enlace, sin envolverla: el enlace se estira por encima de ella. */
.deiviator-solucion .deiviator-enlace-flecha a::before {
	content: "";
	inset: 0;
	position: absolute;
}

/* Títulos y textos a la misma altura en todas las tarjetas (David, 8-11-2026). Antes se alineaban desde abajo y cada título caía
   donde lo dejaba su texto. Con subgrid, las tarjetas comparten las filas de la pista: un hueco arriba, título, texto, flujo y
   botón. Cada fila mide lo que la más alta de todas, así que los títulos empiezan a la misma altura y el botón va pegado abajo. El
   velo oscuro sale del título hacia abajo, esté donde esté. Sin subgrid se queda como antes, alineado desde abajo. */
@supports (grid-template-rows: subgrid) {
	.deiviator-carrusel__pista:has(> .deiviator-solucion) {
		--deiviator-solucion-ancho: min(31.5rem, 86vw);
		display: grid;
		grid-auto-columns: var(--deiviator-solucion-ancho);
		grid-auto-flow: column;
		grid-template-rows: minmax(0, 1fr) repeat(4, auto);
		/* La altura la pone la pista: una tarjeta en subgrid mide lo que sus filas, y sin una altura definida el hueco de arriba se
		   quedaba en cero. La proporción de antes (504 × 600), con su mínimo de 30 rem. */
		height: max(30rem, calc(var(--deiviator-solucion-ancho) * 600 / 504));
		row-gap: 0;
	}

	.deiviator-carrusel__pista > .deiviator-solucion {
		aspect-ratio: auto;
		display: grid;
		grid-row: 1 / -1;
		grid-template-rows: subgrid;
		min-height: 0;
	}

	.deiviator-carrusel__pista > .deiviator-solucion::before {
		background: linear-gradient(to bottom, transparent, rgb(0 0 0 / 0.16) 2.5rem, rgb(0 0 0 / 0.46) 5rem, rgb(0 0 0 / 0.6) 7rem);
		grid-column: 1;
		grid-row: 2 / -1;
		inset: auto;
		margin-top: -7rem;
		position: static;
	}

	.deiviator-solucion .deiviator-solucion__texto {
		display: grid;
		gap: 0;
		grid-column: 1;
		grid-row: 2 / -1;
		grid-template-rows: subgrid;
	}

	/* Apoyado en el fondo de su fila: si un título de otra tarjeta ocupa dos líneas, el de una línea no se queda separado de su texto
	   por una línea vacía. Párrafos, flujo y botón caen a la misma altura en todas. */
	.deiviator-solucion__texto > h3 {
		align-self: end;
		grid-row: 1;
	}

	.deiviator-solucion__texto > p:not(.deiviator-tarjeta__flujo, .deiviator-enlace-flecha, .deiviator-solucion__externo) {
		grid-row: 2;
		margin-top: 0.375rem;
	}

	.deiviator-solucion__texto > .deiviator-tarjeta__flujo {
		align-self: end;
		grid-row: 3;
	}

	.deiviator-solucion__texto > .deiviator-enlace-flecha {
		grid-row: 4;
	}

	/* La nota de la web externa (Movilidad bajo demanda, que no lleva flujo) ocupa el sitio del flujo. Todo en la primera columna: una
	   pieza sin fila abría una segunda y el título se quedaba con la mitad del ancho. */
	.deiviator-solucion__texto > .deiviator-solucion__externo {
		align-self: end;
		grid-row: 3;
	}

	.deiviator-solucion__texto > * {
		grid-column: 1;
	}
}

/* El botón de la tarjeta: el cuerpo de los del sistema (radio de 8 px, filete de 2 px arriba, 48 px de alto), de vidrio. No lleva
   backdrop-filter: la parte de abajo de la foto ya va desenfocada dentro de la imagen, así que basta con la transparencia y los cantos
   de luz, sin coste para la tarjeta. Además, un backdrop-filter haría del botón el bloque de referencia del enlace estirado, y la
   tarjeta dejaría de ser clicable entera. */
.deiviator-solucion p.deiviator-enlace-flecha {
	justify-self: start;
	margin-top: var(--wp--preset--spacing--20);
}

.deiviator-solucion p.deiviator-enlace-flecha a {
	/* El secundario del producto en oscuro, que es lo que hay detrás (ver «Botones»): blanco translúcido con anillo blanco al 20 %. Sin
	   backdrop-filter: la foto ya va desenfocada por abajo, y el filtro haría del botón el bloque de referencia del enlace estirado. */
	align-items: center;
	background: rgb(255 255 255 / 0.1);
	border-radius: var(--deiviator-boton-radio);
	box-shadow: 0 0 0 1px rgb(255 255 255 / 0.2);
	box-sizing: border-box;
	color: #fff;
	display: inline-flex;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	gap: 0.375rem;
	line-height: 1.25rem;
	min-height: 2.75rem;
	padding: 0.75rem 1rem;
	text-decoration: none;
	transition: background-color 120ms var(--deiviator-curva-boton);
}

.deiviator-solucion p.deiviator-enlace-flecha a::after {
	margin-inline-start: 0;
}

.deiviator-solucion:hover p.deiviator-enlace-flecha a,
.deiviator-solucion p.deiviator-enlace-flecha a:focus-visible {
	background-color: rgb(255 255 255 / 0.18);
}

.deiviator-solucion p.deiviator-enlace-flecha a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* Quien pide menos transparencia o más contraste, un botón opaco. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
	.deiviator-solucion p.deiviator-enlace-flecha a {
		background: rgb(0 0 0 / 0.72);
	}
}

@media (max-width: 620px) {
	.deiviator-solucion::before {
		background: linear-gradient(to bottom, transparent 38%, rgb(0 0 0 / 0.08) 43%, rgb(0 0 0 / 0.26) 48%, rgb(0 0 0 / 0.46) 53%, rgb(0 0 0 / 0.56) 58%, rgb(0 0 0 / 0.6) 63%);
	}
}

/* Microinteracciones. Todo lo que se mueve va aquí, y con movimiento reducido no se mueve nada. */
.deiviator-enlace-flecha a {
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.deiviator-enlace-flecha a:hover {
	text-decoration-color: currentColor;
}

a.deiviator-enlace-flecha::after,
p.deiviator-enlace-flecha a::after {
	display: inline-block;
	margin-inline-start: 0.25em;
	text-decoration: none;
}

.deiviator-campo input:not([type="checkbox"]):focus,
.deiviator-campo select:focus,
.deiviator-campo textarea:focus {
	border-color: var(--wp--preset--color--coral);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--coral) 30%, transparent);
	outline: none;
}

@media (prefers-reduced-motion: no-preference) {
	/* Botones: como en el producto (8-11-2026). El color cambia en 120 ms y, al pulsar, el botón se encoge al 97 % en 80 ms. Antes
	   subían 2 px al pasar, con una sombra, y el icono crecía; en el panel no lo hacen. */
	.wp-block-button .wp-block-button__link,
	.wp-block-navigation .is-style-cta > .wp-block-navigation-item__content,
	.deiviator-header-bar .deiviator-acceso > .wp-block-navigation-item__content,
	.deiviator-form .wp-element-button,
	.deiviator-boton-secundario,
	.login-submit input {
		transition: background-color 120ms var(--deiviator-curva-boton), color 120ms var(--deiviator-curva-boton), scale 120ms var(--deiviator-curva-boton);
	}

	.wp-block-button .wp-block-button__link:active,
	.wp-block-navigation .is-style-cta > .wp-block-navigation-item__content:active,
	.deiviator-header-bar .deiviator-acceso > .wp-block-navigation-item__content:active,
	.deiviator-form .wp-element-button:active,
	.deiviator-boton-secundario:active,
	.login-submit input:active {
		scale: 0.97;
		transition-duration: 80ms;
	}

	/* Ver vídeo: el círculo late como el destino del mapa, y crece al pasar por encima. */
	.deiviator-boton-video__circulo {
		transition: box-shadow var(--deiviator-t-media) var(--deiviator-ease-effect), transform var(--deiviator-t-media) var(--deiviator-spring);
	}

	.deiviator-boton-video__circulo::after {
		animation: deiviator-radar 2.6s var(--deiviator-ease-effect) infinite;
		border-radius: 50%;
		box-shadow: 0 0 0 1px var(--wp--preset--color--coral);
		content: "";
		inset: 0;
		pointer-events: none;
		position: absolute;
	}

	.deiviator-boton-video a:hover .deiviator-boton-video__circulo {
		box-shadow: 0 6px 14px rgb(247 76 60 / 0.4);
		transform: scale(1.12);
	}

	.deiviator-boton-video a:active .deiviator-boton-video__circulo {
		transform: scale(0.94);
		transition-duration: 0.1s;
	}

	.deiviator-boton-video__texto {
		transition: text-decoration-color var(--deiviator-t-rapida) var(--deiviator-ease-effect);
	}

	/* La flecha de los enlaces avanza. */
	a.deiviator-enlace-flecha::after,
	p.deiviator-enlace-flecha a::after {
		transition: transform var(--deiviator-t-media) var(--deiviator-spring);
	}

	a.deiviator-enlace-flecha:hover::after,
	p.deiviator-enlace-flecha a:hover::after,
	.deiviator-solucion:hover .deiviator-enlace-flecha a::after {
		transform: translateX(0.25em);
	}

	/* Tarjetas de Soluciones: la foto se acerca. */
	.deiviator-solucion__foto img {
		transition: transform var(--deiviator-t-lenta) var(--deiviator-ease-effect);
	}

	.deiviator-solucion:hover .deiviator-solucion__foto img {
		transform: scale(1.04);
	}

	.deiviator-solucion {
		transition: box-shadow var(--deiviator-t-media) var(--deiviator-ease-effect), transform var(--deiviator-t-media) var(--deiviator-spring);
	}

	.deiviator-solucion:hover {
		box-shadow: var(--deiviator-sombra-hover);
		transform: translateY(-3px);
	}

	/* Las demás tarjetas, solo si llevan a alguna parte. */
	.deiviator-tarjeta {
		transition: box-shadow var(--deiviator-t-media) var(--deiviator-ease-effect), transform var(--deiviator-t-media) var(--deiviator-spring);
	}

	.deiviator-tarjeta:has(a):hover {
		box-shadow: var(--deiviator-sombra-hover);
		transform: translateY(-3px);
	}

	/* Flechas del carrusel. */
	.deiviator-carrusel__boton:hover:not([aria-disabled="true"]) svg {
		transform: scale(1.12);
	}

	.deiviator-carrusel__boton svg {
		transition: transform var(--deiviator-t-media) var(--deiviator-spring);
	}

	.deiviator-carrusel__boton:active:not([aria-disabled="true"]) {
		transform: scale(0.92);
	}

	/* Campos de formulario. */
	.deiviator-campo input:not([type="checkbox"]),
	.deiviator-campo select,
	.deiviator-campo textarea {
		transition: border-color var(--deiviator-t-rapida) var(--deiviator-ease-effect), box-shadow var(--deiviator-t-rapida) var(--deiviator-ease-effect);
	}

	/* Los avatares se abren un poco. Todo en un solo transform, con variables: la apertura, la subida del que está bajo el puntero y el tirón
	   del imán (bento.js) se suman en vez de pisarse. */
	.deiviator-avatares > * {
		position: relative;
		transform: translate(calc(var(--deiviator-avatar-abre, 0rem) + var(--deiviator-avatar-x, 0px)), calc(var(--deiviator-avatar-sube, 0rem) + var(--deiviator-avatar-y, 0px))) scale(var(--deiviator-avatar-escala, 1));
		transition: transform var(--deiviator-t-media) var(--deiviator-spring);
	}

	.deiviator-avatares:hover > *:nth-child(1) { --deiviator-avatar-abre: -0.25rem; }
	.deiviator-avatares:hover > *:nth-child(2) { --deiviator-avatar-abre: -0.125rem; }
	.deiviator-avatares:hover > *:nth-child(4) { --deiviator-avatar-abre: 0.125rem; }
	.deiviator-avatares:hover > *:nth-child(5) { --deiviator-avatar-abre: 0.25rem; }
}

@keyframes deiviator-radar {
	0% {
		opacity: 0.7;
		transform: scale(1);
	}

	70%,
	100% {
		opacity: 0;
		transform: scale(1.65);
	}
}

/* El bloque de demo ------------------------------------------------------------
   Dos cartas, como en la web actual. A la izquierda la presentadora, en vertical y sin márgenes: la altura es la del bloque y el ancho
   sale de su proporción. A la derecha el panel. --deiviator-demo-alto es lo único que manda: de él sale todo lo demás. */

.deiviator-demo {
	--deiviator-demo-alto: 45rem;
	box-sizing: border-box;
	display: grid;
	gap: 0.625rem;
	grid-template-columns: calc(var(--deiviator-demo-alto) * 9 / 16) minmax(0, 1fr);
	margin: var(--wp--preset--spacing--60) auto;
	/* Cuelga de la página, sin el relleno de las secciones: lo resta aquí para hacer la misma caja que ellas. */
	max-width: min(var(--wp--style--global--content-size), calc(100% - 2 * var(--wp--style--root--padding-left)));
	width: 100%;
}

.deiviator-demo__carta {
	background: var(--wp--preset--color--carbon);
	border-radius: var(--deiviator-radio-tarjeta);
	margin: 0;
	overflow: hidden;
	position: relative;
}

.deiviator-demo__video {
	display: block;
	height: 100%;
	inset: 0;
	object-fit: cover;
	object-position: 50% 15%;
	position: absolute;
	width: 100%;
}

/* Los dos únicos mandos, encima del vídeo. */
.deiviator-demo__mandos {
	bottom: 0.875rem;
	display: flex;
	gap: 0.3125rem;
	position: absolute;
	right: 0.875rem;
}

.deiviator-demo__mandos[hidden] {
	display: none;
}

.deiviator-demo__mando {
	align-items: center;
	-webkit-backdrop-filter: blur(10px) saturate(160%);
	backdrop-filter: blur(10px) saturate(160%);
	background: rgb(20 20 20 / 0.5);
	border: 0;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.24), 0 4px 12px rgb(0 0 0 / 0.24);
	color: #fff;
	cursor: pointer;
	display: flex;
	height: 2.75rem;
	justify-content: center;
	padding: 0;
	width: 2.75rem;
}

.deiviator-demo__mando:hover {
	background: rgb(20 20 20 / 0.72);
}

.deiviator-demo__mando:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.deiviator-demo__mando svg {
	display: block;
	height: 1.25rem;
	width: 1.25rem;
}

.deiviator-demo__mando[aria-pressed="false"] [data-icono="encendido"],
.deiviator-demo__mando[aria-pressed="true"] [data-icono="apagado"] {
	display: none;
}

/* El panel: el gris y los campos oscuros de la web actual, sacados de la paleta. */
.deiviator-demo__panel {
	background: var(--deiviator-fondo-oscuro);
	border-radius: var(--deiviator-radio-tarjeta);
	box-sizing: border-box;
	color: var(--wp--preset--color--sobre-carbon);
	color-scheme: dark;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	min-height: var(--deiviator-demo-alto);
	min-width: 0;
	padding: clamp(1.5rem, 3vw, 2.5rem);
}

.deiviator-demo__panel h2,
.deiviator-demo__panel h3 {
	color: inherit;
	margin: 0;
}

.deiviator-demo__panel h2 {
	/* h2 de sección, también dentro de un panel (8-11-2026). */
	font-size: var(--wp--preset--font-size--titular);
	line-height: 1.1;
}

.deiviator-demo__panel h3 {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.15;
}

.deiviator-demo__panel p {
	color: var(--wp--preset--color--sobre-carbon-2);
}

.deiviator-demo__cabeza p {
	margin: 0.375rem 0 0;
}

.deiviator-demo__panel .deiviator-form {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0;
}

.deiviator-demo__panel {
	/* El coral sobre este gris se queda justo en texto pequeño: un poco más claro pasa holgado en los dos esquemas. */
	--deiviator-demo-acento: color-mix(in srgb, var(--wp--preset--color--coral) 78%, #fff);
}

.deiviator-demo__panel .deiviator-form a {
	color: var(--deiviator-demo-acento);
}

.deiviator-demo__panel .deiviator-form__aviso {
	color: var(--wp--preset--color--sobre-carbon);
	margin-bottom: var(--wp--preset--spacing--20);
}

/* Los pasos. El progreso es una barra por paso, con su nombre: los ya vistos se pueden volver a abrir. */
.deiviator-pasos__progreso {
	display: grid;
	gap: 0.375rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0;
}

.deiviator-pasos__progreso[hidden] {
	display: none;
}

.deiviator-pasos__progreso button {
	background: none;
	border: 0;
	border-top: 3px solid rgb(255 255 255 / 0.18);
	color: var(--wp--preset--color--sobre-carbon-2);
	cursor: pointer;
	display: flex;
	font: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	gap: 0.375rem;
	line-height: 1.25;
	padding: 0.5rem 0 0;
	text-align: left;
	width: 100%;
}

.deiviator-pasos__progreso button:disabled {
	cursor: default;
}

.deiviator-pasos__progreso button:not(:disabled):hover {
	color: var(--wp--preset--color--sobre-carbon);
}

.deiviator-pasos__progreso button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.deiviator-pasos__progreso li.hecho button,
.deiviator-pasos__progreso li[aria-current] button {
	border-top-color: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--sobre-carbon);
}

.deiviator-pasos__progreso li[aria-current] button {
	font-weight: 600;
}

.deiviator-pasos__estado {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.deiviator-paso:focus {
	outline: none;
}

.deiviator-paso + .deiviator-paso {
	margin-top: var(--wp--preset--spacing--40);
}

/* Con demo.js los pasos ocupan la misma celda: el panel no cambia de alto al pasar de uno a otro. */
.deiviator-pasos--viva .deiviator-pasos__cuerpo {
	display: grid;
	flex: 1;
}

.deiviator-pasos--viva .deiviator-paso {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	transform: translateY(0.5rem);
	visibility: hidden;
}

.deiviator-pasos--viva .deiviator-paso.activo {
	opacity: 1;
	transform: none;
	visibility: visible;
}

/* El tipo de cliente: tarjetas más anchas que altas, tres por fila. */
.deiviator-perfiles {
	display: grid;
	gap: 0.3125rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.deiviator-perfil {
	cursor: pointer;
	display: flex;
	min-width: 0;
	position: relative;
}

.deiviator-perfil input {
	appearance: none;
	cursor: pointer;
	inset: 0;
	margin: 0;
	opacity: 0;
	position: absolute;
}

.deiviator-perfil input + span {
	align-items: center;
	background: rgb(0 0 0 / 0.28);
	border-radius: var(--deiviator-radio-m);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14);
	color: var(--wp--preset--color--sobre-carbon);
	display: flex;
	flex: 1;
	font-size: var(--deiviator-texto-control);
	font-weight: 500;
	gap: 0.625rem;
	line-height: 1.2;
	min-height: 3.75rem;
	min-width: 0;
	padding: 0.625rem 0.75rem;
}

.deiviator-perfil__icono {
	align-items: center;
	background: rgb(255 255 255 / 0.1);
	border-radius: var(--deiviator-boton-radio);
	display: flex;
	flex: none;
	height: 2.25rem;
	justify-content: center;
	width: 2.25rem;
}

.deiviator-perfil__icono svg {
	display: block;
	height: 1.25rem;
	width: 1.25rem;
}

.deiviator-perfil:hover input + span {
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.42);
}

.deiviator-perfil input:focus-visible + span {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.deiviator-perfil input:checked + span {
	background: var(--wp--preset--color--coral);
	box-shadow: none;
	color: var(--wp--preset--color--carbon);
	font-weight: 600;
}

.deiviator-perfil input:checked + span .deiviator-perfil__icono {
	background: var(--wp--preset--color--carbon);
	color: var(--wp--preset--color--coral);
}

/* Los vehículos: el deslizador nativo, con el tramo elegido relleno. El relleno llega al centro del tirador, no a su borde. */
.deiviator-deslizador {
	--deiviator-tirador: 1.5rem;
	margin-top: var(--wp--preset--spacing--30);
}

.deiviator-deslizador__cabeza {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	justify-content: space-between;
	margin-bottom: 0.375rem;
}

.deiviator-demo .deiviator-deslizador label {
	color: var(--wp--preset--color--sobre-carbon);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	margin: 0;
}

.deiviator-deslizador output {
	color: var(--deiviator-demo-acento);
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.deiviator-deslizador output[hidden] {
	display: none;
}

.deiviator-demo .deiviator-deslizador input[type="range"] {
	appearance: none;
	background: none;
	border: 0;
	box-shadow: none;
	cursor: pointer;
	display: block;
	height: 2.25rem;
	margin: 0;
	padding: 0;
	width: 100%;
}

.deiviator-deslizador input[type="range"]::-webkit-slider-runnable-track {
	background: linear-gradient(to right, var(--wp--preset--color--coral) calc(var(--deiviator-tirador) / 2 + (100% - var(--deiviator-tirador)) * var(--p, 0)), rgb(255 255 255 / 0.18) 0);
	border-radius: 999px;
	height: 0.375rem;
}

.deiviator-deslizador input[type="range"]::-moz-range-track {
	background: linear-gradient(to right, var(--wp--preset--color--coral) calc(var(--deiviator-tirador) / 2 + (100% - var(--deiviator-tirador)) * var(--p, 0)), rgb(255 255 255 / 0.18) 0);
	border-radius: 999px;
	height: 0.375rem;
}

.deiviator-deslizador input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	background: #fff;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgb(0 0 0 / 0.4);
	height: var(--deiviator-tirador);
	margin-top: calc((0.375rem - var(--deiviator-tirador)) / 2);
	width: var(--deiviator-tirador);
}

.deiviator-deslizador input[type="range"]::-moz-range-thumb {
	background: #fff;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgb(0 0 0 / 0.4);
	height: var(--deiviator-tirador);
	width: var(--deiviator-tirador);
}

.deiviator-deslizador input[type="range"]:focus-visible {
	outline: none;
}

.deiviator-deslizador input[type="range"]:focus-visible::-webkit-slider-thumb {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.deiviator-deslizador input[type="range"]:focus-visible::-moz-range-thumb {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Cada marca centrada bajo su punto: el recorrido del tirador es el ancho menos el propio tirador. */
.deiviator-deslizador__escala {
	color: var(--wp--preset--color--sobre-carbon-2);
	display: flex;
	font-size: var(--wp--preset--font-size--x-small);
	font-variant-numeric: tabular-nums;
	justify-content: space-between;
	padding-inline: calc(var(--deiviator-tirador) / 2);
}

.deiviator-deslizador__escala span {
	display: flex;
	justify-content: center;
	white-space: nowrap;
	width: 0;
}

/* La última es la más larga: va alineada al final de la barra, para no salirse de la caja. */
.deiviator-deslizador__escala span:last-child {
	justify-content: flex-end;
	transform: translateX(calc(var(--deiviator-tirador) / 2));
}

/* Las preguntas. Cada chip lleva su casilla: redonda si se elige una, cuadrada si se pueden varias. Así se sabe sin leer nada, y
   marcar no ensancha el chip ni mueve a los demás. */
.deiviator-opciones-grupo {
	border: 0;
	margin: 0;
	min-width: 0;
	padding: 0;
}

.deiviator-opciones-grupo + .deiviator-opciones-grupo {
	margin-top: var(--wp--preset--spacing--30);
}

.deiviator-opciones-grupo legend {
	color: var(--wp--preset--color--sobre-carbon);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	margin-bottom: 0.5rem;
	padding: 0;
}

.deiviator-demo__panel .deiviator-opciones-ayuda {
	font-size: var(--wp--preset--font-size--x-small);
	margin: -0.25rem 0 0.5rem;
}

.deiviator-demo__panel .deiviator-opciones-falta {
	color: var(--deiviator-demo-acento);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	margin-top: 0.375rem;
}

.deiviator-opciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3125rem;
}

.deiviator-opcion {
	cursor: pointer;
	display: inline-flex;
	position: relative;
}

.deiviator-opcion[hidden] {
	display: none;
}

.deiviator-opcion input {
	appearance: none;
	cursor: pointer;
	inset: 0;
	margin: 0;
	opacity: 0;
	position: absolute;
}

.deiviator-opcion span {
	background: rgb(0 0 0 / 0.28);
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14);
	color: var(--wp--preset--color--sobre-carbon);
	display: block;
	font-size: var(--deiviator-texto-control);
	font-weight: 500;
	line-height: 1.2;
	padding: 0.5625rem 0.875rem 0.5625rem 2.0625rem;
	position: relative;
}

.deiviator-opcion span::before,
.deiviator-opcion span::after {
	content: "";
	height: 1rem;
	left: 0.75rem;
	margin-top: -0.5rem;
	position: absolute;
	top: 50%;
	width: 1rem;
}

.deiviator-opcion span::before {
	border-radius: 50%;
	box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.5);
}

.deiviator-opcion input[type="checkbox"] + span::before {
	border-radius: var(--deiviator-radio-xs);
}

.deiviator-opcion:hover span {
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.42);
}

.deiviator-opcion input:focus-visible + span {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.deiviator-opcion input:checked + span {
	background: var(--wp--preset--color--coral);
	box-shadow: none;
	color: var(--wp--preset--color--carbon);
}

.deiviator-opcion input:checked + span::before {
	background: var(--wp--preset--color--carbon);
	box-shadow: none;
}

.deiviator-opcion input:checked + span::after {
	background: var(--wp--preset--color--coral);
	-webkit-mask: url("iconos/check.svg") center / 0.75rem no-repeat;
	mask: url("iconos/check.svg") center / 0.75rem no-repeat;
}

/* El resumen de lo elegido, en el último paso. */
.deiviator-demo__panel .deiviator-pasos__resumen {
	background: rgb(0 0 0 / 0.22);
	border-radius: var(--deiviator-boton-radio);
	color: var(--wp--preset--color--sobre-carbon);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.4;
	margin-bottom: 0.625rem;
	padding: 0.625rem 0.875rem;
}

.deiviator-pasos__resumen button {
	background: none;
	border: 0;
	color: var(--deiviator-demo-acento);
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	padding: 0;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.deiviator-opciones-grupo + .deiviator-pasos__resumen {
	margin-top: var(--wp--preset--spacing--30);
}

/* Los campos: oscuros y sin borde, como en la web actual, con el rótulo dentro. El rótulo es un <label> de verdad: sube al escribir. */
.deiviator-campos {
	display: grid;
	gap: 0.625rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.deiviator-demo .deiviator-campo input:not([type="checkbox"]),
.deiviator-demo .deiviator-campo select {
	background: rgb(0 0 0 / 0.4);
	border: 1px solid transparent;
	border-radius: var(--deiviator-boton-radio);
	box-sizing: border-box;
	color: var(--wp--preset--color--sobre-carbon);
	font: inherit;
	height: 3.5rem;
	width: 100%;
}

.deiviator-demo .deiviator-campo input:not([type="checkbox"]) {
	padding: 1.25rem 0.9375rem 0.375rem;
}

.deiviator-campo--flotante {
	display: block;
	margin: 0;
	min-width: 0;
	position: relative;
}

.deiviator-demo .deiviator-campo--flotante label {
	color: var(--wp--preset--color--sobre-carbon-2);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	left: 1rem;
	line-height: 1;
	margin: 0;
	pointer-events: none;
	position: absolute;
	top: 1.25rem;
	transform-origin: 0 0;
}

.deiviator-demo .deiviator-campo--flotante input:focus + label,
.deiviator-demo .deiviator-campo--flotante input:not(:placeholder-shown) + label {
	transform: translateY(-0.6875rem) scale(0.8);
}

.deiviator-campo--telefono {
	display: grid;
	gap: 0.3125rem;
	grid-template-columns: 6rem minmax(0, 1fr);
	margin: 0;
}

.deiviator-demo .deiviator-campo--telefono select {
	padding: 0 0.5rem 0 0.75rem;
}

/* El pie del formulario: el consentimiento a un lado y los botones al otro, como en la web actual. */
.deiviator-pasos__pie {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--30);
}

.deiviator-demo__panel .deiviator-campo--check {
	color: var(--wp--preset--color--sobre-carbon);
	flex: 1 1 15rem;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.4;
	margin: 0;
}

.deiviator-demo__panel .deiviator-campo--check label {
	color: inherit;
	display: block;
	font-size: inherit;
	margin: 0;
	padding-inline-start: 1.625rem;
	position: relative;
}

.deiviator-demo__panel .deiviator-campo--check input {
	accent-color: var(--wp--preset--color--coral);
	height: 1.125rem;
	inset-inline-start: 0;
	margin: 0;
	position: absolute;
	top: 0;
	width: 1.125rem;
}

.deiviator-pasos--viva:not([data-ultimo]) .deiviator-campo--check {
	display: none;
}

.deiviator-pasos__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3125rem;
	margin-inline-start: auto;
}

.deiviator-demo .deiviator-pasos__botones [hidden] {
	display: none;
}

/* Enviado. */
.deiviator-pasos__hecho {
	align-items: center;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	justify-content: center;
	text-align: center;
}

.deiviator-pasos__hecho svg {
	color: var(--wp--preset--color--coral);
	height: 3.5rem;
	width: 3.5rem;
}

.deiviator-demo__panel .deiviator-pasos__hecho p {
	color: var(--wp--preset--color--sobre-carbon);
	font-size: var(--wp--preset--font-size--large);
	margin: 0;
	max-width: 24ch;
}

/* La videollamada, al pie del panel. */
.deiviator-demo__calendly {
	align-items: center;
	border-top: 1px solid rgb(255 255 255 / 0.14);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	justify-content: space-between;
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30);
}

.deiviator-demo__calendly > div {
	flex: 1 1 18rem;
	min-width: 0;
}

.deiviator-demo__calendly p {
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.4;
	margin: 0.25rem 0 0;
}

@media (prefers-reduced-motion: no-preference) {
	.deiviator-pasos--viva .deiviator-paso {
		transition: opacity var(--deiviator-t-rapida) var(--deiviator-ease-effect), transform var(--deiviator-t-media) var(--deiviator-spring), visibility 0s linear var(--deiviator-t-rapida);
	}

	.deiviator-pasos--viva .deiviator-paso.activo {
		transition: opacity var(--deiviator-t-media) var(--deiviator-ease-effect) 0.08s, transform var(--deiviator-t-media) var(--deiviator-spring) 0.08s, visibility 0s;
	}

	.deiviator-opcion span,
	.deiviator-opcion span::before {
		transition: background-color var(--deiviator-t-rapida) var(--deiviator-ease-effect), box-shadow var(--deiviator-t-rapida) var(--deiviator-ease-effect), color var(--deiviator-t-rapida) var(--deiviator-ease-effect);
	}

	.deiviator-opcion:active span {
		transform: scale(0.97);
	}

	.deiviator-pasos__progreso button {
		transition: border-color var(--deiviator-t-media) var(--deiviator-ease-effect), color var(--deiviator-t-rapida) var(--deiviator-ease-effect);
	}

	.deiviator-demo .deiviator-campo--flotante label {
		transition: transform var(--deiviator-t-rapida) var(--deiviator-ease-effect);
	}

	.deiviator-perfil input + span,
	.deiviator-perfil__icono {
		transition: background-color var(--deiviator-t-rapida) var(--deiviator-ease-effect), box-shadow var(--deiviator-t-rapida) var(--deiviator-ease-effect), color var(--deiviator-t-rapida) var(--deiviator-ease-effect);
	}

	.deiviator-perfil:active input + span {
		transform: scale(0.98);
	}

	.deiviator-deslizador input[type="range"]::-webkit-slider-thumb {
		transition: transform var(--deiviator-t-rapida) var(--deiviator-spring);
	}

	.deiviator-deslizador input[type="range"]:active::-webkit-slider-thumb {
		transform: scale(1.14);
	}

	.deiviator-demo__mando {
		transition: background-color var(--deiviator-t-rapida) var(--deiviator-ease-effect), transform var(--deiviator-t-media) var(--deiviator-spring);
	}

	.deiviator-demo__mando:hover {
		transform: scale(1.06);
	}

	.deiviator-demo__mando:active {
		transform: scale(0.94);
	}
}

/* Sin sitio para las dos cartas: una encima de otra. La presentadora, recortada para no empujar el formulario fuera de la pantalla. */
@media (max-width: 960px) {
	.deiviator-demo {
		grid-template-columns: minmax(0, 1fr);
	}

	.deiviator-demo__carta {
		aspect-ratio: 4 / 5;
		max-height: 34rem;
		width: 100%;
	}

	.deiviator-demo__panel {
		min-height: 0;
	}

	.deiviator-pasos--viva .deiviator-pasos__cuerpo {
		display: block;
	}

	.deiviator-pasos--viva .deiviator-paso:not(.activo) {
		display: none;
	}
}

@media (max-width: 620px) {
	.deiviator-campos {
		grid-template-columns: minmax(0, 1fr);
	}

	.deiviator-perfiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* En estrecho no caben todas las marcas: una de cada dos. */
	.deiviator-deslizador__escala span:nth-child(even) {
		visibility: hidden;
	}

	.deiviator-pasos__botones {
		width: 100%;
	}

	.deiviator-pasos__botones .wp-element-button {
		flex: 1;
	}

	.deiviator-demo__calendly .deiviator-boton-secundario {
		width: 100%;
	}
}

/* El pie --------------------------------------------------------------------------
   A todo el ancho, como la cabecera y como el pie de la web actual. Marca, enlaces y contacto arriba, y debajo la banda de las tres
   sedes con su foto. */

footer > .alignfull {
	padding-inline: clamp(var(--wp--style--root--padding-left), 4.17vw, 3.75rem);
}

footer > .alignfull > .deiviator-footer-grid,
footer > .alignfull > .deiviator-footer-bar {
	max-width: none;
}

.deiviator-footer-grid.deiviator-footer-grid {
	column-gap: clamp(1.5rem, 3vw, 3.5rem);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	row-gap: var(--wp--preset--spacing--40);
}

.deiviator-footer-brand,
.deiviator-pie-sedes {
	grid-column: 1 / -1;
}

.deiviator-footer-brand .wp-block-site-title {
	margin: 0;
}

.deiviator-pie-claim {
	color: var(--wp--preset--color--on-surface);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.01em;
	margin-block: 0.25rem 0;
}

.deiviator-pie-lema {
	line-height: 1.5;
	margin-block: var(--wp--preset--spacing--20) 0;
	max-width: 44ch;
}

.deiviator-pie-contacto ul + h2 {
	margin-top: var(--wp--preset--spacing--30);
}

.deiviator-pie-contacto li a {
	align-items: center;
	display: inline-flex;
	gap: 0.5rem;
}

.deiviator-pie-contacto li a svg {
	color: var(--wp--preset--color--primary);
	flex: none;
	height: 1.125rem;
	width: 1.125rem;
}

.deiviator-pie-columna .deiviator-pie-redes {
	display: flex;
	font-size: var(--wp--preset--font-size--large);
	gap: 0.875rem;
}

.deiviator-pie-columna .deiviator-pie-redes li {
	margin: 0;
}

.deiviator-pie-columna .deiviator-pie-redes a {
	color: var(--wp--preset--color--on-surface-variant);
	display: block;
}

.deiviator-pie-columna .deiviator-pie-redes a:hover {
	color: var(--wp--preset--color--primary);
}

.deiviator-pie-columna .deiviator-pie-redes svg {
	display: block;
	height: 1.5rem;
	width: 1.5rem;
}

/* Las sedes: cada una, su foto y su enlace al mapa. Toda la ficha es el enlace. */
.deiviator-pie-sedes {
	border-top: 1px solid var(--wp--preset--color--outline-variant);
	padding-top: var(--wp--preset--spacing--40);
}

.deiviator-pie-sedes h2 {
	color: var(--wp--preset--color--on-surface);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	margin: 0 0 var(--wp--preset--spacing--20);
}

.deiviator-pie-sedes ul {
	display: grid;
	gap: var(--wp--preset--spacing--30) clamp(1.5rem, 3vw, 3.5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.deiviator-sede {
	align-items: center;
	border-radius: var(--deiviator-radio-l);
	color: var(--wp--preset--color--on-surface-variant);
	display: flex;
	font-size: var(--wp--preset--font-size--small);
	gap: 1rem;
	line-height: 1.4;
	text-decoration: none;
}

.deiviator-sede:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
}

.deiviator-sede__foto {
	aspect-ratio: 1;
	background: var(--wp--preset--color--surface-container-high);
	border-radius: var(--deiviator-radio-l);
	flex: none;
	overflow: hidden;
	width: clamp(5.75rem, 7.6vw, 7rem);
}

.deiviator-sede__foto img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.deiviator-sede__datos {
	display: grid;
	gap: 0.125rem;
	min-width: 0;
}

.deiviator-sede strong {
	color: var(--wp--preset--color--on-surface);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

.deiviator-sede__ir {
	align-items: center;
	color: var(--wp--preset--color--primary);
	display: inline-flex;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	gap: 0.25rem;
	margin-top: 0.25rem;
}

.deiviator-sede__ir svg {
	height: 0.875rem;
	width: 0.875rem;
}

.deiviator-sede:hover .deiviator-sede__ir {
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	.deiviator-sede__foto img {
		transition: transform var(--deiviator-t-lenta) var(--deiviator-ease-effect);
	}

	.deiviator-sede:hover .deiviator-sede__foto img {
		transform: scale(1.07);
	}

	.deiviator-sede__ir svg {
		transition: transform var(--deiviator-t-media) var(--deiviator-spring);
	}

	.deiviator-sede:hover .deiviator-sede__ir svg {
		transform: translateX(0.1875rem);
	}

	.deiviator-pie-columna .deiviator-pie-redes a {
		transition: color var(--deiviator-t-rapida) var(--deiviator-ease-effect), transform var(--deiviator-t-media) var(--deiviator-spring);
	}

	.deiviator-pie-columna .deiviator-pie-redes a:hover {
		transform: translateY(-0.125rem);
	}
}

@media (min-width: 961px) {
	.deiviator-footer-grid.deiviator-footer-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.deiviator-footer-grid.deiviator-footer-grid {
		grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr));
	}

	.deiviator-footer-brand {
		grid-column: auto;
	}
}

/* La portada de un informe lleva texto: va entera, sin el recorte cuadrado de las fotos del hero. */
.deiviator-hero__foto--entera img {
	aspect-ratio: auto;
	height: auto;
	object-fit: contain;
}

/* Mosaicos que no llenan filas de tres: cuatro en una fila; cinco, tres arriba y dos más anchas debajo. */
@media (min-width: 782px) {
	.deiviator-mosaico--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.deiviator-mosaico--5 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.deiviator-mosaico--5 > * {
		grid-column: span 2;
	}

	.deiviator-mosaico--5 > :nth-last-child(-n + 2) {
		grid-column: span 3;
	}
}

/* Las insignias de las tiendas. */
.deiviator-tiendas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3125rem;
	margin: var(--wp--preset--spacing--20) 0 0;
}

.deiviator-tiendas a {
	border-radius: var(--deiviator-boton-radio);
	display: block;
}

.deiviator-tiendas img {
	display: block;
	height: 2.5rem;
	width: auto;
}

/* El Call Center con IA ([deiviator_llamada], 7-11-2026): un móvil con la llamada y, al lado, lo que se dice en burbujas. Sustituye al
   reproductor nativo y a las ondas decorativas, que iban cada uno por su lado (David). La escena ocupa lo mismo que la foto de la tarjeta
   vecina, 16:10 y a sangre, para que los títulos de las dos queden a la misma altura. El móvil sube desde abajo y se corta con la escena. */
.deiviator-llamada {
	container-type: inline-size;
	margin: 0 0 var(--wp--preset--spacing--20);
}

.deiviator-llamada__escena {
	aspect-ratio: 16 / 10;
	background: var(--deiviator-escenario);
	box-sizing: border-box;
	display: grid;
	gap: var(--wp--preset--spacing--20);
	grid-template-columns: minmax(0, 1fr) 34%;
	margin: 0 calc(-1 * var(--wp--preset--spacing--40));
	overflow: hidden;
	padding: 6% 8% 0 var(--wp--preset--spacing--40);
}

.deiviator-llamada__movil {
	aspect-ratio: 9 / 19;
	background: color-mix(in srgb, #000 70%, var(--wp--preset--color--carbon));
	/* Bordes concéntricos: el del móvil es el de la pantalla más el bisel. */
	--deiviator-radio-movil: calc(var(--deiviator-radio-xl) + 0.4rem);
	border-radius: var(--deiviator-radio-movil);
	box-shadow: 0 0 0 1px rgb(255 255 255 / 0.16), 0 1.5rem 3rem rgb(0 0 0 / 0.45);
	box-sizing: border-box;
	grid-column: 2;
	grid-row: 1;
	padding: 0.4rem;
}

.deiviator-llamada__pantalla {
	align-items: center;
	background: linear-gradient(to bottom, color-mix(in srgb, var(--wp--preset--color--sobre-carbon) 13%, var(--wp--preset--color--carbon)), var(--wp--preset--color--carbon) 70%);
	border-radius: var(--deiviator-radio-xl);
	box-sizing: border-box;
	color: var(--wp--preset--color--sobre-carbon);
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	height: 100%;
	padding: 2.6rem 0.6rem 1rem;
	position: relative;
	text-align: center;
}

.deiviator-llamada__isla {
	background: #000;
	border-radius: 999px;
	height: 1.1rem;
	left: 50%;
	position: absolute;
	top: 0.55rem;
	translate: -50% 0;
	width: 36%;
}

.deiviator-llamada__avatar {
	background: color-mix(in srgb, var(--wp--preset--color--coral) 22%, transparent);
	border-radius: 50%;
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--wp--preset--color--coral) 26%, transparent);
	color: var(--wp--preset--color--coral);
	display: grid;
	font-size: var(--wp--preset--font-size--x-large);
	height: 3.25rem;
	margin-bottom: 0.35rem;
	place-items: center;
	transition: box-shadow var(--deiviator-t-media) ease;
	width: 3.25rem;
}

.deiviator-llamada[data-habla="ia"] .deiviator-llamada__avatar {
	box-shadow: 0 0 0 0.45rem color-mix(in srgb, var(--wp--preset--color--coral) 26%, transparent);
}

.deiviator-llamada__nombre {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.2;
}

.deiviator-llamada__estado {
	color: var(--wp--preset--color--sobre-carbon-2);
	font-size: var(--wp--preset--font-size--x-small);
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
}

.deiviator-llamada__ondas {
	align-items: center;
	display: flex;
	gap: 3px;
	height: 2.75rem;
	justify-content: center;
	margin: 0.5rem 0 0.4rem;
	width: 100%;
}

.deiviator-llamada__ondas i {
	background: var(--wp--preset--color--sobre-carbon-2);
	border-radius: 999px;
	flex: 0 0 3px;
	height: 100%;
	transform: scaleY(0.2);
	transition: background-color var(--deiviator-t-rapida) ease;
}

.deiviator-llamada[data-habla="ia"] .deiviator-llamada__ondas i {
	background: var(--wp--preset--color--coral);
}

.deiviator-llamada[data-habla="cliente"] .deiviator-llamada__ondas i {
	background: var(--wp--preset--color--sobre-carbon);
}

/* Lo que se dice, dentro del móvil: solo cuando no caben las burbujas. */
.deiviator-llamada__subtitulo {
	display: none;
}

.deiviator-llamada__mandos {
	display: flex;
	gap: 0.9rem;
	justify-content: center;
	margin-top: 0.3rem;
}

.deiviator-llamada__boton {
	background: rgb(255 255 255 / 0.14);
	border: 0;
	border-radius: 50%;
	color: var(--wp--preset--color--sobre-carbon);
	cursor: pointer;
	display: grid;
	font-size: var(--wp--preset--font-size--large);
	height: 3.25rem;
	padding: 0;
	place-items: center;
	transition: background-color var(--deiviator-t-rapida) ease, transform var(--deiviator-t-pulsar) ease;
	width: 3.25rem;
}

.deiviator-llamada__boton[hidden] {
	display: none;
}

.deiviator-llamada__boton:hover {
	background: rgb(255 255 255 / 0.22);
}

.deiviator-llamada__boton:active {
	transform: scale(0.94);
}

.deiviator-llamada__boton:focus-visible {
	outline: 2px solid var(--wp--preset--color--sobre-carbon);
	outline-offset: 3px;
}

/* Fuera de la llamada, el principal es el de llamar, en coral. En la llamada pasa a pausa y el coral es para colgar. */
.deiviator-llamada__boton--principal,
.deiviator-llamada__boton--colgar,
.esta-en-curso .deiviator-llamada__boton--colgar {
	background: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--carbon);
}

.deiviator-llamada__boton--principal:hover,
.deiviator-llamada__boton--colgar:hover {
	background: color-mix(in srgb, #fff 14%, var(--wp--preset--color--coral));
}

.esta-en-curso .deiviator-llamada__boton--principal {
	background: rgb(255 255 255 / 0.14);
	color: var(--wp--preset--color--sobre-carbon);
}

.esta-en-curso .deiviator-llamada__boton--principal:hover {
	background: rgb(255 255 255 / 0.22);
}

.deiviator-llamada__boton > span {
	display: none;
	line-height: 0;
}

.deiviator-llamada__boton .es-llamar,
.esta-en-curso .deiviator-llamada__boton .es-seguir,
.esta-sonando .deiviator-llamada__boton .es-pausar {
	display: block;
}

.esta-en-curso .deiviator-llamada__boton .es-llamar,
.esta-sonando .deiviator-llamada__boton .es-seguir {
	display: none;
}

.deiviator-llamada__frases {
	align-self: end;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	grid-column: 1;
	grid-row: 1;
	list-style: none;
	margin: 0;
	min-width: 0;
	padding: 0 0 var(--wp--preset--spacing--40);
}

.deiviator-llamada__frases li {
	align-self: flex-start;
	background: color-mix(in srgb, var(--wp--preset--color--coral) 20%, transparent);
	border-radius: var(--deiviator-radio-l);
	border-bottom-left-radius: var(--deiviator-radio-xs);
	box-sizing: border-box;
	color: var(--wp--preset--color--sobre-carbon);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	max-width: 94%;
	padding: 0.55rem 0.8rem;
	transition: opacity var(--deiviator-t-media) ease;
}

.deiviator-llamada__frases li.es-cliente {
	align-self: flex-end;
	background: rgb(255 255 255 / 0.1);
	border-bottom-left-radius: var(--deiviator-radio-l);
	border-bottom-right-radius: var(--deiviator-radio-xs);
}

.deiviator-llamada__frases li:not(:last-child) {
	opacity: 0.5;
}

.deiviator-llamada__frases b {
	color: var(--wp--preset--color--sobre-carbon-2);
	display: block;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	margin-bottom: 0.1rem;
}

.deiviator-llamada__frases li.deiviator-llamada__pista {
	background: none;
	color: var(--wp--preset--color--sobre-carbon-2);
	max-width: 100%;
	opacity: 1;
	padding: 0;
}

.deiviator-llamada__audio {
	display: block;
	margin-top: var(--wp--preset--spacing--20);
	width: 100%;
}

.deiviator-llamada__audio[hidden] {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.deiviator-llamada__frases li:last-child:not(.deiviator-llamada__pista) {
		animation: deiviator-llamada-burbuja var(--deiviator-t-media) var(--deiviator-ease-effect, ease-out) both;
	}

	/* Una invitación a pulsar: el aro del botón de llamar, antes de la primera vez. */
	.esta-lista:not(.esta-en-curso):not(.esta-sonando) .deiviator-llamada__boton--principal {
		animation: deiviator-llamada-aro 2.4s ease-out infinite;
	}
}

@keyframes deiviator-llamada-burbuja {
	from {
		opacity: 0;
		transform: translateY(0.5rem);
	}
}

@keyframes deiviator-llamada-aro {
	0% {
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--wp--preset--color--coral) 50%, transparent);
	}

	70%,
	100% {
		box-shadow: 0 0 0 0.9rem transparent;
	}
}

/* Estrecho (el móvil, o la tarjeta en una columna estrecha): el móvil en el centro y lo que se dice, dentro de él. */
@container (max-width: 30rem) {
	.deiviator-llamada__escena {
		aspect-ratio: auto;
		grid-template-columns: minmax(0, 1fr);
		height: 25rem;
		justify-items: center;
		padding: var(--wp--preset--spacing--30) 0 0;
	}

	.deiviator-llamada__frases {
		display: none;
	}

	.deiviator-llamada__movil {
		grid-column: 1;
		width: min(15.5rem, 72%);
	}

	.deiviator-llamada__subtitulo {
		color: var(--wp--preset--color--sobre-carbon);
		display: block;
		font-size: var(--wp--preset--font-size--x-small);
		line-height: 1.35;
		min-height: 4em;
		padding: 0 0.2rem;
	}

	.deiviator-llamada__subtitulo[data-quien="ia"] {
		color: color-mix(in srgb, #fff 30%, var(--wp--preset--color--coral));
	}
}

/* Router API ([deiviator_api], 7-11-2026): la consola con los tres pasos de la API de despacho y con qué conecta. En la tarjeta a todo
   el ancho, el texto a la izquierda y la consola a la derecha; en una columna, la consola debajo. */
@media (min-width: 961px) {
	.deiviator-rejilla--2 > .deiviator-tarjeta:last-child:nth-child(odd):has(> .deiviator-api) {
		align-content: start;
		column-gap: var(--wp--preset--spacing--50);
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		grid-template-rows: auto auto auto minmax(0, 1fr);
	}

	.deiviator-rejilla--2 > .deiviator-tarjeta:last-child:nth-child(odd):has(> .deiviator-api) > .deiviator-checklist {
		margin-top: var(--wp--preset--spacing--20);
	}

	.deiviator-rejilla--2 > .deiviator-tarjeta:last-child:nth-child(odd):has(> .deiviator-api) > :not(.deiviator-api) {
		grid-column: 1;
	}

	.deiviator-rejilla--2 > .deiviator-tarjeta:last-child:nth-child(odd):has(> .deiviator-api) > .deiviator-api {
		grid-column: 2;
		grid-row: 1 / -1;
	}
}

.deiviator-api {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--20);
	min-width: 0;
}

.deiviator-api__ventana {
	background: color-mix(in srgb, #000 35%, var(--deiviator-fondo-oscuro));
	border-radius: var(--deiviator-radio-l);
	box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1), 0 1.25rem 2.5rem rgb(0 0 0 / 0.3);
	min-width: 0;
	overflow: hidden;
}

.deiviator-api__barra {
	align-items: center;
	border-bottom: 1px solid rgb(255 255 255 / 0.08);
	display: flex;
	gap: 0.4rem;
	padding: 0.7rem 1rem;
}

.deiviator-api__barra i {
	background: rgb(255 255 255 / 0.18);
	border-radius: 50%;
	height: 0.6rem;
	width: 0.6rem;
}

.deiviator-api__barra span {
	color: var(--wp--preset--color--sobre-carbon-2);
	font-size: var(--wp--preset--font-size--x-small);
	margin-inline-start: 0.5rem;
}

.deiviator-api__pestanas {
	border-bottom: 1px solid rgb(255 255 255 / 0.08);
	display: flex;
	gap: 0.25rem;
	overflow-x: auto;
	padding: 0.35rem 0.6rem 0;
}

.deiviator-api__pestanas [role="tab"] {
	align-items: center;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	color: var(--wp--preset--color--sobre-carbon-2);
	cursor: pointer;
	display: inline-flex;
	flex: none;
	font: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	gap: 0.45rem;
	margin-bottom: -1px;
	padding: 0.6rem 0.7rem;
	transition: color var(--deiviator-t-rapida) ease, border-color var(--deiviator-t-rapida) ease;
}

.deiviator-api__pestanas [role="tab"] span {
	background: rgb(255 255 255 / 0.1);
	border-radius: 50%;
	display: grid;
	font-size: var(--wp--preset--font-size--x-small);
	height: 1.35rem;
	place-items: center;
	transition: background-color var(--deiviator-t-rapida) ease, color var(--deiviator-t-rapida) ease;
	width: 1.35rem;
}

.deiviator-api__pestanas [role="tab"]:hover {
	color: var(--wp--preset--color--sobre-carbon);
}

.deiviator-api__pestanas [role="tab"][aria-selected="true"] {
	border-bottom-color: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--sobre-carbon);
}

.deiviator-api__pestanas [role="tab"][aria-selected="true"] span {
	background: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--carbon);
}

.deiviator-api__pestanas [role="tab"]:focus-visible,
.deiviator-api__panel:focus-visible {
	outline: 2px solid var(--wp--preset--color--sobre-carbon);
	outline-offset: -2px;
}

/* Sin JavaScript se ven los tres pasos seguidos, separados por una raya. */
.deiviator-api:not(.esta-lista) .deiviator-api__panel + .deiviator-api__panel {
	border-top: 1px solid rgb(255 255 255 / 0.08);
}

.deiviator-api__panel pre {
	color: var(--wp--preset--color--sobre-carbon);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var(--deiviator-texto-control);
	line-height: 1.6;
	margin: 0;
	overflow-x: auto;
	padding: 1rem 1.1rem 1.2rem;
	tab-size: 2;
	white-space: pre;
}

@media (max-width: 480px) {
	/* Las tres pestañas no caben con su número: el orden ya lo dice su sitio. */
	.deiviator-api__pestanas [role="tab"] span {
		display: none;
	}

	.deiviator-api__pestanas [role="tab"] {
		padding-inline: 0.55rem;
	}
}

@media (max-width: 620px) {
	.deiviator-api__panel pre {
		font-size: var(--wp--preset--font-size--x-small);
		padding: 0.85rem 0.8rem 1rem;
	}
}

/* Las tres pestañas miden lo mismo: al cambiar, la tarjeta no salta. */
.esta-lista .deiviator-api__panel pre {
	/* Veinte líneas el paso más largo, y una de margen: WebKit redondea distinto la altura de línea. */
	min-height: calc(21 * 1.6em);
}

.deiviator-api .es-metodo {
	color: var(--wp--preset--color--coral);
	font-weight: 600;
}

.deiviator-api .es-cabecera,
.deiviator-api .es-nota {
	color: var(--wp--preset--color--sobre-carbon-2);
}

.deiviator-api .es-clave {
	color: color-mix(in srgb, #fff 30%, var(--wp--preset--color--coral));
}

.deiviator-api .es-numero {
	color: rgb(255 214 140);
}

.deiviator-api .es-codigo {
	color: rgb(130 214 168);
	font-weight: 600;
}

.deiviator-api__conecta-titulo {
	color: var(--wp--preset--color--sobre-carbon-2);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	margin: 0;
}

/* Con la tarjeta delante: las listas de las tarjetas llevan su sangría y su margen. */
.deiviator-tarjeta .deiviator-api__conecta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.deiviator-api__conecta li {
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
	color: var(--wp--preset--color--sobre-carbon);
	font-size: var(--wp--preset--font-size--x-small);
	padding: 0.3rem 0.8rem;
}

/* La conversación escrita, al final de la tarjeta: para leerla en vez de escucharla. */
.deiviator-llamada__conversacion {
	font-size: var(--wp--preset--font-size--x-small);
	margin-top: var(--wp--preset--spacing--20);
}

.deiviator-llamada__conversacion summary {
	color: var(--wp--preset--color--sobre-carbon);
	cursor: pointer;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	width: fit-content;
}

.deiviator-llamada__conversacion ol {
	display: grid;
	gap: 0.4rem;
	list-style: none;
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: 0;
}

.deiviator-llamada__conversacion li {
	color: var(--wp--preset--color--sobre-carbon-2);
	line-height: 1.5;
}

.deiviator-llamada__conversacion b {
	color: var(--wp--preset--color--sobre-carbon);
	font-weight: 600;
}

/* El acceso de empleados: la tarjeta sobre el vídeo a todo el ancho. */
.deiviator-login {
	align-items: center;
	background: var(--wp--preset--color--carbon) center / cover no-repeat;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	margin-block: 0;
	min-height: max(42rem, calc(100svh - 6rem));
	overflow: hidden;
	padding: var(--wp--preset--spacing--50) var(--wp--style--root--padding-left);
	position: relative;
}

.deiviator-login__video {
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

.deiviator-login__tarjeta {
	background: var(--wp--preset--color--surface);
	border-radius: var(--deiviator-radio-tarjeta);
	box-shadow: 0 24px 60px rgb(0 0 0 / 0.35);
	box-sizing: border-box;
	color: var(--wp--preset--color--on-surface);
	max-width: 28rem;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	position: relative;
	width: 100%;
}

.deiviator-login__cabeza {
	align-items: center;
	display: flex;
	gap: 0.875rem;
	margin-bottom: var(--wp--preset--spacing--30);
}

.deiviator-login__icono {
	align-items: center;
	background: var(--wp--preset--color--coral);
	border-radius: 50%;
	color: var(--wp--preset--color--carbon);
	display: flex;
	flex: none;
	height: 3rem;
	justify-content: center;
	width: 3rem;
}

.deiviator-login__icono svg {
	display: block;
	height: 1.5rem;
	width: 1.5rem;
}

.deiviator-login h1 {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.1;
	margin: 0;
}

.deiviator-login__cabeza p {
	color: var(--wp--preset--color--on-surface-variant);
	font-size: var(--wp--preset--font-size--small);
	margin: 0.125rem 0 0;
}

.deiviator-login form p {
	margin: 0 0 0.875rem;
}

.deiviator-login form label {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	margin-bottom: 0.35rem;
}

.deiviator-login form input[type="text"],
.deiviator-login form input[type="password"] {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: var(--deiviator-boton-radio);
	box-sizing: border-box;
	color: var(--wp--preset--color--on-surface);
	font: inherit;
	padding: 0.75rem 0.9rem;
	width: 100%;
}

.deiviator-login form input[type="text"]:focus,
.deiviator-login form input[type="password"]:focus {
	border-color: var(--wp--preset--color--coral);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--coral) 30%, transparent);
	outline: none;
}

.deiviator-login form .login-remember label {
	align-items: center;
	display: flex;
	font-weight: 400;
	gap: 0.5rem;
	margin: 0;
}

.deiviator-login form .login-remember input {
	accent-color: var(--wp--preset--color--coral);
	margin: 0;
}

.deiviator-login form .login-submit {
	margin-bottom: 0;
}

.deiviator-login form .login-submit {
	position: relative;
}

.deiviator-login form .login-submit input {
	min-height: 2.75rem;
	padding-inline: 3.25rem 1.5rem;
	width: 100%;
}

/* El botón principal lleva icono. Un <input> no puede tenerlo dentro: va encima, y el texto se aparta para dejarle sitio. */
.deiviator-login form .login-submit::before {
	/* Del color del texto del botón principal (ver «Botones»). */
	background: var(--wp--preset--color--sobre-cta);
	content: "";
	height: 1.25rem;
	left: calc(50% - 2.5rem);
	-webkit-mask: url("iconos/user.svg") center / contain no-repeat;
	mask: url("iconos/user.svg") center / contain no-repeat;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 1.25rem;
	z-index: 1;
}

.deiviator-login__olvido {
	font-size: var(--wp--preset--font-size--small);
	margin: 0.75rem 0 0;
	text-align: center;
}

.deiviator-login__olvido a {
	color: var(--wp--preset--color--primary);
}

.deiviator-login__usuarios {
	border-top: 1px solid var(--wp--preset--color--outline-variant);
	margin: var(--wp--preset--spacing--20) 0 0;
	padding-top: var(--wp--preset--spacing--20);
}

.deiviator-login__usuarios a {
	width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.deiviator-login__video {
		display: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.deiviator-tiendas a {
		transition: transform var(--deiviator-t-media) var(--deiviator-spring);
	}

	.deiviator-tiendas a:hover {
		transform: translateY(-0.125rem);
	}
}

/* Sistema de diseño ---------------------------------------------------------------
   Lo que vale para toda la web. Ver docs/SISTEMA-DISENO.md. */

/* Tres pesos: 400, 500 y 600. «bolder» daba 700 en el texto y 900 dentro de un titular. */
strong,
b {
	font-weight: 600;
}

:where(h1, h2, h3, h4, h5, h6) :where(strong, b) {
	font-weight: inherit;
}

/* En una tarjeta ancha, igual. */
.deiviator-tarjeta p,
.deiviator-tarjeta li {
	max-width: 68ch;
}

/* El título de un documento arranca donde su texto, sin el ancho corto de los títulos de portada. */
.deiviator-hero--documento .wp-block-post-title.wp-block-post-title {
	max-width: var(--wp--style--global--content-size);
}

/* Las cabeceras de tabla, en el mismo peso que los demás. */
th {
	font-weight: 600;
}

/* Medida de lectura en los párrafos sueltos de sección y en las respuestas. */
.deiviator-faq .wp-block-details p,
.deiviator-seccion__interior > p {
	max-width: 68ch;
}

/* Etiquetas de formulario: 24 px como mínimo, para acertar con la casilla. */
.deiviator-campo--check label,
.deiviator-login form .login-remember label {
	min-height: 1.5rem;
}

/* En el móvil la frase más larga del titular va en dos líneas, y todas comparten hueco: las cortas quedaban flotando, con aire arriba y abajo.
   Con este ancho todas van en dos, y el titular se lee seguido. */
@media (max-width: 781px) {
	.deiviator-hero--ciudad .deiviator-rotador > span {
		max-width: 7.4em;
		text-wrap: balance;
	}
}

/* El precio de un plan no es un párrafo: sus líneas, juntas. */
.deiviator-plan__precio {
	line-height: 1.1;
}

/* El foco: un solo aspecto, y blanco sobre lo oscuro, donde el rojo no se distingue. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
select:focus-visible,
[tabindex="0"]:focus-visible {
	outline: 2px solid var(--deiviator-foco);
	outline-offset: 2px;
}

.deiviator-demo__panel,
.deiviator-tarjeta--oscura,
.deiviator-banda,
.deiviator-esquema,
.deiviator-page-header,
.deiviator-solucion,
.deiviator-tesela {
	--deiviator-foco: #fff;
}

/* Las anclas no se quedan debajo de la cabecera pegada. */
[id] {
	scroll-margin-top: calc(var(--deiviator-cabecera) + 1rem);
}

/* Preguntas frecuentes: reacciona toda la fila, no solo los 23 px del texto. */
.deiviator-faq .wp-block-details {
	padding: 0;
}

.deiviator-faq .wp-block-details > summary {
	border-radius: inherit;
	padding: var(--wp--preset--spacing--20) calc(var(--wp--preset--spacing--30) + 2.25em) var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

.deiviator-faq .wp-block-details > summary::before,
.deiviator-faq .wp-block-details > summary::after {
	inset-inline-end: var(--wp--preset--spacing--30);
}

.deiviator-faq .wp-block-details > summary:hover {
	background: color-mix(in srgb, var(--wp--preset--color--on-surface) 5%, transparent);
}

.deiviator-faq .wp-block-details > :not(summary) {
	margin-inline: var(--wp--preset--spacing--30);
}

.deiviator-faq .wp-block-details > :last-child:not(summary) {
	margin-bottom: var(--wp--preset--spacing--20);
}

/* Enlaces de texto: el subrayado no pisa las letras y engorda al pasar por encima. */
.deiviator-prose a,
.deiviator-documento a,
.deiviator-login__olvido a,
.deiviator-form a,
.wp-block-breadcrumbs a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.deiviator-prose a:hover,
.deiviator-documento a:hover,
.deiviator-login__olvido a:hover,
.deiviator-form a:hover,
.wp-block-breadcrumbs a:hover {
	text-decoration-thickness: 2px;
}

/* Etiqueta de categoría. */
.wp-block-post-terms.deiviator-chip:has(a):hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--on-primary-container) 12%, var(--wp--preset--color--primary-container)) !important;
}

/* Selector de idioma. */
.deiviator-idioma__boton {
	border-radius: var(--deiviator-boton-radio);
	min-height: 1.5rem;
}

.deiviator-idioma__boton:hover {
	background: color-mix(in srgb, var(--wp--preset--color--on-surface) 7%, transparent);
}

/* Las tarjetas de entrada son un enlace entero: el título se estira sobre toda la tarjeta, y la etiqueta queda por encima. */
.deiviator-post-card,
.deiviator-ultimas .wp-block-post {
	position: relative;
}

.deiviator-post-card__title a::after,
.deiviator-ultimas .wp-block-post-title a::after {
	content: "";
	inset: 0;
	position: absolute;
}

/* Nada entre el enlace y la tarjeta puede ser el contenedor del estirado: si lo fuera, solo cubriría el título. */
.deiviator-post-card__body,
.deiviator-post-card__title,
.deiviator-post-card__title a,
.deiviator-ultimas .wp-block-post-title,
.deiviator-ultimas .wp-block-post-title a {
	position: static;
}

.deiviator-post-card .deiviator-chip {
	position: relative;
	z-index: 1;
}

.deiviator-ultimas .wp-block-post-featured-image,
.deiviator-post-card__image {
	overflow: hidden;
}

.deiviator-ultimas .wp-block-post-featured-image {
	border-radius: var(--deiviator-radio-l);
}

/* Objetivos mínimos en cualquier pantalla: 24 px. */
.deiviator-pie-legal a,
.wp-block-breadcrumbs a {
	display: inline-flex;
	align-items: center;
	min-height: 1.5rem;
}

.deiviator-scheme-switch__button {
	min-height: 1.5rem;
}

/* El desplegable del menú abre también por teclado: su flecha de 10 px necesita más sitio donde pulsar. */
.wp-block-navigation__submenu-icon {
	position: relative;
}

.wp-block-navigation__submenu-icon::after {
	content: "";
	inset: -0.4375rem;
	position: absolute;
}

/* Con el dedo, 44 px. */
@media (max-width: 960px), (pointer: coarse) {
	.deiviator-pie-columna li + li {
		margin-top: 0;
	}

	.deiviator-pie-columna ul a,
	.deiviator-pie-legal a,
	.wp-block-breadcrumbs a,
	.deiviator-boton-video a {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
	}

	.deiviator-pie-columna .deiviator-pie-redes {
		gap: 0;
		margin-inline-start: -0.625rem;
	}

	.deiviator-pie-columna .deiviator-pie-redes a {
		align-items: center;
		display: flex;
		height: 2.75rem;
		justify-content: center;
		width: 2.75rem;
	}

	.deiviator-pagination .page-numbers {
		height: 2.75rem;
		min-width: 2.75rem;
	}

	.deiviator-pagination .wp-block-query-pagination-next,
	.deiviator-pagination .wp-block-query-pagination-previous {
		align-items: center;
		display: inline-flex;
		min-height: 2.75rem;
	}

	.deiviator-pasos__progreso button,
	.deiviator-idioma__boton,
	.deiviator-campo--check label,
	.deiviator-login form .login-remember label,
	.deiviator-scheme-switch__button {
		min-height: 2.75rem;
	}

	.deiviator-scheme-switch__button {
		min-width: 2.75rem;
	}

	.deiviator-tiendas img {
		height: 2.75rem;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}

	.deiviator-faq .wp-block-details > summary,
	.deiviator-idioma__boton,
	.wp-block-post-terms.deiviator-chip {
		transition: background-color var(--deiviator-t-rapida) var(--deiviator-ease-effect), transform var(--deiviator-t-pulsar) var(--deiviator-ease-effect);
	}

	.deiviator-post-card {
		transition: box-shadow var(--deiviator-t-media) var(--deiviator-ease-effect), transform var(--deiviator-t-media) var(--deiviator-spring);
	}

	.deiviator-post-card img,
	.deiviator-ultimas .wp-block-post-featured-image img,
	.deiviator-tarjeta--con-foto .deiviator-tarjeta__foto img {
		transition: transform var(--deiviator-t-lenta) var(--deiviator-ease-effect);
	}

	/* Al pulsar. */
	.deiviator-faq .wp-block-details > summary:active,
	.deiviator-idioma__boton:active,
	.deiviator-scheme-switch__button:active,
	.deiviator-pasos__progreso button:not(:disabled):active {
		transform: scale(0.985);
	}
}

/* Lo que se levanta o se acerca al pasar por encima solo tiene sentido con ratón: en el móvil se quedaría pegado tras el toque. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.deiviator-post-card:hover {
		box-shadow: var(--deiviator-sombra-hover);
		transform: translateY(-3px);
	}

	.deiviator-post-card:hover img,
	.deiviator-ultimas .wp-block-post:hover .wp-block-post-featured-image img,
	.deiviator-tarjeta--con-foto:has(a):hover .deiviator-tarjeta__foto img {
		transform: scale(1.04);
	}
}

@media (hover: none) {
	.deiviator-tarjeta:has(a):hover,
	.deiviator-solucion:hover {
		box-shadow: none;
		transform: none;
	}
}

/* Plantillas de lectura ------------------------------------------------------------
   Entradas, documentos, listados y la página no encontrada (deiviator-lectura.php). Todo hace caja con el contenedor general. */

.deiviator-hero.deiviator-lectura-hero {
	padding-bottom: var(--wp--preset--spacing--40);
	padding-top: calc(var(--deiviator-cabecera) + var(--wp--preset--spacing--50)) !important;
}

.deiviator-lectura-hero .wp-block-breadcrumbs {
	color: var(--wp--preset--color--on-surface-variant);
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: var(--wp--preset--spacing--30);
}

.deiviator-lectura-hero .wp-block-breadcrumbs a {
	color: inherit;
}

.deiviator-lectura-hero h1 {
	margin: 0;
	max-width: 20em;
	text-wrap: balance;
}

.deiviator-lectura-etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3125rem;
	margin: 0 0 var(--wp--preset--spacing--20);
}

.deiviator-etiqueta {
	background: var(--wp--preset--color--primary-container);
	border-radius: 999px;
	color: var(--wp--preset--color--on-primary-container);
	display: inline-block;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	padding: 0.3125rem 0.75rem;
	text-decoration: none;
}

a.deiviator-etiqueta:hover {
	background: color-mix(in srgb, var(--wp--preset--color--on-primary-container) 12%, var(--wp--preset--color--primary-container));
}

.deiviator-lectura-entradilla {
	color: var(--wp--preset--color--on-surface-variant);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
	margin: var(--wp--preset--spacing--20) 0 0;
	max-width: 44rem;
}

.deiviator-lectura-meta {
	align-items: center;
	color: var(--wp--preset--color--on-surface-variant);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--small);
	gap: 0.25rem 0;
	margin: var(--wp--preset--spacing--30) 0 0;
}

.deiviator-lectura-meta > * + *::before {
	content: "·";
	margin-inline: 0.625rem;
}

.deiviator-lectura-meta__autor {
	align-items: center;
	color: var(--wp--preset--color--on-surface);
	display: inline-flex;
	font-weight: 500;
	gap: 0.5rem;
}

.deiviator-lectura-meta__autor::before {
	background: var(--wp--preset--color--coral);
	content: "";
	height: 0.875rem;
	-webkit-mask: url("img/isotipo.svg") center / contain no-repeat;
	mask: url("img/isotipo.svg") center / contain no-repeat;
	width: 1.25rem;
}

.deiviator-lectura-foto {
	margin: var(--wp--preset--spacing--40) 0 0;
}

.deiviator-lectura-foto img {
	aspect-ratio: 21 / 9;
	border-radius: var(--deiviator-radio-tarjeta);
	box-shadow: var(--deiviator-sombra-foto);
	display: block;
	object-fit: cover;
	width: 100%;
}

/* La rejilla: el texto y su lateral. El lateral va primero en el HTML: con el teclado y en el móvil, el índice llega antes que el artículo. */
.deiviator-lectura {
	box-sizing: border-box;
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: minmax(0, 1fr);
	margin: var(--wp--preset--spacing--40) auto var(--wp--preset--spacing--60);
	max-width: min(var(--wp--style--global--content-size), calc(100% - 2 * var(--wp--style--root--padding-left)));
	width: 100%;
}

.deiviator-lateral {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	min-width: 0;
}

.deiviator-lateral__titulo {
	color: var(--wp--preset--color--on-surface);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	margin: 0 0 0.5rem;
}

@media (min-width: 1100px) {
	.deiviator-lectura--entrada {
		grid-template-columns: minmax(0, 42rem) 18rem;
		justify-content: space-between;
	}

	.deiviator-lectura--entrada .deiviator-lateral {
		grid-column: 2;
		grid-row: 1;
	}

	.deiviator-lectura--entrada .wp-block-post-content {
		grid-column: 1;
		grid-row: 1;
	}

	.deiviator-lectura--documento {
		column-gap: var(--wp--preset--spacing--50);
		grid-template-columns: 17rem minmax(0, 1fr);
	}

	/* El lateral cabe siempre en la pantalla. Si no cabe todo, lo que se desplaza es el índice: compartir y la demo siguen a la vista. */
	.deiviator-lateral {
		align-self: start;
		display: flex;
		flex-direction: column;
		max-height: calc(100vh - var(--deiviator-cabecera) - 2rem);
		position: sticky;
		top: calc(var(--deiviator-cabecera) + 1rem);
	}

	.deiviator-lateral > * {
		flex: none;
	}

	.deiviator-lateral > .deiviator-indice {
		display: flex;
		flex: 0 1 auto;
		min-height: 6rem;
	}

	.deiviator-indice details {
		display: flex;
		flex-direction: column;
		min-height: 0;
		width: 100%;
	}

	.deiviator-indice details::details-content {
		min-height: 0;
		overflow-y: auto;
		scrollbar-width: thin;
	}

	.deiviator-lectura--documento .deiviator-lateral__otros {
		margin-top: var(--wp--preset--spacing--20);
	}

	.deiviator-indice summary {
		pointer-events: none;
	}

	.deiviator-indice summary::after {
		display: none;
	}
}

/* El índice: la línea marca por dónde va la lectura. */
.deiviator-indice summary {
	align-items: center;
	color: var(--wp--preset--color--on-surface);
	cursor: pointer;
	display: flex;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	justify-content: space-between;
	list-style: none;
	margin-bottom: 0.5rem;
}

.deiviator-indice summary::-webkit-details-marker {
	display: none;
}

.deiviator-indice summary::after {
	background: currentColor;
	content: "";
	height: 1.125rem;
	-webkit-mask: url("iconos/chevron-down.svg") center / contain no-repeat;
	mask: url("iconos/chevron-down.svg") center / contain no-repeat;
	width: 1.125rem;
}

.deiviator-indice details[open] summary::after {
	transform: rotate(180deg);
}

.deiviator-indice ol {
	border-inline-start: 2px solid var(--wp--preset--color--outline-variant);
	list-style: none;
	margin: 0;
	padding: 0;
}

.deiviator-indice a {
	border-inline-start: 2px solid transparent;
	color: var(--wp--preset--color--on-surface-variant);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	margin-inline-start: -2px;
	padding: 0.375rem 0 0.375rem 0.875rem;
	text-decoration: none;
}

.deiviator-indice__nivel-3 a {
	font-size: var(--wp--preset--font-size--x-small);
	padding-inline-start: 1.625rem;
}

.deiviator-indice a:hover {
	color: var(--wp--preset--color--on-surface);
}

.deiviator-indice a[aria-current] {
	border-inline-start-color: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--on-surface);
	font-weight: 500;
}

/* Otros documentos. */
.deiviator-lateral__otros ul {
	display: grid;
	font-size: var(--wp--preset--font-size--small);
	gap: 0.375rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.deiviator-lateral__otros a {
	color: var(--wp--preset--color--on-surface-variant);
	text-decoration: none;
}

.deiviator-lateral__otros a:hover {
	color: var(--wp--preset--color--on-surface);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* Compartir, copiar, imprimir. */
.deiviator-compartir__fila {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3125rem;
}

.deiviator-compartir__boton {
	align-items: center;
	background: var(--wp--preset--color--surface-container);
	border: 0;
	border-radius: 50%;
	color: var(--wp--preset--color--on-surface);
	cursor: pointer;
	display: flex;
	height: 2.75rem;
	justify-content: center;
	padding: 0;
	text-decoration: none;
	width: 2.75rem;
}

.deiviator-compartir__boton[hidden] {
	display: none;
}

.deiviator-compartir__boton svg {
	display: block;
	height: 1.25rem;
	width: 1.25rem;
}

.deiviator-compartir__boton:hover,
.deiviator-compartir__boton.hecho {
	background: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--carbon);
}

.deiviator-compartir__aviso {
	color: var(--wp--preset--color--on-surface-variant);
	font-size: var(--wp--preset--font-size--x-small);
	margin: 0.375rem 0 0;
	min-height: 1.4em;
}

/* La demo, sin salir del artículo. */
.deiviator-lateral__demo {
	--deiviator-foco: #fff;
	background: var(--deiviator-fondo-oscuro);
	border-radius: var(--deiviator-radio-xl);
	color: var(--wp--preset--color--sobre-carbon);
	padding: var(--wp--preset--spacing--30);
}

.deiviator-lateral__demo-titulo {
	color: inherit;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.15;
	margin: 0;
}

.deiviator-lateral__demo p:not(.deiviator-lateral__demo-titulo) {
	color: var(--wp--preset--color--sobre-carbon-2);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	margin: 0.5rem 0 var(--wp--preset--spacing--20);
}

.deiviator-lateral__demo .wp-block-button__link {
	width: 100%;
}

/* El cuerpo del texto. */
.deiviator-lectura .deiviator-prose,
.deiviator-lectura .deiviator-documento {
	font-size: var(--deiviator-texto-lectura);
	line-height: 1.65;
	min-width: 0;
	padding: 0;
}

.deiviator-documento > :where(p, ul, ol, blockquote, h2, h3, h4, h5, h6, figure:not(.wp-block-table)) {
	max-width: 42rem;
}

.deiviator-lectura :is(.deiviator-prose, .deiviator-documento) > :first-child {
	margin-top: 0;
}

.deiviator-lectura :is(.deiviator-prose, .deiviator-documento) p {
	margin-block: 0 1em;
}

.deiviator-lectura :is(.deiviator-prose, .deiviator-documento) h2 {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.15;
	margin-block: var(--wp--preset--spacing--50) 0.5em;
}

.deiviator-lectura :is(.deiviator-prose, .deiviator-documento) h3 {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
	margin-block: var(--wp--preset--spacing--40) 0.4em;
}

.deiviator-lectura :is(.deiviator-prose, .deiviator-documento) h4 {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.25;
	margin-block: var(--wp--preset--spacing--30) 0.4em;
}

.deiviator-lectura :is(.deiviator-prose, .deiviator-documento) :is(ul, ol) {
	margin-block: 0 1em;
	padding-inline-start: 1.25em;
}

.deiviator-lectura :is(.deiviator-prose, .deiviator-documento) li + li {
	margin-top: 0.375em;
}

.deiviator-lectura :is(.deiviator-prose, .deiviator-documento) li::marker {
	color: var(--wp--preset--color--primary);
}

.deiviator-lectura :is(.deiviator-prose, .deiviator-documento) a {
	color: var(--wp--preset--color--primary);
}

.deiviator-lectura :is(.deiviator-prose, .deiviator-documento) code {
	background: var(--wp--preset--color--surface-container);
	border-radius: var(--deiviator-radio-xs);
	font-size: 0.875em;
	padding: 0.1em 0.35em;
}

.deiviator-lectura :is(.deiviator-prose, .deiviator-documento) blockquote {
	border-inline-start: 3px solid var(--wp--preset--color--coral);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
	margin: var(--wp--preset--spacing--30) 0;
	padding-inline-start: var(--wp--preset--spacing--30);
}

.deiviator-lectura :is(.deiviator-prose, .deiviator-documento) figure:not(.wp-block-table) {
	margin-block: var(--wp--preset--spacing--30);
}

.deiviator-lectura :is(.deiviator-prose, .deiviator-documento) figure:not(.wp-block-table) img {
	border-radius: var(--deiviator-radio-xl);
	display: block;
	height: auto;
	width: 100%;
}

.deiviator-lectura :is(.deiviator-prose, .deiviator-documento) figcaption {
	color: var(--wp--preset--color--on-surface-variant);
	font-size: var(--wp--preset--font-size--x-small);
	margin-top: 0.5rem;
}

/* Las tablas: filas limpias, sin rejilla negra. Con muchas columnas se desplazan dentro de su caja, no la página. */
.deiviator-lectura .wp-block-table {
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: var(--deiviator-radio-m);
	margin-block: var(--wp--preset--spacing--30);
	overflow-x: auto;
}

.deiviator-lectura .wp-block-table table {
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	margin: 0;
	min-width: 32rem;
	width: 100%;
}

.deiviator-lectura .wp-block-table thead {
	border: 0;
}

.deiviator-lectura .wp-block-table :is(th, td) {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--outline-variant);
	overflow-wrap: normal;
	padding: 0.625rem 0.875rem;
	text-align: start;
	vertical-align: top;
}

.deiviator-lectura .wp-block-table th {
	background: var(--wp--preset--color--surface-container);
	color: var(--wp--preset--color--on-surface);
}

.deiviator-lectura .wp-block-table tbody tr:last-child td {
	border-bottom: 0;
}

/* Las tablas de dos columnas (término y definición), con la primera igual en todas: si no, cada grupo del glosario salía distinto. */
.deiviator-lectura .wp-block-table :is(th, td):first-child:nth-last-child(2) {
	width: 32%;
}

/* Los manuales relacionados. */
.deiviator-relacionados {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 20rem));
	margin-top: var(--wp--preset--spacing--20);
}

.deiviator-relacionado {
	position: relative;
}

.deiviator-lectura .deiviator-relacionado figure:not(.wp-block-table) {
	aspect-ratio: 16 / 10;
	border-radius: var(--deiviator-radio-xl);
	margin: 0;
	overflow: hidden;
}

.deiviator-lectura .deiviator-relacionado figure:not(.wp-block-table) img {
	border-radius: 0;
	height: 100%;
	object-fit: cover;
}

.deiviator-lectura :is(.deiviator-prose, .deiviator-documento) .deiviator-relacionado h3 {
	font-size: var(--wp--preset--font-size--medium);
	margin-block: 0.625rem 0;
}

.deiviator-relacionado h3 a::after {
	content: "";
	inset: 0;
	position: absolute;
}

/* Al pie del documento. */
.deiviator-lectura-pie {
	border-top: 1px solid var(--wp--preset--color--outline-variant);
	color: var(--wp--preset--color--on-surface-variant);
	font-size: var(--wp--preset--font-size--small);
	margin-top: var(--wp--preset--spacing--40);
	max-width: 42rem;
	padding-top: var(--wp--preset--spacing--20);
}

.deiviator-lectura-pie p {
	margin: 0;
}

.deiviator-lectura-pie a {
	color: var(--wp--preset--color--primary);
}

/* El cuerpo manda en sus párrafos y listas: el tema les ponía su propio tamaño. */
.deiviator-lectura :is(.deiviator-prose, .deiviator-documento) :is(p, li) {
	font-size: inherit;
	line-height: inherit;
}

/* En estrecho: los datos del artículo en su propia línea, sin puntos sueltos al empezar, y las migas sin repetir el titular de debajo. */
@media (max-width: 620px) {
	.deiviator-lectura-meta {
		gap: 0.25rem 1rem;
	}

	.deiviator-lectura-meta > * + *::before {
		content: none;
	}

	.deiviator-lectura-hero .wp-block-breadcrumbs li:last-child {
		display: none;
	}
}

/* La barra de progreso. */
.deiviator-progreso {
	background: var(--wp--preset--color--coral);
	height: 3px;
	inset: 0 0 auto;
	pointer-events: none;
	position: fixed;
	transform: scaleX(var(--deiviator-avance, 0));
	transform-origin: 0 50%;
	z-index: 100000;
}

/* En un manual, «El manual completo» se queda también en el móvil: es a lo que se viene. */
@media (max-width: 1099.98px) {
	.deiviator-lectura--documento .deiviator-lateral__demo {
		display: block;
		order: 3;
	}
}

/* En estrecho, el índice se pliega en una ficha, y la demo se queda en su bloque del final. */
@media (max-width: 1099.98px) {
	.deiviator-indice {
		background: var(--wp--preset--color--surface-container-low);
		border-radius: var(--deiviator-radio-l);
		padding: 0 var(--wp--preset--spacing--20);
	}

	.deiviator-indice summary {
		margin: 0;
		min-height: 2.75rem;
	}

	.deiviator-indice ol {
		margin-bottom: var(--wp--preset--spacing--20);
	}

	.deiviator-indice a {
		padding-block: 0.625rem;
	}

	.deiviator-lateral__demo {
		display: none;
	}

	/* El índice arriba, el texto enseguida, y lo demás al terminar de leer. */
	.deiviator-lateral {
		display: contents;
	}

	.deiviator-indice {
		order: 1;
	}

	.deiviator-lectura > .wp-block-post-content,
	.deiviator-lectura__texto {
		order: 2;
	}

	.deiviator-lateral__otros {
		order: 3;
	}

	.deiviator-compartir {
		order: 4;
	}

	.deiviator-lateral__otros li a {
		align-items: center;
		display: inline-flex;
		min-height: 2.75rem;
	}
}

/* Los listados. */
.deiviator-listado {
	background: var(--wp--preset--color--surface-container-low);
	padding-block: var(--wp--preset--spacing--50);
}

.deiviator-filtros {
	margin-top: var(--wp--preset--spacing--30);
}

.deiviator-filtros ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3125rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.deiviator-filtros li[hidden] {
	display: none;
}

.deiviator-filtros a {
	align-items: center;
	background: var(--wp--preset--color--surface-container);
	border-radius: 999px;
	color: var(--wp--preset--color--on-surface);
	display: inline-flex;
	font-size: var(--deiviator-texto-control);
	font-weight: 500;
	min-height: 2.5rem;
	padding: 0.375rem 1rem;
	text-decoration: none;
}

.deiviator-filtros a:hover {
	background: var(--wp--preset--color--surface-container-high);
}

/* En estrecho, una fila que se desliza: apilados, los filtros empujaban los artículos fuera de la primera pantalla. */
@media (max-width: 781px) {
	.deiviator-filtros ul {
		flex-wrap: nowrap;
		margin-inline: calc(-1 * var(--wp--style--root--padding-left));
		overflow-x: auto;
		padding: 0.25rem var(--wp--style--root--padding-left);
		scroll-padding-inline: var(--wp--style--root--padding-left);
		scrollbar-width: none;
	}

	.deiviator-filtros ul::-webkit-scrollbar {
		display: none;
	}

	.deiviator-filtros li {
		flex: none;
	}

	.deiviator-filtros a {
		min-height: 2.75rem;
		white-space: nowrap;
	}
}

.deiviator-filtros a[aria-current] {
	background: var(--wp--preset--color--carbon);
	color: var(--wp--preset--color--sobre-carbon);
}

/* Las tarjetas: el título manda y la fecha queda abajo, alineada entre tarjetas. */
.deiviator-post-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.deiviator-post-card__body {
	align-items: flex-start;
	display: flex;
	flex: 1;
	flex-direction: column;
}

/* El tema les da márgenes automáticos para centrarlos en su caja: en columna flexible, eso los centraría a ellos. */
.deiviator-post-card__body > * {
	margin-inline: 0 !important;
}

.deiviator-post-card .deiviator-post-meta {
	margin-top: auto !important;
	padding-top: var(--wp--preset--spacing--20);
}

.deiviator-post-card__title a,
.deiviator-ultimas .wp-block-post-title a {
	color: var(--wp--preset--color--on-surface);
	text-decoration: none;
}

.deiviator-post-card:hover .deiviator-post-card__title a,
.deiviator-ultimas .wp-block-post:hover .wp-block-post-title a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

/* El boletín. */
.deiviator-boletin {
	--deiviator-foco: #fff;
	background: var(--deiviator-fondo-oscuro);
	border-radius: var(--deiviator-radio-tarjeta);
	box-sizing: border-box;
	color: var(--wp--preset--color--sobre-carbon);
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin: var(--wp--preset--spacing--60) auto 0;
	max-width: min(var(--wp--style--global--content-size), calc(100% - 2 * var(--wp--style--root--padding-left)));
	padding: clamp(1.5rem, 4vw, 3rem);
	width: 100%;
}

.deiviator-boletin h2 {
	color: inherit;
	font-size: var(--wp--preset--font-size--titular);
	margin: 0;
}

.deiviator-boletin__texto p {
	color: var(--wp--preset--color--sobre-carbon-2);
	margin: 0.5rem 0 0;
	max-width: 30rem;
}

.deiviator-boletin .deiviator-campo label,
.deiviator-boletin .deiviator-campo--check {
	color: var(--wp--preset--color--sobre-carbon);
}

.deiviator-boletin .deiviator-campo input:not([type="checkbox"]) {
	background: rgb(255 255 255 / 0.08);
	border-color: rgb(255 255 255 / 0.2);
	color: var(--wp--preset--color--sobre-carbon);
}

.deiviator-boletin .deiviator-campo--check {
	font-size: var(--wp--preset--font-size--x-small);
}

.deiviator-boletin a {
	/* El coral aclarado de las superficies oscuras: el puro se quedaba en 4,4:1 en oscuro. */
	color: var(--deiviator-demo-acento, var(--deiviator-coral-sobre-oscuro));
}

@media (min-width: 782px) {
	.deiviator-boletin {
		align-items: start;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

/* El buscador del sitio. */
.deiviator-buscador {
	margin-top: var(--wp--preset--spacing--30);
	max-width: 32rem;
}

.deiviator-buscador .wp-block-search__inside-wrapper {
	gap: 0.3125rem;
}

.deiviator-buscador .wp-block-search__input {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: var(--deiviator-boton-radio);
	color: var(--wp--preset--color--on-surface);
	font-size: var(--wp--preset--font-size--medium);
	min-height: 3rem;
	padding-inline: 0.9rem;
}

.deiviator-buscador .wp-block-search__button {
	/* El botón principal (ver «Botones»), a la altura del campo. */
	background: var(--wp--preset--color--cta);
	border: 0;
	border-radius: var(--deiviator-boton-radio);
	box-shadow: none;
	color: var(--wp--preset--color--sobre-cta);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.25rem;
	margin: 0;
	min-height: 3rem;
	padding-inline: 1rem;
}

.deiviator-buscador .wp-block-search__button:hover {
	background: var(--wp--preset--color--cta-encima);
}

/* Página no encontrada. */
.deiviator-no-encontrada__rejilla {
	align-items: center;
	box-sizing: border-box;
	display: grid;
	gap: var(--wp--preset--spacing--50);
	margin-inline: auto;
	max-width: min(var(--wp--style--global--content-size), calc(100% - 2 * var(--wp--style--root--padding-left)));
}

.deiviator-no-encontrada h1 {
	margin: 0;
	text-wrap: balance;
}

.deiviator-no-encontrada figure {
	margin: 0;
}

.deiviator-no-encontrada img {
	aspect-ratio: 1;
	border-radius: var(--deiviator-radio-tarjeta);
	box-shadow: var(--deiviator-sombra-foto);
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

@media (min-width: 782px) {
	.deiviator-no-encontrada__rejilla {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	}
}

.deiviator-sin-resultados {
	margin-inline: auto;
	max-width: min(var(--wp--style--global--content-size), calc(100% - 2 * var(--wp--style--root--padding-left)));
}

.deiviator-sin-resultados .deiviator-lectura-entradilla {
	margin-top: 0;
}

/* Las preguntas: dos columnas en ancho, para llenar la caja. Y el buscador de la página de preguntas. */
@media (min-width: 961px) {
	.deiviator-faq {
		align-items: start;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.deiviator-faq .wp-block-details[hidden],
.deiviator-seccion__interior[hidden] {
	display: none;
}

.deiviator-faq-barra.deiviator-faq-barra {
	padding-block: 0;
}

.deiviator-faq-buscador,
.deiviator-manual-buscador {
	display: grid;
	gap: 0.5rem;
	/* Sin esto, la fila deslizable de temas ensanchaba la página en el móvil. */
	grid-template-columns: minmax(0, 1fr);
}

.deiviator-faq-buscador[hidden],
.deiviator-manual-buscador[hidden] {
	display: none;
}

.deiviator-faq-buscador label,
.deiviator-manual-buscador label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.deiviator-faq-buscador input,
.deiviator-manual-buscador input {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: var(--deiviator-boton-radio);
	box-sizing: border-box;
	color: var(--wp--preset--color--on-surface);
	font: inherit;
	max-width: 32rem;
	min-height: 3rem;
	padding-inline: 0.9rem;
	width: 100%;
}

.deiviator-faq-buscador__estado {
	color: var(--wp--preset--color--on-surface-variant);
	font-size: var(--wp--preset--font-size--x-small);
	margin: 0;
}

.deiviator-faq-buscador .deiviator-filtros {
	margin-top: 0.25rem;
}

@media (prefers-reduced-motion: no-preference) {
	.deiviator-indice a,
	.deiviator-compartir__boton,
	.deiviator-filtros a,
	a.deiviator-etiqueta {
		transition: background-color var(--deiviator-t-rapida) var(--deiviator-ease-effect), border-color var(--deiviator-t-rapida) var(--deiviator-ease-effect), color var(--deiviator-t-rapida) var(--deiviator-ease-effect), transform var(--deiviator-t-pulsar) var(--deiviator-ease-effect);
	}

	.deiviator-compartir__boton:active,
	.deiviator-filtros a:active {
		transform: scale(0.96);
	}

	.deiviator-relacionado img {
		transition: transform var(--deiviator-t-lenta) var(--deiviator-ease-effect);
	}

	.deiviator-indice summary::after {
		transition: transform var(--deiviator-t-media) var(--deiviator-spring);
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.deiviator-relacionado:hover img {
		transform: scale(1.04);
	}
}

/* Al imprimir o guardar en PDF: solo el documento. */
@media print {
	header,
	footer,
	.deiviator-lateral,
	.deiviator-lectura-pie,
	.deiviator-progreso,
	.deiviator-relacionados,
	.deiviator-demo,
	.wp-block-breadcrumbs {
		display: none !important;
	}

	.deiviator-hero {
		background: none !important;
		padding: 0 !important;
	}

	.deiviator-lectura {
		display: block;
		margin: 1rem 0 0;
		max-width: none;
	}

	.deiviator-sobre-hero main {
		margin-top: 0;
	}
}

/* El índice del manual ---------------------------------------------------------------
   /manuales/: cada sector se pliega, y dentro van sus bloques, en el orden de lectura. */

.deiviator-manual-buscador {
	margin-block: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

.deiviator-manual-indice {
	display: grid;
	gap: var(--wp--preset--spacing--10);
}

.deiviator-manual-sector {
	background: var(--wp--preset--color--surface-container-low);
	border-radius: var(--deiviator-radio-xl);
}

.deiviator-manual-sector[hidden],
.deiviator-manual-bloque[hidden],
.deiviator-manual-bloque li[hidden] {
	display: none;
}

.deiviator-manual-sector > summary {
	align-items: center;
	border-radius: inherit;
	cursor: pointer;
	display: flex;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	gap: 1rem;
	line-height: 1.2;
	list-style: none;
	min-height: 3.5rem;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

.deiviator-manual-sector > summary::-webkit-details-marker {
	display: none;
}

.deiviator-manual-sector > summary:hover {
	background: color-mix(in srgb, var(--wp--preset--color--on-surface) 5%, transparent);
}

.deiviator-manual-sector > summary small {
	color: var(--wp--preset--color--on-surface-variant);
	flex: none;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	margin-inline-start: auto;
}

.deiviator-manual-sector > summary::after {
	background: currentColor;
	content: "";
	flex: none;
	height: 1.25rem;
	-webkit-mask: url("iconos/chevron-down.svg") center / contain no-repeat;
	mask: url("iconos/chevron-down.svg") center / contain no-repeat;
	width: 1.25rem;
}

.deiviator-manual-sector[open] > summary::after {
	transform: rotate(180deg);
}

.deiviator-manual-bloques {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
}

.deiviator-manual-bloque h3 {
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: normal;
	line-height: 1.25;
	margin: 0 0 var(--wp--preset--spacing--20);
}

.deiviator-manual-bloque h3 a {
	color: inherit;
	text-decoration: none;
}

.deiviator-manual-bloque h3 a:hover {
	color: var(--wp--preset--color--primary);
}

.deiviator-manual-bloque ol {
	display: grid;
	font-size: var(--wp--preset--font-size--small);
	gap: 0.75rem;
	line-height: 1.4;
	margin: 0;
	padding-inline-start: 1.5em;
}

.deiviator-manual-bloque li::marker {
	color: var(--wp--preset--color--on-surface-variant);
	font-size: var(--wp--preset--font-size--x-small);
}

.deiviator-manual-bloque li a {
	color: var(--wp--preset--color--on-surface);
	font-weight: 500;
	text-decoration: none;
}

.deiviator-manual-bloque li a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.deiviator-manual-bloque li span {
	color: var(--wp--preset--color--on-surface-variant);
	display: block;
	font-size: var(--wp--preset--font-size--x-small);
	margin-top: 0.125rem;
}

@media (prefers-reduced-motion: no-preference) {
	.deiviator-manual-sector > summary {
		transition: background-color var(--deiviator-t-rapida) var(--deiviator-ease-effect);
	}

	.deiviator-manual-sector > summary::after {
		transition: transform var(--deiviator-t-media) var(--deiviator-spring);
	}
}

@media (max-width: 620px) {
	.deiviator-manual-sector > summary {
		flex-wrap: wrap;
	}

	.deiviator-manual-sector > summary span {
		flex: 1 1 100%;
	}

	.deiviator-manual-sector > summary small {
		margin-inline-start: 0;
	}

	.deiviator-manual-sector > summary::after {
		margin-inline-start: auto;
	}
}

/* Lo que encuentra el buscador del manual: en lugar del índice, las guías que hablan de eso, de la más a la menos cercana. */
.deiviator-manual-indice[hidden],
.deiviator-manual-resultados[hidden] {
	display: none;
}

.deiviator-manual-resultados {
	display: grid;
	gap: var(--wp--preset--spacing--10);
	list-style: none;
	margin: 0;
	padding: 0;
}

.deiviator-manual-resultados li {
	background: var(--wp--preset--color--surface-container-low);
	border-radius: var(--deiviator-radio-m);
	display: grid;
	gap: 0.25rem;
	padding: 1rem 1.25rem;
	position: relative;
}

.deiviator-manual-resultados li:hover {
	background: var(--wp--preset--color--surface-container);
}

.deiviator-manual-resultados a {
	color: var(--wp--preset--color--on-surface);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
}

/* Toda la fila es el enlace. */
.deiviator-manual-resultados a::after {
	border-radius: var(--deiviator-radio-m);
	content: "";
	inset: 0;
	position: absolute;
}

.deiviator-manual-resultados a:focus-visible {
	outline: none;
}

.deiviator-manual-resultados a:focus-visible::after {
	outline: 2px solid var(--deiviator-foco);
	outline-offset: 2px;
}

.deiviator-manual-resultados small {
	color: var(--wp--preset--color--on-surface-variant);
	font-size: var(--wp--preset--font-size--x-small);
}

.deiviator-manual-resultados span {
	color: var(--wp--preset--color--on-surface-variant);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

.deiviator-manual-resultados mark {
	background: color-mix(in srgb, var(--wp--preset--color--coral) 28%, transparent);
	border-radius: 2px;
	color: inherit;
}

/* El manual en cada sector: lleva de lo que hace Deiviator a cómo se hace. */
.deiviator-manual-franja {
	background: var(--wp--preset--color--surface-container-low);
	border-radius: var(--deiviator-radio-xl);
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: minmax(0, 1fr);
	padding: var(--wp--preset--spacing--40);
}

@media (min-width: 782px) {
	.deiviator-manual-franja {
		align-items: center;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}
}

.deiviator-manual-franja__texto > :first-child {
	margin-top: 0;
}

.deiviator-manual-franja h2 {
	text-wrap: balance;
}

.deiviator-manual-franja__guias {
	display: grid;
	gap: 0.375rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.deiviator-manual-franja__guias a {
	align-items: center;
	background: var(--wp--preset--color--surface);
	border-radius: var(--deiviator-radio-m);
	color: var(--wp--preset--color--on-surface);
	display: grid;
	gap: 0 1rem;
	grid-template-columns: minmax(0, 1fr) auto;
	min-height: 2.75rem;
	padding: 0.75rem 1rem;
	text-decoration: none;
}

.deiviator-manual-franja__guias strong {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.35;
}

.deiviator-manual-franja__guias span {
	color: var(--wp--preset--color--on-surface-variant);
	font-size: var(--wp--preset--font-size--x-small);
	grid-column: 1;
	line-height: 1.4;
}

.deiviator-manual-franja__guias a::after {
	background: currentColor;
	content: "";
	grid-column: 2;
	grid-row: 1 / span 2;
	height: 1.125rem;
	-webkit-mask: url("iconos/arrow-right.svg") center / contain no-repeat;
	mask: url("iconos/arrow-right.svg") center / contain no-repeat;
	width: 1.125rem;
}

.deiviator-manual-franja__guias a:hover {
	box-shadow: var(--deiviator-sombra-hover);
}

.deiviator-manual-franja__guias a:hover strong {
	color: var(--wp--preset--color--primary);
}

@media (prefers-reduced-motion: no-preference) {
	.deiviator-manual-resultados li {
		transition: background-color var(--deiviator-t-rapida) var(--deiviator-ease-effect);
	}

	.deiviator-manual-franja__guias a {
		transition: box-shadow var(--deiviator-t-rapida) var(--deiviator-ease-effect);
	}

	.deiviator-manual-franja__guias a::after {
		transition: transform var(--deiviator-t-media) var(--deiviator-spring);
	}

	.deiviator-manual-franja__guias a:hover::after {
		transform: translateX(3px);
	}
}

/* La guía que amplía una respuesta frecuente. */
.deiviator-faq-guia {
	font-size: var(--wp--preset--font-size--small);
	margin-top: 0.625rem;
}

.deiviator-faq-guia a {
	align-items: baseline;
	display: inline-flex;
	font-weight: 500;
	gap: 0.375rem;
}

.deiviator-faq-guia a::before {
	align-self: center;
	background: currentColor;
	content: "";
	flex: none;
	height: 1em;
	-webkit-mask: url("iconos/book.svg") center / contain no-repeat;
	mask: url("iconos/book.svg") center / contain no-repeat;
	width: 1em;
}

/* Enviando: el icono del botón da paso a un círculo, y el botón no admite un segundo envío. */
.deiviator-form [type="submit"][aria-busy="true"] {
	cursor: progress;
	opacity: 0.8;
	pointer-events: none;
}

.deiviator-form [type="submit"][aria-busy="true"] svg {
	display: none;
}

.deiviator-form [type="submit"][aria-busy="true"]::before {
	border: 2px solid currentColor;
	border-radius: 50%;
	border-right-color: transparent;
	box-sizing: border-box;
	content: "";
	flex: none;
	height: 1.25rem;
	width: 1.25rem;
}

@media (prefers-reduced-motion: no-preference) {
	.deiviator-form [type="submit"][aria-busy="true"]::before {
		animation: deiviator-gira var(--deiviator-t-lenta) linear infinite;
	}
}

@keyframes deiviator-gira {
	to {
		transform: rotate(360deg);
	}
}

/* Enviado: el panel ocupa el sitio del formulario y no se le ve el foco, porque nadie ha llegado hasta él con el teclado. */
.deiviator-pasos__hecho:focus {
	outline: none;
}

/* El póster de la presentadora, debajo del vídeo y con carga diferida. Un vídeo sin fotogramas es transparente, así que se ve hasta que arranca. */
.deiviator-demo__poster {
	display: block;
	height: 100%;
	inset: 0;
	object-fit: cover;
	object-position: 50% 15%;
	position: absolute;
	width: 100%;
}

/* En el móvil, las tablas de dos columnas (término y definición) se apilan. Con su ancho mínimo la definición se cortaba, y había que desplazar
   cada tabla de lado para leerla. Las de más columnas sí necesitan ese desplazamiento. */
@media (max-width: 620px) {
	.deiviator-lectura .wp-block-table table:has(tbody td:first-child:nth-last-child(2)) {
		display: block;
		min-width: 0;
	}

	.deiviator-lectura .wp-block-table table:has(tbody td:first-child:nth-last-child(2)) thead {
		display: none;
	}

	.deiviator-lectura .wp-block-table table:has(tbody td:first-child:nth-last-child(2)) :is(tbody, tr, td) {
		display: block;
		width: auto;
	}

	.deiviator-lectura .wp-block-table table:has(tbody td:first-child:nth-last-child(2)) td:first-child {
		border-bottom: 0;
		padding-bottom: 0.125rem;
	}

	.deiviator-lectura .wp-block-table table:has(tbody td:first-child:nth-last-child(2)) td:last-child {
		padding-top: 0;
	}
}

/* El bloque de demo: en el documento va primero el formulario, que es lo que viene a hacer quien pulsa el botón; en escritorio, la presentadora a la izquierda. */
@media (min-width: 961px) {
	.deiviator-demo__carta {
		grid-column: 1;
		grid-row: 1;
	}

	.deiviator-demo__panel {
		grid-column: 2;
		grid-row: 1;
	}
}

/* Cerrado con Esc: vence al hover y al foco, que lo abrirían de nuevo. */
.deiviator-idioma[data-cerrado] .deiviator-idioma__panel {
	opacity: 0;
	visibility: hidden;
}

/* A medida del dedo y del cursor: 24 px como mínimo. */
.deiviator-lateral__otros a {
	display: inline-block;
	padding-block: 0.25rem;
}

/* El segundo mando del vídeo: un solo botón, con el icono de lo que hará al pulsarlo. */
.deiviator-demo__mando[data-estado] [data-icono] {
	display: none;
}

.deiviator-demo__mando[data-estado="pausar"] [data-icono="pausar"],
.deiviator-demo__mando[data-estado="seguir"] [data-icono="seguir"],
.deiviator-demo__mando[data-estado="repetir"] [data-icono="repetir"] {
	display: block;
}

/* La regla de los conductores, bajo las tablas de precios. */
.deiviator-planes-nota {
	color: var(--wp--preset--color--on-surface-variant);
	font-size: var(--wp--preset--font-size--small);
	margin-block: var(--wp--preset--spacing--30) 0;
}

.deiviator-calculadora__ahorro {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	margin: 0.5rem 0 0;
}

.deiviator-calculadora__ahorro[hidden] {
	display: none;
}

/* Lo que va justo después del hero. */
.deiviator-presenta .deiviator-antetitulo {
	margin-block-end: var(--wp--preset--spacing--10);
}

/* El enlace secundario de una tarjeta de Soluciones: por encima del enlace estirado, para que se pueda pulsar. */
.deiviator-solucion__externo {
	font-size: var(--wp--preset--font-size--x-small);
	margin: 0.5rem 0 0;
	position: relative;
	z-index: 1;
}

.deiviator-solucion__externo a {
	color: inherit;
	display: inline-block;
	padding-block: 0.25rem;
}

/* La página de precios -----------------------------------------------------------------
   Un solo juego de tarjetas y un selector con o sin OBD. Los dos precios van en el HTML; sin :has se queda el primero. */

.deiviator-planes {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: minmax(0, 1fr);
}

.deiviator-planes .solo-con {
	display: none;
}

.deiviator-planes:has(#dv-planes-con:checked) .solo-con {
	display: revert;
}

.deiviator-planes:has(#dv-planes-con:checked) .solo-sin {
	display: none;
}

.deiviator-planes__modo {
	background: var(--wp--preset--color--surface-container);
	border: 0;
	border-radius: 999px;
	display: inline-flex;
	gap: 0.25rem;
	margin: 0;
	max-width: 100%;
	padding: 0.25rem;
	width: fit-content;
}

.deiviator-planes__modo label {
	cursor: pointer;
	display: block;
	position: relative;
}

.deiviator-planes__modo input {
	cursor: pointer;
	inset: 0;
	margin: 0;
	opacity: 0;
	position: absolute;
}

.deiviator-planes__modo span {
	align-items: center;
	border-radius: 999px;
	color: var(--wp--preset--color--on-surface-variant);
	display: inline-flex;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	min-height: 2.75rem;
	padding-inline: 1.25rem;
	text-align: center;
}

.deiviator-planes__modo input:checked + span {
	background: var(--wp--preset--color--surface);
	box-shadow: 0 0 0 1px var(--wp--preset--color--outline-variant);
	color: var(--wp--preset--color--on-surface);
	font-weight: 600;
}

.deiviator-planes__modo input:focus-visible + span {
	outline: 2px solid var(--deiviator-foco);
	outline-offset: 2px;
}

.deiviator-tarjeta.deiviator-plan {
	display: flex;
	flex-direction: column;
}

.deiviator-plan--destacado.deiviator-tarjeta {
	background: var(--wp--preset--color--surface);
	box-shadow: 0 0 0 2px var(--wp--preset--color--coral), var(--deiviator-sombra-hover);
	position: relative;
}

/* Sobre el borde, para que no empuje el contenido y las cuatro tarjetas queden alineadas. */
.deiviator-tarjeta p.deiviator-plan__insignia {
	background: var(--wp--preset--color--coral);
	border-radius: 999px;
	color: var(--wp--preset--color--carbon);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	inset-inline-start: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0.2em 0.8em;
	position: absolute;
	top: 0;
	transform: translateY(-50%);
}

.deiviator-tarjeta p.deiviator-plan__para,
.deiviator-tarjeta p.deiviator-plan__ahorro,
.deiviator-tarjeta p.deiviator-ejemplo__plan,
.deiviator-tarjeta p.deiviator-ejemplo__obd {
	color: var(--wp--preset--color--on-surface-variant);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	margin: 0;
}

.deiviator-plan__precio small {
	margin-inline-start: 0.2em;
}

.deiviator-plan__ahorro s {
	text-decoration-thickness: 1px;
}

/* Enterprise lleva una sola frase: con dos líneas reservadas, su botón cae a la altura de los demás en cualquier ancho. */
.deiviator-tarjeta p.deiviator-plan__ahorro {
	min-height: 2lh;
}

/* Siempre dos líneas: así los botones de las tarjetas quedan a la misma altura. */
.deiviator-plan__ahorro > span,
.deiviator-plan__ahorro > strong {
	display: block;
}

.deiviator-plan__ahorro > strong {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

/* Una sola columna: la insignia necesita aire, porque aquí la tarjeta de arriba está pegada. */
@media (max-width: 781px) {
	.deiviator-plan--destacado.deiviator-tarjeta {
		margin-block: var(--wp--preset--spacing--20);
		padding-block-start: var(--wp--preset--spacing--50);
	}
}

/* Lo que cuesta cada cosa de más: una tabla pequeña, con las cifras en su columna. */
.deiviator-tarjeta ul.deiviator-plan__extras {
	display: grid;
	font-size: var(--wp--preset--font-size--small);
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.deiviator-tarjeta ul.deiviator-plan__extras li {
	border-top: 1px solid var(--wp--preset--color--outline-variant);
	display: flex;
	gap: 0.5rem;
	justify-content: space-between;
	margin: 0;
	padding-block: 0.375rem;
}

.deiviator-tarjeta ul.deiviator-plan__extras li > span:last-child {
	color: var(--wp--preset--color--on-surface);
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	white-space: nowrap;
}

.deiviator-plan .wp-block-buttons {
	margin-top: 0 !important;
}

.deiviator-plan .wp-block-button,
.deiviator-plan .wp-block-button__link {
	width: 100%;
}

.deiviator-tarjeta p.deiviator-plan__rotulo {
	color: var(--wp--preset--color--on-surface);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	margin: 0;
}

.deiviator-tarjeta ul.deiviator-plan__incluye li {
	align-items: flex-start;
	display: flex;
	gap: 0.5rem;
}

.deiviator-tarjeta ul.deiviator-plan__incluye li::before {
	background: var(--wp--preset--color--primary);
	content: "";
	flex: none;
	height: 1.1em;
	margin-top: 0.15em;
	-webkit-mask: url("iconos/check.svg") center / contain no-repeat;
	mask: url("iconos/check.svg") center / contain no-repeat;
	width: 1.1em;
}

/* Sin plan: una banda, porque es para pocos. */
.deiviator-plan-suelto {
	align-items: center;
	background: var(--wp--preset--color--surface-container-low);
	border-radius: var(--deiviator-radio-xl);
	display: grid;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	grid-template-columns: minmax(0, 1fr);
	padding: var(--wp--preset--spacing--30);
}

@media (min-width: 961px) {
	.deiviator-plan-suelto {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}
}

.deiviator-plan-suelto h3 {
	font-size: var(--wp--preset--font-size--large);
	margin: 0 0 0.25rem;
}

.deiviator-plan-suelto p {
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

.deiviator-plan-suelto__lista {
	display: flex;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--small);
	gap: 0.375rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.deiviator-plan-suelto__lista li {
	background: var(--wp--preset--color--surface);
	border-radius: 999px;
	padding: 0.3em 0.9em;
}

.deiviator-planes-nota {
	margin-block-start: 0;
}

.deiviator-tarjeta p.deiviator-nivel__precio {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	margin: 0;
}

/* La calculadora: los módulos se abren aparte, y el resultado acompaña al bajar. */
.deiviator-calculadora__modulos {
	grid-column: 1 / -1;
}

.deiviator-calculadora__modulos summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	gap: 0.5rem;
	list-style: none;
	min-height: 2.75rem;
}

.deiviator-calculadora__modulos summary::-webkit-details-marker {
	display: none;
}

.deiviator-calculadora__modulos summary::before {
	background: currentColor;
	content: "";
	flex: none;
	height: 1.1em;
	-webkit-mask: url("iconos/chevron-down.svg") center / contain no-repeat;
	mask: url("iconos/chevron-down.svg") center / contain no-repeat;
	width: 1.1em;
}

.deiviator-calculadora__modulos[open] summary::before {
	transform: rotate(180deg);
}

.deiviator-calculadora__mods {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding-block-start: var(--wp--preset--spacing--10);
}

.deiviator-calculadora__mods .deiviator-campo--check {
	grid-column: 1 / -1;
}

.deiviator-calculadora__campos {
	align-content: start;
}

/* Las casillas, con su texto en bloque: si salta de línea, no se mete bajo la casilla. */
.deiviator-calculadora .deiviator-campo--check label {
	align-items: flex-start;
	display: flex;
	gap: 0.5rem;
}

.deiviator-calculadora .deiviator-campo--check input {
	flex: none;
	margin: 0.2em 0 0;
}

/* Solo con altura de sobra: con los módulos abiertos, el resultado no debe quedar cortado bajo el borde de la pantalla. */
@media (min-width: 961px) and (min-height: 880px) {
	.deiviator-calculadora__resultado {
		align-self: start;
		position: sticky;
		top: calc(var(--deiviator-cabecera) + 1rem);
	}
}

.deiviator-calculadora__resultado p.deiviator-calculadora__alta,
.deiviator-calculadora__resultado p.deiviator-calculadora__ahorro {
	color: var(--wp--preset--color--sobre-carbon);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	margin: 0.5rem 0 0;
}

.deiviator-calculadora__alta[hidden] {
	display: none;
}

.deiviator-calculadora__desglose {
	border-top: 1px solid rgb(255 255 255 / 0.16);
	display: grid;
	font-size: var(--wp--preset--font-size--small);
	gap: 0.375rem 1rem;
	grid-template-columns: minmax(0, 1fr) auto;
	margin: var(--wp--preset--spacing--20) 0 0;
	padding-top: var(--wp--preset--spacing--20);
}

.deiviator-calculadora__desglose dt {
	color: var(--wp--preset--color--sobre-carbon-2);
}

.deiviator-calculadora__desglose dd {
	color: var(--wp--preset--color--sobre-carbon);
	margin: 0;
	text-align: end;
}

.deiviator-calculadora__resultado p.deiviator-calculadora__rotulo {
	color: var(--wp--preset--color--sobre-carbon-2);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	margin: var(--wp--preset--spacing--20) 0 0.375rem;
}

.deiviator-calculadora__opciones {
	display: grid;
	font-size: var(--wp--preset--font-size--small);
	gap: 0.25rem;
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--20);
	padding: 0;
}

.deiviator-calculadora__opciones li {
	color: var(--wp--preset--color--sobre-carbon-2);
	display: flex;
	gap: 1rem;
	justify-content: space-between;
}

.deiviator-calculadora__opciones li[aria-current="true"] {
	color: var(--deiviator-coral-sobre-oscuro);
	font-weight: 600;
}

.deiviator-calculadora__resultado .wp-block-button,
.deiviator-calculadora__resultado .wp-block-button__link {
	width: 100%;
}

/* El correo del pie no cabe en media columna a 320: con menos de 380, el contacto ocupa la fila entera. */
@media (max-width: 380px) {
	.deiviator-pie-contacto {
		grid-column: 1 / -1;
	}
}

/* El aviso, en la línea del icono: si fuera encima, bajaría el título de esa tarjeta respecto a las de su fila. */
.deiviator-tarjeta:has(> .deiviator-aviso + .deiviator-tarjeta__icono) {
	position: relative;
}

.deiviator-tarjeta > .deiviator-aviso:has(+ .deiviator-tarjeta__icono) {
	inset-inline-end: var(--wp--preset--spacing--40);
	position: absolute;
	top: var(--wp--preset--spacing--40);
}

/* Titulares palabra a palabra (deiviator-marca.php las envuelve; titulares.js decide cuándo entran los h2). Cada palabra sube y se enfoca,
   en cascada: el mismo gesto que los párrafos del bento, más marcado porque es un titular. Opacidad y desenfoque, con la curva de efecto; la
   subida, con el muelle. Sin movimiento, nada: ni siquiera el inline-block, que impide partir una palabra larga. */
@media (prefers-reduced-motion: no-preference) {
	.deiviator-revela .deiviator-palabra {
		display: inline-block;
	}

	.deiviator-revela--carga .deiviator-palabra,
	.deiviator-revela--vista.esta-a-la-vista .deiviator-palabra {
		animation:
			deiviator-palabra-aparece var(--deiviator-t-lenta) var(--deiviator-ease-effect) both,
			deiviator-palabra-sube var(--deiviator-t-lenta) var(--deiviator-spring) both;
		animation-delay: calc(var(--i, 0) * 45ms);
	}

	.deiviator-revela--vista.espera-a-la-vista .deiviator-palabra {
		opacity: 0;
	}
}

@keyframes deiviator-palabra-aparece {
	from {
		filter: blur(6px);
		opacity: 0;
	}
}

@keyframes deiviator-palabra-sube {
	from {
		transform: translateY(0.35em);
	}
}

/* Microinteracciones de la página de precios: el selector de OBD y «Añadir módulos» cambiaban de golpe. */
@media (prefers-reduced-motion: no-preference) {
	.deiviator-planes__modo span {
		transition:
			background-color var(--deiviator-t-rapida) var(--deiviator-ease-effect),
			box-shadow var(--deiviator-t-rapida) var(--deiviator-ease-effect),
			color var(--deiviator-t-rapida) var(--deiviator-ease-effect),
			transform var(--deiviator-t-pulsar) var(--deiviator-ease-effect);
	}

	.deiviator-planes__modo label:active span,
	.deiviator-calculadora__modulos summary:active {
		transform: scale(0.97);
	}

	.deiviator-calculadora__modulos summary {
		transition: transform var(--deiviator-t-pulsar) var(--deiviator-ease-effect);
	}

	.deiviator-calculadora__modulos summary::before {
		transition: transform var(--deiviator-t-media) var(--deiviator-spring);
	}

	.deiviator-calculadora__modulos[open] .deiviator-calculadora__mods {
		animation: deiviator-palabra-aparece var(--deiviator-t-media) var(--deiviator-ease-effect) both, deiviator-palabra-sube var(--deiviator-t-media) var(--deiviator-spring) both;
	}
}

/* El avatar bajo el puntero pasa delante, sube con suavidad y se deja atraer un poco por él, como un imán (David, 7-11-2026). El tirón lo
   pone bento.js en --deiviator-avatar-x/-y; aquí, la subida y el primer plano. Solo con ratón: en el móvil se quedaría pegado tras el toque. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.deiviator-avatares > .esta-encima {
		--deiviator-avatar-escala: 1.12;
		--deiviator-avatar-sube: -0.375rem;
		z-index: 2;
	}

	.deiviator-avatares > .esta-encima img {
		box-shadow: var(--deiviator-sombra-hover);
	}
}

/* Al imprimir, todo a la vista: lo que aún no ha entrado en pantalla saldría en blanco. */
@media print {
	[data-anim],
	[data-anim] > *,
	.deiviator-revela .deiviator-palabra {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* Iconos en círculo y bordes concéntricos (David, 7-11-2026) ------------------------------------------------------------
   Cuando lo de dentro va cerca del borde, su radio y el de la tarjeta comparten centro: radio de fuera = radio de dentro + margen. */
.deiviator-perfil__icono {
	border-radius: 50%;
}

.deiviator-perfil input + span {
	border-radius: var(--deiviator-radio-opcion);
}

/* La calculadora: el resultado queda a un margen corto del borde, con el radio que le corresponde. */
.deiviator-calculadora {
	border-radius: var(--deiviator-radio-tarjeta);
	padding: var(--deiviator-margen-dentro);
}

.deiviator-calculadora__campos {
	padding: var(--wp--preset--spacing--30);
}

.deiviator-calculadora__resultado {
	border-radius: var(--deiviator-radio-dentro);
}

/* Las notificaciones del bento, como en un widget: a un margen corto del borde del recuadro. */
.deiviator-tesela.deiviator-tesela--aviso {
	padding: var(--deiviator-margen-dentro);
}

.deiviator-tesela--aviso .deiviator-notificacion,
.deiviator-tesela--aviso .deiviator-notificacion__contenido {
	border-radius: var(--deiviator-radio-dentro);
}

/* El panel del menú: sus enlaces tienen 12 px de radio y quedan a unos 20 del borde. */
.deiviator-header-bar .wp-block-navigation:not(.deiviator-menu__nav *) .has-child .wp-block-navigation__submenu-container {
	border-radius: var(--deiviator-radio-tarjeta);
}

/* Los mandos del vídeo, redondos de 44 px: a la distancia que los hace concéntricos con la esquina de su tarjeta. */
.deiviator-demo__mandos {
	bottom: calc(var(--deiviator-radio-tarjeta) - 1.375rem);
	right: calc(var(--deiviator-radio-tarjeta) - 1.375rem);
}

/* Los CAE: la rejilla del deck (ESG, CAE y los ODS 12, 13, 9 y 11) en lugar de la foto del campo (David, 7-11-2026). Pegada a un margen
   corto de los bordes de la tarjeta, con radios concéntricos. En el móvil va arriba, en tres columnas; en escritorio, a la derecha, en dos. */
.deiviator-tarjeta.deiviator-tarjeta--con-figura {
	--deiviator-tarjeta-relleno: var(--wp--preset--spacing--40);
}

@media (max-width: 781px) {
	.deiviator-tarjeta.deiviator-tarjeta--con-figura {
		--deiviator-tarjeta-relleno: var(--wp--preset--spacing--30);
	}
}

.deiviator-tarjeta--con-figura > .deiviator-impacto {
	display: grid;
	gap: var(--deiviator-margen-dentro);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: calc(var(--deiviator-margen-dentro) - var(--deiviator-tarjeta-relleno)) calc(var(--deiviator-margen-dentro) - var(--deiviator-tarjeta-relleno)) var(--wp--preset--spacing--20);
}

.deiviator-impacto__ficha {
	aspect-ratio: 1;
	border-radius: var(--deiviator-radio-dentro-xl);
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.deiviator-impacto__ficha--texto {
	align-items: center;
	background: rgb(255 255 255 / 0.06);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
	color: var(--wp--preset--color--sobre-carbon);
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	justify-content: center;
}

.deiviator-impacto__ficha--texto strong {
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
}

.deiviator-impacto__iconos {
	color: var(--wp--preset--color--sobre-carbon-2);
	display: flex;
	font-size: var(--wp--preset--font-size--large);
	gap: 0.25rem;
}

@media (min-width: 782px) {
	.deiviator-tarjeta.deiviator-tarjeta--con-figura {
		--deiviator-impacto-ancho: 18rem;
		min-height: calc((var(--deiviator-impacto-ancho) - var(--deiviator-margen-dentro)) * 1.5 + var(--deiviator-margen-dentro) * 4);
		padding-inline-end: calc(var(--deiviator-impacto-ancho) + var(--deiviator-margen-dentro) + var(--wp--preset--spacing--50));
		position: relative;
	}

	.deiviator-tarjeta--con-figura > .deiviator-impacto {
		align-content: center;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		inset-block: var(--deiviator-margen-dentro);
		inset-inline-end: var(--deiviator-margen-dentro);
		margin: 0;
		position: absolute;
		width: var(--deiviator-impacto-ancho);
	}
}

@media (min-width: 1100px) {
	.deiviator-tarjeta.deiviator-tarjeta--con-figura {
		--deiviator-impacto-ancho: 22rem;
	}
}

/* El Booking Terminal en 3D (terminal.js). Hasta que el 3D está listo, o sin WebGL, se ve la foto de la botonera. */
.deiviator-terminal {
	margin: var(--wp--preset--spacing--40) 0 0;
}

.deiviator-terminal__escena {
	aspect-ratio: 16 / 10;
	background:
		radial-gradient(60% 70% at 50% 60%, color-mix(in srgb, var(--wp--preset--color--surface) 70%, transparent), transparent),
		var(--wp--preset--color--surface-container-low);
	border-radius: var(--deiviator-radio-tarjeta);
	overflow: hidden;
	position: relative;
}

@media (max-width: 781px) {
	.deiviator-terminal__escena {
		aspect-ratio: 4 / 3;
	}
}

.deiviator-terminal:focus-visible {
	border-radius: var(--deiviator-radio-tarjeta);
	outline: 2px solid var(--deiviator-foco);
	outline-offset: 2px;
}

.deiviator-terminal__foto,
.deiviator-terminal__lienzo,
.deiviator-terminal__lienzo canvas {
	display: block;
	height: 100%;
	inset: 0;
	position: absolute;
	width: 100%;
}

.deiviator-terminal__foto {
	object-fit: contain;
	padding: var(--wp--preset--spacing--40);
}

.deiviator-terminal__foto--render {
	object-fit: cover;
	padding: 0;
}

.deiviator-terminal__lienzo[hidden] {
	display: none;
}

.deiviator-terminal.esta-lista .deiviator-terminal__foto {
	opacity: 0;
	visibility: hidden;
}

.deiviator-terminal__pie {
	color: var(--wp--preset--color--on-surface-variant);
	font-size: var(--wp--preset--font-size--x-small);
	margin: var(--wp--preset--spacing--20) 0 0;
	text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
	.deiviator-terminal__foto {
		transition: opacity var(--deiviator-t-media) var(--deiviator-ease-effect), visibility 0s linear var(--deiviator-t-media);
	}
}

/* Fragmentos del panel real (David, 8-11-2026) -------------------------------------------------------------------------------------
   Trozos de la interfaz de las demos, nunca pantallas enteras (contenido/capturas-panel.mjs). Cada uno va en una tarjeta: arriba, su
   escenario, metido en la tarjeta con el mismo margen por los cuatro lados y con el radio concéntrico; debajo, el título y el texto
   de tarjeta. Todos a la misma escala (el 75 % del panel), para que la interfaz mida lo mismo de una tarjeta a otra.
   - centro: la pieza con el mismo aire por los cuatro lados;
   - arriba: el mismo aire arriba y a los lados, y la pieza se corta por abajo, como una lista que sigue.
   En el móvil, las piezas anchas se anclan arriba a la izquierda y se cortan por la derecha, en vez de encogerse hasta no leerse. */
.deiviator-capturas {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	grid-template-columns: repeat(12, minmax(0, 1fr));
	margin-top: var(--wp--preset--spacing--40);
}

.deiviator-capturas > * {
	grid-column: 1 / -1;
	margin: 0;
}

@media (min-width: 961px) {
	/* Portada: «En directo», alta, a la izquierda; las dos teselas, una sobre otra, a la derecha. */
	.deiviator-capturas--portada > :first-child {
		grid-column: 1 / span 5;
		grid-row: 1 / span 2;
	}

	.deiviator-capturas--portada > :not(:first-child) {
		grid-column: 6 / -1;
	}

	/* Funcionalidades: los estados a todo el ancho; debajo, las horas punta y el mantenimiento. */
	.deiviator-capturas--producto > :nth-child(2) {
		grid-column: 1 / span 7;
	}

	.deiviator-capturas--producto > :nth-child(3) {
		grid-column: 8 / -1;
	}
}

.deiviator-tarjeta--captura {
	gap: 0;
	padding: var(--deiviator-margen-dentro) var(--deiviator-margen-dentro) var(--wp--preset--spacing--40);
}

.deiviator-tarjeta--captura > :not(.deiviator-captura) {
	padding-inline: calc(var(--wp--preset--spacing--40) - var(--deiviator-margen-dentro));
}

.deiviator-tarjeta--captura > h3 {
	margin-top: var(--wp--preset--spacing--30);
}

.deiviator-tarjeta--captura > p {
	margin-top: var(--wp--preset--spacing--10);
}

.deiviator-tarjeta--captura .deiviator-captura {
	--deiviator-captura-aire: var(--wp--preset--spacing--40);
	align-items: center;
	background: var(--wp--preset--color--surface-container);
	border-radius: var(--deiviator-radio-dentro);
	box-sizing: border-box;
	display: flex;
	flex: 1 1 auto;
	justify-content: center;
	margin: 0;
	min-height: 0;
	overflow: hidden;
	padding: var(--deiviator-captura-aire);
}

.deiviator-tarjeta--captura .deiviator-captura img {
	display: block;
	flex: none;
	filter: drop-shadow(0 0.75rem 1.5rem rgb(0 0 0 / 0.07));
	height: auto;
	max-width: 100%;
}

.deiviator-tarjeta--captura .deiviator-captura--arriba {
	align-items: flex-start;
	padding-bottom: 0;
}

/* Las que ocupan el ancho: el mismo aire arriba y a los lados («arriba») o en los cuatro lados («llena»). La llena lleva su ancho a
   escala en el atributo (para el móvil, donde se corta por la derecha) y aquí lo pisa: de ahí el !important. */
.deiviator-tarjeta--captura .deiviator-captura--arriba img {
	width: 100%;
}

@media (min-width: 621px) {
	.deiviator-tarjeta--captura .deiviator-captura--llena img {
		width: 100% !important;
	}
}

/* La alta de la portada llena su tarjeta, que mide lo que las dos de al lado: la lista se corta en el borde, sin aire debajo. Como
   la pieza es más alta que su sitio, se le da una base mínima para que la tarjeta no crezca por ella. */
.deiviator-capturas--portada > :first-child .deiviator-captura--arriba {
	flex-basis: 0;
	min-height: 18rem;
}

@media (min-width: 961px) {
	/* La segunda fila de Funcionalidades: los dos escenarios a la misma altura, para que los títulos caigan a la misma. */
	.deiviator-capturas--producto > :nth-child(n + 2) .deiviator-captura {
		flex: none;
		height: 18rem;
	}
}

@media (max-width: 620px) {
	.deiviator-tarjeta--captura .deiviator-captura--ancha {
		align-items: flex-start;
		justify-content: flex-start;
		padding-right: 0;
	}

	.deiviator-tarjeta--captura .deiviator-captura--ancha img {
		max-width: none;
	}

	/* En una columna, la alta se corta a una altura fija: la lista sigue, pero no se come la pantalla. */
	.deiviator-capturas--portada > :first-child .deiviator-captura--arriba {
		flex: none;
		height: 22rem;
	}
}