/* ═══════════════════════════════════════════════════════════════════════════════════════════
   La Gaceta, portada de mockups/12_gaceta.html a la aplicacion.
   Generado podando el CSS del mockup a las clases que usa la pantalla: se fue el andamiaje de
   la demo (marco de telefono, intro, notas al pie) y las direcciones descartadas (hilo,
   variantes b-a y b-c). El contrato es contexto/06_estilo.md; si chocan, gana el documento.
   Los ajustes propios de la aplicacion van en app.css, no aqui.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════════════════════
   GACETA DE EMPLEOS · la referencia
   ───────────────────────────────────────────────────────────────────────────────────────────
   Esta es la direccion cerrada, despues de once mockups. Es el archivo que hay que portar a
   React en la fase E; los anteriores quedan como historia de por que NO las otras opciones.

   El contrato escrito esta en contexto/06_estilo.md. Si este archivo y ese documento chocan,
   gana el documento y se corrige este.

   Lo que se decidio, y por que:

   · Estructura: cupon recortable. Cada oferta es un aviso enmarcado con linea de corte, como
     los anuncios que se pagaban por pulgada. Recortar era la accion del lector y aqui es la
     misma.
   · Tipografia: diario americano de fin de siglo. Cabecera en letra vieja de imprenta,
     titulares en grotesca condensada, cuerpo en una moderna de lectura. La condensada no es
     nostalgia: es la unica en la que un puesto largo cabe en un renglon.
   · Papel: diario envejecido. Manchones hacia el contorno, estrujado cargado a la derecha,
     borde mordido por el costado derecho y por abajo. Todo se apaga hacia la izquierda,
     donde cae el texto.
   · Relieve: la huella de la prensa, nunca el bisel de metal. Una sola ley de luz en toda la
     pantalla: lo impreso esta HUNDIDO y se ilumina por abajo.
   · Filetes: trazados a mano y torcidos por ruido. Una linea perfecta se lee como pantalla.
   · Botones: cartela entintada. Al pulsar se hunde el marquito entero y su filete cambia de
     dibujo, porque el borde que recibia la luz queda en sombra.

   Nada de esto es una imagen: todo son filtros de ruido SVG escritos aqui mismo.
   ═══════════════════════════════════════════════════════════════════════════════════════════ *//* ───────── Titulares apilados · la direccion elegida ─────────
   Tipografia del diario americano de fin de siglo: cabecera en la letra vieja de imprenta,
   titulares en grotesca condensada —lo unico que dejaba apilar cuatro renglones en una
   columna de cinco centimetros— y cuerpo en una moderna de lectura. Esa condensada es
   ademas la unica en la que "Senior AI Engineer, Recuperacion" cabe en un renglon.

   Estructura: el cupon recortable de la propuesta 2. */
:root{
  /* Grano fino: el poro de la pulpa, visto de cerca. */
  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
  /* Poro: la reticula celular finisima de una superficie curtida. Frecuencia alta y
     un corte duro en el canal alfa, para que sean celdas y no niebla. Es lo que falta
     cuando una textura se ve lisa de mas. */
  --poro:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='po'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' seed='13' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.1' intercept='-0.55'/%3E%3CfeFuncG type='linear' slope='2.1' intercept='-0.55'/%3E%3CfeFuncB type='linear' slope='2.1' intercept='-0.55'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23po)' opacity='0.34'/%3E%3C/svg%3E");
  /* Pespunte. El hilo va POR ENCIMA de la superficie —sombra debajo, brillo arriba—,
     que es exactamente lo contrario de la tinta, que va hundida. Tener las dos leyes
     conviviendo es lo que hace que se lea como un cuaderno cosido y no como un dibujo.
     Las puntadas van desiguales a proposito: una costura pareja se ve impresa. */
  --costura:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='9'%3E%3Cg fill='none'%3E%3Ccircle cx='2.4' cy='6.3' r='0.7' fill='%23352511' fill-opacity='0.5'/%3E%3Ccircle cx='10.0' cy='3.0' r='0.7' fill='%23352511' fill-opacity='0.5'/%3E%3Ccircle cx='15.2' cy='6.0' r='0.7' fill='%23352511' fill-opacity='0.5'/%3E%3Ccircle cx='22.6' cy='2.8' r='0.7' fill='%23352511' fill-opacity='0.5'/%3E%3Cpath d='M3.0,7.2 L10.2,4.3M15.8,6.9 L22.8,4.1' stroke='%233A2A10' stroke-opacity='0.5' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M2.6,6.1 L9.8,3.2M15.4,5.8 L22.4,3.0' stroke='%237C5828' stroke-opacity='1' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M2.3,5.3 L9.5,2.4M15.1,5.0 L22.1,2.2' stroke='%23CBA468' stroke-opacity='0.7' stroke-width='0.75' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  --costura-v:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='25'%3E%3Cg fill='none'%3E%3Ccircle cx='6.3' cy='2.4' r='0.7' fill='%23352511' fill-opacity='0.5'/%3E%3Ccircle cx='3.0' cy='10.0' r='0.7' fill='%23352511' fill-opacity='0.5'/%3E%3Ccircle cx='6.0' cy='15.2' r='0.7' fill='%23352511' fill-opacity='0.5'/%3E%3Ccircle cx='2.8' cy='22.6' r='0.7' fill='%23352511' fill-opacity='0.5'/%3E%3Cpath d='M6.5,3.7 L3.6,10.9M6.2,16.5 L3.4,23.5' stroke='%233A2A10' stroke-opacity='0.5' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M6.1,2.6 L3.2,9.8M5.8,15.4 L3.0,22.4' stroke='%237C5828' stroke-opacity='1' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M5.8,1.8 L2.9,9.0M5.5,14.6 L2.7,21.6' stroke='%23CBA468' stroke-opacity='0.7' stroke-width='0.75' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  /* Fibra: vetas largas en horizontal, como sale del rodillo. */
  --fibra:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.35' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)' opacity='0.17'/%3E%3C/svg%3E");
  /* Papel arrugado. No son lineas dibujadas —eso se leia como rayones— sino relieve: un
     ruido de tipo `turbulence`, que a diferencia de `fractalNoise` sale venoso y con
     crestas afiladas, pasado por `feDiffuseLighting`. Con la luz baja y de lado, cada
     cresta recibe luz y cada hondonada queda en sombra, que es como se ve un papel que
     estuvo estrujado. Dos escalas superpuestas: pliegues grandes y estrujado fino.
     Va enmascarado hacia la derecha; sobre el texto, el relieve estorbaria la lectura. */
  --arrugas:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='760'%3E%3Cdefs%3E%3Cfilter id='a1'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.022' numOctaves='4' seed='23' stitchTiles='stitch' result='t'/%3E%3CfeDiffuseLighting in='t' lighting-color='%23ffffff' surfaceScale='4.2' diffuseConstant='1'%3E%3CfeDistantLight azimuth='238' elevation='38'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Cfilter id='a2'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.075' numOctaves='3' seed='61' stitchTiles='stitch' result='u'/%3E%3CfeDiffuseLighting in='u' lighting-color='%23ffffff' surfaceScale='2.3' diffuseConstant='1'%3E%3CfeDistantLight azimuth='238' elevation='44'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3ClinearGradient id='la' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23000000'/%3E%3Cstop offset='0.6' stop-color='%230d0d0d'/%3E%3Cstop offset='0.85' stop-color='%23858585'/%3E%3Cstop offset='1' stop-color='%23ffffff'/%3E%3C/linearGradient%3E%3Cmask id='ma'%3E%3Crect width='420' height='760' fill='url(%23la)'/%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23ma)' opacity='0.9'%3E%3Crect width='420' height='760' filter='url(%23a1)'/%3E%3Crect width='420' height='760' filter='url(%23a2)' opacity='0.45'/%3E%3C/g%3E%3C/svg%3E");
  /* Y el mismo estrujado del lado del texto, pero desenfocado. El desenfoque va DESPUES
     de iluminar: suaviza el relieve sin borrarlo, asi que del lado izquierdo queda
     ondulacion en vez de cresta y las sombras no compiten con las letras. Otra semilla,
     para que no se lea como un espejo del lado derecho. */
  --arrugas-suaves:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='760'%3E%3Cdefs%3E%3Cfilter id='b1'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.019' numOctaves='4' seed='89' stitchTiles='stitch' result='v'/%3E%3CfeDiffuseLighting in='v' lighting-color='%23ffffff' surfaceScale='4' diffuseConstant='1'%3E%3CfeDistantLight azimuth='238' elevation='40'/%3E%3C/feDiffuseLighting%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3C/filter%3E%3Cfilter id='b2'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.062' numOctaves='3' seed='103' stitchTiles='stitch' result='w'/%3E%3CfeDiffuseLighting in='w' lighting-color='%23ffffff' surfaceScale='2' diffuseConstant='1'%3E%3CfeDistantLight azimuth='238' elevation='46'/%3E%3C/feDiffuseLighting%3E%3CfeGaussianBlur stdDeviation='1.1'/%3E%3C/filter%3E%3ClinearGradient id='lb' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='0.45' stop-color='%23c8c8c8'/%3E%3Cstop offset='0.78' stop-color='%23202020'/%3E%3Cstop offset='1' stop-color='%23000000'/%3E%3C/linearGradient%3E%3Cmask id='mb'%3E%3Crect width='420' height='760' fill='url(%23lb)'/%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23mb)' opacity='0.95'%3E%3Crect width='420' height='760' filter='url(%23b1)'/%3E%3Crect width='420' height='760' filter='url(%23b2)' opacity='0.5'/%3E%3C/g%3E%3C/svg%3E");
  /* Manchones: foxing. Las manchas pardas del papel viejo son hongo y oxido de hierro en la
     pulpa; salen en grupos irregulares, no repartidas parejo.

     La mascara es radial y no lineal: centro limpio, contorno manchado, en degradado. Asi
     envejece una hoja de verdad, por donde le entra el aire, y de paso el moteado no cae
     encima del texto. Dos capas: parches medianos y un moteado fino mas escaso encima.
     La segunda capa, palida y desenfocada, se queda en el centro para que el medio no sea
     un vacio perfecto. */
  --manchones:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='900' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='m1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.042' numOctaves='5' seed='19'/%3E%3CfeColorMatrix values='0 0 0 0 0.31 0 0 0 0 0.165 0 0 0 0 0.03 0 0 0 -5.6 1.86'/%3E%3C/filter%3E%3Cfilter id='m2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.19' numOctaves='3' seed='73'/%3E%3CfeColorMatrix values='0 0 0 0 0.26 0 0 0 0 0.13 0 0 0 0 0.02 0 0 0 -9 2.26'/%3E%3C/filter%3E%3CradialGradient id='rd' cx='0.5' cy='0.5' r='0.72'%3E%3Cstop offset='0' stop-color='%23000000'/%3E%3Cstop offset='0.46' stop-color='%230f0f0f'/%3E%3Cstop offset='0.78' stop-color='%238e8e8e'/%3E%3Cstop offset='1' stop-color='%23ffffff'/%3E%3C/radialGradient%3E%3Cmask id='md'%3E%3Crect width='460' height='900' fill='url(%23rd)'/%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23md)'%3E%3Crect width='460' height='900' filter='url(%23m1)'/%3E%3Crect width='460' height='900' filter='url(%23m2)' opacity='0.6'/%3E%3C/g%3E%3C/svg%3E");
  --manchones-suaves:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='900' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='5' seed='47'/%3E%3CfeColorMatrix values='0 0 0 0 0.34 0 0 0 0 0.2 0 0 0 0 0.05 0 0 0 -5.2 1.6'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3C/filter%3E%3CradialGradient id='ri' cx='0.5' cy='0.5' r='0.75'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='0.55' stop-color='%23a0a0a0'/%3E%3Cstop offset='1' stop-color='%23000000'/%3E%3C/radialGradient%3E%3Cmask id='mi'%3E%3Crect width='460' height='900' fill='url(%23ri)'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='460' height='900' filter='url(%23s)' mask='url(%23mi)' opacity='0.7'/%3E%3C/svg%3E");
  /* Mordiscos de la pantalla: mismo truco que en la hoja, con la proporcion del telefono.
     El rectangulo se sale por arriba y por la izquierda, asi que esos bordes quedan rectos
     y solo el derecho y el inferior caen dentro del lienzo para que el ruido los muerda. */
  --pantalla-mordida:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='740' preserveAspectRatio='none'%3E%3Cfilter id='pm'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.028' numOctaves='4' seed='37' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='15' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='-40' y='-40' width='432' height='772' fill='%23ffffff' filter='url(%23pm)'/%3E%3C/svg%3E");
  /* Mordiscos de la hoja: solo el contorno derecho y el inferior. El truco es que el
     rectangulo se sale del lienzo por arriba y por la izquierda, asi que esos dos bordes los
     recorta el propio SVG y quedan rectos; los otros dos caen dentro y el ruido los muerde.
     Es mascara y no color: por los mordiscos se ve la mesa, que es lo que hace una hoja
     rota de verdad. */
  --hoja-mordida:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300' preserveAspectRatio='none'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.03' numOctaves='4' seed='11' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='16' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='-40' y='-40' width='630' height='330' fill='%23ffffff' filter='url(%23h)'/%3E%3C/svg%3E");

  /* Papel de diario viejo: pardo, no crema. Oscurecido por el tiempo. */
  --papel:#CDB98E; --papel-hondo:#AE9764; --papel-borde:#8A7343;
  /* Las superficies "altas" son el mismo papel, apenas aclarado: si fueran opacas
     taparían la textura y se verían como pegatinas encima del diario. */
  --papel-alto:rgba(255,248,226,.26);
  /* Para lo que NO puede ser translúcido: texto sobre tinta, y la barra de navegación,
     que flota sobre contenido que se desplaza por debajo. */
  --papel-solido:#F3EAD2;
  --tinta:#1F1A12; --tenue:#574C31;
  --oxido:#7E3216; --oxido-suave:rgba(138,58,30,.12); --azul:#233E56; --linea:#9C8759;
  --ok:#3D5533;
  --rotulo:"Barlow Condensed",system-ui,sans-serif; --prensa:"Libre Baskerville",Georgia,serif;
  --texto:"Public Sans",system-ui,sans-serif; --mono:"IBM Plex Mono",monospace;
}
:root{--display:"IM Fell English",Georgia,serif;
      --titular:"Oswald",Impact,sans-serif;
      --lectura:"Old Standard TT",Georgia,serif}
*{box-sizing:border-box}
body{margin:0;color:var(--tinta);font:15px/1.5 var(--texto);padding:24px 16px 64px;
  background:var(--grano),radial-gradient(120% 90% at 50% 0%,#6B6047 0%,#423B2C 100%);
  background-color:#544A38;background-blend-mode:multiply,normal}
.marco{border:10px solid #17140F;border-radius:34px;overflow:hidden;
  box-shadow:0 8px 28px rgba(29,26,22,.25);background:#211C13}
.pant{height:720px;overflow-y:auto;position:relative;
  background:
    var(--poro),
    var(--grano),
    var(--fibra),
    var(--manchones),
    var(--manchones-suaves),
    var(--arrugas),
    var(--arrugas-suaves),
    radial-gradient(30% 16% at 86% 10%,rgba(88,54,16,.20),transparent 74%),
    radial-gradient(34% 19% at 93% 47%,rgba(88,54,16,.18),transparent 76%),
    radial-gradient(26% 14% at 80% 84%,rgba(88,54,16,.16),transparent 74%),
    radial-gradient(120% 80% at 50% 42%,transparent 40%,var(--papel-hondo) 82%,var(--papel-borde) 100%),
    linear-gradient(var(--papel),var(--papel));
  /* Una entrada por capa y en el mismo orden. Las cuatro texturas enmascaradas llevan
     `100% <alto>` y `repeat-y` porque su mascara es un degradado horizontal: si la capa no
     midiera exactamente el ancho del elemento, el lado claro reapareceria a media pantalla. */
  background-size:auto,auto,auto,100% 100%,100% 100%,100% 760px,100% 760px,auto,auto,auto,auto,auto;
  background-repeat:repeat,repeat,repeat,no-repeat,no-repeat,repeat-y,repeat-y,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
  /* Las dos capas de estrujado se mezclan distinto a proposito. La del margen derecho va
     en `multiply`: hunde las hondonadas y deja las crestas al color del papel, que es
     lo que da el relieve marcado. La del lado del texto va en `overlay`, que reparte
     luz y sombra alrededor del tono medio y no ensucia la lectura. */
  background-blend-mode:multiply,multiply,multiply,multiply,multiply,multiply,overlay,normal,normal,normal,normal,normal;
  background-attachment:local;
  -webkit-mask:var(--pantalla-mordida) center/100% 100% no-repeat;
  mask:var(--pantalla-mordida) center/100% 100% no-repeat}
.glifo{font-family:'Apple Symbols','Segoe UI Symbol','Noto Sans Symbols 2',serif}
/* ═══ La huella de la prensa ═══════════════════════════════════════════════════════════════
   Una regla para todo el documento, y es la contraria a la del metal: la prensa APLASTA la
   forma entintada contra el papel, asi que el area impresa queda en un valle y el labio de
   ABAJO del hueco es el que recibe la luz. Tres capas, siempre en este orden:

     mordida arriba  ·  labio iluminado abajo  ·  el papel levantandose alrededor

   Invertirlo —luz arriba— levanta la pieza y la convierte en un boton de plastico. Ese fue
   el error de los mockups 06 y 07 y por eso se conservan: estan bien ejecutados y aun asi
   no funcionan.

   Cuanto mas pesada la forma, mas hondo muerde. Un ornamento de esquina es un taco macizo y
   deja mas huella que una linea de texto; de ahi que cada pieza tenga su profundidad.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
:root{
  --labio:rgba(255,253,242,.62);      /* el papel iluminado bajo el corte */
  --mordida:rgba(52,38,14,.42);       /* la sombra en el labio de arriba */
  --sangrado:rgba(31,26,18,.4);       /* la tinta corriendose en la fibra */
}
/* Texto impreso: la huella minima. */
.hue{text-shadow:0 1px 0 var(--labio), 0 0 .5px var(--sangrado)}
/* Texto con forma pesada: muerde mas hondo. */
.hue-hondo{text-shadow:0 1.5px 0 rgba(255,253,242,.78),
                      0 -1px 1.5px var(--mordida),
                      0 0 1px var(--sangrado)}
/* Grabados y marcas en SVG: la misma ley, con `drop-shadow`. */
.hue-svg{filter:drop-shadow(0 1px 0 rgba(255,253,242,.7)) drop-shadow(0 -.5px .6px var(--mordida))}
/* --- El aviso: una forma entera aplastada contra la hoja --------------------------------- *//* El marco ya no es filete doble: es COSTURA. Cuatro tramos de pespunte metidos hacia
   adentro del canto, como va una costura de guarnicioneria. El canto se queda como un filete
   finisimo —el borde del panel— y la costura corre por dentro, paralela a el.

   La caja sigue hundida; el hilo, encima. Esas dos leyes conviviendo son lo que hace que se
   lea como un cuaderno cosido y no como un dibujo. */
.aviso{position:relative;margin-bottom:19px;padding:18px 17px 13px;text-align:center;
  border:1px solid rgba(58,42,16,.55);
  background-image:var(--costura),var(--costura),var(--costura-v),var(--costura-v);
  background-position:left 7px top 6px, left 7px bottom 6px, left 6px top 7px, right 6px top 7px;
  background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;
  background-size:25px 9px,25px 9px,9px 25px,9px 25px;
  box-shadow:inset 0 2px 4px rgba(58,42,16,.3),
             inset 0 -1.5px 0 rgba(255,253,242,.68),
             0 1.5px 0 rgba(255,253,242,.55),
             0 -1px 2px rgba(58,42,16,.12)}
/* --- Las esquinas: el taco mas pesado de la caja ----------------------------------------- */
.esquina{position:absolute;line-height:0;color:rgba(118,44,18,.92)}
/* El fleuron es el taco mas pesado de la forma: el que mas hondo muerde. Entintado con el
   mismo filtro que las tijeras y con la huella mas profunda de toda la pantalla. */
.esquina .fle{filter:url(#entintado)
  drop-shadow(0 1.6px 0 rgba(255,253,242,.82))
  drop-shadow(0 -1px 1.2px rgba(52,38,14,.6))}
.esquina.ai{top:8px;left:8px}
.esquina.ad{top:8px;right:8px}
.esquina.bi{bottom:8px;left:8px}
.esquina.bd{bottom:8px;right:8px}
/* Un solo dibujo, reflejado: la hoja apunta hacia adentro desde cada esquina. */
.esquina.ad .fle{transform:scaleX(-1)}
.esquina.bi .fle{transform:scaleY(-1)}
.esquina.bd .fle{transform:scale(-1,-1)}
/* --- Cuerpo del aviso -------------------------------------------------------------------- */
.aviso h3{margin:0 0 5px;font:600 18px/1.08 var(--titular);text-transform:uppercase;letter-spacing:.005em;
  filter:url(#tinta-texto)}
.empresa{margin:0;font:400 12.5px var(--lectura);letter-spacing:.11em;text-transform:uppercase;color:var(--oxido)}
.donde{margin:2px 0 0;font:italic 400 13px var(--lectura);color:var(--tenue)}
.sal{margin:8px 0 0;font:500 13px var(--mono);color:var(--ok)}
.sal.vacio{color:var(--tenue)}
.origen{margin:3px 0 0;font:11px var(--mono);color:var(--tenue)}
/* --- La linea de corte ------------------------------------------------------------------- */
.corte{position:relative;margin:12px -15px 0;height:16px;
  display:flex;justify-content:center;align-items:center;color:var(--tinta);
  background:var(--corte-mano) center/100% 100% no-repeat}
/* Las tijeras apoyan en el claro que deja la linea, sin cajita: van entintadas y hundidas
   como todo lo demas. */
.corte svg{width:17px;height:17px;transform:none;background:none;padding:0}
/* --- El cupon: la unica parte que se toca ------------------------------------------------ */
.cupon{display:flex;margin-top:12px}
.cupon :is(button,a){flex:1;padding:5px 0;background:none;border:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font:600 10.5px var(--titular);letter-spacing:.13em;text-transform:uppercase;color:var(--tenue);
  text-shadow:0 1px 0 var(--labio)}
.cupon :is(button,a) + :is(button,a){position:relative}
.cupon :is(button,a) + :is(button,a)::before{content:"";position:absolute;left:-4px;top:3px;bottom:3px;width:9px;
  background:var(--costura-v);background-repeat:repeat-y;background-size:9px 25px}
.cupon .si{color:var(--ok)}
.cupon .no{color:var(--oxido)}
/* Al pulsar, la huella se invierte: la pieza se hunde de verdad bajo el dedo. */
.cupon :is(button,a):active{text-shadow:0 -1px 0 rgba(255,253,242,.4), 0 1px 1.5px rgba(52,38,14,.55)}
.cupon :is(button,a):active .hue-svg{filter:drop-shadow(0 -1px 0 rgba(255,253,242,.45)) drop-shadow(0 1px 1px var(--mordida))}
/* --- Estados: un aviso ya trabajado ------------------------------------------------------ *//* Marcado: el aviso se hunde mas, como si lo hubieran repasado con la prensa. */
.aviso.marcado{border-color:var(--ok);
  box-shadow:inset 0 3px 6px rgba(48,66,38,.3),
             inset 0 -1.5px 0 rgba(255,253,242,.7),
             0 1.5px 0 rgba(255,253,242,.55)}
.aviso.marcado .esquina{color:rgba(61,85,51,.9)}
.marca-lote{position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  padding:1px 9px;background:var(--papel-solido);
  font:600 9.5px var(--titular);letter-spacing:.22em;text-transform:uppercase;color:var(--ok);
  text-shadow:0 1px 0 rgba(255,253,242,.8), 0 -1px 1px var(--mordida)}
/* Descartado: en un registro, una entrada anulada se tacha y se deja a la vista. */
.aviso.anulado{opacity:.62;border-style:solid;border-width:1px}
.aviso.anulado h3{text-decoration:line-through;text-decoration-thickness:1px}
.aviso.anulado .cupon{display:none}
.aviso.anulado .corte{display:none}
.anotacion{margin:9px 0 0;font:italic 400 12px var(--lectura);color:var(--oxido)}
/* --- Cabecera, seccion y barra ----------------------------------------------------------- */
.gaceta{position:relative;text-align:center;padding:15px 16px 18px}
.gaceta::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:9px;
  background:var(--costura);background-repeat:repeat-x;background-size:25px 9px}
.gaceta .rotulo-chico{margin:0 0 6px;color:var(--oxido);
  font:600 10px/1 var(--titular);letter-spacing:.34em;text-transform:uppercase}
.gaceta h2{margin:0;font:400 37px/.92 var(--display);letter-spacing:.02em;text-transform:uppercase;
  filter:url(#tinta-texto)}
.gaceta .bajada{margin:4px 0 0;font:400 15px/1.15 var(--display);letter-spacing:.14em;text-transform:uppercase}
.gaceta .bajada span{font-size:10.5px;letter-spacing:.22em}
.gaceta .fecha{margin:8px 0 0;color:var(--tenue);font:italic 400 12px var(--display);letter-spacing:.05em}
.seccion{position:relative;margin:0;padding:8px 0 14px;text-align:center;
  font:600 13px/1 var(--titular);letter-spacing:.26em;text-transform:uppercase}
/* La division de seccion tambien va cosida, no impresa. */
.seccion::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:9px;
  background:var(--costura);background-repeat:repeat-x;background-size:25px 9px}
.cuerpo{padding:15px 15px 86px;position:relative}
/* La barra es el pie de la misma hoja, no una banda pegada: lleva el papel casi opaco
   —lo que se desplaza por debajo no debe leerse a traves— con el grano encima. */
.nav{position:absolute;left:0;right:0;bottom:0;overflow:visible;display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--grano),linear-gradient(rgba(205,185,142,.965),rgba(196,175,130,.975));
  background-blend-mode:multiply,normal;
  box-shadow:inset 0 3px 5px rgba(58,42,16,.22)}
.nav::before{content:"";position:absolute;left:14px;right:14px;top:-4px;height:9px;
  background:var(--costura);background-repeat:repeat-x;background-size:25px 9px}
.nav a{padding:10px 0 12px;text-align:center;text-decoration:none;color:var(--tenue);
  font:600 9.5px var(--titular);letter-spacing:.15em;text-transform:uppercase;
  text-shadow:0 1px 0 var(--labio)}
.nav a.on{color:var(--oxido)}
.nav svg{display:block;margin:0 auto 4px;width:18px;height:18px;
  filter:url(#entintado) drop-shadow(0 1px 0 rgba(255,253,242,.72)) drop-shadow(0 -.5px .6px rgba(52,38,14,.45))}
/* ═══ Variante de tinta ═══════════════════════════════════════════════════════════════════
   Todo lo que en la version de hilo es pespunte, aqui es filete trazado a mano. Una linea de
   CSS es geometricamente perfecta y por eso se lee como pantalla; la de una forma
   tipografica esta algo torcida y la esquina nunca cierra exacta. Se dibuja con SVG y se
   deforma con ruido.

   Cada filete va DOS veces: la linea entintada y su labio iluminado un pelo mas abajo, de
   modo que la huella de la prensa sigue el mismo temblor que el trazo. Esa es la diferencia
   de fondo con el hilo: aqui hay UNA sola ley de luz en toda la pantalla —todo hundido—,
   mientras que el hilo va por encima y obedece la contraria.

   El lienzo de cada SVG lleva holgura de sobra: el desplazamiento empuja la linea, y si el
   borde queda cerca, el recorte la parte en guiones. */
.tinta{--filete-doble-tinta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='16' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='fd' x='-5%25' y='-60%25' width='110%25' height='220%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.6' numOctaves='2' seed='17' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='2.6' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23fd)' fill='none' stroke-linecap='round'%3E%3Cpath d='M4,6.6H336M4,11.2H336' stroke='%23FFFDF2' stroke-opacity='0.62' stroke-width='1.4'/%3E%3Cpath d='M4,5H336' stroke='%23241F18' stroke-opacity='0.9' stroke-width='2.3'/%3E%3Cpath d='M4,9.8H336' stroke='%23241F18' stroke-opacity='0.85' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
       --corte-mano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='16' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='k' x='-5%25' y='-60%25' width='110%25' height='220%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.06 0.5' numOctaves='2' seed='31' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='1.6' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23k)' fill='none' stroke-linecap='round'%3E%3Cpath d='M6.0,9.7H10.9M13.1,9.6H20.3M22.8,9.4H29.9M33.2,9.6H38.8M42.1,9.8H47.7M51.2,9.5H57.5M61.6,9.5H66.0M69.8,9.7H76.7M79.9,9.2H86.0M88.7,9.7H95.6M97.9,9.6H103.0M106.8,9.6H112.3M116.4,9.6H120.1M124.2,9.2H129.0M132.9,9.8H137.3M139.9,9.5H143.5M198.2,9.8H205.0M207.7,9.4H211.4M215.3,9.5H220.6M224.1,9.5H228.3M232.0,9.8H237.7M241.2,9.4H244.6M248.4,9.3H253.2M255.8,9.8H260.2M263.3,9.5H269.1M273.0,9.6H277.6M281.5,9.2H288.8M292.9,9.5H298.6M302.6,9.5H307.1M310.1,9.8H316.6M320.5,9.5H327.1M330.9,9.4H334.0' stroke='%23FFFDF2' stroke-opacity='0.62' stroke-width='1.3'/%3E%3Cpath d='M6.0,7.9H11.9M16.0,7.7H22.9M25.4,8.0H29.0M31.7,8.0H36.9M40.6,8.2H46.6M50.3,8.0H54.8M58.8,8.3H63.0M65.6,7.9H72.8M76.7,7.7H82.9M87.3,8.2H93.6M95.9,8.2H101.5M105.1,8.0H111.4M113.7,7.7H118.2M122.4,8.3H128.7M131.4,8.1H136.6M139.5,8.0H145.0M196.2,8.3H199.5M202.5,8.0H209.7M213.8,7.7H220.5M223.1,8.3H229.6M232.4,8.0H235.7M238.2,7.7H244.5M248.6,8.2H252.1M256.2,8.3H262.9M266.5,8.0H273.1M276.3,8.2H279.6M283.7,8.2H289.3M293.0,7.9H300.2M302.6,8.0H308.4M311.7,7.9H315.4M319.7,7.8H327.1M329.8,7.7H334.0' stroke='%23241F18' stroke-opacity='0.86' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
       --marco-tinta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='230' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='w' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.019' numOctaves='3' seed='7' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='3.6' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23w)' fill='none'%3E%3Cg stroke='%23FFFDF2' stroke-opacity='0.7' stroke-width='1.6' transform='translate(0,1.5)'%3E%3Crect x='6' y='6' width='348' height='218'/%3E%3Crect x='10.5' y='10.5' width='339' height='209'/%3E%3C/g%3E%3Cg stroke='%23241F18' stroke-opacity='0.9' stroke-width='1.7'%3E%3Crect x='6' y='6' width='348' height='218'/%3E%3Crect x='10.5' y='10.5' width='339' height='209'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
       --filete-tinta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='16' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='l' x='-10%25' y='-60%25' width='120%25' height='220%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04 0.7' numOctaves='2' seed='13' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='2.8' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23l)' fill='none' stroke-linecap='round'%3E%3Cpath d='M4,9.4 H336' stroke='%23FFFDF2' stroke-opacity='0.66' stroke-width='1.4'/%3E%3Cpath d='M4,8 H336' stroke='%23241F18' stroke-opacity='0.88' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
       --vert-tinta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='60' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='v' x='-60%25' y='-10%25' width='220%25' height='120%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7 0.04' numOctaves='2' seed='41' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='2.4' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23v)' fill='none' stroke-linecap='round'%3E%3Cpath d='M9.4,4 V56' stroke='%23FFFDF2' stroke-opacity='0.62' stroke-width='1.3'/%3E%3Cpath d='M8,4 V56' stroke='%23241F18' stroke-opacity='0.85' stroke-width='1.4'/%3E%3C/g%3E%3C/svg%3E")}
.tinta .aviso{background-image:var(--marco-tinta);
  background-position:center;background-repeat:no-repeat;background-size:100% 100%;
  border-color:transparent}
.tinta .gaceta::after,.tinta .seccion::after,.tinta .nav::before{
  background:var(--filete-tinta) center/100% 100% no-repeat;height:16px}
.tinta .gaceta::after{bottom:-5px;background-image:var(--filete-doble-tinta)}
.tinta .seccion::after{bottom:-4px}
.tinta .nav::before{top:-9px;background-image:var(--filete-doble-tinta)}
.tinta .cupon :is(button,a) + :is(button,a)::before{background:var(--vert-tinta) center/100% 100% no-repeat;
  width:16px;left:-8px;top:1px;bottom:1px}
.tinta .aviso.marcado{border-color:transparent}
.tinta{--cartela:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='46' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='c9' x='-25%25' y='-25%25' width='150%25' height='150%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.07' numOctaves='2' seed='9' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='1.6' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23c9)' fill='none'%3E%3Crect x='3' y='3' width='104' height='40' stroke='%23FFFDF2' stroke-opacity='0.68' stroke-width='1.4' transform='translate(0,1.3)'/%3E%3Crect x='3' y='3' width='104' height='40' stroke='%23241F18' stroke-opacity='0.82' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
       --cartela-hundida:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='46' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='c9' x='-25%25' y='-25%25' width='150%25' height='150%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.07' numOctaves='2' seed='9' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='1.6' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23c9)' fill='none'%3E%3Crect x='3' y='3' width='104' height='40' stroke='%23FFFDF2' stroke-opacity='0.5' stroke-width='1.4' transform='translate(0,-1.3)'/%3E%3Crect x='3' y='3' width='104' height='40' stroke='%23241F18' stroke-opacity='0.82' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E")}
/* ═══ Todo en tinta ════════════════════════════════════════════════════════════════════════
   Las tres lineas de datos venian en mono, que es una letra de maquina de escribir: es lo
   menos entintado de la pantalla y lo delataba. Pasan a la misma serif de lectura, con
   cifras espaciadas para que las columnas sigan cuadrando, y con la huella de la prensa como
   todo lo demas.

   Las tijeras tambien se imprimieron: llevan `url(#entintado)`, que las tuerce un pelo con
   ruido y les corre la tinta con un desenfoque minimo, y encima la huella. Un icono
   geometricamente perfecto en medio de una plana torcida se ve pegado.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.donde{margin:3px 0 0;font:italic 400 13.5px var(--lectura);color:#4A3A22;
  text-shadow:0 1px 0 rgba(255,253,242,.62), 0 0 .6px rgba(31,26,18,.45)}
.sal{margin:9px 0 0;font:700 15px var(--lectura);letter-spacing:.06em;color:#262E1C;
  font-variant-numeric:oldstyle-nums;
  text-shadow:0 1.1px 0 rgba(255,253,242,.7), 0 0 .6px rgba(31,26,18,.5)}
.sal.vacio{color:#6B5E43;font-style:italic;letter-spacing:.02em}
.origen{margin:4px 0 0;font:400 12px var(--lectura);letter-spacing:.13em;text-transform:uppercase;
  color:#6B5E43;text-shadow:0 1px 0 rgba(255,253,242,.6), 0 0 .5px rgba(31,26,18,.4)}
.corte svg{filter:url(#entintado) drop-shadow(0 1px 0 rgba(255,253,242,.72))
                  drop-shadow(0 -.4px .5px rgba(52,38,14,.45))}
/* ═══ El hundido ═══════════════════════════════════════════════════════════════════════════
   Aplastar papel no es mover una pieza: la zona baja, el papel de alrededor se pellizca hacia
   arriba, el fondo del hueco se oscurece un poco porque le llega menos luz, y la huella del
   texto SE INVIERTE —lo que estaba iluminado abajo pasa a estarlo arriba— porque el labio
   que recibia la luz acaba de quedar en sombra.

   Las cuatro cosas juntas. Con una sola no se lee como papel: se lee como un boton.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.cupon :is(button,a){transition:transform .06s ease-out, box-shadow .06s ease-out}
.hundido,.cupon :is(button,a):active{
  text-shadow:0 -1px 0 rgba(255,253,242,.42), 0 1.2px 1.6px rgba(52,38,14,.6) !important}
.hundido .hue-svg,.cupon :is(button,a):active .hue-svg{
  filter:drop-shadow(0 -1px 0 rgba(255,253,242,.45)) drop-shadow(0 1.2px 1.2px rgba(52,38,14,.55))}
/* --- B · Cartela entintada --------------------------------------------------------------- *//* Cada accion va en su cartela, un marquito trazado a mano. Al pulsar se hunde la cartela
   entera y su filete pierde el labio de abajo: por eso el marco cambia de dibujo. */
.b-b .cupon{gap:7px;padding:0 2px}
.b-b .cupon :is(button,a){padding:7px 2px 6px;border-radius:2px;position:relative}
.b-b .cupon :is(button,a)::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--cartela) center/100% 100% no-repeat}
.b-b .cupon :is(button,a) + :is(button,a)::before{display:none}
.b-b .cupon :is(button,a).hundido,.b-b .cupon :is(button,a):active{
  transform:scale(.978);
  background:radial-gradient(88% 118% at 50% 46%, rgba(52,38,14,.15), transparent 74%);
  box-shadow:inset 0 3px 6px rgba(52,38,14,.36), inset 0 -1.5px 0 rgba(255,253,242,.55)}
.b-b .cupon :is(button,a).hundido::after,.b-b .cupon :is(button,a):active::after{
  background-image:var(--cartela-hundida)}
/* --- el recorte: lienzo transitorio sobre el aviso, y el hueco que deja al caer ---------- */
.aviso{position:relative}
.aviso canvas.tijeras{position:absolute;inset:0;display:none;pointer-events:none;z-index:2}