/* Base */
:root{--pri:#FF6F3D;--txt:#1E1E1E;--bg:#F7F7F9;}
html,body{background:var(--bg);color:var(--txt);font-family:Poppins,Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.5}

/* Cabecera / menú */
.header, .navbar{backdrop-filter:saturate(180%) blur(6px); background:rgba(255,255,255,.85); border-bottom:1px solid #ececf0}
.navbar a{padding:.75rem 1rem; font-weight:600}
.navbar a:hover{color:var(--pri)}

/* Hero */
.hero{padding:64px 0}
.hero h1{font-size:clamp(28px,3.5vw,44px); font-weight:800; letter-spacing:.2px}
.btn, .button{background:var(--pri)!important; color:#fff!important; border-radius:12px; padding:.8rem 1.25rem; font-weight:700}
.btn:hover{filter:brightness(.95)}

/* Cards de productos */
.card,.product,.item{background:#fff; border:1px solid #ECECF0; border-radius:16px; overflow:hidden; box-shadow:0 6px 18px rgba(20,20,37,.06)}
.card img{aspect-ratio:4/3; object-fit:cover}
.card .price{color:var(--pri); font-weight:800}

/* Grillas responsivas */
.grid{display:grid; gap:18px}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* Footer */
.footer{background:#0F0F12; color:#d7d7e0}
.footer a{color:#fff}