/* =============================================================
   DOCES PALESTINA — Contato, Onde Comprar, Nossa História
   Arquivo: assets/css/contato.css
   Desenvolvedor: Juliano Alves
   ============================================================= */

/* -----------------------------------------------------------
   Página de Contato
   ----------------------------------------------------------- */
.contato-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--esp-12);
  align-items: start;
}

.contato-info h2 {
  font-size: var(--tamanho-3xl);
  color: var(--cor-primaria);
  margin-bottom: var(--esp-4);
}
.contato-info > p {
  color: var(--cor-texto-suave);
  font-size: var(--tamanho-md);
  line-height: 1.7;
  margin-bottom: var(--esp-8);
}

.contato-dado {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-4);
  margin-bottom: var(--esp-6);
  padding: var(--esp-5);
  background: var(--cor-branco);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sm);
  transition: var(--trans-normal);
}
.contato-dado:hover {
  box-shadow: var(--sombra-md);
  transform: translateX(4px);
}
.contato-dado__icone {
  width: 48px;
  height: 48px;
  border-radius: var(--raio-md);
  background: linear-gradient(135deg, var(--cor-primaria), var(--cor-primaria-claro));
  color: var(--cor-acento);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contato-dado__icone svg { width: 22px; height: 22px; }
.contato-dado__corpo h4 {
  font-size: var(--tamanho-sm);
  color: var(--cor-texto-claro);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: var(--esp-1);
}
.contato-dado__corpo p, .contato-dado__corpo a {
  font-size: var(--tamanho-md);
  color: var(--cor-primaria);
  font-weight: var(--peso-semi);
}
.contato-dado__corpo a:hover { color: var(--cor-destaque); }

/* Formulário de contato */
.contato-form-box {
  background: var(--cor-branco);
  border-radius: var(--raio-xl);
  box-shadow: var(--sombra-lg);
  padding: var(--esp-10);
}
.contato-form-box h3 {
  font-size: var(--tamanho-2xl);
  color: var(--cor-primaria);
  margin-bottom: var(--esp-6);
}

/* -----------------------------------------------------------
   Onde Comprar
   ----------------------------------------------------------- */
.onde-tabs {
  display: flex;
  gap: var(--esp-3);
  margin-bottom: var(--esp-10);
  border-bottom: 2px solid var(--cor-borda);
}
.onde-tab-btn {
  padding: var(--esp-3) var(--esp-6);
  font-family: var(--fonte-titulo);
  font-size: var(--tamanho-sm);
  font-weight: var(--peso-semi);
  color: var(--cor-texto-suave);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: var(--trans-rapida);
}
.onde-tab-btn:hover { color: var(--cor-primaria); }
.onde-tab-btn.ativo {
  color: var(--cor-primaria);
  border-bottom-color: var(--cor-acento);
}
.onde-tab-conteudo { display: none; }
.onde-tab-conteudo.ativo { display: block; }

.onde-card {
  background: var(--cor-branco);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sm);
  padding: var(--esp-6);
  display: flex;
  align-items: flex-start;
  gap: var(--esp-4);
  margin-bottom: var(--esp-4);
  transition: var(--trans-normal);
  border-left: 4px solid var(--cor-acento);
}
.onde-card:hover {
  box-shadow: var(--sombra-md);
  transform: translateX(4px);
}
.onde-card__icone {
  width: 44px;
  height: 44px;
  border-radius: var(--raio-md);
  background: var(--cor-acento-claro);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--cor-primaria);
}
.onde-card__icone svg { width: 20px; height: 20px; }
.onde-card__nome {
  font-size: var(--tamanho-lg);
  font-weight: var(--peso-bold);
  color: var(--cor-primaria);
  margin-bottom: var(--esp-2);
}
.onde-card__detalhe {
  font-size: var(--tamanho-sm);
  color: var(--cor-texto-suave);
  line-height: 1.6;
  margin-bottom: var(--esp-1);
}

/* -----------------------------------------------------------
   Nossa História
   ----------------------------------------------------------- */
.historia-conteudo {
  max-width: 820px;
  margin-inline: auto;
}
.historia-conteudo h2, .historia-conteudo h3 {
  color: var(--cor-primaria);
  margin-top: var(--esp-8);
  margin-bottom: var(--esp-4);
}
.historia-conteudo p {
  font-size: var(--tamanho-md);
  color: var(--cor-texto-suave);
  line-height: 1.8;
  margin-bottom: var(--esp-5);
}
.historia-destaque {
  background: linear-gradient(135deg, var(--cor-primaria) 0%, var(--cor-primaria-claro) 100%);
  color: var(--cor-branco);
  border-radius: var(--raio-xl);
  padding: var(--esp-10) var(--esp-12);
  text-align: center;
  margin-block: var(--esp-12);
}
.historia-destaque blockquote {
  font-size: var(--tamanho-2xl);
  font-family: var(--fonte-titulo);
  font-style: italic;
  color: var(--cor-acento);
  line-height: 1.4;
}