:root {
  --bg: #000;
  --card: #0f0f0f;
  --text: #fff;
  --muted: #bdbdbd;
  --accent: #ffcc00;
  --accent-soft: rgba(255, 204, 0, 0.16);
  --line: #1b1b1b;
  --zap: #25d366;

  --wrap: 1100px;

  --radius-card: 14px;
  --radius-btn: 10px;
  --shadow-card: 0 16px 32px rgba(0, 0, 0, 0.8);
  --shadow-glow-gold: 0 0 20px rgba(255, 204, 0, 0.4);
  --shadow-glow-zap: 0 0 20px rgba(37, 211, 102, 0.4);
}

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  text-align: center;
  padding-top: 10px; /* espaço pro header fixo */
}

img {
  max-width: 100%;
  display: block;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 16px 96px; /* 96px porque temos botão flutuante */
  margin-top: 16px !important;
  padding-top: 12px !important;
}

/* =========================
   HEADER FIXO (USAR EM TODAS AS PÁGINAS)
   ========================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #000;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 20px 40px rgba(0,0,0,0.8);
  z-index: 9999;
  
}

.site-header-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 2px 10px;
  min-height: 48px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand-logo {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #111;
  border: 1px solid var(--accent);
  box-shadow: 0 0 8px rgba(255, 204, 0, 0.4);
  object-fit: cover;
  object-position: center;
}

.brand-text {
  text-align: left;
  line-height: 1.2;
}

.brand-text .title {
  color: var(--accent);
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
}

.brand-text .sub {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
}

/* navegação do topo */
  .main-nav{
    display:flex !important; position:static !important;
    gap:8px; overflow-x:auto; white-space:nowrap;
  }
  .main-nav a{ flex:0 0 auto; }


.main-nav a {
  color: #ddd;
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.2;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--accent-soft);
  border: 1px solid rgba(255, 204, 0, 0.25);
  box-shadow: 0 0 10px rgba(255, 204, 0, 0.15);
}

.main-nav a:hover {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
  box-shadow: 0 0 14px rgba(255, 204, 0, 0.5);
  text-decoration: none;
}

/* =========================
   SEÇÕES / TEXTOS
   ========================= */
.section-block {
  padding: 32px 16px;
}

.section-title,
.section-block h2.section-title {
  margin: 0 0 12px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent);
  text-shadow: 0 0 8px rgba(255, 204, 0, 0.2);
  text-align: left;
}

.section-desc,
.section-block p.section-desc {
  margin: 0 auto;
  max-width: 800px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text);
  font-weight: 400;
  text-align: left;
}

.hero h2 {
  color: var(--accent);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 10px;
  line-height: 1.3;
  text-shadow: 0 0 8px rgba(255, 204, 0, 0.2);
  text-align: center;
  
}

.hero p {
  color: var(--text);
  font-size: 0.8rem;
  line-height: 1.4;
  margin: 6px auto 16px;
  max-width: 380px;
  font-weight: 400;
  text-align: center;
  
}

/* CTA principal dourada grande */
.cta-main,
.btn-orcamento,
.btn-simular,
.btn-gold {
  display: inline-block;
  background: var(--accent);
  color: #000;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 14px 16px;
  line-height: 1.2;
  border-radius: var(--radius-btn);
  text-decoration: none;
  box-shadow: var(--shadow-glow-gold);
  border: 0;
  text-align: center;
}

.cta-main small {
  display: block;
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.2;
}

.cta-main:hover,
.btn-gold:hover,
.btn-simular:hover,
.btn-orcamento:hover {
  filter: brightness(1.07);
  box-shadow: 0 0 28px rgba(255, 204, 0, 0.7);
  transform: translateY(-2px);
  text-decoration: none;
  color: #000;
}

/* =========================
   CARDS / LISTAS DE PRODUTOS
   ========================= */
.grid {
  display: grid;
  gap: 16px;
}

@media (min-width: 860px) {
  .grid.cols-2 {
    grid-template-columns: 1fr 1fr;
  }
  .grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.prod-list {
  display: grid;
  gap: 16px;
}

.prod-card {
  background: var(--card);
  border: 1px solid var(--accent);
  border-radius: 12px;
  box-shadow: 0 0 16px rgba(255, 204, 0, 0.08), 0 16px 32px rgba(0,0,0,0.8);
  padding: 16px;
  text-align: left;
}

.prod-card img {
  width: 100%;
  border-radius: 8px;
  background: #000;
  border: 1px solid #333;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  display: block;
  margin-bottom: 12px;
}

.prod-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 6px;
}

.prod-price {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 4px;
}

.prod-extra {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--accent);
  margin-bottom: 10px;
}

.btn-whats-inline {
  display: inline-block;
  background: #000;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  padding: 10px 12px;
  line-height: 1.2;
}
.btn-whats-inline:hover {
  background: var(--accent);
  color: #000;
  box-shadow: 0 0 16px rgba(255, 204, 0, 0.4);
  text-decoration: none;
}

/* =========================
   BLOCOS / CARDS GENÉRICOS
   ========================= */
.card,
.card-block,
.pay-block,
.contact-card,
.simulador-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 16px;
  text-align: left;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 24px;
}

/* =========================
   FORM / INPUTS
   ========================= */
.input-block,
.simulador-form-group {
  margin-bottom: 16px;
}

.input-block label,
.simulador-form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  margin: 8px 0 4px;
  text-align: left;
}

.input-block input,
.simulador-form-group input,
.input-block select,
.simulador-form-group select,
.input-block input[type="color"],
.simulador-form-group input[type="color"],
.input-block input[type="range"],
.simulador-form-group input[type="range"] {
  width: 100%;
  border-radius: var(--radius-btn);
  border: 1px solid var(--line);
  background: #0f0f0f;
  color: #fff;
  font-size: 1rem;
  padding: 12px;
  line-height: 1.2;
  font-family: "Poppins", Arial, Helvetica, sans-serif;
}

/* resultado simulador / texto final / resumo */
.result-box,
.resultado-box {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: #000;
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.5;
  padding: 16px;
  box-shadow: 0 16px 32px rgba(0,0,0,0.8);
  text-align: left;
  word-break: break-word;
}
.result-box ul,
.resultado-box ul {
  list-style: none;
  padding-left: 0;
  margin-top: 10px;
}
.result-box li::before,
.resultado-box li::before {
  content: "• ";
  color: var(--accent);
  font-weight: bold;
}
.result-box b,
.resultado-box b {
  color: var(--accent);
}

/* botão WhatsApp dentro do resultado */
.whats-link,
a.whatsapp-link {
  display: inline-block;
  background: var(--zap);
  border: 2px solid #fff;
  border-radius: var(--radius-btn);
  box-shadow: var(--shadow-glow-zap);
  color: #000;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 1.3;
  padding: 12px 14px;
  margin-top: 12px;
  text-align: center;
}
.whats-link:hover,
a.whatsapp-link:hover {
  box-shadow: 0 0 26px rgba(37, 211, 102, 0.7);
  transform: translateY(-2px);
  text-decoration: none;
  color: #000;
}

/* =========================
   BOTÕES FLUTUANTES (WHATSAPP / ORÇAMENTO)
   ========================= */
.float-area {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 16px;
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 0 16px;
  z-index: 10001;
  pointer-events: none;
}

.float-wrap {
  flex: 1;
  max-width: 200px;
  pointer-events: auto;
}

.float-orcamento,
.float-zap,
.float-whats-btn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  padding: 12px 14px;
  border-radius: var(--radius-btn);
  text-decoration: none;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

.float-orcamento {
  background: var(--accent);
  color: #000;
  border: 1px solid #000;
  box-shadow: 0 10px 30px rgba(0,0,0,0.8), 0 0 24px rgba(255,204,0,.6);
}

.float-zap,
.float-whats-btn {
  background: var(--zap);
  color: #000;
  border: 2px solid #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.8), 0 0 24px rgba(37,211,102,.6);
}

.float-mini {
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.2;
}

.float-main {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
}

/* =========================
   RODAPÉ
   ========================= */
.site-footer {
  border-top: 1px solid var(--line);
  background: #000;
  color: var(--muted);
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.4;
  padding: 24px 16px 120px; /* 120px p/ não brigar c/ botões fixos */
}
.site-footer a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.site-footer a:hover {
  text-decoration: underline;
}

/* =========================
   AJUSTES DESKTOP
   ========================= */
@media (min-width: 600px) {
  body {
    padding-top: 20px;
  }

  .brand-text .title {
    font-size: 1rem;
  }

  .main-nav a {
    font-size: 0.75rem;
    padding: 8px 10px;
  }
}

@media (min-width: 860px) {
  .wrap {
    padding-bottom: 64px; /* desktop tem mais espaço, botão não tapa tanto */
  }

  .float-area {
    bottom: 24px;
    justify-content: flex-end;
    right: 24px;
    left: auto;
    width: auto;
  }

  .float-wrap {
    max-width: 220px;
  }

  .site-footer {
    padding-bottom: 64px;
  }
}

/* grade de produtos mais elegante no desktop */
@media (min-width: 900px) {
  .prod-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}

/* garante que o conteúdo interno do card não fique estourado */
.prod-card {
  display: flex;
  flex-direction: column;
}

/* controla o tamanho da imagem dentro do card no desktop */
.prod-card img {
  width: 100%;
  height: auto;
  max-height: 180px;          /* <-- ESSA LINHA é importante */
  object-fit: contain;        /* mostra a imagem inteira sem cortar */
  background: #000;
  border-radius: 8px;
  border: 1px solid #333;
  box-shadow: 0 0 10px rgba(0,0,0,0.8);
  margin-bottom: 12px;
}
@media (min-width: 900px) {
  .prod-card img {
    max-height: 140px;        /* no PC fica ainda menor */
  }
}
@media (min-width: 1100px) {
  .wrap {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media (min-width: 900px) {
  .brand-logo {
    width: 40px;
    height: 40px;
    border-radius: 6px;
  }

  .brand-text .title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
  }

  .brand-text .sub {
    font-size: 0.75rem;
    line-height: 1.2;
  }

  .main-nav a {
    font-size: 0.8rem;
    padding: 8px 12px;
    border-radius: 8px;
  }

  .site-header-inner {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
@media (min-width: 900px) {
  /* esconde o primeiro botão flutuante (orcamento) no desktop */
  .float-orcamento {
    display: none;
  }

  /* deixa só o zap, e dá uma afinada */
  .float-zap,
  .float-whats-btn {
    max-width: 220px;
    font-size: 0.8rem;
  }
}
.card-item {
  background: var(--card);
  border: 1px solid var(--accent);
  border-radius: var(--radius-card);
  box-shadow: 0 0 16px rgba(255,204,0,.08),
              0 16px 32px rgba(0,0,0,.8);
  padding: 16px;
  display: flex;
  flex-direction: column;
  text-align: left;

  /* NOVO: isso garante que todos fiquem mesma "lógica" de altura */
  height: 100%;
}
.card-bottom {
  margin-top: auto; /* empurra essa parte pra baixo */
  display: flex;
  flex-direction: column;
}

.card-btn {
  display: inline-block;
  background: var(--accent);
  color: #000;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--radius-btn);
  padding: 12px 14px;
  box-shadow: var(--shadow-glow-gold);
  text-align: center;
  text-decoration: none;
  width: 100%;
}

.card-btn small {
  display: block;
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.2;
}

/* === Mobile menu hamburger === */
.hamburger{ background: var(--accent); color:#000; border:0; border-radius:8px; font-size:1rem; font-weight:700; padding:8px 12px; cursor:pointer; }
@media (max-width: 860px){
  .main-nav{ display:none; flex-direction:column; gap:8px; padding:10px; background:#000; border:1px solid var(--line); border-radius:10px; position:absolute; top:60px; right:16px; z-index:9999; }
  .main-nav.open{ display:flex; }
  .site-header-inner{ position:relative; }
}

/* === Salgados grid and images === */
.prod-list{ display:grid; gap:16px; }
@media(min-width:600px){ .prod-list{ grid-template-columns:1fr 1fr; } }
@media(min-width:900px){ .prod-list{ grid-template-columns:repeat(3,1fr); } }
.prod-card{ border:1px solid var(--line); border-radius:12px; padding:12px; background:#0b0b0b; }
.prod-card img{ width:100%; border-radius:10px; background:#000; border:1px solid #222; display:block; margin-bottom:10px; }
.prod-name{ font-size:1rem; line-height:1.2; display:flex; justify-content:space-between; gap:8px; }
.prod-price{ font-weight:700; }

/* === Mobile visibility tweak for primary section title === */
@media (max-width: 860px){
  .sec-title-line span{ font-size:1.2rem; font-weight:700; }
  .wrap > section:first-of-type{ margin-top:12px; }
}

/* === Override: remove hamburger on desktop and expose nav on mobile === */
.hamburger{ display:none !important; }
@media (max-width: 860px){
  .main-nav{ 
    display:flex !important; 
    position:sticky; top:0; 
    right:auto; 
    padding:8px; 
    background:transparent; 
    border:0; border-radius:0; 
    gap:8px; 
    flex-wrap:wrap; 
    z-index: 999;
  }
  .main-nav a{
    flex:1 1 calc(50% - 8px);
    padding:12px; 
    border:1px solid var(--line); 
    border-radius:10px; 
    text-align:center; 
    background:#0f0f0f;
  }
}

/* === Image fit refinements === */

/* Product images: show entire item (no cropping) */
.prod-card img {
  width: 100%;
  height: auto;
  object-fit: contain;
  background-color: #000;
}

/* Theme and card backgrounds: fill nicely */
.tema-foto, .card-foto {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* ===== NAV MOBILE ===== */
.hamburger{display:none;}
@media (max-width:860px){
  .hamburger{
    display:block;
    font-size:22px; line-height:1; padding:10px 12px;
    background:var(--accent); color:#000; border:0; border-radius:10px;
  }
  .main-nav{
    position:fixed; top:68px; left:8px; right:8px;
    display:none; flex-direction:column; gap:8px;
    background:#000; border:1px solid var(--line); border-radius:12px;
    padding:10px; box-shadow:0 20px 40px rgba(0,0,0,.8);
    z-index:10000;
  }
  .main-nav.open{ display:flex; }
  .main-nav a{ width:100%; font-size:0.95rem; text-align:center; }
}
/* ===== MOBILE FIRST / SAFE AREA ===== */
:root{ --safe-bottom: calc(16px + env(safe-area-inset-bottom)); }

.site-header{ position: sticky; top: 0; z-index: 1000; }

/* NAV MOBILE */
.hamburger{ display:none; }
@media (max-width:860px){
  .hamburger{
    display:block; font-size:22px; line-height:1; padding:10px 12px;
    background:var(--accent); color:#000; border:0; border-radius:10px;
  }
  .main-nav{
    position:fixed; top:68px; left:8px; right:8px;
    display:none; flex-direction:column; gap:8px;
    background:#000; border:1px solid var(--line); border-radius:12px;
    padding:10px; box-shadow:0 20px 40px rgba(0,0,0,.8);
    z-index:1100;
  }
  .main-nav.open{ display:flex; }
  .main-nav a{ width:100%; font-size:0.95rem; text-align:center; }
  body.nav-open{ overflow:hidden; }              /* trava scroll quando menu abre */
}

/* BACKDROP do menu */
.nav-backdrop{
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.45); backdrop-filter:blur(2px);
  z-index:1090;
}
body.nav-open .nav-backdrop{ display:block; }

/* Conteúdo com respiro para o botão flutuante */
.wrap, main.wrap{ padding-bottom: 160px; }

/* Botão flutuante SEM bloquear cliques do conteúdo */
.float-area{
  position:fixed; left:8px; right:8px; bottom:var(--safe-bottom);
  z-index:900; pointer-events:none;        /* não captura toques da página */
}
.float-area .float-wrap{
  pointer-events:auto; max-width:none; width:100%; /* ocupa a largura útil */
}

@media (max-width:480px){
  .float-area{ bottom: calc(8px + env(safe-area-inset-bottom)); }
}

/* Imagens dos cards SEM corte e com indicação de zoom */
.card-foto, .tema-foto{ background-size:contain !important; cursor:zoom-in; }

/* Pequeno respiro extra antes do rodapé em botões primários */
button, .btn, .tema-btn{ margin-bottom: 6px; }


/* === SAFE RESET 2025-11-05 === */
/* Zera qualquer overlay e garante conteúdo visível */
.nav-backdrop{ display:none !important; }
/* Header compacto e sem espaço extra */
.site-header{ position:sticky; top:0; background:#000; z-index:1000; border-bottom:1px solid #222; }
.site-header-inner{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 10px; min-height:52px; }
/* Desktop: menu sempre inline */
@media (min-width:861px){
  .hamburger{ display:none !important; }
  .main-nav{ display:flex !important; position:static !important; flex-direction:row !important; gap:20px; background:transparent !important; border:0 !important; box-shadow:none !important; }
}
/* Mobile: menu fechado por padrão */
@media (max-width:860px){
  .hamburger{ display:block !important; z-index:1101; }
  .main-nav{ display:none !important; position:fixed !important; top:60px; left:8px; right:8px; flex-direction:column !important; gap:8px; background:#000 !important; border:1px solid var(--line) !important; border-radius:10px !important; padding:10px !important; z-index:1100 !important; box-shadow:0 20px 40px rgba(0,0,0,.8) !important; }
  .main-nav.open{ display:flex !important; }
}
/* WhatsApp compacto no desktop; full no mobile */
.float-area{ z-index:900 !important; left:auto; right:10px; bottom:10px; }
.float-wrap{ width:auto !important; max-width:260px !important; }
@media (max-width:860px){ .float-area{ left:8px; right:8px; } .float-wrap{ width:100% !important; max-width:none !important; } }
/* Imagens sem corte */
.card-foto, .tema-foto{ background-size:contain !important; }
/* Respiro mobile */
@media (max-width:480px){ .wrap, main.wrap{ padding-bottom:120px; } }
/* === MOBILE TOP FIX === */
@media (max-width: 860px){
  :root{ --safe-top: env(safe-area-inset-top, 0px); }

  /* cabeçalho compacto no celular */
  .site-header-inner{
    padding: 4px 10px !important;
    min-height: 46px !important;
  }
  .brand-block img{ max-height: 40px !important; width:auto; }

  /* menu drop alinhado ao novo header */
  .main-nav{
    top: calc(54px + var(--safe-top)) !important;
  }

  /* mais respiro logo abaixo da barra (legibilidade da faixa azul) */
  .hero, .intro, .banner, .main-title, .wrap > section:first-child{
    margin-top: 14px !important;
    padding-top: 10px !important;
  }
}
.salgados-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;          /* distância entre os cards */
}

/* garante que cada card ocupe toda a largura disponível */
.salgados-lista .prod-card {
  width: 100%;
  box-sizing: border-box;
}