/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/* RESET */
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: #f2f2f2;
  color: #333;
}

/* HEADER */
header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  background-image: linear-gradient(
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.55)
  ),
  url("header.jpg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color: #fff;
  padding: 60px 15px;
}

header h1 {
  margin: 0;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: clamp(1.8rem, 5vw, 3rem);
}

header p {
  margin: 10px 0 15px;
  font-weight: bold;
  opacity: 0.95;
  font-size: clamp(1rem, 3.5vw, 1.2rem);
}

/* SOCIAL */
.social {
  margin-top: 10px;
  font-size: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.social a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.social a:hover {
  text-decoration: underline;
}

/* ÍCONE INSTAGRAM (OFICIAL SVG) */
.insta-icon {
  width: 16px;
  height: 16px;
  fill: #fff;
  display: block;
}

/* CONTAINER */
.container {
  max-width: 900px;
  margin: 25px auto;
  padding: 15px;
}

/* CARD PRODUTO */
.product {
  background: #fff;
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 18px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
  text-align: center;
}

.product h2 {
  margin: 0 0 10px;
  font-size: 18px;
}

.product p {
  font-size: 14px;
  margin-bottom: 14px;
}

/* BOTÃO (todos iguais) */
.btn {
  display: inline-block;
  padding: 10px 18px;
  text-decoration: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background: #ff7a00;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

/* FOOTER */
footer {
  text-align: center;
  font-size: 12px;
  color: #777;
  padding: 25px 15px;
}

/* MOBILE */
@media (max-width: 600px) {
  header {
    padding: 40px 15px;
  }
}