/**
 * Y&P Design — lo que theme.json no alcanza.
 *
 * Marcas de corte y de registro, franja CMYK, tarjetas, botón de WhatsApp,
 * secciones oscuras, hovers y movimiento reducido. Los colores, tipografías
 * y espaciados salen de los presets de theme.json (--wp--preset--*).
 */

:root {
	--yp-tinta: var(--wp--preset--color--tinta, #0e0f12);
	--yp-grafito: var(--wp--preset--color--grafito, #3a3d45);
	--yp-gris: var(--wp--preset--color--gris, #6b7080);
	--yp-linea: var(--wp--preset--color--linea, #e3e6ec);
	--yp-niebla: var(--wp--preset--color--niebla, #f2f4f7);
	--yp-papel: var(--wp--preset--color--papel, #fff);
	--yp-cian: var(--wp--preset--color--cian, #00aeef);
	--yp-magenta: var(--wp--preset--color--magenta, #ec008c);
	--yp-amarillo: var(--wp--preset--color--amarillo, #ffe600);
	--yp-whatsapp: var(--wp--preset--color--whatsapp, #25d366);
	--yp-radio: var(--wp--custom--radio, 6px);
	--yp-transicion: var(--wp--custom--transicion, 180ms cubic-bezier(0.2, 0.7, 0.2, 1));

	/* Marcas de corte: largo y separación desde el borde. */
	--yp-corte-largo: 12px;
	--yp-corte-aire: 10px;

	/* Color de las etiquetas técnicas; cambia en fondos niebla y oscuros. */
	--yp-etiqueta: var(--yp-gris);
	--yp-marca: var(--yp-tinta);
}

@media (max-width: 781px) {
	:root {
		--yp-corte-largo: 8px;
		--yp-corte-aire: 6px;
	}
}

/* ---------- Base ---------- */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Las marcas de corte salen del borde: que nunca generen scroll lateral. */
.wp-site-blocks {
	overflow-x: clip;
}

:where(h1, h2, h3, h4) {
	text-wrap: balance;
}

:where(p, li, figcaption) {
	text-wrap: pretty;
}

::selection {
	background: var(--yp-amarillo);
	color: var(--yp-tinta);
}

/* Las secciones con ancla no quedan tapadas por la cabecera fija. */
:where(.wp-site-blocks) [id] {
	scroll-margin-top: 6rem;
}

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

/* ---------- Foco visible ---------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--yp-magenta);
	outline-offset: 3px;
	border-radius: 2px;
}

:where(.has-tinta-background-color) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--yp-amarillo);
}

/* ---------- Enlaces: subrayado magenta que crece ---------- */

.wp-site-blocks a:where(:not(.wp-element-button)) {
	text-decoration-color: var(--yp-magenta);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.24em;
	transition: text-decoration-thickness var(--yp-transicion), text-underline-offset var(--yp-transicion);
}

.wp-site-blocks a:where(:not(.wp-element-button)):hover {
	text-decoration-thickness: 3px;
	text-underline-offset: 0.16em;
}

/* Menús: la raya magenta crece desde la izquierda. */
.wp-block-navigation .wp-block-navigation-item__content {
	background-image: linear-gradient(var(--yp-magenta), var(--yp-magenta));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 2px;
	padding-bottom: 2px;
	transition: background-size var(--yp-transicion);
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation [aria-current="page"] {
	background-size: 100% 2px;
}

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

.wp-element-button,
.wp-block-button__link {
	transition: transform var(--yp-transicion), box-shadow var(--yp-transicion), background-color var(--yp-transicion), color var(--yp-transicion);
}

/* Al pasar el cursor, un «desregistro»: la plancha magenta se corre. */
.wp-element-button:hover,
.wp-block-button__link:hover {
	box-shadow: 3px 3px 0 0 var(--yp-magenta);
	transform: translate(-1px, -1px);
}

.wp-element-button:active,
.wp-block-button__link:active {
	box-shadow: 0 0 0 0 var(--yp-magenta);
	transform: none;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--yp-tinta);
	border-color: var(--yp-tinta);
	color: var(--yp-papel);
}

/*
 * Botón de WhatsApp. Lo pinta el plugin yp-catalogo con [yp_whatsapp]; el
 * contrato es que el enlace lleve la clase `yp-boton-whatsapp`. Si no trae
 * su propio <svg>, el tema le pone el ícono.
 */
a.yp-boton-whatsapp,
.yp-boton-whatsapp {
	align-items: center;
	background: var(--yp-whatsapp);
	border: 1.5px solid var(--yp-whatsapp);
	border-radius: var(--yp-radio);
	color: var(--yp-tinta);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 600;
	gap: 0.55em;
	line-height: 1.2;
	padding: 0.8125rem 1.375rem;
	text-decoration: none;
	transition: transform var(--yp-transicion), box-shadow var(--yp-transicion), background-color var(--yp-transicion);
}

a.yp-boton-whatsapp:hover,
.yp-boton-whatsapp:hover {
	background: #3ee07b;
	border-color: #3ee07b;
	box-shadow: 3px 3px 0 0 var(--yp-tinta);
	color: var(--yp-tinta);
	transform: translate(-1px, -1px);
}

.yp-boton-whatsapp svg {
	flex: none;
	height: 1.25em;
	width: 1.25em;
}

.yp-boton-whatsapp:not(:has(svg, img))::before {
	background: currentColor;
	content: "";
	flex: none;
	height: 1.25em;
	-webkit-mask: url(../iconos/whatsapp.svg) center / contain no-repeat;
	mask: url(../iconos/whatsapp.svg) center / contain no-repeat;
	width: 1.25em;
}

.has-tinta-background-color a.yp-boton-whatsapp:hover,
.has-tinta-background-color .yp-boton-whatsapp:hover {
	box-shadow: 3px 3px 0 0 var(--yp-magenta);
}

/*
 * Mientras no haya número, el plugin cambia el botón por un enlace a
 * Contacto (.yp-wa--sin-numero) con el estilo del botón principal: tinta con
 * texto blanco. En las secciones oscuras eso desaparece sobre el fondo tinta,
 * así que ahí se invierte: papel con texto tinta.
 */
.has-tinta-background-color .yp-wa--sin-numero:not(.yp-wa--enlace),
.has-tinta-background-color .yp-wa--sin-numero:not(.yp-wa--enlace):visited {
	background: var(--yp-papel);
	color: var(--yp-tinta);
}

.has-tinta-background-color .yp-wa--sin-numero:not(.yp-wa--enlace):hover {
	background: var(--yp-linea);
	color: var(--yp-tinta);
}

/* El plugin pinta su foco con --yp-foco: en lo oscuro va amarillo, como el del tema. */
.has-tinta-background-color {
	--yp-foco: var(--yp-amarillo);
}

/* «Desde» del precio: el gris no llega a AA sobre tinta. */
.has-tinta-background-color .yp-precio__desde {
	color: var(--yp-linea);
}

/* El bloque Shortcode no debe sumar márgenes alrededor del botón. */
.yp-acciones > p:empty,
.yp-cabecera__acciones > p:empty {
	display: none;
}

/* ---------- Etiquetas técnicas (JetBrains Mono) ---------- */

.is-style-etiqueta,
.yp-etiqueta {
	color: var(--yp-etiqueta);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.5;
	text-transform: uppercase;
}

/* Rótulo de sección con la marca de registro delante. */
.yp-kicker {
	align-items: center;
	display: flex;
	gap: 0.6em;
}

.yp-kicker::before {
	background: var(--yp-magenta);
	content: "";
	flex: none;
	height: 1.15em;
	-webkit-mask: url(../marcas/registro.svg) center / contain no-repeat;
	mask: url(../marcas/registro.svg) center / contain no-repeat;
	width: 1.15em;
}

/* En niebla, el gris no llega a AA con letra pequeña: pasa a grafito. */
.has-niebla-background-color {
	--yp-etiqueta: var(--yp-grafito);
}

/* ---------- Secciones oscuras ---------- */

.has-tinta-background-color {
	--yp-etiqueta: var(--yp-linea);
	--yp-marca: var(--yp-linea);
}

.has-tinta-background-color .wp-block-site-logo img {
	filter: invert(1);
}

.has-tinta-background-color .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background: var(--yp-papel);
	border-color: var(--yp-papel);
	color: var(--yp-tinta);
}

.has-tinta-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--yp-papel);
	border-color: var(--yp-papel);
	color: var(--yp-tinta);
}

.has-tinta-background-color .wp-block-separator:not(.is-style-franja-cmyk) {
	color: var(--yp-grafito);
}

/* ---------- Marcas de corte ---------- */

.is-style-corte,
.yp-corte {
	position: relative;
}

.is-style-corte::before,
.yp-corte::before {
	--l: var(--yp-corte-largo);
	--d: calc(var(--yp-corte-largo) + var(--yp-corte-aire));
	--m: linear-gradient(var(--yp-marca), var(--yp-marca));
	background:
		var(--m) left 0 top var(--d) / var(--l) 1px no-repeat,
		var(--m) left var(--d) top 0 / 1px var(--l) no-repeat,
		var(--m) right 0 top var(--d) / var(--l) 1px no-repeat,
		var(--m) right var(--d) top 0 / 1px var(--l) no-repeat,
		var(--m) left 0 bottom var(--d) / var(--l) 1px no-repeat,
		var(--m) left var(--d) bottom 0 / 1px var(--l) no-repeat,
		var(--m) right 0 bottom var(--d) / var(--l) 1px no-repeat,
		var(--m) right var(--d) bottom 0 / 1px var(--l) no-repeat;
	content: "";
	inset: calc(-1 * var(--d));
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.wp-block-image.is-style-corte img,
.wp-block-post-featured-image.is-style-corte img {
	border-radius: 0;
}

/* ---------- Franja CMYK (estilo del bloque Separador) ---------- */

.wp-block-separator.is-style-franja-cmyk {
	--yp-franja-linea: var(--yp-linea);
	background:
		linear-gradient(var(--yp-cian), var(--yp-cian)) 0 0 / 12px 12px no-repeat,
		linear-gradient(var(--yp-magenta), var(--yp-magenta)) 16px 0 / 12px 12px no-repeat,
		linear-gradient(var(--yp-amarillo), var(--yp-amarillo)) 32px 0 / 12px 12px no-repeat,
		linear-gradient(var(--yp-franja-linea), var(--yp-franja-linea)) 56px 50% / calc(100% - 56px) 1px no-repeat;
	border: 0;
	height: 12px;
	opacity: 1;
	width: 100%;
}

.has-tinta-background-color .wp-block-separator.is-style-franja-cmyk {
	--yp-franja-linea: var(--yp-grafito);
}

/* Cabecera, contenido y pie van pegados: el ritmo lo ponen las secciones. */
.wp-site-blocks > main,
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

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

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

@media (max-width: 600px) {
	.wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

.yp-cabecera {
	border-bottom: 1px solid var(--yp-linea);
}

.yp-cabecera .yp-boton-whatsapp,
.yp-cabecera .yp-wa {
	min-height: 0;
	font-size: 0.9375rem;
	padding: 0.625rem 1rem;
}

@media (max-width: 599px) {
	/* En el teléfono: logo · WhatsApp · menú. */
	.yp-cabecera__acciones .wp-block-navigation {
		order: 2;
	}

	.yp-cabecera .wp-block-site-logo img {
		max-width: 104px;
	}
}

/* Logo en texto mientras no haya imagen de logo. */
.yp-marca-texto {
	align-items: baseline;
	color: inherit;
	display: inline-flex;
	gap: 0.45em;
	text-decoration: none;
	white-space: nowrap;
}

.wp-site-blocks .yp-marca-texto {
	text-decoration: none;
}

.yp-marca-texto__siglas {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.625rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
}

.yp-marca-texto__nombre {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.yp-marca-texto__nombre::after {
	background:
		linear-gradient(var(--yp-cian), var(--yp-cian)) 0 0 / 6px 6px no-repeat,
		linear-gradient(var(--yp-magenta), var(--yp-magenta)) 8px 0 / 6px 6px no-repeat,
		linear-gradient(var(--yp-amarillo), var(--yp-amarillo)) 16px 0 / 6px 6px no-repeat;
	content: "";
	display: inline-block;
	height: 6px;
	margin-left: 0.6em;
	width: 22px;
}

/* ---------- Encabezados de sección ---------- */

.yp-cabeza-pagina .wp-block-post-title,
.yp-cabeza-pagina .wp-block-query-title {
	margin-top: 0;
}

/* ---------- Portada ---------- */

.yp-hero__titular {
	max-width: 11.5em;
}

.yp-hero__titular mark {
	background: none;
}

.yp-hero__bajada {
	color: var(--yp-grafito);
	max-width: 34em;
}

/* El pliego: una hoja niebla con marcas de corte, registro y franja. */
.yp-pliego {
	/* Fondo niebla: la etiqueta del pie del pliego va en grafito (el gris da 4,48:1). */
	--yp-etiqueta: var(--yp-grafito);
	background: var(--yp-niebla);
	padding: clamp(1rem, 0.4rem + 2.4vw, 2rem);
	position: relative;
}

.yp-pliego::after {
	--r: 18px;
	--fuera: calc(var(--yp-corte-largo) + var(--yp-corte-aire) + 6px);
	background:
		url(../marcas/registro.svg) center top / var(--r) var(--r) no-repeat,
		url(../marcas/registro.svg) center bottom / var(--r) var(--r) no-repeat,
		url(../marcas/registro.svg) left center / var(--r) var(--r) no-repeat,
		url(../marcas/registro.svg) right center / var(--r) var(--r) no-repeat;
	content: "";
	inset: calc(-1 * var(--fuera));
	pointer-events: none;
	position: absolute;
}

@media (max-width: 781px) {
	/* En pantallas angostas solo quedan los registros de arriba y abajo. */
	.yp-pliego::after {
		background:
			url(../marcas/registro.svg) center top / var(--r) var(--r) no-repeat,
			url(../marcas/registro.svg) center bottom / var(--r) var(--r) no-repeat;
	}
}

.yp-pieza {
	--yp-corte-largo: 8px;
	--yp-corte-aire: 5px;
	--yp-marca: var(--yp-gris);
	--yp-etiqueta: var(--yp-gris);
	background: var(--yp-papel);
	padding: 0.75rem 0.75rem 0.875rem;
}

.yp-pieza .wp-block-image {
	margin: 0;
}

.yp-pieza img {
	aspect-ratio: 1;
	display: block;
	object-fit: contain;
	width: 100%;
}

.yp-pieza .is-style-etiqueta {
	font-size: 0.6875rem;
	text-align: center;
}

.yp-pliego__pie {
	margin-top: var(--wp--preset--spacing--40);
}

.yp-pliego__pie .wp-block-separator {
	flex: 1 1 auto;
	margin: 0;
	width: auto;
}

.yp-pliego__pie .is-style-etiqueta {
	flex: none;
	font-size: 0.6875rem;
	margin: 0;
}

/* ---------- Tarjetas ---------- */

.yp-tarjeta {
	--yp-corte-largo: 8px;
	--yp-corte-aire: 5px;
	background: var(--yp-papel);
	border: 1px solid var(--yp-linea);
	border-radius: var(--yp-radio);
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.25rem 1.25rem 1.5rem;
	position: relative;
	transition: transform var(--yp-transicion), border-color var(--yp-transicion), box-shadow var(--yp-transicion);
}

/* Al pasar el cursor, la tarjeta sube un poco y aparece la franja de proceso arriba. */
.yp-tarjeta::after {
	background:
		linear-gradient(90deg, var(--yp-cian) 0 33.33%, var(--yp-magenta) 33.33% 66.66%, var(--yp-amarillo) 66.66% 100%);
	border-radius: var(--yp-radio) var(--yp-radio) 0 0;
	content: "";
	height: 3px;
	left: -1px;
	position: absolute;
	right: -1px;
	top: -1px;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--yp-transicion);
}

.yp-tarjeta:hover,
.yp-tarjeta:focus-within {
	border-color: var(--yp-tinta);
	box-shadow: var(--wp--preset--shadow--leve);
	transform: translateY(-4px);
}

.yp-tarjeta:hover::after,
.yp-tarjeta:focus-within::after {
	transform: scaleX(1);
}

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

.yp-tarjeta > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

.yp-tarjeta .yp-tarjeta__imagen {
	background: var(--yp-niebla);
	margin-bottom: var(--wp--preset--spacing--30);
}

.yp-tarjeta .yp-tarjeta__imagen img {
	aspect-ratio: 1;
	display: block;
	object-fit: contain;
	width: 100%;
}

.yp-tarjeta h3,
.yp-tarjeta .wp-block-post-title {
	font-size: var(--wp--preset--font-size--grande);
}

.yp-tarjeta__texto {
	color: var(--yp-grafito);
	font-size: var(--wp--preset--font-size--pequeno);
}

/* El enlace de la tarjeta la cubre entera (un solo enlace, un solo nombre). */
.yp-tarjeta__enlace {
	font-weight: 600;
	margin-top: auto !important;
	padding-top: var(--wp--preset--spacing--30);
}

.yp-tarjeta__enlace a::after {
	content: "";
	inset: 0;
	position: absolute;
	z-index: 2;
}

.yp-tarjeta__enlace a::before {
	content: "→ ";
}

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

.yp-paso {
	border-top: 1px solid var(--yp-tinta);
	padding-top: var(--wp--preset--spacing--40);
	position: relative;
}

.yp-paso__numero {
	background: var(--yp-papel);
	border: 1px solid var(--yp-linea);
	border-radius: 999px;
	display: inline-block;
	padding: 0.2em 0.75em;
}

.yp-paso:nth-child(1)::before,
.yp-paso:nth-child(2)::before,
.yp-paso:nth-child(3)::before {
	content: "";
	height: 3px;
	left: 0;
	position: absolute;
	top: -2px;
	width: 48px;
}

.yp-paso:nth-child(1)::before { background: var(--yp-cian); }
.yp-paso:nth-child(2)::before { background: var(--yp-magenta); }
.yp-paso:nth-child(3)::before { background: var(--yp-amarillo); }

/* ---------- Listas con cuadritos de proceso ---------- */

.yp-lista-cmyk {
	list-style: none;
	padding-left: 0;
}

.yp-lista-cmyk li {
	padding-left: 1.6em;
	position: relative;
}

.yp-lista-cmyk li + li {
	margin-top: 0.4em;
}

.yp-lista-cmyk li::before {
	background: var(--yp-cian);
	content: "";
	height: 0.55em;
	left: 0.2em;
	position: absolute;
	top: 0.55em;
	width: 0.55em;
}

.yp-lista-cmyk li:nth-child(3n + 2)::before { background: var(--yp-magenta); }
.yp-lista-cmyk li:nth-child(3n + 3)::before { background: var(--yp-amarillo); }

/* ---------- Orden de producción (Para empresas) ---------- */

.yp-orden {
	background: var(--yp-papel);
	border: 1px solid var(--yp-tinta);
	padding: clamp(1.25rem, 0.8rem + 1.8vw, 2rem);
}

.yp-orden__cabeza {
	border-bottom: 1px solid var(--yp-tinta);
	padding-bottom: var(--wp--preset--spacing--30);
}

.yp-orden__cabeza .is-style-etiqueta {
	color: var(--yp-tinta);
	margin: 0;
}

.yp-orden__numero {
	color: var(--yp-gris) !important;
}

.yp-orden__filas {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 0;
}

.yp-orden__filas li {
	border-bottom: 1px dashed var(--yp-linea);
	display: grid;
	gap: 1rem;
	grid-template-columns: 7.5rem 1fr;
	padding: 0.8rem 0;
}

.yp-orden__filas strong {
	color: var(--yp-gris);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	padding-top: 0.2em;
	text-transform: uppercase;
}

@media (max-width: 480px) {
	.yp-orden__filas li {
		gap: 0.15rem;
		grid-template-columns: 1fr;
	}
}

/* ---------- Galería ---------- */

.yp-galeria.wp-block-gallery.has-nested-images {
	--wp--style--unstable-gallery-gap: var(--wp--preset--spacing--50);
	gap: var(--wp--preset--spacing--50);
}

@media (max-width: 599px) {
	.yp-galeria.wp-block-gallery.has-nested-images {
		--wp--style--unstable-gallery-gap: var(--wp--preset--spacing--30);
		gap: var(--wp--preset--spacing--30);
	}
}

.yp-galeria.wp-block-gallery.has-nested-images figure.wp-block-image {
	background: var(--yp-papel);
	box-sizing: border-box;
	flex-direction: column;
	overflow: visible;
	padding: 0.75rem;
}

.yp-galeria.wp-block-gallery.has-nested-images figure.wp-block-image img {
	aspect-ratio: 1;
	flex: none;
	height: auto;
	object-fit: contain;
	width: 100%;
}

.yp-galeria.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	background: none;
	bottom: auto;
	color: var(--yp-grafito);
	margin: 0.5rem 0 0;
	max-height: none;
	overflow: visible;
	padding: 0;
	position: static;
	text-align: left;
	text-shadow: none;
}

.yp-galeria.wp-block-gallery.has-nested-images figure.wp-block-image::before {
	display: none;
}

/* ---------- Preguntas frecuentes ---------- */

.wp-block-details {
	border-top: 1px solid var(--yp-linea);
}

.yp-preguntas .wp-block-details:last-child {
	border-bottom: 1px solid var(--yp-linea);
}

.wp-block-details > summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--mediano);
	font-weight: 600;
	gap: 1rem;
	justify-content: space-between;
	letter-spacing: -0.01em;
	line-height: 1.3;
	list-style: none;
}

.wp-block-details > summary::-webkit-details-marker {
	display: none;
}

/* Un «+» dibujado que se vuelve «−» al abrir. */
.wp-block-details > summary::after {
	background:
		linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
	border: 1px solid var(--yp-linea);
	border-radius: 999px;
	content: "";
	flex: none;
	height: 2rem;
	transition: transform var(--yp-transicion), background-color var(--yp-transicion);
	width: 2rem;
}

.wp-block-details[open] > summary::after {
	background:
		linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
		var(--yp-amarillo);
	border-color: var(--yp-amarillo);
}

.wp-block-details > summary:hover::after {
	border-color: var(--yp-tinta);
}

.wp-block-details > :not(summary) {
	color: var(--yp-grafito);
	max-width: 40em;
}

/* ---------- Llamado a WhatsApp ---------- */

.yp-cta .yp-cta__tintas img {
	margin-inline: auto;
	max-width: 380px;
	width: 100%;
}

.yp-cta .has-mediano-font-size {
	color: var(--yp-linea);
	max-width: 32em;
}

@media (max-width: 781px) {
	.yp-cta .yp-cta__arte {
		order: -1;
	}

	.yp-cta .yp-cta__tintas img {
		max-width: 180px;
		margin-inline: 0;
	}
}

/* ---------- Pie de página ---------- */

.yp-pie .wp-block-site-logo img,
.yp-pie .yp-marca-texto {
	margin-bottom: var(--wp--preset--spacing--20);
}

.yp-pie__lema {
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	max-width: 14em;
}

.yp-pie .wp-block-navigation {
	font-size: var(--wp--preset--font-size--pequeno);
}

.yp-pie__base {
	border-top: 1px solid var(--yp-grafito);
	color: var(--yp-linea);
	font-size: var(--wp--preset--font-size--diminuto);
}

.yp-pie__base > * {
	margin: 0;
}

.yp-contacto {
	font-size: var(--wp--preset--font-size--pequeno);
}

.yp-contacto__lista,
.yp-contacto__redes {
	list-style: none;
	margin: 0;
	padding: 0;
}

.yp-contacto__lista li + li {
	margin-top: 0.75rem;
}

.yp-contacto__rotulo {
	color: var(--yp-etiqueta);
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.yp-contacto__redes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin-top: 1.25rem;
}

.yp-contacto--vacio {
	color: var(--yp-linea);
	max-width: 22em;
}

/* ---------- Buscador ---------- */

.yp-buscador .wp-block-search__input {
	border: 1.5px solid var(--yp-tinta);
	border-radius: var(--yp-radio);
	font-size: var(--wp--preset--font-size--pequeno);
	padding: 0.75rem 1rem;
}

.yp-buscador .wp-block-search__inside-wrapper {
	gap: 0.5rem;
	max-width: 560px;
}

/* ---------- Blog y paginación ---------- */

.wp-block-query-pagination a {
	text-decoration: none;
}

.wp-block-query-pagination-numbers .page-numbers {
	border-radius: var(--yp-radio);
	display: inline-block;
	min-width: 2.25em;
	padding: 0.4em 0.6em;
	text-align: center;
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--yp-tinta);
	color: var(--yp-papel);
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}

	.yp-tarjeta:hover,
	.yp-tarjeta:focus-within,
	.wp-element-button:hover,
	.wp-block-button__link:hover,
	.yp-boton-whatsapp:hover {
		transform: none;
	}
}