/* =================================================================== */
/* ========================== FONTES E ICONS ========================= */
/* =================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
/* =================================================================== */
/* ========================== PALETA DE CORES ======================== */
/* =================================================================== */
:root {
  --azul-primario: #0080ff;
  --azul-secundario: #002243;
  --azul-terciario: #101820;

  --cinza-claro: #f4f6f8;
  --cinza-medio: #e9e9e9;
  --cinza-escuro: #6c7884;

  --branco: #ffffff;

  --verde: #1ca800;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Instrument Sans";
}

.header-container {
  background-color: var(--azul-secundario);
  padding: 20px 50px 20px 50px;
  border-radius: 10px;
  margin-bottom: 200px;
}

.produtos {
  background-color: white;
  padding: 50px;
}

.titulo {
  padding: 50px;
}

.titulo h2{
    font-size: 38px;
    width: 450px;
    color: var(--azul-secundario);
}

.titulo p{
    color: var(--cinza-escuro);
    font-size: 18px;
    margin-top: 10px;
}
@media (max-width: 1024px) {
  header { margin-bottom: 0; }
  .header-container { margin-bottom: 80px; }
  .produtos { padding: 32px 28px; }
  .titulo { padding: 36px 28px; }
  .titulo h2 { width: min(450px, 100%); font-size: 34px; }
  .card-categoria { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .card-categoria a { width: 100%; height: 370px; gap: 0; }
  .card-categoria img { width: 100%; max-width: 230px; padding: 24px 16px 140px; object-fit: contain; }
  .descricao-seta p { width: auto; }
}
@media (max-width: 640px) {
  header { margin-bottom: 0; }
  .header-container { width: calc(100% - 28px); margin: 12px auto 30px; padding: 18px 16px; }
  .produtos { padding: 22px 14px; }
  .titulo { padding: 28px 20px; }
  .titulo h2 { width: 100%; font-size: 30px; }
  .titulo p { font-size: 16px; line-height: 1.5; }
  .card-categoria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px 0 26px; }
  .card-categoria a { min-width: 0; height: 300px; margin: 0; }
  .card-categoria a:hover { transform: none; }
  .card-categoria img { width: 100%; height: 100%; padding: 12px 8px 110px; }
  .descricao-produto { height: 125px; padding: 11px; }
  .descricao-produto h2 { font-size: 17px; }
  .descricao-seta { gap: 6px; }
  .descricao-seta p { width: auto; font-size: 12px; line-height: 1.35; }
  .descricao-seta i { font-size: 24px; }
}
@media (max-width: 380px) { .card-categoria { grid-template-columns: 1fr; } .card-categoria a { height: 330px; } }