@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Kalam:wght@300;400;700&display=swap');

:root{
  --cardboard: #b98c56;
  --cardboard-mid: #a3763f;
  --cardboard-dark: #7c5530;
  --cardboard-edge: #5e3f22;
  --burlap: #ab9a76;
  --burlap-dark: #8c7a56;
  --marker: #211d18;
  --rust: #8b3a2b;
  --tape: rgba(216,201,160,.55);
  --soot: #2a2420;
}

*{box-sizing:border-box;}

body{
  margin:0;
  min-height:100vh;
  color:var(--marker);
  font-family:'Kalam', cursive, sans-serif;
  background-color:var(--burlap);
  background-image:
    repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.045) 0 2px, transparent 2px 7px),
    radial-gradient(ellipse 500px 350px at 8% 12%, rgba(42,36,32,.16), transparent 60%),
    radial-gradient(ellipse 600px 400px at 92% 20%, rgba(42,36,32,.13), transparent 55%),
    radial-gradient(ellipse 700px 500px at 15% 92%, rgba(42,36,32,.15), transparent 60%),
    radial-gradient(ellipse 500px 400px at 88% 88%, rgba(42,36,32,.1), transparent 55%);
  background-attachment:fixed;
}

.wrap{
  max-width:960px;
  margin:0 auto;
  padding:34px 18px 80px;
}

/* ---------- Masthead ---------- */
.masthead{
  text-align:center;
  padding:22px 16px 26px;
  margin-bottom:24px;
  background:var(--cardboard);
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 3px, transparent 3px 9px),
    linear-gradient(160deg, rgba(255,255,255,.06), transparent 40%);
  border:2px solid var(--cardboard-edge);
  border-radius:2px;
  box-shadow:0 6px 0 rgba(42,36,32,.18), 0 10px 22px rgba(42,36,32,.35);
  transform:rotate(-0.6deg);
  position:relative;
}
.masthead::before{
  content:"";
  position:absolute;
  top:-10px; left:38px;
  width:90px; height:26px;
  background:var(--tape);
  border:1px solid rgba(0,0,0,.08);
  transform:rotate(-8deg);
}
.masthead::after{
  content:"";
  position:absolute;
  top:-10px; right:38px;
  width:90px; height:26px;
  background:var(--tape);
  border:1px solid rgba(0,0,0,.08);
  transform:rotate(7deg);
}
.masthead .eyebrow{
  font-family:'Kalam', cursive;
  font-size:12px;
  letter-spacing:.08em;
  color:var(--rust);
  opacity:.9;
}
.masthead h1{
  font-family:'Permanent Marker', cursive;
  font-size:clamp(42px,10vw,76px);
  line-height:1;
  margin:6px 0 6px;
  color:var(--marker);
  transform:rotate(-1deg);
}
.masthead .subtitle{
  font-size:clamp(14px,2.6vw,19px);
  color:var(--soot);
  margin:2px 0 10px;
}
.masthead .credito{
  font-size:12.5px;
  color:var(--rust);
  opacity:.85;
}

/* ---------- Controls ---------- */
.controls{margin:0 0 24px;}
.search-slot{
  max-width:460px;
  margin:0 auto 16px;
  transform:rotate(0.4deg);
}
.search-slot label{
  display:block;
  text-align:center;
  font-family:'Permanent Marker', cursive;
  font-size:13px;
  color:var(--soot);
  margin-bottom:6px;
  opacity:.85;
}
.search-slot input{
  width:100%;
  font-family:'Kalam', cursive;
  font-size:18px;
  padding:10px 14px;
  border:2px dashed var(--cardboard-edge);
  background:rgba(255,250,235,.5);
  color:var(--marker);
  text-align:center;
  outline:none;
  border-radius:3px;
}
.search-slot input::placeholder{color:rgba(43,32,24,.5);}
.search-slot input:focus{background:rgba(255,250,235,.75); border-color:var(--rust);}

.alphabet{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:5px;
  padding:0 4px;
}
.alphabet button{
  font-family:'Kalam', cursive;
  font-weight:700;
  font-size:13px;
  width:30px;
  height:30px;
  border:2px solid var(--cardboard-edge);
  background:var(--cardboard);
  color:var(--marker);
  cursor:pointer;
  border-radius:3px;
  transition:transform .12s ease, background .12s ease, color .12s ease;
}
.alphabet button:hover:not(:disabled){transform:translateY(-2px) rotate(-2deg);}
.alphabet button.active{
  background:var(--rust);
  color:#f3e9d2;
  border-color:var(--soot);
}
.alphabet button:disabled{opacity:.3; cursor:default;}
.alphabet .reset{width:auto; padding:0 12px;}

.status-line{
  text-align:center;
  font-size:13px;
  color:var(--soot);
  opacity:.8;
  margin:16px 0 6px;
}

/* ---------- Cards ---------- */
.fichero{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(250px,1fr));
  gap:22px;
  margin-top:18px;
}
.ficha{
  position:relative;
  background:var(--cardboard);
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 3px, transparent 3px 8px),
    linear-gradient(200deg, rgba(255,255,255,.05), transparent 45%);
  border:2px solid var(--cardboard-edge);
  padding:20px 16px 14px;
  box-shadow:3px 4px 0 var(--cardboard-dark), 4px 8px 14px rgba(42,36,32,.3);
  transition:transform .15s ease, box-shadow .15s ease;
}
.ficha:nth-child(4n){transform:rotate(-1.1deg); clip-path:polygon(0% 1%,3% 0%,97% 2%,100% 0%,99% 96%,96% 100%,4% 99%,1% 97%);}
.ficha:nth-child(4n+1){transform:rotate(0.8deg); clip-path:polygon(1% 0%,99% 1%,100% 3%,98% 98%,95% 100%,2% 100%,0% 97%,2% 4%);}
.ficha:nth-child(4n+2){transform:rotate(-0.3deg); clip-path:polygon(0% 2%,4% 0%,100% 1%,99% 4%,100% 99%,3% 100%,0% 98%);}
.ficha:nth-child(4n+3){transform:rotate(1.2deg); clip-path:polygon(2% 0%,100% 2%,98% 100%,5% 99%,0% 96%,1% 3%);}
.ficha:hover{
  transform:rotate(0deg) translateY(-3px) scale(1.015);
  box-shadow:3px 5px 0 var(--cardboard-dark), 6px 14px 18px rgba(42,36,32,.4);
  z-index:2;
}
.ficha .cinta{
  position:absolute;
  top:-9px; left:50%;
  transform:translateX(-50%) rotate(-3deg);
  width:64px; height:20px;
  background:var(--tape);
  border:1px solid rgba(0,0,0,.08);
}
.tag-region{
  position:absolute;
  top:8px; right:8px;
  font-family:'Kalam', cursive;
  font-weight:700;
  font-size:9px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#f3e9d2;
  background:var(--rust);
  padding:2px 7px;
  border-radius:2px;
  transform:rotate(4deg);
  opacity:.92;
}
.ficha h3{
  font-family:'Permanent Marker', cursive;
  font-weight:400;
  font-size:22px;
  color:var(--marker);
  margin:10px 0 8px;
  line-height:1.05;
}
.ficha .def{
  font-size:16.5px;
  line-height:1.35;
  margin:0 0 10px;
  color:var(--soot);
}
.ficha .ej{
  font-family:'Kalam', cursive;
  font-style:italic;
  font-size:14px;
  line-height:1.4;
  color:var(--marker);
  border-top:2px dashed rgba(94,63,34,.5);
  padding-top:8px;
  margin:0;
  opacity:.9;
}
.ficha .ej::before{content:"— "; opacity:.7;}

.no-results{
  text-align:center;
  font-family:'Permanent Marker', cursive;
  color:var(--soot);
  padding:50px 10px;
  font-size:16px;
}

/* ---------- Footer ---------- */
footer{
  margin-top:50px;
  text-align:center;
  font-size:13px;
  color:var(--soot);
  opacity:.85;
  line-height:1.7;
}
footer .serie{font-family:'Permanent Marker', cursive; font-size:13px; color:var(--rust);}

@media (max-width:480px){
  .wrap{padding:22px 10px 60px;}
  .alphabet button{width:27px;height:27px;font-size:12px;}
  .fichero{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;}
}