/* ==========================================================================
   PACIFISTA — «¡Pacifista! Films»  ·  catálogo de vídeo del canal de YouTube
   Piel V2 (cyber brutalista). Todo con tokens --pf-*; scoped a .pf-films.
   Facade de privacidad: se pinta la carátula y el iframe sólo se carga al pulsar.
   ========================================================================== */

.pf-films{
	max-width: var(--pf-maxw);
	margin: 0 auto;
	padding: var(--pf-s-7) var(--pf-gutter) var(--pf-s-9);
	color: var(--pf-tinta);
}

/* --- Cabecera de la sección ------------------------------------------- */
.pf-films__head{
	border-bottom: 1px solid var(--pf-linea);
	padding-bottom: var(--pf-s-5);
	margin-bottom: var(--pf-s-6);
}
.pf-films__kicker{
	font-family: var(--pf-mono);
	font-size: var(--pf-t-xs);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--pf-k-cl);
	margin: 0 0 var(--pf-s-3);
	display: flex;
	align-items: center;
	gap: var(--pf-s-2);
}
.pf-films__kicker::before{ content: "["; color: var(--pf-tinta-3); }
.pf-films__kicker::after{  content: "]"; color: var(--pf-tinta-3); }

.pf-films__title{
	font-family: var(--pf-display);
	font-weight: 400;
	line-height: var(--pf-lh-tight);
	font-size: var(--pf-t-3xl);
	text-transform: uppercase;
	margin: 0;
	letter-spacing: -.01em;
}
.pf-films__title em{ font-style: normal; color: var(--pf-k-cl); }

.pf-films__lead{
	font-family: var(--pf-body);
	font-size: var(--pf-t-md);
	line-height: var(--pf-lh-body);
	color: var(--pf-tinta-2);
	max-width: var(--pf-medida);
	margin: var(--pf-s-4) 0 0;
}

/* --- Destacado: último estreno (tira sutil, estilo «voz del pueblo») ----
   Tarjeta compacta de terminal: miniatura pequeña + etiqueta mono con punto +
   título y una línea + flecha. NADA de banner a sangre. */
.pf-films__feature{
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--pf-s-4);
	margin-bottom: var(--pf-s-6);
	padding: var(--pf-s-3);
	border: 1px solid var(--pf-linea);
	background: var(--pf-prensa);
	text-decoration: none;
	color: var(--pf-tinta);
	transition: border-color var(--pf-dur-micro) var(--pf-ease), background var(--pf-dur-micro) var(--pf-ease);
}
.pf-films__feature:hover{ border-color: var(--pf-k); background: var(--pf-blanco); }

.pf-films__feature-thumb{
	flex: 0 0 auto;
	width: clamp(84px, 16vw, 148px);
	aspect-ratio: 16/9;
	object-fit: cover;
	display: block;
	filter: saturate(1.05);
}

.pf-films__feature-body{
	flex: 1 1 auto;
	display: flex; flex-direction: column; gap: 4px;
	min-width: 0;
}
.pf-films__feature-tag{
	display: inline-flex; align-items: center; gap: .7ch;
	font-family: var(--pf-mono); font-size: var(--pf-t-xs); text-transform: uppercase;
	letter-spacing: .16em; color: var(--pf-tinta-3);
}
.pf-films__feature-dot{
	width: 8px; height: 8px; border-radius: 50%;
	background: #FF5A34;                     /* el coral del documental */
	box-shadow: 0 0 0 0 rgba(255,90,52,.6);
	animation: pf-feat-blink 2.4s ease-in-out infinite;
}
@keyframes pf-feat-blink{ 0%,100%{ opacity: 1; } 50%{ opacity: .35; } }

.pf-films__feature-line{
	display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .8rem;
	min-width: 0;
}
.pf-films__feature-title{
	font-family: var(--pf-cond); font-weight: 700;
	font-size: var(--pf-t-lg); line-height: 1.05; letter-spacing: .01em;
	text-transform: uppercase;
}
.pf-films__feature-desc{
	font-family: var(--pf-body); font-size: var(--pf-t-sm); color: var(--pf-tinta-2);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.pf-films__feature-cta{
	flex: 0 0 auto;
	font-family: var(--pf-mono); font-size: var(--pf-t-xs); text-transform: uppercase;
	letter-spacing: .12em; color: var(--pf-k-cl);
	white-space: nowrap;
}
.pf-films__feature-cta span{ transition: transform var(--pf-dur-micro) var(--pf-ease); display: inline-block; }
.pf-films__feature:hover .pf-films__feature-cta span{ transform: translateX(4px); }

@media (max-width: 560px){
	.pf-films__feature-desc{ display: none; }       /* en móvil, sólo título */
	.pf-films__feature-cta{ font-size: 0; }          /* sólo la flecha */
	.pf-films__feature-cta span{ font-size: var(--pf-t-md); }
}
@media (prefers-reduced-motion: reduce){
	.pf-films__feature-dot{ animation: none; }
	.pf-films__feature:hover .pf-films__feature-cta span{ transform: none; }
}

/* --- Barra de estado + buscador (terminal) ---------------------------- */
.pf-films__bar{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pf-s-4);
	margin-bottom: var(--pf-s-6);
}
.pf-films__stat{
	font-family: var(--pf-mono);
	font-size: var(--pf-t-sm);
	color: var(--pf-tinta-3);
}
.pf-films__stat b{ color: var(--pf-tinta); font-weight: 600; }
.pf-films__stat a{ color: var(--pf-k-cl); text-decoration: none; }
.pf-films__stat a:hover{ text-decoration: underline; }

.pf-films__search{
	display: flex;
	align-items: center;
	gap: var(--pf-s-2);
	border: 1px solid var(--pf-linea-f);
	background: var(--pf-prensa);
	padding: var(--pf-s-2) var(--pf-s-3);
	min-width: min(320px, 100%);
}
.pf-films__search::before{
	content: ">";
	font-family: var(--pf-mono);
	color: var(--pf-k-cl);
}
.pf-films__search input{
	flex: 1;
	background: transparent;
	border: 0;
	color: var(--pf-tinta);
	font-family: var(--pf-mono);
	font-size: var(--pf-t-sm);
	outline: none;
}
.pf-films__search input::placeholder{ color: var(--pf-tinta-3); }

/* --- La rejilla -------------------------------------------------------- */
.pf-films__grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--pf-s-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.pf-film{
	position: relative;
	border: 1px solid var(--pf-linea);
	background: var(--pf-blanco);
	transition: border-color var(--pf-dur-micro) var(--pf-ease),
	            box-shadow var(--pf-dur-micro) var(--pf-ease),
	            transform var(--pf-dur-micro) var(--pf-ease);
}
.pf-film:hover,
.pf-film:focus-within{
	border-color: var(--pf-k);
	box-shadow: var(--pf-glow-hover);
	transform: translateY(-2px);
}
.pf-film[hidden]{ display: none; }

/* El disparador (facade): ocupa toda la carátula. */
.pf-film__play{
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: #000;
	cursor: pointer;
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.pf-film__thumb{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: .82;
	transition: opacity var(--pf-dur-micro) var(--pf-ease),
	            transform var(--pf-dur-enter) var(--pf-ease);
}
.pf-film:hover .pf-film__thumb,
.pf-film:focus-within .pf-film__thumb{ opacity: 1; transform: scale(1.03); }

/* Botón de play central */
.pf-film__glyph{
	position: absolute;
	inset: 0;
	margin: auto;
	width: 62px;
	height: 62px;
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--pf-k) 88%, transparent);
	color: var(--pf-sobre-k);
	transition: transform var(--pf-dur-micro) var(--pf-ease-punk);
}
.pf-film__glyph svg{ width: 24px; height: 24px; margin-left: 3px; }
.pf-film:hover .pf-film__glyph,
.pf-film:focus-within .pf-film__glyph{ transform: scale(1.12); }

/* Chip de duración */
.pf-film__dur{
	position: absolute;
	right: var(--pf-s-2);
	bottom: var(--pf-s-2);
	font-family: var(--pf-mono);
	font-size: var(--pf-t-xs);
	background: rgba(0,0,0,.82);
	color: #fff;
	padding: 2px 6px;
	letter-spacing: .04em;
}

.pf-film__body{
	padding: var(--pf-s-3) var(--pf-s-4) var(--pf-s-4);
}
.pf-film__caption{
	font-family: var(--pf-cond);
	font-size: var(--pf-t-md);
	line-height: var(--pf-lh-snug);
	color: var(--pf-tinta);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Estado sin resultados del buscador */
.pf-films__empty{
	display: none;
	font-family: var(--pf-mono);
	font-size: var(--pf-t-sm);
	color: var(--pf-tinta-3);
	padding: var(--pf-s-6) 0;
}
.pf-films__empty::before{ content: "> "; color: var(--pf-k-cl); }

/* --- Móvil ------------------------------------------------------------- */
@media (max-width: 640px){
	.pf-films{ padding: var(--pf-s-6) var(--pf-gutter) var(--pf-s-8); }
	.pf-films__grid{ grid-template-columns: 1fr; }
	.pf-films__bar{ flex-direction: column; align-items: stretch; }
	.pf-films__search{ min-width: 0; }
}

@media (prefers-reduced-motion: reduce){
	.pf-film,
	.pf-film__thumb,
	.pf-film__glyph{ transition: none; }
	.pf-film:hover{ transform: none; }
	.pf-film:hover .pf-film__thumb{ transform: none; }
}