@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Special+Elite&display=swap');

:root{
  --paper: #e4d3a8;
  --paper-dark: #d8c495;
  --paper-shadow: #c2ac7c;
  --ink: #2b2018;
  --wine: #6e1f24;
  --wine-deep: #4f1519;
  --brass: #8f701f;
  --brass-light: #a6822e;
  --charcoal: #2a2118;
  --rose: #9c4a42;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font-family:'EB Garamond', Georgia, serif;
  background-color:var(--paper);
  background-image:
    radial-gradient(ellipse 900px 500px at 12% 8%, rgba(110,31,36,0.05), transparent 60%),
    radial-gradient(ellipse 700px 500px at 90% 15%, rgba(143,112,31,0.08), transparent 55%),
    radial-gradient(ellipse 800px 600px at 20% 95%, rgba(42,33,24,0.06), transparent 60%),
    radial-gradient(ellipse 1000px 700px at 85% 90%, rgba(110,31,36,0.04), transparent 55%);
  background-attachment:fixed;
}

.wrap{
  max-width:920px;
  margin:0 auto;
  padding:36px 20px 80px;
}

/* ---------- Masthead ---------- */
.masthead{
  text-align:center;
  padding-bottom:22px;
  border-bottom:3px double var(--brass);
  margin-bottom:26px;
}
.masthead .eyebrow{
  font-family:'Special Elite', monospace;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--wine-deep);
  opacity:.85;
}
.masthead h1{
  font-family:'Abril Fatface', serif;
  font-size:clamp(40px,9vw,72px);
  line-height:1;
  margin:8px 0 4px;
  color:var(--wine-deep);
  text-shadow:1px 1px 0 rgba(255,255,255,.25);
  letter-spacing:.01em;
}
.masthead .subtitle{
  font-style:italic;
  font-size:clamp(14px,2.6vw,18px);
  color:var(--charcoal);
  margin:2px 0 14px;
}
.flourish{display:block;margin:6px auto 12px;width:min(420px,80%);height:26px;}
.flourish path{fill:none;stroke:var(--brass);stroke-width:2;stroke-linecap:round;}
.masthead .tagline{
  font-family:'Special Elite', monospace;
  font-size:12px;
  color:var(--wine);
  letter-spacing:.04em;
}
.masthead .tagline b{color:var(--wine-deep);}

/* ---------- Controls ---------- */
.controls{
  margin:0 0 26px;
}
.search-slot{
  position:relative;
  max-width:480px;
  margin:0 auto 18px;
}
.search-slot label{
  display:block;
  text-align:center;
  font-family:'Special Elite', monospace;
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--brass);
  margin-bottom:6px;
}
.search-slot input{
  width:100%;
  font-family:'EB Garamond', serif;
  font-size:19px;
  font-style:italic;
  padding:10px 16px;
  border:none;
  border-bottom:2px solid var(--brass);
  background:rgba(255,250,235,.35);
  color:var(--ink);
  text-align:center;
  outline:none;
  border-radius:2px 2px 0 0;
}
.search-slot input::placeholder{color:rgba(43,32,24,.45);}
.search-slot input:focus{background:rgba(255,250,235,.6); border-bottom-color:var(--wine);}

.alphabet{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:5px;
  padding:0 4px;
}
.alphabet button{
  font-family:'Special Elite', monospace;
  font-size:13px;
  width:30px;
  height:30px;
  border:1px solid var(--brass);
  background:rgba(255,250,235,.3);
  color:var(--wine-deep);
  cursor:pointer;
  border-radius:3px;
  transition:transform .12s ease, background .12s ease, color .12s ease;
}
.alphabet button:hover:not(:disabled){transform:translateY(-2px);}
.alphabet button.active{
  background:var(--wine-deep);
  color:var(--paper);
  border-color:var(--wine-deep);
}
.alphabet button:disabled{
  opacity:.28;
  cursor:default;
}
.alphabet .reset{
  width:auto;
  padding:0 12px;
  font-weight:600;
}

.status-line{
  text-align:center;
  font-family:'Special Elite', monospace;
  font-size:12px;
  color:var(--charcoal);
  opacity:.75;
  margin:16px 0 6px;
}

/* ---------- Cards ---------- */
.fichero{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(255px,1fr));
  gap:20px;
  margin-top:18px;
}
.ficha{
  position:relative;
  background:var(--paper-dark);
  border:1px solid rgba(43,32,24,.18);
  border-radius:2px;
  padding:16px 16px 14px;
  box-shadow:2px 3px 0 var(--paper-shadow), 3px 5px 10px rgba(42,33,24,.18);
  transition:transform .15s ease, box-shadow .15s ease;
}
.ficha:nth-child(3n){transform:rotate(-0.6deg);}
.ficha:nth-child(3n+1){transform:rotate(0.5deg);}
.ficha:nth-child(3n+2){transform:rotate(-0.2deg);}
.ficha:hover{
  transform:rotate(0deg) translateY(-3px);
  box-shadow:2px 4px 0 var(--paper-shadow), 4px 10px 16px rgba(42,33,24,.28);
  z-index:2;
}
.ficha::before{
  content:"";
  position:absolute;
  top:0;left:14px;right:14px;
  height:1px;
  background:repeating-linear-gradient(to right, rgba(43,32,24,.15) 0 4px, transparent 4px 8px);
}
.sello{
  position:absolute;
  top:-9px;
  right:10px;
  font-family:'Special Elite', monospace;
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:3px 7px;
  border:1.5px solid var(--wine);
  color:var(--wine);
  background:rgba(228,211,168,.92);
  border-radius:9px;
  transform:rotate(6deg);
  opacity:.88;
}
.ficha h3{
  font-family:'Abril Fatface', serif;
  font-weight:400;
  font-size:23px;
  color:var(--wine-deep);
  margin:10px 0 6px;
  line-height:1.05;
}
.ficha .def{
  font-size:16px;
  line-height:1.35;
  margin:0 0 10px;
  color:var(--ink);
}
.ficha .ej{
  font-family:'Special Elite', monospace;
  font-size:12.5px;
  line-height:1.5;
  color:var(--charcoal);
  border-top:1px dashed rgba(110,31,36,.35);
  padding-top:8px;
  margin:0;
}
.ficha .ej::before{content:"“ "; color:var(--brass);}
.ficha .ej::after{content:" ”"; color:var(--brass);}

.no-results{
  text-align:center;
  font-family:'Special Elite', monospace;
  color:var(--wine-deep);
  padding:50px 10px;
  font-size:14px;
}

/* ---------- Footer ---------- */
footer{
  margin-top:50px;
  text-align:center;
  font-size:12px;
  color:var(--charcoal);
  opacity:.7;
  line-height:1.6;
}
footer .serie{
  font-family:'Special Elite', monospace;
  letter-spacing:.05em;
}

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

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