/*
Theme Name: Klektik
Theme URI: https://klektik.com/
Author: Gonzalo Arena
Author URI: https://klektik.com/quien-escribe/
Description: Tema de bloques para Klektik, medio digital independiente uruguayo. Vector plano, bordes duros, siete patrones de azulejo generados en SVG, uno por sección. Sin dependencias externas, sin JavaScript.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: klektik
Tags: blog, news, block-patterns, full-site-editing, accessibility-ready
*/

/* ==========================================================================
   Klektik — hoja corta. Todo lo que se pueda definir en theme.json vive allá.
   Acá queda solamente lo que theme.json no alcanza a describir:
   el mapa de acentos por sección, las franjas de patrón, el índice denso,
   la cabecera pegajosa, el menú sin JavaScript y la barra de progreso.
   Nada de !important.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Mapa de acentos
   Una sola clase sirve para el <body> (archivo y artículo) y para cualquier
   bloque suelto (los siete bloques de sección de la home). Agregar una
   sección nueva es agregar acá tres líneas. Ver el README.
   -------------------------------------------------------------------------- */
.k-acento--idiomas {
	--k-acento: var(--wp--preset--color--verde);
	--k-patron: var(--wp--custom--patron--idiomas);
	--k-sobre-acento: var(--wp--preset--color--crema);
}
.k-acento--marketing {
	--k-acento: var(--wp--preset--color--bermellon);
	--k-patron: var(--wp--custom--patron--marketing);
	--k-sobre-acento: var(--wp--preset--color--crema);
}
.k-acento--musica {
	--k-acento: var(--wp--preset--color--amarillo);
	--k-patron: var(--wp--custom--patron--musica);
	--k-sobre-acento: var(--wp--preset--color--tinta);
}
.k-acento--poesia {
	--k-acento: var(--wp--preset--color--terracota);
	--k-patron: var(--wp--custom--patron--poesia);
	--k-sobre-acento: var(--wp--preset--color--crema);
}
.k-acento--arte-visual {
	--k-acento: var(--wp--preset--color--terracota);
	--k-patron: var(--wp--custom--patron--arte-visual);
	--k-sobre-acento: var(--wp--preset--color--crema);
}
.k-acento--comunicacion {
	--k-acento: var(--wp--preset--color--ultramar);
	--k-patron: var(--wp--custom--patron--comunicacion);
	--k-sobre-acento: var(--wp--preset--color--crema);
}
.k-acento--periodismo-cultural {
	--k-acento: var(--wp--preset--color--ultramar);
	--k-patron: var(--wp--custom--patron--periodismo-cultural);
	--k-sobre-acento: var(--wp--preset--color--crema);
}

/* Valor de arranque, por si una página no tiene sección asignada. */
body {
	--k-acento: var(--wp--preset--color--petroleo);
	--k-patron: none;
	--k-sobre-acento: var(--wp--preset--color--crema);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
html {
	scroll-behavior: auto;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-variation-settings: "opsz" 14;
}

h1, h2, h3,
.wp-block-post-title,
.wp-block-site-title {
	font-variation-settings: "opsz" 48;
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* Foco visible en petróleo, el color de interfaz, en todo el sitio. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--petroleo);
	outline-offset: 2px;
}

/* Metadatos en monoespaciada: fecha, sección, autor, tiempo de lectura. */
.k-meta,
.k-meta a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.3;
}

.k-meta {
	color: var(--wp--preset--color--tinta);
}

.k-meta a {
	text-decoration: none;
}

.k-meta a:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   3. Cabecera
   -------------------------------------------------------------------------- */
.k-cabecera {
	position: sticky;
	top: 0;
	z-index: 20;
	background-color: var(--wp--preset--color--crema);
	border-bottom: 1px solid var(--wp--preset--color--tinta);
}

.k-marca {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
}

.k-marca__nodo {
	display: block;
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
}

.k-marca__texto {
	font-weight: 800;
	font-size: 1.5rem;
	letter-spacing: -0.03em;
	font-variation-settings: "opsz" 48;
	color: var(--wp--preset--color--tinta);
}

/* --------------------------------------------------------------------------
   4. Navegación de secciones, sin JavaScript
   En escritorio el <summary> se esconde y la lista se muestra siempre.
   En móvil funciona el plegado nativo de <details>. Cero scripts.
   -------------------------------------------------------------------------- */
.k-cabecera__fila {
	gap: 1rem;
}

.k-nav {
	width: 100%;
}

.k-nav__boton {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.6rem 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-top: 1px solid var(--wp--preset--color--tinta);
}

.k-nav__boton::-webkit-details-marker {
	display: none;
}

.k-nav__boton::after {
	content: "+";
	font-size: 1.2em;
	line-height: 1;
}

.k-nav[open] > .k-nav__boton::after {
	content: "–";
}

.k-nav__lista {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.1rem 1rem;
	margin: 0 0 0.8rem;
	padding: 0;
	list-style: none;
}

.k-nav__lista li {
	margin: 0;
}

.k-nav__lista a {
	display: block;
	padding: 0.45rem 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--tinta);
	border-bottom: 1px solid transparent;
}

.k-nav__lista a:hover,
.k-nav__lista a[aria-current="page"] {
	color: var(--wp--preset--color--petroleo);
	border-bottom-color: var(--wp--preset--color--petroleo);
}

@media (min-width: 900px) {
	/* En escritorio la cabecera entra en una sola línea: marca, secciones
	   y buscador. El <summary> se esconde y la lista se muestra siempre. */
	.k-cabecera__fila {
		flex-wrap: nowrap;
	}

	.k-nav {
		width: auto;
		flex: 1 1 auto;
		min-width: 0;
	}

	.k-nav__boton {
		display: none;
	}

	.k-nav__lista {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: 0 1.1rem;
		margin: 0;
	}

	.k-nav__lista a {
		padding: 0.2rem 0;
		letter-spacing: 0.06em;
	}

	.k-buscador {
		flex: 0 0 auto;
	}

	.k-buscador .wp-block-search__input {
		width: 8.5rem;
	}
}

/* Buscador de la cabecera, en petróleo. */
.k-buscador .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--petroleo);
	border-radius: 0;
	background-color: transparent;
	padding: 0.5rem 0.7rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--tinta);
}

.k-buscador .wp-block-search__button {
	border-radius: 0;
	border: 1px solid var(--wp--preset--color--petroleo);
	background-color: var(--wp--preset--color--petroleo);
	color: var(--wp--preset--color--crema);
}

/* --------------------------------------------------------------------------
   5. Franjas de patrón
   Separador horizontal de 80 px entre secciones, con el nombre encima.
   -------------------------------------------------------------------------- */
.k-franja {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--wp--custom--franja--alto);
	background-image: var(--k-patron);
	background-repeat: repeat;
	border-top: 1px solid var(--wp--preset--color--tinta);
	border-bottom: 1px solid var(--wp--preset--color--tinta);
}

.k-franja__nombre {
	display: inline-block;
	margin: 0;
	padding: 0.55rem 1.1rem;
	background-color: var(--wp--preset--color--crema);
	border: 1px solid var(--wp--preset--color--tinta);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tinta);
	text-decoration: none;
}

a.k-franja__nombre:hover {
	background-color: var(--wp--preset--color--tinta);
	color: var(--wp--preset--color--crema);
}

/* Separador liso entre secciones, sin texto. */
.k-franja--lisa {
	min-height: var(--wp--custom--franja--alto);
}

/* --------------------------------------------------------------------------
   6. Etiqueta de sección
   -------------------------------------------------------------------------- */
.k-etiqueta,
.k-etiqueta a {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
}

.k-etiqueta {
	padding: 0.35rem 0.75rem;
	background-color: var(--k-acento);
	color: var(--k-sobre-acento);
}

.k-etiqueta a {
	color: inherit;
}

/* El bloque de términos de WordPress adopta la misma pinta. */
.k-etiqueta .wp-block-post-terms__separator {
	display: none;
}

/* --------------------------------------------------------------------------
   7. Índice denso
   Tipografía chica, mucha fila, metadatos en monoespaciada. No es una grilla
   de tarjetas: es una lista, a la manera de una base de datos musical.
   -------------------------------------------------------------------------- */
.k-indice .wp-block-post-template {
	display: block;
	margin: 0;
	padding: 0;
	gap: 0;
}

.k-indice .wp-block-post {
	display: grid;
	grid-template-columns: var(--wp--custom--miniatura--lado) minmax(0, 1fr);
	gap: 0 1rem;
	align-items: start;
	padding: 0.9rem 0;
	border-bottom: 1px solid rgba(18, 17, 16, 0.18);
}

.k-indice .wp-block-post:last-child {
	border-bottom: 1px solid var(--wp--preset--color--tinta);
}

.k-indice__portada {
	grid-row: span 3;
	width: var(--wp--custom--miniatura--lado);
}

.k-indice__portada img,
.k-indice__portada .wp-block-post-featured-image img {
	display: block;
	width: var(--wp--custom--miniatura--lado);
	height: var(--wp--custom--miniatura--lado);
	object-fit: cover;
}

.k-indice .wp-block-post-title {
	margin: 0 0 0.25rem;
	font-size: var(--wp--preset--font-size--chico);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	font-variation-settings: "opsz" 14;
}

.k-indice .wp-block-post-title a {
	color: var(--wp--preset--color--tinta);
	text-decoration: none;
}

.k-indice .wp-block-post-title a:hover {
	color: var(--wp--preset--color--petroleo);
	text-decoration: underline;
}

.k-indice .wp-block-post-excerpt {
	margin: 0 0 0.35rem;
}

.k-indice .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	font-size: var(--wp--preset--font-size--chico);
	line-height: 1.4;
	color: rgba(18, 17, 16, 0.78);
}

.k-indice .wp-block-post-excerpt__more-text {
	display: none;
}

.k-indice__pie {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1rem;
}

@media (max-width: 600px) {
	.k-indice .wp-block-post {
		grid-template-columns: 64px minmax(0, 1fr);
	}

	.k-indice__portada,
	.k-indice__portada img,
	.k-indice__portada .wp-block-post-featured-image img {
		width: 64px;
		height: 64px;
	}
}

/* --------------------------------------------------------------------------
   8. Portada de respaldo
   Cuando un artículo no tiene imagen propia, la portada es el patrón de su
   sección. Lo inyecta inc/portadas.php sobre el bloque de imagen destacada.
   -------------------------------------------------------------------------- */
.k-portada-patron {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	background-image: var(--k-patron);
	background-repeat: repeat;
	border: 1px solid var(--wp--preset--color--tinta);
}

.k-indice__portada .k-portada-patron {
	aspect-ratio: 1 / 1;
	width: var(--wp--custom--miniatura--lado);
	height: var(--wp--custom--miniatura--lado);
	background-size: 32px auto;
}

@media (max-width: 600px) {
	.k-indice__portada .k-portada-patron {
		width: 64px;
		height: 64px;
	}
}

/* Lema de la portada. Es el h1 de la home, y se trata como un metadato:
   chico y al tope, para que el destacado siga siendo lo primero que se ve. */
h1.k-lema {
	max-width: 54ch;
	margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tinta);
}

/* --------------------------------------------------------------------------
   9. Destacado de portada
   Banda del acento de la sección, título grande sobre crema.
   -------------------------------------------------------------------------- */
.k-destacado {
	border-top: 1px solid var(--wp--preset--color--tinta);
	border-bottom: 1px solid var(--wp--preset--color--tinta);
}

.k-destacado__banda {
	height: 14px;
	background-color: var(--k-acento);
}

.k-destacado__cuerpo {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	padding-block: var(--wp--preset--spacing--40);
}

.k-destacado .wp-block-post-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--enorme);
	line-height: 1.02;
}

.k-destacado .wp-block-post-title a {
	color: var(--wp--preset--color--tinta);
	text-decoration: none;
}

.k-destacado .wp-block-post-title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
}

.k-destacado__portada img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 900px) {
	.k-destacado__cuerpo {
		grid-template-columns: 1.1fr 0.9fr;
		gap: var(--wp--preset--spacing--40);
	}

	/* En escritorio la portada va a la derecha; en móvil, arriba. */
	.k-destacado__texto {
		order: 1;
	}

	.k-destacado__portada {
		order: 2;
	}
}

/* --------------------------------------------------------------------------
   10. Cabecera de archivo, color pleno con su patrón
   -------------------------------------------------------------------------- */
.k-cabecera-archivo {
	background-color: var(--k-acento);
	border-bottom: 1px solid var(--wp--preset--color--tinta);
}

h1.k-cabecera-archivo__titulo {
	margin-block: 0;
	padding-block: var(--wp--preset--spacing--40);
	color: var(--k-sobre-acento);
	font-size: var(--wp--preset--font-size--enorme);
}

.k-cabecera-archivo__patron {
	height: var(--wp--custom--franja--alto);
	background-image: var(--k-patron);
	background-repeat: repeat;
	border-top: 1px solid var(--wp--preset--color--tinta);
}

/* La bajada de la sección nunca va sobre el color: va abajo, sobre crema. */
.k-cabecera-archivo__bajada {
	max-width: 46rem;
	margin-block: var(--wp--preset--spacing--30);
	margin-inline: 0;
}

/* --------------------------------------------------------------------------
   11. Artículo
   -------------------------------------------------------------------------- */
.k-articulo .wp-block-post-title {
	margin-block: 0.6rem 0.8rem;
}

.k-bajada {
	font-size: var(--wp--preset--font-size--medio);
	line-height: 1.35;
	font-weight: 400;
	margin-block: 0 1.2rem;
	color: rgba(18, 17, 16, 0.85);
}

/* Bloque de resumen citable: dos o tres oraciones al inicio del artículo.
   Marcado con clase propia para que un modelo de lenguaje lo tome entero. */
.k-resumen {
	margin-block: var(--wp--preset--spacing--30);
	padding: 1.1rem 1.3rem;
	border: 1px solid var(--wp--preset--color--tinta);
	border-left-width: 6px;
	border-left-color: var(--k-acento);
	background-color: transparent;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.5;
}

.k-resumen > p:last-child {
	margin-bottom: 0;
}

.k-resumen__rotulo {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.k-ficha {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.2rem;
	padding-block: 0.8rem;
	border-top: 1px solid var(--wp--preset--color--tinta);
	border-bottom: 1px solid var(--wp--preset--color--tinta);
}

.k-articulo .wp-block-post-content > p,
.k-articulo .wp-block-post-content > ul,
.k-articulo .wp-block-post-content > ol {
	max-width: 68ch;
}

.k-articulo .wp-block-post-content h2 {
	margin-top: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--medio);
}

.k-articulo .wp-block-post-content h3 {
	margin-top: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--base);
	text-transform: none;
}

/* Bloque de autor al pie del artículo. */
.k-autor {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 1rem;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--tinta);
}

.k-autor img {
	width: 72px;
	height: 72px;
	object-fit: cover;
}

.k-autor__credenciales {
	margin-block: 0.4rem 0 0;
	font-size: var(--wp--preset--font-size--chico);
	line-height: 1.5;
}

/* Relacionados: tres de la misma sección. */
.k-relacionados .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--wp--preset--spacing--30);
}

.k-relacionados .wp-block-post-title {
	font-size: var(--wp--preset--font-size--chico);
	line-height: 1.25;
}

.k-relacionados .wp-block-post-title a {
	color: var(--wp--preset--color--tinta);
	text-decoration: none;
}

.k-relacionados .wp-block-post-title a:hover {
	text-decoration: underline;
}

/* Migas de pan. */
.k-migas {
	padding-block: 0.8rem;
}

.k-migas ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.k-migas li::after {
	content: "/";
	margin-left: 0.5rem;
	color: rgba(18, 17, 16, 0.5);
}

.k-migas li:last-child::after {
	content: "";
}

/* --------------------------------------------------------------------------
   12. Barra de progreso de lectura
   CSS scroll-driven animations. Sin soporte no se muestra, y listo.
   -------------------------------------------------------------------------- */
.k-progreso {
	display: none;
}

@supports (animation-timeline: scroll()) {
	.k-progreso {
		display: block;
		position: fixed;
		inset-block-start: 0;
		inset-inline-start: 0;
		z-index: 30;
		width: 100%;
		height: var(--wp--custom--progreso--alto);
		background-color: var(--k-acento);
		transform-origin: 0 50%;
		scale: 0 1;
		animation: k-progreso-avance linear both;
		animation-timeline: scroll(root block);
	}

	@keyframes k-progreso-avance {
		from { scale: 0 1; }
		to   { scale: 1 1; }
	}
}

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

/* --------------------------------------------------------------------------
   13. Pie
   -------------------------------------------------------------------------- */
.k-pie {
	margin-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--tinta);
	background-color: var(--wp--preset--color--crema);
}

.k-pie a {
	color: var(--wp--preset--color--petroleo);
}

.k-pie__columnas {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--40);
}

@media (min-width: 780px) {
	.k-pie__columnas {
		grid-template-columns: 1.2fr 1fr 1.2fr;
	}
}

.k-pie__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.k-pie__lista li {
	margin: 0 0 0.4rem;
}

.k-pie__lista a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
}

.k-pie__lista a:hover {
	text-decoration: underline;
}

.k-pie__legal {
	padding-block: 1rem;
	border-top: 1px solid rgba(18, 17, 16, 0.25);
}

/* --------------------------------------------------------------------------
   14. Suscripción
   -------------------------------------------------------------------------- */
.k-suscripcion {
	border: 1px solid var(--wp--preset--color--tinta);
	padding: var(--wp--preset--spacing--30);
}

.k-suscripcion form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 0.8rem;
}

.k-suscripcion input[type="email"] {
	flex: 1 1 14rem;
	min-width: 0;
	padding: 0.8rem 0.9rem;
	border: 1px solid var(--wp--preset--color--petroleo);
	border-radius: 0;
	background-color: transparent;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--tinta);
}

.k-suscripcion button {
	border: 1px solid var(--wp--preset--color--tinta);
	border-radius: 0;
	padding: 0.8rem 1.3rem;
	background-color: var(--wp--preset--color--tinta);
	color: var(--wp--preset--color--crema);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}

.k-suscripcion button:hover {
	background-color: var(--wp--preset--color--petroleo);
}

/* --------------------------------------------------------------------------
   15. 404 y paginación
   -------------------------------------------------------------------------- */
.k-404-patron {
	min-height: 52vh;
	background-image: var(--k-patron);
	background-repeat: repeat;
	border-block: 1px solid var(--wp--preset--color--tinta);
}

.wp-block-query-pagination {
	padding-block: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.wp-block-query-pagination .page-numbers {
	padding: 0.3rem 0.55rem;
	border: 1px solid transparent;
	text-decoration: none;
}

.wp-block-query-pagination .page-numbers:hover,
.wp-block-query-pagination .page-numbers.current {
	border-color: var(--wp--preset--color--petroleo);
	color: var(--wp--preset--color--petroleo);
}

/* Salto al contenido, para teclado y lector de pantalla. */
.k-saltar {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 40;
	padding: 0.7rem 1rem;
	background-color: var(--wp--preset--color--petroleo);
	color: var(--wp--preset--color--crema);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	text-decoration: none;
}

.k-saltar:focus {
	left: 0;
}