/* === Estilo global === */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #ff00cc;        /* Fundo rosa principal */
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;                 /* Mantém a página centralizada */
}

/* === Container principal === */
.container {
  background-color: #a30089;         /* Caixa central roxo/rosa escuro */
  max-width: 600px;
  width: 90%;
  padding: 30px;
  border-radius: 15px;
  text-align: center;
}

/* === Logo / imagem de perfil === */
.container img.perfil {
  width: 120px;                      /* Tamanho pequeno da logo inicial */
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 15px;
  border: 4px solid white;
}

/* === Textos principais === */
h1 {
  font-size: 22px;
  margin-bottom: 10px;
  color: #fff;                       /* Texto branco no título */
}

p {
  font-size: 16px;
  margin: 10px 0 20px;
  color: #fff;                       /* Texto branco no parágrafo */
}

/* === Área de logos (categorias) === */
.logos {
  display: flex;                       /* Coloca as logos lado a lado */
  flex-wrap: wrap;                     /* Quebra linha em telas menores */
  justify-content: center;             /* Centraliza horizontalmente */
  gap: 15px;                           /* Espaço entre os itens */
  background: #ff00cc;               /* Fundo rosa igual ao body */
  padding: 15px;
  border-radius: 10px;
  margin: 20px 0;
}

.logos figure {
  text-align: center;                   /* Centraliza cada bloco */
  margin: 0;
}

.logos img {
  width: 80px;         /* mesma largura */
  height: 80px;        /* mesma altura */
  object-fit: cover;   /* corta para preencher a caixa sem distorcer */
  border-radius: 8px;  /* opcional: cantos arredondados */
}

.logos figcaption {
  margin-top: 4px;
  font-size: 14px;
  color: #fff;                        /* Texto branco da legenda */
}

/* === Seção de benefícios === */
.beneficios {
  text-align: left;
  margin: 20px 0;
}

.beneficios p {
  display: flex;
  align-items: center;
  font-size: 16px;
  margin: 8px 0;
}

.beneficios span {
  color: limegreen;                     /* Cor do ícone de check */
  font-size: 20px;
  margin-right: 10px;
}

/* === Botão de WhatsApp === */
.btn {
  display: inline-block;
  background: limegreen;
  color: white;
  font-size: 18px;
  font-weight: bold;
  padding: 15px 25px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s;
}

.btn:hover {
  background: green;
}

/* === Rodapé === */
.rodape {
  margin-top: 20px;
  font-size: 13px;
  color: #ddd;
}