:root{color-scheme:light;--bg:#fcf5eb;--panel:#fffaf3;--line:#ded4c6;--orange:#c46c25;--ink:#02384b;--muted:#3e5861;--display:"Playfair Display",Georgia,serif;--body:"DM Sans",Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.55}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid var(--orange);outline-offset:5px}
.skip{position:absolute;left:1rem;top:-5rem;padding:.6rem 1rem;background:var(--bg);z-index:3}
.skip:focus{top:1rem}
.wrap{width:min(1200px,calc(100% - 96px));margin-inline:auto}
.header{border-bottom:1px solid var(--line);background:#fcf5eb}
.bar,.footer{display:flex;align-items:center;justify-content:space-between;gap:24px}
.bar{min-height:78px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink)}
.brand-logo{width:66px;height:66px;object-fit:contain;border-radius:50%;display:block}
.brand span{font-weight:700;letter-spacing:.16em;font-size:.66rem}
nav{display:flex;gap:34px;color:var(--muted);font-size:.92rem}
nav a:hover,.footer a:hover{color:var(--orange)}
.button{display:inline-flex;justify-content:center;align-items:center;gap:13px;padding:11px 19px;border:1px solid transparent;border-radius:6px;font-weight:700;font-size:.9rem;white-space:nowrap}
.button.outline{color:#93450f;border-color:#9b4b13;background:#fcf5eb}
.button.outline:hover{background:#f2e1ce}
.button.primary{background:#a44e12;color:#fffaf3}
.button.primary:hover{background:#98460e}
.hero {
  background: #f9eddd;
  border-bottom: 1px solid var(--line);
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: center;
  gap: clamp(24px, 5vw, 76px);
  padding-block: clamp(30px, 5vw, 66px);
}
.hero-copy { padding-block: 18px; }
h1,h2,h3{margin:0;font-family:var(--display);line-height:1.08}
.hero h1 {
  font: 800 clamp(52px, 6.5vw, 96px)/.96 "Bricolage Grotesque", var(--body);
  letter-spacing: -.06em;
}
.hero h1 em {
  display: block;
  color: #a44e12;
  font-style: normal;
}
.hero p {
  color: #34525c;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  max-width: 32ch;
  margin: 22px 0 26px;
}
.hero-visual {
  display: grid;
  justify-items: center;
  gap: clamp(14px, 2vw, 24px);
  border-radius: clamp(24px, 4vw, 46px);
  padding: clamp(16px, 3vw, 36px);
  border: 2px solid #c46c25;
  background: radial-gradient(ellipse at 50% 28%, #105469, #02384b 72%);
}
.hero-logo {
  display: block;
  width: min(74%, 270px);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 50%;
  background: #f9eddd;
}
.hero-produtos {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(6px, 1.1vw, 12px);
}
.hero-produtos img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.25;
  object-fit: cover;
  border: 1px solid #f4d2a9;
  border-radius: clamp(9px, 1.4vw, 16px);
}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.catalog{padding:67px 0 57px}
.catalog-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:26px;flex-wrap:wrap}
h2{font-size:clamp(36px,4vw,55px);letter-spacing:-.045em}
.filters{display:flex;flex-wrap:wrap;gap:7px}
.filters button{border:1px solid var(--line);border-radius:5px;padding:7px 13px;color:var(--muted);background:transparent;font-size:.86rem}
.filters button:hover,.filters button[aria-pressed="true"]{border-color:var(--orange);color:#93450f;background:#fae9d5}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.card[hidden]{display:none}
.card img{width:100%;height:auto;aspect-ratio:1.54;object-fit:cover;background:#0b3645;display:block}
.card-mockup img{aspect-ratio:1;object-fit:contain}
.angulos{display:flex;justify-content:center;gap:8px;padding:10px 8px 0}
.angulos button{width:clamp(40px,8vw,57px);padding:2px;background:var(--bg);border:1px solid var(--line);border-radius:5px}
.angulos button[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.angulos button img{border-radius:3px;object-fit:cover}
.card-body{padding:19px;flex:1;display:flex;flex-direction:column}
.card h3{font-size:clamp(22px,2.15vw,29px)}
.card p{color:var(--muted);font-size:.91rem;margin:9px 0 17px}
.card-action{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding-top:12px;margin-top:auto;color:#93450f}
.card-action a{padding:5px 9px;border-radius:5px;background:#fae9d5;font-weight:700;font-size:.89rem}
.card-action a:hover{background:#f4d5b5}
.note{margin:16px 0 0;color:var(--muted);font-size:.81rem}
.instagram{padding-block:clamp(28px,5vw,56px);border-top:1px solid var(--line)}
.instagram-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:20px}
.order{border-block:1px solid var(--line);background:#f3e7d6}
.order-inner{padding-block:52px;display:grid;grid-template-columns:1fr 1fr;gap:40px}
.order p,.order li span{color:var(--muted)}
.order ol{margin:0;padding-left:24px}
.order li{padding-left:5px;margin-bottom:12px}
.order li::marker{color:var(--orange);font-weight:700}
.order li span{display:block}
.footer{padding-block:27px;color:var(--muted);font-size:.86rem}
@media(max-width:900px){.wrap{width:calc(100% - 52px)}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:580px){.wrap{width:calc(100% - 36px)}.bar{min-height:66px;flex-wrap:wrap;gap:10px;padding-block:10px}.bar nav{order:3;width:100%;justify-content:center;flex-wrap:wrap;column-gap:clamp(14px,5vw,28px);row-gap:6px}.brand-logo{width:52px;height:52px}.brand span{font-size:.58rem}.catalog{padding-block:45px}.grid{gap:11px}.card-body{padding:12px}.card h3{font-size:21px}.card p{font-size:.82rem}.card-action{font-size:.82rem;flex-wrap:wrap}.card-action a{font-size:.8rem}.order-inner{grid-template-columns:1fr;gap:24px;padding-block:36px}.footer{gap:12px;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@media (max-width: 720px) {
  .hero-inner { grid-template-columns: 1fr; gap: 20px; }
  .hero-copy { padding: 0; }
  .hero h1 { font-size: clamp(44px, 10vw, 70px); }
  .hero-visual { width: min(100%, 460px); }
  .hero-logo { width: min(58%, 220px); }
}