/* ==========================================================================
   PORTADA V2 — hero · voz del pueblo · contador · terminal
   Portado de `04-cyberpunk/05-plantilla-portada.html`.
   ========================================================================== */

.pf-wrap{max-width:var(--pf-maxw);margin:0 auto;padding:0 var(--pf-gutter);position:relative}
.pf-sec{padding:clamp(2.4rem,5.5vw,4.4rem) 0}
.pf-sec--linea{border-top:1px solid var(--pf-linea)}
.pf-sec__cab{display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.8rem}
.pf-sec__cab h2{font-size:clamp(1.7rem,4.2vw,3.2rem);color:var(--pf-tinta);position:relative}
/* la regla corta que corona el título de sección — gesto de firma del sistema */
.pf-sec__cab h2::before{
	content:"";display:block;height:5px;width:64px;background:var(--pf-tinta);margin-bottom:.9rem;
}
.pf-sec__n{margin-left:auto;font-family:var(--pf-mono);font-size:.7rem;color:var(--pf-tinta-2)}
.pf-punto{width:7px;height:7px;background:var(--pf-k);display:inline-block;flex:0 0 auto}
.pf-der{margin-left:auto}

/* ==========================================================================
   HERO — la tapa de la portada
   ========================================================================== */
.pf-hero{
	position:relative;min-height:clamp(440px,74vh,760px);display:flex;align-items:flex-end;
	overflow:hidden;border-bottom:1px solid var(--pf-linea);
}
.pf-hero__img{position:absolute;inset:0}
/* la fotografía va A COLOR, sin tratar. Sólo un degradado para que lea el titular. */
.pf-hero__img img{width:100%;height:100%;object-fit:cover;max-height:none;filter:none}
.pf-hero__img::after{
	content:"";position:absolute;inset:0;z-index:3;
	background:linear-gradient(to top,var(--pf-negro) 3%,rgba(10,10,10,.72) 38%,rgba(10,10,10,.15) 78%);
}
.pf-hero__c{position:relative;z-index:4;width:100%;padding-bottom:clamp(1.6rem,4vw,3.2rem)}
.pf-hero__t{
	font-size:clamp(2.1rem,6.6vw,5.2rem);color:#fff;max-width:20ch;margin-top:.4rem;
}
.pf-hero__firma{font-family:var(--pf-mono);font-size:.76rem;color:var(--pf-k-cl);margin-top:1rem}
.pf-hero__meta{font-family:var(--pf-mono);font-size:.7rem;color:var(--pf-tinta-2);margin-top:.35rem}

/* glitch del titular — cian + coral del logo */
.pf-gl{position:relative;display:inline-block}
.pf-gl::before,.pf-gl::after{
	content:attr(data-t);position:absolute;left:0;top:0;width:100%;overflow:hidden;pointer-events:none;
}
.pf-gl::before{color:var(--pf-k);animation:pf-g1 5.2s infinite steps(1)}
.pf-gl::after{color:var(--pf-logo-coral);animation:pf-g2 5.2s infinite steps(1)}
@keyframes pf-g1{0%,93%,100%{clip-path:inset(100% 0 0 0);transform:none}
	94%{clip-path:inset(14% 0 60% 0);transform:translateX(-3px)}
	97%{clip-path:inset(48% 0 30% 0);transform:translateX(2px)}}
@keyframes pf-g2{0%,93%,100%{clip-path:inset(100% 0 0 0);transform:none}
	95%{clip-path:inset(32% 0 46% 0);transform:translateX(3px)}
	98%{clip-path:inset(68% 0 6% 0);transform:translateX(-2px)}}

/* glitch pulsante sobre la foto del hero */
.pf-hero__img .pf-gl-a,
.pf-hero__img .pf-gl-b{
	content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;mix-blend-mode:screen;
}
.pf-hero__img .pf-gl-a{background:var(--pf-logo-verde);animation:pf-pulso-a 13s infinite steps(1)}
.pf-hero__img .pf-gl-b{background:var(--pf-logo-magenta);animation:pf-pulso-b 13s infinite steps(1)}

/* ==========================================================================
   LA VOZ DEL PUEBLO — PANEL LATERAL
   Anclado al costado derecho, plegable con su tirador vertical. No interrumpe
   la lectura: acompaña. En móvil no hay costado, así que baja a banda inferior.
   ========================================================================== */
.pf-voz{
	position:fixed;right:0;top:50%;
	/* 🔴 `translate(0,-50%)` y NO `translateY(-50%)`: el estado plegado usa
	   `translate(x,y)`, y el navegador sólo interpola entre transformaciones de
	   la MISMA forma. Con funciones distintas se queda pegado en el valor de
	   partida y el panel no se mueve. */
	transform:translate(0, -50%);
	z-index:55;display:flex;align-items:stretch;
	max-width:min(30rem, 90vw);
	transition:transform .55s var(--pf-ease);
	will-change:transform;
}
/* plegado: se esconde dejando fuera sólo el tirador */
.pf-voz[data-abierto="false"]{transform:translate(calc(100% - 2.6rem), -50%)}

/* --- el tirador vertical ------------------------------------------------ */
.pf-voz__tirador{
	flex:0 0 2.6rem;background:var(--pf-k);color:var(--pf-sobre-k);
	border:0;cursor:pointer;padding:1rem .2rem;
	display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;
	font-family:var(--pf-mono);font-weight:600;font-size:.62rem;
	letter-spacing:.22em;text-transform:uppercase;
}
.pf-voz__tirador-txt{writing-mode:vertical-rl;transform:rotate(180deg)}
/* la X que cierra / la flecha que abre */
.pf-voz__tirador-x{
	position:relative;width:12px;height:12px;flex:0 0 auto;
}
.pf-voz__tirador-x::before,
.pf-voz__tirador-x::after{
	content:"";position:absolute;inset:0;margin:auto;
	width:12px;height:2px;background:currentColor;
	transition:transform .35s var(--pf-ease);
}
.pf-voz__tirador-x::before{transform:rotate(45deg)}
.pf-voz__tirador-x::after{transform:rotate(-45deg)}
.pf-voz[data-abierto="false"] .pf-voz__tirador-x::before{transform:rotate(-45deg) translate(2px,-2px) scaleX(.62)}
.pf-voz[data-abierto="false"] .pf-voz__tirador-x::after{transform:rotate(45deg) translate(2px,2px) scaleX(.62)}

/* --- el panel ----------------------------------------------------------- */
.pf-voz__panel{
	position:relative;flex:1;min-width:0;
	background:var(--pf-blanco);
	border:1px solid var(--pf-linea-f);border-right:0;
	padding:1.2rem 1.3rem;
	box-shadow:0 0 0 1px color-mix(in srgb, var(--pf-k) 12%, transparent),
	           var(--pf-sombra-panel), var(--pf-glow);
}
.pf-voz__panel .pf-esq{position:absolute;width:14px;height:14px;opacity:.6}
.pf-voz__panel .pf-esq--a{top:8px;left:8px}
.pf-voz__panel .pf-esq--d{bottom:8px;right:8px}

.pf-voz__cab{
	display:flex;align-items:center;gap:.6rem;font-family:var(--pf-mono);font-weight:600;
	font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--pf-k-cl);margin-bottom:.8rem;
}
.pf-voz__cab .pf-n{margin-left:auto;color:var(--pf-tinta-3);font-weight:400}
.pf-voz__f{
	font-family:var(--pf-cond);font-weight:700;font-size:clamp(1.05rem,1.6vw,1.4rem);
	line-height:1.28;color:var(--pf-tinta);min-height:4.4em;display:flex;align-items:center;font-style:normal;
}
.pf-cur{
	display:inline-block;width:.5ch;height:.95em;background:var(--pf-k-cl);margin-left:.12em;
	animation:pf-par .9s step-end infinite;
}
@keyframes pf-par{50%{opacity:0}}
.pf-voz__p{
	display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:baseline;margin-top:.8rem;
	font-family:var(--pf-mono);font-size:.7rem;color:var(--pf-tinta-2);
}
.pf-voz__p b{color:var(--pf-tinta);font-weight:500}
.pf-voz__p .pf-der{color:var(--pf-tinta-3);font-size:.6rem}

/* --- móvil: no hay costado, la voz baja a banda inferior ---------------- */
@media (max-width:820px){
	.pf-voz{
		top:auto;bottom:0;right:0;left:0;max-width:none;
		/* DOS ARREGLOS DE MOVIL, los dos medidos a 375px:

		   1 · `column`, NO `column-reverse`. Aqui estaba el fallo que se veia.
		   Con el orden invertido el tirador quedaba en la parte BAJA de la caja,
		   asi que al plegar hacia abajo lo que asomaba por el borde de la
		   pantalla era el panel y el tirador se iba FUERA: acababa en top 927
		   con un viewport de 812. Por eso se podia cerrar y ya no habia nada
		   que pulsar para volver a abrir. Con `column` el tirador va arriba y
		   es justo lo que queda a la vista al plegar.

		   2 · El estado abierto declara `translateY(0)` EXPLICITO, no `none`.
		   Los dos estados tienen que ser la misma funcion para que el navegador
		   pueda interpolar entre ellos; saliendo de `none` no hay valor
		   equivalente del que partir y la transicion no arranca. */
		transform:translateY(0);
		flex-direction:column;
	}
	.pf-voz[data-abierto="false"]{transform:translateY(calc(100% - 2.4rem))}
	.pf-voz__tirador{
		flex:0 0 2.4rem;flex-direction:row;gap:.6rem;padding:.4rem 1rem;
	}
	.pf-voz__tirador-txt{writing-mode:horizontal-tb;transform:none}
	.pf-voz__panel{border-right:1px solid var(--pf-linea-f);border-bottom:0;padding:1rem}
	.pf-voz__f{min-height:3.4em}
}

/* ==========================================================================
   MÓVIL — EL PRIMER PANTALLAZO
   El hero pedía 74vh (601px) y el panel fijo de la voz ocupaba 211px: juntos
   se comían los 812px justos de la pantalla, el titular quedaba cortado
   detrás del panel y no se intuía que hubiera muro debajo.
   Aquí el hero cede altura y el panel se compacta. Todo dentro de la media
   query: la portada de escritorio queda intacta.
   ========================================================================== */
@media (max-width:640px){
	.pf-hero{min-height:58vh}
	/* El titular NO se trunca: en un medio, cortar un titular puede cambiar lo
	   que dice. Sólo cede un punto de cuerpo para caber entero. */
	.pf-hero__t{font-size:clamp(1.95rem,7.4vw,2.6rem)}
	/* El panel cede altura sin perder su tipografía: la frase respira igual
	   y deja ver que el muro sigue debajo. */
	.pf-voz__panel{padding:.8rem .9rem}
	.pf-voz__f{min-height:2.6em}
}

/* ==========================================================================
   EL CONTADOR — estado del archivo
   ========================================================================== */
.pf-estado{
	border:1px solid var(--pf-linea-f);background:var(--pf-blanco);position:relative;overflow:hidden;
	box-shadow:0 0 0 1px color-mix(in srgb, var(--pf-k) 10%, transparent), var(--pf-glow);
}
.pf-estado__cab{
	display:flex;align-items:center;gap:.6rem;padding:.55rem .95rem;
	border-bottom:1px solid var(--pf-linea);font-family:var(--pf-mono);font-weight:600;
	font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--pf-k-cl);
}
.pf-estado__cab .pf-n{margin-left:auto;color:var(--pf-tinta-3);font-weight:400}
.pf-estado__rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.pf-cifra-b{padding:1.3rem 1.1rem;border-right:1px solid var(--pf-linea);border-bottom:1px solid var(--pf-linea)}
.pf-cifra-b:last-child{border-right:0}
.pf-cifra-b var{
	font-family:var(--pf-display);font-style:normal;font-size:clamp(1.9rem,4.2vw,3rem);
	line-height:.9;letter-spacing:-.035em;color:var(--pf-tinta);display:block;
	text-shadow:0 0 22px color-mix(in srgb, var(--pf-k) 30%, transparent);
}
.pf-cifra-b span{
	font-family:var(--pf-mono);font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;
	color:var(--pf-tinta-2);display:block;margin-top:.5rem;line-height:1.45;
}
.pf-estado__barra{padding:1.1rem}
.pf-barra{height:14px;background:var(--pf-barra-bg);border:1px solid var(--pf-linea);display:flex;overflow:hidden}
.pf-barra i{
	display:block;height:100%;background:var(--pf-k);box-shadow:0 0 14px color-mix(in srgb, var(--pf-k) 60%, transparent);
	width:0;transition:width 1.8s cubic-bezier(.2,.8,.2,1);
}
.pf-barra i.pf-va{width:var(--pct)}
.pf-barra u{
	display:block;height:100%;flex:1;text-decoration:none;
	background:repeating-linear-gradient(45deg,var(--pf-barra-a) 0 5px,var(--pf-barra-b) 5px 10px);
}
.pf-barra-pie{
	display:flex;justify-content:space-between;gap:1rem;margin-top:.55rem;flex-wrap:wrap;
	font-family:var(--pf-mono);font-size:.63rem;color:var(--pf-tinta-2);
}
.pf-barra-pie b{color:var(--pf-k-cl);font-weight:500}
.pf-barra-pie s{text-decoration:none;color:var(--pf-tinta-3)}

/* ==========================================================================
   PANEL DE TERMINAL — el índice
   ========================================================================== */
.pf-term{
	border:1px solid var(--pf-linea-f);background:var(--pf-blanco);
	box-shadow:0 0 0 1px color-mix(in srgb, var(--pf-k) 10%, transparent), var(--pf-glow);
	transition:box-shadow .25s;
}
.pf-term:hover{box-shadow:0 0 0 1px color-mix(in srgb, var(--pf-k) 26%, transparent), 0 0 26px color-mix(in srgb, var(--pf-k) 10%, transparent)}
.pf-term__cab{
	display:flex;align-items:center;gap:.6rem;padding:.5rem .85rem;
	border-bottom:1px solid var(--pf-linea);font-family:var(--pf-mono);font-weight:600;
	font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pf-k-cl);
}
.pf-term__cab .pf-n{margin-left:auto;color:var(--pf-tinta-3);font-weight:400}
.pf-term__b{padding:.4rem 1rem 1rem}
.pf-term__l{
	display:grid;grid-template-columns:3rem 1fr auto;gap:.9rem;padding:.5rem 0;
	border-bottom:1px solid var(--pf-linea-suave);align-items:baseline;
	transition:padding-left .25s;
}
.pf-term__l:last-child{border-bottom:0}
.pf-term__l:hover{padding-left:.4rem}
.pf-term__l i{font-style:normal;color:var(--pf-k-cl);font-family:var(--pf-mono);font-size:.72rem}
.pf-term__l em{font-style:normal;color:var(--pf-tinta);font-family:var(--pf-body);font-size:.9rem}
.pf-term__l:hover em{color:var(--pf-tinta)}
.pf-term__l s{text-decoration:none;color:var(--pf-tinta-3);font-size:.68rem;font-family:var(--pf-mono)}

/* ==========================================================================
   CARGAR MÁS + PAGINACIÓN
   ========================================================================== */
.pf-mas{text-align:center;padding:clamp(1.5rem,4vw,3rem) var(--pf-gutter)}
.pf-mas__btn{
	border:1px solid var(--pf-linea-f);color:var(--pf-tinta);background:none;
	padding:.7rem 1.5rem;font-family:var(--pf-mono);font-size:.72rem;letter-spacing:.12em;
	text-transform:uppercase;cursor:pointer;display:inline-flex;align-items:center;gap:.6rem;
	transition:border-color .25s,color .25s;
}
.pf-mas__btn::before{content:"";width:7px;height:7px;background:var(--pf-k);animation:pf-par .9s step-end infinite}
.pf-mas__btn:hover{border-color:var(--pf-k);color:var(--pf-k)}
.pf-mas__nota{font-family:var(--pf-mono);font-size:.66rem;color:var(--pf-tinta-3);margin-top:.8rem}
.pf-paginacion{margin-top:1rem;font-family:var(--pf-mono);font-size:.7rem;color:var(--pf-tinta-3)}
.pf-paginacion a,.pf-paginacion span{padding:.24rem .56rem;color:var(--pf-tinta-3)}
.pf-paginacion a:hover{color:var(--pf-tinta)}
.pf-paginacion .current{background:var(--pf-k);color:var(--pf-sobre-k)}

/* ==========================================================================
   MASTHEAD DE SECCIÓN — la tapa de un listado
   Portado de `04-cyberpunk/07-plantilla-seccion.html`.
   ========================================================================== */
.pf-masthead{
	border-bottom:1px solid var(--pf-linea);
	padding:clamp(2.2rem,6vw,4.2rem) 0 clamp(1.4rem,3vw,2.2rem);
	position:relative;
}
.pf-masthead__k{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:1rem}
.pf-masthead__ruta{
	font-family:var(--pf-mono);font-size:.66rem;letter-spacing:.12em;color:var(--pf-tinta-2);
	padding-left:.8rem;border-left:1px solid var(--pf-linea);word-break:break-all;
}
.pf-masthead__t{
	font-family:var(--pf-display);font-size:clamp(2.2rem,8vw,6rem);color:var(--pf-tinta);
	line-height:.94;letter-spacing:-.03em;text-transform:uppercase;
}
.pf-masthead__desc{
	max-width:56ch;color:var(--pf-tinta-2);font-size:1.02rem;line-height:1.6;margin-top:1.1rem;
}
.pf-masthead__meta{
	display:flex;gap:1.4rem;align-items:baseline;flex-wrap:wrap;margin-top:1.2rem;
	font-family:var(--pf-mono);font-size:.72rem;color:var(--pf-tinta-2);
}
.pf-masthead__meta b{color:var(--pf-k-cl);font-weight:500}

/* La sublanding de ESPECIALES (/especiales/, has_archive del CPT) NO lleva
   acento propio: sigue la misma línea visual que toda la landing (el acento
   normal del sitio). Por eso su masthead reutiliza `.pf-masthead`/`.pf-gl` tal
   cual, sin ninguna regla de color extra. */

/* --- barra de filtros por tipo ------------------------------------------ */
.pf-filtros{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.pf-filtros a{
	font-family:var(--pf-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
	color:var(--pf-tinta-2);text-decoration:none;border:1px solid var(--pf-linea);
	padding:.34rem .72rem;transition:border-color .2s,color .2s,background .2s;
}
.pf-filtros a:hover{border-color:var(--pf-k);color:var(--pf-tinta)}
.pf-filtros a[aria-current]{background:var(--pf-k);color:var(--pf-sobre-k);border-color:var(--pf-k)}

.pf-vacio{
	grid-column:1 / -1;font-family:var(--pf-mono);font-size:.8rem;color:var(--pf-tinta-2);
	border:1px solid var(--pf-linea-f);background:var(--pf-blanco);padding:2rem;text-align:center;
}

/* la vieja cabecera de archivo del panfleto */
.pf-cabecera-archivo{display:none}

/* ==========================================================================
   EL PIE — ficha técnica del archivo
   ========================================================================== */
.pf-footer{
	border-top:1px solid var(--pf-linea);background:var(--pf-muro);
	padding:2.2rem 0 3rem;margin-top:auto;
}
.pf-footer__nav{
	display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;padding-bottom:1.4rem;
	border-bottom:1px solid var(--pf-linea);margin-bottom:1.4rem;
}
.pf-footer__nav a{
	font-family:var(--pf-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
	color:var(--pf-tinta-2);text-decoration:none;transition:color .25s;
}
.pf-footer__nav a:hover{color:var(--pf-k)}
.pf-pie{
	display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;
	font-family:var(--pf-mono);font-size:.66rem;letter-spacing:.1em;color:var(--pf-tinta-3);
}
/* El logotipo del pie es el MISMO archivo que el de la cabecera. Se alinea a la
   altura de la fila de la ficha técnica: manda la cifra, el logo sólo firma. */
.pf-pie__marca{
	height:26px;width:auto;display:block;flex:0 0 auto;
}
.pf-pie__reloj{margin-left:auto;color:var(--pf-tinta-3)}
.pf-footer__legal{
	font-family:var(--pf-mono);font-size:.62rem;line-height:1.6;color:var(--pf-tinta-3);
	margin-top:1.2rem;max-width:70ch;opacity:.75;
}
/* el sello circular "VERDAD" era del panfleto: no hay sellos en una terminal */
.pf-footer__sello,
.pf-footer__marca{display:none}

@media (prefers-reduced-motion: reduce){
	.pf-gl::before,.pf-gl::after,
	.pf-hero__img .pf-gl-a,.pf-hero__img .pf-gl-b,
	.pf-cur,.pf-mas__btn::before{animation:none}
}

/* El periodo de cobertura no es una cifra que se cuente: es un rango de texto
   («2013–2025»). Ocupa mas caracteres que un numero, asi que baja un escalon
   para que no rompa la rejilla de cuatro columnas. */
.pf-cifra-b var.pf-cifra-b--txt{
	font-size:clamp(1.4rem,3vw,2.1rem);
	letter-spacing:-.02em;
	white-space:nowrap;
}

/* ==========================================================================
   EL PIE EN MÓVIL — zonas pulsables de verdad
   --------------------------------------------------------------------------
   Medido a 375px: los 8 enlaces del pie caían en **18px de alto, sin relleno y
   pegados unos a otros**. Las guías de iOS, Android y la WCAG piden 44px, y no
   es un capricho: un dedo no tiene la puntería de un cursor, y ocho enlaces
   apilados a 18px se fallan.

   No se resuelve subiendo la letra —eso rompería la escala tipográfica del
   sistema— sino dándoles ALTURA. Se pasan a dos columnas: cada enlace consigue
   sus 44px, el pie no se estira ocho filas, y de paso se lee como un menú
   ordenado en vez de como una línea de texto que se dobla sola.

   Regla del proyecto: móvil sin tocar escritorio. Todo dentro de la consulta.
   ========================================================================== */
@media (max-width:640px){
	.pf-footer__nav{
		display:grid;
		grid-template-columns:1fr 1fr;
		gap:0;
		column-gap:var(--pf-s-4);
		padding-bottom:.6rem;
	}
	.pf-footer__nav a{
		display:flex;
		align-items:center;
		min-height:44px;              /* el mínimo que pide la WCAG 2.5.5 */
		padding:.2rem 0;
		font-size:.72rem;
		border-bottom:1px solid var(--pf-linea-suave);
	}
	/* Los dos últimos no llevan raya: cierran la retícula. */
	.pf-footer__nav a:nth-last-child(-n+2){ border-bottom:0 }

	/* La ficha técnica del pie también se apila: en una sola línea se apretaba
	   contra el logotipo y el reloj quedaba colgando. */
	.pf-pie{ gap:.5rem 1rem }
	.pf-pie__reloj{ margin-left:0; width:100% }
}

/* --- Paginación y controles de cabecera en móvil -------------------------
   Segunda pasada tras arreglar el pie. Medido a 375px:
     · paginación: **22px** de alto. Es navegación principal —el modo de llegar
       a la pieza 2.000 del archivo— y era la zona pulsable más pequeña del
       sitio después del ticker.
     · botones de la cabecera: 34-38px. Rozaban el mínimo, y son los controles
       que más se usan con el pulgar.
   El ticker se deja como está a propósito: es un elemento en movimiento, y
   perseguir con el dedo un enlace que se desplaza no se arregla con relleno.
   -------------------------------------------------------------------------- */
@media (max-width:640px){
	.pf-paginacion{ display:flex;flex-wrap:wrap;gap:.3rem;align-items:center }
	.pf-paginacion a,
	.pf-paginacion span{
		display:inline-flex;align-items:center;justify-content:center;
		min-width:44px;min-height:44px;
		padding:.24rem .7rem;
		border:1px solid var(--pf-linea-suave);
	}
	.pf-paginacion .current{
		border-color:var(--pf-k);
		color:var(--pf-k);
	}

	.pf-burger,
	.pf-tema{ min-width:44px;min-height:44px }
}