/* Reset & base */
*{box-sizing:border-box}
:root{
  --bg:#0f172a;          /* topbar oscuro */
  --txt:#0b1220;         /* texto base (sobre fondo claro) */
  --muted:#6b7280;
  --line:#e5e7eb;
  --card:#ffffff;
  --chip:#eef2ff; --chip-t:#3730a3;
  --primary:#2563eb;     /* AZUL corporativo para acentos/hover/focus */
  --ok:#16a34a;
  --shadow:0 10px 20px rgba(2,6,23,.08);
  --radius:16px;

  --on-dark:#e5e7eb;     /* texto sobre fondos oscuros */
  --on-dark-muted:#cbd5e1;
}
html,body{margin:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  color:var(--txt);
  background:#f8fafc;
}

/* Layout helpers */
.container{max-width:1150px;margin:0 auto;padding:0 16px}

/* ===================== HEADER ===================== */
.header{
  position:sticky; top:0; z-index:1000;
  background:color-mix(in oklab, var(--bg) 92%, transparent);
  color:#fff; border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter:saturate(1.2) blur(6px);
}
.header__inner{
  height:64px; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{display:inline-flex; align-items:center; gap:.55rem; text-decoration:none; color:#fff}
.brand__logo{height:28px; width:auto; display:block}
.brand__tag{font-size:.78rem; opacity:.85}

/* Botón hamburguesa */
.header__menu-btn{
  all:unset; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px; color:var(--on-dark);
  cursor:pointer; border:1px solid rgba(255,255,255,.14);
}
.header__menu-btn:hover{ background:rgba(255,255,255,.06) }
.header__menu-btn:focus-visible{ outline:2px solid var(--primary); outline-offset:2px }

/* Nav de escritorio */
.nav{ display:flex; gap:10px; align-items:center }
.nav__link{
  color:var(--on-dark); text-decoration:none;
  padding:.55rem .75rem; border-radius:10px;
}
.nav__link:hover, .nav__link.is-active{
  background:rgba(255,255,255,.08); color:#fff;
}
.nav__link:focus-visible{ outline:2px solid var(--primary); outline-offset:2px }

/* CTAs a la derecha */
.header__right{ display:flex; gap:8px; align-items:center }
.btn-top{
  all:unset; display:inline-flex; align-items:center; gap:.45rem;
  padding:.5rem .8rem; border-radius:10px; cursor:pointer;
  border:1px solid rgba(255,255,255,.14); color:#fff;
}
.btn-top:hover{ background:rgba(255,255,255,.08) }
.btn-primary-top{
  background:var(--primary); border-color:color-mix(in oklab, var(--primary) 65%, #0000);
}

/* ---------- Mobile drawer ---------- */
@media (max-width: 960px){
  .nav{
    position:fixed; inset:64px 0 auto 0;      /* debajo del header */
    background:var(--bg); color:var(--on-dark);
    border-top:1px solid rgba(255,255,255,.06);
    display:block; padding:10px 14px 18px;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:transform .2s ease, opacity .2s ease;
  }
  .nav.is-open{ transform:translateY(0); opacity:1; pointer-events:auto }
  .nav__link{ display:block; padding:.8rem .9rem; border-radius:12px }
  .header__right{ display:none } /* CTA derecha se oculta en móvil; muéstralo en drawer si lo necesitas */
}

/* Overlay al abrir el menú */
.nav__backdrop{
  position:fixed; inset:64px 0 0 0; background:rgba(2,6,23,.35);
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:900;
}
.nav__backdrop.show{ opacity:1; pointer-events:auto }

/* ------------- Resto de tu CSS (grid/cards/etc.) ------------- */
.page-title{margin:8px 0 4px 0;font-size:26px}
.page-sub{margin:0 0 14px 0;color:var(--muted)}
.muted{color:var(--muted)}
.filters-wrap{background:linear-gradient(180deg,#f1f5f9,transparent)}
.filters{display:grid;gap:10px;grid-template-columns:repeat(8,1fr)}
.filters input,.filters select{
  padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:#0f172a
}
.filters select option{color:#0f172a;background:#fff}
.btn{background:var(--ok);color:#fff;border:none;border-radius:12px;padding:10px 12px;cursor:pointer}
.btn:focus-visible{outline:2px solid #86efac;outline-offset:2px}
@media (max-width:980px){.filters{grid-template-columns:repeat(2,1fr)}}

.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin:18px 0}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);transition:transform .18s ease, box-shadow .18s ease
}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 32px rgba(2,6,23,.12)}
.card__media{position:relative;aspect-ratio:16/10;background:#f3f4f6}
.card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ribbon{
  position:absolute;top:12px;left:12px;background:#ecfeff;color:#155e75;
  padding:6px 10px;border-radius:999px;font-size:12px;border:1px solid #67e8f9
}
.card__body{padding:12px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px;margin-bottom:6px}
.chip{display:inline-block;background:var(--chip);color:var(--chip-t);padding:4px 8px;border-radius:999px;font-size:12px}
.chip--op{background:#e6ffe6;color:#166534}
.card__title{margin:4px 0 6px 0;font-weight:700;line-height:1.25}
.card__meta{color:#475569;font-size:13.5px;display:flex;gap:8px;flex-wrap:wrap}
.card__price{margin-top:8px;font-size:20px;font-weight:800}
.button{
  display:inline-block;background:#111827;color:#fff;text-decoration:none;
  padding:10px 12px;border-radius:12px;margin-top:10px
}
.button.btn-ghost{color:#0f172a;border:1px solid #cbd5e1;background:rgba(0,0,0,.02)}
.button.btn-ghost:hover{background:#f1f5f9;border-color:#94a3b8}

.btn-fav{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid #cbd5e1;background:#fff;color:#334155;border-radius:12px;padding:8px 10px;
}
.btn-fav:hover{background:#f1f5f9}
.btn-fav.is-active{background:#fde047;border-color:#f59e0b;color:#111827}

.in{width:100%;margin-bottom:8px;padding:10px;border:1px solid #334155;border-radius:10px;background:#0b1220;color:#e5e7eb}
::placeholder{color:#94a3b8}

.empty{border:1px dashed var(--line);background:#fff;border-radius:var(--radius);padding:22px;text-align:center;margin:14px 0}
.empty__icon{font-size:28px}
.empty__title{font-weight:700;margin-top:6px}
.empty__desc{color:var(--muted);margin-top:4px}

.pagination{display:flex;gap:8px;justify-content:center;margin:24px 0}
.page{
  padding:8px 12px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:#111827;background:#fff
}
.page.is-active{background:#111827;color:#fff;border-color:#111827}
.page:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

.footer{margin-top:20px;background:#f1f5f9}
.footer__inner{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between}

/* Marca (logo) */
.brand__logo{height:28px; width:auto}
@media (max-width:480px){ .brand__logo{ height:24px } }