/* ==================================== */
/* Estilos Globais e Reset */
/* ==================================== */
body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	margin: 0;
	padding: 20px; /* Adiciona padding para não grudar nas bordas do mobile */
	background-color: #f8f8f8; /* Fundo levemente cinza */
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 100vh;
}

/* Container principal para centralizar o conteúdo */
.container {
	width: 100%;
	max-width: 800px; /* Limita a largura para simular um celular */
	text-align: center;
}

/* ==================================== */
/* Seção do Perfil */
/* ==================================== */
.perfil {
	margin-bottom: 20px;
}

.perfil-foto {
	width: 96px;
	height: 96px;
	border-radius: 50%; /* Torna a imagem redonda */
	object-fit: cover;
	border: 2px solid #fff; /* Borda branca (opcional, dependendo do fundo) */
	box-shadow: 0 0 0 2px #ffc0cb; /* Uma sombra levemente rosa para destacar */
	margin-bottom: 10px;
}

.perfil-nome {
	font-size: 1.2em;
	font-weight: bold;
	color: #333;
	margin: 5px 0 8px 0;
}

.perfil-bio {
	font-size: 0.95em;
	color: #555;
	line-height: 1.4;
}

/* Ícone do Instagram */
.perfil-instagram-icon {
	display: block;
	margin: 15px auto 30px auto;
	font-size: 30px;
	color: #333;
	/* Se for usar um ícone SVG ou Font Awesome, substitua aqui. */
}

/* Ícone do Instagram (usando um placeholder simples) */
.instagram-icon {
	display: inline-block;
	width: 30px;
	height: 30px;
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
	border-radius: 8px;
	margin: 15px 0;
	position: relative;
}

.instagram-icon::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 10px;
	height: 10px;
	border: 2px solid #fff;
	border-radius: 50%;
}

.instagram-icon::after {
	content: "";
	position: absolute;
	top: 2px;
	right: 2px;
	width: 2px;
	height: 2px;
	background-color: #fff;
	border-radius: 50%;
}


/* ==================================== */
/* Estilos dos Botões de Links */
/* ==================================== */
.area-botoes {
  display: flex;
  justify-content: center; /* centraliza filhos horizontalmente */
  flex-direction: column; /* força um embaixo do outro */
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
}
.link-botao {
	display: flex;
	align-items: center;
	background-color: #ffffff; /* Fundo branco para os botões */
	border: 1px solid #eee; /* Borda sutil */
	border-radius: 40px;
	text-decoration: none;
	padding: 15px 20px;
	margin-bottom: 10px;
	color: #333;
	font-weight: 500;
	transition: background-color 0.2s, box-shadow 0.2s;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Sombra sutil */
	max-width: 400px; /* Limita a largura para simular um celular */
}

.link-botao:hover {
	background-color: #f4f4f4;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.link-icone {
	width: 35px; /* Tamanho do ícone */
	height: 35px;
	border-radius: 8px; /* Borda levemente arredondada para o ícone */
	margin-right: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: white;
	flex-shrink: 0; /* Impede que o ícone encolha */
}

/* Estilos específicos dos ícones (simulação de cores) */
.icone-shopee {
	background-color: #ff5722; /* Laranja Shopee */
}
.icone-whatsapp {
	background-color: #25d366; /* Verde WhatsApp */
}
.icone-natura {
	background-color: #ff9100; /* Laranja/Amarelo Natura */
}

/* Texto do cupom com destaque */
.cupom-texto {
	font-weight: bold;
	color: #000;
	margin-left: 5px;
}

/* Ajuste do texto no centro do botão */
.link-texto {
	flex-grow: 1; /* Faz o texto ocupar o espaço restante */
	text-align: center;
	font-size: 1.05em;
}

.rodape {
	margin-top: 70px;
	color: #7A7A7A; /* Um cinza escuro, ajuste se necessário */
    font-family: Arial, Helvetica, sans-serif; /* Fontes sans-serif comuns */
    font-size: 12px; /* Tamanho da fonte, ajuste se necessário */
    font-weight: normal; /* Peso normal da fonte */
    line-height: 1.5; /* Espaçamento entre linhas, 1.5 é um bom padrão para legibilidade */
    margin: 20px 0; /* Margem superior e inferior, ajuste conforme o layout */
    padding: 0 15px; /* Preenchimento lateral, se o texto não for de ponta a ponta */
    text-align: left; /* Alinhamento do texto */
}