:root {
  --amarelo: #ffc20e;
  --laranja: #f59a0c;
  --verde: #36b84c;
  --preto: #000;
  --branco: #fff;
  --titulo: "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --corpo: "Open Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; }
body { background: var(--preto); color: var(--branco); font-family: var(--corpo); line-height: 1.5; }
img { max-width: 100%; display: block; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 4px; }

/* Topo */
.topo { padding-top: 24px; }
.faixa-amarela {
  position: relative; background: var(--amarelo); height: 76px;
  display: flex; align-items: center; justify-content: center; padding-left: 110px;
}
.faixa-amarela h1 {
  font-family: var(--titulo); font-weight: 400; color: var(--preto);
  font-size: clamp(2rem, 7vw, 3.4rem); line-height: 1;
}
.logo {
  position: absolute; left: 4%; top: 50%; transform: translateY(-50%);
  width: 130px; height: 130px; border-radius: 50%;
}

/* Texto do topo */
.sobre {
  max-width: 760px; margin: 0 auto; padding: 48px 20px 40px; text-align: center;
  font-size: clamp(1.05rem, 3.2vw, 1.35rem);
}

/* Faixa verde / WhatsApp */
.faixa-verde {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: var(--verde); min-height: 68px; padding: 0 96px 0 20px;
  text-decoration: none; transition: filter .15s;
}
.faixa-verde:hover { filter: brightness(1.08); }
.faixa-texto { font-weight: 700; font-size: clamp(1.4rem, 5vw, 2.4rem); text-align: center; }
.icone-whats {
  position: absolute; right: 4%; top: 50%; transform: translateY(-50%);
  width: 84px; height: 84px; padding: 16px; border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #5fd36f, #1fae3f);
  border: 5px solid var(--branco); box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
}

/* Blocos */
.bloco { max-width: 960px; margin: 0 auto; padding: 52px 20px 0; }
.bloco h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 28px; }

/* Avaliações */
.avaliacoes { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 28px; 
}

.aval { 
  text-align: center; 
}

.caixa-aval {
  background: transparent; /* Fundo transparente */
  color: var(--branco);     /* Texto em branco para contraste com o fundo escuro */
  border: 1px solid rgba(255, 255, 255, 0.2); /* Borda opcional para delimitar os cards */
  border-radius: 8px;       /* Cantos levemente arredondados */
  aspect-ratio: 1 / .95; 
  padding: 20px;            /* Ligeiro aumento de espaçamento interno */
  display: flex; 
  flex-direction: column; 
  justify-content: space-between; 
  text-align: left;
  font-size: 1.50rem;       /* Tamanho aumentado para o texto principal da avaliação */
  line-height: 1.5;         /* Melhor espaçamento entre linhas */
}

.autor { 
  font-weight: 700; 
  font-size: 1.rem;        /* Tamanho do nome do autor aumentado (era .9rem) */
}

.estrelas { 
  color: var(--amarelo); 
  font-size: 1.8rem;        /* Tamanho das estrelas ligeiramente ajustado */
  letter-spacing: 2px; 
  line-height: 1.3; 
}

/* História */
.historia { max-width: 760px; margin: 0 auto; padding: 64px 20px 48px; }
.historia h2 { text-align: center; font-size: 1.9rem; font-weight: 700; margin-bottom: 24px; }
.historia-texto { text-align: justify; font-size: .98rem; hyphens: auto; }
.historia-texto .abre { text-align: left; margin-bottom: 20px; }
.historia-texto .fecha { text-align: left; margin-top: 24px; }

/* Galeria */
.galeria { max-width: 1000px; margin: 0 auto; display: grid; gap: 4px; }
.linha { display: grid; gap: 4px; }
.linha.dois { grid-template-columns: 1fr 1fr; }
.linha.tres { grid-template-columns: 1fr 1fr 1fr; }
.linha img { width: 100%; object-fit: cover; }
.linha.dois img { aspect-ratio: 1.6 / 1; }
.linha.tres img { aspect-ratio: 1.2 / 1; }

/* Entregas e pagamentos */
.entregas { max-width: 760px; margin: 0 auto; padding: 44px 20px 48px; }
.entregas-topo { display: flex; align-items: center; gap: 16px; }
.entregas-topo img { width: 72px; height: auto; flex: none; }
.entregas-topo p { font-weight: 700; font-size: clamp(1.05rem, 3.4vw, 1.4rem); }
.apps { display: flex; justify-content: center; gap: 28px; margin: 22px 0 28px; flex-wrap: wrap; }
.app {
  display: grid; place-items: center; width: 170px; height: 66px;
  font-weight: 700; font-size: 2.2rem; color: var(--preto);
}
.app.ifood { background: #ff3232; }
.app.ifood img { height: 44px; width: auto; }
.app.noventa { background: var(--amarelo); }
.entregas h3 { text-align: center; font-size: 1.3rem; margin-bottom: 16px; }
.pagamentos { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; }
.pagamentos img { height: 44px; width: auto; }

/* Mapa */
.mapa {
  background: var(--branco); color: var(--preto); max-width: 560px; min-height: 260px;
  margin: 0 auto; display: grid; place-items: center; text-align: center;
  font-weight: 700; font-size: 1.4rem; padding: 16px;
}
.mapa iframe { width: 100%; height: 300px; border: 0; }

/* Rodapé */
.rodape { text-align: center; font-weight: 700; padding: 44px 20px 28px; }
.rodape .espaco { margin-top: 20px; }

@media (max-width: 720px) {
  .faixa-amarela { padding-left: 100px; height: 64px; }
  .logo { width: 104px; height: 104px; left: 3%; }
  .faixa-verde { padding-right: 82px; }
  .icone-whats { width: 66px; height: 66px; padding: 12px; border-width: 4px; }
  .avaliacoes { gap: 10px; }
  .caixa-aval { padding: 8px; font-size: .7rem; }
  .autor { font-size: .65rem; }
  .estrelas { font-size: 1rem; letter-spacing: 0; }
  .historia-texto { font-size: .92rem; }
  .app { width: 150px; height: 60px; font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) { .faixa-verde { transition: none; } }