/* --- Reset / base --- */
    :root{
      --accent:#D97706; /* laranja quente */
      --muted:#6B7280;
      --bg:#FAFAFB;
      --card:#FFFFFF;
      --radius:16px;
      --maxw:1100px;
      --shadow: 0 8px 24px rgba(16,24,40,0.08);
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      background:#f8f0e6;
      color:#0f172a;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      padding:32px 18px;
      display:flex;
      justify-content:center;
      align-items:flex-start;
      gap:24px;
    }
    nav {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 5px;
   }
    .container{max-width:var(--maxw); width:100%;}
    /* --- Header / Hero --- */
    header{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px}
    .brand{display:flex; align-items:center; gap:12px}
    .logo{
      width:64px; height:64px; border-radius:12px; background:transparent;
      display:flex; align-items:center; justify-content:center; font-weight:700; box-shadow:var(--shadow);
    }
    .brand h1{font-size:20px; margin:0; line-height:1}
    .brand p{margin:0; color:var(--muted); font-size:13px}
    nav a{margin-left:14px; color:var(--muted); text-decoration:none; font-size:14px; font-weight:bold; text-decoration: underline;}
    /* --- Layout do Menu --- */
    .grid{display:grid; grid-template-columns: 1fr 380px; gap:28px; align-items:start}
    @media (max-width:980px){ .grid{grid-template-columns:1fr} }
    /* --- Cartão Produto --- */
    .card{background:var(--card); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
    .gallery{display:grid; grid-template-columns:1fr 1fr; gap:8px}
    .gallery img{width:100%; height:260px; object-fit:cover; border-radius:10px}
    .title{font-size:22px; margin:10px 0 6px}
    .price{font-size:20px; color:var(--accent); font-weight:700}
    .desc{color:var(--muted); line-height:1.5; margin:12px 0; text-align: center;}
    .buy-row{display:flex; gap:10px; margin-top:14px; text-align: center;}
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      padding:12px 16px; border-radius:12px; border:0; cursor:pointer;
      font-weight:600;
      box-shadow: 0 6px 18px rgba(16,24,40,0.06);
    }
    .btn-primary{background:var(--accent); color:white;}
    .info-list{display:flex; gap:12px; flex-wrap:wrap; margin-top:12px}
    .chip{background:#FFF7ED; color:#92400E; padding:8px 10px; border-radius:999px; font-size:13px}
    /* --- Caixa direita --- */
    aside .seller{display:flex; gap:12px; align-items:center}
    .seller img{width:64px;height:64px;border-radius:12px; object-fit:cover}
    .seller h3{margin:0}
    .seller p{margin:0;color:var(--muted);font-size:13px}
    .list {margin-top:16px}
    .list .item{display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px dashed #F1F5F9}
    .list .item b{display:block}
    .socials{display:flex; gap:8px; margin-top:14px}
    .socials a{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; text-decoration:none; color:var(--muted); background:#fff}
    /* --- Footer --- */
    footer{margin-top:28px; color:var(--muted); font-size:13px; text-align:center}
    /* --- modelo de lightbox --- */
    .lightbox{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(2,6,23,0.6); z-index:60}
    .lightbox img{max-width:92%; max-height:82%; border-radius:12px; box-shadow:0 18px 48px rgba(2,6,23,0.6)}
    .show{display:flex}
    /* --- small helpers --- */
    .muted{color:var(--muted)}
    .small{font-size:15px;}
    ol {
      padding-left: 20px;
      font-size: 14px;
    }
    h2{
      text-align: center;
      font-weight: bold;
      text-decoration: underline;
    }
    .historia h1{
      text-align: center;
      font-weight: bold;
      font-size: 28px;
      margin-bottom: 20px;
      text-decoration: underline;
    }
    .sobre{
      text-align: center;
      font-weight: bold;
      font-size: 28px;
      margin-bottom: 20px;
      text-decoration: underline;
    }
    /** Localização CSS **/
    .linha-Endereço{
      text-align: center;
    }
    .info-box {
      text-align: center;
}
    .container h1 {
      text-align: center;
      text-decoration: underline;
}
    .horario-item {
      font-weight: bold;
    }
 /** newslleter CSS **/
 form { /* Seletor de Tag (elemento) */
    background-color: white; /* Define a cor de fundo do formulário (branco) */
    max-width: 500px; /* Define a largura máxima de 500px */
    margin: 0 auto; /* Centraliza o formulário horizontalmente */
    padding: 30px; /* Adiciona espaço interno de 30px em todos os lados */
    border-radius: 10px; /* Arredonda os cantos com raio de 10px */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Adiciona sombra suave ao redor do formulário */
}

label { /* Seletor de Tag (elemento) */
    display: block; /* Faz o label ocupar toda a linha */
    color: #000000; /* Define a cor do texto (preto) */
    font-weight: bold; /* Deixa o texto em negrito */
    margin-bottom: 5px; /* Adiciona espaço de 10px abaixo do label */
    margin-top: 15px; /* Adiciona espaço de 15px acima do label */
}

input[type="text"],
input[type="email"],
input[type="tel"],
select { /*Seletor de Atributo (usa colchetes []) */
    width: 100%; /* Faz o campo ocupar 100% da largura disponível */
    padding: 10px; /* Adiciona espaço interno de 10px em todos os lados */
    border: 3px solid #0e0e0e; /* Define borda sólida de 3px na cor preta */
    border-radius: 50px; /* Arredonda os cantos com raio de 50px (formato de pílula) */
    font-size: 20px; /* Define o tamanho da fonte */
    margin-bottom: 10px; /* Adiciona espaço de 10px abaixo do campo */
}

select { /* Seletor de Tag (elemento) */
    cursor: pointer; /* Muda o cursor para "mãozinha" ao passar sobre o select */
}

input[type="checkbox"] { /*Seletor de Atributo (usa colchetes []) */
    width: 18px; /* Define a largura do checkbox */
    height: 18px; /* Define a altura do checkbox */
    margin-right: 10px; /* Adiciona espaço de 10px à direita do checkbox */
    cursor: pointer; /* Muda o cursor para "mãozinha" ao passar sobre o checkbox */
    accent-color: #495c73; /* Define a cor do checkbox quando marcado (azul acinzentado) */
}
 input[type="checkbox"] { /*Seletor de Atributo (usa colchetes []) */
    width: 18px; /* Define a largura do checkbox */
    height: 18px; /* Define a altura do checkbox */
    margin-right: 10px; /* Adiciona espaço de 10px à direita do checkbox */
    cursor: pointer; /* Muda o cursor para "mãozinha" ao passar sobre o checkbox */
    accent-color: #495c73; /* Define a cor do checkbox quando marcado (azul acinzentado) */
}

.checkbox-item { /* Seletor de Class (usa ponto .) */
    display: flex; /* Ativa o layout flexível (flexbox) */
    align-items: center; /* Alinha os itens verticalmente ao centro */
    margin-bottom: 10px; /* Adiciona espaço de 10px abaixo do item */
}

button[type="submit"] {  /*Seletor de Atributo (usa colchetes []) */
    width: 100%; /* Faz o botão ocupar 100% da largura disponível */
    padding: 12px; /* Adiciona espaço interno de 12px em todos os lados */
    background-color: #495c73; /* Define a cor de fundo do botão (azul acinzentado) */
    color: white; /* Define a cor do texto (branco) */
    border: none; /* Remove a borda padrão do botão */
    border-radius: 50px; /* Arredonda os cantos com raio de 50px (formato de pílula) */
    font-size: 20px; /* Define o tamanho da fonte */
    font-weight: bold; /* Deixa o texto em negrito */
    cursor: pointer; /* Muda o cursor para "mãozinha" ao passar sobre o botão */
    margin-top: 10px; /* Adiciona espaço de 10px acima do botão */
}
.cadp{
  text-align: center;
  font-size: 18px;
  margin-bottom: 20px;
  font-weight: bold;
}
/* --- Audio css --- */
.feed {
  padding-left: 50px;
  text-decoration: underline;
}
/** Spotify css **/
.spotify-embed {
  border: 0;           
  border-radius: 12px; 
  width: 320px;         
  height: 152px;        
}
.youtube-embed {
  border: 0;           
  border-radius: 12px; 
  width: 560px;         
  height: 315px;        
}