@charset "utf-8";

/* =========================
   BUSCA (sempre visível)
   ========================= */

.area_busca{
  background: #1A1A1A;
  padding: 12px 20px 24px;
}

.form_busca{
  margin: 8px 0 16px;
  position: relative;
}

#campoBusca{
  width: 100%;
  height: 56px;
  /* espaço à direita para o botão */
  padding: 0 5px 0 18px;
	caret-color: #00DC00;
  border-radius: 14px;
  border: 2px solid #00DC00;
  background: #1A1A1A;
  color: #fff;
  font-size: 18px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
#campoBusca::placeholder{ color: #9aa0a6; }
#campoBusca:focus{
  border-color: #00DC00;
  box-shadow: 0 0 0 3px rgba(0,220,0,.18);
}


/* Chrome/Edge/Safari: substitui o X nativo por um SVG verde */
#campoBusca::-webkit-search-cancel-button{
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  background: no-repeat center/18px 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6L18 18M18 6L6 18' stroke='%2300DC00' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  margin-right: 58px; /* afasta do canto para não colidir com o botão de buscar */
  cursor: pointer;
  border-radius: 6px;
}
#campoBusca::-webkit-search-cancel-button:hover{
  background-color: rgba(0,220,0,.12);
}

/* IE antigo (só para garantir) */
#campoBusca::-ms-clear{ display:none; }

/* Botão de busca (ícone) */
.BT_ExecutaBusca{
  position: absolute;
  top: 50%;
  right:5px;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 0;
  background: url(../imagem/bt_pesquisa.svg) no-repeat center center;
  background-size: 50px 50px;
  cursor: pointer;
  transition: background-color .2s ease, transform .1s ease;
}
.BT_ExecutaBusca:hover,
.BT_ExecutaBusca:focus-visible{
  background-color: rgba(0,220,0,.12);
}

/* =========================
   GRID de resultados
   ========================= */
.grid_cards{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1100px){ .grid_cards{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px){  .grid_cards{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){  .grid_cards{ grid-template-columns: 1fr; } }

.card_dest{
  background: #111;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #2a2a2a;
  display: flex;
  flex-direction: column;
  transition: transform .12s ease, box-shadow .2s ease;
}
.card_dest:hover{ transform: translateY(-2px); box-shadow: 0 4px 18px rgba(0,0,0,.35); }
.card_dest a{ color: inherit; display: block; }

.card_dest .thumb{
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: #000;
  display: block;
}
.card_dest .titulo{
  padding: 10px 12px 12px;
  color: #fff;
  font-weight: 600;
  line-height: 1.35;
}
.card_dest .titulo a:hover,
.card_dest .titulo a:focus-visible{ color: #DC0000; }