@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

:root{
  --walnut: #2C1810;
  --walnut-deep: #1A0F0A;
  --oak: #B8834D;
  --sawdust: #EAD9B8;
  --falcon: #A63D1F;
  --paper: #FAF6EC;
  --ink: #1F1610;
}

*{ margin:0; padding:0; box-sizing:border-box; }

body{
  background: var(--paper);
  color: var(--ink);
  font-family: 'Work Sans', sans-serif;
  line-height: 1.5;
}

a{ color:inherit; text-decoration:none; }

/* ---------- HEADER ---------- */
header{
  position: sticky; top:0; z-index: 50;
  background: var(--walnut);
  color: var(--sawdust);
  padding: 18px 6%;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{
  font-family:'Fraunces', serif; font-weight:700; font-size:1.3rem;
  display:flex; align-items:center; gap:10px;
}
.logo svg{ width:26px; height:26px; }
nav{ display:flex; gap:22px; font-size:0.88rem; align-items:center; }
nav a{ opacity:0.85; transition:opacity .2s; }
nav a:hover{ opacity:1; color:var(--falcon); }
nav a.destaque{
  background: var(--falcon); color:var(--paper); padding:8px 16px; border-radius:3px; opacity:1;
}
nav a.cta-topo{
  background: var(--paper); color: var(--walnut); padding:9px 15px; border-radius:999px;
  font-weight:600; opacity:1; border:1px solid rgba(234,217,184,0.45);
}
nav a.cta-topo:hover{ color:var(--falcon); background:#fffdf7; }

/* ---------- FLASH MESSAGES ---------- */
.flashes{ max-width:900px; margin:20px auto 0; padding:0 6%; }
.flash{
  background: var(--sawdust); color:var(--walnut);
  padding:12px 18px; border-radius:3px; font-size:0.88rem; margin-bottom:10px;
  border-left:4px solid var(--falcon);
}

/* ---------- HERO / PAGE TITLE ---------- */
.page-hero{
  background: linear-gradient(180deg, var(--walnut) 0%, var(--walnut-deep) 100%);
  color: var(--paper);
  padding: 56px 6% 40px;
  text-align:center;
}
.page-hero h1{ font-family:'Fraunces', serif; font-weight:600; font-size:clamp(1.8rem,4vw,2.6rem); }
.page-hero p{ color:var(--sawdust); margin-top:10px; }


/* ---------- CTA / ORCAMENTO NO TOPO ---------- */
.orcamento-topo{
  max-width:1180px; margin:0 auto; padding:26px 6%;
  display:grid; grid-template-columns:1.5fr auto; align-items:center; gap:18px 28px;
  background:var(--walnut); color:var(--paper); border-top:1px solid rgba(184,131,77,.25);
}
.orcamento-copy .eyebrow{ font-family:'Space Mono',monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--oak); margin-bottom:3px; }
.orcamento-copy h2{ font-family:'Fraunces',serif; font-size:clamp(1.45rem,3vw,2rem); font-weight:600; }
.orcamento-copy p{ color:var(--sawdust); font-size:.9rem; max-width:720px; margin-top:4px; }
.btn-whatsapp{ white-space:nowrap; background:var(--falcon); color:var(--paper); box-shadow:0 8px 20px -14px rgba(0,0,0,.45); }
.btn-whatsapp:hover{ background:#8c3018; color:var(--paper); }
.orcamento-info{ grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding-top:5px; border-top:1px solid rgba(234,217,184,.13); }
.orcamento-info span{ display:block; font-family:'Space Mono',monospace; font-size:.62rem; text-transform:uppercase; color:var(--oak); letter-spacing:.06em; margin-bottom:2px; }
.orcamento-info strong{ font-size:.76rem; font-weight:400; color:rgba(250,246,236,.8); }
.catalogo-barra{ max-width:1180px; margin:0 auto; padding:20px 6% 0; display:flex; justify-content:space-between; gap:18px; align-items:end; }
.catalogo-barra div{ font-family:'Fraunces',serif; font-size:1.45rem; color:var(--walnut); font-weight:600; }
.catalogo-barra span{ font-family:'Space Mono',monospace; font-size:.7rem; color:#8a7a68; text-transform:uppercase; letter-spacing:.04em; }

/* ---------- FILTROS DE CATEGORIA ---------- */
.filtros{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  padding: 18px 6% 0; max-width:1180px; margin:0 auto;
}
.filtro-btn{
  font-family:'Space Mono', monospace; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.04em;
  border: 1px solid var(--walnut); padding:8px 16px; border-radius:20px; color:var(--walnut);
  transition: all .15s;
}
.filtro-btn:hover, .filtro-btn.ativo{ background:var(--walnut); color:var(--paper); }

/* ---------- GALERIA ---------- */
.galeria{ padding: 40px 6% 70px; max-width:1180px; margin:0 auto; }
.grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:32px 26px;
}
.card{
  background: var(--paper); border:1px solid rgba(44,24,16,0.12); overflow:hidden;
  transform: rotate(-0.5deg); transition: transform .2s, box-shadow .2s;
}
.card:nth-child(even){ transform: rotate(0.4deg); }
.card:hover{ transform: rotate(0deg) translateY(-4px); box-shadow:0 14px 24px -14px rgba(44,24,16,0.35); }
.foto-btn{
  position:relative; display:block; width:100%; padding:0; border:0; background:var(--oak);
  cursor:zoom-in; text-align:left;
}
.card-foto{ aspect-ratio:4/3; width:100%; object-fit:cover; display:block; background:var(--oak); transition:transform .25s, filter .25s; }
.foto-btn:hover .card-foto, .foto-btn:focus-visible .card-foto{ transform:scale(1.025); filter:brightness(.92); }
.foto-ver{
  position:absolute; right:10px; bottom:10px; padding:6px 10px; border-radius:999px;
  background:rgba(26,15,10,.82); color:var(--paper); border:1px solid rgba(234,217,184,.45);
  font-family:'Space Mono', monospace; font-size:.62rem; text-transform:uppercase; letter-spacing:.04em;
  opacity:0; transform:translateY(4px); transition:opacity .2s, transform .2s;
}
.foto-btn:hover .foto-ver, .foto-btn:focus-visible .foto-ver{ opacity:1; transform:translateY(0); }
.foto-placeholder{
  aspect-ratio:4/3; background:var(--oak);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:20px;
  color:rgba(250,246,236,0.75); font-family:'Space Mono', monospace; font-size:0.72rem;
  text-transform:uppercase; letter-spacing:0.05em;
}
.card-info{ padding:16px 18px 20px; }
.card-cat{ font-family:'Space Mono', monospace; font-size:0.68rem; color:var(--oak); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:6px; }
.card-nome{ font-family:'Fraunces', serif; font-weight:600; font-size:1.05rem; margin-bottom:4px; }
.card-desc{ font-size:0.85rem; color:#6b5c4d; margin-bottom:10px; }
.card-preco{ font-family:'Space Mono', monospace; font-size:0.9rem; color:var(--falcon); font-weight:700; }

.vazio{ text-align:center; padding:60px 20px; color:#8a7a68; font-family:'Space Mono', monospace; font-size:0.9rem; }

/* ---------- IMAGEM EM TELA CHEIA ---------- */
body.modal-aberto{ overflow:hidden; }
.image-modal{
  position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center;
  padding:24px;
}
.image-modal.aberto{ display:flex; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(8,5,3,.88); backdrop-filter:blur(3px); }
.image-modal-content{
  position:relative; z-index:1; width:min(1100px, 96vw); max-height:94vh;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.image-modal-media{
  width:100%; height:min(78vh, 760px); display:flex; align-items:center; justify-content:center;
  background:rgba(250,246,236,.06); border:1px solid rgba(234,217,184,.24); border-radius:10px;
  padding:14px; box-shadow:0 24px 70px rgba(0,0,0,.45);
}
.image-modal-media img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; border-radius:6px; }
.image-modal-close{
  position:absolute; top:-10px; right:-10px; z-index:2; width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(234,217,184,.4); background:var(--falcon); color:var(--paper);
  font-size:1.8rem; line-height:1; cursor:pointer; box-shadow:0 8px 22px rgba(0,0,0,.35);
}
.image-modal-caption{
  color:var(--paper); font-family:'Fraunces',serif; font-size:1.1rem; font-weight:600;
  text-align:center; max-width:90%;
}
@media (hover:none){
  .foto-ver{ opacity:1; transform:none; }
}
@media (max-width:640px){
  .image-modal{ padding:14px; }
  .image-modal-media{ height:78vh; padding:8px; }
  .image-modal-close{ top:-6px; right:-6px; width:38px; height:38px; font-size:1.55rem; }
  .image-modal-caption{ font-size:1rem; }
}

/* ---------- LOGIN ---------- */
.login-box{
  max-width:380px; margin: 80px auto; background:var(--paper);
  border:1px solid rgba(44,24,16,0.15); padding:40px 34px; border-radius:3px;
}
.login-box h1{ font-family:'Fraunces', serif; font-size:1.5rem; margin-bottom:22px; text-align:center; }

/* ---------- FORMS ---------- */
.form-field{ margin-bottom:18px; }
.form-field label{ display:block; font-size:0.82rem; font-weight:600; margin-bottom:6px; color:var(--walnut); }
.form-field input[type=text], .form-field input[type=password], .form-field textarea, .form-field select{
  width:100%; padding:11px 13px; border:1px solid rgba(44,24,16,0.25); border-radius:3px;
  font-family:'Work Sans', sans-serif; font-size:0.92rem; background:#fff;
}
.form-field textarea{ min-height:100px; resize:vertical; }
.form-field input[type=file]{ font-size:0.85rem; }

.btn{
  display:inline-block; background:var(--falcon); color:var(--paper);
  padding:12px 26px; border-radius:3px; font-weight:600; font-size:0.9rem;
  border:none; cursor:pointer; transition: background .15s, transform .15s;
}
.btn:hover{ background:#8c3018; transform:translateY(-1px); }
.btn-secundario{ background:transparent; border:1px solid var(--walnut); color:var(--walnut); }
.btn-secundario:hover{ background:var(--walnut); color:var(--paper); }
.btn-full{ width:100%; }

/* ---------- ADMIN DASHBOARD ---------- */
.admin-wrap{ max-width:1000px; margin:0 auto; padding:40px 6% 70px; }
.admin-topo{ display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; flex-wrap:wrap; gap:14px; }
.admin-topo h1{ font-family:'Fraunces', serif; font-size:1.7rem; }

.tabela-produtos{ width:100%; border-collapse:collapse; }
.tabela-produtos th{
  text-align:left; font-family:'Space Mono', monospace; font-size:0.7rem; text-transform:uppercase;
  letter-spacing:0.05em; color:var(--oak); padding:10px 12px; border-bottom:2px solid var(--walnut);
}
.tabela-produtos td{ padding:12px; border-bottom:1px solid rgba(44,24,16,0.1); font-size:0.88rem; vertical-align:middle; }
.tabela-produtos img{ width:56px; height:56px; object-fit:cover; border-radius:3px; }
.thumb-vazio{
  width:56px; height:56px; background:var(--sawdust); border-radius:3px;
  display:flex; align-items:center; justify-content:center; font-size:0.6rem; color:var(--oak); text-align:center;
}
.acoes{ display:flex; gap:8px; }
.acoes .btn{ padding:6px 14px; font-size:0.78rem; }
.acoes form{ display:inline; }
.btn-perigo{ background:#7a2c1a; }
.btn-perigo:hover{ background:#5c2013; }

footer{
  background: var(--walnut-deep); color:rgba(250,246,236,0.5);
  text-align:center; padding:16px 6%; font-size:0.7rem;
}

@media (max-width:820px){
  .orcamento-topo{ grid-template-columns:1fr; }
  .btn-whatsapp{ justify-self:start; }
  .orcamento-info{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  nav a:not(.destaque):not(.cta-topo){ display:none; }
  nav{ gap:10px; }
  .cta-topo{ padding:7px 11px !important; font-size:.75rem; }
  .catalogo-barra{ flex-direction:column; align-items:flex-start; gap:4px; }
  .tabela-produtos{ font-size:0.78rem; }
}