:root{
      --bg:#faf7f2;         /* areia clara */
      --paper:#fffaf2;      /* tom de papel */
      --ink:#1c1c1c;        /* texto principal */
      --muted:#525252;      /* texto secundário */
      --brand:#3c5a40;      /* verde musgo */
      --brand-2:#6b4f3a;    /* marrom */
      --accent:#d7c7b2;     /* bege */
      --ring: rgba(60,90,64,.35);
      --radius: 16px;
      --shadow: 0 8px 28px rgba(0,0,0,.08);
    }
    * { 
      box-sizing: border-box;
     }
    html, body { 
      height: 100%;
     }
    body{
      margin:0;
      background:var(--bg);
       color:var(--ink);
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      line-height:1.6;
    }
    a{ color:var(--brand); 
      text-decoration:none;
     }
    a:hover{ text-decoration:underline; }

    /* Header */
    .container{
       width: min(1100px, 92%);
      margin-inline:auto;
     }
    header{
      position: sticky;
      top:0; z-index:50;
      backdrop-filter: blur(6px);
      background: color-mix(in oklab, var(--bg) 85%, white);
      border-bottom: 1px solid rgba(0,0,0,.06);
    }
    .nav{
      display:flex; 
      align-items:center;
      justify-content:space-between;
      gap:24px; padding:14px 0; 
      }
    .brand{
       display:flex;
       align-items:center; gap:12px; font-weight:700; letter-spacing:.4px; }
    .logo{
      width:40px;
      height:40px;
      border-radius:50%;
      display:grid; 
      place-items:center;
      color:white;
      font-family: "Playfair Display", serif; font-weight:700;
      font-size:20px;
      box-shadow: var(--shadow);
      margin-bottom: 30px;
      margin-right: 20px;
    }
    .nav a{
      font-weight:600;
      color:#2b2b2b;
      padding:8px 12px; border-radius:10px;
     }
    .nav a:hover{
      background:#ffffffaa;
      text-decoration:none;
       }
    .cta{
      background:var(--brand);
      color:white; 
      border-radius:12px;
      padding:10px 16px;
      box-shadow: var(--shadow);
     }
    .cta:hover{
     filter: brightness(1.05);
     }

    /* Hero */
    .hero{ 
      position:relative; 
      isolation:isolate; 
      background-position: center; 
      background-size: cover;
      background-image: url('img_04.jpg');
      transition: background-image 1s ease-in-out;
    }
    .hero-wrap{
      display:grid;
      grid-template-columns: 1.2fr .8fr; 
      gap:28px; 
      padding:42px 0 26px; 
      align-items:center; 
      color:white
     }
    .hero h1{
      font-family:"Playfair Display", serif; 
      font-weight:700; 
      line-height:1.15; 
      font-size: clamp(28px, 4.2vw, 56px); 
      margin:0 0 12px; 
    }
    .hero p{ color:white; 
      margin:0 0 18px; 
      max-width:60ch; 
    }
    .hero .actions{ display:flex; 
      gap:12px; 
      flex-wrap:wrap; 
    }
    .btn{
      display:inline-flex; 
      align-items:center; 
      justify-content:center; 
      gap:8px; 
      padding:12px 18px; 
      border-radius:14px; 
      font-weight:300; 
      border:1px solid rgba(0,0,0,.06); 
      background:forestgreen; 
      box-shadow: var(--shadow); 
      color: white;
    
    }
    .btn--primary{
      background:var(--brand); 
      color:white; 
      border-color: transparent; 
    }
    .hero-card{
      background:linear-gradient(160deg, #f4ede2 0%, #efe6d8 50%, #eadfcd 100%);
      border-radius: var(--radius);
      padding:14px; 
      box-shadow: var(--shadow);
      display:grid; grid-template-rows: auto 1fr; 
      align-items:stretch;
    }
    .hero-img{ 
      border-radius:12px; 
      overflow:hidden; 
      aspect-ratio: 4 / 3; 
      background:#ddd;
      position: relative;
    }
    .hero-img img{ 
      width:100%; 
      height:100%; 
      object-fit:cover; 
      display:block; 
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
    }
    .hero-img img.active {
      opacity: 1;
      animation: zoomSlide 4s ease-in-out;
    }
    @keyframes zoomSlide {
      0% {
        opacity: 0;
        transform: scale(1.1) translateX(-5%);
      }
      5% {
        opacity: 1;
      }
      95% {
        opacity: 1;
        transform: scale(1) translateX(0);
      }
      100% {
        opacity: 0;
        transform: scale(1) translateX(0);
      }
    }
    .hero-caption{
      padding:10px 6px 0; 
      font-size:.925rem; 
      color:#2b2b2b; 
      display:flex; 
      align-items:center; 
      justify-content:space-between; }

    /* Section */
    section{ 
      padding: 54px 0; 
    }
    .section-title{ 
      font-family:"Playfair Display", serif; font-size: clamp(22px, 3vw, 38px); 
      margin:0 0 16px; 
    }
    .section-sub{ 
      color:var(--muted); 
      margin:0 0 22px; }

    /* Filter */
    .filters{ 
      display:flex; 
      gap:10px; 
      flex-wrap:wrap; 
      margin-bottom:18px; 
    }
    .chip{
      padding:8px 12px; 
      border-radius:999px; 
      border:1px solid #dedede; 
      background:white; 
      font-weight:600; 
      cursor:pointer; 
    }
    .chip[aria-pressed="true"]{
       background:var(--brand); 
       color:white; 
       border-color:transparent; }

    /* Grid */
    .grid{ 
      display:grid; 
      grid-template-columns: repeat(4, 1fr); 
      gap:18px; 
    }
    .card{ 
      background:white; 
      border:1px solid #eee; 
      border-radius:14px; 
      overflow:hidden; 
      box-shadow: var(--shadow); 
      display:flex; 
      flex-direction:column; 
    }
    .card figure a{
      display:block; 
      width:100%; 
      height:100%; 
    }
    .card figure a:hover img{
      transform: scale(1.05); 
      transition: transform 0.3s ease; 
    }
    .card img{ 
      width:100%; 
      height:100%; 
      object-fit:cover; 
      display:block; 
      transition: transform 0.3s ease; 
    }
    .card .content{ 
      padding:12px 14px 16px; 
      display:flex; 
      flex-direction:column; 
      gap:6px; 
    }
    .price{
      font-weight:700; 
      color:var(--brand-2); 
    }
    .buy{
      margin-top:8px; 
      display:flex; 
      align-items: center;
      justify-content: center;
      gap:8px; 
    }
    .buy .btn{ 
      flex:1;
    }


    .slider {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.slides img {
  width: 100%;
  display: none;
}

.slides img.active {
  display: block;
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 20px;
  border-radius: 50%;
  z-index: 10;
}

.arrow.left {
  left: 10px;
}

.arrow.right {
  right: 10px;
}

.arrow:hover {
  background: rgba(0,0,0,0.8);
}

    /* Sobre & contato */
    .two-col{
      display:grid; 
      grid-template-columns: 1.1fr .9fr; 
      gap:24px; 
    }
    .about{
      background: white; 
      border:1px solid #eee; 
      border-radius: var(--radius); 
      padding:22px; 
      box-shadow: var(--shadow);
    }
    form{
      display:grid; 
      gap:10px; 
      background: var(--paper); 
      padding:20px; 
      border-radius: var(--radius); 
      border:1px solid #eee; 
      box-shadow: var(--shadow);
    }
    input, textarea{
      font: inherit; 
      padding:12px 14px; 
      border-radius:12px; 
      border:1px solid #d8d8d8;
      outline:none; background:#fff; 
    }
    input:focus, textarea:focus{ 
      border-color: var(--brand); 
      box-shadow: 0 0 0 4px var(--ring); 
    }
    textarea{ 
      min-height:120px; 
      resize: vertical; 
    }
    .hint{ 
      color:var(--muted); 
      font-size:.9rem; 
    }

    /* Footer */
    footer{ 
      padding:32px 0 60px; 
      color: #5a5a5a; 
    }
    .foot{ 
      display:flex; 
      flex-wrap:wrap; 
      align-items:center; 
      justify-content:space-between; 
      gap:16px; 
      border-top:1px solid #e9e9e9; 
      padding-top:18px; }

    /* Responsive */
    @media (max-width: 1024px){
      .grid{ grid-template-columns: repeat(3, 1fr); }
      .hero-wrap{ grid-template-columns: 1fr; }
    }
    @media (max-width: 680px){
      .grid{ grid-template-columns: repeat(2, 1fr); }
      .two-col{ grid-template-columns: 1fr; }
      .nav a{ padding:8px 10px; }
      .brand strong{ display:none; }
    }
    @media (max-width: 420px){
      .grid{ grid-template-columns: 1fr; }
    }