:root{
  --max: 1366px;

  --page-bg: #ffffff;
  --line: #e6e6e6;

  --search-bg: #F2F2F7;
  --home-pill-bg: #F5F5F5;

  --card-bg: #F0F3FF;
  --type-green: #11B047;
  --id-color: #263156;
  --name-color: #212E4C;

  --gap-x: 17px;
  --gap-y: 16px;

  --card-w: 203px;
  --card-h: 285px;

  --radius-card: 12px;
  --radius-pill: 999px;
}

*{ box-sizing: border-box; }
body{
  margin:0;
  background: var(--page-bg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#111;
}

.topbar{
  border-bottom: 1px solid var(--line);
}
.topbar__inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.nav{
  display:flex;
  align-items:center;
  gap: 18px;
}
.nav__link{
  text-decoration:none;
  color:#111;
  font-size:14px;
}
.nav__link--pill{
  background: var(--home-pill-bg);
  padding: 6px 12px;
  border-radius: 10px;
}

.page{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px 32px;
}

.controls{
  padding-top: 34px; /* espaço do header -> search */
  padding-bottom: 24px;
}
.search{
  width: 720px;
  height: 56px;
  margin: 0 auto;
  position: relative;
}
.search__input{
  width: 100%;
  height: 100%;
  border: 0;
  outline: none;
  background: var(--search-bg);
  border-radius: var(--radius-pill);
  padding: 0 56px 0 56px; /* bate o recuo do texto (~57px) */
  font-size: 14px;
  color:#111;
}
.search__input::placeholder{
  color: #9D9BA3;
}
.search__icon{
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  opacity: .9;
}

.filtersRow{
  width: 720px;
  margin: 12px auto 0;
  display:flex;
  justify-content:flex-end;
}
.filtersRow__select{
  border: 0;
  outline: none;
  background: var(--search-bg);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 13px;
  color:#333;
}

.grid{
  display:grid;
  grid-template-columns: repeat(6, var(--card-w));
  column-gap: var(--gap-x);
  row-gap: var(--gap-y);
  justify-content: start;
  padding-top: 8px;
  padding-bottom: 24px;
}

.card{
  width: var(--card-w);
  height: var(--card-h);
  background: var(--card-bg);
  border-radius: var(--radius-card);
  padding: 16px 16px 14px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.card__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  font-size: 13px;
  font-weight: 700;
}
.card__type{ color: var(--type-green); }
.card__id{ color: var(--id-color); }

.card__img{
  display:grid;
  place-items:center;
  flex: 1;
}
.card__img img{
  width: 120px;
  height: 120px;
  object-fit: contain;
}

.card__name{
  text-align:center;
  font-weight: 700;
  font-size: 14px;
  color: var(--name-color);
  padding-bottom: 8px;
}

.pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 18px;
  padding: 18px 0 8px;
}
.pagination__btn{
  border:0;
  background:transparent;
  font-size:14px;
  cursor:pointer;
  color:#111;
}
.pagination__btn:disabled{
  cursor:not-allowed;
  color:#B3B3B3;
}

.pagination__pages{
  display:flex;
  gap: 18px;
  align-items:center;
}
.pagebtn{
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:14px;
  color:#111;
  padding: 0;
}
.pagebtn--active{
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background:#1E1E1E;
  color:#fff;
  display:grid;
  place-items:center;
}

@media (max-width: 1320px){
  .grid{ 
    grid-template-columns: repeat(4, var(--card-w)); 
    justify-content: center;
}
}
@media (max-width: 900px){
  .search, .filtersRow{ width: 100%; }
  .grid{ grid-template-columns: repeat(2, minmax(0, var(--card-w))); justify-content:center; }
}
@media (max-width: 520px){
  .grid{ grid-template-columns: 1fr; justify-content:stretch; }
  .card{ width: 100%; }
}

@media (max-width: 768px){
    .filtersRow__select{
        width: 100%;
    }
    .search__input{
        font-size: 12px;
    }
}

.siteFooter{
  max-width: var(--max);
  margin: 18px auto 0;
  padding: 16px 32px 28px;
  border-top: 1px solid var(--line);
  color: #6b7280;
  font-size: 13px;
  text-align: center;
}

.pagination__btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.pagination__icon{
  width: 9px; 
  height: 9px;
  object-fit: contain;
}

.pagination__btn:disabled .pagination__icon{
  opacity: .35;
}