/* ==========================================================================
   CABECERA + OVERLAY — CYBER BRUTALISTA V2
   --------------------------------------------------------------------------
   Cabecera limpia: logo + navegación entre MARCAS + burger. Todo lo demás
   (secciones, buscador) vive en el overlay, que se enciende como una pantalla.
   Portado de `04-cyberpunk/05-plantilla-portada.html`.
   ========================================================================== */

.pf-header{
	border-bottom:1px solid var(--pf-linea);
	background-color:var(--pf-cabecera);backdrop-filter:blur(10px);
	position:sticky;top:0;z-index:60;
	transition:background-color .3s var(--pf-ease);
}
.pf-header__inner{
	display:flex;align-items:center;gap:1.4rem;padding:.7rem var(--pf-gutter);
	max-width:var(--pf-maxw);margin:0 auto;
	/* 🔴 LONGHANDS, NUNCA EL ATAJO `padding`. Es la MISMA trampa que ya costó
	   el texto blanco sobre blanco del portal, ahora en otra propiedad: si se
	   transiciona un atajo cuyo valor lleva un `var()` dentro
	   —aquí `padding:.7rem var(--pf-gutter)`—, el navegador no completa la
	   interpolación y deja PEGADO el valor anterior. Medido en este mismo
	   header: con `transition:padding` el padding se quedaba en 11,2px; con los
	   longhands baja a los 5,6px que toca. */
	transition:padding-top .3s var(--pf-ease),padding-bottom .3s var(--pf-ease);
}

/* --- CABECERA COMPRIMIDA -------------------------------------------------
   Al bajar se encoge y se opaca, pero NO se va: es `position:sticky` y ahí se
   queda. El JS sólo pone y quita esta clase (una vez por cambio de estado);
   toda la animación la resuelve el CSS. Antes esto lo hacían dos ScrollTrigger
   lanzando tweens en cada frame, que es de donde venía el tirón al desplazarse.

   `background-color` en longhand, nunca el atajo `background`: la trampa que
   ya costó un fallo en el portal —el navegador no completa la interpolación
   cuando el fondo viene por atajo y deja pegado el valor anterior—. */
/* El centinela: 90px invisibles en lo alto del documento. Mientras se vea,
   estamos arriba. Lo inserta el JS y no ocupa espacio ni recibe eventos. */
.pf-centinela{
	position:absolute;top:0;left:0;width:1px;height:90px;
	pointer-events:none;visibility:hidden;
}
.pf-header--compacta{ background-color:var(--pf-cabecera-f); }
.pf-header--compacta .pf-header__inner{ padding-top:.35rem;padding-bottom:.35rem; }
.pf-header--compacta .pf-logo img{ height:34px; }

@media (prefers-reduced-motion:reduce){
	.pf-header,.pf-header__inner,.pf-logo img{transition:none}
}
/* el filete de acento que barre el borde inferior (lo anima el JS) */
.pf-header__filete{
	position:absolute;left:0;bottom:-1px;height:1px;width:0;z-index:2;
	background:var(--pf-k);box-shadow:0 0 10px var(--pf-k);
}
.pf-logo{display:flex;align-items:center;flex:0 0 auto}
.pf-logo img{
	height:clamp(38px,5vw,58px);width:auto;display:block;
	/* `height` ya es longhand; se deja explícito por simetría con el bloque de
	   arriba y para que nadie lo convierta en un atajo al refactorizar. */
	transition:height .3s var(--pf-ease);
}

/* --- navegación entre marcas (sólo desktop; en móvil queda el logo) ----- */
.pf-marcas{
	display:none;align-items:center;gap:1.1rem;font-family:var(--pf-mono);font-size:.7rem;
	letter-spacing:.12em;text-transform:uppercase;padding-left:1.3rem;
	border-left:1px solid var(--pf-linea);
}
.pf-marcas a{color:var(--pf-tinta-2);text-decoration:none;position:relative;padding-bottom:2px}
.pf-marcas a::after{
	content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--pf-k);
	transform:scaleX(0);transform-origin:left;transition:transform .3s var(--pf-ease);
}
.pf-marcas a:hover{color:var(--pf-tinta)}
.pf-marcas a:hover::after,
.pf-marcas a[aria-current]::after{transform:scaleX(1)}
.pf-marcas a[aria-current]{color:var(--pf-tinta)}

/* --- acceso a la BASE DE CONOCIMIENTO -----------------------------------
   Vive en la fila de marcas pero NO es una marca: es la puerta al archivo
   consultable. Se distingue con el corchete de la V2 y el acento, para que se
   lea como acción y no como una tercera cabecera del medio. Sin subrayado
   animado: ese gesto es de las marcas. */
/* Las DOS marcas-portal se boxean; el color es su IDENTIDAD FIJA, no el acento
   del día: la Base de Conocimiento (= Centro de Memoria) en ROJO, Pacifista Films
   en AZUL. Definidos en `--pf-cm-rojo` / `--pf-films-azul` (ver más abajo), con
   variante AA por tema. `Pacifista` a secas se queda como enlace de marca. */
.pf-marcas .pf-marcas__bc,
.pf-marcas .pf-marcas__films{
	padding:.34rem .6rem;line-height:1;white-space:nowrap;
	transition:background .25s var(--pf-ease),color .25s var(--pf-ease);
}
.pf-marcas .pf-marcas__bc{ color:var(--pf-cm-rojo);border:1px solid var(--pf-cm-rojo) }
.pf-marcas .pf-marcas__films{ color:var(--pf-films-azul);border:1px solid var(--pf-films-azul) }
.pf-marcas .pf-marcas__bc::before,
.pf-marcas .pf-marcas__films::before{content:"[ ";opacity:.6}
.pf-marcas .pf-marcas__bc::after,
.pf-marcas .pf-marcas__films::after{
	content:" ]";opacity:.6;position:static;width:auto;height:auto;
	background:none;transform:none;
}
.pf-marcas .pf-marcas__bc:hover,
.pf-marcas .pf-marcas__bc:focus-visible{
	background:var(--pf-cm-rojo);color:var(--pf-sobre-k);outline:none;
}
.pf-marcas .pf-marcas__films:hover,
.pf-marcas .pf-marcas__films:focus-visible{
	background:var(--pf-films-azul);color:var(--pf-sobre-k);outline:none;
}
.pf-marcas .pf-marcas__bc:hover::before,
.pf-marcas .pf-marcas__bc:hover::after,
.pf-marcas .pf-marcas__films:hover::before,
.pf-marcas .pf-marcas__films:hover::after{opacity:1}

@media (min-width:720px){ .pf-marcas{display:flex} }

/* --- LAS MARCAS DENTRO DEL OVERLAY — sólo móvil -------------------------
   Espejo de la fila de marcas del header, que bajo 720px se oculta. Aquí las
   marcas vuelven a ser alcanzables dentro del índice. Se oculta en escritorio
   (allí manda la fila de arriba) para no duplicar. */
.pf-menu-marcas{
	display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.1rem;
	font-family:var(--pf-mono);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
	padding-bottom:1.1rem;margin-bottom:1.3rem;border-bottom:1px solid var(--pf-linea);
}
.pf-menu-marcas a{color:var(--pf-tinta);text-decoration:none}
.pf-menu-marcas a:hover,.pf-menu-marcas a:focus-visible{color:var(--pf-k-cl)}
/* Las dos marcas-portal boxeadas con su color de identidad FIJO (ver header
   escritorio arriba): Base de Conocimiento en ROJO, Pacifista Films en AZUL. */
.pf-menu-marcas__bc,
.pf-menu-marcas__films{
	padding:.34rem .6rem;line-height:1;white-space:nowrap;
	transition:background .25s var(--pf-ease),color .25s var(--pf-ease);
}
.pf-menu-marcas__bc{ color:var(--pf-cm-rojo);border:1px solid var(--pf-cm-rojo) }
.pf-menu-marcas__films{ color:var(--pf-films-azul);border:1px solid var(--pf-films-azul) }
.pf-menu-marcas__bc::before,
.pf-menu-marcas__films::before{content:"[ ";opacity:.6}
.pf-menu-marcas__bc::after,
.pf-menu-marcas__films::after{content:" ]";opacity:.6}
.pf-menu-marcas__bc:hover,.pf-menu-marcas__bc:focus-visible{background:var(--pf-cm-rojo);color:var(--pf-sobre-k);outline:none}
.pf-menu-marcas__films:hover,.pf-menu-marcas__films:focus-visible{background:var(--pf-films-azul);color:var(--pf-sobre-k);outline:none}
/* Estas dos ganan a la regla genérica `.pf-menu-marcas a:hover` de arriba:
   en hover mandan sus colores de caja, no el acento. */
.pf-menu-marcas a.pf-menu-marcas__bc:hover{color:var(--pf-sobre-k)}
.pf-menu-marcas a.pf-menu-marcas__films:hover{color:var(--pf-sobre-k)}
@media (min-width:720px){ .pf-menu-marcas{display:none} }

/* --- burger ------------------------------------------------------------- */
.pf-burger{
	margin-left:auto;flex:0 0 auto;width:56px;height:38px;background:none;
	border:1px solid var(--pf-linea);cursor:pointer;position:relative;padding:0;
	transition:border-color .25s;
}
.pf-burger:hover{border-color:var(--pf-k)}
.pf-burger span{
	display:block;position:absolute;left:14px;right:14px;height:2px;background:var(--pf-tinta);
	transition:transform .38s var(--pf-ease),opacity .2s,background .25s;
}
.pf-burger span:nth-child(1){top:12px}
.pf-burger span:nth-child(2){top:18px}
.pf-burger span:nth-child(3){top:24px}
.pf-burger:hover span{background:var(--pf-k)}
.pf-burger b{
	position:absolute;right:-2.7rem;top:50%;transform:translateY(-50%);
	font-family:var(--pf-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
	color:var(--pf-tinta-2);font-weight:400;display:none;
}
@media (min-width:720px){ .pf-burger b{display:block} .pf-burger{margin-right:2.7rem} }
.pf-burger[aria-expanded="true"]{border-color:var(--pf-k)}
.pf-burger[aria-expanded="true"] span{background:var(--pf-k)}
.pf-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.pf-burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(0)}
.pf-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

body[data-menu="abierto"]{overflow:hidden}
body[data-menu="abierto"] .pf-header{
	z-index:95;background:transparent;backdrop-filter:none;border-bottom-color:transparent;
}
body[data-menu="abierto"] .pf-marcas{opacity:0;pointer-events:none;transition:opacity .25s}

/* ==========================================================================
   EL OVERLAY — la pantalla que se enciende
   ========================================================================== */
.pf-overlay{
	position:fixed;inset:0;z-index:90;background:var(--pf-overlay);
	visibility:hidden;clip-path:inset(0 0 100% 0);
}
.pf-overlay[data-abierto="true"]{visibility:visible}
/* retícula técnica de fondo */
.pf-overlay::before{
	content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
	background:linear-gradient(var(--pf-linea) 1px,transparent 1px) 0 0/100% 84px,
	           linear-gradient(90deg,var(--pf-linea) 1px,transparent 1px) 0 0/84px 100%;
}
/* línea de barrido del encendido */
.pf-overlay__scan{
	position:absolute;left:0;right:0;top:-160px;height:160px;pointer-events:none;z-index:2;
	background:linear-gradient(to bottom,transparent,
		color-mix(in srgb, var(--pf-k) 13%, transparent),transparent);
}
.pf-overlay__inner{
	position:relative;z-index:3;height:100%;display:flex;flex-direction:column;
	max-width:var(--pf-maxw);margin:0 auto;padding:var(--pf-gutter);
}
.pf-overlay__cab{
	display:flex;align-items:center;gap:.7rem;font-family:var(--pf-mono);font-size:.64rem;
	letter-spacing:.2em;text-transform:uppercase;color:var(--pf-k);
	padding-bottom:1.2rem;border-bottom:1px solid var(--pf-linea);
}
.pf-overlay__cab .pf-n{margin-left:auto;color:var(--pf-tinta-3)}

/* --- el índice: 8 secciones en Archivo Black ---------------------------- */
.pf-menu-secciones{
	flex:1;display:flex;flex-direction:column;justify-content:center;
	padding:clamp(.8rem,3vh,2.4rem) 0;
}
.pf-nav-it{
	display:flex;align-items:baseline;gap:clamp(.7rem,2vw,1.8rem);text-decoration:none;
	padding:clamp(.2rem,.9vh,.55rem) 0;position:relative;color:var(--pf-tinta);
}
.pf-nav-it .pf-idx{
	font-family:var(--pf-mono);font-size:.68rem;color:var(--pf-tinta-3);flex:0 0 2.4rem;
	transition:color .25s;
}
.pf-nav-it .pf-txt{
	font-family:var(--pf-display);font-size:clamp(1.3rem,4.4vw,3.2rem);line-height:1.02;
	letter-spacing:-.03em;text-transform:uppercase;position:relative;display:inline-block;
	transition:transform .34s var(--pf-ease),color .25s;
}
.pf-nav-it .pf-cnt{
	margin-left:auto;font-family:var(--pf-mono);font-size:.66rem;color:var(--pf-tinta-3);
	opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s;
}
.pf-nav-it:hover .pf-idx{color:var(--pf-k)}
.pf-nav-it:hover .pf-txt{transform:translateX(clamp(.4rem,1.2vw,1.2rem));color:var(--pf-tinta)}
.pf-nav-it:hover .pf-cnt{opacity:1;transform:none}
/* separación RGB al pasar el cursor */
.pf-nav-it .pf-txt::before,
.pf-nav-it .pf-txt::after{
	content:attr(data-t);position:absolute;left:0;top:0;width:100%;
	opacity:0;pointer-events:none;transition:opacity .12s;
}
.pf-nav-it .pf-txt::before{color:var(--pf-logo-coral);transform:translateX(-3px)}
.pf-nav-it .pf-txt::after{color:var(--pf-logo-cian);transform:translateX(3px)}
.pf-nav-it:hover .pf-txt::before,
.pf-nav-it:hover .pf-txt::after{opacity:.5}
.pf-nav-it::after{
	content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--pf-k);
	transform:scaleX(0);transform-origin:left;transition:transform .4s var(--pf-ease);
}
.pf-nav-it:hover::after{transform:scaleX(1)}

/* --- buscador ----------------------------------------------------------- */
.pf-menu-buscar{display:flex;gap:.6rem;margin-bottom:1rem}
.pf-menu-buscar input{
	flex:1;background:transparent;border:1px solid var(--pf-linea);color:var(--pf-tinta);
	font-family:var(--pf-mono);font-size:.76rem;padding:.6rem .8rem;
	transition:border-color .25s;
}
.pf-menu-buscar input:focus{outline:none;border-color:var(--pf-k)}
.pf-menu-buscar input::placeholder{color:var(--pf-tinta-3)}
.pf-menu-buscar button{
	background:var(--pf-k);color:var(--pf-sobre-k);border:0;padding:.6rem 1.2rem;
	font-family:var(--pf-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
}

/* --- pie del overlay ---------------------------------------------------- */
.pf-overlay__pie{
	display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;align-items:center;padding-top:1.2rem;
	border-top:1px solid var(--pf-linea);font-family:var(--pf-mono);font-size:.64rem;color:var(--pf-tinta-3);
}
.pf-overlay__pie b{color:var(--pf-k);font-weight:500}
.pf-overlay__pie .pf-der{margin-left:auto}

/* --- marcas de esquina -------------------------------------------------- */
.pf-esq{position:absolute;width:16px;height:16px;border:1px solid var(--pf-k);opacity:.5;z-index:4}
.pf-esq--a{top:14px;left:14px;border-right:0;border-bottom:0}
.pf-esq--b{top:14px;right:14px;border-left:0;border-bottom:0}
.pf-esq--c{bottom:14px;left:14px;border-right:0;border-top:0}
.pf-esq--d{bottom:14px;right:14px;border-left:0;border-top:0}

/* el gesto del panfleto (garabato bajo el formato) ya no aplica */
.pf-menu-formato svg{display:none}

/* ==========================================================================
   TICKER — cromo de terminal
   ========================================================================== */
.pf-ticker{
	background:var(--pf-blanco);border-top:1px solid var(--pf-linea);
	border-bottom:1px solid var(--pf-linea);padding:.5rem 0;
	/* la banda es UNA línea que se desplaza: sin esto el contenido se apila */
	overflow:hidden;white-space:nowrap;position:relative;z-index:3;
}
.pf-ticker__track{
	display:inline-flex;align-items:center;gap:3rem;
	white-space:nowrap;will-change:transform;
}
.pf-ticker__item{
	font-family:var(--pf-mono);font-size:.66rem;font-weight:500;letter-spacing:.16em;
	text-transform:uppercase;color:var(--pf-tinta-2);white-space:nowrap;
}
.pf-ticker__item--acido,
.pf-ticker__item--magenta{color:var(--pf-k-cl)}
a.pf-ticker__item:hover{color:var(--pf-tinta);text-decoration:none}

/* ==========================================================================
   INTERRUPTOR CLARO / OSCURO (P2)
   Vive en la cabecera, junto al burger. Discreto: es una preferencia de
   lectura, no una acción editorial.
   ========================================================================== */
.pf-tema{
	display:inline-flex;align-items:center;justify-content:center;
	width:34px;height:34px;flex:0 0 auto;
	margin-left:auto;
	border:1px solid var(--pf-linea);
	color:var(--pf-tinta-2);
	cursor:pointer;
	transition:border-color var(--pf-dur-micro) var(--pf-ease),
	           color var(--pf-dur-micro) var(--pf-ease);
}
/* Cuando hay burger a la derecha, el botón deja de empujar. */
.pf-header__inner .pf-tema + .pf-burger{ margin-left:.6rem }
.pf-tema:hover,
.pf-tema:focus-visible{ border-color:var(--pf-k); color:var(--pf-k); outline:none }
.pf-tema:focus-visible{ outline:2px solid var(--pf-k); outline-offset:2px }
.pf-tema svg{ width:16px;height:16px;flex:0 0 auto }

/* Cada icono anuncia A DÓNDE lleva: en oscuro se ofrece el sol, en claro la luna. */
.pf-tema .pf-ico-luna{ display:none }
html[data-tema="claro"] .pf-tema .pf-ico-luna{ display:block }
html[data-tema="claro"] .pf-tema .pf-ico-sol{ display:none }

/* 🔴 AL CAMBIAR DE TEMA SE SUSPENDEN LAS TRANSICIONES EN TODO EL DOCUMENTO.
   Un cambio de tema conmuta la paleta entera: animar decenas de propiedades a
   la vez es ruido. Y sobre todo, con `transition` activa sobre un valor que
   viene de `var()` el navegador no siempre completa la interpolación y deja el
   color ANTERIOR pegado — la trampa que en este proyecto ya ha mordido cuatro
   veces, y que en el portal dejó una ficha blanca con texto blanco (1,12:1)
   devolviendo HTTP 200. El cambio tiene que ser instantáneo. */
html.pf-sin-transicion,
html.pf-sin-transicion *,
html.pf-sin-transicion *::before,
html.pf-sin-transicion *::after{
	transition:none !important;
	animation-duration:0s !important;
}

/* --- El lienzo claro y la cabecera ---------------------------------------
   La cabecera es translúcida con `backdrop-filter`; en claro necesita su
   propio borde inferior, porque el que tenía se apoyaba en el contraste con
   el negro. */
html[data-tema="claro"] .pf-header{
	border-bottom:1px solid var(--pf-linea);
}

/* ==========================================================================
   ACCESO DESTACADO DEL ÍNDICE — Centro de Memoria
   --------------------------------------------------------------------------
   Pedido del cliente (4-sep): SÓLO el acceso al Centro de Memoria resalta en
   ROJO (con glitch) sobre las 8 secciones. El atajo a ESPECIALES se añade justo
   encima (lo monta `inc/navegacion.php`) pero es un acceso NORMAL, sin color
   especial: no lleva la clase `--destacado`.

   🔴 EL ROJO ES FIJO Y NO ENTRA EN LA ALEATORIZACIÓN. `pf-acento.js` sólo
   reescribe `--pf-k`, `--pf-k-cl` y `--pf-k-os`; estas variables las ignora, así
   que estos dos accesos cantan en rojo sea cual sea el acento del día.

   🔴 DOS VALORES POR TEMA. El overlay es casi negro en oscuro (#050506) y casi
   blanco en claro (#FBFAF7): ningún rojo único pasa AA en ambos. Medido:
   #FF5061 sobre #050506 = 5,9:1 · #CE1B2B sobre #FBFAF7 = 5,3:1. Ambos AA.
   ========================================================================== */
:root{
	--pf-cm-rojo:   #FF5061;   /* rojo sobre lienzo OSCURO (overlay negro) */
	--pf-cm-rojo-b: #FF2740;   /* el canal desplazado del glitch */

	/* 🔵 AZUL FIJO de «Pacifista Films» — mismo criterio que el rojo del Centro
	   de Memoria: DOS valores, uno por lienzo, para que pase AA en ambos y no
	   dependa del acento del día. Medido: #3B9EFF sobre #050506 = 7,3:1 ·
	   #1668C7 sobre #FBFAF7 = 5,2:1. Ambos AA incluso a tamaño de texto pequeño. */
	--pf-films-azul: #3B9EFF;   /* azul sobre lienzo OSCURO (overlay) */
}
html[data-tema="claro"] body{
	--pf-cm-rojo:   #CE1B2B;   /* rojo AA sobre lienzo CLARO */
	--pf-cm-rojo-b: #E23140;
	--pf-films-azul: #1668C7;   /* azul AA sobre lienzo CLARO */
}

/* Base del ítem destacado: número/símbolo, palabra y filete en rojo. */
.pf-nav-it--destacado .pf-idx{ color:var(--pf-cm-rojo); opacity:.9 }
.pf-nav-it--destacado .pf-txt{ color:var(--pf-cm-rojo) }
.pf-nav-it--destacado::after{ background:var(--pf-cm-rojo) }
.pf-nav-it--destacado:hover .pf-idx{ color:var(--pf-cm-rojo) }
.pf-nav-it--destacado:hover .pf-txt{ color:var(--pf-cm-rojo) }

/* El glitch rojo. Reutiliza los MISMOS pseudo-elementos que hacen la separación
   RGB al pasar el cursor (`.pf-txt::before/::after`), pero aquí van SIEMPRE: el
   `clip-path` de `pf-g1`/`pf-g2` (definidos en portada.css) los oculta en reposo
   —igual que el glitch del titular de portada— y sólo asoma la rebanada roja en
   el pico de la animación. Sólo `transform`+`opacity`+`clip-path`. */
.pf-nav-it--destacado .pf-txt::before,
.pf-nav-it--destacado .pf-txt::after{
	opacity:1;transform:none;overflow:hidden;
}
.pf-nav-it--destacado .pf-txt::before{ color:var(--pf-cm-rojo-b);animation:pf-g1 5.2s infinite steps(1) }
.pf-nav-it--destacado .pf-txt::after { color:var(--pf-cm-rojo);  animation:pf-g2 5.2s infinite steps(1) }
/* En hover el sitio atenúa los pseudos a .5; para el destacado se mantienen. */
.pf-nav-it--destacado:hover .pf-txt::before,
.pf-nav-it--destacado:hover .pf-txt::after{ opacity:1 }

@media (prefers-reduced-motion:reduce){
	.pf-nav-it--destacado .pf-txt::before,
	.pf-nav-it--destacado .pf-txt::after{ animation:none;opacity:0 }
}

/* ==========================================================================
   PACIFISTA FILMS — acceso del índice, al fondo
   --------------------------------------------------------------------------
   La otra marca-portal dentro de la lista de secciones. En AZUL FIJO (gemelo
   del rojo del Centro de Memoria): número/play, palabra y filete en azul, SIN
   glitch —el glitch es el sello del Centro de Memoria—. El azul no entra en la
   aleatorización del acento.
   ========================================================================== */
.pf-nav-it--films .pf-idx{ color:var(--pf-films-azul); opacity:.9 }
.pf-nav-it--films .pf-txt{ color:var(--pf-films-azul) }
.pf-nav-it--films::after{ background:var(--pf-films-azul) }
.pf-nav-it--films:hover .pf-idx{ color:var(--pf-films-azul) }
.pf-nav-it--films:hover .pf-txt{ color:var(--pf-films-azul) }

/* ==========================================================================
   OVERLAY EN MÓVIL — que el índice no quede DEBAJO de la cabecera fija
   --------------------------------------------------------------------------
   Bajo 720px la cabecera (logo + tema + burger) sigue VISIBLE y translúcida
   sobre el overlay (`z-index:95`, ~67px de alto). El contenido del índice
   arrancaba en `top:0`, así que el rótulo «Índice del archivo» y la fila de
   marcas (Pacifista · Films · Base de Conocimiento) quedaban PISADOS por la
   cabecera —de ahí el filete azul cruzando «Pacifista Films»—. Se baja el
   arranque del índice para librar la cabecera. `overflow-y:auto` es la red por
   si en una pantalla muy baja el índice no cupiera; con contenido que cabe, no
   se nota. En escritorio no aplica: ahí las marcas viven en la cabecera y el
   overlay no comparte espacio con ella. */
@media (max-width:719px){
	.pf-overlay__inner{
		padding-top:calc(var(--pf-gutter) + 4.2rem);
		overflow-y:auto;
	}
	/* Con la cabecera librada arriba y un ítem más (Pacifista Films) abajo, la
	   lista aprieta en pantallas de ~800px. Se recupera el hueco ciñendo el aire
	   vertical del bloque de secciones —sólo en móvil— para que el pie
	   («ESC para cerrar» + cifras) quepa sin scroll. */
	.pf-menu-secciones{
		padding-top:clamp(.3rem,1.1vh,1rem);
		padding-bottom:clamp(.3rem,1.1vh,1rem);
	}
}