/* ==========================================================================
   BASE — CYBER BRUTALISTA V2 · los cimientos
   --------------------------------------------------------------------------
   Antes: el muro bogotano (textura de mugre, tóner, fotocopia en B/N).
   Ahora: negro profundo y limpio. Doctrina V2:
     · SIN trama global · SIN halos de neón · el fondo es fondo
     · la fotografía va A COLOR y SIN TRATAR (es prueba, no decoración)
     · fuera cintas, rasgados y sombras de papel
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
	font-family:var(--pf-body);
	font-size:var(--pf-t-base);
	line-height:var(--pf-lh-body);
	color:var(--pf-tinta);
	background-color:var(--pf-muro);
	position:relative;
	overflow-x:hidden;
	min-height:100vh;
	-webkit-font-smoothing:antialiased;
}

/* El fondo es fondo: nada de textura, mugre ni ruido.
   (Aquí vivían body::before/::after con la trama del muro.) */
body::before,
body::after{content:none}

.pf-shell{position:relative;z-index:2}

/* --- Accesibilidad -------------------------------------------------------- */
.pf-skip{
	position:absolute;left:-9999px;top:0;z-index:999;
	background:var(--pf-k);color:var(--pf-sobre-k);
	font-family:var(--pf-mono);font-size:var(--pf-t-sm);
	padding:var(--pf-s-3) var(--pf-s-4);
}
.pf-skip:focus{left:var(--pf-s-4);top:var(--pf-s-4)}
:focus-visible{outline:var(--pf-focus);outline-offset:3px}
.pf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- Utilidades de tipografía --------------------------------------------- */
.pf-mono{font-family:var(--pf-mono)}
/* el rótulo mono: aquí vive el acento */
.pf-kick{
	font-family:var(--pf-mono);font-size:.7rem;font-weight:600;
	letter-spacing:.16em;text-transform:uppercase;color:var(--pf-k-cl);
	font-style:normal;
}
.pf-display{
	font-family:var(--pf-display);font-weight:400;text-transform:uppercase;
	line-height:var(--pf-lh-tight);letter-spacing:-.025em;font-style:normal;
}
h1,h2,h3{
	font-family:var(--pf-display);font-weight:400;line-height:var(--pf-lh-tight);
	letter-spacing:-.025em;text-transform:uppercase;font-style:normal;
}
/* SIN itálicas de display (pedido explícito del cliente) */
h1 em,h2 em,h3 em,.pf-display em,.pf-mat__titulo em{font-style:normal}

/* --- Bordes rasgados: desactivados ----------------------------------------
   Eran el gesto del panfleto (papel roto a mano). El brutalismo V2 corta
   recto: la retícula no se rasga. Se mantienen las clases por si el marcado
   las emite, pero ya no recortan nada. */
.pf-torn-a,.pf-torn-b{clip-path:none}

/* --- Tratamiento de imagen: NINGUNO ---------------------------------------
   La fotografía es prueba periodística: va íntegra y a color. Aquí estaban el
   grayscale, el contraste forzado y la trama de puntos de fotocopia. */
.pf-foto{position:relative;overflow:hidden;background:var(--pf-prensa)}
.pf-foto img{
	filter:none;
	width:100%;height:100%;object-fit:cover;
	transition:transform var(--pf-dur-enter) var(--pf-ease);
}
.pf-pieza:hover .pf-foto img{filter:none;transform:scale(1.03)}

/* --- Cuando no hay imagen: el archivo no la conservó -----------------------
   Deja de ser un papel manchado y pasa a ser un hueco de sistema: marco de
   terminal con su leyenda. La ausencia también es información. */
.pf-sinfoto{
	display:flex;align-items:center;justify-content:center;text-align:center;
	background:var(--pf-blanco);
	border:1px solid var(--pf-linea-f);
	color:var(--pf-tinta-3);
	font-family:var(--pf-mono);font-size:var(--pf-t-xs);
	letter-spacing:.14em;text-transform:uppercase;padding:var(--pf-s-4);
}
.pf-sinfoto--enlinea{
	display:inline-flex;align-items:center;justify-content:center;text-align:center;
	background:var(--pf-blanco);
	border:1px solid var(--pf-linea-f);
	color:var(--pf-tinta-3);
	font-family:var(--pf-mono);font-size:var(--pf-t-xs);
	letter-spacing:.14em;text-transform:uppercase;
	padding:var(--pf-s-4);margin:var(--pf-s-2) 0;
	width:100%;min-height:5rem;
}

/* --- Fase final: la nota "archivo no conservado" NO se muestra al lector ---
   Los marcadores en el CUERPO de los artículos (`.pf-media-perdida` y el span
   `.pf-sinfoto--enlinea`) son una anotación interna del rescate. En producción no
   aportan al lector y, si caen al inicio, se llevaban la capitular del tema. Se
   ocultan. (El fallback de imagen de las TARJETAS del muro es `.pf-foto.pf-sinfoto`
   y NO se toca: ahí la ausencia sí es parte del diseño.) Reversible: borrar este bloque. */
.pf-media-perdida,
.pf-sinfoto--enlinea{display:none !important}

/* --- Cinta adhesiva: fuera ------------------------------------------------
   No hay nada pegado con cinta en una terminal. */
.pf-cinta{display:none}
