:root{
    --bg: #FBF7F1;        /* creme claro */
    --panel: #F5EFE6;     /* faixa/boxes */
    --ink: #2F2A24;       /* texto principal */
    --muted: #6F675E;     /* texto suave */
    --line: #E8DED1;      /* divisórias */
    --cta: #E7DBC8;       /* botão claro */
    --cta-ink:#2F2A24;    /* texto do botão */
    --radius: 14px;
    --container: 1120px;
  }

  *{ box-sizing: border-box }
  html,body{ height:100% }
  body{
    margin:0;
    font-family:"Lato",system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
    color:var(--ink);
    background:var(--bg);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }

  .container{
    width:min(var(--container), 92%);
    margin-inline:auto;
  }

  /* HEADER */
  header{
    position:sticky; top:0; z-index:50;
    background:linear-gradient(#FBF7F1EE,#FBF7F1EE);
    backdrop-filter:saturate(1.2) blur(4px);
    border-bottom:1px solid var(--line);
  }
  .hdr{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 0;
  }
  .logo{
    display:flex; gap:12px; align-items:center; text-decoration:none; color:inherit;
  }
  .logo-mark{
    width:36px; height:36px; border-radius:50%;
    background:
      radial-gradient( circle at 55% 45%, #DCC9AE 0 42%, #CDB796 43% 100%);
    display:grid; place-items:center;
    box-shadow:0 2px 6px rgb(47 42 36 / 10%);
  }
  .logo-mark svg{ width:22px; height:22px; opacity:.9 }
  .brand{
    font-family:"Playfair Display",serif;
    font-weight:600; letter-spacing:.4px; font-size:20px;
  }

  nav ul{
    margin:0; padding:0; list-style:none;
    display:flex; gap:26px;
  }
  nav a{
    text-decoration:none; color:var(--ink); font-weight:500;
  }
  nav a:hover{ text-decoration:underline }

  .btn{
    appearance:none; border:0; cursor:pointer;
    padding:12px 20px;
    border-radius:999px;
    background:var(--cta);
    color:var(--cta-ink);
    font-weight:700; letter-spacing:.3px;
    box-shadow:0 2px 0 #e0d4c2 inset, 0 1px 0 rgba(0,0,0,.04);
  }
  .btn:hover{ transform:translateY(-1px) }
  .btn:active{ transform:translateY(0) }

  /* HERO */
  .hero{
    display:grid; gap:36px; align-items:center;
    grid-template-columns: 1.08fr .92fr;
    padding:48px 0 28px;
  }
  .hero h1{
    font-family:"Playfair Display",serif;
    font-size:clamp(36px, 5vw, 56px);
    line-height:1.08;
    font-weight:500;
    margin:0 0 22px;
    letter-spacing:.1px;
  }
  .hero p{ color:var(--muted); margin:0 0 26px; font-size:18px }
  .hero-figure{
    position:relative; width:100%;
    aspect-ratio: 4/3; border-radius:var(--radius);
    overflow:hidden; background:#F0E6D7;
    box-shadow:0 10px 30px rgb(47 42 36 / 12%);
  }
  .hero-figure img{
    width:100%; height:100%; object-fit:cover; display:block;
    filter:contrast(1.02) saturate(1.02);
  }

  /* FEATURES STRIP */
  .features{
    
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:24px; padding:22px 22px; margin:32px 0 18px;
  }
  .feat{
    display:grid; grid-template-columns:40px 1fr; align-items:start; gap:14px;
  }
  .feat h3{
    margin:0 0 4px; font-weight:700; font-size:18px;
  }
  .feat p{ margin:0; color:var(--muted) }

  .icon{
    width:60px; height:60px; border-radius:10px;
    display: flex; align-items: center; justify-content: center;
  }
  .icon svg{ width:22px; height:22px }

  /* ABOUT + PHOTO */
  .about{
    display:grid; grid-template-columns: 1.1fr .9fr; gap:28px;
    align-items:center; margin:34px 0 10px;
  }
  .about .panel{
    background:transparent;
    padding:0 6px 0 0;
  }
  .about h2, .collection h2{
    font-family:"Playfair Display",serif;
    font-size:32px; margin:0 0 10px; font-weight:600;
  }
  .about p{ margin:0; color:var(--muted); font-size:18px }
  .about-figure{
    border-radius:var(--radius); overflow:hidden;
    box-shadow:0 10px 26px rgb(47 42 36 / 12%);
    aspect-ratio: 4/3; background:#EFE4D3;
  }
  .about-figure img{ width:100%; height:100%; object-fit:cover; display:block }

  /* COLLECTION */
  .collection{ margin:28px 0 8px }
  .grid{
    display:grid; gap:18px; grid-template-columns:repeat(2,1fr); margin-top: 28px;
  }
  .card{
    background:#fff; border:1px solid var(--line);
    border-radius:16px; overflow:hidden;
    box-shadow:0 6px 16px rgb(47 42 36 / 10%);
  }
  .card .thumb{
    width:100%; aspect-ratio: 4/3; background:#fff; display: flex; justify-content: center; align-items: center;
  }
  .card .thumb img{ width:auto; height:100%; object-fit:cover; display:block; background:#fff }
  .card .body{ padding:14px 16px 18px }
  .card h4{ margin:0 0 2px; font-size:18px }
  .card .sub{ margin:0 0 10px; color:var(--muted) }
  .price-btn{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
  }
  .price{ font-weight:700 }
  .btn.soft{
    background:#F2E8D7; box-shadow:0 2px 0 #e6dac7 inset, 0 1px 0 rgba(0,0,0,.04);
    padding:10px 18px;
    text-decoration:none;
  }

  /* HOW TO BUY */
  .how{
    margin:24px 0 36px;
    display:grid; grid-template-columns: 1fr 2fr 1fr; gap:28px;
    align-items:start;
  }
  .how .panel{
    background:var(--panel); border:1px solid var(--line);
    border-radius:var(--radius); padding:20px;
  }
  .how h3{
    font-family:"Playfair Display",serif; font-size:26px; margin:0 0 40px;
  }
  ol.steps{ margin:0; padding-left:22px; }
  .steps li{ margin:6px 0 6px 0; color:var(--ink) }
  .steps small{ color:var(--muted) }
  .cta-row{ display:flex; gap:10px; margin-top:62px; flex-wrap:wrap }
  .whats{
    text-decoration:none; display:inline-flex; align-items:center; gap:10px;
  }

  /* FOOTER */
  footer{
    border-top:1px solid var(--line);
    padding:26px 0; margin-top:22px; color:var(--muted);
    font-size:14px;
  }
  .ftr{
    display:flex; align-items:center; justify-content:space-between; gap:18px;
    flex-wrap:wrap;
  }
  .ftr .links{ display:flex; gap:18px }
  .ftr a{ color:inherit; text-decoration:none }
  .ftr a:hover{ text-decoration:underline }

  /* helpers */
  .panel{ background:var(--panel); ; border-radius:var(--radius); padding:18px }
  .spacer{ height:14px }

  /*circulos*/
  .circle{
    display:inline-block;
    margin:5px;
  }

  /* RESPONSIVO */
  @media (max-width: 960px){
    .hero{ grid-template-columns:1fr; }
    .about{ grid-template-columns:1fr; }
    .how{ grid-template-columns:1fr }
    .features{ grid-template-columns:1fr; }
    nav{ display:none } /* simplifica no mobile, como no mockup */
    .grid{display:grid; gap:18px; grid-template-columns:1fr;}
    html, body {
      max-width: 100vw;
      overflow-x: hidden;
    }
  }