/* ========================================================================== LA NOTA — CYBER BRUTALISTA V2 -------------------------------------------------------------------------- Antes: una hoja de papel pegada al muro, con pliegue, cinta y sellos. Ahora: tapa oscura con la foto a color → LIENZO CLARO para leer → ficha del archivo. Portado de `04-cyberpunk/06-plantilla-nota.html`. REGLA NO NEGOCIABLE: en la lectura, cero efectos sobre el texto. ========================================================================== */ /* --- barra de progreso de lectura --------------------------------------- */ .pf-progreso{ position:fixed;top:0;left:0;height:2px;width:0;background:var(--pf-k);z-index:100; box-shadow:0 0 10px color-mix(in srgb, var(--pf-k) 70%, transparent);will-change:width; } /* ========================================================================== LA TAPA — oscura, la foto manda ========================================================================== */ .pf-ntapa{ position:relative;min-height:clamp(480px,84vh,840px);display:flex;align-items:flex-end; overflow:hidden;border-bottom:1px solid var(--pf-linea); } .pf-ntapa__img{position:absolute;inset:0} .pf-ntapa__img img{ width:100%;height:100%;object-fit:cover;max-height:none;filter:none; } .pf-ntapa__img::after{ content:"";position:absolute;inset:0;z-index:3; background:linear-gradient(to top,var(--pf-negro) 4%,rgba(10,10,10,.86) 30%, rgba(10,10,10,.34) 66%,rgba(10,10,10,.55) 100%); } /* glitch pulsante, sutil */ .pf-ntapa__img .pf-gl-a, .pf-ntapa__img .pf-gl-b{ position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;mix-blend-mode:screen; } .pf-ntapa__img .pf-gl-a{background:var(--pf-logo-verde);animation:pf-pulso-a 13s infinite steps(1)} .pf-ntapa__img .pf-gl-b{background:var(--pf-logo-magenta);animation:pf-pulso-b 13s infinite steps(1)} .pf-ntapa__c{position:relative;z-index:4;width:100%;padding-bottom:clamp(1.8rem,4.6vw,3.8rem)} .pf-ntapa__k{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:1.1rem} .pf-ntapa__id{ font-family:var(--pf-mono);font-size:.66rem;letter-spacing:.12em;color:var(--pf-tinta-2); padding-left:.8rem;border-left:1px solid var(--pf-linea); } .pf-ntapa__t{ font-family:var(--pf-display);font-size:clamp(2rem,6.4vw,5rem);color:#fff; line-height:.94;letter-spacing:-.025em;text-transform:uppercase;max-width:22ch;margin-bottom:1.1rem; } .pf-ntapa__t a{color:inherit;text-decoration:none} .pf-ntapa__firma{ display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-items:baseline;margin-top:1.5rem; font-family:var(--pf-mono);font-size:.72rem;color:var(--pf-tinta-2); } .pf-ntapa__firma b{color:var(--pf-k-cl);font-weight:500} .pf-ntapa__firma .pf-der{margin-left:auto;color:var(--pf-tinta-3)} /* ========================================================================== EL LIENZO CLARO — la lectura (las tintas se invierten en tokens.css para `.pf-nota__hoja`) ========================================================================== */ .pf-nota__hoja{ background:var(--pf-lectura); padding:clamp(2.4rem,5.5vw,4.4rem) 0; position:relative; /* fuera el papel: sin pliegue, sin cinta, sin sombra de hoja suelta */ box-shadow:none;border:0; } .pf-nota__pliegue{display:none} .pf-nota__hoja .pf-wrap{max-width:calc(var(--pf-medida) + var(--pf-gutter) * 2)} .pf-nota__seccion{ display:inline-block;font-family:var(--pf-mono);font-weight:600;font-size:.7rem; letter-spacing:.16em;text-transform:uppercase;color:var(--pf-k-os); margin-bottom:.7rem;background:none;padding:0; } .pf-nota__titulo{ font-family:var(--pf-display);font-size:clamp(1.7rem,4vw,3rem);color:var(--pf-tinta-cl); text-transform:none;line-height:1.02;letter-spacing:-.02em;margin-bottom:1rem;text-shadow:none; } .pf-nota__firma{ display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-family:var(--pf-mono);font-size:.72rem; color:var(--pf-tinta-cl-3);padding:.7rem 0; border-top:1px solid rgba(0,0,0,.14);border-bottom:1px solid rgba(0,0,0,.14); margin-bottom:1.4rem; } .pf-nota__firma b{color:var(--pf-k-os);font-weight:600} /* --- el cuerpo: calma editorial ---------------------------------------- */ .pf-nota__cuerpo{ font-family:var(--pf-body);font-size:1.06rem;line-height:1.74;color:var(--pf-tinta-cl-2); } .pf-nota__cuerpo > * + *{margin-top:1.05rem} .pf-nota__cuerpo p{margin:0 0 1.05rem} /* capitular en el acento — el único gesto sobre el texto, y es tipográfico */ .pf-nota__cuerpo > p:first-of-type{font-size:clamp(1.15rem,2vw,1.34rem);line-height:1.62;color:var(--pf-tinta-cl)} .pf-nota__cuerpo > p:first-of-type::first-letter{ float:left;font-family:var(--pf-display);font-size:3.3em;line-height:.72; padding:.06em .14em 0 0;color:var(--pf-k-os); } .pf-nota__cuerpo h2, .pf-nota__cuerpo h3{ font-family:var(--pf-display);font-weight:400;text-transform:none; font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.06;letter-spacing:-.02em; color:var(--pf-tinta-cl);margin:2.3rem 0 .9rem; } .pf-nota__cuerpo a{color:var(--pf-k-os);text-decoration:underline;text-underline-offset:2px} .pf-nota__cuerpo ul, .pf-nota__cuerpo ol{margin:0 0 1.05rem 1.15rem;list-style:disc} .pf-nota__cuerpo ol{list-style:decimal} .pf-nota__cuerpo li{margin-bottom:.4rem;line-height:1.7} .pf-nota__cuerpo li::marker{color:var(--pf-k-os)} .pf-nota__cuerpo blockquote{ border-left:5px solid var(--pf-k-os);padding-left:1.1rem;margin:1.6rem 0; font-family:var(--pf-cond);font-weight:700;font-size:1.25rem;line-height:1.35; color:var(--pf-tinta-cl);font-style:normal; } /* las fotos del cuerpo: íntegras, a color, rompen la medida */ .pf-nota__cuerpo img{ width:100%;height:auto;display:block;filter:none;background:var(--pf-claro-2); } .pf-nota__cuerpo figure{margin:2.4rem 0} .pf-nota__cuerpo figcaption{ font-family:var(--pf-mono);font-size:.68rem;line-height:1.55; color:var(--pf-tinta-cl-3);margin-top:.6rem; } /* la portada de la nota, si no hubo tapa */ .pf-nota__portada{margin:1.6rem 0;position:relative} .pf-nota__portada img{width:100%;height:auto;filter:none} .pf-nota__portada::after{content:none} /* --- etiquetas ---------------------------------------------------------- */ .pf-nota__tags{ display:flex;flex-wrap:wrap;gap:.5rem;align-items:center; margin-top:1.9rem; } .pf-nota__tags-lbl{ font-family:var(--pf-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase; color:var(--pf-tinta-cl-3);margin-right:.4rem; } .pf-nota__tags a{ font-family:var(--pf-mono);font-size:.68rem;color:var(--pf-k-os);text-decoration:none; border:1px solid rgba(0,0,0,.16);padding:.24rem .6rem; transition:border-color .2s,background .2s; } .pf-nota__tags a:hover{border-color:var(--pf-k-os);background:rgba(0,0,0,.03)} /* --- bio del autor ------------------------------------------------------ */ .pf-nota__bio{ margin-top:2.4rem;padding-top:1.3rem;border-top:1px solid rgba(0,0,0,.14); display:flex;gap:1rem;align-items:flex-start; font-family:var(--pf-mono);font-size:.74rem;color:var(--pf-tinta-cl-3);line-height:1.6; } .pf-nota__bio-ini{ flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center; background:var(--pf-tinta-cl);color:var(--pf-lectura); font-family:var(--pf-display);font-size:1rem; } .pf-nota__bio b{ color:var(--pf-tinta-cl);display:block;font-family:var(--pf-body); font-size:.9rem;margin-bottom:.2rem; } /* La tira de COMPARTIR se estiliza en su propia hoja (`compartir.css`): vive en dos contextos —el lienzo claro y la banda oscura del especial— y necesita tokens de rol, no los `-cl` fijos de aquí. */ /* ========================================================================== EL APARATO DE CITACIÓN — bloque «Citar» + diálogo de formatos Vive en el lienzo claro: es material de referencia, se lee en claro. Mismo idioma que .pf-nota__tags y .pf-compartir: mono, borde fino, acento. ========================================================================== */ .pf-cita{ margin-top:2.4rem;padding-top:1.3rem;border-top:1px solid rgba(0,0,0,.14); } .pf-cita__lbl{ display:block;font-family:var(--pf-mono);font-size:.64rem;letter-spacing:.14em; text-transform:uppercase;color:var(--pf-tinta-cl-3);margin-bottom:.5rem; } .pf-cita__lbl::before{content:"[ ";color:var(--pf-k-os)} .pf-cita__lbl::after{content:" ]";color:var(--pf-k-os)} .pf-cita__txt{ margin:0 0 .9rem;font-family:var(--pf-mono);font-size:.76rem;line-height:1.6; color:var(--pf-tinta-cl-3);max-width:46em; } .pf-cita__acc{display:flex;flex-wrap:wrap;gap:.5rem} /* Doble clase: gana a `.pf-nota__cuerpo a`, que si no impone acento + subrayado. */ .pf-cita .pf-cita__b{ display:inline-flex;align-items:center;gap:.4rem; font-family:var(--pf-mono);font-size:.68rem;line-height:1; color:var(--pf-tinta-cl);text-decoration:none;cursor:pointer; background:transparent;border:1px solid rgba(0,0,0,.16);padding:.44rem .7rem; transition:border-color var(--pf-dur-micro) var(--pf-ease), background var(--pf-dur-micro) var(--pf-ease), color var(--pf-dur-micro) var(--pf-ease); } .pf-cita .pf-cita__b:hover, .pf-cita .pf-cita__b:focus-visible{ border-color:var(--pf-k-os);color:var(--pf-k-os); background:rgba(0,0,0,.03);text-decoration:none;outline:none; } /* Descargar PDF: la acción principal del bloque, así que va en tinta plena. Lienzo claro obligatorio, igual que el resto de la lectura: fondo #111 sobre #FAFAFA y texto blanco encima. Sólo se pinta cuando el motor existe. */ .pf-cita .pf-cita__b--pdf{ background:var(--pf-tinta-cl);color:var(--pf-lectura); border-color:var(--pf-tinta-cl);font-weight:600; } .pf-cita .pf-cita__b--pdf:hover, .pf-cita .pf-cita__b--pdf:focus-visible{ background:var(--pf-k-os);border-color:var(--pf-k-os);color:var(--pf-lectura); } /* --- el diálogo --------------------------------------------------------- */ .pf-citam{ border:1px solid rgba(0,0,0,.2);padding:0;max-width:min(720px,92vw);width:100%; background:var(--pf-lectura);color:var(--pf-tinta-cl); box-shadow:0 24px 70px rgba(0,0,0,.5); } .pf-citam::backdrop{background:rgba(0,0,0,.72)} .pf-citam__cab{ display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:1.1rem 1.3rem;border-bottom:1px solid rgba(0,0,0,.14); } .pf-citam__cab h2{ margin:0;font-family:var(--pf-display);font-size:1.05rem;line-height:1.2; color:var(--pf-tinta-cl);text-transform:uppercase;letter-spacing:.01em; } .pf-citam__x{ background:transparent;border:1px solid rgba(0,0,0,.16);cursor:pointer; font-size:1.1rem;line-height:1;color:var(--pf-tinta-cl); width:32px;height:32px;display:grid;place-items:center; } .pf-citam__x:hover,.pf-citam__x:focus-visible{border-color:var(--pf-k-os);color:var(--pf-k-os);outline:none} .pf-citam__tabs{ display:flex;flex-wrap:wrap;gap:.4rem;padding:.9rem 1.3rem 0; } .pf-citam__tab{ font-family:var(--pf-mono);font-size:.68rem;cursor:pointer; background:transparent;border:1px solid rgba(0,0,0,.16); padding:.4rem .66rem;color:var(--pf-tinta-cl-3); transition:border-color var(--pf-dur-micro) var(--pf-ease),color var(--pf-dur-micro) var(--pf-ease); } .pf-citam__tab:hover{border-color:var(--pf-k-os);color:var(--pf-k-os)} .pf-citam__tab[aria-selected="true"]{ border-color:var(--pf-k-os);color:var(--pf-sobre-k);background:var(--pf-k-os); } .pf-citam__tab:focus-visible{outline:2px solid var(--pf-k-os);outline-offset:2px} .pf-citam__pan{padding:1rem 1.3rem 1.3rem} .pf-citam__txt{ margin:0 0 .8rem;padding:.9rem 1rem;background:rgba(0,0,0,.045); border-left:2px solid var(--pf-k-os); font-family:var(--pf-mono);font-size:.78rem;line-height:1.7; color:var(--pf-tinta-cl);white-space:pre-wrap;word-break:break-word; max-height:42vh;overflow:auto; } .pf-citam__copiar{ font-family:var(--pf-mono);font-size:.68rem;cursor:pointer; background:transparent;border:1px solid rgba(0,0,0,.16); padding:.44rem .7rem;color:var(--pf-tinta-cl); transition:border-color var(--pf-dur-micro) var(--pf-ease),color var(--pf-dur-micro) var(--pf-ease); } .pf-citam__copiar:hover,.pf-citam__copiar:focus-visible{border-color:var(--pf-k-os);color:var(--pf-k-os);outline:none} .pf-citam__copiar.is-copiado{border-color:var(--pf-k-os);color:var(--pf-k-os)} .pf-citam__pie{ margin:0;padding:.9rem 1.3rem 1.2rem;border-top:1px solid rgba(0,0,0,.1); font-family:var(--pf-mono);font-size:.66rem;line-height:1.6;color:var(--pf-tinta-cl-3); } /* ========================================================================== LA FICHA DEL ARCHIVO ========================================================================== */ .pf-term__b--ficha{padding:.4rem 1rem 1rem} .pf-ficha__l{ display:grid;grid-template-columns:7.5rem 1fr auto;gap:.9rem;padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,.07);align-items:baseline; } .pf-ficha__l:last-child{border-bottom:0} .pf-ficha__l i{font-style:normal;color:var(--pf-k-cl);font-family:var(--pf-mono);font-size:.72rem;letter-spacing:.06em} .pf-ficha__l em{font-style:normal;color:var(--pf-tinta);font-family:var(--pf-mono);font-size:.8rem;word-break:break-word} .pf-ficha__l s{text-decoration:none;color:var(--pf-tinta-3);font-size:.66rem;font-family:var(--pf-mono)} /* ========================================================================== SEGUIR EN EL ARCHIVO ========================================================================== */ .pf-relacionadas .pf-muro--rel{ padding:0;grid-template-columns:repeat(3,1fr);gap:1.6rem 1.4rem; } .pf-relacionadas .pf-muro--rel .pf-pieza{grid-column:span 1 !important} .pf-relacionadas h2{color:var(--pf-tinta)} @media (max-width:820px){ .pf-relacionadas .pf-muro--rel{grid-template-columns:1fr 1fr} } @media (max-width:560px){ .pf-relacionadas .pf-muro--rel{grid-template-columns:1fr} .pf-ficha__l{grid-template-columns:1fr;gap:.2rem} } /* ========================================================================== ESPECIALES — conservan su Elementor original (patrimonio del contenido) -------------------------------------------------------------------------- 🔴 EL LIENZO VA CLARO, SIEMPRE. Estos especiales los maquetó el equipo pieza por pieza sobre un sitio de FONDO BLANCO: su CSS (capturado post a post) da por hecho ese fondo y sólo pinta de blanco los textos que van sobre sus propias franjas oscuras. Si el lienzo hereda el negro del tema, todo el texto que quedó en tinta oscura desaparece — pasa en casi todos. Por eso el marco es cyberpunk (cabecera, tira, pie) pero el ESCENARIO del especial es claro, como el día que se diseñó. No es una excepción al sistema: es la misma regla de siempre —calma editorial en la lectura— aplicada a una pieza que ya venía compuesta. ========================================================================== */ .pf-especial{background:var(--pf-muro)} .pf-especial__lienzo{ background:#fff; color:#111; position:relative; overflow-x:hidden; /* el especial ocupa TODO el ancho: fue hecho para eso */ max-width:none; padding:0; /* tintas oscuras dentro del lienzo (ver tokens.css) */ --pf-tinta: var(--pf-tinta-cl); --pf-tinta-2: var(--pf-tinta-cl-2); --pf-tinta-3: var(--pf-tinta-cl-3); } /* Si el especial no declara color, hereda tinta oscura — nunca hueso. */ .pf-especial__lienzo p, .pf-especial__lienzo li, .pf-especial__lienzo h1, .pf-especial__lienzo h2, .pf-especial__lienzo h3, .pf-especial__lienzo h4, .pf-especial__lienzo h5, .pf-especial__lienzo h6, .pf-especial__lienzo span, .pf-especial__lienzo div{color:inherit} /* …salvo lo que el propio especial pintó en su CSS o en línea: eso manda. */ .pf-especial__lienzo [style*="color"]{color:revert-layer} .pf-especial__lienzo img{filter:none;max-height:none} /* La tira de identificación y el pie del especial siguen siendo del sistema. */ .pf-especial__tira{ display:flex;align-items:center;gap:1rem;flex-wrap:wrap; max-width:var(--pf-maxw);margin:0 auto;padding:.9rem var(--pf-gutter); font-family:var(--pf-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase; color:var(--pf-tinta-2);border-bottom:1px solid var(--pf-linea);background:var(--pf-muro); } .pf-especial__tira b{color:var(--pf-k-cl);font-weight:500} .pf-especial__meta{margin-left:auto;color:var(--pf-tinta-3)} .pf-especial__volver{ color:var(--pf-k-cl);text-decoration:none;border:1px solid var(--pf-linea); padding:.3rem .7rem;transition:border-color .25s; } .pf-especial__volver:hover{border-color:var(--pf-k)} /* el sello circular era del panfleto */ .pf-especial__sello{display:none} /* ========================================================================== El cuerpo de Elementor dentro de la hoja (especiales SIN su CSS) ========================================================================== */ .pf-nota__cuerpo--elementor{ max-width:none;font-size:inherit;color:inherit; } .pf-nota__cuerpo--elementor::first-letter{float:none;font-size:inherit;color:inherit;padding:0} .pf-nota__cuerpo--elementor > p:first-of-type::first-letter{ float:none;font-family:inherit;font-size:inherit;line-height:inherit;padding:0;color:inherit; } @media (prefers-reduced-motion: reduce){ .pf-ntapa__img .pf-gl-a,.pf-ntapa__img .pf-gl-b{animation:none} } /* ========================================================================== SEPARADOR DE ESCENA (P4) Quince `

` del archivo no eran encabezados: eran `***`, el separador tipográfico que el periodista pone entre dos escenas y que el scrape marcó como titular. `inc/encabezados.php` (plugin) los convierte en `
` al pintar, que es lo que de verdad son; aquí se les da la forma que tenían. Se dibuja con el pseudo-elemento para conservar los tres puntos: en una crónica ese signo significa «pasa el tiempo», y una línea no dice lo mismo. ========================================================================== */ hr.pf-sep{ border:0; margin:var(--pf-s-6) auto; width:100%; text-align:center; overflow:visible; } hr.pf-sep::before{ content:"* * *"; display:block; font-family:var(--pf-mono); font-size:.9rem; letter-spacing:.5em; text-indent:.5em; /* compensa el tracking del último signo */ color:var(--pf-tinta-3); line-height:1; } /* ========================================================================== MEDIOS EMBEBIDOS QUE SE SALEN DE LA PANTALLA (P5, móvil) Medido a 375px en un ESPECIAL: dos vídeos se salían 115px y 275px, y un bloque `
` con una URL larga se salía 626px.

   🔴 NO SE VEÍA COMO DESBORDE. `base.css` lleva `overflow-x:hidden` en el
   cuerpo, así que la página NO scrollea en horizontal y todo parece correcto:
   lo que pasa es que ese trozo del vídeo queda RECORTADO y es inalcanzable.
   Un desborde silencioso, del mismo género que el resto de fallos de este
   proyecto.

   La causa del vídeo es de WordPress, no del tema: el envoltorio `.wp-video`
   trae `width:480px` (o 640) en el atributo `style`, y sólo el `