:root { --ink:#20100b; --cream:#fff5df; --paper:#fffaf1; --orange:#f26a21; --yellow:#ffc928; --red:#c7241d; --red-dark:#8f1714; --green:#188653; --line:#ead8bd; --muted:#75665a; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Avenir Next", "Segoe UI", Arial, sans-serif; }
body.no-scroll { overflow:hidden; }
button, input { font:inherit; }
button { touch-action:manipulation; }
a { color:inherit; text-decoration:none; }
[hidden] { display:none !important; }
.site-header { height:86px; padding:0 max(24px, calc((100vw - 1240px)/2)); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(143,23,20,.1); background:rgba(255,250,241,.94); box-shadow:0 8px 30px rgba(83,35,12,.05); backdrop-filter:blur(16px); position:sticky; top:0; z-index:30; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-logo-wrap { min-width:148px; height:58px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.brand-logo { display:block; max-width:148px; max-height:56px; width:auto; height:auto; object-fit:contain; }
.brand-caption b,.brand-caption small { display:block; }
.brand-caption b { font-size:13px; text-transform:uppercase; letter-spacing:.08em; }
.brand-caption small { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.12em; margin-top:3px; }
.header-whatsapp { color:white; background:var(--green); border:1px solid var(--green); box-shadow:0 8px 22px rgba(24,134,83,.18); border-radius:999px; padding:11px 18px; font-weight:800; }
.hero { min-height:700px; overflow:hidden; display:grid; grid-template-columns:1.06fr .94fr; align-items:center; padding:72px max(24px, calc((100vw - 1240px)/2)); background:radial-gradient(circle at 82% 22%,rgba(255,201,40,.55) 0,transparent 27%),radial-gradient(circle at 68% 80%,rgba(242,106,33,.18),transparent 27%),linear-gradient(135deg,#fff9ea 0%,#f8e3c5 100%); position:relative; }
.hero:before { content:""; position:absolute; width:260px; height:260px; border-radius:50%; background:var(--red); opacity:.07; left:-110px; bottom:-100px; }
.eyebrow { display:inline-block; color:var(--red); font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.17em; }
.hero h1 { font-size:clamp(52px,6.3vw,92px); line-height:.93; letter-spacing:-.065em; margin:20px 0 28px; max-width:760px; }
.hero h1 em { color:var(--red); font-style:normal; }
.hero-copy>p { max-width:620px; color:#5d574e; font-size:20px; line-height:1.6; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin:34px 0; }
.primary-button,.secondary-button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; border-radius:14px; padding:0 22px; font-weight:800; }
.primary-button { color:white; background:linear-gradient(135deg,var(--red),var(--red-dark)); box-shadow:0 10px 22px rgba(143,23,20,.16); }
.secondary-button { background:#fffaf0; border:1px solid #d9bfa2; }
.hero-facts { display:flex; flex-wrap:wrap; gap:22px; padding-top:10px; }
.hero-facts span { color:var(--muted); font-size:13px; }
.hero-facts strong { color:var(--ink); display:block; font-size:20px; margin-bottom:2px; }
.hero-visual { height:540px; position:relative; }
.hero-orbit { position:absolute; border-radius:50%; border:1px solid rgba(190,45,33,.22); }
.orbit-one { width:430px; height:430px; left:8%; top:8%; }
.orbit-two { width:310px; height:310px; left:22%; top:20%; border-color:rgba(24,23,19,.14); }
.hero-logo-card { position:absolute; right:1%; top:1%; width:205px; min-height:110px; display:grid; place-items:center; padding:18px; border-radius:24px; background:rgba(255,255,255,.9); box-shadow:0 18px 45px rgba(91,35,13,.14); transform:rotate(4deg); z-index:3; }
.hero-logo-card img { max-width:100%; max-height:78px; object-fit:contain; }
.hero-pack { width:220px; height:300px; position:absolute; border-radius:20px 20px 38px 38px; border-top:8px solid var(--yellow); padding:30px 24px; color:white; box-shadow:0 32px 70px rgba(55,31,14,.25); display:flex; flex-direction:column; justify-content:center; text-align:center; transform:rotate(-8deg); }
.hero-pack span { font-size:14px; text-transform:uppercase; letter-spacing:.15em; }
.hero-pack b { font-size:36px; letter-spacing:-.05em; margin:14px 0; }
.hero-pack small { opacity:.75; }
.pack-one { left:17%; top:23%; background:linear-gradient(145deg,#392017,#180d09); }
.pack-two { left:49%; top:12%; transform:rotate(10deg); background:linear-gradient(145deg,var(--orange),var(--red-dark)); }
.hero-seed { width:24px; height:50px; border-radius:70% 30% 70% 30%; background:#24211d; position:absolute; box-shadow:inset 5px 0 #efe4d1; }
.seed-one{left:12%;top:12%;transform:rotate(40deg)} .seed-two{right:4%;bottom:18%;transform:rotate(-15deg)} .seed-three{left:47%;bottom:3%;transform:rotate(82deg)}
.catalog-section { max-width:1288px; margin:auto; padding:96px 24px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:34px; }
.section-heading h2,.qr-section h2 { font-size:clamp(38px,4vw,58px); letter-spacing:-.05em; margin:10px 0 0; }
.section-heading p { color:var(--muted); max-width:400px; line-height:1.6; }
.catalog-tools { display:flex; align-items:center; gap:18px; margin-bottom:30px; position:sticky; top:90px; z-index:20; background:rgba(255,250,241,.96); padding:12px 0; }
.search { min-width:280px; height:48px; display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:14px; padding:0 15px; background:white; }
.search span { font-size:25px; }
.search input { border:0; outline:0; width:100%; background:transparent; }
.categories { display:flex; gap:8px; overflow:auto; padding-bottom:2px; }
.categories button { border:1px solid var(--line); background:white; border-radius:999px; padding:12px 17px; white-space:nowrap; cursor:pointer; font-weight:700; }
.categories button.active { background:var(--red); border-color:var(--red); color:white; }
.product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.product-card { border:1px solid var(--line); border-radius:22px; overflow:hidden; background:white; box-shadow:0 5px 20px rgba(86,42,14,.035); transition:.25s ease; }
.product-card:hover { transform:translateY(-4px); border-color:#e2b67e; box-shadow:0 20px 50px rgba(105,48,19,.12); }
.product-image { height:220px; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 30%,#fff6d7,transparent 34%),linear-gradient(145deg,#f2e5ce,#e7d3b3); }
.product-initials { width:96px; height:126px; display:grid; place-items:center; background:linear-gradient(145deg,var(--orange),var(--red)); color:white; border-radius:10px 10px 22px 22px; font-size:30px; font-weight:900; box-shadow:0 18px 35px rgba(102,43,16,.22); }
.product-image small { color:#8b6d4c; margin-top:14px; }
.category-label { position:absolute; left:12px; top:12px; background:rgba(255,255,255,.88); border-radius:999px; padding:6px 10px; font-size:11px; font-weight:800; }
.product-body { padding:19px; }
.product-body h3 { min-height:50px; font-size:18px; line-height:1.35; margin:0 0 10px; }
.product-body p { color:var(--muted); font-size:13px; }
.unit-switch { display:grid; grid-template-columns:1fr 1fr; background:#f4efe7; border-radius:10px; padding:3px; margin:16px 0 10px; }
.unit-switch button { border:0; background:transparent; border-radius:8px; padding:8px; cursor:pointer; color:var(--muted); font-weight:700; }
.unit-switch button.active { background:white; color:var(--ink); box-shadow:0 2px 8px rgba(0,0,0,.08); }
.add-button { width:100%; border:0; border-radius:12px; background:linear-gradient(135deg,var(--red),var(--red-dark)); color:white; padding:13px; cursor:pointer; font-weight:800; display:flex; justify-content:space-between; }
.add-button span { color:var(--yellow); }
.empty-state { padding:60px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:20px; }
.qr-section { max-width:1240px; margin:0 auto 96px; padding:62px; border-radius:30px; background:linear-gradient(135deg,var(--red-dark),#4e110f); color:white; box-shadow:0 28px 70px rgba(100,24,18,.18); display:flex; align-items:center; justify-content:space-between; gap:40px; }
.qr-section>div:first-child { max-width:650px; }
.qr-section p { color:#c9c2b8; line-height:1.65; font-size:18px; }
.qr-card { background:var(--cream); border-radius:22px; padding:16px; color:var(--ink); display:grid; place-items:center; gap:8px; }
.qr-card img { width:170px; height:170px; }
.qr-card span { font-size:12px; font-weight:800; }
footer { max-width:1240px; margin:auto; padding:35px 24px 110px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
footer p{color:var(--muted)} footer a{color:var(--green);font-weight:800}
.cart-fab { position:fixed; right:24px; bottom:24px; z-index:40; border:0; border-radius:999px; background:var(--green); color:white; padding:14px 17px 14px 22px; box-shadow:0 15px 40px rgba(17,90,56,.3); display:flex; align-items:center; gap:14px; cursor:pointer; font-weight:800; }
.cart-fab b { background:white; color:var(--green); width:30px; height:30px; display:grid; place-items:center; border-radius:50%; }
.cart-overlay { position:fixed; inset:0; background:rgba(0,0,0,.42); z-index:60; display:flex; justify-content:flex-end; }
.cart-backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; padding:0; background:transparent; cursor:default; }
.cart-drawer { position:relative; z-index:1; width:min(480px,100%); height:100%; background:var(--paper); padding:28px; display:flex; flex-direction:column; box-shadow:-20px 0 60px rgba(0,0,0,.15); }
.cart-title { display:flex; align-items:start; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:20px; }
.cart-title h2 { font-size:36px; margin:5px 0 0; }
.cart-title>button { border:0; background:transparent; font-size:38px; cursor:pointer; }
.cart-lines { flex:1; overflow:auto; padding:12px 0; }
.cart-line { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:16px 0; border-bottom:1px solid var(--line); }
.cart-line b,.cart-line span { display:block; }
.cart-line span { color:var(--muted); font-size:12px; margin-top:5px; }
.quantity { display:flex; align-items:center; gap:10px; }
.quantity button { width:32px; height:32px; border:1px solid var(--line); background:white; border-radius:9px; cursor:pointer; }
.cart-hint { color:var(--muted); font-size:13px; }
.whatsapp-order { display:block; text-align:center; background:var(--green); color:white; border-radius:14px; padding:16px; font-weight:900; }
.noscript { position:fixed; left:12px; right:12px; bottom:12px; z-index:100; padding:14px; border-radius:12px; background:white; box-shadow:0 10px 30px rgba(0,0,0,.2); }
@media (max-width:1050px){.product-grid{grid-template-columns:repeat(3,1fr)}.hero{grid-template-columns:1fr}.hero-visual{display:none}}
@media (max-width:760px){.site-header{height:72px;padding:0 16px}.brand-logo-wrap{min-width:112px;height:48px}.brand-logo{max-width:112px;max-height:46px}.brand-caption{display:none}.header-whatsapp{font-size:0;padding:10px 13px}.header-whatsapp:after{content:"WhatsApp";font-size:13px}.hero{min-height:auto;padding:64px 20px 55px}.hero h1{font-size:53px}.hero-copy>p{font-size:17px}.hero-facts{gap:18px}.catalog-section{padding:65px 14px}.section-heading{display:block}.catalog-tools{display:block;top:72px;padding:10px 0}.search{width:100%;min-width:0;margin-bottom:10px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.product-image{height:165px}.product-body{padding:13px}.product-body h3{font-size:15px;min-height:61px}.unit-switch{grid-template-columns:1fr}.unit-switch button{font-size:12px}.qr-section{margin:0 14px 65px;padding:32px 22px;display:block}.qr-card{width:202px;margin:28px auto 0}footer{display:block;padding-bottom:100px}.cart-drawer{padding:22px}.cart-fab{right:14px;bottom:14px}}
@media (max-width:390px){.product-grid{grid-template-columns:1fr}.product-image{height:210px}.product-body h3{min-height:auto}}