/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  text-align: center;
  background-color: #fafafa;
}

/* Cabeçalho */
header {
  background-color: #0059ff;
  color: white;
  padding: 20px;
}

/* Cards */
.caixa {
  display: flex;
  flex-wrap: wrap; /* permite quebrar linha */
  justify-content: center; /* centraliza */
  gap: 15px; /* espaço entre itens */
  padding: 20px;
}

.card {
  background-color: #f2f2f2;
  padding: 15px;
  border: 1px solid #ccc;
  width: 250px;
  text-align: center;
}

/* Lista */
ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: #0059ff;
}

a:hover {
  text-decoration: underline; /* efeito novo */
}

/* Sessão "Como usar" */
.como-usar {
  padding: 20px;
  background-color: #e9e9e9;
  margin: 20px auto;
  border: 1px solid #ccc;
  max-width: 600px;
  text-align: left;
}

.como-usar ul {
  text-align: left !important;
}

/* Rodapé */
footer {
  text-align: center;
  padding: 15px;
  background-color: #f2f2f2;
  margin-top: 20px;
}

/* ================================
   RESPONSIVIDADE (NOVO)
   ================================ */

/* Tablet */
@media (max-width: 768px) {
  .card {
    width: 45%; /* 2 cards por linha */
  }
}

/* Celular */
@media (max-width: 576px) {
  .card {
    width: 90%; /* 1 card por linha */
  }

  body {
    font-size: 14px; /* texto menor no celular */
  }

  .como-usar {
    max-width: 95%; /* ocupa mais espaço no celular */
  }
}

/* Celular pequeno */
@media (max-width: 360px) {
  body {
    font-size: 13px; /* texto ainda menor */
  }

  .card {
    width: 100%; /* ocupa toda a tela */
  }
}