@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');
:root { --ink:#f3f1e8; --muted:#a7aaa0; --bg:#0a0d0c; --panel:#111614; --line:#2a322d; --gold:#d9ae62; --gold-soft:#f0d39b; --danger:#e77c61; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; padding:1px; min-height:100vh; color:var(--ink); background:var(--bg); font-family:'Manrope',sans-serif; } body::before { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.18; background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:56px 56px; } a { color:inherit; text-decoration:none; } button,input,select,textarea { font:inherit; } button { cursor:pointer; } img { display:block; width:100%; object-fit:cover; } .wrap { width:min(1240px,calc(100% - 48px)); margin:auto; }
.topbar { padding:22px 0; border-bottom:1px solid var(--line); background:rgba(10,13,12,.75); backdrop-filter:blur(18px); } .nav { display:flex; align-items:center; justify-content:space-between; gap:28px; } .brand { display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:-.04em; } .brand-mark { display:grid; place-items:center; width:38px; height:38px; color:#111; background:var(--gold); font:700 1.1rem 'Playfair Display',serif; } .nav-links { display:flex; gap:30px; color:var(--muted); font-size:.78rem; font-weight:700; } .nav-links a:hover,.back:hover { color:var(--gold-soft); } .nav-actions { display:flex; align-items:center; gap:10px; } .icon-button { position:relative; display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--line); color:var(--ink); background:transparent; border-radius:50%; } .icon-button[href="cart.html"] { width:42px; } .icon-button:hover { border-color:var(--gold); color:var(--gold); } .cart-count { position:absolute; top:-5px; right:-4px; display:grid; place-items:center; width:18px; height:18px; color:#111; background:var(--gold); border-radius:50%; font-size:.65rem; font-weight:800; }
.whatsapp-button { position:fixed; right:22px; bottom:22px; z-index:30; display:grid; place-items:center; width:48px; height:48px; border:1px solid #25d366; border-radius:50%; color:#fff; background:#128c7e; font-size:1.45rem; box-shadow:0 8px 24px rgba(0,0,0,.3); } .whatsapp-button:hover { color:#fff; background:#25d366; transform:translateY(-2px); } .whatsapp-button::after { content:attr(data-number); position:absolute; right:58px; bottom:8px; width:max-content; padding:8px 10px; border:1px solid var(--line); color:var(--ink); background:var(--panel); font:500 .68rem 'DM Mono',monospace; opacity:0; pointer-events:none; transition:opacity .2s; } .whatsapp-button:hover::after { opacity:1; }
.email-button { position:fixed; right:22px; bottom:82px; z-index:30; display:grid; place-items:center; width:48px; height:48px; border:1px solid #8db8d8; border-radius:50%; color:#fff; background:#28618a; font-size:1.25rem; box-shadow:0 8px 24px rgba(0,0,0,.3); } .email-button:hover { color:#fff; background:#3d83b5; transform:translateY(-2px); } .email-button::after { content:attr(data-email); position:absolute; right:58px; bottom:8px; width:max-content; padding:8px 10px; border:1px solid var(--line); color:var(--ink); background:var(--panel); font:500 .68rem 'DM Mono',monospace; opacity:0; pointer-events:none; transition:opacity .2s; } .email-button:hover::after { opacity:1; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:9px; border:1px solid transparent; border-radius:2px; padding:14px 20px; color:#101311; background:var(--gold); font-size:.75rem; font-weight:800; transition:transform .2s,background .2s; } .button:hover { transform:translateY(-2px); background:var(--gold-soft); } .button-ghost { color:var(--ink); border-color:var(--line); background:transparent; } .button-ghost:hover { border-color:var(--gold); background:transparent; }
.page-hero { padding:100px 0 65px; border-bottom:1px solid var(--line); } .page-hero h1 { max-width:800px; margin:18px 0 20px; font:700 clamp(3.3rem,8vw,7.5rem)/.9 'Playfair Display',serif; letter-spacing:-.075em; } .page-hero h1 em { color:var(--gold); font-style:normal; } .page-hero p { max-width:500px; color:var(--muted); line-height:1.8; } .page-label { color:var(--gold); font:500 .68rem 'DM Mono',monospace; letter-spacing:.16em; text-transform:uppercase; }
.page-section { padding:75px 0 120px; } .two-col { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; } .panel { padding:30px; border:1px solid var(--line); background:var(--panel); } .panel h2,.copy h2 { margin:0 0 18px; font:600 clamp(2rem,4vw,4rem)/.98 'Playfair Display',serif; letter-spacing:-.06em; } .copy p,.panel p { color:var(--muted); font-size:.88rem; line-height:1.75; } .rule-list { margin:30px 0 0; border-top:1px solid var(--line); } .rule { display:grid; grid-template-columns:50px 1fr; gap:12px; padding:18px 0; border-bottom:1px solid var(--line); } .rule span { color:var(--gold); font:500 .68rem 'DM Mono',monospace; } .rule strong { font-size:.85rem; } .rule p { grid-column:2; margin:0; }
.catalog { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .product { overflow:hidden; border:1px solid var(--line); background:var(--panel); transition:transform .3s,border-color .3s; } .product:hover { transform:translateY(-6px); border-color:var(--gold); } .product img { height:270px; filter:saturate(.7); transition:filter .4s,transform .4s; } .product:hover img { filter:saturate(1); transform:scale(1.04); } .product-body { padding:20px; } .product-type { color:var(--gold); font:500 .63rem 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; } .product h3 { margin:10px 0 8px; font-size:1.2rem; } .product p { min-height:50px; margin:0 0 18px; color:var(--muted); font-size:.78rem; line-height:1.55; } .product-foot { display:flex; justify-content:space-between; padding-top:14px; border-top:1px solid var(--line); } .price { color:var(--gold-soft); font:500 .8rem 'DM Mono',monospace; }
.form { display:grid; gap:15px; } .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; } .field { display:grid; gap:7px; } .field-full { grid-column:1/-1; } label { color:var(--muted); font-size:.67rem; font-weight:800; letter-spacing:.04em; } input,select,textarea { width:100%; border:1px solid var(--line); border-radius:0; padding:13px; color:var(--ink); background:#0b100e; font-size:.82rem; } textarea { min-height:115px; resize:vertical; } input:focus,select:focus,textarea:focus { outline:2px solid rgba(217,174,98,.4); border-color:var(--gold); } .status { margin-top:22px; padding:20px; border:1px solid rgba(217,174,98,.45); color:var(--gold-soft); background:#18140d; font-size:.82rem; line-height:1.6; }
footer { padding:30px 0; border-top:1px solid var(--line); color:var(--muted); font-size:.72rem; } .footer-row { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; } footer .brand { color:var(--ink); }
@media (max-width:850px) { .nav-links { display:none; } .catalog,.two-col { grid-template-columns:1fr 1fr; gap:14px; } .two-col { gap:35px; } } @media (max-width:560px) { .wrap { width:calc(100% - 30px); } .nav-actions { margin-left:auto; } .page-hero { padding:70px 0 50px; } .page-hero h1 { font-size:4rem; } .catalog,.two-col,.form-grid { grid-template-columns:1fr; } .page-section { padding:55px 0 80px; } .panel { padding:22px; } .field-full { grid-column:auto; } .button { width:100%; } }