*{margin:0;padding:0;box-sizing:border-box}
:root{--naranja:#E8A23A;--gris:#6b6b6b}
body{font-family:Arial,Helvetica,sans-serif;background:#FBF7EF;color:#3a3a3a;line-height:1.6}
a{color:inherit;text-decoration:none}
.top{background:#fff;border-bottom:1px solid #eee;padding:14px 24px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.menu{display:flex;gap:18px;font-size:14px}
.menu a:hover{color:var(--naranja)}
.logo{font-size:26px;font-weight:bold;letter-spacing:4px;text-align:center}
.iconos{display:flex;justify-content:flex-end;align-items:center;gap:14px;font-size:18px}
.iconos input{padding:6px 10px;border:1px solid #ddd;border-radius:20px;width:150px}
.cuenta{background:var(--naranja);color:#fff;border-radius:50%;padding:0 6px;font-size:12px}
.aviso{margin:14px auto;max-width:1100px;padding:12px 16px;border-radius:6px;background:#e6f4ea;color:#1e5b2e}
.aviso.err{background:#fde8e8;color:#8a1c1c}
.hero{min-height:420px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),#c9b48f}
.hero-txt .etiqueta{display:inline-block;background:var(--naranja);padding:6px 14px;font-size:14px;border-radius:3px}
.hero h1{font-size:48px;margin:18px 0 24px}
.banner{height:220px;display:flex;align-items:center;justify-content:center;background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),#d8c8a8;color:#fff}
.banner h1{font-size:40px}
.contenedor{max-width:1100px;margin:40px auto;padding:0 20px}
.titulo-sec{font-size:28px;margin-bottom:20px}
.btn,.btn-sec{display:inline-block;background:var(--naranja);color:#fff;border:0;padding:12px 26px;font-weight:bold;cursor:pointer;border-radius:3px;font-size:14px}
.btn-sec{background:#444}
.subcat{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:18px;background:#fff;border-bottom:1px solid #eee}
.subcat a{padding:6px 14px;border-radius:20px;font-size:14px;color:var(--gris)}
.subcat a.activo,.subcat a:hover{background:var(--naranja);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px}
.card{position:relative;background:#fff;padding:14px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.05);display:block;transition:transform .2s}
.card:hover{transform:translateY(-3px)}
.card-img{position:relative;aspect-ratio:1/1;background:#eee;border-radius:4px;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover}
.card h3{font-size:16px;margin:12px 0 4px}
.precio{font-weight:bold;color:var(--naranja)}
.badge-sin{position:absolute;top:10px;left:10px;background:#444;color:#fff;font-size:12px;padding:4px 10px;border-radius:3px}
.producto{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.galeria .principal img{width:100%;border-radius:6px}
.miniaturas{display:flex;gap:8px;margin-top:10px}
.miniaturas img{width:70px;height:70px;object-fit:cover;cursor:pointer;border-radius:4px}
.precio-grande{font-size:26px;font-weight:bold;color:var(--naranja);margin:10px 0}
.compra{display:flex;gap:12px;align-items:center;margin-top:16px}
.compra input{width:80px;padding:10px}
.texto{max-width:760px}
.texto h2{margin:24px 0 8px}
.post{background:#fff;padding:20px;border-radius:6px;margin-bottom:16px}
.fecha{color:var(--gris);font-size:13px}
.form-central{max-width:460px}
form label{display:block;margin-bottom:14px;font-size:14px}
form input,form textarea,form select{display:block;width:100%;padding:10px;margin-top:6px;border:1px solid #ddd;border-radius:4px;font:inherit;background:#fff}
.tabla{width:100%;border-collapse:collapse;background:#fff}
.tabla th,.tabla td{padding:12px;border-bottom:1px solid #eee;text-align:left;font-size:14px;vertical-align:top}
.tabla input{width:80px}
.ayuda{font-size:13px;color:var(--gris);margin:8px 0}
.resumen{background:#fff;padding:20px;border-radius:6px;margin-top:20px;max-width:360px}
.cols{display:grid;grid-template-columns:1fr 360px;gap:30px}
.pasos{display:flex;gap:8px;margin:20px 0}
.paso{flex:1;text-align:center;padding:10px;background:#e8e2d6;font-size:13px;border-radius:4px}
.paso.hecho{background:var(--naranja);color:#fff}
.historial{list-style:none;font-size:14px}
.historial li{padding:8px 0;border-bottom:1px solid #eee}
.inline{display:flex;gap:6px;align-items:center}
.inline select,.inline input{width:auto;margin:0;padding:6px}
.pie{text-align:center;padding:30px;color:var(--gris);font-size:14px;border-top:1px solid #eee;margin-top:40px;background:#fff}
.flotantes{position:fixed;right:14px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:99}
.flotantes a{width:42px;height:42px;border-radius:50%;background:var(--naranja);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:14px}
@media(max-width:800px){
.top{grid-template-columns:1fr;text-align:center}
.menu{flex-wrap:wrap;justify-content:center}
.iconos{justify-content:center}
.producto,.cols{grid-template-columns:1fr}
.hero h1{font-size:32px}
}