@charset "utf-8";
/* CSS Document */
/* BOTÃO AMARELO — estilo base */
.botao-amarelo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 16px 26px !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
  background: #FBBC05 !important;
  border-radius: 10px !important;
  margin: 22px 0 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;

  width: 100% !important;        /* garante mesma largura */
  max-width: 420px !important;   /* mantém bonito no desktop */
  position: relative !important; /* necessário para o ícone absoluto */
}

/* ÍCONE DE CALCULADORA */
.botao-amarelo::before {
  content: "" !important;
  width: 26px !important;
  height: 26px !important;
  background-image: url('data:image/svg+xml;utf8,\
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\
<rect x="5" y="3" width="14" height="18" rx="2" stroke="%23000000" stroke-width="2"/>\
<rect x="8" y="7" width="8" height="2" fill="%23000000"/>\
<circle cx="9" cy="13" r="1.5" fill="%23000000"/>\
<circle cx="12" cy="13" r="1.5" fill="%23000000"/>\
<circle cx="15" cy="13" r="1.5" fill="%23000000"/>\
<circle cx="9" cy="17" r="1.5" fill="%23000000"/>\
<circle cx="12" cy="17" r="1.5" fill="%23000000"/>\
<circle cx="15" cy="17" r="1.5" fill="%23000000"/>\
</svg>') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;

  position: absolute !important;
  left: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* HOVER */
.botao-amarelo:hover {
  background: #FFD84A !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.30) !important;
  transform: translateY(-2px) !important;
}

/* ACTIVE */
.botao-amarelo:active {
  transform: translateY(1px) !important;
  box-shadow: 0 3px 6px rgba(0,0,0,0.20) !important;
}

/* MOBILE — texto centralizado, ícone fixo à esquerda */
@media (max-width: 576px) {
  .botao-amarelo {
    text-align: center !important;
    justify-content: center !important;
  }
}