:root{
  --dourado:#b79d62;
  --preto:#151513;
  --escuro:#1c1c1c;
  --branco:#ffffff;
}

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

body{
  font-family: Arial, Helvetica, sans-serif;
  background:var(--preto);
  color:var(--dourado);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.top-bar{background:var(--escuro);color:var(--dourado);padding:6px;text-align:center;font-size:0.95rem}
.header-container{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;max-width:1200px;margin:0 auto}
.logo{display:flex;align-items:center;gap:10px}
.logo-img{width:56px;height:56px;border-radius:10px;box-shadow:0 0 10px rgba(183,157,98,0.4)}
.logo h1{font-size:1.6rem;color:var(--dourado)}
nav ul{list-style:none;display:flex;gap:20px}
nav a{color:var(--dourado);text-decoration:none;font-weight:bold}
.btn-header{background:var(--dourado);color:#000;padding:8px 14px;border-radius:8px;border:none;cursor:pointer}

.hero{display:flex;align-items:center;justify-content:center;padding:120px 20px;text-align:center}
.hero-text h2{font-size:2.2rem;color:var(--dourado);margin-bottom:10px}
.hero-text p{max-width:760px;margin:0 auto 18px;color:#d9c88b}

section{padding:40px 20px;margin:20px auto;max-width:1000px;background:var(--escuro);border-radius:10px;box-shadow:0 4px 10px rgba(0,0,0,0.6)}
section h2{text-align:center;margin-bottom:12px;border-bottom:2px solid var(--dourado);padding-bottom:8px;color:var(--dourado)}

.cards{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin-top:20px}
.card{background:#000;padding:18px;border-radius:10px;width:260px;text-align:center;opacity:0;transform:translateY(25px);transition:all .4s ease}
.card.visible{opacity:1;transform:none}
.card img{width:70px;margin-bottom:12px}
.card h3{color:var(--dourado);margin-bottom:8px}
.card p{color:#d9c88b;margin-bottom:12px}

button{background:var(--dourado);color:#000;border:none;padding:10px 16px;border-radius:8px;cursor:pointer}
button:hover{transform:scale(1.02)}

form{display:flex;flex-direction:column;gap:10px}
input,textarea,select{padding:10px;border-radius:8px;border:2px solid var(--dourado);background:var(--preto);color:var(--dourado)}
input:focus,textarea:focus,select:focus{outline:none;border-color:#ffdd7a}

#valorTotal{text-align:center;color:var(--dourado);font-weight:bold;margin-top:6px}

.container{max-width:920px;margin:20px auto;padding:10px}
.top-bar-small .top-bar{background:var(--dourado);color:var(--preto)}

.painel-container{max-width:1200px;margin:20px auto}
table{width:95%;margin:10px auto;border-collapse:collapse}
th,td{border:1px solid var(--dourado);padding:8px;text-align:center;background:#0b0b0b;color:var(--dourado)}
th{background:var(--dourado);color:#000}

#preview-imagem img{max-width:100%;border-radius:8px;border:2px solid var(--dourado);margin-top:8px}
#qr-code-img{max-width:300px}

/* novas classes para variáveis dinâmicas e contador */
#variaveis-container { margin-top:10px; padding-top:6px; border-top:1px dashed rgba(183,157,98,0.12); }
.variavel-bloco input { width: 100%; max-width:360px; padding:8px; border-radius:6px; border:1px solid rgba(183,157,98,0.6); background: #0b0b0b; color:var(--dourado); }

/* contador (aplica ao span que o JS cria) */
#variaveis-container p { color: #d9c88b; }

/* data input styling (melhora visual em navegadores) */
input[type="date"] { max-width:220px; }

/* responsividade */
@media (max-width:768px){
  .header-container{flex-direction:column;gap:8px}
  nav ul{flex-wrap:wrap;justify-content:center}
  .cards{flex-direction:column;align-items:center}
  .hero{padding:80px 12px}
  .variavel-bloco { flex-direction:column; align-items:flex-start; }
  .variavel-bloco label { margin-bottom:6px; }
}

/* ========================================================= */
/* ==============    NOVO BOTÃO "COMO FUNCIONA"  ============ */
/* ========================================================= */

.como-funciona-btn {
  background: transparent;
  border: 2px solid var(--dourado);
  padding: 8px 16px;
  color: var(--dourado);
  border-radius: 8px;
  cursor: pointer;
  transition: .3s;
  font-weight: bold;
}

.como-funciona-btn:hover {
  background: var(--dourado);
  color: #000;
  transform: scale(1.04);
}

/* Modal */
.modal-como-funciona {
  display: none;
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.75);
  justify-content:center;
  align-items:center;
  z-index: 9999;
}

.modal-content {
  background: var(--escuro);
  padding: 24px;
  width: 90%;
  max-width: 600px;
  border-radius: 12px;
  border: 2px solid var(--dourado);
  text-align: left;
  animation: zoomIn .25s ease;
  color: var(--dourado);
}

.close-modal {
  float:right;
  cursor:pointer;
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--dourado);
}

.close-modal:hover {
  color:#fff;
}

@keyframes zoomIn {
  from { transform:scale(0.6); opacity:0; }
  to   { transform:scale(1);   opacity:1; }
}

@media (max-width:500px){
  .modal-content {
    padding: 18px;
  }
}
/* TOPO PADRÃO */
.header-principal {
    width: 100%;
    background: #0d0d0d;
    border-bottom: 1px solid #222;
}

.top-bar {
    background: #111;
    padding: 6px 18px;
    color: var(--dourado);
    font-size: 0.9rem;
    text-align: center;
}

/* MENU PRINCIPAL */
.menu-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 30px;
    background: #0d0d0d;
}

/* LOGO */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-img {
    width: 48px;
    height: 48px;
}

.logo-text {
    font-size: 1.6rem;
    color: var(--dourado);
    font-weight: bold;
}

/* LINKS */
.menu-links a {
    text-decoration: none;
    color: var(--dourado);
    margin-left: 18px;
    font-size: 1.1rem;
    transition: 0.2s;
}

.menu-links a:hover {
    opacity: 0.7;
}