/* AR DOS SANTOS — Oficina de Vitral
   Lead cames, gem glass, afternoon light on the bench. */
:root {
  --rubi: #9B1D2E;
  --ambar: #D4A017;
  --cobalto: #1F4E8C;
  --chumbo: #2B2B2B;
  --papel: #F4EFE4;
  --papel-2: #EFE6D4;
  --vidro: #FFF8EC;
  --luz: rgba(212, 160, 23, 0.18);
  --luz-rubi: rgba(155, 29, 46, 0.16);
  --luz-cobalto: rgba(31, 78, 140, 0.16);
  --linha: 7px;
  --fonte-display: "Cormorant Garamond", "Times New Roman", serif;
  --fonte-texto: "Karla", "Helvetica Neue", sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.oficina {
  margin: 0;
  background: var(--papel);
  color: var(--chumbo);
  font-family: var(--fonte-texto);
  font-size: 1.02rem;
  line-height: 1.65;
  min-height: 100%;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--cobalto); }
a:hover { color: var(--rubi); }
h1, h2, h3, h4 {
  font-family: var(--fonte-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0.01em;
  margin: 0 0 0.6rem;
}
h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.15rem); }
p { margin: 0 0 1rem; }
button, input, select, textarea { font: inherit; }

.hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0.75rem;
  z-index: 80;
  background: var(--ambar);
  color: var(--chumbo);
  padding: 0.55rem 0.9rem;
  font-weight: 700;
}
.skip-link:focus { left: 0.75rem; }

/* ===== TOPO: barra de chumbo ===== */
.came-topo {
  background: var(--chumbo);
  color: var(--papel);
  border-bottom: 7px solid var(--chumbo);
  position: relative;
}
.came-topo::after {
  content: "";
  display: block;
  height: 10px;
  background: linear-gradient(90deg, var(--rubi) 0 22%, var(--ambar) 22% 48%, var(--cobalto) 48% 74%, var(--rubi) 74% 100%);
  opacity: 0.92;
}
.came-faixa {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem 0.75rem;
  max-width: 1180px;
  margin: 0 auto;
}
.marca {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--papel);
  min-width: 0;
}
.marca-vidro {
  width: 2.6rem;
  height: 2.6rem;
  flex: 0 0 2.6rem;
}
.marca-nome {
  font-family: var(--fonte-display);
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  display: block;
}
.marca-sub {
  display: block;
  font-family: var(--fonte-texto);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ambar);
  margin-top: 0.28rem;
  font-weight: 600;
}
.nave-principal {
  margin-left: auto;
}
.nave-principal ul {
  list-style: none;
  display: flex;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
}
.nave-principal a {
  color: var(--papel);
  text-decoration: none;
  padding: 0.45rem 0.7rem;
  font-weight: 600;
  font-size: 0.95rem;
  border: 3px solid transparent;
}
.nave-principal a:hover,
.nave-principal a[aria-current="page"] {
  border-color: var(--ambar);
  color: var(--ambar);
}
.carrinho-liga {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--papel);
  text-decoration: none;
  font-weight: 700;
  border: 3px solid var(--ambar);
  padding: 0.4rem 0.65rem;
  margin-left: 0.4rem;
}
.carrinho-liga[aria-current="page"] { background: var(--ambar); color: var(--chumbo); }
.carrinho-conta {
  min-width: 1.4rem;
  text-align: center;
  background: var(--rubi);
  color: #fff;
  padding: 0.05rem 0.35rem;
  font-size: 0.85rem;
}
.menu-botao {
  display: none;
  margin-left: auto;
  background: transparent;
  color: var(--papel);
  border: 3px solid var(--ambar);
  padding: 0.4rem 0.6rem;
  font-weight: 700;
}

@media (max-width: 860px) {
  .came-faixa { flex-wrap: wrap; }
  .menu-botao { display: inline-flex; }
  .nave-principal {
    display: none;
    width: 100%;
    margin: 0;
  }
  .nave-principal.is-open { display: block; }
  .nave-principal ul { flex-direction: column; }
  .carrinho-liga { margin-left: auto; }
}

/* ===== PAINEIS ===== */
.nave {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
}
.painel { margin: 0 0 2.2rem; }
.painel-n {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rubi);
  margin: 0 0 0.55rem;
}
.mosaico {
  display: grid;
  gap: var(--linha);
  background: var(--chumbo);
  border: var(--linha) solid var(--chumbo);
}
.mosaico-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .mosaico-2 { grid-template-columns: 1fr; } }
.vidro {
  background: var(--vidro);
  position: relative;
  overflow: hidden;
}
.vidro-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 240px;
}
.luz {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.luz-rubi { background: linear-gradient(135deg, var(--luz-rubi), transparent 55%); }
.luz-ambar { background: linear-gradient(200deg, var(--luz), transparent 50%); }
.luz-cobalto { background: linear-gradient(40deg, var(--luz-cobalto), transparent 60%); }

.abertura {
  grid-template-columns: 1.2fr 0.9fr;
  grid-template-rows: minmax(220px, auto) minmax(180px, auto);
}
.abertura .vidro-foto { min-height: 240px; }
.abertura .vidro-foto-alto { min-height: 320px; }
.vidro-texto {
  padding: 1.4rem 1.3rem 1.2rem;
  background:
    linear-gradient(180deg, rgba(212,160,23,0.12), transparent 42%),
    var(--papel);
}
.vidro-texto h1 { margin-bottom: 0.7rem; }
.vidro-cor {
  min-height: 92px;
}
.vidro-rubi { background: var(--rubi); }
.vidro-ambar { background: var(--ambar); }
.vidro-cobalto { background: var(--cobalto); }
.vidro-nota {
  padding: 1rem 1.1rem;
  color: var(--papel);
  background: var(--chumbo);
}
.vidro-nota p { margin: 0; font-size: 0.95rem; }

@media (max-width: 800px) {
  .abertura { grid-template-columns: 1fr; }
  .abertura .vidro-foto { grid-row: auto; min-height: 260px; }
}

.grade-pecas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--linha);
  background: var(--chumbo);
  border: var(--linha) solid var(--chumbo);
}
@media (max-width: 960px) { .grade-pecas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grade-pecas { grid-template-columns: 1fr; } }

.peca {
  background: var(--papel);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.peca-media {
  position: relative;
  display: block;
  background: var(--chumbo);
}
.peca-media img {
  width: 100%;
  height: 280px;
  object-fit: cover;
}
.peca-tag {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--chumbo);
  color: var(--ambar);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.28rem 0.55rem;
}
.peca-corpo {
  padding: 0.85rem 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}
.peca-corpo h3 {
  font-size: 1.35rem;
  margin: 0;
}
.peca-corpo h3 a { color: var(--chumbo); text-decoration: none; }
.peca-corpo h3 a:hover { color: var(--rubi); }
.peca-cat {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cobalto);
  font-weight: 700;
  margin: 0;
}
.preco {
  font-family: var(--fonte-display);
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0.3rem 0 0;
}

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 1rem;
}
.filtro {
  background: var(--papel);
  border: 3px solid var(--chumbo);
  padding: 0.4rem 0.75rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--chumbo);
}
.filtro[aria-pressed="true"],
.filtro.is-on {
  background: var(--chumbo);
  color: var(--ambar);
}

.btn {
  display: inline-block;
  background: var(--rubi);
  color: #fff;
  border: 3px solid var(--chumbo);
  padding: 0.62rem 1.15rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  letter-spacing: 0.02em;
}
.btn:hover { background: #7e1624; color: #fff; }
.btn-largo { width: 100%; text-align: center; }
.btn-ambar {
  background: var(--ambar);
  color: var(--chumbo);
}
.btn-ambar:hover { background: #b8880f; color: var(--chumbo); }

.field {
  width: 100%;
  border: 3px solid var(--chumbo);
  background: var(--vidro);
  color: var(--chumbo);
  padding: 0.55rem 0.65rem;
  border-radius: 0;
}
.field:focus {
  outline: 3px solid var(--ambar);
  outline-offset: 1px;
}
textarea.field { min-height: 8rem; resize: vertical; }

.checkbox-line {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.65rem 0;
  font-size: 0.95rem;
  color: var(--chumbo);
  line-height: 1.45;
}
.checkbox-line.full { width: 100%; }
.checkbox-line input { margin-top: 0.2rem; flex: 0 0 auto; }
.checkbox-line a { color: var(--cobalto); font-weight: 700; }
.checkbox-line u { text-decoration: underline; }
.checkbox-line span { overflow-wrap: anywhere; }

.grupo { margin-bottom: 0.9rem; }
.grupo label { display: block; font-weight: 700; margin-bottom: 0.3rem; }
.dica { margin: 0.3rem 0 0; font-size: 0.88rem; color: #3f3f3f; }
.linha-2, .linha-3 {
  display: grid;
  gap: 0.7rem;
}
.linha-2 { grid-template-columns: 1fr 1fr; }
.linha-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 640px) {
  .linha-2, .linha-3 { grid-template-columns: 1fr; }
}

.pagamento {
  display: block;
  border: 3px solid var(--chumbo);
  padding: 0.7rem 0.8rem;
  margin: 0 0 0.55rem;
  background: var(--vidro);
  cursor: pointer;
}
.pagamento strong { display: block; }
.pagamento span span { display: block; font-size: 0.92rem; margin-top: 0.15rem; }
.pagamento input { margin-right: 0.5rem; }

.form-feedback {
  margin-top: 0.9rem;
  padding: 0.7rem 0.8rem;
  background: var(--cobalto);
  color: #fff;
  font-weight: 700;
}

.bancada-2 {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--linha);
  background: var(--chumbo);
  border: var(--linha) solid var(--chumbo);
}
.bancada-2 > * { background: var(--papel); padding: 1.1rem; min-width: 0; }
@media (max-width: 860px) { .bancada-2 { grid-template-columns: 1fr; } }

.produto-foto img { width: 100%; min-height: 280px; object-fit: cover; }
.tamanho-fila { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 0.9rem; }
.tam {
  border: 3px solid var(--chumbo);
  background: var(--papel);
  min-width: 2.6rem;
  padding: 0.35rem 0.5rem;
  font-weight: 700;
  cursor: pointer;
}
.tam.is-on { background: var(--chumbo); color: var(--ambar); }

.carrinho-linha {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 0.8rem;
  padding: 0.8rem;
  border-bottom: 4px solid var(--chumbo);
  background: var(--papel);
  align-items: center;
}
.carrinho-linha img { width: 96px; height: 110px; object-fit: cover; }
.qtd { display: flex; align-items: center; gap: 0.4rem; }
.qtd button {
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--chumbo);
  background: var(--papel);
  font-weight: 700;
  cursor: pointer;
}
.remover {
  background: none;
  border: 0;
  color: var(--rubi);
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.resumo-linha {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.35rem 0;
}
.resumo-linha.total { font-weight: 800; font-size: 1.1rem; border-top: 4px solid var(--chumbo); padding-top: 0.55rem; margin-top: 0.7rem; }
.vazio { padding: 1.4rem; background: var(--papel); border: var(--linha) solid var(--chumbo); }

/* ===== FOLHA LEGAL: sem sidebar, sem recorte ===== */
.folha {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0.4rem 0.2rem 2rem;
  overflow: visible;
}
.folha h1, .folha h2 {
  font-family: var(--fonte-texto);
  letter-spacing: 0;
  font-weight: 700;
}
.folha h1 { font-size: 1.85rem; margin-bottom: 0.4rem; }
.folha h2 { font-size: 1.15rem; margin: 1.4rem 0 0.45rem; color: var(--rubi); }
.folha p, .folha li { font-size: 1.02rem; line-height: 1.7; overflow-wrap: break-word; }
.folha ul { padding-left: 1.2rem; }
.folha .meta { color: #3a3a3a; font-size: 0.92rem; }
.indice-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.2rem;
}
.indice-legal a {
  border: 3px solid var(--chumbo);
  padding: 0.28rem 0.55rem;
  text-decoration: none;
  color: var(--chumbo);
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--papel);
}
.indice-legal a[aria-current="page"] {
  background: var(--chumbo);
  color: var(--ambar);
}
.caixa-id {
  border: 4px solid var(--chumbo);
  padding: 0.8rem 0.9rem;
  background: var(--papel-2);
  margin: 0 0 1rem;
}
.caixa-id p { margin: 0.2rem 0; }

.sobre-grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--linha);
  background: var(--chumbo);
  border: var(--linha) solid var(--chumbo);
}
.sobre-grade > * { background: var(--papel); }
.sobre-grade img { width: 100%; height: 100%; object-fit: cover; min-height: 220px; }
.sobre-copy { padding: 1.2rem; }
@media (max-width: 760px) { .sobre-grade { grid-template-columns: 1fr; } }

.faixa-luz {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--linha);
  background: var(--chumbo);
  border: var(--linha) solid var(--chumbo);
  margin-top: 1.2rem;
}
.faixa-luz > div { min-height: 110px; padding: 1rem; color: var(--papel); }
@media (max-width: 700px) { .faixa-luz { grid-template-columns: 1fr; } }

/* ===== BASE ===== */
.came-base {
  background: var(--chumbo);
  color: var(--papel);
  margin-top: 1rem;
  border-top: 10px solid var(--ambar);
}
.came-base a { color: var(--ambar); font-weight: 700; }
.came-base a:hover { color: #fff; }
.base-grade {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.6rem 1rem 1.2rem;
  display: grid;
  grid-template-columns: 1.1fr 0.8fr 1.3fr;
  gap: 1.4rem;
}
@media (max-width: 800px) { .base-grade { grid-template-columns: 1fr; } }
.came-base h2 {
  font-family: var(--fonte-texto);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ambar);
  margin-bottom: 0.6rem;
}
.came-base p, .came-base li { color: var(--papel); }
.base-liga { list-style: none; padding: 0; margin: 0; }
.base-liga li { margin: 0.28rem 0; }
.came-base .checkbox-line { color: var(--papel); }
.came-base .checkbox-line a { color: var(--ambar); }
.came-base .field {
  background: #3a3a3a;
  color: var(--papel);
  border-color: var(--ambar);
}
.came-base .field::placeholder { color: #d7d0c2; }
.news-form form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.45rem;
}
.news-form .checkbox-line,
.news-form .form-feedback { grid-column: 1 / -1; }
@media (max-width: 520px) { .news-form form { grid-template-columns: 1fr; } }
.base-copy {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1rem 1.4rem;
  border-top: 4px solid #444;
  color: var(--papel);
  font-size: 0.92rem;
}
.base-copy p { margin: 0.7rem 0 0; color: var(--papel); }

.toast-area {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.toast {
  background: var(--chumbo);
  color: var(--papel);
  border: 4px solid var(--ambar);
  padding: 0.65rem 0.85rem;
  font-weight: 700;
  max-width: 18rem;
}

.migalha { font-size: 0.9rem; margin-bottom: 0.8rem; }
.migalha a { color: var(--cobalto); }