/* Cabeçalho da Página */
p, li, a {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #555;
    text-align: justify;
    margin: 0 0 10px 0;
}

b {
    font-weight: bold;
}

.cabecalho {
    text-align: center; /* Centraliza o conteúdo do container */
}

.cabecalho .titulo h1 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 28px;
    font-weight: 700;
    margin: 20px 15px;
    color: #333;
    /* O h1 já está centralizado pelo text-align do pai */
}

.cabecalho .corpo p {
    color: #555;
    text-align: center;
    margin: 0 25px 15px;
}

/* Title */
.title {
    text-align: left; /* centraliza o h2 */
    margin: 20px 30px; /* distância do título até os cards */
    width: 100%; /* ocupa toda a largura */
}

.title h2 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #333;
}

/* Box */
.box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    "direitos cards-box"
    "cartilhas cards-box";
    gap: 30px;
    margin: 40px auto; /* centraliza o grid */
    max-width: 1200px; /* impede o grid de ultrapassar a tela */
    box-sizing: border-box;
    padding: 0 20px; /* adiciona espaço interno lateral */
}

.cards-box img, .cartilhas, .direitos {
    max-width: 100%; /* garante que nada estoure a largura */
    box-sizing: border-box;
}

.direitos {
    grid-area: direitos;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.corpo p {
    margin: 10px 0;
}

.corpo ul {
    list-style: none; /* Remove os marcadores padrão */
    padding-left: 15px;
}


.corpo li::before {
    content: '\2022'; /* Símbolo de bolinha */
    color: #e0b800; /* Azul para destacar */
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: 0;
}

.cartilhas {
    grid-area: cartilhas;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.cartilhas ul, .direitos ul {
    list-style: none;
    padding-left: 0;
}

.cartilha-card li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 15px;
}


.cartilha-card li::before {
    content: '\279C'; /* Seta decorativa ➜ */
    position: absolute;
    left: 0;
    color: #e0b800; /* Azul */
    font-size: 1.1em;
    line-height: 1;
}

.direitos li {
    margin-bottom: 10px;
}

/* Estilo dos links das cartilhas */
.cartilha-card a {
color: #000;
text-decoration: none;
transition: color 0.3s;
display: block;
}

.cartilhas a:hover, .cartilhas a:focus, .cartilhas a:active {
    color: #007BFF;
}

.cartilha-card a p {
font-weight: bold;
display: inline;
}

.cards-box {
    grid-area: cards-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cards-box .card1, .cards-box .card2 {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* empurra o botão para o fim */
    height: 100%;
}

.cards-box h3 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px; /* Reduzi o espaço abaixo do h3 */
    color: #333;
    text-align: center;
}

.cards-box .card1 p, .cards-box .card2 p {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    color: #555;
    text-align: justify;
    margin: 0 0 10px 0;
}


.cards-box .btn {
    align-self: center; /* mantém o botão alinhado à esquerda */
    margin-top: auto; /* garante que o botão vá para o fim */
}

.card-box, .img-cards-box {
    width: 100%;        /* Ocupa toda a largura do card */
    height: 200px;      /* Altura fixa para todas as imagens */
    object-fit: cover;  /* Mantém a proporção e corta partes extras */
    border-radius: 10px 10px 0 0; /* Cantos arredondados no topo */
    margin-bottom: 10px;

}

.btn {
    text-decoration: none;
    background-color: #f2c94c;
    color: #000;
    padding: 8px 16px; /* Botão menor e compacto */
    border-radius: 5px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #e0b800; /* Tom mais escuro ao passar mouse */
}


@media (max-width: 900px) {
    .box {
        grid-template-columns: 1fr;
        grid-template-areas:
          "direitos"
          "cartilhas"
          "cards-box";
    }
}

    /* ====== RESPONSIVO PARA TABLETS ====== */
@media (max-width: 768px) {
  .cabecalho {
    text-align: center;
    padding: 0 20px;
  }

  .cabecalho .titulo h1 {
    font-size: 24px;
    margin: 20px 0;
  }

  .cabecalho .corpo p {
    font-size: 15px;
    margin: 0 15px 25px;
    text-align: center;
  }

  .box {
    grid-template-columns: 1fr;
    grid-template-areas:
      "direitos"
      "cartilhas"
      "cards-box";
    gap: 25px;
    padding: 0 20px;
  }

  .direitos,
  .cartilhas,
  .cards-box .card1,
  .cards-box .card2 {
    padding: 20px;
    text-align: center;
  }

  .cards-box {
    align-items: center;
  }

  .cards-box h3 {
    font-size: 17px;
  }

  .cards-box .card1 p,
  .cards-box .card2 p {
    text-align: center;
  }

  .card-box, .img-cards-box {
    height: 200px;
  }

  .btn {
    font-size: 15px;
    padding: 8px 16px;
  }

  @media (max-width: 480px) {
  .cabecalho {
    text-align: center;
    padding: 0 15px;
  }

  .cabecalho .titulo h1 {
    font-size: 22px;
    margin: 15px 0;
  }

  .cabecalho .corpo p {
    font-size: 14px;
    margin: 0 10px 20px;
    text-align: center;
  }

  .box {
    grid-template-columns: 1fr;
    grid-template-areas:
      "direitos"
      "cartilhas"
      "cards-box";
    gap: 20px;
    padding: 0 10px;
  }

  .direitos,
  .cartilhas,
  .cards-box .card1,
  .cards-box .card2 {
    padding: 15px;
    text-align: center;
  }

  .cards-box {
    align-items: center;
  }

  .cards-box h3 {
    font-size: 16px;
  }

  .cards-box .card1 p,
  .cards-box .card2 p {
    text-align: center;
  }

  .card-box, .img-cards-box {
    height: 180px;
  }

  .btn {
    font-size: 14px;
    padding: 6px 14px;
  }
}
}