/* =========================================================
       01. VARIÁVEIS / RESET
    ========================================================= */
    :root {
        --cream: #eee3d2;
        --paper: #f4eadb;
        --paper-dark: #dfcfba;
        --wine: #241521;
        --wine-2: #382038;
        --brown: #3b2923;
        --gold: #b49a70;
        --text: #342923;
        --white: #fffaf2;
        --max: 1180px;
        --serif: "Cormorant Garamond", Georgia, serif;
        --sans: "Montserrat", Arial, sans-serif;
      }
  
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
  
      html {
        scroll-behavior: smooth;
      }
  
      body {
        background: var(--cream);
        color: var(--text);
        font-family: var(--sans);
        line-height: 1.6;
      }
  
      img {
        display: block;
        width: 100%;
      }
  
      a {
        color: inherit;
        text-decoration: none;
      }
  
      button {
        font: inherit;
      }
  
      .container {
        width: min(calc(100% - 40px), var(--max));
        margin: 0 auto;
      }
  
      .eyebrow {
        font-size: .72rem;
        letter-spacing: .35em;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 12px;
      }
  
      .section-title {
        font-family: var(--serif);
        font-size: clamp(2.2rem, 4vw, 4rem);
        font-weight: 500;
        line-height: .95;
      }
  
      .section-subtitle {
        margin-top: 12px;
        opacity: .78;
      }
  
      /* =========================================================
         02. HEADER / NAVEGAÇÃO
      ========================================================= */
      header {
        position: absolute;
        z-index: 20;
        inset: 0 0 auto;
        color: var(--white);
      }
  
      .nav {
        width: min(calc(100% - 40px), 1240px);
        margin: 0 auto;
        height: 78px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
  
      .logo-mini {
        font-family: var(--serif);
        font-size: 1.7rem;
        letter-spacing: .12em;
      }
  
      .nav-links {
        display: flex;
        gap: 28px;
        font-size: .72rem;
        letter-spacing: .04em;
      }
  
      .nav-links a {
        opacity: .9;
        transition: .25s;
      }
  
      .nav-links a:hover {
        opacity: 1;
        color: var(--gold);
      }
  
      .nav-icons {
        display: flex;
        gap: 14px;
        font-size: .85rem;
      }
  
      .menu-btn {
        display: none;
        border: 0;
        background: none;
        color: white;
        font-size: 1.4rem;
        cursor: pointer;
      }
  
      /* =========================================================
         03. HERO
      ========================================================= */
      .hero {
        min-height: 720px;
        display: grid;
        place-items: center;
        position: relative;
        overflow: hidden;
        color: var(--white);
        background:
          linear-gradient(90deg, rgba(15,8,12,.92), rgba(30,14,20,.54), rgba(15,8,12,.72)),
          radial-gradient(circle at 20% 70%, #76533a 0 5%, transparent 25%),
          radial-gradient(circle at 75% 40%, #4b2d29 0 4%, transparent 26%),
          linear-gradient(135deg, #1b1213, #49312a 55%, #171016);
      }
  
      /* Coloque uma foto em images/hero.jpg para substituir o fundo. */
      .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url("images/hero.png") center/cover no-repeat;
        opacity: .52;
        z-index: 0;
      }
  
      .hero-content {
        position: relative;
        z-index: 1;
        width: min(900px, calc(100% - 40px));
        text-align: center;
        padding-top: 50px;
      }
  
      .moon {
        font-size: 2rem;
        margin-bottom: 10px;
        color: var(--cream);
      }
  
      .brand {
        font-family: var(--serif);
        font-size: clamp(4rem, 10vw, 8rem);
        font-weight: 400;
        letter-spacing: .06em;
        line-height: .75;
      }
  
      .brand-small {
        margin-top: 20px;
        letter-spacing: .42em;
        text-transform: uppercase;
        font-size: .8rem;
      }
  
      .hero-copy {
        font-family: var(--serif);
        font-size: clamp(1.1rem, 2vw, 1.45rem);
        font-style: italic;
        margin: 25px auto 30px;
        max-width: 450px;
      }
  
      .buttons {
        display: flex;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
      }
  
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 46px;
        padding: 0 25px;
        border-radius: 30px;
        border: 1px solid rgba(255,255,255,.75);
        transition: .25s;
        cursor: pointer;
        font-size: .76rem;
        letter-spacing: .03em;
      }
  
      .btn-primary {
        background: #493044;
        border-color: #493044;
        color: white;
      }
  
      .btn:hover {
        transform: translateY(-2px);
      }
  
      /* =========================================================
         04. SOBRE A ARUANÃ
      ========================================================= */
      .about {
        padding: 100px 0;
        background: var(--paper);
      }
  
      .about-grid {
        display: grid;
        grid-template-columns: 1.1fr .9fr;
        gap: 70px;
        align-items: center;
      }
  
      .about-text p {
        max-width: 570px;
        margin-top: 22px;
        font-family: var(--serif);
        font-size: 1.25rem;
      }
  
      /* .illustration {
        min-height: 340px;
        border: 1px solid rgba(75,52,40,.18);
        position: relative;
        overflow: hidden;
        background:
          radial-gradient(circle at 70% 45%, rgba(180,154,112,.22), transparent 20%),
          linear-gradient(145deg, transparent, rgba(100,65,50,.08));
      }
  
      .illustration::after {
        content: "☾";
        position: absolute;
        right: 18%;
        top: 20%;
        font-family: var(--serif);
        font-size: 7rem;
        opacity: .2;
      }
  
      .illustration::before {
        content: "ARUANÃ";
        position: absolute;
        bottom: 30px;
        left: 30px;
        font-family: var(--serif);
        font-size: 3rem;
        letter-spacing: .15em;
        opacity: .15;
      } */

      .illustration {
        min-height: 340px;
        overflow: hidden;
        border: 1px solid rgba(75, 52, 40, .18);
        position: relative;
      }
      
      .illustration img {
        width: 100%;
        height: 100%;
        min-height: 340px;
        display: block;
        object-fit: cover;
        object-position: center;
      }
  
      /* =========================================================
         05. CATEGORIAS
      ========================================================= */
      .categories {
        padding: 30px 0 100px;
        background: var(--paper);
      }
  
      .center-heading {
        text-align: center;
        margin-bottom: 40px;
      }
  
      .category-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
      }
  
      .category {
        min-height: 280px;
        position: relative;
        display: flex;
        align-items: end;
        padding: 25px;
        color: white;
        overflow: hidden;
        background: linear-gradient(135deg, #46332c, #1f1820);
      }
  
      .category::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--bg);
        background-size: cover;
        background-position: center;
        opacity: .65;
        transition: .4s;
      }
  
      .category:hover::before {
        transform: scale(1.05);
      }
  
      .category-content {
        position: relative;
        z-index: 1;
      }
  
      .category h3 {
        font-family: var(--serif);
        font-size: 1.8rem;
        font-weight: 500;
      }
  
      .category span {
        font-size: .7rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        opacity: .8;
      }
  
      /* =========================================================
         06. CATÁLOGO
      ========================================================= */
      .catalog {
        padding: 100px 0;
        background: var(--paper);
      }
  
      .filters {
        display: flex;
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
        margin: 35px 0;
      }
  
      .filter {
        border: 1px solid rgba(52,41,35,.18);
        background: transparent;
        border-radius: 30px;
        padding: 9px 17px;
        cursor: pointer;
        font-size: .7rem;
      }
  
      .filter.active,
      .filter:hover {
        background: var(--wine-2);
        color: white;
        border-color: var(--wine-2);
      }
  
      .product-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
      }
  
      .product {
        background: #e6d7c3;
        border: 1px solid rgba(52,41,35,.09);
        overflow: hidden;
      }
  
      /* .product-image {
        aspect-ratio: 1 / .86;
        display: grid;
        place-items: center;
        font-family: var(--serif);
        font-size: 2rem;
        color: rgba(255,255,255,.9);
        background:
          radial-gradient(circle at 50% 45%, rgba(180,154,112,.4), transparent 28%),
          linear-gradient(135deg, #5b4035, #261a20);
      } */

      .product-image {
        aspect-ratio: 1 / .86;
        display: grid;
        place-items: center;
        background:
          radial-gradient(circle at 50% 45%, rgba(180,154,112,.4), transparent 28%),
          linear-gradient(135deg, #5b4035, #261a20);
        overflow: hidden;
      }

      .product-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
      }
  
      .product-body {
        padding: 18px;
      }
  
      .product h3 {
        font-family: var(--serif);
        font-size: 1.35rem;
        font-weight: 600;
      }
  
      .product p {
        font-size: .7rem;
        min-height: 44px;
        margin: 6px 0 10px;
        opacity: .8;
      }
  
      .price {
        font-family: var(--serif);
        font-size: 1.15rem;
        margin-bottom: 13px;
      }
  
      .product-btn {
        display: inline-flex;
        border: 1px solid rgba(52,41,35,.4);
        padding: 9px 13px;
        font-size: .66rem;
        border-radius: 5px;
        transition: .2s;
      }
  
      .product-btn:hover {
        background: var(--wine-2);
        color: white;
      }
  
      /* =========================================================
         07. EXPERIÊNCIAS / MOMENTOS
      ========================================================= */
      .moments {
        padding: 100px 0;
        color: white;
        background:
          linear-gradient(rgba(20,11,17,.8), rgba(20,11,17,.8)),
          radial-gradient(circle at 25% 50%, #4e3242, transparent 30%),
          linear-gradient(135deg, #181219, #5c3d32);
      }
  
      .moment-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 10px;
        margin-top: 40px;
      }
  
      .moment {
        min-height: 310px;
        padding: 18px;
        border: 1px solid rgba(255,255,255,.3);
        display: flex;
        flex-direction: column;
        justify-content: end;
        position: relative;
        overflow: hidden;
        background: linear-gradient(145deg, #5b4539, #241822);
      }
  
      .moment::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--bg);
        background-size: cover;
        background-position: center;
        opacity: .35;
      }
  
      .moment-content {
        position: relative;
        z-index: 1;
      }
  
      .moment h3 {
        font-family: var(--serif);
        font-size: 1.35rem;
        font-weight: 500;
        margin-bottom: 6px;
      }
  
      .moment p {
        font-size: .65rem;
        opacity: .8;
      }
  
      .moment a {
        margin-top: 15px;
        font-size: .65rem;
      }
  
      /* =========================================================
         08. MANIFESTO
      ========================================================= */
      .manifesto {
        padding: 110px 0;
        background: var(--paper);
        text-align: center;
      }
  
      .manifesto-inner {
        max-width: 700px;
        margin: auto;
      }
  
      .manifesto h2 {
        font-family: var(--serif);
        font-size: clamp(2.4rem, 5vw, 4.5rem);
        font-weight: 500;
        line-height: 1;
      }
  
      .manifesto p {
        font-family: var(--serif);
        font-size: 1.25rem;
        margin-top: 25px;
      }
  
      /* =========================================================
         09. ONDE ENCONTRAR
      ========================================================= */
      .where {
        padding: 85px 0;
        background: var(--paper);
      }
  
      .places {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-top: 45px;
        text-align: center;
      }
  
      .place {
        padding: 20px;
        border-top: 1px solid rgba(52,41,35,.18);
      }
  
      .place-icon {
        font-size: 1.8rem;
        margin-bottom: 12px;
      }
  
      .place h3 {
        font-family: var(--serif);
        font-size: 1.35rem;
      }
  
      .place p {
        font-size: .68rem;
        opacity: .75;
      }
  
      /* =========================================================
         10. RODAPÉ
      ========================================================= */
      footer {
        background: var(--wine);
        color: var(--cream);
        padding: 65px 0 30px;
        text-align: center;
      }
  
      .footer-logo {
        font-family: var(--serif);
        font-size: 3rem;
        letter-spacing: .12em;
      }
  
      .footer-tagline {
        font-family: var(--serif);
        font-style: italic;
        margin: 5px 0 30px;
      }
  
      .footer-links {
        display: flex;
        justify-content: center;
        gap: 25px;
        font-size: .7rem;
        margin-bottom: 40px;
      }
  
      .footer-links a:hover {
        color: var(--gold);
      }
  
      .copyright {
        padding-top: 25px;
        border-top: 1px solid rgba(255,255,255,.12);
        font-size: .6rem;
        opacity: .6;
      }
  
      /* =========================================================
         11. RESPONSIVO
      ========================================================= */
      @media (max-width: 900px) {
        .nav-links {
          display: none;
        }
  
        .menu-btn {
          display: block;
        }
  
        .about-grid {
          grid-template-columns: 1fr;
        }
  
        .category-grid,
        .product-grid {
          grid-template-columns: repeat(2, 1fr);
        }
  
        .moment-grid {
          grid-template-columns: repeat(2, 1fr);
        }
  
        .places {
          grid-template-columns: repeat(2, 1fr);
        }
      }
  
      @media (max-width: 600px) {
        .hero {
          min-height: 650px;
        }
  
        .brand {
          font-size: 4rem;
        }
  
        .category-grid,
        .product-grid,
        .moment-grid,
        .places {
          grid-template-columns: 1fr;
        }
  
        .category {
          min-height: 220px;
        }
  
        .moment {
          min-height: 230px;
        }
  
        .about,
        .catalog,
        .moments,
        .manifesto,
        .where {
          padding: 70px 0;
        }
  
        .footer-links {
          flex-wrap: wrap;
        }

        /* Filtro do catálogo */
        .product.hide-product {
            display: none !important;
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }
      }