:root{
  --azul:#2a5caa; --azul-osc:#1e4a8a; --wa:#25d366; --wa-osc:#1da851;
  --texto:#333; --texto-sec:#666; --fondo:#fff; --fondo-alt:#f8f9fa;
  --borde:#e3e6ea; --radio:12px;
  --sombra:0 2px 10px rgba(0,0,0,.07); --sombra-hover:0 10px 28px rgba(0,0,0,.14);
  --trans:all .25s ease;
}
[data-tema="oscuro"]{
  --texto:#f1f3f5; --texto-sec:#adb5bd; --fondo:#121212; --fondo-alt:#1c1c1f;
  --borde:#2c2c31; --sombra:0 2px 10px rgba(0,0,0,.4); --sombra-hover:0 10px 28px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Ubuntu,sans-serif;
  color:var(--texto);background:var(--fondo);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1200px,100% - 2rem);margin-inline:auto}

/* ---- header ---- */
.header{position:sticky;top:0;z-index:50;background:var(--fondo);border-bottom:1px solid var(--borde);
  box-shadow:var(--sombra)}
.header-in{display:flex;align-items:center;gap:1rem;padding:.7rem 0}
.marca{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.05rem;white-space:nowrap}
.marca img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.buscador{flex:1;position:relative;min-width:0}
.buscador input{width:100%;padding:.6rem 1rem .6rem 2.4rem;border:1px solid var(--borde);
  border-radius:999px;background:var(--fondo-alt);color:var(--texto);font-size:.95rem;outline:none;transition:var(--trans)}
.buscador input:focus{border-color:var(--azul);box-shadow:0 0 0 3px rgba(42,92,170,.15)}
.buscador svg{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);width:16px;height:16px;
  stroke:var(--texto-sec);fill:none;stroke-width:2}
.acciones{display:flex;align-items:center;gap:.5rem}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--borde);
  border-radius:50%;background:var(--fondo-alt);color:var(--texto);cursor:pointer;transition:var(--trans);font-size:1.05rem}
.icon-btn:hover{border-color:var(--azul);color:var(--azul)}
.btn-wa{display:inline-flex;align-items:center;gap:.45rem;background:var(--wa);color:#fff;border:0;
  padding:.6rem 1.1rem;border-radius:999px;font-weight:600;font-size:.92rem;cursor:pointer;transition:var(--trans)}
.btn-wa:hover{background:var(--wa-osc);transform:translateY(-1px)}
@media(max-width:720px){.btn-wa .txt{display:none}.btn-wa{padding:.6rem .75rem}.marca span{display:none}}

/* ---- categorias ---- */
.cats{display:flex;gap:.5rem;overflow-x:auto;padding:.75rem 0;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;padding:.45rem 1rem;border:1px solid var(--borde);border-radius:999px;
  background:var(--fondo-alt);color:var(--texto-sec);font-size:.88rem;font-weight:600;cursor:pointer;transition:var(--trans)}
.chip:hover{border-color:var(--azul);color:var(--azul)}
.chip[aria-selected="true"]{background:var(--azul);border-color:var(--azul);color:#fff}

/* ---- hero ---- */
.hero{background:linear-gradient(135deg,var(--azul),var(--azul-osc));color:#fff;text-align:center;
  padding:3.5rem 1rem;margin-bottom:1.5rem}
.hero h1{margin:0 0 .5rem;font-size:clamp(1.6rem,4.5vw,2.5rem);letter-spacing:-.02em}
.hero p{margin:0 0 1.4rem;opacity:.92}
.hero .btn-wa{background:#fff;color:var(--azul)}
.hero .btn-wa:hover{background:#f1f1f1}
.hero .btn-wa .txt{display:inline}

/* ---- grid ---- */
.barra{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.barra h2{margin:0;font-size:1.25rem}
.barra select{padding:.5rem .8rem;border:1px solid var(--borde);border-radius:8px;
  background:var(--fondo-alt);color:var(--texto);font-size:.9rem;cursor:pointer}
.conteo{color:var(--texto-sec);font-size:.9rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.25rem;padding-bottom:3rem}
.card{border:1px solid var(--borde);border-radius:var(--radio);overflow:hidden;background:var(--fondo);
  display:flex;flex-direction:column;transition:var(--trans)}
.card:hover{transform:translateY(-4px);box-shadow:var(--sombra-hover);border-color:transparent}
.card-img{aspect-ratio:1;background:var(--fondo-alt);cursor:pointer;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.card:hover .card-img img{transform:scale(1.05)}
.card-body{padding:.9rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.card-cat{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--texto-sec);font-weight:700}
.card h3{margin:0;font-size:.98rem;font-weight:600;cursor:pointer;line-height:1.35}
.card h3:hover{color:var(--azul)}
.precio{font-size:1.15rem;font-weight:800;color:var(--azul);margin-top:auto}
.card .btn-wa{width:100%;justify-content:center}
.card .btn-wa .txt{display:inline}
.vacio{grid-column:1/-1;text-align:center;padding:4rem 1rem;color:var(--texto-sec)}

/* ---- modal ---- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;place-items:center;z-index:100;padding:1rem}
.modal[open]{display:grid}
.modal-box{background:var(--fondo);border-radius:var(--radio);max-width:820px;width:100%;
  max-height:90vh;overflow-y:auto;position:relative}
.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
@media(max-width:700px){.modal-grid{grid-template-columns:1fr}}
.modal-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radio) 0 0 var(--radio)}
@media(max-width:700px){.modal-grid img{border-radius:var(--radio) var(--radio) 0 0}}
.modal-info{padding:1.5rem 1.5rem 1.5rem 0}
@media(max-width:700px){.modal-info{padding:0 1.25rem 1.5rem}}
.modal-info h2{margin:.25rem 0 .5rem;font-size:1.4rem}
.modal-info .precio{font-size:1.7rem;margin:0 0 .75rem}
.modal-info .desc{color:var(--texto-sec);font-size:.94rem;white-space:pre-line;margin-bottom:1.2rem}
.stock{display:inline-block;background:rgba(40,167,69,.12);color:#28a745;font-size:.78rem;font-weight:700;
  padding:.2rem .6rem;border-radius:999px}
.cerrar{position:absolute;top:.6rem;right:.6rem;width:34px;height:34px;border:0;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;font-size:1.2rem;line-height:1;cursor:pointer;z-index:2}

/* ---- footer ---- */
.footer{background:var(--fondo-alt);border-top:1px solid var(--borde);padding:2.5rem 0 1.5rem;margin-top:2rem}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;margin-bottom:1.5rem}
.footer h4{margin:0 0 .7rem;font-size:1rem}
.footer p,.footer li{color:var(--texto-sec);font-size:.9rem;margin:.3rem 0}
.footer ul{list-style:none;padding:0;margin:0}
.footer a:hover{color:var(--azul)}
.copy{text-align:center;color:var(--texto-sec);font-size:.85rem;border-top:1px solid var(--borde);padding-top:1.2rem}
.fab{position:fixed;right:1.1rem;bottom:1.1rem;width:56px;height:56px;border-radius:50%;background:var(--wa);
  color:#fff;display:grid;place-items:center;box-shadow:0 6px 20px rgba(37,211,102,.45);z-index:60;
  font-size:1.7rem;transition:var(--trans)}
.fab:hover{transform:scale(1.08);background:var(--wa-osc)}