/* =====================================================================
   EL MÓVIL DEL CRIMEN · PORTADA, versión Archivo
   Mesa oscura, carpetas de cartulina con solapas (una por juego), hoja del
   caso del día escrita a máquina, rellenada a boli, ficha de instrucciones
   y libro de registro con el resto de casos.
   ===================================================================== */
:root{
  --mesa:#2e2823; --papel:#f1ead9; --papel2:#e7dec8; --tinta:#1f1c18; --gris:#6d6458;
  --sello:#b0281f; --boli:#1f3f94; --kraft:#c8a26a; --kraft2:#b48d55;
  --f-crimen:#c8a26a; --f-paranormal:#9ba48a; --f-viaje:#93a8b8; --f-sospechoso:#c9a09c;
}
*{box-sizing:border-box;margin:0;padding:0}
a{color:inherit}
html{background:var(--mesa)}
body{background:var(--mesa);color:var(--tinta);font:15px/1.45 "Courier Prime",monospace;min-height:100vh;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .5' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .08 0 0 0 0 .06 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E")}
.mano{font-family:Caveat,cursive;color:var(--boli);font-weight:600}
.dymo{display:inline-block;text-decoration:none;white-space:nowrap;background:#141414;color:#f2f2f2;font:700 15px/1 "Courier Prime",monospace;letter-spacing:3px;padding:8px 12px 7px;
  box-shadow:0 2px 0 #000,0 4px 8px #0008;transform:rotate(-1.2deg);text-shadow:0 -1px 0 #000,0 1px 0 #ffffff40;border-radius:2px;
  clip-path:polygon(0 8%,3px 0,100% 0,calc(100% - 2px) 50%,100% 100%,0 100%)}
.dymo i{font-style:normal;color:#e4433a}
svg.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* barra */
.top{max-width:1140px;margin:0 auto;padding:18px 20px 0;display:flex;align-items:center;gap:18px}
.top .sp{flex:1}
.top .prox{color:#cbbfa8;font-size:13px}
.top .prox b{color:#f1ead9;font-weight:700}
.top a.ay{color:#cbbfa8;font-size:13px;text-decoration:underline;text-underline-offset:3px}

/* carpetas */
.arch{max-width:1140px;margin:22px auto 30px;padding:0 20px}
.solapas{display:flex;align-items:flex-end;height:44px;position:relative}
.sol{position:absolute;bottom:0;height:40px;width:23%;display:flex;align-items:center;gap:8px;padding:0 14px;
  font:700 13px "Courier Prime",monospace;letter-spacing:1.5px;text-transform:uppercase;color:#2a241c;cursor:pointer;
  border-radius:7px 7px 0 0;filter:brightness(.82);transform:translateY(5px);transition:.15s;border:0}
.sol .et{background:#fbf7ec;padding:3px 8px 2px;box-shadow:inset 0 0 0 1px #0002;white-space:nowrap}
.sol.on{filter:none;transform:none;z-index:3;height:44px}
.sol:hover{filter:brightness(.92)}
.sol[data-m=crimen]{left:0;background:var(--f-crimen)}
.sol[data-m=paranormal]{left:24.5%;background:var(--f-paranormal)}
.sol[data-m=viaje]{left:49%;background:var(--f-viaje)}
.sol[data-m=sospechoso]{left:73.5%;background:var(--f-sospechoso)}
.sol .lg{display:inline}.sol .sm{display:none}
.carpeta{position:relative;z-index:2;background:var(--f-crimen);transition:background .2s;padding:26px 26px 30px;border-radius:0 6px 6px 6px;
  box-shadow:0 1px 0 #ffffff30 inset,0 18px 40px #0009,0 3px 0 var(--kraft2);
  display:grid;grid-template-columns:1fr 330px;gap:26px;align-items:start}
.carpeta::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .2 0 0 0 0 .1 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}

/* hoja del caso del día */
.hoja{position:relative;background:var(--papel);padding:26px 30px 28px;box-shadow:0 2px 0 #d8ceb6,0 10px 20px #0004;transform:rotate(-.4deg)}
.hoja .cab{display:flex;gap:14px;font-size:12.5px;letter-spacing:1px;text-transform:uppercase;color:var(--gris);border-bottom:1px solid #1f1c1840;padding-bottom:8px}
.hoja .cab b{color:var(--tinta)}
.hoja h1{font:400 38px/1.08 "Special Elite",monospace;margin:18px 0 8px;max-width:62%}
.hoja .lead{max-width:60%;font-size:15.5px}
.sello{position:absolute;text-transform:uppercase;white-space:nowrap;font:700 17px "Courier Prime",monospace;letter-spacing:3px;color:var(--sello);border:3px solid var(--sello);
  padding:4px 10px 3px;transform:rotate(-8deg);opacity:.82;mix-blend-mode:multiply;border-radius:3px;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.6' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.6 1.5'/%3E%3C/filter%3E%3Crect width='120' height='60' filter='url(%23n)'/%3E%3C/svg%3E")}
.polaroid{position:absolute;right:26px;top:44px;width:33%;background:#fbfaf6;padding:9px 9px 34px;box-shadow:0 6px 14px #0005;transform:rotate(2.6deg)}
.polaroid .img{aspect-ratio:4/3;overflow:hidden;background:#222}
.polaroid .img svg{width:100%;height:100%;display:block;filter:sepia(.25) contrast(1.05)}
.polaroid .pie{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:21px}
.clip{position:absolute;top:-16px;left:22px;width:16px;height:52px}
.ficha{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:20px 0 4px;max-width:60%;font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--gris)}
.ficha span.v{border-bottom:1px dotted #1f1c1880;text-transform:none;letter-spacing:0;font-size:22px;line-height:1;color:var(--boli);font-family:Caveat,cursive;font-weight:600}
.sosp{display:flex;align-items:flex-end;gap:12px;margin-top:20px}
.mug{width:64px;text-align:center}
.mug .f{width:64px;height:72px;background:#d9d3c4;overflow:hidden;border:1px solid #0003;filter:grayscale(.35) contrast(1.05)}
.mug .f svg{width:100%;height:100%;display:block}
.mug .n{font-size:19px;line-height:1.1;margin-top:2px}
.sosp .q{font-size:23px;line-height:1.05;margin-left:6px;transform:rotate(-3deg);align-self:center}
.abrir{display:flex;align-items:center;gap:18px;margin-top:22px}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--tinta);color:var(--papel);font:700 15px "Courier Prime",monospace;letter-spacing:2px;
  text-transform:uppercase;padding:13px 20px 12px;text-decoration:none;border:0;cursor:pointer;box-shadow:3px 3px 0 var(--sello)}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--sello)}
.abrir .mano{font-size:22px}

/* columna derecha */
.ficha-idx{background:#fbf8f0;padding:12px 16px 14px;box-shadow:0 6px 14px #0004;transform:rotate(1deg);
  background-image:linear-gradient(#e2574c,#e2574c),repeating-linear-gradient(#fbf8f0 0 25px,#a9c3dc 25px 26px);
  background-size:100% 1.5px,100% 100%;background-position:0 34px,0 9px;background-repeat:no-repeat,repeat}
.ficha-idx h3{font:400 16px "Special Elite",monospace;letter-spacing:1px;height:30px}
.ficha-idx ol{list-style:none;counter-reset:n;font-size:14px;line-height:26px}
.ficha-idx li{counter-increment:n;padding-left:24px;position:relative}
.ficha-idx li::before{content:counter(n)".";position:absolute;left:0;font-weight:700}
.ficha-idx .mano{font-size:20px;line-height:26px;display:block;text-align:right}
.libro{margin-top:22px;background:var(--papel2);padding:12px 14px 10px;box-shadow:0 6px 14px #0004;transform:rotate(-.6deg)}
.libro h3{font:400 16px "Special Elite",monospace;letter-spacing:1px;margin-bottom:6px;display:flex;justify-content:space-between;align-items:baseline}
.libro h3 .mano{font-size:19px;font-family:Caveat}
.libro table{width:100%;border-collapse:collapse;font-size:13px}
.libro th{text-align:left;font-weight:700;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--gris);border-bottom:1.5px solid var(--tinta);padding:3px 4px}
.libro td{padding:6px 4px;border-bottom:1px solid #1f1c1825;vertical-align:middle}
.libro td.n{color:var(--gris);width:28px}
.libro tr:hover td{background:#fff6}
.libro .est{font-size:10.5px;letter-spacing:1px;font-weight:700;border:1.5px solid currentColor;padding:1px 4px;white-space:nowrap;text-transform:uppercase}
.est.ok{color:#2d6a3a}.est.nv{color:var(--sello)}.est.mm{color:#9a6a12}.est.lk{color:var(--gris);border-style:dashed}

/* color de la carpeta según el juego */
body.modo-paranormal .carpeta{background:var(--f-paranormal)}
body.modo-viaje .carpeta{background:var(--f-viaje)}
body.modo-sospechoso .carpeta{background:var(--f-sospechoso)}
.solapas{margin-bottom:0}
.sol:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* sello del caso del día según cómo vas */
.hoja .sello{right:40px;bottom:46px}
.sello.ok{color:#2d6a3a;border-color:#2d6a3a}
.sello.mm{color:#9a6a12;border-color:#9a6a12}
.sello.ar{color:#555;border-color:#555}
.mug .f svg{height:100%;width:100%}
.mug .f{aspect-ratio:64/72}
/* libro de registro */
.libro .tabla{max-height:330px;overflow-y:auto;scrollbar-width:thin}
.libro td a{text-decoration:none}
.libro td small{display:block;color:var(--gris);font-size:11.5px}
.libro tr:not(.lk){cursor:pointer}
.libro tr.lk td{color:var(--gris)}
.libro .pronto{font-size:20px}
.est.ar{color:#555}
/* preguntas y pie */
.hojita{max-width:1140px;margin:0 auto 18px;padding:0 20px}
.hojita h3{font:400 16px "Special Elite",monospace;letter-spacing:1px;color:#e8dcc4;margin-bottom:6px}
.faq details{border-bottom:1px dashed #ffffff26;padding:7px 0;color:#e8dcc4;font-size:14px}
.faq summary{cursor:pointer;font-weight:700;color:#f1ead9}
.faq p{color:#cbbfa8;margin-top:4px;max-width:760px}
footer{max-width:1140px;margin:0 auto;padding:10px 20px 26px;display:flex;flex-wrap:wrap;gap:16px;font-size:12.5px;color:#9d927f}
footer a{color:#9d927f}

/* MÓVIL (pantalla estrecha) */
@media (max-width:760px){
  .top{padding:12px 12px 0;gap:10px}.top .prox{display:none}
  .arch{padding:0 8px;margin-top:14px}
  .solapas{height:38px}
  .sol{width:24.4%;padding:0 6px;height:34px;justify-content:center;gap:4px;font-size:11px;letter-spacing:.5px}
  .sol.on{height:38px}
  .sol .et{padding:2px 4px}
  .sol[data-m=paranormal]{left:25.2%}.sol[data-m=viaje]{left:50.4%}.sol[data-m=sospechoso]{left:75.6%}
  .sol .lg{display:none}.sol .sm{display:inline}.sol svg.ic{display:none}
  .carpeta{grid-template-columns:1fr;padding:14px 10px 18px;gap:18px}
  .hoja{padding:16px 16px 20px;transform:none}
  .hoja .cab{font-size:11px;gap:8px}.hoja .cab .lg2{display:none}
  .dymo{font-size:12px;letter-spacing:2px;padding:7px 9px 6px;white-space:nowrap}
  .polaroid{position:relative;float:right;width:46%;right:auto;top:auto;margin:14px -4px 8px 12px}
  .hoja .sello{font-size:11px;letter-spacing:2px;bottom:auto;top:-12px;right:-6px;background:var(--papel)}
  .hoja h1{font-size:27px;max-width:none;margin-top:12px}
  .hoja .lead{max-width:none;font-size:14.5px;margin-top:6px}
  .polaroid{padding:6px 6px 24px}
  .polaroid .pie{font-size:16px;bottom:3px}
  .ficha{max-width:none;margin-top:14px}
  .sosp{gap:8px;flex-wrap:wrap}.mug{width:58px}.mug .f{width:58px;height:64px}
  .sosp .q{font-size:20px}
  .btn{padding:12px 14px;font-size:14px}
  .ficha-idx,.libro{transform:none}
}

@media (max-width:760px){
  .hojita,footer{padding-left:12px;padding-right:12px}
  .libro .tabla{max-height:none}
}
.est.sa{color:#7d7262;border-color:#7d726266}
.libro h3{white-space:nowrap;gap:8px}.libro h3 .mano{font-size:17px}

/* ---------- solapas con personalidad (una por juego) ---------- */
.sol .et{background:none!important;box-shadow:none!important;padding:0!important}
.sol{gap:10px!important}
.lab{display:inline-flex;align-items:center;white-space:nowrap}
/* Crimen: letras recortadas pegadas en la solapa */
.lab-crimen .rl{display:inline-block;padding:1px 3px 0;margin:0 1px;line-height:1.05;font-size:15px;box-shadow:1px 1px 0 #0003;clip-path:polygon(2% 4%,97% 0,100% 93%,4% 100%)}
/* Paranormal: etiqueta vieja quemada, escrita a mano */
.lab-paranormal{font:15px "Rock Salt",cursive;color:#20302a;background:#eee6cc;padding:3px 10px 1px;transform:rotate(-2deg);
  box-shadow:inset 0 0 6px #6b5a2a66,0 1px 2px #0003;clip-path:polygon(0 12%,6% 0,40% 6%,72% 0,100% 8%,97% 55%,100% 100%,60% 92%,30% 100%,3% 90%);text-shadow:0 0 2px #20302a66}
/* Viaje: billete de tren troquelado */
.lab-viaje{font:800 16px "Big Shoulders",sans-serif;letter-spacing:2px;color:#1f3f6b;background:#f4efe2;padding:2px 12px 1px 10px;position:relative;
  -webkit-mask:radial-gradient(circle 4px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 4px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
  border-left:2px dashed #1f3f6b55}
.lab-viaje small{font:700 9px "Courier Prime",monospace;color:#b0281f;margin-left:6px;letter-spacing:1px}
/* Tú, sospechoso: pintalabios directamente sobre la carpeta */
.lab-sospechoso{font:17px "Permanent Marker",cursive;color:#b81b36;transform:rotate(-3deg);text-shadow:0 0 1px #b81b36,1px 1px 0 #7a0f22;letter-spacing:.5px}
@media (max-width:760px){
  .sol{gap:0!important}
  .lab-crimen .rl{font-size:11px;padding:0 2px;margin:0 .5px}
  .lab-paranormal{font-size:10px;padding:2px 5px 0}
  .lab-viaje{font-size:13px;padding:1px 7px;letter-spacing:1px}
  .lab-sospechoso{font-size:14px}
}

/* =====================================================================
   CARPETAS · v2: objetos de cada historia, pila de casos anteriores
   y animación al cambiar de carpeta
   ===================================================================== */
body{overflow-x:hidden}
.hoja,.dcha{position:relative;z-index:2}
.adornos{position:absolute;inset:0;pointer-events:none;z-index:4}
.adornos>*{position:absolute}
.grapa{display:block;width:24px;height:4px;border-radius:2px;background:linear-gradient(#f2f2f2,#8d8d8d);box-shadow:0 1px 1px #0007;margin:4px 0}

/* crimen */
.cinta{left:-52px;bottom:4px;width:250px;transform:rotate(-38deg);background:#b0281f;color:#fff;font:700 11px "Courier Prime",monospace;letter-spacing:2.5px;
  padding:5px 0 4px;text-align:center;white-space:nowrap;overflow:hidden;box-shadow:0 3px 6px #0005;border-top:1px solid #ffffff40}
.cafe{left:470px;bottom:58px;width:130px;height:130px;border-radius:50%;mix-blend-mode:multiply;opacity:.9;
  background:radial-gradient(circle,#0000 55%,#7a461a40 57%,#7a461a26 61%,#7a461a10 64%,#0000 66%),radial-gradient(circle at 70% 80%,#7a461a1c 0 8%,#0000 9%)}
.grapas{left:30px;top:16px;transform:rotate(-12deg)}

/* paranormal */
.quemado{background:radial-gradient(ellipse at 100% 100%,#140b05 0 22%,#2e1a0b 32%,#5a3b1b99 42%,#0000 58%)}
.q1{right:0;bottom:0;width:170px;height:120px;border-bottom-right-radius:6px}
.q2{left:0;top:0;width:110px;height:80px;transform:rotate(180deg);opacity:.75}
.cera{width:15px;height:13px;border-radius:52% 48% 45% 55%;background:radial-gradient(circle at 35% 35%,#fffdf3,#ece2c6 60%,#c9b98f);box-shadow:0 1px 2px #0005}
.c1{left:9px;top:300px}.c2{left:6px;top:322px;width:8px;height:7px}.c3{right:356px;bottom:9px;width:11px;height:10px}
.foto-rara{position:relative;width:190px;margin:22px auto 0;background:#fbfaf6;padding:8px 8px 28px;transform:rotate(5deg);box-shadow:0 6px 12px #0005}
.foto-rara .grapa{position:absolute;top:-2px;left:40%;transform:rotate(4deg)}
.foto-rara .img{height:120px;background:linear-gradient(160deg,#1b2420,#0b0f0d 60%,#22281f);position:relative;overflow:hidden;filter:sepia(.3)}
.foto-rara .img::before{content:"";position:absolute;left:10px;right:10px;bottom:0;height:46px;background:repeating-linear-gradient(90deg,#2b3029 0 18px,#20241f 18px 22px);opacity:.8}
.foto-rara .img i{position:absolute;left:58%;top:30%;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle,#fffbe0 0 18%,#fff6c088 35%,#fff6c022 60%,#0000 70%);filter:blur(.5px)}
.foto-rara .mano{position:absolute;left:0;right:0;bottom:3px;text-align:center;font-size:19px}

/* viaje */
.etiq-maleta{right:-40px;top:440px;width:104px;background:#e7cf95;padding:22px 8px 8px;transform:rotate(9deg);box-shadow:0 4px 8px #0005;
  clip-path:polygon(18% 0,82% 0,100% 12%,100% 100%,0 100%,0 12%);font:700 10px/1.35 "Courier Prime",monospace;color:#2a241c;text-align:center}
.etiq-maleta .ag{position:absolute;left:50%;top:7px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--mesa);box-shadow:0 0 0 2px #b48d55}
.etiq-maleta b{display:block;letter-spacing:2px;border-bottom:1px solid #2a241c55;margin-bottom:3px}
.etiq-maleta span{display:block;font-weight:400}
.etiq-maleta .mano{font-size:19px;font-weight:600}
.sello-adu{left:6px;bottom:2px;transform:rotate(-12deg);border:3px double #b0281f;border-radius:50%;padding:8px 18px 6px;color:#b0281f;
  font:700 15px/1 "Courier Prime",monospace;letter-spacing:3px;text-align:center;opacity:.7;mix-blend-mode:multiply}
.sello-adu small{display:block;font-size:8.5px;letter-spacing:1.5px;margin-top:3px}
.pegas{position:relative;height:150px;margin-top:20px}
.peg{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 3px 6px #0004;font:700 10px/1.2 "Courier Prime",monospace;letter-spacing:1.5px}
.peg b{font:800 16px/1.05 "Big Shoulders",sans-serif;letter-spacing:1px;margin:2px 0}
.p1{left:18px;top:6px;width:112px;height:112px;border-radius:50%;background:#f4efe2;color:#b0281f;border:4px solid #b0281f;box-shadow:inset 0 0 0 3px #f4efe2,inset 0 0 0 5px #b0281f,0 3px 6px #0004;transform:rotate(-10deg)}
.p2{left:132px;top:24px;width:150px;padding:10px 6px;background:#1f3f6b;color:#f3d58c;transform:rotate(6deg);border-radius:3px}
.p2 b{color:#fff}
.p3{left:150px;top:100px;padding:5px 12px;background:#f6d64a;color:#2a241c;transform:rotate(-4deg)}

/* tú, sospechoso */
.pulsera{right:-36px;bottom:70px;width:250px;transform:rotate(-32deg);color:#fff;font:700 10px "Courier Prime",monospace;letter-spacing:2.5px;text-align:center;
  padding:6px 0 5px;white-space:nowrap;overflow:hidden;background:repeating-linear-gradient(90deg,#e0206f 0 14px,#ff3d8b 14px 28px);box-shadow:0 3px 6px #0005}
.tlf{left:36px;bottom:2px;font-size:21px;transform:rotate(-1.5deg)}
.entrada{position:relative;display:flex;align-items:stretch;width:250px;margin:22px 0 0 18px;background:#ffe6f0;color:#4a1030;transform:rotate(-4deg);box-shadow:0 5px 10px #0005}
.entrada .grapa{position:absolute;left:30px;top:-3px;transform:rotate(-6deg)}
.entrada>div{flex:1;padding:12px 12px 10px;font:700 10px/1.35 "Courier Prime",monospace;letter-spacing:1px}
.entrada b{display:block;white-space:nowrap;font:18px/1 "Permanent Marker",cursive;color:#e0206f;letter-spacing:0;margin:3px 0}
.entrada .tro{width:0;border-left:2px dashed #e0206f88}
.entrada .cop{display:flex;align-items:center;justify-content:center;width:52px;font:700 10px/1.2 "Courier Prime",monospace;text-align:center;background:#ffd2e4}
.beso{width:70px;height:46px;margin:14px 0 0 50px;transform:rotate(-14deg);opacity:.85;mix-blend-mode:multiply;
  background:radial-gradient(ellipse 46% 40% at 30% 52%,#b81b36d0 58%,#0000 64%),radial-gradient(ellipse 46% 40% at 70% 52%,#b81b36d0 58%,#0000 64%);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 2px,#000a 2px 3px);mask:repeating-linear-gradient(90deg,#000 0 2px,#000a 2px 3px)}

/* ---------- pila de casos anteriores ---------- */
.pila{margin-top:22px}
.pila h3{font:400 16px "Special Elite",monospace;letter-spacing:1px;color:#1f1c18;display:flex;justify-content:space-between;align-items:baseline;margin:0 4px 8px;white-space:nowrap}
.pila h3 .mano{font-size:18px}
.carpetitas{display:flex;flex-direction:column;max-height:385px;overflow-y:auto;overflow-x:hidden;padding:4px 14px 6px 4px;scrollbar-width:thin}
.cf{position:relative;display:grid;grid-template-columns:40px 1fr auto;gap:8px;align-items:center;padding:8px 10px 7px 8px;margin-top:-5px;text-decoration:none;color:#1f1c18;
  background:linear-gradient(#e9d6a6,#dfc993);border-radius:3px 6px 3px 3px;box-shadow:0 -2px 3px #0002,0 1px 0 #0000001a;transform:rotate(var(--g,0deg));
  transition:transform .15s ease,box-shadow .15s}
.cf:first-child{margin-top:0}
.cf:nth-child(3n+2){background:linear-gradient(#e4d0a0,#d8c18a)}
.cf:nth-child(3n){background:linear-gradient(#ecdcb2,#e2cf9f)}
a.cf:hover{transform:translateX(10px) rotate(0deg);box-shadow:-4px 4px 10px #0004;z-index:2}
.cf .pes{font:700 12px "Courier Prime",monospace;background:#fbf7ec;padding:2px 0;text-align:center;box-shadow:inset 0 0 0 1px #0002}
.cf .tt{font:13px/1.25 "Courier Prime",monospace;min-width:0}
.cf .tt small{display:block;font-size:11px;color:#6d6458}
.cf.lk{opacity:.7}
.cf.vacia{grid-template-columns:1fr;background:none;box-shadow:none;border:1.5px dashed #1f1c1855}
.cf.vacia .tt.mano{font:600 19px/1.1 Caveat,cursive;color:var(--boli)}
.cf .est{background:#fbf7ec88}

/* ---------- animación: la carpeta vuelve al montón y sale la otra ---------- */
.carpeta.guarda .hoja,.carpeta.guarda .dcha,.carpeta.guarda .adornos{transition:transform .2s ease-in,opacity .2s ease-in;transform:translateY(26px) rotate(.8deg);opacity:0}
.carpeta.guarda{transition:transform .2s ease-in;transform:translateY(10px) scaleY(.985)}
.carpeta.saca{animation:carpSale .5s cubic-bezier(.2,.9,.3,1)}
.carpeta.saca .hoja{animation:hojaSale .55s .05s cubic-bezier(.2,.9,.3,1.05) both}
.carpeta.saca .dcha{animation:hojaSale .55s .12s cubic-bezier(.2,.9,.3,1.05) both}
.carpeta.saca .adornos{animation:aparece .4s .3s both}
@keyframes carpSale{from{transform:translateY(14px)}}
@keyframes hojaSale{from{transform:translateY(40px) rotate(-1.5deg);opacity:0}}
@keyframes aparece{from{opacity:0}}
.sol.on{transition:height .2s,transform .2s}
@media (prefers-reduced-motion:reduce){.carpeta.saca,.carpeta.saca *{animation:none!important}}

/* ---------- móvil ---------- */
@media (max-width:760px){
  .cinta{left:-60px;bottom:0;width:200px;font-size:9px}
  .cafe{left:auto;right:30px;bottom:auto;top:430px;width:100px;height:100px}
  .grapas{left:14px;top:6px}
  .q1{width:120px;height:90px}
  .c1{top:180px}.c2{top:198px}.c3{display:none}
  .etiq-maleta{right:-30px;top:120px;transform:rotate(9deg) scale(.8)}
  .sello-adu{left:auto;right:10px;bottom:auto;top:560px;transform:rotate(-12deg) scale(.85)}
  .pulsera{bottom:auto;top:640px;width:200px;right:-50px}
  .tlf{font-size:18px;left:14px}
  .carpetitas{max-height:none}
  .entrada{margin-left:auto;margin-right:auto}
  .beso{margin-left:auto;margin-right:30px}
  .pegas{width:290px;margin-left:auto;margin-right:auto}
}
@media (max-width:760px){
  html{overflow-x:hidden}
  .pulsera,.etiq-maleta,.sello-adu,.cinta{display:none}
  .mug .n{white-space:nowrap;font-size:16px}
}