:root { --fondo:#f7f7f9; --tinta:#1b1d24; --suave:#5f6472; --marca:#d6361f; --linea:#e2e4ea; --tarjeta:#fff; --ok:#16794a; --error:#b00020; }
@media (prefers-color-scheme: dark) { :root { --fondo:#14161b; --tinta:#eceef3; --suave:#a2a8b6; --marca:#ff6a4f; --linea:#2c303a; --tarjeta:#1c1f27; --ok:#4cc38a; --error:#ff7a8a; } }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; background:var(--fondo); color:var(--tinta); }
a { color:var(--marca); }
.ancho { max-width:1100px; margin:0 auto; padding:0 16px; }
.cab { background:var(--tarjeta); border-bottom:1px solid var(--linea); position:sticky; top:0; z-index:5; }
.cab-fila { display:flex; align-items:center; gap:12px; padding-top:10px; padding-bottom:10px; flex-wrap:wrap; }
.marca { font-weight:800; font-size:1.3rem; text-decoration:none; color:var(--marca); }
.buscador { flex:1 1 260px; display:flex; gap:6px; }
.buscador input { flex:1; padding:9px 12px; border:1px solid var(--linea); border-radius:8px; background:var(--fondo); color:var(--tinta); }
button, .btn { font:inherit; padding:9px 14px; border-radius:8px; border:1px solid var(--linea); background:var(--tarjeta); color:var(--tinta); cursor:pointer; text-decoration:none; display:inline-block; }
.btn-fuerte, .buscador button { background:var(--marca); border-color:var(--marca); color:#fff; font-weight:600; }
.carro { text-decoration:none; font-weight:600; }
.burbuja { background:var(--marca); color:#fff; border-radius:99px; padding:1px 8px; font-size:.8rem; }
.principal { padding-top:20px; padding-bottom:40px; min-height:60vh; }
.hero { padding:18px 0; } .hero h1 { margin:0 0 4px; font-size:1.8rem; } .hero p { margin:0; color:var(--suave); }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 18px; }
.chips a { padding:5px 12px; border:1px solid var(--linea); border-radius:99px; text-decoration:none; background:var(--tarjeta); color:var(--tinta); font-size:.9rem; }
.chips a.activa { border-color:var(--marca); color:var(--marca); }
.rejilla { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:14px; }
.tarjeta { display:flex; flex-direction:column; gap:4px; background:var(--tarjeta); border:1px solid var(--linea); border-radius:12px; padding:12px; text-decoration:none; color:var(--tinta); }
.tarjeta img { width:100%; aspect-ratio:1; object-fit:contain; background:#fff; border-radius:8px; }
.t-nombre { font-size:.92rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.t-marca { color:var(--suave); font-size:.8rem; } .t-precio { font-weight:800; font-size:1.1rem; }
.seccion h2 { margin:26px 0 10px; }
.ficha { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
.ficha.sin-imagen { grid-template-columns:minmax(0,720px); }
.cab-fila { justify-content:space-between; }
.ficha-img { width:100%; max-height:460px; object-fit:contain; background:#fff; border-radius:12px; border:1px solid var(--linea); }
.precio { font-size:2rem; font-weight:800; margin:8px 0; } .precio small { font-size:.9rem; font-weight:400; color:var(--suave); }
.ok { color:var(--ok); font-weight:600; } .muted, small { color:var(--suave); } .error { color:var(--error); font-weight:600; }
.compra { display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin:14px 0; }
.compra input[type=number], .en-linea input { width:80px; padding:8px; border:1px solid var(--linea); border-radius:8px; background:var(--fondo); color:var(--tinta); }
.tabla { width:100%; border-collapse:collapse; background:var(--tarjeta); } .tabla th, .tabla td { padding:8px 10px; border-bottom:1px solid var(--linea); text-align:left; vertical-align:middle; }
.en-linea { display:flex; gap:6px; } .total { font-size:1.1rem; }
.dos-col { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:24px; align-items:start; }
.formulario { display:flex; flex-direction:column; gap:12px; max-width:560px; }
.formulario label { display:flex; flex-direction:column; gap:4px; font-weight:600; }
.formulario input:not([type=checkbox]):not([type=radio]), .formulario select, .formulario textarea { padding:10px; border:1px solid var(--linea); border-radius:8px; background:var(--tarjeta); color:var(--tinta); font:inherit; }
.formulario label.radio { flex-direction:row; align-items:flex-start; gap:8px; font-weight:400; }
fieldset { border:1px solid var(--linea); border-radius:8px; padding:10px 12px; }
.resumen { background:var(--tarjeta); border:1px solid var(--linea); border-radius:12px; padding:14px; } .resumen ul { padding-left:18px; } .resumen li span { float:right; }
.paginas { display:flex; gap:16px; justify-content:center; margin:24px 0; align-items:center; }
.texto { max-width:760px; } .texto h1 { margin-top:0; }
.pie { border-top:1px solid var(--linea); background:var(--tarjeta); padding:18px 0; font-size:.9rem; color:var(--suave); }
.pie nav { display:flex; flex-wrap:wrap; gap:6px 16px; }
@media (max-width:720px) { .ficha, .dos-col { grid-template-columns:1fr; } .rejilla { grid-template-columns:repeat(2, minmax(0,1fr)); } .tabla { font-size:.85rem; } }