@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&family=Playfair+Display:wght@400;700&display=swap');
:root{
  --off-white:#F9F7F2;
  --champagne:#F7EBDD;
  --dourado:#D4AF37;
  --areia:#DCCBA4;
  --text:#4a4a4a;
  --max-width:1200px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: 'Montserrat', sans-serif;
  background:var(--off-white);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
.hero{
  height:80vh;
  min-height:520px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.6));
  overflow:hidden;
}
.hero__bg{
  position:absolute;
  inset:0;
  background-image: url('assets/fundo-cetim.jpg');
  background-size:cover;
  background-position:center;
  filter:contrast(0.95) saturate(0.9) blur(0.6px);
  z-index:0;
}
.container{width:90%;max-width:var(--max-width);margin:0 auto;position:relative;z-index:2}
.hero__content{
  text-align:center;
  font-family:'Playfair Display', serif;
}
.logo{
  width:320px;
  max-width:60vw;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,0.12));
  margin:0 auto 18px;
  display:block;
}
.cta{
  display:inline-block;
  background:transparent;
  border:1.5px solid rgba(0,0,0,0.06);
  padding:10px 18px;
  border-radius:24px;
  color:var(--text);
  font-weight:600;
  letter-spacing:0.02em;
  cursor:pointer;
  transition:all .25s ease;
}
.cta:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(0,0,0,0.08);
}
.categories{
  position:relative;
  margin-top:36px;
  display:flex;
  gap:18px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
}
.category{
  width:120px;height:120px;border-radius:50%;
  border:3px solid var(--dourado);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--champagne);
  box-shadow: 0 8px 22px rgba(12,12,12,0.06);
  transition:transform .35s ease, box-shadow .25s ease;
  cursor:pointer;
}
.category:hover{ transform:scale(1.06); box-shadow:0 18px 38px rgba(12,12,12,0.12); }
.category img{ width:100%; height:100%; object-fit:cover; display:block; }
.cat-label{
  position:absolute;font-family:'Montserrat';font-weight:600;font-size:13px;
  margin-top:80px;color:var(--text);
}
.shop-section{ padding:60px 0; background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.01) 100%); }
.section-title{ font-family:'Playfair Display'; font-size:28px; text-align:center; margin:0 0 26px; color:#2f2f2f; }
.look-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; align-items:start; }
.look-card{ background:var(--off-white); border-radius:10px; overflow:hidden; box-shadow:0 8px 26px rgba(12,12,12,0.06); }
.look-card img{ width:100%; height:320px; object-fit:cover; display:block; transition:transform .45s ease; }
.look-card:hover img{ transform:scale(1.03); }
.look-meta{ padding:12px 14px; font-size:14px; display:flex; justify-content:space-between; align-items:center; }
.products{ padding:50px 0; }
.prod-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:18px; }
.prod-card{ background:white;border-radius:10px;overflow:hidden; position:relative; text-align:center; padding-bottom:12px; }
.prod-media{ position:relative; height:260px; background:var(--champagne); }
.prod-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .28s ease; display:block; }
.prod-media img.detail{ opacity:0; }
.prod-card:hover .prod-media img.cover{ opacity:0; }
.prod-card:hover .prod-media img.detail{ opacity:1; }
.prod-info{ padding:12px 10px; font-size:14px; color:var(--text); }
.price{ font-weight:600; color:#222; }
footer{ padding:36px 0; text-align:center; }
.social{
  display:flex; gap:14px; justify-content:center; margin-bottom:12px;
}
.social a{ width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--champagne); border:1px solid rgba(0,0,0,0.04); }
.notify{
  display:inline-block;background:var(--dourado);color:white;padding:10px 16px;border-radius:22px;font-weight:600;cursor:pointer;border:none;
}
@media (max-width:720px){
  .logo{ width:220px }
  .category{ width:96px;height:96px; }
  .prod-media{ height:200px; }
}