/* =========================================================
   FOGÃO DE MINAS — estilos
   Paleta: madeira torrada, papel envelhecido, âmbar de cachaça
   ========================================================= */

:root{
  --wood:      #23160e;   /* madeira escura (fundo hero/footer) */
  --wood-2:    #2f1f14;
  --paper:     #efe2c6;   /* papel envelhecido (fundo claro)   */
  --paper-2:   #e6d5b3;
  --amber:     #c98a3c;   /* âmbar de cachaça (destaque)       */
  --amber-dk:  #a9692a;
  --brick:     #8f4227;   /* terracota / tijolo                */
  --ink:       #2b1c11;   /* texto sobre claro                 */
  --ink-soft:  #5c4a37;
  --cream:     #f6ecd6;   /* texto sobre escuro                */
  --cream-dim: #cbb890;
  --line:      rgba(43,28,17,.16);
  --line-lt:   rgba(246,236,214,.18);

  --ff-display: "Fraunces", Georgia, serif;
  --ff-body:    "Karla", system-ui, sans-serif;
  --ff-util:    "Oswald", system-ui, sans-serif;

  --wrap: 1120px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:24px;
}

/* ---------- tipografia utilitária ---------- */
.label{
  font-family:var(--ff-util);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.72rem;
  font-weight:500;
  color:var(--brick);
  display:inline-block;
  margin-bottom:1rem;
}
.label-light{ color:var(--amber); }

.eyebrow{
  font-family:var(--ff-util);
  text-transform:uppercase;
  letter-spacing:.3em;
  font-size:.74rem;
  color:var(--cream-dim);
  margin:0 0 1.4rem;
}

h2{
  font-family:var(--ff-display);
  font-weight:900;
  font-size:clamp(2rem, 5vw, 3.1rem);
  line-height:1.05;
  letter-spacing:-.01em;
  margin:0 0 1rem;
}

.section-lead{
  font-size:1.06rem;
  color:var(--ink-soft);
  max-width:52ch;
  margin:0 auto;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(35,22,14,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-lt);
  transition:padding .3s ease, background .3s ease;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:14px;
  transition:padding-block .3s ease;
}
.site-header.shrink .header-inner{ padding-block:8px; }

.brand{ display:flex; align-items:center; }
.brand-logo{ height:52px; width:auto; transition:height .3s ease; }
.site-header.shrink .brand-logo{ height:42px; }

.brand-fallback{
  display:none; flex-direction:column; line-height:.92;
  font-family:var(--ff-display); color:var(--cream);
}
.brand-fallback-top{ font-weight:900; font-size:1.4rem; }
.brand-fallback-bot{ font-style:italic; font-weight:500; color:var(--amber); font-size:1.05rem; }

.nav{ display:flex; align-items:center; gap:2rem; }
.nav a{
  font-family:var(--ff-util);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.82rem;
  color:var(--cream);
  opacity:.85;
  transition:opacity .2s ease, color .2s ease;
}
.nav a:hover{ opacity:1; color:var(--amber); }
.nav .nav-cta{
  border:1px solid var(--amber);
  color:var(--amber);
  padding:.5rem 1.1rem;
  border-radius:100px;
  opacity:1;
}
.nav .nav-cta:hover{ background:var(--amber); color:var(--wood); }

.nav-toggle{
  display:none;
  flex-direction:column; gap:5px;
  background:none; border:0; cursor:pointer; padding:8px;
}
.nav-toggle span{
  width:26px; height:2px; background:var(--cream);
  transition:transform .3s ease, opacity .3s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* fundo escuro do drawer (só aparece no mobile, controlado via JS) */
.nav-backdrop{
  position:fixed; top:0; right:0; bottom:0; left:0;
  background:rgba(15,9,4,.55);
  opacity:0; transition:opacity .3s ease;
  z-index:40; pointer-events:none;
}
.nav-backdrop.show{ opacity:1; pointer-events:auto; }

/* =========================================================
   BOTÕES
   ========================================================= */
.btn{
  display:inline-block;
  font-family:var(--ff-util);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.85rem;
  padding:.85rem 1.6rem;
  border-radius:100px;
  transition:transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-solid{
  background:var(--amber); color:var(--wood);
  box-shadow:0 6px 18px -8px rgba(169,105,42,.9);
}
.btn-solid:hover{ background:var(--amber-dk); color:var(--cream); }
.btn-ghost{
  border:1px solid var(--cream-dim); color:var(--cream);
}
.btn-ghost:hover{ border-color:var(--amber); color:var(--amber); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  background:
    radial-gradient(120% 90% at 50% -10%, #342013 0%, var(--wood) 55%, #1a0f08 100%);
  color:var(--cream);
  overflow:hidden;
  padding-top:clamp(3.5rem, 8vw, 6rem);
}
.hero-grain{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  mix-blend-mode:overlay; pointer-events:none;
}
.hero-inner{
  position:relative; text-align:center;
  padding-bottom:clamp(3rem, 7vw, 5rem);
}

.hero-title{
  font-family:var(--ff-display);
  margin:0 0 1.4rem;
  display:flex; flex-direction:column; align-items:center; gap:.2rem;
}
.hero-num{
  font-weight:900;
  font-size:clamp(6rem, 20vw, 13rem);
  line-height:.82;
  color:var(--amber);
  letter-spacing:-.03em;
  text-shadow:0 8px 40px rgba(201,138,60,.25);
}
.hero-title-text{
  font-weight:600;
  font-size:clamp(1.6rem, 5vw, 2.7rem);
  line-height:1.05;
  letter-spacing:.01em;
}
.hero-title-text em{ font-style:italic; color:var(--paper-2); }

.hero-sub{
  max-width:46ch; margin:0 auto 2rem;
  color:var(--cream-dim); font-size:1.08rem;
}
.hero-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* marquee */
.hero-marquee{
  position:relative;
  border-top:1px solid var(--line-lt);
  border-bottom:1px solid var(--line-lt);
  background:rgba(0,0,0,.18);
  overflow:hidden;
  padding-block:.9rem;
}
.marquee-track{
  display:inline-flex; align-items:center; gap:2.2rem;
  white-space:nowrap;
  font-family:var(--ff-display); font-style:italic; font-weight:500;
  font-size:1.15rem; color:var(--paper-2);
  animation:marquee 26s linear infinite;
}
.marquee-track .dot{ color:var(--amber); font-style:normal; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }

/* =========================================================
   SEÇÕES GERAIS
   ========================================================= */
.section{ padding-block:clamp(4rem, 9vw, 7rem); }
.section-head{ text-align:center; margin-bottom:3rem; }

/* ---------- COLEÇÃO ---------- */
.colecao{ background:var(--paper); }
.cards{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1.2rem;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
}
.card{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:14px;
  padding:1.8rem 1.6rem;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 34px -20px rgba(43,28,17,.5);
  border-color:var(--amber);
}
.card-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:12px;
  background:var(--wood); color:var(--amber);
  margin-bottom:1.1rem;
}
.card-icon svg{ width:26px; height:26px; }
.card h3{
  font-family:var(--ff-display); font-weight:600;
  font-size:1.25rem; margin:0 0 .35rem;
}
.card p{ margin:0; color:var(--ink-soft); font-size:.96rem; }

/* ---------- ALMOÇO ---------- */
.almoco{
  background:
    radial-gradient(110% 120% at 100% 0%, #34200f 0%, var(--wood) 60%, #1a0f08 100%);
  color:var(--cream);
}
.almoco-inner{
  display:grid; gap:2.5rem; align-items:center;
  grid-template-columns:1fr;
}
.almoco-text h2{ color:var(--cream); }
.almoco .section-lead{ color:var(--cream-dim); margin:0; max-width:46ch; }

.hours-card{
  background:rgba(246,236,214,.06);
  border:1px solid var(--line-lt);
  border-radius:18px;
  padding:2.2rem 2rem;
  text-align:center;
}
.hours-label{
  font-family:var(--ff-util); text-transform:uppercase;
  letter-spacing:.24em; font-size:.72rem; color:var(--amber);
}
.hours-days{
  font-family:var(--ff-display); font-weight:600; font-style:italic;
  font-size:1.5rem; margin:.6rem 0 .2rem;
}
.hours-time{
  display:flex; align-items:baseline; justify-content:center; gap:.6rem;
  font-family:var(--ff-display); font-weight:900;
  font-size:clamp(2.4rem, 8vw, 3.6rem); color:var(--amber); margin:.2rem 0 .8rem;
}
.hours-dash{ color:var(--cream-dim); font-weight:400; }
.hours-note{ margin:0; color:var(--cream-dim); font-size:.92rem; }

/* ---------- EVENTOS ---------- */
.eventos{ background:var(--paper); }
.eventos-inner{
  display:grid; gap:2.5rem; align-items:center;
  grid-template-columns:1fr;
}
.eventos-head .btn{ margin-top:1.4rem; }
.eventos-list{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; }
.eventos-list li{
  border-left:3px solid var(--amber);
  padding:.6rem 0 .6rem 1.2rem;
  display:flex; flex-direction:column;
}
.eventos-list strong{ font-family:var(--ff-display); font-size:1.2rem; }
.eventos-list span{ color:var(--ink-soft); font-size:.96rem; }

/* ---------- CONTATO ---------- */
.contato{
  background:
    radial-gradient(120% 130% at 0% 100%, #3a2412 0%, var(--wood) 60%, #170d06 100%);
  color:var(--cream);
  text-align:center;
}
.contato h2{ color:var(--cream); }
.contato .section-lead{ color:var(--cream-dim); }
.contato-head{ margin-bottom:2.6rem; }

.contato-grid{
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  max-width:820px; margin-inline:auto;
}
.contact-card{
  background:rgba(246,236,214,.06);
  border:1px solid var(--line-lt);
  border-radius:14px;
  padding:1.6rem 1.4rem;
  display:flex; flex-direction:column; gap:.5rem; align-items:center;
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.contact-card:hover{
  transform:translateY(-5px);
  border-color:var(--amber);
  background:rgba(201,138,60,.1);
}
.contact-kind{
  font-family:var(--ff-util); text-transform:uppercase;
  letter-spacing:.2em; font-size:.68rem; color:var(--amber);
}
.contact-value{
  font-family:var(--ff-display); font-weight:600; font-size:1.4rem;
  display:flex; align-items:center; gap:.5rem;
}
.contact-value svg{ width:22px; height:22px; }

/* ---------- ENDEREÇO ---------- */
.address{
  display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
  justify-content:center; text-align:left;
  background:rgba(246,236,214,.06);
  border:1px solid var(--line-lt);
  border-radius:16px;
  padding:1.4rem 1.6rem;
  max-width:720px; margin:0 auto 1.6rem;
}
.address-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:12px;
  background:var(--amber); color:var(--wood); flex:0 0 auto;
}
.address-icon svg{ width:26px; height:26px; }
.address-text{ flex:1 1 220px; }
.address-line{ margin:.3rem 0 0; color:var(--cream); font-size:1.02rem; line-height:1.45; }
.address-btn{ flex:0 0 auto; }

.contact-wpp:hover{ border-color:#25d366; background:rgba(37,211,102,.12); }
.contact-wpp .contact-value svg{ color:#25d366; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background:var(--wood-2); color:var(--cream-dim);
  border-top:1px solid var(--line-lt);
  padding-block:2rem;
}
.footer-inner{
  display:flex; flex-direction:column; align-items:center; gap:.4rem; text-align:center;
}
.footer-brand{ font-family:var(--ff-display); font-weight:900; font-size:1.3rem; color:var(--cream); }
.footer-tag{ font-family:var(--ff-util); text-transform:uppercase; letter-spacing:.2em; font-size:.72rem; }
.footer-address{ font-size:.9rem; margin-top:.2rem; }
.footer-insta{ color:var(--amber); font-weight:700; margin-top:.3rem; }
.footer-insta:hover{ text-decoration:underline; }

/* =========================================================
   ANIMAÇÃO DE ENTRADA
   ========================================================= */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* =========================================================
   DESKTOP LAYOUTS
   ========================================================= */
@media (min-width:760px){
  .almoco-inner{ grid-template-columns:1.1fr .9fr; gap:3.5rem; }
  .eventos-inner{ grid-template-columns:1fr 1fr; gap:4rem; }
  .eventos-head{ text-align:left; }
}

/* =========================================================
   MOBILE — MENU
   ========================================================= */
@media (max-width:720px){
  .nav-toggle{ display:flex; position:relative; z-index:60; }

  .nav{
    position:fixed;
    top:0; right:0; bottom:0; left:auto;   /* explícito (evita bug do "inset" em navegadores antigos) */
    height:100%;
    width:min(80vw, 320px);
    background:var(--wood-2);
    border-left:1px solid var(--line-lt);
    display:flex;
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:1.6rem;
    padding:2rem 2.2rem;
    transform:translateX(100%);
    transition:transform .35s cubic-bezier(.4,0,.2,1);
    box-shadow:-20px 0 60px -20px rgba(0,0,0,.6);
    z-index:55;
  }
  .nav.open{ transform:translateX(0); }
  .nav a{ font-size:1.15rem; opacity:1; }
  .nav .nav-cta{ margin-top:.4rem; }

  /* trava o scroll do fundo quando o menu está aberto */
  body.menu-open{ overflow:hidden; }
}