/* ============================================================
   W COMÉRCIO DE CARNES — stylesheet
   Paleta: preto/carvão + dourado (identidade da marca)
   ============================================================ */

:root{
  --black: #0d0d0d;
  --black-2: #161616;
  --black-3: #1f1f1f;
  --cream: #faf6ee;
  --cream-2: #f1ebdc;
  --gold: #d8a33d;
  --gold-light: #f0c463;
  --gold-dark: #a9791f;
  --whatsapp: #25D366;
  --whatsapp-dark: #1da851;
  --text-dark: #1c1a17;
  --text-muted: #6b6560;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 20px 45px -20px rgba(0,0,0,.45);
  --ff-display: 'Bebas Neue', sans-serif;
  --ff-body: 'Poppins', sans-serif;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 90px; }
body{
  margin:0;
  font-family: var(--ff-body);
  color: var(--text-dark);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family: var(--ff-display); letter-spacing:.02em; line-height:1.05; margin:0; text-transform: uppercase; }
p{ line-height:1.7; color: var(--text-muted); margin:0 0 1em; }
.icon{ width:20px; height:20px; flex-shrink:0; }
.icon-lg{ width:36px; height:36px; }
.gold{ color: var(--gold); }

.container{ width:100%; max-width:1220px; margin:0 auto; padding: 0 24px; }
.section{ padding: 96px 0; }
.eyebrow{
  display:inline-block; font-weight:600; font-size:.78rem; letter-spacing:.18em;
  text-transform:uppercase; color: var(--gold-dark); margin-bottom: 14px;
}
.section-head{ max-width: 680px; margin: 0 0 56px; }
.section-head h2{ font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 16px; color: var(--black); }
.section-head p{ font-size: 1.05rem; }

/* ---------- Reveal animation ---------- */
[data-reveal]{ opacity:0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].in-view{ opacity:1; transform: translateY(0); }
[data-reveal-delay="1"]{ transition-delay:.12s; }
[data-reveal-delay="2"]{ transition-delay:.24s; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 14px 26px; border-radius: 999px; font-weight:600; font-size:.95rem;
  border:2px solid transparent; cursor:pointer; transition: all .25s ease; white-space:nowrap;
}
.btn-lg{ padding: 17px 32px; font-size:1rem; }
.btn-block{ width:100%; }
.btn-whatsapp{ background: var(--whatsapp); color:#fff; box-shadow: 0 12px 24px -10px rgba(37,211,102,.6); }
.btn-whatsapp:hover{ background: var(--whatsapp-dark); transform: translateY(-2px); }
.btn-outline{ border-color: rgba(255,255,255,.5); color:#fff; }
.btn-outline:hover{ background: rgba(255,255,255,.12); border-color:#fff; }
.btn-outline-dark{ border-color: var(--black); color: var(--black); }
.btn-outline-dark:hover{ background: var(--black); color:#fff; }
.btn-dark{ background: var(--black); color:#fff; }
.btn-dark:hover{ background: var(--gold-dark); transform: translateY(-2px); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 1000;
  padding: 18px 0; transition: all .35s ease;
  background: linear-gradient(to bottom, rgba(0,0,0,.55), transparent);
}
.site-header.scrolled{
  padding: 10px 0; background: rgba(13,13,13,.92); backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -15px rgba(0,0,0,.5);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap: 20px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand-logo{ width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid var(--gold); transition: width .3s ease, height .3s ease; }
.site-header.scrolled .brand-logo{ width:42px; height:42px; }
.brand-text{ color:#fff; font-family: var(--ff-display); font-size:1.15rem; line-height:1.1; letter-spacing:.03em; }
.brand-text small{ display:block; font-size:.6rem; letter-spacing:.22em; color: var(--gold-light); font-family: var(--ff-body); font-weight:600; }

.main-nav{ display:flex; align-items:center; gap: 34px; }
.main-nav ul{ display:flex; gap: 30px; }
.nav-link{ color:#fff; font-weight:500; font-size:.92rem; position:relative; padding: 4px 0; }
.nav-link::after{ content:''; position:absolute; left:0; bottom:-3px; width:0; height:2px; background: var(--gold); transition: width .25s ease; }
.nav-link:hover::after{ width:100%; }
.nav-cta{ padding: 11px 22px; font-size:.88rem; }

.hamburger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; z-index:1100; }
.hamburger span{ width:26px; height:2px; background:#fff; border-radius:2px; transition: all .3s ease; }
.hamburger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; background: radial-gradient(circle at 15% 20%, #1c1a17 0%, var(--black) 60%);
  padding: 170px 0 100px; overflow:hidden;
}
.hero-bg-pattern{
  position:absolute; inset:0; opacity:.5;
  background-image: radial-gradient(circle, rgba(216,163,61,.18) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}
.hero-inner{ position:relative; display:grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items:center; }
.status-badge{
  display:inline-flex; align-items:center; gap:8px; background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16); color:#fff; padding: 8px 16px; border-radius:999px;
  font-size:.82rem; font-weight:500; margin-bottom: 26px;
}
.status-badge .dot{ width:8px; height:8px; border-radius:50%; background:#8a8a8a; }
.status-badge.open .dot{ background: var(--whatsapp); box-shadow: 0 0 0 4px rgba(37,211,102,.25); }
.status-badge.closed .dot{ background:#e05252; box-shadow: 0 0 0 4px rgba(224,82,82,.2); }

.hero-copy h1{ color:#fff; font-size: clamp(2.6rem, 5.2vw, 4.3rem); margin-bottom: 22px; }
.hero-sub{ color: rgba(255,255,255,.72); font-size:1.08rem; max-width: 520px; margin-bottom: 34px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom: 48px; }
.hero-meta{ display:flex; gap: 34px; flex-wrap:wrap; }
.hero-meta div{ display:flex; flex-direction:column; gap:2px; }
.hero-meta strong{ color:#fff; font-size:.95rem; }
.hero-meta span{ color: rgba(255,255,255,.5); font-size:.78rem; }

.hero-media{ position:relative; }
.hero-media img{
  width:100%; aspect-ratio: 4/5; object-fit:cover; border-radius: 24px;
  box-shadow: var(--shadow); border: 1px solid rgba(216,163,61,.25);
}
.hero-media-tag{
  position:absolute; left:-18px; bottom: 34px; background: var(--cream);
  padding: 16px 22px; border-radius: 14px; box-shadow: var(--shadow);
  display:flex; flex-direction:column; gap:2px;
}
.hero-media-tag span{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--gold-dark); font-weight:600; }
.hero-media-tag strong{ font-family: var(--ff-display); font-size:1.15rem; letter-spacing:.02em; }

/* ---------- Trust strip ---------- */
.trust-strip{ background: var(--black-2); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); }
.trust-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; padding: 30px 24px; }
.trust-item{ display:flex; align-items:center; gap:12px; color:#e9e4da; font-size:.85rem; font-weight:500; }
.trust-item .icon{ color: var(--gold); }

/* ============================================================
   SOBRE
   ============================================================ */
.sobre-grid{ display:grid; grid-template-columns: .95fr 1.05fr; gap: 64px; align-items:center; }
.sobre-media{ position:relative; }
.sobre-media img:first-child{ border-radius: var(--radius); width:100%; aspect-ratio: 4/3.4; object-fit:cover; box-shadow: var(--shadow); }
.sobre-media-float{
  position:absolute; width: 46%; aspect-ratio:1/1; object-fit:cover; border-radius: 14px;
  right:-8%; bottom:-12%; border: 6px solid var(--cream); box-shadow: var(--shadow);
}
.sobre-copy h2{ color: var(--black); font-size: clamp(2rem, 3.6vw, 2.9rem); margin-bottom: 22px; }
.sobre-copy p{ font-size:1.02rem; }
.sobre-lista{ margin: 26px 0 32px; display:flex; flex-direction:column; gap:12px; }
.sobre-lista li{ display:flex; align-items:center; gap:12px; font-weight:500; color: var(--text-dark); }
.sobre-lista .icon{ color: var(--gold-dark); background: var(--cream-2); border-radius:50%; padding:4px; width:26px; height:26px; }

/* ============================================================
   PRODUTOS
   ============================================================ */
.produtos{ background: var(--cream-2); }
.produtos-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.produto-card{
  background:#fff; border-radius: var(--radius); overflow:hidden; box-shadow: 0 14px 32px -18px rgba(0,0,0,.25);
  transition: transform .3s ease, box-shadow .3s ease;
}
.produto-card:hover{ transform: translateY(-6px); box-shadow: 0 26px 44px -20px rgba(0,0,0,.35); }
.produto-img{ height: 220px; overflow:hidden; }
.produto-img img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.produto-card:hover .produto-img img{ transform: scale(1.08); }
.produto-body{ padding: 24px 26px 28px; }
.produto-body h3{ font-size:1.35rem; color: var(--black); margin-bottom:10px; }
.produto-body p{ font-size:.92rem; min-height: 62px; }
.produto-link{ display:inline-flex; align-items:center; gap:8px; font-weight:600; color: var(--gold-dark); font-size:.88rem; }
.produto-link .icon{ width:16px; height:16px; transition: transform .25s ease; }
.produto-link:hover .icon{ transform: translateX(4px); }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; padding: 120px 0; overflow:hidden; }
.cta-band-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cta-band-overlay{ position:absolute; inset:0; background: linear-gradient(120deg, rgba(10,10,10,.92) 20%, rgba(10,10,10,.55) 100%); }
.cta-band-inner{ position:relative; text-align:left; max-width: 620px; }
.cta-band-inner h2{ color:#fff; font-size: clamp(2rem, 4vw, 3rem); margin-bottom:16px; }
.cta-band-inner p{ color: rgba(255,255,255,.75); font-size:1.05rem; margin-bottom: 30px; }

/* ============================================================
   DIFERENCIAIS
   ============================================================ */
.diferenciais-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.diferencial-card{
  background:#fff; border: 1px solid #eee2cb; border-radius: var(--radius); padding: 32px 28px;
  transition: transform .3s ease, border-color .3s ease;
}
.diferencial-card:hover{ transform: translateY(-4px); border-color: var(--gold); }
.diferencial-card .icon-lg{ color: var(--gold-dark); margin-bottom: 18px; }
.diferencial-card h3{ font-size:1.2rem; color: var(--black); margin-bottom:10px; }
.diferencial-card p{ font-size:.92rem; margin:0; }

/* ============================================================
   INSTAGRAM
   ============================================================ */
.instagram-section{ background: var(--black); }
.instagram-section .eyebrow{ color: var(--gold-light); }
.instagram-section .section-head h2{ color:#fff; }
.instagram-section .section-head p{ color: rgba(255,255,255,.6); margin-bottom: 26px; }
.insta-grid{ display:grid; grid-template-columns: repeat(6,1fr); gap: 14px; }
.insta-item{ position:relative; aspect-ratio:1/1; border-radius: 10px; overflow:hidden; display:block; }
.insta-item img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.insta-hover{
  position:absolute; inset:0; background: rgba(13,13,13,.55); display:flex; align-items:center; justify-content:center;
  opacity:0; transition: opacity .3s ease; color:#fff;
}
.insta-item:hover img{ transform: scale(1.1); }
.insta-item:hover .insta-hover{ opacity:1; }

/* ============================================================
   CONTATO
   ============================================================ */
.contato{ background: var(--cream); }
.contato-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items:start; }
.contato-info h2{ color: var(--black); font-size: clamp(2rem, 3.6vw, 2.8rem); margin-bottom: 30px; }
.info-lista{ display:flex; flex-direction:column; gap: 22px; margin-bottom: 30px; }
.info-lista li{ display:flex; gap: 16px; align-items:flex-start; }
.info-lista .icon{ color: var(--gold-dark); background:#fff; border-radius:50%; padding:9px; width:38px; height:38px; box-shadow: 0 6px 14px -8px rgba(0,0,0,.3); flex-shrink:0; }
.info-lista strong{ display:block; color: var(--black); margin-bottom:2px; font-size:.95rem; }
.info-lista span{ color: var(--text-muted); font-size:.92rem; }
.info-lista a{ color: var(--gold-dark); font-weight:600; }

.horarios{ margin-top:8px; border-collapse: collapse; font-size:.86rem; }
.horarios td{ padding: 3px 14px 3px 0; color: var(--text-muted); }
.horarios td:first-child{ color: var(--text-dark); font-weight:500; }
.horarios tr.today td{ color: var(--gold-dark); font-weight:700; }
.horarios-nota{ display:block; margin-top:6px; color:#a39c8e; font-size:.74rem; }

.social-row{ display:flex; gap:12px; margin-bottom: 30px; }
.social-row a{
  width:42px; height:42px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center;
  color: var(--black); box-shadow: 0 8px 18px -10px rgba(0,0,0,.3); transition: all .25s ease;
}
.social-row a:hover{ background: var(--gold); color:#fff; transform: translateY(-3px); }

.map-embed{ border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); border: 1px solid #eee2cb; }
.map-embed iframe{ width:100%; height: 280px; border:0; display:block; }

/* ---------- Formulário ---------- */
.contato-form-wrap{ background:#fff; border-radius: var(--radius); padding: 40px; box-shadow: var(--shadow); border: 1px solid #eee2cb; }
.contato-form-wrap h3{ font-size:1.6rem; color: var(--black); margin-bottom:10px; }
.form-sub{ font-size:.9rem; margin-bottom: 24px; }
.form-row{ margin-bottom: 18px; }
.form-row-split{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row label{ display:block; font-size:.82rem; font-weight:600; color: var(--text-dark); margin-bottom:6px; }
.form-row input, .form-row select, .form-row textarea{
  width:100%; padding: 12px 14px; border-radius: 10px; border: 1.5px solid #e7ded0;
  font-family: var(--ff-body); font-size:.92rem; background: var(--cream); color: var(--text-dark);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  outline:none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(216,163,61,.15);
}
.form-row textarea{ resize: vertical; }
.form-privacy{ font-size:.74rem; text-align:center; margin: 14px 0 0; color:#a39c8e; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background: var(--black); color: rgba(255,255,255,.65); padding-top: 70px; }
.footer-inner{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 50px; border-bottom:1px solid rgba(255,255,255,.08); }
.footer-logo{ width:56px; height:56px; border-radius:50%; margin-bottom:14px; border: 2px solid var(--gold); }
.footer-brand p{ color: rgba(255,255,255,.5); font-size:.88rem; max-width: 240px; }
.footer-col h4{ color:#fff; font-size:1rem; margin-bottom: 18px; letter-spacing:.04em; }
.footer-col{ display:flex; flex-direction:column; gap: 10px; font-size:.88rem; }
.footer-col a:hover{ color: var(--gold-light); }
.footer-bottom{ padding: 22px 0; text-align:center; font-size:.78rem; color: rgba(255,255,255,.4); }

/* ============================================================
   FLOATING ELEMENTS
   ============================================================ */
.float-whatsapp{
  position: fixed; right: 24px; bottom: 24px; width: 62px; height:62px; border-radius:50%;
  background: var(--whatsapp); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 14px 30px -10px rgba(37,211,102,.7); z-index: 900; animation: pulse-wa 2.6s infinite;
}
.float-whatsapp .icon{ width:30px; height:30px; }
@keyframes pulse-wa{
  0%{ box-shadow: 0 0 0 0 rgba(37,211,102,.55), 0 14px 30px -10px rgba(37,211,102,.7); }
  70%{ box-shadow: 0 0 0 16px rgba(37,211,102,0), 0 14px 30px -10px rgba(37,211,102,.7); }
  100%{ box-shadow: 0 0 0 0 rgba(37,211,102,0), 0 14px 30px -10px rgba(37,211,102,.7); }
}
.back-to-top{
  position: fixed; right: 24px; bottom: 96px; width: 44px; height:44px; border-radius:50%;
  background:#fff; color: var(--black); border:1px solid #eee2cb; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 22px -10px rgba(0,0,0,.3); z-index: 900; cursor:pointer;
  opacity:0; visibility:hidden; transform: translateY(10px); transition: all .3s ease;
}
.back-to-top.show{ opacity:1; visibility:visible; transform: translateY(0); }
.back-to-top .icon{ width:20px; height:20px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-media{ order:-1; max-width: 420px; margin: 0 auto; }
  .sobre-grid{ grid-template-columns: 1fr; }
  .sobre-media{ max-width: 460px; margin: 0 auto 60px; }
  .contato-grid{ grid-template-columns: 1fr; }
  .produtos-grid{ grid-template-columns: repeat(2,1fr); }
  .diferenciais-grid{ grid-template-columns: repeat(2,1fr); }
  .insta-grid{ grid-template-columns: repeat(4,1fr); }
  .footer-inner{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 840px){
  .main-nav{
    position: fixed; inset: 0 0 0 30%; background: var(--black); flex-direction:column; align-items:flex-start;
    padding: 110px 32px 40px; gap: 40px; transform: translateX(100%); transition: transform .35s ease;
    box-shadow: -20px 0 50px rgba(0,0,0,.4);
  }
  .main-nav.open{ transform: translateX(0); }
  .main-nav ul{ flex-direction:column; gap: 22px; }
  .nav-link{ font-size:1.1rem; }
  .nav-cta{ width:100%; }
  .hamburger{ display:flex; }
  .trust-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px){
  .section{ padding: 64px 0; }
  .hero{ padding: 140px 0 70px; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; }
  .hero-meta{ gap: 22px; }
  .produtos-grid{ grid-template-columns: 1fr; }
  .diferenciais-grid{ grid-template-columns: 1fr; }
  .insta-grid{ grid-template-columns: repeat(3,1fr); }
  .footer-inner{ grid-template-columns: 1fr; gap: 30px; }
  .form-row-split{ grid-template-columns: 1fr; }
  .contato-form-wrap{ padding: 28px 22px; }
  .cta-band{ padding: 80px 0; }
  .cta-band-inner{ text-align:center; margin:0 auto; }
  .sobre-media-float{ display:none; }
  .trust-grid{ grid-template-columns: 1fr 1fr; text-align:left; }
}