html, body {
  width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'ABeeZee', sans-serif;
  font-weight: 400;
  background-color: #FFF2F1;
  /*#f2d8d7 outra opção de cor de fundo
  a que tava #FFF2F1*/
}



.btn-delivery img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  position: fixed;
  bottom: 60px;     /* Distância do rodapé */
  right: 0 ;      /* Distância da lateral direita */
  z-index: 1000;    /* Fica acima de outros elementos */
  background-color: transparent;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #FFBBB5;
  color: #4F2819;
  padding: 20px 10px;
  text-align: center;
  z-index: 9999;
  display: none; /* será ativado pelo JS */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

.cookie-buttons {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.cookie-banner button {
  padding: 10px 25px;
  font-size: 14px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#accept-cookies {
  background-color: #4F2819; /* verde */
  color: white;
}

#decline-cookies {
  background-color: #4F2819; /* vermelho */
  color: white;
}



.navbar {
  background-color: #FFBBB5;
  color: #4F2819;
  padding: 1px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-height: 100px;
  position: sticky;
}

.logo img {
  width: 100px;
  height: auto;
}

.nav-links ul {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  /* margin-left: 200px; */
  gap: 40px;
  margin:0 20px;
  padding: 0;
}

/* menu mobile (inicial escondido) */
.navegacao-responsivo {
  display: none;
  /* se usar transition: opacidade, também configure height/overflow conforme design */
}

.navegacao-responsivo.show-menu {
  display: block;
}

/* dropdowns */
.dropdown-content {
  display: none;
  position: absolute; /* ou relative conforme seu layout */
  z-index: 50;
}

.dropdown-content.show {
  display: block;
}

/* z-index do menu mobile pra ficar acima do resto (ajuste conforme seu layout) */
.navegacao-responsivo.show-menu {
  z-index: 1000;
}


.nav-links a {
  text-decoration: none;
  color: #3a1f1f;
  font-size: 20px;
  font-weight: 500;
}

button.dropbtn:hover,
.nav-links a:hover {
  color: #682b13;
  font-weight:bold;
}

img {
  max-width: 100%;
  height: auto;
}


button.dropbtn {
  color: #3a1f1f;
  font-size: 20px;
  background-color: #FFBBB5;
  padding: 5px;
  border: none;
  cursor: pointer;
}

.slider {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-height: 400px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.slides {
  width: 100%;
  height: auto;
  display: flex;
  transition: transform 0.5s ease-in-out;
  z-index: -1; 
}

.slide img {
  object-fit: cover;
  overflow: hidden;
}

.slide {
  min-width: 100%;
  box-sizing: border-box;
  transition: opacity 0.5s;
}

button.prev,
button.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  color: #FFBBB5;
  border: none;
  font-size: 4rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  z-index: 11;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  /*-webkit-text-stroke: 1px rgb(255, 253, 253) borda na seta */
  pointer-events: auto;
}

button.prev {
  left: 10px;
}

button.next {
  right: 10px;
}

.texto-apresentacao {
  margin: 0 auto;
  padding: 0;
  line-height: 1.8;
}

.texto-apresentacao h2 {
  margin: 0 auto;
  padding: 0;
}

.texto-apresentacao p {
  padding: 0 40px;
  top: 0;
  font-weight: 600;
}

.mais-vendidos {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
  text-align: center;
}

.mais-vendidos h1 {
  margin: 0 auto;
  padding: 0;
  color: #4f2819;
}

.produtos-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  object-fit: contain;
  padding: 0 1rem;
  justify-content: center;
  align-items: center;
  margin: 0 5px;
}

.produto {
  width: 300px;
  height: 300px;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.produto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: flex;
  justify-content: center;
  transition: transform 0.6s ease;
}

.produto:hover img {
  transform: scale(1.05);
}

.produto figcaption {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1rem;
}

.produto h3 {
  font-size: 25px;
  margin: 0.5rem 0;
  color: #FFBBB5;
}

.produto p {
  font-size: 15px;
}

h1 {
  margin: 15px;
  color: #4F2819;
  text-align: center;
  font-size: 45px;
}

h2 {
  color: #4F2819;
  text-align: center;
  font-size: 45px;
}

h3 {
  color: #4F2819;
  text-align: center;
  font-size: 45px;
}

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

p {
  text-align: center;
  padding: 0.5rem;

}

text {
  font-family: 'Arial', sans-serif;
  color: #4F2819;
  justify-content: center;
  /* horizontal */
  align-items: center;
  /* vertical */
  height: auto;
  margin: 5px;
  padding: 0 30px;

}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}


footer {
  display: flex;
  background-color: #814832;
  color: white;
  padding: 10px;
  font-family: 'Arial', sans-serif;
  /* bottom: 0; */
  min-height: 300px;
  flex-direction: column;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  /* padding: 20px; */
  flex: 1 1 200px;
  min-width: 200px;
  font-size: 20px;
  align-items: center;
  text-align: center;
  box-sizing: border-box; /* garante que o padding conte dentro da largura */
  gap: 20px;
}

.footer-logo img {
  max-height: 200px;
  max-width: 200px;
  /* padding: 50px 0; */
  /* margin-bottom: 20px; */
  filter: drop-shadow(0 0px 10px rgb(219, 109, 109))

}

.logo-footer {
   align-items: center;
  text-align: center;
}

.footer-section,
.footer-location {
  max-width: 250px;
  padding: 0;
}

.footer-section  .footer-location {
  margin-bottom: 10px;
  font-size: 16px;
}

.footer-section a{
   text-align: center;
}


.footer-section p,
.footer-location p {
  margin: 4px 0;
  font-size: 16px;
}

.footer-section p em {
  font-style: italic;
}

footer h2 {
  font-size: 18px; 
  color: #fff;
    
}

.small-text {
  font-size: 12px;
}

.footer-social {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
  flex-wrap: wrap;
  font-size: 37px;
  
}

.footer-social a:hover {
  color: #FFBBB5;
}

.span_footer{
   width: 100%;
    text-align: center;
    font-size: 0.9rem;
    color: white;
    margin-top: 0.5rem;
}


.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  z-index: 10;
  background-color: #FFBBB5;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.dropdown-content a {
  color: #3a1f1f;
  padding: 16px 20px 16px 20px;
  text-decoration: none;
  display: block;
  border: #3a1f1f solid 1px;
}

.dropdown-content.show {
  display: block;
  z-index: 11;
}

.sobre-container {
  display: flex;
  flex-direction: column;
  margin: 0 20px;
  justify-content: center;
  align-items: center;
  text-align: left;
  background-color: #FFBBB5;
  border-radius: 50px;
  padding: 20px;
  box-sizing: border-box; /* garante que o padding conte dentro da largura */
  max-width: 100%;
  overflow-wrap: break-word; /* quebra palavras longas */
  word-break: break-word;
}

.exterior {
  width: 100%;
  display: flex;
  max-width: 50%; 
  /* max-height: 500px; */
  border-radius: 20px;
  border: #3a1f1f solid 2px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.texto-sobre p{
  text-align: left;
  /* min-width: 300px; */
}



.titulo-sobre {
  font-size: 1.5rem;
  font-weight: bold;
}







.formulario {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
  margin: 40px auto;
}

.form1 {
  width: 100%;
  max-width: 700px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

/* Estilização dos textos */
.form1 h1 {
  text-align: center;
  margin-bottom: 15px;
}

.form1 p {
  text-align: left;
  margin-bottom: 20px;
}

/* Inputs proporcionais */
.form1 input[type="text"],
.form1 input[type="tel"],
.form1 input[type="email"],
.form1 input[type="submit"],
.form1 textarea {
  width: clamp(180px, 80%, 700px);
  padding: 5px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.form1 input[type="text"],
.form1 input[type="tel"],
.form1 input[type="email"],
.form1 textarea { /* Incluído textarea */
  width: 100%; /* Ajustado para 100% para melhor responsividade */
  padding: 8px; /* Aumentado padding */
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box; /* Garante que o padding não aumente a largura */
}

/* 2.4.7 FOCO VISÍVEL (CRÍTICO!) */
.form1 input:focus,
.form1 textarea:focus,
.botao:focus {
    outline: 2px solid #762d2d; /* Adiciona um contorno forte */
    outline-offset: 2px;
    border-color: #762d2d;
    box-shadow: 0 0 5px rgba(118, 45, 45, 0.5);
}
/* Estilização do botão */
.botao {
  cursor: pointer;
  background-color: #4d2323;
  color: white;
  font-weight: bold;
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  transition: 0.3s;
  
  /* 2.4.3 Centralização Correta do Botão */
  display: block; 
  margin: 20px auto; 
  width: fit-content;
}

.botao:hover {
  background-color: #762d2d;
}

/* Estilos para o Modal de Confirmação (Ajuste de Foco) */
#modalContent {
    outline: none; /* remove o outline feio quando JS move o foco */
}

/* === CORREÇÃO DE ACESSIBILIDADE: RESET VISUAL DO FIELDSET === */

/* Remove a borda padrão do fieldset */
.form1 fieldset {
    border: none;
    padding: 0;
    margin: 0 0 20px 0; /* Adiciona espaçamento após o grupo */
    width: 100%;
}

/* Estiliza o legend para parecer um título normal */
.form1 legend {
    font-size: 1.2rem; /* Tamanho do título da seção */
    font-weight: bold;
    margin-bottom: 10px;
    padding: 0;
    display: block; /* Garante que o legend ocupe a largura total */
    border: none; /* Remove a borda padrão do legend */
}



.contato-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin: 40px 0;
  flex-wrap: wrap;
  padding: 15px;
  box-sizing: border-box;
  width: 100%;

}

.icone-contato {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: bold;
  text-align: center;
 
}

.icone-bg {
  /* background-color: #8B0000; */
  /* border-radius: 50%;
  width: 70px;
  height: 70px; */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
  flex-shrink: 0;
  cursor:pointer
}

 .icone-bg i {
  font-size: 40px;
  color: #4d2323;
  
} 

.icone-bg i:hover {
  color: #FFBBB5;
}


.btn-forncedor{
  background-color: #4d2323;
  color: white;
  font-weight: bold;
  border: none;
  padding: 20px;
  border-radius: 40px;
  transition: 0.3s;
  align-items: center;
  display: block;
  margin: 0 auto;
  cursor:pointer
}

/* Ajuste para mensagens de erro: Cor forte e bom contraste */
.error-message {
    color: #8B0000; /* Vermelho escuro para contraste */
    font-size: 0.9rem;
    font-weight: bold;
    margin-top: -10px; /* Alinha com o campo acima */
    margin-bottom: 10px;
    display: block; /* Garante que o span fique em sua própria linha */
}

.btn-forncedor:hover {
  color: #FFBBB5;
}

.curiosidades {
  display: flex;
  flex-direction: column;
  margin: 30px;
  overflow-x: hidden;
}

.motion {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding: 20px;
  width: 30%;
}

.motions img {
  width: 20%;
}

.motions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-bottom: -35px;
}

.tabela-curiosidades {
  width: 100%;
  font-family: 'Segoe UI', sans-serif;
  margin-top: 30px;
  text-align: center;
  overflow-x: hidden;
  /* Garante que nada ultrapasse */
}

.tabela-curiosidades th,
.tabela-curiosidades td {
  padding: 0;
  word-break: break-word;
  font-size: 28px;
}

caption {
  margin-bottom: 15px;
  padding: 0 20px;
  text-align: center;
  font-size: 28px;
}

.tabela-curiosidades thead th{
  color: #4f2819;
  font-size: 28px;
  font-weight: bold;
}

.tabela-curiosidades tbody td:nth-child(1) {
  background-color: #FFF2F1;
  /* Gelato */
}

.tabela-curiosidades tbody td:nth-child(2) {
  background-color: #FFF2F1;
  /* Sorvete */
}

.tabela-curiosidades tr:hover td {
  background-color: #fcd3d0;
  /* Efeito hover */
}

.texto {
  margin: 20px 0 20px 20px;
  font-size: 17px;
}

.mapa {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
  margin-bottom: 50px;
}




/* MOBILE FIRST: texto colapsado por padrão */
.texto-sobre {
  max-height: 300px;
  overflow: hidden;
  transition: max-height 0.4s ease;
  font-weight: 500;
}

.texto-sobre.expandido {
  height: 2000px; /* ajuste conforme o conteúdo */
}

/* Botão padrão */
.botao-ver-mais {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #4d2323;
  border: none;
  border-radius: 25px;
  color: white;
  font-weight: bold;
  cursor: pointer;
}

 span {
  font-size: 18px;

}

/* --- CORREÇÃO DE ESPAÇAMENTO WCAG 1.4.12 (Nível AA) --- */

/* Seletores de texto principal e áreas de formulário */
.texto-apresentacao p, 
.texto-sobre p,
.form1 p,
.form1 label,
.form1 legend {
    /* 1. ESPAÇAMENTO ENTRE PARÁGRAFOS (2x o tamanho da fonte) */
    margin-top: 0;
    margin-bottom: 2em; 
    
    /* 2. ESPAÇAMENTO ENTRE LINHAS (1.5x o tamanho da fonte - Boa Prática) */
    line-height: 1.5; 

    /* 3. ESPAÇAMENTO ENTRE LETRAS (0.12x o tamanho da fonte) */
    letter-spacing: 0.12em; 

    /* 4. ESPAÇAMENTO ENTRE PALAVRAS (0.16x o tamanho da fonte) */
    word-spacing: 0.16em; /* CORRIGIDO: Adicionado espaçamento mínimo entre palavras */
}

/* Regra para remover a margem do ÚLTIMO parágrafo de um bloco (limpeza) */
.texto-apresentacao p:last-child,
.texto-sobre p:last-child,
.form1 p:last-child {
    margin-bottom: 0;
}

/* --- CORREÇÃO WCAG 1.4.10 (LARGURA E REDIMENSIONAMENTO) --- */

/* 5. LARGURA DE BLOCOS DE TEXTO (Max 80 caracteres) */
/* O 'ch' (caractere) é a unidade mais precisa para limitar a largura de leitura */
.texto-apresentacao, 
.texto-sobre {
     /* AJUSTE PARA DEIXAR MAIS "ESPALHADO": */
    /* Remove a centralização automática e usa padding para preencher a tela */
    margin-left: 20px; 
    margin-right: 20px;
    padding: 0 15px; /* Adiciona padding interno */
    width: auto; /* Permite que o contêiner se expanda */
}

/* 6. CORREÇÃO CRÍTICA DE ZOOM (overflow-x) */
/* Assumindo que a regra estava no seu CSS global, você deve removê-la de lá.
   Se ela estivesse aqui, a regra seria:
   body, html { overflow-x: visible !important; }
   Ou simplesmente DELETAR a regra "overflow-x: hidden;" do seu CSS global.
*/