:root { --negro:#1d1d1b; --verde:#5f7c3f; --verde-osc:#4a6331; --crema:#f1efe9; --texto:#26261f; --amz:#ff9900; }
* { box-sizing:border-box; margin:0; }
body { font-family:'Montserrat',-apple-system,Segoe UI,sans-serif; color:var(--texto); background:var(--crema); }
h1,h2,h3 { letter-spacing:.04em; }
header { background:var(--crema); border-bottom:3px solid var(--negro); position:sticky; top:0; z-index:50; }
.topbar { display:flex; align-items:center; gap:16px; padding:10px 16px; max-width:1100px; margin:0 auto; }
.logo img { height:56px; display:block; }
.buscar { flex:1; display:flex; max-width:440px; margin:0 auto; }
.buscar input { flex:1; border:2px solid var(--negro); border-right:none; border-radius:4px 0 0 4px; padding:9px 12px; font-size:.95rem; min-width:0; background:#fff; font-family:inherit; }
.buscar button { border:2px solid var(--negro); background:var(--negro); color:var(--crema); border-radius:0 4px 4px 0; padding:0 14px; cursor:pointer; }
.buscar button:hover { background:var(--verde); border-color:var(--verde); }
.nav-toggle { display:none; }
.burger { display:none; font-size:1.6rem; cursor:pointer; padding:2px 8px; user-select:none; color:var(--negro); }
.mainnav { max-width:1100px; margin:0 auto; padding:0 16px 12px; display:flex; gap:8px; flex-wrap:wrap; }
.mainnav a { border:1.5px solid var(--negro); padding:6px 16px; border-radius:18px; text-decoration:none; color:var(--negro); font-size:.85rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; transition:all .15s; }
.mainnav a:hover { background:var(--verde); border-color:var(--verde); color:#fff; }
main { max-width:1100px; margin:0 auto; padding:24px 16px; }
.hero { text-align:center; padding:28px 0 12px; }
.hero h1 { text-transform:uppercase; letter-spacing:.12em; }
.hero p { color:var(--verde-osc); margin-top:8px; }
.cats { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:18px 0 30px; }
.cats a { background:#fff; padding:8px 18px; border-radius:20px; text-decoration:none; color:var(--verde-osc); font-weight:600; box-shadow:0 1px 2px rgba(29,29,27,.12); }
.cats a:hover { background:var(--verde); color:#fff; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; margin-top:16px; }
.card { background:#fff; border-radius:8px; padding:14px; box-shadow:0 1px 3px rgba(29,29,27,.1); display:flex; flex-direction:column; gap:8px; }
.card img { width:100%; height:180px; object-fit:contain; }
.card h3 { font-size:.92rem; font-weight:600; }
.card a { text-decoration:none; color:inherit; }
.precio { color:var(--verde-osc); font-weight:700; }
.precio.grande { font-size:1.6rem; }
.rating { color:var(--verde); font-weight:600; margin:6px 0; }
.btn { background:var(--negro); color:var(--crema) !important; text-align:center; padding:11px; border-radius:6px; text-decoration:none; margin-top:auto; font-weight:600; letter-spacing:.04em; transition:background .15s; }
.btn:hover { background:var(--verde); }
.btn.grande { display:inline-block; padding:13px 34px; font-size:1.02rem; }
.btn.amz { background:var(--amz); color:#1d1d1b !important; }
.botones { display:flex; gap:12px; flex-wrap:wrap; }
.ficha { display:grid; grid-template-columns:1fr 1fr; gap:28px; background:#fff; border-radius:8px; padding:24px; }
.ficha img { width:100%; max-height:420px; object-fit:contain; }
.miga { font-size:.85rem; margin-bottom:8px; }
.miga a { color:var(--verde-osc); }
.resena { margin-top:20px; line-height:1.7; }
footer { background:var(--negro); color:var(--crema); text-align:center; padding:26px 16px; font-size:.8rem; margin-top:40px; border-top:4px solid var(--verde); }
.compra-fija { display:none; }
@media (max-width:768px){
  body { font-size:1.02rem; }
  .hero { padding:36px 8px 16px; }
  .hero h1 { font-size:1.5rem; line-height:1.35; }
  .grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .card { padding:10px; }
  .card h3 { font-size:.85rem; }
  .card .btn { padding:9px; font-size:.85rem; }
  .compra-fija { display:flex; position:fixed; bottom:0; left:0; right:0; background:#fff; box-shadow:0 -2px 12px rgba(29,29,27,.18); padding:10px 14px; gap:12px; align-items:center; z-index:60; }
  .compra-fija .precio { font-size:1.15rem; margin:0; white-space:nowrap; }
  .compra-fija .btn { flex:1; margin:0; }
  .ficha { margin-bottom:70px; }

  .topbar { flex-wrap:wrap; }
  .logo img { height:44px; }
  .buscar { order:3; max-width:none; width:100%; margin-top:8px; }
  .burger { display:block; margin-left:auto; }
  .mainnav { display:none; flex-direction:column; gap:6px; padding-bottom:14px; }
  .mainnav a { text-align:center; background:#fff; }
  .nav-toggle:checked ~ .mainnav, header:has(.nav-toggle:checked) .mainnav { display:flex; }
  .ficha { grid-template-columns:1fr; padding:16px; }
  .card img { height:150px; }
}