*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  font-family: Georgia, serif;
  color:#2b2b2b;
  background:#cfe1c8; /* verde da capa para as laterais */
}

/* Botão fixo de som */
.mute-btn{
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 999;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  background: rgba(63, 122, 87, .92);
  color: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}

/* ===== CAPA ===== */
.capa{
  background-color: #cfe1c8;
  display:flex;
  justify-content:center;
  padding: 0;
}

.capa__inner{
  position: relative;
  width: min(720px, 92vw);
  line-height: 0; /* remove espaço fantasma abaixo da img */
}

.capa__img{
  width: 100%;
  height: auto;
  display: block;
}

.capa__overlay{
  position: absolute;
  inset: 0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  text-align:center;
}

.capa__titulo{
  margin:0;
  color:#6a3f54;
  text-transform:uppercase;
  letter-spacing:2px;
}

.capa__linha-pequena{
  display:block;
  font-size: 34px;
  margin-bottom: 10px;
}

.capa__linha-grande{
  display:block;
  font-size: 58px;
}

/* ✅ Botões na altura da porta/caminho da imagem */
.capa__botoes{
  margin: 0 0 34%;
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}

.btn{
  border: none;
  background: #3f7a57;
  color:#fff;
  padding: 12px 22px;
  border-radius: 999px;
  cursor:pointer;
  font-weight:700;
}

.btn:hover{ filter:brightness(1.05); }

.btn-mini{
  margin-top: 10px;
  padding: 9px 16px;
  font-size: 14px;
}

/* ===== MOSTRUÁRIO: painel central do mesmo tamanho da capa ===== */
.mostruario{
  padding: 0;                 /* painel controla o padding */
  background: #cfe1c8;         /* laterais iguais à capa (sem quebra feia) */
}

.mostruario__panel{
  width: min(720px, 92vw);
  margin: 0 auto;
  padding: 40px 0 60px;   /* respiro extra pra transição suave */

  /* ✅ topo começa na cor da base da capa e dissolve no rosa pontilhado */
  background:
    linear-gradient(to bottom,
      rgb(199,196,132) 0,
      rgba(199,196,132,0) 200px),
    radial-gradient(#d9b7d9 1.2px, transparent 1.2px),
    #f6f0f7;
  background-size: 100% 200px, 18px 18px, auto;
  background-repeat: no-repeat, repeat, no-repeat;
  background-position: top, top, top;
}

.grid{
  width: min(700px, 92vw); /* um tiquinho maior */
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;               /* aproxima um pouco */
}

/* só pra dar mais ar pro título */
.mostruario__titulo{
  margin: 10px 0 18px;
}
/* CARD */
.card{
  background: transparent;
  border-radius: 18px;
}

.card__frame{
  background: #ffffff;         /* ✅ fundo branco sólido (disfarça quadriculado) */
  border-radius: 14px;
  border: 6px solid #4a3226;
  padding: 16px;
  height: 250px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
}

.card__frame img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:block;
}

.card__bottom{
  margin-top: 10px;
  background: #4a3226;
  border-radius: 0 0 14px 14px;
  padding: 14px 14px 16px;
  text-align:center;
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
}

.card__nome{
  margin: 0 0 8px;
  color: #2f6b45;
  font-size: 18px;
  font-weight: 700;
}

.card__preco{
  margin: 0;
  color: #ffffff;
  font-size: 22px;
  font-weight: 800;
}

/* ===== PEDIDOS: painel central do mesmo tamanho da capa ===== */
.pedidos{
  padding: 0;
  background:#cfe1c8;
  text-align:center;
}

.pedidos__panel{
  width: min(720px, 92vw);
  margin: 0 auto;
  padding: 50px 16px 70px;
  background:#ffffff;
}

.pedidos__titulo{
  margin:0 0 10px;
  color:#3f7a57;
  font-size: 40px;
}

.pedidos__texto{
  margin:0;
  color:#333;
  font-size: 18px;
}

.pedido-form{
  width: min(520px, 92vw);
  margin: 18px auto 0;
  display: grid;
  gap: 10px;
}

.pedido-form input,
.pedido-form textarea{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.18);
  font-family: inherit;
  font-size: 16px;
}

.pedido-form textarea{
  min-height: 110px;
  resize: vertical;
}

/* Responsivo */
@media (max-width: 980px){
  .grid{ grid-template-columns: repeat(2, 1fr); width: min(640px, 92vw); }
  .capa__linha-grande{ font-size: 50px; }
}
@media (max-width: 560px){
  .grid{ grid-template-columns: 1fr; width: min(520px, 92vw); }
  .mostruario__titulo{ font-size: 40px; }
  .capa__linha-pequena{ font-size: 26px; }
  .capa__linha-grande{ font-size: 42px; }
}