/* =========================================================
   Design System — tokens, componentes e utilitários da página.
   Classes usam prefixo .nn- (referenciadas em index.html).
   ========================================================= */

  * { box-sizing: border-box; }
  /* scroll-padding compensa o header fixo (76px) ao pular por âncora */
  html { scroll-padding-top: 92px; }
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }
  body { margin: 0; }
  /* Paleta "Grafite & Bronze" — derivada do próprio logo:
     grafite #3C3C3C da tipografia + bronze #927C58 da maçã.
     Os neutros são quentes de propósito: um cinza frio brigaria com o bronze.
     Troque os HEX aqui para mudar toda a identidade de cor do site. */
  :root {
    --bg: #f6f4f1;                 /* fundo geral (off-white quente) */
    --bg2: #ede9e3;               /* faixas alternadas (areia clara) */
    --text: #2b2a28;              /* texto principal (grafite do logo) */
    --text2: #6e6862;            /* texto secundário (cinza quente) */
    --card: #ffffff;             /* cards (branco p/ destacar as fotos) */
    --border: rgba(43,42,40,0.10);
    --header-bg: rgba(246,244,241,0.72);
    --shadow: 0 4px 24px rgba(43,42,40,0.10);
    /* bronze escurecido em relação ao logo: no HEX original o texto branco
       do botão ficava em 4.5:1, no limite do AA. Assim sobra folga. */
    --accent: linear-gradient(135deg,#7c6844,#a98f5e);  /* CTAs / gradientes (bronze) */
    --brand: #23211e;            /* seções escuras (grafite profundo) */
    --brand-soft: rgba(146,124,88,0.12);                /* fundo dos ícones/selos */
    --brand-solid: #6f5c3a;      /* ícones, estrelas, detalhes */
  }
  [data-theme="dark"] {
    --bg: #14120f;
    --bg2: #1d1a16;
    --text: #f2eee8;
    --text2: #a79e93;
    --card: #211e1a;
    --border: rgba(255,255,255,0.10);
    --header-bg: rgba(20,18,15,0.72);
    --shadow: 0 4px 24px rgba(0,0,0,0.5);
    --brand-soft: rgba(178,151,104,0.14);
    --brand-solid: #c4a97a;      /* bronze mais claro p/ contraste no escuro */
  }
  .nn-root { background: var(--bg); color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; transition: background .5s ease, color .5s ease; }
  /* Header fixo: camada própria (translateZ) para não repintar junto com a página */
  .nn-header { transform: translateZ(0); transition: background .35s ease, box-shadow .35s ease, border-color .35s ease; }
  .nn-header.scrolled { background: var(--header-bg); border-bottom: 1px solid var(--border); }
  /* backdrop-filter é caríssimo em scroll — só onde há mouse (desktop) e com raio menor */
  @media (hover: hover) and (pointer: fine) {
    .nn-header.scrolled { backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); }
  }
  /* Reveal mais curto e com deslocamento menor: acompanha o scroll em vez de arrastar atrás dele */
  [data-reveal] { opacity: 0; transform: translate3d(0,16px,0); transition: opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1); }
  [data-reveal].in { opacity: 1; transform: none; }
  .nn-link { position: relative; }
  .nn-link::after { content:''; position:absolute; left:0; bottom:-4px; width:0; height:2px; background: var(--text); transition: width .3s ease; }
  .nn-link:hover::after { width: 100%; }
  .nn-card { transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease; }
  /* hover só em ponteiro real: no touch o "hover" dispara durante o scroll e repinta os cards */
  @media (hover: hover) and (pointer: fine) {
    .nn-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
  }
  .nn-btn-primary { transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease; }
  .nn-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(124,104,68,0.38); }
  .nn-btn-primary:active { transform: translateY(0); }
  .nn-ghost { transition: background .25s ease, color .25s ease, border-color .25s ease; }
  .nn-ph { background:
      repeating-linear-gradient(135deg, var(--border) 0 1px, transparent 1px 11px),
      var(--bg2); }
  /* Pulso do WhatsApp via pseudo-elemento (transform/opacity = compositor).
     Antes animava box-shadow, que repinta a tela inteira 60x/s, para sempre. */
  @keyframes nnpulse { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(1.6); opacity: 0; } 100% { transform: scale(1.6); opacity: 0; } }
  @keyframes nnfloat { 0%,100%{ transform: translate3d(0,0,0);} 50%{ transform: translate3d(0,-18px,0);} }
  .nn-float { animation: nnfloat 6s ease-in-out infinite; will-change: transform; }
  .nn-wa { position: relative; }
  .nn-wa::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: rgba(37,211,102,0.55); z-index: -1;
    animation: nnpulse 2.4s ease-out infinite; will-change: transform, opacity;
  }
  .nn-wa:hover { transform: scale(1.06); }
  @media (max-width: 820px) { .nn-navlinks { display: none !important; } }

  /* Botão hambúrguer: só existe pra telas onde a nav some (mesmo breakpoint) */
  .nn-hamburger { display: none; }
  @media (max-width: 820px) { .nn-hamburger { display: flex; } }
  .nn-hamburger:hover { background: var(--bg2); }

  /* No mobile, o botão de WhatsApp do header + o hambúrguer não cabem lado a
     lado (o pill de texto é largo demais) e o hambúrguer ficava espremido pra
     fora da borda. O botão flutuante de WhatsApp já cobre essa ação no
     celular, então some com o do header abaixo do breakpoint da nav. */
  @media (max-width: 820px) { .nn-header-wa { display: none !important; } }

  @keyframes nnMobileNavIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
  .nn-mobile-nav { animation: nnMobileNavIn .22s cubic-bezier(.16,1,.3,1); }
  .nn-mobile-nav a { transition: color .2s ease, padding-left .2s ease; }
  @media (hover: hover) and (pointer: fine) {
    .nn-mobile-nav a:hover { color: var(--brand-solid); padding-left: 10px; }
  }

  /* ---- Lockup da marca (rodapé) ----
     O arquivo é PNG com fundo transparente e vem em duas tintas: a cinza-escura
     do original (tema claro) e uma recolorida para --text do tema escuro.
     Trocar a imagem por tema evita o "adesivo" de logo escuro sobre fundo preto
     e mantém o dourado da maçã intacto nos dois casos (um filter/invert não
     conseguiria preservar a cor da maçã). */
  .nn-brand { line-height: 0; }
  .nn-logo {
    display: block;
    width: clamp(150px, 46%, 180px);
    height: auto;
    /* casa o peso ótico da tipografia do logo com o resto do rodapé */
    opacity: .92;
    transition: opacity .3s ease;
  }
  .nn-brand:hover .nn-logo { opacity: 1; }
  .nn-logo--dark { display: none; }
  [data-theme="dark"] .nn-logo--light { display: none; }
  [data-theme="dark"] .nn-logo--dark { display: block; }

  /* Variante horizontal do header: altura fixa, largura livre */
  .nn-logo--h { width: auto; height: 38px; }
  @media (max-width: 480px) { .nn-logo--h { height: 30px; } }

  /* Glow ambiente atrás do hero — dá profundidade ao fundo liso sem
     competir com o conteúdo. Cores herdam o bronze da marca. */
  .nn-hero-ambient {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
      radial-gradient(ellipse 60% 50% at 18% 20%, rgba(169,143,94,0.20), transparent 60%),
      radial-gradient(ellipse 55% 45% at 85% 75%, rgba(124,104,68,0.16), transparent 60%);
  }
  [data-theme="dark"] .nn-hero-ambient {
    background:
      radial-gradient(ellipse 60% 50% at 18% 20%, rgba(196,169,122,0.16), transparent 60%),
      radial-gradient(ellipse 55% 45% at 85% 75%, rgba(146,124,88,0.14), transparent 60%);
  }

  /* Respeita quem pediu menos movimento no sistema */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    [data-reveal] { opacity: 1; transform: none; }
  }

  /* Hero já é centralizado por padrão (coluna única); no mobile só encolhe os respiros */
  @media (max-width: 740px) {
    #top { padding: 112px 20px 0 !important; }
    #top .nn-hero-visual { margin-top: 36px !important; }
    /* imagem do produto menor no celular */
    #top .nn-float { width: min(340px, 90%) !important; }
  }

  /* Catálogo em 2 colunas no celular — cards menores e mais clean */
  @media (max-width: 600px) {
    .nn-products { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
    .nn-products .nn-card { padding: 14px !important; border-radius: 18px !important; }
  }

  /* Rodapé: colunas fixas (1.3/1/1/1.1fr) só cabem lado a lado no desktop */
  @media (max-width: 820px) {
    footer > div:first-child { grid-template-columns: repeat(2, 1fr) !important; gap: 36px 24px !important; }
  }
  @media (max-width: 560px) {
    footer > div:first-child { grid-template-columns: 1fr !important; }
  }