/* Portada: la mesa de pruebas. Superficie de papel prensa, objetos con sombra, sello rojo, resaltador. */
.home {
  --mesa: #D8D5CD; --mesa-2: #CDC9C0; --mesa-3: #BDB9AF; --tinta: #111214; --carbon: #3A3C42; --lapiz: #6B6E76;
  --sello: #B3121C; --resaltador: #E6FF3F; --papel: #F8F5EE; --sombra: 0 1px 2px rgba(20,18,14,.18), 0 14px 34px -14px rgba(20,18,14,.55);
  background: var(--mesa); color: var(--tinta); font-family: var(--serif);
}
.home::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1000; opacity: .16; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.home .topbar { background: color-mix(in srgb, var(--mesa) 86%, transparent); border-color: rgba(17,18,20,.14); }
.home .mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--carbon); }
.home h2 { font-family: var(--cond); font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; line-height: .9; font-size: clamp(44px, 6.4vw, 96px); margin: 10px 0 0; color: var(--tinta); }
.home h2 em { font-style: italic; font-family: var(--display); font-weight: 400; text-transform: none; letter-spacing: -.03em; color: var(--sello); font-variation-settings: "opsz" 144, "SOFT" 60; }
.mesa__head, .hilo__head, .libro__head, .crono__head { display: grid; gap: 14px 40px; margin-bottom: 56px; align-items: end; }
@media (min-width: 900px) { .mesa__head, .hilo__head, .libro__head { grid-template-columns: 1fr 34ch; } .mesa__head p, .hilo__head p, .libro__head p { margin: 0 0 8px; } }
.mesa__head p, .hilo__head p, .libro__head p { font-size: 16.5px; line-height: 1.5; color: var(--carbon); margin: 0; }

/* Sello de goma y resaltador: los dos gestos de la mesa */
.sello-goma { display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--sello); border: 2.5px solid var(--sello); padding: 7px 12px 6px; transform: rotate(-3deg); border-radius: 3px; mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence baseFrequency='.55' numOctaves='2'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 4 -1.2'/></filter><rect width='100%' height='100%' fill='white'/><rect width='100%' height='100%' filter='url(%23g)' opacity='.55'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence baseFrequency='.55' numOctaves='2'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 4 -1.2'/></filter><rect width='100%' height='100%' fill='white'/><rect width='100%' height='100%' filter='url(%23g)' opacity='.55'/></svg>"); }
.home mark { background: linear-gradient(104deg, transparent 2%, var(--resaltador) 3%, var(--resaltador) 96%, transparent 98%); color: inherit; padding: 0 .12em; margin: 0 -.06em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Cabecera: cabecera de periódico sobre fotos sueltas */
.cabecera { position: relative; min-height: 100svh; display: grid; align-items: end; padding: 130px 0 40px; overflow: clip; }
.cabecera__in { position: relative; z-index: 3; }
.cabecera__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-bottom: 26px; }
.masthead { font-family: var(--cond); font-weight: 900; text-transform: uppercase; font-size: clamp(70px, 13.9vw, 242px); line-height: .82; letter-spacing: -.035em; margin: 0 0 30px -.03em; color: var(--tinta); width: 100%; }
.masthead__br { display: none; }
@media (max-width: 640px) { .masthead__br { display: block; } .masthead { font-size: 24vw; } }
.cabecera__deck { font-size: clamp(18px, 1.55vw, 23px); line-height: 1.42; max-width: 56ch; margin: 0 0 34px; color: var(--tinta); }
.cabecera__cue { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--carbon); }
.cabecera__cue i { width: 44px; height: 1px; background: var(--carbon); position: relative; transition: width .3s var(--ease); }
.cabecera__cue i::after { content: ""; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px; border-right: 1px solid var(--carbon); border-bottom: 1px solid var(--carbon); transform: rotate(-45deg); }
.cabecera__cue:hover i { width: 72px; }
.cabecera__prints { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.print { position: absolute; left: var(--x); top: var(--y); width: var(--w); padding: 10px 10px 30px; background: var(--papel); box-shadow: var(--sombra); transform: rotate(var(--r)) translate(var(--px, 0), var(--py, 0)); transition: transform .9s var(--ease-out); will-change: transform; }
.print img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.75) contrast(1.05); }
.print::after { content: attr(data-pie); position: absolute; left: 12px; bottom: 9px; right: 12px; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--lapiz); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.print--tape::before { content: ""; position: absolute; left: 50%; top: -12px; width: 76px; height: 24px; margin-left: -38px; background: rgba(230,224,200,.72); transform: rotate(-4deg); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
@media (max-width: 900px) { .print { width: calc(var(--w) * .7); } .print:nth-child(n+5) { display: none; } }
@media (prefers-reduced-motion: reduce) { .print { transition: none; } }

/* La mesa: cada expediente es un objeto con la forma de su formato */
.mesa { padding: 110px 0 120px; }
.mesa__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 56px 28px; grid-auto-flow: dense; align-items: start; }
@media (max-width: 1100px) { .mesa__grid { gap: 48px 22px; } }
@media (max-width: 760px) { .mesa__grid { grid-template-columns: 1fr 1fr; gap: 40px 18px; } .obj { grid-column: span 2 !important; } .obj--recibo, .obj--chat, .obj--energia, .obj--libro { grid-column: span 1 !important; } }
.obj { position: relative; display: block; text-decoration: none; color: var(--ofg, var(--tinta)); background: var(--obg, var(--papel)); grid-column: span var(--span, 4); box-shadow: var(--sombra); transform: rotate(var(--r, 0deg)); transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); overflow: clip; overflow-clip-margin: 46px; }
.obj.reveal { opacity: 0; transform: translateY(46px) rotate(calc(var(--r, 0deg) + 4deg)); transition: opacity .8s var(--ease-out), transform 1s var(--ease-out); }
.obj.reveal.in { opacity: 1; transform: rotate(var(--r, 0deg)); }
.obj:hover { transform: rotate(0deg) translateY(-6px) !important; box-shadow: 0 2px 3px rgba(20,18,14,.2), 0 30px 60px -20px rgba(20,18,14,.6); z-index: 2; }
.obj__cuerpo { padding: 22px 22px 20px; display: grid; gap: 10px; }
.obj__anio { font-family: var(--cond); font-weight: 900; font-size: 44px; line-height: 1; letter-spacing: -.02em; color: var(--oacc, var(--sello)); }
.obj__tema { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.obj h3 { font-family: var(--ofont, var(--display)); font-size: clamp(22px, 1.9vw, 30px); line-height: 1.02; margin: 4px 0 2px; letter-spacing: -.015em; text-wrap: balance; }
.obj p { margin: 0; font-family: var(--serif); font-size: 14.5px; line-height: 1.48; opacity: .85; }
.obj__pie { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.obj__pie b { font-weight: 500; color: var(--oacc, var(--sello)); }
.obj__img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.obj--pronto { opacity: .55; pointer-events: none; }
/* carpeta con pestaña */
.obj--dossier { --obg: #E4C47E; --ofg: #2B2214; --oacc: #9A3B1E; clip-path: polygon(0 7%, 40% 7%, 44% 0, 100% 0, 100% 100%, 0 100%); padding-top: 7%; }
.obj--dossier .obj__img { aspect-ratio: 16 / 8; filter: sepia(.4) contrast(1.05); mix-blend-mode: multiply; }
.obj--dossier::after { content: "Confidencial"; position: absolute; right: 18px; top: calc(7% + 14px); font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--sello); border: 2px solid var(--sello); padding: 4px 8px; transform: rotate(6deg); }
/* tablilla clínica */
.obj--clinico { border-radius: 10px; padding-top: 26px; }
.obj--clinico::before { content: ""; position: absolute; left: 50%; top: -6px; width: 110px; height: 30px; margin-left: -55px; background: linear-gradient(#5f6368, #2f3236); border-radius: 0 0 10px 10px; box-shadow: 0 3px 6px rgba(0,0,0,.35); z-index: 1; }
.obj--clinico::after { content: ""; position: absolute; left: 50%; top: 6px; width: 34px; height: 10px; margin-left: -17px; background: var(--mesa); border-radius: 5px; z-index: 2; }
.obj--clinico .obj__img { filter: grayscale(.6) contrast(1.1); }
/* papel continuo */
.obj--terminal { border-radius: 0; padding-inline: 22px; background-image: radial-gradient(circle, var(--mesa) 4px, transparent 4.5px), radial-gradient(circle, var(--mesa) 4px, transparent 4.5px); background-size: 22px 22px, 22px 22px; background-position: 0 0, 100% 0; background-repeat: repeat-y, repeat-y; }
.obj--terminal .obj__cuerpo { border-left: 1px dashed rgba(230,237,232,.25); border-right: 1px dashed rgba(230,237,232,.25); }
.obj--terminal .obj__img { filter: grayscale(1) contrast(1.4) brightness(.8); mix-blend-mode: screen; }
.obj--terminal h3 { font-weight: 700; text-transform: lowercase; }
/* libro con lomo */
.obj--libro { border-radius: 3px 10px 10px 3px; padding-left: 20px; background-image: linear-gradient(90deg, rgba(0,0,0,.28) 0, rgba(0,0,0,.08) 14px, transparent 20px, rgba(255,255,255,.35) 21px, transparent 24px); }
.obj--libro .obj__img { display: none; }
.obj--libro .obj__cuerpo { padding-top: 40px; padding-bottom: 40px; }
/* organigrama con chincheta */
.obj--organigrama::before { content: ""; position: absolute; left: 50%; top: 14px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff6b6b, var(--sello) 60%, #6d0a12); box-shadow: 0 6px 8px -2px rgba(0,0,0,.6); z-index: 3; }
.obj--organigrama .obj__img { filter: grayscale(.8) contrast(1.15); opacity: .85; }
.obj--organigrama h3 { text-transform: uppercase; letter-spacing: -.01em; font-size: clamp(30px, 2.6vw, 44px); }
/* registro rayado */
.obj--lista { background-image: repeating-linear-gradient(transparent 0 27px, rgba(31,26,18,.12) 27px 28px); background-position: 0 6px; }
.obj--lista .obj__img { display: none; }
.obj--lista .obj__cuerpo { padding-top: 34px; }
/* fotograma */
.obj--documental { padding: 18px 0; background-image: radial-gradient(circle, var(--mesa) 3px, transparent 3.5px), radial-gradient(circle, var(--mesa) 3px, transparent 3.5px); background-size: 20px 18px, 20px 18px; background-position: 0 0, 0 100%; background-repeat: repeat-x, repeat-x; }
.obj--documental .obj__img { aspect-ratio: 21 / 9; filter: contrast(1.15) saturate(.7); }
.obj--documental h3 { text-transform: uppercase; }
/* cuaderno con espiral */
.obj--diario { padding-left: 30px; background-image: radial-gradient(circle, var(--mesa) 5px, transparent 5.5px), repeating-linear-gradient(transparent 0 25px, rgba(0,87,184,.16) 25px 26px); background-size: 30px 30px, 100% 26px; background-position: 6px 8px, 0 14px; background-repeat: repeat-y, repeat; }
.obj--diario .obj__img { display: none; }
.obj--diario .obj__anio { font-family: 'Playfair Display', serif; font-weight: 900; }
/* informe con franjas de clasificación */
.obj--informe { border-block: 14px solid var(--tinta); }
.obj--informe::after { content: "Reservado"; position: absolute; right: 16px; top: 16px; font-family: 'Special Elite', monospace; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--sello); border: 3px double var(--sello); padding: 4px 10px; transform: rotate(-8deg); }
.obj--informe .obj__img { filter: grayscale(1) contrast(1.2); mix-blend-mode: multiply; opacity: .9; }
/* estado de cuenta con corte inferior */
.obj--extracto { -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 12px) no-repeat, conic-gradient(from 135deg at 50% 0, #000 90deg, transparent 0) bottom / 24px 12px repeat-x; mask: linear-gradient(#000 0 0) top / 100% calc(100% - 12px) no-repeat, conic-gradient(from 135deg at 50% 0, #000 90deg, transparent 0) bottom / 24px 12px repeat-x; padding-bottom: 14px; }
.obj--extracto .obj__img { display: none; }
.obj--extracto .obj__cuerpo { border-top: 6px solid var(--oacc); }
/* contenedor corrugado */
.obj--puerto { background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 10px, transparent 10px 28px, rgba(0,0,0,.35) 28px 32px); }
.obj--puerto h3 { text-transform: uppercase; font-size: clamp(32px, 3vw, 52px); letter-spacing: .01em; color: var(--oacc); }
.obj--puerto .obj__img { aspect-ratio: 21 / 9; filter: saturate(.6) contrast(1.1); opacity: .9; }
/* pergamino */
.obj--arbol { border: 1px solid #C9B899; outline: 1px solid #C9B899; outline-offset: -8px; border-radius: 2px 2px 26px 26px / 2px 2px 40px 40px; }
.obj--arbol .obj__img { filter: sepia(.5); mix-blend-mode: multiply; }
/* teléfono */
.obj--chat { border-radius: 30px; border: 7px solid #1d2b33; box-shadow: var(--sombra), inset 0 0 0 1px rgba(255,255,255,.06); }
.obj--chat::before { content: ""; position: absolute; left: 50%; top: 10px; width: 90px; height: 22px; margin-left: -45px; background: #1d2b33; border-radius: 12px; z-index: 2; }
.obj--chat .obj__img { aspect-ratio: 9 / 8; filter: brightness(.7); }
.obj--chat .obj__cuerpo { padding-top: 16px; }
.obj--chat .obj__anio { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 30px; }
/* formulario de registro */
.obj--registro { background-image: linear-gradient(rgba(0,0,0,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.08) 1px, transparent 1px); background-size: 100% 34px, 34px 100%; }
.obj--registro::after { content: "Inscrito"; position: absolute; right: 22px; bottom: 22px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--sello); border: 2px solid var(--sello); border-radius: 50%; padding: 18px 10px; transform: rotate(-14deg); }
/* recibo térmico */
.obj--recibo { -webkit-mask: linear-gradient(#000 0 0) center / 100% calc(100% - 24px) no-repeat, conic-gradient(from 135deg at 50% 0, #000 90deg, transparent 0) bottom / 20px 12px repeat-x, conic-gradient(from -45deg at 50% 100%, #000 90deg, transparent 0) top / 20px 12px repeat-x; mask: linear-gradient(#000 0 0) center / 100% calc(100% - 24px) no-repeat, conic-gradient(from 135deg at 50% 0, #000 90deg, transparent 0) bottom / 20px 12px repeat-x, conic-gradient(from -45deg at 50% 100%, #000 90deg, transparent 0) top / 20px 12px repeat-x; padding: 14px 0; --obg: #F4F1E9; }
.obj--recibo .obj__img { display: none; }
.obj--recibo .obj__cuerpo { padding: 26px 18px; font-family: 'Courier Prime', monospace; }
.obj--recibo h3 { font-size: 20px; text-transform: uppercase; }
.obj--recibo p { font-family: 'Courier Prime', monospace; font-size: 12.5px; border-top: 1px dashed #999; border-bottom: 1px dashed #999; padding: 10px 0; }
.obj--recibo .obj__anio { font-family: 'Courier Prime', monospace; font-size: 28px; }
/* etiqueta de peligro eléctrico */
.obj--energia { --obg: #FFE600; --ofg: #111; --oacc: #111; border-top: 16px solid; border-image: repeating-linear-gradient(-45deg, #111 0 14px, #FFE600 14px 28px) 16; }
.obj--energia::before { content: ""; position: absolute; left: 50%; top: 22px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--mesa); box-shadow: inset 0 1px 3px rgba(0,0,0,.4); z-index: 2; }
.obj--energia .obj__img { display: none; }
.obj--energia .obj__cuerpo { padding-top: 54px; }
.obj--energia h3 { text-transform: uppercase; font-size: clamp(28px, 2.4vw, 40px); }
/* recorte de prensa (Gran Padrino) */
.obj--gp { --obg: #F5F0E8; --ofg: #0A0A0A; --oacc: #A8121F; -webkit-mask: linear-gradient(#000 0 0) center / calc(100% - 16px) 100% no-repeat, conic-gradient(from 45deg at 0 50%, #000 90deg, transparent 0) left / 8px 18px repeat-y, conic-gradient(from 225deg at 100% 50%, #000 90deg, transparent 0) right / 8px 18px repeat-y; mask: linear-gradient(#000 0 0) center / calc(100% - 16px) 100% no-repeat, conic-gradient(from 45deg at 0 50%, #000 90deg, transparent 0) left / 8px 18px repeat-y, conic-gradient(from 225deg at 100% 50%, #000 90deg, transparent 0) right / 8px 18px repeat-y; }
.obj--gp .obj__cuerpo { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 26px 30px 28px; }
@media (min-width: 900px) { .obj--gp .obj__cuerpo { grid-template-columns: 1fr 1fr; align-items: end; } .obj--gp .obj__cuerpo h3 { grid-column: 1 / -1; } }
.obj--gp h3 { font-size: clamp(38px, 4vw, 66px); font-weight: 700; line-height: .92; letter-spacing: -.03em; }
.obj--gp .obj__img { filter: grayscale(1) contrast(1.15); aspect-ratio: 21 / 9; }
/* foto con marco (Mancha Dorada) */
.obj--md { --obg: #FBF9F4; padding: 16px 16px 20px; }
.obj--md .obj__img { aspect-ratio: 4 / 3; filter: sepia(.35) saturate(1.3) contrast(1.05); }
.obj--md .obj__cuerpo { padding: 18px 6px 4px; }

/* Hilo rojo: fotos con marco unidas por hilo */
.hilo { padding: 110px 0 120px; background: var(--mesa-2); border-top: 1px solid rgba(17,18,20,.1); }
.red { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) { .red { grid-template-columns: minmax(0, 1fr) 340px; } .red__panel { position: sticky; top: 100px; max-height: calc(100vh - 120px); overflow: auto; } }
.red__stage svg { width: 100%; height: auto; display: block; overflow: visible; }
.red .edge { stroke: var(--sello); stroke-width: 1.1; opacity: .28; transition: opacity .3s, stroke-width .3s; }
.red .edge.is-on { opacity: .95; stroke-width: 1.8; } .red .edge.is-off { opacity: .06; }
.red .nodo { cursor: pointer; transition: opacity .3s; }
.red .nodo .ring { fill: var(--papel); stroke: var(--tinta); stroke-width: 1.2; transition: stroke .3s, fill .3s; }
.red .nodo--caso .ring { fill: var(--sello); stroke: var(--sello); }
.red .nodo image { clip-path: circle(46% at 50% 50%); filter: grayscale(1) contrast(1.1); transition: filter .3s; }
.red .nodo text { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; fill: var(--carbon); text-anchor: middle; }
.red .nodo.is-on .ring { stroke: var(--sello); stroke-width: 2.5; } .red .nodo.is-on image { filter: grayscale(0); } .red .nodo.is-on text { fill: var(--tinta); font-weight: 500; }
.red .nodo.is-off { opacity: .28; }
.ficha { position: relative; background: var(--papel); padding: 26px 26px 24px; box-shadow: var(--sombra); transform: rotate(-.6deg); background-image: repeating-linear-gradient(transparent 0 27px, rgba(17,18,20,.09) 27px 28px); background-position: 0 70px; border-top: 3px solid var(--sello); }
.ficha::before { content: ""; position: absolute; right: 26px; top: -18px; width: 22px; height: 54px; border: 3px solid #9a9ca2; border-radius: 11px; border-bottom-color: transparent; transform: rotate(8deg); z-index: 2; }
.ficha .kicker { display: block; margin-bottom: 8px; color: var(--sello); }
.ficha h3 { font-family: var(--display); font-weight: 500; font-size: 30px; line-height: 1; margin: 0 0 10px; letter-spacing: -.02em; }
.ficha p { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: var(--carbon); }
.ficha .foto { float: right; width: 72px; height: 72px; object-fit: cover; margin: 0 0 8px 12px; filter: grayscale(1); border: 4px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transform: rotate(3deg); }
.ficha ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ficha li a { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: baseline; padding: 8px 0; text-decoration: none; color: var(--tinta); font-family: var(--serif); font-size: 15px; border-bottom: 1px dotted rgba(17,18,20,.3); }
.ficha li a b { font-family: var(--cond); font-weight: 800; font-size: 20px; color: var(--sello); }
.ficha li a:hover span { text-decoration: underline; text-decoration-color: var(--sello); }
.ficha small { display: block; margin-top: 14px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--lapiz); }

/* Libro de sentencias */
.libro { padding: 110px 0 120px; }
.libro__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.libro__chips button { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; padding: 9px 12px 8px; border: 2px solid var(--tinta); color: var(--tinta); background: transparent; border-radius: 3px; transition: transform .2s, background .2s, color .2s; }
.libro__chips button b { font-weight: 500; margin-left: 8px; color: var(--sello); }
.libro__chips button:nth-child(odd) { transform: rotate(-1.2deg); } .libro__chips button:nth-child(even) { transform: rotate(1deg); }
.libro__chips button:hover { transform: rotate(0); }
.libro__chips button.is-on { background: var(--tinta); color: var(--papel); border-color: var(--tinta); } .libro__chips button.is-on b { color: var(--resaltador); }
.libro__list { list-style: none; margin: 0; padding: 0; background: var(--papel); box-shadow: var(--sombra); counter-reset: s; }
.libro__list li { counter-increment: s; display: grid; grid-template-columns: 60px 80px 1fr 200px; gap: 20px; align-items: center; padding: 18px 26px; border-bottom: 1px solid rgba(17,18,20,.12); position: relative; }
.libro__list li::before { content: counter(s, decimal-leading-zero); font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--lapiz); }
.libro__list li.is-hidden { display: none; }
.libro__anio { font-family: var(--cond); font-weight: 900; font-size: 30px; color: var(--tinta); }
.libro__list h3 { font-family: var(--serif); font-weight: 600; font-size: 19px; margin: 0 0 3px; line-height: 1.15; } .libro__list h3 a { text-decoration: none; color: inherit; } .libro__list h3 a:hover { text-decoration: underline; text-decoration-color: var(--sello); }
.libro__list p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--carbon); max-width: 78ch; }
.libro__tag { justify-self: end; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; padding: 7px 10px 6px; border: 2px solid var(--sello); color: var(--sello); border-radius: 3px; transform: rotate(-4deg); text-align: center; line-height: 1.3; max-width: 200px; }
li[data-c="condena"] .libro__tag, li[data-c="detenido"] .libro__tag { border-color: #2f7a4d; color: #2f7a4d; }
li[data-c="absolucion"] .libro__tag, li[data-c="sin-proceso"] .libro__tag, li[data-c="sin-sancion"] .libro__tag { border-color: var(--lapiz); color: var(--lapiz); }
li[data-c="sin-sentencia"] .libro__tag, li[data-c="juicio-pendiente"] .libro__tag, li[data-c="en-curso"] .libro__tag { border-color: #9a6a12; color: #9a6a12; }
@media (max-width: 760px) { .libro__list li { grid-template-columns: 1fr; gap: 6px; padding: 16px 18px; } .libro__list li::before { display: none; } .libro__tag { justify-self: start; transform: none; } }

/* Cronología: hilo rojo vertical */
.crono { padding: 110px 0 120px; background: var(--mesa-2); border-top: 1px solid rgba(17,18,20,.1); }
.linea__wrap { position: relative; padding-left: 40px; max-width: 900px; }
.linea__svg { position: absolute; left: 12px; top: 0; width: 4px; height: 100%; overflow: visible; }
.linea__path { stroke: var(--sello); stroke-width: 2; fill: none; }
.linea__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; }
.linea__list li { display: grid; grid-template-columns: 110px 1fr; gap: 24px; position: relative; }
.linea__list li::before { content: ""; position: absolute; left: -33px; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--sello); box-shadow: 0 0 0 4px var(--mesa-2); }
.linea__anio { font-family: var(--cond); font-weight: 900; font-size: 40px; line-height: 1; color: var(--tinta); }
.linea__list h3 { font-family: var(--display); font-weight: 500; font-size: 24px; line-height: 1.05; margin: 0 0 6px; letter-spacing: -.015em; } .linea__list h3 a { text-decoration: none; color: inherit; } .linea__list h3 a:hover { color: var(--sello); }
.linea__list p { margin: 0 0 6px; font-size: 14.5px; line-height: 1.5; color: var(--carbon); max-width: 62ch; }
.linea__list small { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--lapiz); }
@media (max-width: 640px) { .linea__list li { grid-template-columns: 1fr; gap: 4px; } }

/* Método: ficha mecanografiada */
.metodo { padding: 110px 0 120px; }
.metodo__grid { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .metodo__grid { grid-template-columns: 1fr 1fr; gap: 80px; } }
.ficha--metodo { transform: rotate(.8deg); background-position: 0 30px; }
.ficha--metodo ol { list-style: none; margin: 0; padding: 0; counter-reset: m; display: grid; gap: 14px; }
.ficha--metodo li { counter-increment: m; font-family: 'Special Elite', 'Courier Prime', monospace; font-size: 15px; line-height: 1.6; padding-left: 36px; position: relative; color: var(--tinta); }
.ficha--metodo li::before { content: counter(m) "."; position: absolute; left: 0; top: 0; color: var(--sello); }
.ficha--metodo li b { font-weight: 400; background: linear-gradient(transparent 55%, var(--resaltador) 55%, var(--resaltador) 92%, transparent 92%); }

/* Pie */
.footer--mesa { background: var(--tinta); color: var(--paper); padding: 70px 0 30px; }
.footer--mesa h4 { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--humo-3); margin: 0 0 14px; }
.footer__grid { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .footer__grid { grid-template-columns: 1.2fr 1fr .8fr; gap: 60px; } }
.footer--mesa ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-family: var(--sans); font-size: 13.5px; }
.footer--mesa a { color: var(--paper); text-decoration: none; } .footer--mesa a:hover { color: var(--ocre); }
.footer--mesa p { color: var(--humo-3); font-size: 15px; max-width: 40ch; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 50px; padding-top: 20px; border-top: 1px solid var(--line-dark); font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--humo-2); }

/* Ronda 3: sitio para el juego, autores en silueta, objetos sin fecha, accesibilidad */
.cabecera__juego { position: absolute; left: 0; right: 0; top: 60px; height: min(52vh, 520px); z-index: 2; }
.cabecera__juego[data-estado="pendiente"] { pointer-events: none; }
.cabecera__in { z-index: 3; }
.cabecera { padding-top: 40vh; }
.mesa__head--autores { position: relative; align-items: start; }
.autores { position: relative; height: 320px; display: flex; align-items: flex-end; justify-content: flex-end; gap: 0; }
.autores__img { height: 100%; width: auto; object-fit: contain; filter: grayscale(1) contrast(1.1) drop-shadow(0 18px 30px rgba(20,18,14,.35)); }
.autores__img--a { transform: translateX(14%); z-index: 1; }
.autores__img--m { height: 92%; }
@media (max-width: 900px) { .mesa__head--autores { grid-template-columns: 1fr; } .autores { height: 220px; justify-content: center; } }
.obj__sub { font-family: var(--serif); font-style: italic; font-size: 15.5px; line-height: 1.3; margin: 0 0 6px !important; opacity: .95 !important; }
.obj__abrir { display: inline-block; margin-top: 10px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--oacc, var(--sello)); border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
.obj:focus-visible { outline: 3px solid var(--resaltador); outline-offset: 6px; box-shadow: 0 0 0 5px var(--tinta); }
.obj--recibo .obj__sub, .obj--recibo .obj__abrir { font-family: 'Courier Prime', monospace; }
@media (max-width: 480px) { .mesa__grid { grid-template-columns: 1fr; gap: 34px; } .obj, .obj--recibo, .obj--chat, .obj--energia, .obj--libro { grid-column: span 1 !important; } .mesa__grid { grid-auto-flow: row; } }
.home::before { opacity: .09; }
.hilo__buscar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: -30px 0 26px; }
.hilo__buscar select { font-family: var(--serif); font-size: 16px; padding: 8px 12px; border: 2px solid var(--tinta); background: var(--papel); color: var(--tinta); border-radius: 3px; min-width: 260px; }
.red .nodo:focus-visible .ring { stroke: var(--resaltador); stroke-width: 4; }
.red .nodo:focus { outline: none; }
.libro__status { margin: -18px 0 18px; min-height: 1.2em; }
.libro__list li::before { content: attr(data-n); }
@media (prefers-reduced-motion: reduce) { .home *, .home *::before, .home *::after { animation: none !important; transition: none !important; } .obj.reveal { opacity: 1; transform: rotate(var(--r, 0deg)); } .print { transform: rotate(var(--r)); } }
/* cabecera de la mesa con los autores */
@media (min-width: 900px) { .mesa__head--autores { grid-template-columns: minmax(0, 1fr) 340px; align-items: end; } }
.mesa__head--autores h2 { max-width: 14ch; }
.mesa__head--autores p { margin-top: 18px !important; max-width: 60ch; }
.autores { height: 330px; width: 340px; max-width: 100%; justify-content: center; align-items: flex-end; margin-left: auto; }
.autores__img { max-width: 62%; height: auto; max-height: 100%; }
.autores__img--a { transform: translateX(10%); }
.autores__img--m { max-height: 90%; }
.cabecera { padding-top: 34vh; }
.libro__tag { font-size: 9.5px; letter-spacing: .14em; max-width: 210px; transform: rotate(-3deg); }
.mesa, .hilo, .libro { overflow-x: clip; }
@media (max-width: 900px) { .autores { width: 100%; height: 240px; overflow: hidden; } .autores__img { max-width: 48%; } }

/* Portada jugable v5 como primera pantalla; la cabecera de archivo queda condensada debajo */
.portada-jugable { position: relative; margin-top: 60px; }
.home .bmhero { z-index: 1 !important; }
.home .topbar { z-index: 200; }
.cabecera--compacta { min-height: 0; padding: 64px 0 40px; }
.cabecera--compacta .masthead { font-size: clamp(56px, 9.6vw, 168px); margin-bottom: 22px; }
.cabecera--compacta .cabecera__prints { display: none; }
.cabecera--compacta .cabecera__deck { max-width: 62ch; }
.home .bmhero { height: min(calc(100svh - 60px), 900px) !important; }
@media (max-width: 650px) { .home .bmhero { height: min(calc(88svh - 60px), 620px) !important; } }

/* Primera pantalla: juego + banda de título en un solo alto de ventana */
.home .bmhero { height: clamp(420px, calc(100svh - 60px - 196px), 820px) !important; background: radial-gradient(ellipse at 77% 17%, #fff3d5 0, transparent 43%), linear-gradient(180deg, var(--mesa) 0%, #dfd9c7 30%, #e9d8b3 66%, #c7b794 100%) !important; }
.home .bmhero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(180deg, transparent, rgba(216,213,205,.55)); pointer-events: none; z-index: 2; }
@media (max-width: 650px) { .home .bmhero { height: clamp(380px, calc(100svh - 60px - 170px), 620px) !important; } }
.bmhero__fondo { position: absolute; inset: 0 0 38% 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bmhero__fondo span { position: absolute; left: calc((var(--i) * 37%) - 6%); top: calc(4% + (var(--i) * 13%)); white-space: nowrap; font-family: var(--cond); font-weight: 900; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(28px, 4.6vw, 76px); line-height: 1; color: rgba(17,18,20,.075); animation: fondo-deriva 60s linear infinite; animation-delay: calc(var(--i) * -7s); }
.bmhero__fondo span:nth-child(n+7) { display: none; }
@keyframes fondo-deriva { from { transform: translateX(0); } to { transform: translateX(-22vw); } }
.bmhero__fondo span:nth-child(3n) { animation-direction: reverse; }
.banda { border-block: 2px solid var(--tinta); background: var(--mesa); }
.banda__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) max-content; gap: 18px 40px; align-items: center; padding: 22px 0 20px; min-height: 150px; }
.masthead--banda { font-size: clamp(44px, 6.4vw, 108px); margin: 6px 0 0 -.02em; line-height: .86; }
.banda__titulo .mono { display: block; margin-bottom: 4px; }
.banda__deck { margin: 0; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.42; max-width: 48ch; }
.banda__cue { align-self: end; }
@media (max-width: 900px) { .banda__in { grid-template-columns: 1fr; gap: 10px; padding: 16px 0 14px; min-height: 0; } .masthead--banda { font-size: clamp(40px, 11vw, 72px); } .banda__deck { font-size: 14.5px; } .banda__cue { display: none; } }
.mesa__head h2 { max-width: 20ch; }
@media (max-width: 650px) { .home .bmhero { height: clamp(360px, calc(100svh - 60px - 236px), 560px) !important; } .bmhero__fondo span { font-size: 24px; } .banda__in { padding: 12px 0 12px; } .masthead--banda { font-size: clamp(36px, 10vw, 60px); } .banda__deck { font-size: 13.5px; line-height: 1.38; } }
.portada-jugable { margin-top: 0; }
/* Título integrado en la escena del juego */
.home .bmhero { height: min(calc(100svh - 60px), 900px) !important; }
@media (max-width: 650px) { .home .bmhero { height: clamp(480px, calc(100svh - 180px), 640px) !important; } }
.bmhero__titulo { position: absolute; left: max(28px, 4vw); top: 18px; z-index: 3; pointer-events: none; max-width: min(46vw, 620px); }
.bmhero__titulo .mono { display: block; margin-bottom: 6px; }
.masthead--juego { font-size: clamp(46px, 7.6vw, 128px); margin: 0 0 12px -.02em; line-height: .86; text-shadow: 0 1px 0 rgba(255,250,235,.5); }
.bmhero__deck { margin: 0 0 14px; font-size: clamp(14px, 1.15vw, 18px); line-height: 1.42; max-width: 44ch; color: var(--tinta); text-shadow: 0 1px 0 rgba(255,250,235,.6); }
.bmhero__titulo .cabecera__cue { pointer-events: auto; }
.bmhero__fondo { inset: 0 0 40% 44%; }
.bmhero__fondo span { left: calc((var(--i) * 30%) - 4%); top: calc(2% + (var(--i) * 15%)); font-size: clamp(24px, 3.6vw, 60px); color: rgba(17,18,20,.06); }
@media (max-width: 650px) {
  /* INVESTIGACIONES es una palabra que no parte: el tamaño se calcula para que quepa
     en la pantalla, si no la tarjeta se ensancha y el texto se corta por la derecha. */
  .bmhero__titulo { left: 14px; top: 54px; max-width: calc(100vw - 28px); }
  .masthead--juego { font-size: clamp(24px, 8.4vw, 46px); margin-bottom: 8px; }
  .bmhero__deck { font-size: 13px; max-width: 100%; margin-bottom: 8px; }
  .bmhero__titulo .cabecera__cue { display: none; }
  .bmhero__fondo { inset: 30% 0 45% 0; } .bmhero__fondo span { font-size: 22px; }
}

/* Sin nombres en el cielo; el cielo cambia por nivel; botón de poder */
.bmhero__fondo { display: none; }
.home .bmhero.is-nivel-2 { background: radial-gradient(ellipse at 70% 20%, #ffd9a8 0, transparent 46%), linear-gradient(180deg, var(--mesa) 0%, #e2c9b0 30%, #e6b98f 66%, #b99b7a 100%) !important; }
.home .bmhero.is-nivel-3 { background: radial-gradient(ellipse at 30% 15%, #f4efe0 0, transparent 30%), linear-gradient(180deg, #bfc3c4 0%, #a9b3b8 34%, #b7b39f 68%, #8f8a76 100%) !important; }
.bmhero__launch.is-power { background: #1b1a17; animation: poder .8s ease-in-out infinite alternate; }
@keyframes poder { from { transform: scale(1); } to { transform: scale(1.12); } }
.bmhero__titulo { top: 22px; }
.footer__premios { font-family: "IBM Plex Mono", monospace !important; font-size: 10.5px !important; letter-spacing: .1em; text-transform: uppercase; color: var(--ocre) !important; margin-top: 14px; }
@media (max-width: 650px) { .bmhero__titulo { top: 76px; max-width: 82%; } .masthead--juego { font-size: clamp(34px, 10.5vw, 56px); } .bmhero__deck { font-size: 12.5px; max-width: 32ch; } }
/* Cielo con más profundidad y colores de la marca; el título con un halo de papel para no chocar con la escena */
.home .bmhero { background:
  radial-gradient(ellipse at 22% 18%, rgba(248,245,238,.95) 0, rgba(248,245,238,.55) 22%, transparent 46%),
  radial-gradient(ellipse at 78% 10%, rgba(255,232,196,.9) 0, transparent 40%),
  linear-gradient(180deg, #dcd7cb 0%, #e9dcc0 28%, #f0d9b2 52%, #d8c39b 72%, #b9a37f 100%) !important; }
.home .bmhero.is-nivel-2 { background:
  radial-gradient(ellipse at 22% 18%, rgba(250,240,228,.95) 0, rgba(250,240,228,.5) 22%, transparent 46%),
  radial-gradient(ellipse at 74% 16%, #ffc98f 0, rgba(255,201,143,.5) 22%, transparent 48%),
  linear-gradient(180deg, #d9c9bd 0%, #e8b98e 34%, #d98f6a 60%, #a86f57 100%) !important; }
.home .bmhero.is-nivel-3 { background:
  radial-gradient(ellipse at 22% 18%, rgba(226,228,232,.95) 0, rgba(226,228,232,.5) 22%, transparent 46%),
  radial-gradient(ellipse at 70% 12%, #f7f0d8 0, transparent 26%),
  linear-gradient(180deg, #9aa4ad 0%, #7f8b98 36%, #6e7a86 62%, #4f5864 100%) !important; }
.bmhero__titulo::before { content: ""; position: absolute; inset: -30px -60px -30px -40px; z-index: -1; background: radial-gradient(ellipse at 30% 40%, rgba(248,245,238,.85) 0, rgba(248,245,238,.55) 45%, transparent 75%); filter: blur(6px); pointer-events: none; }
.masthead--juego { color: #1b1a17; text-shadow: 0 2px 0 rgba(255,250,235,.9), 0 0 18px rgba(255,250,235,.8); }
.bmhero__deck { text-shadow: 0 1px 0 rgba(255,250,235,.95), 0 0 12px rgba(255,250,235,.9); }
.home .bmhero::after { height: 70px; background: linear-gradient(180deg, transparent, rgba(216,213,205,.85)); }

/* La mesa como tablero de corcho: cada expediente clavado con una chincheta, unidos por hilo rojo */
.mesa { background: #b98d63; background-image: radial-gradient(rgba(60,35,15,.16) 1px, transparent 1.6px), radial-gradient(rgba(255,230,190,.16) 1px, transparent 1.6px), linear-gradient(180deg, #c29a6e, #ad8258); background-size: 7px 7px, 11px 11px, 100% 100%; background-position: 0 0, 3px 4px, 0 0; box-shadow: inset 0 0 0 14px #5b3f2a, inset 0 0 0 16px #8c6a4b; }
.mesa .mono, .mesa__head p { color: #f4e6d2; } .mesa__head h2 { color: #fbf3e6; } .mesa__head h2 em { color: #ffd2c4; }
.mesa__corcho { position: relative; }
.mesa__hilos { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: visible; }
.mesa__hilos path { fill: none; stroke: #b3121c; stroke-width: 1.6; opacity: .75; stroke-linecap: round; filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); }
.mesa__grid { align-items: start; }
.obj { box-shadow: 0 2px 2px rgba(40,20,5,.25), 0 18px 30px -14px rgba(40,20,5,.7); }
.obj::before { content: ""; position: absolute; left: 50%; top: 10px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff7a7a, #b3121c 55%, #6d0a12); box-shadow: 0 5px 6px -2px rgba(0,0,0,.55); z-index: 4; }
.obj--organigrama::before { display: none; }
.obj.reveal { transform: translateY(20px) rotate(var(--r, 0deg)); }
.obj:hover { transform: rotate(var(--r, 0deg)) translateY(-4px) !important; }
.mesa__leyenda { margin: 26px 0 0; color: #f4e6d2 !important; }
@media (max-width: 480px) { .mesa__hilos { display: none; } .mesa { box-shadow: inset 0 0 0 8px #5b3f2a; } }

/* Mesa fotografiada: tablero real de fondo, notas adhesivas con la consecuencia, cinta en las esquinas */
.mesa { background: #6b5137 url("../img/mesa-corcho.jpg") center / cover no-repeat; box-shadow: inset 0 0 120px rgba(0,0,0,.35); background-image: url("../img/mesa-corcho.jpg"); }
.mesa .mono, .mesa__head p { color: #fbf2e4; text-shadow: 0 1px 3px rgba(30,20,10,.75), 0 0 18px rgba(30,20,10,.45); } .mesa__head h2 { color: #fbf3e6; text-shadow: 0 2px 6px rgba(0,0,0,.35); } .mesa__head h2 em { color: #ffd9c9; }
.mesa__hilos { display: none; }
.obj { overflow: visible; }
.obj .obj__img, .obj__cuerpo { position: relative; }
.obj::after { content: ""; position: absolute; left: -14px; top: 22px; width: 70px; height: 22px; background: rgba(236,229,205,.72); transform: rotate(-38deg); box-shadow: 0 1px 2px rgba(0,0,0,.15); pointer-events: none; }
.postit { position: absolute; right: -14px; top: -18px; z-index: 5; max-width: 190px; padding: 12px 14px 14px; background: #f7e36b; color: #2b2410; font-family: 'Caveat', 'Segoe Print', cursive; font-size: 19px; line-height: 1.1; font-weight: 700; box-shadow: 0 6px 12px -4px rgba(0,0,0,.45); transform: rotate(var(--pr, -4deg)); pointer-events: none; }
.postit::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px; background: rgba(0,0,0,.05); }
.postit--condena, .postit--detenido { background: #b6e3a6; }
.postit--censura, .postit--juicio-politico { background: #f7c8a6; }
.postit--cambio-ley, .postit--revelacion { background: #bfe0f5; }
.postit--juicio, .postit--investigacion-fiscal, .postit--proceso-extinguido { background: #f7e36b; }
.postit--cobertura, .postit-- { background: #efe7d6; }
.obj--pronto .postit { display: none; }
@media (max-width: 480px) { .postit { position: static; display: inline-block; margin: 0 16px 16px; max-width: none; transform: rotate(-2deg); } .obj::after { display: none; } }

.mesa { background-position: center 70%; position: relative; }
.mesa::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 380px; background: linear-gradient(180deg, rgba(35,22,10,.62), rgba(35,22,10,0)); pointer-events: none; }
.mesa > .wrap { position: relative; }

/* Recuerditos: un sticker alusivo pegado en la esquina de cada expediente */
.recuerdo { position: absolute; left: -22px; bottom: -18px; width: 96px; height: 96px; object-fit: contain; z-index: 6; transform: rotate(var(--rr, -6deg)); filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); pointer-events: none; }
@media (max-width: 480px) { .recuerdo { width: 70px; height: 70px; left: auto; right: 10px; bottom: 60px; } }
.recuerdo { left: auto; right: -20px; bottom: -22px; }
@media (max-width: 480px) { .recuerdo { right: 8px; bottom: 56px; } }

/* Intro: la foto real se encoge hasta convertirse en las figuras del juego */
.intro { position: fixed; inset: 0; z-index: 3000; background: #1b1a17; overflow: hidden; cursor: pointer; }
.intro__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transform: scale(1.06); }
.intro__fig { position: absolute; left: 50%; top: 50%; height: 62vh; width: auto; transform: translate(-50%, -50%); opacity: 0; filter: drop-shadow(0 20px 40px rgba(0,0,0,.45)); will-change: transform, opacity; }
.intro__fig--m { margin-left: 10vw; } .intro__fig--a { margin-left: -10vw; height: 66vh; }
.intro__marca { position: absolute; left: 50%; bottom: 8vh; transform: translateX(-50%); font-family: var(--display); font-size: clamp(28px, 4vw, 56px); color: #f5f0e8; letter-spacing: -.02em; opacity: 0; text-shadow: 0 2px 20px rgba(0,0,0,.5); white-space: nowrap; }
.intro__marca em { color: #ff5a5a; font-style: italic; }
.intro.is-done { display: none; }
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }

/* postit-safe: en los objetos sin imagen la nota amarilla caía sobre el título */
.obj--libro .obj__cuerpo, .obj--energia .obj__cuerpo, .obj--lista .obj__cuerpo, .obj--diario .obj__cuerpo, .obj--extracto .obj__cuerpo, .obj--recibo .obj__cuerpo, .obj--informe .obj__cuerpo { padding-top: 84px; }
.obj--energia .obj__cuerpo { padding-top: 96px; }
.obj--libro .obj__cuerpo { padding-top: 88px; }
.obj .postit { max-width: 170px; }
/* figuras recortadas junto al titular de la mesa */
.mesa__head { position: relative; }
.mesa__figs { display: flex; align-items: flex-end; justify-content: flex-end; gap: 0; margin-top: -30px; }
.mesa__figs img { height: clamp(150px, 20vw, 260px); width: auto; filter: drop-shadow(0 18px 22px rgba(20,18,14,.45)); }
.mesa__figs img + img { margin-left: -28px; }
@media (min-width: 900px) { .mesa__head { grid-template-columns: 1fr 34ch; } .mesa__figs { margin-top: 0; } }
@media (max-width: 480px) { .mesa__figs img { height: 120px; } }

/* titulos-impacto: títulos de los objetos en mayúsculas, negrita y grandes */
.obj h3 { text-transform: uppercase; font-weight: 800; font-size: clamp(24px, 2.2vw, 36px); line-height: .98; letter-spacing: -.01em; }
.obj--organigrama h3, .obj--puerto h3, .obj--energia h3 { font-size: clamp(30px, 2.8vw, 46px); }
.obj--recibo h3 { font-size: 24px; }
.libro__item h3, .libro li h3 { text-transform: uppercase; font-weight: 800; }

/* Quiénes somos */
.quienes { padding: 110px 0 120px; background: var(--mesa); border-top: 1px solid rgba(17,18,20,.1); overflow-x: clip; }
.quienes__head { max-width: 720px; margin-bottom: 56px; }
.quienes__head .mono { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--rojo); }
.quienes__head h2 { font-family: 'Barlow Condensed', 'Impact', sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(40px, 5vw, 72px); line-height: .95; margin: 10px 0 14px; }
.quienes__head h2 em { font-style: italic; color: var(--rojo); }
.quienes__head p { font-family: 'Source Serif 4', Georgia, serif; font-size: 18px; line-height: 1.5; color: var(--humo-1, #3a3a3a); margin: 0; }
.quienes__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 64px; align-items: start; }
.bio { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: 28px; align-items: end; background: var(--paper); padding: 34px 34px 30px; box-shadow: 0 18px 40px -22px rgba(0,0,0,.45), 0 1px 0 rgba(0,0,0,.08); position: relative; transform: rotate(-.4deg); }
.bio--moni { transform: rotate(.5deg); }
.bio::before { content: ''; position: absolute; top: -12px; left: 50%; width: 92px; height: 24px; margin-left: -46px; background: rgba(255,240,150,.7); transform: rotate(-2deg); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.bio__fig { width: 100%; height: auto; max-height: 300px; object-fit: contain; object-position: bottom; filter: drop-shadow(0 14px 18px rgba(0,0,0,.35)); }
.bio__kicker { display: block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--rojo); margin-bottom: 8px; }
.bio__txt h3 { font-family: 'Barlow Condensed', 'Impact', sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(26px, 2.4vw, 38px); line-height: .95; margin: 0 0 14px; }
.bio__txt h3 em { font-style: italic; color: var(--rojo); }
.bio__txt p { font-family: 'Source Serif 4', Georgia, serif; font-size: 15.5px; line-height: 1.55; margin: 0 0 10px; }
.bio__premios { list-style: none; margin: 16px 0 0; padding: 12px 0 0; border-top: 1px dashed rgba(17,18,20,.3); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--humo-1, #3a3a3a); }
.bio__premios li { padding: 3px 0 3px 14px; position: relative; }
.bio__premios li::before { content: ''; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; background: var(--rojo); border-radius: 50%; }
@media (max-width: 980px) { .quienes__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .bio { grid-template-columns: 1fr; padding: 26px 22px; } .bio__fig { max-height: 220px; justify-self: center; width: auto; } }
.obj--lista .obj__cuerpo { padding-top: 108px; }

/* El post-it se pega sobre el borde superior del objeto y nunca sobre el titular */
.obj .postit { top: -34px; right: -10px; max-width: 168px; font-size: 17.5px; }
.obj--recorrido .obj__cuerpo, .obj--escucha .obj__cuerpo, .obj--bitacora .obj__cuerpo, .obj--reservado .obj__cuerpo { padding-top: 118px; }
.obj--operativo .obj__cuerpo { padding-top: 138px; }
@media (max-width: 480px) { .obj .postit { top: auto; right: auto; } }

/* Llamado a la acción junto a las figuras */
.mesa__nos { display: flex; align-items: flex-end; gap: clamp(10px, 2vw, 26px); }
.cta { position: relative; display: grid; gap: 1px; padding: 18px 22px 16px; text-decoration: none; align-self: center;
  background: var(--rojo, #A8121F); color: #FFF3E4; border-radius: 2px; transform: rotate(-1.6deg);
  box-shadow: 0 14px 30px -16px rgba(120,10,20,.8), inset 0 0 0 2px rgba(255,243,228,.35);
  transition: transform .18s ease, box-shadow .18s ease; }
.cta:hover { transform: rotate(-1.6deg) translateY(-3px) scale(1.02); box-shadow: 0 20px 38px -16px rgba(120,10,20,.85), inset 0 0 0 2px rgba(255,243,228,.5); }
.cta::after { content: ""; position: absolute; inset: 6px; border: 1px dashed rgba(255,243,228,.35); pointer-events: none; }
.cta span { display: block; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 800; text-transform: uppercase; line-height: .92; letter-spacing: -.01em; }
.cta__l1 { font-size: clamp(17px, 1.6vw, 24px); opacity: .9; }
.cta__l2 { font-size: clamp(26px, 2.8vw, 42px); }
.cta__l3 { font-size: clamp(26px, 2.8vw, 42px); }
.cta__pie { margin-top: 8px; font-family: 'IBM Plex Mono', monospace !important; font-weight: 400 !important; font-size: 10.5px !important; letter-spacing: .14em; text-transform: uppercase; opacity: .82; }
@media (max-width: 860px) { .mesa__nos { flex-direction: column; align-items: flex-start; gap: 14px; } .cta { align-self: stretch; } }

/* Sección: quiero que investiguen algo */
.tips { padding: 90px 0 100px; background: var(--tinta); color: var(--paper); }
.tips__head { max-width: 760px; margin-bottom: 44px; }
.tips__head .mono { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--rojo-claro, #E9635F); }
.tips__head h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(38px, 5vw, 70px); line-height: .95; margin: 10px 0 16px; }
.tips__head h2 em { font-style: italic; color: #E9635F; }
.tips__head p { font-family: 'Source Serif 4', Georgia, serif; font-size: 18px; line-height: 1.55; color: #D8D4CC; margin: 0; }
.tips__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; margin-bottom: 40px; }
.tips__c { border-top: 2px solid #E9635F; padding-top: 16px; }
.tips__n { display: block; font-size: 11px; letter-spacing: .18em; color: #E9635F; margin-bottom: 8px; }
.tips__c h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 24px; line-height: 1; margin: 0 0 10px; }
.tips__c p { font-family: 'Source Serif 4', Georgia, serif; font-size: 15.5px; line-height: 1.6; color: #C9C5BD; margin: 0; }
.tips__acc { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding-top: 26px; border-top: 1px solid rgba(245,240,232,.16); }
.tips__btn { display: inline-block; padding: 14px 26px; background: #E9635F; color: #1A0E0E; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border-radius: 2px; transition: transform .15s, background .15s; }
.tips__btn:hover { background: #FFF3E4; transform: translateY(-2px); }
.tips__nota { flex: 1; min-width: 260px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #9A958C; margin: 0; }

/* Las figuras no deben colapsar dentro del bloque flexible, y la bajada tiene que leerse sobre el corcho */
.mesa__figs { flex: none; }
.mesa__figs img { width: auto; height: clamp(150px, 20vw, 260px); flex: none; }
.mesa__head p { color: #F0EBE1; text-shadow: 0 1px 3px rgba(0,0,0,.55); }
.mesa__head .mono { color: #F0D9A8; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.mesa__head h2 { text-shadow: 0 2px 10px rgba(0,0,0,.45); }
.mesa__leyenda { color: #EFE9DE; text-shadow: 0 1px 3px rgba(0,0,0,.5); }

/* El botón va debajo de las figuras, alineado a la derecha, y nunca se sale del corcho */
.mesa__nos { flex-direction: column; align-items: flex-end; gap: 12px; }
.mesa__figs { align-self: flex-end; }
.cta { align-self: flex-end; transform: rotate(-1.6deg) translateX(-6px); }
@media (max-width: 860px) { .mesa__nos { align-items: stretch; } .cta { align-self: stretch; transform: rotate(-1deg); } }

/* El llamado tiene que pesar: es la puerta de entrada de las filtraciones */
.cta { padding: 22px 30px 20px; min-width: 340px; }
.cta__l1 { font-size: clamp(20px, 1.9vw, 28px); }
.cta__l2, .cta__l3 { font-size: clamp(34px, 3.6vw, 54px); }
.cta__pie { font-size: 11px !important; }
@media (max-width: 860px) { .cta { min-width: 0; } }

/* La imagen responsiva no debe romper el orden ni el diseño de cada objeto */
.obj picture { display: contents; }
/* La banda roja de Progen iba encima del enlace */
.obj--evidencia .obj__abrir { padding-bottom: 30px; display: block; }
.obj--evidencia .obj__abrir::before { bottom: -2px; right: -30px; padding: 5px 40px; }

/* En teléfono los objetos van derechos y dentro del margen: nada de texto cortado */
@media (max-width: 700px) {
  .mesa__grid { grid-template-columns: 1fr; gap: 34px; }
  .obj, .obj--recibo, .obj--chat, .obj--energia, .obj--libro { grid-column: span 1 !important; }
  .obj { transform: none !important; max-width: 100%; }
  .obj:hover { transform: translateY(-3px) !important; }
  .mesa__head { grid-template-columns: 1fr; }
  .mesa__head p, .mesa__head h2 { max-width: 100%; }
  .recuerdo { right: 6px; }
}
@media (max-width: 480px) { .postit { transform: rotate(-2deg) !important; } }

/* Las figuras van recortadas, sin caja, y el texto las rodea */
.mesa__head { display: block; }
.mesa__nos { float: right; width: clamp(230px, 30vw, 380px); margin: 0 0 10px 26px; display: flex; flex-direction: column; align-items: center; gap: 12px;
  shape-outside: polygon(6% 0, 100% 0, 100% 100%, 0 100%, 0 62%); shape-margin: 10px; }
.mesa__figs { filter: drop-shadow(0 16px 22px rgba(40,20,5,.45)); }
.mesa__figs img { height: clamp(150px, 17vw, 240px); }
.mesa__head::after { content: ""; display: block; clear: both; }
.mesa__head h2, .mesa__head p { max-width: none; }

/* Quiénes somos: silueta flotando y texto alrededor */
.quienes__grid { grid-template-columns: 1fr 1fr; gap: 54px 64px; }
.bio { display: block; padding: 34px 34px 30px; }
.bio::before { display: none; }
.bio__fig { float: right; width: clamp(120px, 13vw, 190px); height: auto; max-height: none; margin: 0 0 12px 20px;
  shape-outside: var(--silueta); shape-image-threshold: .5; shape-margin: 14px; filter: drop-shadow(0 12px 16px rgba(0,0,0,.32)); }
.bio--boscan .bio__fig { --silueta: url(../img/autores/boscan.png); }
.bio--moni .bio__fig { --silueta: url(../img/autores/moni.png); }
.bio__txt { display: contents; }
.bio__premios { clear: both; }
@media (max-width: 700px) { .bio__fig { float: none; display: block; margin: 0 auto 14px; width: 150px; } .mesa__nos { float: none; width: auto; margin: 18px 0 0; } }

/* La bajada rodea a las figuras y se lee */
.mesa__head p { font-size: clamp(16px, 1.15vw, 19px); line-height: 1.5; max-width: 62ch; }
.mesa__nos { shape-outside: none; margin-bottom: 0; }
.mesa__figs img { height: clamp(170px, 19vw, 270px); }
.mesa__head p { color: #F7F3EA; text-shadow: 0 1px 4px rgba(0,0,0,.75); }
/* El titular de cada biografía manda tanto como el de un caso */
.bio h3 { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(30px, 2.7vw, 44px); line-height: .95; letter-spacing: -.01em; margin: 4px 0 16px; }
.bio h3 em { font-style: italic; color: var(--rojo, #A8121F); }
.bio__kicker { font-size: 11px; letter-spacing: .2em; }
.bio p { font-size: 15.5px; line-height: 1.6; }

/* La bajada de "Sobre la mesa" iba pegada al titular: los descensos de la italica caian encima */
.mesa__head h2 { margin-bottom: 0; }
.mesa__head > div > p { margin-top: 20px; }
@media (min-width: 900px) { .mesa__head > div > p { margin-top: 22px; } }

/* ---- Titular del juego: recorte de periódico sobre la escena ------------- */
.bmhero__titulo { position: absolute; left: max(24px, 3.2vw); top: 24px; z-index: 3; max-width: min(52vw, 700px); pointer-events: none;
  filter: drop-shadow(0 18px 26px rgba(40,34,22,.30)) drop-shadow(0 2px 3px rgba(40,34,22,.22)); }
.bmhero__titulo::before { content: none; }
.recorte { position: relative; padding: 20px 34px 14px 30px; color: #1b1a17;
  background: linear-gradient(178deg, #f6f3ea 0%, #f1ede1 62%, #e9e3d3 100%);
  transform: rotate(-.35deg);
  clip-path: polygon(0 1.2%, 12% 0, 27% 1%, 44% .2%, 61% 1.1%, 78% .3%, 92% 1.2%, 99.2% 0,
    98.6% 12%, 99.4% 26%, 98.4% 41%, 99.5% 56%, 98.5% 70%, 99.4% 84%, 98.7% 97%,
    86% 99.4%, 71% 98.4%, 55% 99.5%, 38% 98.6%, 22% 99.6%, 8% 98.7%, .6% 100%,
    1.2% 86%, .3% 71%, 1.1% 55%, .2% 39%, 1% 24%, .4% 13%); }
.recorte::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background: radial-gradient(ellipse at 88% 6%, rgba(120,105,72,.22) 0, transparent 34%),
    radial-gradient(ellipse at 4% 96%, rgba(120,105,72,.18) 0, transparent 30%); }
.recorte__ruta { margin: 0 0 12px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: clamp(9.5px, .74vw, 11.5px); letter-spacing: .22em;
  text-transform: uppercase; color: #7d7565; }
.recorte__ruta i { font-style: normal; color: #b9b1a0; padding: 0 3px; }
.masthead--juego { font-size: clamp(44px, 7.2vw, 116px); margin: 0 0 0 -.045em; line-height: .8; letter-spacing: -.045em;
  color: #14130f; text-shadow: none; }
.recorte__cuerpo { margin-top: 14px; padding-top: 13px; border-top: 1px solid #cdc6b4; }
.bmhero__deck { margin: 0; font-size: clamp(12.5px, 1.02vw, 16px); line-height: 1.45; max-width: 38ch; color: #33302a; text-shadow: none;
  font-family: var(--serif); }
.bmhero__deck b { font-weight: 700; }
.bmhero__deck mark { background: #f4e26b; color: inherit; padding: 0 .12em; }
@media (max-width: 900px) { .bmhero__titulo { max-width: 66vw; } .recorte { padding: 16px 24px 14px 22px; } }
@media (max-width: 650px) { .bmhero__titulo { left: 14px; top: 66px; max-width: calc(100% - 28px); }
  .masthead--juego { font-size: clamp(34px, 11vw, 58px); } .bmhero__deck { font-size: 12px; max-width: 100%; } }

/* ---- Orden del corcho: cabecera de sección y número de expediente -------- */
.corcho__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  margin: 0 0 40px; padding: 16px 24px 18px; background: rgba(18,12,5,.46); border: 1px solid rgba(247,238,214,.24);
  border-left: 5px solid #C8102E; backdrop-filter: blur(1px); }
.corcho__kicker { display: block; font-family: var(--cond); font-weight: 900; text-transform: uppercase;
  font-size: clamp(22px, 2.4vw, 34px); letter-spacing: -.01em; line-height: 1; color: #F7EED6;
  text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.corcho__deck { margin: 8px 0 0; font-family: var(--serif); font-size: 15px; line-height: 1.45; max-width: 56ch;
  color: rgba(247,238,214,.86); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.corcho__conteo { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: #F2E7CE; white-space: nowrap; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.corcho__conteo i { font-style: normal; opacity: .5; }
.obj__cierre { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 10px;
  padding-top: 9px; border-top: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 22%, transparent); }
.obj__exp { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500; font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; opacity: .62; font-variant-numeric: tabular-nums; }
.obj__cierre .obj__abrir { margin-top: 0; }
@media (max-width: 640px) { .corcho__head { padding: 14px 16px 16px; margin-bottom: 30px; }
  .corcho__conteo { font-size: 9.5px; } }

/* ---- Sección "Investiguemos algo": estaba en negro sobre negro ----------- */
.tips__head h2 { color: #F5F0E8; }
.tips__head h2 em { color: #FF7A72; }
.tips__nota { color: #A9A49A; }
.tips__acc { align-items: center; }
.tips__btn { color: #17110F; }

/* ---- Cabecera jugable en teléfono: la tarjeta cede espacio a la escena ---- */
@media (max-width: 650px) {
  .bmhero__titulo .recorte { padding: 14px 16px 10px; }
  .bmhero__titulo .recorte__ruta { font-size: 9.5px; letter-spacing: .16em; margin: 0 0 4px; }
  .bmhero__deck { font-size: 12.5px; line-height: 1.36; margin: 0; }
  .bmhero__titulo { top: 46px; }
}
@media (max-width: 650px) and (max-height: 740px) {
  /* en pantallas cortas el texto se reduce a la primera frase */
  .bmhero__deck b, .bmhero__deck { font-size: 12px; }
}

/* Teléfono: los enlaces del pie y de las tarjetas, con alto de dedo. */
@media (max-width: 650px) {
  .pie a, .obj__abrir, .hilo__lista a, .libro__lista a { display: inline-block; padding-block: 8px; }
}