:root {
  --fondo: #f6f6f4;
  --superficie: #ffffff;
  --borde: #e3e2dd;
  --texto: #1c1d20;
  --tenue: #6b6d73;
  --acento: #1f6f4a;
  --wsp: #25d366;
  --sombra: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
  --radio: 14px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #111318;
    --superficie: #1a1d23;
    --borde: #2a2e37;
    --texto: #e9eaec;
    --tenue: #9a9da4;
    --acento: #4ade9a;
    --sombra: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  }
}

* { box-sizing: border-box; }
/* hidden debe ganarle a cualquier display de clase (.modal, .link-pub, etc.) */
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.contenedor { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

/* ---------- Cabecera ---------- */
.cabecera { padding: 40px 0 28px; text-align: center; }
.cabecera h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 7vw, 2.8rem);
  letter-spacing: -.03em;
  font-weight: 800;
}
.cabecera h1 span { color: var(--acento); }
.bajada { margin: 0 auto 22px; max-width: 40ch; color: var(--tenue); }

.boton-wsp {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--wsp); color: #06251a;
  font-weight: 650; text-decoration: none;
  padding: 12px 20px; border-radius: 999px;
  transition: transform .12s ease, filter .12s ease;
}
.boton-wsp:hover { transform: translateY(-1px); filter: brightness(1.05); }
.boton-wsp:active { transform: translateY(0); }
.boton-wsp.grande { padding: 14px 26px; font-size: 1.02rem; }

/* ---------- Buscador ---------- */
/* Va arriba de la barra de categorías y se va con el scroll: la barra es la
   única que queda fija, porque dos cosas pegadas al borde de arriba se comen
   media pantalla de celular. Las medidas laterales las pone .contenedor, igual
   que en el resto de la página. */
.buscador { padding-bottom: 16px; }
.campo-buscar {
  display: flex; align-items: center; gap: 8px;
  max-width: 420px; margin: 0 auto;
  background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 999px;
  padding: 0 6px 0 14px;
}
/* El input lleva outline: none, así que el anillo de foco lo pinta la cápsula:
   sin esto, llegar al campo con Tab no se vería. */
.campo-buscar:focus-within {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 30%, transparent);
}
.campo-buscar > svg { flex: 0 0 auto; color: var(--tenue); opacity: .75; }
.campo-buscar input {
  /* min-width: 0 es lo que deja al input encogerse dentro del flex: sin eso su
     ancho por defecto desborda el contenedor en pantallas angostas. */
  flex: 1 1 auto; min-width: 0;
  padding: 10px 0;
  border: 0; background: none; outline: none;
  font: inherit; font-size: .95rem; color: var(--texto);
}
.campo-buscar input::placeholder { color: var(--tenue); opacity: .9; }
/* La X la pone el proyecto, no el browser: la nativa de WebKit aparecería
   encima de la nuestra. */
.campo-buscar input::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none;
}
.campo-buscar .limpiar {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border: 0; border-radius: 50%;
  background: none; color: var(--tenue);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.campo-buscar .limpiar:hover { color: var(--texto); background: var(--borde); }

@media (max-width: 520px) {
  .buscador { padding: 0 12px 12px; }
}

/* ---------- Filtros ---------- */
/* La barra pinta el fondo de borde a borde; la lista de adentro se alinea con
   la grilla (mismo .contenedor) y salta de línea en vez de irse al scroll
   horizontal, que dejaba la mitad de las categorías fuera de la pantalla. */
.filtros {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
}
.filtros-lista {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 7px;
  padding: 10px 16px;
}
.filtros button {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--borde); background: var(--superficie);
  color: var(--tenue); font: inherit; font-size: .82rem; font-weight: 550;
  line-height: 1.35; white-space: nowrap;
  cursor: pointer; transition: all .15s ease;
}
.filtros button:hover { color: var(--texto); }
.filtros button.activo {
  background: var(--texto); border-color: var(--texto);
  color: var(--fondo);
}
.filtros .n { font-size: .75rem; font-variant-numeric: tabular-nums; opacity: .55; }

@media (max-width: 520px) {
  .filtros-lista { gap: 6px; padding: 8px 12px; }
  .filtros button { padding: 5px 11px; font-size: .78rem; }
  .filtros .n { font-size: .72rem; }
}

/* ---------- Resumen ---------- */
.resumen {
  margin: 18px 0 0; text-align: center;
  color: var(--tenue); font-size: .85rem;
}
.sep { opacity: .5; }
/* El contador de la otra lista es el que cambia de vista, y las salidas del
   mensaje de grilla vacía son la misma idea: un control que no navega a
   ninguna parte pero se lee como un link. La misma clase sirve para el
   <button> y para el <a> del WhatsApp. */
.cambiar {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--acento);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.cambiar:hover { text-decoration-thickness: 2px; }

.nota-vendidos {
  margin: 10px auto 0; max-width: 46ch;
  text-align: center; color: var(--tenue);
  font-size: .8rem; line-height: 1.5;
}

/* ---------- Grilla ---------- */
.grilla {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  padding: 22px 0 40px;
}
.card {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  padding: 0;
  font: inherit; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.card-foto { position: relative; aspect-ratio: 1; background: var(--borde); }
.card-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-cuerpo { padding: 12px 14px 15px; }
.card h3 { margin: 0 0 4px; font-size: .97rem; font-weight: 620; line-height: 1.3; }
.card .precio { margin: 0; font-weight: 700; color: var(--acento); }
.card .categoria { margin: 6px 0 0; font-size: .78rem; color: var(--tenue); }
.card.vendido .card-foto img { filter: grayscale(1); opacity: .45; }
.card.vendido h3, .card.vendido .precio { color: var(--tenue); }
.card.vendido .precio { text-decoration: line-through; }

.badge {
  display: inline-block;
  padding: 3px 9px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.card-foto .badge { position: absolute; top: 10px; left: 10px; }
.badge.disponible { display: none; }
.badge.reservado { background: #f5a524; color: #3d2500; }
.badge.vendido { background: #3f434c; color: #dcdee2; }
.badge.envio { background: #1f6f4a; color: #d6f5e4; }
/* El de estado va arriba a la izquierda; el de despacho, al frente, para que
   no se pisen cuando un producto está reservado y además viaja. */
.card-foto .badge.envio { left: auto; right: 10px; }

.vacio { text-align: center; color: var(--tenue); padding: 40px 0; }
.vacio p { margin: 0 auto 10px; max-width: 46ch; }
.vacio-acciones { font-size: .85rem; }

/* ---------- Pie ---------- */
.pie { text-align: center; padding: 30px 16px 50px; color: var(--tenue); font-size: .88rem; border-top: 1px solid var(--borde); }
.pie p { margin: 4px 0; }
.tenue { opacity: .7; font-size: .82rem; }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; }
.modal-fondo { position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(3px); }
.modal-caja {
  position: relative; z-index: 1;
  width: min(560px, 100%); max-height: 92vh; overflow-y: auto;
  background: var(--superficie); border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  animation: entrar .18s ease;
}
@keyframes entrar { from { opacity: 0; transform: translateY(12px); } }
.cerrar {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; font-size: 22px; line-height: 1;
  cursor: pointer;
}
/* Las fotos salen verticales u horizontales segun como se tomo cada una.
   Un contenedor cuadrado las trata parejo: la horizontal se ve del mismo
   ancho que antes y la vertical pasa de ocupar el 56% del ancho a un 75%.
   El max-height evita que en pantallas bajas la foto empuje la info fuera. */
.galeria { position: relative; background: #000; aspect-ratio: 1; max-height: 70vh; }
.galeria img { width: 100%; height: 100%; object-fit: contain; display: block; }
.flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.5); color: #fff; font-size: 24px; line-height: 1;
  cursor: pointer;
}
.flecha.izq { left: 8px; } .flecha.der { right: 8px; }
.puntos { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.puntos i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.45); }
.puntos i.on { background: #fff; }
.modal-info { padding: 18px 20px 24px; }
.modal-info h2 { margin: 8px 0 6px; font-size: 1.3rem; letter-spacing: -.01em; }
.modal-info .precio { margin: 0 0 12px; font-size: 1.35rem; font-weight: 750; color: var(--acento); }
.modal-info .desc { margin: 0 0 16px; color: var(--tenue); white-space: pre-line; }
.ubicacion { display: flex; gap: 7px; align-items: center; margin: 0 0 16px; font-size: .9rem; color: var(--tenue); }
.ubicacion svg { flex: 0 0 auto; opacity: .8; }
.envio { margin: -8px 0 16px; font-size: .88rem; line-height: 1.45; color: var(--tenue); }
.modal-info .boton-wsp { width: 100%; }
.link-pub { display: block; text-align: center; margin-top: 12px; color: var(--tenue); font-size: .88rem; }