/* ============================================================
   PEGATINAS: PAPELES Y CELO QUE SE PONEN A MANO
   ============================================================

   Trozos de papel y tiras de celo que Jorge coloca donde quiera sobre el
   tablero. Dos reglas heredadas del proyecto:

     · el papel se PINTA, no se pega. Las pautas (rayas, cuadros, milímetros)
       van en degradados CSS, así que son vector: crecen sin pixelarse. Encima
       lleva una textura de papel REAL de assets/textura en 'multiply', que es
       lo que le da grano y le quita el aire de plantilla.
     · el celo es una BANDA TRANSLÚCIDA en 'multiply' con los cantos
       rasgados, igual que el .celo del pegote que ya había.

   Nada de PNG estirados: de eso ya se aprendió con el crucigrama.
   ============================================================ */

/* LA CAPA NO LLEVA z-index, y es a propósito. Con z-index creaba contexto de
   apilamiento y las piezas quedaban TODAS en el mismo bloque (z 8), por encima
   de la capa de tinta (z 7): no había forma de pintar sobre un papel, el trazo
   salía siempre por debajo. Sin z-index, cada pieza compite por su cuenta en el
   apilamiento del lienzo, y así se puede repartir la altura:

       hojas del tablero  3
       #paginas           5
       #apertura          6   · PAPELES 6   (el trazo va encima)
       capaTinta          7   · la tinta
       CELO               9   (tapa el trazo, como en el papel de verdad)

   La misma trampa del z-index que con el subrayador y su mix-blend-mode. */
.pg-capa{ position:absolute; inset:0; pointer-events:none; }
.pg-capa.pg-editando{ pointer-events:none; }

/* ---------------- una pieza ---------------- */
.pg{
  position:absolute; box-sizing:border-box;
  /* --meneo: el empujoncito de cuando pasas el cursor por encima. Va aparte
     de --rot para no tocar el giro guardado de la pieza: al salir vuelve a
     cero y la pieza se queda como estaba. */
  transform:translate(-50%,-50%) rotate(calc(var(--rot,0deg) + var(--meneo,0deg)));
  transition:transform .5s cubic-bezier(.2,.85,.3,1);
  transform-origin:50% 50%;
  pointer-events:auto; cursor:grab;
  /* el mismo cuento que en capas.css: sin esto, arrastrando una pieza con la
     tableta el navegador se queda el gesto para hacer scroll y manda
     pointercancel — la pieza se suelta sola a los cuatro pixeles. Con raton
     no pasa, por eso no salta en el banco. */
  touch-action:none; -ms-touch-action:none;
  background-repeat:repeat, repeat, repeat, no-repeat;
}
.pg.arrastrando{ cursor:grabbing; transition:none; }
.pg-capa:not(.pg-editando) .pg{ pointer-events:none; cursor:default; }
/* LOS LAPICES SI, PORQUE RUEDAN AL ROZARLOS.
   El rodar-al-rozar de las piezas 3D se dispara con pointerenter/move/leave
   SOBRE la pieza, o sea que necesita que la pieza reciba el puntero. Con la
   regla de arriba a secas solo rodaban con el afinador abierto: en la copia
   de entrega se podian arrastrar (eso era otro fallo, ya arreglado) pero no
   rodaban. Recibir el puntero no es poder moverlas: quien decide si se
   arrastran es mandaElRaton(), que en la entrega dice que no.
   La excepcion se cae mientras el lapiz de tinta esta activo, porque entonces
   hay que poder dibujar por encima de ellas. */
body:not(.tinta-dibujando) .pg-capa:not(.pg-editando) .pg-3d{
  pointer-events:auto; cursor:default;
}

/* seleccionada: filo de trabajo, no de diseño */
.pg.sel{ outline:1.5px dashed rgba(30,90,190,.85); outline-offset:3px; }

/* ======================= PAPELES =======================
   Cada uno: pauta en degradados + textura real en multiply + su tono. */
.pg-papel{
  background-blend-mode:multiply, multiply, multiply, normal;
  filter:drop-shadow(0 calc(.5 * var(--vh)) calc(.8 * var(--vh)) rgba(38,30,18,.28));
  /* LA FIBRA REPITE, SIEMPRE.
     En `.pg` la lista de repeticiones acaba en `no-repeat` (eso es para las
     piezas de una sola imagen). El isométrico tiene exactamente cuatro
     fondos: las tres tramas y la fibra — o sea que la fibra caía justo en ese
     `no-repeat` y se pintaba UNA VEZ en la esquina, a su tamaño, con su corte
     recto. Al agrandar la hoja la mancha se quedaba igual: «la textura no se
     adapta y se nota el corte». En un papel no hay ninguna capa que no deba
     repetirse. */
  background-repeat:repeat;
}

/* --- liso --- */
.pg-liso{
  background-image:url('assets/textura/fibra.png');
  background-size:300px;
  background-color:#e7e3d6;
  background-blend-mode:multiply, normal;
}

/* --- cuadrícula de 5 mm, la del cuaderno de toda la vida --- */
.pg-cuadros{
  background-image:
    repeating-linear-gradient(to right, rgba(96,124,150,.42) 0 1px, transparent 1px var(--paso,26px)),
    repeating-linear-gradient(to bottom, rgba(96,124,150,.42) 0 1px, transparent 1px var(--paso,26px)),
    url('assets/textura/fibra.png');
  background-size:auto, auto, 300px;
  background-color:#eae7dc;
}
/* --- cuadrícula fina de 3 mm --- */
.pg-cuadros-fino{
  background-image:
    repeating-linear-gradient(to right, rgba(96,124,150,.34) 0 1px, transparent 1px var(--paso,15px)),
    repeating-linear-gradient(to bottom, rgba(96,124,150,.34) 0 1px, transparent 1px var(--paso,15px)),
    url('assets/textura/fibra.png');
  background-size:auto, auto, 300px;
  background-color:#eae8de;
}

/* --- rayado --- */
.pg-rayas{
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--paso,28px) - 1px), rgba(78,106,140,.46) calc(var(--paso,28px) - 1px) var(--paso,28px)),
    url('assets/textura/fibra.png');
  background-size:auto, 300px;
  background-color:#ece9df;
}
/* --- rayado con margen rojo, hoja de cuaderno --- */
.pg-rayas-margen{
  background-image:
    linear-gradient(to right, transparent 0 11%, rgba(184,62,58,.62) 11% calc(11% + 1.5px), transparent calc(11% + 1.5px)),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--paso,28px) - 1px), rgba(78,106,140,.46) calc(var(--paso,28px) - 1px) var(--paso,28px)),
    url('assets/textura/fibra.png');
  background-size:auto, auto, 300px;
  background-color:#ece9df;
}

/* --- LA FICHA CLÁSICA: dos rayas rojas arriba y el resto rayado --- */
.pg-ficha{
  background-image:
    /* las dos rojas de la cabecera */
    linear-gradient(to bottom,
      transparent 0 calc(var(--paso,30px) * 1.1),
      rgba(186,64,58,.72) calc(var(--paso,30px) * 1.1) calc(var(--paso,30px) * 1.1 + 1.6px),
      transparent calc(var(--paso,30px) * 1.1 + 1.6px) calc(var(--paso,30px) * 1.55),
      rgba(186,64,58,.72) calc(var(--paso,30px) * 1.55) calc(var(--paso,30px) * 1.55 + 1.6px),
      transparent calc(var(--paso,30px) * 1.55 + 1.6px)),
    /* y el rayado, que arranca DEBAJO de las rojas */
    repeating-linear-gradient(to bottom,
      transparent 0 calc(var(--paso,30px) - 1px),
      rgba(88,112,146,.4) calc(var(--paso,30px) - 1px) var(--paso,30px)),
    url('assets/textura/fibra.png');
  background-size:auto, auto, 300px;
  background-position:0 0, 0 calc(var(--paso,30px) * 1.9), 0 0;
  /* CREMA, NO TIERRA. Llevaba p_nota.jpg, que tiene saturacion 31 y en
     multiply empujaba la ficha a marron. El grano lo pone fibra.png, que es
     neutro (sat 0), y el tono lo pone este color: asi se elige de verdad. */
  background-color:#f2e7c4;
  border-radius:2px;
}
/* --- ficha lisa, cartulina --- */
.pg-ficha-lisa{
  background-image:url('assets/textura/fibra.png');
  background-size:300px;
  background-color:#eee0b8;   /* manila, la cartulina de fichero */
  background-blend-mode:multiply, normal;
  border-radius:2px;
}

/* --- dibujo técnico: fina azul y gruesa cada diez --- */
.pg-tecnico{
  background-image:
    repeating-linear-gradient(to right, rgba(58,110,158,.5) 0 1.4px, transparent 1.4px calc(var(--paso,24px) * 5)),
    repeating-linear-gradient(to bottom, rgba(58,110,158,.5) 0 1.4px, transparent 1.4px calc(var(--paso,24px) * 5)),
    repeating-linear-gradient(to right, rgba(74,126,172,.26) 0 1px, transparent 1px var(--paso,24px)),
    repeating-linear-gradient(to bottom, rgba(74,126,172,.26) 0 1px, transparent 1px var(--paso,24px)),
    url('assets/textura/fibra.png');
  background-size:auto, auto, auto, auto, 300px;
  background-blend-mode:multiply, multiply, multiply, multiply, normal;
  background-color:#edeee7;
}
/* --- milimetrado, el naranja --- */
.pg-milimetrado{
  background-image:
    repeating-linear-gradient(to right, rgba(196,96,52,.62) 0 1.3px, transparent 1.3px calc(var(--paso,7px) * 10)),
    repeating-linear-gradient(to bottom, rgba(196,96,52,.62) 0 1.3px, transparent 1.3px calc(var(--paso,7px) * 10)),
    repeating-linear-gradient(to right, rgba(202,110,64,.34) 0 1px, transparent 1px calc(var(--paso,7px) * 5)),
    repeating-linear-gradient(to bottom, rgba(202,110,64,.34) 0 1px, transparent 1px calc(var(--paso,7px) * 5)),
    repeating-linear-gradient(to right, rgba(206,124,80,.2) 0 .6px, transparent .6px var(--paso,7px)),
    repeating-linear-gradient(to bottom, rgba(206,124,80,.2) 0 .6px, transparent .6px var(--paso,7px)),
    url('assets/textura/fibra.png');
  background-size:auto, auto, auto, auto, auto, auto, 300px;
  background-blend-mode:multiply, multiply, multiply, multiply, multiply, multiply, normal;
  background-color:#f0ece0;
}
/* --- isométrico: tramas a 60°, el del croquis --- */
/* LA RAYA CRECE CON LA CELDA.
   El paso de la trama se escala con la hoja, pero el GRUESO de la raya estaba
   clavado en 1 px: al agrandar la hoja, las celdas crecían y la raya se
   quedaba igual, así que la trama se iba aclarando hasta parecer una malla
   basta — otra hoja distinta. Y al lado de una pequeña cantaba el corte. Con
   el grueso atado al paso, la isométrica es la misma a cualquier tamaño.
   */
.pg-isometrico{
  --raya:max(.75px, calc(var(--paso,22px) * .052));
  background-image:
    repeating-linear-gradient(60deg, rgba(92,118,144,.34) 0 var(--raya), transparent var(--raya) var(--paso,22px)),
    repeating-linear-gradient(-60deg, rgba(92,118,144,.34) 0 var(--raya), transparent var(--raya) var(--paso,22px)),
    repeating-linear-gradient(to bottom, rgba(92,118,144,.2) 0 var(--raya), transparent var(--raya) calc(var(--paso,22px) * 1.732)),
    url('assets/textura/fibra.png');
  /* la fibra, a su tamaño de siempre: el grano del papel no crece porque la
     hoja sea más grande — lo que crece es la trama */
  background-size:auto, auto, auto, 300px;
  background-blend-mode:multiply, multiply, multiply, normal;
  background-color:#eceade;
}
/* --- pautado de música: CINCO rayas y un blanco, no rayas a secas.
       El truco es que el degradado que repite mide 9 pasos (5 de pentagrama
       + 4 de aire); antes el periodo se lo comía el último tramo y salían
       rayas seguidas de arriba abajo, que no es un pentagrama. --- */
.pg-pautado{
  background-image:
    repeating-linear-gradient(to bottom,
      rgba(52,44,32,.55) 0 1.1px,
      transparent 1.1px var(--paso,9px),
      rgba(52,44,32,.55) var(--paso,9px) calc(var(--paso,9px) + 1.1px),
      transparent calc(var(--paso,9px) + 1.1px) calc(var(--paso,9px) * 2),
      rgba(52,44,32,.55) calc(var(--paso,9px) * 2) calc(var(--paso,9px) * 2 + 1.1px),
      transparent calc(var(--paso,9px) * 2 + 1.1px) calc(var(--paso,9px) * 3),
      rgba(52,44,32,.55) calc(var(--paso,9px) * 3) calc(var(--paso,9px) * 3 + 1.1px),
      transparent calc(var(--paso,9px) * 3 + 1.1px) calc(var(--paso,9px) * 4),
      rgba(52,44,32,.55) calc(var(--paso,9px) * 4) calc(var(--paso,9px) * 4 + 1.1px),
      transparent calc(var(--paso,9px) * 4 + 1.1px) calc(var(--paso,9px) * 9)),
    url('assets/textura/fibra.png');
  background-size:auto, 300px;
  background-color:#efece1;
}

/* --- post-it: color plano, un pelo de sombra dentro y el canto de abajo
       levantado (el degradado hace de curva) --- */
.pg-postit{
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0) 78%, rgba(90,74,30,.1) 92%, rgba(90,74,30,.18)),
    url('assets/textura/fibra.png');
  background-size:auto, 260px;
  background-blend-mode:multiply, multiply, normal;
  background-color:#e8d98a;
  filter:drop-shadow(0 calc(.7 * var(--vh)) calc(1 * var(--vh)) rgba(38,30,18,.3));
}
.pg-postit-rosa{  background-color:#e8b6bd; }
.pg-postit-azul{  background-color:#b4cfe0; }
.pg-postit-verde{ background-color:#c3d9a8; }
.pg-postit-naranja{ background-color:#eebd88; }

/* --- kraft --- */
.pg-kraft{
  background-image:url('assets/textura/p_carton.jpg');
  background-size:380px;
  background-color:#c9a677;
  background-blend-mode:multiply, normal;
}
/* --- papel cebolla: se ve lo de debajo --- */
.pg-cebolla{
  background-image:url('assets/textura/fibra.png');
  background-size:340px;
  background-color:rgba(238,236,224,.52);
  background-blend-mode:multiply, normal;
  filter:drop-shadow(0 calc(.3 * var(--vh)) calc(.5 * var(--vh)) rgba(38,30,18,.16));
}
/* --- hoja de cuaderno con anillas --- */
.pg-anillas{
  background-image:
    radial-gradient(circle at 5.5% 12%, rgba(60,52,40,.5) 0 .9%, transparent 1.1%),
    radial-gradient(circle at 5.5% 50%, rgba(60,52,40,.5) 0 .9%, transparent 1.1%),
    radial-gradient(circle at 5.5% 88%, rgba(60,52,40,.5) 0 .9%, transparent 1.1%),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--paso,28px) - 1px), rgba(78,106,140,.42) calc(var(--paso,28px) - 1px) var(--paso,28px)),
    url('assets/textura/fibra.png');
  background-size:auto, auto, auto, auto, 300px;
  background-blend-mode:multiply, multiply, multiply, multiply, normal;
  background-color:#ebe8de;
}

/* UN RASGADO MAS SUAVE PARA LAS HOJAS GRANDES. Los de --rasgado-a/b se
   hicieron para un papelito de nota: en un folio, ese +-3% son veinte
   pixeles y el canto sale como una sierra. Este apenas se aparta del filo:
   corte de guillotina con el pulso de una mano. */
:root{
  --rasgado-c:polygon(
    0.4% 0.6%, 12% 0.0%, 25% 0.8%, 37% 0.1%, 50% 0.7%, 62% 0.0%, 75% 0.6%, 88% 0.1%, 99.6% 0.5%,
    100.0% 12%, 99.3% 25%, 99.9% 37%, 99.2% 50%, 99.8% 62%, 99.2% 75%, 99.9% 88%, 99.5% 99.5%,
    88% 100.0%, 75% 99.3%, 62% 99.9%, 50% 99.2%, 37% 99.8%, 25% 99.1%, 12% 99.8%, 0.5% 99.4%,
    0.0% 88%, 0.7% 75%, 0.1% 62%, 0.8% 50%, 0.2% 37%, 0.9% 25%, 0.1% 12%);
}
.pg-r3{ clip-path:var(--rasgado-c); }

/* rasgados: se reparten por variante para que no salgan dos iguales */
.pg-r1{ clip-path:var(--rasgado-a); }
.pg-r2{ clip-path:var(--rasgado-b); }
.pg-r0{ clip-path:none; }

/* ======================= CELO =======================
   Banda translúcida en multiply, con los cantos rasgados a dientes. */
.pg-celo{
  mix-blend-mode:multiply;
  box-shadow:0 1px 2px rgba(40,32,18,.18);
  filter:none;
  /* los dos cantos, a dientes de tijera mala */
  clip-path:polygon(
    2% 0%, 0% 12%, 2.4% 26%, 0.4% 40%, 2.2% 54%, 0% 68%, 2.6% 82%, 0.6% 100%,
    97.6% 100%, 100% 86%, 97.4% 72%, 99.6% 58%, 97.8% 44%, 100% 30%, 97.6% 16%, 98% 0%);
}
/* mate: el del proyecto, tal cual */
.pg-celo-mate{
  background:linear-gradient(100deg,
    rgba(226,219,196,.1), rgba(214,206,180,.62) 22%,
    rgba(232,226,206,.5) 55%, rgba(210,202,176,.6));
}
/* brillante: le cruza un reflejo */
.pg-celo-brillo{
  background:
    linear-gradient(180deg, rgba(255,255,255,.42) 0 18%, transparent 34% 66%, rgba(255,255,255,.26) 82%),
    linear-gradient(100deg, rgba(228,222,202,.22), rgba(208,201,176,.55) 30%, rgba(236,231,212,.4) 60%, rgba(206,199,174,.55));
}
/* carrocero: papel opaco, sin brillo */
.pg-celo-carrocero{
  background:url('assets/textura/fibra.png') 0 0/200px repeat, #d8c69a;
  background-blend-mode:multiply, normal;
  opacity:.9;
}
/* americana: gris, con su trama de tejido */
.pg-celo-americana{
  background:
    repeating-linear-gradient(to right, rgba(70,70,72,.16) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(to bottom, rgba(70,70,72,.14) 0 1px, transparent 1px 4px),
    linear-gradient(100deg, #9a9a9c, #86868a 45%, #96969a);
  opacity:.94;
}
/* washi a rayas */
.pg-celo-washi-rayas{
  background:
    repeating-linear-gradient(56deg, rgba(184,96,72,.5) 0 6px, transparent 6px 13px),
    linear-gradient(100deg, rgba(240,232,214,.72), rgba(228,219,198,.72));
  opacity:.9;
}
/* washi de topos */
.pg-celo-washi-topos{
  background:
    radial-gradient(circle, rgba(84,110,140,.5) 0 calc(var(--paso,11px) * .19), transparent calc(var(--paso,11px) * .23)) 0 0/var(--paso,11px) var(--paso,11px),
    linear-gradient(100deg, rgba(238,232,216,.7), rgba(226,218,200,.7));
  opacity:.9;
}
/* precinto de papel, con sus fibras */
.pg-celo-precinto{
  background:
    repeating-linear-gradient(to right, rgba(120,96,58,.16) 0 1px, transparent 1px 7px),
    url('assets/textura/fibra.png') 0 0/240px repeat,
    linear-gradient(100deg, #ddd0ab, #d3c59d);
  background-blend-mode:multiply, multiply, normal;
  opacity:.92;
}
/* celo viejo, amarilleado */
.pg-celo-viejo{
  background:linear-gradient(100deg,
    rgba(206,176,116,.5), rgba(196,162,98,.66) 26%,
    rgba(214,188,130,.52) 58%, rgba(192,158,96,.64));
}

/* ==================== EL TUNER ==================== */
.pg-tuner{
  position:fixed; z-index:100; right:14px; bottom:14px; width:330px;
  max-height:74vh; display:flex; flex-direction:column;
  background:rgba(28,22,14,.93); color:#efe9dc; border-radius:4px;
  font:600 11px/1.35 'Nunito', sans-serif;
  box-shadow:0 4px 22px rgba(0,0,0,.42);
  transition:opacity .2s ease, transform .2s ease;
}
.pg-tuner.oculto{ opacity:0; pointer-events:none; transform:translateY(10px); }
.pg-tuner header{
  display:flex; align-items:center; gap:8px; padding:9px 11px;
  border-bottom:1px solid rgba(239,233,220,.16);
}
.pg-tuner header b{ font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; opacity:.78; }
.pg-tuner header .pg-espacio{ flex:1; }
.pg-tuner button{
  border:0; border-radius:3px; cursor:pointer; font:inherit;
  background:rgba(239,233,220,.12); color:#efe9dc; padding:4px 8px;
}
.pg-tuner button:hover{ background:rgba(239,233,220,.24); }
.pg-tuner button.act{ background:#c98a3a; color:#20180c; }
.pg-pestanas{ display:flex; gap:5px; padding:9px 11px 4px; }
.pg-lista{ overflow:auto; padding:5px 11px 11px; display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.pg-chip{
  display:flex; flex-direction:column; gap:5px; align-items:stretch;
  padding:5px; border-radius:3px; background:rgba(239,233,220,.07);
  cursor:pointer; text-align:left;
}
.pg-chip:hover{ background:rgba(239,233,220,.16); }
.pg-chip .pg-muestra{
  /* POSICIONADA A PROPOSITO. Sin esto, un previo `position:absolute` (los de
     3D lo son) no se cuenta contra esta caja: se va a buscar al afinador y
     ni se coloca aqui ni lo recorta el overflow. Cincuenta previos de
     330x1069 tapando la lista, y la rueda sin llegar nunca a ella. */
  position:relative;
  height:38px; border-radius:2px; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
}
/* la muestra de una pieza 3D: su foto recortada al centro. Un lapiz es 1:21,
   asi que a lo ancho no se veria nada; recortado al centro se ve su color y
   su cilindro a cuatro aumentos. */
.pg-mini3d{
  display:block; width:100%; height:100%;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.pg-chip .pg-muestra > i{ display:block; width:100%; height:100%; }
.pg-chip span{ font-size:9.5px; letter-spacing:.05em; opacity:.85; text-transform:uppercase; }
.pg-ayuda{ padding:0 11px 10px; font-size:9.5px; line-height:1.5; opacity:.6; }

/* barra de la pieza seleccionada */
.pg-mandos{
  position:fixed; z-index:101; display:none; gap:3px;
  background:rgba(28,22,14,.94); border-radius:3px; padding:3px;
  box-shadow:0 2px 10px rgba(0,0,0,.4);
}
.pg-mandos.ver{ display:flex; }
.pg-mandos button{
  border:0; background:rgba(239,233,220,.12); color:#efe9dc;
  font:600 11px/1 'Nunito',sans-serif; padding:5px 7px; border-radius:2px; cursor:pointer;
}
.pg-mandos button:hover{ background:rgba(239,233,220,.28); }
.pg-mandos button.mal:hover{ background:#a8382c; }

/* ---- LA PESTAÑITA PARA VOLVER ----
   Cerrar el tuner con la ✕ y no saber cómo traerlo es una trampa: la tecla P
   no se adivina. Queda esta lengüeta en el canto; sale sola cuando el tuner
   está escondido. */
.pg-lengueta{
  position:fixed; z-index:100; right:0; bottom:74px;
  border:0; border-radius:3px 0 0 3px; cursor:pointer;
  background:rgba(28,22,14,.9); color:#efe9dc;
  font:700 10px/1 'Nunito',sans-serif; letter-spacing:.14em;
  text-transform:uppercase; padding:9px 8px;
  writing-mode:vertical-rl; text-orientation:mixed;
  box-shadow:0 2px 12px rgba(0,0,0,.34);
  opacity:0; pointer-events:none; transform:translateX(6px);
  transition:opacity .2s ease, transform .2s ease;
}
.pg-lengueta.ver{ opacity:.92; pointer-events:auto; transform:none; }
.pg-lengueta:hover{ opacity:1; background:#c98a3a; color:#20180c; }

/* ============================================================
   VARIANTES: CANTO Y TRATO
   ============================================================
   En vez de listar cincuenta papeles, cada papel lleva dos ejes que se
   combinan: cómo está CORTADO por los lados y qué TRATO ha recibido
   (arrugado, doblado, manchado, viejo). Diecinueve papeles x siete cantos
   x seis tratos son ochocientas variantes con el mismo código.
   ============================================================ */
:root{
  /* dentado de sello: dientes menudos por los cuatro lados */
  --canto-dentado:polygon(
    0% 4%, 2.2% 8%, 0% 12%, 2.2% 16%, 0% 20%, 2.2% 24%, 0% 28%, 2.2% 32%,
    0% 36%, 2.2% 40%, 0% 44%, 2.2% 48%, 0% 52%, 2.2% 56%, 0% 60%, 2.2% 64%,
    0% 68%, 2.2% 72%, 0% 76%, 2.2% 80%, 0% 84%, 2.2% 88%, 0% 92%, 2.2% 96%,
    4% 100%, 8% 97.8%, 12% 100%, 16% 97.8%, 20% 100%, 24% 97.8%, 28% 100%,
    32% 97.8%, 36% 100%, 40% 97.8%, 44% 100%, 48% 97.8%, 52% 100%,
    56% 97.8%, 60% 100%, 64% 97.8%, 68% 100%, 72% 97.8%, 76% 100%,
    80% 97.8%, 84% 100%, 88% 97.8%, 92% 100%, 96% 97.8%,
    100% 96%, 97.8% 92%, 100% 88%, 97.8% 84%, 100% 80%, 97.8% 76%, 100% 72%,
    97.8% 68%, 100% 64%, 97.8% 60%, 100% 56%, 97.8% 52%, 100% 48%,
    97.8% 44%, 100% 40%, 97.8% 36%, 100% 32%, 97.8% 28%, 100% 24%,
    97.8% 20%, 100% 16%, 97.8% 12%, 100% 8%, 97.8% 4%,
    96% 0%, 92% 2.2%, 88% 0%, 84% 2.2%, 80% 0%, 76% 2.2%, 72% 0%, 68% 2.2%,
    64% 0%, 60% 2.2%, 56% 0%, 52% 2.2%, 48% 0%, 44% 2.2%, 40% 0%, 36% 2.2%,
    32% 0%, 28% 2.2%, 24% 0%, 20% 2.2%, 16% 0%, 12% 2.2%, 8% 0%, 4% 2.2%);
  /* una esquina arrancada */
  --canto-esquina:polygon(0% 0%, 82% 0%, 100% 15%, 100% 100%, 0% 100%);
  /* barbas: ondas suaves, papel de tina */
  --canto-barbas:polygon(
    1.4% 0%, 12% 1.1%, 25% 0%, 38% 1.3%, 50% 0.2%, 62% 1.4%, 75% 0%, 88% 1.2%, 98.6% 0%,
    100% 12%, 98.7% 25%, 100% 38%, 98.6% 50%, 100% 62%, 98.8% 75%, 100% 88%, 98.6% 100%,
    88% 98.8%, 75% 100%, 62% 98.6%, 50% 99.8%, 38% 98.7%, 25% 100%, 12% 98.9%, 1.4% 100%,
    0% 88%, 1.3% 75%, 0% 62%, 1.4% 50%, 0% 38%, 1.2% 25%, 0% 12%);
  /* media hoja: cortada por abajo a lo bruto */
  --canto-media:polygon(
    0% 0%, 100% 0%, 100% 88%, 92% 92%, 84% 87%, 76% 93%, 68% 88%, 60% 94%,
    52% 89%, 44% 95%, 36% 90%, 28% 96%, 20% 90%, 12% 95%, 4% 91%, 0% 94%);
}
.pg-c0{ clip-path:none; }
.pg-c1{ clip-path:var(--rasgado-c); }      /* guillotina */
.pg-c2{ clip-path:var(--rasgado-a); }      /* rasgado */
.pg-c3{ clip-path:var(--rasgado-b); }      /* rasgado basto */
.pg-c4{ clip-path:var(--canto-dentado); }  /* dentado de sello */
.pg-c5{ clip-path:var(--canto-esquina); }  /* esquina arrancada */
.pg-c6{ clip-path:var(--canto-barbas); }   /* barbas */
.pg-c7{ clip-path:var(--canto-media); }    /* media hoja */

/* ---- EL TRATO: una capa encima, recortada con el mismo canto ---- */
.pg-papel::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:var(--tr-img, none);
  background-size:var(--tr-tam, 420px);
  background-repeat:repeat;
  mix-blend-mode:var(--tr-mez, overlay);
  opacity:var(--tr-op, 0);
}
.pg-t0{ --tr-op:0; }                                  /* recién sacado */
.pg-t1{                                               /* arrugado */
  --tr-img:url('assets/textura/papel_macro.jpg');
  --tr-tam:380px; --tr-mez:overlay; --tr-op:.62;
}
.pg-t2{                                               /* arrugado del todo */
  --tr-img:url('assets/textura/papel_macro.jpg'), url('assets/textura/papel_manchas.jpg');
  --tr-tam:260px, 620px; --tr-mez:overlay; --tr-op:.9;
}
.pg-t3{                                               /* doblado en cuatro */
  --tr-img:
    linear-gradient(to right, transparent 0 49.4%, rgba(60,50,32,.34) 49.7% 50%, rgba(255,255,255,.5) 50% 50.4%, transparent 50.7%),
    linear-gradient(to bottom, transparent 0 49.4%, rgba(60,50,32,.3) 49.7% 50%, rgba(255,255,255,.46) 50% 50.4%, transparent 50.7%);
  --tr-tam:100% 100%; --tr-mez:normal; --tr-op:.85;
}
.pg-t4{                                               /* manchado */
  --tr-img:url('assets/textura/papel_manchas.jpg');
  --tr-tam:560px; --tr-mez:multiply; --tr-op:.3;
}
.pg-t5{                                               /* viejo, amarilleado por los cantos */
  /* AMBAR, NO VERDOSO. Con rgba(150,112,48) en multiply el azul caía tanto
     que sobre papel crema salía oliva: parecía moho, no papel viejo. Un
     ámbar más claro y menos opaco amarillea sin ensuciar. */
  --tr-img:
    radial-gradient(122% 122% at 50% 50%, transparent 38%, rgba(206,164,86,.3) 80%, rgba(184,138,64,.46)),
    url('assets/textura/papel_manchas.jpg');
  --tr-tam:100% 100%, 700px; --tr-mez:multiply; --tr-op:.5;
}

/* ---- los mandos de variante en el tuner ---- */
.pg-ejes{ padding:2px 11px 8px; display:grid; gap:5px; }
.pg-eje{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.pg-eje > b{
  font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  opacity:.55; width:52px; flex:none;
}
.pg-eje button{ padding:3px 6px; font-size:9.5px; letter-spacing:.04em; }
.pg-sorpresa{ width:100%; margin-top:3px; background:rgba(201,138,58,.3) !important; }
.pg-sorpresa:hover{ background:#c98a3a !important; color:#20180c; }

/* ====================================================================
   CLIPS, PINZAS Y GRAPAS
   ====================================================================

   POR QUE VAN EN SVG Y NO EN CSS. Un clip es ALAMBRE DOBLADO: una linea de
   grosor constante que se cruza consigo misma. Con degradados y clip-path
   sale un garabato plano; con un trazo se dobla de verdad. Y en SVG el
   mismo dibujo vale para los diez colores, porque el color va en una
   variable, no en el trazo.

   CADA ALAMBRE SON TRES TRAZOS SUPERPUESTOS, que es lo que le da bulto:
     - el de abajo, mas gordo y oscuro  -> la sombra de contacto con el papel
     - el del medio, el color           -> el alambre
     - el de arriba, fino y desplazado  -> el brillo que corre por el lomo
   Un solo trazo plano se ve como una pegatina; con los tres se ve redondo.
   ==================================================================== */
.pg-clip{
  background:none;
  mix-blend-mode:normal;
  filter:drop-shadow(calc(.12 * var(--vh)) calc(.3 * var(--vh)) calc(.45 * var(--vh)) rgba(38,30,18,.4));
}
.pg-clip svg{ display:block; width:100%; height:100%; overflow:visible; }
.pg-clip .r-som{ fill:var(--mt-c,#5d5f63); fill-opacity:.5; }
.pg-clip .r-cuerpo{ fill:var(--mt-b,#b9bcc2); }
.pg-clip .r-luz{ fill:var(--mt-a,#f2f4f7); fill-opacity:.7; }

/* ---- LOS COLORES ----
   Tres tonos por color: oscuro (sombra), medio (cuerpo) y claro (brillo).
   Los metales llevan el claro casi blanco porque el brillo de un alambre
   pulido es un reflejo, no su color aclarado; los plastificados no, que
   son mates y solo levantan un punto. */
.pg-m0{ --mt-c:#353535; --mt-b:#a5a5a5; --mt-a:#cccccc; --mt-w:#878787; }  /* plata: luma 53 / 165 / 204, MEDIDOS en su referencia */
.pg-m1{ --mt-c:#5b430c; --mt-b:#d9b256; --mt-a:#fff6d6; --mt-w:#9c7826; }  /* laton */
.pg-m2{ --mt-c:#572912; --mt-b:#c07a52; --mt-a:#ffe0cc; --mt-w:#8d573a; }  /* cobre */
.pg-m3{ --mt-c:#0d0e10; --mt-b:#4a4c53; --mt-a:#b6bac2; --mt-w:#3c3e45; }  /* negro */
.pg-m4{ --mt-c:#571310; --mt-b:#c9382f; --mt-a:#ffc4bc; --mt-w:#8f2a24; }  /* rojo */
.pg-m5{ --mt-c:#0e2a49; --mt-b:#3277bd; --mt-a:#c6e0f8; --mt-w:#26568c; }  /* azul */
.pg-m6{ --mt-c:#153320; --mt-b:#41904f; --mt-a:#c4e8cf; --mt-w:#2f6a3c; }  /* verde */
.pg-m7{ --mt-c:#61440a; --mt-b:#d8a92a; --mt-a:#fff2c0; --mt-w:#9c7620; }  /* amarillo */
.pg-m8{ --mt-c:#5c1937; --mt-b:#c65083; --mt-a:#ffd2e4; --mt-w:#8e3a5e; }  /* rosa */
.pg-m9{ --mt-c:#2d1749; --mt-b:#7551a6; --mt-a:#ded0f6; --mt-w:#523876; }  /* morado */

/* ====================================================================
   AGUJEREAR HOJAS
   ====================================================================

   El agujero es un AGUJERO DE VERDAD: se ve el periodico por el. No vale
   pintar un circulo del color del fondo, porque el papel se mueve y detras
   hay texto impreso, no un color liso.

   Se hace con mascara: cada taladro es un degradado radial transparente en
   el centro y negro fuera, o sea una mascara que tapa SOLO ahi. Con varios
   hay que componerlos con 'intersect'; el de serie ('add') suma alfas, y
   como cada capa es opaca donde la otra tiene el hueco, no saldria ningun
   agujero.

   EL RADIO VA EN PIXELES, no en %. En porcentaje el taladro de una hoja
   apaisada saldria ovalado; y ese pixel lo pone el JS a partir del ancho
   real de la pieza, para que el agujero crezca con ella.
   ==================================================================== */
.pg-papel.pg-agujereada{
  -webkit-mask-image:var(--ag);
  mask-image:var(--ag);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  mask-composite:intersect;
}
/* un taladro de esquina, el de las fichas colgadas de una anilla */
.pg-g1{ --ag:radial-gradient(circle var(--ag-r,7px) at 7% 8%, transparent 0 92%, #000 100%); }
/* dos: el archivador de toda la vida (80 mm entre centros en un A4) */
.pg-g2{ --ag:
  radial-gradient(circle var(--ag-r,7px) at 5.5% 36.5%, transparent 0 92%, #000 100%),
  radial-gradient(circle var(--ag-r,7px) at 5.5% 63.5%, transparent 0 92%, #000 100%); }
/* tres: la carpeta americana */
.pg-g3{ --ag:
  radial-gradient(circle var(--ag-r,7px) at 5.5% 15%, transparent 0 92%, #000 100%),
  radial-gradient(circle var(--ag-r,7px) at 5.5% 50%, transparent 0 92%, #000 100%),
  radial-gradient(circle var(--ag-r,7px) at 5.5% 85%, transparent 0 92%, #000 100%); }
/* cuatro anillas */
.pg-g4{ --ag:
  radial-gradient(circle var(--ag-r,7px) at 5.5% 21%, transparent 0 92%, #000 100%),
  radial-gradient(circle var(--ag-r,7px) at 5.5% 39.7%, transparent 0 92%, #000 100%),
  radial-gradient(circle var(--ag-r,7px) at 5.5% 60.3%, transparent 0 92%, #000 100%),
  radial-gradient(circle var(--ag-r,7px) at 5.5% 79%, transparent 0 92%, #000 100%); }
/* dos por arriba, para colgarla de dos chinchetas */
.pg-g6{ --ag:
  radial-gradient(circle var(--ag-r,7px) at 30% 7%, transparent 0 92%, #000 100%),
  radial-gradient(circle var(--ag-r,7px) at 70% 7%, transparent 0 92%, #000 100%); }
/* multitaladro: la hoja arrancada de un cuaderno de espiral */
.pg-g5{ --ag:
  radial-gradient(circle var(--ag-r,7px) at 4.5% 6%, transparent 0 92%, #000 100%),
  radial-gradient(circle var(--ag-r,7px) at 4.5% 15.4%, transparent 0 92%, #000 100%),
  radial-gradient(circle var(--ag-r,7px) at 4.5% 24.8%, transparent 0 92%, #000 100%),
  radial-gradient(circle var(--ag-r,7px) at 4.5% 34.2%, transparent 0 92%, #000 100%),
  radial-gradient(circle var(--ag-r,7px) at 4.5% 43.6%, transparent 0 92%, #000 100%),
  radial-gradient(circle var(--ag-r,7px) at 4.5% 53%, transparent 0 92%, #000 100%),
  radial-gradient(circle var(--ag-r,7px) at 4.5% 62.4%, transparent 0 92%, #000 100%),
  radial-gradient(circle var(--ag-r,7px) at 4.5% 71.8%, transparent 0 92%, #000 100%),
  radial-gradient(circle var(--ag-r,7px) at 4.5% 81.2%, transparent 0 92%, #000 100%),
  radial-gradient(circle var(--ag-r,7px) at 4.5% 90.6%, transparent 0 92%, #000 100%); }

/* EL CERCO DEL TALADRO. Un agujero limpio se ve recortado con tijeras de
   unas; el de verdad deja el canto un pelo hundido y sucio. Es la misma
   lista de posiciones, pero pintando un anillo en vez de un hueco, y va en
   el ::before para no pisar el ::after, que es del trato. */
.pg-papel.pg-agujereada::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:var(--ag-cerco, none);
  background-repeat:no-repeat;
  mix-blend-mode:multiply; opacity:.5;
}
.pg-g1{ --ag-cerco:radial-gradient(circle calc(var(--ag-r,7px) * 1.5) at 7% 8%, transparent 0 64%, rgba(74,62,40,.55) 70%, transparent 88%); }
.pg-g2{ --ag-cerco:
  radial-gradient(circle calc(var(--ag-r,7px) * 1.5) at 5.5% 36.5%, transparent 0 64%, rgba(74,62,40,.55) 70%, transparent 88%),
  radial-gradient(circle calc(var(--ag-r,7px) * 1.5) at 5.5% 63.5%, transparent 0 64%, rgba(74,62,40,.55) 70%, transparent 88%); }
.pg-g3{ --ag-cerco:
  radial-gradient(circle calc(var(--ag-r,7px) * 1.5) at 5.5% 15%, transparent 0 64%, rgba(74,62,40,.55) 70%, transparent 88%),
  radial-gradient(circle calc(var(--ag-r,7px) * 1.5) at 5.5% 50%, transparent 0 64%, rgba(74,62,40,.55) 70%, transparent 88%),
  radial-gradient(circle calc(var(--ag-r,7px) * 1.5) at 5.5% 85%, transparent 0 64%, rgba(74,62,40,.55) 70%, transparent 88%); }
.pg-g4{ --ag-cerco:
  radial-gradient(circle calc(var(--ag-r,7px) * 1.5) at 5.5% 21%, transparent 0 64%, rgba(74,62,40,.55) 70%, transparent 88%),
  radial-gradient(circle calc(var(--ag-r,7px) * 1.5) at 5.5% 39.7%, transparent 0 64%, rgba(74,62,40,.55) 70%, transparent 88%),
  radial-gradient(circle calc(var(--ag-r,7px) * 1.5) at 5.5% 60.3%, transparent 0 64%, rgba(74,62,40,.55) 70%, transparent 88%),
  radial-gradient(circle calc(var(--ag-r,7px) * 1.5) at 5.5% 79%, transparent 0 64%, rgba(74,62,40,.55) 70%, transparent 88%); }
.pg-g6{ --ag-cerco:
  radial-gradient(circle calc(var(--ag-r,7px) * 1.5) at 30% 7%, transparent 0 64%, rgba(74,62,40,.55) 70%, transparent 88%),
  radial-gradient(circle calc(var(--ag-r,7px) * 1.5) at 70% 7%, transparent 0 64%, rgba(74,62,40,.55) 70%, transparent 88%); }

/* ---- la fila de colores del tuner: muestras, no nombres ---- */
.pg-eje.tintes button{
  width:15px; height:15px; padding:0; border-radius:50%;
  background:var(--sw) !important; box-shadow:inset 0 0 0 1px rgba(0,0,0,.45);
}
.pg-eje.tintes button.act{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.45), 0 0 0 2px #c98a3a; }
/* la muestra de un clip: sobre papel, que si no el alambre plateado no se
   ve contra el fondo negro del tuner */
.pg-chip .pg-muestra.metal{ background:#ded8c8; padding:3px; }
/* el acero de las asas de la pinza: fijo, no se tiñe con el color */
/* el cuerpo de la pinza no puede ser un color liso: lleva un reflejo en
   diagonal y el filo un punto mas oscuro, que es lo que lo despega del
   papel. Sin esto es un trapecio de color, y un trapecio de color no es
   un objeto. */
.pg-clip .r-brillo{ fill:#fff; fill-opacity:.16; }
.pg-clip .r-filo{ fill:none; stroke:var(--mt-c,#5d5f63); stroke-opacity:.5; stroke-width:2.5; }

/* ---- LO QUE POSA EL CLIP EN LA HOJA ----
   Antes llevaba una sombrita de nada y el clip flotaba: se veía pegado
   encima, no puesto. Ahora son dos sombras, que es como cae la luz de
   verdad sobre una pieza que toca el papel: una MUY pegada y oscura (el
   contacto, la línea donde el alambre se apoya) y otra ancha y suave (lo
   que proyecta la parte que está levantada). Con una sola no hay bulto. */

/* y el grano: el mismo filtro que come un pelo de alfa y desdibuja el filo,
   para que el metal no sea un vector limpio encima de un papel con textura */
/* la sombra que tira el alambre sobre la hoja, dentro del propio dibujo.
   OJO CON EL FILL: una propiedad CSS pisa el atributo fill="none" del trazo,
   asi que poner aqui un fill rellenaba el HUECO de los bucles del clip y
   salian manchas marrones dentro del alambre. La sombra del alambre es un
   TRAZO, y la del cuerpo macizo de la pinza es un RELLENO: dos clases. */
/* las ranuras del papel: NO son metal, son el agujero por donde ha entrado
   la grapa, así que van del color de la sombra del papel y no se tiñen */
/* la boca de la pinza: por ahí entra la hoja */
.pg-clip .p-boca{ fill:rgba(20,15,8,.5); }
/* el papel hundido justo donde entra el alambre, y el pliegue que levanta
   la corona: sin estos dos la grapa vuelve a ser una pieza posada encima */

/* ====================================================================
   EL METAL, HECHO COMO SE VE DE VERDAD
   ====================================================================
   Lo que fallaba: gris claro sobre papel claro NO SE VE. Un clip de
   verdad tiene un FILO OSCURO alrededor —el canto del alambre refleja lo
   que hay alrededor, que es oscuro— y ese filo es toda su silueta. Con el
   cuerpo claro y una raya de luz floja parecia plastilina.

   Los tres tonos por color:
     --mt-c  el filo   (oscuro, el canto)
     --mt-b  el cuerpo (medio)
     --mt-a  el brillo (casi blanco, estrecho y corrido hacia la luz)
   ==================================================================== */

/* LA SOMBRA, A ESCALA DE LA PIEZA. En vh valia lo mismo para un folio que
   para una grapa de 40 px: a la grapa la metia dentro de una nube gris.
   --pgs lo pone el JS con el ancho real de cada pieza. Dos sombras: la de
   contacto, pegadisima y oscura (donde el alambre toca), y la proyectada,
   corta y suave (lo que levanta el papel). */
.pg-clip{
  filter:
    drop-shadow(0 calc(var(--pgs,3px) * .18) calc(var(--pgs,3px) * .22) rgba(38,30,18,.55))
    drop-shadow(calc(var(--pgs,3px) * .4) calc(var(--pgs,3px) * .85) calc(var(--pgs,3px) * 1.1) rgba(38,30,18,.3));
}
/* NADA DE FILTRO DE GRANO. Con 4 px de trazo, el desplazamiento del
   feDisplacementMap no da textura: come el filo y deja el clip borroso. La
   integracion la dan la sombra y el tono, no el ruido. */
.pg-clip svg{ filter:none; }
/* la marca del papel donde entra la pata: NO es metal, es la sombra del
   agujero, asi que va oscura y no se tine con el color de la grapa */
/* LA SOMBRA DEL CUERPO MACIZO. Se quedó sin regla al limpiar las clases
   viejas del alambre y salía con el negro de serie del SVG: un pegote negro
   asomando por debajo de la pinza, como si tuviera doble fondo. */
.pg-clip .r-poso{ fill:rgba(46,36,20,.3); stroke:none; }
/* el reflejo del cuerpo, mas suave: un canto duro de blanco al 16% se veia
   como una raya pintada, no como luz */
.pg-clip .r-brillo{ fill:#fff; fill-opacity:.1; }

/* ====================================================================
   ACABADO A LAPIZ
   ====================================================================
   El metal pulido viene del idioma del render 3D. Este tablero esta
   escrito en el de lapiz y periodico impreso: robots a grafito, esfera
   hervida a mano, aros de colores dibujados. Por bien resuelto que este el
   reflejo, un clip cromado ahi va a cantar siempre.

   El acabado a lapiz es el MISMO trazado, pero:
     - sin filo especular ni brillo: un lapiz no refleja
     - pasado por #tz2, el filtro de temblor que ya usan los aros: el trazo
       deja de ser matematico y tiembla como una linea dibujada
     - en multiply, o sea que el grano del papel LO ATRAVIESA en vez de
       quedar tapado — eso es lo que lo mete dentro de la hoja
     - y sin sombra proyectada: lo dibujado no tira sombra.
   ==================================================================== */
.pg-clip.pg-lapiz{ filter:none; }
.pg-clip.pg-lapiz svg{ mix-blend-mode:multiply; }
.pg-clip.pg-lapiz .w-filo{ stroke:var(--mt-c); stroke-opacity:.5; }
.pg-clip.pg-lapiz .w-cuerpo{ stroke:var(--mt-b); stroke-opacity:.85; }
.pg-clip.pg-lapiz .w-luz{ display:none; }
.pg-clip.pg-lapiz .a-filo{ stroke:#4b4f56; stroke-opacity:.5; }
.pg-clip.pg-lapiz .a-cuerpo{ stroke:#6d727a; }
.pg-clip.pg-lapiz .a-luz{ display:none; }
.pg-clip.pg-lapiz .r-cuerpo{ fill:var(--mt-b); fill-opacity:.72; }
.pg-clip.pg-lapiz .r-luz, .pg-clip.pg-lapiz .r-brillo{ display:none; }
.pg-clip.pg-lapiz .r-poso{ display:none; }
.pg-clip.pg-lapiz .r-som{ fill:var(--mt-c); fill-opacity:.35; }
.pg-clip.pg-lapiz .r-filo{ stroke:var(--mt-c); stroke-opacity:.7; }
.pg-clip.pg-lapiz path, .pg-clip.pg-lapiz rect{ filter:url(#tz2); }

/* ---- LO QUE HACE EL ALAMBRE AL PAPEL, sacado de las fotos ----
   No hay ninguna ranura dibujada: lo que hay es el papel PELLIZCADO
   alrededor (una sombra ancha y blanda) y un punto de luz justo en la
   punta, donde la fibra levantada coge el brillo. Esos dos detalles son
   los que dicen «esto atraviesa la hoja», y eran los que faltaban. */
.pg-clip .p-hueco{ stroke:rgba(58,46,28,.26); }
.pg-clip .p-brillo{ fill:#fff; fill-opacity:.55; }
.pg-clip.pg-lapiz .p-hueco, .pg-clip.pg-lapiz .p-brillo{ display:none; }

/* ====================================================================
   EL TUBO, SIN COSTURAS
   ====================================================================
   Las capas van todas sobre EL MISMO trazado completo, cada una mas fina y
   corrida hacia la luz. Al ser todas el trazado entero no hay ni una union
   en ningun sitio — ni en los codos ni en los cambios de direccion —, y al
   ir corridas a la misma esquina el reflejo queda DESCENTRADO y el lado de
   sombra mas ancho, que es como cae la luz en un tubo.
   ==================================================================== */
.pg-clip .w-canto{ stroke:var(--mt-c,#2f343b); }
.pg-clip .w-cuerpo{ stroke:var(--mt-b,#ccd1d7); }
.pg-clip .w-brillo{ stroke:var(--mt-a,#fff); }
/* el acero de las asas, sin tenir */
.pg-clip .w-acero{ stroke:#9aa0a8; }


/* ---- EL LAZO ----
   La tela va fija sobre la ventana y no coge el puntero: solo pinta la linea
   mientras se dibuja. El recorte de verdad lo hace clip-path sobre la pieza. */
.pg-lazo-tela{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:9999;
}
.pg-lazo-linea{
  fill:rgba(201,138,58,.14);
  stroke:#c98a3a; stroke-width:1.5; stroke-dasharray:5 4;
  stroke-linejoin:round; stroke-linecap:round;
}
/* IMPRESCINDIBLE CON TABLETA. Sin esto el navegador se reserva el gesto del
   lapiz para hacer scroll y manda pointercancel a los cuatro pixeles: el lazo
   se quedaba a medias. Es el mismo fallo que dejaba el trazo en una rayita. */
body.pg-lazando, body.pg-lazando *{ touch-action:none !important; }
body.pg-lazando{ cursor:crosshair; }
body.pg-lazando .pg{ pointer-events:none !important; }

/* el recado del lazo: dos palabras y se va solo */
.pg-recado{
  position:fixed; left:50%; bottom:38px; transform:translateX(-50%) translateY(8px);
  background:rgba(28,22,14,.92); color:#efe9dc; padding:9px 16px; border-radius:4px;
  font:600 13px/1 'PT Serif', serif; letter-spacing:.02em;
  pointer-events:none; opacity:0; transition:opacity .18s, transform .18s;
  z-index:10000;
}
.pg-recado.se-ve{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---- LA PIEZA RECORTADA CON EL LAZO ----
   El recorte va en el HIJO y la sombra se queda en la pieza. Recortando la
   pieza entera, el navegador calcula primero el drop-shadow —de la silueta
   completa— y recorta despues: dentro del lazo salia un disco gris que era la
   sombra de lo que acababa de quitar. */
.pg-foto.pg-recortada{ background-image:none !important; }
.pg.pg-recortada::before{
  content:''; position:absolute; inset:0;
  background-image:var(--vir-filo, none), var(--vir-base, none);
  background-size:100% 100%, 100% 100%;
  background-repeat:no-repeat, no-repeat;
  background-position:center, center;
  -webkit-clip-path:var(--lz, none); clip-path:var(--lz, none);
}
/* y las que llevan dibujo dentro (svg) o lienzo (3D), por su hijo */
.pg.pg-recortada > svg,
.pg.pg-recortada > canvas,
.pg.pg-recortada > .t3{
  -webkit-clip-path:var(--lz, none); clip-path:var(--lz, none);
}

/* la pieza que se va a recortar, mientras dura el lazo */
.pg.pg-alazo{ outline:2px dashed rgba(201,138,58,.85); outline-offset:3px; }


/* ---- SACARLE PUNTA A UNA FOTO DE LAPIZ ----
   Un lapiz gastado no es un lapiz pequeño: le falta CUERPO. La punta y el
   grueso siguen igual y lo que se ha ido son centimetros del medio. Asi que
   la foto se parte en dos: la punta arriba y el cabo abajo, las dos pintadas
   al tamaño que tendria el lapiz ENTERO (--pt-alto) y ancladas cada una a su
   lado. Lo del medio, sencillamente, no se pinta. */
.pg-foto.pg-punta{ background-image:none !important; }
.pg-foto.pg-punta::before,
.pg-foto.pg-punta::after{
  content:''; position:absolute; left:0; right:0;
  background-image:var(--vir-base, none);
  background-size:100% var(--pt-alto, 100%);
  background-repeat:no-repeat;
}
.pg-foto.pg-punta::before{ top:0; height:var(--pt-cono, 12%); background-position:top; }
.pg-foto.pg-punta::after{ top:var(--pt-cono, 12%); bottom:0; background-position:bottom; }