/* conversor-medidas-style.css — Chama & Sabor
   Usa as variáveis de /vitrine-style.css, mas SOBRESCREVE bg/surface/surface2
   no body — mesma regra da página mãe das Ferramentas, pra manter a seção
   inteira no tom mais claro. Banner (.cat-banner) é o mesmo padrão da Vitrine. */

body {
  --bg: #241f15;
  --surface: #2f2819;
  --surface2: #382f1d;
}

/* === BANNER (igual ao .cat-banner da Vitrine) === */
.cat-banner {
  width: 100%;
  height: clamp(180px, 22vw, 280px);
  position: relative;
  overflow: hidden;
  margin-top: var(--header-h);
}
.cat-banner-bg {
  position: absolute; inset: 0;
  /*
  ══════════════════════════════════════════════════════
  PROMPT FLOW — Banner Conversor de Medidas:
  "Modern kitchen countertop scene, dark polished stone
  surface, softly lit from above, arrangement of baking
  tools: brass kitchen scale, glass measuring cup,
  stainless steel measuring spoons, small wooden bowl
  with flour, warm golden highlights, shallow depth of
  field, background fading into soft shadow, cinematic
  editorial photography, 16:9"
  Salve como: /chamaesabor-imagens/banner-conversor-medidas.jpg
  ══════════════════════════════════════════════════════
  */
  background:
    linear-gradient(to right, rgba(23,20,15,0.93) 20%, rgba(23,20,15,0.5) 50%, rgba(23,20,15,0.15) 70%),
    linear-gradient(to top, rgba(23,20,15,0.8) 0%, transparent 20%),
    url('/chamaesabor-imagens/banner-conversor-medidas.jpeg') center center / cover no-repeat;
  background-color: #17140f;
  filter: brightness(0.68) sepia(0.1);
}
.cat-banner-content {
  position: relative; z-index: 2;
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 var(--pad);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}
.cat-banner-breadcrumb {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
}
.cat-banner-breadcrumb a { color: var(--text-dim); transition: color .2s; }
.cat-banner-breadcrumb a:hover { color: var(--gold); }
.cat-banner-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
}
.cat-banner-title em { font-style: italic; color: var(--gold); }
.cat-banner-desc {
  font-size: clamp(13px, 1.4vw, 15px);
  color: var(--text-muted);
  max-width: 520px;
}

/* === CONTEÚDO === */
.conversor-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 3rem var(--pad) 5rem;
}

.conversor-stage {
  width: 100%;
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border);
  padding: 2.5rem;
  display: flex;
  justify-content: center;
}

.ferramenta-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 2px;
  width: 100%;
  max-width: 620px;
  padding: 8px 28px 32px;
}

.abas {
  display: flex;
  gap: 4px;
  margin: 0 -28px 24px;
  padding: 0 28px;
  border-bottom: 1px solid var(--border);
}
.aba-botao {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  padding: 16px 4px;
  margin-right: 28px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.aba-botao:hover { color: var(--text); }
.aba-botao.ativo {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.campo { margin-bottom: 18px; }
.campo label {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.campo input, .campo select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  padding: 12px 14px;
  border-radius: 4px;
  appearance: none;
}
.campo input:focus, .campo select:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.linha-dupla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.resultado {
  margin-top: 24px;
  padding: 22px 20px;
  text-align: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.resultado .rotulo {
  font-size: 12px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.resultado .valor {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(30px, 7vw, 44px);
  color: var(--gold);
  margin-top: 4px;
}

.observacao {
  margin-top: 28px;
  font-size: 13.5px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 18px;
  line-height: 1.7;
}

.fontes {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.6;
}

@media (max-width: 560px) {
  .conversor-stage { padding: 1.25rem; }
  .linha-dupla { grid-template-columns: 1fr; }
  .ferramenta-card { padding: 8px 18px 24px; }
  .abas { margin: 0 -18px 20px; padding: 0 18px; }
}

/* === SCROLL TOP (idêntico ao do resto do site) === */
.btn-scroll-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 999;
  width: 32px;
  height: 32px;
  background: #C8922A;
  color: #17140f;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background 0.2s;
}
.btn-scroll-top.visivel { opacity: 1; visibility: visible; transform: translateY(0); }
.btn-scroll-top:hover { background: #e8b86d; }

@media (max-width: 560px) {
  .btn-scroll-top { bottom: 1.25rem; right: 1.25rem; width: 36px; height: 36px; font-size: 1.1rem; }
}