:root{
  --paper:#ece6d8;
  --ink:#0a0a0a;
  --ink-2:#141414;
  --ink-3:#1c1c1c;
  --red:#d71920;
  --red-dark:#9c0f15;
  --muted:#8f8880;
  --border:rgba(236,230,216,.14);
  --border-strong:rgba(236,230,216,.28);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
html{scroll-behavior:smooth}

body{
  font-family:'Special Elite','Courier New',monospace;
  background:var(--ink);
  color:var(--paper);
  overflow-x:hidden;
  position:relative;
  line-height:1.5;
}

/* grano global */
body::before{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,.4) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode:overlay;
  opacity:.55;
  z-index:100;
}

/* ============ TOP BAR ============ */
.topbar{
  position:relative;
  z-index:5;
  border-bottom:1px solid var(--border);
  background:rgba(10,10,10,.6);
  backdrop-filter:blur(4px);
}
.topbar-inner{
  max-width:1160px;
  margin:0 auto;
  padding:14px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-family:'Special Elite',monospace;
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--muted);
}
.topbar .brand{
  display:flex; align-items:center; gap:10px;
  color:var(--paper);
  text-decoration:none;
}
.topbar .brand .dot{
  width:8px;height:8px;background:var(--red);border-radius:50%;
  box-shadow:0 0 0 3px rgba(215,25,32,.2);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1}
  50%{opacity:.4}
}
.topbar nav{display:flex;gap:26px}
.topbar nav a{
  color:var(--muted);
  text-decoration:none;
  transition:color .2s ease;
}
.topbar nav a:hover{color:var(--paper)}
.topbar nav a.active,
.topbar nav a[aria-current="page"]{
  color:var(--paper);
  border-bottom:1px solid var(--red);
  padding-bottom:2px;
}

/* ============ PAGE / SECTION HEAD ============ */
main.page{
  position:relative;
  z-index:2;
  max-width:1200px;
  margin:0 auto;
  padding: 60px 28px 40px;
}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:32px;
  padding-bottom:18px;
  border-bottom:1px solid var(--border);
}
.section-head .titles .kicker{
  font-family:'Special Elite',monospace;
  font-size:11px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:10px;
}
.section-head .titles h1{
  font-family:'Anton','Archivo Black',sans-serif;
  font-weight:normal;
  text-transform:uppercase;
  font-size: clamp(44px, 8vw, 88px);
  line-height:.9;
  letter-spacing:.01em;
}
.section-head .titles h1 .red{color:var(--red)}
.section-head .num{
  font-family:'Anton',sans-serif;
  font-size:14px;
  letter-spacing:.3em;
  color:var(--muted);
}

/* ============ BAR (search + filters + meta) ============ */
.bar{
  display:flex; gap:14px; flex-wrap:wrap;
  align-items:center; justify-content:space-between;
  margin-bottom: 30px;
}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.search{
  position:relative;
  flex:1 1 280px;min-width:240px;max-width:520px;
  display:flex;align-items:center;
}
.search input{
  width:100%;
  font-family:'Special Elite',monospace;
  font-size:14px;
  background:var(--ink-2);
  color:var(--paper);
  border:1.5px solid var(--border-strong);
  padding:12px 60px 12px 14px;
  letter-spacing:.05em;
  outline:none;
  caret-color:var(--red);
  transition: border-color .2s ease;
}
.search input::placeholder{color:var(--muted); opacity:.7}
.search input:focus{border-color:var(--red)}

.search button#q-clear{
  position:absolute;right:38px;top:50%;transform:translateY(-50%);
  background:transparent;border:0;color:var(--muted);
  font-size:20px;line-height:1;cursor:pointer;
  padding:4px 6px;
}
.search button#q-clear:hover{color:var(--paper)}

.search .hint{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  font-family:'Special Elite',monospace;font-size:11px;
  color:var(--muted); opacity:.65;
  border:1px solid var(--border-strong);
  padding:1px 6px;
  pointer-events:none;
}
.search input:focus ~ .hint{display:none}

@media (max-width:520px){
  .search .hint{display:none}
  .search input{padding-right:40px}
}

.filters{
  display:flex;flex-wrap:wrap;gap:8px;
}
.filters button{
  font-family:'Anton',sans-serif;
  text-transform:uppercase; letter-spacing:.22em;
  font-size:12px;
  background:transparent;color:var(--muted);
  border:1px solid var(--border-strong);
  padding:9px 14px;cursor:pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.filters button:hover{color:var(--paper); border-color:var(--paper)}
.filters button[aria-selected="true"]{
  background:var(--red); color:var(--paper);
  border-color:var(--red);
}

.meta{
  font-family:'Special Elite',monospace;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--muted);
}

/* ============ GRID (cards) ============ */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:22px;
}

.card{
  background:var(--ink-2);
  border:1px solid var(--border);
  color:var(--paper);
  display:flex;flex-direction:column;
  text-decoration:none;
  position:relative;
  transition: border-color .25s ease, transform .25s ease;
}
.card:hover{
  border-color: var(--red);
  transform: translateY(-3px);
}

.card .cover{
  position:relative;display:block;
  aspect-ratio:1/1;overflow:hidden;
  background:var(--ink-3);
  text-decoration:none;
  color:inherit;
}
.card .cover img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition: transform .5s ease;
}
.card:hover .cover img{transform:scale(1.04)}
.card .cover img[src=""]{display:none}

.card .fmt-tag{
  position:absolute;bottom:12px;right:12px;
  background:rgba(10,10,10,.85);color:var(--paper);
  padding:5px 9px 4px;
  font-family:'Special Elite',monospace;
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  border:1px solid var(--border-strong);
}

.card .body{
  padding:18px 20px 20px;
  display:flex;flex-direction:column;gap:6px;flex:1;
}

.card .title{
  font-family:'Anton','Archivo Black',sans-serif;
  font-weight:normal;
  font-size:20px;line-height:1.1;
  text-transform:uppercase;
  letter-spacing:.01em;
  color: var(--paper);
}
.card .info{
  font-family:'Special Elite',monospace;
  font-size:12px;line-height:1.45;
  color:var(--muted);
  letter-spacing:.03em;
}

.card .row{
  margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding-top:16px;
  border-top:1px solid var(--border);
}
.card .price{
  font-family:'Anton',sans-serif;
  font-size:22px;color:var(--paper);letter-spacing:.04em;
}
/* Estilos del carrito (FAB, drawer, cart items, botón .act-add) viven ahora
   en assets/cart.css — compartido con index.html para no duplicar. */

.empty{
  grid-column:1/-1;
  text-align:center;padding:60px 20px;
  font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.3em;
  font-size:clamp(18px,3vw,28px);
  color:var(--paper);opacity:.85;
  border:1px dashed var(--border-strong);
  background:var(--ink-2);
}
.empty small{
  display:block;margin-top:14px;
  font-family:'Special Elite',monospace;
  font-size:12px;letter-spacing:.1em;text-transform:none;
  color:var(--muted);opacity:.95;
}
.empty a{color:var(--red);text-decoration:none;border-bottom:1px solid var(--red)}
.empty a:hover{color:var(--paper);border-color:var(--paper)}
.empty code{
  font-family:'Special Elite',monospace;
  background:var(--ink);
  border:1px solid var(--border-strong);
  padding:1px 6px;
  color:var(--paper);
}

/* ============ FOOTER ============ */
footer.site{
  padding: 40px 28px 32px;
  border-top:1px solid var(--border);
  text-align:center;
  background: var(--ink);
  position:relative;
  z-index:2;
  margin-top: 60px;
}
footer.site .row{
  max-width:1080px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-family:'Special Elite',monospace;
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--muted);
}
footer.site a{color:var(--muted); text-decoration:none}
footer.site a:hover{color:var(--paper)}

/* ============ RESPONSIVE ============ */
@media (max-width:820px){
  .section-head{flex-direction:column; align-items:flex-start; gap:8px}
  main.page{padding:40px 20px 30px}
}
@media (max-width:520px){
  .topbar-inner{padding:12px 18px; font-size:10px; letter-spacing:.2em}
  .topbar nav{gap:14px}
  .topbar nav a:not(.always){display:none}
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
  .card .body{padding:14px 14px 16px}
  .card .title{font-size:16px}
  .card .price{font-size:18px}
  footer.site .row{flex-direction:column; gap:8px; font-size:10px; letter-spacing:.2em}
}

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