/*
 * VisuBloq: base global (todas las páginas): tipografía, colores de marca,
 * cabecera, menú y formularios. Las secciones de página están en secciones.css.
 */

@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/* Solo diseño claro: que el modo oscuro del móvil no repinte la web (ver functions.php). */
	color-scheme: only light;
	--vb-negro: #000;
	--vb-blanco: #fff;
	--vb-rojo: #cd2928;
	--vb-amarillo: #ffd300;
	--vb-azul: #0065b2;
	--vb-verde: #00a64d;
	--vb-texto-suave: #3d3d3d;
	--vb-fuente: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Contornos y sombras duras: el "plástico" de las piezas. */
	--vb-borde: 3px;
	--vb-sombra: 6px;
	--vb-radio: 10px;

	/* Márgenes laterales y separación entre secciones (rejilla de 8 px). */
	--vb-lateral: 16px;
	--vb-seccion: clamp(32px, 3.4vw, 48px);

	/*
	 * Escala de títulos (todas las páginas):
	 * t1 título de página, t2 título de sección, t3 título dentro de una tarjeta grande
	 * o de un formulario, t4 título de tarjeta, t5 título de elemento pequeño.
	 */
	--vb-t1: clamp(2.75rem, 1.8rem + 4vw, 5.5rem);
	--vb-t2: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
	--vb-t3: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
	--vb-t4: 1.5rem;
	--vb-t5: 1.1875rem;

	/* Fila de piezas (rojo, amarillo, azul, verde): separadores y borde superior del footer. 384 × 37 px, con 1 px transparente abajo. */
	--vb-fila-piezas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='384' height='37' viewBox='0 0 384 37'%3E%3Crect x='7' y='2.5' width='18' height='12' rx='3' fill='%23cd2928' stroke='%23000' stroke-width='3'/%3E%3Crect x='39' y='2.5' width='18' height='12' rx='3' fill='%23cd2928' stroke='%23000' stroke-width='3'/%3E%3Crect x='71' y='2.5' width='18' height='12' rx='3' fill='%23cd2928' stroke='%23000' stroke-width='3'/%3E%3Crect x='1.5' y='10.5' width='96' height='24' rx='2' fill='%23cd2928' stroke='%23000' stroke-width='3'/%3E%3Crect x='103' y='2.5' width='18' height='12' rx='3' fill='%23ffd300' stroke='%23000' stroke-width='3'/%3E%3Crect x='135' y='2.5' width='18' height='12' rx='3' fill='%23ffd300' stroke='%23000' stroke-width='3'/%3E%3Crect x='167' y='2.5' width='18' height='12' rx='3' fill='%23ffd300' stroke='%23000' stroke-width='3'/%3E%3Crect x='97.5' y='10.5' width='96' height='24' rx='2' fill='%23ffd300' stroke='%23000' stroke-width='3'/%3E%3Crect x='199' y='2.5' width='18' height='12' rx='3' fill='%230065b2' stroke='%23000' stroke-width='3'/%3E%3Crect x='231' y='2.5' width='18' height='12' rx='3' fill='%230065b2' stroke='%23000' stroke-width='3'/%3E%3Crect x='263' y='2.5' width='18' height='12' rx='3' fill='%230065b2' stroke='%23000' stroke-width='3'/%3E%3Crect x='193.5' y='10.5' width='96' height='24' rx='2' fill='%230065b2' stroke='%23000' stroke-width='3'/%3E%3Crect x='295' y='2.5' width='18' height='12' rx='3' fill='%2300a64d' stroke='%23000' stroke-width='3'/%3E%3Crect x='327' y='2.5' width='18' height='12' rx='3' fill='%2300a64d' stroke='%23000' stroke-width='3'/%3E%3Crect x='359' y='2.5' width='18' height='12' rx='3' fill='%2300a64d' stroke='%23000' stroke-width='3'/%3E%3Crect x='289.5' y='10.5' width='96' height='24' rx='2' fill='%2300a64d' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E");
}

@media (min-width: 600px) {
	:root {
		--vb-lateral: 32px;
	}
}

/* ---------- Cabecera ---------- */

/*
 * La cabecera es una placa blanca con contorno negro, esquinas redondeadas y sombra
 * dura, separada de los bordes de la pantalla.
 * Solo CSS sobre el marcado de Astra (no se toca el tema padre).
 */
#masthead.site-header {
	padding: 14px 12px 6px;
	background: var(--vb-blanco);
	font-family: var(--vb-fuente);
}

/* Con cabecera transparente (flota sobre el contenido): alrededor de la placa, transparente.
   flow-root evita que el margen superior del contenido "se escape" y baje toda la página. */
.ast-theme-transparent-header #masthead.site-header {
	background: transparent;
}

.ast-theme-transparent-header #page {
	display: flow-root;
}

#masthead .ast-main-header-wrap > .ast-primary-header-bar {
	position: relative;
	margin: 0;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 16px;
	background: var(--vb-blanco);
	box-shadow: 5px 5px 0 var(--vb-negro);
}

#masthead .site-primary-header-wrap {
	min-height: 66px;
}

/* Logo (la mascota) y nombre. */
#masthead .site-title,
#masthead .site-title a {
	color: var(--vb-negro);
	font-family: var(--vb-fuente);
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

#masthead .ast-site-identity {
	gap: 8px;
	padding: 0;
}

/* Menú: texto sencillo. Al pasar el cursor, cada enlace se rellena con un color
   de marca y "encaja" como una pieza; la página actual, en amarillo e inclinada. */
#masthead .main-header-menu > .menu-item > .menu-link {
	margin: 0 2px;
	padding: 7px 12px;
	border: 2px solid transparent;
	border-radius: 10px;
	color: var(--vb-negro);
	font-family: var(--vb-fuente);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
}

#masthead .main-header-menu > .menu-item:nth-child(4n+1) {
	--vb-enlace: var(--vb-rojo);
	--vb-enlace-texto: var(--vb-blanco);
}

#masthead .main-header-menu > .menu-item:nth-child(4n+2) {
	--vb-enlace: var(--vb-amarillo);
	--vb-enlace-texto: var(--vb-negro);
}

#masthead .main-header-menu > .menu-item:nth-child(4n+3) {
	--vb-enlace: var(--vb-azul);
	--vb-enlace-texto: var(--vb-blanco);
}

#masthead .main-header-menu > .menu-item:nth-child(4n) {
	--vb-enlace: var(--vb-verde);
	--vb-enlace-texto: var(--vb-negro);
}

#masthead .main-header-menu > .menu-item > .menu-link:hover {
	border-color: var(--vb-negro);
	background: var(--vb-enlace);
	color: var(--vb-enlace-texto);
	box-shadow: 3px 3px 0 var(--vb-negro);
}

#masthead .main-header-menu > .current-menu-item > .menu-link,
#masthead .main-header-menu > .current-menu-item > .menu-link:hover {
	border-color: var(--vb-negro);
	background: var(--vb-amarillo);
	color: var(--vb-negro);
	box-shadow: 3px 3px 0 var(--vb-negro);
	transform: rotate(-2deg);
}

/* Sin el recuadro punteado al hacer clic; con teclado, el foco sí se ve. */
#masthead a:focus {
	outline: none;
}

#masthead a:focus-visible,
#masthead .menu-toggle:focus-visible {
	outline: 3px solid var(--vb-azul);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
	#masthead .main-header-menu > .menu-item > .menu-link:hover {
		animation: vb-encaja 0.28s ease-out both;
	}

	@keyframes vb-encaja {
		0% {
			transform: translateY(-6px);
		}

		60% {
			transform: translateY(1px);
		}

		100% {
			transform: translateY(-1px);
		}
	}
}

/* Carrito y menú de móvil: botones cuadrados con contorno y sombra. */
#masthead .ast-site-header-cart .cart-container,
#masthead .ast-mobile-menu-trigger-outline,
#masthead .menu-toggle.main-header-menu-toggle {
	display: grid;
	width: 42px;
	height: 42px;
	padding: 0;
	place-items: center;
	border: 2px solid var(--vb-negro);
	border-radius: 10px;
	background: var(--vb-blanco);
	color: var(--vb-negro);
	box-shadow: 3px 3px 0 var(--vb-negro);
}

#masthead .ast-site-header-cart .cart-container:hover {
	background: var(--vb-amarillo);
}

/* El botón es cuadrado: sin el importe (se partía en vertical); el número de artículos va en una chapa amarilla. */
#masthead .ast-site-header-cart .ast-woo-header-cart-info-wrap {
	display: none;
}

#masthead .ast-site-header-cart .cart-container {
	position: relative;
}

#masthead .ast-site-header-cart .ast-addon-cart-wrap {
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
}

#masthead .ast-site-header-cart .astra-icon {
	position: static;
	display: grid;
	margin: 0;
	place-items: center;
	line-height: 0;
}

#masthead .ast-site-header-cart .astra-icon::after {
	display: none;
}

#masthead .ast-site-header-cart .astra-icon:not([data-cart-total="0"])::after {
	content: attr(data-cart-total);
	position: absolute;
	top: -10px;
	right: -10px;
	display: grid;
	min-width: 22px;
	height: 22px;
	padding: 0 5px;
	place-items: center;
	border: 2px solid var(--vb-negro);
	border-radius: 11px;
	background: var(--vb-amarillo);
	color: var(--vb-negro);
	font: 800 0.75rem/1 var(--vb-fuente);
	box-sizing: border-box;
}

#masthead .ast-site-header-cart .ast-icon svg,
#masthead .menu-toggle .ast-mobile-svg {
	fill: var(--vb-negro);
}

#masthead .menu-toggle.toggled {
	background: var(--vb-amarillo);
	box-shadow: none;
	transform: translate(3px, 3px);
}

/* Móvil y tableta: el menú se despliega debajo de la placa como una pila de piezas. */
#ast-mobile-header .ast-mobile-header-content,
.ast-mobile-header-content {
	margin: 0 auto;
	padding: 14px 4px 6px;
	border: 0;
	background: transparent;
}

.ast-mobile-header-content .main-header-menu,
.ast-mobile-header-content .main-header-menu .menu-item {
	border: 0;
	background: transparent;
}

.ast-mobile-header-content .main-header-menu > .menu-item:nth-child(4n+1) {
	--vb-enlace: var(--vb-rojo);
	--vb-enlace-texto: var(--vb-blanco);
}

.ast-mobile-header-content .main-header-menu > .menu-item:nth-child(4n+2) {
	--vb-enlace: var(--vb-amarillo);
	--vb-enlace-texto: var(--vb-negro);
}

.ast-mobile-header-content .main-header-menu > .menu-item:nth-child(4n+3) {
	--vb-enlace: var(--vb-azul);
	--vb-enlace-texto: var(--vb-blanco);
}

.ast-mobile-header-content .main-header-menu > .menu-item:nth-child(4n) {
	--vb-enlace: var(--vb-verde);
	--vb-enlace-texto: var(--vb-negro);
}

#masthead .ast-mobile-header-content .main-header-menu .menu-item > .menu-link {
	display: block;
	margin: 0 6px 10px 0;
	padding: 15px 18px !important;
	border: var(--vb-borde) solid var(--vb-negro) !important;
	border-radius: 12px;
	background: var(--vb-enlace);
	color: var(--vb-enlace-texto);
	box-shadow: 4px 4px 0 var(--vb-negro);
	font-family: var(--vb-fuente);
	font-size: 1.1875rem;
	font-weight: 800;
	line-height: 1.2;
}

.ast-mobile-header-content .main-header-menu .menu-item > .menu-link:hover {
	background: var(--vb-enlace);
	color: var(--vb-enlace-texto);
}

/* La página actual: pieza blanca e inclinada (las demás son de color, así se distingue siempre). */
#masthead .ast-mobile-header-content .main-header-menu .current-menu-item > .menu-link {
	background: var(--vb-blanco);
	color: var(--vb-negro);
	transform: rotate(-1.5deg);
	box-shadow: 6px 6px 0 var(--vb-negro);
}

@media (max-width: 600px) {
	#masthead.site-header {
		padding: 12px 8px 4px;
	}

	#masthead .site-title,
	#masthead .site-title a {
		font-size: 1.125rem;
	}

	#ast-mobile-header .site-header-primary-section-right {
		gap: 10px;
	}
}

/* ---------- Panel lateral del carrito (Astra) ---------- */

/*
 * Se abre al pulsar el carrito de la cabecera, en cualquier página. Placa blanca con contorno,
 * cabecera amarilla, productos con miniatura enmarcada y los botones como piezas:
 * "Ver carrito" blanca y "Finalizar compra" roja con tetones.
 */
.astra-cart-drawer.astra-cart-drawer {
	border-left: var(--vb-borde) solid var(--vb-negro);
	background: var(--vb-blanco);
	color: var(--vb-negro);
	font-family: var(--vb-fuente);
}

.astra-cart-drawer .astra-cart-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: var(--vb-borde) solid var(--vb-negro);
	background: var(--vb-amarillo);
}

.astra-cart-drawer .astra-cart-drawer-title {
	order: -1;
	padding: 0;
	color: var(--vb-negro);
	font: 800 var(--vb-t4)/1.1 var(--vb-fuente);
	letter-spacing: -0.01em;
}

.astra-cart-drawer .astra-cart-drawer-close.astra-cart-drawer-close {
	position: static;
	display: grid;
	width: 40px;
	height: 40px;
	padding: 0;
	place-items: center;
	border: 2px solid var(--vb-negro);
	border-radius: 10px;
	background: var(--vb-blanco);
	color: var(--vb-negro);
	box-shadow: 3px 3px 0 var(--vb-negro);
}

.astra-cart-drawer .astra-cart-drawer-close .ast-close-svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.astra-cart-drawer .astra-cart-drawer-close:hover {
	background: var(--vb-blanco);
	color: var(--vb-rojo);
}

.astra-cart-drawer .astra-cart-drawer-close:focus-visible {
	outline: 3px solid var(--vb-azul);
	outline-offset: 3px;
}

.astra-cart-drawer .astra-cart-drawer-content {
	font-family: var(--vb-fuente);
}

/* Cada producto: miniatura enmarcada, nombre en negrita y la "x" redonda para quitarlo. */
.astra-cart-drawer .woocommerce-mini-cart-item.woocommerce-mini-cart-item {
	padding: 18px 56px 18px 20px;
	border-bottom: 2px dashed rgba(0, 0, 0, 0.2);
}

.astra-cart-drawer .woocommerce-mini-cart-item a:not(.remove) {
	color: var(--vb-negro);
	font: 800 1.0625rem/1.25 var(--vb-fuente);
	text-decoration: none;
}

.astra-cart-drawer .woocommerce-mini-cart-item a:not(.remove):hover {
	color: var(--vb-negro);
}

.astra-cart-drawer .woocommerce-mini-cart-item img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border: 2px solid var(--vb-negro);
	border-radius: 6px;
	box-shadow: 3px 3px 0 var(--vb-negro);
}

.astra-cart-drawer .woocommerce-mini-cart-item .quantity {
	color: var(--vb-negro);
	font: 700 1rem/1.3 var(--vb-fuente);
}

.astra-cart-drawer .woocommerce-mini-cart-item a.remove.remove {
	top: 18px;
	right: 20px;
	display: grid;
	width: 30px;
	height: 30px;
	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;
}

.astra-cart-drawer .woocommerce-mini-cart-item a.remove svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

.astra-cart-drawer .woocommerce-mini-cart-item a.remove:hover {
	background: var(--vb-rojo);
	color: var(--vb-blanco) !important;
}

/* Subtotal y botones. */
.astra-cart-drawer .woocommerce-mini-cart__total.woocommerce-mini-cart__total {
	padding: 16px 20px;
	border-top: var(--vb-borde) solid var(--vb-negro);
	border-bottom: 0;
	color: var(--vb-negro);
	font: 800 1.25rem/1.2 var(--vb-fuente);
}

.astra-cart-drawer .woocommerce-mini-cart__total :is(strong, .amount) {
	color: var(--vb-negro);
	font-weight: 800 !important;
}

.astra-cart-drawer .woocommerce-mini-cart__buttons.woocommerce-mini-cart__buttons {
	display: grid;
	gap: 22px;
	padding: 4px 20px 24px;
}

.astra-cart-drawer .woocommerce-mini-cart__buttons .button.button,
.astra-cart-drawer .woocommerce-mini-cart__empty-message + .button,
.astra-cart-drawer .ast-mini-cart-empty .button {
	position: relative;
	display: block;
	margin: 0;
	padding: 14px 20px !important;
	border: var(--vb-borde) solid var(--vb-negro) !important;
	border-radius: var(--vb-radio) !important;
	background: var(--vb-blanco) !important;
	color: var(--vb-negro) !important;
	box-shadow: 4px 4px 0 var(--vb-negro);
	font: 700 1.0625rem/1.2 var(--vb-fuente) !important;
	letter-spacing: 0 !important;
	text-align: center;
	text-transform: none !important;
}

.astra-cart-drawer .woocommerce-mini-cart__buttons .button.button:not(.checkout):hover,
.astra-cart-drawer .ast-mini-cart-empty .button:hover {
	background: var(--vb-amarillo) !important;
}

.astra-cart-drawer .woocommerce-mini-cart__buttons .button.checkout.checkout {
	margin-top: 11px;
	background: var(--vb-rojo) !important;
	color: var(--vb-blanco) !important;
	box-shadow: var(--vb-sombra) var(--vb-sombra) 0 var(--vb-negro);
	font-size: 1.1875rem !important;
}

.astra-cart-drawer .woocommerce-mini-cart__buttons .button.checkout::before,
.astra-cart-drawer .woocommerce-mini-cart__buttons .button.checkout::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);
}

.astra-cart-drawer .woocommerce-mini-cart__buttons .button.checkout::before {
	left: 20%;
}

.astra-cart-drawer .woocommerce-mini-cart__buttons .button.checkout::after {
	right: 20%;
}

.astra-cart-drawer .woocommerce-mini-cart__buttons .button.checkout:hover {
	transform: translate(-2px, -2px);
	box-shadow: calc(var(--vb-sombra) + 2px) calc(var(--vb-sombra) + 2px) 0 var(--vb-negro);
}

.astra-cart-drawer .button:focus-visible {
	outline: 3px solid var(--vb-azul);
	outline-offset: 4px;
}

/* Carrito vacío. */
.astra-cart-drawer .woocommerce-mini-cart__empty-message {
	color: var(--vb-negro);
	font: 700 1.125rem/1.4 var(--vb-fuente);
}

@media (prefers-reduced-motion: no-preference) {
	.astra-cart-drawer .woocommerce-mini-cart__buttons .button.checkout {
		transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
	}
}

/* ---------- Creador de mosaicos: pantallas de carga del modal (plugin visubloq-integration) ---------- */

/*
 * El modal (con la app lego-app dentro) vive en la página; su barra y su editor tienen estilo propio.
 * Aquí solo se igualan las dos pantallas de carga del plugin: al abrir la foto y al crear el mosaico.
 */
#visubloq-loading-overlay,
#visubloq-parent-loader {
	gap: 16px;
	background: #fff !important;
	font-family: var(--vb-fuente);
}

#visubloq-loading-overlay .visubloq-loader-spinner,
#visubloq-parent-loader .visubloq-loader-spinner {
	width: 44px;
	height: 44px;
	border: 4px solid #e4e2da;
	border-top-color: var(--vb-rojo);
}

#visubloq-parent-loader::after {
	content: "Creando tu mosaico…";
	color: var(--vb-negro);
	font-size: 1.125rem;
	font-weight: 700;
}

/* ---------- Formularios (todas las páginas salvo carrito y pago) ---------- */

body:not(.woocommerce-cart):not(.woocommerce-checkout) .entry-content :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"], input[type="search"], input[type="date"], select, textarea) {
	width: 100%;
	padding: 12px 14px;
	border: var(--vb-borde) solid var(--vb-negro) !important;
	border-radius: 10px !important;
	background: var(--vb-blanco) !important;
	color: var(--vb-negro);
	box-shadow: 3px 3px 0 var(--vb-negro);
	font-family: var(--vb-fuente);
	font-size: 1rem;
	line-height: 1.4;
}

body:not(.woocommerce-cart):not(.woocommerce-checkout) .entry-content :is(input, select, textarea):focus {
	border-color: var(--vb-negro);
	outline: 3px solid var(--vb-azul);
	outline-offset: 2px;
}

body:not(.woocommerce-cart):not(.woocommerce-checkout) .entry-content :is(input, select, textarea)[aria-invalid="true"] {
	border-color: var(--vb-rojo);
	box-shadow: 3px 3px 0 var(--vb-rojo);
}

body:not(.woocommerce-cart):not(.woocommerce-checkout) .entry-content label {
	color: var(--vb-negro);
	font-family: var(--vb-fuente);
	font-size: 0.9375rem;
	font-weight: 700;
}

body:not(.woocommerce-cart):not(.woocommerce-checkout) .entry-content :is(button[type="submit"], input[type="submit"], .woocommerce-button, .woocommerce-Button, .srfm-submit-button) {
	padding: 12px 24px;
	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-family: var(--vb-fuente);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0 !important;
	text-transform: none !important;
	cursor: pointer;
}

/* Formulario de Contacto (SureForms): Bricolage Grotesque en todo (campos, textos de ayuda, botón y mensajes). */
.srfm-form-container :is(.srfm-form, .srfm-form *, .srfm-success-box, .srfm-success-box *),
.srfm-form-container :is(input, textarea, select)::placeholder {
	font-family: var(--vb-fuente) !important;
}

/* Formulario de acceso y registro de Mi cuenta: una tarjeta con contorno. */
body:not(.woocommerce-cart):not(.woocommerce-checkout) .entry-content :is(.woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword) {
	padding: 24px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 14px;
	background: var(--vb-blanco);
	box-shadow: 6px 6px 0 var(--vb-negro);
}

body:not(.woocommerce-cart):not(.woocommerce-checkout) .entry-content :is(button[type="submit"], input[type="submit"], .woocommerce-button, .woocommerce-Button, .srfm-submit-button):hover {
	background: var(--vb-rojo);
	color: var(--vb-blanco);
	transform: translate(-1px, -2px);
	box-shadow: 5px 6px 0 var(--vb-negro);
}

/* Avisos de error y de éxito. */
body:not(.woocommerce-cart):not(.woocommerce-checkout) :is(.woocommerce-error, .woocommerce-message, .woocommerce-info, .srfm-error-message, .srfm-success-box, .vb-aviso) {
	margin: 0 0 20px;
	padding: 14px 18px;
	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-family: var(--vb-fuente);
	list-style: none;
}

body:not(.woocommerce-cart):not(.woocommerce-checkout) :is(.woocommerce-error, .srfm-error-message, .vb-aviso--error) {
	border-left-width: 10px;
	border-left-color: var(--vb-rojo);
}

/* Aviso de cada campo del formulario ("Este campo es obligatorio"): texto rojo bajo el campo, sin caja
   (con la caja de aviso se metía debajo del campo siguiente). */
body:not(.woocommerce-cart):not(.woocommerce-checkout) .srfm-form-container .srfm-form .srfm-block .srfm-error-message {
	height: auto;
	margin: 6px 0 0;
	padding: 0 0 0 2px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--vb-rojo);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

body:not(.woocommerce-cart):not(.woocommerce-checkout) :is(.woocommerce-message, .srfm-success-box, .vb-aviso--ok) {
	border-left-width: 10px;
	border-left-color: var(--vb-verde);
}

body:not(.woocommerce-cart):not(.woocommerce-checkout) .woocommerce-info {
	border-left-width: 10px;
	border-left-color: var(--vb-azul);
}

/*
 * Avisos de WooCommerce ("… se ha añadido a tu carrito" con "Ver carrito"): el texto a la izquierda y
 * el botón a la derecha, sin el icono de WooCommerce (se montaba encima del texto).
 */
body:not(.woocommerce-cart):not(.woocommerce-checkout) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
	display: none !important;
}

body:not(.woocommerce-cart):not(.woocommerce-checkout) :is(.woocommerce-message, .woocommerce-info):has(> .button) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	font-size: 1.0625rem;
	font-weight: 300;
}

body:not(.woocommerce-cart):not(.woocommerce-checkout) :is(.woocommerce-message, .woocommerce-info) > .button.button {
	order: 2;
	float: none;
	margin: 0 0 0 auto;
	padding: 10px 18px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: var(--vb-radio);
	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;
	white-space: nowrap;
}

body:not(.woocommerce-cart):not(.woocommerce-checkout) :is(.woocommerce-message, .woocommerce-info) > .button.button:is(:hover, :focus) {
	border-color: var(--vb-negro);
	background: var(--vb-amarillo);
	color: var(--vb-negro);
}

/* ---------- Footer ---------- */

/*
 * Fondo blanco y texto negro, en dos filas. Única decoración: la fila de piezas del
 * borde superior (mismas capas que el separador "Fila de piezas"). Encima de las
 * piezas el fondo es transparente, así asoma el color de la página.
 */
.vb-footer {
	position: relative;
	padding-top: 36px;
	background: linear-gradient(transparent 36px, var(--vb-blanco) 36px);
	color: var(--vb-negro);
	font-family: var(--vb-fuente);
	font-size: 0.9375rem;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
}

/* Si la página acaba con la llamada final (azul), las piezas apoyan sobre ese azul. */
body:has(.entry-content > .vb-llamada:last-child) .vb-footer {
	background: linear-gradient(var(--vb-azul) 36px, var(--vb-blanco) 36px);
}

body:has(.entry-content > .vb-llamada--amarilla:last-child) .vb-footer {
	background: linear-gradient(var(--vb-amarillo) 36px, var(--vb-blanco) 36px);
}

.vb-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 36px;
	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;
	background-size: 100% 3px, 384px 37px, 100% 25px;
}

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

.vb-footer .vb-pie {
	padding: 20px var(--vb-lateral) 16px;
}

.vb-footer .vb-pie :is(p, ul, li, figure) {
	margin: 0;
	color: inherit;
	font-family: var(--vb-fuente);
}

.vb-footer .vb-pie__fila {
	margin-block: 0;
	gap: 12px 32px;
	align-items: center;
}

/* Fila 1: logo y frase; redes a la derecha. */
.vb-footer .vb-pie__fila--marca {
	padding-bottom: 14px;
}

.vb-footer .vb-pie__logo {
	gap: 12px;
	align-items: center;
}

.vb-footer .vb-pie__logo img {
	display: block;
	width: 44px;
	height: auto;
}

.vb-footer .vb-pie__frase {
	font-size: 1.0625rem;
}

.vb-footer .vb-pie__frase strong {
	font-weight: 800;
}

/* Redes: piezas cuadradas de color con el logo de la red; al pulsar, se hunden. */
.vb-footer .vb-pie__redes {
	gap: 12px;
}

.vb-footer.vb-footer .vb-red > .wp-block-button__link {
	display: block;
	width: 44px;
	height: 44px;
	padding: 0;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: var(--vb-radio);
	background-color: var(--vb-red-fondo);
	box-shadow: 4px 4px 0 var(--vb-negro);
	overflow: hidden;
	font-size: 0;
	line-height: 0;
	color: transparent;
	cursor: pointer;
}

/* El logo: un SVG del tema usado como máscara, pintado en blanco o negro. */
.vb-footer .vb-red > .wp-block-button__link::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--vb-red-logo);
	-webkit-mask: var(--vb-red-icono) center / 22px 22px no-repeat;
	mask: var(--vb-red-icono) center / 22px 22px no-repeat;
}

.vb-footer.vb-footer .vb-red > .wp-block-button__link:hover,
.vb-footer.vb-footer .vb-red > .wp-block-button__link:active {
	background-color: var(--vb-red-fondo);
	transform: translate(4px, 4px);
	box-shadow: 0 0 0 var(--vb-negro);
}

.vb-footer .vb-red--instagram {
	--vb-red-fondo: var(--vb-rojo);
	--vb-red-logo: var(--vb-blanco);
	--vb-red-icono: url("../img/redes/instagram.svg");
}

.vb-footer .vb-red--tiktok {
	--vb-red-fondo: var(--vb-amarillo);
	--vb-red-logo: var(--vb-negro);
	--vb-red-icono: url("../img/redes/tiktok.svg");
}

.vb-footer .vb-red--facebook {
	--vb-red-fondo: var(--vb-azul);
	--vb-red-logo: var(--vb-blanco);
	--vb-red-icono: url("../img/redes/facebook.svg");
}

/* Fila 2: enlaces legales en línea; copyright y nota a la derecha. */
.vb-footer .vb-pie__fila--base {
	padding-top: 14px;
	border-top: 1px solid rgba(0, 0, 0, 0.15);
	font-size: 0.875rem;
}

.vb-footer .vb-pie__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	padding: 0;
	list-style: none;
}

.vb-footer .vb-pie__legal a {
	color: var(--vb-negro);
	font-weight: 600;
	text-decoration: none;
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
}

.vb-footer .vb-pie__legal a:hover {
	color: var(--vb-rojo);
	text-decoration: underline;
}

.vb-footer .vb-pie__nota {
	color: var(--vb-texto-suave);
}

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

/* Móvil: todo apilado y centrado; los enlaces legales, en dos líneas. */
@media (max-width: 781px) {
	.vb-footer .vb-pie__fila {
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}

	.vb-footer .vb-pie__logo {
		flex-direction: column;
		gap: 6px;
	}

	.vb-footer .vb-pie__legal {
		display: grid;
		grid-template-columns: auto auto;
		justify-content: center;
		gap: 4px 20px;
	}

	.vb-footer .vb-pie__legal a {
		display: inline-block;
		padding: 6px 0;
	}

	.vb-footer .vb-pie__nota {
		max-width: 28em;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.vb-footer a {
		transition: color 0.15s ease-out, transform 0.12s ease-out, box-shadow 0.12s ease-out;
	}
}

/* "Descargar instrucciones" junto a cada VisuBloq del carrito y del panel lateral (lo añade el plugin). */
.vb-instrucciones-articulo.vb-instrucciones-articulo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 8px 0 0;
	padding: 6px 11px;
	border: 2px solid var(--vb-negro);
	border-radius: 8px;
	background: var(--vb-blanco);
	color: var(--vb-negro);
	box-shadow: 2px 2px 0 var(--vb-negro);
	font: 700 0.875rem/1.2 var(--vb-fuente);
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
}

.vb-instrucciones-articulo.vb-instrucciones-articulo:is(:hover, :focus) {
	border-color: var(--vb-negro);
	background: var(--vb-amarillo);
	color: var(--vb-negro);
}

.vb-instrucciones-articulo.vb-instrucciones-articulo:disabled {
	opacity: 0.6;
	cursor: wait;
}

.vb-instrucciones-articulo svg {
	flex: none;
}

/* En el panel lateral: a la derecha, a la altura del precio (debajo de la "x" de quitar). */
.astra-cart-drawer .woocommerce-mini-cart-item.woocommerce-mini-cart-item {
	position: relative;
}

.astra-cart-drawer .woocommerce-mini-cart-item .vb-instrucciones-articulo {
	position: absolute;
	right: 20px;
	bottom: 18px;
	margin: 0;
}

/* Panel estrecho (móvil): debajo del precio, alineado con el nombre. */
@media (max-width: 420px) {
	.astra-cart-drawer .woocommerce-mini-cart-item .vb-instrucciones-articulo {
		position: static;
		display: flex;
		width: fit-content;
		margin: 8px 0 0;
	}
}

/*
 * Modal del creador de mosaicos (plugin): alto de la pantalla VISIBLE. Con 100vh, en el móvil
 * (sobre todo Safari en iPhone) la barra del navegador tapaba la parte de abajo del editor.
 */
body #visubloq-modal-box {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: auto;
	height: 100vh;
	height: 100dvh;
}

/*
 * ---------- Popup del 10 % (plugin Hustle) ----------
 * Solo el aspecto, con el estilo de la web: tarjeta blanca con contorno y sombra dura, franja amarilla arriba
 * con la mascota, título grueso, campo con contorno, botón rojo de pieza y casilla de privacidad. Los textos,
 * el momento en que sale y la conexión con Brevo se configuran en Hustle (base de datos).
 * Selectores genéricos (sin el número del popup, que cambia entre local y producción) y con !important,
 * porque Hustle escribe sus colores en línea con un selector por id.
 */
.hustle-ui.hustle-popup .hustle-popup-mask {
	background-color: rgba(17, 17, 17, 0.6) !important;
}

.hustle-ui.hustle-popup .hustle-popup-content {
	max-width: 460px !important;
	padding: 0 16px !important;
}

.hustle-ui.hustle-popup .hustle-layout {
	position: relative;
	overflow: visible !important;
	padding: 0 !important;
	border: var(--vb-borde) solid var(--vb-negro) !important;
	border-radius: 16px !important;
	background: var(--vb-blanco) !important;
	box-shadow: 8px 8px 0 var(--vb-negro) !important;
	font-family: var(--vb-fuente) !important;
}

.hustle-ui.hustle-popup :is(.hustle-main-wrapper, .hustle-layout-body, .hustle-layout-content, .hustle-content, .hustle-content-wrap) {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.hustle-ui.hustle-popup .hustle-layout-body {
	overflow: hidden;
	border-radius: 13px !important;
}

/* Franja amarilla con la mascota. */
.hustle-ui.hustle-popup .hustle-image {
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	margin: 0 !important;
	padding: 18px 0 6px !important;
	border-bottom: var(--vb-borde) solid var(--vb-negro) !important;
	background: var(--vb-amarillo) !important;
}

.hustle-ui.hustle-popup .hustle-image img {
	position: static !important;
	display: block;
	width: auto !important;
	height: 130px !important;
	margin: 0 auto !important;
	transform: none !important;
	object-fit: contain;
}

.hustle-ui.hustle-popup .hustle-content .hustle-content-wrap {
	padding: 22px 26px 4px !important;
	text-align: center;
}

.hustle-ui.hustle-popup .hustle-title {
	margin: 0 0 10px !important;
	color: var(--vb-negro) !important;
	font: 800 clamp(1.6rem, 6vw, 2.1rem)/1.05 var(--vb-fuente) !important;
	letter-spacing: -0.02em !important;
	text-transform: none !important;
}

.hustle-ui.hustle-popup .hustle-group-content,
.hustle-ui.hustle-popup .hustle-group-content p {
	margin: 0 !important;
	color: var(--vb-negro) !important;
	font: 500 1.0625rem/1.45 var(--vb-fuente) !important;
}

/* Formulario: correo y botón uno debajo de otro, a lo ancho. */
.hustle-ui.hustle-popup .hustle-layout-form {
	margin: 0 !important;
	padding: 18px 26px 24px !important;
	border: 0 !important;
	background: transparent !important;
}

.hustle-ui.hustle-popup .hustle-form-fields {
	display: flex !important;
	flex-direction: column !important;
	gap: 14px !important;
}

.hustle-ui.hustle-popup .hustle-form-fields > * {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
}

.hustle-ui.hustle-popup .hustle-field {
	position: relative;
	border: 0 !important;
	background: transparent !important;
}

.hustle-ui.hustle-popup .hustle-field .hustle-input {
	width: 100% !important;
	height: 54px !important;
	padding: 0 16px !important;
	border: var(--vb-borde) solid var(--vb-negro) !important;
	border-radius: 10px !important;
	background: var(--vb-blanco) !important;
	box-shadow: 3px 3px 0 var(--vb-negro) !important;
	color: var(--vb-negro) !important;
	font: 500 1.0625rem/1 var(--vb-fuente) !important;
}

.hustle-ui.hustle-popup .hustle-field .hustle-input:focus {
	outline: 3px solid var(--vb-azul) !important;
	outline-offset: 2px;
}

.hustle-ui.hustle-popup .hustle-field .hustle-input-label {
	top: 50% !important;
	left: 16px !important;
	transform: translateY(-50%);
	padding: 0 !important;
	color: #6b6b6b !important;
	font: 500 1.0625rem/1 var(--vb-fuente) !important;
}

.hustle-ui.hustle-popup .hustle-field-error .hustle-input {
	border-color: var(--vb-rojo) !important;
}

/* Botón: pieza roja con tetones, como el botón principal de la web. */
.hustle-ui.hustle-popup .hustle-button-submit {
	position: relative;
	width: 100% !important;
	height: 58px !important;
	margin-top: 8px !important;
	padding: 0 20px !important;
	border: var(--vb-borde) solid var(--vb-negro) !important;
	border-radius: 10px !important;
	background: var(--vb-rojo) !important;
	box-shadow: 4px 4px 0 var(--vb-negro) !important;
	color: var(--vb-blanco) !important;
	font: 800 1.25rem/1 var(--vb-fuente) !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	cursor: pointer;
}

.hustle-ui.hustle-popup .hustle-button-submit::before,
.hustle-ui.hustle-popup .hustle-button-submit::after {
	content: "";
	position: absolute;
	top: -9px;
	width: 26px;
	height: 9px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-bottom: 0;
	border-radius: 4px 4px 0 0;
	background: var(--vb-rojo);
}

.hustle-ui.hustle-popup .hustle-button-submit::before {
	left: 22%;
}

.hustle-ui.hustle-popup .hustle-button-submit::after {
	right: 22%;
}

.hustle-ui.hustle-popup .hustle-button-submit:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--vb-negro) !important;
}

.hustle-ui.hustle-popup .hustle-button-submit:active {
	transform: translate(4px, 4px);
	box-shadow: none !important;
}

/* Casilla de privacidad. */
.hustle-ui.hustle-popup .hustle-checkbox.hustle-gdpr {
	display: flex !important;
	gap: 10px;
	align-items: flex-start;
	margin: 18px 0 0 !important;
	color: var(--vb-negro) !important;
	font: 500 0.875rem/1.4 var(--vb-fuente) !important;
	text-align: left;
}

.hustle-ui.hustle-popup .hustle-checkbox.hustle-gdpr > span:first-of-type {
	flex: none;
	width: 22px !important;
	height: 22px !important;
	margin: 0 !important;
	border: var(--vb-borde) solid var(--vb-negro) !important;
	border-radius: 6px !important;
	background: var(--vb-blanco) !important;
}

.hustle-ui.hustle-popup .hustle-checkbox.hustle-gdpr input:checked + span {
	background: var(--vb-amarillo) !important;
}

.hustle-ui.hustle-popup .hustle-checkbox.hustle-gdpr input:checked + span::before {
	color: var(--vb-negro) !important;
}

.hustle-ui.hustle-popup .hustle-checkbox.hustle-gdpr > span:last-child {
	padding: 0 !important;
	color: var(--vb-negro) !important;
	font: 500 0.875rem/1.4 var(--vb-fuente) !important;
}

.hustle-ui.hustle-popup .hustle-checkbox.hustle-gdpr a {
	color: var(--vb-negro) !important;
	font-weight: 700;
	text-decoration: underline !important;
}

.hustle-ui.hustle-popup .hustle-error-message {
	margin: 12px 0 0 !important;
	padding: 10px 12px !important;
	border: 2px solid var(--vb-rojo) !important;
	border-radius: 8px !important;
	background: var(--vb-blanco) !important;
}

.hustle-ui.hustle-popup .hustle-error-message p {
	color: var(--vb-rojo) !important;
	font: 600 0.9375rem/1.4 var(--vb-fuente) !important;
}

/* Cerrar: pieza blanca cuadrada en la esquina (Hustle la oculta con este diseño: se fuerza a verse). */
.hustle-ui.hustle-popup .hustle-button-close {
	position: absolute !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	top: -14px !important;
	right: -14px !important;
	z-index: 3;
	width: 42px !important;
	height: 42px !important;
	border: var(--vb-borde) solid var(--vb-negro) !important;
	border-radius: 10px !important;
	background: var(--vb-blanco) !important;
	box-shadow: 3px 3px 0 var(--vb-negro) !important;
	color: var(--vb-negro) !important;
}

.hustle-ui.hustle-popup .hustle-button-close .hustle-icon-close::before {
	color: var(--vb-negro) !important;
	font-size: 16px !important;
}

/* Después de apuntarse. */
.hustle-ui.hustle-popup .hustle-success {
	padding: 32px 26px !important;
	border: var(--vb-borde) solid var(--vb-negro) !important;
	border-radius: 16px !important;
	background: var(--vb-amarillo) !important;
	box-shadow: 8px 8px 0 var(--vb-negro) !important;
	color: var(--vb-negro) !important;
	text-align: center;
}

.hustle-ui.hustle-popup .hustle-success .hustle-icon-check::before {
	color: var(--vb-negro) !important;
}

.hustle-ui.hustle-popup .hustle-success-content,
.hustle-ui.hustle-popup .hustle-success-content p {
	color: var(--vb-negro) !important;
	font: 500 1.125rem/1.45 var(--vb-fuente) !important;
}

@media (max-width: 600px) {
	.hustle-ui.hustle-popup .hustle-image img {
		height: 96px !important;
	}

	.hustle-ui.hustle-popup :is(.hustle-content-wrap, .hustle-layout-form) {
		padding-right: 18px !important;
		padding-left: 18px !important;
	}

	.hustle-ui.hustle-popup .hustle-button-close {
		top: -12px !important;
		right: -8px !important;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.hustle-ui.hustle-popup .hustle-button-submit {
		transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
	}
}

/*
 * ---------- Aviso de cookies (inc/cookies.php + assets/js/cookies.js) ----------
 * Tarjeta abajo a la derecha, sin tapar el botón principal de la portada (en el móvil, a lo ancho), con el contorno y la sombra de la web. Aceptar y
 * Rechazar con el mismo peso; Configurar como enlace.
 */
.vb-cookies {
	position: fixed;
	right: 16px;
	bottom: 16px;
	/* Por encima de todo, también del popup del 10 % (Hustle usa z-index muy altos). */
	z-index: 2147483000;
	width: min(420px, calc(100% - 32px));
	padding: 18px 20px 16px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 14px;
	background: var(--vb-blanco);
	box-shadow: 6px 6px 0 var(--vb-negro);
	color: var(--vb-negro);
	font: 500 0.9375rem/1.45 var(--vb-fuente);
}

.vb-cookies[hidden],
.vb-cookies [hidden] {
	display: none !important;
}

.vb-cookies__titulo {
	margin: 0 0 6px;
	font: 800 1.25rem/1.15 var(--vb-fuente);
}

.vb-cookies__texto {
	margin: 0 0 14px;
}

.vb-cookies a {
	color: var(--vb-negro);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.vb-cookies__opciones {
	display: grid;
	gap: 10px;
	margin: 0 0 14px;
	padding: 12px;
	border: 2px solid var(--vb-negro);
	border-radius: 10px;
	background: #fffbe6;
}

.vb-cookies__opcion {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 0.875rem;
	cursor: pointer;
}

.vb-cookies__opcion input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var(--vb-negro);
}

.vb-cookies__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.vb-cookies .vb-cookies__boton {
	flex: 1 1 auto;
	min-height: 44px;
	padding: 8px 16px;
	border: var(--vb-borde) solid var(--vb-negro);
	border-radius: 10px;
	background: var(--vb-blanco);
	box-shadow: 3px 3px 0 var(--vb-negro);
	color: var(--vb-negro);
	font: 800 1rem/1.1 var(--vb-fuente);
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

.vb-cookies .vb-cookies__boton:hover,
.vb-cookies .vb-cookies__boton:focus-visible {
	background: var(--vb-amarillo);
	color: var(--vb-negro);
}

.vb-cookies .vb-cookies__boton--enlace {
	flex: 0 0 100%;
	min-height: 0;
	padding: 2px 0;
	border: 0;
	background: none;
	box-shadow: none;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vb-cookies .vb-cookies__boton--enlace:hover {
	background: none;
}

@media (max-width: 600px) {
	.vb-cookies {
		right: 10px;
		bottom: 10px;
		left: 10px;
		width: auto;
		padding: 14px 16px 12px;
		box-shadow: 4px 4px 0 var(--vb-negro);
	}
}