/*
 * VOLTS360 · overrides Media Power (pre-lanzamiento 30-sep-2026).
 * Se carga después de assets/css/responsive.css del tema.
 * Provisional: pasar al src/ del tema cuando Julián lo comparta.
 */

/* ------------------------------------------------------------------
 * Home · "Un equipo de agentes especializados" (volts/agents-section)
 * Las 4 cards deben medir en conjunto lo mismo que el chat de al lado.
 * El chat es una imagen de 572×572 (agent-chat.png) cuyo recuadro va de
 * y=36px a y=516px → 480px de alto. Números más pequeños y texto gris
 * más grande y claro (queja de legibilidad).
 * ------------------------------------------------------------------ */
@media (min-width: 1152px) {

	.volts-agents-section .volts-agents-section__grid {
		align-content: start;
		gap: 20px 30px;
		grid-template-rows: repeat(2, 230px);
		margin-top: 36px !important;
	}

	.volts-agents-section .volts-agents-section__card {
		gap: 10px;
		height: 230px;
		padding: 24px 26px;
	}

	.volts-agents-section .volts-agents-section__card-number {
		font-size: 64px;
	}

	.volts-agents-section .volts-agents-section__card-title {
		font-size: 17px;
	}

	.volts-agents-section .volts-agents-section__card-text {
		color: #b9cacb;
		font-size: 15px;
		line-height: 1.45;
	}
}

/* ------------------------------------------------------------------
 * Botón fijo "Habla con un especialista" (template-parts/global/specialist-sticky.php)
 * En reposo solo el icono del teléfono; al pasar el ratón se despliega
 * con el texto. El tema lo tenía siempre abierto y con pointer-events:none.
 * Solo en dispositivos con ratón (en móvil el tema ya lo deja en icono).
 * ------------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) and (min-width: 1152px) {

	.volts-specialist-sticky {
		background-position: left center;
		pointer-events: auto;
		transition:
			width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
			background-position 0.35s ease;
		width: 57px;
	}

	.volts-specialist-sticky__text {
		flex: 0 0 auto;
		opacity: 0;
		transition: opacity 0.2s ease;
		white-space: nowrap;
	}

	.volts-specialist-sticky:hover {
		background-position: right center;
		width: 309px;
	}

	.volts-specialist-sticky:hover .volts-specialist-sticky__text {
		opacity: 1;
		transition-delay: 0.12s;
	}
}

/* ------------------------------------------------------------------
 * Home · banda "Más control. Menos carga. Más negocio." (volts/parallax-banner)
 * El parallax apenas se notaba (±140px). La imagen (246.15% de alto) sobraba
 * 215px arriba y 354px abajo; se centra (285px por lado) y el recorrido sube
 * a ±260px sin que llegue a verse el borde.
 * ------------------------------------------------------------------ */
@media (min-width: 600px) {

	.volts-parallax-banner {
		--volts-parallax-range: 260;
	}

	.volts-parallax-banner .volts-parallax-banner__image {
		top: -73.08%;
	}
}

/* ------------------------------------------------------------------
 * Home · "Volts360 es diferente." (volts/advantage-scroll)
 * Parecía un scroll de texto continuo: cada bloque pasa a ser una card,
 * alternando blanca / verde claro (mismo verde que las cards de "La solución").
 * La separación entre bloques se acorta en advantage-scroll-view.js.
 * Solo escritorio: en <900px el tema apila los bloques en otra maqueta.
 * ------------------------------------------------------------------ */
@media (min-width: 1152px) {

	.volts-advantage-scroll .volts-advantage-scroll__panel {
		background: #fff;
		border: 1px solid #cfdcdc;
		border-radius: 24px;
		padding: 32px 36px 36px;
	}

	.volts-advantage-scroll .volts-advantage-scroll__panel:nth-child(even) {
		background: #e3f3f1;
		border-color: #0a9e9e;
	}

	.volts-advantage-scroll .volts-advantage-scroll__panel-heading,
	.volts-advantage-scroll .volts-advantage-scroll__panel-text,
	.volts-advantage-scroll .volts-advantage-scroll__image {
		max-width: 100%;
		width: auto;
	}

	.volts-advantage-scroll .volts-advantage-scroll__panel-heading {
		margin-bottom: 20px;
	}

	.volts-advantage-scroll .volts-advantage-scroll__panel-text,
	.volts-advantage-scroll .volts-advantage-scroll__buttons,
	.volts-advantage-scroll .volts-advantage-scroll__stats {
		margin-bottom: 22px !important;
	}

	.volts-advantage-scroll .volts-advantage-scroll__image {
		height: 300px;
	}
}

@media (min-width: 1152px) {

	/* La flecha ">" reservaba 177px fijos y partía "Check-in automático" en dos líneas. */
	.volts-advantage-scroll .volts-advantage-scroll__items li::after {
		flex: 0 0 auto;
		padding-left: 24px;
		width: auto;
	}
}

/* ------------------------------------------------------------------
 * Home · calculadora de upselling (sustituye la imagen de volts/calculator-preview).
 * Marcado en volts360-mp/calculator.php, lógica en calculator.js.
 * ------------------------------------------------------------------ */
.vmp-calc {
	box-sizing: border-box;
	color: #fff;
	font-variant-numeric: lining-nums; /* Raleway trae cifras "old style" por defecto */
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 56px auto 0;
	max-width: 1040px;
	position: relative;
	width: 100%;
	z-index: 1;
}

.vmp-calc *,
.vmp-calc *::before,
.vmp-calc *::after {
	box-sizing: border-box;
}

.vmp-calc__card {
	background: #0c1416;
	border: 1px solid #1d3536;
	border-radius: 24px;
	padding: 32px;
}

.vmp-calc p,
.vmp-calc dl,
.vmp-calc dd {
	margin: 0;
}

/* Controles */
.vmp-calc__controls {
	display: flex;
	flex-direction: column;
}

.vmp-calc__sliders {
	display: grid;
	gap: 48px 32px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Early check-in / Late check-out: hora estándar → hora solicitada (Figma 210:683) */
.vmp-calc__times {
	border-top: 1px solid #1d3536;
	display: grid;
	gap: 24px 32px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: auto;
	padding-top: 32px;
}

.vmp-calc__time-title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-bottom: 14px !important;
	text-transform: uppercase;
}

.vmp-calc__time-stats {
	display: flex;
	justify-content: space-between;
	margin-bottom: 14px;
}

.vmp-calc__time-stats p {
	display: grid;
	gap: 4px;
}

.vmp-calc__time-stats .is-requested {
	text-align: right;
}

.vmp-calc__time-stats span {
	color: #8fa3a4;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.vmp-calc__time-stats b,
.vmp-calc__time-stats output {
	font-size: 15px;
	font-variant-numeric: lining-nums tabular-nums;
	font-weight: 700;
}

.vmp-calc__time-stats output {
	color: #0fb5b0;
}

.vmp-calc__label {
	align-items: baseline;
	display: flex;
	font-size: 15px;
	font-weight: 500;
	gap: 8px;
	justify-content: space-between;
	margin-bottom: 14px;
}

.vmp-calc__value {
	color: #0fb5b0;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

.vmp-calc__range {
	--vmp-fill: 50%;

	-webkit-appearance: none;
	appearance: none;
	background: linear-gradient(to right, #0a9e9e var(--vmp-fill), #2a3a3c var(--vmp-fill));
	border: 0;
	box-shadow: none;
	padding: 0;
	border-radius: 999px;
	cursor: pointer;
	display: block;
	height: 4px;
	margin: 0;
	outline-offset: 6px;
	width: 100%;
}

.vmp-calc__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	background: #0fb5b0;
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 4px rgba(15, 181, 176, 0.18);
	height: 16px;
	width: 16px;
}

.vmp-calc__range::-moz-range-thumb {
	background: #0fb5b0;
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 4px rgba(15, 181, 176, 0.18);
	height: 16px;
	width: 16px;
}

/* Resultado */
.vmp-calc__eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-bottom: 20px !important;
	text-transform: uppercase;
}

.vmp-calc__monthly {
	font-size: 24px;
	font-weight: 400;
}

.vmp-calc__monthly small {
	color: #8fa3a4;
	font-size: 15px;
}

.vmp-calc__yearly {
	color: #0fb5b0;
	font-size: 44px;
	font-weight: 700;
	line-height: 1.15;
	margin-top: 6px !important;
}

.vmp-calc__caption {
	color: #9cb0b1;
	font-size: 15px;
	margin: 8px 0 22px !important;
}

.vmp-calc__rows {
	display: grid;
	gap: 10px;
	margin-bottom: 20px !important;
}

.vmp-calc__rows > div {
	align-items: center;
	border: 1px solid #1d3536;
	border-radius: 12px;
	display: flex;
	font-size: 15px;
	justify-content: space-between;
	padding: 12px 18px;
}

.vmp-calc__rows dd {
	font-weight: 700;
}

.vmp-calc__cta {
	align-items: center;
	background: #0a9e9e;
	border-radius: 999px;
	color: #fff !important;
	display: flex;
	font-size: 16px;
	font-weight: 700;
	height: 52px;
	justify-content: center;
	text-decoration: none !important;
	transition: background-color 0.2s ease;
}

.vmp-calc__cta:hover,
.vmp-calc__cta:focus-visible {
	background: #0b8a8a;
}

@media (max-width: 1151px) {

	.vmp-calc {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 32px;
	}
}

@media (max-width: 1151px) {

	.vmp-calc__card {
		padding: 24px 20px;
	}

	.vmp-calc__sliders {
		gap: 32px;
		grid-template-columns: minmax(0, 1fr);
	}

	.vmp-calc__times {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 32px;
	}

	.vmp-calc__yearly {
		font-size: 36px;
	}
}

/* ------------------------------------------------------------------
 * Home · "De herramientas sueltas…" (volts/flow-section)
 * - Imágenes: las del tema (sin tocar).
 * - Fuera el flotado en bucle del tema. Las cards parten echadas hacia atrás
 *   (posición del Figma: perspectiva común, más estrechas arriba) y se levantan
 *   con el scroll sobre su borde inferior hasta quedar rectas.
 *   flow-tilt.js pone --vmp-flow-t (1 = tumbadas, 0 = rectas).
 * ------------------------------------------------------------------ */
.volts-flow-section .volts-flow-section__card-without,
.volts-flow-section .volts-flow-section__card-with {
	animation: none;
}

.volts-flow-section__cards.vmp-flow-tilt {
	perspective: 1200px;
	perspective-origin: 50% 30%;
}

.vmp-flow-tilt .volts-flow-section__card {
	transform: rotateX(calc(var(--vmp-flow-t, 0) * 12deg)); /* 12° ≈ inclinación del Figma */
	transform-origin: 50% 100%;
}

/* ------------------------------------------------------------------
 * Home · cards "Sin Volts" / "Con Volts" en HTML (volts360-mp/flow-cards.php)
 * Sustituyen a los PNG para poder hacerlas translúcidas (cristal claro).
 * Posiciones en % (medidas sobre los PNG) y tipografía en cqw, así la card
 * escala igual que una imagen. 1cqw = 1% del ancho de la card.
 * ------------------------------------------------------------------ */
.vmp-flow {
	inset: 0;
	position: absolute;
}

.volts-flow-section__card:has(.vmp-flow) {
	aspect-ratio: 1146 / 1154;
}

.vmp-flow__card {
	--vmp-flow-text: #16203a;
	--vmp-flow-muted: #5d6879;
	--vmp-flow-teal: #13a896;

	backdrop-filter: blur(22px) saturate(150%);
	-webkit-backdrop-filter: blur(22px) saturate(150%);
	background: linear-gradient(155deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.74) 55%, rgba(255, 255, 255, 0.66) 100%);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 3.2% / 3.48%; /* ≈32px del diseño sobre 1060×974; cqw aquí no vale: la card es el propio contenedor */
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
	box-sizing: border-box;
	color: var(--vmp-flow-text);
	container-type: size;
	font-family: var(--volts-font-primary, inherit);
	position: absolute;
}

.vmp-flow--with .vmp-flow__card {
	border-color: rgba(94, 234, 212, 0.75);
	box-shadow:
		0 0 0 1px rgba(45, 212, 191, 0.35),
		0 0 48px rgba(45, 212, 191, 0.35),
		0 30px 70px rgba(0, 0, 0, 0.35);
}

.vmp-flow__card > * {
	box-sizing: border-box;
	margin: 0 !important;
	position: absolute;
}

.vmp-flow__icon {
	display: block;
	flex: 0 0 auto;
	height: 3.8cqw;
	width: 3.8cqw;
}

/* Cabecera */
.vmp-flow__badge {
	align-items: center;
	border-radius: 50%;
	display: flex;
	justify-content: center;
}

.vmp-flow__badge .vmp-flow__icon {
	height: 5cqw;
	width: 5cqw;
}

.vmp-flow__badge--alert {
	background: #fde7cf;
	color: #f7860f;
}

.vmp-flow__badge--ok {
	background: #16b39e;
	color: #fff;
}

.vmp-flow__badge--ok .vmp-flow__icon {
	stroke-width: 3;
}

.vmp-flow__title {
	font-size: 4.34cqw;
	font-weight: 700;
	line-height: 1.1;
	white-space: nowrap;
}

/* "Sin / Con" + logo VOLTS360: el pie del logo (base de las letras) sobre la línea base
 * del texto; alto algo mayor que las ascendentes, para compensar el peso del título en negrita. */
.vmp-flow__title {
	align-items: baseline;
	display: flex;
	gap: 0.3em;
}

.vmp-flow__logo {
	color: #8ccac6;
	display: block;
	flex: none;
	height: 0.9em;
	width: auto;
}

.vmp-flow__subtitle {
	color: var(--vmp-flow-muted);
	font-size: 2.26cqw;
	line-height: 1.2;
	white-space: nowrap;
}

/* Cajas */
.vmp-flow__box {
	align-items: center;
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid #e3e7ee;
	border-radius: 1.5cqw;
	box-shadow: 0 0.6cqw 1.6cqw rgba(22, 32, 58, 0.08);
	display: flex;
	font-size: 2.45cqw;
	font-weight: 600;
	gap: 1.6cqw;
	justify-content: center;
	line-height: 1.2;
	white-space: nowrap;
}

.vmp-flow__box .vmp-flow__icon {
	color: var(--vmp-flow-teal);
}

.vmp-flow__box--stack {
	flex-direction: column;
	gap: 0.3cqw;
}

.vmp-flow__box--stack strong {
	font-size: 2.45cqw;
	font-weight: 700;
}

.vmp-flow__box--stack span {
	color: var(--vmp-flow-muted);
	font-size: 2.26cqw;
	font-weight: 500;
}

.vmp-flow__box--node {
	justify-content: flex-start;
	padding-left: 2.4cqw;
}

.vmp-flow__arrow {
	align-items: center;
	color: var(--vmp-flow-teal);
	display: flex;
	justify-content: center;
}

.vmp-flow__arrow .vmp-flow__icon {
	height: 100%;
	width: 100%;
}

.vmp-flow__arrow--muted {
	color: #6b7597;
}

/* Líneas */
.vmp-flow__lines {
	height: 100%;
	inset: 0;
	overflow: visible;
	width: 100%;
}

.vmp-flow__lines line {
	stroke: #a4abc6;
	stroke-dasharray: 10 8;
	stroke-width: 2.5;
}

.vmp-flow__lines--teal line {
	stroke: var(--vmp-flow-teal);
	stroke-dasharray: 8 7;
	stroke-width: 3;
}

.vmp-flow__cross {
	fill: none;
	stroke: #f7860f;
	stroke-linecap: round;
	stroke-width: 5;
}

.vmp-flow__rule {
	background: #dde2ea;
	border: 0;
}

.vmp-flow__footer {
	font-size: 2.45cqw;
	font-weight: 700;
	left: 0;
	line-height: 1.2;
	text-align: center;
	width: 100%;
}

.vmp-flow__footer--warn {
	color: var(--vmp-flow-text); /* en naranja no se leía sobre el cristal */
}

/* "Con Volts" */
.vmp-flow__pill {
	align-items: center;
	background: #d9f4ef;
	border: 1px solid #bfe9e1;
	border-radius: 999px;
	color: var(--vmp-flow-teal);
	display: flex;
	font-size: 2.26cqw;
	font-weight: 600;
	justify-content: center;
}

.vmp-flow__box--mint {
	background: rgba(226, 246, 242, 0.95);
	border-color: #a9e3d8;
	box-shadow: none;
}

.vmp-flow__ia {
	align-items: center;
	display: flex;
	font-size: 2.8cqw !important;
	gap: 1.4cqw;
}

/* Todas las líneas verdes de "Con Volts": el trazo discontinuo "fluye" hacia abajo
 * (PMS → IA agéntica → VOLTS → módulos). Las líneas están dibujadas en ese sentido. */
.vmp-flow__lines--teal line {
	stroke-linecap: round;
	animation: vmp-flow-tree 1.4s linear infinite;
}

@keyframes vmp-flow-tree {
	to {
		stroke-dashoffset: -15; /* = 8 + 7 del dasharray teal: bucle sin saltos */
	}
}

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

	.vmp-flow__lines--teal line {
		animation: none;
	}
}

.vmp-flow__volts {
	align-items: center;
	background: #fff;
	border: 1px solid #a9e3d8;
	border-radius: 1.5cqw;
	display: flex;
	font-size: 3.2cqw;
	font-weight: 800;
	gap: 1.4cqw;
	justify-content: center;
	z-index: 1;
}

.vmp-flow__v {
	align-items: center;
	background: #16b39e;
	border-radius: 0.8cqw;
	color: #fff;
	display: flex;
	font-size: 2.6cqw;
	height: 4.4cqw;
	justify-content: center;
	width: 4.4cqw;
}

/* Panel que agrupa los 8 módulos; la línea de VOLTS llega a su borde superior (punto). */
.vmp-flow__panel {
	background: rgba(226, 246, 242, 0.42);
	border: 1px solid rgba(94, 234, 212, 0.75);
	border-radius: 2cqw;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 2.4cqw rgba(45, 212, 191, 0.25);
}

.vmp-flow__joint {
	background: var(--vmp-flow-teal);
	border-radius: 50%;
	box-shadow: 0 0 0 0.6cqw rgba(19, 168, 150, 0.22);
	z-index: 1;
}

.vmp-flow__box--module {
	flex-direction: column;
	font-size: 2.26cqw;
	font-weight: 500;
	gap: 0.8cqw;
}

.vmp-flow__box--module .vmp-flow__icon {
	height: 4.1cqw;
	width: 4.1cqw;
}

.vmp-flow__box--footer {
	font-weight: 700;
	gap: 2.4cqw;
}

.vmp-flow__box--footer .vmp-flow__icon {
	stroke-width: 3;
}

/* Móvil / tablet: la card ocupa todo el hueco (el PNG traía margen transparente
 * alrededor, que en HTML no hace falta y dejaba mucho espacio entre las dos). */
@media (max-width: 1151px) {

	.volts-flow-section__card:has(.vmp-flow) {
		aspect-ratio: 1060 / 974;
	}

	.vmp-flow .vmp-flow__card {
		height: 100% !important;
		left: 0 !important;
		top: 0 !important;
		width: 100% !important;
	}
}

/* ------------------------------------------------------------------
 * Cards "Sin Volts" / "Con Volts": cristal transparente (variante B elegida el 30-sep).
 * Brillos teal detrás para que el cristal tenga algo que dejar ver; con el fondo
 * oscuro, título, subtítulo y frase final van en blanco.
 * ------------------------------------------------------------------ */
.volts-flow-section__cards {
	isolation: isolate;
}

/* Brillos teal detrás de las cards, para que el cristal tenga algo que dejar ver. */
.volts-flow-section__cards::before {
	background:
		radial-gradient(38% 45% at 22% 40%, rgba(20, 184, 166, 0.55), transparent 70%),
		radial-gradient(34% 42% at 80% 62%, rgba(45, 212, 191, 0.45), transparent 70%),
		radial-gradient(28% 34% at 55% 20%, rgba(14, 116, 144, 0.5), transparent 70%);
	content: "";
	filter: blur(30px);
	inset: -8% -6%;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.vmp-flow .vmp-flow__card {
	background: linear-gradient(155deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.26) 55%, rgba(255, 255, 255, 0.2) 100%);
	border-color: rgba(255, 255, 255, 0.45);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 30px 70px rgba(0, 0, 0, 0.35);
}

.vmp-flow--with .vmp-flow__card {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.6),
		0 0 0 1px rgba(45, 212, 191, 0.35),
		0 0 48px rgba(45, 212, 191, 0.35),
		0 30px 70px rgba(0, 0, 0, 0.35);
}

/* Sobre cristal oscuro, los textos sueltos van en blanco. */
.vmp-flow .vmp-flow__title,
.vmp-flow .vmp-flow__footer--warn {
	color: #fff;
}

.vmp-flow .vmp-flow__subtitle {
	color: rgba(255, 255, 255, 0.82);
}

.vmp-flow .vmp-flow__arrow--muted {
	color: rgba(255, 255, 255, 0.85);
}

.vmp-flow .vmp-flow__rule {
	background: rgba(255, 255, 255, 0.35);
}

/* ------------------------------------------------------------------
 * Home · chat "Volts Copilot" en HTML (volts360-mp/agents-chat.php + agents-chat.js)
 * Sustituye a agent-chat.png (1145×1144) para animar la conversación.
 * --u = 1px de la imagen original, así el chat ocupa exactamente lo mismo
 * y las 4 cards de al lado siguen alineadas con él.
 * ------------------------------------------------------------------ */
.vmp-chat {
	aspect-ratio: 1145 / 1144;
	container-type: inline-size;
	position: relative;
	width: 100%;
}

.vmp-chat *,
.vmp-chat *::before,
.vmp-chat *::after {
	box-sizing: border-box;
}

.vmp-chat__card {
	--u: calc(100cqw / 1145);

	background: linear-gradient(180deg, #05211f 0%, #031617 60%, #021012 100%);
	border: calc(var(--u) * 2) solid rgba(38, 120, 118, 0.5);
	border-radius: calc(var(--u) * 64);
	color: #e8eff1;
	display: flex;
	flex-direction: column;
	font-family: var(--volts-font-primary, inherit);
	height: calc(var(--u) * 958);
	left: calc(var(--u) * 2);
	overflow: hidden;
	position: absolute;
	top: calc(var(--u) * 72);
	width: calc(var(--u) * 1141);
}

.vmp-chat p {
	margin: 0;
}

.vmp-chat__svg {
	display: block;
	height: 100%;
	width: 100%;
}

/* Cabecera */
.vmp-chat__header {
	align-items: center;
	border-bottom: calc(var(--u) * 2) solid rgba(94, 234, 212, 0.12);
	display: flex;
	flex: 0 0 calc(var(--u) * 128);
	gap: calc(var(--u) * 22);
	padding: 0 calc(var(--u) * 50) 0 calc(var(--u) * 40);
}

.vmp-chat__logo {
	align-items: center;
	background: #0b3d3b;
	border: calc(var(--u) * 2) solid #1f8a84;
	border-radius: 50%;
	color: #5eead4;
	display: flex;
	flex: 0 0 calc(var(--u) * 80);
	height: calc(var(--u) * 80);
	justify-content: center;
	padding: calc(var(--u) * 20);
}

.vmp-chat__title {
	color: #fff;
	font-size: calc(var(--u) * 30);
	font-weight: 700;
	line-height: 1.2;
}

.vmp-chat__subtitle {
	color: #9fb2b5;
	font-size: calc(var(--u) * 24);
	line-height: 1.3;
}

.vmp-chat__more {
	color: #8fa3a6;
	height: calc(var(--u) * 48);
	margin-left: auto;
	width: calc(var(--u) * 48);
}

/* Mensajes */
.vmp-chat__messages {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: calc(var(--u) * 22);
	padding: calc(var(--u) * 28) calc(var(--u) * 45) 0 calc(var(--u) * 46);
}

.vmp-chat__row {
	align-items: center;
	display: flex;
	gap: calc(var(--u) * 32);
	position: relative;
}

.vmp-chat__row--volts {
	justify-content: flex-end;
}

.vmp-chat__avatar {
	align-items: center;
	background: #243339;
	border-radius: 50%;
	color: #dfe8ea;
	display: flex;
	flex: 0 0 calc(var(--u) * 68);
	height: calc(var(--u) * 68);
	justify-content: center;
	padding: calc(var(--u) * 18);
}

.vmp-chat__bubble {
	border-radius: calc(var(--u) * 26);
	font-size: calc(var(--u) * 24);
	line-height: 1.35;
	position: relative;
}

.vmp-chat__row--guest .vmp-chat__bubble {
	background: #1d2b32;
	border: calc(var(--u) * 2) solid #2f3c42;
	max-width: calc(var(--u) * 690);
	padding: calc(var(--u) * 17) calc(var(--u) * 36);
}

.vmp-chat__row--volts .vmp-chat__bubble {
	align-items: center;
	background: #0a4f4c;
	border: calc(var(--u) * 2) solid #1d8780;
	color: #eafffb;
	display: flex;
	gap: calc(var(--u) * 24);
	max-width: calc(var(--u) * 775);
	padding: calc(var(--u) * 16) calc(var(--u) * 18) calc(var(--u) * 16) calc(var(--u) * 34);
}

/* Esquina inferior del lado de quien habla casi recta: ahí se apoya la cola. */
.vmp-chat__row--guest .vmp-chat__bubble {
	border-bottom-left-radius: calc(var(--u) * 6);
}

.vmp-chat__row--volts .vmp-chat__bubble {
	border-bottom-right-radius: calc(var(--u) * 6);
}

/* La cola es un SVG que continúa el borde de la burbuja (mismo color sólido). */
.vmp-chat__tail {
	bottom: calc(var(--u) * -1);
	height: calc(var(--u) * 20);
	left: calc(var(--u) * -18);
	overflow: visible;
	position: absolute;
	width: calc(var(--u) * 20);
}

.vmp-chat__row--volts .vmp-chat__tail {
	left: auto;
	right: calc(var(--u) * -18);
	transform: scaleX(-1);
}

.vmp-chat__tail-fill {
	fill: #1d2b32;
}

.vmp-chat__tail-line {
	fill: none;
	stroke: #2f3c42;
	stroke-linecap: round;
	stroke-width: 2;
}

.vmp-chat__row--volts .vmp-chat__tail-fill {
	fill: #0a4f4c;
}

.vmp-chat__row--volts .vmp-chat__tail-line {
	stroke: #1d8780;
}

.vmp-chat__agent {
	align-items: center;
	background: #06302f;
	border-radius: 50%;
	color: #7ff3e6;
	display: flex;
	flex: 0 0 calc(var(--u) * 72);
	height: calc(var(--u) * 72);
	justify-content: center;
	padding: calc(var(--u) * 19);
}

/* Indicador de escribiendo */
.vmp-chat__typing {
	align-items: center;
	border-radius: calc(var(--u) * 26);
	display: flex;
	gap: calc(var(--u) * 10);
	opacity: 0;
	padding: calc(var(--u) * 22) calc(var(--u) * 28);
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: opacity 0.2s ease;
}

.vmp-chat__row--guest .vmp-chat__typing {
	background: #1d2b32;
	left: calc(var(--u) * 100);
}

.vmp-chat__row--volts .vmp-chat__typing {
	background: #0a4f4c;
	right: 0;
}

.vmp-chat__typing i {
	animation: vmp-chat-dot 1s ease-in-out infinite;
	background: #9fb2b5;
	border-radius: 50%;
	display: block;
	height: calc(var(--u) * 12);
	width: calc(var(--u) * 12);
}

.vmp-chat__row--volts .vmp-chat__typing i {
	background: #7ff3e6;
}

.vmp-chat__typing i:nth-child(2) {
	animation-delay: 0.15s;
}

.vmp-chat__typing i:nth-child(3) {
	animation-delay: 0.3s;
}

@keyframes vmp-chat-dot {
	0%,
	60%,
	100% {
		opacity: 0.4;
		transform: translateY(0);
	}

	30% {
		opacity: 1;
		transform: translateY(calc(var(--u) * -8));
	}
}

/* Estados de la animación (solo con .is-animated; sin JS se ve todo) */
.vmp-chat.is-animated .vmp-chat__bubble,
.vmp-chat.is-animated .vmp-chat__avatar {
	opacity: 0;
	transform: translateY(calc(var(--u) * 18)) scale(0.98);
	transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.vmp-chat.is-animated .vmp-chat__row.is-typing .vmp-chat__avatar,
.vmp-chat.is-animated .vmp-chat__row.is-in .vmp-chat__avatar,
.vmp-chat.is-animated .vmp-chat__row.is-in .vmp-chat__bubble {
	opacity: 1;
	transform: none;
}

.vmp-chat.is-animated .vmp-chat__row.is-typing .vmp-chat__typing {
	opacity: 1;
}

/* Barra de escribir */
.vmp-chat__composer {
	align-items: center;
	border: calc(var(--u) * 2) solid rgba(94, 234, 212, 0.18);
	border-radius: calc(var(--u) * 36);
	display: flex;
	flex: 0 0 calc(var(--u) * 115);
	gap: calc(var(--u) * 16);
	margin: 0 calc(var(--u) * 26) calc(var(--u) * 25) calc(var(--u) * 20);
	padding: 0 calc(var(--u) * 20);
}

.vmp-chat__clip {
	color: #c9d6d8;
	flex: 0 0 calc(var(--u) * 44);
	height: calc(var(--u) * 44);
	margin: 0 calc(var(--u) * 20);
}

.vmp-chat__input {
	align-items: center;
	background: #10222a;
	border: calc(var(--u) * 2) solid rgba(255, 255, 255, 0.1);
	border-radius: calc(var(--u) * 43);
	color: #8a9ca2;
	display: flex;
	flex: 1 1 auto;
	font-size: calc(var(--u) * 26);
	height: calc(var(--u) * 86);
	padding-left: calc(var(--u) * 28);
}

.vmp-chat__send {
	align-items: center;
	background: #3ce9e7;
	border-radius: 50%;
	color: #053230;
	display: flex;
	flex: 0 0 calc(var(--u) * 76);
	height: calc(var(--u) * 76);
	justify-content: center;
	margin-left: calc(var(--u) * 24);
	padding: calc(var(--u) * 20);
}

/* ------------------------------------------------------------------
 * CTA final "Reduce costes…" (volts/footer-cta): parallax más marcado.
 * Al ser la última sección nunca sale por arriba, así que parallax.js solo
 * llegaba a mover la imagen de -140 a +54px (194px visibles). Recorrido a
 * ±320 y la imagen con más margen abajo (desplazamiento negativo = sube).
 * ------------------------------------------------------------------ */
@media (min-width: 900px) {

	.volts-footer-cta {
		--volts-parallax-range: 320;
	}

	.volts-footer-cta .volts-footer-cta__background {
		height: calc(100% + 520px);
		inset: -170px 0 auto;
	}
}

/* Home · "Una operación conectada…" (volts/benefits-flow, traído de Beneficios):
 * en la home el hero va fijado debajo y todas las secciones se apilan encima. */
body.home .volts-benefits-flow {
	position: relative;
	z-index: 2;
}

/* "De principio a fin": la 1ª píldora pasó a "Propietario" (más corto) y la 3ª a "Gestor de propiedades" (más largo). El tema
 * le daba 247px fijos (pensado para "Director de Operaciones") → ancho automático
 * con el mismo relleno que el resto, y la fila centrada en vez de ancho fijo. */
@media (min-width: 1152px) {

	.volts-benefits-flow .volts-benefits-flow__steps {
		justify-content: center;
		padding-left: 0;
		width: auto;
	}

	.volts-benefits-flow .volts-benefits-flow__step:nth-child(1),
	.volts-benefits-flow .volts-benefits-flow__step:nth-child(3) {
		width: auto;
	}
}

/* "De principio a fin": punto que recorre la fila de píldoras (benefits-flow.js).
 * El carril va de la 1ª píldora a la última; su máscara (la pone el JS) solo deja ver
 * los tramos de línea, así que el punto pasa "por detrás" de círculos y píldoras. */
.vmp-bflow-lane {
	height: 24px;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
}

.vmp-bflow-dot {
	background: #0a9e9e;
	border-radius: 50%;
	box-shadow: 0 0 6px rgba(10, 158, 158, 0.7);
	height: 9px;
	left: 0;
	position: absolute;
	top: 50%;
	transform: translate3d(-9px, -50%, 0);
	width: 9px;
}


/* Banner con imagen (volts/image-heading-banner, página IA): mismo ajuste que la banda
 * parallax de la home. Imagen centrada (285px por lado) y recorrido ±140 → ±260px. */
@media (min-width: 600px) {

	.volts-image-heading-banner {
		--volts-parallax-range: 260;
	}

	.volts-image-heading-banner .volts-image-heading-banner__image {
		top: -73.08%;
	}
}



/* Beneficios · perfil 01 "Qué consigue" según Figma (210:1269): cards de 594px, título
 * 18px en su línea y descripción 15px debajo, esquinas de 9px, 20px entre cards. */
@media (min-width: 1152px) {

	.vmp-gains-figma .volts-benefit-profile__gain-list {
		gap: 20px;
		width: 594px;
	}

	.vmp-gains-figma .volts-benefit-profile__gain {
		border-radius: 9px;
		line-height: 1.55;
		min-height: 84px;
		padding: 15px 20px;
		width: 594px;
	}
}

.vmp-gains-figma .volts-benefit-profile__gain strong {
	color: #06100e;
	display: block;
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 3px;
}

.vmp-gains-figma .volts-benefit-profile__gain span {
	color: #3f5652;
	font-size: 15px;
}

/* Beneficios · perfil 02 "Qué consigue" según Figma (619:796): cards teal oscuro de
 * 582px, texto blanco bold 17px, esquinas de 9px, 30px entre cards. */
@media (min-width: 1152px) {

	.vmp-gains-figma-02 .volts-benefit-profile__gain-list {
		gap: 30px;
		width: 582px;
	}

	.vmp-gains-figma-02 .volts-benefit-profile__gain {
		background: #093b3b;
		border-radius: 9px;
		min-height: 55px;
		padding: 16px 25px 13px;
		width: 582px;
	}
}

.vmp-gains-figma-02 .volts-benefit-profile__gain {
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.55;
}

/* Beneficios · perfil 03: mismas cards que el 01, en rejilla de 2 columnas de 277px
 * (20px de hueco) y la última a todo el ancho (Figma 619:815). */
@media (min-width: 1152px) {

	.vmp-gains-figma-03 .volts-benefit-profile__gain-list {
		display: grid !important;
		gap: 20px;
		grid-template-columns: repeat(2, 277px);
		width: 574px;
	}

	.vmp-gains-figma-03 .volts-benefit-profile__gain {
		width: auto;
	}

	.vmp-gains-figma-03 .volts-benefit-profile__gain:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

/* Beneficios · perfil 04: cards oscuras del 02 en rejilla de 2 columnas de 285px
 * (15px entre columnas, 25px entre filas), última a todo el ancho (Figma 619:841). */
@media (min-width: 1152px) {

	.vmp-gains-figma-04 .volts-benefit-profile__gain-list {
		display: grid !important;
		gap: 25px 15px;
		grid-template-columns: repeat(2, 285px);
		width: 585px;
	}

	.vmp-gains-figma-04 .volts-benefit-profile__gain {
		min-height: 66px;
		padding: 20px 28px;
		width: auto;
	}

	.vmp-gains-figma-04 .volts-benefit-profile__gain:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

/* ------------------------------------------------------------------
 * Recursos · panel "Resumen operativo" con vida (resources-dashboard.js).
 * ------------------------------------------------------------------ */
.volts-resources-dashboard__chart {
	position: relative;
}

.vmp-dash-chart {
	display: block;
	height: 100%;
	overflow: visible;
	width: 100%;
}

/* Último punto de la gráfica (581,28 en un lienzo de 581×120). */
.vmp-dash-point {
	animation: vmp-dash-glow 2.6s ease-in-out infinite;
	background: #2fd9c0;
	border-radius: 50%;
	height: 8px;
	left: 100%;
	margin: -4px 0 0 -4px;
	position: absolute;
	top: 23.33%;
	width: 8px;
}

@keyframes vmp-dash-glow {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(47, 217, 192, 0.45);
	}

	50% {
		box-shadow: 0 0 0 7px rgba(47, 217, 192, 0);
	}
}

/* "LIVE": el punto late despacio. */
.volts-resources-dashboard__live::before {
	animation: vmp-dash-live 2s ease-in-out infinite;
}

@keyframes vmp-dash-live {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.3;
	}
}

/* Entrada (solo con JS): tarjetas escalonadas, línea que se dibuja, área que aparece. */
.vmp-dash-anim .volts-resources-dashboard__metric,
.vmp-dash-anim .volts-resources-dashboard__chart-card,
.vmp-dash-anim .volts-resources-dashboard__status-card,
.vmp-dash-anim .volts-resources-dashboard__status-list li {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.vmp-dash-anim.is-vmp-in .volts-resources-dashboard__metric,
.vmp-dash-anim.is-vmp-in .volts-resources-dashboard__chart-card,
.vmp-dash-anim.is-vmp-in .volts-resources-dashboard__status-card,
.vmp-dash-anim.is-vmp-in .volts-resources-dashboard__status-list li {
	opacity: 1;
	transform: none;
}

.vmp-dash-anim .volts-resources-dashboard__metric:nth-child(2) { transition-delay: 0.08s; }
.vmp-dash-anim .volts-resources-dashboard__metric:nth-child(3) { transition-delay: 0.16s; }
.vmp-dash-anim .volts-resources-dashboard__metric:nth-child(4) { transition-delay: 0.24s; }
.vmp-dash-anim .volts-resources-dashboard__chart-card { transition-delay: 0.3s; }
.vmp-dash-anim .volts-resources-dashboard__status-card { transition-delay: 0.38s; }
.vmp-dash-anim .volts-resources-dashboard__status-list li:nth-child(1) { transition-delay: 0.55s; }
.vmp-dash-anim .volts-resources-dashboard__status-list li:nth-child(2) { transition-delay: 0.65s; }
.vmp-dash-anim .volts-resources-dashboard__status-list li:nth-child(3) { transition-delay: 0.75s; }

/* La gráfica se descubre de izquierda a derecha (línea y área a la vez) y el punto
 * final aparece al llegar. La transición va solo en el estado final: si fuera en el
 * inicial, al añadir la clase la gráfica se "taparía" con retraso y nunca se vería
 * el trazado. */
.vmp-dash-anim .vmp-dash-chart {
	clip-path: inset(-10px 100% -10px 0);
}

.vmp-dash-anim.is-vmp-in .vmp-dash-chart {
	clip-path: inset(-10px 0 -10px 0);
	transition: clip-path 1.6s cubic-bezier(0.45, 0, 0.25, 1) 0.5s;
}

.vmp-dash-anim .vmp-dash-point {
	opacity: 0;
	transform: scale(0.4);
}

.vmp-dash-anim.is-vmp-in .vmp-dash-point {
	opacity: 1;
	transform: none;
	transition: opacity 0.3s ease 2s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 2s;
}

/* Destello suave cuando sube "Extra hoy". */
.volts-resources-dashboard__metric.is-vmp-bump {
	animation: vmp-dash-bump 1.2s ease-out;
}

@keyframes vmp-dash-bump {
	0% {
		box-shadow: 0 0 0 0 rgba(47, 217, 192, 0);
	}

	25% {
		box-shadow: 0 0 22px 2px rgba(47, 217, 192, 0.3);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(47, 217, 192, 0);
	}
}

/* Las dos "n" sueltas que se quitaron ocupaban una línea (24px) cada una, encima y debajo
 * del logo. El tema compensaba la de abajo con margin-top:-24px en el menú: se deja el
 * hueco de arriba y se anula esa compensación. */
.volts-resources-dashboard__logo {
	margin-top: 24px !important;
}

.volts-resources-dashboard__nav {
	margin-top: 0 !important;
}

/* ------------------------------------------------------------------
 * Barra de progreso de lectura pegada al borde inferior del navbar
 * (todas las páginas; la crea scroll-progress.js). Del HTML de Lucía.
 * ------------------------------------------------------------------ */
.vmp-progress {
	bottom: -1px;
	height: 2px;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	z-index: 1;
}

.vmp-progress i {
	background: linear-gradient(90deg, #0a9e9e, #2fd9c0);
	display: block;
	height: 100%;
	transform: scaleX(var(--p, 0));
	transform-origin: left;
}

/* Botón fijo "Habla con un especialista": la pastilla pasa a ser un enlace a WhatsApp
 * (specialist-whatsapp.js); que no herede color/subrayado de los enlaces del tema. */
a.volts-specialist-sticky__inner,
a.volts-specialist-sticky__inner:hover,
a.volts-specialist-sticky__inner:visited {
	color: inherit;
	cursor: pointer;
	text-decoration: none;
}

/* El tema pone pointer-events: none al <aside>; sin esto, en móvil el toque atraviesa el botón. */
a.volts-specialist-sticky__inner {
	pointer-events: auto;
}

a.volts-specialist-sticky__inner:focus-visible {
	outline: 2px solid #2fd9c0;
	outline-offset: 3px;
}

/* ------------------------------------------------------------------
 * Home · transición del hero al hacer scroll: "tarjeta que se apila" (opción A, elegida el
 * 2-oct). El hero se va al fondo (escala/radio/oscurecido en hero-home-view.js) y la sección
 * siguiente entra encima con las esquinas superiores redondeadas.
 * ------------------------------------------------------------------ */
body.home .site-main {
	background: #0b1517; /* lo que asoma alrededor del hero al encogerse */
}

body.home .volts-hero-home {
	transform-origin: 50% 35%;
	will-change: transform;
}

body.home .volts-hero-home::after {
	background: #0b1517;
	content: "";
	inset: 0;
	opacity: var(--vmp-dim, 0);
	pointer-events: none;
	position: absolute;
	z-index: 30;
}

body.home .volts-problem-section {
	border-radius: var(--vmp-r, 40px) var(--vmp-r, 40px) 0 0;
	box-shadow: 0 -28px 60px rgba(4, 12, 12, 0.35);
	z-index: 1;
}

/* ------------------------------------------------------------------
 * IA · "Comunicación e incidencias" (volts/media-steps-section--media-right, 2-oct):
 * las 3 cards en blanco (el tema las pinta en #093b3b con texto blanco).
 * Mismos selectores que responsive.css del tema → este CSS, cargado después, gana
 * también en móvil.
 * ------------------------------------------------------------------ */
body.volts-page-ai .volts-media-steps-section--media-right .volts-media-steps-section__step {
	background: #fff;
	border-color: var(--volts-color-teal, #0a9e9e);
	color: #0f2526;
}

body.volts-page-ai .volts-media-steps-section--media-right .volts-media-steps-section__step-title {
	color: #0f2526;
}

body.volts-page-ai .volts-media-steps-section--media-right .volts-media-steps-section__step-text {
	color: #3f4f50;
}

/* Móvil: el tema fija el texto de las cards de pasos de IA (las 3 secciones) a 326px y en ~390px se salía por la derecha. */
@media (max-width: 1151px) {

	body.volts-page-ai .volts-media-steps-section__step-copy,
	body.volts-page-ai .volts-compliance-costs__step-copy {
		max-width: 100%;
		width: 100%;
	}
}


/* Móvil: el aviso "Cumplimos con la nueva normativa europea de IA" también tenía el texto a
 * 300px fijos (+ icono de 60) y se cortaba por la derecha; alto libre para que quepa. */
@media (max-width: 1151px) {

	body.volts-page-ai .volts-compliance-costs__notice {
		height: auto;
		min-height: 118px;
	}

	body.volts-page-ai .volts-compliance-costs__notice-copy {
		flex: 1 1 auto;
		width: auto;
	}
}

/* ------------------------------------------------------------------
 * Beneficios, Recursos y Contacto en móvil (2-oct). El CSS móvil del tema va por página
 * (body.home / .volts-page-ai / -guest / -panel) y estas tres no tenían clase: cabecera de
 * 82px, píldora "Habla con un especialista" abierta tapando texto, pie desplazado.
 * Se les da body.vmp-page-basic (mu-plugin) y aquí van las reglas de cabecera, menú, botón
 * fijo y pie de body.volts-page-panel, extraídas tal cual de responsive.css del tema.
 * ------------------------------------------------------------------ */
@media (max-width: 1151px) {

	body.vmp-page-basic .volts-site-header,
	body.vmp-page-basic .volts-site-header__inner {
		height: 41px;
		min-height: 41px;
	}

	body.vmp-page-basic .volts-site-header__inner {
		gap: 0;
		padding: 8px 10px;
		position: relative;
	}

	body.vmp-page-basic .volts-site-header__brand {
		flex: none;
		left: 50%;
		position: absolute;
		top: 8px;
		transform: translateX(-50%);
		z-index: 2;
	}

	body.vmp-page-basic .volts-site-header .custom-logo-link,
	body.vmp-page-basic .volts-site-header .custom-logo {
		height: 25px;
		width: 75px;
	}

	body.vmp-page-basic .volts-site-header__navigation {
		justify-content: flex-start;
		order: -1;
	}

	body.vmp-page-basic .volts-site-header__toggle {
		color: #fff;
		gap: 4px;
		height: 25px;
		padding: 4px 0;
		width: 21px;
	}

	body.vmp-page-basic .volts-site-header__toggle span:not(.screen-reader-text) {
		background: #fff;
		height: 3px;
		width: 21px;
	}

	body.vmp-page-basic .volts-site-header__navigation.toggled .volts-site-header__toggle span:nth-of-type(2) {
		transform: translateY(7px) rotate(45deg);
	}

	body.vmp-page-basic .volts-site-header__navigation.toggled .volts-site-header__toggle span:nth-of-type(3) {
		opacity: 0;
	}

	body.vmp-page-basic .volts-site-header__navigation.toggled .volts-site-header__toggle span:nth-of-type(4) {
		transform: translateY(-7px) rotate(-45deg);
	}

	body.vmp-page-basic .volts-site-header__actions {
		display: flex;
		flex: none;
		margin-left: auto;
	}

	body.vmp-page-basic .volts-site-header__platform {
		display: none;
	}

	body.vmp-page-basic .volts-site-header__demo {
		background: #0a9e9e;
		border: 1px solid #0a6f6f;
		color: #fff;
		font-size: 0;
		height: 25px;
		min-height: 25px;
		padding: 4px 16px;
		text-transform: none;
		width: 70px;
	}

	body.vmp-page-basic .volts-site-header__demo::after {
		content: "Demo";
		font-size: 13px;
	}

	body.vmp-page-basic .volts-site-header__navigation .volts-site-header__menu {
		background: #093b3b;
		box-shadow: 0 16px 30px rgba(0, 0, 0, 0.18);
		max-height: calc(100svh - 41px);
		overflow-y: auto;
		padding: 20px 24px 28px;
		top: 41px;
	}

	body.vmp-page-basic .volts-site-header__menu > li > a {
		border-bottom: 1px solid rgba(255, 255, 255, 0.16);
		color: #fff;
		font-size: 15px;
		font-weight: 700;
		padding: 13px 0;
		text-transform: none;
	}

	body.vmp-page-basic .volts-site-header__menu .sub-menu {
		padding: 5px 0 8px 14px;
	}

	body.vmp-page-basic .volts-site-header__menu .sub-menu a {
		color: rgba(255, 255, 255, 0.76);
		font-size: 14px;
		line-height: 1.35;
		opacity: 1;
		padding: 9px 0;
		white-space: normal;
	}

	body.vmp-page-basic .volts-site-footer {
		height: auto;
		min-height: 1194px;
		padding: 79px 30px 66px;
	}

	body.vmp-page-basic .volts-site-footer__inner {
		border-bottom: 0;
		gap: 32px;
		height: 889px;
		min-height: 0;
		padding: 0;
	}

	body.vmp-page-basic .volts-site-footer__brand {
		gap: 20px;
		height: 230px;
		min-height: 230px;
	}

	body.vmp-page-basic .volts-site-footer__logo,
	body.vmp-page-basic .volts-site-footer__logo img {
		height: 55px;
		width: 164px;
	}

	body.vmp-page-basic .volts-site-footer__nav,
	body.vmp-page-basic .volts-site-footer__contact,
	body.vmp-page-basic .volts-site-footer__social {
		padding-top: 0;
	}

	body.vmp-page-basic .volts-site-footer__social {
		height: 79px;
		margin-top: 23px;
	}

	body.vmp-page-basic .volts-site-footer__bottom {
		align-items: center;
		border-top: 1px solid var(--volts-border-light-subtle);
		gap: 13px;
		height: 104px;
		margin-top: 56px;
		padding-top: 54px;
		text-align: center;
	}

	body.vmp-page-basic .volts-site-footer__bottom p {
		white-space: normal;
	}

	body.vmp-page-basic .volts-site-footer__bottom ul {
		flex-wrap: wrap;
		gap: 8px 16px;
		justify-content: center;
	}

	body.vmp-page-basic .volts-specialist-sticky {
		border-radius: 999px;
		bottom: calc(16px + env(safe-area-inset-bottom));
		height: 44px;
		right: 16px;
		width: 44px;
	}

	body.vmp-page-basic .volts-specialist-sticky__inner {
		justify-content: center;
		padding: 0;
	}

	body.vmp-page-basic .volts-specialist-sticky__icon {
		height: 30px;
		width: 30px;
	}

	body.vmp-page-basic .volts-specialist-sticky__text {
		display: none;
	}
}

/* Contenido de esas tres páginas en móvil: las secciones conservaban los 80px laterales de
 * escritorio (FAQ de Contacto y panel de Recursos quedaban en una columna de ~190-230px) y el
 * hero de Contacto empezaba pegado bajo la cabecera fija. */
@media (max-width: 1151px) {

	body.vmp-page-basic .volts-faq-section {
		padding: 64px 0 80px;
	}

	body.vmp-page-basic .volts-resources-dashboard {
		padding-left: 20px;
		padding-right: 20px;
	}

	body.vmp-page-basic .volts-contact-hero__inner {
		padding-top: 36px;
	}
}

/* Beneficios · foto de cada perfil (volts/benefit-profile) en móvil y tablet. En escritorio es
 * un fondo de 633px difuminado detrás del texto; por debajo de 1200px el tema la pasa a bloque
 * pero conserva alto y blur → foto borrosa de ~230px y ~400px vacíos debajo. */
@media (max-width: 1151px) {

	.volts-benefit-profile__bg-media {
		filter: none;
		height: auto;
	}

	.volts-benefit-profile__bg-media > *,
	.volts-benefit-profile__bg-image {
		height: auto;
		min-height: 0;
	}

	.volts-benefit-profile__bg-image img {
		aspect-ratio: 16 / 10;
		height: auto;
	}
}

/* Experiencia huésped · cards de "Lo que incluye" y bloque legal (RGPD) con altura fija del
 * tema: en móvil y tablet el texto no cabía y se cortaba ("…del barrio, siempre",
 * "…a las autoridades y"). Alto según contenido; en rejilla siguen igualadas por fila.
 * En todos los anchos: en escritorio (1512) la card "Información y soporte" también se cortaba 14px. */
@media all {

	body.volts-page-guest .volts-guest-includes__card,
	body.volts-page-guest .volts-guest-includes__card:nth-child(n),
	body.volts-page-guest .volts-guest-core__legal,
	body.volts-page-guest .volts-guest-core__legal-copy {
		height: auto;
	}
}

@media (max-width: 1151px) {

	/* En móvil el tema además fija la base flex (168px) y el alto de la columna (1118px). */
	body.volts-page-guest .volts-guest-includes__cards {
		height: auto;
	}

	body.volts-page-guest .volts-guest-includes__card,
	body.volts-page-guest .volts-guest-includes__card:nth-child(n) {
		flex: 0 0 auto;
		min-height: 168px;
	}
}

/* IA · hero en móvil: alto fijo (825px + contenido de 721px) y las dos tarjetas de abajo no
 * cabían; la 2.ª acababa 15px por debajo y el carrusel de capturas le tapaba el borde. */
@media (max-width: 1151px) {

	body.volts-page-ai .volts-landing-hero {
		height: auto;
	}

	body.volts-page-ai .volts-landing-hero__content {
		height: auto;
	}
}

/* Home · móvil. "La prueba": las tarjetas tenían 322px máx. dentro de un hueco de 340 y se
 * quedaban pegadas a la izquierda (25px / 43px) → ocupan el ancho. */
@media (max-width: 1151px) {

	body.home .volts-proof-section__card {
		max-width: 100%;
		width: 100%;
	}
}

/* Home · banda "Más control. Menos carga. Más negocio." en móvil/tablet: el recorte muestra la
 * parte clara de la foto y el texto blanco apenas se leía → velo oscuro suave + sombra. */
@media (max-width: 1151px) {

	.volts-parallax-banner .wp-block-image::after {
		background: rgba(6, 16, 16, 0.38);
		content: "";
		inset: 0;
		pointer-events: none;
		position: absolute;
	}

	.volts-parallax-banner h2 {
		position: relative;
		text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
		z-index: 1;
	}
}

/* ------------------------------------------------------------------
 * Tablet (600–1151) con layout móvil: piezas que en móvil tienen ancho fijo (340/382/317px)
 * y se quedaban pegadas a la izquierda con media pantalla vacía → centradas, hasta 680px
 * (la misma columna que IA en tablet).
 * ------------------------------------------------------------------ */
@media (min-width: 600px) and (max-width: 1151px) {

	body.home .volts-operations-layer__card,
	body.home .volts-agents-section__body {
		align-self: center;
		max-width: 100%;
		width: 680px;
	}

	body.home .volts-advantage-scroll__panel {
		margin-left: auto;
		margin-right: auto;
		max-width: 680px;
	}

	body.volts-page-ai .volts-landing-hero__card-text {
		max-width: none;
	}
}

/* Panel de control · "Tres capas" (volts/panel-cycles) entre 1152 y 1399: el tema estira el
 * contenedor a todo el ancho con 64px de relleno a la izquierda y las 3 tarjetas (1180px)
 * quedaban descentradas (78px / 248px a 1300). Igual que a partir de 1400: 1180px centrado. */
@media (min-width: 1152px) and (max-width: 1399px) {

	.volts-panel-cycles__inner {
		margin-left: auto;
		margin-right: auto;
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
		width: 1180px;
	}
}

/* ------------------------------------------------------------------
 * Carrusel de capturas (volts/media-showcase) en móvil y tablet (≤1151): IA, Soluciones
 * (que lo lee de IA) y Panel de control. El tema, en móvil, ocultaba las imágenes laterales
 * (IA/Soluciones) o las metía en 362×260, y en tablet en cajas verticales (~409×485): con
 * object-fit: cover las capturas (1555×911) salían recortadas. Ahora: las 3 visibles con el
 * efecto de profundidad del tema (se arrastra y avanza sola) y cada imagen en una caja con la
 * proporción real de la captura → sin recorte. La central ocupa el 72% del ancho (máx. 760px).
 * ------------------------------------------------------------------ */
@media (max-width: 1151px) {

	:is(body.volts-page-ai, body.volts-page-panel, body.vmp-page-soluciones) .volts-media-showcase {
		height: auto;
		min-height: 0;
		overflow: hidden;
		padding: 32px 0 40px;
	}

	:is(body.volts-page-ai, body.volts-page-panel, body.vmp-page-soluciones) .volts-media-showcase__frame {
		--volts-depth-center-y: 50%;
		--volts-depth-item-height: auto;
		--volts-depth-item-width: 72%;

		align-self: center;
		aspect-ratio: 2.2;
		height: auto;
		margin: 0 auto !important;
		max-width: 760px;
		overflow: visible;
		width: 100%;
	}

	:is(body.volts-page-ai, body.volts-page-panel, body.vmp-page-soluciones) .volts-depth-carousel .volts-media-showcase__image {
		aspect-ratio: 1555 / 911;
		display: block;
		height: auto;
		inset: auto;
		left: 50%;
		position: absolute;
		top: 50%;
		transform: translate3d(calc(-50% + var(--volts-depth-x, 0px)), -50%, 0) scale(var(--volts-depth-scale, 1)) !important;
		width: var(--volts-depth-item-width);
	}

	:is(body.volts-page-ai, body.volts-page-panel, body.vmp-page-soluciones) .volts-depth-carousel .volts-media-showcase__image,
	:is(body.volts-page-ai, body.volts-page-panel, body.vmp-page-soluciones) .volts-depth-carousel .volts-media-showcase__image img {
		border-radius: 12px;
	}

	:is(body.volts-page-ai, body.volts-page-panel, body.vmp-page-soluciones) .volts-depth-carousel .volts-media-showcase__image img {
		height: 100%;
		object-fit: cover;
		width: 100%;
	}
}

@media (max-width: 599px) {

	/* En móvil la central más grande (asoman las laterales). */
	:is(body.volts-page-ai, body.volts-page-panel, body.vmp-page-soluciones) .volts-media-showcase__frame {
		--volts-depth-item-width: 84%;

		aspect-ratio: 1.85;
	}
}

/* IA · "Ocho soluciones" (volts/feature-grid) en móvil y tablet: rejilla de 790px y cards de
 * 190px de alto fijos, título y texto a 145px de ancho → los textos largos se salían por abajo
 * (y en tablet quedaban en una columna estrecha). Alto según contenido y ancho de la card. */
@media (max-width: 1151px) {

	body.volts-page-ai .volts-feature-grid,
	body.volts-page-ai .volts-feature-grid__inner,
	body.volts-page-ai .volts-feature-grid__grid {
		height: auto;
		min-height: 0;
	}

	body.volts-page-ai .volts-feature-grid__card {
		height: auto;
		min-height: 190px;
	}

	body.volts-page-ai .volts-feature-grid__card-title,
	body.volts-page-ai .volts-feature-grid__card-text {
		max-width: 100%;
		text-align: left;
		align-self: stretch;
		width: 100%;
	}

	body.volts-page-ai .volts-feature-grid__card-text {
		line-height: 1.4;
	}
}

/* Experiencia huésped · carrusel de la app (volts/guest-timeline-showcase) en móvil y tablet:
 * el tema lo metía en una caja de 362×260 y las 3 capturas se montaban unas sobre otras.
 * Mismo planteamiento que el carrusel de capturas de IA/Soluciones/Panel: caja a todo el ancho,
 * cada captura con su proporción (1619×962, sin recorte), central al 72% (84% en móvil). */
@media (max-width: 1151px) {

	body.volts-page-guest .volts-guest-timeline__media-shell {
		--volts-depth-center-y: 50%;
		--volts-depth-item-height: auto;
		--volts-depth-item-width: 72%;

		aspect-ratio: 2.2;
		height: auto;
		margin: 0 auto !important;
		max-width: 760px;
		overflow: visible;
		width: 100%;
	}

	body.volts-page-guest .volts-depth-carousel .volts-guest-timeline__panel {
		aspect-ratio: 1619 / 962;
		display: block;
		height: auto;
		inset: auto;
		left: 50%;
		top: 50%;
		width: var(--volts-depth-item-width);
	}

	body.volts-page-guest .volts-depth-carousel .volts-guest-timeline__panel img {
		height: 100%;
		object-fit: cover;
		width: 100%;
	}

	body.volts-page-guest .volts-guest-timeline {
		overflow-x: hidden;
	}
}

@media (max-width: 599px) {

	body.volts-page-guest .volts-guest-timeline__media-shell {
		--volts-depth-item-width: 84%;

		aspect-ratio: 1.85;
	}
}

@media (min-width: 600px) and (max-width: 1151px) {

	/* Tablet: la columna de la sección seguía a 382px (ancho de móvil) → 680px como el resto. */
	body.volts-page-guest .volts-guest-timeline__inner {
		width: min(680px, 100%);
	}
}

/* Experiencia huésped · "Lo que incluye": en móvil/tablet el icono de cada card salía centrado;
 * en el Figma va a la izquierda, alineado con el título. */
@media (max-width: 1151px) {

	body.volts-page-guest .volts-guest-includes__card-icon {
		justify-content: flex-start;
	}
}

/* Experiencia huésped · "Lo que incluye" en móvil/tablet: sección (1698px), __inner (1634) y
 * __body (1462) con alto fijo; en móviles estrechos (≤375) las cards crecen y la última quedaba
 * cortada bajo la sección siguiente. Alto según contenido. */
@media (max-width: 1151px) {

	body.volts-page-guest .volts-guest-includes,
	body.volts-page-guest .volts-guest-includes__inner,
	body.volts-page-guest .volts-guest-includes__body {
		height: auto;
		min-height: 0;
	}
}

/* Experiencia huésped · "El núcleo" (volts/guest-core) en móvil/tablet: misma causa que
 * "Lo que incluye": sección, cabecera, bloque de cards y aviso legal con alto fijo; en móviles
 * estrechos el texto crece y se cortaban la cabecera, la última card y el aviso. */
@media (max-width: 1151px) {

	body.volts-page-guest .volts-guest-core,
	body.volts-page-guest .volts-guest-core__inner,
	body.volts-page-guest .volts-guest-core__header,
	body.volts-page-guest .volts-guest-core__cards,
	body.volts-page-guest .volts-guest-core__card,
	body.volts-page-guest .volts-guest-core__legal {
		height: auto;
		min-height: 0;
	}
}

/* Panel de control · "Ciclos simultáneos" (volts/panel-cycles) en móvil/tablet: sección (2078px),
 * __inner (1966), __cards (1763) y cada card (547/497/651) con alto fijo. En móviles estrechos el
 * texto de la última card llegaba al borde (o se salía, a 320px). Alto según contenido. */
@media (max-width: 1151px) {

	body.volts-page-panel .volts-panel-cycles,
	body.volts-page-panel .volts-panel-cycles__inner,
	body.volts-page-panel .volts-panel-cycles__cards,
	body.volts-page-panel .volts-panel-cycles__card:nth-child(n) {
		height: auto;
		min-height: 0;
	}
}

@media (max-width: 1151px) {

	/* El contenedor de apilado (carrusel + "Ciclos") también tenía alto fijo con !important
	 * (2429px; 2487 en ≤405): con las cards a su alto real, "Un día en el panel" se montaba
	 * encima del final de la última card. */
	html body.volts-page-panel .volts-sticky-overlay-stack {
		height: auto !important;
		min-height: 0 !important;
	}
}

/* ------------------------------------------------------------------
 * Beneficios · perfiles en móvil y tablet como el Figma (468:893, "Mobile (430)").
 * - La foto deja de ir encima del texto: es el fondo difuminado y oscurecido del bloque
 *   "Qué consigue" (perfil 01 dentro de los márgenes; 02–04 a todo el ancho).
 * - "Qué consigue": título blanco centrado y tarjetas blancas con texto oscuro.
 * - Perfiles 01 y 03: la frase tal cual (.vmp-gain-full, la pinta el mu-plugin), no partida
 *   en título + descripción como en escritorio.
 * Orden con rejilla: __layout pasa a display: contents y foto + ventajas comparten fila.
 * ------------------------------------------------------------------ */
.vmp-gain-full {
	display: none;
}

@media (max-width: 1151px) {

	.volts-benefit-profile .volts-benefit-profile__inner {
		display: grid !important;
		container-type: inline-size; /* para los cqw de abajo */
		width: 100% !important; /* con container-type no puede tomar el ancho de su contenido */
		grid-template-columns: minmax(0, 1fr);
		height: auto;
	}

	.volts-benefit-profile .volts-benefit-profile__layout {
		display: contents !important;
	}

	.volts-benefit-profile .volts-benefit-profile__copy {
		grid-column: 1;
		grid-row: 1;
		height: auto;
	}

	.volts-benefit-profile .volts-benefit-profile__bg-media,
	.volts-benefit-profile .volts-benefit-profile__gains {
		grid-column: 1;
		grid-row: 2;
		margin-top: 28px !important;
	}

	.volts-benefit-profile .volts-benefit-profile__dashboard {
		grid-column: 1; /* si no, al compartir fila con la foto se iría a una 2.ª columna */
		grid-row: 3;
		margin-top: 28px !important;
	}

	/* Foto de fondo del bloque */
	.volts-benefit-profile .volts-benefit-profile__bg-media {
		align-self: stretch;
		border-radius: 0;
		contain: size; /* no impone su alto: ocupa el de la fila (el de las tarjetas) */
		max-width: none !important;
		width: auto !important;
		filter: none !important; /* el blur va en la imagen: así los bordes del bloque quedan nítidos */
		height: auto !important;
		overflow: hidden;
		position: relative;
		z-index: 0;
	}

	.volts-benefit-profile .volts-benefit-profile__bg-media::after {
		background: rgba(6, 16, 16, 0.42);
		content: "";
		inset: 0;
		position: absolute;
	}

	.volts-benefit-profile .volts-benefit-profile__bg-media > *,
	.volts-benefit-profile .volts-benefit-profile__bg-image,
	.volts-benefit-profile .volts-benefit-profile__bg-image img {
		aspect-ratio: auto !important;
		height: 100% !important;
		min-height: 0;
		width: 100%;
	}

	.volts-benefit-profile .volts-benefit-profile__bg-image img {
		object-fit: cover;
	}

	.volts-benefit-profile:not(.vmp-gains-figma):not(.vmp-gains-figma-03) .volts-benefit-profile__bg-media,
	.volts-benefit-profile.vmp-gains-figma-03 .volts-benefit-profile__bg-media {
		margin-left: calc(-1 * var(--vmp-bp-bleed, 20px)) !important;
		margin-right: calc(-1 * var(--vmp-bp-bleed, 20px)) !important;
	}

	/* Bloque "Qué consigue" encima de la foto */
	.volts-benefit-profile .volts-benefit-profile__gains {
		background: none !important;
		border: 0 !important;
		box-shadow: none !important;
		display: flex !important;
		flex-direction: column;
		gap: 18px;
		height: auto !important;
		padding: 26px 22px 30px !important;
		position: relative;
		width: auto !important;
		z-index: 1;
	}

	.volts-benefit-profile .volts-benefit-profile__gains-title {
		color: #fff !important;
		letter-spacing: 0.2em;
		text-align: center;
		width: 100%;
	}

	.volts-benefit-profile .volts-benefit-profile__gain-list {
		display: flex !important;
		flex-direction: column;
		gap: 10px !important;
		height: auto !important;
		max-width: none !important;
		padding: 0 !important;
		width: 100% !important;
	}

	.volts-benefit-profile .volts-benefit-profile__gain {
		background: #fff !important;
		border: 0 !important;
		border-radius: 10px !important;
		box-shadow: none !important;
		color: #16203a !important;
		font-size: 15px !important;
		height: auto !important;
		line-height: 1.4 !important;
		max-width: none !important;
		min-height: 0 !important;
		padding: 12px 14px !important;
		width: 100% !important;
	}

	.volts-benefit-profile .volts-benefit-profile__gain::before,
	.volts-benefit-profile .volts-benefit-profile__gain::after {
		display: none !important;
	}

	.volts-benefit-profile .volts-benefit-profile__gain strong {
		color: #16203a !important;
	}

	/* 01 y 03: la frase tal cual */
	.volts-benefit-profile .volts-benefit-profile__gain:has(.vmp-gain-full) > :not(.vmp-gain-full) {
		display: none !important;
	}

	.volts-benefit-profile .vmp-gain-full {
		display: inline;
	}

	.volts-benefit-profile .vmp-gain-full strong {
		display: inline;
		font-size: inherit !important;
		line-height: inherit !important;
		font-weight: 700;
	}
}

@media (max-width: 1151px) {

	.volts-benefit-profile .volts-benefit-profile__bg-image img {
		filter: blur(4px);
		transform: scale(1.06); /* que el blur no deje borde claro */
	}

	.volts-benefit-profile .volts-benefit-profile__gain,
	.volts-benefit-profile .vmp-gain-full {
		color: #16203a !important;
		font-weight: 500 !important;
	}
}

@media (max-width: 1151px) {

	/* Espaciado de cada perfil como el Figma de móvil: 56px arriba (hasta el número) y 56px
	 * debajo de la captura del dashboard (antes 96 / 1 y el dashboard tocaba la sección siguiente). */
	.volts-benefit-profile.wp-block-volts-benefit-profile {
		height: auto !important;
		min-height: 0 !important;
		padding-bottom: 56px !important;
		padding-top: 56px !important;
	}
}

@media (max-width: 1151px) {

	/* Captura del dashboard: el tema la metía en una caja de 356px de alto con object-fit: cover
	 * y se recortaba por los lados. Alto según la imagen (proporción ~0,665). */
	.volts-benefit-profile .volts-benefit-profile__dashboard,
	.volts-benefit-profile .volts-benefit-profile__dashboard-image {
		height: auto !important;
		min-height: 0 !important;
		position: relative;
		z-index: 1;
	}

	.volts-benefit-profile .volts-benefit-profile__dashboard img {
		aspect-ratio: 650 / 354; /* mismo encuadre que en escritorio: recorta arriba y abajo (no se ve el logo) */
		height: auto !important;
		object-fit: cover !important;
		object-position: 50% 50% !important;
		width: 100% !important;
	}

	/* Perfil 02: en el Figma la foto de fondo baja por detrás de la parte de arriba del
	 * dashboard (≈ 45 % de su alto). La foto ocupa las filas 2–3 y se recorta por
	 * abajo con un margen en cqw (ancho de la columna; un % aquí sería circular y vale 0): (1 − fracción) × 0,545. */
	.volts-benefit-profile.vmp-gains-figma-02:not(.vmp-gains-figma-04) .volts-benefit-profile__bg-media {
		grid-row: 2 / 4;
	}

	/* Perfil 01: la foto acaba con las tarjetas y el dashboard va 62px más abajo (Figma). */
	.volts-benefit-profile.vmp-gains-figma:not(.vmp-gains-figma-03) .volts-benefit-profile__dashboard {
		margin-top: 62px !important;
	}

	.volts-benefit-profile.vmp-gains-figma-02:not(.vmp-gains-figma-04) .volts-benefit-profile__bg-media {
		margin-bottom: 30cqw !important;
	}
}

/* ------------------------------------------------------------------
 * "Una operación conectada de principio a fin" en móvil/tablet (≤1151, 2-oct): como en
 * escritorio, línea punteada con un círculo por píldora y un punto que la recorre, pero en
 * vertical a la izquierda de la columna. Sangría y círculos aquí; el carril con el punto lo
 * pone benefits-flow.js (.vmp-bflow-lane--v). Mismos SVG que el conector del tema.
 * ------------------------------------------------------------------ */
@media (max-width: 1151px) {

	.volts-benefits-flow .volts-benefits-flow__steps {
		padding-left: 44px !important;
	}

	.volts-benefits-flow .volts-benefits-flow__step {
		overflow: visible !important;
		position: relative;
	}

	.volts-benefits-flow .volts-benefits-flow__step::before {
		background: url("data:image/svg+xml,%3Csvg width='31' height='31' viewBox='0 0 31 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15.5' cy='15.5' r='15.25' stroke='%230A9E9E' stroke-width='0.5'/%3E%3Ccircle cx='15.5' cy='15.5' r='5' stroke='%230A9E9E'/%3E%3C/svg%3E") center / 31px 31px no-repeat;
		content: "";
		display: block !important;
		height: 31px;
		left: -44px;
		pointer-events: none;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 31px;
	}

	/* Línea punteada entre círculos (sin JS también se ve): de la 1.ª píldora a la siguiente. */

	.volts-benefits-flow .volts-benefits-flow__step:not(:last-child)::after {
		background: repeating-linear-gradient(180deg, #0a9e9e 0 2px, transparent 2px 4px) !important;
		bottom: auto !important;
		content: "" !important;
		display: block !important;
		height: calc(100% + var(--vmp-bflow-gap, 14px) - 31px) !important;
		left: -29px !important; /* centro en -28.5 = centro del círculo */
		position: absolute !important;
		right: auto !important;
		top: calc(50% + 15.5px) !important;
		transform: none !important;
		width: 1px !important;
		z-index: 1;
	}

	.vmp-bflow-lane.vmp-bflow-lane--v {
		overflow: hidden;
		transform: none;
	}

	.vmp-bflow-lane--v .vmp-bflow-dot {
		left: 7.5px;
		top: 0;
		transform: translate3d(0, -17px, 0);
	}
}

/* ------------------------------------------------------------------
 * Recursos · panel "Resumen operativo" (volts/resources-dashboard) en móvil/tablet como el
 * Figma: la columna lateral (oculta en el tema) pasa a ser cabecera (logo + pestañas en fila
 * que se desliza) y "Agentes IA" va al final en una fila; métricas en 2×2; estado del
 * portfolio sin cifras. La columna se deshace con display: contents y se ordena con order.
 * ------------------------------------------------------------------ */
@media (max-width: 1151px) {

	.volts-resources-dashboard .volts-resources-dashboard__shell {
		display: flex !important;
		flex-direction: column;
		height: auto !important;
		width: 100% !important;
	}

	.volts-resources-dashboard .volts-resources-dashboard__sidebar {
		display: contents !important;
	}

	.volts-resources-dashboard .volts-resources-dashboard__logo {
		background: #081210;
		border-bottom: 1px solid rgba(10, 158, 158, 0.12);
		box-sizing: border-box;
		height: auto !important;
		margin: 0 !important;
		order: 1;
		padding: 22px 20px 16px !important;
		width: 100% !important;
	}

	.volts-resources-dashboard .volts-resources-dashboard__logo img {
		height: 34px;
		width: auto;
	}

	.volts-resources-dashboard .volts-resources-dashboard__nav {
		background: #081210;
		border-bottom: 1px solid rgba(10, 158, 158, 0.12);
		box-sizing: border-box;
		flex-direction: row !important;
		gap: 6px !important;
		margin: 0 !important;
		order: 2;
		overflow-x: auto;
		padding: 14px 20px !important;
		scrollbar-width: none;
		width: 100% !important;
	}

	.volts-resources-dashboard .volts-resources-dashboard__nav::-webkit-scrollbar {
		display: none;
	}

	.volts-resources-dashboard .volts-resources-dashboard__nav-item {
		flex: none;
		white-space: nowrap;
		width: auto !important;
	}

	.volts-resources-dashboard .volts-resources-dashboard__main {
		order: 3;
		width: 100% !important;
	}

	.volts-resources-dashboard .volts-resources-dashboard__agents {
		background: #081210;
		box-sizing: border-box;
		order: 4;
		padding: 18px 20px 20px !important;
		width: 100% !important;
	}

	.volts-resources-dashboard .volts-resources-dashboard__agent-list {
		display: flex !important;
		flex-wrap: wrap;
		gap: 6px 22px;
	}

	.volts-resources-dashboard .volts-resources-dashboard__agent-list li {
		margin: 0;
	}

	.volts-resources-dashboard .volts-resources-dashboard__metrics {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		height: auto !important;
	}

	.volts-resources-dashboard .volts-resources-dashboard__status-list strong {
		display: none;
	}
}

@media (max-width: 1151px) {

	/* Como en el Figma: "LIVE" a la derecha del título y el total a la derecha de "Ingresos". */
	.volts-resources-dashboard .volts-resources-dashboard__header,
	.volts-resources-dashboard .volts-resources-dashboard__chart-header {
		align-items: center !important;
		flex-direction: row !important;
		justify-content: space-between !important;
	}

	.volts-resources-dashboard .volts-resources-dashboard__title-group {
		width: auto !important;
	}

	.volts-resources-dashboard .volts-resources-dashboard__status-card,
	.volts-resources-dashboard .volts-resources-dashboard__lower {
		height: auto !important;
		min-height: 0 !important;
	}
}

/* Contacto · hero con el formulario en móvil/tablet: alto fijo y el formulario sobresalía
 * ~18px por debajo, pegado a las preguntas frecuentes. Alto libre + 56px de aire debajo. */
@media (max-width: 1151px) {

	body.vmp-page-basic .volts-contact-hero,
	body.vmp-page-basic .volts-contact-hero__inner {
		height: auto !important;
		min-height: 0 !important;
	}

	body.vmp-page-basic .volts-contact-hero__inner {
		padding-bottom: 56px !important;
	}
}

/* FAQ (home y Contacto, todos los anchos): __inner y __list con alto fijo y la sección con
 * overflow: hidden → con varias preguntas abiertas se cortaban las de abajo. Alto según contenido
 * (la sección conserva su min-height). */
.volts-faq-section .volts-faq-section__inner,
.volts-faq-section .volts-faq-section__list {
	height: auto !important;
	min-height: 0 !important;
}

.volts-faq-section.wp-block-volts-faq-section {
	height: auto !important;
}