/* ==========================================================================
   LOS MATERIALES — CYBER BRUTALISTA V2
   --------------------------------------------------------------------------
   Antes cada contenido era un objeto de papel pegado al muro (cartel
   engrudado, recorte rasgado, polaroid, cinta). Ahora se distinguen por
   FORMA y PESO, no por textura: el papel desaparece, queda la retícula.

   Portado de la maqueta `04-cyberpunk/05-plantilla-portada.html`.
   Mapa de equivalencias tema → maqueta:
     --cartel     → nota destacada (pieza grande)
     --hoja       → editorial (bloque sólido de acento)
     --sticker    → dato (cifra gigante, sin caja de color)
     --serigrafia → especial (pieza de autor, jerarquía alta)
     --prensa     → nota estándar (la mayoría del muro)
     --polaroid   → multimedia (Ver / Oír)
     --cinta      → aviso (barra sólida)
   ========================================================================== */

.pf-mat{
	position:relative;height:100%;display:flex;flex-direction:column;
	background:transparent;box-shadow:none;border:0;border-radius:0;
	clip-path:none;mix-blend-mode:normal;padding:0;
}

/* --- la foto: a color, sin tratar. El borde respira, no grita. ---------- */
.pf-mat .pf-foto{
	position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--pf-prensa);
	margin-bottom:var(--pf-s-3);clip-path:none;
	box-shadow:0 0 0 1px color-mix(in srgb, var(--pf-k) 14%, transparent);
}
.pf-mat .pf-foto img{width:100%;height:100%;object-fit:cover;display:block;
	transition:transform .5s ease}
.pf-pieza:hover .pf-foto img{transform:scale(1.03)}
.pf-pieza:hover .pf-foto{
	box-shadow:0 0 0 1px var(--pf-k), var(--pf-glow-hover);
}

/* --- GLITCH PULSANTE en las imágenes — sutil, ~2% del ciclo ------------ */
.pf-mat .pf-foto::before,
.pf-mat .pf-foto::after{
	content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
	opacity:0;mix-blend-mode:screen;background:var(--gl1);
}
.pf-mat .pf-foto::after{background:var(--gl2)}
.pf-mat .pf-foto{--gl1:var(--pf-logo-verde);--gl2:var(--pf-logo-coral)}
.pf-pieza:nth-child(2n) .pf-foto{--gl1:var(--pf-logo-azul);--gl2:var(--pf-logo-magenta)}
.pf-pieza:nth-child(3n) .pf-foto{--gl1:var(--pf-logo-lavanda);--gl2:var(--pf-logo-verde)}
.pf-mat .pf-foto::before{animation:pf-pulso-a 11s infinite steps(1)}
.pf-mat .pf-foto::after {animation:pf-pulso-b 11s infinite steps(1)}
.pf-pieza:nth-child(2n) .pf-foto::before,
.pf-pieza:nth-child(2n) .pf-foto::after{animation-duration:14s}
.pf-pieza:nth-child(3n) .pf-foto::before,
.pf-pieza:nth-child(3n) .pf-foto::after{animation-duration:9s}
.pf-pieza:nth-child(2n) .pf-foto::before{animation-delay:-3.5s}
.pf-pieza:nth-child(3n) .pf-foto::before{animation-delay:-6s}
.pf-pieza:nth-child(4n) .pf-foto::before{animation-delay:-1.8s}
.pf-pieza:nth-child(5n) .pf-foto::before{animation-delay:-8s}
@keyframes pf-pulso-a{
	0%,95.6%,100%{opacity:0;transform:none}
	96%{opacity:.30;transform:translateX(-5px)}
	96.9%{opacity:0;transform:none}
	97.6%{opacity:.20;transform:translateX(3px)}
	98.2%{opacity:0;transform:none}}
@keyframes pf-pulso-b{
	0%,96.2%,100%{opacity:0;transform:none}
	96.6%{opacity:.26;transform:translateX(5px)}
	97.2%{opacity:0;transform:none}
	98%{opacity:.16;transform:translateX(-3px)}
	98.6%{opacity:0;transform:none}}

/* --- tipografía de la pieza -------------------------------------------- */
.pf-mat__cuerpo{padding:0;background:transparent;flex:1}
.pf-mat__titulo{
	font-family:var(--pf-display);font-weight:400;text-transform:uppercase;
	font-size:1.15rem;line-height:1.06;letter-spacing:-.02em;
	color:var(--pf-tinta);text-shadow:none;
}
.pf-pieza:hover .pf-mat__titulo{color:var(--pf-tinta);text-decoration:underline;text-underline-offset:3px}
.pf-mat__extracto{
	font-family:var(--pf-body);font-size:var(--pf-t-sm);line-height:1.5;
	margin-top:var(--pf-s-2);color:var(--pf-tinta-2);text-align:left;
}
.pf-mat__meta{
	display:flex;gap:.8rem;flex-wrap:wrap;
	font-family:var(--pf-mono);font-size:.64rem;letter-spacing:.06em;
	/* 🔴 UN ESCALON POR ENCIMA DEL GRIS DECORATIVO, y no es capricho.
	   Aqui van la FIRMA y la FECHA de cada pieza: es autoria, no adorno. Con
	   `--pf-tinta-3` daban 2,98:1 sobre el muro (medido en las 32 tarjetas de
	   la portada, con los 6 acentos) — por debajo del minimo AA. Es el MISMO
	   fallo que ya se corrigio en las fichas del Centro de Memoria, donde el
	   gris de la portada daba 2,82:1 y se subio toda la escala por la misma
	   razon: alli era metadato de catalogo, aqui es quien firma la pieza.
	   Con `--pf-tinta-2` sube a 5,76:1. */
	color:var(--pf-tinta-2);margin-top:var(--pf-s-2);
}
/* ==========================================================================
   EL CHIP DE TIPO — la etiqueta que ordena el muro
   Bloque sólido del acento, mono, muy pequeño. Debajo va la sección.
   ========================================================================== */
/* La BARRA de tipo: no es una pastilla suelta, es un filete sólido que cruza
   la pieza de lado a lado con la etiqueta pegada a la izquierda. Es lo que
   "cose" la imagen con el titular y le da el aire de ficha técnica. */
.pf-mat__tipo{
	display:block;width:100%;
	font-family:var(--pf-mono);font-weight:600;font-size:.56rem;
	letter-spacing:.16em;text-transform:uppercase;
	color:var(--pf-sobre-k);background:var(--pf-k);
	padding:.22rem .5rem;margin-bottom:.6rem;
}
/* el editorial invierte la barra (su fondo YA es el acento) */
.pf-mat--hoja .pf-mat__tipo{background:var(--pf-sobre-k);color:var(--pf-k)}
/* el dato lo lleva en contorno, sin barra sólida */
.pf-mat--sticker .pf-mat__tipo{
	display:inline-block;width:auto;
	background:transparent;color:var(--pf-k);border:1px solid var(--pf-k);padding:.14rem .44rem;
}
/* multimedia declara su duración en la misma barra */
.pf-mat--polaroid .pf-mat__tipo::after{content:" · 04:12";opacity:.7}
/* el especial lo lleva sobre la imagen, con punto que late */
.pf-mat--serigrafia .pf-mat__tipo{
	position:absolute;left:0;top:0;z-index:5;display:inline-flex;align-items:center;gap:.4rem;
	font-size:.58rem;letter-spacing:.18em;padding:.3rem .6rem;margin:0;
}
.pf-mat--serigrafia .pf-mat__tipo::before{
	content:"";width:6px;height:6px;background:currentColor;animation:pf-par .9s step-end infinite;
}
@keyframes pf-par{50%{opacity:0}}
/* multimedia declara su duración junto al chip */
.pf-mat--cinta .pf-mat__tipo{background:var(--pf-sobre-k);color:var(--pf-k)}

/* el rótulo de sección: mono, discreto (como The Intercept) */
.pf-mat__seccion{
	display:inline-block;font-family:var(--pf-mono);font-weight:600;
	font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
	padding:0;background:transparent;color:var(--pf-tinta-2);
	margin-bottom:var(--pf-s-2);box-shadow:none;transform:none;position:static;
}
/* enlace que cubre toda la pieza sin romper accesibilidad */
.pf-mat__link::after{content:"";position:absolute;inset:0;z-index:5}

/* la cabecera de corondel del recorte de prensa ya no aplica */
.pf-mat__cabecera{
	display:flex;justify-content:space-between;align-items:baseline;
	border:0;border-bottom:1px solid var(--pf-linea);padding:0 0 .4rem;
	margin-bottom:var(--pf-s-2);
	font-family:var(--pf-mono);font-size:.6rem;letter-spacing:.14em;
	text-transform:uppercase;color:var(--pf-tinta-3);
}
.pf-mat__cabecera b{color:var(--pf-k-cl);font-weight:500}

/* ==========================================================================
   1 · NOTA DESTACADA (antes: cartel engrudado)
   Pieza grande. Manda por tamaño, no por color.
   ========================================================================== */
.pf-mat--cartel{background:transparent}
.pf-mat--cartel .pf-foto{aspect-ratio:16/9;margin-bottom:var(--pf-s-4)}
.pf-mat--cartel .pf-mat__cuerpo{background:transparent}
.pf-mat--cartel .pf-mat__titulo{
	font-size:clamp(1.5rem,3vw,2.5rem);color:var(--pf-tinta);text-shadow:none;
}
.pf-mat--cartel .pf-mat__extracto,
.pf-mat--cartel .pf-mat__meta{color:var(--pf-tinta-2)}
.pf-mat--cartel .pf-mat__seccion{background:transparent;color:var(--pf-tinta-2)}
.pf-mat--cartel::after{content:none}   /* fuera la esquina despegada */

/* ==========================================================================
   2 · EDITORIAL (antes: hoja mecanografiada)
   Bloque sólido del acento, texto encima. Sin trama, sin clip metálico.
   ========================================================================== */
.pf-mat--hoja{
	background:var(--pf-k);color:var(--pf-sobre-k);
	border:0;border-radius:0;
	box-shadow:0 0 26px color-mix(in srgb, var(--pf-k) 16%, transparent);
	justify-content:center;
}
.pf-mat--hoja .pf-mat__cuerpo{padding:var(--pf-s-5) var(--pf-s-4)}
.pf-mat--hoja .pf-mat__titulo{
	font-family:var(--pf-cond);font-weight:700;font-size:1.05rem;line-height:1.35;
	text-transform:none;color:var(--pf-sobre-k);text-shadow:none;
}
.pf-mat--hoja .pf-mat__extracto{
	font-family:var(--pf-body);text-align:left;color:var(--pf-sobre-k);opacity:.72;
}
.pf-mat--hoja .pf-mat__meta{color:var(--pf-sobre-k);opacity:.62}
.pf-mat--hoja .pf-mat__seccion{
	background:var(--pf-sobre-k);color:var(--pf-k);
	padding:.16rem .45rem;border:0;
}
.pf-mat--hoja::before{content:none}    /* fuera el clip metálico */
.pf-pieza:hover .pf-mat--hoja .pf-mat__titulo{text-decoration:none}

/* ==========================================================================
   3 · DATO (antes: sticker troquelado)
   Cifra grande sobre filete de acento. Sin caja de color, sin redondeo.
   ========================================================================== */
.pf-mat--sticker{
	background:transparent;border-radius:0;padding:0;box-shadow:none;
	border-top:5px solid var(--pf-k);padding-top:var(--pf-s-4);
	justify-content:flex-start;
}
.pf-mat--sticker .pf-mat__interior{
	background:transparent;border-radius:0;display:flex;flex-direction:column;flex:1;
}
.pf-mat--sticker .pf-foto{aspect-ratio:4/3}
.pf-mat--sticker .pf-mat__titulo{
	font-family:var(--pf-display);color:var(--pf-tinta);
	font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:.94;letter-spacing:-.03em;
}
.pf-mat--sticker .pf-mat__extracto,
.pf-mat--sticker .pf-mat__meta{color:var(--pf-tinta-2)}
.pf-mat--sticker .pf-mat__seccion{
	background:transparent;color:var(--pf-k);border:1px solid var(--pf-k);
	padding:.14rem .44rem;
}

/* ==========================================================================
   4 · ESPECIAL (serigrafía) — pieza de autor, jerarquía alta
   Marco de acento, corchetes de registro que laten, barrido en la imagen.
   ========================================================================== */
.pf-mat--serigrafia{
	background:linear-gradient(180deg, color-mix(in srgb, var(--pf-k) 6%, transparent), transparent 40%);
	mix-blend-mode:normal;
	border:1px solid var(--pf-k);
	padding:clamp(.7rem,1.4vw,1.1rem);
	box-shadow:0 0 0 1px color-mix(in srgb, var(--pf-k) 22%, transparent),
	           0 0 30px color-mix(in srgb, var(--pf-k) 12%, transparent);
}
.pf-mat--serigrafia .pf-mat__cuerpo{padding-inline:0}
.pf-mat--serigrafia .pf-mat__titulo{
	font-size:clamp(1.2rem,2vw,1.6rem);color:var(--pf-tinta);text-shadow:none;
}
.pf-mat--serigrafia .pf-foto{clip-path:none;aspect-ratio:4/3}
.pf-mat--serigrafia .pf-mat__extracto{color:var(--pf-tinta-2)}
.pf-mat--serigrafia .pf-mat__seccion{background:transparent;color:var(--pf-k)}
/* corchetes de registro en las 4 esquinas */
.pf-mat--serigrafia::before,
.pf-mat--serigrafia::after{
	content:"";position:absolute;width:14px;height:14px;z-index:4;
	border:1.5px solid var(--pf-k);opacity:.8;
	animation:pf-esq-late 3.2s ease-in-out infinite;
}
.pf-mat--serigrafia::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.pf-mat--serigrafia::after{bottom:-1px;right:-1px;border-left:0;border-top:0;animation-delay:.6s}
@keyframes pf-esq-late{0%,100%{opacity:.8}50%{opacity:.3}}
/* línea de barrido dentro de la imagen del especial */
.pf-mat--serigrafia .pf-foto::after{
	content:"";position:absolute;left:0;right:0;height:38%;z-index:3;
	pointer-events:none;background:linear-gradient(to bottom,transparent,
		color-mix(in srgb, var(--pf-k) 14%, transparent),transparent);
	animation:pf-esc-e 4.5s linear infinite;mix-blend-mode:screen;
}
@keyframes pf-esc-e{0%{top:-38%}100%{top:100%}}

/* ==========================================================================
   5 · NOTA ESTÁNDAR (antes: recorte de prensa)
   La mayoría del muro. Sin papel amarillo, sin base rasgada.
   ========================================================================== */
.pf-mat--prensa{
	background:transparent;box-shadow:none;clip-path:none;padding-bottom:0;
}
.pf-mat--prensa .pf-foto{aspect-ratio:16/10}
.pf-mat--prensa .pf-mat__titulo{font-size:1rem}
.pf-mat--prensa .pf-mat__extracto{
	font-family:var(--pf-body);font-size:var(--pf-t-sm);text-align:left;
}
.pf-mat--prensa .pf-mat__seccion{display:inline-block}

/* ==========================================================================
   6 · MULTIMEDIA (antes: polaroid)
   Sin marco blanco ni cinta: la marca de reproducción es el acento.
   ========================================================================== */
.pf-mat--polaroid{
	background:transparent;padding:0;box-shadow:none;
}
.pf-mat--polaroid .pf-foto{aspect-ratio:16/10}
.pf-mat--polaroid .pf-mat__cuerpo{padding:0}
.pf-mat--polaroid .pf-mat__titulo{font-size:1rem}
.pf-mat--polaroid .pf-mat__meta{font-size:.64rem}
.pf-mat--polaroid .pf-mat__seccion{
	position:static;transform:none;box-shadow:none;
	background:transparent;color:var(--pf-tinta-2);
}
.pf-mat--polaroid .pf-play{
	position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
	z-index:4;pointer-events:none;
}
.pf-mat--polaroid .pf-play svg{width:46px;height:46px;filter:none}
.pf-mat--polaroid .pf-play circle{fill:var(--pf-k);stroke:none}
.pf-mat--polaroid .pf-play path{fill:var(--pf-sobre-k)}

/* ==========================================================================
   7 · AVISO (antes: cinta rotulada)
   Barra sólida del acento. Sin diagonales, sin multiply.
   ========================================================================== */
.pf-mat--cinta{
	background:var(--pf-k);color:var(--pf-sobre-k);
	box-shadow:0 0 26px color-mix(in srgb, var(--pf-k) 16%, transparent);
	mix-blend-mode:normal;clip-path:none;
	justify-content:center;padding:.85rem 1.2rem;
}
.pf-mat--cinta .pf-mat__titulo{
	font-family:var(--pf-mono);font-size:.74rem;letter-spacing:.14em;
	text-align:left;color:var(--pf-sobre-k);text-transform:uppercase;
}
.pf-mat--cinta .pf-mat__meta{color:var(--pf-sobre-k);opacity:.62}

@media (prefers-reduced-motion: reduce){
	.pf-mat .pf-foto::before,.pf-mat .pf-foto::after,
	.pf-mat--serigrafia::before,.pf-mat--serigrafia::after{animation:none}
}

/* ==========================================================================
   MÓVIL — LOS TITULARES DE LAS TARJETAS
   Los `clamp()` de arriba se calibraron para columnas de escritorio; en 375px
   el `vw` es tan pequeño que todos caen a su MÍNIMO (cartel 24px, sticker
   25.6px). Con los titulares reales del archivo —que llegan a 180 caracteres—
   una sola tarjeta ocupaba más de una pantalla y el muro dejaba de leerse
   como muro.

   Aquí el titular baja un punto y se acota a unas pocas líneas. Esto es una
   TARJETA DE LISTADO, no el titular de la nota abierta: el corte con puntos
   suspensivos es la convención de cualquier portada y no engaña —el titular
   íntegro está a un toque—. En el hero y en la nota NO se trunca nada.

   Todo dentro de la media query: escritorio no se entera.
   ========================================================================== */
@media (max-width:640px){
	.pf-mat--cartel .pf-mat__titulo{font-size:1.32rem;line-height:1.1}
	.pf-mat--sticker .pf-mat__titulo{font-size:1.3rem;line-height:1.06}
	.pf-mat--serigrafia .pf-mat__titulo{font-size:1.15rem}

	/* Corte por líneas: la destacada respira más que las secundarias. */
	.pf-mat__titulo{
		display:-webkit-box;-webkit-box-orient:vertical;
		-webkit-line-clamp:4;overflow:hidden;
	}
	.pf-mat--prensa .pf-mat__titulo,
	.pf-mat--polaroid .pf-mat__titulo,
	.pf-mat--hoja .pf-mat__titulo{-webkit-line-clamp:3}

	/* El extracto acompaña, no compite. */
	.pf-mat__extracto{
		display:-webkit-box;-webkit-box-orient:vertical;
		-webkit-line-clamp:3;overflow:hidden;
	}
}

/* ==========================================================================
   EL CARTEL — la pieza que no conserva foto propia
   --------------------------------------------------------------------------
   Antes aqui iba un recuadro gris que decia «Archivo no conservado». Mentia:
   esas piezas SI tienen portada y su archivo SI esta en disco; lo que pasa es
   que la portada era el logotipo generico de la casa y la curaduria lo
   descarto. Lo que falta es la FOTO, no el archivo. Son 149 piezas, y 139 de
   ellas no conservan ninguna imagen propia.

   Esconderlas no valia: las dos piezas mas recientes del archivo estan en ese
   grupo. Asi que el hueco se compone como un cartel y el titular ocupa el
   lugar de la imagen. Deja de leerse como un fallo.

   TINTA NEGRA SOBRE PLANO DE COLOR: los cuatro tonos salen de la paleta del
   logotipo y todos dan contraste de sobra con #0A0A0A (medido: 9.9:1 el mas
   bajo, muy por encima del 4.5:1 que pide AA).
   ========================================================================== */
.pf-cartel{
	position:relative;display:flex;flex-direction:column;justify-content:flex-end;
	aspect-ratio:4/3;padding:1.1rem 1.1rem 1rem;overflow:hidden;
	text-decoration:none;color:#0A0A0A;
	background-color:var(--pf-cartel-tono,var(--pf-logo-lavanda));
}
.pf-cartel--0{--pf-cartel-tono:var(--pf-logo-verde)}
.pf-cartel--1{--pf-cartel-tono:var(--pf-logo-coral)}
.pf-cartel--2{--pf-cartel-tono:var(--pf-logo-lavanda)}
.pf-cartel--3{--pf-cartel-tono:var(--pf-logo-cian)}

/* La exclamacion de la marca, en grande y recortada: da textura sin ser ruido
   y es lo unico que hereda del logotipo descartado. Decorativa. */
.pf-cartel__marca{
	position:absolute;right:-.06em;top:-.30em;
	font-family:var(--pf-display);font-size:9rem;line-height:1;
	color:#0A0A0A;opacity:.13;pointer-events:none;user-select:none;
}
.pf-cartel__sec{
	position:relative;font-family:var(--pf-mono);font-size:.6rem;
	letter-spacing:.18em;text-transform:uppercase;margin-bottom:.5rem;
	color:#0A0A0A;opacity:.78;
}
.pf-cartel__t{
	position:relative;font-family:var(--pf-display);
	font-size:clamp(1.05rem,1.7vw,1.5rem);line-height:1.06;
	letter-spacing:-.015em;text-transform:uppercase;color:#0A0A0A;
	/* Un titular de archivo puede ser larguisimo: se acota a 5 lineas para que
	   el cartel no reviente el compas del muro. */
	display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
}
.pf-pieza:hover .pf-cartel__t{text-decoration:underline;text-underline-offset:3px}
.pf-cartel:focus-visible{outline:3px solid #0A0A0A;outline-offset:-3px}

/* --- CARTEL CON FOTOGRAFIA DE ARCHIVO ------------------------------------
   La pieza nunca tuvo foto propia (medido: el sitio original ya emitia el logo
   como og:image en 141 notas). En vez de un plano de color se usa una imagen
   del archivo con tratamiento fuerte, y el cartel DECLARA que no le pertenece.

   El tratamiento no es un capricho estetico: la foto tiene que leerse como
   TEXTURA y no como documento del hecho que narra la nota. Por eso va en
   duotono duro, oscurecida y tramada. Si pareciera una portada normal, estaria
   afirmando algo falso.

   El titular es blanco sobre el velo oscuro, no sobre la foto cruda: asi el
   contraste no depende de que salga una foto clara o una oscura. */
.pf-cartel--foto{ background-color:#0A0A0A; }

.pf-cartel__fondo{
	position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
	/* Duotono: se desatura y se endurece el contraste antes de teñir. */
	/* Se conserva un resto de color (grayscale .82, no 1): en pantalla, el
	   duotono absoluto volvia a leerse como plano de color y era justo lo que
	   se queria evitar. Con este ajuste la fotografia se reconoce como
	   fotografia y sigue sin competir con el titular. */
	filter:grayscale(.82) contrast(1.12) brightness(.62);
	z-index:0;
}
/* El velo tiñe con el tono de la pieza y garantiza la legibilidad del titular.
   Va en degradado: mas denso abajo, que es donde cae el texto. */
.pf-cartel__velo{
	position:absolute;inset:0;z-index:1;pointer-events:none;
	background-image:linear-gradient(
		to bottom,
		rgba(10,10,10,.18) 0%,
		rgba(10,10,10,.52) 48%,
		rgba(10,10,10,.88) 100%);
	/* TIÑE, NO RELLENA. Aqui habia `box-shadow:inset 0 0 0 100vmax var(--tono)`
	   con el tono OPACO: cubria el cartel entero y la fotografia no se veia en
	   absoluto: el resultado era el mismo plano de color que se queria evitar.
	   Visto en pantalla y confirmado en el DOM (el box-shadow computado salia
	   `rgb(34,249,138) 0 0 0 1440px inset`).

	   Con `color-mix` el tono entra al 20% y la foto se mantiene debajo. Si el
	   navegador no entiende `color-mix`, la declaracion se descarta y la foto
	   se ve sin teñir: degrada bien, nunca a un plano opaco. */
	box-shadow:inset 0 0 0 100vmax color-mix(in srgb, var(--pf-cartel-tono, transparent) 9%, transparent);
}
/* La trama: lineas finas de semitono. Es lo que remata el aire de impresion y
   lo que impide que la foto se confunda con una portada real. */
.pf-cartel__trama{
	position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.22;
	background-image:repeating-linear-gradient(
		0deg, rgba(0,0,0,.55) 0px, rgba(0,0,0,.55) 1px, transparent 1px, transparent 3px);
}
.pf-cartel--foto .pf-cartel__marca{ color:#FFFFFF;opacity:.16;z-index:3 }
.pf-cartel--foto .pf-cartel__sec{ color:#FFFFFF;opacity:.92;z-index:3 }
.pf-cartel--foto .pf-cartel__t{
	color:#FFFFFF;z-index:3;
	/* Sombra corta: sostiene el titular si una zona de la foto sale clara. */
	text-shadow:0 1px 10px rgba(0,0,0,.75);
}
.pf-cartel--foto .pf-cartel__t{ -webkit-line-clamp:4 }

/* El aviso. Va SIEMPRE visible: es informacion, no un adorno.
   🔴 Y HAY QUE PINTARLO COMO TAL. Estaba en `.55rem` (8,8px medidos a 375px)
   con `opacity:.72`, o sea: el codigo decia «esto es informacion» y lo dibujaba
   como letra pequena de contrato. Este aviso es la garantia de honestidad de
   todo el cartel —declara que la fotografia NO pertenece a la pieza— y si no se
   lee, el cartel esta afirmando algo falso por omision. Sube a 9,9px, y a
   10,9px en movil, que es donde mas cerca se tiene la pantalla y menos se ve. */
.pf-cartel__aviso{
	position:relative;z-index:3;margin-top:.6rem;
	font-family:var(--pf-mono);font-size:.62rem;letter-spacing:.08em;
	text-transform:uppercase;color:#FFFFFF;opacity:.92;line-height:1.35;
	/* sombra suave: el aviso cae sobre fotografia y no siempre hay velo debajo */
	text-shadow:0 1px 6px rgba(0,0,0,.85);
}
@media (max-width:640px){
	.pf-cartel__aviso{ font-size:.68rem; letter-spacing:.06em }
}
.pf-cartel--foto:focus-visible{ outline:3px solid #FFFFFF;outline-offset:-3px }

@media (prefers-reduced-motion:reduce){
	.pf-cartel__fondo{transition:none}
}