/* Removemos o antigo .oasis-btn em prol da abordagem gráfica baseada no mockup */

/*
  Botão "Ler mais" -- desenhado diretamente em CSS (pílula verde +
  bolinha laranja), em vez de depender de uma imagem cuja proporção
  real nunca sabíamos ao certo. Mais simples, mais previsível, e
  visualmente igual ao mockup.
*/
.oasis-btn-graphic {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 26px;
  background: var(--oasis-green, #8bc34a);
  /* !important necessário -- a regra global ".oasis-home a { color: inherit; }"
     em base.css é mais específica (elemento + classe) do que ".oasis-btn-graphic"
     sozinha, e ganhava sempre, apesar desta declaração aqui. */
  color: #ffffff !important;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--oasis-radius-pill, 999px);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.3s ease;
}

.oasis-btn-graphic::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--oasis-orange, #f3a13a);
  flex-shrink: 0;
}

.oasis-btn-graphic:hover,
.oasis-btn-graphic:focus {
  transform: translateY(-3px) scale(1.03);
  filter: drop-shadow(0 4px 10px rgba(14, 42, 77, 0.15));
}

/*
  Botão "ver todas" -- mesma lógica, pílula azul com uma bolinha
  laranja de cada lado (como no mockup original).
*/
.oasis-btn-ver-todas {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 30px;
  background: #08a5dc;
  color: #ffffff !important;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  text-transform: lowercase;
  white-space: nowrap;
  border-radius: var(--oasis-radius-pill, 999px);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.3s ease;
}

.oasis-btn-ver-todas::before,
.oasis-btn-ver-todas::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translateY(-50%);
  border-radius: 50%;
}

.oasis-btn-ver-todas::before { right: calc(100% + 10px); background: var(--oasis-orange, #f3a13a); }
.oasis-btn-ver-todas::after  { left: calc(100% + 10px);  background: var(--oasis-green, #8bc34a); }

.oasis-btn-ver-todas:hover,
.oasis-btn-ver-todas:focus {
  transform: translateY(-2px);
  filter: drop-shadow(0 4px 10px rgba(14, 42, 77, 0.15));
}