/* ========================================================================== ⛔ DESACTIVADO EN LA V2 CYBERPUNK (30-ago-2026) -------------------------------------------------------------------------- El marcador (garabatos y letra a mano) era un gesto de "El panfleto vivo": la anotación humana sobre el papel. En la dirección cyber brutalista no hay mano que dibuje: la anotación la hace la máquina (rótulos mono, corchetes de registro, cifras). Por eso la capa se oculta entera. NO se borra la hoja ni su JS: el sistema queda intacto por si se decide recuperar el gesto. Para reactivarlo, basta con quitar la regla de abajo. ========================================================================== */ .pf-mk, .pf-mk-defs{display:none !important} /* ========================================================================== EL MARCADOR — subrayados, garabatos y letra a mano encima del muro (sistema conservado, oculto por la regla de arriba) -------------------------------------------------------------------------- Todo lo de aquí es una capa que FLOTA sobre la pieza: `position:absolute` y `pointer-events:none`, así que ninguna anotación puede tapar un enlace, robar un clic ni empujar el layout. Si el CSS de esta hoja no cargara, el muro seguiría intacto. Antes de tocar nada, tres cosas que no son adorno: · `vector-effect:non-scaling-stroke` en los trazos que se ESTIRAN (subrayado y círculo se adaptan al ancho del titular). Sin él, un titular ancho deja un trazo aplastado y uno estrecho un churro gordo: se ve deformado, no dibujado a mano. · `filter:url(#pf-mk-mano)` desplaza el trazo con ruido. Es lo que quita la perfección geométrica. Se APAGA en móvil: filtros SVG sobre muchos nodos cuestan caro y en pantalla pequeña el temblor no se aprecia. · El estado inicial (invisible) va bajo `.pf-mk-js`, una clase que se pone en desde la cabecera. Sin JS —o con `prefers-reduced-motion`— los garabatos aparecen ya dibujados, quietos y completos. Nunca se pierde contenido por no poder animar. ========================================================================== */ .pf-mk{ position:absolute; z-index:8; pointer-events:none; overflow:visible; color:var(--mk-tinta, var(--pf-rojo)); transform:rotate(var(--mk-giro, 0deg)); transform-origin:50% 50%; } .pf-mk path{ fill:none; stroke:currentColor; stroke-width:6; stroke-linecap:round; stroke-linejoin:round; } /* Estado inicial SOLO cuando se va a animar. 1200 supera de largo el trazo más largo del catálogo (el círculo, ~700), así que oculta cualquiera de ellos. El `opacity:0` no sobra: con `stroke-linecap:round` un tramo visible de longitud cero se pinta como un PUNTO, y sin esto el muro amanecía sembrado de puntitos rojos. El JS enciende cada camino justo antes de trazarlo. */ .pf-mk-js .pf-mk path{ stroke-dasharray:1200; stroke-dashoffset:1202; opacity:0; } /* ========================================================================== LA PUNTA DEL LÁPIZ El JS la inyecta y la mueve por el camino mientras el trazo aparece detrás. Es lo que convierte "una línea que crece" en "alguien escribiendo". ========================================================================== */ .pf-mk__punta{ pointer-events:none; } .pf-mk__punta .pf-mk__cuerpo{ fill:var(--pf-tinta); stroke:none; } .pf-mk__punta .pf-mk__madera{ fill:#C9A227; stroke:none; } .pf-mk__punta .pf-mk__grafito{ fill:currentColor; stroke:none; } /* ========================================================================== 1. ANOTACIONES SOBRE EL TITULAR (van dentro del

) ========================================================================== */ .pf-mat__titulo{ position:relative; } .pf-mk--subrayado, .pf-mk--circulo{ stroke-width:0; /* el grosor lo fija el trazo, en px */ mix-blend-mode:multiply; } .pf-mk--subrayado path, .pf-mk--circulo path{ vector-effect:non-scaling-stroke; } .pf-mk--subrayado{ left:-2%; bottom:-.24em; width:104%; height:.5em; min-height:14px; } .pf-mk--subrayado path{ stroke-width:6px; } .pf-mk--circulo{ left:-6%; top:-9%; width:112%; height:120%; } .pf-mk--circulo path{ stroke-width:3.5px; } /* Dónde el rojo no se vería: cuerpos de color (cartel y sticker llevan el color de shock DE FONDO) y serigrafía sobre tinta. Ahí el marcador es negro, como el rotulador grueso sobre una plancha de color. */ .pf-mat--cartel .pf-mat__titulo .pf-mk, .pf-mat--sticker .pf-mat__titulo .pf-mk{ --mk-tinta:var(--pf-tinta); } .pf-mat--cartel .pf-mat__titulo .pf-mk, .pf-mat--sticker .pf-mat__titulo .pf-mk{ mix-blend-mode:normal; } /* ========================================================================== 2. ANOTACIONES SOBRE LA PIEZA (van dentro de .pf-mat) Se cuelgan del BORDE: medio dentro del afiche, medio sobre el cemento. Así se leen como algo añadido después de pegarlo, que es justo lo que son. ========================================================================== */ /* --------------------------------------------------------------------------- Sobre el GROSOR: cada garabato tiene su propio viewBox (la flecha mide 200 unidades de ancho, la admiración 90) y todos se pintan a tamaños parecidos en pantalla. Con un `stroke-width` único, el de viewBox grande sale como un pelo y el de viewBox pequeño como un brochazo. Por eso cada uno lleva el suyo: están calculados para que TODOS aterricen sobre los mismos ~3.5px reales. --------------------------------------------------------------------------- */ .pf-mk--flecha{ top:var(--mk-alto, 20%); width:38%; min-width:96px; } .pf-mk--flecha path{ stroke-width:9; } .pf-mk--flecha[data-lado="der"]{ right:-17%; } .pf-mk--flecha[data-lado="izq"]{ left:-17%; transform:rotate(var(--mk-giro,0deg)) scaleX(-1); } /* La admiración es alta y estrecha: si se dimensiona por ANCHO queda una astilla. Se dimensiona por alto y el ancho lo deduce la proporción. */ .pf-mk--admiracion{ top:var(--mk-alto, 16%); height:26%; min-height:52px; max-height:92px; width:auto; aspect-ratio:90 / 200; } .pf-mk--admiracion path{ stroke-width:11; } .pf-mk--admiracion[data-lado="der"]{ right:-4%; } .pf-mk--admiracion[data-lado="izq"]{ left:-4%; } .pf-mk--estrella, .pf-mk--asterisco{ top:var(--mk-alto, 12%); width:17%; min-width:58px; max-width:94px; } .pf-mk--estrella path{ stroke-width:8; } .pf-mk--asterisco path{ stroke-width:8; } .pf-mk--estrella[data-lado="der"], .pf-mk--asterisco[data-lado="der"]{ right:-7%; } .pf-mk--estrella[data-lado="izq"], .pf-mk--asterisco[data-lado="izq"]{ left:-7%; } /* El corchete marca un tramo entero: se estira en vertical. */ .pf-mk--corchete{ top:var(--mk-alto, 18%); height:46%; width:4%; min-width:16px; max-width:26px; } .pf-mk--corchete path{ vector-effect:non-scaling-stroke; stroke-width:5px; } .pf-mk--corchete[data-lado="izq"]{ left:-2.5%; } .pf-mk--corchete[data-lado="der"]{ right:-2.5%; transform:rotate(var(--mk-giro,0deg)) scaleX(-1); } /* La palabra escrita a mano. El ancho lo fija PHP en px según cuántas letras tenga: si se estirara en porcentaje, "OJO" y "NO OLVIDE" tendrían tamaños de letra distintos y se notaría que es un sistema. */ .pf-mk--manuscrito{ top:var(--mk-alto, 14%); max-width:56%; z-index:9; } .pf-mk--manuscrito path{ stroke-width:5; } .pf-mk--manuscrito[data-lado="der"]{ right:-6%; } .pf-mk--manuscrito[data-lado="izq"]{ left:-6%; } /* ========================================================================== 3. ANOTACIONES DE MANDO (botón de cargar más, titulares de sección) ========================================================================== */ .pf-mk--mando{ position:relative; display:block; margin:0 auto; } .pf-mas{ position:relative; } /* La flecha CAE sobre el boton: nace arriba a la derecha y su punta termina justo encima de "Cargar mas". Por eso vive en `top`, no en `bottom` — si colgara por debajo apuntaria al vacio. */ .pf-mas .pf-mk--flecha{ top:-84px; bottom:auto; right:auto; left:50%; width:118px; transform:translateX(34px) rotate(var(--mk-giro, 0deg)); --mk-tinta:var(--pf-tinta); } .pf-mas .pf-mk--manuscrito{ top:-104px; right:auto; left:50%; transform:translateX(150px) rotate(var(--mk-giro, 0deg)); --mk-tinta:var(--pf-tinta); } @media (max-width:719px){ .pf-mas .pf-mk--flecha{ display:none; } } .pf-relacionadas > h2{ position:relative; display:inline-block; } .pf-relacionadas .pf-mk--subrayado{ --mk-tinta:var(--pf-acido); mix-blend-mode:normal; } /* La nota: aquí manda la calma editorial. Solo el rótulo de sección lleva marca — el cuerpo de una nota grave no se raya. */ .pf-nota__seccion{ position:relative; display:inline-block; } .pf-nota__seccion .pf-mk--subrayado{ bottom:-11px; left:0; width:100%; --mk-tinta:var(--pf-tinta); mix-blend-mode:normal; } /* ========================================================================== 4. LÍMITES ========================================================================== */ /* Móvil. ¡PACIFISTA! se lee en el celular, así que la capa de marcador NO se retira ahí: se reacomoda. Todo lo que cabe dentro de la pieza (la palabra escrita, la admiración, la estrella, el asterisco, el subrayado y el círculo del titular) se ancla DENTRO, contra el borde derecho, en vez de colgarse fuera — en una sola columna, lo que cuelga invade a la vecina. Solo desaparecen los dos que necesitan sitio en horizontal por definición: la flecha, que sin recorrido no señala nada, y el corchete, que marca un margen que en el celular no existe. Y se apaga el filtro de temblor: filtros SVG sobre varios nodos son el coste real de todo esto, y en pantalla pequeña la irregularidad no se aprecia. Se paga donde se ve. */ @media (max-width:719px){ .pf-mk{ filter:none !important; } .pf-mk--flecha, .pf-mk--corchete{ display:none; } .pf-mk--admiracion, .pf-mk--estrella, .pf-mk--asterisco{ right:3%; left:auto; } .pf-mk--manuscrito{ right:3%; left:auto; max-width:46%; } .pf-mas .pf-mk--manuscrito{ display:none; } } /* Impresión: el panfleto se fotocopia. Los garabatos también. */ @media print{ .pf-mk{ filter:none; color:#000; } .pf-mk path{ stroke-dasharray:none !important; stroke-dashoffset:0 !important; } .pf-mk__punta{ display:none; } } @media (prefers-reduced-motion: reduce){ .pf-mk path{ stroke-dasharray:none !important; stroke-dashoffset:0 !important; } .pf-mk__punta{ display:none !important; } }