/*
 * VisuBloq: secciones de página ("pieza a pieza").
 *
 * Todo cuelga de clases .vb-* para no tocar cabecera, pie, carrito ni el resto de Astra.
 * Colores = colores reales de las piezas (paleta del proveedor en lego-app).
 */

/* Tipografía y colores: ver global.css (se carga en todas las páginas). */

/* ---------- Base de sección ---------- */

/* Doble clase: Astra pone su propio relleno a los grupos de primer nivel (.entry-content > .wp-block-group). */
.vb-section.vb-section {
	box-sizing: border-box;
	padding-inline: var(--vb-lateral);
	/* Blanco, o el color de la página si su cabecera lo indica (ver "Color de toda la página"). */
	background: var(--vb-pagina-fondo, var(--vb-blanco));
	color: var(--vb-pagina-texto, var(--vb-negro));
	font-family: var(--vb-fuente);
	font-size: 1.125rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.vb-section *,
.vb-section *::before,
.vb-section *::after {
	box-sizing: border-box;
}

/* Los titulares heredan el color del bloque (negro, o blanco sobre azul). */
.vb-section.vb-section :is(h1, h2, h3, h4) {
	font-family: var(--vb-fuente);
	color: inherit;
	font-weight: 800;
	text-wrap: balance;
}

/* Titular y entradilla de sección. */
.vb-section .vb-titulo {
	margin: 0 0 12px;
	font-size: var(--vb-t2);
	line-height: 0.95;
	letter-spacing: -0.03em;
}

.vb-section .vb-entradilla {
	max-width: 34em;
	margin: 0 0 16px;
	font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
	line-height: 1.45;
	text-wrap: pretty;
}

.vb-section.vb-section p {
	font-family: var(--vb-fuente);
}

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

/* "Pieza": botón principal, una pieza roja vista de lado con dos tetones. */
.vb-section .wp-block-button.is-style-vb-pieza > .wp-block-button__link,
.editor-styles-wrapper .wp-block-button.is-style-vb-pieza > .wp-block-button__link {
	position: relative;
	display: inline-block;
	margin-top: 11px;
	padding: 16px 32px 17px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: var(--vb-radio);
	background-color: var(--vb-rojo);
	color: var(--vb-blanco);
	box-shadow: var(--vb-sombra) var(--vb-sombra) 0 var(--vb-negro);
	font-family: var(--vb-fuente);
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
}

.vb-section .wp-block-button.is-style-vb-pieza > .wp-block-button__link::before,
.vb-section .wp-block-button.is-style-vb-pieza > .wp-block-button__link::after,
.editor-styles-wrapper .wp-block-button.is-style-vb-pieza > .wp-block-button__link::before,
.editor-styles-wrapper .wp-block-button.is-style-vb-pieza > .wp-block-button__link::after {
	content: "";
	position: absolute;
	top: -11px;
	width: 26px;
	height: 11px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-bottom: 0;
	border-radius: 5px 5px 0 0;
	background-color: inherit;
}

.vb-section .wp-block-button.is-style-vb-pieza > .wp-block-button__link::before,
.editor-styles-wrapper .wp-block-button.is-style-vb-pieza > .wp-block-button__link::before {
	left: 20%;
}

.vb-section .wp-block-button.is-style-vb-pieza > .wp-block-button__link::after,
.editor-styles-wrapper .wp-block-button.is-style-vb-pieza > .wp-block-button__link::after {
	right: 20%;
}

.vb-section .wp-block-button.is-style-vb-pieza > .wp-block-button__link:hover {
	color: var(--vb-blanco);
	background-color: var(--vb-rojo);
	transform: translate(-2px, -2px);
	box-shadow: calc(var(--vb-sombra) + 2px) calc(var(--vb-sombra) + 2px) 0 var(--vb-negro);
}

/* Al pulsar, la pieza "encaja": baja hasta su sombra. */
.vb-section .wp-block-button.is-style-vb-pieza > .wp-block-button__link:active {
	transform: translate(var(--vb-sombra), var(--vb-sombra));
	box-shadow: 0 0 0 var(--vb-negro);
}

.vb-section .wp-block-button > .wp-block-button__link:focus-visible {
	outline: 3px solid var(--vb-azul);
	outline-offset: 5px;
}

/* En la pieza, el contorno de foco pasa por fuera de los tetones y de la sombra. */
.vb-section .wp-block-button.is-style-vb-pieza > .wp-block-button__link:focus-visible {
	outline-offset: 15px;
}

/* "Enlace": acción secundaria, solo texto subrayado. */
.vb-section .wp-block-button.is-style-vb-enlace > .wp-block-button__link,
.editor-styles-wrapper .wp-block-button.is-style-vb-enlace > .wp-block-button__link {
	margin-top: 11px;
	padding: 16px 4px 17px;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--vb-negro);
	box-shadow: none;
	font-family: var(--vb-fuente);
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
}

.vb-section .wp-block-button.is-style-vb-enlace > .wp-block-button__link:hover {
	color: var(--vb-negro);
	background: none;
	text-decoration-color: var(--vb-rojo);
}

@media (prefers-reduced-motion: no-preference) {
	.vb-section .wp-block-button.is-style-vb-pieza > .wp-block-button__link {
		transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
	}
}

/* ---------- Hero ---------- */

/* Arriba deja sitio a la cabecera transparente de Astra (70 px). */
.vb-hero.vb-hero {
	padding-top: clamp(96px, 7vw, 104px);
	padding-bottom: var(--vb-seccion);
	overflow-x: clip;
}

.vb-hero .vb-hero__cols {
	gap: clamp(40px, 5vw, 80px);
	margin: 0 auto;
}

.vb-hero .vb-hero__title {
	margin: 0 0 20px;
	font-size: clamp(3.5rem, 2.2rem + 5.4vw, 7rem);
	line-height: 0.92;
	letter-spacing: -0.035em;
}

/* La palabra destacada es una pieza plana amarilla encajada en el titular. */
.vb-hero .vb-hero__title mark {
	display: inline-block;
	margin-top: 0.14em;
	padding: 0.1em 0.12em 0.12em;
	text-box: trim-both cap alphabetic;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 14px;
	background-color: var(--vb-amarillo);
	color: var(--vb-negro);
	box-shadow: var(--vb-sombra) var(--vb-sombra) 0 var(--vb-negro);
	line-height: 1;
	transform: rotate(-2deg);
}

.vb-hero .vb-hero__lead {
	max-width: 30em;
	margin: 0 0 20px;
	font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
	line-height: 1.45;
	text-wrap: pretty;
}

.vb-hero .vb-hero__actions {
	gap: 16px 24px;
	margin: 0;
}

/* "Conoce nuestra historia": al lado del botón en escritorio; en móvil va debajo del tendedero,
   para que el tendedero quede pegado a "Elige tu foto". */
.vb-hero .vb-hero__historia-movil {
	display: none;
	justify-content: center;
	margin: 6px 0 0;
}

@media (max-width: 781px) {
	.vb-hero .vb-hero__historia {
		display: none;
	}

	.vb-hero .vb-hero__historia-movil {
		display: flex;
	}

	/* El tendedero, pegado al botón. */
	.vb-hero .vb-hero__cols > .vb-hero__visual {
		margin-top: 4px;
	}
}

/* Hero con fondo de color (azul): textos, enlace y nota del color del texto; siluetas oscuras. */
.vb-hero.has-text-color {
	--vb-silueta: rgba(0, 0, 0, 0.12);
}

.vb-hero.has-text-color .vb-hero__title,
.vb-hero.has-text-color .vb-tendal .vb-tendal__nota,
.vb-hero.has-text-color .wp-block-button.is-style-vb-enlace > .wp-block-button__link,
.vb-hero.has-text-color .wp-block-button.is-style-vb-enlace > .wp-block-button__link:hover {
	color: inherit;
}

.vb-hero.has-text-color .vb-tendal .vb-tendal__nota::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 34' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 32c2-11 9-19 26-24'/%3E%3Cpath d='M23 4l10 3.5-6 8.5'/%3E%3C/svg%3E");
}

@media (max-width: 960px) {
	.vb-hero .vb-hero__cols {
		flex-wrap: wrap !important;
	}

	.vb-hero .vb-hero__cols > .wp-block-column {
		flex-basis: 100% !important;
	}

	.vb-hero .vb-hero__visual {
		max-width: 520px;
		margin-top: 24px;
		margin-inline: auto;
	}
}

/* ---------- Franja de ventajas ---------- */

.vb-ventajas.vb-ventajas {
	padding-block: 28px;
	border-bottom: var(--vb-borde) solid var(--vb-negro);
}

.vb-ventajas .vb-ventajas__lista {
	gap: 28px 48px;
	margin: 0 auto;
}

.vb-ventajas .vb-ventaja {
	gap: 16px;
}

.vb-ventajas .vb-ventaja__icono {
	flex: 0 0 auto;
	margin: 0;
}

.vb-ventajas .vb-ventaja__icono img {
	display: block;
	width: 56px;
	height: 56px;
}

.vb-ventajas .vb-ventaja__titulo {
	margin: 4px 0 2px;
	font-size: var(--vb-t5);
	font-weight: 700;
	line-height: 1.3;
}

.vb-ventajas .vb-ventaja__texto {
	margin: 0;
	color: var(--vb-texto-suave);
	font-size: 1rem;
	line-height: 1.45;
}

/* Tableta: las tres ventajas una debajo de otra, en dos columnas de texto cómodo. */
@media (min-width: 782px) and (max-width: 960px) {
	.vb-ventajas .vb-ventajas__lista {
		flex-wrap: wrap !important;
	}

	.vb-ventajas .vb-ventajas__lista > .wp-block-column {
		flex-basis: calc(50% - 24px) !important;
		flex-grow: 0;
	}
}

/* ---------- Cómo funciona ---------- */

.vb-pasos.vb-pasos {
	padding-block: var(--vb-seccion);
}

/* Misma distribución que las tarjetas del kit: tres en fila, niveladas y de la misma altura. */
.vb-pasos .vb-pasos__lista {
	align-items: stretch;
	gap: 24px;
	margin: 24px auto 0;
}

.vb-pasos .vb-paso-col {
	position: relative;
	display: flex;
	flex-direction: column;
}

.vb-pasos .vb-paso {
	position: relative;
	z-index: 1;
	flex: 1;
	margin-top: 14px;
	padding: 16px 20px 18px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 12px;
	box-shadow: 8px 8px 0 var(--vb-negro);
}

/* Dos tetones encima de cada paso: es una pieza vista de lado. */
.vb-pasos .vb-paso::before,
.vb-pasos .vb-paso::after {
	content: "";
	position: absolute;
	top: -14px;
	width: 40px;
	height: 14px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-bottom: 0;
	border-radius: 6px 6px 0 0;
	background-color: inherit;
}

.vb-pasos .vb-paso::before {
	left: 24px;
}

.vb-pasos .vb-paso::after {
	left: 84px;
}

.vb-pasos .vb-paso__num {
	margin: 0 0 8px;
	font-size: clamp(2.25rem, 1.9rem + 1vw, 3rem);
	font-weight: 800;
	line-height: 0.8;
	letter-spacing: -0.04em;
}

.vb-section .vb-paso .vb-paso__titulo {
	margin: 0 0 6px;
	font-size: var(--vb-t4);
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.vb-pasos .vb-paso p:last-child {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
}

/* Al pasar el cursor, la pieza se levanta un poco (como las tarjetas de momentos). */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	.vb-pasos .vb-paso {
		transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
	}

	.vb-pasos .vb-paso:hover {
		transform: translate(-2px, -4px);
		box-shadow: 10px 12px 0 var(--vb-negro);
	}
}

/* ---------- Mascota ---------- */

.vb-section .vb-mascota {
	margin: 0;
}

.vb-section .vb-mascota img {
	display: block;
	width: 100%;
	height: auto;
}

/* Tableta y móvil: un paso debajo de otro, con poco hueco entre ellos. */
@media (max-width: 960px) {
	.vb-pasos .vb-pasos__lista {
		flex-wrap: wrap !important;
		gap: 14px;
	}

	.vb-pasos .vb-paso {
		padding: 14px 16px 16px;
		box-shadow: 6px 6px 0 var(--vb-negro);
	}

	.vb-pasos .vb-pasos__lista > .wp-block-column {
		flex-basis: 100% !important;
		margin-bottom: 0 !important;
	}
}

/* ---------- Antes / después ---------- */

.vb-comparar.vb-comparar {
	padding-block: var(--vb-seccion);
}

.vb-comparar .vb-comparar__cols {
	gap: clamp(40px, 5vw, 80px);
	margin: 0 auto;
}

.vb-comparar .vb-dato {
	margin: 0 0 8px;
	font-size: 1rem;
	font-weight: 600;
}

@media (max-width: 960px) {
	.vb-comparar .vb-comparar__cols {
		flex-wrap: wrap !important;
	}

	.vb-comparar .vb-comparar__cols > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Sin JavaScript (y en el editor): foto y mosaico, uno junto a otro. */
.vb-comparador {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	max-width: 620px;
	margin-inline: auto;
	overflow: hidden;
	border: 4px solid var(--vb-negro);
	border-radius: 8px;
	background: var(--vb-negro);
	box-shadow: 14px 14px 0 var(--vb-negro);
}

.vb-comparador figure.wp-block-image {
	position: relative;
	margin: 0;
}

.vb-comparador figure.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

.vb-comparador .wp-element-caption {
	position: absolute;
	top: 14px;
	left: 14px;
	margin: 0;
	padding: 4px 10px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 8px;
	background: var(--vb-blanco);
	color: var(--vb-negro);
	font-family: var(--vb-fuente);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
}

.vb-comparador figure:nth-of-type(2) .wp-element-caption {
	right: 14px;
	left: auto;
}

/* Con JavaScript: las dos imágenes superpuestas y un asa para deslizar. */
.vb-comparador.is-activo {
	grid-template-columns: 1fr;
	--pos: 50%;
}

.vb-comparador.is-activo figure.wp-block-image {
	grid-area: 1 / 1;
}

.vb-comparador.is-activo figure:nth-of-type(2) {
	clip-path: inset(0 0 0 var(--pos));
}

.vb-comparador__rango {
	position: absolute;
	z-index: 3;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	touch-action: pan-y;
}

.vb-comparador__asa {
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 0;
	left: var(--pos);
	width: 4px;
	background: var(--vb-negro);
	transform: translateX(-50%);
	pointer-events: none;
}

/* El tirador: una pieza blanca de 1 × 1 con flechas. */
.vb-comparador__asa::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 52px;
	height: 52px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 12px;
	background: var(--vb-blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 26px no-repeat;
	box-shadow: 4px 4px 0 var(--vb-negro);
	transform: translate(-50%, -50%);
}

.vb-comparador__rango:focus-visible + .vb-comparador__asa::after {
	outline: 3px solid var(--vb-azul);
	outline-offset: 4px;
}

/* ---------- Separador: fila de piezas encajadas ---------- */

/* El color del bloque (fondo) es el de la sección de arriba; las piezas apoyan en la de abajo. */
/* Especificidad alta: WordPress limita los separadores a 100 px de ancho. */
.wp-block-separator.wp-block-separator.is-style-vb-piezas.is-style-vb-piezas {
	width: 100%;
	max-width: none;
	height: 36px;
	margin: 0 !important;
	border: 0;
	opacity: 1;
	/*
	 * Tres capas: una línea negra continua en el borde inferior, la fila de piezas y,
	 * debajo, una banda negra a la altura de las piezas. Así no asoma el fondo entre
	 * ladrillo y ladrillo aunque cambie el tamaño de pantalla o el zoom.
	 */
	background-image:
		linear-gradient(#000, #000),
		var(--vb-fila-piezas),
		linear-gradient(#000, #000);
	background-repeat: no-repeat, repeat-x, no-repeat;
	background-position: left bottom, center bottom, left bottom;
	/* La imagen de las piezas lleva 1 px transparente abajo: así, con zoom, su borde negro no se
	   cuela en la fila de arriba (la línea negra inferior lo tapa). */
	background-size: 100% 3px, 384px 37px, 100% 25px;
}

/* ---------- Mascota con bocadillo ---------- */

.vb-section .vb-consejo {
	gap: 4px;
	margin-top: 16px;
}

.vb-section .vb-consejo__mascota {
	flex: 0 0 auto;
	width: 96px;
}

.vb-section .vb-bocadillo {
	position: relative;
	max-width: 22em;
	margin: 0 0 44px 14px;
	padding: 12px 16px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 18px;
	background: var(--vb-blanco);
	color: var(--vb-negro);
	box-shadow: 5px 5px 0 var(--vb-negro);
	font-size: 1rem;
	line-height: 1.45;
}

/* Rabito del bocadillo apuntando a la mascota. */
.vb-section .vb-bocadillo::before,
.vb-section .vb-bocadillo::after {
	content: "";
	position: absolute;
	border-style: solid;
}

.vb-section .vb-bocadillo::before {
	bottom: 18px;
	left: -19px;
	border-width: 10px 18px 10px 0;
	border-color: transparent var(--vb-negro) transparent transparent;
}

.vb-section .vb-bocadillo::after {
	bottom: 21px;
	left: -13px;
	border-width: 7px 13px 7px 0;
	border-color: transparent var(--vb-blanco) transparent transparent;
}

/* La mascota se puede pulsar: lluvia de piezas (mascota.js). */
.vb-section .vb-mascota img[role="button"] {
	cursor: pointer;
}

.vb-section .vb-mascota img[role="button"]:focus-visible {
	outline: 3px solid var(--vb-azul);
	outline-offset: 4px;
	border-radius: 12px;
}

.vb-confeti {
	position: fixed;
	z-index: 99999;
	width: 14px;
	height: 14px;
	border: 2px solid var(--vb-negro);
	border-radius: 50%;
	pointer-events: none;
}

/* ---------- Build your moments ---------- */

.vb-momentos.vb-momentos {
	padding-block: var(--vb-seccion);
}

.vb-momentos .vb-momentos__lista {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 24px;
	margin: 24px auto 0;
}

.vb-momentos .vb-momento {
	margin: 0;
	padding: 18px 18px 20px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 14px;
	background: var(--vb-blanco);
	box-shadow: 6px 6px 0 var(--vb-negro);
	transform: rotate(-1.5deg);
}

/* Como pegatinas: cada tarjeta un poco torcida hacia un lado. */
.vb-momentos .vb-momento:nth-child(even) {
	transform: rotate(1.2deg) translateY(10px);
}

.vb-momentos .vb-momento__icono {
	margin: 0 0 12px;
}

.vb-momentos .vb-momento__icono img {
	display: block;
	width: 64px;
	height: 64px;
}

.vb-momentos .vb-momento__titulo {
	margin: 0 0 6px;
	font-size: var(--vb-t5);
	font-weight: 800;
	line-height: 1.15;
}

.vb-momentos .vb-momento__texto {
	margin: 0;
	color: var(--vb-texto-suave);
	font-size: 1rem;
	line-height: 1.45;
}

.vb-momentos .vb-momentos__accion {
	margin: 20px 0 0;
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	.vb-momentos .vb-momento {
		transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
	}

	.vb-momentos .vb-momento:hover {
		transform: rotate(0) translate(-2px, -4px);
		box-shadow: 8px 10px 0 var(--vb-negro);
	}
}

@media (max-width: 1100px) {
	.vb-momentos .vb-momentos__lista {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 600px) {
	.vb-momentos .vb-momentos__lista {
		grid-template-columns: repeat(2, 1fr);
		gap: 18px 14px;
	}

	.vb-momentos .vb-momento {
		padding: 16px 14px 18px;
	}

	.vb-momentos .vb-momento__icono img {
		width: 52px;
		height: 52px;
	}

	.vb-momentos .vb-momento__titulo {
		font-size: 1.125rem;
	}

	.vb-momentos .vb-momento__texto {
		font-size: 0.9375rem;
	}
}

/* ---------- Qué incluye tu caja ---------- */

.vb-incluye.vb-incluye {
	padding-block: var(--vb-seccion);
}

.vb-incluye .vb-incluye__cols {
	gap: clamp(40px, 5vw, 80px);
	margin: 0 auto;
}

.vb-incluye .vb-incluye__lista {
	display: grid;
	gap: 12px;
	margin: 4px 0 0;
}

.vb-incluye .vb-incluye__item {
	gap: 16px;
}

.vb-incluye .vb-incluye__icono {
	flex: 0 0 auto;
	margin: 0;
}

.vb-incluye .vb-incluye__icono img {
	display: block;
	width: 56px;
	height: 56px;
}

.vb-incluye .vb-incluye__titulo {
	margin: 4px 0 2px;
	font-size: var(--vb-t5);
	font-weight: 800;
	line-height: 1.25;
}

.vb-incluye .vb-incluye__texto {
	margin: 0;
	font-size: 1rem;
	line-height: 1.45;
}

@media (max-width: 960px) {
	.vb-incluye .vb-incluye__cols,
	.vb-tamanos .vb-tamanos__cols {
		flex-wrap: wrap !important;
	}

	.vb-incluye .vb-incluye__cols > .wp-block-column,
	.vb-tamanos .vb-tamanos__cols > .wp-block-column {
		flex-basis: 100% !important;
	}

}

/* ---------- Tamaños y precios ---------- */

.vb-tamanos.vb-tamanos {
	padding-block: var(--vb-seccion);
}

.vb-tamanos .vb-tamanos__cols {
	gap: clamp(24px, 3vw, 48px);
	margin: 0 auto;
}

/* El título va en la columna de las tarjetas: el sofá queda a su altura. */
.vb-tamanos .vb-tamanos__cols .vb-titulo {
	margin: 0 0 18px;
}

/* En escritorio, en una sola línea dentro de su columna. */
@media (min-width: 961px) {
	.vb-tamanos .vb-tamanos__cols .vb-titulo {
		font-size: min(var(--vb-t2), 3.3vw);
		white-space: nowrap;
	}
}

.vb-tamanos .vb-tamanos__lista {
	display: grid;
	gap: 16px;
}

.vb-tamanos .vb-tamano {
	position: relative;
	margin: 0;
	padding: 14px 18px 10px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 14px;
	background: var(--vb-blanco);
	box-shadow: 6px 6px 0 var(--vb-negro);
}

.vb-tamanos.is-interactivo .vb-tamano {
	cursor: pointer;
}

.vb-tamanos .vb-tamano.is-elegido {
	background: var(--vb-amarillo);
}

.vb-tamanos .vb-tamano__nombre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0;
	font-size: 1.875rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

.vb-tamanos .vb-etiqueta {
	padding: 4px 10px;
	border: 2px solid var(--vb-negro);
	border-radius: 8px;
	background: var(--vb-amarillo);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0;
}

.vb-tamanos .vb-tamano.is-elegido .vb-etiqueta {
	background: var(--vb-blanco);
}

.vb-tamanos .vb-tamano__precio {
	margin: 6px 0 4px;
	font-size: 1.375rem;
	font-weight: 700;
}

/* Datos en una o dos líneas, no uno debajo de otro: la tarjeta queda más baja. */
.vb-tamanos .vb-tamano__datos {
	display: flex;
	flex-wrap: wrap;
	gap: 0 18px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.vb-tamanos .vb-tamano__datos li::before {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	margin: 0 10px 1px 0;
	border: 2px solid var(--vb-negro);
	border-radius: 50%;
	background: var(--vb-rojo);
}

/* "Elige tu foto", debajo de las tarjetas. */
.vb-tamanos .vb-tamanos__accion {
	margin: 22px 0 0;
}

/* Botón que añade tamanos.js en la esquina de cada tarjeta. */
.vb-tamano__ver {
	position: absolute;
	top: 14px;
	right: 16px;
	padding: 6px 12px;
	border: 2px solid var(--vb-negro);
	border-radius: 999px;
	background: var(--vb-blanco);
	color: var(--vb-negro);
	box-shadow: 3px 3px 0 var(--vb-negro);
	font: 700 0.875rem/1.2 var(--vb-fuente);
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

/* Doble clase: Astra pinta los botones de otro color al pasar el ratón o al tener el foco. */
.vb-tamano__ver.vb-tamano__ver:is(:hover, :focus) {
	border-color: var(--vb-negro);
	background: var(--vb-amarillo);
	color: var(--vb-negro);
}

.vb-tamano__ver.vb-tamano__ver[aria-pressed="true"] {
	border-color: var(--vb-negro);
	background: var(--vb-negro);
	color: var(--vb-blanco);
	box-shadow: none;
	transform: translate(3px, 3px);
}

.vb-tamano__ver:focus-visible {
	outline: 3px solid var(--vb-azul);
	outline-offset: 3px;
}

/* Escena a escala. */
.vb-escala {
	max-width: 500px;
	margin: 0 auto;
	padding: 10px 14px 8px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 16px;
	background: #f4f4f4;
	box-shadow: 8px 8px 0 var(--vb-negro);
}

.vb-escala__dibujo {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	font-family: var(--vb-fuente);
	font-size: 17px;
	font-weight: 700;
}

.vb-escala__cuadro {
	transform-box: fill-box;
	transform-origin: 50% 100%;
}

.vb-escala[data-lado="96"] .vb-escala__cuadro {
	transform: scale(2);
}

.vb-escala__cota--96,
.vb-escala[data-lado="96"] .vb-escala__cota--48 {
	display: none;
}

.vb-escala[data-lado="96"] .vb-escala__cota--96 {
	display: inline;
}

/* Cada tamaño con su mosaico: 48 × 48 piezas o 96 × 96. */
.vb-escala__mosaico--96,
.vb-escala[data-lado="96"] .vb-escala__mosaico--48 {
	opacity: 0;
}

.vb-escala[data-lado="96"] .vb-escala__mosaico--96 {
	opacity: 1;
}

/* La foto original, en una esquina, como una foto instantánea pequeña. */
.vb-escala {
	position: relative;
}

.vb-escala__original {
	position: absolute;
	top: 14px;
	left: 14px;
	width: clamp(64px, 20%, 112px);
	padding: 4px 4px 2px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 6px;
	background: var(--vb-blanco);
	box-shadow: 4px 4px 0 var(--vb-negro);
	transform: rotate(-4deg);
}

.vb-escala__original img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2px;
}

.vb-escala__original-pie {
	display: block;
	color: var(--vb-negro);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
	.vb-escala__cuadro {
		transition: transform 0.45s cubic-bezier(0.3, 1.35, 0.5, 1);
	}

	.vb-escala__mosaico {
		transition: opacity 0.3s;
	}
}

@media (max-width: 600px) {
	.vb-tamanos .vb-tamano__nombre {
		font-size: 1.625rem;
	}

	/* Móvil: "Ver a escala" al final de la tarjeta. */
	.vb-tamanos .vb-tamano {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		column-gap: 16px;
		padding-bottom: 12px;
	}

	.vb-tamanos .vb-tamano > :not(.vb-tamano__ver) {
		flex-basis: 100%;
	}

	.vb-tamano__ver {
		position: static;
		order: 6;
		margin: 6px 0 0;
	}

	.vb-escala {
		padding: 12px 10px 8px;
	}

	.vb-escala__dibujo {
		font-size: 27px;
	}
}

/* Tableta: las dos tarjetas de tamaño una junto a otra, encima de la escena. */
@media (min-width: 601px) and (max-width: 960px) {
	.vb-tamanos .vb-tamanos__lista {
		grid-template-columns: 1fr 1fr;
	}

	.vb-tamano__ver {
		position: static;
		margin: 12px 0 0;
	}
}

/* ---------- Hero: tendedero de fotos ---------- */

.vb-tendedero {
	--foto: clamp(150px, 11.5vw, 175px);
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}

/* Cada foto: polaroid con contorno negro y sombra dura. */
.vb-colgada {
	position: relative;
	width: var(--foto);
	margin: 0;
	transform-style: preserve-3d;
}

.vb-colgada > figure.wp-block-image {
	position: relative;
	margin: 0;
	padding: 9px 9px 0;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 10px;
	background: var(--vb-blanco);
	box-shadow: 6px 6px 0 var(--vb-negro);
	backface-visibility: hidden;
}

.vb-colgada > figure.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border: 2px solid var(--vb-negro);
	border-radius: 4px;
}

.vb-colgada .wp-element-caption {
	margin: 0;
	padding: 7px 2px 9px;
	color: var(--vb-negro);
	font-family: var(--vb-fuente);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: left;
}

/* Reverso: la foto original, detrás del mosaico. */
.vb-colgada.tiene-reverso > figure:nth-of-type(2) {
	position: absolute;
	inset: 0;
	transform: rotateY(180deg);
}

/* Icono de "girar" en la esquina de la foto. */
.vb-colgada__girar {
	position: absolute;
	right: 14px;
	bottom: 38px;
	display: grid;
	width: 32px;
	height: 32px;
	place-items: center;
	border: 2px solid var(--vb-negro);
	border-radius: 50%;
	background: var(--vb-amarillo);
	color: var(--vb-negro);
	box-shadow: 2px 2px 0 var(--vb-negro);
}

/* Colgadas (lo activa tendedero.js): una fila sobre la cuerda. */
.vb-tendedero.is-colgado {
	flex-wrap: nowrap;
	gap: clamp(12px, 1.5vw, 22px);
	align-items: flex-start;
	padding: 0 8px 28px;
}

.vb-tendedero__cuerda {
	position: absolute;
	top: 0;
	left: 0;
	overflow: visible;
	pointer-events: none;
}

.vb-tendedero__cuerda path {
	fill: none;
	stroke: var(--vb-negro);
	stroke-width: 3;
	stroke-linecap: round;
}

.vb-tendedero.is-colgado .vb-colgada {
	flex: 0 0 var(--foto);
	margin-top: calc(var(--caida, 0px) + 22px);
	rotate: var(--giro, 0deg);
	transform-origin: 50% -12px;
	cursor: default;
}

.vb-tendedero.is-colgado .vb-colgada.tiene-reverso {
	cursor: pointer;
}

.vb-tendedero.is-colgado .vb-colgada.is-girada {
	transform: rotateY(180deg);
}

/* La pinza: una pieza de 1 × 2 de color, de pie, con su tetón. */
.vb-tendedero.is-colgado .vb-colgada::before,
.vb-tendedero.is-colgado .vb-colgada::after {
	content: "";
	position: absolute;
	z-index: 2;
	left: 50%;
	border: var(--vb-borde) solid var(--vb-negro);
	background: var(--pinza, var(--vb-rojo));
	translate: -50% 0;
}

.vb-tendedero.is-colgado .vb-colgada::before {
	top: -24px;
	width: 22px;
	height: 38px;
	border-radius: 4px;
	box-shadow: 2px 2px 0 var(--vb-negro);
}

.vb-tendedero.is-colgado .vb-colgada::after {
	top: -32px;
	width: 12px;
	height: 10px;
	border-bottom: 0;
	border-radius: 3px 3px 0 0;
}

.vb-colgada:focus-visible {
	outline: none;
}

.vb-colgada:focus-visible > figure {
	outline: 3px solid var(--vb-azul);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: no-preference) {
	.vb-tendedero.is-colgado .vb-colgada {
		transition: transform 0.6s cubic-bezier(0.3, 1.3, 0.5, 1);
	}

	/* Al pasar el cursor, la foto se balancea en su pinza (tendedero.js pone la clase
	   y la quita al terminar, así el movimiento acaba entero aunque el cursor salga). */
	.vb-tendedero.is-colgado .vb-colgada.is-balanceo {
		animation: vb-balanceo 1.6s ease-in-out;
	}
}

@keyframes vb-balanceo {
	0% {
		rotate: var(--giro, 0deg);
	}

	22% {
		rotate: calc(var(--giro, 0deg) + 5deg);
	}

	50% {
		rotate: calc(var(--giro, 0deg) - 3.5deg);
	}

	76% {
		rotate: calc(var(--giro, 0deg) + 1.5deg);
	}

	100% {
		rotate: var(--giro, 0deg);
	}
}

/* Tableta: un poco más grandes, debajo del texto. */
@media (min-width: 782px) and (max-width: 960px) {
	.vb-tendedero {
		--foto: 210px;
	}
}

/* Táctil o pantalla estrecha: la cuerda se desliza con el dedo. */
@media (hover: none), (max-width: 781px) {
	.vb-tendedero.is-colgado {
		--foto: min(58vw, 240px);
		justify-content: flex-start;
		margin-inline: calc(var(--vb-lateral) * -1);
		padding: 0 var(--vb-lateral) 28px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--vb-lateral);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.vb-tendedero.is-colgado::-webkit-scrollbar {
		display: none;
	}

	.vb-tendedero.is-colgado .vb-colgada {
		scroll-snap-align: start;
	}

	/* Espacio al final para que la última foto pueda quedar entera. */
	.vb-tendedero.is-colgado::after {
		content: "";
		flex: 0 0 1px;
	}
}

/* ---------- Quiénes somos (About us) ---------- */

.vb-nosotros.vb-nosotros {
	padding-block: var(--vb-seccion);
}

/* El texto, repartido en dos columnas en escritorio. */
.vb-nosotros .vb-nosotros__cols {
	gap: clamp(32px, 5vw, 64px);
	align-items: flex-start;
	margin: 0 auto;
}

/* Ancho de lectura cómodo: unos 60-65 caracteres por línea. */
.vb-nosotros .vb-nosotros__texto p {
	max-width: 62ch;
	margin: 0 0 1em;
	font-size: 1.125rem;
	line-height: 1.65;
	text-wrap: pretty;
}

.vb-nosotros .vb-nosotros__texto p:last-child {
	margin-bottom: 0;
}

/* Móvil: una sola columna, con el mismo espacio entre párrafos. */
@media (max-width: 781px) {
	.vb-nosotros .vb-nosotros__cols {
		gap: 0;
	}

	.vb-nosotros .vb-nosotros__cols > .wp-block-column:first-child {
		margin-bottom: 1em !important;
	}
}

/* ---------- Recuadro "El día que montamos el primer VisuBloq" ---------- */

.vb-historia.vb-historia {
	padding-block: var(--vb-seccion);
	/* Al llegar por el anclaje #nuestra-historia, deja sitio a la cabecera. */
	scroll-margin-top: 110px;
}

/* Primera sección de una página con cabecera transparente: baja por debajo de la cabecera. */
.ast-theme-transparent-header .entry-content > .vb-section.vb-section:first-child:not(.vb-hero) {
	padding-top: calc(110px + var(--vb-seccion));
}

/* La tarjeta: centrada y al ancho del contenido. */
.vb-historia .vb-historia__tarjeta {
	--vb-tarjeta-relleno: clamp(20px, 3vw, 40px);
	max-width: 1200px;
	padding: var(--vb-tarjeta-relleno);
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 20px;
	background: var(--vb-amarillo);
	color: var(--vb-negro);
	box-shadow: 10px 10px 0 var(--vb-negro);
}

.vb-section .vb-historia__tarjeta .vb-historia__titulo {
	margin: 0 0 12px;
	font-size: var(--vb-t3);
	line-height: 1;
	letter-spacing: -0.03em;
}

.vb-historia .vb-historia__texto {
	max-width: 62ch;
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.6;
}

/* Fotos del día: polaroids un poco torcidas. */
.vb-historia .vb-historia__fotos.wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin: 28px 0 36px;
	padding: 4px 6px 10px;
}

.vb-historia .vb-historia__fotos.wp-block-gallery > figure.wp-block-image {
	width: auto !important;
	margin: 0;
	padding: 7px 7px 24px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 8px;
	background: var(--vb-blanco);
	box-shadow: 5px 5px 0 var(--vb-negro);
	transform: rotate(-2deg);
}

.vb-historia .vb-historia__fotos.wp-block-gallery > figure:nth-child(even) {
	transform: rotate(2deg) translateY(6px);
}

.vb-historia .vb-historia__fotos.wp-block-gallery > figure:nth-child(3n) {
	transform: rotate(-1deg) translateY(-3px);
}

.vb-historia .vb-historia__fotos.wp-block-gallery > figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border: 2px solid var(--vb-negro);
	border-radius: 3px;
}

/* La historia de Jero, en un bloque blanco (la tarjeta es amarilla). */
.vb-historia .vb-historia__jero {
	gap: 28px;
	margin: 0;
	padding: 24px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 16px;
	background: var(--vb-blanco);
	box-shadow: 6px 6px 0 var(--vb-negro);
}

.vb-historia .vb-historia__jero figure.wp-block-image {
	max-width: 240px;
	margin: 0 auto;
}

.vb-historia .vb-historia__jero img {
	display: block;
	width: 100%;
	height: auto;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 10px;
	transform: rotate(-2deg);
}

.vb-historia .vb-historia__jero h3 {
	margin: 0 0 8px;
	font-size: var(--vb-t4);
	line-height: 1.1;
}

.vb-historia .vb-historia__jero p {
	max-width: 60ch;
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.55;
}

/*
 * Escritorio y tableta: dos columnas para que el recuadro quepa casi en una pantalla. A la izquierda,
 * título y texto; a la derecha, las ocho fotos en una rejilla de 4 × 2; debajo, a todo el ancho, Jero.
 */
@media (min-width: 782px) {
	.vb-historia .vb-historia__tarjeta {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		grid-template-rows: auto auto 1fr;
		column-gap: clamp(28px, 3vw, 48px);
		align-items: start;
	}

	.vb-historia .vb-historia__tarjeta > * {
		grid-column: 1;
	}

	.vb-historia .vb-historia__tarjeta > .vb-historia__fotos.wp-block-gallery {
		grid-column: 2;
		grid-row: 1 / 3;
		grid-template-columns: repeat(4, 1fr);
		gap: 14px;
		margin: 0;
	}

	.vb-historia .vb-historia__fotos.wp-block-gallery > figure.wp-block-image {
		padding: 6px 6px 18px;
	}

	.vb-historia .vb-historia__tarjeta > .vb-historia__jero {
		grid-column: 1 / -1;
		gap: 24px;
		margin-top: 28px;
		padding: 18px 24px;
	}

	.vb-historia .vb-historia__jero figure.wp-block-image {
		max-width: 150px;
	}

	.vb-historia .vb-historia__jero > .wp-block-column:first-child {
		flex: 0 0 116px !important;
	}

	.vb-historia .vb-historia__jero > .wp-block-column:last-child {
		flex: 1 1 auto !important;
	}

	.vb-historia .vb-historia__jero p {
		max-width: 80ch;
		font-size: 1.125rem;
	}
}

/* Tableta: Jero, debajo y a todo el ancho de la tarjeta. */
@media (min-width: 782px) and (max-width: 960px) {
	.vb-historia .vb-historia__tarjeta > .vb-historia__fotos.wp-block-gallery {
		grid-row: 1 / 3;
	}

	.vb-historia .vb-historia__tarjeta > .vb-historia__jero {
		grid-column: 1 / -1;
	}
}

@media (max-width: 781px) {
	.vb-historia .vb-historia__jero {
		flex-wrap: wrap !important;
	}

	.vb-historia .vb-historia__jero > .wp-block-column {
		flex-basis: 100% !important;
	}

	.vb-historia .vb-historia__tarjeta {
		box-shadow: 6px 6px 0 var(--vb-negro);
	}
}

/* Móvil: las polaroids en una fila que se desliza con el dedo. */
@media (max-width: 600px) {
	.vb-historia .vb-historia__fotos.wp-block-gallery {
		display: flex;
		flex-wrap: nowrap;
		gap: 16px;
		margin-inline: calc(var(--vb-tarjeta-relleno) * -1);
		padding: 8px var(--vb-tarjeta-relleno) 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--vb-tarjeta-relleno);
		scrollbar-width: none;
	}

	.vb-historia .vb-historia__fotos.wp-block-gallery::-webkit-scrollbar {
		display: none;
	}

	.vb-historia .vb-historia__fotos.wp-block-gallery > figure.wp-block-image {
		flex: 0 0 44%;
		padding: 5px 5px 16px;
		scroll-snap-align: start;
	}

	.vb-historia .vb-historia__fotos.wp-block-gallery {
		margin-block: 20px 24px;
	}

	.vb-historia .vb-historia__texto {
		font-size: 1rem;
		line-height: 1.55;
	}

	/* Jero: la foto pequeña al lado del título y el texto, no encima. */
	.vb-historia .vb-historia__jero {
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
		gap: 14px;
		padding: 14px;
	}

	.vb-historia .vb-historia__jero > .wp-block-column:first-child {
		flex: 0 0 88px !important;
	}

	.vb-historia .vb-historia__jero > .wp-block-column:last-child {
		flex: 1 1 auto !important;
	}

	.vb-historia .vb-historia__jero figure.wp-block-image {
		max-width: none;
	}

	.vb-historia .vb-historia__jero h3 {
		font-size: var(--vb-t5);
	}

	.vb-historia .vb-historia__jero p {
		font-size: 0.9375rem;
		line-height: 1.45;
	}
}


@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Tarjetas de tamaño más compactas. */
.vb-tamanos .vb-tamano__precio {
	margin: 6px 0 4px;
}

.vb-tamanos .vb-tamano__datos {
	line-height: 1.5;
}

/* La escena llega hasta el borde derecho del contenido, como las demás secciones. */
.vb-escala {
	max-width: 620px;
	margin-left: auto;
}

@media (max-width: 960px) {
	.vb-escala {
		margin-inline: auto;
	}
}

/* ---------- Detalles de piezas ---------- */

/* Las tarjetas de tamaño también son piezas: dos tetones encima. */
.vb-tamanos .vb-tamano {
	margin-top: 12px;
}

.vb-tamanos .vb-tamano::before,
.vb-tamanos .vb-tamano::after {
	content: "";
	position: absolute;
	top: -12px;
	width: 34px;
	height: 12px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-bottom: 0;
	border-radius: 5px 5px 0 0;
	background-color: inherit;
}

.vb-tamanos .vb-tamano::before {
	left: 20px;
}

.vb-tamanos .vb-tamano::after {
	left: 70px;
}

/* ---------- Caja animada (Qué incluye tu caja) ---------- */

.vb-caja {
	max-width: 400px;
	margin: 0 auto;
}

/* Doble clase: otra regla le ponía overflow: hidden y recortaba lo que cae desde arriba. */
.vb-caja__dibujo.vb-caja__dibujo {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.vb-caja__dibujo g {
	transform-box: fill-box;
	transform-origin: 50% 50%;
}

/*
 * Ligado al scroll y repartido por casi todo el rato en que la caja se ve: empieza cuando
 * asoma un poco por abajo y termina poco antes de que salga por arriba. La caja crece y se
 * endereza; la placa baja girando y entra en la caja (por detrás de las solapas); las
 * instrucciones bajan meciéndose como un papel; las piezas caen una tras otra, tranquilas,
 * hasta su sitio (encima o al lado de la caja). Todo aparece de transparente a visible para
 * no pisar la fila de piezas de arriba. Al subir, se deshace. Sin soporte o con "reducir
 * movimiento", quieta y llena.
 */
.vb-caja__caja {
	transform-origin: 50% 100%;
}

.vb-caja__placa {
	--mx: 0px;
	--my: -230px;
	--mr: -20deg;
}

.vb-caja__pieza {
	--mx: calc((var(--i) - 4) * 5px);
	--my: calc(-120px - var(--i) * 6px);
	--mr: calc((var(--i) - 4) * 10deg + 25deg);
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.wp-child-theme-visubloq .vb-caja {
			view-timeline: --vb-caja block;
		}

		.wp-child-theme-visubloq .vb-caja__caja {
			animation: vb-caja-bote linear both;
			animation-timeline: --vb-caja;
			animation-range: cover 8% cover 88%;
		}

		.wp-child-theme-visubloq .vb-caja__placa {
			animation: vb-caja-cae linear both;
			animation-timeline: --vb-caja;
			animation-range: cover 10% cover 55%;
		}

		.wp-child-theme-visubloq .vb-caja__instrucciones {
			animation: vb-caja-papel linear both;
			animation-timeline: --vb-caja;
			animation-range: cover 22% cover 75%;
		}

		/* Cada pieza cae un poco más tarde que la anterior; la última llega casi al final. */
		.wp-child-theme-visubloq .vb-caja__pieza {
			animation: vb-caja-cae linear both;
			animation-timeline: --vb-caja;
			animation-range: cover calc(14% + var(--i) * 5%) cover calc(52% + var(--i) * 4.5%);
		}
	}
}

/* Caída suave: baja deslizándose y se asienta con un leve rebote. */
@keyframes vb-caja-cae {
	0% {
		opacity: 0;
		transform: translate(var(--mx), var(--my)) rotate(var(--mr));
		animation-timing-function: ease-in-out;
	}

	30% {
		opacity: 1;
	}

	85% {
		transform: translate(0, 3px) rotate(0deg);
		animation-timing-function: ease-out;
	}

	100% {
		opacity: 1;
		transform: none;
	}
}

/* Papel que baja meciéndose suavemente hasta entrar en la caja. */
@keyframes vb-caja-papel {
	0% {
		opacity: 0;
		transform: translate(-30px, -140px) rotate(16deg);
		animation-timing-function: ease-in-out;
	}

	30% {
		opacity: 1;
	}

	40% {
		transform: translate(22px, -90px) rotate(-9deg);
		animation-timing-function: ease-in-out;
	}

	72% {
		transform: translate(-12px, -36px) rotate(5deg);
		animation-timing-function: ease-in-out;
	}

	100% {
		opacity: 1;
		transform: none;
	}
}

/* La caja crece y se endereza; se aplasta un poco cuando cae la placa y recupera la forma. */
@keyframes vb-caja-bote {
	0% {
		transform: scale(0.85) rotate(-5deg);
		animation-timing-function: ease-in-out;
	}

	45% {
		transform: none;
		animation-timing-function: ease-in-out;
	}

	56% {
		transform: scale(1.03, 0.95);
		animation-timing-function: ease-in-out;
	}

	70% {
		transform: none;
	}

	100% {
		transform: none;
	}
}


@media (max-width: 960px) {
	.vb-caja {
		max-width: 300px;
	}
}

/* ---------- Mascota entre secciones ---------- */

/*
 * La mascota y su bocadillo quedan a caballo sobre la fila de piezas: mitad sobre
 * la sección de arriba y mitad sobre la de abajo, por encima de todo. No ocupan
 * altura: entre las dos secciones solo queda la fila de piezas.
 */
.vb-entre.vb-entre {
	position: relative;
	z-index: 5;
	margin: 0;
	padding: 0;
	font-family: var(--vb-fuente);
}

.vb-entre .vb-entre__consejo {
	position: absolute;
	z-index: 2;
	top: 50%;
	right: 0;
	left: 0;
	box-sizing: border-box;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--vb-lateral);
	gap: 10px;
	align-items: center !important;
	transform: translateY(-50%);
	pointer-events: none;
}

.vb-entre.vb-entre--derecha .vb-entre__consejo {
	justify-content: flex-end;
}

.vb-entre .vb-entre__consejo > * {
	pointer-events: auto;
}

.vb-entre .vb-consejo__mascota {
	flex: 0 0 auto;
	width: var(--vb-mascota);
	margin: 0;
}

/* Las secciones que tocan una mascota dejan justo el sitio de su mitad. */
:root {
	--vb-mascota: 168px;
}

.vb-section.vb-section:has(+ .vb-entre) {
	padding-bottom: calc(var(--vb-mascota) / 2 + 10px);
}

.vb-entre + .vb-section.vb-section {
	padding-top: calc(var(--vb-mascota) / 2 + 10px);
}

.vb-entre .vb-bocadillo {
	position: relative;
	z-index: 3;
	transform-origin: -20px 50%;
	max-width: 23em;
	margin: 0 0 0 16px;
	padding: 10px 16px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 18px;
	background: var(--vb-blanco);
	color: var(--vb-negro);
	box-shadow: 4px 4px 0 var(--vb-negro);
	font-size: 0.9375rem;
	line-height: 1.4;
}

/* Rabito hacia la mascota (siempre a la izquierda del bocadillo). */
.vb-entre .vb-bocadillo::before,
.vb-entre .vb-bocadillo::after {
	content: "";
	position: absolute;
	top: 50%;
	border-style: solid;
	transform: translateY(-50%);
}

.vb-entre .vb-bocadillo::before {
	left: -19px;
	border-width: 10px 18px 10px 0;
	border-color: transparent var(--vb-negro) transparent transparent;
}

.vb-entre .vb-bocadillo::after {
	left: -13px;
	border-width: 7px 13px 7px 0;
	border-color: transparent var(--vb-blanco) transparent transparent;
}

.vb-entre .wp-block-separator.is-style-vb-piezas {
	position: relative;
	z-index: 1;
}

.vb-entre .vb-mascota img[role="button"] {
	cursor: pointer;
}

.vb-entre .vb-mascota img[role="button"]:focus-visible {
	outline: 3px solid var(--vb-azul);
	outline-offset: 4px;
	border-radius: 12px;
}

/* El bocadillo aparece al llegar; la mascota está quieta. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.wp-child-theme-visubloq .vb-entre .vb-bocadillo {
			animation: vb-bocadillo ease-out both;
			animation-timeline: view();
			animation-range: entry 40% cover 35%;
		}
	}
}

@keyframes vb-bocadillo {
	from {
		transform: scale(0.4);
	}

	to {
		transform: none;
	}
}

/* Móvil: más pequeñas; el bocadillo, a la derecha y sin salirse de la pantalla. */
@media (max-width: 600px) {
	.vb-entre .vb-entre__consejo,
	.vb-entre.vb-entre--derecha .vb-entre__consejo {
		justify-content: flex-start;
		gap: 4px;
	}

	:root {
		--vb-mascota: 104px;
	}

	.vb-entre .vb-bocadillo {
		flex: 1 1 auto;
		max-width: none;
		margin-left: 14px;
		padding: 7px 10px;
		border-radius: 14px;
		font-size: 0.8125rem;
		line-height: 1.3;
	}
}

/*
 * Variante "espejo" (clase vb-entre--espejo): la mascota a la derecha, mirando hacia
 * el bocadillo, que queda a su izquierda. Se gira el marco de la imagen (no la imagen,
 * que es la que salta al pulsarla).
 */
.vb-entre.vb-entre--espejo .vb-entre__consejo {
	flex-direction: row-reverse;
	justify-content: flex-start;
}

.vb-entre.vb-entre--espejo .vb-consejo__mascota {
	transform: scaleX(-1);
}

.vb-entre.vb-entre--espejo .vb-bocadillo {
	transform-origin: calc(100% + 20px) 50%;
	margin: 0 16px 0 0;
}

/* Rabito a la derecha, hacia la mascota. */
.vb-entre.vb-entre--espejo .vb-bocadillo::before {
	right: -19px;
	left: auto;
	border-width: 10px 0 10px 18px;
	border-color: transparent transparent transparent var(--vb-negro);
}

.vb-entre.vb-entre--espejo .vb-bocadillo::after {
	right: -13px;
	left: auto;
	border-width: 7px 0 7px 13px;
	border-color: transparent transparent transparent var(--vb-blanco);
}

/*
 * En pantallas anchas la mascota y el bocadillo quedan a la derecha, donde el título de
 * la sección siguiente no llega: esa sección no necesita reservarles sitio arriba.
 */
@media (min-width: 1100px) {
	.vb-entre.vb-entre--espejo + .vb-section.vb-section {
		padding-top: var(--vb-seccion);
	}
}

@media (max-width: 600px) {
	.vb-entre.vb-entre--espejo .vb-entre__consejo {
		justify-content: flex-start;
	}

	.vb-entre.vb-entre--espejo .vb-bocadillo {
		margin: 0 14px 0 0;
	}
}


/* ---------- ¿Por qué piezas redondas? ---------- */

.vb-redondas.vb-redondas {
	padding-block: var(--vb-seccion);
}

.vb-redondas .vb-redondas__cols {
	gap: clamp(28px, 4vw, 64px);
	margin: 0 auto;
}

.vb-redondas .wp-block-buttons {
	margin-top: 0;
}

/* El mismo corazón con piezas cuadradas y redondas, uno al lado del otro. */
.vb-redondas .vb-redondas__comparar {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(20px, 4vw, 48px);
	align-items: center;
	max-width: 560px;
	margin: 0 auto;
}

/* Cada corazón es una foto instantánea, como las del tendedero: marco blanco, pie escrito y un poco torcida. */
.vb-redondas .vb-redondas__corazon {
	margin: 0;
	padding: 8px 8px 0;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 10px;
	background: var(--vb-blanco);
	box-shadow: 6px 6px 0 var(--vb-negro);
	transform: rotate(-3deg);
}

.vb-redondas .vb-redondas__corazon--redondas {
	transform: rotate(3deg);
}

.vb-redondas .vb-redondas__corazon img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	border: 2px solid var(--vb-negro);
	border-radius: 4px;
}

.vb-section .vb-redondas__corazon .wp-element-caption {
	margin: 0;
	padding: 6px 2px 8px;
	color: var(--vb-negro);
	font: 700 0.9375rem/1.2 var(--vb-fuente);
	text-align: left;
}

.vb-section .vb-redondas__corazon--redondas .wp-element-caption {
	color: var(--vb-rojo);
	font-weight: 800;
}

@media (max-width: 960px) {
	.vb-redondas .vb-redondas__cols {
		flex-wrap: wrap !important;
		gap: 24px;
	}

	.vb-redondas .vb-redondas__cols > .wp-block-column {
		flex-basis: 100% !important;
		margin-bottom: 0 !important;
	}
}

/* Móvil: el mismo orden, más pequeño. */
@media (max-width: 600px) {
	.vb-redondas .vb-redondas__corazon {
		padding: 5px 5px 0;
		box-shadow: 4px 4px 0 var(--vb-negro);
	}

	.vb-section .vb-redondas__corazon .wp-element-caption {
		padding: 4px 1px 6px;
		font-size: 0.75rem;
	}
}

/* ---------- Siluetas de piezas en los fondos ---------- */

/*
 * Dos grupos de piezas dibujadas en línea, en esquinas opuestas de cada sección,
 * de un tono algo más oscuro que su fondo. Van detrás del contenido.
 */
.vb-section {
	--vb-fondo: #ffffff;
	--vb-silueta: color-mix(in srgb, var(--vb-fondo) 91%, #000);
	--vb-silueta-a: url("../img/siluetas/siluetas-1.svg");
	--vb-silueta-b: url("../img/siluetas/siluetas-2.svg");
	--vb-silueta-pos-a: left 2% top 28px;
	--vb-silueta-pos-b: right 2% bottom 20px;
}

.vb-redondas {
	--vb-fondo: #ffd300;
	--vb-silueta: color-mix(in srgb, var(--vb-fondo) 86%, #000);
	--vb-silueta-a: url("../img/siluetas/siluetas-3.svg");
	--vb-silueta-b: url("../img/siluetas/siluetas-4.svg");
	--vb-silueta-pos-a: left 1% bottom 24px;
	--vb-silueta-pos-b: right 1% top 24px;
}

.vb-incluye {
	--vb-fondo: #0065b2;
	--vb-silueta: color-mix(in srgb, var(--vb-fondo) 82%, #000);
	--vb-silueta-a: url("../img/siluetas/siluetas-4.svg");
	--vb-silueta-b: url("../img/siluetas/siluetas-1.svg");
	--vb-silueta-pos-a: left 1% bottom 24px;
	--vb-silueta-pos-b: right 1% top 24px;
}

.vb-pasos {
	--vb-silueta-a: url("../img/siluetas/siluetas-3.svg");
	--vb-silueta-b: url("../img/siluetas/siluetas-4.svg");
	--vb-silueta-pos-a: right 2% top 20px;
	--vb-silueta-pos-b: left 1% bottom 16px;
}

.vb-momentos {
	--vb-fondo: #00a64d;
	--vb-silueta: color-mix(in srgb, var(--vb-fondo) 84%, #000);
	--vb-silueta-a: url("../img/siluetas/siluetas-4.svg");
	--vb-silueta-b: url("../img/siluetas/siluetas-2.svg");
}

.vb-hero,
.vb-cabecera-pagina,
.vb-texto-imagen,
.vb-tarjetas,
.vb-historia,
.vb-pasos,
.vb-redondas,
.vb-momentos,
.vb-incluye,
.vb-tamanos {
	position: relative;
	isolation: isolate;
}

.vb-hero::before,
.vb-cabecera-pagina::before,
.vb-texto-imagen::before,
.vb-tarjetas::before,
.vb-historia::before,
.vb-pasos::before,
.vb-redondas::before,
.vb-momentos::before,
.vb-incluye::before,
.vb-tamanos::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: var(--vb-silueta);
	pointer-events: none;
	-webkit-mask: var(--vb-silueta-a) var(--vb-silueta-pos-a) / 150px auto no-repeat, var(--vb-silueta-b) var(--vb-silueta-pos-b) / 150px auto no-repeat;
	mask: var(--vb-silueta-a) var(--vb-silueta-pos-a) / 150px auto no-repeat, var(--vb-silueta-b) var(--vb-silueta-pos-b) / 150px auto no-repeat;
}

/* El hero solo lleva un grupo, abajo a la izquierda, lejos del tendedero. */
.vb-hero::before {
	-webkit-mask: var(--vb-silueta-a) left 1% bottom 8px / 130px auto no-repeat;
	mask: var(--vb-silueta-a) left 1% bottom 8px / 130px auto no-repeat;
}

/* Tableta y móvil: menos todavía, un solo grupo y más pequeño. */
@media (max-width: 960px) {
	.vb-hero::before,
	.vb-cabecera-pagina::before,
	.vb-texto-imagen::before,
	.vb-tarjetas::before,
	.vb-historia::before,
	.vb-pasos::before,
	.vb-redondas::before,
	.vb-momentos::before,
	.vb-incluye::before,
	.vb-tamanos::before {
		-webkit-mask: var(--vb-silueta-b) right -18px top 14px / 96px auto no-repeat;
		mask: var(--vb-silueta-b) right -18px top 14px / 96px auto no-repeat;
	}
}

/* ---------- Hero: tendedero sobre blanco, nota y sello ---------- */

.vb-tendal {
	position: relative;
	margin: 0;
}

/* Fotos algo más pequeñas para que quepan las tres en la columna. */
.vb-tendal .vb-tendedero {
	--foto: clamp(124px, 10.4vw, 150px);
}

.vb-tendal .vb-tendedero.is-colgado {
	gap: clamp(10px, 1.2vw, 18px);
	justify-content: safe center;
	padding: 0 12px 34px;
}

/* Nota con flecha dibujada a mano hacia el tendedero. */
.vb-tendal .vb-tendal__nota {
	position: relative;
	width: fit-content;
	max-width: 22em;
	margin: 6px auto 0;
	padding-left: 52px;
	color: var(--vb-negro);
	font-family: var(--vb-fuente);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.3;
	transform: rotate(-2deg);
}

.vb-tendal .vb-tendal__nota::before {
	content: "";
	position: absolute;
	bottom: 4px;
	left: 0;
	width: 46px;
	height: 34px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 34' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 32c2-11 9-19 26-24'/%3E%3Cpath d='M23 4l10 3.5-6 8.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Sello redondo pegado en la esquina inferior derecha de la última foto (tendedero.js lo coloca ahí). */
.vb-sello {
	margin: 0;
	color: var(--vb-negro);
	font-family: var(--vb-fuente);
	font-weight: 800;
}

.vb-colgada > .vb-sello {
	position: absolute;
	z-index: 4;
	right: -76px;
	bottom: -72px;
	display: grid;
	width: 96px;
	height: 96px;
	padding: 14px;
	place-items: center;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 50%;
	background: var(--vb-rojo);
	color: var(--vb-blanco);
	box-shadow: 5px 5px 0 var(--vb-negro);
	font-size: 0.8125rem;
	line-height: 1.1;
	text-align: center;
	transform: rotate(-14deg);
	backface-visibility: hidden;
}

/* Anillo de puntos dentro del sello. */
.vb-colgada > .vb-sello::before {
	content: "";
	position: absolute;
	inset: 6px;
	border: 2px dashed rgba(255, 255, 255, 0.75);
	border-radius: 50%;
}

/* Tableta: el tendedero pasa debajo del texto. */
@media (max-width: 960px) {
	.vb-hero .vb-hero__visual {
		max-width: 600px;
		margin-top: 16px;
	}

	.vb-tendal .vb-tendedero {
		--foto: 150px;
	}
}

/* Móvil y táctil: fila deslizable; el sello, más pequeño y dentro de la foto para que no se corte. */
@media (hover: none), (max-width: 781px) {
	.vb-tendal .vb-tendedero.is-colgado {
		justify-content: flex-start;
	}

	.vb-tendal .vb-tendedero.is-colgado {
		padding-right: 62px;
		padding-bottom: 56px;
	}

	.vb-colgada > .vb-sello {
		right: -54px;
		bottom: -54px;
		width: 70px;
		height: 70px;
		padding: 9px;
		font-size: 0.625rem;
		border-width: 2px;
		box-shadow: 3px 3px 0 var(--vb-negro);
	}
}

/* Móvil: las tres fotos de un vistazo, sin deslizar (más pequeñas, con el pie y el sello a escala). */
@media (max-width: 600px) {
	/* La cuerda llega a los dos bordes de la pantalla; las fotos aprovechan casi todo el ancho. */
	.vb-tendal .vb-tendedero.is-colgado {
		--foto: calc((100vw - 2 * 10px - 2 * 6px) / 3);
		gap: 6px;
		justify-content: center;
		margin-inline: calc(var(--vb-lateral) * -1);
		padding: 0 10px 56px;
		overflow: visible;
		scroll-snap-type: none;
	}

	.vb-tendal .vb-tendedero.is-colgado::after {
		content: none;
	}

	.vb-tendal .vb-colgada > figure.wp-block-image {
		padding: 5px 5px 0;
		border-width: 2px;
		border-radius: 7px;
		box-shadow: 3px 3px 0 var(--vb-negro);
	}

	.vb-tendal .vb-colgada > figure.wp-block-image img {
		border-width: 1.5px;
	}

	.vb-tendal .vb-colgada .wp-element-caption {
		padding: 4px 1px 6px;
		font-size: 0.6875rem;
	}

	.vb-tendal .vb-colgada__girar {
		right: 8px;
		bottom: 26px;
		width: 22px;
		height: 22px;
	}

	.vb-tendal .vb-colgada__girar svg {
		width: 12px;
		height: 12px;
	}

	.vb-colgada > .vb-sello {
		right: -6px;
		bottom: -54px;
		width: 56px;
		height: 56px;
		padding: 6px;
		font-size: 0.5rem;
	}
}

/* ---------- Hero a pantalla completa ---------- */

/*
 * La fila de piezas del final del hero termina justo en el borde inferior de la ventana.
 * hero.js mide lo que hay encima del hero (barra de administración y, si no es
 * transparente, la cabecera), la cabecera que flota encima y la fila de piezas.
 * Sin JavaScript se usan valores aproximados. Si el contenido no cabe, el hero crece.
 */
.vb-hero.vb-hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: calc(100vh - var(--vb-hero-arriba, var(--wp-admin--admin-bar--height, 0px)) - var(--vb-hero-cierre, 36px));
	min-height: calc(100svh - var(--vb-hero-arriba, var(--wp-admin--admin-bar--height, 0px)) - var(--vb-hero-cierre, 36px));
	padding-top: calc(var(--vb-cabecera-encima, 70px) + 32px);
	padding-bottom: 32px;
}

.vb-hero > .vb-hero__cols {
	width: 100%;
}

/* Icono de cada paso, arriba a la derecha de la tarjeta (no la hace crecer). */
.vb-pasos .vb-paso .vb-paso__icono {
	position: absolute;
	top: 16px;
	right: 18px;
	width: 54px;
	margin: 0;
}

.vb-pasos .vb-paso .vb-paso__icono img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 600px) {
	.vb-pasos .vb-paso .vb-paso__icono {
		top: 16px;
		right: 16px;
		width: 48px;
	}
}

/* ---------- Kit para páginas: cabecera, texto e imagen, tarjetas y llamada final ---------- */

/* Cabecera de página. */
.vb-cabecera-pagina.vb-cabecera-pagina {
	padding-block: clamp(40px, 5vw, 72px) clamp(32px, 4vw, 56px);
}

/*
 * Color de toda la página: el estilo "Página amarilla / azul / verde / roja" del grupo de la
 * cabecera tiñe el fondo de la página y de todas sus secciones (las que no tienen color propio,
 * como la llamada final o las tarjetas, lo conservan). Siluetas: un poco más oscuras que el fondo.
 */
body:has(.is-style-vb-pagina-amarillo) {
	--vb-pagina-fondo: var(--vb-amarillo);
	--vb-pagina-texto: var(--vb-negro);
}

body:has(.is-style-vb-pagina-azul) {
	--vb-pagina-fondo: var(--vb-azul);
	--vb-pagina-texto: var(--vb-blanco);
}

body:has(.is-style-vb-pagina-verde) {
	--vb-pagina-fondo: var(--vb-verde);
	--vb-pagina-texto: var(--vb-negro);
}

body:has(.is-style-vb-pagina-rojo) {
	--vb-pagina-fondo: var(--vb-rojo);
	--vb-pagina-texto: var(--vb-blanco);
}

body:has([class*="is-style-vb-pagina-"]) {
	background: var(--vb-pagina-fondo);
}

body:has([class*="is-style-vb-pagina-"]) .vb-section:not(.has-background) {
	--vb-silueta: rgba(0, 0, 0, 0.12);
}

/* El enlace de la cabecera, del color del texto. */
.vb-cabecera-pagina .wp-block-button.is-style-vb-enlace > .wp-block-button__link,
.vb-cabecera-pagina .wp-block-button.is-style-vb-enlace > .wp-block-button__link:hover {
	margin-top: 4px;
	color: inherit;
}

.vb-cabecera-pagina .wp-block-buttons {
	margin-top: 0;
}

.vb-section .vb-cabecera-pagina__titulo {
	margin: 0 0 14px;
	font-size: var(--vb-t1);
	line-height: 0.95;
	letter-spacing: -0.035em;
}

.vb-section .vb-cabecera-pagina__titulo mark,
.vb-llamada .vb-titulo mark,
.vb-redondas .vb-titulo mark {
	display: inline-block;
	padding: 0 0.12em 0.04em;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 12px;
	background-color: var(--vb-amarillo);
	color: var(--vb-negro);
	box-shadow: 5px 5px 0 var(--vb-negro);
	line-height: 1.05;
	transform: rotate(-2deg);
}

/* Texto e imagen. */
.vb-texto-imagen.vb-texto-imagen {
	padding-block: var(--vb-seccion);
}

.vb-texto-imagen .vb-texto-imagen__cols {
	gap: clamp(32px, 5vw, 80px);
	margin: 0 auto;
}

.vb-texto-imagen p {
	max-width: 34em;
	font-size: 1.0625rem;
	line-height: 1.6;
}

.vb-section .vb-polaroid-suelta {
	max-width: 360px;
	margin: 0 auto;
	padding: 10px 10px 0;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 10px;
	background: var(--vb-blanco);
	box-shadow: 8px 8px 0 var(--vb-negro);
	transform: rotate(2deg);
}

.vb-section .vb-polaroid-suelta img {
	display: block;
	width: 100%;
	height: auto;
	border: 2px solid var(--vb-negro);
	border-radius: 4px;
}

.vb-section .vb-polaroid-suelta .wp-element-caption {
	margin: 0;
	padding: 8px 0 10px;
	color: var(--vb-negro);
	font: 700 0.9375rem/1.3 var(--vb-fuente);
	text-align: center;
}

/* Tarjetas con icono. */
.vb-tarjetas.vb-tarjetas {
	padding-block: var(--vb-seccion);
}

.vb-tarjetas .vb-tarjetas__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px;
	margin: 24px auto 0;
}

.vb-tarjetas .vb-tarjeta {
	margin: 0;
	padding: 20px 20px 22px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 14px;
	background: var(--vb-blanco);
	box-shadow: 6px 6px 0 var(--vb-negro);
	transform: rotate(-1deg);
}

.vb-tarjetas .vb-tarjeta:nth-child(even) {
	transform: rotate(1deg) translateY(8px);
}

.vb-tarjetas .vb-tarjeta__icono {
	margin: 0 0 12px;
}

.vb-tarjetas .vb-tarjeta__icono img {
	display: block;
	width: 60px;
	height: 60px;
}

.vb-section .vb-tarjeta .vb-tarjeta__titulo {
	margin: 0 0 6px;
	font-size: var(--vb-t4);
	line-height: 1.15;
}

.vb-tarjetas .vb-tarjeta p {
	margin: 0;
	color: var(--vb-texto-suave);
	font-size: 1rem;
	line-height: 1.5;
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	.vb-tarjetas .vb-tarjeta {
		transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
	}

	.vb-tarjetas .vb-tarjeta:hover {
		transform: rotate(0) translate(-2px, -4px);
		box-shadow: 8px 10px 0 var(--vb-negro);
	}
}

/* Llamada final. */
.vb-llamada.vb-llamada {
	padding-block: var(--vb-seccion);
}

.vb-llamada .vb-llamada__cols {
	gap: 32px;
	margin: 0 auto;
}

.vb-llamada .vb-llamada__mascota {
	max-width: 220px;
	margin: 0 auto;
}

@media (max-width: 781px) {
	.vb-llamada .vb-llamada__mascota {
		max-width: 140px;
	}

	.vb-tarjetas .vb-tarjeta__icono img {
		width: 52px;
		height: 52px;
	}
}

/* La sección que sigue a la cabecera de página empieza pegada a ella (sin doble hueco). */
.vb-cabecera-pagina.vb-cabecera-pagina + .vb-section.vb-section:not(.vb-llamada) {
	padding-top: 0;
}

/* ---------- Shop: productos de WooCommerce en tarjetas ---------- */

.vb-tienda.vb-tienda {
	padding-block: var(--vb-seccion);
}

.vb-tienda .woocommerce ul.products.products {
	display: grid;
	/* Astra pone su propia rejilla (2 columnas en móvil): esta manda. */
	grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)) !important;
	gap: 32px;
	margin: 0;
	padding: 4px 10px 12px 0;
}

.vb-tienda .woocommerce ul.products::before,
.vb-tienda .woocommerce ul.products::after {
	display: none;
}

.vb-tienda .woocommerce ul.products li.product {
	position: relative;
	float: none;
	width: auto !important;
	margin: 0 !important;
	padding: 14px 14px 20px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 16px;
	background: var(--vb-blanco);
	box-shadow: 8px 8px 0 var(--vb-negro);
	font-family: var(--vb-fuente);
	text-align: left;
}

.vb-tienda .woocommerce ul.products li.product img {
	margin: 0 0 14px;
	border: 2px solid var(--vb-negro);
	border-radius: 10px;
}

/* Fuera: categoría ("Uncategorized") y estrellas vacías. */
.vb-tienda .woocommerce ul.products li.product :is(.ast-woo-product-category, .star-rating) {
	display: none;
}

.vb-tienda .woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0 0 4px;
	color: var(--vb-negro);
	font-family: var(--vb-fuente);
	font-size: var(--vb-t4);
	font-weight: 800;
	line-height: 1.15;
}

.vb-tienda .woocommerce ul.products li.product .price {
	margin: 0 0 12px;
	color: var(--vb-negro);
	font-family: var(--vb-fuente);
	font-size: 1.25rem;
	font-weight: 800;
}

.vb-tienda .woocommerce ul.products li.product .price del {
	margin-right: 6px;
	color: var(--vb-texto-suave);
	font-size: 1rem;
	font-weight: 600;
}

.vb-tienda .woocommerce ul.products li.product .price ins {
	text-decoration: none;
}

/* "¡Oferta!": una pieza amarilla inclinada. */
.vb-tienda .woocommerce ul.products li.product :is(.onsale, .ast-onsale-card) {
	position: absolute;
	z-index: 2;
	top: 26px;
	left: 26px;
	width: auto;
	height: auto;
	right: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 4px 10px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 8px;
	background: var(--vb-amarillo);
	color: var(--vb-negro);
	box-shadow: 3px 3px 0 var(--vb-negro);
	font: 800 0.875rem/1.2 var(--vb-fuente);
	transform: rotate(-4deg);
}

/* Tamaños (48 × 48, 96 × 96): pastillas con contorno. */
.vb-tienda .woocommerce ul.products li.product :is(.cfvsw-swatches-option, .cfvsw-swatches-container [class*="option"]) {
	min-width: 0;
	padding: 4px 10px;
	border: 2px solid var(--vb-negro) !important;
	border-radius: 8px;
	background: var(--vb-blanco);
	color: var(--vb-negro);
	box-shadow: none;
	font: 700 0.875rem/1.2 var(--vb-fuente);
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	.vb-tienda .woocommerce ul.products li.product {
		transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
	}

	.vb-tienda .woocommerce ul.products li.product:hover {
		transform: translate(-2px, -4px);
		box-shadow: 10px 12px 0 var(--vb-negro);
	}
}

/* ---------- Contact us: una tarjeta con cabecera amarilla, el formulario y la mascota asomando ---------- */

.vb-contacto.vb-contacto {
	padding-block: 0 var(--vb-seccion);
}

/* A todo el ancho del contenido, alineada con el título de la página. */
.vb-contacto.is-layout-constrained > .vb-contacto__tarjeta.vb-contacto__tarjeta {
	position: relative;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 20px;
	background: var(--vb-blanco);
	box-shadow: 10px 10px 0 var(--vb-negro);
}

/* Cabecera amarilla, como la de "Tu pedido" o los totales del carrito. */
/* Sin la separación automática de WordPress entre la cabecera y el formulario. */
.vb-contacto .vb-contacto__tarjeta > * {
	margin-block: 0 !important;
}

.vb-contacto .vb-contacto__cabecera {
	padding: 20px 190px 18px 28px;
	border-bottom: var(--vb-borde) solid var(--vb-negro);
	border-radius: 17px 17px 0 0;
	background: var(--vb-amarillo);
	color: var(--vb-negro);
}

.vb-section .vb-contacto__cabecera .vb-contacto__titulo {
	margin: 0 0 4px;
	color: var(--vb-negro);
	font-size: var(--vb-t4);
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.vb-contacto .vb-contacto__texto {
	max-width: 70ch;
	margin: 0;
	color: var(--vb-negro);
	font-size: 1rem;
	line-height: 1.5;
}

/* Mismo margen en todo: 24 px del borde de la tarjeta y 16 px entre campos (y hasta el botón). */
.vb-contacto .vb-contacto__formulario {
	padding: 24px 28px 28px;
}

.vb-contacto .vb-contacto__tarjeta .srfm-form :is(input.srfm-input-common, textarea.srfm-input-common, textarea) {
	margin: 0 !important;
}

.vb-contacto .vb-contacto__tarjeta .srfm-submit-container {
	margin: 0 !important;
	padding: 0 !important;
}

/* La mascota con la carta, en la cabecera amarilla, a la derecha (asoma un poco por arriba). */
.vb-contacto .vb-contacto__mascota {
	position: absolute;
	top: -26px;
	right: 32px;
	width: 132px;
	margin: 0 !important;
	transform: rotate(-4deg);
	pointer-events: none;
}

.vb-contacto .vb-contacto__mascota img {
	display: block;
	width: 100%;
	height: auto;
}

/* El formulario de SureForms ocupa la tarjeta, sin fondos ni márgenes propios. */
.vb-contacto .vb-contacto__tarjeta :is(.srfm-form-container, .srfm-form) {
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

/* Formulario compacto (SureForms deja elementos vacíos que, con su separación propia, abrían huecos);
   en ordenador, nombre y email en la misma fila. */
.vb-contacto .vb-contacto__tarjeta .srfm-form {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.vb-contacto .vb-contacto__tarjeta .srfm-form > * {
	grid-column: 1 / -1;
}

/* Sin error, el hueco reservado para el aviso no ocupa sitio. */
.vb-contacto .vb-contacto__tarjeta .srfm-error-wrap {
	min-height: 0;
	height: auto;
}

.vb-contacto .vb-contacto__tarjeta .srfm-error-wrap:not(:has(.srfm-error-message:not([style*="none"]))) {
	display: none;
}

.vb-contacto .vb-contacto__tarjeta .srfm-block:has(.srfm-error-message[style*="block"]) .srfm-error-wrap,
.vb-contacto .vb-contacto__tarjeta .srfm-block.srfm-error .srfm-error-wrap {
	display: block;
}

@media (min-width: 782px) {
	.vb-contacto .vb-contacto__tarjeta .srfm-form {
		grid-template-columns: 1fr 1fr;
	}

	.vb-contacto .vb-contacto__tarjeta .srfm-form > :is(.srfm-slug-name, .srfm-slug-srfm-email) {
		grid-column: auto;
	}
}

/* Botón de enviar alineado con los campos. */
.vb-contacto .vb-contacto__tarjeta .srfm-submit-container .wp-block-button {
	text-align: left !important;
}

/* Móvil: la mascota más pequeña, en la esquina de la cabecera. */
@media (max-width: 600px) {
	.vb-contacto .vb-contacto__cabecera {
		padding: 18px 104px 16px 20px;
	}

	.vb-contacto .vb-contacto__mascota {
		top: -22px;
		right: 12px;
		width: 88px;
	}

	.vb-contacto .vb-contacto__formulario {
		padding: 20px 20px 24px;
	}
}

@media (max-width: 781px) {
	.vb-contacto .vb-contacto__tarjeta {
		box-shadow: 6px 6px 0 var(--vb-negro);
	}
}

/* ---------- My account: área de cliente de WooCommerce ---------- */

.vb-cuenta.vb-cuenta {
	padding-block: var(--vb-seccion);
}

/* Títulos de WooCommerce ("Acceder", "Dirección de facturación"...) en la misma escala. */
.vb-cuenta .woocommerce :is(h2, h3) {
	margin: 0 0 16px;
	color: inherit;
	font-family: var(--vb-fuente);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.vb-cuenta .woocommerce h2 {
	font-size: var(--vb-t3);
}

.vb-cuenta .woocommerce h3 {
	font-size: var(--vb-t4);
}

/* Acceso y registro: tarjeta de un ancho cómodo, no a toda la página. */
.vb-cuenta .woocommerce > :is(h2, .woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword, .u-columns) {
	max-width: 560px;
}

.vb-cuenta .woocommerce :is(.lost_password, .woocommerce-LostPassword) a {
	color: var(--vb-negro);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* Menú de la cuenta: una pila de piezas; la sección actual, amarilla e inclinada. */
.vb-cuenta .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 4px 8px 8px 0;
	border: 0;
	list-style: none;
}

.vb-cuenta .woocommerce-MyAccount-navigation ul li {
	margin: 0 0 10px;
	border: 0;
}

.vb-cuenta .woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: 12px 16px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 12px;
	background: var(--vb-blanco);
	color: var(--vb-negro);
	box-shadow: 4px 4px 0 var(--vb-negro);
	font: 700 1.0625rem/1.2 var(--vb-fuente);
	text-decoration: none;
}

/* Al pasar el ratón, la pieza se levanta un poco (sin cambiar de color). */
.vb-cuenta .woocommerce-MyAccount-navigation ul li a:hover {
	background: var(--vb-blanco);
	color: var(--vb-negro);
}

.vb-cuenta .woocommerce-MyAccount-navigation ul li.is-active a:hover {
	background: var(--vb-amarillo);
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	.vb-cuenta .woocommerce-MyAccount-navigation ul li a {
		transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
	}

	.vb-cuenta .woocommerce-MyAccount-navigation ul li a:hover {
		transform: translate(-2px, -3px);
		box-shadow: 6px 7px 0 var(--vb-negro);
	}

	.vb-cuenta .woocommerce-MyAccount-navigation ul li.is-active a:hover {
		transform: rotate(-1.5deg) translate(-2px, -3px);
	}
}

.vb-cuenta .woocommerce-MyAccount-navigation ul li.is-active a {
	background: var(--vb-amarillo);
	color: var(--vb-negro);
	transform: rotate(-1.5deg);
}

.vb-cuenta .woocommerce-MyAccount-content {
	font-family: var(--vb-fuente);
	font-size: 1.0625rem;
	line-height: 1.6;
}

.vb-cuenta .woocommerce-MyAccount-content a {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.vb-cuenta .woocommerce-MyAccount-content a:hover {
	text-decoration-color: var(--vb-amarillo);
}

@media (prefers-reduced-motion: no-preference) {
	.vb-cuenta .woocommerce-MyAccount-navigation ul li a {
		transition: color 0.15s ease-out;
	}
}

/* ---------- Carrito (WooCommerce) ---------- */

/*
 * Solo se viste por fuera: la tabla de productos y los totales son tarjetas blancas con
 * contorno y sombra dura; "Finalizar compra" es la pieza roja. Doble clase y algún
 * !important para ganar a los estilos de Astra y WooCommerce.
 */
.vb-carrito.vb-carrito {
	/* Con el carrito vacío la página es muy corta: así el footer no deja ver el amarillo por debajo. */
	min-height: 45vh;
	padding-block: 0 var(--vb-seccion);
}

.vb-carrito .woocommerce {
	font-family: var(--vb-fuente);
	color: var(--vb-negro);
}

.vb-carrito.vb-carrito .woocommerce :is(table.shop_table, .cart_totals) {
	margin: 0 0 28px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 14px;
	background: var(--vb-blanco);
	box-shadow: var(--vb-sombra) var(--vb-sombra) 0 var(--vb-negro);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.vb-carrito.vb-carrito .woocommerce table.shop_table :is(th, td) {
	padding: 14px 16px;
	border: 0;
	border-top: 2px solid var(--vb-negro);
	background: transparent;
	color: var(--vb-negro);
	font-family: var(--vb-fuente);
	font-size: 1.0625rem;
	vertical-align: middle;
}

.vb-carrito.vb-carrito .woocommerce table.shop_table thead th {
	border-top: 0;
	font-size: 0.9375rem;
	font-weight: 800;
}

.vb-carrito.vb-carrito .woocommerce table.shop_table .product-name a {
	color: var(--vb-negro);
	font-weight: 800;
	text-decoration: none;
}

.vb-carrito.vb-carrito .woocommerce table.shop_table .product-name a:hover {
	color: var(--vb-negro);
}

.vb-carrito.vb-carrito .woocommerce table.shop_table :is(.product-price, .product-subtotal) {
	font-weight: 700;
}

/* La miniatura del mosaico, como una foto pequeña con contorno. */
.vb-carrito.vb-carrito .woocommerce table.cart .product-thumbnail img {
	display: block;
	width: 84px;
	max-width: none;
	height: 84px;
	object-fit: cover;
	border: 2px solid var(--vb-negro);
	border-radius: 6px;
	box-shadow: 3px 3px 0 var(--vb-negro);
}

/* Quitar: un botón redondo con contorno, rojo al pasar por encima. */
.vb-carrito.vb-carrito .woocommerce table.cart a.remove {
	display: grid;
	width: 34px;
	height: 34px;
	place-items: center;
	border: 2px solid var(--vb-negro) !important;
	border-radius: 50%;
	background: var(--vb-blanco);
	color: var(--vb-negro) !important;
	font-size: 0;
	opacity: 1;
}

.vb-carrito.vb-carrito .woocommerce table.cart a.remove svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.vb-carrito.vb-carrito .woocommerce table.cart a.remove:hover {
	background: var(--vb-rojo);
	color: var(--vb-blanco) !important;
}

/* Campos (cantidad y cupón). */
.vb-carrito.vb-carrito .woocommerce :is(input.qty, #coupon_code) {
	height: 48px !important;
	padding: 8px 12px !important;
	border: var(--vb-borde) solid var(--vb-negro) !important;
	border-radius: 10px;
	background: var(--vb-blanco);
	color: var(--vb-negro);
	box-shadow: 3px 3px 0 var(--vb-negro);
	font: 700 1rem/1.2 var(--vb-fuente);
}

.vb-carrito.vb-carrito .woocommerce input.qty {
	width: 76px;
	text-align: center;
}

.vb-carrito.vb-carrito .woocommerce #coupon_code {
	width: 220px !important;
	max-width: 100%;
	max-height: none !important;
	margin: 0 !important;
}

/* El "clearfix" de Astra (::before y ::after) no debe ocupar hueco en la fila del cupón. */
.vb-carrito.vb-carrito .woocommerce td.actions .coupon::before,
.vb-carrito.vb-carrito .woocommerce td.actions .coupon::after {
	display: none !important;
}

.vb-carrito.vb-carrito .woocommerce td.actions .coupon button.button {
	width: auto !important;
}

.vb-carrito.vb-carrito .woocommerce :is(input.qty, #coupon_code):focus {
	outline: 3px solid var(--vb-azul);
	outline-offset: 2px;
}

.vb-carrito.vb-carrito .woocommerce table.cart td.actions {
	padding: 16px;
}

.vb-carrito.vb-carrito .woocommerce table.cart td.actions .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

/* Botones secundarios (aplicar cupón, actualizar carrito, volver a la tienda): pieza blanca. */
.vb-carrito.vb-carrito .woocommerce :is(button.button, a.button):not(.checkout-button) {
	height: auto;
	margin: 0;
	padding: 11px 18px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 10px;
	background: var(--vb-blanco);
	color: var(--vb-negro);
	box-shadow: 3px 3px 0 var(--vb-negro);
	font: 700 1rem/1.2 var(--vb-fuente);
	letter-spacing: 0 !important;
	text-transform: none !important;
	white-space: nowrap;
}

.vb-carrito.vb-carrito .woocommerce :is(button.button, a.button):not(.checkout-button):hover:not(:disabled) {
	background: var(--vb-amarillo);
	color: var(--vb-negro);
}

.vb-carrito.vb-carrito .woocommerce button.button:disabled {
	opacity: 0.45;
	cursor: default;
}

/* Totales: tarjeta a la derecha en escritorio. */
.vb-carrito.vb-carrito .woocommerce .cart-collaterals .cart_totals {
	width: min(100%, 460px);
	float: right;
	padding: 0;
}

.vb-carrito.vb-carrito .woocommerce .cart_totals h2 {
	margin: 0;
	padding: 16px 20px;
	border-bottom: 2px solid var(--vb-negro);
	background: var(--vb-amarillo);
	font-size: var(--vb-t4);
}

.vb-carrito.vb-carrito .woocommerce .cart_totals table.shop_table {
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.vb-carrito.vb-carrito .woocommerce .cart_totals table.shop_table :is(th, td) {
	padding: 12px 20px;
	border-top: 0;
	border-bottom: 2px dashed rgba(0, 0, 0, 0.2);
}

.vb-carrito.vb-carrito .woocommerce .cart_totals table.shop_table td {
	text-align: right;
}

.vb-carrito.vb-carrito .woocommerce .cart_totals .order-total :is(th, td) {
	border-bottom: 0;
	font-size: 1.375rem;
	font-weight: 800;
}

.vb-carrito.vb-carrito .woocommerce .wc-proceed-to-checkout {
	padding: 22px 20px 24px;
}

/* "Finalizar compra": la pieza roja con tetones (como el botón principal). */
.vb-carrito.vb-carrito .woocommerce a.checkout-button {
	position: relative;
	display: block;
	margin: 11px 0 0;
	padding: 16px 24px 17px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: var(--vb-radio);
	background: var(--vb-rojo);
	color: var(--vb-blanco);
	box-shadow: var(--vb-sombra) var(--vb-sombra) 0 var(--vb-negro);
	font: 700 1.25rem/1.2 var(--vb-fuente);
	letter-spacing: 0 !important;
	text-align: center;
	text-transform: none !important;
}

.vb-carrito.vb-carrito .woocommerce a.checkout-button::before,
.vb-carrito.vb-carrito .woocommerce a.checkout-button::after {
	content: "";
	position: absolute;
	top: -11px;
	width: 26px;
	height: 11px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-bottom: 0;
	border-radius: 5px 5px 0 0;
	background: var(--vb-rojo);
}

.vb-carrito.vb-carrito .woocommerce a.checkout-button::before {
	left: 20%;
}

.vb-carrito.vb-carrito .woocommerce a.checkout-button::after {
	right: 20%;
}

.vb-carrito.vb-carrito .woocommerce a.checkout-button:hover {
	background: var(--vb-rojo);
	color: var(--vb-blanco);
	transform: translate(-2px, -2px);
	box-shadow: calc(var(--vb-sombra) + 2px) calc(var(--vb-sombra) + 2px) 0 var(--vb-negro);
}

.vb-carrito.vb-carrito .woocommerce a.checkout-button:active {
	transform: translate(var(--vb-sombra), var(--vb-sombra));
	box-shadow: none;
}

.vb-carrito.vb-carrito .woocommerce a.checkout-button:focus-visible {
	outline: 3px solid var(--vb-azul);
	outline-offset: 5px;
}

/* Avisos ("Carrito actualizado", errores) y carrito vacío. */
.vb-carrito.vb-carrito .woocommerce :is(.woocommerce-message, .woocommerce-error, .woocommerce-info, .cart-empty) {
	margin: 0 0 20px;
	padding: 14px 18px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-left-width: 10px;
	border-radius: 12px;
	background: var(--vb-blanco);
	color: var(--vb-negro);
	box-shadow: 4px 4px 0 var(--vb-negro);
	font-family: var(--vb-fuente);
	list-style: none;
}

.vb-carrito.vb-carrito .woocommerce :is(.woocommerce-message, .cart-empty) {
	border-left-color: var(--vb-verde);
}

.vb-carrito.vb-carrito .woocommerce .woocommerce-error {
	border-left-color: var(--vb-rojo);
}

.vb-carrito.vb-carrito .woocommerce .woocommerce-info {
	border-left-color: var(--vb-azul);
}

.vb-carrito.vb-carrito .woocommerce :is(.woocommerce-message, .woocommerce-error, .woocommerce-info, .cart-empty)::before {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.vb-carrito.vb-carrito .woocommerce a.checkout-button {
		transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
	}
}

/* Tableta y móvil: los totales a todo el ancho; WooCommerce apila la tabla en filas con etiqueta. */
@media (max-width: 960px) {
	.vb-carrito.vb-carrito .woocommerce .cart-collaterals .cart_totals {
		width: 100%;
		float: none;
	}
}

/* Astra apila la tabla del carrito en filas con etiqueta por debajo de 922 px. */
@media (max-width: 921px) {
	.vb-carrito.vb-carrito .woocommerce table.shop_table_responsive tr td::before {
		font-weight: 800;
	}

	.vb-carrito.vb-carrito .woocommerce table.cart tr.cart_item td.product-remove {
		border-top: 0;
	}

	.vb-carrito.vb-carrito .woocommerce table.cart a.remove {
		margin-left: auto;
	}

	.vb-carrito.vb-carrito .woocommerce table.cart .product-thumbnail img {
		width: 120px;
		height: 120px;
		margin: 0 auto;
	}

	.vb-carrito.vb-carrito .woocommerce table.cart td.actions .coupon {
		float: none;
		width: 100%;
		padding: 0;
	}

	.vb-carrito.vb-carrito .woocommerce table.cart td.actions .coupon > * {
		margin: 0 !important;
	}

	.vb-carrito.vb-carrito .woocommerce table.cart td.actions .coupon #coupon_code {
		flex: 1 1 150px;
		width: auto !important;
		min-width: 0;
	}

	.vb-carrito.vb-carrito .woocommerce table.cart td.actions .coupon button.button {
		flex: 0 0 auto;
	}

	.vb-carrito.vb-carrito .woocommerce table.cart td.actions > button.button {
		width: 100%;
		margin-top: 12px;
	}
}

/* Páginas (no carrito, pago ni tienda): textos con la tipografía de la marca. */
body.page:not(.woocommerce-cart):not(.woocommerce-checkout) .entry-content {
	font-family: var(--vb-fuente);
}

/* ---------- Pago (WooCommerce) ---------- */

/*
 * Solo se viste por fuera, como el carrito: datos de facturación y "Tu pedido" en tarjetas
 * blancas con contorno y sombra dura; campos con contorno; "Realizar el pedido" es la pieza roja.
 */
.vb-pago.vb-pago {
	padding-block: 0 var(--vb-seccion);
}

.vb-pago .woocommerce {
	color: var(--vb-negro);
	font-family: var(--vb-fuente);
}

.vb-pago.vb-pago .woocommerce :is(h3, #order_review_heading) {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	color: var(--vb-negro);
	font: 800 var(--vb-t4)/1.15 var(--vb-fuente);
	letter-spacing: -0.01em;
}

/* Tarjetas: facturación (izquierda) y tu pedido (derecha, con cabecera amarilla). */
.vb-pago.vb-pago form.checkout .col2-set,
.vb-pago.vb-pago form.checkout #order_review {
	padding: clamp(18px, 2.4vw, 28px);
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 14px !important;
	background: var(--vb-blanco);
	box-shadow: var(--vb-sombra) var(--vb-sombra) 0 var(--vb-negro);
}

.vb-pago.vb-pago form.checkout #order_review_heading {
	margin: 0;
	padding: 16px 20px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-bottom: 2px solid var(--vb-negro);
	border-radius: 14px 14px 0 0;
	background: var(--vb-amarillo);
	box-shadow: var(--vb-sombra) 0 0 var(--vb-negro);
}

.vb-pago.vb-pago form.checkout #order_review_heading + #order_review {
	border-top: 0;
	border-radius: 0 0 14px 14px !important;
}

.vb-pago.vb-pago .woocommerce h3#order_review_heading {
	font-size: var(--vb-t4);
}

.vb-pago.vb-pago form.checkout .col2-set :is(.col-1, .col-2) {
	float: none;
	width: 100%;
	padding: 0;
	border: 0;
}

.vb-pago.vb-pago form.checkout .col2-set .col-2 {
	margin-top: 24px;
}

/* Etiquetas y campos. */
.vb-pago.vb-pago .woocommerce form .form-row label {
	margin-bottom: 6px;
	color: var(--vb-negro);
	font: 700 0.9375rem/1.3 var(--vb-fuente);
}

.vb-pago.vb-pago .woocommerce form .form-row .required {
	color: var(--vb-rojo);
	text-decoration: none;
}

.vb-pago.vb-pago .woocommerce :is(input.input-text, textarea, select, .select2-selection) {
	min-height: 48px;
	padding: 10px 14px;
	border: var(--vb-borde) solid var(--vb-negro) !important;
	border-radius: 10px !important;
	background: var(--vb-blanco);
	color: var(--vb-negro);
	box-shadow: 3px 3px 0 var(--vb-negro);
	font: 500 1rem/1.3 var(--vb-fuente);
}

.vb-pago.vb-pago .woocommerce .select2-selection .select2-selection__rendered {
	padding: 0;
	color: var(--vb-negro);
	line-height: 24px;
}

.vb-pago.vb-pago .woocommerce .select2-selection .select2-selection__arrow {
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
}

.vb-pago.vb-pago .woocommerce :is(input.input-text, textarea):focus,
.vb-pago.vb-pago .woocommerce .select2-container--focus .select2-selection {
	outline: 3px solid var(--vb-azul);
	outline-offset: 2px;
}

.vb-pago.vb-pago .woocommerce .form-row.woocommerce-invalid :is(input.input-text, .select2-selection) {
	border-color: var(--vb-rojo) !important;
}

.vb-pago.vb-pago .woocommerce :is(input[type="checkbox"], input[type="radio"]) {
	width: 20px;
	height: 20px;
	margin: 0 8px 0 0;
	accent-color: var(--vb-negro);
	vertical-align: -4px;
}

/* Tu pedido: tabla limpia con líneas discontinuas y el total grande. */
.vb-pago.vb-pago .woocommerce table.shop_table {
	margin: 0 0 20px;
	border: 0;
	border-radius: 0;
}

.vb-pago.vb-pago .woocommerce table.shop_table :is(th, td) {
	padding: 12px 0;
	border: 0;
	border-bottom: 2px dashed rgba(0, 0, 0, 0.2);
	background: transparent;
	color: var(--vb-negro);
	font-family: var(--vb-fuente);
	font-size: 1rem;
}

.vb-pago.vb-pago .woocommerce table.shop_table :is(thead th, td.product-name) {
	font-weight: 800;
}

.vb-pago.vb-pago .woocommerce table.shop_table :is(td.product-total, tfoot td, thead th.product-total) {
	text-align: right;
}

.vb-pago.vb-pago .woocommerce table.shop_table .order-total :is(th, td) {
	border-bottom: 0;
	font-size: 1.375rem;
	font-weight: 800;
}

/* Formas de pago: cada una, una tarjeta pequeña con contorno; los detalles, debajo. */
.vb-pago.vb-pago .woocommerce #payment {
	border-radius: 0;
	background: transparent;
}

.vb-pago.vb-pago .woocommerce #payment ul.payment_methods {
	display: grid;
	gap: 10px;
	padding: 0 0 16px;
	border: 0;
}

.vb-pago.vb-pago .woocommerce #payment ul.payment_methods li {
	margin: 0;
	padding: 12px 14px;
	border: 2px solid var(--vb-negro);
	border-radius: 10px;
	background: var(--vb-blanco);
	font: 700 1rem/1.3 var(--vb-fuente);
	list-style: none;
}

.vb-pago.vb-pago .woocommerce #payment ul.payment_methods li:has(> input:checked) {
	background: #fffbe0;
	box-shadow: 3px 3px 0 var(--vb-negro);
}

.vb-pago.vb-pago .woocommerce #payment ul.payment_methods li label {
	display: inline;
	color: var(--vb-negro);
	cursor: pointer;
}

.vb-pago.vb-pago .woocommerce #payment div.payment_box {
	margin: 10px 0 0;
	padding: 12px 14px;
	border-radius: 8px;
	background: #f4f3ee;
	color: var(--vb-negro);
	font: 400 0.9375rem/1.45 var(--vb-fuente);
}

.vb-pago.vb-pago .woocommerce #payment div.payment_box::before {
	display: none;
}

.vb-pago.vb-pago .woocommerce #payment .place-order {
	margin: 0;
	padding: 0 0 8px;
}

.vb-pago.vb-pago .woocommerce .woocommerce-privacy-policy-text p {
	margin: 0 0 18px;
	color: var(--vb-texto-suave);
	font: 400 0.875rem/1.5 var(--vb-fuente);
}

.vb-pago.vb-pago .woocommerce .woocommerce-privacy-policy-text a {
	color: var(--vb-negro);
	font-weight: 700;
}

/* "Realizar el pedido": la pieza roja con dos tetones. */
.vb-pago.vb-pago .woocommerce #place_order {
	position: relative;
	width: 100%;
	margin: 11px 0 0;
	padding: 16px 24px 17px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: var(--vb-radio);
	background: var(--vb-rojo);
	color: var(--vb-blanco);
	box-shadow: var(--vb-sombra) var(--vb-sombra) 0 var(--vb-negro);
	font: 700 1.25rem/1.2 var(--vb-fuente);
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.vb-pago.vb-pago .woocommerce #place_order::before,
.vb-pago.vb-pago .woocommerce #place_order::after {
	content: "";
	position: absolute;
	top: -11px;
	width: 26px;
	height: 11px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-bottom: 0;
	border-radius: 5px 5px 0 0;
	background: var(--vb-rojo);
}

.vb-pago.vb-pago .woocommerce #place_order::before {
	left: 20%;
}

.vb-pago.vb-pago .woocommerce #place_order::after {
	right: 20%;
}

.vb-pago.vb-pago .woocommerce #place_order:hover {
	background: var(--vb-rojo);
	color: var(--vb-blanco);
	transform: translate(-2px, -2px);
	box-shadow: calc(var(--vb-sombra) + 2px) calc(var(--vb-sombra) + 2px) 0 var(--vb-negro);
}

.vb-pago.vb-pago .woocommerce #place_order:active {
	transform: translate(var(--vb-sombra), var(--vb-sombra));
	box-shadow: none;
}

/* Cupón ("¿Tienes un cupón?") y avisos: tarjetas con contorno, sin el icono de WooCommerce. */
.vb-pago.vb-pago .woocommerce :is(.woocommerce-info, .woocommerce-message, .woocommerce-error) {
	margin: 0 0 20px;
	padding: 14px 18px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-left-width: 10px;
	border-left-color: var(--vb-azul);
	border-radius: 12px;
	background: var(--vb-blanco);
	color: var(--vb-negro);
	box-shadow: 4px 4px 0 var(--vb-negro);
	font: 500 1rem/1.4 var(--vb-fuente);
	list-style: none;
}

.vb-pago.vb-pago .woocommerce .woocommerce-message {
	border-left-color: var(--vb-verde);
}

.vb-pago.vb-pago .woocommerce .woocommerce-error {
	border-left-color: var(--vb-rojo);
}

.vb-pago.vb-pago .woocommerce :is(.woocommerce-info, .woocommerce-message, .woocommerce-error)::before {
	display: none;
}

.vb-pago.vb-pago .woocommerce .woocommerce-info a {
	color: var(--vb-negro);
	font-weight: 800;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.vb-pago.vb-pago .woocommerce form.checkout_coupon {
	margin: 0 0 24px;
	padding: 18px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 12px;
	background: var(--vb-blanco);
	box-shadow: 4px 4px 0 var(--vb-negro);
}

.vb-pago.vb-pago .woocommerce form.checkout_coupon button.button {
	min-height: 48px;
	padding: 10px 18px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 10px;
	background: var(--vb-blanco);
	color: var(--vb-negro);
	box-shadow: 3px 3px 0 var(--vb-negro);
	font: 700 1rem/1.2 var(--vb-fuente);
	letter-spacing: 0;
	text-transform: none;
}

.vb-pago.vb-pago .woocommerce form.checkout_coupon button.button:hover {
	background: var(--vb-amarillo);
	color: var(--vb-negro);
}

@media (prefers-reduced-motion: no-preference) {
	.vb-pago.vb-pago .woocommerce #place_order {
		transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
	}
}

/* Tableta y móvil: las dos tarjetas una debajo de otra. */
@media (max-width: 921px) {
	.vb-pago.vb-pago form.checkout #order_review_heading {
		margin-top: 32px;
	}
}

@media (max-width: 600px) {
	.vb-pago.vb-pago form.checkout :is(.col2-set, #order_review),
	.vb-pago.vb-pago .woocommerce :is(.woocommerce-info, form.checkout_coupon) {
		box-shadow: 4px 4px 0 var(--vb-negro);
	}
}

@media (max-width: 400px) {
	.vb-pago.vb-pago .woocommerce form .form-row:is(.form-row-first, .form-row-last) {
		float: none;
		width: 100%;
	}
}

/*
 * "Tu pedido": Astra le pone un borde gris de 2 px con una regla más fuerte (form #order_review_heading:not(...)),
 * así que el contorno negro va con !important; la cabecera amarilla y el cuerpo forman una sola tarjeta.
 */
.vb-pago.vb-pago form.checkout :is(#order_review_heading, #order_review) {
	border: var(--vb-borde) solid var(--vb-negro) !important;
}

.vb-pago.vb-pago form.checkout #order_review_heading {
	border-bottom-width: 2px !important;
	/* Sombra también hacia abajo (el cuerpo la tapa): así no queda una muesca donde se unen las dos. */
	box-shadow: var(--vb-sombra) var(--vb-sombra) 0 var(--vb-negro);
}

.vb-pago.vb-pago form.checkout #order_review_heading + #order_review {
	border-top: 0 !important;
}

/*
 * ---------- Pedido recibido (la misma página que el pago, con ?key) ----------
 * Todo en tarjetas blancas con contorno y sombra dura, como el pago: aviso "Gracias", datos del pedido en
 * fichas, "Tu mosaico" (lo pone el plugin: mosaico, sofá a escala e instrucciones), detalles y dirección.
 */
.vb-pago.vb-pago .woocommerce-order {
	display: grid;
	gap: clamp(20px, 2.6vw, 28px);
	color: var(--vb-negro);
	font-family: var(--vb-fuente);
}

.vb-pago.vb-pago .woocommerce-order > * {
	margin: 0;
}

/* El aviso "Gracias..." y las fichas de datos (número, fecha, correo...) no se enseñan: el título ya da las gracias y
   el número de pedido va en la entradilla (functions.php). Los detalles siguen en "Detalles del pedido". */
.vb-pago.vb-pago .woocommerce-order :is(.woocommerce-thankyou-order-received, ul.woocommerce-order-overview) {
	display: none;
}

/* Instrucciones de la forma de pago ("Paga en efectivo..."). */
.vb-pago.vb-pago .woocommerce-order > p:not([class]) {
	font: 500 1rem/1.5 var(--vb-fuente);
}

/* Detalles del pedido y dirección: tarjetas con la cabecera amarilla, como "Tu pedido". */
.vb-pago.vb-pago .woocommerce-order :is(.woocommerce-order-details, .woocommerce-customer-details, .vb-gracias-mosaico) {
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 14px;
	background: var(--vb-blanco);
	box-shadow: var(--vb-sombra) var(--vb-sombra) 0 var(--vb-negro);
	overflow: hidden;
}

.vb-pago.vb-pago .woocommerce-order :is(.woocommerce-order-details__title, .woocommerce-column__title, .vb-gracias-mosaico__titulo) {
	margin: 0;
	padding: 16px clamp(18px, 2.4vw, 28px);
	border: 0;
	border-bottom: 2px solid var(--vb-negro) !important;
	background: var(--vb-amarillo) !important;
	color: var(--vb-negro);
	font: 800 var(--vb-t4)/1.15 var(--vb-fuente);
	letter-spacing: -0.01em;
}

.vb-pago.vb-pago .woocommerce-order .woocommerce-order-details table.shop_table {
	width: calc(100% - 2 * clamp(18px, 2.4vw, 28px));
	margin: 8px clamp(18px, 2.4vw, 28px) 16px;
}

.vb-pago.vb-pago .woocommerce-order .woocommerce-order-details table.shop_table :is(th, td) {
	text-align: left;
}

.vb-pago.vb-pago .woocommerce-order .woocommerce-order-details table.shop_table :is(td.product-total, tfoot td, thead th.product-total, td:last-child) {
	text-align: right;
}

.vb-pago.vb-pago .woocommerce-order .woocommerce-order-details table.shop_table tfoot tr:nth-last-child(2) :is(th, td) {
	font-size: 1.375rem;
	font-weight: 800;
}

.vb-pago.vb-pago .woocommerce-order .woocommerce-customer-details address {
	margin: 0;
	padding: 18px clamp(18px, 2.4vw, 28px) 22px;
	border: 0;
	border-radius: 0;
	font: 500 1rem/1.6 var(--vb-fuente);
	font-style: normal;
}

.vb-pago.vb-pago .woocommerce-order .woocommerce-customer-details address p {
	margin: 0;
}

/* Tu mosaico (plugin): las dos imágenes lado a lado y el botón rojo de instrucciones. */
.vb-gracias-mosaico__cuerpo {
	padding: 18px clamp(18px, 2.4vw, 28px) 24px;
}

.vb-gracias-mosaico__datos {
	margin: 0 0 16px;
	font: 600 1rem/1.4 var(--vb-fuente);
}

.vb-gracias-mosaico__imagenes {
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: 16px;
	align-items: start;
}

.vb-gracias-mosaico__imagenes img {
	display: block;
	width: 100%;
	height: auto;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 8px;
	background: var(--vb-negro);
}

.vb-gracias-mosaico__imagenes figure {
	margin: 0;
}

.vb-gracias-mosaico__imagenes figure img {
	background: var(--vb-blanco);
}

.vb-gracias-mosaico__imagenes figcaption {
	margin-top: 6px;
	font: 500 0.875rem/1.4 var(--vb-fuente);
}

.vb-gracias-mosaico__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 20px;
	align-items: center;
	margin: 22px 0 0;
}

.vb-pago.vb-pago .vb-gracias-mosaico__boton {
	display: inline-block;
	padding: 14px 22px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 10px;
	background: var(--vb-rojo);
	color: var(--vb-blanco);
	box-shadow: 4px 4px 0 var(--vb-negro);
	font: 800 1.0625rem/1.2 var(--vb-fuente);
	text-decoration: none;
}

.vb-pago.vb-pago .vb-gracias-mosaico__boton:hover {
	color: var(--vb-blanco);
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--vb-negro);
}

.vb-pago.vb-pago .vb-gracias-mosaico__enlace {
	color: var(--vb-negro);
	font: 700 1rem/1.2 var(--vb-fuente);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.vb-gracias-mosaico__nota {
	margin: 14px 0 0;
	color: var(--vb-texto-suave);
	font: 500 0.875rem/1.4 var(--vb-fuente);
}

@media (prefers-reduced-motion: no-preference) {
	.vb-pago.vb-pago .vb-gracias-mosaico__boton {
		transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
	}
}

@media (max-width: 600px) {
	.vb-gracias-mosaico__imagenes {
		grid-template-columns: 1fr;
	}

	.vb-pago.vb-pago .woocommerce-order :is(.woocommerce-order-details, .woocommerce-customer-details, .vb-gracias-mosaico) {
		box-shadow: 4px 4px 0 var(--vb-negro);
	}
}

/* "Descargar instrucciones" junto a cada VisuBloq del carrito (lo añade el plugin): pieza blanca pequeña. */
.vb-carrito.vb-carrito .woocommerce .vb-instrucciones-articulo {
	display: flex;
	width: fit-content;
	margin: 10px 0 0;
}

/* Carrito apilado (tableta y móvil): el botón a la derecha, bajo el nombre del producto. */
@media (max-width: 921px) {
	.vb-carrito.vb-carrito .woocommerce .vb-instrucciones-articulo {
		margin-left: auto;
	}
}

/* ---------- Texto legal (aviso legal, privacidad, cookies, condiciones de venta) ---------- */

/* Tarjeta blanca de lectura: líneas no muy largas, títulos con la tipografía de la web y listas con piezas. */
.vb-legal.vb-legal {
	padding-block: 0 var(--vb-seccion);
}

.vb-legal__tarjeta {
	max-width: 820px;
	margin-inline: auto;
	padding: clamp(22px, 4vw, 48px);
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 16px;
	background: var(--vb-blanco);
	box-shadow: var(--vb-sombra) var(--vb-sombra) 0 var(--vb-negro);
	color: var(--vb-negro);
	font: 400 1.0625rem/1.65 var(--vb-fuente);
}

.vb-legal__tarjeta > * {
	margin-block: 0 1em;
}

.vb-legal__tarjeta h2 {
	margin: 1.6em 0 0.5em;
	color: var(--vb-negro);
	font: 800 var(--vb-t4)/1.15 var(--vb-fuente);
	letter-spacing: -0.01em;
}

.vb-legal__tarjeta h3 {
	margin: 1.3em 0 0.4em;
	color: var(--vb-negro);
	font: 800 var(--vb-t5)/1.2 var(--vb-fuente);
}

.vb-legal__tarjeta > :first-child {
	color: var(--vb-texto-suave);
	font-size: 0.9375rem;
}

.vb-legal__tarjeta h2:first-of-type {
	margin-top: 0.6em;
}

.vb-legal .vb-legal__tarjeta ul {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}

.vb-legal__tarjeta li {
	position: relative;
	margin: 0 0 0.6em;
	padding-left: 28px;
}

/* Viñeta: pieza redonda amarilla con contorno. */
.vb-legal__tarjeta li::before {
	content: "";
	position: absolute;
	top: 0.45em;
	left: 2px;
	width: 13px;
	height: 13px;
	border: 2px solid var(--vb-negro);
	border-radius: 50%;
	background: var(--vb-amarillo);
}

.vb-legal__tarjeta a {
	color: var(--vb-negro);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

.vb-legal__tarjeta a:hover {
	background: var(--vb-amarillo);
}

@media (max-width: 600px) {
	.vb-legal__tarjeta {
		box-shadow: 4px 4px 0 var(--vb-negro);
		font-size: 1rem;
	}
}